From 65635546b49c0a19adc5a8cda7f6be8ff46f7f54 Mon Sep 17 00:00:00 2001
From: Matthias Clasen <mclasen@redhat.com>
Date: Sat, 14 Nov 2015 18:25:59 -0500
Subject: [PATCH] HighContrast: Fix selection styling in some places

Make selected flow box children and list box rows show up again.
---
 gtk/theme/HighContrast/_common.scss | 115 +++++++++---------
 gtk/theme/HighContrast/gtk.css      | 180 ++++++++++++++--------------
 2 files changed, 152 insertions(+), 143 deletions(-)

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index d17f8b0130..9ec85b35e2 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -128,6 +128,14 @@ rubberband {
 
 flowbox {
   & rubberband { @extend rubberband; }
+  flowboxchild {
+    padding: 3px;
+    border-radius: 3px;
+    &:selected {
+      @extend %selected_items;
+      outline-offset: -2px;
+    }
+  }
 }
 
 label {
@@ -483,7 +491,6 @@ toolbar.inline-toolbar toolbutton { // .inline-toolbar.toolbar here for
   }
 }
 
-
 %needs_attention {
   animation: needs_attention 150ms ease-in;
   $_dot_shadow: $fg_color;
@@ -1928,30 +1935,27 @@ separator {
  * Lists *
  *********/
 
-.list, .list-row {
+list {
   background-color: $base_color;
   border-color: $borders_color;
   &:backdrop {
     background-color: $backdrop_base_color;
     border-color: $backdrop_borders_color;
   }
+  & row {
+    padding: 2px;
+  }
 }
 
-.list-row,
-.grid-child {
-  padding: 2px;
-}
-
-
-.list-row.activatable,
-.list-row.activatable:backdrop,
-.list-row.activatable:backdrop:active,
-.list-row.activatable:backdrop:checked,
-.list-row.activatable:backdrop:insensitive,
-.list-row.activatable:backdrop:insensitive:active,
-.list-row.activatable:backdrop:insensitive:checked,
-.list-row.activatable:insensitive:active,
-.list-row.activatable:insensitive:checked {
+row.activatable,
+row.activatable:backdrop,
+row.activatable:backdrop:active,
+row.activatable:backdrop:checked,
+row.activatable:backdrop:insensitive,
+row.activatable:backdrop:insensitive:active,
+row.activatable:backdrop:insensitive:checked,
+row.activatable:insensitive:active,
+row.activatable:insensitive:checked {
   // reset button inherited stuff
   @extend %undecorated_button;
   background-color: transparentize($base_color,1); // for the transition
@@ -1960,7 +1964,7 @@ separator {
   box-shadow: none;   // and no box-shadow
 }
 
-.list-row {
+row {
   &.activatable {
     color: $fg_color;
     &:hover {
@@ -1993,7 +1997,8 @@ separator {
 
 
 // transition
-.list-row, .list-row.activatable {
+row,
+row.activatable {
   transition: all 300ms $ease-out-quad;
   &:hover { transition: none; }
 }
@@ -2020,11 +2025,13 @@ separator {
  * Expanders *
  *************/
 
-GtkExpander {
-  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
-  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
-  &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
-  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+expander {
+  & arrow {
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+    &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+  }
 }
 
 /************
@@ -2179,45 +2186,41 @@ GtkFileChooserDialog {
 }
 
 $_placesidebar_icons_opacity: 0.9;
-GtkSidebarRow {
-  // Needs overriding of the GtkListBoxRow padding
-  &.list-row {
-    padding: 0px;
-  }
-  // Using margins/padding directly in the SidebarRow
-  // will make the animation of the new bookmark row jump
-  .sidebar-revealer {
-    padding: 4px 14px 4px 12px;
-  }
-  .sidebar-icon {
-    opacity: $_placesidebar_icons_opacity; // dim the device icons
-    &:dir(ltr) { padding-right: 8px; }
-    &:dir(rtl) { padding-left: 8px; }
-  }
-  .sidebar-label {
-    &:dir(ltr) { padding-right: 2px; }
-    &:dir(rtl) { padding-left: 2px; }
-  }
-}
-
-// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
 placessidebar {
-
-  @at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
+  & row {
+    // Needs overriding of the GtkListBoxRow padding
+    padding: 0px;
+    // Using margins/padding directly in the SidebarRow
+    // will make the animation of the new bookmark row jump
+    & > revealer {
+      padding: 4px 14px 4px 12px;
+    }
+    & image.sidebar-icon {
+      opacity: $_placesidebar_icons_opacity; // dim the device icons
+      &:dir(ltr) { padding-right: 8px; }
+      &:dir(rtl) { padding-left: 8px; }
+    }
+    & label .sidebar-label {
+      &:dir(ltr) { padding-right: 2px; }
+      &:dir(rtl) { padding-left: 2px; }
+    }
+    @at-root button.sidebar-button { // @at-root needded to not change the specificity making button styling inheritance broken
                                     // so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
                                     // the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
 
-    &.image-button { padding: 5px; }
+      &.image-button { padding: 5px; }
 
-    @extend button.flat;
-    border-radius: 100%;
-    outline-radius: 100%;
-    &:not(:hover):not(:active) > image,
-    &:backdrop > image { opacity: $_placesidebar_icons_opacity };
+      @extend button.flat;
+      border-radius: 100%;
+      outline-radius: 100%;
+      &:not(:hover):not(:active) > image,
+      &:backdrop > image { opacity: $_placesidebar_icons_opacity };
+    }
   }
+
   // this is for indicating which sidebar row generated a popover
   // see https://bugzilla.gnome.org/show_bug.cgi?id=754411
-  .has-open-popup { @extend .list-row.activatable:hover; }
+  .has-open-popup { @extend row.activatable:hover; }
 
   .view {
 
@@ -2242,7 +2245,7 @@ placessidebar {
 }
 
 stacksidebar {
-  .list-row {
+  & row {
     padding: 10px 4px;
     > label {
       padding-left: 6px;
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 9deffdc5d5..50c3044681 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -113,6 +113,12 @@ treeview.view rubberband {
   border: 1px solid #000;
   background-color: rgba(0, 0, 0, 0.2); }
 
+flowbox flowboxchild {
+  padding: 3px;
+  border-radius: 3px; }
+  flowbox flowboxchild:selected {
+    outline-offset: -2px; }
+
 label:insensitive, label:backdrop:insensitive {
   color: gray; }
 
@@ -359,7 +365,7 @@ button {
   background-image: none;
   background-color: #fff;
   border-color: gray; }
-  button:hover, button.flat:hover, .sidebar-button.button:hover {
+  button:hover, button.flat:hover, button.sidebar-button:hover {
     border-width: 2px;
     border-style: solid;
     color: #000;
@@ -367,7 +373,7 @@ button {
     border-color: gray;
     background-image: none;
     -gtk-image-effect: highlight; }
-  button:active, button.flat:active, .sidebar-button.button:active, button:checked, button.flat:checked, .sidebar-button.button:checked {
+  button:active, button.flat:active, button.sidebar-button:active, button:checked, button.flat:checked, button.sidebar-button:checked {
     border-width: 2px;
     border-style: solid;
     background-image: none;
@@ -375,7 +381,7 @@ button {
     background-color: black;
     border-color: gray;
     transition-duration: 50ms; }
-  button:backdrop, button.flat:backdrop, .sidebar-button.button:backdrop {
+  button:backdrop, button.flat:backdrop, button.sidebar-button:backdrop {
     border-width: 2px;
     border-style: solid;
     color: #000;
@@ -384,21 +390,21 @@ button {
     background-image: none;
     text-shadow: none;
     icon-shadow: none; }
-    button:backdrop:active, button:backdrop:checked, button.flat:backdrop:active, .sidebar-button.button:backdrop:active, button.flat:backdrop:checked, .sidebar-button.button:backdrop:checked {
+    button:backdrop:active, button:backdrop:checked, button.flat:backdrop:active, button.sidebar-button:backdrop:active, button.flat:backdrop:checked, button.sidebar-button:backdrop:checked {
       border-width: 2px;
       border-style: solid;
       color: white;
       background-color: #8d8d8d;
       border-color: #8d8d8d;
       background-image: none; }
-    button:backdrop:insensitive, button.flat:backdrop:insensitive, .sidebar-button.button:backdrop:insensitive {
+    button:backdrop:insensitive, button.flat:backdrop:insensitive, button.sidebar-button:backdrop:insensitive {
       border-width: 2px;
       border-style: solid;
       color: gray;
       background-color: white;
       border-color: #8d8d8d;
       background-image: none; }
-    button:backdrop:insensitive:active, button.flat:backdrop:insensitive:active, .sidebar-button.button:backdrop:insensitive:active {
+    button:backdrop:insensitive:active, button.flat:backdrop:insensitive:active, button.sidebar-button:backdrop:insensitive:active {
       border-width: 2px;
       border-style: solid;
       color: gray;
@@ -414,7 +420,7 @@ button {
     background-image: none;
     text-shadow: none;
     icon-shadow: none; }
-    button:insensitive:active, button:insensitive.flat:active, .sidebar-button.button:insensitive:active {
+    button:insensitive:active, button:insensitive.flat:active, button.sidebar-button:insensitive:active {
       border-width: 2px;
       border-style: solid;
       color: gray;
@@ -623,29 +629,29 @@ button {
     background-image: none;
     background-color: #f6f6f6; }
 
-toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton > .sidebar-button.button {
+toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton > button.sidebar-button {
   border-radius: 0;
   border-left-style: none; }
-toolbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:first-child > .sidebar-button.button {
+toolbar.inline-toolbar toolbutton:first-child > button.flat, toolbar.inline-toolbar toolbutton:first-child > button.sidebar-button {
   border-radius: 3px 0 0 3px;
   border-left-style: solid; }
-toolbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar toolbutton:last-child > .sidebar-button.button {
+toolbar.inline-toolbar toolbutton:last-child > button.flat, toolbar.inline-toolbar toolbutton:last-child > button.sidebar-button {
   border-radius: 0 3px 3px 0; }
-toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.flat, toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > .sidebar-button.button {
+toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.flat, toolbar.inline-toolbar toolbutton:last-child:dir(rtl) > button.sidebar-button {
   border-right-style: solid; }
-toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar toolbutton:only-child > .sidebar-button.button {
+toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar toolbutton:only-child > button.sidebar-button {
   border-radius: 3px;
   border-style: solid; }
 
-stacksidebar .list-row.needs-attention > label {
+stacksidebar row.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; }
-  stacksidebar .list-row.needs-attention > label:backdrop {
+  stacksidebar row.needs-attention > label:backdrop {
     background-size: 6px 6px, 0 0; }
-  stacksidebar .list-row.needs-attention > label:dir(rtl) {
+  stacksidebar row.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 > combobox > button:dir(ltr) {
@@ -681,17 +687,17 @@ stacksidebar .list-row.needs-attention > label {
   border-radius: 3px;
   border-style: solid; }
 
-button.flat, .sidebar-button.button, button.flat:backdrop, .sidebar-button.button:backdrop, button.flat:insensitive:backdrop, .sidebar-button.button:insensitive:backdrop, modelbutton.flat,
+button.flat, button.sidebar-button, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:insensitive:backdrop, button.sidebar-button:insensitive:backdrop, modelbutton.flat,
 .menuitem.button.flat, modelbutton.flat:backdrop,
-.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, .list-row.activatable,
-.list-row.activatable:backdrop,
-.list-row.activatable:backdrop:active,
-.list-row.activatable:backdrop:checked,
-.list-row.activatable:backdrop:insensitive,
-.list-row.activatable:backdrop:insensitive:active,
-.list-row.activatable:backdrop:insensitive:checked,
-.list-row.activatable:insensitive:active,
-.list-row.activatable:insensitive:checked, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:backdrop:hover {
+.menuitem.button.flat:backdrop, button:link, button:visited, button:link:hover, button:link:active, button:visited:hover, button:visited:active, button:link:backdrop, button:visited:backdrop, notebook tab button, row.activatable,
+row.activatable:backdrop,
+row.activatable:backdrop:active,
+row.activatable:backdrop:checked,
+row.activatable:backdrop:insensitive,
+row.activatable:backdrop:insensitive:active,
+row.activatable:backdrop:insensitive:checked,
+row.activatable:insensitive:active,
+row.activatable:insensitive:checked, calendar.button, calendar.button:hover, calendar.button:backdrop, calendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -1317,9 +1323,9 @@ popover {
     color: #000;
     background-color: transparent;
     border: 0; }
-  popover button.flat, popover .sidebar-button.button,
+  popover button.flat, popover button.sidebar-button,
   popover button.flat:hover,
-  popover .sidebar-button.button:hover {
+  popover button.sidebar-button:hover {
     color: #000;
     text-shadow: none;
     transition: none; }
@@ -2001,24 +2007,24 @@ levelbar block.empty {
 textview text selection, textview text selection:focus, textview text selection:hover,
 .view selection,
 .view selection:focus,
-.view selection:hover, label selection, label selection:focus, label selection:hover, label selection:backdrop, entry selection
+.view selection:hover, flowbox flowboxchild:selected, label selection, label selection:focus, label selection:hover, label selection:backdrop, entry selection
 entry selection:focus, spinbutton selection
 entry selection:focus, entry selection
 spinbutton selection:focus, spinbutton selection
 spinbutton selection:focus, modelbutton.flat:hover, modelbutton.flat:selected,
 .menuitem.button.flat:hover,
-.menuitem.button.flat:selected, .list-row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar calendar:selected {
+.menuitem.button.flat:selected, row.activatable:selected, .sidebar:selected, placessidebar .view:selected, placessidebar calendar:selected {
   background-color: #000;
   color: #fff;
   outline-color: rgba(255, 255, 255, 0.3); }
   textview text selection:backdrop,
-  .view selection:backdrop, label selection:backdrop, entry selection
+  .view selection:backdrop, flowbox flowboxchild:backdrop:selected, label selection:backdrop, entry selection
   entry selection:backdrop:focus, spinbutton selection
   entry selection:backdrop:focus, entry selection
   spinbutton selection:backdrop:focus, spinbutton selection
   spinbutton selection:backdrop:focus, modelbutton.flat:backdrop:hover, modelbutton.flat:backdrop:selected,
   .menuitem.button.flat:backdrop:hover,
-  .menuitem.button.flat:backdrop:selected, .list-row.activatable:backdrop:selected, .sidebar:backdrop:selected, placessidebar .view:backdrop:selected, placessidebar calendar:backdrop:selected {
+  .menuitem.button.flat:backdrop:selected, row.activatable:backdrop:selected, .sidebar:backdrop:selected, placessidebar .view:backdrop:selected, placessidebar calendar:backdrop:selected {
     background-color: gray;
     color: #fff; }
 
@@ -2185,60 +2191,61 @@ placessidebar .view separator:backdrop {
 /*********
  * Lists *
  *********/
-.list, .list-row {
+list {
   background-color: #fff;
   border-color: gray; }
-  .list:backdrop, .list-row:backdrop {
+  list:backdrop {
     background-color: #fff;
     border-color: #8d8d8d; }
+  list row {
+    padding: 2px; }
 
-.list-row,
-.grid-child {
-  padding: 2px; }
-
-.list-row.activatable,
-.list-row.activatable:backdrop,
-.list-row.activatable:backdrop:active,
-.list-row.activatable:backdrop:checked,
-.list-row.activatable:backdrop:insensitive,
-.list-row.activatable:backdrop:insensitive:active,
-.list-row.activatable:backdrop:insensitive:checked,
-.list-row.activatable:insensitive:active,
-.list-row.activatable:insensitive:checked {
+row.activatable,
+row.activatable:backdrop,
+row.activatable:backdrop:active,
+row.activatable:backdrop:checked,
+row.activatable:backdrop:insensitive,
+row.activatable:backdrop:insensitive:active,
+row.activatable:backdrop:insensitive:checked,
+row.activatable:insensitive:active,
+row.activatable:insensitive:checked {
   background-color: rgba(255, 255, 255, 0);
   border-style: none;
   border-radius: 0;
   box-shadow: none; }
 
-.list-row.activatable {
+row.activatable {
   color: #000; }
-  .list-row.activatable:hover, placessidebar .has-open-popup {
+  row.activatable:hover, placessidebar .has-open-popup {
     background-color: #f2f2f2; }
-  .list-row.activatable:active {
+  row.activatable:active {
     box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
-  .list-row.activatable:selected {
+  row.activatable:selected {
     background-color: #000;
     color: #fff; }
-    .list-row.activatable:selected:active {
+    row.activatable:selected:active {
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
-    .list-row.activatable:selected:hover, placessidebar .has-open-popup:selected {
+    row.activatable:selected:hover, placessidebar .has-open-popup:selected {
       background-color: black; }
-    .list-row.activatable:selected:backdrop {
+    row.activatable:selected:backdrop {
       background-color: gray; }
-    .list-row.activatable:selected .button.flat {
+    row.activatable:selected .button.flat {
       color: #fff; }
-      .list-row.activatable:selected .button.flat:hover {
+      row.activatable:selected .button.flat:hover {
         color: #000; }
-      .list-row.activatable:selected .button.flat:active {
+      row.activatable:selected .button.flat:active {
         color: #fff; }
-.list-row .button.flat {
+row .button.flat {
   color: #000; }
-  .list-row .button.flat:active {
+  row .button.flat:active {
     color: #fff; }
 
-.list-row, .list-row.activatable {
+row,
+row.activatable {
   transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
-  .list-row:hover, .list-row.activatable:hover, placessidebar .has-open-popup {
+  row:hover,
+  row.activatable:hover,
+  placessidebar .has-open-popup {
     transition: none; }
 
 /*********************
@@ -2259,13 +2266,13 @@ placessidebar .view separator:backdrop {
 /*************
  * Expanders *
  *************/
-GtkExpander {
+expander arrow {
   -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
-  GtkExpander:dir(rtl) {
+  expander arrow:dir(rtl) {
     -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
-  GtkExpander:hover {
+  expander arrow:hover {
     color: #4d4d4d; }
-  GtkExpander:checked {
+  expander arrow:checked {
     -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
 /************
@@ -2472,28 +2479,27 @@ GtkFileChooserDialog .dialog-action-box {
       border-right: none;
       border-left: 1px solid gray; }
 
-GtkSidebarRow.list-row {
+placessidebar row {
   padding: 0px; }
-GtkSidebarRow .sidebar-revealer {
-  padding: 4px 14px 4px 12px; }
-GtkSidebarRow .sidebar-icon {
-  opacity: 0.9; }
-  GtkSidebarRow .sidebar-icon:dir(ltr) {
-    padding-right: 8px; }
-  GtkSidebarRow .sidebar-icon:dir(rtl) {
-    padding-left: 8px; }
-GtkSidebarRow .sidebar-label:dir(ltr) {
-  padding-right: 2px; }
-GtkSidebarRow .sidebar-label:dir(rtl) {
-  padding-left: 2px; }
-
-.sidebar-button.button {
-  border-radius: 100%;
-  outline-radius: 100%; }
-  .sidebar-button.button.image-button {
-    padding: 5px; }
-  .sidebar-button.button:not(:hover):not(:active) > image, .sidebar-button.button:backdrop > image {
+  placessidebar row > revealer {
+    padding: 4px 14px 4px 12px; }
+  placessidebar row image.sidebar-icon {
     opacity: 0.9; }
+    placessidebar row image.sidebar-icon:dir(ltr) {
+      padding-right: 8px; }
+    placessidebar row image.sidebar-icon:dir(rtl) {
+      padding-left: 8px; }
+  placessidebar row label .sidebar-label:dir(ltr) {
+    padding-right: 2px; }
+  placessidebar row label .sidebar-label:dir(rtl) {
+    padding-left: 2px; }
+  button.sidebar-button {
+    border-radius: 100%;
+    outline-radius: 100%; }
+    button.sidebar-button.image-button {
+      padding: 5px; }
+    button.sidebar-button:not(:hover):not(:active) > image, button.sidebar-button:backdrop > image {
+      opacity: 0.9; }
 placessidebar .view {
   color: #000;
   background-color: transparent; }
@@ -2502,12 +2508,12 @@ placessidebar .view {
     placessidebar .view .image:selected {
       color: #e6e6e6; }
 
-stacksidebar .list-row {
+stacksidebar row {
   padding: 10px 4px; }
-  stacksidebar .list-row > label {
+  stacksidebar row > label {
     padding-left: 6px;
     padding-right: 6px; }
-  stacksidebar .list-row.needs-attention > label {
+  stacksidebar row.needs-attention > label {
     background-size: 6px 6px, 0 0; }
 
 /*********