OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

/* Notizbrett – nur die Bestandteile, die es sonst nirgends gibt.
   Karten, Filterleiste, Schaltflächen und Eingaben kommen aus app.css;
   die Notiz übernimmt deren Rahmen, Radius und Flächen. */

/* Schreibfeld über dem Verlauf */
/* Ein Schreibfeld braucht keinen eigenen Kartenkopf; der Platzhalter sagt,
   worum es geht. Die Karte bleibt dadurch so hoch wie ihr Inhalt. */
.tb-compose .detail-card-body { padding: 0.875rem 1.25rem; }
.tb-compose textarea {
    min-height: 4.5rem;
    resize: vertical;
}
.tb-compose-footer {
    margin-top: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
.tb-counter {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Verlauf */
.tb-feed {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Maße und Flächen folgen .detail-card, damit die Notiz neben den
   übrigen Karten der Anwendung nicht aus dem Rahmen fällt. */
.tb-note {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border, var(--gray-200));
    border-left: 3px solid var(--tb-color, var(--gray-400));
    border-radius: 0.25rem;
}

/* Namenskürzel in der Farbe der Person */
.tb-avatar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tb-color, var(--gray-700));
    background: var(--tb-soft, var(--gray-100));
}

.tb-main { flex: 1 1 auto; min-width: 0; }

.tb-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: 0.125rem;
}
.tb-author {
    font-weight: 600;
    color: var(--tb-color, var(--color-text));
}
.tb-time,
.tb-edited {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Der Text behält die Zeilenumbrüche der Eingabe und bricht lange
   Zeichenketten um, statt die Karte zu verbreitern. */
.tb-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    color: var(--color-text);
}

/* Die Schaltflächen tragen nur ihr Symbol; der Name steht als Titel und für
   Hilfsmittel daran. Ein Notizbrett lebt vom Text, nicht von seinen Knöpfen. */
.tb-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}
/* Nur die Ausrichtung des Symbols; Flächen und Farben liefern die
   Schaltflächen-Klassen aus app.css, damit beide Themes stimmen. */
.tb-action { line-height: 1; }

.tb-edit-form { margin-top: var(--spacing-sm); }
.tb-edit-form textarea { min-height: 5rem; resize: vertical; }

/* Auf schmalen Anzeigen rutscht das Kürzel über den Text. */
@media (max-width: 575.98px) {
    .tb-note { flex-direction: column; gap: var(--spacing-sm); }
}

/* Dashboard-Widget: dieselbe Farbführung, nur kompakter */
.tb-mini {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.tb-mini-item {
    border-left: 3px solid var(--tb-color, var(--gray-400));
    padding-left: var(--spacing-sm);
}
.tb-mini-head {
    display: flex;
    gap: var(--spacing-xs);
    align-items: baseline;
    font-size: 0.8rem;
}
.tb-mini-author { font-weight: 600; color: var(--tb-color, var(--color-text)); }
.tb-mini-time   { color: var(--color-text-muted); }
.tb-mini-body {
    font-size: 0.85rem;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}