d8dc85cc15
We get device icons from gnome-volume-control, which itself may get them from pulseaudio. That is, we don't have control over whether icon names are symbolic. As we do want menu items to use symbolic icons, enforce that via CSS instead. https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5805 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2456>
116 lines
2.6 KiB
SCSS
116 lines
2.6 KiB
SCSS
.quick-settings {
|
|
padding: 4 * $base_padding;
|
|
border-radius: $modal_radius*2;
|
|
}
|
|
|
|
.quick-settings-grid {
|
|
spacing-rows: $base_padding*2;
|
|
spacing-columns: $base_padding*2;
|
|
}
|
|
|
|
.quick-toggle {
|
|
border-radius: 99px;
|
|
min-width: 11.5em;
|
|
max-width: 11.5em;
|
|
min-height: 48px;
|
|
border:none;
|
|
|
|
&:checked { @include button(default); }
|
|
|
|
& > 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 $base_padding*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-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-slider {
|
|
padding: 0 $base_padding;
|
|
|
|
& > StBoxLayout { spacing: $base_padding; }
|
|
|
|
.slider-bin {
|
|
&:focus {@include button(focus);}
|
|
min-height: 16px; // slider size
|
|
padding: $base_padding;
|
|
border-radius: 99px;
|
|
}
|
|
.quick-toggle-icon { icon-size: $base_icon_size; }
|
|
.icon-button { background-color: transparent; }
|
|
}
|
|
|
|
.quick-toggle-menu {
|
|
background-color: $card_bg_color;
|
|
border-radius: $base_border_radius*2.75;
|
|
padding: $base_padding*2.75;
|
|
margin: 0 $base_padding*2.75;
|
|
|
|
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
|
|
|
|
& .header {
|
|
spacing-rows: 0.5 * $base_padding;
|
|
spacing-columns: $base_padding*2;
|
|
padding-bottom: 2 * $base_padding;
|
|
|
|
& .icon {
|
|
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
|
|
border-radius: 999px;
|
|
padding: 1.5 * $base_padding;
|
|
background-color: lighten($bg_color, 10%);
|
|
|
|
&.active { background-color: $selected_bg_color; }
|
|
}
|
|
|
|
& .title {
|
|
@extend %title_3;
|
|
}
|
|
|
|
& .subtitle {
|
|
@extend %caption_heading;
|
|
}
|
|
}
|
|
}
|
|
|
|
.quick-toggle-menu-container {
|
|
padding: 2 * $base_padding $base_padding 0;
|
|
}
|
|
|
|
.quick-settings-system-item {
|
|
& > StBoxLayout { spacing: 2 * $base_padding; }
|
|
|
|
.icon-button > StIcon { -st-icon-style: symbolic; }
|
|
|
|
& .power-item {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
|
|
&:insensitive {
|
|
@include button(normal);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nm-network-item {
|
|
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
|
|
}
|