diff --git a/src/css/style.css b/src/css/style.css index 537c54a..e3ccad9 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -23,15 +23,29 @@ body { font-weight: 600; } +.loader-wrapper { + margin-top: 10em; + width: 100%; + display: flex; + justify-content: center; +} + .loader { display: flex; + width: min-content; + vertical-align: middle; } + .loader .spinner { - margin-top: 0px; + margin-top: auto; + margin-bottom: auto; } + .loader .loading-text { - margin-top: 0px; + margin-top: auto; + margin-bottom: auto; margin-left: 0.5em; + white-space: nowrap; } .video-wrapper { @@ -42,7 +56,7 @@ body { video { position: absolute; height: 100%; - width: auto; + width: auto; } main { @@ -98,6 +112,7 @@ a.menu-heading { cursor: pointer; display: flex; } + .menu-viewcount { font-family: 'Prompt', sans-serif; font-size: larger; @@ -113,6 +128,7 @@ li.menu-item { background-color: var(--menu-item-color); margin-top: 1px; } + li.menu-item:hover { background-color: var(--menu-item-hover); } @@ -127,15 +143,20 @@ li.menu-selected { } .spinner { - border: 4px solid var(--menu-header-text); - border-top: 4px solid var(--menu-selected-color); - border-radius: 50%; - width: 10px; - height: 10px; - animation: spin 2s linear infinite; + border: 4px solid var(--menu-header-text); + border-top: 4px solid var(--menu-selected-color); + border-radius: 50%; + width: 10px; + height: 10px; + animation: spin 1s linear infinite; } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } \ No newline at end of file diff --git a/src/js/media.tsx b/src/js/media.tsx index a6daedb..dcd70cf 100644 --- a/src/js/media.tsx +++ b/src/js/media.tsx @@ -156,9 +156,11 @@ export function LoadingText({ text, spinner = false }: LoadingText) { } return ( <> -
- {spinnerElement} -

{text}

+
+
+ {spinnerElement} +

{text}

+
)