mirror of
https://github.com/algometrix/second_brain_builder.git
synced 2026-07-22 08:29:32 +00:00
768e17acea
The .ch-hidden hide rule was overridden by .ch-card's display: flex, which has equal specificity but appears later in the stylesheet, so search never visually filtered the mode grid. Mark the hide rule !important. Enter in the search box now selects the first visible mode card. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
549 lines
10 KiB
CSS
549 lines
10 KiB
CSS
/* Second Brain Builder — all colors and fonts derive from Obsidian theme
|
|
variables so the UI adapts to any community theme. The signature element
|
|
is the "book spine": a 3px accent bar on the left edge of a selected mode
|
|
card, echoing pulling a book off a shelf. */
|
|
|
|
/* ─── Shared modal shell ───────────────────────────────────────── */
|
|
|
|
.ch-modal {
|
|
max-width: 620px;
|
|
}
|
|
|
|
.ch-modal.ch-modal-wide {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.ch-modal .modal-content {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.ch-modal .modal-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Form field captions read as eyebrows: small, tracked, quiet. */
|
|
.ch-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ch-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ch-search {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* !important so this wins over .ch-card's display: flex, which has equal
|
|
specificity but appears later in the sheet. */
|
|
.ch-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ─── Mode picker grid ─────────────────────────────────────────── */
|
|
|
|
.ch-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-bottom: 14px;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
padding: 2px 4px 2px 2px;
|
|
}
|
|
|
|
.ch-grid.ch-grid-3col {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
.ch-card {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 9px 12px 9px 14px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
|
|
}
|
|
|
|
/* The spine: hidden until the card is selected. */
|
|
.ch-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: var(--interactive-accent);
|
|
opacity: 0;
|
|
transition: opacity 0.12s ease;
|
|
}
|
|
|
|
.ch-card:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
border-color: var(--interactive-accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ch-card.is-selected {
|
|
border-color: var(--interactive-accent);
|
|
background-color: color-mix(in srgb, var(--interactive-accent) 10%, transparent);
|
|
}
|
|
|
|
.ch-card.is-selected::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ch-card.is-selected .ch-card-name {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.ch-card-icon {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ch-card.is-selected .ch-card-icon {
|
|
color: var(--interactive-accent);
|
|
}
|
|
|
|
.ch-card-body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.ch-card-name {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.ch-card-desc {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
line-height: 1.35;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.ch-card-checkbox {
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ch-empty {
|
|
padding: 20px 16px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* ─── Modal form elements ──────────────────────────────────────── */
|
|
|
|
.ch-flow {
|
|
background: var(--background-secondary);
|
|
border-left: 3px solid var(--interactive-accent);
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 14px;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.ch-flow-selection {
|
|
font-style: italic;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ch-preview-list {
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ch-preview-item {
|
|
font-family: var(--font-monospace);
|
|
font-size: 12px;
|
|
color: var(--text-normal);
|
|
padding: 2px 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ch-preview-item::before {
|
|
content: "+ ";
|
|
color: var(--color-green, var(--interactive-accent));
|
|
}
|
|
|
|
.ch-preview-note {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 6px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.ch-sep {
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
padding-top: 12px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.ch-input {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ch-textarea {
|
|
width: 100%;
|
|
min-height: 50px;
|
|
margin-bottom: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.ch-textarea.ch-textarea-sm {
|
|
min-height: 80px;
|
|
}
|
|
|
|
.ch-textarea.ch-textarea-md {
|
|
min-height: 100px;
|
|
}
|
|
|
|
.ch-textarea.ch-textarea-lg {
|
|
min-height: 120px;
|
|
}
|
|
|
|
.ch-textarea.ch-textarea-xl {
|
|
min-height: 160px;
|
|
}
|
|
|
|
.ch-btn-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ch-format-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.ch-backlink-info {
|
|
padding: 8px 12px;
|
|
background: var(--background-secondary);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ch-existing-list {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
max-height: 80px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ─── Queue status modal ───────────────────────────────────────── */
|
|
|
|
.ch-queue-wrapper {
|
|
padding: 8px;
|
|
min-width: 500px;
|
|
}
|
|
|
|
.ch-queue-header {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ch-queue-title {
|
|
display: inline;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Activity badge: the pulsing dot encodes "work in progress". */
|
|
.ch-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--text-on-accent);
|
|
background-color: var(--interactive-accent);
|
|
padding: 2px 10px;
|
|
border-radius: 10px;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ch-badge::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
animation: ch-pulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ch-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
.ch-queue-timer {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.ch-section-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ch-section-label.ch-label-error {
|
|
color: var(--text-error);
|
|
}
|
|
|
|
.ch-section-label.ch-label-success {
|
|
color: var(--text-success);
|
|
}
|
|
|
|
/* The live output pane is a process log; set it in the theme's mono face. */
|
|
.ch-queue-preview {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
padding: 10px 12px;
|
|
font-family: var(--font-monospace);
|
|
font-size: 11.5px;
|
|
line-height: 1.5;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
background-color: var(--background-secondary);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ch-queue-list {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.ch-queue-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4px 6px;
|
|
margin: 0 -6px;
|
|
gap: 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ch-queue-row:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.ch-row-name {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ch-row-name.ch-row-name-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ch-completed-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 3px 6px;
|
|
margin: 0 -6px;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ch-row-stats {
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.ch-more-note {
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.ch-btn-small {
|
|
font-size: 12px;
|
|
padding: 2px 10px;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 5px;
|
|
color: var(--text-muted);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ch-btn-small:hover {
|
|
color: var(--text-normal);
|
|
border-color: var(--interactive-accent);
|
|
background: transparent;
|
|
}
|
|
|
|
.ch-queue-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ch-queue-actions > button {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ─── Log viewer modal ─────────────────────────────────────────── */
|
|
|
|
.ch-log-btn-row {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ch-log-pre {
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
padding: 8px 10px;
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* ─── Settings tab ─────────────────────────────────────────────── */
|
|
|
|
.ch-rec-card {
|
|
border-left: 3px solid var(--interactive-accent);
|
|
padding-left: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ch-strong-block {
|
|
display: block;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.ch-strong-block.ch-gap-below {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ch-strong-block.ch-gap-above {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ch-muted-note {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ch-settings-table {
|
|
width: 100%;
|
|
font-size: 13px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.ch-settings-table th {
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ch-settings-table th,
|
|
.ch-settings-table td {
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.ch-guide {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ch-guide-step {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.ch-guide-code {
|
|
display: block;
|
|
padding: 4px 8px;
|
|
background-color: var(--background-secondary);
|
|
border-radius: 4px;
|
|
font-family: var(--font-monospace);
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.ch-platform-card {
|
|
margin-bottom: 12px;
|
|
padding: 8px 12px;
|
|
background-color: var(--background-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.ch-platform-card ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.ch-custom-mode {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ch-full-width-input {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ─── Reduced motion ───────────────────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ch-card,
|
|
.ch-card::before {
|
|
transition: none;
|
|
}
|
|
|
|
.ch-card:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.ch-badge::before {
|
|
animation: none;
|
|
}
|
|
}
|