server-side styleを完全に分離
This commit is contained in:
parent
aa929e0f3a
commit
22f0e1f30e
|
@ -4,6 +4,11 @@
|
||||||
* SPDX-License-Identifier: AGPL-3.0-only
|
* SPDX-License-Identifier: AGPL-3.0-only
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
html.embed {
|
html.embed {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -11,6 +16,19 @@ html.embed {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#splash {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10000;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
cursor: wait;
|
||||||
|
background-color: var(--bg);
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
html.embed #splash {
|
html.embed #splash {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
|
@ -25,3 +43,57 @@ html.embed.norounded #splash {
|
||||||
html.embed.noborder #splash {
|
html.embed.noborder #splash {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#splashIcon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splashSpinner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
display: inline-block;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
transform: translateY(70px);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#splashSpinner > .spinner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
fill-rule: evenodd;
|
||||||
|
clip-rule: evenodd;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-miterlimit: 1.5;
|
||||||
|
}
|
||||||
|
#splashSpinner > .spinner.bg {
|
||||||
|
opacity: 0.275;
|
||||||
|
}
|
||||||
|
#splashSpinner > .spinner.fg {
|
||||||
|
animation: splashSpinner 0.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes splashSpinner {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -52,7 +52,6 @@ html(class='embed')
|
||||||
meta(name='robots' content='noindex')
|
meta(name='robots' content='noindex')
|
||||||
|
|
||||||
style
|
style
|
||||||
include ../style.css
|
|
||||||
include ../style.embed.css
|
include ../style.embed.css
|
||||||
|
|
||||||
script.
|
script.
|
||||||
|
|
Loading…
Reference in a new issue