diff --git a/colors.json b/colors.json
index 109327d..1f65814 100644
--- a/colors.json
+++ b/colors.json
@@ -24,7 +24,7 @@
"accent-disabled_hover" : {
"replace" : "ACCENT-DIS_HOVER",
"s" : 7,
- "l" : 21,
+ "l" : 20,
"a" : 1
},
@@ -59,7 +59,7 @@
"accent-secondary_hover" : {
"replace" : "ACCENT-SECONDARY_HOVER",
"s" : 20,
- "l" : 75,
+ "l" : 70,
"a" : 1
},
@@ -91,6 +91,13 @@
"a" : 0.38
},
+ "text-inverted-color": {
+ "replace" : "TEXT-INVERTED-COLOR",
+ "s" : 71,
+ "l" : 10,
+ "a" : 0.87
+ },
+
"border-shadow" : {
"replace" : "BORDER-SHADOW",
"s" : 0,
@@ -110,6 +117,34 @@
"s" : 65,
"l" : 95,
"a" : 1
+ },
+
+ "scrollbar-color" : {
+ "replace" : "SCROLLBAR-COLOR",
+ "s" : 10,
+ "l" : 35,
+ "a" : 0.75
+ },
+
+ "scrollbar_hover" : {
+ "replace" : "SCROLLBAR_HOVER",
+ "s" : 12,
+ "l" : 35,
+ "a" : 1
+ },
+
+ "scrollbar_active" : {
+ "replace" : "SCROLLBAR_ACTIVE",
+ "s" : 12,
+ "l" : 35,
+ "a" : 0.87
+ },
+
+ "page-nav-hint" : {
+ "replace" : "PAGE-NAV-HINT",
+ "s" : 15,
+ "l" : 90,
+ "a" : 0.05
}
},
@@ -166,7 +201,7 @@
"accent-secondary_hover" : {
"replace" : "ACCENT-SECONDARY_HOVER",
"s" : 20,
- "l" : 40,
+ "l" : 45,
"a" : 1
},
@@ -198,6 +233,13 @@
"a" : 0.38
},
+ "text-inverted-color" : {
+ "replace" : "TEXT-INVERTED-COLOR",
+ "s" : 65,
+ "l" : 95,
+ "a" : 1
+ },
+
"border-shadow" : {
"replace" : "BORDER-SHADOW",
"s" : 0,
@@ -217,6 +259,34 @@
"s" : 4,
"l" : 30,
"a" : 1
+ },
+
+ "scrollbar-color" : {
+ "replace" : "SCROLLBAR-COLOR",
+ "s" : 20,
+ "l" : 70,
+ "a" : 0.75
+ },
+
+ "scrollbar_hover" : {
+ "replace" : "SCROLLBAR_HOVER",
+ "s" : 20,
+ "l" : 70,
+ "a" : 1
+ },
+
+ "scrollbar_active" : {
+ "replace" : "SCROLLBAR_ACTIVE",
+ "s" : 20,
+ "l" : 70,
+ "a" : 0.87
+ },
+
+ "page-nav-hint" : {
+ "replace" : "PAGE-NAV-HINT",
+ "s" : 95,
+ "l" : 20,
+ "a" : 0.05
}
},
diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css
index 6e17d32..2012fa6 100644
--- a/gnome-shell/gnome-shell.css
+++ b/gnome-shell/gnome-shell.css
@@ -15,15 +15,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see . */
-/* colors */
-/* accent: ACCENT-COLOR */
-/* accent_hover: ACCENT_HOVER */
-/* accent-fg: BACKGROUND-COLOR */
-/* sections, accent-disabled, slider-background: ACCENT-DISABLED */
-/* accent-disabled_hover, workspace-thumbnails: ACCENT-DIS_HOVER */
-/* background: BACKGROUND-COLOR */
-/* screenshot-ui-window-selector-window-border, ripple-box: background-color: ACCENT-OPACITY-COLOR (ACCENT-COLOR5) */
-/* well-app-running-dot: ACCENT-SECONDARY-COLOR */
+stage {
+ color: TEXT-PRIMARY-COLOR;
+}
.workspace-background{
border: 1px solid BORDER-SHADOW;
@@ -98,9 +92,12 @@ along with this program. If not, see . */
/* POPOVERS */
.popup-menu-content {
+ color: TEXT-PRIMARY-COLOR;
+ background: BACKGROUND-COLOR;
padding: 16px;
- border-radius: 24px;
+ border-radius: 20px;
border: 1px solid BORDER-SHADOW;
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}
.popup-menu-item {
@@ -123,6 +120,7 @@ along with this program. If not, see . */
.popup-separator-menu-item .popup-separator-menu-item-separator {
height: 1px;
+ margin: 2.5px 0 2.5px 0;
background-color: SEPARATOR-COLOR;
}
@@ -135,14 +133,22 @@ along with this program. If not, see . */
}
.popup-sub-menu .popup-menu-item {
- background-color: ACCENT-DISABLED;
+ margin: 0;
color: TEXT-PRIMARY-COLOR;
- box-shadow: none;
+
+}
+
+.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-DIS_HOVER !important;
}
.popup-menu-item:insensitive { color: TEXT-DISABLED-COLOR; margin: 0; }
-.popup-inactive-menu-item { color: TEXT-PRIMARY-COLOR; }
+.popup-inactive-menu-item { color: TEXT-PRIMARY-COLOR; background-color: transparent; }
.popup-inactive-menu-item:insensitive { color: TEXT-SECONDARY-COLOR !important; }
@@ -154,33 +160,42 @@ along with this program. If not, see . */
.datemenu-calendar-column{ margin: 0px; }
-.pager-button:hover,
-.pager-button:focus{
- background-color: #595959;
- border-radius: 10px;
-}
-
-
-/* calendar-days */
-.calendar-day-base{
- color: TEXT-PRIMARY-COLOR;
- border-radius: 10px;
+/* calendar header */
+.datemenu-today-button {
+ color: TEXT-SECONDARY-COLOR;
+ background-color: none;
+ border-radius: 12px;
}
.datemenu-today-button:hover {
- transition-duration: 150ms;
- background-color: ACCENT-DISABLED; }
+ transition-duration: 100ms;
+ background-color: ACCENT-DISABLED;
+}
+
+.datemenu-today-button:focus {
+ transition-duration: 100ms;
+ background-color: ACCENT-DISABLED;
+ 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;
}
-.date-label,
-.day-label {
- color: TEXT-SECONDARY-COLOR;
- font-weight: 700;
-}
-
.calendar-day-base, .calendar .calendar-month-header .pager-button { transition-duration: 100ms; }
.calendar-day-base:hover,
@@ -221,7 +236,7 @@ along with this program. If not, see . */
/* events */
.calendar{
- border-radius: 11px;
+ border-radius: 12px;
background-color: ACCENT-DISABLED;
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
padding: 5px;
@@ -233,10 +248,16 @@ along with this program. If not, see . */
.weather-button{
background-color: ACCENT-DISABLED;
color: TEXT-SECONDARY-COLOR;
- border-radius: 11px;
+ border-radius: 12px;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
+.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; }
@@ -267,6 +288,11 @@ along with this program. If not, see . */
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
+.message:focus {
+ box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
+ border-radius: 12px;
+}
+
.message-list .message {
background: ACCENT-DISABLED;
}
@@ -284,11 +310,16 @@ along with this program. If not, see . */
}
.message-close-button{
- border-radius: 10px;
+ border-radius: 9px;
color: TEXT-PRIMARY-COLOR;
+ background-color: ACCENT-DIS_HOVER;
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
+.message-close-button:active {
+ color: TEXT-SECONDARY-COLOR;
+}
+
.message-media-control:active{
background-color: ACCENT-COLOR;
color: #0000;
@@ -297,7 +328,7 @@ along with this program. If not, see . */
/* Media Controls */
.message-media-control {
- border-radius: 9px;
+ border-radius: 12px;
padding: 0 18px;
margin: 16px 1px;
color: TEXT-PRIMARY-COLOR;
@@ -338,34 +369,51 @@ along with this program. If not, see . */
background-image: url("checkbox-focused.svg");
}
+
+/* Toggles */
.toggle-switch{
background-image: url("./toggle-off.svg");
background-color: ACCENT-DIS_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;
}
-.dnd-button:hover{
- background-color: ACCENT-DIS_HOVER !important;
- border: 1px solid transparent !important;
+
+/* Do Not Distrub toggle */
+.dnd-button{
+ width: 48px;
+ border-radius: 10px;
+}
+
+.dnd-button .toggle-switch {
+ background-color: ACCENT-DISABLED;
+}
+
+.dnd-button:hover .toggle-switch {
+ background-color: ACCENT-DIS_HOVER;
+}
+
+.dnd-button .toggle-switch:checked {
+ background-color: ACCENT-COLOR;
}
.dnd-button:hover .toggle-switch:checked {
background-color: ACCENT_HOVER;
}
-.dnd-button{
- width: 48px;
- border-radius: 10px;
- border: 1px solid BORDER-SHADOW;
- background-color: ACCENT-DISABLED;
- /* box-shadow: 0 2px 5px -4px black !important; */
- box-shadow: none !important;
+.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;
@@ -373,6 +421,7 @@ along with this program. If not, see . */
}
.button:insensitive{
box-shadow: none;
+ color: TEXT-SECONDARY-COLOR;
}
.button:hover, .button:active {
@@ -380,10 +429,13 @@ along with this program. If not, see . */
}
.message-list-clear-button{
- border-radius: 10px;
+ border-radius: 9px;
color: TEXT-PRIMARY-COLOR;
}
+.message-list-clear-button:focus {
+ box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
+}
/* quick-settings */
.icon-button{ box-shadow: inset 0 0 0 1px BORDER-SHADOW; }
@@ -396,7 +448,7 @@ along with this program. If not, see . */
color: TEXT-PRIMARY-COLOR;
border-radius: 12px;
background: ACCENT-DISABLED;
- transition-duration: 200ms;
+ transition-duration: 100ms;
}
.quick-toggle .quick-toggle-label {
@@ -431,6 +483,8 @@ along with this program. If not, see . */
color: TEXT-PRIMARY-COLOR;
}
+
+/* slider */
.slider,
.level {
height: 16px;
@@ -446,6 +500,26 @@ along with this program. If not, see . */
}
+/* 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: 500ms all ease; }
+ 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;
@@ -504,7 +578,7 @@ along with this program. If not, see . */
}
-/* APP-GRID */
+/* App icons */
.app-well-app .overview-icon {
box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); /* fix default dash focused box-shadow*/
transition-duration: 100ms;
@@ -524,6 +598,12 @@ along with this program. If not, see . */
background-color: ACCENT-DIS_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 {
@@ -563,7 +643,7 @@ along with this program. If not, see . */
background-color: ACCENT-DIS_HOVER;
}
-.page-indicator .page-indicator-icon { background-color: TEXT-PRIMARY-COLOR; }
+.page-indicator .page-indicator-icon { background-color: TEXT-SECONDARY-COLOR; }
.page-navigation-arrow:hover > StIcon {
transition-duration: 100ms;
@@ -579,6 +659,16 @@ along with this program. If not, see . */
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 {
@@ -599,7 +689,7 @@ along with this program. If not, see . */
height: 5px;
border-radius: 5px;
background: ACCENT-SECONDARY-COLOR;
- transition-duration: 200ms;
+ transition-duration: 100ms;
}
#dash .app-well-app:hover .overview-icon,
@@ -717,7 +807,7 @@ StEntry:focus {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
background-color: ACCENT-DISABLED;
color:TEXT-PRIMARY-COLOR;
- animation-duration: 200ms;
+ animation-duration: 100ms;
}
.modal-dialog-linked-button:first-child, .notification-button:first-child, .hotplug-notification-item:first-child {
@@ -755,10 +845,15 @@ StEntry:focus {
.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 BORDER-SHADOW !important; }
+ box-shadow: inset 0 0 0 0.25px ACCENT-SECONDARY-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; }
+.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: ACCENT-DISABLED;
}
@@ -769,19 +864,10 @@ StEntry:focus {
.nm-dialog-item:selected{
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
-
-.popup-menu-content {
- color: TEXT-PRIMARY-COLOR;
- background: BACKGROUND-COLOR;
- border-radius: 20px;
- box-shadow: inset 0 0 0 1px BORDER-SHADOW;
- }
- .system-menu-action {
+ .system-menu-action {
border-radius: 32px;
- /* wish we could do 50% */
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
- background: BACKGROUND-COLOR;
padding: 13px; }
.quick-toggle:checked {
@@ -820,14 +906,6 @@ StEntry:focus {
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}
-.level-bar { background-color: #595959; }
-
-stage {
- /* font-family: Roboto Reguler;*/
- /* font-size: 14px; */
- color: TEXT-PRIMARY-COLOR;
-}
-
/* screenshot ui */
.screenshot-ui-panel {
@@ -839,7 +917,7 @@ stage {
.screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
border-radius: 15px;
- transition-duration: 200ms;
+ transition-duration: 100ms;
}
.screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked,
@@ -890,12 +968,12 @@ stage {
padding: 4px; }
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
background-color: ACCENT-SECONDARY-COLOR;
- transition-duration: 200ms;
+ 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-DARK_HOVER; }
+ 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-DARK_HOVER; }
+ 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 {
@@ -908,7 +986,7 @@ stage {
.screenshot-ui-shot-cast-button {
background-color: transparent;
- transition-duration: 150ms;
+ transition-duration: 100ms;
}
.screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus, .screenshot-ui-shot-cast-button:active {
@@ -916,8 +994,8 @@ stage {
}
.screenshot-ui-shot-cast-button:checked {
- background-color: ACCENT-COLOR;
- color: TEXT-PRIMARY-COLOR;
+ background-color: ACCENT-SECONDARY-COLOR;
+ color: TEXT-INVERTED-COLOR;
}
.screenshot-ui-tooltip {
@@ -941,7 +1019,7 @@ stage {
background-color: ACCENT-DISABLED;
color:TEXT-PRIMARY-COLOR;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
- transition-duration: 150ms;
+ transition-duration: 100ms;
}
.window-close:hover, .screenshot-ui-close-button:hover {