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; }