diff options
Diffstat (limited to 'desktop-themes/YaruOk/gtk-3.0/_headerbar.scss')
| -rw-r--r-- | desktop-themes/YaruOk/gtk-3.0/_headerbar.scss | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/desktop-themes/YaruOk/gtk-3.0/_headerbar.scss b/desktop-themes/YaruOk/gtk-3.0/_headerbar.scss new file mode 100644 index 00000000..f453eb7f --- /dev/null +++ b/desktop-themes/YaruOk/gtk-3.0/_headerbar.scss @@ -0,0 +1,269 @@ +// Color variables dependant on $headerbar_bg_color defined in _colors.scss +$_button_bg_color: lighten($headerbar_bg_color, 7.5%); +$_button_border_color: darken($headerbar_bg_color, 9%); +// deducted from the color used in common which is $backdrop_borders_color: mix($borders_color, $bg_color, 80%); +$_backdrop_button_border_color: darken($inkstone, 9%); + +// overwriting the headerbar styling from common, for the inverted look in the ambiance theme +headerbar, +.titlebar { + @include headerbar_fill($headerbar_bg_color, $hc: $headerbar_border_color); + color: $headerbar_fg_color; + border-color: $borders_color; + + .title, + label.title { + color: $selected_fg_color; + text-shadow: 0 1px #455d7c,0 -1px #455d7c, -1px 0px #455d7c, 1px 0px #455d7c; + &:backdrop { color: darken($borders_color, 15%); text-shadow:none; } + } + + &.backdrop { + } + + .maximized &, + .fullscreen & { + box-shadow: none; + } + + entry { + &, + &:backdrop { + border-color: darken($headerbar_bg_color, 8%); + } + + &:focus { @include entry(focus); } + } + + + + separator { + background: image(lighten($_button_border_color, 5%)); + &:backdrop { + background: image($_backdrop_button_border_color); + } + } + + // Re-style switches because they are drawn on a dark headerbar + switch { + border-color: $_button_border_color; + color: $headerbar_fg_color; + background-color: $_button_bg_color; + + &:hover { background-color: lighten($_button_bg_color, 2%); } + + &:backdrop { + background-color: lighten($backdrop_headerbar_bg_color, 2%); + + &, + &:checked { border-color: darken($_backdrop_button_border_color, 4%); } + + &:disabled { + background-color: $backdrop_headerbar_bg_color; + border-color: $_backdrop_button_border_color; + } + } + + &:disabled { + background-color: $headerbar_bg_color; + border-color: $_button_border_color; + } + + &:checked { + color: $selected_fg_color; + border-color: $_button_border_color; + background-color: $checkradio_bg_color; + } + } + + // Re-style sliders for switches and scales do make them look sharp on the dark headerbar + switch, scale { + slider { + &:checked { + border-color: $checkradio_borders_color; + } + &:backdrop { + @include button(backdrop-alt, $_button_bg_color); + + &, + &:checked, + &:disabled, + &:checked:disabled { + border-color: darken($_backdrop_button_border_color, 4%); box-shadow: none; + } + } + + &:not(:checked) { + border-color: $_button_border_color; + } + &:disabled { + @include button(insensitive, darken($headerbar_bg_color, 8%)); + } + } + } + + // re-insert the full selection mode section from common ... + .selection-mode &, + &.selection-mode { + $_hc: mix($top_hilight, $suggested_bg_color, 50%); // hilight color + + color: $selected_fg_color; + border-color: $suggested_border_color; + + @include headerbar_fill($suggested_bg_color, $_hc); + + separator { + background: image(lighten($suggested_bg_color, 5%)); + } + + &:backdrop { + background-color: $suggested_bg_color; + background-image: none; + box-shadow: inset 0 1px mix($top_hilight, $suggested_bg_color, 60%); + + label { + text-shadow: none; + color: $selected_fg_color; + } + } + + .subtitle:link { @extend %link_selected; } + + button, + button.image-button, + button.image-button.toggle, + button.text.button, + button.toggle, + box button.toggle, + buttonbox.toggle, + stackswitcher button, + filechooser .path-bar.linked>button, + .path-bar button { + @include button(normal, $suggested_bg_color, $selected_fg_color); + &.flat { + @include button(undecorated); + } + + &:hover { + @include button(hover, $suggested_bg_color, $selected_fg_color); + } + + &:active, + &:checked, + &.toggle:checked, + &.toggle:active { + @include button(active, $suggested_bg_color, $selected_fg_color); + } + + &:backdrop { + + &.flat, + & { + @include button(backdrop, $suggested_bg_color, $selected_fg_color); + + //-gtk-icon-effect: none; + border-color: lighten($suggested_bg_color, 5%); + + &:active, + &:checked { + @include button(backdrop-active, $suggested_bg_color, $selected_fg_color); + + border-color: $suggested_border_color; + } + + &:disabled { + @include button(backdrop-insensitive, $suggested_bg_color, $selected_fg_color); + + border-color: $suggested_border_color; + + &:active, + &:checked { + @include button(backdrop-insensitive-active, $suggested_bg_color, $selected_fg_color); + + border-color: $suggested_border_color; + } + } + } + } + + &.flat { + + &:backdrop, + &:disabled, + &:backdrop:disabled { + @include button(undecorated); + } + } + + &:disabled { + @include button(insensitive, $suggested_bg_color, $selected_fg_color); + + &:active, + &:checked { + @include button(insensitive-active, $suggested_bg_color, $selected_fg_color); + } + } + + &.suggested-action { + @include button(normal); + + border-color: $suggested_border_color; + + &:hover { + @include button(hover); + + border-color: $suggested_border_color; + } + + &:active { + @include button(active); + + border-color: darken($suggested_border_color, 10%); + } + + &:disabled { + @include button(insensitive); + + border-color: $suggested_border_color; + } + + &:backdrop { + @include button(backdrop); + + border-color: $suggested_border_color; + } + + &:backdrop:disabled { + @include button(backdrop-insensitive); + + border-color: $suggested_border_color; + } + } + } + + .selection-menu { + + &:backdrop, + & { + border-color: transparentize($suggested_bg_color, 1); + background-color: transparentize($suggested_bg_color, 1); + background-image: none; + box-shadow: none; + min-height: 20px; + padding: $_sel_menu_pad; + + arrow { + -GtkArrow-arrow-scaling: 1; + } + + .arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + color: transparentize($selected_fg_color, 0.5); + -gtk-icon-shadow: none; + } + } + } + } +} + + |