From 8bbbefcb03cbc14cde8e28ea46edad17a40f6710 Mon Sep 17 00:00:00 2001 From: Vladyslav Hroshev Date: Sun, 12 Mar 2023 22:34:53 +0200 Subject: [PATCH] Major 44 update Popup menus have smaller paddings Popup menu items have bigger margins Fixed popup menu item white text color when dark theme is off (44) Popup separators (44) have similar margins as in 43 Add message bg color in on hover as in the standard theme Quick menu toggles (44) (43 toggles are too rounded now) Quick slider icon button less padding Background apps (44) Add border for workspace thumbnail indicator Set app icons border radius to 20px App folder dialog have less border radius (44) Default borders fix (44) Page navigation arrow fix (44) Set dash paddings to 4px, box shadow to 1px Change input field border color on focus Change modal dialog borders Screenshot ui some missing styles fix --- README.md | 10 +- colors.json | 6 +- gnome-shell/gnome-shell.css | 196 ++++++++++++++++++++++++++---------- 3 files changed, 151 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index eebd198..6804c96 100644 --- a/README.md +++ b/README.md @@ -35,10 +35,10 @@ Wallpaper: https://www.androidpolice.com/chromebook-chrome-os-wallpapers/#radian ![Dash look](./readme-images/dash.png?raw=true "Dash look") ## Requirements -- GNOME 43+. I do not guarantee correct functionality on older versions. +- GNOME 43, 44. I do not 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.10+. +- Python 3.2+. ## Installation 1. Open terminal. @@ -48,10 +48,10 @@ git clone https://github.com/imarkoff/Marble-shell-theme.git && cd Marble-shell- ``` 3. Run the program: ```shell -python install.py +python install.py -h ``` 4. Follow instructions inside the program. -5. After successful file creation open up GNOME Tweaks, go to `Appearance - Themes - Shell`. +5. After successful file creation open GNOME Tweaks, go to `Appearance - Themes - Shell`. 6. Select shell theme you want. ## Installation tweaks @@ -67,7 +67,7 @@ You can install several themes in one string: `python install.py --red --green - | --purple | | purple theme only | | --blue | | blue theme only | | --green | | green theme only | -| --yellow | | pink theme only | +| --yellow | | yellow theme only | | --gray | | gray theme only | #### Install custom color diff --git a/colors.json b/colors.json index 6f1c412..365ceae 100644 --- a/colors.json +++ b/colors.json @@ -136,8 +136,8 @@ }, "dark" : { - "s" : 0, - "l" : 7, + "s" : 5, + "l" : 20, "a" : 0.7 } }, @@ -147,7 +147,7 @@ "light" : { "s" : 60, "l" : 90, - "a" : 0.4 + "a" : 0.8 }, "dark" : { diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css index 2c62122..af44571 100644 --- a/gnome-shell/gnome-shell.css +++ b/gnome-shell/gnome-shell.css @@ -121,26 +121,23 @@ stage { /* POPOVERS */ -.popup-menu-content { +.popup-menu-content, .candidate-popup-content { color: TEXT-PRIMARY-COLOR; background: BACKGROUND-COLOR; - padding: 16px; + padding: 10px; border-radius: 20px; border: 1px solid BORDER-MENU-SHADOW; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); } -.candidate-popup-content { - padding: 13.5px 16px; -} - .popup-menu-item, .app-menu { - margin: 2.5px 0 2.5px 0; + 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; + box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; + color: TEXT-PRIMARY-COLOR; } .popup-menu-item:checked { @@ -152,18 +149,28 @@ stage { 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: 2.5px 0; + 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 2.5px 0; + margin: 0 0 2px 0; } .popup-sub-menu .popup-menu-item { @@ -221,7 +228,7 @@ stage { } /* calendar-days */ -.calendar-day-base, .calendar-month-header .pager-button{ +.calendar-day-base, .calendar-month-header .pager-button { color: TEXT-PRIMARY-COLOR; border-radius: 10px; } @@ -321,9 +328,9 @@ stage { .message { background: BACKGROUND-COLOR; color: TEXT-PRIMARY-COLOR; - border-radius: 16px; + border-radius: 18px; border: none; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; } .message:focus { @@ -332,6 +339,12 @@ stage { .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 { @@ -346,7 +359,7 @@ stage { color: TEXT-SECONDARY-COLOR; } -.message-close-button{ +.message-close-button { border-radius: 9px; color: TEXT-PRIMARY-COLOR; background-color: ACCENT-DISABLED-COLOR; @@ -436,7 +449,7 @@ stage { /* Do Not Distrub toggle */ -.dnd-button{ +.dnd-button { width: 48px; border-radius: 10px; } @@ -494,7 +507,7 @@ stage { /* quick-settings */ .quick-settings { - padding: 20px; + padding: 18px; border-radius: 24px; } @@ -505,31 +518,57 @@ stage { box-shadow: inset 0 0 0 1px BORDER-SHADOW; } -.icon-button:hover, -.quick-toggle:hover { +.icon-button:hover { background-color: ACCENT-DISABLED_HOVER; } -.quick-toggle { + +.quick-toggle, .quick-menu-toggle .quick-toggle { color: TEXT-PRIMARY-COLOR; - border-radius: 12px; - background: ACCENT-DISABLED-COLOR; + border-radius: 15px; + background-color: ACCENT-DISABLED-COLOR; transition-duration: 100ms; } -.quick-toggle:checked { +.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 { - background: ACCENT_HOVER; +.quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:hover { + background-color: ACCENT_HOVER; } -.slider-bin { +.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; } @@ -537,11 +576,11 @@ stage { font-weight: 600; } -.quick-toggle-arrow { border-radius: 0 12px 12px 0; } - .quick-slider .icon-button { background-color: BACKGROUND-COLOR; box-shadow: none; + padding: 6px; + border-radius: 11px; transition-duration: 150ms; } @@ -558,6 +597,10 @@ stage { 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; @@ -570,6 +613,35 @@ stage { 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{ @@ -634,12 +706,10 @@ StScrollBar { } .workspace-thumbnail-indicator { - border: none; background-color: ACCENT-OPACITY-COLOR; - /* border-color: ACCENT-COLOR; - border-width: 2px; */ - /* border-radius: 9px; */ - border-radius: 0px; + border-color: TEXT-DISABLED-COLOR; + border-width: 1px; + border-radius: 3px; } @@ -664,9 +734,10 @@ StScrollBar { /* App icons */ -.app-well-app .overview-icon { +.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 */ } @@ -693,8 +764,10 @@ StScrollBar { /* 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, @@ -714,7 +787,8 @@ StScrollBar { .app-folder-dialog .folder-name-container .folder-name-entry { font-weight: 700; - box-shadow: inset 0 0 0 1px BORDER-SHADOW; + 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 */ @@ -735,20 +809,27 @@ StScrollBar { .page-indicator .page-indicator-icon { background-color: TEXT-SECONDARY-COLOR; } -.page-navigation-arrow > StIcon { +.page-navigation-arrow { + border-radius: 99px; + color: TEXT-PRIMARY-COLOR; transition-duration: 100ms; - color: TEXT-SECONDARY-COLOR; } -.page-navigation-arrow:hover > StIcon { +.page-navigation-arrow > StIcon { + margin: 0; +} + +.page-navigation-arrow:hover { background-color: ACCENT-DISABLED-COLOR; - color:TEXT-PRIMARY-COLOR; box-shadow: inset 0 0 0 1px BORDER-SHADOW; } -.page-navigation-arrow:active > StIcon { +.page-navigation-arrow:hover > StIcon { + background-color: rgba(0, 0, 0, 0); +} + +.page-navigation-arrow:active { background-color: ACCENT-DISABLED_HOVER; - color: TEXT-PRIMARY-COLOR; box-shadow: inset 0 0 0 1px BORDER-SHADOW; } @@ -766,7 +847,9 @@ StScrollBar { /* Dash */ #dash .dash-background { background-color: DASH-COLOR; - box-shadow: inset 0 0 15px -10px ACCENT-SECONDARY-COLOR; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; + padding: 4px 2px 4px 2px; + border-radius: 21px; } #dashtodockContainer #dash .dash-background { @@ -797,6 +880,9 @@ StScrollBar { 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; @@ -866,7 +952,8 @@ StScrollBar { /* Search */ StEntry{ - border-radius: 12px; + border-radius: 13px; + padding: 8px; transition-duration: 100ms; border: 1px solid BORDER-SHADOW; background-color: SECTION-COLOR; @@ -884,7 +971,8 @@ StEntry StLabel:insensitive { } StEntry:hover, StEntry:focus, StEntry:active { - border: 1px solid ACCENT-COLOR; + border: 1px solid TEXT-DISABLED-COLOR; + background-color: ACCENT-DISABLED-COLOR; box-shadow: none; } @@ -922,25 +1010,27 @@ StEntry:focus { /* OSD */ -.modal-dialog{ - border-radius: 16px; +.modal-dialog { + border-radius: 18px; background-color: BACKGROUND-COLOR; - border: 1px solid BORDER-SHADOW; + 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: 22px; +.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: 1px solid BORDER-SHADOW; + border: none; + box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW; } -.ws-switcher-indicator{ background-color: TEXT-SECONDARY-COLOR; } +.ws-switcher-indicator { background-color: TEXT-SECONDARY-COLOR; } .switcher-list .item-box:hover, .switcher-list .item-box:focus, @@ -951,7 +1041,7 @@ StEntry:focus { .modal-dialog-linked-button, .notification-button, .hotplug-notification-item { padding: 10px 0 !important; - border-radius: 10px !important; + border-radius: 12px !important; box-shadow: inset 0 0 0 1px BORDER-SHADOW; background-color: ACCENT-DISABLED-COLOR; color:TEXT-PRIMARY-COLOR; @@ -995,7 +1085,7 @@ StEntry: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 BORDER-SHADOW !important; } + 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; @@ -1047,7 +1137,7 @@ StEntry:focus { color: TEXT-DISABLED-COLOR; } -.screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover +.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; }