Screamer Forums and Screamer gallery have returned.

The Screamer Forums will likely remain read only unless it's known that it will be active, since forums in general are kind of dead because of Discord.

MediaWiki:Common.css: Difference between revisions

From Screamer Wiki
Jump to navigation Jump to search
Sump (talk | contribs)
No edit summary
No edit summary
 
(194 intermediate revisions by 7 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* Custom fonts */
/* Infobox template style */
@font-face {
.infobox {
  font-family: "Submona";
border: 1px solid #a2a9b1;
  src: url("/resources/assets/submona.woff") format("woff");
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
}
}
.infobox caption {
@font-face {
font-size: 125%;
  font-family: "Giko";
font-weight: bold;
  src: url("/resources/assets/giko2.woff") format("woff");
padding: 0.2em;
text-align: center;
}
}
.infobox td,
 
.infobox th {
/* AA mode for non-Safari browsers */
vertical-align: top;
.aa {
/* @noflip */
font-family: 'MS PGothic', 'Submona', sans-serif !important;
text-align: left;
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);
}
}
.infobox.bordered {
 
border-collapse: collapse;
#mp .hero { padding: 0; }
#mp .hero .mw-file-element, #mp .hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
}
.infobox.bordered td,
 
.infobox.bordered th {
#mp .welcome { text-align: center; }
border: 1px solid #a2a9b1;
#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;
}
}
.infobox.bordered .borderless td,
#mp .quicklinks a,
.infobox.bordered .borderless th {
#mp .quicklinks a:visited {
border: 0;
  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); }


.infobox.sisterproject {
#mp h2 {
width: 20em;
  margin: .5rem 0 .8rem;
font-size: 90%;
  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; }


.infobox.standard-talk {
#mp .row {
border: 1px solid #c0c090;
  display: flex;
background-color: #f8eaba;
  flex-direction: column;
  gap: .6rem;
}
}
.infobox.standard-talk.bordered td,
#mp .col { width: 100%; }
.infobox.standard-talk.bordered th {
 
border: 1px solid #c0c090;
@media (min-width: 800px) {
  #mp .row { flex-direction: row; }
  #mp .row .col { width: 50%; }
}
}


/* styles for bordered infobox with merged rows */
 
.infobox.bordered .mergedtoprow td,
#mp { --bg:#1f1f1f; --accent:#a62e10; --text:#d8d8d8; --heading:#ffffff; }
.infobox.bordered .mergedtoprow th {
#mp .card { background:var(--bg); border:2px solid var(--accent); border-radius:10px; padding:1.2rem; margin:.8rem 0; color:var(--text); }
border: 0;
 
border-top: 1px solid #a2a9b1;
#mp .welcome-card { display:block; }
/* @noflip */
@media (min-width:900px){
border-right: 1px solid #a2a9b1;
  #mp .welcome-card{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    align-items:center;
    gap:2rem;
  }
}
}


.infobox.bordered .mergedrow td,
#mp .welcome-card .title{ font-size:2rem; font-weight:800; text-align:center; }
.infobox.bordered .mergedrow th {
#mp .welcome-card .subtitle,
border: 0;
#mp .welcome-card .stats{ text-align:center; font-size:1.05rem; }
/* @noflip */
@media (min-width:900px){
border-right: 1px solid #a2a9b1;
  #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; }

Latest revision as of 22:40, 21 August 2025

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