hh
f980abcc1d
The panel had an inset for this; the calendar never did. Its root filled the leaf, and Obsidian's phone navbar floats over a leaf rather than shortening it, so the scroll container ran to the bottom of the screen and the last row of the list sat under the bar - unreachable. `lib/inset.ts` is the same pure measurement the panel plugin grew, with the same tests: the deeper of navbar and keyboard, never their sum, and a bar that sits beside the view covers nothing of it. The view re-measures by frame until it holds still and writes `--bcal-inset-bottom`. `viewport()` subtracts the bar too, so anchored panels and the quick look are placed against what is actually reachable instead of ending under it.
372 lines
9.1 KiB
CSS
372 lines
9.1 KiB
CSS
@layer theme, base, components, utilities;
|
|
@import "tailwindcss/theme.css" layer(theme);
|
|
@import "tailwindcss/utilities.css" layer(utilities) important;
|
|
|
|
@source "./";
|
|
|
|
@custom-variant dark (&:where(.theme-dark, .theme-dark *));
|
|
|
|
.bcal-root {
|
|
--background: var(--background-primary);
|
|
--foreground: var(--text-normal);
|
|
--card: var(--background-primary-alt);
|
|
--card-foreground: var(--text-normal);
|
|
--popover: var(--background-secondary);
|
|
--popover-foreground: var(--text-normal);
|
|
--primary: var(--color-accent);
|
|
--primary-foreground: var(--text-on-accent);
|
|
--secondary: var(--background-modifier-hover);
|
|
--secondary-foreground: var(--text-normal);
|
|
--muted: var(--background-modifier-hover);
|
|
--muted-foreground: var(--text-muted);
|
|
--accent: var(--background-modifier-hover);
|
|
--accent-foreground: var(--text-normal);
|
|
--destructive: var(--text-error);
|
|
--destructive-foreground: var(--text-on-accent);
|
|
--border: var(--background-modifier-border);
|
|
--input: var(--background-modifier-border);
|
|
--ring: var(--color-accent);
|
|
--icon: var(--text-muted);
|
|
--signal: var(--color-accent);
|
|
--note: oklch(0.52 0.13 78);
|
|
|
|
--status-new: var(--color-accent);
|
|
--status-done: oklch(0.55 0.14 155);
|
|
--status-skip: var(--text-faint);
|
|
--status-reply: oklch(0.55 0.14 235);
|
|
--status-snooze: oklch(0.66 0.13 75);
|
|
--status-meeting: oklch(0.5 0.2 300);
|
|
--status-work: oklch(0.55 0.13 195);
|
|
|
|
--sidebar: var(--background-secondary);
|
|
--radius: 0.45rem;
|
|
}
|
|
|
|
.theme-dark .bcal-root {
|
|
--note: oklch(0.84 0.14 88);
|
|
--status-done: oklch(0.74 0.14 155);
|
|
--status-reply: oklch(0.72 0.13 235);
|
|
--status-snooze: oklch(0.8 0.13 75);
|
|
--status-meeting: oklch(0.72 0.16 300);
|
|
--status-work: oklch(0.75 0.12 195);
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-interface);
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.875rem;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
|
|
--color-icon: var(--icon);
|
|
--color-signal: var(--signal);
|
|
--color-note: var(--note);
|
|
--color-sidebar: var(--sidebar);
|
|
|
|
--color-status-new: var(--status-new);
|
|
--color-status-done: var(--status-done);
|
|
--color-status-skip: var(--status-skip);
|
|
--color-status-reply: var(--status-reply);
|
|
--color-status-snooze: var(--status-snooze);
|
|
--color-status-meeting: var(--status-meeting);
|
|
--color-status-work: var(--status-work);
|
|
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
}
|
|
|
|
.bcal-root {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
/* The phone's navbar floats over the leaf rather than shortening it, so the
|
|
last row of the list would sit underneath it. The view measures how much
|
|
and sets this; on a desktop it stays 0. */
|
|
padding-bottom: var(--bcal-inset-bottom, 0px);
|
|
font-family: var(--font-interface);
|
|
font-size: var(--text-sm);
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
}
|
|
|
|
/* Portal layer for menus: a zero-sized anchor at body level, above the sidedocks. */
|
|
.bcal-portal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
z-index: var(--layer-menu, 65);
|
|
}
|
|
|
|
.bcal-app {
|
|
container-type: inline-size;
|
|
display: flex;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bcal-root.bcal-root *,
|
|
.bcal-root.bcal-root *::before,
|
|
.bcal-root.bcal-root *::after {
|
|
box-sizing: border-box;
|
|
border: 0 solid var(--border);
|
|
}
|
|
|
|
.bcal-root.bcal-root :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
|
|
margin: 0;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.bcal-root.bcal-root :is(ul, ol) {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root :is(button, input, select, textarea) {
|
|
height: auto;
|
|
min-height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font: inherit;
|
|
color: inherit;
|
|
letter-spacing: inherit;
|
|
background: transparent;
|
|
border: 0 solid var(--border);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root :is(button, input, select, textarea):hover,
|
|
.bcal-root.bcal-root :is(button, input, select, textarea):focus,
|
|
.bcal-root.bcal-root :is(button, input, select, textarea):active {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root button {
|
|
cursor: pointer;
|
|
text-align: inherit;
|
|
}
|
|
|
|
.bcal-root.bcal-root button:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.bcal-root.bcal-root button:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.bcal-root.bcal-root input::placeholder,
|
|
.bcal-root.bcal-root textarea::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.bcal-root.bcal-root input[type="search"]::-webkit-search-cancel-button,
|
|
.bcal-root.bcal-root input[type="search"]::-webkit-search-decoration {
|
|
display: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root svg {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.bcal-root.bcal-root a,
|
|
.bcal-root.bcal-root a:hover {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
.bcal-root.bcal-root img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-md > * {
|
|
display: inline;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-md a {
|
|
color: var(--link-color, var(--color-accent));
|
|
text-decoration: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-md a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-md a.is-unresolved {
|
|
color: var(--link-unresolved-color, var(--muted-foreground));
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-md code {
|
|
padding: 0 0.25em;
|
|
font-size: 0.9em;
|
|
background: var(--secondary);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-md :is(img, .internal-embed) {
|
|
display: inline-block;
|
|
max-height: 1.4em;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/* The quick look reads the whole card, so here markdown keeps its blocks. */
|
|
.bcal-root.bcal-root .bcal-prose > * + * {
|
|
margin-top: 0.45em;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose :is(ul, ol) {
|
|
padding-left: 1.25em;
|
|
list-style: disc;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose li + li {
|
|
margin-top: 0.2em;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose li.task-list-item {
|
|
list-style: none;
|
|
margin-left: -1.25em;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose input.task-list-item-checkbox {
|
|
margin: 0 0.4em 0 0;
|
|
vertical-align: -0.15em;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose a {
|
|
color: var(--link-color, var(--color-accent));
|
|
text-decoration: none;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose code {
|
|
padding: 0 0.25em;
|
|
font-size: 0.9em;
|
|
background: var(--secondary);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose :is(img, .internal-embed) {
|
|
max-width: 100%;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-prose blockquote {
|
|
padding-left: 0.75em;
|
|
border-left: 1px solid var(--border);
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.bcal-root.bcal-root .bcal-dragging {
|
|
position: relative;
|
|
z-index: 40;
|
|
cursor: grabbing;
|
|
box-shadow: 0 12px 28px -8px rgb(0 0 0 / 45%);
|
|
transition: none;
|
|
}
|
|
|
|
@utility touch-shown {
|
|
@media (hover: none) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@utility tabular {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* A lane's gate in the rail: the project's hue as a filled check. */
|
|
@utility gate-hue {
|
|
color: white;
|
|
background: oklch(0.58 0.11 var(--hue));
|
|
border-color: oklch(0.58 0.11 var(--hue));
|
|
.theme-dark & {
|
|
background: oklch(0.66 0.11 var(--hue));
|
|
border-color: oklch(0.66 0.11 var(--hue));
|
|
color: oklch(0.2 0.02 var(--hue));
|
|
}
|
|
}
|
|
|
|
@utility hue-chip {
|
|
color: oklch(0.45 0.13 var(--hue));
|
|
background: oklch(0.6 0.09 var(--hue) / 0.12);
|
|
border-color: oklch(0.6 0.09 var(--hue) / 0.4);
|
|
.theme-dark & {
|
|
color: oklch(0.82 0.08 var(--hue));
|
|
}
|
|
}
|
|
|
|
/* A key, drawn as one: the heavier bottom edge is the keycap, not a shadow. */
|
|
@utility kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.15rem;
|
|
height: 1.15rem;
|
|
padding: 0 0.25rem;
|
|
font-family: inherit;
|
|
font-size: 10px;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
color: var(--muted-foreground);
|
|
background: var(--background);
|
|
border: 1px solid var(--border);
|
|
border-bottom-color: color-mix(in oklab, var(--border) 55%, var(--foreground));
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
@utility scrollbar-none {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|