callisto-debian/gtk3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HC: clean up borders for buttons & entries

Browse Source 
https://bugzilla.gnome.org/show_bug.cgi?id=740860
This commit is contained in:
Jakub Steiner 2014-12-01 19:06:02 +01:00
parent 3eaaf12c04
commit c1c68b409c
3 changed files with 238 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,7 +185,7 @@ GtkLabel {
@include entry(normal); @include entry(normal);
&.flat, &.flat:focus { &.flat, &.flat:focus {
padding: 2px; padding: 2px;
@include entry(normal, $noedge:true); @include entry(normal, $edge: none);
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
@ -280,8 +280,7 @@ GtkLabel {
&:focus { &:focus {
border-color: entry_focus_border($selected_bg_color); border-color: entry_focus_border($selected_bg_color);
box-shadow: entry_focus_glow($selected_bg_color), box-shadow: entry_focus_glow($selected_bg_color),
0 -1px 0 0 entry_focus_border($selected_bg_color), 0 -1px 0 0 entry_focus_border($selected_bg_color);
_widget_edge();
@extend %linked_vertical:last-child; @extend %linked_vertical:last-child;
} }
&:insensitive { &:insensitive {
@ -320,6 +319,25 @@ GtkLabel {
/*********** /***********
* Buttons * * Buttons *
***********/ ***********/
// stuff for .needs-attention
$_dot_color: $selected_bg_color;
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.01,
to($_dot_color),
to(transparent));
}
to {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($selected_bg_color),
to(transparent));
}
}
.button { .button {
border-radius: 3px; border-radius: 3px;
@ -439,12 +457,12 @@ GtkLabel {
// should really be reprecated... // should really be reprecated...
.inline-toolbar GtkToolButton > .button { // redefining the button look is .inline-toolbar GtkToolButton > .button { // redefining the button look is
// needed since those are flat... // needed since those are flat...
@include button(normal, $noedge: true); // the box-shadow outset doesn't work @include button(normal, $edge: none); // the box-shadow outset doesn't work
// in this case, hence $noedge // in this case, hence $edge: none
&:hover { @include button(hover, $noedge: true); } &:hover { @include button(hover, $edge: none); }
&:active { @include button(active, $noedge:true); } &:active { @include button(active, $edge: none); }
&:insensitive { @include button(insensitive, $noedge:true); } &:insensitive { @include button(insensitive, $edge: none); }
&:insensitive:active { @include button(insensitive-active, $noedge:true); } &:insensitive:active { @include button(insensitive-active, $edge:none); }
&:backdrop { @include button(backdrop); }; &:backdrop { @include button(backdrop); };
&:backdrop:active { @include button(backdrop-active); } &:backdrop:active { @include button(backdrop-active); }
&:backdrop:insensitive { @include button(backdrop-insensitive); } &:backdrop:insensitive { @include button(backdrop-insensitive); }
@ -475,6 +493,29 @@ GtkLabel {
} }
%needs_attention {
animation: needs_attention 150ms ease-in;
$_dot_shadow: $fg_color;
$_dot_shadow_r: 0.5;
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($_dot_color),
to(transparent)),
-gtk-gradient(radial,
center center, 0,
center center, $_dot_shadow_r,
to($_dot_shadow),
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px;
&:backdrop { background-size: 6px 6px, 0 0;}
&:dir(rtl) {
background-position: left 3px, left 4px;
}
}
%linked_middle { %linked_middle {
border-radius: 0; border-radius: 0;
border-left-style: none; border-left-style: none;
@ -616,18 +657,18 @@ GtkColorButton.button { padding: 4px; } // Uniform padding on the
.button { .button {
&:first-child { &:first-child {
@extend %top_button; @extend %top_button;
@include button(normal, $noedge: true); @include button(normal, $edge: none);
&:active { &:active {
@extend %top_button; @extend %top_button;
@include button(active, $noedge: true); @include button(active, $edge: none);
} }
&:hover { &:hover {
@extend %top_button; @extend %top_button;
@include button(hover, $noedge: true); @include button(hover, $edge: none);
} }
&:insensitive { &:insensitive {
@extend %top_button; @extend %top_button;
@include button(insensitive, $noedge: true); @include button(insensitive, $edge: none);
} }
&:backdrop { &:backdrop {
@extend %top_button; @extend %top_button;
@ -854,22 +895,22 @@ GtkComboBox {
box-shadow: inset 0 -1px mix($borders_color,$bg_color, 30%), //bottom shade box-shadow: inset 0 -1px mix($borders_color,$bg_color, 30%), //bottom shade
inset 0 1px mix($borders_edge,$selected_bg_color, 50%); //top highlight inset 0 1px mix($borders_edge,$selected_bg_color, 50%); //top highlight
.button { .button {
@include button(normal, $selected_bg_color, $selected_fg_color, noedge); @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none);
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, noedge); } &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); }
&:active { @include button(active, $selected_bg_color, $selected_fg_color, noedge); } &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); }
&:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, noedge); } &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
&:backdrop { &:backdrop {
@include button(backdrop, $selected_bg_color, $selected_fg_color, noedge); @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none);
border-color: darken($selected_bg_color, 15%); border-color: darken($selected_bg_color, 15%);
} }
&:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, noedge); } &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
&.suggested-action { &.suggested-action {
@include button($t:normal, $noedge:true); @include button($t:normal, $edge: none);
&:hover { @include button($t:hover,$noedge:true); } &:hover { @include button($t:hover,$edge: none); }
&:active { @include button($t:active, $noedge:true); } &:active { @include button($t:active, $edge: none); }
&:insensitive { @include button($t:insensitive, $noedge:true); } &:insensitive { @include button($t:insensitive, $edge: none); }
&:backdrop { @include button($t:backdrop, $noedge:true); } &:backdrop { @include button($t:backdrop, $edge: none); }
&:backdrop:insensitive { @include button($t:backdrop-insensitive, $noedge:true); } &:backdrop:insensitive { @include button($t:backdrop-insensitive, $edge: none); }
} }
} }
.selection-menu { .selection-menu {
@ -1278,12 +1319,12 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
color: transparentize($fg_color,0.7); color: transparentize($fg_color,0.7);
&:hover { &:hover {
color: $fg_color; color: $fg_color;
@include button(hover, $noedge: true); @include button(hover, $edge: none);
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
} }
&:active { &:active {
@include button(active, $noedge: true); @include button(active, $edge: none);
} }
&:backdrop { &:backdrop {
color: transparentize($backdrop_fg_color,0.7); color: transparentize($backdrop_fg_color,0.7);
@ -1371,14 +1412,12 @@ GtkSwitch {
color: white; color: white;
border-color: $selected_borders_color; border-color: $selected_borders_color;
background-color: $selected_bg_color; background-color: $selected_bg_color;
box-shadow: $widget_edge;
text-shadow: 0 0 2px white; text-shadow: 0 0 2px white;
} }
&:insensitive { &:insensitive {
color: $insensitive_fg_color; color: $insensitive_fg_color;
border-color: $borders_color; border-color: $borders_color;
background-color: $insensitive_bg_color; background-color: $insensitive_bg_color;
box-shadow: $widget_edge;
text-shadow: none; text-shadow: none;
} }
&:backdrop { &:backdrop {
@ -1401,18 +1440,18 @@ GtkSwitch {
} }
&.slider { &.slider {
border-radius: 3px; border-radius: 3px;
@include button(normal, $noedge: true); @include button(normal, $edge: none);
box-shadow: inset 0 1px white, box-shadow: inset 0 1px white,
inset 0 -2px transparentize($bg_color,0.4), inset 0 -2px transparentize($bg_color,0.4),
inset 0 -1px mix($bg_color,$borders_color,50%); inset 0 -1px mix($bg_color,$borders_color,50%);
&:hover { &:hover {
@include button(hover, $noedge: true); @include button(hover, $edge: none);
box-shadow: inset 0 1px white, box-shadow: inset 0 1px white,
inset 0 -2px transparentize($bg_color,0.4), inset 0 -2px transparentize($bg_color,0.4),
inset 0 -1px mix($bg_color,$borders_color,50%); inset 0 -1px mix($bg_color,$borders_color,50%);
} }
&:active { border: 1px solid $selected_borders_color; } &:active { border: 1px solid $selected_borders_color; }
&:insensitive { @include button(insensitive, $noedge: true); } &:insensitive { @include button(insensitive, $edge: none); }
&:backdrop { @include button(backdrop); &:backdrop { @include button(backdrop);
&:active{ border-color: $selected_bg_color; } &:active{ border-color: $selected_bg_color; }
&:insensitive { &:insensitive {
@ -1487,14 +1526,14 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
} }
&.slider { &.slider {
//FIXME: better gradient on the slider and hover state //FIXME: better gradient on the slider and hover state
@include button(normal, $noedge: true); @include button(normal, $edge: none);
border-radius: 50%; border-radius: 50%;
border-color: darken($borders_color,3%); border-color: darken($borders_color,3%);
box-shadow: inset 0 1px white, box-shadow: inset 0 1px white,
inset 0 #{-2px} $bg_color, inset 0 #{-2px} $bg_color,
inset 0 #{-1px} mix($bg_color,$borders_color,50%); inset 0 #{-1px} mix($bg_color,$borders_color,50%);
&:hover { &:hover {
@include button(hover, $noedge: true); @include button(hover, $edge: none);
border-color: darken($borders_color,3%); border-color: darken($borders_color,3%);
border-radius: 50%; // needed for double marks scales border-radius: 50%; // needed for double marks scales
box-shadow: inset 0 1px white, box-shadow: inset 0 1px white,
@ -1526,12 +1565,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border-radius: 3px; border-radius: 3px;
border-color: $borders_color; border-color: $borders_color;
background-color: mix($bg_color,$borders_color,60%); background-color: mix($bg_color,$borders_color,60%);
box-shadow: inset 1px 1px transparentize(black, 0.9), box-shadow: inset 1px 1px transparentize(black, 0.9);
$widget_edge;
&.highlight { &.highlight {
border-color: $selected_borders_color; border-color: $selected_borders_color;
background-color: $selected_bg_color; background-color: $selected_bg_color;
box-shadow: $widget_edge;
&:backdrop { &:backdrop {
border-color: $selected_bg_color; border-color: $selected_bg_color;
background-color: $selected_bg_color; background-color: $selected_bg_color;
@ -1541,7 +1578,6 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
&:insensitive, &.hilight:insensitive { &:insensitive, &.hilight:insensitive {
border-color: $insensitive_borders_color; border-color: $insensitive_borders_color;
background-color: $insensitive_bg_color; background-color: $insensitive_bg_color;
box-shadow: $widget_edge;
} }
&:backdrop { &:backdrop {
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;
@ -1622,8 +1658,7 @@ GtkProgressBar.trough {
border-radius: 3px; border-radius: 3px;
border-color: $borders_color; border-color: $borders_color;
background-color: mix($borders_color,$bg_color, 35%); background-color: mix($borders_color,$bg_color, 35%);
box-shadow: inset 1px 1px transparentize(black, 0.9), box-shadow: inset 1px 1px transparentize(black, 0.9);
$widget_edge;
&:backdrop{ &:backdrop{
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
@ -1731,7 +1766,7 @@ GtkScrolledWindow {
.separator { .separator {
// always disable separators // always disable separators
// -GtkWidget-wide-separators: true; // -GtkWidget-wide-separators: true;
color: $fg_color; color: $borders_color;
// Font and File button separators // Font and File button separators
GtkFileChooserButton &, GtkFileChooserButton &,
@ -1870,39 +1905,39 @@ GtkCalendar {
.dialog-action-area .button { .dialog-action-area .button {
padding: 12px; padding: 12px;
border-radius: 0; border-radius: 0;
@include button(normal, $noedge: true); @include button(normal, $edge: none);
@extend %middle_button; @extend %middle_button;
&:hover { &:hover {
@include button(hover, $noedge: true); @include button(hover, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:active { &:active {
@include button(active, $noedge: true); @include button(active, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:insensitive { &:insensitive {
@include button(insensitive, $noedge: true); @include button(insensitive, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:backdrop { &:backdrop {
@include button(backdrop, $noedge: true); @include button(backdrop, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:backdrop:insensitive { &:backdrop:insensitive {
@include button(backdrop-insensitive, $noedge: true); @include button(backdrop-insensitive, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
@each $b_type, $b_color in (suggested-action, $suggested_color), @each $b_type, $b_color in (suggested-action, $suggested_color),
(destructive-action, $destructive_color) { (destructive-action, $destructive_color) {
&.#{$b_type} { &.#{$b_type} {
@include button(normal, $b_color, white, $noedge: true); @include button(normal, $b_color, white, $edge: none);
@extend %middle_button; @extend %middle_button;
&:hover { &:hover {
@include button(hover, $b_color, white, $noedge: true); @include button(hover, $b_color, white, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:active { &:active {
@include button(active, $b_color, white, $noedge: true); @include button(active, $b_color, white, $edge: none);
@extend %middle_button; @extend %middle_button;
} }
&:backdrop { &:backdrop {
@ -1954,34 +1989,60 @@ GtkFileChooserDialog {
* Sidebar * * Sidebar *
***********/ ***********/
.sidebar, .sidebar {
.sidebar .view { border-width: 1px 0 0 0;
border: none; border-style: solid;
$_sidebar_bg: lighten($bg_color,5%); border-color: $borders_color;
background-color: $_sidebar_bg; &:dir(rtl) { border-width: 0 0 0 1px; }
.scrollbar {
&.trough {
background-color: darken($bg_color,10%);
border-radius: 6px;
border-width: 2px;
border-color: transparent;
}
&.slider {
background-color: $_sidebar_bg;
&:hover { background-color: lighten($bg_color, 10%); }
}
}
&:backdrop { &:backdrop {
background-color: lighten($backdrop_bg_color,5%); background-color: $bg_color;
} }
&:selected { &:selected {
background-color: $selected_bg_color; @extend %selected_items;
}
.separator {
color: mix($_sidebar_bg,$borders_color,70%);
} }
} }
// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
GtkPlacesSidebar.sidebar .view {
color: $fg_color;
background-color: transparent;
.separator,
.separator:backdrop { @extend .separator; }
.image { // icons color
color: mix($fg_color, $bg_color, 70%);
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 90%);
}
}
&:selected {
@extend %selected_items;
}
}
.sidebar-item {
padding: 10px 4px;
> .label {
padding-left: 6px;
padding-right: 6px;
}
&.needs-attention > .label {
@extend %needs_attention;
background-size: 6px 6px, 0 0;
}
}
/*********
* Paned *
*********/
GtkPaned { GtkPaned {
// This is actually the invisible area of the paned separator, not a margin... // This is actually the invisible area of the paned separator, not a margin...
margin: 0 8px 8px 0; //drag area of the separator margin: 0 8px 8px 0; //drag area of the separator
@ -2030,12 +2091,12 @@ GtkInfoBar {
text-shadow: 0 1px darken($selected_bg_color, 10%); text-shadow: 0 1px darken($selected_bg_color, 10%);
border-color: darken($selected_bg_color, 10%); border-color: darken($selected_bg_color, 10%);
.button { .button {
@include button(normal, $selected_bg_color, $selected_fg_color, noedge); @include button(normal, $selected_bg_color, $selected_fg_color, $edge: none);
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, noedge); } &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); }
&:active { @include button(active, $selected_bg_color, $selected_fg_color, noedge); } &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); }
&:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, noedge); } &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
&:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, noedge); } &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); }
&:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, noedge); } &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
} }
} }

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

@ -2,9 +2,6 @@
// generic drawing of more complex things // generic drawing of more complex things
$widget_edge: 0 1px $borders_edge; //outer hilight "used" on
//most widgets
@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
// //
// Helper function to stack up to 4 box-shadows; // Helper function to stack up to 4 box-shadows;
@ -17,13 +14,26 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
// entries // entries
@mixin entry($t, $fc:$selected_bg_color, $noedge:false) { @function entry_focus_border($fc) {
@return $fc;
}
@function entry_focus_glow($fc) {
$_focus_glow_color: transparentize($fc,0.85);
@return inset 0 0 0 1px $_focus_glow_color;
}
@function entry_gradient($c) {
@return linear-gradient(to bottom, darken($c,3%), $c 90%);
}
@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
// //
// Entries drawing function // Entries drawing function
// //
// $t: entry type // $t: entry type
// $fc: focus color // $fc: focus color
// $noedge: set to true not to draw the bottom edge hilight // $edge:none set to true not to draw the bottom edge hilight
// //
// possible $t values: // possible $t values:
// normal, focus, insensitive, backdrop, backdrop-insensitive; // normal, focus, insensitive, backdrop, backdrop-insensitive;
@ -34,8 +44,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
background-image: linear-gradient(to bottom, background-image: linear-gradient(to bottom,
darken($base_color,3%), darken($base_color,3%),
$base_color 90%); $base_color 90%);
$_entry_edge: $widget_edge; $_entry_edge: none;
@if $noedge { $_entry_edge: none; }
@if $t==normal { @if $t==normal {
border-color: $borders_color; border-color: $borders_color;
@ -92,14 +101,14 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
} }
} }
@mixin button($t, $c:$bg_color, $tc:$fg_color, $noedge:false ) { @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_color) {
// //
// Button drawing function // Button drawing function
// //
// $t: button type, // $t: button type,
// $c: base button color for colored* types // $c: base button color for colored* types
// $tc: optional text color for colored* types // $tc: optional text color for colored* types
// $noedge: set to true not to draw the bottom edge hilight // $noedge:none set to true not to draw the bottom edge hilight
// //
// possible $t values: // possible $t values:
// normal, hover, active, insensitive, insensitive-active, // normal, hover, active, insensitive, insensitive-active,
@ -253,34 +262,6 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
} }
@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
color: mix($tc,$bg_color,80%);
@if $flat { background-image: linear-gradient(to bottom,$c); }
@else {
background-image: linear-gradient(to bottom,
mix(black,$c,15%) 5%,
mix(black,$c,10%) 20%,
mix(black,$c,10%) 90%,
$c
);
}
@if $c!=$bg_color { @include _button_border_color($c); }
@else { border-color: $borders_color; }
@if $noedge==false {
@if lightness($c) > 60% {
box-shadow: inset 0 -1px 0 $borders_edge,
0 1px 0 $borders_edge;
}
@else {
box-shadow: inset 0 -1px 0 transparentize($borders_edge,0.5),
0 1px 0 transparentize($borders_edge,0.5);
}
}
}
@mixin overshoot($p, $t:normal, $c:$fg_color) { @mixin overshoot($p, $t:normal, $c:$fg_color) {
// //
// overshoot // overshoot

139
gtk/theme/HighContrast/gtk.css
View File

@ -203,7 +203,7 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f; border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; } box-shadow: inset 0 2px 2px -2px #7f7f7f; }
.entry.flat, .entry.flat:focus { .entry.flat, .entry.flat:focus {
padding: 2px; padding: 2px;
background-color: transparent; background-color: transparent;
@ -220,7 +220,7 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #000; border-color: #000;
box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc, 0 1px #fff; } box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc; }
.entry:insensitive { .entry:insensitive {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -229,7 +229,7 @@
color: #7f7f7f; color: #7f7f7f;
border-color: #7f7f7f; border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white); background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff; } box-shadow: none; }
.entry:backdrop { .entry:backdrop {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -277,13 +277,13 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f; border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; box-shadow: inset 0 2px 2px -2px #7f7f7f;
background-image: linear-gradient(to bottom, #fff); background-image: linear-gradient(to bottom, #fff);
border-bottom-color: #d8d8d8; border-bottom-color: #d8d8d8;
box-shadow: none; } box-shadow: none; }
.linked.vertical .entry:focus { .linked.vertical .entry:focus {
border-color: entry_focus_border(#000); border-color: #000;
box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000); } box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; }
.linked.vertical .entry:insensitive { .linked.vertical .entry:insensitive {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -292,7 +292,7 @@
color: #7f7f7f; color: #7f7f7f;
border-color: #7f7f7f; border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white); background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff; box-shadow: none;
border-bottom-color: #d8d8d8; } border-bottom-color: #d8d8d8; }
.linked.vertical .entry:insensitive:backdrop { .linked.vertical .entry:insensitive:backdrop {
background-color: transparent; background-color: transparent;
@ -318,7 +318,7 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f; border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; box-shadow: inset 0 2px 2px -2px #7f7f7f;
border-bottom-color: #d8d8d8; } border-bottom-color: #d8d8d8; }
.linked.vertical .entry:first-child:focus { .linked.vertical .entry:first-child:focus {
background-color: transparent; background-color: transparent;
@ -326,7 +326,7 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #000; border-color: #000;
box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc, 0 1px #fff; } box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc; }
.linked.vertical .entry:first-child:insensitive { .linked.vertical .entry:first-child:insensitive {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -335,7 +335,7 @@
color: #7f7f7f; color: #7f7f7f;
border-color: #7f7f7f; border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white); background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff; box-shadow: none;
border-bottom-color: gainsboro; } border-bottom-color: gainsboro; }
.linked.vertical .entry:first-child:insensitive:backdrop { .linked.vertical .entry:first-child:insensitive:backdrop {
background-color: transparent; background-color: transparent;
@ -362,13 +362,13 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f; border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; box-shadow: inset 0 2px 2px -2px #7f7f7f;
border-top-width: 0; border-top-width: 0;
background-image: linear-gradient(to bottom, #fff); background-image: linear-gradient(to bottom, #fff);
box-shadow: none; } box-shadow: none; }
.linked.vertical .entry:last-child:focus { .linked.vertical .entry:last-child:focus {
border-color: entry_focus_border(#000); border-color: #000;
box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000), _widget_edge(); } box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; }
.linked.vertical .entry:last-child:insensitive { .linked.vertical .entry:last-child:insensitive {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -377,7 +377,7 @@
color: #7f7f7f; color: #7f7f7f;
border-color: #7f7f7f; border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white); background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff; } box-shadow: none; }
.linked.vertical .entry:last-child:insensitive:backdrop { .linked.vertical .entry:last-child:insensitive:backdrop {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -403,7 +403,7 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #cc0000; border-color: #cc0000;
box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc, 0 1px #fff; } box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #f4cccc; }
.entry.error:selected, .entry.error:selected:focus { .entry.error:selected, .entry.error:selected:focus {
background-color: #cc0000; } background-color: #cc0000; }
.entry.warning { .entry.warning {
@ -415,13 +415,18 @@
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #f57900; border-color: #f57900;
box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc, 0 1px #fff; } box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #fde4cc; }
.entry.warning:selected, .entry.warning:selected:focus { .entry.warning:selected, .entry.warning:selected:focus {
background-color: #f57900; } background-color: #f57900; }
/*********** /***********
* Buttons * * Buttons *
***********/ ***********/
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#000), to(transparent)); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)); } }
.button { .button {
border-radius: 3px; border-radius: 3px;
transition: all 200ms ease-out; transition: all 200ms ease-out;
@ -677,6 +682,17 @@
border-radius: 3px; border-radius: 3px;
border-style: solid; } border-style: solid; }
.sidebar-item.needs-attention > .label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
.sidebar-item.needs-attention > .label:backdrop {
background-size: 6px 6px, 0 0; }
.sidebar-item.needs-attention > .label:dir(rtl) {
background-position: left 3px, left 4px; }
.osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) { .osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
border-radius: 0; border-radius: 0;
border-left-style: none; } border-left-style: none; }
@ -895,7 +911,9 @@ GtkComboBox {
color: #7f7f7f; } color: #7f7f7f; }
GtkComboBox .menuitem { GtkComboBox .menuitem {
text-shadow: none; } text-shadow: none; }
GtkComboBox .separator { GtkComboBox .separator, GtkComboBox GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view GtkComboBox .separator,
GtkComboBox GtkPlacesSidebar.sidebar .view .separator:backdrop,
GtkPlacesSidebar.sidebar .view GtkComboBox .separator:backdrop {
-GtkWidget-wide-separators: true; -GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0; -GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0; } -GtkWidget-vertical-separator: 0; }
@ -967,8 +985,10 @@ GtkComboBox {
font-size: 80%; font-size: 80%;
padding: 0 12px; } padding: 0 12px; }
.titlebar .header-bar-separator, .titlebar > GtkBox > .separator.vertical, .titlebar .header-bar-separator, .titlebar > GtkBox > .separator.vertical,
GtkPlacesSidebar.sidebar .view .titlebar > GtkBox > .vertical.separator:backdrop,
.header-bar .header-bar-separator, .header-bar .header-bar-separator,
.header-bar > GtkBox > .separator.vertical { .header-bar > GtkBox > .separator.vertical,
GtkPlacesSidebar.sidebar .view .header-bar > GtkBox > .vertical.separator:backdrop {
-GtkWidget-wide-separators: true; -GtkWidget-wide-separators: true;
-GtkWidget-separator-width: 1px; -GtkWidget-separator-width: 1px;
border-width: 0 1px; border-width: 0 1px;
@ -1185,7 +1205,7 @@ GtkTreeView.view.progressbar {
box-shadow: none; } box-shadow: none; }
.popover > .list, .popover > .view, .popover > .toolbar { .popover > .list, .popover > .view, .popover > .toolbar {
background-color: transparent; } background-color: transparent; }
.popover .separator { .popover .separator, .popover GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view .popover .separator {
color: #000; color: #000;
background-color: transparent; background-color: transparent;
border: 0; } border: 0; }
@ -1530,13 +1550,11 @@ GtkSwitch {
color: white; color: white;
border-color: #000; border-color: #000;
background-color: #000; background-color: #000;
box-shadow: 0 1px #fff;
text-shadow: 0 0 2px white; } text-shadow: 0 0 2px white; }
GtkSwitch.trough:insensitive { GtkSwitch.trough:insensitive {
color: #7f7f7f; color: #7f7f7f;
border-color: #7f7f7f; border-color: #7f7f7f;
background-color: white; background-color: white;
box-shadow: 0 1px #fff;
text-shadow: none; } text-shadow: none; }
GtkSwitch.trough:backdrop { GtkSwitch.trough:backdrop {
color: #000; color: #000;
@ -1736,13 +1754,12 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
border-radius: 3px; border-radius: 3px;
border-color: #7f7f7f; border-color: #7f7f7f;
background-color: #cbcbcb; background-color: #cbcbcb;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px #fff; } box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
.scale.trough.highlight, .scale.trough.highlight,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight, .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight { .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight {
border-color: #000; border-color: #000;
background-color: #000; background-color: #000; }
box-shadow: 0 1px #fff; }
.scale.trough.highlight:backdrop, .scale.trough.highlight:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop, .scale.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop { .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.highlight:backdrop {
@ -1755,8 +1772,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive, .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:insensitive,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive { .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough.hilight:insensitive {
border-color: #7f7f7f; border-color: #7f7f7f;
background-color: white; background-color: white; }
box-shadow: 0 1px #fff; }
.scale.trough:backdrop, .scale.trough:backdrop,
.scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop, .scale.scale-has-marks-above.scale-has-marks-below.trough:backdrop,
.scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop { .scale.vertical.scale-has-marks-above.scale-has-marks-below.trough:backdrop {
@ -1807,7 +1823,7 @@ GtkProgressBar.trough {
border-radius: 3px; border-radius: 3px;
border-color: #7f7f7f; border-color: #7f7f7f;
background-color: #d2d2d2; background-color: #d2d2d2;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px #fff; } box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1); }
GtkProgressBar.trough:backdrop { GtkProgressBar.trough:backdrop {
border-color: #8b8b8b; border-color: #8b8b8b;
background-color: #d6d6d6; background-color: #d6d6d6;
@ -1836,7 +1852,7 @@ GtkLevelBar.vertical {
border-width: 1px; border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f; border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff; } box-shadow: inset 0 2px 2px -2px #7f7f7f; }
.level-bar.trough:backdrop { .level-bar.trough:backdrop {
background-color: transparent; background-color: transparent;
border-style: solid; border-style: solid;
@ -1876,11 +1892,11 @@ GtkLevelBar.vertical {
.level-bar.fill-block.empty-fill-block:backdrop { .level-bar.fill-block.empty-fill-block:backdrop {
border-color: rgba(0, 0, 0, 0.15); } border-color: rgba(0, 0, 0, 0.15); }
.view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected { .view:selected, .view:selected:focus, .view:selected:hover, GtkLabel:selected, GtkLabel:selected:focus, GtkLabel:selected:hover, GtkLabel:backdrop:selected, .entry:selected, .entry:selected:focus, .menuitem.button.flat:selected, .sidebar:selected, GtkPlacesSidebar.sidebar .view:selected {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
outline-color: rgba(255, 255, 255, 0.3); } outline-color: rgba(255, 255, 255, 0.3); }
.view:backdrop:selected, GtkLabel:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:selected { .view:backdrop:selected, GtkLabel:backdrop:selected, .entry:backdrop:selected, .menuitem.button.flat:backdrop:selected, .sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected {
color: #fff; } color: #fff; }
/********** /**********
@ -1902,9 +1918,14 @@ GtkScrolledWindow .frame {
GtkScrolledWindow GtkViewport.frame { GtkScrolledWindow GtkViewport.frame {
border-style: none; } border-style: none; }
.separator { .separator, GtkPlacesSidebar.sidebar .view .separator,
color: #000; } GtkPlacesSidebar.sidebar .view .separator:backdrop {
GtkFileChooserButton .separator, GtkFontButton .separator { color: #7f7f7f; }
GtkFileChooserButton .separator, GtkFileChooserButton GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view GtkFileChooserButton .separator,
GtkFileChooserButton GtkPlacesSidebar.sidebar .view .separator:backdrop,
GtkPlacesSidebar.sidebar .view GtkFileChooserButton .separator:backdrop, GtkFontButton .separator, GtkFontButton GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view GtkFontButton .separator,
GtkFontButton GtkPlacesSidebar.sidebar .view .separator:backdrop,
GtkPlacesSidebar.sidebar .view GtkFontButton .separator:backdrop {
-GtkWidget-wide-separators: true; -GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0; -GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0; } -GtkWidget-vertical-separator: 0; }
@ -2151,32 +2172,34 @@ GtkFileChooserDialog .dialog-action-box {
/*********** /***********
* Sidebar * * Sidebar *
***********/ ***********/
.sidebar, .sidebar {
.sidebar .view { border-width: 1px 0 0 0;
border: none; border-style: solid;
background-color: white; } border-color: #7f7f7f; }
.sidebar .scrollbar.trough, .sidebar:dir(rtl) {
.sidebar .view .scrollbar.trough { border-width: 0 0 0 1px; }
background-color: #e6e6e6; .sidebar:backdrop {
border-radius: 6px; background-color: #fff; }
border-width: 2px;
border-color: transparent; }
.sidebar .scrollbar.slider,
.sidebar .view .scrollbar.slider {
background-color: white; }
.sidebar .scrollbar.slider:hover,
.sidebar .view .scrollbar.slider:hover {
background-color: white; }
.sidebar:backdrop,
.sidebar .view:backdrop {
background-color: white; }
.sidebar:selected,
.sidebar .view:selected {
background-color: #000; }
.sidebar .separator,
.sidebar .view .separator {
color: #d8d8d8; }
GtkPlacesSidebar.sidebar .view {
color: #000;
background-color: transparent; }
GtkPlacesSidebar.sidebar .view .image {
color: #4c4c4c; }
GtkPlacesSidebar.sidebar .view .image:selected {
color: #e5e5e5; }
.sidebar-item {
padding: 10px 4px; }
.sidebar-item > .label {
padding-left: 6px;
padding-right: 6px; }
.sidebar-item.needs-attention > .label {
background-size: 6px 6px, 0 0; }
/*********
* Paned *
*********/
GtkPaned { GtkPaned {
margin: 0 8px 8px 0; } margin: 0 8px 8px 0; }
GtkPaned:dir(rtl) { GtkPaned:dir(rtl) {