first dev commit
This commit is contained in:
48
css/games.css
Executable file
48
css/games.css
Executable file
@ -0,0 +1,48 @@
|
||||
game {
|
||||
width: 20vw;
|
||||
height: 10vh;
|
||||
background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
margin: 15px;
|
||||
transition-duration: 0.25s;
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: 0 0 10px var(--color-2);
|
||||
}
|
||||
game:hover {
|
||||
transform: scale(1.1);
|
||||
filter:brightness(1.15);
|
||||
}
|
||||
game img {
|
||||
height: 80%;
|
||||
border-radius: 15px;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin: 10px;
|
||||
justify-self: left;
|
||||
margin-right: auto;
|
||||
}
|
||||
game h1 {
|
||||
font-size: 14px;
|
||||
margin: 15px;
|
||||
max-width: 50%;
|
||||
}
|
||||
#games {
|
||||
width: 90vw;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
min-height: calc(100vh - (18px * 2 + 5px * 2 + 20px * 2));
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
#noResults {
|
||||
display: none;
|
||||
font-size: 28px;
|
||||
color: var(--color-1);
|
||||
text-shadow: var(--color-1) 0 0 10px;
|
||||
}
|
||||
32
css/loader.css
Normal file
32
css/loader.css
Normal file
@ -0,0 +1,32 @@
|
||||
#gamecontainer {
|
||||
width: 90vw;
|
||||
height: auto;
|
||||
border-radius: 15px;
|
||||
background-color: color-mix(in srgb, var(--color-2) 50%, #00000000 50%);
|
||||
box-shadow: 0 0 10px var(--color-2);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
#gameFrame {
|
||||
width: 99%;
|
||||
height: 75vh;
|
||||
margin: 0.5%;
|
||||
margin-bottom: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#infobox {
|
||||
height: 8vh;
|
||||
width: 100%;
|
||||
margin: 1% 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#infobox img {
|
||||
height: 100%;
|
||||
margin: 1.5%;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#infobox h2 {
|
||||
margin-right: auto;
|
||||
}
|
||||
70
css/main.css
Executable file
70
css/main.css
Executable file
@ -0,0 +1,70 @@
|
||||
@import url("/css/themes.css");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
|
||||
:root {
|
||||
--text-color: #fff;
|
||||
--bg-1: #5a189a;
|
||||
--bg-2: #10002b;
|
||||
--color-1: #E0AAFF;
|
||||
--color-2: #7B2CBF;
|
||||
--color-3: #3C096C;
|
||||
--color-4: #240046;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
/* height: 100vh; */
|
||||
width: 100vw;
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-family: "Mulish", serif;
|
||||
}
|
||||
body {
|
||||
animation: 1s ease-out loadIn;
|
||||
}
|
||||
@keyframes loadIn {
|
||||
from {opacity: 0;transform: translateY(-32px);}
|
||||
to {opacity: 1;transform: translateY(0px);}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
filter: drop-shadow(0px 0px 4px #ffffff99);
|
||||
}
|
||||
|
||||
.samerow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.samerow img {
|
||||
width: 80px;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
margin: 10px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
margin: 8px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
margin: 4px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin: 2px;
|
||||
}
|
||||
673
css/oldstyle.css
Executable file
673
css/oldstyle.css
Executable 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;
|
||||
}
|
||||
}
|
||||
107
css/pages.css
Executable file
107
css/pages.css
Executable file
@ -0,0 +1,107 @@
|
||||
@property --gradient-x {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --gradient-y {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
body {
|
||||
background: rgb(16, 0, 43);
|
||||
background: radial-gradient(
|
||||
circle at var(--gradient-x) var(--gradient-y),
|
||||
var(--bg-1) 0%,
|
||||
var(--bg-2) 100%
|
||||
);
|
||||
background-size: 100vw 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
transition: --gradient-x 30s ease-in-out,
|
||||
--gradient-y 30s ease-in-out;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
#particles-js {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
border: none;
|
||||
overflow-y: hidden;
|
||||
top: 0;
|
||||
transition-duration: 0.05s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
input[type=text] {
|
||||
width: 70%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
padding: 18px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-2);
|
||||
border-color: var(--color-3);
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
transition-duration: 0.25s;
|
||||
font-size: 20px;
|
||||
text-shadow: var(--color-1) 0 0 10px;
|
||||
}
|
||||
input[type=text]:focus {
|
||||
filter:brightness(1.25) !important;
|
||||
}
|
||||
input[type=text]:hover {
|
||||
filter:brightness(1.1);
|
||||
}
|
||||
input[type=text]::placeholder {
|
||||
color: color-mix(in srgb, var(--text-color) 20%, #00000000 80%);
|
||||
text-shadow: color-mix(in srgb, var(--text-color) 40%, #00000000 60%) 0 0 10px;
|
||||
}
|
||||
/* Chrome, Edge and Safari */
|
||||
*::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 8px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
border-radius: 5px;
|
||||
background-color: var(--color-4);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track:hover {
|
||||
filter:brightness(1.1);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track:active {
|
||||
filter:brightness(1.25);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: var(--color-2);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
filter:brightness(1.1);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:active {
|
||||
filter:brightness(1.25);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--color-1);
|
||||
text-shadow: var(--color-1) 0 0 24px;
|
||||
}
|
||||
58
css/sidebar.css
Executable file
58
css/sidebar.css
Executable file
@ -0,0 +1,58 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
sidebar {
|
||||
background-color: linear-gradient(19deg,rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-item {
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: calc(100% - 50px - 10px);
|
||||
height: calc(100vh - 20px);
|
||||
margin: 10px;
|
||||
margin-right: 0px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sidebar-divider {
|
||||
height: 2px;
|
||||
border-radius: 20px;
|
||||
width: 80%;
|
||||
background-color: #ffffff22;
|
||||
/* auto is being stupid
|
||||
100vh minus height of 1 object 7 times minus the margin and padding of 7 objects (multiplied twice bc margin and padding on top and bottom) */
|
||||
margin-bottom: calc(100vh - 26px * 7 - ((6px + 6px) * 2) * 7);
|
||||
}
|
||||
|
||||
.sidebar-item-descriptor {
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
opacity: 0;
|
||||
transform: translateY(-32px);
|
||||
text-align: left;
|
||||
background-color: black;
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s 0.2s, right 0.5s 0.2s;
|
||||
font-family: "Mulish", serif;
|
||||
}
|
||||
.sidebar-item:hover .sidebar-item-descriptor {
|
||||
opacity: 1;
|
||||
right: 55px;
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
<<<<<<< HEAD
|
||||
:root {
|
||||
--inputbg: #3c096c;
|
||||
--inputborder: #5a189a;
|
||||
@ -293,3 +294,14 @@ body[theme=nighttime] {
|
||||
--shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
|
||||
=======
|
||||
body {
|
||||
--text-color: #fff;
|
||||
--bg-1: #5a189a;
|
||||
--bg-2: #10002b;
|
||||
--color-1: #E0AAFF;
|
||||
--color-2: #7B2CBF;
|
||||
--color-3: #3C096C;
|
||||
--color-4: #240046;
|
||||
}
|
||||
>>>>>>> c2041b6 (first dev commit)
|
||||
|
||||
Reference in New Issue
Block a user