132 lines
2.5 KiB
CSS
132 lines
2.5 KiB
CSS
|
:root {
|
||
|
|
--raven: #2c343b;
|
||
|
|
--lilia: #f1f3f4;
|
||
|
|
--base-font-size: 18px;
|
||
|
|
--base-font-weight: 300;
|
||
|
|
|
||
|
|
/* Theme */
|
||
|
|
--hue: 180;
|
||
|
|
--saturation: 50%;
|
||
|
|
--light: 50%;
|
||
|
|
--theme-hsl: var(--hue), var(--saturation), var(--light);
|
||
|
|
|
||
|
|
/* uncomment if you want a gradient
|
||
|
|
|
||
|
|
--gradient-light: 50%;
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
background: var(--raven);
|
||
|
|
color: var(--lilia);
|
||
|
|
padding: 1em;
|
||
|
|
font-family: arial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.neons {
|
||
|
|
padding: 1em;
|
||
|
|
min-height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Panel */
|
||
|
|
.panel {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Controls */
|
||
|
|
.controls,
|
||
|
|
.result {
|
||
|
|
background: var(--lilia);
|
||
|
|
color: var(--raven);
|
||
|
|
padding: 1em;
|
||
|
|
width: -webkit-max-content;
|
||
|
|
width: -moz-max-content;
|
||
|
|
width: max-content;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.controls label {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Result ( code ) */
|
||
|
|
|
||
|
|
.result {
|
||
|
|
padding: 1em;
|
||
|
|
color: white;
|
||
|
|
text-shadow: 0 2px 10px hsl(var(--theme-hsl));
|
||
|
|
overflow: hidden;
|
||
|
|
margin-left: 16px
|
||
|
|
}
|
||
|
|
.result pre {
|
||
|
|
padding: 0 1em;
|
||
|
|
margin: 0;
|
||
|
|
background: var(--raven);
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.result code {
|
||
|
|
padding: 1em;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
/* Canary:
|
||
|
|
* Enable the "Experimental Web Platform Features" flag in about:flags
|
||
|
|
*/
|
||
|
|
accent-color: hsl(var(--theme-hsl))
|
||
|
|
}
|
||
|
|
|
||
|
|
.neons {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.neons button {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
border: 0;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: flex;
|
||
|
|
padding: 8px 16px;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: var(--base-font-size);
|
||
|
|
letter-spacing: 1.5px;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-family: Helvetica;
|
||
|
|
|
||
|
|
/* Color */
|
||
|
|
color: hsl(var(--hue), var(--saturation), 40%);
|
||
|
|
text-shadow: 0 -1px 0 rgb(0 0 0 / 30%),
|
||
|
|
0 1px 0 rgb(255 255 255 / 15%);
|
||
|
|
|
||
|
|
/* Background */
|
||
|
|
background: linear-gradient(
|
||
|
|
hsl(var(--theme-hsl)),
|
||
|
|
hsl(var(--hue), var(--saturation), var(--gradient-light, var(--light))));
|
||
|
|
|
||
|
|
box-shadow:
|
||
|
|
/* Color */
|
||
|
|
0 5px 10px hsla(var(--theme-hsl), 0.30),
|
||
|
|
0 10px 40px hsla(var(--theme-hsl), 0.25),
|
||
|
|
0 15px 80px hsla(var(--theme-hsl), 0.25),
|
||
|
|
|
||
|
|
/* Shadow */
|
||
|
|
0 2px 1px rgba(0, 0, 0, 0.05),
|
||
|
|
0 4px 2px rgba(0, 0, 0, 0.05),
|
||
|
|
0 8px 4px rgba(0, 0, 0, 0.05),
|
||
|
|
0 16px 8px rgba(0, 0, 0, 0.05),
|
||
|
|
0 32px 16px rgba(0, 0, 0, 0.05),
|
||
|
|
/* Borders */
|
||
|
|
inset 0 -1px 0 rgb(0 0 0 / 60%),
|
||
|
|
inset 0 1px 0 rgb(255 255 255 / 30%);
|
||
|
|
|
||
|
|
transition: box-shadow 0.2s ease, background 0.2s ease;
|
||
|
|
will-change: box-shadow, background;
|
||
|
|
}
|