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

This commit is contained in:
EliverLara
2023-04-27 15:27:17 -06:00
parent 796ac21576
commit 8521f5abe2
2 changed files with 90 additions and 47 deletions
+61 -40
View File
@@ -2222,57 +2222,78 @@ $slider_size: 19px;
}
.quick-settings {
padding: 14px;
border-radius: 12px;
.icon-button, .button {
padding: 6px*1.75;
}
.quick-settings {
padding: 14px;
border-radius: 12px;
.icon-button, .button {
padding: 6px*1.75;
}
$base_padding: 6px;
.quick-toggle {
border-radius: 99px;
min-height: 40px;
}
$base_padding: 6px;
.quick-toggle {
border-radius: 99px;
&:checked {
@include button(active, transparentize($selected_bg_color, 0.4));
color: $selected_fg_color;
}
&, &:hover, &:checked { border: none; }
& > StBoxLayout { spacing: $base_padding; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 6px*2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-label { font-weight: bold; }
//.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
}
.quick-menu-toggle {
&: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: lighten($base_color, 1%);
padding: $base_padding $base_padding*1.75;
border-width: 0;
&:checked {
@include button(active, transparentize($selected_bg_color, 0.4));
@include button(active, transparentize($selected_bg_color, 0.1));
color: $selected_fg_color;
border-width: 0;
}
& > StBoxLayout { spacing: $base_padding; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 6px*2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-label { font-weight: bold; }
//.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }
}
.quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: $base_padding $base_padding*1.75;
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }
}
}
}
.quick-toggle-menu {
background-color: $base_color;
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; }
+29 -7
View File
@@ -1475,9 +1475,9 @@ StScrollBar {
text-shadow: none;
icon-shadow: none; }
.page-navigation-arrow:hover > StIcon {
background-color: rgba(143, 188, 187, 0.2); }
background-color: rgba(129, 161, 193, 0.5); }
.page-navigation-arrow:active > StIcon {
background-color: rgba(143, 188, 187, 0.7); }
background-color: #81a1c1; }
.workspace-thumbnails {
color: #d8dee9;
@@ -2014,9 +2014,8 @@ StScrollBar {
.quick-toggle {
border-radius: 99px;
min-height: 40px;
/* Move padding into the box; this is to allow menu arrows
to extend to the border */ }
to extend to the border */ }
.quick-toggle:checked {
color: #81a1c1;
background-color: rgba(129, 161, 193, 0.6);
@@ -2024,6 +2023,8 @@ StScrollBar {
text-shadow: none;
icon-shadow: none;
color: #fefefe; }
.quick-toggle, .quick-toggle:hover, .quick-toggle:checked {
border: none; }
.quick-toggle > StBoxLayout {
spacing: 6px; }
.quick-toggle.button {
@@ -2041,9 +2042,29 @@ 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(216, 222, 233, 0.1);
padding: 6px 10.5px; }
background-color: #303643;
padding: 6px 10.5px;
border-width: 0; }
.quick-menu-toggle .quick-toggle-arrow:checked {
color: #81a1c1;
background-color: rgba(129, 161, 193, 0.9);
border: 1px solid #1f232b;
text-shadow: none;
icon-shadow: none;
color: #fefefe;
border-width: 0; }
.quick-menu-toggle .quick-toggle-arrow:ltr {
border-radius: 0 99px 99px 0; }
.quick-menu-toggle .quick-toggle-arrow:rtl {
@@ -2053,7 +2074,8 @@ StScrollBar {
background-color: #2e3440;
border-radius: 12px;
padding: 12px;
margin: 12px 18px 0; }
margin: 12px 18px 0;
color: #d8dee9; }
.quick-toggle-menu .popup-menu-item > StIcon {
-st-icon-style: symbolic; }
.quick-toggle-menu .header {