From c1c68b409c31d4584362d44d68d24654eea482cf Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Mon, 1 Dec 2014 19:06:02 +0100 Subject: [PATCH] HC: clean up borders for buttons & entries https://bugzilla.gnome.org/show_bug.cgi?id=740860 --- gtk/theme/HighContrast/_common.scss | 217 +++++++++++++++++---------- gtk/theme/HighContrast/_drawing.scss | 55 +++---- gtk/theme/HighContrast/gtk.css | 139 ++++++++++------- 3 files changed, 238 insertions(+), 173 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index 9400929eca..9a7c212f08 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -185,7 +185,7 @@ GtkLabel { @include entry(normal); &.flat, &.flat:focus { padding: 2px; - @include entry(normal, $noedge:true); + @include entry(normal, $edge: none); border: none; border-radius: 0; } @@ -280,8 +280,7 @@ GtkLabel { &: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(); + 0 -1px 0 0 entry_focus_border($selected_bg_color); @extend %linked_vertical:last-child; } &:insensitive { @@ -320,6 +319,25 @@ GtkLabel { /*********** * 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 { border-radius: 3px; @@ -439,12 +457,12 @@ GtkLabel { // should really be reprecated... .inline-toolbar GtkToolButton > .button { // redefining the button look is // needed since those are flat... - @include button(normal, $noedge: true); // the box-shadow outset doesn't work - // in this case, hence $noedge - &:hover { @include button(hover, $noedge: true); } - &:active { @include button(active, $noedge:true); } - &:insensitive { @include button(insensitive, $noedge:true); } - &:insensitive:active { @include button(insensitive-active, $noedge:true); } + @include button(normal, $edge: none); // the box-shadow outset doesn't work + // in this case, hence $edge: none + &:hover { @include button(hover, $edge: none); } + &:active { @include button(active, $edge: none); } + &:insensitive { @include button(insensitive, $edge: none); } + &:insensitive:active { @include button(insensitive-active, $edge:none); } &:backdrop { @include button(backdrop); }; &:backdrop:active { @include button(backdrop-active); } &: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 { border-radius: 0; border-left-style: none; @@ -616,18 +657,18 @@ GtkColorButton.button { padding: 4px; } // Uniform padding on the .button { &:first-child { @extend %top_button; - @include button(normal, $noedge: true); + @include button(normal, $edge: none); &:active { @extend %top_button; - @include button(active, $noedge: true); + @include button(active, $edge: none); } &:hover { @extend %top_button; - @include button(hover, $noedge: true); + @include button(hover, $edge: none); } &:insensitive { @extend %top_button; - @include button(insensitive, $noedge: true); + @include button(insensitive, $edge: none); } &:backdrop { @extend %top_button; @@ -854,22 +895,22 @@ GtkComboBox { 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 .button { - @include button(normal, $selected_bg_color, $selected_fg_color, noedge); - &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, noedge); } - &:active { @include button(active, $selected_bg_color, $selected_fg_color, noedge); } - &:insensitive { @include button(insensitive, $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, $edge: none); } + &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); } + &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } &: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%); } - &: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 { - @include button($t:normal, $noedge:true); - &:hover { @include button($t:hover,$noedge:true); } - &:active { @include button($t:active, $noedge:true); } - &:insensitive { @include button($t:insensitive, $noedge:true); } - &:backdrop { @include button($t:backdrop, $noedge:true); } - &:backdrop:insensitive { @include button($t:backdrop-insensitive, $noedge:true); } + @include button($t:normal, $edge: none); + &:hover { @include button($t:hover,$edge: none); } + &:active { @include button($t:active, $edge: none); } + &:insensitive { @include button($t:insensitive, $edge: none); } + &:backdrop { @include button($t:backdrop, $edge: none); } + &:backdrop:insensitive { @include button($t:backdrop-insensitive, $edge: none); } } } .selection-menu { @@ -1278,12 +1319,12 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells color: transparentize($fg_color,0.7); &:hover { color: $fg_color; - @include button(hover, $noedge: true); + @include button(hover, $edge: none); background-image: none; box-shadow: none; } &:active { - @include button(active, $noedge: true); + @include button(active, $edge: none); } &:backdrop { color: transparentize($backdrop_fg_color,0.7); @@ -1371,14 +1412,12 @@ GtkSwitch { color: white; border-color: $selected_borders_color; background-color: $selected_bg_color; - box-shadow: $widget_edge; text-shadow: 0 0 2px white; } &:insensitive { color: $insensitive_fg_color; border-color: $borders_color; background-color: $insensitive_bg_color; - box-shadow: $widget_edge; text-shadow: none; } &:backdrop { @@ -1401,18 +1440,18 @@ GtkSwitch { } &.slider { border-radius: 3px; - @include button(normal, $noedge: true); + @include button(normal, $edge: none); box-shadow: inset 0 1px white, inset 0 -2px transparentize($bg_color,0.4), inset 0 -1px mix($bg_color,$borders_color,50%); &:hover { - @include button(hover, $noedge: true); + @include button(hover, $edge: none); box-shadow: inset 0 1px white, inset 0 -2px transparentize($bg_color,0.4), inset 0 -1px mix($bg_color,$borders_color,50%); } &:active { border: 1px solid $selected_borders_color; } - &:insensitive { @include button(insensitive, $noedge: true); } + &:insensitive { @include button(insensitive, $edge: none); } &:backdrop { @include button(backdrop); &:active{ border-color: $selected_bg_color; } &:insensitive { @@ -1487,14 +1526,14 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { } &.slider { //FIXME: better gradient on the slider and hover state - @include button(normal, $noedge: true); + @include button(normal, $edge: none); border-radius: 50%; border-color: darken($borders_color,3%); box-shadow: inset 0 1px white, inset 0 #{-2px} $bg_color, inset 0 #{-1px} mix($bg_color,$borders_color,50%); &:hover { - @include button(hover, $noedge: true); + @include button(hover, $edge: none); border-color: darken($borders_color,3%); border-radius: 50%; // needed for double marks scales box-shadow: inset 0 1px white, @@ -1526,12 +1565,10 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-radius: 3px; border-color: $borders_color; background-color: mix($bg_color,$borders_color,60%); - box-shadow: inset 1px 1px transparentize(black, 0.9), - $widget_edge; + box-shadow: inset 1px 1px transparentize(black, 0.9); &.highlight { border-color: $selected_borders_color; background-color: $selected_bg_color; - box-shadow: $widget_edge; &:backdrop { border-color: $selected_bg_color; background-color: $selected_bg_color; @@ -1541,7 +1578,6 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { &:insensitive, &.hilight:insensitive { border-color: $insensitive_borders_color; background-color: $insensitive_bg_color; - box-shadow: $widget_edge; } &:backdrop { border-color: $backdrop_borders_color; @@ -1622,8 +1658,7 @@ GtkProgressBar.trough { border-radius: 3px; border-color: $borders_color; background-color: mix($borders_color,$bg_color, 35%); - box-shadow: inset 1px 1px transparentize(black, 0.9), - $widget_edge; + box-shadow: inset 1px 1px transparentize(black, 0.9); &:backdrop{ border-color: $backdrop_borders_color; background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%); @@ -1731,7 +1766,7 @@ GtkScrolledWindow { .separator { // always disable separators // -GtkWidget-wide-separators: true; - color: $fg_color; + color: $borders_color; // Font and File button separators GtkFileChooserButton &, @@ -1870,39 +1905,39 @@ GtkCalendar { .dialog-action-area .button { padding: 12px; border-radius: 0; - @include button(normal, $noedge: true); + @include button(normal, $edge: none); @extend %middle_button; &:hover { - @include button(hover, $noedge: true); + @include button(hover, $edge: none); @extend %middle_button; } &:active { - @include button(active, $noedge: true); + @include button(active, $edge: none); @extend %middle_button; } &:insensitive { - @include button(insensitive, $noedge: true); + @include button(insensitive, $edge: none); @extend %middle_button; } &:backdrop { - @include button(backdrop, $noedge: true); + @include button(backdrop, $edge: none); @extend %middle_button; } &:backdrop:insensitive { - @include button(backdrop-insensitive, $noedge: true); + @include button(backdrop-insensitive, $edge: none); @extend %middle_button; } @each $b_type, $b_color in (suggested-action, $suggested_color), (destructive-action, $destructive_color) { &.#{$b_type} { - @include button(normal, $b_color, white, $noedge: true); + @include button(normal, $b_color, white, $edge: none); @extend %middle_button; &:hover { - @include button(hover, $b_color, white, $noedge: true); + @include button(hover, $b_color, white, $edge: none); @extend %middle_button; } &:active { - @include button(active, $b_color, white, $noedge: true); + @include button(active, $b_color, white, $edge: none); @extend %middle_button; } &:backdrop { @@ -1954,34 +1989,60 @@ GtkFileChooserDialog { * Sidebar * ***********/ -.sidebar, -.sidebar .view { - border: none; - $_sidebar_bg: lighten($bg_color,5%); - background-color: $_sidebar_bg; - .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%); } - } - } +.sidebar { + border-width: 1px 0 0 0; + border-style: solid; + border-color: $borders_color; + &:dir(rtl) { border-width: 0 0 0 1px; } &:backdrop { - background-color: lighten($backdrop_bg_color,5%); + background-color: $bg_color; } + &:selected { - background-color: $selected_bg_color; - } - .separator { - color: mix($_sidebar_bg,$borders_color,70%); + @extend %selected_items; } } +// 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 { // This is actually the invisible area of the paned separator, not a margin... margin: 0 8px 8px 0; //drag area of the separator @@ -2030,12 +2091,12 @@ GtkInfoBar { text-shadow: 0 1px darken($selected_bg_color, 10%); border-color: darken($selected_bg_color, 10%); .button { - @include button(normal, $selected_bg_color, $selected_fg_color, noedge); - &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, noedge); } - &:active { @include button(active, $selected_bg_color, $selected_fg_color, noedge); } - &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, noedge); } - &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, noedge); } - &:backdrop:insensitive { @include button(backdrop-insensitive, $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, $edge: none); } + &:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); } + &:insensitive { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } + &:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); } + &:backdrop:insensitive { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); } } } diff --git a/gtk/theme/HighContrast/_drawing.scss b/gtk/theme/HighContrast/_drawing.scss index d9e3b36fb0..76073a732e 100644 --- a/gtk/theme/HighContrast/_drawing.scss +++ b/gtk/theme/HighContrast/_drawing.scss @@ -2,9 +2,6 @@ // 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) { // // Helper function to stack up to 4 box-shadows; @@ -17,13 +14,26 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on // 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 // // $t: entry type // $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: // 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, darken($base_color,3%), $base_color 90%); - $_entry_edge: $widget_edge; - @if $noedge { $_entry_edge: none; } + $_entry_edge: none; @if $t==normal { 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 // // $t: button type, // $c: base button 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: // 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) { // // overshoot diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css index 3abb40f2c8..aa534bc512 100644 --- a/gtk/theme/HighContrast/gtk.css +++ b/gtk/theme/HighContrast/gtk.css @@ -203,7 +203,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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 { padding: 2px; background-color: transparent; @@ -220,7 +220,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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 { background-color: transparent; border-style: solid; @@ -229,7 +229,7 @@ color: #7f7f7f; border-color: #7f7f7f; background-image: linear-gradient(to bottom, white); - box-shadow: 0 1px #fff; } + box-shadow: none; } .entry:backdrop { background-color: transparent; border-style: solid; @@ -277,13 +277,13 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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); border-bottom-color: #d8d8d8; box-shadow: none; } .linked.vertical .entry:focus { - border-color: entry_focus_border(#000); - box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000); } + border-color: #000; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; } .linked.vertical .entry:insensitive { background-color: transparent; border-style: solid; @@ -292,7 +292,7 @@ color: #7f7f7f; border-color: #7f7f7f; background-image: linear-gradient(to bottom, white); - box-shadow: 0 1px #fff; + box-shadow: none; border-bottom-color: #d8d8d8; } .linked.vertical .entry:insensitive:backdrop { background-color: transparent; @@ -318,7 +318,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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; } .linked.vertical .entry:first-child:focus { background-color: transparent; @@ -326,7 +326,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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 { background-color: transparent; border-style: solid; @@ -335,7 +335,7 @@ color: #7f7f7f; border-color: #7f7f7f; background-image: linear-gradient(to bottom, white); - box-shadow: 0 1px #fff; + box-shadow: none; border-bottom-color: gainsboro; } .linked.vertical .entry:first-child:insensitive:backdrop { background-color: transparent; @@ -362,13 +362,13 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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; background-image: linear-gradient(to bottom, #fff); box-shadow: none; } .linked.vertical .entry:last-child:focus { - border-color: entry_focus_border(#000); - box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000), _widget_edge(); } + border-color: #000; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 -1px 0 0 #000; } .linked.vertical .entry:last-child:insensitive { background-color: transparent; border-style: solid; @@ -377,7 +377,7 @@ color: #7f7f7f; border-color: #7f7f7f; background-image: linear-gradient(to bottom, white); - box-shadow: 0 1px #fff; } + box-shadow: none; } .linked.vertical .entry:last-child:insensitive:backdrop { background-color: transparent; border-style: solid; @@ -403,7 +403,7 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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 { background-color: #cc0000; } .entry.warning { @@ -415,13 +415,18 @@ border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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 { background-color: #f57900; } /*********** * 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 { border-radius: 3px; transition: all 200ms ease-out; @@ -677,6 +682,17 @@ border-radius: 3px; 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) { border-radius: 0; border-left-style: none; } @@ -895,7 +911,9 @@ GtkComboBox { color: #7f7f7f; } GtkComboBox .menuitem { 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-horizontal-separator: 0; -GtkWidget-vertical-separator: 0; } @@ -967,8 +985,10 @@ GtkComboBox { font-size: 80%; padding: 0 12px; } .titlebar .header-bar-separator, .titlebar > GtkBox > .separator.vertical, + GtkPlacesSidebar.sidebar .view .titlebar > GtkBox > .vertical.separator:backdrop, .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-separator-width: 1px; border-width: 0 1px; @@ -1185,7 +1205,7 @@ GtkTreeView.view.progressbar { box-shadow: none; } .popover > .list, .popover > .view, .popover > .toolbar { background-color: transparent; } - .popover .separator { + .popover .separator, .popover GtkPlacesSidebar.sidebar .view .separator, GtkPlacesSidebar.sidebar .view .popover .separator { color: #000; background-color: transparent; border: 0; } @@ -1530,13 +1550,11 @@ GtkSwitch { color: white; border-color: #000; background-color: #000; - box-shadow: 0 1px #fff; text-shadow: 0 0 2px white; } GtkSwitch.trough:insensitive { color: #7f7f7f; border-color: #7f7f7f; background-color: white; - box-shadow: 0 1px #fff; text-shadow: none; } GtkSwitch.trough:backdrop { color: #000; @@ -1736,13 +1754,12 @@ GtkCheckButton.text-button, GtkRadioButton.text-button { border-radius: 3px; border-color: #7f7f7f; 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.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; - background-color: #000; - box-shadow: 0 1px #fff; } + background-color: #000; } .scale.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 { @@ -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.hilight:insensitive { border-color: #7f7f7f; - background-color: white; - box-shadow: 0 1px #fff; } + background-color: white; } .scale.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 { @@ -1807,7 +1823,7 @@ GtkProgressBar.trough { border-radius: 3px; border-color: #7f7f7f; 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 { border-color: #8b8b8b; background-color: #d6d6d6; @@ -1836,7 +1852,7 @@ GtkLevelBar.vertical { border-width: 1px; background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%); 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 { background-color: transparent; border-style: solid; @@ -1876,11 +1892,11 @@ GtkLevelBar.vertical { .level-bar.fill-block.empty-fill-block:backdrop { 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; color: #fff; 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; } /********** @@ -1902,9 +1918,14 @@ GtkScrolledWindow .frame { GtkScrolledWindow GtkViewport.frame { border-style: none; } -.separator { - color: #000; } - GtkFileChooserButton .separator, GtkFontButton .separator { +.separator, GtkPlacesSidebar.sidebar .view .separator, +GtkPlacesSidebar.sidebar .view .separator:backdrop { + 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-horizontal-separator: 0; -GtkWidget-vertical-separator: 0; } @@ -2151,32 +2172,34 @@ GtkFileChooserDialog .dialog-action-box { /*********** * Sidebar * ***********/ -.sidebar, -.sidebar .view { - border: none; - background-color: white; } - .sidebar .scrollbar.trough, - .sidebar .view .scrollbar.trough { - background-color: #e6e6e6; - border-radius: 6px; - 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; } +.sidebar { + border-width: 1px 0 0 0; + border-style: solid; + border-color: #7f7f7f; } + .sidebar:dir(rtl) { + border-width: 0 0 0 1px; } + .sidebar:backdrop { + background-color: #fff; } +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 { margin: 0 8px 8px 0; } GtkPaned:dir(rtl) {