Sam Hewitt 37a78684bb style: Fix some high contrast papercuts
- add HC style to slider
- add HC style to Quick settings submenu header
- fix border issue with flat card style

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7320
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3165>
2024-02-05 22:57:01 +00:00

211 lines
4.6 KiB
SCSS

.quick-settings {
padding: $base_padding * 3;
border-radius: $modal_radius * 2.25;
.icon-button, .button {
padding: $base_padding * 1.75;
}
}
.quick-settings-grid {
spacing-rows: $base_padding * 2;
spacing-columns: $base_padding * 2;
}
.quick-toggle, .quick-menu-toggle {
border-radius: $forced_circular_radius;
min-width: 12em;
max-width: 12em;
min-height: $scalable_icon_size * 3; // use icon size so the button scales
border:none;
}
.quick-toggle {
background-color: none;
&:checked { @extend %default_button;}
& > StBoxLayout { spacing: $base_padding * 1.5; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 $base_padding * 2; }
&:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
.quick-toggle-title { font-weight: bold; }
& StBoxLayout > .quick-toggle-subtitle {
@extend %caption;
font-weight: normal;
}
.quick-toggle-icon { icon-size: $scalable_icon_size; }
}
.quick-menu-toggle {
& .quick-toggle {
min-width: auto;
max-width: auto;
&:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; }
&:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; }
&:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; }
&:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; }
&:ltr:last-child { border-radius: $forced_circular_radius; }
&:rtl:last-child { border-radius: $forced_circular_radius; }
}
& .quick-toggle-arrow {
padding: $scaled_padding $scaled_padding * 1.75;
border-width: 0;
border-color: transparentize($fg_color, .75);
&:checked {
@extend %default_button;
border-color: $selected_borders_color;
}
&:ltr {
border-radius: 0 $forced_circular_radius $forced_circular_radius 0;
border-left-width: 1px;
}
&:rtl {
border-radius: $forced_circular_radius 0 0 $forced_circular_radius;
border-right-width: 1px;
}
}
}
.quick-slider {
& > StBoxLayout { spacing: $base_padding; }
.icon-button { padding: $base_padding; }
.slider-bin {
&:focus {@include button(focus);}
padding: $base_padding;
border-radius: $forced_circular_radius;
}
}
.quick-toggle-menu {
@extend %card;
&:insensitive {
// override insensitive style on submenu
@include button(normal);
}
border-radius: $base_border_radius * 3;
margin: $base_padding * 2 $base_padding * 3 0;
.popup-menu-item > StIcon {
-st-icon-style: symbolic;
icon-size: $scalable_icon_size;
}
& .header {
spacing-rows: $base_padding * 0.5;
spacing-columns: $base_padding * 2;
padding-bottom: $base_padding * 2;
& .icon {
icon-size: $medium_scalable_icon_size;
border-radius: $forced_circular_radius;
padding: 1.5 * $base_padding;
background-color: transparentize($fg_color, 0.8);
&.active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
// draw hc outline
@if $contrast == 'high' {
@include draw_hc_inset();
&.active {
@include draw_hc_inset($no_inset: true);
}
}
}
& .title {
@extend %title_3;
}
& .subtitle {
@extend %caption_heading;
}
}
}
.quick-toggle-menu-container {
}
.quick-settings-system-item {
& > StBoxLayout { spacing: $base_padding * 2; }
& .power-item {
min-height: 0;
min-width: 0;
&:insensitive {
@include button(normal);
background-color: transparent;
}
}
}
.nm-network-item {
.wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic
}
.bt-device-item {
.popup-menu-icon { -st-icon-style: symbolic; }
}
.bt-menu-placeholder.popup-menu-item {
@extend %title_4;
text-align: center;
padding: 2em 4em;
}
.device-subtitle { color: transparentize($fg_color, 0.5); }
.keyboard-brightness-level {
spacing: $base_padding;
.button:checked { @extend %default_button; }
}
// background apps
.background-apps-quick-toggle {
min-height: to_em(40px);
background-color: transparent;
& StIcon { icon-size: $scalable_icon_size !important; }
}
.background-app-item {
& .title { @extend %heading; }
& .subtitle { @extend %caption; }
& .popup-menu-icon {
icon-size: $large_icon_size !important;
-st-icon-style: regular !important;
}
& .close-button {
@extend .icon-button;
padding: $base_padding;
}
& .spinner {
padding: $base_padding;
}
&.popup-inactive-menu-item { color: $fg_color; }
}