diff --git a/app-proto/main.css b/app-proto/main.css index b9fc0a1..26cdac0 100644 --- a/app-proto/main.css +++ b/app-proto/main.css @@ -1,19 +1,7 @@ -:root { - --text: #fcfcfc; /* almost white */ - --text-bright: white; - --text-invalid: #f58fc2; /* bright pink */ - --border: #555; /* light gray */ - --border-focus: #aaa; /* bright gray */ - --border-invalid: #70495c; /* dusky pink */ - --selection-highlight: #444; /* medium gray */ - --page-background: #222; /* dark gray */ - --display-background: #020202; /* almost black */ -} - body { margin: 0px; - color: var(--text); - background-color: var(--page-background); + color: #fcfcfc; + background-color: #222; font-family: 'Fira Sans', sans-serif; } @@ -29,7 +17,7 @@ body { padding: 0px; border-width: 0px 1px 0px 0px; border-style: solid; - border-color: var(--border); + border-color: #555; } /* add-remove */ @@ -47,10 +35,6 @@ body { } /* KLUDGE */ -/* - for convenience, we're using emoji as temporary icons for some buttons. these - buttons need to be displayed in an emoji font -*/ #add-remove > button.emoji { font-family: 'Noto Emoji', sans-serif; } @@ -73,8 +57,8 @@ summary { } summary.selected { - color: var(--text-bright); - background-color: var(--selection-highlight); + color: #fff; + background-color: #444; } summary > div, .constraint { @@ -128,7 +112,7 @@ details[open]:has(li) .element-switch::after { } .constraint.invalid { - color: var(--text-invalid); + color: #f58fc2; } .constraint > input[type=checkbox] { @@ -138,12 +122,12 @@ details[open]:has(li) .element-switch::after { .constraint > input[type=text] { color: inherit; background-color: inherit; - border: 1px solid var(--border); + border: 1px solid #555; border-radius: 2px; } .constraint.invalid > input[type=text] { - border-color: var(--border-invalid); + border-color: #70495c; } .status { @@ -156,7 +140,7 @@ details[open]:has(li) .element-switch::after { .invalid > .status::after, details:has(.invalid):not([open]) .status::after { content: '⚠'; - color: var(--text-invalid); + color: #f58fc2; } /* display */ @@ -165,11 +149,11 @@ canvas { float: left; margin-left: 20px; margin-top: 20px; - background-color: var(--display-background); - border: 1px solid var(--border); + background-color: #020202; + border: 1px solid #555; border-radius: 16px; } canvas:focus { - border-color: var(--border-focus); + border-color: #aaa; } \ No newline at end of file diff --git a/app-proto/src/add_remove.rs b/app-proto/src/add_remove.rs index 5590b6c..bea20f9 100644 --- a/app-proto/src/add_remove.rs +++ b/app-proto/src/add_remove.rs @@ -173,7 +173,7 @@ pub fn AddRemove() -> View { } ) { "+" } button( - class="emoji", /* KLUDGE */ // for convenience, we're using an emoji as a temporary icon for this button + class="emoji", /* KLUDGE */ disabled={ let state = use_context::(); state.selection.with(|sel| sel.len() != 2)