waffelo.net/style.css

103 lines
1.8 KiB
CSS
Raw Normal View History

2025-01-14 15:31:37 +00:00
:root {
--background: #3b2a55;
--background2: #140f18;
--background3: #3b2e40;
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
--foreground: #937da2;
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
--accent: #7441a0;
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
/* CSS OVERRIDES ------------------------------------------ */
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
html {
background-image: url(assets/pattern.png);
animation: scrolling 30s linear 1;
animation-direction: forward;
animation-iteration-count: infinite;
background-color: var(--background) ;
}
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
body {
2024-09-22 11:11:59 +00:00
color: var(--foreground);
2025-01-14 15:31:37 +00:00
font-family: sans-serif;
font-size: 14.5px;
2024-09-22 11:11:59 +00:00
}
a {
2025-01-14 15:31:37 +00:00
color: var(--accent);
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
h1, h2, h3, h4, h5, h6 {
margin: 5px;
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
/* LAYOUT ------------------------------------------ */
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
.flex {
display: flex;
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
.box {
background-color: var(--background2);
border-radius: 24px;
padding: 10px;
margin: 15px;
margin-left: auto;
margin-right: auto;
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
/* CONTAINERS ------------------------------------------ */
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
.c-main {
width: 40%;
padding: 5px;
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
/* ELEMENTS ------------------------------------------ */
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
.c-element {
margin: 20px;
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
.e-profile {
max-width: 30%;
padding: 12px;
margin: 10px;
border: 2px dashed var(--background3);
border-radius: 15px;
}
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
.e-profile_icon {
width: 28px;
filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
margin: 3px;
}
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
.e-icon {
width: 28px;
filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
margin: 3px;
}
2024-09-22 11:11:59 +00:00
2025-01-14 15:31:37 +00:00
.e-profile_icon:hover {
filter: invert(50%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
transform: scale(1.3);
2024-09-22 11:11:59 +00:00
}
2025-01-14 15:31:37 +00:00
@-webkit-keyframes scrolling {
from {
background-position: 0 0;
}
to {
background-position: -300px 300px;
}
2024-09-22 11:11:59 +00:00
}