diff --git a/css/digui.css b/css/digui.css index d1076e4..d211701 100644 --- a/css/digui.css +++ b/css/digui.css @@ -9,6 +9,8 @@ /* Main structure */ :root { + --padding: .5rem; + /* Default is nebula-light */ --font-family: sans-serif; --background-color: #fff; @@ -32,11 +34,22 @@ /* E.g., an active button */ --color-highlight: #fb8c00; /* Generic colors */ - --color-danger: #e03131; - --color-warning: orange; + /*--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); - --padding: .5rem; + /* 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'] { @@ -180,6 +193,12 @@ header li h1 { /* 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; } @@ -209,7 +228,7 @@ ol li::marker, ul li::marker { } /* Buttons */ -button, input { +button, input, select, textarea { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); box-sizing: border-box; @@ -218,8 +237,9 @@ button, input { cursor: pointer; display: inline-block; font-size: 13px; - line-height: 29px; - padding: 0 10px 0 11px; + /*line-height: 29px;*/ + /*padding: 0 10px 0 11px;*/ + padding: .5rem .5rem; position: relative; text-align: left; text-decoration: none; @@ -243,6 +263,33 @@ button:focus { /*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; @@ -261,8 +308,14 @@ button:focus { [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'] 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; } @@ -321,6 +374,10 @@ button:focus { 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; @@ -367,4 +424,4 @@ footer .column { footer h2 { text-align: left; margin-bottom: 0; -} \ No newline at end of file +}