Draw check and radio using CSS

gtk-3.0/gtk-widgets-assets.css

@@ -1,100 +1,223 @@
 /*******************
  * check and radio *
  *******************/
-/* draw regular check and radio items using our assets */
 .check,
 .check row:selected,
 .check row:selected:focus {
-    background-image: url("assets/checkbox-unchecked.svg");
+    background-image: linear-gradient(to bottom, @theme_base_color, @theme_base_color),
+                      linear-gradient(to bottom, @theme_base_color, @theme_base_color),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center, center center, 6% 6%, 6% 94%, 94% 94%, 94% 6%, 0% 0%, 0% 100%, 100% 100%, 100% 0%;
+    background-size: 80% 90%, 90% 80%, 80% 100%, 100% 80%, 10% 10%, 10% 10%, 10% 10%, 10% 10%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
+    background-repeat: no-repeat;
 }
 
 .check:insensitive,
 .check row:selected:insensitive,
 .check row:selected:focus:insensitive {
-    background-image: url("assets/checkbox-unchecked-insensitive.svg");
+    background-image: linear-gradient(to bottom, shade(@theme_base_color, 0.85), shade(@theme_base_color, 0.85)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.85), shade(@theme_base_color, 0.85)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center, center center, 6% 6%, 6% 94%, 94% 94%, 94% 6%, 0% 0%, 0% 100%, 100% 100%, 100% 0%;
+    background-size: 80% 90%, 90% 80%, 80% 100%, 100% 80%, 10% 10%, 10% 10%, 10% 10%, 10% 10%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
+    background-repeat: no-repeat;
 }
 
 .check:active,
 .check row:selected:active,
 .check row:selected:focus:active {
-    background-image: url("assets/checkbox-checked.svg");
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
+                      linear-gradient(45deg, transparent, transparent 30%, @theme_selected_bg_color 30%, @theme_selected_bg_color 70%, transparent 70%, transparent),
+                      linear-gradient(-45deg, transparent, transparent 37%, @theme_selected_bg_color 37%, @theme_selected_bg_color 62%, transparent 62%, transparent),
+                      linear-gradient(to bottom, @theme_base_color, @theme_base_color),
+                      linear-gradient(to bottom, @theme_base_color, @theme_base_color),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: 17% 50%, 41% 73%, 90% 26%, 24% 64%, 76% 48%, center center, center center, center center, center center, 6% 6%, 6% 94%, 94% 94%, 94% 6%, 0% 0%, 0% 100%, 100% 100%, 100% 0%;
+    background-size: 17% 17%, 20% 20%, 18% 18%, 30% 30%, 50% 50%, 80% 90%, 90% 80%, 80% 100%, 100% 80%, 10% 10%, 10% 10%, 10% 10%, 10% 10%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
+    background-repeat: no-repeat;
 }
 
 .check:active:insensitive,
 .check row:selected:active:insensitive,
 .check row:selected:focus:active:insensitive {
-    background-image: url("assets/checkbox-checked-insensitive.svg");
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      linear-gradient(45deg, transparent, transparent 30%, shade(@theme_base_color, 0.6) 30%, shade(@theme_base_color, 0.6) 70%, transparent 70%, transparent),
+                      linear-gradient(-45deg, transparent, transparent 37%, shade(@theme_base_color, 0.6) 37%, shade(@theme_base_color, 0.6) 62%, transparent 62%, transparent),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.85), shade(@theme_base_color, 0.85)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.85), shade(@theme_base_color, 0.85)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: 17% 50%, 41% 73%, 90% 26%, 24% 64%, 76% 48%, center center, center center, center center, center center, 6% 6%, 6% 94%, 94% 94%, 94% 6%, 0% 0%, 0% 100%, 100% 100%, 100% 0%;
+    background-size: 17% 17%, 20% 20%, 18% 18%, 30% 30%, 50% 50%, 80% 90%, 90% 80%, 80% 100%, 100% 80%, 10% 10%, 10% 10%, 10% 10%, 10% 10%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
+    background-repeat: no-repeat;
 }
 
 .check:inconsistent,
 .check row:selected:inconsistent,
 .check row:selected:focus:inconsistent {
-    background-image: url("assets/checkbox-mixed.svg");
+    background-image: linear-gradient(to bottom, @theme_selected_bg_color, @theme_selected_bg_color),
+                      linear-gradient(to bottom, @theme_base_color, @theme_base_color),
+                      linear-gradient(to bottom, @theme_base_color, @theme_base_color),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center, center center, center center, 6% 6%, 6% 94%, 94% 94%, 94% 6%, 0% 0%, 0% 100%, 100% 100%, 100% 0%;
+    background-size: 50% 12%, 80% 90%, 90% 80%, 80% 100%, 100% 80%, 10% 10%, 10% 10%, 10% 10%, 10% 10%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
+    background-repeat: no-repeat;
 }
 
 .check:inconsistent:insensitive,
 .check row:selected:inconsistent:insensitive,
 .check row:selected:focus:inconsistent:insensitive {
-    background-image: url("assets/checkbox-mixed-insensitive.svg");
+    background-image: linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.85), shade(@theme_base_color, 0.85)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.85), shade(@theme_base_color, 0.85)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center, center center, center center, 6% 6%, 6% 94%, 94% 94%, 94% 6%, 0% 0%, 0% 100%, 100% 100%, 100% 0%;
+    background-size: 50% 12%, 80% 90%, 90% 80%, 80% 100%, 100% 80%, 10% 10%, 10% 10%, 10% 10%, 10% 10%, 20% 20%, 20% 20%, 20% 20%, 20% 20%;
+    background-repeat: no-repeat;
 }
 
 .radio,
 .radio row:selected,
 .radio row:selected:focus {
-    background-image: url("assets/radio-unselected.svg");
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center;
+    background-size: 90% 90%, 100% 100%;
+    background-repeat: no-repeat;
 }
 
 .radio:insensitive,
 .radio row:selected:insensitive,
 .radio row:selected:focus:insensitive {
-    background-image: url("assets/radio-unselected-insensitive.svg");
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center;
+    background-size: 90% 90%, 100% 100%;
+    background-repeat: no-repeat;
 }
 
 .radio:active,
 .radio row:selected:active,
 .radio row:selected:focus:active {
-    background-image: url("assets/radio-selected.svg");
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center;
+    background-size: 40% 40%, 90% 90%, 100% 100%;
+    background-repeat: no-repeat;
 }
 
 .radio:active:insensitive,
 .radio row:selected:active:insensitive,
 .radio row:selected:focus:active:insensitive {
-    background-image: url("assets/radio-selected-insensitive.svg");
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center;
+    background-size: 40% 40%, 90% 90%, 100% 100%;
+    background-repeat: no-repeat;
 }
 
 .radio:inconsistent,
 .radio row:selected:inconsistent,
 .radio row:selected:focus:inconsistent {
-    background-image: url("assets/radio-mixed.svg");
+    background-image: linear-gradient(to bottom, @theme_selected_bg_color, @theme_selected_bg_color),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_base_color), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center;
+    background-size: 50% 12%, 90% 90%, 100% 100%;
+    background-repeat: no-repeat;
 }
 
 .radio:inconsistent:insensitive,
 .radio row:selected:inconsistent:insensitive,
 .radio row:selected:focus:inconsistent:insensitive {
-    background-image: url("assets/radio-mixed-insensitive.svg");
+    background-image: linear-gradient(to bottom, shade(@theme_base_color, 0.6), shade(@theme_base_color, 0.6)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.85)), to(transparent)),
+                      -gtk-gradient(radial, center center, 0, center center, 0.5, to(shade(@theme_base_color, 0.6)), to(transparent));
+
+    background-position: center center, center center, center center;
+    background-size: 50% 12%, 90% 90%, 100% 100%;
+    background-repeat: no-repeat;
 }
 
 .menuitem.check:active {
     background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
                       -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
                       -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_bg_color), to(transparent)),
-                      linear-gradient(45deg, 
+                      linear-gradient(45deg, transparent, transparent 30%, @theme_selected_bg_color 30%, @theme_selected_bg_color 70%, transparent 70%, transparent),
-                                      transparent,
+                      linear-gradient(-45deg, transparent, transparent 37%, @theme_selected_bg_color 37%, @theme_selected_bg_color 62%, transparent 62%, transparent);
-                                      transparent 30%,
-                                      @theme_selected_bg_color 30%,
-                                      @theme_selected_bg_color 70%,
-                                      transparent 70%,
-                                      transparent),
-                      linear-gradient(-45deg,
-                                      transparent,
-                                      transparent 37%,
-                                      @theme_selected_bg_color 37%,
-                                      @theme_selected_bg_color 62%,
-                                      transparent 62%,
-                                      transparent);
 
-    background-position: 16% 48%, 42% 74%, 88% 28%, 24% 64%, 76% 48%;
+    background-position: 17% 50%, 41% 73%, 90% 26%, 24% 64%, 76% 48%;
-    background-size: 16% 16%, 16% 16%, 16% 16%, 30% 30%, 50% 50%;
+    background-size: 17% 17%, 20% 20%, 18% 18%, 30% 30%, 50% 50%;
     background-repeat: no-repeat;
 }
 
@@ -102,23 +225,11 @@
     background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent)),
                       -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent)),
                       -gtk-gradient(radial, center center, 0, center center, 0.5, to(@theme_selected_fg_color), to(transparent)),
-                      linear-gradient(45deg, 
+                      linear-gradient(45deg, transparent, transparent 30%, @theme_selected_fg_color 30%, @theme_selected_fg_color 70%, transparent 70%, transparent),
-                                      transparent,
+                      linear-gradient(-45deg, transparent, transparent 37%, @theme_selected_fg_color 37%, @theme_selected_fg_color 62%, transparent 62%, transparent);
-                                      transparent 30%,
-                                      @theme_selected_fg_color 30%,
-                                      @theme_selected_fg_color 70%,
-                                      transparent 70%,
-                                      transparent),
-                      linear-gradient(-45deg,
-                                      transparent,
-                                      transparent 37%,
-                                      @theme_selected_fg_color 37%,
-                                      @theme_selected_fg_color 62%,
-                                      transparent 62%,
-                                      transparent);
 
-    background-position: 16% 48%, 42% 74%, 88% 28%, 24% 64%, 76% 48%;
+    background-position: 17% 50%, 41% 73%, 90% 26%, 24% 64%, 76% 48%;
-    background-size: 16% 16%, 16% 16%, 16% 16%, 30% 30%, 50% 50%;
+    background-size: 17% 17%, 20% 20%, 18% 18%, 30% 30%, 50% 50%;
     background-repeat: no-repeat;
 }
 
@@ -126,59 +237,38 @@
     background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent)),
                       -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent)),
                       -gtk-gradient(radial, center center, 0, center center, 0.5, to(mix(@menu_fg_color, @menu_bg_color, 0.5)), to(transparent)),
-                      linear-gradient(45deg, 
+                      linear-gradient(45deg, transparent, transparent 30%, mix(@menu_fg_color, @menu_bg_color, 0.5) 30%, mix(@menu_fg_color, @menu_bg_color, 0.5) 70%, transparent 70%, transparent),
-                                      transparent,
+                      linear-gradient(-45deg, transparent, transparent 37%, mix(@menu_fg_color, @menu_bg_color, 0.5) 37%, mix(@menu_fg_color, @menu_bg_color, 0.5) 62%, transparent 62%, transparent);
-                                      transparent 30%,
-                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 30%,
-                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 70%,
-                                      transparent 70%,
-                                      transparent),
-                      linear-gradient(-45deg,
-                                      transparent,
-                                      transparent 37%,
-                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 37%,
-                                      mix(@menu_fg_color, @menu_bg_color, 0.5) 62%,
-                                      transparent 62%,
-                                      transparent);
 
-    background-position: 16% 48%, 42% 74%, 88% 28%, 24% 64%, 76% 48%;
+    background-position: 17% 50%, 41% 73%, 90% 26%, 24% 64%, 76% 48%;
-    background-size: 16% 16%, 16% 16%, 16% 16%, 30% 30%, 50% 50%;
+    background-size: 17% 17%, 20% 20%, 18% 18%, 30% 30%, 50% 50%;
     background-repeat: no-repeat;
 }
 
 .menuitem.check:inconsistent,
 .menuitem.radio:inconsistent {
-    background-image: linear-gradient(to bottom,
+    background-image: linear-gradient(to bottom, @theme_selected_bg_color, @theme_selected_bg_color);
-                                      @theme_selected_bg_color,
-                                      @theme_selected_bg_color
-                                      );
 
     background-position: center center;
-    background-size: 60% 16%;
+    background-size: 50% 12%;
     background-repeat: no-repeat;
 }
 
 .menuitem.check:inconsistent:hover,
 .menuitem.radio:inconsistent:hover {
-    background-image: linear-gradient(to bottom,
+    background-image: linear-gradient(to bottom, @theme_selected_fg_color, @theme_selected_fg_color);
-                                      @theme_selected_fg_color,
-                                      @theme_selected_fg_color
-                                      );
 
     background-position: center center;
-    background-size: 60% 16%;
+    background-size: 50% 12%;
     background-repeat: no-repeat;
 }
 
 .menuitem.check:inconsistent:insensitive,
 .menuitem.radio:inconsistent:insensitive {
-    background-image: linear-gradient(to bottom,
+    background-image: linear-gradient(to bottom, mix(@menu_fg_color, @menu_bg_color, 0.5), mix(@menu_fg_color, @menu_bg_color, 0.5));
-                                      mix(@menu_fg_color, @menu_bg_color, 0.5),
-                                      mix(@menu_fg_color, @menu_bg_color, 0.5)
-                                      );
 
     background-position: center center;
-    background-size: 60% 16%;
+    background-size: 50% 12%;
     background-repeat: no-repeat;
 }
 
@@ -203,14 +293,6 @@
     background-repeat: no-repeat;
 }
 
-GtkIconView.content-view.cell.check {
-    background-image: url("assets/grid-selection-unchecked.svg");
-}
-
-GtkIconView.content-view.cell.check:active {
-    background-image: url("assets/grid-selection-checked.svg");
-}
-
 /******************
  * pane separator *
  ******************/
@@ -220,10 +302,10 @@ GtkIconView.content-view.cell.check:active {
                                       shade(@theme_bg_color, 0.8) 0%,
                                       shade(@theme_bg_color, 0.8) 20%,
                                       transparent 20%,
-                                      transparent 40%,
+                                      transparent 45%,
-                                      shade(@theme_bg_color, 0.8) 40%,
+                                      shade(@theme_bg_color, 0.8) 45%,
-                                      shade(@theme_bg_color, 0.8) 60%,
+                                      shade(@theme_bg_color, 0.8) 55%,
-                                      transparent 60%,
+                                      transparent 55%,
                                       transparent 80%,
                                       shade(@theme_bg_color, 0.8) 80%,
                                       shade(@theme_bg_color, 0.8)
@@ -239,10 +321,10 @@ GtkIconView.content-view.cell.check:active {
                                       shade(@theme_bg_color, 0.8) 0%,
                                       shade(@theme_bg_color, 0.8) 20%,
                                       transparent 20%,
-                                      transparent 40%,
+                                      transparent 45%,
-                                      shade(@theme_bg_color, 0.8) 40%,
+                                      shade(@theme_bg_color, 0.8) 45%,
-                                      shade(@theme_bg_color, 0.8) 60%,
+                                      shade(@theme_bg_color, 0.8) 55%,
-                                      transparent 60%,
+                                      transparent 55%,
                                       transparent 80%,
                                       shade(@theme_bg_color, 0.8) 80%,
                                       shade(@theme_bg_color, 0.8)