Skip to content

Instantly share code, notes, and snippets.

@actionless

actionless/patch_gtk30_scss.diff

Created April 22, 2016 06:38
Show Gist options
  • Save actionless/eb34bacb0af7947870fc0e99137949ec to your computer and use it in GitHub Desktop.
Save actionless/eb34bacb0af7947870fc0e99137949ec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
patch_gtk30_scss.diff
diff --git a/gtk-3.0/scss/_global.scss b/gtk-3.0/scss/_global.scss
index 38ca3d6..01de3ea 100755
--- a/gtk-3.0/scss/_global.scss
+++ b/gtk-3.0/scss/_global.scss
@@ -3,18 +3,20 @@
@import "functions";
// default color scheme
-$bg_color: if($variant == "dark", #444, #eee);
-$fg_color: if($variant == "dark", #ddd, #555);
-$base_color: if($variant == "dark", #333, #fff);
-$text_color: if($variant == "dark", #eee, #333);
-$selected_bg_color: #f0544c;
-$selected_fg_color: #fff;
-$tooltip_bg_color: #444;
-$tooltip_fg_color: #eee;
+$bg_color: if($variant == "dark", #%FG%, #%BG%);
+$fg_color: if($variant == "dark", #%BG%, #%FG%);
+$base_color: if($variant == "dark", #%TXT_FG%, #%TXT_BG%);
+$text_color: if($variant == "dark", #%TXT_BG%, #%TXT_FG%);
+$button_bg_color: if($variant == "dark", #%BTN_FG%, #%BTN_BG%);
+$button_fg_color: if($variant == "dark", #%BTN_BG%, #%BTN_FG%);
+$selected_bg_color: #%SEL_BG%;
+$selected_fg_color: #%SEL_FG%;
+$tooltip_bg_color: #%BG%;
+$tooltip_fg_color: #%FG%;
// dark colors
-$dark_bg_color: #444;
-$dark_fg_color: #eee;
+$dark_bg_color: #%MENU_BG%;
+$dark_fg_color: #%MENU_FG%;
// shadows
$dark_shadow: #000;
diff --git a/gtk-3.0/scss/widgets/_button.scss b/gtk-3.0/scss/widgets/_button.scss
index c1b92aa..ae65b05 100755
--- a/gtk-3.0/scss/widgets/_button.scss
+++ b/gtk-3.0/scss/widgets/_button.scss
@@ -123,13 +123,14 @@
$border_strength: if(lightness($bg) > 50, 0, .1);
$shadow_strength: if(lightness($bg) > 50, 0, .1);
- $button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg);
+ /*$button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg);*/
+ $button_bg: $button_bg_color;
@extend %button;
@include linear-gradient($button_bg);
@include border(rgba(0, 0, 0, .12 + $border_strength));
- color: $fg;
+ color: $button_fg_color;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
&.flat {
@@ -150,7 +151,7 @@
&:active, &:checked {
@include linear-gradient(shade($button_bg, .7), to top);
- color: $white;
+ color: $selected_fg_color;
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06),
@@ -159,16 +160,16 @@
&:focus, &:hover {
@include linear-gradient(shade($button_bg, .65), to top);
- color: $white;
+ color: $selected_fg_color;
}
}
- &:focus, &:hover { color: $fg; }
+ &:focus, &:hover { color: $button_fg_color; }
&:active:insensitive, &:checked:insensitive {
@include linear-gradient(shade($button_bg, .9));
- color: $fg;
+ color: $button_fg_color;
box-shadow: none;
}
@@ -179,14 +180,14 @@
@include linear-gradient(alpha($button_bg, .3));
}
- color: mix($bg, $fg, .5);
+ color: mix($button_bg, $button_fg_color, .5);
box-shadow: none;
}
}
&.separator, .separator {
border: 1px solid currentColor;
- color: shade($bg, ($contrast + .1));
+ color: shade($button_bg, ($contrast + .1));
&:insensitive { color: shade($button_bg, .85); }
}
diff --git a/gtk-3.0/scss/widgets/_notebook.scss b/gtk-3.0/scss/widgets/_notebook.scss
index 9447d30..1ccd271 100644
--- a/gtk-3.0/scss/widgets/_notebook.scss
+++ b/gtk-3.0/scss/widgets/_notebook.scss
@@ -6,121 +6,156 @@
***********/
@include exports("notebook") {
- .notebook {
- padding: 0;
- border-width: 1px 0 0;
- border-style: solid;
- border-color: border_normal($base_color);
- border-radius: 0;
- background-color: $base_color;
- background-image: none;
- background-clip: border-box;
- color: $text_color;
- -GtkNotebook-initial-gap: 0;
- -GtkNotebook-arrow-spacing: 5;
- -GtkNotebook-tab-curvature: 0;
- -GtkNotebook-tab-overlap: 1;
- -GtkNotebook-has-tab-gap: false;
-
- &.frame { border-width: 1px; }
-
- &.header {
- border-width: 0;
- background-color: shade($base_color, .9);
-
- &.frame {
- border-color: border_normal($base_color);
-
- &.top { border-width: 1px 1px 0; }
-
- &.right { border-width: 1px 1px 1px 0; }
-
- &.bottom { border-width: 0 1px 1px; }
-
- &.left { border-width: 1px 0 1px 1px; }
- }
- }
-
- GtkViewport {
- border-width: 0;
- background-color: $base_color;
- color: $text_color;
- }
-
- tab {
- padding: ($spacing + 1px) ($spacing * 2);
- border: 1px solid transparent;
- background-color: transparent;
- background-image: none;
-
- &:hover {
- background-color: shade($base_color, .95);
- border-color: shade($base_color, .8);
- }
-
- &:active {
- background-color: $base_color;
- background-image: none;
- border-color: shade($base_color, .85);
- }
-
- &.top {
- border-bottom-width: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
-
- &.right {
- border-left-width: 0;
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- }
-
-
- &.bottom {
- border-top-width: 0;
- border-top-right-radius: 0;
- border-top-left-radius: 0;
- }
-
- &.left {
- border-right-width: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- GtkLabel { color: mix($text_color, $base_color, .3); }
-
- /* close button styling */
- .button { @extend %close_button; }
- }
-
- .prelight-page {
- &, GtkLabel { color: mix($text_color, $base_color, .15); }
- }
-
- .active-page {
- &, GtkLabel { color: $text_color; }
- }
-
- .reorderable-page {
- &:hover {
- background-color: shade($base_color, .85);
- border-left: 0;
- border-right: 0;
- /* using box shadows instead of borders due to slanted edges */
- box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
- inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
- }
-
- &:active {
- background-color: shade($base_color, .9);
- border-left: 0;
- border-right: 0;
- box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
- inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
- }
- }
- }
+.notebook {
+ padding: 0;
+ background-color: $bg_color;
+ -GtkNotebook-initial-gap: 4;
+ -GtkNotebook-arrow-spacing: 5;
+ -GtkNotebook-tab-curvature: 0;
+ -GtkNotebook-tab-overlap: 1;
+ -GtkNotebook-has-tab-gap: false;
+ -GtkWidget-focus-padding: 0;
+ -GtkWidget-focus-line-width: 0;
+ transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+ .notebook.frame {
+ border: 1px solid mix($bg_color, $fg_color, 0.2); }
+ .notebook.frame.top {
+ border-top-width: 0; }
+ .notebook.frame.bottom {
+ border-bottom-width: 0; }
+ .notebook.frame.right {
+ border-right-width: 0; }
+ .notebook.frame.left {
+ border-left-width: 0; }
+ .notebook.header {
+ background-color: $bg_color; }
+ .notebook.header.frame {
+ border: 0px solid mix($bg_color, $fg_color, 0.2); }
+ .notebook.header.frame.top {
+ border-bottom-width: 0; }
+ .notebook.header.frame.bottom {
+ border-top-width: 0; }
+ .notebook.header.frame.right {
+ border-left-width: 0; }
+ .notebook.header.frame.left {
+ border-right-width: 0; }
+ .notebook.header.top {
+ box-shadow: inset 0 -1px mix($bg_color, $fg_color, 0.2); }
+ .notebook.header.bottom {
+ box-shadow: inset 0 1px mix($bg_color, $fg_color, 0.2); }
+ .notebook.header.right {
+ box-shadow: inset 1px 0 mix($bg_color, $fg_color, 0.2); }
+ .notebook.header.left {
+ box-shadow: inset -1px 0 mix($bg_color, $fg_color, 0.2); }
+ .notebook tab {
+ border-width: 0;
+ border-style: solid;
+ border-color: transparent;
+ background-color: transparent;
+ outline-color: transparent;
+ outline-offset: 0; }
+ .notebook tab.top, .notebook tab.bottom {
+ padding: 4px 15px; }
+ .notebook tab.left, .notebook tab.right {
+ padding: 4px 15px; }
+ .notebook tab.reorderable-page.top, .notebook tab.reorderable-page.bottom {
+ padding-left: 12px;
+ padding-right: 12px; }
+ .notebook tab.reorderable-page.top, .notebook tab.top {
+ padding-top: 6px;
+ border-radius: 3.5px 2px 0 0;
+ border-width: 0;
+ border-top-width: 2px;
+ border-color: transparent;}
+ .notebook tab.reorderable-page.top:hover, .notebook tab.reorderable-page.top.prelight-page, .notebook tab.top:hover, .notebook tab.top.prelight-page {
+ background-color: mix($bg_color, $base_color, 0.4);
+ box-shadow: inset 0 1px mix($bg_color, $base_color, 0.4), inset 0 -1px mix($bg_color, $base_color, 0.4), inset 1px 0 mix($bg_color, $base_color, 0.4), inset -1px 0 mix($bg_color, $base_color, 0.4); }
+ .notebook tab.reorderable-page.top:active, .notebook tab.reorderable-page.top.active-page, .notebook tab.reorderable-page.top.active-page:hover, .notebook tab.top:active, .notebook tab.top.active-page, .notebook tab.top.active-page:hover {
+ border-left-color: mix($bg_color, $fg_color, 0.2);;
+ border-left-width: 1px;
+ border-right-color: mix($bg_color, $fg_color, 0.2);;
+ border-right-width: 1px;
+ border-top-color: $selected_bg_color;
+ border-top-width: 2px;
+ border-bottom-width: 2px;
+ border-bottom-color: $bg_color;
+ }
+ .notebook tab.reorderable-page.bottom, .notebook tab.bottom {
+ padding-bottom: 6px;
+ border-radius: 0 0 2px 3.5px;
+ border-width: 0;
+ border-bottom-width: 2px;
+ border-color: transparent;
+ }
+ .notebook tab.reorderable-page.bottom:hover, .notebook tab.reorderable-page.bottom.prelight-page, .notebook tab.bottom:hover, .notebook tab.bottom.prelight-page {
+ background-color: mix($bg_color, $base_color, 0.4);
+ box-shadow: inset 0 1px mix($bg_color, $base_color, 0.4), inset 0 -1px mix($bg_color, $base_color, 0.4), inset 1px 0 mix($bg_color, $base_color, 0.4), inset -1px 0 mix($bg_color, $base_color, 0.4); }
+ .notebook tab.reorderable-page.bottom:active, .notebook tab.reorderable-page.bottom.active-page, .notebook tab.reorderable-page.bottom.active-page:hover, .notebook tab.bottom:active, .notebook tab.bottom.active-page, .notebook tab.bottom.active-page:hover {
+ border-left-color: mix($bg_color, $fg_color, 0.2);;
+ border-left-width: 1px;
+ border-right-color: mix($bg_color, $fg_color, 0.2);;
+ border-right-width: 1px;
+ border-bottom-color: $selected_bg_color;
+ border-bottom-width: 2px;
+ border-top-width: 2px;
+ border-top-color: $bg_color;
+ }
+ .notebook tab.reorderable-page.right, .notebook tab.right {
+ padding-right: 17px;
+ border-radius: 0 3.5px 3.5px 0;
+ border-width: 0;
+ border-right-width: 2px;
+ border-color: transparent;
+ }
+ .notebook tab.reorderable-page.right:hover, .notebook tab.reorderable-page.right.prelight-page, .notebook tab.right:hover, .notebook tab.right.prelight-page {
+ background-color: mix($bg_color, $base_color, 0.4);
+ box-shadow: inset 0 1px mix($bg_color, $base_color, 0.4), inset 0 -1px mix($bg_color, $base_color, 0.4), inset 1px 0 mix($bg_color, $base_color, 0.4), inset -1px 0 mix($bg_color, $base_color, 0.4); }
+ .notebook tab.reorderable-page.right:active, .notebook tab.reorderable-page.right.active-page, .notebook tab.reorderable-page.right.active-page:hover, .notebook tab.right:active, .notebook tab.right.active-page, .notebook tab.right.active-page:hover {
+ border-top-color: mix($bg_color, $fg_color, 0.2);;
+ border-top-width: 1px;
+ border-bottom-color: mix($bg_color, $fg_color, 0.2);;
+ border-bottom-width: 1px;
+ border-right-color: $selected_bg_color;
+ border-right-width: 2px;
+ border-left-width: 2px;
+ border-left-color: $bg_color;
+ }
+ .notebook tab.reorderable-page.left, .notebook tab.left {
+ padding-left: 17px;
+ border-radius: 3.5px 0 0 3.5px;
+ border-width: 0;
+ border-left-width: 2px;
+ border-color: transparent;
+ }
+ .notebook tab.reorderable-page.left:hover, .notebook tab.reorderable-page.left.prelight-page, .notebook tab.left:hover, .notebook tab.left.prelight-page {
+ background-color: mix($bg_color, $base_color, 0.4);
+ box-shadow: inset 0 1px mix($bg_color, $base_color, 0.4), inset 0 -1px mix($bg_color, $base_color, 0.4), inset 1px 0 mix($bg_color, $base_color, 0.4), inset -1px 0 mix($bg_color, $base_color, 0.4); }
+ .notebook tab.reorderable-page.left:active, .notebook tab.reorderable-page.left.active-page, .notebook tab.reorderable-page.left.active-page:hover, .notebook tab.left:active, .notebook tab.left.active-page, .notebook tab.left.active-page:hover {
+ border-top-color: mix($bg_color, $fg_color, 0.2);;
+ border-top-width: 1px;
+ border-bottom-color: mix($bg_color, $fg_color, 0.2);;
+ border-bottom-width: 1px;
+ border-left-color: $selected_bg_color;
+ border-left-width: 2px;
+ border-right-width: 2px;
+ border-right-color: $bg_color;
+ }
+ .notebook tab GtkLabel {
+ padding: 0 2px;
+ color: $fg_color; }
+ .notebook tab .prelight-page GtkLabel, .notebook tab GtkLabel.prelight-page {
+ color: mix($fg_color, $bg_color, 0.1); }
+ .notebook tab .active-page GtkLabel, .notebook tab GtkLabel.active-page {
+ color: $fg_color; }
+ .notebook tab .button > GtkImage {
+ padding: 2px; }
+ .notebook.arrow {
+ color: $fg_color; }
+ .notebook.arrow:hover {
+ color: mix($fg_color, $bg_color, 0.1); }
+ .notebook.arrow:active {
+ color: $fg_color; }
+ .notebook.arrow:insensitive {
+ color: mix($fg_color, $bg_color, 0.4); }
}
diff --git a/gtk-3.0/scss/widgets/_sidebar.scss b/gtk-3.0/scss/widgets/_sidebar.scss
index 18f5e3a..b5d5c64 100755
--- a/gtk-3.0/scss/widgets/_sidebar.scss
+++ b/gtk-3.0/scss/widgets/_sidebar.scss
@@ -43,6 +43,11 @@
}
.frame { border-width: 0; }
+
+ .sidebar-row {
+ padding: 1px;
+ }
+
.sidebar-icon {
padding-left: $spacing * 2;
padding-right: $spacing * 2;
diff --git a/gtk-3.0/scss/widgets/_toggle.scss b/gtk-3.0/scss/widgets/_toggle.scss
index a47434a..86e79f6 100755
--- a/gtk-3.0/scss/widgets/_toggle.scss
+++ b/gtk-3.0/scss/widgets/_toggle.scss
@@ -7,20 +7,20 @@ $suffix: if($variant == "dark", "-dark", "");
@mixin toggle($type) {
background-image: none;
- -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
+ -gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.svg");
- &:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
+ &:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.svg"); }
&:checked, &:active {
- -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
+ -gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.svg");
- &:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
+ &:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.svg"); }
}
&:inconsistent {
- -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
+ -gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.svg");
- &:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
+ &:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.svg"); }
}
&.menuitem {
@@ -29,19 +29,19 @@ $suffix: if($variant == "dark", "-dark", "");
&:insensitive { -gtk-icon-source: none; }
&:checked, &:active {
- -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
+ -gtk-icon-source: url("../assets/menuitem-#{$type}-checked.svg");
- &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
+ &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.svg"); }
- &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
+ &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.svg"); }
}
&:inconsistent {
- -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
+ -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.svg");
- &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
+ &:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.svg"); }
- &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
+ &:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.svg"); }
}
}
}
@@ -57,9 +57,9 @@ $suffix: if($variant == "dark", "-dark", "");
.check { @include toggle("checkbox"); }
GtkIconView.content-view.cell.check {
- -gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
+ -gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.svg");
- &:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
+ &:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.svg"); }
}
}
diff --git a/gtk-3.0/scss/widgets/_toolbar.scss b/gtk-3.0/scss/widgets/_toolbar.scss
index 019e79b..09101ca 100755
--- a/gtk-3.0/scss/widgets/_toolbar.scss
+++ b/gtk-3.0/scss/widgets/_toolbar.scss
@@ -54,12 +54,18 @@
.toolbar {
@include toolbar($bg_color, $fg_color);
+ padding: 2px;
border-style: none;
&.inline-toolbar {
background-image: none;
background-color: transparent;
}
+ GtkToolButton:insensitive GtkButton:insensitive,
+ GtkToolButton:insensitive GtkButton:insensitive.button,
+ GtkToolButton:insensitive GtkButton:insensitive.flat.button {
+ background-color: $bg_color;
+ }
}
.header-bar {
@@ -67,6 +73,9 @@
border-width: 0 0 1px;
border-style: solid;
+ .button {
+ color: $button_fg_color;
+ }
}
.titlebar {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment