From 61cce947a5bfff6144c9ad3badeeff6ffa5999cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= Date: Sat, 18 Apr 2020 20:19:19 +0200 Subject: [PATCH] Gnome-Shell: fix gnome 3.36 theme Fixes #60 --- .../Kali-Dark/gnome-shell/gnome-shell.css | 2235 ++------------- .../Kali-Light/gnome-shell/gnome-shell.css | 2228 ++------------- .../sass/gnome-shell-sass/_common-tweaks.scss | 2475 ++--------------- 3 files changed, 694 insertions(+), 6244 deletions(-) diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css index 3efcc7d6..befba8b2 100644 --- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css @@ -40,8 +40,7 @@ stage { background-color: rgba(17, 18, 23, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); } - -.app-well-app.app-folder .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, +.show-apps .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .list-search-result, .search-provider-icon { border-radius: 9px; padding: 6px; @@ -54,7 +53,7 @@ stage { background-color: #23252e; border: 1px solid #0d0e11; } -.message-list-clear-button.button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { +.app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 5px; border-style: solid; border-width: 1px; @@ -2106,190 +2105,32 @@ StScrollBar { #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(39, 119, 255, 0.5); } -/* This stylesheet is generated, DO NOT EDIT */ -/* Copyright 2009, 2015 Red Hat, Inc. - * - * Portions adapted from Mx's data/style/default.css - * Copyright 2009 Intel Corporation - * - * This program is free software; you can redistribute it and/or modify it - * under the terms and conditions of the GNU Lesser General Public License, - * version 2.1, as published by the Free Software Foundation. - * - * This program is distributed in the hope it will be useful, but WITHOUT ANY - * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for - * more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. - */ -/* GLOBALS */ -stage { - font-family: Cantarell, Sans-Serif; - font-size: 11pt; - color: #eeeeec; } +/* OSD */ +.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { + color: white; + background-color: #23252e; + border: 1px solid #0d0e11; } + .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { + icon-shadow: rgba(0, 0, 0, 0.7) 0 1px 6px; } -/* WIDGETS */ -/* Buttons */ -.button, .message-list-clear-button.button, .app-folder-dialog .folder-name-container .edit-folder-button { - border-radius: 5px; - border-width: 1px; - min-height: 22px; - padding: 4px 32px; - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover { - color: #eeeeec; - background-color: #343845; - border-color: #20232b; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active { - color: #eeeeec; - background-color: #08090b; - border-color: black; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - -.modal-dialog-linked-button, .notification-banner .notification-button, .hotplug-notification-item, .modal-dialog .modal-dialog-linked-button { - border-right-width: 1px; - color: #eeeeec; - background-color: #292c37; - border-color: #1a1c23; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - padding: 12px; - border-top: 1px solid #181a20; } - .modal-dialog-linked-button:insensitive, .notification-banner .notification-button:insensitive, .hotplug-notification-item:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .modal-dialog-linked-button:hover, .notification-banner .notification-button:hover, .hotplug-notification-item:hover { - color: #eeeeec; - background-color: #343845; - border-color: #20232b; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } - .modal-dialog-linked-button:focus, .notification-banner .notification-button:focus, .hotplug-notification-item:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .modal-dialog-linked-button:active, .notification-banner .notification-button:active, .hotplug-notification-item:active { - color: #eeeeec; - background-color: #08090b; - border-color: black; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .modal-dialog-linked-button:first-child, .notification-banner .notification-button:first-child, .hotplug-notification-item:first-child { - border-radius: 0px 0px 0px 9px; } - .modal-dialog-linked-button:last-child, .notification-banner .notification-button:last-child, .hotplug-notification-item:last-child { - border-right-width: 0px; - border-radius: 0px 0px 9px 0px; } - .modal-dialog-linked-button:first-child:last-child, .notification-banner .notification-button:first-child:last-child, .hotplug-notification-item:first-child:last-child { - border-right-width: 0px; - border-radius: 0px 0px 9px 9px; } - -/* Entries */ -StEntry { - border-radius: 5px; - padding: 4px; - border-width: 1px; - color: #eeeeec; - background-color: #272a34; - border-color: #0d0e11; - selection-background-color: #2777ff; - selected-color: #ffffff; } - StEntry:focus { - border-color: rgba(154, 154, 142, 0.5); - box-shadow: inset 0 0 0 1px rgba(238, 238, 236, 0.5); } - StEntry:insensitive { - color: #888a8d; - border-color: #242731; - box-shadow: none; } - StEntry StIcon.capslock-warning { - icon-size: 16px; - warning-color: #fd7d00; - padding: 0 4px; } - -/* Scrollbars */ -StScrollView.vfade { - -st-vfade-offset: 68px; } - -StScrollView.hfade { - -st-hfade-offset: 68px; } - -StScrollBar { - padding: 0; } - StScrollView StScrollBar { - min-width: 14px; - min-height: 14px; } - StScrollBar StBin#trough { - border-radius: 0; - background-color: transparent; } - StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { - border-radius: 8px; - background-color: #9d9ea0; - margin: 3px; } - StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #c5c6c6; } - StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: #2777ff; } +.osd-window .level { + -barlevel-background-color: rgba(255, 255, 255, 0.1); + -barlevel-active-background-color: white; } /* Slider */ .slider { - height: 1em; - -barlevel-height: 0.3em; - -barlevel-background-color: rgba(238, 238, 236, 0.1); - -barlevel-border-color: #0d0e11; + height: 1.1em; + -barlevel-height: .35em; + -barlevel-background-color: #0d0e11; + -barlevel-border-color: #2777ff; -barlevel-active-background-color: #2777ff; - -barlevel-active-border-color: #00348d; -barlevel-overdrive-color: #a61414; - -barlevel-overdrive-border-color: #790e0e; - -barlevel-overdrive-separator-width: 0.2em; - -barlevel-border-width: 1px; - -slider-handle-radius: 8px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: #0d0e11; - color: #1a1c23; } - .slider:hover { - color: #292c37; } - .slider:active { - color: #0f1014; } + -barlevel-overdrive-separator-width: 0.1em; + -barlevel-border-width: 0; + -slider-handle-radius: 0; } /* Check Boxes */ -.check-box StBoxLayout { - spacing: .8em; } - .check-box StBin { - width: 24px; - height: 22px; background-image: url("assets/checkbox-off-dark.svg"); } .check-box:focus StBin { @@ -2301,441 +2142,7 @@ StScrollBar { .check-box:focus:checked StBin { background-image: url("assets/checkbox-focused-dark.svg"); } -/* Switches */ -.toggle-switch { - color: #eeeeec; - width: 46px; - height: 22px; - background-size: contain; - background-image: url("assets/toggle-off-dark.svg"); } - .toggle-switch:checked { - background-image: url("assets/toggle-on-dark.svg"); } - -/* links */ -.shell-link { - color: #8db7ff; } - .shell-link:hover { - color: #c0d7ff; } - -/* Modal Dialogs */ -.headline { - font-size: 110%; } - -.lightbox { - background-color: black; } - -.flashspot { - background-color: white; } - -.modal-dialog { - border-radius: 9px; } - .modal-dialog .modal-dialog-content-box { - padding: 24px; } - .modal-dialog .run-dialog-entry { - width: 20em; - margin-bottom: 6px; } - .modal-dialog .run-dialog-error-box { - padding-top: 16px; - spacing: 6px; } - .modal-dialog .run-dialog-button-box { - padding-top: 1em; } - .modal-dialog .run-dialog-label { - font-size: 12pt; - font-weight: normal; - color: #eeeeec; - padding-bottom: .4em; } - -.mount-dialog-subject, -.end-session-dialog-subject { - font-size: 14pt; } - -/* Message Dialog */ -.message-dialog-main-layout { - padding: 12px 20px 0; - spacing: 12px; } - -.message-dialog-content { - max-width: 28em; - spacing: 20px; } - -.message-dialog-icon { - min-width: 48px; - icon-size: 48px; } - -.message-dialog-title { - font-weight: bold; } - -.message-dialog-subtitle { - color: #eeeeec; - font-weight: bold; } - -/* End Session Dialog */ -.end-session-dialog { - spacing: 42px; - border: 1px solid #181a20; } - -.end-session-dialog-list { - padding-top: 20px; } - -.end-session-dialog-layout { - padding-left: 17px; } - .end-session-dialog-layout:rtl { - padding-right: 17px; } - -.end-session-dialog-description { - width: 28em; - padding-bottom: 10px; } - .end-session-dialog-description:rtl { - text-align: right; } - -.end-session-dialog-warning { - width: 28em; - color: #fd7d00; - padding-top: 6px; } - .end-session-dialog-warning:rtl { - text-align: right; } - -.end-session-dialog-logout-icon { - border-radius: 99px; - width: 48px; - height: 48px; - background-size: contain; } - -.end-session-dialog-shutdown-icon { - color: #eeeeec; - width: 48px; - height: 48px; } - -.end-session-dialog-inhibitor-layout { - spacing: 16px; - max-height: 200px; - padding-right: 65px; - padding-left: 65px; } - -.end-session-dialog-session-list, -.end-session-dialog-app-list { - spacing: 1em; } - -.end-session-dialog-list-header { - font-weight: bold; } - .end-session-dialog-list-header:rtl { - text-align: right; } - -.end-session-dialog-app-list-item, -.end-session-dialog-session-list-item { - spacing: 1em; } - -.end-session-dialog-app-list-item-name, -.end-session-dialog-session-list-item-name { - font-weight: bold; } - -.end-session-dialog-app-list-item-description { - color: #e2e2df; - font-size: 10pt; } - -/* ShellMountOperation Dialogs */ -.shell-mount-operation-icon { - icon-size: 48px; } - -.mount-dialog { - spacing: 24px; } - .mount-dialog .message-dialog-title { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; - max-width: 34em; } - .mount-dialog .message-dialog-title:rtl { - padding-left: 0px; - padding-right: 17px; } - .mount-dialog .message-dialog-body { - padding-left: 17px; - width: 28em; } - .mount-dialog .message-dialog-body:rtl { - padding-left: 0px; - padding-right: 17px; } - -.mount-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; } - -.mount-dialog-app-list:rtl { - padding-right: 49px; - padding-left: 32px; } - -.mount-dialog-app-list-item { - color: white; } - .mount-dialog-app-list-item:hover { - color: #eeeeec; } - .mount-dialog-app-list-item:ltr { - padding-right: 1em; } - .mount-dialog-app-list-item:rtl { - padding-left: 1em; } - -.mount-dialog-app-list-item-icon:ltr { - padding-right: 17px; } - -.mount-dialog-app-list-item-icon:rtl { - padding-left: 17px; } - -.mount-dialog-app-list-item-name { - font-size: 10pt; } - -/* Password or Authentication Dialog */ -.prompt-dialog { - width: 34em; } - .prompt-dialog .message-dialog-main-layout { - spacing: 24px; - padding: 10px; } - .prompt-dialog .message-dialog-content { - spacing: 16px; } - .prompt-dialog .message-dialog-title { - color: white; } - -.prompt-dialog-description:rtl { - text-align: right; } - -.prompt-dialog-password-box { - spacing: 1em; - padding-bottom: 1em; } - -.prompt-dialog-error-label { - font-size: 10pt; - color: #fd7d00; - padding-bottom: 8px; } - -.prompt-dialog-info-label { - font-size: 10pt; - padding-bottom: 8px; } - -.hidden { - color: rgba(0, 0, 0, 0); } - -.prompt-dialog-null-label { - font-size: 10pt; - padding-bottom: 8px; } - -.prompt-dialog-pim-box { - spacing: 1em; } - -.prompt-dialog-grid { - spacing-rows: 15px; - spacing-columns: 1em; } - -.prompt-dialog-keyfiles-box { - spacing: 1em; } - -.prompt-dialog-button.button { - padding: 8px; } - -/* Polkit Dialog */ -.polkit-dialog-user-layout { - padding-left: 10px; - spacing: 10px; } - .polkit-dialog-user-layout:rtl { - padding-left: 0px; - padding-right: 10px; } - -.polkit-dialog-user-root-label { - color: #fd7d00; } - -.polkit-dialog-user-icon { - border-radius: 99px; - background-size: contain; - width: 48px; - height: 48px; } - -/* Audio selection dialog */ -.audio-device-selection-dialog { - spacing: 30px; } - -.audio-selection-content { - spacing: 20px; - padding: 24px; } - -.audio-selection-title { - font-weight: bold; - text-align: center; } - -.audio-selection-box { - spacing: 20px; } - -.audio-selection-device { - border: 1px solid #181a20; - border-radius: 12px; } - .audio-selection-device:hover, .audio-selection-device:focus { - background-color: #292c37; } - .audio-selection-device:active { - background-color: #2777ff; - color: #ffffff; } - -.audio-selection-device-box { - padding: 20px; - spacing: 20px; } - -.audio-selection-device-icon { - icon-size: 64px; } - -/* Access Dialog */ -.access-dialog { - spacing: 30px; } - -/* Geolocation Dialog */ -.geolocation-dialog { - spacing: 30px; } - -/* Extension Dialog */ -.extension-dialog .message-dialog-main-layout { - spacing: 24px; - padding: 10px; } - -.extension-dialog .message-dialog-title { - font-weight: normal; - color: #eeeeec; } - -/* Inhibit-Shortcuts Dialog */ -.inhibit-shortcuts-dialog { - spacing: 30px; } - -/* Network Agent Dialog */ -.network-dialog-secret-table { - spacing-rows: 15px; - spacing-columns: 1em; } - -.keyring-dialog-control-table { - spacing-rows: 15px; - spacing-columns: 1em; } - -/* Popovers/Menus */ -.popup-menu { - min-width: 15em; - color: #eeeeec; - border-color: #181a20; } - .popup-menu .popup-sub-menu { - background-color: #181a20; - box-shadow: inset 0 -1px 0px #181a20; } - .popup-menu .popup-menu-content { - padding: 1em 0em; } - .popup-menu .popup-menu-item { - spacing: 12px; } - .popup-menu .popup-menu-item:ltr { - padding: .4em 1.75em .4em 0em; } - .popup-menu .popup-menu-item:rtl { - padding: .4em 0em .4em 1.75em; } - .popup-menu .popup-menu-item:checked { - background-color: #23252e; - box-shadow: inset 0 -1px 0px #181a20; - font-weight: bold; } - .popup-menu .popup-menu-item.selected { - background-color: rgba(255, 255, 255, 0.1); - color: #eeeeec; } - .popup-menu .popup-menu-item:active { - background-color: #2777ff; - color: #ffffff; } - .popup-menu .popup-menu-item:insensitive { - color: rgba(238, 238, 236, 0.5); } - .popup-menu .popup-inactive-menu-item { - color: #eeeeec; } - .popup-menu .popup-inactive-menu-item:insensitive { - color: rgba(238, 238, 236, 0.5); } - .popup-menu.panel-menu { - -boxpointer-gap: 4px; - margin-bottom: 1.75em; } - -.popup-menu-ornament { - text-align: right; - width: 1.2em; } - -.popup-menu-boxpointer, -.candidate-popup-boxpointer { - -arrow-border-radius: 9px; - -arrow-background-color: #23252e; - -arrow-border-width: 1px; - -arrow-border-color: #0d0e11; - -arrow-base: 24px; - -arrow-rise: 11px; - -arrow-box-shadow: 0 1px 3px black; } - -.popup-separator-menu-item { - height: 1px; - margin: 6px 64px; - background-color: transparent; - border-color: #181a20; - border-bottom-width: 1px; - border-bottom-style: solid; } - -.rename-folder-popup .rename-folder-popup-item { - spacing: 6px; } - .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { - padding: 0, 12px; } - -.background-menu { - -boxpointer-gap: 4px; - -arrow-rise: 0px; } - -/* fallback menu -- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled - app menu inside the main app window itself rather than the top bar -*/ -/************* - * App Icons * - *************/ -/* Outline for low res icons */ -.lowres-icon { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - -/* Drapshadow for large icons */ -.icon-dropshadow { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } - -/* OSD */ -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - margin: 32px; - min-width: 64px; - min-height: 64px; } - .osd-window .osd-monitor-label { - font-size: 3em; } - .osd-window .level { - height: 0.6em; - -barlevel-height: 0.6em; - -barlevel-background-color: rgba(238, 238, 236, 0.1); - -barlevel-active-background-color: white; - -barlevel-overdrive-color: #a61414; - -barlevel-overdrive-separator-width: 0.2em; } - -/* Pad OSD */ -.pad-osd-window { - padding: 32px; - background-color: rgba(0, 0, 0, 0.8); } - .pad-osd-window .pad-osd-title-box { - spacing: 12px; } - .pad-osd-window .pad-osd-title-menu-box { - spacing: 6px; } - -.combo-box-label { - width: 15em; } - /* App Switcher */ -.switcher-popup { - padding: 8px; - spacing: 16px; } - -.osd-window, -.resize-popup, -.switcher-list { - padding: 12px; } - -.switcher-list-item-container { - spacing: 8px; } - -.switcher-list .item-box { - padding: 8px; - border-radius: 4px; } - .switcher-list .item-box:outlined { padding: 6px; border: 3px solid #2777ff; @@ -2746,510 +2153,31 @@ StScrollBar { color: #ffffff; font-weight: bold; } -.switcher-list .thumbnail-box { - padding: 2px; - spacing: 4px; } - -.switcher-list .thumbnail { - width: 256px; } - -.switcher-list .separator { - width: 1px; - background: #0d0e11; } - -.switcher-arrow { - border-color: rgba(0, 0, 0, 0); - color: rgba(238, 238, 236, 0.8); } - .switcher-arrow:highlighted { - color: #eeeeec; } - -.input-source-switcher-symbol { - font-size: 34pt; - width: 96px; - height: 96px; } - -/* Window Cycler */ -.cycler-highlight { - border: 5px solid #2777ff; } - /* Workspace Switcher */ -.workspace-switcher-group { - padding: 12px; } +.ws-switcher-box { + border: none; } .workspace-switcher-container { - padding: 6px; } + padding: 7px; } -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; } - -.ws-switcher-active-up, .ws-switcher-active-down, -.ws-switcher-active-left, .ws-switcher-active-right { - height: 52px; - background-color: #2777ff; - color: #ffffff; - background-size: 32px; - border-radius: 6px; +.ws-switcher-active-up, +.ws-switcher-active-down, +.ws-switcher-active-left, +.ws-switcher-active-right { box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5); } -.ws-switcher-box { - height: 50px; +/* Window Picker */ +.window-clone-border { + border: 5px solid rgba(255, 255, 255, 0.5); + border-radius: 6px; + box-shadow: inset 0 0 0 2px white; } + +.window-caption { + font-size: .9em; + color: black; + background-color: white; border: none; - background: transparent; - border-radius: 6px; } - -.osd-window, -.resize-popup, -.switcher-list, .workspace-switcher-container { - color: white; - background-color: #23252e; - border: 1px solid #0d0e11; - border-radius: 12px; } - .osd-window StIcon, - .resize-popup StIcon, - .switcher-list StIcon, .workspace-switcher-container StIcon { - icon-shadow: rgba(0, 0, 0, 0.7) 0 1px 6px; } - -.notification-banner StEntry, .nm-dialog StEntry, .modal-dialog StEntry, .prompt-dialog StEntry, .audio-device-selection-dialog StEntry, .access-dialog StEntry, .geolocation-dialog StEntry, .extension-dialog StEntry, .inhibit-shortcuts-dialog StEntry { - color: #eeeeec; - background-color: #1e2128; - border-color: #181a20; - box-shadow: none; } - .notification-banner StEntry:focus, .nm-dialog StEntry:focus, .modal-dialog StEntry:focus, .prompt-dialog StEntry:focus, .audio-device-selection-dialog StEntry:focus, .access-dialog StEntry:focus, .geolocation-dialog StEntry:focus, .extension-dialog StEntry:focus, .inhibit-shortcuts-dialog StEntry:focus { - border: 2px solid #2777ff; } - -.nm-dialog, .modal-dialog, .prompt-dialog, .audio-device-selection-dialog, .access-dialog, .geolocation-dialog, .extension-dialog, .inhibit-shortcuts-dialog { - color: #eeeeec; - background-color: #23252e; - border: 1px solid #0d0e11; } - .nm-dialog .button, .modal-dialog .button, .prompt-dialog .button, .audio-device-selection-dialog .button, .access-dialog .button, .geolocation-dialog .button, .extension-dialog .button, .inhibit-shortcuts-dialog .button { - background-color: #23252e; - color: #eeeeec; } - .nm-dialog .button, .modal-dialog .button, .prompt-dialog .button, .audio-device-selection-dialog .button, .access-dialog .button, .geolocation-dialog .button, .extension-dialog .button, .inhibit-shortcuts-dialog .button { - box-shadow: none; - border-color: #181a20; } - .nm-dialog .button:hover, .modal-dialog .button:hover, .prompt-dialog .button:hover, .audio-device-selection-dialog .button:hover, .access-dialog .button:hover, .geolocation-dialog .button:hover, .extension-dialog .button:hover, .inhibit-shortcuts-dialog .button:hover { - background-color: #292c37; } - .nm-dialog .button:active, .modal-dialog .button:active, .prompt-dialog .button:active, .audio-device-selection-dialog .button:active, .access-dialog .button:active, .geolocation-dialog .button:active, .extension-dialog .button:active, .inhibit-shortcuts-dialog .button:active { - background-color: #2777ff; - color: #ffffff; } - .nm-dialog .button:disabled, .modal-dialog .button:disabled, .prompt-dialog .button:disabled, .audio-device-selection-dialog .button:disabled, .access-dialog .button:disabled, .geolocation-dialog .button:disabled, .extension-dialog .button:disabled, .inhibit-shortcuts-dialog .button:disabled { - color: #888a8d; } - -/* Tiled window previews */ -.tile-preview { - background-color: rgba(39, 119, 255, 0.5); - border: 1px solid #2777ff; } - -.tile-preview-left.on-primary { - border-radius: 0 0 0 0; } - -.tile-preview-right.on-primary { - border-radius: 0 0 0 0; } - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 0 0 0 0; } - -/* TOP BAR */ -#panel { - background: rgba(35, 37, 46, 0.8); - font-weight: bold; - height: 1.86em; - font-feature-settings: "tnum"; - text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } - #panel StIcon { - icon-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } - #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { - background-color: transparent; } - #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { - color: white; } - #panel #panelLeft, #panel #panelCenter { - spacing: 4px; } - #panel #panelActivities.panel-button { - margin-left: .4em; } - #panel #panelActivities.panel-button StLabel { - background-image: url("assets/view-grid-symbolic-dark.svg"); - background-size: contain; - width: 1.5em; - height: 1.5em; - color: transparent; } - #panel #panelActivities.panel-button:overview StLabel { - background-image: url("assets/view-grid-symbolic-checked.svg"); } - #panel .panel-corner { - -panel-corner-radius: 0; - -panel-corner-background-color: rgba(35, 37, 46, 0.8); - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; } - #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus { - -panel-corner-border-color: #4187ff; } - #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen { - -panel-corner-radius: 0; - -panel-corner-background-color: transparent; - -panel-corner-border-color: transparent; } - #panel .panel-button { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: white; } - #panel .panel-button .app-menu-icon { - -st-icon-style: symbolic; - margin-left: 4px; - margin-right: 4px; } - #panel .panel-button:hover { - color: white; } - #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -3px 0px #2777ff; - color: white; } - #panel .panel-button .system-status-icon { - icon-size: 1.09em; - padding: 0 5px; } - .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { - color: white; } - .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { - color: white; } - #panel .panel-status-indicators-box, - #panel .panel-status-menu-box { - spacing: 2px; } - #panel .power-status.panel-status-indicators-box { - spacing: 0; } - #panel .screencast-indicator { - color: #fd7d00; } - #panel .remote-access-indicator { - color: #fd7d00; } - -#calendarArea { - padding: 0.75em 1.0em; - background-image: url("assets/kali-dragon-dark.svg"); - background-size: contain; } - -.calendar { - margin-bottom: 1em; } - -.calendar, -.datemenu-today-button, -.datemenu-displays-box, -.message-list-sections { - margin: 0 1.5em; } - -.datemenu-calendar-column { - spacing: 0.5em; } - -.datemenu-displays-section { - padding-bottom: 3em; } - -.datemenu-displays-box { - spacing: 1em; } - -.datemenu-calendar-column { - border: 0 solid #181a20; } - .datemenu-calendar-column:ltr { - border-left-width: 1px; } - .datemenu-calendar-column:rtl { - border-right-width: 1px; } - -.datemenu-today-button, -.world-clocks-button, -.weather-button, -.events-section-title { - border-radius: 4px; - padding: .4em; } - -.message-list-section-list:ltr { - padding-left: .4em; } - -.message-list-section-list:rtl { - padding-right: .4em; } - -.datemenu-today-button:hover, .datemenu-today-button:focus, -.world-clocks-button:hover, -.world-clocks-button:focus, -.weather-button:hover, -.weather-button:focus, -.events-section-title:hover, -.events-section-title:focus { - background-color: #292c37; } - -.datemenu-today-button:active, -.world-clocks-button:active, -.weather-button:active, -.events-section-title:active { - background-color: #0f1014; } - -.datemenu-today-button .date-label { - font-size: 1.5em; - font-weight: 300; } - -.world-clocks-header, -.weather-header, -.events-section-title { - color: white; - font-weight: bold; } - -.weather-header.location { - font-weight: normal; - font-size: 0.9em; } - -.world-clocks-grid, -.weather-grid { - spacing-rows: 0.4em; - spacing-columns: 0.8em; } - -.weather-box { - spacing: 0.4em; } - -.world-clocks-city { - font-weight: bold; - font-size: 0.9em; } - -.world-clocks-time { - color: #bebeb6; - font-feature-settings: "tnum"; - font-size: 1.2em; } - -.world-clocks-timezone { - color: #eeeeec; - font-feature-settings: "tnum"; - font-size: 0.9em; } - -.weather-forecast-icon { - icon-size: 2.18em; } - -.weather-forecast-time { - color: #8e8e80; - font-size: 0.8em; } - -.calendar-month-label { - color: #fafaf9; - font-weight: bold; - padding: 8px 0; } - -.pager-button { - background-color: transparent; - width: 32px; - border-radius: 4px; } - .pager-button:hover, .pager-button:focus { - background-color: #292c37; } - .pager-button:active { - background-color: rgba(238, 238, 236, 0.16); } - -.calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { - icon-size: 1.09em; } - -.calendar-day-base { - font-size: 80%; - text-align: center; - width: 2.4em; - height: 2.4em; - padding: 0.1em; - margin: 2px; - border-radius: 1.4em; - font-feature-settings: "tnum"; } - .calendar-day-base:hover, .calendar-day-base:focus { - background-color: #292c37; } - .calendar-day-base:active, .calendar-day-base:selected { - color: white; - background-color: #2777ff; - border-color: transparent; } - .calendar-day-base.calendar-day-heading { - color: #fafaf9; - margin-top: 1em; - font-size: 70%; } - -.calendar-day { - border-width: 0; } - -.calendar-day-top { - border-top-width: 1px; } - -.calendar-day-left { - border-left-width: 1px; } - -.calendar-nonwork-day { - color: #888a8d; } - -.calendar-today { - font-weight: bold; - color: #fafaf9; - background-color: #181a20; } - -.calendar-day-with-events { - color: white; - font-weight: bold; - background-image: url("assets/calendar-today.svg"); } - -.calendar-other-month-day { - color: rgba(238, 238, 236, 0.5); - opacity: 0.5; } - -.calendar-week-number { - font-size: 70%; - font-weight: bold; - width: 2.3em; - height: 1.8em; - border-radius: 2px; - padding: 0.5em 0 0; - margin: 6px; - background-color: #181a20; - color: #eeeeec; } - -/* Message list */ -.message-list { - width: 31.5em; - background: rgba(35, 37, 46, 0.7); } - -.message-list-clear-button.button { - margin: 1.5em 1.5em 0; } - -.message-list-sections { - spacing: 1em; } - -.message-list-section, -.message-list-section-list { - spacing: 0.4em; } - -.message { - border: 1px solid #181a20; - background-color: #272a34; - border-radius: 5px; } - .message:hover, .message:focus { - background-color: #292c37; } - .message:active { - background-color: rgba(238, 238, 236, 0.16); } - -.message-icon-bin { - padding: 0.68em 0.2em 0.68em 0.68em; } - .message-icon-bin:rtl { - padding: 0.68em 0.68em 0.68em 0.2em; } - -.message-icon-bin > StIcon { - color: #eeeeec; - icon-size: 1.09em; - -st-icon-style: symbolic; } - -.message-icon-bin > .fallback-window-icon { - width: 1.09em; - height: 1.09em; } - -.message-secondary-bin { - padding: 0 0.82em; } - -.message-secondary-bin > .event-time { - color: #eeeeec; - font-size: 0.7em; - /* HACK: the label should be baseline-aligned with a 1em label, - fake this with some bottom padding */ - padding-bottom: 0.13em; } - -.message-secondary-bin > StIcon { - icon-size: 1.09em; } - -.message-title { - color: #eeeeec; } - -.message-content { - color: #d6d6d1; - padding: 10px; } - -.message-close-button { - color: white; } - .message-close-button:hover { - color: #d6d6d1; } - .message-close-button:active { - color: #bebeb6; } - -.message-media-control { - padding: 12px; - color: white; } - .message-media-control:last-child:ltr { - padding-right: 18px; } - .message-media-control:last-child:rtl { - padding-left: 18px; } - .message-media-control:hover { - color: #d6d6d1; } - .message-media-control:active { - color: #bebeb6; } - .message-media-control:insensitive { - color: #8e8e80; } - -.media-message-cover-icon { - icon-size: 48px !important; } - .media-message-cover-icon.fallback { - color: white; - background-color: #23252e; - border: 1px solid #23252e; - border-radius: 2px; - icon-size: 32px !important; - padding: 6px; } - -#appMenu { - spacing: 4px; } - #appMenu .label-shadow { - color: transparent; } - -.app-menu, -.app-well-menu { - max-width: 27.25em; } - -.aggregate-menu { - min-width: 21em; } - .aggregate-menu .popup-menu-icon { - padding: 0 4px; } - .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - /* 12px spacing + 2*4px padding */ - padding-left: 20px; - margin-left: 1.09em; } - .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - /* 12px spacing + 2*4px padding */ - padding-right: 20px; - margin-right: 1.09em; } - -.system-menu-action { - -st-icon-style: symbolic; - color: #eeeeec; - border-radius: 32px; - /* wish we could do 50% */ - padding: 13px; - border: 1px solid #181a20; } - .system-menu-action:hover, .system-menu-action:focus { - background-color: #292c37; - color: #eeeeec; } - .system-menu-action:active { - background-color: #2777ff; - color: #ffffff; - border-color: #00348d; } - .system-menu-action > StIcon { - icon-size: 16px; } - -.ripple-box { - width: 52px; - height: 52px; - border-radius: 0 0 52px 0; - background-color: rgba(39, 119, 255, 0.3); - box-shadow: 0 0 2px 2px #2777ff; } - -.ripple-box:rtl { - border-radius: 0 0 0 52px; } - -.select-area-rubberband { - background-color: rgba(39, 119, 255, 0.3); - border: 1px solid #2777ff; } - -.ripple-pointer-location { - width: 50px; - height: 50px; - border-radius: 25px 25px 25px 25px; - background-color: rgba(192, 215, 255, 0.3); - box-shadow: 0 0 2px 2px #8db7ff; } - -.popup-menu-arrow { - width: 0; } - -.popup-menu-icon { - icon-size: 1.09em; } + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } .window-close { background-image: url("assets/close-window.svg"); @@ -3262,216 +2190,227 @@ StScrollBar { width: 32px; -shell-close-overlap: 16px; } .window-close:hover { - background-image: url("assets/close-window-hover.svg"); } + background-image: url("assets/close-window-hover.svg"); + background-color: transparent; } .window-close:active { - background-image: url("assets/close-window-active.svg"); } + background-image: url("assets/close-window-active.svg"); + background-color: transparent; } -.pie-timer { - width: 60px; - height: 60px; - -pie-border-width: 3px; - -pie-border-color: #2777ff; - -pie-background-color: rgba(243, 247, 255, 0.3); } +/* Tiled window previews */ +.tile-preview-left.on-primary, +.tile-preview-right.on-primary, +.tile-preview-left.tile-preview-right.on-primary { + border-radius: 0; } -/* NETWORK DIALOGS */ -.nm-dialog { - max-height: 34em; - min-height: 31em; - min-width: 32em; } +/* TOP BAR */ +#panel { + background: rgba(35, 37, 46, 0.8); + text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } + #panel .popup-menu-arrow { + width: 0; } + #panel StIcon { + icon-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } + #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { + background-color: transparent; } + #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { + color: white; } + #panel .panel-corner { + -panel-corner-radius: 0; } + #panel .panel-button, #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { + color: white; } + #panel #panelActivities.panel-button { + margin-left: .4em; } + #panel #panelActivities.panel-button StLabel { + background-image: url("assets/view-grid-symbolic-dark.svg"); + background-size: contain; + width: 1.5em; + height: 1.5em; + color: transparent; } + #panel #panelActivities.panel-button:overview StLabel { + background-image: url("assets/view-grid-symbolic-checked.svg"); } -.nm-dialog-content { - spacing: 20px; - padding: 24px; } +/* Date/Time Menu */ +#calendarArea { + background-image: url("assets/kali-dragon-dark.svg"); + background-size: contain; } -.nm-dialog-header-hbox { - spacing: 10px; } +.events-section-title { + padding: 1em; } -.nm-dialog-airplane-box { - spacing: 12px; } +.datemenu-today-button .date-label { + font-size: 1.5em; + font-weight: 300; } -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; } +.calendar { + border-width: 1px; + border-style: solid; + border-radius: 7px; + margin: 4px; + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); + text-shadow: none; + icon-shadow: none; } + .calendar:focus { + color: #eeeeec; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:hover { + color: #eeeeec; + background-color: #2e313d; + border-color: #1a1c23; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .calendar:active { + color: #eeeeec; + background-color: #1c1e25; + border-color: #0b0b0e; + text-shadow: none; + icon-shadow: none; + box-shadow: none; } -.nm-dialog-airplane-text { - color: #eeeeec; } +/* Message list */ +.message-list { + width: 31.5em; + background: rgba(35, 37, 46, 0.7); } -.nm-dialog-header-icon { - icon-size: 32px; } +/* World clocks */ +.world-clocks-button { + border-width: 1px; + border-style: solid; + border-radius: 7px; + margin: 4px; + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); + text-shadow: none; + icon-shadow: none; } + .world-clocks-button:focus { + color: #eeeeec; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:hover { + color: #eeeeec; + background-color: #2e313d; + border-color: #1a1c23; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .world-clocks-button:active { + color: #eeeeec; + background-color: #1c1e25; + border-color: #0b0b0e; + text-shadow: none; + icon-shadow: none; + box-shadow: none; } -.nm-dialog-scroll-view { - border: 2px solid #0d0e11; } - -.nm-dialog-header { - font-weight: bold; } - -.nm-dialog-item { - font-size: 110%; - border-bottom: 1px solid #0d0e11; - padding: 12px; - spacing: 20px; } - -.nm-dialog-item:selected { - background-color: #2777ff; - color: #ffffff; } - -.nm-dialog-icons { - spacing: .5em; } - -.nm-dialog-icon { - icon-size: 16px; } - -.no-networks-label { - color: #999999; } - -.no-networks-box { - spacing: 12px; } - -/* OVERVIEW */ -#overview { - spacing: 24px; } - -.overview-controls { - padding-bottom: 32px; } - -.window-picker { - -horizontal-spacing: 16px; - -vertical-spacing: 16px; - padding: 0 16px 16px; } - .window-picker.external-monitor { - padding: 16px; } - -.window-clone-border { - border: 7px solid rgba(255, 255, 255, 0.35); - border-radius: 9px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } - -.window-caption { - spacing: 25px; - color: black; - background-color: white; - border-radius: 8px; - padding: 4px 12px; - box-shadow: rgba(0, 0, 0, 0.5) 0 1px 6px; } +.weather-button { + border-width: 1px; + border-style: solid; + border-radius: 7px; + margin: 4px; + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); + text-shadow: none; + icon-shadow: none; } + .weather-button:focus { + color: #eeeeec; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + icon-shadow: 0 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:hover { + color: #eeeeec; + background-color: #2e313d; + border-color: #1a1c23; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } + .weather-button:active { + color: #eeeeec; + background-color: #1c1e25; + border-color: #0b0b0e; + text-shadow: none; + icon-shadow: none; + box-shadow: none; } +/* Search */ .search-entry { - width: 320px; - padding: 7px 9px; - border-radius: 18px; - color: white; + color: black; font-weight: bold; background-color: rgba(255, 255, 255, 0.2); - border-color: transparent; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + border-radius: 100px; transition-duration: 200ms; } - .search-entry:focus { - padding: 6px 8px; - border-width: 2px; - border-color: #2777ff; } - .search-entry .search-entry-icon { - icon-size: 1em; - padding: 0 4px; + .search-entry StLabel.hint-text { color: white; } - .search-entry:hover, .search-entry:focus { - background: white; } - .search-entry:hover, .search-entry:hover .search-entry-icon, .search-entry:focus, .search-entry:focus .search-entry-icon { + .search-entry, .search-entry:focus, .search-entry:hover { + width: 21em; + padding: .6em .8em; + border: none; } + .search-entry:focus, .search-entry:hover { + background-color: white; + color: black; + font-weight: normal; + text-shadow: none; + box-shadow: none; } + .search-entry:focus StLabel.hint-text, .search-entry:hover StLabel.hint-text { color: black; } + .search-entry:focus .search-entry-icon, .search-entry:hover .search-entry-icon { + color: black; + icon-shadow: none; } + .search-entry .search-entry-icon { + color: white; + icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } -#searchResultsContent { - max-width: 1000px; - padding-left: 20px; - padding-right: 20px; - spacing: 16px; } - -.search-section { - spacing: 16px; } - -.search-section-content { - spacing: 32px; } - -.list-search-results { - spacing: 3px; } - -.search-section-separator { - height: 2px; - background-color: rgba(255, 255, 255, 0.2); } +.search-section .search-section-separator { + height: 1px; + background-color: rgba(255, 255, 255, 0.1); } .search-section:last-child .search-section-separator { background-color: transparent; } -.list-search-result-content { - spacing: 30px; } +.search-section-content { + background-color: transparent; + border-radius: 0; + border: 0; + box-shadow: 0; } -.list-search-result-title { - color: #f2f2f2; - spacing: 12px; } - -.list-search-result-description { - color: #b3b3b3; } - -.list-search-provider-details { - width: 150px; - color: #f2f2f2; - margin-top: 0.24em; } - -.list-search-provider-content { - spacing: 20px; } - -.search-provider-icon { - padding: 15px; } +.search-provider-icon .list-search-provider-content .list-search-provider-details { + font-weight: bold; } /* DASHBOARD */ #dash { color: white; background-color: transparent; - border: none; - font-size: 9pt; - padding: 4px 0; - border-radius: 0px 9px 9px 0px; } - #dash:rtl { - border-radius: 9px 0 0 9px; } - #dash .placeholder { - background-image: url("assets/dash-placeholder.svg"); - background-size: contain; - height: 24px; } - #dash .empty-dash-drop-target { - width: 24px; - height: 24px; } + border: none; } #dash .overview-icon StIcon { color: white; icon-shadow: rgba(0, 0, 0, 0.7) 0 2px 6px; } -.dash-item-container > StWidget { - padding: 4px 8px; } +.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.2); + color: black; } -.dash-label { - border-radius: 7px; - padding: 4px 12px; - color: white; - background-color: #23252e; - border: none; - text-align: center; - box-shadow: rgba(0, 0, 0, 0.5) 0 1px 6px; - -x-offset: 8px; } +/* Workspace pager */ +.workspace-thumbnails { + background-color: rgba(0, 0, 0, 0.2); + border: none; } + .workspace-thumbnails .placeholder { + background-image: none; } -/* App Vault/Grid */ -.icon-grid { - spacing: 30px; - -shell-grid-horizontal-item-size: 136px; - -shell-grid-vertical-item-size: 136px; } - .icon-grid .overview-icon { - icon-size: 96px; } - -.system-action-icon { - background-color: black; - color: white; - border-radius: 99px; - icon-size: 48px; } - -.app-view-controls { - padding-bottom: 32px; } +/* App Folders */ +.app-well-app.app-folder { + background-color: rgba(255, 255, 255, 0.2); } +/* Frequent | All toggle */ .app-view-control { - padding: 4px 32px; margin: 0; } .app-view-control, .app-view-control:hover, .app-view-control:checked { color: white; @@ -3490,736 +2429,6 @@ StScrollBar { .app-view-control:last-child { border-radius: 0 5px 5px 0; } -.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, -.list-search-result:focus, -.list-search-result:selected, -.list-search-result:hover { - background-color: rgba(255, 255, 255, 0.1); - transition-duration: 200ms; } - -.search-provider-icon:active, .search-provider-icon:checked, -.list-search-result:active, -.list-search-result:checked { - background-color: rgba(0, 0, 0, 0.9); } - -.app-well-app .overview-icon, -.app-well-app.app-folder .overview-icon, -.show-apps .overview-icon, -.grid-search-result .overview-icon { - font-weight: bold; } - -.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, -.app-well-app.app-folder:hover .overview-icon, -.app-well-app.app-folder:focus .overview-icon, -.app-well-app.app-folder:selected .overview-icon, -.show-apps:hover .overview-icon, -.show-apps:focus .overview-icon, -.show-apps:selected .overview-icon, -.grid-search-result:hover .overview-icon, -.grid-search-result:focus .overview-icon, -.grid-search-result:selected .overview-icon { - background-color: rgba(255, 255, 255, 0.1); - transition-duration: 0ms; - border-image: none; - background-image: none; } - -.app-well-app:drop .overview-icon, -.app-well-app.app-folder:drop .overview-icon, -.show-apps:drop .overview-icon, -.grid-search-result:drop .overview-icon { - background-color: rgba(39, 119, 255, 0.85); } - -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, -.app-well-app.app-folder:active .overview-icon, -.app-well-app.app-folder:checked .overview-icon, -.show-apps:active .overview-icon, -.show-apps:checked .overview-icon, -.grid-search-result:active .overview-icon, -.grid-search-result:checked .overview-icon { - background-color: rgba(0, 0, 0, 0.5); } - -.app-well-app-running-dot { - width: 10px; - height: 3px; - background-color: white; - box-shadow: rgba(0, 0, 0, 0.7) 0 2px 6px; - border-radius: 3px; - margin-bottom: 2px; } - -.search-provider-icon, .list-search-result, .app-well-app .overview-icon, -.grid-search-result .overview-icon, .show-apps .overview-icon, -.app-well-app.app-folder .overview-icon { - color: white; - border-radius: 9px; - padding: 6px; - border: 1px solid transparent; - transition-duration: 100ms; - text-align: center; } - -.app-well-app.app-folder > .overview-icon { - background-color: rgba(17, 18, 23, 0.4); } - -.show-apps:checked .show-apps-icon, -.show-apps:focus .show-apps-icon { - color: white; - transition-duration: 100ms; } - -.app-folder-popup { - -arrow-border-radius: 8px; - -arrow-background-color: rgba(0, 0, 0, 0.5); - -arrow-base: 24px; - -arrow-rise: 11px; } - -.app-folder-popup-bin { - padding: 5px; } - -.app-folder-icon { - padding: 5px; - spacing-rows: 5px; - spacing-columns: 5px; } - -.page-indicator { - padding: 15px 20px; } - .page-indicator .page-indicator-icon { - width: 12px; - height: 12px; - background-color: transparent; - border: 2px solid rgba(255, 255, 255, 0.4); - border-radius: 12px; } - .page-indicator:hover .page-indicator-icon { - border-color: white; } - .page-indicator:active .page-indicator-icon { - border: none; - margin: 2px; - background-color: white; } - .page-indicator:checked .page-indicator-icon, .page-indicator:checked:active .page-indicator-icon { - background-color: white; } - -.app-well-app > .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; - spacing: 4px; } - -.workspace-thumbnails { - visible-width: 32px; - spacing: 11px; - padding: 8px; - border-radius: 9px 0 0 9px; } - .workspace-thumbnails:rtl { - border-radius: 0 9px 9px 0; } - .workspace-thumbnails .placeholder { - background-image: url("assets/dash-placeholder.svg"); - background-size: contain; - height: 24px; } - -.workspace-thumbnail-indicator { - border: 4px solid #2777ff; - border-radius: 5px; - padding: 1px; } - -.all-apps, -.frequent-apps > StBoxLayout { - padding: 0px 88px 10px 88px; } - -.workspace-thumbnails { - color: white; - background-color: rgba(17, 18, 23, 0.9); - border: none; } - -.search-statustext, .no-frequent-applications-label { - font-size: 2em; - font-weight: bold; - color: white; } - -/* NOTIFICATIONS & MESSAGE TRAY */ -.url-highlighter { - link-color: #5a97ff; - font-weight: bold; } - -.notification-banner { - font-size: 11pt; - width: 34em; - margin: 5px; - border-radius: 9px; - border: #181a20; - min-height: 64px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - .notification-banner:hover { - background: #23252e; } - .notification-banner, .notification-banner:focus, .notification-banner:active { - background-color: #23252e; } - .notification-banner .message-title, .notification-banner:focus .message-title, .notification-banner:active .message-title { - color: #eeeeec; } - .notification-banner .message-content, .notification-banner:focus .message-content, .notification-banner:active .message-content { - color: #eeeeec; } - .notification-banner .message-icon-bin > StIcon { - color: #eeeeec; } - .notification-banner .notification-icon { - padding: 5px; } - .notification-banner .notification-content { - padding: 5px; - spacing: 5px; } - .notification-banner .secondary-icon { - icon-size: 1.09em; } - .notification-banner .notification-actions { - padding-top: 0; - color: #eeeeec; - border-top: 1px solid #181a20; - spacing: 0px; } - .notification-banner .notification-button { - padding: 0 16px; - min-height: 35px; - border: none; } - .notification-banner .notification-button:focus { - box-shadow: none; } - -.summary-source-counter { - font-size: 10pt; - font-weight: bold; - height: 1.6em; - width: 1.6em; - -shell-counter-overlap-x: 3px; - -shell-counter-overlap-y: 3px; - background-color: #2777ff; - color: #ffffff; - border: 2px solid #eeeeec; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); - border-radius: 0.9em; } - -.secondary-icon { - icon-size: 1.09em; } - -.chat-body { - spacing: 5px; } - -.chat-response { - margin: 5px; } - -.chat-log-message { - color: #d6d6d1; } - -.chat-new-group { - padding-top: 1em; } - -.chat-received { - padding-left: 4px; } - .chat-received:rtl { - padding-left: 0px; - padding-right: 4px; } - -.chat-sent { - padding-left: 18pt; - color: white; } - .chat-sent:rtl { - padding-left: 0; - padding-right: 18pt; } - -.chat-meta-message { - padding-left: 4px; - font-size: 9pt; - font-weight: bold; - color: white; } - .chat-meta-message:rtl { - padding-left: 0; - padding-right: 4px; } - -.hotplug-transient-box { - spacing: 6px; - padding: 2px 72px 2px 12px; } - -.hotplug-notification-item { - border: none; - box-shadow: none; - padding: 2px 10px; } - .hotplug-notification-item:focus { - padding: 1px 71px 1px 11px; } - -.hotplug-notification-item-icon { - icon-size: 24px; - padding: 2px 5px; } - -.hotplug-resident-box { - spacing: 8px; } - -.hotplug-resident-mount { - spacing: 8px; - border-radius: 4px; } - .hotplug-resident-mount:hover { - background-color: #292c37; } - -.hotplug-resident-mount-label { - color: inherit; - padding-left: 6px; } - -.hotplug-resident-mount-icon { - icon-size: 24px; - padding-left: 6px; } - -.hotplug-resident-eject-icon { - icon-size: 16px; } - -.hotplug-resident-eject-button { - padding: 7px; - border-radius: 5px; - color: pink; } - -/* Eeeky things */ -.magnifier-zoom-region { - border: 2px solid #2777ff; } - .magnifier-zoom-region.full-screen { - border-width: 0; } - -/* On-screen Keyboard */ -.word-suggestions { - font-size: 14pt; - spacing: 12px; - min-height: 20pt; } - -#keyboard { - background-color: rgba(17, 18, 23, 0.7); } - #keyboard .page-indicator { - padding: 4px 4px; } - #keyboard .page-indicator .page-indicator-icon { - width: 6px; - height: 6px; } - -.key-container { - padding: 4px; - spacing: 4px; } - -.keyboard-key { - background-color: #252831; - min-height: 1.2em; - min-width: 1.2em; - font-size: 16pt; - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; } - .keyboard-key:focus { - color: #eeeeec; - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-key:hover, .keyboard-key:checked { - background-color: #2b2f3a; } - .keyboard-key:active { - background-color: #20232b; } - .keyboard-key:grayed { - background-color: #111217; - color: white; - border-color: black; } - .keyboard-key.default-key { - border-color: rgba(255, 255, 255, 0.1); - background-color: #111217; - background-size: 20px; } - .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { - background-color: #181a20; } - .keyboard-key.default-key:active { - background-color: #0d0e11; } - .keyboard-key.enter-key { - border-color: #4187ff; - background-color: #2777ff; - background-image: url("assets/key-enter.svg"); } - .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { - background-color: #3681ff; } - .keyboard-key.enter-key:active { - background-color: #1d71ff; } - .keyboard-key.shift-key-lowercase { - background-image: url("assets/key-shift.svg"); } - .keyboard-key.shift-key-uppercase { - background-image: url("assets/key-shift-uppercase.svg"); } - .keyboard-key.shift-key-uppercase:latched { - background-image: url("assets/key-shift-latched-uppercase.svg"); } - .keyboard-key.hide-key { - background-image: url("assets/key-hide.svg"); } - .keyboard-key.layout-key { - background-image: url("assets/key-layout.svg"); } - -.keyboard-subkeys { - color: white; - -arrow-border-radius: 10px; - -arrow-background-color: rgba(17, 18, 23, 0.7); - -arrow-border-width: 2px; - -arrow-border-color: rgba(255, 255, 255, 0.1); - -arrow-base: 20px; - -arrow-rise: 10px; - -boxpointer-gap: 5px; } - -.emoji-page .keyboard-key { - background-color: transparent; - border: none; } - -.emoji-panel .keyboard-key:latched { - border-color: #4187ff; - background-color: #2777ff; } - -.candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; } - -.candidate-index { - padding: 0 0.5em 0 0; - color: #d6d6d1; } - -.candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; - border-radius: 4px; } - .candidate-box:selected, .candidate-box:hover { - background-color: #2777ff; - color: #ffffff; } - -.candidate-page-button-box { - height: 2em; } - .vertical .candidate-page-button-box { - padding-top: 0.5em; } - .horizontal .candidate-page-button-box { - padding-left: 0.5em; } - -.candidate-page-button { - padding: 4px; } - -.candidate-page-button-previous { - border-radius: 4px 0px 0px 4px; - border-right-width: 0; } - -.candidate-page-button-next { - border-radius: 0px 4px 4px 0px; } - -.candidate-page-button-icon { - icon-size: 1em; } - -/* Auth Dialogs & Screen Shield */ -.user-icon { - background-size: contain; - color: white; - border-radius: 99px; } - .user-icon:hover { - color: white; } - -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; } - -.login-dialog { - border: none; - background-color: transparent; } - .login-dialog StEntry { - width: 320px; - padding: 7px 9px; - border-radius: 5px; - color: #eeeeec; - background-color: #272a34; - border-color: #0d0e11; - background-color: rgba(45, 44, 46, 0.5); - border-color: rgba(45, 44, 46, 0.5); - color: white; } - .login-dialog StEntry:focus { - padding: 6px 8px; - border-width: 2px; - border-color: #2777ff; } - .login-dialog .modal-dialog-button-box { - spacing: 3px; } - .login-dialog .modal-dialog-button { - padding: 4px 18px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); - background-color: #5b666a; - border-color: #5b666a; - color: #f6f5f4; } - .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { - background-color: #667478; - border-color: #667478; } - .login-dialog .modal-dialog-button:active { - box-shadow: none; - background-color: #4f595d; - border-color: #4f595d; } - .login-dialog .modal-dialog-button:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #4f595d; - background-color: #4f595d; - color: rgba(246, 245, 244, 0.7); } - .login-dialog .modal-dialog-button:default { - color: #ffffff; - background-color: #3681ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - border-color: #2777ff; } - .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { - color: #ffffff; - background-color: #4187ff; - border-color: #136aff; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); - text-shadow: 0 1px rgba(0, 0, 0, 0.2); - icon-shadow: 0 1px rgba(0, 0, 0, 0.2); - background-color: #4187ff; - border-color: #4187ff; } - .login-dialog .modal-dialog-button:default:active { - color: #ffffff; - background-color: #186eff; - border-color: #0058ee; - text-shadow: none; - icon-shadow: none; - box-shadow: none; - background-color: #0e67ff; - border-color: #0e67ff; } - .login-dialog .modal-dialog-button:default:insensitive { - color: #888a8d; - border-color: #0d0e11; - background-color: #242731; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #005af3; - background-color: #005af3; - color: rgba(255, 255, 255, 0.7); } - -.login-dialog-logo-bin { - padding: 24px 0px; } - -.login-dialog-banner { - color: #e6e6e6; } - -.login-dialog-button-box { - spacing: 5px; } - -.login-dialog-message-warning { - color: #fd7d00; } - -.login-dialog-message-hint { - padding-top: 0; - padding-bottom: 20px; } - -.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-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { - color: white; } - -.login-dialog-not-listed-label { - font-size: 90%; - font-weight: bold; - color: #b3b3b3; - padding-top: 1em; } - -.login-dialog-user-list-view { - -st-vfade-offset: 1em; } - -.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: 5px; - 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; } - -.login-dialog-username, -.user-widget-label { - color: white; - font-size: 120%; - font-weight: bold; - text-align: left; - padding-left: 15px; } - -.user-widget-label:ltr { - padding-left: 14px; } - -.user-widget-label:rtl { - padding-right: 14px; } - -.login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; - spacing: 8px; - width: 23em; } - -.login-dialog-prompt-label { - color: #cccccc; - font-size: 110%; - padding-top: 1em; } - -.login-dialog-session-list-button StIcon { - icon-size: 1.25em; } - -.login-dialog-session-list-button { - color: #b3b3b3; } - .login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus { - color: white; } - .login-dialog-session-list-button:active { - color: gray; } - -.screen-shield-arrows { - padding-bottom: 3em; } - -.screen-shield-arrows Gjs_Arrow { - color: white; - width: 80px; - height: 48px; - -arrow-thickness: 12px; - -arrow-shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); } - -.screen-shield-clock { - color: white; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); - font-weight: bold; - text-align: center; - padding-bottom: 1.5em; } - -.screen-shield-clock-time { - font-size: 72pt; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); - font-feature-settings: "tnum"; } - -.screen-shield-clock-date { - font-size: 28pt; - font-weight: normal; } - -.screen-shield-notifications-container { - spacing: 6px; - width: 30em; - background-color: transparent; - max-height: 500px; } - .screen-shield-notifications-container .summary-notification-stack-scrollview { - padding-top: 0; - padding-bottom: 0; } - .screen-shield-notifications-container .notification, - .screen-shield-notifications-container .screen-shield-notification-source { - padding: 12px 6px; - border: 1px solid rgba(255, 255, 255, 0.1); - background-color: rgba(17, 18, 23, 0.5); - color: white; - border-radius: 4px; } - .screen-shield-notifications-container .notification { - margin-right: 15px; } - -.screen-shield-notification-label { - font-weight: bold; - padding: 0px 0px 0px 12px; } - -.screen-shield-notification-count-text { - padding: 0px 0px 0px 12px; } - -#panel.lock-screen { - background-color: rgba(17, 18, 23, 0.5); } - -.screen-shield-background { - background: black; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); } - -#lockDialogGroup { - background: #41494c url(assets/noise-texture.png); - background-repeat: repeat; } - -#screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle { - background-color: rgba(35, 37, 46, 0.3); } - #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus { - background-color: rgba(35, 37, 46, 0.5); } - #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active { - background-color: rgba(39, 119, 255, 0.5); } - -#LookingGlassDialog { - background-color: rgba(0, 0, 0, 0.8); - spacing: 4px; - padding: 4px; - border: 2px solid grey; - border-radius: 4px; } - #LookingGlassDialog > #Toolbar { - border: 1px solid grey; - border-radius: 4px; } - #LookingGlassDialog .labels { - spacing: 4px; } - #LookingGlassDialog .notebook-tab { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: #ccc; - transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; } - #LookingGlassDialog .notebook-tab:hover { - color: white; - text-shadow: black 0px 2px 2px; } - #LookingGlassDialog .notebook-tab:selected { - border-bottom-width: 2px; - border-color: #4187ff; - color: white; - text-shadow: black 0px 2px 2px; } - #LookingGlassDialog StBoxLayout#EvalBox { - padding: 4px; - spacing: 4px; } - #LookingGlassDialog StBoxLayout#ResultsArea { - spacing: 4px; } - -.lg-dialog StEntry { - selection-background-color: #bbbbbb; - selected-color: #333333; } - -.lg-dialog .shell-link { - color: #999999; } - .lg-dialog .shell-link:hover { - color: #dddddd; } - -.lg-completions-text { - font-size: .9em; - font-style: italic; } - -.lg-obj-inspector-title { - spacing: 4px; } - -.lg-obj-inspector-button { - border: 1px solid gray; - padding: 4px; - border-radius: 4px; } - .lg-obj-inspector-button:hover { - border: 1px solid #ffffff; } - -#lookingGlassExtensions { - padding: 4px; } - -.lg-extensions-list { - padding: 4px; - spacing: 6px; } - -.lg-extension { - border: 1px solid #6f6f6f; - border-radius: 4px; - padding: 4px; } - -.lg-extension-name { - font-weight: bold; } - -.lg-extension-meta { - spacing: 6px; } - -#LookingGlassPropertyInspector { - background: rgba(0, 0, 0, 0.8); - border: 2px solid grey; - border-radius: 4px; - padding: 6px; } - .panel-workspace-indicator { box-shadow: inset 0 0 0 100px white; color: black; diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css index d22c84c0..0b81f661 100644 --- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css +++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css @@ -40,8 +40,7 @@ stage { background-color: rgba(39, 42, 52, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); } - -.app-well-app.app-folder .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, +.show-apps .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .list-search-result, .search-provider-icon { border-radius: 9px; padding: 6px; @@ -54,7 +53,7 @@ stage { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.6); } -.message-list-clear-button.button, .app-folder-dialog .folder-name-container .edit-folder-button, .button { +.app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 5px; border-style: solid; border-width: 1px; @@ -2102,190 +2101,32 @@ StScrollBar { #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(39, 119, 255, 0.5); } -/* This stylesheet is generated, DO NOT EDIT */ -/* Copyright 2009, 2015 Red Hat, Inc. - * - * Portions adapted from Mx's data/style/default.css - * Copyright 2009 Intel Corporation - * - * This program is free software; you can redistribute it and/or modify it - * under the terms and conditions of the GNU Lesser General Public License, - * version 2.1, as published by the Free Software Foundation. - * - * This program is distributed in the hope it will be useful, but WITHOUT ANY - * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for - * more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. - */ -/* GLOBALS */ -stage { - font-family: Cantarell, Sans-Serif; - font-size: 11pt; - color: #5c616c; } +/* OSD */ +.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container { + color: black; + background-color: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.15); } + .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon { + icon-shadow: rgba(0, 0, 0, 0.7) 0 1px 6px; } -/* WIDGETS */ -/* Buttons */ -.button, .message-list-clear-button.button, .app-folder-dialog .folder-name-container .edit-folder-button { - border-radius: 5px; - border-width: 1px; - min-height: 22px; - padding: 4px 32px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active { - color: #5c616c; - background-color: #d4d4d4; - border-color: #adadad; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - -.modal-dialog-linked-button, .notification-banner .notification-button, .hotplug-notification-item, .modal-dialog .modal-dialog-linked-button { - border-right-width: 1px; - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - padding: 12px; - border-top: 1px solid #d9d9d9; } - .modal-dialog-linked-button:insensitive, .notification-banner .notification-button:insensitive, .hotplug-notification-item:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; } - .modal-dialog-linked-button:hover, .notification-banner .notification-button:hover, .hotplug-notification-item:hover { - color: #5c616c; - background-color: white; - border-color: #d1d1d1; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } - .modal-dialog-linked-button:focus, .notification-banner .notification-button:focus, .hotplug-notification-item:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .modal-dialog-linked-button:active, .notification-banner .notification-button:active, .hotplug-notification-item:active { - color: #5c616c; - background-color: #d4d4d4; - border-color: #adadad; - text-shadow: none; - icon-shadow: none; - box-shadow: none; } - .modal-dialog-linked-button:first-child, .notification-banner .notification-button:first-child, .hotplug-notification-item:first-child { - border-radius: 0px 0px 0px 9px; } - .modal-dialog-linked-button:last-child, .notification-banner .notification-button:last-child, .hotplug-notification-item:last-child { - border-right-width: 0px; - border-radius: 0px 0px 9px 0px; } - .modal-dialog-linked-button:first-child:last-child, .notification-banner .notification-button:first-child:last-child, .hotplug-notification-item:first-child:last-child { - border-right-width: 0px; - border-radius: 0px 0px 9px 9px; } - -/* Entries */ -StEntry { - border-radius: 5px; - padding: 4px; - border-width: 1px; - color: #5c616c; - background-color: #fafafa; - border-color: #d9d9d9; - selection-background-color: #2777ff; - selected-color: #ffffff; } - StEntry:focus { - border-color: rgba(10, 10, 12, 0.5); - box-shadow: inset 0 0 0 1px rgba(92, 97, 108, 0.5); } - StEntry:insensitive { - color: #aeb0b6; - border-color: #fdfdfd; - box-shadow: none; } - StEntry StIcon.capslock-warning { - icon-size: 16px; - warning-color: #fd7d00; - padding: 0 4px; } - -/* Scrollbars */ -StScrollView.vfade { - -st-vfade-offset: 68px; } - -StScrollView.hfade { - -st-hfade-offset: 68px; } - -StScrollBar { - padding: 0; } - StScrollView StScrollBar { - min-width: 14px; - min-height: 14px; } - StScrollBar StBin#trough { - border-radius: 0; - background-color: transparent; } - StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { - border-radius: 8px; - background-color: #9da0a7; - margin: 3px; } - StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #7d8189; } - StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: #2777ff; } +.osd-window .level { + -barlevel-background-color: rgba(0, 0, 0, 0.3); + -barlevel-active-background-color: black; } /* Slider */ .slider { - height: 1em; - -barlevel-height: 0.3em; - -barlevel-background-color: rgba(92, 97, 108, 0.1); - -barlevel-border-color: #d9d9d9; + height: 1.1em; + -barlevel-height: .35em; + -barlevel-background-color: #d9d9d9; + -barlevel-border-color: #2777ff; -barlevel-active-background-color: #2777ff; - -barlevel-active-border-color: #0051da; -barlevel-overdrive-color: #d41919; - -barlevel-overdrive-border-color: #a61414; - -barlevel-overdrive-separator-width: 0.2em; - -barlevel-border-width: 1px; - -slider-handle-radius: 8px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: #d9d9d9; - color: white; } - .slider:hover { - color: white; } - .slider:active { - color: #dbdbdb; } + -barlevel-overdrive-separator-width: 0.1em; + -barlevel-border-width: 0; + -slider-handle-radius: 0; } /* Check Boxes */ -.check-box StBoxLayout { - spacing: .8em; } - .check-box StBin { - width: 24px; - height: 22px; background-image: url("assets/checkbox-off.svg"); } .check-box:focus StBin { @@ -2297,441 +2138,7 @@ StScrollBar { .check-box:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } -/* Switches */ -.toggle-switch { - color: #5c616c; - width: 46px; - height: 22px; - background-size: contain; - background-image: url("assets/toggle-off.svg"); } - .toggle-switch:checked { - background-image: url("assets/toggle-on.svg"); } - -/* links */ -.shell-link { - color: #005af3; } - .shell-link:hover { - color: #2777ff; } - -/* Modal Dialogs */ -.headline { - font-size: 110%; } - -.lightbox { - background-color: black; } - -.flashspot { - background-color: white; } - -.modal-dialog { - border-radius: 9px; } - .modal-dialog .modal-dialog-content-box { - padding: 24px; } - .modal-dialog .run-dialog-entry { - width: 20em; - margin-bottom: 6px; } - .modal-dialog .run-dialog-error-box { - padding-top: 16px; - spacing: 6px; } - .modal-dialog .run-dialog-button-box { - padding-top: 1em; } - .modal-dialog .run-dialog-label { - font-size: 12pt; - font-weight: normal; - color: #5c616c; - padding-bottom: .4em; } - -.mount-dialog-subject, -.end-session-dialog-subject { - font-size: 14pt; } - -/* Message Dialog */ -.message-dialog-main-layout { - padding: 12px 20px 0; - spacing: 12px; } - -.message-dialog-content { - max-width: 28em; - spacing: 20px; } - -.message-dialog-icon { - min-width: 48px; - icon-size: 48px; } - -.message-dialog-title { - font-weight: bold; } - -.message-dialog-subtitle { - color: #5c616c; - font-weight: bold; } - -/* End Session Dialog */ -.end-session-dialog { - spacing: 42px; - border: 1px solid #d9d9d9; } - -.end-session-dialog-list { - padding-top: 20px; } - -.end-session-dialog-layout { - padding-left: 17px; } - .end-session-dialog-layout:rtl { - padding-right: 17px; } - -.end-session-dialog-description { - width: 28em; - padding-bottom: 10px; } - .end-session-dialog-description:rtl { - text-align: right; } - -.end-session-dialog-warning { - width: 28em; - color: #fd7d00; - padding-top: 6px; } - .end-session-dialog-warning:rtl { - text-align: right; } - -.end-session-dialog-logout-icon { - border-radius: 99px; - width: 48px; - height: 48px; - background-size: contain; } - -.end-session-dialog-shutdown-icon { - color: #5c616c; - width: 48px; - height: 48px; } - -.end-session-dialog-inhibitor-layout { - spacing: 16px; - max-height: 200px; - padding-right: 65px; - padding-left: 65px; } - -.end-session-dialog-session-list, -.end-session-dialog-app-list { - spacing: 1em; } - -.end-session-dialog-list-header { - font-weight: bold; } - .end-session-dialog-list-header:rtl { - text-align: right; } - -.end-session-dialog-app-list-item, -.end-session-dialog-session-list-item { - spacing: 1em; } - -.end-session-dialog-app-list-item-name, -.end-session-dialog-session-list-item-name { - font-weight: bold; } - -.end-session-dialog-app-list-item-description { - color: #50555e; - font-size: 10pt; } - -/* ShellMountOperation Dialogs */ -.shell-mount-operation-icon { - icon-size: 48px; } - -.mount-dialog { - spacing: 24px; } - .mount-dialog .message-dialog-title { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; - max-width: 34em; } - .mount-dialog .message-dialog-title:rtl { - padding-left: 0px; - padding-right: 17px; } - .mount-dialog .message-dialog-body { - padding-left: 17px; - width: 28em; } - .mount-dialog .message-dialog-body:rtl { - padding-left: 0px; - padding-right: 17px; } - -.mount-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; } - -.mount-dialog-app-list:rtl { - padding-right: 49px; - padding-left: 32px; } - -.mount-dialog-app-list-item { - color: #737a88; } - .mount-dialog-app-list-item:hover { - color: #5c616c; } - .mount-dialog-app-list-item:ltr { - padding-right: 1em; } - .mount-dialog-app-list-item:rtl { - padding-left: 1em; } - -.mount-dialog-app-list-item-icon:ltr { - padding-right: 17px; } - -.mount-dialog-app-list-item-icon:rtl { - padding-left: 17px; } - -.mount-dialog-app-list-item-name { - font-size: 10pt; } - -/* Password or Authentication Dialog */ -.prompt-dialog { - width: 34em; } - .prompt-dialog .message-dialog-main-layout { - spacing: 24px; - padding: 10px; } - .prompt-dialog .message-dialog-content { - spacing: 16px; } - .prompt-dialog .message-dialog-title { - color: #818794; } - -.prompt-dialog-description:rtl { - text-align: right; } - -.prompt-dialog-password-box { - spacing: 1em; - padding-bottom: 1em; } - -.prompt-dialog-error-label { - font-size: 10pt; - color: #fd7d00; - padding-bottom: 8px; } - -.prompt-dialog-info-label { - font-size: 10pt; - padding-bottom: 8px; } - -.hidden { - color: rgba(0, 0, 0, 0); } - -.prompt-dialog-null-label { - font-size: 10pt; - padding-bottom: 8px; } - -.prompt-dialog-pim-box { - spacing: 1em; } - -.prompt-dialog-grid { - spacing-rows: 15px; - spacing-columns: 1em; } - -.prompt-dialog-keyfiles-box { - spacing: 1em; } - -.prompt-dialog-button.button { - padding: 8px; } - -/* Polkit Dialog */ -.polkit-dialog-user-layout { - padding-left: 10px; - spacing: 10px; } - .polkit-dialog-user-layout:rtl { - padding-left: 0px; - padding-right: 10px; } - -.polkit-dialog-user-root-label { - color: #fd7d00; } - -.polkit-dialog-user-icon { - border-radius: 99px; - background-size: contain; - width: 48px; - height: 48px; } - -/* Audio selection dialog */ -.audio-device-selection-dialog { - spacing: 30px; } - -.audio-selection-content { - spacing: 20px; - padding: 24px; } - -.audio-selection-title { - font-weight: bold; - text-align: center; } - -.audio-selection-box { - spacing: 20px; } - -.audio-selection-device { - border: 1px solid #d9d9d9; - border-radius: 12px; } - .audio-selection-device:hover, .audio-selection-device:focus { - background-color: white; } - .audio-selection-device:active { - background-color: #2777ff; - color: #ffffff; } - -.audio-selection-device-box { - padding: 20px; - spacing: 20px; } - -.audio-selection-device-icon { - icon-size: 64px; } - -/* Access Dialog */ -.access-dialog { - spacing: 30px; } - -/* Geolocation Dialog */ -.geolocation-dialog { - spacing: 30px; } - -/* Extension Dialog */ -.extension-dialog .message-dialog-main-layout { - spacing: 24px; - padding: 10px; } - -.extension-dialog .message-dialog-title { - font-weight: normal; - color: #5c616c; } - -/* Inhibit-Shortcuts Dialog */ -.inhibit-shortcuts-dialog { - spacing: 30px; } - -/* Network Agent Dialog */ -.network-dialog-secret-table { - spacing-rows: 15px; - spacing-columns: 1em; } - -.keyring-dialog-control-table { - spacing-rows: 15px; - spacing-columns: 1em; } - -/* Popovers/Menus */ -.popup-menu { - min-width: 15em; - color: #5c616c; - border-color: #d9d9d9; } - .popup-menu .popup-sub-menu { - background-color: #f2f2f2; - box-shadow: inset 0 -1px 0px #d9d9d9; } - .popup-menu .popup-menu-content { - padding: 1em 0em; } - .popup-menu .popup-menu-item { - spacing: 12px; } - .popup-menu .popup-menu-item:ltr { - padding: .4em 1.75em .4em 0em; } - .popup-menu .popup-menu-item:rtl { - padding: .4em 0em .4em 1.75em; } - .popup-menu .popup-menu-item:checked { - background-color: #ffffff; - box-shadow: inset 0 -1px 0px #d9d9d9; - font-weight: bold; } - .popup-menu .popup-menu-item.selected { - background-color: rgba(255, 255, 255, 0.8); - color: #5c616c; } - .popup-menu .popup-menu-item:active { - background-color: #2777ff; - color: #ffffff; } - .popup-menu .popup-menu-item:insensitive { - color: rgba(92, 97, 108, 0.5); } - .popup-menu .popup-inactive-menu-item { - color: #5c616c; } - .popup-menu .popup-inactive-menu-item:insensitive { - color: rgba(92, 97, 108, 0.5); } - .popup-menu.panel-menu { - -boxpointer-gap: 4px; - margin-bottom: 1.75em; } - -.popup-menu-ornament { - text-align: right; - width: 1.2em; } - -.popup-menu-boxpointer, -.candidate-popup-boxpointer { - -arrow-border-radius: 9px; - -arrow-background-color: #ffffff; - -arrow-border-width: 1px; - -arrow-border-color: rgba(0, 0, 0, 0.4); - -arrow-base: 24px; - -arrow-rise: 11px; - -arrow-box-shadow: 0 1px 3px black; } - -.popup-separator-menu-item { - height: 1px; - margin: 6px 64px; - background-color: transparent; - border-color: #d9d9d9; - border-bottom-width: 1px; - border-bottom-style: solid; } - -.rename-folder-popup .rename-folder-popup-item { - spacing: 6px; } - .rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl { - padding: 0, 12px; } - -.background-menu { - -boxpointer-gap: 4px; - -arrow-rise: 0px; } - -/* fallback menu -- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled - app menu inside the main app window itself rather than the top bar -*/ -/************* - * App Icons * - *************/ -/* Outline for low res icons */ -.lowres-icon { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - -/* Drapshadow for large icons */ -.icon-dropshadow { - icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } - -/* OSD */ -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - margin: 32px; - min-width: 64px; - min-height: 64px; } - .osd-window .osd-monitor-label { - font-size: 3em; } - .osd-window .level { - height: 0.6em; - -barlevel-height: 0.6em; - -barlevel-background-color: rgba(92, 97, 108, 0.5); - -barlevel-active-background-color: black; - -barlevel-overdrive-color: #d41919; - -barlevel-overdrive-separator-width: 0.2em; } - -/* Pad OSD */ -.pad-osd-window { - padding: 32px; - background-color: rgba(0, 0, 0, 0.8); } - .pad-osd-window .pad-osd-title-box { - spacing: 12px; } - .pad-osd-window .pad-osd-title-menu-box { - spacing: 6px; } - -.combo-box-label { - width: 15em; } - /* App Switcher */ -.switcher-popup { - padding: 8px; - spacing: 16px; } - -.osd-window, -.resize-popup, -.switcher-list { - padding: 12px; } - -.switcher-list-item-container { - spacing: 8px; } - -.switcher-list .item-box { - padding: 8px; - border-radius: 4px; } - .switcher-list .item-box:outlined { padding: 6px; border: 3px solid #2777ff; @@ -2742,510 +2149,31 @@ StScrollBar { color: #ffffff; font-weight: bold; } -.switcher-list .thumbnail-box { - padding: 2px; - spacing: 4px; } - -.switcher-list .thumbnail { - width: 256px; } - -.switcher-list .separator { - width: 1px; - background: #d9d9d9; } - -.switcher-arrow { - border-color: rgba(0, 0, 0, 0); - color: rgba(92, 97, 108, 0.8); } - .switcher-arrow:highlighted { - color: #5c616c; } - -.input-source-switcher-symbol { - font-size: 34pt; - width: 96px; - height: 96px; } - -/* Window Cycler */ -.cycler-highlight { - border: 5px solid #2777ff; } - /* Workspace Switcher */ -.workspace-switcher-group { - padding: 12px; } +.ws-switcher-box { + border: none; } .workspace-switcher-container { - padding: 6px; } + padding: 7px; } -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; } - -.ws-switcher-active-up, .ws-switcher-active-down, -.ws-switcher-active-left, .ws-switcher-active-right { - height: 52px; - background-color: #2777ff; - color: #ffffff; - background-size: 32px; - border-radius: 6px; +.ws-switcher-active-up, +.ws-switcher-active-down, +.ws-switcher-active-left, +.ws-switcher-active-right { box-shadow: 0 0px 6px rgba(0, 0, 0, 0.5); } -.ws-switcher-box { - height: 50px; - border: none; - background: transparent; - border-radius: 6px; } +/* Window Picker */ +.window-clone-border { + border: 5px solid rgba(255, 255, 255, 0.5); + border-radius: 6px; + box-shadow: inset 0 0 0 2px white; } -.osd-window, -.resize-popup, -.switcher-list, .workspace-switcher-container { +.window-caption { + font-size: .9em; color: black; - background-color: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 12px; } - .osd-window StIcon, - .resize-popup StIcon, - .switcher-list StIcon, .workspace-switcher-container StIcon { - icon-shadow: rgba(0, 0, 0, 0.7) 0 1px 6px; } - -.notification-banner StEntry, .nm-dialog StEntry, .modal-dialog StEntry, .prompt-dialog StEntry, .audio-device-selection-dialog StEntry, .access-dialog StEntry, .geolocation-dialog StEntry, .extension-dialog StEntry, .inhibit-shortcuts-dialog StEntry { - color: #5c616c; - background-color: #fafafa; - border-color: #d9d9d9; - box-shadow: none; } - .notification-banner StEntry:focus, .nm-dialog StEntry:focus, .modal-dialog StEntry:focus, .prompt-dialog StEntry:focus, .audio-device-selection-dialog StEntry:focus, .access-dialog StEntry:focus, .geolocation-dialog StEntry:focus, .extension-dialog StEntry:focus, .inhibit-shortcuts-dialog StEntry:focus { - border: 2px solid #2777ff; } - -.nm-dialog, .modal-dialog, .prompt-dialog, .audio-device-selection-dialog, .access-dialog, .geolocation-dialog, .extension-dialog, .inhibit-shortcuts-dialog { - color: #5c616c; - background-color: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.4); } - .nm-dialog .button, .modal-dialog .button, .prompt-dialog .button, .audio-device-selection-dialog .button, .access-dialog .button, .geolocation-dialog .button, .extension-dialog .button, .inhibit-shortcuts-dialog .button { - background-color: #ffffff; - color: #5c616c; } - .nm-dialog .button, .modal-dialog .button, .prompt-dialog .button, .audio-device-selection-dialog .button, .access-dialog .button, .geolocation-dialog .button, .extension-dialog .button, .inhibit-shortcuts-dialog .button { - box-shadow: none; - border-color: #d9d9d9; } - .nm-dialog .button:hover, .modal-dialog .button:hover, .prompt-dialog .button:hover, .audio-device-selection-dialog .button:hover, .access-dialog .button:hover, .geolocation-dialog .button:hover, .extension-dialog .button:hover, .inhibit-shortcuts-dialog .button:hover { - background-color: white; } - .nm-dialog .button:active, .modal-dialog .button:active, .prompt-dialog .button:active, .audio-device-selection-dialog .button:active, .access-dialog .button:active, .geolocation-dialog .button:active, .extension-dialog .button:active, .inhibit-shortcuts-dialog .button:active { - background-color: #2777ff; - color: #ffffff; } - .nm-dialog .button:disabled, .modal-dialog .button:disabled, .prompt-dialog .button:disabled, .audio-device-selection-dialog .button:disabled, .access-dialog .button:disabled, .geolocation-dialog .button:disabled, .extension-dialog .button:disabled, .inhibit-shortcuts-dialog .button:disabled { - color: #aeb0b6; } - -/* Tiled window previews */ -.tile-preview { - background-color: rgba(39, 119, 255, 0.5); - border: 1px solid #2777ff; } - -.tile-preview-left.on-primary { - border-radius: 0 0 0 0; } - -.tile-preview-right.on-primary { - border-radius: 0 0 0 0; } - -.tile-preview-left.tile-preview-right.on-primary { - border-radius: 0 0 0 0; } - -/* TOP BAR */ -#panel { - background: rgba(255, 255, 255, 0.8); - font-weight: bold; - height: 1.86em; - font-feature-settings: "tnum"; - text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } - #panel StIcon { - icon-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } - #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { - background-color: transparent; } - #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { - color: white; } - #panel #panelLeft, #panel #panelCenter { - spacing: 4px; } - #panel #panelActivities.panel-button { - margin-left: .4em; } - #panel #panelActivities.panel-button StLabel { - background-image: url("assets/view-grid-symbolic.svg"); - background-size: contain; - width: 1.5em; - height: 1.5em; - color: transparent; } - #panel #panelActivities.panel-button:overview StLabel { - background-image: url("assets/view-grid-symbolic-checked.svg"); } - #panel .panel-corner { - -panel-corner-radius: 0; - -panel-corner-background-color: rgba(255, 255, 255, 0.8); - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; } - #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus { - -panel-corner-border-color: #4187ff; } - #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen { - -panel-corner-radius: 0; - -panel-corner-background-color: transparent; - -panel-corner-border-color: transparent; } - #panel .panel-button { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: black; } - #panel .panel-button .app-menu-icon { - -st-icon-style: symbolic; - margin-left: 4px; - margin-right: 4px; } - #panel .panel-button:hover { - color: black; } - #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -3px 0px #2777ff; - color: black; } - #panel .panel-button .system-status-icon { - icon-size: 1.09em; - padding: 0 5px; } - .unlock-screen #panel .panel-button, .login-screen #panel .panel-button, .lock-screen #panel .panel-button { - color: #737a88; } - .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { - color: #737a88; } - #panel .panel-status-indicators-box, - #panel .panel-status-menu-box { - spacing: 2px; } - #panel .power-status.panel-status-indicators-box { - spacing: 0; } - #panel .screencast-indicator { - color: #fd7d00; } - #panel .remote-access-indicator { - color: #fd7d00; } - -#calendarArea { - padding: 0.75em 1.0em; - background-image: url("assets/kali-dragon.svg"); - background-size: contain; } - -.calendar { - margin-bottom: 1em; } - -.calendar, -.datemenu-today-button, -.datemenu-displays-box, -.message-list-sections { - margin: 0 1.5em; } - -.datemenu-calendar-column { - spacing: 0.5em; } - -.datemenu-displays-section { - padding-bottom: 3em; } - -.datemenu-displays-box { - spacing: 1em; } - -.datemenu-calendar-column { - border: 0 solid #d9d9d9; } - .datemenu-calendar-column:ltr { - border-left-width: 1px; } - .datemenu-calendar-column:rtl { - border-right-width: 1px; } - -.datemenu-today-button, -.world-clocks-button, -.weather-button, -.events-section-title { - border-radius: 4px; - padding: .4em; } - -.message-list-section-list:ltr { - padding-left: .4em; } - -.message-list-section-list:rtl { - padding-right: .4em; } - -.datemenu-today-button:hover, .datemenu-today-button:focus, -.world-clocks-button:hover, -.world-clocks-button:focus, -.weather-button:hover, -.weather-button:focus, -.events-section-title:hover, -.events-section-title:focus { - background-color: white; } - -.datemenu-today-button:active, -.world-clocks-button:active, -.weather-button:active, -.events-section-title:active { - background-color: #dbdbdb; } - -.datemenu-today-button .date-label { - font-size: 1.5em; - font-weight: 300; } - -.world-clocks-header, -.weather-header, -.events-section-title { - color: black; - font-weight: bold; } - -.weather-header.location { - font-weight: normal; - font-size: 0.9em; } - -.world-clocks-grid, -.weather-grid { - spacing-rows: 0.4em; - spacing-columns: 0.8em; } - -.weather-box { - spacing: 0.4em; } - -.world-clocks-city { - font-weight: bold; - font-size: 0.9em; } - -.world-clocks-time { - color: #2d3035; - font-feature-settings: "tnum"; - font-size: 1.2em; } - -.world-clocks-timezone { - color: #5c616c; - font-feature-settings: "tnum"; - font-size: 0.9em; } - -.weather-forecast-icon { - icon-size: 2.18em; } - -.weather-forecast-time { - color: black; - font-size: 0.8em; } - -.calendar-month-label { - color: #686d7a; - font-weight: bold; - padding: 8px 0; } - -.pager-button { - background-color: transparent; - width: 32px; - border-radius: 4px; } - .pager-button:hover, .pager-button:focus { - background-color: white; } - .pager-button:active { - background-color: rgba(92, 97, 108, 0.16); } - -.calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { - icon-size: 1.09em; } - -.calendar-day-base { - font-size: 80%; - text-align: center; - width: 2.4em; - height: 2.4em; - padding: 0.1em; - margin: 2px; - border-radius: 1.4em; - font-feature-settings: "tnum"; } - .calendar-day-base:hover, .calendar-day-base:focus { - background-color: white; } - .calendar-day-base:active, .calendar-day-base:selected { - color: white; - background-color: #2777ff; - border-color: transparent; } - .calendar-day-base.calendar-day-heading { - color: #686d7a; - margin-top: 1em; - font-size: 70%; } - -.calendar-day { - border-width: 0; } - -.calendar-day-top { - border-top-width: 1px; } - -.calendar-day-left { - border-left-width: 1px; } - -.calendar-nonwork-day { - color: #aeb0b6; } - -.calendar-today { - font-weight: bold; - color: #686d7a; - background-color: #f2f2f2; } - -.calendar-day-with-events { - color: #737a88; - font-weight: bold; - background-image: url("assets/calendar-today.svg"); } - -.calendar-other-month-day { - color: rgba(92, 97, 108, 0.5); - opacity: 0.5; } - -.calendar-week-number { - font-size: 70%; - font-weight: bold; - width: 2.3em; - height: 1.8em; - border-radius: 2px; - padding: 0.5em 0 0; - margin: 6px; - background-color: #d9d9d9; - color: #5c616c; } - -/* Message list */ -.message-list { - width: 31.5em; - background: rgba(255, 255, 255, 0.7); } - -.message-list-clear-button.button { - margin: 1.5em 1.5em 0; } - -.message-list-sections { - spacing: 1em; } - -.message-list-section, -.message-list-section-list { - spacing: 0.4em; } - -.message { - border: 1px solid #d9d9d9; background-color: white; - border-radius: 5px; } - .message:hover, .message:focus { - background-color: white; } - .message:active { - background-color: rgba(92, 97, 108, 0.16); } - -.message-icon-bin { - padding: 0.68em 0.2em 0.68em 0.68em; } - .message-icon-bin:rtl { - padding: 0.68em 0.68em 0.68em 0.2em; } - -.message-icon-bin > StIcon { - color: #5c616c; - icon-size: 1.09em; - -st-icon-style: symbolic; } - -.message-icon-bin > .fallback-window-icon { - width: 1.09em; - height: 1.09em; } - -.message-secondary-bin { - padding: 0 0.82em; } - -.message-secondary-bin > .event-time { - color: #5c616c; - font-size: 0.7em; - /* HACK: the label should be baseline-aligned with a 1em label, - fake this with some bottom padding */ - padding-bottom: 0.13em; } - -.message-secondary-bin > StIcon { - icon-size: 1.09em; } - -.message-title { - color: #5c616c; } - -.message-content { - color: #454850; - padding: 10px; } - -.message-close-button { - color: #818794; } - .message-close-button:hover { - color: #aaaeb7; } - .message-close-button:active { - color: #c6c8ce; } - -.message-media-control { - padding: 12px; - color: #818794; } - .message-media-control:last-child:ltr { - padding-right: 18px; } - .message-media-control:last-child:rtl { - padding-left: 18px; } - .message-media-control:hover { - color: #aaaeb7; } - .message-media-control:active { - color: #c6c8ce; } - .message-media-control:insensitive { - color: #e1e3e6; } - -.media-message-cover-icon { - icon-size: 48px !important; } - .media-message-cover-icon.fallback { - color: #737a88; - background-color: #ffffff; - border: 1px solid #ffffff; - border-radius: 2px; - icon-size: 32px !important; - padding: 6px; } - -#appMenu { - spacing: 4px; } - #appMenu .label-shadow { - color: transparent; } - -.app-menu, -.app-well-menu { - max-width: 27.25em; } - -.aggregate-menu { - min-width: 21em; } - .aggregate-menu .popup-menu-icon { - padding: 0 4px; } - .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr { - /* 12px spacing + 2*4px padding */ - padding-left: 20px; - margin-left: 1.09em; } - .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { - /* 12px spacing + 2*4px padding */ - padding-right: 20px; - margin-right: 1.09em; } - -.system-menu-action { - -st-icon-style: symbolic; - color: #5c616c; - border-radius: 32px; - /* wish we could do 50% */ - padding: 13px; - border: 1px solid #d9d9d9; } - .system-menu-action:hover, .system-menu-action:focus { - background-color: white; - color: #5c616c; } - .system-menu-action:active { - background-color: #2777ff; - color: #ffffff; - border-color: #0051da; } - .system-menu-action > StIcon { - icon-size: 16px; } - -.ripple-box { - width: 52px; - height: 52px; - border-radius: 0 0 52px 0; - background-color: rgba(39, 119, 255, 0.3); - box-shadow: 0 0 2px 2px #2777ff; } - -.ripple-box:rtl { - border-radius: 0 0 0 52px; } - -.select-area-rubberband { - background-color: rgba(39, 119, 255, 0.3); - border: 1px solid #2777ff; } - -.ripple-pointer-location { - width: 50px; - height: 50px; - border-radius: 25px 25px 25px 25px; - background-color: rgba(192, 215, 255, 0.3); - box-shadow: 0 0 2px 2px #8db7ff; } - -.popup-menu-arrow { - width: 0; } - -.popup-menu-icon { - icon-size: 1.09em; } + border: none; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); } .window-close { background-image: url("assets/close-window.svg"); @@ -3258,216 +2186,227 @@ StScrollBar { width: 32px; -shell-close-overlap: 16px; } .window-close:hover { - background-image: url("assets/close-window-hover.svg"); } + background-image: url("assets/close-window-hover.svg"); + background-color: transparent; } .window-close:active { - background-image: url("assets/close-window-active.svg"); } + background-image: url("assets/close-window-active.svg"); + background-color: transparent; } -.pie-timer { - width: 60px; - height: 60px; - -pie-border-width: 3px; - -pie-border-color: #2777ff; - -pie-background-color: rgba(243, 247, 255, 0.3); } +/* Tiled window previews */ +.tile-preview-left.on-primary, +.tile-preview-right.on-primary, +.tile-preview-left.tile-preview-right.on-primary { + border-radius: 0; } -/* NETWORK DIALOGS */ -.nm-dialog { - max-height: 34em; - min-height: 31em; - min-width: 32em; } +/* TOP BAR */ +#panel { + background: rgba(255, 255, 255, 0.8); + text-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } + #panel .popup-menu-arrow { + width: 0; } + #panel StIcon { + icon-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px; } + #panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview { + background-color: transparent; } + #panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked { + color: white; } + #panel .panel-corner { + -panel-corner-radius: 0; } + #panel .panel-button, #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked { + color: black; } + #panel #panelActivities.panel-button { + margin-left: .4em; } + #panel #panelActivities.panel-button StLabel { + background-image: url("assets/view-grid-symbolic.svg"); + background-size: contain; + width: 1.5em; + height: 1.5em; + color: transparent; } + #panel #panelActivities.panel-button:overview StLabel { + background-image: url("assets/view-grid-symbolic-checked.svg"); } -.nm-dialog-content { - spacing: 20px; - padding: 24px; } +/* Date/Time Menu */ +#calendarArea { + background-image: url("assets/kali-dragon.svg"); + background-size: contain; } -.nm-dialog-header-hbox { - spacing: 10px; } +.events-section-title { + padding: 1em; } -.nm-dialog-airplane-box { - spacing: 12px; } +.datemenu-today-button .date-label { + font-size: 1.5em; + font-weight: 300; } -.nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; } +.calendar { + border-width: 1px; + border-style: solid; + border-radius: 7px; + margin: 4px; + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + icon-shadow: none; } + .calendar:focus { + color: #5c616c; + text-shadow: 0 1px rgba(255, 255, 255, 0.3); + icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .calendar:hover { + color: #5c616c; + background-color: white; + border-color: #d1d1d1; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + text-shadow: 0 1px rgba(255, 255, 255, 0.3); + icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .calendar:active { + color: #5c616c; + background-color: #f7f7f7; + border-color: #d1d1d1; + text-shadow: none; + icon-shadow: none; + box-shadow: none; } -.nm-dialog-airplane-text { - color: #5c616c; } +/* Message list */ +.message-list { + width: 31.5em; + background: rgba(255, 255, 255, 0.7); } -.nm-dialog-header-icon { - icon-size: 32px; } +/* World clocks */ +.world-clocks-button { + border-width: 1px; + border-style: solid; + border-radius: 7px; + margin: 4px; + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + icon-shadow: none; } + .world-clocks-button:focus { + color: #5c616c; + text-shadow: 0 1px rgba(255, 255, 255, 0.3); + icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .world-clocks-button:hover { + color: #5c616c; + background-color: white; + border-color: #d1d1d1; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + text-shadow: 0 1px rgba(255, 255, 255, 0.3); + icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .world-clocks-button:active { + color: #5c616c; + background-color: #f7f7f7; + border-color: #d1d1d1; + text-shadow: none; + icon-shadow: none; + box-shadow: none; } -.nm-dialog-scroll-view { - border: 2px solid #d9d9d9; } - -.nm-dialog-header { - font-weight: bold; } - -.nm-dialog-item { - font-size: 110%; - border-bottom: 1px solid #d9d9d9; - padding: 12px; - spacing: 20px; } - -.nm-dialog-item:selected { - background-color: #2777ff; - color: #ffffff; } - -.nm-dialog-icons { - spacing: .5em; } - -.nm-dialog-icon { - icon-size: 16px; } - -.no-networks-label { - color: #999999; } - -.no-networks-box { - spacing: 12px; } - -/* OVERVIEW */ -#overview { - spacing: 24px; } - -.overview-controls { - padding-bottom: 32px; } - -.window-picker { - -horizontal-spacing: 16px; - -vertical-spacing: 16px; - padding: 0 16px 16px; } - .window-picker.external-monitor { - padding: 16px; } - -.window-clone-border { - border: 7px solid rgba(255, 255, 255, 0.35); - border-radius: 9px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } - -.window-caption { - spacing: 25px; - color: black; - background-color: white; - border-radius: 8px; - padding: 4px 12px; - box-shadow: rgba(0, 0, 0, 0.5) 0 1px 6px; } +.weather-button { + border-width: 1px; + border-style: solid; + border-radius: 7px; + margin: 4px; + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); + text-shadow: none; + icon-shadow: none; } + .weather-button:focus { + color: #5c616c; + text-shadow: 0 1px rgba(255, 255, 255, 0.3); + icon-shadow: 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } + .weather-button:hover { + color: #5c616c; + background-color: white; + border-color: #d1d1d1; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); + text-shadow: 0 1px rgba(255, 255, 255, 0.3); + icon-shadow: 0 1px rgba(255, 255, 255, 0.3); } + .weather-button:active { + color: #5c616c; + background-color: #f7f7f7; + border-color: #d1d1d1; + text-shadow: none; + icon-shadow: none; + box-shadow: none; } +/* Search */ .search-entry { - width: 320px; - padding: 7px 9px; - border-radius: 18px; - color: white; + color: black; font-weight: bold; background-color: rgba(255, 255, 255, 0.2); - border-color: transparent; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + border-radius: 100px; transition-duration: 200ms; } - .search-entry:focus { - padding: 6px 8px; - border-width: 2px; - border-color: #2777ff; } - .search-entry .search-entry-icon { - icon-size: 1em; - padding: 0 4px; + .search-entry StLabel.hint-text { color: white; } - .search-entry:hover, .search-entry:focus { - background: white; } - .search-entry:hover, .search-entry:hover .search-entry-icon, .search-entry:focus, .search-entry:focus .search-entry-icon { + .search-entry, .search-entry:focus, .search-entry:hover { + width: 21em; + padding: .6em .8em; + border: none; } + .search-entry:focus, .search-entry:hover { + background-color: white; + color: black; + font-weight: normal; + text-shadow: none; + box-shadow: none; } + .search-entry:focus StLabel.hint-text, .search-entry:hover StLabel.hint-text { color: black; } + .search-entry:focus .search-entry-icon, .search-entry:hover .search-entry-icon { + color: black; + icon-shadow: none; } + .search-entry .search-entry-icon { + color: white; + icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); } -#searchResultsContent { - max-width: 1000px; - padding-left: 20px; - padding-right: 20px; - spacing: 16px; } - -.search-section { - spacing: 16px; } - -.search-section-content { - spacing: 32px; } - -.list-search-results { - spacing: 3px; } - -.search-section-separator { - height: 2px; - background-color: rgba(255, 255, 255, 0.2); } +.search-section .search-section-separator { + height: 1px; + background-color: rgba(255, 255, 255, 0.1); } .search-section:last-child .search-section-separator { background-color: transparent; } -.list-search-result-content { - spacing: 30px; } +.search-section-content { + background-color: transparent; + border-radius: 0; + border: 0; + box-shadow: 0; } -.list-search-result-title { - color: #f2f2f2; - spacing: 12px; } - -.list-search-result-description { - color: #b3b3b3; } - -.list-search-provider-details { - width: 150px; - color: #f2f2f2; - margin-top: 0.24em; } - -.list-search-provider-content { - spacing: 20px; } - -.search-provider-icon { - padding: 15px; } +.search-provider-icon .list-search-provider-content .list-search-provider-details { + font-weight: bold; } /* DASHBOARD */ #dash { color: white; background-color: transparent; - border: none; - font-size: 9pt; - padding: 4px 0; - border-radius: 0px 9px 9px 0px; } - #dash:rtl { - border-radius: 9px 0 0 9px; } - #dash .placeholder { - background-image: url("assets/dash-placeholder.svg"); - background-size: contain; - height: 24px; } - #dash .empty-dash-drop-target { - width: 24px; - height: 24px; } + border: none; } #dash .overview-icon StIcon { color: white; icon-shadow: rgba(0, 0, 0, 0.7) 0 2px 6px; } -.dash-item-container > StWidget { - padding: 4px 8px; } +.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { + background-color: rgba(255, 255, 255, 0.2); + color: black; } -.dash-label { - border-radius: 7px; - padding: 4px 12px; - color: black; - background-color: #ffffff; - border: none; - text-align: center; - box-shadow: rgba(0, 0, 0, 0.5) 0 1px 6px; - -x-offset: 8px; } +/* Workspace pager */ +.workspace-thumbnails { + background-color: rgba(0, 0, 0, 0.2); + border: none; } + .workspace-thumbnails .placeholder { + background-image: none; } -/* App Vault/Grid */ -.icon-grid { - spacing: 30px; - -shell-grid-horizontal-item-size: 136px; - -shell-grid-vertical-item-size: 136px; } - .icon-grid .overview-icon { - icon-size: 96px; } - -.system-action-icon { - background-color: black; - color: white; - border-radius: 99px; - icon-size: 48px; } - -.app-view-controls { - padding-bottom: 32px; } +/* App Folders */ +.app-well-app.app-folder { + background-color: rgba(255, 255, 255, 0.2); } +/* Frequent | All toggle */ .app-view-control { - padding: 4px 32px; margin: 0; } .app-view-control, .app-view-control:hover, .app-view-control:checked { color: white; @@ -3486,733 +2425,6 @@ StScrollBar { .app-view-control:last-child { border-radius: 0 5px 5px 0; } -.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, -.list-search-result:focus, -.list-search-result:selected, -.list-search-result:hover { - background-color: rgba(255, 255, 255, 0.1); - transition-duration: 200ms; } - -.search-provider-icon:active, .search-provider-icon:checked, -.list-search-result:active, -.list-search-result:checked { - background-color: rgba(17, 18, 23, 0.9); } - -.app-well-app .overview-icon, -.app-well-app.app-folder .overview-icon, -.show-apps .overview-icon, -.grid-search-result .overview-icon { - font-weight: bold; } - -.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, -.app-well-app.app-folder:hover .overview-icon, -.app-well-app.app-folder:focus .overview-icon, -.app-well-app.app-folder:selected .overview-icon, -.show-apps:hover .overview-icon, -.show-apps:focus .overview-icon, -.show-apps:selected .overview-icon, -.grid-search-result:hover .overview-icon, -.grid-search-result:focus .overview-icon, -.grid-search-result:selected .overview-icon { - background-color: rgba(255, 255, 255, 0.1); - transition-duration: 0ms; - border-image: none; - background-image: none; } - -.app-well-app:drop .overview-icon, -.app-well-app.app-folder:drop .overview-icon, -.show-apps:drop .overview-icon, -.grid-search-result:drop .overview-icon { - background-color: rgba(39, 119, 255, 0.85); } - -.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, -.app-well-app.app-folder:active .overview-icon, -.app-well-app.app-folder:checked .overview-icon, -.show-apps:active .overview-icon, -.show-apps:checked .overview-icon, -.grid-search-result:active .overview-icon, -.grid-search-result:checked .overview-icon { - background-color: rgba(17, 18, 23, 0.5); } - -.app-well-app-running-dot { - width: 10px; - height: 3px; - background-color: white; - box-shadow: rgba(0, 0, 0, 0.7) 0 2px 6px; - border-radius: 3px; - margin-bottom: 2px; } - -.search-provider-icon, .list-search-result, .app-well-app .overview-icon, -.grid-search-result .overview-icon, .show-apps .overview-icon, -.app-well-app.app-folder .overview-icon { - color: white; - border-radius: 9px; - padding: 6px; - border: 1px solid transparent; - transition-duration: 100ms; - text-align: center; } - -.app-well-app.app-folder > .overview-icon { - background-color: rgba(39, 42, 52, 0.4); } - -.show-apps:checked .show-apps-icon, -.show-apps:focus .show-apps-icon { - color: white; - transition-duration: 100ms; } - -.app-folder-popup { - -arrow-border-radius: 8px; - -arrow-background-color: rgba(17, 18, 23, 0.5); - -arrow-base: 24px; - -arrow-rise: 11px; } - -.app-folder-popup-bin { - padding: 5px; } - -.app-folder-icon { - padding: 5px; - spacing-rows: 5px; - spacing-columns: 5px; } - -.page-indicator { - padding: 15px 20px; } - .page-indicator .page-indicator-icon { - width: 12px; - height: 12px; - background-color: transparent; - border: 2px solid rgba(255, 255, 255, 0.4); - border-radius: 12px; } - .page-indicator:hover .page-indicator-icon { - border-color: white; } - .page-indicator:active .page-indicator-icon { - border: none; - margin: 2px; - background-color: white; } - .page-indicator:checked .page-indicator-icon, .page-indicator:checked:active .page-indicator-icon { - background-color: white; } - -.app-well-app > .overview-icon.overview-icon-with-label, -.grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; - spacing: 4px; } - -.workspace-thumbnails { - visible-width: 32px; - spacing: 11px; - padding: 8px; - border-radius: 9px 0 0 9px; } - .workspace-thumbnails:rtl { - border-radius: 0 9px 9px 0; } - .workspace-thumbnails .placeholder { - background-image: url("assets/dash-placeholder.svg"); - background-size: contain; - height: 24px; } - -.workspace-thumbnail-indicator { - border: 4px solid #2777ff; - border-radius: 5px; - padding: 1px; } - -.all-apps, -.frequent-apps > StBoxLayout { - padding: 0px 88px 10px 88px; } - -.workspace-thumbnails { - color: white; - background-color: rgba(39, 42, 52, 0.9); - border: none; } - -.search-statustext, .no-frequent-applications-label { - font-size: 2em; - font-weight: bold; - color: white; } - -/* NOTIFICATIONS & MESSAGE TRAY */ -.url-highlighter { - link-color: #5a97ff; - font-weight: bold; } - -.notification-banner { - font-size: 11pt; - width: 34em; - margin: 5px; - border-radius: 9px; - border: none; - min-height: 64px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - .notification-banner:hover { - background: #ffffff; } - .notification-banner, .notification-banner:focus, .notification-banner:active { - background-color: #ffffff; } - .notification-banner .message-title, .notification-banner:focus .message-title, .notification-banner:active .message-title { - color: #5c616c; } - .notification-banner .message-content, .notification-banner:focus .message-content, .notification-banner:active .message-content { - color: #5c616c; } - .notification-banner .message-icon-bin > StIcon { - color: #5c616c; } - .notification-banner .notification-icon { - padding: 5px; } - .notification-banner .notification-content { - padding: 5px; - spacing: 5px; } - .notification-banner .secondary-icon { - icon-size: 1.09em; } - .notification-banner .notification-actions { - padding-top: 0; - color: #5c616c; - border-top: 1px solid #d9d9d9; - spacing: 0px; } - .notification-banner .notification-button { - padding: 0 16px; - min-height: 35px; - border: none; } - .notification-banner .notification-button:focus { - box-shadow: none; } - -.summary-source-counter { - font-size: 10pt; - font-weight: bold; - height: 1.6em; - width: 1.6em; - -shell-counter-overlap-x: 3px; - -shell-counter-overlap-y: 3px; - background-color: #2777ff; - color: #ffffff; - border: 2px solid #5c616c; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); - border-radius: 0.9em; } - -.secondary-icon { - icon-size: 1.09em; } - -.chat-body { - spacing: 5px; } - -.chat-response { - margin: 5px; } - -.chat-log-message { - color: #454850; } - -.chat-new-group { - padding-top: 1em; } - -.chat-received { - padding-left: 4px; } - .chat-received:rtl { - padding-left: 0px; - padding-right: 4px; } - -.chat-sent { - padding-left: 18pt; - color: #818794; } - .chat-sent:rtl { - padding-left: 0; - padding-right: 18pt; } - -.chat-meta-message { - padding-left: 4px; - font-size: 9pt; - font-weight: bold; - color: #898f9b; } - .chat-meta-message:rtl { - padding-left: 0; - padding-right: 4px; } - -.hotplug-transient-box { - spacing: 6px; - padding: 2px 72px 2px 12px; } - -.hotplug-notification-item { - border: none; - box-shadow: none; - padding: 2px 10px; } - .hotplug-notification-item:focus { - padding: 1px 71px 1px 11px; } - -.hotplug-notification-item-icon { - icon-size: 24px; - padding: 2px 5px; } - -.hotplug-resident-box { - spacing: 8px; } - -.hotplug-resident-mount { - spacing: 8px; - border-radius: 4px; } - .hotplug-resident-mount:hover { - background-color: white; } - -.hotplug-resident-mount-label { - color: inherit; - padding-left: 6px; } - -.hotplug-resident-mount-icon { - icon-size: 24px; - padding-left: 6px; } - -.hotplug-resident-eject-icon { - icon-size: 16px; } - -.hotplug-resident-eject-button { - padding: 7px; - border-radius: 5px; - color: pink; } - -/* Eeeky things */ -.magnifier-zoom-region { - border: 2px solid #2777ff; } - .magnifier-zoom-region.full-screen { - border-width: 0; } - -/* On-screen Keyboard */ -.word-suggestions { - font-size: 14pt; - spacing: 12px; - min-height: 20pt; } - -#keyboard { - background-color: rgba(39, 42, 52, 0.7); } - #keyboard .page-indicator { - padding: 4px 4px; } - #keyboard .page-indicator .page-indicator-icon { - width: 6px; - height: 6px; } - -.key-container { - padding: 4px; - spacing: 4px; } - -.keyboard-key { - background-color: #3b3f4e; - min-height: 1.2em; - min-width: 1.2em; - font-size: 16pt; - border-radius: 5px; - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; } - .keyboard-key:focus { - color: #5c616c; - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); } - .keyboard-key:hover, .keyboard-key:checked { - background-color: #414657; } - .keyboard-key:active { - background-color: #363a48; } - .keyboard-key:grayed { - background-color: #272a34; - color: white; - border-color: black; } - .keyboard-key.default-key { - border-color: rgba(255, 255, 255, 0.1); - background-color: #272a34; - background-size: 20px; } - .keyboard-key.default-key:hover, .keyboard-key.default-key:checked { - background-color: #2e313d; } - .keyboard-key.default-key:active { - background-color: #23252e; } - .keyboard-key.enter-key { - border-color: #4187ff; - background-color: #2777ff; - background-image: url("assets/key-enter.svg"); } - .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { - background-color: #3681ff; } - .keyboard-key.enter-key:active { - background-color: #1d71ff; } - .keyboard-key.shift-key-lowercase { - background-image: url("assets/key-shift.svg"); } - .keyboard-key.shift-key-uppercase { - background-image: url("assets/key-shift-uppercase.svg"); } - .keyboard-key.shift-key-uppercase:latched { - background-image: url("assets/key-shift-latched-uppercase.svg"); } - .keyboard-key.hide-key { - background-image: url("assets/key-hide.svg"); } - .keyboard-key.layout-key { - background-image: url("assets/key-layout.svg"); } - -.keyboard-subkeys { - color: white; - -arrow-border-radius: 10px; - -arrow-background-color: rgba(39, 42, 52, 0.7); - -arrow-border-width: 2px; - -arrow-border-color: rgba(255, 255, 255, 0.1); - -arrow-base: 20px; - -arrow-rise: 10px; - -boxpointer-gap: 5px; } - -.emoji-page .keyboard-key { - background-color: transparent; - border: none; } - -.emoji-panel .keyboard-key:latched { - border-color: #4187ff; - background-color: #2777ff; } - -.candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; } - -.candidate-index { - padding: 0 0.5em 0 0; - color: #454850; } - -.candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; - border-radius: 4px; } - .candidate-box:selected, .candidate-box:hover { - background-color: #2777ff; - color: #ffffff; } - -.candidate-page-button-box { - height: 2em; } - .vertical .candidate-page-button-box { - padding-top: 0.5em; } - .horizontal .candidate-page-button-box { - padding-left: 0.5em; } - -.candidate-page-button { - padding: 4px; } - -.candidate-page-button-previous { - border-radius: 4px 0px 0px 4px; - border-right-width: 0; } - -.candidate-page-button-next { - border-radius: 0px 4px 4px 0px; } - -.candidate-page-button-icon { - icon-size: 1em; } - -/* Auth Dialogs & Screen Shield */ -.user-icon { - background-size: contain; - color: white; - border-radius: 99px; } - .user-icon:hover { - color: white; } - -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; } - -.login-dialog { - border: none; - background-color: transparent; } - .login-dialog StEntry { - width: 320px; - padding: 7px 9px; - border-radius: 5px; - color: #5c616c; - background-color: #fafafa; - border-color: #d9d9d9; } - .login-dialog StEntry:focus { - padding: 6px 8px; - border-width: 2px; - border-color: #2777ff; } - .login-dialog .modal-dialog-button-box { - spacing: 3px; } - .login-dialog .modal-dialog-button { - padding: 4px 18px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); - background-color: #5b666a; - border-color: #5b666a; - color: #f6f5f4; } - .login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { - background-color: #667478; - border-color: #667478; } - .login-dialog .modal-dialog-button:active { - box-shadow: none; - background-color: #4f595d; - border-color: #4f595d; } - .login-dialog .modal-dialog-button:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #4f595d; - background-color: #4f595d; - color: rgba(246, 245, 244, 0.7); } - .login-dialog .modal-dialog-button:default { - color: #ffffff; - background-color: #3681ff; - border-color: #004bca; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - border-color: #2777ff; } - .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { - color: #ffffff; - background-color: #5091ff; - border-color: #0058ee; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.3); - icon-shadow: 0 1px rgba(255, 255, 255, 0.3); - background-color: #4187ff; - border-color: #4187ff; } - .login-dialog .modal-dialog-button:default:active { - color: #ffffff; - background-color: #186eff; - border-color: #004bca; - text-shadow: none; - icon-shadow: none; - box-shadow: none; - background-color: #0e67ff; - border-color: #0e67ff; } - .login-dialog .modal-dialog-button:default:insensitive { - color: #aeb0b6; - border-color: #d9d9d9; - background-color: #fdfdfd; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - border-color: #005af3; - background-color: #005af3; - color: rgba(255, 255, 255, 0.7); } - -.login-dialog-logo-bin { - padding: 24px 0px; } - -.login-dialog-banner { - color: #e6e6e6; } - -.login-dialog-button-box { - spacing: 5px; } - -.login-dialog-message-warning { - color: #fd7d00; } - -.login-dialog-message-hint { - padding-top: 0; - padding-bottom: 20px; } - -.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-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label { - color: white; } - -.login-dialog-not-listed-label { - font-size: 90%; - font-weight: bold; - color: #b3b3b3; - padding-top: 1em; } - -.login-dialog-user-list-view { - -st-vfade-offset: 1em; } - -.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: 5px; - 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; } - -.login-dialog-username, -.user-widget-label { - color: white; - font-size: 120%; - font-weight: bold; - text-align: left; - padding-left: 15px; } - -.user-widget-label:ltr { - padding-left: 14px; } - -.user-widget-label:rtl { - padding-right: 14px; } - -.login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; - spacing: 8px; - width: 23em; } - -.login-dialog-prompt-label { - color: #cccccc; - font-size: 110%; - padding-top: 1em; } - -.login-dialog-session-list-button StIcon { - icon-size: 1.25em; } - -.login-dialog-session-list-button { - color: #b3b3b3; } - .login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus { - color: white; } - .login-dialog-session-list-button:active { - color: gray; } - -.screen-shield-arrows { - padding-bottom: 3em; } - -.screen-shield-arrows Gjs_Arrow { - color: white; - width: 80px; - height: 48px; - -arrow-thickness: 12px; - -arrow-shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); } - -.screen-shield-clock { - color: white; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); - font-weight: bold; - text-align: center; - padding-bottom: 1.5em; } - -.screen-shield-clock-time { - font-size: 72pt; - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); - font-feature-settings: "tnum"; } - -.screen-shield-clock-date { - font-size: 28pt; - font-weight: normal; } - -.screen-shield-notifications-container { - spacing: 6px; - width: 30em; - background-color: transparent; - max-height: 500px; } - .screen-shield-notifications-container .summary-notification-stack-scrollview { - padding-top: 0; - padding-bottom: 0; } - .screen-shield-notifications-container .notification, - .screen-shield-notifications-container .screen-shield-notification-source { - padding: 12px 6px; - border: 1px solid rgba(255, 255, 255, 0.1); - background-color: rgba(39, 42, 52, 0.5); - color: white; - border-radius: 4px; } - .screen-shield-notifications-container .notification { - margin-right: 15px; } - -.screen-shield-notification-label { - font-weight: bold; - padding: 0px 0px 0px 12px; } - -.screen-shield-notification-count-text { - padding: 0px 0px 0px 12px; } - -#panel.lock-screen { - background-color: rgba(39, 42, 52, 0.5); } - -.screen-shield-background { - background: black; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); } - -#lockDialogGroup { - background: #41494c url(assets/noise-texture.png); - background-repeat: repeat; } - -#screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle { - background-color: rgba(255, 255, 255, 0.3); } - #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus { - background-color: rgba(255, 255, 255, 0.5); } - #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active { - background-color: rgba(39, 119, 255, 0.5); } - -#LookingGlassDialog { - background-color: rgba(0, 0, 0, 0.8); - spacing: 4px; - padding: 4px; - border: 2px solid grey; - border-radius: 4px; } - #LookingGlassDialog > #Toolbar { - border: 1px solid grey; - border-radius: 4px; } - #LookingGlassDialog .labels { - spacing: 4px; } - #LookingGlassDialog .notebook-tab { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: #ccc; - transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; } - #LookingGlassDialog .notebook-tab:hover { - color: white; - text-shadow: black 0px 2px 2px; } - #LookingGlassDialog .notebook-tab:selected { - border-bottom-width: 2px; - border-color: #4187ff; - color: white; - text-shadow: black 0px 2px 2px; } - #LookingGlassDialog StBoxLayout#EvalBox { - padding: 4px; - spacing: 4px; } - #LookingGlassDialog StBoxLayout#ResultsArea { - spacing: 4px; } - -.lg-dialog StEntry { - selection-background-color: #bbbbbb; - selected-color: #333333; } - -.lg-dialog .shell-link { - color: #999999; } - .lg-dialog .shell-link:hover { - color: #dddddd; } - -.lg-completions-text { - font-size: .9em; - font-style: italic; } - -.lg-obj-inspector-title { - spacing: 4px; } - -.lg-obj-inspector-button { - border: 1px solid gray; - padding: 4px; - border-radius: 4px; } - .lg-obj-inspector-button:hover { - border: 1px solid #ffffff; } - -#lookingGlassExtensions { - padding: 4px; } - -.lg-extensions-list { - padding: 4px; - spacing: 6px; } - -.lg-extension { - border: 1px solid #6f6f6f; - border-radius: 4px; - padding: 4px; } - -.lg-extension-name { - font-weight: bold; } - -.lg-extension-meta { - spacing: 6px; } - -#LookingGlassPropertyInspector { - background: rgba(0, 0, 0, 0.8); - border: 2px solid grey; - border-radius: 4px; - padding: 6px; } - .panel-workspace-indicator { box-shadow: inset 0 0 0 100px white; color: black; diff --git a/src/themes/Kali/sass/gnome-shell-sass/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell-sass/_common-tweaks.scss index d70cc0c9..530cba68 100644 --- a/src/themes/Kali/sass/gnome-shell-sass/_common-tweaks.scss +++ b/src/themes/Kali/sass/gnome-shell-sass/_common-tweaks.scss @@ -1,168 +1,49 @@ -//This is the RIGHT PLACE to edit the stylesheet - -//let's start by telling people not to edit the generated CSS: -$cakeisalie: "This stylesheet is generated, DO NOT EDIT"; -/* #{$cakeisalie} */ - -/* Copyright 2009, 2015 Red Hat, Inc. - * - * Portions adapted from Mx's data/style/default.css - * Copyright 2009 Intel Corporation - * - * This program is free software; you can redistribute it and/or modify it - * under the terms and conditions of the GNU Lesser General Public License, - * version 2.1, as published by the Free Software Foundation. - * - * This program is distributed in the hope it will be useful, but WITHOUT ANY - * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for - * more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. - */ - -/* GLOBALS */ +$overview_transparent_bg: transparentize(white, .8); +$dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6); -$modal_radius: 9px; -$button_radius: 5px; -$panel-corner-radius: 0; +/* OSD */ +$_osd_color: if($variant=='light', black, white); +%osd_panel { + color: $_osd_color; + background-color: $bg_color; + border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); -$_trough_color: transparentize($fg_color, 0.9); -$_bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%)); -$_hover_bg_color: lighten($bg_color,if($variant=='light', 5%, 3%)); -$_active_bg_color: if($variant == 'light', darken($bg_color, 14%), darken($bg_color, 9%)); - -$font-size: 11; -$font-family: Cantarell, Sans-Serif; - -stage { - font-family: $font-family; - @include fontsize($font-size); - color: $fg_color; -} - -/* WIDGETS */ - -/* Buttons */ -.button, %button { - border-radius: $button_radius; - border-width: 1px; - min-height: 22px; - padding: 4px 32px; - @include button(normal); - &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); } - &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); } - &:insensitive { @include button(insensitive); } - &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); } -} - -.modal-dialog-linked-button, %bubble_button { - border-right-width: 1px; - @include button(normal, $c:$bg_color, $tc:$fg_color); - &:insensitive { @include button(insensitive, $c:$bg_color, $tc:$fg_color); } - &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); } - &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); } - &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); } - padding: 12px; - border-top: 1px solid $_bubble_borders_color; - - &:first-child { - border-radius: 0px 0px 0px $modal_radius; - } - &:last-child { - border-right-width: 0px; - border-radius: 0px 0px $modal_radius 0px; - } - &:first-child:last-child { - border-right-width: 0px; - border-radius: 0px 0px $modal_radius $modal_radius; + StIcon { + icon-shadow: transparentize(black, .3) 0 1px 6px; } } -/* Entries */ -StEntry { - border-radius: $button_radius; - padding: 4px; - border-width: 1px; - color: $fg_color; - @include entry(normal); - //&:hover { @include entry(hover);} - &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} - &:insensitive { @include entry(insensitive);} - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; - StIcon.capslock-warning { - icon-size: 16px; - warning-color: $warning_color; - padding: 0 4px; - } -} - - -/* Scrollbars */ - -StScrollView { - &.vfade { -st-vfade-offset: 68px; } - &.hfade { -st-hfade-offset: 68px; } -} - -StScrollBar { - padding: 0; - - StScrollView & { - min-width: 14px; - min-height: 14px; - } - - StBin#trough { - border-radius: 0; - background-color: transparent; - } - - StButton#vhandle, StButton#hhandle { - border-radius: 8px; - background-color: mix($fg_color, $bg_color, 60%); - //border: 3px solid transparent; //would be nice to margin or at least to transparent - margin: 3px; - &:hover { background-color: mix($fg_color, $bg_color, 80%); } - &:active { background-color: $selected_bg_color; } +.osd-window { + .level { + -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9)); + -barlevel-active-background-color: $_osd_color; } } /* Slider */ .slider { - height: 1em; - -barlevel-height: 0.3em; - -barlevel-background-color: transparentize($fg_color, 0.9); //background of the trough - -barlevel-border-color: $borders_color; //trough border color - -barlevel-active-background-color: $selected_bg_color; //active trough fill - -barlevel-active-border-color: $selected_borders_color; //active trough border - -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-border-color: darken($destructive_color,10%); - -barlevel-overdrive-separator-width: 0.2em; - -barlevel-border-width: 1px; - -slider-handle-radius: 8px; - -slider-handle-border-width: 1px; - -slider-handle-border-color: $borders_color; - color: if($variant == 'light', lighten($bg_color, 10%), darken($bg_color,4%)); - &:hover { color: $_hover_bg_color; } - &:active { color: $_active_bg_color; } + height: 1.1em; + -barlevel-height: .35em; + -barlevel-background-color: $borders_color; + -barlevel-border-color: $selected_bg_color; + -barlevel-active-background-color: $selected_bg_color; + -barlevel-overdrive-color: $destructive_color; + -barlevel-overdrive-separator-width: 0.1em; + -barlevel-border-width: 0; + + -slider-handle-radius: 0; } /* Check Boxes */ .check-box { - StBoxLayout { spacing: .8em; } StBin { - width: 24px; - height: 22px; - background-image: if($variant == 'light', url("assets/checkbox-off.svg"), - url("assets/checkbox-off-dark.svg")); + background-image: if($variant == 'light', url("assets/checkbox-off.svg"), + url("assets/checkbox-off-dark.svg")); } + &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"), url("assets/checkbox-off-focused-dark.svg")); } &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"), @@ -171,1132 +52,56 @@ StScrollBar { url("assets/checkbox-focused-dark.svg")); } } -/* Switches */ -.toggle-switch { - color: $fg_color; - width: 46px; - height: 22px; - background-size: contain; - background-image: if($variant == 'light', url("assets/toggle-off.svg"), - url("assets/toggle-off-dark.svg")); - &:checked { - background-image: if($variant == 'light', url("assets/toggle-on.svg"), - url("assets/toggle-on-dark.svg")); - } -} - -/* links */ -.shell-link { - color: $link_color; - &:hover { color: lighten($link_color,10%); } -} - -/* Modal Dialogs */ - -.headline { font-size: 110%; } -.lightbox { background-color: black; } -.flashspot { background-color: white; } - -.modal-dialog { - border-radius: $modal_radius; - @extend %bubble-panel; - .modal-dialog-content-box { - padding: 24px; - } - .run-dialog-entry { width: 20em; margin-bottom: 6px; } - .run-dialog-error-box { - padding-top: 16px; - spacing: 6px; - } - .run-dialog-button-box { padding-top: 1em; } - .run-dialog-label { - @include fontsize($font-size + 1.1); - font-weight: normal; - color: $fg_color; - padding-bottom: .4em; - } - -} - - .mount-dialog-subject, - .end-session-dialog-subject { //this should be a generic header class - @include fontsize($font-size * 1.3); - } - -/* Message Dialog */ - .message-dialog-main-layout { - padding: 12px 20px 0; - spacing: 12px; - } - - .message-dialog-content { - max-width: 28em; - spacing: 20px; - } - - .message-dialog-icon { - min-width: 48px; - icon-size: 48px; - } - - .message-dialog-title { - font-weight: bold; - } - - .message-dialog-subtitle { - color: $fg_color; - font-weight: bold; - } - -/* End Session Dialog */ -.end-session-dialog { - spacing: 42px; - border: 1px solid $_bubble_borders_color; -} - - .end-session-dialog-list { - padding-top: 20px; - } - - .end-session-dialog-layout { - padding-left: 17px; - &:rtl { padding-right: 17px; } - } - - .end-session-dialog-description { - width: 28em; - padding-bottom: 10px; - &:rtl { - text-align: right; - } - } - - .end-session-dialog-warning { - width: 28em; - color: $warning_color; - padding-top: 6px; - &:rtl { - text-align: right; - } - } - - .end-session-dialog-logout-icon { - border-radius: 99px; - width: 48px; - height: 48px; - background-size: contain; - } - - .end-session-dialog-shutdown-icon { - color: $fg_color; - width: 48px; - height: 48px; - } - - .end-session-dialog-inhibitor-layout { - spacing: 16px; - max-height: 200px; - padding-right: 65px; - padding-left: 65px; - } - - .end-session-dialog-session-list, - .end-session-dialog-app-list { - spacing: 1em; - } - - .end-session-dialog-list-header { - font-weight: bold; - &:rtl { text-align: right; } - } - - .end-session-dialog-app-list-item, - .end-session-dialog-session-list-item { - spacing: 1em; - } - - .end-session-dialog-app-list-item-name, - .end-session-dialog-session-list-item-name { - font-weight: bold; - } - - .end-session-dialog-app-list-item-description { - color: darken($fg_color,5%); - font-size: 10pt; - } - -/* ShellMountOperation Dialogs */ -.shell-mount-operation-icon { icon-size: 48px; } - - .mount-dialog { - spacing: 24px; - - .message-dialog-title { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; - max-width: 34em; +/* App Switcher */ +// switcher onscreen panel +.switcher-list { + .item-box { + &:outlined { + padding: 6px; + border: 3px solid $selected_bg_color; + border-radius: 8px; } - .message-dialog-title:rtl { - padding-left: 0px; - padding-right: 17px; - } - - .message-dialog-body { - padding-left: 17px; - width: 28em; - } - - .message-dialog-body:rtl { - padding-left: 0px; - padding-right: 17px; - } - } - - .mount-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; - } - - .mount-dialog-app-list:rtl { - padding-right: 49px; - padding-left: 32px; - } - - .mount-dialog-app-list-item { - color: lighten($fg_color,10%); - &:hover { color: $fg_color; } - &:ltr { padding-right: 1em; } - &:rtl { padding-left: 1em; } - } - - .mount-dialog-app-list-item-icon { - &:ltr { padding-right: 17px; } - &:rtl { padding-left: 17px; } - } - - .mount-dialog-app-list-item-name { - font-size: 10pt; - } - - -/* Password or Authentication Dialog */ - -.prompt-dialog { - @extend %bubble-panel; - //this is the width of the entire modal popup - width: 34em; - - .message-dialog-main-layout { spacing: 24px; padding: 10px; } - .message-dialog-content { spacing: 16px; } - .message-dialog-title { color: lighten($fg_color,15%); } -} - - .prompt-dialog-description:rtl { - text-align: right; - } - - .prompt-dialog-password-box { - spacing: 1em; - padding-bottom: 1em; - } - - .prompt-dialog-error-label { - font-size: 10pt; - color: $warning_color; - padding-bottom: 8px; - } - - .prompt-dialog-info-label { - font-size: 10pt; - padding-bottom: 8px; - } - - .hidden { - color: rgba(0,0,0,0); - } - - .prompt-dialog-null-label { - font-size: 10pt; - padding-bottom: 8px; - } - - .prompt-dialog-pim-box { - spacing: 1em; - } - - .prompt-dialog-grid { - spacing-rows: 15px; - spacing-columns: 1em; - } - - .prompt-dialog-keyfiles-box { - spacing: 1em; - } - - .prompt-dialog-button.button { - padding: 8px; - } - - -/* Polkit Dialog */ - -.polkit-dialog-user-layout { - padding-left: 10px; - spacing: 10px; - &:rtl { - padding-left: 0px; - padding-right: 10px; - } -} - - .polkit-dialog-user-root-label { - color: $warning_color; - } - - .polkit-dialog-user-icon { - border-radius: 99px; - background-size: contain; - width: 48px; - height: 48px; - } - -/* Audio selection dialog */ -.audio-device-selection-dialog { - @extend %bubble-panel; - spacing: 30px; -} - - .audio-selection-content { - spacing: 20px; - padding: 24px; - } - - .audio-selection-title { - font-weight: bold; - text-align: center; - } - - .audio-selection-box { - spacing: 20px; - } - - .audio-selection-device { - border: 1px solid $_bubble_borders_color; - border-radius: 12px; - &:hover,&:focus { background-color: $_hover_bg_color; } - &:active { + &:selected { background-color: $selected_bg_color; color: $selected_fg_color; - } - } - - .audio-selection-device-box { - padding: 20px; - spacing: 20px; - } - - .audio-selection-device-icon { - icon-size: 64px; - } - -/* Access Dialog */ -.access-dialog { - @extend %bubble-panel; - spacing: 30px; -} - -/* Geolocation Dialog */ -.geolocation-dialog { - @extend %bubble-panel; - spacing: 30px; -} - -/* Extension Dialog */ -.extension-dialog { - @extend %bubble-panel; - .message-dialog-main-layout { spacing: 24px; padding: 10px; } - .message-dialog-title { font-weight: normal; color: $fg_color; } -} - -/* Inhibit-Shortcuts Dialog */ -.inhibit-shortcuts-dialog { - @extend %bubble-panel; - spacing: 30px; -} - -/* Network Agent Dialog */ - -.network-dialog-secret-table { - spacing-rows: 15px; - spacing-columns: 1em; -} - -.keyring-dialog-control-table { - spacing-rows: 15px; - spacing-columns: 1em; -} - -/* Popovers/Menus */ - -.popup-menu { - min-width: 15em; - color: $fg_color; - border-color: $_bubble_borders_color; - - .popup-menu-arrow { } //defined globally in the TOP BAR - .popup-sub-menu { - background-color: darken($bg_color,5%); - box-shadow: inset 0 -1px 0px $_bubble_borders_color; - } - - .popup-menu-content { padding: 1em 0em; } - .popup-menu-item { - spacing: 12px; - - &:ltr { padding: .4em 1.75em .4em 0em; } - &:rtl { padding: .4em 0em .4em 1.75em; } - &:checked { - background-color: $bg_color; - box-shadow: inset 0 -1px 0px $_bubble_borders_color; font-weight: bold; } - &.selected { - background-color: transparentize(white, if($variant=='light', 0.2, 0.9)); - color: $fg_color; - } - &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - &:insensitive { color: transparentize($fg_color,.5); } - } - - .popup-inactive-menu-item { //all icons and other graphical elements - color: $fg_color; - - &:insensitive { color: transparentize($fg_color,0.5); } - } - //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is - &.panel-menu { - -boxpointer-gap: 4px; - margin-bottom: 1.75em; } } - - - .popup-menu-ornament { - text-align: right; - width: 1.2em; - } - .popup-menu-boxpointer, - .candidate-popup-boxpointer { - -arrow-border-radius: $button_radius+4; - -arrow-background-color: $bg_color; - -arrow-border-width: 1px; - -arrow-border-color: if($variant=='light', transparentize(black, 0.6), $borders_color); - -arrow-base: 24px; - -arrow-rise: 11px; - -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995 - } - - .popup-separator-menu-item { - //-margin-horizontal: 24px; - height: 1px; //not really the whole box - margin: 6px 64px; - background-color: transparent; - border-color: $_bubble_borders_color; - border-bottom-width: 1px; - border-bottom-style: solid; - } - -// Rename popup -.rename-folder-popup { - .rename-folder-popup-item { - spacing: 6px; - &:ltr, &:rtl { padding: 0, 12px; } - } -} - -// Background menu -.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } - -/* fallback menu -- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled - app menu inside the main app window itself rather than the top bar -*/ - -/************* - * App Icons * - *************/ -/* Outline for low res icons */ -.lowres-icon { - icon-shadow: 0 1px 2px rgba(0,0,0,0.3); -} - -/* Drapshadow for large icons */ -.icon-dropshadow { - icon-shadow: 0 1px 2px rgba(0,0,0,0.4); -} - -/* OSD */ -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - margin: 32px; - min-width: 64px; - min-height: 64px; - - .osd-monitor-label { font-size: 3em; } - .level { - height: 0.6em; - -barlevel-height: 0.6em; - -barlevel-background-color: transparentize($fg_color, if($variant=='light', 0.5, 0.9)); - -barlevel-active-background-color: if($variant=='light', black, white); - -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-separator-width: 0.2em; - } -} - -/* Pad OSD */ -.pad-osd-window { - padding: 32px; - background-color: transparentize(black, 0.2); - - .pad-osd-title-box { spacing: 12px; } - .pad-osd-title-menu-box { spacing: 6px; } -} - -.combo-box-label { - width: 15em; -} - -/* App Switcher */ -.switcher-popup { - padding: 8px; - spacing: 16px; -} - -.osd-window, -.resize-popup, -.switcher-list { - @extend %osd-panel; - padding: 12px; -} - - .switcher-list-item-container { spacing: 8px; } - - .switcher-list .item-box { - padding: 8px; - border-radius: 4px; - } - - .switcher-list .item-box:outlined { - padding: 6px; - border: 3px solid $selected_bg_color; - border-radius: 8px; - } - - .switcher-list .item-box:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - font-weight: bold; - } - - .switcher-list .thumbnail-box { - padding: 2px; - spacing: 4px; - } - - .switcher-list .thumbnail { - width: 256px; - } - - .switcher-list .separator { - width: 1px; - background: $borders_color; - } - - .switcher-arrow { - border-color: rgba(0,0,0,0); - color: transparentize($fg_color,0.2); - &:highlighted { - color: $fg_color; - } - } - - .input-source-switcher-symbol { - font-size: 34pt; - width: 96px; - height: 96px; - } - -/* Window Cycler */ -.cycler-highlight { border: 5px solid $selected_bg_color; } - /* Workspace Switcher */ -.workspace-switcher-group { padding: 12px; } +.ws-switcher-box { border: none } - .workspace-switcher-container { - @extend %osd-panel; - padding: 6px; - } +.workspace-switcher-container { padding: 7px; } - .workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; - } - - .ws-switcher-active-up, .ws-switcher-active-down, - .ws-switcher-active-left, .ws-switcher-active-right { - height: 52px; - background-color: $selected_bg_color; - color: $selected_fg_color; - background-size: 32px; - border-radius: 6px; - box-shadow: 0 0px 6px transparentize(black, .5); - } - - .ws-switcher-box { - height: 50px; - border: none; - background: transparent; - border-radius: 6px; - } - -%osd-panel { - color: if($variant=='light', black, white); - background-color: $bg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color); - border-radius: 12px; - - StIcon { - icon-shadow: transparentize(black, .3) 0 1px 6px; - } +// active workspace in the switcher +.ws-switcher-active-up, +.ws-switcher-active-down, +.ws-switcher-active-left, +.ws-switcher-active-right { + box-shadow: 0 0px 6px transparentize(black, .5); } -%bubble-entry { - color: $fg_color; - background-color: darken($bg_color, 2%); - border-color: $_bubble_borders_color; - box-shadow: none; - &:focus { border: 2px solid $selected_bg_color; } +/* Window Picker */ + +// Borders on window thumbnails +.window-clone-border { + border: 5px solid transparentize(white, .5); + border-radius: 6px; + box-shadow: inset 0 0 0 2px white; } -%bubble-panel { - color: $fg_color; - background-color: $bg_color; - border: 1px solid if($variant=='light', transparentize(black, 0.6), $borders_color); - - StEntry { @extend %bubble-entry; } - .button { - &, &:hover, &:focus, &:active, &:disabled { - box-shadow: none; - border-color: $_bubble_borders_color; - } - background-color: $bg_color; - color: $fg_color; - &:hover { background-color: $_hover_bg_color; } - &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - &:disabled { color: $insensitive_fg_color; } - } +// Window titles +.window-caption { + font-size: .9em; + color: black; + background-color: white; + border: none; + box-shadow: $dialog_box_shadow; } -/* Tiled window previews */ -.tile-preview { - background-color: transparentize($selected_bg_color,0.5); - border: 1px solid $selected_bg_color; -} - - .tile-preview-left.on-primary { - border-radius: $panel-corner-radius 0 0 0; - } - - .tile-preview-right.on-primary { - border-radius: 0 $panel-corner-radius 0 0; - } - - .tile-preview-left.tile-preview-right.on-primary { - border-radius: $panel-corner-radius $panel-corner-radius 0 0; - } - -/* TOP BAR */ - -#panel { - $_panel_bg: transparentize($bg_color, .2); - $_panel_fg: if($variant=='light', black, white); - $_panel_text_shadow: transparentize(black, .5) 0 1px 2px; - background: $_panel_bg; - font-weight: bold; - height: 1.86em; - font-feature-settings: "tnum"; - text-shadow: $_panel_text_shadow; - - StIcon { icon-shadow: $_panel_text_shadow; } - - &.unlock-screen, - &.login-screen, - &.lock-screen, - &:overview { - background-color: transparent; - .panel-button { - &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; } - } - } - - #panelLeft, #panelCenter { // spacing between activities<>app menu and such - spacing: 4px; - } - - #panelActivities.panel-button { - margin-left: .4em; - StLabel { - background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"), - url("assets/view-grid-symbolic-dark.svg")); - background-size: contain; - width: 1.5em; - height: 1.5em; - color: transparent; - } - - &:overview StLabel { background-image: url("assets/view-grid-symbolic-checked.svg"); } - } - - .panel-corner { - -panel-corner-radius: $panel-corner-radius; - -panel-corner-background-color: $_panel_bg; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - - &:active, &:overview, &:focus { - -panel-corner-border-color: lighten($selected_bg_color,5%); - } - - &.lock-screen, &.login-screen, &.unlock-screen { - -panel-corner-radius: 0; - -panel-corner-background-color: transparent; - -panel-corner-border-color: transparent; - } - } - - .panel-button { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: $_panel_fg; - - .app-menu-icon { - -st-icon-style: symbolic; - margin-left: 4px; - margin-right: 4px; - //dimensions of the icon are hardcoded - } - - &:hover { - color: $_panel_fg; - } - - &:active, &:focus, &:overview, &:checked { - // Trick due to St limitations. It needs a background to draw - // a box-shadow - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -3px 0px $selected_bg_color; - color: $_panel_fg; - } - - .system-status-icon { icon-size: 1.09em; padding: 0 5px; } - .unlock-screen &, - .login-screen &, - .lock-screen & { - color: lighten($fg_color, 10%); - &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } - } - } - - .panel-status-indicators-box, - .panel-status-menu-box { - spacing: 2px; - } - - // spacing between power icon and (optional) percentage label - .power-status.panel-status-indicators-box { - spacing: 0; - } - - .screencast-indicator { color: $warning_color; } - - .remote-access-indicator { color: $warning_color; } -} - - // calendar popover - #calendarArea { - padding: 0.75em 1.0em; - background-image: if($variant == 'light', url("assets/kali-dragon.svg"), - url("assets/kali-dragon-dark.svg")); - background-size: contain; - } - - .calendar { - margin-bottom: 1em; - } - - .calendar, - .datemenu-today-button, - .datemenu-displays-box, - .message-list-sections { - margin: 0 1.5em; - } - - .datemenu-calendar-column { spacing: 0.5em; } - .datemenu-displays-section { padding-bottom: 3em; } - .datemenu-displays-box { spacing: 1em; } - - .datemenu-calendar-column { - border: 0 solid $_bubble_borders_color; - &:ltr { border-left-width: 1px; } - &:rtl { border-right-width: 1px; } - } - - .datemenu-today-button, - .world-clocks-button, - .weather-button, - .events-section-title { - border-radius: 4px; - padding: .4em; - } - - .message-list-section-list:ltr { - padding-left: .4em; - } - - .message-list-section-list:rtl { - padding-right: .4em; - } - - .datemenu-today-button, - .world-clocks-button, - .weather-button, - .events-section-title { - &:hover, &:focus { background-color: $_hover_bg_color } - &:active { background-color: $_active_bg_color } - } - - .datemenu-today-button .day-label { - } - - .datemenu-today-button .date-label { - font-size: 1.5em; - font-weight: 300; - } - - .world-clocks-header, - .weather-header, - .events-section-title { - color: if($variant=='light', black, white); - font-weight: bold; - } - - .weather-header.location { - font-weight: normal; - font-size: 0.9em; - } - - .world-clocks-grid, - .weather-grid { - spacing-rows: 0.4em; - spacing-columns: 0.8em; - } - - .weather-box { - spacing: 0.4em; - } - - .world-clocks-city { - font-weight: bold; - font-size: 0.9em; - } - - .world-clocks-time { - color: darken($fg_color,20%); - font-feature-settings: "tnum"; - font-size: 1.2em; - } - - .world-clocks-timezone { - color: $fg_color; - font-feature-settings: "tnum"; - font-size: 0.9em; - } - - .weather-forecast-icon { - icon-size: 2.18em; - } - - .weather-forecast-time { - color: darken($fg_color,40%); - font-size: 0.8em; - } - - .calendar-month-label { - color: lighten($fg_color,5%); - font-weight: bold; - padding: 8px 0; - &:focus {} - } - - .pager-button { - background-color: transparent; - width: 32px; - border-radius: 4px; - &:hover, &:focus { background-color: $_hover_bg_color; } - &:active { background-color: transparentize($fg_color, 0.84); } - } - - .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows - icon-size: 1.09em; - } - - .calendar-day-base { - font-size: 80%; - text-align: center; - width: 2.4em; height: 2.4em; - padding: 0.1em; - margin: 2px; - border-radius: 1.4em; - font-feature-settings: "tnum"; - &:hover, &:focus { background-color: $_hover_bg_color; } - &:active,&:selected { - color: lighten($selected_fg_color,5%); - background-color: $selected_bg_color; - border-color: transparent; //avoid jumparound due to today - } - &.calendar-day-heading { //day of week heading - color: lighten($fg_color,5%); - margin-top: 1em; - font-size: 70%; - } - } - .calendar-day { //border collapse hack - see calendar.js - border-width: 0; - } - .calendar-day-top { border-top-width: 1px; } - .calendar-day-left { border-left-width: 1px; } - .calendar-work-day { - - } - .calendar-nonwork-day { - color: $insensitive_fg_color; - } - .calendar-today { - font-weight: bold; - color: lighten($fg_color,5%); - background-color: darken($bg_color,5%); - // border: 1px solid lighten($_bubble_borders_color,20%); - } - .calendar-day-with-events { - color: lighten($fg_color,10%); - font-weight: bold; - background-image: url("assets/calendar-today.svg"); - } - .calendar-other-month-day { - color: transparentize($fg_color ,0.5); - opacity: 0.5; - } - .calendar-week-number { - font-size: 70%; - font-weight: bold; - width: 2.3em; height: 1.8em; - border-radius: 2px; - padding: 0.5em 0 0; - margin: 6px; - background-color: $_bubble_borders_color; - color: $fg_color; - } - - /* Message list */ - .message-list { - width: 31.5em; - background: transparentize($bg_color, .3); - } - - .message-list-clear-button.button { - @extend %button; - margin: 1.5em 1.5em 0; - } - - .message-list-sections { - spacing: 1em; - } - - .message-list-section, - .message-list-section-list { - spacing: 0.4em; - } - - .message { - border: 1px solid $_bubble_borders_color; - background-color: lighten($bg_color, 2%); - &:hover,&:focus { background-color: $_hover_bg_color; } - &:active { background-color: transparentize($fg_color, 0.84) } - border-radius: 5px; - } - - .message-icon-bin { - padding: 0.68em 0.2em 0.68em 0.68em; - &:rtl { padding: 0.68em 0.68em 0.68em 0.2em; } - } - - .message-icon-bin > StIcon { - color: $fg_color; - icon-size: 1.09em; - -st-icon-style: symbolic; - } - - .message-icon-bin > .fallback-window-icon { - width: 1.09em; - height: 1.09em; - } - - .message-secondary-bin { - padding: 0 0.82em;; - } - - .message-secondary-bin > .event-time { - color: $fg_color; - font-size: 0.7em; - /* HACK: the label should be baseline-aligned with a 1em label, - fake this with some bottom padding */ - padding-bottom: 0.13em; - } - - .message-secondary-bin > StIcon { - icon-size: 1.09em; - } - - .message-title { - color: $fg_color; - } - - .message-content { - color: darken($fg_color, 10%); - padding: 10px; - } - - .message-close-button { - color: lighten($fg_color, 15%); - &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } - &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } - } - - .message-media-control { - padding: 12px; - color: lighten($fg_color, 15%); - - &:last-child:ltr { padding-right: 18px; } - &:last-child:rtl { padding-left: 18px; } - &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } - &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } - &:insensitive { color: if($variant=='light', lighten($fg_color, 50%), darken($fg_color, 40%)); } - } - - .media-message-cover-icon { - icon-size: 48px !important; - &.fallback { - color: lighten($fg_color,10%); - background-color: $bg_color; - border: 1px solid $bg_color; - border-radius: 2px; - icon-size: 32px !important; - padding: 6px; } - } - - - // a little unstructured mess: - - #appMenu { - spacing: 4px; - - .label-shadow { color: transparent; } - } - - .app-menu, - .app-well-menu { - max-width: 27.25em; - } - - .aggregate-menu { - min-width: 21em; - .popup-menu-icon { padding: 0 4px; } - .popup-sub-menu .popup-menu-item > :first-child { - &:ltr { /* 12px spacing + 2*4px padding */ - padding-left: 20px; margin-left: 1.09em; } - &:rtl { /* 12px spacing + 2*4px padding */ - padding-right: 20px; margin-right: 1.09em; } - } - } - - .system-menu-action { - -st-icon-style: symbolic; - color: $fg_color; - border-radius: 32px; /* wish we could do 50% */ - padding: 13px; - border: 1px solid $_bubble_borders_color; - - &:hover, &:focus { - background-color: $_hover_bg_color; - color: $fg_color; - } - &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; - border-color: $selected_borders_color; - } - - & > StIcon { icon-size: 16px; } - } - -// Activities Ripples -.ripple-box { - width: 52px; - height: 52px; - border-radius: 0 0 52px 0; // radius the size of the box give us the curve - background-color: transparentize($selected_bg_color, 0.7); - box-shadow: 0 0 2px 2px $selected_bg_color; -} - -.ripple-box:rtl { border-radius: 0 0 0 52px; } // just a simple change to the border radius position - -// Rubberband for select-area screenshots -.select-area-rubberband { - background-color: transparentize($selected_bg_color,0.7); - border: 1px solid $selected_bg_color; -} - -// Pointer location -.ripple-pointer-location { - width: 50px; - height: 50px; - border-radius: 25px 25px 25px 25px; // radius the size of the box give us the curve - background-color: lighten(transparentize($selected_bg_color, 0.7), 30%); - box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%); -} - -// not really top bar only -.popup-menu-arrow { width: 0; } -.popup-menu-icon { icon-size: 1.09em; } - -//close buttons +// Close button .window-close { background-image: url("assets/close-window.svg"); background-size: 32px; @@ -1310,1005 +115,229 @@ StScrollBar { &:hover { background-image: url("assets/close-window-hover.svg"); + background-color: transparent; } &:active { background-image: url("assets/close-window-active.svg"); + background-color: transparent; } } -// Pointer accessibility notifications -.pie-timer { - width: 60px; - height: 60px; - -pie-border-width: 3px; - -pie-border-color: $selected_bg_color; - -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%); -} +/* Tiled window previews */ -/* NETWORK DIALOGS */ +.tile-preview-left.on-primary, +.tile-preview-right.on-primary, +.tile-preview-left.tile-preview-right.on-primary{ border-radius: 0; } -.nm-dialog { - @extend %bubble-panel; - max-height: 34em; - min-height: 31em; - min-width: 32em; -} +/* TOP BAR */ +#panel { + $_panel_bg: transparentize($bg_color, .2); + $_panel_fg: if($variant=='light', black, white); + $_panel_text_shadow: transparentize(black, .5) 0 1px 2px; + background: $_panel_bg; + text-shadow: $_panel_text_shadow; - .nm-dialog-content { - spacing: 20px; - padding: 24px; - } - .nm-dialog-header-hbox { spacing: 10px; } - .nm-dialog-airplane-box { spacing: 12px; } + .popup-menu-arrow { width: 0; } - .nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; - } + StIcon { icon-shadow: $_panel_text_shadow; } - .nm-dialog-airplane-text { color: $fg_color; } - .nm-dialog-header-icon { icon-size: 32px; } - .nm-dialog-scroll-view { border: 2px solid $borders_color; } - .nm-dialog-header { font-weight: bold; } - - .nm-dialog-item { - font-size: 110%; - border-bottom: 1px solid $borders_color; - padding: 12px; - spacing: 20px; - } - - .nm-dialog-item:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - - .nm-dialog-icons { spacing: .5em; } - .nm-dialog-icon { icon-size: 16px; } - .no-networks-label { color: #999999; } - .no-networks-box { spacing: 12px; } - -/* OVERVIEW */ - -#overview { - spacing: 24px; // -} - -.overview-controls { - padding-bottom: 32px; -} - - .window-picker { //container around window thumbnails - -horizontal-spacing: 16px; - -vertical-spacing: 16px; - padding: 0 16px 16px; - - &.external-monitor { padding: 16px; } - } - - .window-clone-border { - $_bg: transparentize(white, 0.65); - border: 7px solid $_bg; - border-radius: $modal_radius; - // For window decorations with round corners we can't match - // the exact shape when the window is scaled. So apply a shadow - // to fix that case - box-shadow: inset 0 0 0 1px $_bg; -} - .window-caption { - spacing: 25px; - color: black; - background-color: white; - border-radius: 8px; - padding: 4px 12px; - box-shadow: transparentize(black, .5) 0 1px 6px; - } - - //search entry - .search-entry { - width: 320px; - padding: 7px 9px; - border-radius: 18px; - color: white; - font-weight: bold; - background-color: transparentize(white, .8); - border-color: transparent; - transition-duration: 200ms; - - &:focus { - padding: 6px 8px; - border-width: 2px; - border-color: $selected_bg_color; + &.unlock-screen, + &.login-screen, + &.lock-screen, + &:overview { + background-color: transparent; + .panel-button { + &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; } } + } + + .panel-corner { -panel-corner-radius: 0; } + + .panel-button { + &, &:hover, &:active, &:focus, &:overview, &:checked { + color: $_panel_fg; + } + } + + #panelActivities.panel-button { + margin-left: .4em; + StLabel { + background-image: if($variant == 'light', url("assets/view-grid-symbolic.svg"), + url("assets/view-grid-symbolic-dark.svg")); + background-size: contain; + width: 1.5em; + height: 1.5em; + color: transparent; + } + + &:overview StLabel { + background-image: url("assets/view-grid-symbolic-checked.svg"); + } + } +} + +/* Date/Time Menu */ + +// overall menu +#calendarArea { + background-image: if($variant == 'light', url("assets/kali-dragon.svg"), + url("assets/kali-dragon-dark.svg")); + background-size: contain; +} + +.events-section-title { padding: 1em; } + +.datemenu-today-button { + .date-label { + font-size: 1.5em; + font-weight: 300; + } +} + +.calendar { @include notification_bubble($flat: true); } + +/* Message list */ +.message-list { + width: 31.5em; + background: transparentize($bg_color, .3); +} + +/* World clocks */ + +.world-clocks-button { + @include notification_bubble($flat: true); +} + +.weather-button { + @include notification_bubble($flat: true); +} + + +/* Search */ + +// search entry +.search-entry { + color: black; + font-weight: bold; + background-color: $overview_transparent_bg; + text-shadow: 0px 1px 2px rgba(black, 0.9); + border-radius: 100px; + transition-duration: 200ms; + + StLabel.hint-text { color: $osd_fg_color; } + + &, &:focus, &:hover { + width: 21em; + padding: .6em .8em; + border: none; + } + + &:focus, &:hover { + background-color: white; + color: black; + font-weight: normal; + text-shadow: none; + box-shadow: none; + + StLabel.hint-text { color: black; } .search-entry-icon { - icon-size: 1em; - padding: 0 4px; - color: white; - } - - &:hover, &:focus { - background: white; - &, & .search-entry-icon { color: black; } + color: black; + icon-shadow: none; } } - //search results - - #searchResultsContent { - max-width: 1000px; - padding-left: 20px; - padding-right: 20px; - spacing: 16px; - } - - .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing - .search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container - .search-statustext { // "no results" - @extend %status_text; - } - .list-search-results { spacing: 3px; } - - .search-section-separator { height: 2px; background-color: rgba(255, 255, 255, 0.2); } - - .search-section:last-child .search-section-separator { background-color: transparent; } - - .list-search-result-content { spacing: 30px; } - .list-search-result-title { color: darken($osd_fg_color,5%); spacing: 12px; } - .list-search-result-description { color: darken($osd_fg_color, 30%); } - .list-search-provider-details { width: 150px; color: darken($osd_fg_color,5%); margin-top: 0.24em; } - .list-search-provider-content { spacing: 20px; } - .search-provider-icon { padding: 15px; } - - - /* DASHBOARD */ - - #dash { - color: $osd_fg_color; - background-color: transparent; - border: none; - font-size: 9pt; - padding: 4px 0; - border-radius: 0px 9px 9px 0px; - - &:rtl { - border-radius: 9px 0 0 9px; - } - - .placeholder { - background-image: url("assets/dash-placeholder.svg"); - background-size: contain; - height: 24px; - } - - .empty-dash-drop-target { - width: 24px; - height: 24px; - } - - .overview-icon StIcon { - color: white; - icon-shadow: transparentize(black, .3) 0 2px 6px; - } - } - - .dash-item-container > StWidget { - padding: 4px 8px; - } - - .dash-label { //osd tooltip - border-radius: 7px; - padding: 4px 12px; - color: if($variant=='light', black, white); - background-color: $bg_color; - border: none; - text-align: center; - box-shadow: transparentize(black, .5) 0 1px 6px; - -x-offset: 8px; - } - - - /* App Vault/Grid */ - .icon-grid { - spacing: 30px; - -shell-grid-horizontal-item-size: 136px; - -shell-grid-vertical-item-size: 136px; - - .overview-icon { icon-size: 96px; } - } - //.app-display { spacing: 20px; } - - .system-action-icon { - background-color: black; + .search-entry-icon { color: white; - border-radius: 99px; - icon-size: 48px; + icon-shadow: 0px 1px 2px rgba(black, 0.9); + } +} + +// search results +.search-section { + // separator + .search-section-separator { + height: 1px; + background-color: $osd_outer_borders_color; } - .app-view-controls { //favorties | all toggle container - padding-bottom: 32px; + &:last-child .search-section-separator { background-color: transparent; } +} + +// content +.search-section-content { + background-color: transparent; + border-radius: 0; + border: 0; + box-shadow: 0; +} + +// search result provider +.search-provider-icon { + .list-search-provider-content { + .list-search-provider-details { font-weight: bold; } } - .app-view-control { //favorties | all toggle button - padding: 4px 32px; - margin: 0; - &, &:hover, &:checked { - color: white; - background-color: transparentize(white, .8); - font-weight: bold; - border: 0; - box-shadow: none; - text-shadow: none; - } +} - &:hover { background: transparentize(white, .6); } +/* DASHBOARD */ - &:active, &:checked { - background: white; +#dash { + color: $osd_fg_color; + background-color: transparent; + border: none; + + .overview-icon StIcon { + color: white; + icon-shadow: transparentize(black, .3) 0 2px 6px; + } +} + +.show-apps { + &:focus, + &:checked { + .overview-icon { + background-color: $overview_transparent_bg; color: black; } - - &:first-child { border-radius: $button_radius 0 0 $button_radius; } - - &:last-child { border-radius: 0 $button_radius $button_radius 0; } } +} - //Icon tile - .search-provider-icon, - .list-search-result { - @extend %icon_tile; - &:focus, &:selected, &:hover { - background-color: transparentize($osd_fg_color,.9); - transition-duration: 200ms; - } - &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } - } - .app-well-app, - .app-well-app.app-folder, - .show-apps, - .grid-search-result { - & .overview-icon { - @extend %icon_tile; - font-weight: bold; - } - &:hover .overview-icon, - &:focus .overview-icon, - &:selected .overview-icon { - background-color: transparentize($osd_fg_color,.9); - transition-duration: 0ms; - border-image: none; - background-image: none; - } - &:drop .overview-icon { - background-color: transparentize($selected_bg_color,.15); - } - &:active .overview-icon, - &:checked .overview-icon { - background-color: transparentize(darken($osd_bg_color,10%), 0.5); - } - } - - .app-well-app-running-dot { //running apps indicator - width: 10px; height: 3px; - background-color: white; - box-shadow: transparentize(black, .3) 0 2px 6px; - border-radius: 3px; - margin-bottom: 2px; - } - - %icon_tile { - color: $osd_fg_color; - border-radius: $button_radius+4; - padding: 6px; - border: 1px solid transparent; - transition-duration: 100ms; - text-align: center; - } - - .app-well-app.app-folder > .overview-icon { - background-color: transparentize($osd_bg_color,.6); - } - - .show-apps:checked .show-apps-icon, - .show-apps:focus .show-apps-icon { - color: white; - transition-duration: 100ms; - } - - - // Collections - .app-folder-popup { //expanded collection - -arrow-border-radius: 8px; - -arrow-background-color: transparentize(darken($osd_bg_color,10%), 0.5); - -arrow-base: 24px; - -arrow-rise: 11px; - } - .app-folder-popup-bin { padding: 5px; } - .app-folder-icon { - padding: 5px; - spacing-rows: 5px; - spacing-columns: 5px; - } - - .page-indicator { - padding: 15px 20px; - - .page-indicator-icon { - width: 12px; - height: 12px; - background-color: transparent; - border: 2px solid rgba(255, 255, 255, 0.4); - border-radius: 12px; - } - - &:hover .page-indicator-icon { border-color: white; } - &:active .page-indicator-icon { border: none; margin: 2px; background-color: white; } - &:checked .page-indicator-icon, - &:checked:active .page-indicator-icon { background-color: white;} - } - - .no-frequent-applications-label { @extend %status_text; } - - .app-well-app > .overview-icon.overview-icon-with-label, - .grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; - spacing: 4px; - } - - // Workspace pager - .workspace-thumbnails { //container ala dash - @extend %overview-panel; - visible-width: 32px; //amount visible before hover - spacing: 11px; - padding: 8px; - border-radius: 9px 0 0 9px; - //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :( - &:rtl { border-radius: 0 9px 9px 0;} - - .placeholder { - background-image: url("assets/dash-placeholder.svg"); - background-size: contain; - height: 24px; - } - } - .workspace-thumbnail-indicator { - border: 4px solid $selected_bg_color; - border-radius: $button_radius; - padding: 1px; - } - - //Some hacks I don't even - .all-apps, - .frequent-apps > StBoxLayout { - // horizontal padding to make sure scrollbars or dash don't overlap content - padding: 0px 88px 10px 88px; - } - -%overview-panel { - color: $osd_fg_color; - background-color: transparentize($osd_bg_color, 0.1); +/* Workspace pager */ +// thumbnails in overview +.workspace-thumbnails { + background-color: transparentize(black, .8); border: none; + + .placeholder { background-image: none; } } -%status_text { - font-size: 2em; - font-weight: bold; - color: $osd_fg_color; +/* App Folders */ +.app-well-app.app-folder { background-color: $overview_transparent_bg; } + +/* Frequent | All toggle */ + +// buttons +.app-view-control { + margin: 0; + &, &:hover, &:checked { + color: white; + background-color: $overview_transparent_bg; + font-weight: bold; + border: 0; + box-shadow: none; + text-shadow: none; + } + + &:hover { background: transparentize(white, .6); } + + &:active, &:checked { + background: white; + color: black; + } + + &:first-child { border-radius: $base_border_radius 0 0 $base_border_radius; } + + &:last-child { border-radius: 0 $base_border_radius $base_border_radius 0; } } -/* NOTIFICATIONS & MESSAGE TRAY */ - - .url-highlighter { - link-color: lighten($selected_bg_color,10%); - font-weight: bold; - } - - // Banners - .notification-banner { - font-size: 11pt; - width: 34em; - margin: 5px; - border-radius: $modal_radius; - border: if($variant == 'light', none, $_bubble_borders_color); - min-height: 64px; - box-shadow: 0 1px 2px transparentize(black, 0.7); - &:hover { background: $bg_color; } - &, &:focus, &:active { - background-color: $bg_color; - .message-title { color: $fg_color } - .message-content { color: $fg_color; } - } - - .message-icon-bin > StIcon { - color: $fg_color; - } - - StEntry { @extend %bubble-entry; } - - .notification-icon { padding: 5px; } - .notification-content { padding: 5px; spacing: 5px; } - .secondary-icon { icon-size: 1.09em; } - .notification-actions { - padding-top: 0; - color: $fg_color; - border-top: 1px solid $_bubble_borders_color; - spacing: 0px; - } - .notification-button { - @extend %bubble_button; - &:focus { box-shadow: none; } - padding: 0 16px; - min-height: 35px; - border: none; - } - } - .summary-source-counter { - font-size: 10pt; - font-weight: bold; - height: 1.6em; width: 1.6em; - -shell-counter-overlap-x: 3px; - -shell-counter-overlap-y: 3px; - background-color: $selected_bg_color; - color: $selected_fg_color; - border: 2px solid $fg_color; - box-shadow: 0 2px 2px rgba(0,0,0,0.5); - border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; - } - - .secondary-icon { icon-size: 1.09em; } - - //chat bubbles - .chat-body { spacing: 5px; } - .chat-response { margin: 5px; } - .chat-log-message { color: darken($fg_color,10%); } - .chat-new-group { padding-top: 1em; } - .chat-received { - padding-left: 4px; - &:rtl { padding-left: 0px; padding-right: 4px; } - } - .chat-sent { - padding-left: 18pt; - color: lighten($fg_color, 15%); - &:rtl { padding-left: 0; padding-right: 18pt; } - } - .chat-meta-message { - padding-left: 4px; - font-size: 9pt; - font-weight: bold; - color: lighten($fg_color,18%); - &:rtl { padding-left: 0; padding-right: 4px; } - } - - //hotplug - .hotplug-transient-box { - spacing: 6px; - padding: 2px 72px 2px 12px; - } - .hotplug-notification-item { - @extend %bubble_button; - border: none; box-shadow: none; - padding: 2px 10px; - &:focus { padding: 1px 71px 1px 11px; } - } - - .hotplug-notification-item-icon { - icon-size: 24px; - padding: 2px 5px; - } - - .hotplug-resident-box { spacing: 8px; } - - .hotplug-resident-mount { - spacing: 8px; - border-radius: 4px; - &:hover { background-color: $_hover_bg_color; } - } - - .hotplug-resident-mount-label { - color: inherit; - padding-left: 6px; - } - - .hotplug-resident-mount-icon { - icon-size: 24px; - padding-left: 6px; - } - - .hotplug-resident-eject-icon { - icon-size: 16px; - } - - .hotplug-resident-eject-button { - padding: 7px; - border-radius: 5px; - color: pink; - } - -/* Eeeky things */ - -//magnifier - -.magnifier-zoom-region { - border: 2px solid $selected_bg_color; - &.full-screen { border-width: 0; } -} - -//Keyboard -/* On-screen Keyboard */ -.word-suggestions { - font-size: 14pt; - spacing: 12px; - min-height: 20pt; -} - -#keyboard { - background-color: transparentize($osd_bg_color, 0.3); - - .page-indicator { - padding: 4px 4px; - - .page-indicator-icon { - width: 6px; - height: 6px - } - } -} - - .key-container { - padding: 4px; - spacing: 4px; - } - - .keyboard-key { - $_key_bg: opacify(lighten($osd_bg_color, 9%), 1); - background-color: $_key_bg; - min-height: 1.2em; - min-width: 1.2em; - font-size: 16pt; - border-radius: $button_radius; - border: 1px solid $osd_outer_borders_color; - color: $osd_fg_color; - &:focus { @include button(focus); } - &:hover, &:checked { background-color: lighten($_key_bg, 3%); } - &:active { background-color: darken($_key_bg, 2%); } - &:grayed { //FIXME - background-color: $osd_bg_color; - color: $osd_fg_color; - border-color: $osd_borders_color; - } - &.default-key { - $_default_key_bg: opacify($osd_bg_color, 1); - border-color: $osd_outer_borders_color; - background-color: $_default_key_bg; - background-size: 20px; - &:hover, &:checked { background-color: lighten($_default_key_bg, 3%); } - &:active { background-color: darken($_default_key_bg, 2%); } - } - &.enter-key { - border-color: lighten($selected_bg_color, 5%); - background-color: $selected_bg_color; - background-image: url("assets/key-enter.svg"); - &:hover, &:checked { background-color: lighten($selected_bg_color, 3%); } - &:active { background-color: darken($selected_bg_color, 2%); } - } - &.shift-key-lowercase { - background-image: url("assets/key-shift.svg"); - } - &.shift-key-uppercase { - background-image: url("assets/key-shift-uppercase.svg"); - } - &.shift-key-uppercase:latched { - background-image: url("assets/key-shift-latched-uppercase.svg"); - } - &.hide-key { - background-image: url("assets/key-hide.svg"); - } - &.layout-key { - background-image: url("assets/key-layout.svg"); - } - } - - .keyboard-subkeys { //long press on a key popup - color: white; - -arrow-border-radius: 10px; - -arrow-background-color: transparentize($osd_bg_color, 0.3); - -arrow-border-width: 2px; - -arrow-border-color: $osd_outer_borders_color; - -arrow-base: 20px; - -arrow-rise: 10px; - -boxpointer-gap: 5px; - } - -.emoji-page { - .keyboard-key { - background-color: transparent; - border: none; - } -} - -.emoji-panel { - .keyboard-key:latched { - border-color: lighten($selected_bg_color, 5%); - background-color: $selected_bg_color; - } -} - -// IBus Candidate Popup - -.candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; -} - - .candidate-index { - padding: 0 0.5em 0 0; - color: darken($fg_color,10%); - } - - .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; - border-radius: 4px; - &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } - } - - .candidate-page-button-box { - height: 2em; - .vertical & { padding-top: 0.5em; } - .horizontal & { padding-left: 0.5em; } - } - - .candidate-page-button { - padding: 4px; - } - - .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; border-right-width: 0; } - .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } - .candidate-page-button-icon { icon-size: 1em; } - -/* Auth Dialogs & Screen Shield */ - -.user-icon { - background-size: contain; - color: $osd_fg_color; - border-radius: 99px; - &:hover { - color: lighten($osd_fg_color,30%); - } -} - -// LOGIN DIALOG - -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; -} - -.login-dialog { - //reset - border: none; - background-color: transparent; - - $_gdm_fg: #f6f5f4; - $_gdm_bg: lighten(#2e3436, 19%); - - StEntry { - width: 320px; - padding: 7px 9px; - border-radius: $button_radius; - color: $fg_color; - background-color: $base_color; - border-color: $borders_color; - &:focus { - padding: 6px 8px; - border-width: 2px; - border-color: $selected_bg_color; - } - @if $variant=='dark' { - $_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5); - background-color: $_gdm_entry_bg; - border-color: $_gdm_entry_bg; - color: $osd_fg_color; - } - } - - .modal-dialog-button-box { spacing: 3px; } - .modal-dialog-button { - padding: 4px 18px; - box-shadow: 0 1px 3px transparentize($shadow_color, 0.02); - background-color: $_gdm_bg; - border-color: $_gdm_bg; - color: $_gdm_fg; - - $_hover_c: lighten($_gdm_bg, 5%); - &:hover, &:focus { - background-color: $_hover_c; - border-color: $_hover_c; - } - &:active { - $_active_c: darken($_gdm_bg, 5%); - box-shadow: none; - 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($_gdm_fg, 0.3); - } - &:default { - @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); - border-color: $selected_bg_color; - &:hover, &:focus { - @include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color); - $_def_hover_c: lighten($selected_bg_color, 5%); - background-color: $_def_hover_c; - border-color: $_def_hover_c; - } - &:active { - @include button(active,$c:$selected_bg_color, $tc:$selected_fg_color); - $_def_active_c: darken($selected_bg_color, 5%); - background-color: $_def_active_c; - border-color: $_def_active_c; - } - &:insensitive { - @include button(insensitive); - border-color: darken($selected_bg_color, 10%); - background-color: darken($selected_bg_color, 10%); - color: transparentize($selected_fg_color, 0.3); - } - } - } -} - - .login-dialog-logo-bin { padding: 24px 0px; } - .login-dialog-banner { color: darken($osd_fg_color,10%); } - .login-dialog-button-box { spacing: 5px; } - .login-dialog-message-warning { color: $warning_color; } - .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } - .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 { - font-size: 90%; - font-weight: bold; - color: darken($osd_fg_color,30%); - padding-top: 1em; - } - - .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: 5px; - 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; } - } - - .login-dialog-username, - .user-widget-label { - color: $osd_fg_color; - font-size: 120%; - font-weight: bold; - text-align: left; - padding-left: 15px; - } - .user-widget-label { - &:ltr { padding-left: 14px; } - &:rtl { padding-right: 14px; } - } - - .login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; - spacing: 8px; - width: 23em; - } - - .login-dialog-prompt-label { - color: darken($osd_fg_color, 20%); - font-size: 110%; - padding-top: 1em; - } - - .login-dialog-session-list-button StIcon { - icon-size: 1.25em; - } - - .login-dialog-session-list-button { - color: darken($osd_fg_color,30%); - &:hover,&:focus { color: $osd_fg_color; } - &:active { color: darken($osd_fg_color, 50%); } - } - -//SCREEN SHIELD - -$_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); - -.screen-shield-arrows { - padding-bottom: 3em; -} - -.screen-shield-arrows Gjs_Arrow { - color: white; - width: 80px; - height: 48px; - -arrow-thickness: 12px; - -arrow-shadow: $_screenshield_shadow; -} - -.screen-shield-clock { - color: white; - text-shadow: $_screenshield_shadow; - font-weight: bold; - text-align: center; - padding-bottom: 1.5em; -} - -.screen-shield-clock-time { - font-size: 72pt; - text-shadow: $_screenshield_shadow; - font-feature-settings: "tnum"; -} - -.screen-shield-clock-date { - font-size: 28pt; - font-weight: normal; -} - -.screen-shield-notifications-container { - spacing: 6px; - width: 30em; - background-color: transparent; - max-height: 500px; - .summary-notification-stack-scrollview { - padding-top: 0; - padding-bottom: 0; - } - - .notification, - .screen-shield-notification-source { - padding: 12px 6px; - border: 1px solid $osd_outer_borders_color; - background-color: transparentize($osd_bg_color,0.5); - color: $osd_fg_color; - border-radius: 4px; - } - .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar -} - - -.screen-shield-notification-label { - font-weight: bold; - padding: 0px 0px 0px 12px; -} - -.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } - -#panel.lock-screen { background-color: transparentize($osd_bg_color, 0.5); } - -.screen-shield-background { //just the shadow, really - background: black; - box-shadow: 0px 2px 4px transparentize(black,0.6); -} - -#lockDialogGroup { - background: lighten(#2e3436, 8%) url(assets/noise-texture.png); - background-repeat: repeat; -} - -#screenShieldNotifications { - 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); } - } -} - - -// Looking Glass -#LookingGlassDialog { - background-color: rgba(0,0,0,0.80); - spacing: 4px; - padding: 4px; - border: 2px solid grey; - border-radius: 4px; - & > #Toolbar { - border: 1px solid grey; - border-radius: 4px; - } - .labels { spacing: 4px; } - .notebook-tab { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: #ccc; - transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - &:hover { - color: white; - text-shadow: black 0px 2px 2px; - } - &:selected { - border-bottom-width: 2px; - border-color: lighten($selected_bg_color,5%); - color: white; - text-shadow: black 0px 2px 2px; - } - } - StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } - StBoxLayout#ResultsArea { spacing: 4px; } -} - - .lg-dialog { - StEntry { - selection-background-color: #bbbbbb; - selected-color: #333333; - } - .shell-link { - color: #999999; - &:hover { color: #dddddd; } - } - } - - .lg-completions-text { - font-size: .9em; - font-style: italic; - } - - .lg-obj-inspector-title { - spacing: 4px; - } - - .lg-obj-inspector-button { - border: 1px solid gray; - padding: 4px; - border-radius: 4px; - &:hover { border: 1px solid #ffffff; } - } - - #lookingGlassExtensions { padding: 4px; } - - .lg-extensions-list { - padding: 4px; - spacing: 6px; - } - - .lg-extension { - border: 1px solid #6f6f6f; - border-radius: 4px; - padding: 4px; - } - - .lg-extension-name { - font-weight: bold; - } - - .lg-extension-meta { - spacing: 6px; - } - - #LookingGlassPropertyInspector { - background: rgba(0, 0, 0, 0.8); - border: 2px solid grey; - border-radius: 4px; - padding: 6px; - }