mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-16 13:40:31 +00:00
HC: clean up borders for buttons & entries
https://bugzilla.gnome.org/show_bug.cgi?id=740860
This commit is contained in:
Jakub Steiner
parent
3eaaf12c04
commit
c1c68b409c
@ -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); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user