limepotato/limepot-xyz
1
0
Fork 0
Code Issues 3 Pull requests Activity

202403211815

Browse source
This commit is contained in:
nelle 2024-03-21 18:15:55 -06:00
parent 994b0ac36b
commit 4c898e1c1c
1 changed files with 28 additions and 418 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

446
dist/dl/microbin.css vendored
View file

@ -22,32 +22,7 @@
--highlight: #ff0; --highlight: #ff0;
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
} }
@media (prefers-color-scheme:dark) {
:root {
--background-body: #141b23;
--background: #222f3a;
--background-alt: #1a242f;
--selection: #f9e2af;
--text-main: #dbdbdb;
--text-bright: #1e1e2e;
--text-muted: #a9b1ba;
--links: #f9e2af;
--focus: #f9e2af;
--border: #526980;
--code: #ffbe85;
--animation-duration: 0.1s;
--button-base: #0c151c;
--button-hover: #040a0f;
--scrollbar-thumb: var(--button-hover);
--scrollbar-thumb-hover: #000;
--form-placeholder: #a9a9a9;
--form-text: #1e1e2e;
--variable: #d941e2;
--highlight: #efdb43;
--select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
}
}
html { html {
scrollbar-color: #aaa #1e1e2e; scrollbar-color: #aaa #1e1e2e;
@ -55,13 +30,6 @@
scrollbar-width: thin scrollbar-width: thin
} }
@media (prefers-color-scheme:dark) {
html {
scrollbar-color: #040a0f #202b38;
scrollbar-color: var(--scrollbar-thumb) var(--background-body)
}
}
body { body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif;
line-height: 1.4; line-height: 1.4;
@ -76,50 +44,28 @@
text-rendering: optimizeLegibility text-rendering: optimizeLegibility
} }
@media (prefers-color-scheme:dark) {
body {
background: #202b38;
background: var(--background-body);
color: #dbdbdb;
color: var(--text-main)
}
}
button { button {
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease; transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
} }
@media (prefers-color-scheme:dark) {
button {
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
}
}
input { input {
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease; transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
} }
@media (prefers-color-scheme:dark) { input::file-selector-button {
input { width: 140px;
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease; float: right;
transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease background-color:#fab387;
} color: white;
} }
textarea { textarea {
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease; transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
} }
@media (prefers-color-scheme:dark) {
textarea {
transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease
}
}
h1 { h1 {
font-size: 2.2em; font-size: 2.2em;
@ -140,85 +86,41 @@
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
h1 {
color: #1e1e2e;
color: var(--text-bright)
}
}
h2 { h2 {
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
h2 {
color: #1e1e2e;
color: var(--text-bright)
}
}
h3 { h3 {
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
h3 {
color: #1e1e2e;
color: var(--text-bright)
}
}
h4 { h4 {
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
h4 {
color: #1e1e2e;
color: var(--text-bright)
}
}
h5 { h5 {
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
h5 {
color: #1e1e2e;
color: var(--text-bright)
}
}
h6 { h6 {
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
h6 {
color: #1e1e2e;
color: var(--text-bright)
}
}
strong { strong {
color: #000; color: #000;
color: var(--text-bright) color: var(--text-bright)
} }
@media (prefers-color-scheme:dark) {
strong {
color: #1e1e2e;
color: var(--text-bright)
}
}
b, b,
h1, h1,
@ -245,12 +147,7 @@
font-style: italic font-style: italic
} }
@media (prefers-color-scheme:dark) {
blockquote {
border-left: 4px solid #418ed1;
border-left: 4px solid var(--focus)
}
}
q { q {
border-left: 4px solid #418ed1; border-left: 4px solid #418ed1;
@ -260,12 +157,7 @@
font-style: italic font-style: italic
} }
@media (prefers-color-scheme:dark) {
q {
border-left: 4px solid #418ed1;
border-left: 4px solid var(--focus)
}
}
blockquote>footer { blockquote>footer {
font-style: normal; font-style: normal;
@ -297,12 +189,6 @@
color: #000 color: #000
} }
@media (prefers-color-scheme:dark) {
mark {
background-color: #efdb43;
background-color: var(--highlight)
}
}
a>code, a>code,
a>strong { a>strong {
@ -345,14 +231,6 @@
outline: none outline: none
} }
@media (prefers-color-scheme:dark) {
input {
background-color: #161f27;
background-color: var(--background);
color: #1e1e2e;
color: var(--form-text)
}
}
button { button {
color: #1d1d1d; color: #1d1d1d;
@ -369,15 +247,6 @@
outline: none outline: none
} }
@media (prefers-color-scheme:dark) {
button {
background-color: #161f27;
background-color: var(--background);
color: #1e1e2e;
color: var(--form-text)
}
}
textarea { textarea {
color: #1d1d1d; color: #1d1d1d;
color: var(--form-text); color: var(--form-text);
@ -393,15 +262,6 @@
outline: none outline: none
} }
@media (prefers-color-scheme:dark) {
textarea {
background-color: #161f27;
background-color: var(--background);
color: #1e1e2e;
color: var(--form-text)
}
}
select { select {
color: #1d1d1d; color: #1d1d1d;
color: var(--form-text); color: var(--form-text);
@ -417,28 +277,13 @@
outline: none outline: none
} }
@media (prefers-color-scheme:dark) {
select {
background-color: #161f27;
background-color: var(--background);
color: #1e1e2e;
color: var(--form-text)
}
}
button { button {
background-color: #d0cfcf; background-color: #d0cfcf;
background-color: var(--button-base); background-color: var(--button-base);
padding-right: 30px; padding-right: 30px;
padding-left: 30px padding-left: 30px
} }
@media (prefers-color-scheme:dark) {
button {
background-color: #0c151c;
background-color: var(--button-base)
}
}
input[type=submit] { input[type=submit] {
background-color: #d0cfcf; background-color: #d0cfcf;
@ -446,90 +291,43 @@
padding-right: 30px; padding-right: 30px;
padding-left: 30px padding-left: 30px
} }
@media (prefers-color-scheme:dark) {
input[type=submit] {
background-color: #0c151c;
background-color: var(--button-base)
}
}
input[type=reset] { input[type=reset] {
background-color: #d0cfcf; background-color: #d0cfcf;
background-color: var(--button-base); background-color: var(--button-base);
padding-right: 30px; padding-right: 30px;
padding-left: 30px padding-left: 30px
}
@media (prefers-color-scheme:dark) {
input[type=reset] {
background-color: #0c151c;
background-color: var(--button-base)
}
}
input[type=button] { input[type=button] {
background-color: #d0cfcf; background-color: #d0cfcf;
background-color: var(--button-base); background-color: var(--button-base);
padding-right: 30px; padding-right: 30px;
padding-left: 30px padding-left: 30px
} }
@media (prefers-color-scheme:dark) {
input[type=button] {
background-color: #0c151c;
background-color: var(--button-base)
}
}
button:hover { button:hover {
background: #9b9b9b; background: #9b9b9b;
background: var(--button-hover) background: var(--button-hover)
} }
@media (prefers-color-scheme:dark) {
button:hover {
background: #040a0f;
background: var(--button-hover)
}
}
input[type=submit]:hover { input[type=submit]:hover {
background: #9b9b9b; background: #9b9b9b;
background: var(--button-hover) background: var(--button-hover)
} }
@media (prefers-color-scheme:dark) {
input[type=submit]:hover {
background: #040a0f;
background: var(--button-hover)
}
}
input[type=reset]:hover { input[type=reset]:hover {
background: #9b9b9b; background: #9b9b9b;
background: var(--button-hover) background: var(--button-hover)
} }
@media (prefers-color-scheme:dark) {
input[type=reset]:hover {
background: #040a0f;
background: var(--button-hover)
}
}
input[type=button]:hover { input[type=button]:hover {
background: #9b9b9b; background: #9b9b9b;
background: var(--button-hover) background: var(--button-hover)
} }
@media (prefers-color-scheme:dark) {
input[type=button]:hover {
background: #040a0f;
background: var(--button-hover)
}
}
input[type=color] { input[type=color] {
min-height: 2rem; min-height: 2rem;
padding: 8px; padding: 8px;
@ -585,13 +383,7 @@
background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat; background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;
padding-right: 35px padding-right: 35px
} }
@media (prefers-color-scheme:dark) {
select {
background: #161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat
}
}
select::-ms-expand { select::-ms-expand {
display: none display: none
@ -608,48 +400,23 @@
box-shadow: 0 0 0 2px var(--focus) box-shadow: 0 0 0 2px var(--focus)
} }
@media (prefers-color-scheme:dark) {
input:focus {
box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus)
}
}
select:focus { select:focus {
box-shadow: 0 0 0 2px #418ed1; box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus) box-shadow: 0 0 0 2px var(--focus)
} }
@media (prefers-color-scheme:dark) {
select:focus {
box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus)
}
}
button:focus { button:focus {
box-shadow: 0 0 0 2px #418ed1; box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus) box-shadow: 0 0 0 2px var(--focus)
} }
@media (prefers-color-scheme:dark) {
button:focus {
box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus)
}
}
textarea:focus { textarea:focus {
box-shadow: 0 0 0 2px #418ed1; box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus) box-shadow: 0 0 0 2px var(--focus)
} }
@media (prefers-color-scheme:dark) {
textarea:focus {
box-shadow: 0 0 0 2px #418ed1;
box-shadow: 0 0 0 2px var(--focus)
}
}
button:active, button:active,
input[type=button]:active, input[type=button]:active,
@ -689,28 +456,6 @@
color: var(--form-placeholder) color: var(--form-placeholder)
} }
@media (prefers-color-scheme:dark) {
::-moz-placeholder {
color: #a9a9a9;
color: var(--form-placeholder)
}
:-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder)
}
::-ms-input-placeholder {
color: #a9a9a9;
color: var(--form-placeholder)
}
::placeholder {
color: #a9a9a9;
color: var(--form-placeholder)
}
}
fieldset { fieldset {
border: 1px solid #418ed1; border: 1px solid #418ed1;
border: 1px solid var(--focus); border: 1px solid var(--focus);
@ -719,12 +464,6 @@
padding: 10px padding: 10px
} }
@media (prefers-color-scheme:dark) {
fieldset {
border: 1px solid #418ed1;
border: 1px solid var(--focus)
}
}
legend { legend {
font-size: .9em; font-size: .9em;
@ -750,14 +489,6 @@
background: var(--background); background: var(--background);
border-radius: 3px border-radius: 3px
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-webkit-slider-runnable-track {
background: #161f27;
background: var(--background)
}
}
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d; box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px; height: 20px;
@ -769,24 +500,12 @@
margin-top: -7px margin-top: -7px
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-webkit-slider-thumb {
background: #526980;
background: var(--border)
}
}
input[type=range]:focus::-webkit-slider-runnable-track { input[type=range]:focus::-webkit-slider-runnable-track {
background: #efefef; background: #efefef;
background: var(--background) background: var(--background)
} }
@media (prefers-color-scheme:dark) {
input[type=range]:focus::-webkit-slider-runnable-track {
background: #161f27;
background: var(--background)
}
}
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
width: 100%; width: 100%;
@ -798,13 +517,6 @@
border-radius: 3px border-radius: 3px
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-moz-range-track {
background: #161f27;
background: var(--background)
}
}
input[type=range]::-moz-range-thumb { input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
height: 20px; height: 20px;
@ -814,13 +526,6 @@
background: var(--border) background: var(--border)
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-moz-range-thumb {
background: #526980;
background: var(--border)
}
}
input[type=range]::-ms-track { input[type=range]::-ms-track {
width: 100%; width: 100%;
height: 9.5px; height: 9.5px;
@ -838,12 +543,6 @@
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-ms-fill-lower {
background: #161f27;
background: var(--background)
}
}
input[type=range]::-ms-fill-upper { input[type=range]::-ms-fill-upper {
background: #efefef; background: #efefef;
@ -853,13 +552,6 @@
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-ms-fill-upper {
background: #161f27;
background: var(--background)
}
}
input[type=range]::-ms-thumb { input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d; box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
border: 1px solid #000; border: 1px solid #000;
@ -869,51 +561,27 @@
background: #dbdbdb; background: #dbdbdb;
background: var(--border) background: var(--border)
} }
@media (prefers-color-scheme:dark) {
input[type=range]::-ms-thumb {
background: #526980;
background: var(--border)
}
}
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
background: #efefef; background: #efefef;
background: var(--background) background: var(--background)
} }
@media (prefers-color-scheme:dark) {
input[type=range]:focus::-ms-fill-lower {
background: #161f27;
background: var(--background)
}
}
input[type=range]:focus::-ms-fill-upper { input[type=range]:focus::-ms-fill-upper {
background: #efefef; background: #efefef;
background: var(--background) background: var(--background)
} }
@media (prefers-color-scheme:dark) {
input[type=range]:focus::-ms-fill-upper {
background: #161f27;
background: var(--background)
}
}
a { a {
text-decoration: none; text-decoration: none;
color: #0076d1; color: #0076d1;
color: var(--links) color: var(--links)
} }
@media (prefers-color-scheme:dark) {
a {
color: #41adff;
color: var(--links)
}
}
a:hover { a:hover {
text-decoration: underline text-decoration: underline
} }
@ -928,14 +596,6 @@
font-size: 1em font-size: 1em
} }
@media (prefers-color-scheme:dark) {
code {
color: #ffbe85;
color: var(--code);
background: #161f27;
background: var(--background)
}
}
samp { samp {
background: #efefef; background: #efefef;
@ -947,14 +607,6 @@
font-size: 1em font-size: 1em
} }
@media (prefers-color-scheme:dark) {
samp {
color: #ffbe85;
color: var(--code);
background: #161f27;
background: var(--background)
}
}
time { time {
background: #efefef; background: #efefef;
@ -966,14 +618,6 @@
font-size: 1em font-size: 1em
} }
@media (prefers-color-scheme:dark) {
time {
color: #ffbe85;
color: var(--code);
background: #161f27;
background: var(--background)
}
}
pre>code { pre>code {
padding: 10px; padding: 10px;
@ -988,12 +632,6 @@
font-family: monospace font-family: monospace
} }
@media (prefers-color-scheme:dark) {
var {
color: #d941e2;
color: var(--variable)
}
}
kbd { kbd {
background: #efefef; background: #efefef;
@ -1006,16 +644,6 @@
padding: 2px 4px padding: 2px 4px
} }
@media (prefers-color-scheme:dark) {
kbd {
color: #dbdbdb;
color: var(--text-main);
border: 1px solid #526980;
border: 1px solid var(--border);
background: #161f27;
background: var(--background)
}
}
img, img,
video { video {
@ -1029,12 +657,6 @@
border-top: 1px solid var(--border) border-top: 1px solid var(--border)
} }
@media (prefers-color-scheme:dark) {
hr {
border-top: 1px solid #526980;
border-top: 1px solid var(--border)
}
}
table { table {
border-collapse: collapse; border-collapse: collapse;
@ -1061,24 +683,12 @@
border-bottom: 1px solid var(--border) border-bottom: 1px solid var(--border)
} }
@media (prefers-color-scheme:dark) {
thead {
border-bottom: 1px solid #526980;
border-bottom: 1px solid var(--border)
}
}
tfoot { tfoot {
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
border-top: 1px solid var(--border) border-top: 1px solid var(--border)
} }
@media (prefers-color-scheme:dark) {
tfoot {
border-top: 1px solid #526980;
border-top: 1px solid var(--border)
}
}
tbody tr:nth-child(2n) { tbody tr:nth-child(2n) {
background-color: #efefef; background-color: #efefef;