diff --git a/gtk-3.20/scss/apps/_nemo.scss b/gtk-3.20/scss/apps/_nemo.scss index d291be3..b7d2d0b 100644 --- a/gtk-3.20/scss/apps/_nemo.scss +++ b/gtk-3.20/scss/apps/_nemo.scss @@ -28,18 +28,6 @@ .linked > button { @include linked_button($bg_color); } - combobox button { - padding: $spacing - 1px; - - &.text-button { - padding: $spacing; - } - - &.image-button { - padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; - } - } - separator, separator:disabled { color: shade($bg_color, ($contrast + .1)); border-color: currentColor; diff --git a/gtk-3.20/scss/apps/_unity.scss b/gtk-3.20/scss/apps/_unity.scss index 511fb08..8a37aa1 100644 --- a/gtk-3.20/scss/apps/_unity.scss +++ b/gtk-3.20/scss/apps/_unity.scss @@ -27,8 +27,8 @@ .top { border: 1px solid $wm_border_focused; border-bottom: 0; - border-radius: 2px 2px 0 0; - padding: 1px ($spacing * 2) 0; + border-radius: $roundness $roundness 0 0; + padding: 1px ($spacing + 3px) 0 ($spacing + 3px); background-color: $titlebar_bg_color; color: mix($titlebar_fg_color, $titlebar_bg_color, .1); text-shadow: none; @@ -40,9 +40,9 @@ } .left, .right, .bottom { - background-color: $wm_border_focused; + background-color: $titlebar_bg_color; - &:backdrop { background-color: $wm_border_unfocused; } + &:backdrop { background-color: mix(shade($titlebar_bg_color, .7), $titlebar_fg_color, .21); } } } diff --git a/gtk-3.20/scss/widgets/_toolbar.scss b/gtk-3.20/scss/widgets/_toolbar.scss index 8eaa35c..3aa62d6 100644 --- a/gtk-3.20/scss/widgets/_toolbar.scss +++ b/gtk-3.20/scss/widgets/_toolbar.scss @@ -9,7 +9,6 @@ @include linear-gradient($bg); @include border($bg); - padding: $spacing * 2; color: $fg; &:disabled { @@ -33,86 +32,94 @@ .linked > button { @include linked_button($bg); } combobox, button { - padding: $spacing - 1px; + padding: $spacing; &.text-button { padding: $spacing; } - &.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; } + &.image-button { padding: $spacing; } } - // toolbar separators - &.horizontal separator { margin: 0 ($spacing + 2px) 1px ($spacing + 2px); } + separator { + &, &:disabled { + color: shade($bg, ($contrast - .2)); + border-color: currentColor; - &.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; } - - separator, separator:disabled { - color: shade($bg, ($contrast - .2)); - border-color: currentColor; - - -GtkWidget-window-dragging: true; - } - - .menubar, menubar { -GtkToolbar-button-relief: normal; } -} - -@include exports("toolbar") { - toolbar { - @include toolbar($toolbar_bg_color, $toolbar_fg_color); - - border-style: none; - - &.inline-toolbar { - background-image: none; - border-width: 0 1px 1px; - border-style: solid; - border-color: $borders_color; - background-color: mix($borders_color, $bg_color, .7); - - &:backdrop { - border-color: $backdrop_borders_color; - background-color: $backdrop_dark_fill; - transition: 200ms ease-out; - } - - button { @include button($toolbar_bg_color, $toolbar_fg_color); } - - toolbutton, - toolbutton:backdrop { - > button.flat { @extend %linked_middle; } - - &:first-child > button.flat { @extend %linked_button:first-child; } - - &:last-child > button.flat { @extend %linked_button:last-child; } - - &:only-child > button.flat { @extend %linked_button:only-child; } - } + -GtkWidget-window-dragging: true; } } +} - headerbar { - @include toolbar($titlebar_bg_color, $titlebar_fg_color); +@mixin inline-toolbar($bg, $fg) { + background-image: none; + border-width: 0 1px 1px; + border-style: solid; + border-color: $borders_color; + background-color: mix($borders_color, $bg_color, .7); + &:backdrop { + border-color: $backdrop_borders_color; + background-color: $backdrop_dark_fill; + transition: 200ms ease-out; + } + + button { @include button($toolbar_bg_color, $toolbar_fg_color); } + + toolbutton, + toolbutton:backdrop { + > button.flat { @extend %linked_middle; } + + &:first-child > button.flat { @extend %linked_button:first-child; } + + &:last-child > button.flat { @extend %linked_button:last-child; } + + &:only-child > button.flat { @extend %linked_button:only-child; } + } +} + +@include exports("toolbar_extends") { + %toolbar { + padding: $spacing - 1px; + border-style: none; + + // toolbar separators + &.horizontal separator { margin: 0 ($spacing + 2px) 1px; } + + &.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; } + } + + %headerbar { border-width: 0 0 1px; border-style: solid; + // add vertical margins to common widget on the headerbar to avoid them spanning the whole height + entry, + spinbutton, + separator, + switch, + button { // Size height + margin-top: $spacing + 3px; + margin-bottom: $spacing + 3px; + } + + switch { // Size height + margin-top: $spacing + 1px; + margin-bottom: $spacing + 1px; + } + window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } } window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } } } - .background:not(.tiled):not(.maximized) .titlebar { - &:backdrop, & { - border-top-left-radius: $roundness; - border-top-right-radius: $roundness; - } - } - - .titlebar { + %titlebar { // Default headerbar and titlebar code. + @include toolbar($titlebar_bg_color, $titlebar_fg_color); @include linear-gradient($titlebar_bg_color); border-radius: $roundness $roundness 0 0; color: mix($titlebar_fg_color, $titlebar_bg_color, .1); + padding: 0 $spacing; + min-height: 42px; &:backdrop { @include linear-gradient($titlebar_bg_color); @@ -121,24 +128,32 @@ text-shadow: none; } - &.default-decoration { - border: 0; + &.default-decoration { // Default titlebar (old metacity) + min-height: 24px; box-shadow: none; + border: 0; + + button.titlebutton { + min-height: 16px; + min-width: 16px; + margin: 0; + padding: 0; + } } - .tiled &, .maximized & { border-radius: 0; } + .tiled &, + .maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled .title { font-weight: bold; } - separator.titlebutton { margin-left: $spacing * 2; } + separator.titlebutton { margin-left: $spacing; } button.titlebutton + separator.titlebutton { margin-left: 0; - margin-right: $spacing * 2; + margin-right: $spacing; } button.titlebutton { - padding: $spacing; border: 0; background-image: none; background-color: transparent; @@ -167,3 +182,41 @@ } } } + +@include exports("toolbar") { + toolbar { + @include toolbar($toolbar_bg_color, $toolbar_fg_color); + + @extend %toolbar; + + &.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); } + } + + headerbar { + @extend %titlebar; + @extend %headerbar; + } + + .titlebar:not(headerbar) { + window.csd > & { + // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases + padding: 0; + background-color: transparent; + background-image: none; + border-style: none; + border-color: transparent; + box-shadow: none; + } + + > separator { background-color: shade($titlebar_bg_color, .88); } // $borders_color + + @extend %titlebar; + } + + .background:not(.tiled):not(.maximized) .titlebar { + &:backdrop, & { + border-top-left-radius: $roundness; + border-top-right-radius: $roundness; + } + } +}