Vincent
a6c8e4336b
A Tauri 2 shell with one child webview per configured tool. Nav on the left with groups and a collapsible icon rail; links between configured apps switch tabs, everything else leaves for the real browser. Design spec in docs/superpowers/specs/2026-09-01-work-app-design.md.
57 lines
2.0 KiB
CSS
57 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Class-based dark mode, so the app can offer System / Light / Dark rather
|
|
than only following the OS. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@layer base {
|
|
[hidden] { display: none !important; }
|
|
|
|
/* It is a tool, not a document: dragging across it should not leave a
|
|
selection behind. Text fields opt back in. */
|
|
html { -webkit-user-select: none; user-select: none; }
|
|
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
|
|
img, a { -webkit-user-drag: none; }
|
|
|
|
/* No focus ring anywhere. :focus-visible has to go too — WebKit counts a
|
|
click on a select or checkbox as "focus worth showing" and draws its own,
|
|
which survives a :focus rule alone. */
|
|
*, *::before, *::after, :focus, :focus-visible, :focus-within {
|
|
outline: none !important;
|
|
outline-offset: 0 !important;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
button:focus, button:focus-visible, select:focus, [contenteditable]:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
html, body, #root { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji",
|
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
background: var(--color-slate-100);
|
|
color: var(--color-slate-800);
|
|
}
|
|
.dark body {
|
|
background: var(--color-slate-950);
|
|
color: var(--color-slate-100);
|
|
}
|
|
|
|
/* Borders do the separating; the scrollbar should not compete. */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-slate-300);
|
|
border-radius: 9999px;
|
|
border: 3px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: var(--color-slate-700);
|
|
background-clip: content-box;
|
|
}
|
|
}
|