starred/Nordic
1
0
Fork 0
mirror of https://github.com/EliverLara/Nordic.git synced 2026-09-27 17:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Gnome-shell v43: Add styles for quick settings menu

Browse Source
This commit is contained in:
EliverLara
2022-11-12 15:35:21 -06:00
parent 4f5c9faf16
commit 03dac65d5c
2 changed files with 153 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gnome-shell/_common.scss
+81
View File
@@ -2195,3 +2195,84 @@ $slider_size: 16px;
border-radius: 4px;
padding: 6px;
}
.quick-settings {
padding: 14px;
border-radius: 12px;
.icon-button, .button {
padding: 6px*1.75;
}
}
$base_padding: 6px;
.quick-toggle {
border-radius: 99px;
min-width: 12em;
max-width: 12em;
min-height: 40px;
&:checked { @include button(active, transparentize($selected_bg_color, 0.6)); }
& > 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-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;
.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; }
}
}
}
.quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; }
.icon-button {
@extend %button;
border-radius: 50px;
}
}
gnome-shell/gnome-shell.css
+72 -5
View File
@@ -8,7 +8,7 @@ stage {
/* WIDGETS */
/* Buttons */
.button, .app-folder-dialog .edit-folder-button {
.button, .app-folder-dialog .edit-folder-button, .quick-settings-system-item .icon-button {
color: #d8dee9;
background-color: #343b49;
box-shadow: none;
@@ -17,27 +17,27 @@ stage {
icon-shadow: 0 1px black;
border-radius: 6px;
padding: 4px 32px; }
.button:focus, .app-folder-dialog .edit-folder-button:focus {
.button:focus, .app-folder-dialog .edit-folder-button:focus, .quick-settings-system-item .icon-button:focus {
background-color: #3b4252;
color: #fefefe;
text-shadow: 0 1px black;
icon-shadow: 0 1px black;
box-shadow: none;
border: 1px solid #1f232b; }
.button:insensitive, .app-folder-dialog .edit-folder-button:insensitive {
.button:insensitive, .app-folder-dialog .edit-folder-button:insensitive, .quick-settings-system-item .icon-button:insensitive {
color: #838995;
background-color: rgba(64, 70, 82, 0.66);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border: none;
text-shadow: none;
icon-shadow: none; }
.button:active, .app-folder-dialog .edit-folder-button:active {
.button:active, .app-folder-dialog .edit-folder-button:active, .quick-settings-system-item .icon-button:active {
color: rgba(143, 188, 187, 0.7);
background-color: rgba(46, 52, 64, 0.95);
border: 1px solid #1f232b;
text-shadow: none;
icon-shadow: none; }
.button:hover, .app-folder-dialog .edit-folder-button:hover {
.button:hover, .app-folder-dialog .edit-folder-button:hover, .quick-settings-system-item .icon-button:hover {
background-color: #3b4252;
color: #fefefe;
border: 1px solid #1f232b;
@@ -1980,6 +1980,73 @@ StScrollBar {
border-radius: 4px;
padding: 6px; }
.quick-settings {
padding: 14px;
border-radius: 12px; }
.quick-settings .icon-button, .quick-settings .button {
padding: 10.5px; }
.quick-toggle {
border-radius: 99px;
min-width: 12em;
max-width: 12em;
min-height: 40px;
/* Move padding into the box; this is to allow menu arrows
to extend to the border */ }
.quick-toggle:checked {
color: rgba(143, 188, 187, 0.7);
background-color: rgba(143, 188, 187, 0.1);
border: 1px solid #1f232b;
text-shadow: none;
icon-shadow: none; }
.quick-toggle > StBoxLayout {
spacing: 6px; }
.quick-toggle.button {
padding: 0; }
.quick-toggle > StBoxLayout {
padding: 0 12px; }
.quick-toggle:ltr > StBoxLayout {
padding-left: 15px; }
.quick-toggle:rtl > StBoxLayout {
padding-right: 15px; }
.quick-toggle .quick-toggle-label {
font-weight: bold; }
.quick-menu-toggle:ltr > StBoxLayout {
padding-right: 0; }
.quick-menu-toggle:rtl > StBoxLayout {
padding-left: 0; }
.quick-menu-toggle .quick-toggle-arrow {
background-color: rgba(216, 222, 233, 0.1);
padding: 6px 10.5px; }
.quick-menu-toggle .quick-toggle-arrow:ltr {
border-radius: 0 99px 99px 0; }
.quick-menu-toggle .quick-toggle-arrow:rtl {
border-radius: 99px 0 0 99px; }
.quick-toggle-menu {
background-color: #2e3440;
border-radius: 12px;
padding: 12px;
margin: 12px 18px 0; }
.quick-toggle-menu .popup-menu-item > StIcon {
-st-icon-style: symbolic; }
.quick-toggle-menu .header {
spacing-rows: 3px;
spacing-columns: 12px;
padding-bottom: 12px; }
.quick-toggle-menu .header .icon {
border-radius: 999px;
padding: 9px;
background-color: #434c5e; }
.quick-toggle-menu .header .icon.active {
background-color: rgba(143, 188, 187, 0.7); }
.quick-settings-system-item > StBoxLayout {
spacing: 12px; }
.quick-settings-system-item .icon-button {
border-radius: 50px; }
.openweather-current-summarybox,
.openweather-forecast-icon,
.openweather-current-databox-captions,