diff --git a/gnome-shell/src/carousel-arrow-back-24-symbolic.svg b/gnome-shell/src/carousel-arrow-back-24-symbolic.svg new file mode 100644 index 0000000..9848930 --- /dev/null +++ b/gnome-shell/src/carousel-arrow-back-24-symbolic.svg @@ -0,0 +1,36 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gnome-shell/src/carousel-arrow-next-24-symbolic.svg b/gnome-shell/src/carousel-arrow-next-24-symbolic.svg new file mode 100644 index 0000000..7d6356f --- /dev/null +++ b/gnome-shell/src/carousel-arrow-next-24-symbolic.svg @@ -0,0 +1,36 @@ + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gnome-shell/src/color-pick.svg b/gnome-shell/src/color-pick.svg new file mode 100644 index 0000000..d9af690 --- /dev/null +++ b/gnome-shell/src/color-pick.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/gnome-shell/src/gnome-shell-high-contrast.css b/gnome-shell/src/gnome-shell-high-contrast.css index 23ee133..ab3e0aa 100644 --- a/gnome-shell/src/gnome-shell-high-contrast.css +++ b/gnome-shell/src/gnome-shell-high-contrast.css @@ -1,44 +1,44 @@ /* 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. */ /* Global Values */ -stage { font-size: 10pt; color: #fff; } +stage { font-size: 11pt; color: #fff; } /* Common Stylings */ .search-statustext { font-size: 2em; font-weight: bold; color: #eeeeec; } -.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { color: #eeeeec; background-color: #2e3436; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 12px; } +.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { color: #eeeeec; background-color: #2e3436; border-radius: 8px; padding: 12px; } -.workspace-thumbnails { color: #eeeeec; background-color: rgba(46, 52, 54, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); } +.workspace-thumbnails .workspace-thumbnail { color: #eeeeec; background-color: rgba(238, 238, 236, 0.1); } -.show-apps .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .list-search-result, .search-provider-icon { border-radius: 0; padding: 6px; border: 2px solid transparent; transition-duration: 75ms; text-align: center; } +.app-well-app .overview-icon, .grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { border-radius: 6px; padding: 6px; border: 2px solid transparent; transition-duration: 100ms; text-align: center; } .modal-dialog { color: #fff; background-color: #000; border: 1px solid black; } -.app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 0; border-style: solid; border-width: 1px; min-height: 22px; padding: 3px 24px; color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 2px; border-style: solid; border-width: 1px; min-height: 22px; padding: 3px 24px; color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { color: #fff; 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(33, 93, 156, 0.6); } -.app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { color: gray; border-color: black; background-color: #0e0e0e; box-shadow: none; text-shadow: none; icon-shadow: none; } .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } -.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; border-style: solid; border-width: 1px; border-left-width: 0; border-bottom-width: 0; } +.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { color: #fff; background-color: #080808; border-color: black; box-shadow: none; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; border-style: solid; border-width: 1px; border-left-width: 0; border-bottom-width: 0; } .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { color: gray; border-color: black; background-color: #0e0e0e; box-shadow: none; text-shadow: none; icon-shadow: none; } -.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: none; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #fff; 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(33, 93, 156, 0.6); } .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } -.modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { border-radius: 0; } +.modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { border-radius: 0 0 0 2px; } -.modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { border-right-width: 0; border-radius: 0; } +.modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { border-right-width: 0; border-radius: 0 0 2px 0; } -.modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { border-radius: 0; } +.modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { border-radius: 0 0 2px 2px; } /* WIDGETS */ .shell-link { color: #4a90d9; } @@ -47,10 +47,10 @@ stage { font-size: 10pt; color: #fff; } .lowres-icon { icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } -.icon-dropshadow { icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } +.icon-dropshadow { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } /* Entries */ -StEntry { border-radius: 0; padding: 8px; border-width: 1px; color: #fff; background-color: #222; border-color: black; selection-background-color: #215d9c; selected-color: #ffffff; } +StEntry { border-radius: 2px; padding: 8px; border-width: 1px; color: #fff; background-color: #222; border-color: black; selection-background-color: #215d9c; selected-color: #ffffff; } StEntry:focus { border-color: #0f2b48; box-shadow: inset 0 0 0 1px #215d9c; } @@ -66,18 +66,18 @@ StEntry StLabel.hint-text { margin-left: 2px; color: rgba(255, 255, 255, 0.7); } /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } -.check-box StBin { width: 24px; height: 22px; background-image: url("checkbox-off.svg"); } +.check-box StBin { width: 24px; height: 22px; background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); } -.check-box:focus StBin { background-image: url("checkbox-off-focused.svg"); } +.check-box:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); } -.check-box:checked StBin { background-image: url("checkbox.svg"); } +.check-box:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } -.check-box:focus:checked StBin { background-image: url("checkbox-focused.svg"); } +.check-box:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } /* Switches */ -.toggle-switch { color: #fff; height: 24px; width: 56px; background-size: contain; background-image: url("toggle-off-dark.svg"); } +.toggle-switch { color: #fff; height: 22px; width: 46px; background-size: contain; background-image: url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"); } -.toggle-switch:checked { background-image: url("toggle-on-dark.svg"); } +.toggle-switch:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"); } /* Slider */ .slider { height: 15px; -barlevel-height: 3px; -barlevel-background-color: black; -barlevel-border-width: 1px; -barlevel-border-color: black; -barlevel-active-background-color: #215d9c; -barlevel-active-border-color: #2362a5; -barlevel-overdrive-color: #d51010; -barlevel-overdrive-border-color: #df1111; -barlevel-overdrive-separator-width: 1px; -slider-handle-radius: 7.5px; -slider-handle-border-width: 1px; -slider-handle-border-color: #fff; color: #fff; } @@ -104,7 +104,7 @@ StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { backgro StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #215d9c; } /* Popovers/Menus */ -.popup-menu-boxpointer, .candidate-popup-boxpointer { -arrow-border-radius: 2; -arrow-background-color: #000; -arrow-border-width: 1px; -arrow-border-color: black; -arrow-base: 12px; -arrow-rise: 6px; -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } +.popup-menu-boxpointer, .candidate-popup-boxpointer { -arrow-border-radius: 4px; -arrow-background-color: #000; -arrow-border-width: 1px; -arrow-border-color: black; -arrow-base: 12px; -arrow-rise: 6px; -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .popup-menu { min-width: 15em; color: #fff; } @@ -157,9 +157,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { padding-right: 14px; margin-right: 1.09em; } /* Date/Time Menu */ -.clock-display-box { spacing: 3px; } +.clock-display-box { spacing: 2px; } -.clock-display-box .clock { padding-left: 6px; padding-right: 6px; } +.clock-display-box .clock { padding-left: 12px; padding-right: 12px; } #calendarArea { padding: 0; } @@ -171,33 +171,33 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .datemenu-calendar-column .datemenu-displays-box { spacing: 6px; } -.events-section-title { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; icon-shadow: none; color: #999999; font-weight: bold; padding: .4em; } +.events-section-title { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; icon-shadow: none; color: #999999; font-weight: bold; padding: .4em; } .events-section-title:focus { color: #fff; 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(33, 93, 156, 0.6); } -.events-section-title:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.events-section-title:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .events-section-title:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } /* today button (the date) */ -.datemenu-today-button { border-width: 0px; border-style: solid; border-radius: 0; 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; padding: 9px; } +.datemenu-today-button { border-width: 0; border-style: solid; border-radius: 2px; 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; padding: 9px; } .datemenu-today-button:focus { color: #fff; 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(33, 93, 156, 0.6); } -.datemenu-today-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.datemenu-today-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .datemenu-today-button:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } -.datemenu-today-button .day-label { font-size: 11pt; font-weight: bold; } +.datemenu-today-button .day-label { font-size: 12pt; font-weight: bold; } -.datemenu-today-button .date-label { font-size: 17pt; font-weight: 1000; } +.datemenu-today-button .date-label { font-size: 18pt; font-weight: 1000; } /* Calendar */ -.calendar { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 6px; } +.calendar { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 6px; } .calendar:focus { color: #fff; 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(33, 93, 156, 0.6); } -.calendar:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.calendar:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .calendar:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -205,19 +205,19 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .calendar .calendar-change-month-back StIcon, .calendar .calendar-change-month-forward StIcon { icon-size: 1.09em; } -.calendar .pager-button { background-color: transparent; height: 32px; width: 32px; border-radius: 0; } +.calendar .pager-button { background-color: transparent; height: 32px; width: 32px; border-radius: 2px; } .calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #1a1a1a; } .calendar .pager-button:active { background-color: black; } -.calendar .calendar-day-base { font-size: 7pt; text-align: center; width: 32px; height: 32px; padding: 0; margin: 2px; border-radius: 0; border: 1px solid transparent; font-feature-settings: "tnum"; } +.calendar .calendar-day-base { font-size: 8pt; text-align: center; width: 32px; height: 32px; padding: 0; margin: 2px; border-radius: 2px; border: 1px solid transparent; font-feature-settings: "tnum"; } .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { background-color: #0d0d0d; } -.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: white; background-color: black; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } +.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: white; background-color: black; } -.calendar .calendar-day-base.calendar-day-heading { color: white; margin-top: 1em; font-size: 6pt; } +.calendar .calendar-day-base.calendar-day-heading { color: white; margin-top: 1em; font-size: 7pt; } .calendar .calendar-day { border-width: 0; } @@ -235,20 +235,20 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { background-color: #2365a9; color: #ffffff; } -.calendar .calendar-day-with-events { background-image: url("calendar-today.svg"); } +.calendar .calendar-day-with-events { background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); } .calendar .calendar-day-with-events.calendar-work-day { color: white; font-weight: bold; } .calendar .calendar-other-month-day { color: rgba(255, 255, 255, 0.5); } -.calendar .calendar-week-number { font-size: 6pt; font-weight: bold; height: 1.8em; width: 2.3em; border-radius: 0; margin: 6px; background-color: black; color: white; } +.calendar .calendar-week-number { font-size: 7pt; font-weight: bold; height: 1.8em; width: 2.3em; border-radius: 2px; margin: 6px; background-color: black; color: white; } /* Events */ -.events-button { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } +.events-button { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } .events-button:focus { color: #fff; 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(33, 93, 156, 0.6); } -.events-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.events-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .events-button:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -258,14 +258,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .events-button .events-title { color: #999999; font-weight: bold; margin-bottom: 4px; } -.events-button .event-time { color: #cccccc; font-feature-settings: "tnum"; font-size: 9pt; } +.events-button .event-time { color: #cccccc; font-feature-settings: "tnum"; font-size: 10pt; } /* World clocks */ -.world-clocks-button { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } +.world-clocks-button { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } .world-clocks-button:focus { color: #fff; 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(33, 93, 156, 0.6); } -.world-clocks-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.world-clocks-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); 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: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -273,22 +273,22 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .world-clocks-button .world-clocks-header { color: #999999; font-weight: bold; } -.world-clocks-button .world-clocks-city { color: #fff; font-size: 10pt; font-weight: normal; } +.world-clocks-button .world-clocks-city { color: #fff; font-size: 11pt; font-weight: normal; } -.world-clocks-button .world-clocks-time { font-weight: bold; color: #fff; font-feature-settings: "tnum"; font-size: 10pt; } +.world-clocks-button .world-clocks-time { font-weight: bold; color: #fff; font-feature-settings: "tnum"; font-size: 11pt; } .world-clocks-button .world-clocks-time:ltr { text-align: right; } .world-clocks-button .world-clocks-time:rtl { text-align: left; } -.world-clocks-button .world-clocks-timezone { color: #cccccc; font-feature-settings: "tnum"; font-size: 9pt; } +.world-clocks-button .world-clocks-timezone { color: #cccccc; font-feature-settings: "tnum"; font-size: 10pt; } /* Weather */ -.weather-button { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } +.weather-button { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } .weather-button:focus { color: #fff; 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(33, 93, 156, 0.6); } -.weather-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.weather-button:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .weather-button:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -298,11 +298,11 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .weather-button .weather-header { color: #999999; font-weight: bold; } -.weather-button .weather-header.location { font-weight: normal; font-size: 9pt; } +.weather-button .weather-header.location { font-weight: normal; font-size: 10pt; } .weather-button .weather-grid { spacing-rows: 6px; spacing-columns: 12px; } -.weather-button .weather-forecast-time { color: #b3b3b3; font-feature-settings: "tnum"; font-size: 8pt; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } +.weather-button .weather-forecast-time { color: #b3b3b3; font-feature-settings: "tnum"; font-size: 9pt; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-icon { icon-size: 2.18em; } @@ -319,11 +319,11 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .message-list-controls { margin: 8px 16px 0; padding: 4px; spacing: 12px; } -.message { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.message { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .message:focus { color: #fff; 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(33, 93, 156, 0.6); } -.message:hover { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.message:hover { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .message:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -341,7 +341,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .message .message-secondary-bin { padding: 0 8px; } -.message .message-secondary-bin > .event-time { color: rgba(255, 255, 255, 0.5); font-size: 8pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } +.message .message-secondary-bin > .event-time { color: rgba(255, 255, 255, 0.5); font-size: 9pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { text-align: right; } @@ -358,7 +358,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .url-highlighter { link-color: #4a90d9; } /* Media Controls */ -.message-media-control { padding: 12px 24px; color: #d9d9d9; } +.message-media-control { padding: 12px 1.64em; color: #d9d9d9; } .message-media-control:hover { background-color: #1a1a1a; color: #fff; } @@ -366,19 +366,19 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .message-media-control:insensitive { color: #999999; } -.message-media-control:last-child:ltr { border-radius: 0 2 2 0; } +.message-media-control:last-child:ltr { border-radius: 0 4px 4px 0; } -.message-media-control:last-child:rtl { border-radius: 2 0 0 2; } +.message-media-control:last-child:rtl { border-radius: 4px 0 0 4px; } -.media-message-cover-icon { icon-size: 2.18em !important; border-radius: 0; } +.media-message-cover-icon { icon-size: 2.18em !important; border-radius: 2px; } -.media-message-cover-icon.fallback { color: #d4d4d4; background-color: #000; border: 1px solid transparent; border-radius: 0; icon-size: 2.18em !important; } +.media-message-cover-icon.fallback { color: #d4d4d4; background-color: #000; border: 1px solid transparent; border-radius: 2px; icon-size: 2.18em !important; } .candidate-popup-content { padding: 0.5em; spacing: 0.3em; } .candidate-index { padding: 0 0.5em 0 0; color: #e6e6e6; } -.candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 0; } +.candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 2px; } .candidate-box:selected, .candidate-box:hover { background-color: #215d9c; color: #ffffff; } @@ -390,9 +390,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .candidate-page-button { padding: 4px; } -.candidate-page-button-previous { border-radius: 0 0px 0px 0; border-right-width: 0; } +.candidate-page-button-previous { border-radius: 2px 0px 0px 2px; border-right-width: 0; } -.candidate-page-button-next { border-radius: 0px 0 0 0px; } +.candidate-page-button-next { border-radius: 0px 2px 2px 0px; } .candidate-page-button-icon { icon-size: 1em; } @@ -401,7 +401,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .notification-banner .notification-actions { spacing: 0; } -.summary-source-counter { font-size: 9pt; font-weight: bold; height: 1.6em; width: 1.6em; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: #215d9c; color: #ffffff; border: 2px solid #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0.9em; } +.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: #215d9c; color: #ffffff; border: 2px solid #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0.9em; } .chat-body { spacing: 5px; } @@ -419,16 +419,16 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .chat-sent:rtl { padding-left: 0; padding-right: 18pt; } -.chat-meta-message { padding-left: 4px; font-size: 8pt; font-weight: bold; color: white; } +.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-notification-item-icon { icon-size: 24px; padding: 0 4px; } /* Modal Dialogs */ -.headline { font-size: 11pt; } +.headline { font-size: 12pt; } -.modal-dialog { border-radius: 0; } +.modal-dialog { border-radius: 4px; } .modal-dialog .modal-dialog-content-box { margin: 32px 40px; spacing: 32px; max-width: 28em; } @@ -459,14 +459,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } -.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { color: #f2f2f2; font-size: 9pt; } +.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { color: #f2f2f2; font-size: 10pt; } /* Run Dialog */ .run-dialog .modal-dialog-content-box { margin-top: 24px; margin-bottom: 14px; } .run-dialog .run-dialog-entry { width: 20em; } -.run-dialog .run-dialog-description { font-size: 9pt; text-align: center; color: #cccccc; } +.run-dialog .run-dialog-description { font-size: 10pt; text-align: center; color: #cccccc; } /* Password or Authentication Dialog */ .prompt-dialog { width: 28em; } @@ -485,7 +485,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .prompt-dialog-password-entry { width: 20em; } -.prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; font-size: 9pt; } +.prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; font-size: 10pt; } .prompt-dialog-error-label { color: #f57900; } @@ -509,6 +509,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .audio-selection-device-icon { icon-size: 4.36em; } +/* Welcome dialog */ +.welcome-dialog-image { background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg"); background-size: contain; /* Reasonable maximum dimensions */ height: 300px; width: 300px; } + /* Network Dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; } @@ -528,7 +531,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .nm-dialog-scroll-view { border: 1px solid black; padding: 0; background-color: black; } -.nm-dialog-item { font-size: 10pt; border-bottom: 1px solid black; padding: 12px; spacing: 0px; } +.nm-dialog-item { font-size: 11pt; border-bottom: 1px solid black; padding: 12px; spacing: 0px; } .nm-dialog-item:selected { background-color: #215d9c; color: #ffffff; } @@ -561,7 +564,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg /* App Switcher */ .switcher-popup { padding: 8px; spacing: 24px; } -.switcher-list .item-box { padding: 8px; border-radius: 1px; border: 1px solid transparent; } +.switcher-list .item-box { padding: 8px; border-radius: 3px; border: 1px solid transparent; } .switcher-list .item-box:outlined { background-color: rgba(238, 238, 236, 0.3); } @@ -588,42 +591,44 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .workspace-switcher { background: transparent; border: none; border-radius: 0; padding: 0; spacing: 12px; } -.ws-switcher-box { background: transparent; height: 50px; background-size: 32px; border: 1px solid rgba(238, 238, 236, 0.1); border-radius: 3px; } +.ws-switcher-box { background: transparent; height: 50px; background-size: 32px; border: 1px solid rgba(238, 238, 236, 0.1); border-radius: 5px; } -.ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 52px; background-color: #215d9c; border: 1px solid #256ab1; border-radius: 3px; color: #ffffff; } +.ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 52px; background-color: #215d9c; border: 1px solid #256ab1; border-radius: 5px; color: #ffffff; } /* Top Bar */ -#panel { background-color: black; font-weight: bold; height: 1.86em; font-feature-settings: "tnum"; } +#panel { background-color: black; font-weight: bold; height: 1.86em; font-feature-settings: "tnum"; transition-duration: 250ms; } -#panel.unlock-screen, #panel.login-screen { background-color: transparent; } +#panel.unlock-screen, #panel.login-screen, #panel:overview { background-color: transparent; } -#panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } +#panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { -panel-corner-opacity: 0; } #panel #panelLeft, #panel #panelCenter { spacing: 6px; } -#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: black; -panel-corner-border-width: 0px; -panel-corner-border-color: transparent; } +#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: black; -panel-corner-border-width: 0px; -panel-corner-border-color: transparent; -panel-corner-opacity: 0; transition-duration: 250ms; } + +#panel .panel-button { font-weight: bold; color: #fff; -natural-hpadding: 12px; -minimum-hpadding: 6px; transition-duration: 150ms; border: 0px solid transparent; border-radius: 0; } -#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus { -panel-corner-border-color: #256ab1; } +#panel .panel-button.clock-display .clock { transition-duration: 150ms; border: 0px solid transparent; border-radius: 0; } -#panel .panel-button { font-weight: bold; color: #fff; -natural-hpadding: 12px; -minimum-hpadding: 6px; } +#panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { color: white; background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.6); } -#panel .panel-button:hover { color: white; background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.6); } +#panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } -#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { color: white; } +#panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { color: white; background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.6); } -#panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; } +#panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; margin: 0 4px; } -#panel .panel-button .app-menu-icon { margin-left: 4px; margin-right: 4px; -st-icon-style: symbolic; } +#panel .panel-button .panel-status-indicators-box .system-status-icon, #panel .panel-button .panel-status-menu-box .system-status-icon { margin: 0; } -.unlock-screen #panel .panel-button, .login-screen #panel .panel-button { color: white; } +#panel .panel-button .app-menu-icon { -st-icon-style: symbolic; } -.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 { color: white; } +#panel #panelActivities.panel-button { -natural-hpadding: 18px; } -#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px #215d9c; } +#panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } -#panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } +#panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked { box-shadow: none; } -#panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0 0 #256ab1; } +#panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } @@ -635,11 +640,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg #appMenu .label-shadow { color: transparent; } -#panel #panelActivities.panel-button > * { background-image: url("activities.svg"); background-position: center top; width: 24px; height: 24px; background-color: transparent !important; background-gradient-direction: none !important; border: 0 solid transparent !important; text-shadow: 0 0 transparent !important; transition-duration: 0ms !important; box-shadow: none !important; color: transparent; } - -#panel #panelActivities.panel-button:active, #panel #panelActivities.panel-button:overview, #panel #panelActivities.panel-button:focus, #panel #panelActivities.panel-button:checked { background-color: transparent; box-shadow: none; border-bottom-width: 1px; border-color: transparent; } - -#panel #panelActivities.panel-button:active > *, #panel #panelActivities.panel-button:overview > *, #panel #panelActivities.panel-button:focus > *, #panel #panelActivities.panel-button:checked > * { background-image: url("activities-active.svg"); } +#appMenu .panel-status-menu-box { padding: 0 6px; spacing: 6px; } /* Activities Ripple */ .ripple-box { background-color: rgba(158, 196, 235, 0.3); box-shadow: 0 0 2px 2px #4a90d9; width: 52px; height: 52px; border-radius: 0 0 52px 0; } @@ -647,26 +648,28 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .ripple-box:rtl { border-radius: 0 0 0 52px; } /* OVERVIEW */ -#overview { spacing: 24px; background-color: transparent; } +.controls-manager, .secondary-monitor-workspaces { spacing: 12px; } + +#overviewGroup { background-color: #282828; } .overview-controls { padding-bottom: 32px; } /* Window Picker */ -.window-picker { spacing: 6px; padding: 12px; } +.window-picker { spacing: 6px; } -.window-picker.external-monitor { padding: 12px; } +.window-caption { color: #eeeeec; background-color: #2e3436; border-radius: 2px; padding: 6px 12px; } -.window-clone-border { border-width: 6px; border-style: solid; border-color: rgba(255, 255, 255, 0.35); border-radius: 2; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); } +.window-close { background-color: #a30000; color: #eeeeec; border-radius: 2px; padding: 3px; height: 24px; width: 24px; box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); transition-duration: 150ms; } -.window-caption { color: #eeeeec; background-color: #2e3436; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1; padding: 6px 12px; font-weight: bold; font-size: 11pt; } - -.window-close { background-color: #a30000; color: #ffffff; border: none; border-radius: 0; padding: 3px; height: 24px; width: 24px; box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); } +.window-close StIcon { icon-size: 24px; } .window-close:hover { background-color: #cc0000; } -.window-close:active { background-color: #990000; } +.window-close:active { color: rgba(238, 238, 236, 0.8); background-color: #990000; } + +.workspace-background { border-radius: 30px; background-color: #2e3436; box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.3); } -.search-entry { width: 320px; padding: 7px 9px; border-radius: 0; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.2); border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } +.search-entry { width: 320px; padding: 7px 9px; border-radius: 2px; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.2); border-color: transparent; margin-top: 12px; margin-bottom: 6px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } .search-entry:hover { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; color: white; } @@ -681,7 +684,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .search-section .search-section-separator { height: 0; background-color: transparent; } -.search-section-content { background-color: rgba(58, 65, 68, 0.8); border-radius: 3; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); color: #eeeeec; padding: 18px; spacing: 8px; } +.search-section-content { background-color: rgba(58, 65, 68, 0.8); border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); color: #eeeeec; padding: 18px; spacing: 8px; } .list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { background-color: rgba(238, 238, 236, 0.1); transition-duration: 200ms; } @@ -701,8 +704,37 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .list-search-result .list-search-result-description { color: #a6a69b; } +/* Dash */ +#dash { font-size: 9pt; margin-top: 12px; padding: 0 6px; } + +#dash .placeholder { background-image: none; background-size: contain; height: 32px; } + +#dash .empty-dash-drop-target { width: 32px; height: 32px; } + +#dash .overview-icon { padding: 3px; } + +.dash-background { background-color: transparent; margin-bottom: 0; padding: 6px; border-radius: 4px 4px 0 0; } + +.dash-item-container .app-well-app, .show-apps { padding: 6px 6px 6px; } + +.dash-separator { width: 1px; margin: 0 9px 0; background-color: rgba(238, 238, 236, 0.3); } + +.dash-label { color: #eeeeec; background-color: #2e3436; border-radius: 2px; padding: 6px 12px; text-align: center; -y-offset: 12px; } + +.show-apps .overview-icon { color: #eeeeec; } + +.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { background-color: rgba(238, 238, 236, 0.1); } + +.show-apps:focus .overview-icon { background-color: rgba(238, 238, 236, 0.3); } + +.show-apps:drop .overview-icon { border: 2px solid #215d9c; background-color: rgba(33, 93, 156, 0.2); } + +.show-apps:active .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(23, 25, 26, 0.5); } + +.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(46, 52, 54, 0.5); color: #fff; } + /* App Grid */ -.icon-grid { row-spacing: 36px; column-spacing: 36px; max-row-spacing: 72px; max-column-spacing: 72px; } +.icon-grid { row-spacing: 12px; column-spacing: 12px; max-row-spacing: 72px; max-column-spacing: 72px; page-padding-top: 24px; page-padding-bottom: 24px; page-padding-left: 12px; page-padding-right: 12px; } /* App Icons */ .app-well-app .overview-icon, .grid-search-result .overview-icon { color: #fff; } @@ -711,7 +743,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon { background-color: rgba(255, 255, 255, 0.3); } -.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { background-color: rgba(33, 93, 156, 0.85); } +.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { border: 2px solid #215d9c; background-color: rgba(33, 93, 156, 0.2); } .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { background-color: rgba(23, 25, 26, 0.5); } @@ -720,9 +752,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { spacing: 6px; } /* App Folders */ -.app-well-app.app-folder { background-color: rgba(46, 52, 54, 0.2); border-radius: 4px; } +.app-well-app.app-folder { background-color: #202020; border-radius: 6px; } -.app-folder-dialog { border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.1); padding: 12px; background-color: rgba(23, 25, 26, 0.95); } +.app-folder-dialog { border-radius: 6px; background-color: #3b3b3b; padding: 12px 0px 12px 0px; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; /* FIXME: this is to keep the label in sync with the entry */ } @@ -736,16 +768,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { icon-size: 16px; } -.app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; } +.app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; page-padding-top: 0; page-padding-bottom: 0; page-padding-left: 0; page-padding-right: 0; } .app-folder-dialog .page-indicators { margin-bottom: 18px; } -.app-folder-dialog .page-indicators .page-indicator { padding: 15px 12px; } - .app-folder-dialog-container { padding: 12px; width: 620px; height: 620px; } -.app-folder-icon { padding: 6px; spacing-rows: 6px; spacing-columns: 6px; } - .app-well-app-running-dot { height: 5px; width: 5px; border-radius: 5px; background-color: #eeeeec; margin-bottom: 1px; } .rename-folder-popup .rename-folder-popup-item { spacing: 6px; } @@ -754,45 +782,30 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-menu, .app-well-menu { max-width: 27.25em; } -.page-indicator { padding: 15px 20px; } +.page-indicator { padding: 6px 12px 0; } .page-indicator .page-indicator-icon { width: 10px; height: 10px; border-radius: 10px; background-color: white; } -.all-apps { padding: 0px 88px 10px 88px; } +.apps-scroll-view { padding: 0; } .system-action-icon { background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 99px; icon-size: 48px; } -/* Dash */ -#dash { background-color: transparent; border: none; font-size: 8pt; padding: 4px 0; border-radius: 0 0 0 0; } - -#dash:rtl { border-radius: 0 0 0 0; border-right-width: 0; } - -#dash .placeholder { background-image: none; background-size: contain; height: 24px; } +.page-navigation-hint { width: 300px; } -#dash .empty-dash-drop-target { width: 24px; height: 24px; } +.page-navigation-hint.dnd { background: rgba(255, 255, 255, 0.1); } -.dash-item-container > StWidget { padding: 4px 8px; } +.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; border-radius: 15px 0px 0px 15px; } -.dash-label { background-color: rgba(46, 52, 54, 0.95); border-radius: 0; border: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); color: #eeeeec; padding: 6px 8px; text-align: center; -x-offset: 8px; } +.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; border-radius: 0px 15px 15px 0px; } -.show-apps .overview-icon { color: #eeeeec; } - -.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { background-color: rgba(238, 238, 236, 0.1); } - -.show-apps:focus .overview-icon { background-color: rgba(238, 238, 236, 0.3); } - -.show-apps:drop .overview-icon { background-color: rgba(33, 93, 156, 0.85); } - -.show-apps:active .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(23, 25, 26, 0.5); } - -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { background-color: #17191a; color: #fff; } +.page-navigation-arrow { margin: 6px; width: 24px; height: 24px; } /* Workspace pager */ -.workspace-thumbnails { visible-width: 32px; spacing: 6px; padding: 6px; border-radius: 0 0 0 0; border-right-width: 0; } +.workspace-thumbnails { visible-width: 32px; spacing: 6px; padding: 6px; } -.workspace-thumbnails:rtl { border-radius: 0 0 0 0; border-left-width: 0; } +.workspace-thumbnails .workspace-thumbnail { border-radius: 3px; } -.workspace-thumbnails .placeholder { background-image: url("dash-placeholder.svg"); background-size: contain; height: 24px; } +.workspace-thumbnails .placeholder { background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); background-size: contain; width: 18px; } .workspace-thumbnail-indicator { border: 3px solid #215d9c; border-radius: 3px; padding: 0px; } @@ -806,36 +819,37 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .select-area-rubberband { background-color: rgba(33, 93, 156, 0.3); border: 1px solid #215d9c; } -.user-icon { background-size: contain; color: #eeeeec; border-radius: 99px; border: 2px #eeeeec; } +.user-icon { background-size: contain; color: #eeeeec; border-radius: 99px; icon-size: 4.36em; } .user-icon:hover { color: white; } -.user-icon StIcon { background-color: rgba(238, 238, 236, 0.05); border-radius: 99px; } +.user-icon StIcon { background-color: rgba(238, 238, 236, 0.05); border-radius: 99px; padding: 12px; width: 2.725em; height: 2.725em; } + +.user-icon.user-avatar { border: 2px #eeeeec; } .user-widget.vertical .user-icon { icon-size: 6.54em; } .user-widget.vertical .user-icon StIcon { padding: 20px; padding-top: 18px; padding-bottom: 22px; width: 5.995em; height: 5.995em; } -.user-widget.horizontal .user-icon { icon-size: 4.36em; } - -.user-widget.horizontal .user-icon StIcon { padding: 12px; width: 2.725em; height: 2.725em; } - .lightbox { background-color: black; } .flashspot { background-color: white; } .hidden { color: rgba(0, 0, 0, 0); } -.caps-lock-warning-label { text-align: center; padding-bottom: 8px; font-size: 9pt; color: #f57900; } +.caps-lock-warning-label { text-align: center; padding-bottom: 8px; font-size: 10pt; color: #f57900; } + +/* Workspace animation */ +.workspace-animation { background-color: #282828; } /* Tiled window previews */ .tile-preview { background-color: rgba(33, 93, 156, 0.5); border: 1px solid #215d9c; } -.tile-preview-left.on-primary { border-radius: 1px 0 0 0; } +.tile-preview-left.on-primary { border-radius: 3px 0 0 0; } -.tile-preview-right.on-primary { border-radius: 0 1px 0 0; } +.tile-preview-right.on-primary { border-radius: 0 3px 0 0; } -.tile-preview-left.tile-preview-right.on-primary { border-radius: 1px 1px 0 0; } +.tile-preview-left.tile-preview-right.on-primary { border-radius: 3px 3px 0 0; } /* On-screen Keyboard */ #keyboard { background-color: rgba(0, 0, 0, 0.9); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); } @@ -846,25 +860,25 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .key-container { padding: 4px; spacing: 4px; } -.keyboard-key { color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); font-size: 15pt; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; border-radius: 3px; } +.keyboard-key { color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); font-size: 16pt; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; border-radius: 5px; } .keyboard-key:focus { color: #fff; 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(33, 93, 156, 0.6); } -.keyboard-key:hover, .keyboard-key:checked { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key:hover, .keyboard-key:checked { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .keyboard-key:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } .keyboard-key:grayed { background-color: black; color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); } -.keyboard-key.default-key { color: #fff; background-color: #3a4144; border-color: #292f30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.default-key { color: #fff; background-color: #3a4144; border-color: #292f30; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key.default-key:hover, .keyboard-key.default-key:checked { color: #fff; background-color: #3e4749; border-color: #292f30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.default-key:hover, .keyboard-key.default-key:checked { color: #fff; background-color: #3e4749; border-color: #292f30; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .keyboard-key.default-key:active { color: #fff; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } -.keyboard-key.enter-key { color: #ffffff; background-color: #2365a9; border-color: #1d538b; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.enter-key { color: #ffffff; background-color: #2365a9; border-color: #1d538b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { color: #fff; background-color: #2871be; border-color: #205b98; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { color: #fff; background-color: #2871be; border-color: #205b98; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .keyboard-key.enter-key:active { color: #fff; background-color: #1c5187; border-color: #153d65; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -872,13 +886,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .keyboard-key StIcon { icon-size: 1.125em; } -.keyboard-subkeys { color: #eeeeec; -arrow-border-radius: 0; -arrow-background-color: #2e3436; -arrow-border-width: 1px; -arrow-border-color: #434c4f; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 6px; } +.keyboard-subkeys { color: #eeeeec; -arrow-border-radius: 4px; -arrow-background-color: #2e3436; -arrow-border-width: 1px; -arrow-border-color: #434c4f; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 6px; } -.keyboard-subkeys .keyboard-key { color: #fff; background-color: #080808; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-radius: 0; } +.keyboard-subkeys .keyboard-key { color: #fff; background-color: #080808; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-radius: 2px; } .keyboard-subkeys .keyboard-key:focus { color: #fff; 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(33, 93, 156, 0.6); } -.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { color: #fff; background-color: #0d0d0d; border-color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { color: #fff; background-color: #0d0d0d; border-color: black; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .keyboard-subkeys .keyboard-key:active { color: #fff; background-color: black; border-color: black; text-shadow: none; icon-shadow: none; box-shadow: none; } @@ -886,12 +900,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .emoji-panel .keyboard-key:latched { border-color: #256ab1; background-color: #215d9c; } -.word-suggestions { font-size: 13pt; spacing: 12px; min-height: 20pt; } +.word-suggestions { font-size: 14pt; spacing: 12px; min-height: 20pt; } /* Looking Glass */ -#LookingGlassDialog { background-color: #2e3436; spacing: 6px; padding: 4px; border: 1px solid rgba(238, 238, 236, 0.2); border-radius: 0; color: #eeeeec; } +#LookingGlassDialog { background-color: #2e3436; spacing: 6px; padding: 4px; border: 1px solid rgba(238, 238, 236, 0.2); border-radius: 2px; color: #eeeeec; } -#LookingGlassDialog > #Toolbar { border: none; border-radius: 0; background-color: #2e3436; } +#LookingGlassDialog > #Toolbar { border: none; border-radius: 2px; background-color: #2e3436; } #LookingGlassDialog .labels { spacing: 6px; } @@ -923,7 +937,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .lg-obj-inspector-title { spacing: 6px; } -.lg-obj-inspector-button { border: 1px solid rgba(0, 0, 0, 0.7); padding: 4px; border-radius: 0; } +.lg-obj-inspector-button { border: 1px solid rgba(0, 0, 0, 0.7); padding: 4px; border-radius: 2px; } .lg-obj-inspector-button:hover { border: 1px solid #ffffff; } @@ -931,44 +945,44 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .lg-extensions-list { padding: 4px; spacing: 6px; } -.lg-extension { border: 1px solid rgba(13, 13, 13, 0.7); background-color: #3a4144; border-radius: 0; padding: 4px; } +.lg-extension { border: 1px solid rgba(13, 13, 13, 0.7); background-color: #3a4144; border-radius: 2px; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } -#LookingGlassPropertyInspector { background: #2e3436; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 0; padding: 6px; } +#LookingGlassPropertyInspector { background: #2e3436; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 2px; padding: 6px; } /* Login Dialog */ .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } -.login-dialog { border: none; background-color: transparent; } +.login-dialog, .unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { background-color: rgba(45, 44, 46, 0.5); color: #eeeeec; } +.login-dialog StEntry, .unlock-dialog StEntry { background-color: #202020; color: #fff; } -.login-dialog .modal-dialog-button-box { spacing: 3px; } +.login-dialog .modal-dialog-button-box, .unlock-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.2); background-color: #5b666a; border-color: #5b666a; color: #fff; } +.login-dialog .modal-dialog-button, .unlock-dialog .modal-dialog-button { padding: 4px 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); background-color: #202020; border-color: #202020; color: #eeeeec; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { background-color: #667478; border-color: #667478; } +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, .unlock-dialog .modal-dialog-button:hover, .unlock-dialog .modal-dialog-button:focus { background-color: #353535; border-color: #353535; } -.login-dialog .modal-dialog-button:active { box-shadow: none; background-color: #4f595d; border-color: #4f595d; } +.login-dialog .modal-dialog-button:active, .unlock-dialog .modal-dialog-button:active { box-shadow: none; background-color: #1b1b1b; border-color: #1b1b1b; } -.login-dialog .modal-dialog-button:insensitive { color: gray; border-color: black; background-color: #0e0e0e; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #4f595d; background-color: #4f595d; color: rgba(255, 255, 255, 0.7); } +.login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { color: gray; border-color: black; background-color: #0e0e0e; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #1b1b1b; background-color: #1b1b1b; color: rgba(238, 238, 236, 0.7); } -.login-dialog .modal-dialog-button:default { color: #ffffff; background-color: #2365a9; border-color: #1d538b; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-color: #215d9c; } +.login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { color: #ffffff; background-color: #2365a9; border-color: #1d538b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-color: #215d9c; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { color: #ffffff; background-color: #256ab1; border-color: #1d538b; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); background-color: #256ab1; border-color: #256ab1; } +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { color: #ffffff; background-color: #256ab1; border-color: #1d538b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); background-color: #256ab1; border-color: #256ab1; } -.login-dialog .modal-dialog-button:default:active { color: #ffffff; background-color: #1e5690; border-color: #17426e; text-shadow: none; icon-shadow: none; box-shadow: none; background-color: #1c5187; border-color: #1c5187; } +.login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { color: #ffffff; background-color: #1e5690; border-color: #17426e; text-shadow: none; icon-shadow: none; box-shadow: none; background-color: #1c5187; border-color: #1c5187; } -.login-dialog .modal-dialog-button:default:insensitive { color: gray; border-color: black; background-color: #0e0e0e; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #184472; background-color: #184472; color: rgba(255, 255, 255, 0.7); } +.login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { color: gray; border-color: black; background-color: #0e0e0e; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #184472; background-color: #184472; color: rgba(255, 255, 255, 0.7); } -.login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button { padding: 0; border-radius: 99px; width: 2.18em; height: 2.18em; border-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3); } +.login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button, .unlock-dialog .cancel-button, .unlock-dialog .switch-user-button, .unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 99px; width: 2.18em; height: 2.18em; border-color: #202020; background-color: #202020; } -.login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, .login-dialog .login-dialog-session-list-button StIcon { icon-size: 1.09em; } +.login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, .login-dialog .login-dialog-session-list-button StIcon, .unlock-dialog .cancel-button StIcon, .unlock-dialog .switch-user-button StIcon, .unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 1.09em; } -.login-dialog .caps-lock-warning-label, .login-dialog .login-dialog-message-warning { color: #eeeeec; } +.login-dialog .caps-lock-warning-label, .login-dialog .login-dialog-message-warning, .unlock-dialog .caps-lock-warning-label, .unlock-dialog .login-dialog-message-warning { color: #eeeeec; } .login-dialog-logo-bin { padding: 24px 0px; } @@ -978,15 +992,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .login-dialog-message { text-align: center; } -.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: #eeeeec; } -.login-dialog-not-listed-label { font-size: 9pt; font-weight: bold; color: #a6a69b; padding-top: 1em; } +.login-dialog-not-listed-label { font-size: 10pt; font-weight: bold; color: #a6a69b; padding-top: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; } @@ -996,7 +1008,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid #215d9c; } -.login-dialog-user-list-item { border-radius: 4px; padding: 6px; color: #a6a69b; } +.login-dialog-user-list-item { border-radius: 6px; padding: 6px; color: #a6a69b; } .login-dialog-user-list-item:ltr .user-widget { padding-right: 1em; } @@ -1008,19 +1020,19 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .user-widget-label { color: #eeeeec; } -.user-widget.horizontal .user-widget-label { font-size: 12pt; font-weight: bold; padding-left: 15px; } +.user-widget.horizontal .user-widget-label { font-size: 13pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { padding-left: 14px; text-align: left; } .user-widget.horizontal .user-widget-label:rtl { padding-right: 14px; text-align: right; } -.user-widget.vertical .user-widget-label { font-size: 15pt; text-align: center; font-weight: normal; padding-top: 16px; } +.user-widget.vertical .user-widget-label { font-size: 16pt; text-align: center; font-weight: normal; padding-top: 16px; } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 12px; width: 23em; } .login-dialog-prompt-entry { height: 1.5em; } -.login-dialog-prompt-label { color: #bebeb6; font-size: 11pt; padding-top: 1em; } +.login-dialog-prompt-label { color: #bebeb6; font-size: 12pt; padding-top: 1em; } /* Screen Shield */ .unlock-dialog-clock { color: white; font-weight: 300; text-align: center; spacing: 24px; padding-bottom: 2.5em; } @@ -1035,7 +1047,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .unlock-dialog-notifications-container .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } -.unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { padding: 12px 6px; border: none; background-color: rgba(46, 52, 54, 0.3); color: #eeeeec; border-radius: 0; } +.unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { padding: 12px 6px; border: none; background-color: rgba(46, 52, 54, 0.3); color: #eeeeec; border-radius: 4px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { background-color: rgba(46, 52, 54, 0.9); } @@ -1045,7 +1057,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .screen-shield-background { background: black; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } -#lockDialogGroup { background-color: #41494c; } +#lockDialogGroup { background-color: #282828; } #unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { background-color: rgba(0, 0, 0, 0.3); } @@ -1053,183 +1065,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg #unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(33, 93, 156, 0.5); } -/* 3rd party extensions */ -#panel.dashtopanelMainPanel.dashtopanelTop .panel-button { text-shadow: black 0 1px 1px; } - -#panel.dashtopanelMainPanel.dashtopanelTop .panel-button:hover { background-color: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .panel-button:active, #panel.dashtopanelMainPanel.dashtopanelTop .panel-button:overview, #panel.dashtopanelMainPanel.dashtopanelTop .panel-button:focus { background-color: #215d9c; } - -#panel.dashtopanelMainPanel.dashtopanelTop .show-apps { width: 32px; } - -#panel.dashtopanelMainPanel.dashtopanelTop .show-apps > .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:hover { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:focus { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:active { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:checked { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:overview { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .show-apps-icon { color: transparent; border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running1.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running1:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running2.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running2:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running3.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running3:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running4.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running4:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .panel-button { text-shadow: black 0 1px 1px; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:hover { background-color: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:active, #panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:overview, #panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:focus { background-color: #215d9c; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .show-apps { width: 32px; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .show-apps > .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:hover { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:focus { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:active { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:checked { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:overview { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .show-apps-icon { color: transparent; border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running1.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running1:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running2.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running2:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running3.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running3:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running4 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running4:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running4.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running4.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running4.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running4:hover .overview-icon { border-image: url("transparent.png"); } - stage { -st-icon-style: symbolic; } .toggle-switch { width: 48px; } @@ -1237,3 +1072,11 @@ stage { -st-icon-style: symbolic; } .toggle-switch-us, .toggle-switch-intl { background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); } .toggle-switch-us:checked, .toggle-switch-intl:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); } + +#panel.login-screen, #panel.unlock-screen, #panel:overview { background-color: #000; } + +#panel.login-screen .panel-corner, #panel.unlock-screen .panel-corner, #panel:overview .panel-corner { -panel-corner-opacity: 1; } + +#panel .panel-button { color: #fff !important; } + +.window-picker .icon-dropshadow { icon-shadow: none; background-color: #2e3436; padding: 12px; border-radius: 4px; } diff --git a/gnome-shell/src/gnome-shell-high-contrast.scss b/gnome-shell/src/gnome-shell-high-contrast.scss index ed52bbb..a6a5314 100644 --- a/gnome-shell/src/gnome-shell-high-contrast.scss +++ b/gnome-shell/src/gnome-shell-high-contrast.scss @@ -15,3 +15,28 @@ stage { background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); } } + +//force opaque panel +#panel { + &.login-screen, + &.unlock-screen, + &:overview { + background-color: #000; + + .panel-corner { + -panel-corner-opacity: 1; + } + } + + .panel-button { + color: #fff !important; + } +} + +//thumbnail app icons no dropshadow and forced color +.window-picker .icon-dropshadow { + icon-shadow: none; + background-color: $osd_bg_color; + padding: $base_padding * 2; + border-radius: $modal_radius; +} diff --git a/gnome-shell/src/gnome-shell-sass/_colors.scss b/gnome-shell/src/gnome-shell-sass/_colors.scss index 4bf9b4f..9d8f72f 100644 --- a/gnome-shell/src/gnome-shell-sass/_colors.scss +++ b/gnome-shell/src/gnome-shell-sass/_colors.scss @@ -1,12 +1,12 @@ // When color definition differs for dark and light variant, // it gets @if ed depending on $variant -$base_color: if($variant == 'light', #FFFFFF, #232729); -$bg_color: if($variant == 'light', #ebeced, #33393b); -$fg_color: if($variant == 'light', #2c2c2c, #eeeeec); +$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%)); +$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%)); +$fg_color: if($variant == 'light', #2e3436, #eeeeec); $selected_fg_color: #fff; -$selected_bg_color: #4a90d9; +$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%)); $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%)); $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93)); @@ -15,7 +15,7 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), li $top_hilight: $borders_edge; $warning_color: #f57900; -$error_color: #d35f5f; +$error_color: #ff8080; $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); @@ -28,6 +28,7 @@ $osd_borders_color: transparentize(black, 0.3); $osd_outer_borders_color: transparentize(white, 0.84); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); +$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/gnome-shell/src/gnome-shell-sass/_common.scss b/gnome-shell/src/gnome-shell-sass/_common.scss index fa5722c..929ebdc 100644 --- a/gnome-shell/src/gnome-shell-sass/_common.scss +++ b/gnome-shell/src/gnome-shell-sass/_common.scss @@ -31,9 +31,9 @@ $base_margin: 4px; $base_spacing: 6px; // border radii -$base_border_radius: 0; +$base_border_radius: 2px; -$modal_radius: 0; +$modal_radius:$base_border_radius * 2; // non-standard colors $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%)); @@ -50,7 +50,7 @@ $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%)); $active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%)); // fonts -$base_font_size: 10; +$base_font_size: 11; $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); // icons @@ -76,7 +76,7 @@ stage { %osd_panel { color: $osd_fg_color; background-color: $osd_bg_color; - border: 1px solid $osd_outer_borders_color; + //border: 1px solid $osd_outer_borders_color; border-radius: $base_border_radius * 2 + 4px; padding: $base_padding * 2; } @@ -85,16 +85,15 @@ stage { // for the dash and workspace switcher %overview_panel { color: $osd_fg_color; - background-color: transparentize($osd_bg_color, 0.2); - border: 1px solid $osd_outer_borders_color; + background-color: transparentize($osd_fg_color, 0.9); } // icon tiles %icon_tile { - border-radius: $base_border_radius; + border-radius: $base_border_radius + 4px; padding: $base_padding; border: 2px solid transparent; - transition-duration: 75ms; + transition-duration: 100ms; text-align: center; } @@ -136,23 +135,23 @@ stage { // radius is 2 pixel less to fit in bubble &:first-child { - border-radius: 0; + border-radius: 0 0 0 $modal_radius - 2px; } &:last-child { border-right-width: 0; - border-radius: 0; + border-radius: 0 0 $modal_radius - 2px 0; } &:first-child:last-child { - border-radius: 0; + border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px; } } // notification styling @mixin notification_bubble($flat: false) { - border-width: 0px; + border-width: 0; border-style: solid; border-radius: $base_border_radius; margin: $base_margin; diff --git a/gnome-shell/src/gnome-shell-sass/_drawing.scss b/gnome-shell/src/gnome-shell-sass/_drawing.scss index 29e3e6f..d5d959f 100644 --- a/gnome-shell/src/gnome-shell-sass/_drawing.scss +++ b/gnome-shell/src/gnome-shell-sass/_drawing.scss @@ -139,7 +139,7 @@ color: $tc; background-color: lighten($c, 3%); border-color: draw_border_color($c); - // @include draw_shadows($button_shadow); + @include draw_shadows($button_shadow); // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); text-shadow: 0 1px $text_shadow_color; icon-shadow: 0 1px $text_shadow_color; @@ -159,7 +159,7 @@ color: $tc; background-color: lighten($c, if($variant == 'light', 8%, 5%)); border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c)); - //@include draw_shadows($button_shadow); + @include draw_shadows($button_shadow); text-shadow: 0 1px $text_shadow_color; icon-shadow: 0 1px $text_shadow_color; } @@ -218,7 +218,8 @@ &:drop { .overview-icon { - background-color: transparentize($selected_bg_color, .15); + border: 2px solid $selected_bg_color; //already 2px transparent so no jumping + background-color: transparentize($selected_bg_color, .8); } } diff --git a/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss b/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss index 7101793..b34e0b1 100644 --- a/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss +++ b/gnome-shell/src/gnome-shell-sass/_high-contrast-colors.scss @@ -26,6 +26,7 @@ $osd_borders_color: rgba(0,0,0, 0.7); $osd_outer_borders_color: rgba(255,255,255, 0.1); $shadow_color: rgba(0,0,0, 0.1); +$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/gnome-shell/src/gnome-shell-sass/_widgets.scss b/gnome-shell/src/gnome-shell-sass/_widgets.scss index 55d32d5..a8d0aa9 100644 --- a/gnome-shell/src/gnome-shell-sass/_widgets.scss +++ b/gnome-shell/src/gnome-shell-sass/_widgets.scss @@ -37,8 +37,8 @@ @import 'widgets/window-picker'; @import 'widgets/search-entry'; @import 'widgets/search-results'; -@import 'widgets/app-grid'; @import 'widgets/dash'; +@import 'widgets/app-grid'; @import 'widgets/workspace-thumbnails'; // A11y / misc @import 'widgets/a11y'; @@ -49,7 +49,3 @@ // Lock / login screens @import 'widgets/login-dialog'; @import 'widgets/screen-shield'; - -/* 3rd party extensions */ - -@import 'widgets/third-party'; diff --git a/gnome-shell/src/gnome-shell-sass/gnome-shell-sass.doap b/gnome-shell/src/gnome-shell-sass/gnome-shell-sass.doap new file mode 100644 index 0000000..f18ec1b --- /dev/null +++ b/gnome-shell/src/gnome-shell-sass/gnome-shell-sass.doap @@ -0,0 +1,37 @@ + + + GNOME Shell Sass + Sass sources of GNOME Shell + GNOME Shell Sass is a project intended to allow the sharing of the + sass theme sources between gnome-shell and other projects like gnome-shell-extensions. + + + sass + css + + + + Carlos Soriano + + csoriano + + + + + Florian Müllner + + fmuellner + + + + + Jakub Steiner + + jimmac + + + diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_app-grid.scss b/gnome-shell/src/gnome-shell-sass/widgets/_app-grid.scss index 1d32ac0..4b6496a 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_app-grid.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_app-grid.scss @@ -4,10 +4,14 @@ $app_icon_size: 96px; // app icons .icon-grid { - row-spacing: $base_spacing * 6; - column-spacing: $base_spacing * 6; + row-spacing: $base_spacing * 2; + column-spacing: $base_spacing * 2; max-row-spacing: $base_spacing * 12; max-column-spacing: $base_spacing * 12; + page-padding-top: $base_padding * 4; + page-padding-bottom: $base_padding * 4; + page-padding-left: $base_padding * 2; + page-padding-right: $base_padding * 2; } /* App Icons */ @@ -30,16 +34,15 @@ $app_grid_fg_color: #fff; /* App Folders */ .app-well-app.app-folder { - background-color: transparentize($osd_bg_color, 0.8); + background-color: darken($system_bg_color, 3%); border-radius: $base_border_radius + 4px; // same as %icon_tile } // expanded folder -.app-folder-dialog { +.app-folder-dialog { //style like the dash border-radius: $modal_radius * 1.5; - border: 1px solid $osd_outer_borders_color; - padding: 12px; - background-color: transparentize(darken($osd_bg_color,10%), 0.05); + background-color: $dash_background_color; + padding: 12px 0px 12px 0px; & .folder-name-container { padding: 24px 36px 0; @@ -71,14 +74,14 @@ $app_grid_fg_color: #fff; & .icon-grid { row-spacing: $base_spacing * 2; column-spacing: $base_spacing * 5; + page-padding-top: 0; + page-padding-bottom: 0; + page-padding-left: 0; + page-padding-right: 0; } & .page-indicators { margin-bottom: 18px; - - .page-indicator { - padding: 15px 12px; - } } } .app-folder-dialog-container { @@ -87,12 +90,6 @@ $app_grid_fg_color: #fff; height: 620px; } -.app-folder-icon { - padding: $base_padding; - spacing-rows: $base_spacing; - spacing-columns: $base_spacing; -} - // Running app indicator (also shown in dash) .app-well-app-running-dot { height: 5px; @@ -118,7 +115,7 @@ $app_grid_fg_color: #fff; // App Grid pagination indicators .page-indicator { - padding: 15px 20px; + padding: $base_padding $base_padding * 2 0; .page-indicator-icon { width: 10px; @@ -128,10 +125,8 @@ $app_grid_fg_color: #fff; } } -// Some hacks I don't even know -.all-apps { - // horizontal padding to make sure scrollbars or dash don't overlap content - padding: 0px 88px 10px 88px; +.apps-scroll-view { + padding: 0; } // shutdown and other actions in the grid @@ -141,3 +136,33 @@ $app_grid_fg_color: #fff; border-radius: 99px; icon-size: $app_icon_size * 0.5; } + +.page-navigation-hint { + width: 300px; + + &.dnd { + background: rgba(255, 255, 255, 0.1); + } + + &.next:ltr, + &.previous:rtl { + background-gradient-start: rgba(255, 255, 255, 0.05); + background-gradient-end: transparent; + background-gradient-direction: horizontal; + border-radius: 15px 0px 0px 15px; + } + + &.previous:ltr, + &.next:rtl { + background-gradient-start: transparent; + background-gradient-end: rgba(255, 255, 255, 0.05); + background-gradient-direction: horizontal; + border-radius: 0px 15px 15px 0px; + } +} + +.page-navigation-arrow { + margin: 6px; + width: 24px; + height: 24px; +} diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_base.scss b/gnome-shell/src/gnome-shell-sass/widgets/_base.scss index 914dd59..69ebb30 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_base.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_base.scss @@ -14,5 +14,5 @@ // Dropshadow for large icons .icon-dropshadow { - icon-shadow: 0 1px 2px rgba(black, 0.4); + icon-shadow: 0 1px 5px rgba(black, 0.8); } diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss b/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss index 3640acf..57decf5 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_calendar.scss @@ -1,11 +1,11 @@ /* Date/Time Menu */ .clock-display-box { - spacing: $base_spacing / 2; + spacing: 2px; .clock { - padding-left: $base_padding; - padding-right: $base_padding; + padding-left: $base_padding * 2; + padding-right: $base_padding * 2; } } @@ -94,14 +94,13 @@ height: $calendar_day_size; padding: 0; margin: 2px; - border-radius: $base_border_radius; //$calendar_day_size * 0.5 + 2px; + border-radius: $base_border_radius; border: 1px solid transparent; //avoid jumparound due to today font-feature-settings: "tnum"; &:hover, &:focus { background-color: $hover_bg_color; } &:active,&:selected { color: lighten($fg_color,10%); background-color: darken($bg_color,5%); - box-shadow: inset 0 1px transparentize(white, 0.9); } // day of week heading @@ -154,7 +153,7 @@ } .calendar-day-with-events { - background-image: url("calendar-today.svg"); + background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); &.calendar-work-day { color: lighten($fg_color,10%); font-weight: bold; @@ -170,7 +169,7 @@ font-weight: bold; height: 1.8em; width: 2.3em; - border-radius: $base_border_radius; + border-radius: 2px; margin: 6px; background-color: darken($bg_color, 2%); color: lighten($fg_color, 5%); diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_check-box.scss b/gnome-shell/src/gnome-shell-sass/widgets/_check-box.scss index 6e54b1b..fc71467 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_check-box.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_check-box.scss @@ -4,14 +4,15 @@ $check_height: 22px; $check_width: 24px; + .check-box { StBoxLayout { spacing: .8em; } StBin { width: $check_width; height: $check_height; - background-image: url("checkbox-off.svg"); + background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); } - &:focus StBin { background-image: url("checkbox-off-focused.svg"); } - &:checked StBin { background-image: url("checkbox.svg"); } - &:focus:checked StBin { background-image: url("checkbox-focused.svg"); } -} + &:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); } + &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } + &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } +} \ No newline at end of file diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_dash.scss b/gnome-shell/src/gnome-shell-sass/widgets/_dash.scss index a21e37b..25d7e63 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_dash.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_dash.scss @@ -1,22 +1,18 @@ /* Dash */ -$dash_placeholder_size: 24px; -$dash_spacing: $base_padding + 2px; -$dash_border_radius: $modal_radius; +$dash_background_color: #3b3b3b; +$dash_placeholder_size: 32px; +$dash_padding: $base_padding; //+ 4px; // 10px +$dash_spacing: $base_padding; // / 4; + +$dash_bottom_margin: 0; //$base_margin * 4; + +$dash_border_radius: $modal_radius $modal_radius 0 0; #dash { - //@extend %overview_panel; - background-color: transparent; - border: none; @include fontsize($base_font_size - 2); - padding: ($dash_spacing / 2) 0; - - border-radius: 0 $dash_border_radius $dash_border_radius 0; - //border-left-width: 0; - &:rtl { - border-radius: $dash_border_radius 0 0 $dash_border_radius; - border-right-width: 0; - } + margin-top: $base_spacing * 2; + padding: 0 $dash_padding; .placeholder { // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); @@ -29,23 +25,38 @@ $dash_border_radius: $modal_radius; width: $dash_placeholder_size; height: $dash_placeholder_size; } + + .overview-icon { + padding: $dash_padding / 2; + } +} + +.dash-background { + background-color: transparent; //$dash_background_color; + margin-bottom: $dash_bottom_margin; + padding: $dash_padding; + border-radius: $dash_border_radius; } // Dash Items -.dash-item-container > StWidget { - padding: ($dash_spacing / 2) $dash_spacing; +.dash-item-container .app-well-app, .show-apps { + padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin; +} + +.dash-separator { + width: 1px; + margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin; + background-color: transparentize($osd_fg_color,0.7); } // OSD Tooltip .dash-label { - background-color: transparentize($osd_bg_color,0.05); - border-radius: $base_border_radius; - border:none; - box-shadow:0 0 0 1px $osd_outer_borders_color; color: $osd_fg_color; - padding: $base_padding $base_padding + 2px; + background-color: $osd_bg_color; + border-radius: $base_border_radius; + padding: $base_padding $base_padding * 2; text-align: center; - -x-offset: $base_margin * 2; // distance from the dash edge + -y-offset: $base_margin * 3; // distance from the dash edge } // Show apps button @@ -55,9 +66,8 @@ $dash_border_radius: $modal_radius; &:focus, &:checked { .overview-icon { - background-color: darken($osd_bg_color,10%); + background-color: transparentize($osd_bg_color,0.5); color: $fg_color; } } } - diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss index 0f568b7..6eb1cc1 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_dialogs.scss @@ -162,3 +162,12 @@ .audio-selection-device-icon { icon-size: $base_icon_size * 4; } + +/* Welcome dialog */ +.welcome-dialog-image { + background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg"); + background-size: contain; + /* Reasonable maximum dimensions */ + height: 300px; + width: 300px; +} diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_login-dialog.scss b/gnome-shell/src/gnome-shell-sass/widgets/_login-dialog.scss index 06fdcf2..d6608fc 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_login-dialog.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_login-dialog.scss @@ -5,18 +5,19 @@ max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { //reset border: none; background-color: transparent; - $_gdm_bg: lighten(#2e3436, 19%); + $_gdm_bg: $system_bg_color; StEntry { @if $variant=='dark' { - $_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5); + $_gdm_entry_bg: darken($system_bg_color, 3%); background-color: $_gdm_entry_bg; - color: $osd_fg_color; + color: $fg_color; } } @@ -24,9 +25,9 @@ .modal-dialog-button { padding: 4px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); - background-color: $_gdm_bg; - border-color: $_gdm_bg; - color: $fg_color; + background-color: darken($system_bg_color, 3%); + border-color: darken($system_bg_color, 3%); + color: $osd_fg_color; $_hover_c: lighten($_gdm_bg, 5%); &:hover, &:focus { @@ -43,7 +44,7 @@ @include button(insensitive); border-color: darken($_gdm_bg, 5%); background-color: darken($_gdm_bg, 5%); - color: transparentize($fg_color, 0.3); + color: transparentize($osd_fg_color, 0.3); } &:default { @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); @@ -76,8 +77,8 @@ border-radius: 99px; width: $base_icon_size * 2; height: $base_icon_size * 2; - border-color: transparentize($bg_color,0.7); - background-color: transparentize($bg_color,0.7); + border-color: darken($system_bg_color, 3%); + background-color: darken($system_bg_color, 3%); StIcon { icon-size: $base_icon_size; } } @@ -92,7 +93,6 @@ .login-dialog-banner { color: darken($osd_fg_color,10%); } .login-dialog-button-box { width: 23em; spacing: 5px; } .login-dialog-message { text-align: center; } -.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } .login-dialog-user-selection-box { padding: 100px 0px; } .login-dialog-not-listed-label { padding-left: 2px; diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_looking-glass.scss b/gnome-shell/src/gnome-shell-sass/widgets/_looking-glass.scss index 4f627e2..006c2ef 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_looking-glass.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_looking-glass.scss @@ -106,4 +106,4 @@ $text_fg_color: #ccc; border: 1px solid $osd_borders_color; border-radius: $base_border_radius; padding: 6px; -} +} \ No newline at end of file diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell/src/gnome-shell-sass/widgets/_message-list.scss index 45edb26..02d122b 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_message-list.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_message-list.scss @@ -99,7 +99,7 @@ /* Media Controls */ .message-media-control { - padding: $base_padding * 2 $base_padding * 4; + padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px color: darken($fg_color, 15%); // uses $hover_bg_color since the media controls are in a notification_bubble diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss b/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss index 96dd4d1..0fe174a 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_misc.scss @@ -9,7 +9,7 @@ background-size: contain; color: $osd_fg_color; border-radius: 99px; - border: 2px $osd_fg_color; + icon-size: $base_icon_size * 4; // 64px &:hover { color: lighten($osd_fg_color,30%); } @@ -17,6 +17,12 @@ & StIcon { background-color: transparentize($osd_fg_color,0.95); border-radius: 99px; + padding: $base_padding * 2 ; // 12px + width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px; + } + + &.user-avatar { + border: 2px $osd_fg_color; } } @@ -31,15 +37,6 @@ } } -.user-widget.horizontal .user-icon { - icon-size: $base_icon_size * 4; // 64px - - & StIcon { - padding: $base_padding * 2 ; // 12px - width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px; - } -} - .lightbox { background-color: black; } .flashspot { background-color: white; } @@ -54,3 +51,9 @@ @include fontsize($base_font_size - 1); color: $warning_color; } + +/* Workspace animation */ + +.workspace-animation { + background-color: $system_bg_color; +} diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_overview.scss b/gnome-shell/src/gnome-shell-sass/widgets/_overview.scss index 18497de..c593ceb 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_overview.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_overview.scss @@ -1,10 +1,13 @@ /* OVERVIEW */ -#overview { - spacing: 24px; - background-color: transparent; +.controls-manager, .secondary-monitor-workspaces { + spacing: $base_spacing * 2; +} + +#overviewGroup { + background-color: $system_bg_color; } .overview-controls { padding-bottom: 32px; -} \ No newline at end of file +} diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_panel.scss b/gnome-shell/src/gnome-shell-sass/widgets/_panel.scss index 37442b8..3d39758 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_panel.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_panel.scss @@ -5,22 +5,23 @@ $panel_corner_radius: 0; $panel_bg_color: if($variant == 'dark', darken($bg_color, 10%), $bg_color); $panel_fg_color: $fg_color; $panel_height: 1.86em; +$panel_transition_duration: 250ms; // same as the overview transition duration #panel { background-color: $panel_bg_color; font-weight: bold; height: $panel_height; font-feature-settings: "tnum"; + transition-duration: $panel_transition_duration; // transparent panel on lock & login screens &.unlock-screen, - &.login-screen { + &.login-screen, + &:overview { background-color: transparent; .panel-corner { - -panel-corner-radius: 0; - -panel-corner-background-color: transparent; - -panel-corner-border-color: transparent; + -panel-corner-opacity: 0; } } @@ -35,10 +36,8 @@ $panel_height: 1.86em; -panel-corner-background-color: $panel_bg_color; -panel-corner-border-width: 0px; -panel-corner-border-color: transparent; - - &:active, &:overview, &:focus { - -panel-corner-border-color: lighten($selected_bg_color,5%); - } + -panel-corner-opacity: 0; + transition-duration: $panel_transition_duration; } // panel menus @@ -47,55 +46,73 @@ $panel_height: 1.86em; color: $panel_fg_color; -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding; + transition-duration: 150ms; + border: 0px solid transparent; + border-radius: 0; - &:hover { + &.clock-display { + .clock { + transition-duration: 150ms; + border: 0px solid transparent; + border-radius: 0; + } + } + + &:hover, &:active, &:overview, &:focus, &:checked { color: lighten($panel_fg_color, 20%); background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px transparentize(white, 0.4); - } - &:active, &:overview, &:focus, &:checked { - color: lighten($panel_fg_color, 20%); + // The clock display needs to have the background on .clock because + // we want to exclude the do-not-disturb indicator from the background + &.clock-display { + box-shadow: none; + + .clock { + color: lighten($panel_fg_color, 20%); + background-color: rgba(0, 0, 0, 0.01); + box-shadow: inset 0 -2px 0px transparentize(white, 0.4); + } + } } // status area icons .system-status-icon { icon-size: $base_icon_size; padding: $base_padding - 1px; + margin: 0 $base_margin; + } + + .panel-status-indicators-box .system-status-icon, + .panel-status-menu-box .system-status-icon { + margin: 0; } // app menu icon .app-menu-icon { - margin-left: $base_margin; - margin-right: $base_margin; -st-icon-style: symbolic; // dimensions of the icon are hardcoded } - // lock & login screen styles - .unlock-screen &, - .login-screen & { - color: lighten($fg_color, 10%); - &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } - } - } - - .panel-button { - &:active, &:overview, &:focus, &: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 -2px 0px $selected_bg_color; + &#panelActivities { + -natural-hpadding: $base_padding * 3; } } - .panel-button.clock-display { - // Move highlight from .panel-button to .clock - &:active, &:overview, &:focus, &:checked { - box-shadow: none; - - .clock { - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%); + &.unlock-screen, + &.login-screen, + &:overview { + .panel-button { + &:hover, &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); + + &.clock-display { + box-shadow: none; + + .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); + } + } } } } @@ -121,28 +138,7 @@ $panel_height: 1.86em; .label-shadow { color: transparent; } } -// Activities button -#panel #panelActivities.panel-button { - > * { - background-image: url("activities.svg"); - background-position: center top; - width: 24px; - height: 24px; - background-color: transparent !important; - background-gradient-direction: none !important; - border: 0 solid transparent !important; - text-shadow: 0 0 transparent !important; - transition-duration: 0ms !important; - box-shadow: none !important; - color: transparent; - } - - &:active, &:overview, &:focus, &:checked { - background-color: transparent; - box-shadow: none; - border-bottom-width: 1px; - border-color: transparent; - - > * { background-image: url("activities-active.svg"); } - } +#appMenu .panel-status-menu-box { + padding: 0 $base_padding; + spacing: $base_spacing; } diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell/src/gnome-shell-sass/widgets/_popovers.scss index 1e27b70..b89a56f 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_popovers.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_popovers.scss @@ -4,12 +4,12 @@ $popover_arrow_height: 12px; //.the popover itself .popup-menu-boxpointer { - -arrow-border-radius: $base_border_radius + 2; + -arrow-border-radius: $base_border_radius+2; -arrow-background-color: $bg_color; -arrow-border-width: 1px; -arrow-border-color: $borders_color; - -arrow-base: $popover_arrow_height; - -arrow-rise: 6px; //$popover_arrow_height - 6; + -arrow-base: $popover_arrow_height; //* 2; + -arrow-rise: 6px; //$popover_arrow_height; -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995 } @@ -20,7 +20,7 @@ $popover_arrow_height: 12px; //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is &.panel-menu { - -boxpointer-gap: 0; //$base_margin; // distance from the panel + -boxpointer-gap: 0; // $base_margin; // distance from the panel margin-bottom: 1.75em; } } diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_screen-shield.scss b/gnome-shell/src/gnome-shell-sass/widgets/_screen-shield.scss index 00c549a..e289fdb 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_screen-shield.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_screen-shield.scss @@ -66,7 +66,7 @@ } #lockDialogGroup { - background-color: lighten(#2e3436, 8%); + background-color: $system_bg_color; } #unlockDialogNotifications { diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_search-entry.scss b/gnome-shell/src/gnome-shell-sass/widgets/_search-entry.scss index 0008ce0..d316bba 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_search-entry.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_search-entry.scss @@ -9,8 +9,10 @@ $search_entry_height: 36px; padding: $base_padding+1 $base_padding+3; border-radius: $base_border_radius; //$search_entry_height * 0.5; // half the height color: transparentize($fg_color,0.3); - background-color: transparentize(white, 0.8); //$base_color; - border-color: transparent; //$borders_color; + background-color: transparentize(white, 0.8); + border-color: transparent; + margin-top: $base_spacing * 2; + margin-bottom: $base_spacing; box-shadow: inset 0 1px transparentize(white, 0.9); &:hover { diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_slider.scss b/gnome-shell/src/gnome-shell-sass/widgets/_slider.scss index 5f7309f..f21d62e 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_slider.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_slider.scss @@ -24,4 +24,4 @@ $slider_size: 15px; color: if($variant == 'light', lighten($bg_color, 10%), $fg_color); &:hover { color: $hover_bg_color; } &:active { color: $active_bg_color; } -} +} \ No newline at end of file diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_switches.scss b/gnome-shell/src/gnome-shell-sass/widgets/_switches.scss index 429c864..4e3a529 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_switches.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_switches.scss @@ -1,16 +1,16 @@ /* Switches */ // these are equal to the size of the SVG assets -$switch_height: 24px; -$switch_width: 56px; +$switch_height: 22px; +$switch_width: 46px; .toggle-switch { color: $fg_color; height: $switch_height; width: $switch_width; background-size: contain; - background-image: if($variant == 'light', url("toggle-off.svg"),url("toggle-off-dark.svg")); - &:checked { - background-image: if($variant == 'light', url("toggle-on.svg"),url("toggle-on-dark.svg")); + background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.svg"),url("resource:///org/gnome/shell/theme/toggle-off-dark.svg")); + &:checked { + background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on.svg"),url("resource:///org/gnome/shell/theme/toggle-on-dark.svg")); } } diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_window-picker.scss b/gnome-shell/src/gnome-shell-sass/widgets/_window-picker.scss index 6d4b285..26c9086 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_window-picker.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_window-picker.scss @@ -3,62 +3,51 @@ $window_picker_spacing: $base_spacing; // 6px $window_picker_padding: $base_padding * 2; // 12px -$window_thumbnail_border_color:transparentize($selected_fg_color, 0.65); +$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4); $window_close_button_size: 24px; $window_close_button_padding: 3px; -$window_clone_border_size: 6px; - // Window picker .window-picker { // Space between window thumbnails spacing: $window_picker_spacing; - // Padding for container around window thumbnails - padding: $window_picker_padding; - - &.external-monitor { padding: $window_picker_padding; } -} - -// Borders on window thumbnails -.window-clone-border { - border-width: $window_clone_border_size; - border-style: solid; - border-color: $window_thumbnail_border_color; - border-radius: $base_border_radius + 2; - // 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 transparentize($borders_color, 0.8); } // Window titles .window-caption { color: $osd_fg_color; background-color: $osd_bg_color; - border:1px solid $osd_outer_borders_color; - border-radius: $base_border_radius + 1; + border-radius: $base_border_radius; padding: $base_padding $base_padding * 2; - font-weight: bold; - @include fontsize($base_font_size + 1); } // Close button .window-close { - background-color: darken($error_color, 8%); //$selected_bg_color; - color: $selected_fg_color; - border: none; + background-color: darken($error_color, 8%); //$osd_bg_color; + color: $osd_fg_color; border-radius: $base_border_radius; //$window_close_button_size * 0.5 + $window_close_button_padding * 2; padding: $window_close_button_padding; height: $window_close_button_size; width: $window_close_button_size; box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5); + transition-duration: 150ms; + + & StIcon { icon-size: 24px; } &:hover { - background-color: $error_color; //lighten($selected_bg_color, 5%); + background-color: $error_color; //lighten($osd_bg_color, 15%); } &:active { - background-color: darken($error_color, 10%); //darken($selected_bg_color, 5%); + color: transparentize($osd_fg_color, 0.2); + background-color: darken($error_color, 10%); //darken($osd_bg_color, 5%); } } + +.workspace-background { + // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js + border-radius: 30px; + background-color: $osd_bg_color; + box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7); +} diff --git a/gnome-shell/src/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/gnome-shell/src/gnome-shell-sass/widgets/_workspace-thumbnails.scss index a05173a..774408b 100644 --- a/gnome-shell/src/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/gnome-shell/src/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -2,24 +2,20 @@ // thumbnails in overview .workspace-thumbnails { - @extend %overview_panel; visible-width: 32px; //amount visible before hover spacing: $base_spacing; padding: $base_padding; - border-radius: $modal_radius 0 0 $modal_radius; - border-right-width: 0; - - &:rtl { - border-radius: 0 $modal_radius $modal_radius 0; - border-left-width: 0; + .workspace-thumbnail { + @extend %overview_panel; + border-radius: 3px; } // drag and drop indicator .placeholder { - background-image: url("dash-placeholder.svg"); + background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); background-size: contain; - height: 24px; + width: 18px; } } diff --git a/gnome-shell/src/gnome-shell-start.svg b/gnome-shell/src/gnome-shell-start.svg new file mode 100644 index 0000000..af139cf --- /dev/null +++ b/gnome-shell/src/gnome-shell-start.svg @@ -0,0 +1,343 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gnome-shell/src/gnome-shell.css b/gnome-shell/src/gnome-shell.css index 7fd7a24..203e426 100644 --- a/gnome-shell/src/gnome-shell.css +++ b/gnome-shell/src/gnome-shell.css @@ -1,60 +1,60 @@ /* 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. */ /* Global Values */ -stage { font-size: 10pt; color: #eeeeec; } +stage { font-size: 11pt; color: #eeeeec; } /* Common Stylings */ .search-statustext { font-size: 2em; font-weight: bold; color: #eeeeec; } -.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { color: #eeeeec; background-color: rgba(32, 32, 32, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; padding: 12px; } +.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window { color: #eeeeec; background-color: rgba(32, 32, 32, 0.96); border-radius: 8px; padding: 12px; } -.workspace-thumbnails { color: #eeeeec; background-color: rgba(32, 32, 32, 0.76); border: 1px solid rgba(255, 255, 255, 0.16); } +.workspace-thumbnails .workspace-thumbnail { color: #eeeeec; background-color: rgba(238, 238, 236, 0.1); } -.show-apps .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .list-search-result, .search-provider-icon { border-radius: 0; padding: 6px; border: 2px solid transparent; transition-duration: 75ms; text-align: center; } +.app-well-app .overview-icon, .grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon { border-radius: 6px; padding: 6px; border: 2px solid transparent; transition-duration: 100ms; text-align: center; } -.modal-dialog { color: #eeeeec; background-color: #33393b; border: 1px solid #202425; } +.modal-dialog { color: #eeeeec; background-color: #353535; border: 1px solid #202020; } -.app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 0; border-style: solid; border-width: 1px; min-height: 22px; padding: 3px 24px; color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.app-folder-dialog .folder-name-container .edit-folder-button, .button { border-radius: 2px; border-style: solid; border-width: 1px; min-height: 22px; padding: 3px 24px; color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { 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(74, 144, 217, 0.6); } +.app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(27, 106, 203, 0.6); } -.app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { color: #919494; border-color: #212527; background-color: #2d3234; box-shadow: none; text-shadow: none; icon-shadow: none; } +.app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive { color: #919190; border-color: #252526; background-color: #323132; box-shadow: none; text-shadow: none; icon-shadow: none; } -.app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } -.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; border-style: solid; border-width: 1px; border-left-width: 0; border-bottom-width: 0; } +.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button { color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: none; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; border-style: solid; border-width: 1px; border-left-width: 0; border-bottom-width: 0; } -.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { color: #919494; border-color: #212527; background-color: #2d3234; box-shadow: none; text-shadow: none; icon-shadow: none; } +.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { color: #919190; border-color: #252526; background-color: #323132; box-shadow: none; text-shadow: none; icon-shadow: none; } -.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: none; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(27, 106, 203, 0.6); } -.modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } -.modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { border-radius: 0; } +.modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child { border-radius: 0 0 0 2px; } -.modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { border-right-width: 0; border-radius: 0; } +.modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child { border-right-width: 0; border-radius: 0 0 2px 0; } -.modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { border-radius: 0; } +.modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child { border-radius: 0 0 2px 2px; } /* WIDGETS */ -.shell-link { color: #9ec4eb; } +.shell-link { color: #629fea; } -.shell-link:hover { color: #c8def4; } +.shell-link:hover { color: #8fbbf0; } .lowres-icon { icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } -.icon-dropshadow { icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } +.icon-dropshadow { icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.8); } /* Entries */ -StEntry { border-radius: 0; padding: 8px; border-width: 1px; color: #eeeeec; background-color: #232729; border-color: #202425; selection-background-color: #4a90d9; selected-color: #fff; } +StEntry { border-radius: 2px; padding: 8px; border-width: 1px; color: #eeeeec; background-color: #2d2c2e; border-color: #202020; selection-background-color: #1b6acb; selected-color: #fff; } -StEntry:focus { border-color: #184472; box-shadow: inset 0 0 0 1px #4a90d9; } +StEntry:focus { border-color: #092444; box-shadow: inset 0 0 0 1px #1b6acb; } -StEntry:insensitive { color: #919494; border-color: #2d3234; box-shadow: none; } +StEntry:insensitive { color: #919190; border-color: #323132; box-shadow: none; } StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #f57900; padding: 0 4px; } @@ -66,25 +66,25 @@ StEntry StLabel.hint-text { margin-left: 2px; color: rgba(238, 238, 236, 0.7); } /* Check Boxes */ .check-box StBoxLayout { spacing: .8em; } -.check-box StBin { width: 24px; height: 22px; background-image: url("checkbox-off.svg"); } +.check-box StBin { width: 24px; height: 22px; background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg"); } -.check-box:focus StBin { background-image: url("checkbox-off-focused.svg"); } +.check-box:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); } -.check-box:checked StBin { background-image: url("checkbox.svg"); } +.check-box:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } -.check-box:focus:checked StBin { background-image: url("checkbox-focused.svg"); } +.check-box:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } /* Switches */ -.toggle-switch { color: #eeeeec; height: 24px; width: 56px; background-size: contain; background-image: url("toggle-off-dark.svg"); } +.toggle-switch { color: #eeeeec; height: 22px; width: 46px; background-size: contain; background-image: url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"); } -.toggle-switch:checked { background-image: url("toggle-on-dark.svg"); } +.toggle-switch:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"); } /* Slider */ -.slider { height: 15px; -barlevel-height: 3px; -barlevel-background-color: #202425; -barlevel-border-width: 1px; -barlevel-border-color: #202425; -barlevel-active-background-color: #4a90d9; -barlevel-active-border-color: #5295db; -barlevel-overdrive-color: #b2161d; -barlevel-overdrive-border-color: #bc171e; -barlevel-overdrive-separator-width: 1px; -slider-handle-radius: 7.5px; -slider-handle-border-width: 1px; -slider-handle-border-color: #eeeeec; color: #eeeeec; } +.slider { height: 15px; -barlevel-height: 3px; -barlevel-background-color: #202020; -barlevel-border-width: 1px; -barlevel-border-color: #202020; -barlevel-active-background-color: #1b6acb; -barlevel-active-border-color: #1c6fd4; -barlevel-overdrive-color: #b2161d; -barlevel-overdrive-border-color: #bc171e; -barlevel-overdrive-separator-width: 1px; -slider-handle-radius: 7.5px; -slider-handle-border-width: 1px; -slider-handle-border-color: #eeeeec; color: #eeeeec; } -.slider:hover { color: #3f4649; } +.slider:hover { color: #424242; } -.slider:active { color: #1e2122; } +.slider:active { color: #1e1e1e; } /* Scrollbars */ StScrollView.vfade { -st-vfade-offset: 68px; } @@ -97,14 +97,14 @@ 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: #a3a6a5; margin: 3px; } +StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 8px; background-color: #a4a4a3; margin: 3px; } -StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: #c9cac9; } +StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { background-color: #c9c9c7; } -StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #4a90d9; } +StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #1b6acb; } /* Popovers/Menus */ -.popup-menu-boxpointer, .candidate-popup-boxpointer { -arrow-border-radius: 2; -arrow-background-color: #33393b; -arrow-border-width: 1px; -arrow-border-color: #202425; -arrow-base: 12px; -arrow-rise: 6px; -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } +.popup-menu-boxpointer, .candidate-popup-boxpointer { -arrow-border-radius: 4px; -arrow-background-color: #353535; -arrow-border-width: 1px; -arrow-border-color: #202020; -arrow-base: 12px; -arrow-rise: 6px; -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .popup-menu { min-width: 15em; color: #eeeeec; } @@ -118,11 +118,11 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .popup-menu-item:rtl { padding-right: 0; padding-left: 1.75em; } -.popup-menu-item:checked { background-color: #383e40; box-shadow: none; } +.popup-menu-item:checked { background-color: #3a3a3a; box-shadow: none; } .popup-menu-item.selected { background-color: rgba(255, 255, 255, 0.1); color: #eeeeec; } -.popup-menu-item:active { background-color: #4a90d9; color: #fff; } +.popup-menu-item:active { background-color: #1b6acb; color: #fff; } .popup-menu-item:insensitive { color: rgba(238, 238, 236, 0.5); } @@ -132,7 +132,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .popup-menu-arrow, .popup-menu-icon { icon-size: 1.09em; } -.popup-sub-menu { background-color: #2c3133; box-shadow: none; border-top: 1px solid rgba(32, 36, 37, 0.8); border-bottom: 1px solid rgba(32, 36, 37, 0.8); } +.popup-sub-menu { background-color: #2d2d2d; box-shadow: none; border-top: 1px solid rgba(32, 32, 32, 0.8); border-bottom: 1px solid rgba(32, 32, 32, 0.8); } .popup-menu-ornament { width: 1.2em; } @@ -142,9 +142,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .popup-separator-menu-item { padding: 0; } -.popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; margin: 6px 64px; background-color: #25292b; } +.popup-separator-menu-item .popup-separator-menu-item-separator { height: 1px; margin: 6px 64px; background-color: #262626; } -.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { margin: 0 64px 0 32px; background-color: #4b5356; } +.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator { margin: 0 64px 0 32px; background-color: #4e4e4e; } .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } @@ -157,13 +157,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl { padding-right: 14px; margin-right: 1.09em; } /* Date/Time Menu */ -.clock-display-box { spacing: 3px; } +.clock-display-box { spacing: 2px; } -.clock-display-box .clock { padding-left: 6px; padding-right: 6px; } +.clock-display-box .clock { padding-left: 12px; padding-right: 12px; } #calendarArea { padding: 0; } -.datemenu-calendar-column { spacing: 6px; border: 0 solid #2c3133; padding: 0 12px; } +.datemenu-calendar-column { spacing: 6px; border: 0 solid #2d2d2d; padding: 0 12px; } .datemenu-calendar-column:ltr { margin-right: 8px; border-left-width: 1px; } @@ -171,53 +171,53 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .datemenu-calendar-column .datemenu-displays-box { spacing: 6px; } -.events-section-title { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); text-shadow: none; icon-shadow: none; color: #878787; font-weight: bold; padding: .4em; } +.events-section-title { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); text-shadow: none; icon-shadow: none; color: #878787; font-weight: bold; padding: .4em; } -.events-section-title:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.events-section-title:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(27, 106, 203, 0.6); } -.events-section-title:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.events-section-title:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.events-section-title:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.events-section-title:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } /* today button (the date) */ -.datemenu-today-button { border-width: 0px; border-style: solid; border-radius: 0; 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; padding: 9px; } +.datemenu-today-button { border-width: 0; border-style: solid; border-radius: 2px; 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; padding: 9px; } -.datemenu-today-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.datemenu-today-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(27, 106, 203, 0.6); } -.datemenu-today-button:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.datemenu-today-button:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.datemenu-today-button:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.datemenu-today-button:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } -.datemenu-today-button .day-label { font-size: 11pt; font-weight: bold; } +.datemenu-today-button .day-label { font-size: 12pt; font-weight: bold; } -.datemenu-today-button .date-label { font-size: 17pt; font-weight: 1000; } +.datemenu-today-button .date-label { font-size: 18pt; font-weight: 1000; } /* Calendar */ -.calendar { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 6px; } +.calendar { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 6px; } -.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(74, 144, 217, 0.6); } +.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(27, 106, 203, 0.6); } -.calendar:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.calendar:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); 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: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.calendar:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } .calendar .calendar-month-label { color: #fafaf9; font-weight: bold; padding: 8px 0; } .calendar .calendar-change-month-back StIcon, .calendar .calendar-change-month-forward StIcon { icon-size: 1.09em; } -.calendar .pager-button { background-color: transparent; height: 32px; width: 32px; border-radius: 0; } +.calendar .pager-button { background-color: transparent; height: 32px; width: 32px; border-radius: 2px; } -.calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #4b5356; } +.calendar .pager-button:hover, .calendar .pager-button:focus { background-color: #4e4e4e; } -.calendar .pager-button:active { background-color: #1e2122; } +.calendar .pager-button:active { background-color: #1e1e1e; } -.calendar .calendar-day-base { font-size: 7pt; text-align: center; width: 32px; height: 32px; padding: 0; margin: 2px; border-radius: 0; border: 1px solid transparent; font-feature-settings: "tnum"; } +.calendar .calendar-day-base { font-size: 8pt; text-align: center; width: 32px; height: 32px; padding: 0; margin: 2px; border-radius: 2px; border: 1px solid transparent; font-feature-settings: "tnum"; } -.calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { background-color: #3f4649; } +.calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus { background-color: #424242; } -.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: white; background-color: #272c2d; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } +.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected { color: white; background-color: #282828; } -.calendar .calendar-day-base.calendar-day-heading { color: white; margin-top: 1em; font-size: 6pt; } +.calendar .calendar-day-base.calendar-day-heading { color: white; margin-top: 1em; font-size: 7pt; } .calendar .calendar-day { border-width: 0; } @@ -225,32 +225,32 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .calendar .calendar-day-left { border-left-width: 1px; } -.calendar .calendar-nonwork-day { color: #919494; } +.calendar .calendar-nonwork-day { color: #919190; } -.calendar .calendar-today { font-weight: bold; border: 1px solid transparent; background-color: #4a90d9; color: #fff; } +.calendar .calendar-today { font-weight: bold; border: 1px solid transparent; background-color: #1b6acb; color: #fff; } -.calendar .calendar-today:hover, .calendar .calendar-today:focus { background-color: #5798dc; color: #fff; } +.calendar .calendar-today:hover, .calendar .calendar-today:focus { background-color: #1d72d8; color: #fff; } -.calendar .calendar-today:active, .calendar .calendar-today:selected { background-color: #4a90d9; color: #fff; } +.calendar .calendar-today:active, .calendar .calendar-today:selected { background-color: #1b6acb; color: #fff; } -.calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { background-color: #5798dc; color: #fff; } +.calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus { background-color: #1d72d8; color: #fff; } -.calendar .calendar-day-with-events { background-image: url("calendar-today.svg"); } +.calendar .calendar-day-with-events { background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); } .calendar .calendar-day-with-events.calendar-work-day { color: white; font-weight: bold; } .calendar .calendar-other-month-day { color: rgba(238, 238, 236, 0.5); } -.calendar .calendar-week-number { font-size: 6pt; font-weight: bold; height: 1.8em; width: 2.3em; border-radius: 0; margin: 6px; background-color: #2e3436; color: #fafaf9; } +.calendar .calendar-week-number { font-size: 7pt; font-weight: bold; height: 1.8em; width: 2.3em; border-radius: 2px; margin: 6px; background-color: #303030; color: #fafaf9; } /* Events */ -.events-button { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } +.events-button { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } -.events-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.events-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(27, 106, 203, 0.6); } -.events-button:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.events-button:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.events-button:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.events-button:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } .events-button .events-box { spacing: 6px; } @@ -258,39 +258,39 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .events-button .events-title { color: #878787; font-weight: bold; margin-bottom: 4px; } -.events-button .event-time { color: #bebeb6; font-feature-settings: "tnum"; font-size: 9pt; } +.events-button .event-time { color: #bebeb6; font-feature-settings: "tnum"; font-size: 10pt; } /* World clocks */ -.world-clocks-button { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } +.world-clocks-button { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } -.world-clocks-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.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(27, 106, 203, 0.6); } -.world-clocks-button:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.world-clocks-button:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); 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: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.world-clocks-button:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } .world-clocks-button .world-clocks-grid { spacing-rows: 6px; spacing-columns: 12px; } .world-clocks-button .world-clocks-header { color: #878787; font-weight: bold; } -.world-clocks-button .world-clocks-city { color: #eeeeec; font-size: 10pt; font-weight: normal; } +.world-clocks-button .world-clocks-city { color: #eeeeec; font-size: 11pt; font-weight: normal; } -.world-clocks-button .world-clocks-time { font-weight: bold; color: #eeeeec; font-feature-settings: "tnum"; font-size: 10pt; } +.world-clocks-button .world-clocks-time { font-weight: bold; color: #eeeeec; font-feature-settings: "tnum"; font-size: 11pt; } .world-clocks-button .world-clocks-time:ltr { text-align: right; } .world-clocks-button .world-clocks-time:rtl { text-align: left; } -.world-clocks-button .world-clocks-timezone { color: #bebeb6; font-feature-settings: "tnum"; font-size: 9pt; } +.world-clocks-button .world-clocks-timezone { color: #bebeb6; font-feature-settings: "tnum"; font-size: 10pt; } /* Weather */ -.weather-button { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } +.weather-button { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); padding: 12px; } -.weather-button:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.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(27, 106, 203, 0.6); } -.weather-button:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.weather-button:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); 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: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.weather-button:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } .weather-button .weather-box { spacing: 10px; } @@ -298,11 +298,11 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .weather-button .weather-header { color: #878787; font-weight: bold; } -.weather-button .weather-header.location { font-weight: normal; font-size: 9pt; } +.weather-button .weather-header.location { font-weight: normal; font-size: 10pt; } .weather-button .weather-grid { spacing-rows: 6px; spacing-columns: 12px; } -.weather-button .weather-forecast-time { color: #a6a69b; font-feature-settings: "tnum"; font-size: 8pt; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } +.weather-button .weather-forecast-time { color: #a6a69b; font-feature-settings: "tnum"; font-size: 9pt; font-weight: normal; padding-top: 0.2em; padding-bottom: 0.4em; } .weather-button .weather-forecast-icon { icon-size: 2.18em; } @@ -319,13 +319,13 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .message-list-controls { margin: 8px 16px 0; padding: 4px; spacing: 12px; } -.message { border-width: 0px; border-style: solid; border-radius: 0; margin: 4px; color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.message { border-width: 0; border-style: solid; border-radius: 2px; margin: 4px; color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.message: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(74, 144, 217, 0.6); } +.message: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(27, 106, 203, 0.6); } -.message:hover { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.message:hover { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.message:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.message:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } .message .message-icon-bin { padding: 18px 0 18px 12px; } @@ -341,7 +341,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .message .message-secondary-bin { padding: 0 8px; } -.message .message-secondary-bin > .event-time { color: rgba(238, 238, 236, 0.5); font-size: 8pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } +.message .message-secondary-bin > .event-time { color: rgba(238, 238, 236, 0.5); font-size: 9pt; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ padding-bottom: 0.13em; } .message .message-secondary-bin > .event-time:ltr { text-align: right; } @@ -355,32 +355,32 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .message .message-body { color: #d6d6d1; } -.url-highlighter { link-color: #9ec4eb; } +.url-highlighter { link-color: #629fea; } /* Media Controls */ -.message-media-control { padding: 12px 24px; color: #cacac4; } +.message-media-control { padding: 12px 1.64em; color: #cacac4; } -.message-media-control:hover { background-color: #4b5356; color: #eeeeec; } +.message-media-control:hover { background-color: #4e4e4e; color: #eeeeec; } -.message-media-control:active { background-color: #3a4143; color: #eeeeec; } +.message-media-control:active { background-color: #3c3c3c; color: #eeeeec; } .message-media-control:insensitive { color: #8e8e80; } -.message-media-control:last-child:ltr { border-radius: 0 2 2 0; } +.message-media-control:last-child:ltr { border-radius: 0 4px 4px 0; } -.message-media-control:last-child:rtl { border-radius: 2 0 0 2; } +.message-media-control:last-child:rtl { border-radius: 4px 0 0 4px; } -.media-message-cover-icon { icon-size: 2.18em !important; border-radius: 0; } +.media-message-cover-icon { icon-size: 2.18em !important; border-radius: 2px; } -.media-message-cover-icon.fallback { color: #c5c5be; background-color: #33393b; border: 1px solid transparent; border-radius: 0; icon-size: 2.18em !important; } +.media-message-cover-icon.fallback { color: #c5c5be; background-color: #353535; border: 1px solid transparent; border-radius: 2px; icon-size: 2.18em !important; } .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: 0; } +.candidate-box { padding: 0.3em 0.5em 0.3em 0.5em; border-radius: 2px; } -.candidate-box:selected, .candidate-box:hover { background-color: #4a90d9; color: #fff; } +.candidate-box:selected, .candidate-box:hover { background-color: #1b6acb; color: #fff; } .candidate-page-button-box { height: 2em; } @@ -390,9 +390,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .candidate-page-button { padding: 4px; } -.candidate-page-button-previous { border-radius: 0 0px 0px 0; border-right-width: 0; } +.candidate-page-button-previous { border-radius: 2px 0px 0px 2px; border-right-width: 0; } -.candidate-page-button-next { border-radius: 0px 0 0 0px; } +.candidate-page-button-next { border-radius: 0px 2px 2px 0px; } .candidate-page-button-icon { icon-size: 1em; } @@ -401,7 +401,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .notification-banner .notification-actions { spacing: 0; } -.summary-source-counter { font-size: 9pt; font-weight: bold; height: 1.6em; width: 1.6em; -shell-counter-overlap-x: 3px; -shell-counter-overlap-y: 3px; background-color: #4a90d9; color: #fff; border: 2px solid #eeeeec; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0.9em; } +.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: #1b6acb; color: #fff; border: 2px solid #eeeeec; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); border-radius: 0.9em; } .chat-body { spacing: 5px; } @@ -419,16 +419,16 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .chat-sent:rtl { padding-left: 0; padding-right: 18pt; } -.chat-meta-message { padding-left: 4px; font-size: 8pt; font-weight: bold; color: white; } +.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-notification-item-icon { icon-size: 24px; padding: 0 4px; } /* Modal Dialogs */ -.headline { font-size: 11pt; } +.headline { font-size: 12pt; } -.modal-dialog { border-radius: 0; } +.modal-dialog { border-radius: 4px; } .modal-dialog .modal-dialog-content-box { margin: 32px 40px; spacing: 32px; max-width: 28em; } @@ -459,14 +459,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { font-weight: bold; } -.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { color: #e2e2df; font-size: 9pt; } +.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { color: #e2e2df; font-size: 10pt; } /* Run Dialog */ .run-dialog .modal-dialog-content-box { margin-top: 24px; margin-bottom: 14px; } .run-dialog .run-dialog-entry { width: 20em; } -.run-dialog .run-dialog-description { font-size: 9pt; text-align: center; color: #bebeb6; } +.run-dialog .run-dialog-description { font-size: 10pt; text-align: center; color: #bebeb6; } /* Password or Authentication Dialog */ .prompt-dialog { width: 28em; } @@ -485,7 +485,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .prompt-dialog-password-entry { width: 20em; } -.prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; font-size: 9pt; } +.prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { text-align: center; font-size: 10pt; } .prompt-dialog-error-label { color: #f57900; } @@ -499,16 +499,19 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .audio-device-selection-dialog .audio-selection-box { spacing: 20px; } -.audio-selection-device { border: 1px solid #2c3133; border-radius: 12px; } +.audio-selection-device { border: 1px solid #2d2d2d; border-radius: 12px; } -.audio-selection-device:hover, .audio-selection-device:focus { background-color: #3f4649; } +.audio-selection-device:hover, .audio-selection-device:focus { background-color: #424242; } -.audio-selection-device:active { background-color: #4a90d9; color: #fff; } +.audio-selection-device:active { background-color: #1b6acb; color: #fff; } .audio-selection-device-box { padding: 20px; spacing: 20px; } .audio-selection-device-icon { icon-size: 4.36em; } +/* Welcome dialog */ +.welcome-dialog-image { background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg"); background-size: contain; /* Reasonable maximum dimensions */ height: 300px; width: 300px; } + /* Network Dialogs */ .nm-dialog { max-height: 34em; min-height: 31em; min-width: 32em; } @@ -526,17 +529,17 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .nm-dialog-header-hbox { spacing: 10px; } -.nm-dialog-scroll-view { border: 1px solid #202425; padding: 0; background-color: #2c3133; } +.nm-dialog-scroll-view { border: 1px solid #202020; padding: 0; background-color: #2d2d2d; } -.nm-dialog-item { font-size: 10pt; border-bottom: 1px solid #202425; padding: 12px; spacing: 0px; } +.nm-dialog-item { font-size: 11pt; border-bottom: 1px solid #202020; padding: 12px; spacing: 0px; } -.nm-dialog-item:selected { background-color: #4a90d9; color: #fff; } +.nm-dialog-item:selected { background-color: #1b6acb; color: #fff; } .nm-dialog-icon { icon-size: 1.09em; } .nm-dialog-icons { spacing: 12px; } -.no-networks-label { color: #919494; } +.no-networks-label { color: #919190; } .no-networks-box { spacing: 6px; } @@ -561,7 +564,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg /* App Switcher */ .switcher-popup { padding: 8px; spacing: 24px; } -.switcher-list .item-box { padding: 8px; border-radius: 1px; border: 1px solid transparent; } +.switcher-list .item-box { padding: 8px; border-radius: 3px; border: 1px solid transparent; } .switcher-list .item-box:outlined { background-color: rgba(238, 238, 236, 0.3); } @@ -571,7 +574,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .switcher-list .thumbnail { width: 256px; } -.switcher-list .separator { width: 1px; background: #202425; } +.switcher-list .separator { width: 1px; background: #202020; } .switcher-list .switcher-list-item-container { spacing: 12px; } @@ -581,49 +584,51 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .input-source-switcher-symbol { font-size: 34pt; width: 96px; height: 96px; } -.cycler-highlight { border: 5px solid #4a90d9; } +.cycler-highlight { border: 5px solid #1b6acb; } /* Workspace Switcher */ .workspace-switcher-group { padding: 12px; } .workspace-switcher { background: transparent; border: none; border-radius: 0; padding: 0; spacing: 12px; } -.ws-switcher-box { background: transparent; height: 50px; background-size: 32px; border: 1px solid rgba(238, 238, 236, 0.1); border-radius: 3px; } +.ws-switcher-box { background: transparent; height: 50px; background-size: 32px; border: 1px solid rgba(238, 238, 236, 0.1); border-radius: 5px; } -.ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 52px; background-color: #4a90d9; border: 1px solid #5f9ddd; border-radius: 3px; color: #fff; } +.ws-switcher-active-up, .ws-switcher-active-down, .ws-switcher-active-left, .ws-switcher-active-right { height: 52px; background-color: #1b6acb; border: 1px solid #1f76e1; border-radius: 5px; color: #fff; } /* Top Bar */ -#panel { background-color: #1b1f20; font-weight: bold; height: 1.86em; font-feature-settings: "tnum"; } +#panel { background-color: #1b1b1b; font-weight: bold; height: 1.86em; font-feature-settings: "tnum"; transition-duration: 250ms; } -#panel.unlock-screen, #panel.login-screen { background-color: transparent; } +#panel.unlock-screen, #panel.login-screen, #panel:overview { background-color: transparent; } -#panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } +#panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner { -panel-corner-opacity: 0; } #panel #panelLeft, #panel #panelCenter { spacing: 6px; } -#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: #1b1f20; -panel-corner-border-width: 0px; -panel-corner-border-color: transparent; } +#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: #1b1b1b; -panel-corner-border-width: 0px; -panel-corner-border-color: transparent; -panel-corner-opacity: 0; transition-duration: 250ms; } + +#panel .panel-button { font-weight: bold; color: #eeeeec; -natural-hpadding: 12px; -minimum-hpadding: 6px; transition-duration: 150ms; border: 0px solid transparent; border-radius: 0; } -#panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus { -panel-corner-border-color: #5f9ddd; } +#panel .panel-button.clock-display .clock { transition-duration: 150ms; border: 0px solid transparent; border-radius: 0; } -#panel .panel-button { font-weight: bold; color: #eeeeec; -natural-hpadding: 12px; -minimum-hpadding: 6px; } +#panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { color: white; background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.6); } -#panel .panel-button:hover { color: white; background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.6); } +#panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } -#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { color: white; } +#panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { color: white; background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.6); } -#panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; } +#panel .panel-button .system-status-icon { icon-size: 1.09em; padding: 5px; margin: 0 4px; } -#panel .panel-button .app-menu-icon { margin-left: 4px; margin-right: 4px; -st-icon-style: symbolic; } +#panel .panel-button .panel-status-indicators-box .system-status-icon, #panel .panel-button .panel-status-menu-box .system-status-icon { margin: 0; } -.unlock-screen #panel .panel-button, .login-screen #panel .panel-button { color: white; } +#panel .panel-button .app-menu-icon { -st-icon-style: symbolic; } -.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 { color: white; } +#panel #panelActivities.panel-button { -natural-hpadding: 18px; } -#panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked { background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0px #4a90d9; } +#panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } -#panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } +#panel.unlock-screen .panel-button.clock-display:hover, #panel.unlock-screen .panel-button.clock-display:active, #panel.unlock-screen .panel-button.clock-display:overview, #panel.unlock-screen .panel-button.clock-display:focus, #panel.unlock-screen .panel-button.clock-display:checked, #panel.login-screen .panel-button.clock-display:hover, #panel.login-screen .panel-button.clock-display:active, #panel.login-screen .panel-button.clock-display:overview, #panel.login-screen .panel-button.clock-display:focus, #panel.login-screen .panel-button.clock-display:checked, #panel:overview .panel-button.clock-display:hover, #panel:overview .panel-button.clock-display:active, #panel:overview .panel-button.clock-display:overview, #panel:overview .panel-button.clock-display:focus, #panel:overview .panel-button.clock-display:checked { box-shadow: none; } -#panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { background-color: rgba(0, 0, 0, 0.01); box-shadow: inset 0 -2px 0 0 #5f9ddd; } +#panel.unlock-screen .panel-button.clock-display:hover .clock, #panel.unlock-screen .panel-button.clock-display:active .clock, #panel.unlock-screen .panel-button.clock-display:overview .clock, #panel.unlock-screen .panel-button.clock-display:focus .clock, #panel.unlock-screen .panel-button.clock-display:checked .clock, #panel.login-screen .panel-button.clock-display:hover .clock, #panel.login-screen .panel-button.clock-display:active .clock, #panel.login-screen .panel-button.clock-display:overview .clock, #panel.login-screen .panel-button.clock-display:focus .clock, #panel.login-screen .panel-button.clock-display:checked .clock, #panel:overview .panel-button.clock-display:hover .clock, #panel:overview .panel-button.clock-display:active .clock, #panel:overview .panel-button.clock-display:overview .clock, #panel:overview .panel-button.clock-display:focus .clock, #panel:overview .panel-button.clock-display:checked .clock { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { spacing: 2px; } @@ -635,42 +640,40 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg #appMenu .label-shadow { color: transparent; } -#panel #panelActivities.panel-button > * { background-image: url("activities.svg"); background-position: center top; width: 24px; height: 24px; background-color: transparent !important; background-gradient-direction: none !important; border: 0 solid transparent !important; text-shadow: 0 0 transparent !important; transition-duration: 0ms !important; box-shadow: none !important; color: transparent; } - -#panel #panelActivities.panel-button:active, #panel #panelActivities.panel-button:overview, #panel #panelActivities.panel-button:focus, #panel #panelActivities.panel-button:checked { background-color: transparent; box-shadow: none; border-bottom-width: 1px; border-color: transparent; } - -#panel #panelActivities.panel-button:active > *, #panel #panelActivities.panel-button:overview > *, #panel #panelActivities.panel-button:focus > *, #panel #panelActivities.panel-button:checked > * { background-image: url("activities-active.svg"); } +#appMenu .panel-status-menu-box { padding: 0 6px; spacing: 6px; } /* Activities Ripple */ -.ripple-box { background-color: rgba(243, 247, 252, 0.3); box-shadow: 0 0 2px 2px #9ec4eb; width: 52px; height: 52px; border-radius: 0 0 52px 0; } +.ripple-box { background-color: rgba(188, 214, 246, 0.3); box-shadow: 0 0 2px 2px #629fea; width: 52px; height: 52px; border-radius: 0 0 52px 0; } .ripple-box:rtl { border-radius: 0 0 0 52px; } /* OVERVIEW */ -#overview { spacing: 24px; background-color: transparent; } +.controls-manager, .secondary-monitor-workspaces { spacing: 12px; } + +#overviewGroup { background-color: #282828; } .overview-controls { padding-bottom: 32px; } /* Window Picker */ -.window-picker { spacing: 6px; padding: 12px; } +.window-picker { spacing: 6px; } -.window-picker.external-monitor { padding: 12px; } +.window-caption { color: #eeeeec; background-color: rgba(32, 32, 32, 0.96); border-radius: 2px; padding: 6px 12px; } -.window-clone-border { border-width: 6px; border-style: solid; border-color: rgba(255, 255, 255, 0.35); border-radius: 2; box-shadow: inset 0 0 0 1px rgba(32, 36, 37, 0.2); } +.window-close { background-color: #ff5757; color: #eeeeec; border-radius: 2px; padding: 3px; height: 24px; width: 24px; box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); transition-duration: 150ms; } -.window-caption { color: #eeeeec; background-color: rgba(32, 32, 32, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 1; padding: 6px 12px; font-weight: bold; font-size: 11pt; } +.window-close StIcon { icon-size: 24px; } -.window-close { background-color: #ca3f3f; color: #fff; border: none; border-radius: 0; padding: 3px; height: 24px; width: 24px; box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5); } +.window-close:hover { background-color: #ff8080; } -.window-close:hover { background-color: #d35f5f; } +.window-close:active { color: rgba(238, 238, 236, 0.8); background-color: #ff4d4d; } -.window-close:active { background-color: #c83737; } +.workspace-background { border-radius: 30px; background-color: rgba(32, 32, 32, 0.96); box-shadow: 0 4px 16px 4px rgba(0, 0, 0, 0.26); } -.search-entry { width: 320px; padding: 7px 9px; border-radius: 0; color: rgba(238, 238, 236, 0.7); background-color: rgba(255, 255, 255, 0.2); border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } +.search-entry { width: 320px; padding: 7px 9px; border-radius: 2px; color: rgba(238, 238, 236, 0.7); background-color: rgba(255, 255, 255, 0.2); border-color: transparent; margin-top: 12px; margin-bottom: 6px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } .search-entry:hover { background-color: rgba(255, 255, 255, 0.25); border-color: transparent; color: #fafaf9; } -.search-entry:focus { padding: 6px 8px; border-width: 2px; border-style: solid; border-color: #4a90d9; color: #eeeeec; box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } +.search-entry:focus { padding: 6px 8px; border-width: 2px; border-style: solid; border-color: #1b6acb; color: #eeeeec; box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); } .search-entry .search-entry-icon { icon-size: 1.09em; padding: 0 4px; color: inherit; } @@ -681,7 +684,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .search-section .search-section-separator { height: 0; background-color: transparent; } -.search-section-content { background-color: rgba(45, 45, 45, 0.76); border-radius: 3; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); color: #eeeeec; padding: 18px; spacing: 8px; } +.search-section-content { background-color: rgba(45, 45, 45, 0.76); border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); color: #eeeeec; padding: 18px; spacing: 8px; } .list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected { background-color: rgba(238, 238, 236, 0.1); transition-duration: 200ms; } @@ -701,8 +704,37 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .list-search-result .list-search-result-description { color: #a6a69b; } +/* Dash */ +#dash { font-size: 9pt; margin-top: 12px; padding: 0 6px; } + +#dash .placeholder { background-image: none; background-size: contain; height: 32px; } + +#dash .empty-dash-drop-target { width: 32px; height: 32px; } + +#dash .overview-icon { padding: 3px; } + +.dash-background { background-color: transparent; margin-bottom: 0; padding: 6px; border-radius: 4px 4px 0 0; } + +.dash-item-container .app-well-app, .show-apps { padding: 6px 6px 6px; } + +.dash-separator { width: 1px; margin: 0 9px 0; background-color: rgba(238, 238, 236, 0.3); } + +.dash-label { color: #eeeeec; background-color: rgba(32, 32, 32, 0.96); border-radius: 2px; padding: 6px 12px; text-align: center; -y-offset: 12px; } + +.show-apps .overview-icon { color: #eeeeec; } + +.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { background-color: rgba(238, 238, 236, 0.1); } + +.show-apps:focus .overview-icon { background-color: rgba(238, 238, 236, 0.3); } + +.show-apps:drop .overview-icon { border: 2px solid #1b6acb; background-color: rgba(27, 106, 203, 0.2); } + +.show-apps:active .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(7, 7, 7, 0.46); } + +.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(32, 32, 32, 0.46); color: #eeeeec; } + /* App Grid */ -.icon-grid { row-spacing: 36px; column-spacing: 36px; max-row-spacing: 72px; max-column-spacing: 72px; } +.icon-grid { row-spacing: 12px; column-spacing: 12px; max-row-spacing: 72px; max-column-spacing: 72px; page-padding-top: 24px; page-padding-bottom: 24px; page-padding-left: 12px; page-padding-right: 12px; } /* App Icons */ .app-well-app .overview-icon, .grid-search-result .overview-icon { color: #fff; } @@ -711,7 +743,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon { background-color: rgba(255, 255, 255, 0.3); } -.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { background-color: rgba(74, 144, 217, 0.85); } +.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon { border: 2px solid #1b6acb; background-color: rgba(27, 106, 203, 0.2); } .app-well-app:active .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { background-color: rgba(7, 7, 7, 0.46); } @@ -720,9 +752,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout { spacing: 6px; } /* App Folders */ -.app-well-app.app-folder { background-color: rgba(32, 32, 32, 0.16); border-radius: 4px; } +.app-well-app.app-folder { background-color: #202020; border-radius: 6px; } -.app-folder-dialog { border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px; background-color: rgba(7, 7, 7, 0.91); } +.app-folder-dialog { border-radius: 6px; background-color: #3b3b3b; padding: 12px 0px 12px 0px; } .app-folder-dialog .folder-name-container { padding: 24px 36px 0; spacing: 12px; /* FIXME: this is to keep the label in sync with the entry */ } @@ -736,16 +768,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-folder-dialog .folder-name-container .edit-folder-button > StIcon { icon-size: 16px; } -.app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; } +.app-folder-dialog .icon-grid { row-spacing: 12px; column-spacing: 30px; page-padding-top: 0; page-padding-bottom: 0; page-padding-left: 0; page-padding-right: 0; } .app-folder-dialog .page-indicators { margin-bottom: 18px; } -.app-folder-dialog .page-indicators .page-indicator { padding: 15px 12px; } - .app-folder-dialog-container { padding: 12px; width: 620px; height: 620px; } -.app-folder-icon { padding: 6px; spacing-rows: 6px; spacing-columns: 6px; } - .app-well-app-running-dot { height: 5px; width: 5px; border-radius: 5px; background-color: #eeeeec; margin-bottom: 1px; } .rename-folder-popup .rename-folder-popup-item { spacing: 6px; } @@ -754,91 +782,77 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .app-menu, .app-well-menu { max-width: 27.25em; } -.page-indicator { padding: 15px 20px; } +.page-indicator { padding: 6px 12px 0; } .page-indicator .page-indicator-icon { width: 10px; height: 10px; border-radius: 10px; background-color: white; } -.all-apps { padding: 0px 88px 10px 88px; } +.apps-scroll-view { padding: 0; } .system-action-icon { background-color: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 99px; icon-size: 48px; } -/* Dash */ -#dash { background-color: transparent; border: none; font-size: 8pt; padding: 4px 0; border-radius: 0 0 0 0; } - -#dash:rtl { border-radius: 0 0 0 0; border-right-width: 0; } - -#dash .placeholder { background-image: none; background-size: contain; height: 24px; } - -#dash .empty-dash-drop-target { width: 24px; height: 24px; } - -.dash-item-container > StWidget { padding: 4px 8px; } - -.dash-label { background-color: rgba(32, 32, 32, 0.91); border-radius: 0; border: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); color: #eeeeec; padding: 6px 8px; text-align: center; -x-offset: 8px; } - -.show-apps .overview-icon { color: #eeeeec; } +.page-navigation-hint { width: 300px; } -.show-apps:hover .overview-icon, .show-apps:selected .overview-icon { background-color: rgba(238, 238, 236, 0.1); } +.page-navigation-hint.dnd { background: rgba(255, 255, 255, 0.1); } -.show-apps:focus .overview-icon { background-color: rgba(238, 238, 236, 0.3); } +.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; border-radius: 15px 0px 0px 15px; } -.show-apps:drop .overview-icon { background-color: rgba(74, 144, 217, 0.85); } - -.show-apps:active .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(7, 7, 7, 0.46); } +.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; border-radius: 0px 15px 15px 0px; } -.show-apps:focus .overview-icon, .show-apps:checked .overview-icon { background-color: rgba(7, 7, 7, 0.96); color: #eeeeec; } +.page-navigation-arrow { margin: 6px; width: 24px; height: 24px; } /* Workspace pager */ -.workspace-thumbnails { visible-width: 32px; spacing: 6px; padding: 6px; border-radius: 0 0 0 0; border-right-width: 0; } +.workspace-thumbnails { visible-width: 32px; spacing: 6px; padding: 6px; } -.workspace-thumbnails:rtl { border-radius: 0 0 0 0; border-left-width: 0; } +.workspace-thumbnails .workspace-thumbnail { border-radius: 3px; } -.workspace-thumbnails .placeholder { background-image: url("dash-placeholder.svg"); background-size: contain; height: 24px; } +.workspace-thumbnails .placeholder { background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); background-size: contain; width: 18px; } -.workspace-thumbnail-indicator { border: 3px solid #4a90d9; border-radius: 3px; padding: 0px; } +.workspace-thumbnail-indicator { border: 3px solid #1b6acb; border-radius: 3px; padding: 0px; } -.ripple-pointer-location { width: 50px; height: 50px; border-radius: 25px; background-color: rgba(200, 222, 244, 0.3); box-shadow: 0 0 2px 2px #9ec4eb; } +.ripple-pointer-location { width: 50px; height: 50px; border-radius: 25px; background-color: rgba(143, 187, 240, 0.3); box-shadow: 0 0 2px 2px #629fea; } -.pie-timer { width: 60px; height: 60px; -pie-border-width: 3px; -pie-border-color: #4a90d9; -pie-background-color: rgba(243, 247, 252, 0.3); } +.pie-timer { width: 60px; height: 60px; -pie-border-width: 3px; -pie-border-color: #1b6acb; -pie-background-color: rgba(188, 214, 246, 0.3); } -.magnifier-zoom-region { border: 2px solid #4a90d9; } +.magnifier-zoom-region { border: 2px solid #1b6acb; } .magnifier-zoom-region.full-screen { border-width: 0; } -.select-area-rubberband { background-color: rgba(74, 144, 217, 0.3); border: 1px solid #4a90d9; } +.select-area-rubberband { background-color: rgba(27, 106, 203, 0.3); border: 1px solid #1b6acb; } -.user-icon { background-size: contain; color: #eeeeec; border-radius: 99px; border: 2px #eeeeec; } +.user-icon { background-size: contain; color: #eeeeec; border-radius: 99px; icon-size: 4.36em; } .user-icon:hover { color: white; } -.user-icon StIcon { background-color: rgba(238, 238, 236, 0.05); border-radius: 99px; } +.user-icon StIcon { background-color: rgba(238, 238, 236, 0.05); border-radius: 99px; padding: 12px; width: 2.725em; height: 2.725em; } + +.user-icon.user-avatar { border: 2px #eeeeec; } .user-widget.vertical .user-icon { icon-size: 6.54em; } .user-widget.vertical .user-icon StIcon { padding: 20px; padding-top: 18px; padding-bottom: 22px; width: 5.995em; height: 5.995em; } -.user-widget.horizontal .user-icon { icon-size: 4.36em; } - -.user-widget.horizontal .user-icon StIcon { padding: 12px; width: 2.725em; height: 2.725em; } - .lightbox { background-color: black; } .flashspot { background-color: white; } .hidden { color: rgba(0, 0, 0, 0); } -.caps-lock-warning-label { text-align: center; padding-bottom: 8px; font-size: 9pt; color: #f57900; } +.caps-lock-warning-label { text-align: center; padding-bottom: 8px; font-size: 10pt; color: #f57900; } + +/* Workspace animation */ +.workspace-animation { background-color: #282828; } /* Tiled window previews */ -.tile-preview { background-color: rgba(74, 144, 217, 0.5); border: 1px solid #4a90d9; } +.tile-preview { background-color: rgba(27, 106, 203, 0.5); border: 1px solid #1b6acb; } -.tile-preview-left.on-primary { border-radius: 1px 0 0 0; } +.tile-preview-left.on-primary { border-radius: 3px 0 0 0; } -.tile-preview-right.on-primary { border-radius: 0 1px 0 0; } +.tile-preview-right.on-primary { border-radius: 0 3px 0 0; } -.tile-preview-left.tile-preview-right.on-primary { border-radius: 1px 1px 0 0; } +.tile-preview-left.tile-preview-right.on-primary { border-radius: 3px 3px 0 0; } /* On-screen Keyboard */ -#keyboard { background-color: rgba(32, 36, 37, 0.9); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16); } +#keyboard { background-color: rgba(32, 32, 32, 0.9); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16); } #keyboard .page-indicator { padding: 6px; } @@ -846,52 +860,52 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .key-container { padding: 4px; spacing: 4px; } -.keyboard-key { color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); font-size: 15pt; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; border-radius: 3px; } +.keyboard-key { color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); font-size: 16pt; min-height: 1.2em; min-width: 1.2em; border-width: 1px; border-style: solid; border-radius: 5px; } -.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(74, 144, 217, 0.6); } +.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(27, 106, 203, 0.6); } -.keyboard-key:hover, .keyboard-key:checked { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key:hover, .keyboard-key:checked { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.keyboard-key:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } -.keyboard-key:grayed { background-color: #2c3133; color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); } +.keyboard-key:grayed { background-color: #2d2d2d; color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); } -.keyboard-key.default-key { color: #eeeeec; background-color: rgba(45, 45, 45, 0.96); border-color: rgba(27, 27, 27, 0.96); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.default-key { color: #eeeeec; background-color: rgba(45, 45, 45, 0.96); border-color: rgba(27, 27, 27, 0.96); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key.default-key:hover, .keyboard-key.default-key:checked { color: #eeeeec; background-color: rgba(50, 50, 50, 0.96); border-color: rgba(27, 27, 27, 0.96); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.default-key:hover, .keyboard-key.default-key:checked { color: #eeeeec; background-color: rgba(50, 50, 50, 0.96); border-color: rgba(27, 27, 27, 0.96); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } .keyboard-key.default-key:active { color: #eeeeec; background-color: rgba(30, 30, 30, 0.96); border-color: rgba(9, 9, 9, 0.96); text-shadow: none; icon-shadow: none; box-shadow: none; } -.keyboard-key.enter-key { color: #fff; background-color: #5798dc; border-color: #3986d5; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.enter-key { color: #fff; background-color: #1d72d8; border-color: #1961b9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { color: #eeeeec; background-color: #6ca5e0; border-color: #468dd8; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked { color: #eeeeec; background-color: #2c7fe3; border-color: #1b68c6; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-key.enter-key:active { color: #eeeeec; background-color: #3583d5; border-color: #276fba; text-shadow: none; icon-shadow: none; box-shadow: none; } +.keyboard-key.enter-key:active { color: #eeeeec; background-color: #185fb4; border-color: #134c90; text-shadow: none; icon-shadow: none; box-shadow: none; } -.keyboard-key.shift-key-uppercase { color: #4a90d9; } +.keyboard-key.shift-key-uppercase { color: #1b6acb; } .keyboard-key StIcon { icon-size: 1.125em; } -.keyboard-subkeys { color: #eeeeec; -arrow-border-radius: 0; -arrow-background-color: rgba(32, 32, 32, 0.96); -arrow-border-width: 1px; -arrow-border-color: rgba(55, 55, 55, 0.96); -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 6px; } +.keyboard-subkeys { color: #eeeeec; -arrow-border-radius: 4px; -arrow-background-color: rgba(32, 32, 32, 0.96); -arrow-border-width: 1px; -arrow-border-color: rgba(55, 55, 55, 0.96); -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 6px; } -.keyboard-subkeys .keyboard-key { color: #eeeeec; background-color: #3a4143; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-radius: 0; } +.keyboard-subkeys .keyboard-key { color: #eeeeec; background-color: #3c3c3c; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-radius: 2px; } -.keyboard-subkeys .keyboard-key:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.6); } +.keyboard-subkeys .keyboard-key:focus { color: #eeeeec; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(27, 106, 203, 0.6); } -.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { color: #eeeeec; background-color: #3f4649; border-color: #2a2e30; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } +.keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked { color: #eeeeec; background-color: #424242; border-color: #2b2b2b; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); } -.keyboard-subkeys .keyboard-key:active { color: #eeeeec; background-color: #2c3133; border-color: #191c1d; text-shadow: none; icon-shadow: none; box-shadow: none; } +.keyboard-subkeys .keyboard-key:active { color: #eeeeec; background-color: #2d2d2d; border-color: #191919; text-shadow: none; icon-shadow: none; box-shadow: none; } .emoji-page .keyboard-key { background-color: transparent; border: none; color: initial; } -.emoji-panel .keyboard-key:latched { border-color: #5f9ddd; background-color: #4a90d9; } +.emoji-panel .keyboard-key:latched { border-color: #1f76e1; background-color: #1b6acb; } -.word-suggestions { font-size: 13pt; spacing: 12px; min-height: 20pt; } +.word-suggestions { font-size: 14pt; spacing: 12px; min-height: 20pt; } /* Looking Glass */ -#LookingGlassDialog { background-color: rgba(32, 32, 32, 0.96); spacing: 6px; padding: 4px; border: 1px solid rgba(238, 238, 236, 0.2); border-radius: 0; color: #eeeeec; } +#LookingGlassDialog { background-color: rgba(32, 32, 32, 0.96); spacing: 6px; padding: 4px; border: 1px solid rgba(238, 238, 236, 0.2); border-radius: 2px; color: #eeeeec; } -#LookingGlassDialog > #Toolbar { border: none; border-radius: 0; background-color: rgba(32, 32, 32, 0.96); } +#LookingGlassDialog > #Toolbar { border: none; border-radius: 2px; background-color: rgba(32, 32, 32, 0.96); } #LookingGlassDialog .labels { spacing: 6px; } @@ -899,19 +913,19 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg #LookingGlassDialog .notebook-tab:hover { color: #eeeeec; } -#LookingGlassDialog .notebook-tab:selected { border-bottom-width: 2px; box-shadow: inset 0 -2px 0 0 #5f9ddd; color: #eeeeec; } +#LookingGlassDialog .notebook-tab:selected { border-bottom-width: 2px; box-shadow: inset 0 -2px 0 0 #1f76e1; color: #eeeeec; } #LookingGlassDialog StBoxLayout#EvalBox { padding: 4px; spacing: 6px; } #LookingGlassDialog StBoxLayout#ResultsArea { spacing: 6px; } -.lg-dialog StEntry { background-color: rgba(45, 45, 45, 0.56); color: #eeeeec; border-color: rgba(238, 238, 236, 0.2); min-height: 22px; selection-background-color: #4a90d9; selected-color: #fff; } +.lg-dialog StEntry { background-color: rgba(45, 45, 45, 0.56); color: #eeeeec; border-color: rgba(238, 238, 236, 0.2); min-height: 22px; selection-background-color: #1b6acb; selected-color: #fff; } -.lg-dialog .shell-link { color: #9ec4eb; } +.lg-dialog .shell-link { color: #629fea; } -.lg-dialog .shell-link:hover { color: #c8def4; } +.lg-dialog .shell-link:hover { color: #8fbbf0; } -.lg-dialog .shell-link:active { color: #74aae2; } +.lg-dialog .shell-link:active { color: #3584e4; } .lg-dialog .actor-link { color: #ccc; } @@ -923,7 +937,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .lg-obj-inspector-title { spacing: 6px; } -.lg-obj-inspector-button { border: 1px solid rgba(0, 0, 0, 0.7); padding: 4px; border-radius: 0; } +.lg-obj-inspector-button { border: 1px solid rgba(0, 0, 0, 0.7); padding: 4px; border-radius: 2px; } .lg-obj-inspector-button:hover { border: 1px solid #ffffff; } @@ -931,44 +945,44 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .lg-extensions-list { padding: 4px; spacing: 6px; } -.lg-extension { border: 1px solid rgba(13, 13, 13, 0.7); background-color: rgba(45, 45, 45, 0.96); border-radius: 0; padding: 4px; } +.lg-extension { border: 1px solid rgba(13, 13, 13, 0.7); background-color: rgba(45, 45, 45, 0.96); border-radius: 2px; padding: 4px; } .lg-extension-name { font-weight: bold; } .lg-extension-meta { spacing: 6px; } -#LookingGlassPropertyInspector { background: rgba(32, 32, 32, 0.96); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 0; padding: 6px; } +#LookingGlassPropertyInspector { background: rgba(32, 32, 32, 0.96); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 2px; padding: 6px; } /* Login Dialog */ .login-dialog-banner-view { padding-top: 24px; max-width: 23em; } -.login-dialog { border: none; background-color: transparent; } +.login-dialog, .unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { background-color: rgba(45, 44, 46, 0.5); color: #eeeeec; } +.login-dialog StEntry, .unlock-dialog StEntry { background-color: #202020; color: #eeeeec; } -.login-dialog .modal-dialog-button-box { spacing: 3px; } +.login-dialog .modal-dialog-button-box, .unlock-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.2); background-color: #5b666a; border-color: #5b666a; color: #eeeeec; } +.login-dialog .modal-dialog-button, .unlock-dialog .modal-dialog-button { padding: 4px 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); background-color: #202020; border-color: #202020; color: #eeeeec; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { background-color: #667478; border-color: #667478; } +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, .unlock-dialog .modal-dialog-button:hover, .unlock-dialog .modal-dialog-button:focus { background-color: #353535; border-color: #353535; } -.login-dialog .modal-dialog-button:active { box-shadow: none; background-color: #4f595d; border-color: #4f595d; } +.login-dialog .modal-dialog-button:active, .unlock-dialog .modal-dialog-button:active { box-shadow: none; background-color: #1b1b1b; border-color: #1b1b1b; } -.login-dialog .modal-dialog-button:insensitive { color: #919494; border-color: #212527; background-color: #2d3234; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #4f595d; background-color: #4f595d; color: rgba(238, 238, 236, 0.7); } +.login-dialog .modal-dialog-button:insensitive, .unlock-dialog .modal-dialog-button:insensitive { color: #919190; border-color: #252526; background-color: #323132; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #1b1b1b; background-color: #1b1b1b; color: rgba(238, 238, 236, 0.7); } -.login-dialog .modal-dialog-button:default { color: #fff; background-color: #5798dc; border-color: #3986d5; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-color: #4a90d9; } +.login-dialog .modal-dialog-button:default, .unlock-dialog .modal-dialog-button:default { color: #fff; background-color: #1d72d8; border-color: #1961b9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); border-color: #1b6acb; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { color: #fff; background-color: #5f9ddd; border-color: #3986d5; text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); background-color: #5f9ddd; border-color: #5f9ddd; } +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, .unlock-dialog .modal-dialog-button:default:hover, .unlock-dialog .modal-dialog-button:default:focus { color: #fff; background-color: #1f76e1; border-color: #1961b9; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); text-shadow: 0 1px rgba(0, 0, 0, 0.2); icon-shadow: 0 1px rgba(0, 0, 0, 0.2); background-color: #1f76e1; border-color: #1f76e1; } -.login-dialog .modal-dialog-button:default:active { color: #fff; background-color: #3d88d6; border-color: #2974c2; text-shadow: none; icon-shadow: none; box-shadow: none; background-color: #3583d5; border-color: #3583d5; } +.login-dialog .modal-dialog-button:default:active, .unlock-dialog .modal-dialog-button:default:active { color: #fff; background-color: #1963bd; border-color: #155099; text-shadow: none; icon-shadow: none; box-shadow: none; background-color: #185fb4; border-color: #185fb4; } -.login-dialog .modal-dialog-button:default:insensitive { color: #919494; border-color: #212527; background-color: #2d3234; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #2a76c6; background-color: #2a76c6; color: rgba(255, 255, 255, 0.7); } +.login-dialog .modal-dialog-button:default:insensitive, .unlock-dialog .modal-dialog-button:default:insensitive { color: #919190; border-color: #252526; background-color: #323132; box-shadow: none; text-shadow: none; icon-shadow: none; border-color: #15539e; background-color: #15539e; color: rgba(255, 255, 255, 0.7); } -.login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button { padding: 0; border-radius: 99px; width: 2.18em; height: 2.18em; border-color: rgba(51, 57, 59, 0.3); background-color: rgba(51, 57, 59, 0.3); } +.login-dialog .cancel-button, .login-dialog .switch-user-button, .login-dialog .login-dialog-session-list-button, .unlock-dialog .cancel-button, .unlock-dialog .switch-user-button, .unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 99px; width: 2.18em; height: 2.18em; border-color: #202020; background-color: #202020; } -.login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, .login-dialog .login-dialog-session-list-button StIcon { icon-size: 1.09em; } +.login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, .login-dialog .login-dialog-session-list-button StIcon, .unlock-dialog .cancel-button StIcon, .unlock-dialog .switch-user-button StIcon, .unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 1.09em; } -.login-dialog .caps-lock-warning-label, .login-dialog .login-dialog-message-warning { color: #eeeeec; } +.login-dialog .caps-lock-warning-label, .login-dialog .login-dialog-message-warning, .unlock-dialog .caps-lock-warning-label, .unlock-dialog .login-dialog-message-warning { color: #eeeeec; } .login-dialog-logo-bin { padding: 24px 0px; } @@ -978,25 +992,23 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .login-dialog-message { text-align: center; } -.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: #eeeeec; } -.login-dialog-not-listed-label { font-size: 9pt; font-weight: bold; color: #a6a69b; padding-top: 1em; } +.login-dialog-not-listed-label { font-size: 10pt; font-weight: bold; color: #a6a69b; 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: #4a90d9; color: #fff; } +.login-dialog-user-list:expanded .login-dialog-user-list-item:selected { background-color: #1b6acb; color: #fff; } -.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid #4a90d9; } +.login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid #1b6acb; } -.login-dialog-user-list-item { border-radius: 4px; padding: 6px; color: #a6a69b; } +.login-dialog-user-list-item { border-radius: 6px; padding: 6px; color: #a6a69b; } .login-dialog-user-list-item:ltr .user-widget { padding-right: 1em; } @@ -1008,19 +1020,19 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .user-widget-label { color: #eeeeec; } -.user-widget.horizontal .user-widget-label { font-size: 12pt; font-weight: bold; padding-left: 15px; } +.user-widget.horizontal .user-widget-label { font-size: 13pt; font-weight: bold; padding-left: 15px; } .user-widget.horizontal .user-widget-label:ltr { padding-left: 14px; text-align: left; } .user-widget.horizontal .user-widget-label:rtl { padding-right: 14px; text-align: right; } -.user-widget.vertical .user-widget-label { font-size: 15pt; text-align: center; font-weight: normal; padding-top: 16px; } +.user-widget.vertical .user-widget-label { font-size: 16pt; text-align: center; font-weight: normal; padding-top: 16px; } .login-dialog-prompt-layout { padding-top: 24px; padding-bottom: 12px; spacing: 12px; width: 23em; } .login-dialog-prompt-entry { height: 1.5em; } -.login-dialog-prompt-label { color: #bebeb6; font-size: 11pt; padding-top: 1em; } +.login-dialog-prompt-label { color: #bebeb6; font-size: 12pt; padding-top: 1em; } /* Screen Shield */ .unlock-dialog-clock { color: white; font-weight: 300; text-align: center; spacing: 24px; padding-bottom: 2.5em; } @@ -1035,7 +1047,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .unlock-dialog-notifications-container .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; } -.unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { padding: 12px 6px; border: none; background-color: rgba(32, 32, 32, 0.26); color: #eeeeec; border-radius: 0; } +.unlock-dialog-notifications-container .notification, .unlock-dialog-notifications-container .unlock-dialog-notification-source { padding: 12px 6px; border: none; background-color: rgba(32, 32, 32, 0.26); color: #eeeeec; border-radius: 4px; } .unlock-dialog-notifications-container .notification.critical, .unlock-dialog-notifications-container .unlock-dialog-notification-source.critical { background-color: rgba(32, 32, 32, 0.86); } @@ -1045,187 +1057,10 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { backg .screen-shield-background { background: black; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); } -#lockDialogGroup { background-color: #41494c; } - -#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { background-color: rgba(51, 57, 59, 0.3); } - -#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { background-color: rgba(51, 57, 59, 0.5); } - -#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(74, 144, 217, 0.5); } - -/* 3rd party extensions */ -#panel.dashtopanelMainPanel.dashtopanelTop .panel-button { text-shadow: black 0 1px 1px; } - -#panel.dashtopanelMainPanel.dashtopanelTop .panel-button:hover { background-color: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .panel-button:active, #panel.dashtopanelMainPanel.dashtopanelTop .panel-button:overview, #panel.dashtopanelMainPanel.dashtopanelTop .panel-button:focus { background-color: #4a90d9; } - -#panel.dashtopanelMainPanel.dashtopanelTop .show-apps { width: 32px; } - -#panel.dashtopanelMainPanel.dashtopanelTop .show-apps > .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:hover { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:focus { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:active { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:checked { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelTop .dash-item-container .show-apps:overview { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelTop .show-apps-icon { color: transparent; border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running1.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running1.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running1:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running2.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running2.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running2:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running3.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running3.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running3:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelTop .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4:hover, #panel.dashtopanelMainPanel.dashtopanelTop .running4.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelTop .running4.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelTop .running4:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .panel-button { text-shadow: black 0 1px 1px; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:hover { background-color: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:active, #panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:overview, #panel.dashtopanelMainPanel.dashtopanelBottom .panel-button:focus { background-color: #4a90d9; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .show-apps { width: 32px; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .show-apps > .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:hover { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:focus { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:active { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:checked { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps { transition-duration: 100ms; background-image: url("d2p-activities.svg"); background-position: center center; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .dash-item-container .show-apps:overview { background-image: url("d2p-activities-active.svg"); background-color: rgba(0, 0, 0, 0.8); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .show-apps-icon { color: transparent; border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running1.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running1.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running1:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running2.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running2.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running2:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3 { transition-duration: 100ms; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running3.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running3.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running3:hover .overview-icon { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app { margin: 0 2px; border-radius: 0; } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover > StWidget { border-image: url("transparent.png"); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .app-well-app:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.1); background-gradient-end: rgba(255, 255, 255, 0.1); } - -#panel.dashtopanelMainPanel.dashtopanelBottom .running4 { transition-duration: 100ms; } +#lockDialogGroup { background-color: #282828; } -#panel.dashtopanelMainPanel.dashtopanelBottom .running4:hover, #panel.dashtopanelMainPanel.dashtopanelBottom .running4.focused { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.15); background-gradient-end: rgba(255, 255, 255, 0.15); } +#unlockDialogNotifications StButton#vhandle, #unlockDialogNotifications StButton#hhandle { background-color: rgba(53, 53, 53, 0.3); } -#panel.dashtopanelMainPanel.dashtopanelBottom .running4.focused:hover { background-gradient-direction: vertical; background-gradient-start: rgba(255, 255, 255, 0.2); background-gradient-end: rgba(255, 255, 255, 0.2); } +#unlockDialogNotifications StButton#vhandle:hover, #unlockDialogNotifications StButton#vhandle:focus, #unlockDialogNotifications StButton#hhandle:hover, #unlockDialogNotifications StButton#hhandle:focus { background-color: rgba(53, 53, 53, 0.5); } -#panel.dashtopanelMainPanel.dashtopanelBottom .running4.focused .overview-icon, #panel.dashtopanelMainPanel.dashtopanelBottom .running4:hover .overview-icon { border-image: url("transparent.png"); } +#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active { background-color: rgba(27, 106, 203, 0.5); } diff --git a/gnome-shell/src/meson.build b/gnome-shell/src/meson.build index 8cc4cc5..739d30c 100644 --- a/gnome-shell/src/meson.build +++ b/gnome-shell/src/meson.build @@ -69,18 +69,22 @@ endforeach # static files to copy data_sources = [ - 'activities.svg', 'activities-active.svg', + 'activities.svg', 'calendar-today.svg', + 'carousel-arrow-back-24-symbolic.svg', + 'carousel-arrow-next-24-symbolic.svg', 'checkbox-focused.svg', 'checkbox-off-focused.svg', 'checkbox-off.svg', 'checkbox.svg', + 'color-pick.svg', 'd2p-activities-active.svg', 'd2p-activities.svg', 'dash-placeholder.svg', 'eye-not-looking-symbolic.svg', 'eye-open-negative-filled-symbolic.svg', + 'gnome-shell-start.svg', 'keyboard-caps-lock-filled-symbolic.svg', 'keyboard-enter-symbolic.svg', 'keyboard-hide-symbolic.svg', @@ -101,6 +105,7 @@ data_sources = [ 'toggle-on-dark.svg', 'toggle-on-hc.svg', 'toggle-on.svg', + 'window-close-24-symbolic.svg', 'transparent.png' ] diff --git a/gnome-shell/src/window-close-24-symbolic.svg b/gnome-shell/src/window-close-24-symbolic.svg new file mode 100644 index 0000000..0cda831 --- /dev/null +++ b/gnome-shell/src/window-close-24-symbolic.svg @@ -0,0 +1,31 @@ + + + + + + + image/svg+xml + + + + + + + diff --git a/gtk/src/Plano-dark-titlebar/gtk-4.0/install-alt-theme.sh b/gtk/src/Plano-dark-titlebar/gtk-4.0/install-alt-theme.sh new file mode 100644 index 0000000..d76cf44 --- /dev/null +++ b/gtk/src/Plano-dark-titlebar/gtk-4.0/install-alt-theme.sh @@ -0,0 +1,12 @@ +#!/bin/sh +set -eu + +theme_dir="${MESON_INSTALL_DESTDIR_PREFIX}/$1" +project_name="$2" + +install -m755 -d "${theme_dir}" +for ver in gtk-4.0; do + install -m755 -d "${theme_dir}/${ver}" + ln -sf "../../${project_name}/${ver}/gtk-alt-header.css" "${theme_dir}/${ver}/gtk.css" + ln -sf "../../${project_name}/${ver}/assets" "${theme_dir}/${ver}/assets" +done diff --git a/gtk/src/Plano-dark-titlebar/gtk-4.0/meson.build b/gtk/src/Plano-dark-titlebar/gtk-4.0/meson.build new file mode 100644 index 0000000..013619d --- /dev/null +++ b/gtk/src/Plano-dark-titlebar/gtk-4.0/meson.build @@ -0,0 +1,2 @@ +# CSS and assets are just symlinks to the light themes as they are not modified +meson.add_install_script('install-alt-theme.sh', theme_dir, meson.project_name()) diff --git a/gtk/src/Plano-dark-titlebar/meson.build b/gtk/src/Plano-dark-titlebar/meson.build index 905340c..e2307c2 100644 --- a/gtk/src/Plano-dark-titlebar/meson.build +++ b/gtk/src/Plano-dark-titlebar/meson.build @@ -9,5 +9,6 @@ configure_file(input : '../index.theme.in', install_dir: theme_dir) subdir('gtk-3.0') +subdir('gtk-4.0') # gtk-2.0 theme is symlinked as it is not modified meson.add_install_script('install-alt-gtk2-theme.sh', theme_dir, meson.project_name()) diff --git a/gtk/src/Plano/gtk-4.0/README b/gtk/src/Plano/gtk-4.0/README new file mode 100644 index 0000000..0588bcf --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/README @@ -0,0 +1,37 @@ +Summary +------- + +* To be able to use the latest/adequate version of sass, install sassc +* meson will regenerate the CSS every time you modify the SCSS files. +* Note that meson always builds out-of-tree, so the modified css files will + appear in your builddir. + +How to tweak the theme +---------------------- + +Adwaita is a complex theme, so to keep it maintainable it's written and +processed in SASS. The generated CSS is then transformed into a gresource file +during gtk build and used at runtime in a non-legible or editable form. + +It is very likely your change will happen in the _common.scss file. That's where +all the widget selectors are defined. Here's a rundown of the "supporting" +stylesheets, that are unlikely to be the right place for a drive by stylesheet +fix: + +_colors.scss - global color definitions. We keep the number of defined + colors to a necessary minimum, most colors are derived + from a handful of basics. It covers both the light variant + and the dark variant. + +_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party + apps color mixing. + +_drawing.scss - drawing helper mixings/functions to allow easier + definition of widget drawing under specific context. This + is why Adwaita isn't 15000 LOC. + +_common.scss - actual definitions of style for each widget. This is + where you are likely to add/remove your changes. + +You can read about SASS at http://sass-lang.com/documentation/. Once you make +your changes to the _common.scss file, GTK will rebuild the CSS files. diff --git a/gtk/src/Plano/gtk-4.0/_colors-public.scss b/gtk/src/Plano/gtk-4.0/_colors-public.scss new file mode 100644 index 0000000..3b638e2 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/_colors-public.scss @@ -0,0 +1,119 @@ +//apps rely on some named colors to be exported +/* GTK NAMED COLORS + ---------------- + use responsibly! */ + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using "" + $var +/* +widget text/foreground color */ +@define-color theme_fg_color #{"" +$fg_color}; + +/* +text color for entries, views and content in general */ +@define-color theme_text_color #{"" +$text_color}; + +/* +widget base background color */ +@define-color theme_bg_color #{"" +$bg_color}; + +/* +text widgets and the like base background color */ +@define-color theme_base_color #{"" +$base_color}; + +/* +base background color of selections */ +@define-color theme_selected_bg_color #{"" +$selected_bg_color}; + +/* +text/foreground color of selections */ +@define-color theme_selected_fg_color #{"" +$selected_fg_color}; + +/* +base background color of insensitive widgets */ +@define-color insensitive_bg_color #{"" +$insensitive_bg_color}; + +/* +text foreground color of insensitive widgets */ +@define-color insensitive_fg_color #{"" +$insensitive_fg_color}; + +/* +insensitive text widgets and the like base background color */ +@define-color insensitive_base_color #{"" +$base_color}; + +/* +widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color}; + +/* +text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color #{"" +$text_color}; + +/* +widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color}; + +/* +text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #{"" +$backdrop_base_color}; + +/* +base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color}; + +/* +text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color}; + +/* +insensitive color on backdrop windows*/ +@define-color unfocused_insensitive_color #{"" + $backdrop_insensitive_color}; + +/* +widgets main borders color */ +@define-color borders #{"" +$borders_color}; + +/* +widgets main borders color on backdrop windows */ +@define-color unfocused_borders #{"" +$backdrop_borders_color}; + +/* +these are pretty self explicative */ +@define-color warning_color #{"" +$warning_color}; +@define-color error_color #{"" +$error_color}; +@define-color success_color #{"" +$success_color}; +//@define-color destructive_color #{$destructive_color} + +//WM + +$_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is + transparentize(black,1)); // done directly in the + // color definition + +/* +these colors are exported for the window manager and shouldn't be used in applications, +read if you used those and something break with a version upgrade you're on your own... */ +@define-color wm_title shade(#{$fg_color}, 1.8); +@define-color wm_unfocused_title #{$backdrop_fg_color}; +@define-color wm_highlight #{"" + $_wm_highlight}; +@define-color wm_borders_edge #{"" + $borders_edge}; + +@define-color wm_bg_a shade(#{$bg_color}, 1.2); +@define-color wm_bg_b #{$bg_color}; + +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); + +@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3); +@define-color wm_button_hover_color_b #{$bg_color}; +@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85); +@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89); +@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9); + +//FIXME this is really an API + +/* content view background such as thumbnails view in Photos or Boxes */ +@define-color content_view_bg #{"" + $base_color}; + +/* Very contrasty background for text views (@theme_text_color foreground) */ +@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color,6%))}; diff --git a/gtk/src/Plano/gtk-4.0/_colors.scss b/gtk/src/Plano/gtk-4.0/_colors.scss new file mode 100644 index 0000000..a4b3c68 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/_colors.scss @@ -0,0 +1,86 @@ +// When color definition differs for dark and light variant +// it gets @if ed depending on $variant + +$base_color: if($variant == 'light', #ffffff, #232729); +$text_color: if($variant == 'light', black, white); +$bg_color: if($variant == 'light', #ebeced, #33393b); +$fg_color: if($variant == 'light', #2c2c2c, #eeeeec); + +$selected_fg_color: #ffffff; +$selected_bg_color: #4a90d9; +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); +$borders_color: if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 4%)); +$alt_borders_color: if($variant == 'light', darken($bg_color, 30%), darken($bg_color, 8%)); +$borders_edge: if($variant == 'light' and $alt_header == 'false', transparentize(white, 0.7), transparentize(white, 0.96)); +$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); +$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); +$top_hilight: $borders_edge; +$dark_fill: if($variant == 'light', mix($borders_color, $bg_color, 70%), darken($base_color, 4%)); +$headerbar_bg_color: if($variant == 'light', darken($bg_color, 3%), lighten($bg_color, 4%)); +$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); +$menu_selected_color: if($variant == 'light', darken($bg_color, 6%), darken($bg_color, 8%)); + +$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%)); +$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); +$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); +$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); + +$warning_color: #f57900; +$error_color: #cc0000; +$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); +$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); + +$osd_fg_color: #eeeeec; +$osd_text_color: white; +$osd_bg_color: if($variant == 'light', transparentize(darken(desaturate(#3d3846, 100%), 4%),0.3), transparentize(darken(desaturate(#3d3846, 100%), 10%),0.3)); +$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_borders_color: transparentize(black, 0.3); + +$sidebar_bg_color: mix($bg_color, $base_color, 50%); + +$tooltip_borders_color: transparentize(white, 0.9); +$shadow_color: transparentize(black, 0.9); + +$drop_target_color: $selected_bg_color; + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: mix($borders_color, $bg_color, 80%); + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); +$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); +$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color); +$backdrop_borders_color: mix($borders_color, $bg_color, 80%); +$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); + +//special cased widget colors +$suggested_bg_color: $selected_bg_color; +$suggested_border_color: $selected_borders_color; +$progress_bg_color: $selected_bg_color; +$progress_border_color: $selected_borders_color; +$checkradio_bg_color: $selected_bg_color; +$checkradio_fg_color: $selected_fg_color; +$checkradio_borders_color: if($variant == 'light',darken($selected_bg_color,10%),darken($selected_bg_color,20%)); +$switch_bg_color: $selected_bg_color; +$switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%)); +$focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), transparentize($selected_bg_color, 0.3)); +$alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7)); +$dim_label_opacity: 0.55; + +//custom theme colors +$close_button: if($alt_header=='true' or $variant=='dark', #a45f5f, #d35f5f); +$close_button_hover: if($alt_header=='true' or $variant=='dark', #d35f5f, #a02c2c); +$close_button_backdrop: if($alt_header=='true' or $variant=='dark', transparentize(white, 0.8), darken($dark_fill, 18%)); +$max_min_hover: $selected_bg_color; +$alt_headerbar_bg: lighten(#33393b, 4%); +$alt_headerbar_fg: #eeeeec; +$alt_headerbar_border: darken($alt_headerbar_bg, 8%); +$alt_headerbar_backdrop_fg: mix($alt_headerbar_fg, $alt_headerbar_bg, 60%); +$panel_bg: #33393b; +$panel_fg: #eeeeec; diff --git a/gtk/src/Plano/gtk-4.0/_common.scss b/gtk/src/Plano/gtk-4.0/_common.scss new file mode 100644 index 0000000..16fa8c3 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/_common.scss @@ -0,0 +1,4133 @@ +@function gtkalpha($c,$a) { + @return unquote("alpha(#{$c},#{$a})"); +} + +$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$asset_suffix: if($variant=='dark', '-dark', ''); +$backdrop_transition: none; +$button_transition: all 100ms $ease-out-quad; +$focus_transition: outline-width 100ms $ease-out-quad, outline-offset 100ms $ease-out-quad; +$button_radius: 0px; +$menu_radius: 0px; +$menu_margin: 0px; //margin around menuitems & sidebar items +$window_radius: 0px; +$popover_radius: $button_radius; //+ 4; + +// Custom Optional compact sizes for buttons, headerbar and headerbar widgets +$_sizevariant: 'default'; //default or compact +$_headerbar_height: if($_sizevariant=='default', 38px, 34px); +$_entry_height: if($_sizevariant=='default', 24px, 24px); +$_btn_pad: if($_sizevariant=='default', 4px 4px, 2px 3px); +$_hb_btn_pad: if($_sizevariant=='default', 4px, 3px); +$_img_btn_pad: if($_sizevariant=='default', 4px, 2px); +$_sel_menu_pad: if($_sizevariant=='default', 6px 10px, 4px 10px); +$_circ_btn_pad: if($_sizevariant=='default', 4px, 2px); +$_switch_margin: if($_sizevariant=='default', 4px, 4px); // custom theme note: Same vertical margin as buttons to avoid a "jumping" headerbar when + // switches are available. Headerbar switches needs extra styling though, or they'll look strange. + // Alternatively use the compact sizevariant. + +// custom variables +$titlebutton_size: 20px; +$csd_title_height: 28px; +// duration +$shortest_duration: 50ms; +$shorter_duration: 100ms; +$short_duration: 150ms; +$longer_duration: 250ms; +$longest_duration: 500ms; +$duration: 75ms; +$ease: cubic-bezier(.4, 0, .2, 1); +$ease-out: cubic-bezier(0, 0, .2, 1); +$ease-in: cubic-bezier(.4, 0, 1, 1); +$ease-in-out: cubic-bezier(.4, 0, .6, 1); + +//-------------// +// Base States // +//-------------// +.background { + color: $fg_color; + background-color: $bg_color; + + &:backdrop { + text-shadow: none; + -gtk-icon-shadow: none; + } +} + +dnd { + color: $fg-color; +} + +.normal-icons { + -gtk-icon-size: 16px; +} + +.large-icons { + -gtk-icon-size: 32px; +} + +// +// These wildcard seems unavoidable, need to investigate. +// Wildcards are bad and troublesome, use them with care, +// or better, just don't. +// Everytime a wildcard is used a kitten dies, painfully. +// + +spinner:disabled, +arrow:disabled, +scrollbar:disabled, +check:disabled, +radio:disabled, +treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); } + +.view, +%view { + color: $text_color; + background-color: $base_color; + + &:disabled { + color: $insensitive_fg_color; + background-color: $insensitive_bg_color; + } + + &:selected { + &:focus, & { + @extend %selected_items; + + border-radius: $button_radius; + } + } +} + +textview { + > text { + @extend %view; + + > selection { &:focus, & { @extend %selected_items; }} + } + + &:drop(active) { + caret-color: $drop_target_color; + } +} + +textview > border { background-color: mix($bg_color, $base_color, 50%); } + +iconview { + @extend .view; + + @include focus-ring(); + + &:drop(active) { + box-shadow: none; + } + + > dndtarget:drop(active) { + border-style: solid; + border-width: 1px; + border-color: $selected_borders_color; + } +} + +rubberband { + border: 1px solid darken($selected_bg_color, 10%); + background-color: transparentize(darken($selected_bg_color, 10%), 0.8); +} + +flowbox { + > rubberband { @extend rubberband; } + + > flowboxchild { + padding: 3px; + transition: $focus_transition; + + @include focus-ring(); + + &:selected { + outline-color: $alt_focus_border_color; + + @extend %selected_items; + } + } +} + +gridview { + > rubberband { @extend rubberband; } + + > child { + padding: 3px; + transition: $focus_transition; + + @include focus-ring(); + + &:selected { + outline-color: $alt_focus_border_color; + + @extend %selected_items; + } + + box { //cells + border-spacing: 8px; //label separation + margin: 12px; + } + } +} + +coverflow cover { + color: $text_color; + background-color: $base_color; + border: 1px solid black; +} + +label { + @include focus-ring(); + + &.separator { + @extend .dim-label; + } + + &:selected { @extend %nobg_selected_items; } + + > selection { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:disabled { + color: $insensitive_fg_color; + + button & { color: inherit; } + + > selection { @extend %selected_items_disabled; } + } + + &.error { + color: $error_color; + &:disabled { color: transparentize($error_color,0.5); } + } +} + +.dim-label { + opacity: $dim_label_opacity; + text-shadow: none; +} + +window.assistant { + .sidebar { + padding: $menu-margin; + border-top: 1px solid $borders_color; + } + + &.csd .sidebar { border-top-style: none; } + + .sidebar > label { + padding: 6px 12px; + } + + .sidebar > label.highlight { + background-color: $selected_bg_color; //$menu_selected_color; + color: $selected_fg_color; + border-radius: 0; //$menu-margin; + } +} + +window.aboutdialog image.large-icons { + -gtk-icon-size: 128px; +} + +%osd, +.osd { + color: $osd_fg_color; + border: none; + background-color: $osd_bg_color; + background-clip: padding-box; + -gtk-icon-shadow: 0 1px black; + +} + +//-------------------// +// Spinner Animation // +//-------------------// +@keyframes spin { + to { transform: rotate(1turn); } +} + +spinner { + background: none; + opacity: 0; // non spinning spinner makes no sense + -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); + + &:checked { + opacity: 1; + animation: spin 1s linear infinite; + + &:disabled { opacity: 0.5; } + } +} + +//--------------------// +// General Typography // +//--------------------// + +.large-title { + font-weight: 300; + font-size: 24pt; +} +.title-1 { + font-weight: 800; + font-size: 20pt; +} +.title-2 { + font-weight: 800; + font-size: 15pt; +} +.title-3 { + font-weight: 700; + font-size: 15pt; +} +.title-4 { + font-weight: 700; + font-size: 13pt; +} +.heading { + font-weight: 700; + font-size: 11pt; +} +.body { + font-weight: 400; + font-size: 11pt; +} +.caption-heading { + font-weight: 700; + font-size: 9pt; +} +.caption { + font-weight: 400; + font-size: 9pt; +} + +//--------------// +// Text Entries // +//--------------// + +%entry, +entry { + %entry_basic, & { + min-height: $_entry_height; + padding-left: 8px; + padding-right: 8px; + border: 1px solid; + border-radius: $button_radius; + border-spacing: 6px; + transition: all $short_duration $ease-out-quad; + + @include entry(normal); + + @include focus-ring($focus-state: 'focus-within'); + + > image { // icons inside the entry + &.left { margin-right: 6px; } + &.right { margin-left: 6px; } + } + + > text > placeholder { + @extend .dim-label; + } + + > text > block-cursor { + @include entry(block_cursor); + } + + &.flat { + &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & { + min-height: 0; + padding: 2px; + background-color: transparent; + border-color: transparent; + border-radius: 0; + } + } + + &:focus-within { + @include entry(focus); + > placeholder { + opacity: 0; // We hide placeholders on focus + } + } + + &:disabled { @include entry(insensitive); } + + > text > selection { @extend %selected_items; } + + // entry error and warning style + @each $e_type, $e_color in (error, $error_color), + (warning, $warning_color) { + &.#{$e_type} { + color: $e_color; + + @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5)); + + &:focus-within { @include entry(focus, $e_color); } + + > selection { background-color: $e_color; } + } + } + + > image { // entry icons colors + color: mix($fg_color, $base_color, 80%); + + &:hover { color: $fg_color; } + + &:active { color: $selected_bg_color; } + + } + + &.password image.caps-lock-indicator { + color: mix($backdrop_fg_color, $backdrop_base_color, 80%); + } + + &:drop(active) { + &:focus-within, & { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + + .osd & { + @include entry(osd); + + &:focus-within { @include entry(osd-focus); } + + &:disabled { @include entry(osd-insensitive); } + } + } + + > progress { + margin-bottom: 2px; + } + + progress > trough > progress { + background-color: transparent; + background-image: none; + border-radius: 0; + border-width: 0 0 2px; + border-color: $selected_bg_color; + border-style: solid; + box-shadow: none; + + } + + // linked entries + .linked:not(.vertical) > & { @extend %linked; } + + .linked:not(.vertical) > &:drop(active) + &, + .linked:not(.vertical) > &:drop(active) + button, + .linked:not(.vertical) > &:drop(active) + menubutton > button, + .linked:not(.vertical) > &:drop(active) + dropdown > button, + .linked:not(.vertical) > &:drop(active) + colorbutton > button, + .linked:not(.vertical) > &:drop(active) + fontbutton > button, + .linked:not(.vertical) > &:drop(active) + filechooserbutton > button, + .linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo, + .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo, + .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; } + + // Vertically linked entries + // FIXME: take care of "colored" entries + .linked.vertical > & { + @extend %linked_vertical; + + // brighter border between linked entries + &:not(:disabled) + entry:not(:disabled), + &:not(:disabled) + %entry:not(:disabled) { + border-top-color: mix($borders_color, $base_color, 30%); + } + + // brighter border between linked insensitive entries + &:disabled + %entry:disabled, + &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } + + + %entry:drop(active):not(:only-child), + + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; } + + &:drop(active):not(:only-child) { + + %entry, + + entry, + + button, + + menubutton > button, + + dropdown > button, + + colorbutton > button, + + fontbutton > button, + + filechooserbutton > button, + + filechooserbutton > combobox > box > button.combo, + + appchooserbutton > combobox > box > button.combo, + + combobox > box > button.combo { border-top-color: $drop_target_color; } + } + } + + &.error { color: $error_color; } +} + +treeview entry { + &:focus-within { + &:dir(rtl), &:dir(ltr) { // specificity bump hack + background-color: $base_color; + transition-property: color, background; + } + } + + &.flat, & { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus-within { border-color: $selected_bg_color; } + } +} + +//-----------------// +// Editable Labels // +//-----------------// +editablelabel > stack > text { + @include entry(normal); +} + +//---------// +// Buttons // +//---------// +// stuff for .needs-attention +$_dot_color: if($variant=='light', $selected_bg_color, + lighten($selected_bg_color,15%)); +@keyframes needs_attention { + from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); } + to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); } +} + +%button, +button { + @at-root %button_basic, & { + + min-height: 20px; + min-width: 16px; + padding: $_btn_pad; + border: 1px solid; + border-radius: $button_radius; + transition: $button_transition; + + @include button(normal); + + @include focus-ring(); + + &:hover { + @include button(hover); + -gtk-icon-filter: brightness(1.2); + } + + &:active, + &:checked { + @include button(active); + + transition-duration: $shortest_duration; + } + + &:checked:hover { @include button(checked-hover); } + &:checked:active { @include button(checked-active); } + + &:backdrop { + &.flat, & { + @include button(backdrop); + + transition: $backdrop_transition; + -gtk-icon-filter: none; + + &:active, + &:checked { @include button(backdrop-active); } + + &:disabled { + @include button(backdrop-insensitive); + + &:active, + &:checked { @include button(backdrop-insensitive-active); } + } + } + } + + &:disabled { + @include button(insensitive); + + &:active, + &:checked { @include button(insensitive-active); } + } + + @at-root %button_basic_flat, + &.flat { + @include button(undecorated); + // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set + // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but + // it won't fade out when the pointer leave the button allocation area. To make the transition more evident + // in this case the duration is increased. + transition: none; + + &:hover { + @include button(undecorated-hover); + transition: $button_transition; + transition-duration: 500ms; + } + &:active, + &:checked { + @include button(undecorated-active); + transition: $button_transition; + } + &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); } + } + + &.image-button { + min-width: 24px; + padding-left: $_img_btn_pad; + padding-right: $_img_btn_pad; + } + + &.text-button { + padding-left: 16px; + padding-right: 16px; + } + + &.text-button.image-button { + padding-left: 8px; + padding-right: 8px; + + label { + padding-left: 8px; + padding-right: 8px; + } + } + + @at-root %button_basic_drop_active, + &:drop(active) { + color: $drop_target_color; + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + + @at-root %button_selected, & { + row:selected & { + @if $variant == 'light' { border-color: $selected_borders_color; } + } + + @at-root %button_selected_flat, &.flat { + row:selected & { + &:not(:active):not(:checked):not(:hover):not(disabled) { + color: $selected_fg_color; + border-color: transparent; + + &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); } + } + } + } + } + + + // big standalone buttons like in Documents pager + &.osd { + min-width: 26px; + min-height: 32px; + + &.image-button { + min-width: 30px; + &:only-child { + margin: 4px; + border-radius: 50%; // completely round when it is a single button + box-shadow: 0 1px 2px transparentize(black, 0.8); // drop shadow for the only child + }; + } + + color: $osd_fg_color; + border-radius: $window_radius; + + @include button(osd); + + border: none; + box-shadow: none; + + &:hover { + @include button(osd-hover); + + border: none; + box-shadow: none; + } + + &:active, + &:checked { + @include button(osd-active); + + border: none; + box-shadow: none; + } + } + + //overlay / OSD style + @at-root %osd_button, + .osd & { + @include button(osd); + + &:hover { @include button(osd-hover); } + + &:active, + &:checked { &:backdrop, & { @include button(osd-active); }} + + &:disabled { &:backdrop, & { @include button(osd-insensitive); }} + + &.flat { + @include button(undecorated); + + box-shadow: none; + -gtk-icon-shadow: 0 1px black; + + &:hover { @include button(osd-hover); } + + &:disabled { + @include button(osd-insensitive); + background-image: none; + border-color: transparent; + box-shadow: none; + } + + &:active, + &:checked { @include button(osd-active); } + } + } + + // Suggested and Destructive Action buttons + @each $b_type, $b_color in (suggested-action, $selected_bg_color), + (destructive-action, $destructive_color) { + &.#{$b_type} { + @include button(normal, $b_color, white); + @include focus-ring($fc: $alt_focus_border_color); + + &.flat { + @include button(undecorated); + + color: $b_color; //FIXME: does it work on the dark variant? + } + + &:hover { @include button(hover, $b_color, white); } + + &:active, + &:checked { @include button(active, $b_color, white); } + + &.flat { + &:disabled { + @include button(undecorated); + + color: transparentize($b_color, 0.2); + } + } + + &:disabled { + @include button(insensitive); + + &:active, + &:checked { @include button(insensitive-active, $b_color, white); } + } + + .osd & { + @include button(osd, $b_color); + + &:hover { @include button(osd-hover, $b_color); } + + &:active, + &:checked { &:backdrop, & { @include button(osd-active, $b_color); }} + + &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }} + + } + } + } + + stackswitcher > & { + // to position the needs attention dot, padding is added to the button + // child, a label needs just lateral padding while an icon needs vertical + // padding added too. + + > label { + padding: 0 6px; + margin: 0 -6px; + } + + > image { + padding: 3px 6px; + margin: -3px -6px; + } + + &.needs-attention { + > label, + > image { @extend %needs_attention; } + } + } + + // hide separators + &.font{ + separator { background-color: transparent; } + > box { border-spacing: 6px; } + > box > box > label { font-weight: bold; } + } + + .linked:not(.vertical) > & { @extend %linked; } + + .linked.vertical > & { @extend %linked_vertical; } + + &.circular { // force circular button shape + min-width: 32px; + min-height: 32px; + padding: 0; + border-radius: 9999px; + + label { padding: 0; } + } +} + +%needs_attention { + // the dot is drawn by using two radial gradient, the first one is the actual dot, the other + // simulates the shadow labels and icons normally have in buttons. + animation: needs_attention 150ms ease-in; + + background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + + @if $variant == 'light' { background-position: right 3px, right 4px; } + + @else { background-position: right 3px, right 2px; } + + &:backdrop { background-size: 6px 6px, 0 0;} + + &:dir(rtl) { + @if $variant == 'light' { background-position: left 3px, left 4px; } + + @else { background-position: left 3px, left 2px; } + } +} + + +%linked_not_left { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +%linked_not_right { + border-right-style: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +// 1st/last child are at text start/end +%linked { + &:dir(ltr) { + &:not(:first-child) { @extend %linked_not_left; } + &:not(:last-child) { @extend %linked_not_right; } + } + + &:dir(rtl) { + &:not(:first-child) { @extend %linked_not_right; } + &:not(:last-child) { @extend %linked_not_left; } + } +} + +%linked_not_top { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +%linked_not_bottom { + border-bottom-style: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +%linked_vertical { + &:not(:first-child) { @extend %linked_not_top; } + + &:not(:last-child) { @extend %linked_not_bottom; } +} + +%undecorated_button { + background-color: transparent; + background-image: none; + border-color: transparent; + box-shadow: inset 0 1px transparentize(white, 1), + 0 1px transparentize(white, 1); + text-shadow: none; + -gtk-icon-shadow: none; +} + +.linked:not(.vertical) > menubutton, +.linked:not(.vertical) > dropdown, +.linked:not(.vertical) > colorbutton, +.linked:not(.vertical) > fontbutton, +.linked:not(.vertical) > filechooserbutton { + &:dir(ltr) { + &:not(:first-child) > button { @extend %linked_not_left; } + &:not(:last-child) > button { @extend %linked_not_right; } + } + + &:dir(rtl) { + &:not(:first-child) > button { @extend %linked_not_right; } + &:not(:last-child) > button { @extend %linked_not_left; } + } +} + +.linked.vertical > menubutton, +.linked.vertical > dropdown, +.linked.vertical > colorbutton, +.linked.vertical > fontbutton, +.linked.vertical > filechooserbutton { + &:not(:first-child) > button { @extend %linked_not_top; } + &:not(:last-child) > button { @extend %linked_not_bottom; } +} + +// menu buttons +modelbutton.flat { + min-height: 26px; + padding-left: 5px; + padding-right: 5px; + border-radius: $button_radius; + + @extend %undecorated_button; + + &:hover { + background-color: $selected_bg_color; //$menu_selected_color; + color: $selected_fg_color; + } + + &:disabled { + color: $insensitive_fg_color; + } + + &:selected { @extend %selected_items; } +} + +modelbutton.flat arrow { + background: none; + min-width: 16px; + min-height: 16px; + opacity: 0.3; //dim icon + + &:hover { background: none; } + + &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } + + &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } +} + +// oldstyle toolbar buttons + +.toolbar button { + margin: 1px; + @extend %undecorated_button; + + &:hover { @include button('hover'); } + &:active { @include button('active'); } + &:disabled { @include button('insensitive'); } + &:backdrop { @include button('backdrop'); } + &:backdrop:disabled { @include button('backdrop-insensitive'); } +} + +button.color { + padding: 4px; + + > colorswatch:only-child { + &, > overlay { border-radius: 0; } + + @if $variant == 'light' { + box-shadow: 0 1px $shadow_color; + + .osd & { box-shadow: none; } + } + } + + @if $variant == 'light' { + .osd &, & { + &:disabled, + &:active, + &:checked { colorswatch:only-child { box-shadow: none; }} + } + } +} + +// list buttons +// tone down as per new designs, see issue #1473 +%list_button, +list > row button.image-button:not(.flat) { + @extend %undecorated_button; + border: 1px solid transparentize($borders_color, .5); + &:hover { @include button(hover); } + &:active, + &:checked { @include button(active); } + + @each $b_type, $b_color in (suggested-action, $selected_bg_color), + (destructive-action, $destructive_color) { + &.#{$b_type} { // allow colored buttons in lists #3643 + @include button(normal, $b_color, white); + @include focus-ring($fc: $alt_focus_border_color); + } + } +} + +//-------// +// Links // +//-------// + +%link, +link { + color: $link_color; + text-decoration: underline; + + &:visited { + color: $link_visited_color; + + *:selected & { color: mix($selected_fg_color, $link_visited_color, 60%); } + } + + &:hover { + $_fg: lighten($link_color, 10%); + color: $_fg; + + *:selected & { color: mix($selected_fg_color, $_fg, 90%); } + } + + &:active { + color: $link_color; + + *:selected & { color: mix($selected_fg_color, $link_color, 80%); } + } + + &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); } + + @at-root %link_selected, + &:selected, + *:selected & { color: mix($selected_fg_color, $link_color, 80%); } +} + +link { + @include focus-ring(); +} + +button.link { + @extend %link; + + &, + &:hover, + &:active, + &:checked { + @extend %undecorated_button; + + text-shadow: none; + } + + > label { + text-decoration: underline; + } +} + +//---------------// +// GtkSpinButton // +//---------------// +spinbutton { + &:not(.vertical) { + // in this horizontal configuration, the whole spinbutton + // behaves as the entry, so we extend the entry styling + // and nuke the style on the internal entry + @extend %entry; + + padding: 0; + border-spacing: 0; + + %spinbutton_horz_entry { + min-width: 28px; + // reset all the other props since the spinbutton node is styled here + margin: 0; + background: none; + background-color: transparent; + border: none; + border-radius: 0; + box-shadow: none; + padding: 6px; + + &:backdrop:disabled { background-color: transparent; } + } + + > text { + @extend %spinbutton_horz_entry; + } + + // :not here just to bump specificity above that of the list button styling + > button.image-button.up:not(.flat), + > button.image-button.down:not(.flat) { + min-height: 16px; + margin: 0; + padding-bottom: 0; + padding-top: 0; + color: mix($fg_color, $base_color, 90%); + background-image: none; + border-style: none none none solid; + border-color: transparentize($borders_color, 0.7); + border-radius: 0; + box-shadow: none; + + &:dir(rtl) { border-style: none solid none none; } + + &:hover { + color: $fg_color; + background-color: darken($bg_color,5%); + } + + &:disabled { + color: transparentize($insensitive_fg_color, 0.7); + background-color: transparent; + } + + &:active { + background-color: transparentize(black, 0.9); + box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); + } + + &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; } + + &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; } + } + } + + // OSD horizontal + .osd &:not(.vertical) { + > text { + @extend %spinbutton_horz_entry; + } + + > button.image-button.up:not(.flat), + > button.image-button.down:not(.flat) { + @include button(undecorated); + + color: $osd_fg_color; + border-style: none none none solid; + border-color: transparentize($osd_borders_color, 0.3); + border-radius: 0; + box-shadow: none; + -gtk-icon-shadow: 0 1px black; + + &:dir(rtl) { border-style: none solid none none; } + + &:hover { + @include button(undecorated); + + color: $osd_fg_color; + border-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-color: darken($osd_bg_color,10%); + -gtk-icon-shadow: 0 1px black; + box-shadow: none; + } + + &:disabled { + @include button(undecorated); + + color: $osd_insensitive_fg_color; + border-color: transparentize(opacify($osd_borders_color, 1), 0.5); + -gtk-icon-shadow: none; + box-shadow: none; + } + + &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; } + + &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; } + } + } + + // Vertical + &.vertical { + // in the vertical configuration, we treat the spinbutton + // as a box, and tweak the style of the entry in the middle + // so that it's linked + + // FIXME: this should not be set at all, but otherwise it gets the wrong + // color + &:disabled { color: $insensitive_fg_color; } + + &:drop(active) { + border-color: transparent; + box-shadow: none; + } + + > text { + @extend %entry; + + min-height: 32px; + min-width: 32px; + padding: 0; + border-radius: 0; + + > selection { @extend %selected_items; } + > block-cursor { @include entry(block_cursor); } + } + + > button { + min-height: 32px; + min-width: 32px; + padding: 0; + + &.up { @extend %top_button; } + + &.down { @extend %bottom_button; } + } + + %top_button { + border-bottom-style: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + %bottom_button { + border-top-style: none; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + + // OSD vertical + .osd &.vertical > button:first-child { + @include button(osd); + + &:hover { @include button(osd-hover);} + + &:active { @include button(osd-active); } + + &:disabled { @include button(osd-insensitive); } + } + + // Misc + treeview &:not(.vertical) { + min-height: 0; + border-style: none; + border-radius: 0; + + > text { + min-height: 0; + padding: 1px 2px; + } + } + + font-feature-settings: "tnum"; +} + +//------------// +// ComboBoxes // +//------------// +dropdown > popover.menu.background > contents { padding: 0; } //allow search entries with no margin + +dropdown > button > box { + border-spacing: 6px; +} + +dropdown, +combobox { + arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + min-height: 16px; + min-width: 16px; + } + + // align menu labels with the button label + > popover.menu > contents modelbutton { + padding-left: 9px; + padding-right: 9px; + } + + &.linked { + button:nth-child(2) { + &:dir(ltr) { @extend %linked_not_left; } + &:dir(rtl) { @extend %linked_not_right; } + } + } + + &:drop(active) { // FIXME: untested + box-shadow: none; + + button.combo { @extend %button_basic_drop_active; } + } + + // newstyle + popover { + margin-top: 6px; + padding: 0; + + listview { + + margin: 8px 0; + + &>row { + padding: 8px; + + &:selected { + outline-color: $alt_focus_border_color; + color: $text-color; + background-color: $menu_selected_color; + } + } + } + + // drodowns with searchboxes on top + .dropdown-searchbar { + padding: 6px; + border-bottom: 1px solid $borders_color; + } + } +} + +// the combo is a composite widget so the way we do button linking doesn't +// work, special case needed. See +// https://bugzilla.gnome.org/show_bug.cgi?id=733979 + +.linked:not(.vertical) > filechooserbutton > combobox, +.linked:not(.vertical) > appchooserbutton > combobox, +.linked:not(.vertical) > combobox { + &:dir(ltr) { + &:not(:first-child) > box > button.combo { @extend %linked_not_left; } + &:not(:last-child) > box > button.combo { @extend %linked_not_right; } + } + + &:dir(rtl) { + &:not(:first-child) > box > button.combo { @extend %linked_not_right; } + &:not(:last-child) > box > button.combo { @extend %linked_not_left; } + } +} + +.linked.vertical > filechooserbutton > combobox, +.linked.vertical > appchooserbutton > combobox, +.linked.vertical > combobox { + &:not(:first-child) > box > button.combo { @extend %linked_not_top; } + &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; } +} + +//----------// +// Toolbars // +//----------// +%toolbar { + padding: 4px 3px 3px 4px; //4px; + border-spacing: 4px; + background-color: $bg_color; +} + +.toolbar, +toolbar { + @extend %toolbar; + + // on OSD + .osd & { background-color: transparent; } + + // stand-alone OSD toolbars + &.osd { + padding: 13px; + border: none; + border-radius: $window_radius; + background-color: $osd_bg_color; + + &.left, + &.right, + &.top, + &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars + } + + // toolbar separators + &.horizontal > separator { margin: 4px 0; } + &.vertical > separator { margin: 0 4px; } +} + +//searchbar & location-bar +searchbar > revealer > box { + padding: 6px; + border-spacing: 6px; + @extend %toolbar; + + @extend %darkbar; + + border-width: 0 0 1px; +} + +%darkbar { + border-style: solid; + border-color: $borders_color; + $_bg: mix($bg_color, $borders_color, 70%); + background-color: $_bg; + + &:backdrop { + border-color: $backdrop_borders_color; + background-color: $backdrop_dark_fill; + box-shadow: none; + transition: $backdrop_transition; + } +} + +//------------// +// GtkInfoBar // +//------------// +infobar { + > revealer > box { + padding: 8px; + border-spacing: 12px; + } + + &.action:hover > revealer > box { + background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%), + desaturate(darken(invert($selected_bg_color), 42%), 70%)); + } + + &.info, + &.question, + &.warning, + &.error { + > revealer > box { + border-bottom: 1px solid lighten($borders_color, 5%); + background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%), + desaturate(darken(invert($selected_bg_color), 40%), 70%)); + } + } +} + + //close button for info and searchbar (#3215) + + infobar .close, + searchbar .close { + @include button(undecorated); + min-width: 16px; + min-height: 16px; + padding: 4px; + border-radius: 50%; + + &:hover { @include button(hover); } + } + +//---------------// +// Title buttons // +//---------------// + +windowcontrols { + border-spacing: 0px; + @extend %titlebuttons; // styled in _custom.scss +} + +//-------------// +// Header bars // +//-------------// +%titlebar, +headerbar { + padding: 0 4px; + min-height: $_headerbar_height; + border-width: 0; //0 0 1px; + border-style: solid; + border-color: $borders_color; //$alt_borders_color; + border-radius: 0; + + @include headerbar_fill; //headerbar_fill(darken($bg_color, 10%)); + + &:backdrop { + //border-color: $backdrop_borders_color; + //background-color: $bg_color; + background-image: none; + @if $alt_header == 'false' { box-shadow: inset 0 1px $top_hilight; } + //transition: $backdrop_transition; + } + + .title { + padding-left: 12px; + padding-right: 12px; + font-weight: bold; + } + + .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; + + @extend .dim-label; + } + + // Darken switchbuttons for headerbars. issue #1588 + //stackswitcher > button:checked, + //button.toggle:checked { + //@include button(active); + //background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%))); + //border-color: darken($borders_color, 3%); + //border-top-color: darken($borders_color, 8%); + //&:backdrop { + //@include button(backdrop-active); + //} + //} + + // squared corners when the window is maximized, tiled, or fullscreen + .tiled &, + .tiled-top &, + .tiled-left &, + .tiled-right &, + .tiled-bottom &, + .maximized &, + .fullscreen & { + &:backdrop, & { + border-radius: 0; + box-shadow: none; // Custom style: get rid of the top hilight on maximized windows + } + } + + &.default-decoration { + min-height: $csd_title_height; //28px; + padding: 0 4px; + + .maximized & { // No top highlight on maximized windows + box-shadow: none; + } + + windowcontrols { + button { // custom style + min-height: $titlebutton_size; + min-width: $titlebutton_size; + } + //button, + menubutton { + min-height: 26px; + min-width: 26px; + margin: 0; + padding: 0; + } + + menubutton button { + min-height: 20px; + min-width: 20px; + margin: 0; + padding: 4px; + } + } + } + + separator { // custom style + &, &:backdrop { @include headerbar_fill; } + } + + .solid-csd & { + &:backdrop, & { + &:dir(rtl), &:dir(ltr) { // specificity bump + margin-left: -1px; + margin-right: -1px; + margin-top: -1px; + border-radius: 0; + box-shadow: none; + } + } + } +} + +headerbar { + > windowhandle > box { + &, + > box.start, + > box.end { + border-spacing: 6px; + } + } + + // add vertical margins to common widget on the headerbar to avoid them spanning the whole height + entry, + spinbutton, + separator:not(.sidebar), + button, + menubutton { + margin-top: $_hb_btn_pad; + margin-bottom: $_hb_btn_pad; + } + + // Reset margins for buttons inside menubutton + menubutton > button { + margin-top: 0px; + margin-bottom: 0px; + } + + switch { + // FIXME: Switches may look a bit disorted with these margins. It is to prevent the headerbar from "jumping". + margin-top: $_switch_margin + 4; // 10px; + margin-bottom: $_switch_margin + 4; // 10px; + } + + &.titlebar headerbar:not(.titlebar) { + // Drop the background of non-titlebar nested headerbars. This is needed to + // work around headerbar sliding animation issues without refactoring + // Adwaita's support of titlebars and headerbars as it may break + // applications. + // See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information. + background: none; + box-shadow: none; + } +} + +.titlebar:not(headerbar) { + window.csd > & { + // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; + } + + separator { background-color: $borders_color; } // FIXME: use darker border? + + @extend %titlebar; +} + +// Development versions of apps to use a differently styled headerbar + +window.devel { + headerbar.titlebar { + $c: darken($bg_color, 10%); + $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, + linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)), + linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%)); + @if $variant == 'dark' { + $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, + linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)), + linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%)); + } + + background: $bg_color $gradient; + + &:backdrop { + background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, + image($bg_color); // background-color would flash + } + } +} + +//----------// +// Pathbars // +//----------// + +pathbar > button { + &.text-button, &.image-button, & { + padding-left: 4px; + padding-right: 4px; + } + + &.text-button.image-button label { + padding-left: 0; + padding-right: 0; + } + + &.text-button.image-button, & { + label:last-child { padding-right: 8px; } + label:first-child { padding-left: 8px; } + } + + image { + padding-left: 4px; + padding-right: 4px; + } + + &.slider-button { + padding-left: 0; + padding-right: 0; + } +} + +//------------// +// Tree Views // +//------------// + +$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%)); +$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%)); +columnview.view, +treeview.view { + border-left-color: $_treeview_borders_color; // this is actually the tree lines color, + border-top-color: $_treeview_borders_color; // while this is the grid lines color, better then nothing + + @include focus-ring(); + + > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props + + &:selected { + &:focus, & { + border-radius: 0; + outline-color: $alt_focus_border_color; + + @extend %selected_items; + } + } + + &:disabled { + color: $insensitive_fg_color; + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 40%); + &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } + } + } + + &.separator { + min-height: 2px; + color: $_treeview_borders_color; + } + + &:backdrop { + border-left-color: $_treeview_backdrop_borders_color; + border-top: $_treeview_backdrop_borders_color; + } + + &:drop(active) { + box-shadow: none; + } + + > dndtarget:drop(active) { + border-style: solid none; + border-width: 1px; + border-color: $selected_borders_color; + + &.after { border-top-style: none; } + + &.before { border-bottom-style: none; } + } + + &.expander { + // GtkTreeView uses the larger of the expander’s min-width and min-height + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + color: mix($text_color, $base_color, 70%); + + &:hover { color: $text_color; } + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 70%); + + &:hover { color: $selected_fg_color; } + } + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + } + + &.progressbar { // progress bar in treeviews + @if $variant == light { color: $base_color; } + + background-color: $selected_bg_color; + background-image: image($selected_bg_color); + box-shadow: none; + + &:selected { + &:focus, & { + + @if $variant == 'light' { + color: $selected_bg_color; + + } + + @else { box-shadow: inset 0 1px transparentize(white, 0.95); } + + background-image: image($base_color); + + &:backdrop { + @if $variant == 'light' { + color: $selected_bg_color; + } + background-color: $backdrop_base_color; + } + } + } + } + + &.trough { // progress bar trough in treeviews + background-color: transparentize($fg_color,0.9); + + &:selected { + &:focus, & { + background-color: if($variant == 'light', + transparentize($selected_fg_color, 0.7), + darken($selected_bg_color, 10%)); + + } + } + } + + > header { + > button { + $_column_header_color: mix($fg_color, $base_color, 50%); + + @extend %column_header_button; + + color: $_column_header_color; + background-color: $base_color; + font-weight: bold; + text-shadow: none; + box-shadow: none; + + &:hover { + @extend %column_header_button; + + color: mix($_column_header_color, $fg_color, 50%); + box-shadow: none; + transition: none; //I shouldn't need this + } + + &:active { + @extend %column_header_button; + + color: $fg_color; + transition: none; //I shouldn't need this + } + } + } + + button.dnd, + header.button.dnd { // for treeview-like derive widgets + &:active, &:selected, &:hover, & { + padding: 0 6px; + color: $base_color; + background-image: none; + background-color: $selected_bg_color; + border-style: none; + border-radius: 0; + box-shadow: inset 0 0 0 1px $base_color; + text-shadow: none; + transition: none; + } + } + + acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test +} + +%column_header_button { + padding: 0 6px; + background-image: none; + border-style: none none solid solid; + border-color: $_treeview_borders_color; + border-radius: 0; + text-shadow: none; + + &:disabled { + border-color: $bg_color; + background-image: none; + } + + &:last-child { &:backdrop, & { border-right-style: none; }} +} + +//----------// +// Popovers // +//----------// + +popover.background { + background-color: transparent; + font: initial; // Decouple the font of popovers from their entry/textview + + > arrow, + > contents { + $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); + + background-color: $menu_color; + background-clip: padding-box; + border: 1px solid $_popover_border; + box-shadow: 0 1px 2px transparentize(black, 0.7); + } + + &:backdrop { + background-color: transparent; + } + + > contents { + padding: 8px; + border-radius: $popover_radius; + + > list, + > .view, + > toolbar { + border-style: none; + background-color: transparent; + } + + separator { + background-color: mix($bg_color, $borders_color, 30%); + margin: 3px; + } + + list separator { margin: 0; } + } + + .osd &, + &.touch-selection, + &.magnifier { + background-color: transparent; + + > arrow, + > contents { + @extend %osd; + + border: 1px solid transparentize(white, 0.9); + box-shadow: none; + } + } + + &.touch-selection, + &.magnifier { + button { @extend %osd_button; } + } +} + +magnifier { + background-color: $base_color; +} + +//--------------------// +// Popover Base Menus // +//--------------------// + +$_menu-padding: 8px; //inner menuitem padding +//global $menu-margin for outside menuitems + +popover.menu { + padding: 0; + + box.inline-buttons { + padding: 0 $_menu-padding; + + button.image-button.model { + @include button(undecorated); + + min-height: 30px; + min-width: 30px; + padding: 0; + border: none; + outline: none; + transition: none; + + &:selected { background: image($menu_selected_color); } + } + } + + box.circular-buttons { + padding: $_menu-padding $_menu-padding 4px; + + button.circular.image-button.model { + @extend %list_button; + + padding: 11px; + &:focus { + background-color: $menu_selected_color; + border-color: $menu_selected_color; + } + } + } + + & > arrow, + &.background > contents { + background-color: $menu_color; + padding: $menu-margin; + } + + &.background separator { + margin: 6px 0; + } + + accelerator { + color: gtkalpha(currentColor,0.55); + + &:dir(ltr) { margin-left: $_menu-padding; } + &:dir(rtl) { margin-right: $_menu-padding; } + } + + check, + radio { + @include check('menu', 'transparent', $text_color); + + &:hover { @include check('menu-active', 'transparent', $selected_fg_color); } + &:active { @include check('menu-active', 'transparent', $text_color); } + } + + //only menu radios have a border + radio { + //border-color: $borders_color; + &:active { border-color: transparentize($borders_color,0.5); } + } + + arrow.left, + radio.left, + check.left { + margin-left: -2px; + margin-right: 6px; + } + + arrow.right, + radio.right, + check.right { + margin-left: 6px; + margin-right: -2px; + } + + modelbutton { + min-height: 30px; + min-width: 40px; + padding: 0 $_menu-padding; + border-radius: 0; //$menu-margin; + + &:selected { + color: $selected_fg_color; //$text-color; + //background-color: $selected_bg_color; //$menu_selected_color; + @extend %selected_items; + } + &:selected:active { + @extend %selected_items; + color: $selected_fg_color; + //background-color: darken($bg_color,14%); // matching buttons + } + } + + label.title { + font-weight: bold; + padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing + } +} + +// initial styling for popover menu and bar +menubar { + padding: 0px; + + > item { + min-height: 16px; + padding: 2px 8px; + + &:selected { //Seems like it :hover even with keyboard focus + background-color: $selected_bg_color; + color: $selected_fg_color; + border-radius: 0; + } + + &:disabled { + color: $insensitive_fg_color; + box-shadow: none; + } + } + + & > item popover.menu.background > contents { + padding: 0; //$menu-margin; + } + //nested submenus + & > item popover.menu popover.menu { + padding: 0 0 4px 0; + } + & > item popover.menu.background popover.menu.background > contents { + margin: 0; + border-radius: 0; //$popover_radius; //including top + } +} + +//-----------// +// Notebooks // +//-----------// +notebook { + @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible'); + + > header { + padding: 0; + border-width: 0; + background-color: if($variant=='light', $dark_fill, darken($base_color, 4%)); + + > tabs { margin: 0; } + + &.top { + border-bottom-style: solid; + > tabs { + > tab { + &:hover:not(:checked) { box-shadow: inset 0 -3px darken($borders_color, 5%); } + &:checked { box-shadow: inset 0 -3px $selected_bg_color; } + } + } + } + + &.bottom { + border-top-style: solid; + > tabs { + > tab { + &:hover:not(:checked) { box-shadow: inset 0 3px darken($borders_color, 5%); } + &:checked { box-shadow: inset 0 3px $selected_bg_color; } + } + } + } + + &.left { + border-right-style: solid; + > tabs { + > tab { + &:hover:not(:checked) { box-shadow: inset -3px 0 darken($borders_color, 5%); } + &:checked { box-shadow: inset -3px 0 $selected_bg_color; } + } + } + } + + &.right { + border-left-style: solid; + > tabs { + > tab { + &:hover:not(:checked) { box-shadow: inset 3px 0 darken($borders_color, 5%); } + &:checked { box-shadow: inset 3px 0 $selected_bg_color; } + } + } + } + + &.top > tabs > arrow { + @extend %notebook_vert_arrows; + + border-top-style: none; + } + + &.bottom > tabs > arrow { + @extend %notebook_vert_arrows; + + border-bottom-style: none; + } + + @at-root %notebook_vert_arrows { + margin-left: -5px; + margin-right: -5px; + padding-left: 4px; + padding-right: 4px; + + &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } + } + + &.left > tabs > arrow { + @extend %notebook_horz_arrows; + + border-left-style: none; + } + + &.right > tabs > arrow { + @extend %notebook_horz_arrows; + + border-right-style: none; + } + + @at-root %notebook_horz_arrows { + margin-top: -5px; + margin-bottom: -5px; + padding-top: 4px; + padding-bottom: 4px; + + &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + } + + > tabs > arrow { + @extend %button_basic; + + @extend %button_basic_flat; + + min-height: 16px; + min-width: 16px; + border-radius: 0; + + &:hover:not(:active):not(:backdrop) { + background-clip: padding-box; + background-image: none; + background-color: transparentize(white, 0.7); + border-color: transparent; + box-shadow: none; + } + + &:disabled { @include button(undecorated); } + } + + > tabs > tab { + //transition: $focus_transition; + min-height: 24px; + min-width: 24px; + padding: 0px 10px; //3px 12px; + + color: $fg_color; + font-weight: normal; + + border-width: 1px; // for reorderable tabs + border-color: transparent; // + + &:hover { + color: mix($insensitive_fg_color, $fg_color, 50%); //$fg_color; + background-color: gtkalpha(currentColor, .06); //darken($dark_fill,4%); + + //&.reorderable-page { + // border-color: transparentize($borders_color, 0.7); + // background-color: transparentize($bg_color, 0.8); + //} + } + + &:not(:checked) { + outline-color: transparent; + } + + &:checked { + color: $fg_color; + &.reorderable-page { + border-color: transparentize($borders_color, 0.5); + background-color: transparentize($bg_color, 0.5); + + &:hover { background-color: transparentize($bg_color, 0.3); } + } + } + + // colors the button like the label, overridden otherwise + button.flat { + color: gtkalpha(currentColor, 0.3); + &:hover { color: currentColor; } + + padding: 0; + margin-top: 4px; + margin-bottom: 4px; + // FIXME: generalize .small-button? + min-width: 20px; + min-height: 20px; + + &:last-child { + margin-left: 4px; + margin-right: -4px; + } + + &:first-child { + margin-left: -4px; + margin-right: 4px; + } + } + } + + &.top, + &.bottom { + > tabs { + padding-left: 0px; //4px; + padding-right: 0px; //4px; + + &:not(:only-child) { + margin-left: 3px; + margin-right: 3px; + + &:first-child { margin-left: -1px; } + &:last-child { margin-right: -1px; } + } + + > tab { + margin-left: 0px; //4px; + margin-right: 0px; //4px; + + &.reorderable-page { border-style: none solid; } + } + } + } + + &.left, + &.right { + > tabs { + padding-top: 0px; //4px; + padding-bottom: 0px; //4px; + + &:not(:only-child) { + margin-top: 3px; + margin-bottom: 3px; + + &:first-child { margin-top: -1px; } + &:last-child { margin-bottom: -1px; } + } + + > tab { + margin-top: 4px; + margin-bottom: 4px; + + &.reorderable-page { border-style: solid none; } + } + } + } + + &.top > tabs > tab { padding-bottom: 4px; } + &.bottom > tabs > tab { padding-top: 4px; } + } + + > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks + background-color: $base_color; + } +} + +//------------// +// Scrollbars // +//------------// +scrollbar { + $_slider_min_length: 40px; + + background-color: $scrollbar_bg_color; + transition: $shorter_duration $ease-out-quad; + + // scrollbar border + &.top { border-bottom: 1px solid $borders_color; } + &.bottom { border-top: 1px solid $borders_color; } + &.left { border-right: 1px solid $borders_color; } + &.right { border-left: 1px solid $borders_color; } + + > range > trough > slider { + min-width: 8px; + min-height: 8px; + margin: -1px; + border: 4px solid transparent; + border-radius: 0; + background-clip: padding-box; + background-color: $scrollbar_slider_color; + transition: background-color $longer_duration; + + &:hover { background-color: $scrollbar_slider_hover_color; } + + &:hover:active { background-color: $scrollbar_slider_active_color; } + + &:disabled { background-color: transparent; } + } + + > range.fine-tune { + > trough > slider { + min-width: 6px; + min-height: 6px; + } + + &.horizontal > trough > slider { border-width: 5px 4px; } + &.vertical > trough > slider { border-width: 4px 5px; } + } + + &.overlay-indicator { + &:not(.dragging):not(.hovering) { + border-color: transparent; + opacity: 0.4; + background-color: transparent; + + > range > trough > slider { + margin: 0; + min-width: 4px; + min-height: 4px; + background-color: $fg_color; + border: 1px solid if($variant == 'light', white, black); + } + + &.horizontal { + > range > trough > slider { + margin: 0 2px; + min-width: $_slider_min_length; + } + } + + &.vertical { + > range > trough > slider { + margin: 2px 0; + min-height: $_slider_min_length; + } + } + } + + &.dragging, + &.hovering { opacity: 0.8; } + } + + &.horizontal > range > trough > slider { min-width: $_slider_min_length; } + &.vertical > range > trough > slider { min-height: $_slider_min_length; } +} + +treeview ~ scrollbar.vertical { + border-top: 1px solid $borders_color; + margin-top: -1px; +} + +//--------// +// Switch // +//--------// +switch { + @extend %switchbutton; // styled in _custom.scss +} + +//-----------------------// +// Check and Radio items // +//-----------------------// +// draw regular check and radio items using our PNG assets +// all assets are rendered from assets.svg. never add pngs directly + +//selection-mode +@each $check_state, $check_icon, $check_color, $check_background in + ('', 'none', 'transparent', $checkradio_bg_color), + (':hover', 'none', 'transparent', $checkradio_bg_color), + (':active', 'none', 'transparent', $checkradio_bg_color), + (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'), + (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), + (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), + (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), + (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), { + + .view.content-view.check#{$check_state}:not(list), + .content-view .tile check#{$check_state}:not(list) { + margin: 4px; + min-width: 32px; + min-height: 32px; + color: #{$check_color}; + background-color: #{$check_background}; + border-radius: $button_radius; + background-image: none; + transition: $short_duration; + box-shadow: none; + border-width: 0; + -gtk-icon-source: #{$check_icon}; + -gtk-icon-shadow: none; + } +} + +checkbutton { + border-spacing: 4px; + border-radius: $button_radius; + transition: $focus_transition; + + @include focus-ring(); + + &.text-button { + // this is for a nice focus on check and radios text + padding: 4px; + } +} + +check, +radio { + min-height: 14px; + min-width: 14px; + border: 1px solid; + -gtk-icon-source: none; + + & { + // for unchecked + $_c: if($variant=='light', white, $bg_color); + + @each $state, $t in ("", "normal"), + (":hover", "hover"), + (":active", "active"), + (":disabled", "insensitive") { + &#{$state} { + @include check($t, $_c); + } + } + } + + & { + // for checked + @each $t in (':checked'), (':indeterminate') { + &#{$t} { + @each $state, $t in ("", "normal"), + (":hover", "hover"), + (":active", "active"), + (":disabled", "insensitive") { + &#{$state} { + @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true); + } + } + } + } + } + + @if $variant == 'light' { + // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background + // color, hence we need special casing. + row:selected & { border-color: $checkradio_borders_color; } + } + + .osd & { + @include button(osd); + + &:hover { @include button(osd); } + &:active { @include button(osd-active); } + &:disabled { @include button(osd-insensitive); } + } +} + +%check, +check { + border-radius: $button_radius; + -gtk-icon-size: 14px; + + &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), + -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } + + &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), + -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } +} + +%radio, +radio { + border-radius: 100%; + -gtk-icon-size: 14px; + + &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")), + -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); } + + &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), + -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } +} + +treeview.view check, +treeview.view radio { + &:selected { + &:focus, & { + color: $checkradio_fg_color; + + @if $variant == 'light' { border-color: $selected_borders_color; } + } + } +} + +treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround + +//----------// +// GtkScale // +//----------// +%scale_trough { + border: 1px solid $dark_fill; + border-radius: $button_radius; + background-color: $dark_fill; + + headerbar & { background-color: darken($dark_fill,8%); } //3504 + + &:disabled { + background-color: $insensitive_bg_color; + border-color: $insensitive_borders_color; + } + + // ...on selected list rows + row:selected & { + &:disabled, & { + outline-color: $alt_focus_border_color; + border-color: $selected_borders_color; + } + } + + // OSD + .osd & { + border-color: $osd_borders_color; + background-color: transparentize($osd_borders_color, 0.2); + + &:disabled { background-color: $osd_insensitive_bg_color; } + } +} + +%scale_highlight { + border: 1px solid $selected_bg_color; + border-radius: $button_radius; + background-color: $selected_bg_color; + + &:disabled { + background-color: transparent; + border-color: transparent; + } + + // ...on selected list rows + row:selected & { &:disabled, & { border-color: $selected_borders_color; }} + + // OSD + .osd & { + border-color: $osd_borders_color; + + &:disabled { border-color: transparent; } + } +} + +scale { + // sizing + $_marks_length: 6px; + $_marks_distance: 6px; + + min-height: 10px; + min-width: 10px; + padding: 12px; + + @include focus-ring("> trough", $offset: 10px); + + // those are inside the trough node, I need them to show their own border over the trough one, so negative margin + > trough { + transition: $focus_transition; + + > fill, + > highlight { margin: -1px; } + + // the slider is inside the trough, so to have make it bigger there's a negative margin + + > slider { + min-height: 18px; + min-width: 18px; + margin: -9px; + } + } + + // click-and-hold the slider to activate + &.fine-tune { + &.horizontal { + padding-top: 9px; + padding-bottom: 9px; + min-height: 16px; + } + + &.vertical { + padding-left: 9px; + padding-right: 9px; + min-width: 16px; + } + + // to make the trough grow in fine-tune mode + > trough > slider { margin: -6px; } + + > trough > fill, + > trough > highlight, + > trough { + border-radius: 5px; + } + } + + // the backing bit + > trough { + @extend %scale_trough; + } + + // the colored part of the backing bit + > trough > highlight { @extend %scale_highlight; } + + // this is another differently styled part of the backing bit, the most relevant use case is for example + // in media player to indicate how much video stream as been cached + > trough > fill { + @extend %scale_trough; + + + &:disabled { + border-color: transparent; + background-color: transparent; + } + + // OSD + .osd & { + background-color: mix($osd_fg_color, $osd_borders_color, 25%); + + &:disabled { + border-color: transparent; + background-color: transparent; + } + } + } + + > trough > slider { + @include button(normal); + border-width: 1px; + border-style: solid; + border-radius: 100%; + transition: $button_transition; + transition-property: background, border, box-shadow; + + &:hover { @include button(hover); } + + &:active { border-color: $selected_borders_color; } + + &:disabled { @include button(insensitive); } + + // ...on selected list rows + row:selected & { &:disabled, & { border-color: $selected_borders_color; } } + + // OSD + .osd & { + @include button(osd); + border-color: darken($osd_borders_color, 3%); + background-color: opacify($osd_bg_color, 1); // solid background needed here + + &:hover { + @include button(osd-hover); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + + &:active { + @include button(osd-active); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + + &:disabled { + @include button(osd-insensitive); + background-color: opacify($osd_bg_color, 1); // solid background needed here + } + } + } + + > value { + color: gtkalpha(currentColor, 0.55); + font-feature-settings: "tnum"; + } + + &.horizontal { + > marks { + color: gtkalpha(currentColor, 0.55); + &.top { margin-bottom: $_marks_distance; } + &.bottom { margin-top: $_marks_distance; } + + indicator { + background-color: currentColor; + min-height: $_marks_length; + min-width: 1px; + } + } + + > value.left { margin-right: 9px; } + > value.right { margin-left: 9px; } + + &.fine-tune >marks { + &.top { margin-top: 3px; } + &.bottom { margin-bottom: 3px; } + + indicator { min-height: ($_marks_length - 3px); } + } + } + + &.vertical { + > marks { + color: gtkalpha(currentColor, 0.55); + &.top { margin-right: $_marks_distance; } + &.bottom { margin-left: $_marks_distance; } + + indicator { + background-color: currentColor; + min-height: 1px; + min-width: $_marks_length; + } + } + + > value.top { margin-bottom: 9px; } + > value.bottom { margin-top: 9px; } + + &.fine-tune >marks { + &.top { margin-left: 3px; } + &.bottom { margin-right: 3px; } + + indicator { min-height: ($_marks_length - 3px); } + } + } + + // *WARNING* scale with marks madness following + + // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... + $suffix: if($variant == 'light', '', '-dark'); + + @extend %scale_madness; // styled in _custom.scss + + &.color { + min-height: 0; + min-width: 0; + + > trough { + background-image: image($borders_color); + background-repeat: no-repeat; + } + + &.horizontal { + padding: 0 0 15px 0; + + > trough { + padding-bottom: 4px; + background-position: 0 -3px; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + > trough > slider { + &:dir(ltr), &:dir(rtl) { // specificity bump + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-bottom: -15px; + margin-top: 6px; + } + } + } + } + + &.vertical { + &:dir(ltr) { + padding: 0 0 0 15px; + + > trough { + padding-left: 4px; + background-position: 3px 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + > trough > slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-left: -15px; + margin-right: 6px; + } + } + } + + &:dir(rtl) { + padding: 0 15px 0 0; + + > trough { + padding-right: 4px; + background-position: -3px 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + > trough > slider { + &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & { + margin-right: -15px; + margin-left: 6px; + } + } + } + } + + &.fine-tune { + &.horizontal { + &:dir(ltr), &:dir(rtl) { // specificity bump + padding: 0 0 12px 0; + + > trough { + padding-bottom: 7px; + background-position: 0 -6px; + } + + > trough > slider { + margin-bottom: -15px; + margin-top: 6px; + } + } + } + + &.vertical { + &:dir(ltr) { + padding: 0 0 0 12px; + + > trough { + padding-left: 7px; + background-position: 6px 0; + } + + > trough > slider { + margin-left: -15px; + margin-right: 6px; + } + } + + &:dir(rtl) { + padding: 0 12px 0 0; + + > trough { + padding-right: 7px; + background-position: -6px 0; + } + + > trough > slider { + margin-right: -15px; + margin-left: 6px; + } + } + } + } + } +} + +//---------------// +// Progress bars // +//---------------// +progressbar { + // sizing + &.horizontal { + > trough { + min-width: 150px; + &, > progress { min-height: 2px; } + } + } + + &.vertical { + > trough { + min-height: 80px; + &, > progress { min-width: 2px; } + } + } + + &.horizontal > trough > progress { margin: 0 -1px; } // the progress node is positioned after the trough border + &.vertical > trough > progress { margin: -1px 0; } // this moves it over it. + + // FIXME: insensitive state missing and some other state should be set probably + font-size: smaller; + color: transparentize($fg_color, 0.6); + font-feature-settings: "tnum"; + + > trough { @extend %scale_trough; } + + > trough > progress { + @extend %scale_highlight; // share most of scales + // override insensitive that is specific to progress + &:disabled { + background-color: $insensitive_fg_color; + border-color: $insensitive_fg_color; + } + + border-radius: 1.5px; + $_progress-radius: 5px; + &.left { + border-top-left-radius: $_progress-radius; + border-bottom-left-radius: $_progress-radius; + } + + &.right { + border-top-right-radius: $_progress-radius; + border-bottom-right-radius: $_progress-radius; + } + + &.top { + border-top-right-radius: $_progress-radius; + border-top-left-radius: $_progress-radius; + } + + &.bottom { + border-bottom-right-radius: $_progress-radius; + border-bottom-left-radius: $_progress-radius; + } + } + + &.osd { // progressbar.osd used for epiphany page loading progress + min-width: 3px; + min-height: 3px; + background-color: transparent; + + > trough { + border-style: none; + border-radius: 0; + background-color: transparent; + box-shadow: none; + + > progress { + border-style: none; + border-radius: 0; + } + } + } + + > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0 +} + +//-----------// +// Level Bar // +//-----------// + +$_levelbar_size: 9px; +$_levelbar_border_radius: 5px; + +levelbar { + &.horizontal { + trough > block { + min-height: $_levelbar_size; + border-radius: $_levelbar_border_radius; + + &:dir(rtl) { + border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0; + } + + &:dir(ltr) { + border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius; + } + + &.empty,&.full { + border-radius: $_levelbar_border_radius; + } + } + + // segmented level bar + &.discrete { + trough > block { + min-height: 2px; + margin: 1px; + min-width: 24px; + border-radius:0; + &:first-child {border-radius: 2px 0 0 2px;} + &:last-child { + border-radius: 0 2px 2px 0; + } + } + } + } + + &.vertical { + trough > block { + min-width: $_levelbar_size; + border-radius: $_levelbar_border_radius; + } + + &.discrete > trough > block { + min-width: $_levelbar_size - 7px; + margin: 1px 0; + min-height: 32px; + } + } + + > trough { + padding: 0; + } + + // level bar colours + > trough > block { + border: 1px solid; + + &.low { + border-color: $warning_color; + background-color: $warning_color; + } + + &.high, + &:not(.empty) { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + } + + &.full { + border-color: $success_color; + background-color: $success_color; + } + + &.empty { + background-color: darken($bg_color, 5%); + border-color: darken($bg_color, 5%); + } + } +} + +//--------------// +// Print dialog // +//--------------// +window.dialog.print { + drawing { + color: $fg_color; + background: none; + border: none; + padding: 0; + + paper { + background: white; + color: #2e3436; + border: 1px solid $borders_color; + } + + } + + .dialog-action-box { margin: 12px; } +} + +//--------// +// Frames // +//--------// +frame, +.frame { + border: 1px solid $borders_color; +} + +frame { + border-radius: $window_radius; + + > label { + margin: 4px; + } +} + +actionbar > revealer > box { + padding: 6px; + border-spacing: 6px; + border-top: 1px solid $borders_color; +} + +scrolledwindow { + // This is used when content is touch-dragged past boundaries. + // draws a box on top of the content, the size changes programmatically. + > overshoot { + &.top { + @include overshoot(top); + } + + &.bottom { + @include overshoot(bottom); + } + + &.left { + @include overshoot(left); + } + + &.right { + @include overshoot(right); + } + } + + > junction { // the small square between two scrollbars + // Only color the top-left (or top right in RTL) pixel, to visually connect + // the borders of the two scrollbars. + + background: $borders_color, + linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px), + linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px); + + &:dir(rtl) { + background: $borders_color, + linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px), + linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px); + } + } +} + +//vbox and hbox separators +separator { + background: lighten($borders_color, 5%); + min-width: 1px; + min-height: 1px; +} + +//-------// +// Lists // +//-------// +listview, +list { + color: $text_color; + background-color: $base_color; + border-color: $borders_color; + + &:backdrop { + color: $backdrop_text_color; + background-color: $backdrop_base_color; + border-color: $backdrop_borders_color; + } + + > row { padding: 2px; } + > row.expander { padding: 0px; } + > row.expander .row-header { padding: 2px; } + + &.horizontal row.separator, + &.separators.horizontal > row:not(.separator) { + border-left: 1px solid $_treeview_borders_color; + } + &:not(.horizontal) row.separator, + &.separators:not(.horizontal) > row:not(.separator) { + border-bottom: 1px solid $_treeview_borders_color; + } +} + +row { + @include focus-ring(); + + &.activatable { + &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 + + &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); } + + &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); } + + &:selected { + &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } + + &.has-open-popup, + &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); } + } + } + + &:selected { + outline-color: $alt_focus_border_color; + + @extend %selected_items; + } +} + +columnview { + // move padding to child cells + > listview > row { + padding: 0; + + // align horizontal sizing with header buttons + > cell { + padding: 8px 6px; + + &:not(:first-child) { + border-left: 1px solid transparent; + } + } + } + + // make column separators visible when :show-column-separators is true + &.column-separators > listview > row > cell { + border-left-color: $_treeview_borders_color; + } + + // shrink vertically for .data-table + &.data-table > listview > row > cell { + padding-top: 2px; + padding-bottom: 2px; + } +} + +treeexpander { + border-spacing: 4px; +} + +//------------------------------------------------------// +// Data Tables // +// treeview like tables with individual focusable cells // +// https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 // +//------------------------------------------------------// + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { + outline: 2px solid $focus_border_color; +} + +columnview row:not(:selected) cell editablelabel.editing:focus-within { + outline: 2px solid $selected_bg_color; +} + +columnview row:not(:selected) cell editablelabel.editing text selection { + color: $selected_fg_color; + background-color: $selected_bg_color; +} + +//--------------------------------------------------// +// Rich Lists // +// Large list usually containing lots of widgets // +// https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 // +//--------------------------------------------------// + +.rich-list { // rich lists usually containing other widgets than just labels/text + & > row { + padding: 8px 12px; + min-height: 32px; // should be tall even when only containing a label + + & > box { + border-spacing: 12px; + } + } +} + +//-------------------// +// App Notifications // +//-------------------// +.app-notification { + @extend %osd; + + padding: 10px; + border-spacing: 10px; + border-radius: 0 0 5px 5px; + background-color: $osd_bg_color; + background-image: linear-gradient(to bottom, transparentize(black, 0.8), + transparent 2px); + background-clip: padding-box; + + button { @extend %osd_button; } + + border { border: none; } +} + +//-----------// +// Expanders // +//-----------// +expander { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + &:disabled { color: $insensitive_fg_color; } + + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } +} + +expander-widget { + @include focus-ring("> box > title"); + + > box > title { + transition: $focus_transition; + border-radius: $button_radius; + + &:hover > expander { + color: lighten($fg_color,30%); //only lightens the icon + } + } +} + +.navigation-sidebar, +placessidebar, +stackswitcher, +expander-widget { + &:not(decoration):not(window):drop(active):focus, + &:not(decoration):not(window):drop(active) { + box-shadow: none; + } +} + +//----------// +// Calendar // +//----------// +calendar { + color: $text_color; + border: 1px solid $borders_color; + + > header { + border-bottom: 1px solid $borders_color; + + > button { + border: none; + box-shadow: none; + background: none; + border-radius: 0; + } + > button:backdrop { + background: none; + } + } + + > grid { + > label.day-name { + } + + > label.week-number { + } + + > label.today { + box-shadow: inset 0px -2px $borders_color; + + &:selected { + box-shadow: none; + } + } + + > label:focus { + outline-color: $focus_border_color; + outline-offset: -2px; + outline-width: 2px; + outline-style: solid; + } + + > label.day-number { + padding: 4px; + + &:selected{ + @extend %selected_items; + border-radius: $button_radius; + } + } + + > label.day-number.other-month { + color: gtkalpha(currentColor, 0.3); + } + } +} + +//---------// +// Dialogs // +//---------// +window.dialog.message { // Message Dialog styling + .titlebar { + min-height: 20px; + background-image: none; + background-color: $bg_color; + border-style: none; + border-top-left-radius: $window_radius; + border-top-right-radius: $window_radius; + } + + box.dialog-vbox.vertical { + border-spacing: 10px; + } + + & label.title { + font-weight: 800; + font-size: 15pt; + } + + &.csd { // rounded bottom border styling for csd version + &.background { + // bigger radius for better antialiasing + border-bottom-left-radius: $window_radius+1; + border-bottom-right-radius: $window_radius+1; + } + + .dialog-action-area button { + padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround + border-radius: 0; + border-left-style: solid; + border-right-style: none; + border-bottom-style: none; + + &:first-child{ + border-left-style: none; + border-bottom-left-radius: $window_radius; + } + + &:last-child { + border-bottom-right-radius: $window_radius; + } + } + } +} + +filechooser { + .dialog-action-box { + border-top: 1px solid $borders_color; + } + + #pathbarbox { border-bottom: 1px solid $bg_color; } +} + + +filechooserbutton>button>box { + border-spacing: 6px; +} +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; +} + +//---------// +// Sidebar // +//---------// +.sidebar { + background-color: mix($bg_color, $base_color, 50%); + + &:not(separator) { + @at-root %sidebar_left, + &:dir(ltr), + &.left, + &.left:dir(rtl) { + border-right: 1px solid $borders_color; + border-left-style: none; + } + + @at-root %sidebar_right, + &:dir(rtl), + &.right { + border-left: 1px solid $borders_color; + border-right-style: none; + } + } + + listview.view, + list { background-color: transparent; } + + paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} +} + +stacksidebar { + //not a regular list + list.separators:not(.horizontal) > row:not(.separator) { + border-bottom: none; + } + row { + padding: 10px 4px; + + > label { + padding-left: 6px; + padding-right: 6px; + } + + &.needs-attention > label { + @extend %needs_attention; + background-size: 6px 6px, 0 0; + } + &:selected { + background-color: $selected_bg_color; //$menu_selected_color; + border-radius: $menu_radius; + color: $selected_fg_color; //$fg_color; + } + &:selected:hover:dir(ltr), &:selected:hover:dir(rtl) { + background-color: $selected_bg_color; //darken($menu_selected_color,5%); + } + &:focus:focus-visible { + outline-width: 0; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + &.activatable:active, &.activatable:selected:active { + box-shadow: none; // #3413 + } + } +} + +separator.sidebar { + background-color: $borders_color; +} + +//--------------------// +// Navigation Sidebar // +//--------------------// + +.navigation-sidebar { + padding: 0; //$menu-margin 0; //only vertical padding. horizontal row size would clip + + > separator { + margin: $menu-margin; + } + + > row { + min-height: 36px; + padding: 0 8px; + border-radius: 0; //$menu-margin; + margin: 0; // 0 $menu-margin 2px; + + &:hover, + &:backdrop:hover, + &:focus-visible:focus-within { + background-color: gtkalpha(currentColor, .06); + } + + &:selected { + background-color: $selected_bg_color; //$menu_selected_color; + color: $selected_fg_color; //inherit; + + //&:hover { + // background-color: darken($menu_selected_color,5%); + //} + + &:focus-visible:focus-within { + outline-width: 0; + color: $selected_fg_color; + background-color: $selected_bg_color; + &:hover { background-color: darken($selected_bg_color,10%); } + } + } + + &:disabled { color: $insensitive_fg_color; } + } +} + +//--------------// +// File chooser // +//--------------// + +$_placesidebar_icons_opacity: 0.7; + +row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons + // see bug #786613 for details + // on this oddity + +// this should be more generic, only using .navigation-sidebar +// https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 + +placessidebar { + .navigation-sidebar > row { + // Needs overriding of the `.navigation-sidebar > row` padding + padding: 0; + + // Using margins/padding directly in the SidebarRow + // will make the animation of the new bookmark row jump + > revealer { padding: 0 14px; } + + image.sidebar-icon { + &:dir(ltr) { padding-right: 8px; } + &:dir(rtl) { padding-left: 8px; } + } + + label.sidebar-label { + &:dir(ltr) { padding-right: 2px; } + &:dir(rtl) { padding-left: 2px; } + } + + @at-root button.sidebar-button { + @extend %button_basic_flat; + + @extend %button_selected_flat; + min-height: 26px; + min-width: 26px; + margin-top: 3px; + margin-bottom: 3px; + padding: 0; + border-radius: 100%; + } + + // in the sidebar case it makes no sense to click the selected row + &:selected:active { box-shadow: none; } + + &.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: image($drop_target_color); + background-clip: content-box; + } + + &.sidebar-new-bookmark-row { color: $selected_bg_color; } + + &:drop(active):not(:disabled) { + color: $drop_target_color; + box-shadow: inset 0 1px $drop_target_color, + inset 0 -1px $drop_target_color; + + &:selected { + color: $selected_fg_color; + background-color: $drop_target_color; + } + } + } +} + +placesview { + .server-list-button > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(-0.5turn); + } + + row.activatable:hover { } + + > actionbar > revealer > box > box{ + border-spacing: 6px; + } +} + +//-------// +// Paned // +//-------// +paned { + > separator { + min-width: 1px; + min-height: 1px; + -gtk-icon-source: none; // defeats the ugly default handle decoration + border-style: none; // just to be sure + background-color: transparent; + // workaround, using background instead of a border since the border will get rendered twice (?) + background-image: image($borders_color); + background-size: 1px 1px; + + &:selected { background-image: image($selected_bg_color); } // FIXME is this needed? + + &.wide { + min-width: 5px; + min-height: 5px; + background-color: $bg_color; + background-image: image($borders_color), image($borders_color); + background-size: 1px 1px, 1px 1px; + } + } + + &.horizontal > separator { + background-repeat: repeat-y; + + &:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + background-position: left; + } + &:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + background-position: right; + } + + &.wide { + margin: 0; + padding: 0; + background-repeat: repeat-y, repeat-y; + background-position: left, right; + } + } + + &.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + background-repeat: repeat-x; + background-position: top; + + &.wide { + margin: 0; + padding: 0; + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; + } + } +} + +//----------// +// GtkVideo // +//----------// + +video { + & image.osd { + min-width: 64px; + min-height: 64px; + border-radius: 32px; + } + background: black; +} + +//----------// +// Tooltips // +//----------// +tooltip { + &.background { + // background-color needs to be set this way otherwise it gets drawn twice + // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. + background-color: transparentize(black, 0.2); + background-clip: padding-box; + border: 1px solid $tooltip_borders_color; // this subtle border is meant to + // not make the tooltip melt with + // very dark backgrounds + color: white; + } + + padding: 6px 10px; + border-radius: $window_radius; + box-shadow: none; // otherwise it gets inherited by windowframe.csd + + > box { + border-spacing: 6px; + } +} + +//---------------// +// Color Chooser // +//---------------// +colorswatch { + // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one + // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is + // applied to the overlay box. + + transition: $focus_transition; + + @include focus-ring($width: 4px, $offset: -2px); + + &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state + + $_colorswatch_radius: 5px; + + // base color corners rounding + // to avoid the artifacts caused by rounded corner anti-aliasing the base color + // sports a bigger radius. + // nth-child is needed by the custom color strip. + + &.top { + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-top-right-radius: $_colorswatch_radius + 0.5px; + + > overlay { + border-top-left-radius: $_colorswatch_radius; + border-top-right-radius: $_colorswatch_radius; + } + } + + &.bottom { + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + + > overlay { + border-bottom-left-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.left, + &:first-child:not(.top) { + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + + > overlay { + border-top-left-radius: $_colorswatch_radius; + border-bottom-left-radius: $_colorswatch_radius; + } + } + + &.right, + &:last-child:not(.bottom) { + border-top-right-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + + > overlay { + border-top-right-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.dark { + > overlay { + color: white; + } + + &.activatable:hover > overlay { + border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); + } + } + + &.light { + > overlay { + color: black; + } + + &.activatable:hover > overlay { + border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); + } + } + + &:drop(active) { + box-shadow: none; + + &.light > overlay { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color), + inset 0 0 0 1px $drop_target_color; + } + + &.dark > overlay { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color), + inset 0 0 0 1px $drop_target_color; + } + } + + > overlay { + border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); + } + + &.activatable:hover > overlay { + box-shadow: inset 0 1px transparentize(white, 0.6), + inset 0 -1px transparentize(black, 0.8); + } + + &#add-color-button { + border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius; + + &:only-child { border-radius: $_colorswatch_radius; } + + > overlay { + @include button(normal); + } + + &.activatable:hover > overlay { + @include button(hover); + } + } + + &:disabled { + opacity: 0.5; + + > overlay { + border-color: transparentize(black, 0.4); + box-shadow: none; + } + } + + row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; } + + &#editor-color-sample { + border-radius: 4px; + + > overlay { border-radius: 4.5px; } + } +} + +plane { + transition: $focus_transition; + + @include focus-ring($offset: 2px, $outer: true); +} + +// colorscale popup +colorchooser .popover.osd { border-radius: 5px; } + +//------// +// Misc // +//------// +.content-view { + background-color: darken($bg_color,7%); + + &:hover { -gtk-icon-filter: brightness(1.2); } + + .tile { + margin: 2px; + background-color: if($variant=='light', transparent, black); + border-radius: 0; + padding: 0; + + &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); } + &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); } +} + + > rubberband { @extend rubberband; } + +} + +.scale-popup { + .osd & { @extend %osd; } + + .osd & button.flat { //FIXME: quick hack, redo properly + border-style: none; + border-radius: 5px; + } + + button { // +/- buttons on GtkVolumeButton popup + &:hover { + @extend %undecorated_button; + background-color: transparentize($fg_color,0.9); + border-radius: 5px; + } + } +} + +//--------------------// +// Window Decorations // +//--------------------// +window { + // lamefun trick to get rounded borders regardless of CSD use + border-width: 0px; + + // this needs to be transparent + // see bug #722563 + $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1)); + $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1)); + + &.csd { + box-shadow: 0 1px 4px 1px transparentize(black, 0.66), + 0 0 0 1px $_wm_border; //doing borders with box-shadow + margin: 0px; + border-radius: $window_radius $window_radius 0 0; + &:backdrop { + // the transparent shadow here is to enforce that the shadow extents don't + // change when we go to backdrop, to prevent jumping windows. + // The biggest shadow should be in the same order then in the active state + // or the jumping will happen during the transition. + box-shadow: 0 1px 4px 1px transparent, + 0 1px 2px 1px transparentize(black, 0.8), + 0 0 0 1px $_wm_border_backdrop; + transition: $backdrop_transition; + } + + &.popup { + border-radius: $menu_radius; + box-shadow: 0 1px 2px transparentize(black, 0.8), + 0 0 0 1px transparentize($_wm_border, 0.1); + } + + &.dialog.message { + border-radius: $window_radius; + box-shadow: 0 1px 2px transparentize(black, 0.8), + 0 0 0 1px transparentize($_wm_border, 0.1); + } + + &.solid-csd { + margin: 0; + padding: 0; + border: solid 1px $borders_color; + border-radius: 0; + box-shadow: inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight; + + &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; } + } + } + + &.maximized, + &.fullscreen, + &.tiled, + &.tiled-top, + &.tiled-left, + &.tiled-right, + &.tiled-bottom { + border-radius: 0; + box-shadow: none; // custom style: remove box-shadow on tiled windows + } + + .tiled & { border: 1px solid transparentize(black, 0.8); } // custom style: border between tiled windows + + &.popup { box-shadow: none; } + + // server-side decorations as used by mutter + &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows + +} + +tooltip.csd { + border-radius: $window_radius; + box-shadow: none; +} + +// catch all extend :) + +%selected_items { + background-color: $selected_bg_color; + + @at-root %nobg_selected_items, & { + color: $selected_fg_color; + + @at-root %selected_items_disabled, + &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } + } +} + +.monospace { font-family: monospace; } + +//--------------------// +// Touch Copy & Paste // +//--------------------// +//touch selection handlebars for the Popover.osd above +cursor-handle { + background-color: transparent; + background-image: none; + box-shadow: none; + border-style: none; + //min-width: 20px; + //min-height: 24px; + //padding-left: 20px; + //padding-right: 20px; + //padding-top: 24px; + //padding-bottom: 24px; +} + +// custom theme style: text-select marks removed for now to avoid the hassle of too many image assets + +shortcuts-section { + margin: 20px; +} + +.shortcuts-search-results { + margin: 20px; + border-spacing: 24px; +} + +// shortcut window keys +shortcut { + border-spacing: 6px; +} + +shortcut > .keycap { + min-width: 20px; + min-height: 25px; + margin-top: 2px; + padding-bottom: 3px; + padding-left: 6px; + padding-right: 6px; + + color: $fg_color; + background-color: $base_color; + border: 1px solid; + border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color); + border-radius: 5px; + box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%)); + font-size: smaller; +} + +:not(decoration):not(window):drop(active):focus, +:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + caret-color: $drop_target_color; +} + +stackswitcher > button.text-button { min-width: 100px; } // FIXME aggregate with buttons + +stackswitcher.circular { + border-spacing: 12px; + + // FIXME aggregate with buttons + > button.circular, + > button.text-button.circular { + min-width: 32px; + min-height: 32px; + padding: 0; + } +} + +//-----------// +// App Icons // +//-----------// +// Outline for low res icons +.lowres-icon { + -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05), + 1px 0 rgba(0,0,0,0.1), + 0 1px rgba(0,0,0,0.3), + -1px 0 rgba(0,0,0,0.1); +} + +// Drapshadow for large icons +.icon-dropshadow { + -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05), + 0 -1px rgba(0,0,0,0.05), + 1px 0 rgba(0,0,0,0.1), + 0 1px rgba(0,0,0,0.3), + -1px 0 rgba(0,0,0,0.1); +} + +//-------// +// Emoji // +//-------// + +popover.emoji-picker > contents { + padding: 0; +} + +.emoji-searchbar { + padding: 6px; + border-spacing: 6px; + border-bottom: 1px solid $borders_color; +} + +.emoji-toolbar { + padding: 6px; + border-spacing: 6px; + border-top: 1px solid $borders_color; +} + +button.emoji-section { + border-color: transparent; + border-width: 3px; + border-style: none none solid; + border-radius: 0; + + padding: 3px 0 0; + min-width: 32px; + min-height: 28px; + + // reset props inherited from the button style + background: none; + box-shadow: none; + text-shadow: none; + + &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); } + &:checked { border-color: $selected_bg_color; } +} + +popover.emoji-picker emoji { + font-size: x-large; + padding: 6px; + border-radius: 6px; + + &:focus, + &:hover { + background: $selected_bg_color; + } +} + +emoji-completion-row > box { + border-spacing: 10px; + padding: 2px 10px; +} + +emoji-completion-row:focus, +emoji-completion-row:hover { + background-color: $selected_bg_color; + color: $selected_fg_color; +} + +emoji-completion-row emoji:focus, +emoji-completion-row emoji:hover { + background-color: $menu_selected_color; +} + +popover.entry-completion > contents { + padding: 0; +} + +statusbar { + padding: 6px 10px 6px 10px; +} diff --git a/gtk/src/Plano/gtk-4.0/_custom.scss b/gtk/src/Plano/gtk-4.0/_custom.scss new file mode 100644 index 0000000..6d37dd8 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/_custom.scss @@ -0,0 +1,423 @@ +// This file is used to apply some larger unofficial custom styles to the Adwaita base. + +//---------------// +// Title buttons // +//---------------// +%titlebutton { + min-width: $titlebutton_size; + min-height: $titlebutton_size; + padding: 0; + margin: 4px 4px 4px 10px; + border-radius: 1.5px; +} + +%titlebuttons { + button { + @extend %titlebutton; + + &.close, &.maximize, &.minimize { + color: transparent; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + border-width: 0; + box-shadow: none; + transition-property: background-color; + > image { + opacity: 0; + } + } + + &.close { + background-color: $close_button; + + &:hover, &:active { background-color: $close_button_hover; } + &:backdrop { + background-color: $close_button_backdrop; + &:hover, &:active { background-color: $close_button_hover; } + } + } + + &.maximize, &.minimize { + &:hover, &:active { background-color: if($variant == 'light' and $alt_header == 'false', $selected_bg_color, transparentize(white, 0.8)); } + } + + // titlebutton icons + // linked from the gtk3 theme to avoid having duplicate assets + @each $k in ('close', 'maximize', 'minimize') { + @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-hover') { + &.#{$k}#{$l} { + @if($variant=='light' and $alt_header=='false') { + background-image: -gtk-scaled(url('../gtk-3.0/assets/titlebutton-#{$k}#{$m}.png'), + url('../gtk-3.0/assets/titlebutton-#{$k}#{$m}@2.png')); + } + @else { + background-image: -gtk-scaled(url('../gtk-3.0/assets/titlebutton-#{$k}-hover.png'), + url('../gtk-3.0/assets/titlebutton-#{$k}-hover@2.png')); + &:not(:hover) { opacity: 0.8; } + &:backdrop:not(:hover) { opacity: 0.5; } + } + } + } + } + } + + // unmaximize titlebutton icon + .maximized & { + button.titlebutton { + @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-hover') { + &.maximize#{$l} { + @if($variant=='light' and $alt_header=='false') { + background-image: -gtk-scaled(url('../gtk-3.0/assets/titlebutton-unmaximize#{$m}.png'), + url('../gtk-3.0/assets/titlebutton-unmaximize#{$m}@2.png')); + } + @else { + background-image: -gtk-scaled(url('../gtk-3.0/assets/titlebutton-unmaximize-hover.png'), + url('../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png')); + &:not(:hover) { opacity: 0.8; } + &:backdrop:not(:hover) { opacity: 0.5; } + } + } + } + } + } +} + +//---------------------------// +// headerbar & alt headerbar // +//---------------------------// +// not used in the dark theme +$_button_bg_color: null; +$_button_border_color: null; +$_button_bg_color: lighten($alt_headerbar_bg, 4%) !global; +$_button_border_color: darken($alt_headerbar_bg, 7%) !global; + +// Messy style to hide the buttons in the headerbar, except for nautilus which is handled differently + +:not(.nautilus-window) .titlebar { + button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked) { + border-style: solid; + @if $alt_header == 'false' { + @include button(undecorated); + &:hover { @include button(hover); } + &:active, &:checked { @include button(active); } + } + @else { + @include button(undecorated, transparent, $alt_headerbar_fg); + &:hover { @include button(hover, $_button_bg_color, $alt_headerbar_fg); } + &:active, &:checked { @include button(active, darken($_button_bg_color, 4%), $alt_headerbar_fg); } + } + } + + .linked > button { // to make sure decorated buttons show all the edges + &, &:hover, &:checked, &:focus, &.default, &.toggle, &:active { border-style: solid; } + } +} + +%alt_titlebar { + color: $alt_headerbar_fg; + text-shadow: none; + &:backdrop { + color: $alt_headerbar_backdrop_fg; + text-shadow: none; + } + + .title { + color: $alt_headerbar_fg; + &:backdrop { color: $alt_headerbar_backdrop_fg; } + } + + .maximized &, + .fullscreen & { box-shadow: none; } + + entry { + &, &:backdrop { + border-color: darken($alt_headerbar_bg, 8%); + background-color: lighten($_button_bg_color, 25%); + color: $alt_headerbar_fg; + caret-color: $alt_headerbar_fg; + } + &:focus { @include entry(focus); } + } + + button, + button.linked, + button.toggle, + button.popup.toggle, + button.image-button, + button.image-button.toggle, + button.text-button, + button.text-button.toggle, + box button.toggle, + buttonbox.toggle, + stackswitcher button, + filechooser .path-bar.linked>button, + .path-bar button { + text-shadow: none; + &:backdrop { + @include button(backdrop, $_button_bg_color, $alt_headerbar_backdrop_fg); + text-shadow: none; + } + @include button(normal, $_button_bg_color, $alt_headerbar_fg); + &.flat { + @include button(undecorated); + } + + &:hover { + @include button(hover, $_button_bg_color, $alt_headerbar_fg); + } + &:active, &:checked, &:active:hover, &:checked:hover { + @include button(active, $_button_bg_color, $alt_headerbar_fg); + border-color: transparentize(black, 0.6); + } + &:disabled { + @include button(insensitive, $_button_bg_color, $alt_headerbar_backdrop_fg); + &:backdrop { + @include button(backdrop-insensitive, $_button_bg_color, $alt_headerbar_backdrop_fg); + } + } + } + + separator { + background: image(lighten($_button_border_color, 5%)); + } + // TODO: Checkbuttons and scales + switch { + slider { background-color: transparentize(white, 0.5); } + } + + // Suggested and Destructive Action buttons + @each $b_type, $b_color in (suggested-action, $suggested_bg_color), + (destructive-action, $destructive_color) { + &.#{$b_type} { + @include button(normal, $b_color, white); + border-color: $b_color; + + &.flat { + @include button(undecorated); + color: $b_color; + } + + &:hover { + @include button(hover, $b_color, white); + border-color: $b_color; + } + + &:active, + &:checked { + @include button(active, $b_color, white); + @if $alt_header == 'true' { + border-color: darken($suggested_bg_color, 15%); + } + } + + &, &:hover, &:focus:active { outline-color: $selected_bg_color; } + + &:backdrop, + &.flat:backdrop { + @include button(backdrop, $b_color, white); + + &:active, + &:checked { + @include button(backdrop-active, $b_color, white); + } + + &:disabled { + @include button(backdrop-insensitive, if($variant=='light', darken($alt_headerbar_bg, 14%), $alt_headerbar_bg), $alt_headerbar_backdrop_fg); + border-color: darken($alt_headerbar_bg, 3%); + + &:active, + &:checked { + @include button(backdrop-insensitive-active, $b_color, white); + } + } + } + + &.flat { + &:backdrop, + &:disabled, + &:backdrop:disabled { + @include button(undecorated); + color: transparentize($b_color, 0.2); + } + } + + &:disabled { + @include button(insensitive, if($variant== "light", darken($alt_headerbar_bg, 15%), $alt_headerbar_bg), $alt_headerbar_fg); + border-color: darken($alt_headerbar_bg, 5%); + background-image: image(lighten($alt_headerbar_bg, 2%)); + + &:active, + &:checked { + @include button(insensitive-active, $b_color, white); + } + } + + .osd & { + @include button(osd, $b_color); + + &:hover { + @include button(osd-hover, $b_color); + } + + &:active, + &:checked { + &:backdrop, + & { @include button(osd-active, $b_color); } + } + + &:disabled { + &:backdrop, & { @include button(osd-insensitive, $b_color); } + } + + &:backdrop { + @include button(osd-backdrop, $b_color); + } + } + } + } +} + +@if $alt_header=='true' { + .titlebar, headerbar { @extend %alt_titlebar; } + .ssd .titlebar { + @include headerbar_fill($alt_headerbar_bg); + color: $alt_headerbar_fg; + text-shadow: none; + border-width: 0; + &:backdrop { color: $alt_headerbar_backdrop_fg; } + } + + #MozillaGtkWidget.background { + menubar, .menubar, menubar > menuitem:hover { + background-color: $alt_headerbar_bg; + color: $alt_headerbar_fg; + } + } + + window.background.chromium { + background-color: $alt_headerbar_bg; + color: $alt_headerbar_fg; + button { border-color: $_button_border_color; } // tab borders + menubar { color: $alt_headerbar_fg; } + menu, .menu, .context-menu { color: $fg_color; } + } +} + +//----------------// +// Switch buttons // +//----------------// +// TODO: May need a border. +%switchbutton { + font-weight: bold; + font-size: smaller; + + margin: 4px 0; + padding: 0; + border-width: 0; + background-color: transparentize(black, 0.62); + background-clip: padding-box; + transition: all $duration $ease-out; + + @include focus-ring($offset: 0, $outer: true); + + headerbar & { background-color: darken($dark_fill,8%); } + + &:checked { + background-color: $checkradio_bg_color; + } + + &:disabled { + opacity: 0.38; + } + + > slider { + margin: 1px; + min-width: 22px; + min-height: 18px; + border-radius: 0; + background-color: if($variant=='light', white, transparentize($fg_color, 0.5)); + transition: all $duration $ease-out; + } + + &:hover > slider, + &:focus > slider { + background-color: if($variant=='light', white, transparentize($fg_color, 0.5)); + box-shadow: 0 0 0 3px transparentize($selected_bg_color, 0.7); + } + + &:checked > slider { + background-color: if($variant=='light', white, transparentize($fg_color, 0.5)); + } + + > image { color: transparent; } + + row:selected & { + outline-color: $alt_focus_border_color; + + @if $variant == 'light' { + box-shadow: none; + border: 1px solid $checkradio_borders_color; + + &:backdrop { border-color: $checkradio_borders_color; } + + > slider { &:checked, & { border-color: $checkradio_borders_color; } } + } + } +} + +// ------------------------ // +// scale with marks madness // +// ------------------------ // +//parts borrowed from https://github.com/hrdwrrsk/tetra-gtk-theme +%scale_madness { + @each $dir_class, $dir_infix in ('horizontal', 'horz'), + ('vertical', 'vert') { + @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'), + ('scale-has-marks-below', 'marks-after:not(.marks-before)') { + &.#{$dir_class}.#{$marks_class} { + > trough > slider { + margin: -11px -4px; + padding: 0px; + border-radius: $button-radius; + + $_scale_slider_bg_pos: bottom; + + @if $dir_class == 'horizontal' { + min-height: 22px; + min-width: 9px; + + @if $marks_infix == 'scale-has-marks-above' { + $_scale_slider_bg_pos: top; + } + } + @else { + margin: -4px -11px; + min-height: 9px; + min-width: 22px; + + @if $marks_infix == 'scale-has-marks-above' { + $_scale_slider_bg_pos: left bottom; + } + + @else { + $_scale_slider_bg_pos: right bottom; + } + } + } + + &.fine-tune > trough > slider { + // bigger negative margins to make the trough grow here as well + margin: -8px -4px; + + @if $dir_class == 'horizontal' { + } + + @else { + margin: -4px -8px; + } + } + } + } + } +} diff --git a/gtk/src/Plano/gtk-4.0/_drawing.scss b/gtk/src/Plano/gtk-4.0/_drawing.scss new file mode 100644 index 0000000..c270b09 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/_drawing.scss @@ -0,0 +1,538 @@ +// Drawing mixins + +// generic drawing of more complex things + +@function _widget_edge($c:$borders_edge) { +// outer highlight "used" on most widgets + @if $c == none { @return none; } + @else { @return 0 1px $c; } +} + +// +// Helper mixin for drawing visible focus rings +// +// If $target is specified, the focus ring is applied to the specified child element. +// If $outer is true, the focus ring extends outward. Otherwise, it extends inward. +// If $within is true, use focus-within instead of focus:focus-visible +// +@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: 'focus:focus-visible', $fc: $focus_border_color) { + & #{$target} { + outline: 0 solid transparent; + outline-offset: if($outer, $offset + 4px, $offset + $width + 4px); + } + + &:#{$focus-state} #{$target} { + outline-color: $fc; + outline-width: $width; + outline-offset: $offset; + } +} + +@mixin _shadows($list...) { +// +// Helper mixin to stack up to box-shadows; +// + $shadows: null; + + @each $shadow in $list { + @if $shadow!=none { $shadows: $shadows, $shadow; } + } + + box-shadow: $shadows; +} + +// entries + +@mixin entry($t, $fc:$focus_border_color) { +// +// Entries drawing function +// +// $t: entry type +// $fc: focus color +// +// possible $t values: +// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop, block_cursor; +// + + @if $t==normal { + color: $text_color; + border-color: $borders_color; + background-color: $base_color; + // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. + } + @if $t==insensitive { + color: $insensitive_fg_color; + border-color: $borders_color; + background-color: $insensitive_bg_color; + } + @if $t==backdrop { + color: $backdrop_text_color; + border-color: $backdrop_borders_color; + background-color: $backdrop_base_color; + } + @if $t==backdrop-insensitive { + color: $backdrop_insensitive_color; + border-color: $backdrop_borders_color; + background-color: $insensitive_bg_color; + } + @if $t==osd { + color: $osd_text_color; + border-color: $osd_borders_color; + background-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-clip: padding-box; + box-shadow: none; + -gtk-icon-shadow: 0 1px black; + } + @if $t==osd-focus { + color: $osd_text_color; + border-color: $selected_bg_color; + background-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-clip: padding-box; + } + @if $t==osd-insensitive { + color: $osd_insensitive_fg_color; + border-color: $osd_borders_color; + background-color: $osd_insensitive_bg_color; + background-clip: padding-box; + } + @if $t==osd-backdrop { + color: $osd_text_color; + border-color: $osd_borders_color; + background-color: transparentize(opacify($osd_borders_color, 1), 0.5); + background-clip: padding-box; + } + @if $t==block_cursor { + color: $base_color; + background-color: $text_color; + } +} + +// buttons + +@function _border_color($c, $darker: false) { + @if $darker == true { @return darken($c, 20%); } + @else { @return darken($c, 15%); } +} + +@function _button_hilight_color($c) { +// +// calculate the right top hilight color for buttons +// +// $c: base color; +// + @if lightness($c)>95% { @return white; } + @else if lightness($c)>90% { @return transparentize(white, 0.2); } + @else if lightness($c)>80% { @return transparentize(white, 0.5); } + @else if lightness($c)>50% { @return transparentize(white, 0.8); } + @else if lightness($c)>40% { @return transparentize(white, 0.9); } + @else { @return transparentize(white, 0.98); } +} + +$_default_button_c: lighten($bg_color,2%); +@mixin button($t, $c:$_default_button_c, $tc:$fg_color, $edge: none) { +// +// Button drawing function +// +// $t: button type, +// $c: base button color for colored* types +// $tc: optional text color for colored* types +// +// possible $t values: +// normal, hover, active, checked-hover, checked-active, insensitive, insensitive-active, +// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, +// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated +// + $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03); + $_button_shadow_hover: 0 0 0 2px transparentize($selected_bg_color, 0.8); + $_button_edge: if($edge == none, none, _widget_edge($edge)); + // TODO Move to colors + $_hilight_color: if($variant == 'light' and $alt_header == 'false', transparentize(white, 0.7), transparentize(white, 0.96)); + + @if $t==normal { + // + // normal button + // + color: $tc; + outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color); + border-color: if($c!=$_default_button_c, _border_color($c), darken($borders_color, 12%)); + background-color: if($variant == 'light', lighten($c, 5%), lighten($c, 5%)); + //@include _shadows($_button_shadow); + } + + @else if $t==hover { + // + // hovered button + // + color: $tc; + outline-color: transparentize($tc, 0.7); + border-color: $selected_bg_color; + @if $variant == 'light' { + background-color: if($variant == 'light', lighten($c, 8%), lighten($c, 14%)); + @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow_hover); + } + @else { + background-color: if($variant == 'light', lighten($c, 8%), lighten($c, 14%)); + @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow_hover); + } + } + + @else if $t==active { + // + // pushed button + // + color: $tc; + border-color: if($c != $_default_button_c, _border_color($c), darken($borders_color, 12%)); + background-image: if($variant == 'light', image(darken($c, 8%)), image(darken($c, 8%))); + text-shadow: none; + @include _shadows(inset 0 1px transparentize($_hilight_color, 1), inset 0 0 0 2px transparentize(black, 0.92), $_button_edge); + + &:hover { + background-image: if($variant == 'light', image(darken($c, 12%)), image(darken($c, 12%))); + } + } + + @else if $t==checked-hover { + // + // pushed togglebutton hover + // + //color: $tc; + //border-color: if($c != $_default_button_c, _border_color($c), $borders_color); + //background-image: if($variant == 'light', image(darken($c, 18%)), image(darken($c, 12%))); + //box-shadow: none; + @include button(active); + } + + @else if $t==checked-active { + // + // pushed togglebutton pushed further :) + // + //color: $tc; + //border-color: if($c != $_default_button_c, _border_color($c), $borders_color); + //background-image: if($variant == 'light', image(darken($c, 22%)), image(darken($c, 14%))); + //box-shadow: none; + @include button(active); + } + + @else if $t==insensitive { + // + // insensitive button + // + $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color); + + color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color); + border-color: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color); + background-image: image($_bg); + } + + @else if $t==insensitive-active { + // + // insensitive pushed button + // + $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%)); + $_bc: if($c != $_default_button_c, _border_color($c), $insensitive_borders_color); + + color: if($c != $_default_button_c, mix($tc, $_bg, 60%), $insensitive_fg_color); + border-color: $_bc; + background-image: image($_bg); + box-shadow: none; + } + + @else if $t==backdrop { + // + // backdrop button + // + $_bg: if($c != $_default_button_c, $c, $backdrop_bg_color); + $_bc: if($variant == 'light', $c, _border_color($c)); + + color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); + //border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color); + //background-image: image($_bg); + box-shadow: none; + } + + @else if $t==backdrop-active { + // + // backdrop pushed button + // + $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%)); + $_bc: if($variant == 'light', $_bg ,_border_color($c)); + @include button(active); + + color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); + //border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color); + //background-image: image($_bg); + //box-shadow: none; + } + + @else if $t==backdrop-insensitive { + // + // backdrop insensitive button + // + + $_bg: if($c != $_default_button_c, mix($c, $base_color, 85%), $insensitive_bg_color); + $_bc: if($variant == 'light', $_bg,_border_color($c)); + + color: if($c != $_default_button_c, mix($tc, $_bg, 35%), $backdrop_insensitive_color); + border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color); + background-image: image($_bg); + box-shadow: none; + } + + @else if $t==backdrop-insensitive-active { + // + // backdrop insensitive pushed button + // + + $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%)); + $_bc: if($variant == 'light', $_bg, _border_color($c)); + + color: if($c != $_default_button_c, mix($tc, $_bg, 35%), $backdrop_insensitive_color); + border-color: if($c != $_default_button_c, $_bc, $backdrop_borders_color); + background-image: image($_bg); + box-shadow: none; + } + + @else if $t==osd { + // + // normal osd button + // + $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color); + + color: $osd_fg_color; + outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color); + border-color: $osd_borders_color; + background-color: transparent; + background-image: image($_bg); + background-clip: padding-box; + } + + @else if $t==osd-hover { + // + // active osd button + // + $_bg: if($c != $_default_button_c, transparentize($c, 0.3), darken($osd_bg_color, 10%)); + + color: white; + border-color: $osd_borders_color; + background-color: transparent; + background-image: image($_bg); + background-clip: padding-box; + } + + @else if $t==osd-active { + // + // active osd button + // + $_bg: if($c != $_default_button_c, $c, darken($osd_bg_color, 20%)); + + color: white; + border-color: $osd_borders_color; + background-color: transparent; + background-image: image($_bg); + background-clip: padding-box; + box-shadow: none; + } + + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border-color: $osd_borders_color; + background-color: transparent; + background-image: image($osd_insensitive_bg_color); + background-clip: padding-box; + } + + @else if $t==osd-backdrop { + // + // backdrop osd button + // + $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color); + + color: $osd_fg_color; + border-color: $osd_borders_color; + background-color: transparent; + background-image: image($_bg); + background-clip: padding-box; + } + + @else if $t==undecorated { + // + // reset + // + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; + } + @else if $t==undecorated-hover { + border-color: transparent; + background-image: none; + box-shadow: none; + @if $variant == 'light' { + background-color: darken($c,14%); + } @else { + background-color: darken($c,1%); + } + } + @else if $t==undecorated-active { + border-color: transparent; + background-image: none; + box-shadow: none; + @if $variant == 'light' { + background-color: darken($c,20%); + } + @else { + background-color: darken($c,5%); + } + } +} + +@mixin headerbar_fill($c:$headerbar_bg_color, $hc:$top_hilight, $ov: none, $ac:$alt_headerbar_bg) { +// +// headerbar fill +// +// $c: base color +// $hc: top highlight color +// $ov: a background layer for background shorthand (hence no commas!) +// + //$gradient: linear-gradient(to top, darken($c, 2%), lighten($c, 1%)); + @if $ov != none { background: if($alt_header=='true', $ac $ov, $c $ov); } + @else { background: if($alt_header=='true', $ac, $c); } + + box-shadow: inset 0 1px $hc; // top highlight + + @if $alt_header == 'true' { border-color: transparent; } +} + +@mixin overshoot($p, $t:normal, $c:$fg_color) { +// +// overshoot +// +// $p: position +// $t: type +// $c: base color +// +// possible $p values: +// top, bottom, right, left +// +// possible $t values: +// normal, backdrop +// + + $_small_gradient_length: 3%; + $_big_gradient_length: 50%; + + $_small_gradient_size: 100% $_small_gradient_length; + $_big_gradient_size: 100% $_big_gradient_length; + + @if $p==right or $p==left { + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } + + $_small_gradient_color: $c; + $_big_gradient_color: transparentize($c, 0.93); + + @if $c==$fg_color { + $_small_gradient_color: darken($borders_color, 10%); + $_big_gradient_color: transparentize($fg_color, 0.93); + + @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } + } + + $_small_gradient: radial-gradient(farthest-side at $p, + $_small_gradient_color 85%, + transparentize($_small_gradient_color, 1)); + + $_big_gradient: radial-gradient(farthest-side at $p, + $_big_gradient_color, + transparentize($_big_gradient_color, 1)); + + @if $t==normal { + background-image: $_small_gradient, $_big_gradient; + background-size: $_small_gradient_size, $_big_gradient_size; + } + + @else if $t==backdrop { + background-image: $_small_gradient; + background-size: $_small_gradient_size; + } + + background-repeat: no-repeat; + background-position: $p; + + background-color: transparent; // reset some properties to be sure to not inherit them somehow + border: none; // + box-shadow: none; // +} + +//-------------------------// +// Check and Radio buttons // +//-------------------------// + + @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) { + // Check/Radio drawing function + // + // $t: check/radio type, + // $c: base button color for colored* types + // $tc: optional text color for colored* types + // $checked: bool to chose between checked/unchecked + // + // possible $t values: + // normal, hover, active, insensitive, backdrop, backdrop-insensitive, menu + + $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color); + $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7)); + + @if $t==normal { + background-clip: if($checked, border-box, padding-box); + background-image: linear-gradient(to bottom, $c, $c); + border-color: $_border_color; + box-shadow: 0 1px transparentize(black, 0.95); + color: $tc; + } + + @if $t==hover { + background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 6%), lighten($c, 6%))); + } + + @if $t==active { + box-shadow: inset 0 1px 1px 0px if($variant == 'light', rgba(0, 0, 0, 0.2), black); + background-image: if($c == white, image(darken($c, 15%)), image(darken($c, 5%))); + } + + @if $t==insensitive { + box-shadow: none; + color: transparentize($tc, 0.3); + } + + @if $t==backdrop { + background-image: image($c); + box-shadow: none; + color: $tc; + } + + @if $t==backdrop-insensitive { + box-shadow: none; + color: transparentize($tc, 0.3); + } + + @if $t==menu { + transform: scale(0.8); + border-width: 1.2px; + border-color: transparent; + box-shadow: none; + background-image: image(transparent); + color: $tc; + } + + @if $t==menu-active { + transform: scale(0.8); + border-width: 1.2px; + color: $tc; + box-shadow: none; + background-image: image(transparent); + } +} diff --git a/gtk/src/Plano/gtk-4.0/_theme_colors.scss b/gtk/src/Plano/gtk-4.0/_theme_colors.scss new file mode 100644 index 0000000..05b2ee1 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/_theme_colors.scss @@ -0,0 +1,25 @@ +// Colors used by the 3rd party theme + +// dark colors +$dark_bg: #41464a; +$dark_secondary_bg: #292c2e; +$dark_base: #1d1f21; //#4d5358; +$dark_border: transparentize(black, 0.6); +$dark_header: if($variant == 'dark', #35393c, #4d5358); +$dark_fg: #eeeeec; + +// light colors +$light_bg: #e6e8e8; +$light_secondary_bg: #ccd0d0; +$light_base: #fff; +$light_border: #bfc4c4; +$light_header: #d9dcdc; +$light_fg: #2e3436; + +// more colors +$theme_red: if($variant == 'light', #ca474d, #ec5f67); // error color and close button +$theme_yellow: if($variant == 'light', #dbac4b, #fac863); // warning color +$theme_blue: if($variant == 'light', #4c73b2, #6699cc); // selection color +$theme_green: if($variant == 'light', #73a56f, #99c794); // success color +// $theme_cyan: if($variant == 'light', #529d9d, #5fb3b3); +// $theme_magneta: if($variant == 'light', #a97aa9, #c594c5); diff --git a/gtk/src/Plano/gtk-4.0/assets/bullet-symbolic.svg b/gtk/src/Plano/gtk-4.0/assets/bullet-symbolic.svg new file mode 100644 index 0000000..acf880a --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/assets/bullet-symbolic.svg @@ -0,0 +1,155 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/gtk/src/Plano/gtk-4.0/assets/bullet-symbolic.symbolic.png b/gtk/src/Plano/gtk-4.0/assets/bullet-symbolic.symbolic.png new file mode 100644 index 0000000..8e6925a Binary files /dev/null and b/gtk/src/Plano/gtk-4.0/assets/bullet-symbolic.symbolic.png differ diff --git a/gtk/src/Plano/gtk-4.0/assets/bullet@2-symbolic.symbolic.png b/gtk/src/Plano/gtk-4.0/assets/bullet@2-symbolic.symbolic.png new file mode 100644 index 0000000..e9df425 Binary files /dev/null and b/gtk/src/Plano/gtk-4.0/assets/bullet@2-symbolic.symbolic.png differ diff --git a/gtk/src/Plano/gtk-4.0/assets/check-symbolic.svg b/gtk/src/Plano/gtk-4.0/assets/check-symbolic.svg new file mode 100644 index 0000000..b04b5ad --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/assets/check-symbolic.svg @@ -0,0 +1,154 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/gtk/src/Plano/gtk-4.0/assets/check-symbolic.symbolic.png b/gtk/src/Plano/gtk-4.0/assets/check-symbolic.symbolic.png new file mode 100644 index 0000000..14bd626 Binary files /dev/null and b/gtk/src/Plano/gtk-4.0/assets/check-symbolic.symbolic.png differ diff --git a/gtk/src/Plano/gtk-4.0/assets/check@2-symbolic.symbolic.png b/gtk/src/Plano/gtk-4.0/assets/check@2-symbolic.symbolic.png new file mode 100644 index 0000000..994ce3a Binary files /dev/null and b/gtk/src/Plano/gtk-4.0/assets/check@2-symbolic.symbolic.png differ diff --git a/gtk/src/Plano/gtk-4.0/assets/dash-symbolic.svg b/gtk/src/Plano/gtk-4.0/assets/dash-symbolic.svg new file mode 100644 index 0000000..7886d54 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/assets/dash-symbolic.svg @@ -0,0 +1,153 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/gtk/src/Plano/gtk-4.0/assets/dash-symbolic.symbolic.png b/gtk/src/Plano/gtk-4.0/assets/dash-symbolic.symbolic.png new file mode 100644 index 0000000..c20d4ba Binary files /dev/null and b/gtk/src/Plano/gtk-4.0/assets/dash-symbolic.symbolic.png differ diff --git a/gtk/src/Plano/gtk-4.0/assets/dash@2-symbolic.symbolic.png b/gtk/src/Plano/gtk-4.0/assets/dash@2-symbolic.symbolic.png new file mode 100644 index 0000000..d2b3385 Binary files /dev/null and b/gtk/src/Plano/gtk-4.0/assets/dash@2-symbolic.symbolic.png differ diff --git a/gtk/src/Plano/gtk-4.0/gtk-alt-header.css b/gtk/src/Plano/gtk-4.0/gtk-alt-header.css new file mode 100644 index 0000000..3e26c65 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/gtk-alt-header.css @@ -0,0 +1,1946 @@ +.background { color: #2c2c2c; background-color: #ebeced; } + +.background:backdrop { text-shadow: none; -gtk-icon-shadow: none; } + +dnd { color: #2c2c2c; } + +.normal-icons { -gtk-icon-size: 16px; } + +.large-icons { -gtk-icon-size: 32px; } + +spinner:disabled, arrow:disabled, scrollbar:disabled, check:disabled, radio:disabled, treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); } + +.view, iconview, textview > text { color: black; background-color: #ffffff; } + +.view:disabled, iconview:disabled, textview > text:disabled { color: #8c8c8d; background-color: #f3f4f4; } + +.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { border-radius: 0px; } + +textview:drop(active) { caret-color: #4a90d9; } + +textview > border { background-color: #f5f6f6; } + +iconview { outline: 0 solid transparent; outline-offset: 4px; } + +iconview:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +iconview:drop(active) { box-shadow: none; } + +iconview > dndtarget:drop(active) { border-style: solid; border-width: 1px; border-color: #256ab1; } + +rubberband, .content-view > rubberband, columnview.view > rubberband, treeview.view > rubberband, gridview > rubberband, flowbox > rubberband { border: 1px solid #2a76c6; background-color: rgba(42, 118, 198, 0.2); } + +flowbox > flowboxchild { padding: 3px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +flowbox > flowboxchild { outline: 0 solid transparent; outline-offset: 4px; } + +flowbox > flowboxchild:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +flowbox > flowboxchild:selected { outline-color: rgba(255, 255, 255, 0.8); } + +gridview > child { padding: 3px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +gridview > child { outline: 0 solid transparent; outline-offset: 4px; } + +gridview > child:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +gridview > child:selected { outline-color: rgba(255, 255, 255, 0.8); } + +gridview > child box { border-spacing: 8px; margin: 12px; } + +coverflow cover { color: black; background-color: #ffffff; border: 1px solid black; } + +label { outline: 0 solid transparent; outline-offset: 4px; } + +label:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +label > selection { background-color: #4a90d9; color: #ffffff; } + +label:disabled { color: #8c8c8d; } + +button label:disabled { color: inherit; } + +label.error { color: #cc0000; } + +label.error:disabled { color: rgba(204, 0, 0, 0.5); } + +.dim-label, .titlebar:not(headerbar) .subtitle, headerbar .subtitle, spinbutton.vertical > text > text > placeholder, spinbutton:not(.vertical) > text > placeholder, entry > text > placeholder, label.separator { opacity: 0.55; text-shadow: none; } + +window.assistant .sidebar { padding: 0px; border-top: 1px solid #c3c6c9; } + +window.assistant.csd .sidebar { border-top-style: none; } + +window.assistant .sidebar > label { padding: 6px 12px; } + +window.assistant .sidebar > label.highlight { background-color: #4a90d9; color: #ffffff; border-radius: 0; } + +window.aboutdialog image.large-icons { -gtk-icon-size: 128px; } + +.osd .scale-popup, .app-notification, .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents, .osd { color: #eeeeec; border: none; background-color: rgba(53, 53, 53, 0.7); background-clip: padding-box; -gtk-icon-shadow: 0 1px black; } + +@keyframes spin { to { transform: rotate(1turn); } } + +spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } + +spinner:checked { opacity: 1; animation: spin 1s linear infinite; } + +spinner:checked:disabled { opacity: 0.5; } + +.large-title { font-weight: 300; font-size: 24pt; } + +.title-1 { font-weight: 800; font-size: 20pt; } + +.title-2 { font-weight: 800; font-size: 15pt; } + +.title-3 { font-weight: 700; font-size: 15pt; } + +.title-4 { font-weight: 700; font-size: 13pt; } + +.heading { font-weight: 700; font-size: 11pt; } + +.body { font-weight: 400; font-size: 11pt; } + +.caption-heading { font-weight: 700; font-size: 9pt; } + +.caption { font-weight: 400; font-size: 9pt; } + +spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 24px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 0px; border-spacing: 6px; transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: black; border-color: #c3c6c9; background-color: #ffffff; } + +spinbutton.vertical > text, spinbutton:not(.vertical), entry { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text > image.left, spinbutton:not(.vertical) > image.left, entry > image.left { margin-right: 6px; } + +spinbutton.vertical > text > image.right, spinbutton:not(.vertical) > image.right, entry > image.right { margin-left: 6px; } + +spinbutton.vertical > text > text > block-cursor, spinbutton:not(.vertical) > text > block-cursor, entry > text > block-cursor { color: #ffffff; background-color: black; } + +spinbutton.vertical > text.flat, spinbutton.flat:not(.vertical), entry.flat:focus-within, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; background-color: transparent; border-color: transparent; border-radius: 0; } + +spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:not(.vertical) > placeholder, entry:focus-within > placeholder { opacity: 0; } + +spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled { color: #8c8c8d; border-color: #c3c6c9; background-color: #f3f4f4; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #cc0000; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within { outline-color: rgba(204, 0, 0, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #cc0000; } + +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #f57900; } + +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #f57900; } + +spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #565656; } + +spinbutton.vertical > text > image:hover, spinbutton:not(.vertical) > image:hover, entry > image:hover { color: #2c2c2c; } + +spinbutton.vertical > text > image:active, spinbutton:not(.vertical) > image:active, entry > image:active { color: #4a90d9; } + +spinbutton.vertical > text.password image.caps-lock-indicator, spinbutton.password:not(.vertical) image.caps-lock-indicator, entry.password image.caps-lock-indicator { color: #a2a2a3; } + +spinbutton.vertical > text:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active):focus-within, entry:drop(active) { border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } + +.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); background-clip: padding-box; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within { color: white; border-color: #4a90d9; background-color: rgba(0, 0, 0, 0.5); background-clip: padding-box; } + +.osd spinbutton.vertical > text:disabled, .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: rgba(71, 71, 71, 0.5); background-clip: padding-box; } + +spinbutton.vertical > text > progress, spinbutton:not(.vertical) > progress, entry > progress { margin-bottom: 2px; } + +spinbutton.vertical > text progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, entry progress > trough > progress { background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #4a90d9; border-style: solid; box-shadow: none; } + +spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #4a90d9; } + +spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #edeeef; } + +spinbutton.vertical.linked > text:disabled + text:disabled, spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #edeeef; } + +spinbutton.vertical.linked > text + text:drop(active):not(:only-child), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #4a90d9; } + +spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + menubutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + menubutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + dropdown > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + dropdown > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + colorbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + fontbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #4a90d9; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #cc0000; } + +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #ffffff; transition-property: color, background; } + +treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #ffffff; } + +treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #4a90d9; } + +editablelabel > stack > text { color: black; border-color: #c3c6c9; background-color: #ffffff; } + +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #4a90d9 0%, rgba(74, 144, 217, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #4a90d9 95%, rgba(74, 144, 217, 0)); } } + +notebook > header > tabs > arrow, button { min-height: 20px; min-width: 16px; padding: 4px 4px; border: 1px solid; border-radius: 0px; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #2c2c2c; outline-color: rgba(74, 144, 217, 0.5); border-color: #a3a7ac; background-color: #fefefe; } + +notebook > header > tabs > arrow, button { outline: 0 solid transparent; outline-offset: 4px; } + +notebook > header > tabs > arrow:focus:focus-visible, button:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +notebook > header > tabs > arrow:hover, button:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); -gtk-icon-filter: brightness(1.2); } + +notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, button:active, button:checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); transition-duration: 50ms; } + +notebook > header > tabs > arrow:active:hover, notebook > header > tabs > arrow:checked:hover, button:active:hover, button:checked:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:checked:hover, button:checked:hover { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +notebook > header > tabs > arrow:checked:hover:hover, button:checked:hover:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:checked:active, button:checked:active { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +notebook > header > tabs > arrow:checked:active:hover, button:checked:active:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:backdrop, button.flat:backdrop, button:backdrop { color: #8c8c8d; box-shadow: none; transition: none; -gtk-icon-filter: none; } + +notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.flat:backdrop:active, button.flat:backdrop:checked, button:backdrop:active, button:backdrop:checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); color: #8c8c8d; } + +notebook > header > tabs > arrow:backdrop:active:hover, notebook > header > tabs > arrow:backdrop:checked:hover, button.flat:backdrop:active:hover, button.flat:backdrop:checked:hover, button:backdrop:active:hover, button:backdrop:checked:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:backdrop:disabled, button.flat:backdrop:disabled, button:backdrop:disabled { color: #c3c6c9; border-color: #cbcdd0; background-image: image(#f3f4f4); box-shadow: none; } + +notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.flat:backdrop:disabled:active, button.flat:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: #c3c6c9; border-color: #cbcdd0; background-image: image(#dedee0); box-shadow: none; } + +notebook > header > tabs > arrow:disabled, button:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, button:disabled:active, button:disabled:checked { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#dedee0); box-shadow: none; } + +button.sidebar-button, notebook > header > tabs > arrow, notebook > header > tabs > arrow.flat, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; transition: none; } + +button.sidebar-button:hover, notebook > header > tabs > arrow:hover, button.flat:hover { border-color: transparent; background-image: none; box-shadow: none; background-color: #cbcdd0; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; } + +button.sidebar-button:active, notebook > header > tabs > arrow:active, button.sidebar-button:checked, notebook > header > tabs > arrow:checked, button.flat:active, button.flat:checked { border-color: transparent; background-image: none; box-shadow: none; background-color: #bbbec2; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +button.sidebar-button:backdrop, notebook > header > tabs > arrow:backdrop, button.sidebar-button:disabled, notebook > header > tabs > arrow:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +notebook > header > tabs > arrow.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } + +notebook > header > tabs > arrow.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } + +notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; } + +notebook > header > tabs > arrow.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } + +dropdown:drop(active) button.combo, combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), button:drop(active) { color: #4a90d9; border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } + +row:selected button { border-color: #256ab1; } + +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #ffffff; border-color: transparent; } + +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #fcfcfc; } + +button.osd { min-width: 26px; min-height: 32px; color: #eeeeec; border-radius: 0px; color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; border: none; box-shadow: none; } + +button.osd.image-button { min-width: 30px; } + +button.osd.image-button:only-child { margin: 4px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } + +button.osd:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; border: none; box-shadow: none; } + +button.osd:active, button.osd:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; border: none; box-shadow: none; } + +.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; } + +.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +.app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; } + +.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; background-image: none; border-color: transparent; box-shadow: none; } + +.app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; background-color: #5f9ddd; } + +button.suggested-action { outline: 0 solid transparent; outline-offset: 4px; } + +button.suggested-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +button.suggested-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #4a90d9; } + +button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #6ca5e0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +button.suggested-action:active, button.suggested-action:checked { color: white; border-color: #256ab1; background-image: image(#2b7bcf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +button.suggested-action:active:hover, button.suggested-action:checked:hover { background-image: image(#2871be); } + +button.suggested-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(74, 144, 217, 0.8); } + +button.suggested-action:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #b4d1ef; border-color: #256ab1; background-image: image(#438cd8); box-shadow: none; } + +.osd button.suggested-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.5)); background-clip: padding-box; } + +.osd button.suggested-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.7)); background-clip: padding-box; } + +.osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#4a90d9); background-clip: padding-box; box-shadow: none; } + +.osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +button.destructive-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #9c1319; background-color: #e62f37; } + +button.destructive-action { outline: 0 solid transparent; outline-offset: 4px; } + +button.destructive-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +button.destructive-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #e01b24; } + +button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #e83c44; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +button.destructive-action:active, button.destructive-action:checked { color: white; border-color: #9c1319; background-image: image(#bc171e); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +button.destructive-action:active:hover, button.destructive-action:checked:hover { background-image: image(#a9141b); } + +button.destructive-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(224, 27, 36, 0.8); } + +button.destructive-action:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: #f1a5a8; border-color: #9c1319; background-image: image(#dc1d27); box-shadow: none; } + +.osd button.destructive-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.5)); background-clip: padding-box; } + +.osd button.destructive-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.7)); background-clip: padding-box; } + +.osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#e01b24); background-clip: padding-box; box-shadow: none; } + +.osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +stackswitcher > button > label { padding: 0 6px; margin: 0 -6px; } + +stackswitcher > button > image { padding: 3px 6px; margin: -3px -6px; } + +button.font separator { background-color: transparent; } + +button.font > box { border-spacing: 6px; } + +button.font > box > box > label { font-weight: bold; } + +button.circular { min-width: 32px; min-height: 32px; padding: 0; border-radius: 9999px; } + +button.circular label { padding: 0; } + +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #4a90d9 96%, rgba(74, 144, 217, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } + +stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } + +stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl) { background-position: left 3px, left 4px; } + +.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(ltr), combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > filechooserbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > filechooserbutton:dir(ltr):not(:first-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(ltr):not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + +.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(rtl), combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > filechooserbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > filechooserbutton:dir(ltr):not(:last-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(ltr):not(:last-child) { border-right-style: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } + +.linked.vertical > filechooserbutton > combobox:not(:first-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:first-child) > box > button.combo, .linked.vertical > combobox:not(:first-child) > box > button.combo, .linked.vertical > menubutton:not(:first-child) > button, .linked.vertical > dropdown:not(:first-child) > button, .linked.vertical > colorbutton:not(:first-child) > button, .linked.vertical > fontbutton:not(:first-child) > button, .linked.vertical > filechooserbutton:not(:first-child) > button, spinbutton.vertical.linked > text:not(:first-child), .linked.vertical > spinbutton:not(:first-child):not(.vertical), .linked.vertical > entry:not(:first-child), .linked.vertical > button:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; } + +.linked.vertical > filechooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > combobox:not(:last-child) > box > button.combo, .linked.vertical > menubutton:not(:last-child) > button, .linked.vertical > dropdown:not(:last-child) > button, .linked.vertical > colorbutton:not(:last-child) > button, .linked.vertical > fontbutton:not(:last-child) > button, .linked.vertical > filechooserbutton:not(:last-child) > button, spinbutton.vertical.linked > text:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical), .linked.vertical > entry:not(:last-child), .linked.vertical > button:not(:last-child) { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + +.scale-popup button:hover, button.link, button.link:hover, button.link:active, button.link:checked, popover.menu box.circular-buttons button.circular.image-button.model, list > row button.image-button:not(.flat), .toolbar button, modelbutton.flat { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } + +modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 0px; } + +modelbutton.flat:hover { background-color: #4a90d9; color: #ffffff; } + +modelbutton.flat:disabled { color: #8c8c8d; } + +modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; opacity: 0.3; } + +modelbutton.flat arrow:hover { background: none; } + +modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } + +modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } + +.toolbar button { margin: 1px; } + +.toolbar button:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +.toolbar button:active { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +.toolbar button:active:hover { background-image: image(#d0d3d5); } + +.toolbar button:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +.toolbar button:backdrop { color: #8c8c8d; box-shadow: none; } + +.toolbar button:backdrop:disabled { color: #c3c6c9; border-color: #cbcdd0; background-image: image(#f3f4f4); box-shadow: none; } + +button.color { padding: 4px; } + +button.color > colorswatch:only-child { box-shadow: 0 1px rgba(0, 0, 0, 0.1); } + +button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay { border-radius: 0; } + +.osd button.color > colorswatch:only-child { box-shadow: none; } + +.osd button.color:disabled colorswatch:only-child, .osd button.color:active colorswatch:only-child, .osd button.color:checked colorswatch:only-child, button.color:disabled colorswatch:only-child, button.color:active colorswatch:only-child, button.color:checked colorswatch:only-child { box-shadow: none; } + +popover.menu box.circular-buttons button.circular.image-button.model, list > row button.image-button:not(.flat) { border: 1px solid rgba(195, 198, 201, 0.5); } + +popover.menu box.circular-buttons button.circular.image-button.model:hover, list > row button.image-button:not(.flat):hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.circular-buttons button.circular.image-button.model:checked, list > row button.image-button:not(.flat):active, list > row button.image-button:not(.flat):checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +popover.menu box.circular-buttons button.circular.image-button.model:active:hover, popover.menu box.circular-buttons button.circular.image-button.model:checked:hover, list > row button.image-button:not(.flat):active:hover, list > row button.image-button:not(.flat):checked:hover { background-image: image(#d0d3d5); } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button.suggested-action:not(.flat) { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; background-color: #5f9ddd; } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button.suggested-action:not(.flat) { outline: 0 solid transparent; outline-offset: 4px; } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model:focus:focus-visible, list > row button.image-button.suggested-action:not(.flat):focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button.destructive-action:not(.flat) { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #9c1319; background-color: #e62f37; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button.destructive-action:not(.flat) { outline: 0 solid transparent; outline-offset: 4px; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model:focus:focus-visible, list > row button.image-button.destructive-action:not(.flat):focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +button.link, link { color: #2a76c6; text-decoration: underline; } + +button.link:visited, link:visited { color: #215d9c; } + +*:selected button.link:visited, *:selected link:visited { color: #a6bed7; } + +button.link:hover, link:hover { color: #4a90d9; } + +*:selected button.link:hover, *:selected link:hover { color: #edf4fb; } + +button.link:active, link:active { color: #2a76c6; } + +*:selected button.link:active, *:selected link:active { color: #d4e4f4; } + +button.link:disabled, link:disabled { color: rgba(120, 120, 120, 0.8); } + +button.link:selected, *:selected button.link, link:selected, *:selected link { color: #d4e4f4; } + +link { outline: 0 solid transparent; outline-offset: 4px; } + +link:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +button.link, button.link:hover, button.link:active, button.link:checked { text-shadow: none; } + +button.link > label { text-decoration: underline; } + +spinbutton { font-feature-settings: "tnum"; } + +spinbutton:not(.vertical) { padding: 0; border-spacing: 0; } + +.osd spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 6px; } + +.osd spinbutton:not(.vertical) > text:backdrop:disabled, spinbutton:not(.vertical) > text:backdrop:disabled { background-color: transparent; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat), spinbutton:not(.vertical) > button.image-button.down:not(.flat) { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #414141; background-image: none; border-style: none none none solid; border-color: rgba(195, 198, 201, 0.3); border-radius: 0; box-shadow: none; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { color: #2c2c2c; background-color: #dedfe1; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { color: rgba(140, 140, 141, 0.3); background-color: transparent; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):active, spinbutton:not(.vertical) > button.image-button.down:not(.flat):active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 0px 0px 0; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 0px 0 0 0px; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #eeeeec; border-style: none none none solid; border-color: rgba(0, 0, 0, 0.4); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #eeeeec; border-color: rgba(0, 0, 0, 0.5); background-color: rgba(27, 27, 27, 0.7); -gtk-icon-shadow: 0 1px black; box-shadow: none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #919190; border-color: rgba(0, 0, 0, 0.5); -gtk-icon-shadow: none; box-shadow: none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 0px 0px 0; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 0px 0 0 0px; } + +spinbutton.vertical:disabled { color: #8c8c8d; } + +spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } + +spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } + +spinbutton.vertical > text > block-cursor { color: #ffffff; background-color: black; } + +spinbutton.vertical > button { min-height: 32px; min-width: 32px; padding: 0; } + +spinbutton.vertical > button.up { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + +spinbutton.vertical > button.down { border-top-style: none; border-top-left-radius: 0; border-top-right-radius: 0; } + +.osd spinbutton.vertical > button:first-child { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.osd spinbutton.vertical > button:first-child:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; } + +.osd spinbutton.vertical > button:first-child:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +.osd spinbutton.vertical > button:first-child:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } + +treeview spinbutton:not(.vertical) > text { min-height: 0; padding: 1px 2px; } + +dropdown > popover.menu.background > contents { padding: 0; } + +dropdown > button > box { border-spacing: 6px; } + +dropdown arrow, combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } + +dropdown > popover.menu > contents modelbutton, combobox > popover.menu > contents modelbutton { padding-left: 9px; padding-right: 9px; } + +dropdown:drop(active), combobox:drop(active) { box-shadow: none; } + +dropdown popover, combobox popover { margin-top: 6px; padding: 0; } + +dropdown popover listview, combobox popover listview { margin: 8px 0; } + +dropdown popover listview > row, combobox popover listview > row { padding: 8px; } + +dropdown popover listview > row:selected, combobox popover listview > row:selected { outline-color: rgba(255, 255, 255, 0.8); color: black; background-color: #dbdddf; } + +dropdown popover .dropdown-searchbar, combobox popover .dropdown-searchbar { padding: 6px; border-bottom: 1px solid #c3c6c9; } + +searchbar > revealer > box, .toolbar, toolbar { padding: 4px 3px 3px 4px; border-spacing: 4px; background-color: #ebeced; } + +.osd .toolbar, .osd toolbar { background-color: transparent; } + +.toolbar.osd, toolbar.osd { padding: 13px; border: none; border-radius: 0px; background-color: rgba(53, 53, 53, 0.7); } + +.toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } + +.toolbar.horizontal > separator, toolbar.horizontal > separator { margin: 4px 0; } + +.toolbar.vertical > separator, toolbar.vertical > separator { margin: 0 4px; } + +searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; } + +searchbar > revealer > box { border-style: solid; border-color: #c3c6c9; background-color: #dfe1e2; } + +searchbar > revealer > box:backdrop { border-color: #cbcdd0; background-color: #e0e1e3; box-shadow: none; transition: none; } + +infobar > revealer > box { padding: 8px; border-spacing: 12px; } + +infobar.action:hover > revealer > box { background-color: #eee6dc; } + +infobar.info > revealer > box, infobar.question > revealer > box, infobar.warning > revealer > box, infobar.error > revealer > box { border-bottom: 1px solid #d0d3d5; background-color: #ebe0d5; } + +infobar .close, searchbar .close { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; min-width: 16px; min-height: 16px; padding: 4px; border-radius: 50%; } + +infobar .close:hover, searchbar .close:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +windowcontrols { border-spacing: 0px; } + +.titlebar:not(headerbar), headerbar { padding: 0 4px; min-height: 38px; border-width: 0; border-style: solid; border-color: #c3c6c9; border-radius: 0; background: #3c4446; box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); border-color: transparent; } + +.titlebar:backdrop:not(headerbar), headerbar:backdrop { background-image: none; } + +.titlebar:not(headerbar) .title, headerbar .title { padding-left: 12px; padding-right: 12px; font-weight: bold; } + +.titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } + +.tiled .titlebar:not(headerbar), .tiled-top .titlebar:not(headerbar), .tiled-left .titlebar:not(headerbar), .tiled-right .titlebar:not(headerbar), .tiled-bottom .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar, .tiled-top headerbar, .tiled-left headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; box-shadow: none; } + +.default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 0 4px; } + +.maximized .default-decoration.titlebar:not(headerbar), .maximized headerbar.default-decoration { box-shadow: none; } + +.default-decoration.titlebar:not(headerbar) windowcontrols button, headerbar.default-decoration windowcontrols button { min-height: 20px; min-width: 20px; } + +.default-decoration.titlebar:not(headerbar) windowcontrols menubutton, headerbar.default-decoration windowcontrols menubutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } + +.default-decoration.titlebar:not(headerbar) windowcontrols menubutton button, headerbar.default-decoration windowcontrols menubutton button { min-height: 20px; min-width: 20px; margin: 0; padding: 4px; } + +.titlebar:not(headerbar) separator, headerbar separator, headerbar separator:backdrop { background: #3c4446; box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); border-color: transparent; } + +.solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; } + +headerbar > windowhandle > box, headerbar > windowhandle > box > box.start, headerbar > windowhandle > box > box.end { border-spacing: 6px; } + +headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button, headerbar menubutton { margin-top: 4px; margin-bottom: 4px; } + +headerbar menubutton > button { margin-top: 0px; margin-bottom: 0px; } + +headerbar switch { margin-top: 8px; margin-bottom: 8px; } + +headerbar.titlebar headerbar:not(.titlebar) { background: none; box-shadow: none; } + +window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } + +.titlebar:not(headerbar) separator { background-color: #c3c6c9; } + +window.devel headerbar.titlebar { background: #ebeced cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(74, 144, 217, 0.2)), linear-gradient(to top, #c8cbce, #d0d3d5 3px, #e0e2e3); } + +window.devel headerbar.titlebar:backdrop { background: #ebeced cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#ebeced); } + +pathbar > button.text-button, pathbar > button.image-button, pathbar > button { padding-left: 4px; padding-right: 4px; } + +pathbar > button.text-button.image-button label { padding-left: 0; padding-right: 0; } + +pathbar > button.text-button.image-button label:last-child, pathbar > button label:last-child { padding-right: 8px; } + +pathbar > button.text-button.image-button label:first-child, pathbar > button label:first-child { padding-left: 8px; } + +pathbar > button image { padding-left: 4px; padding-right: 4px; } + +pathbar > button.slider-button { padding-left: 0; padding-right: 0; } + +columnview.view, treeview.view { border-left-color: #cfd1d4; border-top-color: #cfd1d4; } + +columnview.view, treeview.view { outline: 0 solid transparent; outline-offset: 4px; } + +columnview.view:focus:focus-visible, treeview.view:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { border-radius: 0; outline-color: rgba(255, 255, 255, 0.8); } + +columnview.view:disabled, treeview.view:disabled { color: #8c8c8d; } + +columnview.view:disabled:selected, treeview.view:disabled:selected { color: #92bce8; } + +columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #80b1e4; } + +columnview.view.separator, treeview.view.separator { min-height: 2px; color: #cfd1d4; } + +columnview.view:backdrop, treeview.view:backdrop { border-left-color: #d5d7d9; border-top: #d5d7d9; } + +columnview.view:drop(active), treeview.view:drop(active) { box-shadow: none; } + +columnview.view > dndtarget:drop(active), treeview.view > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #256ab1; } + +columnview.view > dndtarget.after:drop(active), treeview.view > dndtarget.after:drop(active) { border-top-style: none; } + +columnview.view > dndtarget.before:drop(active), treeview.view > dndtarget.before:drop(active) { border-bottom-style: none; } + +columnview.view.expander, treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #4d4d4d; } + +columnview.view.expander:dir(rtl), treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +columnview.view.expander:hover, treeview.view.expander:hover { color: black; } + +columnview.view.expander:selected, treeview.view.expander:selected { color: #c9def4; } + +columnview.view.expander:selected:hover, treeview.view.expander:selected:hover { color: #ffffff; } + +columnview.view.expander:checked, treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +columnview.view.progressbar, treeview.view.progressbar { color: #ffffff; background-color: #4a90d9; background-image: image(#4a90d9); box-shadow: none; } + +columnview.view.progressbar:selected:focus, columnview.view.progressbar:selected, treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { color: #4a90d9; background-image: image(#ffffff); } + +columnview.view.progressbar:selected:focus:backdrop, columnview.view.progressbar:selected:backdrop, treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { color: #4a90d9; background-color: #fcfcfc; } + +columnview.view.trough, treeview.view.trough { background-color: rgba(44, 44, 44, 0.1); } + +columnview.view.trough:selected:focus, columnview.view.trough:selected, treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: rgba(255, 255, 255, 0.3); } + +columnview.view > header > button, treeview.view > header > button { color: #969696; background-color: #ffffff; font-weight: bold; text-shadow: none; box-shadow: none; } + +columnview.view > header > button:hover, treeview.view > header > button:hover { color: #616161; box-shadow: none; transition: none; } + +columnview.view > header > button:active, treeview.view > header > button:active { color: #2c2c2c; transition: none; } + +columnview.view button.dnd:active, columnview.view button.dnd:selected, columnview.view button.dnd:hover, columnview.view button.dnd, columnview.view header.button.dnd:active, columnview.view header.button.dnd:selected, columnview.view header.button.dnd:hover, columnview.view header.button.dnd, treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; color: #ffffff; background-image: none; background-color: #4a90d9; border-style: none; border-radius: 0; box-shadow: inset 0 0 0 1px #ffffff; text-shadow: none; transition: none; } + +columnview.view acceleditor > label, treeview.view acceleditor > label { background-color: #4a90d9; } + +columnview.view > header > button, treeview.view > header > button, columnview.view > header > button:hover, treeview.view > header > button:hover, columnview.view > header > button:active, treeview.view > header > button:active { padding: 0 6px; background-image: none; border-style: none none solid solid; border-color: #cfd1d4; border-radius: 0; text-shadow: none; } + +columnview.view > header > button:disabled, treeview.view > header > button:disabled { border-color: #ebeced; background-image: none; } + +columnview.view > header > button:last-child, treeview.view > header > button:last-child { border-right-style: none; } + +popover.background { background-color: transparent; font: initial; } + +popover.background > arrow, popover.background > contents { background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.23); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + +popover.background:backdrop { background-color: transparent; } + +popover.background > contents { padding: 8px; border-radius: 0px; } + +popover.background > contents > list, popover.background > contents > .view, popover.background > contents > iconview, popover.background > contents > toolbar { border-style: none; background-color: transparent; } + +popover.background > contents separator { background-color: #cfd1d4; margin: 3px; } + +popover.background > contents list separator { margin: 0; } + +.osd popover.background, popover.background.touch-selection, popover.background.magnifier { background-color: transparent; } + +.osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } + +magnifier { background-color: #ffffff; } + +popover.menu { padding: 0; } + +popover.menu box.inline-buttons { padding: 0 8px; } + +popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; } + +popover.menu box.inline-buttons button.image-button.model:selected { background: image(#dbdddf); } + +popover.menu box.circular-buttons { padding: 8px 8px 4px; } + +popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; } + +popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #dbdddf; border-color: #dbdddf; } + +popover.menu > arrow, popover.menu.background > contents { background-color: #ffffff; padding: 0px; } + +popover.menu.background separator { margin: 6px 0; } + +popover.menu accelerator { color: alpha(currentColor,0.55); } + +popover.menu accelerator:dir(ltr) { margin-left: 8px; } + +popover.menu accelerator:dir(rtl) { margin-right: 8px; } + +popover.menu check, popover.menu radio { transform: scale(0.8); border-width: 1.2px; border-color: transparent; box-shadow: none; background-image: image(transparent); color: black; } + +popover.menu check:hover, popover.menu radio:hover { transform: scale(0.8); border-width: 1.2px; color: #ffffff; box-shadow: none; background-image: image(transparent); } + +popover.menu check:active, popover.menu radio:active { transform: scale(0.8); border-width: 1.2px; color: black; box-shadow: none; background-image: image(transparent); } + +popover.menu radio:active { border-color: rgba(195, 198, 201, 0.5); } + +popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: -2px; margin-right: 6px; } + +popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; } + +popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 8px; border-radius: 0; } + +popover.menu modelbutton:selected { color: #ffffff; } + +popover.menu modelbutton:selected:active { color: #ffffff; } + +popover.menu label.title { font-weight: bold; padding: 4px 28px; } + +menubar { padding: 0px; } + +menubar > item { min-height: 16px; padding: 2px 8px; } + +menubar > item:selected { background-color: #4a90d9; color: #ffffff; border-radius: 0; } + +menubar > item:disabled { color: #8c8c8d; box-shadow: none; } + +menubar > item popover.menu.background > contents { padding: 0; } + +menubar > item popover.menu popover.menu { padding: 0 0 4px 0; } + +menubar > item popover.menu.background popover.menu.background > contents { margin: 0; border-radius: 0; } + +notebook > header > tabs > tab:checked { outline: 0 solid transparent; outline-offset: 4px; } + +notebook:focus:focus-visible > header > tabs > tab:checked { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +notebook > header { padding: 0; border-width: 0; background-color: #cfd1d4; } + +notebook > header > tabs { margin: 0; } + +notebook > header.top { border-bottom-style: solid; } + +notebook > header.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -3px #b5b9bd; } + +notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -3px #4a90d9; } + +notebook > header.bottom { border-top-style: solid; } + +notebook > header.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 3px #b5b9bd; } + +notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 3px #4a90d9; } + +notebook > header.left { border-right-style: solid; } + +notebook > header.left > tabs > tab:hover:not(:checked) { box-shadow: inset -3px 0 #b5b9bd; } + +notebook > header.left > tabs > tab:checked { box-shadow: inset -3px 0 #4a90d9; } + +notebook > header.right { border-left-style: solid; } + +notebook > header.right > tabs > tab:hover:not(:checked) { box-shadow: inset 3px 0 #b5b9bd; } + +notebook > header.right > tabs > tab:checked { box-shadow: inset 3px 0 #4a90d9; } + +notebook > header.top > tabs > arrow { border-top-style: none; } + +notebook > header.bottom > tabs > arrow { border-bottom-style: none; } + +notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } + +notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + +notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +notebook > header.left > tabs > arrow { border-left-style: none; } + +notebook > header.right > tabs > arrow { border-right-style: none; } + +notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } + +notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + +notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; } + +notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } + +notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +notebook > header > tabs > tab { min-height: 24px; min-width: 24px; padding: 0px 10px; color: #2c2c2c; font-weight: normal; border-width: 1px; border-color: transparent; } + +notebook > header > tabs > tab:hover { color: #5c5c5d; background-color: alpha(currentColor,0.06); } + +notebook > header > tabs > tab:not(:checked) { outline-color: transparent; } + +notebook > header > tabs > tab:checked { color: #2c2c2c; } + +notebook > header > tabs > tab.reorderable-page:checked { border-color: rgba(195, 198, 201, 0.5); background-color: rgba(235, 236, 237, 0.5); } + +notebook > header > tabs > tab.reorderable-page:checked:hover { background-color: rgba(235, 236, 237, 0.7); } + +notebook > header > tabs > tab button.flat { color: alpha(currentColor,0.3); padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } + +notebook > header > tabs > tab button.flat:hover { color: currentColor; } + +notebook > header > tabs > tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } + +notebook > header > tabs > tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } + +notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 0px; padding-right: 0px; } + +notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 3px; margin-right: 3px; } + +notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: -1px; } + +notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { margin-right: -1px; } + +notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 0px; margin-right: 0px; } + +notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab.reorderable-page { border-style: none solid; } + +notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 0px; padding-bottom: 0px; } + +notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } + +notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: -1px; } + +notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { margin-bottom: -1px; } + +notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 4px; margin-bottom: 4px; } + +notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab.reorderable-page { border-style: solid none; } + +notebook > header.top > tabs > tab { padding-bottom: 4px; } + +notebook > header.bottom > tabs > tab { padding-top: 4px; } + +notebook > stack:not(:only-child) { background-color: #ffffff; } + +scrollbar { background-color: #c5c6c6; transition: 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +scrollbar.top { border-bottom: 1px solid #c3c6c9; } + +scrollbar.bottom { border-top: 1px solid #c3c6c9; } + +scrollbar.left { border-right: 1px solid #c3c6c9; } + +scrollbar.right { border-left: 1px solid #c3c6c9; } + +scrollbar > range > trough > slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 0; background-clip: padding-box; background-color: #787979; transition: background-color 250ms; } + +scrollbar > range > trough > slider:hover { background-color: #525253; } + +scrollbar > range > trough > slider:hover:active { background-color: #2a76c6; } + +scrollbar > range > trough > slider:disabled { background-color: transparent; } + +scrollbar > range.fine-tune > trough > slider { min-width: 6px; min-height: 6px; } + +scrollbar > range.fine-tune.horizontal > trough > slider { border-width: 5px 4px; } + +scrollbar > range.fine-tune.vertical > trough > slider { border-width: 4px 5px; } + +scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } + +scrollbar.overlay-indicator:not(.dragging):not(.hovering) > range > trough > slider { margin: 0; min-width: 4px; min-height: 4px; background-color: #2c2c2c; border: 1px solid white; } + +scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) > range > trough > slider { margin: 0 2px; min-width: 40px; } + +scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) > range > trough > slider { margin: 2px 0; min-height: 40px; } + +scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } + +scrollbar.horizontal > range > trough > slider { min-width: 40px; } + +scrollbar.vertical > range > trough > slider { min-height: 40px; } + +treeview ~ scrollbar.vertical { border-top: 1px solid #c3c6c9; margin-top: -1px; } + +.view.content-view.check:not(list), iconview.content-view.check:not(list), .content-view .tile check:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:hover:not(list), iconview.content-view.check:hover:not(list), .content-view .tile check:hover:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list), .content-view .tile check:active:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:backdrop:not(list), iconview.content-view.check:backdrop:not(list), .content-view .tile check:backdrop:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #929292; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list), .content-view .tile check:checked:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:checked:hover:not(list), iconview.content-view.check:checked:hover:not(list), .content-view .tile check:checked:hover:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list), .content-view .tile check:checked:active:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:backdrop:checked:not(list), iconview.content-view.check:backdrop:checked:not(list), .content-view .tile check:backdrop:checked:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: rgba(238, 238, 236, 0.8); background-color: #929292; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +checkbutton { border-spacing: 4px; border-radius: 0px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +checkbutton { outline: 0 solid transparent; outline-offset: 4px; } + +checkbutton:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +checkbutton.text-button { padding: 4px; } + +check, radio { min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } + +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, white, white); border-color: #9aa0a5; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:hover, radio:hover { background-image: image(#f2f2f2); } + +check:active, radio:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); background-image: image(#d9d9d9); } + +check:disabled, radio:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +check:checked, radio:checked { background-clip: border-box; background-image: linear-gradient(to bottom, #4a90d9, #4a90d9); border-color: #2a76c6; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:checked:hover, radio:checked:hover { background-image: linear-gradient(to bottom, #63a0de, #63a0de); } + +check:checked:active, radio:checked:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); background-image: image(#3583d5); } + +check:checked:disabled, radio:checked:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +check:indeterminate, radio:indeterminate { background-clip: border-box; background-image: linear-gradient(to bottom, #4a90d9, #4a90d9); border-color: #2a76c6; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:indeterminate:hover, radio:indeterminate:hover { background-image: linear-gradient(to bottom, #63a0de, #63a0de); } + +check:indeterminate:active, radio:indeterminate:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); background-image: image(#3583d5); } + +check:indeterminate:disabled, radio:indeterminate:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +row:selected check, row:selected radio { border-color: #2a76c6; } + +.osd check, .osd radio { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.osd check:hover, .osd radio:hover { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.osd check:active, .osd radio:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +.osd check:disabled, .osd radio:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +check { border-radius: 0px; -gtk-icon-size: 14px; } + +check:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } + +check:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } + +treeview.view radio:selected:focus, treeview.view radio:selected, radio { border-radius: 100%; -gtk-icon-size: 14px; } + +treeview.view radio:checked:selected, radio:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")), -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); } + +treeview.view radio:indeterminate:selected, radio:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } + +treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; border-color: #256ab1; } + +progressbar > trough, scale > trough > fill, scale > trough { border: 1px solid #cfd1d4; border-radius: 0px; background-color: #cfd1d4; } + +headerbar progressbar > trough, headerbar scale > trough > fill, headerbar scale > trough { background-color: #b9bcc1; } + +progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #f3f4f4; border-color: #cbcdd0; } + +row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; } + +.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); } + +.osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(71, 71, 71, 0.5); } + +progressbar > trough > progress, scale > trough > highlight { border: 1px solid #4a90d9; border-radius: 0px; background-color: #4a90d9; } + +progressbar > trough > progress:disabled, scale > trough > highlight:disabled { background-color: transparent; border-color: transparent; } + +row:selected progressbar > trough > progress, row:selected scale > trough > highlight { border-color: #256ab1; } + +.osd progressbar > trough > progress, .osd scale > trough > highlight { border-color: rgba(0, 0, 0, 0.7); } + +.osd progressbar > trough > progress:disabled, .osd scale > trough > highlight:disabled { border-color: transparent; } + +scale { min-height: 10px; min-width: 10px; padding: 12px; } + +scale > trough { outline: 0 solid transparent; outline-offset: 16px; } + +scale:focus:focus-visible > trough { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: 10px; } + +scale > trough { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +scale > trough > fill, scale > trough > highlight { margin: -1px; } + +scale > trough > slider { min-height: 18px; min-width: 18px; margin: -9px; } + +scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } + +scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } + +scale.fine-tune > trough > slider { margin: -6px; } + +scale.fine-tune > trough > fill, scale.fine-tune > trough > highlight, scale.fine-tune > trough { border-radius: 5px; } + +scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } + +.osd scale > trough > fill { background-color: rgba(91, 91, 90, 0.775); } + +.osd scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } + +scale > trough > slider { color: #2c2c2c; outline-color: rgba(74, 144, 217, 0.5); border-color: #a3a7ac; background-color: #fefefe; border-width: 1px; border-style: solid; border-radius: 100%; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } + +scale > trough > slider:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +scale > trough > slider:active { border-color: #256ab1; } + +scale > trough > slider:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +row:selected scale > trough > slider:disabled, row:selected scale > trough > slider { border-color: #256ab1; } + +.osd scale > trough > slider { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; border-color: rgba(0, 0, 0, 0.7); background-color: #353535; } + +.osd scale > trough > slider:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; background-color: #353535; } + +.osd scale > trough > slider:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; background-color: #353535; } + +.osd scale > trough > slider:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; background-color: #353535; } + +scale > value { color: alpha(currentColor,0.55); font-feature-settings: "tnum"; } + +scale.horizontal > marks { color: alpha(currentColor,0.55); } + +scale.horizontal > marks.top { margin-bottom: 6px; } + +scale.horizontal > marks.bottom { margin-top: 6px; } + +scale.horizontal > marks indicator { background-color: currentColor; min-height: 6px; min-width: 1px; } + +scale.horizontal > value.left { margin-right: 9px; } + +scale.horizontal > value.right { margin-left: 9px; } + +scale.horizontal.fine-tune > marks.top { margin-top: 3px; } + +scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; } + +scale.horizontal.fine-tune > marks indicator { min-height: 3px; } + +scale.vertical > marks { color: alpha(currentColor,0.55); } + +scale.vertical > marks.top { margin-right: 6px; } + +scale.vertical > marks.bottom { margin-left: 6px; } + +scale.vertical > marks indicator { background-color: currentColor; min-height: 1px; min-width: 6px; } + +scale.vertical > value.top { margin-bottom: 9px; } + +scale.vertical > value.bottom { margin-top: 9px; } + +scale.vertical.fine-tune > marks.top { margin-left: 3px; } + +scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } + +scale.vertical.fine-tune > marks indicator { min-height: 3px; } + +scale.color { min-height: 0; min-width: 0; } + +scale.color > trough { background-image: image(#c3c6c9); background-repeat: no-repeat; } + +scale.color.horizontal { padding: 0 0 15px 0; } + +scale.color.horizontal > trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } + +scale.color.horizontal > trough > slider:dir(ltr):hover, scale.color.horizontal > trough > slider:dir(ltr):backdrop, scale.color.horizontal > trough > slider:dir(ltr):disabled, scale.color.horizontal > trough > slider:dir(ltr):backdrop:disabled, scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl):hover, scale.color.horizontal > trough > slider:dir(rtl):backdrop, scale.color.horizontal > trough > slider:dir(rtl):disabled, scale.color.horizontal > trough > slider:dir(rtl):backdrop:disabled, scale.color.horizontal > trough > slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } + +scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } + +scale.color.vertical:dir(ltr) > trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } + +scale.color.vertical:dir(ltr) > trough > slider:hover, scale.color.vertical:dir(ltr) > trough > slider:backdrop, scale.color.vertical:dir(ltr) > trough > slider:disabled, scale.color.vertical:dir(ltr) > trough > slider:backdrop:disabled, scale.color.vertical:dir(ltr) > trough > slider { margin-left: -15px; margin-right: 6px; } + +scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } + +scale.color.vertical:dir(rtl) > trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } + +scale.color.vertical:dir(rtl) > trough > slider:hover, scale.color.vertical:dir(rtl) > trough > slider:backdrop, scale.color.vertical:dir(rtl) > trough > slider:disabled, scale.color.vertical:dir(rtl) > trough > slider:backdrop:disabled, scale.color.vertical:dir(rtl) > trough > slider { margin-right: -15px; margin-left: 6px; } + +scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } + +scale.color.fine-tune.horizontal:dir(ltr) > trough, scale.color.fine-tune.horizontal:dir(rtl) > trough { padding-bottom: 7px; background-position: 0 -6px; } + +scale.color.fine-tune.horizontal:dir(ltr) > trough > slider, scale.color.fine-tune.horizontal:dir(rtl) > trough > slider { margin-bottom: -15px; margin-top: 6px; } + +scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } + +scale.color.fine-tune.vertical:dir(ltr) > trough { padding-left: 7px; background-position: 6px 0; } + +scale.color.fine-tune.vertical:dir(ltr) > trough > slider { margin-left: -15px; margin-right: 6px; } + +scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } + +scale.color.fine-tune.vertical:dir(rtl) > trough { padding-right: 7px; background-position: -6px 0; } + +scale.color.fine-tune.vertical:dir(rtl) > trough > slider { margin-right: -15px; margin-left: 6px; } + +progressbar { font-size: smaller; color: rgba(44, 44, 44, 0.4); font-feature-settings: "tnum"; } + +progressbar.horizontal > trough { min-width: 150px; } + +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 2px; } + +progressbar.vertical > trough { min-height: 80px; } + +progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 2px; } + +progressbar.horizontal > trough > progress { margin: 0 -1px; } + +progressbar.vertical > trough > progress { margin: -1px 0; } + +progressbar > trough > progress { border-radius: 1.5px; } + +progressbar > trough > progress:disabled { background-color: #8c8c8d; border-color: #8c8c8d; } + +progressbar > trough > progress.left { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } + +progressbar > trough > progress.right { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + +progressbar > trough > progress.top { border-top-right-radius: 5px; border-top-left-radius: 5px; } + +progressbar > trough > progress.bottom { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } + +progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } + +progressbar.osd > trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } + +progressbar.osd > trough > progress { border-style: none; border-radius: 0; } + +progressbar > trough.empty > progress { all: unset; } + +levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } + +levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } + +levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } + +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } + +levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } + +levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } + +levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } + +levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } + +levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } + +levelbar > trough { padding: 0; } + +levelbar > trough > block { border: 1px solid; } + +levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } + +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #4a90d9; background-color: #4a90d9; } + +levelbar > trough > block.full { border-color: #33d17a; background-color: #33d17a; } + +levelbar > trough > block.empty { background-color: #dedfe1; border-color: #dedfe1; } + +window.dialog.print drawing { color: #2c2c2c; background: none; border: none; padding: 0; } + +window.dialog.print drawing paper { background: white; color: #2e3436; border: 1px solid #c3c6c9; } + +window.dialog.print .dialog-action-box { margin: 12px; } + +frame, .frame { border: 1px solid #c3c6c9; } + +frame { border-radius: 0px; } + +frame > label { margin: 4px; } + +actionbar > revealer > box { padding: 6px; border-spacing: 6px; border-top: 1px solid #c3c6c9; } + +scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at top, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at bottom, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at left, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at right, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > junction { background: #c3c6c9, linear-gradient(to bottom, transparent 1px, #c5c6c6 1px), linear-gradient(to right, transparent 1px, #c5c6c6 1px); } + +scrolledwindow > junction:dir(rtl) { background: #c3c6c9, linear-gradient(to bottom, transparent 1px, #c5c6c6 1px), linear-gradient(to left, transparent 1px, #c5c6c6 1px); } + +separator { background: #d0d3d5; min-width: 1px; min-height: 1px; } + +listview, list { color: black; background-color: #ffffff; border-color: #c3c6c9; } + +listview:backdrop, list:backdrop { color: #323232; background-color: #fcfcfc; border-color: #cbcdd0; } + +listview > row, list > row { padding: 2px; } + +listview > row.expander, list > row.expander { padding: 0px; } + +listview > row.expander .row-header, list > row.expander .row-header { padding: 2px; } + +listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), list.horizontal row.separator, list.separators.horizontal > row:not(.separator) { border-left: 1px solid #cfd1d4; } + +listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #cfd1d4; } + +row { outline: 0 solid transparent; outline-offset: 4px; } + +row:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(44, 44, 44, 0.05); } + +row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + +row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + +row.activatable.has-open-popup:selected, row.activatable:selected:hover { background-color: #4786c8; } + +row:selected { outline-color: rgba(255, 255, 255, 0.8); } + +columnview > listview > row { padding: 0; } + +columnview > listview > row > cell { padding: 8px 6px; } + +columnview > listview > row > cell:not(:first-child) { border-left: 1px solid transparent; } + +columnview.column-separators > listview > row > cell { border-left-color: #cfd1d4; } + +columnview.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } + +treeexpander { border-spacing: 4px; } + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid rgba(74, 144, 217, 0.5); } + +columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #4a90d9; } + +columnview row:not(:selected) cell editablelabel.editing text selection { color: #ffffff; background-color: #4a90d9; } + +.rich-list > row { padding: 8px 12px; min-height: 32px; } + +.rich-list > row > box { border-spacing: 12px; } + +.app-notification { padding: 10px; border-spacing: 10px; border-radius: 0 0 5px 5px; background-color: rgba(53, 53, 53, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } + +.app-notification border { border: none; } + +expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +expander:disabled { color: #8c8c8d; } + +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +expander-widget > box > title { outline: 0 solid transparent; outline-offset: 4px; } + +expander-widget:focus:focus-visible > box > title { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +expander-widget > box > title { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 0px; } + +expander-widget > box > title:hover > expander { color: #797979; } + +.navigation-sidebar:not(decoration):not(window):drop(active):focus, .navigation-sidebar:not(decoration):not(window):drop(active), placessidebar:not(decoration):not(window):drop(active):focus, placessidebar:not(decoration):not(window):drop(active), stackswitcher:not(decoration):not(window):drop(active):focus, stackswitcher:not(decoration):not(window):drop(active), expander-widget:not(decoration):not(window):drop(active):focus, expander-widget:not(decoration):not(window):drop(active) { box-shadow: none; } + +calendar { color: black; border: 1px solid #c3c6c9; } + +calendar > header { border-bottom: 1px solid #c3c6c9; } + +calendar > header > button { border: none; box-shadow: none; background: none; border-radius: 0; } + +calendar > header > button:backdrop { background: none; } + +calendar > grid > label.today { box-shadow: inset 0px -2px #c3c6c9; } + +calendar > grid > label.today:selected { box-shadow: none; } + +calendar > grid > label:focus { outline-color: rgba(74, 144, 217, 0.5); outline-offset: -2px; outline-width: 2px; outline-style: solid; } + +calendar > grid > label.day-number { padding: 4px; } + +calendar > grid > label.day-number:selected { border-radius: 0px; } + +calendar > grid > label.day-number.other-month { color: alpha(currentColor,0.3); } + +window.dialog.message .titlebar { min-height: 20px; background-image: none; background-color: #ebeced; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } + +window.dialog.message box.dialog-vbox.vertical { border-spacing: 10px; } + +window.dialog.message label.title { font-weight: 800; font-size: 15pt; } + +window.dialog.message.csd.background { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } + +window.dialog.message.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: solid; border-right-style: none; border-bottom-style: none; } + +window.dialog.message.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 0px; } + +window.dialog.message.csd .dialog-action-area button:last-child { border-bottom-right-radius: 0px; } + +filechooser .dialog-action-box { border-top: 1px solid #c3c6c9; } + +filechooser #pathbarbox { border-bottom: 1px solid #ebeced; } + +filechooserbutton > button > box { border-spacing: 6px; } + +filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } + +.sidebar { background-color: #f5f6f6; } + +.sidebar:not(separator):dir(ltr), .sidebar.left:not(separator), .sidebar.left:not(separator):dir(rtl) { border-right: 1px solid #c3c6c9; border-left-style: none; } + +.sidebar:not(separator):dir(rtl), .sidebar.right:not(separator) { border-left: 1px solid #c3c6c9; border-right-style: none; } + +.sidebar listview.view, .sidebar list { background-color: transparent; } + +paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; } + +stacksidebar list.separators:not(.horizontal) > row:not(.separator) { border-bottom: none; } + +stacksidebar row { padding: 10px 4px; } + +stacksidebar row > label { padding-left: 6px; padding-right: 6px; } + +stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } + +stacksidebar row:selected { background-color: #4a90d9; border-radius: 0px; color: #ffffff; } + +stacksidebar row:selected:hover:dir(ltr), stacksidebar row:selected:hover:dir(rtl) { background-color: #4a90d9; } + +stacksidebar row:focus:focus-visible { outline-width: 0; background-color: #4a90d9; color: #ffffff; } + +stacksidebar row.activatable:active, stacksidebar row.activatable:selected:active { box-shadow: none; } + +separator.sidebar { background-color: #c3c6c9; } + +.navigation-sidebar { padding: 0; } + +.navigation-sidebar > separator { margin: 0px; } + +.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 0; margin: 0; } + +.navigation-sidebar > row:hover, .navigation-sidebar > row:backdrop:hover, .navigation-sidebar > row:focus-visible:focus-within { background-color: alpha(currentColor,0.06); } + +.navigation-sidebar > row:selected { background-color: #4a90d9; color: #ffffff; } + +.navigation-sidebar > row:selected:focus-visible:focus-within { outline-width: 0; color: #ffffff; background-color: #4a90d9; } + +.navigation-sidebar > row:selected:focus-visible:focus-within:hover { background-color: #2a76c6; } + +.navigation-sidebar > row:disabled { color: #8c8c8d; } + +row image.sidebar-icon { opacity: 0.7; } + +placessidebar .navigation-sidebar > row { padding: 0; } + +placessidebar .navigation-sidebar > row > revealer { padding: 0 14px; } + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { padding-right: 8px; } + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { padding-left: 8px; } + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { padding-right: 2px; } + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { padding-left: 2px; } + +button.sidebar-button { min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; border-radius: 100%; } + +placessidebar .navigation-sidebar > row:selected:active { box-shadow: none; } + +placessidebar .navigation-sidebar > row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: image(#4a90d9); background-clip: content-box; } + +placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { color: #4a90d9; } + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { color: #4a90d9; box-shadow: inset 0 1px #4a90d9, inset 0 -1px #4a90d9; } + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled):selected { color: #ffffff; background-color: #4a90d9; } + +placesview .server-list-button > image { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-icon-transform: rotate(0turn); } + +placesview .server-list-button:checked > image { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-icon-transform: rotate(-0.5turn); } + +placesview > actionbar > revealer > box > box { border-spacing: 6px; } + +paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#c3c6c9); background-size: 1px 1px; } + +paned > separator:selected { background-image: image(#4a90d9); } + +paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #ebeced; background-image: image(#c3c6c9), image(#c3c6c9); background-size: 1px 1px, 1px 1px; } + +paned.horizontal > separator { background-repeat: repeat-y; } + +paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } + +paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } + +paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } + +paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } + +paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } + +video { background: black; } + +video image.osd { min-width: 64px; min-height: 64px; border-radius: 32px; } + +tooltip { padding: 6px 10px; border-radius: 0px; box-shadow: none; } + +tooltip.background { background-color: rgba(0, 0, 0, 0.8); background-clip: padding-box; border: 1px solid rgba(255, 255, 255, 0.1); color: white; } + +tooltip > box { border-spacing: 6px; } + +colorswatch { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +colorswatch { outline: 0 solid transparent; outline-offset: 6px; } + +colorswatch:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 4px; outline-offset: -2px; } + +colorswatch:drop(active), colorswatch { border-style: none; } + +colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } + +colorswatch.top > overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } + +colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } + +colorswatch.bottom > overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } + +colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } + +colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } + +colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } + +colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + +colorswatch.dark > overlay { color: white; } + +colorswatch.dark.activatable:hover > overlay { border-color: rgba(0, 0, 0, 0.8); } + +colorswatch.light > overlay { color: black; } + +colorswatch.light.activatable:hover > overlay { border-color: rgba(0, 0, 0, 0.5); } + +colorswatch:drop(active) { box-shadow: none; } + +colorswatch.light:drop(active) > overlay { border-color: #4a90d9; box-shadow: inset 0 0 0 2px #2c7ed3, inset 0 0 0 1px #4a90d9; } + +colorswatch.dark:drop(active) > overlay { border-color: #4a90d9; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #4a90d9; } + +colorswatch > overlay { border: 1px solid rgba(0, 0, 0, 0.3); } + +colorswatch.activatable:hover > overlay { box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.2); } + +colorswatch#add-color-button { border-radius: 5px 0 0 5px; } + +colorswatch#add-color-button:only-child { border-radius: 5px; } + +colorswatch#add-color-button > overlay { color: #2c2c2c; outline-color: rgba(74, 144, 217, 0.5); border-color: #a3a7ac; background-color: #fefefe; } + +colorswatch#add-color-button.activatable:hover > overlay { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +colorswatch:disabled { opacity: 0.5; } + +colorswatch:disabled > overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } + +row:selected colorswatch { box-shadow: 0 0 0 2px #ffffff; } + +colorswatch#editor-color-sample { border-radius: 4px; } + +colorswatch#editor-color-sample > overlay { border-radius: 4.5px; } + +plane { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +plane { outline: 0 solid transparent; outline-offset: 6px; } + +plane:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: 2px; } + +colorchooser .popover.osd { border-radius: 5px; } + +.content-view { background-color: #d8dadc; } + +.content-view:hover { -gtk-icon-filter: brightness(1.2); } + +.content-view .tile { margin: 2px; background-color: transparent; border-radius: 0; padding: 0; } + +.content-view .tile:active, .content-view .tile:selected { background-color: transparent; } + +.content-view .tile:disabled { background-color: transparent; } + +.osd .scale-popup button.flat { border-style: none; border-radius: 5px; } + +.scale-popup button:hover { background-color: rgba(44, 44, 44, 0.1); border-radius: 5px; } + +window { border-width: 0px; } + +window.csd { box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 0px; border-radius: 0px 0px 0 0; } + +window.csd:backdrop { box-shadow: 0 1px 4px 1px transparent, 0 1px 2px 1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: none; } + +window.csd.popup { border-radius: 0px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } + +window.csd.dialog.message { border-radius: 0px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } + +window.csd.solid-csd { margin: 0; padding: 0; border: solid 1px #c3c6c9; border-radius: 0; box-shadow: inset 0 0 0 3px #e3e4e6, inset 0 1px rgba(255, 255, 255, 0.04); } + +window.csd.solid-csd:backdrop { box-shadow: inset 0 0 0 3px #ebeced, inset 0 1px rgba(255, 255, 255, 0.04); } + +window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: none; } + +.tiled window { border: 1px solid rgba(0, 0, 0, 0.2); } + +window.popup { box-shadow: none; } + +window.ssd { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } + +tooltip.csd { border-radius: 0px; box-shadow: none; } + +.view:selected:focus, .view:selected, textview > text:selected:focus, textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, popover.menu modelbutton:selected, popover.menu modelbutton:selected:active, row:selected, calendar > grid > label.day-number:selected { background-color: #4a90d9; } + +label:selected, .view:selected:focus, .view:selected, textview > text:selected:focus, textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, popover.menu modelbutton:selected, popover.menu modelbutton:selected:active, row:selected, calendar > grid > label.day-number:selected { color: #ffffff; } + +label:disabled > selection, label:disabled:selected, .view:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text > selection:disabled, iconview:disabled:selected:focus, iconview:disabled:selected, flowbox > flowboxchild:disabled:selected, gridview > child:disabled:selected, entry > text > selection:disabled, modelbutton.flat:disabled:selected, spinbutton:not(.vertical) > text > selection:disabled, spinbutton.vertical > text > text > selection:disabled, spinbutton.vertical > text > selection:disabled, columnview.view:disabled:selected, treeview.view:disabled:selected, popover.menu modelbutton:disabled:selected, popover.menu modelbutton:disabled:selected:active, row:disabled:selected, calendar > grid > label.day-number:disabled:selected { color: #a5c8ec; } + +.monospace { font-family: monospace; } + +cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; } + +shortcuts-section { margin: 20px; } + +.shortcuts-search-results { margin: 20px; border-spacing: 24px; } + +shortcut { border-spacing: 6px; } + +shortcut > .keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: #2c2c2c; background-color: #ffffff; border: 1px solid; border-color: #d7d9db; border-radius: 5px; box-shadow: inset 0 -3px #eff0f1; font-size: smaller; } + +:not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) { border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; caret-color: #4a90d9; } + +stackswitcher > button.text-button { min-width: 100px; } + +stackswitcher.circular { border-spacing: 12px; } + +stackswitcher.circular > button.circular, stackswitcher.circular > button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; } + +.lowres-icon { -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } + +.icon-dropshadow { -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } + +popover.emoji-picker > contents { padding: 0; } + +.emoji-searchbar { padding: 6px; border-spacing: 6px; border-bottom: 1px solid #c3c6c9; } + +.emoji-toolbar { padding: 6px; border-spacing: 6px; border-top: 1px solid #c3c6c9; } + +button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; padding: 3px 0 0; min-width: 32px; min-height: 28px; background: none; box-shadow: none; text-shadow: none; } + +button.emoji-section:hover { border-color: #c3c6c9; } + +button.emoji-section:checked { border-color: #4a90d9; } + +popover.emoji-picker emoji { font-size: x-large; padding: 6px; border-radius: 6px; } + +popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { background: #4a90d9; } + +emoji-completion-row > box { border-spacing: 10px; padding: 2px 10px; } + +emoji-completion-row:focus, emoji-completion-row:hover { background-color: #4a90d9; color: #ffffff; } + +emoji-completion-row emoji:focus, emoji-completion-row emoji:hover { background-color: #dbdddf; } + +popover.entry-completion > contents { padding: 0; } + +statusbar { padding: 6px 10px 6px 10px; } + +/* GTK NAMED COLORS ---------------- use responsibly! */ +/* +widget text/foreground color */ +@define-color theme_fg_color #2c2c2c; +/* +text color for entries, views and content in general */ +@define-color theme_text_color black; +/* +widget base background color */ +@define-color theme_bg_color #ebeced; +/* +text widgets and the like base background color */ +@define-color theme_base_color #ffffff; +/* +base background color of selections */ +@define-color theme_selected_bg_color #4a90d9; +/* +text/foreground color of selections */ +@define-color theme_selected_fg_color #ffffff; +/* +base background color of insensitive widgets */ +@define-color insensitive_bg_color #f3f4f4; +/* +text foreground color of insensitive widgets */ +@define-color insensitive_fg_color #8c8c8d; +/* +insensitive text widgets and the like base background color */ +@define-color insensitive_base_color #ffffff; +/* +widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #8c8c8d; +/* +text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color black; +/* +widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #ebeced; +/* +text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #fcfcfc; +/* +base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #4a90d9; +/* +text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #ffffff; +/* +insensitive color on backdrop windows*/ +@define-color unfocused_insensitive_color #c3c6c9; +/* +widgets main borders color */ +@define-color borders #c3c6c9; +/* +widgets main borders color on backdrop windows */ +@define-color unfocused_borders #cbcdd0; +/* +these are pretty self explicative */ +@define-color warning_color #f57900; +@define-color error_color #cc0000; +@define-color success_color #33d17a; +/* +these colors are exported for the window manager and shouldn't be used in applications, +read if you used those and something break with a version upgrade you're on your own... */ +@define-color wm_title shade(#2c2c2c, 1.8); +@define-color wm_unfocused_title #8c8c8d; +@define-color wm_highlight rgba(255, 255, 255, 0.04); +@define-color wm_borders_edge rgba(255, 255, 255, 0.04); +@define-color wm_bg_a shade(#ebeced, 1.2); +@define-color wm_bg_b #ebeced; +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); +@define-color wm_button_hover_color_a shade(#ebeced, 1.3); +@define-color wm_button_hover_color_b #ebeced; +@define-color wm_button_active_color_a shade(#ebeced, 0.85); +@define-color wm_button_active_color_b shade(#ebeced, 0.89); +@define-color wm_button_active_color_c shade(#ebeced, 0.9); +/* content view background such as thumbnails view in Photos or Boxes */ +@define-color content_view_bg #ffffff; +/* Very contrasty background for text views (@theme_text_color foreground) */ +@define-color text_view_bg #ffffff; +windowcontrols button { min-width: 20px; min-height: 20px; padding: 0; margin: 4px 4px 4px 10px; border-radius: 1.5px; } + +windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; box-shadow: none; transition-property: background-color; } + +windowcontrols button.close > image, windowcontrols button.maximize > image, windowcontrols button.minimize > image { opacity: 0; } + +windowcontrols button.close { background-color: #a45f5f; } + +windowcontrols button.close:hover, windowcontrols button.close:active { background-color: #d35f5f; } + +windowcontrols button.close:backdrop { background-color: rgba(255, 255, 255, 0.2); } + +windowcontrols button.close:backdrop:hover, windowcontrols button.close:backdrop:active { background-color: #d35f5f; } + +windowcontrols button.maximize:hover, windowcontrols button.maximize:active, windowcontrols button.minimize:hover, windowcontrols button.minimize:active { background-color: rgba(255, 255, 255, 0.2); } + +windowcontrols button.close { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.close:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:backdrop:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.close:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:hover:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:hover:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.close:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:active:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:active:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:backdrop:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:hover:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:hover:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:active:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:active:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:backdrop:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:hover:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:hover:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:active:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:active:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:backdrop:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:hover:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:hover:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:active:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:active:backdrop:not(:hover) { opacity: 0.5; } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked) { border-style: solid; border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):active, :not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):checked { color: #eeeeec; border-color: #191c1d; background-image: image(#2a2e30); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):active:hover, :not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):checked:hover { background-image: image(#202425); } + +:not(.nautilus-window) .titlebar .linked > button, :not(.nautilus-window) .titlebar .linked > button:hover, :not(.nautilus-window) .titlebar .linked > button:checked, :not(.nautilus-window) .titlebar .linked > button:focus, :not(.nautilus-window) .titlebar .linked > button.default, :not(.nautilus-window) .titlebar .linked > button.toggle, :not(.nautilus-window) .titlebar .linked > button:active { border-style: solid; } + +.titlebar, headerbar { color: #eeeeec; text-shadow: none; } + +.titlebar:backdrop, headerbar:backdrop { color: #a7aaaa; text-shadow: none; } + +.titlebar .title, headerbar .title { color: #eeeeec; } + +.titlebar .title:backdrop, headerbar .title:backdrop { color: #a7aaaa; } + +.maximized .titlebar, .maximized headerbar, .fullscreen .titlebar, .fullscreen headerbar { box-shadow: none; } + +.titlebar entry, headerbar entry { border-color: #2a2e30; background-color: #838f94; color: #eeeeec; caret-color: #eeeeec; } + +.titlebar button, headerbar button, .titlebar buttonbox.toggle, headerbar buttonbox.toggle { text-shadow: none; color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: #222728; background-color: #525b5f; } + +.titlebar button:backdrop, headerbar button:backdrop, .titlebar buttonbox.toggle:backdrop, headerbar buttonbox.toggle:backdrop { color: #949898; box-shadow: none; text-shadow: none; } + +.titlebar button.flat, headerbar button.flat, .titlebar buttonbox.toggle.flat, headerbar buttonbox.toggle.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +.titlebar button:hover, headerbar button:hover, .titlebar buttonbox.toggle:hover, headerbar buttonbox.toggle:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +.titlebar button:active, headerbar button:active, .titlebar button:checked, headerbar button:checked, .titlebar button:active:hover, headerbar button:active:hover, .titlebar button:checked:hover, headerbar button:checked:hover, .titlebar button.linked:active, headerbar button.linked:active, .titlebar button.linked:checked, headerbar button.linked:checked, .titlebar button.linked:active:hover, headerbar button.linked:active:hover, .titlebar button.linked:checked:hover, headerbar button.linked:checked:hover, .titlebar button.toggle:active, headerbar button.toggle:active, .titlebar button.toggle:checked, headerbar button.toggle:checked, .titlebar button.toggle:active:hover, headerbar button.toggle:active:hover, .titlebar button.toggle:checked:hover, headerbar button.toggle:checked:hover, .titlebar button.popup.toggle:active, headerbar button.popup.toggle:active, .titlebar button.popup.toggle:checked, headerbar button.popup.toggle:checked, .titlebar button.popup.toggle:active:hover, headerbar button.popup.toggle:active:hover, .titlebar button.popup.toggle:checked:hover, headerbar button.popup.toggle:checked:hover, .titlebar button.image-button:active, headerbar button.image-button:active, .titlebar button.image-button:checked, headerbar button.image-button:checked, .titlebar button.image-button:active:hover, headerbar button.image-button:active:hover, .titlebar button.image-button:checked:hover, headerbar button.image-button:checked:hover, .titlebar button.image-button.toggle:active, headerbar button.image-button.toggle:active, .titlebar button.image-button.toggle:checked, headerbar button.image-button.toggle:checked, .titlebar button.image-button.toggle:active:hover, headerbar button.image-button.toggle:active:hover, .titlebar button.image-button.toggle:checked:hover, headerbar button.image-button.toggle:checked:hover, .titlebar button.text-button:active, headerbar button.text-button:active, .titlebar button.text-button:checked, headerbar button.text-button:checked, .titlebar button.text-button:active:hover, headerbar button.text-button:active:hover, .titlebar button.text-button:checked:hover, headerbar button.text-button:checked:hover, .titlebar button.text-button.toggle:active, headerbar button.text-button.toggle:active, .titlebar button.text-button.toggle:checked, headerbar button.text-button.toggle:checked, .titlebar button.text-button.toggle:active:hover, headerbar button.text-button.toggle:active:hover, .titlebar button.text-button.toggle:checked:hover, headerbar button.text-button.toggle:checked:hover, .titlebar box button.toggle:active, headerbar box button.toggle:active, .titlebar box button.toggle:checked, headerbar box button.toggle:checked, .titlebar box button.toggle:active:hover, headerbar box button.toggle:active:hover, .titlebar box button.toggle:checked:hover, headerbar box button.toggle:checked:hover, .titlebar buttonbox.toggle:active, headerbar buttonbox.toggle:active, .titlebar buttonbox.toggle:checked, headerbar buttonbox.toggle:checked, .titlebar buttonbox.toggle:active:hover, headerbar buttonbox.toggle:active:hover, .titlebar buttonbox.toggle:checked:hover, headerbar buttonbox.toggle:checked:hover, .titlebar stackswitcher button:active, headerbar stackswitcher button:active, .titlebar stackswitcher button:checked, headerbar stackswitcher button:checked, .titlebar stackswitcher button:active:hover, headerbar stackswitcher button:active:hover, .titlebar stackswitcher button:checked:hover, headerbar stackswitcher button:checked:hover, .titlebar filechooser .path-bar.linked > button:active, headerbar filechooser .path-bar.linked > button:active, .titlebar filechooser .path-bar.linked > button:checked, headerbar filechooser .path-bar.linked > button:checked, .titlebar filechooser .path-bar.linked > button:active:hover, headerbar filechooser .path-bar.linked > button:active:hover, .titlebar filechooser .path-bar.linked > button:checked:hover, headerbar filechooser .path-bar.linked > button:checked:hover, .titlebar .path-bar button:active, headerbar .path-bar button:active, .titlebar .path-bar button:checked, headerbar .path-bar button:checked, .titlebar .path-bar button:active:hover, headerbar .path-bar button:active:hover, .titlebar .path-bar button:checked:hover, headerbar .path-bar button:checked:hover { color: #eeeeec; border-color: #222728; background-image: image(#33393b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.4); } + +.titlebar button:active:hover, headerbar button:active:hover, .titlebar button:checked:hover, headerbar button:checked:hover, .titlebar button:active:hover:hover, headerbar button:active:hover:hover, .titlebar button:checked:hover:hover, headerbar button:checked:hover:hover, .titlebar button.linked:active:hover, headerbar button.linked:active:hover, .titlebar button.linked:checked:hover, headerbar button.linked:checked:hover, .titlebar button.linked:active:hover:hover, headerbar button.linked:active:hover:hover, .titlebar button.linked:checked:hover:hover, headerbar button.linked:checked:hover:hover, .titlebar button.toggle:active:hover, headerbar button.toggle:active:hover, .titlebar button.toggle:checked:hover, headerbar button.toggle:checked:hover, .titlebar button.toggle:active:hover:hover, headerbar button.toggle:active:hover:hover, .titlebar button.toggle:checked:hover:hover, headerbar button.toggle:checked:hover:hover, .titlebar button.popup.toggle:active:hover, headerbar button.popup.toggle:active:hover, .titlebar button.popup.toggle:checked:hover, headerbar button.popup.toggle:checked:hover, .titlebar button.popup.toggle:active:hover:hover, headerbar button.popup.toggle:active:hover:hover, .titlebar button.popup.toggle:checked:hover:hover, headerbar button.popup.toggle:checked:hover:hover, .titlebar button.image-button:active:hover, headerbar button.image-button:active:hover, .titlebar button.image-button:checked:hover, headerbar button.image-button:checked:hover, .titlebar button.image-button:active:hover:hover, headerbar button.image-button:active:hover:hover, .titlebar button.image-button:checked:hover:hover, headerbar button.image-button:checked:hover:hover, .titlebar button.image-button.toggle:active:hover, headerbar button.image-button.toggle:active:hover, .titlebar button.image-button.toggle:checked:hover, headerbar button.image-button.toggle:checked:hover, .titlebar button.image-button.toggle:active:hover:hover, headerbar button.image-button.toggle:active:hover:hover, .titlebar button.image-button.toggle:checked:hover:hover, headerbar button.image-button.toggle:checked:hover:hover, .titlebar button.text-button:active:hover, headerbar button.text-button:active:hover, .titlebar button.text-button:checked:hover, headerbar button.text-button:checked:hover, .titlebar button.text-button:active:hover:hover, headerbar button.text-button:active:hover:hover, .titlebar button.text-button:checked:hover:hover, headerbar button.text-button:checked:hover:hover, .titlebar button.text-button.toggle:active:hover, headerbar button.text-button.toggle:active:hover, .titlebar button.text-button.toggle:checked:hover, headerbar button.text-button.toggle:checked:hover, .titlebar button.text-button.toggle:active:hover:hover, headerbar button.text-button.toggle:active:hover:hover, .titlebar button.text-button.toggle:checked:hover:hover, headerbar button.text-button.toggle:checked:hover:hover, .titlebar box button.toggle:active:hover, headerbar box button.toggle:active:hover, .titlebar box button.toggle:checked:hover, headerbar box button.toggle:checked:hover, .titlebar box button.toggle:active:hover:hover, headerbar box button.toggle:active:hover:hover, .titlebar box button.toggle:checked:hover:hover, headerbar box button.toggle:checked:hover:hover, .titlebar buttonbox.toggle:active:hover, headerbar buttonbox.toggle:active:hover, .titlebar buttonbox.toggle:checked:hover, headerbar buttonbox.toggle:checked:hover, .titlebar buttonbox.toggle:active:hover:hover, headerbar buttonbox.toggle:active:hover:hover, .titlebar buttonbox.toggle:checked:hover:hover, headerbar buttonbox.toggle:checked:hover:hover, .titlebar stackswitcher button:active:hover, headerbar stackswitcher button:active:hover, .titlebar stackswitcher button:checked:hover, headerbar stackswitcher button:checked:hover, .titlebar stackswitcher button:active:hover:hover, headerbar stackswitcher button:active:hover:hover, .titlebar stackswitcher button:checked:hover:hover, headerbar stackswitcher button:checked:hover:hover, .titlebar filechooser .path-bar.linked > button:active:hover, headerbar filechooser .path-bar.linked > button:active:hover, .titlebar filechooser .path-bar.linked > button:checked:hover, headerbar filechooser .path-bar.linked > button:checked:hover, .titlebar filechooser .path-bar.linked > button:active:hover:hover, headerbar filechooser .path-bar.linked > button:active:hover:hover, .titlebar filechooser .path-bar.linked > button:checked:hover:hover, headerbar filechooser .path-bar.linked > button:checked:hover:hover, .titlebar .path-bar button:active:hover, headerbar .path-bar button:active:hover, .titlebar .path-bar button:checked:hover, headerbar .path-bar button:checked:hover, .titlebar .path-bar button:active:hover:hover, headerbar .path-bar button:active:hover:hover, .titlebar .path-bar button:checked:hover:hover, headerbar .path-bar button:checked:hover:hover { background-image: image(#2a2e30); } + +.titlebar button:disabled, headerbar button:disabled, .titlebar buttonbox.toggle:disabled, headerbar buttonbox.toggle:disabled { color: #858a8b; border-color: #222728; background-image: image(#62696b); } + +.titlebar button:disabled:backdrop, headerbar button:disabled:backdrop, .titlebar buttonbox.toggle:disabled:backdrop, headerbar buttonbox.toggle:disabled:backdrop { color: #7a8081; border-color: #62696b; background-image: image(#62696b); box-shadow: none; } + +.titlebar separator, headerbar separator { background: image(#383e40); } + +.titlebar switch slider, headerbar switch slider { background-color: rgba(255, 255, 255, 0.5); } + +.suggested-action.titlebar, headerbar.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; background-color: #5f9ddd; border-color: #4a90d9; } + +.suggested-action.flat.titlebar, headerbar.suggested-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #4a90d9; } + +.suggested-action.titlebar:hover, headerbar.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #6ca5e0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); border-color: #4a90d9; } + +.suggested-action.titlebar:active, headerbar.suggested-action:active, .suggested-action.titlebar:checked, headerbar.suggested-action:checked { color: white; border-color: #256ab1; background-image: image(#2b7bcf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); border-color: #256ab1; } + +.suggested-action.titlebar:active:hover, headerbar.suggested-action:active:hover, .suggested-action.titlebar:checked:hover, headerbar.suggested-action:checked:hover { background-image: image(#2871be); } + +.suggested-action.titlebar, headerbar.suggested-action { outline-color: #4a90d9; } + +.suggested-action.titlebar:backdrop, headerbar.suggested-action:backdrop { color: #dbe9f7; box-shadow: none; } + +.suggested-action.titlebar:backdrop:active, headerbar.suggested-action:backdrop:active, .suggested-action.titlebar:backdrop:checked, headerbar.suggested-action:backdrop:checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); color: #d9e8f7; } + +.suggested-action.titlebar:backdrop:active:hover, headerbar.suggested-action:backdrop:active:hover, .suggested-action.titlebar:backdrop:checked:hover, headerbar.suggested-action:backdrop:checked:hover { background-image: image(#d0d3d5); } + +.suggested-action.titlebar:backdrop:disabled, headerbar.suggested-action:backdrop:disabled { color: #636566; border-color: #3e4041; background-image: image(#3e4041); box-shadow: none; border-color: #353c3e; } + +.suggested-action.titlebar:backdrop:disabled:active, headerbar.suggested-action:backdrop:disabled:active, .suggested-action.titlebar:backdrop:disabled:checked, headerbar.suggested-action:backdrop:disabled:checked { color: #85b4e6; border-color: #438cd8; background-image: image(#438cd8); box-shadow: none; } + +.suggested-action.flat.titlebar:backdrop, headerbar.suggested-action.flat:backdrop, .suggested-action.flat.titlebar:disabled, headerbar.suggested-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(74, 144, 217, 0.8); } + +.suggested-action.titlebar:disabled, headerbar.suggested-action:disabled { color: #959696; border-color: black; background-image: image(#3b3e3f); border-color: #313638; background-image: image(#41494b); } + +.suggested-action.titlebar:disabled:active, headerbar.suggested-action:disabled:active, .suggested-action.titlebar:disabled:checked, headerbar.suggested-action:disabled:checked { color: #b4d1ef; border-color: #256ab1; background-image: image(#438cd8); box-shadow: none; } + +.osd .suggested-action.titlebar, .osd headerbar.suggested-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.5)); background-clip: padding-box; } + +.osd .suggested-action.titlebar:hover, .osd headerbar.suggested-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.7)); background-clip: padding-box; } + +.osd .suggested-action.titlebar:active, .osd headerbar.suggested-action:active, .osd .suggested-action.titlebar:checked, .osd headerbar.suggested-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#4a90d9); background-clip: padding-box; box-shadow: none; } + +.osd .suggested-action.titlebar:disabled, .osd headerbar.suggested-action:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +.osd .suggested-action.titlebar:backdrop, .osd headerbar.suggested-action:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.5)); background-clip: padding-box; } + +.destructive-action.titlebar, headerbar.destructive-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #9c1319; background-color: #e62f37; border-color: #e01b24; } + +.destructive-action.flat.titlebar, headerbar.destructive-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #e01b24; } + +.destructive-action.titlebar:hover, headerbar.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #e83c44; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); border-color: #e01b24; } + +.destructive-action.titlebar:active, headerbar.destructive-action:active, .destructive-action.titlebar:checked, headerbar.destructive-action:checked { color: white; border-color: #9c1319; background-image: image(#bc171e); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); border-color: #256ab1; } + +.destructive-action.titlebar:active:hover, headerbar.destructive-action:active:hover, .destructive-action.titlebar:checked:hover, headerbar.destructive-action:checked:hover { background-image: image(#a9141b); } + +.destructive-action.titlebar, headerbar.destructive-action { outline-color: #4a90d9; } + +.destructive-action.titlebar:backdrop, headerbar.destructive-action:backdrop { color: #f9d1d3; box-shadow: none; } + +.destructive-action.titlebar:backdrop:active, headerbar.destructive-action:backdrop:active, .destructive-action.titlebar:backdrop:checked, headerbar.destructive-action:backdrop:checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); color: #f8d2d4; } + +.destructive-action.titlebar:backdrop:active:hover, headerbar.destructive-action:backdrop:active:hover, .destructive-action.titlebar:backdrop:checked:hover, headerbar.destructive-action:backdrop:checked:hover { background-image: image(#d0d3d5); } + +.destructive-action.titlebar:backdrop:disabled, headerbar.destructive-action:backdrop:disabled { color: #636566; border-color: #3e4041; background-image: image(#3e4041); box-shadow: none; border-color: #353c3e; } + +.destructive-action.titlebar:backdrop:disabled:active, headerbar.destructive-action:backdrop:disabled:active, .destructive-action.titlebar:backdrop:disabled:checked, headerbar.destructive-action:backdrop:disabled:checked { color: #e86c72; border-color: #dc1d27; background-image: image(#dc1d27); box-shadow: none; } + +.destructive-action.flat.titlebar:backdrop, headerbar.destructive-action.flat:backdrop, .destructive-action.flat.titlebar:disabled, headerbar.destructive-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(224, 27, 36, 0.8); } + +.destructive-action.titlebar:disabled, headerbar.destructive-action:disabled { color: #959696; border-color: black; background-image: image(#3b3e3f); border-color: #313638; background-image: image(#41494b); } + +.destructive-action.titlebar:disabled:active, headerbar.destructive-action:disabled:active, .destructive-action.titlebar:disabled:checked, headerbar.destructive-action:disabled:checked { color: #f1a5a8; border-color: #9c1319; background-image: image(#dc1d27); box-shadow: none; } + +.osd .destructive-action.titlebar, .osd headerbar.destructive-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.5)); background-clip: padding-box; } + +.osd .destructive-action.titlebar:hover, .osd headerbar.destructive-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.7)); background-clip: padding-box; } + +.osd .destructive-action.titlebar:active, .osd headerbar.destructive-action:active, .osd .destructive-action.titlebar:checked, .osd headerbar.destructive-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#e01b24); background-clip: padding-box; box-shadow: none; } + +.osd .destructive-action.titlebar:disabled, .osd headerbar.destructive-action:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +.osd .destructive-action.titlebar:backdrop, .osd headerbar.destructive-action:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.5)); background-clip: padding-box; } + +.ssd .titlebar { background: #3c4446; box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); border-color: transparent; color: #eeeeec; text-shadow: none; border-width: 0; } + +.ssd .titlebar:backdrop { color: #a7aaaa; } + +#MozillaGtkWidget.background menubar, #MozillaGtkWidget.background .menubar, #MozillaGtkWidget.background menubar > menuitem:hover { background-color: #3c4446; color: #eeeeec; } + +window.background.chromium { background-color: #3c4446; color: #eeeeec; } + +window.background.chromium button { border-color: #2c3133; } + +window.background.chromium menubar { color: #eeeeec; } + +window.background.chromium menu, window.background.chromium .menu, window.background.chromium .context-menu { color: #2c2c2c; } + +switch { font-weight: bold; font-size: smaller; margin: 4px 0; padding: 0; border-width: 0; background-color: rgba(0, 0, 0, 0.38); background-clip: padding-box; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } + +switch { outline: 0 solid transparent; outline-offset: 4px; } + +switch:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: 0; } + +headerbar switch { background-color: #b9bcc1; } + +switch:checked { background-color: #4a90d9; } + +switch:disabled { opacity: 0.38; } + +switch > slider { margin: 1px; min-width: 22px; min-height: 18px; border-radius: 0; background-color: white; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } + +switch:hover > slider, switch:focus > slider { background-color: white; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3); } + +switch:checked > slider { background-color: white; } + +switch > image { color: transparent; } + +row:selected switch { outline-color: rgba(255, 255, 255, 0.8); box-shadow: none; border: 1px solid #2a76c6; } + +row:selected switch:backdrop { border-color: #2a76c6; } + +row:selected switch > slider { border-color: #2a76c6; } + +scale.horizontal.marks-before:not(.marks-after) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; min-height: 22px; min-width: 9px; } + +scale.horizontal.marks-before.fine-tune:not(.marks-after) > trough > slider { margin: -8px -4px; } + +scale.horizontal.marks-after:not(.marks-before) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; min-height: 22px; min-width: 9px; } + +scale.horizontal.marks-after.fine-tune:not(.marks-before) > trough > slider { margin: -8px -4px; } + +scale.vertical.marks-before:not(.marks-after) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; margin: -4px -11px; min-height: 9px; min-width: 22px; } + +scale.vertical.marks-before.fine-tune:not(.marks-after) > trough > slider { margin: -8px -4px; margin: -4px -8px; } + +scale.vertical.marks-after:not(.marks-before) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; margin: -4px -11px; min-height: 9px; min-width: 22px; } + +scale.vertical.marks-after.fine-tune:not(.marks-before) > trough > slider { margin: -8px -4px; margin: -4px -8px; } diff --git a/gtk/src/Plano/gtk-4.0/gtk-alt-header.scss b/gtk/src/Plano/gtk-4.0/gtk-alt-header.scss new file mode 100644 index 0000000..3bed26a --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/gtk-alt-header.scss @@ -0,0 +1,9 @@ +// custom theme +$variant: 'light'; +$alt_header: 'true'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'colors-public'; +@import 'custom'; diff --git a/gtk/src/Plano/gtk-4.0/gtk-dark.css b/gtk/src/Plano/gtk-4.0/gtk-dark.css new file mode 100644 index 0000000..43f5d54 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/gtk-dark.css @@ -0,0 +1,1810 @@ +.background { color: #eeeeec; background-color: #33393b; } + +.background:backdrop { text-shadow: none; -gtk-icon-shadow: none; } + +dnd { color: #eeeeec; } + +.normal-icons { -gtk-icon-size: 16px; } + +.large-icons { -gtk-icon-size: 32px; } + +spinner:disabled, arrow:disabled, scrollbar:disabled, check:disabled, radio:disabled, treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); } + +.view, iconview, textview > text { color: white; background-color: #232729; } + +.view:disabled, iconview:disabled, textview > text:disabled { color: #919494; background-color: #2d3234; } + +.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { border-radius: 0px; } + +textview:drop(active) { caret-color: #4a90d9; } + +textview > border { background-color: #2b3032; } + +iconview { outline: 0 solid transparent; outline-offset: 4px; } + +iconview:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +iconview:drop(active) { box-shadow: none; } + +iconview > dndtarget:drop(active) { border-style: solid; border-width: 1px; border-color: #184472; } + +rubberband, .content-view > rubberband, columnview.view > rubberband, treeview.view > rubberband, gridview > rubberband, flowbox > rubberband { border: 1px solid #2a76c6; background-color: rgba(42, 118, 198, 0.2); } + +flowbox > flowboxchild { padding: 3px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +flowbox > flowboxchild { outline: 0 solid transparent; outline-offset: 4px; } + +flowbox > flowboxchild:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +flowbox > flowboxchild:selected { outline-color: rgba(255, 255, 255, 0.3); } + +gridview > child { padding: 3px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +gridview > child { outline: 0 solid transparent; outline-offset: 4px; } + +gridview > child:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +gridview > child:selected { outline-color: rgba(255, 255, 255, 0.3); } + +gridview > child box { border-spacing: 8px; margin: 12px; } + +coverflow cover { color: white; background-color: #232729; border: 1px solid black; } + +label { outline: 0 solid transparent; outline-offset: 4px; } + +label:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +label > selection { background-color: #4a90d9; color: #ffffff; } + +label:disabled { color: #919494; } + +button label:disabled { color: inherit; } + +label.error { color: #cc0000; } + +label.error:disabled { color: rgba(204, 0, 0, 0.5); } + +.dim-label, .titlebar:not(headerbar) .subtitle, headerbar .subtitle, spinbutton.vertical > text > text > placeholder, spinbutton:not(.vertical) > text > placeholder, entry > text > placeholder, label.separator { opacity: 0.55; text-shadow: none; } + +window.assistant .sidebar { padding: 0px; border-top: 1px solid #2a2e30; } + +window.assistant.csd .sidebar { border-top-style: none; } + +window.assistant .sidebar > label { padding: 6px 12px; } + +window.assistant .sidebar > label.highlight { background-color: #4a90d9; color: #ffffff; border-radius: 0; } + +window.aboutdialog image.large-icons { -gtk-icon-size: 128px; } + +.osd .scale-popup, .app-notification, .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents, .osd { color: #eeeeec; border: none; background-color: rgba(38, 38, 38, 0.7); background-clip: padding-box; -gtk-icon-shadow: 0 1px black; } + +@keyframes spin { to { transform: rotate(1turn); } } + +spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } + +spinner:checked { opacity: 1; animation: spin 1s linear infinite; } + +spinner:checked:disabled { opacity: 0.5; } + +.large-title { font-weight: 300; font-size: 24pt; } + +.title-1 { font-weight: 800; font-size: 20pt; } + +.title-2 { font-weight: 800; font-size: 15pt; } + +.title-3 { font-weight: 700; font-size: 15pt; } + +.title-4 { font-weight: 700; font-size: 13pt; } + +.heading { font-weight: 700; font-size: 11pt; } + +.body { font-weight: 400; font-size: 11pt; } + +.caption-heading { font-weight: 700; font-size: 9pt; } + +.caption { font-weight: 400; font-size: 9pt; } + +spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 24px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 0px; border-spacing: 6px; transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: white; border-color: #2a2e30; background-color: #232729; } + +spinbutton.vertical > text, spinbutton:not(.vertical), entry { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text > image.left, spinbutton:not(.vertical) > image.left, entry > image.left { margin-right: 6px; } + +spinbutton.vertical > text > image.right, spinbutton:not(.vertical) > image.right, entry > image.right { margin-left: 6px; } + +spinbutton.vertical > text > text > block-cursor, spinbutton:not(.vertical) > text > block-cursor, entry > text > block-cursor { color: #232729; background-color: white; } + +spinbutton.vertical > text.flat, spinbutton.flat:not(.vertical), entry.flat:focus-within, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; background-color: transparent; border-color: transparent; border-radius: 0; } + +spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:not(.vertical) > placeholder, entry:focus-within > placeholder { opacity: 0; } + +spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled { color: #919494; border-color: #2a2e30; background-color: #2d3234; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #cc0000; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within { outline-color: rgba(204, 0, 0, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #cc0000; } + +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #f57900; } + +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #f57900; } + +spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #c5c6c5; } + +spinbutton.vertical > text > image:hover, spinbutton:not(.vertical) > image:hover, entry > image:hover { color: #eeeeec; } + +spinbutton.vertical > text > image:active, spinbutton:not(.vertical) > image:active, entry > image:active { color: #4a90d9; } + +spinbutton.vertical > text.password image.caps-lock-indicator, spinbutton.password:not(.vertical) image.caps-lock-indicator, entry.password image.caps-lock-indicator { color: #7b7f7f; } + +spinbutton.vertical > text:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active):focus-within, entry:drop(active) { border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } + +.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); background-clip: padding-box; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within { color: white; border-color: #4a90d9; background-color: rgba(0, 0, 0, 0.5); background-clip: padding-box; } + +.osd spinbutton.vertical > text:disabled, .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: rgba(58, 58, 57, 0.5); background-clip: padding-box; } + +spinbutton.vertical > text > progress, spinbutton:not(.vertical) > progress, entry > progress { margin-bottom: 2px; } + +spinbutton.vertical > text progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, entry progress > trough > progress { background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #4a90d9; border-style: solid; box-shadow: none; } + +spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #4a90d9; } + +spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #25292b; } + +spinbutton.vertical.linked > text:disabled + text:disabled, spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #25292b; } + +spinbutton.vertical.linked > text + text:drop(active):not(:only-child), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #4a90d9; } + +spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + menubutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + menubutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + dropdown > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + dropdown > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + colorbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + fontbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #4a90d9; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #cc0000; } + +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #232729; transition-property: color, background; } + +treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #232729; } + +treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #4a90d9; } + +editablelabel > stack > text { color: white; border-color: #2a2e30; background-color: #232729; } + +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #89b7e6 0%, rgba(137, 183, 230, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #89b7e6 95%, rgba(137, 183, 230, 0)); } } + +notebook > header > tabs > arrow, button { min-height: 20px; min-width: 16px; padding: 4px 4px; border: 1px solid; border-radius: 0px; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: #0d0f0f; background-color: #444b4e; } + +notebook > header > tabs > arrow, button { outline: 0 solid transparent; outline-offset: 4px; } + +notebook > header > tabs > arrow:focus:focus-visible, button:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +notebook > header > tabs > arrow:hover, button:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); -gtk-icon-filter: brightness(1.2); } + +notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, button:active, button:checked { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); transition-duration: 50ms; } + +notebook > header > tabs > arrow:active:hover, notebook > header > tabs > arrow:checked:hover, button:active:hover, button:checked:hover { background-image: image(#1b1f20); } + +notebook > header > tabs > arrow:checked:hover, button:checked:hover { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +notebook > header > tabs > arrow:checked:hover:hover, button:checked:hover:hover { background-image: image(#1b1f20); } + +notebook > header > tabs > arrow:checked:active, button:checked:active { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +notebook > header > tabs > arrow:checked:active:hover, button:checked:active:hover { background-image: image(#1b1f20); } + +notebook > header > tabs > arrow:backdrop, button.flat:backdrop, button:backdrop { color: #919494; box-shadow: none; transition: none; -gtk-icon-filter: none; } + +notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.flat:backdrop:active, button.flat:backdrop:checked, button:backdrop:active, button:backdrop:checked { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); color: #919494; } + +notebook > header > tabs > arrow:backdrop:active:hover, notebook > header > tabs > arrow:backdrop:checked:hover, button.flat:backdrop:active:hover, button.flat:backdrop:checked:hover, button:backdrop:active:hover, button:backdrop:checked:hover { background-image: image(#1b1f20); } + +notebook > header > tabs > arrow:backdrop:disabled, button.flat:backdrop:disabled, button:backdrop:disabled { color: #566164; border-color: #2b3132; background-image: image(#2d3234); box-shadow: none; } + +notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.flat:backdrop:disabled:active, button.flat:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: #566164; border-color: #2b3132; background-image: image(#2c3032); box-shadow: none; } + +notebook > header > tabs > arrow:disabled, button:disabled { color: #919494; border-color: #2b3132; background-image: image(#2d3234); } + +notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, button:disabled:active, button:disabled:checked { color: #919494; border-color: #2b3132; background-image: image(#272b2d); box-shadow: none; } + +button.sidebar-button, notebook > header > tabs > arrow, notebook > header > tabs > arrow.flat, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; transition: none; } + +button.sidebar-button:hover, notebook > header > tabs > arrow:hover, button.flat:hover { border-color: transparent; background-image: none; box-shadow: none; background-color: #353c3e; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; } + +button.sidebar-button:active, notebook > header > tabs > arrow:active, button.sidebar-button:checked, notebook > header > tabs > arrow:checked, button.flat:active, button.flat:checked { border-color: transparent; background-image: none; box-shadow: none; background-color: #2c3133; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +button.sidebar-button:backdrop, notebook > header > tabs > arrow:backdrop, button.sidebar-button:disabled, notebook > header > tabs > arrow:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +notebook > header > tabs > arrow.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } + +notebook > header > tabs > arrow.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } + +notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; } + +notebook > header > tabs > arrow.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } + +dropdown:drop(active) button.combo, combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), button:drop(active) { color: #4a90d9; border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } + +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #ffffff; border-color: transparent; } + +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #919494; } + +button.osd { min-width: 26px; min-height: 32px; color: #eeeeec; border-radius: 0px; color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; border: none; box-shadow: none; } + +button.osd.image-button { min-width: 30px; } + +button.osd.image-button:only-child { margin: 4px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } + +button.osd:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(12, 12, 12, 0.7)); background-clip: padding-box; border: none; box-shadow: none; } + +button.osd:active, button.osd:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; border: none; box-shadow: none; } + +.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; } + +.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(12, 12, 12, 0.7)); background-clip: padding-box; } + +.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; } + +.app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; } + +.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(12, 12, 12, 0.7)); background-clip: padding-box; } + +.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; background-image: none; border-color: transparent; box-shadow: none; } + +.app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; } + +button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #256ab1; background-color: #5f9ddd; } + +button.suggested-action { outline: 0 solid transparent; outline-offset: 4px; } + +button.suggested-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.3); outline-width: 2px; outline-offset: -2px; } + +button.suggested-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #4a90d9; } + +button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #85b4e5; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +button.suggested-action:active, button.suggested-action:checked { color: white; border-color: #256ab1; background-image: image(#2b7bcf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +button.suggested-action:active:hover, button.suggested-action:checked:hover { background-image: image(#2871be); } + +button.suggested-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(74, 144, 217, 0.8); } + +button.suggested-action:disabled { color: #919494; border-color: #2b3132; background-image: image(#2d3234); } + +button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #b0c6dd; border-color: #256ab1; background-image: image(#3a71aa); box-shadow: none; } + +.osd button.suggested-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.3); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.5)); background-clip: padding-box; } + +.osd button.suggested-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.7)); background-clip: padding-box; } + +.osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#4a90d9); background-clip: padding-box; box-shadow: none; } + +.osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; } + +button.destructive-action { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #6e0d12; background-color: #c91820; } + +button.destructive-action { outline: 0 solid transparent; outline-offset: 4px; } + +button.destructive-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.3); outline-width: 2px; outline-offset: -2px; } + +button.destructive-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #b2161d; } + +button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #e52a33; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +button.destructive-action:active, button.destructive-action:checked { color: white; border-color: #6e0d12; background-image: image(#8e1117); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +button.destructive-action:active:hover, button.destructive-action:checked:hover { background-image: image(#7c0f14); } + +button.destructive-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(178, 22, 29, 0.8); } + +button.destructive-action:disabled { color: #919494; border-color: #2b3132; background-image: image(#2d3234); } + +button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: #cda1a3; border-color: #6e0d12; background-image: image(#82141a); box-shadow: none; } + +.osd button.destructive-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.3); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(178, 22, 29, 0.5)); background-clip: padding-box; } + +.osd button.destructive-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(178, 22, 29, 0.7)); background-clip: padding-box; } + +.osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#b2161d); background-clip: padding-box; box-shadow: none; } + +.osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; } + +stackswitcher > button > label { padding: 0 6px; margin: 0 -6px; } + +stackswitcher > button > image { padding: 3px 6px; margin: -3px -6px; } + +button.font separator { background-color: transparent; } + +button.font > box { border-spacing: 6px; } + +button.font > box > box > label { font-weight: bold; } + +button.circular { min-width: 32px; min-height: 32px; padding: 0; border-radius: 9999px; } + +button.circular label { padding: 0; } + +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #89b7e6 96%, rgba(137, 183, 230, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 2px; } + +stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } + +stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl) { background-position: left 3px, left 2px; } + +.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(ltr), combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > filechooserbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > filechooserbutton:dir(ltr):not(:first-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(ltr):not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + +.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(rtl), combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > filechooserbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > filechooserbutton:dir(ltr):not(:last-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(ltr):not(:last-child) { border-right-style: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } + +.linked.vertical > filechooserbutton > combobox:not(:first-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:first-child) > box > button.combo, .linked.vertical > combobox:not(:first-child) > box > button.combo, .linked.vertical > menubutton:not(:first-child) > button, .linked.vertical > dropdown:not(:first-child) > button, .linked.vertical > colorbutton:not(:first-child) > button, .linked.vertical > fontbutton:not(:first-child) > button, .linked.vertical > filechooserbutton:not(:first-child) > button, spinbutton.vertical.linked > text:not(:first-child), .linked.vertical > spinbutton:not(:first-child):not(.vertical), .linked.vertical > entry:not(:first-child), .linked.vertical > button:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; } + +.linked.vertical > filechooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > combobox:not(:last-child) > box > button.combo, .linked.vertical > menubutton:not(:last-child) > button, .linked.vertical > dropdown:not(:last-child) > button, .linked.vertical > colorbutton:not(:last-child) > button, .linked.vertical > fontbutton:not(:last-child) > button, .linked.vertical > filechooserbutton:not(:last-child) > button, spinbutton.vertical.linked > text:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical), .linked.vertical > entry:not(:last-child), .linked.vertical > button:not(:last-child) { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + +.scale-popup button:hover, button.link, button.link:hover, button.link:active, button.link:checked, popover.menu box.circular-buttons button.circular.image-button.model, list > row button.image-button:not(.flat), .toolbar button, modelbutton.flat { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } + +modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 0px; } + +modelbutton.flat:hover { background-color: #4a90d9; color: #ffffff; } + +modelbutton.flat:disabled { color: #919494; } + +modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; opacity: 0.3; } + +modelbutton.flat arrow:hover { background: none; } + +modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } + +modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } + +.toolbar button { margin: 1px; } + +.toolbar button:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +.toolbar button:active { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +.toolbar button:active:hover { background-image: image(#1b1f20); } + +.toolbar button:disabled { color: #919494; border-color: #2b3132; background-image: image(#2d3234); } + +.toolbar button:backdrop { color: #919494; box-shadow: none; } + +.toolbar button:backdrop:disabled { color: #566164; border-color: #2b3132; background-image: image(#2d3234); box-shadow: none; } + +button.color { padding: 4px; } + +button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay { border-radius: 0; } + +popover.menu box.circular-buttons button.circular.image-button.model, list > row button.image-button:not(.flat) { border: 1px solid rgba(42, 46, 48, 0.5); } + +popover.menu box.circular-buttons button.circular.image-button.model:hover, list > row button.image-button:not(.flat):hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.circular-buttons button.circular.image-button.model:checked, list > row button.image-button:not(.flat):active, list > row button.image-button:not(.flat):checked { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +popover.menu box.circular-buttons button.circular.image-button.model:active:hover, popover.menu box.circular-buttons button.circular.image-button.model:checked:hover, list > row button.image-button:not(.flat):active:hover, list > row button.image-button:not(.flat):checked:hover { background-image: image(#1b1f20); } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button.suggested-action:not(.flat) { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #256ab1; background-color: #5f9ddd; } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button.suggested-action:not(.flat) { outline: 0 solid transparent; outline-offset: 4px; } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model:focus:focus-visible, list > row button.image-button.suggested-action:not(.flat):focus:focus-visible { outline-color: rgba(255, 255, 255, 0.3); outline-width: 2px; outline-offset: -2px; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button.destructive-action:not(.flat) { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #6e0d12; background-color: #c91820; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button.destructive-action:not(.flat) { outline: 0 solid transparent; outline-offset: 4px; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model:focus:focus-visible, list > row button.image-button.destructive-action:not(.flat):focus:focus-visible { outline-color: rgba(255, 255, 255, 0.3); outline-width: 2px; outline-offset: -2px; } + +button.link, link { color: #9ec4eb; text-decoration: underline; } + +button.link:visited, link:visited { color: #74aae2; } + +*:selected button.link:visited, *:selected link:visited { color: #c7ddf3; } + +button.link:hover, link:hover { color: #c8def4; } + +*:selected button.link:hover, *:selected link:hover { color: #fafcfe; } + +button.link:active, link:active { color: #9ec4eb; } + +*:selected button.link:active, *:selected link:active { color: #ecf3fb; } + +button.link:disabled, link:disabled { color: rgba(197, 197, 197, 0.8); } + +button.link:selected, *:selected button.link, link:selected, *:selected link { color: #ecf3fb; } + +link { outline: 0 solid transparent; outline-offset: 4px; } + +link:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +button.link, button.link:hover, button.link:active, button.link:checked { text-shadow: none; } + +button.link > label { text-decoration: underline; } + +spinbutton { font-feature-settings: "tnum"; } + +spinbutton:not(.vertical) { padding: 0; border-spacing: 0; } + +.osd spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 6px; } + +.osd spinbutton:not(.vertical) > text:backdrop:disabled, spinbutton:not(.vertical) > text:backdrop:disabled { background-color: transparent; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat), spinbutton:not(.vertical) > button.image-button.down:not(.flat) { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #dadad9; background-image: none; border-style: none none none solid; border-color: rgba(42, 46, 48, 0.3); border-radius: 0; box-shadow: none; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { color: #eeeeec; background-color: #272c2d; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { color: rgba(145, 148, 148, 0.3); background-color: transparent; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):active, spinbutton:not(.vertical) > button.image-button.down:not(.flat):active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 0px 0px 0; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 0px 0 0 0px; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #eeeeec; border-style: none none none solid; border-color: rgba(0, 0, 0, 0.4); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #eeeeec; border-color: rgba(0, 0, 0, 0.5); background-color: rgba(12, 12, 12, 0.7); -gtk-icon-shadow: 0 1px black; box-shadow: none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #8a8a89; border-color: rgba(0, 0, 0, 0.5); -gtk-icon-shadow: none; box-shadow: none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 0px 0px 0; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 0px 0 0 0px; } + +spinbutton.vertical:disabled { color: #919494; } + +spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } + +spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } + +spinbutton.vertical > text > block-cursor { color: #232729; background-color: white; } + +spinbutton.vertical > button { min-height: 32px; min-width: 32px; padding: 0; } + +spinbutton.vertical > button.up { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + +spinbutton.vertical > button.down { border-top-style: none; border-top-left-radius: 0; border-top-right-radius: 0; } + +.osd spinbutton.vertical > button:first-child { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; } + +.osd spinbutton.vertical > button:first-child:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(12, 12, 12, 0.7)); background-clip: padding-box; } + +.osd spinbutton.vertical > button:first-child:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; } + +.osd spinbutton.vertical > button:first-child:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; } + +treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } + +treeview spinbutton:not(.vertical) > text { min-height: 0; padding: 1px 2px; } + +dropdown > popover.menu.background > contents { padding: 0; } + +dropdown > button > box { border-spacing: 6px; } + +dropdown arrow, combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } + +dropdown > popover.menu > contents modelbutton, combobox > popover.menu > contents modelbutton { padding-left: 9px; padding-right: 9px; } + +dropdown:drop(active), combobox:drop(active) { box-shadow: none; } + +dropdown popover, combobox popover { margin-top: 6px; padding: 0; } + +dropdown popover listview, combobox popover listview { margin: 8px 0; } + +dropdown popover listview > row, combobox popover listview > row { padding: 8px; } + +dropdown popover listview > row:selected, combobox popover listview > row:selected { outline-color: rgba(255, 255, 255, 0.3); color: white; background-color: #202425; } + +dropdown popover .dropdown-searchbar, combobox popover .dropdown-searchbar { padding: 6px; border-bottom: 1px solid #2a2e30; } + +searchbar > revealer > box, .toolbar, toolbar { padding: 4px 3px 3px 4px; border-spacing: 4px; background-color: #33393b; } + +.osd .toolbar, .osd toolbar { background-color: transparent; } + +.toolbar.osd, toolbar.osd { padding: 13px; border: none; border-radius: 0px; background-color: rgba(38, 38, 38, 0.7); } + +.toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } + +.toolbar.horizontal > separator, toolbar.horizontal > separator { margin: 4px 0; } + +.toolbar.vertical > separator, toolbar.vertical > separator { margin: 0 4px; } + +searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; } + +searchbar > revealer > box { border-style: solid; border-color: #2a2e30; background-color: #303638; } + +searchbar > revealer > box:backdrop { border-color: #2b3132; background-color: #303638; box-shadow: none; transition: none; } + +infobar > revealer > box { padding: 8px; border-spacing: 12px; } + +infobar.action:hover > revealer > box { background-color: #020202; } + +infobar.info > revealer > box, infobar.question > revealer > box, infobar.warning > revealer > box, infobar.error > revealer > box { border-bottom: 1px solid #353c3e; background-color: #080808; } + +infobar .close, searchbar .close { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; min-width: 16px; min-height: 16px; padding: 4px; border-radius: 50%; } + +infobar .close:hover, searchbar .close:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +windowcontrols { border-spacing: 0px; } + +.titlebar:not(headerbar), headerbar { padding: 0 4px; min-height: 38px; border-width: 0; border-style: solid; border-color: #2a2e30; border-radius: 0; background: #3c4446; box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); } + +.titlebar:backdrop:not(headerbar), headerbar:backdrop { background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); } + +.titlebar:not(headerbar) .title, headerbar .title { padding-left: 12px; padding-right: 12px; font-weight: bold; } + +.titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } + +.tiled .titlebar:not(headerbar), .tiled-top .titlebar:not(headerbar), .tiled-left .titlebar:not(headerbar), .tiled-right .titlebar:not(headerbar), .tiled-bottom .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar, .tiled-top headerbar, .tiled-left headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; box-shadow: none; } + +.default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 0 4px; } + +.maximized .default-decoration.titlebar:not(headerbar), .maximized headerbar.default-decoration { box-shadow: none; } + +.default-decoration.titlebar:not(headerbar) windowcontrols button, headerbar.default-decoration windowcontrols button { min-height: 20px; min-width: 20px; } + +.default-decoration.titlebar:not(headerbar) windowcontrols menubutton, headerbar.default-decoration windowcontrols menubutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } + +.default-decoration.titlebar:not(headerbar) windowcontrols menubutton button, headerbar.default-decoration windowcontrols menubutton button { min-height: 20px; min-width: 20px; margin: 0; padding: 4px; } + +.titlebar:not(headerbar) separator, headerbar separator, headerbar separator:backdrop { background: #3c4446; box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); } + +.solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; } + +headerbar > windowhandle > box, headerbar > windowhandle > box > box.start, headerbar > windowhandle > box > box.end { border-spacing: 6px; } + +headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button, headerbar menubutton { margin-top: 4px; margin-bottom: 4px; } + +headerbar menubutton > button { margin-top: 0px; margin-bottom: 0px; } + +headerbar switch { margin-top: 8px; margin-bottom: 8px; } + +headerbar.titlebar headerbar:not(.titlebar) { background: none; box-shadow: none; } + +window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } + +.titlebar:not(headerbar) separator { background-color: #2a2e30; } + +window.devel headerbar.titlebar { background: #33393b cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(74, 144, 217, 0.1)), linear-gradient(to top, #222728 3px, #272c2d); } + +window.devel headerbar.titlebar:backdrop { background: #33393b cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#33393b); } + +pathbar > button.text-button, pathbar > button.image-button, pathbar > button { padding-left: 4px; padding-right: 4px; } + +pathbar > button.text-button.image-button label { padding-left: 0; padding-right: 0; } + +pathbar > button.text-button.image-button label:last-child, pathbar > button label:last-child { padding-right: 8px; } + +pathbar > button.text-button.image-button label:first-child, pathbar > button label:first-child { padding-left: 8px; } + +pathbar > button image { padding-left: 4px; padding-right: 4px; } + +pathbar > button.slider-button { padding-left: 0; padding-right: 0; } + +columnview.view, treeview.view { border-left-color: #4c4f50; border-top-color: #4c4f50; } + +columnview.view, treeview.view { outline: 0 solid transparent; outline-offset: 4px; } + +columnview.view:focus:focus-visible, treeview.view:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { border-radius: 0; outline-color: rgba(255, 255, 255, 0.3); } + +columnview.view:disabled, treeview.view:disabled { color: #919494; } + +columnview.view:disabled:selected, treeview.view:disabled:selected { color: #92bce8; } + +columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #73a4d8; } + +columnview.view.separator, treeview.view.separator { min-height: 2px; color: #4c4f50; } + +columnview.view:backdrop, treeview.view:backdrop { border-left-color: #393d3e; border-top: #393d3e; } + +columnview.view:drop(active), treeview.view:drop(active) { box-shadow: none; } + +columnview.view > dndtarget:drop(active), treeview.view > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #184472; } + +columnview.view > dndtarget.after:drop(active), treeview.view > dndtarget.after:drop(active) { border-top-style: none; } + +columnview.view > dndtarget.before:drop(active), treeview.view > dndtarget.before:drop(active) { border-bottom-style: none; } + +columnview.view.expander, treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #bdbebf; } + +columnview.view.expander:dir(rtl), treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +columnview.view.expander:hover, treeview.view.expander:hover { color: white; } + +columnview.view.expander:selected, treeview.view.expander:selected { color: #c9def4; } + +columnview.view.expander:selected:hover, treeview.view.expander:selected:hover { color: #ffffff; } + +columnview.view.expander:checked, treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +columnview.view.progressbar, treeview.view.progressbar { background-color: #4a90d9; background-image: image(#4a90d9); box-shadow: none; } + +columnview.view.progressbar:selected:focus, columnview.view.progressbar:selected, treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); background-image: image(#232729); } + +columnview.view.progressbar:selected:focus:backdrop, columnview.view.progressbar:selected:backdrop, treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { background-color: #252a2c; } + +columnview.view.trough, treeview.view.trough { background-color: rgba(238, 238, 236, 0.1); } + +columnview.view.trough:selected:focus, columnview.view.trough:selected, treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: #2a76c6; } + +columnview.view > header > button, treeview.view > header > button { color: #898b8b; background-color: #232729; font-weight: bold; text-shadow: none; box-shadow: none; } + +columnview.view > header > button:hover, treeview.view > header > button:hover { color: #bcbdbc; box-shadow: none; transition: none; } + +columnview.view > header > button:active, treeview.view > header > button:active { color: #eeeeec; transition: none; } + +columnview.view button.dnd:active, columnview.view button.dnd:selected, columnview.view button.dnd:hover, columnview.view button.dnd, columnview.view header.button.dnd:active, columnview.view header.button.dnd:selected, columnview.view header.button.dnd:hover, columnview.view header.button.dnd, treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; color: #232729; background-image: none; background-color: #4a90d9; border-style: none; border-radius: 0; box-shadow: inset 0 0 0 1px #232729; text-shadow: none; transition: none; } + +columnview.view acceleditor > label, treeview.view acceleditor > label { background-color: #4a90d9; } + +columnview.view > header > button, treeview.view > header > button, columnview.view > header > button:hover, treeview.view > header > button:hover, columnview.view > header > button:active, treeview.view > header > button:active { padding: 0 6px; background-image: none; border-style: none none solid solid; border-color: #4c4f50; border-radius: 0; text-shadow: none; } + +columnview.view > header > button:disabled, treeview.view > header > button:disabled { border-color: #33393b; background-image: none; } + +columnview.view > header > button:last-child, treeview.view > header > button:last-child { border-right-style: none; } + +popover.background { background-color: transparent; font: initial; } + +popover.background > arrow, popover.background > contents { background-color: #262b2d; background-clip: padding-box; border: 1px solid rgba(42, 46, 48, 0.9); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + +popover.background:backdrop { background-color: transparent; } + +popover.background > contents { padding: 8px; border-radius: 0px; } + +popover.background > contents > list, popover.background > contents > .view, popover.background > contents > iconview, popover.background > contents > toolbar { border-style: none; background-color: transparent; } + +popover.background > contents separator { background-color: #2c3233; margin: 3px; } + +popover.background > contents list separator { margin: 0; } + +.osd popover.background, popover.background.touch-selection, popover.background.magnifier { background-color: transparent; } + +.osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } + +magnifier { background-color: #232729; } + +popover.menu { padding: 0; } + +popover.menu box.inline-buttons { padding: 0 8px; } + +popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; } + +popover.menu box.inline-buttons button.image-button.model:selected { background: image(#202425); } + +popover.menu box.circular-buttons { padding: 8px 8px 4px; } + +popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; } + +popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #202425; border-color: #202425; } + +popover.menu > arrow, popover.menu.background > contents { background-color: #262b2d; padding: 0px; } + +popover.menu.background separator { margin: 6px 0; } + +popover.menu accelerator { color: alpha(currentColor,0.55); } + +popover.menu accelerator:dir(ltr) { margin-left: 8px; } + +popover.menu accelerator:dir(rtl) { margin-right: 8px; } + +popover.menu check, popover.menu radio { transform: scale(0.8); border-width: 1.2px; border-color: transparent; box-shadow: none; background-image: image(transparent); color: white; } + +popover.menu check:hover, popover.menu radio:hover { transform: scale(0.8); border-width: 1.2px; color: #ffffff; box-shadow: none; background-image: image(transparent); } + +popover.menu check:active, popover.menu radio:active { transform: scale(0.8); border-width: 1.2px; color: white; box-shadow: none; background-image: image(transparent); } + +popover.menu radio:active { border-color: rgba(42, 46, 48, 0.5); } + +popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: -2px; margin-right: 6px; } + +popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; } + +popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 8px; border-radius: 0; } + +popover.menu modelbutton:selected { color: #ffffff; } + +popover.menu modelbutton:selected:active { color: #ffffff; } + +popover.menu label.title { font-weight: bold; padding: 4px 28px; } + +menubar { padding: 0px; } + +menubar > item { min-height: 16px; padding: 2px 8px; } + +menubar > item:selected { background-color: #4a90d9; color: #ffffff; border-radius: 0; } + +menubar > item:disabled { color: #919494; box-shadow: none; } + +menubar > item popover.menu.background > contents { padding: 0; } + +menubar > item popover.menu popover.menu { padding: 0 0 4px 0; } + +menubar > item popover.menu.background popover.menu.background > contents { margin: 0; border-radius: 0; } + +notebook > header > tabs > tab:checked { outline: 0 solid transparent; outline-offset: 4px; } + +notebook:focus:focus-visible > header > tabs > tab:checked { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +notebook > header { padding: 0; border-width: 0; background-color: #1a1d1e; } + +notebook > header > tabs { margin: 0; } + +notebook > header.top { border-bottom-style: solid; } + +notebook > header.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -3px #1e2122; } + +notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -3px #4a90d9; } + +notebook > header.bottom { border-top-style: solid; } + +notebook > header.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 3px #1e2122; } + +notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 3px #4a90d9; } + +notebook > header.left { border-right-style: solid; } + +notebook > header.left > tabs > tab:hover:not(:checked) { box-shadow: inset -3px 0 #1e2122; } + +notebook > header.left > tabs > tab:checked { box-shadow: inset -3px 0 #4a90d9; } + +notebook > header.right { border-left-style: solid; } + +notebook > header.right > tabs > tab:hover:not(:checked) { box-shadow: inset 3px 0 #1e2122; } + +notebook > header.right > tabs > tab:checked { box-shadow: inset 3px 0 #4a90d9; } + +notebook > header.top > tabs > arrow { border-top-style: none; } + +notebook > header.bottom > tabs > arrow { border-bottom-style: none; } + +notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } + +notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + +notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +notebook > header.left > tabs > arrow { border-left-style: none; } + +notebook > header.right > tabs > arrow { border-right-style: none; } + +notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } + +notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + +notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; } + +notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } + +notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +notebook > header > tabs > tab { min-height: 24px; min-width: 24px; padding: 0px 10px; color: #eeeeec; font-weight: normal; border-width: 1px; border-color: transparent; } + +notebook > header > tabs > tab:hover { color: #c0c1c0; background-color: alpha(currentColor,0.06); } + +notebook > header > tabs > tab:not(:checked) { outline-color: transparent; } + +notebook > header > tabs > tab:checked { color: #eeeeec; } + +notebook > header > tabs > tab.reorderable-page:checked { border-color: rgba(42, 46, 48, 0.5); background-color: rgba(51, 57, 59, 0.5); } + +notebook > header > tabs > tab.reorderable-page:checked:hover { background-color: rgba(51, 57, 59, 0.7); } + +notebook > header > tabs > tab button.flat { color: alpha(currentColor,0.3); padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } + +notebook > header > tabs > tab button.flat:hover { color: currentColor; } + +notebook > header > tabs > tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } + +notebook > header > tabs > tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } + +notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 0px; padding-right: 0px; } + +notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 3px; margin-right: 3px; } + +notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: -1px; } + +notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { margin-right: -1px; } + +notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 0px; margin-right: 0px; } + +notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab.reorderable-page { border-style: none solid; } + +notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 0px; padding-bottom: 0px; } + +notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } + +notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: -1px; } + +notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { margin-bottom: -1px; } + +notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 4px; margin-bottom: 4px; } + +notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab.reorderable-page { border-style: solid none; } + +notebook > header.top > tabs > tab { padding-bottom: 4px; } + +notebook > header.bottom > tabs > tab { padding-top: 4px; } + +notebook > stack:not(:only-child) { background-color: #232729; } + +scrollbar { background-color: #2b3032; transition: 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +scrollbar.top { border-bottom: 1px solid #2a2e30; } + +scrollbar.bottom { border-top: 1px solid #2a2e30; } + +scrollbar.left { border-right: 1px solid #2a2e30; } + +scrollbar.right { border-left: 1px solid #2a2e30; } + +scrollbar > range > trough > slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 0; background-clip: padding-box; background-color: #a3a6a5; transition: background-color 250ms; } + +scrollbar > range > trough > slider:hover { background-color: #c9cac9; } + +scrollbar > range > trough > slider:hover:active { background-color: #74aae2; } + +scrollbar > range > trough > slider:disabled { background-color: transparent; } + +scrollbar > range.fine-tune > trough > slider { min-width: 6px; min-height: 6px; } + +scrollbar > range.fine-tune.horizontal > trough > slider { border-width: 5px 4px; } + +scrollbar > range.fine-tune.vertical > trough > slider { border-width: 4px 5px; } + +scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } + +scrollbar.overlay-indicator:not(.dragging):not(.hovering) > range > trough > slider { margin: 0; min-width: 4px; min-height: 4px; background-color: #eeeeec; border: 1px solid black; } + +scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) > range > trough > slider { margin: 0 2px; min-width: 40px; } + +scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) > range > trough > slider { margin: 2px 0; min-height: 40px; } + +scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } + +scrollbar.horizontal > range > trough > slider { min-width: 40px; } + +scrollbar.vertical > range > trough > slider { min-height: 40px; } + +treeview ~ scrollbar.vertical { border-top: 1px solid #2a2e30; margin-top: -1px; } + +.view.content-view.check:not(list), iconview.content-view.check:not(list), .content-view .tile check:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:hover:not(list), iconview.content-view.check:hover:not(list), .content-view .tile check:hover:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list), .content-view .tile check:active:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:backdrop:not(list), iconview.content-view.check:backdrop:not(list), .content-view .tile check:backdrop:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #929292; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list), .content-view .tile check:checked:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:checked:hover:not(list), iconview.content-view.check:checked:hover:not(list), .content-view .tile check:checked:hover:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list), .content-view .tile check:checked:active:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:backdrop:checked:not(list), iconview.content-view.check:backdrop:checked:not(list), .content-view .tile check:backdrop:checked:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: rgba(238, 238, 236, 0.8); background-color: #929292; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +checkbutton { border-spacing: 4px; border-radius: 0px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +checkbutton { outline: 0 solid transparent; outline-offset: 4px; } + +checkbutton:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +checkbutton.text-button { padding: 4px; } + +check, radio { min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } + +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, #33393b, #33393b); border-color: #202425; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:hover, radio:hover { background-image: linear-gradient(to bottom, #41494b, #41494b); } + +check:active, radio:active { box-shadow: inset 0 1px 1px 0px black; background-image: image(#272c2d); } + +check:disabled, radio:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +check:checked, radio:checked { background-clip: border-box; background-image: linear-gradient(to bottom, #4a90d9, #4a90d9); border-color: #215d9c; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:checked:hover, radio:checked:hover { background-image: linear-gradient(to bottom, #63a0de, #63a0de); } + +check:checked:active, radio:checked:active { box-shadow: inset 0 1px 1px 0px black; background-image: image(#3583d5); } + +check:checked:disabled, radio:checked:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +check:indeterminate, radio:indeterminate { background-clip: border-box; background-image: linear-gradient(to bottom, #4a90d9, #4a90d9); border-color: #215d9c; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:indeterminate:hover, radio:indeterminate:hover { background-image: linear-gradient(to bottom, #63a0de, #63a0de); } + +check:indeterminate:active, radio:indeterminate:active { box-shadow: inset 0 1px 1px 0px black; background-image: image(#3583d5); } + +check:indeterminate:disabled, radio:indeterminate:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +.osd check, .osd radio { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; } + +.osd check:hover, .osd radio:hover { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; } + +.osd check:active, .osd radio:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; } + +.osd check:disabled, .osd radio:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; } + +check { border-radius: 0px; -gtk-icon-size: 14px; } + +check:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } + +check:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } + +treeview.view radio:selected:focus, treeview.view radio:selected, radio { border-radius: 100%; -gtk-icon-size: 14px; } + +treeview.view radio:checked:selected, radio:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")), -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); } + +treeview.view radio:indeterminate:selected, radio:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } + +treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; } + +progressbar > trough, scale > trough > fill, scale > trough { border: 1px solid #1a1d1e; border-radius: 0px; background-color: #1a1d1e; } + +headerbar progressbar > trough, headerbar scale > trough > fill, headerbar scale > trough { background-color: #070808; } + +progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #2d3234; border-color: #2b3132; } + +row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.3); border-color: #184472; } + +.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); } + +.osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(58, 58, 57, 0.5); } + +progressbar > trough > progress, scale > trough > highlight { border: 1px solid #4a90d9; border-radius: 0px; background-color: #4a90d9; } + +progressbar > trough > progress:disabled, scale > trough > highlight:disabled { background-color: transparent; border-color: transparent; } + +row:selected progressbar > trough > progress, row:selected scale > trough > highlight { border-color: #184472; } + +.osd progressbar > trough > progress, .osd scale > trough > highlight { border-color: rgba(0, 0, 0, 0.7); } + +.osd progressbar > trough > progress:disabled, .osd scale > trough > highlight:disabled { border-color: transparent; } + +scale { min-height: 10px; min-width: 10px; padding: 12px; } + +scale > trough { outline: 0 solid transparent; outline-offset: 16px; } + +scale:focus:focus-visible > trough { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: 10px; } + +scale > trough { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +scale > trough > fill, scale > trough > highlight { margin: -1px; } + +scale > trough > slider { min-height: 18px; min-width: 18px; margin: -9px; } + +scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } + +scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } + +scale.fine-tune > trough > slider { margin: -6px; } + +scale.fine-tune > trough > fill, scale.fine-tune > trough > highlight, scale.fine-tune > trough { border-radius: 5px; } + +scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } + +.osd scale > trough > fill { background-color: rgba(91, 91, 90, 0.775); } + +.osd scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } + +scale > trough > slider { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: #0d0f0f; background-color: #444b4e; border-width: 1px; border-style: solid; border-radius: 100%; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } + +scale > trough > slider:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +scale > trough > slider:active { border-color: #184472; } + +scale > trough > slider:disabled { color: #919494; border-color: #2b3132; background-image: image(#2d3234); } + +row:selected scale > trough > slider:disabled, row:selected scale > trough > slider { border-color: #184472; } + +.osd scale > trough > slider { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(38, 38, 38, 0.7)); background-clip: padding-box; border-color: rgba(0, 0, 0, 0.7); background-color: #262626; } + +.osd scale > trough > slider:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(12, 12, 12, 0.7)); background-clip: padding-box; background-color: #262626; } + +.osd scale > trough > slider:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(0, 0, 0, 0.7)); background-clip: padding-box; box-shadow: none; background-color: #262626; } + +.osd scale > trough > slider:disabled { color: #8a8a89; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(58, 58, 57, 0.5)); background-clip: padding-box; background-color: #262626; } + +scale > value { color: alpha(currentColor,0.55); font-feature-settings: "tnum"; } + +scale.horizontal > marks { color: alpha(currentColor,0.55); } + +scale.horizontal > marks.top { margin-bottom: 6px; } + +scale.horizontal > marks.bottom { margin-top: 6px; } + +scale.horizontal > marks indicator { background-color: currentColor; min-height: 6px; min-width: 1px; } + +scale.horizontal > value.left { margin-right: 9px; } + +scale.horizontal > value.right { margin-left: 9px; } + +scale.horizontal.fine-tune > marks.top { margin-top: 3px; } + +scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; } + +scale.horizontal.fine-tune > marks indicator { min-height: 3px; } + +scale.vertical > marks { color: alpha(currentColor,0.55); } + +scale.vertical > marks.top { margin-right: 6px; } + +scale.vertical > marks.bottom { margin-left: 6px; } + +scale.vertical > marks indicator { background-color: currentColor; min-height: 1px; min-width: 6px; } + +scale.vertical > value.top { margin-bottom: 9px; } + +scale.vertical > value.bottom { margin-top: 9px; } + +scale.vertical.fine-tune > marks.top { margin-left: 3px; } + +scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } + +scale.vertical.fine-tune > marks indicator { min-height: 3px; } + +scale.color { min-height: 0; min-width: 0; } + +scale.color > trough { background-image: image(#2a2e30); background-repeat: no-repeat; } + +scale.color.horizontal { padding: 0 0 15px 0; } + +scale.color.horizontal > trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } + +scale.color.horizontal > trough > slider:dir(ltr):hover, scale.color.horizontal > trough > slider:dir(ltr):backdrop, scale.color.horizontal > trough > slider:dir(ltr):disabled, scale.color.horizontal > trough > slider:dir(ltr):backdrop:disabled, scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl):hover, scale.color.horizontal > trough > slider:dir(rtl):backdrop, scale.color.horizontal > trough > slider:dir(rtl):disabled, scale.color.horizontal > trough > slider:dir(rtl):backdrop:disabled, scale.color.horizontal > trough > slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } + +scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } + +scale.color.vertical:dir(ltr) > trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } + +scale.color.vertical:dir(ltr) > trough > slider:hover, scale.color.vertical:dir(ltr) > trough > slider:backdrop, scale.color.vertical:dir(ltr) > trough > slider:disabled, scale.color.vertical:dir(ltr) > trough > slider:backdrop:disabled, scale.color.vertical:dir(ltr) > trough > slider { margin-left: -15px; margin-right: 6px; } + +scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } + +scale.color.vertical:dir(rtl) > trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } + +scale.color.vertical:dir(rtl) > trough > slider:hover, scale.color.vertical:dir(rtl) > trough > slider:backdrop, scale.color.vertical:dir(rtl) > trough > slider:disabled, scale.color.vertical:dir(rtl) > trough > slider:backdrop:disabled, scale.color.vertical:dir(rtl) > trough > slider { margin-right: -15px; margin-left: 6px; } + +scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } + +scale.color.fine-tune.horizontal:dir(ltr) > trough, scale.color.fine-tune.horizontal:dir(rtl) > trough { padding-bottom: 7px; background-position: 0 -6px; } + +scale.color.fine-tune.horizontal:dir(ltr) > trough > slider, scale.color.fine-tune.horizontal:dir(rtl) > trough > slider { margin-bottom: -15px; margin-top: 6px; } + +scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } + +scale.color.fine-tune.vertical:dir(ltr) > trough { padding-left: 7px; background-position: 6px 0; } + +scale.color.fine-tune.vertical:dir(ltr) > trough > slider { margin-left: -15px; margin-right: 6px; } + +scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } + +scale.color.fine-tune.vertical:dir(rtl) > trough { padding-right: 7px; background-position: -6px 0; } + +scale.color.fine-tune.vertical:dir(rtl) > trough > slider { margin-right: -15px; margin-left: 6px; } + +progressbar { font-size: smaller; color: rgba(238, 238, 236, 0.4); font-feature-settings: "tnum"; } + +progressbar.horizontal > trough { min-width: 150px; } + +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 2px; } + +progressbar.vertical > trough { min-height: 80px; } + +progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 2px; } + +progressbar.horizontal > trough > progress { margin: 0 -1px; } + +progressbar.vertical > trough > progress { margin: -1px 0; } + +progressbar > trough > progress { border-radius: 1.5px; } + +progressbar > trough > progress:disabled { background-color: #919494; border-color: #919494; } + +progressbar > trough > progress.left { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } + +progressbar > trough > progress.right { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + +progressbar > trough > progress.top { border-top-right-radius: 5px; border-top-left-radius: 5px; } + +progressbar > trough > progress.bottom { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } + +progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } + +progressbar.osd > trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } + +progressbar.osd > trough > progress { border-style: none; border-radius: 0; } + +progressbar > trough.empty > progress { all: unset; } + +levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } + +levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } + +levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } + +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } + +levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } + +levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } + +levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } + +levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } + +levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } + +levelbar > trough { padding: 0; } + +levelbar > trough > block { border: 1px solid; } + +levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } + +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #4a90d9; background-color: #4a90d9; } + +levelbar > trough > block.full { border-color: #26ab62; background-color: #26ab62; } + +levelbar > trough > block.empty { background-color: #272c2d; border-color: #272c2d; } + +window.dialog.print drawing { color: #eeeeec; background: none; border: none; padding: 0; } + +window.dialog.print drawing paper { background: white; color: #2e3436; border: 1px solid #2a2e30; } + +window.dialog.print .dialog-action-box { margin: 12px; } + +frame, .frame { border: 1px solid #2a2e30; } + +frame { border-radius: 0px; } + +frame > label { margin: 4px; } + +actionbar > revealer > box { padding: 6px; border-spacing: 6px; border-top: 1px solid #2a2e30; } + +scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #121415 85%, rgba(18, 20, 21, 0)), radial-gradient(farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #121415 85%, rgba(18, 20, 21, 0)), radial-gradient(farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #121415 85%, rgba(18, 20, 21, 0)), radial-gradient(farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #121415 85%, rgba(18, 20, 21, 0)), radial-gradient(farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > junction { background: #2a2e30, linear-gradient(to bottom, transparent 1px, #2b3032 1px), linear-gradient(to right, transparent 1px, #2b3032 1px); } + +scrolledwindow > junction:dir(rtl) { background: #2a2e30, linear-gradient(to bottom, transparent 1px, #2b3032 1px), linear-gradient(to left, transparent 1px, #2b3032 1px); } + +separator { background: #353c3e; min-width: 1px; min-height: 1px; } + +listview, list { color: white; background-color: #232729; border-color: #2a2e30; } + +listview:backdrop, list:backdrop { color: #d3d4d5; background-color: #252a2c; border-color: #2b3132; } + +listview > row, list > row { padding: 2px; } + +listview > row.expander, list > row.expander { padding: 0px; } + +listview > row.expander .row-header, list > row.expander .row-header { padding: 2px; } + +listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), list.horizontal row.separator, list.separators.horizontal > row:not(.separator) { border-left: 1px solid #4c4f50; } + +listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #4c4f50; } + +row { outline: 0 solid transparent; outline-offset: 4px; } + +row:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(238, 238, 236, 0.05); } + +row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + +row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + +row.activatable.has-open-popup:selected, row.activatable:selected:hover { background-color: #5a99db; } + +row:selected { outline-color: rgba(255, 255, 255, 0.3); } + +columnview > listview > row { padding: 0; } + +columnview > listview > row > cell { padding: 8px 6px; } + +columnview > listview > row > cell:not(:first-child) { border-left: 1px solid transparent; } + +columnview.column-separators > listview > row > cell { border-left-color: #4c4f50; } + +columnview.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } + +treeexpander { border-spacing: 4px; } + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid rgba(74, 144, 217, 0.7); } + +columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #4a90d9; } + +columnview row:not(:selected) cell editablelabel.editing text selection { color: #ffffff; background-color: #4a90d9; } + +.rich-list > row { padding: 8px 12px; min-height: 32px; } + +.rich-list > row > box { border-spacing: 12px; } + +.app-notification { padding: 10px; border-spacing: 10px; border-radius: 0 0 5px 5px; background-color: rgba(38, 38, 38, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } + +.app-notification border { border: none; } + +expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +expander:disabled { color: #919494; } + +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +expander-widget > box > title { outline: 0 solid transparent; outline-offset: 4px; } + +expander-widget:focus:focus-visible > box > title { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: -2px; } + +expander-widget > box > title { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 0px; } + +expander-widget > box > title:hover > expander { color: white; } + +.navigation-sidebar:not(decoration):not(window):drop(active):focus, .navigation-sidebar:not(decoration):not(window):drop(active), placessidebar:not(decoration):not(window):drop(active):focus, placessidebar:not(decoration):not(window):drop(active), stackswitcher:not(decoration):not(window):drop(active):focus, stackswitcher:not(decoration):not(window):drop(active), expander-widget:not(decoration):not(window):drop(active):focus, expander-widget:not(decoration):not(window):drop(active) { box-shadow: none; } + +calendar { color: white; border: 1px solid #2a2e30; } + +calendar > header { border-bottom: 1px solid #2a2e30; } + +calendar > header > button { border: none; box-shadow: none; background: none; border-radius: 0; } + +calendar > header > button:backdrop { background: none; } + +calendar > grid > label.today { box-shadow: inset 0px -2px #2a2e30; } + +calendar > grid > label.today:selected { box-shadow: none; } + +calendar > grid > label:focus { outline-color: rgba(74, 144, 217, 0.7); outline-offset: -2px; outline-width: 2px; outline-style: solid; } + +calendar > grid > label.day-number { padding: 4px; } + +calendar > grid > label.day-number:selected { border-radius: 0px; } + +calendar > grid > label.day-number.other-month { color: alpha(currentColor,0.3); } + +window.dialog.message .titlebar { min-height: 20px; background-image: none; background-color: #33393b; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } + +window.dialog.message box.dialog-vbox.vertical { border-spacing: 10px; } + +window.dialog.message label.title { font-weight: 800; font-size: 15pt; } + +window.dialog.message.csd.background { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } + +window.dialog.message.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: solid; border-right-style: none; border-bottom-style: none; } + +window.dialog.message.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 0px; } + +window.dialog.message.csd .dialog-action-area button:last-child { border-bottom-right-radius: 0px; } + +filechooser .dialog-action-box { border-top: 1px solid #2a2e30; } + +filechooser #pathbarbox { border-bottom: 1px solid #33393b; } + +filechooserbutton > button > box { border-spacing: 6px; } + +filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } + +.sidebar { background-color: #2b3032; } + +.sidebar:not(separator):dir(ltr), .sidebar.left:not(separator), .sidebar.left:not(separator):dir(rtl) { border-right: 1px solid #2a2e30; border-left-style: none; } + +.sidebar:not(separator):dir(rtl), .sidebar.right:not(separator) { border-left: 1px solid #2a2e30; border-right-style: none; } + +.sidebar listview.view, .sidebar list { background-color: transparent; } + +paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; } + +stacksidebar list.separators:not(.horizontal) > row:not(.separator) { border-bottom: none; } + +stacksidebar row { padding: 10px 4px; } + +stacksidebar row > label { padding-left: 6px; padding-right: 6px; } + +stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } + +stacksidebar row:selected { background-color: #4a90d9; border-radius: 0px; color: #ffffff; } + +stacksidebar row:selected:hover:dir(ltr), stacksidebar row:selected:hover:dir(rtl) { background-color: #4a90d9; } + +stacksidebar row:focus:focus-visible { outline-width: 0; background-color: #4a90d9; color: #ffffff; } + +stacksidebar row.activatable:active, stacksidebar row.activatable:selected:active { box-shadow: none; } + +separator.sidebar { background-color: #2a2e30; } + +.navigation-sidebar { padding: 0; } + +.navigation-sidebar > separator { margin: 0px; } + +.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 0; margin: 0; } + +.navigation-sidebar > row:hover, .navigation-sidebar > row:backdrop:hover, .navigation-sidebar > row:focus-visible:focus-within { background-color: alpha(currentColor,0.06); } + +.navigation-sidebar > row:selected { background-color: #4a90d9; color: #ffffff; } + +.navigation-sidebar > row:selected:focus-visible:focus-within { outline-width: 0; color: #ffffff; background-color: #4a90d9; } + +.navigation-sidebar > row:selected:focus-visible:focus-within:hover { background-color: #2a76c6; } + +.navigation-sidebar > row:disabled { color: #919494; } + +row image.sidebar-icon { opacity: 0.7; } + +placessidebar .navigation-sidebar > row { padding: 0; } + +placessidebar .navigation-sidebar > row > revealer { padding: 0 14px; } + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { padding-right: 8px; } + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { padding-left: 8px; } + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { padding-right: 2px; } + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { padding-left: 2px; } + +button.sidebar-button { min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; border-radius: 100%; } + +placessidebar .navigation-sidebar > row:selected:active { box-shadow: none; } + +placessidebar .navigation-sidebar > row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: image(#4a90d9); background-clip: content-box; } + +placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { color: #4a90d9; } + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { color: #4a90d9; box-shadow: inset 0 1px #4a90d9, inset 0 -1px #4a90d9; } + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled):selected { color: #ffffff; background-color: #4a90d9; } + +placesview .server-list-button > image { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-icon-transform: rotate(0turn); } + +placesview .server-list-button:checked > image { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-icon-transform: rotate(-0.5turn); } + +placesview > actionbar > revealer > box > box { border-spacing: 6px; } + +paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#2a2e30); background-size: 1px 1px; } + +paned > separator:selected { background-image: image(#4a90d9); } + +paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #33393b; background-image: image(#2a2e30), image(#2a2e30); background-size: 1px 1px, 1px 1px; } + +paned.horizontal > separator { background-repeat: repeat-y; } + +paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } + +paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } + +paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } + +paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } + +paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } + +video { background: black; } + +video image.osd { min-width: 64px; min-height: 64px; border-radius: 32px; } + +tooltip { padding: 6px 10px; border-radius: 0px; box-shadow: none; } + +tooltip.background { background-color: rgba(0, 0, 0, 0.8); background-clip: padding-box; border: 1px solid rgba(255, 255, 255, 0.1); color: white; } + +tooltip > box { border-spacing: 6px; } + +colorswatch { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +colorswatch { outline: 0 solid transparent; outline-offset: 6px; } + +colorswatch:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 4px; outline-offset: -2px; } + +colorswatch:drop(active), colorswatch { border-style: none; } + +colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } + +colorswatch.top > overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } + +colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } + +colorswatch.bottom > overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } + +colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } + +colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } + +colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } + +colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + +colorswatch.dark > overlay { color: white; } + +colorswatch.dark.activatable:hover > overlay { border-color: #2a2e30; } + +colorswatch.light > overlay { color: black; } + +colorswatch.light.activatable:hover > overlay { border-color: #2a2e30; } + +colorswatch:drop(active) { box-shadow: none; } + +colorswatch.light:drop(active) > overlay { border-color: #4a90d9; box-shadow: inset 0 0 0 2px #2a2e30, inset 0 0 0 1px #4a90d9; } + +colorswatch.dark:drop(active) > overlay { border-color: #4a90d9; box-shadow: inset 0 0 0 2px #2a2e30, inset 0 0 0 1px #4a90d9; } + +colorswatch > overlay { border: 1px solid #2a2e30; } + +colorswatch.activatable:hover > overlay { box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.2); } + +colorswatch#add-color-button { border-radius: 5px 0 0 5px; } + +colorswatch#add-color-button:only-child { border-radius: 5px; } + +colorswatch#add-color-button > overlay { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.7); border-color: #0d0f0f; background-color: #444b4e; } + +colorswatch#add-color-button.activatable:hover > overlay { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +colorswatch:disabled { opacity: 0.5; } + +colorswatch:disabled > overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } + +row:selected colorswatch { box-shadow: 0 0 0 2px #ffffff; } + +colorswatch#editor-color-sample { border-radius: 4px; } + +colorswatch#editor-color-sample > overlay { border-radius: 4.5px; } + +plane { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +plane { outline: 0 solid transparent; outline-offset: 6px; } + +plane:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: 2px; } + +colorchooser .popover.osd { border-radius: 5px; } + +.content-view { background-color: #222728; } + +.content-view:hover { -gtk-icon-filter: brightness(1.2); } + +.content-view .tile { margin: 2px; background-color: black; border-radius: 0; padding: 0; } + +.content-view .tile:active, .content-view .tile:selected { background-color: #4a90d9; } + +.content-view .tile:disabled { background-color: #2d3234; } + +.osd .scale-popup button.flat { border-style: none; border-radius: 5px; } + +.scale-popup button:hover { background-color: rgba(238, 238, 236, 0.1); border-radius: 5px; } + +window { border-width: 0px; } + +window.csd { box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(42, 46, 48, 0.9); margin: 0px; border-radius: 0px 0px 0 0; } + +window.csd:backdrop { box-shadow: 0 1px 4px 1px transparent, 0 1px 2px 1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(42, 46, 48, 0.9); transition: none; } + +window.csd.popup { border-radius: 0px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(42, 46, 48, 0.8); } + +window.csd.dialog.message { border-radius: 0px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(42, 46, 48, 0.8); } + +window.csd.solid-csd { margin: 0; padding: 0; border: solid 1px #2a2e30; border-radius: 0; box-shadow: inset 0 0 0 3px #3c4446, inset 0 1px rgba(255, 255, 255, 0.04); } + +window.csd.solid-csd:backdrop { box-shadow: inset 0 0 0 3px #33393b, inset 0 1px rgba(255, 255, 255, 0.04); } + +window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: none; } + +.tiled window { border: 1px solid rgba(0, 0, 0, 0.2); } + +window.popup { box-shadow: none; } + +window.ssd { box-shadow: 0 0 0 1px rgba(42, 46, 48, 0.9); } + +tooltip.csd { border-radius: 0px; box-shadow: none; } + +.view:selected:focus, .view:selected, textview > text:selected:focus, textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, popover.menu modelbutton:selected, popover.menu modelbutton:selected:active, row:selected, calendar > grid > label.day-number:selected { background-color: #4a90d9; } + +label:selected, .view:selected:focus, .view:selected, textview > text:selected:focus, textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, popover.menu modelbutton:selected, popover.menu modelbutton:selected:active, row:selected, calendar > grid > label.day-number:selected { color: #ffffff; } + +label:disabled > selection, label:disabled:selected, .view:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text > selection:disabled, iconview:disabled:selected:focus, iconview:disabled:selected, flowbox > flowboxchild:disabled:selected, gridview > child:disabled:selected, entry > text > selection:disabled, modelbutton.flat:disabled:selected, spinbutton:not(.vertical) > text > selection:disabled, spinbutton.vertical > text > text > selection:disabled, spinbutton.vertical > text > selection:disabled, columnview.view:disabled:selected, treeview.view:disabled:selected, popover.menu modelbutton:disabled:selected, popover.menu modelbutton:disabled:selected:active, row:disabled:selected, calendar > grid > label.day-number:disabled:selected { color: #a5c8ec; } + +.monospace { font-family: monospace; } + +cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; } + +shortcuts-section { margin: 20px; } + +.shortcuts-search-results { margin: 20px; border-spacing: 24px; } + +shortcut { border-spacing: 6px; } + +shortcut > .keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: #eeeeec; background-color: #232729; border: 1px solid; border-color: #2a2e30; border-radius: 5px; box-shadow: inset 0 -3px #272b2d; font-size: smaller; } + +:not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) { border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; caret-color: #4a90d9; } + +stackswitcher > button.text-button { min-width: 100px; } + +stackswitcher.circular { border-spacing: 12px; } + +stackswitcher.circular > button.circular, stackswitcher.circular > button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; } + +.lowres-icon { -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } + +.icon-dropshadow { -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } + +popover.emoji-picker > contents { padding: 0; } + +.emoji-searchbar { padding: 6px; border-spacing: 6px; border-bottom: 1px solid #2a2e30; } + +.emoji-toolbar { padding: 6px; border-spacing: 6px; border-top: 1px solid #2a2e30; } + +button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; padding: 3px 0 0; min-width: 32px; min-height: 28px; background: none; box-shadow: none; text-shadow: none; } + +button.emoji-section:hover { border-color: rgba(238, 238, 236, 0.1); } + +button.emoji-section:checked { border-color: #4a90d9; } + +popover.emoji-picker emoji { font-size: x-large; padding: 6px; border-radius: 6px; } + +popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { background: #4a90d9; } + +emoji-completion-row > box { border-spacing: 10px; padding: 2px 10px; } + +emoji-completion-row:focus, emoji-completion-row:hover { background-color: #4a90d9; color: #ffffff; } + +emoji-completion-row emoji:focus, emoji-completion-row emoji:hover { background-color: #202425; } + +popover.entry-completion > contents { padding: 0; } + +statusbar { padding: 6px 10px 6px 10px; } + +/* GTK NAMED COLORS ---------------- use responsibly! */ +/* +widget text/foreground color */ +@define-color theme_fg_color #eeeeec; +/* +text color for entries, views and content in general */ +@define-color theme_text_color white; +/* +widget base background color */ +@define-color theme_bg_color #33393b; +/* +text widgets and the like base background color */ +@define-color theme_base_color #232729; +/* +base background color of selections */ +@define-color theme_selected_bg_color #4a90d9; +/* +text/foreground color of selections */ +@define-color theme_selected_fg_color #ffffff; +/* +base background color of insensitive widgets */ +@define-color insensitive_bg_color #2d3234; +/* +text foreground color of insensitive widgets */ +@define-color insensitive_fg_color #919494; +/* +insensitive text widgets and the like base background color */ +@define-color insensitive_base_color #232729; +/* +widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #919494; +/* +text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color white; +/* +widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #33393b; +/* +text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #252a2c; +/* +base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #4a90d9; +/* +text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #ffffff; +/* +insensitive color on backdrop windows*/ +@define-color unfocused_insensitive_color #566164; +/* +widgets main borders color */ +@define-color borders #2a2e30; +/* +widgets main borders color on backdrop windows */ +@define-color unfocused_borders #2b3132; +/* +these are pretty self explicative */ +@define-color warning_color #f57900; +@define-color error_color #cc0000; +@define-color success_color #26ab62; +/* +these colors are exported for the window manager and shouldn't be used in applications, +read if you used those and something break with a version upgrade you're on your own... */ +@define-color wm_title shade(#eeeeec, 1.8); +@define-color wm_unfocused_title #919494; +@define-color wm_highlight rgba(0, 0, 0, 0); +@define-color wm_borders_edge rgba(255, 255, 255, 0.04); +@define-color wm_bg_a shade(#33393b, 1.2); +@define-color wm_bg_b #33393b; +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); +@define-color wm_button_hover_color_a shade(#33393b, 1.3); +@define-color wm_button_hover_color_b #33393b; +@define-color wm_button_active_color_a shade(#33393b, 0.85); +@define-color wm_button_active_color_b shade(#33393b, 0.89); +@define-color wm_button_active_color_c shade(#33393b, 0.9); +/* content view background such as thumbnails view in Photos or Boxes */ +@define-color content_view_bg #232729; +/* Very contrasty background for text views (@theme_text_color foreground) */ +@define-color text_view_bg #151718; +windowcontrols button { min-width: 20px; min-height: 20px; padding: 0; margin: 4px 4px 4px 10px; border-radius: 1.5px; } + +windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; box-shadow: none; transition-property: background-color; } + +windowcontrols button.close > image, windowcontrols button.maximize > image, windowcontrols button.minimize > image { opacity: 0; } + +windowcontrols button.close { background-color: #a45f5f; } + +windowcontrols button.close:hover, windowcontrols button.close:active { background-color: #d35f5f; } + +windowcontrols button.close:backdrop { background-color: rgba(255, 255, 255, 0.2); } + +windowcontrols button.close:backdrop:hover, windowcontrols button.close:backdrop:active { background-color: #d35f5f; } + +windowcontrols button.maximize:hover, windowcontrols button.maximize:active, windowcontrols button.minimize:hover, windowcontrols button.minimize:active { background-color: rgba(255, 255, 255, 0.2); } + +windowcontrols button.close { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.close:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:backdrop:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.close:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:hover:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:hover:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.close:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:active:not(:hover) { opacity: 0.8; } + +windowcontrols button.close:active:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:backdrop:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:hover:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:hover:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.maximize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:active:not(:hover) { opacity: 0.8; } + +windowcontrols button.maximize:active:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:backdrop:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:hover:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:hover:backdrop:not(:hover) { opacity: 0.5; } + +windowcontrols button.minimize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:active:not(:hover) { opacity: 0.8; } + +windowcontrols button.minimize:active:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:backdrop:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:backdrop:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:hover:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:hover:backdrop:not(:hover) { opacity: 0.5; } + +.maximized windowcontrols button.titlebutton.maximize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:active:not(:hover) { opacity: 0.8; } + +.maximized windowcontrols button.titlebutton.maximize:active:backdrop:not(:hover) { opacity: 0.5; } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked) { border-style: solid; border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #4a90d9; background-color: #596367; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):active, :not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):checked { color: #eeeeec; border-color: #0d0f0f; background-image: image(#25292b); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):active:hover, :not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):checked:hover { background-image: image(#1b1f20); } + +:not(.nautilus-window) .titlebar .linked > button, :not(.nautilus-window) .titlebar .linked > button:hover, :not(.nautilus-window) .titlebar .linked > button:checked, :not(.nautilus-window) .titlebar .linked > button:focus, :not(.nautilus-window) .titlebar .linked > button.default, :not(.nautilus-window) .titlebar .linked > button.toggle, :not(.nautilus-window) .titlebar .linked > button:active { border-style: solid; } + +switch { font-weight: bold; font-size: smaller; margin: 4px 0; padding: 0; border-width: 0; background-color: rgba(0, 0, 0, 0.38); background-clip: padding-box; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } + +switch { outline: 0 solid transparent; outline-offset: 4px; } + +switch:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.7); outline-width: 2px; outline-offset: 0; } + +headerbar switch { background-color: #070808; } + +switch:checked { background-color: #4a90d9; } + +switch:disabled { opacity: 0.38; } + +switch > slider { margin: 1px; min-width: 22px; min-height: 18px; border-radius: 0; background-color: rgba(238, 238, 236, 0.5); transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } + +switch:hover > slider, switch:focus > slider { background-color: rgba(238, 238, 236, 0.5); box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3); } + +switch:checked > slider { background-color: rgba(238, 238, 236, 0.5); } + +switch > image { color: transparent; } + +row:selected switch { outline-color: rgba(255, 255, 255, 0.3); } + +scale.horizontal.marks-before:not(.marks-after) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; min-height: 22px; min-width: 9px; } + +scale.horizontal.marks-before.fine-tune:not(.marks-after) > trough > slider { margin: -8px -4px; } + +scale.horizontal.marks-after:not(.marks-before) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; min-height: 22px; min-width: 9px; } + +scale.horizontal.marks-after.fine-tune:not(.marks-before) > trough > slider { margin: -8px -4px; } + +scale.vertical.marks-before:not(.marks-after) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; margin: -4px -11px; min-height: 9px; min-width: 22px; } + +scale.vertical.marks-before.fine-tune:not(.marks-after) > trough > slider { margin: -8px -4px; margin: -4px -8px; } + +scale.vertical.marks-after:not(.marks-before) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; margin: -4px -11px; min-height: 9px; min-width: 22px; } + +scale.vertical.marks-after.fine-tune:not(.marks-before) > trough > slider { margin: -8px -4px; margin: -4px -8px; } diff --git a/gtk/src/Plano/gtk-4.0/gtk-dark.scss b/gtk/src/Plano/gtk-4.0/gtk-dark.scss new file mode 100644 index 0000000..c7ebe54 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/gtk-dark.scss @@ -0,0 +1,8 @@ +$variant: 'dark'; +$alt_header: 'false'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'colors-public'; +@import 'custom'; diff --git a/gtk/src/Plano/gtk-4.0/gtk.css b/gtk/src/Plano/gtk-4.0/gtk.css new file mode 100644 index 0000000..81057d0 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/gtk.css @@ -0,0 +1,1760 @@ +.background { color: #2c2c2c; background-color: #ebeced; } + +.background:backdrop { text-shadow: none; -gtk-icon-shadow: none; } + +dnd { color: #2c2c2c; } + +.normal-icons { -gtk-icon-size: 16px; } + +.large-icons { -gtk-icon-size: 32px; } + +spinner:disabled, arrow:disabled, scrollbar:disabled, check:disabled, radio:disabled, treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); } + +.view, iconview, textview > text { color: black; background-color: #ffffff; } + +.view:disabled, iconview:disabled, textview > text:disabled { color: #8c8c8d; background-color: #f3f4f4; } + +.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, textview > text:selected:focus, textview > text:selected { border-radius: 0px; } + +textview:drop(active) { caret-color: #4a90d9; } + +textview > border { background-color: #f5f6f6; } + +iconview { outline: 0 solid transparent; outline-offset: 4px; } + +iconview:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +iconview:drop(active) { box-shadow: none; } + +iconview > dndtarget:drop(active) { border-style: solid; border-width: 1px; border-color: #256ab1; } + +rubberband, .content-view > rubberband, columnview.view > rubberband, treeview.view > rubberband, gridview > rubberband, flowbox > rubberband { border: 1px solid #2a76c6; background-color: rgba(42, 118, 198, 0.2); } + +flowbox > flowboxchild { padding: 3px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +flowbox > flowboxchild { outline: 0 solid transparent; outline-offset: 4px; } + +flowbox > flowboxchild:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +flowbox > flowboxchild:selected { outline-color: rgba(255, 255, 255, 0.8); } + +gridview > child { padding: 3px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +gridview > child { outline: 0 solid transparent; outline-offset: 4px; } + +gridview > child:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +gridview > child:selected { outline-color: rgba(255, 255, 255, 0.8); } + +gridview > child box { border-spacing: 8px; margin: 12px; } + +coverflow cover { color: black; background-color: #ffffff; border: 1px solid black; } + +label { outline: 0 solid transparent; outline-offset: 4px; } + +label:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +label > selection { background-color: #4a90d9; color: #ffffff; } + +label:disabled { color: #8c8c8d; } + +button label:disabled { color: inherit; } + +label.error { color: #cc0000; } + +label.error:disabled { color: rgba(204, 0, 0, 0.5); } + +.dim-label, .titlebar:not(headerbar) .subtitle, headerbar .subtitle, spinbutton.vertical > text > text > placeholder, spinbutton:not(.vertical) > text > placeholder, entry > text > placeholder, label.separator { opacity: 0.55; text-shadow: none; } + +window.assistant .sidebar { padding: 0px; border-top: 1px solid #c3c6c9; } + +window.assistant.csd .sidebar { border-top-style: none; } + +window.assistant .sidebar > label { padding: 6px 12px; } + +window.assistant .sidebar > label.highlight { background-color: #4a90d9; color: #ffffff; border-radius: 0; } + +window.aboutdialog image.large-icons { -gtk-icon-size: 128px; } + +.osd .scale-popup, .app-notification, .osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents, .osd { color: #eeeeec; border: none; background-color: rgba(53, 53, 53, 0.7); background-clip: padding-box; -gtk-icon-shadow: 0 1px black; } + +@keyframes spin { to { transform: rotate(1turn); } } + +spinner { background: none; opacity: 0; -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); } + +spinner:checked { opacity: 1; animation: spin 1s linear infinite; } + +spinner:checked:disabled { opacity: 0.5; } + +.large-title { font-weight: 300; font-size: 24pt; } + +.title-1 { font-weight: 800; font-size: 20pt; } + +.title-2 { font-weight: 800; font-size: 15pt; } + +.title-3 { font-weight: 700; font-size: 15pt; } + +.title-4 { font-weight: 700; font-size: 13pt; } + +.heading { font-weight: 700; font-size: 11pt; } + +.body { font-weight: 400; font-size: 11pt; } + +.caption-heading { font-weight: 700; font-size: 9pt; } + +.caption { font-weight: 400; font-size: 9pt; } + +spinbutton.vertical > text, spinbutton:not(.vertical), entry { min-height: 24px; padding-left: 8px; padding-right: 8px; border: 1px solid; border-radius: 0px; border-spacing: 6px; transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: black; border-color: #c3c6c9; background-color: #ffffff; } + +spinbutton.vertical > text, spinbutton:not(.vertical), entry { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text:focus-within, spinbutton:focus-within:not(.vertical), entry:focus-within { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text > image.left, spinbutton:not(.vertical) > image.left, entry > image.left { margin-right: 6px; } + +spinbutton.vertical > text > image.right, spinbutton:not(.vertical) > image.right, entry > image.right { margin-left: 6px; } + +spinbutton.vertical > text > text > block-cursor, spinbutton:not(.vertical) > text > block-cursor, entry > text > block-cursor { color: #ffffff; background-color: black; } + +spinbutton.vertical > text.flat, spinbutton.flat:not(.vertical), entry.flat:focus-within, entry.flat:backdrop, entry.flat:disabled, entry.flat { min-height: 0; padding: 2px; background-color: transparent; border-color: transparent; border-radius: 0; } + +spinbutton.vertical > text:focus-within > placeholder, spinbutton:focus-within:not(.vertical) > placeholder, entry:focus-within > placeholder { opacity: 0; } + +spinbutton.vertical > text:disabled, spinbutton:disabled:not(.vertical), entry:disabled { color: #8c8c8d; border-color: #c3c6c9; background-color: #f3f4f4; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #cc0000; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not(.vertical), entry.error:focus-within { outline-color: rgba(204, 0, 0, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #cc0000; } + +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #f57900; } + +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } + +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; } + +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #f57900; } + +spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #565656; } + +spinbutton.vertical > text > image:hover, spinbutton:not(.vertical) > image:hover, entry > image:hover { color: #2c2c2c; } + +spinbutton.vertical > text > image:active, spinbutton:not(.vertical) > image:active, entry > image:active { color: #4a90d9; } + +spinbutton.vertical > text.password image.caps-lock-indicator, spinbutton.password:not(.vertical) image.caps-lock-indicator, entry.password image.caps-lock-indicator { color: #a2a2a3; } + +spinbutton.vertical > text:drop(active), spinbutton:drop(active):not(.vertical), entry:drop(active):focus-within, entry:drop(active) { border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } + +.osd spinbutton.vertical > text, .osd spinbutton:not(.vertical), .osd entry { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); background-clip: padding-box; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.osd spinbutton.vertical > text:focus-within, .osd spinbutton:focus-within:not(.vertical), .osd entry:focus-within { color: white; border-color: #4a90d9; background-color: rgba(0, 0, 0, 0.5); background-clip: padding-box; } + +.osd spinbutton.vertical > text:disabled, .osd spinbutton:disabled:not(.vertical), .osd entry:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: rgba(71, 71, 71, 0.5); background-clip: padding-box; } + +spinbutton.vertical > text > progress, spinbutton:not(.vertical) > progress, entry > progress { margin-bottom: 2px; } + +spinbutton.vertical > text progress > trough > progress, spinbutton:not(.vertical) progress > trough > progress, entry progress > trough > progress { background-color: transparent; background-image: none; border-radius: 0; border-width: 0 0 2px; border-color: #4a90d9; border-style: solid; box-shadow: none; } + +spinbutton.vertical.linked:not(.vertical) > text:drop(active) + text, spinbutton.vertical.linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + text, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked:not(.vertical) > text:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + menubutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + menubutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + dropdown > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + dropdown > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + colorbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + colorbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + fontbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + fontbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + filechooserbutton > button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > text:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > entry:drop(active) + menubutton > button, .linked:not(.vertical) > entry:drop(active) + dropdown > button, .linked:not(.vertical) > entry:drop(active) + colorbutton > button, .linked:not(.vertical) > entry:drop(active) + fontbutton > button, .linked:not(.vertical) > entry:drop(active) + filechooserbutton > button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, spinbutton.vertical.linked:not(.vertical) > entry:drop(active) + text, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + entry { border-left-color: #4a90d9; } + +spinbutton.vertical.linked > text:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + text:not(:disabled), spinbutton.vertical.linked > spinbutton:not(:disabled):not(.vertical) + text:not(:disabled), spinbutton.vertical.linked > text:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > entry:not(:disabled) + entry:not(:disabled), spinbutton.vertical.linked > entry:not(:disabled) + text:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) { border-top-color: #edeeef; } + +spinbutton.vertical.linked > text:disabled + text:disabled, spinbutton.vertical.linked > spinbutton:disabled:not(.vertical) + text:disabled, spinbutton.vertical.linked > text:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), spinbutton.vertical.linked > text:disabled + entry:disabled, .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, spinbutton.vertical.linked > entry:disabled + text:disabled, .linked.vertical > entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical > entry:disabled + entry:disabled { border-top-color: #edeeef; } + +spinbutton.vertical.linked > text + text:drop(active):not(:only-child), spinbutton.vertical.linked > spinbutton:not(.vertical) + text:drop(active):not(:only-child), spinbutton.vertical.linked > text + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical), spinbutton.vertical.linked > text + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), spinbutton.vertical.linked > entry + text:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > entry + entry:drop(active):not(:only-child) { border-top-color: #4a90d9; } + +spinbutton.vertical.linked > text:drop(active):not(:only-child) + text, spinbutton.vertical.linked > spinbutton:drop(active):not(:only-child):not(.vertical) + text, spinbutton.vertical.linked > text:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical), spinbutton.vertical.linked > text:drop(active):not(:only-child) + entry, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + entry, spinbutton.vertical.linked > text:drop(active):not(:only-child) + button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + menubutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + menubutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + dropdown > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + dropdown > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + colorbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + fontbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + filechooserbutton > button, spinbutton.vertical.linked > text:drop(active):not(:only-child) + combobox > box > button.combo, .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo, spinbutton.vertical.linked > entry:drop(active):not(:only-child) + text, .linked.vertical > entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > entry:drop(active):not(:only-child) + button, .linked.vertical > entry:drop(active):not(:only-child) + menubutton > button, .linked.vertical > entry:drop(active):not(:only-child) + dropdown > button, .linked.vertical > entry:drop(active):not(:only-child) + colorbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + fontbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + filechooserbutton > button, .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: #4a90d9; } + +spinbutton.vertical > text.error, spinbutton.error:not(.vertical), entry.error { color: #cc0000; } + +treeview entry:focus-within:dir(rtl), treeview entry:focus-within:dir(ltr) { background-color: #ffffff; transition-property: color, background; } + +treeview entry.flat, treeview entry { border-radius: 0; background-image: none; background-color: #ffffff; } + +treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #4a90d9; } + +editablelabel > stack > text { color: black; border-color: #c3c6c9; background-color: #ffffff; } + +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #4a90d9 0%, rgba(74, 144, 217, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #4a90d9 95%, rgba(74, 144, 217, 0)); } } + +notebook > header > tabs > arrow, button { min-height: 20px; min-width: 16px; padding: 4px 4px; border: 1px solid; border-radius: 0px; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #2c2c2c; outline-color: rgba(74, 144, 217, 0.5); border-color: #a3a7ac; background-color: #fefefe; } + +notebook > header > tabs > arrow, button { outline: 0 solid transparent; outline-offset: 4px; } + +notebook > header > tabs > arrow:focus:focus-visible, button:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +notebook > header > tabs > arrow:hover, button:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); -gtk-icon-filter: brightness(1.2); } + +notebook > header > tabs > arrow:active, notebook > header > tabs > arrow:checked, button:active, button:checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); transition-duration: 50ms; } + +notebook > header > tabs > arrow:active:hover, notebook > header > tabs > arrow:checked:hover, button:active:hover, button:checked:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:checked:hover, button:checked:hover { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +notebook > header > tabs > arrow:checked:hover:hover, button:checked:hover:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:checked:active, button:checked:active { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +notebook > header > tabs > arrow:checked:active:hover, button:checked:active:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:backdrop, button.flat:backdrop, button:backdrop { color: #8c8c8d; box-shadow: none; transition: none; -gtk-icon-filter: none; } + +notebook > header > tabs > arrow:backdrop:active, notebook > header > tabs > arrow:backdrop:checked, button.flat:backdrop:active, button.flat:backdrop:checked, button:backdrop:active, button:backdrop:checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); color: #8c8c8d; } + +notebook > header > tabs > arrow:backdrop:active:hover, notebook > header > tabs > arrow:backdrop:checked:hover, button.flat:backdrop:active:hover, button.flat:backdrop:checked:hover, button:backdrop:active:hover, button:backdrop:checked:hover { background-image: image(#d0d3d5); } + +notebook > header > tabs > arrow:backdrop:disabled, button.flat:backdrop:disabled, button:backdrop:disabled { color: #c3c6c9; border-color: #cbcdd0; background-image: image(#f3f4f4); box-shadow: none; } + +notebook > header > tabs > arrow:backdrop:disabled:active, notebook > header > tabs > arrow:backdrop:disabled:checked, button.flat:backdrop:disabled:active, button.flat:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked { color: #c3c6c9; border-color: #cbcdd0; background-image: image(#dedee0); box-shadow: none; } + +notebook > header > tabs > arrow:disabled, button:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +notebook > header > tabs > arrow:disabled:active, notebook > header > tabs > arrow:disabled:checked, button:disabled:active, button:disabled:checked { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#dedee0); box-shadow: none; } + +button.sidebar-button, notebook > header > tabs > arrow, notebook > header > tabs > arrow.flat, button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; transition: none; } + +button.sidebar-button:hover, notebook > header > tabs > arrow:hover, button.flat:hover { border-color: transparent; background-image: none; box-shadow: none; background-color: #cbcdd0; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 500ms; } + +button.sidebar-button:active, notebook > header > tabs > arrow:active, button.sidebar-button:checked, notebook > header > tabs > arrow:checked, button.flat:active, button.flat:checked { border-color: transparent; background-image: none; box-shadow: none; background-color: #bbbec2; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +button.sidebar-button:backdrop, notebook > header > tabs > arrow:backdrop, button.sidebar-button:disabled, notebook > header > tabs > arrow:disabled, button.flat:backdrop, button.flat:disabled, button.flat:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +notebook > header > tabs > arrow.image-button, button.image-button { min-width: 24px; padding-left: 4px; padding-right: 4px; } + +notebook > header > tabs > arrow.text-button, button.text-button { padding-left: 16px; padding-right: 16px; } + +notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button { padding-left: 8px; padding-right: 8px; } + +notebook > header > tabs > arrow.text-button.image-button label, button.text-button.image-button label { padding-left: 8px; padding-right: 8px; } + +dropdown:drop(active) button.combo, combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active), button:drop(active) { color: #4a90d9; border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; } + +row:selected button { border-color: #256ab1; } + +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) { color: #ffffff; border-color: transparent; } + +row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop { color: #fcfcfc; } + +button.osd { min-width: 26px; min-height: 32px; color: #eeeeec; border-radius: 0px; color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; border: none; box-shadow: none; } + +button.osd.image-button { min-width: 30px; } + +button.osd.image-button:only-child { margin: 4px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } + +button.osd:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; border: none; box-shadow: none; } + +button.osd:active, button.osd:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; border: none; box-shadow: none; } + +.app-notification button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; } + +.app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd button:active, .osd button:checked:backdrop, .osd button:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +.app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd button:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +.app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; } + +.app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; background-image: none; border-color: transparent; box-shadow: none; } + +.app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd button.flat:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +button.suggested-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; background-color: #5f9ddd; } + +button.suggested-action { outline: 0 solid transparent; outline-offset: 4px; } + +button.suggested-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +button.suggested-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #4a90d9; } + +button.suggested-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #6ca5e0; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +button.suggested-action:active, button.suggested-action:checked { color: white; border-color: #256ab1; background-image: image(#2b7bcf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +button.suggested-action:active:hover, button.suggested-action:checked:hover { background-image: image(#2871be); } + +button.suggested-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(74, 144, 217, 0.8); } + +button.suggested-action:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +button.suggested-action:disabled:active, button.suggested-action:disabled:checked { color: #b4d1ef; border-color: #256ab1; background-image: image(#438cd8); box-shadow: none; } + +.osd button.suggested-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.5)); background-clip: padding-box; } + +.osd button.suggested-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(74, 144, 217, 0.7)); background-clip: padding-box; } + +.osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#4a90d9); background-clip: padding-box; box-shadow: none; } + +.osd button.suggested-action:disabled:backdrop, .osd button.suggested-action:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +button.destructive-action { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #9c1319; background-color: #e62f37; } + +button.destructive-action { outline: 0 solid transparent; outline-offset: 4px; } + +button.destructive-action:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +button.destructive-action.flat { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #e01b24; } + +button.destructive-action:hover { color: white; outline-color: rgba(255, 255, 255, 0.3); border-color: #4a90d9; background-color: #e83c44; box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(74, 144, 217, 0.2); } + +button.destructive-action:active, button.destructive-action:checked { color: white; border-color: #9c1319; background-image: image(#bc171e); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +button.destructive-action:active:hover, button.destructive-action:checked:hover { background-image: image(#a9141b); } + +button.destructive-action.flat:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: rgba(224, 27, 36, 0.8); } + +button.destructive-action:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +button.destructive-action:disabled:active, button.destructive-action:disabled:checked { color: #f1a5a8; border-color: #9c1319; background-image: image(#dc1d27); box-shadow: none; } + +.osd button.destructive-action { color: #eeeeec; outline-color: rgba(255, 255, 255, 0.8); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.5)); background-clip: padding-box; } + +.osd button.destructive-action:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.7)); background-clip: padding-box; } + +.osd button.destructive-action:active:backdrop, .osd button.destructive-action:active, .osd button.destructive-action:checked:backdrop, .osd button.destructive-action:checked { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(#e01b24); background-clip: padding-box; box-shadow: none; } + +.osd button.destructive-action:disabled:backdrop, .osd button.destructive-action:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +stackswitcher > button > label { padding: 0 6px; margin: 0 -6px; } + +stackswitcher > button > image { padding: 3px 6px; margin: -3px -6px; } + +button.font separator { background-color: transparent; } + +button.font > box { border-spacing: 6px; } + +button.font > box > box > label { font-weight: bold; } + +button.circular { min-width: 32px; min-height: 32px; padding: 0; border-radius: 9999px; } + +button.circular label { padding: 0; } + +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #4a90d9 96%, rgba(74, 144, 217, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } + +stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } + +stacksidebar row.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl) { background-position: left 3px, left 4px; } + +.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:last-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(ltr):not(:first-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(ltr), combobox.linked button:nth-child(2):dir(ltr), .linked:not(.vertical) > menubutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > filechooserbutton:dir(rtl):not(:last-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(ltr):not(:first-child) > button, .linked:not(.vertical) > filechooserbutton:dir(ltr):not(:first-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:last-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:last-child), .linked:not(.vertical) > button:dir(rtl):not(:last-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:first-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:first-child), .linked:not(.vertical) > button:dir(ltr):not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + +.linked:not(.vertical) > filechooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(rtl):not(:first-child) > box > button.combo, .linked:not(.vertical) > filechooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > appchooserbutton > combobox:dir(ltr):not(:last-child) > box > button.combo, .linked:not(.vertical) > combobox:dir(ltr):not(:last-child) > box > button.combo, dropdown.linked button:nth-child(2):dir(rtl), combobox.linked button:nth-child(2):dir(rtl), .linked:not(.vertical) > menubutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > dropdown:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > colorbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > fontbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > filechooserbutton:dir(rtl):not(:first-child) > button, .linked:not(.vertical) > menubutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > dropdown:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > colorbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > fontbutton:dir(ltr):not(:last-child) > button, .linked:not(.vertical) > filechooserbutton:dir(ltr):not(:last-child) > button, spinbutton.vertical.linked:not(.vertical) > text:dir(rtl):not(:first-child), .linked:not(.vertical) > spinbutton:dir(rtl):not(:first-child):not(.vertical), .linked:not(.vertical) > entry:dir(rtl):not(:first-child), .linked:not(.vertical) > button:dir(rtl):not(:first-child), spinbutton.vertical.linked:not(.vertical) > text:dir(ltr):not(:last-child), .linked:not(.vertical) > spinbutton:dir(ltr):not(:last-child):not(.vertical), .linked:not(.vertical) > entry:dir(ltr):not(:last-child), .linked:not(.vertical) > button:dir(ltr):not(:last-child) { border-right-style: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } + +.linked.vertical > filechooserbutton > combobox:not(:first-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:first-child) > box > button.combo, .linked.vertical > combobox:not(:first-child) > box > button.combo, .linked.vertical > menubutton:not(:first-child) > button, .linked.vertical > dropdown:not(:first-child) > button, .linked.vertical > colorbutton:not(:first-child) > button, .linked.vertical > fontbutton:not(:first-child) > button, .linked.vertical > filechooserbutton:not(:first-child) > button, spinbutton.vertical.linked > text:not(:first-child), .linked.vertical > spinbutton:not(:first-child):not(.vertical), .linked.vertical > entry:not(:first-child), .linked.vertical > button:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; } + +.linked.vertical > filechooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > appchooserbutton > combobox:not(:last-child) > box > button.combo, .linked.vertical > combobox:not(:last-child) > box > button.combo, .linked.vertical > menubutton:not(:last-child) > button, .linked.vertical > dropdown:not(:last-child) > button, .linked.vertical > colorbutton:not(:last-child) > button, .linked.vertical > fontbutton:not(:last-child) > button, .linked.vertical > filechooserbutton:not(:last-child) > button, spinbutton.vertical.linked > text:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical), .linked.vertical > entry:not(:last-child), .linked.vertical > button:not(:last-child) { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + +.scale-popup button:hover, button.link, button.link:hover, button.link:active, button.link:checked, popover.menu box.circular-buttons button.circular.image-button.model, list > row button.image-button:not(.flat), .toolbar button, modelbutton.flat { background-color: transparent; background-image: none; border-color: transparent; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } + +modelbutton.flat { min-height: 26px; padding-left: 5px; padding-right: 5px; border-radius: 0px; } + +modelbutton.flat:hover { background-color: #4a90d9; color: #ffffff; } + +modelbutton.flat:disabled { color: #8c8c8d; } + +modelbutton.flat arrow { background: none; min-width: 16px; min-height: 16px; opacity: 0.3; } + +modelbutton.flat arrow:hover { background: none; } + +modelbutton.flat arrow.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); } + +modelbutton.flat arrow.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); } + +.toolbar button { margin: 1px; } + +.toolbar button:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +.toolbar button:active { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +.toolbar button:active:hover { background-image: image(#d0d3d5); } + +.toolbar button:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +.toolbar button:backdrop { color: #8c8c8d; box-shadow: none; } + +.toolbar button:backdrop:disabled { color: #c3c6c9; border-color: #cbcdd0; background-image: image(#f3f4f4); box-shadow: none; } + +button.color { padding: 4px; } + +button.color > colorswatch:only-child { box-shadow: 0 1px rgba(0, 0, 0, 0.1); } + +button.color > colorswatch:only-child, button.color > colorswatch:only-child > overlay { border-radius: 0; } + +.osd button.color > colorswatch:only-child { box-shadow: none; } + +.osd button.color:disabled colorswatch:only-child, .osd button.color:active colorswatch:only-child, .osd button.color:checked colorswatch:only-child, button.color:disabled colorswatch:only-child, button.color:active colorswatch:only-child, button.color:checked colorswatch:only-child { box-shadow: none; } + +popover.menu box.circular-buttons button.circular.image-button.model, list > row button.image-button:not(.flat) { border: 1px solid rgba(195, 198, 201, 0.5); } + +popover.menu box.circular-buttons button.circular.image-button.model:hover, list > row button.image-button:not(.flat):hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +popover.menu box.circular-buttons button.circular.image-button.model:active, popover.menu box.circular-buttons button.circular.image-button.model:checked, list > row button.image-button:not(.flat):active, list > row button.image-button:not(.flat):checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +popover.menu box.circular-buttons button.circular.image-button.model:active:hover, popover.menu box.circular-buttons button.circular.image-button.model:checked:hover, list > row button.image-button:not(.flat):active:hover, list > row button.image-button:not(.flat):checked:hover { background-image: image(#d0d3d5); } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button.suggested-action:not(.flat) { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; background-color: #5f9ddd; } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model, list > row button.image-button.suggested-action:not(.flat) { outline: 0 solid transparent; outline-offset: 4px; } + +popover.menu box.circular-buttons button.suggested-action.circular.image-button.model:focus:focus-visible, list > row button.image-button.suggested-action:not(.flat):focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button.destructive-action:not(.flat) { color: white; outline-color: rgba(255, 255, 255, 0.8); border-color: #9c1319; background-color: #e62f37; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model, list > row button.image-button.destructive-action:not(.flat) { outline: 0 solid transparent; outline-offset: 4px; } + +popover.menu box.circular-buttons button.destructive-action.circular.image-button.model:focus:focus-visible, list > row button.image-button.destructive-action:not(.flat):focus:focus-visible { outline-color: rgba(255, 255, 255, 0.8); outline-width: 2px; outline-offset: -2px; } + +button.link, link { color: #2a76c6; text-decoration: underline; } + +button.link:visited, link:visited { color: #215d9c; } + +*:selected button.link:visited, *:selected link:visited { color: #a6bed7; } + +button.link:hover, link:hover { color: #4a90d9; } + +*:selected button.link:hover, *:selected link:hover { color: #edf4fb; } + +button.link:active, link:active { color: #2a76c6; } + +*:selected button.link:active, *:selected link:active { color: #d4e4f4; } + +button.link:disabled, link:disabled { color: rgba(120, 120, 120, 0.8); } + +button.link:selected, *:selected button.link, link:selected, *:selected link { color: #d4e4f4; } + +link { outline: 0 solid transparent; outline-offset: 4px; } + +link:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +button.link, button.link:hover, button.link:active, button.link:checked { text-shadow: none; } + +button.link > label { text-decoration: underline; } + +spinbutton { font-feature-settings: "tnum"; } + +spinbutton:not(.vertical) { padding: 0; border-spacing: 0; } + +.osd spinbutton:not(.vertical) > text, spinbutton:not(.vertical) > text { min-width: 28px; margin: 0; background: none; background-color: transparent; border: none; border-radius: 0; box-shadow: none; padding: 6px; } + +.osd spinbutton:not(.vertical) > text:backdrop:disabled, spinbutton:not(.vertical) > text:backdrop:disabled { background-color: transparent; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat), spinbutton:not(.vertical) > button.image-button.down:not(.flat) { min-height: 16px; margin: 0; padding-bottom: 0; padding-top: 0; color: #414141; background-image: none; border-style: none none none solid; border-color: rgba(195, 198, 201, 0.3); border-radius: 0; box-shadow: none; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { color: #2c2c2c; background-color: #dedfe1; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { color: rgba(140, 140, 141, 0.3); background-color: transparent; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):active, spinbutton:not(.vertical) > button.image-button.down:not(.flat):active { background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 0px 0px 0; } + +spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 0px 0 0 0px; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat) { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #eeeeec; border-style: none none none solid; border-color: rgba(0, 0, 0, 0.4); border-radius: 0; box-shadow: none; -gtk-icon-shadow: 0 1px black; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl), .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl) { border-style: none solid none none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):hover, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #eeeeec; border-color: rgba(0, 0, 0, 0.5); background-color: rgba(27, 27, 27, 0.7); -gtk-icon-shadow: 0 1px black; box-shadow: none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):disabled, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; color: #919190; border-color: rgba(0, 0, 0, 0.5); -gtk-icon-shadow: none; box-shadow: none; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(ltr):last-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(ltr):last-child { border-radius: 0 0px 0px 0; } + +.osd spinbutton:not(.vertical) > button.image-button.up:not(.flat):dir(rtl):first-child, .osd spinbutton:not(.vertical) > button.image-button.down:not(.flat):dir(rtl):first-child { border-radius: 0px 0 0 0px; } + +spinbutton.vertical:disabled { color: #8c8c8d; } + +spinbutton.vertical:drop(active) { border-color: transparent; box-shadow: none; } + +spinbutton.vertical > text { min-height: 32px; min-width: 32px; padding: 0; border-radius: 0; } + +spinbutton.vertical > text > block-cursor { color: #ffffff; background-color: black; } + +spinbutton.vertical > button { min-height: 32px; min-width: 32px; padding: 0; } + +spinbutton.vertical > button.up { border-bottom-style: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + +spinbutton.vertical > button.down { border-top-style: none; border-top-left-radius: 0; border-top-right-radius: 0; } + +.osd spinbutton.vertical > button:first-child { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.osd spinbutton.vertical > button:first-child:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; } + +.osd spinbutton.vertical > button:first-child:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +.osd spinbutton.vertical > button:first-child:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +treeview spinbutton:not(.vertical) { min-height: 0; border-style: none; border-radius: 0; } + +treeview spinbutton:not(.vertical) > text { min-height: 0; padding: 1px 2px; } + +dropdown > popover.menu.background > contents { padding: 0; } + +dropdown > button > box { border-spacing: 6px; } + +dropdown arrow, combobox arrow { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); min-height: 16px; min-width: 16px; } + +dropdown > popover.menu > contents modelbutton, combobox > popover.menu > contents modelbutton { padding-left: 9px; padding-right: 9px; } + +dropdown:drop(active), combobox:drop(active) { box-shadow: none; } + +dropdown popover, combobox popover { margin-top: 6px; padding: 0; } + +dropdown popover listview, combobox popover listview { margin: 8px 0; } + +dropdown popover listview > row, combobox popover listview > row { padding: 8px; } + +dropdown popover listview > row:selected, combobox popover listview > row:selected { outline-color: rgba(255, 255, 255, 0.8); color: black; background-color: #dbdddf; } + +dropdown popover .dropdown-searchbar, combobox popover .dropdown-searchbar { padding: 6px; border-bottom: 1px solid #c3c6c9; } + +searchbar > revealer > box, .toolbar, toolbar { padding: 4px 3px 3px 4px; border-spacing: 4px; background-color: #ebeced; } + +.osd .toolbar, .osd toolbar { background-color: transparent; } + +.toolbar.osd, toolbar.osd { padding: 13px; border: none; border-radius: 0px; background-color: rgba(53, 53, 53, 0.7); } + +.toolbar.osd.left, .toolbar.osd.right, .toolbar.osd.top, .toolbar.osd.bottom, toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom { border-radius: 0; } + +.toolbar.horizontal > separator, toolbar.horizontal > separator { margin: 4px 0; } + +.toolbar.vertical > separator, toolbar.vertical > separator { margin: 0 4px; } + +searchbar > revealer > box { padding: 6px; border-spacing: 6px; border-width: 0 0 1px; } + +searchbar > revealer > box { border-style: solid; border-color: #c3c6c9; background-color: #dfe1e2; } + +searchbar > revealer > box:backdrop { border-color: #cbcdd0; background-color: #e0e1e3; box-shadow: none; transition: none; } + +infobar > revealer > box { padding: 8px; border-spacing: 12px; } + +infobar.action:hover > revealer > box { background-color: #eee6dc; } + +infobar.info > revealer > box, infobar.question > revealer > box, infobar.warning > revealer > box, infobar.error > revealer > box { border-bottom: 1px solid #d0d3d5; background-color: #ebe0d5; } + +infobar .close, searchbar .close { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; min-width: 16px; min-height: 16px; padding: 4px; border-radius: 50%; } + +infobar .close:hover, searchbar .close:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +windowcontrols { border-spacing: 0px; } + +.titlebar:not(headerbar), headerbar { padding: 0 4px; min-height: 38px; border-width: 0; border-style: solid; border-color: #c3c6c9; border-radius: 0; background: #e3e4e6; box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + +.titlebar:backdrop:not(headerbar), headerbar:backdrop { background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + +.titlebar:not(headerbar) .title, headerbar .title { padding-left: 12px; padding-right: 12px; font-weight: bold; } + +.titlebar:not(headerbar) .subtitle, headerbar .subtitle { font-size: smaller; padding-left: 12px; padding-right: 12px; } + +.tiled .titlebar:not(headerbar), .tiled-top .titlebar:not(headerbar), .tiled-left .titlebar:not(headerbar), .tiled-right .titlebar:not(headerbar), .tiled-bottom .titlebar:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar, .tiled-top headerbar, .tiled-left headerbar, .tiled-right headerbar, .tiled-bottom headerbar, .maximized headerbar, .fullscreen headerbar { border-radius: 0; box-shadow: none; } + +.default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 0 4px; } + +.maximized .default-decoration.titlebar:not(headerbar), .maximized headerbar.default-decoration { box-shadow: none; } + +.default-decoration.titlebar:not(headerbar) windowcontrols button, headerbar.default-decoration windowcontrols button { min-height: 20px; min-width: 20px; } + +.default-decoration.titlebar:not(headerbar) windowcontrols menubutton, headerbar.default-decoration windowcontrols menubutton { min-height: 26px; min-width: 26px; margin: 0; padding: 0; } + +.default-decoration.titlebar:not(headerbar) windowcontrols menubutton button, headerbar.default-decoration windowcontrols menubutton button { min-height: 20px; min-width: 20px; margin: 0; padding: 4px; } + +.titlebar:not(headerbar) separator, headerbar separator, headerbar separator:backdrop { background: #e3e4e6; box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } + +.solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; } + +headerbar > windowhandle > box, headerbar > windowhandle > box > box.start, headerbar > windowhandle > box > box.end { border-spacing: 6px; } + +headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button, headerbar menubutton { margin-top: 4px; margin-bottom: 4px; } + +headerbar menubutton > button { margin-top: 0px; margin-bottom: 0px; } + +headerbar switch { margin-top: 8px; margin-bottom: 8px; } + +headerbar.titlebar headerbar:not(.titlebar) { background: none; box-shadow: none; } + +window.csd > .titlebar:not(headerbar) { padding: 0; background-color: transparent; background-image: none; border-style: none; border-color: transparent; box-shadow: none; } + +.titlebar:not(headerbar) separator { background-color: #c3c6c9; } + +window.devel headerbar.titlebar { background: #ebeced cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, linear-gradient(to right, transparent 65%, rgba(74, 144, 217, 0.2)), linear-gradient(to top, #c8cbce, #d0d3d5 3px, #e0e2e3); } + +window.devel headerbar.titlebar:backdrop { background: #ebeced cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat, image(#ebeced); } + +pathbar > button.text-button, pathbar > button.image-button, pathbar > button { padding-left: 4px; padding-right: 4px; } + +pathbar > button.text-button.image-button label { padding-left: 0; padding-right: 0; } + +pathbar > button.text-button.image-button label:last-child, pathbar > button label:last-child { padding-right: 8px; } + +pathbar > button.text-button.image-button label:first-child, pathbar > button label:first-child { padding-left: 8px; } + +pathbar > button image { padding-left: 4px; padding-right: 4px; } + +pathbar > button.slider-button { padding-left: 0; padding-right: 0; } + +columnview.view, treeview.view { border-left-color: #cfd1d4; border-top-color: #cfd1d4; } + +columnview.view, treeview.view { outline: 0 solid transparent; outline-offset: 4px; } + +columnview.view:focus:focus-visible, treeview.view:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected { border-radius: 0; outline-color: rgba(255, 255, 255, 0.8); } + +columnview.view:disabled, treeview.view:disabled { color: #8c8c8d; } + +columnview.view:disabled:selected, treeview.view:disabled:selected { color: #92bce8; } + +columnview.view:disabled:selected:backdrop, treeview.view:disabled:selected:backdrop { color: #80b1e4; } + +columnview.view.separator, treeview.view.separator { min-height: 2px; color: #cfd1d4; } + +columnview.view:backdrop, treeview.view:backdrop { border-left-color: #d5d7d9; border-top: #d5d7d9; } + +columnview.view:drop(active), treeview.view:drop(active) { box-shadow: none; } + +columnview.view > dndtarget:drop(active), treeview.view > dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #256ab1; } + +columnview.view > dndtarget.after:drop(active), treeview.view > dndtarget.after:drop(active) { border-top-style: none; } + +columnview.view > dndtarget.before:drop(active), treeview.view > dndtarget.before:drop(active) { border-bottom-style: none; } + +columnview.view.expander, treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #4d4d4d; } + +columnview.view.expander:dir(rtl), treeview.view.expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +columnview.view.expander:hover, treeview.view.expander:hover { color: black; } + +columnview.view.expander:selected, treeview.view.expander:selected { color: #c9def4; } + +columnview.view.expander:selected:hover, treeview.view.expander:selected:hover { color: #ffffff; } + +columnview.view.expander:checked, treeview.view.expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +columnview.view.progressbar, treeview.view.progressbar { color: #ffffff; background-color: #4a90d9; background-image: image(#4a90d9); box-shadow: none; } + +columnview.view.progressbar:selected:focus, columnview.view.progressbar:selected, treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected { color: #4a90d9; background-image: image(#ffffff); } + +columnview.view.progressbar:selected:focus:backdrop, columnview.view.progressbar:selected:backdrop, treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop { color: #4a90d9; background-color: #fcfcfc; } + +columnview.view.trough, treeview.view.trough { background-color: rgba(44, 44, 44, 0.1); } + +columnview.view.trough:selected:focus, columnview.view.trough:selected, treeview.view.trough:selected:focus, treeview.view.trough:selected { background-color: rgba(255, 255, 255, 0.3); } + +columnview.view > header > button, treeview.view > header > button { color: #969696; background-color: #ffffff; font-weight: bold; text-shadow: none; box-shadow: none; } + +columnview.view > header > button:hover, treeview.view > header > button:hover { color: #616161; box-shadow: none; transition: none; } + +columnview.view > header > button:active, treeview.view > header > button:active { color: #2c2c2c; transition: none; } + +columnview.view button.dnd:active, columnview.view button.dnd:selected, columnview.view button.dnd:hover, columnview.view button.dnd, columnview.view header.button.dnd:active, columnview.view header.button.dnd:selected, columnview.view header.button.dnd:hover, columnview.view header.button.dnd, treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { padding: 0 6px; color: #ffffff; background-image: none; background-color: #4a90d9; border-style: none; border-radius: 0; box-shadow: inset 0 0 0 1px #ffffff; text-shadow: none; transition: none; } + +columnview.view acceleditor > label, treeview.view acceleditor > label { background-color: #4a90d9; } + +columnview.view > header > button, treeview.view > header > button, columnview.view > header > button:hover, treeview.view > header > button:hover, columnview.view > header > button:active, treeview.view > header > button:active { padding: 0 6px; background-image: none; border-style: none none solid solid; border-color: #cfd1d4; border-radius: 0; text-shadow: none; } + +columnview.view > header > button:disabled, treeview.view > header > button:disabled { border-color: #ebeced; background-image: none; } + +columnview.view > header > button:last-child, treeview.view > header > button:last-child { border-right-style: none; } + +popover.background { background-color: transparent; font: initial; } + +popover.background > arrow, popover.background > contents { background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.23); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } + +popover.background:backdrop { background-color: transparent; } + +popover.background > contents { padding: 8px; border-radius: 0px; } + +popover.background > contents > list, popover.background > contents > .view, popover.background > contents > iconview, popover.background > contents > toolbar { border-style: none; background-color: transparent; } + +popover.background > contents separator { background-color: #cfd1d4; margin: 3px; } + +popover.background > contents list separator { margin: 0; } + +.osd popover.background, popover.background.touch-selection, popover.background.magnifier { background-color: transparent; } + +.osd popover.background > arrow, .osd popover.background > contents, popover.background.touch-selection > arrow, popover.background.touch-selection > contents, popover.background.magnifier > arrow, popover.background.magnifier > contents { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } + +magnifier { background-color: #ffffff; } + +popover.menu { padding: 0; } + +popover.menu box.inline-buttons { padding: 0 8px; } + +popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; transition: none; } + +popover.menu box.inline-buttons button.image-button.model:selected { background: image(#dbdddf); } + +popover.menu box.circular-buttons { padding: 8px 8px 4px; } + +popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; } + +popover.menu box.circular-buttons button.circular.image-button.model:focus { background-color: #dbdddf; border-color: #dbdddf; } + +popover.menu > arrow, popover.menu.background > contents { background-color: #ffffff; padding: 0px; } + +popover.menu.background separator { margin: 6px 0; } + +popover.menu accelerator { color: alpha(currentColor,0.55); } + +popover.menu accelerator:dir(ltr) { margin-left: 8px; } + +popover.menu accelerator:dir(rtl) { margin-right: 8px; } + +popover.menu check, popover.menu radio { transform: scale(0.8); border-width: 1.2px; border-color: transparent; box-shadow: none; background-image: image(transparent); color: black; } + +popover.menu check:hover, popover.menu radio:hover { transform: scale(0.8); border-width: 1.2px; color: #ffffff; box-shadow: none; background-image: image(transparent); } + +popover.menu check:active, popover.menu radio:active { transform: scale(0.8); border-width: 1.2px; color: black; box-shadow: none; background-image: image(transparent); } + +popover.menu radio:active { border-color: rgba(195, 198, 201, 0.5); } + +popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: -2px; margin-right: 6px; } + +popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 6px; margin-right: -2px; } + +popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 8px; border-radius: 0; } + +popover.menu modelbutton:selected { color: #ffffff; } + +popover.menu modelbutton:selected:active { color: #ffffff; } + +popover.menu label.title { font-weight: bold; padding: 4px 28px; } + +menubar { padding: 0px; } + +menubar > item { min-height: 16px; padding: 2px 8px; } + +menubar > item:selected { background-color: #4a90d9; color: #ffffff; border-radius: 0; } + +menubar > item:disabled { color: #8c8c8d; box-shadow: none; } + +menubar > item popover.menu.background > contents { padding: 0; } + +menubar > item popover.menu popover.menu { padding: 0 0 4px 0; } + +menubar > item popover.menu.background popover.menu.background > contents { margin: 0; border-radius: 0; } + +notebook > header > tabs > tab:checked { outline: 0 solid transparent; outline-offset: 4px; } + +notebook:focus:focus-visible > header > tabs > tab:checked { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +notebook > header { padding: 0; border-width: 0; background-color: #cfd1d4; } + +notebook > header > tabs { margin: 0; } + +notebook > header.top { border-bottom-style: solid; } + +notebook > header.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -3px #b5b9bd; } + +notebook > header.top > tabs > tab:checked { box-shadow: inset 0 -3px #4a90d9; } + +notebook > header.bottom { border-top-style: solid; } + +notebook > header.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 3px #b5b9bd; } + +notebook > header.bottom > tabs > tab:checked { box-shadow: inset 0 3px #4a90d9; } + +notebook > header.left { border-right-style: solid; } + +notebook > header.left > tabs > tab:hover:not(:checked) { box-shadow: inset -3px 0 #b5b9bd; } + +notebook > header.left > tabs > tab:checked { box-shadow: inset -3px 0 #4a90d9; } + +notebook > header.right { border-left-style: solid; } + +notebook > header.right > tabs > tab:hover:not(:checked) { box-shadow: inset 3px 0 #b5b9bd; } + +notebook > header.right > tabs > tab:checked { box-shadow: inset 3px 0 #4a90d9; } + +notebook > header.top > tabs > arrow { border-top-style: none; } + +notebook > header.bottom > tabs > arrow { border-bottom-style: none; } + +notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow { margin-left: -5px; margin-right: -5px; padding-left: 4px; padding-right: 4px; } + +notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + +notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +notebook > header.left > tabs > arrow { border-left-style: none; } + +notebook > header.right > tabs > arrow { border-right-style: none; } + +notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow { margin-top: -5px; margin-bottom: -5px; padding-top: 4px; padding-bottom: 4px; } + +notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + +notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +notebook > header > tabs > arrow { min-height: 16px; min-width: 16px; border-radius: 0; } + +notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) { background-clip: padding-box; background-image: none; background-color: rgba(255, 255, 255, 0.3); border-color: transparent; box-shadow: none; } + +notebook > header > tabs > arrow:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +notebook > header > tabs > tab { min-height: 24px; min-width: 24px; padding: 0px 10px; color: #2c2c2c; font-weight: normal; border-width: 1px; border-color: transparent; } + +notebook > header > tabs > tab:hover { color: #5c5c5d; background-color: alpha(currentColor,0.06); } + +notebook > header > tabs > tab:not(:checked) { outline-color: transparent; } + +notebook > header > tabs > tab:checked { color: #2c2c2c; } + +notebook > header > tabs > tab.reorderable-page:checked { border-color: rgba(195, 198, 201, 0.5); background-color: rgba(235, 236, 237, 0.5); } + +notebook > header > tabs > tab.reorderable-page:checked:hover { background-color: rgba(235, 236, 237, 0.7); } + +notebook > header > tabs > tab button.flat { color: alpha(currentColor,0.3); padding: 0; margin-top: 4px; margin-bottom: 4px; min-width: 20px; min-height: 20px; } + +notebook > header > tabs > tab button.flat:hover { color: currentColor; } + +notebook > header > tabs > tab button.flat:last-child { margin-left: 4px; margin-right: -4px; } + +notebook > header > tabs > tab button.flat:first-child { margin-left: -4px; margin-right: 4px; } + +notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 0px; padding-right: 0px; } + +notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 3px; margin-right: 3px; } + +notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: -1px; } + +notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { margin-right: -1px; } + +notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 0px; margin-right: 0px; } + +notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab.reorderable-page { border-style: none solid; } + +notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 0px; padding-bottom: 0px; } + +notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; } + +notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: -1px; } + +notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { margin-bottom: -1px; } + +notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 4px; margin-bottom: 4px; } + +notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab.reorderable-page { border-style: solid none; } + +notebook > header.top > tabs > tab { padding-bottom: 4px; } + +notebook > header.bottom > tabs > tab { padding-top: 4px; } + +notebook > stack:not(:only-child) { background-color: #ffffff; } + +scrollbar { background-color: #c5c6c6; transition: 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +scrollbar.top { border-bottom: 1px solid #c3c6c9; } + +scrollbar.bottom { border-top: 1px solid #c3c6c9; } + +scrollbar.left { border-right: 1px solid #c3c6c9; } + +scrollbar.right { border-left: 1px solid #c3c6c9; } + +scrollbar > range > trough > slider { min-width: 8px; min-height: 8px; margin: -1px; border: 4px solid transparent; border-radius: 0; background-clip: padding-box; background-color: #787979; transition: background-color 250ms; } + +scrollbar > range > trough > slider:hover { background-color: #525253; } + +scrollbar > range > trough > slider:hover:active { background-color: #2a76c6; } + +scrollbar > range > trough > slider:disabled { background-color: transparent; } + +scrollbar > range.fine-tune > trough > slider { min-width: 6px; min-height: 6px; } + +scrollbar > range.fine-tune.horizontal > trough > slider { border-width: 5px 4px; } + +scrollbar > range.fine-tune.vertical > trough > slider { border-width: 4px 5px; } + +scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; } + +scrollbar.overlay-indicator:not(.dragging):not(.hovering) > range > trough > slider { margin: 0; min-width: 4px; min-height: 4px; background-color: #2c2c2c; border: 1px solid white; } + +scrollbar.overlay-indicator.horizontal:not(.dragging):not(.hovering) > range > trough > slider { margin: 0 2px; min-width: 40px; } + +scrollbar.overlay-indicator.vertical:not(.dragging):not(.hovering) > range > trough > slider { margin: 2px 0; min-height: 40px; } + +scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; } + +scrollbar.horizontal > range > trough > slider { min-width: 40px; } + +scrollbar.vertical > range > trough > slider { min-height: 40px; } + +treeview ~ scrollbar.vertical { border-top: 1px solid #c3c6c9; margin-top: -1px; } + +.view.content-view.check:not(list), iconview.content-view.check:not(list), .content-view .tile check:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:hover:not(list), iconview.content-view.check:hover:not(list), .content-view .tile check:hover:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:active:not(list), iconview.content-view.check:active:not(list), .content-view .tile check:active:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:backdrop:not(list), iconview.content-view.check:backdrop:not(list), .content-view .tile check:backdrop:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: transparent; background-color: #929292; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: none; -gtk-icon-shadow: none; } + +.view.content-view.check:checked:not(list), iconview.content-view.check:checked:not(list), .content-view .tile check:checked:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:checked:hover:not(list), iconview.content-view.check:checked:hover:not(list), .content-view .tile check:checked:hover:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:checked:active:not(list), iconview.content-view.check:checked:active:not(list), .content-view .tile check:checked:active:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: #eeeeec; background-color: #4a90d9; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +.view.content-view.check:backdrop:checked:not(list), iconview.content-view.check:backdrop:checked:not(list), .content-view .tile check:backdrop:checked:not(list) { margin: 4px; min-width: 32px; min-height: 32px; color: rgba(238, 238, 236, 0.8); background-color: #929292; border-radius: 0px; background-image: none; transition: 150ms; box-shadow: none; border-width: 0; -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); -gtk-icon-shadow: none; } + +checkbutton { border-spacing: 4px; border-radius: 0px; transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +checkbutton { outline: 0 solid transparent; outline-offset: 4px; } + +checkbutton:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +checkbutton.text-button { padding: 4px; } + +check, radio { min-height: 14px; min-width: 14px; border: 1px solid; -gtk-icon-source: none; } + +check, radio { background-clip: padding-box; background-image: linear-gradient(to bottom, white, white); border-color: #9aa0a5; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:hover, radio:hover { background-image: image(#f2f2f2); } + +check:active, radio:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); background-image: image(#d9d9d9); } + +check:disabled, radio:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +check:checked, radio:checked { background-clip: border-box; background-image: linear-gradient(to bottom, #4a90d9, #4a90d9); border-color: #2a76c6; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:checked:hover, radio:checked:hover { background-image: linear-gradient(to bottom, #63a0de, #63a0de); } + +check:checked:active, radio:checked:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); background-image: image(#3583d5); } + +check:checked:disabled, radio:checked:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +check:indeterminate, radio:indeterminate { background-clip: border-box; background-image: linear-gradient(to bottom, #4a90d9, #4a90d9); border-color: #2a76c6; box-shadow: 0 1px rgba(0, 0, 0, 0.05); color: #ffffff; } + +check:indeterminate:hover, radio:indeterminate:hover { background-image: linear-gradient(to bottom, #63a0de, #63a0de); } + +check:indeterminate:active, radio:indeterminate:active { box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.2); background-image: image(#3583d5); } + +check:indeterminate:disabled, radio:indeterminate:disabled { box-shadow: none; color: rgba(255, 255, 255, 0.7); } + +row:selected check, row:selected radio { border-color: #2a76c6; } + +.osd check, .osd radio { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.osd check:hover, .osd radio:hover { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; } + +.osd check:active, .osd radio:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; } + +.osd check:disabled, .osd radio:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; } + +check { border-radius: 0px; -gtk-icon-size: 14px; } + +check:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")), -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); } + +check:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } + +treeview.view radio:selected:focus, treeview.view radio:selected, radio { border-radius: 100%; -gtk-icon-size: 14px; } + +treeview.view radio:checked:selected, radio:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")), -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); } + +treeview.view radio:indeterminate:selected, radio:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")), -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); } + +treeview.view check:selected:focus, treeview.view check:selected, treeview.view radio:selected:focus, treeview.view radio:selected { color: #ffffff; border-color: #256ab1; } + +progressbar > trough, scale > trough > fill, scale > trough { border: 1px solid #cfd1d4; border-radius: 0px; background-color: #cfd1d4; } + +headerbar progressbar > trough, headerbar scale > trough > fill, headerbar scale > trough { background-color: #b9bcc1; } + +progressbar > trough:disabled, scale > trough > fill:disabled, scale > trough:disabled { background-color: #f3f4f4; border-color: #cbcdd0; } + +row:selected progressbar > trough, row:selected scale > trough > fill, row:selected scale > trough { outline-color: rgba(255, 255, 255, 0.8); border-color: #256ab1; } + +.osd progressbar > trough, .osd scale > trough > fill, .osd scale > trough { border-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); } + +.osd progressbar > trough:disabled, .osd scale > trough > fill:disabled, .osd scale > trough:disabled { background-color: rgba(71, 71, 71, 0.5); } + +progressbar > trough > progress, scale > trough > highlight { border: 1px solid #4a90d9; border-radius: 0px; background-color: #4a90d9; } + +progressbar > trough > progress:disabled, scale > trough > highlight:disabled { background-color: transparent; border-color: transparent; } + +row:selected progressbar > trough > progress, row:selected scale > trough > highlight { border-color: #256ab1; } + +.osd progressbar > trough > progress, .osd scale > trough > highlight { border-color: rgba(0, 0, 0, 0.7); } + +.osd progressbar > trough > progress:disabled, .osd scale > trough > highlight:disabled { border-color: transparent; } + +scale { min-height: 10px; min-width: 10px; padding: 12px; } + +scale > trough { outline: 0 solid transparent; outline-offset: 16px; } + +scale:focus:focus-visible > trough { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: 10px; } + +scale > trough { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +scale > trough > fill, scale > trough > highlight { margin: -1px; } + +scale > trough > slider { min-height: 18px; min-width: 18px; margin: -9px; } + +scale.fine-tune.horizontal { padding-top: 9px; padding-bottom: 9px; min-height: 16px; } + +scale.fine-tune.vertical { padding-left: 9px; padding-right: 9px; min-width: 16px; } + +scale.fine-tune > trough > slider { margin: -6px; } + +scale.fine-tune > trough > fill, scale.fine-tune > trough > highlight, scale.fine-tune > trough { border-radius: 5px; } + +scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } + +.osd scale > trough > fill { background-color: rgba(91, 91, 90, 0.775); } + +.osd scale > trough > fill:disabled { border-color: transparent; background-color: transparent; } + +scale > trough > slider { color: #2c2c2c; outline-color: rgba(74, 144, 217, 0.5); border-color: #a3a7ac; background-color: #fefefe; border-width: 1px; border-style: solid; border-radius: 100%; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-property: background, border, box-shadow; } + +scale > trough > slider:hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +scale > trough > slider:active { border-color: #256ab1; } + +scale > trough > slider:disabled { color: #8c8c8d; border-color: #cbcdd0; background-image: image(#f3f4f4); } + +row:selected scale > trough > slider:disabled, row:selected scale > trough > slider { border-color: #256ab1; } + +.osd scale > trough > slider { color: #eeeeec; outline-color: rgba(74, 144, 217, 0.5); border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(53, 53, 53, 0.7)); background-clip: padding-box; border-color: rgba(0, 0, 0, 0.7); background-color: #353535; } + +.osd scale > trough > slider:hover { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(27, 27, 27, 0.7)); background-clip: padding-box; background-color: #353535; } + +.osd scale > trough > slider:active { color: white; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(2, 2, 2, 0.7)); background-clip: padding-box; box-shadow: none; background-color: #353535; } + +.osd scale > trough > slider:disabled { color: #919190; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(71, 71, 71, 0.5)); background-clip: padding-box; background-color: #353535; } + +scale > value { color: alpha(currentColor,0.55); font-feature-settings: "tnum"; } + +scale.horizontal > marks { color: alpha(currentColor,0.55); } + +scale.horizontal > marks.top { margin-bottom: 6px; } + +scale.horizontal > marks.bottom { margin-top: 6px; } + +scale.horizontal > marks indicator { background-color: currentColor; min-height: 6px; min-width: 1px; } + +scale.horizontal > value.left { margin-right: 9px; } + +scale.horizontal > value.right { margin-left: 9px; } + +scale.horizontal.fine-tune > marks.top { margin-top: 3px; } + +scale.horizontal.fine-tune > marks.bottom { margin-bottom: 3px; } + +scale.horizontal.fine-tune > marks indicator { min-height: 3px; } + +scale.vertical > marks { color: alpha(currentColor,0.55); } + +scale.vertical > marks.top { margin-right: 6px; } + +scale.vertical > marks.bottom { margin-left: 6px; } + +scale.vertical > marks indicator { background-color: currentColor; min-height: 1px; min-width: 6px; } + +scale.vertical > value.top { margin-bottom: 9px; } + +scale.vertical > value.bottom { margin-top: 9px; } + +scale.vertical.fine-tune > marks.top { margin-left: 3px; } + +scale.vertical.fine-tune > marks.bottom { margin-right: 3px; } + +scale.vertical.fine-tune > marks indicator { min-height: 3px; } + +scale.color { min-height: 0; min-width: 0; } + +scale.color > trough { background-image: image(#c3c6c9); background-repeat: no-repeat; } + +scale.color.horizontal { padding: 0 0 15px 0; } + +scale.color.horizontal > trough { padding-bottom: 4px; background-position: 0 -3px; border-top-left-radius: 0; border-top-right-radius: 0; } + +scale.color.horizontal > trough > slider:dir(ltr):hover, scale.color.horizontal > trough > slider:dir(ltr):backdrop, scale.color.horizontal > trough > slider:dir(ltr):disabled, scale.color.horizontal > trough > slider:dir(ltr):backdrop:disabled, scale.color.horizontal > trough > slider:dir(ltr), scale.color.horizontal > trough > slider:dir(rtl):hover, scale.color.horizontal > trough > slider:dir(rtl):backdrop, scale.color.horizontal > trough > slider:dir(rtl):disabled, scale.color.horizontal > trough > slider:dir(rtl):backdrop:disabled, scale.color.horizontal > trough > slider:dir(rtl) { margin-bottom: -15px; margin-top: 6px; } + +scale.color.vertical:dir(ltr) { padding: 0 0 0 15px; } + +scale.color.vertical:dir(ltr) > trough { padding-left: 4px; background-position: 3px 0; border-bottom-right-radius: 0; border-top-right-radius: 0; } + +scale.color.vertical:dir(ltr) > trough > slider:hover, scale.color.vertical:dir(ltr) > trough > slider:backdrop, scale.color.vertical:dir(ltr) > trough > slider:disabled, scale.color.vertical:dir(ltr) > trough > slider:backdrop:disabled, scale.color.vertical:dir(ltr) > trough > slider { margin-left: -15px; margin-right: 6px; } + +scale.color.vertical:dir(rtl) { padding: 0 15px 0 0; } + +scale.color.vertical:dir(rtl) > trough { padding-right: 4px; background-position: -3px 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } + +scale.color.vertical:dir(rtl) > trough > slider:hover, scale.color.vertical:dir(rtl) > trough > slider:backdrop, scale.color.vertical:dir(rtl) > trough > slider:disabled, scale.color.vertical:dir(rtl) > trough > slider:backdrop:disabled, scale.color.vertical:dir(rtl) > trough > slider { margin-right: -15px; margin-left: 6px; } + +scale.color.fine-tune.horizontal:dir(ltr), scale.color.fine-tune.horizontal:dir(rtl) { padding: 0 0 12px 0; } + +scale.color.fine-tune.horizontal:dir(ltr) > trough, scale.color.fine-tune.horizontal:dir(rtl) > trough { padding-bottom: 7px; background-position: 0 -6px; } + +scale.color.fine-tune.horizontal:dir(ltr) > trough > slider, scale.color.fine-tune.horizontal:dir(rtl) > trough > slider { margin-bottom: -15px; margin-top: 6px; } + +scale.color.fine-tune.vertical:dir(ltr) { padding: 0 0 0 12px; } + +scale.color.fine-tune.vertical:dir(ltr) > trough { padding-left: 7px; background-position: 6px 0; } + +scale.color.fine-tune.vertical:dir(ltr) > trough > slider { margin-left: -15px; margin-right: 6px; } + +scale.color.fine-tune.vertical:dir(rtl) { padding: 0 12px 0 0; } + +scale.color.fine-tune.vertical:dir(rtl) > trough { padding-right: 7px; background-position: -6px 0; } + +scale.color.fine-tune.vertical:dir(rtl) > trough > slider { margin-right: -15px; margin-left: 6px; } + +progressbar { font-size: smaller; color: rgba(44, 44, 44, 0.4); font-feature-settings: "tnum"; } + +progressbar.horizontal > trough { min-width: 150px; } + +progressbar.horizontal > trough, progressbar.horizontal > trough > progress { min-height: 2px; } + +progressbar.vertical > trough { min-height: 80px; } + +progressbar.vertical > trough, progressbar.vertical > trough > progress { min-width: 2px; } + +progressbar.horizontal > trough > progress { margin: 0 -1px; } + +progressbar.vertical > trough > progress { margin: -1px 0; } + +progressbar > trough > progress { border-radius: 1.5px; } + +progressbar > trough > progress:disabled { background-color: #8c8c8d; border-color: #8c8c8d; } + +progressbar > trough > progress.left { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } + +progressbar > trough > progress.right { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + +progressbar > trough > progress.top { border-top-right-radius: 5px; border-top-left-radius: 5px; } + +progressbar > trough > progress.bottom { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } + +progressbar.osd { min-width: 3px; min-height: 3px; background-color: transparent; } + +progressbar.osd > trough { border-style: none; border-radius: 0; background-color: transparent; box-shadow: none; } + +progressbar.osd > trough > progress { border-style: none; border-radius: 0; } + +progressbar > trough.empty > progress { all: unset; } + +levelbar.horizontal trough > block { min-height: 9px; border-radius: 5px; } + +levelbar.horizontal trough > block:dir(rtl) { border-radius: 0 5px 5px 0; } + +levelbar.horizontal trough > block:dir(ltr) { border-radius: 5px 0 0 5px; } + +levelbar.horizontal trough > block.empty, levelbar.horizontal trough > block.full { border-radius: 5px; } + +levelbar.horizontal.discrete trough > block { min-height: 2px; margin: 1px; min-width: 24px; border-radius: 0; } + +levelbar.horizontal.discrete trough > block:first-child { border-radius: 2px 0 0 2px; } + +levelbar.horizontal.discrete trough > block:last-child { border-radius: 0 2px 2px 0; } + +levelbar.vertical trough > block { min-width: 9px; border-radius: 5px; } + +levelbar.vertical.discrete > trough > block { min-width: 2px; margin: 1px 0; min-height: 32px; } + +levelbar > trough { padding: 0; } + +levelbar > trough > block { border: 1px solid; } + +levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } + +levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #4a90d9; background-color: #4a90d9; } + +levelbar > trough > block.full { border-color: #33d17a; background-color: #33d17a; } + +levelbar > trough > block.empty { background-color: #dedfe1; border-color: #dedfe1; } + +window.dialog.print drawing { color: #2c2c2c; background: none; border: none; padding: 0; } + +window.dialog.print drawing paper { background: white; color: #2e3436; border: 1px solid #c3c6c9; } + +window.dialog.print .dialog-action-box { margin: 12px; } + +frame, .frame { border: 1px solid #c3c6c9; } + +frame { border-radius: 0px; } + +frame > label { margin: 4px; } + +actionbar > revealer > box { padding: 6px; border-spacing: 6px; border-top: 1px solid #c3c6c9; } + +scrolledwindow > overshoot.top { background-image: radial-gradient(farthest-side at top, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at top, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.bottom { background-image: radial-gradient(farthest-side at bottom, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at bottom, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.left { background-image: radial-gradient(farthest-side at left, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at left, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > overshoot.right { background-image: radial-gradient(farthest-side at right, #a8acb1 85%, rgba(168, 172, 177, 0)), radial-gradient(farthest-side at right, rgba(44, 44, 44, 0.07), rgba(44, 44, 44, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; } + +scrolledwindow > junction { background: #c3c6c9, linear-gradient(to bottom, transparent 1px, #c5c6c6 1px), linear-gradient(to right, transparent 1px, #c5c6c6 1px); } + +scrolledwindow > junction:dir(rtl) { background: #c3c6c9, linear-gradient(to bottom, transparent 1px, #c5c6c6 1px), linear-gradient(to left, transparent 1px, #c5c6c6 1px); } + +separator { background: #d0d3d5; min-width: 1px; min-height: 1px; } + +listview, list { color: black; background-color: #ffffff; border-color: #c3c6c9; } + +listview:backdrop, list:backdrop { color: #323232; background-color: #fcfcfc; border-color: #cbcdd0; } + +listview > row, list > row { padding: 2px; } + +listview > row.expander, list > row.expander { padding: 0px; } + +listview > row.expander .row-header, list > row.expander .row-header { padding: 2px; } + +listview.horizontal row.separator, listview.separators.horizontal > row:not(.separator), list.horizontal row.separator, list.separators.horizontal > row:not(.separator) { border-left: 1px solid #cfd1d4; } + +listview:not(.horizontal) row.separator, listview.separators:not(.horizontal) > row:not(.separator), list:not(.horizontal) row.separator, list.separators:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid #cfd1d4; } + +row { outline: 0 solid transparent; outline-offset: 4px; } + +row:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +row.activatable.has-open-popup, row.activatable:hover { background-color: rgba(44, 44, 44, 0.05); } + +row.activatable:active { box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); } + +row.activatable:selected:active { box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); } + +row.activatable.has-open-popup:selected, row.activatable:selected:hover { background-color: #4786c8; } + +row:selected { outline-color: rgba(255, 255, 255, 0.8); } + +columnview > listview > row { padding: 0; } + +columnview > listview > row > cell { padding: 8px 6px; } + +columnview > listview > row > cell:not(:first-child) { border-left: 1px solid transparent; } + +columnview.column-separators > listview > row > cell { border-left-color: #cfd1d4; } + +columnview.data-table > listview > row > cell { padding-top: 2px; padding-bottom: 2px; } + +treeexpander { border-spacing: 4px; } + +columnview row:not(:selected) cell editablelabel:not(.editing):focus-within { outline: 2px solid rgba(74, 144, 217, 0.5); } + +columnview row:not(:selected) cell editablelabel.editing:focus-within { outline: 2px solid #4a90d9; } + +columnview row:not(:selected) cell editablelabel.editing text selection { color: #ffffff; background-color: #4a90d9; } + +.rich-list > row { padding: 8px 12px; min-height: 32px; } + +.rich-list > row > box { border-spacing: 12px; } + +.app-notification { padding: 10px; border-spacing: 10px; border-radius: 0 0 5px 5px; background-color: rgba(53, 53, 53, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px); background-clip: padding-box; } + +.app-notification border { border: none; } + +expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } + +expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); } + +expander:disabled { color: #8c8c8d; } + +expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + +expander-widget > box > title { outline: 0 solid transparent; outline-offset: 4px; } + +expander-widget:focus:focus-visible > box > title { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: -2px; } + +expander-widget > box > title { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 0px; } + +expander-widget > box > title:hover > expander { color: #797979; } + +.navigation-sidebar:not(decoration):not(window):drop(active):focus, .navigation-sidebar:not(decoration):not(window):drop(active), placessidebar:not(decoration):not(window):drop(active):focus, placessidebar:not(decoration):not(window):drop(active), stackswitcher:not(decoration):not(window):drop(active):focus, stackswitcher:not(decoration):not(window):drop(active), expander-widget:not(decoration):not(window):drop(active):focus, expander-widget:not(decoration):not(window):drop(active) { box-shadow: none; } + +calendar { color: black; border: 1px solid #c3c6c9; } + +calendar > header { border-bottom: 1px solid #c3c6c9; } + +calendar > header > button { border: none; box-shadow: none; background: none; border-radius: 0; } + +calendar > header > button:backdrop { background: none; } + +calendar > grid > label.today { box-shadow: inset 0px -2px #c3c6c9; } + +calendar > grid > label.today:selected { box-shadow: none; } + +calendar > grid > label:focus { outline-color: rgba(74, 144, 217, 0.5); outline-offset: -2px; outline-width: 2px; outline-style: solid; } + +calendar > grid > label.day-number { padding: 4px; } + +calendar > grid > label.day-number:selected { border-radius: 0px; } + +calendar > grid > label.day-number.other-month { color: alpha(currentColor,0.3); } + +window.dialog.message .titlebar { min-height: 20px; background-image: none; background-color: #ebeced; border-style: none; border-top-left-radius: 0px; border-top-right-radius: 0px; } + +window.dialog.message box.dialog-vbox.vertical { border-spacing: 10px; } + +window.dialog.message label.title { font-weight: 800; font-size: 15pt; } + +window.dialog.message.csd.background { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } + +window.dialog.message.csd .dialog-action-area button { padding: 10px 14px; border-radius: 0; border-left-style: solid; border-right-style: none; border-bottom-style: none; } + +window.dialog.message.csd .dialog-action-area button:first-child { border-left-style: none; border-bottom-left-radius: 0px; } + +window.dialog.message.csd .dialog-action-area button:last-child { border-bottom-right-radius: 0px; } + +filechooser .dialog-action-box { border-top: 1px solid #c3c6c9; } + +filechooser #pathbarbox { border-bottom: 1px solid #ebeced; } + +filechooserbutton > button > box { border-spacing: 6px; } + +filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; } + +.sidebar { background-color: #f5f6f6; } + +.sidebar:not(separator):dir(ltr), .sidebar.left:not(separator), .sidebar.left:not(separator):dir(rtl) { border-right: 1px solid #c3c6c9; border-left-style: none; } + +.sidebar:not(separator):dir(rtl), .sidebar.right:not(separator) { border-left: 1px solid #c3c6c9; border-right-style: none; } + +.sidebar listview.view, .sidebar list { background-color: transparent; } + +paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar { border-style: none; } + +stacksidebar list.separators:not(.horizontal) > row:not(.separator) { border-bottom: none; } + +stacksidebar row { padding: 10px 4px; } + +stacksidebar row > label { padding-left: 6px; padding-right: 6px; } + +stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; } + +stacksidebar row:selected { background-color: #4a90d9; border-radius: 0px; color: #ffffff; } + +stacksidebar row:selected:hover:dir(ltr), stacksidebar row:selected:hover:dir(rtl) { background-color: #4a90d9; } + +stacksidebar row:focus:focus-visible { outline-width: 0; background-color: #4a90d9; color: #ffffff; } + +stacksidebar row.activatable:active, stacksidebar row.activatable:selected:active { box-shadow: none; } + +separator.sidebar { background-color: #c3c6c9; } + +.navigation-sidebar { padding: 0; } + +.navigation-sidebar > separator { margin: 0px; } + +.navigation-sidebar > row { min-height: 36px; padding: 0 8px; border-radius: 0; margin: 0; } + +.navigation-sidebar > row:hover, .navigation-sidebar > row:backdrop:hover, .navigation-sidebar > row:focus-visible:focus-within { background-color: alpha(currentColor,0.06); } + +.navigation-sidebar > row:selected { background-color: #4a90d9; color: #ffffff; } + +.navigation-sidebar > row:selected:focus-visible:focus-within { outline-width: 0; color: #ffffff; background-color: #4a90d9; } + +.navigation-sidebar > row:selected:focus-visible:focus-within:hover { background-color: #2a76c6; } + +.navigation-sidebar > row:disabled { color: #8c8c8d; } + +row image.sidebar-icon { opacity: 0.7; } + +placessidebar .navigation-sidebar > row { padding: 0; } + +placessidebar .navigation-sidebar > row > revealer { padding: 0 14px; } + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(ltr) { padding-right: 8px; } + +placessidebar .navigation-sidebar > row image.sidebar-icon:dir(rtl) { padding-left: 8px; } + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(ltr) { padding-right: 2px; } + +placessidebar .navigation-sidebar > row label.sidebar-label:dir(rtl) { padding-left: 2px; } + +button.sidebar-button { min-height: 26px; min-width: 26px; margin-top: 3px; margin-bottom: 3px; padding: 0; border-radius: 100%; } + +placessidebar .navigation-sidebar > row:selected:active { box-shadow: none; } + +placessidebar .navigation-sidebar > row.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; background-image: image(#4a90d9); background-clip: content-box; } + +placessidebar .navigation-sidebar > row.sidebar-new-bookmark-row { color: #4a90d9; } + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled) { color: #4a90d9; box-shadow: inset 0 1px #4a90d9, inset 0 -1px #4a90d9; } + +placessidebar .navigation-sidebar > row:drop(active):not(:disabled):selected { color: #ffffff; background-color: #4a90d9; } + +placesview .server-list-button > image { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-icon-transform: rotate(0turn); } + +placesview .server-list-button:checked > image { transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-icon-transform: rotate(-0.5turn); } + +placesview > actionbar > revealer > box > box { border-spacing: 6px; } + +paned > separator { min-width: 1px; min-height: 1px; -gtk-icon-source: none; border-style: none; background-color: transparent; background-image: image(#c3c6c9); background-size: 1px 1px; } + +paned > separator:selected { background-image: image(#4a90d9); } + +paned > separator.wide { min-width: 5px; min-height: 5px; background-color: #ebeced; background-image: image(#c3c6c9), image(#c3c6c9); background-size: 1px 1px, 1px 1px; } + +paned.horizontal > separator { background-repeat: repeat-y; } + +paned.horizontal > separator:dir(ltr) { margin: 0 -8px 0 0; padding: 0 8px 0 0; background-position: left; } + +paned.horizontal > separator:dir(rtl) { margin: 0 0 0 -8px; padding: 0 0 0 8px; background-position: right; } + +paned.horizontal > separator.wide { margin: 0; padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } + +paned.vertical > separator { margin: 0 0 -8px 0; padding: 0 0 8px 0; background-repeat: repeat-x; background-position: top; } + +paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } + +video { background: black; } + +video image.osd { min-width: 64px; min-height: 64px; border-radius: 32px; } + +tooltip { padding: 6px 10px; border-radius: 0px; box-shadow: none; } + +tooltip.background { background-color: rgba(0, 0, 0, 0.8); background-clip: padding-box; border: 1px solid rgba(255, 255, 255, 0.1); color: white; } + +tooltip > box { border-spacing: 6px; } + +colorswatch { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +colorswatch { outline: 0 solid transparent; outline-offset: 6px; } + +colorswatch:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 4px; outline-offset: -2px; } + +colorswatch:drop(active), colorswatch { border-style: none; } + +colorswatch.top { border-top-left-radius: 5.5px; border-top-right-radius: 5.5px; } + +colorswatch.top > overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } + +colorswatch.bottom { border-bottom-left-radius: 5.5px; border-bottom-right-radius: 5.5px; } + +colorswatch.bottom > overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } + +colorswatch.left, colorswatch:first-child:not(.top) { border-top-left-radius: 5.5px; border-bottom-left-radius: 5.5px; } + +colorswatch.left > overlay, colorswatch:first-child:not(.top) > overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } + +colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius: 5.5px; border-bottom-right-radius: 5.5px; } + +colorswatch.right > overlay, colorswatch:last-child:not(.bottom) > overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } + +colorswatch.dark > overlay { color: white; } + +colorswatch.dark.activatable:hover > overlay { border-color: rgba(0, 0, 0, 0.8); } + +colorswatch.light > overlay { color: black; } + +colorswatch.light.activatable:hover > overlay { border-color: rgba(0, 0, 0, 0.5); } + +colorswatch:drop(active) { box-shadow: none; } + +colorswatch.light:drop(active) > overlay { border-color: #4a90d9; box-shadow: inset 0 0 0 2px #2c7ed3, inset 0 0 0 1px #4a90d9; } + +colorswatch.dark:drop(active) > overlay { border-color: #4a90d9; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #4a90d9; } + +colorswatch > overlay { border: 1px solid rgba(0, 0, 0, 0.3); } + +colorswatch.activatable:hover > overlay { box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.2); } + +colorswatch#add-color-button { border-radius: 5px 0 0 5px; } + +colorswatch#add-color-button:only-child { border-radius: 5px; } + +colorswatch#add-color-button > overlay { color: #2c2c2c; outline-color: rgba(74, 144, 217, 0.5); border-color: #a3a7ac; background-color: #fefefe; } + +colorswatch#add-color-button.activatable:hover > overlay { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +colorswatch:disabled { opacity: 0.5; } + +colorswatch:disabled > overlay { border-color: rgba(0, 0, 0, 0.6); box-shadow: none; } + +row:selected colorswatch { box-shadow: 0 0 0 2px #ffffff; } + +colorswatch#editor-color-sample { border-radius: 4px; } + +colorswatch#editor-color-sample > overlay { border-radius: 4.5px; } + +plane { transition: outline-width 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + +plane { outline: 0 solid transparent; outline-offset: 6px; } + +plane:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: 2px; } + +colorchooser .popover.osd { border-radius: 5px; } + +.content-view { background-color: #d8dadc; } + +.content-view:hover { -gtk-icon-filter: brightness(1.2); } + +.content-view .tile { margin: 2px; background-color: transparent; border-radius: 0; padding: 0; } + +.content-view .tile:active, .content-view .tile:selected { background-color: transparent; } + +.content-view .tile:disabled { background-color: transparent; } + +.osd .scale-popup button.flat { border-style: none; border-radius: 5px; } + +.scale-popup button:hover { background-color: rgba(44, 44, 44, 0.1); border-radius: 5px; } + +window { border-width: 0px; } + +window.csd { box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(0, 0, 0, 0.23); margin: 0px; border-radius: 0px 0px 0 0; } + +window.csd:backdrop { box-shadow: 0 1px 4px 1px transparent, 0 1px 2px 1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); transition: none; } + +window.csd.popup { border-radius: 0px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } + +window.csd.dialog.message { border-radius: 0px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.13); } + +window.csd.solid-csd { margin: 0; padding: 0; border: solid 1px #c3c6c9; border-radius: 0; box-shadow: inset 0 0 0 3px #e3e4e6, inset 0 1px rgba(255, 255, 255, 0.3); } + +window.csd.solid-csd:backdrop { box-shadow: inset 0 0 0 3px #ebeced, inset 0 1px rgba(255, 255, 255, 0.3); } + +window.maximized, window.fullscreen, window.tiled, window.tiled-top, window.tiled-left, window.tiled-right, window.tiled-bottom { border-radius: 0; box-shadow: none; } + +.tiled window { border: 1px solid rgba(0, 0, 0, 0.2); } + +window.popup { box-shadow: none; } + +window.ssd { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); } + +tooltip.csd { border-radius: 0px; box-shadow: none; } + +.view:selected:focus, .view:selected, textview > text:selected:focus, textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, popover.menu modelbutton:selected, popover.menu modelbutton:selected:active, row:selected, calendar > grid > label.day-number:selected { background-color: #4a90d9; } + +label:selected, .view:selected:focus, .view:selected, textview > text:selected:focus, textview > text:selected, textview > text > selection:focus, textview > text > selection, iconview:selected:focus, iconview:selected, flowbox > flowboxchild:selected, gridview > child:selected, entry > text > selection, modelbutton.flat:selected, spinbutton:not(.vertical) > text > selection, spinbutton.vertical > text > text > selection, spinbutton.vertical > text > selection, columnview.view:selected:focus, columnview.view:selected, treeview.view:selected:focus, treeview.view:selected, popover.menu modelbutton:selected, popover.menu modelbutton:selected:active, row:selected, calendar > grid > label.day-number:selected { color: #ffffff; } + +label:disabled > selection, label:disabled:selected, .view:disabled:selected, textview > text:disabled:selected:focus, textview > text:disabled:selected, textview > text > selection:disabled, iconview:disabled:selected:focus, iconview:disabled:selected, flowbox > flowboxchild:disabled:selected, gridview > child:disabled:selected, entry > text > selection:disabled, modelbutton.flat:disabled:selected, spinbutton:not(.vertical) > text > selection:disabled, spinbutton.vertical > text > text > selection:disabled, spinbutton.vertical > text > selection:disabled, columnview.view:disabled:selected, treeview.view:disabled:selected, popover.menu modelbutton:disabled:selected, popover.menu modelbutton:disabled:selected:active, row:disabled:selected, calendar > grid > label.day-number:disabled:selected { color: #a5c8ec; } + +.monospace { font-family: monospace; } + +cursor-handle { background-color: transparent; background-image: none; box-shadow: none; border-style: none; } + +shortcuts-section { margin: 20px; } + +.shortcuts-search-results { margin: 20px; border-spacing: 24px; } + +shortcut { border-spacing: 6px; } + +shortcut > .keycap { min-width: 20px; min-height: 25px; margin-top: 2px; padding-bottom: 3px; padding-left: 6px; padding-right: 6px; color: #2c2c2c; background-color: #ffffff; border: 1px solid; border-color: #d7d9db; border-radius: 5px; box-shadow: inset 0 -3px #eff0f1; font-size: smaller; } + +:not(decoration):not(window):drop(active):focus, :not(decoration):not(window):drop(active) { border-color: #4a90d9; box-shadow: inset 0 0 0 1px #4a90d9; caret-color: #4a90d9; } + +stackswitcher > button.text-button { min-width: 100px; } + +stackswitcher.circular { border-spacing: 12px; } + +stackswitcher.circular > button.circular, stackswitcher.circular > button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; } + +.lowres-icon { -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } + +.icon-dropshadow { -gtk-icon-shadow: 0 1px 12px rgba(0, 0, 0, 0.05), 0 -1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.3), -1px 0 rgba(0, 0, 0, 0.1); } + +popover.emoji-picker > contents { padding: 0; } + +.emoji-searchbar { padding: 6px; border-spacing: 6px; border-bottom: 1px solid #c3c6c9; } + +.emoji-toolbar { padding: 6px; border-spacing: 6px; border-top: 1px solid #c3c6c9; } + +button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; padding: 3px 0 0; min-width: 32px; min-height: 28px; background: none; box-shadow: none; text-shadow: none; } + +button.emoji-section:hover { border-color: #c3c6c9; } + +button.emoji-section:checked { border-color: #4a90d9; } + +popover.emoji-picker emoji { font-size: x-large; padding: 6px; border-radius: 6px; } + +popover.emoji-picker emoji:focus, popover.emoji-picker emoji:hover { background: #4a90d9; } + +emoji-completion-row > box { border-spacing: 10px; padding: 2px 10px; } + +emoji-completion-row:focus, emoji-completion-row:hover { background-color: #4a90d9; color: #ffffff; } + +emoji-completion-row emoji:focus, emoji-completion-row emoji:hover { background-color: #dbdddf; } + +popover.entry-completion > contents { padding: 0; } + +statusbar { padding: 6px 10px 6px 10px; } + +/* GTK NAMED COLORS ---------------- use responsibly! */ +/* +widget text/foreground color */ +@define-color theme_fg_color #2c2c2c; +/* +text color for entries, views and content in general */ +@define-color theme_text_color black; +/* +widget base background color */ +@define-color theme_bg_color #ebeced; +/* +text widgets and the like base background color */ +@define-color theme_base_color #ffffff; +/* +base background color of selections */ +@define-color theme_selected_bg_color #4a90d9; +/* +text/foreground color of selections */ +@define-color theme_selected_fg_color #ffffff; +/* +base background color of insensitive widgets */ +@define-color insensitive_bg_color #f3f4f4; +/* +text foreground color of insensitive widgets */ +@define-color insensitive_fg_color #8c8c8d; +/* +insensitive text widgets and the like base background color */ +@define-color insensitive_base_color #ffffff; +/* +widget text/foreground color on backdrop windows */ +@define-color theme_unfocused_fg_color #8c8c8d; +/* +text color for entries, views and content in general on backdrop windows */ +@define-color theme_unfocused_text_color black; +/* +widget base background color on backdrop windows */ +@define-color theme_unfocused_bg_color #ebeced; +/* +text widgets and the like base background color on backdrop windows */ +@define-color theme_unfocused_base_color #fcfcfc; +/* +base background color of selections on backdrop windows */ +@define-color theme_unfocused_selected_bg_color #4a90d9; +/* +text/foreground color of selections on backdrop windows */ +@define-color theme_unfocused_selected_fg_color #ffffff; +/* +insensitive color on backdrop windows*/ +@define-color unfocused_insensitive_color #c3c6c9; +/* +widgets main borders color */ +@define-color borders #c3c6c9; +/* +widgets main borders color on backdrop windows */ +@define-color unfocused_borders #cbcdd0; +/* +these are pretty self explicative */ +@define-color warning_color #f57900; +@define-color error_color #cc0000; +@define-color success_color #33d17a; +/* +these colors are exported for the window manager and shouldn't be used in applications, +read if you used those and something break with a version upgrade you're on your own... */ +@define-color wm_title shade(#2c2c2c, 1.8); +@define-color wm_unfocused_title #8c8c8d; +@define-color wm_highlight rgba(255, 255, 255, 0.3); +@define-color wm_borders_edge rgba(255, 255, 255, 0.3); +@define-color wm_bg_a shade(#ebeced, 1.2); +@define-color wm_bg_b #ebeced; +@define-color wm_shadow alpha(black, 0.35); +@define-color wm_border alpha(black, 0.18); +@define-color wm_button_hover_color_a shade(#ebeced, 1.3); +@define-color wm_button_hover_color_b #ebeced; +@define-color wm_button_active_color_a shade(#ebeced, 0.85); +@define-color wm_button_active_color_b shade(#ebeced, 0.89); +@define-color wm_button_active_color_c shade(#ebeced, 0.9); +/* content view background such as thumbnails view in Photos or Boxes */ +@define-color content_view_bg #ffffff; +/* Very contrasty background for text views (@theme_text_color foreground) */ +@define-color text_view_bg #ffffff; +windowcontrols button { min-width: 20px; min-height: 20px; padding: 0; margin: 4px 4px 4px 10px; border-radius: 1.5px; } + +windowcontrols button.close, windowcontrols button.maximize, windowcontrols button.minimize { color: transparent; background-color: transparent; background-position: center; background-repeat: no-repeat; border-width: 0; box-shadow: none; transition-property: background-color; } + +windowcontrols button.close > image, windowcontrols button.maximize > image, windowcontrols button.minimize > image { opacity: 0; } + +windowcontrols button.close { background-color: #d35f5f; } + +windowcontrols button.close:hover, windowcontrols button.close:active { background-color: #a02c2c; } + +windowcontrols button.close:backdrop { background-color: #9fa3a9; } + +windowcontrols button.close:backdrop:hover, windowcontrols button.close:backdrop:active { background-color: #a02c2c; } + +windowcontrols button.maximize:hover, windowcontrols button.maximize:active, windowcontrols button.minimize:hover, windowcontrols button.minimize:active { background-color: #4a90d9; } + +windowcontrols button.close { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close.png"), url("../gtk-3.0/assets/titlebutton-close@2.png")); } + +windowcontrols button.close:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-backdrop.png"), url("../gtk-3.0/assets/titlebutton-close-backdrop@2.png")); } + +windowcontrols button.close:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.close:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-close-hover.png"), url("../gtk-3.0/assets/titlebutton-close-hover@2.png")); } + +windowcontrols button.maximize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize.png"), url("../gtk-3.0/assets/titlebutton-maximize@2.png")); } + +windowcontrols button.maximize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-backdrop.png"), url("../gtk-3.0/assets/titlebutton-maximize-backdrop@2.png")); } + +windowcontrols button.maximize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.maximize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-maximize-hover.png"), url("../gtk-3.0/assets/titlebutton-maximize-hover@2.png")); } + +windowcontrols button.minimize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize.png"), url("../gtk-3.0/assets/titlebutton-minimize@2.png")); } + +windowcontrols button.minimize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-backdrop.png"), url("../gtk-3.0/assets/titlebutton-minimize-backdrop@2.png")); } + +windowcontrols button.minimize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +windowcontrols button.minimize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-minimize-hover.png"), url("../gtk-3.0/assets/titlebutton-minimize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize.png"), url("../gtk-3.0/assets/titlebutton-unmaximize@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:backdrop { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-backdrop.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-backdrop@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:hover { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +.maximized windowcontrols button.titlebutton.maximize:active { background-image: -gtk-scaled(url("../gtk-3.0/assets/titlebutton-unmaximize-hover.png"), url("../gtk-3.0/assets/titlebutton-unmaximize-hover@2.png")); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked) { border-style: solid; border-color: transparent; background-color: transparent; background-image: none; box-shadow: none; } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):hover { color: #2c2c2c; outline-color: rgba(44, 44, 44, 0.3); border-color: #4a90d9; background-color: white; box-shadow: inset 0 1px white, 0 0 0 2px rgba(74, 144, 217, 0.2); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):active, :not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):checked { color: #2c2c2c; border-color: #a3a7ac; background-image: image(#dbdddf); text-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 2px rgba(0, 0, 0, 0.08); } + +:not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):active:hover, :not(.nautilus-window) .titlebar button:not(.default):not(:focus):not(.suggested-action):not(.destructive-action):not(.close):not(.maximize):not(.minimize):not(:active):not(:checked):checked:hover { background-image: image(#d0d3d5); } + +:not(.nautilus-window) .titlebar .linked > button, :not(.nautilus-window) .titlebar .linked > button:hover, :not(.nautilus-window) .titlebar .linked > button:checked, :not(.nautilus-window) .titlebar .linked > button:focus, :not(.nautilus-window) .titlebar .linked > button.default, :not(.nautilus-window) .titlebar .linked > button.toggle, :not(.nautilus-window) .titlebar .linked > button:active { border-style: solid; } + +switch { font-weight: bold; font-size: smaller; margin: 4px 0; padding: 0; border-width: 0; background-color: rgba(0, 0, 0, 0.38); background-clip: padding-box; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } + +switch { outline: 0 solid transparent; outline-offset: 4px; } + +switch:focus:focus-visible { outline-color: rgba(74, 144, 217, 0.5); outline-width: 2px; outline-offset: 0; } + +headerbar switch { background-color: #b9bcc1; } + +switch:checked { background-color: #4a90d9; } + +switch:disabled { opacity: 0.38; } + +switch > slider { margin: 1px; min-width: 22px; min-height: 18px; border-radius: 0; background-color: white; transition: all 75ms cubic-bezier(0, 0, 0.2, 1); } + +switch:hover > slider, switch:focus > slider { background-color: white; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.3); } + +switch:checked > slider { background-color: white; } + +switch > image { color: transparent; } + +row:selected switch { outline-color: rgba(255, 255, 255, 0.8); box-shadow: none; border: 1px solid #2a76c6; } + +row:selected switch:backdrop { border-color: #2a76c6; } + +row:selected switch > slider { border-color: #2a76c6; } + +scale.horizontal.marks-before:not(.marks-after) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; min-height: 22px; min-width: 9px; } + +scale.horizontal.marks-before.fine-tune:not(.marks-after) > trough > slider { margin: -8px -4px; } + +scale.horizontal.marks-after:not(.marks-before) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; min-height: 22px; min-width: 9px; } + +scale.horizontal.marks-after.fine-tune:not(.marks-before) > trough > slider { margin: -8px -4px; } + +scale.vertical.marks-before:not(.marks-after) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; margin: -4px -11px; min-height: 9px; min-width: 22px; } + +scale.vertical.marks-before.fine-tune:not(.marks-after) > trough > slider { margin: -8px -4px; margin: -4px -8px; } + +scale.vertical.marks-after:not(.marks-before) > trough > slider { margin: -11px -4px; padding: 0px; border-radius: 0px; margin: -4px -11px; min-height: 9px; min-width: 22px; } + +scale.vertical.marks-after.fine-tune:not(.marks-before) > trough > slider { margin: -8px -4px; margin: -4px -8px; } diff --git a/gtk/src/Plano/gtk-4.0/gtk.scss b/gtk/src/Plano/gtk-4.0/gtk.scss new file mode 100644 index 0000000..6c00177 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/gtk.scss @@ -0,0 +1,14 @@ +// General guidelines: +// - very unlikely you want to edit something else than _common.scss +// - keep the number of defined colors to a minimum, use the color blending functions if +// you need a subtle shade +// - if you need to inverse a color function use the @if directive to match for dark $variant + +$variant: 'light'; +$alt_header: 'false'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'colors-public'; +@import 'custom'; diff --git a/gtk/src/Plano/gtk-4.0/meson.build b/gtk/src/Plano/gtk-4.0/meson.build new file mode 100644 index 0000000..43019c5 --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/meson.build @@ -0,0 +1,37 @@ +gtk4_dir = join_paths(theme_dir, 'gtk-4.0') + +# theme sources .scss files + +# The files that need to be compiled +gtk4_scss_sources = [ + 'gtk', + 'gtk-dark', + 'gtk-alt-header', +] + +# Dependencies of the files that need to be compiled +gtk4_scss_dependencies = [ + '_colors-public.scss', + '_custom.scss', + '_colors.scss', + '_common.scss', + '_drawing.scss', +] + +# Generate .css files and install +gtk4_scss_dependencies = files(gtk4_scss_dependencies) +# +foreach f : gtk4_scss_sources + custom_target('generate_' + f, + input: f + '.scss', + output: f + '.css', + depend_files: gtk4_scss_dependencies, + command: [sassc, '-M', '-t', 'compact', '@INPUT@', '@OUTPUT@'], + build_by_default: true, + install: true, + install_dir: gtk4_dir, + ) +endforeach + +# Install asset files to themes/ThemeName/gtk-4.0/assets +install_subdir('assets', install_dir : gtk4_dir, strip_directory : false) diff --git a/gtk/src/Plano/gtk-4.0/parse-sass.sh b/gtk/src/Plano/gtk-4.0/parse-sass.sh new file mode 100644 index 0000000..c0668bc --- /dev/null +++ b/gtk/src/Plano/gtk-4.0/parse-sass.sh @@ -0,0 +1,14 @@ +#! /bin/bash + +#if [ ! "$(which sassc 2> /dev/null)" ]; then +# echo sassc needs to be installed to generate the css. +# exit 1 +#fi + +SASSC_OPT="-M -t compact" + +echo Generating the css... + +sassc $SASSC_OPT gtk.scss gtk.css +sassc $SASSC_OPT gtk-dark.scss gtk-dark.css +sassc $SASSC_OPT gtk-alt-header.scss gtk-alt-header.css diff --git a/gtk/src/Plano/meson.build b/gtk/src/Plano/meson.build index 8b2f0c3..f1e9c44 100644 --- a/gtk/src/Plano/meson.build +++ b/gtk/src/Plano/meson.build @@ -10,3 +10,4 @@ configure_file(input : '../index.theme.in', subdir('gtk-2.0') subdir('gtk-3.0') +subdir('gtk-4.0')