mirror of
https://github.com/ttusk/leif.git
synced 2026-07-22 08:32:51 +00:00
1460 lines
28 KiB
CSS
1460 lines
28 KiB
CSS
/*
|
|
* Leif workspace
|
|
*
|
|
* The plugin deliberately inherits Obsidian's palette, typography, controls,
|
|
* and spacing rhythm. Leif adds hierarchy and layout, not a second theme.
|
|
*/
|
|
|
|
.leif-view {
|
|
--leif-surface: var(--background-secondary);
|
|
--leif-surface-raised: var(--background-primary-alt);
|
|
--leif-accent: var(--interactive-accent);
|
|
--leif-accent-text: var(--text-on-accent);
|
|
--leif-text: var(--text-normal);
|
|
--leif-text-muted: var(--text-muted);
|
|
--leif-border: var(--background-modifier-border);
|
|
--leif-border-hover: var(--background-modifier-border-hover);
|
|
--leif-shadow: var(--shadow-s);
|
|
box-sizing: border-box;
|
|
container-name: leif;
|
|
container-type: inline-size;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: clamp(16px, 2.2vw, 28px);
|
|
background: var(--background-primary);
|
|
color: var(--leif-text);
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.leif-view *,
|
|
.leif-view *::before,
|
|
.leif-view *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.leif-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(20px, 2.4vw, 30px);
|
|
width: 100%;
|
|
max-width: 1240px;
|
|
min-height: 0;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header */
|
|
|
|
.leif-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-4);
|
|
min-width: 0;
|
|
padding-bottom: var(--size-4-4);
|
|
border-bottom: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-title {
|
|
margin: 0;
|
|
color: var(--leif-text);
|
|
font-size: clamp(21px, 2.4vw, 27px);
|
|
font-weight: var(--font-semibold);
|
|
line-height: var(--line-height-tight);
|
|
letter-spacing: -0.015em;
|
|
}
|
|
|
|
.leif-title .leif-text-with-icon {
|
|
gap: 10px;
|
|
}
|
|
|
|
.leif-title .leif-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 6px;
|
|
border-radius: var(--radius-s);
|
|
background: var(--leif-accent);
|
|
color: var(--leif-accent-text);
|
|
}
|
|
|
|
.leif-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--size-4-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: min(360px, 42vw);
|
|
min-height: 28px;
|
|
padding: 3px 9px;
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-l);
|
|
background: var(--leif-surface-raised);
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.leif-badge .leif-text-with-icon {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.leif-badge .leif-text-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Workspace and navigation */
|
|
|
|
.leif-workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(148px, 184px) minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: clamp(24px, 3vw, 42px);
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-navigation {
|
|
position: sticky;
|
|
top: var(--size-4-4);
|
|
align-self: start;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-navigation-label {
|
|
display: block;
|
|
margin: 0 10px 7px;
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.leif-tab-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-tab-button {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 9px;
|
|
width: 100%;
|
|
min-height: 40px;
|
|
margin: 0;
|
|
padding: 7px 10px;
|
|
border: 0;
|
|
border-radius: var(--radius-s);
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: var(--leif-text-muted);
|
|
font-family: var(--font-interface);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--font-medium);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.leif-tab-button::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 8px auto 8px 0;
|
|
width: 3px;
|
|
border-radius: 0 var(--radius-s) var(--radius-s) 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.leif-tab-button:hover {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--leif-text);
|
|
}
|
|
|
|
.leif-tab-button:focus-visible {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
.leif-tab-button.is-active {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.leif-tab-button.is-active::before {
|
|
background: var(--leif-accent);
|
|
}
|
|
|
|
.leif-tab-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.leif-tab-button.is-active .leif-tab-icon {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.leif-tab-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Shared content primitives */
|
|
|
|
.leif-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-4);
|
|
min-width: 0;
|
|
width: 100%;
|
|
max-width: 980px;
|
|
padding-bottom: var(--size-4-8);
|
|
outline: 0;
|
|
}
|
|
|
|
.leif-body:focus-visible {
|
|
border-radius: var(--radius-s);
|
|
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
|
|
}
|
|
|
|
.leif-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.leif-grid {
|
|
display: grid;
|
|
gap: var(--size-4-3);
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-grid-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.leif-grid-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.leif-text-with-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-text-label {
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1em;
|
|
height: 1em;
|
|
flex: 0 0 auto;
|
|
line-height: 0;
|
|
}
|
|
|
|
.leif-icon > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.leif-paragraph {
|
|
max-width: 68ch;
|
|
margin: 0;
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-small);
|
|
line-height: var(--line-height-normal);
|
|
}
|
|
|
|
.leif-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-3);
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-section-title,
|
|
.leif-section-subtitle {
|
|
margin: 0;
|
|
color: var(--leif-text);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.leif-section-title {
|
|
font-size: clamp(20px, 2vw, 25px);
|
|
font-weight: var(--font-semibold);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.leif-section-subtitle {
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.leif-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
min-width: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
form.leif-card,
|
|
.leif-card.is-editing,
|
|
.leif-contest-card.is-editing {
|
|
padding: var(--size-4-4);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border-hover);
|
|
border-radius: var(--radius-m);
|
|
border-color: var(--background-modifier-border-hover);
|
|
box-shadow: var(--leif-shadow);
|
|
}
|
|
|
|
.leif-empty-state {
|
|
align-items: flex-start;
|
|
padding-block: var(--size-4-6);
|
|
border: 1px dashed var(--leif-border);
|
|
border-style: dashed;
|
|
border-radius: var(--radius-m);
|
|
padding-inline: var(--size-4-4);
|
|
background: transparent;
|
|
}
|
|
|
|
.leif-empty-state strong {
|
|
font-size: var(--font-ui-medium);
|
|
}
|
|
|
|
.leif-card-subsection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
margin-top: var(--size-2-2);
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-card-header,
|
|
.leif-resource-detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
/* Forms and actions: controls themselves remain native Obsidian controls. */
|
|
|
|
.leif-field-stack,
|
|
.leif-material-field,
|
|
.leif-url-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-field-label,
|
|
.leif-material-field-label {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.leif-field-stack input,
|
|
.leif-field-stack select,
|
|
.leif-field-stack textarea,
|
|
.leif-material-field input,
|
|
.leif-material-field select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-url-control {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-url-control .leif-icon {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset-inline-start: 10px;
|
|
color: var(--leif-text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.leif-url-control input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-inline-start: 32px;
|
|
}
|
|
|
|
.leif-inline-actions,
|
|
.leif-form-actions,
|
|
.leif-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.leif-inline-actions-compact {
|
|
gap: 4px;
|
|
}
|
|
|
|
.leif-form-actions {
|
|
justify-content: flex-end;
|
|
padding-top: var(--size-2-2);
|
|
}
|
|
|
|
.leif-actions-cell {
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.leif-subject-picker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-4-3);
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.leif-subject-picker-label {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.leif-subject-picker select {
|
|
max-width: min(320px, 62vw);
|
|
}
|
|
|
|
/* Metrics and status */
|
|
|
|
.leif-key-value {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-3);
|
|
padding-block: var(--size-2-3);
|
|
border-bottom: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-key-value:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.leif-key-label,
|
|
.leif-metric-label {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.leif-key-value-text {
|
|
min-width: 0;
|
|
text-align: right;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-metric {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-metric-value {
|
|
color: var(--leif-text);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--font-medium);
|
|
line-height: var(--line-height-tight);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-status-active,
|
|
.leif-status-inactive {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: fit-content;
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-l);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.leif-status-active {
|
|
background: var(--background-modifier-success);
|
|
color: var(--text-success);
|
|
}
|
|
|
|
.leif-status-inactive {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--leif-text-muted);
|
|
}
|
|
|
|
/* Tables */
|
|
|
|
.leif-table-wrapper {
|
|
width: 100%;
|
|
max-height: min(58vh, 620px);
|
|
overflow: auto;
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.leif-table {
|
|
width: 100%;
|
|
min-width: 640px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: auto;
|
|
}
|
|
|
|
.leif-table th,
|
|
.leif-table td {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--leif-border);
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-table th {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.leif-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: var(--leif-surface);
|
|
box-shadow: 0 1px 0 var(--leif-border);
|
|
}
|
|
|
|
.leif-table tbody tr:last-child > td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.leif-table tbody tr:not(.leif-detail-row):hover > td {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.leif-editing-row > td,
|
|
.leif-detail-row > td {
|
|
background: var(--leif-surface-raised);
|
|
}
|
|
|
|
.leif-detail-row > td {
|
|
padding: var(--size-4-4);
|
|
}
|
|
|
|
.leif-detail-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.leif-detail-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.leif-detail-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-3);
|
|
min-width: 0;
|
|
padding-block: 9px;
|
|
border-bottom: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-detail-list-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.leif-expand-button {
|
|
color: var(--leif-text-muted);
|
|
}
|
|
|
|
.leif-order-control,
|
|
.leif-order-actions,
|
|
.leif-material-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-order-number {
|
|
min-width: 2ch;
|
|
color: var(--leif-text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.leif-cycle-table-title,
|
|
.leif-resource-table-title,
|
|
.leif-topic-title {
|
|
color: var(--leif-text);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.leif-resource-title-cell,
|
|
.leif-topic-title-cell {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.leif-resource-edit-input,
|
|
.leif-topic-name-input {
|
|
width: 100%;
|
|
min-width: 150px;
|
|
}
|
|
|
|
/* Dashboard focus panel — Leif's one signature surface. */
|
|
|
|
.leif-next-activity {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1.25fr) minmax(240px, 1fr);
|
|
gap: var(--size-4-5);
|
|
min-width: 0;
|
|
padding: clamp(18px, 2.4vw, 26px);
|
|
overflow: hidden;
|
|
background: var(--leif-surface);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.leif-next-activity-intro,
|
|
.leif-next-activity-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-next-activity-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-content: start;
|
|
gap: var(--size-4-3);
|
|
padding-left: var(--size-4-4);
|
|
border-left: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-next-activity-action {
|
|
grid-column: 1 / -1;
|
|
justify-self: start;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.leif-next-activity-label,
|
|
.leif-cycle-context-label {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
letter-spacing: 0.055em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.leif-next-activity-subject {
|
|
color: var(--leif-text);
|
|
font-size: clamp(22px, 3.4vw, 34px);
|
|
font-weight: var(--font-semibold);
|
|
line-height: 1.12;
|
|
letter-spacing: -0.025em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-next-activity-item,
|
|
.leif-next-activity-next {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-small);
|
|
line-height: var(--line-height-normal);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-next-activity-next {
|
|
grid-column: 1 / -1;
|
|
padding-top: var(--size-2-2);
|
|
border-top: 0;
|
|
}
|
|
|
|
.leif-next-activity-chip {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 5px;
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.leif-next-activity-chip-label {
|
|
color: var(--leif-text-muted);
|
|
}
|
|
|
|
.leif-next-activity-chip-value {
|
|
color: var(--leif-text);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
/* Sessions */
|
|
|
|
.leif-cycle-context {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-4-3);
|
|
min-width: 0;
|
|
padding: 12px var(--size-4-4);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--leif-surface);
|
|
}
|
|
|
|
.leif-cycle-context-value {
|
|
color: var(--leif-text);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.leif-cycle-context-sublabel,
|
|
.leif-cycle-context-next {
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.leif-cycle-context-next {
|
|
order: 2;
|
|
flex-basis: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.leif-cycle-context-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
order: 1;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.leif-session-filters {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(120px, 0.7fr));
|
|
align-items: end;
|
|
gap: var(--size-4-3);
|
|
padding: var(--size-4-3);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--leif-surface);
|
|
}
|
|
|
|
.leif-session-feedback {
|
|
padding: 9px 12px;
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-modifier-success);
|
|
color: var(--text-success);
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.leif-session-result-editor {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: var(--size-2-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Progress */
|
|
|
|
.leif-progress-bar-container,
|
|
.leif-session-progress,
|
|
.leif-pages-cell {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-progress-bar {
|
|
width: 100%;
|
|
min-width: 64px;
|
|
max-width: 320px;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
background: var(--background-modifier-border);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.leif-progress-fill {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--leif-accent);
|
|
border-radius: inherit;
|
|
transition: width 180ms ease-out;
|
|
}
|
|
|
|
.leif-progress-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
margin-top: 5px;
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.leif-progress-complete {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--text-success);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.leif-progress-value {
|
|
color: var(--leif-text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.leif-pages-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* Contest cards */
|
|
|
|
.leif-cycle-summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.leif-contest-list,
|
|
.leif-wall-snapshot-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.leif-contest-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr);
|
|
gap: var(--size-4-4) var(--size-4-5);
|
|
min-width: 0;
|
|
padding: var(--size-4-4);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-m);
|
|
background: var(--leif-surface-raised);
|
|
}
|
|
|
|
.leif-contest-card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--size-4-3);
|
|
grid-column: 1;
|
|
}
|
|
|
|
.leif-contest-card-title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-contest-card-title {
|
|
color: var(--leif-text);
|
|
font-size: var(--font-ui-medium);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-contest-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--size-4-3);
|
|
grid-column: 1;
|
|
}
|
|
|
|
.leif-contest-notes {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
margin: 0;
|
|
padding-left: var(--size-4-4);
|
|
border-left: 1px solid var(--leif-border);
|
|
color: var(--leif-text-muted);
|
|
line-height: var(--line-height-normal);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.leif-contest-edit-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
/* Resource and topic details */
|
|
|
|
.leif-resource-detail-title-group {
|
|
min-width: 0;
|
|
}
|
|
|
|
.leif-material-info {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.leif-material-type {
|
|
flex: 0 0 auto;
|
|
color: var(--leif-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.leif-material-title {
|
|
min-width: 0;
|
|
color: var(--leif-text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.leif-material-open-link {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.leif-resource-material-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.leif-resource-material-section + .leif-resource-material-section {
|
|
padding-top: var(--size-4-3);
|
|
border-top: 1px solid var(--leif-border);
|
|
}
|
|
|
|
.leif-resource-material-editor-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.leif-resource-material-editor {
|
|
display: grid;
|
|
grid-template-columns: minmax(130px, 0.6fr) minmax(180px, 1fr) minmax(220px, 1.2fr) auto;
|
|
align-items: end;
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.leif-resource-material-editor-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.leif-resource-material-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(130px, 0.6fr) minmax(180px, 1fr) minmax(220px, 1.2fr) auto;
|
|
align-items: end;
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.leif-topic-question-editor,
|
|
.leif-topic-notebook-editor {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(120px, 1fr));
|
|
gap: var(--size-2-3);
|
|
}
|
|
|
|
.leif-topic-notebook-editor-stacked {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Wall */
|
|
|
|
.leif-wall-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-4);
|
|
}
|
|
|
|
.leif-wall-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-4-3);
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.leif-wall-primary {
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.leif-wall-notes {
|
|
width: 100%;
|
|
min-height: 280px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.leif-wall-reference-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
.leif-wall-save {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.leif-wall-snapshot-card {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.3fr);
|
|
align-items: center;
|
|
gap: var(--size-4-4);
|
|
padding: var(--size-4-3) var(--size-4-4);
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--leif-surface-raised);
|
|
}
|
|
|
|
.leif-wall-snapshot-title-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.leif-wall-snapshot-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--size-4-3);
|
|
}
|
|
|
|
/* Disclosure */
|
|
|
|
.leif-disclosure {
|
|
border: 1px solid var(--leif-border);
|
|
border-radius: var(--radius-s);
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.leif-disclosure-summary {
|
|
padding: 9px 12px;
|
|
color: var(--leif-text);
|
|
font-weight: var(--font-medium);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.leif-disclosure[open] .leif-disclosure-summary {
|
|
border-bottom: 1px solid var(--leif-border);
|
|
}
|
|
|
|
/* ResizeObserver classes are the reliable source for Obsidian split panes. */
|
|
|
|
.leif-view.is-narrow .leif-workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--size-4-4);
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-navigation {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
margin-inline: -4px;
|
|
padding: 4px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-navigation-label {
|
|
display: none;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-tab-bar {
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
padding-bottom: 3px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-tab-button {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
min-width: max-content;
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-tab-button::before {
|
|
inset: auto 9px 0;
|
|
width: auto;
|
|
height: 3px;
|
|
border-radius: var(--radius-s) var(--radius-s) 0 0;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-next-activity,
|
|
.leif-view.is-narrow .leif-contest-card,
|
|
.leif-view.is-narrow .leif-wall-snapshot-card {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-next-activity-meta {
|
|
padding-top: var(--size-4-3);
|
|
padding-left: 0;
|
|
border-top: 1px solid var(--leif-border);
|
|
border-left: 0;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-contest-card-header,
|
|
.leif-view.is-narrow .leif-contest-meta,
|
|
.leif-view.is-narrow .leif-contest-notes {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-contest-notes {
|
|
grid-row: auto;
|
|
padding-top: var(--size-4-3);
|
|
padding-left: 0;
|
|
border-top: 1px solid var(--leif-border);
|
|
border-left: 0;
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-session-filters,
|
|
.leif-view.is-narrow .leif-contest-edit-form,
|
|
.leif-view.is-narrow .leif-resource-material-editor,
|
|
.leif-view.is-narrow .leif-resource-material-form {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.leif-view.is-narrow .leif-inline-actions button,
|
|
.leif-view.is-narrow .leif-form-actions button {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.leif-view.is-compact {
|
|
padding: 12px;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-header {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-title-group .leif-paragraph,
|
|
.leif-view.is-compact .leif-tab-label {
|
|
display: none;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-header-actions {
|
|
max-width: 48%;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-badge {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-tab-button {
|
|
min-width: 42px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-grid-2,
|
|
.leif-view.is-compact .leif-grid-3,
|
|
.leif-view.is-compact .leif-next-activity-meta,
|
|
.leif-view.is-compact .leif-session-filters,
|
|
.leif-view.is-compact .leif-contest-edit-form,
|
|
.leif-view.is-compact .leif-resource-material-editor,
|
|
.leif-view.is-compact .leif-resource-material-form,
|
|
.leif-view.is-compact .leif-topic-question-editor,
|
|
.leif-view.is-compact .leif-topic-notebook-editor,
|
|
.leif-view.is-compact .leif-wall-reference-grid,
|
|
.leif-view.is-compact .leif-wall-snapshot-meta {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.leif-view.is-compact .leif-section-header,
|
|
.leif-view.is-compact .leif-card-header,
|
|
.leif-view.is-compact .leif-resource-detail-header,
|
|
.leif-view.is-compact .leif-detail-list-item,
|
|
.leif-view.is-compact .leif-cycle-context {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-cycle-context-next {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-cycle-context-actions {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-cycle-context-actions button {
|
|
width: 100%;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-form-actions {
|
|
flex-direction: column-reverse;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-form-actions button {
|
|
width: 100%;
|
|
}
|
|
|
|
.leif-view.is-compact .leif-contest-card,
|
|
.leif-view.is-compact .leif-next-activity {
|
|
padding: var(--size-4-3);
|
|
}
|
|
|
|
/* Pane-responsive layout. Container queries respond to Obsidian split panes. */
|
|
|
|
@container leif (max-width: 760px) {
|
|
.leif-workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--size-4-4);
|
|
}
|
|
|
|
.leif-navigation {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
margin-inline: -4px;
|
|
padding: 4px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.leif-navigation-label {
|
|
display: none;
|
|
}
|
|
|
|
.leif-tab-bar {
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
padding-bottom: 3px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.leif-tab-button {
|
|
flex: 0 0 auto;
|
|
width: auto;
|
|
min-width: max-content;
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
.leif-tab-button::before {
|
|
inset: auto 9px 0;
|
|
width: auto;
|
|
height: 3px;
|
|
border-radius: var(--radius-s) var(--radius-s) 0 0;
|
|
}
|
|
|
|
.leif-next-activity,
|
|
.leif-contest-card {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.leif-next-activity-meta {
|
|
padding-top: var(--size-4-3);
|
|
padding-left: 0;
|
|
border-top: 1px solid var(--leif-border);
|
|
border-left: 0;
|
|
}
|
|
|
|
.leif-contest-card-header,
|
|
.leif-contest-meta,
|
|
.leif-contest-notes {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.leif-contest-notes {
|
|
grid-row: auto;
|
|
padding-top: var(--size-4-3);
|
|
padding-left: 0;
|
|
border-top: 1px solid var(--leif-border);
|
|
border-left: 0;
|
|
}
|
|
|
|
.leif-session-filters,
|
|
.leif-contest-edit-form,
|
|
.leif-resource-material-editor,
|
|
.leif-resource-material-form {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.leif-wall-snapshot-card {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.leif-inline-actions button,
|
|
.leif-form-actions button {
|
|
min-height: 40px;
|
|
}
|
|
}
|
|
|
|
/* Viewport fallback for Obsidian versions without container-query support. */
|
|
|
|
@media (max-width: 760px) {
|
|
.leif-workspace {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.leif-tab-bar {
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.leif-inline-actions button,
|
|
.leif-form-actions button {
|
|
min-height: 40px;
|
|
}
|
|
}
|
|
|
|
@container leif (max-width: 520px) {
|
|
.leif-view {
|
|
padding: 12px;
|
|
}
|
|
|
|
.leif-header {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.leif-title-group .leif-paragraph,
|
|
.leif-navigation-label {
|
|
display: none;
|
|
}
|
|
|
|
.leif-header-actions {
|
|
max-width: 48%;
|
|
}
|
|
|
|
.leif-badge {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.leif-tab-label {
|
|
display: none;
|
|
}
|
|
|
|
.leif-tab-button {
|
|
min-width: 42px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.leif-grid-2,
|
|
.leif-grid-3,
|
|
.leif-next-activity-meta,
|
|
.leif-session-filters,
|
|
.leif-contest-edit-form,
|
|
.leif-resource-material-editor,
|
|
.leif-resource-material-form,
|
|
.leif-topic-question-editor,
|
|
.leif-topic-notebook-editor,
|
|
.leif-wall-reference-grid,
|
|
.leif-wall-snapshot-meta {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.leif-section-header,
|
|
.leif-card-header,
|
|
.leif-resource-detail-header,
|
|
.leif-detail-list-item,
|
|
.leif-cycle-context {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.leif-cycle-context-next {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.leif-form-actions {
|
|
flex-direction: column-reverse;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.leif-form-actions button {
|
|
width: 100%;
|
|
}
|
|
|
|
.leif-contest-card,
|
|
.leif-next-activity {
|
|
padding: var(--size-4-3);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.leif-form-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.leif-view *,
|
|
.leif-view *::before,
|
|
.leif-view *::after {
|
|
scroll-behavior: auto;
|
|
transition-duration: 0.01ms;
|
|
animation-duration: 0.01ms;
|
|
animation-iteration-count: 1;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.leif-tab-button.is-active,
|
|
.leif-next-activity,
|
|
.leif-table-wrapper {
|
|
border: 1px solid CanvasText;
|
|
}
|
|
|
|
.leif-tab-button.is-active::before {
|
|
background: Highlight;
|
|
}
|
|
}
|