@eclipse-scout/core 22.0.0-beta.5 → 22.0.2

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;
@@ -1070,13 +1071,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 +1190,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 +1392,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 +1873,7 @@ iframe {
   cursor: default;
   font-size: 18px;
   line-height: 30px;
+  margin-top: 1px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2820,7 +2822,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,11 +2890,21 @@ 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 {
   color: inherit;
 }
+.desktop-tab.simple-tab.glasspane-parent {
+  pointer-events: unset;
+}
+.desktop-tab.simple-tab.glasspane-parent:not(.disabled):not(.selected):hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.desktop-tab.simple-tab.glasspane-parent:not(.selected):hover > .closer {
+  display: none;
+}
 .desktop-tab.simple-tab.disabled {
   background-color: transparent;
 }
@@ -2900,6 +2913,7 @@ iframe {
 }
 .desktop-tab.simple-tab.selected {
   background-color: #fff;
+  border-color: transparent;
 }
 .desktop-tab.simple-tab.selected > .title-line > .icon-container {
   color: #808080;
@@ -2933,19 +2947,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;
@@ -3102,16 +3119,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.
@@ -3232,6 +3251,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
@@ -3283,7 +3305,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
@@ -3296,7 +3318,7 @@ iframe {
   position: fixed;
   right: 10px;
   top: 0;
-  height: 100%;
+  height: calc(100% -  72px);
   width: 300px;
   margin-top: 72px;
   pointer-events: none;
@@ -3583,10 +3605,6 @@ iframe {
   line-height: 14px;
   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;
@@ -3604,6 +3622,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);
@@ -4070,7 +4092,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
@@ -4094,6 +4116,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;
@@ -4103,19 +4128,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;
@@ -4131,14 +4159,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;
@@ -4179,15 +4205,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;
   }
 }
 /*
@@ -4216,7 +4248,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
@@ -4236,12 +4268,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 {
@@ -4350,6 +4382,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;
@@ -4779,6 +4812,7 @@ iframe {
   white-space: nowrap;
   font-size: 16px;
   color: #000;
+  margin-top: 1px;
 }
 .form > .header > .sub-title {
   overflow: hidden;
@@ -5914,7 +5948,7 @@ iframe {
   height: 100%;
 }
 /*
- * 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
@@ -6048,6 +6082,8 @@ iframe {
   display: inline-block;
   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;
@@ -6063,6 +6099,8 @@ iframe {
   font-size: 11px;
   letter-spacing: 0.2px;
   color: #666666;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .group-box-header > .status {
   position: absolute;
@@ -6226,7 +6264,6 @@ iframe {
 }
 .html-field > .field {
   margin-left: 10px;
-  overflow: hidden;
 }
 .html-field > .field:focus {
   outline: none;
@@ -7204,7 +7241,7 @@ iframe {
 .tab-box-header > .menubar {
   position: absolute;
   background-color: inherit;
-  border-bottom-color: transparent;
+  border-bottom: none;
 }
 .tab-box-header > .status {
   position: absolute;
@@ -7367,6 +7404,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;
@@ -8139,6 +8177,7 @@ iframe {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .menu-item > .font-icon {
   font-size: 16px;
@@ -8225,6 +8264,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 */
@@ -8462,12 +8502,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);
@@ -9201,7 +9245,7 @@ iframe {
   }
 }
 /*
- * 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
@@ -9211,10 +9255,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;
 }
@@ -9229,12 +9276,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 {
@@ -9259,21 +9306,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);
 }
@@ -9300,24 +9338,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
@@ -9339,6 +9364,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;
@@ -9776,7 +9802,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);
@@ -10297,6 +10324,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;
@@ -11658,7 +11689,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
@@ -11718,25 +11749,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;
@@ -11850,7 +11894,7 @@ Try these to switch between fonts:
   background-color: rgba(255, 255, 255, 0.15);
 }
 /*
- * 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
@@ -11975,7 +12019,7 @@ Try these to switch between fonts:
   border-color: #fff;
 }
 /*
- * 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
@@ -12024,6 +12068,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 */
@@ -12033,6 +12084,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);
@@ -12067,18 +12128,24 @@ Try these to switch between fonts:
   background-color: inherit;
 }
 .table > .filter-field {
-  --filter-field-max-bottom: calc(50% -  (30px + var(--controls-height)) / 2);
+  --filter-field-max-bottom: calc(50% -  (var(--filter-field-height) + var(--controls-height)) / 2);
 }
 .table > .filter-field:not(.focused).empty {
   --filter-field-max-bottom: calc(50% -  (24px + var(--controls-height)) / 2);
 }
 .has-menubar.menubar-bottom.table > .filter-field {
-  --filter-field-max-bottom: calc(50% -  (30px + var(--controls-height)) / 2);
+  --filter-field-max-bottom: calc(50% -  (var(--filter-field-height) + var(--controls-height)) / 2);
   bottom: calc(min(var(--filter-field-bottom), var(--filter-field-max-bottom)) + var(--menubar-height));
 }
 .has-menubar.menubar-bottom.table > .filter-field:not(.focused).empty {
   --filter-field-max-bottom: calc(50% -  (24px + var(--controls-height)) / 2);
 }
+.has-cell-editor-popup.table > .filter-field {
+  opacity: 0;
+  visibility: hidden;
+  --filter-field-opacity-transition-delay: 0s;
+  --filter-field-visibility-transition-delay: calc(250ms + var(--filter-field-opacity-transition-delay));
+}
 .table-data {
   position: relative;
   overflow: hidden;
@@ -12929,6 +12996,7 @@ Try these to switch between fonts:
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-top: 1px;
 }
 .table-header-item-state {
   position: absolute;
@@ -13047,6 +13115,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;
@@ -13218,11 +13289,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;
@@ -13747,10 +13818,6 @@ Try these to switch between fonts:
   max-width: 300px;
   white-space: normal;
 }
-.tooltip.has-menus {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
 .tooltip-content {
   padding: 8px 12px;
   position: relative;
@@ -13766,6 +13833,7 @@ Try these to switch between fonts:
   font-weight: bold;
   padding-left: 16px;
   padding-right: 16px;
+  padding-top: 14px;
 }
 .tooltip-content .small {
   font-size: 11px;
@@ -13777,6 +13845,11 @@ Try these to switch between fonts:
 }
 .tooltip-menus {
   position: relative;
+  background-color: inherit;
+  padding-bottom: 6px;
+}
+.no-text > .tooltip-menus {
+  padding-top: 6px;
 }
 .tooltip-menus > .menu-item {
   display: flex;
@@ -13865,7 +13938,7 @@ Try these to switch between fonts:
   position: relative;
 }
 /*
- * 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
@@ -13894,7 +13967,7 @@ Try these to switch between fonts:
   border-color: #1561A7;
 }
 .tree > .filter-field {
-  --filter-field-max-bottom: calc(50% -  (30px + var(--menubar-height)) / 2);
+  --filter-field-max-bottom: calc(50% -  (var(--filter-field-height) + var(--menubar-height)) / 2);
   bottom: calc(min(var(--filter-field-bottom), var(--filter-field-max-bottom)) + var(--menubar-height));
 }
 .tree > .filter-field:not(.focused).empty {
@@ -14077,13 +14150,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);
@@ -14639,6 +14711,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);
 }
@@ -14710,26 +14787,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.
@@ -15042,7 +15119,7 @@ Try these to switch between fonts:
   color: #fff;
 }
 /*
- * 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
@@ -15053,11 +15130,12 @@ Try these to switch between fonts:
  */
 .filter-field {
   position: absolute;
-  --filter-field-bottom: 6px;
-  --filter-field-max-bottom: calc(50% -  30px / 2);
+  --filter-field-height: 30px;
+  --filter-field-bottom: 8px;
+  --filter-field-max-bottom: calc(50% -  var(--filter-field-height) / 2);
   bottom: min(var(--filter-field-bottom), var(--filter-field-max-bottom));
-  right: 6px;
-  height: 30px;
+  right: 8px;
+  height: var(--filter-field-height);
   width: 190px;
   min-width: 75px;
   max-width: 60%;
@@ -15068,10 +15146,16 @@ Try these to switch between fonts:
   box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.2);
   background-color: var(--filter-field-background-color);
   opacity: 1;
-  transition: bottom 250ms ease-in-out, right 250ms ease-in-out, height 250ms ease-in-out, width 250ms ease-in-out, min-width 250ms ease-in-out, max-width 250ms ease-in-out, box-shadow 250ms ease-in-out, opacity 250ms ease-in-out;
+  visibility: visible;
+  --filter-field-opacity-transition-delay: 100ms;
+  --filter-field-visibility-transition-delay: var(--filter-field-opacity-transition-delay);
+  transition: bottom 250ms ease-in-out, right 250ms ease-in-out, height 250ms ease-in-out, width 250ms ease-in-out, min-width 250ms ease-in-out, max-width 250ms ease-in-out, box-shadow 250ms ease-in-out, opacity 250ms ease-in-out var(--filter-field-opacity-transition-delay), visibility 0s var(--filter-field-visibility-transition-delay);
 }
 :not(:hover) > .filter-field:not(.focused):not(.focus-inside-widget).empty {
   opacity: 0;
+  visibility: hidden;
+  --filter-field-opacity-transition-delay: 0s;
+  --filter-field-visibility-transition-delay: calc(250ms + var(--filter-field-opacity-transition-delay));
 }
 .filter-field::before {
   content: '\E02A';
@@ -15085,7 +15169,7 @@ Try these to switch between fonts:
   justify-content: center;
   align-items: center;
   position: absolute;
-  bottom: 3px;
+  bottom: calc((var(--filter-field-height) - 24px) / 2);
   right: 3px;
   height: 24px;
   width: 24px;
@@ -15121,19 +15205,19 @@ Try these to switch between fonts:
   top: calc(50% -  22px / 2) !important;
 }
 .filter-field:not(.focused).empty {
-  --filter-field-bottom: 6px + ((30px - 24px) / 2);
+  --filter-field-bottom: 8px + ((var(--filter-field-height) - 24px) / 2);
   --filter-field-max-bottom: calc(50% -  24px / 2);
-  right: 9px;
+  right: 11px;
   height: 24px;
   width: 24px;
   min-width: 24px;
   max-width: 24px;
   box-shadow: none;
-  background-color: var(--filter-field-background-color);
+  background-color: var(--filter-field-transparent-80-background-color);
 }
 @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
   .filter-field:not(.focused).empty {
-    background-color: var(--filter-field-transparent-background-color);
+    background-color: var(--filter-field-transparent-50-background-color);
     -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
   }
@@ -15158,10 +15242,11 @@ Try these to switch between fonts:
 }
 .filter-field-container {
   position: sticky;
-  --filter-field-container-top: calc(100% -  6px);
-  --filter-field-container-min-top: calc(50% +  30px / 2);
+  --filter-field-height: 30px;
+  --filter-field-container-top: calc(100% -  8px);
+  --filter-field-container-min-top: calc(50% +  var(--filter-field-height) / 2);
   top: max(var(--filter-field-container-top), var(--filter-field-container-min-top));
-  left: calc(100% -  6px);
+  left: calc(100% -  8px);
   width: 0;
   height: 0;
   overflow: visible;
@@ -15170,6 +15255,9 @@ Try these to switch between fonts:
 }
 .filter-field-container:not(:hover) > .filter-field:not(.focused):not(.focus-inside-widget).empty {
   opacity: 1;
+  visibility: visible;
+  --filter-field-opacity-transition-delay: 100ms;
+  --filter-field-visibility-transition-delay: var(--filter-field-opacity-transition-delay);
 }
 .filter-field-container > .filter-field {
   bottom: 0;
@@ -15178,9 +15266,12 @@ Try these to switch between fonts:
 }
 :not(:hover) > .filter-field-container > .filter-field:not(.focused):not(.focus-inside-widget).empty {
   opacity: 0;
+  visibility: hidden;
+  --filter-field-opacity-transition-delay: 0s;
+  --filter-field-visibility-transition-delay: calc(250ms + var(--filter-field-opacity-transition-delay));
 }
 .filter-field-container > .filter-field:not(.focused).empty {
-  bottom: 3px;
+  bottom: calc((var(--filter-field-height) - 24px) / 2);
   right: 3px;
 }
 @supports not (bottom: min(50%, 42px)) {
@@ -15190,6 +15281,10 @@ Try these to switch between fonts:
     /* NOSONAR (!important is okay here) */
   }
 }
+.dense .filter-field,
+.dense .filter-field-container {
+  --filter-field-height: 24px;
+}
 /*
  * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
@@ -15215,7 +15310,7 @@ Try these to switch between fonts:
        /* 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) */
@@ -15236,17 +15331,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;
@@ -15272,6 +15370,20 @@ Try these to switch between fonts:
   -o-animation: nop 0.05s;
   animation: nop 0.05s;
 }
+/*
+ * 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
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+.breadcrumb-bar-field > .field {
+  padding-top: 8px;
+  padding-bottom: 9px;
+}
 /*
  * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials