@openui5/sap.ui.rta 1.101.0 → 1.102.2

package/src/sap/ui/rta/themes/base/Overlay.less

@@ -1,31 +1,33 @@
 /******************************************************************
 	Style of the RTA Overlays - base Theme
 *******************************************************************/
-@_sap_ui_rta_Overlay_ActiveBG: fade(@sapUiSelected, 10%); //rgba(46, 156, 234, 0.1);
-@_sap_ui_rta_Overlay_BaseBG: @sapUiWhite; //#fff
-@_sap_ui_rta_Overlay_Border: @sapUiSelected; //#2e9cea
-@_sap_ui_rta_Overlay_ErrorBorder: @sapUiErrorBorder; //#ee0000
+@_sap_ui_rta_Overlay_PersButtonBG: @sapUiButtonSelectedBackground; //#8fb5ff
+@_sap_ui_rta_Overlay_PersButtonBorder: @sapUiButtonLiteBorderColor; // #fff
+@_sap_ui_rta_Overlay_PersButtonIcon: @sapUiButtonBackground; // #fff
+@_sap_ui_rta_Overlay_BorderColor: @sapUiSelected; //#8fb5ff
+@_sap_ui_rta_Overlay_HoverBorder: @sapUiFieldHoverBackground; //#fff;
+@_sap_ui_rta_Overlay_HoverBG: fade(@sapUiSelected, 5%); //rgba(143, 181, 255, 0.05);
+@_sap_ui_rta_Overlay_ErrorBorder: @sapUiErrorBorder; //#ff0000
 @_sap_ui_rta_Overlay_BoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
-@_sap_ui_rta_Overlay_HoverBorder: @sapContent_ForegroundColor; //#e5e5e5;
-@_sap_ui_rta_Overlay_BaseColor: darken(desaturate(@sapChart_OrderedColor_1, 48%), 14%); //435060
-@_sap_ui_rta_Overlay_Base_PlaceholderBG: @_sap_ui_rta_Overlay_BaseBG; //#fff
+@_sap_ui_rta_Overlay_ShellBG: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_Overlay_PlaceholderBG: lighten(@sapUiFieldReadOnlyBackground, 20%); // #e6e6e6
 
 .sapUiRtaRoot {
 	.sapUiRtaMarginBottom {
-		margin-bottom: 40px;
+		margin-bottom: 2.5rem; //40px
 	}
 
 	.sapUiRtaPaddingTop {
-		padding-top: 40px;
+		padding-top: 2.5rem; //40px
 	}
 
 	&.sapUiRtaStretchPaddingTop, .sapUiRtaStretchPaddingTop {
-		padding-top: 24px;
+		padding-top: 1.5rem; //24px
 	}
 }
 
 .sapUiSizeCozy .sapUiRtaRoot .sapUiRtaStretchPaddingTop, .sapUiSizeCozy .sapUiRtaRoot.sapUiRtaStretchPaddingTop {
-	padding-top: 32px;
+	padding-top: 2rem; //32px
 }
 
 .sapUiRta {
@@ -34,8 +36,8 @@
 			.sapUiRtaPersDeleteClick {
 				.sapUiRtaPersDeleteIconOuter {
 					.sapMBtn {
-						top: 10px;
-						right: 10px;
+						top: 0.625rem; //10px
+						right: 0.625rem; //10px
 						position: absolute;
 						height: 1.5rem; //24px
 						padding: 0;
@@ -44,19 +46,16 @@
 							border-radius: 50%;
 							width: 1.5rem; //24px
 							height: 1.5rem; //24px
-							min-width: 0;
-							background-color: @_sap_ui_rta_Overlay_Border;
-							box-shadow: 0 0 4px rgba(0,0,0,0.2);
+							min-width: 1.5rem; //24px
+							background-color: @_sap_ui_rta_Overlay_PersButtonBG;
+							box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
 							cursor: pointer;
-							border: 0.125rem solid @_sap_ui_rta_Overlay_BaseBG; //2px
+							border: 0.125rem solid @_sap_ui_rta_Overlay_PersButtonBorder; //2px
 
 							.sapUiIcon {
-								color: @_sap_ui_rta_Overlay_BaseBG;
+								color: @_sap_ui_rta_Overlay_PersButtonIcon;
 								font-size: 0.69rem; //11px
 								line-height: 1.25rem; //20px
-								width: 1rem; //16px
-								text-shadow: none;
-								margin: 0;
 							}
 						}
 					}
@@ -69,20 +68,14 @@
 				}
 			}
 		}
+
 		.sapUiRtaPersAdd, .sapUiRtaPersAddTop {
 			.sapUiRtaPersAddIconOuter {
 				position: absolute;
 				text-align: center;
 				width: 100%;
-				height: 2.5rem; // 40px
-				cursor: default;
-
-				&:focus {
-					outline: none;
-				}
 
 				.sapMBtn {
-					color: @_sap_ui_rta_Overlay_Border;
 					height: 100%;
 					padding: 0;
 
@@ -90,22 +83,14 @@
 						border: none;
 						background-color: transparent;
 
-						&.sapMBtnActive {
-							color: inherit;
-
-							.sapMBtnIcon {
-								color: inherit;
-							}
-						}
-
 						.sapMBtnIcon {
 							font-size: 1rem; //16px
 						}
 					}
 				}
 			}
-
 		}
+
 		.sapUiRtaPersAdd {
 			> .sapUiRtaPersAddIconOuter {
 				bottom: -2.5rem; //40px
@@ -113,46 +98,33 @@
 			}
 		}
 	}
-	.sapUiDtOverlaySelected {
-		&:after {
-			outline: none;
-			border:	none
-		}
-	}
 
 	.sapUiDtOverlayTargetZone {
 		&:after {
-			outline-color: @_sap_ui_rta_Overlay_Border;
 			transition: box-shadow .25s;
 			box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
 		}
 
-		>.sapUiDtOverlayChildren {
-			>.sapUiRtaOverlayPlaceholder {
+		> .sapUiDtOverlayChildren {
+			> .sapUiRtaOverlayPlaceholder {
 				border: none;
 			}
 		}
-		&.sapUiDtOverlayDropZone >.sapUiDtOverlayChildren >.sapUiRtaOverlayPlaceholder {
+
+		&.sapUiDtOverlayDropZone > .sapUiDtOverlayChildren > .sapUiRtaOverlayPlaceholder {
 			background: transparent;
 		}
 	}
 
 	.sapUiDtOverlayDropZone {
-		>.sapUiDtOverlayChildren {
-			>.sapUiDtOverlayMovable {
-				background: @_sap_ui_rta_Overlay_ActiveBG;
+		> .sapUiDtOverlayChildren {
+			> .sapUiRtaOverlayPlaceholder {
+				background: @_sap_ui_rta_Overlay_PlaceholderBG !important;
 				// no "border"
 				&:after {
 					content: none;
 				}
-			}
 
-			>.sapUiRtaOverlayPlaceholder {
-				background: @_sap_ui_rta_Overlay_Base_PlaceholderBG !important;
-				// no "border"
-				&:after {
-					content: none;
-				}
 				// no "focus" border
 				&:focus {
 					&:before {
@@ -162,11 +134,12 @@
 
 				// all descendants
 				* {
-					background: @_sap_ui_rta_Overlay_Base_PlaceholderBG;
+					background: @_sap_ui_rta_Overlay_PlaceholderBG;
 					// no "border"
 					&:after {
 						content: none;
 					}
+
 					// no "focus" border
 					&:focus {
 						&:before {
@@ -185,30 +158,30 @@
 		left: 0;
 		right: 0;
 
-		>div:hover {
-			cursor: text!important;
+		> div:hover {
+			cursor: text !important;
 		}
 	}
 
 	.sapUiDtDragGhost {
-		background: @_sap_ui_rta_Overlay_ActiveBG;
 		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
 	}
 }
 
 .sapUiRta:not(.sapUiRtaVisualizationMode) {
 	.sapUiRtaOverlayHover {
-		-webkit-transition: background 0.1s cubic-bezier(1,.01,1,0);
-		-moz-transition: background 0.1s cubic-bezier(1,.01,1,0);
-		-o-transition: background 0.1s cubic-bezier(1,.01,1,0);
-		transition: background 0.1s cubic-bezier(1,.01,1,0);
+		-webkit-transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		-moz-transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		-o-transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		transition: background 0.1s cubic-bezier(1, .01, 1, 0);
+		background: @_sap_ui_rta_Overlay_HoverBG;
 
 		&:after {
 			content: " ";
 			border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder; //1px
 			transition: box-shadow .25s;
 			box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
-			outline: 0.0625rem solid @_sap_ui_rta_Overlay_Border; //1px
+			outline: 0.0625rem solid @_sap_ui_rta_Overlay_BorderColor; //1px
 			outline-offset: -0.0625rem; //1px
 		}
 	}
@@ -220,25 +193,26 @@
 		bottom: 0;
 		width: 0.625rem; // 10px
 		background-clip: content-box;
-		background-color: @_sap_ui_rta_Overlay_Border;
+		background-color: @_sap_ui_rta_Overlay_BorderColor;
 		-webkit-user-select: none;
 		user-select: none;
 
 		&:before {
-			content:"";
+			content: "";
 			position: absolute;
 			top: 10%;
 			bottom: 10%;
 			left: 37.5%;
-			border-left: 1px solid @sapUiHighlightTextColor;
+			border-left: 0.0625rem solid @sapUiHighlightTextColor; //1px
 		}
+
 		&:after {
-			content:"";
+			content: "";
 			position: absolute;
 			top: 25%;
 			bottom: 25%;
 			left: 62.5%;
-			border-left: 1px solid @sapUiHighlightTextColor;
+			border-left: 0.0625rem solid @sapUiHighlightTextColor; //1px
 		}
 	}
 
@@ -247,7 +221,7 @@
 		top: 0;
 		bottom: 0;
 		width: 0.5rem; // 8px
-		border-right: 0.125rem dotted @_sap_ui_rta_Overlay_Border; // 2px
+		border-right: 0.125rem dotted @_sap_ui_rta_Overlay_BorderColor; // 2px
 		background-clip: content-box;
 		-webkit-user-select: none;
 		user-select: none;
@@ -265,55 +239,29 @@
 	.sapUiDtOverlaySelected {
 		transition: box-shadow .25s;
 		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
-		&.sapUiDtOverlayWithScrollBar:after {
-			bottom: 0;
-			right: 0;
-			top: 0;
-			left: 0;
-			width: initial;
-			height: initial;
-		}
 
 		&:after {
-			outline: 0.125rem solid @_sap_ui_rta_Overlay_Border; //2px
-			border:	none
+			outline-color: @_sap_ui_rta_Overlay_BorderColor;
 		}
 
 		&.sapUiRtaErrorBg:after {
 			outline: 0.125rem solid @_sap_ui_rta_Overlay_ErrorBorder; //2px
 			outline-offset: -0.125rem; //2px
-			border:	none
-		}
-
-		&.sapUiDtOverlayFocusable {
-			&:focus {
-				&:before {
-					top: 0.125rem; //2px
-					left: 0.125rem; //2px
-					bottom: 0.125rem; //2px
-					right: 0.125rem; //2px
-					// IE doesn't support width/height: 'initial'.// TODO remove after the end of support for Internet Explorer
-					// With the property 'auto' the same effect is achieved.
-					// When initial is supported, auto is ignored.
-					width: auto;
-					width: initial;
-					height: auto;
-					height: initial;
-				}
-			}
+			border: none
 		}
 	}
 }
+
 .sapUiRtaMode #shell-shapes {
 	display: none;
 }
 
 .sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
-	background-color: @_sap_ui_rta_Overlay_BaseColor;
-	background-image:  none;
+	background-color: @_sap_ui_rta_Overlay_ShellBG;
+	background-image: none;
 }
 
 .sapUiRtaMode .sapUshellViewPortCenter,
 .sapUiRtaMode .sapMShellBG {
-	background: @_sap_ui_rta_Overlay_BaseColor;
+	background: @_sap_ui_rta_Overlay_ShellBG;
 }

package/src/sap/ui/rta/themes/base/OverlayWithScrollbar.less

@@ -1,4 +1,8 @@
-.sapUiRta .sapUiDtOverlayWithScrollBar{
+/******************************************************************
+	Style of the RTA OverlayWithScrollBar - base Theme
+*******************************************************************/
+
+.sapUiRta .sapUiDtOverlayWithScrollBar {
 	&.sapUiDtOverlaySelected {
 		&.sapUiDtOverlayWithScrollBarVertical {
 			&:after {
@@ -33,6 +37,7 @@
 				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
+
 		&.sapUiDtOverlayWithScrollBarVertical {
 			&:focus:before {
 				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
@@ -46,6 +51,7 @@
 				inset-block-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;
 			}
 		}
+
 		&.sapUiDtOverlayWithScrollBarVertical {
 			&:after {
 				inset-inline-end: var(--sap-ui-rta-scrollbar-scrollWidth) !important;

package/src/sap/ui/rta/themes/base/Toolbar.adaptation.less

@@ -1,27 +1,23 @@
 /******************************************************************
 	Style of the RTA Toolbar (type: adaptation) - base Theme
 *******************************************************************/
-@_sap_ui_rta_Toolbar_Adaptation_BaseColor: darken(desaturate(@sapChart_OrderedColor_1, 48%), 14%); //435060
-@_sap_ui_rta_Toolbar_Adaptation_TextColor: @sapUiWhite; //#fff
-@_sap_ui_rta_Toolbar_Adaptation_DraftVersionColor: #ffc847; //@sapAccentColor1 (on HCB)
-@_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor: #b2e484; //@sapAccentColor8 (on HCB)
+@_sap_ui_rta_Toolbar_Adaptation_BaseColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_Toolbar_Adaptation_TextColor: @sapUiTextInverted; //#fff
+@_sap_ui_rta_Toolbar_Adaptation_BtnFocusBorder: @sapUiTextInverted; //#fff
+@_sap_ui_rta_Toolbar_Adaptation_BtnHoverBG: @sapUiSegmentedButtonHoverBackground; //#ec8b46
+@_sap_ui_rta_Toolbar_Adaptation_BorderColor: @sapUiLightBorder; //#808080
+@_sap_ui_rta_Toolbar_Adaptation_DraftVersionColor: lighten(@sapUiActive, 20%); //#f5c5a3
+@_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor: lighten(@sapUiContentHelpColor, 66%); //#b7ffb7
+@_sap_ui_rta_Toolbar_Adaptation_BoxShadow_DarkColor: @sapUiDarkShadowTint; // #000
+@_sap_ui_rta_Toolbar_Adaptation_BoxShadow_LightColor: @sapUiLightShadowTint; // #fff
+@_sap_ui_rta_Toolbar_Adaptation_BtnHoverText: @sapUiTextInverted; //#fff
+@_sap_ui_rta_Toolbar_Adaptation_SegBBtnHoverTextColor: @sapUiTextInverted; //#fff
+@_sap_ui_rta_Toolbar_Adaptation_FocusOutlineCol: @sapUiTextInverted; //#fff
+@_sap_ui_rta_Toolbar_Adaptation_VersionHistoryHover: darken(@_sap_ui_rta_Toolbar_Adaptation_BaseColor, 5%);
 
 .sapUiRtaMode {
-	.sapUiRtaMarginTopForToolbar {
-		margin-top: 48px;
-	}
 
 	.sapUiRtaToolbar.sapUiRtaToolbarAdaptation {
-		border: 0.125rem solid @_sap_ui_rta_Toolbar_Adaptation_TextColor; //2px
-		border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_Toolbar_Adaptation_BaseColor, @_sap_ui_rta_Toolbar_Adaptation_BaseColor 4px, @_sap_ui_rta_Toolbar_Adaptation_TextColor 4px, @_sap_ui_rta_Toolbar_Adaptation_TextColor 6px) 4;
-		box-shadow: 0 10px 20px fade(black, 19), 0 6px 6px fade(black, 23), 0 0 0 1px fade(white, 20), 0 1px 0 0 fade(white, 20);
-
-		.sapMFlexBox {
-			margin-left: 0;
-			margin-right: 0;
-			height: 2.5rem; //40px
-			background-color: @_sap_ui_rta_Toolbar_Adaptation_BaseColor;
-		}
 
 		.sapMHBox.sapMFlexBox:first-child.sapMTBShrinkItem {
 			min-width: 0; /* Overrider '.sapMTBShrinkItem' */
@@ -35,6 +31,11 @@
 			}
 		}
 
+		.sapMFlexBox {
+			margin-left: 0;
+			height: 2.5rem; //40px
+		}
+
 		// Disable the right margin for Exit button
 		> .sapMFlexItem:last-child {
 			> .sapMFlexItem:last-child {
@@ -43,13 +44,140 @@
 				}
 			}
 		}
+
+		.sapMBtn {
+			padding: 0;
+			height: 2.5rem; //40px
+			margin: 0 0.25rem; //4px
+
+			&.sapMBtnDisabled .sapMBtnInner {
+				opacity: 0.5;
+			}
+
+			&:focus .sapMFocusable {
+				outline: none;
+				border: 0.0625rem dotted @_sap_ui_rta_Toolbar_Adaptation_BtnFocusBorder; //1px
+			}
+
+			&:hover:not(.sapMBtnDisabled) {
+				> .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnEmphasized) {
+					background-color: @_sap_ui_rta_Toolbar_Adaptation_BtnHoverBG;
+
+					.sapUiIcon {
+						color: @_sap_ui_rta_Toolbar_Adaptation_BtnHoverText;
+					}
+				}
+			}
+
+			&:hover {
+				> .sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) bdi {
+					color: @_sap_ui_rta_Toolbar_Adaptation_BtnHoverText;
+				}
+			}
+		}
+
+		.sapMTBStandard {
+			height: 2.5rem; //40px
+			border-bottom: none;
+			background: @_sap_ui_rta_Toolbar_Adaptation_BaseColor;
+		}
+
+		.sapMBtnTransparent,
+		:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
+		:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon,
+		:not(.sapMBtnDisabled) .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
+			color: @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+		}
+
+		.sapMSegB {
+			.sapMSegBBtn {
+				&:not(:hover) {
+					.sapMSegBBtnInner {
+						background-color: @_sap_ui_rta_Toolbar_Adaptation_BaseColor;
+					}
+				}
+
+				.sapMSegBBtnInner {
+					color: @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+					border: none;
+					position: relative;
+
+					.sapUiIcon {
+						color: @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+					}
+				}
+
+				&.sapMSegBBtnFocusable {
+					&:hover .sapMSegBBtnInner,
+					&.sapMSegBBtnSel:hover .sapMSegBBtnInner {
+						color: @_sap_ui_rta_Toolbar_Adaptation_SegBBtnHoverTextColor;
+
+						.sapUiIcon {
+							color: @_sap_ui_rta_Toolbar_Adaptation_SegBBtnHoverTextColor;
+						}
+					}
+
+					&:focus .sapMSegBBtnInner {
+						outline: 0.0625rem dotted @_sap_ui_rta_Toolbar_Adaptation_FocusOutlineCol; //1px
+						outline-offset: -0.0625rem; //1px
+					}
+
+					&.sapMSegBBtnSel {
+						& .sapMSegBBtnInner::after {
+							position: absolute;
+							display: block;
+							content: '';
+							border-bottom: 0.125rem solid @_sap_ui_rta_Toolbar_Adaptation_TextColor; //2px
+							left: 0.375rem; //6px
+							right: 0.375rem; //6px
+							bottom: 0.125rem; //2px
+						}
+					}
+				}
+			}
+		}
+
+		.sapUiRtaVersionButton.sapUiRtaDraftVersionAccent > span > span > bdi {
+			color: @_sap_ui_rta_Toolbar_Adaptation_DraftVersionColor;
+		}
+
+		.sapUiRtaVersionButton.sapUiRtaActiveVersionAccent > span > span > bdi {
+			color: @_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor;
+		}
+
+		.sapUiRtaToolbarVisualizationSelection li:first-child {
+			border-bottom: 0.0625rem solid @_sap_ui_rta_Toolbar_Adaptation_BorderColor; //1px
+		}
+
+		.sapUiRtaToolbarActionsSection > div:first-child {
+			width: 100%;
+		}
+
+		.sapUiRtaToolbarIconAndDraftSection > div {
+			width: 100%;
+		}
+
+		.sapUiRtaToolbarSwitcherSection > div {
+			width: 100% !important;
+		}
 	}
 
 	.sapUiRtaVersionHistory {
 		background-color: @_sap_ui_rta_Toolbar_Adaptation_BaseColor;
 		border: 0.125rem solid @_sap_ui_rta_Toolbar_Adaptation_TextColor; //2px
-		border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_Toolbar_Adaptation_BaseColor, @_sap_ui_rta_Toolbar_Adaptation_BaseColor 4px, @_sap_ui_rta_Toolbar_Adaptation_TextColor 4px, @_sap_ui_rta_Toolbar_Adaptation_TextColor 6px) 4;
-		box-shadow: 0 10px 20px fade(black, 19), 0 6px 6px fade(black, 23), 0 0 0 1px fade(white, 20), 0 1px 0 0 fade(white, 20);
+		border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_Toolbar_Adaptation_BaseColor, @_sap_ui_rta_Toolbar_Adaptation_BaseColor 0.25rem, @_sap_ui_rta_Toolbar_Adaptation_TextColor 0.25rem, @_sap_ui_rta_Toolbar_Adaptation_TextColor 0.375rem) 4;
+		box-shadow: 0 0.625rem 1.25rem fade(@_sap_ui_rta_Toolbar_Adaptation_BoxShadow_DarkColor, 19),
+		0 0.375rem 0.375rem fade(@_sap_ui_rta_Toolbar_Adaptation_BoxShadow_DarkColor, 23),
+		0 0 0 0.0625rem fade(@_sap_ui_rta_Toolbar_Adaptation_BoxShadow_LightColor, 20),
+		0 0.0625rem 0 0 fade(@_sap_ui_rta_Toolbar_Adaptation_BoxShadow_LightColor, 20);
+
+		.sapMGHLITitle {
+			color: @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+		}
+
+		.sapMListUl > .sapMLIB {
+			background: @_sap_ui_rta_Toolbar_Adaptation_BaseColor;
+		}
 
 		.sapMLIBHighlightWarning {
 			background: @_sap_ui_rta_Toolbar_Adaptation_DraftVersionColor;
@@ -60,11 +188,14 @@
 		}
 
 		.sapMLIBHighlightSuccess {
-			background:@_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor;
+			background: @_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor;
 		}
 
 		.sapUiRtaVersionsList {
 			border-bottom: 0.05rem solid @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+			ul > li:first-child.sapMLIBFocusable:focus {
+				outline: none;
+			}
 		}
 
 		.sapMLIBHighlightSuccess ~ .sapMLIBContent .sapMFeedListItemTextString {
@@ -73,17 +204,19 @@
 
 		.sapMLIBHighlightSuccess ~ .sapMLIBContent .sapMFeedListItemInfoText,
 		.sapMLIBHighlightSuccess ~ .sapMLIBContent .sapMFeedListItemTimestampText {
-			color: darken(@_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor, 10%);
+			color: @_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor;
 		}
 
 		.sapMFeedListItemTextString {
 			color: @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+			cursor: pointer;
 		}
 
 		.sapMFeedListItemFooter,
 		.sapMFeedListItemTimestampText,
 		.sapMFeedListItemInfoText {
-			color: darken(@_sap_ui_rta_Toolbar_Adaptation_TextColor, 20%);
+			color: @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+			cursor: pointer;
 		}
 
 		.sapMPopoverArr:after,
@@ -93,35 +226,59 @@
 			background-color: @_sap_ui_rta_Toolbar_Adaptation_BaseColor;
 			border: 0;
 		}
-	}
-}
 
-.sapUiRtaToolbarSwitcherSection .sapMSegBBtn.sapMSegBBtnSel .sapMSegBBtnInner .sapUiIcon,
-.sapUiRtaToolbarSwitcherSection .sapMSegBBtn .sapUiIcon {
-	color: @_sap_ui_rta_Toolbar_Base_TextColor;
-}
+		.sapMLIBFocusable:focus {
+			outline: 0.0625rem dotted @_sap_ui_rta_Toolbar_Adaptation_TextColor;
+			outline-offset: calc(-0.0625rem - 0.0625rem);
+		}
 
-.sapUiRtaVersionButton {
-	color: @_sap_ui_rta_Toolbar_Base_TextColor;
+		.sapMLIBHoverable:hover {
+			background: @_sap_ui_rta_Toolbar_Adaptation_VersionHistoryHover;
+		}
+	}
 }
 
-.sapUiRtaVersionButton.sapUiRtaDraftVersionAccent > span > span {
-	color: @_sap_ui_rta_Toolbar_Adaptation_DraftVersionColor;
+.sapUiSizeCozy.sapUiRtaMode {
+	.sapUiRtaToolbar {
+		.sapMSegB {
+			.sapMSegBBtn.sapMSegBBtnFocusable.sapMSegBBtnSel {
+				& .sapMSegBBtnInner:after {
+					bottom: 0.375rem; //6px
+					left: 0.5625rem; //9px
+					right: 0.5625rem; //9px
+				}
+			}
+		}
+	}
 }
 
-.sapUiRtaVersionButton.sapUiRtaActiveVersionAccent > span > span {
-	color: @_sap_ui_rta_Toolbar_Adaptation_ActiveVersionColor;
+// the default hbox width which is set via the element properties must be overruled
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaToolbarIconAndDraftSection,
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaToolbarActionsSection,
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaToolbarIconAndDraftSection,
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaToolbarActionsSection {
+	width: ~"calc(50% - 12.5rem) !important"; //200px
 }
 
 .sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaVersionButton,
 .sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaVersionButton {
-	max-width: ~"calc(90% - 160px)";
+	max-width: ~"calc(90% - 10rem)"; //160px
 }
 
 .sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaVersionButton {
-	max-width: ~"calc(100% - 100px)";
+	max-width: ~"calc(100% - 6.25rem)"; //100px
+}
+
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarDesktop .sapUiRtaToolbarSwitcherSection,
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarTablet .sapUiRtaToolbarSwitcherSection {
+	width: 25rem !important; //400px
+}
+
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaToolbarIconAndDraftSection,
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaToolbarActionsSection {
+	width: ~"calc(50% - 4.375rem) !important"; //70px
 }
 
-.sapUiRtaToolbarIconAndDraftSection > div {
-	width: 100%;
+.sapUiMedia-sapUiRtaToolbar-sapUiRtaToolbarMobile .sapUiRtaToolbarSwitcherSection {
+	width: 8.75rem !important; //140px
 }