From 4dc46ba3c77706101fc4d946468271e45a7f92ff Mon Sep 17 00:00:00 2001 From: Michiel Scholten Date: Fri, 6 Jun 2025 15:28:06 +0200 Subject: [PATCH] Muted text color and some structuring --- src/digimarks/static/css/digui.css | 36 ++++++++++++++++-------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/digimarks/static/css/digui.css b/src/digimarks/static/css/digui.css index 6a29248..8114b4d 100644 --- a/src/digimarks/static/css/digui.css +++ b/src/digimarks/static/css/digui.css @@ -1,6 +1,9 @@ /** - * digui structure + * digui structure and theming * v0.0.1 + * + * Created by: Michiel Scholten + * Source: https://github.com/aquatix/digui */ /* Main structure */ @@ -14,12 +17,13 @@ --button-text: var(--text-color); --text-color: #121416d8; --secondary-text-color: #121416d8; + --muted-text-color: #121416d8; --link-color: #543fd7; + --highlight-color: #fb8c00; --nav-background-color: #FFF; --nav-color: var(--text-color); - --highlight-color: #fb8c00; --border-color: #d5d9d9; --border-width: 1px; --border-radius: 8px; @@ -34,21 +38,7 @@ } 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: ' 🌞'; + /* Default theme, see :root element */ } html[data-theme='nebula-dark'] { @@ -58,6 +48,7 @@ html[data-theme='nebula-dark'] { --button-text: var(--text-color); --text-color: #F7F8F8; --secondary-text-color: #ddd; + --muted-text-color: #F7F8F8; --link-color: #ffe7a3; --highlight-color: #e03131; @@ -79,6 +70,7 @@ html[data-theme='bbs'] { --button-text: var(--text-color); --text-color: #000; --secondary-text-color: #000; + --muted-text-color: #000; --link-color: #543fd7; --highlight-color: #e03131; @@ -100,6 +92,7 @@ html[data-theme='silo'] { --button-text: var(--text-color); --text-color: #FFF; --secondary-text-color: #29292c; + --muted-text-color: #FFF; --link-color: #FF9800; --highlight-color: #23B0FF; @@ -134,6 +127,9 @@ main { padding-top: .5em; } + +/* Navigation */ + header { background-color: var(--nav-background-color); position: fixed; @@ -180,6 +176,8 @@ header li h1 { border-bottom: 3px dotted #23B0FF; } +/* Generic elements */ + a, a:hover, a:visited, a:active { text-decoration: none; } @@ -193,6 +191,10 @@ a:hover { filter: brightness(80%); } +ol li::marker, ul li::marker { + color: var(--muted-text-color); +} + /* Active element, e.g. a button */ .active { background-color: var(--highlight-color);