diff --git a/javascript/black-teal.css b/javascript/black-teal.css index 13f2b5143..e3f0081b0 100644 --- a/javascript/black-teal.css +++ b/javascript/black-teal.css @@ -315,4 +315,4 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p --button-transition: none; --size-9: 64px; --size-14: 64px; -} +} \ No newline at end of file diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 337637568..bb42a73b8 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -1877,70 +1877,72 @@ div:has(>#tab-gallery-folders) { } .splash { - display: block; - height: 100vh; - left: 0; position: fixed; - text-align: center; top: 0; + left: 0; width: 100vw; + height: 100vh; z-index: 1000; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.8); } .motd { + margin-top: 1em; color: var(--body-text-color-subdued); font-family: monospace; font-variant: all-petite-caps; - margin-top: 2em; + font-size: 1.2em; } .splash-img { - animation: color 10s infinite alternate; - background-repeat: no-repeat; - background-size: contain; - height: 512px; - margin: 10% auto 0 auto; - max-width: 80vw; + margin: 0; width: 512px; + height: 512px; + background-repeat: no-repeat; + animation: color 8s infinite alternate, move 3s infinite alternate; } .loading { color: white; - left: 50%; - position: absolute; - top: 20%; - transform: translateX(-50%); + position: border-box; + top: 85%; + font-size: 1.5em; } .loader { - animation: spin 4s linear infinite; + width: 100px; + height: 100px; border: var(--spacing-md) solid transparent; border-radius: 50%; border-top: var(--spacing-md) solid var(--primary-600); - height: 300px; - position: relative; - width: 300px; + animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite; + position: border-box; } -.loader::before, .loader::after { - border: var(--spacing-md) solid transparent; - border-radius: 50%; - bottom: 6px; +.loader::before, +.loader::after { content: ""; - left: 6px; position: absolute; - right: 6px; top: 6px; + bottom: 6px; + left: 6px; + right: 6px; + border-radius: 50%; + border: var(--spacing-md) solid transparent; } .loader::before { - animation: 3s spin linear infinite; border-top-color: var(--primary-900); + animation: spin 3s linear infinite; } .loader::after { - animation: spin 1.5s linear infinite; border-top-color: var(--primary-300); + animation: spin 1.5s linear infinite; } .docs-search textarea { @@ -2098,12 +2100,14 @@ div:has(>#tab-gallery-folders) { } @keyframes move { - from { - background-position-x: 0, -40px; + 0% { + transform: translateY(0); } - - to { - background-position-x: 0, 40px; + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); } } @@ -2111,21 +2115,26 @@ div:has(>#tab-gallery-folders) { from { transform: rotate(0deg); } - to { transform: rotate(360deg); } } -@keyframes color { - from { - - filter: hue-rotate(0deg) +@keyframes pulse { + 0%, 100% { + transform: scale(1); } + 50% { + transform: scale(1.1); + } +} - to { - - filter: hue-rotate(360deg) +@keyframes color { + 0% { + filter: hue-rotate(0deg); + } + 100% { + filter: hue-rotate(360deg); } }