Improvement: GTK3&4 - calendar selected item color

thekomer · Jan 19, 2022 · 16ac0dc · 16ac0dc
1 parent 9e9a40a
commit 16ac0dc
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 34 deletions.
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -1240,11 +1240,16 @@ calendar {
     background: linear-gradient(to right, #ff3300, #ffa100);
     box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
     color: white;
-    font-weight: bold;
-    border-radius: 3px; }
+    font-weight: bold; }
+    calendar:selected:backdrop {
+      border-radius: 1em;
+      color: rgba(191, 195, 205, 0.4);
+      background: rgba(255, 106, 0, 0.6);
+      box-shadow: 0px 0px 0px rgba(255, 106, 0, 0.98);
+      color: inherit; }
   calendar.header {
     border-bottom: 1px solid rgba(255, 255, 255, 0);
-    border-radius: 0; }
+    border-radius: 1px; }
     calendar.header:backdrop {
       border-color: rgba(255, 255, 255, 0); }
   calendar.button {

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -1240,11 +1240,16 @@ calendar {
     background: linear-gradient(to right, #ff3300, #ffa100);
     box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
     color: white;
-    font-weight: bold;
-    border-radius: 3px; }
+    font-weight: bold; }
+    calendar:selected:backdrop {
+      border-radius: 1em;
+      color: rgba(191, 195, 205, 0.4);
+      background: rgba(255, 106, 0, 0.6);
+      box-shadow: 0px 0px 0px rgba(255, 106, 0, 0.98);
+      color: inherit; }
   calendar.header {
     border-bottom: 1px solid rgba(255, 255, 255, 0);
-    border-radius: 0; }
+    border-radius: 1px; }
     calendar.header:backdrop {
       border-color: rgba(255, 255, 255, 0); }
   calendar.button {

diff --git a/gtk-3.0/widgets/_calendar.scss b/gtk-3.0/widgets/_calendar.scss
@@ -10,18 +10,21 @@ calendar {
 		//@extend %selected_items;
 		@include button(active-header);
 		font-weight: bold;
-		border-radius: 3px;
+		&:backdrop {
+			@include button(backdrop-active-header);
+			color: inherit;
+		}
 	}
 
 	&.header {
 		border-bottom: 1px solid transparentize($borders_color, 0.9);
-		border-radius: 0;
+		border-radius: 1px;
 		&:backdrop { border-color: transparentize($borders_color, 0.9); }
 	}
 
 	&.button {
 		@extend %undecorated_button;
-			color: transparentize($fg_color, 0.55);
+		color: transparentize($fg_color, 0.55);
 		&:hover {
 			@extend %undecorated_button;
 			color: $fg_color;

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -1223,13 +1223,18 @@ calendar {
     background: linear-gradient(to right, #ff3300, #ffa100);
     box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
     color: white;
-    font-weight: bold;
-    border-radius: 3px; }
+    font-weight: bold; }
+    calendar:selected:backdrop {
+      border-radius: 1em;
+      color: rgba(191, 195, 205, 0.4);
+      background: rgba(255, 106, 0, 0.6);
+      box-shadow: 0px 0px 0px rgba(255, 106, 0, 0.98);
+      color: inherit; }
   calendar.header {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0; }
+    border-bottom: 1px solid rgba(255, 255, 255, 0);
+    border-radius: 1px; }
     calendar.header:backdrop {
-      border-color: rgba(0, 0, 0, 0.1); }
+      border-color: rgba(255, 255, 255, 0); }
   calendar.button {
     color: rgba(191, 195, 205, 0.45); }
     calendar.button:hover {
@@ -4767,15 +4772,15 @@ headerbar.selection-mode button.titlebutton,
 textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection,
 textview text selection:focus,
 textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected,
-.menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
+.menuitem.button.flat:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
 entry selection:focus,
 entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected {
   background-color: #ff6a00; }
   row:selected label, label:selected, .selection-mode windowcontrols button, .view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected,
   textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection,
   textview text selection:focus,
   textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected,
-  .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
+  .menuitem.button.flat:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
   entry selection:focus,
   entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected {
     color: #fefefe;
@@ -4784,20 +4789,20 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec
     textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected,
     textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled,
     textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected,
-    .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled:focus, spinbutton:not(.vertical) selection:disabled,
+    .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled:focus, spinbutton:not(.vertical) selection:disabled,
     entry selection:disabled, row:disabled:selected {
       color: #ffb47f; }
     row:selected label:backdrop, label:backdrop:selected, .selection-mode windowcontrols button:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus,
     textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected,
     textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop,
     textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected,
-    .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop:focus, spinbutton:not(.vertical) selection:backdrop,
+    .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop:focus, spinbutton:not(.vertical) selection:backdrop,
     entry selection:backdrop, row:backdrop:selected {
       color: rgba(254, 254, 254, 0.5); }
       row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode windowcontrols button:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected,
       textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled,
       textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected,
-      .menuitem.button.flat:backdrop:disabled:selected, calendar:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled,
+      .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled,
       entry selection:backdrop:disabled, row:backdrop:disabled:selected {
         color: rgba(255, 125, 32, 0.85); }
 

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -1223,13 +1223,18 @@ calendar {
     background: linear-gradient(to right, #ff3300, #ffa100);
     box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
     color: white;
-    font-weight: bold;
-    border-radius: 3px; }
+    font-weight: bold; }
+    calendar:selected:backdrop {
+      border-radius: 1em;
+      color: rgba(191, 195, 205, 0.4);
+      background: rgba(255, 106, 0, 0.6);
+      box-shadow: 0px 0px 0px rgba(255, 106, 0, 0.98);
+      color: inherit; }
   calendar.header {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0; }
+    border-bottom: 1px solid rgba(255, 255, 255, 0);
+    border-radius: 1px; }
     calendar.header:backdrop {
-      border-color: rgba(0, 0, 0, 0.1); }
+      border-color: rgba(255, 255, 255, 0); }
   calendar.button {
     color: rgba(191, 195, 205, 0.45); }
     calendar.button:hover {
@@ -4767,15 +4772,15 @@ headerbar.selection-mode button.titlebutton,
 textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection,
 textview text selection:focus,
 textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected,
-.menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
+.menuitem.button.flat:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
 entry selection:focus,
 entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected {
   background-color: #ff6a00; }
   row:selected label, label:selected, .selection-mode windowcontrols button, .view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected,
   textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text selection,
   textview text selection:focus,
   textview text selection, flowbox flowboxchild:selected, modelbutton.flat:selected,
-  .menuitem.button.flat:selected, calendar:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
+  .menuitem.button.flat:selected, spinbutton:not(.vertical) selection:focus, spinbutton:not(.vertical) selection,
   entry selection:focus,
   entry selection, row:selected, treeview.view:selected:focus, treeview.view:selected {
     color: #fefefe;
@@ -4784,20 +4789,20 @@ entry selection, row:selected, treeview.view:selected:focus, treeview.view:selec
     textview text:disabled:selected:focus, .view text:disabled:selected, iconview text:disabled:selected,
     textview text:disabled:selected, iconview text selection:disabled:focus, .view text selection:disabled, iconview text selection:disabled,
     textview text selection:disabled, flowbox flowboxchild:disabled:selected, label:disabled selection, modelbutton.flat:disabled:selected,
-    .menuitem.button.flat:disabled:selected, calendar:disabled:selected, spinbutton:not(.vertical) selection:disabled:focus, spinbutton:not(.vertical) selection:disabled,
+    .menuitem.button.flat:disabled:selected, spinbutton:not(.vertical) selection:disabled:focus, spinbutton:not(.vertical) selection:disabled,
     entry selection:disabled, row:disabled:selected {
       color: #ffb47f; }
     row:selected label:backdrop, label:backdrop:selected, .selection-mode windowcontrols button:backdrop, iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, iconview text:backdrop:selected:focus,
     textview text:backdrop:selected:focus, .view text:backdrop:selected, iconview text:backdrop:selected,
     textview text:backdrop:selected, iconview text selection:backdrop:focus, .view text selection:backdrop, iconview text selection:backdrop,
     textview text selection:backdrop, flowbox flowboxchild:backdrop:selected, label:backdrop selection, modelbutton.flat:backdrop:selected,
-    .menuitem.button.flat:backdrop:selected, calendar:backdrop:selected, spinbutton:not(.vertical) selection:backdrop:focus, spinbutton:not(.vertical) selection:backdrop,
+    .menuitem.button.flat:backdrop:selected, spinbutton:not(.vertical) selection:backdrop:focus, spinbutton:not(.vertical) selection:backdrop,
     entry selection:backdrop, row:backdrop:selected {
       color: rgba(254, 254, 254, 0.5); }
       row:selected label:backdrop:disabled, label:backdrop:disabled:selected, .selection-mode windowcontrols button:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, .view text:backdrop:disabled:selected, iconview text:backdrop:disabled:selected,
       textview text:backdrop:disabled:selected, .view text selection:backdrop:disabled, iconview text selection:backdrop:disabled,
       textview text selection:backdrop:disabled, flowbox flowboxchild:backdrop:disabled:selected, label:disabled selection:backdrop, label:backdrop selection:disabled, modelbutton.flat:backdrop:disabled:selected,
-      .menuitem.button.flat:backdrop:disabled:selected, calendar:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled,
+      .menuitem.button.flat:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled,
       entry selection:backdrop:disabled, row:backdrop:disabled:selected {
         color: rgba(255, 125, 32, 0.85); }
 

diff --git a/gtk-4.0/widgets/_calendar.scss b/gtk-4.0/widgets/_calendar.scss
@@ -2,20 +2,24 @@
 * Calendar *
 ***********/
 calendar {
+	//padding: 0.2rem;
 	color: $text_color;
 	border: 1px solid $borders_color;
 
 	&:selected {
-		@extend %selected_items;
+		//@extend %selected_items;
 		@include button(active-header);
 		font-weight: bold;
-		border-radius: 3px;
+		&:backdrop {
+			@include button(backdrop-active-header);
+			color: inherit;
+		}
 	}
 
 	&.header {
-		border-bottom: 1px solid transparentize(black, 0.9);
-		border-radius: 0;
-		&:backdrop { border-color: transparentize(black, 0.9); }
+		border-bottom: 1px solid transparentize($borders_color, 0.9);
+		border-radius: 1px;
+		&:backdrop { border-color: transparentize($borders_color, 0.9); }
 	}
 
 	&.button {