Compare commits

...

3 Commits

Author SHA1 Message Date
Lapo Calamandrei
d1622ad5ef Adwaita: cleanup commented code 2014-10-07 13:43:54 +02:00
Lapo Calamandrei
2fa862590d Adwaita: change spinbutton button color on backdrop
Contextually dim the spinbutton button color a little bit.
2014-10-07 12:52:10 +02:00
Lapo Calamandrei
01536e7055 Adwaita: vertically linked entries
- vertically link buttons/entries removing the bottom border, this
  allows to use adiacent siblings to change the top border of the
  following linked item when needed (e.g. focused entry)
- add background-color to entry drawing mixin so it's possible to
  flatten the entry background just removing the background-image,
  since all the other linked entries but the first or the ones
  following a button need a flat background.
- avoid spinbutton style being overridden by linking.
- avoid using the box-shadow hack.
2014-10-07 11:57:29 +02:00
4 changed files with 270 additions and 341 deletions

View File

@@ -280,7 +280,7 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
&:backdrop { background-color: transparent; } &:backdrop { background-color: transparent; }
} }
.linked & { //FIXME: use same buttons linking logic and template .linked > & { //FIXME: use same buttons linking logic and template
border-radius: 0; border-radius: 0;
&:first-child { &:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
@@ -328,80 +328,56 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
&:backdrop { color: mix($backdrop_fg_color,$backdrop_base_color,80%); } &:backdrop { color: mix($backdrop_fg_color,$backdrop_base_color,80%); }
} }
.linked.vertical & { //FIXME comment stuff and make the whole thing smarter. }
@include entry(normal, $edge: none);
background-image: linear-gradient(to bottom, $base_color); // set flat background and dimmed top border
border-bottom-color: mix($borders_color, $base_color, 30%); .linked.vertical > .entry {
box-shadow: none; background-image: none;
@extend %linked_vertical; border-top-color: mix($borders_color, $base_color, 40%);
&:focus { &:focus { border-top-color: entry_focus_border(); }
border-color: entry_focus_border($selected_bg_color); &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 40%); }
box-shadow: entry_focus_glow($selected_bg_color), }
0 -1px 0 0 entry_focus_border($selected_bg_color);
@extend %linked_vertical; // add back normal entry background when it makes sense
} .linked.vertical > .button + .entry,
&:insensitive { .linked.vertical > GtkComboBox + .entry,
@include entry(insensitive, $edge: none); .linked.vertical > GtkComboBoxText + .entry,
border-bottom-color: mix($borders_color, $base_color, 30%); .linked.vertical > .entry:first-child {
@extend %linked_vertical; @include entry(normal, $edge:none);
&:backdrop { &:focus { @include entry(focus, $edge: none); }
@include entry(backdrop-insensitive, $edge: none); &:backdrop {
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); @include entry(backdrop, $edge: none);
@extend %linked_vertical; &:insensitive { @include entry(backdrop-insensitive, $edge: none); }
}
}
&:backdrop {
@include entry(backdrop, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical;
}
&:first-child {
@include entry(normal, $edge: none);
border-bottom-color: mix($borders_color, $base_color, 30%);
&:focus { @include entry(focus, $edge: none); }
&:insensitive {
@include entry(insensitive, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical:first-child;
&:backdrop {
@include entry(backdrop-insensitive, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
border-top-style: solid;
}
}
&:backdrop {
@include entry(backdrop, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical:first-child;
}
}
&:last-child {
@include entry(normal);
background-image: linear-gradient(to bottom, $base_color);
box-shadow: _widget_edge();
&:focus {
border-color: entry_focus_border($selected_bg_color);
box-shadow: entry_focus_glow($selected_bg_color),
0 -1px 0 0 entry_focus_border($selected_bg_color),
_widget_edge();
@extend %linked_vertical:last-child;
}
&:insensitive {
@include entry(insensitive);
@extend %linked_vertical:last-child;
&:backdrop {
@include entry(backdrop-insensitive);
@extend %linked_vertical:last-child;
}
}
&:backdrop {
@include entry(backdrop);
@extend %linked_vertical:last-child;
}
}
} }
} }
// top border of the subsequent linked element of the focused entry
// needs to be the color of focused entry border
.linked.vertical > .entry:focus + .entry,
.linked.vertical > .entry:focus + .button,
.linked.vertical > .entry:focus + GtkComboBo > .button ,
.linked.vertical > .entry:focus + GtkComboBoxText > .button {
border-top-color: entry_focus_border();
}
//remove shadows, adding back the one used for focus glow
.linked.vertical > .entry {
box-shadow: none;
&:focus { box-shadow: entry_focus_glow(); }
}
//remove shadows, but the widget hilight, adding back the one used for focus glow
.linked.vertical > .entry:last-child {
box-shadow: _widget_edge();
&:focus { box-shadow: entry_focus_glow(), _widget_edge(); }
}
//border removal and border radius fix
.linked.vertical > .entry,
.linked.vertical > .entry:focus,
.linked.vertical > .entry:insensitive,
.linked.vertical > .entry:backdrop,
.linked.vertical > .entry:backdrop:insensitive { @extend %linked_vertical; }
/*********** /***********
* Buttons * * Buttons *
***********/ ***********/
@@ -755,18 +731,18 @@ $_dot_color: if($variant=='light', $selected_bg_color,
} }
%linked_vertical_middle { %linked_vertical_middle {
border-left-style: solid; border-style: solid solid none solid;
border-top-style: none;
border-radius: 0; border-radius: 0;
} }
%linked_vertical{ %linked_vertical{
@extend %linked_vertical_middle; @extend %linked_vertical_middle;
&:first-child { &:first-child {
border-style: solid; @extend %linked_vertical_middle;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
&:last-child { &:last-child {
border-style: solid;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
} }
&:only-child { &:only-child {
@@ -856,7 +832,7 @@ GtkColorButton.button {
background-image: none; background-image: none;
border-style: none none none solid; border-style: none none none solid;
border-color: transparentize($borders_color,0.7); border-color: transparentize($borders_color,0.7);
color: mix($fg_color,$base_color,95%); color: mix($fg_color, $base_color,90%);
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
// padding-left: 6px; // padding-left: 6px;
@@ -874,6 +850,7 @@ GtkColorButton.button {
background-color: transparentize(black,0.9); background-color: transparentize(black,0.9);
} }
&:backdrop { &:backdrop {
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
border-color: transparentize($backdrop_borders_color,0.7); border-color: transparentize($backdrop_borders_color,0.7);
background-color: transparent; background-color: transparent;
} }
@@ -961,6 +938,9 @@ GtkColorButton.button {
* } */ * } */
} }
.linked.vertical > .spinbutton.entry { @extend .spinbutton; } // this avoids spinbutton buttons being
// overridden with linking
/************** /**************
* ComboBoxes * * ComboBoxes *
**************/ **************/

View File

@@ -19,12 +19,12 @@
// entries // entries
@function entry_focus_border($fc) { @function entry_focus_border($fc:$selected_bg_color) {
@if $variant == 'light' { @return $fc; } @if $variant == 'light' { @return $fc; }
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); } @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); }
} }
@function entry_focus_glow($fc) { @function entry_focus_glow($fc:$selected_bg_color) {
$_focus_glow_color: if($variant=='light', transparentize($fc,0.85), $_focus_glow_color: if($variant=='light', transparentize($fc,0.85),
transparentize($fc,0.3)); transparentize($fc,0.3));
@return inset 0 0 0 1px $_focus_glow_color; @return inset 0 0 0 1px $_focus_glow_color;
@@ -46,7 +46,7 @@
// possible $t values: // possible $t values:
// normal, focus, insensitive, backdrop, backdrop-insensitive; // normal, focus, insensitive, backdrop, backdrop-insensitive;
// //
background-color: transparent; background-color: $base_color;
background-image: entry_gradient($base_color); background-image: entry_gradient($base_color);
$_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1)); $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1));
$_entry_edge: if($edge == none, none, _widget_edge($edge)); $_entry_edge: if($edge == none, none, _widget_edge($edge));
@@ -74,6 +74,7 @@
} }
@if $t==insensitive { @if $t==insensitive {
color: $insensitive_fg_color; color: $insensitive_fg_color;
background-color: $insensitive_bg_color;
border-color: $borders_color; border-color: $borders_color;
background-image: linear-gradient(to bottom, $insensitive_bg_color); background-image: linear-gradient(to bottom, $insensitive_bg_color);
@include _shadows($_blank_inner_shadows, $_entry_edge); @include _shadows($_blank_inner_shadows, $_entry_edge);
@@ -81,12 +82,14 @@
} }
@if $t==backdrop { @if $t==backdrop {
color: $backdrop_fg_color; color: $backdrop_fg_color;
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $backdrop_base_color); background-image: linear-gradient(to bottom, $backdrop_base_color);
@include _shadows($_blank_inner_shadows, $_blank_edge); @include _shadows($_blank_inner_shadows, $_blank_edge);
} }
@if $t==backdrop-insensitive { @if $t==backdrop-insensitive {
color: $backdrop_insensitive_color; color: $backdrop_insensitive_color;
background-color: $insensitive_bg_color;
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $insensitive_bg_color); background-image: linear-gradient(to bottom, $insensitive_bg_color);
@include _shadows($_blank_inner_shadows, $_blank_edge); @include _shadows($_blank_inner_shadows, $_blank_edge);

View File

@@ -169,7 +169,7 @@ GtkTextView {
padding: 5px 8px 6px; padding: 5px 8px 6px;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-out; transition: all 200ms ease-out;
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f; border-color: #1c1f1f;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); } box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -179,35 +179,38 @@ GtkTextView {
padding-right: 0; } padding-right: 0; }
.entry.flat, .entry.flat:focus { .entry.flat, .entry.flat:focus {
padding: 2px; padding: 2px;
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f; border-color: #1c1f1f;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0); box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0);
border: none; border: none;
border-radius: 0; } border-radius: 0; }
.entry:focus { .entry:focus {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 1px rgba(238, 238, 236, 0.1); box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 1px rgba(238, 238, 236, 0.1);
border-color: #0f2b48; } border-color: #0f2b48; }
.entry:insensitive { .entry:insensitive {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #939695; color: #939695;
background-color: #323636;
border-color: #1c1f1f; border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636); background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0.1); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0.1); }
.entry:backdrop { .entry:backdrop {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9; color: #c9cbc9;
background-color: #2c2c2c;
border-color: #1e2222; border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c); background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); }
.entry:backdrop:insensitive { .entry:backdrop:insensitive {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #5d6767; color: #5d6767;
background-color: #323636;
border-color: #1e2222; border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636); background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); }
@@ -225,24 +228,24 @@ GtkTextView {
box-shadow: none; } box-shadow: none; }
.entry.progressbar:backdrop { .entry.progressbar:backdrop {
background-color: transparent; } background-color: transparent; }
.linked .entry { .linked > .entry {
border-radius: 0; } border-radius: 0; }
.linked .entry:first-child { .linked > .entry:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; } border-bottom-left-radius: 3px; }
.linked .entry:first-child:dir(rtl) { .linked > .entry:first-child:dir(rtl) {
border-right-style: none; } border-right-style: none; }
.linked .entry:last-child { .linked > .entry:last-child {
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-left-style: none; } border-left-style: none; }
.linked .entry:last-child:dir(rtl) { .linked > .entry:last-child:dir(rtl) {
border-left-style: solid; } border-left-style: solid; }
.entry.error { .entry.error {
color: #cc0000; color: #cc0000;
border-color: #cc0000; } border-color: #cc0000; }
.entry.error:focus { .entry.error:focus {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(204, 0, 0, 0.7), 0 1px rgba(238, 238, 236, 0.1); box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(204, 0, 0, 0.7), 0 1px rgba(238, 238, 236, 0.1);
border-color: #1a0000; } border-color: #1a0000; }
@@ -256,7 +259,7 @@ GtkTextView {
color: #f57900; color: #f57900;
border-color: #f57900; } border-color: #f57900; }
.entry.warning:focus { .entry.warning:focus {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(245, 121, 0, 0.7), 0 1px rgba(238, 238, 236, 0.1); box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(245, 121, 0, 0.7), 0 1px rgba(238, 238, 236, 0.1);
border-color: #432100; } border-color: #432100; }
@@ -274,108 +277,69 @@ GtkTextView {
color: #215d9c; } color: #215d9c; }
.entry.image:backdrop { .entry.image:backdrop {
color: #a9aba9; } color: #a9aba9; }
.linked.vertical .entry {
background-color: transparent; .linked.vertical > .entry {
background-image: none;
border-top-color: #232525; }
.linked.vertical > .entry:focus {
border-top-color: #0f2b48; }
.linked.vertical > .entry:backdrop {
border-top-color: #262828; }
.linked.vertical > .button + .entry,
.linked.vertical > GtkComboBox + .entry,
.linked.vertical > GtkComboBoxText + .entry,
.linked.vertical > .entry:first-child {
background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0); }
.linked.vertical > .button + .entry:focus,
.linked.vertical > GtkComboBox + .entry:focus,
.linked.vertical > GtkComboBoxText + .entry:focus,
.linked.vertical > .entry:first-child:focus {
background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f; box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0.7);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0); border-color: #0f2b48; }
background-image: linear-gradient(to bottom, #292929); .linked.vertical > .button + .entry:backdrop,
border-bottom-color: #252626; .linked.vertical > GtkComboBox + .entry:backdrop,
box-shadow: none; } .linked.vertical > GtkComboBoxText + .entry:backdrop,
.linked.vertical .entry:focus { .linked.vertical > .entry:first-child:backdrop {
border-color: #0f2b48; background-color: #292929;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 -1px 0 0 #0f2b48; } background-image: linear-gradient(to bottom, #212121, #292929 90%);
.linked.vertical .entry:insensitive { color: #c9cbc9;
background-color: transparent; background-color: #2c2c2c;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent; }
.linked.vertical > .button + .entry:backdrop:insensitive,
.linked.vertical > GtkComboBox + .entry:backdrop:insensitive,
.linked.vertical > GtkComboBoxText + .entry:backdrop:insensitive,
.linked.vertical > .entry:first-child:backdrop:insensitive {
background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #939695; color: #5d6767;
border-color: #1c1f1f; background-color: #323636;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #252626; }
.linked.vertical .entry:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #272929; }
.linked.vertical .entry:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9;
border-color: #1e2222; border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c); background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent; box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent; }
border-bottom-color: #272929; }
.linked.vertical .entry:first-child { .linked.vertical > .entry:focus + .entry,
background-color: transparent; .linked.vertical > .entry:focus + .button,
background-image: linear-gradient(to bottom, #212121, #292929 90%); .linked.vertical > .entry:focus + GtkComboBo > .button,
border-color: #1c1f1f; .linked.vertical > .entry:focus + GtkComboBoxText > .button {
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0); border-top-color: #0f2b48; }
border-bottom-color: #252626; }
.linked.vertical .entry:first-child:focus { .linked.vertical > .entry {
background-color: transparent; box-shadow: none; }
background-image: linear-gradient(to bottom, #212121, #292929 90%); .linked.vertical > .entry:focus {
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0.7); box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0.7); }
border-color: #0f2b48; }
.linked.vertical .entry:first-child:insensitive { .linked.vertical > .entry:last-child {
background-color: transparent; box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
background-image: linear-gradient(to bottom, #212121, #292929 90%); .linked.vertical > .entry:last-child:focus {
color: #939695; box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 1px rgba(238, 238, 236, 0.1); }
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #272929; }
.linked.vertical .entry:first-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #272929;
border-top-style: solid; }
.linked.vertical .entry:first-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #272929; }
.linked.vertical .entry:last-child {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1);
background-image: linear-gradient(to bottom, #292929);
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
.linked.vertical .entry:last-child:focus {
border-color: #0f2b48;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0.7), 0 -1px 0 0 #0f2b48, 0 1px rgba(238, 238, 236, 0.1); }
.linked.vertical .entry:last-child:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0.1); }
.linked.vertical .entry:last-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); }
.linked.vertical .entry:last-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); }
/*********** /***********
* Buttons * * Buttons *
@@ -1186,20 +1150,27 @@ GtkCalendar.header .inline-toolbar GtkToolButton:backdrop:only-child > .button.t
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
.linked.vertical .entry, .linked.vertical .entry:focus, .linked.vertical .entry:insensitive, .linked.vertical .entry:insensitive:backdrop, .linked.vertical .entry:backdrop, .linked.vertical .button, .linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical .button:checked, .linked.vertical .button:backdrop, .linked.vertical > GtkComboBoxText > .button, .linked.vertical > .entry,
.linked.vertical > .entry:focus,
.linked.vertical > .entry:insensitive,
.linked.vertical > .entry:backdrop,
.linked.vertical > .entry:backdrop:insensitive, .linked.vertical .button, .linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical .button:checked, .linked.vertical .button:backdrop, .linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button, .linked.vertical > GtkComboBoxText > .button,
.linked.vertical > GtkComboBox > .button { .linked.vertical > GtkComboBox > .button {
border-left-style: solid; border-style: solid solid none solid;
border-top-style: none;
border-radius: 0; } border-radius: 0; }
.linked.vertical .entry:first-child, .linked.vertical .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .button, .linked.vertical > .entry:first-child,
.linked.vertical > .entry:first-child:backdrop:insensitive, .linked.vertical .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button { .linked.vertical > GtkComboBox:first-child > .button {
border-style: solid;
border-radius: 3px 3px 0 0; } border-radius: 3px 3px 0 0; }
.linked.vertical .entry:last-child, .linked.vertical .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .button, .linked.vertical > .entry:last-child,
.linked.vertical > .entry:last-child:backdrop:insensitive, .linked.vertical .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .button,
.linked.vertical > GtkComboBox:last-child > .button { .linked.vertical > GtkComboBox:last-child > .button {
border-style: solid;
border-radius: 0 0 3px 3px; } border-radius: 0 0 3px 3px; }
.linked.vertical .entry:only-child, .linked.vertical .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .button, .linked.vertical > .entry:only-child,
.linked.vertical > .entry:only-child:backdrop:insensitive, .linked.vertical .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button { .linked.vertical > GtkComboBox:only-child > .button {
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
@@ -1342,7 +1313,7 @@ GtkCalendar.header .button.titlebutton:visited {
/***************** /*****************
* GtkSpinButton * * GtkSpinButton *
*****************/ *****************/
.spinbutton { .spinbutton, .linked.vertical > .spinbutton.entry {
/* This is to fix spinbuttons in entries, but I feel like hiding code issues /* This is to fix spinbuttons in entries, but I feel like hiding code issues
* hence it's commented atm. * hence it's commented atm.
* GtkTreeView & { * GtkTreeView & {
@@ -1354,7 +1325,7 @@ GtkCalendar.header .button.titlebutton:visited {
* box-shadow: none; * box-shadow: none;
* } * }
* } */ } * } */ }
.spinbutton .button, .spinbutton .header-bar .button.titlebutton, .header-bar .spinbutton .button.titlebutton, .spinbutton .button, .linked.vertical > .spinbutton.entry .button, .spinbutton .header-bar .button.titlebutton, .header-bar .spinbutton .button.titlebutton,
.spinbutton .titlebar .button.titlebutton, .spinbutton .titlebar .button.titlebutton,
.titlebar .spinbutton .button.titlebutton, .titlebar .spinbutton .button.titlebutton,
.spinbutton GtkCalendar.header .button.titlebutton, .spinbutton GtkCalendar.header .button.titlebutton,
@@ -1362,20 +1333,21 @@ GtkCalendar.header .button.titlebutton:visited {
background-image: none; background-image: none;
border-style: none none none solid; border-style: none none none solid;
border-color: rgba(28, 31, 31, 0.3); border-color: rgba(28, 31, 31, 0.3);
color: #e4e4e2; color: #dadad8;
border-radius: 0; border-radius: 0;
box-shadow: none; } box-shadow: none; }
.spinbutton .button:dir(rtl) { .spinbutton .button:dir(rtl), .linked.vertical > .spinbutton.entry .button:dir(rtl) {
border-style: none solid none none; } border-style: none solid none none; }
.spinbutton .button:hover { .spinbutton .button:hover, .linked.vertical > .spinbutton.entry .button:hover {
color: #eeeeec; color: #eeeeec;
background-color: rgba(238, 238, 236, 0.05); } background-color: rgba(238, 238, 236, 0.05); }
.spinbutton .button:insensitive { .spinbutton .button:insensitive, .linked.vertical > .spinbutton.entry .button:insensitive {
color: rgba(147, 150, 149, 0.3); } color: rgba(147, 150, 149, 0.3); }
.spinbutton .button:active { .spinbutton .button:active, .linked.vertical > .spinbutton.entry .button:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.1); } background-color: rgba(0, 0, 0, 0.1); }
.spinbutton .button:backdrop { .spinbutton .button:backdrop, .linked.vertical > .spinbutton.entry .button:backdrop {
color: #b9bbb9;
border-color: rgba(30, 34, 34, 0.3); border-color: rgba(30, 34, 34, 0.3);
background-color: transparent; } background-color: transparent; }
.spinbutton .button:backdrop:insensitive { .spinbutton .button:backdrop:insensitive {
@@ -1384,7 +1356,7 @@ GtkCalendar.header .button.titlebutton:visited {
border-style: none none none solid; } border-style: none none none solid; }
.spinbutton .button:backdrop:insensitive:dir(rtl) { .spinbutton .button:backdrop:insensitive:dir(rtl) {
border-style: none solid none none; } border-style: none solid none none; }
.spinbutton.vertical .button, .spinbutton.vertical:dir(rtl) .button { .spinbutton.vertical .button, .linked.vertical > .vertical.spinbutton.entry .button, .spinbutton.vertical:dir(rtl) .button {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; } padding-bottom: 8px; }
.spinbutton.vertical .button:first-child, .spinbutton.vertical:dir(rtl) .button:first-child { .spinbutton.vertical .button:first-child, .spinbutton.vertical:dir(rtl) .button:first-child {
@@ -1476,7 +1448,7 @@ GtkCalendar.header .button.titlebutton:visited {
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
.spinbutton.vertical .button:backdrop:insensitive > .label, .spinbutton.vertical:dir(rtl) .button:backdrop:insensitive > .label { .spinbutton.vertical .button:backdrop:insensitive > .label, .spinbutton.vertical:dir(rtl) .button:backdrop:insensitive > .label {
color: inherit; } color: inherit; }
.spinbutton.vertical.entry, .spinbutton.vertical:dir(rtl).entry { .spinbutton.vertical.entry, .linked.vertical > .vertical.entry.spinbutton, .spinbutton.vertical:dir(rtl).entry {
border-radius: 0; border-radius: 0;
padding-left: 3px; padding-left: 3px;
padding-right: 3px; } padding-right: 3px; }
@@ -3426,14 +3398,15 @@ GtkProgressBar {
border: 1px solid; border: 1px solid;
padding: 2px; padding: 2px;
border-radius: 3px; border-radius: 3px;
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
border-color: #1c1f1f; border-color: #1c1f1f;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); } box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1); }
.level-bar.trough:backdrop { .level-bar.trough:backdrop {
background-color: transparent; background-color: #292929;
background-image: linear-gradient(to bottom, #212121, #292929 90%); background-image: linear-gradient(to bottom, #212121, #292929 90%);
color: #c9cbc9; color: #c9cbc9;
background-color: #2c2c2c;
border-color: #1e2222; border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c); background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); }

View File

@@ -169,7 +169,7 @@ GtkTextView {
padding: 5px 8px 6px; padding: 5px 8px 6px;
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-out; transition: all 200ms ease-out;
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
border-color: #a1a1a1; border-color: #a1a1a1;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; } box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; }
@@ -179,35 +179,38 @@ GtkTextView {
padding-right: 0; } padding-right: 0; }
.entry.flat, .entry.flat:focus { .entry.flat, .entry.flat:focus {
padding: 2px; padding: 2px;
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
border-color: #a1a1a1; border-color: #a1a1a1;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0); box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0);
border: none; border: none;
border-radius: 0; } border-radius: 0; }
.entry:focus { .entry:focus {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 1px white; box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 1px white;
border-color: #4a90d9; } border-color: #4a90d9; }
.entry:insensitive { .entry:insensitive {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #8d9091; color: #8d9091;
background-color: #f4f4f4;
border-color: #a1a1a1; border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #f4f4f4); background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px white; } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px white; }
.entry:backdrop { .entry:backdrop {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #54595a; color: #54595a;
background-color: #fcfcfc;
border-color: #a8a8a8; border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc); background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); }
.entry:backdrop:insensitive { .entry:backdrop:insensitive {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #c7c7c7; color: #c7c7c7;
background-color: #f4f4f4;
border-color: #a8a8a8; border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4); background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); }
@@ -225,24 +228,24 @@ GtkTextView {
box-shadow: none; } box-shadow: none; }
.entry.progressbar:backdrop { .entry.progressbar:backdrop {
background-color: transparent; } background-color: transparent; }
.linked .entry { .linked > .entry {
border-radius: 0; } border-radius: 0; }
.linked .entry:first-child { .linked > .entry:first-child {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-bottom-left-radius: 3px; } border-bottom-left-radius: 3px; }
.linked .entry:first-child:dir(rtl) { .linked > .entry:first-child:dir(rtl) {
border-right-style: none; } border-right-style: none; }
.linked .entry:last-child { .linked > .entry:last-child {
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-left-style: none; } border-left-style: none; }
.linked .entry:last-child:dir(rtl) { .linked > .entry:last-child:dir(rtl) {
border-left-style: solid; } border-left-style: solid; }
.entry.error { .entry.error {
color: #cc0000; color: #cc0000;
border-color: #cc0000; } border-color: #cc0000; }
.entry.error:focus { .entry.error:focus {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(204, 0, 0, 0.15), 0 1px white; box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(204, 0, 0, 0.15), 0 1px white;
border-color: #cc0000; } border-color: #cc0000; }
@@ -252,7 +255,7 @@ GtkTextView {
color: #f57900; color: #f57900;
border-color: #f57900; } border-color: #f57900; }
.entry.warning:focus { .entry.warning:focus {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(245, 121, 0, 0.15), 0 1px white; box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(245, 121, 0, 0.15), 0 1px white;
border-color: #f57900; } border-color: #f57900; }
@@ -266,108 +269,69 @@ GtkTextView {
color: #4a90d9; } color: #4a90d9; }
.entry.image:backdrop { .entry.image:backdrop {
color: #75797a; } color: #75797a; }
.linked.vertical .entry {
background-color: transparent; .linked.vertical > .entry {
background-image: none;
border-top-color: #d9d9d9; }
.linked.vertical > .entry:focus {
border-top-color: #4a90d9; }
.linked.vertical > .entry:backdrop {
border-top-color: #dadada; }
.linked.vertical > .button + .entry,
.linked.vertical > GtkComboBox + .entry,
.linked.vertical > GtkComboBoxText + .entry,
.linked.vertical > .entry:first-child {
background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
border-color: #a1a1a1;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0); }
.linked.vertical > .button + .entry:focus,
.linked.vertical > GtkComboBox + .entry:focus,
.linked.vertical > GtkComboBoxText + .entry:focus,
.linked.vertical > .entry:first-child:focus {
background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
border-color: #a1a1a1; box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0.15);
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0); border-color: #4a90d9; }
background-image: linear-gradient(to bottom, #ffffff); .linked.vertical > .button + .entry:backdrop,
border-bottom-color: #e2e2e2; .linked.vertical > GtkComboBox + .entry:backdrop,
box-shadow: none; } .linked.vertical > GtkComboBoxText + .entry:backdrop,
.linked.vertical .entry:focus { .linked.vertical > .entry:first-child:backdrop {
border-color: #4a90d9; background-color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 -1px 0 0 #4a90d9; } background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
.linked.vertical .entry:insensitive { color: #54595a;
background-color: transparent; background-color: #fcfcfc;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent; }
.linked.vertical > .button + .entry:backdrop:insensitive,
.linked.vertical > GtkComboBox + .entry:backdrop:insensitive,
.linked.vertical > GtkComboBoxText + .entry:backdrop:insensitive,
.linked.vertical > .entry:first-child:backdrop:insensitive {
background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #8d9091; color: #c7c7c7;
border-color: #a1a1a1; background-color: #f4f4f4;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #e2e2e2; }
.linked.vertical .entry:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #e2e2e2; }
.linked.vertical .entry:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #54595a;
border-color: #a8a8a8; border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc); background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent; box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent; }
border-bottom-color: #e2e2e2; }
.linked.vertical .entry:first-child { .linked.vertical > .entry:focus + .entry,
background-color: transparent; .linked.vertical > .entry:focus + .button,
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); .linked.vertical > .entry:focus + GtkComboBo > .button,
border-color: #a1a1a1; .linked.vertical > .entry:focus + GtkComboBoxText > .button {
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0); border-top-color: #4a90d9; }
border-bottom-color: #e2e2e2; }
.linked.vertical .entry:first-child:focus { .linked.vertical > .entry {
background-color: transparent; box-shadow: none; }
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); .linked.vertical > .entry:focus {
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0.15); box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15); }
border-color: #4a90d9; }
.linked.vertical .entry:first-child:insensitive { .linked.vertical > .entry:last-child {
background-color: transparent; box-shadow: 0 1px white; }
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); .linked.vertical > .entry:last-child:focus {
color: #8d9091; box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 1px white; }
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #e2e2e2; }
.linked.vertical .entry:first-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #e2e2e2;
border-top-style: solid; }
.linked.vertical .entry:first-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #54595a;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent;
border-bottom-color: #e2e2e2; }
.linked.vertical .entry:last-child {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
border-color: #a1a1a1;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white;
background-image: linear-gradient(to bottom, #ffffff);
box-shadow: 0 1px white; }
.linked.vertical .entry:last-child:focus {
border-color: #4a90d9;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15), 0 -1px 0 0 #4a90d9, 0 1px white; }
.linked.vertical .entry:last-child:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px white; }
.linked.vertical .entry:last-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); }
.linked.vertical .entry:last-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #54595a;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); }
/*********** /***********
* Buttons * * Buttons *
@@ -1178,20 +1142,27 @@ GtkCalendar.header .inline-toolbar GtkToolButton:backdrop:only-child > .button.t
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
.linked.vertical .entry, .linked.vertical .entry:focus, .linked.vertical .entry:insensitive, .linked.vertical .entry:insensitive:backdrop, .linked.vertical .entry:backdrop, .linked.vertical .button, .linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical .button:checked, .linked.vertical .button:backdrop, .linked.vertical > GtkComboBoxText > .button, .linked.vertical > .entry,
.linked.vertical > .entry:focus,
.linked.vertical > .entry:insensitive,
.linked.vertical > .entry:backdrop,
.linked.vertical > .entry:backdrop:insensitive, .linked.vertical .button, .linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical .button:checked, .linked.vertical .button:backdrop, .linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button, .linked.vertical > GtkComboBoxText > .button,
.linked.vertical > GtkComboBox > .button { .linked.vertical > GtkComboBox > .button {
border-left-style: solid; border-style: solid solid none solid;
border-top-style: none;
border-radius: 0; } border-radius: 0; }
.linked.vertical .entry:first-child, .linked.vertical .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .button, .linked.vertical > .entry:first-child,
.linked.vertical > .entry:first-child:backdrop:insensitive, .linked.vertical .button:first-child, .linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button { .linked.vertical > GtkComboBox:first-child > .button {
border-style: solid;
border-radius: 3px 3px 0 0; } border-radius: 3px 3px 0 0; }
.linked.vertical .entry:last-child, .linked.vertical .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .button, .linked.vertical > .entry:last-child,
.linked.vertical > .entry:last-child:backdrop:insensitive, .linked.vertical .button:last-child, .linked.vertical > GtkComboBoxText:last-child > .button,
.linked.vertical > GtkComboBox:last-child > .button { .linked.vertical > GtkComboBox:last-child > .button {
border-style: solid;
border-radius: 0 0 3px 3px; } border-radius: 0 0 3px 3px; }
.linked.vertical .entry:only-child, .linked.vertical .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .button, .linked.vertical > .entry:only-child,
.linked.vertical > .entry:only-child:backdrop:insensitive, .linked.vertical .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button { .linked.vertical > GtkComboBox:only-child > .button {
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
@@ -1334,7 +1305,7 @@ GtkCalendar.header .button.titlebutton:visited {
/***************** /*****************
* GtkSpinButton * * GtkSpinButton *
*****************/ *****************/
.spinbutton { .spinbutton, .linked.vertical > .spinbutton.entry {
/* This is to fix spinbuttons in entries, but I feel like hiding code issues /* This is to fix spinbuttons in entries, but I feel like hiding code issues
* hence it's commented atm. * hence it's commented atm.
* GtkTreeView & { * GtkTreeView & {
@@ -1346,7 +1317,7 @@ GtkCalendar.header .button.titlebutton:visited {
* box-shadow: none; * box-shadow: none;
* } * }
* } */ } * } */ }
.spinbutton .button, .spinbutton .header-bar .button.titlebutton, .header-bar .spinbutton .button.titlebutton, .spinbutton .button, .linked.vertical > .spinbutton.entry .button, .spinbutton .header-bar .button.titlebutton, .header-bar .spinbutton .button.titlebutton,
.spinbutton .titlebar .button.titlebutton, .spinbutton .titlebar .button.titlebutton,
.titlebar .spinbutton .button.titlebutton, .titlebar .spinbutton .button.titlebutton,
.spinbutton GtkCalendar.header .button.titlebutton, .spinbutton GtkCalendar.header .button.titlebutton,
@@ -1354,20 +1325,21 @@ GtkCalendar.header .button.titlebutton:visited {
background-image: none; background-image: none;
border-style: none none none solid; border-style: none none none solid;
border-color: rgba(161, 161, 161, 0.3); border-color: rgba(161, 161, 161, 0.3);
color: #383e40; color: #42484a;
border-radius: 0; border-radius: 0;
box-shadow: none; } box-shadow: none; }
.spinbutton .button:dir(rtl) { .spinbutton .button:dir(rtl), .linked.vertical > .spinbutton.entry .button:dir(rtl) {
border-style: none solid none none; } border-style: none solid none none; }
.spinbutton .button:hover { .spinbutton .button:hover, .linked.vertical > .spinbutton.entry .button:hover {
color: #2e3436; color: #2e3436;
background-color: rgba(46, 52, 54, 0.05); } background-color: rgba(46, 52, 54, 0.05); }
.spinbutton .button:insensitive { .spinbutton .button:insensitive, .linked.vertical > .spinbutton.entry .button:insensitive {
color: rgba(141, 144, 145, 0.3); } color: rgba(141, 144, 145, 0.3); }
.spinbutton .button:active { .spinbutton .button:active, .linked.vertical > .spinbutton.entry .button:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.1); } background-color: rgba(0, 0, 0, 0.1); }
.spinbutton .button:backdrop { .spinbutton .button:backdrop, .linked.vertical > .spinbutton.entry .button:backdrop {
color: #64696a;
border-color: rgba(168, 168, 168, 0.3); border-color: rgba(168, 168, 168, 0.3);
background-color: transparent; } background-color: transparent; }
.spinbutton .button:backdrop:insensitive { .spinbutton .button:backdrop:insensitive {
@@ -1376,7 +1348,7 @@ GtkCalendar.header .button.titlebutton:visited {
border-style: none none none solid; } border-style: none none none solid; }
.spinbutton .button:backdrop:insensitive:dir(rtl) { .spinbutton .button:backdrop:insensitive:dir(rtl) {
border-style: none solid none none; } border-style: none solid none none; }
.spinbutton.vertical .button, .spinbutton.vertical:dir(rtl) .button { .spinbutton.vertical .button, .linked.vertical > .vertical.spinbutton.entry .button, .spinbutton.vertical:dir(rtl) .button {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; } padding-bottom: 8px; }
.spinbutton.vertical .button:first-child, .spinbutton.vertical:dir(rtl) .button:first-child { .spinbutton.vertical .button:first-child, .spinbutton.vertical:dir(rtl) .button:first-child {
@@ -1468,7 +1440,7 @@ GtkCalendar.header .button.titlebutton:visited {
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
.spinbutton.vertical .button:backdrop:insensitive > .label, .spinbutton.vertical:dir(rtl) .button:backdrop:insensitive > .label { .spinbutton.vertical .button:backdrop:insensitive > .label, .spinbutton.vertical:dir(rtl) .button:backdrop:insensitive > .label {
color: inherit; } color: inherit; }
.spinbutton.vertical.entry, .spinbutton.vertical:dir(rtl).entry { .spinbutton.vertical.entry, .linked.vertical > .vertical.entry.spinbutton, .spinbutton.vertical:dir(rtl).entry {
border-radius: 0; border-radius: 0;
padding-left: 3px; padding-left: 3px;
padding-right: 3px; } padding-right: 3px; }
@@ -3579,14 +3551,15 @@ GtkProgressBar {
border: 1px solid; border: 1px solid;
padding: 2px; padding: 2px;
border-radius: 3px; border-radius: 3px;
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
border-color: #a1a1a1; border-color: #a1a1a1;
box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; } box-shadow: inset 0 3px rgba(0, 0, 0, 0.02), inset 0 2px rgba(0, 0, 0, 0.03), inset 0 1px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white; }
.level-bar.trough:backdrop { .level-bar.trough:backdrop {
background-color: transparent; background-color: #ffffff;
background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
color: #54595a; color: #54595a;
background-color: #fcfcfc;
border-color: #a8a8a8; border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #fcfcfc); background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); } box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); }