eudaimon
/
Sweet-topborder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Gnome-shell 44: Quick settings - Fix toggle buttons appearance

This commit is contained in:
EliverLara 2023-04-29 14:41:49 -06:00
parent 670c20d034
commit 5056577a00
2 changed files with 58 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
gnome-shell/_common.scss
View File

@ -2202,6 +2202,7 @@ $slider_size: 16px;
border-radius: 12px; border-radius: 12px;
.icon-button, .button { .icon-button, .button {
color: $fg_color;
padding: 6px*1.75; padding: 6px*1.75;
} }
} }
@ -2212,11 +2213,13 @@ $base_padding: 6px;
border-radius: 99px; border-radius: 99px;
&:checked { &:checked {
@include gradient(transparentize($g1, 0.3), transparentize($g2, 0.3)); @include gradient($g1, $g2);
color: lighten($fg_color, 30%); color: $selected_fg_color;
text-shadow: none; text-shadow: none;
} }
&, &:hover, &:checked { border: none; }
& > StBoxLayout { spacing: $base_padding; } & > StBoxLayout { spacing: $base_padding; }
/* Move padding into the box; this is to allow menu arrows /* Move padding into the box; this is to allow menu arrows
@ -2234,9 +2237,28 @@ $base_padding: 6px;
&:ltr > StBoxLayout { padding-right: 0; } &:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; } &:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle {
min-width: auto;
max-width: auto;
&:ltr { border-radius: 99px 0 0 99px; }
&:rtl { border-radius: 0 99px 99px 0; }
&:ltr:last-child { border-radius: 99px; }
&:rtl:last-child { border-radius: 99px; }
}
& .quick-toggle-arrow { & .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9); background-color: transparentize(lighten($base_color, 3%), 0.3);
padding: $base_padding $base_padding*1.75; padding: $base_padding $base_padding*1.75;
border-width: 0;
&:checked {
background-color: $g2;
color: $selected_fg_color;
border-width: 0;
}
&:ltr { border-radius: 0 99px 99px 0; } &:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; } &:rtl { border-radius: 99px 0 0 99px; }
@ -2248,6 +2270,7 @@ $base_padding: 6px;
border-radius: 12px; border-radius: 12px;
padding: $base_padding*2; padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0; margin: $base_padding*2 $base_padding*3 0;
color: $fg_color;
.popup-menu-item > StIcon { -st-icon-style: symbolic; } .popup-menu-item > StIcon { -st-icon-style: symbolic; }
@ -2262,7 +2285,10 @@ $base_padding: 6px;
padding: 1.5 * $base_padding; padding: 1.5 * $base_padding;
background-color: lighten($bg_color, 10%); background-color: lighten($bg_color, 10%);
&.active { background-color: $selected_bg_color; } &.active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
} }
} }
} }

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

@ -2003,6 +2003,7 @@ StScrollBar {
padding: 14px; padding: 14px;
border-radius: 12px; } border-radius: 12px; }
.quick-settings .icon-button, .quick-settings .button { .quick-settings .icon-button, .quick-settings .button {
color: #C3C7D1;
padding: 10.5px; } padding: 10.5px; }
.quick-toggle { .quick-toggle {
@ -2010,11 +2011,13 @@ StScrollBar {
/* Move padding into the box; this is to allow menu arrows /* Move padding into the box; this is to allow menu arrows
to extend to the border */ } to extend to the border */ }
.quick-toggle:checked { .quick-toggle:checked {
background-gradient-start: rgba(0, 232, 183, 0.7) !important; background-gradient-start: #00e8b7 !important;
background-gradient-end: rgba(0, 232, 183, 0.7) !important; background-gradient-end: #00e8b7 !important;
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
color: white; color: #272727;
text-shadow: none; } text-shadow: none; }
.quick-toggle, .quick-toggle:hover, .quick-toggle:checked {
border: none; }
.quick-toggle > StBoxLayout { .quick-toggle > StBoxLayout {
spacing: 6px; } spacing: 6px; }
.quick-toggle.button { .quick-toggle.button {
@ -2032,9 +2035,25 @@ StScrollBar {
padding-right: 0; } padding-right: 0; }
.quick-menu-toggle:rtl > StBoxLayout { .quick-menu-toggle:rtl > StBoxLayout {
padding-left: 0; } padding-left: 0; }
.quick-menu-toggle .quick-toggle {
min-width: auto;
max-width: auto; }
.quick-menu-toggle .quick-toggle:ltr {
border-radius: 99px 0 0 99px; }
.quick-menu-toggle .quick-toggle:rtl {
border-radius: 0 99px 99px 0; }
.quick-menu-toggle .quick-toggle:ltr:last-child {
border-radius: 99px; }
.quick-menu-toggle .quick-toggle:rtl:last-child {
border-radius: 99px; }
.quick-menu-toggle .quick-toggle-arrow { .quick-menu-toggle .quick-toggle-arrow {
background-color: rgba(195, 199, 209, 0.1); background-color: rgba(36, 48, 53, 0.7);
padding: 6px 10.5px; } padding: 6px 10.5px;
border-width: 0; }
.quick-menu-toggle .quick-toggle-arrow:checked {
background-color: #00e8b7;
color: #272727;
border-width: 0; }
.quick-menu-toggle .quick-toggle-arrow:ltr { .quick-menu-toggle .quick-toggle-arrow:ltr {
border-radius: 0 99px 99px 0; } border-radius: 0 99px 99px 0; }
.quick-menu-toggle .quick-toggle-arrow:rtl { .quick-menu-toggle .quick-toggle-arrow:rtl {
@ -2044,7 +2063,8 @@ StScrollBar {
background-color: #24313c; background-color: #24313c;
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: 12px;
margin: 12px 18px 0; } margin: 12px 18px 0;
color: #C3C7D1; }
.quick-toggle-menu .popup-menu-item > StIcon { .quick-toggle-menu .popup-menu-item > StIcon {
-st-icon-style: symbolic; } -st-icon-style: symbolic; }
.quick-toggle-menu .header { .quick-toggle-menu .header {
@ -2056,7 +2076,8 @@ StScrollBar {
padding: 9px; padding: 9px;
background-color: #354859; } background-color: #354859; }
.quick-toggle-menu .header .icon.active { .quick-toggle-menu .header .icon.active {
background-color: #00e8b7; } background-color: #00e8b7;
color: #272727; }
.quick-settings-system-item > StBoxLayout { .quick-settings-system-item > StBoxLayout {
spacing: 12px; } spacing: 12px; }