diff --git a/src/styles/workers.css b/src/styles/workers.css index 59bdf39..50a8945 100644 --- a/src/styles/workers.css +++ b/src/styles/workers.css @@ -208,6 +208,10 @@ .wk-prospect-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; overflow-wrap: anywhere; } .wk-prospect-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); } .wk-prospect-section p { margin: 0; } +/* Das Panel liegt unter .page: dessen globale Regel `.page section + section { margin-top: 36px }` träfe sonst den zweiten Abschnitt und */ +/* ergäbe 52 px (16 px gap + 36 px) statt 16 px vor der Trennlinie. Der Abstand kommt allein aus gap. Die Regel braucht den Nachbar-Kombinator, */ +/* damit sie mit (0,3,0) gegen (0,1,2) gewinnt; ein einfaches `.wk-prospect-section { margin-top: 0 }` (0,1,0) verlöre. */ +.wk-prospect .wk-prospect-section + .wk-prospect-section { margin-top: 0; } .wk-prospect-title { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-2); } .wk-prospect-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .wk-prospect-msg { min-width: 0; } diff --git a/tests/unit/workersCss.test.mjs b/tests/unit/workersCss.test.mjs index dc802d6..9a59cfc 100644 --- a/tests/unit/workersCss.test.mjs +++ b/tests/unit/workersCss.test.mjs @@ -24,3 +24,16 @@ test('workers.css: die Karte bleibt beim Anspringen unter der festen Leiste der const phone = css.slice(css.indexOf('@media (max-width: 860px)')) assert.match(phone, /\.wk-card\s*\{\s*scroll-margin-top:\s*64px/) // 52 px Leiste + Luft }) +test('workers.css: die globale Regel .page section + section (36 px) verlängert den Abstand der Panel-Abschnitte nicht (W4)', () => { + const global = readFileSync(new URL('../../src/styles/global.css', import.meta.url), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '') + const css = readFileSync(new URL('../../src/styles/workers.css', import.meta.url), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '') + assert.match(global, /\.page section \+ section\s*\{\s*margin-top:\s*36px/) // die Regel, gegen die das Panel sich behaupten muss: Spezifität (0,1,2) + const m = css.match(/(\.wk-prospect [^{}]*\.wk-prospect-section \+ \.wk-prospect-section)\s*\{([^}]*)\}/) + assert.ok(m, 'Regel für zwei benachbarte Abschnitte im Panel') + assert.match(m[2], /margin-top:\s*0\b/) + // Spezifität: zwei Klassen (0,2,0) schlagen schon (0,1,2); eine einzelne Klasse (0,1,0) verlöre + assert.ok((m[1].match(/\.[\w-]+/g) || []).length >= 2, 'mindestens zwei Klassen') + // der Abstand der Abschnitte kommt aus gap, nicht aus einem eigenen margin-top + assert.match(css, /\.wk-prospect\s*\{[^}]*gap:\s*16px/) + assert.doesNotMatch(css.match(/\.wk-prospect-section\s*\{([^}]*)\}/)[1], /margin-top/) +})