From 448062b7165c92f6bda252b3fb240aa31d1d5b05 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Sun, 17 Apr 2022 22:49:54 +0800 Subject: [PATCH] Fixed libadwaita issues --- .../gnome-shell/common/_message-list.scss | 1 + src/sass/gnome-shell/common/_popovers.scss | 52 +- src/sass/gtk/_apps-4.0.scss | 50 +- src/sass/gtk/_common-3.0.scss | 6 +- src/sass/gtk/_common-4.0.scss | 490 ++++++++++++++++-- src/sass/gtk/apps/_gnome-40.0.scss | 48 ++ src/sass/gtk/apps/_libadwaita.scss | 114 ++++ 7 files changed, 656 insertions(+), 105 deletions(-) create mode 100644 src/sass/gtk/apps/_gnome-40.0.scss create mode 100644 src/sass/gtk/apps/_libadwaita.scss diff --git a/src/sass/gnome-shell/common/_message-list.scss b/src/sass/gnome-shell/common/_message-list.scss index 7b2d190..c2eb9fb 100644 --- a/src/sass/gnome-shell/common/_message-list.scss +++ b/src/sass/gnome-shell/common/_message-list.scss @@ -25,6 +25,7 @@ // NOTE: remove the padding if notification_bubble could remove margin for drop shadow padding: $base_margin; spacing: $base_spacing * 2; + font-weight: normal; } // .message-list-clear-button.button { diff --git a/src/sass/gnome-shell/common/_popovers.scss b/src/sass/gnome-shell/common/_popovers.scss index d781ca1..9e66679 100644 --- a/src/sass/gnome-shell/common/_popovers.scss +++ b/src/sass/gnome-shell/common/_popovers.scss @@ -106,48 +106,50 @@ $popop_menuitem_radius: $wm_radius - 4px; font-weight: normal; transition: none; - &:ltr { padding-right: 2em; padding-left: 0; } - &:rtl { padding-right: 0; padding-left: 2em; } + &:ltr { padding-right: 1.5em; padding-left: 0; } + &:rtl { padding-right: 0; padding-left: 1.5em; } + // &:ltr { padding-right: $base_padding * 2 !important; padding-left: 0 !important; } + // &:rtl { padding-left: $base_padding * 2 !important; padding-right: 0 !important; } &:checked { font-weight: normal; border-radius: $popop_menuitem_radius $popop_menuitem_radius 0 0; border: none; box-shadow: none; - color: $alt_fg_color; - background-color: $submenu_bg_color; + color: $alt_fg_color !important; + background-color: $submenu_bg_color !important; background-gradient-direction: none !important; &:hover, &.selected { - color: $selected_fg_color; - background-color: $selected_bg_color; + color: $selected_fg_color !important; + background-color: $selected_bg_color !important; background-gradient-direction: none !important; } &:active { - color: $selected_fg_color; - background-color: mix($fg_color, $selected_bg_color, 5%); + color: $selected_fg_color !important; + background-color: mix($fg_color, $selected_bg_color, 5%) !important; } - &:insensitive { color: $disabled_fg_color; } + &:insensitive { color: $disabled_fg_color !important; } } &.selected { - color: $selected_fg_color; - background-color: $selected_bg_color; + color: $selected_fg_color !important; + background-color: $selected_bg_color !important; transition-duration: 0ms !important; } &:active, &.selected:active { - color: $selected_fg_color; - background-color: mix($fg_color, $selected_bg_color, 5%); + color: $selected_fg_color !important; + background-color: mix($fg_color, $selected_bg_color, 5%) !important; } - &:insensitive { color: $disabled_fg_color; } + &:insensitive { color: $disabled_fg_color !important; } } .popup-sub-menu { - background-color: $submenu_bg_color; + background-color: $submenu_bg_color !important; border-radius: 0 0 $popop_menuitem_radius $popop_menuitem_radius; border: none; box-shadow: none; @@ -157,14 +159,14 @@ $popop_menuitem_radius: $wm_radius - 4px; margin: 0; border-radius: $popop_menuitem_radius; - &:hover { - color: $selected_fg_color; - background-color: $selected_bg_color; + &:focus, &:hover { + color: $selected_fg_color !important; + background-color: $selected_bg_color !important; } &:active { - color: $selected_fg_color; - background-color: mix($fg_color, $selected_bg_color, 5%); + color: $selected_fg_color !important; + background-color: mix($fg_color, $selected_bg_color, 5%) !important; } } } @@ -183,14 +185,17 @@ $popop_menuitem_radius: $wm_radius - 4px; .popup-menu-ornament { width: 1.2em; - &:ltr { text-align: right }; - &:rtl { text-align: left }; + &:ltr { text-align: right; } + &:rtl { text-align: left; } } // separator .popup-separator-menu-item { background: none; border: none; + // margin: 6px 32px; + padding-top: 0 !important; + padding-bottom: 0 !important; .popup-separator-menu-item-separator { height: 1px; //not really the whole box @@ -222,6 +227,9 @@ $popop_menuitem_radius: $wm_radius - 4px; } .popup-sub-menu .popup-menu-item > :first-child { + // &:ltr { padding-left: $base_padding * 2 !important; margin-left: $base_padding / 2 !important; } + // &:rtl { padding-right: $base_padding * 2 !important; margin-right: $base_padding / 2 !important; } + &:ltr { /* 12px spacing + 2*4px padding */ padding-left: $base_padding * 2 + 4px; margin-left: 1em; } &:rtl { /* 12px spacing + 2*4px padding */ diff --git a/src/sass/gtk/_apps-4.0.scss b/src/sass/gtk/_apps-4.0.scss index c5c7267..9d22513 100644 --- a/src/sass/gtk/_apps-4.0.scss +++ b/src/sass/gtk/_apps-4.0.scss @@ -1,48 +1,2 @@ -// -// Extensions -// -window.background.csd { - > stack, // GameMode setting - > stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting - > box > stack > scrolledwindow > viewport > box { - > list { - @extend %circular_list; - - row.activatable { @extend %circular_row; } - } - } - - stack stack stack frame, // ArcMenu setting - > stack > stack > box > frame, // Night Theme Switcher setting - > stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists - > stack > box > stack > box > frame, // ArcMenu setting - > stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting - > stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting - > stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting - > border { border: none; } - border: none; - - > list { - @extend %circular_list; - - row.activatable { @extend %circular_row; } - } - } - - > stack > box > box > list, - > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar - border-bottom-left-radius: $wm_radius; - } - - &.maximized, &.tiled, &.fullscreen { - > stack > box > box > list, - > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar - border-bottom-left-radius: $maximized_radius; - } - } -} - -window.nightthemeswitcher headerbar { - background: $header_bg; - color: $header_fg; -} +@import 'apps/gnome-40.0'; +@import 'apps/libadwaita'; diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index a5b6616..089c350 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -1967,12 +1967,12 @@ $pathbar_button_checked_bg: if($variant == 'light', #808080, #b8b8b8); } .background .path-bar button { - min-width: 12px; + min-width: $container_padding * 2; min-height: if($variant == 'light', 24px, 26px); &.text-button, &.image-button, & { - padding-left: 6px; - padding-right: 6px; + padding-left: $container_padding; + padding-right: $container_padding; } &:hover { box-shadow: none; } diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index aca56fc..1aa4f68 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -347,6 +347,22 @@ label { } } +.accent { + color: $selected_bg_color; +} + +.success { + color: $success_color; +} + +.warning { + color: $warning_color; +} + +.error { + color: $error_color; +} + window.assistant { // min-height: 38px; .sidebar { @@ -451,6 +467,14 @@ spinner { } } +.monospace { + font-family: monospace; +} + +.numeric { + font-feature-settings: "tnum"; +} + // // Text Entries // @@ -706,6 +730,37 @@ $_dot_color: if($variant=='light', $selected_bg_color, &:disabled { @include button(flat-insensitive); } } +%opaque_button { + box-shadow: none; + transition: $button_transition; + + .osd &:focus:focus-visible { + outline-color: rgba(white, 0.15) + } + + &:hover { + background-image: image(gtkalpha(currentColor, .1)); + } + + &.keyboard-activating, + &:active { + background-image: image(transparentize(black, .8)); + } + + &:checked { + background-image: image(transparentize(black, .85)); + + &:hover { + background-image: image(transparentize(black, .95)); + } + + &.keyboard-activating, + &:active { + background-image: image(transparentize(black, .7)); + } + } +} + %button, button { min-height: $menuitem_size - 4px; @@ -738,13 +793,20 @@ button { } } + &.opaque { + @extend %opaque_button; + + background-color: mix($bg_color, $fg_color, 80%); + color: $fg_color; + } + &:hover { @include button(hover); background-clip: if($variant=='light', border-box, padding-box); -gtk-icon-filter: brightness(1.2); } - &:active, &:checked { + &.keyboard-activating, &:active, &:checked { @include button(active); background-clip: if($variant=='light', border-box, padding-box); @@ -775,11 +837,22 @@ button { padding-right: $container_padding * 2; } - &.text-button.image-button { + &.text-button.image-button, + &.image-text-button { min-height: $menuitem_size - 4px; padding-left: $container_padding; padding-right: $container_padding; + > box, + > box > box { + border-spacing: $container_padding - 2px; + + > label { + padding-left: 2px; + padding-right: 2px; + } + } + label { &:first-child { padding-left: $container_padding + 2; @@ -800,12 +873,32 @@ button { &.popup { padding-right: $container_padding; padding-left: $container_padding; } } - @at-root %circular_button, &.close { // The Bloody Circul Button + &.arrow-button { + padding-left: $container_padding * 1.5; + padding-right: $container_padding * 1.5; + + > box { border-spacing: $container_padding - 2px; } + + &.text-button { + > box { border-spacing: $container_padding - 2px; } + } + } + + // hide separators + &.font { + separator { background-color: transparent; background-image: none; } + > box { border-spacing: $container_padding; } + > box > box > label { font-weight: bold; } + } + + @at-root %circular_button, &.circular, &.close { // The Bloody Circul Button border-radius: $circular_radius; - padding: 0 0 0 0; + padding: 0; min-height: $menuitem_size; min-width: $menuitem_size; + label { padding: 0; } + &:active, &:checked { @if $variant=='light' { @include button(flat-active); @@ -814,6 +907,46 @@ button { } } + @at-root %pill_button, + &.pill { + padding: $container_padding * 1.5 $container_padding * 5; + border-radius: $circular_radius; + } + + &.card { + background-color: $fill_color; + background-clip: padding-box; + font-weight: inherit; + padding: 0; + transition: $button_transition; + + &:hover { + background-image: image(gtkalpha(currentColor, 0.03)); + } + + &.keyboard-activating, + &:active { + background-image: image(gtkalpha(currentColor, 0.08)); + } + + &:checked { + background-color: $fill_color; + background-image: image(gtkalpha(currentColor, 0.1)); + + &:hover { background-image: image(gtkalpha(currentColor, 0.13)); } + + &.keyboard-activating, + &:active { background-image: image(gtkalpha(currentColor, 0.19)); } + + &.has-open-popup { background-image: image(gtkalpha(currentColor, 0.13)); } + } + + &:drop(active) { + color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + @at-root %button_basic_drop_active, &:drop(active) { color: $drop_target_color; @@ -839,7 +972,7 @@ button { background-color: $osd_button_bg; } - &:active, &:checked {@include button(osd-active); } + &.keyboard-activating, &:active, &:checked {@include button(osd-active); } &:disabled { @include button(osd-insensitive); } } @@ -849,7 +982,7 @@ button { @include button(osd); &:hover { @include button(osd-hover); } - &:active, &:checked { @include button(osd-active); } + &.keyboard-activating, &:active, &:checked { @include button(osd-active); } &:disabled { @include button(osd-insensitive); } &.flat { @@ -944,6 +1077,216 @@ button { .linked.vertical > & { @extend %linked_vertical; } } +menubutton { + &.osd { + background: none; + color: inherit; + + > button { @extend %osd_button; } + } + + &.circular > button { @extend %circular_button; } + &.flat > button { @extend %flat_button; } + &.pill > button { @extend %pill_button; } + + &.suggested-action { + background-color: $suggested_color; + color: white; + } + + &.destructive-action { + background-color: $destructive_color; + color: white; + } + + &.opaque { + background-color: mix($bg_color, $fg_color, 80%); + color: $fg_color; + } + + &.suggested-action, + &.destructive-action, + &.opaque { + border-radius: $bt_radius; + + &.circular, &.pill { + border-radius: $circular_radius; + } + + > button { + @extend %flat_button; + + &, &:checked { + background-color: transparent; + color: inherit; + } + } + } + + &.image-button > button { + min-width: 24px; + padding-left: 5px; + padding-right: 5px; + } + + arrow { + min-height: 16px; + min-width: 16px; + &.none { + -gtk-icon-source: -gtk-icontheme('open-menu-symbolic'); + } + &.down { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + &.up { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + } + &.left { + -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); + } + &.right { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + } + } +} + +splitbutton { + border-radius: $bt_radius; + + &, & > separator { + transition: $button_transition; + transition-property: background; + } + + > separator { + margin-top: $container_padding; + margin-bottom: $container_padding; + background: none; + } + + > menubutton > button { + padding-left: $container_padding - 2px; + padding-right: $container_padding - 2px; + } + + // Since the inner button doesn't have any style classes on it, + // we have to add them manually + &.image-button > button { + min-width: 24px; + padding-left: $container_padding; + padding-right: $container_padding; + } + + &.text-button.image-button > button, + &.image-text-button > button { + padding-left: $container_padding * 1.5; + padding-right: $container_padding * 1.5; + + > box { + border-spacing: $container_padding; + } + } + + // Reimplementing linked so we don't blow up css + > button:dir(ltr), + > menubutton > button:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -1px; + } + + > button:dir(rtl), + > menubutton > button:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -1px; + } + + @at-root %flat_split_button, + &.flat { + > separator { + background: $borders_color; + } + + &:hover, + &:active, + &:checked { + background: gtkalpha(currentColor, 0.07); + + > separator { + background: none; + } + } + + &:focus-within:focus-visible > separator { + background: none; + } + + > button, + > menubutton > button { + @extend %flat_button; + + border-radius: $bt_radius; + } + } + + &.suggested-action { + background-color: $suggested_color; + color: white; + } + + &.destructive-action { + background-color: $destructive_color; + color: white; + } + + &.opaque { + background-color: mix($bg_color, $fg_color, 80%); + color: $fg_color; + } + + &.suggested-action, + &.destructive-action, + &.opaque { + > button, > menubutton > button { + @extend %flat_button; + + &, &:checked { + color: inherit; + background-color: transparent; + } + } + + > menubutton > button { + &:dir(ltr) { box-shadow: inset 1px 0 $borders_color; } + &:dir(rtl) { box-shadow: inset -1px 0 $borders_color; } + } + } + + > menubutton > button > arrow.none { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } +} + +buttoncontent { + border-spacing: $container_padding; + + > label { + font-weight: bold; + + &:dir(ltr) { padding-right: 2px; } + &:dir(rtl) { padding-left: 2px; } + } + + .arrow-button > box > &, + splitbutton > button > & { + > label { + &:dir(ltr) { padding-right: 0; } + &:dir(rtl) { padding-left: 0; } + } + } +} + // Some crazy linking stuff @mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true', $e_border:$entry_border, $b_border:$button_border) { @@ -1241,7 +1584,7 @@ spinbutton { dropdown > popover.menu.background > contents { padding: 0; } dropdown > button > box { - border-spacing: 6px; + border-spacing: $container_padding; } dropdown, @@ -1863,19 +2206,23 @@ headerbar { // // Pathbars // -.path-bar > button { - min-width: 12px; + +$pathbar_button_checked_bg: if($variant == 'light', #808080, #b8b8b8); + +pathbar > button { + min-width: $container_padding * 2; min-height: if($variant == 'light', 24px, 26px); &.text-button, &.image-button, & { - padding-left: 6px; - padding-right: 6px; + padding-left: $container_padding; + padding-right: $container_padding; } &:hover { box-shadow: none; } &:active, &:checked { - @include button(header-checked); + background-color: $pathbar_button_checked_bg; + color: if($variant == 'light', rgba(white, 1), rgba(black, 0.75)); border-color: $button_borders; } @@ -1886,8 +2233,8 @@ headerbar { &.text-button.image-button label { padding-left: 0; padding-right: 0; } &.text-button.image-button, & { - label:last-child { padding-right: 10px; } - label:first-child { padding-left: 10px; } + label:last-child { padding-right: $container_padding + 4px; } + label:first-child { padding-left: $container_padding + 4px; } } &.slider-button, @@ -3462,13 +3809,29 @@ separator { // // Lists // +listview, list { background-color: $base_color; border-color: $borders_color; + background-clip: padding-box; color: $fg_color; > row { padding: 2px; + background-clip: padding-box; + + &.expander { padding: 0; } + &.expander .row-header { padding: 2px; } + } + + &.horizontal row.separator, + &.separators.horizontal > row:not(.separator) { + border-left: 1px solid $borders_color; + } + + &:not(.horizontal) row.separator, + &.separators:not(.horizontal) > row:not(.separator) { + border-bottom: 1px solid $borders_color; } &.content:not(.conversation-listbox) { @@ -3498,9 +3861,6 @@ list { } } } - - > row.expander { padding: 0px; } - > row.expander .row-header { padding: 2px; } } listview.view { @@ -3539,6 +3899,29 @@ listview.view { } row { + background-clip: padding-box; + + label.subtitle { + font-size: smaller; + @extend .dim-label; + } + + > box.header { + margin-left: $container_padding * 2; + margin-right: $container_padding * 2; + min-height: $large_size; + + > .icon:disabled { + filter: opacity($disabled_opacity); + } + + > box.title { + margin-top: $container_padding; + margin-bottom: $container_padding; + border-spacing: $container_padding / 2; + } + } + &:not(:hover) { transition: all 300ms $ease-out-quad; } button.circular { @extend %circular_button; } @@ -3555,6 +3938,28 @@ row { &.activatable { @extend %row_activatable; } + + &.combo { + image.dropdown-arrow:disabled { + filter: opacity($disabled_opacity); + } + + listview.inline { + background: none; + border: none; + box-shadow: none; + color: inherit; + + &, &:disabled { + background: none; + color: inherit; + } + } + + popover > contents { + min-width: 120px; + } + } } columnview { @@ -3648,21 +4053,26 @@ columnview row:not(:selected) cell editablelabel.editing text selection { // Expanders // expander { - min-width: 16px; - min-height: 16px; - -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); - &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } - &:hover { color: lighten($fg_color,30%); } //only lightens the arrow - &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + &:hover { color: lighten($fg_color,30%); } //only lightens the arrow + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + &:disabled { filter: opacity($disabled_opacity); } } expander-widget { > box > title { border-radius: $bt_radius; + > expander { + opacity: .7; + } + &:hover > expander { - color: lighten($fg_color, 30%); //only lightens the icon + opacity: 1; } } } @@ -3802,6 +4212,10 @@ window.dialog.message { // Message Dialog styling } } +window.aboutdialog image.large-icons { + -gtk-icon-size: 128px; +} + // // Filechooser // @@ -4322,10 +4736,27 @@ colorswatch { button.color { padding: 0; + > colorswatch:only-child { + border-radius: 3px; + + > overlay { + border-radius: 2px; + } + + &:disabled { + filter: none; + } + + &.light > overlay { + border-color: $borders_color; + } + } + colorswatch:first-child:last-child { - &, overlay { - margin: 4px; - border-radius: 0; + margin: $container_padding / 2; + + &, > overlay { + border-radius: 3px; } } } @@ -4376,11 +4807,6 @@ colorchooser .popover.osd { border-radius: $bt_radius; } // // Shortcuts Help // -button.circular { - @extend %circular_button; - - // label { padding: 0; } -} .keycap { min-width: $small_size - 4px; diff --git a/src/sass/gtk/apps/_gnome-40.0.scss b/src/sass/gtk/apps/_gnome-40.0.scss new file mode 100644 index 0000000..c5c7267 --- /dev/null +++ b/src/sass/gtk/apps/_gnome-40.0.scss @@ -0,0 +1,48 @@ +// +// Extensions +// +window.background.csd { + > stack, // GameMode setting + > stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting + > box > stack > scrolledwindow > viewport > box { + > list { + @extend %circular_list; + + row.activatable { @extend %circular_row; } + } + } + + stack stack stack frame, // ArcMenu setting + > stack > stack > box > frame, // Night Theme Switcher setting + > stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists + > stack > box > stack > box > frame, // ArcMenu setting + > stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting + > stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting + > stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting + > border { border: none; } + border: none; + + > list { + @extend %circular_list; + + row.activatable { @extend %circular_row; } + } + } + + > stack > box > box > list, + > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar + border-bottom-left-radius: $wm_radius; + } + + &.maximized, &.tiled, &.fullscreen { + > stack > box > box > list, + > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar + border-bottom-left-radius: $maximized_radius; + } + } +} + +window.nightthemeswitcher headerbar { + background: $header_bg; + color: $header_fg; +} diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss new file mode 100644 index 0000000..8d5efb6 --- /dev/null +++ b/src/sass/gtk/apps/_libadwaita.scss @@ -0,0 +1,114 @@ + +// +// avatar +// + +avatar { + border-radius: $circular_radius; + font-weight: bold; + + // The list of colors to generate avatars. + // Each avatar color is represented by a font color, a gradient start color and a gradient stop color. + // There are 8 different colors for avtars in the list if you change the number of them you + // need to update the NUMBER_OF_COLORS in src/adw-avatar.c. + // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)). + $avatarcolorlist: ( + (#cfe1f5, #83b6ec, #337fdc), // blue + (#caeaf2, #7ad9f1, #0f9ac8), // cyan + (#cef8d8, #8de6b1, #29ae74), // green + (#e6f9d7, #b5e98a, #6ab85b), // lime + (#f9f4e1, #f8e359, #d29d09), // yellow + (#ffead1, #ffcb62, #d68400), // gold + (#ffe5c5, #ffa95a, #ed5b00), // orange + (#f8d2ce, #f78773, #e62d42), // raspberry + (#fac7de, #e973ab, #e33b6a), // magenta + (#e7c2e8, #cb78d4, #9945b5), // purple + (#d5d2f5, #9e91e8, #7a59ca), // violet + (#f2eade, #e3cf9c, #b08952), // beige + (#e5d6ca, #be916d, #785336), // brown + (#d8d7d3, #c0bfbc, #6e6d71), // gray + ); + + @for $i from 1 through length($avatarcolorlist) { + &.color#{$i} { + $avatarcolor: nth($avatarcolorlist, $i); + background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3)); + color: nth($avatarcolor, 1); + } + } + + &.contrasted { color: white; } + + &.image { background: none; } +} + +// +// preferencespage +// + +preferencespage > scrolledwindow > viewport > clamp > box { + margin: 24px 12px; + border-spacing: 24px; +} + +preferencesgroup > box { + &, .labels { + border-spacing: $container_padding; + } + + > box.header:not(.single-line) { + margin-bottom: $container_padding; + } + + > box.single-line { + min-height: 34px; + } +} + +// +// AdwStatusPage +// + +statuspage { + > scrolledwindow > viewport > box { + margin: 36px $container_padding * 2; + border-spacing: 36px; + + > clamp > box { + border-spacing: $container_padding * 2; + + > .icon { + -gtk-icon-size: 128px; + + color: gtkalpha(currentColor, 0.55); + + &:disabled { + opacity: $disabled_opacity; + } + + &:not(:last-child) { + margin-bottom: 24px; + } + } + } + } + + &.compact > scrolledwindow > viewport > box { + margin: 24px 12px; + border-spacing: 24px; + + > clamp > box { + > .icon { + -gtk-icon-size: 96px; + + &:not(:last-child) { + margin-bottom: $container_padding * 2; + } + } + + > .title { + font-size: 18pt; + } + } + } +}