Fixed gtk4, improved tabs, gtk4 marked scales. Now I'd say it's publishable!

color_themes/green-magic.css

@@ -0,0 +1,38 @@
+/*
+ * Inspired by Quake World oomox/themix preset
+ * */
+
+@define-color window_fg #eeeeec;
+@define-color window_bg #3b3b3b;
+@define-color text_widget_fg #eeeeec;
+@define-color text_widget_bg #65543f;
+
+@define-color disabled_fg mix(@window_fg, @window_bg, 0.5);
+@define-color disabled_bg mix(@window_bg, @text_widget_bg, 0.5);
+
+@define-color selected_fg #f6cb33;
+@define-color selected_bg #003700;
+
+
+@define-color button_fg #eeeeec;
+@define-color button_bg #333333;
+@define-color button_pushed_fg @button_fg;
+@define-color button_pushed_bg mix(@button_bg, @selected_bg, 0.5);
+
+@define-color border_color shade(mix(@window_fg, @text_widget_bg, 0.5), 0.5);
+
+
+@define-color warning_color #f57900;
+@define-color error_color #990000;
+@define-color success_color #73d216;
+
+
+@define-color titlebar_active_fg #f6cb33;
+@define-color titlebar_active_bg @selected_bg;
+
+@define-color titlebar_backdrop_fg #eeeeec;
+@define-color titlebar_backdrop_bg #333333;
+
+@define-color hint_fg #f6cb33;
+@define-color hint_bg #000000;
+

gtk-4.0/gtk.css

@@ -1,5 +1,7 @@
 @import "../gtk-common/common.css";
 
+@define-color shadow_color shade(@window_bg, 0.1); /* for some reason, it behaves differently than gtk3! */
+
 
 * {
   padding: 0;

gtk-common/common.css

@@ -22,12 +22,12 @@ widgets main borders color. This "borders" color should be transformed to border
  @define-color unfocused_borders @borders; /*shade(@borders, 1.05);*/
 
 /*highlight for buttons*/
-@define-color highlight_color mix(white, @window_bg, 0.6);
+@define-color highlight_color shade(@window_bg, 3); /*mix(white, @window_bg, 0.6);*/
 
 /*text shadows to simulate "groove" (or "outset")*/
 @define-color text_shadow_color black;
 
-@define-color shadow_color mix(black, @window_bg, 0.5);
+@define-color shadow_color shade(@window_bg, 0.4);
 
 /* scale slider colors*/
 @define-color slider_inner_color @warning_color_breeze;
@@ -2157,6 +2157,12 @@ popover.background {
     margin: 3px; }
   popover.background list separator {
     margin: 0px; }
+  popover.background > arrow { /*in gtk4 popover.background is transparent, and it is its > contents that has background and shadow... this causes issues with picom, therefore I don't like this trick... so no visible arrow and that's it! */
+  	background: none;
+	border: none;
+	box-shadow: none;
+  	
+  }
 
 
 /*************
@@ -2286,6 +2292,7 @@ notebook > header > tabs > tab {
     border-color: transparent;
     border-radius: 0.3em;
     background-color: mix(@window_bg, @window_fg, 0.14);
+    box-shadow: inset 0 0 0 1px alpha(@shadow_color, 0.1);
     /*border: 1px solid @borders;*/
 }
 
@@ -2309,6 +2316,7 @@ notebook > header.top > tabs > tab {
   margin-bottom: 2px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
+  background-image: linear-gradient(to top, alpha(@shadow_color, 0.3), alpha(@shadow_color, 0) 20%);
 
 }
 
@@ -2321,6 +2329,7 @@ notebook > header.bottom > tabs > tab {
   margin-top: 2px;
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
+  background-image: linear-gradient(to bottom, alpha(@shadow_color, 0.3), alpha(@shadow_color, 0) 20%);
   /*border-bottom-color: transparent;*/
 }
 
@@ -2338,6 +2347,7 @@ notebook > header.left > tabs > tab {
   padding-bottom: 3px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
+  background-image: linear-gradient(to left, alpha(@shadow_color, 0.3), alpha(@shadow_color, 0) 10%);
   /*border-bottom-color: transparent;*/
 }
 
@@ -2355,6 +2365,7 @@ notebook > header.right > tabs > tab {
   padding-bottom: 3px;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
+  background-image: linear-gradient(to right, alpha(@shadow_color, 0.3), alpha(@shadow_color, 0) 10%);
   /*border-bottom-color: transparent;*/
 }
 
@@ -2381,7 +2392,7 @@ notebook > header.top > tabs > tab:checked {
   box-shadow: /*0 2px 2px -1px black,*/
         4px 0px 2px -3px alpha(@shadow_color, 0.5),
        -4px 0px 2px -3px alpha(@shadow_color, 0.5),
-        inset 0 1px 1px 0 alpha(@highlight_color, 0.5);
+        inset 0 1px 0px 0 alpha(@highlight_color, 0.5);
         /*inset 0 -1px 1px 0 alpha(black, 0.5);*/
 }
 
@@ -2390,7 +2401,7 @@ margin-top: -1px;
 padding-top: .3em;
 border-top-right-radius: 0px;
 border-top-left-radius: 0px;
-
+background-image: linear-gradient(to top, alpha(@shadow_color, 0.2), alpha(@shadow_color, 0));
 box-shadow: 2px 3px 2px -2px alpha(@shadow_color, 0.25),
            -2px 3px 2px -2px alpha(@shadow_color, 0.25),
         /*inset 0 1px 1px 0 alpha(white, 0.5);*/
@@ -2399,25 +2410,25 @@ box-shadow: 2px 3px 2px -2px alpha(@shadow_color, 0.25),
 
 notebook > header.right > tabs > tab:checked {
 margin-left: -1px;
-padding-left: 1.3em;
+/*padding-left: 1.3em;*/
 border-top-left-radius: 0px;
 border-bottom-left-radius: 0px;
 background-image:
       linear-gradient(to left, alpha(@highlight_color, 0.6), alpha(@highlight_color, 0));
 box-shadow: 1px 3px 2px -2px @shadow_color,
-        inset 0 1px 1px 0 alpha(@highlight_color, 0.5);
+        inset 0 1px 0px 0 alpha(@highlight_color, 0.5);
         /*inset 0 -1px 1px 0 alpha(black, 0.5);*/
 }
 
 notebook > header.left > tabs > tab:checked {
 margin-right: -1px;
-padding-right: 1.3em;
+/*padding-right: 1.3em;*/
 border-top-right-radius: 0px;
 border-bottom-right-radius: 0px;
 background-image:
       linear-gradient(to right, alpha(@highlight_color, 0.6), alpha(@highlight_color, 0));
 box-shadow: -1px 3px 2px -2px @shadow_color,
-        inset 0 1px 1px 0 alpha(@highlight_color, 0.5);
+        inset 0 1px 0px 0 alpha(@highlight_color, 0.5);
         /*inset 0 -1px 1px 0 alpha(black, 0.5);*/
 }
      
@@ -2837,7 +2848,7 @@ checkbutton.text-button, radiobutton.text-button {
 
 check,
 radio {
-  margin: 0 4px;
+  margin: 0;
   background: @text_widget_bg;
   box-shadow:
 	0px 1px 0px 0px alpha(@highlight_color, 0.5),
@@ -2849,17 +2860,25 @@ radio {
   padding: 1px;
   border: 1px solid @text_widget_fg;
   -gtk-icon-source: none; }
+check:dir(ltr), radio:dir(ltr) {
+	margin-right: 4px;
+}
+check:dir(rtl), radio:dir(rtl) {
+	margin-left: 4px;
+}
+  /*
   check:only-child,
   radio:only-child {
-    margin: 0; }
-  popover check.left:dir(rtl), popover
+    margin: 0; }*/
+    
+  /*popover check.left:dir(rtl), popover
   radio.left:dir(rtl) {
     margin-left: 0;
     margin-right: 12px; }
   popover check.right:dir(ltr), popover
   radio.right:dir(ltr) {
     margin-left: 12px;
-    margin-right: 0; }
+    margin-right: 0; }*/
   check:indeterminate,
   radio:indeterminate {
     background: shade(mix(@warning_color_breeze,@selected_bg,0.5), 1.025);
@@ -3148,6 +3167,9 @@ progressbar.horizontal trough, scale.horizontal trough, levelbar.horizontal trou
     color: alpha(currentColor,0.55); }
   scale marks {
     color: alpha(currentColor,0.55); }
+  scale mark {
+    background-color: alpha(currentColor,0.55); }
+    /*
     scale marks.top {
       margin-bottom: 6px;
       margin-top: -12px; }
@@ -3172,6 +3194,7 @@ progressbar.horizontal trough, scale.horizontal trough, levelbar.horizontal trou
   scale.fine-tune marks.bottom {
     margin-left: 6px;
     margin-right: -9px; }
+    */
   scale.horizontal indicator {
     min-height: 6px;
     min-width: 1px; }
@@ -3182,6 +3205,7 @@ progressbar.horizontal trough, scale.horizontal trough, levelbar.horizontal trou
     min-width: 6px; }
   scale.vertical.fine-tune indicator {
     min-width: 3px; }
+    
   scale.horizontal.marks-before:not(.marks-after) slider {
     margin: -11px -4px;
     padding: 0px;