[gtk+] theme: Split out _solid() function
- From: Benjamin Otte <otte src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] theme: Split out _solid() function
- Date: Mon, 18 Apr 2016 18:59:02 +0000 (UTC)
commit f51b15808a89b045c8ff9f233f37b8799accc99a
Author: Benjamin Otte <otte redhat com>
Date: Sun Mar 27 19:41:19 2016 +0200
theme: Split out _solid() function
The function creates a solid color image. Currently this is done with
linear-gradient().
gtk/theme/Adwaita/_common.scss | 20 +++++++-------
gtk/theme/Adwaita/_drawing.scss | 29 +++++++++++--------
gtk/theme/Adwaita/gtk-contained-dark.css | 32 +++++++++++-----------
gtk/theme/Adwaita/gtk-contained.css | 32 +++++++++++-----------
gtk/theme/HighContrast/_common.scss | 12 ++++----
gtk/theme/HighContrast/_drawing.scss | 11 +++++--
gtk/theme/HighContrast/gtk-contained-inverse.css | 2 +-
gtk/theme/HighContrast/gtk-contained.css | 2 +-
8 files changed, 75 insertions(+), 65 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index e262db5..43cfbc1 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -123,7 +123,7 @@ textview {
textview border {
background-color: mix($bg_color, $base_color, 50%);
- background-image: image(transparentize(black, 0.8)); // HACK: the border node just draws background so,
+ background-image: _solid(transparentize(black, 0.8)); // HACK: the border node just draws background so,
background-repeat: no-repeat; // using a background-image to draw the border
&:backdrop { background-color: mix($backdrop_bg_color, $backdrop_base_color, 50%); }
@@ -1479,7 +1479,7 @@ headerbar {
.selection-menu {
&:backdrop, & {
border-color: transparentize($selected_bg_color, 1);
- background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
+ background-image: _solid(transparentize($selected_bg_color, 1));
box-shadow: none;
padding-left: 10px;
padding-right: 10px;
@@ -3024,7 +3024,7 @@ scale {
min-width: 0;
trough {
- background-image: linear-gradient(to top, $borders_color);
+ background-image: _solid($borders_color);
background-repeat: no-repeat;
}
@@ -3746,7 +3746,7 @@ placessidebar {
&.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
- background-image: image($drop_target_color);
+ background-image: _solid($drop_target_color);
background-clip: content-box;
}
@@ -3797,24 +3797,24 @@ paned {
border-style: none; // just to be sure
background-color: transparent;
// workaround, using background istead of a border since the border will get rendered twice (?)
- background-image: image($borders_color);
+ background-image: _solid($borders_color);
background-size: 1px 1px;
- &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+ &:selected { background-image: _solid($selected_bg_color); } // FIXME is this needed?
- &:backdrop { background-image: image($backdrop_borders_color); }
+ &:backdrop { background-image: _solid($backdrop_borders_color); }
&.wide {
min-width: 5px;
min-height: 5px;
background-color: $bg_color;
- background-image: image($borders_color), image($borders_color);
+ background-image: _solid($borders_color), _solid($borders_color);
background-size: 1px 1px, 1px 1px;
&:backdrop {
background-color: $backdrop_bg_color;
- background-image: image($backdrop_borders_color),
- image($backdrop_borders_color);
+ background-image: _solid($backdrop_borders_color),
+ _solid($backdrop_borders_color);
}
}
}
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index c6bd97a..731b3a2 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -8,6 +8,11 @@
@else { @return 0 1px $c; }
}
+ function _solid($c) {
+// solid color image
+ @return linear-gradient(to bottom, $c);
+}
+
@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
//
// Helper function to stack up to 4 box-shadows;
@@ -275,8 +280,8 @@
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c!=$bg_color, _border_color($c), $borders_color);
- @if $variant == 'light' { background-image: image(darken($c, 8%)); }
- @else { background-image: image(darken($c, 6%)); }
+ @if $variant == 'light' { background-image: _solid(darken($c, 8%)); }
+ @else { background-image: _solid(darken($c, 6%)); }
@include _shadows(inset 0 1px transparentize($_hilight_color, 1),
$_button_edge);
@@ -293,7 +298,7 @@
border-color: if($c!=$bg_color, _border_color($c),
$insensitive_borders_color);
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
text-shadow: none;
-gtk-icon-shadow: none;
// white with 0 alpha to avoid an ugly transition, since no color means
@@ -327,7 +332,7 @@
label, & { color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color); }
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
text-shadow: none;
-gtk-icon-shadow: none;
@include _shadows(inset 0 1px transparentize(white, 1),
@@ -344,7 +349,7 @@
label, & { color: if($tc!=$fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
@include _shadows(inset 0 1px transparentize(white, 1),
$_blank_edge);
}
@@ -360,7 +365,7 @@
label, & { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
text-shadow: none;
-gtk-icon-shadow: none;
// white with 0 alpha to avoid an ugly transition, since no color means
@@ -381,7 +386,7 @@
label { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
@include _shadows(inset 0 1px transparentize(white, 1),
$_blank_edge);
}
@@ -395,7 +400,7 @@
color: $osd_fg_color;
border-color: $osd_borders_color;
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
background-clip: padding-box;
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: 0 1px black;
@@ -411,7 +416,7 @@
color: white;
border-color: $osd_borders_color;
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
background-clip: padding-box;
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: 0 1px black;
@@ -426,7 +431,7 @@
color: white;
border-color: $osd_borders_color;
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@@ -439,7 +444,7 @@
//
color: $osd_insensitive_fg_color;
border-color: $osd_borders_color;
- background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+ background-image: _solid($osd_insensitive_bg_color);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@@ -454,7 +459,7 @@
color: $osd_fg_color;
border-color: $osd_borders_color;
- background-image: linear-gradient(to bottom, $_bg);
+ background-image: _solid($_bg);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 333687a..490a25c 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -77,7 +77,7 @@ textview text {
textview border {
background-color: #313434;
- background-image: image(rgba(0, 0, 0, 0.2));
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2));
background-repeat: no-repeat; }
textview border:backdrop {
background-color: #333636; }
@@ -469,7 +469,7 @@ button {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #212424;
- background-image: image(#2a2f2f);
+ background-image: linear-gradient(to bottom, #2a2f2f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none;
@@ -795,7 +795,7 @@ button.suggested-action {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #0f2b48;
- background-image: image(#1b4e83);
+ background-image: linear-gradient(to bottom, #1b4e83);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -972,7 +972,7 @@ button.destructive-action {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #760909;
- background-image: image(#b90e0e);
+ background-image: linear-gradient(to bottom, #b90e0e);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -1190,7 +1190,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #212424;
- background-image: image(#2a2f2f);
+ background-image: linear-gradient(to bottom, #2a2f2f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -1737,7 +1737,7 @@ headerbar {
color: #ffffff;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #0f2b48;
- background-image: image(#1b4e83);
+ background-image: linear-gradient(to bottom, #1b4e83);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -1866,7 +1866,7 @@ headerbar {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #212424;
- background-image: image(#2a2f2f);
+ background-image: linear-gradient(to bottom, #2a2f2f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none;
@@ -2765,7 +2765,7 @@ radio {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #212424;
- background-image: image(#2a2f2f);
+ background-image: linear-gradient(to bottom, #2a2f2f);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -3500,7 +3500,7 @@ scale {
min-height: 0;
min-width: 0; }
scale.color trough {
- background-image: linear-gradient(to top, #212424);
+ background-image: linear-gradient(to bottom, #212424);
background-repeat: no-repeat; }
scale.color.horizontal {
padding: 0 0 15px 0; }
@@ -4030,7 +4030,7 @@ placessidebar row {
placessidebar row.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
- background-image: image(#4e9a06);
+ background-image: linear-gradient(to bottom, #4e9a06);
background-clip: content-box; }
placessidebar row.sidebar-new-bookmark-row {
color: #215d9c; }
@@ -4062,21 +4062,21 @@ paned > separator {
-gtk-icon-source: none;
border-style: none;
background-color: transparent;
- background-image: image(#212424);
+ background-image: linear-gradient(to bottom, #212424);
background-size: 1px 1px; }
paned > separator:selected {
- background-image: image(#215d9c); }
+ background-image: linear-gradient(to bottom, #215d9c); }
paned > separator:backdrop {
- background-image: image(#262929); }
+ background-image: linear-gradient(to bottom, #262929); }
paned > separator.wide {
min-width: 5px;
min-height: 5px;
background-color: #393f3f;
- background-image: image(#212424), image(#212424);
+ background-image: linear-gradient(to bottom, #212424), linear-gradient(to bottom, #212424);
background-size: 1px 1px, 1px 1px; }
paned > separator.wide:backdrop {
background-color: #393f3f;
- background-image: image(#262929), image(#262929); }
+ background-image: linear-gradient(to bottom, #262929), linear-gradient(to bottom, #262929); }
paned.horizontal > separator {
background-repeat: repeat-y; }
paned.horizontal > separator:dir(ltr) {
@@ -4151,7 +4151,7 @@ infobar {
color: #ffffff;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #0f2b48;
- background-image: image(#1b4e83);
+ background-image: linear-gradient(to bottom, #1b4e83);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index aa185cd..2979e6f 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -77,7 +77,7 @@ textview text {
textview border {
background-color: #f4f4f3;
- background-image: image(rgba(0, 0, 0, 0.2));
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2));
background-repeat: no-repeat; }
textview border:backdrop {
background-color: #f2f2f2; }
@@ -469,7 +469,7 @@ button {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
- background-image: image(#d4d4d2);
+ background-image: linear-gradient(to bottom, #d4d4d2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none;
@@ -798,7 +798,7 @@ button.suggested-action {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
- background-image: image(#2b7bcf);
+ background-image: linear-gradient(to bottom, #2b7bcf);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -975,7 +975,7 @@ button.destructive-action {
color: white;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #a60c0c;
- background-image: image(#df1111);
+ background-image: linear-gradient(to bottom, #df1111);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -1193,7 +1193,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
- background-image: image(#d4d4d2);
+ background-image: linear-gradient(to bottom, #d4d4d2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -1744,7 +1744,7 @@ headerbar {
color: #ffffff;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
- background-image: image(#2b7bcf);
+ background-image: linear-gradient(to bottom, #2b7bcf);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -1873,7 +1873,7 @@ headerbar {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
- background-image: image(#d4d4d2);
+ background-image: linear-gradient(to bottom, #d4d4d2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none;
@@ -2790,7 +2790,7 @@ radio {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #b6b6b3;
- background-image: image(#d4d4d2);
+ background-image: linear-gradient(to bottom, #d4d4d2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
@@ -3529,7 +3529,7 @@ scale {
min-height: 0;
min-width: 0; }
scale.color trough {
- background-image: linear-gradient(to top, #b6b6b3);
+ background-image: linear-gradient(to bottom, #b6b6b3);
background-repeat: no-repeat; }
scale.color.horizontal {
padding: 0 0 15px 0; }
@@ -4059,7 +4059,7 @@ placessidebar row {
placessidebar row.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
- background-image: image(#4e9a06);
+ background-image: linear-gradient(to bottom, #4e9a06);
background-clip: content-box; }
placessidebar row.sidebar-new-bookmark-row {
color: #4a90d9; }
@@ -4091,21 +4091,21 @@ paned > separator {
-gtk-icon-source: none;
border-style: none;
background-color: transparent;
- background-image: image(#b6b6b3);
+ background-image: linear-gradient(to bottom, #b6b6b3);
background-size: 1px 1px; }
paned > separator:selected {
- background-image: image(#4a90d9); }
+ background-image: linear-gradient(to bottom, #4a90d9); }
paned > separator:backdrop {
- background-image: image(#c0c0bd); }
+ background-image: linear-gradient(to bottom, #c0c0bd); }
paned > separator.wide {
min-width: 5px;
min-height: 5px;
background-color: #e8e8e7;
- background-image: image(#b6b6b3), image(#b6b6b3);
+ background-image: linear-gradient(to bottom, #b6b6b3), linear-gradient(to bottom, #b6b6b3);
background-size: 1px 1px, 1px 1px; }
paned > separator.wide:backdrop {
background-color: #e8e8e7;
- background-image: image(#c0c0bd), image(#c0c0bd); }
+ background-image: linear-gradient(to bottom, #c0c0bd), linear-gradient(to bottom, #c0c0bd); }
paned.horizontal > separator {
background-repeat: repeat-y; }
paned.horizontal > separator:dir(ltr) {
@@ -4180,7 +4180,7 @@ infobar {
color: #ffffff;
outline-color: rgba(255, 255, 255, 0.3);
border-color: #215d9c;
- background-image: image(#2b7bcf);
+ background-image: linear-gradient(to bottom, #2b7bcf);
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none; }
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index b5a50e1..dd5201c 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -297,11 +297,11 @@ entry {
&:not(:disabled) + entry:not(:disabled),
&:not(:disabled) + %entry:not(:disabled) {
border-top-color: mix($borders_color, $base_color, 30%);
- background-image: linear-gradient(to bottom, $base_color);
+ background-image: _solid($base_color);
&:backdrop {
border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
- background-image: linear-gradient(to bottom, $backdrop_base_color);
+ background-image: _solid($backdrop_base_color);
}
}
@@ -2781,7 +2781,7 @@ calendar {
darken($bg_color,2%));
border-bottom-color: mix($borders_color,$bg_color,50%);
&:backdrop {
- background-image: linear-gradient(to bottom, $backdrop_bg_color);
+ background-image: _solid($backdrop_bg_color);
border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
}
}
@@ -2980,7 +2980,7 @@ placessidebar {
&.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
- background-image: image($fg_color);
+ background-image: _solid($fg_color);
background-clip: content-box;
}
@@ -3023,9 +3023,9 @@ paned {
separator {
min-width: 1px;
min-height: 1px;
- background-image: linear-gradient(to bottom, $borders_color);
+ background-image: _solid($borders_color);
&:backdrop {
- background-image: linear-gradient(to bottom, $backdrop_borders_color);
+ background-image: _solid($backdrop_borders_color);
}
}
&:dir(ltr).horizontal separator {
diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss
index 8962706..43b2de1 100644
--- a/gtk/theme/HighContrast/_drawing.scss
+++ b/gtk/theme/HighContrast/_drawing.scss
@@ -6,6 +6,11 @@
@return 0 1px $c;
}
+ function _solid($c) {
+// solid color image
+ @return linear-gradient(to bottom, $c);
+}
+
@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
//
// Helper function to stack up to 4 box-shadows;
@@ -64,17 +69,17 @@
@if $t==insensitive {
color: $insensitive_fg_color;
border-color: $borders_color;
- background-image: linear-gradient(to bottom, $insensitive_bg_color);
+ background-image: _solid($insensitive_bg_color);
@include _shadows($_entry_edge);
}
@if $t==backdrop {
color: $backdrop_fg_color;
- background-image: linear-gradient(to bottom, $backdrop_base_color);
+ background-image: _solid($backdrop_base_color);
box-shadow: 0 1px transparentize(white,1);
}
@if $t==backdrop-insensitive {
color: $insensitive_fg_color;
- background-image: linear-gradient(to bottom, $backdrop_bg_color);
+ background-image: _solid($backdrop_bg_color);
box-shadow: 0 1px transparentize(white,1);
}
}
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 20dd853..f804156 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -3094,7 +3094,7 @@ placessidebar row {
placessidebar row.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
- background-image: image(#fff);
+ background-image: linear-gradient(to bottom, #fff);
background-clip: content-box; }
placessidebar row.sidebar-new-bookmark-row {
color: #ddd; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index 4e20846..fc4af7b 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -3101,7 +3101,7 @@ placessidebar row {
placessidebar row.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
- background-image: image(#000);
+ background-image: linear-gradient(to bottom, #000);
background-clip: content-box; }
placessidebar row.sidebar-new-bookmark-row {
color: #000; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]