mirror of
https://github.com/amark/gun.git
synced 2026-03-19 06:39:10 +00:00
alpha kit
This commit is contained in:
Mark Nadal
241
kit/web.css
Normal file
241
kit/web.css
Normal file
@@ -0,0 +1,241 @@
|
||||
:root {
|
||||
--cs: 18pt;
|
||||
--mood: white;
|
||||
--fill: white;
|
||||
--blur: 5px;
|
||||
--drip: center;
|
||||
--font: system-ui, sans-serif;
|
||||
--time: 0.3s;
|
||||
--oval: 2em;
|
||||
--pop: #BF00FF;
|
||||
}
|
||||
html, body /*, main, .page*/ {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0.5em;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
color: black;
|
||||
color: var(--pop);
|
||||
position: relative;
|
||||
font-family: var(--font);
|
||||
font-size: max(18pt, 2vw);
|
||||
font-size: 18pt;
|
||||
font-size: var(--cs);
|
||||
transition: all 0.3s;
|
||||
transition: all var(--time);
|
||||
background-color: transparent;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--pop) transparent;
|
||||
} body, main, .page { display: grid; place-items: var(--drip); }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root { --mood: black; }
|
||||
} /*.page { dis-play:none } .page:target { display:grid; }*/
|
||||
main, .page {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; min-height: 100vh;
|
||||
}
|
||||
frame, iframe, body, html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
div, ul, ol, li, p, span, form, button, input, textarea, img, frame, iframe {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0.5em;
|
||||
position: relative;
|
||||
vertical-align: inherit;
|
||||
display: grid; place-items: var(--drip);
|
||||
-webkit-transition: all var(--time);
|
||||
transition: all 0.3s;
|
||||
transition: all var(--time);
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
font: inherit;
|
||||
}
|
||||
button, input, textarea { padding: 0.5em 1em; }
|
||||
a, button, input, textarea {
|
||||
display: grid; place-items: var(--drip);
|
||||
background-color: inherit;
|
||||
border: inherit;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
input:not([type=button]):not([type=submit]), textarea {
|
||||
width: 100%;
|
||||
}
|
||||
input:-internal-autofill-selected { background-color: transparent !important; }
|
||||
|
||||
a:focus, button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=password]:focus {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
}
|
||||
p + p {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
[contenteditable=true]:empty:before {
|
||||
content: attr(placeholder);
|
||||
}
|
||||
::placeholder, .hint {
|
||||
color: inherit;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.model, .none { display: none }
|
||||
.hide {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 2s;
|
||||
}
|
||||
|
||||
.full {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.max {
|
||||
max-width: 48em;
|
||||
}
|
||||
.min {
|
||||
min-width: 12em;
|
||||
}
|
||||
.pad {
|
||||
width: 95%;
|
||||
margin: 5% auto;
|
||||
max-width: 48em;
|
||||
min-width: 12em;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
}
|
||||
.row::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.col {
|
||||
max-width: 24em;
|
||||
min-width: 12em;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.mid {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.top {
|
||||
vertical-align: top;
|
||||
}
|
||||
.low {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.sap { border-radius: var(--oval); }
|
||||
.lip { border: 0.01em solid var(--pop); }
|
||||
.rim { margin: 1%; }
|
||||
.gap {
|
||||
padding: 3%;
|
||||
padding: clamp(0.5em, 3%, 1.5em);
|
||||
}
|
||||
.sit { margin-bottom: 0; }
|
||||
.stack { line-height: 0; }
|
||||
.crack { margin-bottom: 1%; }
|
||||
|
||||
.fog {
|
||||
backdrop-filter: blur(var(--blur));
|
||||
}
|
||||
|
||||
.focus {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.leak { overflow: visible; }
|
||||
.hold { overflow: hidden; }
|
||||
|
||||
.sky {
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2em, black calc(100% - 2em), transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 2em, black calc(100% - 2em), transparent 100%);
|
||||
}
|
||||
|
||||
.act {
|
||||
/*display: block;*/
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all var(--time);
|
||||
transition: all var(--time);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.unit, .symbol {
|
||||
display: inline-block;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
.jot { border-bottom: 1px dashed #95B2CA; }
|
||||
|
||||
.loud {
|
||||
font-size: 150%;
|
||||
}
|
||||
.shout {
|
||||
font-size: 36pt;
|
||||
font-size: 6.5vmax;
|
||||
}
|
||||
|
||||
.ink { color: black; background-color: rgba(100%,100%,100%,0.5); }
|
||||
@media (prefers-color-scheme: dark) { .ink { color: white; background-color: rgba(0,0,0,0.5); } }
|
||||
|
||||
.dim { background-color: rgba(0,0,0,0.5); }
|
||||
.red { background: #ea3224; }
|
||||
.green { background: #33cc33; }
|
||||
.blue { background: #4D79D8; }
|
||||
.yellow { background: #d3a438; }
|
||||
.black { background: black; }
|
||||
.white { background: white; }
|
||||
|
||||
.shade { background: rgba(0%, 0%, 0%, 0.1); }
|
||||
.tint { background: rgba(100%, 100%, 100%, 0.1); }
|
||||
|
||||
.redt { color: #ea3224; }
|
||||
.greent { color: #33cc33; }
|
||||
.bluet { color: #4D79D8; }
|
||||
.yellowt { color: #d3a438; }
|
||||
.blackt { color: black; }
|
||||
.whitet { color: white; }
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s infinite;
|
||||
} @keyframes pulse {
|
||||
0% {opacity: 1;}
|
||||
50% {opacity: 0.5;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
Reference in New Issue
Block a user