Skip to content

Commit 01e7a42

Browse files
FileEXFileEX
committed
Notes style improvements
1 parent 9002a5f commit 01e7a42

File tree

1 file changed

+90
-71
lines changed

1 file changed

+90
-71
lines changed

‎web/src/components/NoteBox.astro

Lines changed: 90 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -23,103 +23,122 @@ const { type = 'info', class: className, ...rest } = Astro.props;
2323
]}
2424
{...rest}
2525
>
26-
{type === 'important' && (
27-
<span class="note-icon" aria-label="Important">
28-
<svg width="28" height="28" viewBox="0 0 20 20" fill="none" aria-hidden="true">
29-
<circle cx="10" cy="10" r="10" fill="#e53935"/>
30-
<text x="10" y="15" text-anchor="middle" font-size="14" fill="#fff" font-family="Arial" font-weight="bold">!</text>
31-
</svg>
26+
<div class="note-header">
27+
{type === 'important' && (
28+
<span class="note-icon" aria-label="Important">
29+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7ZM12 15C11.8022 15 11.6089 15.0586 11.4444 15.1685C11.28 15.2784 11.1518 15.4346 11.0761 15.6173C11.0004 15.8 10.9806 16.0011 11.0192 16.1951C11.0578 16.3891 11.153 16.5673 11.2929 16.7071C11.4327 16.847 11.6109 16.9422 11.8049 16.9808C11.9989 17.0194 12.2 16.9996 12.3827 16.9239C12.5654 16.8482 12.7216 16.72 12.8315 16.5556C12.9414 16.3911 13 16.1978 13 16C13 15.7348 12.8946 15.4804 12.7071 15.2929C12.5196 15.1054 12.2652 15 12 15ZM21.71 7.56L16.44 2.29C16.2484 2.10727 15.9948 2.00368 15.73 2H8.27C8.00523 2.00368 7.75163 2.10727 7.56 2.29L2.29 7.56C2.10727 7.75163 2.00368 8.00523 2 8.27V15.73C2.00368 15.9948 2.10727 16.2484 2.29 16.44L7.56 21.71C7.75163 21.8927 8.00523 21.9963 8.27 22H15.73C15.9948 21.9963 16.2484 21.8927 16.44 21.71L21.71 16.44C21.8927 16.2484 21.9963 15.9948 22 15.73V8.27C21.9963 8.00523 21.8927 7.75163 21.71 7.56ZM20 15.31L15.31 20H8.69L4 15.31V8.69L8.69 4H15.31L20 8.69V15.31Z"></path></svg>
30+
</span>
31+
)}
32+
{type === 'warning' && (
33+
<span class="note-icon" aria-label="Warning">
34+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
35+
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
36+
<line x1="12" y1="9" x2="12" y2="13"/>
37+
<line x1="12" y1="17" x2="12.01" y2="17"/>
38+
</svg>
39+
</span>
40+
)}
41+
{type === 'info' && (
42+
<span class="note-icon" aria-label="Info">
43+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
44+
<circle cx="12" cy="12" r="10"/>
45+
<line x1="12" y1="16" x2="12" y2="12"/>
46+
<line x1="12" y1="8" x2="12.01" y2="8"/>
47+
</svg>
48+
</span>
49+
)}
50+
{type === 'tip' && (
51+
<span class="note-icon" aria-label="Tip">
52+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.43909 8.85483L1.44039 8.85354L4.96668 5.33815C5.30653 4.99386 5.7685 4.79662 6.2524 4.78972L6.26553 4.78963L12.9014 4.78962L13.8479 3.84308C16.9187 0.772319 20.0546 0.770617 21.4678 0.975145C21.8617 1.02914 22.2271 1.21053 22.5083 1.4917C22.7894 1.77284 22.9708 2.13821 23.0248 2.53199C23.2294 3.94517 23.2278 7.08119 20.1569 10.1521L19.2107 11.0983V17.7338L19.2106 17.7469C19.2037 18.2308 19.0067 18.6933 18.6624 19.0331L15.1456 22.5608C14.9095 22.7966 14.6137 22.964 14.29 23.0449C13.9663 23.1259 13.6267 23.1174 13.3074 23.0204C12.9881 22.9235 12.7011 22.7417 12.4771 22.4944C12.2533 22.2473 12.1006 21.9441 12.0355 21.6171L11.1783 17.3417L6.65869 12.822L4.34847 12.3589L2.38351 11.965C2.05664 11.8998 1.75272 11.747 1.50564 11.5232C1.25835 11.2992 1.07653 11.0122 0.979561 10.6929C0.882595 10.3736 0.874125 10.034 0.955057 9.7103C1.03599 9.38659 1.20328 9.09092 1.43909 8.85483ZM6.8186 10.8724L2.94619 10.096L6.32006 6.73268H10.9583L6.8186 10.8724ZM15.2219 5.21703C17.681 2.75787 20.0783 2.75376 21.1124 2.8876C21.2462 3.92172 21.2421 6.31895 18.783 8.77812L12.0728 15.4883L8.51172 11.9272L15.2219 5.21703ZM13.9042 21.0538L13.1279 17.1811L17.2676 13.0414V17.68L13.9042 21.0538Z"></path><path d="M9.31827 18.3446C9.45046 17.8529 9.17864 17.3369 8.68945 17.1724C8.56178 17.1294 8.43145 17.1145 8.30512 17.1243C8.10513 17.1398 7.91519 17.2172 7.76181 17.3434C7.62613 17.455 7.51905 17.6048 7.45893 17.7835C6.97634 19.2186 5.77062 19.9878 4.52406 20.4029C4.08525 20.549 3.6605 20.644 3.29471 20.7053C3.35607 20.3395 3.45098 19.9148 3.59711 19.476C4.01221 18.2294 4.78141 17.0237 6.21648 16.5411C6.39528 16.481 6.54504 16.3739 6.65665 16.2382C6.85126 16.0016 6.92988 15.678 6.84417 15.3647C6.83922 15.3466 6.83373 15.3286 6.82767 15.3106C6.74106 15.053 6.55701 14.8557 6.33037 14.7459C6.10949 14.6389 5.84816 14.615 5.59715 14.6994C5.47743 14.7397 5.36103 14.7831 5.24786 14.8294C3.22626 15.6569 2.2347 17.4173 1.75357 18.8621C1.49662 19.6337 1.36993 20.3554 1.30679 20.8818C1.27505 21.1464 1.25893 21.3654 1.25072 21.5213C1.24662 21.5993 1.24448 21.6618 1.24337 21.7066L1.243 21.7226L1.24235 21.7605L1.2422 21.7771L1.24217 21.7827L1.24217 21.7856C1.24217 22.3221 1.67703 22.7579 2.2137 22.7579L2.2155 22.7579L2.22337 22.7578L2.23956 22.7577C2.25293 22.7575 2.27096 22.7572 2.29338 22.7567C2.33821 22.7555 2.40073 22.7534 2.47876 22.7493C2.63466 22.7411 2.85361 22.725 3.11822 22.6932C3.64462 22.6301 4.36636 22.5034 5.13797 22.2464C6.58274 21.7653 8.3431 20.7738 9.17063 18.7522C9.21696 18.639 9.26037 18.5226 9.30064 18.4029C9.30716 18.3835 9.31304 18.364 9.31827 18.3446Z"></path></svg>
53+
</span>
54+
)}
55+
{type === 'needs_checking' && (
56+
<span class="note-icon" aria-label="Needs Checking">
57+
<svg width="24" height="24" viewBox="0 0 20 20" fill="none" aria-hidden="true">
58+
<circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2" fill="none"/>
59+
<text x="10" y="14" text-anchor="middle" font-size="12" fill="currentColor" font-family="Arial" font-weight="bold">?</text>
60+
</svg>
61+
</span>
62+
)}
63+
64+
<span class="note-title">
65+
{type === 'info' && 'Note'}
66+
{type === 'warning' && 'Caution'}
67+
{type === 'important' && 'Important'}
68+
{type === 'tip' && 'Tip'}
69+
{type === 'needs_checking' && 'Needs checking'}
3270
</span>
33-
)}
71+
</div>
3472

35-
{type === 'warning' && (
36-
<span class="note-icon" aria-label="Warning">
37-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="#ff9800" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
38-
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
39-
<line x1="12" y1="9" x2="12" y2="13"/>
40-
<line x1="12" y1="17" x2="12.01" y2="17"/>
41-
</svg>
42-
</span>
43-
)}
44-
45-
{type === 'info' && (
46-
<span class="note-icon" aria-label="Info">
47-
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="#2196f3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
48-
<circle cx="12" cy="12" r="10"/>
49-
<line x1="12" y1="16" x2="12" y2="12"/>
50-
<line x1="12" y1="8" x2="12.01" y2="8"/>
51-
</svg>
52-
</span>
53-
)}
54-
55-
{type === 'tip' && (
56-
<span class="note-icon" aria-label="Tip">
57-
<svg width="28" height="28" viewBox="0 0 20 20" fill="none" aria-hidden="true" stroke="#4caf50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
58-
<path d="M9 18h6"/>
59-
<path d="M12 2a7 7 0 0 0-7 7c0 3.93 3.13 7 7 7s7-3.07 7-7a7 7 0 0 0-7-7z"/>
60-
<line x1="12" y1="9" x2="12" y2="12"/>
61-
<line x1="12" y1="16" x2="12" y2="16"/>
62-
</svg>
63-
</span>
64-
)}
65-
66-
{type === 'needs_checking' && (
67-
<span style="font-size: 1.2rem;"><strong>This article needs checking:</strong></span>
68-
<span class="note-icon" aria-label="Important">
69-
<svg width="28" height="28" viewBox="0 0 20 20" fill="none" aria-hidden="true">
70-
<circle cx="10" cy="10" r="10" fill="#008dd4"/>
71-
<text x="10" y="15" text-anchor="middle" font-size="14" fill="#fff" font-family="Arial" font-weight="bold">!</text>
72-
</svg>
73-
</span>
74-
)}
75-
76-
<slot />
73+
<div class="note-content">
74+
<slot />
75+
</div>
7776
</div>
7877

7978
<style>
8079
.custom-note-box {
8180
background-color: var(--sl-color-gray-5);
82-
position: relative;
8381
border-left: 4px solid transparent;
8482
border-radius: 8px;
8583
padding: 1rem 1.25rem;
8684
margin-bottom: 1rem;
87-
color: var(--sl-color-text);
85+
color: var(--sl-color-white);
8886
}
8987

90-
.custom-note-box.note-info,
91-
.custom-note-box.note-warning,
92-
.custom-note-box.note-important,
93-
.custom-note-box.note-tip,
94-
.custom-note-box.note-needs_checking {
95-
padding-left: 3.5rem;
96-
padding-right: 1.25rem;
88+
.note-header {
89+
display: flex;
90+
align-items: center;
91+
gap: 0.5rem;
92+
margin-bottom: 0.5rem;
93+
font-weight: bold;
94+
}
95+
96+
.note-icon svg {
97+
display: block;
98+
}
99+
100+
.note-content {
101+
line-height: 1.5;
97102
}
98103

99104
.custom-note-box.note-info {
100105
border-left-color: var(--sl-color-blue);
106+
background-color: var(--sl-color-blue-low);
101107
}
102-
103108
.custom-note-box.note-warning {
104-
border-left-color: #ff9800;
109+
background-color: var(--sl-color-orange-low);
110+
border-left-color: var(--sl-color-orange);
105111
}
106-
107112
.custom-note-box.note-important {
108-
border-left-color: #d32f2f;
113+
border-left-color: var(--sl-color-red);
114+
background-color: var(--sl-color-red-low);
109115
}
110-
111116
.custom-note-box.note-tip {
112-
border-left-color: #4caf50;
117+
border-left-color: var(--sl-color-green);
118+
background-color: var(--sl-color-green-low);
113119
}
114-
115120
.custom-note-box.note-needs_checking {
116-
border-left-color: #008dd4;
121+
border-left-color: var(--sl-color-purple);
122+
background-color: var(--sl-color-purple-low);
123+
}
124+
125+
.custom-note-box.note-info .note-title, .custom-note-box.note-info .note-icon {
126+
color: var(--sl-color-blue-high);
127+
}
128+
129+
.custom-note-box.note-warning .note-title, .custom-note-box.note-warning .note-icon {
130+
color: var(--sl-color-orange-high);
131+
}
132+
133+
.custom-note-box.note-important .note-title, .custom-note-box.note-important .note-icon {
134+
color: var(--sl-color-red-high);
135+
}
136+
137+
.custom-note-box.note-tip .note-title, .custom-note-box.note-tip .note-icon {
138+
color: var(--sl-color-green-high);
117139
}
118140

119-
.note-icon {
120-
position: absolute;
121-
top: 50%;
122-
left: 0.75rem;
123-
transform: translateY(-50%);
141+
.custom-note-box.note-needs_checking .note-title, .custom-note-box.note-needs_checking .note-icon {
142+
color: var(--sl-color-purple-high);
124143
}
125144
</style>

0 commit comments

Comments
 (0)