diff --git a/css/digui.css b/css/digui.css index 89de6f1..6a29248 100644 --- a/css/digui.css +++ b/css/digui.css @@ -5,19 +5,137 @@ /* Main structure */ +:root { + /* Default is nebula-light */ + --font-family: sans-serif; + --background-color: #fff; + --secondary-background-color: #ccc; + --button-color: #eee; + --button-text: var(--text-color); + --text-color: #121416d8; + --secondary-text-color: #121416d8; + --link-color: #543fd7; + + --nav-background-color: #FFF; + --nav-color: var(--text-color); + + --highlight-color: #fb8c00; + --border-color: #d5d9d9; + --border-width: 1px; + --border-radius: 8px; + --shadow-color: rgba(213, 217, 217, .5); + --global-theme-toggle-content: ' 🌞'; + + --danger-color: #e03131; + --warning-color: orange; + --error-color: var(--danger-color); + + --padding: .5rem; +} + +html[data-theme='nebula'] { + --background-color: #fff; + --secondary-background-color: #ccc; + --text-color: #121416d8; + --secondary-text-color: #121416d8; + --link-color: #543fd7; + --highlight-color: #fb8c00; + + --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: ' 🌞'; +} + +html[data-theme='nebula-dark'] { + --background-color: #29292c; + --secondary-background-color: #29292c; + --button-color: #29292c; + --button-text: var(--text-color); + --text-color: #F7F8F8; + --secondary-text-color: #ddd; + --link-color: #ffe7a3; + --highlight-color: #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; + --secondary-background-color: #ccc; + --button-color: #FFFFFF; + --button-text: var(--text-color); + --text-color: #000; + --secondary-text-color: #000; + --link-color: #543fd7; + --highlight-color: #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; + --secondary-background-color: var(--highlight-color); + --button-color: #FFFFFF; + --button-text: var(--text-color); + --text-color: #FFF; + --secondary-text-color: #29292c; + --link-color: #FF9800; + --highlight-color: #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; +} + body { + background: var(--background-color); + color: var(--text-color); height: 125vh; - font-family: sans-serif; + font-family: var(--font-family), sans-serif; margin-top: 3rem; - padding: 30px; + /*padding: 30px;*/ } main { - color: black; + color: var(--text-color); + padding-top: .5em; } header { - background-color: white; + background-color: var(--nav-background-color); position: fixed; top: 0; left: 0; @@ -26,7 +144,8 @@ header { 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 0 #999;*/ + box-shadow: 0 0 5px var(--shadow-color); } header * { @@ -34,7 +153,7 @@ header * { } header li { - margin: 20px; + /*margin: 10px;*/ } header li a { @@ -42,49 +161,206 @@ header li a { 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; +} + +a, a:hover, a:visited, a:active { + text-decoration: none; +} + +a { + color: var(--link-color); +} + +a:hover { + text-decoration: underline; + filter: brightness(80%); +} + /* Active element, e.g. a button */ .active { - background-color: #cccccc; + background-color: var(--highlight-color); + color: var(--text-color); +} + +/* Special button */ +.theme-toggle::after { + content: var(--global-theme-toggle-content); } /* Buttons */ -button { - background-color: #fff; - border: 1px solid #d5d9d9; - border-radius: 8px; - box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0; +button, input { + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); box-sizing: border-box; - color: #0f1111; + color: var(--secondary-text-color); + 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: center; + text-align: left; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; - /*width: 100px;*/ } button:hover { - background-color: #f7fafa; + /*background-color: #f7fafa;*/ + /*background-color: #d57803;*/ + background-color: var(--highlight-color); + filter: brightness(80%); } button:focus { - border-color: #008296; - box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0; + /*border-color: #008296;*/ + /*box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;*/ outline: 0; + /*border-color: #d57803;*/ } /* 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-dark'] .card, +[data-theme='nebula-dark'] button { + 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 button { + border: none; + background: none; +} +*/ + +/** Tags/chips */ +.chip { + font-size: .8rem; + border-radius: var(--border-radius); + background-color: var(--secondary-background-color); + color: var(--secondary-text-color); + /*color: var(--text-color);*/ + padding: .2rem .5rem; + margin-left: .5rem; +} + +.chip .button { + border-radius: var(--border-radius); +} + +/** Status */ +.error { + color: var(--error-color); +} + + +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; } \ No newline at end of file