style(datepicker): new colors for datetime

frontend/src/utils/form/datepicker.js

@@ -7,10 +7,10 @@ const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
 
 const DATEPICKER_CONFIG = {
   'global': {
-    locale: 'de',
+    locale: 'de',  // TODO: hardcoded
-    weekStart: 1,
+    weekStart: 1,  // TODO: hardcoded
-    stayOpen: true,
+    stayOpen: true,  // to prevent the instance from closing when selecting a date before selecting a time
-    dateFormat: 'dd.mm.YYYY',
+    dateFormat: 'dd.mm.YYYY',  // TODO: hardcoded
   },
   'datetime-local': {},
   'date': {
@@ -45,7 +45,6 @@ export class Datepicker {
       throw new Error('Datepicker utility called on unsupported element!');
     }
 
-    // this.datepickerInstance = flatpickr(element, datepickerConfig);
     this.datepickerInstance = datetime(element, { ...datepickerGlobalConfig, ...datepickerConfig });
 
     // mark initialized

frontend/vendor/datetime.css

@@ -134,7 +134,7 @@
     overflow: hidden;
     border-spacing: 0;
     border-collapse: separate;
-    background-color: #32B93C;
+    background-color: var(--color-primary);
     border-width: 0;
     border-style: solid;
     border-color: transparent;
@@ -147,7 +147,7 @@
     position: relative;
     text-align: center;
     line-height: 36px;
-    text-shadow: -1px -1px 0 #227d28;
+    text-shadow: -1px -1px 0 var(--color-dark);
     background-repeat: no-repeat;
     background-position: center center;
 }
@@ -161,19 +161,6 @@
 .tail-datetime-calendar .calendar-actions span.label{
     width: auto;
 }
-.tail-datetime-calendar .calendar-actions span:first-child:before,
-.tail-datetime-calendar .calendar-actions span:last-child:before{
-    top: 5px;
-    bottom: 5px;
-    width: 1px;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    content: "";
-    display: inline-block;
-    position: absolute;
-    background-color: #27912f;
-}
 .tail-datetime-calendar .calendar-actions span:first-child:before{
     right: -1px;
 }
@@ -185,7 +172,7 @@
     display: none;
 }
 .tail-datetime-calendar .calendar-actions span[data-action]:hover{
-    background-color: #27912f;
+    background-color: var(--color-dark);
 }
 .tail-datetime-calendar .calendar-actions span.action-prev{
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC\
@@ -244,7 +231,7 @@
 }
 .tail-datetime-calendar .calendar-datepicker table tr th{
     color: white;
-    background-color: #303438;
+    background-color: var(--color-lightblack);
 }
 .tail-datetime-calendar .calendar-datepicker table tr td{
     cursor: pointer;
@@ -337,8 +324,8 @@
 .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select span.inner,
 .tail-datetime-calendar .calendar-datepicker table tr th.calendar-week.date-select:hover span.inner,
 .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select:hover span.inner{
-    color: #E67D1E;
+    color: var(--color-fontsec);
-    border-color: #E67D1E;
+    border-color: var(--color-fontsec);
 }
 .tail-datetime-calendar .calendar-datepicker table tr td.calendar-month,
 .tail-datetime-calendar .calendar-datepicker table tr td.calendar-year,
@@ -475,8 +462,8 @@
     background-color: #E0E0E0;
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:focus{
-    color: white;
+    color: #303438;
-    background-color: #E67D1E;
+    background-color: #E0E0E0;
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input[type="text"]:disabled{
     cursor: not-allowed;
@@ -544,20 +531,20 @@
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up{
     border-color: rgba(255, 255, 255, 0.8);
-    background-color: #E67D1E;
+    background-color: var(--color-primary);
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up:hover{
-    background-color: #bc6415;
+    background-color: var(--color-dark);
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button.step-up:before{
     border-bottom-color: white;
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down{
     border-color: rgba(255, 255, 255, 0.8);
-    background-color: #E67D1E;
+    background-color: var(--color-primary);
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down:hover{
-    background-color: #bc6415;
+    background-color: var(--color-dark);
 }
 .tail-datetime-calendar .calendar-timepicker .timepicker-field input:focus + button + button.step-down:before{
     border-top-color: white;
@@ -630,7 +617,7 @@
     vertical-align: top;
     border-width: 1px;
     border-style: solid;
-    border-color: #32B93C;
+    border-color: var(--color-primary);
     border-radius: 14px;
     transition: border 284ms linear;
     -webkit-transition: border 284ms linear;
@@ -646,7 +633,7 @@
     content: "";
     display: inline-block;
     position: absolute;
-    background-color: #32B93C;
+    background-color: var(--color-primary);
     border-radius: 15px;
     vertical-align: top;
     transition: left 284ms linear, right 284ms linear 284ms, background 284ms linear;

frontend/vendor/main.js

@@ -1,3 +1,2 @@
 import './fontawesome.css';
-// import './flatpickr.css';
 import './datetime.css';

templates/i18n.julius

@@ -1,5 +1,6 @@
 if (window.App) {
   window.App.i18n.addMany(#{frontendI18n});
+  // window.App.i18n.setLang(lang);  TODO: set language string for datepicker config
 } else {
   throw new Error('I18n JavaScript service is missing!');
 }