560 lines
No EOL
8.7 KiB
CSS
Executable file
560 lines
No EOL
8.7 KiB
CSS
Executable file
@font-face {
|
|
font-family: 'Inter Tight';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url(../fonts/inter-tight-400.woff2);
|
|
unicode-range: U+000-5FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter Tight';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url(../fonts/inter-tight-700.woff2);
|
|
unicode-range: U+000-5FF;
|
|
}
|
|
|
|
|
|
|
|
/* Variables for the universal theme */
|
|
:root {
|
|
--body: #1b1c27;
|
|
--main: #1a1b26;
|
|
--text: #c0caf5;
|
|
--line: #414868;
|
|
--highlight: #171721;
|
|
--image: #444663;
|
|
--header: #171721;
|
|
|
|
--field_bg: #1f1f2c;
|
|
--field_bg_hover: #2c2c3e;
|
|
--field_bg_inactive: #1a1b26;
|
|
--field_border: #414868;
|
|
--field_border_hover: #4c547a;
|
|
--field_border_inactive: #414868;
|
|
--field_text: #c0caf5;
|
|
--field_text_inactive: #777e98;
|
|
|
|
--transparent_30: rgba(26, 27, 38, .7);
|
|
--transparent_20: rgba(26, 27, 38, .8);
|
|
--transparent_10: rgba(26, 27, 38, .9);
|
|
|
|
--red: #f7768e;
|
|
--green: #9ece6a;
|
|
--blue: #7aa2f7;
|
|
--blue_faded: #394c73;
|
|
--purple: #bb9af7;
|
|
--purple_faded: #52446d;
|
|
--orange: #ff9e64;
|
|
--yellow: #e0af68;
|
|
--dark: #414868;
|
|
--white: #ffffff;
|
|
--grey: #858daa;
|
|
|
|
--icon_select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-selector" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgba(255,255,255,1)" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>');
|
|
|
|
--font: 'Inter Tight', sans-serif;
|
|
--font_mono: 'Inter Tight', sans-serif;
|
|
--fontsize: 1rem;
|
|
--lineheight: 1.75rem;
|
|
}
|
|
|
|
|
|
|
|
* {
|
|
box-sizing: content-box;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
html {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
html, body {
|
|
background-color: var(--body);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: var(--fontsize);
|
|
line-height: var(--lineheight);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--text);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--line);
|
|
text-decoration-thickness: .05rem;
|
|
/* text-decoration-style: wavy; */
|
|
text-underline-offset: 5px;
|
|
}
|
|
|
|
a.color-red {
|
|
text-decoration-color: var(--red_underline);
|
|
}
|
|
|
|
p {
|
|
hyphens: auto;
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
text-align: justify;
|
|
word-wrap: break-word;
|
|
|
|
-moz-hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
-o-hyphens: auto;
|
|
}
|
|
|
|
mark {
|
|
background-color: var(--mark);
|
|
color: var(--text);
|
|
}
|
|
|
|
ul {
|
|
margin: 0 0 0 30px;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
ul > li {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
ul > li > a > svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
ul > li > a > svg > path:last-child {
|
|
fill: var(--text);
|
|
}
|
|
|
|
ul > li > ul {
|
|
margin: 0 0 0 20px;
|
|
}
|
|
|
|
ol {
|
|
list-style-type: none;
|
|
counter-reset: item;
|
|
margin: 0 0 0 30px;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
ol > li {
|
|
display: table;
|
|
counter-increment: item;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
ol > li > div {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
ol > li:before {
|
|
content: counters(item, ".");
|
|
display: table-cell;
|
|
font-weight: 700;
|
|
width: 25px;
|
|
}
|
|
|
|
ol > li > ol {
|
|
margin: 0;
|
|
}
|
|
|
|
ol > li > ol > li:before {
|
|
content: counters(item, ".");
|
|
width: 40px;
|
|
}
|
|
|
|
ol > li > ol.second > li > ol.third > li:before {
|
|
width: 50px;
|
|
}
|
|
|
|
ol.third {
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
input:not([type="checkbox"]),
|
|
textarea,
|
|
select {
|
|
background-color: var(--field_bg);
|
|
border: 1px solid var(--field_border);
|
|
border-radius: 3px;
|
|
color: var(--field_text);
|
|
font-family: var(--font);
|
|
font-size: var(--fontsize);
|
|
outline: none;
|
|
resize: none;
|
|
padding: 8px 10px;
|
|
width: calc(100% - (11px * 2));
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder,
|
|
select::placeholder {
|
|
color: var(--text);
|
|
}
|
|
|
|
input[disabled],
|
|
textarea[disabled],
|
|
select[disabled] {
|
|
background-color: var(--field_bg_inactive);
|
|
border: 1px dashed var(--field_border_inactive);
|
|
color: var(--field_text_inactive);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input:not([disabled]):not([readonly]):active,
|
|
input:not([disabled]):not([readonly]):hover,
|
|
textarea:not([disabled]):not([readonly]):active,
|
|
textarea:not([disabled]):not([readonly]):hover,
|
|
select:not([disabled]):active,
|
|
select:not([disabled]):hover {
|
|
background-color: var(--field_bg_hover);
|
|
border: 1px solid var(--field_border_hover);
|
|
}
|
|
|
|
input[type="submit"],
|
|
input[type="submit"]:active,
|
|
input[type="submit"]:hover {
|
|
background-color: var(--green) !important;
|
|
border: 1px solid var(--green) !important;
|
|
color: var(--main);
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
padding: 5px 10px;
|
|
width: auto;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
cursor: pointer;
|
|
line-height: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
width: auto;
|
|
}
|
|
|
|
input[type="radio"] + label {
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
margin: 0 3px;
|
|
opacity: .7;
|
|
padding: 1px 3px;
|
|
}
|
|
|
|
input[type="radio"]:checked + label {
|
|
background-color: var(--checked);
|
|
backdrop-filter: blur(3px);
|
|
border-radius: 2px;
|
|
color: var(--checked_str);
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type="radio"]:checked:focus + label {
|
|
border: 1px solid var(--checked_focus);
|
|
}
|
|
|
|
input[type="date"] {
|
|
appearance: none;
|
|
}
|
|
|
|
input[readonly] {
|
|
border: 1px dashed var(--line);
|
|
}
|
|
|
|
input, textarea {
|
|
caret-color: var(--yellow);
|
|
}
|
|
|
|
textarea {
|
|
height: 250px;
|
|
min-height: 130px;
|
|
resize: vertical;
|
|
vertical-align: top;
|
|
width: calc(100% - 21px - 2px);
|
|
}
|
|
|
|
select {
|
|
appearance: none;
|
|
background-image: var(--icon_select);
|
|
background-size: 17px;
|
|
background-repeat: no-repeat;
|
|
background-position: center right 8px;
|
|
cursor: pointer;
|
|
width: calc(100% - 21px - 2px);
|
|
}
|
|
|
|
h1 {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
font-size: 190%;
|
|
font-weight: 700;
|
|
margin: 0 0 5px 0;
|
|
line-height: 2.5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
h1 > svg {
|
|
margin: 0 5px;
|
|
opacity: .4;
|
|
width: 32px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 140%;
|
|
font-weight: 700;
|
|
margin: 30px 0 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--line);
|
|
margin: 30px -50px;
|
|
padding: 0;
|
|
}
|
|
|
|
sup {
|
|
vertical-align: top;
|
|
}
|
|
|
|
figure {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
figure,
|
|
figure > img {
|
|
object-fit: cover;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
svg {
|
|
height: 100%;
|
|
vertical-align: top;
|
|
width: 20px;
|
|
}
|
|
|
|
svg[class*="icon-tabler-currency"] {
|
|
height: auto;
|
|
margin: .10rem .2rem 0 .2rem;
|
|
width: 18px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#website {
|
|
margin: 50px auto;
|
|
max-width: 800px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.color-grey {
|
|
opacity: .6;
|
|
}
|
|
|
|
.color-red {
|
|
color: var(--red) !important;
|
|
}
|
|
|
|
.color-green {
|
|
color: var(--green);
|
|
}
|
|
|
|
.color-blue {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.color-yellow {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
|
|
|
|
.message {
|
|
font-size: 126%;
|
|
font-weight: 400;
|
|
opacity: .7;
|
|
padding: 20px 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.msg {
|
|
display: none;
|
|
}
|
|
|
|
.msg > div {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 100%;
|
|
margin-bottom: 20px;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.msg > div > svg {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
|
|
.mono {
|
|
font-family: var(--font_mono) !important;
|
|
font-size: 100%;
|
|
}
|
|
|
|
.no-select {
|
|
cursor: default;
|
|
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
.side-by-side {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.visible {
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
|
|
.checkboxes {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.checkbox:not(:first-child) {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.checkbox.nodesc {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.checkbox > div {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
position: relative;
|
|
}
|
|
|
|
.checkbox > div > input {
|
|
cursor: pointer !important;
|
|
left: 5px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 5px;
|
|
}
|
|
|
|
.checkbox > div > input[disabled],
|
|
.checkbox > div > input[disabled] ~ label {
|
|
color: var(--checkbox_disabled);
|
|
cursor: not-allowed !important;
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
.checkbox > div > input[disabled] ~ .icon-checkbox > svg > path:not(:first-child) {
|
|
color: var(--checkbox_disabled);
|
|
}
|
|
|
|
.checkbox > div > .icon-checkbox {
|
|
left: 6px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 5px;
|
|
}
|
|
|
|
.checkbox > div > .icon-checkbox.is-checked,
|
|
.checkbox > div > input:checked ~ .icon-checkbox.is-unchecked {
|
|
opacity: 0;
|
|
}
|
|
|
|
.checkbox > div > input:checked ~ .is-checked {
|
|
opacity: 1;
|
|
}
|
|
|
|
.checkbox > div > label {
|
|
cursor: pointer !important;
|
|
padding: 4px 8px 4px 35px;
|
|
}
|
|
|
|
.checkbox > div > input:not([disabled]):hover ~ .icon-checkbox,
|
|
.checkbox > div > input:not([disabled]):hover ~ label,
|
|
.checkbox > div > input:not([disabled]):focus ~ .icon-checkbox,
|
|
.checkbox > div > input:not([disabled]):focus ~ label {
|
|
background-color: var(--checkbox_focus);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.checkbox > .desc {
|
|
display: block;
|
|
left: 35px;
|
|
line-height: 140%;
|
|
font-size: 98%;
|
|
opacity: .7;
|
|
top: 4px;
|
|
width: calc(100% - 35px);
|
|
}
|
|
|
|
.checkbox > .desc > p {
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
} |