From f79089d0a0b4213cd2e96789d37cccb08e93553a Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Sat, 1 Oct 2022 17:26:08 +0800 Subject: [PATCH 1/2] Fixed #75 --- .../firefox/chrome/Colloid/parts/tabsbar.css | 4 +- src/sass/gnome-shell/_common.scss | 56 ++++- src/sass/gnome-shell/_widgets-42-0.scss | 2 + src/sass/gnome-shell/common/_buttons.scss | 12 + src/sass/gnome-shell/common/_calendar.scss | 31 +-- .../gnome-shell/common/_message-list.scss | 2 +- src/sass/gnome-shell/common/_misc.scss | 2 +- src/sass/gnome-shell/common/_popovers.scss | 27 +- .../gnome-shell/common/_quick-settings.scss | 183 ++++++++++++++ .../gnome-shell/widgets-42-0/_popovers.scss | 6 +- .../gnome-shell/widgets-42-0/_screenshot.scss | 204 +++++++++++++++ src/sass/gtk/_common-4.0.scss | 235 ++++++++++-------- src/sass/gtk/apps/_gnome-3.0.scss | 5 +- src/sass/gtk/apps/_gnome-4.0.scss | 73 +++++- src/sass/gtk/apps/_libadwaita.scss | 6 +- 15 files changed, 697 insertions(+), 151 deletions(-) create mode 100644 src/sass/gnome-shell/common/_quick-settings.scss create mode 100644 src/sass/gnome-shell/widgets-42-0/_screenshot.scss diff --git a/src/other/firefox/chrome/Colloid/parts/tabsbar.css b/src/other/firefox/chrome/Colloid/parts/tabsbar.css index 963cef81..b66a9c89 100644 --- a/src/other/firefox/chrome/Colloid/parts/tabsbar.css +++ b/src/other/firefox/chrome/Colloid/parts/tabsbar.css @@ -230,9 +230,7 @@ tab { } .tab-icon-overlay[crashed] { - list-style-image: none !important; - top: 0 !important; - inset-inline-end: 0 !important; + list-style-image: url("../icons/info-symbolic.svg") !important; } /* Close tab button */ diff --git a/src/sass/gnome-shell/_common.scss b/src/sass/gnome-shell/_common.scss index be44165a..8dfb99fe 100644 --- a/src/sass/gnome-shell/_common.scss +++ b/src/sass/gnome-shell/_common.scss @@ -24,10 +24,60 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; */ // Stage -stage { - @include fontsize($font_size); - color: $text; +// stage { +// @include fontsize($font_size); +// color: $text; +// } + +/* General Typography */ + +%large_title { + font-weight: 300; + @include fontsize(24); } +%title_1 { + font-weight: 800; + @include fontsize(20); +} + +%title_2 { + font-weight: 800; + @include fontsize(15); +} + +%title_3 { + font-weight: 700; + @include fontsize(15); +} + +%title_4 { + font-weight: 700; + @include fontsize(13); +} + +%heading { + font-weight: 700; + @include fontsize(11); +} + +%caption_heading { + font-weight: 700; + @include fontsize(9); +} + +%caption { + font-weight: 400; + @include fontsize(9); +} + +%smaller { + font-weight: 400; + @include fontsize(8); +} + +%monospace {font-family: monospace;} +%numeric { font-feature-settings: "tnum";} + @import 'widgets-40-0'; @import 'extensions-40-0'; diff --git a/src/sass/gnome-shell/_widgets-42-0.scss b/src/sass/gnome-shell/_widgets-42-0.scss index 2aa889af..0c1540d7 100644 --- a/src/sass/gnome-shell/_widgets-42-0.scss +++ b/src/sass/gnome-shell/_widgets-42-0.scss @@ -19,6 +19,7 @@ @import 'common/notifications'; @import 'common/osd'; @import 'common/overview'; +@import 'common/quick-settings'; @import 'common/panel'; @import 'common/popovers'; @import 'common/screen-shield'; @@ -39,5 +40,6 @@ @import 'widgets-40-0/panel'; @import 'widgets-42-0/popovers'; @import 'widgets-40-0/search-entry'; +@import 'widgets-42-0/screenshot'; @import 'widgets-40-0/window-picker'; @import 'widgets-40-0/workspace-thumbnails'; diff --git a/src/sass/gnome-shell/common/_buttons.scss b/src/sass/gnome-shell/common/_buttons.scss index 51accb6d..a8633787 100644 --- a/src/sass/gnome-shell/common/_buttons.scss +++ b/src/sass/gnome-shell/common/_buttons.scss @@ -21,8 +21,20 @@ padding: 0 $base_padding * 2; border-radius: $base_radius; border: none; + @extend %button; .popup-menu & { @extend %flat_button; } } + +// buttons on OSD elements +// that are undecorated by default and use OSD colors +%osd_button { + @include button(flat-normal, $tc:on($osd)); + &:insensitive { @include button(insensitive, $tc:on($osd), $bc:$osd); } + &:focus { @include button(focus, $tc:on($osd), $bc:$osd);} + &:hover { @include button(hover, $tc:on($osd), $bc:$osd);} + &:active { @include button(active, $tc:on($osd), $bc:$osd);} + &:outlined, &:checked { @include button(checked, $tc:on($osd), $bc:$osd);} +} diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss index 3b8dbde8..09b35e26 100644 --- a/src/sass/gnome-shell/common/_calendar.scss +++ b/src/sass/gnome-shell/common/_calendar.scss @@ -21,15 +21,6 @@ } } -.clock-display-box { - spacing: 2px; - - .clock { - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; - } -} - // overall menu #calendarArea { padding: $base_padding 0; @@ -39,10 +30,10 @@ .datemenu-calendar-column { spacing: $base_spacing; border: 0 solid $border; - padding: 0 $base_padding * 2; + padding: 0 $base_margin 0 $base_padding * 2; - &:ltr {margin-right: $base_margin * 2; border-left-width: 0; } - &:rtl {margin-left: $base_margin * 2; border-right-width: 0; } + &:ltr { margin-right: $base_margin * 2; border-left-width: 0; } + &:rtl { margin-left: $base_margin * 2; border-right-width: 0; } .datemenu-displays-section { padding-bottom: 0; } @@ -73,7 +64,7 @@ margin: 0 $base_padding * 2; text-shadow: none; color: $text-secondary; - border-radius: $menu_radius; + border-radius: $base_radius; &:hover, &:focus { background-color: overlay($base, hover); @@ -101,10 +92,10 @@ border: none; box-shadow: none; background-color: transparent; - padding: 0 $base_padding !important; - margin: 0 !important; + padding: 0; + margin: 0; text-shadow: none; - border-radius: $menu_radius; + // border-radius: $base_radius; // month .calendar-month-label { @@ -115,7 +106,7 @@ text-shadow: none; @include fontsize($font_size + 1); - &:focus {} + // &:focus {} } // prev/next month icons @@ -231,9 +222,9 @@ .calendar-week-number { width: $item_size - 6px; - height: $item_size - 12px; - margin: 6px $base_margin/2 !important; - padding: 0 0; + height: 0; + margin: 8px 0 8px $base_padding !important; + padding: 0 !important; border-radius: $base_radius; background-color: $fill; color: $text-disabled; diff --git a/src/sass/gnome-shell/common/_message-list.scss b/src/sass/gnome-shell/common/_message-list.scss index 43662dd6..bc601ac8 100644 --- a/src/sass/gnome-shell/common/_message-list.scss +++ b/src/sass/gnome-shell/common/_message-list.scss @@ -5,7 +5,7 @@ width: if($compact == 'true', 25.5em, 31.5em); text-shadow: none; border: none; - padding: 0; + padding: $base_margin 0; // padding and margins to account for scrollbar &:ltr { margin-left: 0; margin-right: 0; padding-right: 0; border-right-width: 0; } diff --git a/src/sass/gnome-shell/common/_misc.scss b/src/sass/gnome-shell/common/_misc.scss index 133d8a44..4046049a 100644 --- a/src/sass/gnome-shell/common/_misc.scss +++ b/src/sass/gnome-shell/common/_misc.scss @@ -11,7 +11,7 @@ color: on(black, secondary); border-radius: $circular_radius; border: none; - box-shadow: 0 2px 3px rgba(black, 0.25); + box-shadow: none; icon-size: $base_icon_size * 4; // 64px // margin: 6px; diff --git a/src/sass/gnome-shell/common/_popovers.scss b/src/sass/gnome-shell/common/_popovers.scss index de585601..4855349a 100644 --- a/src/sass/gnome-shell/common/_popovers.scss +++ b/src/sass/gnome-shell/common/_popovers.scss @@ -16,7 +16,7 @@ .popup-menu { min-width: if($compact == 'true', 10em, 12em); color: $text-secondary !important; - padding: 0 !important; + padding: 0; font-weight: normal; border-radius: $menu_radius; box-shadow: 0 3px 6px rgba(black, 0.08); @@ -24,7 +24,7 @@ @include fontsize($font_size - 1); .popup-menu-content { - padding: $base_padding 0 !important; + padding: $base_padding; background-color: $popover; border-radius: $menu_radius; margin: 0; @@ -41,8 +41,10 @@ color: $text-secondary !important; text-shadow: none; border-radius: $base_radius; - margin: 0 $base_padding; + margin: 0; + transition-duration: 100ms; font-weight: normal; + background-color: transparent; &:checked { font-weight: normal; @@ -84,7 +86,7 @@ color: $text-secondary !important; border: none; box-shadow: none; - margin: 0 $base_padding; + margin: 0; border-radius: 0 0 $base_radius $base_radius; .popup-menu-item { @@ -146,3 +148,20 @@ -st-icon-style: symbolic; } } + +// right-click (and panel) app menu +.app-menu { + max-width: 27.25em; + + // this is unneeded at the top-level in this menu, hide it + .popup-menu-ornament { width: 0 !important; } + + .popup-inactive-menu-item:first-child { + // "Open Windows" label + > StLabel { + @extend %caption_heading; + &:ltr {margin-right: $base_margin * 2;} + &:rtl {margin-left: $base_margin * 2;} + } + } +} diff --git a/src/sass/gnome-shell/common/_quick-settings.scss b/src/sass/gnome-shell/common/_quick-settings.scss new file mode 100644 index 00000000..43fe74e4 --- /dev/null +++ b/src/sass/gnome-shell/common/_quick-settings.scss @@ -0,0 +1,183 @@ +.quick-settings { + padding: $base_padding * 3 !important; + border-radius: $base_radius + $base_padding * 3 !important; + + .icon-button, .button { + padding: $base_padding * 1.75; + } + + .popup-menu-content { + padding: $base_padding * 2 !important; + } +} + +.quick-settings-grid { + spacing-rows: $base_padding * 2; + spacing-columns: $base_padding * 2; +} + +.quick-toggle { + border-radius: $base_radius; + min-width: 12em; + max-width: 12em; + min-height: 40px; + border: none; + background-color: $button !important; + + &:hover { + background-color: $divider !important; + } + + &:active { + background-color: rgba($text, 0.15) !important; + } + + &:checked { + background-color: $primary !important; + color: on($primary); + + &:hover { + background-color: mix($text, $primary, 6%) !important; + color: on($primary); + } + + &:active { + background-color: mix($text, $primary, 15%) !important; + color: on($primary); + } + } + + & > 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: $button !important; + padding: $base_padding $base_padding * 1.75; + + &:active { + background-color: $divider !important; + } + + &:ltr { border-radius: 0 $base_radius $base_radius 0; } + &:rtl { border-radius: $base_radius 0 0 $base_radius; } + } +} + +.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: $circular_radius; + } + + .quick-toggle-icon { + icon-size: $base_icon_size; + } + + .icon-button { + background-color: transparent; + color: $text !important; + + &:hover { + background-color: $fill; + } + + &:active { + background-color: $divider; + } + } +} + +.quick-toggle-menu { + background-color: $popover !important; + color: $text !important; + border-radius: $base_radius + $base_padding * 2 !important; + padding: $base_padding * 2; + margin: $base_padding * 2 $base_padding * 3 0; + + .popup-menu-item { + border-radius: $base_radius !important; + + &:focus, &:hover, &.selected { + color: $text !important; + background-color: $divider !important; + } + + > 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: $base_radius; + padding: 1.5 * $base_padding; + background-color: on($popover, divider) !important; + + &.active { + background-color: $primary !important; + color: on($primary); + } + } + + & .title { + @extend %title_3; + } + + & .subtitle { + @extend %caption_heading; + } + } +} + +.quick-toggle-menu-container { +} + +.quick-settings-system-item { + & > StBoxLayout { spacing: 2 * $base_padding; } + + .icon-button { + background-color: $button; + color: $text; + border-radius: $base_radius; + @extend %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; } +} diff --git a/src/sass/gnome-shell/widgets-42-0/_popovers.scss b/src/sass/gnome-shell/widgets-42-0/_popovers.scss index 19c67201..a93e3dd5 100644 --- a/src/sass/gnome-shell/widgets-42-0/_popovers.scss +++ b/src/sass/gnome-shell/widgets-42-0/_popovers.scss @@ -12,11 +12,13 @@ .popup-separator-menu-item { padding: 0; + .popup-menu-ornament { + width: 0 !important; + } + .popup-separator-menu-item-separator { height: 1px; //not really the whole box background-color: $divider; - padding-top: 0 !important; - padding-bottom: 0 !important; margin: $base_padding 32px; .popup-sub-menu & { //submenu separators diff --git a/src/sass/gnome-shell/widgets-42-0/_screenshot.scss b/src/sass/gnome-shell/widgets-42-0/_screenshot.scss new file mode 100644 index 00000000..7064ed2c --- /dev/null +++ b/src/sass/gnome-shell/widgets-42-0/_screenshot.scss @@ -0,0 +1,204 @@ +// Screenshot UI +.icon-label-button-container { + spacing: $base_padding; + @extend %caption; + + StIcon { icon-size: 32px; } +} + +$screenshot_ui_panel_padding: $base_padding * 3; +$screenshot_ui_shot_cast_margin: 21px; +$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin; +$screenshot_ui_shot_cast_spacing: 3px; + +$screenshot_ui_button_red: $error; + +.screenshot-ui-panel { + @extend %osd_panel; + border-radius: $screenshot_ui_panel_border_radius; + padding: $screenshot_ui_panel_padding; + // Reduce the bottom padding a little to accommodate the large capture button. + padding-bottom: $screenshot_ui_panel_padding - 6px; + margin-bottom: 4em; + spacing: $base_padding * 2; +} + +.screenshot-ui-close-button { + @extend .window-close; // copy window close button + padding: $base_padding !important; // but with more padding + margin-top: 12px; + box-shadow: 0 2px 4px 0 rgba(black, 0.15); + &.left { margin-left: $base_padding * 2; } + &.right { margin-right: $base_padding * 2; } +} + +.screenshot-ui-type-button { + @extend %osd_button; + min-width: 48px; + padding: $base_padding * 2 $base_padding * 3 !important; + border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; +} + +.screenshot-ui-capture-button { + width: 36px; + height: 36px; + border-radius: $circular_radius; + border: 4px on($osd); + padding: 4px; + + .screenshot-ui-capture-button-circle { + background-color: on($osd); + transition-duration: 200ms; + &:hover, &:focus { background-color: $divider; } + border-radius: $circular_radius; + } + + &:hover, &:focus { + .screenshot-ui-capture-button-circle { + background-color: darken(on($osd), 15%); + } + } + + &:active { + .screenshot-ui-capture-button-circle { + background-color: darken(on($osd), 50%); + } + } + + &:cast { + .screenshot-ui-capture-button-circle { + background-color: $screenshot_ui_button_red; + } + &:hover, &:focus { + .screenshot-ui-capture-button-circle { + background-color: lighten($screenshot_ui_button_red, 5%); + } + } + &:active { + .screenshot-ui-capture-button-circle { + background-color: darken($screenshot_ui_button_red, 7%); + } + } + } +} + +.screenshot-ui-shot-cast-container { + background-color: lighten($osd, 5%); + border-radius: $modal_radius; + padding: $screenshot_ui_shot_cast_spacing; + spacing: $screenshot_ui_shot_cast_spacing; + + &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} + &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} +} + +.screenshot-ui-shot-cast-button { + padding: $base_padding $base_padding * 2; + background-color: transparent; + &:hover, &:focus { background-color: lighten($osd, 10%);} + &:active { background-color: $track;} + &:checked { background-color: white; color: black;} + &:insensitive { color: transparentize(on($osd), 0.5);} + + border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; + + StIcon { icon-size: $base_icon_size;} +} + +.screenshot-ui-show-pointer-button { + @extend %osd_button; + border-radius: $circular_radius; + padding: $base_padding * 2 !important; + StIcon { icon-size: $base_icon_size;} +} + +.screenshot-ui-area-indicator-shade { + background-color: rgba(0,0,0, .3); +} + +.screenshot-ui-area-selector { + .screenshot-ui-area-indicator-shade { + background-color: rgba(0,0,0, .5); + } + + .screenshot-ui-area-indicator-selection { + border: 2px white; + } +} + +.screenshot-ui-area-selector-handle { + border-radius: $circular_radius; + background-color: white; + box-shadow: 0 1px 3px 2px rgba(0,0,0, .2); + width: 24px; + height: 24px; +} + +.screenshot-ui-window-selector { + background-color: $scrim; + + .screenshot-ui-window-selector-window-container { + margin: 100px; + } + + &:primary-monitor { + .screenshot-ui-window-selector-window-container { + // Make some room for the panel. + margin-bottom: 200px; + } + } +} + +.screenshot-ui-window-selector-window-border { + transition-duration: 200ms; + border-radius: $modal_radius; + border: 6px transparent; +} + +.screenshot-ui-window-selector-check { + transition-duration: 200ms; + color: transparent; + border-radius: 99px; + border-width: 12px; + icon-size: 24px; +} + +.screenshot-ui-window-selector-window { + &:hover { + .screenshot-ui-window-selector-window-border { + border-color: darken($primary, 15%); + } + } + &:checked { + .screenshot-ui-window-selector-window-border { + border-color: $primary; + background-color: transparentize($primary, 0.8); + } + + .screenshot-ui-window-selector-check { + color: on($primary); + background-color: $primary; + } + } +} + +.screenshot-ui-screen-selector { + transition-duration: 200ms; + background-color: rgba(0,0,0,.5); + + &:hover { background-color: rgba(0,0,0,.3);} + &:active { background-color: rgba(0,0,0,.7);} + &:checked { + background-color: transparent; + border: 2px white; + } +} + +.screenshot-ui-tooltip { + color: on($osd); + background-color: $osd; + border-radius: $circular_radius; + padding: $base_padding $base_padding * 2; + text-align: center; + -y-offset: 24px; +} diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index c54cce03..b6c1287b 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -1172,7 +1172,7 @@ spinbutton { /************** * ComboBoxes * **************/ -dropdown > popover.menu.background > contents { padding: 0; } +// dropdown > popover.menu.background > contents { padding: 0; } dropdown > button > box { border-spacing: $space-size; @@ -1203,7 +1203,7 @@ combobox { padding: 0; listview { - margin: $space-size 0; + margin: 0; & > row { padding: $space-size; @@ -1461,12 +1461,12 @@ headerbar { } .title { - padding: 0 12px; + padding: 0 $space-size * 2; font-weight: bold; } .subtitle { - padding: 0 12px; + padding: 0 $space-size * 2; font-size: smaller; } @@ -1507,12 +1507,15 @@ headerbar { entry, spinbutton, button, - stackswitcher { + stackswitcher, + separator:not(.sidebar) { margin-top: $space-size; margin-bottom: $space-size; } - menubutton.popup { + menubutton > button, + spinbutton > button, + splitbutton > button { margin-top: 0; margin-bottom: 0; } @@ -1522,8 +1525,8 @@ headerbar { } separator:not(.sidebar) { - margin-top: $large-size / 4; - margin-bottom: $large-size / 4; + // margin-top: $large-size / 4; + // margin-bottom: $large-size / 4; background-color: $titlebar-divider; } @@ -1935,6 +1938,7 @@ menubar { **********************/ popover.menu { box.inline-buttons { + color: $text; padding: 0 $space-size; button.image-button.model { @@ -2711,12 +2715,12 @@ switch { > slider { transition: all $duration $ease-out; - min-width: $small-size - 4px; - min-height: $small-size - 4px; - margin: if($variant == 'light', 1px, 0); + min-width: $small-size - 6px; + min-height: $small-size - 6px; + margin: $space-size / 2; border-radius: $circular-radius; outline: none; - box-shadow: none; + box-shadow: $shadow-z3; background-color: white; border: none; } @@ -2917,110 +2921,114 @@ columnview.view { /************ * GtkScale * ************/ - scale { - // sizing - $_marks_length: 8px; - $_marks_distance: 7px; - $trough_size: 2px; - $finetune_trough_size: 4px; +scale { + // sizing + $_marks_length: 8px; + $_marks_distance: 7px; - $slider_size: 18px; + $trough_size: 2px; + $finetune_trough_size: 4px; - $slider_margin: -($slider_size - $trough_size) / 2; - $finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2; + $slider_size: 18px; - $color_slider_margin: -($slider_size) * 3 / 4; - $color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin; + $slider_margin: -($slider_size - $trough_size) / 2; + $finetune_slider_margin: -($slider_size - $finetune_trough_size) / 2; - min-height: $trough_size; - min-width: $trough_size; + $color_slider_margin: -($slider_size) * 3 / 4; + $color_marks_slider_margin: -($slider_size - 16px) - $color_slider_margin; - &.horizontal { padding: ($medium-size - $trough_size) / 2 12px; } + min-height: $trough_size; + min-width: $trough_size; - &.vertical { padding: 12px ($medium-size - $trough_size) / 2; } + &.horizontal { padding: ($medium-size - $trough_size) / 2 12px; } + &.vertical { padding: 12px ($medium-size - $trough_size) / 2; } - // the slider is inside the trough, so to have make it bigger there's a negative margin - slider { - min-height: $slider_size; - min-width: $slider_size; - margin: $slider_margin; - } + > trough { + transition: background-color $duration $ease-out; + outline: none; + background-color: $track; - // click-and-hold the slider to activate - &.fine-tune { - &.horizontal { - min-height: $finetune_trough_size; - padding-top: ($medium-size - $finetune_trough_size) / 2; - padding-bottom: ($medium-size - $finetune_trough_size) / 2; - } + &:disabled { background-color: $track-disabled; } - &.vertical { - min-width: $finetune_trough_size; - padding-left: ($medium-size - $finetune_trough_size) / 2; - padding-right: ($medium-size - $finetune_trough_size) / 2; - } + // the colored part of the backing bit + > highlight { + transition: background-image $duration $ease-out; + background-image: image($primary); - // to make the trough grow in fine-tune mode - slider { margin: $finetune_slider_margin; } - } + &:disabled { + background-color: $background; + background-image: image($text-secondary-disabled); + } + } - // the backing bit - trough { - transition: background-color $duration $ease-out; - outline: none; - background-color: $track; + // this is another differently styled part of the backing bit, the most relevant use case is for example + // in media player to indicate how much video stream as been cached + > fill { + transition: background-color $duration $ease-out; + background-color: $track; - &:disabled { background-color: $track-disabled; } - } + &:disabled { background-color: transparent; } + } - // the colored part of the backing bit - highlight { - transition: background-image $duration $ease-out; - background-image: image($primary); + // the slider is inside the trough, so to have make it bigger there's a negative margin + > slider { + min-height: $slider_size; + min-width: $slider_size; + margin: $slider_margin; - &:disabled { - background-color: $background; - background-image: image($text-secondary-disabled); - } - } + transition: all $duration $ease-out; + border-radius: $circular-radius; + color: $primary; + background-color: $base; + box-shadow: inset 0 0 0 2px $primary; - // this is another differently styled part of the backing bit, the most relevant use case is for example - // in media player to indicate how much video stream as been cached - fill { - transition: background-color $duration $ease-out; - background-color: $track; + &:hover { + box-shadow: inset 0 0 0 2px $primary, 0 0 0 8px $divider; + } - &:disabled { background-color: transparent; } - } + &:active { + box-shadow: inset 0 0 0 4px $primary, 0 0 0 8px $divider; + } - slider { - transition: all $duration $ease-out; - border-radius: $circular-radius; - color: $primary; - background-color: $base; - box-shadow: inset 0 0 0 2px $primary; + &:disabled { + box-shadow: inset 0 0 0 2px $text-secondary-disabled; + } + } + } - &:hover { - box-shadow: inset 0 0 0 2px $primary, 0 0 0 8px $divider; - } + // click-and-hold the slider to activate + &.fine-tune { + &.horizontal { + min-height: $finetune_trough_size; + padding-top: ($medium-size - $finetune_trough_size) / 2; + padding-bottom: ($medium-size - $finetune_trough_size) / 2; + } - &:active { - box-shadow: inset 0 0 0 4px $primary, 0 0 0 8px $divider; - } + &.vertical { + min-width: $finetune_trough_size; + padding-left: ($medium-size - $finetune_trough_size) / 2; + padding-right: ($medium-size - $finetune_trough_size) / 2; + } - &:disabled { - box-shadow: inset 0 0 0 2px $text-secondary-disabled; - } - } + // to make the trough grow in fine-tune mode + > trough > slider { margin: $finetune_slider_margin; } + } - marks, - value { color: $text-secondary; } + > marks, + > value { color: $text-secondary; } - indicator { - background-color: $track; - color: transparent; - } + indicator { + background-color: $track; + color: transparent; + } + + &.marks-before:not(.marks-after), + &.marks-after:not(.marks-before) { + > trough > slider { + transform: rotate(0); + } + } //marks margins @each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom), @@ -3063,7 +3071,7 @@ columnview.view { @each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'), ('marks-after', 'marks-after:not(.marks-before)') { &.#{$dir_class}.#{$marks_class} { - slider { + > trough > slider { transition: background-color $duration $ease-out, background-size $ripple-fade-out-duration $ease-out, background-image $ripple-fade-out-opacity-duration $ease-out; @@ -3117,7 +3125,7 @@ columnview.view { &.horizontal { padding: 0 0 12px 0; - slider { + > trough > slider { &:dir(ltr), &:dir(rtl) { // specificity bump margin-bottom: $color_slider_margin; margin-top: $color_marks_slider_margin; @@ -3138,7 +3146,7 @@ columnview.view { &:dir(rtl) { padding: 0 12px 0 0; - slider { + > trough > slider { margin-right: $color_slider_margin; margin-left: $color_marks_slider_margin; } @@ -3358,6 +3366,10 @@ separator { min-width: 1px; min-height: 1px; background-color: $divider; + + &.spacer { + @extend %hide_separators; + } } %hide_separators { @@ -3519,6 +3531,10 @@ row { &:focus, &:hover, &:active { box-shadow: none; } } + button:checked &.activatable { + color: on($primary); + } + &:selected { @extend %selected_items; color: inherit; // for overlays @@ -3727,7 +3743,11 @@ window.dialog.message { // Message Dialog styling &.background { background-color: $surface; } box.dialog-vbox.vertical { - border-spacing: 10px; + border-spacing: $space-size * 2; + + > box.vertical { + margin-bottom: $space-size; + } } .titlebar { @@ -3744,19 +3764,21 @@ window.dialog.message { // Message Dialog styling } .dialog-action-area { - margin-top: -$space-size; + margin-top: $space-size; // padding: $space-size; > button { @extend %button-flat; + border-radius: 0; + border: none; + min-height: $menuitem-size; + padding: $space-size $space-size * 2; - &, &:first-child, &:last-child { border-radius: $circular-radius; } + &:first-child { border-radius: 0 0 0 $window-radius; } - &:not(:last-child) { margin-right: $space-size; } + &:last-child { border-radius: 0 0 $window-radius 0; } - &:not(:disabled) { color: $primary; } - - // &.suggested-action:not(:disabled) { color: $suggested; } + &:not(:last-child) { border-right: 1px solid $border; } &.destructive-action:not(:disabled) { color: $destructive; } } @@ -3929,7 +3951,7 @@ row image.sidebar-icon { &:disabled { color: $text-secondary-disabled; } } -placessidebar.sidebar { +placessidebar { > viewport.frame { border-style: none; } list > separator { margin: $space-size / 2 0; } @@ -4077,12 +4099,11 @@ video { * GtkInfoBar * **************/ infobar { - border: none; - margin-bottom: 0; - > revealer > box { padding: $space-size; border-spacing: $space-size * 2; + border-bottom: 1px solid $border; + box-shadow: none; } &.info { diff --git a/src/sass/gtk/apps/_gnome-3.0.scss b/src/sass/gtk/apps/_gnome-3.0.scss index 74ea79f0..3f03884b 100644 --- a/src/sass/gtk/apps/_gnome-3.0.scss +++ b/src/sass/gtk/apps/_gnome-3.0.scss @@ -86,11 +86,12 @@ $nautilus: $base-alt; .floating-bar { min-height: 32px; padding: 0; - margin: 6px; - border-style: none; + margin: $space-size; + border: none; border-radius: $corner-radius; background-color: $primary; color: on($primary); + box-shadow: $shadow-z3; button { margin: (32px - $small-size) / 2; diff --git a/src/sass/gtk/apps/_gnome-4.0.scss b/src/sass/gtk/apps/_gnome-4.0.scss index 7d724c0c..9fdf4cd6 100644 --- a/src/sass/gtk/apps/_gnome-4.0.scss +++ b/src/sass/gtk/apps/_gnome-4.0.scss @@ -7,6 +7,24 @@ placesview { label { color: $text-secondary; } } + + .floating-bar { + min-height: 32px; + padding: 0; + margin: $space-size; + border-style: none; + border-radius: $corner-radius; + background-color: $primary; + color: on($primary); + box-shadow: $shadow-z3; + + button { + margin: (32px - $small-size) / 2; + color: on($primary); + + @extend %small-button; + } + } } #NautilusPathBar { @@ -26,6 +44,38 @@ } } +#NautilusQueryEditor { // search entry + > menubutton > button { + min-width: 16px; + min-height: 16px; + margin: 0; + } + + > text { margin: 0; } +} + +#NautilusPathBar { + background-color: $titlebar-fill; + border-radius: $corner-radius; + margin: $space-size 0; + + #NautilusPathButton { + margin: 0 $space-size / 2; + border-radius: $corner-radius; + + &.current-dir { + color: $titlebar-text; + + &:hover, &:active { + background: none; + box-shadow: none; + } + } + + &:first-child { margin-left: 0; } + } +} + /************** * Extensions * **************/ @@ -73,6 +123,23 @@ window.background.csd { .history-view { background-color: $base; } +#displayitem { + border-top: 1px solid $border; +} + +.small .card { + border-radius: 0; + box-shadow: none; + border: none; + border-bottom: 1px solid $border; +} + +leaflet { + button.number-button { + background-color: rgba($text, if($variant == 'light', 0.1, 0.15)); + } +} + // // Contacts // @@ -81,12 +148,6 @@ window.background.csd { background: none; } -.small .card { - border-radius: 0; - box-shadow: none; - border-bottom: 1px solid $border; -} - // // Gnome Software // diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss index 47cbc943..4aac3f6d 100644 --- a/src/sass/gtk/apps/_libadwaita.scss +++ b/src/sass/gtk/apps/_libadwaita.scss @@ -45,10 +45,10 @@ avatar { .card { @at-root %card, & { border-radius: $corner-radius; - box-shadow: $shadow-z3; + box-shadow: none; border: 1px solid $border; background-clip: border-box; - background-color: $surface; + background-color: $button; color: $text-secondary; } } @@ -100,6 +100,8 @@ preferencesgroup > box { outline-color: $primary; } } + + .cutout-button { background-color: $base-alt; } } // From ae82a48673f74e11c9a074ced17d7724b394d98a Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Sat, 1 Oct 2022 18:24:03 +0800 Subject: [PATCH 2/2] update --- src/sass/gtk/_common-4.0.scss | 34 ++++++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index b6c1287b..3033caa1 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -2129,7 +2129,7 @@ magnifier { background-image 0ms; min-height: $small-size; min-width: $small-size; - padding: $space-size / 2 $space-size * 2; + padding: $space-size / 2 $space-size; margin: 0; border: none; outline: none; @@ -2149,7 +2149,7 @@ magnifier { &:disabled { color: $text-secondary-disabled; } - &:checked { + &:checked, &:selected { transition: $transition; background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15)); color: $text; @@ -2375,6 +2375,10 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom, } tabbar { + > revealer > box { + box-shadow: none; + } + .box { min-height: $medium-size; border-bottom: none; @@ -2394,13 +2398,15 @@ tabbar { border-right-width: 1px; } - tabbox > background { - &:dir(ltr) { - box-shadow: inset -1px 0 $border; - } + tabbox { + > background { + &:dir(ltr) { + box-shadow: inset -1px 0 $border; + } - &:dir(rtl) { - box-shadow: inset 1px 0 $border; + &:dir(rtl) { + box-shadow: inset 1px 0 $border; + } } } } @@ -2426,15 +2432,23 @@ tabbar { } tabbox { - background-color: $fill; + background-color: rgba($text, if($variant == 'light', 0.08, 0.04)); background-image: none; - padding: $space-size / 2; + padding: $space-size / 2 0; margin: $space-size / 2; border-radius: $modal-radius + $space-size / 2; > background { background: none; } + + > tabboxchild { + margin: 0; + + > tab { + @extend %tabs_tab; + } + } } tab {