Jelajahi Sumber

bugfix: #172 Recent UI changes totally broke dark mode (#180)

James Read 2 tahun lalu
induk
melakukan
a09c278585
1 mengubah file dengan 40 tambahan dan 15 penghapusan
  1. 40 15
      webui/style.css

+ 40 - 15
webui/style.css

@@ -8,10 +8,10 @@ body {
 }
 }
 
 
 dialog {
 dialog {
+  box-shadow: 0 0 6px 0 #444;
   min-width: 600px;
   min-width: 600px;
   text-align: left;
   text-align: left;
   padding: 1em;
   padding: 1em;
-  box-shadow: 0 0 6px 0 #444;
 }
 }
 
 
 fieldset {
 fieldset {
@@ -33,11 +33,11 @@ fieldset#root-group {
 
 
 h1 {
 h1 {
   display: inline;
   display: inline;
-  padding-left: .5em;
   font-size: small;
   font-size: small;
+  padding-left: .5em;
 }
 }
 
 
-label#sidebar-toggler-button {
+#sidebar-toggler-button {
   top: 1em;
   top: 1em;
   left: 0.5em;
   left: 0.5em;
   height: 2em;
   height: 2em;
@@ -51,8 +51,8 @@ label#sidebar-toggler-button {
   color: #666;
   color: #666;
 }
 }
 
 
-label#sidebar-toggler-button:hover,
-label#sidebar-toggler-button:focus {
+#sidebar-toggler-button:hover,
+#sidebar-toggler-button:focus {
   color: black;
   color: black;
   cursor: pointer;
   cursor: pointer;
 }
 }
@@ -81,8 +81,8 @@ input:checked ~ aside {
 }
 }
 
 
 aside ul {
 aside ul {
-  padding: 0;
   margin: 0;
   margin: 0;
+  padding: 0;
 }
 }
 
 
 aside ul li {
 aside ul li {
@@ -186,7 +186,8 @@ details[open] {
 /* General Buttons */
 /* General Buttons */
 
 
 button,
 button,
-input[type="submit"] {
+input[type="submit"]
+{
   padding: 1em;
   padding: 1em;
   color: black;
   color: black;
   text-align: center;
   text-align: center;
@@ -361,10 +362,12 @@ form input[type="submit"]:first-child {
 
 
 button[name="cancel"]:hover {
 button[name="cancel"]:hover {
   background-color: salmon;
   background-color: salmon;
+  color: black;
 }
 }
 
 
 input[name="start"]:hover {
 input[name="start"]:hover {
   background-color: #aceaac;
   background-color: #aceaac;
+  color: black;
 }
 }
 
 
 span.argument-description {
 span.argument-description {
@@ -407,8 +410,9 @@ span.tag {
     color: white;
     color: white;
   }
   }
 
 
-  form.action-arguments {
-    background-color: #333;
+  dialog {
+    background-color: #222;
+    color: white;
   }
   }
 
 
   form div.wrapper {
   form div.wrapper {
@@ -416,13 +420,39 @@ span.tag {
   }
   }
 
 
   button,
   button,
-  input[type="submit"] {
+  input[type="submit"],
+  #sidebar-toggler-button {
     border: 1px solid #666;
     border: 1px solid #666;
     background-color: #222;
     background-color: #222;
     box-shadow: 0 0 6px 0 #444;
     box-shadow: 0 0 6px 0 #444;
     color: white;
     color: white;
   }
   }
 
 
+  #sidebar-toggler-button:focus,
+  #sidebar-toggler-button:hover
+  {
+    color: white;
+  }
+
+  aside {
+    background-color: #111;
+    color: white;
+  }
+
+  footer,
+  footer a {
+    color: gray;
+  }
+
+  aside ul li a:hover {
+    background-color: #666;
+    color: white;
+  }
+
+  .action-button-footer {
+    background-color: #111;
+  }
+
   button:disabled {
   button:disabled {
     background-color: black;
     background-color: black;
   }
   }
@@ -442,9 +472,4 @@ span.tag {
   tr:hover td {
   tr:hover td {
     background-color: #666;
     background-color: #666;
   }
   }
-
-  footer,
-  footer a {
-    color: gray;
-  }
 }
 }