diff --git a/debian/control b/debian/control index fdba5407..9f0ba3a8 100644 --- a/debian/control +++ b/debian/control @@ -65,7 +65,7 @@ Depends: plymouth-label, ${misc:Depends}, Breaks: - gnome-shell (<< 43.0), + gnome-shell (<< 44.0), kali-defaults (<< 2019.4.0), kali-desktop-xfce (<< 2020.2.18), kali-menu (<< 2019.4.4), diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index f44cbfa8..2b7f9b5f 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -30,10 +30,6 @@ stage { border-radius: 999px; padding: 12px; } -.workspace-thumbnails .workspace-thumbnail { - color: white; - background-color: rgba(255, 255, 255, 0.1); } - .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; @@ -42,102 +38,112 @@ stage { transition-duration: 200ms; text-align: center; } -.modal-dialog { - color: #eeeeec; - background-color: #23252e; - border-radius: 11px; - border: 1px solid rgba(238, 238, 236, 0.07); } - -#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 6px; +#LookingGlassDialog .notebook-tab, #LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 8px; border-style: solid; border-width: 1px; font-weight: bold; padding: 3px 24px; transition-duration: 100ms; color: #eeeeec; - background-color: #2d2f38; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #35373f; } + #LookingGlassDialog .notebook-tab:focus, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus, .login-dialog-button:focus, .icon-button:focus, .background-app-item .close-button:focus { transition-duration: 100ms; color: #eeeeec; - background-color: #2c364c; + background-color: #343d52; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { - background-color: #333d54; + #LookingGlassDialog .notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover, .login-dialog-button:focus:hover, .icon-button:focus:hover, .background-app-item .close-button:focus:hover { + background-color: #3a445a; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { - background-color: #39435b; + #LookingGlassDialog .notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active, .login-dialog-button:focus:active, .icon-button:focus:active, .background-app-item .close-button:focus:active { + background-color: #404a61; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog .notebook-tab:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover, .login-dialog-button:hover, .icon-button:hover, .background-app-item .close-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #343640; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { + background-color: #3c3e47; } + #LookingGlassDialog .notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive, .login-dialog-button:insensitive, .icon-button:insensitive, .background-app-item .close-button:insensitive { transition-duration: 100ms; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + #LookingGlassDialog .notebook-tab:selected, #LookingGlassDialog > #Toolbar .lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .edit-folder-button:selected, .button:selected, .login-dialog-button:selected, .icon-button:selected, .background-app-item .close-button:selected, #LookingGlassDialog .notebook-tab:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active, .login-dialog-button:active, .icon-button:active, .background-app-item .close-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3b3d49; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { + background-color: #4a4d58; } + #LookingGlassDialog .notebook-tab:checked, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked, .login-dialog-button:checked, .icon-button:checked, .background-app-item .close-button:checked { transition-duration: 100ms; color: #eeeeec; - background-color: #414451; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { - background-color: #484b5a; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { - background-color: #4f5362; } + background-color: #4a4d58; } + #LookingGlassDialog .notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover, .login-dialog-button:checked:hover, .icon-button:checked:hover, .background-app-item .close-button:checked:hover { + background-color: #515460; } + #LookingGlassDialog .notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active, .login-dialog-button:checked:active, .icon-button:checked:active, .background-app-item .close-button:checked:active { + background-color: #585b69; } + #LookingGlassDialog .flat.notebook-tab, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button, .app-folder-dialog .folder-name-container .flat.edit-folder-button, .flat.button, .flat.login-dialog-button, .flat.icon-button, .background-app-item .flat.close-button { + transition-duration: 100ms; + color: #eeeeec; + background-color: #35373f; + background-color: transparent; } + #LookingGlassDialog .flat.notebook-tab:focus, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus, .flat.button:focus, .flat.login-dialog-button:focus, .flat.icon-button:focus, .background-app-item .flat.close-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:hover, .flat.button:focus:hover, .flat.login-dialog-button:focus:hover, .flat.icon-button:focus:hover, .background-app-item .flat.close-button:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:active, .flat.button:focus:active, .flat.login-dialog-button:focus:active, .flat.icon-button:focus:active, .background-app-item .flat.close-button:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:hover, .flat.button:hover, .flat.login-dialog-button:hover, .flat.icon-button:hover, .background-app-item .flat.close-button:hover { + transition-duration: 100ms; + color: #eeeeec; + background-color: #3c3e47; } + #LookingGlassDialog .flat.notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .flat.edit-folder-button:insensitive, .flat.button:insensitive, .flat.login-dialog-button:insensitive, .flat.icon-button:insensitive, .background-app-item .flat.close-button:insensitive { + transition-duration: 100ms; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } + #LookingGlassDialog .flat.notebook-tab:selected, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .flat.edit-folder-button:selected, .flat.button:selected, .flat.login-dialog-button:selected, .flat.icon-button:selected, .background-app-item .flat.close-button:selected, #LookingGlassDialog .flat.notebook-tab:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:active, .flat.button:active, .flat.login-dialog-button:active, .flat.icon-button:active, .background-app-item .flat.close-button:active { + transition-duration: 100ms; + color: #eeeeec; + background-color: #4a4d58; } + #LookingGlassDialog .flat.notebook-tab:checked, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked, .flat.button:checked, .flat.login-dialog-button:checked, .flat.icon-button:checked, .background-app-item .flat.close-button:checked { + transition-duration: 100ms; + color: #eeeeec; + background-color: #4a4d58; } + #LookingGlassDialog .flat.notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:hover, .flat.button:checked:hover, .flat.login-dialog-button:checked:hover, .flat.icon-button:checked:hover, .background-app-item .flat.close-button:checked:hover { + background-color: #515460; } + #LookingGlassDialog .flat.notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:active, .flat.button:checked:active, .flat.login-dialog-button:checked:active, .flat.icon-button:checked:active, .background-app-item .flat.close-button:checked:active { + background-color: #585b69; } -.icon-button { - border-radius: 99px; - border-style: solid; - border-width: 1px; - font-weight: bold; - padding: 12px; - transition-duration: 100ms; +.lg-dialog StEntry, StEntry { + border-radius: 8px; + padding: 9px 9px; color: #eeeeec; - background-color: #2d2f38; } - .icon-button:focus { + selection-background-color: #2777ff; + selected-color: #ffffff; + transition-duration: 100ms; + background-color: rgba(238, 238, 236, 0.1); + color: rgba(238, 238, 236, 0.7); } + StEntry:hover { transition-duration: 100ms; - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .icon-button:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .icon-button:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .icon-button:hover { + background-color: rgba(238, 238, 236, 0.2); + color: inherit; } + StEntry:focus { transition-duration: 100ms; - color: #eeeeec; - background-color: #343640; } - .icon-button:insensitive { + background-color: rgba(174, 200, 242, 0.24); + box-shadow: inset 0 0 0 2px #2777ff; + color: #eeeeec; } + StEntry:insensitive { transition-duration: 100ms; - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); } - .icon-button:active { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3b3d49; } - .icon-button:checked { - transition-duration: 100ms; - color: #eeeeec; - background-color: #414451; } - .icon-button:checked:hover { - background-color: #484b5a; } - .icon-button:checked:active { - background-color: #4f5362; } - .icon-button > StIcon { - icon-size: 1.09em; } + background-color: rgba(136, 138, 141, 0.2); + color: #888a8d; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; transition-duration: 100ms; color: #eeeeec; - background-color: #424653; } + background-color: #3f424d; } .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { margin-right: 1px; } .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { @@ -149,42 +155,42 @@ stage { .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { transition-duration: 100ms; color: #eeeeec; - background-color: #3f4b64; + background-color: #3d475f; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { - background-color: #45516c; + background-color: #434e66; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - background-color: #4b5874; + background-color: #49546e; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #494d5c; } + background-color: #464955; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #505464; } + background-color: #545866; } .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { transition-duration: 100ms; color: #eeeeec; - background-color: #565c6d; } + background-color: #545866; } .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { - background-color: #5d6375; } + background-color: #5b5f6f; } .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { - background-color: #646a7e; } + background-color: #616677; } .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; } + border-radius: 0 0 0 16px; } .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; + border-radius: 0 0 16px; 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; } + border-radius: 0 0 16px; } .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; + border-radius: 0 0 0 16px; margin-left: 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 10px 10px !important; + border-radius: 0 0 16px 16px; margin-left: 0 !important; margin-right: 0 !important; } @@ -213,33 +219,41 @@ stage { .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { transition-duration: 100ms; color: white; - background-color: #38445b; + background-color: #3f4b62; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { - background-color: #3e4a63; + background-color: #45516a; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { - background-color: #44516b; + background-color: #4c5872; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { transition-duration: 100ms; color: white; - background-color: #414552; } + background-color: #494d59; } .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { transition-duration: 100ms; color: white; - background-color: #484c5a; } + background-color: #575c6a; } .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { transition-duration: 100ms; color: white; - background-color: #4e5463; } + background-color: #575c6a; } .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: #555b6b; } + background-color: #5d6373; } .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: #5c6274; } + background-color: #646a7b; } + +.dash-label, .window-caption { + background-color: #303340; + color: white; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 99px; + padding: 6px 12px; + text-align: center; } /* General Typography */ -.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { +.user-widget.vertical .user-widget-label, .unlock-dialog-clock .unlock-dialog-clock-date, .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { font-weight: 800; font-size: 20pt; } @@ -247,15 +261,15 @@ stage { font-weight: 800; font-size: 15pt; } -.quick-toggle-menu .header .title { +.user-widget.horizontal .user-widget-label, .quick-toggle-menu .header .title { font-weight: 700; font-size: 15pt; } -.message-dialog-content .message-dialog-title.lightweight, .headline { +.bt-menu-placeholder, .message-dialog-content .message-dialog-title.lightweight, .headline { font-weight: 700; font-size: 13pt; } -.lg-extension-name, .osd-window, .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 { +.lg-extension-name, .background-app-item .title, .osd-window, .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; } @@ -263,7 +277,7 @@ stage { 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, +.lg-completions-text, .caps-lock-warning-label, #dash, .background-app-item .subtitle, .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; @@ -273,7 +287,7 @@ stage { 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 { +.unlock-dialog-clock .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 */ @@ -289,42 +303,31 @@ stage { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } /* Entries */ -StEntry { - border-radius: 8px; - padding: 8px; - color: #eeeeec; - 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: #3b3f4e; - border-color: #3b3f4e; - color: rgba(238, 238, 236, 0.7); } - StEntry:focus { - background-color: #2d3546; - border-color: #2777ff; - color: #eeeeec; } - StEntry:insensitive { - background-color: #2f3340; - border-color: #2f3340; - color: #888a8d; } - StEntry StIcon.capslock-warning { - icon-size: 16px; - warning-color: #fd7d00; - padding: 0 4px; } - StEntry StIcon.peek-password { - icon-size: 1.09em; - padding: 0 4px; } - StEntry StLabel.hint-text { - margin-left: 2px; - color: rgba(238, 238, 236, 0.7); } +StEntry StIcon.capslock-warning { + icon-size: 1.09em; + warning-color: #fd7d00; + padding: 0 4px; } + +StEntry StIcon.peek-password { + icon-size: 1.09em; + padding: 0 4px; } + +StEntry StLabel.hint-text { + margin-left: 2px; + color: rgba(238, 238, 236, 0.7); } /* Buttons */ -.button { +.button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { min-height: 22px; } +.icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 99px; + padding: 12px; + min-height: 16px; } + .icon-button StIcon, .login-dialog-button.cancel-button StIcon, .login-dialog-button.switch-user-button StIcon, .login-dialog-button.login-dialog-session-list-button StIcon, .background-app-item .close-button StIcon { + icon-size: 1.09em; + -st-icon-style: symbolic; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } @@ -405,40 +408,50 @@ StScrollBar { .popup-menu-content, .candidate-popup-content { padding: 6px; + background-color: #23252e; border-radius: 20px; border: 1px solid rgba(238, 238, 236, 0.07); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); - background-color: #23252e; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } .popup-menu-item { - padding: 9px 12px; - border-radius: 12px; + font-weight: normal; spacing: 6px; transition-duration: 100ms; - background-color: transparent; } + padding: 9px 12px; + transition-duration: 100ms; + background-color: transparent; + background-color: none; + box-shadow: none; + box-shadow: none !important; + border-radius: 12px; } .popup-menu-item:ltr { padding-left: 6px; } .popup-menu-item:rtl { padding-right: 6px; } - .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #303340 !important; } - .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #343845 !important; } - .popup-menu-item:checked { - background-color: #3b3f4e !important; } - .popup-menu-item:checked { - margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #303340; - border-radius: 8px 8px 0 0; } - .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: #414657 !important; } - .popup-menu-item:checked:active { - background-color: #464b5d !important; } - .popup-menu-item:active { - background-color: #3f4454; - color: white; } .popup-menu-item:insensitive { - color: rgba(238, 238, 236, 0.5); } + transition-duration: 100ms; + 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); } + .popup-menu-item:focus, .popup-menu-item:hover { + transition-duration: 100ms; + color: #eeeeec; + background-color: #464955; } + .popup-menu-item:active { + transition-duration: 100ms; + color: #eeeeec; + background-color: #545866; } + .popup-menu-item:checked { + transition-duration: 100ms; + color: #eeeeec; + background-color: #545866; } + .popup-menu-item:checked:hover { + background-color: #5b5f6f; } + .popup-menu-item:checked:active { + background-color: #616677; } + .popup-menu-item:checked { + border-radius: 12px 12px 0 0 !important; } .popup-menu-item .toggle-switch:ltr { margin-left: 4px; } .popup-menu-item .toggle-switch:rtl { @@ -454,27 +467,47 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #3b3f4e; - border-radius: 0 0 8px 8px; } + border-radius: 0 0 13px 13px; + margin-bottom: 6px; } .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; } + font-weight: normal; + spacing: 6px; + transition-duration: 100ms; + padding: 9px 12px; + transition-duration: 100ms; + color: #eeeeec; + background-color: #4d515f; + border-top-width: 0; } + .popup-sub-menu .popup-menu-item:ltr { + padding-left: 6px; } + .popup-sub-menu .popup-menu-item:rtl { + padding-right: 6px; } .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { - background-color: #303340 !important; } - .popup-sub-menu .popup-menu-item:checked { - background-color: #3b3f4e !important; } - .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: #4c5266 !important; } + transition-duration: 100ms; + color: #eeeeec; + background-color: #545867; } .popup-sub-menu .popup-menu-item:active { - background-color: #343845 !important; } + transition-duration: 100ms; + color: #eeeeec; + background-color: #626778; } + .popup-sub-menu .popup-menu-item:checked { + transition-duration: 100ms; + color: #eeeeec; + background-color: #626778; } + .popup-sub-menu .popup-menu-item:checked:hover { + background-color: #686e81; } + .popup-sub-menu .popup-menu-item:checked:active { + background-color: #6f7589; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 12px 12px; + border-bottom-width: 0; } .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; } + border-radius: 0 0 12px 12px; } .popup-menu-ornament { width: 1.2em; @@ -485,12 +518,7 @@ StScrollBar { text-align: left; } .popup-separator-menu-item { - margin: 6px 0; - padding: 0 !important; } - .popup-separator-menu-item:ltr { - margin-right: 4px; } - .popup-separator-menu-item:rtl { - margin-left: 4px; } + border: none !important; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #0d0e11; } @@ -503,7 +531,7 @@ StScrollBar { .popup-sub-menu .popup-separator-menu-item:rtl { margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - background-color: #1c1e25; } + background-color: #0d0e11; } .background-menu { -boxpointer-gap: 0px; @@ -533,9 +561,8 @@ StScrollBar { /* today button (the date) */ .datemenu-today-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -548,31 +575,30 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .datemenu-today-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .datemenu-today-button:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .datemenu-today-button:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .datemenu-today-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .datemenu-today-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .datemenu-today-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .datemenu-today-button:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .datemenu-today-button:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } /* Calendar */ .calendar { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -585,37 +611,36 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .calendar:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .calendar:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .calendar:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .calendar:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .calendar:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .calendar:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .calendar:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .calendar:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } .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; margin: 2px; - border-radius: 6px; } + border-radius: 8px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { background-color: #303340; } .calendar .calendar-month-header .pager-button:active { @@ -643,7 +668,9 @@ StScrollBar { color: #888a8d; padding-top: 6px; height: 16px !important; - font-weight: bold; } + font-weight: 600; } + .calendar .calendar-day { + font-weight: 600; } .calendar .calendar-nonwork-day { color: #888a8d; } .calendar .calendar-other-month-day { @@ -673,37 +700,36 @@ StScrollBar { margin: 6px; padding: 0 6px; border-radius: 3px; - background-color: #1e2128; + background-color: rgba(238, 238, 236, 0.1); color: #888a8d; } /* Events */ .events-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; + background-color: #35373f; padding: 12px; } - .events-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .events-button:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .events-button:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .events-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .events-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .events-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .events-button:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .events-button:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .events-button .events-box { spacing: 6px; } .events-button .events-list { @@ -716,32 +742,31 @@ StScrollBar { /* World clocks */ .world-clocks-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; + background-color: #35373f; padding: 12px; } - .world-clocks-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .world-clocks-button:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .world-clocks-button:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .world-clocks-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .world-clocks-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .world-clocks-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .world-clocks-button:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .world-clocks-button:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } @@ -760,32 +785,31 @@ StScrollBar { /* Weather */ .weather-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; + background-color: #35373f; padding: 12px; } - .weather-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .weather-button:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .weather-button:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .weather-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .weather-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .weather-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .weather-button:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .weather-button:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { @@ -850,31 +874,30 @@ StScrollBar { border-color: rgba(39, 119, 255, 0.6); } .message { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; } - .message:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .message:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .message:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + background-color: #35373f; } .message:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .message:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .message:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .message:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .message:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .message .message-icon-bin { padding: 18px; } .message .message-icon-bin:ltr { @@ -1058,10 +1081,14 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog { + background-color: #23252e; + border-radius: 16px; + box-shadow: inset 0 0 0 1px rgba(238, 238, 236, 0.07); } + .modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -1235,9 +1262,9 @@ StScrollBar { spacing: 24px; } .switcher-list { - padding: 10px; - border-radius: 24px; - box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } + padding: 12px; + border-radius: 28px; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3); } .switcher-list .switcher-list-item-container { spacing: 12px; } .switcher-list .item-box { @@ -1588,28 +1615,29 @@ StScrollBar { .quick-settings { padding: 18px; border-radius: 36px; } - .quick-settings .icon-button, .quick-settings .button { + .quick-settings .icon-button, .quick-settings .background-app-item .close-button, .background-app-item .quick-settings .close-button, .quick-settings .button, .quick-settings .login-dialog-button { padding: 10.5px; } .quick-settings-grid { spacing-rows: 12px; spacing-columns: 12px; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; - min-height: 40px; - border: none; + min-height: 48px; + border: none; } + +.quick-toggle { /* Move padding into the box; this is to allow menu arrows to extend to the border */ } .quick-toggle:checked { transition-duration: 100ms; background-color: #2777ff; - color: #ffffff; - box-shadow: none; } + color: #ffffff; } .quick-toggle:checked:focus { - box-shadow: inset 0 0 0 2px #5a97ff; } + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } .quick-toggle:checked:hover, .quick-toggle:checked:focus { background-color: #4187ff; color: white; } @@ -1623,8 +1651,8 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); color: rgba(255, 255, 255, 0.5); } .quick-toggle > StBoxLayout { - spacing: 6px; } - .quick-toggle.button { + spacing: 9px; } + .quick-toggle.button, .quick-toggle.login-dialog-button, .quick-toggle.icon-button, .background-app-item .quick-toggle.close-button { padding: 0; } .quick-toggle > StBoxLayout { padding: 0 12px; } @@ -1632,54 +1660,105 @@ StScrollBar { padding-left: 15px; } .quick-toggle:rtl > StBoxLayout { padding-right: 15px; } - .quick-toggle .quick-toggle-label { + .quick-toggle .quick-toggle-title { font-weight: bold; } - .quick-toggle .quick-toggle-icon, .quick-toggle .quick-toggle-arrow { + .quick-toggle StBoxLayout > .quick-toggle-subtitle { + font-weight: normal; + font-size: 12px; } + .quick-toggle .quick-toggle-icon { icon-size: 1.09em; } -.quick-menu-toggle:ltr > StBoxLayout { - padding-right: 0; } - -.quick-menu-toggle:rtl > StBoxLayout { - padding-left: 0; } +.quick-menu-toggle .quick-toggle { + min-width: auto; + max-width: auto; } + .quick-menu-toggle .quick-toggle:ltr { + border-radius: 99px 0 0 99px; } + .quick-menu-toggle .quick-toggle:rtl { + border-radius: 0 99px 99px 0; } + .quick-menu-toggle .quick-toggle:ltr:last-child { + border-radius: 99px; } + .quick-menu-toggle .quick-toggle:rtl:last-child { + border-radius: 99px; } .quick-menu-toggle .quick-toggle-arrow { - background-color: rgba(238, 238, 236, 0.1); - padding: 6px 10.5px; } - .quick-menu-toggle .quick-toggle-arrow:ltr { - border-radius: 0 99px 99px 0; } - .quick-menu-toggle .quick-toggle-arrow:rtl { - border-radius: 99px 0 0 99px; } - -.quick-slider { - padding: 0 6px; } - .quick-slider > StBoxLayout { - spacing: 6px; } - .quick-slider .slider-bin { - min-height: 16px; - padding: 6px; - border-radius: 99px; } - .quick-slider .slider-bin:focus { + padding: 6px 10.5px; + border-width: 0; } + .quick-menu-toggle .quick-toggle-arrow:checked { + transition-duration: 100ms; + background-color: #2777ff; + color: #ffffff; + border-color: #00348d; } + .quick-menu-toggle .quick-toggle-arrow:checked:focus { + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } + .quick-menu-toggle .quick-toggle-arrow:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:focus { + background-color: #4187ff; + color: white; } + .quick-menu-toggle .quick-toggle-arrow:checked:active { + background-color: #0361ff; + color: #ededed; } + .quick-menu-toggle .quick-toggle-arrow:checked:insensitive { transition-duration: 100ms; - color: #eeeeec; - background-color: #2c364c; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .quick-slider .slider-bin:focus:hover { - background-color: #333d54; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .quick-slider .slider-bin:focus:active { - background-color: #39435b; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .quick-slider .quick-toggle-icon { - icon-size: 1.09em; } - .quick-slider .icon-button { - background-color: transparent; } + 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); } + .quick-menu-toggle .quick-toggle-arrow:ltr { + border-radius: 0 99px 99px 0; + border-left-width: 1px; } + .quick-menu-toggle .quick-toggle-arrow:rtl { + border-radius: 99px 0 0 99px; + border-right-width: 1px; } + +.quick-slider > StBoxLayout { + spacing: 6px; } + +.quick-slider .icon-button, .quick-slider .login-dialog-button.cancel-button, .quick-slider .login-dialog-button.switch-user-button, .quick-slider .login-dialog-button.login-dialog-session-list-button, .quick-slider .background-app-item .close-button, .background-app-item .quick-slider .close-button { + padding: 6px; } + +.quick-slider .slider-bin { + min-height: 16px; + padding: 6px; + border-radius: 99px; } + .quick-slider .slider-bin:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .quick-slider .slider-bin:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .quick-slider .slider-bin:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .quick-toggle-menu { - background-color: #272a34; + border-radius: 12px; + margin: 4px; + transition-duration: 100ms; + color: #eeeeec; + background-color: #35373f; border-radius: 24px; padding: 12px; margin: 12px 18px 0; } + .quick-toggle-menu:hover { + transition-duration: 100ms; + color: #eeeeec; + background-color: #3c3e47; } + .quick-toggle-menu:active { + transition-duration: 100ms; + color: #eeeeec; + background-color: #4a4d58; } + .quick-toggle-menu:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .quick-toggle-menu:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .quick-toggle-menu:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .quick-toggle-menu .popup-menu-item > StIcon { -st-icon-style: symbolic; } .quick-toggle-menu .header { @@ -1690,28 +1769,51 @@ StScrollBar { icon-size: 1.635em; border-radius: 999px; padding: 9px; - background-color: #383d4b; } + background-color: rgba(238, 238, 236, 0.2); } .quick-toggle-menu .header .icon.active { background-color: #2777ff; } .quick-settings-system-item > StBoxLayout { spacing: 12px; } -.quick-settings-system-item .icon-button > StIcon { - -st-icon-style: symbolic; } - .quick-settings-system-item .power-item { min-height: 0; min-width: 0; } .quick-settings-system-item .power-item:insensitive { transition-duration: 100ms; color: #eeeeec; - background-color: #2d2f38; + background-color: #35373f; background-color: transparent; } .nm-network-item .wireless-secure-icon { icon-size: 0.545em; } +.bt-device-item .popup-menu-icon { + -st-icon-style: symbolic; } + +.bt-menu-placeholder { + text-align: center; + padding: 2em 4em; } + +.device-subtitle { + color: rgba(238, 238, 236, 0.5); } + +.background-apps-quick-toggle { + min-height: 40px; + background-color: transparent; } + .background-apps-quick-toggle StIcon { + icon-size: 1.09em !important; } + +.background-app-item .popup-menu-icon { + icon-size: 2.18em !important; + -st-icon-style: regular !important; } + +.background-app-item .close-button { + padding: 6px; } + +.background-app-item.popup-inactive-menu-item { + color: #eeeeec; } + /* OVERVIEW */ .controls-manager, .secondary-monitor-workspaces { spacing: 12px; } @@ -1726,12 +1828,6 @@ StScrollBar { .window-picker { spacing: 6px; } -.window-caption { - color: white; - background-color: #3b3f4e; - border-radius: 99px; - padding: 6px 12px; } - .window-close, .screenshot-ui-close-button { background-color: rgba(63, 68, 84, 0.98); color: white; @@ -1753,34 +1849,12 @@ StScrollBar { background-color: rgba(3, 2, 1, 0); box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); } - .search-entry { - border-radius: 18px; + border-radius: 99px; margin-top: 12px; margin-bottom: 6px; - padding: 7px 9px; - width: 320px; - background-color: #2e313d; - color: rgba(238, 238, 236, 0.7); - border: 2px solid #2e313d; } - - .search-entry:hover { - background-color: #3b3f4e; - border-color: #3b3f4e; - color: rgba(238, 238, 236, 0.7); } - - .search-entry:focus { - background-color: #2d3546; - border-color: #2777ff; - color: #eeeeec; } - - .search-entry:insensitive { - background-color: #2f3340; - border-color: #2f3340; - color: #888a8d; } - + width: 24em; } .search-entry .search-entry-icon { - color: inherit; icon-size: 1.09em; margin-top: 2px; padding: 0 4px; } @@ -1801,7 +1875,7 @@ StScrollBar { .search-section-content { background-color: #323643; border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px solid rgba(238, 238, 236, 0.07); color: white; padding: 12px; margin: 0 12px; } @@ -1887,7 +1961,8 @@ StScrollBar { margin-right: 0; } .dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { - padding: 6px; } + padding: 6px; + border-radius: 16px; } .dash-item-container .show-apps { transition-duration: 400ms; } @@ -1923,11 +1998,6 @@ StScrollBar { margin-bottom: 12px; } .dash-label { - color: white; - background-color: #303340; - border-radius: 99px; - padding: 6px 12px; - text-align: center; -y-offset: 8px; } /* App Grid */ @@ -1966,43 +2036,47 @@ StScrollBar { border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } .app-well-app .overview-icon, .grid-search-result .overview-icon { - padding: 12px; } + padding: 12px; + border-radius: 24px; } .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.app-folder, .app-folder.grid-search-result { transition-duration: 400ms; } .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { - background-color: rgba(255, 255, 255, 0.19); } + background-color: rgba(238, 238, 236, 0.07); } .app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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: 32px; - background-color: #323643; } + border-radius: 64px; + background-color: #23252e; + padding: 12px; + box-shadow: inset 0 0 0 1px rgba(238, 238, 236, 0.07); } .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-entry { - width: 300px; } + width: 12em; + border-radius: 16px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } @@ -2054,7 +2128,7 @@ StScrollBar { .system-action-icon { background-color: rgba(0, 0, 0, 0.8); - color: #fff; + color: white; border-radius: 99px; icon-size: 48px; } @@ -2073,34 +2147,31 @@ StScrollBar { background-gradient-direction: horizontal; border-radius: 0px 24px 24px 0px; } -.page-navigation-arrow > StIcon { +.page-navigation-arrow { margin: 6px; padding: 18px; width: 24px; height: 24px; border-radius: 99px; } - -.page-navigation-arrow:insensitive > StIcon { - transition-duration: 100ms; - background-color: transparent; - background-color: none; - box-shadow: none; } - .page-navigation-arrow:insensitive > StIcon:insensitive { + .page-navigation-arrow:insensitive { transition-duration: 100ms; - 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); } - -.page-navigation-arrow:hover > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(83, 86, 98, 0.525); } - -.page-navigation-arrow:active > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(90, 94, 107, 0.525); } + background-color: none; + box-shadow: none; } + .page-navigation-arrow:insensitive:insensitive { + transition-duration: 100ms; + 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); } + .page-navigation-arrow:hover { + transition-duration: 100ms; + color: white; + background-color: rgba(102, 105, 115, 0.545); } + .page-navigation-arrow:active { + transition-duration: 100ms; + color: white; + background-color: rgba(117, 120, 131, 0.545); } /* Workspace pager */ .workspace-thumbnails { @@ -2108,7 +2179,10 @@ StScrollBar { spacing: 6px; padding: 6px; } .workspace-thumbnails .workspace-thumbnail { - border-radius: 3px; } + color: white; + background-color: #3d4251; + border-radius: 4px; + border: 1px solid transparent; } .workspace-thumbnails .placeholder { background-image: url("assets/workspace-placeholder.svg"); background-size: contain; @@ -2116,8 +2190,7 @@ StScrollBar { .workspace-thumbnail-indicator { border: 3px solid #2777ff; - border-radius: 3px; - padding: 0px; } + border-radius: 8px; } .ripple-pointer-location { width: 50px; @@ -2147,8 +2220,6 @@ StScrollBar { color: white; border-radius: 99px; icon-size: 4.36em; } - .user-icon:hover { - color: white; } .user-icon StIcon { background-color: rgba(255, 255, 255, 0.05); border-radius: 99px; @@ -2156,16 +2227,7 @@ StScrollBar { width: 2.725em; height: 2.725em; } .user-icon.user-avatar { - border: 2px white; } - -.user-widget.vertical .user-icon { - icon-size: 6.54em; } - .user-widget.vertical .user-icon StIcon { - padding: 20px; - padding-top: 18px; - padding-bottom: 22px; - width: 5.995em; - height: 5.995em; } + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .lightbox { background-color: black; } @@ -2354,11 +2416,11 @@ StScrollBar { /* Looking Glass */ #LookingGlassDialog { - background-color: #303340; + background-color: rgba(35, 37, 46, 0.95); border-radius: 0 0 16px 16px; + border: 1px solid rgba(238, 238, 236, 0.07); border-top-width: 0; - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; + color: #eeeeec; padding: 6px; spacing: 6px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } @@ -2377,20 +2439,7 @@ StScrollBar { #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 12px; - font-weight: bold; - padding: 6px 12px; - color: #d9d9d9; - transition-duration: 100ms; - box-shadow: none; - border: none; - border-radius: 6px; - background-color: transparent; } - #LookingGlassDialog .notebook-tab:hover { - color: white; - background-color: rgba(255, 255, 255, 0.05); } - #LookingGlassDialog .notebook-tab:selected { - color: white; - background-color: rgba(255, 255, 255, 0.1); } + padding: 6px 12px; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 6px; @@ -2400,12 +2449,7 @@ StScrollBar { padding: 6px; } .lg-dialog StEntry { - background-color: rgba(59, 63, 78, 0.6); - color: white; - border-color: rgba(255, 255, 255, 0.2); - min-height: 22px; - selection-background-color: #2777ff; - selected-color: #ffffff; } + min-height: 22px; } .lg-dialog .shell-link { color: #8db7ff; } @@ -2430,11 +2474,11 @@ StScrollBar { spacing: 6px; } .lg-obj-inspector-button { - border: 1px solid black; + border: 1px solid #0d0e11; padding: 4px; border-radius: 8px; } .lg-obj-inspector-button:hover { - border: 1px solid #ffffff; } + border: 1px solid #eeeeec; } #lookingGlassExtensions { padding: 6px; } @@ -2445,38 +2489,37 @@ StScrollBar { .lg-extension { padding: 12px; - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; } - .lg-extension:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #303b50; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .lg-extension:focus:hover { - background-color: #364158; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .lg-extension:focus:active { - background-color: #3c4860; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + background-color: #35373f; } .lg-extension:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .lg-extension:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .lg-extension:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #343d52; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .lg-extension:focus:hover { + background-color: #3a445a; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .lg-extension:focus:active { + background-color: #404a61; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { - background: #303340; - border: 1px solid black; + background: #23252e; + border: 1px solid #0d0e11; border-radius: 8px; padding: 6px; } @@ -2493,100 +2536,31 @@ StScrollBar { padding-top: 12px; padding: 6px; } -/* Login Dialog */ -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; } +.login-dialog .caps-lock-warning-label, +.login-dialog .login-dialog-message-warning, +.unlock-dialog .caps-lock-warning-label, +.unlock-dialog .login-dialog-message-warning { + color: white; } -.login-dialog, -.unlock-dialog { - border: none; - background-color: transparent; } - .login-dialog .modal-dialog-button-box, - .unlock-dialog .modal-dialog-button-box { - spacing: 3px; } - .login-dialog .modal-dialog-button, - .unlock-dialog .modal-dialog-button { - padding: 4px 18px; - background-color: #20232b; - border-color: #20232b; - color: white; } - .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, - .unlock-dialog .modal-dialog-button:hover, - .unlock-dialog .modal-dialog-button:focus { - background-color: #323643; - border-color: #323643; } - .login-dialog .modal-dialog-button:active, - .unlock-dialog .modal-dialog-button:active { - background-color: #1c1e25; - border-color: #1c1e25; } - .login-dialog .modal-dialog-button:insensitive, - .unlock-dialog .modal-dialog-button:insensitive { - transition-duration: 100ms; - 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 { - transition-duration: 100ms; - background-color: #2777ff; - color: #ffffff; - box-shadow: none; } - .login-dialog .modal-dialog-button:default:focus, - .unlock-dialog .modal-dialog-button:default:focus { - box-shadow: inset 0 0 0 2px #5a97ff; } - .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 { - background-color: #4187ff; - color: white; } - .login-dialog .modal-dialog-button:default:active, - .unlock-dialog .modal-dialog-button:default:active { - background-color: #0361ff; - color: #ededed; } - .login-dialog .modal-dialog-button:default:insensitive, - .unlock-dialog .modal-dialog-button:default:insensitive { - transition-duration: 100ms; - 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, - .unlock-dialog .cancel-button, - .unlock-dialog .switch-user-button, - .unlock-dialog .login-dialog-session-list-button { - padding: 0; - border-radius: 99px; - width: 2.18em; - height: 2.18em; - border-color: #20232b; - background-color: #20232b; } - .login-dialog .cancel-button StIcon, - .login-dialog .switch-user-button StIcon, - .login-dialog .login-dialog-session-list-button StIcon, - .unlock-dialog .cancel-button StIcon, - .unlock-dialog .switch-user-button StIcon, - .unlock-dialog .login-dialog-session-list-button StIcon { - icon-size: 1.09em; } - .login-dialog .caps-lock-warning-label, - .login-dialog .login-dialog-message-warning, - .unlock-dialog .caps-lock-warning-label, - .unlock-dialog .login-dialog-message-warning { - color: white; } +/* Login Dialog */ +.login-dialog { + background-color: #272a34; } + +.login-dialog-button.cancel-button { + padding: 9px; } + +.login-dialog-button-box { + width: 23em; + spacing: 12px; } .login-dialog-logo-bin { - padding: 24px 0px; } + margin: 3em 0; } .login-dialog-banner { color: #e6e6e6; } -.login-dialog-button-box { - width: 23em; - spacing: 5px; } +.login-dialog-banner-view { + max-width: 23em; } .login-dialog-message { text-align: center; } @@ -2595,14 +2569,14 @@ StScrollBar { padding: 100px 0px; } .login-dialog-not-listed-label { - padding-left: 2px; } - .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { - color: white; } - -.login-dialog-not-listed-label { + font-size: 10pt; font-weight: bold; color: #b3b3b3; - padding-top: 1em; } + padding: 12px; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { + color: white; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label { + text-decoration: underline; } .login-dialog-auth-list-view { -st-vfade-offset: 1em; } @@ -2615,8 +2589,8 @@ StScrollBar { margin-left: 2em; } .login-dialog-auth-list-item { - border-radius: 12px; - padding: 6px; + border-radius: 16px; + padding: 4px; color: #b3b3b3; } .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { background-color: #2777ff; @@ -2639,102 +2613,68 @@ StScrollBar { .login-dialog-user-list { spacing: 12px; width: 23em; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { - background-color: #2777ff; - color: #ffffff; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { - border-right: 2px solid #2777ff; } - -.login-dialog-user-list-item { - border-radius: 12px; - padding: 6px; - color: #b3b3b3; } - .login-dialog-user-list-item:ltr .user-widget { - padding-right: 1em; } - .login-dialog-user-list-item:rtl .user-widget { - padding-left: 1em; } - .login-dialog-user-list-item .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: white; } - .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: #ffffff; } - -.user-widget-label { - color: white; } - -.user-widget.horizontal .user-widget-label { - font-size: 12pt; - font-weight: bold; - padding-left: 15px; } - .user-widget.horizontal .user-widget-label:ltr { - padding-left: 14px; - text-align: left; } - .user-widget.horizontal .user-widget-label:rtl { - padding-right: 14px; - text-align: right; } - -.user-widget.vertical .user-widget-label { - font-size: 15pt; - text-align: center; - font-weight: normal; - padding-top: 16px; } - -.login-dialog-timed-login-indicator { - height: 2px; - background-color: #8e8e80; } + .login-dialog-user-list .login-dialog-user-list-item { + border-radius: 12px; + padding: 6px; + background-color: rgba(255, 255, 255, 0.05); + color: white; } + .login-dialog-user-list .login-dialog-user-list-item .user-widget .user-icon { + border: 4px solid transparent; } + .login-dialog-user-list .login-dialog-user-list-item .login-dialog-timed-login-indicator { + height: 2px; + margin-top: 6px; + background-color: #b3b3b3; } + .login-dialog-user-list .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { + background-color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item { + transition-duration: 300ms; + transition-timing-function: ease; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { + background-color: #2777ff; + color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected:hover { + background-color: #4187ff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in .user-widget .user-icon { + border-color: #2777ff; } .login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; spacing: 12px; - width: 23em; } - -.login-dialog-prompt-entry { - height: 1.5em; } - -.login-dialog-prompt-label { - color: #cccccc; - font-size: 11pt; - 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); } + width: 26em; } /* Screen Shield */ +.unlock-dialog { + background-color: transparent; } + +.screen-shield-background { + background: black; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } + +#lockDialogGroup { + background-color: #272a34; } + .unlock-dialog-clock { color: white; - font-weight: 300; - text-align: center; - spacing: 24px; - padding-bottom: 2.5em; } + spacing: 2em; } + .unlock-dialog-clock .unlock-dialog-clock-time { + font-size: 72pt; + font-weight: 200; } + .unlock-dialog-clock .unlock-dialog-clock-date { + font-weight: 400; } + .unlock-dialog-clock .unlock-dialog-clock-hint { + margin-top: 2em; + padding: 6px 18px; + border-radius: 16px; + font-weight: bold; } -.unlock-dialog-clock-time { - font-size: 64pt; - padding-top: 42px; } - -.unlock-dialog-clock-date { - font-size: 16pt; - font-weight: normal; } - -.unlock-dialog-clock-hint { - font-weight: normal; - padding-top: 48px; } +#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { + background-color: rgba(35, 37, 46, 0.3); } + #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { + background-color: rgba(35, 37, 46, 0.5); } + #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { + background-color: rgba(39, 119, 255, 0.5); } .unlock-dialog-notifications-container { margin: 12px; @@ -2769,19 +2709,33 @@ StScrollBar { background-color: rgba(255, 255, 255, 0.1); border-radius: 99px; } -.screen-shield-background { - background: black; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } +.user-widget .user-widget-label { + color: white; } -#lockDialogGroup { - background-color: #272a34; } +.user-widget.horizontal { + spacing: 18px; } + .user-widget.horizontal .user-icon StIcon { + padding: 12px; + icon-size: 2.18em; + width: 3.27em; + height: 3.27em; + background-color: rgba(255, 255, 255, 0.1); } -#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { - background-color: rgba(35, 37, 46, 0.3); } - #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { - background-color: rgba(35, 37, 46, 0.5); } - #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { - background-color: rgba(39, 119, 255, 0.5); } +.user-widget.vertical { + spacing: 24px; } + .user-widget.vertical .user-widget-label { + text-align: center; + margin-bottom: .75em; } + .user-widget.vertical .user-icon { + icon-size: 10.9em; } + .user-widget.vertical .user-icon StIcon { + padding: 32px; + icon-size: 4.36em; + background-color: rgba(255, 255, 255, 0.1); } + +.workspace-thumbnails .workspace-thumbnail, .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .dash-background, .dash-separator, .search-section-content, .search-entry { + background-color: rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .icon-dropshadow { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } @@ -2878,7 +2832,6 @@ StScrollBar { color: black; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; - background-color: rgba(255, 255, 255, 0.1); font-size: 1.1em; transition-duration: 200ms; } .search-entry StLabel.hint-text { @@ -2902,10 +2855,6 @@ StScrollBar { color: white; icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } -.search-section-content { - background-color: rgba(255, 255, 255, 0.1); - border: none; } - .search-provider-icon .list-search-provider-details { font-weight: bold; } @@ -2918,13 +2867,40 @@ StScrollBar { #dash StIcon { icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } -.dash-background, .dash-separator { - background: rgba(255, 255, 255, 0.1); } - /* App Grid */ -.app-well-app, .grid-search-result { +#overview { color: white; } +.app-well-app.app-folder, .app-folder.grid-search-result { + transition-duration: 400ms; } + .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.07); } + .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 { background: black; - box-shadow: 0 0 20px #030303; } + box-shadow: 0 0 100px #0a0a0a; } + .app-folder-dialog .folder-name-container .folder-name-entry { + color: white; } + +/* Workspace pager */ +.workspace-thumbnail-indicator { + border: 2px solid white; } diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index b8e1c8ef..4b620ef4 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -30,10 +30,6 @@ stage { border-radius: 999px; padding: 12px; } -.workspace-thumbnails .workspace-thumbnail { - color: white; - background-color: rgba(255, 255, 255, 0.1); } - .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; @@ -42,102 +38,112 @@ stage { transition-duration: 200ms; text-align: center; } -.modal-dialog { - color: #5c616c; - background-color: #ffffff; - border-radius: 11px; - border: 1px solid rgba(255, 255, 255, 0.8); } - -#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 6px; +#LookingGlassDialog .notebook-tab, #LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 8px; border-style: solid; border-width: 1px; font-weight: bold; padding: 3px 24px; transition-duration: 100ms; color: #5c616c; - background-color: #f7f7f8; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #f0f1f2; } + #LookingGlassDialog .notebook-tab:focus, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus, .login-dialog-button:focus, .icon-button:focus, .background-app-item .close-button:focus { transition-duration: 100ms; color: #5c616c; - background-color: #e2eaf9; + background-color: #dce5f3; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { + #LookingGlassDialog .notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover, .login-dialog-button:focus:hover, .icon-button:focus:hover, .background-app-item .close-button:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + #LookingGlassDialog .notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active, .login-dialog-button:focus:active, .icon-button:focus:active, .background-app-item .close-button:focus:active { background-color: #e9f1ff; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog .notebook-tab:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover, .login-dialog-button:hover, .icon-button:hover, .background-app-item .close-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { + background-color: #f8f9f9; } + #LookingGlassDialog .notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive, .login-dialog-button:insensitive, .icon-button:insensitive, .background-app-item .close-button:insensitive { transition-duration: 100ms; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + #LookingGlassDialog .notebook-tab:selected, #LookingGlassDialog > #Toolbar .lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .edit-folder-button:selected, .button:selected, .login-dialog-button:selected, .icon-button:selected, .background-app-item .close-button:selected, #LookingGlassDialog .notebook-tab:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active, .login-dialog-button:active, .icon-button:active, .background-app-item .close-button:active { transition-duration: 100ms; color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { + #LookingGlassDialog .notebook-tab:checked, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked, .login-dialog-button:checked, .icon-button:checked, .background-app-item .close-button:checked { transition-duration: 100ms; color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { + #LookingGlassDialog .notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover, .login-dialog-button:checked:hover, .icon-button:checked:hover, .background-app-item .close-button:checked:hover { background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { + #LookingGlassDialog .notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active, .login-dialog-button:checked:active, .icon-button:checked:active, .background-app-item .close-button:checked:active { background-color: white; } + #LookingGlassDialog .flat.notebook-tab, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button, .app-folder-dialog .folder-name-container .flat.edit-folder-button, .flat.button, .flat.login-dialog-button, .flat.icon-button, .background-app-item .flat.close-button { + transition-duration: 100ms; + color: #5c616c; + background-color: #f0f1f2; + background-color: transparent; } + #LookingGlassDialog .flat.notebook-tab:focus, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus, .flat.button:focus, .flat.login-dialog-button:focus, .flat.icon-button:focus, .background-app-item .flat.close-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:hover, .flat.button:focus:hover, .flat.login-dialog-button:focus:hover, .flat.icon-button:focus:hover, .background-app-item .flat.close-button:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:active, .flat.button:focus:active, .flat.login-dialog-button:focus:active, .flat.icon-button:focus:active, .background-app-item .flat.close-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:hover, .flat.button:hover, .flat.login-dialog-button:hover, .flat.icon-button:hover, .background-app-item .flat.close-button:hover { + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } + #LookingGlassDialog .flat.notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .flat.edit-folder-button:insensitive, .flat.button:insensitive, .flat.login-dialog-button:insensitive, .flat.icon-button:insensitive, .background-app-item .flat.close-button:insensitive { + transition-duration: 100ms; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } + #LookingGlassDialog .flat.notebook-tab:selected, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .flat.edit-folder-button:selected, .flat.button:selected, .flat.login-dialog-button:selected, .flat.icon-button:selected, .background-app-item .flat.close-button:selected, #LookingGlassDialog .flat.notebook-tab:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:active, .flat.button:active, .flat.login-dialog-button:active, .flat.icon-button:active, .background-app-item .flat.close-button:active { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + #LookingGlassDialog .flat.notebook-tab:checked, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked, .flat.button:checked, .flat.login-dialog-button:checked, .flat.icon-button:checked, .background-app-item .flat.close-button:checked { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + #LookingGlassDialog .flat.notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:hover, .flat.button:checked:hover, .flat.login-dialog-button:checked:hover, .flat.icon-button:checked:hover, .background-app-item .flat.close-button:checked:hover { + background-color: white; } + #LookingGlassDialog .flat.notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:active, .flat.button:checked:active, .flat.login-dialog-button:checked:active, .flat.icon-button:checked:active, .background-app-item .flat.close-button:checked:active { + background-color: white; } -.icon-button { - border-radius: 99px; - border-style: solid; - border-width: 1px; - font-weight: bold; - padding: 12px; - transition-duration: 100ms; +.lg-dialog StEntry, StEntry { + border-radius: 8px; + padding: 9px 9px; color: #5c616c; - background-color: #f7f7f8; } - .icon-button:focus { + selection-background-color: #2777ff; + selected-color: #ffffff; + transition-duration: 100ms; + background-color: rgba(92, 97, 108, 0.1); + color: rgba(92, 97, 108, 0.7); } + StEntry:hover { transition-duration: 100ms; - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .icon-button:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .icon-button:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .icon-button:hover { + background-color: rgba(92, 97, 108, 0.2); + color: inherit; } + StEntry:focus { transition-duration: 100ms; - color: #5c616c; - background-color: white; } - .icon-button:insensitive { + background-color: rgba(75, 104, 155, 0.24); + box-shadow: inset 0 0 0 2px #2777ff; + color: #5c616c; } + StEntry:insensitive { transition-duration: 100ms; - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); } - .icon-button:active { - transition-duration: 100ms; - color: #5c616c; - background-color: white; } - .icon-button:checked { - transition-duration: 100ms; - color: #5c616c; - background-color: white; } - .icon-button:checked:hover { - background-color: white; } - .icon-button:checked:active { - background-color: white; } - .icon-button > StIcon { - icon-size: 1.09em; } + background-color: rgba(174, 176, 182, 0.2); + color: #aeb0b6; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; transition-duration: 100ms; color: #5c616c; - background-color: #dadadb; } + background-color: #e0e1e2; } .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { margin-right: 1px; } .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { @@ -149,42 +155,42 @@ stage { .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { transition-duration: 100ms; color: #5c616c; - background-color: #c8d0df; + background-color: #ced6e5; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { - background-color: #cfd7e5; + background-color: #d5ddec; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - background-color: #d6deec; + background-color: #dce4f2; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #e2e2e3; } + background-color: #e8e9e9; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #eaeaea; } + background-color: #f8f8f8; } .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { transition-duration: 100ms; color: #5c616c; - background-color: #f1f1f2; } + background-color: #f8f8f8; } .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { - background-color: #f9f9f9; } + background-color: white; } .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; } + border-radius: 0 0 0 16px; } .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; + border-radius: 0 0 16px; 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; } + border-radius: 0 0 16px; } .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; + border-radius: 0 0 0 16px; margin-left: 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 10px 10px !important; + border-radius: 0 0 16px 16px; margin-left: 0 !important; margin-right: 0 !important; } @@ -213,33 +219,41 @@ stage { .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { transition-duration: 100ms; color: white; - background-color: #38445b; + background-color: #3f4b62; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { - background-color: #3e4a63; + background-color: #45516a; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { - background-color: #44516b; + background-color: #4c5872; box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { transition-duration: 100ms; color: white; - background-color: #414552; } + background-color: #494d59; } .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { transition-duration: 100ms; color: white; - background-color: #484c5a; } + background-color: #575c6a; } .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { transition-duration: 100ms; color: white; - background-color: #4e5463; } + background-color: #575c6a; } .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: #555b6b; } + background-color: #5d6373; } .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: #5c6274; } + background-color: #646a7b; } + +.dash-label, .window-caption { + background-color: #303340; + color: white; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 99px; + padding: 6px 12px; + text-align: center; } /* General Typography */ -.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { +.user-widget.vertical .user-widget-label, .unlock-dialog-clock .unlock-dialog-clock-date, .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { font-weight: 800; font-size: 20pt; } @@ -247,15 +261,15 @@ stage { font-weight: 800; font-size: 15pt; } -.quick-toggle-menu .header .title { +.user-widget.horizontal .user-widget-label, .quick-toggle-menu .header .title { font-weight: 700; font-size: 15pt; } -.message-dialog-content .message-dialog-title.lightweight, .headline { +.bt-menu-placeholder, .message-dialog-content .message-dialog-title.lightweight, .headline { font-weight: 700; font-size: 13pt; } -.lg-extension-name, .osd-window, .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 { +.lg-extension-name, .background-app-item .title, .osd-window, .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; } @@ -263,7 +277,7 @@ stage { 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, +.lg-completions-text, .caps-lock-warning-label, #dash, .background-app-item .subtitle, .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; @@ -273,7 +287,7 @@ stage { 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 { +.unlock-dialog-clock .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 */ @@ -289,42 +303,31 @@ stage { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } /* Entries */ -StEntry { - border-radius: 8px; - padding: 8px; - color: #5c616c; - 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 { - background-color: #f4f8ff; - border-color: #2777ff; - color: #5c616c; } - StEntry:insensitive { - background-color: white; - border-color: white; - color: #aeb0b6; } - StEntry StIcon.capslock-warning { - icon-size: 16px; - warning-color: #fd7d00; - padding: 0 4px; } - StEntry StIcon.peek-password { - icon-size: 1.09em; - padding: 0 4px; } - StEntry StLabel.hint-text { - margin-left: 2px; - color: rgba(92, 97, 108, 0.7); } +StEntry StIcon.capslock-warning { + icon-size: 1.09em; + warning-color: #fd7d00; + padding: 0 4px; } + +StEntry StIcon.peek-password { + icon-size: 1.09em; + padding: 0 4px; } + +StEntry StLabel.hint-text { + margin-left: 2px; + color: rgba(92, 97, 108, 0.7); } /* Buttons */ -.button { +.button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { min-height: 22px; } +.icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 99px; + padding: 12px; + min-height: 16px; } + .icon-button StIcon, .login-dialog-button.cancel-button StIcon, .login-dialog-button.switch-user-button StIcon, .login-dialog-button.login-dialog-session-list-button StIcon, .background-app-item .close-button StIcon { + icon-size: 1.09em; + -st-icon-style: symbolic; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } @@ -405,40 +408,50 @@ StScrollBar { .popup-menu-content, .candidate-popup-content { padding: 6px; + background-color: #ffffff; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.8); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); - background-color: #ffffff; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .popup-menu-item { - padding: 9px 12px; - border-radius: 12px; + font-weight: normal; spacing: 6px; transition-duration: 100ms; - background-color: transparent; } + padding: 9px 12px; + transition-duration: 100ms; + background-color: transparent; + background-color: none; + box-shadow: none; + box-shadow: none !important; + border-radius: 12px; } .popup-menu-item:ltr { padding-left: 6px; } .popup-menu-item:rtl { padding-right: 6px; } - .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #f2f2f2 !important; } - .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #ededed !important; } - .popup-menu-item:checked { - background-color: #e8e8e8 !important; } - .popup-menu-item:checked { - margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #dbdbdb; - border-radius: 8px 8px 0 0; } - .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: #f0f0f0 !important; } - .popup-menu-item:checked:active { - background-color: whitesmoke !important; } - .popup-menu-item:active { - background-color: #fafafa; - color: #50555e; } .popup-menu-item:insensitive { - color: rgba(92, 97, 108, 0.5); } + transition-duration: 100ms; + 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); } + .popup-menu-item:focus, .popup-menu-item:hover { + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } + .popup-menu-item:active { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-menu-item:checked { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-menu-item:checked:hover { + background-color: white; } + .popup-menu-item:checked:active { + background-color: white; } + .popup-menu-item:checked { + border-radius: 12px 12px 0 0 !important; } .popup-menu-item .toggle-switch:ltr { margin-left: 4px; } .popup-menu-item .toggle-switch:rtl { @@ -454,27 +467,47 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #e8e8e8; - border-radius: 0 0 8px 8px; } + border-radius: 0 0 13px 13px; + margin-bottom: 6px; } .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; } + font-weight: normal; + spacing: 6px; + transition-duration: 100ms; + padding: 9px 12px; + transition-duration: 100ms; + color: #5c616c; + background-color: #f0f1f2; + border-top-width: 0; } + .popup-sub-menu .popup-menu-item:ltr { + padding-left: 6px; } + .popup-sub-menu .popup-menu-item:rtl { + padding-right: 6px; } .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { - background-color: #f2f2f2 !important; } - .popup-sub-menu .popup-menu-item:checked { - background-color: #e8e8e8 !important; } - .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: #fcfcfc !important; } + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } .popup-sub-menu .popup-menu-item:active { - background-color: #ededed !important; } + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-sub-menu .popup-menu-item:checked { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-sub-menu .popup-menu-item:checked:hover { + background-color: white; } + .popup-sub-menu .popup-menu-item:checked:active { + background-color: white; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 12px 12px; + border-bottom-width: 0; } .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; } + border-radius: 0 0 12px 12px; } .popup-menu-ornament { width: 1.2em; @@ -485,12 +518,7 @@ StScrollBar { text-align: left; } .popup-separator-menu-item { - margin: 6px 0; - padding: 0 !important; } - .popup-separator-menu-item:ltr { - margin-right: 4px; } - .popup-separator-menu-item:rtl { - margin-left: 4px; } + border: none !important; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #d9d9d9; } @@ -503,7 +531,7 @@ StScrollBar { .popup-sub-menu .popup-separator-menu-item:rtl { margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - background-color: #ebebeb; } + background-color: #d9d9d9; } .background-menu { -boxpointer-gap: 0px; @@ -533,9 +561,8 @@ StScrollBar { /* today button (the date) */ .datemenu-today-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -548,31 +575,30 @@ StScrollBar { background-color: rgba(92, 97, 108, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .datemenu-today-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .datemenu-today-button:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .datemenu-today-button:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .datemenu-today-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .datemenu-today-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .datemenu-today-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .datemenu-today-button:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .datemenu-today-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } /* Calendar */ .calendar { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -585,37 +611,36 @@ StScrollBar { background-color: rgba(92, 97, 108, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .calendar:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .calendar:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .calendar:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .calendar:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .calendar:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .calendar:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .calendar:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .calendar:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } .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; margin: 2px; - border-radius: 6px; } + border-radius: 8px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { background-color: #f2f2f2; } .calendar .calendar-month-header .pager-button:active { @@ -643,7 +668,9 @@ StScrollBar { color: #aeb0b6; padding-top: 6px; height: 16px !important; - font-weight: bold; } + font-weight: 600; } + .calendar .calendar-day { + font-weight: 600; } .calendar .calendar-nonwork-day { color: #aeb0b6; } .calendar .calendar-other-month-day { @@ -673,37 +700,36 @@ StScrollBar { margin: 6px; padding: 0 6px; border-radius: 3px; - background-color: #fafafa; + background-color: rgba(92, 97, 108, 0.1); color: #aeb0b6; } /* Events */ .events-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; + background-color: #f0f1f2; padding: 12px; } - .events-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .events-button:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .events-button:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .events-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .events-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .events-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .events-button:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .events-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .events-button .events-box { spacing: 6px; } .events-button .events-list { @@ -716,32 +742,31 @@ StScrollBar { /* World clocks */ .world-clocks-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; + background-color: #f0f1f2; padding: 12px; } - .world-clocks-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .world-clocks-button:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .world-clocks-button:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .world-clocks-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .world-clocks-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .world-clocks-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .world-clocks-button:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .world-clocks-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } @@ -760,32 +785,31 @@ StScrollBar { /* Weather */ .weather-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; + background-color: #f0f1f2; padding: 12px; } - .weather-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .weather-button:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .weather-button:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .weather-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .weather-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .weather-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .weather-button:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .weather-button:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { @@ -850,31 +874,30 @@ StScrollBar { border-color: rgba(39, 119, 255, 0.6); } .message { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; } - .message:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .message:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .message:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + background-color: #f0f1f2; } .message:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .message:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .message:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .message:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .message:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .message .message-icon-bin { padding: 18px; } .message .message-icon-bin:ltr { @@ -1058,10 +1081,14 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog { + background-color: #ffffff; + border-radius: 16px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); } + .modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -1235,8 +1262,8 @@ StScrollBar { spacing: 24px; } .switcher-list { - padding: 10px; - border-radius: 24px; + padding: 12px; + border-radius: 28px; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } .switcher-list .switcher-list-item-container { spacing: 12px; } @@ -1588,28 +1615,29 @@ StScrollBar { .quick-settings { padding: 18px; border-radius: 36px; } - .quick-settings .icon-button, .quick-settings .button { + .quick-settings .icon-button, .quick-settings .background-app-item .close-button, .background-app-item .quick-settings .close-button, .quick-settings .button, .quick-settings .login-dialog-button { padding: 10.5px; } .quick-settings-grid { spacing-rows: 12px; spacing-columns: 12px; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; - min-height: 40px; - border: none; + min-height: 48px; + border: none; } + +.quick-toggle { /* Move padding into the box; this is to allow menu arrows to extend to the border */ } .quick-toggle:checked { transition-duration: 100ms; background-color: #2777ff; - color: #ffffff; - box-shadow: none; } + color: #ffffff; } .quick-toggle:checked:focus { - box-shadow: inset 0 0 0 2px #5a97ff; } + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } .quick-toggle:checked:hover, .quick-toggle:checked:focus { background-color: #4187ff; color: white; } @@ -1623,8 +1651,8 @@ StScrollBar { background-color: rgba(39, 119, 255, 0.5); color: rgba(255, 255, 255, 0.5); } .quick-toggle > StBoxLayout { - spacing: 6px; } - .quick-toggle.button { + spacing: 9px; } + .quick-toggle.button, .quick-toggle.login-dialog-button, .quick-toggle.icon-button, .background-app-item .quick-toggle.close-button { padding: 0; } .quick-toggle > StBoxLayout { padding: 0 12px; } @@ -1632,54 +1660,105 @@ StScrollBar { padding-left: 15px; } .quick-toggle:rtl > StBoxLayout { padding-right: 15px; } - .quick-toggle .quick-toggle-label { + .quick-toggle .quick-toggle-title { font-weight: bold; } - .quick-toggle .quick-toggle-icon, .quick-toggle .quick-toggle-arrow { + .quick-toggle StBoxLayout > .quick-toggle-subtitle { + font-weight: normal; + font-size: 12px; } + .quick-toggle .quick-toggle-icon { icon-size: 1.09em; } -.quick-menu-toggle:ltr > StBoxLayout { - padding-right: 0; } - -.quick-menu-toggle:rtl > StBoxLayout { - padding-left: 0; } +.quick-menu-toggle .quick-toggle { + min-width: auto; + max-width: auto; } + .quick-menu-toggle .quick-toggle:ltr { + border-radius: 99px 0 0 99px; } + .quick-menu-toggle .quick-toggle:rtl { + border-radius: 0 99px 99px 0; } + .quick-menu-toggle .quick-toggle:ltr:last-child { + border-radius: 99px; } + .quick-menu-toggle .quick-toggle:rtl:last-child { + border-radius: 99px; } .quick-menu-toggle .quick-toggle-arrow { - background-color: rgba(92, 97, 108, 0.1); - padding: 6px 10.5px; } - .quick-menu-toggle .quick-toggle-arrow:ltr { - border-radius: 0 99px 99px 0; } - .quick-menu-toggle .quick-toggle-arrow:rtl { - border-radius: 99px 0 0 99px; } - -.quick-slider { - padding: 0 6px; } - .quick-slider > StBoxLayout { - spacing: 6px; } - .quick-slider .slider-bin { - min-height: 16px; - padding: 6px; - border-radius: 99px; } - .quick-slider .slider-bin:focus { + padding: 6px 10.5px; + border-width: 0; } + .quick-menu-toggle .quick-toggle-arrow:checked { + transition-duration: 100ms; + background-color: #2777ff; + color: #ffffff; + border-color: #0051da; } + .quick-menu-toggle .quick-toggle-arrow:checked:focus { + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } + .quick-menu-toggle .quick-toggle-arrow:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:focus { + background-color: #4187ff; + color: white; } + .quick-menu-toggle .quick-toggle-arrow:checked:active { + background-color: #0361ff; + color: #ededed; } + .quick-menu-toggle .quick-toggle-arrow:checked:insensitive { transition-duration: 100ms; - color: #5c616c; - background-color: #e2eaf9; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .quick-slider .slider-bin:focus:hover { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .quick-slider .slider-bin:focus:active { - background-color: #e9f1ff; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .quick-slider .quick-toggle-icon { - icon-size: 1.09em; } - .quick-slider .icon-button { - background-color: transparent; } + 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); } + .quick-menu-toggle .quick-toggle-arrow:ltr { + border-radius: 0 99px 99px 0; + border-left-width: 1px; } + .quick-menu-toggle .quick-toggle-arrow:rtl { + border-radius: 99px 0 0 99px; + border-right-width: 1px; } + +.quick-slider > StBoxLayout { + spacing: 6px; } + +.quick-slider .icon-button, .quick-slider .login-dialog-button.cancel-button, .quick-slider .login-dialog-button.switch-user-button, .quick-slider .login-dialog-button.login-dialog-session-list-button, .quick-slider .background-app-item .close-button, .background-app-item .quick-slider .close-button { + padding: 6px; } + +.quick-slider .slider-bin { + min-height: 16px; + padding: 6px; + border-radius: 99px; } + .quick-slider .slider-bin:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .quick-slider .slider-bin:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .quick-slider .slider-bin:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .quick-toggle-menu { - background-color: #f2f2f2; + border-radius: 12px; + margin: 4px; + transition-duration: 100ms; + color: #5c616c; + background-color: #f0f1f2; border-radius: 24px; padding: 12px; margin: 12px 18px 0; } + .quick-toggle-menu:hover { + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } + .quick-toggle-menu:active { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .quick-toggle-menu:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .quick-toggle-menu:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .quick-toggle-menu:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .quick-toggle-menu .popup-menu-item > StIcon { -st-icon-style: symbolic; } .quick-toggle-menu .header { @@ -1690,28 +1769,51 @@ StScrollBar { icon-size: 1.635em; border-radius: 999px; padding: 9px; - background-color: white; } + background-color: rgba(92, 97, 108, 0.2); } .quick-toggle-menu .header .icon.active { background-color: #2777ff; } .quick-settings-system-item > StBoxLayout { spacing: 12px; } -.quick-settings-system-item .icon-button > StIcon { - -st-icon-style: symbolic; } - .quick-settings-system-item .power-item { min-height: 0; min-width: 0; } .quick-settings-system-item .power-item:insensitive { transition-duration: 100ms; color: #5c616c; - background-color: #f7f7f8; + background-color: #f0f1f2; background-color: transparent; } .nm-network-item .wireless-secure-icon { icon-size: 0.545em; } +.bt-device-item .popup-menu-icon { + -st-icon-style: symbolic; } + +.bt-menu-placeholder { + text-align: center; + padding: 2em 4em; } + +.device-subtitle { + color: rgba(92, 97, 108, 0.5); } + +.background-apps-quick-toggle { + min-height: 40px; + background-color: transparent; } + .background-apps-quick-toggle StIcon { + icon-size: 1.09em !important; } + +.background-app-item .popup-menu-icon { + icon-size: 2.18em !important; + -st-icon-style: regular !important; } + +.background-app-item .close-button { + padding: 6px; } + +.background-app-item.popup-inactive-menu-item { + color: #5c616c; } + /* OVERVIEW */ .controls-manager, .secondary-monitor-workspaces { spacing: 12px; } @@ -1726,12 +1828,6 @@ StScrollBar { .window-picker { spacing: 6px; } -.window-caption { - color: white; - background-color: #3b3f4e; - border-radius: 99px; - padding: 6px 12px; } - .window-close, .screenshot-ui-close-button { background-color: rgba(63, 68, 84, 0.98); color: white; @@ -1753,34 +1849,12 @@ StScrollBar { background-color: rgba(3, 2, 1, 0); box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); } - .search-entry { - border-radius: 18px; + border-radius: 99px; margin-top: 12px; margin-bottom: 6px; - padding: 7px 9px; - width: 320px; - background-color: white; - color: rgba(92, 97, 108, 0.7); - border: 2px solid white; } - - .search-entry:hover { - background-color: white; - border-color: white; - color: rgba(92, 97, 108, 0.7); } - - .search-entry:focus { - background-color: #f4f8ff; - border-color: #2777ff; - color: #5c616c; } - - .search-entry:insensitive { - background-color: white; - border-color: white; - color: #aeb0b6; } - + width: 24em; } .search-entry .search-entry-icon { - color: inherit; icon-size: 1.09em; margin-top: 2px; padding: 0 4px; } @@ -1801,7 +1875,7 @@ StScrollBar { .search-section-content { background-color: #323643; border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px solid rgba(255, 255, 255, 0.8); color: white; padding: 12px; margin: 0 12px; } @@ -1887,7 +1961,8 @@ StScrollBar { margin-right: 0; } .dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { - padding: 6px; } + padding: 6px; + border-radius: 16px; } .dash-item-container .show-apps { transition-duration: 400ms; } @@ -1923,11 +1998,6 @@ StScrollBar { margin-bottom: 12px; } .dash-label { - color: white; - background-color: #303340; - border-radius: 99px; - padding: 6px 12px; - text-align: center; -y-offset: 8px; } /* App Grid */ @@ -1966,43 +2036,47 @@ StScrollBar { border: 2px solid rgba(39, 119, 255, 0.8); background-color: rgba(39, 119, 255, 0.2); } .app-well-app .overview-icon, .grid-search-result .overview-icon { - padding: 12px; } + padding: 12px; + border-radius: 24px; } .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.app-folder, .app-folder.grid-search-result { transition-duration: 400ms; } .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { - background-color: rgba(255, 255, 255, 0.19); } + background-color: rgba(92, 97, 108, 0.07); } .app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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: 32px; - background-color: #323643; } + border-radius: 64px; + background-color: #ffffff; + padding: 12px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); } .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-entry { - width: 300px; } + width: 12em; + border-radius: 16px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } @@ -2054,7 +2128,7 @@ StScrollBar { .system-action-icon { background-color: rgba(0, 0, 0, 0.8); - color: #fff; + color: white; border-radius: 99px; icon-size: 48px; } @@ -2073,34 +2147,31 @@ StScrollBar { background-gradient-direction: horizontal; border-radius: 0px 24px 24px 0px; } -.page-navigation-arrow > StIcon { +.page-navigation-arrow { margin: 6px; padding: 18px; width: 24px; height: 24px; border-radius: 99px; } - -.page-navigation-arrow:insensitive > StIcon { - transition-duration: 100ms; - background-color: transparent; - background-color: none; - box-shadow: none; } - .page-navigation-arrow:insensitive > StIcon:insensitive { + .page-navigation-arrow:insensitive { transition-duration: 100ms; - 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); } - -.page-navigation-arrow:hover > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(83, 86, 98, 0.525); } - -.page-navigation-arrow:active > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(90, 94, 107, 0.525); } + background-color: none; + box-shadow: none; } + .page-navigation-arrow:insensitive:insensitive { + transition-duration: 100ms; + 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); } + .page-navigation-arrow:hover { + transition-duration: 100ms; + color: white; + background-color: rgba(102, 105, 115, 0.545); } + .page-navigation-arrow:active { + transition-duration: 100ms; + color: white; + background-color: rgba(117, 120, 131, 0.545); } /* Workspace pager */ .workspace-thumbnails { @@ -2108,7 +2179,10 @@ StScrollBar { spacing: 6px; padding: 6px; } .workspace-thumbnails .workspace-thumbnail { - border-radius: 3px; } + color: white; + background-color: #3d4251; + border-radius: 4px; + border: 1px solid transparent; } .workspace-thumbnails .placeholder { background-image: url("assets/workspace-placeholder.svg"); background-size: contain; @@ -2116,8 +2190,7 @@ StScrollBar { .workspace-thumbnail-indicator { border: 3px solid #2777ff; - border-radius: 3px; - padding: 0px; } + border-radius: 8px; } .ripple-pointer-location { width: 50px; @@ -2147,8 +2220,6 @@ StScrollBar { color: white; border-radius: 99px; icon-size: 4.36em; } - .user-icon:hover { - color: white; } .user-icon StIcon { background-color: rgba(255, 255, 255, 0.05); border-radius: 99px; @@ -2156,16 +2227,7 @@ StScrollBar { width: 2.725em; height: 2.725em; } .user-icon.user-avatar { - border: 2px white; } - -.user-widget.vertical .user-icon { - icon-size: 6.54em; } - .user-widget.vertical .user-icon StIcon { - padding: 20px; - padding-top: 18px; - padding-bottom: 22px; - width: 5.995em; - height: 5.995em; } + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .lightbox { background-color: black; } @@ -2354,11 +2416,11 @@ StScrollBar { /* Looking Glass */ #LookingGlassDialog { - background-color: #303340; + background-color: rgba(255, 255, 255, 0.95); border-radius: 0 0 16px 16px; + border: 1px solid rgba(255, 255, 255, 0.8); border-top-width: 0; - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; + color: #5c616c; padding: 6px; spacing: 6px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } @@ -2377,20 +2439,7 @@ StScrollBar { #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 12px; - font-weight: bold; - padding: 6px 12px; - color: #d9d9d9; - transition-duration: 100ms; - box-shadow: none; - border: none; - border-radius: 6px; - background-color: transparent; } - #LookingGlassDialog .notebook-tab:hover { - color: white; - background-color: rgba(255, 255, 255, 0.05); } - #LookingGlassDialog .notebook-tab:selected { - color: white; - background-color: rgba(255, 255, 255, 0.1); } + padding: 6px 12px; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 6px; @@ -2400,12 +2449,7 @@ StScrollBar { padding: 6px; } .lg-dialog StEntry { - background-color: rgba(59, 63, 78, 0.6); - color: white; - border-color: rgba(255, 255, 255, 0.2); - min-height: 22px; - selection-background-color: #2777ff; - selected-color: #ffffff; } + min-height: 22px; } .lg-dialog .shell-link { color: #005af3; } @@ -2430,11 +2474,11 @@ StScrollBar { spacing: 6px; } .lg-obj-inspector-button { - border: 1px solid black; + border: 1px solid #d9d9d9; padding: 4px; border-radius: 8px; } .lg-obj-inspector-button:hover { - border: 1px solid #ffffff; } + border: 1px solid #5c616c; } #lookingGlassExtensions { padding: 6px; } @@ -2445,38 +2489,37 @@ StScrollBar { .lg-extension { padding: 12px; - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; } - .lg-extension:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #d7dfee; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } - .lg-extension:focus:hover { - background-color: #dee6f5; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } - .lg-extension:focus:active { - background-color: #e6eefb; - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + background-color: #f0f1f2; } .lg-extension:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .lg-extension:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .lg-extension:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #dce5f3; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6) !important; } + .lg-extension:focus:hover { + background-color: #e3ecfa; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } + .lg-extension:focus:active { + background-color: #e9f1ff; + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7) !important; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { - background: #303340; - border: 1px solid black; + background: #ffffff; + border: 1px solid #d9d9d9; border-radius: 8px; padding: 6px; } @@ -2493,100 +2536,31 @@ StScrollBar { padding-top: 12px; padding: 6px; } -/* Login Dialog */ -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; } +.login-dialog .caps-lock-warning-label, +.login-dialog .login-dialog-message-warning, +.unlock-dialog .caps-lock-warning-label, +.unlock-dialog .login-dialog-message-warning { + color: white; } -.login-dialog, -.unlock-dialog { - border: none; - background-color: transparent; } - .login-dialog .modal-dialog-button-box, - .unlock-dialog .modal-dialog-button-box { - spacing: 3px; } - .login-dialog .modal-dialog-button, - .unlock-dialog .modal-dialog-button { - padding: 4px 18px; - background-color: #20232b; - border-color: #20232b; - color: white; } - .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, - .unlock-dialog .modal-dialog-button:hover, - .unlock-dialog .modal-dialog-button:focus { - background-color: #323643; - border-color: #323643; } - .login-dialog .modal-dialog-button:active, - .unlock-dialog .modal-dialog-button:active { - background-color: #1c1e25; - border-color: #1c1e25; } - .login-dialog .modal-dialog-button:insensitive, - .unlock-dialog .modal-dialog-button:insensitive { - transition-duration: 100ms; - 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 { - transition-duration: 100ms; - background-color: #2777ff; - color: #ffffff; - box-shadow: none; } - .login-dialog .modal-dialog-button:default:focus, - .unlock-dialog .modal-dialog-button:default:focus { - box-shadow: inset 0 0 0 2px #5a97ff; } - .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 { - background-color: #4187ff; - color: white; } - .login-dialog .modal-dialog-button:default:active, - .unlock-dialog .modal-dialog-button:default:active { - background-color: #0361ff; - color: #ededed; } - .login-dialog .modal-dialog-button:default:insensitive, - .unlock-dialog .modal-dialog-button:default:insensitive { - transition-duration: 100ms; - 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, - .unlock-dialog .cancel-button, - .unlock-dialog .switch-user-button, - .unlock-dialog .login-dialog-session-list-button { - padding: 0; - border-radius: 99px; - width: 2.18em; - height: 2.18em; - border-color: #20232b; - background-color: #20232b; } - .login-dialog .cancel-button StIcon, - .login-dialog .switch-user-button StIcon, - .login-dialog .login-dialog-session-list-button StIcon, - .unlock-dialog .cancel-button StIcon, - .unlock-dialog .switch-user-button StIcon, - .unlock-dialog .login-dialog-session-list-button StIcon { - icon-size: 1.09em; } - .login-dialog .caps-lock-warning-label, - .login-dialog .login-dialog-message-warning, - .unlock-dialog .caps-lock-warning-label, - .unlock-dialog .login-dialog-message-warning { - color: white; } +/* Login Dialog */ +.login-dialog { + background-color: #272a34; } + +.login-dialog-button.cancel-button { + padding: 9px; } + +.login-dialog-button-box { + width: 23em; + spacing: 12px; } .login-dialog-logo-bin { - padding: 24px 0px; } + margin: 3em 0; } .login-dialog-banner { color: #e6e6e6; } -.login-dialog-button-box { - width: 23em; - spacing: 5px; } +.login-dialog-banner-view { + max-width: 23em; } .login-dialog-message { text-align: center; } @@ -2595,14 +2569,14 @@ StScrollBar { padding: 100px 0px; } .login-dialog-not-listed-label { - padding-left: 2px; } - .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { - color: white; } - -.login-dialog-not-listed-label { + font-size: 10pt; font-weight: bold; color: #b3b3b3; - padding-top: 1em; } + padding: 12px; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { + color: white; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label { + text-decoration: underline; } .login-dialog-auth-list-view { -st-vfade-offset: 1em; } @@ -2615,8 +2589,8 @@ StScrollBar { margin-left: 2em; } .login-dialog-auth-list-item { - border-radius: 12px; - padding: 6px; + border-radius: 16px; + padding: 4px; color: #b3b3b3; } .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { background-color: #2777ff; @@ -2639,98 +2613,68 @@ StScrollBar { .login-dialog-user-list { spacing: 12px; width: 23em; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { - background-color: #2777ff; - color: #ffffff; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { - border-right: 2px solid #2777ff; } - -.login-dialog-user-list-item { - border-radius: 12px; - padding: 6px; - color: #b3b3b3; } - .login-dialog-user-list-item:ltr .user-widget { - padding-right: 1em; } - .login-dialog-user-list-item:rtl .user-widget { - padding-left: 1em; } - .login-dialog-user-list-item .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: white; } - .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: #ffffff; } - -.user-widget-label { - color: white; } - -.user-widget.horizontal .user-widget-label { - font-size: 12pt; - font-weight: bold; - padding-left: 15px; } - .user-widget.horizontal .user-widget-label:ltr { - padding-left: 14px; - text-align: left; } - .user-widget.horizontal .user-widget-label:rtl { - padding-right: 14px; - text-align: right; } - -.user-widget.vertical .user-widget-label { - font-size: 15pt; - text-align: center; - font-weight: normal; - padding-top: 16px; } - -.login-dialog-timed-login-indicator { - height: 2px; - background-color: black; } + .login-dialog-user-list .login-dialog-user-list-item { + border-radius: 12px; + padding: 6px; + background-color: rgba(255, 255, 255, 0.05); + color: white; } + .login-dialog-user-list .login-dialog-user-list-item .user-widget .user-icon { + border: 4px solid transparent; } + .login-dialog-user-list .login-dialog-user-list-item .login-dialog-timed-login-indicator { + height: 2px; + margin-top: 6px; + background-color: #b3b3b3; } + .login-dialog-user-list .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { + background-color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item { + transition-duration: 300ms; + transition-timing-function: ease; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { + background-color: #2777ff; + color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected:hover { + background-color: #4187ff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in .user-widget .user-icon { + border-color: #2777ff; } .login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; spacing: 12px; - width: 23em; } - -.login-dialog-prompt-entry { - height: 1.5em; } - -.login-dialog-prompt-label { - color: #cccccc; - font-size: 11pt; - 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); } + width: 26em; } /* Screen Shield */ +.unlock-dialog { + background-color: transparent; } + +.screen-shield-background { + background: black; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } + +#lockDialogGroup { + background-color: #272a34; } + .unlock-dialog-clock { color: white; - font-weight: 300; - text-align: center; - spacing: 24px; - padding-bottom: 2.5em; } + spacing: 2em; } + .unlock-dialog-clock .unlock-dialog-clock-time { + font-size: 72pt; + font-weight: 200; } + .unlock-dialog-clock .unlock-dialog-clock-date { + font-weight: 400; } + .unlock-dialog-clock .unlock-dialog-clock-hint { + margin-top: 2em; + padding: 6px 18px; + border-radius: 16px; + font-weight: bold; } -.unlock-dialog-clock-time { - font-size: 64pt; - padding-top: 42px; } - -.unlock-dialog-clock-date { - font-size: 16pt; - font-weight: normal; } - -.unlock-dialog-clock-hint { - font-weight: normal; - padding-top: 48px; } +#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { + background-color: rgba(255, 255, 255, 0.3); } + #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { + background-color: rgba(255, 255, 255, 0.5); } + #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { + background-color: rgba(39, 119, 255, 0.5); } .unlock-dialog-notifications-container { margin: 12px; @@ -2765,19 +2709,33 @@ StScrollBar { background-color: rgba(255, 255, 255, 0.1); border-radius: 99px; } -.screen-shield-background { - background: black; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } +.user-widget .user-widget-label { + color: white; } -#lockDialogGroup { - background-color: #272a34; } +.user-widget.horizontal { + spacing: 18px; } + .user-widget.horizontal .user-icon StIcon { + padding: 12px; + icon-size: 2.18em; + width: 3.27em; + height: 3.27em; + background-color: rgba(255, 255, 255, 0.1); } -#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { - background-color: rgba(255, 255, 255, 0.3); } - #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { - background-color: rgba(255, 255, 255, 0.5); } - #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { - background-color: rgba(39, 119, 255, 0.5); } +.user-widget.vertical { + spacing: 24px; } + .user-widget.vertical .user-widget-label { + text-align: center; + margin-bottom: .75em; } + .user-widget.vertical .user-icon { + icon-size: 10.9em; } + .user-widget.vertical .user-icon StIcon { + padding: 32px; + icon-size: 4.36em; + background-color: rgba(255, 255, 255, 0.1); } + +.workspace-thumbnails .workspace-thumbnail, .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .dash-background, .dash-separator, .search-section-content, .search-entry { + background-color: rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .icon-dropshadow { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } @@ -2874,7 +2832,6 @@ StScrollBar { color: black; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; - background-color: rgba(255, 255, 255, 0.1); font-size: 1.1em; transition-duration: 200ms; } .search-entry StLabel.hint-text { @@ -2898,10 +2855,6 @@ StScrollBar { color: white; icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } -.search-section-content { - background-color: rgba(255, 255, 255, 0.1); - border: none; } - .search-provider-icon .list-search-provider-details { font-weight: bold; } @@ -2914,13 +2867,40 @@ StScrollBar { #dash StIcon { icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } -.dash-background, .dash-separator { - background: rgba(255, 255, 255, 0.1); } - /* App Grid */ -.app-well-app, .grid-search-result { +#overview { color: white; } +.app-well-app.app-folder, .app-folder.grid-search-result { + transition-duration: 400ms; } + .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.07); } + .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 { background: black; - box-shadow: 0 0 20px #030303; } + box-shadow: 0 0 100px #0a0a0a; } + .app-folder-dialog .folder-name-container .folder-name-entry { + color: white; } + +/* Workspace pager */ +.workspace-thumbnail-indicator { + border: 2px solid white; } diff --git a/share/themes/Kali-Purple-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Purple-Dark/gnome-shell/gnome-shell.css index ad044bb6..829091c2 100644 --- a/share/themes/Kali-Purple-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Purple-Dark/gnome-shell/gnome-shell.css @@ -30,10 +30,6 @@ stage { border-radius: 999px; padding: 12px; } -.workspace-thumbnails .workspace-thumbnail { - color: white; - background-color: rgba(255, 255, 255, 0.1); } - .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; @@ -42,102 +38,112 @@ stage { transition-duration: 200ms; text-align: center; } -.modal-dialog { - color: #eeeeec; - background-color: #23252e; - border-radius: 11px; - border: 1px solid rgba(238, 238, 236, 0.07); } - -#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 6px; +#LookingGlassDialog .notebook-tab, #LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 8px; border-style: solid; border-width: 1px; font-weight: bold; padding: 3px 24px; transition-duration: 100ms; color: #eeeeec; - background-color: #2d2f38; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #35373f; } + #LookingGlassDialog .notebook-tab:focus, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus, .login-dialog-button:focus, .icon-button:focus, .background-app-item .close-button:focus { transition-duration: 100ms; color: #eeeeec; - background-color: #392a43; + background-color: #403249; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { - background-color: #3f314a; + #LookingGlassDialog .notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover, .login-dialog-button:focus:hover, .icon-button:focus:hover, .background-app-item .close-button:focus:hover { + background-color: #463851; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { - background-color: #453752; + #LookingGlassDialog .notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active, .login-dialog-button:focus:active, .icon-button:focus:active, .background-app-item .close-button:focus:active { + background-color: #4d3f58; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog .notebook-tab:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover, .login-dialog-button:hover, .icon-button:hover, .background-app-item .close-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #343640; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { + background-color: #3c3e47; } + #LookingGlassDialog .notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive, .login-dialog-button:insensitive, .icon-button:insensitive, .background-app-item .close-button:insensitive { transition-duration: 100ms; color: rgba(238, 238, 236, 0.5); background-color: rgba(238, 238, 236, 0.05); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + #LookingGlassDialog .notebook-tab:selected, #LookingGlassDialog > #Toolbar .lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .edit-folder-button:selected, .button:selected, .login-dialog-button:selected, .icon-button:selected, .background-app-item .close-button:selected, #LookingGlassDialog .notebook-tab:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active, .login-dialog-button:active, .icon-button:active, .background-app-item .close-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3b3d49; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { + background-color: #4a4d58; } + #LookingGlassDialog .notebook-tab:checked, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked, .login-dialog-button:checked, .icon-button:checked, .background-app-item .close-button:checked { transition-duration: 100ms; color: #eeeeec; - background-color: #414451; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { - background-color: #484b5a; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { - background-color: #4f5362; } + background-color: #4a4d58; } + #LookingGlassDialog .notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover, .login-dialog-button:checked:hover, .icon-button:checked:hover, .background-app-item .close-button:checked:hover { + background-color: #515460; } + #LookingGlassDialog .notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active, .login-dialog-button:checked:active, .icon-button:checked:active, .background-app-item .close-button:checked:active { + background-color: #585b69; } + #LookingGlassDialog .flat.notebook-tab, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button, .app-folder-dialog .folder-name-container .flat.edit-folder-button, .flat.button, .flat.login-dialog-button, .flat.icon-button, .background-app-item .flat.close-button { + transition-duration: 100ms; + color: #eeeeec; + background-color: #35373f; + background-color: transparent; } + #LookingGlassDialog .flat.notebook-tab:focus, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus, .flat.button:focus, .flat.login-dialog-button:focus, .flat.icon-button:focus, .background-app-item .flat.close-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:hover, .flat.button:focus:hover, .flat.login-dialog-button:focus:hover, .flat.icon-button:focus:hover, .background-app-item .flat.close-button:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:active, .flat.button:focus:active, .flat.login-dialog-button:focus:active, .flat.icon-button:focus:active, .background-app-item .flat.close-button:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:hover, .flat.button:hover, .flat.login-dialog-button:hover, .flat.icon-button:hover, .background-app-item .flat.close-button:hover { + transition-duration: 100ms; + color: #eeeeec; + background-color: #3c3e47; } + #LookingGlassDialog .flat.notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .flat.edit-folder-button:insensitive, .flat.button:insensitive, .flat.login-dialog-button:insensitive, .flat.icon-button:insensitive, .background-app-item .flat.close-button:insensitive { + transition-duration: 100ms; + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); } + #LookingGlassDialog .flat.notebook-tab:selected, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .flat.edit-folder-button:selected, .flat.button:selected, .flat.login-dialog-button:selected, .flat.icon-button:selected, .background-app-item .flat.close-button:selected, #LookingGlassDialog .flat.notebook-tab:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:active, .flat.button:active, .flat.login-dialog-button:active, .flat.icon-button:active, .background-app-item .flat.close-button:active { + transition-duration: 100ms; + color: #eeeeec; + background-color: #4a4d58; } + #LookingGlassDialog .flat.notebook-tab:checked, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked, .flat.button:checked, .flat.login-dialog-button:checked, .flat.icon-button:checked, .background-app-item .flat.close-button:checked { + transition-duration: 100ms; + color: #eeeeec; + background-color: #4a4d58; } + #LookingGlassDialog .flat.notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:hover, .flat.button:checked:hover, .flat.login-dialog-button:checked:hover, .flat.icon-button:checked:hover, .background-app-item .flat.close-button:checked:hover { + background-color: #515460; } + #LookingGlassDialog .flat.notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:active, .flat.button:checked:active, .flat.login-dialog-button:checked:active, .flat.icon-button:checked:active, .background-app-item .flat.close-button:checked:active { + background-color: #585b69; } -.icon-button { - border-radius: 99px; - border-style: solid; - border-width: 1px; - font-weight: bold; - padding: 12px; - transition-duration: 100ms; +.lg-dialog StEntry, StEntry { + border-radius: 8px; + padding: 9px 9px; color: #eeeeec; - background-color: #2d2f38; } - .icon-button:focus { + selection-background-color: #a400a4; + selected-color: #ffffff; + transition-duration: 100ms; + background-color: rgba(238, 238, 236, 0.1); + color: rgba(238, 238, 236, 0.7); } + StEntry:hover { transition-duration: 100ms; - color: #eeeeec; - background-color: #392a43; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .icon-button:focus:hover { - background-color: #3f314a; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .icon-button:focus:active { - background-color: #453752; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .icon-button:hover { + background-color: rgba(238, 238, 236, 0.2); + color: inherit; } + StEntry:focus { transition-duration: 100ms; - color: #eeeeec; - background-color: #343640; } - .icon-button:insensitive { + background-color: rgba(214, 162, 213, 0.24); + box-shadow: inset 0 0 0 2px #a400a4; + color: #eeeeec; } + StEntry:insensitive { transition-duration: 100ms; - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); } - .icon-button:active { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3b3d49; } - .icon-button:checked { - transition-duration: 100ms; - color: #eeeeec; - background-color: #414451; } - .icon-button:checked:hover { - background-color: #484b5a; } - .icon-button:checked:active { - background-color: #4f5362; } - .icon-button > StIcon { - icon-size: 1.09em; } + background-color: rgba(136, 138, 141, 0.2); + color: #888a8d; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; transition-duration: 100ms; color: #eeeeec; - background-color: #424653; } + background-color: #3f424d; } .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { margin-right: 1px; } .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { @@ -149,42 +155,42 @@ stage { .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { transition-duration: 100ms; color: #eeeeec; - background-color: #4c3f5b; + background-color: #493b56; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { - background-color: #524563; + background-color: #4f425d; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - background-color: #584c6a; + background-color: #554865; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #494d5c; } + background-color: #464955; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #505464; } + background-color: #545866; } .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { transition-duration: 100ms; color: #eeeeec; - background-color: #565c6d; } + background-color: #545866; } .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { - background-color: #5d6375; } + background-color: #5b5f6f; } .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active { - background-color: #646a7e; } + background-color: #616677; } .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; } + border-radius: 0 0 0 16px; } .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; + border-radius: 0 0 16px; 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; } + border-radius: 0 0 16px; } .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; + border-radius: 0 0 0 16px; margin-left: 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 10px 10px !important; + border-radius: 0 0 16px 16px; margin-left: 0 !important; margin-right: 0 !important; } @@ -213,33 +219,41 @@ stage { .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { transition-duration: 100ms; color: white; - background-color: #453852; + background-color: #4c3f59; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { - background-color: #4b3e5a; + background-color: #524661; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { - background-color: #514561; + background-color: #584c68; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { transition-duration: 100ms; color: white; - background-color: #414552; } + background-color: #494d59; } .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { transition-duration: 100ms; color: white; - background-color: #484c5a; } + background-color: #575c6a; } .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { transition-duration: 100ms; color: white; - background-color: #4e5463; } + background-color: #575c6a; } .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: #555b6b; } + background-color: #5d6373; } .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: #5c6274; } + background-color: #646a7b; } + +.dash-label, .window-caption { + background-color: #303340; + color: white; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 99px; + padding: 6px 12px; + text-align: center; } /* General Typography */ -.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { +.user-widget.vertical .user-widget-label, .unlock-dialog-clock .unlock-dialog-clock-date, .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { font-weight: 800; font-size: 20pt; } @@ -247,15 +261,15 @@ stage { font-weight: 800; font-size: 15pt; } -.quick-toggle-menu .header .title { +.user-widget.horizontal .user-widget-label, .quick-toggle-menu .header .title { font-weight: 700; font-size: 15pt; } -.message-dialog-content .message-dialog-title.lightweight, .headline { +.bt-menu-placeholder, .message-dialog-content .message-dialog-title.lightweight, .headline { font-weight: 700; font-size: 13pt; } -.lg-extension-name, .osd-window, .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 { +.lg-extension-name, .background-app-item .title, .osd-window, .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; } @@ -263,7 +277,7 @@ stage { 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, +.lg-completions-text, .caps-lock-warning-label, #dash, .background-app-item .subtitle, .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; @@ -273,7 +287,7 @@ stage { 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 { +.unlock-dialog-clock .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 */ @@ -289,42 +303,31 @@ stage { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } /* Entries */ -StEntry { - border-radius: 8px; - padding: 8px; - color: #eeeeec; - background-color: #2e313d; - color: rgba(238, 238, 236, 0.7); - border: 2px solid #2e313d; - selection-background-color: #a400a4; - selected-color: #ffffff; } - StEntry:hover { - background-color: #3b3f4e; - border-color: #3b3f4e; - color: rgba(238, 238, 236, 0.7); } - StEntry:focus { - background-color: #332f42; - border-color: #a400a4; - color: #eeeeec; } - StEntry:insensitive { - background-color: #2f3340; - border-color: #2f3340; - color: #888a8d; } - StEntry StIcon.capslock-warning { - icon-size: 16px; - warning-color: #fd7d00; - padding: 0 4px; } - StEntry StIcon.peek-password { - icon-size: 1.09em; - padding: 0 4px; } - StEntry StLabel.hint-text { - margin-left: 2px; - color: rgba(238, 238, 236, 0.7); } +StEntry StIcon.capslock-warning { + icon-size: 1.09em; + warning-color: #fd7d00; + padding: 0 4px; } + +StEntry StIcon.peek-password { + icon-size: 1.09em; + padding: 0 4px; } + +StEntry StLabel.hint-text { + margin-left: 2px; + color: rgba(238, 238, 236, 0.7); } /* Buttons */ -.button { +.button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { min-height: 22px; } +.icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 99px; + padding: 12px; + min-height: 16px; } + .icon-button StIcon, .login-dialog-button.cancel-button StIcon, .login-dialog-button.switch-user-button StIcon, .login-dialog-button.login-dialog-session-list-button StIcon, .background-app-item .close-button StIcon { + icon-size: 1.09em; + -st-icon-style: symbolic; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } @@ -405,40 +408,50 @@ StScrollBar { .popup-menu-content, .candidate-popup-content { padding: 6px; + background-color: #23252e; border-radius: 20px; border: 1px solid rgba(238, 238, 236, 0.07); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); - background-color: #23252e; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } .popup-menu-item { - padding: 9px 12px; - border-radius: 12px; + font-weight: normal; spacing: 6px; transition-duration: 100ms; - background-color: transparent; } + padding: 9px 12px; + transition-duration: 100ms; + background-color: transparent; + background-color: none; + box-shadow: none; + box-shadow: none !important; + border-radius: 12px; } .popup-menu-item:ltr { padding-left: 6px; } .popup-menu-item:rtl { padding-right: 6px; } - .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #303340 !important; } - .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #343845 !important; } - .popup-menu-item:checked { - background-color: #3b3f4e !important; } - .popup-menu-item:checked { - margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #303340; - border-radius: 8px 8px 0 0; } - .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: #414657 !important; } - .popup-menu-item:checked:active { - background-color: #464b5d !important; } - .popup-menu-item:active { - background-color: #3f4454; - color: white; } .popup-menu-item:insensitive { - color: rgba(238, 238, 236, 0.5); } + transition-duration: 100ms; + 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); } + .popup-menu-item:focus, .popup-menu-item:hover { + transition-duration: 100ms; + color: #eeeeec; + background-color: #464955; } + .popup-menu-item:active { + transition-duration: 100ms; + color: #eeeeec; + background-color: #545866; } + .popup-menu-item:checked { + transition-duration: 100ms; + color: #eeeeec; + background-color: #545866; } + .popup-menu-item:checked:hover { + background-color: #5b5f6f; } + .popup-menu-item:checked:active { + background-color: #616677; } + .popup-menu-item:checked { + border-radius: 12px 12px 0 0 !important; } .popup-menu-item .toggle-switch:ltr { margin-left: 4px; } .popup-menu-item .toggle-switch:rtl { @@ -454,27 +467,47 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #3b3f4e; - border-radius: 0 0 8px 8px; } + border-radius: 0 0 13px 13px; + margin-bottom: 6px; } .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; } + font-weight: normal; + spacing: 6px; + transition-duration: 100ms; + padding: 9px 12px; + transition-duration: 100ms; + color: #eeeeec; + background-color: #4d515f; + border-top-width: 0; } + .popup-sub-menu .popup-menu-item:ltr { + padding-left: 6px; } + .popup-sub-menu .popup-menu-item:rtl { + padding-right: 6px; } .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { - background-color: #303340 !important; } - .popup-sub-menu .popup-menu-item:checked { - background-color: #3b3f4e !important; } - .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: #4c5266 !important; } + transition-duration: 100ms; + color: #eeeeec; + background-color: #545867; } .popup-sub-menu .popup-menu-item:active { - background-color: #343845 !important; } + transition-duration: 100ms; + color: #eeeeec; + background-color: #626778; } + .popup-sub-menu .popup-menu-item:checked { + transition-duration: 100ms; + color: #eeeeec; + background-color: #626778; } + .popup-sub-menu .popup-menu-item:checked:hover { + background-color: #686e81; } + .popup-sub-menu .popup-menu-item:checked:active { + background-color: #6f7589; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 12px 12px; + border-bottom-width: 0; } .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; } + border-radius: 0 0 12px 12px; } .popup-menu-ornament { width: 1.2em; @@ -485,12 +518,7 @@ StScrollBar { text-align: left; } .popup-separator-menu-item { - margin: 6px 0; - padding: 0 !important; } - .popup-separator-menu-item:ltr { - margin-right: 4px; } - .popup-separator-menu-item:rtl { - margin-left: 4px; } + border: none !important; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #0d0e11; } @@ -503,7 +531,7 @@ StScrollBar { .popup-sub-menu .popup-separator-menu-item:rtl { margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - background-color: #1c1e25; } + background-color: #0d0e11; } .background-menu { -boxpointer-gap: 0px; @@ -533,9 +561,8 @@ StScrollBar { /* today button (the date) */ .datemenu-today-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -548,31 +575,30 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .datemenu-today-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .datemenu-today-button:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .datemenu-today-button:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .datemenu-today-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .datemenu-today-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .datemenu-today-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .datemenu-today-button:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .datemenu-today-button:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } /* Calendar */ .calendar { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -585,37 +611,36 @@ StScrollBar { background-color: rgba(238, 238, 236, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .calendar:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .calendar:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .calendar:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .calendar:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .calendar:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .calendar:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .calendar:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .calendar:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } .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; margin: 2px; - border-radius: 6px; } + border-radius: 8px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { background-color: #303340; } .calendar .calendar-month-header .pager-button:active { @@ -643,7 +668,9 @@ StScrollBar { color: #888a8d; padding-top: 6px; height: 16px !important; - font-weight: bold; } + font-weight: 600; } + .calendar .calendar-day { + font-weight: 600; } .calendar .calendar-nonwork-day { color: #888a8d; } .calendar .calendar-other-month-day { @@ -673,37 +700,36 @@ StScrollBar { margin: 6px; padding: 0 6px; border-radius: 3px; - background-color: #1e2128; + background-color: rgba(238, 238, 236, 0.1); color: #888a8d; } /* Events */ .events-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; + background-color: #35373f; padding: 12px; } - .events-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .events-button:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .events-button:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .events-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .events-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .events-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .events-button:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .events-button:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .events-button .events-box { spacing: 6px; } .events-button .events-list { @@ -716,32 +742,31 @@ StScrollBar { /* World clocks */ .world-clocks-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; + background-color: #35373f; padding: 12px; } - .world-clocks-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .world-clocks-button:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .world-clocks-button:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .world-clocks-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .world-clocks-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .world-clocks-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .world-clocks-button:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .world-clocks-button:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } @@ -760,32 +785,31 @@ StScrollBar { /* Weather */ .weather-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; + background-color: #35373f; padding: 12px; } - .weather-button:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .weather-button:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .weather-button:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .weather-button:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .weather-button:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .weather-button:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .weather-button:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .weather-button:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { @@ -850,31 +874,30 @@ StScrollBar { border-color: rgba(164, 0, 164, 0.6); } .message { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; } - .message:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .message:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .message:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + background-color: #35373f; } .message:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .message:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .message:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .message:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .message:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .message .message-icon-bin { padding: 18px; } .message .message-icon-bin:ltr { @@ -1058,10 +1081,14 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog { + background-color: #23252e; + border-radius: 16px; + box-shadow: inset 0 0 0 1px rgba(238, 238, 236, 0.07); } + .modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -1235,9 +1262,9 @@ StScrollBar { spacing: 24px; } .switcher-list { - padding: 10px; - border-radius: 24px; - box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } + padding: 12px; + border-radius: 28px; + box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3); } .switcher-list .switcher-list-item-container { spacing: 12px; } .switcher-list .item-box { @@ -1588,28 +1615,29 @@ StScrollBar { .quick-settings { padding: 18px; border-radius: 36px; } - .quick-settings .icon-button, .quick-settings .button { + .quick-settings .icon-button, .quick-settings .background-app-item .close-button, .background-app-item .quick-settings .close-button, .quick-settings .button, .quick-settings .login-dialog-button { padding: 10.5px; } .quick-settings-grid { spacing-rows: 12px; spacing-columns: 12px; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; - min-height: 40px; - border: none; + min-height: 48px; + border: none; } + +.quick-toggle { /* Move padding into the box; this is to allow menu arrows to extend to the border */ } .quick-toggle:checked { transition-duration: 100ms; background-color: #a400a4; - color: #ffffff; - box-shadow: none; } + color: #ffffff; } .quick-toggle:checked:focus { - box-shadow: inset 0 0 0 2px #d700d7; } + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } .quick-toggle:checked:hover, .quick-toggle:checked:focus { background-color: #be00be; color: white; } @@ -1623,8 +1651,8 @@ StScrollBar { background-color: rgba(164, 0, 164, 0.5); color: rgba(255, 255, 255, 0.5); } .quick-toggle > StBoxLayout { - spacing: 6px; } - .quick-toggle.button { + spacing: 9px; } + .quick-toggle.button, .quick-toggle.login-dialog-button, .quick-toggle.icon-button, .background-app-item .quick-toggle.close-button { padding: 0; } .quick-toggle > StBoxLayout { padding: 0 12px; } @@ -1632,54 +1660,105 @@ StScrollBar { padding-left: 15px; } .quick-toggle:rtl > StBoxLayout { padding-right: 15px; } - .quick-toggle .quick-toggle-label { + .quick-toggle .quick-toggle-title { font-weight: bold; } - .quick-toggle .quick-toggle-icon, .quick-toggle .quick-toggle-arrow { + .quick-toggle StBoxLayout > .quick-toggle-subtitle { + font-weight: normal; + font-size: 12px; } + .quick-toggle .quick-toggle-icon { icon-size: 1.09em; } -.quick-menu-toggle:ltr > StBoxLayout { - padding-right: 0; } - -.quick-menu-toggle:rtl > StBoxLayout { - padding-left: 0; } +.quick-menu-toggle .quick-toggle { + min-width: auto; + max-width: auto; } + .quick-menu-toggle .quick-toggle:ltr { + border-radius: 99px 0 0 99px; } + .quick-menu-toggle .quick-toggle:rtl { + border-radius: 0 99px 99px 0; } + .quick-menu-toggle .quick-toggle:ltr:last-child { + border-radius: 99px; } + .quick-menu-toggle .quick-toggle:rtl:last-child { + border-radius: 99px; } .quick-menu-toggle .quick-toggle-arrow { - background-color: rgba(238, 238, 236, 0.1); - padding: 6px 10.5px; } - .quick-menu-toggle .quick-toggle-arrow:ltr { - border-radius: 0 99px 99px 0; } - .quick-menu-toggle .quick-toggle-arrow:rtl { - border-radius: 99px 0 0 99px; } - -.quick-slider { - padding: 0 6px; } - .quick-slider > StBoxLayout { - spacing: 6px; } - .quick-slider .slider-bin { - min-height: 16px; - padding: 6px; - border-radius: 99px; } - .quick-slider .slider-bin:focus { + padding: 6px 10.5px; + border-width: 0; } + .quick-menu-toggle .quick-toggle-arrow:checked { + transition-duration: 100ms; + background-color: #a400a4; + color: #ffffff; + border-color: #0b000b; } + .quick-menu-toggle .quick-toggle-arrow:checked:focus { + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } + .quick-menu-toggle .quick-toggle-arrow:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:focus { + background-color: #be00be; + color: white; } + .quick-menu-toggle .quick-toggle-arrow:checked:active { + background-color: purple; + color: #ededed; } + .quick-menu-toggle .quick-toggle-arrow:checked:insensitive { transition-duration: 100ms; - color: #eeeeec; - background-color: #392a43; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .quick-slider .slider-bin:focus:hover { - background-color: #3f314a; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .quick-slider .slider-bin:focus:active { - background-color: #453752; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .quick-slider .quick-toggle-icon { - icon-size: 1.09em; } - .quick-slider .icon-button { - background-color: transparent; } + color: rgba(238, 238, 236, 0.5); + background-color: rgba(238, 238, 236, 0.05); + background-color: rgba(164, 0, 164, 0.5); + color: rgba(255, 255, 255, 0.5); } + .quick-menu-toggle .quick-toggle-arrow:ltr { + border-radius: 0 99px 99px 0; + border-left-width: 1px; } + .quick-menu-toggle .quick-toggle-arrow:rtl { + border-radius: 99px 0 0 99px; + border-right-width: 1px; } + +.quick-slider > StBoxLayout { + spacing: 6px; } + +.quick-slider .icon-button, .quick-slider .login-dialog-button.cancel-button, .quick-slider .login-dialog-button.switch-user-button, .quick-slider .login-dialog-button.login-dialog-session-list-button, .quick-slider .background-app-item .close-button, .background-app-item .quick-slider .close-button { + padding: 6px; } + +.quick-slider .slider-bin { + min-height: 16px; + padding: 6px; + border-radius: 99px; } + .quick-slider .slider-bin:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .quick-slider .slider-bin:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .quick-slider .slider-bin:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .quick-toggle-menu { - background-color: #272a34; + border-radius: 12px; + margin: 4px; + transition-duration: 100ms; + color: #eeeeec; + background-color: #35373f; border-radius: 24px; padding: 12px; margin: 12px 18px 0; } + .quick-toggle-menu:hover { + transition-duration: 100ms; + color: #eeeeec; + background-color: #3c3e47; } + .quick-toggle-menu:active { + transition-duration: 100ms; + color: #eeeeec; + background-color: #4a4d58; } + .quick-toggle-menu:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .quick-toggle-menu:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .quick-toggle-menu:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .quick-toggle-menu .popup-menu-item > StIcon { -st-icon-style: symbolic; } .quick-toggle-menu .header { @@ -1690,28 +1769,51 @@ StScrollBar { icon-size: 1.635em; border-radius: 999px; padding: 9px; - background-color: #383d4b; } + background-color: rgba(238, 238, 236, 0.2); } .quick-toggle-menu .header .icon.active { background-color: #a400a4; } .quick-settings-system-item > StBoxLayout { spacing: 12px; } -.quick-settings-system-item .icon-button > StIcon { - -st-icon-style: symbolic; } - .quick-settings-system-item .power-item { min-height: 0; min-width: 0; } .quick-settings-system-item .power-item:insensitive { transition-duration: 100ms; color: #eeeeec; - background-color: #2d2f38; + background-color: #35373f; background-color: transparent; } .nm-network-item .wireless-secure-icon { icon-size: 0.545em; } +.bt-device-item .popup-menu-icon { + -st-icon-style: symbolic; } + +.bt-menu-placeholder { + text-align: center; + padding: 2em 4em; } + +.device-subtitle { + color: rgba(238, 238, 236, 0.5); } + +.background-apps-quick-toggle { + min-height: 40px; + background-color: transparent; } + .background-apps-quick-toggle StIcon { + icon-size: 1.09em !important; } + +.background-app-item .popup-menu-icon { + icon-size: 2.18em !important; + -st-icon-style: regular !important; } + +.background-app-item .close-button { + padding: 6px; } + +.background-app-item.popup-inactive-menu-item { + color: #eeeeec; } + /* OVERVIEW */ .controls-manager, .secondary-monitor-workspaces { spacing: 12px; } @@ -1726,12 +1828,6 @@ StScrollBar { .window-picker { spacing: 6px; } -.window-caption { - color: white; - background-color: #3b3f4e; - border-radius: 99px; - padding: 6px 12px; } - .window-close, .screenshot-ui-close-button { background-color: rgba(63, 68, 84, 0.98); color: white; @@ -1753,34 +1849,12 @@ StScrollBar { background-color: rgba(3, 2, 1, 0); box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); } - .search-entry { - border-radius: 18px; + border-radius: 99px; margin-top: 12px; margin-bottom: 6px; - padding: 7px 9px; - width: 320px; - background-color: #2e313d; - color: rgba(238, 238, 236, 0.7); - border: 2px solid #2e313d; } - - .search-entry:hover { - background-color: #3b3f4e; - border-color: #3b3f4e; - color: rgba(238, 238, 236, 0.7); } - - .search-entry:focus { - background-color: #332f42; - border-color: #a400a4; - color: #eeeeec; } - - .search-entry:insensitive { - background-color: #2f3340; - border-color: #2f3340; - color: #888a8d; } - + width: 24em; } .search-entry .search-entry-icon { - color: inherit; icon-size: 1.09em; margin-top: 2px; padding: 0 4px; } @@ -1801,7 +1875,7 @@ StScrollBar { .search-section-content { background-color: #323643; border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px solid rgba(238, 238, 236, 0.07); color: white; padding: 12px; margin: 0 12px; } @@ -1887,7 +1961,8 @@ StScrollBar { margin-right: 0; } .dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { - padding: 6px; } + padding: 6px; + border-radius: 16px; } .dash-item-container .show-apps { transition-duration: 400ms; } @@ -1923,11 +1998,6 @@ StScrollBar { margin-bottom: 12px; } .dash-label { - color: white; - background-color: #303340; - border-radius: 99px; - padding: 6px 12px; - text-align: center; -y-offset: 8px; } /* App Grid */ @@ -1966,43 +2036,47 @@ StScrollBar { border: 2px solid rgba(164, 0, 164, 0.8); background-color: rgba(164, 0, 164, 0.2); } .app-well-app .overview-icon, .grid-search-result .overview-icon { - padding: 12px; } + padding: 12px; + border-radius: 24px; } .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.app-folder, .app-folder.grid-search-result { transition-duration: 400ms; } .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { - background-color: rgba(255, 255, 255, 0.19); } + background-color: rgba(238, 238, 236, 0.07); } .app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 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); } + background-color: rgba(238, 238, 236, 0.25); } .app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { border: 2px solid rgba(164, 0, 164, 0.8); background-color: rgba(164, 0, 164, 0.2); } .app-folder-dialog { - border-radius: 32px; - background-color: #323643; } + border-radius: 64px; + background-color: #23252e; + padding: 12px; + box-shadow: inset 0 0 0 1px rgba(238, 238, 236, 0.07); } .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-entry { - width: 300px; } + width: 12em; + border-radius: 16px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } @@ -2054,7 +2128,7 @@ StScrollBar { .system-action-icon { background-color: rgba(0, 0, 0, 0.8); - color: #fff; + color: white; border-radius: 99px; icon-size: 48px; } @@ -2073,34 +2147,31 @@ StScrollBar { background-gradient-direction: horizontal; border-radius: 0px 24px 24px 0px; } -.page-navigation-arrow > StIcon { +.page-navigation-arrow { margin: 6px; padding: 18px; width: 24px; height: 24px; border-radius: 99px; } - -.page-navigation-arrow:insensitive > StIcon { - transition-duration: 100ms; - background-color: transparent; - background-color: none; - box-shadow: none; } - .page-navigation-arrow:insensitive > StIcon:insensitive { + .page-navigation-arrow:insensitive { transition-duration: 100ms; - 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); } - -.page-navigation-arrow:hover > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(83, 86, 98, 0.525); } - -.page-navigation-arrow:active > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(90, 94, 107, 0.525); } + background-color: none; + box-shadow: none; } + .page-navigation-arrow:insensitive:insensitive { + transition-duration: 100ms; + 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); } + .page-navigation-arrow:hover { + transition-duration: 100ms; + color: white; + background-color: rgba(102, 105, 115, 0.545); } + .page-navigation-arrow:active { + transition-duration: 100ms; + color: white; + background-color: rgba(117, 120, 131, 0.545); } /* Workspace pager */ .workspace-thumbnails { @@ -2108,7 +2179,10 @@ StScrollBar { spacing: 6px; padding: 6px; } .workspace-thumbnails .workspace-thumbnail { - border-radius: 3px; } + color: white; + background-color: #3d4251; + border-radius: 4px; + border: 1px solid transparent; } .workspace-thumbnails .placeholder { background-image: url("assets/workspace-placeholder.svg"); background-size: contain; @@ -2116,8 +2190,7 @@ StScrollBar { .workspace-thumbnail-indicator { border: 3px solid #a400a4; - border-radius: 3px; - padding: 0px; } + border-radius: 8px; } .ripple-pointer-location { width: 50px; @@ -2147,8 +2220,6 @@ StScrollBar { color: white; border-radius: 99px; icon-size: 4.36em; } - .user-icon:hover { - color: white; } .user-icon StIcon { background-color: rgba(255, 255, 255, 0.05); border-radius: 99px; @@ -2156,16 +2227,7 @@ StScrollBar { width: 2.725em; height: 2.725em; } .user-icon.user-avatar { - border: 2px white; } - -.user-widget.vertical .user-icon { - icon-size: 6.54em; } - .user-widget.vertical .user-icon StIcon { - padding: 20px; - padding-top: 18px; - padding-bottom: 22px; - width: 5.995em; - height: 5.995em; } + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .lightbox { background-color: black; } @@ -2354,11 +2416,11 @@ StScrollBar { /* Looking Glass */ #LookingGlassDialog { - background-color: #303340; + background-color: rgba(35, 37, 46, 0.95); border-radius: 0 0 16px 16px; + border: 1px solid rgba(238, 238, 236, 0.07); border-top-width: 0; - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; + color: #eeeeec; padding: 6px; spacing: 6px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); } @@ -2377,20 +2439,7 @@ StScrollBar { #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 12px; - font-weight: bold; - padding: 6px 12px; - color: #d9d9d9; - transition-duration: 100ms; - box-shadow: none; - border: none; - border-radius: 6px; - background-color: transparent; } - #LookingGlassDialog .notebook-tab:hover { - color: white; - background-color: rgba(255, 255, 255, 0.05); } - #LookingGlassDialog .notebook-tab:selected { - color: white; - background-color: rgba(255, 255, 255, 0.1); } + padding: 6px 12px; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 6px; @@ -2400,12 +2449,7 @@ StScrollBar { padding: 6px; } .lg-dialog StEntry { - background-color: rgba(59, 63, 78, 0.6); - color: white; - border-color: rgba(255, 255, 255, 0.2); - min-height: 22px; - selection-background-color: #a400a4; - selected-color: #ffffff; } + min-height: 22px; } .lg-dialog .shell-link { color: #ff0bff; } @@ -2430,11 +2474,11 @@ StScrollBar { spacing: 6px; } .lg-obj-inspector-button { - border: 1px solid black; + border: 1px solid #0d0e11; padding: 4px; border-radius: 8px; } .lg-obj-inspector-button:hover { - border: 1px solid #ffffff; } + border: 1px solid #eeeeec; } #lookingGlassExtensions { padding: 6px; } @@ -2445,38 +2489,37 @@ StScrollBar { .lg-extension { padding: 12px; - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); transition-duration: 100ms; color: #eeeeec; - background-color: #31343d; } - .lg-extension:focus { - transition-duration: 100ms; - color: #eeeeec; - background-color: #3d2f47; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .lg-extension:focus:hover { - background-color: #43354f; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .lg-extension:focus:active { - background-color: #493c57; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + background-color: #35373f; } .lg-extension:hover { transition-duration: 100ms; color: #eeeeec; - background-color: #383b45; } + background-color: #3c3e47; } .lg-extension:active { transition-duration: 100ms; color: #eeeeec; - background-color: #3f424e; } + background-color: #4a4d58; } + .lg-extension:focus { + transition-duration: 100ms; + color: #eeeeec; + background-color: #403249; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .lg-extension:focus:hover { + background-color: #463851; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .lg-extension:focus:active { + background-color: #4d3f58; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { - background: #303340; - border: 1px solid black; + background: #23252e; + border: 1px solid #0d0e11; border-radius: 8px; padding: 6px; } @@ -2493,100 +2536,31 @@ StScrollBar { padding-top: 12px; padding: 6px; } -/* Login Dialog */ -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; } +.login-dialog .caps-lock-warning-label, +.login-dialog .login-dialog-message-warning, +.unlock-dialog .caps-lock-warning-label, +.unlock-dialog .login-dialog-message-warning { + color: white; } -.login-dialog, -.unlock-dialog { - border: none; - background-color: transparent; } - .login-dialog .modal-dialog-button-box, - .unlock-dialog .modal-dialog-button-box { - spacing: 3px; } - .login-dialog .modal-dialog-button, - .unlock-dialog .modal-dialog-button { - padding: 4px 18px; - background-color: #20232b; - border-color: #20232b; - color: white; } - .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, - .unlock-dialog .modal-dialog-button:hover, - .unlock-dialog .modal-dialog-button:focus { - background-color: #323643; - border-color: #323643; } - .login-dialog .modal-dialog-button:active, - .unlock-dialog .modal-dialog-button:active { - background-color: #1c1e25; - border-color: #1c1e25; } - .login-dialog .modal-dialog-button:insensitive, - .unlock-dialog .modal-dialog-button:insensitive { - transition-duration: 100ms; - 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 { - transition-duration: 100ms; - background-color: #a400a4; - color: #ffffff; - box-shadow: none; } - .login-dialog .modal-dialog-button:default:focus, - .unlock-dialog .modal-dialog-button:default:focus { - box-shadow: inset 0 0 0 2px #d700d7; } - .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 { - background-color: #be00be; - color: white; } - .login-dialog .modal-dialog-button:default:active, - .unlock-dialog .modal-dialog-button:default:active { - background-color: purple; - color: #ededed; } - .login-dialog .modal-dialog-button:default:insensitive, - .unlock-dialog .modal-dialog-button:default:insensitive { - transition-duration: 100ms; - color: rgba(238, 238, 236, 0.5); - background-color: rgba(238, 238, 236, 0.05); - background-color: rgba(164, 0, 164, 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, - .unlock-dialog .cancel-button, - .unlock-dialog .switch-user-button, - .unlock-dialog .login-dialog-session-list-button { - padding: 0; - border-radius: 99px; - width: 2.18em; - height: 2.18em; - border-color: #20232b; - background-color: #20232b; } - .login-dialog .cancel-button StIcon, - .login-dialog .switch-user-button StIcon, - .login-dialog .login-dialog-session-list-button StIcon, - .unlock-dialog .cancel-button StIcon, - .unlock-dialog .switch-user-button StIcon, - .unlock-dialog .login-dialog-session-list-button StIcon { - icon-size: 1.09em; } - .login-dialog .caps-lock-warning-label, - .login-dialog .login-dialog-message-warning, - .unlock-dialog .caps-lock-warning-label, - .unlock-dialog .login-dialog-message-warning { - color: white; } +/* Login Dialog */ +.login-dialog { + background-color: #272a34; } + +.login-dialog-button.cancel-button { + padding: 9px; } + +.login-dialog-button-box { + width: 23em; + spacing: 12px; } .login-dialog-logo-bin { - padding: 24px 0px; } + margin: 3em 0; } .login-dialog-banner { color: #e6e6e6; } -.login-dialog-button-box { - width: 23em; - spacing: 5px; } +.login-dialog-banner-view { + max-width: 23em; } .login-dialog-message { text-align: center; } @@ -2595,14 +2569,14 @@ StScrollBar { padding: 100px 0px; } .login-dialog-not-listed-label { - padding-left: 2px; } - .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { - color: white; } - -.login-dialog-not-listed-label { + font-size: 10pt; font-weight: bold; color: #b3b3b3; - padding-top: 1em; } + padding: 12px; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { + color: white; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label { + text-decoration: underline; } .login-dialog-auth-list-view { -st-vfade-offset: 1em; } @@ -2615,8 +2589,8 @@ StScrollBar { margin-left: 2em; } .login-dialog-auth-list-item { - border-radius: 12px; - padding: 6px; + border-radius: 16px; + padding: 4px; color: #b3b3b3; } .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { background-color: #a400a4; @@ -2639,102 +2613,68 @@ StScrollBar { .login-dialog-user-list { spacing: 12px; width: 23em; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { - background-color: #a400a4; - color: #ffffff; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { - border-right: 2px solid #a400a4; } - -.login-dialog-user-list-item { - border-radius: 12px; - padding: 6px; - color: #b3b3b3; } - .login-dialog-user-list-item:ltr .user-widget { - padding-right: 1em; } - .login-dialog-user-list-item:rtl .user-widget { - padding-left: 1em; } - .login-dialog-user-list-item .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: white; } - .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: #ffffff; } - -.user-widget-label { - color: white; } - -.user-widget.horizontal .user-widget-label { - font-size: 12pt; - font-weight: bold; - padding-left: 15px; } - .user-widget.horizontal .user-widget-label:ltr { - padding-left: 14px; - text-align: left; } - .user-widget.horizontal .user-widget-label:rtl { - padding-right: 14px; - text-align: right; } - -.user-widget.vertical .user-widget-label { - font-size: 15pt; - text-align: center; - font-weight: normal; - padding-top: 16px; } - -.login-dialog-timed-login-indicator { - height: 2px; - background-color: #8e8e80; } + .login-dialog-user-list .login-dialog-user-list-item { + border-radius: 12px; + padding: 6px; + background-color: rgba(255, 255, 255, 0.05); + color: white; } + .login-dialog-user-list .login-dialog-user-list-item .user-widget .user-icon { + border: 4px solid transparent; } + .login-dialog-user-list .login-dialog-user-list-item .login-dialog-timed-login-indicator { + height: 2px; + margin-top: 6px; + background-color: #b3b3b3; } + .login-dialog-user-list .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { + background-color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item { + transition-duration: 300ms; + transition-timing-function: ease; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { + background-color: #a400a4; + color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected:hover { + background-color: #be00be; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in .user-widget .user-icon { + border-color: #a400a4; } .login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; spacing: 12px; - width: 23em; } - -.login-dialog-prompt-entry { - height: 1.5em; } - -.login-dialog-prompt-label { - color: #cccccc; - font-size: 11pt; - 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); } + width: 26em; } /* Screen Shield */ +.unlock-dialog { + background-color: transparent; } + +.screen-shield-background { + background: black; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } + +#lockDialogGroup { + background-color: #272a34; } + .unlock-dialog-clock { color: white; - font-weight: 300; - text-align: center; - spacing: 24px; - padding-bottom: 2.5em; } + spacing: 2em; } + .unlock-dialog-clock .unlock-dialog-clock-time { + font-size: 72pt; + font-weight: 200; } + .unlock-dialog-clock .unlock-dialog-clock-date { + font-weight: 400; } + .unlock-dialog-clock .unlock-dialog-clock-hint { + margin-top: 2em; + padding: 6px 18px; + border-radius: 16px; + font-weight: bold; } -.unlock-dialog-clock-time { - font-size: 64pt; - padding-top: 42px; } - -.unlock-dialog-clock-date { - font-size: 16pt; - font-weight: normal; } - -.unlock-dialog-clock-hint { - font-weight: normal; - padding-top: 48px; } +#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { + background-color: rgba(35, 37, 46, 0.3); } + #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { + background-color: rgba(35, 37, 46, 0.5); } + #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { + background-color: rgba(164, 0, 164, 0.5); } .unlock-dialog-notifications-container { margin: 12px; @@ -2769,19 +2709,33 @@ StScrollBar { background-color: rgba(255, 255, 255, 0.1); border-radius: 99px; } -.screen-shield-background { - background: black; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } +.user-widget .user-widget-label { + color: white; } -#lockDialogGroup { - background-color: #272a34; } +.user-widget.horizontal { + spacing: 18px; } + .user-widget.horizontal .user-icon StIcon { + padding: 12px; + icon-size: 2.18em; + width: 3.27em; + height: 3.27em; + background-color: rgba(255, 255, 255, 0.1); } -#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { - background-color: rgba(35, 37, 46, 0.3); } - #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { - background-color: rgba(35, 37, 46, 0.5); } - #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { - background-color: rgba(164, 0, 164, 0.5); } +.user-widget.vertical { + spacing: 24px; } + .user-widget.vertical .user-widget-label { + text-align: center; + margin-bottom: .75em; } + .user-widget.vertical .user-icon { + icon-size: 10.9em; } + .user-widget.vertical .user-icon StIcon { + padding: 32px; + icon-size: 4.36em; + background-color: rgba(255, 255, 255, 0.1); } + +.workspace-thumbnails .workspace-thumbnail, .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .dash-background, .dash-separator, .search-section-content, .search-entry { + background-color: rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .icon-dropshadow { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } @@ -2878,7 +2832,6 @@ StScrollBar { color: black; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; - background-color: rgba(255, 255, 255, 0.1); font-size: 1.1em; transition-duration: 200ms; } .search-entry StLabel.hint-text { @@ -2902,10 +2855,6 @@ StScrollBar { color: white; icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } -.search-section-content { - background-color: rgba(255, 255, 255, 0.1); - border: none; } - .search-provider-icon .list-search-provider-details { font-weight: bold; } @@ -2918,13 +2867,40 @@ StScrollBar { #dash StIcon { icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } -.dash-background, .dash-separator { - background: rgba(255, 255, 255, 0.1); } - /* App Grid */ -.app-well-app, .grid-search-result { +#overview { color: white; } +.app-well-app.app-folder, .app-folder.grid-search-result { + transition-duration: 400ms; } + .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.07); } + .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(164, 0, 164, 0.8); + background-color: rgba(164, 0, 164, 0.2); } + .app-folder-dialog { background: black; - box-shadow: 0 0 20px #030303; } + box-shadow: 0 0 100px #0a0a0a; } + .app-folder-dialog .folder-name-container .folder-name-entry { + color: white; } + +/* Workspace pager */ +.workspace-thumbnail-indicator { + border: 2px solid white; } diff --git a/share/themes/Kali-Purple-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Purple-Light/gnome-shell/gnome-shell.css index 6f5c41bc..d8d63e0f 100644 --- a/share/themes/Kali-Purple-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Purple-Light/gnome-shell/gnome-shell.css @@ -30,10 +30,6 @@ stage { border-radius: 999px; padding: 12px; } -.workspace-thumbnails .workspace-thumbnail { - color: white; - background-color: rgba(255, 255, 255, 0.1); } - .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; @@ -42,102 +38,112 @@ stage { transition-duration: 200ms; text-align: center; } -.modal-dialog { - color: #5c616c; - background-color: #ffffff; - border-radius: 11px; - border: 1px solid rgba(255, 255, 255, 0.8); } - -#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { - border-radius: 6px; +#LookingGlassDialog .notebook-tab, #LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 8px; border-style: solid; border-width: 1px; font-weight: bold; padding: 3px 24px; transition-duration: 100ms; color: #5c616c; - background-color: #f7f7f8; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { + background-color: #f0f1f2; } + #LookingGlassDialog .notebook-tab:focus, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus, .login-dialog-button:focus, .icon-button:focus, .background-app-item .close-button:focus { transition-duration: 100ms; color: #5c616c; - background-color: #efdef0; + background-color: #e8d9ea; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover { + #LookingGlassDialog .notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover, .login-dialog-button:focus:hover, .icon-button:focus:hover, .background-app-item .close-button:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + #LookingGlassDialog .notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active, .login-dialog-button:focus:active, .icon-button:focus:active, .background-app-item .close-button:focus:active { background-color: #f6e6f6; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active { - background-color: #f6e6f6; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { + #LookingGlassDialog .notebook-tab:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover, .login-dialog-button:hover, .icon-button:hover, .background-app-item .close-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { + background-color: #f8f9f9; } + #LookingGlassDialog .notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive, .login-dialog-button:insensitive, .icon-button:insensitive, .background-app-item .close-button:insensitive { transition-duration: 100ms; color: rgba(92, 97, 108, 0.5); background-color: rgba(92, 97, 108, 0.05); } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { + #LookingGlassDialog .notebook-tab:selected, #LookingGlassDialog > #Toolbar .lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .edit-folder-button:selected, .button:selected, .login-dialog-button:selected, .icon-button:selected, .background-app-item .close-button:selected, #LookingGlassDialog .notebook-tab:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active, .login-dialog-button:active, .icon-button:active, .background-app-item .close-button:active { transition-duration: 100ms; color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked { + #LookingGlassDialog .notebook-tab:checked, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked, .login-dialog-button:checked, .icon-button:checked, .background-app-item .close-button:checked { transition-duration: 100ms; color: #5c616c; background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover { + #LookingGlassDialog .notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover, .login-dialog-button:checked:hover, .icon-button:checked:hover, .background-app-item .close-button:checked:hover { background-color: white; } - #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active { + #LookingGlassDialog .notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active, .login-dialog-button:checked:active, .icon-button:checked:active, .background-app-item .close-button:checked:active { background-color: white; } + #LookingGlassDialog .flat.notebook-tab, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button, .app-folder-dialog .folder-name-container .flat.edit-folder-button, .flat.button, .flat.login-dialog-button, .flat.icon-button, .background-app-item .flat.close-button { + transition-duration: 100ms; + color: #5c616c; + background-color: #f0f1f2; + background-color: transparent; } + #LookingGlassDialog .flat.notebook-tab:focus, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus, .flat.button:focus, .flat.login-dialog-button:focus, .flat.icon-button:focus, .background-app-item .flat.close-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:hover, .flat.button:focus:hover, .flat.login-dialog-button:focus:hover, .flat.icon-button:focus:hover, .background-app-item .flat.close-button:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:focus:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:focus:active, .flat.button:focus:active, .flat.login-dialog-button:focus:active, .flat.icon-button:focus:active, .background-app-item .flat.close-button:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + #LookingGlassDialog .flat.notebook-tab:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:hover, .flat.button:hover, .flat.login-dialog-button:hover, .flat.icon-button:hover, .background-app-item .flat.close-button:hover { + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } + #LookingGlassDialog .flat.notebook-tab:insensitive, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .flat.edit-folder-button:insensitive, .flat.button:insensitive, .flat.login-dialog-button:insensitive, .flat.icon-button:insensitive, .background-app-item .flat.close-button:insensitive { + transition-duration: 100ms; + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); } + #LookingGlassDialog .flat.notebook-tab:selected, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:selected, .app-folder-dialog .folder-name-container .flat.edit-folder-button:selected, .flat.button:selected, .flat.login-dialog-button:selected, .flat.icon-button:selected, .background-app-item .flat.close-button:selected, #LookingGlassDialog .flat.notebook-tab:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:active, .flat.button:active, .flat.login-dialog-button:active, .flat.icon-button:active, .background-app-item .flat.close-button:active { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + #LookingGlassDialog .flat.notebook-tab:checked, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked, .flat.button:checked, .flat.login-dialog-button:checked, .flat.icon-button:checked, .background-app-item .flat.close-button:checked { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + #LookingGlassDialog .flat.notebook-tab:checked:hover, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:hover, .flat.button:checked:hover, .flat.login-dialog-button:checked:hover, .flat.icon-button:checked:hover, .background-app-item .flat.close-button:checked:hover { + background-color: white; } + #LookingGlassDialog .flat.notebook-tab:checked:active, #LookingGlassDialog > #Toolbar .flat.lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .flat.edit-folder-button:checked:active, .flat.button:checked:active, .flat.login-dialog-button:checked:active, .flat.icon-button:checked:active, .background-app-item .flat.close-button:checked:active { + background-color: white; } -.icon-button { - border-radius: 99px; - border-style: solid; - border-width: 1px; - font-weight: bold; - padding: 12px; - transition-duration: 100ms; +.lg-dialog StEntry, StEntry { + border-radius: 8px; + padding: 9px 9px; color: #5c616c; - background-color: #f7f7f8; } - .icon-button:focus { + selection-background-color: #a400a4; + selected-color: #ffffff; + transition-duration: 100ms; + background-color: rgba(92, 97, 108, 0.1); + color: rgba(92, 97, 108, 0.7); } + StEntry:hover { transition-duration: 100ms; - color: #5c616c; - background-color: #efdef0; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .icon-button:focus:hover { - background-color: #f6e6f6; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .icon-button:focus:active { - background-color: #f6e6f6; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .icon-button:hover { + background-color: rgba(92, 97, 108, 0.2); + color: inherit; } + StEntry:focus { transition-duration: 100ms; - color: #5c616c; - background-color: white; } - .icon-button:insensitive { + background-color: rgba(115, 66, 126, 0.24); + box-shadow: inset 0 0 0 2px #a400a4; + color: #5c616c; } + StEntry:insensitive { transition-duration: 100ms; - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); } - .icon-button:active { - transition-duration: 100ms; - color: #5c616c; - background-color: white; } - .icon-button:checked { - transition-duration: 100ms; - color: #5c616c; - background-color: white; } - .icon-button:checked:hover { - background-color: white; } - .icon-button:checked:active { - background-color: white; } - .icon-button > StIcon { - icon-size: 1.09em; } + background-color: rgba(174, 176, 182, 0.2); + color: #aeb0b6; } .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { padding: 12px; font-weight: bold !important; transition-duration: 100ms; color: #5c616c; - background-color: #dadadb; } + background-color: #e0e1e2; } .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr { margin-right: 1px; } .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl { @@ -149,42 +155,42 @@ stage { .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { transition-duration: 100ms; color: #5c616c; - background-color: #d5c4d6; + background-color: #dacbdc; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover { - background-color: #dccbdc; + background-color: #e1d1e2; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - background-color: #e3d2e3; + background-color: #e8d8e9; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #e2e2e3; } + background-color: #e8e9e9; } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #eaeaea; } + background-color: #f8f8f8; } .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked { transition-duration: 100ms; color: #5c616c; - background-color: #f1f1f2; } + background-color: #f8f8f8; } .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover { - background-color: #f9f9f9; } + background-color: white; } .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; } + border-radius: 0 0 0 16px; } .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; + border-radius: 0 0 16px; 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; } + border-radius: 0 0 16px; } .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; + border-radius: 0 0 0 16px; margin-left: 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 10px 10px !important; + border-radius: 0 0 16px 16px; margin-left: 0 !important; margin-right: 0 !important; } @@ -213,33 +219,41 @@ stage { .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { transition-duration: 100ms; color: white; - background-color: #453852; + background-color: #4c3f59; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover { - background-color: #4b3e5a; + background-color: #524661; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active { - background-color: #514561; + background-color: #584c68; box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover { transition-duration: 100ms; color: white; - background-color: #414552; } + background-color: #494d59; } .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { transition-duration: 100ms; color: white; - background-color: #484c5a; } + background-color: #575c6a; } .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked { transition-duration: 100ms; color: white; - background-color: #4e5463; } + background-color: #575c6a; } .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: #555b6b; } + background-color: #5d6373; } .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: #5c6274; } + background-color: #646a7b; } + +.dash-label, .window-caption { + background-color: #303340; + color: white; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 99px; + padding: 6px 12px; + text-align: center; } /* General Typography */ -.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { +.user-widget.vertical .user-widget-label, .unlock-dialog-clock .unlock-dialog-clock-date, .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext { font-weight: 800; font-size: 20pt; } @@ -247,15 +261,15 @@ stage { font-weight: 800; font-size: 15pt; } -.quick-toggle-menu .header .title { +.user-widget.horizontal .user-widget-label, .quick-toggle-menu .header .title { font-weight: 700; font-size: 15pt; } -.message-dialog-content .message-dialog-title.lightweight, .headline { +.bt-menu-placeholder, .message-dialog-content .message-dialog-title.lightweight, .headline { font-weight: 700; font-size: 13pt; } -.lg-extension-name, .osd-window, .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 { +.lg-extension-name, .background-app-item .title, .osd-window, .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; } @@ -263,7 +277,7 @@ stage { 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, +.lg-completions-text, .caps-lock-warning-label, #dash, .background-app-item .subtitle, .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; @@ -273,7 +287,7 @@ stage { 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 { +.unlock-dialog-clock .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 */ @@ -289,42 +303,31 @@ stage { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } /* Entries */ -StEntry { - border-radius: 8px; - padding: 8px; - color: #5c616c; - background-color: white; - color: rgba(92, 97, 108, 0.7); - border: 2px solid white; - selection-background-color: #a400a4; - selected-color: #ffffff; } - StEntry:hover { - background-color: white; - border-color: white; - color: rgba(92, 97, 108, 0.7); } - StEntry:focus { - background-color: #faf2fa; - border-color: #a400a4; - color: #5c616c; } - StEntry:insensitive { - background-color: white; - border-color: white; - color: #aeb0b6; } - StEntry StIcon.capslock-warning { - icon-size: 16px; - warning-color: #fd7d00; - padding: 0 4px; } - StEntry StIcon.peek-password { - icon-size: 1.09em; - padding: 0 4px; } - StEntry StLabel.hint-text { - margin-left: 2px; - color: rgba(92, 97, 108, 0.7); } +StEntry StIcon.capslock-warning { + icon-size: 1.09em; + warning-color: #fd7d00; + padding: 0 4px; } + +StEntry StIcon.peek-password { + icon-size: 1.09em; + padding: 0 4px; } + +StEntry StLabel.hint-text { + margin-left: 2px; + color: rgba(92, 97, 108, 0.7); } /* Buttons */ -.button { +.button, .login-dialog-button, .icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { min-height: 22px; } +.icon-button, .login-dialog-button.cancel-button, .login-dialog-button.switch-user-button, .login-dialog-button.login-dialog-session-list-button, .background-app-item .close-button { + border-radius: 99px; + padding: 12px; + min-height: 16px; } + .icon-button StIcon, .login-dialog-button.cancel-button StIcon, .login-dialog-button.switch-user-button StIcon, .login-dialog-button.login-dialog-session-list-button StIcon, .background-app-item .close-button StIcon { + icon-size: 1.09em; + -st-icon-style: symbolic; } + /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } @@ -405,40 +408,50 @@ StScrollBar { .popup-menu-content, .candidate-popup-content { padding: 6px; + background-color: #ffffff; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.8); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); - background-color: #ffffff; } + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .popup-menu-item { - padding: 9px 12px; - border-radius: 12px; + font-weight: normal; spacing: 6px; transition-duration: 100ms; - background-color: transparent; } + padding: 9px 12px; + transition-duration: 100ms; + background-color: transparent; + background-color: none; + box-shadow: none; + box-shadow: none !important; + border-radius: 12px; } .popup-menu-item:ltr { padding-left: 6px; } .popup-menu-item:rtl { padding-right: 6px; } - .popup-menu-item:focus, .popup-menu-item:hover { - background-color: #f2f2f2 !important; } - .popup-menu-item:focus:active, .popup-menu-item:hover:active { - background-color: #ededed !important; } - .popup-menu-item:checked { - background-color: #e8e8e8 !important; } - .popup-menu-item:checked { - margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 #dbdbdb; - border-radius: 8px 8px 0 0; } - .popup-menu-item:checked:focus, .popup-menu-item:checked:hover { - background-color: #f0f0f0 !important; } - .popup-menu-item:checked:active { - background-color: whitesmoke !important; } - .popup-menu-item:active { - background-color: #fafafa; - color: #50555e; } .popup-menu-item:insensitive { - color: rgba(92, 97, 108, 0.5); } + transition-duration: 100ms; + 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); } + .popup-menu-item:focus, .popup-menu-item:hover { + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } + .popup-menu-item:active { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-menu-item:checked { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-menu-item:checked:hover { + background-color: white; } + .popup-menu-item:checked:active { + background-color: white; } + .popup-menu-item:checked { + border-radius: 12px 12px 0 0 !important; } .popup-menu-item .toggle-switch:ltr { margin-left: 4px; } .popup-menu-item .toggle-switch:rtl { @@ -454,27 +467,47 @@ StScrollBar { icon-size: 16px !important; } .popup-sub-menu { - background-color: #e8e8e8; - border-radius: 0 0 8px 8px; } + border-radius: 0 0 13px 13px; + margin-bottom: 6px; } .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; } + font-weight: normal; + spacing: 6px; + transition-duration: 100ms; + padding: 9px 12px; + transition-duration: 100ms; + color: #5c616c; + background-color: #f0f1f2; + border-top-width: 0; } + .popup-sub-menu .popup-menu-item:ltr { + padding-left: 6px; } + .popup-sub-menu .popup-menu-item:rtl { + padding-right: 6px; } .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover { - background-color: #f2f2f2 !important; } - .popup-sub-menu .popup-menu-item:checked { - background-color: #e8e8e8 !important; } - .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover { - background-color: #fcfcfc !important; } + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } .popup-sub-menu .popup-menu-item:active { - background-color: #ededed !important; } + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-sub-menu .popup-menu-item:checked { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .popup-sub-menu .popup-menu-item:checked:hover { + background-color: white; } + .popup-sub-menu .popup-menu-item:checked:active { + background-color: white; } + .popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 12px 12px; + border-bottom-width: 0; } .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; } + border-radius: 0 0 12px 12px; } .popup-menu-ornament { width: 1.2em; @@ -485,12 +518,7 @@ StScrollBar { text-align: left; } .popup-separator-menu-item { - margin: 6px 0; - padding: 0 !important; } - .popup-separator-menu-item:ltr { - margin-right: 4px; } - .popup-separator-menu-item:rtl { - margin-left: 4px; } + border: none !important; } .popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; background-color: #d9d9d9; } @@ -503,7 +531,7 @@ StScrollBar { .popup-sub-menu .popup-separator-menu-item:rtl { margin-left: 2.5em; } .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { - background-color: #ebebeb; } + background-color: #d9d9d9; } .background-menu { -boxpointer-gap: 0px; @@ -533,9 +561,8 @@ StScrollBar { /* today button (the date) */ .datemenu-today-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -548,31 +575,30 @@ StScrollBar { background-color: rgba(92, 97, 108, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .datemenu-today-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .datemenu-today-button:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .datemenu-today-button:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .datemenu-today-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .datemenu-today-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .datemenu-today-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .datemenu-today-button:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .datemenu-today-button:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } /* Calendar */ .calendar { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; background-color: transparent; background-color: none; @@ -585,37 +611,36 @@ StScrollBar { background-color: rgba(92, 97, 108, 0.05); background-color: transparent; color: rgba(255, 255, 255, 0.5); } - .calendar:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .calendar:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .calendar:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .calendar:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .calendar:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .calendar:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .calendar:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .calendar:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .calendar .calendar-month-header .calendar-change-month-back StIcon, .calendar .calendar-month-header .calendar-change-month-forward StIcon { icon-size: 1.09em; } .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; margin: 2px; - border-radius: 6px; } + border-radius: 8px; } .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus { background-color: #f2f2f2; } .calendar .calendar-month-header .pager-button:active { @@ -643,7 +668,9 @@ StScrollBar { color: #aeb0b6; padding-top: 6px; height: 16px !important; - font-weight: bold; } + font-weight: 600; } + .calendar .calendar-day { + font-weight: 600; } .calendar .calendar-nonwork-day { color: #aeb0b6; } .calendar .calendar-other-month-day { @@ -673,37 +700,36 @@ StScrollBar { margin: 6px; padding: 0 6px; border-radius: 3px; - background-color: #fafafa; + background-color: rgba(92, 97, 108, 0.1); color: #aeb0b6; } /* Events */ .events-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; + background-color: #f0f1f2; padding: 12px; } - .events-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .events-button:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .events-button:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .events-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .events-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .events-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .events-button:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .events-button:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .events-button .events-box { spacing: 6px; } .events-button .events-list { @@ -716,32 +742,31 @@ StScrollBar { /* World clocks */ .world-clocks-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; + background-color: #f0f1f2; padding: 12px; } - .world-clocks-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .world-clocks-button:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .world-clocks-button:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .world-clocks-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .world-clocks-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .world-clocks-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .world-clocks-button:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .world-clocks-button:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } @@ -760,32 +785,31 @@ StScrollBar { /* Weather */ .weather-button { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; + background-color: #f0f1f2; padding: 12px; } - .weather-button:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .weather-button:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .weather-button:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .weather-button:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .weather-button:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .weather-button:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .weather-button:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .weather-button:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .weather-button .weather-box { spacing: 10px; } .weather-button .weather-header-box { @@ -850,31 +874,30 @@ StScrollBar { border-color: rgba(164, 0, 164, 0.6); } .message { - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; } - .message:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .message:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .message:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + background-color: #f0f1f2; } .message:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .message:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .message:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .message:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .message:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .message .message-icon-bin { padding: 18px; } .message .message-icon-bin:ltr { @@ -1058,10 +1081,14 @@ StScrollBar { padding: 0 4px; } /* Modal Dialogs */ -.modal-dialog .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; - max-width: 28em; } +.modal-dialog { + background-color: #ffffff; + border-radius: 16px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); } + .modal-dialog .modal-dialog-content-box { + margin: 32px 40px; + spacing: 32px; + max-width: 28em; } /* End Session Dialog */ .end-session-dialog { @@ -1235,8 +1262,8 @@ StScrollBar { spacing: 24px; } .switcher-list { - padding: 10px; - border-radius: 24px; + padding: 12px; + border-radius: 28px; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); } .switcher-list .switcher-list-item-container { spacing: 12px; } @@ -1588,28 +1615,29 @@ StScrollBar { .quick-settings { padding: 18px; border-radius: 36px; } - .quick-settings .icon-button, .quick-settings .button { + .quick-settings .icon-button, .quick-settings .background-app-item .close-button, .background-app-item .quick-settings .close-button, .quick-settings .button, .quick-settings .login-dialog-button { padding: 10.5px; } .quick-settings-grid { spacing-rows: 12px; spacing-columns: 12px; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; - min-height: 40px; - border: none; + min-height: 48px; + border: none; } + +.quick-toggle { /* Move padding into the box; this is to allow menu arrows to extend to the border */ } .quick-toggle:checked { transition-duration: 100ms; background-color: #a400a4; - color: #ffffff; - box-shadow: none; } + color: #ffffff; } .quick-toggle:checked:focus { - box-shadow: inset 0 0 0 2px #d700d7; } + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } .quick-toggle:checked:hover, .quick-toggle:checked:focus { background-color: #be00be; color: white; } @@ -1623,8 +1651,8 @@ StScrollBar { background-color: rgba(164, 0, 164, 0.5); color: rgba(255, 255, 255, 0.5); } .quick-toggle > StBoxLayout { - spacing: 6px; } - .quick-toggle.button { + spacing: 9px; } + .quick-toggle.button, .quick-toggle.login-dialog-button, .quick-toggle.icon-button, .background-app-item .quick-toggle.close-button { padding: 0; } .quick-toggle > StBoxLayout { padding: 0 12px; } @@ -1632,54 +1660,105 @@ StScrollBar { padding-left: 15px; } .quick-toggle:rtl > StBoxLayout { padding-right: 15px; } - .quick-toggle .quick-toggle-label { + .quick-toggle .quick-toggle-title { font-weight: bold; } - .quick-toggle .quick-toggle-icon, .quick-toggle .quick-toggle-arrow { + .quick-toggle StBoxLayout > .quick-toggle-subtitle { + font-weight: normal; + font-size: 12px; } + .quick-toggle .quick-toggle-icon { icon-size: 1.09em; } -.quick-menu-toggle:ltr > StBoxLayout { - padding-right: 0; } - -.quick-menu-toggle:rtl > StBoxLayout { - padding-left: 0; } +.quick-menu-toggle .quick-toggle { + min-width: auto; + max-width: auto; } + .quick-menu-toggle .quick-toggle:ltr { + border-radius: 99px 0 0 99px; } + .quick-menu-toggle .quick-toggle:rtl { + border-radius: 0 99px 99px 0; } + .quick-menu-toggle .quick-toggle:ltr:last-child { + border-radius: 99px; } + .quick-menu-toggle .quick-toggle:rtl:last-child { + border-radius: 99px; } .quick-menu-toggle .quick-toggle-arrow { - background-color: rgba(92, 97, 108, 0.1); - padding: 6px 10.5px; } - .quick-menu-toggle .quick-toggle-arrow:ltr { - border-radius: 0 99px 99px 0; } - .quick-menu-toggle .quick-toggle-arrow:rtl { - border-radius: 99px 0 0 99px; } - -.quick-slider { - padding: 0 6px; } - .quick-slider > StBoxLayout { - spacing: 6px; } - .quick-slider .slider-bin { - min-height: 16px; - padding: 6px; - border-radius: 99px; } - .quick-slider .slider-bin:focus { + padding: 6px 10.5px; + border-width: 0; } + .quick-menu-toggle .quick-toggle-arrow:checked { + transition-duration: 100ms; + background-color: #a400a4; + color: #ffffff; + border-color: #580058; } + .quick-menu-toggle .quick-toggle-arrow:checked:focus { + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important; } + .quick-menu-toggle .quick-toggle-arrow:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:focus { + background-color: #be00be; + color: white; } + .quick-menu-toggle .quick-toggle-arrow:checked:active { + background-color: purple; + color: #ededed; } + .quick-menu-toggle .quick-toggle-arrow:checked:insensitive { transition-duration: 100ms; - color: #5c616c; - background-color: #efdef0; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .quick-slider .slider-bin:focus:hover { - background-color: #f6e6f6; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .quick-slider .slider-bin:focus:active { - background-color: #f6e6f6; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .quick-slider .quick-toggle-icon { - icon-size: 1.09em; } - .quick-slider .icon-button { - background-color: transparent; } + color: rgba(92, 97, 108, 0.5); + background-color: rgba(92, 97, 108, 0.05); + background-color: rgba(164, 0, 164, 0.5); + color: rgba(255, 255, 255, 0.5); } + .quick-menu-toggle .quick-toggle-arrow:ltr { + border-radius: 0 99px 99px 0; + border-left-width: 1px; } + .quick-menu-toggle .quick-toggle-arrow:rtl { + border-radius: 99px 0 0 99px; + border-right-width: 1px; } + +.quick-slider > StBoxLayout { + spacing: 6px; } + +.quick-slider .icon-button, .quick-slider .login-dialog-button.cancel-button, .quick-slider .login-dialog-button.switch-user-button, .quick-slider .login-dialog-button.login-dialog-session-list-button, .quick-slider .background-app-item .close-button, .background-app-item .quick-slider .close-button { + padding: 6px; } + +.quick-slider .slider-bin { + min-height: 16px; + padding: 6px; + border-radius: 99px; } + .quick-slider .slider-bin:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .quick-slider .slider-bin:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .quick-slider .slider-bin:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .quick-toggle-menu { - background-color: #f2f2f2; + border-radius: 12px; + margin: 4px; + transition-duration: 100ms; + color: #5c616c; + background-color: #f0f1f2; border-radius: 24px; padding: 12px; margin: 12px 18px 0; } + .quick-toggle-menu:hover { + transition-duration: 100ms; + color: #5c616c; + background-color: #f8f9f9; } + .quick-toggle-menu:active { + transition-duration: 100ms; + color: #5c616c; + background-color: white; } + .quick-toggle-menu:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .quick-toggle-menu:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .quick-toggle-menu:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .quick-toggle-menu .popup-menu-item > StIcon { -st-icon-style: symbolic; } .quick-toggle-menu .header { @@ -1690,28 +1769,51 @@ StScrollBar { icon-size: 1.635em; border-radius: 999px; padding: 9px; - background-color: white; } + background-color: rgba(92, 97, 108, 0.2); } .quick-toggle-menu .header .icon.active { background-color: #a400a4; } .quick-settings-system-item > StBoxLayout { spacing: 12px; } -.quick-settings-system-item .icon-button > StIcon { - -st-icon-style: symbolic; } - .quick-settings-system-item .power-item { min-height: 0; min-width: 0; } .quick-settings-system-item .power-item:insensitive { transition-duration: 100ms; color: #5c616c; - background-color: #f7f7f8; + background-color: #f0f1f2; background-color: transparent; } .nm-network-item .wireless-secure-icon { icon-size: 0.545em; } +.bt-device-item .popup-menu-icon { + -st-icon-style: symbolic; } + +.bt-menu-placeholder { + text-align: center; + padding: 2em 4em; } + +.device-subtitle { + color: rgba(92, 97, 108, 0.5); } + +.background-apps-quick-toggle { + min-height: 40px; + background-color: transparent; } + .background-apps-quick-toggle StIcon { + icon-size: 1.09em !important; } + +.background-app-item .popup-menu-icon { + icon-size: 2.18em !important; + -st-icon-style: regular !important; } + +.background-app-item .close-button { + padding: 6px; } + +.background-app-item.popup-inactive-menu-item { + color: #5c616c; } + /* OVERVIEW */ .controls-manager, .secondary-monitor-workspaces { spacing: 12px; } @@ -1726,12 +1828,6 @@ StScrollBar { .window-picker { spacing: 6px; } -.window-caption { - color: white; - background-color: #3b3f4e; - border-radius: 99px; - padding: 6px 12px; } - .window-close, .screenshot-ui-close-button { background-color: rgba(63, 68, 84, 0.98); color: white; @@ -1753,34 +1849,12 @@ StScrollBar { background-color: rgba(3, 2, 1, 0); box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); } - .search-entry { - border-radius: 18px; + border-radius: 99px; margin-top: 12px; margin-bottom: 6px; - padding: 7px 9px; - width: 320px; - background-color: white; - color: rgba(92, 97, 108, 0.7); - border: 2px solid white; } - - .search-entry:hover { - background-color: white; - border-color: white; - color: rgba(92, 97, 108, 0.7); } - - .search-entry:focus { - background-color: #faf2fa; - border-color: #a400a4; - color: #5c616c; } - - .search-entry:insensitive { - background-color: white; - border-color: white; - color: #aeb0b6; } - + width: 24em; } .search-entry .search-entry-icon { - color: inherit; icon-size: 1.09em; margin-top: 2px; padding: 0 4px; } @@ -1801,7 +1875,7 @@ StScrollBar { .search-section-content { background-color: #323643; border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px solid rgba(255, 255, 255, 0.8); color: white; padding: 12px; margin: 0 12px; } @@ -1887,7 +1961,8 @@ StScrollBar { margin-right: 0; } .dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon { - padding: 6px; } + padding: 6px; + border-radius: 16px; } .dash-item-container .show-apps { transition-duration: 400ms; } @@ -1923,11 +1998,6 @@ StScrollBar { margin-bottom: 12px; } .dash-label { - color: white; - background-color: #303340; - border-radius: 99px; - padding: 6px 12px; - text-align: center; -y-offset: 8px; } /* App Grid */ @@ -1966,43 +2036,47 @@ StScrollBar { border: 2px solid rgba(164, 0, 164, 0.8); background-color: rgba(164, 0, 164, 0.2); } .app-well-app .overview-icon, .grid-search-result .overview-icon { - padding: 12px; } + padding: 12px; + border-radius: 24px; } .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.app-folder, .app-folder.grid-search-result { transition-duration: 400ms; } .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { - background-color: rgba(255, 255, 255, 0.19); } + background-color: rgba(92, 97, 108, 0.07); } .app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon { - background-color: rgba(255, 255, 255, 0.1); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 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); } + background-color: rgba(92, 97, 108, 0.25); } .app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { border: 2px solid rgba(164, 0, 164, 0.8); background-color: rgba(164, 0, 164, 0.2); } .app-folder-dialog { - border-radius: 32px; - background-color: #323643; } + border-radius: 64px; + background-color: #ffffff; + padding: 12px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); } .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-entry { - width: 300px; } + width: 12em; + border-radius: 16px; } .app-folder-dialog .folder-name-container .folder-name-label { padding: 5px 7px; color: white; } @@ -2054,7 +2128,7 @@ StScrollBar { .system-action-icon { background-color: rgba(0, 0, 0, 0.8); - color: #fff; + color: white; border-radius: 99px; icon-size: 48px; } @@ -2073,34 +2147,31 @@ StScrollBar { background-gradient-direction: horizontal; border-radius: 0px 24px 24px 0px; } -.page-navigation-arrow > StIcon { +.page-navigation-arrow { margin: 6px; padding: 18px; width: 24px; height: 24px; border-radius: 99px; } - -.page-navigation-arrow:insensitive > StIcon { - transition-duration: 100ms; - background-color: transparent; - background-color: none; - box-shadow: none; } - .page-navigation-arrow:insensitive > StIcon:insensitive { + .page-navigation-arrow:insensitive { transition-duration: 100ms; - 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); } - -.page-navigation-arrow:hover > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(83, 86, 98, 0.525); } - -.page-navigation-arrow:active > StIcon { - transition-duration: 100ms; - color: white; - background-color: rgba(90, 94, 107, 0.525); } + background-color: none; + box-shadow: none; } + .page-navigation-arrow:insensitive:insensitive { + transition-duration: 100ms; + 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); } + .page-navigation-arrow:hover { + transition-duration: 100ms; + color: white; + background-color: rgba(102, 105, 115, 0.545); } + .page-navigation-arrow:active { + transition-duration: 100ms; + color: white; + background-color: rgba(117, 120, 131, 0.545); } /* Workspace pager */ .workspace-thumbnails { @@ -2108,7 +2179,10 @@ StScrollBar { spacing: 6px; padding: 6px; } .workspace-thumbnails .workspace-thumbnail { - border-radius: 3px; } + color: white; + background-color: #3d4251; + border-radius: 4px; + border: 1px solid transparent; } .workspace-thumbnails .placeholder { background-image: url("assets/workspace-placeholder.svg"); background-size: contain; @@ -2116,8 +2190,7 @@ StScrollBar { .workspace-thumbnail-indicator { border: 3px solid #a400a4; - border-radius: 3px; - padding: 0px; } + border-radius: 8px; } .ripple-pointer-location { width: 50px; @@ -2147,8 +2220,6 @@ StScrollBar { color: white; border-radius: 99px; icon-size: 4.36em; } - .user-icon:hover { - color: white; } .user-icon StIcon { background-color: rgba(255, 255, 255, 0.05); border-radius: 99px; @@ -2156,16 +2227,7 @@ StScrollBar { width: 2.725em; height: 2.725em; } .user-icon.user-avatar { - border: 2px white; } - -.user-widget.vertical .user-icon { - icon-size: 6.54em; } - .user-widget.vertical .user-icon StIcon { - padding: 20px; - padding-top: 18px; - padding-bottom: 22px; - width: 5.995em; - height: 5.995em; } + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .lightbox { background-color: black; } @@ -2354,11 +2416,11 @@ StScrollBar { /* Looking Glass */ #LookingGlassDialog { - background-color: #303340; + background-color: rgba(255, 255, 255, 0.95); border-radius: 0 0 16px 16px; + border: 1px solid rgba(255, 255, 255, 0.8); border-top-width: 0; - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; + color: #5c616c; padding: 6px; spacing: 6px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } @@ -2377,20 +2439,7 @@ StScrollBar { #LookingGlassDialog .notebook-tab { -natural-hpadding: 12px; -minimum-hpadding: 12px; - font-weight: bold; - padding: 6px 12px; - color: #d9d9d9; - transition-duration: 100ms; - box-shadow: none; - border: none; - border-radius: 6px; - background-color: transparent; } - #LookingGlassDialog .notebook-tab:hover { - color: white; - background-color: rgba(255, 255, 255, 0.05); } - #LookingGlassDialog .notebook-tab:selected { - color: white; - background-color: rgba(255, 255, 255, 0.1); } + padding: 6px 12px; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 6px; @@ -2400,12 +2449,7 @@ StScrollBar { padding: 6px; } .lg-dialog StEntry { - background-color: rgba(59, 63, 78, 0.6); - color: white; - border-color: rgba(255, 255, 255, 0.2); - min-height: 22px; - selection-background-color: #a400a4; - selected-color: #ffffff; } + min-height: 22px; } .lg-dialog .shell-link { color: #710071; } @@ -2430,11 +2474,11 @@ StScrollBar { spacing: 6px; } .lg-obj-inspector-button { - border: 1px solid black; + border: 1px solid #d9d9d9; padding: 4px; border-radius: 8px; } .lg-obj-inspector-button:hover { - border: 1px solid #ffffff; } + border: 1px solid #5c616c; } #lookingGlassExtensions { padding: 6px; } @@ -2445,38 +2489,37 @@ StScrollBar { .lg-extension { padding: 12px; - border-radius: 8px; + border-radius: 12px; margin: 4px; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); transition-duration: 100ms; color: #5c616c; - background-color: #ebebec; } - .lg-extension:focus { - transition-duration: 100ms; - color: #5c616c; - background-color: #e4d4e5; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } - .lg-extension:focus:hover { - background-color: #ebdbec; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } - .lg-extension:focus:active { - background-color: #f2e2f2; - box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + background-color: #f0f1f2; } .lg-extension:hover { transition-duration: 100ms; color: #5c616c; - background-color: #f3f3f3; } + background-color: #f8f9f9; } .lg-extension:active { transition-duration: 100ms; color: #5c616c; - background-color: #fbfbfb; } + background-color: white; } + .lg-extension:focus { + transition-duration: 100ms; + color: #5c616c; + background-color: #e8d9ea; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.6) !important; } + .lg-extension:focus:hover { + background-color: #f0e0f1; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } + .lg-extension:focus:active { + background-color: #f6e6f6; + box-shadow: inset 0 0 0 2px rgba(164, 0, 164, 0.7) !important; } .lg-extension-meta { spacing: 6px; } #LookingGlassPropertyInspector { - background: #303340; - border: 1px solid black; + background: #ffffff; + border: 1px solid #d9d9d9; border-radius: 8px; padding: 6px; } @@ -2493,100 +2536,31 @@ StScrollBar { padding-top: 12px; padding: 6px; } -/* Login Dialog */ -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; } +.login-dialog .caps-lock-warning-label, +.login-dialog .login-dialog-message-warning, +.unlock-dialog .caps-lock-warning-label, +.unlock-dialog .login-dialog-message-warning { + color: white; } -.login-dialog, -.unlock-dialog { - border: none; - background-color: transparent; } - .login-dialog .modal-dialog-button-box, - .unlock-dialog .modal-dialog-button-box { - spacing: 3px; } - .login-dialog .modal-dialog-button, - .unlock-dialog .modal-dialog-button { - padding: 4px 18px; - background-color: #20232b; - border-color: #20232b; - color: white; } - .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, - .unlock-dialog .modal-dialog-button:hover, - .unlock-dialog .modal-dialog-button:focus { - background-color: #323643; - border-color: #323643; } - .login-dialog .modal-dialog-button:active, - .unlock-dialog .modal-dialog-button:active { - background-color: #1c1e25; - border-color: #1c1e25; } - .login-dialog .modal-dialog-button:insensitive, - .unlock-dialog .modal-dialog-button:insensitive { - transition-duration: 100ms; - 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 { - transition-duration: 100ms; - background-color: #a400a4; - color: #ffffff; - box-shadow: none; } - .login-dialog .modal-dialog-button:default:focus, - .unlock-dialog .modal-dialog-button:default:focus { - box-shadow: inset 0 0 0 2px #d700d7; } - .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 { - background-color: #be00be; - color: white; } - .login-dialog .modal-dialog-button:default:active, - .unlock-dialog .modal-dialog-button:default:active { - background-color: purple; - color: #ededed; } - .login-dialog .modal-dialog-button:default:insensitive, - .unlock-dialog .modal-dialog-button:default:insensitive { - transition-duration: 100ms; - color: rgba(92, 97, 108, 0.5); - background-color: rgba(92, 97, 108, 0.05); - background-color: rgba(164, 0, 164, 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, - .unlock-dialog .cancel-button, - .unlock-dialog .switch-user-button, - .unlock-dialog .login-dialog-session-list-button { - padding: 0; - border-radius: 99px; - width: 2.18em; - height: 2.18em; - border-color: #20232b; - background-color: #20232b; } - .login-dialog .cancel-button StIcon, - .login-dialog .switch-user-button StIcon, - .login-dialog .login-dialog-session-list-button StIcon, - .unlock-dialog .cancel-button StIcon, - .unlock-dialog .switch-user-button StIcon, - .unlock-dialog .login-dialog-session-list-button StIcon { - icon-size: 1.09em; } - .login-dialog .caps-lock-warning-label, - .login-dialog .login-dialog-message-warning, - .unlock-dialog .caps-lock-warning-label, - .unlock-dialog .login-dialog-message-warning { - color: white; } +/* Login Dialog */ +.login-dialog { + background-color: #272a34; } + +.login-dialog-button.cancel-button { + padding: 9px; } + +.login-dialog-button-box { + width: 23em; + spacing: 12px; } .login-dialog-logo-bin { - padding: 24px 0px; } + margin: 3em 0; } .login-dialog-banner { color: #e6e6e6; } -.login-dialog-button-box { - width: 23em; - spacing: 5px; } +.login-dialog-banner-view { + max-width: 23em; } .login-dialog-message { text-align: center; } @@ -2595,14 +2569,14 @@ StScrollBar { padding: 100px 0px; } .login-dialog-not-listed-label { - padding-left: 2px; } - .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { - color: white; } - -.login-dialog-not-listed-label { + font-size: 10pt; font-weight: bold; color: #b3b3b3; - padding-top: 1em; } + padding: 12px; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { + color: white; } + .login-dialog-not-listed-button:focus .login-dialog-not-listed-label { + text-decoration: underline; } .login-dialog-auth-list-view { -st-vfade-offset: 1em; } @@ -2615,8 +2589,8 @@ StScrollBar { margin-left: 2em; } .login-dialog-auth-list-item { - border-radius: 12px; - padding: 6px; + border-radius: 16px; + padding: 4px; color: #b3b3b3; } .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected { background-color: #a400a4; @@ -2639,98 +2613,68 @@ StScrollBar { .login-dialog-user-list { spacing: 12px; width: 23em; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { - background-color: #a400a4; - color: #ffffff; } - .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { - border-right: 2px solid #a400a4; } - -.login-dialog-user-list-item { - border-radius: 12px; - padding: 6px; - color: #b3b3b3; } - .login-dialog-user-list-item:ltr .user-widget { - padding-right: 1em; } - .login-dialog-user-list-item:rtl .user-widget { - padding-left: 1em; } - .login-dialog-user-list-item .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: white; } - .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: #ffffff; } - -.user-widget-label { - color: white; } - -.user-widget.horizontal .user-widget-label { - font-size: 12pt; - font-weight: bold; - padding-left: 15px; } - .user-widget.horizontal .user-widget-label:ltr { - padding-left: 14px; - text-align: left; } - .user-widget.horizontal .user-widget-label:rtl { - padding-right: 14px; - text-align: right; } - -.user-widget.vertical .user-widget-label { - font-size: 15pt; - text-align: center; - font-weight: normal; - padding-top: 16px; } - -.login-dialog-timed-login-indicator { - height: 2px; - background-color: black; } + .login-dialog-user-list .login-dialog-user-list-item { + border-radius: 12px; + padding: 6px; + background-color: rgba(255, 255, 255, 0.05); + color: white; } + .login-dialog-user-list .login-dialog-user-list-item .user-widget .user-icon { + border: 4px solid transparent; } + .login-dialog-user-list .login-dialog-user-list-item .login-dialog-timed-login-indicator { + height: 2px; + margin-top: 6px; + background-color: #b3b3b3; } + .login-dialog-user-list .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { + background-color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item { + transition-duration: 300ms; + transition-timing-function: ease; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:hover { + background-color: rgba(255, 255, 255, 0.1); + color: white; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected { + background-color: #a400a4; + color: #ffffff; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:selected:hover { + background-color: #be00be; } + .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in .user-widget .user-icon { + border-color: #a400a4; } .login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; spacing: 12px; - width: 23em; } - -.login-dialog-prompt-entry { - height: 1.5em; } - -.login-dialog-prompt-label { - color: #cccccc; - font-size: 11pt; - 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); } + width: 26em; } /* Screen Shield */ +.unlock-dialog { + background-color: transparent; } + +.screen-shield-background { + background: black; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } + +#lockDialogGroup { + background-color: #272a34; } + .unlock-dialog-clock { color: white; - font-weight: 300; - text-align: center; - spacing: 24px; - padding-bottom: 2.5em; } + spacing: 2em; } + .unlock-dialog-clock .unlock-dialog-clock-time { + font-size: 72pt; + font-weight: 200; } + .unlock-dialog-clock .unlock-dialog-clock-date { + font-weight: 400; } + .unlock-dialog-clock .unlock-dialog-clock-hint { + margin-top: 2em; + padding: 6px 18px; + border-radius: 16px; + font-weight: bold; } -.unlock-dialog-clock-time { - font-size: 64pt; - padding-top: 42px; } - -.unlock-dialog-clock-date { - font-size: 16pt; - font-weight: normal; } - -.unlock-dialog-clock-hint { - font-weight: normal; - padding-top: 48px; } +#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { + background-color: rgba(255, 255, 255, 0.3); } + #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { + background-color: rgba(255, 255, 255, 0.5); } + #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { + background-color: rgba(164, 0, 164, 0.5); } .unlock-dialog-notifications-container { margin: 12px; @@ -2765,19 +2709,33 @@ StScrollBar { background-color: rgba(255, 255, 255, 0.1); border-radius: 99px; } -.screen-shield-background { - background: black; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } +.user-widget .user-widget-label { + color: white; } -#lockDialogGroup { - background-color: #272a34; } +.user-widget.horizontal { + spacing: 18px; } + .user-widget.horizontal .user-icon StIcon { + padding: 12px; + icon-size: 2.18em; + width: 3.27em; + height: 3.27em; + background-color: rgba(255, 255, 255, 0.1); } -#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { - background-color: rgba(255, 255, 255, 0.3); } - #unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { - background-color: rgba(255, 255, 255, 0.5); } - #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { - background-color: rgba(164, 0, 164, 0.5); } +.user-widget.vertical { + spacing: 24px; } + .user-widget.vertical .user-widget-label { + text-align: center; + margin-bottom: .75em; } + .user-widget.vertical .user-icon { + icon-size: 10.9em; } + .user-widget.vertical .user-icon StIcon { + padding: 32px; + icon-size: 4.36em; + background-color: rgba(255, 255, 255, 0.1); } + +.workspace-thumbnails .workspace-thumbnail, .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .dash-background, .dash-separator, .search-section-content, .search-entry { + background-color: rgba(255, 255, 255, 0.1); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .icon-dropshadow { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } @@ -2874,7 +2832,6 @@ StScrollBar { color: black; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); font-weight: bold; - background-color: rgba(255, 255, 255, 0.1); font-size: 1.1em; transition-duration: 200ms; } .search-entry StLabel.hint-text { @@ -2898,10 +2855,6 @@ StScrollBar { color: white; icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } -.search-section-content { - background-color: rgba(255, 255, 255, 0.1); - border: none; } - .search-provider-icon .list-search-provider-details { font-weight: bold; } @@ -2914,13 +2867,40 @@ StScrollBar { #dash StIcon { icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } -.dash-background, .dash-separator { - background: rgba(255, 255, 255, 0.1); } - /* App Grid */ -.app-well-app, .grid-search-result { +#overview { color: white; } +.app-well-app.app-folder, .app-folder.grid-search-result { + transition-duration: 400ms; } + .app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon { + background-color: rgba(255, 255, 255, 0.07); } + .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(164, 0, 164, 0.8); + background-color: rgba(164, 0, 164, 0.2); } + .app-folder-dialog { background: black; - box-shadow: 0 0 20px #030303; } + box-shadow: 0 0 100px #0a0a0a; } + .app-folder-dialog .folder-name-container .folder-name-entry { + color: white; } + +/* Workspace pager */ +.workspace-thumbnail-indicator { + border: 2px solid white; } diff --git a/src/themes/Kali/sass/common/_colors.scss b/src/themes/Kali/sass/common/_colors.scss index fb2d2f16..03af6561 100644 --- a/src/themes/Kali/sass/common/_colors.scss +++ b/src/themes/Kali/sass/common/_colors.scss @@ -3,7 +3,7 @@ $_dark_base_color: #272a34; -$is_highcontrast: "false"; +$is_highcontrast: false; $base_color: if($variant == 'light', darken(#ffffff, 2%), $_dark_base_color); $text_color: if($variant == 'light', black, white); @@ -16,6 +16,7 @@ $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), $borders_color: if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 10%)); $alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%)); $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); +$outer_borders_color: $borders_edge; $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); $top_hilight: $borders_edge; @@ -43,7 +44,7 @@ $osd_bg_color: lighten($_dark_base_color, 4%); $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); $osd_borders_color: black; -$osd_outer_borders_color: transparentize(white, 0.9); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.9); $sidebar_bg_color: mix($bg_color, $base_color, 50%); $base_hover_color: transparentize($fg_color, 0.95); @@ -56,13 +57,10 @@ $shadow_color: transparentize(black, if($variant == 'light', 0.9, 0.7)); $system_bg_color: $_dark_base_color; // button -$button_mix_factor: 5%; - -// cards -$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%)); +$button_mix_factor: 9%; // notifications -$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%)); +$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); $drop_target_color: #19a187; diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss index c92ab68f..3c549def 100644 --- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss @@ -1,6 +1,12 @@ -$overview_transparent_bg: transparentize(white, .9); $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8); +%overview-transparent-bg { + $_overview_transparent_bg: transparentize(white, .9); + + background-color: $_overview_transparent_bg; + box-shadow: inset 0 0 0 1px $_overview_transparent_bg; +} + // Dropshadow for large icons .icon-dropshadow { icon-shadow: 0 1px 5px $shadow_color; @@ -128,34 +134,39 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8); .datemenu-today-button { &:insensitive { color: inherit; } } +/* Quick Settings */ +.quick-toggle-menu { + & .header { + & .icon { + &.active { color: $selected_fg_color; } + } + } +} /* Search */ // search entry .search-entry { $_text-shadow: 0px 1px 2px transparentize(black, 0.5); - color: black; - text-shadow: $_text-shadow; - font-weight: bold; - background-color: $overview_transparent_bg; + + @extend %overview-transparent-bg; + + width: 21em; + padding: .6em .8em; font-size: 1.1em; + font-weight: bold; + border: none; + text-shadow: $_text-shadow; transition-duration: 200ms; - StLabel.hint-text { color: $osd_fg_color; } - - &, &:focus, &:hover { - width: 21em; - padding: .6em .8em; - border: none; - } + &, StLabel.hint-text { color: $osd_fg_color; } &:focus, &:hover { background-color: white; - color: black; font-weight: normal; box-shadow: none; text-shadow: none; - StLabel.hint-text { color: black; } + &, StLabel.hint-text { color: black; } .search-entry-icon { color: black; @@ -171,8 +182,7 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8); // search results .search-section-content { - background-color: $overview_transparent_bg; - border: none; + @extend %overview-transparent-bg; } // search result provider @@ -191,13 +201,35 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8); } } -.dash-background, .dash-separator { background: $overview_transparent_bg; } +.dash-background, .dash-separator { + @extend %overview-transparent-bg; +} /* App Grid */ +#overview { color: $osd_fg_color; } + // Icon tiles in the app grid -.app-well-app { color: white; } +.app-well-app.app-folder { + @include overview_icon(white, $flat: false); + .overview-icon { + @extend %overview-transparent-bg; + } +} .app-folder-dialog { background: black; - box-shadow: 0 0 20px lighten(black, 1%); + box-shadow: 0 0 100px lighten(black, 4%); + + & .folder-name-container .folder-name-entry { color: white; } } + +/* Workspace pager */ +// thumbnails in overview +.workspace-thumbnails { + .workspace-thumbnail { + @extend %overview-transparent-bg; + } +} + +// selected indicator +.workspace-thumbnail-indicator { border: 2px solid white; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss index 374bc388..41454e26 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss @@ -5,11 +5,6 @@ $variant: 'dark'; @import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_widgets"; -//force symbolic icons -stage { - -st-icon-style: symbolic; -} - .toggle-switch { width: 48px; } .toggle-switch { background-image: url("assets/toggle-off-hc.svg"); diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss index c42a9554..d2f406b7 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss @@ -3,20 +3,20 @@ @import '_palette.scss'; -$is_highcontrast: "false"; +$is_highcontrast:false; -$_dark_base_color: darken(desaturate(#241f31, 100%), 2%); +$_dark_base_color: desaturate($dark_4, 100%); -$base_color: if($variant == 'light', #fff, $_dark_base_color); -$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%)); +$base_color: if($variant == 'light', $light_1, $_dark_base_color); +$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%)); $fg_color: if($variant == 'light', transparentize(black, .2), white); -$selected_fg_color: #fff; -$selected_bg_color: #3584e4; -$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); +$selected_fg_color: $light_1; +$selected_bg_color: $blue_3; +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%)); $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9)); -$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); +$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); @@ -26,23 +26,20 @@ $error_color: if($variant == 'light', $red_3, $red_4); $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; -$osd_fg_color: white; +$osd_fg_color: $light_1; $osd_bg_color: $_dark_base_color; //hardcoded for both light & dark $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); $osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.9); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); // button -$button_mix_factor: 5%; - -// cards -$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%)); +$button_mix_factor: 9%; // notifications -$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%)); +$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); // overview background color $system_bg_color: $base_color; @@ -60,7 +57,6 @@ $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15 $backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - // derived checked colors $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%)); diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss index de151c5c..47f12665 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss @@ -64,13 +64,9 @@ stage { border: 1px solid $osd_outer_borders_color; border-radius: 999px; padding: $base_padding*2; -} - -// Overview panels -// for the dash and workspace switcher -%overview_panel { - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.9); + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + } } // icon tiles @@ -81,19 +77,14 @@ stage { border: 2px solid transparent; transition-duration: 200ms; text-align: center; -} - -// dialogs -%bubble_panel { - color: $fg_color; - background-color: $bg_color; - border-radius: $base_border_radius*1.25 + 1px; - border: 1px solid $borders_edge; + @if $is_highcontrast { + border-color: $hc_inset_color; + } } // normal button styling %button { - border-radius: $base_border_radius - 2px; // 6px + border-radius: $base_border_radius; border-style: solid; border-width: 1px; font-weight: bold; @@ -103,33 +94,39 @@ stage { &:focus { @include button(focus);} &:hover { @include button(hover);} &:insensitive { @include button(insensitive);} - &:active { @include button(active);} - &:checked { @include button(checked);} -} - -// normal icon-only button -%icon_button { - border-radius: 99px; - border-style: solid; - border-width: 1px; - font-weight: bold; - padding: $base_padding*2; - - @include button(normal); - &:focus { @include button(focus);} - &:hover { @include button(hover);} - &:insensitive { @include button(insensitive);} + &:selected, &:active { @include button(active);} &:checked { @include button(checked);} - & > StIcon { icon-size: $base_icon_size; } + &.flat { + @include button(normal, $flat:true); + &:focus { @include button(focus, $flat:true);} + &:hover { @include button(hover, $flat:true);} + &:insensitive { @include button(insensitive, $flat:true);} + &:selected, + &:active { @include button(active, $flat:true);} + &:checked { @include button(checked, $flat:true);} + } } + +// normal entry style +%entry { + border-radius: $base_border_radius; + padding: $base_padding*1.5 $base_padding*1.5; + color: $fg_color; + selection-background-color: $selected_bg_color; + selected-color: $selected_fg_color; + + @include entry(normal); + &:hover { @include entry(hover);} + &:focus { @include entry(focus);} + &:insensitive { @include entry(insensitive);} +} + + // buttons in dialogs/notifications // lighter in color and have a greater radius - -$bubble_button_radius:$base_border_radius*1.25; - %bubble_button { padding: $base_padding * 2; font-weight: bold !important; @@ -143,27 +140,27 @@ $bubble_button_radius:$base_border_radius*1.25; &:hover { @include button(hover, $c:$bubble_buttons_color);} &:active { @include button(active, $c:$bubble_buttons_color);} &:checked { @include button(checked, $c:$bubble_buttons_color);} - + &:first-child:ltr { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $modal_radius; } &:last-child:ltr { - border-radius: 0 0 $bubble_button_radius 0; + border-radius: 0 0 $modal_radius; margin-right: 0 !important; } &:first-child:rtl { - border-radius: 0 0 $bubble_button_radius 0; + border-radius: 0 0 $modal_radius; } &:last-child:rtl { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $modal_radius; margin-left: 0 !important; } &:first-child:last-child { - border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; + border-radius: 0 0 $modal_radius $modal_radius; margin-left: 0 !important; margin-right: 0 !important; } @@ -180,6 +177,23 @@ $bubble_button_radius:$base_border_radius*1.25; &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} } + +// tooltip +%tooltip { + background-color: $osd_bg_color; + color: $osd_fg_color; + border:1px solid $osd_outer_borders_color; + border-radius: 99px; + padding: $base_padding $base_padding * 2; + text-align: center; + + @if $is_highcontrast { + background-color: $osd_bg_color; + color: $osd_fg_color; + border: 1px solid $hc_inset_color; + } +} + /* General Typography */ %large_title { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss index 8d9a3307..80d59cb3 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss @@ -2,7 +2,7 @@ // generic drawing of more complex things -@function draw_widget_edge($c:$borders_edge) { +@function draw_widget_edge($c:$outer_borders_color) { // outer highlight "used" on most widgets @return 0 1px $c; } @@ -35,29 +35,31 @@ // possible $t values: // normal, focus, insensitive // + transition-duration: 100ms; @if $t==normal { - background-color: lighten($bg_color, 5%); + background-color: transparentize($fg_color, 0.9); color: transparentize($fg_color,0.3); - border: 2px solid lighten($bg_color, 5%); + + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; + } } @if $t==focus { - background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%); - border-color: $fc; + background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%); + box-shadow: inset 0 0 0 2px $fc; color: $fg_color; &:hover {} } @if $t==hover { - background-color:lighten($hover_bg_color, 5%); - border-color:lighten($hover_bg_color, 5%); - color: transparentize($fg_color,0.3); + background-color:transparentize($fg_color, 0.8); + color: inherit; } @if $t==insensitive { - background-color:lighten($insensitive_bg_color, 5%); - border-color: lighten($insensitive_bg_color, 5%); + background-color:transparentize($insensitive_fg_color, 0.8); color: $insensitive_fg_color; } } @@ -143,7 +145,7 @@ // // since buttons are all flat an borderless now the mixin is simpler -@mixin button($t, $tc:$fg_color, $c:$bg_color) { +@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) { $button_bg_color: mix($tc, $c, $button_mix_factor); transition-duration: 100ms; @@ -152,9 +154,35 @@ @if $t==normal { color: $tc; background-color: $button_bg_color; - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px $button_inset_color; + @if $flat { + background-color: transparent; } + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; + } + } + + // hover button + @else if $t==hover { + color: $tc; + background-color: lighten($button_bg_color, 3%); + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color !important; + } + } + + // active button + @else if $t==active { + color: $tc; + background-color: lighten($button_bg_color, 9%); + } + + // checked button + @else if $t==checked { + color: $tc; + background-color: lighten($button_bg_color, 9%); + &:hover { background-color: lighten($button_bg_color, 12%);} + &:active { background-color: lighten($button_bg_color, 15%);} } // focused button @@ -172,57 +200,21 @@ } } - // hover button - @else if $t==hover { - color: $tc; - background-color: lighten($button_bg_color, 3%); - - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%); - background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%); - } - } - - // active button - @else if $t==active { - color: $tc; - background-color: lighten($button_bg_color, 6%); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); - background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); - } - } - - // checked button - @else if $t==checked { - color: $tc; - background-color: lighten($button_bg_color, 9%); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); - background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%); - } - &:hover { background-color: lighten($button_bg_color, 12%);} - &:active { background-color: lighten($button_bg_color, 15%);} - } - // insensitive button @else if $t==insensitive { color: transparentize($tc, 0.5); background-color: transparentize($tc, .95); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5); - } } // default/suggested button @else if $t==default { background-color: $selected_bg_color; color: $selected_fg_color; - box-shadow: none; + &:focus { - box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%); + box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important; } - &:hover, &:focus { + &:hover, &:focus { background-color: lighten($selected_bg_color, 5%); color: lighten($selected_fg_color, 5%); } @@ -257,6 +249,9 @@ background-color: transparent; } @else { background-color: transparentize($color, .84); + @if $is_highcontrast { + box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack + } } &:hover { background-color: transparentize($color, .9);} &:selected, &:focus { @@ -279,11 +274,15 @@ // overview icon, dash, app grid @mixin overview_icon($color, $flat: true) { transition-duration: 400ms; - .overview-icon { @extend %tile; } + .overview-icon { + @extend %tile; + } @if $flat { .overview-icon { background-color: transparent;} } @else { - .overview-icon { background-color: transparentize($color, .81);} + .overview-icon { + background-color: transparentize($color, .93); + } } &:hover .overview-icon { background-color: transparentize($color, .9);} @@ -308,26 +307,44 @@ // styling for elements within popovers that look like notifications @mixin card($flat: false) { - border-radius: $base_border_radius; + border-radius: $base_border_radius*1.5; margin: $base_margin; - box-shadow: 0 1px 1px 0 $shadow_color; @if $flat { @include button(undecorated); box-shadow: none !important; } @else { - @include button(normal, $c:$card_bg_color); - } - - &:focus { - @include button(focus, $c:$card_bg_color); - } - - &:hover { - @include button(hover, $c:$card_bg_color); - } - - &:active { - @include button(active, $c:$card_bg_color); + @include button(normal); } + &:hover {@include button(hover);} + &:active {@include button(active);} + &:focus {@include button(focus);} +} + +// styling for all menuitems in popovers +@mixin menuitem($bg, $flat: true) { + + // lighten the background color always + $bg: lighten($bg,5%); + + font-weight: normal; + spacing: $base_padding; + transition-duration: 100ms; + padding: $base_padding*1.5 $base_padding*2; + + &:ltr {padding-left: $base_padding;} + &:rtl {padding-right: $base_padding;} + + @if $flat { + @include button(undecorated); + box-shadow: none !important; + } @else { + @include button(normal, $c:$bg); + } + &:focus, + &:hover { + @include button(hover, $c:$bg); + } + &:active {@include button(active, $c:$bg);} + &:checked {@include button(checked, $c:$bg);} } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss index a09e0b54..ee16a714 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss @@ -46,6 +46,5 @@ @import 'widgets/misc'; @import 'widgets/keyboard'; @import 'widgets/looking-glass'; -// Lock / login screens -@import 'widgets/login-dialog'; -@import 'widgets/screen-shield'; +// Lock / login screen +@import 'widgets/login-lock'; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss index 9da650cf..31d43829 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss @@ -20,7 +20,10 @@ $app_icon_size: 96px; .app-well-app { @include overview_icon($osd_fg_color); - .overview-icon { padding: $base_padding*2;} + .overview-icon { + padding: $base_padding*2; + border-radius: $base_border_radius*3; + } .overview-icon.overview-icon-with-label { > StBoxLayout { spacing: $base_padding; @@ -30,13 +33,19 @@ $app_icon_size: 96px; // app folders .app-well-app.app-folder { - @include overview_icon($osd_fg_color, $flat: false); + @include overview_icon($fg_color, $flat: false); } // expanded folder .app-folder-dialog { - border-radius: $modal_radius*2; - background-color: $dash_background_color; + border-radius: $modal_radius*4; + background-color: $bg_color; + padding: $base_padding*2; + box-shadow:inset 0 0 0 1px $outer_borders_color; + + @if $is_highcontrast { + box-shadow:inset 0 0 0 2px $hc_inset_color; + } & .folder-name-container { padding: 24px 36px 0; @@ -47,7 +56,10 @@ $app_icon_size: 96px; @extend %title_1; } - & .folder-name-entry { width: 300px } + & .folder-name-entry { + width: 12em; + border-radius: $base_border_radius*2; + } /* FIXME: this is to keep the label in sync with the entry */ & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } @@ -119,9 +131,12 @@ $app_icon_size: 96px; // shutdown and other actions in the grid .system-action-icon { background-color: rgba(0,0,0,0.8); - color: #fff; + color: white; border-radius: 99px; icon-size: $app_icon_size * 0.5; + @if $is_highcontrast { + box-shadow: inset 0 0 0 2px $hc_inset_color; + } } .page-navigation-hint { @@ -147,15 +162,16 @@ $app_icon_size: 96px; } .page-navigation-arrow { - & > StIcon { - margin: 6px; - padding: 18px; - width: 24px; - height: 24px; - border-radius: 99px; + margin: 6px; + padding: 18px; + width: 24px; + height: 24px; + border-radius: 99px; + @if $is_highcontrast { + @include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5)); } - &:insensitive > StIcon { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));} - &:hover > StIcon { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));} - &:active > StIcon { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));} } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss index df995245..84d23161 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss @@ -6,5 +6,14 @@ } .icon-button { - @extend %icon_button; // that's it + @extend .button; // same style as buttons + + border-radius: 99px; + padding: $base_padding*2; + min-height: 16px; + + StIcon { + icon-size: $base_icon_size; + -st-icon-style: symbolic; + } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss index 38d8e61e..0c206464 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss @@ -15,7 +15,7 @@ /* today button (the date) */ .datemenu-today-button { - @include card($flat: true); + @include card(flat); padding: $base_padding * 1.5; // weekday label @@ -45,7 +45,6 @@ // month label .calendar-month-label { - color: lighten($fg_color,5%); @extend %heading; padding: 8px 0; } @@ -54,9 +53,12 @@ height: 32px; width: 32px; margin: 2px; - border-radius: $base_border_radius - 2px; + border-radius: $base_border_radius; &:hover, &:focus {background-color: $hover_bg_color;} &:active {background-color: $active_bg_color;} + @if $is_highcontrast { + border:1px solid $hc_inset_color; + } } } @@ -72,7 +74,7 @@ transition-duration: 100ms; @extend %numeric; @extend %smaller; - + &:hover {background-color: $hover_bg_color;} &:focus { background-color: mix($bg_color, $selected_bg_color, 80%); @@ -93,12 +95,18 @@ color: $insensitive_fg_color; padding-top: $base_padding; height: 16px !important; // force heading to be smaller height - font-weight: bold; + font-weight: 600; @extend %smaller; } } - .calendar-day {} + .calendar-day { + font-weight: 600; + @if $is_highcontrast { + border:1px solid $hc_inset_color; + border-radius: 9px; + } + } .calendar-work-day {} .calendar-nonwork-day {color: $insensitive_fg_color;} .calendar-other-month-day { @@ -142,7 +150,7 @@ margin: 6px; padding: 0 $base_padding; border-radius: 3px; - background-color: darken($bg_color, 2%); + background-color: transparentize($fg_color, 0.9); color: $insensitive_fg_color } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss index 94e3257e..1ab2031f 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss @@ -35,17 +35,23 @@ $dash_border_radius: $modal_radius + $dash_padding; padding: $dash_padding; spacing: $base_padding; margin-bottom: $dash_padding; + + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + box-shadow:none; + } } // items on the dash .dash-item-container { > * {margin: 0 2px;} - &:ltr:first-child {margin-left: 0;} - &:rtl:first-child {margin-right: 0;} + &:ltr{&:first-child {margin-left: 0;}} + &:rtl{&:first-child {margin-right: 0;}} // each app item on the dash .app-well-app .overview-icon { padding: $base_padding; + border-radius: $base_border_radius*2; } // show apps button @@ -62,14 +68,13 @@ $dash_border_radius: $modal_radius + $dash_padding; margin: 0 $base_margin; background-color: $borders_color; margin-bottom: $dash_padding; + @if $is_highcontrast { + width: 2px; + } } // OSD Tooltip .dash-label { - color: $osd_fg_color; - background-color: $osd_bg_color; - border-radius: 99px; - padding: $base_padding $base_padding * 2; - text-align: center; + @extend %tooltip; -y-offset: $base_margin * 2; // distance from the dash edge } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss index 694e6555..045ec626 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss @@ -5,7 +5,9 @@ } .modal-dialog { - @extend %bubble_panel; + background-color: $bg_color; + border-radius: $modal_radius; + box-shadow: inset 0 0 0 1px $outer_borders_color; .modal-dialog-content-box { margin: 32px 40px; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss index 6be67609..ed65b787 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss @@ -1,20 +1,10 @@ /* Entries */ StEntry { - border-radius: $base_border_radius; - padding: 8px; - color: $fg_color; - - @include entry(normal); - &:hover { @include entry(hover);} - &:focus { @include entry(focus);} - &:insensitive { @include entry(insensitive);} - - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; + @extend %entry; StIcon.capslock-warning { - icon-size: 16px; + icon-size: $base_icon_size; warning-color: $warning_color; padding: 0 4px; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss deleted file mode 100644 index 23456be5..00000000 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss +++ /dev/null @@ -1,201 +0,0 @@ -/* Login Dialog */ - -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; -} - -.login-dialog, -.unlock-dialog { - //reset - border: none; - background-color: transparent; - - $_gdm_bg: $system_bg_color; - - .modal-dialog-button-box { spacing: 3px; } - .modal-dialog-button { - padding: 4px 18px; - background-color: darken($system_bg_color, 3%); - border-color: darken($system_bg_color, 3%); - color: $osd_fg_color; - - $_hover_c: lighten($_gdm_bg, 5%); - &:hover, &:focus { - background-color: $_hover_c; - border-color: $_hover_c; - } - &:active { - $_active_c: darken($_gdm_bg, 5%); - background-color: $_active_c; - border-color: $_active_c; - } - &:insensitive { - @include button(insensitive); - border-color: darken($_gdm_bg, 5%); - background-color: darken($_gdm_bg, 5%); - color: transparentize($osd_fg_color, 0.3); - } - &:default { - @include button(default); - } - } - - .cancel-button, - .switch-user-button, - .login-dialog-session-list-button { - padding: 0; - border-radius: 99px; - width: $large_icon_size; - height: $large_icon_size; - border-color: darken($system_bg_color, 3%); - background-color: darken($system_bg_color, 3%); - - StIcon { icon-size: $base_icon_size; } - } - - .caps-lock-warning-label, - .login-dialog-message-warning { - color: $osd_fg_color; - } -} - -.login-dialog-logo-bin { padding: 24px 0px; } -.login-dialog-banner { color: darken($osd_fg_color,10%); } -.login-dialog-button-box { width: 23em; spacing: 5px; } -.login-dialog-message { text-align: center; } -.login-dialog-user-selection-box { padding: 100px 0px; } -.login-dialog-not-listed-label { - padding-left: 2px; - .login-dialog-not-listed-button:focus &, - .login-dialog-not-listed-button:hover & { - color: $osd_fg_color; - } -} - -.login-dialog-not-listed-label { - @extend %caption; - font-weight: bold; - color: darken($osd_fg_color,30%); - 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: $base_border_radius + 4px; - padding: 6px; - color: darken($osd_fg_color,30%); - &:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } -} - -.login-dialog-auth-list-label { - @include fontsize($base_font_size + 2); - font-weight: bold; - padding-left: 15px; - &:ltr { padding-left: 14px; text-align: left; } - &:rtl { padding-right: 14px; text-align: right; } -} - -.login-dialog-user-list-view { -st-vfade-offset: 1em; } -.login-dialog-user-list { - spacing: 12px; - width: 23em; - &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; } - &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } -} - -.login-dialog-user-list-item { - border-radius: $base_border_radius + 4px; - padding: 6px; - color: darken($osd_fg_color,30%); - &:ltr .user-widget { padding-right: 1em; } - &:rtl .user-widget { padding-left: 1em; } - .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: $osd_fg_color; - } - &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } -} - -.user-widget-label { - color: $osd_fg_color; -} - -.user-widget.horizontal .user-widget-label { - @include fontsize($base_font_size + 2); - font-weight: bold; - padding-left: 15px; - - &:ltr { padding-left: 14px; text-align: left; } - &:rtl { padding-right: 14px; text-align: right; } -} - -.user-widget.vertical .user-widget-label { - @include fontsize($base_font_size + 5); - text-align: center; - font-weight: normal; - padding-top: 16px; -} - -.login-dialog-timed-login-indicator { - height: 2px; - background-color: darken($fg_color,40%); -} - -.login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; - spacing: $base_padding * 2; - width: 23em; -} - -.login-dialog-prompt-entry { - height: 1.5em; -} - -.login-dialog-prompt-label { - color: darken($osd_fg_color, 20%); - @include fontsize($base_font_size + 1); - padding-top: 1em; -} - -.login-dialog { - StEntry { - @if $variant=='dark' { - $_gdm_entry_bg: darken($system_bg_color, 3%); - background-color: $_gdm_entry_bg; - color: $fg_color; - } - } -} - -// Custom styling for unlock entry -.unlock-dialog { - StEntry { - border:none !important; - &:focus { - background-color: transparentize($fg_color, 0.9); - } - &:insensitive { - color: transparentize($fg_color, 0.5); - background-color: transparentize($fg_color, 0.95); - } - } - - .cancel-button, - .switch-user-button, - .login-dialog-session-list-button { - border-color: transparent; - background-color: transparentize($fg_color, 0.9); - } -} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss new file mode 100644 index 00000000..cc67cb95 --- /dev/null +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-lock.scss @@ -0,0 +1,283 @@ +$_gdm_bg: $system_bg_color; +$_gdm_fg: white; +$_gdm_dialog_width: 23em; + +// common style for gdm and lockscreen +.login-dialog, +.unlock-dialog { + + .caps-lock-warning-label, + .login-dialog-message-warning { + color: $_gdm_fg; + } +} + +/* Login Dialog */ +.login-dialog { + background-color: $_gdm_bg; +} + +// buttons +.login-dialog-button { + @extend .button; + + &.cancel-button, + &.switch-user-button, + &.login-dialog-session-list-button { + @extend .icon-button; + } + + &.cancel-button { + padding: $base_padding*1.5; + } +} + +.login-dialog-button-box { + width: $_gdm_dialog_width; + spacing: $base_padding*2; +} + +.login-dialog-logo-bin { + margin:3em 0; +} +.login-dialog-banner { color: darken($_gdm_fg,10%); } +.login-dialog-banner-view { max-width: $_gdm_dialog_width; } +.login-dialog-message { text-align: center; } +.login-dialog-user-selection-box { padding: 100px 0px; } + +.login-dialog-not-listed-label { + @include fontsize($base_font_size); + font-weight: bold; + color: darken($_gdm_fg,30%); + padding: $base_padding*2; + + .login-dialog-not-listed-button:focus &, + .login-dialog-not-listed-button:hover & { + color: $_gdm_fg; + } + .login-dialog-not-listed-button:focus & { + text-decoration: underline; + } +} + +.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: $base_border_radius*2; + padding: 4px; + color: darken($_gdm_fg,30%); + + &:focus, &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +.login-dialog-auth-list-label { + @include fontsize($base_font_size + 2); + font-weight: bold; + padding-left: 15px; + + &:ltr { padding-left: 14px; text-align: left; } + &:rtl { padding-right: 14px; text-align: right; } +} + +.login-dialog-user-list-view { -st-vfade-offset: 1em; } + +.login-dialog-user-list { + spacing: 12px; + width: $_gdm_dialog_width; + + .login-dialog-user-list-item { + border-radius: $base_border_radius + 4px; + padding: $base_padding; + background-color: transparentize($_gdm_fg, .95); + color: $_gdm_fg; + + @if $is_highcontrast { + box-shadow:inset 0 0 0 1px $hc_inset_color;; + } + .user-widget .user-icon { + border: 4px solid transparent; + } + + .login-dialog-timed-login-indicator { + height: 2px; + margin-top: 6px; + background-color: darken($_gdm_fg, 30%); + } + + &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } + } + + &:expanded .login-dialog-user-list-item { + transition-duration: 300ms; + transition-timing-function: ease; + + &:hover { + background-color: transparentize($_gdm_fg, .9); + color: $_gdm_fg; + } + + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + &:hover { background-color: lighten($selected_bg_color,5%); } + } + + &:logged-in { + .user-widget .user-icon { + border-color: $selected_bg_color; + } + } + } +} + +.login-dialog-prompt-layout { + spacing: $base_padding*2; + width: 26em; +} + +.login-dialog-prompt-entry {} + + +/* Screen Shield */ +// a.k.a. the lockscreen + +.unlock-dialog { + background-color: transparent; +} + +.screen-shield-background { // just the shadow, really + background: black; + box-shadow: 0 2px 4px rgba(0,0,0,0.6); +} + +#lockDialogGroup { + background-color: $_gdm_bg; +} + +// Clock +.unlock-dialog-clock { + color: $_gdm_fg; + spacing: 2em; + + .unlock-dialog-clock-time { + @extend %numeric; + @include fontsize(72); + font-weight: 200; + } + + .unlock-dialog-clock-date { + @extend %title_1; + font-weight: 400; + } + + .unlock-dialog-clock-hint { + margin-top: 2em; + padding: $base_padding $base_padding*3; + border-radius: $base_border_radius*2; + font-weight: bold; + } +} + +// Notifications +#unlockDialogNotifications { + StButton#vhandle, StButton#hhandle { + background-color: transparentize($bg_color,0.7); + &:hover, &:focus { background-color: transparentize($bg_color,0.5); } + &:active { background-color: transparentize($selected_bg_color,0.5); } + } +} + +.unlock-dialog-notifications-container { + margin: 12px; + spacing: 6px; + width: $_gdm_dialog_width; + background-color: transparent; + + .summary-notification-stack-scrollview { + padding-top: 0; + padding-bottom: 0; + } + + .notification, + .unlock-dialog-notification-source { + padding: 12px 16px; + border: none; + background-color: transparentize($_gdm_fg,0.9); + color: $_gdm_fg; + border-radius: $modal_radius; + + &.critical { background-color: transparentize($_gdm_fg,0.8) } + } +} + +.unlock-dialog-notification-label { + padding-left: 12px; + padding-right: 0; + &:rtl { padding-right: 12px; padding-left: 0; } +} + +.unlock-dialog-notification-count-text { + font-weight: bold; + padding: 0 12px; + color: $_gdm_fg; + background-color: transparentize($_gdm_fg, 0.9); + border-radius: 99px; +} + + +// User Widget +.user-widget { + + .user-widget-label { + color: $_gdm_fg; + } + + // layout of the user list + &.horizontal { + spacing: $base_padding*3; + .user-widget-label { + @extend %title_3; + } + + .user-icon { + & StIcon { + padding: 12px; + icon-size: $base_icon_size*2; + width: $base_icon_size*3; + height: $base_icon_size*3; + background-color: transparentize($_gdm_fg, 0.9); + } + } + } + + // layout of the login prompt + &.vertical { + spacing: $base_padding*4; + + .user-widget-label { + @extend %title_1; + text-align: center; + margin-bottom: .75em; + } + + .user-icon { + icon-size: $base_icon_size*10; + + & StIcon { + padding: 32px; + icon-size: $base_icon_size*4; + background-color: transparentize($_gdm_fg, 0.9); + } + } + } +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss index 00630c33..adcc372d 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss @@ -2,15 +2,22 @@ // Dialog #LookingGlassDialog { - background-color: $osd_bg_color; + background-color: transparentize($bg_color,0.05); border-radius: 0 0 $modal_radius $modal_radius; + border: 1px solid $outer_borders_color; border-top-width: 0; - border: 1px solid $osd_outer_borders_color; - color: $osd_fg_color; + color: $fg_color; padding: $base_padding; spacing: $base_padding; box-shadow: 0 2px 4px 0 $shadow_color; + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + background-color: $bg_color; + border-top-width: 0; + box-shadow:none; + } + & > #Toolbar { border: none; padding: $base_padding; @@ -33,25 +40,8 @@ .notebook-tab { -natural-hpadding: $base_padding*2; -minimum-hpadding: $base_padding*2; - - font-weight: bold; + @extend %button; padding: $base_padding $base_padding*2; - color: darken($osd_fg_color, 15%); - transition-duration: 100ms; - box-shadow:none; - border:none; - border-radius: $base_border_radius - 2px; - background-color: transparent; - - &:hover { - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.95); - } - - &:selected { - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.9); - } } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } @@ -61,12 +51,8 @@ .lg-dialog { StEntry { - background-color: transparentize(lighten($osd_bg_color, 5%), 0.4); - color: $osd_fg_color; - border-color: transparentize($osd_fg_color, 0.8); min-height: 22px; - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; + @extend %entry; } .shell-link { @@ -94,10 +80,10 @@ } .lg-obj-inspector-button { - border: 1px solid $osd_borders_color; + border: 1px solid $borders_color; padding: 4px; border-radius: $base_border_radius; - &:hover { border: 1px solid #ffffff; } + &:hover { border: 1px solid $fg_color; } } // Extensions @@ -123,8 +109,8 @@ // Inspector #LookingGlassPropertyInspector { - background: $osd_bg_color; - border: 1px solid $osd_borders_color; + background: $bg_color; + border: 1px solid $borders_color; border-radius: $base_border_radius; padding: $base_padding; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss index 5196661c..d0e5d855 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss @@ -143,6 +143,11 @@ border-radius: $base_border_radius; color: $fg_color; + @if $is_highcontrast { + border: 1px solid $hc_inset_color; + margin: $base_padding*2 2px; + } + // colors are lightened since the media controls are in a card &:hover { background-color: lighten($hover_bg_color, 5%); @@ -154,7 +159,12 @@ color: $fg_color; } - &:insensitive { color: lighten($insensitive_fg_color, 5%); } + &:insensitive { + color: lighten($insensitive_fg_color, 5%); + @if $is_highcontrast { + border-color: transparent; + } + } // fix margin for last button &:last-child:ltr { margin-right: $base_margin*3; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss index 74092782..0a98d570 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss @@ -10,9 +10,6 @@ color: $osd_fg_color; border-radius: 99px; icon-size: $base_icon_size * 4; // 64px - &:hover { - color: lighten($osd_fg_color,30%); - } & StIcon { background-color: transparentize($osd_fg_color,0.95); @@ -22,25 +19,16 @@ } &.user-avatar { - border: 2px $osd_fg_color; - } -} - -.user-widget.vertical .user-icon { - icon-size: $base_icon_size * 6; // 128px - - & StIcon { - padding: $base_padding * 3 + 2px; // 20px - padding-top: $base_padding * 3; // 18 px - padding-bottom: $base_padding * 3 + 4px; // 22px - width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px; + box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9); + @if $is_highcontrast { + box-shadow:inset 0 0 0 1px $hc_inset_color; + } } } .lightbox { background-color: black; } .flashspot { background-color: white; } - // Hidden .hidden { color: rgba(0,0,0,0);} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss index fd3e7d2d..487eb0f5 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss @@ -41,6 +41,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.screen-recording-indicator { box-shadow: inset 0 0 0 100px $screenshot_ui_button_red; } + &.screen-sharing-indicator { box-shadow: inset 0 0 0 100px $warning_color; StBoxLayout { margin: 0 $base_padding; } @@ -94,7 +95,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1); } } - + &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75); &.clock-display { @@ -174,7 +175,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1); } } - + &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); &.clock-display { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss index 138a4fc0..6ab20c21 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss @@ -1,5 +1,11 @@ /* Popovers/Menus */ +$menu_bg_color: $bg_color; +$menuitem_bg_color: lighten($menu_bg_color, 4%); +$menuitem_border_radius: $base_border_radius*1.5; + +$submenu_bg_color: lighten($menu_bg_color, 7%); + // the popover itself .popup-menu-boxpointer { -arrow-rise: $base_margin+2px; // distance from the panel & screen edge @@ -19,45 +25,27 @@ // popover content .popup-menu-content { padding: $base_padding; - border-radius: $modal_radius*1.25; - border: 1px solid $borders_edge; - box-shadow: 0 2px 4px 0 $shadow_color; background-color: $bg_color; + border-radius: $modal_radius*1.25; + border: 1px solid $outer_borders_color; + box-shadow: 0 2px 4px 0 $shadow_color; } // menu items .popup-menu-item { - padding: $base_padding*1.5 $base_padding*2; - border-radius: $base_border_radius*1.5; - spacing: $base_padding; - transition-duration: 100ms; - background-color: transparent; + @include menuitem($bg:$menu_bg_color); - &:ltr {padding-left: $base_padding;} - &:rtl {padding-right: $base_padding;} - - &:focus, &:hover { - background-color: $hover_bg_color !important; - &:active { background-color: $active_bg_color !important;} - } - - &:checked {background-color: $checked_bg_color !important;} + border-radius: $menuitem_border_radius; &:checked { - margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%); - border-radius: $base_border_radius $base_border_radius 0 0; - &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;} - &:active { background-color: lighten($checked_bg_color, 5%) !important;} - } + border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important; - &:active { - background-color: lighten($active_bg_color, 5%); - color: $active_fg_color; + @if $is_highcontrast { + border: 1px solid $hc_inset_color; + border-bottom-width:0; + } } - &:insensitive {color: transparentize($fg_color,0.5);} - // add margin to switches in menu items .toggle-switch { &:ltr { margin-left: $base_margin;} @@ -78,14 +66,14 @@ icon-size: 16px !important; // for some reason the variable doesn't work here } -.popup-menu-arrow { -} - - // popover submenus .popup-sub-menu { - background-color: $checked_bg_color; - border-radius: 0 0 $base_border_radius $base_border_radius; + border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px; + margin-bottom: $base_padding; + + @if $is_highcontrast { + border: 1px solid $hc_inset_color; + } .popup-menu-ornament { min-width: $base_icon_size !important; @@ -94,18 +82,13 @@ // submenu specific styles .popup-menu-item { border-radius: 0; - margin: 0; + @include menuitem($bg:$submenu_bg_color, $flat:false); + border-top-width:0; &:last-child { - border-radius: 0 0 $base_border_radius $base_border_radius; + border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; + border-bottom-width:0; } - - &:focus,&:hover { background-color: $hover_bg_color !important;} - &:checked { - background-color: $checked_bg_color !important; - &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;} - } - &:active { background-color: $active_bg_color !important;} } .popup-menu-section { @@ -113,7 +96,7 @@ &:hover,&:focus { border-radius: 0;} } &:last-child .popup-menu-item:last-child { - border-radius: 0 0 $base_border_radius $base_border_radius; + border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; } } } @@ -130,10 +113,7 @@ // separator .popup-separator-menu-item { - margin: 6px 0; - padding:0 !important; - &:ltr { margin-right: $base_margin;} - &:rtl { margin-left: $base_margin;} + border:none !important; .popup-separator-menu-item-separator { height: 1px; //not really the whole box @@ -153,7 +133,7 @@ &:rtl { margin-left: 2.5em;} .popup-separator-menu-item-separator { - background-color: lighten($borders_color, 7%); + background-color: $borders_color; } } } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss index 4e84cdf6..03fb7780 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_quick-settings.scss @@ -12,16 +12,18 @@ spacing-columns: $base_padding*2; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; - min-height: 40px; + min-height: 48px; border:none; +} - &:checked { @include button(default); } +.quick-toggle { + &:checked { @include button(default, $c:$selected_bg_color); } - & > StBoxLayout { spacing: $base_padding; } + & > StBoxLayout { spacing: $base_padding*1.5; } /* Move padding into the box; this is to allow menu arrows to extend to the border */ @@ -30,40 +32,63 @@ &:ltr > StBoxLayout { padding-left: $base_padding*2.5; } &:rtl > StBoxLayout { padding-right: $base_padding*2.5; } - .quick-toggle-label { font-weight: bold; } - .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } + .quick-toggle-title { font-weight: bold; } + + & StBoxLayout > .quick-toggle-subtitle { + font-weight: normal; + font-size: 12px; + } + + .quick-toggle-icon { icon-size: $base_icon_size; } } .quick-menu-toggle { - &:ltr > StBoxLayout { padding-right: 0; } - &:rtl > StBoxLayout { padding-left: 0; } + & .quick-toggle { + min-width: auto; + max-width: auto; + + &:ltr { border-radius: 99px 0 0 99px; } + &:rtl { border-radius: 0 99px 99px 0; } + + &:ltr:last-child { border-radius: 99px; } + &:rtl:last-child { border-radius: 99px; } + } & .quick-toggle-arrow { - background-color: transparentize($fg_color, 0.9); padding: $base_padding $base_padding*1.75; + border-width: 0; - &:ltr { border-radius: 0 99px 99px 0; } - &:rtl { border-radius: 99px 0 0 99px; } + &:checked { + @include button(default, $c:$selected_bg_color); + border-color: $selected_borders_color; + } + + &:ltr { + border-radius: 0 99px 99px 0; + border-left-width: 1px; + } + &:rtl { + border-radius: 99px 0 0 99px; + border-right-width: 1px; + } } } .quick-slider { - padding: 0 $base_padding; - & > StBoxLayout { spacing: $base_padding; } + .icon-button { padding: $base_padding; } + .slider-bin { &:focus {@include button(focus);} min-height: 16px; // slider size padding: $base_padding; border-radius: 99px; } - .quick-toggle-icon { icon-size: $base_icon_size; } - .icon-button { background-color: transparent; } } .quick-toggle-menu { - background-color: $card_bg_color; + @include card; border-radius: $base_border_radius*3; padding: $base_padding*2; margin: $base_padding*2 $base_padding*3 0; @@ -79,9 +104,9 @@ icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok border-radius: 999px; padding: 1.5 * $base_padding; - background-color: lighten($bg_color, 10%); + background-color: transparentize($fg_color, 0.8); - &.active { background-color: $selected_bg_color; } + &.active { background-color: $selected_bg_color;} } & .title { @@ -100,8 +125,6 @@ .quick-settings-system-item { & > StBoxLayout { spacing: 2 * $base_padding; } - .icon-button > StIcon { -st-icon-style: symbolic; } - & .power-item { min-height: 0; min-width: 0; @@ -116,3 +139,40 @@ .nm-network-item { .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; } } + +.bt-device-item { + .popup-menu-icon { -st-icon-style: symbolic; } +} + +.bt-menu-placeholder { + @extend %title_4; + text-align: center; + + padding: 2em 4em; +} + +.device-subtitle { color: transparentize($fg_color, 0.5); } + +// background apps + +.background-apps-quick-toggle { + min-height: 40px; + background-color: transparent; + + & StIcon { icon-size: $base_icon_size !important; } +} + +.background-app-item { + & .title { @extend %heading; } + & .subtitle { @extend %caption; } + & .popup-menu-icon { + icon-size: $large_icon_size !important; + -st-icon-style: regular !important; + } + & .close-button { + @extend .icon-button; + padding: $base_padding; + } + + &.popup-inactive-menu-item { color: $fg_color; } +} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss deleted file mode 100644 index a459ba16..00000000 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss +++ /dev/null @@ -1,78 +0,0 @@ -/* Screen Shield */ - -.unlock-dialog-clock { - color: white; - font-weight: 300; - text-align: center; - spacing: 24px; - padding-bottom: 2.5em; -} - -.unlock-dialog-clock-time { - font-size: 64pt; - padding-top: 42px; - @extend %numeric; -} - -.unlock-dialog-clock-date { - font-size: 16pt; - font-weight: normal; -} - -.unlock-dialog-clock-hint { - font-weight: normal; - padding-top: 48px; -} - -.unlock-dialog-notifications-container { - margin: 12px; - spacing: 6px; - width: 23em; - background-color: transparent; - - .summary-notification-stack-scrollview { - padding-top: 0; - padding-bottom: 0; - } - - .notification, - .unlock-dialog-notification-source { - padding: 12px 16px; - border: none; - background-color: transparentize($osd_fg_color,0.9); - color: $osd_fg_color; - border-radius: $modal_radius; - - &.critical { background-color: transparentize($osd_fg_color,0.8) } - } -} - -.unlock-dialog-notification-label { - padding-left: 12px; - padding-right: 0; - &:rtl { padding-right: 12px; padding-left: 0; } -} - -.unlock-dialog-notification-count-text { - font-weight: bold; - padding: 0 12px; - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.9); - border-radius: 99px; -} - -.screen-shield-background { //just the shadow, really - background: black; - box-shadow: 0 2px 4px rgba(0,0,0,0.6); -} - -#lockDialogGroup { - background-color: $system_bg_color; -} -#unlockDialogNotifications { - StButton#vhandle, StButton#hhandle { - background-color: transparentize($bg_color,0.7); - &:hover, &:focus { background-color: transparentize($bg_color,0.5); } - &:active { background-color: transparentize($selected_bg_color,0.5); } - } -} diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss index faca50e4..4ae86187 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss @@ -1,24 +1,11 @@ // Search entry - -$search_entry_width: 320px; -$search_entry_height: 36px; - -%search_entry, .search-entry { - border-radius: $search_entry_height * 0.5; // half the height - - margin-top: $base_padding * 2; + border-radius: 99px; + margin-top: $base_padding*2; margin-bottom: $base_padding; - padding: $base_padding+1 $base_padding+3; - width: $search_entry_width; - - @include entry(normal); - &:hover { @include entry(hover);} - &:focus { @include entry(focus);} - &:insensitive { @include entry(insensitive);} + width: 24em; .search-entry-icon { - color: inherit; icon-size: $base_icon_size; margin-top: 2px; // center vertically padding: 0 4px; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss index 644c53db..b7d72c9b 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss @@ -15,7 +15,7 @@ spacing: $base_padding*3; // separator (unstyled) - .search-section-separator { + .search-section-separator { height: $base_margin*2; // use it as a spacer background-color: transparent; } @@ -25,7 +25,7 @@ .search-section-content { background-color: lighten($system_bg_color, 5%); border-radius: $modal_radius*1.5; - border: 1px solid $osd_outer_borders_color; + box-shadow:inset 0 0 0 1px solid $outer_borders_color; color: $osd_fg_color; padding: $base_padding*2; margin:0 $base_margin*3; diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss index cec6c9aa..5136c3cf 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss @@ -1,8 +1,7 @@ /* App Switcher */ // same as dash -$switcher_padding: $base_padding + 4px; // 10px -$switcher_border_radius: $modal_radius + 8px; +$switcher_padding: $base_padding*2; // the full screen container of the switcher @@ -15,8 +14,8 @@ $switcher_border_radius: $modal_radius + 8px; .switcher-list { @extend %osd_panel; padding: $switcher_padding; - border-radius: $switcher_border_radius; - box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); + border-radius: $modal_radius+$switcher_padding; + box-shadow: 0 8px 8px 0 $shadow_color; // container for items in list .switcher-list-item-container { @@ -28,6 +27,9 @@ $switcher_border_radius: $modal_radius + 8px; @include tile_button($osd_fg_color); // override over style so mouse doesn't steal focus &:hover {background: none;} + @if $is_highcontrast { + box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2); + } } .separator { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss index 9067a6d4..1847250b 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss @@ -17,10 +17,7 @@ $window_close_button_padding: 3px; // Window titles .window-caption { - color: $osd_fg_color; - background-color: lighten($osd_bg_color, 5%); - border-radius: 99px; - padding: $base_padding $base_padding * 2; + @extend %tooltip; } // Close button @@ -43,6 +40,10 @@ $window_close_button_padding: 3px; &:active { background-color: lighten($window_close_button_color, 13%); } + + @if $is_highcontrast { + border:2px solid $outer_borders_color; + } } .workspace-background { diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss index 7c5a27b3..6ce0f262 100644 --- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -7,8 +7,14 @@ padding: $base_padding; .workspace-thumbnail { - @extend %overview_panel; - border-radius: 3px; + color: $osd_fg_color; + background-color: lighten($system_bg_color, 10%); + border-radius: $base_border_radius*0.5; + border: 1px solid transparent; + + @if $is_highcontrast { + border-color: $hc_inset_color; + } } // drag and drop indicator @@ -22,7 +28,5 @@ // selected indicator .workspace-thumbnail-indicator { border: 3px solid $selected_bg_color; - border-radius: 3px; - padding: 0px; - // background-color: transparentize($selected_bg_color, 0.9); + border-radius: $base_border_radius; } diff --git a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh index 8ffd58ac..75abbd9e 100755 --- a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh +++ b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh @@ -4,7 +4,7 @@ GREEN='\033[0;32m' YELLOW='\033[0;33m' RESET='\033[0m' -VERSION=43.rc +VERSION=44.rc echo printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n" @@ -42,7 +42,7 @@ done <<- EOF gnome-shell-sass/widgets/_hotplug.scss gnome-shell-sass/widgets/_ibus-popup.scss gnome-shell-sass/widgets/_keyboard.scss - gnome-shell-sass/widgets/_login-dialog.scss + gnome-shell-sass/widgets/_login-lock.scss gnome-shell-sass/widgets/_looking-glass.scss gnome-shell-sass/widgets/_message-list.scss gnome-shell-sass/widgets/_misc.scss @@ -52,7 +52,6 @@ done <<- EOF gnome-shell-sass/widgets/_panel.scss gnome-shell-sass/widgets/_popovers.scss gnome-shell-sass/widgets/_quick-settings.scss - gnome-shell-sass/widgets/_screen-shield.scss gnome-shell-sass/widgets/_screenshot.scss gnome-shell-sass/widgets/_scrollbars.scss gnome-shell-sass/widgets/_search-entry.scss