digui/css/digui.css

/**
 * digui structure and theming
 * v0.0.2
 *
 * Created by: Michiel Scholten
 * Source: https://github.com/aquatix/digui
 */

/** Colours and themes */

:root {
    --padding: .5rem;

    /* Default is nebula-light */
    --font-family: sans-serif;
    --background-color: #fff;
    --background-color-secondary: #ccc;
    --button-color: #eee;
    --button-text: var(--text-color);
    --text-color: #121416d8;
    --text-color-secondary: #121416d8;
    --text-color-muted: #d5d9d9;
    --link-color: #543fd7;

    --nav-background-color: #FFF;
    --nav-color: var(--text-color);

    --border-color: #d5d9d9;
    --border-width: 1px;
    --border-radius: 8px;
    --shadow-color: rgba(213, 217, 217, .5);
    --global-theme-toggle-content: ' 🌞';

    /* E.g., an active button */
    --color-highlight: #fb8c00;
    /* Generic colors */
    /*--color-danger: #e03131;*/
    --color-danger: var(--color-red);
    --color-warning: var(--color-yellow);
    --color-error: var(--color-danger);
    /*--color-ok: #31e031;*/
    --color-ok: var(--color-green);

    /* Argonaut colours */
    --color-black: #000000;
    --color-red: #FF000F;
    --color-green: #8CE10B;
    --color-yellow: #FFB900;
    --color-blue: #008DF8;
    --color-purple: #6D43A6;
    --color-cyan: #00D8EB;
    --color-white: #FFFFFF;
}

html[data-theme='nebula'] {
    /* Default theme, see :root element */
}

html[data-theme='nebula-dark'] {
    --background-color: #29292c;
    --background-color-secondary: #29292c;
    --button-color: #29292c;
    --button-text: var(--text-color);
    --text-color: #F7F8F8;
    --text-color-secondary: #ddd;
    --text-color-muted: #F7F8F8;
    --link-color: #ffe7a3;
    --color-highlight: #e03131;

    --nav-background-color: #FF9800;
    --nav-color: var(--text-color);

    --border-color: #333;
    --border-width: 1px;
    --border-radius: 8px;
    --shadow-color: rgba(3, 3, 3, .5);
    --global-theme-toggle-content: ' 🌝';
}

html[data-theme='bbs'] {
    --font-family: monospace;
    --background-color: #FFF;
    --background-color-secondary: #ccc;
    --button-color: #FFFFFF;
    --button-text: var(--text-color);
    --text-color: #000;
    --text-color-secondary: #000;
    --text-color-muted: #000;
    --link-color: #543fd7;
    --color-highlight: #e03131;

    /*--nav-background-color: #ccc;*/
    /*--nav-color: var(--text-color);*/

    --border-color: #333;
    --border-width: 2px;
    --border-radius: 0;
    --global-theme-toggle-content: ' 🖥️';
}

html[data-theme='silo'] {
    --font-family: monospace;
    /*--background-color: #003eaa;*/
    --background-color: #1d212c;
    --background-color-secondary: var(--color-highlight);
    --button-color: #FFFFFF;
    --button-text: var(--text-color);
    --text-color: #FFF;
    --text-color-secondary: #29292c;
    --text-color-muted: #FFF;
    --link-color: #FF9800;
    --color-highlight: #23B0FF;

    /*--nav-background-color: #003eaa;*/
    /*--nav-background-color: #23B0FF;*/
    /*--nav-color: var(--text-color);*/
    --nav-background-color: var(--background-color);

    --border-color: #23B0FF;
    /*--border-color: #003eaa;*/
    --border-width: 2px;
    --border-radius: 0;
    --global-theme-toggle-content: ' ⌨️';
}

/* AlpineJS blip-preventer */
[x-cloak] {
    display: none !important;
}

/** Main structure */

body {
    background: var(--background-color);
    color: var(--text-color);
    height: 125vh;
    font-family: var(--font-family), sans-serif;
    margin-top: 3rem;
    /*padding: 30px;*/
}

main {
    color: var(--text-color);
    padding-top: .5em;
}

/* Navigation */

header {
    background-color: var(--nav-background-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3rem;
    display: flex;
    align-items: center;
    /*box-shadow: 0 0 5px 0 rgba(213, 217, 217, .5);*/
    /*box-shadow: 0 0 5px 0 #999;*/
    box-shadow: 0 0 5px var(--shadow-color);
}

header * {
    display: inline;
}

header li {
    /*margin: 10px;*/
}

header li a {
    color: black;
    text-decoration: none;
}

header li h1 {
    font-weight: bold;
    font-size: 1.2rem;
    vertical-align: middle;
    margin-right: 3rem;
}

[data-theme='silo'] header nav::after {
    content: '';
    background: repeating-linear-gradient(90deg, #23B0FF, #23B0FF 2px, transparent 0, transparent 10px);
    display: block;
    width: 100%;
    right: 10px;
}

[data-theme='silo'] header {
    border-bottom: 3px dotted #23B0FF;
}

/** Generic elements */

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
h1 {
    margin-block: 0.67em;
    font-size: 2em;
}

a, a:hover, a:visited, a:active {
    text-decoration: none;
}

a {
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
    filter: brightness(80%);
}

ol li::marker, ul li::marker {
    color: var(--text-color-muted);
}

/* Active element, e.g. a button */
.active {
    background-color: var(--color-highlight);
    color: var(--text-color);
}

/* Special button */
.theme-toggle::after {
    content: var(--global-theme-toggle-content);
}

/* Buttons */

button, input, select, textarea {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    color: var(--text-color-secondary);
    background-color: var(--button-color);
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    /*line-height: 29px;*/
    /*padding: 0 10px 0 11px;*/
    padding: .5rem .5rem;
    position: relative;
    text-align: left;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
}

button:hover {
    /*background-color: #f7fafa;*/
    /*background-color: #d57803;*/
    background-color: var(--color-highlight);
    filter: brightness(80%);
}

button:focus {
    /*border-color: #008296;*/
    /*box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;*/
    outline: 0;
    /*border-color: #d57803;*/
}

.btn-dangerous {
    background: var(--color-danger);
}

.btn-dangerous:hover {
    background: var(--color-danger);
    filter: brightness(80%);
}

.btn-warning {
    background-color: var(--color-warning);
}

.btn-warning:hover {
    background-color: var(--color-warning);
    filter: brightness(80%);
}

.btn-ok {
    background: var(--color-ok);
}

.btn-ok:hover {
    background: var(--color-ok);
    filter: brightness(80%);
}

/* Cards */

.cards {
    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.card {
    display: inline-grid;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    /*margin: 1em;*/
    /*padding: 1em;*/
}

[data-theme='nebula'] .card,
[data-theme='nebula'] button,
[data-theme='nebula'] input,
[data-theme='nebula'] select,
[data-theme='nebula'] textarea,
[data-theme='nebula-dark'] .card,
[data-theme='nebula-dark'] button,
[data-theme='nebula-dark'] input,
[data-theme='nebula-dark'] select,
[data-theme='nebula-dark'] textarea {
    box-shadow: var(--shadow-color) 0 2px 5px 0;
}

.card .card-header {

}

.card-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 1em;
}

.card-body > * {
    /*padding-left: 1em;*/
}

.card .card-image {
    width: 100%;
}

.card .card-image img {
    width: 100%;
    border-radius: var(--border-radius);
}

.card .card-thumb {
    width: 72px;
    /*min-width: 60px;*/
    /*max-width: 100px;*/
    /*position: relative;*/
    /*box-sizing: inherit;*/
}

.card .card-thumb img {
    width: 72px;
}

.card .card-action {
    padding: .5em;
}

.card .meta {
    filter: brightness(80%);
    color: var(--text-color);
}

.card .card-footer {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;
    align-items: center;

    padding: .3em;
}

.card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6 {
    margin: 0;
}

/*
.card button {
    border: none;
    background: none;
}
*/

/* Tags/chips */

.chip {
    font-size: .8rem;
    border-radius: var(--border-radius);
    background-color: var(--background-color-secondary);
    color: var(--text-color-secondary);
    /*color: var(--text-color);*/
    padding: .2rem .5rem;
    margin-left: .5rem;
}

.chip .button {
    border-radius: var(--border-radius);
}

/* Status */
.error {
    color: var(--color-error);
}


/** Footer */

footer {
    /*background-color: var(--secondary-background-color);*/
    margin-top: 1rem;
    padding: 2rem 1rem;

    display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

footer .column {
    display: inline-grid;
}

footer h2 {
    text-align: left;
    margin-bottom: 0;
}