From 53fc5f8f8ddd610a65a137cb25b710adbdefb5de Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Tue, 11 Oct 2022 09:26:52 +0800 Subject: [PATCH] update --- src/sass/gnome-shell/_widgets-42-0.scss | 2 +- src/sass/gnome-shell/common/_app-grid.scss | 6 +- .../gnome-shell/common/_quick-settings.scss | 10 +- .../gnome-shell/widgets-42-0/_app-grid.scss | 80 +++++++++ src/sass/gtk/_common-3.0.scss | 20 ++- src/sass/gtk/_common-4.0.scss | 167 ++++++++++-------- src/sass/gtk/_drawing-4.0.scss | 1 + src/sass/gtk/apps/_nemo.scss | 16 +- 8 files changed, 209 insertions(+), 93 deletions(-) create mode 100644 src/sass/gnome-shell/widgets-42-0/_app-grid.scss diff --git a/src/sass/gnome-shell/_widgets-42-0.scss b/src/sass/gnome-shell/_widgets-42-0.scss index 0c1540d7..87b0737a 100644 --- a/src/sass/gnome-shell/_widgets-42-0.scss +++ b/src/sass/gnome-shell/_widgets-42-0.scss @@ -31,7 +31,7 @@ @import 'common/switches'; @import 'common/tiled-previews'; @import 'common/workspace-switcher'; -@import 'widgets-40-0/app-grid'; +@import 'widgets-42-0/app-grid'; @import 'widgets-40-0/dash'; @import 'widgets-40-0/misc'; @import 'widgets-42-0/message-list'; diff --git a/src/sass/gnome-shell/common/_app-grid.scss b/src/sass/gnome-shell/common/_app-grid.scss index 53b42df7..e0e32920 100644 --- a/src/sass/gnome-shell/common/_app-grid.scss +++ b/src/sass/gnome-shell/common/_app-grid.scss @@ -106,7 +106,7 @@ & .icon-grid { row-spacing: $base_spacing * 2; - column-spacing: $base_spacing * 5; + column-spacing: $base_spacing * 4; page-padding-top: 0; page-padding-bottom: 0; page-padding-left: 0; @@ -120,8 +120,8 @@ .app-folder-dialog-container { padding: $base_padding; - width: 620px; - height: 620px; + width: $base_padding * 50 + 420px; + height: $base_padding * 50 + 420px; } // Running app indicator (also shown in dash) diff --git a/src/sass/gnome-shell/common/_quick-settings.scss b/src/sass/gnome-shell/common/_quick-settings.scss index 43fe74e4..e087fb0a 100644 --- a/src/sass/gnome-shell/common/_quick-settings.scss +++ b/src/sass/gnome-shell/common/_quick-settings.scss @@ -119,7 +119,12 @@ &:focus, &:hover, &.selected { color: $text !important; - background-color: $divider !important; + background-color: rgba($text, 0.1) !important; + } + + &:active { + color: $text !important; + background-color: rgba($text, 0.2) !important; } > StIcon { -st-icon-style: symbolic; } @@ -152,9 +157,6 @@ } } -.quick-toggle-menu-container { -} - .quick-settings-system-item { & > StBoxLayout { spacing: 2 * $base_padding; } diff --git a/src/sass/gnome-shell/widgets-42-0/_app-grid.scss b/src/sass/gnome-shell/widgets-42-0/_app-grid.scss new file mode 100644 index 00000000..f9164780 --- /dev/null +++ b/src/sass/gnome-shell/widgets-42-0/_app-grid.scss @@ -0,0 +1,80 @@ + +$app_icon_size: 96px; +$app_icon_spacing: 6px; + +// app icons +.icon-grid { + row-spacing: $app_icon_spacing * 2; + column-spacing: $app_icon_spacing * 2; + max-row-spacing: $app_icon_spacing * 12; + max-column-spacing: $app_icon_spacing * 12; + page-padding-top: $app_icon_spacing * 4; + page-padding-bottom: $app_icon_spacing * 4; + page-padding-left: $app_icon_spacing * 2; + page-padding-right: $app_icon_spacing * 2; +} + +// App Grid pagination indicators +.page-indicator { + padding: $base_padding $base_padding * 2 0; + + .page-indicator-icon { + width: 10px; + height: 10px; + border-radius: 10px; // the same as height&width + background-color: white; + } +} + +.apps-scroll-view { + padding: 0; +} + +.page-navigation-hint { + width: 300px; + + &.dnd { + background: rgba(255, 255, 255, 0.1); + } + + &.next:ltr, + &.previous:rtl { + background-gradient-start: rgba(255, 255, 255, 0.05); + background-gradient-end: transparent; + background-gradient-direction: horizontal; + border-radius: 15px 0px 0px 15px; + } + + &.previous:ltr, + &.next:rtl { + background-gradient-start: transparent; + background-gradient-end: rgba(255, 255, 255, 0.05); + background-gradient-direction: horizontal; + border-radius: 0px 15px 15px 0px; + } +} + +.page-navigation-arrow { + & > StIcon { + margin: 6px; + padding: 18px; + width: 24px; + height: 24px; + border-radius: $circular-radius; + } + + &:insensitive > StIcon { + background-color: on($osd, fill); + color: on($osd, disabled); + } + + &:hover > StIcon { + background-color: on($osd, divider); + color: on($osd); + } + + &:active > StIcon { + background-color: on($osd, track); + color: on($osd); + } +} diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index 0171e252..3195cd3f 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -992,7 +992,7 @@ button.combo:only-child { ************/ toolbar { -GtkWidget-window-dragging: true; - padding: 2px; + padding: 2px 3px; background-color: $background; button { @extend %button-flat; } @@ -1034,7 +1034,7 @@ toolbar { scale, entry, spinbutton, - button { margin: 2px; } + button { margin: 2px 1px; } .linked entry, .linked spinbutton, @@ -1341,6 +1341,8 @@ searchbar > revealer > box { } .background.csd & { + padding: $space-size; + @if $rimless == 'false' and $variant == 'dark' { box-shadow: inset 0 -1px $border; } @else { @@ -3506,22 +3508,22 @@ tooltip { // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: $tooltip; color: on($tooltip); + box-shadow: $shadow-z3; } - &.background.csd { - border-radius: $corner-radius; - } + &.background.csd { border-radius: $corner-radius; } // padding: 4px; /* not working */ - border-radius: $corner-radius/2; box-shadow: none; // otherwise it gets inherited by windowframe.csd // FIXME: we need a border or tooltips vanish on black background. - decoration { background-color: transparent; } + decoration { + background-color: transparent; + } > box { margin: -6px; // Remove hard-coded 6px margin - min-height: 32px - 4px * 2; + min-height: 24px; padding: 4px 8px; } } @@ -3736,7 +3738,7 @@ decoration { } tooltip.csd & { - border-radius: $menu-radius; + border-radius: $corner-radius; box-shadow: none; border: none; } diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index 4575bef0..b9d0089f 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -1055,13 +1055,33 @@ spinbutton { border-radius: $corner-radius; padding: 0; border-spacing: 0; - min-height: 0; @include entry(normal); &:focus-within { @include entry(checked); } &:disabled { @include entry(disabled); } + > text { + border-image: none; + border-radius: 0; + box-shadow: none; + background-color: transparent; + margin: 0; + + > selection { @extend %selected_items_primary; } + } + + > button { + @extend %button-flat-simple; + @extend %small-button; + border: none; + + // Remove unwanted focus indicator + &:focus:not(:hover):not(:active):not(:disabled) { + box-shadow: none; + } + } + &:not(.vertical) { // in this horizontal configuration, the whole spinbutton // behaves as the entry, so we extend the entry styling @@ -1070,71 +1090,11 @@ spinbutton { > text { min-width: $large-size - 8px * 2; // reset all the other props since the spinbutton node is styled here - margin: 0; padding-left: $space-size * 2; - border-image: none; - border-radius: 0; - box-shadow: none; - background-color: transparent; } > button { - @extend %button-flat-simple; - @extend %small-button; - - // margin: $space-size; - border: $space-size solid transparent; - - // Remove unwanted focus indicator - &:focus:not(:hover):not(:active):not(:disabled) { - box-shadow: inset 0 0 0 9999px transparent; - color: $text-secondary; - } - - &.up:dir(ltr), - &.down:dir(rtl) { margin-left: -$space-size / 2; } - - &.up:dir(rtl), - &.down:dir(ltr) { margin-right: -$space-size / 2; } - } - } - - // Vertical - &.vertical { - > text { - margin: 0; - border-image: none; - border-radius: 0; - box-shadow: none; - background-color: transparent; - - min-height: $medium-size; - min-width: $large-size - $space-size; padding: 0; - } - - > button { - @extend %button-flat-simple; - @extend %small-button; - padding: 0; - border: solid $space-size transparent; - - // Remove unwanted focus indicator - &:focus:not(:hover):not(:active) { - box-shadow: inset 0 0 0 9999px transparent; - color: $text-secondary; - } - - &.up { margin: 0 $space-size / 2; } - - &.down { margin: 0 $space-size / 2; } - } - } - - // Misc - // treeview &:not(.vertical), - list > row &:not(.vertical) { - > button { margin: $space-size; &.up:dir(ltr), @@ -1144,6 +1104,41 @@ spinbutton { &.down:dir(ltr) { margin-right: $space-size / 2; } } } + + cell.activatable &:not(.vertical) { + margin: $space-size / 2 0; + + > button { + margin: 0; + padding: 0; + min-height: $small-size; + border-radius: 0; + + &:last-child { + border-radius: 0 $corner-radius $corner-radius 0; + } + + &.up:dir(ltr), + &.down:dir(rtl) { margin-left: 0; } + + &.up:dir(rtl), + &.down:dir(ltr) { margin-right: 0; } + } + } + + // Vertical + &.vertical { + > text { + min-height: $medium-size; + min-width: $large-size - $space-size; + padding: 0; + } + + > button { + padding: 0; + margin: $space-size ($large-size - $space-size - $small-size) / 2; + } + } } @@ -2124,7 +2119,7 @@ notebook { > header { border: none; background-color: $fill; - padding: $space-size / 2; + // padding: $space-size / 2; margin: $space-size / 2; border-radius: $modal-radius + $space-size / 2; // background-clip: border-box; @@ -2194,6 +2189,7 @@ notebook { > tab { @extend %tabs_tab; + margin: $space-size / 2; // FIXME: The tab node doesn't have :drop(active), instead its child box has it. > box { @@ -2213,11 +2209,11 @@ notebook { &:last-child { margin-left: $space-size; - margin-right: $space-size - 12px; + margin-right: -$space-size / 2; } &:first-child { - margin-left: $space-size - 12px; + margin-left: -$space-size / 2; margin-right: $space-size; } } @@ -2241,6 +2237,12 @@ notebook { &:last-child { margin-right: 0; } } + > tab { + &:not(:last-child) { + margin-right: 0; + } + } + tab.reorderable-page { border-style: solid; } } } @@ -2257,6 +2259,12 @@ notebook { &:last-child { margin-bottom: 0; } } + > tab { + &:not(:last-child) { + margin-bottom: 0; + } + } + tab.reorderable-page { border-style: solid; } } } @@ -2265,7 +2273,7 @@ notebook { padding: $space-size / 2; min-width: $small-size; min-height: $small-size; - margin-left: $space-size / 2; + margin: 0 $space-size / 2; } } @@ -2500,6 +2508,10 @@ dnd { min-width: $small-size; min-height: $small-size; border-radius: $circular-radius; + + &.tab-close-button { + margin-right: -$space-size / 2; + } } } } @@ -2823,6 +2835,8 @@ radio { } %small_check, +// treeview.view check, +// columnview.view check, popover.menu check { min-height: 16px; min-width: 16px; @@ -2833,6 +2847,8 @@ popover.menu check { } %small_radio, +// treeview.view radio, +// columnview.view radio, popover.menu radio { min-height: 16px; min-width: 16px; @@ -3296,14 +3312,14 @@ scrolledwindow { // &.right { @include undershoot(right); } // } - @at-root junction { // the small square between two scrollbars - border-style: solid none none solid; - border-width: 1px; - border-color: $divider; - background-color: $base; + // @at-root junction { // the small square between two scrollbars + // border-style: solid none none solid; + // border-width: 1px; + // border-color: $divider; + // background-color: $base; - &:dir(rtl) { border-style: solid solid none none; } - } + // &:dir(rtl) { border-style: solid solid none none; } + // } } // vbox and hbox separators @@ -3570,6 +3586,8 @@ columnview { padding: $space-size * 1.5 $space-size * 2; min-height: 32px; /* should be tall even when only containing a label */ + &:last-child { border-bottom: none; } + & > box { border-spacing: $space-size * 2; } @@ -4202,10 +4220,9 @@ tooltip { // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: $tooltip; color: on($tooltip); - box-shadow: $shadow-z4; - border-radius: $corner-radius / 2; + box-shadow: $shadow-z3; + border-radius: $corner-radius; margin: 2px 6px 8px 6px; - border: none; } padding: $space-size $space-size * 2; diff --git a/src/sass/gtk/_drawing-4.0.scss b/src/sass/gtk/_drawing-4.0.scss index 9f9b2515..62c7b3fb 100644 --- a/src/sass/gtk/_drawing-4.0.scss +++ b/src/sass/gtk/_drawing-4.0.scss @@ -149,6 +149,7 @@ @if $t == flat-disabled { color: $text-secondary-disabled; + background-color: transparent; } @if $t == flat-checked { diff --git a/src/sass/gtk/apps/_nemo.scss b/src/sass/gtk/apps/_nemo.scss index 44423e96..007e3e02 100644 --- a/src/sass/gtk/apps/_nemo.scss +++ b/src/sass/gtk/apps/_nemo.scss @@ -11,6 +11,7 @@ .primary-toolbar { background-color: $titlebar; border-bottom: 1px solid $divider; + padding: 2px 3px; // FIXME: workaround for wrong size allocation of Nemo entry { @@ -19,6 +20,7 @@ @extend %titlebar-entry; } + > toolitem > box > button.image-button, > toolitem > .linked > button.image-button { margin-left: 1px; margin-right: 1px; @@ -88,7 +90,19 @@ &:selected { @extend %selected_items_primary; } } - .toolbar button { @extend %button-flat; } + .toolbar { + padding: 0; + + button { + @extend %button-flat; + margin: $space-size / 2 0; + padding: $space-size / 2; + } + + separator { + margin: $space-size 0; + } + } .view { selection,