dark mode
This commit is contained in:
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/main.css">
|
||||||
<link rel="stylesheet" href="/css/404.css">
|
<link rel="stylesheet" href="/css/404.css">
|
||||||
<link rel="stylesheet" href="/css/header.css">
|
<link rel="stylesheet" href="/css/header.css">
|
||||||
|
<script src="/js/main.js"></script>
|
||||||
<title>XSSBook - Not Found</title>
|
<title>XSSBook - Not Found</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
<script src="/js/admin.js"></script>
|
<script src="/js/admin.js"></script>
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<span class="logo"><a href="/">xssbook</a></span>
|
<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>
|
||||||
<div id="login" class="hidden">
|
<div id="login" class="hidden">
|
||||||
<form autocomplete="off" onsubmit="auth(event)">
|
<form autocomplete="off" onsubmit="auth(event)">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
body {
|
body {
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary)
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
#header {
|
#header {
|
||||||
height: 3.5em;
|
height: 3.5em;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
|
||||||
|
@ -36,16 +36,16 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #606770;
|
color: var(--medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .buttons a:hover {
|
#header .buttons a:hover {
|
||||||
background-color: #dddfe2;
|
background-color: var(--hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: #1778f2 !important;
|
color: var(--logo) !important;
|
||||||
border-bottom: 3px solid #1778f2;
|
border-bottom: 3px solid var(--logo);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .pfp, #header .pfp img {
|
#header .pfp, #header .pfp img {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
body {
|
body {
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#posts, #create {
|
#posts, #create {
|
||||||
|
@ -11,7 +11,7 @@ body {
|
||||||
.post, .create {
|
.post, .create {
|
||||||
width: 40em;
|
width: 40em;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
|
||||||
|
@ -20,6 +20,7 @@ body {
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.create {
|
.create {
|
||||||
|
@ -29,14 +30,14 @@ body {
|
||||||
|
|
||||||
.create button {
|
.create button {
|
||||||
all: unset;
|
all: unset;
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
border-radius: 3em;
|
border-radius: 3em;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create button:hover {
|
.create button:hover {
|
||||||
background-color: #e4e6e8;
|
background-color: var(--hover);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,12 +65,12 @@ body {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: #606770;
|
color: var(--medium);
|
||||||
margin: 3px
|
margin: 3px
|
||||||
}
|
}
|
||||||
|
|
||||||
.postbuttons>span:hover {
|
.postbuttons>span:hover {
|
||||||
background-color: #e4e6e8;
|
background-color: var(--hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.postname {
|
.postname {
|
||||||
|
@ -90,7 +91,9 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue {
|
.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 {
|
.like {
|
||||||
|
@ -103,7 +106,7 @@ body {
|
||||||
|
|
||||||
.createpost {
|
.createpost {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
width: 450px;
|
width: 450px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: .5em;
|
border-radius: .5em;
|
||||||
|
@ -124,6 +127,8 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.createpost>span {
|
.createpost>span {
|
||||||
|
@ -157,7 +162,7 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
@ -177,6 +182,6 @@ body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
}
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
.login {
|
.login {
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
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);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
width: 396px;
|
width: 396px;
|
||||||
|
|
|
@ -1,11 +1,28 @@
|
||||||
body {
|
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;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
@ -24,7 +41,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
color: #1778f2;
|
color: var(--logo);
|
||||||
font-size: 3.5em;
|
font-size: 3.5em;
|
||||||
font-family: facebook;
|
font-family: facebook;
|
||||||
}
|
}
|
||||||
|
@ -39,12 +56,16 @@ body {
|
||||||
|
|
||||||
.btext {
|
.btext {
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
color: #1778f2
|
color: var(--logo)
|
||||||
|
}
|
||||||
|
|
||||||
|
.bltext {
|
||||||
|
color: var(--logo)
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
color: #f02849;
|
color: var(--error);
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
margin-bottom: -10px;
|
margin-bottom: -10px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
@ -52,12 +73,12 @@ body {
|
||||||
|
|
||||||
.gtext {
|
.gtext {
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
color: #606770
|
color: var(--medium)
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
color: #606770;
|
color: var(--medium);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
@ -103,19 +124,19 @@ span {
|
||||||
footer {
|
footer {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #dddfe2;
|
border: 1px solid var(--light);
|
||||||
color: #1d2129;
|
color: var(--extreme);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,12 +149,12 @@ input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #dddfe2;
|
border: 1px solid var(--light);
|
||||||
color: #1d2129;
|
color: var(--extreme);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
}
|
}
|
||||||
|
@ -143,7 +164,7 @@ input {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: auto;
|
width: auto;
|
||||||
color: #1d2129;
|
color: var(--extreme);
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
|
@ -159,13 +180,13 @@ select {
|
||||||
all: unset;
|
all: unset;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #dddfe2;
|
border: 1px solid var(--light);
|
||||||
color: #1d2129;
|
color: var(--extreme);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
|
||||||
background-position: right 10px center;
|
background-position: right 10px center;
|
||||||
|
@ -174,14 +195,14 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus {
|
input:focus {
|
||||||
border: 1px solid #1778f2;
|
border: 1px solid var(--logo);
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
all: unset;
|
all: unset;
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
background-color: #1778f2;
|
background-color: var(--logo);
|
||||||
color: white;
|
color: var(--text);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -193,8 +214,8 @@ input:focus {
|
||||||
.success {
|
.success {
|
||||||
all: unset;
|
all: unset;
|
||||||
font-family: sfpro;
|
font-family: sfpro;
|
||||||
background-color: #30ab5a;
|
background-color: var(--success);
|
||||||
color: white;
|
color: var(--text);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
@ -211,16 +232,18 @@ input:focus {
|
||||||
width: calc(100% - 40px);
|
width: calc(100% - 40px);
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
border-bottom: 1px solid #dadde1;
|
border-bottom: 1px solid var(--light);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullline {
|
.fullline {
|
||||||
width: calc(100%);
|
width: calc(100%);
|
||||||
border-bottom: 1px solid #dadde1;
|
border-bottom: 1px solid var(--light);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
@ -236,7 +259,7 @@ footer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: rgba(255, 255, 255, .8);
|
background-color: var(--popup);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -280,7 +303,7 @@ footer {
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
border-radius: 3em;
|
border-radius: 3em;
|
||||||
background-color: #e4e6e8;
|
background-color: var(--hover);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -303,5 +326,40 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
#load a:hover {
|
#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 {
|
body {
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#users {
|
#users {
|
||||||
|
@ -9,9 +9,10 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.person {
|
.person {
|
||||||
|
color: var(--text);
|
||||||
width: 30em;
|
width: 30em;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
|
@ -25,7 +26,7 @@ body {
|
||||||
height: 10em;
|
height: 10em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #e4e6e8;
|
background-color: var(--banner);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
body {
|
body {
|
||||||
background-color: #f0f2f5;
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
|
@ -7,7 +7,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#top {
|
#top {
|
||||||
background-color: white;
|
background-color: var(--primary);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -16,7 +16,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#banner {
|
#banner {
|
||||||
background-image: linear-gradient(#949494, white, white);
|
background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
|
||||||
height: 30em;
|
height: 30em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -26,7 +26,7 @@ body {
|
||||||
#banner div, #banner img {
|
#banner div, #banner img {
|
||||||
width: 80em;
|
width: 80em;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
background-color: #e4e6e8;
|
background-color: var(--hover);
|
||||||
border-radius: 0px 0px 20px 20px;
|
border-radius: 0px 0px 20px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,11 +37,11 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.face {
|
.face {
|
||||||
background-color: #e4e6e8;
|
background-color: var(--hover);
|
||||||
height: 12em;
|
height: 12em;
|
||||||
width: 12em;
|
width: 12em;
|
||||||
border-radius: 7em;
|
border-radius: 7em;
|
||||||
border: solid 5px white;
|
border: solid 5px var(--primary);
|
||||||
margin-top: -2em;
|
margin-top: -2em;
|
||||||
margin-left: 2em;
|
margin-left: 2em;
|
||||||
margin-right: 2em;
|
margin-right: 2em;
|
||||||
|
@ -73,18 +73,18 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #606770;
|
color: var(--medium);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex: 0;
|
flex: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profilebuttons button:hover {
|
.profilebuttons button:hover {
|
||||||
background-color: #dddfe2;
|
background-color: var(--mild);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: #1778f2 !important;
|
color: var(--logo) !important;
|
||||||
border-bottom: 3px solid #1778f2 !important;
|
border-bottom: 3px solid var(--logo) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#about {
|
#about {
|
||||||
|
@ -100,7 +100,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#about .ltext {
|
#about .ltext {
|
||||||
border-right: 2px solid #dadde1;
|
border-right: 2px solid var(--mild);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-right: 3em;
|
padding-right: 3em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,17 +33,17 @@ function parsePost(post) {
|
||||||
<span class="gtext mtext">${parseDate(new Date(post.date))}</span>
|
<span class="gtext mtext">${parseDate(new Date(post.date))}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="mtext">
|
<p class="mtext" style="color: var(--text);">
|
||||||
${post.content.replace(/\n/g,'<br>')}
|
${post.content.replace(/\n/g,'<br>')}
|
||||||
</p>
|
</p>
|
||||||
<span class="gtext mtext">
|
<span class="gtext mtext likes">
|
||||||
${Object.keys(post.likes).map(k => post.likes[k]).filter(v => v !== false).length} Likes
|
${post.likes.length} Likes
|
||||||
</span>
|
</span>
|
||||||
<div class="fullline nb"></div>
|
<div class="fullline nb"></div>
|
||||||
<div class="postbuttons">
|
<div class="postbuttons">
|
||||||
<span class="likeclicky" onclick="like(this)">
|
<span class="likeclicky" onclick="like(this)">
|
||||||
<i class="liketoggle icons like ${post.likes.includes(data.user.user_id) ? 'blue' : ''}"></i>
|
<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>
|
||||||
<span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
|
<span onclick="this.parentElement.parentElement.getElementsByClassName('newcomment')[0].focus()">
|
||||||
<i class="icons comm"></i>
|
<i class="icons comm"></i>
|
||||||
|
@ -95,11 +95,12 @@ async function like(span) {
|
||||||
.getElementsByClassName("liketoggle")
|
.getElementsByClassName("liketoggle")
|
||||||
if (current) {
|
if (current) {
|
||||||
buttons[0].classList.remove("blue")
|
buttons[0].classList.remove("blue")
|
||||||
buttons[1].classList.remove("blue")
|
buttons[1].classList.remove("bltext")
|
||||||
} else {
|
} else {
|
||||||
buttons[0].classList.add("blue")
|
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) {
|
async function comment(event) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
function parseUser(user) {
|
function parseUser(user) {
|
||||||
const html = `
|
const html = `
|
||||||
<a class="person" href="/profile?id=${user.id}">
|
<a class="person" href="/profile?id=${user.user_id}">
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -90,22 +90,26 @@ async function load() {
|
||||||
params[key] = value
|
params[key] = value
|
||||||
}
|
}
|
||||||
|
|
||||||
data.user = (await loadself()).json;
|
data.self = (await loadself()).json;
|
||||||
data.users[data.user.user_id] = data.user
|
data.users[data.self.user_id] = data.self
|
||||||
let id;
|
let id;
|
||||||
|
|
||||||
if (params.id !== undefined && !isNaN(params.id)) {
|
if (params.id !== undefined && !isNaN(params.id)) {
|
||||||
|
|
||||||
id = parseInt(params.id);
|
id = parseInt(params.id);
|
||||||
} else {
|
} 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
|
const posts = (await loadusersposts(id)).json
|
||||||
data.posts.push(... posts)
|
data.posts.push(... posts)
|
||||||
const batch = []
|
const batch = []
|
||||||
|
|
||||||
|
if (!isself) {
|
||||||
|
batch.push(id)
|
||||||
|
}
|
||||||
for (const post of posts) {
|
for (const post of posts) {
|
||||||
for(const comment of post.comments) {
|
for(const comment of post.comments) {
|
||||||
if (data.users[comment[0]] !== undefined) continue
|
if (data.users[comment[0]] !== undefined) continue
|
||||||
|
@ -120,6 +124,7 @@ async function load() {
|
||||||
for (const user of users) {
|
for (const user of users) {
|
||||||
data.users[user.user_id] = user
|
data.users[user.user_id] = user
|
||||||
}
|
}
|
||||||
|
data.user = data.users[id]
|
||||||
render()
|
render()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -248,7 +248,7 @@ pub async fn generate() -> Response {
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<span class="logo"><a href="/">xssbook</a></span>
|
<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>
|
||||||
<div style="margin-bottom: 3.5em"></div>
|
<div style="margin-bottom: 3.5em"></div>
|
||||||
"#
|
"#
|
||||||
|
|
Loading…
Reference in a new issue