diff options
Diffstat (limited to 'static/@solitude/css')
| -rw-r--r-- | static/@solitude/css/shared.css | 0 | ||||
| -rw-r--r-- | static/@solitude/css/welcome/audio.css | 141 | ||||
| -rw-r--r-- | static/@solitude/css/welcome/button.css | 68 | ||||
| -rw-r--r-- | static/@solitude/css/welcome/glitch.css | 574 | ||||
| -rw-r--r-- | static/@solitude/css/welcome/welcome.css | 94 |
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; - } -} |
