holiday-api/assets/global.css

body {
    border: 0;
    margin: 0;
    padding: 0;
}

:root {
    --background-color: #f3ebe6;
    --background: #ffffff;
    --color: #000;
    --border: #dddddd;

    --form-label: #999;
    --form-border: #bbb;
    --form-focus: #333;

    --dialog-border: #5f9ea07f;
    --dialog-backdrop: #979f9f63;

    --dropdown-background: #f0f0f0;

    --primary: #5f9ea0;
    --primary-contrast: #ffffff;
    --primary-accent: #6a7579;

    --code-background: #aaa;
    --code-color: #000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #f3ebe6;
        --background: #333;
        --color: #f0f0f0;
        --border: #666;

        --form-label: #999;
        --form-border: #555;
        --form-focus: #ccc;

        --dialog-border: rgba(16, 173, 173, 0.5);
        --dialog-backdrop: rgba(1, 70, 70, 0.39);

        --dropdown-background: #222;

        --primary: #0e8d93;
        --primary-contrast: #333;
        --primary-accent: #08363a;

        --code-background: #444;
        --code-color: #d0d0d0;
    }
}

* {
    color: var(--color);
    background: var(--background);
}


main {
    background: var(--background-color);
    width: 640px;
    max-width: 100%;
    position: relative;
}

header {
    width: 100%;
    box-sizing: border-box;
    padding: 1em;
    background: var(--background);
    position: sticky;
    z-index: 10;
    top: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1em;
}

.dialog {
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: var(--background);
    margin: auto;
    padding: 1em 0.5em;
}


@media screen and (min-width: 480px) {
    .dialog {
        padding: 1em 2em;
    }
}


.background-image {
    min-width: 100vw;
    min-height: 100dvh;

    max-width: 100vw;
    max-height: 100dvh;

    background: url("/assets/background.jpg");
    background-position: bottom;
    background-size: cover;
}


@media (prefers-color-scheme: dark) {
    .background-image {
        min-width: 100vw;
        min-height: 100dvh;

        max-width: 100vw;
        max-height: 100dvh;
        background: url("/assets/background-dark.jpg");
        background-position: bottom;
        background-size: cover;
    }
}


@font-face {
    font-family: Quicksand;
    src: url(fonts/Quicksand-Light.ttf);
    font-weight: 100 200;
}
@font-face {
    font-family: Quicksand;
    src: url(fonts/Quicksand-Medium.ttf);
    font-weight: 300 300;
}
@font-face {
    font-family: Quicksand;
    src: url(fonts/Quicksand-Regular.ttf);
    font-weight: 400 500;
}
@font-face {
    font-family: Quicksand;
    src: url(fonts/Quicksand-Bold.ttf);
    font-weight: 800 900;
}
@font-face {
    font-family: Quicksand;
    src: url(fonts/Quicksand-SemiBold.ttf);
    font-weight: 600 700;
}

* {
    font-family: Quicksand, Arial, sans-serif;
}

h1 {
    font-size: 1.1rem;
    margin: 0;
}
h1 a {
    all: unset;
}
h3 {
    margin: 0.5em 0;
}

@media screen and (min-width: 480px) {
    h1 {
        font-size: 1.6rem;
    }
}

.form-field {
    width: 100%;
    margin-bottom: 1em;
}
.form-field label {
    display: block;
    color: var(--form-label);
}
.form-field input, .form-field textarea {
    box-sizing: border-box;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--form-border);

    font-size: 1rem;
    outline: none;
}

.form-field .checkbox {
    display: inline;
}

.form-field input[type=checkbox] {
    width: inherit;
    margin-left: 1em;
    accent-color: var(--primary-accent);
}

.form-field input:focus, .form-field textarea:focus {
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
}

.form-field input:not(focus), .form-field textarea:not(focus) {
    color: var(--form-focus);
}

.form-field select {
    all: unset;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--form-border);

    font-size: 1rem;
    outline: none;
}

.form-field select:focus {
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
}

.form-field select:not(focus) {
    color: var(--form-focus);
}

.form-field:focus-within label {
    color: var(--primary);
}

.button.primary, button.primary {
    padding: 0.75em 1em;
    background-color: var(--primary);
    font-family: Quicksand, Arial, sans-serif;
    border: none;
    color: var(--primary-contrast);
    font-size: 1rem;
    margin-top: 1em;
}

.button.secondary, button.secondary {
    padding: 0.75em 1em;
    background-color: var(--primary-contrast);
    font-family: Quicksand, Arial, sans-serif;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 1rem;
    margin-top: 1em;
}

.button.primary, button.primary:hover {
    filter: contrast(140%);
}
.button.secondary:hover, button.secondary:hover {
    filter: contrast(80%);
}

@media (prefers-color-scheme: dark) {
    .button.primary, button.primary:hover {
        filter: brightness(140%);
    }
    .button.secondary:hover, button.secondary:hover {
        filter: brightness(140%);
    }
}

/*index.html*/

.search-dialog {
    position: relative;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media screen and (min-width: 480px) {
    .search-dialog {
        position: absolute;
        top: 50%;
        left: 10vw;
        transform: translateY(-50%);
        width: 380px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/*results.html*/
.results-dialog {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 40px;
}

.results-dialog table {
    width: 100%;
}

.results-dialog table th, .results-dialog table td {
    text-align: left;
}

@media screen and (min-width: 480px) {
    .results-dialog {
        position: relative;
        margin: auto;
        margin-top: 1em;
        width: 600px;
        padding-bottom: 40px;
    }
}

.results td {
    padding: 0.4em 0;
}


/*documentation.html*/
.documentation-dialog {
    position: relative;
    width: 100%;
    max-width: 100%;
}

@media screen and (min-width: 480px) {
    .documentation-dialog {
        position: relative;
        margin: auto;
        margin-top: 1em;
        width: 600px;
    }
}

.documentation-dialog #result-content {
    font-family: 'Courier New', Courier, monospace;
    background: var(--code-background);
    color: var(--code-color);
    padding: 1em;
    word-break: break-word;
}

section.radio-group {
    margin-bottom: 0.5em;
}

section.radio-group input {
    display: none;
}

section.radio-group div label {
    display: inline-block;
    padding: 0.75em 1em;
    border: none;
    color: var(--color);
    font-size: 1rem;
    background: var(--border);
}

section.radio-group div label {
    min-width: 3ch;
    text-align: center;
    font-size: 1rem;
}


section.radio-group div label:first-of-type {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

section.radio-group div label:last-of-type {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

section.radio-group div input:checked+label {
    background: var(--primary);
    color: var(--primary-contrast);
}

.documentation-dialog .range-selector {
    display: flex;
    gap: 1em;
    flex-direction: row;
    flex-wrap: wrap;
}
.documentation-dialog .range-selector section {
    flex-grow: 1;
    width: initial;
}

.documentation-dialog .hide {
    display: none;
}

.admin-dashboard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 1em;
    gap: 1em;
    background: transparent;
    width: calc(100% - 2em);
}

.admin-dashboard .filter-dialog {
    margin: 0;
    width: 100%;
    flex-grow: 1;
}

.admin-dashboard .table-results table {
    width: 100%;
}


.admin-dashboard .table-results table th, .admin-dashboard .table-results table td {
    text-align: left;
    margin: 0.4em 0;
}

.admin-dashboard .table-results table tr td:nth-child(3) {
    display: flex;
    flex-direction: row;
}


@media screen and (min-width: 480px) {
    .admin-dashboard .filter-dialog {
        width: 300px;
        flex-grow: 0;
    }
}

.edit-icon {
    mask: url(/assets/icons/edit.svg) no-repeat;
    mask-size: contain;
    background: var(--color);
}
.delete-icon {
    mask: url(/assets/icons/trash-delete.svg) no-repeat;
    mask-size: contain;
    background: var(--color);
}

img.icon, button.icon svg, span.icon {
    height: 1.2em;
    width: 1.2em;
}
button.icon, a.icon {
    border: none;
    cursor: pointer;
    background: transparent;
    font-size: 1rem;

    display: flex;
    align-content: baseline;
    gap: 0.3em;
}

button.icon svg, button.icon svg * {
    fill: var(--primary-contrast);
    color: var(--primary-contrast);
    stroke: var(--primary-contrast);
}

dialog {
    border: 1px solid var(--dialog-border);
}
dialog::backdrop {
    background: var(--dialog-backdrop);
}
dialog {
    width: 400px;
    max-width: 80vw;
    box-sizing: border-box;
}