dark mode
This commit is contained in:
Tyler Murphy
parent
575dceb146
commit
0a43289090
13 changed files with 143 additions and 72 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
background-color: #f0f2f5;
|
||||
background-color: var(--secondary)
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
"#
|
||||
|
|
|
|||
Loading…
Reference in a new issue