mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
425 lines
No EOL
10 KiB
CSS
425 lines
No EOL
10 KiB
CSS
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
margin:0;
|
|
}
|
|
|
|
:root {
|
|
--text-color: #16161d;
|
|
--background-color: white;
|
|
--shadow-color: var(--text-color);
|
|
--backdrop-color: red;
|
|
/* repeating-conic-gradient(rgba(255,255,255,1.0) 0% 25%, transparent 0% 50%) 50% / 4px 4px; */
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--text-color:white;
|
|
--background-color: #16161d;
|
|
--backdrop: repeating-conic-gradient(rgba(128,128,128,.5) 0% 25%, transparent 0% 50%) 50% / 4px 4px;
|
|
|
|
}
|
|
body{
|
|
color:var(--text-color);
|
|
background-color:var(--background-color);
|
|
}
|
|
}
|
|
|
|
#iframe {
|
|
border: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
#menu {
|
|
width: 48px;
|
|
height: 48px;
|
|
top:0;
|
|
right: 0;
|
|
position:fixed;
|
|
z-index:9;
|
|
border:none;
|
|
color: #16161d;
|
|
opacity: .8;
|
|
border-bottom-left-radius: 0;
|
|
font-size: 18px;
|
|
transition: font-size 100ms cubic-bezier(0.4, 0.0, 0.2, 1);;
|
|
text-align: right;
|
|
}
|
|
|
|
#menu svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
#menu.open,
|
|
#menu:hover {
|
|
color:white;
|
|
opacity:1.0;
|
|
font-size: 48px;
|
|
/* transition: font-size 1000ms ease-in; */
|
|
}
|
|
#menu.open svg,
|
|
#menu:hover svg{
|
|
background:#16161d;
|
|
|
|
}
|
|
#menu.open svg .inner,
|
|
#menu:hover svg .inner {
|
|
fill:white;
|
|
}
|
|
#menu.open svg .outer,
|
|
#menu:hover svg .outer {
|
|
fill:transparent;
|
|
}
|
|
|
|
#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:1.0; */
|
|
top:-6em;
|
|
transition: top 300ms ease-in;
|
|
}
|
|
#loader{
|
|
border-radius:0.1em;
|
|
width: 0.5em;
|
|
height: .5em;
|
|
font-size: 10px;
|
|
margin: 0 auto;
|
|
top:0em;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
color: white;
|
|
opacity:1.0;
|
|
transition: top 600ms ease-out;
|
|
-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)}
|
|
}
|
|
|
|
|
|
.dialog {
|
|
border: 2px solid white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 0 2px black, inset 0 0 0 3px black;
|
|
min-width: 300px;
|
|
padding: 1.2em;
|
|
display:flex;
|
|
}
|
|
.dialog, .dialog button {font-size: 18px;font-weight: 600;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
|
|
|
|
dialog::backdrop {
|
|
background: rgba(255,255,255,0.5);
|
|
/* repeating-conic-gradient(rgba(255,255,255,.5) 0% 25%, transparent 0% 50%) 50% / 4px 4px; */
|
|
}
|
|
|
|
dialog#qr-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
dialog#qr-dialog div {
|
|
text-align: center;
|
|
}
|
|
|
|
.dialog button {
|
|
border: 1px solid white;
|
|
border-radius: 9px;
|
|
box-shadow: inset 0 0 0 2px black;
|
|
min-width: 4em;
|
|
min-height: 1.8em;
|
|
background-color: white;
|
|
margin-left:1em;
|
|
padding: 0 0.8em;
|
|
color:currentColor;
|
|
}
|
|
|
|
.dialog button:last-child {
|
|
box-shadow: 0 0 0 4px black, inset 0 0 0 2px black;
|
|
}
|
|
|
|
.dialog form {
|
|
text-align: right;
|
|
margin-top: 1em;
|
|
font-size: 18px;
|
|
}
|
|
|
|
dialog.menu {
|
|
top: 48px;
|
|
right: 0;
|
|
position: fixed;
|
|
margin: 0;
|
|
left: auto;
|
|
padding:0;
|
|
bottom: 0;
|
|
max-width:16em;
|
|
font-weight:bold;
|
|
padding-bottom:.8em;
|
|
}
|
|
|
|
.menu-container {
|
|
display:flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.menu .url {
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space: nowrap;
|
|
opacity: 0.5;
|
|
padding: 0.2em 0.8em;
|
|
width:auto;
|
|
border: 1.9px solid black;
|
|
flex: 1 1 auto;
|
|
margin: 2px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.menu hr {
|
|
background-color:var(--text-color);
|
|
height:2px;
|
|
width: 100%;
|
|
}
|
|
.menu .url:focus {
|
|
}
|
|
.menu .url:focus-within {
|
|
}
|
|
|
|
.menu .menu-icons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0;
|
|
cursor:default;
|
|
}
|
|
|
|
.menu .menu-icons .menu-item {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 12px;
|
|
/* display:flex; */
|
|
/* justify-content: center; */
|
|
}
|
|
.menu .menu-icons .menu-item svg{
|
|
width:2em;
|
|
height:2em;
|
|
font-size:12px;
|
|
}
|
|
|
|
.menu .menu-item {
|
|
padding: 0.65em 1em;
|
|
cursor:default;
|
|
}
|
|
|
|
.menu .menu-item:hover {
|
|
background-color:black;
|
|
color:white;
|
|
}
|
|
|
|
|
|
|
|
.menu {
|
|
/* width: auto; */
|
|
color: var(--text-color);
|
|
/* background-color: var(--background-color); */
|
|
border: 2px solid currentColor;
|
|
padding: 0.5em 0;
|
|
box-shadow: 2px 2px var(--shadow-color);
|
|
margin-right: 2px;
|
|
border-radius: 2px;
|
|
margin-top: -2px;
|
|
z-index: 300;
|
|
/* top: 100px; */
|
|
/* text-align: left; */
|
|
/* float: right; */
|
|
/* width: 10rem; */
|
|
position: absolute;
|
|
/* right: 1rem; */
|
|
background-color:var(--background-color);
|
|
}
|
|
|
|
|
|
.menu .menu-item {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
line-height: 2em;
|
|
text-align: left;
|
|
display: block;
|
|
padding: 0 1em;
|
|
cursor: default;
|
|
} |