holiday-api/assets/global.css

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

main {
    background: #f3ebe6;
    width: 640px;
    max-width: 100%;
    position: relative;
}

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

.dialog {
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    background: white;
    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;
}

@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: #999;
}
.form-field input, .form-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #bbb;

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

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

.form-field input[type=checkbox] {
    width: inherit;
    margin-left: 1em;
    accent-color: #6a7579;
}

.form-field input:focus, .form-field textarea:focus {
    color: cadetblue;
    border-bottom: 1px solid cadetblue;
}

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

.form-field select {
    all: unset;
    width: 100%;
    border: none;
    border-bottom: 1px solid #bbb;

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

.form-field select:focus {
    color: cadetblue;
    border-bottom: 1px solid cadetblue;
}

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

.form-field:focus-within label {
    color: cadetblue;
}

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

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

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

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

/*index.html*/

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

@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;
    border: none;
}

.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%;
    border: none;
}

@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: #aaa;
    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: black;
    font-size: 1rem;
    background: #ddd;
}

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: cadetblue;
    color: white;
}

.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;
    }
}

img.icon, button.icon svg {
    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: white;
    color: white;
    stroke: white;
}

dialog {
    border: 1px solid rgba(95, 158, 160, 0.5);
}
dialog::backdrop {
    background: rgba(151, 159, 159, 0.39);
}
dialog {
    width: 400px;
    max-width: 100vh;
}