* {
--active: rgb(43, 43, 48);
--active-inner: #f3f3f3;
--focus: 2px rgba(39, 94, 254, .3);
--border: #a3a3a3;
--border-hover: #f3f3f3;
--background: rgb(255, 255, 255);
--background-secondary: rgb(230, 230, 230);
--disabled: rgb(43, 43, 48);
--disabled-inner: #rgb(43, 43, 48);
--text: #000;
}
@media (prefers-color-scheme: dark) {
* {
--active: rgb(43, 43, 48);
--active-inner: #f3f3f3;
--focus: 2px rgba(39, 94, 254, .3);
--border: #f3f3f3;
--border-hover: #f3f3f3;
--background: rgb(31, 32, 39);
--background-secondary: rgb(43, 43, 48);
--disabled: rgb(43, 43, 48);
--disabled-inner: #rgb(43, 43, 48);
--text: #f3f3f3;
}
}
html, body {
padding: 0;
margin: 0;
background-color: var(--background);
color: var(--text);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 16px;
}
.turbolinks-progress-bar {
height: 5px;
background-color: rgb(52, 52, 175);
}
a, a:hover, a:active, a:visited {
color: var(--text);
}
body {
padding-top: 60px;
}
header {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: var(--background);
}
hr {
width: auto;
border-top: 0;
border-bottom: 1px solid var(--border);
margin: 16px 8px;
}
h1 {
margin: 16px 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
#header-logo {
display: block;
padding: 16px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
}
.header-menu {
list-style: none;
display: flex;
flex-direction: row;
}
.header-menu .header-menu--item {
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
display: inline-block;
padding: 16px;
text-decoration: none;
}
.header-menu .header-menu--item:hover {
background-color: var(--background-secondary);
}
.layout-center {
display: flex;
flex-direction: row;
justify-content: space-around;
}
form {
display: flex;
flex-direction: column;
/* max-width: 50vh; */
width: 600px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
}
form .required {
font-size: 14px;
font-style: italic;
color: rgb(255, 100, 100);
align-self: flex-end;
}
form .optional {
font-size: 14px;
font-style: italic;
align-self: flex-end;
}
form label {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.form-row {
display: flex;
flex-direction: row;
align-items: center;
}
input, textarea, button {
background-color: var(--background-secondary);
color: var(--text);
border: 1px solid var(--border);
padding: 8px;
margin: 8px;
border-radius: 4px;
}
textarea {
resize: vertical;
}
label {
padding: 8px;
}
input:active, textarea:active, button:active {
background-color: rgb(33, 33, 38);
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
input[type=checkbox], input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
outline: none;
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 8px 0 0;
cursor: pointer;
border: 1px solid var(--bc, var(--border));
background: var(--b, var(--background-secondary));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
input[type=checkbox]:after, input[type=radio]:after {
content: "";
display: block;
left: 0;
top: 0;
position: absolute;
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
input[type=checkbox]:checked, input[type=radio]:checked {
--b: var(--active);
--bc: var(--active);
--d-o: .3s;
--d-t: .6s;
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
input[type=checkbox]:disabled, input[type=radio]:disabled {
--b: var(--disabled);
cursor: not-allowed;
opacity: 0.9;
}
input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
--b: var(--disabled-inner);
--bc: var(--border);
}
input[type=checkbox]:disabled+label, input[type=radio]:disabled+label {
cursor: not-allowed;
}
input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
--bc: var(--border-hover);
}
input[type=checkbox]:focus, input[type=radio]:focus {
box-shadow: 0 0 0 var(--focus);
}
input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
width: 21px;
}
input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
opacity: var(--o, 0);
}
input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
--o: 1;
}
input[type=checkbox]+label, input[type=radio]+label {
font-size: 14px;
line-height: 21px;
display: inline-block;
vertical-align: top;
cursor: pointer;
margin-left: 4px;
}
input[type=checkbox]:not(.switch) {
border-radius: 7px;
}
input[type=checkbox]:not(.switch):after {
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
top: 4px;
transform: rotate(var(--r, 20deg));
}
input[type=checkbox]:not(.switch):checked {
--r: 43deg;
}
input[type=checkbox].switch {
width: 38px;
border-radius: 11px;
}
input[type=checkbox].switch:after {
left: 2px;
top: 2px;
border-radius: 50%;
width: 15px;
height: 15px;
background: var(--ab, var(--border));
transform: translateX(var(--x, 0));
}
input[type=checkbox].switch:checked {
--ab: var(--active-inner);
--x: 17px;
}
input[type=checkbox].switch:disabled:not(:checked):after {
opacity: 0.6;
}
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:after {
width: 19px;
height: 19px;
border-radius: 50%;
background: var(--active-inner);
opacity: 0;
transform: scale(var(--s, 0.7));
}
input[type=radio]:checked {
--s: .5;
}
}
