VesperOS/marble-shell-theme-packaging
6
0
Fork 0
Code Issues Pull Requests Actions 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
gnome-shell/gnome-shell.css
+143 -53
View File
@@ -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;
}