diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-08-05 13:00:16 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-08-05 13:00:16 +0200 |
| commit | fae5653b9d6c6a318e49217eb4d565252013a904 (patch) | |
| tree | b7bc9c656e0b26fc6289a16a2357462c85e285e1 /apps/portal/src/index.html | |
| parent | 6187962d0aad866edc7cd4ef3f2b828fa84ce670 (diff) | |
| parent | 7f4545d78d4e49ff0dee79e71b71ad7d5d6bacdc (diff) | |
| download | greatoffice-fae5653b9d6c6a318e49217eb4d565252013a904.tar.xz greatoffice-fae5653b9d6c6a318e49217eb4d565252013a904.zip | |
Merge branch 'tailwind'
Diffstat (limited to 'apps/portal/src/index.html')
| -rw-r--r-- | apps/portal/src/index.html | 147 |
1 files changed, 2 insertions, 145 deletions
diff --git a/apps/portal/src/index.html b/apps/portal/src/index.html index c196872..2102205 100644 --- a/apps/portal/src/index.html +++ b/apps/portal/src/index.html @@ -25,151 +25,8 @@ content="#da532c"> <link rel="icon" href="./_assets/pwa/favicon.svg"> - <script> - const value = `; ${document.cookie}`; - const parts = value.split(`; go_theme=`); - let currentTheme = "system"; - if (parts.length === 2) { - currentTheme = parts.pop().split(";").shift(); - } - if (currentTheme === "light") { - document.querySelector("html").dataset.theme = "light"; - } else if (currentTheme === "dark") { - document.querySelector("html").dataset.theme = "dark"; - } else { - document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; - } - </script> - <style> - :root { - --loader-primary: hsl(250, 84%, 54%); - --loader-accent: hsl(342, 89%, 48%); - --loader-contrast: hsl(180, 1%, 84%); - --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1); - } - - [data-theme="dark"] :root { - --loader-primary: hsl(250, 93%, 65%); - --loader-accent: hsl(342, 92%, 54%); - --loader-contrast: hsl(208, 12%, 24%); - --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1); - } - - [data-theme="dark"] { - background-color: hsl(203, 24%, 13%); - } - - .fill-loader { - position: relative; - overflow: hidden; - display: inline-block; - margin: 3rem; - } - - .fill-loader__fill { - position: absolute; - } - - @supports (-webkit-animation-name: this) or (animation-name: this) { - .fill-loader__label { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - } - } - - @supports (-webkit-animation-name: this) or (animation-name: this) { - .fill-loader--v4 { - width: 90%; - max-width: 300px; - } - - .fill-loader--v4 .fill-loader__base { - height: 4px; - background-color: var(--loader-contrast); - } - - .fill-loader--v4 .fill-loader__fill { - top: 0; - left: 0; - right: 0; - height: 100%; - background-color: var(--loader-primary); - -webkit-animation: fill-loader-4 1.6s infinite var(--loader-easing); - animation: fill-loader-4 1.6s infinite var(--loader-easing); - will-change: left, right; - } - } - - @-webkit-keyframes fill-loader-4 { - 0% { - left: 0; - right: 100%; - background-color: var(--loader-primary); - } - - 10%, - 60% { - left: 0; - } - - 40%, - 90% { - right: 0; - } - - 50% { - left: 100%; - background-color: var(--loader-primary); - } - - 51% { - left: 0; - right: 100%; - background-color: var(--loader-accent); - } - - 100% { - left: 100%; - background-color: var(--loader-accent); - } - } - - @keyframes fill-loader-4 { - 0% { - left: 0; - right: 100%; - background-color: var(--loader-primary); - } - - 10%, - 60% { - left: 0; - } - - 40%, - 90% { - right: 0; - } - - 50% { - left: 100%; - background-color: var(--loader-primary); - } - - 51% { - left: 0; - right: 100%; - background-color: var(--loader-accent); - } - - 100% { - left: 100%; - background-color: var(--loader-accent); - } - } - </style> + <link rel="stylesheet" href="./_assets/preload.css"> + <script src="./_assets/preload.js"></script> <title>Portal - Greatoffice</title> </head> |
