1 files changed, 269 insertions, 0 deletions
diff --git a/desktop-themes/TraditionalOk/gtk-3.0/_headerbar.scss b/desktop-themes/TraditionalOk/gtk-3.0/_headerbar.scss
new file mode 100644
index 00000000..f453eb7f
--- /dev/null
+++ b/desktop-themes/TraditionalOk/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;
+ }
+ }
+ }
+ }
+}
+
+