Adwaita: .osd check|radio style

gtk/theme/Adwaita/_colors.scss

@@ -44,7 +44,7 @@ $base_hover_color: transparentize($fg_color, 0.95);
 $tooltip_borders_color: transparentize(white, 0.9);
 $shadow_color: transparentize(black, 0.9);
 
-$drop_target_color: black; // FIXME: we need something different than black here...
+$drop_target_color: $success_color;
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

gtk/theme/Adwaita/_common.scss

@@ -2369,6 +2369,7 @@ radio {
   min-width: 14px;
   border: 1px solid;
   -gtk-icon-source: none;
+
   @include button(normal-alt, $edge: $shadow_color);
 
   &:hover { @include button(hover-alt, $edge: $shadow_color); }
@@ -2386,6 +2387,15 @@ radio {
     row:selected & { border-color: $selected_borders_color; }
   }
 
+  .osd & {
+    @include button(osd);
+
+    &:hover { @include button(osd); }
+    &:active { @include button(osd-active); }
+    &:backdrop { @include button(osd-backdrop); }
+    &:disabled { @include button(osd-insensitive); }
+  }
+
   menu menuitem & {
     margin: 0; // this is a workaround for a menu check/radio size allocation issue
 

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

@@ -236,7 +236,7 @@ entry, spinbutton:not(.vertical) {
   .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo {
     border-left-color: #0f2b48; }
   .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo {
-    border-left-color: black; }
+    border-left-color: #5aa411; }
   entry.error, spinbutton.error:not(.vertical) {
     color: #cc0000;
     border-color: #1a0000; }
@@ -306,8 +306,8 @@ entry, spinbutton:not(.vertical) {
       text-shadow: none;
       -gtk-icon-shadow: none; }
   entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) {
-    border-color: black;
-    box-shadow: inset 0 0 0 1px black; }
+    border-color: #5aa411;
+    box-shadow: inset 0 0 0 1px #5aa411; }
 
 .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) {
   border-top-color: #252626;
@@ -320,7 +320,7 @@ entry, spinbutton:not(.vertical) {
 .linked.vertical > entry + entry:focus:not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical) {
   border-top-color: #0f2b48; }
 .linked.vertical > entry + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical) {
-  border-top-color: black; }
+  border-top-color: #5aa411; }
 .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical),
 .linked.vertical > entry:focus:not(:only-child) + button,
 .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button,
@@ -332,7 +332,7 @@ entry, spinbutton:not(.vertical) {
 .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button,
 .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo,
 .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo {
-  border-top-color: black; }
+  border-top-color: #5aa411; }
 
 /***********
  * Buttons *
@@ -501,8 +501,8 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   .titlebar button.titlebutton:drop(active),
   .titlebar combobox:drop(active) button.titlebutton.combo,
   combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo {
-    border-color: black;
-    box-shadow: inset 0 0 0 1px black; }
+    border-color: #5aa411;
+    box-shadow: inset 0 0 0 1px #5aa411; }
 button.osd {
   color: #eeeeec;
   border-radius: 5px;
@@ -2560,6 +2560,54 @@ radio {
       text-shadow: none;
       -gtk-icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .osd check, .osd
+  radio {
+    color: #eeeeec;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8));
+    background-clip: padding-box;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+    outline-color: rgba(238, 238, 236, 0.3); }
+    .osd check:hover, .osd
+    radio:hover {
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8));
+      background-clip: padding-box;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black;
+      outline-color: rgba(238, 238, 236, 0.3); }
+    .osd check:active, .osd
+    radio:active {
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+      outline-color: rgba(238, 238, 236, 0.3); }
+    .osd check:backdrop, .osd
+    radio:backdrop {
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
+    .osd check:disabled, .osd
+    radio:disabled {
+      color: #878a89;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
   menu menuitem check, menu menuitem
   radio {
     margin: 0; }

gtk/theme/Adwaita/gtk-contained.css

@@ -236,7 +236,7 @@ entry, spinbutton:not(.vertical) {
   .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > button.combo {
     border-left-color: #4a90d9; }
   .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box > button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > button.combo {
-    border-left-color: black; }
+    border-left-color: #73d216; }
   entry.error, spinbutton.error:not(.vertical) {
     color: #cc0000;
     border-color: #cc0000; }
@@ -306,8 +306,8 @@ entry, spinbutton:not(.vertical) {
       text-shadow: none;
       -gtk-icon-shadow: none; }
   entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), spinbutton:drop(active):not(.vertical) {
-    border-color: black;
-    box-shadow: inset 0 0 0 1px black; }
+    border-color: #73d216;
+    box-shadow: inset 0 0 0 1px #73d216; }
 
 .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical) {
   border-top-color: #e2e2e0;
@@ -320,7 +320,7 @@ entry, spinbutton:not(.vertical) {
 .linked.vertical > entry + entry:focus:not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:focus:not(:only-child), .linked.vertical > entry + spinbutton:focus:not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:only-child):not(.vertical) {
   border-top-color: #4a90d9; }
 .linked.vertical > entry + entry:drop(active):not(:only-child), .linked.vertical > spinbutton:not(.vertical) + entry:drop(active):not(:only-child), .linked.vertical > entry + spinbutton:drop(active):not(:only-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):not(:only-child):not(.vertical) {
-  border-top-color: black; }
+  border-top-color: #73d216; }
 .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + spinbutton:not(.vertical),
 .linked.vertical > entry:focus:not(:only-child) + button,
 .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button,
@@ -332,7 +332,7 @@ entry, spinbutton:not(.vertical) {
 .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button,
 .linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo,
 .linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo {
-  border-top-color: black; }
+  border-top-color: #73d216; }
 
 /***********
  * Buttons *
@@ -501,8 +501,8 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   .titlebar button.titlebutton:drop(active),
   .titlebar combobox:drop(active) button.titlebutton.combo,
   combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) button.combo {
-    border-color: black;
-    box-shadow: inset 0 0 0 1px black; }
+    border-color: #73d216;
+    box-shadow: inset 0 0 0 1px #73d216; }
 button.osd {
   color: #eeeeec;
   border-radius: 5px;
@@ -2585,6 +2585,54 @@ radio {
   row:selected check, row:selected
   radio {
     border-color: #184472; }
+  .osd check, .osd
+  radio {
+    color: #eeeeec;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8));
+    background-clip: padding-box;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+    outline-color: rgba(238, 238, 236, 0.3); }
+    .osd check:hover, .osd
+    radio:hover {
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8));
+      background-clip: padding-box;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+      text-shadow: 0 1px black;
+      -gtk-icon-shadow: 0 1px black;
+      outline-color: rgba(238, 238, 236, 0.3); }
+    .osd check:active, .osd
+    radio:active {
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+      outline-color: rgba(238, 238, 236, 0.3); }
+    .osd check:backdrop, .osd
+    radio:backdrop {
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(32, 37, 38, 0.8));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
+    .osd check:disabled, .osd
+    radio:disabled {
+      color: #878a89;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      -gtk-icon-shadow: none; }
   menu menuitem check, menu menuitem
   radio {
     margin: 0; }