aboutsummaryrefslogtreecommitdiff
path: root/static/@solitude/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/@solitude/css')
-rw-r--r--static/@solitude/css/shared.css0
-rw-r--r--static/@solitude/css/welcome/audio.css141
-rw-r--r--static/@solitude/css/welcome/button.css68
-rw-r--r--static/@solitude/css/welcome/glitch.css574
-rw-r--r--static/@solitude/css/welcome/welcome.css94
5 files changed, 0 insertions, 877 deletions
diff --git a/static/@solitude/css/shared.css b/static/@solitude/css/shared.css
deleted file mode 100644
index e69de29b..00000000
--- a/static/@solitude/css/shared.css
+++ /dev/null
diff --git a/static/@solitude/css/welcome/audio.css b/static/@solitude/css/welcome/audio.css
deleted file mode 100644
index 5e0d0c58..00000000
--- a/static/@solitude/css/welcome/audio.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.audio-bars {
- position: relative;
- display: flex;
- width: auto;
- transform: scale3d(2, 2, 1); /* EZ SCALE */
-}
-.bar {
- background: #fff;
- height: 20px;
- width: 2px;
- margin-right: 2px;
-}
-.bar:last-child {
- margin-right: 0;
-}
-
-@keyframes sound {
- 0% {
- transform: scale3d(1, 0.1, 1);
- }
- 100% {
- transform: scale3d(1, 1, 1);
- }
-}
-@keyframes sound2 {
- 0% {
- transform: scale3d(1, 0.1, 1);
- }
- 100% {
- transform: scale3d(1, 0.5, 1);
- }
-}
-
-.bar:nth-child(1) {
- animation: sound2 0ms -800ms linear infinite alternate;
- animation-duration: 200ms;
-}
-.bar:nth-child(2) {
- animation: sound 0ms -800ms linear infinite alternate;
- animation-duration: 300ms;
-}
-.bar:nth-child(3) {
- animation: sound 0ms -800ms linear infinite alternate;
- animation-duration: 200ms;
-}
-.bar:nth-child(4) {
- animation: sound 0ms -800ms linear infinite alternate;
- animation-duration: 250ms;
-}
-.bar:nth-child(5) {
- animation: sound2 0ms -800ms linear infinite alternate;
- animation-duration: 150ms;
-}
-
-#welcome-playlist-player {
- background: rgba(0, 0, 0, 0.5);
- border-radius: 16px 0 0 16px;
- box-shadow: 0 4px 30px rgba(255, 255, 255, 0.1);
- backdrop-filter: blur(5.5px);
- -webkit-backdrop-filter: blur(5.5px);
- border: 1px solid rgba(0, 0, 0, 0.3);
- padding: 16px;
- position: absolute;
- bottom: 2rem;
- right: 0;
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 1.5rem;
- transition: all 0.5s ease;
-}
-
-.controls {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 1rem;
- height: 1rem;
- padding: 0.8rem;
- border: 0.2rem solid var(--button-color);
- border-radius: 50%;
- filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.8));
-}
-
-.player {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 1.5rem;
-}
-
-.play {
- height: 0;
- width: 0;
- margin-left: calc(2 * 0.25 * var(--button-height));
- /*margin-left: 17px;*/
- background: none;
- border: none;
- border-top: var(--button-height) solid transparent;
- border-bottom: var(--button-height) solid transparent;
- border-left: calc(var(--button-height) * 2 * 0.86) solid var(--button-color);
-}
-
-.pause {
- position: relative;
- background: none;
- border: none;
- height: calc(var(--button-height) * 2);
- width: calc(var(--button-height) * 2 * 0.86);
-}
-.pause:before,
-.pause:after {
- content: "";
- position: absolute;
- top: 0;
- height: 100%;
- width: 33%;
- background: var(--button-color);
-}
-.pause:before {
- left: 0;
-}
-.pause:after {
- right: 0;
-}
-
-.hidden {
- display: none;
-}
-
-.title {
- color: #7679f5;
-}
-
-.artist {
- color: #e2fdff;
-}
-
-.track {
- letter-spacing: 0.1rem;
-}
diff --git a/static/@solitude/css/welcome/button.css b/static/@solitude/css/welcome/button.css
deleted file mode 100644
index cd80d360..00000000
--- a/static/@solitude/css/welcome/button.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.button {
- --offset: 10px;
- --border-size: 2px;
- display: block;
- position: relative;
- padding: 1.5em 3em;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border: 0;
- background: transparent;
- color: #f06b63;
- text-transform: uppercase;
- letter-spacing: 0.25em;
- outline: none;
- cursor: pointer;
- font-weight: bold;
- border-radius: 0;
- box-shadow: inset 0 0 0 var(--border-size) currentcolor;
- transition: background 0.8s ease;
-}
-.button:hover {
- background: rgba(100, 0, 0, 0.03);
-}
-.button__horizontal,
-.button__vertical {
- position: absolute;
- top: var(--horizontal-offset, 0);
- right: var(--vertical-offset, 0);
- bottom: var(--horizontal-offset, 0);
- left: var(--vertical-offset, 0);
- transition: transform 0.8s ease;
- will-change: transform;
-}
-.button__horizontal::before,
-.button__vertical::before {
- content: "";
- position: absolute;
- border: inherit;
-}
-.button__horizontal {
- --vertical-offset: calc(var(--offset) * -1);
- border-top: var(--border-size) solid currentcolor;
- border-bottom: var(--border-size) solid currentcolor;
-}
-.button__horizontal::before {
- top: calc(var(--vertical-offset) - var(--border-size));
- bottom: calc(var(--vertical-offset) - var(--border-size));
- left: calc(var(--vertical-offset) * -1);
- right: calc(var(--vertical-offset) * -1);
-}
-.button:hover .button__horizontal {
- transform: scaleX(0);
-}
-.button__vertical {
- --horizontal-offset: calc(var(--offset) * -1);
- border-left: var(--border-size) solid currentcolor;
- border-right: var(--border-size) solid currentcolor;
-}
-.button__vertical::before {
- top: calc(var(--horizontal-offset) * -1);
- bottom: calc(var(--horizontal-offset) * -1);
- left: calc(var(--horizontal-offset) - var(--border-size));
- right: calc(var(--horizontal-offset) - var(--border-size));
-}
-.button:hover .button__vertical {
- transform: scaleY(0);
-}
diff --git a/static/@solitude/css/welcome/glitch.css b/static/@solitude/css/welcome/glitch.css
deleted file mode 100644
index 6b8c8987..00000000
--- a/static/@solitude/css/welcome/glitch.css
+++ /dev/null
@@ -1,574 +0,0 @@
-.glitch {
- position: relative;
- color: #fff;
- font-size: 10rem;
- font-family: "Share", cursive;
-}
-
-.line:not(:first-child) {
- position: absolute;
- top: 0;
- left: 0;
-}
-.line:nth-child(1) {
- -webkit-animation: clip 3000ms -300ms linear infinite,
- glitch1 500ms -80ms linear infinite;
- animation: clip 3000ms -300ms linear infinite,
- glitch1 500ms -80ms linear infinite;
-}
-@-webkit-keyframes glitch1 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(4px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(5px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(0px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch1 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(4px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(5px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(0px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(2) {
- -webkit-animation: clip 3000ms -600ms linear infinite,
- glitch2 500ms -433ms linear infinite;
- animation: clip 3000ms -600ms linear infinite,
- glitch2 500ms -433ms linear infinite;
-}
-@-webkit-keyframes glitch2 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(3px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-3px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(4px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch2 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(3px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-3px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(4px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(3) {
- -webkit-animation: clip 3000ms -900ms linear infinite,
- glitch3 500ms -664ms linear infinite;
- animation: clip 3000ms -900ms linear infinite,
- glitch3 500ms -664ms linear infinite;
-}
-@-webkit-keyframes glitch3 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(4px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(5px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(-2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch3 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(4px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(5px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(-2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(4) {
- -webkit-animation: clip 3000ms -1200ms linear infinite,
- glitch4 500ms -276ms linear infinite;
- animation: clip 3000ms -1200ms linear infinite,
- glitch4 500ms -276ms linear infinite;
-}
-@-webkit-keyframes glitch4 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-3px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(2px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(-2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch4 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-3px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(2px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(-2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(5) {
- -webkit-animation: clip 3000ms -1500ms linear infinite,
- glitch5 500ms -180ms linear infinite;
- animation: clip 3000ms -1500ms linear infinite,
- glitch5 500ms -180ms linear infinite;
-}
-@-webkit-keyframes glitch5 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-2px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-4px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch5 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-2px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-4px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(6) {
- -webkit-animation: clip 3000ms -1800ms linear infinite,
- glitch6 500ms -954ms linear infinite;
- animation: clip 3000ms -1800ms linear infinite,
- glitch6 500ms -954ms linear infinite;
-}
-@-webkit-keyframes glitch6 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-3px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-4px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(1px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch6 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-3px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-4px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(1px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(7) {
- -webkit-animation: clip 3000ms -2100ms linear infinite,
- glitch7 500ms -377ms linear infinite;
- animation: clip 3000ms -2100ms linear infinite,
- glitch7 500ms -377ms linear infinite;
-}
-@-webkit-keyframes glitch7 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(2px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-1px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(-1px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch7 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(2px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-1px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(-1px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(8) {
- -webkit-animation: clip 3000ms -2400ms linear infinite,
- glitch8 500ms -104ms linear infinite;
- animation: clip 3000ms -2400ms linear infinite,
- glitch8 500ms -104ms linear infinite;
-}
-@-webkit-keyframes glitch8 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(1px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-2px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(4px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch8 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(1px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-2px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(4px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(9) {
- -webkit-animation: clip 3000ms -2700ms linear infinite,
- glitch9 500ms -606ms linear infinite;
- animation: clip 3000ms -2700ms linear infinite,
- glitch9 500ms -606ms linear infinite;
-}
-@-webkit-keyframes glitch9 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(1px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-4px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch9 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(1px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(-4px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(2px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-.line:nth-child(10) {
- -webkit-animation: clip 3000ms -3000ms linear infinite,
- glitch10 500ms -560ms linear infinite;
- animation: clip 3000ms -3000ms linear infinite,
- glitch10 500ms -560ms linear infinite;
-}
-@-webkit-keyframes glitch10 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-1px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(1px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(1px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-@keyframes glitch10 {
- 0% {
- transform: translateX(0);
- }
- 80% {
- transform: translateX(0);
- color: #fff;
- }
- 85% {
- transform: translateX(-1px);
- color: #4e9a26;
- }
- 90% {
- transform: translateX(1px);
- color: #ac1212;
- }
- 95% {
- transform: translateX(1px);
- color: #fff;
- }
- 100% {
- transform: translateX(0);
- }
-}
-
-@-webkit-keyframes clip {
- 0% {
- -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
- clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
- }
- 100% {
- -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
- clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
- }
-}
-
-@keyframes clip {
- 0% {
- -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
- clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
- }
- 100% {
- -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
- clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
- }
-}
diff --git a/static/@solitude/css/welcome/welcome.css b/static/@solitude/css/welcome/welcome.css
deleted file mode 100644
index b4fcde6c..00000000
--- a/static/@solitude/css/welcome/welcome.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- Shifoo's Solitude by Bobby
- --------------------------
- Shifoo's Solitude is a Web Dungeon located beyond the Dark Hollows of the Endless Information SuperHighway — a dark yet tranquil place where all questions end, curiosity begins, the mind awakens, and one's journey begins anew in the solitude of a serene mind!
- --------------------------
-
- File: welcome.css
- Description: CSS for the welcome page (exclusively)
- Date: Jul 11, 2023
- Last Modified: Jul 11, 2023
-*/
-@import url("https://fonts.googleapis.com/css2?family=Handlee&family=Poppins:wght@400&family=Share:wght@700&display=swap");
-@import url(audio.css);
-@import url(button.css);
-@import url(glitch.css);
-:root {
- --button-height: 0.5rem;
- --button-color: #edd;
- color-schema: dark;
- font-family: "Handlee", cursive;
-}
-
-* {
- margin: 0;
- padding: 0;
- color: white;
-}
-
-#cover-video {
- position: fixed;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- object-fit: cover;
- z-index: -100;
-}
-
-#cover-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- min-width: 100%;
- min-height: 100%;
- height: 100%;
- width: 100%;
- z-index: -99;
-}
-
-#welcome-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- background: repeating-linear-gradient(
- 0deg,
- #0e0d0e77 25%,
- #0e0d0e77 50%,
- #17181977 50%,
- #17181977 75%
- );
- background-size: 10px 10px;
-}
-
-.cwrapper {
- text-align: center;
-}
-
-p {
- margin: 0;
- padding: 0;
-}
-
-.small {
- font-size: 0.8rem;
- margin: 0.5rem 0;
- color: #aaa;
-}
-
-#welcome-button {
- font-family: "Poppins", sans-serif;
- font-size: 1.5rem;
- padding: 0.5rem 1rem;
- border-radius: 0.5rem;
- transition: all 0.2s ease-in-out;
- margin-top: 10rem;
-}
-
-@media only screen and (max-width: 600px) {
- .glitch {
- font-size: 5rem;
- }
-}