Chillcraft/Marble-shell-theme
3
0
Fork 0
mirror of https://github.com/imarkoff/Marble-shell-theme.git synced 2025-11-26 23:46:03 -08:00
Code Issues Packages Projects Releases Wiki Activity

Major 44 update

Browse Source 
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
This commit is contained in:
Vladyslav Hroshev
2023-03-12 22:34:53 +02:00
parent 0eae7340e5
commit 8bbbefcb03
3 changed files with 151 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -35,10 +35,10 @@ Wallpaper: https://www.androidpolice.com/chromebook-chrome-os-wallpapers/#radian
![Dash look](./readme-images/dash.png?raw=true "Dash look") ![Dash look](./readme-images/dash.png?raw=true "Dash look")
## Requirements ## 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. - [User Themes](https://extensions.gnome.org/extension/19/user-themes/ "User Themes") extension.
- [GNOME Tweaks](https://gitlab.gnome.org/GNOME/gnome-tweaks "GNOME Tweaks"). - [GNOME Tweaks](https://gitlab.gnome.org/GNOME/gnome-tweaks "GNOME Tweaks").
- Python 3.10+. - Python 3.2+.
## Installation ## Installation
1. Open terminal. 1. Open terminal.
@@ -48,10 +48,10 @@ git clone https://github.com/imarkoff/Marble-shell-theme.git && cd Marble-shell-
``` ```
3. Run the program: 3. Run the program:
```shell ```shell
python install.py python install.py -h
``` ```
4. Follow instructions inside the program. 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. 6. Select shell theme you want.
## Installation tweaks ## Installation tweaks
@@ -67,7 +67,7 @@ You can install several themes in one string: `python install.py --red --green -
| --purple | | purple theme only | | --purple | | purple theme only |
| --blue | | blue theme only | | --blue | | blue theme only |
| --green | | green theme only | | --green | | green theme only |
| --yellow | | pink theme only | | --yellow | | yellow theme only |
| --gray | | gray theme only | | --gray | | gray theme only |
#### Install custom color #### Install custom color

6
colors.json
View File

@@ -136,8 +136,8 @@
}, },
"dark" : { "dark" : {
"s" : 0, "s" : 5,
"l" : 7, "l" : 20,
"a" : 0.7 "a" : 0.7
} }
}, },
@@ -147,7 +147,7 @@
"light" : { "light" : {
"s" : 60, "s" : 60,
"l" : 90, "l" : 90,
"a" : 0.4 "a" : 0.8
}, },
"dark" : { "dark" : {

196
gnome-shell/gnome-shell.css
View File

@@ -121,26 +121,23 @@ stage {
/* POPOVERS */ /* POPOVERS */
.popup-menu-content { .popup-menu-content, .candidate-popup-content {
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
background: BACKGROUND-COLOR; background: BACKGROUND-COLOR;
padding: 16px; padding: 10px;
border-radius: 20px; border-radius: 20px;
border: 1px solid BORDER-MENU-SHADOW; border: 1px solid BORDER-MENU-SHADOW;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
} }
.candidate-popup-content {
padding: 13.5px 16px;
}
.popup-menu-item, .app-menu { .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 { .popup-menu-item:focus, .popup-menu-item:hover, .popup-menu-item:checked {
background-color: ACCENT-DISABLED-COLOR !important; 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 { .popup-menu-item:checked {
@@ -152,18 +149,28 @@ stage {
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
} }
/* 44 separator margin fix */
.popup-separator-menu-item {
padding: 0 !important;
}
.popup-separator-menu-item .popup-separator-menu-item-separator { .popup-separator-menu-item .popup-separator-menu-item-separator {
height: 1px; height: 1px;
margin: 2.5px 0; margin: 6px 0;
background-color: SEPARATOR-COLOR; 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 { .popup-sub-menu {
background-color: ACCENT-DISABLED-COLOR; background-color: ACCENT-DISABLED-COLOR;
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
margin: 0 0 2.5px 0; margin: 0 0 2px 0;
} }
.popup-sub-menu .popup-menu-item { .popup-sub-menu .popup-menu-item {
@@ -221,7 +228,7 @@ stage {
} }
/* calendar-days */ /* calendar-days */
.calendar-day-base, .calendar-month-header .pager-button{ .calendar-day-base, .calendar-month-header .pager-button {
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
border-radius: 10px; border-radius: 10px;
} }
@@ -321,9 +328,9 @@ stage {
.message { .message {
background: BACKGROUND-COLOR; background: BACKGROUND-COLOR;
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
border-radius: 16px; border-radius: 18px;
border: none; border: none;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
} }
.message:focus { .message:focus {
@@ -332,6 +339,12 @@ stage {
.message-list .message { .message-list .message {
background-color: SECTION-COLOR; 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 { .message .message-body, .message-title {
@@ -346,7 +359,7 @@ stage {
color: TEXT-SECONDARY-COLOR; color: TEXT-SECONDARY-COLOR;
} }
.message-close-button{ .message-close-button {
border-radius: 9px; border-radius: 9px;
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
background-color: ACCENT-DISABLED-COLOR; background-color: ACCENT-DISABLED-COLOR;
@@ -436,7 +449,7 @@ stage {
/* Do Not Distrub toggle */ /* Do Not Distrub toggle */
.dnd-button{ .dnd-button {
width: 48px; width: 48px;
border-radius: 10px; border-radius: 10px;
} }
@@ -494,7 +507,7 @@ stage {
/* quick-settings */ /* quick-settings */
.quick-settings { .quick-settings {
padding: 20px; padding: 18px;
border-radius: 24px; border-radius: 24px;
} }
@@ -505,31 +518,57 @@ stage {
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
} }
.icon-button:hover, .icon-button:hover {
.quick-toggle:hover {
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
} }
.quick-toggle {
.quick-toggle, .quick-menu-toggle .quick-toggle {
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
border-radius: 12px; border-radius: 15px;
background: ACCENT-DISABLED-COLOR; background-color: ACCENT-DISABLED-COLOR;
transition-duration: 100ms; 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; color: TEXT-PRIMARY-COLOR;
background-color: ACCENT-COLOR; background-color: ACCENT-COLOR;
} }
.quick-toggle:checked:hover { .quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle:checked:hover, .quick-menu-toggle .quick-toggle-arrow:checked:hover {
background: ACCENT_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; padding: 2px 1px;
margin: 0px;
color: TEXT-PRIMARY-COLOR; 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; } .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; font-weight: 600;
} }
.quick-toggle-arrow { border-radius: 0 12px 12px 0; }
.quick-slider .icon-button { .quick-slider .icon-button {
background-color: BACKGROUND-COLOR; background-color: BACKGROUND-COLOR;
box-shadow: none; box-shadow: none;
padding: 6px;
border-radius: 11px;
transition-duration: 150ms; transition-duration: 150ms;
} }
@@ -558,6 +597,10 @@ stage {
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
} }
/* connect / disconnect text color */
.device-subtitle {
color: TEXT-SECONDARY-COLOR; }
.quick-toggle-menu .header .icon { .quick-toggle-menu .header .icon {
background-color: ACCENT-COLOR; background-color: ACCENT-COLOR;
border-radius: 12px; border-radius: 12px;
@@ -570,6 +613,35 @@ stage {
background-color: ACCENT-DISABLED-COLOR; 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 */ /* Notifications */
.notification-banner{ .notification-banner{
@@ -634,12 +706,10 @@ StScrollBar {
} }
.workspace-thumbnail-indicator { .workspace-thumbnail-indicator {
border: none;
background-color: ACCENT-OPACITY-COLOR; background-color: ACCENT-OPACITY-COLOR;
/* border-color: ACCENT-COLOR; border-color: TEXT-DISABLED-COLOR;
border-width: 2px; */ border-width: 1px;
/* border-radius: 9px; */ border-radius: 3px;
border-radius: 0px;
} }
@@ -664,9 +734,10 @@ StScrollBar {
/* App icons */ /* 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*/ box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); /* fix default dash focused box-shadow*/
transition-duration: 100ms; transition-duration: 100ms;
border-radius: 20px;
color: TEXT-PRIMARY-COLOR; /* ubuntu fix */ color: TEXT-PRIMARY-COLOR; /* ubuntu fix */
} }
@@ -693,8 +764,10 @@ StScrollBar {
/* folder dialog */ /* folder dialog */
.app-folder-dialog { .app-folder-dialog {
border-radius: 32px;
background-color: BACKGROUND-COLOR; background-color: BACKGROUND-COLOR;
border: none; 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:hover .overview-icon,
@@ -714,7 +787,8 @@ StScrollBar {
.app-folder-dialog .folder-name-container .folder-name-entry { .app-folder-dialog .folder-name-container .folder-name-entry {
font-weight: 700; 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; background-color: ACCENT-DISABLED-COLOR;
selection-background-color: ACCENT-COLOR; selection-background-color: ACCENT-COLOR;
selected-color: TEXT-PRIMARY-COLOR; /* ubuntu fix */ selected-color: TEXT-PRIMARY-COLOR; /* ubuntu fix */
@@ -735,20 +809,27 @@ StScrollBar {
.page-indicator .page-indicator-icon { background-color: TEXT-SECONDARY-COLOR; } .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; 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; background-color: ACCENT-DISABLED-COLOR;
color:TEXT-PRIMARY-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; 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; background-color: ACCENT-DISABLED_HOVER;
color: TEXT-PRIMARY-COLOR;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
} }
@@ -766,7 +847,9 @@ StScrollBar {
/* Dash */ /* Dash */
#dash .dash-background { #dash .dash-background {
background-color: DASH-COLOR; 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 { #dashtodockContainer #dash .dash-background {
@@ -797,6 +880,9 @@ StScrollBar {
transition-duration: 100ms; transition-duration: 100ms;
} }
#dash .app-well-app-running-dot {
margin-bottom: 6px; }
.dash-item-container .app-well-app .overview-icon, .dash-item-container .app-well-app .overview-icon,
.dash-item-container .show-apps .overview-icon { .dash-item-container .show-apps .overview-icon {
border-radius: 21px; border-radius: 21px;
@@ -866,7 +952,8 @@ StScrollBar {
/* Search */ /* Search */
StEntry{ StEntry{
border-radius: 12px; border-radius: 13px;
padding: 8px;
transition-duration: 100ms; transition-duration: 100ms;
border: 1px solid BORDER-SHADOW; border: 1px solid BORDER-SHADOW;
background-color: SECTION-COLOR; background-color: SECTION-COLOR;
@@ -884,7 +971,8 @@ StEntry StLabel:insensitive {
} }
StEntry:hover, StEntry:focus, StEntry:active { 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; box-shadow: none;
} }
@@ -922,25 +1010,27 @@ StEntry:focus {
/* OSD */ /* OSD */
.modal-dialog{ .modal-dialog {
border-radius: 16px; border-radius: 18px;
background-color: BACKGROUND-COLOR; background-color: BACKGROUND-COLOR;
border: 1px solid BORDER-SHADOW; border: none;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
} }
.switcher-list, .switcher-list,
.resize-popup, .resize-popup,
.workspace-switcher, .workspace-switcher,
.osd-window{ .osd-window {
border-radius: 22px; border-radius: 18px;
background: BACKGROUND-COLOR; background: BACKGROUND-COLOR;
color: TEXT-PRIMARY-COLOR; color: TEXT-PRIMARY-COLOR;
box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.05); 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:hover,
.switcher-list .item-box:focus, .switcher-list .item-box:focus,
@@ -951,7 +1041,7 @@ StEntry:focus {
.modal-dialog-linked-button, .notification-button, .hotplug-notification-item { .modal-dialog-linked-button, .notification-button, .hotplug-notification-item {
padding: 10px 0 !important; padding: 10px 0 !important;
border-radius: 10px !important; border-radius: 12px !important;
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
background-color: ACCENT-DISABLED-COLOR; background-color: ACCENT-DISABLED-COLOR;
color:TEXT-PRIMARY-COLOR; color:TEXT-PRIMARY-COLOR;
@@ -995,7 +1085,7 @@ StEntry:focus {
animation-duration: 100ms; animation-duration: 100ms;
box-shadow: inset 0 0 0 1px TEXT-DISABLED-COLOR !important; } 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 { .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 { .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
color: TEXT-SECONDARY-COLOR; color: TEXT-SECONDARY-COLOR;
@@ -1047,7 +1137,7 @@ StEntry:focus {
color: TEXT-DISABLED-COLOR; 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 { .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
box-shadow: inset 0 0 0 1px BORDER-SHADOW; box-shadow: inset 0 0 0 1px BORDER-SHADOW;
} }