isbn-sort/static/style.css

/*@import url('/static/font/iosevka.css');*/

/** Color Schemes */
/* Themes used: Catppuccin Latte & Moccha
 * https://github.com/catppuccin/catppuccin */

/* Dark theme: Catpuccin Mocha */
:root {
    --color-rosewater: #f5e0dc;
    --color-flamingo: #f2cdcd;
    --color-pink: #f5c2e7;
    --color-mauve: #cba6f7;
    --color-red: #f38ba8;
    --color-maroon: #eba0ac;
    --color-peach: #fab387;
    --color-yellow: #f9e2af;
    --color-green: #a6e3a1;
    --color-teal: #94e2d5;
    --color-sky: #89dceb;
    --color-sapphire: #74c7ec;
    --color-blue: #89b4fa;
    --color-lavender: #b4befe;
    --color-text: #cdd6f4;
    --color-subtext1: #bac2de;
    --color-subtext0: #a6adc8;
    --color-overlay2: #9399b2;
    --color-overlay1: #7f849c;
    --color-overlay0: #6c7086;
    --color-surface2: #585b70;
    --color-surface1: #45475a;
    --color-surface0: #313244;
    --color-base: #1e1e2e;
    --color-mantle: #181825;
    --color-crust: #11111b;
    --color-action: #333d5d;
    --font-family: Iosevka Web;
}

/* Light theme: Catppuccin Latte */
@media (prefers-color-scheme: light) {
    :root {
        --color-rosewater: #dc8a78;
        --color-flamingo: #dd7878;
        --color-pink: #ea76cb;
        --color-mauve: #8839ef;
        --color-red: #d20f39;
        --color-maroon: #e64553;
        --color-peach: #fe640b;
        --color-yellow: #df8e1d;
        --color-green: #40a02b;
        --color-teal: #179299;
        --color-sky: #04a5e5;
        --color-sapphire: #209fb5;
        --color-blue: #1e66f5;
        --color-lavender: #7287fd;
        --color-text: #4c4f69;
        --color-subtext1: #5c5f77;
        --color-subtext0: #6c6f85;
        --color-overlay2: #7c7f93;
        --color-overlay1: #8c8fa1;
        --color-overlay0: #9ca0b0;
        --color-surface2: #acb0be;
        --color-surface1: #bcc0cc;
        --color-surface0: #ccd0da;
        --color-base: #eff1f5;
        --color-mantle: #e6e9ef;
        --color-crust: #dce0e8;
        --color-action: #cdd6f4;
    }
}

* {
    font-family: var(--font-family);
}

a {
    text-decoration: none;
    color: var(--color-blue);
}

#stats {
    display: flex;
    background-color: var(--color-crust);
    text-align: center;
    justify-content: center;
    align-items: center;
}

#stats-used {
    margin-left: 10px;
    margin-right: 5px;
}

#stats-available {
    margin-left: 5px;
    margin-right: 10px;
}

.stats-block {
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background-color: var(--color-base);
    display: flex;

    height: 40px;
    padding: 0 15px;

    margin-top: 20px;
    margin-bottom: 20px;

    color: var(--color-text);
    text-decoration: none;
}

body {
    background-color: var(--color-base);
    color: var(--color-text);
    text-align: center;
}

#logout {
    margin-bottom: 5px;
    color: var(--color-text);
}

#actions {
    margin-top: 5%;
}

#add-voucher {
    margin-bottom: 5%;
}

form {
    margin-top: 5px;
}

input {
    color: inherit;
    background-color: var(--color-mantle);
    border-radius: 3px;
    border-style: solid;
    border-color: var(--color-overlay0);
    margin-bottom: .2em;
    font-family: inherit;
    width: -moz-available;
    padding: .5em;
}

input:placeholder-shown {
    font-style: oblique;
}

input:hover {
    background-color: var(--color-crust);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}



.barcode {
    width: 80%;
    border-radius: 3px;
}

.table-barcode.barcode {
    max-width: 150px;
}

.voucher {
    background-color: var(--color-crust);
    border-radius: 5px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

button, input[type="submit"] {
    color: inherit;
    background-color: var(--color-crust);
    border-color: var(--color-crust);
    border-style: solid;
    border-radius: 3px;
    border-width: 2px;
    padding: 5px;
    font-family: inherit;
    width: unset;
}

dialog > button, dialog > form > input[type="submit"] {
    background-color: var(--color-base);
    border-color: var(--color-base);
}

button:hover, input[type="submit"]:hover {
    border-color: var(--color-lavender);
}

.flash {
    margin: 1em;
    padding: 1em;
    background: var(--color-mantle);
    border: 2px solid var(--color-lavender);
    border-radius: 3px;
}

.stats-block:hover {
    background-color: var(--color-lavender);
    color: var(--color-crust);
    transition: transform 0.2s ease-in-out;
}


pre {
    background-color: var(--color-mantle);
    border-radius: 4px;
    padding: 10px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    text-align: left;
}

code {
    font-family: monospace;
}

.red {
    color: var(--color-red);
}

/** Style for table: alternate colors */
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
    border-color: var(--color-crust);
    border-width: 2px;
    border-style: solid;
}

.action {
    padding: 7px;
    margin: 3px;
    border-radius: 3px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--color-action);
}

th {
    background-color: var(--color-crust);
}

table tr:nth-child(odd) td{
    background-color: var(--color-mantle);
}
table tr:nth-child(even) td{
    background-color: var(--color-base);
}

dialog {
    /* Geometry */
    border-width: 1px;
    border-radius: 3px;

    /* Colors */
    background-color: var(--color-crust);
    color: var(--color-text);

    min-width: 75vw;
}

#add-book {
    max-width: 300px;
    margin: auto;
}