aneurinandClaude Sonnet 5
8a0befa1c7
Dropped the hardcoded 2rem height -- .field-row/.kanban__new are flex rows with the default align-items: stretch, so the button now fills to match its compact field's actual height instead of a guessed value that had to be kept in sync with it. Also bumped the "+" from 1.1rem to 1.4rem. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1102 lines
22 KiB
CSS
1102 lines
22 KiB
CSS
/* Placeholder styling only — just enough to be legible. */
|
|
|
|
:root {
|
|
--bg: #f7f7f8;
|
|
--surface: #ffffff;
|
|
--border: #e2e2e5;
|
|
--text: #1c1c1f;
|
|
--muted: #6b6b73;
|
|
--accent: #4f46e5;
|
|
--accent-text: #ffffff;
|
|
--warn-bg: #fff4e5;
|
|
--warn-border: #f0c48a;
|
|
--error: #b3261e;
|
|
/* Kanban inbox column: a touch lighter than a status column (var(--bg)). */
|
|
--inbox-bg: #fcfcfd;
|
|
color-scheme: light dark;
|
|
|
|
/* Same radius used consistently by everything of that kind -- not a full
|
|
scale, just names for the handful of values already in use. */
|
|
--radius-sm: 6px; /* compact controls: chips, small icon buttons, .field--compact */
|
|
--radius-md: 8px; /* buttons, .field, dropdown menus */
|
|
--radius-lg: 10px; /* tiles: project cards, kanban columns */
|
|
--radius-xl: 12px; /* panels: .card, .sidebar, .modal__dialog */
|
|
--radius-pill: 999px; /* status chip */
|
|
|
|
/* Both used consistently for their one meaning each -- not "disabled at
|
|
0.6, ghost at 0.5" by convention, just what those states are. */
|
|
--opacity-disabled: 0.6;
|
|
--opacity-ghost: 0.5;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #16161a;
|
|
--surface: #1f1f24;
|
|
--border: #33333a;
|
|
--text: #ececf1;
|
|
--muted: #9a9aa6;
|
|
--warn-bg: #2e2415;
|
|
--warn-border: #6b5220;
|
|
--error: #f2b8b5;
|
|
--inbox-bg: #202027;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* No browser focus ring on form controls -- the border colour change is
|
|
highlight enough. Specificity is a single pseudo-class + element, (0,0,1,1) -- .field below
|
|
is deliberately a single class with no element in the selector, (0,0,1,0),
|
|
so it can never win a specificity tie against this regardless of source
|
|
order (a wrapper-class + descendant-element rule, e.g. the old ".form
|
|
input", ties with this rule instead and -- being unconditional -- can
|
|
silently beat it by simply appearing later in the file, permanently
|
|
hiding the focus state; that was a real, previously-shipped bug). */
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* The one themed text input/select/textarea, applied directly to the
|
|
control itself everywhere -- login, dashboard, project, configuration,
|
|
profile, sidebar. See the note above for why "directly to the control"
|
|
(a single class, no wrapping selector) matters here, not just for
|
|
consistency. */
|
|
.field {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.55rem 0.7rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.field:disabled {
|
|
opacity: var(--opacity-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Same control, smaller -- inline "add" rows and the sidebar, where it's a
|
|
flex child beside a button or icon rather than filling a form row. */
|
|
.field--compact {
|
|
flex: 1;
|
|
width: auto;
|
|
min-width: 0;
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* The dashboard's project-name field: grown by JS to fit its content, so no
|
|
manual resize handle or scrollbar. */
|
|
.field--autosize {
|
|
resize: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.app__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.app__bar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.app__brand {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Opens the sidebar drawer on mobile (see the sidebar's own mobile rules
|
|
below) -- hidden here, shown only under that same breakpoint. */
|
|
.app__menu-toggle {
|
|
display: none;
|
|
flex: none;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.35rem 0.55rem;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app__menu-toggle:hover {
|
|
border-color: var(--muted);
|
|
}
|
|
|
|
.app__account {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.app__email {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app__body {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
padding: 1.5rem 1.25rem;
|
|
}
|
|
|
|
.app__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Full-bleed layout for views that need the room (e.g. the project board). */
|
|
.app__main--wide {
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- left sidebar (signed-in app pages) ------------------------------ */
|
|
|
|
.sidebar {
|
|
flex: 0 0 15rem;
|
|
align-self: flex-start;
|
|
position: sticky;
|
|
/* Matches .app__body's top padding, so the gap holds once it starts sticking. */
|
|
top: 1.5rem;
|
|
/* Fill the screen height: viewport minus the header (~3.0625rem, .app__bar's
|
|
padding + line height + border) and a matching 1.5rem gap top and bottom.
|
|
Not just a cap -- short content leaves room at the bottom of the panel,
|
|
long content scrolls internally. Re-tune if .app__bar's height changes. */
|
|
height: calc(100vh - 6.0625rem);
|
|
overflow-y: auto;
|
|
padding: 1rem 0.75rem 1.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* Only shown once .sidebar becomes a drawer, under the mobile breakpoint
|
|
below -- hidden here. */
|
|
.sidebar__close {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
border: none;
|
|
background: none;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.sidebar__close:hover {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* --- mobile: sidebar becomes an off-canvas drawer ---------------------- */
|
|
|
|
@media (max-width: 768px) {
|
|
.app__menu-toggle {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.app__body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 200;
|
|
width: 85vw;
|
|
max-width: 20rem;
|
|
height: 100vh;
|
|
border: none;
|
|
border-radius: 0;
|
|
border-right: 1px solid var(--border);
|
|
padding-top: 2.75rem;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.sidebar--open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sidebar__close {
|
|
display: block;
|
|
}
|
|
|
|
.app__drawer-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 150;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
}
|
|
}
|
|
|
|
.sidebar__nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.sidebar__link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.45rem 0.6rem;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.sidebar__link:hover {
|
|
background: var(--bg);
|
|
}
|
|
|
|
.sidebar__link--active,
|
|
.sidebar__link--active:hover {
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.sidebar__icon {
|
|
flex: none;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.sidebar__link-text {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sidebar__divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.sidebar__heading {
|
|
margin: 0 0 0.35rem;
|
|
padding: 0 0.6rem;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.sidebar__select {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.2rem 0.6rem;
|
|
}
|
|
|
|
.sidebar__inbox-cards {
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
padding: 0 0.1rem; /* room for the ghost card's outline while dragging */
|
|
}
|
|
|
|
.sidebar__note {
|
|
padding: 0 0.6rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 1.75rem;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
/* Wrap at word boundaries where possible; only break inside a word (a long
|
|
name, an unbroken URL, ...) when a single word wouldn't otherwise fit. */
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 0.75rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.notice {
|
|
margin: 1rem 0;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--warn-bg);
|
|
border: 1px solid var(--warn-border);
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin: 1.25rem 0;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
/* --- top-of-page "add a passkey" notice, dismissible for a week -------- */
|
|
|
|
.passkey-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
padding: 0.6rem 1.25rem;
|
|
background: var(--warn-bg);
|
|
border-bottom: 1px solid var(--warn-border);
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.passkey-notice p {
|
|
margin: 0;
|
|
}
|
|
|
|
.passkey-notice__dismiss {
|
|
flex: none;
|
|
border: none;
|
|
background: none;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.passkey-notice__dismiss:hover {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* --- passkey list (profile) -------------------------------------------- */
|
|
|
|
.passkeys {
|
|
list-style: none;
|
|
margin: 1rem 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.passkeys__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.passkeys__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.passkeys__label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.passkeys__meta {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.passkeys__remove {
|
|
flex: none;
|
|
border: none;
|
|
background: none;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.passkeys__remove:hover {
|
|
color: var(--error);
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* --- dashboard: grid of projects --------------------------------------- */
|
|
|
|
.dashboard__grid {
|
|
margin-top: 1rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
|
gap: 1rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.project-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
gap: 0.4rem;
|
|
padding: 1rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.project-card:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.project-card__title {
|
|
font-weight: 600;
|
|
font-size: 1.05rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.project-card__meta {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.project-card--new {
|
|
background: transparent;
|
|
border-style: dashed;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.project-card--new label {
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* --- project detail: cards ------------------------------------------ */
|
|
|
|
.cards {
|
|
list-style: none;
|
|
margin: 1rem 0 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.card-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.4rem 0.55rem;
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* Wraps the text + status badge -- the whole row is a link to the card's own
|
|
view, except the delete button (a sibling, so it isn't nested inside it). */
|
|
.card-row__link {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.3rem 0.4rem;
|
|
border-radius: var(--radius-sm);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card-row__link:hover {
|
|
background: var(--bg);
|
|
}
|
|
|
|
.card-row__text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* A small pill naming a card's status -- the card list row and the card's
|
|
own view both show one. */
|
|
.status-badge {
|
|
flex: none;
|
|
padding: 0.15rem 0.55rem;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.status-badge--none {
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
|
|
.card-row__delete {
|
|
flex: none;
|
|
border: none;
|
|
background: none;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.card-row__delete:hover {
|
|
color: var(--error);
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* --- project detail: header, inline title, manage menu ----------------- */
|
|
|
|
/* Grid, not flex, so the mobile reflow below is one explicit statement of
|
|
where things go (title under the buttons, full width, right-aligned)
|
|
rather than several flex properties working together to imply it. */
|
|
.project-head {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas: "title actions";
|
|
align-items: start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.project-head__title {
|
|
grid-area: title;
|
|
min-width: 0;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.project-head__actions {
|
|
grid-area: actions;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.project-head {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"actions"
|
|
"title";
|
|
}
|
|
|
|
.project-head__actions {
|
|
justify-self: end;
|
|
}
|
|
}
|
|
|
|
/* An arrow inline in a heading, right before the title text -- back to
|
|
wherever this page is "inside" of (dashboard, a project, ...). Used by
|
|
every heading that has one instead of a separate button, so they all
|
|
look and behave the same. */
|
|
.title-back {
|
|
display: inline-flex;
|
|
margin-right: 0.4rem;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.title-back:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.menu {
|
|
position: relative;
|
|
flex: none;
|
|
}
|
|
|
|
.menu__toggle {
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.35rem 0.7rem;
|
|
font: inherit;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu__toggle:hover {
|
|
border-color: var(--muted);
|
|
}
|
|
|
|
.menu__backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.menu__list {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 4px);
|
|
z-index: 20;
|
|
min-width: 10rem;
|
|
margin: 0;
|
|
padding: 0.25rem;
|
|
list-style: none;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.menu__item {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text);
|
|
font: inherit;
|
|
padding: 0.45rem 0.6rem;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu__item:hover {
|
|
background: var(--bg);
|
|
}
|
|
|
|
.menu__item--danger {
|
|
color: var(--error);
|
|
}
|
|
|
|
/* --- tabs -------------------------------------------------------------- */
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
margin: 1.25rem 0 1rem;
|
|
}
|
|
|
|
.tabs__tab {
|
|
border: none;
|
|
background: none;
|
|
font: inherit;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
padding: 0.5rem 0.9rem;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tabs__tab:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.tabs__tab--active {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
/* --- project configuration: status list ------------------------------- */
|
|
|
|
.config-section {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.config-section h2 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.status-list {
|
|
list-style: none;
|
|
margin: 1rem 0 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.5rem 0.6rem;
|
|
background: var(--surface);
|
|
cursor: grab;
|
|
}
|
|
|
|
.status-row--ghost {
|
|
opacity: var(--opacity-ghost);
|
|
}
|
|
|
|
.status-row__name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.status-row__delete {
|
|
flex: none;
|
|
border: none;
|
|
background: none;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.status-row__delete:hover:not(:disabled) {
|
|
color: var(--error);
|
|
}
|
|
|
|
.status-row__delete:disabled {
|
|
opacity: var(--opacity-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* An input with its submit button beside it (fit to its label text) rather
|
|
than below (full width, the plain .form pattern) -- the status "Add" form
|
|
and the project name form both use it. */
|
|
.field-row {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
/* :not(.btn-icon) -- an icon button (see below) sets its own compact size;
|
|
without the exclusion this would win the tie against it (same specificity,
|
|
later in the file) the same way ".form input" once beat "input:focus". */
|
|
.field-row button[type='submit']:not(.btn-icon) {
|
|
flex: none;
|
|
padding: 0.4rem 0.7rem;
|
|
font-size: 0.9rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.modal__field {
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
/* --- kanban board ---------------------------------------------------- */
|
|
|
|
.kanban {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: flex-start;
|
|
overflow-x: auto;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.kanban__col {
|
|
flex: 0 0 16rem;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.kanban__col--inbox {
|
|
background: var(--inbox-bg);
|
|
}
|
|
|
|
.kanban__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.6rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kanban__count {
|
|
color: var(--muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.kanban__cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
min-height: 3rem;
|
|
}
|
|
|
|
/* Empty column/inbox: a subtle drop target, styled like the dashboard's
|
|
"Create a project" tile (dashed border, transparent). :empty tracks the
|
|
real DOM child count, so this naturally steps aside for Sortable's own
|
|
ghost placeholder while something is dragged over it. */
|
|
.kanban__cards:empty {
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.kanban__cards:empty::before {
|
|
content: '⬇ Drop cards here';
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.kanban-card {
|
|
display: block;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.55rem 0.65rem;
|
|
font-size: 0.9rem;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
cursor: grab;
|
|
}
|
|
|
|
.kanban-card:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.kanban-card--ghost {
|
|
opacity: var(--opacity-ghost);
|
|
}
|
|
|
|
.kanban__new {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
/* --- confirmation modal --------------------------------------------------- */
|
|
|
|
.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.modal__dialog {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.modal__dialog h2 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.modal__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.6rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.btn-secondary,
|
|
.btn-danger {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.5rem 0.9rem;
|
|
font: inherit;
|
|
font-size: 0.95rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--error);
|
|
border-color: var(--error);
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.btn-secondary:disabled,
|
|
.btn-danger:disabled {
|
|
opacity: var(--opacity-disabled);
|
|
cursor: default;
|
|
}
|
|
|
|
.form {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
.form--new-card {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.25rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.form label {
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
button[type="submit"]:not(.btn-icon),
|
|
.btn-primary {
|
|
padding: 0.6rem 1rem;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
button[type="submit"]:disabled:not(.btn-icon),
|
|
.btn-primary:disabled {
|
|
opacity: var(--opacity-disabled);
|
|
cursor: progress;
|
|
}
|
|
|
|
/* A small square icon button, bordered like the compact field it sits
|
|
beside -- every "add to X" form (a kanban column, the inbox, the status
|
|
list, the "all tasks" new-card form) used a full "Add" label until there
|
|
were enough of them on screen at once to feel cluttered, then a borderless
|
|
ghost icon on its own looked adrift next to that field. Excluded
|
|
(":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
|
|
rather than out-specificity'd, so it isn't at the mercy of source order --
|
|
the same reasoning as .field's low specificity against input:focus. */
|
|
.btn-icon {
|
|
flex: none;
|
|
width: 2rem;
|
|
/* No explicit height -- .field-row/.kanban__new are flex rows with the
|
|
default align-items: stretch, so this fills the row to match its
|
|
compact field's height instead of guessing a value that has to be
|
|
kept in sync with it. */
|
|
padding: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--muted);
|
|
font-size: 1.4rem;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-icon:hover:not(:disabled) {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.btn-icon:disabled {
|
|
opacity: var(--opacity-disabled);
|
|
cursor: progress;
|
|
}
|
|
|
|
.link {
|
|
border: none;
|
|
background: none;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
font: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.hint {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.field-error,
|
|
.form-error {
|
|
color: var(--error);
|
|
font-size: 0.85rem;
|
|
}
|