MediaWiki:Common.css
Jump to navigation
Jump to search
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.
/* Custom fonts */
@font-face {
font-family: "Submona";
src: url("/resources/assets/submona.woff") format("woff");
}
@font-face {
font-family: "Giko";
src: url("/resources/assets/giko2.woff") format("woff");
}
/* AA mode for non-Safari browsers */
.aa {
font-family: 'MS PGothic', 'Submona', sans-serif !important;
word-wrap: break-word;
line-height: 1;
font-size: 12pt;
}
/* AA mode for Safari since Safari will try to set the page to shift-jis */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.aa {
font-family: 'Submona', sans-serif !important;
}
}
/* AA mode with the giko font as default for non-Safari browsers */
.aagiko {
font-family: 'MS PGothic', 'Giko', sans-serif !important;
word-wrap: break-word;
line-height: 1;
font-size: 12pt;
}
/* AA mode with the giko font for Safari since Safari will try to set the page to shift-jis */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.aagiko {
font-family: 'Giko', sans-serif !important;
}
}
/* Add your usernames here */
a[href$=":Lawiki"], a[href$="/Lawiki"], a[visited$=":Lawiki"], a[visited$="/Lawiki"]{
font-weight:bold;
color: #2871F7 !important;
}
a[href$=":Screamer1234"], a[href$="/Screamer1234"]{
font-weight:bold;
color: cyan !important;
text-shadow: 0px 0px 10px #00b7ff;
font-family:bahnschrift;
}
a[href$=":Sump"], a[href$="/Sump"]{
font-weight:bold;
color: cyan !important;
}
a[href$=":Tankman_fan_44"], a[href$="/Tankman_fan_44"]{
font-weight:bold;
color: #FFFFFF !important;
text-shadow: 0px 0px 5px #2a9df4;
}
a[href$=":Tankmanfan44"], a[href$="/Tankmanfan44"]{
font-weight:bold;
color: #FFFFFF !important;
text-shadow: 0px 0px 5px #2a9df4;
}
a[href$=":LuaGunsX"], a[href$="/LuaGunsX"]{
font-weight:bold;
color: gray !important;
}
a[href$=":TheEpikShyGuy"], a[href$="/TheEpikShyGuy"]{
font-weight:bold;
text-shadow: 0px 0px 10px #ffffff;
color: black !important;
}
.stub {
background-color: #172617;
border: 1px solid #858585;
}
.stub2 {
background-color: #5f7b58;
}
.cleanup1 {
background-color: #262217;
border:1px solid #858585;
}
.cleanup2 {
background-color: #735926
}
.delete{
background-color: #261717;
border:1px solid #858585;
}
.delete2{
background-color: #783636;
}
.spoiler{
background-color: #66464b;
border:1px solid #858585;
}
.spoiler2{
background-color: #b37b84;
}
.lost{
background-color: #555;
border:1px solid gray;
}
.lost2{
background-color: #979797;
}
.closed{
background-color: #555200;
border:1px solid orange;
}
.closed2{
background-color: #FFD500;
}
.construction{
background-color: #555200;
border:1px solid orange;
}
.construction2{
background-color: #FFD500;
}
.pd1{
background-color: #555200;
border:1px solid orange;
}
.pd2{
background-color: #FFD500;
}
.pls1{
background-color: #172617;
border: 1px solid #858585;
}
.pls2{
background-color: #5f7b58;
}
.plsv1{
background-color: #497e8f;
}
.plsv2{
background-color: lightblue;
}
.fairuse{
background-color: #555;
border:1px solid gray;
}
.fairuse2{
background-color: lightgray;
}
.retired{
background-color: #555200;
border:1px solid orange;
}
.retired2{
background-color: #FFD500;
}
.permission1 {
background-color: #B000B0;
border: 1px solid white;
}
.permission2 {
background-color: #ffffff;
}
#mp { --bg:#1f1f1f; --accent:#a62e10; --text:#d8d8d8; --heading:#ffffff; }
#mp * { box-sizing: border-box; }
#mp .card {
background: var(--bg);
border: 2px solid var(--accent);
border-radius: 10px;
padding: 0.8rem;
margin: 0.6rem 0;
color: var(--text);
}
#mp .hero { padding: 0; }
#mp .hero .mw-file-element, #mp .hero img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
#mp .welcome { text-align: center; }
#mp .title { font-size: 1.6rem; font-weight: 700; }
#mp .title .muted { color: var(--text); font-weight: 600; }
#mp .title .site { color: var(--accent); }
#mp .subtitle { color: var(--text); margin-top: 0.25rem; }
#mp .stats { color: var(--text); margin-top: 0.25rem; word-wrap: anywhere; }
#mp .quicklinks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .5rem;
margin-top: .75rem;
}
#mp .quicklinks a,
#mp .quicklinks a:visited {
display: block;
padding: .55rem .6rem;
border: 1px solid var(--accent);
border-radius: 8px;
text-align: center;
background: rgba(166,46,16,0.08);
color: var(--heading);
text-decoration: none;
}
#mp .quicklinks a:hover { background: rgba(166,46,16,0.16); }
#mp h2 {
margin: .5rem 0 .8rem;
padding: .35rem .55rem;
background: var(--accent);
color: var(--heading);
border: 1px solid #631b09;
border-left: none;
border-top: none;
font-size: 1.1rem;
}
#mp .section-body a { color: #ffffff; }
#mp .row {
display: flex;
flex-direction: column;
gap: .6rem;
}
#mp .col { width: 100%; }
@media (min-width: 800px) {
#mp .row { flex-direction: row; }
#mp .row .col { width: 50%; }
}
#mp { --bg:#1f1f1f; --accent:#a62e10; --text:#d8d8d8; --heading:#ffffff; }
#mp .card { background:var(--bg); border:2px solid var(--accent); border-radius:10px; padding:1.2rem; margin:.8rem 0; color:var(--text); }
#mp .welcome-card { display:block; }
@media (min-width:900px){
#mp .welcome-card{
display:grid;
grid-template-columns: 1.2fr 1fr;
align-items:center;
gap:2rem;
}
}
#mp .welcome-card .title{ font-size:2rem; font-weight:800; text-align:center; }
#mp .welcome-card .subtitle,
#mp .welcome-card .stats{ text-align:center; font-size:1.05rem; }
@media (min-width:900px){
#mp .welcome-card .title,
#mp .welcome-card .subtitle,
#mp .welcome-card .stats{ text-align:left; }
}
#mp .welcome-card .muted{ color:var(--heading); opacity:.85; }
#mp .welcome-card .site{ color:var(--accent); }
#mp .welcome-card .stats a{ color:var(--accent); text-decoration:none; }
#mp .quicklist{
list-style:disc;
list-style-position:outside;
margin:0;
padding-left:1.2rem;
display:grid;
grid-template-columns:1fr;
gap:.35rem .9rem;
}
@media (min-width:600px){ #mp .quicklist{ grid-template-columns:repeat(2, minmax(160px,1fr)); } }
@media (min-width:900px){ #mp .quicklist{ grid-template-columns:repeat(3, minmax(160px,1fr)); } }
#mp .quicklist a{ color:var(--accent); text-decoration:none; }
#mp .quicklist a:hover{ text-decoration:underline; }