Skip to content

Commit

Permalink
Improvement: Gnome-shell - OSD transparency
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Oct 18, 2022
1 parent 77d85a6 commit 32b231f
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 88 deletions.
11 changes: 8 additions & 3 deletions gnome-shell/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,19 @@ $top_hilight: $borders_edge;
$top_highlight: transparentize(white, 0.9);
$bottom_highlight: transparentize(black, 0.9);

$headerbar_color: mix($base_color, darken($bg_color, 8%), 30%);

$warning_color: darken($orange,15%);
$error_color: darken( $red,5%);
$success_color: darken($cyan,10%);
$destructive_color: darken( #c72240,10%);

$osd_fg_color: $fg_color;
$osd_bg_color: transparentize($bg_color, 0.05);
$osd_borders_color: transparentize(black, 0.3);
//osd colors
$osd_fg_color: #fefefe;
$osd_bg_color: transparentize($headerbar_color, 0.2);
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(white, 0.9);
$osd_outer_borders_color: transparentize(white, 0.9);

$tooltip_borders_color: $osd_outer_borders_color;
Expand Down
4 changes: 2 additions & 2 deletions gnome-shell/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ $corner-radius: 2px;


/* GLOBALS */
$font-size: 12;
$font-size: 14;
$_bubble_bg_color: $osd_bg_color;
$_bubble_fg_color: $fg_color;
$_bubble_borders_color: $fg_color;
Expand Down Expand Up @@ -237,7 +237,7 @@ StScrollBar {
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
border: none;
border: 1px solid $osd_borders_color;
& .modal-dialog-linked-button:last-child {
@include gradient();
color: #fff;
Expand Down
1 change: 1 addition & 0 deletions gnome-shell/_extensions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@
***********************/

@import "extensions/_openweather";
@import "extensions/_arcmenu";
95 changes: 51 additions & 44 deletions gnome-shell/gnome-shell.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*****************/
/* GLOBALS */
stage {
font-size: 12pt;
font-size: 14pt;
color: #bfc3cd; }

/* WIDGETS */
Expand All @@ -28,14 +28,14 @@ stage {
border: 1px solid #0b0d16; }
.button:insensitive {
color: #676a75;
background-color: rgba(33, 36, 48, 0.66);
background-color: rgba(32, 33, 40, 0.54);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border: none;
text-shadow: none;
icon-shadow: none; }
.button:active {
color: #ff6a00;
background-color: rgba(14, 17, 29, 0.95);
background-color: rgba(5, 6, 11, 0.8);
border: 1px solid #0b0d16;
text-shadow: none;
icon-shadow: none; }
Expand All @@ -56,14 +56,14 @@ stage {
box-shadow: none; }
.modal-dialog-linked-button:insensitive {
color: #676a75;
background-color: rgba(33, 36, 48, 0.66);
background-color: rgba(32, 33, 40, 0.54);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border: none;
text-shadow: none;
icon-shadow: none; }
.modal-dialog-linked-button:active {
color: #ff6a00;
background-color: rgba(14, 17, 29, 0.95);
background-color: rgba(5, 6, 11, 0.8);
border: 1px solid #0b0d16;
text-shadow: none;
icon-shadow: none; }
Expand Down Expand Up @@ -220,8 +220,8 @@ StScrollBar {
.modal-dialog {
border: none;
border-radius: 2px;
color: #bfc3cd;
background-color: rgba(6, 7, 12, 0.95);
color: #fefefe;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
.modal-dialog .modal-dialog-content-box {
padding: 24px; }
Expand All @@ -235,14 +235,14 @@ StScrollBar {
.modal-dialog .run-dialog-button-box {
padding-top: 1em; }
.modal-dialog .run-dialog-label {
font-size: 13pt;
font-size: 15pt;
font-weight: bold;
color: #a2a8b7;
color: #e5e5e5;
padding-bottom: .4em; }

.mount-dialog-subject,
.end-session-dialog-subject {
font-size: 16pt; }
font-size: 18pt; }

/* Message Dialog */
.message-dialog-main-layout {
Expand All @@ -267,7 +267,7 @@ StScrollBar {
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
border: none; }
border: 1px solid rgba(255, 255, 255, 0.1); }
.end-session-dialog .modal-dialog-linked-button:last-child {
background-gradient-start: #ff3300 !important;
background-gradient-end: #ffa100 !important;
Expand Down Expand Up @@ -396,7 +396,7 @@ StScrollBar {
.prompt-dialog .message-dialog-content {
spacing: 16px; }
.prompt-dialog .message-dialog-title {
color: #778095; }
color: #bebebe; }

.prompt-dialog-description:rtl {
text-align: right; }
Expand Down Expand Up @@ -480,7 +480,7 @@ StScrollBar {
padding: 10px; }

.extension-dialog .message-dialog-title {
color: #778095; }
color: #bebebe; }

/* Inhibit-Shortcuts Dialog */
.inhibit-shortcuts-dialog {
Expand Down Expand Up @@ -590,7 +590,7 @@ StScrollBar {
.osd-window .level {
height: 0.4em;
border-radius: 0.3em;
color: #bfc3cd;
color: #fefefe;
border: 1px solid #0b0d16;
-barlevel-height: 0.4em;
-barlevel-background-color: rgba(0, 0, 0, 0.5);
Expand Down Expand Up @@ -687,15 +687,15 @@ StScrollBar {

.ws-switcher-box {
height: 50px;
border: 1px solid rgba(191, 195, 205, 0.1);
background: rgba(0, 0, 0, 0.95);
border: 1px solid rgba(254, 254, 254, 0.1);
background: rgba(0, 0, 0, 0.8);
border-radius: 8px; }

.osd-window,
.resize-popup,
.switcher-list, .workspace-switcher-container {
color: #bfc3cd;
background-color: rgba(14, 17, 29, 0.95);
background-color: rgba(5, 6, 11, 0.8);
border: none;
border-radius: 2px;
padding: 12px; }
Expand Down Expand Up @@ -1276,7 +1276,7 @@ StScrollBar {
.window-caption {
spacing: 20px;
color: white;
background-color: rgba(14, 17, 29, 0.65);
background-color: rgba(5, 6, 11, 0.5);
border-radius: 2px;
padding: 4px 8px; }

Expand Down Expand Up @@ -1306,13 +1306,13 @@ StScrollBar {
.list-search-result:focus, .search-provider-icon:hover,
.list-search-result:hover, .search-provider-icon:selected,
.list-search-result:selected {
background-color: rgba(191, 195, 205, 0.1);
background-color: rgba(254, 254, 254, 0.1);
transition-duration: 200ms; }

.search-provider-icon:active,
.list-search-result:active, .search-provider-icon:checked,
.list-search-result:checked {
background-color: rgba(0, 0, 0, 0.85); }
background-color: rgba(0, 0, 0, 0.7); }

#searchResultsBin {
max-width: 1000px; }
Expand Down Expand Up @@ -1435,7 +1435,7 @@ StScrollBar {
.show-apps:checked .overview-icon,
.grid-search-result:active .overview-icon,
.grid-search-result:checked .overview-icon {
background-color: rgba(2, 3, 5, 0.85);
background-color: rgba(0, 0, 0, 0.7);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
color: #bfc3cd; }
.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
Expand Down Expand Up @@ -1474,7 +1474,7 @@ StScrollBar {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

.app-well-app.app-folder > .overview-icon {
background-color: rgba(14, 17, 29, 0.35); }
background-color: rgba(5, 6, 11, 0.2); }

.show-apps .show-apps-icon {
color: white; }
Expand Down Expand Up @@ -1603,7 +1603,7 @@ StScrollBar {
-shell-counter-overlap-y: 3px;
background-color: #ff6a00;
color: #ffffff;
border: 2px solid #bfc3cd;
border: 2px solid #fefefe;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
border-radius: 0.9em; }

Expand Down Expand Up @@ -1690,7 +1690,7 @@ StScrollBar {

/* On-screen Keyboard */
#keyboard {
background-color: rgba(14, 17, 29, 0.65); }
background-color: rgba(5, 6, 11, 0.5); }

.keyboard-layout {
spacing: 10px;
Expand Down Expand Up @@ -1728,20 +1728,20 @@ StScrollBar {
icon-shadow: 0 1px black; }
.keyboard-key:active {
color: #ff6a00;
background-color: rgba(14, 17, 29, 0.95);
background-color: rgba(5, 6, 11, 0.8);
border: 1px solid #0b0d16;
text-shadow: none;
icon-shadow: none; }
.keyboard-key:grayed {
background-color: rgba(14, 17, 29, 0.95);
color: #bfc3cd;
border-color: rgba(0, 0, 0, 0.7); }
background-color: rgba(5, 6, 11, 0.8);
color: #fefefe;
border-color: rgba(255, 255, 255, 0.1); }

.keyboard-subkeys {
color: white;
padding: 5px;
-arrow-border-radius: 10px;
-arrow-background-color: rgba(14, 17, 29, 0.65);
-arrow-background-color: rgba(5, 6, 11, 0.5);
-arrow-border-width: 2px;
-arrow-border-color: #bfc3cd;
-arrow-base: 20px;
Expand Down Expand Up @@ -1786,8 +1786,8 @@ StScrollBar {
/* Auth Dialogs & Screen Shield */
.framed-user-icon {
background-size: contain;
border: 2px solid #bfc3cd;
color: #bfc3cd;
border: 2px solid #fefefe;
color: #fefefe;
border-radius: 3px; }
.framed-user-icon:hover {
border-color: white;
Expand Down Expand Up @@ -1826,7 +1826,7 @@ StScrollBar {
icon-shadow: none; }
.login-dialog .modal-dialog-button:default:insensitive {
color: #676a75;
background-color: rgba(33, 36, 48, 0.66);
background-color: rgba(32, 33, 40, 0.54);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border: none;
text-shadow: none;
Expand All @@ -1836,7 +1836,7 @@ StScrollBar {
padding: 24px 0px; }

.login-dialog-banner {
color: #a2a8b7; }
color: #e5e5e5; }

.login-dialog-button-box {
spacing: 5px; }
Expand All @@ -1854,12 +1854,12 @@ StScrollBar {
.login-dialog-not-listed-label {
padding-left: 2px; }
.login-dialog-not-listed-button:focus .login-dialog-not-listed-label, .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
color: #bfc3cd; }
color: #fefefe; }

.login-dialog-not-listed-label {
font-size: 90%;
font-weight: bold;
color: #6b7388;
color: #b2b2b2;
padding-top: 1em; }

.login-dialog-user-list-view {
Expand All @@ -1878,21 +1878,21 @@ StScrollBar {
.login-dialog-user-list-item {
border-radius: 5px;
padding: .2em;
color: #6b7388; }
color: #b2b2b2; }
.login-dialog-user-list-item:ltr {
padding-right: 1em; }
.login-dialog-user-list-item:rtl {
padding-left: 1em; }
.login-dialog-user-list-item .login-dialog-timed-login-indicator {
height: 2px;
margin: 2px 0 0 0;
background-color: #bfc3cd; }
background-color: #fefefe; }
.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
background-color: #ffffff; }

.login-dialog-username,
.user-widget-label {
color: #bfc3cd;
color: #fefefe;
font-size: 120%;
font-weight: bold;
text-align: left;
Expand All @@ -1911,19 +1911,19 @@ StScrollBar {
width: 23em; }

.login-dialog-prompt-label {
color: #868da0;
color: #cbcbcb;
font-size: 110%;
padding-top: 1em; }

.login-dialog-session-list-button StIcon {
icon-size: 1.25em; }

.login-dialog-session-list-button {
color: #6b7388; }
color: #b2b2b2; }
.login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
color: #bfc3cd; }
color: #fefefe; }
.login-dialog-session-list-button:active {
color: #3e434f; }
color: #7f7f7f; }

.screen-shield-arrows {
padding-bottom: 3em; }
Expand Down Expand Up @@ -1961,7 +1961,7 @@ StScrollBar {
.screen-shield-notifications-container .screen-shield-notification-source {
padding: 12px 6px;
border: 1px solid #bfc3cd;
background-color: rgba(14, 17, 29, 0.45);
background-color: rgba(5, 6, 11, 0.3);
color: #bfc3cd;
border-radius: 4px; }
.screen-shield-notifications-container .notification {
Expand All @@ -1975,7 +1975,7 @@ StScrollBar {
padding: 0px 0px 0px 12px; }

#panel.lock-screen {
background-color: rgba(14, 17, 29, 0.45); }
background-color: rgba(5, 6, 11, 0.3); }

.screen-shield-background {
background: black;
Expand Down Expand Up @@ -2118,3 +2118,10 @@ StScrollBar {

.openweather-current-databox-captions, .openweather-forecast-day {
color: #ff6a00; }

.arcmenu-search-entry {
min-height: 0px;
border-color: #ff6a00;
border-width: 1px;
padding: 7px 9px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
Loading

0 comments on commit 32b231f

Please sign in to comment.