From 79b1f40a43dc290fc5d649eb1f0d647d1c3eb55f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Mon, 28 Feb 2022 21:19:31 +0100 Subject: [PATCH] Gnome-Shell: generate new gnome themes --- .../Kali-Dark/gnome-shell/gnome-shell.css | 2275 ++++++++++------- .../Kali-Light/gnome-shell/gnome-shell.css | 2248 +++++++++------- 2 files changed, 2605 insertions(+), 1918 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 8b311138..b9d16bdb 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -19,28 +19,23 @@ */ /* Global Values */ stage { - font-size: 10pt; + font-size: 11pt; color: #eeeeec; } /* Common Stylings */ -.search-statustext { - font-size: 2em; - font-weight: bold; - color: white; } - -.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { +.screenshot-ui-panel, .workspace-switcher, .switcher-list, .resize-popup, .osd-window { color: white; background-color: #303340; - border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; padding: 12px; } .workspace-thumbnails .workspace-thumbnail { color: white; background-color: rgba(255, 255, 255, 0.1); } -.app-well-app .overview-icon, -.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { - border-radius: 12px; +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box { + border-radius: 16px; padding: 6px; border: 2px solid transparent; transition-duration: 100ms; @@ -49,92 +44,171 @@ stage { .modal-dialog { color: #eeeeec; background-color: #23252e; - border: 1px solid #0d0e11; } + border-radius: 11px; + border: 1px solid rgba(238, 238, 236, 0.07); } -.app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 8px; +#LookingGlassDialog > #Toolbar .lg-toolbar-button, .button { + border-radius: 6px; border-style: solid; border-width: 1px; - min-height: 22px; + font-weight: bold; padding: 3px 24px; color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #2d2f38; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + background-color: #343640; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .button:checked { + color: #eeeeec; + background-color: #414451; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .button:checked:hover { + background-color: #484b5a; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .button:checked:active { + background-color: #4f5362; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; - border-style: solid; - border-width: 1px; - border-left-width: 0; - border-bottom-width: 0; } + font-weight: bold !important; + margin-right: 1px; + color: #eeeeec; + background-color: #3b3f4b; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #39455d; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { + background-color: #3f4b65; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { + background-color: #45526c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #424654; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { - border-radius: 0 0 0 14px; } - .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { - border-right-width: 0; - border-radius: 0 0 14px 0; } + background-color: #484d5c; } + .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { + color: #eeeeec; + background-color: #4f5565; } + .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { + background-color: #565c6d; } + .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { + background-color: #5d6376; } + .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { + border-radius: 0 0 0 10px; } + .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr { + border-radius: 0 0 10px 0; + margin-right: 0 !important; } + .modal-dialog .modal-dialog-linked-button:first-child:rtl, .hotplug-notification-item:first-child:rtl, .notification-banner .notification-button:first-child:rtl { + border-radius: 0 0 10px 0; } + .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl { + border-radius: 0 0 0 10px; + margin-right: 0 !important; } .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { - border-radius: 0 0 14px 14px; } + border-radius: 0 0 10px 10px !important; + margin-right: 0 !important; } + +.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { + color: #eeeeec; + background-color: #37435a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { + background-color: #3d4962; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { + background-color: #43506a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { + color: #eeeeec; + background-color: #404451; } + .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { + color: #eeeeec; + background-color: #474b59; } + .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { + color: #eeeeec; + background-color: #4d5362; } + .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover { + background-color: #545a6a; } + .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active { + background-color: #5b6173; } + +/* General Typography */ +.search-statustext { + font-weight: 300; + font-size: 24pt; } + +.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { + font-weight: 800; + font-size: 20pt; } + +.lg-debug-flags-header, .message-dialog-content .message-dialog-title, .message-list .message-list-placeholder, .datemenu-today-button .date-label { + font-weight: 800; + font-size: 15pt; } + +.nm-dialog-airplane-headline { + font-weight: 700; + font-size: 15pt; } + +.message-dialog-content .message-dialog-title.lightweight, .headline { + font-weight: 700; + font-size: 13pt; } + +.lg-extension-name, .osd-window, .nm-dialog-header, .dialog-list .dialog-list-title, .message-list-controls, .weather-button .weather-forecast-temp, .weather-button .weather-header, .world-clocks-button .world-clocks-time, .world-clocks-button .world-clocks-header, .events-button .events-title, .calendar .calendar-month-header .calendar-month-label, .datemenu-today-button .day-label, .popup-menu-ornament { + font-weight: 700; + font-size: 11pt; } + +.app-menu .popup-inactive-menu-item:first-child > StLabel { + font-weight: 700; + font-size: 9pt; } + +.login-dialog-not-listed-label, .lg-completions-text, .caps-lock-warning-label, #dash, .icon-label-button-container, .prompt-dialog-error-label, +.prompt-dialog-info-label, +.prompt-dialog-null-label, .run-dialog .run-dialog-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .events-button .event-time { + font-weight: 400; + font-size: 9pt; } + +.calendar .calendar-day-base.calendar-day-heading, .calendar .calendar-day-base { + font-weight: 400; + font-size: 8pt; } + +.unlock-dialog-clock-time, #panel, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .world-clocks-button .world-clocks-time, .events-button .event-time, .calendar .calendar-day-base { + font-feature-settings: "tnum"; } /* WIDGETS */ .shell-link { @@ -152,19 +226,24 @@ stage { StEntry { border-radius: 8px; padding: 8px; - border-width: 0; color: #eeeeec; - background-color: #272a34; - border-color: #0d0e11; + background-color: #2e313d; + color: rgba(238, 238, 236, 0.7); + border: 2px solid #2e313d; selection-background-color: #2777ff; selected-color: #ffffff; } + StEntry:hover { + background-color: #363a48; + border-color: #363a48; + color: rgba(238, 238, 236, 0.7); } StEntry:focus { - border-color: #00348d; - box-shadow: inset 0 0 0 2px #2777ff; } + background-color: #2d3546; + border-color: #2777ff; + color: #eeeeec; } StEntry:insensitive { - color: #888a8d; - border-color: #242731; - box-shadow: none; } + background-color: #2f3340; + border-color: #2f3340; + color: #888a8d; } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #fd7d00; @@ -177,13 +256,16 @@ StEntry { color: rgba(238, 238, 236, 0.7); } /* Buttons */ +.button { + min-height: 22px; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; - height: 22px; + height: 24px; background-image: url("assets/checkbox-off.svg"); } .check-box:focus StBin { @@ -198,33 +280,27 @@ StEntry { /* Switches */ .toggle-switch { color: #eeeeec; - height: 22px; - width: 46px; + height: 26px; + width: 48px; background-size: contain; - background-image: url("assets/toggle-off-dark.svg"); } + background-image: url("assets/toggle-off.svg"); } .toggle-switch:checked { - background-image: url("assets/toggle-on-dark.svg"); } + background-image: url("assets/toggle-on.svg"); } /* Slider */ .slider { - height: 15px; - -barlevel-height: 3px; - -barlevel-background-color: #0d0e11; - -barlevel-border-width: 1px; - -barlevel-border-color: #0d0e11; + -barlevel-height: 4px; + -barlevel-background-color: rgba(238, 238, 236, 0.2); + -barlevel-border-width: 2px; + -barlevel-border-color: transparent; -barlevel-active-background-color: #2777ff; - -barlevel-active-border-color: #317eff; + -barlevel-active-border-color: transparent; -barlevel-overdrive-color: #a61414; - -barlevel-overdrive-border-color: #b01515; + -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 1px; - -slider-handle-radius: 7.5px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: #eeeeec; - color: #eeeeec; } - .slider:hover { - color: #2e313d; } - .slider:active { - color: #0f1014; } + -slider-handle-radius: 8px; + -slider-handle-border-width: 0; + -slider-handle-border-color: transparent; } /* Scrollbars */ StScrollView.vfade { @@ -236,531 +312,490 @@ StScrollView.hfade { StScrollBar { padding: 0; } StScrollView StScrollBar { - min-width: 14px; - min-height: 14px; } + 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: #9d9ea0; - margin: 3px; } + background-color: #606267; + border: 3px solid transparent; + transition: 500ms all ease; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #c5c6c6; } + background-color: #888a8d; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: #2777ff; } + background-color: #74767a; } /* Popovers/Menus */ .popup-menu-boxpointer, .candidate-popup-boxpointer { - -arrow-border-radius: 12px; - -arrow-background-color: #23252e; - -arrow-border-width: 1px; - -arrow-border-color: #0d0e11; - -arrow-base: 24px; - -arrow-rise: 12px; - -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } + margin: 4px; } .popup-menu { min-width: 15em; color: #eeeeec; } .popup-menu.panel-menu { - -boxpointer-gap: 4px; + -boxpointer-gap: 6px; margin-bottom: 1.75em; } -.popup-menu-content { - padding: 16px 0; } +.popup-menu-content, .candidate-popup-content { + padding: 6px; + border-radius: 14px; + border: 1px solid rgba(238, 238, 236, 0.07); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + background-color: #23252e; } .popup-menu-item { - spacing: 6px; - padding: 6px; } - .popup-menu-item:ltr { - padding-right: 1.75em; - padding-left: 0; } - .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.75em; } + padding: 9px 12px; + border-radius: 8px; + transition: 0.2s all ease; + background-color: transparent; } + .popup-menu-item:focus, .popup-menu-item:hover { + background-color: #2b2f3a !important; } + .popup-menu-item:focus:active, .popup-menu-item:hover:active { + background-color: #303340 !important; } .popup-menu-item:checked { - background-color: #272a34; - box-shadow: none; } - .popup-menu-item.selected { - background-color: rgba(255, 255, 255, 0.1); - color: #eeeeec; } + background-color: #363a48 !important; } + .popup-menu-item:checked { + margin-bottom: 0; + box-shadow: inset 0 -1px 0 0 #2b2f3a; + border-radius: 8px 8px 0 0; } + .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { + background-color: #3d4251 !important; } + .popup-menu-item:checked:active { + background-color: #414657 !important; } .popup-menu-item:active { - background-color: #2777ff; - color: #ffffff; } + background-color: #3b3f4e; + color: #fcfcfc; } .popup-menu-item:insensitive { color: rgba(238, 238, 236, 0.5); } .popup-inactive-menu-item { color: #eeeeec; } .popup-inactive-menu-item:insensitive { - color: rgba(238, 238, 236, 0.5); } + color: #888a8d; } .popup-menu-arrow, .popup-menu-icon { - icon-size: 1.09em; } + icon-size: 16px !important; } + +.popup-menu-arrow:ltr { + margin-right: 4px; } + +.popup-menu-arrow:rtl { + margin-left: 4px; } .popup-sub-menu { - background-color: #1c1e25; - box-shadow: none; - border-top: 1px solid rgba(13, 14, 17, 0.8); - border-bottom: 1px solid rgba(13, 14, 17, 0.8); } + background-color: #363a48; + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-ornament { + min-width: 1.09em !important; } + .popup-sub-menu .popup-menu-item { + border-radius: 0; + margin: 0; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: #414657 !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: #4c5266 !important; } + .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { + background-color: #484d60 !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: #464b5d !important; } + .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { + border-radius: 0; } + .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } .popup-menu-ornament { - width: 1.2em; } + width: 1.2em; + text-align: center !important; } .popup-menu-ornament:ltr { text-align: right; } .popup-menu-ornament:rtl { text-align: left; } .popup-separator-menu-item { - padding: 0; } + padding: 0; + margin: 6px 0; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; - margin: 6px 64px; - background-color: #111217; } + background-color: #0d0e11; } + .popup-separator-menu-item .popup-menu-ornament { + width: 0 !important; } + .popup-sub-menu .popup-separator-menu-item { + padding: 0; + margin-right: 2.5em !important; + background-color: transparent; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - margin: 0 64px 0 32px; - background-color: #383d4b; } + background-color: #1c1e25; } .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } .aggregate-menu { - min-width: 21em; } + min-width: 22em; } + .aggregate-menu .popup-menu-ornament { + width: 0 !important; } .aggregate-menu .popup-menu-icon { - padding: 0; - margin: 0 4px; -st-icon-style: symbolic; } + .aggregate-menu .popup-menu-icon:ltr { + margin-right: 8px; } + .aggregate-menu .popup-menu-icon:rtl { + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - padding-left: 14px; - margin-left: 1.09em; } + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - padding-right: 14px; - margin-right: 1.09em; } + margin-right: 8px; } + +.app-menu { + max-width: 27.25em; } + .app-menu .popup-menu-content, .app-menu .candidate-popup-content { + margin: 4px; } + .app-menu.panel-menu .popup-menu-content, .app-menu.panel-menu .candidate-popup-content { + margin: 0; } + .app-menu .popup-menu-ornament { + width: 0 !important; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr { + margin-right: 8px; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:rtl { + margin-left: 8px; } /* Date/Time Menu */ -.clock-display-box { - spacing: 2px; } - .clock-display-box .clock { - padding-left: 12px; - padding-right: 12px; } - #calendarArea { - padding: 0; } + padding: 4px; } .datemenu-calendar-column { - spacing: 6px; - border: 0 solid #181a20; - padding: 0 12px; } + spacing: 6px; } .datemenu-calendar-column:ltr { - margin-right: 8px; - border-left-width: 1px; } + padding-left: 6px; } .datemenu-calendar-column:rtl { - margin-left: 8px; - border-right-width: 1px; } + padding-right: 6px; } .datemenu-calendar-column .datemenu-displays-box { spacing: 6px; } -.events-section-title { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; - color: #878787; - font-weight: bold; - padding: .4em; } - .events-section-title:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .events-section-title:hover { - color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .events-section-title:active { - color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - /* today button (the date) */ .datemenu-today-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - border-color: transparent; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; + background-color: none; + box-shadow: none !important; padding: 9px; } + .datemenu-today-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .datemenu-today-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .datemenu-today-button .day-label { - font-size: 11pt; - font-weight: bold; } - .datemenu-today-button .date-label { - font-size: 17pt; - font-weight: 1000; } + background-color: #3b3d49; } /* Calendar */ .calendar { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - padding: 6px; } + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + background-color: transparent; + background-color: none; + box-shadow: none !important; + margin-top: 0; } + .calendar:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .calendar:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .calendar .calendar-month-label { - color: #fafaf9; - font-weight: bold; - padding: 8px 0; } - .calendar .calendar-change-month-back StIcon, - .calendar .calendar-change-month-forward StIcon { + background-color: #3b3d49; } + .calendar .calendar-month-header .calendar-change-month-back StIcon, + .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } - .calendar .pager-button { + .calendar .calendar-month-header .calendar-month-label { + color: #fafaf9; + padding: 8px 0; } + .calendar .calendar-month-header .pager-button { background-color: transparent; height: 32px; width: 32px; - border-radius: 8px; } - .calendar .pager-button:hover, .calendar .pager-button:focus { - background-color: #383d4b; } - .calendar .pager-button:active { - background-color: #0f1014; } - .calendar .calendar-day-base { - font-size: 7pt; - text-align: center; - width: 32px; - height: 32px; - padding: 0; margin: 2px; - border-radius: 18px; - border: 1px solid transparent; - font-feature-settings: "tnum"; } - .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { - background-color: #2e313d; } + border-radius: 6px; } + .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { + background-color: #2b2f3a; } + .calendar .calendar-month-header .pager-button:active { + background-color: #303340; } + .calendar .calendar-day-base { + text-align: center; + margin: 2px; + padding: 0 !important; + height: 32px !important; + width: 32px !important; + border-radius: 99px; } + .calendar .calendar-day-base:hover { + background-color: #2b2f3a; } + .calendar .calendar-day-base:focus { + background-color: #243658; + color: #ffffff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { - color: white; - background-color: #181a20; } + color: #fcfcfc; + background-color: #303340; } + .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { + background-color: #2e4166; } .calendar .calendar-day-base.calendar-day-heading { - color: white; - margin-top: 1em; - font-size: 6pt; } - .calendar .calendar-day { - border-width: 0; } - .calendar .calendar-day-top { - border-top-width: 1px; } - .calendar .calendar-day-left { - border-left-width: 1px; } + color: #888a8d; + padding-top: 6px; + height: 16px !important; + font-weight: bold; } .calendar .calendar-nonwork-day { color: #888a8d; } - .calendar .calendar-today { - font-weight: bold; - border: 1px solid transparent; - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:hover, .calendar .calendar-today:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-today:active, .calendar .calendar-today:selected { - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-day-with-events { - background-image: url("assets/calendar-today.svg"); } - .calendar .calendar-day-with-events.calendar-work-day { - color: white; - font-weight: bold; } .calendar .calendar-other-month-day { color: rgba(238, 238, 236, 0.5); } + .calendar .calendar-other-month-day.calendar-nonwork-day { + color: rgba(136, 138, 141, 0.5); } + .calendar .calendar-today { + background-color: #2777ff; + font-weight: 800; + color: #ffffff !important; } + .calendar .calendar-today:hover, .calendar .calendar-today:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-today:active, .calendar .calendar-today:selected { + background-color: #2777ff; + color: inherit; } + .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-day-with-events { + background-image: url("assets/calendar-today.svg"); + background-size: contain; } .calendar .calendar-week-number { - font-size: 6pt; + font-size: 7pt; font-weight: bold; - height: 1.8em; - width: 2.3em; - border-radius: 2px; + font-feature-settings: "tnum"; margin: 6px; + padding: 0 6px; + border-radius: 3px; background-color: #1e2128; - color: #fafaf9; } + color: #888a8d; } /* Events */ .events-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2d2f38; padding: 12px; } .events-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .events-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .events-button .events-box { spacing: 6px; } .events-button .events-list { spacing: 12px; } .events-button .events-title { - color: #878787; - font-weight: bold; + color: #888a8d; margin-bottom: 4px; } .events-button .event-time { - color: #bebeb6; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #888a8d; } /* World clocks */ .world-clocks-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2d2f38; padding: 12px; } .world-clocks-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .world-clocks-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } .world-clocks-button .world-clocks-header { - color: #878787; - font-weight: bold; } + color: #888a8d; } .world-clocks-button .world-clocks-city { - color: #eeeeec; - font-size: 10pt; - font-weight: normal; } + color: #eeeeec; } .world-clocks-button .world-clocks-time { - font-weight: bold; - color: #eeeeec; - font-feature-settings: "tnum"; - font-size: 10pt; } + color: #eeeeec; } .world-clocks-button .world-clocks-time:ltr { text-align: right; } .world-clocks-button .world-clocks-time:rtl { text-align: left; } .world-clocks-button .world-clocks-timezone { - color: #bebeb6; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #888a8d; } /* Weather */ .weather-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2d2f38; padding: 12px; } .weather-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .weather-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { spacing: 6px; } .weather-button .weather-header { - color: #878787; - font-weight: bold; } + color: #888a8d; } .weather-button .weather-header.location { - font-weight: normal; - font-size: 9pt; } + font-weight: normal; } .weather-button .weather-grid { spacing-rows: 6px; spacing-columns: 12px; } .weather-button .weather-forecast-time { color: #a6a69b; - font-feature-settings: "tnum"; - font-size: 8pt; - font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-icon { icon-size: 2.18em; } - .weather-button .weather-forecast-temp { - font-weight: bold; } /* Message List */ .message-list { - width: 31.5em; - padding: 0 12px; } + width: 32em; + border: solid #0d0e11; } + .message-list:ltr { + margin-left: 0; + margin-right: 4px; + padding-right: 6px; + border-right-width: 1px; } + .message-list:rtl { + margin-right: 0; + margin-left: 4px; + padding-left: 6px; + border-left-width: 1px; } .message-list .message-list-placeholder { - spacing: 12px; } + color: rgba(136, 138, 141, 0.5); } + .message-list .message-list-placeholder > StIcon { + icon-size: 3.27em; + margin-bottom: 12px; + -st-icon-style: symbolic; } .message-list-sections { spacing: 6px; - margin: 0 16px; } + margin: 0; + padding-bottom: 6px; } + .message-list-sections:ltr { + margin-right: 12px; } + .message-list-sections:rtl { + margin-left: 12px; } .message-list-section, .message-list-section-list { spacing: 6px; } .message-list-controls { - margin: 8px 16px 0; - padding: 4px; - spacing: 12px; } + padding: 6px; + spacing: 6px; } .message-list-controls .dnd-button { border-width: 2px; border-color: transparent; - border-radius: 99px; + border-radius: 32px; border-style: solid; } .message-list-controls .dnd-button:focus { border-color: rgba(39, 119, 255, 0.6); } .message { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #2d2f38; } .message:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .message:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .message:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + background-color: #343640; } .message:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .message .message-icon-bin { - padding: 18px 0 18px 12px; } + padding: 18px; + padding-right: 6px; } .message .message-icon-bin:rtl { - padding: 18px 12px 18px 0; } + padding-right: 6px; } .message .message-icon-bin > StIcon { icon-size: 2.18em; -st-icon-style: symbolic; } @@ -768,15 +803,18 @@ StScrollBar { width: 1.09em; height: 1.09em; } .message .message-content { - padding: 14px; - spacing: 4px; } + spacing: 4px; + padding: 9px; + margin-bottom: 8px; } .message .message-title { - font-weight: bold; } + font-weight: bold; + /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ + padding-top: 0.57em; } .message .message-secondary-bin { padding: 0 8px; } .message .message-secondary-bin > .event-time { color: rgba(238, 238, 236, 0.5); - font-size: 8pt; + font-size: 9pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { @@ -784,11 +822,15 @@ StScrollBar { .message .message-secondary-bin > .event-time:rtl { text-align: left; } .message .message-close-button { - color: white; } + color: #eeeeec; + background-color: rgba(238, 238, 236, 0.1); + border-radius: 99px; + padding: 5px; + margin: 1px; } .message .message-close-button:hover { - color: #d6d6d1; } + background-color: rgba(238, 238, 236, 0.2); } .message .message-close-button:active { - color: #bebeb6; } + background-color: rgba(238, 238, 236, 0.1); } .message .message-body { color: #d6d6d1; } @@ -797,75 +839,87 @@ StScrollBar { /* Media Controls */ .message-media-control { - padding: 12px 1.64em; - color: #cacac4; } + padding: 0 18px; + margin: 12px 0; + border-radius: 8px; + color: #eeeeec; } .message-media-control:hover { - background-color: #383d4b; + background-color: #363a48; color: #eeeeec; } .message-media-control:active { - background-color: #292c37; + background-color: #3b3f4e; color: #eeeeec; } .message-media-control:insensitive { - color: #8e8e80; } + color: #959799; } .message-media-control:last-child:ltr { - border-radius: 0 10px 10px 0; } + margin-right: 12px; } .message-media-control:last-child:rtl { - border-radius: 10px 0 0 10px; } + margin-left: 12px; } .media-message-cover-icon { - icon-size: 2.18em !important; + icon-size: 3.27em !important; border-radius: 8px; } .media-message-cover-icon.fallback { color: #c5c5be; background-color: #23252e; border: 1px solid transparent; border-radius: 8px; - icon-size: 2.18em !important; } + icon-size: 2.18em !important; + padding: 14px; } .candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; } + padding: 6px; + spacing: 6px; } .candidate-index { - padding: 0 0.5em 0 0; - color: #d6d6d1; } + padding: 0; + padding-right: 6px; + color: #888a8d; } .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; + padding: 6px 12px 6px 12px; border-radius: 8px; } - .candidate-box:selected, .candidate-box:hover { + .candidate-box:selected { background-color: #2777ff; color: #ffffff; } + .candidate-box:hover { + background-color: #2b2f3a; + color: #f8f8f7; } .candidate-page-button-box { height: 2em; } .vertical .candidate-page-button-box { - padding-top: 0.5em; } + padding-top: 12px; } .horizontal .candidate-page-button-box { - padding-left: 0.5em; } + padding-left: 12px; } .candidate-page-button { - padding: 4px; } + padding: 6px; } .candidate-page-button-previous { border-radius: 8px 0px 0px 8px; - border-right-width: 0; } + border-right-width: 0; + box-shadow: none; } .candidate-page-button-next { - border-radius: 0px 8px 8px 0px; } + border-radius: 0px 8px 8px 0px; + box-shadow: none; } .candidate-page-button-icon { - icon-size: 1em; } + icon-size: 1.09em; } /* Notifications & Message Tray */ .notification-banner { min-height: 64px; - width: 34em; } + width: 34em; + box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1); + border-radius: 12px; + margin: 4px; } .notification-banner .notification-actions { spacing: 0; } .summary-source-counter { - font-size: 9pt; + font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; @@ -904,7 +958,7 @@ StScrollBar { .chat-meta-message { padding-left: 4px; - font-size: 8pt; + font-size: 9pt; font-weight: bold; color: white; } .chat-meta-message:rtl { @@ -916,15 +970,10 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.headline { - font-size: 11pt; } - -.modal-dialog { - border-radius: 16px; } - .modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -937,12 +986,7 @@ StScrollBar { .message-dialog-content { spacing: 18px; } .message-dialog-content .message-dialog-title { - text-align: center; - font-size: 18pt; - font-weight: 800; } - .message-dialog-content .message-dialog-title.lightweight { - font-size: 13pt; - font-weight: 800; } + text-align: center; } .message-dialog-content .message-dialog-description { text-align: center; } @@ -950,8 +994,7 @@ StScrollBar { .dialog-list { spacing: 18px; } .dialog-list .dialog-list-title { - text-align: center; - font-weight: bold; } + text-align: center; } .dialog-list .dialog-list-scrollview { max-height: 200px; } .dialog-list .dialog-list-box { @@ -961,8 +1004,7 @@ StScrollBar { .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { - color: #e2e2df; - font-size: 9pt; } + color: #e2e2df; } /* Run Dialog */ .run-dialog .modal-dialog-content-box { @@ -973,7 +1015,6 @@ StScrollBar { width: 20em; } .run-dialog .run-dialog-description { - font-size: 9pt; text-align: center; color: #bebeb6; } @@ -1002,8 +1043,7 @@ StScrollBar { .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { - text-align: center; - font-size: 9pt; } + text-align: center; } .prompt-dialog-error-label { color: #fd7d00; } @@ -1024,10 +1064,9 @@ StScrollBar { spacing: 20px; } .audio-selection-device { - border: 1px solid #181a20; - border-radius: 12px; } + border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #2e313d; } + background-color: #2b2f3a; } .audio-selection-device:active { background-color: #2777ff; color: #ffffff; } @@ -1047,7 +1086,7 @@ StScrollBar { height: 300px; width: 300px; } -/* Network Dialogs */ +/* Select Network dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; @@ -1057,18 +1096,8 @@ StScrollBar { spacing: 20px; padding: 24px; } -.nm-dialog-airplane-box { - spacing: 12px; } - -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; } - -.nm-dialog-airplane-text { - color: #eeeeec; } - -.nm-dialog-header { - font-weight: bold; } +.nm-dialog-subheader { + color: #888a8d; } .nm-dialog-header-icon { icon-size: 2.18em; } @@ -1077,18 +1106,18 @@ StScrollBar { spacing: 10px; } .nm-dialog-scroll-view { - border: 1px solid #0d0e11; - padding: 0; - background-color: #1c1e25; } + padding: 6px; + border-radius: 8px; + background-color: #272a34; } .nm-dialog-item { - font-size: 10pt; - border-bottom: 1px solid #0d0e11; - padding: 12px; - spacing: 0px; } + padding: 12px; } .nm-dialog-item:selected { background-color: #2777ff; + border-radius: 5px; color: #ffffff; } + .nm-dialog-item:hover { + background-color: #2b2f3a; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1096,31 +1125,51 @@ StScrollBar { .nm-dialog-icons { spacing: 12px; } +.no-networks-box { + spacing: 6px; } + .no-networks-label { color: #888a8d; } -.no-networks-box { - spacing: 6px; } +.nm-dialog-airplane-box { + text-align: center; + spacing: 12px; } + +.nm-dialog-airplane-text { + color: #888a8d; } /* OSD */ .osd-window { text-align: center; font-weight: bold; spacing: 12px; - margin: 32px; - min-width: 64px; - min-height: 64px; } + padding: 12px 18px; + margin-bottom: 4em; } + .osd-window > * { + spacing: 8px; } .osd-window StIcon { - icon-size: 6.54em; } + icon-size: 2.18em; } .osd-window .osd-monitor-label { font-size: 3em; } + .osd-window StLabel:ltr { + margin-right: 6px; } + .osd-window StLabel:rtl { + margin-left: 6px; } .osd-window .level { - height: 8px; - -barlevel-height: 8px; + margin-bottom: 4px; + height: 6px; + min-width: 10.9em; + -barlevel-height: 6px; -barlevel-background-color: rgba(255, 255, 255, 0.1); -barlevel-active-background-color: white; -barlevel-overdrive-color: #a61414; -barlevel-overdrive-separator-width: 3px; } + .osd-window .level:first-child { + margin-bottom: 0px; } + .osd-window .level:ltr { + margin-right: 6px; } + .osd-window .level:rtl { + margin-left: 6px; } /* Pad OSD */ .pad-osd-window { @@ -1136,38 +1185,52 @@ StScrollBar { /* App Switcher */ .switcher-popup { - padding: 8px; + padding: 0; spacing: 24px; } -.switcher-list .item-box { - padding: 8px; - border-radius: 9px; - border: 1px solid transparent; } - .switcher-list .item-box:outlined { - background-color: rgba(255, 255, 255, 0.3); } - .switcher-list .item-box:selected { - background-color: rgba(255, 255, 255, 0.3); - color: white; } - -.switcher-list .thumbnail-box { - padding: 2px; - spacing: 6px; } - -.switcher-list .thumbnail { - width: 256px; } - -.switcher-list .separator { - width: 1px; - background: #0d0e11; } - -.switcher-list .switcher-list-item-container { - spacing: 12px; } +.switcher-list { + padding: 10px; + border-radius: 24px; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } + .switcher-list .switcher-list-item-container { + spacing: 12px; } + .switcher-list .item-box { + background-color: transparent; } + .switcher-list .item-box:hover { + background-color: rgba(255, 255, 255, 0.1); } + .switcher-list .item-box:selected, .switcher-list .item-box:focus { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:selected:hover, .switcher-list .item-box:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:selected:active, .switcher-list .item-box:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:active { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:outlined, .switcher-list .item-box:checked { + background-color: rgba(255, 255, 255, 0.19); } + .switcher-list .item-box:outlined:active, .switcher-list .item-box:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .switcher-list .item-box:outlined:hover, .switcher-list .item-box:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .switcher-list .item-box:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } + .switcher-list .separator { + width: 1px; + background: #0d0e11; } + .switcher-list .thumbnail-box { + padding: 2px; + spacing: 6px; } + .switcher-list .thumbnail { + width: 256px; + border-radius: 8px; } .switcher-arrow { - border-color: rgba(0, 0, 0, 0); - color: rgba(238, 238, 236, 0.8); } + border-color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, 0.8); } .switcher-arrow:highlighted { - color: #eeeeec; } + border-color: white; + color: white; } .input-source-switcher-symbol { font-size: 34pt; @@ -1178,54 +1241,173 @@ StScrollBar { border: 5px solid #2777ff; } /* Workspace Switcher */ -.workspace-switcher-group { - padding: 12px; } - .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; - padding: 0; + margin-bottom: 4em; + spacing: 12px; + padding: 12px 18px; } + +.ws-switcher-indicator { + background-color: rgba(255, 255, 255, 0.5); + padding: 0.1816666667em; + margin: 0.9083333333em; + border-radius: 2.18em; } + .ws-switcher-indicator:active { + background-color: white; + padding: 0.3633333333em; + margin: 0.7266666667em; } + +.icon-label-button-container { + spacing: 6px; } + .icon-label-button-container StIcon { + icon-size: 32px; } + +.screenshot-ui-panel { + border-radius: 37px; + padding: 18px; + padding-bottom: 12px; + margin-bottom: 4em; spacing: 12px; } -.ws-switcher-box { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 11px; } +.screenshot-ui-close-button { + padding: 6px; } + .screenshot-ui-close-button.left { + margin-left: 8px; } + .screenshot-ui-close-button.right { + margin-right: 8px; } -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - height: 52px; - background-color: #2777ff; - border: 1px solid #4187ff; - border-radius: 11px; - color: #ffffff; } +.screenshot-ui-type-button { + padding: 12px 18px !important; + border-radius: 19px; } + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: 99px; + border: 4px white; + padding: 4px; } + .screenshot-ui-capture-button .screenshot-ui-capture-button-circle { + background-color: white; + transition-duration: 200ms; + 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: #2b2f3a; } + .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { + background-color: #d9d9d9; } + .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { + background-color: gray; } + .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { + background-color: #bf1717; } + .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { + background-color: #7b0f0f; } + .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { + background-color: #360707; } + +.screenshot-ui-shot-cast-container { + background-color: #2b2f3a; + border-radius: 16px; + padding: 3px; + spacing: 3px; } + .screenshot-ui-shot-cast-container:ltr { + margin-left: 3px; } + .screenshot-ui-shot-cast-container:rtl { + margin-right: 3px; } + +.screenshot-ui-shot-cast-button { + padding: 6px 12px; + background-color: transparent; + border-radius: 13px; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: #363a48; } + .screenshot-ui-shot-cast-button:active { + background-color: #3b3f4e; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + .screenshot-ui-shot-cast-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-show-pointer-button { + border-radius: 99px; + padding: 12px !important; } + .screenshot-ui-show-pointer-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.3); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.5); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection { + border: 2px white; } + +.screenshot-ui-area-selector-handle { + border-radius: 99px; + background-color: white; + box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2); + width: 24px; + height: 24px; } + +.screenshot-ui-window-selector { + background-color: #272a34; } + .screenshot-ui-window-selector .screenshot-ui-window-selector-window-container { + margin: 100px; } + .screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container { + margin-bottom: 200px; } + +.screenshot-ui-window-selector-window-border { + transition-duration: 200ms; + border-radius: 16px; + border: 6px transparent; } + +.screenshot-ui-window-selector-check { + transition-duration: 200ms; + color: transparent; + border-radius: 99px; + border-width: 12px; + icon-size: 24px; } + +.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { + border-color: #0051da; } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { + border-color: #2777ff; + background-color: rgba(39, 119, 255, 0.2); } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { + color: white; + background-color: #2777ff; } + +.screenshot-ui-screen-selector { + transition-duration: 200ms; + 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; + border: 2px white; } + +.screenshot-ui-tooltip { + color: white; + background-color: #303340; + border-radius: 99px; + padding: 6px 12px; + text-align: center; + -y-offset: 24px; } /* Top Bar */ #panel { background-color: #000; font-weight: bold; height: 2.2em; - font-feature-settings: "tnum"; transition-duration: 250ms; } #panel.unlock-screen, #panel.login-screen, #panel:overview { background-color: transparent; } - #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { - -panel-corner-opacity: 0; } - #panel .panel-corner { - -panel-corner-radius: 9px; - -panel-corner-background-color: #000; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - -panel-corner-opacity: 1; - transition-duration: 250ms; } #panel .panel-button { font-weight: bold; - color: #ddd; + color: #e2e2df; -natural-hpadding: 12px; -minimum-hpadding: 6px; transition-duration: 150ms; @@ -1235,12 +1417,36 @@ StScrollBar { transition-duration: 150ms; border: 3px solid transparent; border-radius: 99px; } - #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } - #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { + #panel .panel-button.screen-recording-indicator { + box-shadow: inset 0 0 0 100px #bf1717; } + #panel .panel-button.screen-recording-indicator StBoxLayout { + spacing: 6px; } + #panel .panel-button.screen-recording-indicator StIcon { + icon-size: 1.09em; } + #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.2); } + #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { box-shadow: none; } - #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { - box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.2); } + #panel .panel-button:active.screen-recording-indicator, #panel .panel-button:overview.screen-recording-indicator, #panel .panel-button:focus.screen-recording-indicator, #panel .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.15); } + #panel .panel-button:hover.clock-display { + box-shadow: none; } + #panel .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.15); } + #panel .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel .panel-button:active:hover, #panel .panel-button:overview:hover, #panel .panel-button:focus:hover, #panel .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.25); } + #panel .panel-button:active:hover.clock-display, #panel .panel-button:overview:hover.clock-display, #panel .panel-button:focus:hover.clock-display, #panel .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel .panel-button:active:hover.clock-display .clock, #panel .panel-button:overview:hover.clock-display .clock, #panel .panel-button:focus:hover.clock-display .clock, #panel .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.25); } + #panel .panel-button:active:hover.screen-recording-indicator, #panel .panel-button:overview:hover.screen-recording-indicator, #panel .panel-button:focus:hover.screen-recording-indicator, #panel .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; @@ -1252,12 +1458,30 @@ StScrollBar { -st-icon-style: symbolic; } #panel .panel-button#panelActivities { -natural-hpadding: 18px; } - #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { + #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } - #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { + #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { box-shadow: none; } - #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { + #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel.unlock-screen .panel-button:active.screen-recording-indicator, #panel.unlock-screen .panel-button:overview.screen-recording-indicator, #panel.unlock-screen .panel-button:focus.screen-recording-indicator, #panel.unlock-screen .panel-button:checked.screen-recording-indicator, #panel.login-screen .panel-button:active.screen-recording-indicator, #panel.login-screen .panel-button:overview.screen-recording-indicator, #panel.login-screen .panel-button:focus.screen-recording-indicator, #panel.login-screen .panel-button:checked.screen-recording-indicator, #panel:overview .panel-button:active.screen-recording-indicator, #panel:overview .panel-button:overview.screen-recording-indicator, #panel:overview .panel-button:focus.screen-recording-indicator, #panel:overview .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel:overview .panel-button:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.screen-recording-indicator, #panel.login-screen .panel-button:hover.screen-recording-indicator, #panel:overview .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked:hover, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.clock-display, #panel.unlock-screen .panel-button:overview:hover.clock-display, #panel.unlock-screen .panel-button:focus:hover.clock-display, #panel.unlock-screen .panel-button:checked:hover.clock-display, #panel.login-screen .panel-button:active:hover.clock-display, #panel.login-screen .panel-button:overview:hover.clock-display, #panel.login-screen .panel-button:focus:hover.clock-display, #panel.login-screen .panel-button:checked:hover.clock-display, #panel:overview .panel-button:active:hover.clock-display, #panel:overview .panel-button:overview:hover.clock-display, #panel:overview .panel-button:focus:hover.clock-display, #panel:overview .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:active:hover.clock-display .clock, #panel.unlock-screen .panel-button:overview:hover.clock-display .clock, #panel.unlock-screen .panel-button:focus:hover.clock-display .clock, #panel.unlock-screen .panel-button:checked:hover.clock-display .clock, #panel.login-screen .panel-button:active:hover.clock-display .clock, #panel.login-screen .panel-button:overview:hover.clock-display .clock, #panel.login-screen .panel-button:focus:hover.clock-display .clock, #panel.login-screen .panel-button:checked:hover.clock-display .clock, #panel:overview .panel-button:active:hover.clock-display .clock, #panel:overview .panel-button:overview:hover.clock-display .clock, #panel:overview .panel-button:focus:hover.clock-display .clock, #panel:overview .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:overview:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:focus:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:checked:hover.screen-recording-indicator, #panel.login-screen .panel-button:active:hover.screen-recording-indicator, #panel.login-screen .panel-button:overview:hover.screen-recording-indicator, #panel.login-screen .panel-button:focus:hover.screen-recording-indicator, #panel.login-screen .panel-button:checked:hover.screen-recording-indicator, #panel:overview .panel-button:active:hover.screen-recording-indicator, #panel:overview .panel-button:overview:hover.screen-recording-indicator, #panel:overview .panel-button:focus:hover.screen-recording-indicator, #panel:overview .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } @@ -1276,6 +1500,12 @@ StScrollBar { padding: 0 6px; spacing: 6px; } +.clock-display-box { + spacing: 2px; } + .clock-display-box .clock { + padding-left: 12px; + padding-right: 12px; } + /* Activities Ripple */ .ripple-box { background-color: rgba(243, 247, 255, 0.3); @@ -1306,22 +1536,21 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; } -.window-close { - background-color: #303340; +.window-close, .screenshot-ui-close-button { + background-color: rgba(41, 44, 55, 0.95); color: white; border-radius: 21px; padding: 3px; height: 30px; width: 30px; - box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); transition-duration: 300ms; } - .window-close StIcon { + .window-close StIcon, .screenshot-ui-close-button StIcon { icon-size: 24px; } - .window-close:hover { - background-color: #51576b; } - .window-close:active { + .window-close:hover, .screenshot-ui-close-button:hover { + background-color: rgba(76, 79, 88, 0.9575); } + .window-close:active, .screenshot-ui-close-button:active { color: rgba(255, 255, 255, 0.8); - background-color: #252831; } + background-color: rgba(30, 33, 40, 0.95); } .workspace-background { border-radius: 30px; @@ -1329,30 +1558,35 @@ StScrollBar { .search-entry { - width: 320px; - padding: 7px 9px; border-radius: 18px; - color: rgba(238, 238, 236, 0.7); - background-color: #23252e; margin-top: 12px; margin-bottom: 6px; - border-width: 2px; - border-color: transparent; } + padding: 7px 9px; + width: 320px; + background-color: #2e313d; + color: rgba(238, 238, 236, 0.7); + border: 2px solid #2e313d; } .search-entry:hover { - background-color: #2e313d; - color: #fafaf9; } + background-color: #363a48; + border-color: #363a48; + color: rgba(238, 238, 236, 0.7); } .search-entry:focus { - border-style: solid; + background-color: #2d3546; border-color: #2777ff; - color: #eeeeec; - box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } + color: #eeeeec; } + + .search-entry:insensitive { + background-color: #2f3340; + border-color: #2f3340; + color: #888a8d; } .search-entry .search-entry-icon { + color: inherit; icon-size: 1.09em; - padding: 0 4px; - color: inherit; } + margin-top: 2px; + padding: 0 4px; } /* Search */ #searchResultsContent { @@ -1362,25 +1596,42 @@ StScrollBar { .search-section { spacing: 8px; } .search-section .search-section-separator { - height: 0; + height: 8px; background-color: transparent; } .search-section-content { - background-color: rgba(59, 63, 78, 0.8); - border-radius: 19px; + background-color: #323643; + border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: none; + text-shadow: none; color: white; - padding: 18px; - spacing: 8px; } + padding: 12px; + margin: 4px; } -.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(255, 255, 255, 0.1); - transition-duration: 200ms; } - -.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { - background-color: rgba(26, 28, 35, 0.9); } +.list-search-result, .search-provider-icon { + background-color: transparent; + margin: 4px; + border-radius: 8px !important; } + .list-search-result:hover, .search-provider-icon:hover { + background-color: rgba(255, 255, 255, 0.1); } + .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:selected:hover, .search-provider-icon:selected:hover, .list-search-result:focus:hover, .search-provider-icon:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:selected:active, .search-provider-icon:selected:active, .list-search-result:focus:active, .search-provider-icon:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:active, .search-provider-icon:active { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:outlined, .search-provider-icon:outlined, .list-search-result:checked, .search-provider-icon:checked { + background-color: rgba(255, 255, 255, 0.19); } + .list-search-result:outlined:active, .search-provider-icon:outlined:active, .list-search-result:checked:active, .search-provider-icon:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .list-search-result:outlined:hover, .search-provider-icon:outlined:hover, .list-search-result:checked:hover, .search-provider-icon:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .list-search-result:drop, .search-provider-icon:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .grid-search-results { spacing: 36px; } @@ -1389,8 +1640,7 @@ StScrollBar { spacing: 12px; } .search-provider-icon .list-search-provider-content .list-search-provider-details { width: 120px; - margin-top: 0; - color: #ebebeb; } + color: white; } .list-search-results { spacing: 6px; } @@ -1402,13 +1652,11 @@ StScrollBar { spacing: 12px; } .list-search-result .list-search-result-description { - color: #b3b3b3; } + color: #97999f; } /* Dash */ #dash { - font-size: 8pt; - margin-top: 18px; - padding: 0 10px; } + margin: 2em; } #dash .placeholder { background-image: none; background-size: contain; @@ -1416,22 +1664,49 @@ StScrollBar { #dash .empty-dash-drop-target { width: 32px; height: 32px; } - #dash .overview-icon { - padding: 5px; } + #dash .app-well-app-running-dot { + margin-bottom: 15px; } .dash-background { - background-color: #3b3b3b; - margin-bottom: 16px; - padding: 10px; - border-radius: 24px; } + background-color: #323643; + border-radius: 28px; + padding: 12px; + spacing: 6px; } -.dash-item-container .app-well-app, .show-apps { - padding: 10px 1.5px 26px; } +.dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { + margin: 0 4px; + padding: 6px; } + +.dash-item-container .show-apps .overview-icon { + background-color: transparent; } + +.dash-item-container .show-apps:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .dash-item-container .show-apps:selected .overview-icon:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .dash-item-container .show-apps:selected .overview-icon:active .overview-icon, .dash-item-container .show-apps:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.dash-item-container .show-apps:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.dash-item-container .show-apps:outlined .overview-icon, .dash-item-container .show-apps:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .dash-item-container .show-apps:outlined .overview-icon:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .dash-item-container .show-apps:outlined .overview-icon:hover .overview-icon, .dash-item-container .show-apps:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.dash-item-container .show-apps:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .dash-separator { width: 1px; - margin: 0 6.5px 16px; - background-color: rgba(255, 255, 255, 0.3); } + background-color: #0d0e11; } .dash-label { color: white; @@ -1439,27 +1714,7 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; text-align: center; - -y-offset: 12px; } - -.show-apps .overview-icon { - color: white; } - -.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } - -.show-apps:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } - -.show-apps:drop .overview-icon { - border: 2px solid #2777ff; - background-color: rgba(39, 119, 255, 0.2); } - -.show-apps:active .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } - -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(48, 51, 64, 0.5); - color: #eeeeec; } + -y-offset: 8px; } /* App Grid */ .icon-grid { @@ -1473,64 +1728,108 @@ StScrollBar { page-padding-right: 12px; } /* App Icons */ -.app-well-app .overview-icon, -.grid-search-result .overview-icon { - color: #fff; } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + background-color: transparent; } -.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon, -.grid-search-result:hover .overview-icon, -.grid-search-result:selected .overview-icon { +.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app:focus .overview-icon, -.grid-search-result:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } +.app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app:selected .overview-icon:hover .overview-icon, .grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app:focus .overview-icon:hover .overview-icon, .grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app:selected .overview-icon:active .overview-icon, .grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app:focus .overview-icon:active .overview-icon, .grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } -.app-well-app:drop .overview-icon, -.grid-search-result:drop .overview-icon { - border: 2px solid #2777ff; +.app-well-app:active .overview-icon, .grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app:outlined .overview-icon, .grid-search-result:outlined .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app:outlined .overview-icon:active .overview-icon, .grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app:checked .overview-icon:active .overview-icon, .grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app:outlined .overview-icon:hover .overview-icon, .grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app:checked .overview-icon:hover .overview-icon, .grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, -.grid-search-result:active .overview-icon, -.grid-search-result:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + padding: 12px; } -.app-well-app .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; } - .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, - .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { - spacing: 6px; } +.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { + spacing: 6px; } -/* App Folders */ -.app-well-app.app-folder { - background-color: #3b3b3b; - border-radius: 12px; } +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + +.app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.app-well-app.app-folder:selected .overview-icon, .app-folder.grid-search-result:selected .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-folder.grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app.app-folder:selected .overview-icon:hover .overview-icon, .app-folder.grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon:hover .overview-icon, .app-folder.grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app.app-folder:selected .overview-icon:active .overview-icon, .app-folder.grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app.app-folder:focus .overview-icon:active .overview-icon, .app-folder.grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.app-well-app.app-folder:active .overview-icon, .app-folder.grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app.app-folder:outlined .overview-icon, .app-folder.grid-search-result:outlined .overview-icon, .app-well-app.app-folder:checked .overview-icon, .app-folder.grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app.app-folder:outlined .overview-icon:active .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app.app-folder:checked .overview-icon:active .overview-icon, .app-folder.grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app.app-folder:outlined .overview-icon:hover .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app.app-folder:checked .overview-icon:hover .overview-icon, .app-folder.grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .app-folder-dialog { - border-radius: 24px; - background-color: #3b3b3b; + border-radius: 32px; + background-color: #323643; padding: 12px 0px 12px 0px; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; /* FIXME: this is to keep the label in sync with the entry */ } - .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { - font-size: 18pt; - font-weight: 800; } .app-folder-dialog .folder-name-container .folder-name-entry { width: 300px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } .app-folder-dialog .folder-name-container .edit-folder-button { - padding: 0; + background-color: transparent; + background-color: none; width: 36px; height: 36px; border-radius: 18px; } + .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus { + color: #eeeeec; + background-color: #2c364c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:hover { + color: #eeeeec; + background-color: #343640; } + .app-folder-dialog .folder-name-container .edit-folder-button:active { + color: #eeeeec; + background-color: #3b3d49; } .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { - icon-size: 16px; } + icon-size: 1.09em; } .app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; @@ -1550,17 +1849,14 @@ StScrollBar { height: 5px; width: 5px; border-radius: 5px; - background-color: white; - margin-bottom: 1px; } + margin-bottom: 8px; + background-color: white; } .rename-folder-popup .rename-folder-popup-item { spacing: 6px; } .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { padding: 0 12px; } -.app-menu { - max-width: 27.25em; } - .page-indicator { padding: 6px 12px 0; } .page-indicator .page-indicator-icon { @@ -1586,12 +1882,12 @@ StScrollBar { background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: 15px 0px 0px 15px; } + border-radius: 24px 0px 0px 24px; } .page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px 15px 15px 0px; } + border-radius: 0px 24px 24px 0px; } .page-navigation-arrow { margin: 6px; @@ -1675,7 +1971,6 @@ StScrollBar { .caps-lock-warning-label { text-align: center; padding-bottom: 8px; - font-size: 9pt; color: #fd7d00; } /* Workspace animation */ @@ -1687,18 +1982,9 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); border: 1px solid #2777ff; } -.tile-preview-left.on-primary { - border-radius: 9px 0 0 0; } - -.tile-preview-right.on-primary { - border-radius: 0 9px 0 0; } - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 9px 9px 0 0; } - /* On-screen Keyboard */ #keyboard { - background-color: rgba(17, 18, 23, 0.9); + background-color: #303340; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } #keyboard .page-indicator { padding: 6px; } @@ -1711,124 +1997,107 @@ StScrollBar { spacing: 4px; } .keyboard-key { - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - font-size: 15pt; + font-size: 16pt; + font-weight: bold; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; - border-radius: 11px; } + border-radius: 12px; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3); + color: white; + background-color: #545454; } .keyboard-key:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-key:hover, .keyboard-key:checked { - color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-key:active { - color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-key:checked { + color: white; + background-color: #737373; } .keyboard-key:grayed { background-color: #1c1e25; color: white; border-color: black; } .keyboard-key.default-key { - color: #eeeeec; - background-color: #3b3f4e; - border-color: #2b2f3a; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { - color: #eeeeec; - background-color: #3f4454; - border-color: #2b2f3a; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + color: white; + background-color: #3b3b3b; + border-radius: 12px; } + .keyboard-key.default-key:hover { + color: white; + background-color: #454545; } .keyboard-key.default-key:active { - color: #eeeeec; - background-color: #2e313d; - border-color: #1c1e25; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #4d4d4d; } + .keyboard-key.default-key:checked { + color: white; + background-color: #595959; } .keyboard-key.enter-key { color: #ffffff; background-color: #3681ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { - color: #eeeeec; - background-color: #5091ff; - border-color: #2274ff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + border-radius: 12px; + color: white; } + .keyboard-key.enter-key:hover { + color: #ffffff; + background-color: #4b8eff; } .keyboard-key.enter-key:active { - color: #eeeeec; - background-color: #0e67ff; - border-color: #0054e4; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: #ffffff; + background-color: #5a97ff; } + .keyboard-key.enter-key:checked { + color: #ffffff; + background-color: #74a7ff; } .keyboard-key.shift-key-uppercase { - color: #2777ff; } + background-color: gray; + color: #303340; } + .keyboard-key.shift-key-uppercase:hover { + background-color: #8c8c8c; + color: #3b3f4e; } .keyboard-key StIcon { - icon-size: 1.125em; } + icon-size: 24px; } .keyboard-subkeys { - color: white; -arrow-border-radius: 16px; -arrow-background-color: #303340; -arrow-border-width: 1px; -arrow-border-color: #43495a; -arrow-base: 20px; -arrow-rise: 10px; - -boxpointer-gap: 6px; } + -boxpointer-gap: 6px; + padding: 6px; } .keyboard-subkeys .keyboard-key { - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - border-radius: 8px; } + color: white; + background-color: #545454; + border-radius: 12px; } .keyboard-subkeys .keyboard-key:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { - color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .keyboard-subkeys .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-subkeys .keyboard-key:active { - color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-subkeys .keyboard-key:checked { + color: white; + background-color: #737373; } .emoji-page .keyboard-key { background-color: transparent; @@ -1840,44 +2109,84 @@ StScrollBar { background-color: #2777ff; } .word-suggestions { - font-size: 13pt; + font-size: 14pt; spacing: 12px; - min-height: 20pt; } + min-height: 20pt; + padding: 12px; + color: white; } + .word-suggestions StButton { + margin: 0 3px; + min-width: 32px; + border-radius: 6px; + padding: 6px 18px; + background-color: transparent; + background-image: none; } + .word-suggestions StButton:focus { + color: white; + background-color: #35415b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .word-suggestions StButton:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:hover { + color: white; + background-color: #5e5e5e; } + .word-suggestions StButton:active { + color: white; + background-color: #666666; } + .word-suggestions StButton:checked { + color: white; + background-color: #737373; } /* Looking Glass */ #LookingGlassDialog { background-color: #303340; + border-radius: 0 0 16px 16px; + border-top-width: 0; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + padding: 6px; spacing: 6px; - padding: 4px; - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 8px; - color: white; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } #LookingGlassDialog > #Toolbar { border: none; - border-radius: 8px; - background-color: #303340; } + padding: 6px; + border-radius: 0; + background-color: transparent; + spacing: 6px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button { + padding: 6px 12px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon { + icon-size: 1.09em; } #LookingGlassDialog .labels { spacing: 6px; } #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; - -minimum-hpadding: 6px; + -minimum-hpadding: 12px; font-weight: bold; + padding: 6px 12px; color: #d9d9d9; transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - border-bottom-width: 2px; } + box-shadow: none; + border: none; + border-radius: 6px; + background-color: transparent; } #LookingGlassDialog .notebook-tab:hover { - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.05); } #LookingGlassDialog .notebook-tab:selected { - border-bottom-width: 2px; - box-shadow: inset 0 -2px 0 0 #4187ff; - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.1); } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; - spacing: 6px; } + spacing: 6px; + padding: 6px; } #LookingGlassDialog StBoxLayout#ResultsArea { - spacing: 6px; } + spacing: 6px; + padding: 6px; } .lg-dialog StEntry { background-color: rgba(59, 63, 78, 0.6); @@ -1895,14 +2204,13 @@ StScrollBar { color: #5a97ff; } .lg-dialog .actor-link { - color: #ccc; } + color: #888a8d; } .lg-dialog .actor-link:hover { - color: white; } + color: #bcbdbf; } .lg-dialog .actor-link:active { - color: #999999; } + color: #565759; } .lg-completions-text { - font-size: .9em; font-style: italic; } .lg-obj-inspector-title { @@ -1916,20 +2224,35 @@ StScrollBar { border: 1px solid #ffffff; } #lookingGlassExtensions { - padding: 4px; } + padding: 6px; } .lg-extensions-list { - padding: 4px; + padding: 6px; spacing: 6px; } .lg-extension { - border: 1px solid #0d0d0d; - background-color: #3b3f4e; + padding: 12px; border-radius: 8px; - padding: 4px; } - -.lg-extension-name { - font-weight: bold; } + margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + color: #eeeeec; + background-color: #2d2f38; } + .lg-extension:focus { + color: #eeeeec; + background-color: #2c364c; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .lg-extension:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:hover { + color: #eeeeec; + background-color: #343640; } + .lg-extension:active { + color: #eeeeec; + background-color: #3b3d49; } .lg-extension-meta { spacing: 6px; } @@ -1940,6 +2263,19 @@ StScrollBar { border-radius: 8px; padding: 6px; } +.lg-debug-flag-button { + color: #eeeeec; } + .lg-debug-flag-button StLabel { + padding: 6px, 12px; } + .lg-debug-flag-button:hover { + color: white; } + .lg-debug-flag-button:active { + color: #bebeb6; } + +.lg-debug-flags-header { + padding-top: 12px; + padding: 6px; } + /* Login Dialog */ .login-dialog-banner-view { padding-top: 24px; @@ -1949,10 +2285,6 @@ StScrollBar { .unlock-dialog { border: none; background-color: transparent; } - .login-dialog StEntry, - .unlock-dialog StEntry { - background-color: #20232b; - color: #eeeeec; } .login-dialog .modal-dialog-button-box, .unlock-dialog .modal-dialog-button-box { spacing: 3px; } @@ -1975,56 +2307,33 @@ StScrollBar { border-color: #1c1e25; } .login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); border-color: #1c1e25; background-color: #1c1e25; color: rgba(255, 255, 255, 0.7); } .login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { - color: #ffffff; - background-color: #3681ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - border-color: #2777ff; } + background-color: #2777ff; + color: #ffffff; } + .login-dialog .modal-dialog-button:default:focus, + .unlock-dialog .modal-dialog-button:default:focus { + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { - color: #ffffff; background-color: #4187ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - background-color: #4187ff; - border-color: #4187ff; } + color: white; } .login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { - color: #ffffff; - background-color: #186eff; - border-color: #0058ee; - text-shadow: none; - icon-shadow: none; - box-shadow: none; - background-color: #0e67ff; - border-color: #0e67ff; } + background-color: #0361ff; + color: #ededed; } .login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #005af3; - background-color: #005af3; - color: rgba(255, 255, 255, 0.7); } + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: rgba(39, 119, 255, 0.5); + color: rgba(255, 255, 255, 0.5); } .login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button, @@ -2072,11 +2381,39 @@ StScrollBar { color: white; } .login-dialog-not-listed-label { - font-size: 9pt; font-weight: bold; color: #b3b3b3; padding-top: 1em; } +.login-dialog-auth-list-view { + -st-vfade-offset: 1em; } + +.login-dialog-auth-list { + spacing: 6px; + margin-left: 2em; } + +.login-dialog-auth-list-title { + margin-left: 2em; } + +.login-dialog-auth-list-item { + border-radius: 12px; + padding: 6px; + color: #b3b3b3; } + .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { + background-color: #2777ff; + color: #ffffff; } + +.login-dialog-auth-list-label { + font-size: 13pt; + font-weight: bold; + padding-left: 15px; } + .login-dialog-auth-list-label:ltr { + padding-left: 14px; + text-align: left; } + .login-dialog-auth-list-label:rtl { + padding-right: 14px; + text-align: right; } + .login-dialog-user-list-view { -st-vfade-offset: 1em; } @@ -2108,7 +2445,7 @@ StScrollBar { color: white; } .user-widget.horizontal .user-widget-label { - font-size: 12pt; + font-size: 13pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { @@ -2119,7 +2456,7 @@ StScrollBar { text-align: right; } .user-widget.vertical .user-widget-label { - font-size: 15pt; + font-size: 16pt; text-align: center; font-weight: normal; padding-top: 16px; } @@ -2139,9 +2476,27 @@ StScrollBar { .login-dialog-prompt-label { color: #cccccc; - font-size: 11pt; + font-size: 12pt; padding-top: 1em; } +.login-dialog StEntry { + background-color: #20232b; + color: #eeeeec; } + +.unlock-dialog StEntry { + border: none !important; } + .unlock-dialog StEntry:focus { + background-color: rgba(238, 238, 236, 0.1); } + .unlock-dialog StEntry:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } + +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { + border-color: transparent; + background-color: rgba(238, 238, 236, 0.1); } + /* Screen Shield */ .unlock-dialog-clock { color: white; @@ -2152,8 +2507,7 @@ StScrollBar { .unlock-dialog-clock-time { font-size: 64pt; - padding-top: 42px; - font-feature-settings: "tnum"; } + padding-top: 42px; } .unlock-dialog-clock-date { font-size: 16pt; @@ -2164,7 +2518,7 @@ StScrollBar { padding-top: 48px; } .unlock-dialog-notifications-container { - margin: 12px 0; + margin: 12px; spacing: 6px; width: 23em; background-color: transparent; } @@ -2173,29 +2527,28 @@ StScrollBar { padding-bottom: 0; } .unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { - padding: 12px 6px; + padding: 12px 16px; border: none; - background-color: rgba(48, 51, 64, 0.3); + background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 16px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { - background-color: rgba(48, 51, 64, 0.9); } + background-color: rgba(255, 255, 255, 0.2); } .unlock-dialog-notification-label { - padding: 0px 0px 0px 12px; } + padding: 0 0 0 12px; } .unlock-dialog-notification-count-text { - weight: bold; - padding: 0 6px; - color: #303340; - background-color: rgba(255, 255, 255, 0.3); - border-radius: 99px; - margin-right: 12px; } + font-weight: bold; + padding: 0 12px; + color: white; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 99px; } .screen-shield-background { background: black; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } #lockDialogGroup { background-color: #272a34; } @@ -2208,13 +2561,13 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); } /* OSD */ -.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { font-weight: bold; background-color: #23252e; color: #eeeeec; border: 1px solid #0d0e11; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { + .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher StIcon, .screenshot-ui-panel StIcon { color: #eeeeec; icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } @@ -2280,7 +2633,7 @@ StScrollBar { background-color: white; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } -.window-close { +.window-close, .screenshot-ui-close-button { background-image: url("assets/close-window.svg"); background-size: 32px; background-color: transparent; @@ -2289,10 +2642,10 @@ StScrollBar { height: 32px; width: 32px; transition-duration: .2s; } - .window-close:hover { + .window-close:hover, .screenshot-ui-close-button:hover { background-image: url("assets/close-window-hover.svg"); background-color: transparent; } - .window-close:active { + .window-close:active, .screenshot-ui-close-button:active { background-image: url("assets/close-window-active.svg"); background-color: transparent; color: transparent; @@ -2351,32 +2704,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .datemenu-today-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .datemenu-today-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .datemenu-today-button .date-label { font-size: 1.5em; font-weight: 300; } @@ -2386,32 +2737,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .calendar:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .calendar:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #3b3e46; } .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { @@ -2433,32 +2782,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .events-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .events-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .events-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } /* World clocks */ .world-clocks-button { @@ -2466,64 +2813,60 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .world-clocks-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .world-clocks-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .world-clocks-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } .weather-button { border-width: 1px; border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .weather-button:insensitive { + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .weather-button:focus { color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #2c364c; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #333d54; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #39435b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #eeeeec; - background-color: #2e313d; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + background-color: #343640; box-shadow: none; } .weather-button:active { color: #eeeeec; - background-color: #1c1e25; - border-color: #0b0b0e; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: #3b3d49; } /* Search */ .search-entry { @@ -2584,10 +2927,10 @@ StScrollBar { color: black; } /* App Folders */ -.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label { +.app-well-app.app-folder, .app-folder.grid-search-result, .app-well-app.app-folder .overview-icon.overview-icon-with-label, .app-folder.grid-search-result .overview-icon.overview-icon-with-label { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app.app-folder:checked { +.app-well-app.app-folder:checked, .app-folder.grid-search-result:checked { background: black; } .app-folder-dialog { diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index 7ef44986..1aa55ab1 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -19,28 +19,23 @@ */ /* Global Values */ stage { - font-size: 10pt; + font-size: 11pt; color: #5c616c; } /* Common Stylings */ -.search-statustext { - font-size: 2em; - font-weight: bold; - color: white; } - -.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { +.screenshot-ui-panel, .workspace-switcher, .switcher-list, .resize-popup, .osd-window { color: white; background-color: #303340; - border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; padding: 12px; } .workspace-thumbnails .workspace-thumbnail { color: white; background-color: rgba(255, 255, 255, 0.1); } -.app-well-app .overview-icon, -.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { - border-radius: 12px; +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box { + border-radius: 16px; padding: 6px; border: 2px solid transparent; transition-duration: 100ms; @@ -49,92 +44,171 @@ stage { .modal-dialog { color: #5c616c; background-color: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.6); } + border-radius: 11px; + border: 1px solid rgba(255, 255, 255, 0.8); } -.app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 8px; +#LookingGlassDialog > #Toolbar .lg-toolbar-button, .button { + border-radius: 6px; border-style: solid; border-width: 1px; - min-height: 22px; + font-weight: bold; padding: 3px 24px; color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #f7f7f8; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .button:checked { + color: #5c616c; + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .button:checked:hover { + background-color: white; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .button:checked:active { + background-color: white; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); padding: 12px; - border-style: solid; - border-width: 1px; - border-left-width: 0; - border-bottom-width: 0; } + font-weight: bold !important; + margin-right: 1px; + color: #5c616c; + background-color: #dadadb; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #c8d0df; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { + background-color: #cfd7e5; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { + background-color: #d6deec; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: #e2e2e3; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { - border-radius: 0 0 0 14px; } - .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { - border-right-width: 0; - border-radius: 0 0 14px 0; } + background-color: #eaeaea; } + .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { + color: #5c616c; + background-color: #f1f1f2; } + .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { + background-color: #f9f9f9; } + .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { + background-color: white; } + .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr { + border-radius: 0 0 0 10px; } + .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr { + border-radius: 0 0 10px 0; + margin-right: 0 !important; } + .modal-dialog .modal-dialog-linked-button:first-child:rtl, .hotplug-notification-item:first-child:rtl, .notification-banner .notification-button:first-child:rtl { + border-radius: 0 0 10px 0; } + .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl { + border-radius: 0 0 0 10px; + margin-right: 0 !important; } .modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { - border-radius: 0 0 14px 14px; } + border-radius: 0 0 10px 10px !important; + margin-right: 0 !important; } + +.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { + background-color: transparent; + background-color: none; } + .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { + color: #5c616c; + background-color: #313d55; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { + background-color: #37435d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { + background-color: #3d4965; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { + color: #5c616c; + background-color: #393d4b; } + .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { + color: #5c616c; + background-color: #3f4453; } + .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { + color: #5c616c; + background-color: #464b5c; } + .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover { + background-color: #4c5265; } + .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active { + background-color: #535a6e; } + +/* General Typography */ +.search-statustext { + font-weight: 300; + font-size: 24pt; } + +.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { + font-weight: 800; + font-size: 20pt; } + +.lg-debug-flags-header, .message-dialog-content .message-dialog-title, .message-list .message-list-placeholder, .datemenu-today-button .date-label { + font-weight: 800; + font-size: 15pt; } + +.nm-dialog-airplane-headline { + font-weight: 700; + font-size: 15pt; } + +.message-dialog-content .message-dialog-title.lightweight, .headline { + font-weight: 700; + font-size: 13pt; } + +.lg-extension-name, .osd-window, .nm-dialog-header, .dialog-list .dialog-list-title, .message-list-controls, .weather-button .weather-forecast-temp, .weather-button .weather-header, .world-clocks-button .world-clocks-time, .world-clocks-button .world-clocks-header, .events-button .events-title, .calendar .calendar-month-header .calendar-month-label, .datemenu-today-button .day-label, .popup-menu-ornament { + font-weight: 700; + font-size: 11pt; } + +.app-menu .popup-inactive-menu-item:first-child > StLabel { + font-weight: 700; + font-size: 9pt; } + +.login-dialog-not-listed-label, .lg-completions-text, .caps-lock-warning-label, #dash, .icon-label-button-container, .prompt-dialog-error-label, +.prompt-dialog-info-label, +.prompt-dialog-null-label, .run-dialog .run-dialog-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .events-button .event-time { + font-weight: 400; + font-size: 9pt; } + +.calendar .calendar-day-base.calendar-day-heading, .calendar .calendar-day-base { + font-weight: 400; + font-size: 8pt; } + +.unlock-dialog-clock-time, #panel, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .world-clocks-button .world-clocks-time, .events-button .event-time, .calendar .calendar-day-base { + font-feature-settings: "tnum"; } /* WIDGETS */ .shell-link { @@ -152,19 +226,24 @@ stage { StEntry { border-radius: 8px; padding: 8px; - border-width: 0; color: #5c616c; - background-color: #fafafa; - border-color: #d9d9d9; + background-color: white; + color: rgba(92, 97, 108, 0.7); + border: 2px solid white; selection-background-color: #2777ff; selected-color: #ffffff; } + StEntry:hover { + background-color: white; + border-color: white; + color: rgba(92, 97, 108, 0.7); } StEntry:focus { - border-color: #0051da; - box-shadow: inset 0 0 0 2px #2777ff; } + background-color: #f4f8ff; + border-color: #2777ff; + color: #5c616c; } StEntry:insensitive { - color: #aeb0b6; - border-color: #fdfdfd; - box-shadow: none; } + background-color: white; + border-color: white; + color: #aeb0b6; } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #fd7d00; @@ -177,17 +256,20 @@ StEntry { color: rgba(92, 97, 108, 0.7); } /* Buttons */ +.button { + min-height: 22px; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } .check-box StBin { width: 24px; - height: 22px; - background-image: url("assets/checkbox-off.svg"); } + height: 24px; + background-image: url("assets/checkbox-off-light.svg"); } .check-box:focus StBin { - background-image: url("assets/checkbox-off-focused.svg"); } + background-image: url("assets/checkbox-off-focused-light.svg"); } .check-box:checked StBin { background-image: url("assets/checkbox.svg"); } @@ -198,33 +280,27 @@ StEntry { /* Switches */ .toggle-switch { color: #5c616c; - height: 22px; - width: 46px; + height: 26px; + width: 48px; background-size: contain; - background-image: url("assets/toggle-off.svg"); } + background-image: url("assets/toggle-off-light.svg"); } .toggle-switch:checked { - background-image: url("assets/toggle-on.svg"); } + background-image: url("assets/toggle-on-light.svg"); } /* Slider */ .slider { - height: 15px; - -barlevel-height: 3px; - -barlevel-background-color: #d9d9d9; - -barlevel-border-width: 1px; - -barlevel-border-color: #d9d9d9; + -barlevel-height: 4px; + -barlevel-background-color: rgba(92, 97, 108, 0.4); + -barlevel-border-width: 2px; + -barlevel-border-color: transparent; -barlevel-active-background-color: #2777ff; - -barlevel-active-border-color: #136aff; + -barlevel-active-border-color: transparent; -barlevel-overdrive-color: #d41919; - -barlevel-overdrive-border-color: #c21717; + -barlevel-overdrive-border-color: transparent; -barlevel-overdrive-separator-width: 1px; - -slider-handle-radius: 7.5px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: #d9d9d9; - color: white; } - .slider:hover { - color: #f7f7f7; } - .slider:active { - color: #ededed; } + -slider-handle-radius: 8px; + -slider-handle-border-width: 0; + -slider-handle-border-color: transparent; } /* Scrollbars */ StScrollView.vfade { @@ -236,530 +312,490 @@ StScrollView.hfade { StScrollBar { padding: 0; } StScrollView StScrollBar { - min-width: 14px; - min-height: 14px; } + 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: #9da0a7; - margin: 3px; } + background-color: #ced0d3; + border: 3px solid transparent; + transition: 500ms all ease; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #7d8189; } + background-color: #aeb0b6; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: #2777ff; } + background-color: #bec0c4; } /* Popovers/Menus */ .popup-menu-boxpointer, .candidate-popup-boxpointer { - -arrow-border-radius: 12px; - -arrow-background-color: #ffffff; - -arrow-border-width: 1px; - -arrow-border-color: #d9d9d9; - -arrow-base: 24px; - -arrow-rise: 12px; - -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } + margin: 4px; } .popup-menu { min-width: 15em; color: #5c616c; } .popup-menu.panel-menu { - -boxpointer-gap: 4px; + -boxpointer-gap: 6px; margin-bottom: 1.75em; } -.popup-menu-content { - padding: 16px 0; } +.popup-menu-content, .candidate-popup-content { + padding: 6px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + background-color: #ffffff; } .popup-menu-item { - spacing: 6px; - padding: 6px; } - .popup-menu-item:ltr { - padding-right: 1.75em; - padding-left: 0; } - .popup-menu-item:rtl { - padding-right: 0; - padding-left: 1.75em; } + padding: 9px 12px; + border-radius: 8px; + transition: 0.2s all ease; + background-color: transparent; } + .popup-menu-item:focus, .popup-menu-item:hover { + background-color: #f7f7f7 !important; } + .popup-menu-item:focus:active, .popup-menu-item:hover:active { + background-color: #f2f2f2 !important; } .popup-menu-item:checked { - background-color: white; - box-shadow: none; } - .popup-menu-item.selected { - background-color: rgba(255, 255, 255, 0.8); - color: #5c616c; } + background-color: #ededed !important; } + .popup-menu-item:checked { + margin-bottom: 0; + box-shadow: inset 0 -1px 0 0 #e0e0e0; + border-radius: 8px 8px 0 0; } + .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { + background-color: whitesmoke !important; } + .popup-menu-item:checked:active { + background-color: #fafafa !important; } .popup-menu-item:active { - background-color: #2777ff; - color: #ffffff; } + background-color: white; + color: #50555e; } .popup-menu-item:insensitive { color: rgba(92, 97, 108, 0.5); } .popup-inactive-menu-item { color: #5c616c; } .popup-inactive-menu-item:insensitive { - color: rgba(92, 97, 108, 0.5); } + color: #aeb0b6; } .popup-menu-arrow, .popup-menu-icon { - icon-size: 1.09em; } + icon-size: 16px !important; } + +.popup-menu-arrow:ltr { + margin-right: 4px; } + +.popup-menu-arrow:rtl { + margin-left: 4px; } .popup-sub-menu { - background-color: #f7f7f7; - box-shadow: none; - border-top: 1px solid rgba(217, 217, 217, 0.8); - border-bottom: 1px solid rgba(217, 217, 217, 0.8); } + background-color: #ededed; + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-ornament { + min-width: 1.09em !important; } + .popup-sub-menu .popup-menu-item { + border-radius: 0; + margin: 0; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } + .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { + background-color: white !important; } + .popup-sub-menu .popup-menu-item:checked { + background-color: white !important; } + .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { + background-color: white !important; } + .popup-sub-menu .popup-menu-item:active { + background-color: white !important; } + .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus { + border-radius: 0; } + .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child { + border-radius: 0 0 8px 8px; } .popup-menu-ornament { - width: 1.2em; } + width: 1.2em; + text-align: center !important; } .popup-menu-ornament:ltr { text-align: right; } .popup-menu-ornament:rtl { text-align: left; } .popup-separator-menu-item { - padding: 0; } + padding: 0; + margin: 6px 0; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; - margin: 6px 64px; - background-color: #dedede; } + background-color: #d9d9d9; } + .popup-separator-menu-item .popup-menu-ornament { + width: 0 !important; } + .popup-sub-menu .popup-separator-menu-item { + padding: 0; + margin-right: 2.5em !important; + background-color: transparent; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - margin: 0 64px 0 32px; } + background-color: #ebebeb; } .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } .aggregate-menu { - min-width: 21em; } + min-width: 22em; } + .aggregate-menu .popup-menu-ornament { + width: 0 !important; } .aggregate-menu .popup-menu-icon { - padding: 0; - margin: 0 4px; -st-icon-style: symbolic; } + .aggregate-menu .popup-menu-icon:ltr { + margin-right: 8px; } + .aggregate-menu .popup-menu-icon:rtl { + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - padding-left: 14px; - margin-left: 1.09em; } + margin-left: 8px; } .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - padding-right: 14px; - margin-right: 1.09em; } + margin-right: 8px; } + +.app-menu { + max-width: 27.25em; } + .app-menu .popup-menu-content, .app-menu .candidate-popup-content { + margin: 4px; } + .app-menu.panel-menu .popup-menu-content, .app-menu.panel-menu .candidate-popup-content { + margin: 0; } + .app-menu .popup-menu-ornament { + width: 0 !important; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr { + margin-right: 8px; } + .app-menu .popup-inactive-menu-item:first-child > StLabel:rtl { + margin-left: 8px; } /* Date/Time Menu */ -.clock-display-box { - spacing: 2px; } - .clock-display-box .clock { - padding-left: 12px; - padding-right: 12px; } - #calendarArea { - padding: 0; } + padding: 4px; } .datemenu-calendar-column { - spacing: 6px; - border: 0 solid #d9d9d9; - padding: 0 12px; } + spacing: 6px; } .datemenu-calendar-column:ltr { - margin-right: 8px; - border-left-width: 1px; } + padding-left: 6px; } .datemenu-calendar-column:rtl { - margin-left: 8px; - border-right-width: 1px; } + padding-right: 6px; } .datemenu-calendar-column .datemenu-displays-box { spacing: 6px; } -.events-section-title { - border-width: 1px; - border-style: solid; - border-radius: 10px; - margin: 4px; - border-color: transparent; - background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; - color: black; - font-weight: bold; - padding: .4em; } - .events-section-title:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .events-section-title:hover { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .events-section-title:active { - color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - /* today button (the date) */ .datemenu-today-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - border-color: transparent; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; + background-color: none; + box-shadow: none !important; padding: 9px; } + .datemenu-today-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .datemenu-today-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .datemenu-today-button .day-label { - font-size: 11pt; - font-weight: bold; } - .datemenu-today-button .date-label { - font-size: 17pt; - font-weight: 1000; } + background-color: white; } /* Calendar */ .calendar { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - padding: 6px; } + background-color: transparent; + background-color: none; + box-shadow: none !important; + margin-top: 0; } + .calendar:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .calendar:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .calendar .calendar-month-label { - color: #686d7a; - font-weight: bold; - padding: 8px 0; } - .calendar .calendar-change-month-back StIcon, - .calendar .calendar-change-month-forward StIcon { + background-color: white; } + .calendar .calendar-month-header .calendar-change-month-back StIcon, + .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } - .calendar .pager-button { + .calendar .calendar-month-header .calendar-month-label { + color: #686d7a; + padding: 8px 0; } + .calendar .calendar-month-header .pager-button { background-color: transparent; height: 32px; width: 32px; - border-radius: 8px; } - .calendar .pager-button:hover, .calendar .pager-button:focus { - background-color: white; } - .calendar .pager-button:active { - background-color: #ededed; } - .calendar .calendar-day-base { - font-size: 7pt; - text-align: center; - width: 32px; - height: 32px; - padding: 0; margin: 2px; - border-radius: 18px; - border: 1px solid transparent; - font-feature-settings: "tnum"; } - .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { + border-radius: 6px; } + .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { background-color: #f7f7f7; } - .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { - color: #737a88; + .calendar .calendar-month-header .pager-button:active { background-color: #f2f2f2; } + .calendar .calendar-day-base { + text-align: center; + margin: 2px; + padding: 0 !important; + height: 32px !important; + width: 32px !important; + border-radius: 99px; } + .calendar .calendar-day-base:hover { + background-color: #f7f7f7; } + .calendar .calendar-day-base:focus { + background-color: #d4e4ff; + color: #ffffff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { + color: #50555e; + background-color: #f2f2f2; } + .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus { + background-color: #cadaf5; } .calendar .calendar-day-base.calendar-day-heading { - color: #737a88; - margin-top: 1em; - font-size: 6pt; } - .calendar .calendar-day { - border-width: 0; } - .calendar .calendar-day-top { - border-top-width: 1px; } - .calendar .calendar-day-left { - border-left-width: 1px; } + color: #aeb0b6; + padding-top: 6px; + height: 16px !important; + font-weight: bold; } .calendar .calendar-nonwork-day { color: #aeb0b6; } - .calendar .calendar-today { - font-weight: bold; - border: 1px solid transparent; - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:hover, .calendar .calendar-today:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-today:active, .calendar .calendar-today:selected { - background-color: #2777ff; - color: #ffffff; } - .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { - background-color: #3681ff; - color: #ffffff; } - .calendar .calendar-day-with-events { - background-image: url("assets/calendar-today.svg"); } - .calendar .calendar-day-with-events.calendar-work-day { - color: #737a88; - font-weight: bold; } .calendar .calendar-other-month-day { color: rgba(92, 97, 108, 0.5); } + .calendar .calendar-other-month-day.calendar-nonwork-day { + color: rgba(174, 176, 182, 0.5); } + .calendar .calendar-today { + background-color: #2777ff; + font-weight: 800; + color: #ffffff !important; } + .calendar .calendar-today:hover, .calendar .calendar-today:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-today:active, .calendar .calendar-today:selected { + background-color: #2777ff; + color: inherit; } + .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { + background-color: #3681ff; + color: inherit; } + .calendar .calendar-day-with-events { + background-image: url("assets/calendar-today-light.svg"); + background-size: contain; } .calendar .calendar-week-number { - font-size: 6pt; + font-size: 7pt; font-weight: bold; - height: 1.8em; - width: 2.3em; - border-radius: 2px; + font-feature-settings: "tnum"; margin: 6px; + padding: 0 6px; + border-radius: 3px; background-color: #fafafa; - color: #686d7a; } + color: #aeb0b6; } /* Events */ .events-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: #5c616c; + background-color: #f7f7f8; padding: 12px; } .events-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .events-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .events-button .events-box { spacing: 6px; } .events-button .events-list { spacing: 12px; } .events-button .events-title { - color: black; - font-weight: bold; + color: #aeb0b6; margin-bottom: 4px; } .events-button .event-time { - color: #2d3035; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #aeb0b6; } /* World clocks */ .world-clocks-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: #5c616c; + background-color: #f7f7f8; padding: 12px; } .world-clocks-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .world-clocks-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } .world-clocks-button .world-clocks-header { - color: black; - font-weight: bold; } + color: #aeb0b6; } .world-clocks-button .world-clocks-city { - color: #5c616c; - font-size: 10pt; - font-weight: normal; } + color: #5c616c; } .world-clocks-button .world-clocks-time { - font-weight: bold; - color: #5c616c; - font-feature-settings: "tnum"; - font-size: 10pt; } + color: #5c616c; } .world-clocks-button .world-clocks-time:ltr { text-align: right; } .world-clocks-button .world-clocks-time:rtl { text-align: left; } .world-clocks-button .world-clocks-timezone { - color: #2d3035; - font-feature-settings: "tnum"; - font-size: 9pt; } + color: #aeb0b6; } /* Weather */ .weather-button { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: #5c616c; + background-color: #f7f7f8; padding: 12px; } .weather-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .weather-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { spacing: 6px; } .weather-button .weather-header { - color: black; - font-weight: bold; } + color: #aeb0b6; } .weather-button .weather-header.location { - font-weight: normal; - font-size: 9pt; } + font-weight: normal; } .weather-button .weather-grid { spacing-rows: 6px; spacing-columns: 12px; } .weather-button .weather-forecast-time { color: #161719; - font-feature-settings: "tnum"; - font-size: 8pt; - font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-icon { icon-size: 2.18em; } - .weather-button .weather-forecast-temp { - font-weight: bold; } /* Message List */ .message-list { - width: 31.5em; - padding: 0 12px; } + width: 32em; + border: solid #d9d9d9; } + .message-list:ltr { + margin-left: 0; + margin-right: 4px; + padding-right: 6px; + border-right-width: 1px; } + .message-list:rtl { + margin-right: 0; + margin-left: 4px; + padding-left: 6px; + border-left-width: 1px; } .message-list .message-list-placeholder { - spacing: 12px; } + color: rgba(174, 176, 182, 0.5); } + .message-list .message-list-placeholder > StIcon { + icon-size: 3.27em; + margin-bottom: 12px; + -st-icon-style: symbolic; } .message-list-sections { spacing: 6px; - margin: 0 16px; } + margin: 0; + padding-bottom: 6px; } + .message-list-sections:ltr { + margin-right: 12px; } + .message-list-sections:rtl { + margin-left: 12px; } .message-list-section, .message-list-section-list { spacing: 6px; } .message-list-controls { - margin: 8px 16px 0; - padding: 4px; - spacing: 12px; } + padding: 6px; + spacing: 6px; } .message-list-controls .dnd-button { border-width: 2px; border-color: transparent; - border-radius: 99px; + border-radius: 32px; border-style: solid; } .message-list-controls .dnd-button:focus { border-color: rgba(39, 119, 255, 0.6); } .message { - border-width: 1px; - border-style: solid; - border-radius: 10px; + border-radius: 8px; margin: 4px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + color: #5c616c; + background-color: #f7f7f8; } .message:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .message:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .message:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .message:hover { color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + background-color: white; } .message:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .message .message-icon-bin { - padding: 18px 0 18px 12px; } + padding: 18px; + padding-right: 6px; } .message .message-icon-bin:rtl { - padding: 18px 12px 18px 0; } + padding-right: 6px; } .message .message-icon-bin > StIcon { icon-size: 2.18em; -st-icon-style: symbolic; } @@ -767,15 +803,18 @@ StScrollBar { width: 1.09em; height: 1.09em; } .message .message-content { - padding: 14px; - spacing: 4px; } + spacing: 4px; + padding: 9px; + margin-bottom: 8px; } .message .message-title { - font-weight: bold; } + font-weight: bold; + /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ + padding-top: 0.57em; } .message .message-secondary-bin { padding: 0 8px; } .message .message-secondary-bin > .event-time { color: rgba(92, 97, 108, 0.5); - font-size: 8pt; + font-size: 9pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { @@ -783,11 +822,15 @@ StScrollBar { .message .message-secondary-bin > .event-time:rtl { text-align: left; } .message .message-close-button { - color: #818794; } + color: #5c616c; + background-color: rgba(92, 97, 108, 0.1); + border-radius: 99px; + padding: 5px; + margin: 1px; } .message .message-close-button:hover { - color: #aaaeb7; } + background-color: rgba(92, 97, 108, 0.2); } .message .message-close-button:active { - color: #c6c8ce; } + background-color: rgba(92, 97, 108, 0.1); } .message .message-body { color: #454850; } @@ -796,75 +839,87 @@ StScrollBar { /* Media Controls */ .message-media-control { - padding: 12px 1.64em; - color: #393c43; } + padding: 0 18px; + margin: 12px 0; + border-radius: 8px; + color: #5c616c; } .message-media-control:hover { background-color: white; color: #5c616c; } .message-media-control:active { - background-color: #f2f2f2; + background-color: white; color: #5c616c; } .message-media-control:insensitive { - color: black; } + color: #bbbdc2; } .message-media-control:last-child:ltr { - border-radius: 0 10px 10px 0; } + margin-right: 12px; } .message-media-control:last-child:rtl { - border-radius: 10px 0 0 10px; } + margin-left: 12px; } .media-message-cover-icon { - icon-size: 2.18em !important; + icon-size: 3.27em !important; border-radius: 8px; } .media-message-cover-icon.fallback { color: #34373d; background-color: #ffffff; border: 1px solid transparent; border-radius: 8px; - icon-size: 2.18em !important; } + icon-size: 2.18em !important; + padding: 14px; } .candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; } + padding: 6px; + spacing: 6px; } .candidate-index { - padding: 0 0.5em 0 0; - color: #454850; } + padding: 0; + padding-right: 6px; + color: #aeb0b6; } .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; + padding: 6px 12px 6px 12px; border-radius: 8px; } - .candidate-box:selected, .candidate-box:hover { + .candidate-box:selected { background-color: #2777ff; color: #ffffff; } + .candidate-box:hover { + background-color: #f7f7f7; + color: #50555e; } .candidate-page-button-box { height: 2em; } .vertical .candidate-page-button-box { - padding-top: 0.5em; } + padding-top: 12px; } .horizontal .candidate-page-button-box { - padding-left: 0.5em; } + padding-left: 12px; } .candidate-page-button { - padding: 4px; } + padding: 6px; } .candidate-page-button-previous { border-radius: 8px 0px 0px 8px; - border-right-width: 0; } + border-right-width: 0; + box-shadow: none; } .candidate-page-button-next { - border-radius: 0px 8px 8px 0px; } + border-radius: 0px 8px 8px 0px; + box-shadow: none; } .candidate-page-button-icon { - icon-size: 1em; } + icon-size: 1.09em; } /* Notifications & Message Tray */ .notification-banner { min-height: 64px; - width: 34em; } + width: 34em; + box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1); + border-radius: 12px; + margin: 4px; } .notification-banner .notification-actions { spacing: 0; } .summary-source-counter { - font-size: 9pt; + font-size: 10pt; font-weight: bold; height: 1.6em; width: 1.6em; @@ -903,7 +958,7 @@ StScrollBar { .chat-meta-message { padding-left: 4px; - font-size: 8pt; + font-size: 9pt; font-weight: bold; color: #898f9b; } .chat-meta-message:rtl { @@ -915,15 +970,10 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.headline { - font-size: 11pt; } - -.modal-dialog { - border-radius: 16px; } - .modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -936,12 +986,7 @@ StScrollBar { .message-dialog-content { spacing: 18px; } .message-dialog-content .message-dialog-title { - text-align: center; - font-size: 18pt; - font-weight: 800; } - .message-dialog-content .message-dialog-title.lightweight { - font-size: 13pt; - font-weight: 800; } + text-align: center; } .message-dialog-content .message-dialog-description { text-align: center; } @@ -949,8 +994,7 @@ StScrollBar { .dialog-list { spacing: 18px; } .dialog-list .dialog-list-title { - text-align: center; - font-weight: bold; } + text-align: center; } .dialog-list .dialog-list-scrollview { max-height: 200px; } .dialog-list .dialog-list-box { @@ -960,8 +1004,7 @@ StScrollBar { .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { - color: #50555e; - font-size: 9pt; } + color: #50555e; } /* Run Dialog */ .run-dialog .modal-dialog-content-box { @@ -972,7 +1015,6 @@ StScrollBar { width: 20em; } .run-dialog .run-dialog-description { - font-size: 9pt; text-align: center; color: #2d3035; } @@ -1001,8 +1043,7 @@ StScrollBar { .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { - text-align: center; - font-size: 9pt; } + text-align: center; } .prompt-dialog-error-label { color: #fd7d00; } @@ -1023,8 +1064,7 @@ StScrollBar { spacing: 20px; } .audio-selection-device { - border: 1px solid #d9d9d9; - border-radius: 12px; } + border-radius: 16px; } .audio-selection-device:hover, .audio-selection-device:focus { background-color: #f7f7f7; } .audio-selection-device:active { @@ -1046,7 +1086,7 @@ StScrollBar { height: 300px; width: 300px; } -/* Network Dialogs */ +/* Select Network dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; @@ -1056,18 +1096,8 @@ StScrollBar { spacing: 20px; padding: 24px; } -.nm-dialog-airplane-box { - spacing: 12px; } - -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; } - -.nm-dialog-airplane-text { - color: #5c616c; } - -.nm-dialog-header { - font-weight: bold; } +.nm-dialog-subheader { + color: #aeb0b6; } .nm-dialog-header-icon { icon-size: 2.18em; } @@ -1076,18 +1106,18 @@ StScrollBar { spacing: 10px; } .nm-dialog-scroll-view { - border: 1px solid #d9d9d9; - padding: 0; - background-color: #f7f7f7; } + padding: 6px; + border-radius: 8px; + background-color: #fafafa; } .nm-dialog-item { - font-size: 10pt; - border-bottom: 1px solid #d9d9d9; - padding: 12px; - spacing: 0px; } + padding: 12px; } .nm-dialog-item:selected { background-color: #2777ff; + border-radius: 5px; color: #ffffff; } + .nm-dialog-item:hover { + background-color: #f7f7f7; } .nm-dialog-icon { icon-size: 1.09em; } @@ -1095,31 +1125,51 @@ StScrollBar { .nm-dialog-icons { spacing: 12px; } +.no-networks-box { + spacing: 6px; } + .no-networks-label { color: #aeb0b6; } -.no-networks-box { - spacing: 6px; } +.nm-dialog-airplane-box { + text-align: center; + spacing: 12px; } + +.nm-dialog-airplane-text { + color: #aeb0b6; } /* OSD */ .osd-window { text-align: center; font-weight: bold; spacing: 12px; - margin: 32px; - min-width: 64px; - min-height: 64px; } + padding: 12px 18px; + margin-bottom: 4em; } + .osd-window > * { + spacing: 8px; } .osd-window StIcon { - icon-size: 6.54em; } + icon-size: 2.18em; } .osd-window .osd-monitor-label { font-size: 3em; } + .osd-window StLabel:ltr { + margin-right: 6px; } + .osd-window StLabel:rtl { + margin-left: 6px; } .osd-window .level { - height: 8px; - -barlevel-height: 8px; + margin-bottom: 4px; + height: 6px; + min-width: 10.9em; + -barlevel-height: 6px; -barlevel-background-color: rgba(255, 255, 255, 0.3); -barlevel-active-background-color: white; -barlevel-overdrive-color: #d41919; -barlevel-overdrive-separator-width: 3px; } + .osd-window .level:first-child { + margin-bottom: 0px; } + .osd-window .level:ltr { + margin-right: 6px; } + .osd-window .level:rtl { + margin-left: 6px; } /* Pad OSD */ .pad-osd-window { @@ -1135,38 +1185,52 @@ StScrollBar { /* App Switcher */ .switcher-popup { - padding: 8px; + padding: 0; spacing: 24px; } -.switcher-list .item-box { - padding: 8px; - border-radius: 9px; - border: 1px solid transparent; } - .switcher-list .item-box:outlined { - background-color: rgba(255, 255, 255, 0.3); } - .switcher-list .item-box:selected { - background-color: rgba(255, 255, 255, 0.3); - color: white; } - -.switcher-list .thumbnail-box { - padding: 2px; - spacing: 6px; } - -.switcher-list .thumbnail { - width: 256px; } - -.switcher-list .separator { - width: 1px; - background: #d9d9d9; } - -.switcher-list .switcher-list-item-container { - spacing: 12px; } +.switcher-list { + padding: 10px; + border-radius: 24px; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } + .switcher-list .switcher-list-item-container { + spacing: 12px; } + .switcher-list .item-box { + background-color: transparent; } + .switcher-list .item-box:hover { + background-color: rgba(255, 255, 255, 0.1); } + .switcher-list .item-box:selected, .switcher-list .item-box:focus { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:selected:hover, .switcher-list .item-box:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:selected:active, .switcher-list .item-box:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .switcher-list .item-box:active { + background-color: rgba(255, 255, 255, 0.16); } + .switcher-list .item-box:outlined, .switcher-list .item-box:checked { + background-color: rgba(255, 255, 255, 0.19); } + .switcher-list .item-box:outlined:active, .switcher-list .item-box:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .switcher-list .item-box:outlined:hover, .switcher-list .item-box:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .switcher-list .item-box:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } + .switcher-list .separator { + width: 1px; + background: #d9d9d9; } + .switcher-list .thumbnail-box { + padding: 2px; + spacing: 6px; } + .switcher-list .thumbnail { + width: 256px; + border-radius: 8px; } .switcher-arrow { - border-color: rgba(0, 0, 0, 0); - color: rgba(92, 97, 108, 0.8); } + border-color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, 0.8); } .switcher-arrow:highlighted { - color: #5c616c; } + border-color: white; + color: white; } .input-source-switcher-symbol { font-size: 34pt; @@ -1177,54 +1241,173 @@ StScrollBar { border: 5px solid #2777ff; } /* Workspace Switcher */ -.workspace-switcher-group { - padding: 12px; } - .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; - padding: 0; + margin-bottom: 4em; + spacing: 12px; + padding: 12px 18px; } + +.ws-switcher-indicator { + background-color: rgba(255, 255, 255, 0.5); + padding: 0.1816666667em; + margin: 0.9083333333em; + border-radius: 2.18em; } + .ws-switcher-indicator:active { + background-color: white; + padding: 0.3633333333em; + margin: 0.7266666667em; } + +.icon-label-button-container { + spacing: 6px; } + .icon-label-button-container StIcon { + icon-size: 32px; } + +.screenshot-ui-panel { + border-radius: 37px; + padding: 18px; + padding-bottom: 12px; + margin-bottom: 4em; spacing: 12px; } -.ws-switcher-box { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 11px; } +.screenshot-ui-close-button { + padding: 6px; } + .screenshot-ui-close-button.left { + margin-left: 8px; } + .screenshot-ui-close-button.right { + margin-right: 8px; } -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { - height: 52px; - background-color: #2777ff; - border: 1px solid #005efd; - border-radius: 11px; - color: #ffffff; } +.screenshot-ui-type-button { + padding: 12px 18px !important; + border-radius: 19px; } + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: 99px; + border: 4px white; + padding: 4px; } + .screenshot-ui-capture-button .screenshot-ui-capture-button-circle { + background-color: white; + transition-duration: 200ms; + 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: #f7f7f7; } + .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { + background-color: #d9d9d9; } + .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle { + background-color: gray; } + .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { + background-color: #bf1717; } + .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { + background-color: #7b0f0f; } + .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { + background-color: #360707; } + +.screenshot-ui-shot-cast-container { + background-color: #f7f7f7; + border-radius: 16px; + padding: 3px; + spacing: 3px; } + .screenshot-ui-shot-cast-container:ltr { + margin-left: 3px; } + .screenshot-ui-shot-cast-container:rtl { + margin-right: 3px; } + +.screenshot-ui-shot-cast-button { + padding: 6px 12px; + background-color: transparent; + border-radius: 13px; } + .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus { + background-color: white; } + .screenshot-ui-shot-cast-button:active { + background-color: white; } + .screenshot-ui-shot-cast-button:checked { + background-color: white; + color: black; } + .screenshot-ui-shot-cast-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-show-pointer-button { + border-radius: 99px; + padding: 12px !important; } + .screenshot-ui-show-pointer-button StIcon { + icon-size: 1.09em; } + +.screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.3); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade { + background-color: rgba(0, 0, 0, 0.5); } + +.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection { + border: 2px white; } + +.screenshot-ui-area-selector-handle { + border-radius: 99px; + background-color: white; + box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2); + width: 24px; + height: 24px; } + +.screenshot-ui-window-selector { + background-color: #272a34; } + .screenshot-ui-window-selector .screenshot-ui-window-selector-window-container { + margin: 100px; } + .screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container { + margin-bottom: 200px; } + +.screenshot-ui-window-selector-window-border { + transition-duration: 200ms; + border-radius: 16px; + border: 6px transparent; } + +.screenshot-ui-window-selector-check { + transition-duration: 200ms; + color: transparent; + border-radius: 99px; + border-width: 12px; + icon-size: 24px; } + +.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { + border-color: #0051da; } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { + border-color: #2777ff; + background-color: rgba(39, 119, 255, 0.2); } + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { + color: white; + background-color: #2777ff; } + +.screenshot-ui-screen-selector { + transition-duration: 200ms; + 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; + border: 2px white; } + +.screenshot-ui-tooltip { + color: white; + background-color: #303340; + border-radius: 99px; + padding: 6px 12px; + text-align: center; + -y-offset: 24px; } /* Top Bar */ #panel { background-color: #000; font-weight: bold; height: 2.2em; - font-feature-settings: "tnum"; transition-duration: 250ms; } #panel.unlock-screen, #panel.login-screen, #panel:overview { background-color: transparent; } - #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { - -panel-corner-opacity: 0; } - #panel .panel-corner { - -panel-corner-radius: 9px; - -panel-corner-background-color: #000; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - -panel-corner-opacity: 1; - transition-duration: 250ms; } #panel .panel-button { font-weight: bold; - color: #ddd; + color: white; -natural-hpadding: 12px; -minimum-hpadding: 6px; transition-duration: 150ms; @@ -1234,12 +1417,36 @@ StScrollBar { transition-duration: 150ms; border: 3px solid transparent; border-radius: 99px; } - #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { + #panel .panel-button.screen-recording-indicator { + box-shadow: inset 0 0 0 100px #bf1717; } + #panel .panel-button.screen-recording-indicator StBoxLayout { + spacing: 6px; } + #panel .panel-button.screen-recording-indicator StIcon { + icon-size: 1.09em; } + #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } - #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { + #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display { box-shadow: none; } - #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { + #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel .panel-button:active.screen-recording-indicator, #panel .panel-button:overview.screen-recording-indicator, #panel .panel-button:focus.screen-recording-indicator, #panel .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel .panel-button:hover.clock-display { + box-shadow: none; } + #panel .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel .panel-button:active:hover, #panel .panel-button:overview:hover, #panel .panel-button:focus:hover, #panel .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25); } + #panel .panel-button:active:hover.clock-display, #panel .panel-button:overview:hover.clock-display, #panel .panel-button:focus:hover.clock-display, #panel .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel .panel-button:active:hover.clock-display .clock, #panel .panel-button:overview:hover.clock-display .clock, #panel .panel-button:focus:hover.clock-display .clock, #panel .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25); } + #panel .panel-button:active:hover.screen-recording-indicator, #panel .panel-button:overview:hover.screen-recording-indicator, #panel .panel-button:focus:hover.screen-recording-indicator, #panel .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; @@ -1251,12 +1458,30 @@ StScrollBar { -st-icon-style: symbolic; } #panel .panel-button#panelActivities { -natural-hpadding: 18px; } - #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { + #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } - #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { + #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display { box-shadow: none; } - #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { + #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } + #panel.unlock-screen .panel-button:active.screen-recording-indicator, #panel.unlock-screen .panel-button:overview.screen-recording-indicator, #panel.unlock-screen .panel-button:focus.screen-recording-indicator, #panel.unlock-screen .panel-button:checked.screen-recording-indicator, #panel.login-screen .panel-button:active.screen-recording-indicator, #panel.login-screen .panel-button:overview.screen-recording-indicator, #panel.login-screen .panel-button:focus.screen-recording-indicator, #panel.login-screen .panel-button:checked.screen-recording-indicator, #panel:overview .panel-button:active.screen-recording-indicator, #panel:overview .panel-button:overview.screen-recording-indicator, #panel:overview .panel-button:focus.screen-recording-indicator, #panel:overview .panel-button:checked.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); } + #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel:overview .panel-button:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); } + #panel.unlock-screen .panel-button:hover.screen-recording-indicator, #panel.login-screen .panel-button:hover.screen-recording-indicator, #panel:overview .panel-button:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); } + #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked:hover, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked:hover { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.clock-display, #panel.unlock-screen .panel-button:overview:hover.clock-display, #panel.unlock-screen .panel-button:focus:hover.clock-display, #panel.unlock-screen .panel-button:checked:hover.clock-display, #panel.login-screen .panel-button:active:hover.clock-display, #panel.login-screen .panel-button:overview:hover.clock-display, #panel.login-screen .panel-button:focus:hover.clock-display, #panel.login-screen .panel-button:checked:hover.clock-display, #panel:overview .panel-button:active:hover.clock-display, #panel:overview .panel-button:overview:hover.clock-display, #panel:overview .panel-button:focus:hover.clock-display, #panel:overview .panel-button:checked:hover.clock-display { + box-shadow: none; } + #panel.unlock-screen .panel-button:active:hover.clock-display .clock, #panel.unlock-screen .panel-button:overview:hover.clock-display .clock, #panel.unlock-screen .panel-button:focus:hover.clock-display .clock, #panel.unlock-screen .panel-button:checked:hover.clock-display .clock, #panel.login-screen .panel-button:active:hover.clock-display .clock, #panel.login-screen .panel-button:overview:hover.clock-display .clock, #panel.login-screen .panel-button:focus:hover.clock-display .clock, #panel.login-screen .panel-button:checked:hover.clock-display .clock, #panel:overview .panel-button:active:hover.clock-display .clock, #panel:overview .panel-button:overview:hover.clock-display .clock, #panel:overview .panel-button:focus:hover.clock-display .clock, #panel:overview .panel-button:checked:hover.clock-display .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); } + #panel.unlock-screen .panel-button:active:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:overview:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:focus:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:checked:hover.screen-recording-indicator, #panel.login-screen .panel-button:active:hover.screen-recording-indicator, #panel.login-screen .panel-button:overview:hover.screen-recording-indicator, #panel.login-screen .panel-button:focus:hover.screen-recording-indicator, #panel.login-screen .panel-button:checked:hover.screen-recording-indicator, #panel:overview .panel-button:active:hover.screen-recording-indicator, #panel:overview .panel-button:overview:hover.screen-recording-indicator, #panel:overview .panel-button:focus:hover.screen-recording-indicator, #panel:overview .panel-button:checked:hover.screen-recording-indicator { + box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } @@ -1275,6 +1500,12 @@ StScrollBar { padding: 0 6px; spacing: 6px; } +.clock-display-box { + spacing: 2px; } + .clock-display-box .clock { + padding-left: 12px; + padding-right: 12px; } + /* Activities Ripple */ .ripple-box { background-color: rgba(243, 247, 255, 0.3); @@ -1305,22 +1536,21 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; } -.window-close { - background-color: #303340; +.window-close, .screenshot-ui-close-button { + background-color: rgba(41, 44, 55, 0.95); color: white; border-radius: 21px; padding: 3px; height: 30px; width: 30px; - box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); transition-duration: 300ms; } - .window-close StIcon { + .window-close StIcon, .screenshot-ui-close-button StIcon { icon-size: 24px; } - .window-close:hover { - background-color: #51576b; } - .window-close:active { + .window-close:hover, .screenshot-ui-close-button:hover { + background-color: rgba(76, 79, 88, 0.9575); } + .window-close:active, .screenshot-ui-close-button:active { color: rgba(255, 255, 255, 0.8); - background-color: #252831; } + background-color: rgba(30, 33, 40, 0.95); } .workspace-background { border-radius: 30px; @@ -1328,30 +1558,35 @@ StScrollBar { .search-entry { - width: 320px; - padding: 7px 9px; border-radius: 18px; - color: rgba(92, 97, 108, 0.7); - background-color: #ffffff; margin-top: 12px; margin-bottom: 6px; - border-width: 2px; - border-color: transparent; } + padding: 7px 9px; + width: 320px; + background-color: white; + color: rgba(92, 97, 108, 0.7); + border: 2px solid white; } .search-entry:hover { - background-color: #f7f7f7; - color: #50555e; } + background-color: white; + border-color: white; + color: rgba(92, 97, 108, 0.7); } .search-entry:focus { - border-style: solid; + background-color: #f4f8ff; border-color: #2777ff; - color: #5c616c; - box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } + color: #5c616c; } + + .search-entry:insensitive { + background-color: white; + border-color: white; + color: #aeb0b6; } .search-entry .search-entry-icon { + color: inherit; icon-size: 1.09em; - padding: 0 4px; - color: inherit; } + margin-top: 2px; + padding: 0 4px; } /* Search */ #searchResultsContent { @@ -1361,25 +1596,42 @@ StScrollBar { .search-section { spacing: 8px; } .search-section .search-section-separator { - height: 0; + height: 8px; background-color: transparent; } .search-section-content { - background-color: rgba(59, 63, 78, 0.8); - border-radius: 19px; + background-color: #323643; + border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.2); + box-shadow: none; + text-shadow: none; color: white; - padding: 18px; - spacing: 8px; } + padding: 12px; + margin: 4px; } -.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(255, 255, 255, 0.1); - transition-duration: 200ms; } - -.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked { - background-color: rgba(26, 28, 35, 0.9); } +.list-search-result, .search-provider-icon { + background-color: transparent; + margin: 4px; + border-radius: 8px !important; } + .list-search-result:hover, .search-provider-icon:hover { + background-color: rgba(255, 255, 255, 0.1); } + .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:selected:hover, .search-provider-icon:selected:hover, .list-search-result:focus:hover, .search-provider-icon:focus:hover { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:selected:active, .search-provider-icon:selected:active, .list-search-result:focus:active, .search-provider-icon:focus:active { + background-color: rgba(255, 255, 255, 0.13); } + .list-search-result:active, .search-provider-icon:active { + background-color: rgba(255, 255, 255, 0.16); } + .list-search-result:outlined, .search-provider-icon:outlined, .list-search-result:checked, .search-provider-icon:checked { + background-color: rgba(255, 255, 255, 0.19); } + .list-search-result:outlined:active, .search-provider-icon:outlined:active, .list-search-result:checked:active, .search-provider-icon:checked:active { + background-color: rgba(255, 255, 255, 0.22); } + .list-search-result:outlined:hover, .search-provider-icon:outlined:hover, .list-search-result:checked:hover, .search-provider-icon:checked:hover { + background-color: rgba(255, 255, 255, 0.25); } + .list-search-result:drop, .search-provider-icon:drop { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .grid-search-results { spacing: 36px; } @@ -1388,8 +1640,7 @@ StScrollBar { spacing: 12px; } .search-provider-icon .list-search-provider-content .list-search-provider-details { width: 120px; - margin-top: 0; - color: #ebebeb; } + color: white; } .list-search-results { spacing: 6px; } @@ -1401,13 +1652,11 @@ StScrollBar { spacing: 12px; } .list-search-result .list-search-result-description { - color: #b3b3b3; } + color: #97999f; } /* Dash */ #dash { - font-size: 8pt; - margin-top: 18px; - padding: 0 10px; } + margin: 2em; } #dash .placeholder { background-image: none; background-size: contain; @@ -1415,22 +1664,49 @@ StScrollBar { #dash .empty-dash-drop-target { width: 32px; height: 32px; } - #dash .overview-icon { - padding: 5px; } + #dash .app-well-app-running-dot { + margin-bottom: 15px; } .dash-background { - background-color: #3b3b3b; - margin-bottom: 16px; - padding: 10px; - border-radius: 24px; } + background-color: #323643; + border-radius: 28px; + padding: 12px; + spacing: 6px; } -.dash-item-container .app-well-app, .show-apps { - padding: 10px 1.5px 26px; } +.dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { + margin: 0 4px; + padding: 6px; } + +.dash-item-container .show-apps .overview-icon { + background-color: transparent; } + +.dash-item-container .show-apps:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .dash-item-container .show-apps:selected .overview-icon:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .dash-item-container .show-apps:selected .overview-icon:active .overview-icon, .dash-item-container .show-apps:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.dash-item-container .show-apps:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.dash-item-container .show-apps:outlined .overview-icon, .dash-item-container .show-apps:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .dash-item-container .show-apps:outlined .overview-icon:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .dash-item-container .show-apps:outlined .overview-icon:hover .overview-icon, .dash-item-container .show-apps:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.dash-item-container .show-apps:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .dash-separator { width: 1px; - margin: 0 6.5px 16px; - background-color: rgba(255, 255, 255, 0.3); } + background-color: #d9d9d9; } .dash-label { color: white; @@ -1438,27 +1714,7 @@ StScrollBar { border-radius: 99px; padding: 6px 12px; text-align: center; - -y-offset: 12px; } - -.show-apps .overview-icon { - color: white; } - -.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } - -.show-apps:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } - -.show-apps:drop .overview-icon { - border: 2px solid #2777ff; - background-color: rgba(39, 119, 255, 0.2); } - -.show-apps:active .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } - -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { - background-color: rgba(48, 51, 64, 0.5); - color: #5c616c; } + -y-offset: 8px; } /* App Grid */ .icon-grid { @@ -1472,64 +1728,108 @@ StScrollBar { page-padding-right: 12px; } /* App Icons */ -.app-well-app .overview-icon, -.grid-search-result .overview-icon { - color: #fff; } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + background-color: transparent; } -.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon, -.grid-search-result:hover .overview-icon, -.grid-search-result:selected .overview-icon { +.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app:focus .overview-icon, -.grid-search-result:focus .overview-icon { - background-color: rgba(255, 255, 255, 0.3); } +.app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app:selected .overview-icon:hover .overview-icon, .grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app:focus .overview-icon:hover .overview-icon, .grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app:selected .overview-icon:active .overview-icon, .grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app:focus .overview-icon:active .overview-icon, .grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } -.app-well-app:drop .overview-icon, -.grid-search-result:drop .overview-icon { - border: 2px solid #2777ff; +.app-well-app:active .overview-icon, .grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app:outlined .overview-icon, .grid-search-result:outlined .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app:outlined .overview-icon:active .overview-icon, .grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app:checked .overview-icon:active .overview-icon, .grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app:outlined .overview-icon:hover .overview-icon, .grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app:checked .overview-icon:hover .overview-icon, .grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, -.grid-search-result:active .overview-icon, -.grid-search-result:checked .overview-icon { - background-color: rgba(26, 28, 35, 0.5); } +.app-well-app .overview-icon, .grid-search-result .overview-icon { + padding: 12px; } -.app-well-app .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; } - .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, - .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { - spacing: 6px; } +.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { + spacing: 6px; } -/* App Folders */ -.app-well-app.app-folder { - background-color: #3b3b3b; - border-radius: 12px; } +.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + +.app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.1); } + +.app-well-app.app-folder:selected .overview-icon, .app-folder.grid-search-result:selected .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-folder.grid-search-result:focus .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + .app-well-app.app-folder:selected .overview-icon:hover .overview-icon, .app-folder.grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon:hover .overview-icon, .app-folder.grid-search-result:focus .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + .app-well-app.app-folder:selected .overview-icon:active .overview-icon, .app-folder.grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app.app-folder:focus .overview-icon:active .overview-icon, .app-folder.grid-search-result:focus .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.13); } + +.app-well-app.app-folder:active .overview-icon, .app-folder.grid-search-result:active .overview-icon { + background-color: rgba(255, 255, 255, 0.16); } + +.app-well-app.app-folder:outlined .overview-icon, .app-folder.grid-search-result:outlined .overview-icon, .app-well-app.app-folder:checked .overview-icon, .app-folder.grid-search-result:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.19); } + .app-well-app.app-folder:outlined .overview-icon:active .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app.app-folder:checked .overview-icon:active .overview-icon, .app-folder.grid-search-result:checked .overview-icon:active .overview-icon { + background-color: rgba(255, 255, 255, 0.22); } + .app-well-app.app-folder:outlined .overview-icon:hover .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app.app-folder:checked .overview-icon:hover .overview-icon, .app-folder.grid-search-result:checked .overview-icon:hover .overview-icon { + background-color: rgba(255, 255, 255, 0.25); } + +.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { + border: 2px solid rgba(39, 119, 255, 0.8); + background-color: rgba(39, 119, 255, 0.2); } .app-folder-dialog { - border-radius: 24px; - background-color: #3b3b3b; + border-radius: 32px; + background-color: #323643; padding: 12px 0px 12px 0px; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; /* FIXME: this is to keep the label in sync with the entry */ } - .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry { - font-size: 18pt; - font-weight: 800; } .app-folder-dialog .folder-name-container .folder-name-entry { width: 300px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } .app-folder-dialog .folder-name-container .edit-folder-button { - padding: 0; + background-color: transparent; + background-color: none; width: 36px; height: 36px; border-radius: 18px; } + .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus { + color: #5c616c; + background-color: #e2eaf9; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .app-folder-dialog .folder-name-container .edit-folder-button:hover { + color: #5c616c; + background-color: white; } + .app-folder-dialog .folder-name-container .edit-folder-button:active { + color: #5c616c; + background-color: white; } .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { - icon-size: 16px; } + icon-size: 1.09em; } .app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; @@ -1549,17 +1849,14 @@ StScrollBar { height: 5px; width: 5px; border-radius: 5px; - background-color: white; - margin-bottom: 1px; } + margin-bottom: 8px; + background-color: white; } .rename-folder-popup .rename-folder-popup-item { spacing: 6px; } .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { padding: 0 12px; } -.app-menu { - max-width: 27.25em; } - .page-indicator { padding: 6px 12px 0; } .page-indicator .page-indicator-icon { @@ -1585,12 +1882,12 @@ StScrollBar { background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: 15px 0px 0px 15px; } + border-radius: 24px 0px 0px 24px; } .page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px 15px 15px 0px; } + border-radius: 0px 24px 24px 0px; } .page-navigation-arrow { margin: 6px; @@ -1674,7 +1971,6 @@ StScrollBar { .caps-lock-warning-label { text-align: center; padding-bottom: 8px; - font-size: 9pt; color: #fd7d00; } /* Workspace animation */ @@ -1686,18 +1982,9 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); border: 1px solid #2777ff; } -.tile-preview-left.on-primary { - border-radius: 9px 0 0 0; } - -.tile-preview-right.on-primary { - border-radius: 0 9px 0 0; } - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 9px 9px 0 0; } - /* On-screen Keyboard */ #keyboard { - background-color: rgba(242, 242, 242, 0.9); + background-color: #303340; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } #keyboard .page-indicator { padding: 6px; } @@ -1710,124 +1997,107 @@ StScrollBar { spacing: 4px; } .keyboard-key { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - font-size: 15pt; + font-size: 16pt; + font-weight: bold; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; - border-radius: 11px; } + border-radius: 12px; + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); + color: white; + background-color: #545454; } .keyboard-key:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-key:hover, .keyboard-key:checked { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-key:active { - color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-key:checked { + color: white; + background-color: #737373; } .keyboard-key:grayed { background-color: #f7f7f7; color: white; border-color: black; } .keyboard-key.default-key { - color: #5c616c; - background-color: #1e2128; - border-color: black; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { - color: #5c616c; - background-color: #292c37; - border-color: black; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + color: white; + background-color: #383838; + border-radius: 12px; } + .keyboard-key.default-key:hover { + color: white; + background-color: #424242; } .keyboard-key.default-key:active { - color: #5c616c; - background-color: #111217; - border-color: black; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #4a4a4a; } + .keyboard-key.default-key:checked { + color: white; + background-color: #575757; } .keyboard-key.enter-key { color: #ffffff; background-color: #3681ff; - border-color: #004bca; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { - color: #5c616c; - background-color: #5f9aff; - border-color: #005efd; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + border-radius: 12px; + color: white; } + .keyboard-key.enter-key:hover { + color: #ffffff; + background-color: #4b8eff; } .keyboard-key.enter-key:active { - color: #5c616c; - background-color: #0e67ff; - border-color: #0047c0; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: #ffffff; + background-color: #5a97ff; } + .keyboard-key.enter-key:checked { + color: #ffffff; + background-color: #74a7ff; } .keyboard-key.shift-key-uppercase { - color: #2777ff; } + background-color: gray; + color: #303340; } + .keyboard-key.shift-key-uppercase:hover { + background-color: #8c8c8c; + color: #3b3f4e; } .keyboard-key StIcon { - icon-size: 1.125em; } + icon-size: 24px; } .keyboard-subkeys { - color: white; -arrow-border-radius: 16px; -arrow-background-color: #303340; -arrow-border-width: 1px; -arrow-border-color: #43495a; -arrow-base: 20px; -arrow-rise: 10px; - -boxpointer-gap: 6px; } + -boxpointer-gap: 6px; + padding: 6px; } .keyboard-subkeys .keyboard-key { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - border-radius: 8px; } + color: white; + background-color: #545454; + border-radius: 12px; } .keyboard-subkeys .keyboard-key:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + color: white; + background-color: #35415b; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .keyboard-subkeys .keyboard-key:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .keyboard-subkeys .keyboard-key:hover { + color: white; + background-color: #5e5e5e; } .keyboard-subkeys .keyboard-key:active { - color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + color: white; + background-color: #666666; } + .keyboard-subkeys .keyboard-key:checked { + color: white; + background-color: #737373; } .emoji-page .keyboard-key { background-color: transparent; @@ -1839,44 +2109,84 @@ StScrollBar { background-color: #2777ff; } .word-suggestions { - font-size: 13pt; + font-size: 14pt; spacing: 12px; - min-height: 20pt; } + min-height: 20pt; + padding: 12px; + color: white; } + .word-suggestions StButton { + margin: 0 3px; + min-width: 32px; + border-radius: 6px; + padding: 6px 18px; + background-color: transparent; + background-image: none; } + .word-suggestions StButton:focus { + color: white; + background-color: #35415b; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .word-suggestions StButton:focus:hover { + background-color: #3f4b68; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:focus:active { + background-color: #434f6d; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .word-suggestions StButton:hover { + color: white; + background-color: #5e5e5e; } + .word-suggestions StButton:active { + color: white; + background-color: #666666; } + .word-suggestions StButton:checked { + color: white; + background-color: #737373; } /* Looking Glass */ #LookingGlassDialog { background-color: #303340; + border-radius: 0 0 16px 16px; + border-top-width: 0; + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + padding: 6px; spacing: 6px; - padding: 4px; - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 8px; - color: white; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } #LookingGlassDialog > #Toolbar { border: none; - border-radius: 8px; - background-color: #303340; } + padding: 6px; + border-radius: 0; + background-color: transparent; + spacing: 6px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button { + padding: 6px 12px; } + #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon { + icon-size: 1.09em; } #LookingGlassDialog .labels { spacing: 6px; } #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; - -minimum-hpadding: 6px; + -minimum-hpadding: 12px; font-weight: bold; + padding: 6px 12px; color: #d9d9d9; transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - border-bottom-width: 2px; } + box-shadow: none; + border: none; + border-radius: 6px; + background-color: transparent; } #LookingGlassDialog .notebook-tab:hover { - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.05); } #LookingGlassDialog .notebook-tab:selected { - border-bottom-width: 2px; - box-shadow: inset 0 -2px 0 0 #4187ff; - color: white; } + color: white; + background-color: rgba(255, 255, 255, 0.1); } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; - spacing: 6px; } + spacing: 6px; + padding: 6px; } #LookingGlassDialog StBoxLayout#ResultsArea { - spacing: 6px; } + spacing: 6px; + padding: 6px; } .lg-dialog StEntry { background-color: rgba(59, 63, 78, 0.6); @@ -1894,14 +2204,13 @@ StScrollBar { color: #0047c0; } .lg-dialog .actor-link { - color: #ccc; } + color: #aeb0b6; } .lg-dialog .actor-link:hover { - color: white; } + color: #e4e4e6; } .lg-dialog .actor-link:active { - color: #999999; } + color: #787c86; } .lg-completions-text { - font-size: .9em; font-style: italic; } .lg-obj-inspector-title { @@ -1915,20 +2224,35 @@ StScrollBar { border: 1px solid #ffffff; } #lookingGlassExtensions { - padding: 4px; } + padding: 6px; } .lg-extensions-list { - padding: 4px; + padding: 6px; spacing: 6px; } .lg-extension { - border: 1px solid #0d0d0d; - background-color: #3b3f4e; + padding: 12px; border-radius: 8px; - padding: 4px; } - -.lg-extension-name { - font-weight: bold; } + margin: 4px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + color: #5c616c; + background-color: #f7f7f8; } + .lg-extension:focus { + color: #5c616c; + background-color: #e2eaf9; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .lg-extension:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .lg-extension:hover { + color: #5c616c; + background-color: white; } + .lg-extension:active { + color: #5c616c; + background-color: white; } .lg-extension-meta { spacing: 6px; } @@ -1939,6 +2263,19 @@ StScrollBar { border-radius: 8px; padding: 6px; } +.lg-debug-flag-button { + color: #5c616c; } + .lg-debug-flag-button StLabel { + padding: 6px, 12px; } + .lg-debug-flag-button:hover { + color: #8f949f; } + .lg-debug-flag-button:active { + color: #2d3035; } + +.lg-debug-flags-header { + padding-top: 12px; + padding: 6px; } + /* Login Dialog */ .login-dialog-banner-view { padding-top: 24px; @@ -1970,56 +2307,33 @@ StScrollBar { border-color: #1c1e25; } .login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); border-color: #1c1e25; background-color: #1c1e25; color: rgba(255, 255, 255, 0.7); } .login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { - color: #ffffff; - background-color: #3681ff; - border-color: #004bca; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - border-color: #2777ff; } + background-color: #2777ff; + color: #ffffff; } + .login-dialog .modal-dialog-button:default:focus, + .unlock-dialog .modal-dialog-button:default:focus { + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { - color: #ffffff; - background-color: #5091ff; - border-color: #0058ee; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); background-color: #4187ff; - border-color: #4187ff; } + color: white; } .login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { - color: #ffffff; - background-color: #186eff; - border-color: #004bca; - text-shadow: none; - icon-shadow: none; - box-shadow: none; - background-color: #0e67ff; - border-color: #0e67ff; } + background-color: #0361ff; + color: #ededed; } .login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #005af3; - background-color: #005af3; - color: rgba(255, 255, 255, 0.7); } + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: rgba(39, 119, 255, 0.5); + color: rgba(255, 255, 255, 0.5); } .login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button, @@ -2067,11 +2381,39 @@ StScrollBar { color: white; } .login-dialog-not-listed-label { - font-size: 9pt; font-weight: bold; color: #b3b3b3; padding-top: 1em; } +.login-dialog-auth-list-view { + -st-vfade-offset: 1em; } + +.login-dialog-auth-list { + spacing: 6px; + margin-left: 2em; } + +.login-dialog-auth-list-title { + margin-left: 2em; } + +.login-dialog-auth-list-item { + border-radius: 12px; + padding: 6px; + color: #b3b3b3; } + .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { + background-color: #2777ff; + color: #ffffff; } + +.login-dialog-auth-list-label { + font-size: 13pt; + font-weight: bold; + padding-left: 15px; } + .login-dialog-auth-list-label:ltr { + padding-left: 14px; + text-align: left; } + .login-dialog-auth-list-label:rtl { + padding-right: 14px; + text-align: right; } + .login-dialog-user-list-view { -st-vfade-offset: 1em; } @@ -2103,7 +2445,7 @@ StScrollBar { color: white; } .user-widget.horizontal .user-widget-label { - font-size: 12pt; + font-size: 13pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { @@ -2114,7 +2456,7 @@ StScrollBar { text-align: right; } .user-widget.vertical .user-widget-label { - font-size: 15pt; + font-size: 16pt; text-align: center; font-weight: normal; padding-top: 16px; } @@ -2134,9 +2476,23 @@ StScrollBar { .login-dialog-prompt-label { color: #cccccc; - font-size: 11pt; + font-size: 12pt; padding-top: 1em; } +.unlock-dialog StEntry { + border: none !important; } + .unlock-dialog StEntry:focus { + background-color: rgba(92, 97, 108, 0.1); } + .unlock-dialog StEntry:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } + +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { + border-color: transparent; + background-color: rgba(92, 97, 108, 0.1); } + /* Screen Shield */ .unlock-dialog-clock { color: white; @@ -2147,8 +2503,7 @@ StScrollBar { .unlock-dialog-clock-time { font-size: 64pt; - padding-top: 42px; - font-feature-settings: "tnum"; } + padding-top: 42px; } .unlock-dialog-clock-date { font-size: 16pt; @@ -2159,7 +2514,7 @@ StScrollBar { padding-top: 48px; } .unlock-dialog-notifications-container { - margin: 12px 0; + margin: 12px; spacing: 6px; width: 23em; background-color: transparent; } @@ -2168,29 +2523,28 @@ StScrollBar { padding-bottom: 0; } .unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { - padding: 12px 6px; + padding: 12px 16px; border: none; - background-color: rgba(48, 51, 64, 0.3); + background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 16px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { - background-color: rgba(48, 51, 64, 0.9); } + background-color: rgba(255, 255, 255, 0.2); } .unlock-dialog-notification-label { - padding: 0px 0px 0px 12px; } + padding: 0 0 0 12px; } .unlock-dialog-notification-count-text { - weight: bold; - padding: 0 6px; - color: #303340; - background-color: rgba(255, 255, 255, 0.3); - border-radius: 99px; - margin-right: 12px; } + font-weight: bold; + padding: 0 12px; + color: white; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 99px; } .screen-shield-background { background: black; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } #lockDialogGroup { background-color: #272a34; } @@ -2203,13 +2557,13 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); } /* OSD */ -.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { +.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel { font-weight: bold; background-color: #ffffff; color: #5c616c; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } - .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { + .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher StIcon, .screenshot-ui-panel StIcon { color: black; icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } @@ -2275,7 +2629,7 @@ StScrollBar { background-color: white; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } -.window-close { +.window-close, .screenshot-ui-close-button { background-image: url("assets/close-window.svg"); background-size: 32px; background-color: transparent; @@ -2284,10 +2638,10 @@ StScrollBar { height: 32px; width: 32px; transition-duration: .2s; } - .window-close:hover { + .window-close:hover, .screenshot-ui-close-button:hover { background-image: url("assets/close-window-hover.svg"); background-color: transparent; } - .window-close:active { + .window-close:active, .screenshot-ui-close-button:active { background-image: url("assets/close-window-active.svg"); background-color: transparent; color: transparent; @@ -2346,32 +2700,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .datemenu-today-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .datemenu-today-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .datemenu-today-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .datemenu-today-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .datemenu-today-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .datemenu-today-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .datemenu-today-button .date-label { font-size: 1.5em; font-weight: 300; } @@ -2381,32 +2733,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .calendar:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .calendar:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .calendar:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .calendar:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .calendar:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #eaebec; } .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { @@ -2428,32 +2778,30 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .events-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .events-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .events-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .events-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .events-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .events-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } /* World clocks */ .world-clocks-button { @@ -2461,64 +2809,60 @@ StScrollBar { border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .world-clocks-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .world-clocks-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .world-clocks-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .world-clocks-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .world-clocks-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } .weather-button { border-width: 1px; border-style: solid; border-radius: 10px; margin: 4px; - border-color: transparent; background-color: transparent; - background-image: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); - text-shadow: none; - icon-shadow: none; } + background-color: none; } + .weather-button:insensitive { + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: transparent; + color: rgba(255, 255, 255, 0.5); } .weather-button:focus { color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + background-color: #e2eaf9; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:focus:hover { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } + .weather-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); } .weather-button:hover { color: #5c616c; background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: none; } .weather-button:active { color: #5c616c; - background-color: #f7f7f7; - border-color: #d1d1d1; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } + background-color: white; } /* Search */ .search-entry { @@ -2579,10 +2923,10 @@ StScrollBar { color: black; } /* App Folders */ -.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label { +.app-well-app.app-folder, .app-folder.grid-search-result, .app-well-app.app-folder .overview-icon.overview-icon-with-label, .app-folder.grid-search-result .overview-icon.overview-icon-with-label { background-color: rgba(255, 255, 255, 0.1); } -.app-well-app.app-folder:checked { +.app-well-app.app-folder:checked, .app-folder.grid-search-result:checked { background: black; } .app-folder-dialog {