mirror of
https://github.com/aquatix/digui.git
synced 2025-12-06 20:05:10 +01:00
504 lines
10 KiB
CSS
504 lines
10 KiB
CSS
/**
|
|
* digui structure and theming
|
|
* v0.0.2
|
|
*
|
|
* Created by: Michiel Scholten
|
|
* Source: https://github.com/aquatix/digui
|
|
*/
|
|
|
|
/** Colours and themes */
|
|
|
|
:root {
|
|
--padding: .5rem;
|
|
|
|
color-scheme: only light;
|
|
|
|
/* 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;
|
|
--chip-border-radius: 2rem;
|
|
--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'] {
|
|
color-scheme: 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;
|
|
--chip-border-radius: 2rem;
|
|
--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;
|
|
--chip-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;
|
|
--chip-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;
|
|
}
|
|
|
|
[data-theme='nebula'] header,
|
|
[data-theme='nebula-dark'] header {
|
|
/*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, a.button, a.button:hover, a.button:active, a.button:visited {
|
|
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);
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
/* Special button */
|
|
.theme-toggle::after {
|
|
content: var(--global-theme-toggle-content);
|
|
}
|
|
|
|
/* Buttons */
|
|
|
|
button, .button, input, select, textarea {
|
|
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;*/
|
|
position: relative;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
vertical-align: middle;
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
button, .button, input, select, textarea, table {
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
padding: .5rem .5rem;
|
|
}
|
|
|
|
button:hover, .button:hover {
|
|
/*background-color: #f7fafa;*/
|
|
/*background-color: #d57803;*/
|
|
background-color: var(--color-highlight);
|
|
filter: brightness(80%);
|
|
transition-duration: 0.2s;
|
|
}
|
|
|
|
button:focus, .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%);
|
|
}
|
|
|
|
/* Toggle buttons */
|
|
|
|
.button-group {
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
border: var(--border-width) solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.button-group button {
|
|
/* Reset borders because the buttons are mashed together and the group has its own border */
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Table */
|
|
|
|
th {
|
|
text-align: left;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0 0.3rem;
|
|
}
|
|
|
|
/* 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'] :modal,
|
|
[data-theme='nebula'] .card,
|
|
[data-theme='nebula'] button,
|
|
[data-theme='nebula'] .button,
|
|
[data-theme='nebula'] .button-group,
|
|
[data-theme='nebula'] input,
|
|
[data-theme='nebula'] select,
|
|
[data-theme='nebula'] textarea,
|
|
[data-theme='nebula'] table,
|
|
[data-theme='nebula-dark'] :modal,
|
|
[data-theme='nebula-dark'] .card,
|
|
[data-theme='nebula-dark'] button,
|
|
[data-theme='nebula-dark'] .button,
|
|
[data-theme='nebula-dark'] .button-group,
|
|
[data-theme='nebula-dark'] input,
|
|
[data-theme='nebula-dark'] select,
|
|
[data-theme='nebula-dark'] textarea,
|
|
[data-theme='nebula-dark'] table {
|
|
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(--chip-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(--chip-border-radius);
|
|
}
|
|
|
|
/* Status */
|
|
.error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
|
|
/** Modal, e.g. for showing info or filling in a form; on top of the other content */
|
|
|
|
dialog:modal {
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
/*background-color: var(--nav-background-color);*/
|
|
border: 2px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
width: 90%;
|
|
/*height: 90%;*/
|
|
overflow: auto;
|
|
}
|
|
|
|
/* The umwelt of the modal, on top of the regular content */
|
|
dialog::backdrop {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/** 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;
|
|
}
|