/* Startup-only background. Visible for the brief window between the splash hiding and UI5's theme painting ; once the theme loads, body's opaque bg covers this. Set on html (not body) so it doesn't override the light theme. Matches capacitor.config.json android.backgroundColor. */ html { background-color: #191f24; } /* ───────────────────────────────────────────────────────────── Mac Catalyst: force all Pages transparent. On Catalyst (wide window, FCL auto-expands) a Page from the dashboard chain renders with sapMPageBgStandard despite backgroundDesign="Transparent" in the XML, painting the theme bg (rgb(29,35,42) in dark / white in light) over the App's background image. The app design intends every Page to let the App bg show through, so forcing transparency is safe. Gated via html[data-catalyst="true"] which is set in webapp/js/loadBgTheme.js so iOS/Android/web keep the default UI5 Page bg. ───────────────────────────────────────────────────────────── */ html[data-catalyst="true"] .sapMPage, html[data-catalyst="true"] .sapMPageBgStandard, html[data-catalyst="true"] .sapMNav, html[data-catalyst="true"] .sapMSplitContainer, html[data-catalyst="true"] .sapFFCL, html[data-catalyst="true"] .sapFFCLColumn, html[data-catalyst="true"] .sapMPanel, html[data-catalyst="true"] .sapMPanelContent, html[data-catalyst="true"] .sapMPanelBGSolid, html[data-catalyst="true"] .sapUiForm, html[data-catalyst="true"] .sapUiFormResGrid, html[data-catalyst="true"] .sapUiFormResGridCont, html[data-catalyst="true"] .sapUiFormResGridContainer, html[data-catalyst="true"] .sapUiSimpleForm, html[data-catalyst="true"] .sapUiRespGridSpanL1, html[data-catalyst="true"] .sapUiRespGrid, html[data-catalyst="true"] .sapMFlexBox, html[data-catalyst="true"] .sapMVBox, html[data-catalyst="true"] .sapMHBox, html[data-catalyst="true"] .sapMPageSectionContent, html[data-catalyst="true"] section.sapMPageEnableScrolling, /* Transparent only the List containers — NOT .sapMLIB (the list items themselves), because the controller adds `bgTransparentDark` / `bgTransparentLight` to each item to match the dashboard tiles' rgba(0,0,0,0.5) / rgba(255,255,255,0.5) translucent backdrop. */ html[data-catalyst="true"] .sapMList, html[data-catalyst="true"] .sapMListUl, html[data-catalyst="true"] .sapMListTbl { background-color: transparent !important; background-image: none !important; } /* Ensure the App root fills the webview so the bg image covers the window. html/body get 100vh; everything inside gets 100% so it inherits the body's content-area height (which is 100vh minus the 28px Catalyst titlebar padding applied below at body.sap-catalyst). Using 100vh on the App would overflow body by 28px and clip the footer (e.g. the wizard + button). */ html[data-catalyst="true"], html[data-catalyst="true"] body { min-height: 100vh !important; background-color: transparent !important; } html[data-catalyst="true"] #content, html[data-catalyst="true"] .sapMApp, html[data-catalyst="true"] .sapMAppBG { min-height: 100% !important; background-color: transparent !important; } .myVideoFooter { position: absolute; bottom: 0; width: 100%; z-index: 1000; height: 2.5rem; /* Footer height */ } .News { opacity: .75; } .PaywallCloseBtn { opacity: .80; } .strikeout { text-decoration: line-through !important; } video { object-fit: fill; } /* Live stream videos: fit within viewport on mobile */ video[id*="VideoPlayer"] { width: 100% !important; max-height: 65vh !important; object-fit: contain !important; } .height100 { height: 400px !important; } *[data-myTabTextColor='white'] .sapMITBText{ color: white !important; } *[data-myTabTextColor='blue'] .sapMITBText{ color: #92c7f6 !important; } *[data-myTabTextColor='darkBlue'] .sapMITBText{ color: #0754a0 !important; } /* sapMITBItem .sapMITBInlineIcon .sapMITBFilter.sapMITBItem */ *[data-myTabIconColor='white'] .sapMITBFilterDefault { color: white !important; } *[data-myTabIconColor='blue'] .sapMITBFilterDefault { color: #92c7f6 !important; } *[data-myTabIconColor='darkBlue'] .sapMITBFilterDefault { color: #0754a0 !important; } .acceptPushBackgroundGreen .sapMDialogSection { background-color: #3cb574 !important; background-size: cover !important; background-repeat: no-repeat !important; } .acceptPushBackgroundWhite { background-color: white !important; background-size: cover !important; background-repeat: no-repeat !important; } .paywallBackground .sapMDialogSection { background-image: url("/img/paywall.jpg") !important; background-size: cover !important; background-repeat: no-repeat !important; } .paywallSecureBackground .sapMDialogSection { background-image: url("/img/paywallSecure.png") !important; background-size: cover !important; background-repeat: no-repeat !important; background-color: #0754a0 !important; } /* background-color: #0754a0 !important; */ /* Dashboard loading dialog (BusyDialog: "Loading Dashboard" / "Authenticating" / etc.) */ /* UI5 renders BusyDialog with root class .sapMBusyDialog on the .sapMDialog element. */ .sapMDialog.sapMBusyDialog, .sapMBusyDialog { background-color: rgba(0, 0, 0, 0.55) !important; background-image: none !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border: none !important; box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important; /* % top + translate(-50%,-50%) puts the dialog’s vertical center on this line (not 50% = higher on screen) */ top: 40% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } /* Dialog chrome: keep block; do not force block on section/scroll (Horizon uses flex there). */ .sapMDialog.sapMBusyDialog > *, .sapMBusyDialog > * { background-color: transparent !important; background-image: none !important; display: block !important; text-align: center !important; } .sapMBusyDialog .sapMDialogSection, .sapMBusyDialog .sapMDialogScrollCont, .sapMBusyDialog .sapMDialogScroll, .sapMBusyDialog section { background-color: transparent !important; background-image: none !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; } /* BusyIndicator: do NOT use width:100% — Horizon draws a full-width “track” that looks like a long outline */ .sapMBusyDialog .sapMBusyIndicator { display: block !important; text-align: center !important; width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .sapMBusyDialog .sapMBusyIndicator .sapMBusyIndicatorBusyArea { width: auto !important; max-width: 9rem !important; margin-left: auto !important; margin-right: auto !important; border: none !important; box-shadow: none !important; } /* Label text ("Loading Dashboard") — full-width block, centered, white */ .sapMBusyDialog .sapMLabel, .sapMBusyDialog .sapMText, .sapMBusyDialog .sapMBsyIndBsyLabel, .sapMBusyDialog label { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0.25rem 0 0 0 !important; padding: 0 !important; text-align: center !important; color: #fff !important; } /* BusyDialog-created label: stretch in flex parent so text-align:center spans full row */ .sapMBusyDialog .sapMLabel.sapMBusyDialogLabel { align-self: stretch !important; } .sapMBusyDialog .sapMBusyIndicator ~ .sapMBusyIndicator { display: none !important; } /* BusyDialog sets initialFocus on the spinner area — Horizon focus ring reads as an odd “highlight” */ .sapMBusyDialog .sapMBusyIndicator:focus, .sapMBusyDialog .sapMBusyIndicator:focus-visible, .sapMBusyDialog .sapMBusyIndicatorBusyArea:focus, .sapMBusyDialog .sapMBusyIndicatorBusyArea:focus-visible { outline: none !important; box-shadow: none !important; } /* Local busy overlay tint — hide inside BusyDialog (dialog already has its own dimming) */ .sapMBusyDialog .sapMBusyIndicator .sapUiLocalBusyIndicator, .sapMBusyDialog .sapMBusyIndicatorBusyArea .sapUiLocalBusyIndicator { background-color: transparent !important; } /* Horizon: local busy “ShowContainer” wraps the dots in sapContent_Shadow2 — reads as a long bright frame */ .sapMBusyDialog .sapUiLocalBusyIndicatorShowContainer > div.sapUiLocalBusyIndicatorAnimation, .sapMBusyDialog .sapUiLocalBusyIndicator .sapUiLocalBusyIndicatorAnimation { box-shadow: none !important; background-color: transparent !important; border: none !important; } .sapMBusyDialog .sapUiLocalBusyIndicator:focus::after, .sapMBusyDialog .sapMBusyIndicatorBusyArea .sapUiLocalBusyIndicator:focus::after { display: none !important; content: none !important; border: none !important; box-shadow: none !important; } /* Dot halos (inset shadow) — optional soften inside BusyDialog only */ .sapMBusyDialog .sapUiLocalBusyIndicatorAnimation > div::after { box-shadow: none !important; } /** ProductSwitch Fix false Selection highlight **/ .sapFGridContainer .sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before { border-width: 0px !important; } .sapFPSItemContainer.sapFPSItemSelected:not(:active) { border-width: 0px !important; } /*** SEARCH BAR ***/ .sapMSFF { background-color: rgba(255, 255, 255, 0) !important; } /* Carousel border fix */ .sapMCrslItem:focus::after, .sapMCrslNoDataItem:focus::after { opacity: .1 !important; } /* Remove dots around selected buttons */ .sapMBtn.sapMFocus .sapMInputBaseContentWrapper { outline:0px !important; } .sapMBtn:focus > .sapMFocusable { outline: 0px dotted transparent !important; outline-offset: -3px; } /* Hide FCL column separator/grip handles */ .sapFFCLColumnSeparator { width: 0 !important; min-width: 0 !important; overflow: hidden !important; } /* FIX Tile Action Buttons - position inside tile instead of below */ .sapMGTActionModeContainer{ position: absolute !important; bottom: 0.25rem !important; left: 0 !important; right: 0 !important; top: auto !important; margin: 0 !important; padding: 0 0.5rem !important; justify-content: center !important; gap: 0.25rem; z-index: 1; } .sapMGTActionModeContainer .sapMBtn { min-width: auto !important; } /* Ensure tile has relative positioning for absolute children */ .sapMGT.sapMGTActionMode { position: relative !important; overflow: visible !important; } /* Fix headerImage icon overflow in OneByOne tiles */ .sapMGTOneByOne .sapMGTHdrImage .sapMGTHdrIconImage img { max-width: 2rem; max-height: 1.5rem; } .sapMGTOneByOne .sapMGTHdrImage .sapMGTHdrTxt { width: auto !important; flex: 1; min-width: 0; overflow: hidden; } .sapMGTOneByOne .sapMGTHdrImage { gap: 0.375rem !important; } .backgroundHalfOpacity{ opacity: .4 !important; } .size2 { font-size : 2.5rem !important; } @media (max-width:599px) { .size2 { font-size : 2rem !important; } } /* From Block layout exmaple */ .customCellImageBackground { color: #fff; background-image: url("/img/tesla.jpg"); background-size: 650px !important; background-position: left top !important; background-repeat: no-repeat !important; } .customCellImageBackground .sapUiBlockCellContent, .customCellImageBackground .sapUiBlockCellContent .sapMText { color: #fff; } .customHeader .sapMIBar { background-color: rgba(255, 255, 255, 0) !important; } .fullOpacity{ opacity: 1 !important; } .sonosNewsContent { padding-top: 10px !important; } .negativePadding { margin-bottom: -20px !important; } /* Not actual sure if this helps. Sometimes its hard to click the buttons when background .sapMGT.sapMGTBackgroundImage .sapMGTFocusDiv{ z-index: 1 !important; pointer-events: none !important; position:relative !important; } */ .avatarFront .sapFAvatarIcon { z-index: 10 !important; display: block !important; pointer-events: all !important; position:relative !important; } .minWidth200 { min-width: 350px !important; } .myNotificationList .sapFAvatarXS { height: 80px !important; width: 80px !important; } /** Store Table Column Highlight **/ .selected-col-2 tr *:nth-child(3), .selected-col-3 tr *:nth-child(4), .selected-col-4 tr *:nth-child(5) { border-left: 5px solid #83c1f5 !important; border-right: 5px solid #83c1f5 !important } .selected-col-2 tr:nth-child(1) *:nth-child(3), .selected-col-3 tr:nth-child(1) *:nth-child(4), .selected-col-4 tr:nth-child(1) *:nth-child(5) { border-top: 5px solid #83c1f5 !important } .selected-col-2 tr:nth-last-child(1) *:nth-child(3), .selected-col-3 tr:nth-last-child(1) *:nth-child(4), .selected-col-4 tr:nth-last-child(1) *:nth-child(5) { border-bottom: 5px solid #83c1f5 !important } .rowHighlight { /* Store Row 1 */ max-height: 55px !important; height: 45px !important; } /*** FIX IOS ****/ .sapUiBody { overflow:hidden !important; background-size: contain; /* UI5 Defaults to Cover, bad */ } /*** Skinny Scrollbar ****/ .sapUiBody ::-webkit-scrollbar { width: 4px !important; height: 4px !important; border: 1px solid transparent; background-color: transparent; } .sapUiBody ::-webkit-scrollbar-button { background-color: transparent; background-position: center center; background-repeat: no-repeat; width: 4px !important; height: 4px !important; } .sapSuiteUiCommonsTimelineNoTextWrapper { color: transparent !important; } /* Used for Location List. */ .bgTransparentDark { background-color:rgba(0, 0, 0, 0.5) !important; } .bgTransparentLight { background-color:rgba(255, 255, 255, 0.5) !important; } /* #FFFFA7 #fbc100 rgba(255, 255, 0, 0.4) #FDFD96 #FFFAA0 #FFFDD0 #FBEC5D */ .tileLightOn { background-color: rgba(255, 244, 163, 0.9) !important; /* FBEC5D */ } .tileLightOnTitle .sapMGTTitle { color: #191f24 !important; } .tileLightOnSub .sapMGTSubHdrTxt>.sapMText { color: #191f24 !important; } .tileLightOnFoot .sapMTileCntFtrTxt { color: #191f24 !important; } .tileLightOnInner .sapMTcInnerMarker { color: #191f24 !important; } .tileWaterOn{ background-color: #00B2EE !important } .tileHeating{ background-color: #ff4b3d !important; } .sapMBtn.increaseFont .sapMBtnIcon { font-size: 2rem; } .tileLeftMargin { margin-right: -10px !important; } .timeline { padding-bottom: 50px !important; } .timeline .sapMTB { background-color: transparent !important; } /* html.sap-phone .sapMITB.segmentTabBar .sapMITBHead { margin-top: 0; } .sap-ios > .sapUiBody { background-color: red; } */ /* Push app content below the status bar / notch / Dynamic Island on iOS and Android. Uses CSS env() safe-area insets with viewport-fit=cover (set in index.html meta tag). contentInset:"never" is set in capacitor.config.json so there is no native inset on iOS that would double-compensate and shift touch coordinates. */ @supports(padding: max(0px)) { .sap-ios .sapUiBody, .sap-android .sapUiBody { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box !important; } } @supports(padding: max(0px)) { @media only screen and (orientation: portrait) { /* and (max-width: 900px) */ body { overflow-y: hidden !important; } input, select { font-size: 100% !important; } } } .webRtcContainer { position: absolute !important; overflow: hidden !important; } .webRtcContainer { min-width: 100% !important; min-height: 100% !important; } @media only screen and (orientation: portrait) { .webRtcVideo { padding-top: max(45px)!important; } } @media only screen and (orientation: landscape) { .webRtcVideo { padding-left: max(50px)!important; } } /* @supports(padding: max(0px)) { @media only screen and (orientation: landscape) { body .notchLandscape { padding-left: max(25px, env(safe-area-inset-top)) !important; } } } */ /* @media only screen and (orientation: landscape) { body .shrink { padding-left: max(20px, env(safe-area-inset-left)); s } } */ .fullWidth .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent{ width: 100% !important; padding: 0px !important; } .alarmNoData .sapMListNoDataText { padding-right: 60% !important; font-size: 14px !important; opacity: .5; } .tourPopoverColor > .sapMPopoverCont { background-color: #7fc6c6 !important; } .tourSmallText { font-size: 18px !important; font-weight: 300 !important; color: #ffffff !important; } .toolbarPink { background-color: #e269ca !important; } .toolbarPurple { background-color: #b995e0 !important; } .badgeOrange .sapFAvatarBadgeIcon { background-color: #de7f4c !important; border-color: #de7f4c !important; border-width: 10px !important; } /* .shellHeader { background: #3F5161 !important; } */ /* sapMIBar sapMTB sapMTBNewFlex sapMTBInactive sapMTBStandard sapMTB-Auto-CTX sapMOTB overflowBarBorder */ .overflowBarBorder .sapMIBar .sapMTBStandard .sapMTB { border-bottom-color: #00a73a; } /* needed for paywall secure */ .sapMIBar.sapMTB { border: 0px !important; } .footerHidden .sapMPageFooter .sapMTB { opacity: 0.1 !important; } .floatingButton { position: relative; bottom: -20px; } .bigButton .sapMBtnInner { height: 45px !important; width: 220px !important; padding-bottom: 30px; } /* Fix with ui5 1.111 sap_horizon */ .sapMTB-Transparent-CTX.sapMTB { background-color: transparent !important; } .sapMList .sapMTB { border-bottom: none !important; } .sapMITBContainerContent .sapMITBContent { border-bottom: none !important; } .iconTabFilter .sapMITBContent { border-bottom: none !important; } .sapMPanelContent { border-bottom: none !important; } /* .sapMITBSelectItem { color: gray !important; background-color:#3F5161 !important; } */ /******************************/ .width100 .sapMFlexBoxBGTransparent{ width:100% !important; } .iconAvatar .sapUiIcon { text-shadow: none !important; } /* sapFAvatar sapFAvatarColorAccent6 sapFAvatarXS sapFAvatarInitials sapFAvatarCircle sapMPointer sapFAvatarFocusable initialsAvatar sapMBarChild" */ .initialsAvatar .sapFAvatarInitialsHolder { text-shadow: none !important; } .initialsAvatar:hover, .sapFAvatarInitialsHolder:hover { color: white !important; } /* .arrowRight.sapMImg { border-left-color: transparent !important; z-index: 1 !important; margin-left: auto; margin-right: auto; display: block; position: relative; top:-100px; width: 40px !important; height: 40px !important; } */ .arrowDown.sapMImg { border-left-color: transparent !important; z-index: 1 !important; margin-left: auto; margin-right: auto; display: block; position: relative; top:-25px; width: 40px !important; height: 40px !important; } .tinyTitle { font-size: 12px !important; font-weight: 600 !important; } .tinyText { font-size: 11px !important; font-weight: 300 !important; } .extraSmallTitle { font-size: 14px !important; font-weight: 600 !important; } .extraSmallText { font-size: 14px !important; font-weight: 300 !important; } .extraSmallText2 { font-size: 14px !important; font-weight: 100 !important; } .smallText { font-size: 18px !important; font-weight: 300 !important; } .mediumText { font-size: 20px !important; font-weight: 500 !important; } .largeText { font-size: 30px !important; font-weight: 200 !important; } .white { color: white !important; } .whiteNoHubRequired { color: white !important; font-size: 12px !important; font-weight: 300 !important; } .whiteMedium { color: white !important; font-size: 15px !important; font-weight: 400 !important; } .ui5blue { color: #00B2EE !important; } .lightblue { color: lightblue !important; } .lightgreen { color: lightgreen !important; } .myAddTileIcon .sapUiIcon { font-family: SAP-icons; font-size: 2rem; line-height: inherit; cursor: default; text-align: center; display: block; padding-top: 35%; padding-right: 35%; color: grey; } .sapMApp>.sapMGlobalBackgroundImage { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } /* .sapMPageFooter .sapMTB.sapMIBar { background: transparent !important; border: 1px solid transparent; background-color: transparent; } */ .myHboxFooter { position: fixed !important; bottom: 0px !important; width: 100% !important; } /* iOS safe-area: keep interactive elements out of the status bar and home indicator zones */ @supports(padding: max(0px)) { /* Custom fixed footer (Add / Errors buttons) — lift above home indicator */ .sap-ios .myHboxFooter { bottom: env(safe-area-inset-bottom) !important; } /* SAPUI5 Page footer (edit toolbar) — lift above home indicator */ .sap-ios .sapMPageFooter { padding-bottom: env(safe-area-inset-bottom) !important; } /* Dialogs — keep them below the status bar / notch / Dynamic Island and cap their height so they don't overflow the bottom either */ .sap-ios .sapMDialog { margin-top: env(safe-area-inset-top) !important; max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; } /* Dialog footer buttons (Cancel / OK) — lift above home indicator */ .sap-ios .sapMDialogFooter { padding-bottom: env(safe-area-inset-bottom) !important; } /* Android safe-area: status bar / camera notch */ .sap-android .sapMDialog { margin-top: env(safe-area-inset-top) !important; max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; } .sap-android .sapMDialogFooter { padding-bottom: env(safe-area-inset-bottom) !important; } /* Mac Catalyst: native title bar sits above the webview — push app content down so the window's traffic-light buttons don't overlap our header/logo */ html.sap-catalyst body, body.sap-catalyst { padding-top: 28px !important; box-sizing: border-box !important; } .sap-catalyst .sapMDialog { margin-top: 28px !important; max-height: calc(100vh - 28px) !important; } } .myAddButtonOuter { align-items: start !important; overflow: hidden !important; position: relative !important; } .myAddButtonInner { position: absolute; height: 0px; top: 85px; } .transparentDynPage .sapFDynamicPageContent { background:transparent !important; } /* .myUxBlockObject .sapUxAPObjectPageContainer { background:rgba(255,255,255,0.1) !important; margin-left: -10px; } .myUxBlockHead .sapMIBar { background:rgba(255,255,255,0.1) !important; } */ /*N.transparentNotif .sapMLIB .sapMNLI .sapMNLB { background:rgba(255,255,255,0.4) !important; } */ .transparentNotif .sapContrast.sapMLIB.sapMNLB, .sapContrast .sapMLIB.sapMNLB { background:rgba(255,255,255,0.4) !important; } .avatarTransparent { right: 70px; top: 10px; background:rgba(145, 200, 246,0.8) !important; color: white !important; } .sapMNLI-Description { color: blue !important; } .sapMNLI-Details { color: red !important; } /* background-color: rgba(69, 89, 106, 0.52) !important; .sapContrast.sapMNLI-Header>.sapMText, .sapContrast .sapMNLI-Header>.sapMText */ /* .customNotifcationList .sapMLIB .sapMNLB { background:rgba(255,255,255,0.7); } */ /* sapMLIB sapMNLB sapMNLI sapMNLI-LSize */ .loginPageFooter { position: absolute !important; bottom: auto !important; z-index: -400; } /* http://scn.sap.com/community/developer-center/front-end/blog/2014/04/06/extending-sapuicoreicon */ .sideNavigationBar { position: absolute; /* avoid pushing tile container down */ padding-top: 15% !important; z-index: 100; /* get in front of tile container so its clickable */ -webkit-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; } /* .sapTntNavLIItem { background:rgba(54,60,64,0.9) !important; color: white !important; } .sapTntNavLIGroup>.sapUiIcon { color: #ffffff !important; } */ .greenIcon:before { color: #00a73a; } .redIcon:before { color: #d14900; } /* .sapMPageHeader { border-top: 0.25rem solid red !important; 009de0 } */ .subtitle { margin: 0 0 2em 0; } .transparentInput .sapMInputBaseInner { background:transparent !important; border-bottom-width: 2px !important; border-top-width: 0px !important; border-left-width: 0px !important; border-right-width: 0px !important; border-bottom-color: #fff !important; width:290px !important; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } .transparentInputSuccess .sapMInputBaseInner { background:transparent !important; border-bottom-width: 2px !important; border-top-width: 1px !important; border-left-width: 1px !important; border-right-width: 1px !important; border-bottom-color:green !important; } .transparentInputWarning .sapMInputBaseInner { background:transparent !important; border-bottom-width: 2px !important; border-top-width: 1px !important; border-left-width: 1px !important; border-right-width: 1px !important; border-bottom-color: darkorange !important; } .transparentInputError .sapMInputBaseInner { background:transparent !important; border-bottom-width: 2px !important; border-top-width: 1px !important; border-left-width: 1px !important; border-right-width: 1px !important; border-bottom-color: #FF6666 !important; } .transparentInput > .sapMInputBaseInner, .sapMInputBasePlaceholder { color:#ffffff !important; font-size: 15px !important; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } .transparentInput ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ffffff !important; font-size: 15px !important; } .transparentInput :-ms-input-placeholder { /* IE 10+ */ color: #ffffff !important; font-size: 15px !important; } /* This was breaking Chart Container */ /* .warningToolbar > .sapMTB-Info-CTX, .sapMTBActive { background-color: #f09224 !important; } */ /* f0ab01 */ /* .transparentInput > .sapMInputBaseInner, .sapMInputBasePlaceholder { */ .filterSizeBG { background-color: #e1f7ff !important; } .titleNoBorder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 3rem; line-height: 3rem; padding: 0 1rem; background-color: transparent; border-bottom: none !important; } .buttonNoBoarder .sapMBtnInner { border-width: 0px !important; } .buttonNoBoarder.sapMBtn:hover>.sapMBtnHoverable.sapMBtnAttention:not(.sapMBtnActive) { border: .0625rem solid #e9730c !important; border-radius: 0.2rem !important; } .accountSyncBtn .sapMBtnIcon { height: 20px !important; width: 20px !important; padding-right: 10px !important; padding-top: 7px !important; } /* .sapMBtnBack, .sapMBtnTransparent */ .buttonIconColorWhite .sapMBtnIcon { color: #ffffff !important; text-shadow: none !important; } .buttonIconColorBlack .sapMBtnIcon { color: #000000 !important; } .buttonTextColorWhite .sapMBtnTransparent { color: #ffffff !important; text-shadow: none !important; } .buttonTextColorBlack .sapMBtnTransparent { color: #000000 !important; } .buttonTitleColorWhite { color: #ffffff !important; text-shadow: none !important; } .buttonTitleColorBlack { color: #000000 !important; } /* Fix ActionSheet button visibility in dark theme */ .sapMActionSheetPopover .sapMActionSheetButton .sapMBtnInner, .sapMActionSheetDialog .sapMActionSheetButton .sapMBtnInner { color: var(--sapButton_TextColor) !important; } .sapMActionSheetPopover .sapMActionSheetButton .sapMBtnIcon, .sapMActionSheetDialog .sapMActionSheetButton .sapMBtnIcon { color: var(--sapButton_TextColor) !important; } /* Overflow toolbar "…" menu (My Alerts, mid-column toolbars) — same idea as ActionSheet above */ .sapMOTAPopover .sapMBtnInner, .sapMOTAPopover .sapMBtnInner .sapMBtnContent, .sapMOTAPopover .sapMBtnInner .sapMBtnContent bdi, .sapMOverflowToolbarMenu-CTX.sapMPopover .sapMBtnInner, .sapMOverflowToolbarMenu-CTX.sapMPopover .sapMBtnInner .sapMBtnContent, .sapMOverflowToolbarMenu-CTX.sapMPopover .sapMBtnInner .sapMBtnContent bdi { color: var(--sapButton_TextColor) !important; } .sapMOTAPopover .sapMBtnIcon, .sapMOverflowToolbarMenu-CTX.sapMPopover .sapMBtnIcon { color: var(--sapButton_TextColor) !important; } .sapMOTAPopover .sapMALIText, .sapMOverflowToolbarMenu-CTX.sapMPopover .sapMALIText { color: var(--sapList_TextColor) !important; } .buttonIconColorGray .sapMBtnIcon { color: #697f92 !important; } .buttonIconColorTan .sapMBtnIcon { color: #fcddaf !important; } .buttonIconColorGreen .sapMBtnIcon { color: #00ae8f !important; } .buttonIconColorPurple .sapMBtnIcon { color: #aa8cc5 !important; } .buttonIconColorBlue .sapMBtnIcon { color: #00B2EE !important; } .buttonIconColorRed .sapMBtnIcon { color: #FF6666 !important; } .playIcon { position: absolute; text-align:center; font-size: 4rem; width:100%; color:white; padding-top: 30%; } .playImage { max-width:100%; } .gray { color:#7e7e7e !important; } .titleCustomTile { padding-left: 10px !important; padding-top: 18px; } .harveyCustomTile { padding-left: 10px !important; padding-top: 18px; padding-bottom: 10px; } .infoHarveyCustomTile{ padding-bottom: 10px !important; padding-left: 8px; color: dimgray; } .blackPanelIcon > .sapMPanelExpandableIcon { background-color: black !important } /* The Tile CONTAINER Pager position: relative !important; .myMTC > .sapMTCPager { position: fixed; bottom; } */ .customTileIcon { font-family: 'SAP-icons'; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 2rem; padding-top: 16px; padding-left: 8px; float: left; text-align: left !important; } .sap-phone .titleCustomTile { margin-top: -4px; } /* .sapMLabel sapUiSelectable sapMLabelMaxWidth darkLabel sapMTcInnerMarker */ .darkTitle { color: rgb(1, 112, 75) !important; font-size: 20px !important; } .darkText { color:rgb(1, 112, 75) !important; font-size: 12px !important; } .customTileSubHeader .sapMGTSubHdrTxt, .customTileSubHeader .sapMGTSubHdrTxt .sapMText { color: white !important; } .customTileHeader .sapMGTHdrTxt { color: white !important; } /* No Event Media state: black title so it's readable on the light tile background */ .cameraTileNoEventState.customTileHeader .sapMGTHdrTxt, .cameraTileNoEventState.customTileHeader .sapMGTHdrTxt .sapMText, .cameraTileNoEventState.customTileSubHeader .sapMGTSubHdrTxt, .cameraTileNoEventState.customTileSubHeader .sapMGTSubHdrTxt .sapMText { color: black !important; } .customTileFooter .sapMTileCntFtrTxt { color: white !important; } .customTileFooterBlue .sapMTileCntFtrTxt { color: rgb(216, 249, 255) !important; font-style: italic !important; } /* Camera tile: transparent when showing "No Event Media" - no overlay */ .cameraTileNoEventOverlay { background: transparent !important; } /* Play control on camera tiles — matches Sonos Emphasized button style */ .cameraTilePlayBtn.sapMBtn { opacity: 0.9; margin-bottom: 0.5rem; } .cameraTilePlayBtn.sapMBtn:hover { opacity: 1; } .customTile .sapMTile { width: 18rem !important; } @media screen and (max-width: 550px) { /* mobile phones */ .customTileImage { width: 100%; margin-left: -25%; z-index: -1 !important; } .infoCustomTile { padding-left: 8px !important; padding-bottom: 20px; font-size: 12px; color: #ffffff !important; z-index: 100 !important; } } @media screen and (min-width: 550px) { /* tablets */ .customTileImage { width: 100%; z-index: -1 !important; } .infoCustomTile { padding-left: 8px !important; color: black !important; z-index: 100 !important; } } /* .sapSuiteUiCommonsTimeline .sapSuiteUiCommonsTimelineItem */ .timelineBlack > .sapSuiteUiCommonsTimelineContents { background-color: black !important; } .customTileNumTitle { float: right; text-align: right !important; } .actionListItemBulb { height: 75px !important; /* background-color:#77C3ED !important; */ } .selected { background: #d14900 !important; /* border-bottom-style: solid !important; border-bottom-color: red !important; color: red !important; border : none !important; */ } /* start image List */ .paddingRight { padding-right: 30% !important; } .warningRed { color: #d14900 !important; } .warningRedLight { color: #de7f4c !important; } .myGreen { color: #007d2b !important; font-weight: normal; } .myMessagePage > .sapMPageBgStandard { background:transparent !important; } .myPanel { background:rgba(255,255,255,0.8); } /* .thermFilter > .sapMCLI.sapMLIB.sapMLIB-CTX.sapMLIBShowSeparator.sapMLIBTypeInactive { .thermFilter > .sapMILI.sapMLIB.sapMLIB-CTX.sapMLIBShowSeparator.sapMLIBTypeInactive .sapMILI .sapMLIB .sapMLIB-CTX .sapMLIBFocusable .sapMLIBShowSeparator .sapMLIBTypeInactive { */ .underline { text-decoration: underline; } .intro { background-color: #1dafd6; } .lightRedButton div.sapMBtnInner { background: #FA8072; } .spaceLeft { padding-left: 5px; } .spaceLeftTiles { margin-left: 20px !important; } .whiteLabel { margin-top: 8px; margin-bottom: 8px; color: white; font-family: inherit; font-size: 30px; } .whiteLabelSml { margin-top: 5px; margin-left: 8px; color: white; font-family: inherit; font-size: 25px; } .goodJobLabel { margin-top: 10px; margin-left: 10px; color: green; font-family: inherit; font-size: 17px; } /*** Used in blink ***/ @keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } @-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; } } .blink { font-size: 22px !important; color: mediumseagreen !important; animation:fade 2000ms infinite; -webkit-animation:fade 2000ms infinite; } .blink2 { font-size: 18px !important; color: mediumseagreen !important; animation:fade 4000ms infinite; -webkit-animation:fade 4000ms infinite; } .testPanel { background:rgba(255,255,255,1.0); } /* .myIconTabBar{ padding-top: 4px; background:rgba(255,255,255,1); border: 1px solid; } */ .myTabObjectHeader { margin: 0; padding: 0; } .sapMSampleTextMaxLinesText { padding: 1rem 1rem 0 1rem; } /* start image List */ .productIcon { padding-left: 4px; padding-right: 7px; } .productInfo { position: absolute; left: 0; bottom: 0; background-color: rgb(255, 255, 255); /* The Fallback */ background-color: rgba(255, 255, 255, 0.7); } .pictureSample { color: #ffffff; } .productNumber { color: #666; } .storeListItem .sapMObjLIconDiv { margin-right: .5rem; width: 1.5rem; height: 1.5rem; } .storeListItem .sapMObjLIcon { width: 1.5rem !important; height: 1.5rem !important; line-height: 1.5rem !important; font-size: 1.5rem !important; } .storeListItem.greenBackground { background-color: #B5E7A8 !important; } .storeListItem.redBackground { background-color: #ffdad6 !important; } /* Image Grid */ .uoMImgGrid { padding: 0.25em; overflow: hidden; /* background-color: #fff; */ } .uoMImgGrid .sapMCLI { float: left; width: 50%; padding: 0.25em; } .uoMImgGrid .sapMLIBContent { position: relative; } .uoMImgGrid .sapMImg { display: block; max-width: 100%; width: 100%; } .uoMImgGrid .sapMCLI:nth-child(odd) { clear: left; } /* Image Grid Media Queries */ @media screen and (min-width: 40em) { .uoMImgGrid .sapMCLI { width: 33.3333333333333333%; } .uoMImgGrid .sapMText { font-size: 1em; } .uoMImgGrid .sapMCLI:nth-child(3n+1) { clear: left; } .uoMImgGrid .sapMCLI:nth-child(odd) { clear: none; } } @media screen and (min-width: 55em) { .uoMImgGrid .sapMCLI { width: 25%; } .uoMImgGrid .sapMText { font-size: 1.05em; } .uoMImgGrid .sapMCLI:nth-child(4n+1) { clear: left; } .uoMImgGrid .sapMCLI:nth-child(3n+1) { clear: none; } } @media screen and (min-width: 72em) { .uoMImgGrid .sapMCLI { width: 20%; } .uoMImgGrid .sapMText { font-size: 1.1em; } .uoMImgGrid .sapMCLI:nth-child(5n+1) { clear: left; } .uoMImgGrid .sapMCLI:nth-child(4n+1) { clear: none; } } @media screen and (min-width: 90em) { .uoMImgGrid .sapMCLI { width: 16.666666666%; } .uoMImgGrid .sapMText { font-size: 1.15em; } .uoMImgGrid .sapMCLI:nth-child(6n+1) { clear: left; } .uoMImgGrid .sapMCLI:nth-child(5n+1) { clear: none; } } /* end image List */ /***** START COLOR PICKER Customization ****** .sapUiSliGrip { height: 80px !important; } .sapUiColorPicker-ColorPickerAlphaSlider { visibility: hidden !important; } .sapUiSliHori .sapUiSliBar { height: 80px !important; padding-bottom: 3px !important; } .sapUiColorPicker-ColorPickerSlider { height: 50px !important; } .sapUiMlt { margin-top: -120px !important; margin-bottom: -20px !important; } .sapUiMltCell { width:310px !important; height: 85px !important; background: white; } .sapUiColorPicker-ColorPickerMatrix { width: 310px !important; } .sapUiColorPicker-ColorPickerOldColor { visibility: hidden !important; width: 2px !important; } .sapUiColorPicker-ColorPickerNewColor { width: 70px !important; overflow-x: visible; } .element.style { border-collapse: collapse; width: 310px; table-layout: fixed; } .sapUiVlt { visibility: hidden !important; } .sapUiColorPicker-ColorPickerBox { visibility: hidden !important; width: 2px: } .sapUiColorPicker-ColorPickerCircle { visibility: hidden !important; width: 2px !important; } /***** END COLOR PICKER Customization ******/ .paletteWhite { color: white !important; } .paletteOffWhite { color: yellow !important; } .paletteBlue { color: blue !important; } /* body { transform: scale(2.1); transform-origin: 10% 10%; // add prefixed versions too. } .myBackgroundStyle .sapMPageBgStandard { background-image: url('img/nesterBg.jpg'); } .myBackgroundStyle .sapMListUl { opacity: 0.9; } /* ───────────────────────────────────────────────────────────── Start page — Host / Guest entry cards ───────────────────────────────────────────────────────────── */ .startRoleCard { width: 92%; max-width: 420px; border-radius: 14px; background-color: rgba(0, 0, 0, 0.5) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 0.75rem 0.5rem; transition: box-shadow 0.15s ease, transform 0.15s ease; } .startRoleCard:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .startRoleCardHost { /* No accent border. */ } .startRoleCardGuest { padding: 0.25rem 0.5rem !important; } .startRoleCardGuest > .sapMFlexBox { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } /* Card appearance matches dashboard tiles: black/white semi-transparent, driven by getOpacity() via Start.controller onBeforeShow. Base defaults to dark so the card looks right even before the modifier class is applied (fresh install / post-signout timing). */ .startRoleCard { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .startRoleCard:hover { background: rgba(0, 0, 0, 0.6) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); } .startRoleCardDark { background: rgba(0, 0, 0, 0.5) !important; } .startRoleCardDark:hover { background: rgba(0, 0, 0, 0.6) !important; } .startRoleCardLight { background: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important; } .startRoleCardLight:hover { background: rgba(255, 255, 255, 0.6) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important; } /* WelcomeBook / Guest Book wizard — mobile layout fixes */ /* On small screens, strip the WizardStep card appearance so content goes full-width. The card border/shadow looks fine on tablets/desktop but wastes horizontal real estate on phones. */ @media (max-width: 600px) { .sapMWizardStep { box-shadow: none !important; border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; } /* Compact the wizard page footer — saves ~12px of vertical space */ #welcomeBookPage .sapMPageFooter .sapMTB { min-height: 2.5rem !important; height: 2.5rem !important; } } /* Start page — "or for Guests" divider */ .startOrGuestDivider { opacity: 0.85; font-size: 0.85rem; color: #ffffff !important; } .startOrGuestDivider .sapMLabel, .startOrGuestDivider.sapMLabel { color: #ffffff !important; } /* Start page — transparent footer so the page gradient shows through */ [id$="--startPage"] > .sapMPageFooter, [id$="--startPage"] > .sapMPageFooter .sapMTB, [id$="--startPage"] > .sapMPageFooter .sapMIBar, [id$="--startPage"] > .sapMPageFooter .sapMOTB { background: transparent !important; background-color: transparent !important; border-top: none !important; box-shadow: none !important; } [id$="--startPage"] > .sapMPageFooter .sapMText { color: #ffffff !important; } /* Start page — Sign in with Apple/Google/Guest: always dark background so white text is readable */ .startAppleBtn.sapMBtn .sapMBtnInner, .startAppleBtn .sapMBtnInner, .startGuestBtn.sapMBtn .sapMBtnInner, .startGuestBtn .sapMBtnInner { background-color: #1d1d1f !important; } .startAppleBtn .sapMBtnContent, .startAppleBtn .sapMBtnContent .sapMBtnInner, .startAppleBtn .sapMBtnDefault .sapMBtnContent, .startAppleBtn bdi, .startAppleBtn .sapUiIcon, .startGuestBtn .sapMBtnContent, .startGuestBtn .sapMBtnContent .sapMBtnInner, .startGuestBtn .sapMBtnDefault .sapMBtnContent, .startGuestBtn bdi, .startGuestBtn .sapUiIcon { color: #ffffff !important; } /* Start page — "Sign in" link underlined */ .startLoginLink, .startLoginLink .sapMLnk { text-decoration: underline !important; } /* Start page — tagline matches the Sign-in link color */ .startGuestTagline, .startGuestTagline .sapMText { color: var(--sapLink_TextColor) !important; } /* AccountSync — step content: full-width on mobile, capped on desktop */ .accountSyncStepContent { width: 100%; } @media (min-width: 768px) { .accountSyncStepContent { max-width: 680px; } } /* Start page — Guest Access footer tagline */ .startGuestFooterText, .startGuestFooterText .sapMText, span.startGuestFooterText { font-size: 0.78rem !important; opacity: 0.5 !important; max-width: 420px; } /* Guest Access button text: always white (button background is always dark) */ .startGuestBtn .sapMBtnInner, .startGuestBtn .sapMBtnContent, .startGuestBtn .sapMBtnContent bdi { color: #ffffff !important; }