feat: add darkmode
This commit is contained in:
parent
8222502610
commit
b56ec9454c
|
@ -268,4 +268,101 @@ body {
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,56 +1,56 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>burgercat</title>
|
<title>burgercat</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<h1>burgercat</h1>
|
<h1>burgercat</h1>
|
||||||
<a href="/">home</a>
|
<a href="/">home</a>
|
||||||
<a class="selected" href="/chat">chat</a>
|
<a class="selected" href="/chat">chat</a>
|
||||||
<a href="/post">post</a>
|
<a href="/post">post</a>
|
||||||
{% if userdata %}
|
{% if userdata %}
|
||||||
<a href="/settings/logout" class="right r">log out</a>
|
<a href="/settings/logout" class="right r">log out</a>
|
||||||
<a href="/settings" class="right">{{ userdata.username }}</a>
|
<a href="/settings" class="right">{{ userdata.username }}</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="/signup" class="right r">sign up</a>
|
<a href="/signup" class="right r">sign up</a>
|
||||||
<a href="/login" class="right">log in</a>
|
<a href="/login" class="right">log in</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="postDiv">
|
<div class="postDiv">
|
||||||
{% if userdata %}
|
{% if userdata %}
|
||||||
{% if userdata.banned == "0" %}
|
{% if userdata.banned == "0" %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<p class="warning">Your account has been banned. Reason: "{{ userdata.banned }}". <a href="/settings/logout">Log out</a></p>
|
<p class="warning">Your account has been banned. Reason: "{{ userdata.banned }}". <a href="/settings/logout">Log out</a></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="chatDiv">
|
<div class="chatDiv">
|
||||||
<div id="channelDiv" class="channelDiv">
|
<div id="channelDiv" class="channelDiv">
|
||||||
<p class="statusMessage" id="statusMessage">Connected</p>
|
<p class="statusMessage" id="statusMessage">Connected</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="messageDiv" class="messageDiv">
|
<div id="messageDiv" class="messageDiv">
|
||||||
</div>
|
</div>
|
||||||
<div class="messageBar">
|
<div class="messageBar">
|
||||||
<input id="messageBox" type="text" placeholder="Type something.." id="chatBox">
|
<input id="messageBox" type="text" placeholder="Type something.." id="chatBox">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="/static/js/chat.js"></script>
|
<script src="/static/js/chat.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -1,42 +1,43 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>burgercat</title>
|
<title>burgercat</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<h1>burgercat</h1>
|
<h1>burgercat</h1>
|
||||||
<a class="selected" href="/">home</a>
|
<a class="selected" href="/">home</a>
|
||||||
<a href="/post">post</a>
|
<a href="/chat">chat</a>
|
||||||
{% if userdata %}
|
<a href="/post">post</a>
|
||||||
<a href="/settings/logout" class="right r">log out</a>
|
{% if userdata %}
|
||||||
<a href="/settings" class="right">{{ userdata.username }}</a>
|
<a href="/settings/logout" class="right r">log out</a>
|
||||||
{% else %}
|
<a href="/settings" class="right">{{ userdata.username }}</a>
|
||||||
<a href="/signup" class="right r">sign up</a>
|
{% else %}
|
||||||
<a href="/login" class="right">log in</a>
|
<a href="/signup" class="right r">sign up</a>
|
||||||
{% endif %}
|
<a href="/login" class="right">log in</a>
|
||||||
</div>
|
{% endif %}
|
||||||
<div class="postDiv">
|
</div>
|
||||||
<div class="profileDiv">
|
<div class="postDiv">
|
||||||
{% if userdata %}
|
<div class="profileDiv">
|
||||||
{% if pageuser.id == userdata.id %}
|
{% if userdata %}
|
||||||
<h2>edit mode</h2>
|
{% if pageuser.id == userdata.id %}
|
||||||
<p>remote content from media.tenor.com and cdn.discordapp.com is allowed</p>
|
<h2>edit mode</h2>
|
||||||
<form class="editThing" method="post" enctype="multipart/form-data">
|
<p>remote content from media.tenor.com and cdn.discordapp.com is allowed</p>
|
||||||
<textarea class="htmlBox" name="code" type="text" placeholder="<p>Hello World!</p>">{{ userdata.htmldescription }}</textarea>
|
<form class="editThing" method="post" enctype="multipart/form-data">
|
||||||
<br><br>
|
<textarea class="htmlBox" name="code" type="text" placeholder="<p>Hello World!</p>">{{ userdata.htmldescription }}</textarea>
|
||||||
<input class="submit" type="submit" value="save">
|
<br><br>
|
||||||
</form>
|
<input class="submit" type="submit" value="save">
|
||||||
{% endif %}
|
</form>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -13,6 +13,7 @@
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<h1>burgercat</h1>
|
<h1>burgercat</h1>
|
||||||
<a href="/">home</a>
|
<a href="/">home</a>
|
||||||
|
<a href="/chat">chat</a>
|
||||||
<a href="/post">post</a>
|
<a href="/post">post</a>
|
||||||
{% if userdata %}
|
{% if userdata %}
|
||||||
<a href="/settings/logout" class="right r">log out</a>
|
<a href="/settings/logout" class="right r">log out</a>
|
||||||
|
|
|
@ -1,49 +1,50 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>burgercat</title>
|
<title>burgercat</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<h1>burgercat</h1>
|
<h1>burgercat</h1>
|
||||||
<a class="selected" href="/">home</a>
|
<a class="selected" href="/">home</a>
|
||||||
<a href="/post">post</a>
|
<a href="/chat">chat</a>
|
||||||
{% if userdata %}
|
<a href="/post">post</a>
|
||||||
<a href="/settings/logout" class="right r">log out</a>
|
{% if userdata %}
|
||||||
<a href="/settings" class="right">{{ userdata.username }}</a>
|
<a href="/settings/logout" class="right r">log out</a>
|
||||||
{% else %}
|
<a href="/settings" class="right">{{ userdata.username }}</a>
|
||||||
<a href="/signup" class="right r">sign up</a>
|
{% else %}
|
||||||
<a href="/login" class="right">log in</a>
|
<a href="/signup" class="right r">sign up</a>
|
||||||
{% endif %}
|
<a href="/login" class="right">log in</a>
|
||||||
</div>
|
{% endif %}
|
||||||
<div class="postDiv">
|
</div>
|
||||||
<div class="profileDiv">
|
<div class="postDiv">
|
||||||
<h2>{{ pageuser.username }}</h2>
|
<div class="profileDiv">
|
||||||
<div class="badgeDiv">
|
<h2>{{ pageuser.username }}</h2>
|
||||||
{% if pageuser.administrator == 1 %}
|
<div class="badgeDiv">
|
||||||
<p>Administrator</p>
|
{% if pageuser.administrator == 1 %}
|
||||||
{% endif %}
|
<p>Administrator</p>
|
||||||
</div>
|
{% endif %}
|
||||||
<p>Joined on {{ createddate }}</p>
|
</div>
|
||||||
{% if userdata %}
|
<p>Joined on {{ createddate }}</p>
|
||||||
{% if pageuser.id == userdata.id %}
|
{% if userdata %}
|
||||||
<a style="color: rgb(104, 104, 104); text-decoration: none;" href="/@{{ userdata.username }}/edit">edit page</a>
|
{% if pageuser.id == userdata.id %}
|
||||||
<br><br>
|
<a style="color: rgb(104, 104, 104); text-decoration: none;" href="/@{{ userdata.username }}/edit">edit page</a>
|
||||||
{% endif %}
|
<br><br>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
{% endif %}
|
||||||
<iframe src="/api/page/{{ pageuser.id }}" class="profileIFrame" sandbox=""></iframe>
|
</div>
|
||||||
</div>
|
<iframe src="/api/page/{{ pageuser.id }}" class="profileIFrame" sandbox=""></iframe>
|
||||||
<style>
|
</div>
|
||||||
body {
|
<style>
|
||||||
overflow-y: hidden
|
body {
|
||||||
}
|
overflow-y: hidden
|
||||||
</style>
|
}
|
||||||
</body>
|
</style>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
Reference in New Issue