HC: focus outline more prominent

- make visible regardless of colors used
- make larger and more inset

https://bugzilla.gnome.org/show_bug.cgi?id=767310
This commit is contained in:
Jakub Steiner 2016-06-08 12:15:55 +02:00 committed by Matthias Clasen
parent 199ad2c14b
commit 6de0ecb78e
3 changed files with 15 additions and 36 deletions

View File

@ -28,10 +28,10 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
// to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now.
outline-color: transparentize($fg_color, 0.7);
outline-color: currentColor;
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
outline-offset: -4px;
outline-width: 2px;
-gtk-outline-radius: 2px;
}
@ -147,7 +147,6 @@ label {
border: none;
background-color: $osd_bg_color;
background-clip: padding-box;
outline-color: transparentize($osd_fg_color, 0.7);
//text-shadow: 0 1px black;
//-gtk-icon-shadow: 0 1px black;
@ -480,7 +479,6 @@ button {
color: $osd_fg_color;
border-radius: 5px;
outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
@include button(osd);
@ -2234,7 +2232,6 @@ treeview.view radio {
border-color: $osd_borders_color;
background-color: transparentize($osd_borders_color, 0.2);
box-shadow: none;
outline-color: transparentize($osd_fg_color, 0.8);
&:disabled { background-color: $insensitive_bg_color; }
}
@ -2568,7 +2565,6 @@ levelbar {
%selected_items {
background-color: $selected_bg_color;
color: $selected_fg_color;
outline-color: transparentize($selected_fg_color, 0.7);
&:backdrop { background-color: $borders_color; color: $selected_fg_color; }
}
@ -3188,14 +3184,12 @@ colorswatch {
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
&.dark {
color: white;
outline-color: transparentize(black, 0.7);
border: 1px solid transparentize(black, 0.7);
&:hover { border-color: transparentize(black, 0.5); }
&:backdrop { color: transparentize(white, 0.7); }
}
&.light {
color: black;
outline-color: transparentize(white, 0.5);
border: 1px solid transparentize(black, 0.7);
&:hover { border-color: transparentize(black, 0.5); }
&:backdrop { color: transparentize(black, 0.7); }
@ -3314,7 +3308,6 @@ cursor-handle {
border: none;
background-color: opacify($osd_bg_color,0.2);
background-clip: padding-box;
outline-color: transparentize($osd_fg_color, 0.7);
box-shadow: none;
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;

View File

@ -41,10 +41,10 @@
-GtkTreeView-horizontal-separator: 4;
-GtkDialog-button-spacing: 4;
-GtkDialog-action-area-border: 0;
outline-color: rgba(255, 255, 255, 0.3);
outline-color: currentColor;
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
outline-width: 2px;
-gtk-outline-radius: 2px; }
/***************
@ -112,8 +112,7 @@ popover.background.touch-selection, popover.background.magnifier, .csd popover.b
color: #fff;
border: none;
background-color: rgba(0, 0, 0, 0.8);
background-clip: padding-box;
outline-color: rgba(255, 255, 255, 0.3); }
background-clip: padding-box; }
popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
text-shadow: none;
-gtk-icon-shadow: none; }
@ -492,7 +491,6 @@ row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(di
button.osd {
color: #fff;
border-radius: 5px;
outline-color: rgba(255, 255, 255, 0.3);
border-width: 2px;
border-style: solid;
color: #fff;
@ -2309,8 +2307,7 @@ scale trough, scale fill {
.osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
border-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0);
box-shadow: none;
outline-color: rgba(255, 255, 255, 0.2); }
box-shadow: none; }
.osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled {
background-color: #070707; }
@ -2598,8 +2595,7 @@ entry selection, modelbutton.flat:selected, popover.background checkbutton:selec
popover.background radiobutton:selected,
.menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected {
background-color: #ddd;
color: #000;
outline-color: rgba(0, 0, 0, 0.3); }
color: #000; }
.view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, spinbutton:not(.vertical) selection:backdrop,
entry selection:backdrop, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
popover.background radiobutton:backdrop:selected,
@ -3094,7 +3090,7 @@ placessidebar row {
placessidebar row.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
background-image: linear-gradient(to bottom, #fff);
background-image: linear-gradient(to bottom, #fff, #fff);
background-clip: content-box; }
placessidebar row.sidebar-new-bookmark-row {
color: #ddd; }
@ -3294,7 +3290,6 @@ colorswatch {
box-shadow: none; }
colorswatch.dark {
color: white;
outline-color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.dark:hover {
border-color: rgba(0, 0, 0, 0.5); }
@ -3302,7 +3297,6 @@ colorswatch {
color: rgba(255, 255, 255, 0.3); }
colorswatch.light {
color: black;
outline-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.light:hover {
border-color: rgba(0, 0, 0, 0.5); }
@ -3408,7 +3402,6 @@ cursor-handle {
border: none;
background-color: black;
background-clip: padding-box;
outline-color: rgba(255, 255, 255, 0.3);
box-shadow: none;
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; }

View File

@ -41,10 +41,10 @@
-GtkTreeView-horizontal-separator: 4;
-GtkDialog-button-spacing: 4;
-GtkDialog-action-area-border: 0;
outline-color: rgba(0, 0, 0, 0.3);
outline-color: currentColor;
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
outline-width: 2px;
-gtk-outline-radius: 2px; }
/***************
@ -112,8 +112,7 @@ popover.background.touch-selection, popover.background.magnifier, .csd popover.b
color: #fff;
border: none;
background-color: rgba(0, 0, 0, 0.8);
background-clip: padding-box;
outline-color: rgba(255, 255, 255, 0.3); }
background-clip: padding-box; }
popover.background.touch-selection:backdrop, popover.background.magnifier:backdrop, popover.background.osd:backdrop, .osd:backdrop {
text-shadow: none;
-gtk-icon-shadow: none; }
@ -494,7 +493,6 @@ row:selected button {
button.osd {
color: #fff;
border-radius: 5px;
outline-color: rgba(255, 255, 255, 0.3);
border-width: 2px;
border-style: solid;
color: #fff;
@ -2316,8 +2314,7 @@ scale trough, scale fill {
.osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill {
border-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0);
box-shadow: none;
outline-color: rgba(255, 255, 255, 0.2); }
box-shadow: none; }
.osd scale trough:disabled, scale .osd trough:disabled, .osd scale fill:disabled, scale .osd fill:disabled {
background-color: white; }
@ -2605,8 +2602,7 @@ entry selection, modelbutton.flat:selected, popover.background checkbutton:selec
popover.background radiobutton:selected,
.menuitem.button.flat:selected, treeview.view:selected, row.activatable:selected, .sidebar:selected {
background-color: #000;
color: #fff;
outline-color: rgba(255, 255, 255, 0.3); }
color: #fff; }
.view:backdrop:selected, textview text:backdrop:selected, iconview:backdrop:selected, calendar:backdrop:selected, textview text:backdrop:selected:focus, iconview:backdrop:selected:focus, calendar:backdrop:focus:selected, textview text:backdrop:selected:hover, iconview:backdrop:selected:hover, calendar:backdrop:hover:selected, textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, spinbutton:not(.vertical) selection:backdrop,
entry selection:backdrop, modelbutton.flat:backdrop:selected, popover.background checkbutton:backdrop:selected,
popover.background radiobutton:backdrop:selected,
@ -3101,7 +3097,7 @@ placessidebar row {
placessidebar row.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
background-image: linear-gradient(to bottom, #000);
background-image: linear-gradient(to bottom, #000, #000);
background-clip: content-box; }
placessidebar row.sidebar-new-bookmark-row {
color: #000; }
@ -3301,7 +3297,6 @@ colorswatch {
box-shadow: none; }
colorswatch.dark {
color: white;
outline-color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.dark:hover {
border-color: rgba(0, 0, 0, 0.5); }
@ -3309,7 +3304,6 @@ colorswatch {
color: rgba(255, 255, 255, 0.3); }
colorswatch.light {
color: black;
outline-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3); }
colorswatch.light:hover {
border-color: rgba(0, 0, 0, 0.5); }
@ -3415,7 +3409,6 @@ cursor-handle {
border: none;
background-color: black;
background-clip: padding-box;
outline-color: rgba(255, 255, 255, 0.3);
box-shadow: none;
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black; }