diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss index 90caaa48..69068f8a 100644 --- a/src/sass/_colors.scss +++ b/src/sass/_colors.scss @@ -126,7 +126,7 @@ $dark_sidebar_bg: white; } $dark_sidebar_fg: $text_color; -$dark_sidebar_border: if($variant == 'light', darken(opacify($dark_sidebar_bg, 1), 5%), lighten(opacify($dark_sidebar_bg, 1), 5%)); +$dark_sidebar_border: if($variant == 'light', $solid_borders_color, $header_border); $sidebar_theme_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12)); //OSD colors diff --git a/src/sass/gtk/_applications-3.0.scss b/src/sass/gtk/_applications-3.0.scss index 348c9781..702b09ce 100644 --- a/src/sass/gtk/_applications-3.0.scss +++ b/src/sass/gtk/_applications-3.0.scss @@ -149,6 +149,7 @@ $nautilus_sidebar_image: image($dark_sidebar_bg); list { background-color: $s_bg_color; border-bottom-left-radius: $wm_radius; + margin-top: $wm_radius; } row.sidebar-row { @@ -298,17 +299,9 @@ dialog.background.csd { > headerbar { &.titlebar { - // border-image: image($header_border) 0 0 1 / 0px 0px 1px stretch; - > label:not(.title):not(.subtitle) { // wallpaper set dialog font-weight: 700; } - - // &:not(.default-decoration) { - // border-image: $dialog_header_borders_image 0 0 1 / 0px 0px 1px stretch; - // background-image: $dialog_header_image; - // background-color: transparent; - // } } } @@ -341,7 +334,6 @@ dialog.background.csd { background-color: $base_color; iconview.view:not(:hover):not(:selected):not(:active) { // Wallpaper setting window - // @extend %view; background-color: transparent; } } @@ -428,38 +420,6 @@ dialog.background.csd { margin: 0 6px 6px; } } - - // Filechooser, we put this here to give a different style between csd and - // ssd on certain DE-s - filechooser { - > actionbar { - background-color: transparent; - background-image: $nautilus_actionbar_image; - border-image: $nautilus_actionbar_borders_image 1 0 0 / 1px 0px 0px stretch; - color: $dark_sidebar_fg; - border-radius: 0 0 $wm_radius $wm_radius; - - label, combobox { color: $dark_sidebar_fg; } - } - - treeview.view { - @include viewwy(transparent); - } - - paned { - stack { - &:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 } - &:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) } - } - } - - @include color_sidebar($s_bg_color: $bg_color, $sidebar_style: normal); - } - - filechooserbutton:drop(active) { - box-shadow: none; - border-color: transparent; - } } // @@ -488,11 +448,6 @@ dialog.background.csd { @if $nautilus_style == 'default' or $nautilus_style == 'stable' { > .linked.raised > button:first-child { margin-left: $nautilus_sidebar_size - 80px; } } - - // @else { - // > .linked.raised > button:first-child { margin-left: 0px } - // > .linked.raised > button:last-child { margin-right: 0px } - // } } placessidebar.sidebar { @@ -563,7 +518,7 @@ dialog.background.csd { margin: 6px 10px 10px 6px; border-radius: $wm_radius; box-shadow: $shadow_5; - padding: 0 6px; + // padding: 0 6px; } } @@ -3186,30 +3141,6 @@ window#GearyMainWindow.background.csd { } } - stack#conversation_viewer { - background-color: $base_color; - border-bottom-right-radius: $wm_radius + 1px; - - scrolledwindow.geary-conversation-scroller { - viewport.frame { - background-color: $base_color; - border-bottom-right-radius: $wm_radius; - - list.conversation-listbox { - background-color: transparent; - } - } - } - - searchbar { - background-color: $base_color; - - > revealer > box { - border-color: if($variant == 'light', $solid_borders_color, $header_border); - } - } - } - paned.geary-sidebar-pane-separator { > separator { margin-left: -1px; @@ -3225,16 +3156,6 @@ window#GearyMainWindow.background.csd { frame > border { border: none; } } - frame.geary-folder-frame { - > border { border: none; } - - scrolledwindow { - treeview.view.sidebar:not(:hover):not(:selected) { - background-color: rgba($dark_sidebar_bg, 1); - } - } - } - frame.geary-conversation-frame { background-color: rgba($dark_sidebar_bg, 1); @@ -3266,10 +3187,6 @@ window#GearyMainWindow.background.csd { } } - leaflet > leaflet > sidebar.separator { - @extend %side_separator; - } - &.maximized, &.tiled, &.fullscreen { > overlay > box.vertical { > paned { @@ -3297,6 +3214,121 @@ window#GearyMainWindow.background.csd { } } +.geary-main-window { // 40.0 + > headerbar { + border-bottom: none; + + > leaflet > leaflet > headerbar { + border-bottom: none; + + &, &:backdrop { + border-radius: 0 0 0 0; + } + + &:only-child { + border-radius: $wm_radius $wm_radius 0 0; + } + + &:not(:first-child) { + background-color: $base_color; + box-shadow: inset 0 1px $header_highlight; + } + + &:first-child { + @extend %side_headerbar_left; + border-radius: $wm_radius 0 0 0; + } + } + } + + leaflet > leaflet > box.vertical { + searchbar { + background-color: $base_color; + + > revealer > box { + border-color: if($variant == 'light', $solid_borders_color, $header_border); + } + } + } + + frame.geary-folder-frame { + > border { border: none; } + + scrolledwindow { + treeview.view.sidebar { + background-color: rgba($dark_sidebar_bg, 1); + + &:hover { + color: $fg_color; + background-color: rgba($fg_color, 0.1); + } + + &:selected { + color: $fg_color; + background-color: rgba($fg_color, 0.15); + + &:hover { + background-color: rgba($fg_color, 0.12); + } + } + } + } + } + + frame.geary-conversation-frame { + background-color: rgba($dark_sidebar_bg, 1); + + > border { border: none; } + + scrolledwindow { + background-color: $base_color; + + treeview.view { + border: none; + background-image: none; + + &:hover { background-color: rgba($fg_color, 0.1); } + + &:selected { + background-color: rgba($fg_color, 0.15); + color: if($variant == 'light', $fg_color, $selected_fg_color); + } + + &:not(:hover):not(:selected) { + background: none; + } + } + } + } + + separator.geary-sidebar-pane-separator { background-color: $dark_sidebar_border; } + + geary-conversation-viewer#conversation_viewer, // 40.0 + stack#conversation_viewer { // 3.28 + background-color: $base_color; + border-bottom-right-radius: $wm_radius + 1px; + + scrolledwindow.geary-conversation-scroller { + viewport.frame { + background-color: $base_color; + border-bottom-right-radius: $wm_radius; + + list.conversation-listbox { + background-color: transparent; + } + } + } + + searchbar { + background-color: $base_color; + + > revealer > box { + border-color: if($variant == 'light', $solid_borders_color, $header_border); + } + } + } +} + // // Firefox and Thunderbird // diff --git a/src/sass/gtk/_applications-4.0.scss b/src/sass/gtk/_applications-4.0.scss index ef325a2b..3fe5779e 100644 --- a/src/sass/gtk/_applications-4.0.scss +++ b/src/sass/gtk/_applications-4.0.scss @@ -376,38 +376,6 @@ dialog.background.csd { margin: 0 6px 6px; } } - - // Filechooser, we put this here to give a different style between csd and - // ssd on certain DE-s - filechooser { - > actionbar { - background-color: transparent; - background-image: $nautilus_actionbar_image; - border-image: $nautilus_actionbar_borders_image 1 0 0 / 1px 0px 0px stretch; - color: $dark_sidebar_fg; - border-radius: 0 0 $wm_radius $wm_radius; - - label, combobox { color: $dark_sidebar_fg; } - } - - treeview.view { - @include viewwy(transparent); - } - - paned { - stack { - &:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 } - &:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) } - } - } - - @include color_sidebar($s_bg_color: $bg_color, $sidebar_style: normal); - } - - filechooserbutton:drop(active) { - box-shadow: none; - border-color: transparent; - } } // @@ -443,7 +411,7 @@ dialog.background.csd { @if $nautilus_style == 'stable' { background-image: if($trans == 'true', none, $nautilus_sidebar_image); - + > list { margin-bottom: $wm_radius; } } @@ -2218,37 +2186,97 @@ window.background.csd { // // Geary // -.geary-main-window.background.csd, -window#GearyMainWindow.background.csd { - > overlay > box.vertical { - > paned { - > separator { @extend %side_separator; } +.geary-main-window { // 40.0 + > headerbar { + border-bottom: none; - > .sidebar { - border-bottom-left-radius: $wm_radius; + > leaflet > leaflet > headerbar { + border-bottom: none; - > searchbar { - @extend %side_searchbar; + &, &:backdrop { + border-radius: 0 0 0 0; + } + + &:only-child { + border-radius: $wm_radius $wm_radius 0 0; + } + + &:not(:first-child) { + background-color: $base_color; + box-shadow: inset 0 1px $header_highlight; + } + + &:first-child { + @extend %side_headerbar_left; + border-radius: $wm_radius 0 0 0; + } + } + } + + leaflet > leaflet > box.vertical { + searchbar { + background-color: $base_color; + + > revealer > box { + border-color: if($variant == 'light', $solid_borders_color, $header_border); + } + } + } + + frame.geary-folder-frame { + > border { border: none; } + + scrolledwindow { + treeview.view.sidebar { + background-color: rgba($dark_sidebar_bg, 1); + + &:hover { + color: $fg_color; + background-color: rgba($fg_color, 0.1); } - treeview.view.sidebar { - padding: 3px 0; + &:selected { + color: $fg_color; + background-color: rgba($fg_color, 0.15); &:hover { - color: $fg_color; - background-color: rgba($fg_color, 0.1); - } - - &:selected { - color: $fg_color; - background-color: rgba($fg_color, 0.15); + background-color: rgba($fg_color, 0.12); } } } } } - stack#conversation_viewer { + frame.geary-conversation-frame { + background-color: rgba($dark_sidebar_bg, 1); + + > border { border: none; } + + scrolledwindow { + background-color: $base_color; + + treeview.view { + border: none; + background-image: none; + + &:hover { background-color: rgba($fg_color, 0.1); } + + &:selected { + background-color: rgba($fg_color, 0.15); + color: if($variant == 'light', $fg_color, $selected_fg_color); + } + + &:not(:hover):not(:selected) { + background: none; + } + } + } + } + + separator.geary-sidebar-pane-separator { background-color: $dark_sidebar_border; } + + geary-conversation-viewer#conversation_viewer, // 40.0 + stack#conversation_viewer { // 3.28 background-color: $base_color; border-bottom-right-radius: $wm_radius + 1px; @@ -2271,90 +2299,4 @@ window#GearyMainWindow.background.csd { } } } - - paned.geary-sidebar-pane-separator { - > separator { - margin-left: -1px; - background: none; - } - - statusbar { - margin: -8px -12px; - border: none; - background-color: rgba($dark_sidebar_bg, 1); - border-bottom-left-radius: $wm_radius; - - frame > border { border: none; } - } - - frame.geary-folder-frame { - > border { border: none; } - - scrolledwindow { - treeview.view.sidebar:not(:hover):not(:selected) { - background-color: rgba($dark_sidebar_bg, 1); - } - } - } - - frame.geary-conversation-frame { - background-color: rgba($dark_sidebar_bg, 1); - - > border { border: none; } - - scrolledwindow { - background-color: $base_color; - margin: 6px 6px 6px 0; - padding: 6px 0; - border: 1px solid $borders_color; - border-radius: $bt_radius; - - treeview.view { - border: none; - background-image: none; - - &:hover { background-color: rgba($fg_color, 0.1); } - - &:selected { - background-color: rgba($fg_color, 0.15); - color: if($variant == 'light', $fg_color, $selected_fg_color); - } - - &:not(:hover):not(:selected) { - background: none; - } - } - } - } - } - - leaflet > leaflet > sidebar.separator { - @extend %side_separator; - } - - &.maximized, &.tiled, &.fullscreen { - > overlay > box.vertical { - > paned { - > .sidebar { - border-bottom-left-radius: $maximized_radius; - } - } - } - - stack#conversation_viewer { - border-bottom-right-radius: $maximized_radius + 1px; - - scrolledwindow.geary-conversation-scroller { - viewport.frame { - border-bottom-right-radius: $maximized_radius; - } - } - } - - paned.geary-sidebar-pane-separator { - statusbar { - border-bottom-left-radius: $maximized_radius; - } - } - } } diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index dbd7071a..db0c8b0a 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -3436,6 +3436,31 @@ filechooser { background-color: $base_color; border-radius: 0 0 $wm_radius $wm_radius; + placessidebar { + background-color: transparent; + + list { + background-color: $dark_sidebar_bg; + border-bottom-left-radius: $wm_radius; + } + } + + > actionbar { + border-top: 1px solid $header_border; + background-color: $dark_sidebar_bg; + color: $dark_sidebar_fg; + border-radius: 0 0 $wm_radius $wm_radius; + + label, combobox { color: $dark_sidebar_fg; } + } + + paned { + stack { + &:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 } + &:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) } + } + } + stack.view { background-color: transparent; @@ -3453,7 +3478,8 @@ filechooser { } } - > box.vertical > paned.horizontal > separator { + > box.vertical > paned.horizontal > separator, + > box.vertical > box.vertical > paned.horizontal > separator { border: none; min-width: 1px; background-image: image(if($variant=='light', $solid_borders_color, $header_border)); @@ -3469,12 +3495,12 @@ filechooser { // Sidebar // %sidebar_left { - border-right: 1px solid $borders_color; + border-right: 1px solid $dark_sidebar_border; border-left-style: none; } %sidebar_right { - border-left: 1px solid $borders_color; + border-left: 1px solid $dark_sidebar_border; border-right-style: none; } @@ -3482,18 +3508,12 @@ filechooser { border-style: none; background-color: $bg_color; - // &:dir(ltr), - // &.left, - // &.left:dir(rtl) { - // border-right: 1px solid $borders_color; - // border-left-style: none; - // } - // - // &:dir(rtl), - // &.right { - // border-left: 1px solid $borders_color; - // border-right-style: none; - // } + &:dir(ltr), + &.left, + &.left:dir(rtl) { @extend %sidebar_left; } + + &:dir(rtl), + &.right { @extend %sidebar_right; } list { background-color: transparent; @@ -3508,6 +3528,8 @@ filechooser { paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border: none; }} } +separator.sidebar { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border: none; }} + stacksidebar { &.sidebar { &:dir(ltr) list, @@ -3539,6 +3561,8 @@ placessidebar { // Needs overriding of the GtkListBoxRow padding min-height: 24px; padding: 2px 10px; + border-radius: $bt_radius; + margin: 0 6px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump > revealer { diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index fb01f000..33881821 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -625,9 +625,6 @@ button { &:not(:disabled) label:disabled { color: inherit; opacity: 0.6; } } - &:active { color: $fg_color; } - &:active:hover, &:checked { color: $selected_fg_color; } - &:disabled { @include button(insensitive); background-clip: if($variant=='light', border-box, padding-box); @@ -1541,7 +1538,7 @@ headerbar { @include button(header-hover); } - &:active, &:active:hover { + &:active { @include button(header-active); } @@ -1870,16 +1867,12 @@ headerbar { transition: $button_transition; } - &:active, &:active:hover { + &:active { @include button(header-active); transition: $button_transition; transition-duration: 300ms; } - &:not(.suggested-action):not(.destructive-action) { - &:active:hover, &:checked { color: $header_fg; } - } - &:checked { @include button(header-checked); transition: $button_transition; @@ -1942,13 +1935,10 @@ headerbar { // // Tree Views // -@mixin viewwy($c) { - background-color: $c; - border-radius: 0; - margin: 0 0; - - border-left-color: rgba($fg_color, 0.15); // this is actually the tree lines color, - border-top-color: $borders_color; // while this is the grid lines color, better then nothing +columnview.view, +treeview.view { + border-left-color: $solid_borders_color; // this is actually the tree lines color, + border-top-color: $solid_borders_color; // while this is the grid lines color, better then nothing > rubberband { @extend %rubberband; } // to avoid borders being overridden by the previously set props @@ -1997,6 +1987,8 @@ headerbar { } &.expander { + 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'); } @@ -2013,7 +2005,7 @@ headerbar { &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } - &.progressbar, &.progressbar:focus { // progress bar in treeviews + &.progressbar { // progress bar in treeviews color: $selected_fg_color; border-radius: $bt_radius; background-color: $progress_color; @@ -2064,7 +2056,6 @@ headerbar { &:active { color: $fg_color; } &:active, &:hover { background-color: $base_color; } - &:active:hover { color: $fg_color; } &:disabled { border-color: $bg_color; @@ -2091,11 +2082,6 @@ headerbar { } } -columnview.view, -treeview.view { - @include viewwy($base_color); -} - // // Menus // @@ -2529,7 +2515,7 @@ notebook { background-color: rgba($borders_color, 0.1); } - &:active, &:active:hover { + &:active { @extend %undecorated_button; color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%)); background-color: rgba($borders_color, 0.2); @@ -3437,19 +3423,23 @@ columnview row:not(:selected) cell editablelabel.editing text selection { // App Notifications // .app-notification { - padding: 16px; - margin: 0 8px 8px 8px; + padding: 8px; + margin: 6px 16px 16px 16px; color: $fg_color; background-color: rgba($header_bg, 0.85); // background-image: linear-gradient(0deg, $bg_color 0%, $bg_color 85%, darken($bg_color, 5%) 95%, darken($bg_color, 15%) 100%); - border-radius: 0 0 $bt_radius $bt_radius; + border-radius: $wm_radius; border: none; - box-shadow: $shadow_5, 0 0 0 1px if($variant=='light', rgba(black, 0.12), rgba(black, 0.75)); + box-shadow: 0 5px 15px 0 rgba(black, 0.25), + inset 0 0 0 1px rgba(white, 0.06), + 0 0 0 1px if($variant=='light', rgba(black, 0.12), rgba(black, 0.75)); border { border: none; } button { @extend %undecorated_button; + min-height: 22px; + padding: 2px 8px; &:not(.text-button).image-button { @extend %circular_button; @@ -3638,6 +3628,22 @@ filechooser { background-color: $base_color; border-radius: 0 0 $wm_radius $wm_radius; + > actionbar { + border-top: 1px solid $header_border; + background-color: $dark_sidebar_bg; + color: $dark_sidebar_fg; + border-radius: 0 0 $wm_radius $wm_radius; + + label, combobox { color: $dark_sidebar_fg; } + } + + paned { + stack { + &:dir(ltr) { border-radius: 0 0 (($wm_radius/1.5) + 2) 0 } + &:dir(rtl) { border-radius: 0 0 0 (($wm_radius/1.5) + 2) } + } + } + stack.view { background-color: transparent; @@ -3655,7 +3661,8 @@ filechooser { } } - > box.vertical > paned.horizontal > separator { + > box.vertical > paned.horizontal > separator, + > box.vertical > box.vertical > paned.horizontal > separator { border: none; min-width: 1px; background-image: image(if($variant=='light', $solid_borders_color, $header_border)); @@ -3667,6 +3674,9 @@ filechooser { #pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); } } +// Filechooser, we put this here to give a different style between csd and +// ssd on certain DE-s + filechooserbutton > button > box { border-spacing: 6px; } @@ -3680,12 +3690,12 @@ filechooserbutton:drop(active) { // Sidebar // %sidebar_left { - border-right: 1px solid $borders_color; + border-right: 1px solid $dark_sidebar_border; border-left-style: none; } %sidebar_right { - border-left: 1px solid $borders_color; + border-left: 1px solid $dark_sidebar_border; border-right-style: none; } @@ -3693,6 +3703,13 @@ filechooserbutton:drop(active) { border-style: none; background-color: $bg_color; + &:dir(ltr), + &.left, + &.left:dir(rtl) { @extend %sidebar_left; } + + &:dir(rtl), + &.right { @extend %sidebar_right; } + list { background-color: transparent; @@ -3884,7 +3901,7 @@ paned { -gtk-icon-source: none; border-style: none; background-color: transparent; - background-image: _solid($borders_color); + background-image: _solid($solid_borders_color); background-size: 1px 1px; &:selected { background-image: _solid($selected_bg_color); } @@ -4051,7 +4068,7 @@ searchbar .close { box-shadow: none; } - &:active, &:active:hover, &:checked { + &:active, &:checked { color: $selected_fg_color; background-color: transparentize($selected_fg_color, 0.6); border-color: transparentize($selected_fg_color, 0.5); @@ -4089,6 +4106,7 @@ tooltip { background-color: lighten($osd_bg_color, 10%); background-clip: padding-box; border-radius: $bt_radius; + color: $osd_fg_color; label { padding: 4px; } }