mirror of
https://github.com/priyanshujain/margin-calendar.git
synced 2026-10-02 11:07:04 +00:00
520 lines
12 KiB
CSS
520 lines
12 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
background: var(--shell);
|
|
color: var(--ink);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--t-3);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--selection);
|
|
}
|
|
|
|
/* A webview reads every tap as the start of a text selection: a grey flash over the button, a
|
|
callout on a long press, and a caret in whatever it decided you meant. None of that belongs on
|
|
chrome. All of it belongs in a field, so the fields ask for it back. */
|
|
html {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
:root[data-touch] body {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
:root[data-touch] input,
|
|
:root[data-touch] textarea,
|
|
:root[data-touch] [contenteditable] {
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
-webkit-touch-callout: default;
|
|
}
|
|
|
|
/* iOS Safari zooms the page in on a focused field under 16px, and the viewport is locked, so
|
|
there is no gesture that undoes it. */
|
|
:root[data-phone] input,
|
|
:root[data-phone] textarea,
|
|
:root[data-phone] select {
|
|
font-size: var(--t-5);
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
color: inherit;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* The grid owns the window: one header row, no permanent sidebar, nothing else resident. */
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Fill whatever the layout viewport turns out to be, rather than naming a unit that claims to
|
|
know it. html, body and #root are already exactly that box, so this inherits the right answer
|
|
on every platform without being told.
|
|
|
|
Deliberately not a viewport unit. UIKit shrinks that box by the safe areas while leaving it
|
|
anchored at y 0, and `stop_uikit_shrinking_the_viewport` in lib.rs is the only thing stopping
|
|
it. Should that ever regress, a unit naming the whole screen would lay the tab bar out below
|
|
the clip `body { position: fixed }` imposes, where it is not merely misplaced but invisible
|
|
and untappable. `100%` cannot drift that way. */
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.titlebar {
|
|
flex: none;
|
|
position: relative;
|
|
z-index: 45;
|
|
/* Out of the way of a status bar or a notch, the same way the phone bars do it. A desktop reads
|
|
both insets as zero; an iPad gets this header rather than those bars and does not. */
|
|
height: calc(var(--titlebar-h) + var(--safe-top));
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
padding: var(--safe-top) 14px 0;
|
|
background: var(--shell);
|
|
border-bottom: 1px solid var(--line);
|
|
/* Tauri's drag region lets the second click of a double click through to the webview so it can
|
|
zoom on mouseup, and WebKit would otherwise read that click as "select the nearest word". */
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* The macOS traffic lights float over this row, so it opens a lane for them and costs no extra
|
|
height. macOS is the only platform with any: they come from `titleBarStyle: "Overlay"`, which is
|
|
a macOS-only window setting, and on Linux, Windows, an iPad or a browser the lane was 84px of
|
|
nothing, pushing the view switcher off centre and starving the date range of the room it needed
|
|
to say what day it is. */
|
|
:root[data-traffic] .titlebar {
|
|
padding-left: var(--traffic-pad);
|
|
}
|
|
|
|
.titlebar .lead {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.titlebar .trail {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.icon-button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--r-sm);
|
|
color: var(--ink-soft);
|
|
transition: background 120ms var(--ease), color 120ms var(--ease);
|
|
}
|
|
|
|
.icon-button:hover {
|
|
background: var(--accent-wash);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.icon-button[data-active="true"] {
|
|
background: var(--accent-wash);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* 28px is a pointer's target. A finger is nearer 44, and a tablet gets the desktop layout with
|
|
none of the desktop's aim. */
|
|
:root[data-touch] .icon-button {
|
|
width: var(--touch-h);
|
|
height: var(--touch-h);
|
|
}
|
|
|
|
/* Phone chrome
|
|
----------------------------------------------------------------------------------------------
|
|
The header's three groups do not fit a 390px row, so they split: where you are goes to the top,
|
|
what you are looking at goes to the bottom where the thumb already is, and the rest goes behind
|
|
the overflow. Both bars are sized for a finger whether or not the pointer says it is one, since
|
|
a phone-width window is a phone-shaped layout either way. */
|
|
|
|
.phonebar {
|
|
flex: none;
|
|
position: relative;
|
|
z-index: 45;
|
|
height: calc(var(--phonebar-h) + var(--safe-top));
|
|
padding: var(--safe-top) 6px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
background: var(--shell);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.phonebar .icon-button {
|
|
flex: none;
|
|
width: var(--touch-h);
|
|
height: var(--touch-h);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* Takes what the fixed controls leave and trims the range rather than pushing them off the edge. */
|
|
.phonebar-range {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: var(--touch-h);
|
|
padding: 0 6px;
|
|
border-radius: var(--r-sm);
|
|
font-size: var(--t-4);
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.phonebar-today {
|
|
flex: none;
|
|
min-width: var(--touch-h);
|
|
height: var(--touch-h);
|
|
padding: 0 8px;
|
|
border-radius: var(--r-sm);
|
|
color: var(--ink-soft);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* There is no hover to light up, so the press itself is the feedback. */
|
|
.phonebar-range:active,
|
|
.phonebar-today:active,
|
|
.tabbar-view:active {
|
|
background: var(--accent-wash);
|
|
}
|
|
|
|
.tabbar {
|
|
flex: none;
|
|
position: relative;
|
|
z-index: 45;
|
|
height: calc(var(--tabbar-h) + var(--safe-bottom));
|
|
padding: 0 10px var(--safe-bottom);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--shell);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.tabbar-views {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 2px;
|
|
border-radius: var(--r-md);
|
|
background: var(--accent-wash);
|
|
}
|
|
|
|
.tabbar-view {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: var(--touch-h);
|
|
border-radius: var(--r-sm);
|
|
font-size: var(--t-3);
|
|
color: var(--ink-soft);
|
|
transition: background 120ms var(--ease), color 120ms var(--ease);
|
|
}
|
|
|
|
.tabbar-view[data-active="true"] {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* The only action with a permanent button of its own. Everything else is a row in the overflow. */
|
|
.tabbar-new {
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--touch-h);
|
|
height: var(--touch-h);
|
|
border-radius: var(--r-pill);
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
transition: background 120ms var(--ease);
|
|
}
|
|
|
|
.tabbar-new:active {
|
|
background: var(--accent-ink);
|
|
}
|
|
|
|
.stage {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* The first-run note lays itself over whatever is here, so this is the box it covers. */
|
|
position: relative;
|
|
background: var(--paper);
|
|
}
|
|
|
|
/* Above every part of the grid, which stacks up to 15, and under the overlays, which start at 20:
|
|
the panel this opens has to come up in front of it. */
|
|
.first-run {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 19;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.first-run-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
max-width: 320px;
|
|
text-align: center;
|
|
}
|
|
|
|
.first-run-title {
|
|
margin: 0;
|
|
font-family: var(--font-heading);
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.first-run-note {
|
|
margin: 0;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* Overlays, margin's idiom: summoned by a key, dismissed with Escape, never resident. */
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 20;
|
|
background: var(--scrim);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 40px;
|
|
}
|
|
|
|
.panel {
|
|
width: min(480px, calc(100vw - 32px));
|
|
max-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-lg);
|
|
box-shadow: var(--shadow-pop);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* On a phone the same panel docks to the bottom edge: a centred box with a 40px moat around it
|
|
spends the only screen there is on scrim, and puts its buttons at the far end of the reach. */
|
|
:root[data-phone] .overlay {
|
|
/* Over the bars rather than under them. The desktop leaves its titlebar lit above the scrim
|
|
because the traffic lights live there, but a sheet on the bottom edge would otherwise come up
|
|
underneath the tab bar and lose its last row to it. */
|
|
z-index: 50;
|
|
padding: 0;
|
|
place-items: end center;
|
|
}
|
|
|
|
/* Search is the one overlay child that is not a `.panel`: it brings its own surface and its own
|
|
width, so all it wants from the phone is to be clear of the home indicator. */
|
|
:root[data-phone] .overlay > :not(.panel) {
|
|
margin-bottom: var(--safe-bottom);
|
|
}
|
|
|
|
:root[data-phone] .panel {
|
|
width: 100%;
|
|
max-height: var(--sheet-max-h);
|
|
border-width: 1px 0 0;
|
|
border-radius: var(--r-lg) var(--r-lg) 0 0;
|
|
/* The home indicator sits over the foot of the sheet, so the last row stops above it. */
|
|
padding-bottom: var(--safe-bottom);
|
|
animation: sheet-up 180ms var(--ease);
|
|
}
|
|
|
|
/* A list that has run out of rows must not start scrolling the page underneath it. */
|
|
:root[data-phone] .panel-body {
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
@keyframes sheet-up {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 14px 16px 22px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.panel-head h2 {
|
|
margin: 0;
|
|
font-family: var(--font-heading);
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.panel-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
padding: 20px 22px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.panel-foot {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
padding: 14px 22px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.field-label {
|
|
font-size: var(--t-1);
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 24px;
|
|
transform: translateX(-50%);
|
|
z-index: 60;
|
|
max-width: min(560px, calc(100vw - 48px));
|
|
padding: 10px 16px;
|
|
background: var(--glass);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-md);
|
|
box-shadow: var(--shadow-pop);
|
|
color: var(--ink);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Header. The grid owns the window, so this row is the only persistent chrome there is. */
|
|
.header-today,
|
|
.header-range {
|
|
height: 26px;
|
|
padding: 0 9px;
|
|
border-radius: var(--r-sm);
|
|
color: var(--ink-soft);
|
|
white-space: nowrap;
|
|
transition: background 120ms var(--ease), color 120ms var(--ease);
|
|
}
|
|
|
|
.header-today:hover,
|
|
.header-range:hover {
|
|
background: var(--accent-wash);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* At the minimum window size the agenda's range is long enough to overrun its 1fr column and
|
|
paint under the view switcher, so it ellipsizes rather than collides. */
|
|
.header-range {
|
|
font-size: var(--t-4);
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.view-switch {
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 2px;
|
|
border-radius: var(--r-md);
|
|
background: var(--accent-wash);
|
|
}
|
|
|
|
.view-option {
|
|
height: 22px;
|
|
padding: 0 11px;
|
|
border-radius: var(--r-sm);
|
|
font-size: var(--t-2);
|
|
color: var(--ink-soft);
|
|
transition: background 120ms var(--ease), color 120ms var(--ease);
|
|
}
|
|
|
|
.view-option:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.view-option[data-active="true"] {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.header-hours {
|
|
font-size: var(--t-1);
|
|
letter-spacing: 0.04em;
|
|
color: var(--ink-faint);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:root[data-compact] .header-hours {
|
|
display: none;
|
|
}
|