diff gtk-3.0/gtk.scss @ 3:9a738f9171a1

Add custom SCSS file with existing overrides and rebuild gtk.css
author IBBoard <dev@ibboard.co.uk>
date Sat, 09 Apr 2016 20:51:14 +0100
parents
children 52574f98627d
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/gtk-3.0/gtk.scss	Sat Apr 09 20:51:14 2016 +0100
@@ -0,0 +1,581 @@
+// General guidelines:
+// - very unlikely you want to edit something else than _common.scss
+// - keep the number of defined colors to a minimum, use the color blending functions if
+//   you need a subtle shade
+// - if you need to inverse a color function use the @if directive to match for dark $variant
+
+$variant: 'light';
+
+// Import the default colours
+@import 'colors';
+
+// Override some colours
+$base_color: #C6C6C6;
+$bg_color: #C6C6C6;
+$fg_color: #161616;
+$selected_bg_color: #5E7F3E;
+$selected_borders_color: darken($selected_bg_color, 30%);
+$borders_color: darken($bg_color,30%);
+$borders_edge: transparentize(lighten($bg_color, 30%), 0.9);
+$link_color: darken($selected_bg_color,10%);
+$link_visited_color: darken($selected_bg_color,20%);
+$top_hilight: $borders_edge;
+
+$scrollbar_bg_color: darken($bg_color, 7%);
+
+$sidebar_bg_color: darken($bg_color,5%);
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main colors.
+$backdrop_base_color: darken($base_color, 1%);
+$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
+$backdrop_bg_color: $bg_color;
+$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
+$backdrop_insensitive_color: darken($backdrop_bg_color, 15%);
+$backdrop_selected_fg_color: $selected_fg_color;
+$backdrop_selected_bg_color: desaturate($selected_bg_color,100%);
+$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
+$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
+$backdrop_sidebar_bg_color: darken($backdrop_bg_color,5%);
+
+$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
+
+
+// Add our own colours
+$text_input_color: #F0F0F0;
+$backdrop_text_input_color: darken($text_input_color, 1%);
+$bg_dark_color: #3D3D3D;
+$fg_dark_color: #dddddd;
+$insensitive_dark_fg_color: mix($fg_dark_color, $bg_dark_color, 50%);
+$titlebar_highlight: #4c4c4c;
+$header_button_raised_gradient_color_a: lighten($bg_dark_color, 10%);
+$header_button_checked: darken($bg_dark_color, 5%);
+$header_button_border: darken($bg_dark_color, 5%);
+$header_button_border_unfocused: darken($bg_dark_color, 5%);
+$menu_fg_dark_color: #cccccc;
+$focused_entry_outer:  transparentize($selected_bg_color, 0.45);
+$bg_gradient_1: lighten($bg_color, 20%);
+$bg_gradient_2: lighten($bg_color, 10%);
+$bg_gradient_3: lighten($bg_color, 5%);
+$bg_prelight: $bg_gradient_1;
+$selected_bg_color_hover: lighten($selected_bg_color, 10%);
+$selected_bg_color_shade: darken($selected_bg_color, 10%);
+$selected_bg_border: darken($selected_bg_color, 30%);
+$title_fg: #fff;
+$header_separator: lighten($bg_dark_color, 10%);
+$fg_color_emphasis: darken($fg_color, 50%);
+$fg_color_de_emphasis: lighten($fg_color, 20%);
+$unfocused_fg_color: $backdrop_fg_color;
+$unfocused_insensitive_fg_color: lighten($insensitive_fg_color, 20%);
+$transparent_outline: #383436;
+
+// Import the default widgets
+@import 'drawing';
+// Style everything
+@import 'common';
+//Export default colours
+@import 'colors-public';
+
+//Override some exported colours
+@define-color wm_title #{"" + $bg_dark_color};
+@define-color wm_unfocused_title #{"" + $bg_dark_color};
+@define-color wm_highlight shade(#{"" + $bg_dark_color}, 1.03);
+@define-color wm_borders_edge #{"" + $bg_dark_color};
+
+@define-color wm_bg_a shade(#{$bg_dark_color}, 1.2);
+@define-color wm_bg_b #{$bg_dark_color};
+
+@define-color wm_button_hover_color_a shade(#{$bg_dark_color}, 1.3);
+@define-color wm_button_hover_color_b #{$bg_dark_color};
+@define-color wm_button_active_color_a shade(#{$bg_dark_color}, 0.85);
+@define-color wm_button_active_color_b shade(#{$bg_dark_color}, 0.89);
+@define-color wm_button_active_color_c shade(#{$bg_dark_color}, 0.9);
+
+
+// And now do our own overrides of styling
+*:insensitive {
+  -gtk-image-effect: highlight;
+}
+
+ /***************
+ * Header bars *
+ ***************/
+.header-bar,
+.titlebar, GtkApplicationWindow.fullscreen {
+    color: $title_fg;
+    border-width: 0 0 1px;
+    border-style: solid;
+    background-image: linear-gradient(to bottom, $bg_dark_color, lighten($bg_dark_color, 3%) 20%, $bg_dark_color 45%);
+    border-color: shade($bg_dark_color, 0.90);
+    box-shadow: inset 0 2px $titlebar_highlight, inset 0 1px $header_button_border;
+    background-color: $bg_dark_color;
+}
+.header-bar:backdrop,
+.titlebar:backdrop, GtkApplicationWindow.fullscreen:backdrop {
+    color: $fg_dark_color;
+    box-shadow: none;
+    background-color: $bg_dark_color;
+    background-image: none;
+    border-color: darken($bg_dark_color, 10%);
+}
+
+/* this is the default titlebar that is added by GTK
+ * when client-side decorations are in use and the application
+ * did not set a custom titlebar.
+ */
+.header-bar .separator,
+.titlebar .separator {
+    border-width: 1px;
+    border-style: solid;
+    border-image: none;
+    color: $header_separator;
+
+}
+ 
+.titlebar.default-decoration {
+    border: none;
+    box-shadow: none;
+}
+ 
+.titlebar .title {
+    font: Bold 11;
+    background: none;
+    color: $title_fg;
+}
+
+.titlebar .title:backdrop {
+	color: $fg_dark_color;
+}
+.header-bar .button.titlebutton:active,
+  .titlebar .button.titlebutton:active,
+  .header-bar .button.titlebutton:checked,
+  .titlebar .button.titlebutton:checked
+  
+.header-bar .button:active,
+.header-bar .button.titlebutton:active,
+.titlebar .button.titlebutton:active,
+.header-bar .button:checked,
+.header-bar .button.titlebutton:checked,
+.titlebar .button.titlebutton:checked,
+.header-bar .button:active:hover,
+.header-bar .button.titlebutton:active:hover,
+.titlebar .button.titlebutton:active:hover,
+.header-bar .button:checked:hover,
+.header-bar .button.titlebutton:checked:hover,
+.titlebar .button.titlebutton:checked:hover,
+.header-bar .button,
+.header-bar .titlebutton.button,
+.titlebar .titlebutton.button {
+  color: $fg_dark_color;
+  background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
+  text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+  icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+  border-color: $header_button_border;
+  outline-color: $header_button_raised_gradient_color_a;
+  box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
+}
+.header-bar .titlebutton.button,
+.titlebar .titlebutton.button {
+	border-color: transparent;
+	box-shadow: none;
+	background-image: none;
+}
+.header-bar .button:insensitive,
+.header-bar .titlebutton.button:insensitive,
+.titlebar .titlebutton.button:insensitive,
+.header-bar .button:insensitive:backdrop,
+.header-bar .titlebutton.button:insensitive:backdrop,
+.titlebar .titlebutton.button:insensitive:backdrop {
+    color: $insensitive_dark_fg_color;
+    background-image: none;
+    box-shadow: none;
+}
+
+.header-bar .button:hover,
+.header-bar .button.titlebutton:hover,
+.titlebar .button.titlebutton:hover {
+    color: shade($fg_dark_color, 1.3);
+    outline-color: $header_button_raised_gradient_color_a;
+    border-color: $header_button_border;
+    background-image: linear-gradient(to bottom, shade($header_button_raised_gradient_color_a, 1.1), shade($bg_dark_color, 1.1));
+    text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+    icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+    box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a; }
+  
+.header-bar .button:active,
+.header-bar .button.titlebutton:active,
+.titlebar .button.titlebutton:active,
+.header-bar .button:checked,
+.header-bar .button.titlebutton:checked,
+.titlebar .button.titlebutton:checked,
+.header-bar .button:active:hover,
+.header-bar .button.titlebutton:active:hover,
+.titlebar .button.titlebutton:active:hover,
+.header-bar .button:checked:hover,
+.header-bar .button.titlebutton:checked:hover,
+.titlebar .button.titlebutton:checked:hover {
+    color: $title_fg;
+    background-image: linear-gradient(to bottom, $bg_dark_color, $header_button_checked);
+}
+.header-bar .button:backdrop,
+.header-bar .button.titlebutton:backdrop,
+.titlebar .button.titlebutton:backdrop {
+  background-image: none;
+  background-color: $bg_dark_color;
+  border-color: transparent;
+  box-shadow:none;
+  text-shadow: none;
+  icon-shadow: none;
+  color: $fg_dark_color;
+}
+.header-bar .button:backdrop {
+    border-color: $header_button_border_unfocused
+}
+
+.header-bar .button:active:backdrop,
+.header-bar .button.titlebutton:active:backdrop,
+.titlebar .button.titlebutton:active:backdrop,
+.header-bar .button:checked:backdrop,
+.header-bar .button.titlebutton:checked:backdrop,
+.titlebar .button.titlebutton:checked:backdrop,
+.header-bar .button:active:hover:backdrop,
+.header-bar .button.titlebutton:active:hover:backdrop,
+.titlebar .button.titlebutton:active:hover:backdrop,
+.header-bar .button:checked:hover:backdrop,
+.header-bar .button.titlebutton:checked:hover:backdrop,
+.titlebar .button.titlebutton:checked:hover:backdrop {
+    color: $fg_dark_color;
+    background-image: none;
+    background-color: $header_button_checked;
+    box-shadow:none;
+    text-shadow: none;
+    icon-shadow: none;
+}
+.header-bar .suggested-action.button,
+.header-bar .suggested-action.titlebutton.button,
+.titlebar .suggested-action.titlebutton.button {
+  color: $title_fg;
+  background-color: mix($selected_bg_color, $bg_dark_color, 80%);
+  background-image: linear-gradient(to bottom, mix($selected_bg_color, $header_button_raised_gradient_color_a, 80%), mix($selected_bg_color, $bg_dark_color, 80%));
+  text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+  icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+  border-color: mix($selected_bg_color, $header_button_border, 30%);
+  outline-color: $header_button_raised_gradient_color_a;
+  box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
+}
+
+.header-bar .suggested-action.button:backdrop,
+.header-bar .suggested-action.titlebutton.button:backdrop,
+.titlebar .suggested-action.titlebutton.button:backdrop {
+  background-image: none;
+  text-shadow: none;
+  icon-shadow: none;
+  border-color: transparent;
+  outline-color: transparent;
+  box-shadow: none;
+}
+
+.header-bar .suggested-action.button:hover,
+.header-bar .suggested-action.button.titlebutton:hover,
+.titlebar .suggested-action.button.titlebutton:hover {
+    color: shade($fg_dark_color, 1.3);
+    outline-color: $header_button_raised_gradient_color_a;
+    border-color: $header_button_border;
+    background-image: linear-gradient(to bottom, shade(mix($selected_bg_color, $header_button_raised_gradient_color_a, 80%), 1.1), shade(mix($selected_bg_color,$bg_dark_color,80%), 1.1));
+    text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+    icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
+    box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a; }
+.header-bar .suggested-action.titlebutton.button:backdrop:insensitive,
+.titlebar .suggested-action.titlebutton.button:backdrop:insensitive,
+.header-bar .suggested-action.button:backdrop:insensitive,
+.titlebar .suggested-action.button:backdrop:insensitive {
+    color: mix($fg_dark_color, $bg_dark_color, 60%);
+    background-image: none;
+    background-color: $bg_dark_color;
+    border-color: transparent;
+}
+.header-bar .suggested-action.titlebutton.button:insensitive,
+.titlebar .suggested-action.titlebutton.button:insensitive,
+.header-bar .suggested-action.button:insensitive,
+.titlebar .suggested-action.button:insensitive {
+    color: mix($fg_dark_color, $bg_dark_color, 60%);
+    background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
+    background-color: $bg_dark_color;
+    border-color: transparent;
+}
+
+.titlebar .header-bar-separator, .titlebar > GtkBox > .separator.vertical,
+GtkPlacesSidebar.sidebar .view .titlebar > GtkBox > .vertical.separator:backdrop,
+.header-bar .header-bar-separator,
+.header-bar > GtkBox > .separator.vertical,
+GtkPlacesSidebar.sidebar .view .header-bar > GtkBox > .vertical.separator:backdrop {
+    border-image: linear-gradient(to bottom, transparentize($header_separator, 0), $header_separator 30%, $header_separator 70%, transparentize($header_separator, 0) 100%) 0 1/0 1px stretch;
+}
+.titlebar .header-bar-separator:backdrop, .titlebar > GtkBox > .separator.vertical:backdrop,
+.header-bar .header-bar-separator:backdrop,
+.header-bar > GtkBox > .separator.vertical:backdrop {
+    border-image: linear-gradient(to bottom, transparentize($header_separator, 0.5)) 0 1/1px 1px;
+}
+
+column-header .button, column-header .header-bar .button.titlebutton, .header-bar column-header .button.titlebutton,
+column-header .titlebar .button.titlebutton,
+.titlebar column-header .button.titlebutton {
+  color: $fg_color;
+  background-color: $bg_gradient_2;}
+  column-header .button:hover, column-header .header-bar .button.titlebutton:hover, .header-bar column-header .button.titlebutton:hover,
+  column-header .titlebar .button.titlebutton:hover,
+  .titlebar column-header .button.titlebutton:hover {
+    color: $fg_color_emphasis; }
+
+// Somehow, our notebook tabs don't appear to be classed ".label",
+// so we have to bodge it with GtkLabel directly
+.notebook {
+  // Through me you go to the grief wracked city;
+  // Through me you go to everlasting pain;
+  // Through me you go a pass among lost souls.
+  // ...
+  // Abandon all hope — Ye Who Enter Here
+  tab {
+    GtkLabel { //tab text
+      padding: 0 2px; // needed for a nicer focus ring
+      font-weight: bold;
+      color: $insensitive_fg_color;
+      &:backdrop, &.prelight-page:backdrop {
+        color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
+      }
+    }
+    .prelight-page GtkLabel, GtkLabel.prelight-page {
+      // prelight tab text
+      color: mix($fg_color, $insensitive_fg_color, 50%);
+      &:backdrop { // FIXME, it's the same as .label:backdrop up here
+        color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
+      }
+    }
+    .active-page GtkLabel, GtkLabel.active-page {
+      // active tab text
+      color: $fg_color;
+      &:backdrop { color: $backdrop_fg_color; }
+    }
+  }
+}
+
+.popover {
+  background-color: $bg_color;
+}
+.popover .menuitem.button { border: none; box-shadow: none; outline: none; }
+.menu {
+  background-color: $bg_color;
+  .csd & {
+    border: 1px solid $borders_color;
+  }
+}
+.background {
+  background-color: $bg_color;
+}
+
+.entry, .linked.vertical > .entry, .linked.vertical > .entry:first-child, .linked.vertical > .entry:last-child {
+  background-image: entry_gradient($text_input_color);
+  background-color: $text_input_color;
+  
+  &:focus { background-image: entry_gradient($text_input_color); }
+  &:insensitive { background-image: linear-gradient(to bottom, $insensitive_bg_color); }
+  &:backdrop { background-image: none; background-color: $backdrop_text_input_color; }
+  &:backdrop:insensitive { background-image: linear-gradient(to bottom, $insensitive_bg_color); }
+}
+GtkPaned {
+ border: 1px solid $borders_color;
+}
+GtkPlacesSidebar.sidebar .view {
+  color: $fg_color;
+  background-color: transparent;
+}
+
+.view, .list, .list-row, .list-row.button {
+  color: $text_color;
+  background-color: $text_input_color;
+  &:backdrop, &:backdrop:hover {
+    color: $backdrop_text_color;
+    background-color: $backdrop_text_input_color;
+  }
+  &:selected {
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+  }
+  &:hover {
+    background-color: mix($fg_color, $text_input_color, 5%);
+  }
+  &:active {
+    box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
+  }
+  &:selected {
+    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+    &:hover {
+      background-color: mix($fg_color, $selected_bg_color, 10%);
+    }
+    &:backdrop { background-color: $selected_bg_color; }
+  }
+}
+.list-row {
+  // Set sidebar items back to something reasonable
+  &.sidebar-item {
+    background-color: $sidebar_bg_color;
+    border-color: $borders_color;
+    &:backdrop, &:backdrop:hover {
+      background-color: $backdrop_sidebar_bg_color;
+      border-color: $backdrop_borders_color;
+    }
+    // let's take care of background colors
+    &:hover {
+      background-color: mix($fg_color, $base_color, 5%);
+    }
+    &:active {
+      box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
+    }
+    &:selected {
+      background-color: $selected_bg_color;
+      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+      &:hover {
+        background-color: mix($fg_color, $selected_bg_color, 10%);
+      }
+      &:backdrop { background-color: $selected_bg_color; }
+    }
+  }
+}
+.sidebar .list {
+    background-color: $sidebar_bg_color;
+    border-color: $borders_color;
+    &:backdrop {
+      background-color: $backdrop_sidebar_bg_color;
+      border-color: $backdrop_borders_color;
+    }
+}
+
+/*.list .list-row.button {
+  &:hover, &:backdrop:insensitive {
+    background-color: rgba(0,0,0,0);
+  }
+}*/
+
+
+/*GtkPlacesSidebar .separator { color: $insensitive_fg_color; }*/
+
+
+// Fix the rubberband background after we gave lists and views a lighter background
+.view.rubberband {
+  background-color: transparentize($selected_bg_color,0.8);
+}
+.menubar {
+  background-color: $bg_dark_color;
+  color: $menu_fg_dark_color;
+  box-shadow: inset 0 -1px transparentize(black, 0.9);
+  &:backdrop { background-color: $bg_dark_color; }
+}
+.menubar, .header-bar {
+  & .menu { background-color: $bg_dark_color;
+  color: $menu_fg_dark_color; border-color: $header_button_border; }
+  & > .menuitem {
+    &:hover { //Seems like it :hover even with keyboard focus
+      box-shadow: inset 0 -3px $selected_bg_color;
+      color: $fg_dark_color;
+    }
+    &:insensitive {
+      color: $insensitive_fg_color;
+      box-shadow: none;
+    }
+  }
+}
+.tweak-group .button.list-row, .tweak-categories .tweak-category.list-row {
+  color: $fg_color;
+  background-color: $bg_color;
+  &:hover {
+    background-color: mix($fg_color, $base_color, 5%);
+  }
+  &:backdrop { background-color: $backdrop_bg_color }
+  &:selected {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+    &:hover {
+      background-color: mix($fg_color, $selected_bg_color, 10%);
+    }
+  }
+}
+.floating-bar {
+  opacity: 0.9;
+  color: $text_color;
+  background-color: $text_input_color;
+  border: 1px solid $borders_color;
+
+  @each $tb,$tb_corner in ('top','bottom'),
+                          ('bottom','top') {
+    @each $lr,$lr_corner in ('left','right'),
+                 ('right','left') {
+      &.#{$tb}.#{$lr} {
+        border-#{$tb_corner}-#{$lr_corner}-radius: 3px;
+        border-#{$tb}-width: 0;
+        border-#{$lr}-width: 0;
+      }
+    }
+  }
+}
+.menu .menuitem.check, .menu .menuitem.radio {
+  color: $fg_dark_color;
+}
+
+
+/* Fix Meld dialog buttons and try not to break anything else */
+.message-dialog.csd .dialog-action-area .button {
+  border-bottom-style: solid;
+  &:last-child {
+    border-right-style: solid;
+    border-top-right-radius: 7px; }
+  &:first-child {
+    border-left-style: solid;
+    border-top-left-radius: 7px; }
+  &:hover, &:backdrop { border-bottom-style: solid; }
+}
+
+/* And put "linked" buttons back to Adwaita style */
+.message-dialog.csd .dialog-action-area.linked .button {
+  border-bottom-style: none;
+  &:last-child {
+    border-right-style: none;
+    border-top-right-radius: 0; }
+  &:first-child {
+    border-left-style: none;
+    border-top-left-radius: 0; }
+  &:hover, &:backdrop { border-bottom-style: none; }
+}
+
+/* Fix tree view progress bars */
+GtkTreeView.view {
+  &.progressbar { // progress bar in treeviews
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
+    
+    &:selected {
+      color: darken($selected_bg_color,20%);
+      &:backdrop {
+        color: darken($selected_bg_color,20%);
+      }
+    }
+
+    &:backdrop {
+      @if $variant == 'light' { color: $backdrop_base_color; }
+      @else { border-color: $backdrop_base_color; }
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+}
+
+/*
+ * Fix text views that don't specify a class.
+ * Happens mainly in Meld when viewing single files
+ */
+GtkTextView {
+    background-color: #eee
+}
\ No newline at end of file