106 lines
3.1 KiB
CSS
106 lines
3.1 KiB
CSS
/* part: base — element defaults, so a page has a shell without restating one.
|
|
*
|
|
* USE WHEN: always — it is baked whenever any other part is, and never alone.
|
|
* NEEDS: nothing
|
|
*
|
|
* ADD: paste this into the page, then run `make theme bake`.
|
|
* (nothing — it arrives with the first part you add)
|
|
*
|
|
* Derived from common/ui/src/base.css. It is the part with the most evidence
|
|
* behind it: four consumers needed this layer and each pasted its own copy.
|
|
*
|
|
* mts/ui/meetus-app/src/styles.css byte-identical to base.css, md5 d5761ed8…
|
|
* mts/ui/doocus-app/src/styles.css the same bytes again
|
|
* mpr/ui/detection-app/src/App.vue a third reset, plus ~12 hand-rolled buttons
|
|
* mpr/ui/common/styles/theme.css a fourth, for the React side
|
|
*
|
|
* tokens.css defines variables and styles no element, so a page that has only
|
|
* tokens still renders an OS-default <button> next to a themed panel. This is
|
|
* the missing half.
|
|
*
|
|
* ALWAYS: this part is baked whenever a page bakes any part at all. It styles
|
|
* elements, not classes, so there is nothing in the markup to detect it by --
|
|
* and a page that uses a panel but keeps OS-default buttons is not a thing
|
|
* anyone wants.
|
|
*
|
|
* TOKENS: --surface-0 --surface-2 --surface-3 --text-primary --panel-border
|
|
* --panel-radius --font-ui --font-size-base --space-1 --space-3
|
|
*
|
|
* TWO DELIBERATE CHANGES from the source, both because a part must travel:
|
|
*
|
|
* 1. No `#app` selector. The source sizes `html, body, #app` together, which
|
|
* assumes a Vue mount point. A standalone page has no #app, and every
|
|
* panel styles itself height:100%, so it would collapse to zero height.
|
|
* The height chain is `.fills` below, opt-in and named.
|
|
* 2. Inputs get padding. The source sets none, which is why doocus-app
|
|
* re-specified the whole input recipe inline five times over.
|
|
*/
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--surface-0);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
/* Opt in on <html>, <body> and the top element when the page is an app shell
|
|
* that should fill the viewport. Left off, the page scrolls like a document —
|
|
* which is what most ad-hoc vein pages actually want. */
|
|
.fills {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
button {
|
|
font-family: var(--font-ui);
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-primary);
|
|
background: var(--surface-2);
|
|
border: var(--panel-border);
|
|
border-radius: var(--panel-radius);
|
|
padding: var(--space-1) var(--space-3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
background: var(--surface-3);
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: var(--font-ui);
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-primary);
|
|
background: var(--surface-0);
|
|
border: var(--panel-border);
|
|
border-radius: 4px;
|
|
padding: var(--space-1) var(--space-2);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--surface-3);
|
|
border-radius: 5px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|