Merge branch 'master' into master

assets/css/styles.scss

@@ -10,7 +10,11 @@ $responsiveWidth: 720px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #4a4a4a;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, .5);
 }
 
 * {
@@ -78,6 +82,9 @@ body.sticky-footer footer {
 }
 
 button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin: 4px;
   padding: 8px 16px;
   border-radius: 4px;
@@ -88,9 +95,19 @@ button {
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
+  &.icon {
+    background-color: var(--bg-color);
+    color: var(--ac-color);
+    fill: var(--ac-color);
+
+    span {
+      margin-left: 8px;
+    }
+  }
+
   &:not([disabled]):hover,
   &:not(.disabled):focus {
-    background-color: transparent;
+    background-color: var(--bg-color);
     box-shadow: inset 0 0 0 2px var(--ac-color);
     color: var(--ac-color);
   }
@@ -122,51 +139,59 @@ fieldset.blue legend {
 }
 
 fieldset.gray {
-  border-color: #9B9B9B;
+  border-color: #BCC2CD;
 }
 
 fieldset.gray legend {
-  color: #9B9B9B;
+  color: #BCC2CD;
 }
 
 fieldset.green {
-  border-color: #B8E986;
+  border-color: #50fa7b;
 }
 
 fieldset.green legend {
-  color: #B8E986;
+  color: #50fa7b;
 }
 
 fieldset.cyan {
-  border-color: #50E3C2;
+  border-color: #8be9fd;
 }
 
 fieldset.cyan legend {
-  color: #50E3C2;
-}
-
-fieldset.blue-dark {
-  border-color: #4A90E2;
-}
-
-fieldset.blue-dark legend {
-  color: #4A90E2;
+  color: #8be9fd;
 }
 
 fieldset.purple {
-  border-color: #C198FB;
+  border-color: #bd93f9;
 }
 
 fieldset.purple legend {
-  color: #C198FB;
+  color: #bd93f9;
 }
 
 fieldset.orange {
-  border-color: #F5A623;
+  border-color: #ffb86c;
 }
 
 fieldset.orange legend {
-  color: #F5A623;
+  color: #ffb86c;
+}
+
+fieldset.pink {
+  border-color: #ff79c6;
+}
+
+fieldset.pink legend {
+  color: #ff79c6;
+}
+
+fieldset.red {
+  border-color: #ff5555;
+}
+
+fieldset.red legend {
+  color: #ff5555;
 }
 
 .hidden {
@@ -187,12 +212,19 @@ pre {
   font-weight: 700;
   font-size: 18px;
   font-family: monospace;
+  transition: all 0.2s ease-in-out;
 }
 
 select,
 input,
 option {
   height: 41px;
+
+  &:not([readonly]):hover,
+  &:not([readonly]):focus {
+    background-color: var(--bg-color);
+    box-shadow: inset 0 0 0 2px var(--ac-color);
+  }
 }
 
 input[type="checkbox"] {
@@ -231,6 +263,11 @@ input[type="checkbox"] {
   background-color: var(--err-color);
   color: #b2b2b2;
   cursor: default;
+
+  &.icon {
+    color: #b2b2b2;
+    fill: #b2b2b2;
+  }
 }
 
 label {
@@ -258,6 +295,10 @@ ol li {
   align-items: center;
 }
 
+.show-on-small-screen {
+  display: flex;
+}
+
 @media (max-width: $responsiveWidth) {
   header div {
     display: flex;
@@ -283,6 +324,10 @@ ol li {
   .hide-on-small-screen {
     display: none;
   }
+
+  .show-on-small-screen {
+    display: inline-flex;
+  }
 }
 
 #installPWA {
@@ -349,11 +394,8 @@ fieldset#history {
   margin: 4px;
 
   textarea {
-    width: 100%;
-  }
-
-  #response-details {
     margin: 0;
+    width: 100%;
   }
 
   .covers-response {

assets/css/themes.scss

@@ -7,37 +7,37 @@
 
 // Dark is the default theme variant.
 :root {
-  --bg-dark-color: #000000;
+  --bg-dark-color: #44475a;
   // Background color
-  --bg-color: #121212;
-	// Auto-complete color
-	--atc-color: #212121;
+  --bg-color: #282a36;
+  // Auto-complete color
+  --atc-color: #3C4556;
   // Text color
-  --fg-color: #FFF;
+  --fg-color: #f8f8f2;
 
   // Error color
-  --err-color: #393939;
+  --err-color: #3C4556;
 
   // Active color
-  --ac-color: #51FF0D;
+  --ac-color: #50fa7b;
   // Active text color
-  --act-color: #121212;
+  --act-color: #282a36;
 }
 
 :root.light {
-  --bg-dark-color: #ffffff;
+  --bg-dark-color: #e1e4eb;
   // Background color
-  --bg-color: #F6F8FA;
-	// Auto-complete color
-	--atc-color: #F1F1F1;
+  --bg-color: #ebeef5;
+  // Auto-complete color
+  --atc-color: #e1e4eb;
   // Text color
-  --fg-color: #121212;
+  --fg-color: #5d5d5f;
 
   // Error color
-  --err-color: invert(#393939, 1);
+  --err-color: invert(#3C4556, 1);
 
   // Active color
-  --ac-color: #51FF0D;
+  --ac-color: #57b5f9;
   // Active text color
-  --act-color: #121212;
+  --act-color: #ebeef5;
 }