mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
213 lines
No EOL
6 KiB
CSS
213 lines
No EOL
6 KiB
CSS
body {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
@media(prefers-color-scheme: dark){
|
|
body{
|
|
color:white;
|
|
background-color:#121212;
|
|
}
|
|
}
|
|
|
|
#iframe {
|
|
border: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#edit {
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
color: rgba(0, 0, 0, 0.54);
|
|
position: absolute;
|
|
z-index: 100;
|
|
position: absolute;
|
|
top: 0.85em;
|
|
right: 1em;
|
|
display: none;
|
|
}
|
|
#edit:not(:hover) {
|
|
text-decoration: none;
|
|
}
|
|
#warning {
|
|
position: absolute;
|
|
border-radius: 4px;
|
|
background-color: #feecc2;
|
|
padding: 1em;
|
|
font-size: 16px;
|
|
width: 20em;
|
|
z-index: 100;
|
|
top: 10vh;
|
|
left: 50vw;
|
|
margin-left: -10em;
|
|
}
|
|
#warning:empty {
|
|
display: none;
|
|
}
|
|
body.toasting #iframe,
|
|
body.toasting #edit {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
body.toasting #toast {
|
|
box-sizing: border-box;
|
|
background-color: #feecc2;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
left: 50%;
|
|
top: 10px;
|
|
margin-left: -160px;
|
|
padding: 1em;
|
|
position: absolute;
|
|
max-width: 320px;
|
|
z-index: 101;
|
|
}
|
|
body:not(.toasting) #toast,
|
|
body.toasting #warning {
|
|
display: none;
|
|
}
|
|
|
|
body:not(.download) #download {
|
|
display:none;
|
|
}
|
|
|
|
#download {
|
|
background:#fafafa;
|
|
width:100vw;
|
|
height:100vh;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
display:flex;
|
|
text-decoration: none;
|
|
color:black;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-size:14px;
|
|
|
|
}
|
|
#dl-image {
|
|
width:128px;
|
|
height:128px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-outside-1_116_2' maskUnits='userSpaceOnUse' x='27' y='15' width='74' height='98' fill='black'%3E%3Crect fill='white' x='27' y='15' width='74' height='98'/%3E%3Cpath d='M80 16H28V112H100V36L80 16Z'/%3E%3C/mask%3E%3Cpath d='M80 16H28V112H100V36L80 16Z' fill='white'/%3E%3Cpath d='M28 16V15H27V16H28ZM80 16L80.7071 15.2929L80.4142 15H80V16ZM28 112H27V113H28V112ZM100 112V113H101V112H100ZM100 36H101V35.5858L100.707 35.2929L100 36ZM28 17H80V15H28V17ZM29 112V16H27V112H29ZM100 111H28V113H100V111ZM99 36V112H101V36H99ZM100.707 35.2929L80.7071 15.2929L79.2929 16.7071L99.2929 36.7071L100.707 35.2929Z' fill='black' fill-opacity='0.15' mask='url(%23path-1-outside-1_116_2)'/%3E%3C/svg%3E%0A");
|
|
padding: 20px 32px;
|
|
box-sizing: border-box;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;;
|
|
color:rgba(0,0,0,0.3);
|
|
font-weight:bold;
|
|
}
|
|
#dl-button {
|
|
text-decoration:none;
|
|
background:gray;
|
|
color:white;
|
|
padding:0.5em 1em;
|
|
border-radius:2em;
|
|
display:none;
|
|
}
|
|
#dl-button:hover {
|
|
background:black;
|
|
}
|
|
#dl-name {
|
|
margin-bottom:2em;
|
|
}
|
|
|
|
body:not(.loading) #loader {
|
|
/* display:none; */
|
|
opacity:0.0;
|
|
}
|
|
#loader{
|
|
border-radius:50%;
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 10px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
color: white;
|
|
opacity:1.0;
|
|
transition: opacity 500ms;
|
|
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation: turntable 2.8s infinite ease-in-out;
|
|
animation: turntable 2.8s infinite ease-in-out;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s;
|
|
animation-timing-function: ease-in-out;
|
|
|
|
--ld0: 0.00em 2.25em 0 0.20em
|
|
rgba(127,127,127,1.50);
|
|
--ld1: 0.93em 2.24em 0 0.20em
|
|
rgba(127,127,127,1.45);
|
|
--ld2: 1.76em 2.20em 0 0.18em
|
|
rgba(127,127,127,1.31);
|
|
--ld3: 2.43em 2.15em 0 0.16em
|
|
rgba(127,127,127,1.09);
|
|
--ld4: 2.85em 2.08em 0 0.13em
|
|
rgba(127,127,127,0.81);
|
|
--ld5: 3.00em 2.00em 0 0.10em
|
|
rgba(127,127,127,0.50);
|
|
--ld6: 2.85em 1.92em 0 0.07em
|
|
rgba(127,127,127,0.19);
|
|
--ld7: 2.43em 1.85em 0 0.04em
|
|
rgba(127,127,127,-0.09);
|
|
--ld8: 1.76em 1.80em 0 0.02em
|
|
rgba(127,127,127,-0.31);
|
|
--ld9: 0.93em 1.76em 0 0.00em
|
|
rgba(127,127,127,-0.45);
|
|
--ld10: 0.00em 1.75em 0 0.00em
|
|
rgba(127,127,127,-0.50);
|
|
--ld11: -0.93em 1.76em 0 0.00em
|
|
rgba(127,127,127,-0.45);
|
|
--ld12: -1.76em 1.80em 0 0.02em
|
|
rgba(127,127,127,-0.31);
|
|
--ld13: -2.43em 1.85em 0 0.04em
|
|
rgba(127,127,127,-0.09);
|
|
--ld14: -2.85em 1.92em 0 0.07em
|
|
rgba(127,127,127,0.19);
|
|
--ld15: -3.00em 2.00em 0 0.10em
|
|
rgba(127,127,127,0.50);
|
|
--ld16: -2.85em 2.08em 0 0.13em
|
|
rgba(127,127,127,0.81);
|
|
--ld17: -2.43em 2.15em 0 0.16em
|
|
rgba(127,127,127,1.09);
|
|
--ld18: -1.76em 2.20em 0 0.18em
|
|
rgba(127,127,127,1.31);
|
|
--ld19: -0.93em 2.24em 0 0.20em
|
|
rgba(127,127,127,1.45);
|
|
}
|
|
|
|
|
|
@keyframes turntable {
|
|
100%,
|
|
0% {box-shadow:var(--ld0),var(--ld4), var(--ld8),var(--ld12),var(--ld16)}
|
|
5% {box-shadow:var(--ld1),var(--ld5), var(--ld9),var(--ld13),var(--ld17)}
|
|
10% {box-shadow:var(--ld2),var(--ld6), var(--ld10),var(--ld14),var(--ld18)}
|
|
15% {box-shadow:var(--ld3),var(--ld7), var(--ld11),var(--ld15),var(--ld19)}
|
|
20% {box-shadow:var(--ld4),var(--ld8), var(--ld12),var(--ld16),var(--ld0)}
|
|
25% {box-shadow:var(--ld5),var(--ld9), var(--ld13),var(--ld17),var(--ld1)}
|
|
30% {box-shadow:var(--ld6),var(--ld10), var(--ld14),var(--ld18),var(--ld2)}
|
|
35% {box-shadow:var(--ld7),var(--ld11), var(--ld15),var(--ld19),var(--ld3)}
|
|
40% {box-shadow:var(--ld8),var(--ld12), var(--ld16),var(--ld0),var(--ld4)}
|
|
45% {box-shadow:var(--ld9),var(--ld13), var(--ld17),var(--ld1),var(--ld5)}
|
|
50% {box-shadow:var(--ld10),var(--ld14), var(--ld18),var(--ld2),var(--ld6)}
|
|
55% {box-shadow:var(--ld11),var(--ld15), var(--ld19),var(--ld3),var(--ld7)}
|
|
60% {box-shadow:var(--ld12),var(--ld16), var(--ld0),var(--ld4),var(--ld8)}
|
|
65% {box-shadow:var(--ld13),var(--ld17), var(--ld1),var(--ld5),var(--ld9)}
|
|
70% {box-shadow:var(--ld14),var(--ld18), var(--ld2),var(--ld6),var(--ld10)}
|
|
75% {box-shadow:var(--ld15),var(--ld19), var(--ld3),var(--ld7),var(--ld11)}
|
|
80% {box-shadow:var(--ld16),var(--ld0), var(--ld4),var(--ld8),var(--ld12)}
|
|
85% {box-shadow:var(--ld17),var(--ld1), var(--ld5),var(--ld9),var(--ld13)}
|
|
90% {box-shadow:var(--ld18),var(--ld2), var(--ld6),var(--ld10),var(--ld14)}
|
|
95% {box-shadow:var(--ld19),var(--ld3), var(--ld7),var(--ld11),var(--ld15)}
|
|
} |