Gnome-shell 44: Quick settings - Fix toggle buttons appearance
This commit is contained in:
parent
670c20d034
commit
5056577a00
|
@ -2202,6 +2202,7 @@ $slider_size: 16px;
|
|||
border-radius: 12px;
|
||||
|
||||
.icon-button, .button {
|
||||
color: $fg_color;
|
||||
padding: 6px*1.75;
|
||||
}
|
||||
}
|
||||
|
@ -2212,11 +2213,13 @@ $base_padding: 6px;
|
|||
border-radius: 99px;
|
||||
|
||||
&:checked {
|
||||
@include gradient(transparentize($g1, 0.3), transparentize($g2, 0.3));
|
||||
color: lighten($fg_color, 30%);
|
||||
@include gradient($g1, $g2);
|
||||
color: $selected_fg_color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&, &:hover, &:checked { border: none; }
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
|
||||
/* Move padding into the box; this is to allow menu arrows
|
||||
|
@ -2234,9 +2237,28 @@ $base_padding: 6px;
|
|||
&:ltr > StBoxLayout { padding-right: 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 {
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
background-color: transparentize(lighten($base_color, 3%), 0.3);
|
||||
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; }
|
||||
&:rtl { border-radius: 99px 0 0 99px; }
|
||||
|
@ -2248,6 +2270,7 @@ $base_padding: 6px;
|
|||
border-radius: 12px;
|
||||
padding: $base_padding*2;
|
||||
margin: $base_padding*2 $base_padding*3 0;
|
||||
color: $fg_color;
|
||||
|
||||
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
|
||||
|
||||
|
@ -2262,7 +2285,10 @@ $base_padding: 6px;
|
|||
padding: 1.5 * $base_padding;
|
||||
background-color: lighten($bg_color, 10%);
|
||||
|
||||
&.active { background-color: $selected_bg_color; }
|
||||
&.active {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2003,6 +2003,7 @@ StScrollBar {
|
|||
padding: 14px;
|
||||
border-radius: 12px; }
|
||||
.quick-settings .icon-button, .quick-settings .button {
|
||||
color: #C3C7D1;
|
||||
padding: 10.5px; }
|
||||
|
||||
.quick-toggle {
|
||||
|
@ -2010,11 +2011,13 @@ StScrollBar {
|
|||
/* Move padding into the box; this is to allow menu arrows
|
||||
to extend to the border */ }
|
||||
.quick-toggle:checked {
|
||||
background-gradient-start: rgba(0, 232, 183, 0.7) !important;
|
||||
background-gradient-end: rgba(0, 232, 183, 0.7) !important;
|
||||
background-gradient-start: #00e8b7 !important;
|
||||
background-gradient-end: #00e8b7 !important;
|
||||
background-gradient-direction: horizontal;
|
||||
color: white;
|
||||
color: #272727;
|
||||
text-shadow: none; }
|
||||
.quick-toggle, .quick-toggle:hover, .quick-toggle:checked {
|
||||
border: none; }
|
||||
.quick-toggle > StBoxLayout {
|
||||
spacing: 6px; }
|
||||
.quick-toggle.button {
|
||||
|
@ -2032,9 +2035,25 @@ StScrollBar {
|
|||
padding-right: 0; }
|
||||
.quick-menu-toggle:rtl > StBoxLayout {
|
||||
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 {
|
||||
background-color: rgba(195, 199, 209, 0.1);
|
||||
padding: 6px 10.5px; }
|
||||
background-color: rgba(36, 48, 53, 0.7);
|
||||
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 {
|
||||
border-radius: 0 99px 99px 0; }
|
||||
.quick-menu-toggle .quick-toggle-arrow:rtl {
|
||||
|
@ -2044,7 +2063,8 @@ StScrollBar {
|
|||
background-color: #24313c;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin: 12px 18px 0; }
|
||||
margin: 12px 18px 0;
|
||||
color: #C3C7D1; }
|
||||
.quick-toggle-menu .popup-menu-item > StIcon {
|
||||
-st-icon-style: symbolic; }
|
||||
.quick-toggle-menu .header {
|
||||
|
@ -2056,7 +2076,8 @@ StScrollBar {
|
|||
padding: 9px;
|
||||
background-color: #354859; }
|
||||
.quick-toggle-menu .header .icon.active {
|
||||
background-color: #00e8b7; }
|
||||
background-color: #00e8b7;
|
||||
color: #272727; }
|
||||
|
||||
.quick-settings-system-item > StBoxLayout {
|
||||
spacing: 12px; }
|
||||
|
|
Loading…
Reference in New Issue