From 03a7a5892700435b19c52140d1d3369de79eb779 Mon Sep 17 00:00:00 2001
From: Mollomm1 <mollomm1@noreply.codeberg.org>
Date: Tue, 11 Jul 2023 21:14:36 +0000
Subject: [PATCH] make the dark theme a bit better

---
 static/css/style.css | 756 ++++++++++++++++++++++---------------------
 1 file changed, 389 insertions(+), 367 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 2c91e1a..9f29dc7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,368 +1,390 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
-
-body {
-    margin: 0;
-    overflow-x: hidden;
-    font-family: "Inter", sans-serif;
-}
-
-.navbar {
-    margin: 0;
-    padding: 10px;
-    border: solid;
-    border-color: grey;
-    border-width: 0;
-    border-bottom-width: 1px;
-    background-color: white;
-    width: 100%;
-    position: fixed;
-    z-index: 2;
-}
-
-.navbar .selected {
-    border: solid;
-    border-color: #f1b739;
-    border-width: 0;
-    border-bottom-width: 2px;
-}
-
-.postDiv {
-    padding-top: 120px;
-}
-
-.profileDiv {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.profileIFrame {
-    border: solid;
-    border-width: 0;
-    border-top-width: 1px;
-    border-color: rgb(241, 241, 241);
-    width: 100%;
-    height: calc(100vh - 295px);
-}
-
-.profileDiv .badgeDiv p {
-    background-color: black;
-    border-radius: 99px;
-    color: white;
-    padding: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    display: inline;
-}
-
-.editThing .htmlBox {
-    width: calc(100% - 10px);
-    height: 300px;
-    text-align: top;
-}
-
-.accountform {
-    margin-left: 20%;
-    margin-right: 20%;
-}
-
-.accountform input {
-    padding: 7px;
-    border: solid;
-    border-width: 1px;
-    border-color: grey;
-    width: calc(100% - 15px);
-    font-size: 16px;
-    border-radius: 8px;
-}
-
-.accountform .flash {
-    padding: 7px;
-    border: solid;
-    border-width: 1px;
-    border-color: #f1b739;
-    width: calc(100% - 15px);
-    font-size: 16px;
-    border-radius: 8px;
-}
-
-.accountform button {
-    padding: 7px;
-    border: solid;
-    border-width: 1px;
-    color: black;
-    border-color: grey;
-    background-color: white;
-    font-size: 16px;
-    width: 100%;
-    border-radius: 8px;
-}
-
-.navbar a {
-    color: black;
-    text-decoration: none;
-}
-
-.navbar .right {
-    float: right;
-    padding-right: 5px;
-}
-
-.navbar .r {
-    padding-right: 15px;
-}
-
-.post {
-    margin: 10px;
-    padding: 5px;
-    margin-bottom: 10px;
-    border-radius: 10px;
-    background-color: rgb(250, 250, 250);
-}
-
-.post img {
-    min-height: 200px;
-    max-height: 300px;
-    max-width: 100%;
-    border-radius: 10px;
-}
-
-.post button {
-    background-color: rgb(250, 250, 250);
-    border: solid;
-    border-color: rgb(197, 197, 197);
-    border-width: 1px;
-    border-radius: 6px;
-    font-size: 16px;
-    font-family: "Inter", sans-serif;
-}
-
-.post button:hover {
-    border-color: #f1b739;
-}
-
-.post .commentdiv input {
-    background-color: rgb(250, 250, 250);
-    border: solid;
-    border-color: rgb(197, 197, 197);
-    border-width: 1px;
-    border-radius: 6px;
-    font-size: 16px;
-    margin-top: 5px;
-    font-family: "Inter", sans-serif;
-}
-
-.post hr {
-    color: rgb(255, 255, 255);
-    background-color: rgb(255, 255, 255);
-    border-color: rgb(255, 255, 255);
-}
-
-.post .commentsdiv {
-    background-color: #f5f5f5;
-    padding: 5px;
-    border-radius: 10px;
-    margin-bottom: 5px;
-}
-
-.post .username {
-    font-size: 18px;
-}
-
-.post .date {
-    color: rgb(175, 175, 175);
-}
-
-.usernamelink {
-    color: black;
-    text-decoration: none;
-}
-
-.chatDiv {
-    width: 292vh;
-    margin-top: 2px;
-    height: calc(100vh - 121px);
-}
-
-.channelDiv {
-    position: absolute;
-    width: 220px;
-    height: calc(100%);
-    left: 0;
-    background-color: rgb(245, 245, 245);
-}
-
-.channelDiv .statusMessage {
-    position: absolute;
-    left: 10px;
-    bottom: 122.5px;
-}
-
-.channelDiv button {
-    width: calc(100% - 20px);
-    margin: 10px;
-    margin-bottom: 0;
-    padding-left: 10px;
-    background-color: white;
-    border: none;
-    border-radius: 8px;
-    color: black;
-    font-size: 16px;
-    text-align: left;
-    height: 40px;
-}
-
-.channelDiv .selected {
-    border: solid;
-    border-width: 1px;
-    border-color: #f1b739;
-}
-
-.channelDiv button:hover {
-    background-color: rgb(249, 249, 249);
-    transition: background-color ease-in-out 100ms
-}
-
-.messageDiv {
-    position: absolute;
-    width: calc(100% - 220px);
-    height: calc(100%);
-    padding-bottom: 50px;
-    right: 0;
-    margin-top: -180px;
-    display: flex;
-    flex-direction: column-reverse;
-}
-
-.messageDiv p {
-    font-size: 16px;
-    margin-left: 10px;
-    line-height: 8px;
-    align-self: flex-start;
-}
-
-.messageBar {
-    position: absolute;
-    width: calc(100% - 220px);
-    height: 50px;
-    right: 0;
-    bottom: 0;
-    background-color: rgb(228, 228, 228);
-}
-
-.messageBar input {
-    width: calc(100% - 20px);
-    height: calc(100% - 15px);
-    border: none;
-    border-radius: 99px;
-    padding-left: 10px;
-    font-size: 15px;
-    margin: 5px;
-}
-
-.warning {
-    width: 100%;
-    background-color: #f1b739;
-    color: black;
-    padding: 10px;
-}
-
-.hidden {
-    display: none;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --gray-950: #030712;
-        --gray-900: #111827;
-        --gray-800: #1f2937;
-        --gray-700: #374151;
-        --gray-600: #4b5563;
-        --gray-500: #6b7280;
-        --gray-400: #9ca3af;
-        --gray-300: #d1d5db;
-        --gray-200: #e5e7eb;
-        --gray-100: #f3f4f6;
-        --gray-50: #f9fafb;
-    }
-
-	textarea {
-		background-color: var(--gray-800);
-		color: white
-	}
-	
-	/* fix some profile issues, this is important do NOT remove!!!! */
-	iframe {
-		background-color: white;
-	}
-	
-    body {
-        color: white;
-        background-color: var(--gray-900);
-    }
-
-    h1 {
-        color: white;
-    }
-
-    .post button, .post .commentdiv input, input, button  {
-        background-color: var(--gray-700);
-        border-color: var(--gray-600);
-        color: white;
-    }
-
-    .navbar {
-        background-color: var(--gray-800);
-    }
-
-    .navbar a, a {
-        color: white;
-		border-size: 0px;
-		border-color: var(--gray-800);
-    }
-    
-	.accountform button {
-        background-color: var(--gray-700);
-        border-color: var(--gray-600);
-        color: white;
-	}
-	
-	.profileDiv .edit-button {
-		color: var(--gray-50);
-		text-decoration: none;
-	}
-	
-    .post {
-        background-color: var(--gray-800);
-    }
-
-    .usernamelink {
-        color: white;
-    }
-
-    .post .date {
-        color: var(--gray-400);
-    }
-
-    .post .commentsdiv {
-        background-color: var(--gray-700);
-    }
-	
-	.messageBar {
-		background-color: var(--gray-900);
-	}
-	
-	.channelDiv {
-		background-color: var(--gray-800);
-	}
-	
-	.channelDiv button {
-		background-color: var(--gray-700);
-		color: white;
-	}
-
-	.channelDiv button:hover {
-		background-color: var(--gray-600);
-	}
-
-}
+@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+
+body {
+    margin: 0;
+    overflow-x: hidden;
+    font-family: "Inter", sans-serif;
+}
+
+.navbar {
+    margin: 0;
+    padding: 10px;
+    border: solid;
+    border-color: grey;
+    border-width: 0;
+    border-bottom-width: 1px;
+    background-color: white;
+    width: 100%;
+    position: fixed;
+    z-index: 2;
+}
+
+.navbar .selected {
+    border: solid;
+    border-color: #f1b739;
+    border-width: 0;
+    border-bottom-width: 2px;
+}
+
+.postDiv {
+    padding-top: 120px;
+}
+
+.profileDiv {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.profileIFrame {
+    border: solid;
+    border-width: 0;
+    border-top-width: 1px;
+    border-color: rgb(241, 241, 241);
+    width: 100%;
+    height: calc(100vh - 295px);
+}
+
+.profileDiv .badgeDiv p {
+    background-color: black;
+    border-radius: 99px;
+    color: white;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    display: inline;
+}
+
+.editThing .htmlBox {
+    width: calc(100% - 10px);
+    height: 300px;
+    text-align: top;
+}
+
+.accountform {
+    margin-left: 20%;
+    margin-right: 20%;
+}
+
+.accountform input {
+    padding: 7px;
+    border: solid;
+    border-width: 1px;
+    border-color: grey;
+    width: calc(100% - 15px);
+    font-size: 16px;
+    border-radius: 8px;
+}
+
+.accountform .flash {
+    padding: 7px;
+    border: solid;
+    border-width: 1px;
+    border-color: #f1b739;
+    width: calc(100% - 15px);
+    font-size: 16px;
+    border-radius: 8px;
+}
+
+.accountform button {
+    padding: 7px;
+    border: solid;
+    border-width: 1px;
+    color: black;
+    border-color: grey;
+    background-color: white;
+    font-size: 16px;
+    width: 100%;
+    border-radius: 8px;
+}
+
+.navbar a {
+    color: black;
+    text-decoration: none;
+}
+
+.navbar .right {
+    float: right;
+    padding-right: 5px;
+}
+
+.navbar .r {
+    padding-right: 15px;
+}
+
+.post {
+    margin: 10px;
+    padding: 5px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    background-color: rgb(250, 250, 250);
+}
+
+.post img {
+    min-height: 200px;
+    max-height: 300px;
+    max-width: 100%;
+    border-radius: 10px;
+}
+
+.post button {
+    background-color: rgb(250, 250, 250);
+    border: solid;
+    border-color: rgb(197, 197, 197);
+    border-width: 1px;
+    border-radius: 6px;
+    font-size: 16px;
+    font-family: "Inter", sans-serif;
+}
+
+.post button:hover {
+    border-color: #f1b739;
+}
+
+.post .commentdiv input {
+    background-color: rgb(250, 250, 250);
+    border: solid;
+    border-color: rgb(197, 197, 197);
+    border-width: 1px;
+    border-radius: 6px;
+    font-size: 16px;
+    margin-top: 5px;
+    font-family: "Inter", sans-serif;
+}
+
+.post hr {
+    color: rgb(255, 255, 255);
+    background-color: rgb(255, 255, 255);
+    border-color: rgb(255, 255, 255);
+}
+
+.post .commentsdiv {
+    background-color: #f5f5f5;
+    padding: 5px;
+    border-radius: 10px;
+    margin-bottom: 5px;
+}
+
+.post .username {
+    font-size: 18px;
+}
+
+.post .date {
+    color: rgb(175, 175, 175);
+}
+
+.usernamelink {
+    color: black;
+    text-decoration: none;
+}
+
+.chatDiv {
+    width: 292vh;
+    margin-top: 2px;
+    height: calc(100vh - 121px);
+}
+
+.channelDiv {
+    position: absolute;
+    width: 220px;
+    height: calc(100%);
+    left: 0;
+    background-color: rgb(245, 245, 245);
+}
+
+.channelDiv .statusMessage {
+    position: absolute;
+    left: 10px;
+    bottom: 122.5px;
+}
+
+.channelDiv button {
+    width: calc(100% - 20px);
+    margin: 10px;
+    margin-bottom: 0;
+    padding-left: 10px;
+    background-color: white;
+    border: none;
+    border-radius: 8px;
+    color: black;
+    font-size: 16px;
+    text-align: left;
+    height: 40px;
+}
+
+.channelDiv .selected {
+    border: solid;
+    border-width: 1px;
+    border-color: #f1b739;
+}
+
+.channelDiv button:hover {
+    background-color: rgb(249, 249, 249);
+    transition: background-color ease-in-out 100ms
+}
+
+.messageDiv {
+    position: absolute;
+    width: calc(100% - 220px);
+    height: calc(100%);
+    padding-bottom: 50px;
+    right: 0;
+    margin-top: -180px;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.messageDiv p {
+    font-size: 16px;
+    margin-left: 10px;
+    line-height: 8px;
+    align-self: flex-start;
+}
+
+.messageBar {
+    position: absolute;
+    width: calc(100% - 220px);
+    height: 50px;
+    right: 0;
+    bottom: 0;
+    background-color: rgb(228, 228, 228);
+}
+
+.messageBar input {
+    width: calc(100% - 20px);
+    height: calc(100% - 15px);
+    border: none;
+    border-radius: 99px;
+    padding-left: 10px;
+    font-size: 15px;
+    margin: 5px;
+}
+
+.warning {
+    width: 100%;
+    background-color: #f1b739;
+    color: black;
+    padding: 10px;
+}
+
+.hidden {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --gray-950: #030712;
+        --gray-900: #111827;
+        --gray-800: #1f2937;
+        --gray-700: #374151;
+        --gray-600: #4b5563;
+        --gray-500: #6b7280;
+        --gray-400: #9ca3af;
+        --gray-300: #d1d5db;
+        --gray-200: #e5e7eb;
+        --gray-100: #f3f4f6;
+        --gray-50: #f9fafb;
+    }
+
+	textarea {
+		background-color: var(--gray-800);
+		color: white
+	}
+	
+	/* fix some profile issues, this is important do NOT remove!!!! */
+	iframe {
+		background-color: white;
+	}
+	
+    body {
+        color: white;
+        background-color: var(--gray-900);
+    }
+
+    h1 {
+        color: white;
+    }
+
+    .post button, .post .commentdiv input, input, button  {
+        background-color: var(--gray-700);
+        border-color: var(--gray-600);
+        color: white;
+    }
+
+    .navbar {
+        background-color: var(--gray-800);
+    }
+
+    .navbar a, a {
+        color: white;
+		border-size: 0px;
+		border-color: var(--gray-800);
+    }
+    
+	.accountform button {
+        background-color: var(--gray-700);
+        border-color: var(--gray-600);
+        color: white;
+	}
+	
+	.profileDiv .edit-button {
+		color: var(--gray-50);
+		text-decoration: none;
+	}
+	
+    .post {
+        background-color: var(--gray-800);
+    }
+
+    .usernamelink {
+        color: white;
+    }
+
+    .post .date {
+        color: var(--gray-400);
+    }
+
+    .post .commentsdiv {
+        background-color: var(--gray-700);
+    }
+	
+	.messageBar {
+		background-color: var(--gray-900);
+	}
+	
+	.channelDiv {
+		background-color: var(--gray-800);
+	}
+	
+	.channelDiv button {
+		background-color: var(--gray-700);
+		color: white;
+	}
+
+	.channelDiv button:hover {
+		background-color: var(--gray-600);
+	}
+
+    .post .commentdiv input,
+    input {
+        border: solid 1px var(--gray-700);
+    }
+
+    .post .commentdiv input:hover,
+    input:hover,
+    .post .commentdiv input:focus,
+    input:focus {
+        outline: none;
+        border: solid 1px #f1b739;
+    }
+
+    .post {
+        background-color: var(--gray-800);
+        border: solid 1px var(--gray-700);
+    }
+
+    .navbar {
+        border-color: var(--gray-700);
+    }
+
+}
 }
\ No newline at end of file