diff --git a/README.md b/README.md index 84bfd94..847a413 100644 --- a/README.md +++ b/README.md @@ -35,13 +35,13 @@ Icon theme: https://github.com/vinceliuice/Colloid-icon-theme ![Dash look](./readme-images/dash.png?raw=true "Dash look") ## Requirements -- GNOME 43, 44. I do not guarantee correct functionality on other versions. +- GNOME 43, 44. I don't guarantee correct functionality on other versions. - [User Themes](https://extensions.gnome.org/extension/19/user-themes/ "User Themes") extension. - [GNOME Tweaks](https://gitlab.gnome.org/GNOME/gnome-tweaks "GNOME Tweaks"). - Python 3.2+. ## Installation -1. Open terminal. +1. Open the terminal. 2. Clone git and change directory: ```shell git clone https://github.com/imarkoff/Marble-shell-theme.git && cd Marble-shell-theme @@ -59,28 +59,37 @@ python install.py -h #### Install default color You can install several themes in one string: `python install.py --red --green --blue` -| Option | Theme mode (optional) | Description | -|---------------|-----------------------|----------------------------------------------------------| -| -A, --all | | Install all available accent colors. Light & dark mode. | -| --red | | red theme only | -| --pink | | pink theme only | -| --purple | | purple theme only | -| --blue | | blue theme only | -| --green | | green theme only | -| --yellow | | yellow theme only | -| --gray | | gray theme only | +| Option | Description | +|-----------|--------------------------------------------------------| +| -A, --all | Install all available accent colors, light & dark mode | +| --red | red theme only | +| --pink | pink theme only | +| --purple | purple theme only | +| --blue | blue theme only | +| --green | green theme only | +| --yellow | yellow theme only | +| --gray | gray theme only | #### Install custom color -| Option | Hue degree | Secondary option (optional) | Description | -|--------|------------|-----------------------------|------------------------------------------| -| --hue | (0 - 360) | | Generate theme from Hue prompt [0 - 360] | -| | | --name=NAME | Custom theme name | +| Option | Secondary option (optional) | Description | +|--------|-----------------------------|------------------------------------------| +| --hue | (0 - 360) | Generate theme from Hue prompt [0 - 360] | +| --name | --name=NAME | Custom theme name | #### Optional theme tweaks -| Option | Secondary option | Description | -|---------|------------------|------------------------------------------------------------| -| --mode= | light / dark | light / dark theme only | -| --sat= | (0 - 250)% | custom color saturation (<100% - reduce, >100% - increase) | +| Option | Secondary option | Description | +|--------|------------------|------------------------------------------------------------| +| --mode | light / dark | light / dark theme only | +| --sat | (0 - 250)% | custom color saturation (<100% - reduce, >100% - increase) | + +#### Panel tweaks +![Panel default size](./readme-images/tweaks/panel-default-size.png "Panel default size") +![Panel without buttons background](./readme-images/tweaks/panel-no-pill.png "Panel without buttons background") +| Option | Secondary option | Description | +|----------------------------|------------------|--------------------------------| +| -Pds, --panel_default_size | | set default panel size | +| -Pnp, --panel_no_pill | | remove panel button background | +| -Ptc, --panel_text_color | #abcdef | custom panel HEX(A) text color | #### Examples | Command | Description | diff --git a/css/gnome.css b/css/gnome.css new file mode 100644 index 0000000..9e6c8e3 --- /dev/null +++ b/css/gnome.css @@ -0,0 +1,1538 @@ +stage { + color: TEXT-PRIMARY-COLOR; +} + +.workspace-background { + border: 1px solid BORDER-SHADOW; +} + +/* Activities Ripple */ +.ripple-box { + background-color: ACCENT-OPACITY-COLOR; + box-shadow: 0 0 2px 2px ACCENT-OPACITY-COLOR; +} + +/* Panel */ +#panel { + background-color: BACKGROUND-COLOR; + height: 38px; + font-size: 14px; +} + +#panel:overview { + background-color: transparent; +} + +#panel .screencast-indicator, +#panel .remote-access-indicator { + color: #cd9309; +} + +#panel .panel-button.screen-recording-indicator { + background: #c01c28; +} + +#panel .panel-button.screen-sharing-indicator { + background: #cd9309; +} + +#panel .panel-button.screen-recording-indicator:hover { + background: rgba(192, 28, 40, 0.9); +} + +#panel .panel-button.screen-sharing-indicator:hover { + background: rgba(205, 147, 9, 0.9); +} + +.panel-button, +.clock, +.clock-display StIcon { + color: TEXT-PRIMARY-COLOR; + border-radius: 14px; + border: 4px solid transparent; + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.clock-display StIcon { + padding: 8px; + margin: 0; +} + +#panel .power-status.panel-status-indicators-box StIcon { + font-size: 14px; +} + +.panel-button:hover, +.panel-button:hover .clock, +.panel-button:active, +.panel-button:overview, +/* activites */ +.panel-button:active .clock { + background-color: ACCENT-DISABLED_HOVER; +} + +#panel .power-status.panel-status-indicators-box { + font-size: 12px; +} + +/* date-menu-mod */ +.clock-display { + background-color: transparent !important; + box-shadow: none !important; + border: none !important; +} + +.clock { + margin: 0 !important; +} + +/* clock fix by Aylur's widgets */ +#panel .panel-button.clock-display { + -natural-hpadding: 0; + -minimum-hpadding: 0; +} + +.datemenu-calendar-column { + padding-left: 0; + padding-right: 0; +} + +/* if notifications are hidden, make the column centered */ +.datemenu-user { + padding: 30px; +} + +.datemenu-user>StButton { + width: 160px; + height: 160px; + padding: 2px; + border-radius: 99px; + margin-bottom: 12px; +} + +.datemenu-user>StButton>StWidget { + border-radius: 99px; +} + +.datemenu-levels { + spacing: 8px; +} + + +/* POPOVERS */ +.popup-menu-content, +.candidate-popup-content { + color: TEXT-PRIMARY-COLOR; + background: BACKGROUND-COLOR; + padding: 10px; + border-radius: 20px; + border: 1px solid BORDER-MENU-SHADOW; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); +} + +.popup-menu-item, +.app-menu { + margin: 3px 0; +} + +.popup-menu-item:focus, +.popup-menu-item:hover, +.popup-menu-item:checked { + background-color: ACCENT-DISABLED-COLOR !important; + box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; + color: TEXT-PRIMARY-COLOR; +} + +.popup-menu-item:checked { + border-radius: 12px 12px 0 0; +} + +.popup-menu-item:active { + background-color: ACCENT-DISABLED_HOVER; + color: TEXT-PRIMARY-COLOR; +} + +/* 44 separator margin fix */ +.popup-separator-menu-item { + padding: 0 !important; +} + +.popup-separator-menu-item .popup-separator-menu-item-separator { + height: 1px; + margin: 6px 0; + background-color: SEPARATOR-COLOR; +} + +.popup-separator-menu-item-separator:ltr { + margin-right: 4.5px; +} + +.popup-separator-menu-item-separator:rtl { + margin-left: 4.5px; +} + +.popup-sub-menu { + background-color: ACCENT-DISABLED-COLOR; + color: TEXT-PRIMARY-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + border-radius: 0 0 12px 12px; + margin: 0 0 2px 0; +} + +.popup-sub-menu .popup-menu-item { + margin: 0; + color: TEXT-PRIMARY-COLOR; + +} + +.popup-sub-menu .popup-menu-item:last-child { + border-radius: 0 0 12px 12px; +} + +.popup-sub-menu .popup-menu-item:hover, +.popup-sub-menu .popup-menu-item:focus { + background-color: ACCENT-DISABLED_HOVER !important; +} + +.popup-menu-item:insensitive { + color: TEXT-DISABLED-COLOR; + margin: 0; +} + +.popup-inactive-menu-item { + color: TEXT-PRIMARY-COLOR; + background-color: transparent; +} + +.popup-inactive-menu-item:insensitive { + color: TEXT-SECONDARY-COLOR !important; +} + +.calendar .calendar-nonwork-day { + color: TEXT-PRIMARY-COLOR; +} + + +/* calendar */ +#calendarArea { + padding: 0; +} + +.datemenu-calendar-column { + spacing: 5px; +} + +.datemenu-calendar-column:ltr { + padding-left: 6px; +} + +.datemenu-calendar-column:rtl { + padding-right: 6px; +} + +.datemenu-calendar-column .datemenu-displays-box { + spacing: 5px; +} + +/* calendar header */ +.datemenu-today-button { + color: TEXT-SECONDARY-COLOR; + background-color: none; + border-radius: 12px; +} + +.datemenu-today-button:hover { + transition-duration: 100ms; + background-color: ACCENT-DISABLED-COLOR; +} + +.datemenu-today-button:focus { + transition-duration: 100ms; + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; +} + +.day-label { + font-weight: 600; +} + +.date-label { + font-weight: 700; +} + +/* calendar-days */ +.calendar-day-base, +.calendar-month-header .pager-button { + color: TEXT-PRIMARY-COLOR; + border-radius: 10px; +} + +.calendar-month-label { + color: TEXT-PRIMARY-COLOR; +} + +.calendar-day-base, +.calendar .calendar-month-header .pager-button { + transition-duration: 100ms; +} + +.calendar-day-base:hover, +.calendar-day-base:focus, +.calendar-day-base:active:hover, +.calendar-day-base:selected:hover, +.calendar .calendar-month-header .pager-button:hover, +.calendar .calendar-month-header .pager-button:focus { + background-color: ACCENT-DISABLED_HOVER; + color: TEXT-PRIMARY-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.calendar-day-base:active, +.calendar-day-base:selected { + background: ACCENT-DISABLED_HOVER; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.calendar-today, +.calendar-today:selected { + background-color: ACCENT-COLOR; + color: TEXT-PRIMARY-COLOR !important; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.calendar-today:hover, +.calendar-today:selected:hover { + background-color: ACCENT_HOVER; +} + +.calendar .calendar-day-with-events { + background-image: url("calendar-today.svg"); + background-size: contain; + font-weight: 700; +} + + +/* events */ +.calendar { + border-radius: 14px; + background-color: SECTION-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; + padding: 5px; +} + + +.events-button, +.world-clocks-button, +.weather-button { + background-color: SECTION-COLOR; + color: TEXT-SECONDARY-COLOR; + border-radius: 14px; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.events-button:hover, +.world-clocks-button:hover, +.weather-button:hover { + background-color: ACCENT-DISABLED-COLOR; +} + +.events-button:focus, +.world-clocks-button:focus, +.weather-button:focus { + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; +} + +.weather-button .weather-header, +.events-button .events-title, +.world-clocks-button .world-clocks-header { + color: TEXT-PRIMARY-COLOR; +} + +.events-button .event-time { + color: TEXT-SECONDARY-COLOR; +} + +.events-button:active, +.world-clock-button:active, +.weather-button:active { + background-color: ACCENT-DISABLED_HOVER; +} + +.world-clocks-button .world-clocks-time, +.world-clocks-button .world-clocks-city, +.world-clocks-button .world-clocks-timezone { + color: TEXT-SECONDARY-COLOR; +} + +.weather-button .weather-forecast-time { + color: TEXT-SECONDARY-COLOR; +} + + +/* message-list */ +.message-list { + border: none; + padding: 0; +} + +.message-list-sections:ltr { + margin-right: 0px; +} + +.message-list-sections:rtl { + margin-left: 0px; +} + +.message { + background: BACKGROUND-COLOR; + color: TEXT-PRIMARY-COLOR; + border-radius: 18px; + border: none; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; +} + +.message:focus { + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; +} + +.message-list .message { + background-color: SECTION-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + transition-duration: 100ms; +} + +.message-list .message:hover { + background-color: ACCENT-DISABLED-COLOR; +} + +.message .message-body, +.message-title { + color: TEXT-PRIMARY-COLOR; +} + +.message-dialog-content .message-dialog-title { + font-weight: 700; +} + +.message .message-secondary-bin>.event-time { + color: TEXT-SECONDARY-COLOR; +} + +.message-close-button { + border-radius: 9px; + color: TEXT-PRIMARY-COLOR; + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + transition-duration: 100ms; +} + +.message-close-button:hover { + background-color: ACCENT-DISABLED_HOVER; +} + +.message-close-button:active { + color: TEXT-SECONDARY-COLOR; +} + + +/* Media Controls */ +.message-media-control { + border-radius: 12px; + padding: 0 14px; + margin: 20px 2px; + color: TEXT-PRIMARY-COLOR; + transition-duration: 100ms; +} + +.message-media-control:hover { + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + color: TEXT-PRIMARY-COLOR; +} + +.message-media-control:insensitive { + color: TEXT-DISABLED-COLOR +} + +.message-media-control:last-child:ltr { + margin-right: 20px; +} + +.message-media-control:last-child:rtl { + margin-left: 12px; +} + +.message-media-control StIcon { + icon-size: 1.09em; +} + +.media-message-cover-icon { + icon-size: 3.2em !important; + border-radius: 12px; +} + +.media-message-cover-icon.fallback { + color: TEXT-PRIMARY-COLOR; + background-color: ACCENT-DISABLED_HOVER; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + border-radius: 12px; + icon-size: 1.6em !important; + padding: 0.79em; +} + + +/* Check Boxes */ +.check-box StBoxLayout { + spacing: .8em; +} + +.check-box StBin { + width: 24px; + height: 24px; + background-image: url("checkbox-off.svg"); +} + +.check-box:focus StBin { + background-image: url("checkbox-off-focused.svg"); +} + +.check-box:checked StBin { + background-image: url("checkbox.svg"); +} + +.check-box:focus:checked StBin { + background-image: url("checkbox-focused.svg"); +} + + +/* Toggles */ +.toggle-switch { + background-image: url("./toggle-off.svg"); + background-color: ACCENT-DISABLED_HOVER; + border-radius: 10px; + box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; +} + +.toggle-switch:checked { + background-image: url("./toggle-on.svg"); + background-color: ACCENT-COLOR; +} + + +/* Do Not Distrub toggle */ +.dnd-button { + width: 48px; + border-radius: 10px; +} + +.dnd-button .toggle-switch { + background-color: ACCENT-DISABLED-COLOR; +} + +.dnd-button:hover .toggle-switch { + background-color: ACCENT-DISABLED_HOVER; +} + +.dnd-button .toggle-switch:checked { + background-color: ACCENT-COLOR; +} + +.dnd-button:hover .toggle-switch:checked { + background-color: ACCENT_HOVER; +} + +.dnd-button:focus { + border-color: transparent; +} + +.dnd-button:focus .toggle-switch { + box-shadow: inset 0 0 0 1px ACCENT-SECONDARY-COLOR !important; +} + + +.button { + color: TEXT-PRIMARY-COLOR; + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.button:insensitive { + box-shadow: none; + color: TEXT-SECONDARY-COLOR; +} + +.button:hover, +.button:active { + background-color: ACCENT-DISABLED_HOVER; +} + +.message-list-clear-button { + border-radius: 9px; + background-color: SECTION-COLOR; + padding: 3px 15px; + color: TEXT-PRIMARY-COLOR; +} + +.message-list-clear-button:focus { + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; +} + +/* quick-settings */ +.quick-settings { + padding: 18px; + border-radius: 24px; +} + +.icon-button { + background-color: ACCENT-DISABLED-COLOR; + color: TEXT-PRIMARY-COLOR; + transition-duration: 100ms; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.icon-button:hover { + background-color: ACCENT-DISABLED_HOVER; +} + + +.quick-toggle, +.quick-menu-toggle .quick-toggle { + color: TEXT-PRIMARY-COLOR; + border-radius: 15px; + background-color: ACCENT-DISABLED-COLOR; + transition-duration: 100ms; +} + +.quick-menu-toggle .quick-toggle:ltr { + border-radius: 15px 0 0 15px; +} + +.quick-menu-toggle .quick-toggle:rtl { + border-radius: 0 15px 15px 0; +} + +.quick-menu-toggle .quick-toggle:last-child { + border-radius: 15px; +} + +.quick-menu-toggle .quick-toggle-arrow:ltr { + border-radius: 0 15px 15px 0; +} + +.quick-menu-toggle .quicl-toggle-arrow:rtl { + border-radius: 15px 0 0 15px; +} + +.quick-toggle:hover, +.quick-menu-toggle .quick-toggle:hover, +.quick-menu-toggle .quick-toggle-arrow:hover { + background-color: ACCENT-DISABLED_HOVER; +} + +.quick-toggle:checked, +.quick-menu-toggle .quick-toggle:checked, +.quick-menu-toggle .quick-toggle-arrow:checked { + color: TEXT-PRIMARY-COLOR; + background-color: ACCENT-COLOR; +} + +.quick-toggle:checked:hover, +.quick-menu-toggle .quick-toggle:checked:hover, +.quick-menu-toggle .quick-toggle-arrow:checked:hover { + background-color: ACCENT_HOVER; +} + +.quick-menu-toggle .quick-toggle-arrow:ltr { + margin-left: 1px; +} + +.quick-menu-toggle .quick-toggle-arrow:rtl { + margin-right: 1px; +} + +.quick-slider .slider-bin { + padding: 2px 1px; + margin: 0px; + color: TEXT-PRIMARY-COLOR; +} + +.quick-slider .slider-bin:focus { + background-color: ACCENT-DISABLED-COLOR; +} + +.icon-button:focus, +.quick-toggle:focus, +.slider-bin:focus { + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; +} + +.quick-toggle .quick-toggle-label { + font-weight: 600; +} + +.quick-slider .icon-button { + background-color: BACKGROUND-COLOR; + box-shadow: none; + padding: 6px; + border-radius: 11px; + transition-duration: 150ms; +} + +.quick-slider .icon-button:hover { + background-color: ACCENT-DISABLED-COLOR; + color: TEXT-PRIMARY-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.quick-toggle-menu { + background-color: BACKGROUND-COLOR; + border-radius: 20px; + color: TEXT-PRIMARY-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +/* connect / disconnect text color */ +.device-subtitle { + color: TEXT-SECONDARY-COLOR; +} + +.quick-toggle-menu .header .icon { + background-color: ACCENT-COLOR; + border-radius: 12px; + icon-size: 1.4em; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.level-bar { + padding: 0; + background-color: ACCENT-DISABLED-COLOR; +} + +/* background apps */ +.background-apps-quick-toggle { + background-color: transparent; +} + +.background-apps-quick-toggle:hover { + background-color: ACCENT-DISABLED-COLOR; +} + +.background-apps-quick-toggle:focus { + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR; +} + +.background-app-item .title { + color: TEXT-PRIMARY-COLOR; + font-weight: 600; +} + +.background-app-item .close-button { + color: TEXT-PRIMARY-COLOR; + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.background-app-item .close-button:hover { + background-color: ACCENT-DISABLED_HOVER; +} + + +/* Notifications */ +.notification-banner { + background-color: BACKGROUND-COLOR; + color: TEXT-PRIMARY-COLOR; +} + +.notification-button:active { + background-color: ACCENT-COLOR; + color: TEXT-PRIMARY-COLOR; +} + + +/* slider */ +.slider, +.level { + height: 16px; + -barlevel-height: 16px; + -barlevel-background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + /* fill */ + -barlevel-active-background-color: ACCENT-COLOR; + /* overfill */ + -barlevel-overdrive-color: #c01c28; + -barlevel-overdrive-separator-width: 2px; + -slider-handle-radius: 7px; +} + + +/* Scroll bar */ +StScrollBar { + padding: 0; +} + +StScrollView StScrollBar { + min-width: 8px; + min-height: 8px; +} + +StScrollBar StBin#trough { + border-radius: 0; + background-color: transparent; +} + +StScrollBar StButton#vhandle, +StScrollBar StButton#hhandle { + border-radius: 8px; + background-color: SCROLLBAR-COLOR; + border: 3px solid transparent; + transition-duration: 100ms; +} + +StScrollBar StButton#vhandle:hover, +StScrollBar StButton#hhandle:hover { + background-color: SCROLLBAR_HOVER; +} + +StScrollBar StButton#vhandle:active, +StScrollBar StButton#hhandle:active { + background-color: SCROLLBAR_ACTIVE; +} + + +/* overview-ws-thumbnail */ +.workspace-thumbnail { + border: none; + /* border-radius: 9px; */ + background-color: ACCENT-DISABLED-COLOR; + border: 1px solid BORDER-SHADOW; +} + +.workspace-thumbnails .placeholder { + background-image: url("workspace-placeholder.svg"); + background-size: contain; + width: 18px; +} + +.workspace-thumbnail-indicator { + background-color: ACCENT-OPACITY-COLOR; + border-color: TEXT-DISABLED-COLOR; + border-width: 1px; + border-radius: 3px; +} + + +/* overview */ +#overviewGroup, +.workspace-animation { + background-color: BACKGROUND-COLOR; +} + +.workspace-background { + border-radius: 20px; + box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); +} + +.window-caption { + spacing: 20px; + border-radius: 10px; + color: TEXT-PRIMARY-COLOR; + background-color: BACKGROUND-COLOR; + border: 1px solid BORDER-SHADOW; + padding: 4px 8px; +} + + +/* App icons */ +.app-well-app.app-folder .overview-icon, +.app-folder.grid-search-result .overview-icon, +.app-well-app .overview-icon, +.grid-search-result .overview-icon { + box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); + /* fix default dash focused box-shadow*/ + transition-duration: 100ms; + border-radius: 20px; + color: TEXT-PRIMARY-COLOR; + /* ubuntu fix */ +} + +.app-well-app:hover .overview-icon, +.app-well-app:focus .overview-icon, +.app-well-app:selected .overview-icon, +.show-apps:hover .overview-icon, +.show-apps:focus .overview-icon, +.app-well-app.app-folder .overview-icon { + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + background-color: ACCENT-DISABLED-COLOR; +} + +.app-well-app.app-folder .overview-icon { + background-color: ACCENT-DISABLED_HOVER; +} + +.app-well-app:drop .overview-icon, +.grid-search-result:drop .overview-icon, +.app-well-app.app-folder:drop .overview-icon, +.app-folder.grid-search-result:drop .overview-icon { + border: 2px solid ACCENT-SECONDARY-COLOR; + background-color: ACCENT-OPACITY-COLOR; +} + + +/* folder dialog */ +.app-folder-dialog { + border-radius: 32px; + background-color: BACKGROUND-COLOR; + border: none; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; +} + +.app-folder-dialog .app-well-app:hover .overview-icon, +.app-folder-dialog .app-well-app:focus .overview-icon { + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 1px solid BORDER-SHADOW; +} + +.app-folder-dialog .folder-name-container { + color: TEXT-PRIMARY-COLOR; +} + +.app-folder-dialog .folder-name-container .folder-name-label { + padding: 5px 7px; + color: TEXT-PRIMARY-COLOR; + font-weight: 700; + transition-duration: 100ms; +} + +.app-folder-dialog .folder-name-container .folder-name-entry { + font-weight: 700; + border: none; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; + background-color: ACCENT-DISABLED-COLOR; + selection-background-color: ACCENT-COLOR; + selected-color: TEXT-PRIMARY-COLOR; + /* ubuntu fix */ +} + +.app-folder-dialog .folder-name-container .edit-folder-button { + border-radius: 12px; + background-color: ACCENT-DISABLED-COLOR; + color: TEXT-PRIMARY-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.app-folder-dialog .folder-name-container .edit-folder-button:hover { + background-color: ACCENT-DISABLED_HOVER; +} + +.app-folder-dialog .folder-name-container .edit-folder-button:focus { + box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; +} + +.page-indicator .page-indicator-icon { + background-color: TEXT-SECONDARY-COLOR; +} + +.page-navigation-arrow { + border-radius: 99px; + color: TEXT-PRIMARY-COLOR; + transition-duration: 100ms; +} + +.page-navigation-arrow>StIcon { + margin: 0; +} + +.page-navigation-arrow:hover { + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.page-navigation-arrow:hover>StIcon { + background-color: rgba(0, 0, 0, 0); +} + +.page-navigation-arrow:active { + background-color: ACCENT-DISABLED_HOVER; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.page-navigation-hint.next:ltr, +.page-navigation-hint.previous:rtl { + background-gradient-start: PAGE-NAV-HINT; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.page-navigation-hint.previous:ltr, +.page-navigation-hint.next:rtl { + background-gradient-end: PAGE-NAV-HINT; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + + +/* Dash */ +#dash .dash-background { + background-color: DASH-COLOR; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; + padding: 4px 2px 4px 2px; + border-radius: 21px; +} + +#dashtodockContainer #dash .dash-background { + border: none; + border-radius: 18px; + /* ubuntu fix */ + transition-duration: 250ms; +} + +#dashtodockContainer.overview #dash .dash-background { + box-shadow: inset 0 0 0 1.5px BORDER-MENU-SHADOW; + background-color: DASH_OVERVIEW; +} + + +.dash-label { + background-color: BACKGROUND-COLOR; + color: TEXT-PRIMARY-COLOR; + border-radius: 11px; + border: none; + /* ubuntu fix */ + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; +} + +.app-well-app-running-dot { + width: 10px; + height: 5px; + border-radius: 5px; + background: ACCENT-SECONDARY-COLOR; + transition-duration: 100ms; +} + +#dash .app-well-app-running-dot { + margin-bottom: 6px; +} + +.dash-item-container .app-well-app .overview-icon, +.dash-item-container .show-apps .overview-icon { + border-radius: 21px; +} + +#dash .app-well-app:hover .overview-icon, +#dash .app-well-app:focus .overview-icon, +#dash .app-well-app:selected .overview-icon, +#dash .show-apps:hover .overview-icon, +#dash .show-apps:focus .overview-icon { + box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED; + background-color: rgba(255, 255, 255, 0.1); +} + +/* ubuntu fix */ +#dashtodockContainer #dash .app-well-app:hover .overview-icon, +#dashtodockContainer #dash .app-well-app:focus .overview-icon, +#dashtodockContainer #dash .app-well-app:selected .overview-icon, +#dashtodockContainer #dash .show-apps:hover .overview-icon, +#dashtodockContainer #dash .show-apps:focus .overview-icon, +#dashtodockContainer .show-apps:selected .overview-icon, +#dashtodockContainer .show-apps:selected:hover .overview-icon, +#dashtodockContainer .show-apps:active .overview-icon, +#dashtodockContainer .show-apps:checked .overview-icon, +#dashtodockContainer .app-well-app.focused .overview-icon { + border-radius: 15px; + /* ubuntu fix*/ +} + +#dashtodockContainer .app-well-app.focused .overview-icon, +.show-apps:selected .overview-icon, +.show-apps:selected:hover .overview-icon, +.show-apps:active .overview-icon, +.show-apps:checked .overview-icon { + box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED; +} + +/* ubuntu fix */ +#dashtodockContainer.bottom.extended #dash .dash-background, +#dashtodockContainer.bottom.extended.dashtodock #dash .dash-background, +#dashtodockContainer.bottom.extended.shrink #dash .dash-background, +#dashtodockContainer.top.extended #dash .dash-background, +#dashtodockContainer.top.extended.dashtodock #dash .dash-background, +#dashtodockContainer.top.extended.shrink #dash .dash-background, +#dashtodockContainer.left.extended #dash .dash-background, +#dashtodockContainer.left.extended.dashtodock #dash .dash-background, +#dashtodockContainer.left.extended.shrink #dash .dash-background, +#dashtodockContainer.right.extended #dash .dash-background, +#dashtodockContainer.right.extended.dashtodock #dash .dash-background, +#dashtodockContainer.right.extended.shrink #dash .dash-background { + border-radius: 0; + background-color: DASH-COLOR; + box-shadow: none; + transition-duration: 250ms; +} + +/* animation fix */ +#dashtodockContainer.bottom.extended.overview #dash .dash-background, +#dashtodockContainer.bottom.extended.overview.dashtodock #dash .dash-background, +#dashtodockContainer.bottom.extended.overview.shrink #dash .dash-background, +#dashtodockContainer.top.extended.overview #dash .dash-background, +#dashtodockContainer.top.extended.overview.dashtodock #dash .dash-background, +#dashtodockContainer.top.extended.overview.shrink #dash .dash-background, +#dashtodockContainer.left.extended.overview #dash .dash-background, +#dashtodockContainer.left.extended.overview.dashtodock #dash .dash-background, +#dashtodockContainer.left.extended.overview.shrink #dash .dash-background, +#dashtodockContainer.right.extended.overview #dash .dash-background, +#dashtodockContainer.right.extended.overview.dashtodock #dash .dash-background, +#dashtodockContainer.right.extended.overview.shrink #dash .dash-background { + background-color: BACKGROUND-COLOR; +} + +#dash .app-well-app:hover .app-well-app-running-dot { + width: 15px; +} + +#dashtodockContainer .app-well-app.focused .app-well-app-running-dot { + width: 20px; +} + +.dash-separator { + box-shadow: 0 0 0 0.25px TEXT-DISABLED-COLOR; +} + +.show-apps .overview-icon { + color: SHOW-APPS-ICON-COLOR; +} + + +/* Search */ +StEntry { + border-radius: 13px; + padding: 8px; + transition-duration: 100ms; + border: 1px solid BORDER-SHADOW; + background-color: SECTION-COLOR; + color: TEXT-SECONDARY-COLOR; + selection-background-color: ACCENT-COLOR; + selected-color: TEXT-PRIMARY-COLOR; + /* ubuntu fix */ +} + +StEntry StLabel { + color: TEXT-PRIMARY-COLOR; +} + +StEntry StLabel:insensitive { + color: TEXT-SECONDARY-COLOR; +} + +StEntry:hover, +StEntry:focus, +StEntry:active { + border: 1px solid TEXT-DISABLED-COLOR; + background-color: ACCENT-DISABLED-COLOR; + box-shadow: none; +} + +StEntry:focus { + color: TEXT-PRIMARY-COLOR; +} + +.search-section-content { + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + border-radius: 15px; + border: none; + background-color: SECTION-COLOR; + color: TEXT-PRIMARY-COLOR; +} + +.list-search-result .list-search-result-title { + color: TEXT-PRIMARY-COLOR; +} + +/* ubuntu fix */ + +.list-search-result .list-search-result-description { + color: TEXT-SECONDARY-COLOR; +} + +.search-provider-icon .list-search-provider-content .list-search-provider-details { + width: 120px; + color: TEXT-PRIMARY-COLOR; +} + +.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: ACCENT-DISABLED_HOVER; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.list-search-result:active, +.search-provider-icon:active { + background-color: ACCENT-DISABLED_HOVER; + color: TEXT-PRIMARY-COLOR; +} + + +/* OSD */ +.modal-dialog { + border-radius: 18px; + background-color: BACKGROUND-COLOR; + border: none; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + color: TEXT-PRIMARY-COLOR; +} + +.switcher-list, +.resize-popup, +.workspace-switcher, +.osd-window { + border-radius: 18px; + background: BACKGROUND-COLOR; + color: TEXT-PRIMARY-COLOR; + box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.05); + border: none; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; +} + +.ws-switcher-indicator { + background-color: TEXT-SECONDARY-COLOR; +} + +.switcher-list .item-box:hover, +.switcher-list .item-box:focus, +.switcher-list .item-box:selected { + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.modal-dialog-linked-button, +.notification-button, +.hotplug-notification-item { + padding: 10px 0 !important; + border-radius: 12px !important; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + background-color: ACCENT-DISABLED-COLOR; + color: TEXT-PRIMARY-COLOR; + animation-duration: 100ms; +} + +.modal-dialog-linked-button:first-child, +.notification-button:first-child, +.hotplug-notification-item:first-child { + margin: 0 6px 12px 12px !important; +} + +.modal-dialog-linked-button:last-child, +.notification-button:last-child, +.hotplug-notification-item:last-child { + margin: 0 12px 12px 6px !important; +} + +.modal-dialog-linked-button:first-child:last-child, +.notification-button:first-child:last-child, +.hotplug-notification-item:first-child:last-child { + margin: 0 12px 12px 12px !important; +} + +.modal-dialog-linked-button, +.notification-button, +.hotplug-notification-item { + margin: 0 6px 12px 6px !important; +} + +.modal-dialog-linked-button:hover, +.modal-dialog-linked-button:focus, +.notification-button:hover, +.notification-button:focus { + background: ACCENT-DISABLED_HOVER; + color: TEXT-PRIMARY-COLOR; +} + +.modal-dialog-linked-button:last-child { + background-color: ACCENT-COLOR; +} + +.modal-dialog-linked-button:last-child:hover, +.modal-dialog-linked-button:last-child:focus { + background-color: ACCENT_HOVER; +} + +.modal-dialog .modal-dialog-linked-button:focus, +.hotplug-notification-item:focus, +.notification-banner .notification-button:focus { + animation-duration: 100ms; + box-shadow: inset 0 0 0 1px TEXT-DISABLED-COLOR !important; +} + +.modal-dialog .modal-dialog-linked-button:focus:hover, +.hotplug-notification-item:focus:hover, +.notification-banner .notification-button:focus:hover, +.modal-dialog .modal-dialog-linked-button:focus:active, +.hotplug-notification-item:focus:active, +.notification-banner .notification-button:focus:active { + box-shadow: inset 0 0 0 1px TEXT-SECONDARY-COLOR !important; +} + +.modal-dialog .modal-dialog-linked-button:insensitive, +.hotplug-notification-item:insensitive, +.notification-banner .notification-button:insensitive { + color: TEXT-SECONDARY-COLOR; + background-color: ACCENT_HOVER; +} + +.prompt-dialog-password-entry { + background-color: SECTION-COLOR; +} + +.nm-dialog-scroll-view { + border: 1px solid BORDER-SHADOW; +} + +.nm-dialog-item:selected { + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + + +/* screenshot ui */ +.screenshot-ui-panel { + border-radius: 22px; + background-color: BACKGROUND-COLOR; + border: 0; + /* ubuntu fix */ + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; + color: TEXT-PRIMARY-COLOR; +} + +.screenshot-ui-show-pointer-button, +.screenshot-ui-type-button { + border-radius: 15px; + transition-duration: 100ms; +} + +.screenshot-ui-show-pointer-button:checked, +.screenshot-ui-type-button:checked, +.screenshot-ui-show-pointer-button:checked:hover, +.screenshot-ui-type-button:checked:hover, +.screenshot-ui-show-pointer-button:checked:focus, +.screenshot-ui-type-button:checked:focus { + background-color: ACCENT-DISABLED_HOVER; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + color: TEXT-PRIMARY-COLOR; +} + +.screenshot-ui-show-pointer-button:hover, +.screenshot-ui-type-button:hover, +.screenshot-ui-show-pointer-button:focus, +.screenshot-ui-type-button:focus { + background: ACCENT-DISABLED-COLOR; + color: TEXT-PRIMARY-COLOR; +} + +.screenshot-ui-show-pointer-button:insensitive, +.screenshot-ui-type-button:insensitive { + color: TEXT-DISABLED-COLOR; +} + +.screenshot-ui-show-pointer-button:hover, +.screenshot-ui-type-button:hover, +.screenshot-ui-show-pointer-button:active, +.screenshot-ui-type-button:active { + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.screenshot-ui-window-selector { + background-color: SECTION-COLOR; +} + +.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { + border-color: ACCENT-COLOR; +} + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { + border-color: ACCENT-COLOR; + background-color: ACCENT-OPACITY-COLOR; +} + +.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { + color: TEXT-PRIMARY-COLOR; + background-color: ACCENT-COLOR; +} + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: 99px; + border: 4px ACCENT-SECONDARY-COLOR; + padding: 4px; +} + +.screenshot-ui-capture-button .screenshot-ui-capture-button-circle { + background-color: ACCENT-SECONDARY-COLOR; + transition-duration: 100ms; + border-radius: 99px; +} + +.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, +.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { + background-color: ACCENT-SECONDARY_HOVER; +} + +.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, +.screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { + background-color: ACCENT-SECONDARY_HOVER; +} + +.screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { + background-color: #c01c28; +} + +.screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, +.screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { + background-color: #d61f2d; +} + +.screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { + background-color: #a11722; +} + +.screenshot-ui-shot-cast-container { + background-color: ACCENT-DISABLED-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} + +.screenshot-ui-shot-cast-button { + background-color: transparent; + transition-duration: 100ms; +} + +.screenshot-ui-shot-cast-button:hover, +.screenshot-ui-shot-cast-button:focus, +.screenshot-ui-shot-cast-button:active { + background-color: ACCENT-DISABLED_HOVER; +} + +.screenshot-ui-shot-cast-button:checked { + background-color: ACCENT-SECONDARY-COLOR; + color: TEXT-INVERTED-COLOR; +} + +.screenshot-ui-tooltip { + color: TEXT-PRIMARY-COLOR; + background-color: BACKGROUND-COLOR; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; + border-radius: 10px; + padding: 6px 12px; + text-align: center; + -y-offset: 24px; +} + + +/* Tiled window previews */ +.tile-preview { + background-color: ACCENT-OPACITY-COLOR; + border: 1px solid ACCENT-COLOR; +} + +.window-close, +.screenshot-ui-close-button { + background-color: CLOSE-BUTTON-COLOR; + color: TEXT-PRIMARY-COLOR; + border: 1px solid BORDER-SHADOW; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); + transition-duration: 100ms; +} + +.window-close:hover, +.screenshot-ui-close-button:hover { + background-color: CLOSE-BUTTON_HOVER; +} + + +/* Looking Glass | R.I.P. custom colors & light mode */ +#LookingGlassDialog { + border-radius: 14px; + margin: 5px; + background-color: #191919; + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); +} + +#LookingGlassDialog .notebook-tab, +#LookingGlassDialog>#Toolbar .lg-toolbar-button { + border-radius: 9px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +#LookingGlassDialog>#Toolbar .lg-toolbar-button, +#LookingGlassDialog .notebook-tab:selected { + background-color: rgba(255, 255, 255, 0.08); +} + +#LookingGlassDialog>#Toolbar .lg-toolbar-button:hover { + background-color: rgba(255, 255, 255, 0.13); +} + +.lg-dialog StEntry { + background-color: rgba(48, 48, 48, 0.6); + color: white; + border-color: rgba(255, 255, 255, 0.2); + min-height: 16px; + selection-background-color: ACCENT-COLOR; + selected-color: #fff; +} + +.lg-extension { + border-radius: 12px; +} + +.lg-debug-flag-button .toggle-switch { + margin: 5px; + border-radius: 10px; + height: 26px; + padding: 0; +} + + +/* Aylur's widgets */ +.quick-settings.tweaked .media, +.quick-settings.tweaked .message, +.popup-menu-content .message, +.quick-settings.tweaked .quick-container { + background-color: SECTION-COLOR; + border-radius: 16px; + border: none; +} + +.quick-settings.tweaked .quick-container .quick-slider { + margin: 2.5px 0 2.5px 0; +} + +.quick-settings.tweaked .quick-container .quick-slider:first-child { + margin: 0 0 2.5px 0; +} + +.quick-settings.tweaked .quick-container .quick-slider:last-child { + margin: 2.5px 0 0 0; +} + +.quick-settings.tweaked .quick-container .quick-slider:first-child:last-child { + margin: 0; +} + +.quick-settings.tweaked .media { + font-weight: 500; +} + +.quick-settings.adjusted .quick-toggle .quick-toggle-arrow:ltr { + border-radius: 0 36px 36px 0; +} + +.quick-settings.adjusted .quick-toggle .quick-toggle-arrow:rtl { + border-radius: 36px 0 0 36px; +} + +.usage-level StIcon { + width: 1.29em; +} \ No newline at end of file diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css deleted file mode 100644 index be7508b..0000000 --- a/gnome-shell/gnome-shell.css +++ /dev/null @@ -1,1301 +0,0 @@ -/* Raw Marble shell theme for GNOME DE -Copyright (C) 2023 Vladyslav Hroshev - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU General Public License as published by -the Free Software Foundation, either version 3 of the License, or -(at your option) any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU General Public License for more details. - -You should have received a copy of the GNU General Public License -along with this program. If not, see . */ - - -stage { - color: TEXT-PRIMARY-COLOR; -} - -.workspace-background{ - border: 1px solid BORDER-SHADOW; -} - - -/* panel */ -#panel{ - background-color: BACKGROUND-COLOR; - height: 38px; - font-size: 14px; -} - -#panel:overview{ - background-color: transparent; -} - -#panel .screencast-indicator, -#panel .remote-access-indicator { - color: #cd9309; } - -#panel .panel-button.screen-recording-indicator { - background:#c01c28; -} - -#panel .panel-button.screen-sharing-indicator { - background: #cd9309; -} - -#panel .panel-button.screen-recording-indicator:hover { - background: rgba(192, 28, 40, 0.9); -} - -#panel .panel-button.screen-sharing-indicator:hover { - background: rgba(205, 147, 9, 0.9); -} - -.panel-button, -.clock, -.clock-display StIcon{ - color: TEXT-PRIMARY-COLOR; - border-radius: 14px; - border: 4px solid transparent; - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} -.clock-display StIcon{ - padding: 8px; - margin: 0; -} - -#panel .power-status.panel-status-indicators-box StIcon { - font-size: 14px; -} - -.panel-button:hover, -.panel-button:hover .clock, -.panel-button:active, -.panel-button:overview, /* activites */ -.panel-button:active .clock{ - background-color: ACCENT-DISABLED_HOVER; -} - -#panel .power-status.panel-status-indicators-box { - font-size: 12px; -} - -/* date-menu-mod */ -.clock-display{ - background-color: transparent !important; - box-shadow: none !important; - border: none !important; -} -.clock{ - margin: 0 !important; -} - -/* clock fix by Aylur's widgets */ -#panel .panel-button.clock-display{ - -natural-hpadding: 0; - -minimum-hpadding: 0; -} -.datemenu-calendar-column{ padding-left: 0; padding-right: 0; } /* if notifications are hidden, make the column centered */ -.datemenu-user{ padding: 30px;} -.datemenu-user > StButton{ - width: 160px; - height: 160px; - padding: 2px; - border-radius: 99px; - margin-bottom: 12px; -} -.datemenu-user > StButton > StWidget{ border-radius: 99px; } -.datemenu-levels{ spacing: 8px; } - - -/* Activities Ripple */ -.ripple-box { - background-color: ACCENT-OPACITY-COLOR; - box-shadow: 0 0 2px 2px ACCENT-OPACITY-COLOR; -} - - -/* POPOVERS */ -.popup-menu-content, .candidate-popup-content { - color: TEXT-PRIMARY-COLOR; - background: BACKGROUND-COLOR; - padding: 10px; - border-radius: 20px; - border: 1px solid BORDER-MENU-SHADOW; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); -} - -.popup-menu-item, .app-menu { - margin: 3px 1.5px; -} - -.popup-menu-item:focus, .popup-menu-item:hover, .popup-menu-item:checked { - background-color: ACCENT-DISABLED-COLOR !important; - box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; - color: TEXT-PRIMARY-COLOR; -} - -.popup-menu-item:checked { - border-radius: 12px 12px 0 0; -} - -.popup-menu-item:active { - background-color: ACCENT-DISABLED_HOVER; - color: TEXT-PRIMARY-COLOR; -} - -/* 44 separator margin fix */ -.popup-separator-menu-item { - padding: 0 !important; -} - -.popup-separator-menu-item .popup-separator-menu-item-separator { - height: 1px; - margin: 6px 0; - background-color: SEPARATOR-COLOR; -} - -.popup-separator-menu-item-separator:ltr { - margin-right: 4.5px; } -.popup-separator-menu-item-separator:rtl { - margin-left: 4.5px; } - -.popup-sub-menu { - background-color: ACCENT-DISABLED-COLOR; - color: TEXT-PRIMARY-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - border-radius: 0 0 12px 12px; - margin: 0 1.5px 2px 1.5px; -} - -.popup-sub-menu .popup-menu-item { - margin: 0; - color: TEXT-PRIMARY-COLOR; - -} - -.popup-sub-menu .popup-menu-item:last-child { - border-radius: 0 0 12px 12px; -} - -.popup-sub-menu .popup-menu-item:hover, .popup-sub-menu .popup-menu-item:focus { - background-color: ACCENT-DISABLED_HOVER !important; -} - -.popup-menu-item:insensitive { color: TEXT-DISABLED-COLOR; margin: 0; } - -.popup-inactive-menu-item { color: TEXT-PRIMARY-COLOR; background-color: transparent; } - -.popup-inactive-menu-item:insensitive { color: TEXT-SECONDARY-COLOR !important; } - -.calendar .calendar-nonwork-day { color: TEXT-PRIMARY-COLOR; } - - -/* calendar */ -#calendarArea { padding: 0; } - -.datemenu-calendar-column { - spacing: 5px; } - .datemenu-calendar-column:ltr { - padding-left: 6px; } - .datemenu-calendar-column:rtl { - padding-right: 6px; } - .datemenu-calendar-column .datemenu-displays-box { - spacing: 5px; } - -/* calendar header */ -.datemenu-today-button { - color: TEXT-SECONDARY-COLOR; - background-color: none; - border-radius: 12px; -} - -.datemenu-today-button:hover { - transition-duration: 100ms; - background-color: ACCENT-DISABLED-COLOR; -} - -.datemenu-today-button:focus { - transition-duration: 100ms; - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; -} - -.day-label { - font-weight: 600; -} - -.date-label { - font-weight: 700; -} - -/* calendar-days */ -.calendar-day-base, .calendar-month-header .pager-button { - color: TEXT-PRIMARY-COLOR; - border-radius: 10px; -} - -.calendar-month-label{ - color: TEXT-PRIMARY-COLOR; -} - -.calendar-day-base, .calendar .calendar-month-header .pager-button { transition-duration: 100ms; } - -.calendar-day-base:hover, -.calendar-day-base:focus, -.calendar-day-base:active:hover, -.calendar-day-base:selected:hover, -.calendar .calendar-month-header .pager-button:hover, -.calendar .calendar-month-header .pager-button:focus { - background-color: ACCENT-DISABLED_HOVER; - color: TEXT-PRIMARY-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.calendar-day-base:active, -.calendar-day-base:selected { - background: ACCENT-DISABLED_HOVER; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.calendar-today, -.calendar-today:selected { - background-color: ACCENT-COLOR; - color: TEXT-PRIMARY-COLOR !important; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.calendar-today:hover, -.calendar-today:selected:hover { - background-color: ACCENT_HOVER; -} - -.calendar .calendar-day-with-events { - background-image: url("calendar-today.svg"); - background-size: contain; - font-weight: 700; -} - - -/* events */ -.calendar { - border-radius: 14px; - background-color: SECTION-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; - padding: 5px; -} - - -.events-button, -.world-clocks-button, -.weather-button { - background-color: SECTION-COLOR; - color: TEXT-SECONDARY-COLOR; - border-radius: 14px; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.events-button:hover, -.world-clocks-button:hover, -.weather-button:hover { - background-color: ACCENT-DISABLED-COLOR; -} - -.events-button:focus, -.world-clocks-button:focus, -.weather-button:focus { - box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; -} - -.weather-button .weather-header, -.events-button .events-title, -.world-clocks-button .world-clocks-header { color: TEXT-PRIMARY-COLOR; } - -.events-button .event-time { color: TEXT-SECONDARY-COLOR; } - -.events-button:active, -.world-clock-button:active, -.weather-button:active { background-color: ACCENT-DISABLED_HOVER; } - -.world-clocks-button .world-clocks-time, -.world-clocks-button .world-clocks-city, -.world-clocks-button .world-clocks-timezone { color: TEXT-SECONDARY-COLOR; } - -.weather-button .weather-forecast-time { color: TEXT-SECONDARY-COLOR; } - - -/* message-list */ -.message-list { - border: none; - padding: 0; -} - -.message-list-sections:ltr { - margin-right: 0px; } -.message-list-sections:rtl { - margin-left: 0px; -} - -.message { - background: BACKGROUND-COLOR; - color: TEXT-PRIMARY-COLOR; - border-radius: 18px; - border: none; - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; -} - -.message:focus { - box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; -} - -.message-list .message { - background-color: SECTION-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - transition-duration: 100ms; -} - -.message-list .message:hover { - background-color: ACCENT-DISABLED-COLOR; -} - -.message .message-body, .message-title { - color: TEXT-PRIMARY-COLOR; -} - -.message-dialog-content .message-dialog-title { - font-weight: 700; -} - -.message .message-secondary-bin > .event-time { - color: TEXT-SECONDARY-COLOR; -} - -.message-close-button { - border-radius: 9px; - color: TEXT-PRIMARY-COLOR; - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - transition-duration: 100ms; -} - -.message-close-button:hover { - background-color: ACCENT-DISABLED_HOVER; -} - -.message-close-button:active { - color: TEXT-SECONDARY-COLOR; -} - - -/* Media Controls */ -.message-media-control { - border-radius: 12px; - padding: 0 14px; - margin: 20px 2px; - color: TEXT-PRIMARY-COLOR; - transition-duration: 100ms;} - .message-media-control:hover { - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - color: TEXT-PRIMARY-COLOR; } - .message-media-control:insensitive { - color: TEXT-DISABLED-COLOR } - .message-media-control:last-child:ltr { - margin-right: 20px; } - .message-media-control:last-child:rtl { - margin-left: 12px; } - .message-media-control StIcon { - icon-size: 1.09em; - } - -.media-message-cover-icon { - icon-size: 3.2em !important; - border-radius: 12px; -} - -.media-message-cover-icon.fallback { - color: TEXT-PRIMARY-COLOR; - background-color: ACCENT-DISABLED_HOVER; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - border-radius: 12px; - icon-size: 1.6em !important; - padding: 0.79em; -} - - -/* Check Boxes */ -.check-box StBoxLayout { - spacing: .8em; } - -.check-box StBin { - width: 24px; - height: 24px; - background-image: url("checkbox-off.svg"); -} - -.check-box:focus StBin { - background-image: url("checkbox-off-focused.svg"); -} - -.check-box:checked StBin { - background-image: url("checkbox.svg"); -} - -.check-box:focus:checked StBin { - background-image: url("checkbox-focused.svg"); -} - - -/* Toggles */ -.toggle-switch { - background-image: url("./toggle-off.svg"); - background-color: ACCENT-DISABLED_HOVER; - border-radius: 10px; - box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; -} -.toggle-switch:checked { - background-image: url("./toggle-on.svg"); - background-color: ACCENT-COLOR; -} - - -/* Do Not Distrub toggle */ -.dnd-button { - width: 48px; - border-radius: 10px; -} - -.dnd-button .toggle-switch { - background-color: ACCENT-DISABLED-COLOR; -} - -.dnd-button:hover .toggle-switch { - background-color: ACCENT-DISABLED_HOVER; -} - -.dnd-button .toggle-switch:checked { - background-color: ACCENT-COLOR; -} - -.dnd-button:hover .toggle-switch:checked { - background-color: ACCENT_HOVER; -} - -.dnd-button:focus { - border-color: transparent; -} - -.dnd-button:focus .toggle-switch { - box-shadow: inset 0 0 0 1px ACCENT-SECONDARY-COLOR !important; -} - - -.button { - color: TEXT-PRIMARY-COLOR; - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.button:insensitive { - box-shadow: none; - color: TEXT-SECONDARY-COLOR; -} - -.button:hover, .button:active { - background-color: ACCENT-DISABLED_HOVER; -} - -.message-list-clear-button { - border-radius: 9px; - background-color: SECTION-COLOR; - padding: 3px 15px; - color: TEXT-PRIMARY-COLOR; -} - -.message-list-clear-button:focus { - box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; -} - -/* quick-settings */ -.quick-settings { - padding: 18px; - border-radius: 24px; -} - -.icon-button { - background-color: ACCENT-DISABLED-COLOR; - color: TEXT-PRIMARY-COLOR; - transition-duration: 100ms; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.icon-button:hover { - background-color: ACCENT-DISABLED_HOVER; -} - - -.quick-toggle, .quick-menu-toggle .quick-toggle { - color: TEXT-PRIMARY-COLOR; - border-radius: 15px; - background-color: ACCENT-DISABLED-COLOR; - transition-duration: 100ms; -} - -.quick-menu-toggle .quick-toggle:ltr { - border-radius: 15px 0 0 15px; } -.quick-menu-toggle .quick-toggle:rtl { - border-radius: 0 15px 15px 0; } -.quick-menu-toggle .quick-toggle:last-child { - border-radius: 15px; -} - -.quick-menu-toggle .quick-toggle-arrow:ltr { border-radius: 0 15px 15px 0; } -.quick-menu-toggle .quicl-toggle-arrow:rtl { border-radius: 15px 0 0 15px; } - -.quick-toggle:hover, .quick-menu-toggle .quick-toggle:hover, .quick-menu-toggle .quick-toggle-arrow:hover { - background-color: ACCENT-DISABLED_HOVER; -} - -.quick-toggle:checked, .quick-menu-toggle .quick-toggle:checked, .quick-menu-toggle .quick-toggle-arrow:checked { - color: TEXT-PRIMARY-COLOR; - background-color: ACCENT-COLOR; -} - -.quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:hover { - background-color: ACCENT_HOVER; -} - -.quick-menu-toggle .quick-toggle-arrow:ltr { - margin-left: 1px; -} -.quick-menu-toggle .quick-toggle-arrow:rtl { - margin-right: 1px; -} - -.quick-slider .slider-bin { - padding: 2px 1px; - margin: 0px; - color: TEXT-PRIMARY-COLOR; -} -.quick-slider .slider-bin:focus { - background-color: ACCENT-DISABLED-COLOR; -} - -.icon-button:focus, .quick-toggle:focus, .slider-bin:focus { box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; } - -.quick-toggle .quick-toggle-label { - font-weight: 600; -} - -.quick-slider .icon-button { - background-color: BACKGROUND-COLOR; - box-shadow: none; - padding: 6px; - border-radius: 11px; - transition-duration: 150ms; -} - -.quick-slider .icon-button:hover { - background-color: ACCENT-DISABLED-COLOR; - color: TEXT-PRIMARY-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.quick-toggle-menu { - background-color: BACKGROUND-COLOR; - border-radius: 20px; - color: TEXT-PRIMARY-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -/* connect / disconnect text color */ -.device-subtitle { - color: TEXT-SECONDARY-COLOR; } - -.quick-toggle-menu .header .icon { - background-color: ACCENT-COLOR; - border-radius: 12px; - icon-size: 1.4em; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.level-bar { - padding: 0; - background-color: ACCENT-DISABLED-COLOR; -} - -/* background apps */ -.background-apps-quick-toggle { - background-color: transparent; -} - -.background-apps-quick-toggle:hover { - background-color: ACCENT-DISABLED-COLOR; -} - -.background-apps-quick-toggle:focus { - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR; -} - -.background-app-item .title { - color: TEXT-PRIMARY-COLOR; - font-weight: 600; -} - -.background-app-item .close-button { - color: TEXT-PRIMARY-COLOR; - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.background-app-item .close-button:hover { - background-color: ACCENT-DISABLED_HOVER; -} - - -/* Notifications */ -.notification-banner{ - background-color: BACKGROUND-COLOR; - color: TEXT-PRIMARY-COLOR; -} - -.notification-button:active{ - background-color: ACCENT-COLOR; - color: TEXT-PRIMARY-COLOR; -} - - -/* slider */ -.slider, -.level { - height: 16px; - -barlevel-height: 16px; - -barlevel-background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - /* fill */ - -barlevel-active-background-color: ACCENT-COLOR; - /* overfill */ - -barlevel-overdrive-color: #c01c28; - -barlevel-overdrive-separator-width: 2px; - -slider-handle-radius: 7px; -} - - -/* Scroll bar */ -StScrollBar { - padding: 0; } - StScrollView StScrollBar { - min-width: 8px; - min-height: 8px;} - StScrollBar StBin#trough { - border-radius: 0; - background-color: transparent; } - StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { - border-radius: 8px; - background-color: SCROLLBAR-COLOR; - border: 3px solid transparent; - transition-duration: 100ms; } - StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: SCROLLBAR_HOVER; } - StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { - background-color: SCROLLBAR_ACTIVE; } - - -/* overview-ws-thumbnail */ -.workspace-thumbnail { - border: none; - /* border-radius: 9px; */ - background-color: ACCENT-DISABLED-COLOR; - border: 1px solid BORDER-SHADOW; -} - -.workspace-thumbnails .placeholder { - background-image: url("workspace-placeholder.svg"); - background-size: contain; - width: 18px; -} - -.workspace-thumbnail-indicator { - background-color: ACCENT-OPACITY-COLOR; - border-color: TEXT-DISABLED-COLOR; - border-width: 1px; - border-radius: 3px; -} - - -/* overview */ -#overviewGroup, .workspace-animation { - background-color: BACKGROUND-COLOR; -} - -.workspace-background { - border-radius: 20px; - box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); -} - -.window-caption { - spacing: 20px; - border-radius: 10px; - color: TEXT-PRIMARY-COLOR; - background-color: BACKGROUND-COLOR; - border: 1px solid BORDER-SHADOW; - padding: 4px 8px; -} - - -/* App icons */ -.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon { - box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); /* fix default dash focused box-shadow*/ - transition-duration: 100ms; - border-radius: 20px; - color: TEXT-PRIMARY-COLOR; /* ubuntu fix */ -} - -.app-well-app:hover .overview-icon, -.app-well-app:focus .overview-icon, -.app-well-app:selected .overview-icon, -.show-apps:hover .overview-icon, -.show-apps:focus .overview-icon, -.app-well-app.app-folder .overview-icon { - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - background-color: ACCENT-DISABLED-COLOR; -} - -.app-well-app.app-folder .overview-icon { - background-color: ACCENT-DISABLED_HOVER; -} - -.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon, -.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon { - border: 2px solid ACCENT-SECONDARY-COLOR; - background-color: ACCENT-OPACITY-COLOR; -} - - -/* folder dialog */ -.app-folder-dialog { - border-radius: 32px; - background-color: BACKGROUND-COLOR; - border: none; - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; -} - -.app-folder-dialog .app-well-app:hover .overview-icon, -.app-folder-dialog .app-well-app:focus .overview-icon { - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 1px solid BORDER-SHADOW; -} - -.app-folder-dialog .folder-name-container { color: TEXT-PRIMARY-COLOR; } - -.app-folder-dialog .folder-name-container .folder-name-label { - padding: 5px 7px; - color: TEXT-PRIMARY-COLOR; - font-weight: 700; - transition-duration: 100ms; -} - -.app-folder-dialog .folder-name-container .folder-name-entry { - font-weight: 700; - border: none; - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; - background-color: ACCENT-DISABLED-COLOR; - selection-background-color: ACCENT-COLOR; - selected-color: TEXT-PRIMARY-COLOR; /* ubuntu fix */ -} - -.app-folder-dialog .folder-name-container .edit-folder-button { - border-radius: 12px; - background-color: ACCENT-DISABLED-COLOR; - color: TEXT-PRIMARY-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.app-folder-dialog .folder-name-container .edit-folder-button:hover { - background-color: ACCENT-DISABLED_HOVER; -} - -.app-folder-dialog .folder-name-container .edit-folder-button:focus { box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important; } - -.page-indicator .page-indicator-icon { background-color: TEXT-SECONDARY-COLOR; } - -.page-navigation-arrow { - border-radius: 99px; - color: TEXT-PRIMARY-COLOR; - transition-duration: 100ms; -} - -.page-navigation-arrow > StIcon { - margin: 0; -} - -.page-navigation-arrow:hover { - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.page-navigation-arrow:hover > StIcon { - background-color: rgba(0, 0, 0, 0); -} - -.page-navigation-arrow:active { - background-color: ACCENT-DISABLED_HOVER; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.page-navigation-hint.next:ltr, .page-navigation-hint.previous:rtl { - background-gradient-start: PAGE-NAV-HINT; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl { - background-gradient-end: PAGE-NAV-HINT; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - - -/* Dash */ -#dash .dash-background { - background-color: DASH-COLOR; - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; - padding: 4px 2px 4px 2px; - border-radius: 21px; -} - -#dashtodockContainer #dash .dash-background { - border: none; - border-radius: 18px; /* ubuntu fix */ - transition-duration: 250ms; -} - -#dashtodockContainer.overview #dash .dash-background { - box-shadow: inset 0 0 0 1.5px BORDER-MENU-SHADOW; - background-color: DASH_OVERVIEW; -} - - -.dash-label { - background-color: BACKGROUND-COLOR; - color: TEXT-PRIMARY-COLOR; - border-radius: 11px; - border: none; /* ubuntu fix */ - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; -} - -.app-well-app-running-dot { - width: 10px; - height: 5px; - border-radius: 5px; - background: ACCENT-SECONDARY-COLOR; - transition-duration: 100ms; -} - -#dash .app-well-app-running-dot { - margin-bottom: 6px; } - -.dash-item-container .app-well-app .overview-icon, -.dash-item-container .show-apps .overview-icon { - border-radius: 21px; -} - -#dash .app-well-app:hover .overview-icon, -#dash .app-well-app:focus .overview-icon, -#dash .app-well-app:selected .overview-icon, -#dash .show-apps:hover .overview-icon, -#dash .show-apps:focus .overview-icon { - box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED; - background-color: rgba(255, 255, 255, 0.1); -} - -/* ubuntu fix */ -#dashtodockContainer #dash .app-well-app:hover .overview-icon, -#dashtodockContainer #dash .app-well-app:focus .overview-icon, -#dashtodockContainer #dash .app-well-app:selected .overview-icon, -#dashtodockContainer #dash .show-apps:hover .overview-icon, -#dashtodockContainer #dash .show-apps:focus .overview-icon, -#dashtodockContainer .show-apps:selected .overview-icon, -#dashtodockContainer .show-apps:selected:hover .overview-icon, -#dashtodockContainer .show-apps:active .overview-icon, -#dashtodockContainer .show-apps:checked .overview-icon, -#dashtodockContainer .app-well-app.focused .overview-icon { - border-radius: 15px; /* ubuntu fix*/ -} - -#dashtodockContainer .app-well-app.focused .overview-icon, -.show-apps:selected .overview-icon, -.show-apps:selected:hover .overview-icon, -.show-apps:active .overview-icon, -.show-apps:checked .overview-icon { - box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED; -} - -/* ubuntu fix */ -#dashtodockContainer.bottom.extended #dash .dash-background, #dashtodockContainer.bottom.extended.dashtodock #dash .dash-background, #dashtodockContainer.bottom.extended.shrink #dash .dash-background, -#dashtodockContainer.top.extended #dash .dash-background, #dashtodockContainer.top.extended.dashtodock #dash .dash-background, #dashtodockContainer.top.extended.shrink #dash .dash-background, -#dashtodockContainer.left.extended #dash .dash-background, #dashtodockContainer.left.extended.dashtodock #dash .dash-background, #dashtodockContainer.left.extended.shrink #dash .dash-background, -#dashtodockContainer.right.extended #dash .dash-background, #dashtodockContainer.right.extended.dashtodock #dash .dash-background, #dashtodockContainer.right.extended.shrink #dash .dash-background { - border-radius: 0; - background-color: DASH-COLOR; - box-shadow: none; - transition-duration: 250ms; -} - -/* animation fix */ -#dashtodockContainer.bottom.extended.overview #dash .dash-background, #dashtodockContainer.bottom.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.bottom.extended.overview.shrink #dash .dash-background, -#dashtodockContainer.top.extended.overview #dash .dash-background, #dashtodockContainer.top.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.top.extended.overview.shrink #dash .dash-background, -#dashtodockContainer.left.extended.overview #dash .dash-background, #dashtodockContainer.left.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.left.extended.overview.shrink #dash .dash-background, -#dashtodockContainer.right.extended.overview #dash .dash-background, #dashtodockContainer.right.extended.overview.dashtodock #dash .dash-background, #dashtodockContainer.right.extended.overview.shrink #dash .dash-background { - background-color: BACKGROUND-COLOR; } - -#dash .app-well-app:hover .app-well-app-running-dot { width: 15px; } - -#dashtodockContainer .app-well-app.focused .app-well-app-running-dot { width: 20px; } - -.dash-separator { - box-shadow: 0 0 0 0.25px TEXT-DISABLED-COLOR; -} - -.show-apps .overview-icon { - color: SHOW-APPS-ICON-COLOR; -} - - -/* Search */ -StEntry{ - border-radius: 13px; - padding: 8px; - transition-duration: 100ms; - border: 1px solid BORDER-SHADOW; - background-color: SECTION-COLOR; - color: TEXT-SECONDARY-COLOR; - selection-background-color: ACCENT-COLOR; - selected-color: TEXT-PRIMARY-COLOR; /* ubuntu fix */ -} - -StEntry StLabel { - color: TEXT-PRIMARY-COLOR; -} - -StEntry StLabel:insensitive { - color: TEXT-SECONDARY-COLOR; -} - -StEntry:hover, StEntry:focus, StEntry:active { - border: 1px solid TEXT-DISABLED-COLOR; - background-color: ACCENT-DISABLED-COLOR; - box-shadow: none; -} - -StEntry:focus { - color: TEXT-PRIMARY-COLOR; -} - -.search-section-content{ - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - border-radius: 15px; - border: none; - background-color: SECTION-COLOR; - color:TEXT-PRIMARY-COLOR; -} - -.list-search-result .list-search-result-title { color: TEXT-PRIMARY-COLOR; } /* ubuntu fix */ - -.list-search-result .list-search-result-description { color: TEXT-SECONDARY-COLOR; } - -.search-provider-icon .list-search-provider-content .list-search-provider-details { - width: 120px; - color: TEXT-PRIMARY-COLOR; } - -.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: ACCENT-DISABLED_HOVER; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.list-search-result:active, .search-provider-icon:active{ - background-color: ACCENT-DISABLED_HOVER; - color: TEXT-PRIMARY-COLOR; -} - - -/* OSD */ -.modal-dialog { - border-radius: 18px; - background-color: BACKGROUND-COLOR; - border: none; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - color: TEXT-PRIMARY-COLOR; -} - -.switcher-list, -.resize-popup, -.workspace-switcher, -.osd-window { - border-radius: 18px; - background: BACKGROUND-COLOR; - color: TEXT-PRIMARY-COLOR; - box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.05); - border: none; - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; -} - -.ws-switcher-indicator { background-color: TEXT-SECONDARY-COLOR; } - -.switcher-list .item-box:hover, -.switcher-list .item-box:focus, -.switcher-list .item-box:selected{ - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.modal-dialog-linked-button, .notification-button, .hotplug-notification-item { - padding: 10px 0 !important; - border-radius: 12px !important; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - background-color: ACCENT-DISABLED-COLOR; - color:TEXT-PRIMARY-COLOR; - animation-duration: 100ms; -} - -.modal-dialog-linked-button:first-child, .notification-button:first-child, .hotplug-notification-item:first-child { - margin: 0 6px 12px 12px !important; -} - -.modal-dialog-linked-button:last-child, .notification-button:last-child, .hotplug-notification-item:last-child { - margin: 0 12px 12px 6px !important; -} - -.modal-dialog-linked-button:first-child:last-child, .notification-button:first-child:last-child, .hotplug-notification-item:first-child:last-child { - margin: 0 12px 12px 12px !important; -} - -.modal-dialog-linked-button, .notification-button, .hotplug-notification-item { - margin: 0 6px 12px 6px !important; -} - -.modal-dialog-linked-button:hover, -.modal-dialog-linked-button:focus, -.notification-button:hover, -.notification-button:focus { - background: ACCENT-DISABLED_HOVER; - color: TEXT-PRIMARY-COLOR; -} - -.modal-dialog-linked-button:last-child { - background-color: ACCENT-COLOR; -} - -.modal-dialog-linked-button:last-child:hover, -.modal-dialog-linked-button:last-child:focus { - background-color: ACCENT_HOVER; -} - -.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus { - animation-duration: 100ms; - box-shadow: inset 0 0 0 1px TEXT-DISABLED-COLOR !important; } - .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover, .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active { - box-shadow: inset 0 0 0 1px TEXT-SECONDARY-COLOR !important; } - -.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive { - color: TEXT-SECONDARY-COLOR; - background-color: ACCENT_HOVER; -} - -.prompt-dialog-password-entry { - background-color: SECTION-COLOR; -} - -.nm-dialog-scroll-view{ - border: 1px solid BORDER-SHADOW; -} -.nm-dialog-item:selected{ - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - - - -/* screenshot ui */ -.screenshot-ui-panel { - border-radius: 22px; - background-color: BACKGROUND-COLOR; - border: 0; /* ubuntu fix */ - box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; - color: TEXT-PRIMARY-COLOR; -} - -.screenshot-ui-show-pointer-button, .screenshot-ui-type-button { - border-radius: 15px; - transition-duration: 100ms; -} - -.screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked, -.screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover, -.screenshot-ui-show-pointer-button:checked:focus, .screenshot-ui-type-button:checked:focus { - background-color: ACCENT-DISABLED_HOVER; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - color: TEXT-PRIMARY-COLOR; -} - -.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover, -.screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus { - background: ACCENT-DISABLED-COLOR; - color: TEXT-PRIMARY-COLOR; -} - -.screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive { - color: TEXT-DISABLED-COLOR; -} - -.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover, -.screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active { - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.screenshot-ui-window-selector { - background-color: SECTION-COLOR; -} - -.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border { - border-color: ACCENT-COLOR; -} - -.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border { - border-color: ACCENT-COLOR; - background-color: ACCENT-OPACITY-COLOR; -} - -.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check { - color: TEXT-PRIMARY-COLOR; - background-color: ACCENT-COLOR; -} - -.screenshot-ui-capture-button { - width: 36px; - height: 36px; - border-radius: 99px; - border: 4px ACCENT-SECONDARY-COLOR; - padding: 4px; } - .screenshot-ui-capture-button .screenshot-ui-capture-button-circle { - background-color: ACCENT-SECONDARY-COLOR; - transition-duration: 100ms; - border-radius: 99px; } - .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus { - background-color: ACCENT-SECONDARY_HOVER; } - .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle { - background-color: ACCENT-SECONDARY_HOVER; } - .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle { - background-color: #c01c28; } - .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle { - background-color: #d61f2d; } - .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle { background-color: #a11722;} - -.screenshot-ui-shot-cast-container { - background-color: ACCENT-DISABLED-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; -} - -.screenshot-ui-shot-cast-button { - background-color: transparent; - transition-duration: 100ms; -} - -.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus, .screenshot-ui-shot-cast-button:active { - background-color: ACCENT-DISABLED_HOVER; -} - -.screenshot-ui-shot-cast-button:checked { - background-color: ACCENT-SECONDARY-COLOR; - color: TEXT-INVERTED-COLOR; -} - -.screenshot-ui-tooltip { - color: TEXT-PRIMARY-COLOR; - background-color: BACKGROUND-COLOR; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; - border-radius: 10px; - padding: 6px 12px; - text-align: center; - -y-offset: 24px; -} - - -/* Tiled window previews */ -.tile-preview { - background-color: ACCENT-OPACITY-COLOR; - border: 1px solid ACCENT-COLOR; -} - -.window-close, .screenshot-ui-close-button { - background-color: CLOSE-BUTTON-COLOR; - color: TEXT-PRIMARY-COLOR; - border: 1px solid BORDER-SHADOW; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); - transition-duration: 100ms; -} - -.window-close:hover, .screenshot-ui-close-button:hover { - background-color: CLOSE-BUTTON_HOVER; -} - - -/* Looking Glass | R.I.P. custom colors & light mode */ -#LookingGlassDialog { - border-radius: 14px; - margin: 5px; - background-color: #191919; - border: 1px solid rgba(255, 255, 255, 0.06); - box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); -} - -#LookingGlassDialog .notebook-tab, #LookingGlassDialog > #Toolbar .lg-toolbar-button { border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); } - -#LookingGlassDialog > #Toolbar .lg-toolbar-button, #LookingGlassDialog .notebook-tab:selected { background-color: rgba(255, 255, 255, 0.08); } -#LookingGlassDialog > #Toolbar .lg-toolbar-button:hover { background-color: rgba(255, 255, 255, 0.13); } - -.lg-dialog StEntry { - background-color: rgba(48, 48, 48, 0.6); - color: white; - border-color: rgba(255, 255, 255, 0.2); - min-height: 16px; - selection-background-color: ACCENT-COLOR; - selected-color: #fff; } - -.lg-extension { - border-radius: 12px; -} - -.lg-debug-flag-button .toggle-switch { - margin: 5px; - border-radius: 10px; - height: 26px; - padding: 0; } - - -/* Aylur's widgets */ -.quick-settings.tweaked .media, -.quick-settings.tweaked .message, -.popup-menu-content .message, -.quick-settings.tweaked .quick-container { - background-color: SECTION-COLOR; - border-radius: 16px; - border: none; -} - -.quick-settings.tweaked .quick-container .quick-slider { margin: 2.5px 0 2.5px 0; } -.quick-settings.tweaked .quick-container .quick-slider:first-child { margin: 0 0 2.5px 0; } -.quick-settings.tweaked .quick-container .quick-slider:last-child { margin: 2.5px 0 0 0; } -.quick-settings.tweaked .quick-container .quick-slider:first-child:last-child { margin: 0; } - -.quick-settings.tweaked .media { font-weight: 500; } - -.quick-settings.adjusted .quick-toggle .quick-toggle-arrow:ltr { border-radius: 0 36px 36px 0; } -.quick-settings.adjusted .quick-toggle .quick-toggle-arrow:rtl { border-radius: 36px 0 0 36px; } - -.usage-level StIcon{ width: 1.29em; } \ No newline at end of file diff --git a/install.py b/install.py index d34064a..1ed1ce1 100644 --- a/install.py +++ b/install.py @@ -22,102 +22,23 @@ import argparse import textwrap -def destination_return(path_name, theme_mode): +def generate_file(folder, final_file): """ - Copied/modified gnome-shell theme location - :param path_name: color name - :param theme_mode: theme name (light or dark) - :return: copied files' folder location + Combines all files in a folder into a single file + :param folder: source folder + :param final_file: location where file will be created """ - return f"~/.themes/Marble-{path_name}-{theme_mode}/gnome-shell" + opened_file = open(final_file, "w") + + for file in os.listdir(folder): + opened_file.write(open(folder + file).read() + '\n') + + opened_file.close() -def copy_files(source, destination): - """ - Copy files from the source to another directory - :param source: where files will be copied - :param destination: where files will be pasted - """ - - destinationDirs = destination.split("/") - loopCreateDirs = f"{destinationDirs[0]}/" - - # create necessary folders - for i in range(1, len(destinationDirs)): - loopCreateDirs += f"{destinationDirs[i]}/" - os.system(f"mkdir -p {loopCreateDirs}") - - os.system(f"cp -aT {source} {destination}") - - -def apply_theme_to_file(hue, destination, theme_mode, apply_file, sat=None): - """ - Install accent colors from colors.json to different file - :param hue - :param destination: file directory - :param theme_mode: theme name (light or dark) - :param apply_file: file name - :param sat: color saturation (optional) - """ - - with open(os.path.expanduser(f"{destination}/{apply_file}"), "r") as file: - edit_file = file.read() - - # colorsys works in range(0, 1) - h = hue / 360 - for element in colors["elements"]: - # convert to range(0, 1) - lightness = int(colors["elements"][element][theme_mode]["l"]) / 100 - saturation = int(colors["elements"][element][theme_mode]["s"]) / 100 if sat is None else int( - colors["elements"][element][theme_mode]["s"]) * (sat / 100) / 100 - alpha = colors["elements"][element][theme_mode]["a"] - - # convert hsl to rgb and multiple every item - red, green, blue = [int(item * 256) for item in colorsys.hls_to_rgb(h, lightness, saturation)] - - replace_keyword = colors["elements"][element]["replace"] - - edit_file = edit_file.replace(replace_keyword, f"rgba({red}, {green}, {blue}, {alpha})") - - with open(os.path.expanduser(f"{destination}/{apply_file}"), "w") as file: - file.write(edit_file) - - -def apply_theme(hue, destination, theme_mode, sat=None): - """ - Apply theme to all files listed in "apply-theme-files" (colors.json) - :param hue - :param destination: file directory - :param theme_mode: theme name (light or dark) - :param sat: color saturation (optional) - """ - - for apply_file in os.listdir("./gnome-shell/"): - apply_theme_to_file(hue, destination, theme_mode, apply_file, sat=sat) - - -def install_color(hue, name, theme_mode, sat=None): - """ - Copy files and generate theme with different accent color - :param hue - :param name: theme name - :param theme_mode: light or dark mode - :param sat: color saturation (optional) - """ - - print(f"Creating {name} {', '.join(theme_mode)} theme...", end=" ") - - try: - for mode in theme_mode: - copy_files("./gnome-shell", destination_return(name, mode)) - apply_theme(hue, destination_return(name, mode), mode, sat=sat) - - except Exception as err: - print("\nError: " + str(err)) - - else: - print("Done.") +def concatenate_files(file, edit_file): + open(edit_file, 'a').write('\n' + open(file).read()) def remove_files(): @@ -167,6 +88,126 @@ def remove_files(): print(f"The path {path} does not exist.") +def destination_return(path_name, theme_mode): + """ + Copied/modified gnome-shell theme location + :param path_name: color name + :param theme_mode: theme name (light or dark) + :return: copied files' folder location + """ + + return f"~/.themes/Marble-{path_name}-{theme_mode}/gnome-shell" + + +def copy_files(source, destination): + """ + Copy files from the source to another directory + :param source: where files will be copied + :param destination: where files will be pasted + """ + + destination_dirs = destination.split("/") + loop_create_dirs = f"{destination_dirs[0]}/" + + # create necessary folders + for i in range(1, len(destination_dirs)): + loop_create_dirs += f"{destination_dirs[i]}/" + os.system(f"mkdir -p {loop_create_dirs}") + + os.system(f"cp -aT {source} {destination}") + + +def apply_colors(hue, destination, theme_mode, apply_file, sat=None): + """ + Install accent colors from colors.json to different file + :param hue + :param destination: file directory + :param theme_mode: theme name (light or dark) + :param apply_file: file name + :param sat: color saturation (optional) + """ + + with open(os.path.expanduser(f"{destination}/{apply_file}"), "r") as file: + edit_file = file.read() + + # colorsys works in range(0, 1) + h = hue / 360 + for element in colors["elements"]: + # convert to range(0, 1) + lightness = int(colors["elements"][element][theme_mode]["l"]) / 100 + saturation = int(colors["elements"][element][theme_mode]["s"]) / 100 if sat is None else int( + colors["elements"][element][theme_mode]["s"]) * (sat / 100) / 100 + alpha = colors["elements"][element][theme_mode]["a"] + + # convert hsl to rgb and multiple every item + red, green, blue = [int(item * 256) for item in colorsys.hls_to_rgb(h, lightness, saturation)] + + replace_keyword = colors["elements"][element]["replace"] + + edit_file = edit_file.replace(replace_keyword, f"rgba({red}, {green}, {blue}, {alpha})") + + with open(os.path.expanduser(f"{destination}/{apply_file}"), "w") as file: + file.write(edit_file) + + +def apply_theme(hue, destination, theme_mode, sat=None): + """ + Apply theme to all files listed in "apply-theme-files" (colors.json) + :param hue + :param destination: file directory + :param theme_mode: theme name (light or dark) + :param sat: color saturation (optional) + """ + + for apply_file in os.listdir("./gnome-shell/"): + apply_colors(hue, destination, theme_mode, apply_file, sat=sat) + + +def install_color(hue, name, theme_mode, sat=None): + """ + Copy files and generate theme with different accent color + :param hue + :param name: theme name + :param theme_mode: light or dark mode + :param sat: color saturation (optional) + """ + + print(f"Creating {name} {', '.join(theme_mode)} theme...", end=" ") + + try: + for mode in theme_mode: + copy_files("./gnome-shell", destination_return(name, mode)) + + apply_theme(hue, destination_return(name, mode), mode, sat=sat) + + except Exception as err: + print("\nError: " + str(err)) + + else: + print("Done.") + + +def hex_to_rgba(hex_color): + """ + Convert hex(a) to rgba + :param hex_color: input value + """ + + try: + if len(hex_color) in range(6, 10): + hex_color = hex_color.lstrip('#') + "ff" + # is convertable + int(hex_color[:], 16) + else: + raise ValueError + + except ValueError: + raise ValueError(f'Error: Invalid HEX color code: {hex_color}') + + else: + return int(hex_color[0:2], 16), int(hex_color[2:4], 16), int(hex_color[4:6], 16), int(hex_color[6:8], 16) / 255 + + def main(): parser = argparse.ArgumentParser(prog="python install.py", formatter_class=argparse.RawDescriptionHelpFormatter, @@ -207,10 +248,32 @@ def main(): color_tweaks.add_argument('--sat', type=int, choices=range(0, 251), help='custom color saturation (<100%% - reduce, >100%% - increase)', metavar='(0 - 250)%') + # Add arguments for panel tweaks + panel_args = parser.add_argument_group('Panel tweaks') + panel_args.add_argument('-Pds', '--panel_default_size', action='store_true', help='set default panel size') + panel_args.add_argument('-Pnp', '--panel_no_pill', action='store_true', help='remove panel button background') + panel_args.add_argument('-Ptc', '--panel_text_color', type=str, nargs='?', help='custom panel HEX(A) text color') + args = parser.parse_args() mode = [args.mode] if args.mode else ['light', 'dark'] + generate_file("./css/", gnome_shell_css) + + if args.panel_default_size: + concatenate_files("./tweaks/panel/def-size.css", gnome_shell_css) + + if args.panel_no_pill: + concatenate_files("./tweaks/panel/no-pill.css", gnome_shell_css) + + if args.panel_text_color: + open('./gnome-shell/gnome-shell.css', 'a') \ + .write(".panel-button,\ + .clock,\ + .clock-display StIcon {\ + color: rgba(" + ', '.join(map(str, hex_to_rgba(args.panel_text_color))) + ");\ + }") + # Process the arguments and perform the installation accordingly if args.remove: remove_files() @@ -242,6 +305,9 @@ def main(): if __name__ == "__main__": - colors = json.load(open("colors.json")) # used as database for replacing colors, files which must be generated + gnome_shell_css = "./gnome-shell/gnome-shell.css" + colors = json.load(open("colors.json")) # used as database for replacing colors main() + + os.remove("./gnome-shell/gnome-shell.css") diff --git a/readme-images/tweaks/panel-default-size.png b/readme-images/tweaks/panel-default-size.png new file mode 100644 index 0000000..62ec1f7 Binary files /dev/null and b/readme-images/tweaks/panel-default-size.png differ diff --git a/readme-images/tweaks/panel-no-pill.png b/readme-images/tweaks/panel-no-pill.png new file mode 100644 index 0000000..1933d4d Binary files /dev/null and b/readme-images/tweaks/panel-no-pill.png differ diff --git a/tweaks/panel/def-size.css b/tweaks/panel/def-size.css new file mode 100644 index 0000000..ceddd9b --- /dev/null +++ b/tweaks/panel/def-size.css @@ -0,0 +1,11 @@ +/* default panel size */ +#panel{ + height: 2.2em; + font-size: 15px; +} +.panel-button, +.clock, +.clock-display StIcon { + border-radius: 99px; + border: 3px solid transparent; +} \ No newline at end of file diff --git a/tweaks/panel/no-pill.css b/tweaks/panel/no-pill.css new file mode 100644 index 0000000..9e538d5 --- /dev/null +++ b/tweaks/panel/no-pill.css @@ -0,0 +1,14 @@ +.panel-button, +.clock, +.clock-display StIcon { + background-color: transparent; + box-shadow: none; +} +.panel-button:hover, +.panel-button:hover .clock, +.panel-button:active, +.panel-button:overview, /* activites */ +.panel-button:active .clock { + background-color: ACCENT-DISABLED_HOVER; + box-shadow: inset 0 0 0 1px BORDER-SHADOW; +} \ No newline at end of file