Adwaita: colorpicker and colorbutton fixes.
authorLapo Calamandrei <calamandrei@gmail.com>
Wed, 15 Apr 2015 19:43:59 +0000 (21:43 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Wed, 15 Apr 2015 19:43:59 +0000 (21:43 +0200)
With nasty gross ugly code, no other ways, sorry.

gtk/theme/Adwaita/_common.scss
gtk/theme/Adwaita/gtk-contained-dark.css
gtk/theme/Adwaita/gtk-contained.css

index dc3e1785350747af617aa9f3ce6211c039d6d400..da11e78ae6a3cdc7def0e61b69840e22b2ac8b51 100644 (file)
@@ -812,9 +812,11 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   }
 }
 
+
 GtkColorButton.button {
   padding: 5px; // Uniform padding on the GtkColorButton
-  GtkColorSwatch {
+
+  GtkColorSwatch:only-child:first-child:last-child { //*-child mess needed since we get overridden by the colorpicker selectors
     border-radius: 0;
     box-shadow: inset 0 1px 1px transparentize(black, 0.9),
                 _widget_edge();
@@ -3086,7 +3088,7 @@ GtkInfoBar {
 
 GtkColorSwatch {
   // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
-  // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
+  // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
   // is applied to the overlay box.
 
   $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
@@ -3113,18 +3115,18 @@ GtkColorSwatch {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &.left, &:first-child, &:first-child .overlay {
+  &.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
   }
-  &.right, &:last-child, &:last-child .overlay {
+  &.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &:only-child, &:only-child .overlay {
-    border-radius: 5px;
-  }
-  // nth-child works just on the custom colors row
+  &:only-child:not(.overlay), &:only-child > .overlay { border-radius: 5px; }
+  // nth-child is used for the custom colors row.
+  // the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
+  // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
 
   // hover effect
   &:hover,
index fc4b62f49263fd3a2b96a17a95ede4a4492b39db..4befff93ee1653426a7ee9bcb09a806167fa0f70 100644 (file)
@@ -1316,13 +1316,10 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton,
 GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
 .titlebar GtkColorButton.button.titlebutton {
   padding: 5px; }
-  GtkColorButton.button GtkColorSwatch, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch,
-  .titlebar GtkColorButton.button.titlebutton GtkColorSwatch {
+  GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child {
     border-radius: 0;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-    GtkColorButton.button GtkColorSwatch:insensitive, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive,
-    .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, GtkColorButton.button GtkColorSwatch:backdrop, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop,
-    .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop {
+    GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:insensitive, GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:backdrop {
       box-shadow: none; }
 
 /*********
@@ -4246,13 +4243,13 @@ GtkColorSwatch {
   GtkColorSwatch.bottom {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay {
+  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay {
+  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
+  GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
     border-radius: 5px; }
   GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
index af6856c2db281fc9f9708cf267b9d5ec2152c878..100ade1f396bdcd9d43e2a6cc62fde58edaeca99 100644 (file)
@@ -1316,13 +1316,10 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton,
 GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
 .titlebar GtkColorButton.button.titlebutton {
   padding: 5px; }
-  GtkColorButton.button GtkColorSwatch, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch,
-  .titlebar GtkColorButton.button.titlebutton GtkColorSwatch {
+  GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child {
     border-radius: 0;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-    GtkColorButton.button GtkColorSwatch:insensitive, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive,
-    .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, GtkColorButton.button GtkColorSwatch:backdrop, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop,
-    .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop {
+    GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:insensitive, GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:backdrop {
       box-shadow: none; }
 
 /*********
@@ -4418,13 +4415,13 @@ GtkColorSwatch {
   GtkColorSwatch.bottom {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay {
+  GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay {
+  GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
+  GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
     border-radius: 5px; }
   GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);