diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-06-06 16:28:59 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-06-06 16:28:59 +0200 |
| commit | c479ef350b7ae5b3b9fd587698550f86bc2636cc (patch) | |
| tree | b3dd9e2c343d280c6030e2e9ce4f2dacb3b57d6b /apps/frontpage/static/pre.css | |
| parent | f36c242da2ef9452bddcfd85f7e43ff918d7282c (diff) | |
| download | greatoffice-c479ef350b7ae5b3b9fd587698550f86bc2636cc.tar.xz greatoffice-c479ef350b7ae5b3b9fd587698550f86bc2636cc.zip | |
refactor: Put pre.css inside of style tags so that we dont have to wait for the second request on pre.css to show the loader and theme
Diffstat (limited to 'apps/frontpage/static/pre.css')
| -rw-r--r-- | apps/frontpage/static/pre.css | 128 |
1 files changed, 0 insertions, 128 deletions
diff --git a/apps/frontpage/static/pre.css b/apps/frontpage/static/pre.css deleted file mode 100644 index 9c9446e..0000000 --- a/apps/frontpage/static/pre.css +++ /dev/null @@ -1,128 +0,0 @@ -: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); - } -} |
