「MediaWiki:Common.css」の版間の差分
表示
Refined table design (rounded, soft yellow palette, hover, zebra) |
Refined visuals: cleaner tables, calmer infobox, better typography rhythm |
||
| 1行目: | 1行目: | ||
.mw-parser-output { | |||
line-height: 1.75; | |||
font-size: 15px; | |||
color: #2c2c2c; | |||
} | |||
.mw-parser-output p { | |||
margin: 0.7em 0 1em 0; | |||
} | |||
.mw-parser-output h2 { | |||
border-bottom: 2px solid #f0c000; | |||
padding-bottom: 0.35em; | |||
margin-top: 1.7em; | |||
margin-bottom: 0.8em; | |||
font-size: 1.55em; | |||
font-weight: 600; | |||
letter-spacing: 0.01em; | |||
} | |||
.mw-parser-output h3 { | |||
border-bottom: 1px solid #ecdfb0; | |||
padding-bottom: 0.25em; | |||
margin-top: 1.3em; | |||
margin-bottom: 0.6em; | |||
font-size: 1.18em; | |||
font-weight: 600; | |||
color: #3a3000; | |||
} | |||
.mw-parser-output h4 { | |||
margin-top: 1em; | |||
margin-bottom: 0.4em; | |||
font-size: 1.05em; | |||
font-weight: 600; | |||
color: #444; | |||
} | |||
table.wikitable, | table.wikitable, | ||
table.infobox, | table.infobox, | ||
table.navbox { | table.navbox { | ||
border-collapse: | border-collapse: collapse; | ||
background: #ffffff; | |||
border: 1px solid # | border: 1px solid #ececec; | ||
border-radius: | border-radius: 4px; | ||
overflow: hidden; | overflow: hidden; | ||
margin: 1.4em 0; | |||
box-shadow: 0 1px | font-size: 0.95em; | ||
box-shadow: 0 1px 0 rgba(0,0,0,0.02); | |||
} | |||
table.wikitable { | |||
width: auto; | |||
} | } | ||
table.wikitable th, | table.wikitable th, | ||
table.wikitable > caption { | table.wikitable > caption { | ||
background: # | background: #fbfbfb; | ||
color: # | color: #444; | ||
font-weight: 600; | font-weight: 600; | ||
border-bottom: 2px solid #f0c000; | border-bottom: 2px solid #f0c000; | ||
padding: | padding: 11px 16px; | ||
text-align: left; | text-align: left; | ||
letter-spacing: 0.02em; | |||
} | } | ||
table.wikitable td { | table.wikitable td { | ||
padding: | padding: 11px 16px; | ||
border- | border-top: 1px solid #f3f3f3; | ||
color: #333; | |||
vertical-align: top; | vertical-align: top; | ||
} | } | ||
table.wikitable tr: | table.wikitable tbody tr:first-child td { | ||
border- | border-top: none; | ||
} | } | ||
table.wikitable tbody tr:nth-child(even) td { | table.wikitable tbody tr:nth-child(even) td { | ||
background: # | background: #fcfcfa; | ||
} | } | ||
table.wikitable tbody tr:hover td { | table.wikitable tbody tr:hover td { | ||
background: # | background: #fff8e1; | ||
transition: background 0. | transition: background 0.15s ease; | ||
} | } | ||
table.infobox { | table.infobox { | ||
width: | width: 280px; | ||
float: right; | float: right; | ||
margin: 0 0 | margin: 0 0 1.2em 1.4em; | ||
border: 1px solid #ececec; | |||
} | } | ||
table.infobox caption { | table.infobox caption { | ||
background: #f0c000; | background: #f0c000; | ||
color: # | color: #1a1500; | ||
font-size: | font-size: 1.08em; | ||
font-weight: 700; | font-weight: 700; | ||
padding: | padding: 14px 14px; | ||
text-align: center; | text-align: center; | ||
border-bottom: | border-bottom: none; | ||
letter-spacing: 0.01em; | |||
} | } | ||
table.infobox th { | table.infobox th { | ||
background: # | background: #fbfaf3; | ||
color: # | color: #555; | ||
font-weight: | font-weight: 500; | ||
border- | font-size: 0.88em; | ||
padding: | border-top: 1px solid #f1ebd5; | ||
padding: 9px 12px; | |||
text-align: left; | text-align: left; | ||
width: | width: 38%; | ||
vertical-align: top; | vertical-align: top; | ||
letter-spacing: 0.02em; | |||
} | } | ||
table.infobox td { | table.infobox td { | ||
padding: | padding: 9px 12px; | ||
border- | border-top: 1px solid #f1ebd5; | ||
color: #2c2c2c; | |||
vertical-align: top; | vertical-align: top; | ||
word-break: break-word; | |||
line-height: 1.6; | |||
} | } | ||
table.infobox tr: | table.infobox tr:nth-child(2) th, | ||
table.infobox tr: | table.infobox tr:nth-child(2) td { | ||
border- | border-top: none; | ||
} | } | ||
table.navbox { | table.navbox { | ||
font-size: | font-size: 0.86em; | ||
background: #ffffff; | background: #ffffff; | ||
border-radius: 4px; | |||
margin: 1.5em 0 0.5em 0; | |||
} | } | ||
table.navbox th { | table.navbox th { | ||
background: # | background: #fff8de; | ||
color: #5a4500; | color: #5a4500; | ||
border-bottom: | border-bottom: 1px solid #f0c000; | ||
padding: | padding: 10px 14px; | ||
text-align: center; | text-align: center; | ||
font-weight: 600; | font-weight: 600; | ||
letter-spacing: 0.02em; | |||
} | } | ||
table.navbox td { | table.navbox td { | ||
padding: | padding: 9px 13px; | ||
border- | border-top: 1px solid #f0f0f0; | ||
color: #333; | |||
vertical-align: top; | vertical-align: top; | ||
} | } | ||
table.navbox tr td:first-child { | table.navbox tr td:first-child { | ||
background: # | background: #fcfcfc; | ||
font-weight: 600; | font-weight: 600; | ||
color: # | color: #555; | ||
width: | width: 16%; | ||
border-right: 1px solid #f0f0f0; | |||
font-size: 0.92em; | |||
} | |||
.mw-parser-output ul, | |||
.mw-parser-output ol { | |||
margin: 0.6em 0 0.9em 1.4em; | |||
line-height: 1.75; | |||
} | |||
.mw-parser-output li { | |||
margin: 0.25em 0; | |||
} | |||
.mw-parser-output ol.references, | |||
.mw-parser-output .references { | |||
font-size: 0.88em; | |||
line-height: 1.65; | |||
color: #555; | |||
} | |||
.mw-parser-output a.external { | |||
color: #2754a8; | |||
} | |||
.mw-parser-output dl, .mw-parser-output dd { | |||
line-height: 1.65; | |||
} | |||
#mw-content-text > .mw-parser-output { | |||
padding: 0.4em 0; | |||
} | } | ||
| 115行目: | 199行目: | ||
max-width: 100% !important; | max-width: 100% !important; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
font-size: | font-size: 0.93em; | ||
margin: 1em 0; | |||
} | } | ||
table.infobox { | table.infobox { | ||
float: none !important; | float: none !important; | ||
margin: 0 0 | margin: 0.4em 0 1.2em 0 !important; | ||
} | } | ||
table.wikitable th, | table.wikitable th, | ||
| 127行目: | 212行目: | ||
table.navbox th, | table.navbox th, | ||
table.navbox td { | table.navbox td { | ||
padding: | padding: 8px 10px; | ||
word-break: break-word; | word-break: break-word; | ||
} | } | ||
table.infobox th { | table.infobox th { | ||
width: | width: 40%; | ||
} | |||
.mw-parser-output { | |||
font-size: 15px; | |||
line-height: 1.7; | |||
} | |||
.mw-parser-output h2 { | |||
font-size: 1.35em; | |||
margin-top: 1.4em; | |||
} | |||
.mw-parser-output h3 { | |||
font-size: 1.1em; | |||
} | } | ||
} | } | ||
2026年5月1日 (金) 14:32時点における版
.mw-parser-output {
line-height: 1.75;
font-size: 15px;
color: #2c2c2c;
}
.mw-parser-output p {
margin: 0.7em 0 1em 0;
}
.mw-parser-output h2 {
border-bottom: 2px solid #f0c000;
padding-bottom: 0.35em;
margin-top: 1.7em;
margin-bottom: 0.8em;
font-size: 1.55em;
font-weight: 600;
letter-spacing: 0.01em;
}
.mw-parser-output h3 {
border-bottom: 1px solid #ecdfb0;
padding-bottom: 0.25em;
margin-top: 1.3em;
margin-bottom: 0.6em;
font-size: 1.18em;
font-weight: 600;
color: #3a3000;
}
.mw-parser-output h4 {
margin-top: 1em;
margin-bottom: 0.4em;
font-size: 1.05em;
font-weight: 600;
color: #444;
}
table.wikitable,
table.infobox,
table.navbox {
border-collapse: collapse;
background: #ffffff;
border: 1px solid #ececec;
border-radius: 4px;
overflow: hidden;
margin: 1.4em 0;
font-size: 0.95em;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
table.wikitable {
width: auto;
}
table.wikitable th,
table.wikitable > caption {
background: #fbfbfb;
color: #444;
font-weight: 600;
border-bottom: 2px solid #f0c000;
padding: 11px 16px;
text-align: left;
letter-spacing: 0.02em;
}
table.wikitable td {
padding: 11px 16px;
border-top: 1px solid #f3f3f3;
color: #333;
vertical-align: top;
}
table.wikitable tbody tr:first-child td {
border-top: none;
}
table.wikitable tbody tr:nth-child(even) td {
background: #fcfcfa;
}
table.wikitable tbody tr:hover td {
background: #fff8e1;
transition: background 0.15s ease;
}
table.infobox {
width: 280px;
float: right;
margin: 0 0 1.2em 1.4em;
border: 1px solid #ececec;
}
table.infobox caption {
background: #f0c000;
color: #1a1500;
font-size: 1.08em;
font-weight: 700;
padding: 14px 14px;
text-align: center;
border-bottom: none;
letter-spacing: 0.01em;
}
table.infobox th {
background: #fbfaf3;
color: #555;
font-weight: 500;
font-size: 0.88em;
border-top: 1px solid #f1ebd5;
padding: 9px 12px;
text-align: left;
width: 38%;
vertical-align: top;
letter-spacing: 0.02em;
}
table.infobox td {
padding: 9px 12px;
border-top: 1px solid #f1ebd5;
color: #2c2c2c;
vertical-align: top;
word-break: break-word;
line-height: 1.6;
}
table.infobox tr:nth-child(2) th,
table.infobox tr:nth-child(2) td {
border-top: none;
}
table.navbox {
font-size: 0.86em;
background: #ffffff;
border-radius: 4px;
margin: 1.5em 0 0.5em 0;
}
table.navbox th {
background: #fff8de;
color: #5a4500;
border-bottom: 1px solid #f0c000;
padding: 10px 14px;
text-align: center;
font-weight: 600;
letter-spacing: 0.02em;
}
table.navbox td {
padding: 9px 13px;
border-top: 1px solid #f0f0f0;
color: #333;
vertical-align: top;
}
table.navbox tr td:first-child {
background: #fcfcfc;
font-weight: 600;
color: #555;
width: 16%;
border-right: 1px solid #f0f0f0;
font-size: 0.92em;
}
.mw-parser-output ul,
.mw-parser-output ol {
margin: 0.6em 0 0.9em 1.4em;
line-height: 1.75;
}
.mw-parser-output li {
margin: 0.25em 0;
}
.mw-parser-output ol.references,
.mw-parser-output .references {
font-size: 0.88em;
line-height: 1.65;
color: #555;
}
.mw-parser-output a.external {
color: #2754a8;
}
.mw-parser-output dl, .mw-parser-output dd {
line-height: 1.65;
}
#mw-content-text > .mw-parser-output {
padding: 0.4em 0;
}
@media screen and (max-width: 720px) {
table.wikitable,
table.infobox,
table.navbox {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
font-size: 0.93em;
margin: 1em 0;
}
table.infobox {
float: none !important;
margin: 0.4em 0 1.2em 0 !important;
}
table.wikitable th,
table.wikitable td,
table.infobox th,
table.infobox td,
table.navbox th,
table.navbox td {
padding: 8px 10px;
word-break: break-word;
}
table.infobox th {
width: 40%;
}
.mw-parser-output {
font-size: 15px;
line-height: 1.7;
}
.mw-parser-output h2 {
font-size: 1.35em;
margin-top: 1.4em;
}
.mw-parser-output h3 {
font-size: 1.1em;
}
}