Merge pull request 'make the dark theme look a bit better' (#3) from Mollomm1/burgercat:main into main

Reviewed-on: https://codeberg.org/burger-software/burgercat/pulls/3
This commit is contained in:
maaa 2023-07-11 21:19:31 +00:00
commit 1f655cf423
1 changed files with 389 additions and 367 deletions

View File

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