RPI Wiki

User:Krishj4/common.css: Difference between revisions

← Older edit
Krishj4 (talk | contribs)
Bureaucrats, Interface administrators, Administrators
49 edits
Heading accent: short red bar over a subtle grey rule
Experiment: slightly rounded infobox corners (border-radius 6px)
 
(20 intermediate revisions by the same user not shown)
Line 41: Line 41:
}
}


/* Subtle full-width grey rule + a short red brand bar at the left */
/* Full-width grey rule under headings, with a red segment the width of the text */
.skin-vector-2022 .mw-body h1.firstHeading,
.skin-vector-2022 .mw-body .mw-first-heading,
.skin-vector-2022 .mw-body .mw-first-heading,
.skin-vector-2022 .mw-heading.mw-heading2 {
.skin-vector-2022 .mw-heading.mw-heading2 {
Line 50: Line 49:
}
}


.skin-vector-2022 .mw-body h1.firstHeading::after,
/* Keep the heading text and its edit links bottom-aligned so the bar lands true */
.skin-vector-2022 .mw-body .mw-first-heading::after,
.skin-vector-2022 .mw-heading.mw-heading2 {
.skin-vector-2022 .mw-heading.mw-heading2::after {
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 .mw-page-title-main,
.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: "";
content: "";
position: absolute;
position: absolute;
left: 0;
left: 0;
bottom: -1px;
right: 0;
width: 2.5em;
bottom: -0.29em;           /* drop down onto the grey rule */
height: 2px;
height: 2px;
background-color: var(--rpi-red);
background-color: var(--rpi-red);
Line 64: Line 73:
.skin-vector-2022 .infobox {
.skin-vector-2022 .infobox {
border-top: 3px solid var(--rpi-red);
border-top: 3px solid var(--rpi-red);
border-radius: 6px;
}
}


Retrieved from "https://rpiwiki.org/index.php/User:Krishj4/common.css"