AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-12-29 15:01:23 +00:00
Code Issues Projects Releases Wiki Activity

theme: Split out _solid() function

Browse Source 
The function creates a solid color image. Currently this is done with
linear-gradient().
This commit is contained in:
Benjamin Otte 2016-03-27 19:41:19 +02:00
parent de76139fea
commit f51b15808a
8 changed files with 75 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gtk/theme/Adwaita/_common.scss
View File

@ -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);
}
}
}

29
gtk/theme/Adwaita/_drawing.scss
View File

@ -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;

32
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -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; }

32
gtk/theme/Adwaita/gtk-contained.css
View File

@ -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; }

12
gtk/theme/HighContrast/_common.scss
View File

@ -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 {

11
gtk/theme/HighContrast/_drawing.scss
View File

@ -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);
}
}

2
gtk/theme/HighContrast/gtk-contained-inverse.css
View File

@ -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; }

2
gtk/theme/HighContrast/gtk-contained.css
View File

@ -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; }