219 lines
3.6 KiB
CSS
219 lines
3.6 KiB
CSS
:root {
|
|
--wallpaper: url();
|
|
--background: #1e1e1e;
|
|
--foreground: #757575;
|
|
--color0: #2e3c43;
|
|
--color1: #f07178;
|
|
--color2: #c3e88d;
|
|
--color3: #ffcb6b;
|
|
--color4: #82aaff;
|
|
--color5: #c792ea;
|
|
--color6: #89ddff;
|
|
--color7: #b2ccd6;
|
|
--color8: #3c4d54;
|
|
--color9: #f07178;
|
|
--color10: #c3e88d;
|
|
--color11: #ffcb6b;
|
|
--color12: #82aaff;
|
|
--color13: #c792ea;
|
|
--color14: #89ddff;
|
|
--color15: #eeffff;
|
|
}
|
|
|
|
html {
|
|
/*font-size: 18px;*/
|
|
font-family: 'Iosevka JP', monospace;
|
|
/*font-weight: black;*/
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
@charset "utf-8";
|
|
/* CSS Document */
|
|
|
|
@font-face {
|
|
font-family: 'WorkSans-SemiBold';
|
|
src: url("../fonts/WorkSans-SemiBold.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SpaceMono-Bold';
|
|
src: url("../fonts/SpaceMono-Bold.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SpaceMono-Regular';
|
|
src: url("../fonts/SpaceMono-Regular.ttf");
|
|
}
|
|
|
|
header {
|
|
color: #757575;
|
|
font-family: 'SpaceMono-Bold';
|
|
font-size: 50px;
|
|
-webkit-text-fill-color: #757575;
|
|
z-index:1;
|
|
}
|
|
|
|
p1 {
|
|
font-family: 'SpaceMono-Regular';
|
|
-webkit-text-fill-color: #757575;
|
|
font-size: 17px;
|
|
z-index:1;
|
|
}
|
|
|
|
p2 {
|
|
font-family: 'SpaceMono-Regular';
|
|
-webkit-text-fill-color: #757575;
|
|
font-size: 12px;
|
|
z-index:1;
|
|
}
|
|
|
|
form {
|
|
background-color: #363636;
|
|
width: 25%;
|
|
height: 35px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
input {
|
|
background-color: unset;
|
|
font: 16px 'Iosevka JP';
|
|
color: #fff;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border-top-style: hidden;
|
|
border-right-style: hidden;
|
|
border-left-style: hidden;
|
|
border-bottom-style: hidden;
|
|
}
|
|
|
|
::placeholder {
|
|
color: #757575;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
svg {
|
|
color: #fff;
|
|
fill: currentColor;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 10px;
|
|
}
|
|
|
|
button {
|
|
all: unset;
|
|
cursor: pointer;
|
|
width: auto;
|
|
height: 10px;
|
|
}
|
|
|
|
input {
|
|
color: #B5B5B5;
|
|
}
|
|
|
|
.buttontext {
|
|
color: #757575;
|
|
font-family: 'SpaceMono-regular';
|
|
}
|
|
|
|
.button {
|
|
border: none;
|
|
background: none;
|
|
color: #757575;
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
align-content: center;
|
|
text-align: center;
|
|
font-family: 'SpaceMono-regular';
|
|
}
|
|
|
|
.button:hover {
|
|
border: none;
|
|
background: none;
|
|
color: #B5B5B5;
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
align-content: center;
|
|
text-align: center;
|
|
font-family: 'SpaceMono-regular';
|
|
}
|
|
|
|
.button[id = "twitch"]:hover{
|
|
border: none;
|
|
background: none;
|
|
color: #b48ead;
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
align-content: center;
|
|
text-align: center;
|
|
font-family: 'SpaceMono-regular';
|
|
}
|
|
|
|
.button[id = "youtube"]:hover{
|
|
border: none;
|
|
background: none;
|
|
color: #bf616a;
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
align-content: center;
|
|
text-align: center;
|
|
font-family: 'SpaceMono-regular';
|
|
}
|
|
|
|
.button[id = "twitter"]:hover{
|
|
border: none;
|
|
background: none;
|
|
color: #81a1c1;
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
align-content: center;
|
|
text-align: center;
|
|
font-family: 'SpaceMono-regular';
|
|
}
|
|
|
|
a {color: inherit; }
|
|
|
|
.outer {
|
|
display: table;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.middle {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.inner {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: auto;
|
|
justify-content: center;
|
|
text-align: center;
|
|
/*whatever width you want*/
|
|
}
|
|
|
|
#clock {
|
|
width: 100%;
|
|
font-size: 60px;
|
|
text-align: center;
|
|
font-family: 'WorkSans-SemiBold';
|
|
color: #757575;
|
|
padding: 20px;
|
|
}
|
|
|
|
#footer {
|
|
position: fixed ;
|
|
left: 0 ;
|
|
bottom: 0 ;
|
|
z-index:0;
|
|
}
|