MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* HamWiki — styles shared by every skin */
/* ---------- Infobox ---------- */
.hw-infobox {
float: right;
clear: right;
width: 280px;
max-width: 100%;
margin: 0 0 1em 1.5em;
border: 1px solid #d7dbe0;
border-radius: 4px;
background: #f6f7f9;
font-size: 0.92em;
line-height: 1.4;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.hw-infobox th,
.hw-infobox td {
padding: 6px 10px;
vertical-align: top;
border-top: 1px solid #e3e6ea;
text-align: left;
}
.hw-infobox tr:first-child th,
.hw-infobox tr:first-child td {
border-top: none;
}
.hw-infobox th {
width: 42%;
font-weight: 600;
}
.hw-infobox .hw-infobox-title {
width: auto;
text-align: center;
font-size: 1.15em;
font-weight: 700;
padding: 9px 10px;
background: #141a2e;
color: #f2c53d;
}
.hw-infobox .hw-infobox-section {
width: auto;
text-align: center;
background: #141a2e;
color: #f2c53d;
font-weight: 700;
}
.hw-infobox .hw-infobox-image {
text-align: center;
padding: 10px;
}
.hw-infobox .hw-infobox-image img {
max-width: 100%;
height: auto;
}
@media screen and (min-width: 1700px) {
.hw-infobox {
width: 320px;
}
}
@media (max-width: 640px) {
.hw-infobox {
float: none;
width: 100%;
margin: 0 0 1em;
}
}
/* ---------- Hatnotes ---------- */
.hw-hatnote {
font-style: italic;
color: #5b6470;
padding-left: 1.6em;
margin-bottom: 0.6em;
}
/* ---------- Main page ---------- */
.hw-welcome {
border-radius: 6px;
padding: 22px 26px;
margin-bottom: 18px;
background: linear-gradient(135deg, #0c1022 0%, #16213f 100%);
color: #ffffff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 28px;
}
.hw-welcome h2 {
border: none;
margin: 0 0 4px;
padding: 0;
font-size: 1.9em;
font-weight: 700;
color: #ffffff;
}
.hw-welcome p {
margin: 0;
font-size: 1.05em;
opacity: 0.9;
max-width: 46em;
}
.hw-welcome .hw-welcome-count {
text-align: right;
line-height: 1.1;
}
.hw-welcome .hw-welcome-count b {
display: block;
font-size: 2.2em;
color: #f2c53d;
}
.hw-welcome a,
.hw-welcome a:visited {
color: #f2c53d;
}
.hw-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 16px;
margin-bottom: 16px;
align-items: start;
}
.hw-box {
border: 1px solid #d7dbe0;
border-radius: 6px;
overflow: hidden;
background: #ffffff;
}
.hw-box > .hw-box-title {
background: #141a2e;
color: #f2c53d;
font-weight: 700;
padding: 8px 14px;
font-size: 1em;
}
.hw-box > .hw-box-body {
padding: 12px 16px 6px;
}
.hw-box .hw-box-body ul {
margin-left: 1.2em;
}
.hw-topics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 10px 20px;
}
.hw-topics > div > b {
display: block;
margin-bottom: 2px;
}
.hw-tip {
border-left: 4px solid #f2c53d;
background: #fdf7e3;
padding: 8px 12px;
margin: 0.8em 0;
}
/* ---------- Tables in articles ---------- */
.hw-table {
border-collapse: collapse;
font-size: 0.95em;
margin: 0.5em 0 1.2em;
}
.hw-table th,
.hw-table td {
border: 1px solid #d7dbe0;
padding: 5px 10px;
text-align: left;
vertical-align: top;
}
.hw-table th {
background: #eef0f3;
}
.hw-table caption {
font-weight: 600;
text-align: left;
padding: 4px 0;
}
/* ---------- Pictures ---------- */
/* Larger diagram thumbnails must still fit narrow screens */
figure[typeof~="mw:File/Thumb"],
figure[typeof~="mw:File/Frame"] {
max-width: 100%;
}
figure[typeof~="mw:File/Thumb"] img,
figure[typeof~="mw:File/Frame"] img,
.gallery img {
max-width: 100%;
height: auto;
}
@media (max-width: 640px) {
figure[typeof~="mw:File/Thumb"] {
float: none;
margin: 0 auto 1em;
}
}
/* Featured picture and "more" links on the Main Page (added 20 October 2026) */
.hw-fp {
text-align: center;
margin: 2px 0 8px;
}
.hw-fp img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.hw-more {
text-align: right;
font-size: 0.9em;
margin: 6px 0 4px;
}
/* The heading in the Main Page welcome box: no underline */
.hw-welcome .mw-heading,
.hw-welcome h2 {
border: none !important;
padding: 0 !important;
margin: 0 0 4px !important;
}
/* ====================================================================
Vector 2022 look (added 20 October 2026; tidied 20 October evening)
Reader-selectable colors modeled on radio display backlights:
blue (default), green, amber and neutral, each with a dark-mode version.
==================================================================== */
.hw-tiles {
display: none;
}
html body.skin-vector-2022 {
background: #ffffff !important;
--hw-tint: #e8f7fd;
--hw-bar: #9fdbf5;
--hw-line: #5fbfe8;
--hw-ink: #06324a;
}
html.hw-pal-green body.skin-vector-2022 {
--hw-tint: #f0fadf;
--hw-bar: #c3ee7a;
--hw-line: #8fcc3f;
--hw-ink: #203600;
}
html.hw-pal-amber body.skin-vector-2022 {
--hw-tint: #fff3e0;
--hw-bar: #f8bd5f;
--hw-line: #e0952f;
--hw-ink: #3d2200;
}
html.hw-pal-neutral body.skin-vector-2022 {
--hw-tint: #f8f9fa;
--hw-bar: #eaecf0;
--hw-line: #c8ccd1;
--hw-ink: #202122;
}
/* Dark mode: deep panels with glowing text, like a radio's night dimmer */
html.skin-theme-clientpref-night body.skin-vector-2022 {
background: #101418 !important;
--hw-tint: #0c222d;
--hw-bar: #12405a;
--hw-line: #2c7ea6;
--hw-ink: #b5e8fc;
}
html.skin-theme-clientpref-night.hw-pal-green body.skin-vector-2022 {
--hw-tint: #142109;
--hw-bar: #2a4510;
--hw-line: #5a8f22;
--hw-ink: #d2f59a;
}
html.skin-theme-clientpref-night.hw-pal-amber body.skin-vector-2022 {
--hw-tint: #261808;
--hw-bar: #52320c;
--hw-line: #9a601c;
--hw-ink: #ffd59a;
}
html.skin-theme-clientpref-night.hw-pal-neutral body.skin-vector-2022 {
--hw-tint: #1c1e22;
--hw-bar: #2a2d33;
--hw-line: #4a4f57;
--hw-ink: #eaecf0;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-vector-2022 {
background: #101418 !important;
--hw-tint: #0c222d;
--hw-bar: #12405a;
--hw-line: #2c7ea6;
--hw-ink: #b5e8fc;
}
html.skin-theme-clientpref-os.hw-pal-green body.skin-vector-2022 {
--hw-tint: #142109;
--hw-bar: #2a4510;
--hw-line: #5a8f22;
--hw-ink: #d2f59a;
}
html.skin-theme-clientpref-os.hw-pal-amber body.skin-vector-2022 {
--hw-tint: #261808;
--hw-bar: #52320c;
--hw-line: #9a601c;
--hw-ink: #ffd59a;
}
html.skin-theme-clientpref-os.hw-pal-neutral body.skin-vector-2022 {
--hw-tint: #1c1e22;
--hw-bar: #2a2d33;
--hw-line: #4a4f57;
--hw-ink: #eaecf0;
}
}
/* Main Page: hide the "Main Page" title, as Wikipedia does */
body.skin-vector-2022.page-Main_Page .vector-page-titlebar,
body.skin-vector-2022.page-Main_Page .mw-page-title-main {
display: none;
}
/* Menu tiles at the top of the Main Page: compact buttons with a small picture */
body.skin-vector-2022 .hw-tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0 0 18px;
}
@media (max-width: 800px) {
body.skin-vector-2022 .hw-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
body.skin-vector-2022 .hw-tile {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 10px 5px 5px;
border: 1px solid var(--hw-line);
border-radius: 8px;
background: var(--hw-bar);
}
body.skin-vector-2022 .hw-tile > span {
flex: none;
}
body.skin-vector-2022 .hw-tile img {
display: block;
width: 56px;
height: 40px;
object-fit: cover;
border-radius: 5px;
background: #ffffff;
}
/* Diagrams fit inside the picture instead of being cropped; photos fill it */
body.skin-vector-2022 .hw-tile img[src*=".svg"] {
object-fit: contain;
padding: 2px;
box-sizing: border-box;
}
body.skin-vector-2022 .hw-tile.hw-tile-top img {
object-position: center 15%;
}
body.skin-vector-2022 .hw-tile-label {
font-weight: 700;
font-size: 1em;
line-height: 1.2;
}
body.skin-vector-2022 .hw-tile-label a,
body.skin-vector-2022 .hw-tile-label a:visited {
color: var(--hw-ink);
}
body.skin-vector-2022 .hw-tile:hover {
border-color: var(--hw-ink);
}
/* The whole tile is the link: the label's link is stretched over the box */
body.skin-vector-2022 .hw-tile {
position: relative;
cursor: pointer;
}
body.skin-vector-2022 .hw-tile-label a::after {
content: "";
position: absolute;
inset: 0;
border-radius: 8px;
}
@media (max-width: 640px) {
body.skin-vector-2022 .hw-tile {
gap: 7px;
padding-right: 6px;
}
body.skin-vector-2022 .hw-tile img {
width: 40px;
height: 32px;
}
body.skin-vector-2022 .hw-tile-label {
min-width: 0;
font-size: 0.85em;
overflow-wrap: anywhere;
}
}
/* Welcome box, boxes, infobox and tips in the chosen palette */
body.skin-vector-2022 .hw-welcome {
background: var(--hw-tint);
color: var(--hw-ink);
border: 1px solid var(--hw-line);
}
body.skin-vector-2022 .hw-welcome h2,
body.skin-vector-2022 .hw-welcome .mw-heading {
color: var(--hw-ink);
border: none;
}
body.skin-vector-2022 .hw-welcome .hw-welcome-count b,
body.skin-vector-2022 .hw-welcome a,
body.skin-vector-2022 .hw-welcome a:visited {
color: var(--hw-ink);
}
body.skin-vector-2022 .hw-box {
border-color: var(--hw-line);
}
body.skin-vector-2022 .hw-box > .hw-box-title,
body.skin-vector-2022 .hw-infobox .hw-infobox-title,
body.skin-vector-2022 .hw-infobox .hw-infobox-section {
background: var(--hw-bar);
color: var(--hw-ink);
}
body.skin-vector-2022 .hw-infobox {
background: var(--hw-tint);
border-color: var(--hw-line);
}
body.skin-vector-2022 .hw-tip {
background: var(--hw-tint);
border-left-color: var(--hw-line);
}
body.skin-vector-2022 .hw-table th {
background: var(--hw-tint);
}
/* Text inside the colored boxes follows the panel color in dark mode */
body.skin-vector-2022 .hw-infobox,
body.skin-vector-2022 .hw-tip,
body.skin-vector-2022 .hw-box-body {
color: inherit;
}
html.skin-theme-clientpref-night body.skin-vector-2022 .hw-box {
background: #16191d;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-vector-2022 .hw-box {
background: #16191d;
}
}
/* ---------- Header: keep the logo clear of the search box ---------- */
@media (min-width: 640px) {
/* On wide screens Vector puts the logo in a fixed 248 px column; let it fit the logo instead */
body.skin-vector-2022 .vector-header {
grid-template-columns: max-content minmax(0, 1fr) !important;
}
body.skin-vector-2022 .vector-header-start {
flex-shrink: 0;
}
body.skin-vector-2022 .vector-header-start .mw-logo {
margin-right: 24px;
}
}
/* Phones: shrink the logo to fit beside the search and menu icons */
@media (max-width: 639px) {
body.skin-vector-2022 .vector-header {
flex-wrap: nowrap;
}
body.skin-vector-2022 .vector-header-start .mw-logo {
margin-right: 4px;
}
body.skin-vector-2022 .mw-logo-container {
max-width: none;
}
body.skin-vector-2022 .mw-logo-wordmark {
width: clamp(80px, 100vw - 245px, 140px) !important;
height: auto !important;
}
}
/* Main Page Recent changes box: hide the editors' edit summaries and the abbreviations key */
body.page-Main_Page .hw-box .comment,
body.page-Main_Page .hw-box .mw-changeslist-legend {
display: none;
}
/* The small HW icon beside the logo repeats the logo, so hide it */
body.skin-vector-2022 .mw-logo-icon {
display: none;
}
/* Main Page: "New on HamWiki" line, showing only the titles from Special:NewPages */
body.page-Main_Page .hw-new {
margin: -8px 0 18px;
font-size: var(--font-size-medium, 0.875rem);
}
body.page-Main_Page .hw-new .hw-new-label {
font-weight: 700;
margin-right: 4px;
}
body.page-Main_Page .hw-new,
body.page-Main_Page .hw-new .mw-pager-body,
body.page-Main_Page .hw-new ul {
display: inline;
}
body.page-Main_Page .hw-new ul {
margin: 0;
padding: 0;
}
body.page-Main_Page .hw-new h4,
body.page-Main_Page .hw-new .mw-empty-elt {
display: none;
}
body.page-Main_Page .hw-new li {
display: inline;
margin: 0;
font-size: 0;
}
body.page-Main_Page .hw-new li > * {
display: none;
}
body.page-Main_Page .hw-new li > bdi:has(.mw-newpages-pagename) {
display: inline;
}
body.page-Main_Page .hw-new .mw-newpages-pagename {
font-size: var(--font-size-medium, 0.875rem);
}
body.page-Main_Page .hw-new li:not(:last-child) .mw-newpages-pagename::after,
body.page-Main_Page .hw-new ul:not(:last-of-type) li:last-child .mw-newpages-pagename::after {
content: " · ";
color: var(--hw-ink);
}
/* Main Page welcome box: Start here, How-to guides and Random article links */
body.skin-vector-2022 .hw-welcome .hw-welcome-links {
margin-top: 8px;
font-weight: 600;
}
/* Sources lines on HamWiki:This month in ham radio history */
.hw-sources {
font-size: 0.85em;
margin: 6px 0 14px;
opacity: 0.85;
}
/* HamWiki: "Suggest a correction" line at the end of articles (added 22 October 2026) */
.hw-correction {
clear: both;
margin-top: 2em;
padding-top: 0.6em;
border-top: 1px solid var( --hw-line, #c8ccd1 );
font-size: 0.875em;
color: var( --color-subtle, #54595d );
}