first commit
This commit is contained in:
673
css/style.css
Normal file
673
css/style.css
Normal file
@ -0,0 +1,673 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap");
|
||||
|
||||
@keyframes loadInAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
--uibg: #240046;
|
||||
--textcolor: #fff;
|
||||
--bg: #10002b;
|
||||
--margin: 4rem;
|
||||
}
|
||||
.hiddenUpload {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
* {
|
||||
transition-duration: 0.5s;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-family: "Prompt", sans-serif;
|
||||
color: var(--textcolor);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--textcolor);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
background-color: var(--uibg);
|
||||
display: flex;
|
||||
border-bottom: none;
|
||||
font-weight:700;
|
||||
padding: 0.7rem;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#time {
|
||||
font-weight:100;
|
||||
}
|
||||
header {
|
||||
top: 0;
|
||||
border-radius: 0 0 20px 20px;
|
||||
position: fixed;
|
||||
box-shadow: 0 5px 10px var(--uibg);
|
||||
}
|
||||
|
||||
footer.noscroll {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
footer {
|
||||
bottom: 0;
|
||||
border-radius: 20px 20px 0 0;
|
||||
box-shadow: 0 -5px 10px var(--uibg);
|
||||
}
|
||||
|
||||
footer a,
|
||||
footer a:visited,
|
||||
header a,
|
||||
header a:visited {
|
||||
margin-right: 1.5rem;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover,
|
||||
header a:hover {
|
||||
text-shadow: 2px 2px 6px var(--textcolor);
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
header,
|
||||
footer {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
* {
|
||||
--margin: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
animation: 1.25s ease-in-out 0s 1 loadInAnimation;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
min-height: calc(100vh - (2 * 0.7rem));
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
margin-top: var(--margin);
|
||||
width: 90%;
|
||||
height:auto;
|
||||
}
|
||||
main#main.noscroll {
|
||||
justify-content: center;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
a,
|
||||
label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-shadow: var(--shadow);
|
||||
}
|
||||
.samerow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
p,
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button,
|
||||
input#websubmit.submit,
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
background-color: var(--inputbg);
|
||||
border-color: var(--inputborder);
|
||||
border-width: 2px;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
padding: 7px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input#websubmit.submit:hover,
|
||||
input[type="submit"]:hover {
|
||||
filter: brightness(80%);
|
||||
transform: scale(1.07);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
aspect-ratio: auto;
|
||||
user-select: none;
|
||||
filter: drop-shadow(var(--shadow));
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.img-container a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
width: 6%;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin: 2%;
|
||||
}
|
||||
|
||||
.game,
|
||||
.suggest {
|
||||
width: 15%;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
background-color: var(--uibg);
|
||||
margin: 15px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
}
|
||||
|
||||
.game:hover,
|
||||
.suggest:hover {
|
||||
transform: scale(1.1);
|
||||
filter: brightness(85%);
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
}
|
||||
|
||||
.game h1,
|
||||
.suggest h1 {
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.game img,
|
||||
.suggest img {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
img.star {
|
||||
float: left;
|
||||
width: 10%;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#noscroll {
|
||||
overflow-y: hidden;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#games,
|
||||
#pinned {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 50%;
|
||||
background-color: var(--inputbg);
|
||||
box-sizing: border-box;
|
||||
font-size: 20px;
|
||||
padding: 0.8% 0.8%;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
margin: 10px;
|
||||
border: 2px solid var(--inputborder);
|
||||
border-radius: 5px;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
opacity: 100%;
|
||||
}
|
||||
input[type="text"]:hover,
|
||||
input[type="password"]:hover {
|
||||
opacity: 80%;
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--textcolor);
|
||||
opacity: 0.4; /* Firefox */
|
||||
}
|
||||
|
||||
.bookmarkletdiv {
|
||||
width: 30%;
|
||||
background-color: var(--uibg);
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
padding: 5px;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bookmarkletdiv a {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
.samerow.themebtns {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 5px;
|
||||
background-color: var(--inputbg);
|
||||
border-color: var(--inputborder);
|
||||
border-width: 5px;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
padding: 0.5% 0.5%;
|
||||
margin: 0.25%;
|
||||
}
|
||||
|
||||
thumb.png .img-credits {
|
||||
height: 40vh;
|
||||
width: auto;
|
||||
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.555);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 20px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.avatar {
|
||||
margin: 5px;
|
||||
}
|
||||
#bgimg {
|
||||
width: 30vw;
|
||||
font-size: 16px;
|
||||
}
|
||||
.usericon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-self: right;
|
||||
/* display: none; */
|
||||
}
|
||||
#toast {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background-color: var(--inputbg);
|
||||
border-radius: 10px;
|
||||
border-width: 10px;
|
||||
border-color: var(--inputborder);
|
||||
border-style: solid;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition-duration: 1s;
|
||||
max-width: 30%;
|
||||
}
|
||||
#toast h1 {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#toast p {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
#discord {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
z-index: 199975;
|
||||
border-radius: 100%;
|
||||
background-image: url("/img/discord.svg");
|
||||
background-size: 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
div.profile.top {
|
||||
width: 90%;
|
||||
height: 20vh;
|
||||
background-color: var(--uibg);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
}
|
||||
div.profile.top.text {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
justify-self: center;
|
||||
height: auto;
|
||||
margin: 30px;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
div.profile.top.text.right {
|
||||
margin-left: auto;
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
div.profile.top.text h1 {
|
||||
font-size: 2vw;
|
||||
}
|
||||
div.profile.top.text h2 {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
div.profile.top.text a {
|
||||
font-size: 1.25vw;
|
||||
}
|
||||
|
||||
img.pfp {
|
||||
height: 80%;
|
||||
object-fit: contain;
|
||||
width: auto;
|
||||
margin: 30px;
|
||||
border-radius: 20px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
div.profile.top.text .about {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#edit {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 2vw;
|
||||
margin-left: 5px;
|
||||
width: auto;
|
||||
}
|
||||
#counter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
#popup {
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
z-index: 99999999;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50vw;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--inputbg);
|
||||
border-color: var(--inputborder);
|
||||
border-width: 5px;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
}
|
||||
#popup input {
|
||||
width: 90%;
|
||||
height: 30%;
|
||||
}
|
||||
#popup input[type=file] {
|
||||
height: auto;
|
||||
text-align-last: center;
|
||||
display: block;
|
||||
margin: 30px;
|
||||
}
|
||||
#popup h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#popup #close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
|
||||
}
|
||||
img.badges {
|
||||
position: relative;
|
||||
height: 2vw;
|
||||
margin-left: 5px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
p#counter {
|
||||
bottom: 38%;
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
|
||||
.users {
|
||||
text-decoration: none;
|
||||
width: 30%;
|
||||
height: 10vh;
|
||||
background-color: var(--uibg);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
margin: 1.5%;
|
||||
}
|
||||
.users h1, .users p {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.user_info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.users h1 {
|
||||
font-size: 1vw;
|
||||
}
|
||||
.users p {
|
||||
font-size: 0.75vw;
|
||||
}
|
||||
.users a {
|
||||
font-size: 0.75vw;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.users p {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
#users {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pages-btn {
|
||||
margin: 10px;
|
||||
}
|
||||
#ai {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
div.profile.played {
|
||||
margin: 40px;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
padding: 30px;
|
||||
background-color: var(--uibg);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
box-shadow: 0px 0px 5px 5px var(--uibg);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
#played-games {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
div.played-game {
|
||||
width: 13%;
|
||||
height: auto;
|
||||
margin: 2%;
|
||||
padding: 0;
|
||||
}
|
||||
div.played-game img {
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.friend-icon {
|
||||
width: 5%;
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
}
|
||||
#chat {
|
||||
width: 90%;
|
||||
background-color: var(--uibg);
|
||||
height: calc(100vh - (var(--margin) * 2) - 60px - 24px - 12px - 30px - 80px);
|
||||
}
|
||||
#messages {
|
||||
align-items: end;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
height: 88%;
|
||||
display: flex;
|
||||
}
|
||||
message {
|
||||
width: calc(100% - 20px);
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
background-color: var(--inputbg);
|
||||
border-radius: 10px;
|
||||
}
|
||||
message h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
message h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
message.user {
|
||||
background-color: var(--inputborder);
|
||||
}
|
||||
message.bot {
|
||||
justify-self: right;
|
||||
}
|
||||
#chatbox {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.messagebox {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
}
|
||||
.evensmaller {
|
||||
font-size: 12px;
|
||||
}
|
||||
#gamecontainer {
|
||||
width: 80vw;
|
||||
height: calc(100vh - (var(--margin) * 2));
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--uibg);
|
||||
}
|
||||
#gameFrame {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#infobox {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
}
|
||||
#infobox img {
|
||||
height: 90%;
|
||||
width: auto;
|
||||
margin-right: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@keyframes toastFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
}
|
||||
85% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
295
css/themes.css
Normal file
295
css/themes.css
Normal file
@ -0,0 +1,295 @@
|
||||
:root {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
--uibg: #240046;
|
||||
--textcolor: #fff;
|
||||
--bg: #10002b;
|
||||
}
|
||||
body {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
--uibg: #240046;
|
||||
--textcolor: #fff;
|
||||
--bg: #10002b;
|
||||
}
|
||||
body[theme=threekho] {
|
||||
--inputbg: #28A018;
|
||||
--inputborder: #0A8F00;
|
||||
--uibg: #111111;
|
||||
--textcolor: #fff;
|
||||
--bg: #000000;
|
||||
}
|
||||
body[theme=art] {
|
||||
--inputbg: #0284d4;
|
||||
--inputborder: #0284d4;
|
||||
--uibg: #0e1213;
|
||||
--textcolor: #fffff;
|
||||
--bg: #1a2023;
|
||||
}
|
||||
body[theme=dogcat] {
|
||||
--inputbg: #537294;
|
||||
--inputborder: #30719c;
|
||||
--uibg: #2a7491;
|
||||
--textcolor: #fff;
|
||||
--bg: url("/img/backgrounds/dogcat.svg"), rgb(26, 127, 158);
|
||||
/* https://wallpaperaccess.com/full/115544.jpg */
|
||||
}
|
||||
body[theme=custom] {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
--uibg: #240046;
|
||||
--textcolor: #fff;
|
||||
--bg: #10002b;
|
||||
}
|
||||
body[theme=mainnew] {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
--uibg: #240046bb;
|
||||
--textcolor: #fff;
|
||||
--bg: linear-gradient(0deg, rgba(36,0,70,1) 0%, rgba(60,9,108,1) 50%, rgba(36,0,70,1) 100%);
|
||||
}
|
||||
body[theme=main] {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
--uibg: #240046bb;
|
||||
--textcolor: #fff;
|
||||
--bg: #10002b;
|
||||
}
|
||||
body[theme=light] {
|
||||
--inputbg: #bbbbbb;
|
||||
--inputborder: #e6e6e6;
|
||||
--uibg: #b3b3b3;
|
||||
--textcolor: #1a1a1a;
|
||||
--bg: #c5c5c5;
|
||||
}
|
||||
body[theme=dark] {
|
||||
--inputbg: #333333;
|
||||
--inputborder: #444444;
|
||||
--uibg: #242424;
|
||||
--textcolor: #fff;
|
||||
--bg: #0c0c0c;
|
||||
}
|
||||
body[theme=egamepass] {
|
||||
--inputbg: #4f6ed1;
|
||||
--inputborder: #5586e0;
|
||||
--uibg: #185494;
|
||||
--textcolor: #a7d3ff;
|
||||
--bg: #16416f;
|
||||
}
|
||||
body[theme=cools1te] {
|
||||
--inputbg: #a134dc;
|
||||
--inputborder: #b153e3;
|
||||
--uibg: #ab28cf;
|
||||
--textcolor: #d3a4fa;
|
||||
--bg: #8e14af;
|
||||
}
|
||||
|
||||
|
||||
body[theme=lattefalse] {
|
||||
--inputbg: #9ca0b0;
|
||||
/* overlay 0 */
|
||||
--inputborder: #8c8fa1;
|
||||
/* overlay 1 */
|
||||
--uibg: #ccd0da;
|
||||
/* surface 0 */
|
||||
--textcolor: #4c4f69;
|
||||
/* text */
|
||||
--bg: #eff1f5;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #ccd0da;
|
||||
/* surface 0 */
|
||||
}
|
||||
body[theme=frappefalse] {
|
||||
--inputbg: #737994;
|
||||
/* overlay 0 */
|
||||
--inputborder: #838ba7;
|
||||
/* overlay 1 */
|
||||
--uibg: #414559;
|
||||
/* surface 0 */
|
||||
--textcolor: #cad3f5;
|
||||
/* text */
|
||||
--bg: #303446;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #414559;
|
||||
/* surface 0 */
|
||||
}
|
||||
body[theme=macchiatofalse] {
|
||||
--inputbg: #6e738d;
|
||||
/* overlay 0 */
|
||||
--inputborder: #8087a2;
|
||||
/* overlay 1 */
|
||||
--uibg: #363a4f;
|
||||
/* surface 0 */
|
||||
--textcolor: #cad3f5;
|
||||
/* text */
|
||||
--bg: #24273a;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #363a4f;
|
||||
/* surface 0 */
|
||||
}
|
||||
body[theme=mochafalse] {
|
||||
--inputbg: #6c7086;
|
||||
/* overlay 0 */
|
||||
--inputborder: #7f849c;
|
||||
/* overlay 1 */
|
||||
--uibg: #313244;
|
||||
/* surface 0 */
|
||||
--textcolor: #cdd6f4;
|
||||
/* text */
|
||||
--bg: #1e1e2e;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #313244;
|
||||
/* surface 0 */
|
||||
}
|
||||
|
||||
body[theme=sunsetfalse] {
|
||||
--inputbg: #537294;
|
||||
--inputborder: #30719c;
|
||||
--uibg: #2a7491;
|
||||
--textcolor: #fff;
|
||||
--bg: rgb(59, 67, 78);
|
||||
/* https://wallhaven.cc/w/jxl3qp */
|
||||
--shadow: 0px 0px 2px #a5dcf5;
|
||||
}
|
||||
body[theme=mountainsfalse] {
|
||||
--inputbg: #d37f7f;
|
||||
--inputborder: #e28a8a;
|
||||
--uibg: #d38493;
|
||||
--textcolor: #fff;
|
||||
--bg: #bf7483;
|
||||
/* https://wallhaven.cc/w/l82kpr */
|
||||
--shadow: 0px 0px 4px #bba29b;
|
||||
}
|
||||
body[theme=vaporwavefalse] {
|
||||
--inputbg: #4b2d64;
|
||||
--inputborder: #74568d;
|
||||
--uibg: #51166d;
|
||||
--textcolor: #fff;
|
||||
--bg: #61437a;
|
||||
/* https://wallhaven.cc/w/l82kpr */
|
||||
--shadow: 0px 0px 4px #000000;
|
||||
}
|
||||
body[theme=seraphfalse] {
|
||||
--inputbg: #000;
|
||||
--inputborder: #fff;
|
||||
--uibg: #000;
|
||||
--textcolor: #fff;
|
||||
--bg: #222222;
|
||||
/* seraph */
|
||||
--shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
body[theme=nighttimefalse] {
|
||||
--inputbg: #29374d;
|
||||
--inputborder: #fff;
|
||||
--uibg: #29374d;
|
||||
--textcolor: #fff;
|
||||
--bg: #323853;
|
||||
/* https://wallhaven.cc/w/l882py */
|
||||
--shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body[theme=latte] {
|
||||
--inputbg: #9ca0b0;
|
||||
/* overlay 0 */
|
||||
--inputborder: #8c8fa1;
|
||||
/* overlay 1 */
|
||||
--uibg: #ccd0da;
|
||||
/* surface 0 */
|
||||
--textcolor: #4c4f69;
|
||||
/* text */
|
||||
--bg: #eff1f5;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #ccd0da;
|
||||
/* surface 0 */
|
||||
}
|
||||
body[theme=frappe] {
|
||||
--inputbg: #737994;
|
||||
/* overlay 0 */
|
||||
--inputborder: #838ba7;
|
||||
/* overlay 1 */
|
||||
--uibg: #414559;
|
||||
/* surface 0 */
|
||||
--textcolor: #cad3f5;
|
||||
/* text */
|
||||
--bg: #303446;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #414559;
|
||||
/* surface 0 */
|
||||
}
|
||||
body[theme=macchiato] {
|
||||
--inputbg: #6e738d;
|
||||
/* overlay 0 */
|
||||
--inputborder: #8087a2;
|
||||
/* overlay 1 */
|
||||
--uibg: #363a4f;
|
||||
/* surface 0 */
|
||||
--textcolor: #cad3f5;
|
||||
/* text */
|
||||
--bg: #24273a;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #363a4f;
|
||||
/* surface 0 */
|
||||
}
|
||||
body[theme=mocha] {
|
||||
--inputbg: #6c7086;
|
||||
/* overlay 0 */
|
||||
--inputborder: #7f849c;
|
||||
/* overlay 1 */
|
||||
--uibg: #313244;
|
||||
/* surface 0 */
|
||||
--textcolor: #cdd6f4;
|
||||
/* text */
|
||||
--bg: #1e1e2e;
|
||||
/* base */
|
||||
--shadow: 0px 0px 4px #313244;
|
||||
/* surface 0 */
|
||||
}
|
||||
|
||||
body[theme=sunset] {
|
||||
--inputbg: #537294;
|
||||
--inputborder: #30719c;
|
||||
--uibg: #2a7491;
|
||||
--textcolor: #fff;
|
||||
--bg: url("/img/backgrounds/sunset_theme.jpg"), rgb(59, 67, 78);
|
||||
/* https://wallhaven.cc/w/jxl3qp */
|
||||
--shadow: 0px 0px 2px #a5dcf5;
|
||||
}
|
||||
body[theme=mountains] {
|
||||
--inputbg: #d37f7f;
|
||||
--inputborder: #e28a8a;
|
||||
--uibg: #d38493;
|
||||
--textcolor: #fff;
|
||||
--bg: url("/img/backgrounds/mountains_theme.jpg"), #bf7483;
|
||||
/* https://wallhaven.cc/w/l82kpr */
|
||||
--shadow: 0px 0px 4px #bba29b;
|
||||
}
|
||||
body[theme=vaporwave] {
|
||||
--inputbg: #4b2d64;
|
||||
--inputborder: #74568d;
|
||||
--uibg: #51166d;
|
||||
--textcolor: #fff;
|
||||
--bg: url("/img/backgrounds/vaporwave_theme.jpg"), #61437a;
|
||||
/* https://wallhaven.cc/w/l82kpr */
|
||||
--shadow: 0px 0px 4px #000000;
|
||||
}
|
||||
body[theme=seraph] {
|
||||
--inputbg: #000;
|
||||
--inputborder: #fff;
|
||||
--uibg: #000;
|
||||
--textcolor: #fff;
|
||||
--bg: url("/img/backgrounds/seraph_theme.png"), #1c1a1e;
|
||||
/* seraph */
|
||||
--shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
body[theme=nighttime] {
|
||||
--inputbg: #29374d;
|
||||
--inputborder: #fff;
|
||||
--uibg: #29374d;
|
||||
--textcolor: #fff;
|
||||
--bg: url("/img/backgrounds/nighttime_theme.png"), #28272a;
|
||||
/* https://wallhaven.cc/w/l882py */
|
||||
--shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user