mirror of
https://github.com/tale/headplane.git
synced 2026-10-26 22:47:55 +00:00
Aarnav Tale
383 lines
8.8 KiB
CSS
383 lines
8.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@plugin "tailwindcss-animate";
|
|
|
|
/* Dark mode: respect an explicit `.dark` / `.light` class on <html>, and fall
|
|
* back to the user's OS preference when neither is set (i.e. "system"). */
|
|
@custom-variant dark {
|
|
&:where(.dark, .dark *) {
|
|
@slot;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
&:where(html:not(.light):not(.dark)),
|
|
&:where(html:not(.light):not(.dark) *) {
|
|
@slot;
|
|
}
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--blur-xs: 2px;
|
|
|
|
--height-editor: calc(100vh - 20rem);
|
|
|
|
--font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-xs--line-height: 1rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-sm--line-height: 1.125rem;
|
|
--text-base: 0.875rem;
|
|
--text-base--line-height: 1.25rem;
|
|
--text-lg: 0.9375rem;
|
|
--text-lg--line-height: 1.375rem;
|
|
--text-xl: 1.25rem;
|
|
--text-xl--line-height: 1.75rem;
|
|
|
|
--transition-duration-25: 25ms;
|
|
--transition-duration-50: 50ms;
|
|
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.625rem;
|
|
|
|
--animate-loading: loader 0.8s infinite ease-in-out;
|
|
|
|
@keyframes loader {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--color-canvas: var(--hp-canvas);
|
|
--color-surface: var(--hp-surface);
|
|
--color-raised: var(--hp-raised);
|
|
--color-subtle: var(--hp-subtle);
|
|
--color-hover: var(--hp-hover);
|
|
--color-line: var(--hp-line);
|
|
--color-line-strong: var(--hp-line-strong);
|
|
--color-fg: var(--hp-fg);
|
|
--color-muted: var(--hp-muted);
|
|
--color-faint: var(--hp-faint);
|
|
--color-ink: var(--hp-ink);
|
|
--color-ink-fg: var(--hp-ink-fg);
|
|
--color-accent: var(--hp-accent);
|
|
--color-accent-fg: var(--hp-accent-fg);
|
|
--color-accent-subtle: var(--hp-accent-subtle);
|
|
--color-ok: var(--hp-ok);
|
|
--color-ok-subtle: var(--hp-ok-subtle);
|
|
--color-warn: var(--hp-warn);
|
|
--color-warn-subtle: var(--hp-warn-subtle);
|
|
--color-bad: var(--hp-bad);
|
|
--color-bad-subtle: var(--hp-bad-subtle);
|
|
--color-danger: var(--hp-danger);
|
|
--color-backdrop: var(--hp-backdrop);
|
|
|
|
--shadow-overlay: var(--hp-shadow-overlay);
|
|
}
|
|
|
|
@utility dark-tokens {
|
|
--hp-canvas: #141313;
|
|
--hp-surface: #1a1919;
|
|
--hp-raised: #222120;
|
|
--hp-subtle: #201f1e;
|
|
--hp-hover: #262423;
|
|
--hp-line: #2c2a29;
|
|
--hp-line-strong: #3b3836;
|
|
--hp-fg: #ebe8e6;
|
|
--hp-muted: #a8a29d;
|
|
--hp-faint: #8a847f;
|
|
--hp-ink: #ebe8e6;
|
|
--hp-ink-fg: #1f1e1e;
|
|
--hp-accent: #86a8ec;
|
|
--hp-accent-fg: #10151f;
|
|
--hp-accent-subtle: #1d2536;
|
|
--hp-ok: #5dbf7c;
|
|
--hp-ok-subtle: #1c2c21;
|
|
--hp-warn: #e0a548;
|
|
--hp-warn-subtle: #33281a;
|
|
--hp-bad: #ef7a70;
|
|
--hp-bad-subtle: #3a201e;
|
|
--hp-danger: #c23b32;
|
|
--hp-backdrop: rgb(0 0 0 / 0.6);
|
|
--hp-shadow-overlay: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -12px rgb(0 0 0 / 0.7);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@utility border-overlay {
|
|
border-width: 1px;
|
|
border-color: var(--hp-line);
|
|
|
|
@variant dark {
|
|
border-color: var(--hp-line-strong);
|
|
}
|
|
}
|
|
|
|
@utility focus-ring {
|
|
&:focus-visible {
|
|
outline: 2px solid var(--hp-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
@utility focus-within-ring {
|
|
&:has(:focus-visible) {
|
|
outline: 2px solid var(--hp-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
@utility container {
|
|
margin-inline: auto;
|
|
padding-inline: 1rem;
|
|
width: 100%;
|
|
max-width: 96rem; /* 1536px - constrain on large displays */
|
|
|
|
@media (width >= theme(--breakpoint-sm)) {
|
|
padding-inline: 2rem;
|
|
}
|
|
@media (width >= theme(--breakpoint-lg)) {
|
|
padding-inline: 4rem;
|
|
}
|
|
|
|
@media (width >= theme(--breakpoint-xl)) {
|
|
padding-inline: 5rem;
|
|
}
|
|
|
|
@media (width >= theme(--breakpoint-2xl)) {
|
|
padding-inline: 6rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
--hp-canvas: #fbfaf9;
|
|
--hp-surface: #ffffff;
|
|
--hp-raised: #ffffff;
|
|
--hp-subtle: #f4f2f1;
|
|
--hp-hover: #f1efed;
|
|
--hp-line: #e9e6e4;
|
|
--hp-line-strong: #d6d2cf;
|
|
--hp-fg: #1f1e1e;
|
|
--hp-muted: #6e6864;
|
|
--hp-faint: #9b9590;
|
|
--hp-ink: #1f1e1e;
|
|
--hp-ink-fg: #f7f5f4;
|
|
--hp-accent: #3461b8;
|
|
--hp-accent-fg: #ffffff;
|
|
--hp-accent-subtle: #edf1f9;
|
|
--hp-ok: #2b8a4a;
|
|
--hp-ok-subtle: #e8f4eb;
|
|
--hp-warn: #a5640a;
|
|
--hp-warn-subtle: #fbf1e1;
|
|
--hp-bad: #c23b32;
|
|
--hp-bad-subtle: #fbeceb;
|
|
--hp-danger: #c23b32;
|
|
--hp-backdrop: rgb(31 30 30 / 0.3);
|
|
--hp-shadow-overlay: 0 1px 2px rgb(31 30 30 / 0.05), 0 8px 24px -6px rgb(31 30 30 / 0.12);
|
|
color-scheme: light;
|
|
/* The scrollbar gutter shows the root background, not body's. */
|
|
background-color: var(--hp-canvas);
|
|
|
|
/* app/layout/scrollbar.tsx draws an overlay thumb instead, so the page
|
|
never shifts when a classic scrollbar appears. */
|
|
@media (pointer: fine) {
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@apply dark:dark-tokens;
|
|
}
|
|
|
|
body {
|
|
@apply bg-canvas text-fg text-base;
|
|
font-optical-sizing: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--hp-line-strong);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--hp-line-strong) transparent;
|
|
}
|
|
}
|
|
|
|
@utility dark-cm-tokens {
|
|
--cm-keyword: var(--color-purple-400);
|
|
--cm-string: var(--color-emerald-400);
|
|
--cm-variable: var(--color-cyan-400);
|
|
--cm-property: var(--color-violet-400);
|
|
--cm-atom: var(--color-orange-400);
|
|
--cm-number: var(--color-orange-400);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
--cm-bg: var(--hp-surface);
|
|
--cm-fg: var(--hp-fg);
|
|
--cm-caret: var(--hp-fg);
|
|
--cm-selection: var(--hp-accent-subtle);
|
|
--cm-selection-match: var(--hp-subtle);
|
|
--cm-line-highlight: var(--hp-subtle);
|
|
--cm-gutter-bg: var(--hp-canvas);
|
|
--cm-gutter-fg: var(--hp-faint);
|
|
--cm-gutter-fg-active: var(--hp-muted);
|
|
--cm-gutter-border: var(--hp-line);
|
|
--cm-comment: var(--hp-muted);
|
|
--cm-keyword: var(--color-purple-600);
|
|
--cm-string: var(--color-emerald-700);
|
|
--cm-type: var(--hp-accent);
|
|
--cm-definition: var(--hp-accent);
|
|
--cm-name: var(--hp-fg);
|
|
--cm-variable: var(--color-cyan-700);
|
|
--cm-property: var(--color-violet-600);
|
|
--cm-atom: var(--color-orange-600);
|
|
--cm-number: var(--color-orange-600);
|
|
--cm-link: var(--hp-accent);
|
|
--cm-bracket: var(--hp-muted);
|
|
|
|
@apply dark:dark-cm-tokens;
|
|
}
|
|
}
|
|
|
|
.cm-merge-theme,
|
|
.cm-mergeView,
|
|
.cm-mergeViewEditor {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.cm-mergeViewEditors {
|
|
height: 100%;
|
|
}
|
|
|
|
.toast-viewport {
|
|
position: fixed;
|
|
z-index: 50;
|
|
bottom: 2rem;
|
|
right: 1rem;
|
|
left: auto;
|
|
top: auto;
|
|
width: 20rem;
|
|
}
|
|
|
|
.toast-root {
|
|
--gap: 0.75rem;
|
|
--peek: 0.75rem;
|
|
--scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));
|
|
--shrink: calc(1 - var(--scale));
|
|
--height: var(--toast-frontmost-height, var(--toast-height));
|
|
--offset-y: calc(
|
|
var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
|
|
var(--toast-swipe-movement-y)
|
|
);
|
|
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
width: 100%;
|
|
height: var(--height);
|
|
z-index: calc(1000 - var(--toast-index));
|
|
transform-origin: bottom center;
|
|
user-select: none;
|
|
|
|
transform: translateX(var(--toast-swipe-movement-x))
|
|
translateY(
|
|
calc(
|
|
var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
|
|
(var(--shrink) * var(--height))
|
|
)
|
|
)
|
|
scale(var(--scale));
|
|
|
|
transition:
|
|
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
|
|
opacity 0.5s,
|
|
height 0.15s;
|
|
|
|
&[data-expanded] {
|
|
transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
|
|
height: var(--toast-height);
|
|
}
|
|
|
|
&[data-starting-style] {
|
|
transform: translateY(150%);
|
|
}
|
|
|
|
&[data-ending-style] {
|
|
opacity: 0;
|
|
transform: translateY(150%);
|
|
|
|
&[data-swipe-direction="up"] {
|
|
transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
|
|
}
|
|
&[data-swipe-direction="down"] {
|
|
transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
|
|
}
|
|
&[data-swipe-direction="left"] {
|
|
transform: translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y));
|
|
}
|
|
&[data-swipe-direction="right"] {
|
|
transform: translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y));
|
|
}
|
|
}
|
|
|
|
&[data-limited] {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Invisible hit area to bridge hover gap between toasts */
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: calc(var(--gap) + 1px);
|
|
}
|
|
}
|
|
|
|
.toast-content {
|
|
overflow: hidden;
|
|
transition: opacity 0.25s;
|
|
|
|
&[data-behind] {
|
|
opacity: 0;
|
|
}
|
|
|
|
&[data-expanded] {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.cm-mergeView .cm-editor,
|
|
.cm-mergeView .cm-editor .cm-scroller {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.cm-mergeViewEditors {
|
|
scrollbar-color: var(--cm-gutter-border) transparent;
|
|
scrollbar-width: auto;
|
|
}
|