Fix color contrasts and improve theme colors

assets/img/logo.svg

@@ -19,9 +19,9 @@
    id="svg6"
    sodipodi:docname="logo.svg"
    inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
-   inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox128.png"
-   inkscape:export-xdpi="512"
-   inkscape:export-ydpi="512">
+   inkscape:export-filename="/r/arisu/dev/streams/wms/assets/img/logox1024.png"
+   inkscape:export-xdpi="4096"
+   inkscape:export-ydpi="4096">
   <metadata
      id="metadata12">
     <rdf:RDF>
@@ -50,8 +50,8 @@
      id="namedview8"
      showgrid="false"
      inkscape:zoom="45.254834"
-     inkscape:cx="9.0192696"
-     inkscape:cy="11.978294"
+     inkscape:cx="12.300687"
+     inkscape:cy="13.723964"
      inkscape:window-x="1920"
      inkscape:window-y="32"
      inkscape:window-maximized="1"
@@ -63,7 +63,7 @@
        id="grid4542" />
   </sodipodi:namedview>
   <path
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00766c;fill-opacity:1;fill-rule:nonzero;stroke:#00766c;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00c3b2;fill-opacity:1;fill-rule:nonzero;stroke:#00c3b2;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      d="m 4.6020263,4.6020261 c -4.08077722,4.0820101 -4.08077722,10.7139369 0,14.7959479 m 0,0 0.6656889,-0.665689 c -3.7210992,-3.722224 -3.7210992,-9.7423466 0,-13.4645699 L 4.6020263,4.6020261 m 14.7959477,0 -0.665689,0.665689 c 3.721099,3.7222233 3.721099,9.7423459 0,13.4645699 l 0.665689,0.665689 m 0,0 c 4.080777,-4.082011 4.080777,-10.7139378 0,-14.7959479 M 8.0959735,15.904026 c -2.1644289,-2.162022 -2.1644289,-5.655225 0,-7.8172472 m 0,0 L 7.4302847,7.419251 c -2.5246945,2.5218873 -2.5246945,6.628577 0,9.150465 l 0.6656888,-0.66569 M 15.904026,8.0959736 c 2.164429,2.1620214 2.164429,5.6552244 0,7.8172474 m 0,0 0.66569,0.667527 c 2.524693,-2.521887 2.524693,-6.6285761 0,-9.1504633 l -0.66569,0.6656889"
      id="path4"
      inkscape:connector-curvature="0"

assets/sass/_vars.scss

@@ -1,23 +1,27 @@
-$primary: #1e2932;
+$primary: darken(#242b33, 2%);
 $primaryForeground: #f0f0f0;
-$secondary: #00766c;
+$secondary: lighten(#00766c, 10%);
 $secondaryForeground: $primaryForeground;
 
-$backgroundColor: $primary;
-$defaultTextColor: $primaryForeground;
+$backgroundColor: darken($primary, 4%);
+$defaultTextColor: #ffffff;
 
-$info: #49fb;
+$headerBackground: darken($primary, 7.5%);
+$footerBackground: lighten($headerBackground, 1%);
+$panelBackground: lighten($headerBackground, 1%);
+
+$info: #4499ff;
 $infoText: darken($info, 42%);
 $infoColor: desaturate($infoText, 50%);
 
-$success: #5f5b;
+$success: #55ff55;
 $successText: darken($success, 45%);
 $successColor: desaturate($successText, 50%);
 
-$warning: #fc0b;
+$warning: #ffcc00;
 $warningText: darken($warning, 30%);
 $warningColor: desaturate($warningText, 50%);
 
-$error: #f00b;
+$error: #ff0000;
 $errorText: darken($error, 30%);
 $errorColor: desaturate($errorText, 50%);

assets/sass/layout.scss

@@ -30,7 +30,6 @@ header {
 	height: $headerHeight;
 	line-height: $headerHeight;
 
-	$headerBackground: darken($primary, 1.75%);
 	background-color: $headerBackground;
 
 	.logo {
@@ -77,7 +76,7 @@ header {
 			}
 
 			a:hover {
-				background-color: #fff1;
+				background-color: rgba(255, 255, 255, 0.07);
 			}
 		}
 	}
@@ -87,7 +86,7 @@ footer {
 	padding: 8px;
 	margin-top: 8px;
 	text-align: center;
-	background-color: darken($primary, 3%);
+	background-color: $footerBackground;
 }
 
 main {
@@ -144,7 +143,7 @@ a {
 	text-decoration: none;
 
 	&:hover {
-		color: lighten($secondary, 10%);
+		color: lighten($secondary, 5%);
 	}
 
 	.feather.feather-external-link {
@@ -190,10 +189,9 @@ form {
 
 		input, select, .input-group {
 			border: 0;
-			border-bottom: 2px solid #0008;
 			color: $defaultTextColor;
-			background: rgba(255, 255, 255, 0.05);
-			border-radius: 3px 3px 0 0;
+			background: lighten($panelBackground, 4%);
+			border-radius: 5px;
 			font-size: 16px;
 
 			&:focus, &:not([value=""]) {
@@ -349,10 +347,10 @@ button, .button {
 
 	&, &.primary {
 		color: $primaryForeground;
-		background-color: $secondary;
+		background-color: darken($secondary, 10%);
 
 		&:hover {
-			background-color: lighten($secondary, 10%);
+			background-color: $secondary;
 		}
 	}
 
@@ -395,15 +393,15 @@ button, .button {
 	}
 
 	th {
-		border-bottom: 1px solid #ffffff17;
+		border-bottom: 1px solid #39434a;
 	}
 
 	tr:nth-child(even) {
-		background-color: #ffffff08;
+		background-color: rgba(255, 255, 255, 0.03);
 	}
 
 	tr:hover {
-		background-color: #ffffff18;
+		background-color: rgba(255, 255, 255, 0.09);
 	}
 
 	thead tr:hover {
@@ -427,8 +425,7 @@ button, .button {
 .panel {
 	margin: 16px 0;
 	padding: 8px;
-	border: 1px solid rgba(0, 0, 0, 0.1);
-	background-color: rgba(255, 255, 255, 0.03);
+	background-color: $panelBackground;
 	border-radius: 5px;
 
 	p {
@@ -439,13 +436,8 @@ button, .button {
 .sub-panel {
 	margin: 32px -18px;
 	padding: 1px 16px;
-	border: 2px solid rgba(255, 255, 255, 0.05);
+	border: 2px solid lighten($panelBackground, 4%);
 	border-radius: 5px;
-
-	input, select, .input-group {
-		border-radius: 5px !important;
-		border-width: 0 !important;
-	}
 }
 
 
@@ -483,7 +475,7 @@ button, .button {
 	}
 
 	&:not(&-discreet) {
-		background-color: #fff5;
+		background-color: rgba(255, 255, 255, 0.33);
 
 		&[data-type=info], &[data-type=question] {
 			background-color: $infoColor;
@@ -503,7 +495,7 @@ button, .button {
 	}
 
 	&-discreet {
-		opacity: 0.75;
+		color: mix($panelBackground, #fff, 35%);
 
 		.feather {
 			--icon-size: 20px;