X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fglobal%2Fdatetimeinputpickers.css;h=67aafe33e8958c068fe3b87aaf104b7640a115ce;hp=1cc6b0bf982f572ffb4cd2ed5990ba68ac22bd29;hb=HEAD;hpb=987dae1b58dde80be3e64488d7da121274fa8592

diff --git a/LCARStrek/global/datetimeinputpickers.css b/LCARStrek/global/datetimeinputpickers.css
index 1cc6b0bf..67aafe33 100644
--- a/LCARStrek/global/datetimeinputpickers.css
+++ b/LCARStrek/global/datetimeinputpickers.css
@@ -12,7 +12,8 @@
   --colon-width: 2rem;
   --day-period-spacing-width: 1rem;
   --calendar-width: 23.1rem;
-  --date-picker-item-height: 2.4rem;
+  --date-picker-item-height: 2.5rem;
+  --date-picker-item-width: 3.3rem;
 
   --border: 0.1rem solid #9C9CFF;
   --border-radius: 0.3rem;
@@ -21,6 +22,8 @@
   --font-color: #FF9F00;
   --fill-color: #000000;
 
+  --today-fill-color: #008484;
+
   --selected-font-color: #000000;
   --selected-fill-color: #008484;
 
@@ -29,10 +32,16 @@
   --button-font-color-active: #FF9F00;
   --button-fill-color-active: #000000;
 
-  --weekday-font-color: #6C6C6C;
-  --weekday-outside-font-color: #6C6C6C;
-  --weekend-font-color: #DA4E44;
-  --weekend-outside-font-color: #FF988F;
+  --weekday-header-font-color: #FF9F00;
+  --weekend-header-font-color: #FF0000;
+
+  --weekend-font-color: #FF0000;
+  --weekday-outside-font-color: #A09090;
+  --weekend-outside-font-color: #E7ADE7;
+
+  --weekday-disabled-font-color: rgba(255, 159, 0, 0.2);
+  --weekend-disabled-font-color: rgba(255, 0, 0, 0.2);
+  --disabled-fill-color: rgba(160, 144, 144, 0.8);
 
   --disabled-opacity: 0.2;
 }
@@ -65,7 +74,7 @@ button {
 .nav > button {
   width: 3rem;
   height: var(--date-picker-item-height);
-  filter: url("chrome://global/skin/filters.svg#fill");
+  -moz-context-properties: fill;
   fill: var(--button-font-color);
 }
 
@@ -77,12 +86,14 @@ button {
   fill: var(--button-font-color-active);
 }
 
-.nav > button.left {
-  background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
+.nav > button.prev,
+.nav > button.next:dir(rtl) {
+  background: url("chrome://global/skin/icons/calendar-arrow-left.svg") no-repeat 50% 50%;
 }
 
-.nav > button.right {
-  background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
+.nav > button.next,
+.nav > button.prev:dir(rtl) {
+  background: url("chrome://global/skin/icons/calendar-arrow-right.svg") no-repeat 50% 50%;
 }
 
 .month-year-container {
@@ -92,6 +103,7 @@ button {
   align-items: center;
   top: 0;
   left: 3rem;
+  right: 3rem;
   width: 17.1rem;
   height: var(--date-picker-item-height);
   z-index: 10;
@@ -101,7 +113,10 @@ button.month-year {
   font-size: 1.3rem;
   border: var(--border);
   border-radius: 0.3rem;
-  padding: 0.2rem 2.6rem 0.2rem 1.2rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
+  padding-inline-start: 1.2rem;
+  padding-inline-end: 2.6rem;
 }
 
 button.month-year:hover {
@@ -118,13 +133,13 @@ button.month-year::after {
   content: "";
   width: 2.6rem;
   height: 1.6rem;
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
-  filter: url("chrome://global/skin/filters.svg#fill");
+  background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
+  -moz-context-properties: fill;
   fill: var(--button-font-color);
 }
 
 button.month-year.active::after {
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .month-year-view {
@@ -193,11 +208,11 @@ button.month-year.active::after {
 }
 
 .week-header > div {
-  color: var(--weekday-font-color);
+  color: var(--weekday-header-font-color);
 }
 
 .week-header > div.weekend {
-  color: var(--weekend-font-color);
+  color: var(--weekend-header-font-color);
 }
 
 .days-viewport {
@@ -218,24 +233,45 @@ button.month-year.active::after {
   align-items: center;
   display: flex;
   height: var(--date-picker-item-height);
-  margin: 0.05rem 0.15rem;
   position: relative;
   justify-content: center;
-  width: 3rem;
+  width: var(--date-picker-item-width);
 }
 
-.days-view > div.outside {
+.days-view > .outside {
   color: var(--weekday-outside-font-color);
 }
 
-.days-view > div.weekend {
+.days-view > .weekend {
   color: var(--weekend-font-color);
 }
 
-.days-view > div.weekend.outside {
+.days-view > .weekend.outside {
   color: var(--weekend-outside-font-color);
 }
 
+.days-view > .out-of-range {
+  color: var(--weekday-disabled-font-color);
+  background: var(--disabled-fill-color);
+}
+
+.days-view > .out-of-range.weekend {
+  color: var(--weekend-disabled-font-color);
+}
+
+.days-view > .out-of-range::before {
+  display: none;
+}
+
+.days-view > div:hover::before,
+.days-view > .select::before,
+.days-view > .today::before {
+  top: 5%;
+  bottom: 5%;
+  left: 5%;
+  right: 5%;
+}
+
 #time-picker,
 .month-year-view {
   display: flex;
@@ -251,7 +287,7 @@ button.month-year.active::after {
 
 .spinner-container > button {
   height: var(--spinner-button-height);
-  filter: url("chrome://global/skin/filters.svg#fill");
+  -moz-context-properties: fill;
   fill: var(--button-font-color);
 }
 
@@ -264,11 +300,11 @@ button.month-year.active::after {
 }
 
 .spinner-container > button.up {
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .spinner-container > button.down {
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
 }
 
 .spinner-container.hide-buttons > button {
@@ -296,22 +332,26 @@ button.month-year.active::after {
   scroll-snap-coordinate: 0 0;
 }
 
+.spinner-container > .spinner > div::before,
+.calendar-container .days-view > div::before {
+  position: absolute;
+  top: 5%;
+  bottom: 5%;
+  left: 5%;
+  right: 5%;
+  z-index: -10;
+  border-radius: var(--border-radius);
+}
+
 .spinner-container > .spinner > div:hover::before,
 .calendar-container .days-view > div:hover::before {
   background: var(--fill-color);
   border: var(--border);
-  border-radius: var(--border-radius);
   content: "";
-  position: absolute;
-  top: 0%;
-  bottom: 0%;
-  left: 0%;
-  right: 0%;
-  z-index: -10;
 }
 
 .spinner-container > .spinner:not(.scrolling) > div.selection,
-.calendar-container .days-view > div.selection {
+.calendar-container .days-view > div.selection:not(.out-of-range) {
   color: var(--selected-font-color);
 }
 
@@ -319,14 +359,7 @@ button.month-year.active::after {
 .calendar-container .days-view > div.selection::before {
   background: var(--selected-fill-color);
   border: none;
-  border-radius: var(--border-radius);
   content: "";
-  position: absolute;
-  top: 0%;
-  bottom: 0%;
-  left: 0%;
-  right: 0%;
-  z-index: -10;
 }
 
 .spinner-container > .spinner > div.disabled::before,