dark mode

This commit is contained in:
Tyler Murphy 2023-01-30 18:55:36 -05:00
parent 575dceb146
commit 0a43289090
13 changed files with 143 additions and 72 deletions

View file

@ -5,6 +5,7 @@
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/404.css">
<link rel="stylesheet" href="/css/header.css">
<script src="/js/main.js"></script>
<title>XSSBook - Not Found</title>
</head>
<body>

View file

@ -12,7 +12,7 @@
<script src="/js/admin.js"></script>
<div id="header">
<span class="logo"><a href="/">xssbook</a></span>
<span class="gtext desc" style="margin-left: 6em; font-size: 2em">Admin Panel</span>
<span class="gtext desc" style="margin-left: 6em; font-size: 2em; color: #606770">Admin Panel</span>
</div>
<div id="login" class="hidden">
<form autocomplete="off" onsubmit="auth(event)">

View file

@ -1,5 +1,5 @@
body {
background-color: #f0f2f5;
background-color: var(--secondary)
}
.error {

View file

@ -1,6 +1,6 @@
#header {
height: 3.5em;
background-color: white;
background-color: var(--primary);
position: fixed;
width: 100vw;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
@ -36,16 +36,16 @@
display: flex;
align-items: center;
justify-content: center;
color: #606770;
color: var(--medium);
}
#header .buttons a:hover {
background-color: #dddfe2;
background-color: var(--hover);
}
.selected {
color: #1778f2 !important;
border-bottom: 3px solid #1778f2;
color: var(--logo) !important;
border-bottom: 3px solid var(--logo);
}
#header .pfp, #header .pfp img {

View file

@ -1,5 +1,5 @@
body {
background-color: #f0f2f5;
background-color: var(--secondary);
}
#posts, #create {
@ -11,7 +11,7 @@ body {
.post, .create {
width: 40em;
height: fit-content;
background-color: white;
background-color: var(--primary);
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
@ -20,6 +20,7 @@ body {
.post {
padding-bottom: 0;
color: var(--text);
}
.create {
@ -29,14 +30,14 @@ body {
.create button {
all: unset;
background-color: #f0f2f5;
background-color: var(--secondary);
border-radius: 3em;
margin-left: 1em;
flex: 1;
}
.create button:hover {
background-color: #e4e6e8;
background-color: var(--hover);
cursor: pointer;
}
@ -64,12 +65,12 @@ body {
cursor: pointer;
padding: 7px;
border-radius: 5px;
color: #606770;
color: var(--medium);
margin: 3px
}
.postbuttons>span:hover {
background-color: #e4e6e8;
background-color: var(--hover);
}
.postname {
@ -90,7 +91,9 @@ body {
}
.blue {
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%);
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%)
saturate(200%) saturate(200%) saturate(200%) saturate(147.75%)
hue-rotate(202deg) brightness(97%) contrast(96%);
}
.like {
@ -103,7 +106,7 @@ body {
.createpost {
position: relative;
background-color: white;
background-color: var(--primary);
width: 450px;
padding: 20px;
border-radius: .5em;
@ -124,6 +127,8 @@ body {
width: 100%;
height: 120px;
margin-bottom: 20px;
background-color: transparent;
color: var(--text);
}
.createpost>span {
@ -157,7 +162,7 @@ body {
display: flex;
flex-direction: column;
margin-left: 10px;
background-color: #f0f2f5;
background-color: var(--secondary);
border-radius: 10px;
padding: 10px;
padding-right: 10px;
@ -177,6 +182,6 @@ body {
padding: 10px;
border-radius: 10px;
width: calc(100% - 20px);
background-color: #f0f2f5;
background-color: var(--secondary);
font-family: sfpro;
}

View file

@ -1,5 +1,5 @@
.login {
background-color: #f0f2f5;
background-color: var(--secondary);
display: flex;
justify-content: center;
align-content: center;
@ -11,7 +11,7 @@
display: flex;
position: relative;
flex-direction: column;
background-color: white;
background-color: var(--primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
border-radius: 8px;
width: 396px;

View file

@ -1,11 +1,28 @@
body {
background-color: white;
--primary: #ffffff;
--secondary: #f0f2f5;
--hover: #e4e6e8;
--light: #dadde1;
--mild: #dadde1;
--medium: #606770;
--extreme: #1d2129;
--logo: #1778f2;
--error: #f02849;
--success: #30ab5a;
--text: #000000;
--banner: #949494;
--popup: #ffffffcc;
}
body {
background-color: var(--primary);
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
color: var(--text);
}
@font-face {
@ -24,7 +41,7 @@ body {
}
.logo {
color: #1778f2;
color: var(--logo);
font-size: 3.5em;
font-family: facebook;
}
@ -39,12 +56,16 @@ body {
.btext {
font-family: sfpro;
color: #1778f2
color: var(--logo)
}
.bltext {
color: var(--logo)
}
.error {
font-family: sfpro;
color: #f02849;
color: var(--error);
padding-top: 10px;
margin-bottom: -10px;
font-size: 15px;
@ -52,12 +73,12 @@ body {
.gtext {
font-family: sfpro;
color: #606770
color: var(--medium)
}
.label {
font-family: sfpro;
color: #606770;
color: var(--medium);
font-size: 15px;
padding-top: 10px;
padding-left: 10px;
@ -103,19 +124,19 @@ span {
footer {
bottom: 0;
height: 400px;
background-color: white;
background-color: var(--primary);
}
input {
flex: 1;
font-family: sfpro;
background-color: white;
background-color: var(--primary);
padding: 10px;
margin: 10px;
margin-bottom: 0;
border-radius: 5px;
border: 1px solid #dddfe2;
color: #1d2129;
border: 1px solid var(--light);
color: var(--extreme);
font-size: 18px;
}
@ -128,12 +149,12 @@ input {
display: inline-block;
position: relative;
font-family: sfpro;
background-color: white;
background-color: var(--primary);
margin: 10px;
margin-bottom: 0;
border-radius: 5px;
border: 1px solid #dddfe2;
color: #1d2129;
border: 1px solid var(--light);
color: var(--extreme);
font-size: 15px;
flex: 1 0 auto;
}
@ -143,7 +164,7 @@ input {
display: block;
box-sizing: border-box;
width: auto;
color: #1d2129;
color: var(--extreme);
}
[type="radio"] {
@ -159,13 +180,13 @@ select {
all: unset;
flex: 1;
font-family: sfpro;
background-color: white;
background-color: var(--primary);
padding: 10px;
margin: 10px;
margin-bottom: 0;
border-radius: 5px;
border: 1px solid #dddfe2;
color: #1d2129;
border: 1px solid var(--light);
color: var(--extreme);
font-size: 15px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
background-position: right 10px center;
@ -174,14 +195,14 @@ select {
}
input:focus {
border: 1px solid #1778f2;
border: 1px solid var(--logo);
}
.primary {
all: unset;
font-family: sfpro;
background-color: #1778f2;
color: white;
background-color: var(--logo);
color: var(--text);
padding: 10px;
margin: 20px;
border-radius: 5px;
@ -193,8 +214,8 @@ input:focus {
.success {
all: unset;
font-family: sfpro;
background-color: #30ab5a;
color: white;
background-color: var(--success);
color: var(--text);
padding: 10px;
margin-left: 10px;
margin-right: 10px;
@ -211,16 +232,18 @@ input:focus {
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
border-bottom: 1px solid #dadde1;
border-bottom: 1px solid var(--light);
margin-bottom: 10px;
margin-top: 10px;
z-index: 2;
}
.fullline {
width: calc(100%);
border-bottom: 1px solid #dadde1;
border-bottom: 1px solid var(--light);
margin-bottom: 10px;
margin-top: 10px;
z-index: 2;
}
footer {
@ -236,7 +259,7 @@ footer {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, .8);
background-color: var(--popup);
margin: 0;
padding: 0;
top: 0;
@ -280,7 +303,7 @@ footer {
width: 2.5em;
height: 2.5em;
border-radius: 3em;
background-color: #e4e6e8;
background-color: var(--hover);
flex-shrink: 0;
}
@ -303,5 +326,40 @@ form {
}
#load a:hover {
border-bottom: #606770 1px solid;
border-bottom: var(--medium) 1px solid;
}
@media (prefers-color-scheme: dark) {
body {
--primary: #242424 !important;
--secondary: #181818 !important;
--hover: #1b1b1b !important;
--light: #3e4042 !important;
--mild: #1b1b1b !important;
--medium: #e2ded6 !important;
--extreme: #e2ded6 !important;
--logo: #1778f2 !important;
--error: #f02849 !important;
--success: #30ab5a !important;
--text: #ffffff !important;
--banner: #6b6b6b !important;
--popup: #242424cc !important;
}
body .icons {
filter: invert(100%) !important;
}
body .blue {
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%)
saturate(200%) saturate(200%) saturate(200%) saturate(147.75%)
hue-rotate(202deg) brightness(97%) contrast(96%) !important;
}
body select {
filter: invert(100%) !important;
background-color: var(--primary) I !important;
color: var(--primary) !important;
border: 1px solid var(--primary) !important;
}
}

View file

@ -1,5 +1,5 @@
body {
background-color: #f0f2f5;
background-color: var(--secondary);
}
#users {
@ -9,9 +9,10 @@ body {
}
.person {
color: var(--text);
width: 30em;
height: fit-content;
background-color: white;
background-color: var(--primary);
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
margin-bottom: 1.5em;
@ -25,7 +26,7 @@ body {
height: 10em;
padding: 0;
display: block;
background-color: #e4e6e8;
background-color: var(--banner);
flex-shrink: 0;
}

View file

@ -1,5 +1,5 @@
body {
background-color: #f0f2f5;
background-color: var(--secondary);
}
.spacer {
@ -7,7 +7,7 @@ body {
}
#top {
background-color: white;
background-color: var(--primary);
display: flex;
flex-direction: column;
align-items: center;
@ -16,7 +16,7 @@ body {
}
#banner {
background-image: linear-gradient(#949494, white, white);
background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
height: 30em;
width: 100%;
display: flex;
@ -26,7 +26,7 @@ body {
#banner div, #banner img {
width: 80em;
height: inherit;
background-color: #e4e6e8;
background-color: var(--hover);
border-radius: 0px 0px 20px 20px;
}
@ -37,11 +37,11 @@ body {
}
.face {
background-color: #e4e6e8;
background-color: var(--hover);
height: 12em;
width: 12em;
border-radius: 7em;
border: solid 5px white;
border: solid 5px var(--primary);
margin-top: -2em;
margin-left: 2em;
margin-right: 2em;
@ -73,18 +73,18 @@ body {
display: flex;
align-items: center;
justify-content: center;
color: #606770;
color: var(--medium);
cursor: pointer;
flex: 0;
}
.profilebuttons button:hover {
background-color: #dddfe2;
background-color: var(--mild);
}
.selected {
color: #1778f2 !important;
border-bottom: 3px solid #1778f2 !important;
color: var(--logo) !important;
border-bottom: 3px solid var(--logo) !important;
}
#about {
@ -100,7 +100,7 @@ body {
}
#about .ltext {
border-right: 2px solid #dadde1;
border-right: 2px solid var(--mild);
padding: 10px;
padding-right: 3em;
}

View file

@ -33,17 +33,17 @@ function parsePost(post) {
<span class="gtext mtext">${parseDate(new Date(post.date))}</span>
</div>
</div>
<p class="mtext">
<p class="mtext" style="color: var(--text);">
${post.content.replace(/\n/g,'<br>')}
</p>
<span class="gtext mtext">
${Object.keys(post.likes).map(k => post.likes[k]).filter(v => v !== false).length} Likes
<span class="gtext mtext likes">
${post.likes.length} Likes
</span>
<div class="fullline nb"></div>
<div class="postbuttons">
<span class="likeclicky" onclick="like(this)">
<i class="liketoggle icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i>
<span class="liketoggle bold ${post.likes.includes(data.user.user_id) ? 'blue' : ''}">Like</span>
<span class="liketoggle bold ${post.likes.includes(data.user.user_id) ? 'bltext' : ''}">Like</span>
</span>
<span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
<i class="icons comm"></i>
@ -95,11 +95,12 @@ async function like(span) {
.getElementsByClassName("liketoggle")
if (current) {
buttons[0].classList.remove("blue")
buttons[1].classList.remove("blue")
buttons[1].classList.remove("bltext")
} else {
buttons[0].classList.add("blue")
buttons[1].classList.add("blue")
buttons[1].classList.add("bltext")
}
container.getElementsByClassName("likes")[0].innerHTML = post.likes.length + " Likes"
}
async function comment(event) {

View file

@ -1,6 +1,6 @@
function parseUser(user) {
const html = `
<a class="person" href="/profile?id=${user.id}">
<a class="person" href="/profile?id=${user.user_id}">
<div class="profile">
</div>

View file

@ -90,22 +90,26 @@ async function load() {
params[key] = value
}
data.user = (await loadself()).json;
data.users[data.user.user_id] = data.user
data.self = (await loadself()).json;
data.users[data.self.user_id] = data.self
let id;
if (params.id !== undefined && !isNaN(params.id)) {
id = parseInt(params.id);
} else {
id = data.user.user_id
id = data.self.user_id
}
isself = id === data.user.user_id
isself = id === data.self.user_id
const posts = (await loadusersposts(id)).json
data.posts.push(... posts)
const batch = []
if (!isself) {
batch.push(id)
}
for (const post of posts) {
for(const comment of post.comments) {
if (data.users[comment[0]] !== undefined) continue
@ -120,6 +124,7 @@ async function load() {
for (const user of users) {
data.users[user.user_id] = user
}
data.user = data.users[id]
render()
}

View file

@ -248,7 +248,7 @@ pub async fn generate() -> Response {
<body>
<div id="header">
<span class="logo"><a href="/">xssbook</a></span>
<span class="gtext desc" style="margin-left: 6em; font-size: 2em">Console</span>
<span class="gtext desc" style="margin-left: 6em; font-size: 2em; color: #606770">Console</span>
</div>
<div style="margin-bottom: 3.5em"></div>
"#