Various dark mode fixes; styling on date/time fields.

Author: laryn

dist/css/base/gin.css

@@ -1856,7 +1856,9 @@ td.webform-has-field-suffix > .form-item > .form-element {
 .form-element,
 .form-select,
 .form-textarea,
-.form-number {
+.form-number,
+.form-date,
+.form-time {
   color: var(--gin-color-text);
   padding: var(--gin-spacing-s) var(--gin-spacing-m);
   background-color: var(--gin-bg-input);
@@ -1865,12 +1867,15 @@ td.webform-has-field-suffix > .form-item > .form-element {
   box-sizing: border-box;
   transition: var(--gin-transition);
   max-width: 100%;
+  margin-top: var(--gin-spacing-xxs);
 }
 
 .form-element:hover,
 .form-select:hover,
 .form-textarea:hover,
-.form-number:hover {
+.form-number:hover,
+.form-date:hover,
+.form-time:hover {
   border-color: var(--gin-color-text);
   box-shadow: inset 0 0 0 1px var(--gin-color-text);
 }
@@ -1881,7 +1886,11 @@ td.webform-has-field-suffix > .form-item > .form-element {
 .form-textarea--small,
 .form-textarea--extrasmall,
 .form-number--small,
-.form-number--extrasmall {
+.form-number--extrasmall,
+.form-date--small,
+.form-date--extrasmall,
+.form-time--small,
+.form-time--extrasmall {
   font-size: var(--gin-font-size-s);
   line-height: 1.5;
   border-radius: var(--gin-border-s);
@@ -1893,7 +1902,11 @@ td.webform-has-field-suffix > .form-item > .form-element {
 .form-textarea[disabled],
 .form-textarea[disabled]:hover,
 .form-number[disabled],
-.form-number[disabled]:hover {
+.form-number[disabled]:hover,
+.form-date[disabled],
+.form-date[disabled]:hover,
+.form-time[disabled],
+.form-time[disabled]:hover {
   cursor: not-allowed;
   color: var(--gin-color-disabled);
   background-color: var(--gin-color-disabled-bg) !important;
@@ -1904,7 +1917,9 @@ td.webform-has-field-suffix > .form-item > .form-element {
 .gin--dark-mode .form-element,
 .gin--dark-mode .form-select,
 .gin--dark-mode .form-textarea,
-.gin--dark-mode .form-number {
+.gin--dark-mode .form-number,
+.gin--dark-mode .form-date,
+.gin--dark-mode .form-time {
   color-scheme: dark;
 }
 
@@ -3866,6 +3881,14 @@ hr {
   background-color: transparent;
 }
 
+.gin--dark-mode .system-status-report .status-title {
+  color: #fff;
+}
+
+.gin--dark-mode .system-status-report .status-description {
+  color: var(--gin-color-text-light);
+}
+
 table.diff .diffchange {
   color: var(--gin-color-danger);
 }

dist/css/theme/dialog.css

@@ -338,7 +338,9 @@
 .ui-dialog .form-element,
 .ui-dialog .form-select,
 .ui-dialog .form-textarea,
-.ui-dialog .form-number {
+.ui-dialog .form-number,
+.ui-dialog .form-date,
+.ui-dialog .form-time {
   color: var(--gin-color-text);
   padding: var(--gin-spacing-s) var(--gin-spacing-m);
   background-color: var(--gin-bg-input);
@@ -347,12 +349,15 @@
   box-sizing: border-box;
   transition: var(--gin-transition);
   max-width: 100%;
+  margin-top: var(--gin-spacing-xxs);
 }
 
 .ui-dialog .form-element:hover,
 .ui-dialog .form-select:hover,
 .ui-dialog .form-textarea:hover,
-.ui-dialog .form-number:hover {
+.ui-dialog .form-number:hover,
+.ui-dialog .form-date:hover,
+.ui-dialog .form-time:hover {
   border-color: var(--gin-color-text);
   box-shadow: inset 0 0 0 1px var(--gin-color-text);
 }
@@ -363,7 +368,11 @@
 .ui-dialog .form-textarea--small,
 .ui-dialog .form-textarea--extrasmall,
 .ui-dialog .form-number--small,
-.ui-dialog .form-number--extrasmall {
+.ui-dialog .form-number--extrasmall,
+.ui-dialog .form-date--small,
+.ui-dialog .form-date--extrasmall,
+.ui-dialog .form-time--small,
+.ui-dialog .form-time--extrasmall {
   font-size: var(--gin-font-size-s);
   line-height: 1.5;
   border-radius: var(--gin-border-s);
@@ -375,7 +384,11 @@
 .ui-dialog .form-textarea[disabled],
 .ui-dialog .form-textarea[disabled]:hover,
 .ui-dialog .form-number[disabled],
-.ui-dialog .form-number[disabled]:hover {
+.ui-dialog .form-number[disabled]:hover,
+.ui-dialog .form-date[disabled],
+.ui-dialog .form-date[disabled]:hover,
+.ui-dialog .form-time[disabled],
+.ui-dialog .form-time[disabled]:hover {
   cursor: not-allowed;
   color: var(--gin-color-disabled);
   background-color: var(--gin-color-disabled-bg) !important;
@@ -386,7 +399,9 @@
 .gin--dark-mode .ui-dialog .form-element,
 .gin--dark-mode .ui-dialog .form-select,
 .gin--dark-mode .ui-dialog .form-textarea,
-.gin--dark-mode .ui-dialog .form-number {
+.gin--dark-mode .ui-dialog .form-number,
+.gin--dark-mode .ui-dialog .form-date,
+.gin--dark-mode .ui-dialog .form-time {
   color-scheme: dark;
 }
 

styles/base/_form.scss

@@ -22,7 +22,9 @@ $maxWidth: 520px;
 .form-element,
 .form-select,
 .form-textarea,
-.form-number {
+.form-number,
+.form-date,
+.form-time {
   color: var(--gin-color-text);
   padding: var(--gin-spacing-s) var(--gin-spacing-m);
   background-color: var(--gin-bg-input);
@@ -31,6 +33,7 @@ $maxWidth: 520px;
   box-sizing: border-box;
   transition: var(--gin-transition);
   max-width: 100%;
+  margin-top: var(--gin-spacing-xxs);
 
   &:hover {
     border-color: var(--gin-color-text);

styles/base/_system-modules.scss

@@ -18,4 +18,14 @@
   #system-modules .table-filter {
     background-color: transparent;
   }
+
+  .system-status-report {
+    .status-title {
+      color: #fff;
+    }
+
+    .status-description {
+      color: var(--gin-color-text-light);
+    }
+  }
 }