MediaWiki:Common.css

/* 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; }