User:Krishj4/common.css: Difference between revisions
Heading accent: red underline matches text width |
Heading accent: full-width grey rule + red bar at text width |
||
| Line 41: | Line 41: | ||
} | } | ||
/* | /* Full-width grey rule under headings, with a red segment the width of the text */ | ||
/* | .skin-vector-2022 .mw-body .mw-first-heading, | ||
.skin-vector-2022 .mw-heading.mw-heading2 { | |||
position: relative; | |||
border-bottom: 1px solid #c8ccd1; | |||
padding-bottom: 0.25em; | |||
} | |||
/* Keep the heading text and its edit links bottom-aligned so the bar lands true */ | |||
.skin-vector-2022 .mw-heading.mw-heading2 { | .skin-vector-2022 .mw-heading.mw-heading2 { | ||
align-items: flex-end; | |||
} | } | ||
/* | /* Anchor the red bar to each text element so it spans only the text width */ | ||
.skin-vector-2022 .mw-body .mw-first-heading, | .skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main, | ||
.skin-vector-2022 .mw-heading.mw-heading2 h2 { | .skin-vector-2022 .mw-heading.mw-heading2 h2 { | ||
position: relative; | |||
} | |||
.skin-vector-2022 .mw-body .mw-first-heading .mw-page-title-main::after, | |||
.skin-vector-2022 .mw-heading.mw-heading2 h2::after { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
right: 0; | |||
bottom: -0.25em; /* drop down onto the grey rule */ | |||
height: 2px; | |||
background-color: var(--rpi-red); | |||
} | } | ||