diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 75447158..8c9dfac8 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -49,7 +49,7 @@ $ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1); // $transition: all $duration $ease-out; -$transition-shadow: box-shadow $duration $ease-out; +$transition-shadow: box-shadow 200ms ease-out; // // Shadows @@ -68,9 +68,9 @@ $shadow-z3: 0 2px 3px -1px rgba(black, 0.06), 0 1px 4px 0 rgba(black, 0.05); $shadow-z4: - 0 2px 3px -1px rgba(black, 0.15), - 0 4px 3px 0 rgba(black, 0.18), - 0 1px 6px 0 rgba(black, 0.12); + 0 1px 2px 0 rgba(black, 0.15), + 0 3px 3px 0 rgba(black, 0.18), + 0 3px 6px 0 rgba(black, 0.12); $shadow-z5: 0 2px 3px -1px rgba(black, 0.05), 0 4px 6px 0 rgba(black, 0.06), @@ -84,6 +84,6 @@ $shadow-z12: 0 12px 10px 2px rgba(black, 0.14), 0 5px 13px 4px rgba(black, 0.12); $shadow-z16: - 0 8px 6px -5px rgba(black, 0.2), - 0 16px 15px 2px rgba(black, 0.14), + 0 1px 3px 0 rgba(black, 0.2), + 0 15px 16px 2px rgba(black, 0.14), 0 6px 18px 5px rgba(black, 0.12); diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss index 1c3941cd..301c995d 100644 --- a/src/sass/gnome-shell/common/_calendar.scss +++ b/src/sass/gnome-shell/common/_calendar.scss @@ -131,6 +131,7 @@ &:active { background-color: $track; } } + .calendar-day, .calendar-day-base { @include fontsize($font_size - 1); text-align: center; @@ -143,12 +144,17 @@ border: none; font-feature-settings: "tnum"; - &:hover, &:focus { background-color: $divider; } + &:hover, &:focus { + background-color: $divider; + box-shadow: none; + } &:active, &:selected { color: $text; background-color: $track; - border-color: transparent; //avoid jumparound due to today + border: none !important; //avoid jumparound due to today + box-shadow: none !important; + outline: none !important; } &.calendar-day-heading { //day of week heading @@ -158,6 +164,12 @@ } } + &.calendar-weekday {} + + &.calendar-weekend { + color: $text-disabled; + } + .calendar-day { //border collapse hack - see calendar.js border-width: 0; } @@ -172,7 +184,7 @@ .calendar-nonwork-day { color: $text-disabled; - font-weight: bold; + font-weight: normal; } // Today @@ -206,6 +218,7 @@ .calendar-day-with-events { color: $text-secondary; background-image: url("assets/calendar-today.svg"); + background-size: contain; &.calendar-work-day { color: $text-secondary; @@ -213,9 +226,10 @@ } } + .calendar-other-month, .calendar-other-month-day { - color: $text-secondary-disabled; - opacity: 0.5; + color: $text-secondary-disabled !important; + font-weight: normal; } .calendar-week-number { diff --git a/src/sass/gnome-shell/common/_panel.scss b/src/sass/gnome-shell/common/_panel.scss index 2f4b4b3f..7da15cfd 100644 --- a/src/sass/gnome-shell/common/_panel.scss +++ b/src/sass/gnome-shell/common/_panel.scss @@ -158,6 +158,17 @@ &#panelActivities { -natural-hpadding: $base_padding * 3; + + StBoxLayout { + spacing: $base_padding; + } + + .workspace-dot { + border-radius: $circular_radius; + min-width: 8px; + min-height: 8px; + background-color: on($panel-solid); + } } } @@ -203,6 +214,12 @@ } } } + + &#panelActivities { + .workspace-dot { + background-color: on(dark); + } + } } .panel-corner { diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index cef1ab09..84fbe725 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -3442,20 +3442,27 @@ scrolledwindow { } // Overflow indication, works similarly to the overshoot, the size if fixed tho. - // @at-root undershoot { - // &.top { @include undershoot(top); } - // - // &.bottom { @include undershoot(bottom); } - // - // &.left { @include undershoot(left); } - // - // &.right { @include undershoot(right); } - // } + &.undershoot-top { + @include undershoot(top); + } - @at-root junction { // the small square between two scrollbars + &.undershoot-bottom { + @include undershoot(bottom); + } + + &.undershoot-start { + &:dir(ltr) { @include undershoot(left); } + &:dir(rtl) { @include undershoot(right); } + } + + &.undershoot-end { + &:dir(ltr) { @include undershoot(right); } + &:dir(rtl) { @include undershoot(left); } + } + + > junction { // the small square between two scrollbars border: none; - // background-color: $base; - background-image: none; + background-color: $base; } } @@ -4348,14 +4355,16 @@ separator.sidebar { padding: $space-size * 0.75 0; //only vertical padding. horizontal row size would clip border-right: none; - &, &.view { + &, &.view, &.view:disabled { background-color: transparent; color: inherit; } &.background { - background-color: $base-alt; - color: $text-secondary; + &, &:disabled { + background-color: $base-alt; + color: $text-secondary; + } } > separator { @@ -4775,15 +4784,11 @@ window { @if $rimless == 'true' { box-shadow: $shadow-z16, - 0 2px 3px -1px rgba(black, 0), - 0 4px 3px 0 rgba(black, 0), - 0 1px 6px 0 rgba(black, 0); + 0 0 36px transparent; } @else { box-shadow: $shadow-z16, - 0 0 0 1px $window-border, - 0 2px 3px -1px rgba(black, 0), - 0 4px 3px 0 rgba(black, 0), - 0 1px 6px 0 rgba(black, 0); + 0 0 36px transparent, + 0 0 0 1px $window-border; } &:backdrop { @@ -4795,15 +4800,11 @@ window { @if $rimless == 'true' { box-shadow: $shadow-z4, - 0 8px 6px -5px rgba(black, 0), - 0 16px 15px 2px rgba(black, 0), - 0 6px 18px 5px rgba(black, 0); + 0 0 36px transparent; } @else { box-shadow: $shadow-z4, - 0 0 0 1px $window-border, - 0 8px 6px -5px rgba(black, 0), - 0 16px 15px 2px rgba(black, 0), - 0 6px 18px 5px rgba(black, 0); + 0 0 36px transparent, + 0 0 0 1px $window-border; } } @@ -4834,6 +4835,12 @@ window { &:backdrop { background-color: $titlebar-backdrop; } } + + // server-side decorations as used by mutter + &.ssd { + // just doing borders, wm draws actual shadows + box-shadow: 0 0 0 1px $border; + } } // Windows button diff --git a/src/sass/gtk/_drawing-4.0.scss b/src/sass/gtk/_drawing-4.0.scss index 03a8d43e..23cd7979 100644 --- a/src/sass/gtk/_drawing-4.0.scss +++ b/src/sass/gtk/_drawing-4.0.scss @@ -273,45 +273,72 @@ } -@mixin undershoot($p) { +@mixin undershoot($p, $c: $frame, $neighbor: false) { // // undershoot // // $p: position +// $c: shade color +// $neighbor: use ~ instead of > // // possible $p values: // top, bottom, right, left // - $_undershoot_color_dark: $track; - $_undershoot_color_light: transparent; + $_border_pos: ''; + $_direction: ''; + $_selector: if($neighbor, '~', '>'); - $_gradient_dir: left; - $_dash_bg_size: 12px 1px; - $_gradient_repeat: repeat-x; - $_bg_pos: left $p; - - @if ($p == left) or ($p == right) { - $_gradient_dir: top; - $_dash_bg_size: 1px 12px; - $_gradient_repeat: repeat-y; - $_bg_pos: $p top; + @if $p==top { + $_direction: bottom; + $_border_pos: 0 1px; + } @else if $p==bottom { + $_direction: top; + $_border_pos: 0 -1px; + } @else if $p==left { + $_direction: right; + $_border_pos: 1px 0; + } @else if $p==right { + $_direction: left; + $_border_pos: -1px 0; + } @else { + @error "Unknown position #{$p}" } - - background-color: transparent; // shouldn't be needed, but better to be sure - - background-image: linear-gradient(to $_gradient_dir, // this is the dashed line - $_undershoot_color_light 50%, - $_undershoot_color_dark 50%); - - padding-#{$p}: 1px; - background-size: $_dash_bg_size; - background-repeat: $_gradient_repeat; - background-origin: content-box; - background-position: $_bg_pos; - margin: 0 4px; - - @if ($p == left) or ($p == right) { - margin: 4px 0; + + #{$_selector} undershoot.#{$p} { + box-shadow: none; + background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 4px); + } +} + +@mixin background-shadow($direction, $color) { + background-image: + linear-gradient($direction, + gtkalpha($color, 0.7), + gtkalpha($color, 0.14) 40px, + gtkalpha($color, 0) 56px), + linear-gradient($direction, + gtkalpha($color, 0.4), + gtkalpha($color, 0.14) 7px, + gtkalpha($color, 0) 24px); +} + +@mixin transition-shadows($color) { + > dimming { + background: none; + } + + > border { + background: none; + } + + > shadow { + min-width: 56px; + min-height: 56px; + + &.left { @include background-shadow(to right, $color); } + &.right { @include background-shadow(to left, $color); } + &.up { @include background-shadow(to bottom, $color); } + &.down { @include background-shadow(to top, $color); } } } diff --git a/src/sass/gtk/apps/_gnome-3.0.scss b/src/sass/gtk/apps/_gnome-3.0.scss index 3cf22a1e..50c50799 100644 --- a/src/sass/gtk/apps/_gnome-3.0.scss +++ b/src/sass/gtk/apps/_gnome-3.0.scss @@ -466,6 +466,11 @@ frame.gedit-map-frame > border { } } +leaflet list.navigation-sidebar { + background-color: $base-alt; + border-bottom-left-radius: $window-radius; +} + .tweak { // padding-top: 3px; padding: 3px; @@ -480,23 +485,13 @@ frame.gedit-map-frame > border { background-image: image($base); } -.tweak-startup, -.tweak-startup:hover { - // background-color: lighter(shade(@theme_bg_color, 0.9)); - background-image: image($base); -} - .tweak-group-startup { - // background-color: @view_separators; - background-image: image($base); - // border: 1px solid $frame; - + padding: 0; @extend %circular_list; - row { @extend %circular_row; } + > row { @extend %circular_row; } - row.tweak-startup { - border-radius: $corner-radius; + > row.tweak-startup { background-color: transparent; background-image: none; } @@ -504,8 +499,9 @@ frame.gedit-map-frame > border { // Workaround for 3.26 list { - &.tweak-group { + &.tweak-group, &#ListBoxTweakGroup { list { + padding: 0; @extend %circular_list; row { @extend %circular_row; } @@ -677,7 +673,7 @@ hdyleaflet, leaflet, box.horizontal > stack.background { } > box.vertical > scrolledwindow > viewport.frame { - list:not(.view):not(.tweak-group) { + list:not(.view):not(.tweak-group):not(.tweak-group-startup) { padding: $space-size / 2; row.activatable { diff --git a/src/sass/gtk/apps/_gnome-4.0.scss b/src/sass/gtk/apps/_gnome-4.0.scss index e86d55b8..09698c46 100644 --- a/src/sass/gtk/apps/_gnome-4.0.scss +++ b/src/sass/gtk/apps/_gnome-4.0.scss @@ -270,20 +270,6 @@ popover.event-popover > contents { } } -// Edit dialog's header button -.sources-button { - margin-top: 0; - margin-bottom: 0; - border-radius: 0; - border-top-style: none; - border-bottom-style: none; - - &:hover:not(:backdrop) { - background-image: none; - text-shadow: none; - } -} - // defeats the ugly hover effect of the calendar color dot on buttons .calendar-color-image { -gtk-icon-filter: none; @@ -312,7 +298,7 @@ datechooser { navigator { label { font-weight: bold; } - button, button.image-button { + button.toggle, button.image-button { min-height: $medium-size; min-width: $medium-size; padding: 0; @@ -505,13 +491,19 @@ monthpopover > box { } // Agenda View CSS -agenda-view list { - > row { - padding: 2px $space-size * 2; +agenda-view { + list { + > row { + padding: 2px $space-size * 2; + } + + > label { + padding: $space-size $space-size * 2; + } } - > label { - padding: $space-size $space-size * 2; + > scrolledwindow > viewport > list.background { + background-color: transparent; } } @@ -536,8 +528,48 @@ datechooser { } } -menubutton stack > box { - border-spacing: $space-size; +menubutton { + &.sources-button { + margin-top: 0; + margin-bottom: 0; + border-radius: 0; + border-top-style: none; + border-bottom-style: none; + + &:hover:not(:backdrop) { + background-image: none; + text-shadow: none; + } + + > button { + border-radius: 0; + + .title { + font-size: 10pt; + font-weight: normal; + padding: 0 $space-size; + } + + .subtitle { + font-size: 8pt; + padding: 0 $space-size; + } + + .calendar-color-image { + -gtk-icon-size: 12px; + } + } + } + + stack > box { + border-spacing: $space-size; + } + + .topbar headerbar &.sources-button { + > button { + border-radius: 0 0 $corner-radius $corner-radius; + } + } } // @@ -604,7 +636,7 @@ screenshot-carousel button, padding: $space-size / 2 $space-size * 1.5; } -flowboxchild { +.card flowboxchild { &.card { border: none; box-shadow: none; diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss index 617a82d9..1ca0d858 100644 --- a/src/sass/gtk/apps/_libadwaita.scss +++ b/src/sass/gtk/apps/_libadwaita.scss @@ -99,9 +99,15 @@ toast { viewswitcher { margin: 0; + border-spacing: $space-size / 2; &.wide { - border-spacing: $space-size / 2; + margin-top: $space-size; + margin-bottom: $space-size; + + button.toggle { + margin: 0; + } } &.narrow button.toggle { @@ -142,9 +148,47 @@ viewswitcherbar actionbar > revealer > box { } // AdwViewSwitcherTitle -viewswitchertitle viewswitcher { - margin-left: $space-size * 2; - margin-right: $space-size * 2; +viewswitchertitle { + margin-top: 0; + margin-bottom: 0; + + viewswitcher { + margin-left: $space-size * 2; + margin-right: $space-size * 2; + + &.narrow { + margin-top: 0; + margin-bottom: 0; + + button.toggle { + > stack > box { + &.narrow { + padding-top: 0; + padding-bottom: 0; + border-spacing: 0; + } + } + } + } + + &.wide { + margin-top: $space-size; + margin-bottom: $space-size; + } + } + + windowtitle { + margin-top: 0; + margin-bottom: 0; + } + + .top-bar headerbar & viewswitcher { + &.narrow { + button.toggle { + border-radius: 0 0 $corner-radius $corner-radius; + } + } + } } // AdwIndicatorBin @@ -316,3 +360,207 @@ statuspage { } } } + +// Transition shadows +flap, +leaflet, +navigation-view, +overlay-split-view { + @include transition-shadows($frame); +} + +// Sidebar +.unfolded stacksidebar.sidebar { border: none; } + +.sidebar-pane { + background-color: $base-alt; + color: $text; + + &:backdrop { + background-color: $background; + transition: background-color $duration $ease-out; + } + + .navigation-sidebar, + headerbar, + searchbar > revealer > box { + background-color: transparent; + box-shadow: none; + border: none; + } + + toolbarview.undershoot-top scrolledwindow { + @include undershoot(top); + } + + toolbarview.undershoot-bottom scrolledwindow { + @include undershoot(bottom); + } + + scrolledwindow { + &.undershoot-top { + @include undershoot(top); + } + + &.undershoot-bottom { + @include undershoot(bottom) + } + + &.undershoot-start { + &:dir(ltr) { @include undershoot(left); } + &:dir(rtl) { @include undershoot(right); } + } + + &.undershoot-end { + &:dir(ltr) { @include undershoot(right); } + &:dir(rtl) { @include undershoot(left); } + } + } + + flap, + leaflet, + navigation-view, + overlay-split-view { + @include transition-shadows($frame); + } + + banner > revealer > widget { + background-color: gtkmix($primary, $base-alt, 30%); + color: $text; + + &:backdrop { + background-color: gtkmix($primary, $base-alt, 30%); + } + } + + &:dir(ltr), &.end:dir(rtl) { + border-top-left-radius: $window-radius; + + &, banner > revealer > widget { + box-shadow: none; + border-right: 1px solid $border; + } + } + + &:dir(rtl), &.end:dir(ltr) { + border-top-right-radius: $window-radius; + + &, banner > revealer > widget { + box-shadow: none; + border-left: 1px solid $border; + } + } + + window.maxmized &:dir(ltr), + window.maxmized &.end:dir(rtl) { + border-top-left-radius: 0; + } + + window.maxmized &:dir(rtl), + window.maxmized &.end:dir(rtl) { + border-top-right-radius: 0; + } +} + +/* Middle pane in three-pane setups */ +.content-pane .sidebar-pane, +.sidebar-pane .content-pane { + background-color: $base; + color: $text; + + &:backdrop { + background-color: $background; + transition: background-color $duration $ease-out; + } + + toolbarview.undershoot-top scrolledwindow { + @include undershoot(top); + } + + toolbarview.undershoot-bottom scrolledwindow { + @include undershoot(bottom); + } + + scrolledwindow { + &.undershoot-top { + @include undershoot(top); + } + + &.undershoot-bottom { + @include undershoot(bottom) + } + + &.undershoot-start { + &:dir(ltr) { @include undershoot(left); } + &:dir(rtl) { @include undershoot(right); } + } + + &.undershoot-end { + &:dir(ltr) { @include undershoot(right); } + &:dir(rtl) { @include undershoot(left); } + } + } + + flap, + leaflet, + navigation-view, + overlay-split-view { + @include transition-shadows($border); + } + + banner > revealer > widget { + background-color: gtkmix($primary, $base, 30%); + color: $text; + + &:backdrop { + background-color: gtkmix($primary, $base, 30%); + } + } + + &:dir(ltr), &.end:dir(rtl) { + border-top-left-radius: $window-radius; + + &, banner > revealer > widget { + box-shadow: none; + border-right: 1px solid $border; + } + } + + &:dir(rtl), &.end:dir(ltr) { + border-top-right-radius: $window-radius; + + &, banner > revealer > widget { + box-shadow: none; + border-left: 1px solid $border; + } + } + + window.maxmized &:dir(ltr), + window.maxmized &.end:dir(rtl) { + border-top-left-radius: 0; + } + + window.maxmized &:dir(rtl), + window.maxmized &.end:dir(rtl) { + border-top-right-radius: 0; + } +} + +.sidebar-pane .sidebar-pane { + background-color: transparent; + color: inherit; +} + +// Gnome >= 45.0 +.top-bar { + headerbar { + &, &:backdrop { + background-color: transparent; + box-shadow: none; + } + } + + .collapse-spacing { + padding: 0; + } +}