From 6de0ecb78eaf9e987353c83039304b7ef379cdca Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Wed, 8 Jun 2016 12:15:55 +0200 Subject: [PATCH] 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 --- gtk/theme/HighContrast/_common.scss | 13 +++---------- .../HighContrast/gtk-contained-inverse.css | 19 ++++++------------- gtk/theme/HighContrast/gtk-contained.css | 19 ++++++------------- 3 files changed, 15 insertions(+), 36 deletions(-) diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index dd5201c3fc..7cedff14af 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -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; diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index 9be5a90fb4..21d03ec39d 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -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; } diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index 59df69cb44..11c57cb546 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -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; }