diff --git a/gnome-shell/_common.scss b/gnome-shell/_common.scss index f6816ae..bb2cd83 100644 --- a/gnome-shell/_common.scss +++ b/gnome-shell/_common.scss @@ -1379,6 +1379,10 @@ StScrollBar { spacing: 24px; // } +#overview.cosmic-solid-bg { + background-color: $base_color !important; +} + .overview-controls { padding-bottom: 32px; } diff --git a/gnome-shell/_cosmic.scss b/gnome-shell/_cosmic.scss new file mode 100644 index 0000000..eb320c5 --- /dev/null +++ b/gnome-shell/_cosmic.scss @@ -0,0 +1,31 @@ + +/* Pop_OS COSMIC Dock styling, append !important to any changed rules */ + +.cosmic-dock #dock { + border-radius: 12px 12px 12px 12px !important; + border: 0 !important; + background-color: darken($bg_color, 3%); + margin: 4px !important; +} + +.cosmic-dock.extended #dock { + border-radius: 0px !important; + margin: 0 !important; } + +.cosmic-dock.extended.side #dock { + border-top-width: 0 !important; + border-bottom-width: 0 !important; } + +.cosmic-dock.extended.side.left #dock { + border-left-width: 0 !important; } + +.cosmic-dock.extended.side.right #dock { + border-right-width: 0 !important; } + +.cosmic-dock.extended.bottom #dock { + border-bottom-width: 0 !important; + border-left-width: 0 !important; + border-right-width: 0 !important; } + +.cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon { + border-radius: 11px; } \ No newline at end of file diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css index 41f0601..8f72da7 100644 --- a/gnome-shell/gnome-shell.css +++ b/gnome-shell/gnome-shell.css @@ -8,7 +8,7 @@ stage { /* WIDGETS */ /* Buttons */ -.button, .app-folder-dialog .edit-folder-button { +.button { color: #929ba8; background-color: #040405; box-shadow: none; @@ -19,26 +19,26 @@ stage { border-radius: 4px; border-width: 0; padding: 4px 32px; } - .button:focus, .app-folder-dialog .edit-folder-button:focus { + .button:focus { color: #0072ff; text-shadow: 0 1px black; icon-shadow: 0 1px black; box-shadow: none; border: 1px solid #161819; } - .button:insensitive, .app-folder-dialog .edit-folder-button:insensitive { + .button:insensitive { color: #51565d; background-color: rgba(30, 31, 35, 0.66); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); border: none; text-shadow: none; icon-shadow: none; } - .button:active, .app-folder-dialog .edit-folder-button:active { + .button:active { color: #0072ff; background-color: rgba(16, 16, 19, 0.95); border: 1px solid #161819; text-shadow: none; icon-shadow: none; } - .button:hover, .app-folder-dialog .edit-folder-button:hover { + .button:hover { color: #0072ff; background-color: #09090b; border: 1px solid #161819; @@ -663,10 +663,7 @@ StScrollBar { padding: 0px; spacing: 8px; } -.ws-switcher-active-up, -.ws-switcher-active-down, -.ws-switcher-active-left, -.ws-switcher-active-right { +.ws-switcher-active-up, .ws-switcher-active-down { height: 50px; background-color: #0072ff; color: #f7f7f7; @@ -716,7 +713,7 @@ StScrollBar { /* transition from solid to transparent */ transition-duration: 500ms; font-weight: bold; - height: 2.1em; + height: 1.86em; padding: 0px 0px; } #panel.unlock-screen, #panel.login-screen, #panel.lock-screen { background-color: transparent; } @@ -744,6 +741,10 @@ StScrollBar { -st-icon-style: symbolic; margin-left: 4px; margin-right: 4px; } + #panel .panel-button .system-status-icon, + #panel .panel-button .app-menu-icon > StIcon, + #panel .panel-button .popup-menu-arrow { + icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); } #panel .panel-button:hover { background: rgba(39, 39, 47, 0.95); color: white; @@ -756,6 +757,16 @@ StScrollBar { color: #f7f7f7; text-shadow: 0px 0px 2px rgba(92, 92, 92, 0.9); transition-duration: 200ms; } + #panel .panel-button:active .system-status-icon, + #panel .panel-button:active .app-menu-icon > StIcon, + #panel .panel-button:active .popup-menu-arrow, #panel .panel-button:overview .system-status-icon, + #panel .panel-button:overview .app-menu-icon > StIcon, + #panel .panel-button:overview .popup-menu-arrow, #panel .panel-button:focus .system-status-icon, + #panel .panel-button:focus .app-menu-icon > StIcon, + #panel .panel-button:focus .popup-menu-arrow, #panel .panel-button:checked .system-status-icon, + #panel .panel-button:checked .app-menu-icon > StIcon, + #panel .panel-button:checked .popup-menu-arrow { + icon-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9); } #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon { icon-shadow: red 0 2px 2px; } #panel .panel-button .system-status-icon { @@ -773,9 +784,9 @@ StScrollBar { .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active { color: #afb5be; } - #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { + #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked { box-shadow: none; } - #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { + #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock { box-shadow: none; } #panel .panel-status-indicators-box, #panel .panel-status-menu-box { @@ -803,8 +814,7 @@ StScrollBar { .calendar, .world-clocks-button, .weather-button, .events-button { background: transparent; - border: none; - color: #929ba8; } + border: none; } .calendar, .datemenu-today-button, @@ -1242,11 +1252,11 @@ StScrollBar { spacing: 12px; } /* OVERVIEW */ -#overview, .controls-manager, .secondary-monitor-workspaces { +#overview { spacing: 24px; } -#overviewGroup { - background-color: #202127; } +#overview.cosmic-solid-bg { + background-color: #202127 !important; } .overview-controls { padding-bottom: 32px; } @@ -1266,7 +1276,7 @@ StScrollBar { .window-caption { spacing: 20px; color: white; - background-color: rgba(4, 4, 5, 0.7); + background-color: rgba(16, 16, 19, 0.65); border-radius: 2px; padding: 4px 8px; } @@ -1274,17 +1284,21 @@ StScrollBar { width: 320px; padding: 9px; border-radius: 100px; - border: 1px solid #161819; + border: none; color: #929ba8; - background-color: #09090b; + background-color: rgba(16, 16, 19, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } + .search-entry:focus { + border-width: 0; + color: #929ba8; + background-color: rgba(16, 16, 19, 0.8); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .search-entry .search-entry-icon { icon-size: 1em; padding: 0 4px; color: rgba(146, 155, 168, 0.7); } .search-entry:hover, .search-entry:focus { - background-color: #09090b; - border-color: rgba(0, 114, 255, 0.8); } + background-color: rgba(16, 16, 19, 0.8); } .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon { color: #929ba8; } @@ -1335,12 +1349,26 @@ StScrollBar { padding: 15px; } /* DASHBOARD */ -.dash-background { - background-color: #09090b; } +#dash { + font-size: 9pt; + color: white; + background-color: rgba(16, 16, 19, 0.95); + padding: 6px 0; + border: 1px solid #161819; + border-left: 0px; + border-radius: 0px 5px 5px 0px; } + #dash:rtl { + border-radius: 9px 0 0 9px; } + #dash .placeholder { + background-image: url("assets/dash-placeholder.svg"); + background-size: contain; + height: 24px; } + #dash .empty-dash-drop-target { + width: 24px; + height: 24px; } -.dash-separator { - width: 1px; - background-color: #202026; } +.dash-item-container > StWidget { + padding: 4px 8px; } .dash-label { border-radius: 7px; @@ -1400,6 +1428,17 @@ StScrollBar { .show-apps, .grid-search-result { border: none; } + .app-well-app:active .overview-icon, + .app-well-app:checked .overview-icon, + .app-well-app.app-folder:active .overview-icon, + .app-well-app.app-folder:checked .overview-icon, + .show-apps:active .overview-icon, + .show-apps:checked .overview-icon, + .grid-search-result:active .overview-icon, + .grid-search-result:checked .overview-icon { + background-color: rgba(0, 0, 0, 0.85); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); + color: #929ba8; } .app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon, @@ -1412,21 +1451,10 @@ StScrollBar { .grid-search-result:hover .overview-icon, .grid-search-result:focus .overview-icon, .grid-search-result:selected .overview-icon { - background-color: black; + background-color: rgba(16, 16, 19, 0.5); transition-duration: 0ms; border-image: none; background-image: none; } - .app-well-app:active .overview-icon, - .app-well-app:checked .overview-icon, - .app-well-app.app-folder:active .overview-icon, - .app-well-app.app-folder:checked .overview-icon, - .show-apps:active .overview-icon, - .show-apps:checked .overview-icon, - .grid-search-result:active .overview-icon, - .grid-search-result:checked .overview-icon { - background-color: black; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); - color: #929ba8; } .app-well-app-running-dot { width: 4px; @@ -1442,26 +1470,13 @@ StScrollBar { .show-apps .overview-icon, .grid-search-result .overview-icon { color: #f7f7f7; + border-radius: 2px; padding: 7px 6px; border: none; transition-duration: 100ms; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } -/* App Folders */ -.app-well-app.app-folder { - background-color: #09090b; } - -.app-folder-dialog { - background-color: #09090b; } - .app-folder-dialog .edit-folder-button { - padding: 0; - width: 36px; - height: 36px; - border-radius: 18px; } - .app-folder-dialog .edit-folder-button > StIcon { - icon-size: 16px; } - .app-well-app.app-folder > .overview-icon { background-color: rgba(16, 16, 19, 0.35); } @@ -1558,7 +1573,7 @@ StScrollBar { .notification-banner:focus { background-color: rgba(16, 16, 19, 0.96); } .notification-banner * { - color: #929ba8; } + color: white; } .notification-banner .notification-icon { padding: 5px; } .notification-banner .notification-content { @@ -2072,3 +2087,32 @@ StScrollBar { .openweather-current-databox-captions, .openweather-forecast-day { color: #0072ff; } + +/* Pop_OS COSMIC Dock styling, append !important to any changed rules */ +.cosmic-dock #dock { + border-radius: 12px 12px 12px 12px !important; + border: 0 !important; + background-color: #09090b; + margin: 4px !important; } + +.cosmic-dock.extended #dock { + border-radius: 0px !important; + margin: 0 !important; } + +.cosmic-dock.extended.side #dock { + border-top-width: 0 !important; + border-bottom-width: 0 !important; } + +.cosmic-dock.extended.side.left #dock { + border-left-width: 0 !important; } + +.cosmic-dock.extended.side.right #dock { + border-right-width: 0 !important; } + +.cosmic-dock.extended.bottom #dock { + border-bottom-width: 0 !important; + border-left-width: 0 !important; + border-right-width: 0 !important; } + +.cosmic-dock .app-well-app:hover .overview-icon, .cosmic-dock .app-well-app:focus .overview-icon, .cosmic-dock .app-well-app:selected .overview-icon { + border-radius: 11px; } diff --git a/gnome-shell/gnome-shell.scss b/gnome-shell/gnome-shell.scss index f84c6f8..b287633 100644 --- a/gnome-shell/gnome-shell.scss +++ b/gnome-shell/gnome-shell.scss @@ -3,4 +3,5 @@ $subtheme: 'main'; @import "colors"; //use gtk colors @import "drawing"; @import "common"; -@import "extensions" \ No newline at end of file +@import "extensions"; +@import "cosmic" \ No newline at end of file