From 03a7a5892700435b19c52140d1d3369de79eb779 Mon Sep 17 00:00:00 2001 From: Mollomm1 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