openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Notizen — automatische Textkontrastfarbe + Formatierungs-Toolbar

Browse Source 
Kontrastproblem: Titel, Inhalt und Footer-Elemente der Notizkarten
überschrieben die Inline-Textfarbe mit festen Token-Werten. Jetzt
erben alle Elemente die adaptiv berechnete Farbe (dunkel auf hellen
Karten, hell auf dunklen).

Formatierungs-Toolbar: Fett, Kursiv und Liste als Buttons über dem
Textfeld im Editor. Fügt Markdown-Syntax ein, unterstützt Selektion
und Tastaturkürzel (Strg+B, Strg+I). Markdown-Rendering bleibt
unverändert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-27 09:05:28 +01:00
parent cacec64777
commit 2f0b0c05ec
3 changed files with 138 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/notes.css
+59 -6
View File
@@ -101,7 +101,7 @@
position: relative;
opacity: 0;
transition: opacity var(--transition-fast), background-color var(--transition-fast);
color: var(--color-text-primary);
color: inherit;
}
.note-card__pin::before {
@@ -127,14 +127,15 @@
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
color: var(--color-text-primary);
color: inherit;
padding-right: var(--space-6);
}
.note-card__content {
font-size: var(--text-sm);
line-height: var(--line-height-relaxed);
color: var(--color-text-secondary);
color: inherit;
opacity: 0.78;
word-break: break-word;
white-space: pre-wrap;
}
@@ -149,7 +150,8 @@
justify-content: space-between;
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border-subtle);
border-top: 1px solid currentColor;
opacity: 0.55;
}
.note-card__creator {
@@ -157,7 +159,7 @@
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-text-tertiary);
color: inherit;
}
.note-card__avatar {
@@ -184,7 +186,7 @@
align-items: center;
justify-content: center;
position: relative;
color: var(--color-text-tertiary);
color: inherit;
opacity: 0;
transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
@@ -256,3 +258,54 @@
.note-color-swatch:hover { transform: scale(1.15); }
.note-color-swatch--active { border-color: var(--color-text-primary); transform: scale(1.1); }
/* --------------------------------------------------------
* Formatierungs-Toolbar im Notiz-Editor
* -------------------------------------------------------- */
.note-format-toolbar {
display: flex;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
border: 1.5px solid var(--color-border);
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background-color: var(--color-surface-2);
}
.note-format-toolbar + .form-input {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.note-format-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: var(--radius-xs);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
font-size: var(--text-sm);
padding: 0;
}
.note-format-btn:hover {
background-color: var(--color-accent-light);
color: var(--color-accent);
}
.note-format-btn--sep {
width: 1px;
background-color: var(--color-border);
margin: var(--space-1) var(--space-1);
cursor: default;
}
.note-format-btn--sep:hover {
background-color: var(--color-border);
color: var(--color-text-secondary);
}