mirror of
https://github.com/ttusk/leif.git
synced 2026-07-22 08:32:51 +00:00
6ac9f3b87b
- Tab bar: role=tablist/tab, aria-selected, roving tabindex, arrow-key navigation and Enter/Space activation. - Modal: role=dialog, aria-modal, aria-labelledby, focus trap, Escape to close, focus restore on close. - Icon-only buttons now expose aria-label. - Replace native window.confirm() deletes with an Obsidian-style confirm dialog (ContestsTab, ItemsTab, SessionsTab, TopicsTab). - Add visible :focus-visible styles for buttons, inputs and selects. Closes #3
741 lines
12 KiB
CSS
741 lines
12 KiB
CSS
.leif-view {
|
|
--leif-accent: var(--interactive-accent);
|
|
--leif-accent-text: var(--text-on-accent);
|
|
--leif-border: var(--background-modifier-border);
|
|
color: var(--text-normal);
|
|
padding: 16px;
|
|
}
|
|
|
|
.leif-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.leif-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.leif-title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.leif-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.leif-title {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.leif-text-with-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-text-label {
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.leif-title .leif-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.leif-section-title .leif-icon,
|
|
.leif-section-subtitle .leif-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.leif-badge .leif-icon,
|
|
.leif-disclosure-summary .leif-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.leif-paragraph {
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-tab-bar {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
gap: 8px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-tab-button,
|
|
.leif-button,
|
|
.leif-primary-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--leif-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.leif-tab-button:focus-visible,
|
|
.leif-button:focus-visible,
|
|
.leif-primary-button:focus-visible,
|
|
.leif-icon-button:focus-visible,
|
|
.leif-input:focus-visible,
|
|
.leif-select:focus-visible,
|
|
.leif-textarea:focus-visible {
|
|
outline: 2px solid var(--text-accent, #7c3aed);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.leif-icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--leif-border);
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.leif-icon-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.leif-icon-button-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.leif-tab-button.is-active,
|
|
.leif-primary-button {
|
|
background: var(--leif-accent);
|
|
color: var(--leif-accent-text);
|
|
border-color: var(--leif-accent);
|
|
}
|
|
|
|
.leif-body,
|
|
.leif-stack,
|
|
.leif-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.leif-grid {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.leif-grid-2 {
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
}
|
|
|
|
.leif-grid-3 {
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
}
|
|
|
|
.leif-card,
|
|
.leif-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.leif-card-subsection {
|
|
border-top: 1px solid var(--leif-border);
|
|
padding-top: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.leif-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.leif-section-title,
|
|
.leif-section-subtitle {
|
|
margin: 0;
|
|
}
|
|
|
|
.leif-section-subtitle {
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--leif-border);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.leif-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.leif-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-label-text {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-input,
|
|
.leif-select,
|
|
.leif-textarea {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 38px;
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: 8px;
|
|
padding: 9px 10px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
box-sizing: border-box;
|
|
font: inherit;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.leif-textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.leif-textarea-inline {
|
|
width: min(100%, 180px);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.leif-textarea-notes {
|
|
width: min(100%, 240px);
|
|
min-height: 72px;
|
|
}
|
|
|
|
.leif-inline-actions,
|
|
.leif-inline-form,
|
|
.leif-list-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.leif-inline-actions-compact {
|
|
gap: 6px;
|
|
}
|
|
|
|
.leif-list-row {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.leif-key-value {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 6px 0;
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-key-value:first-of-type {
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.leif-key-label {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-key-value-text {
|
|
text-align: right;
|
|
}
|
|
|
|
.leif-toolbar {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.leif-form-sheet {
|
|
overflow: visible;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.leif-form-compact {
|
|
max-width: 520px;
|
|
}
|
|
|
|
.leif-disclosure {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.leif-disclosure-summary {
|
|
cursor: pointer;
|
|
padding: 8px 0;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.leif-label.is-disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.leif-table-followup {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.leif-table-wrapper {
|
|
width: 100%;
|
|
max-height: min(52vh, 520px);
|
|
overflow: auto;
|
|
border-top: 1px solid var(--leif-border);
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* Remove duplicate border when table-wrapper is directly below a card subtitle */
|
|
.leif-section-subtitle + .leif-table-wrapper,
|
|
.leif-section-subtitle + .leif-paragraph + .leif-table-wrapper,
|
|
.leif-section-subtitle + .leif-empty-state + .leif-table-wrapper {
|
|
border-top: 0;
|
|
}
|
|
|
|
.leif-editing-row {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.leif-editing-row .leif-input-compact {
|
|
width: 80px;
|
|
min-height: 28px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.leif-detail-row {
|
|
background: var(--background-secondary);
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-detail-row td {
|
|
padding: 12px;
|
|
}
|
|
|
|
.leif-detail-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.leif-detail-form {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.leif-detail-form .leif-input,
|
|
.leif-detail-form .leif-select {
|
|
width: auto;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.leif-detail-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.leif-detail-list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
background: var(--background-primary);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.leif-expand-button {
|
|
color: var(--text-muted);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.leif-expand-button:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.leif-status-cell {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.leif-status-cell:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.leif-status-active {
|
|
color: var(--interactive-success);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.leif-status-inactive {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-edit-cell {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Dashboard cycle cards */
|
|
.leif-cycle-card {
|
|
padding: 16px;
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: 8px;
|
|
background: var(--background-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.leif-cycle-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.leif-cycle-label {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.leif-cycle-value {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.leif-cycle-next {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-cycle-next-label {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-cycle-next-value {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Sessions cycle context */
|
|
.leif-cycle-context {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.leif-cycle-context-label {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-cycle-context-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.leif-cycle-context-sublabel {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-left: 8px;
|
|
padding-left: 8px;
|
|
border-left: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-cycle-context-next {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.leif-cycle-action {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.leif-create-form {
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.leif-form-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.leif-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.leif-table th,
|
|
.leif-table td {
|
|
border-top: 1px solid var(--leif-border);
|
|
padding: 8px 10px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-table th {
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.leif-table thead th {
|
|
border-top: 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
box-shadow: 0 1px 0 var(--leif-border);
|
|
}
|
|
|
|
/* Progress bars */
|
|
.leif-progress-bar {
|
|
width: 100%;
|
|
min-width: 60px;
|
|
height: 6px;
|
|
background: var(--background-modifier-border);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.leif-progress-fill {
|
|
height: 100%;
|
|
background: var(--interactive-accent);
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.leif-progress-fill.is-complete {
|
|
background: var(--interactive-success);
|
|
}
|
|
|
|
.leif-progress-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.leif-progress-percentage {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.leif-progress-value {
|
|
color: var(--text-normal);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.leif-pages-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-pages-completed {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: var(--interactive-success);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.leif-pages-read {
|
|
font-size: 13px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.leif-pages-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-session-progress {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Modal */
|
|
.leif-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 16px;
|
|
}
|
|
|
|
.leif-modal-card {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 520px;
|
|
max-height: 90vh;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.leif-modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-modal-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.leif-modal-body {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.leif-modal-body form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.leif-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
padding: 16px 20px;
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.leif-view {
|
|
padding: 14px;
|
|
}
|
|
|
|
.leif-header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.leif-grid-2,
|
|
.leif-grid-3 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.leif-list-row,
|
|
.leif-key-value {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.leif-key-value-text {
|
|
text-align: left;
|
|
}
|
|
|
|
.leif-form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.leif-modal-message {
|
|
margin: 0;
|
|
color: var(--text-normal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.leif-modal-card:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.leif-modal-card [role="dialog"]:focus-visible {
|
|
outline: none;
|
|
}
|