@eclipse-scout/core 22.0.0 → 22.0.10

package/dist/eclipse-scout-core-theme.css

@@ -223,7 +223,7 @@ input[type="password"].alternative {
   padding-bottom: 1px;
   /* Compensate padding-bottom to align input text with label on the left */
   /* It won't be perfect (especially when zoomed) but should be good enough */
-  padding-top: 1px;
+  padding-top: 2px;
 }
 input.alternative,
 .input-field.alternative {
@@ -711,6 +711,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .button > .icon {
   /* Padding only relevant for icons larger than the container */
@@ -904,7 +905,7 @@ iframe {
   vertical-align: middle;
 }
 .box-content {
-  border: 1px solid #DADADA;
+  border: 0 solid #DADADA;
   border-radius: 12px;
   background-color: #fff;
   max-width: 450px;
@@ -917,7 +918,7 @@ iframe {
   text-align: center;
 }
 .box-content > .header > .logo {
-  margin-top: 5px;
+  margin-top: 4px;
   margin-bottom: 40px;
   max-height: 30px;
 }
@@ -937,21 +938,23 @@ iframe {
 }
 @media (max-width: 490px) {
   .box-content {
-    padding: 20px;
+    padding: 40px;
     margin-left: 10px;
     margin-right: 10px;
   }
   .box-content > .header > .logo {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    margin-top: 0;
   }
 }
 @media (max-height: 400px) {
   .box-content {
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: 25px;
+    padding-bottom: 25px;
   }
   .box-content > .header > .logo {
     margin-bottom: 20px;
+    margin-top: 0;
   }
 }
 @media (max-height: 700px) {
@@ -991,6 +994,7 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .check-box {
+  cursor: pointer;
   position: relative;
   display: inline-block;
   text-align: center;
@@ -1039,6 +1043,7 @@ iframe {
   background-color: #fff;
 }
 .check-box.disabled {
+  cursor: default;
   border-color: #DADADA;
 }
 .check-box.disabled.checked {
@@ -1070,13 +1075,6 @@ iframe {
 .calendar-scrollable-components {
   height: 100%;
 }
-.calendar-week-scrollable {
-  overflow: visible;
-}
-.calendar-scrollable-components-week {
-  top: calc(23px + 5px);
-  height: calc(15% - ( 23px  + 5px));
-}
 .calendar-header {
   position: relative;
   display: block;
@@ -1196,7 +1194,8 @@ iframe {
   cursor: pointer;
 }
 .calendar-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
   border-top: 1px solid rgba(0, 0, 0, 0.23);
   border-bottom: 1px solid rgba(0, 0, 0, 0.23);
   border-left: 1px solid rgba(0, 0, 0, 0.23);
@@ -1397,9 +1396,15 @@ iframe {
   height: calc(100% - 25px);
   padding-right: 20px;
 }
+.calendar-grid + .scroll-shadow {
+  --scroll-shadow-inset-right: 20px;
+}
 .calendar-grid.mobile {
   padding-right: 6px;
 }
+.calendar-grid.mobile + .scroll-shadow {
+  --scroll-shadow-inset-right: 6px;
+}
 .calendar-grid.calendar-grid-short {
   height: calc(100% - 105px);
 }
@@ -1872,6 +1877,7 @@ iframe {
   cursor: default;
   font-size: 18px;
   line-height: 30px;
+  margin-top: 1px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2820,7 +2826,8 @@ iframe {
   margin: 8px 3px 0 0;
   padding: 10px 10px 0 20px;
   border-radius: 12px 12px 0 0;
-  border-right-width: 0;
+  border: 0 solid transparent;
+  border-bottom-width: 0;
   background-color: rgba(0, 0, 0, 0.1);
 }
 .closable.desktop-tab.simple-tab > .title-line {
@@ -2887,6 +2894,7 @@ iframe {
 .desktop-tab.simple-tab:hover,
 .desktop-tab.simple-tab:active {
   background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
 }
 .desktop-tab.simple-tab:hover > .title-line > .title,
 .desktop-tab.simple-tab:active > .title-line > .title {
@@ -2909,6 +2917,7 @@ iframe {
 }
 .desktop-tab.simple-tab.selected {
   background-color: #fff;
+  border-color: transparent;
 }
 .desktop-tab.simple-tab.selected > .title-line > .icon-container {
   color: #808080;
@@ -2942,19 +2951,22 @@ iframe {
   position: absolute;
   pointer-events: none;
   background-color: transparent;
-  bottom: 0;
-  height: 48px;
-  width: 24px;
-  box-shadow: 0 24px 0 0 var(--color);
-  clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+  bottom: -5px;
+  height: 12px;
+  width: 12px;
+  box-sizing: content-box;
+  border: 5px solid var(--color);
+  border-top: none;
 }
 .desktop-tab.simple-tab.selected > .edge.left {
-  left: -24px;
-  border-bottom-right-radius: 12px;
+  left: -12px;
+  border-bottom-right-radius: 17px;
+  border-left: none;
 }
 .desktop-tab.simple-tab.selected > .edge.right {
-  right: -24px;
-  border-bottom-left-radius: 12px;
+  right: -12px;
+  border-bottom-left-radius: 17px;
+  border-right: none;
 }
 .desktop-tab.simple-tab.selected > .edge.right {
   z-index: 1;
@@ -3111,16 +3123,18 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .desktop-tab-area > .simple-overflow-tab-item {
-  border-radius: 12px;
-  margin: 8px 3px 6px;
+  border-radius: 8px;
+  margin: 14px 3px 6px;
   background-color: rgba(0, 0, 0, 0.1);
-  border: 0;
+  border: 0 solid transparent;
 }
 .desktop-tab-area > .simple-overflow-tab-item:hover {
   background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
 }
 .desktop-tab-area > .simple-overflow-tab-item.selected {
   background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
 }
 /*
  * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
@@ -3241,6 +3255,9 @@ iframe {
 .desktop-navigation > .desktop-tool-box > .menu-item > .font-icon {
   font-size: 20px;
 }
+.desktop-navigation > .desktop-tool-box > .menu-item.ellipsis > .font-icon {
+  font-size: 22px;
+}
 /*
  * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -3292,7 +3309,7 @@ iframe {
   margin-left: -4px;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -3305,7 +3322,7 @@ iframe {
   position: fixed;
   right: 10px;
   top: 0;
-  height: 100%;
+  height: calc(100% -  72px);
   width: 300px;
   margin-top: 72px;
   pointer-events: none;
@@ -3576,7 +3593,7 @@ iframe {
 }
 .outline.tree > .tree-data > .tree-node > .font-icon,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .font-icon {
-  line-height: 14px;
+  line-height: 15px;
   font-size: 16px;
   color: #999999;
 }
@@ -3589,13 +3606,9 @@ iframe {
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .tree-node-control {
   padding-top: 9px;
   padding-left: 20px;
-  line-height: 14px;
+  line-height: 15px;
   color: #999999;
 }
-.outline.tree > .tree-data > .tree-node > .tree-node-control::before,
-.outline.tree > .tree-data > .animation-wrapper > .tree-node > .tree-node-control::before {
-  font-size: 18px;
-}
 .outline.tree > .tree-data > .tree-node > .tree-node-control:hover,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node > .tree-node-control:hover {
   color: #FE9915;
@@ -3613,6 +3626,10 @@ iframe {
 .outline.tree > .tree-data > .animation-wrapper > .tree-node.selected > .tree-node-control {
   color: rgba(255, 255, 255, 0.7);
 }
+.outline.tree > .tree-data > .tree-node.selected > .tree-node-control:hover,
+.outline.tree > .tree-data > .animation-wrapper > .tree-node.selected > .tree-node-control:hover {
+  color: #FE9915;
+}
 .outline.tree > .tree-data > .tree-node.selected > .font-icon,
 .outline.tree > .tree-data > .animation-wrapper > .tree-node.selected > .font-icon {
   color: rgba(255, 255, 255, 0.7);
@@ -4079,7 +4096,7 @@ iframe {
   bottom: 6px;
 }
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -4103,6 +4120,9 @@ iframe {
 .view-tab.in-background {
   border-radius: 12px;
 }
+.view-tab > .edge {
+  position: absolute;
+}
 .view-tab.selected:not(.in-background) {
   margin: 8px 0 0;
   border-radius: 12px 12px 0 0;
@@ -4112,19 +4132,22 @@ iframe {
   position: absolute;
   pointer-events: none;
   background-color: transparent;
-  bottom: 0;
-  height: 48px;
-  width: 24px;
-  box-shadow: 0 24px 0 0 var(--color);
-  clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+  bottom: -5px;
+  height: 12px;
+  width: 12px;
+  box-sizing: content-box;
+  border: 5px solid var(--color);
+  border-top: none;
 }
 .view-tab.selected:not(.in-background) > .edge.left {
-  left: -24px;
-  border-bottom-right-radius: 12px;
+  left: -12px;
+  border-bottom-right-radius: 17px;
+  border-left: none;
 }
 .view-tab.selected:not(.in-background) > .edge.right {
-  right: -24px;
-  border-bottom-left-radius: 12px;
+  right: -12px;
+  border-bottom-left-radius: 17px;
+  border-right: none;
 }
 .view-tab.selected:not(.in-background) > .edge.right {
   z-index: 1;
@@ -4140,14 +4163,12 @@ iframe {
 .view-tab.animate-bring-to-front:not(.in-background) > .edge.left,
 .view-tab.animate-bring-to-back:not(.in-background) > .edge.left {
   visibility: hidden;
-  left: 0;
-  animation: show-view-tab-left-edge 200ms ease-out 0s forwards;
+  animation: show-view-tab-left-edge 40ms ease-out 160ms forwards;
 }
 .view-tab.animate-bring-to-front:not(.in-background) > .edge.right,
 .view-tab.animate-bring-to-back:not(.in-background) > .edge.right {
   visibility: hidden;
-  right: 0;
-  animation: show-view-tab-right-edge 200ms ease-out 0s forwards;
+  animation: show-view-tab-right-edge 40ms ease-out 160ms forwards;
 }
 .view-button-tab {
   display: flex;
@@ -4188,15 +4209,21 @@ iframe {
   font-size: 20px;
 }
 @keyframes show-view-tab-left-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(-24px);
+    left: -5px;
+  }
+  100% {
+    left: -12px;
   }
 }
 @keyframes show-view-tab-right-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(24px);
+    right: -5px;
+  }
+  100% {
+    right: -12px;
   }
 }
 /*
@@ -4225,7 +4252,7 @@ iframe {
   color: #fff;
 }
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -4245,12 +4272,12 @@ iframe {
   align-items: center;
   justify-content: center;
   background-color: transparent;
+  cursor: pointer;
 }
 .view-menu-tab > .view-button:hover,
 .view-menu-tab > .view-menu:hover {
   background-color: rgba(0, 0, 0, 0.1);
   color: inherit;
-  cursor: pointer;
 }
 .view-menu-tab > .view-button.disabled,
 .view-menu-tab > .view-menu.disabled {
@@ -4359,6 +4386,7 @@ iframe {
 .view-menu-tab.selected:not(.in-background) > .view-button {
   padding-left: 6px;
   width: 56px;
+  cursor: default;
 }
 .selected-button-invisible.view-menu-tab.selected:not(.in-background) > .view-menu {
   width: 50px;
@@ -4435,11 +4463,11 @@ iframe {
   background-color: #FAFAFA;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -4594,16 +4622,21 @@ iframe {
 }
 @media (max-width: 473px) {
   .file-chooser {
-    /* reduce message box width on small screens */
-    max-width: 330px;
-    /* no need to have a margin on small screens */
     margin: 0;
+    /* no need to have a margin on small screens */
+  }
+  .file-chooser > .box-buttons {
+    padding: 0 13px 26px 13px;
+    /* use less x-padding for buttons so that more text can be shown */
   }
   .file-chooser > .box-buttons > .box-button {
     margin-right: 4px;
     min-width: 70px;
     /* less min width for buttons on small screens */
   }
+  .file-chooser > .box-buttons > .box-button:last-child {
+    margin-right: 0;
+  }
 }
 /*
  * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
@@ -4788,6 +4821,7 @@ iframe {
   white-space: nowrap;
   font-size: 16px;
   color: #000;
+  margin-top: 1px;
 }
 .form > .header > .sub-title {
   overflow: hidden;
@@ -5143,11 +5177,11 @@ iframe {
   position: absolute;
 }
 /*
- * Copyright (c) 2014-2017 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -5189,6 +5223,34 @@ iframe {
   top: 0;
   height: 100%;
 }
+.lookup-box > .field > .structure.tree > .table-data > .table-row.inactive,
+.lookup-box > .field > .structure.table > .table-data > .table-row.inactive {
+  font-style: italic;
+}
+.lookup-box > .field > .structure.tree > .table-data > .table-row.inactive > .table-cell.last > .text::after,
+.lookup-box > .field > .structure.table > .table-data > .table-row.inactive > .table-cell.last > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
+.lookup-box > .field > .structure.tree > .table-data > .table-row > .table-cell.last.inactive,
+.lookup-box > .field > .structure.table > .table-data > .table-row > .table-cell.last.inactive {
+  font-style: italic;
+}
+.lookup-box > .field > .structure.tree > .table-data > .table-row > .table-cell.last.inactive > .text::after,
+.lookup-box > .field > .structure.table > .table-data > .table-row > .table-cell.last.inactive > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
+.lookup-box > .field > .structure.tree > .tree-data > .tree-node.inactive,
+.lookup-box > .field > .structure.table > .tree-data > .tree-node.inactive,
+.lookup-box > .field > .structure.tree > .tree-data > .animation-wrapper > .tree-node.inactive,
+.lookup-box > .field > .structure.table > .tree-data > .animation-wrapper > .tree-node.inactive {
+  font-style: italic;
+}
+.lookup-box > .field > .structure.tree > .tree-data > .tree-node.inactive > .text::after,
+.lookup-box > .field > .structure.table > .tree-data > .tree-node.inactive > .text::after,
+.lookup-box > .field > .structure.tree > .tree-data > .animation-wrapper > .tree-node.inactive > .text::after,
+.lookup-box > .field > .structure.table > .tree-data > .animation-wrapper > .tree-node.inactive > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
 /*
  * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -6058,6 +6120,7 @@ iframe {
   vertical-align: middle;
   padding: 12px 0 12px 0;
   max-width: 100%;
+  margin-top: 1px;
 }
 .group-box.has-sub-label > .group-box-header > .title {
   padding-bottom: 7px;
@@ -6238,7 +6301,6 @@ iframe {
 }
 .html-field > .field {
   margin-left: 10px;
-  overflow: hidden;
 }
 .html-field > .field:focus {
   outline: none;
@@ -6575,11 +6637,11 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -6889,15 +6951,26 @@ iframe {
 .proposal-chooser > .table > .table-data > .table-row.first.selected::after {
   top: -1px;
 }
+.proposal-chooser > .table > .table-data > .table-row.inactive {
+  font-style: italic;
+}
+.proposal-chooser > .table > .table-data > .table-row.inactive > .table-cell.last > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
 .proposal-chooser > .table > .table-data > .scrollbar.y-axis > .scrollbar-thumb > .scrollbar-thumb-handle {
   margin-left: 1px;
 }
 .proposal-chooser > .tree > .tree-data {
   padding: 8px 12px;
 }
-.proposal-chooser > .tree > .tree-data > .tree-node.inactive {
+.proposal-chooser > .tree > .tree-data > .tree-node.inactive,
+.proposal-chooser > .tree > .tree-data > .animation-wrapper > .tree-node.inactive {
   font-style: italic;
 }
+.proposal-chooser > .tree > .tree-data > .tree-node.inactive > .text::after,
+.proposal-chooser > .tree > .tree-data > .animation-wrapper > .tree-node.inactive > .text::after {
+  content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+}
 .status > .ellipsis {
   padding-left: 3px;
 }
@@ -7216,7 +7289,7 @@ iframe {
 .tab-box-header > .menubar {
   position: absolute;
   background-color: inherit;
-  border-bottom-color: transparent;
+  border-bottom: none;
 }
 .tab-box-header > .status {
   position: absolute;
@@ -7379,6 +7452,7 @@ iframe {
   display: inline-block;
   vertical-align: middle;
   padding: 12px 0 12px;
+  margin-top: 1px;
 }
 .tab-area.has-sub-label > .tab-item > .title {
   padding-bottom: 7px;
@@ -8151,6 +8225,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .menu-item > .font-icon {
   font-size: 16px;
@@ -8237,6 +8312,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .menu-button > .icon {
   /* Padding only relevant for icons larger than the container */
@@ -8474,12 +8550,16 @@ iframe {
 .context-menu > .menu-item.selected {
   background-color: #E9F0F6;
 }
+.context-menu > .menu-item.selected.has-popup {
+  color: #000;
+}
+.context-menu > .menu-item.selected.has-popup.disabled {
+  color: #808080;
+  background-color: #E9F0F6;
+}
 .context-menu > .menu-item.selected > .submenu-icon {
   transform: none;
 }
-.context-menu > .menu-item.expanded {
-  color: #1561A7;
-}
 .context-menu > .menu-item.expanded > .submenu-icon {
   -webkit-transform: rotateX(180deg) translateY(-1px);
   -ms-transform: rotateX(180deg) translateY(-1px);
@@ -8875,7 +8955,7 @@ iframe {
   margin: 8px 6px;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8900,6 +8980,18 @@ iframe {
 .messagebox.full-height.full-width {
   border-radius: 0;
 }
+.messagebox.full-width > .messagebox-buttons {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.messagebox.full-width > .messagebox-buttons > .box-button {
+  min-width: 70px;
+  /* less min width for buttons on small screens */
+  margin-right: 8px;
+}
+.messagebox.full-width > .messagebox-buttons > .box-button:last-child {
+  margin-right: 0;
+}
 .messagebox.info > .messagebox-content > .messagebox-header {
   color: #1561A7;
 }
@@ -9194,26 +9286,12 @@ iframe {
 }
 @media (max-width: 473px) {
   .messagebox {
-    /* reduce message box width on small screens */
-    max-width: 330px;
     /* no need to have a margin on small screens */
     margin: 0;
   }
-  .messagebox > .messagebox-buttons {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  .messagebox > .messagebox-buttons > .box-button {
-    min-width: 70px;
-    /* less min width for buttons on small screens */
-    margin-right: 8px;
-  }
-  .messagebox > .messagebox-buttons > .box-button:last-child {
-    margin-right: 0;
-  }
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -9223,10 +9301,13 @@ iframe {
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .mode {
-  border: 1px solid rgba(0, 0, 0, 0.23);
+  --padding-x: 12px;
+  --padding-y: 6px;
+  --border-width: 1px;
+  border: var(--border-width) solid rgba(0, 0, 0, 0.23);
   border-radius: 0;
   flex: 1 1 0;
-  padding: 6px 12px;
+  padding: var(--padding-y) var(--padding-x);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -9241,12 +9322,12 @@ iframe {
 }
 .mode:not(.last):not(.selected) {
   border-right: none;
-  padding-right: 13px;
+  padding-right: calc(var(--padding-x) + var(--border-width));
   /* account for the missing border, so that text does not jump */
 }
 .mode.after-selected {
   border-left: none;
-  padding-left: 13px;
+  padding-left: calc(var(--padding-x) + var(--border-width));
   /* account for the missing border, so that text does not jump */
 }
 .mode.selected {
@@ -9271,21 +9352,12 @@ iframe {
 .mode > .icon.with-label {
   margin-right: 8px;
 }
-.mode-selector.alternative {
-  border: 3px solid transparent;
-}
 .mode-selector.alternative > .mode {
+  --border-width: 0px;
   color: #666666;
-  border: none;
   background-color: transparent;
   border-radius: 3px;
 }
-.mode-selector.alternative > .mode:not(.last):not(.selected) {
-  padding-right: 12px;
-}
-.mode-selector.alternative > .mode.after-selected {
-  padding-left: 12px;
-}
 .mode-selector.alternative > .mode:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
@@ -9312,24 +9384,11 @@ iframe {
   cursor: default;
 }
 .dense .mode-selector > .mode {
-  padding: 3px 5px;
-}
-.dense .mode-selector > .mode:not(.last):not(.selected) {
-  padding-right: 6px;
-  /* account for the missing border, so that text does not jump */
-}
-.dense .mode-selector > .mode.after-selected {
-  padding-left: 6px;
-  /* account for the missing border, so that text does not jump */
-}
-.dense .mode-selector.alternative > .mode:not(.last):not(.selected) {
-  padding-right: 5px;
-}
-.dense .mode-selector.alternative > .mode.after-selected {
-  padding-left: 5px;
+  --padding-x: 5px;
+  --padding-y: 3px;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -9351,6 +9410,7 @@ iframe {
 .mode-selector.alternative {
   background-color: rgba(0, 0, 0, 0.08);
   border-radius: 3px;
+  border: 3px solid transparent;
 }
 .mode-selector.alternative:not(.disabled) > .mode-slider {
   display: block;
@@ -9788,7 +9848,8 @@ iframe {
   cursor: pointer;
 }
 .planner-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
   text-align: center;
   border-top: 1px solid rgba(0, 0, 0, 0.23);
   border-bottom: 1px solid rgba(0, 0, 0, 0.23);
@@ -10309,6 +10370,10 @@ iframe {
   --scroll-shadow-size: 5px;
   --scroll-shadow-blur: 5px;
   --scroll-shadow-spread: 6px;
+  --scroll-shadow-inset-top: 0;
+  --scroll-shadow-inset-right: 0;
+  --scroll-shadow-inset-bottom: 0;
+  --scroll-shadow-inset-left: 0;
 }
 .scroll-shadow.top {
   box-shadow: inset 0 var(--scroll-shadow-size) var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color), inset 0 0 0 0 transparent, inset 0 0 0 0 transparent, inset 0 0 0 0 transparent;
@@ -11670,7 +11735,7 @@ Try these to switch between fonts:
 /* scoutIcons: custom icons */
 /* scoutIcons: awesome icons */
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -11730,25 +11795,38 @@ Try these to switch between fonts:
   background-color: rgba(0, 0, 0, 0.12);
   color: #262626;
 }
-#scout .tooltip-status,
+#scout .tooltip-status {
+  visibility: visible;
+  cursor: pointer;
+}
+#scout .tooltip-status::before {
+  content: '\E002';
+  color: #808080;
+  font-size: 16px;
+}
+#scout .tooltip-status:hover::before {
+  background-color: rgba(0, 0, 0, 0.08);
+  color: #262626;
+}
+#scout .tooltip-status:active::before,
+#scout .tooltip-status.selected::before {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: #262626;
+}
 #scout .info-status {
   visibility: visible;
   cursor: pointer;
 }
-#scout .tooltip-status::before,
 #scout .info-status::before {
   content: '\E002';
   color: #808080;
   font-size: 16px;
 }
-#scout .tooltip-status:hover::before,
 #scout .info-status:hover::before {
   background-color: rgba(0, 0, 0, 0.08);
   color: #262626;
 }
-#scout .tooltip-status:active::before,
 #scout .info-status:active::before,
-#scout .tooltip-status.selected::before,
 #scout .info-status.selected::before {
   background-color: rgba(0, 0, 0, 0.12);
   color: #262626;
@@ -11866,7 +11944,7 @@ Try these to switch between fonts:
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -12036,6 +12114,13 @@ Try these to switch between fonts:
 .table.table-row-check > .table-data > .table-row.selected::after {
   display: none;
 }
+.table.table-row-check > .table-data > .table-row:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+.table.table-row-check > .table-data > .table-row.disabled,
+.table.table-row-check > .table-data.disabled > .table-row {
+  background-color: transparent;
+}
 .table.table-row-check > .table-data > .table-row.checked,
 .table.table-row-check > .table-data > .table-row.checked.selected {
   /* Mark checked rows with a background color */
@@ -12045,6 +12130,16 @@ Try these to switch between fonts:
 .table.table-row-check > .table-data > .table-row.checked.selected > .table-cell {
   color: #fff;
 }
+.table.table-row-check > .table-data > .table-row.checked:hover,
+.table.table-row-check > .table-data > .table-row.checked.selected:hover {
+  background-color: #014786;
+}
+.table.table-row-check > .table-data > .table-row.disabled.checked,
+.table.table-row-check > .table-data.disabled > .table-row.checked,
+.table.table-row-check > .table-data > .table-row.disabled.checked.selected,
+.table.table-row-check > .table-data.disabled > .table-row.checked.selected {
+  background-color: #808080;
+}
 .table.table-row-check.keyboard-navigation:focus > .table-data > .table-row.selected,
 .table.table-row-check.keyboard-navigation.focused > .table-data > .table-row.selected {
   background-color: rgba(0, 0, 0, 0.08);
@@ -12304,7 +12399,7 @@ Try these to switch between fonts:
   left: 0;
   padding: var(--table-row-padding-y) 8px var(--table-row-padding-y) 13px;
   cursor: pointer;
-  line-height: 14px;
+  line-height: 15px;
   /* Necessary to align with the text, depends on the used font size */
 }
 .table-cell.table-node > .table-row-control::before {
@@ -12348,6 +12443,7 @@ Try these to switch between fonts:
   cursor: default;
 }
 .table.disabled > .table-data > .table-row > .table-cell > .check-box {
+  cursor: default;
   border-color: #DADADA;
 }
 .table.disabled > .table-data > .table-row > .table-cell > .check-box.checked {
@@ -12376,6 +12472,9 @@ Try these to switch between fonts:
 }
 .font-icon.table-cell-icon {
   color: #000;
+  font-size: 14px;
+  line-height: 15px;
+  vertical-align: top;
 }
 .disabled .font-icon.table-cell-icon {
   color: #808080;
@@ -12394,15 +12493,13 @@ Try these to switch between fonts:
   overflow: hidden;
   padding-left: var(--table-row-margin-x);
   padding-right: var(--table-row-margin-x);
+  font-size: 12px;
 }
 .table-aggregate > .table-cell {
   padding: var(--table-row-padding-y) 10px 0 10px;
   border-bottom: 0;
   height: 100%;
 }
-.table-aggregate > .table-cell > .font-icon {
-  margin-top: 1px;
-}
 .table-aggregate-row {
   background-color: #F5F5F5;
   min-width: 100%;
@@ -12441,10 +12538,15 @@ Try these to switch between fonts:
   display: inline-block;
   color: #000;
   vertical-align: middle;
+  line-height: 14px;
 }
 .table-aggregate-cell.sum > .table-cell-icon,
 .table-aggregate-cell.avg > .table-cell-icon {
-  font-size: 10px;
+  font-size: 13px;
+}
+.table-aggregate-cell.min > .table-cell-icon,
+.table-aggregate-cell.max > .table-cell-icon {
+  font-size: 15px;
 }
 .table-aggregate-cell.selection,
 .table-aggregate-cell.selection > .table-cell-icon {
@@ -12947,6 +13049,7 @@ Try these to switch between fonts:
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .table-header-item-state {
   position: absolute;
@@ -13065,6 +13168,9 @@ Try these to switch between fonts:
   vertical-align: top;
   padding: 16px;
 }
+.table-header-menu-actions > .table-header-menu-group > .table-header-menu-group-text {
+  width: calc(100% + 12px);
+}
 .table-header-menu-filters {
   display: inline-block;
   vertical-align: top;
@@ -13236,11 +13342,11 @@ Try these to switch between fonts:
 }
 .table-header-menu-filter-table.table-row-check > .table-data {
   margin-top: 0;
-  padding: 3px 4px;
+  padding: 3px;
 }
 .table-header-menu-filter-table.table-row-check > .table-data > .table-row {
   border-radius: 3px;
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 .table-header-menu-filter-table.table-row-check > .table-data > .table-row.last {
   margin-bottom: 0;
@@ -13889,7 +13995,7 @@ Try these to switch between fonts:
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -13943,6 +14049,12 @@ Try these to switch between fonts:
 .tree-data.checkable > .animation-wrapper > .tree-node {
   cursor: pointer;
 }
+.tree-data.checkable.disabled > .tree-node,
+.tree-data.checkable.disabled > .animation-wrapper > .tree-node,
+.tree-data.checkable > .tree-node.disabled,
+.tree-data.checkable > .animation-wrapper > .tree-node.disabled {
+  cursor: default;
+}
 .navigation-breadcrumb .tree-data {
   float: left;
 }
@@ -13976,11 +14088,13 @@ Try these to switch between fonts:
   /* Tree node is disabled -> use lighter disabled color */
   color: #808080;
 }
+.disabled > .animation-wrapper > .tree-node,
 .disabled > .tree-node {
   /* Whole tree is disabled -> use darker disabled color */
   color: #666666;
 }
-.disabled.read-only > .tree-data > .tree-node {
+.disabled.read-only > .animation-wrapper > .tree-node,
+.disabled.read-only > .tree-node {
   color: #000;
 }
 .tree-node > .text {
@@ -14011,6 +14125,7 @@ Try these to switch between fonts:
 .tree-node > .icon.font-icon {
   /* Necessary to align with the text, depends on the used font size */
   line-height: 15px;
+  font-size: 14px;
 }
 .tree-node-checkbox {
   display: block;
@@ -14037,12 +14152,14 @@ Try these to switch between fonts:
   background-color: #fff;
 }
 .tree-node-checkbox > .check-box:not(.checked).children-checked.disabled {
+  cursor: default;
   border-color: #DADADA;
   background-color: #808080;
   border-color: #808080;
 }
 .tree.disabled > .tree-data > .tree-node > .tree-node-checkbox > .check-box,
 .tree.disabled > .tree-data > .animation-wrapper > .tree-node > .tree-node-checkbox > .check-box {
+  cursor: default;
   border-color: #DADADA;
 }
 .tree.disabled > .tree-data > .tree-node > .tree-node-checkbox > .check-box.checked,
@@ -14079,7 +14196,7 @@ Try these to switch between fonts:
   cursor: pointer;
   padding: 7px 8px 7px 13px;
   height: 100%;
-  line-height: 14px;
+  line-height: 15px;
   /* Necessary to align with the text, depends on the used font size */
   color: inherit;
 }
@@ -14097,13 +14214,12 @@ Try these to switch between fonts:
 }
 .tree-node.lazy > .tree-node-control::before {
   font-family: Arial, sans-serif;
-  font-size: 13px;
   content: '+';
   /* Move to left because '+' sign is not as wide as 'arrow-down' */
   margin-left: -2px;
 }
 .tree-node.expanded > .tree-node-control::before {
-  /* This "imprecise" angle is a workround for firefox to prevent shifting the div a little when the animation finishes. */
+  /* This "imprecise" angle is a workaround for firefox to prevent shifting the div a little when the animation finishes. */
   /* See https://bugzilla.mozilla.org/show_bug.cgi?id=739176 */
   -webkit-transform: rotate(89.99deg);
   -ms-transform: rotate(89.99deg);
@@ -14659,6 +14775,11 @@ Try these to switch between fonts:
 .tile.dashboard.inverted > .form-field.has-error > .status::before {
   color: #FF5555;
 }
+.tile.dashboard.inverted > .form-field.has-error > .status:hover::before,
+.tile.dashboard.inverted > .form-field.has-error > .status:active::before,
+.tile.dashboard.inverted > .form-field.has-error > .status.selected::before {
+  color: #FF5555;
+}
 .tile.dashboard.inverted > .form-field .scrollbar-thumb-handle {
   background-color: rgba(218, 218, 218, 0.3);
 }
@@ -14730,26 +14851,26 @@ Try these to switch between fonts:
 }
 .tile.dashboard.selected.inverted {
   --tile-background-color: #367ab8;
-  box-shadow: 0 0 0 2px #1561A7, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 2px #367ab8, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.selected.color-alternative {
   box-shadow: 0 0 0 2px #4C4C4C, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .tile.dashboard.selected.inverted.color-alternative {
   --tile-background-color: #555555;
-  box-shadow: 0 0 0 2px #4C4C4C, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 0 2px #555555, 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 .dimmed-background .tile.dashboard.selected {
   box-shadow: 0 0 0 2px #1561A7, 0px 6px 13px 0px rgba(0, 0, 0, 0.05);
 }
 .dimmed-background .tile.dashboard.selected.inverted {
-  box-shadow: 0 0 0 2px #1561A7, 0px 6px 13px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 2px #367ab8, 0px 6px 13px 0px rgba(0, 0, 0, 0.1);
 }
 .dimmed-background .tile.dashboard.selected.color-alternative {
   box-shadow: 0 0 0 2px #4C4C4C, 0px 6px 13px 0px rgba(0, 0, 0, 0.05);
 }
 .dimmed-background .tile.dashboard.selected.inverted.color-alternative {
-  box-shadow: 0 0 0 2px #4C4C4C, 0px 6px 13px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 2px #555555, 0px 6px 13px 0px rgba(0, 0, 0, 0.1);
 }
 /*
  Mixing that can be used to reduce the horizontal padding.
@@ -14901,11 +15022,11 @@ Try these to switch between fonts:
   color: #808080;
 }
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -14960,6 +15081,30 @@ Try these to switch between fonts:
 .tile.dashboard > .table-field > .table > .table-header > .table-header-item {
   color: #4C4C4C;
 }
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered {
+  padding-right: 7px;
+}
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.halign-center {
+  padding-right: 7px;
+}
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.last.halign-left,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.last.halign-left,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.last.halign-left,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.last.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.last.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.last.halign-center,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.sorted.last.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.grouped.last.halign-right,
+.tile.dashboard > .table-field > .table > .table-header > .table-header-item.filtered.last.halign-right {
+  padding-right: 11px;
+}
 .tile.dashboard > .table-field > .table > .table-header > .table-header-item > .table-header-item-state {
   display: none;
 }
@@ -15233,7 +15378,7 @@ Try these to switch between fonts:
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -15247,13 +15392,17 @@ Try these to switch between fonts:
 }
 .login-box-content > form > .button {
   margin-top: 16px;
+  margin-bottom: 0;
+}
+.login-box-content > form > .message-box {
+  margin: 0 20px 12px 20px;
 }
 .login-box-content > form > input.alternative:-webkit-autofill {
   /* NOSONAR (for some reason, rule "less:overqualified-elements" is illegitimately triggered here)
        /* Improve Chrome's auto-fill style by overriding the forced yellow background and black text color. */
   /* (Requires some hacks, see http://webagility.com/posts/remove-forced-yellow-input-background-in-chrome) */
   border-top-width: 0;
-  padding-top: 2px;
+  padding-top: 3px;
   -webkit-box-shadow: inset 0 0 0 1000px #fff;
   -webkit-text-fill-color: #000 !important;
   /* NOSONAR (!important is okay here) */
@@ -15274,17 +15423,20 @@ Try these to switch between fonts:
  * Login button is a default button -> styles are defined in main.css.
  * Difference to regular default button is the disabled style and the ability to turn red.
  */
-.login-button.default.login-error {
-  border-color: #D53F3F;
+.login-button.default.login-error:not(.disabled) {
+  border-color: transparent;
   background-color: #D53F3F;
 }
-.login-button.default.login-error:hover {
-  background-color: #D53F3F;
-  border-color: #D53F3F;
+.login-button.default.login-error:not(.disabled):hover {
+  background-color: #c92c2c;
 }
-.login-button.default.login-error:active {
-  border-color: #D53F3F;
-  background-color: #ce2d2d;
+.login-button.default.login-error:not(.disabled):active {
+  background-color: #ac2626;
+}
+.login-button.default.login-error:not(.disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(213, 63, 63, 0.4);
+  border-color: rgba(213, 63, 63, 0.55);
 }
 .login-button.default.disabled {
   color: #fff;
@@ -15310,6 +15462,31 @@ Try these to switch between fonts:
   -o-animation: nop 0.05s;
   animation: nop 0.05s;
 }
+@media (max-width: 490px) {
+  .login-box-content > form > .message-box,
+  .login-box-content > form > input,
+  .login-box-content > form > .button {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+/*
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+.breadcrumb-bar-field > .field {
+  padding-bottom: 0;
+}
+.dense .breadcrumb-bar-field > .field {
+  padding-bottom: 4px;
+}
 /*
  * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -15325,11 +15502,11 @@ Try these to switch between fonts:
   white-space: nowrap;
 }
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -15341,6 +15518,7 @@ Try these to switch between fonts:
   height: 100%;
   color: #1561A7;
   font-size: 14px;
+  vertical-align: top;
 }
 .breadcrumb-item.last {
   font-weight: bold;
@@ -15348,9 +15526,6 @@ Try these to switch between fonts:
 .breadcrumb-item:hover:not(.disabled) {
   color: #1b7bd4;
 }
-.breadcrumb-item.first {
-  vertical-align: top;
-}
 .breadcrumb-item:not(.first)::before {
   font-family: scoutIcons, Arial, sans-serif;
   font-weight: normal;