/* Apps / Dash */ /* Apps Running */ #dash .dash-item-container .app-grid-running-dot { margin-bottom: 21px; background-color: rgba(255, 90, 153, 1); } /* apps / folders / apps & folders in search */ .app-well-app .overview-icon, .app-well-app.app-folder .overview-icon, .grid-search-result .overview-icon, .app-folder.grid-search-result .overview-icon { box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); /* fix default dash focused box-shadow*/ transition-duration: 100ms; border-radius: 20px; color: rgba(40, 7, 43, 0.87); } .icon-grid .overview-tile { background-color: rgba(255, 167, 199, 1); color: #000; } /* Show Apps icon */ .show-apps .overview-icon { background-color: rgba(255, 167, 199, 1); color: rgba(255, 255, 255, 1); } .show-apps:hover .overview-icon, .show-apps:focus .overview-icon, #dash .show-apps:hover .overview-icon, #dash .show-apps:focus .overview-icon { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); } .show-apps:active .overview-icon, .show-apps .overview-icon:insensitive #dash .show-apps:active .overview-icon { background-color: rgba(255, 90, 153, 1); color: rgba(255, 255, 255, 1); } /* folders */ .app-well-app.app-folder .overview-icon { background-color: rgba(227, 203, 230, 0.95); } .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, .app-well-app.app-folder .overview-icon { background-color: rgba(237, 219, 239, 0.9); color: rgba(255, 255, 255, 1); } /* app icons effects in dash */ #dash .app-well-app:hover .overview-icon, #dash .app-well-app:focus .overview-icon, #dash .app-well-app:selected .overview-icon { background-color: rgba(255, 90, 153, 1); } /* effect when creating new folder */ .app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon, .app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { border: 2px solid rgba(148, 102, 153, 1); background-color: rgba(240, 182, 246, 0.5); } /* Collapsed folders */ /* collapsed folder dialog */ .app-folder-dialog { border-radius: 32px; background-color: rgba(250, 243, 251, 0.92); border: none; padding: 0; /* because of icon grid */ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } /* folder title */ .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: rgba(40, 7, 43, 0.87); font-weight: 700; transition-duration: 100ms; } /* folder title when editing */ .app-folder-dialog .folder-name-container .folder-name-entry { font-weight: 700; border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); background-color: rgba(237, 219, 239, 0.9); selection-background-color: rgba(207, 127, 214, 1); selected-color: rgba(40, 7, 43, 0.87); } /* edit folder name button */ .app-folder-dialog .folder-name-container .edit-folder-button { border-radius: 12px; background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.87); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .app-folder-dialog .folder-name-container .edit-folder-button:hover { background-color: rgba(227, 203, 230, 0.95); } .app-folder-dialog .folder-name-container .edit-folder-button:focus { box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } .page-indicator .page-indicator-icon { background-color: rgba(255, 90, 153, 1); } /* Page arrow */ .page-navigation-arrow { border-radius: 15px; padding: 12px; transition-duration: 100ms; background-color: rgba(255, 167, 199, 1); } .page-navigation-arrow > StIcon { margin: 0; color: rgba(255, 255, 255, 1); box-shadow: rgba(255, 167, 199, 1); } .page-navigation-arrow:hover { background-color: rgba(255, 255, 255, 1); } .page-navigation-arrow:hover > StIcon { color: rgba(255, 90, 153, 1); } .page-navigation-arrow:active { background-color: rgba(255, 90, 153, 1); color: rgba(255, 255, 255, 1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .page-navigation-arrow:active > StIcon { color: rgba(255, 255, 255, 1); } /* left and right hints on edges of the screen when dragging app icon */ .page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { background-gradient-start: rgba(91, 2, 99, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-end: rgba(91, 2, 99, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* Dash */ #dash .dash-background { background-color: rgba(255, 255, 255, 1); border: none; /* remove black border on ubuntu */ padding: 4px 2px 4px 2px; border-radius: 21px; } /* if used Dash to Dock extension */ #dashtodockContainer #dash .dash-background { border: none; border-radius: 18px; transition-duration: 250ms; } /* when dash in overview */ #dashtodockContainer.overview #dash .dash-background { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1); background-color: rgba(242, 214, 244, 0.8); } /* popup label when hovering the app in dash */ .dash-label { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); border-color: transparent; } /* pill below if app is running */ .app-well-app-running-dot { width: 10px; height: 5px; border-radius: 5px; background: rgba(148, 102, 153, 1); transition-duration: 100ms; } #dash .app-well-app:hover .app-well-app-running-dot { width: 15px; } #dashtodockContainer .app-well-app.focused .app-well-app-running-dot { width: 20px; } /* pill when default dash (not dash to dock) */ #dash .app-well-app-running-dot { margin-bottom: 6px; } /* elements in dash */ .dash-item-container .app-well-app .overview-icon, .dash-item-container .show-apps .overview-icon { border-radius: 21px; } /* pinned apps | running apps */ .dash-separator { background-color: rgba(255, 90, 153, 1); } /* ubuntu fix */ #dashtodockContainer #dash .app-well-app:hover .overview-icon, #dashtodockContainer #dash .app-well-app:focus .overview-icon, #dashtodockContainer #dash .app-well-app:selected .overview-icon, #dashtodockContainer #dash .show-apps:hover .overview-icon, #dashtodockContainer #dash .show-apps:focus .overview-icon, #dashtodockContainer .show-apps:selected .overview-icon, #dashtodockContainer .show-apps:selected:hover .overview-icon, #dashtodockContainer .show-apps:active .overview-icon, #dashtodockContainer .show-apps:checked .overview-icon, #dashtodockContainer .app-well-app.focused .overview-icon { border-radius: 15px; } /* ubuntu fix */ #dashtodockContainer.bottom.extended #dash .dash-background, #dashtodockContainer.bottom.extended.dashtodock #dash .dash-background, #dashtodockContainer.bottom.extended.shrink #dash .dash-background, #dashtodockContainer.top.extended #dash .dash-background, #dashtodockContainer.top.extended.dashtodock #dash .dash-background, #dashtodockContainer.top.extended.shrink #dash .dash-background, #dashtodockContainer.left.extended #dash .dash-background, #dashtodockContainer.left.extended.dashtodock #dash .dash-background, #dashtodockContainer.left.extended.shrink #dash .dash-background, #dashtodockContainer.right.extended #dash .dash-background, #dashtodockContainer.right.extended.dashtodock #dash .dash-background, #dashtodockContainer.right.extended.shrink #dash .dash-background { border-radius: 0; background-color: rgba(251, 247, 251, 1); box-shadow: none; transition-duration: 250ms; } /* animation fix when extended dash */ #dashtodockContainer.bottom.extended.overview #dash .dash-background, #dashtodockContainer.bottom.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.bottom.extended.overview.shrink #dash .dash-background, #dashtodockContainer.top.extended.overview #dash .dash-background, #dashtodockContainer.top.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.top.extended.overview.shrink #dash .dash-background, #dashtodockContainer.left.extended.overview #dash .dash-background, #dashtodockContainer.left.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.left.extended.overview.shrink #dash .dash-background, #dashtodockContainer.right.extended.overview #dash .dash-background, #dashtodockContainer.right.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.right.extended.overview.shrink #dash .dash-background { background-color: rgba(250, 243, 251, 0.92); } /* Aylur's widgets extension */ /* adjust media / message / slider container in quick settings */ .quick-settings.tweaked .media, .quick-settings.tweaked .message, .quick-settings.tweaked .quick-container { background-color: rgba(242, 84, 169, 0.2); border-radius: 16px; border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* ajust sliders margins */ .quick-settings.tweaked .quick-container .quick-slider { margin: 2.5px 0 2.5px 0; } .quick-settings.tweaked .quick-container .quick-slider:first-child { margin: 0 0 2.5px 0; } .quick-settings.tweaked .quick-container .quick-slider:last-child { margin: 2.5px 0 0 0; } .quick-settings.tweaked .quick-container .quick-slider:first-child:last-child { margin: 0; } .quick-settings.tweaked .media { font-weight: 500; } /* adjust roundness in quick toggle arrow */ .quick-settings.adjusted .quick-toggle .quick-toggle-arrow:ltr { border-radius: 0 36px 36px 0; } .quick-settings.adjusted .quick-toggle .quick-toggle-arrow:rtl { border-radius: 36px 0 0 36px; } /* system usage */ .level-bar { padding: 0; background-color: rgba(237, 219, 239, 0.9); } /* system usage levels */ .usage-level StIcon { width: 1.29em; } /* dynamic-panel */ #panel.dynamic.floating .panel-button, #panel.dynamic.floating .panel-button .clock, /* Date & clock */ #panel.dynamic.floating .clock-display StIcon { /* DND / new messages icon */ border-radius: 99px; } /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; height: 24px; background-image: url("checkbox-off.svg"); } .check-box:focus StBin { background-image: url("checkbox-off-focused.svg"); } .check-box:checked StBin { background-image: url("checkbox.svg"); } .check-box:focus:checked StBin { background-image: url("checkbox-focused.svg"); } /* Toggles */ .toggle-switch { background-image: url("./toggle-off.svg"); background-color: rgba(227, 203, 230, 0.95); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important; } .toggle-switch:checked { background-image: url("./toggle-on.svg"); background-color: rgba(255, 167, 199, 1); } /* Do Not Distrub toggle */ .dnd-button { width: 48px; border-radius: 10px; } .dnd-button .toggle-switch { background-color: rgba(255, 167, 199, 1); color: rgba(255, 255, 255, 1); } .dnd-button:hover .toggle-switch { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); } .dnd-button .toggle-switch:checked { background-color: rgba(255, 90, 153, 1); color: rgba(255, 255, 255, 1); } .dnd-button:hover .toggle-switch:checked { background-color: rgba(255, 90, 153, 1); } .dnd-button:focus { border-color: transparent; } .dnd-button:focus .toggle-switch { box-shadow: inset 0 0 0 1px rgba(148, 102, 153, 1) !important; } /* Buttons */ .button { color: rgba(40, 7, 43, 0.87); background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .button:insensitive { box-shadow: none; color: rgba(40, 7, 43, 0.6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .button:hover, .button:active { background-color: rgba(227, 203, 230, 0.95); } .button:focus { background-color: rgba(240, 182, 246, 0.5); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } /* clear button */ .message-list-clear-button { color: rgba(237, 70, 95, 1); background-color: rgba(238, 210, 211, 1); padding: 3px 15px; border-radius: 9px; } /* Sliders */ .slider, .level { -barlevel-height: 16px; -barlevel-background-color: rgba(237, 219, 239, 0.9); -barlevel-active-background-color: rgba(255, 90, 153, 1); -barlevel-border-width: 0px; /* overfill */ -barlevel-overdrive-color: #c01c28; -barlevel-overdrive-separator-width: 2px; -slider-handle-radius: 7px; } /* Scroll bar */ StScrollBar { padding: 0; } StScrollView StScrollBar { min-width: 8px; min-height: 8px; } StScrollBar StBin#trough { border-radius: 0; background-color: transparent; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 8px; background-color: rgba(191, 163, 193, 0.75); border: 3px solid transparent; transition-duration: 100ms; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: rgba(191, 163, 193, 1); } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: rgba(191, 163, 193, 0.87); } /* Date / Time menu */ /* overall menu */ #calendarArea { padding: 0; } /* Calendar menu side column */ .datemenu-calendar-column { spacing: 5px; } .datemenu-calendar-column:ltr { padding-left: 6px; } .datemenu-calendar-column:rtl { padding-right: 6px; } .datemenu-calendar-column .datemenu-displays-box { spacing: 5px; } /* today header button */ .datemenu-today-button { color: rgba(40, 7, 43, 0.6); background-color: none; border-radius: 12px; } .datemenu-today-button:hover { transition-duration: 100ms; background-color: rgba(242, 225, 243, 0.8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important; } .datemenu-today-button:focus { transition-duration: 100ms; background-color: rgba(240, 182, 246, 0.5); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } /* weekday label */ .day-label { font-weight: 600; } /* date label */ .date-label { font-weight: 700; } /* Calendar */ .calendar { border-radius: 14px; background-color: rgba(242, 225, 243, 0.8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important; padding: 5px; } /* month header */ .calendar-month-label { color: rgba(40, 7, 43, 0.87); } /* day of week heading */ .calendar-day.calendar-day-heading { color: rgba(40, 7, 43, 0.6); } /* day buttons, prev/next month button */ .calendar-day, .calendar-month-header .pager-button { color: rgba(40, 7, 43, 0.87); border-radius: 10px; transition-duration: 100ms; } .calendar-day:hover, .calendar-day:selected:hover, .calendar .calendar-month-header .pager-button:hover { background-color: rgba(227, 203, 230, 0.95); color: rgba(40, 7, 43, 0.87); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .calendar-day:focus, .calendar .calendar-month-header .pager-button:focus { background-color: rgba(240, 182, 246, 0.5); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } .calendar-day:selected { background: rgba(227, 203, 230, 0.95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* today button */ .calendar-today, .calendar-today:selected { background-color: rgba(207, 127, 214, 1); color: rgba(40, 7, 43, 0.87) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .calendar-today:hover, .calendar-today:selected:hover, .calendar-today:focus, .calendar-today:selected:focus { background-color: rgba(195, 101, 204, 1); } /* if day has event */ .calendar .calendar-day-with-events { background-image: url("calendar-event.svg"); background-size: contain; font-weight: 700; } .calendar .calendar-today.calendar-day-with-events { background-image: url("calendar-event-today.svg"); background-size: contain; } /* weekend day button */ .calendar .calendar-nonwork-day, /* up to 44 */ .calendar-weekend { /* 45+ */ color: rgba(40, 7, 43, 0.6); } /* other month day button */ .calendar .calendar-other-month-day, /* up to 44 */ .calendar-other-month { /* 45+ */ color: rgba(40, 7, 43, 0.38) !important; } .calendar .calendar-other-month-day.calendar-day-with-events, /* up to 44 */ .calendar-other-month.calendar-day-with-events { /* 45+ */ background-image: url("calendar-event-disabled.svg"); background-size: contain; } .calendar .calendar-week-number { background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); border-radius: 7px; } /* Events / World clocks / weather section */ .events-button, .world-clocks-button, .weather-button { background-color: rgba(242, 225, 243, 0.8); color: rgba(40, 7, 43, 0.6); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .events-button:hover, .world-clocks-button:hover, .weather-button:hover { background-color: rgba(237, 219, 239, 0.9); } .events-button:focus, .world-clocks-button:focus, .weather-button:focus { background-color: rgba(240, 182, 246, 0.5); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } .events-button:active, .world-clock-button:active, .weather-button:active { background-color: rgba(227, 203, 230, 0.95); } /* header */ .weather-button .weather-header, .events-button .events-title, .world-clocks-button .world-clocks-header { color: rgba(40, 7, 43, 0.6); } /* Events section */ .events-button .events-list { color: rgba(40, 7, 43, 0.87); } .events-button .event-time { color: rgba(40, 7, 43, 0.6); } /* World clocks section */ .world-clocks-button .world-clocks-time { color: rgba(40, 7, 43, 0.87); } .world-clocks-button .world-clocks-city, .world-clocks-button .world-clocks-timezone { color: rgba(40, 7, 43, 0.6); } /* Weather section */ .weather-button .weather-forecast-time { color: rgba(40, 7, 43, 0.6); } /* Entries */ StEntry, .search-entry { border-radius: 13px; padding: 8px; transition-duration: 100ms; border: 1px solid rgba(0, 0, 0, 0.05); background-color: rgba(242, 225, 243, 0.8); color: rgba(40, 7, 43, 0.6); selection-background-color: rgba(207, 127, 214, 1); selected-color: rgba(40, 7, 43, 0.87); } /* icon in entry */ StEntry StLabel { color: rgba(40, 7, 43, 0.87); } /* change icon color if entry not selected */ StEntry StLabel:insensitive { color: rgba(40, 7, 43, 0.6); } StEntry:hover, StEntry:focus, StEntry:active { border: 1px solid rgba(40, 7, 43, 0.38); background-color: rgba(237, 219, 239, 0.9); box-shadow: none; } StEntry:focus { color: rgba(40, 7, 43, 0.87); } /* Lock Screen / Login screen */ #lockDialogGroup { background-color: #000; } .login-dialog { background-color: rgba(250, 243, 251, 1); } .login-dialog .caps-lock-warning-label, .login-dialog .login-dialog-message-warning, .unlock-dialog .caps-lock-warning-label, .unlock-dialog .login-dialog-message-warning { color: rgba(40, 7, 43, 0.6); } /* not listed button */ .login-dialog-not-listed-label { color: rgba(40, 7, 43, 0.6); } .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { color: rgba(40, 7, 43, 0.87); } .login-dialog-not-listed-button:focus .login-dialog-not-listed-label { text-decoration: underline; } /* users button */ .login-dialog-user-list .login-dialog-user-list-item { background-color: rgba(242, 225, 243, 0.8); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .login-dialog-user-list:expanded .login-dialog-user-list-item { transition-duration: 200ms; } .login-dialog-user-list:expanded .login-dialog-user-list-item:hover { background-color: rgba(214, 107, 223, 1); } .login-dialog-user-list:expanded .login-dialog-user-list-item:focus, .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { background-color: rgba(214, 107, 223, 1); /* color: rgba(40, 7, 43, 0.87); don't work*/ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } .login-dialog-user-list:expanded .login-dialog-user-list-item:focus:hover, .login-dialog-user-list:expanded .login-dialog-user-list-item:selected:hover { background-color: rgba(202, 65, 214, 0.8); } /* login buttons */ .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button { background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.87); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); border-radius: 99px; transition-duration: 100ms; } .login-dialog-button.cancel-button:hover, .login-dialog-button.switch-user-button:hover, .login-dialog-button.login-dialog-session-list-button:hover { background-color: rgba(227, 203, 230, 0.95); } .login-dialog-button.cancel-button:focus, .login-dialog-button.switch-user-button:focus, .login-dialog-button.login-dialog-session-list-button:focus { background-color: rgba(227, 203, 230, 0.95); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } .login-dialog-button.cancel-button:focus:active, .login-dialog-button.switch-user-button:focus:active, .login-dialog-button.login-dialog-session-list-button:focus:active, .login-dialog-button.cancel-button:focus:hover, .login-dialog-button.switch-user-button:focus:hover, .login-dialog-button.login-dialog-session-list-button:focus:hover { background-color: rgba(227, 203, 230, 0.95); box-shadow: inset 0 0 0 1px rgba(148, 102, 153, 1) !important; } .login-dialog-button.cancel-button:active, .login-dialog-button.switch-user-button:active, .login-dialog-button.login-dialog-session-list-button:active { background-color: rgba(227, 203, 230, 0.95); } /* password */ .login-dialog-prompt-entry { background-color: rgba(237, 219, 239, 0.9); border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .login-dialog-prompt-entry:focus { background-color: rgba(237, 219, 239, 0.9) !important; border: none; box-shadow: inset 0 0 0 1px rgba(40, 7, 43, 0.38) !important; border-color: rgba(40, 7, 43, 0.38); } .login-dialog-prompt-entry:insensitive { background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.38); } /* Clock */ .unlock-dialog-clock { color: rgba(40, 7, 43, 0.87); spacing: 1em; } .unlock-dialog-clock .unlock-dialog-clock-time { font-feature-settings: "normal"; font-weight: 500; } .unlock-dialog-clock .unlock-dialog-clock-date { font-weight: 500; font-size: 16pt; } .unlock-dialog-clock .unlock-dialog-clock-hint { margin-top: 1em; font-weight: 600; font-size: 10pt; color: rgba(40, 7, 43, 0.6); } /* Notifications */ .unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { padding: 12px 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.87); border-radius: 16px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { background-color: rgba(195, 101, 204, 1); } /* messages counter */ .unlock-dialog-notification-count-text { color: rgba(40, 7, 43, 0.6); background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); border-radius: 99px; } /* User widget */ .user-widget .user-widget-label { color: rgba(40, 7, 43, 0.87); } .user-widget.horizontal .user-icon StIcon, .user-widget.vertical .user-icon StIcon { color: rgba(40, 7, 43, 0.87); background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* Looking Glass | R.I.P. custom colors & light mode */ #LookingGlassDialog { border-radius: 14px; margin: 5px; background-color: #191919; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); } #LookingGlassDialog .notebook-tab, #LookingGlassDialog > #Toolbar .lg-toolbar-button { border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); } #LookingGlassDialog > #Toolbar .lg-toolbar-button, #LookingGlassDialog .notebook-tab:selected { background-color: rgba(255, 255, 255, 0.08); } #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover { background-color: rgba(255, 255, 255, 0.13); } .lg-dialog StEntry { background-color: rgba(48, 48, 48, 0.6); color: white; border-color: rgba(255, 255, 255, 0.2); min-height: 16px; selection-background-color: rgba(207, 127, 214, 1); selected-color: #fff; } .lg-extension { border-radius: 12px; } .lg-debug-flag-button .toggle-switch { margin: 5px; border-radius: 10px; height: 26px; padding: 0; } /* Messages */ /* datemenu message-list */ .message-list { border-color: transparent; /* remove border between messages and calendar section */ padding: 0 !important; } /* "No Notifications" text */ .message-list-placeholder { color: rgba(40, 7, 43, 0.38); font-weight: 700; } /* remove right margin in message list section (datemenu) */ .message-list-sections:ltr { margin-right: 0px; } .message-list-sections:rtl { margin-left: 0px; } /* popup messages */ .message { color: rgba(40, 7, 43, 0.87); border-radius: 18px; } /* Message OSD */ .notification-banner { background-color: rgba(250, 243, 251, 0.92); color: rgba(40, 7, 43, 0.87); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07); } /* messages in menus */ .message-list .message, .popup-menu-content .message { background-color: rgba(242, 225, 243, 0.8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); transition-duration: 100ms; } .message-list .message:hover { background-color: rgba(237, 219, 239, 0.9); } .message-list .message:focus { background-color: rgba(240, 182, 246, 0.5); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1) !important; } /* text / header in message */ .message .message-body, .message-title { color: rgba(40, 7, 43, 0.87); } /* message time stamp */ .message .message-secondary-bin > .event-time { color: rgba(40, 7, 43, 0.6); } /* close button */ .message-close-button { border-radius: 9px; color: rgba(40, 7, 43, 0.87); background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); transition-duration: 100ms; } .message-close-button:hover { background-color: rgba(227, 203, 230, 0.95); } .message-close-button:active { color: rgba(40, 7, 43, 0.6); } /* Media Controls */ .message-media-control { border-radius: 12px; padding: 0 14px; margin: 20px 2px; color: rgba(40, 7, 43, 0.87); transition-duration: 100ms; } .message-media-control:hover { background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); color: rgba(40, 7, 43, 0.87); } .message-media-control:insensitive { color: rgba(40, 7, 43, 0.38); } /* fix margin for last button */ .message-media-control:last-child:ltr { margin-right: 20px; } .message-media-control:last-child:rtl { margin-left: 12px; } /* album art */ .media-message-cover-icon { icon-size: 3.2em !important; border-radius: 12px; } /* when there is no artwork */ .media-message-cover-icon.fallback { color: rgba(40, 7, 43, 0.87); background-color: rgba(227, 203, 230, 0.95); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; icon-size: 1.6em !important; padding: 0.79em; } /* URLs in messages */ .url-highlighter { link-color: rgba(148, 102, 153, 1); } /* OSD */ .switcher-list, /* alt + tab */ .resize-popup, /* i dunno what is that :( */ .workspace-switcher, /* ctrl + alt + arr_left/arr_right */ .osd-window /* volume/brightness/.. switcher */ { color: rgba(40, 7, 43, 0.87); background-color: rgba(250, 243, 251, 0.92); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07); } /* alt + tab */ .switcher-list { border-radius: 24px; } /* running apps in switcher list */ .switcher-list .item-box { border-radius: 20px; } .switcher-list .item-box:hover, .switcher-list .item-box:focus, .switcher-list .item-box:selected, .switcher-list .item-box:outlined { background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* arrow if app has multiple windows */ .switcher-arrow { color: rgba(40, 7, 43, 0.38); border-color: transparent; } .switcher-arrow:highlighted { color: rgba(40, 7, 43, 0.6); } /* ctrl + alt + arr_left/arr_right */ .ws-switcher-indicator { background-color: rgba(40, 7, 43, 0.6); border-radius: 99px; padding: 2.5px; margin: 7.5px 5px; } .ws-switcher-indicator:active { background-color: rgba(40, 7, 43, 0.87); padding: 5px 20px; margin: 5px; } /* Modal dialog */ .modal-dialog { border-radius: 20px; background-color: rgba(250, 243, 251, 0.92); border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); color: rgba(40, 7, 43, 0.87); } /* user avatar */ .user-icon.user-avatar { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); } /* password entry */ .prompt-dialog-password-entry { background-color: rgba(242, 225, 243, 0.8); } /* button in modals */ .modal-dialog-linked-button, .notification-button, .hotplug-notification-item { padding: 10px 0 !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.87); animation-duration: 100ms; } /* if first button: margin-right: 12px/2 */ .modal-dialog-linked-button:ltr:first-child, .notification-button:ltr:first-child, .hotplug-notification-item:ltr:first-child, .modal-dialog-linked-button:rtl:last-child, .notification-button:rtl:last-child, .hotplug-notification-item:rtl:last-child { margin: 0 6px 12px 12px !important; } /* if last button: margin-left: 12px/2 */ .modal-dialog-linked-button:ltr:last-child, .notification-button:ltr:last-child, .hotplug-notification-item:ltr:last-child, .modal-dialog-linked-button:rtl:first-child, .notification-button:rtl:first-child, .hotplug-notification-item:rtl:first-child { margin: 0 12px 12px 6px !important; } /* if only button: normal margin */ .modal-dialog-linked-button:first-child:last-child, .notification-button:first-child:last-child, .hotplug-notification-item:first-child:last-child { margin: 0 12px 12px 12px !important; } /* else: margin-right/left: 12px/2 */ .modal-dialog-linked-button, .notification-button, .hotplug-notification-item { margin: 0 6px 12px 6px !important; } .modal-dialog-linked-button:hover, .modal-dialog-linked-button:focus, .notification-button:hover, .notification-button:focus { background: rgba(227, 203, 230, 0.95); color: rgba(40, 7, 43, 0.87); } .modal-dialog-linked-button:last-child { background-color: rgba(207, 127, 214, 1); color: rgba(40, 7, 43, 0.87); } .modal-dialog-linked-button:last-child:hover, .modal-dialog-linked-button:last-child:focus { background-color: rgba(195, 101, 204, 1); } .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-button:focus { animation-duration: 100ms; box-shadow: inset 0 0 0 1px rgba(40, 7, 43, 0.38) !important; } .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-button:focus:hover, .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-button:focus:active { box-shadow: inset 0 0 0 1px rgba(40, 7, 43, 0.6) !important; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { color: rgba(40, 7, 43, 0.6); background-color: rgba(182, 61, 193, 0.5); } /* Overview */ #overviewGroup, /* overview background */ .workspace-animation { /* spacing between worspaces (ctrl+alt+arr_left/right / 3 fingers gesture) */ background-color: rgba(250, 243, 251, 1); } /* workspaces */ .workspace-background { border-radius: 20px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); } /* running app icon (in workspaces) */ .icon-dropshadow { icon-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); } /* selected window titles (in workspaces) */ .window-caption { spacing: 20px; border-radius: 12px; color: rgba(40, 7, 43, 0.87); background-color: rgba(242, 225, 243, 0.8); border: 1px solid rgba(0, 0, 0, 0.05); padding: 4px 8px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); } /* Activities Ripple (Settings - Multitasking - Hot Corner) */ .ripple-box { background-color: rgba(240, 182, 246, 0.5); box-shadow: 0 0 2px 2px rgba(240, 182, 246, 0.5); } /* thumbnails on overview (workspaces list under search) */ .workspace-thumbnail { background-color: rgba(237, 219, 239, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; } /* drag and drop indicator */ .workspace-thumbnails .placeholder { background-image: url("workspace-placeholder.svg"); background-size: contain; width: 18px; } /* selected indicator */ .workspace-thumbnail-indicator { background-color: rgba(240, 182, 246, 0.5); border-color: rgba(40, 7, 43, 0.38); border-width: 1px; border-radius: 3px; } /* Tiled window previews */ .tile-preview { background-color: rgba(240, 182, 246, 0.5); border: 1px solid rgba(207, 127, 214, 1); } /* .windows-close in screenshot.css */ /* Panel */ #panel { background-color: rgba(250, 243, 251, 1); height: 36px; font-size: 14px; box-shadow: none; } /* panel in overview, lock screen */ #panel:overview, #panel.unlock-screen, #panel.login-screen { background-color: transparent; transition-duration: 0.25s; } /* panel buttons */ .panel-button, .panel-button .clock, /* Date & clock */ .clock-display StIcon { /* DND / new messages icon */ color: rgb(255, 255, 255); border-radius: 14px; border: 4px solid transparent !important; background-color: rgba(255, 167, 199, 1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .panel-button:hover, .panel-button:hover .clock { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); } .panel-button:active, .panel-button:active .clock { background-color: rgba(255, 90, 153, 1); color: rgba(255, 255, 255, 1); } /* workspaces indicator in activities button (45+) */ #panel .workspace-dot { background-color: rgb(255, 255, 255); border-radius: 99px; } #panel .workspace-dot:hover, #panel .workspace-dot:active { background-color: rgb(255, 90, 153); border-radius: 99px; } /* indicator for active */ #panel .screencast-indicator, #panel .remote-access-indicator, #panel .panel-button.screen-sharing-indicator { /* when sharing screen */ background: #cd9309; } #panel .panel-button.screen-sharing-indicator:hover { background: rgba(205, 147, 9, 0.9); } /* indicator when recording screen */ #panel .panel-button.screen-recording-indicator { background: #c01c28; } #panel .panel-button.screen-recording-indicator:hover { background: rgba(192, 28, 40, 0.9); } /* battery percentage */ #panel .power-status.panel-status-indicators-box { font-size: 12px; } /* battery icon */ #panel .power-status.panel-status-indicators-box StIcon { font-size: 14px; } /* panel buttons in lock screen / overview */ #panel.unlock-screen .panel-button, #panel.login-screen .panel-button, #panel:overview .panel-button { color: rgba(255, 255, 255, 1) !important; } /* panel clock fix. remove additional background */ .clock-display { background-color: transparent !important; box-shadow: none !important; } /* additional background for DND / new messages icon */ .clock-display StIcon { padding: 8px; margin: 0; } /* Popovers */ .popup-menu-content, /* popover content */ .candidate-popup-content { /* IBus Candidate Popup (i dunno how to call it) */ color: rgba(40, 7, 43, 0.87); background: rgba(255, 255, 255, 1); padding: 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); } .popup-menu-item, /* menu items */ .app-menu { /* right-click (and panel) app menu */ margin: 3px 0; border-radius: 12px; transition-duration: 150ms; } .popup-menu-item:focus, .popup-menu-item:hover, .popup-menu-item:checked { background-color: rgba(255, 167, 199, 1) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important; color: rgba(40, 7, 43, 0.87); } .popup-menu-item:checked { border-radius: 12px 12px 0 0; } .popup-menu-item:active { background-color: rgba(227, 203, 230, 0.95); color: rgba(40, 7, 43, 0.87); } /* 44 separator margin fix */ .popup-separator-menu-item { padding: 0 !important; } /* separator in popup menu */ .popup-separator-menu-item .popup-separator-menu-item-separator { height: 2px; margin: 6px 0; background-color: rgba(255, 90, 153, 1); } /* fix margins in separators */ .popup-separator-menu-item-separator:ltr { margin-right: 4.5px; } .popup-separator-menu-item-separator:rtl { margin-left: 4.5px; } /* popover submenus */ .popup-sub-menu { background-color: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.87); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); border-radius: 0 0 12px 12px; margin: 0 0 2px 0; } /* submenu items */ .popup-sub-menu .popup-menu-item { margin: 0; color: rgba(40, 7, 43, 0.87); background-color: transparent; border-radius: 0; } /* make rounded borders for last element */ .popup-sub-menu .popup-menu-item:last-child { border-radius: 0 0 12px 12px; } .popup-sub-menu .popup-menu-item:hover, .popup-sub-menu .popup-menu-item:focus { background-color: rgba(227, 203, 230, 0.95) !important; } .popup-menu-item:insensitive { color: rgba(40, 7, 43, 0.38); margin: 0; } /* all other graphical elements (sliders), OpenWeather Extension */ .popup-inactive-menu-item { color: rgba(40, 7, 43, 0.87); background-color: transparent; } .popup-inactive-menu-item:insensitive { color: rgba(40, 7, 43, 0.6) !important; } /* Quick Settings */ /* QS section */ .quick-settings { padding: 18px; border-radius: 24px; } /* screenshot / settings / lock / power options; part of quick-toggle-arrow [44+] */ .icon-button { background-color: rgba(255, 167, 199, 1); color: rgba(255, 255, 255, 1); transition-duration: 100ms; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .icon-button:hover { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); } .icon-button:focus, .quick-toggle:focus, .slider-bin:focus { box-shadow: inset 0 0 0 2px rgba(255, 90, 153, 1) !important; } /* toggles in QS */ .quick-toggle, /* 43 */ .quick-menu-toggle .quick-toggle { /* 44+ */ color: rgba(255, 255, 255, 1); border-radius: 15px; background-color: rgba(255, 167, 199, 1); transition-duration: 100ms; } /* toggle name */ .quick-toggle .quick-toggle-label { font-weight: 600; } /* adjust borders if quick toggle has expandable menu button (quick-toggle-arrow)[44+] */ .quick-menu-toggle .quick-toggle:ltr { border-radius: 15px 0 0 15px; } .quick-menu-toggle .quick-toggle:rtl { border-radius: 0 15px 15px 0; } /* if quick toggle has no expandable menu button (quick-toggle-arrow)[44+] */ .quick-menu-toggle .quick-toggle:last-child { border-radius: 15px; } .quick-menu-toggle .quick-toggle-arrow { border-color: transparent; background-color: rgba(255, 167, 199, 1); color: rgba(255, 255, 255, 1); } /* adjust borders in expandable menu button */ .quick-menu-toggle .quick-toggle-arrow:ltr { border-radius: 0 15px 15px 0; border-left-width: 2px; } .quick-menu-toggle .quick-toggle-arrow:rtl { border-radius: 15px 0 0 15px; border-right-width: 2px; } .quick-toggle:hover, .quick-menu-toggle .quick-toggle:hover, .quick-menu-toggle .quick-toggle-arrow:hover { color: rgba(255, 90, 153, 1); background-color: rgba(255, 255, 255, 1); } .quick-toggle:checked, .quick-menu-toggle .quick-toggle:checked, .quick-menu-toggle .quick-toggle-arrow:checked { color: rgba(255, 255, 255, 1); background-color: rgba(255, 90, 153, 1); border-color: transparent; } .quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:hover { color: rgba(255, 90, 153, 1); background-color: rgba(255, 255, 255, 1); } /* quick slider section */ /* fix margins in quick slider section */ .quick-slider .slider-bin { padding: 4px; margin: 0; color: rgba(40, 7, 43, 0.87); border-radius: 99px; } .quick-slider .slider-bin:focus { background-color: rgba(237, 219, 239, 0.9); } /* quick slider icon */ .quick-slider .icon-button { background-color: rgba(255, 167, 199, 1); color: rgba(255, 255, 255, 1); box-shadow: none; padding: 6px; border-radius: 11px; transition-duration: 150ms; } .quick-slider .icon-button:hover { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* expanded menu */ /* overrides because of https://gitlab.gnome.org/GNOME/gnome-shell/-/commit/beb77f58243265a6cc62b720a5b0ecd66efd50a1#fb75f14505e58d3bc51f2498ef328d1405d89e83_94_95 */ .quick-toggle-menu { background-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 1) !important; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); margin: 12px auto; } /* header icon in expanded menu */ .quick-toggle-menu .header .icon { background-color: rgba(255, 255, 255, 1); color: rgba(255, 90, 153, 1); border-radius: 12px; icon-size: 1.4em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .quick-toggle-menu .header .icon.active { background-color: rgba(255, 90, 153, 1); color: rgba(255, 255, 255, 1); } /* connect / disconnect text color (expanded menu) */ .device-subtitle { color: rgba(40, 7, 43, 0.6); } /* background apps */ /* make toggle transparent in QS */ .background-apps-quick-toggle { background-color: transparent; } .background-apps-quick-toggle:hover { background-color: rgba(237, 219, 239, 0.9); } .background-apps-quick-toggle:focus { background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 2px rgba(148, 102, 153, 1); } /* background app name */ .background-app-item .title { color: rgba(40, 7, 43, 0.87); font-weight: 600; } /* close button */ .background-app-item .close-button { color: rgba(40, 7, 43, 0.87); background-color: rgba(237, 219, 239, 0.9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .background-app-item .close-button:hover { background-color: rgba(227, 203, 230, 0.95); } /* Screenshot UI */ /* main screenshot panel section */ .screenshot-ui-panel { color: rgba(255, 90, 153, 1); background-color: rgba(250, 243, 251, 0.92); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 22px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07); } .screenshot-ui-show-pointer-button, /* show pointer */ .screenshot-ui-type-button { /* Selection / Screen / Window */ color: rgba(40, 7, 43, 0.87); border-radius: 15px; transition-duration: 100ms; } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { background: rgba(237, 219, 239, 0.9); color: rgba(40, 7, 43, 0.87); } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:focus, .screenshot-ui-type-button:checked:focus { background-color: rgba(227, 203, 230, 0.95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); color: rgba(40, 7, 43, 0.87); } .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { color: rgba(40, 7, 43, 0.38); } /* window selection backround */ .screenshot-ui-window-selector { background-color: rgba(242, 225, 243, 0.8); } .screenshot-ui-window-selector-window-border { border-radius: 16px; } /* window border when selecting */ .screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { border-color: rgba(207, 127, 214, 1); } .screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { border-color: rgba(207, 127, 214, 1); background-color: rgba(240, 182, 246, 0.5); } .screenshot-ui-window-selector-check { color: transparent; } /* check icon when selected window */ .screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { color: rgba(40, 7, 43, 0.87); background-color: rgba(207, 127, 214, 1); border-radius: 99px; } /* circle around capture button */ .screenshot-ui-capture-button { width: 36px; height: 36px; border-radius: 99px; border: 4px rgba(148, 102, 153, 1); padding: 4px; } /* capture button */ .screenshot-ui-capture-button .screenshot-ui-capture-button-circle { background-color: rgba(148, 102, 153, 1); transition-duration: 100ms; border-radius: 99px; } .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { background-color: rgba(133, 91, 137, 1); } .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { background-color: rgba(133, 91, 137, 1); } /* capture button when Screencast */ .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { background-color: #c01c28; } .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { background-color: #d61f2d; } .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { background-color: #a11722; } /* screenshot / screencast buttons section */ .screenshot-ui-shot-cast-container { background-color: rgba(237, 219, 239, 0.9); border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } /* screenshot / screencast buttons */ .screenshot-ui-shot-cast-button { background-color: transparent; border-radius: 99px; transition-duration: 100ms; } .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus, .screenshot-ui-shot-cast-button:active { background-color: rgba(227, 203, 230, 0.95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .screenshot-ui-shot-cast-button:checked { background-color: rgba(148, 102, 153, 1); color: rgba(249, 233, 250, 1); } .screenshot-ui-area-indicator-shade { background-color: rgba(0, 0, 0, 0.5); } /* screen selection borders */ .screenshot-ui-area-selector-handle { border-radius: 99px; background-color: white; box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.05); } .screenshot-ui-screen-selector { background-color: rgba(0, 0, 0, 0.5); } .screenshot-ui-screen-selector:hover { background-color: rgba(0, 0, 0, 0.3); } .screenshot-ui-screen-selector:active { background-color: rgba(0, 0, 0, 0.7); } .screenshot-ui-screen-selector:checked { background-color: transparent; } /* tooltip for elements */ .screenshot-ui-tooltip { color: rgba(40, 7, 43, 0.87); background-color: rgba(242, 225, 243, 0.8); padding: 6px 12px; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); } .window-close, /* close button (Overview - Workspaces - Selected window) */ .screenshot-ui-close-button { /* close button (Screenshot UI) */ background-color: rgba(236, 220, 238, 1); color: rgba(40, 7, 43, 0.87); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 99px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); transition-duration: 100ms; } .window-close:hover, .screenshot-ui-close-button:hover { background-color: rgba(227, 203, 230, 1); } /* Search */ /* "no results" text */ .search-statustext { color: rgba(40, 7, 43, 0.38); font-weight: 700; } /* founded results content section */ .search-section-content { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); border-radius: 15px; border: none; background-color: rgba(242, 225, 243, 0.8); color: rgba(40, 7, 43, 0.87); } /* provider section label */ .search-provider-icon .list-search-provider-content .list-search-provider-details { width: 120px; color: rgba(40, 7, 43, 0.87); } /* search result listitem -> item title (with leading icon) */ .list-search-result .list-search-result-title { color: rgba(0, 0, 0, 1); } /* search result listitem -> item description */ .list-search-result .list-search-result-description { color: rgba(40, 7, 43, 0.6); } .list-search-result, .search-provider-icon { background-color: rgba(255, 167, 199, 1); } .list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { background-color: rgba(227, 203, 230, 0.95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .list-search-result:active, .search-provider-icon:active { background-color: rgba(227, 203, 230, 0.95); color: rgba(40, 7, 43, 0.87); }