Difference between revisions of "Common.css"
m (fix Special:Ask help menu color clash)
 
(144 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
body {
+
/* DARK THEMES */
−
background: #111217;
+
body.skin-darkbootstrap, body.skin-dark {
−
color: #f0f2f5;
+
/* class colors */
−
/*font-family: 'IBM Plex Sans', sans-serif;*/
+
--hero--bomber: #fb5f5f;
 +
--hero--champion: #9557cc;
 +
--hero--mercenary: #b23f1d;
 +
--hero--pain-reaper: #381539;
 +
--hero--paladin: #b46f08; /* adjusted */
 +
--hero--warmonger: #b8312f;
 +
 +
/* location colors */
 +
--location--camp: #838148;
 +
--location--dungeon: #56204c;
 +
--location--zone: #056f03;
 +
 +
/* NPC colors */
 +
--NPC--ally: #169011;
 +
--NPC--neutral: #df8234;
 +
--NPC--enemy: #af211d;
 +
 +
/* item colors */
 +
--quality--common: #978c97; /* adjusted from #cebece */
 +
--quality--uncommon: #21ab29;
 +
--quality--rare: #009fd9;
 +
--quality--epic: #ba4ab0;
 +
--quality--legendary: #efac39;
 +
--quality--quest-item: #ffb629;
 
}
 
}
  
−
.p-navbar .navbar-brand img {
+
/* CLASS COLORS */
−
height: 23px;
+
.bomber { background-color: var(--hero--bomber) !important; }
−
top: -2px;
+
.champion { background-color: var(--hero--champion) !important; }
−
}
+
.mercenary { background-color: var(--hero--mercenary) !important; }
 +
.pain.reaper { background-color: var(--hero--pain-reaper) !important; }
 +
.paladin { background-color: var(--hero--paladin) !important; }
 +
.warmonger { background-color: var(--hero--warmonger) !important; }
  
−
.row {
+
/* LOCATION COLORS */
−
margin-left: 0;
+
.location-camp { background-color: var(--location--camp) !important; }
−
margin-right: 0;
+
.location-dungeon { background-color: var(--location--dungeon) !important; }
−
}
+
.location-zone { background-color: var(--location--zone) !important; }
  
−
.container {
+
/* NPC COLORS */
−
max-width: 1460px;
+
.NPC-ally { background-color: var(--NPC--ally) !important; }
−
padding-right: 0;
+
.NPC-ally img { border: 1px solid var(--NPC--ally) !important; }
−
padding-left: 0;
 
−
}
 
  
−
.mw-body {
+
.NPC-neutral { background-color: var(--NPC--neutral) !important; }
−
padding: 0;
+
.NPC-neutral img { border: 1px solid var(--NPC--neutral) !important; }
−
margin-bottom: 1rem;
 
−
}
 
  
−
.main-container {
+
.NPC-enemy { background-color: var(--NPC--enemy) !important; }
−
background: #1b1c23;
+
.NPC-enemy img { border: 1px solid var(--NPC--enemy) !important; }
−
box-shadow: 0 1px 5px 1px rgba(0,0,0,.4);
 
−
}
 
  
−
.p-navbar {
+
/* spans */
−
background-color: #262831;
+
span.NPC-ally { color: var(--NPC--ally) !important; background-color: transparent !important; }
−
box-shadow: 0 1px 5px 1px rgba(0,0,0,.4);
+
span.NPC-neutral { color: var(--NPC--neutral) !important; background-color: transparent !important; }
−
}
+
span.NPC-enemy { color: var(--NPC--enemy) !important; background-color: transparent !important; }
  
−
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+
/* QUEST COLORS */
−
color: #fff;
+
.quest { background-color: var(--quality--quest-item) !important; }
−
padding: 0;
 
−
margin-top: 1rem!important;
 
−
margin-bottom: 0.75rem!important;
 
−
border: none;
 
−
/*font-family: 'PT Serif', serif;
 
−
font-weight: 700;*/
 
−
}
 
  
−
h2, .h2 {
+
/* ITEM COLORS */
−
margin-top: 2rem!important;
+
/* normal */
−
}
+
.quality-common { background-color: var(--quality--common) !important; }
 +
.quality-common img { border: 1px solid var(--quality--common) !important; }
  
−
a, a[href].external {
+
.quality-uncommon { background-color: var(--quality--uncommon) !important; }
−
color: #f9a916;
+
.quality-uncommon img { border: 1px solid var(--quality--uncommon) !important; }
−
}
 
  
−
a:hover, a[href].external:hover {
+
.quality-rare { background-color: var(--quality--rare) !important; }
−
color: #f9a916;
+
.quality-rare img { border: 1px solid var(--quality--rare) !important; }
−
opacity: 0.6;
 
−
text-decoration: none;
 
−
}
 
  
−
a:visited {
+
.quality-epic { background-color: var(--quality--epic) !important; }
−
color: #f9a916;
+
.quality-epic img { border: 1px solid var(--quality--epic) !important; }
−
}
 
  
−
a[href].new {
+
.quality-legendary { background-color: var(--quality--legendary) !important; }
−
color: #ff0000;
+
.quality-legendary img { border: 1px solid var(--quality--legendary) !important; }
−
}
 
  
−
a[href].new:hover {
+
.quality-quest-item { background-color: var(--quality--quest-item) !important; }
−
color: #ff0000;
+
.quality-quest-item img { border: 1px solid var(--quality--quest-item) !important; }
−
text-decoration: none;
 
−
}
 
  
−
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+
/* spans */
−
opacity: 1;
+
span.quality-common { color: var(--quality--common) !important; background-color: transparent !important; }
−
}
+
span.quality-uncommon { color: var(--quality--uncommon) !important; background-color: transparent !important; }
 +
span.quality-rare { color: var(--quality--rare) !important; background-color: transparent !important; }
 +
span.quality-epic { color: var(--quality--epic) !important; background-color: transparent !important; }
 +
span.quality-legendary { color: var(--quality--legendary) !important; background-color: transparent !important; }
 +
span.quality-quest-item { color: var(--quality--quest-item) !important; background-color: transparent !important; }
  
−
.navbar-light .navbar-nav .nav-link, .p-navbar .navbar-nav .nav-link, .navbar-light .navbar-nav .p-navbar .navbar-tool > a, .p-navbar .navbar-light .navbar-nav .navbar-tool > a, .p-navbar .navbar-nav .navbar-tool > a {
+
.recipe-img { position: relative; width: 85px; height: 85px; }
−
color: #cacaca;
+
/* create diagonal line through image */
 +
.recipe-img::after {
 +
  position: absolute;
 +
  content: "";
 +
  left: 0px;
 +
  top: 35px;
 +
  right: -10px;
 +
  border-top: 3px black solid;
 +
  -webkit-transform: rotate(45deg);
 +
  -moz-transform: rotate(45deg);
 +
  -ms-transform: rotate(45deg);
 +
  -o-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 
}
 
}
  
−
.navbar-light .navbar-nav .nav-link:hover, .p-navbar .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .p-navbar .navbar-tool > a:hover, .p-navbar .navbar-light .navbar-nav .navbar-tool > a:hover, .p-navbar .navbar-nav .navbar-tool > a:hover, .navbar-light .navbar-nav .nav-link:focus, .p-navbar .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .p-navbar .navbar-tool > a:focus, .p-navbar .navbar-light .navbar-nav .navbar-tool > a:focus, .p-navbar .navbar-nav .navbar-tool > a:focus {
+
/* GENERAL FORMATTING */
−
color: #fff;
+
a.selflink, a.mw-selflink { color: var(--text-color); font-weight: 700; } /* format selflinks */
−
opacity: 1;
+
a.selflink:hover, a.mw-selflink:hover { color: var(--text-color); } /* fix selflink color change when hover */
−
}
+
.thumb { overflow: scroll; } /* scrollable images on smaller viewports */
 +
.smw-callout-error { background: var(--background-color--secondary); } /* semanti MediaWiki error text background */
 +
.smw-callout-warning { background: var(--background-color--secondary); } /* semantic MediaWiki warning text contrast */
 +
span.smwb-value { color: var(--background-color--secondary); }/* semantic MediaWiki value text contrast */
 +
.mw-content-ltr dl dl { margin-left: 1.6em; }/* indents for dialogue */
 +
.mw-content-ltr dd { margin-top: .5rem; }/* spacing for dialogue */
  
−
.fa-asterisk:before, .navbar-tool-link:before {
+
/* TABLES */
−
content: "";
+
#used-in .wikitable {
 +
float: left;
 +
margin-right: 16px;
 
}
 
}
  
−
#mw-indicators {
+
.wikitable > tr > th, .wikitable > * > tr > th {
−
display: none;
+
background-color: #ffffff1a;
 +
text-align: left;
 
}
 
}
−
 
+
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
−
.text-muted {
+
border: none;
−
color: rgb(255 255 255 / 0.6) !important;
+
border-bottom: 1px solid #1b1c23;
−
}
 
−
 
 
−
.toc {
 
−
float: right;
 
 
padding: 0.5rem 0.75rem;
 
padding: 0.5rem 0.75rem;
−
border-radius: 0.25rem;
 
−
clear: right;
 
−
margin-bottom: 1rem;
 
−
margin-left: 1rem;
 
 
}
 
}
−
 
+
.wikitable {
−
.toc, .mw-warning, .toccolours {
+
background: var(--background-color--secondary);
 +
color: #f0f2f5;
 +
width: auto;
 
border: none;
 
border: none;
−
background-color: #262831;
+
font-size: 0.9rem;
 +
margin-bottom: 1rem;
 
}
 
}
  
−
.mw-body .toc ul li a .tocnumber {
+
table.mw-abuselog-details { background-color: var(--background-color--secondary); } /* fix abuse log color clash */
−
display: none;
+
table.mw-abuselog-details th { background-color: var(--background-color--primary); }
−
}
+
table.mw_metadata { color: var(--background-color--secondary); } /* fix image metadata color clash */
 +
table.mw_metadata a { color: blue !important; text-decoration: underline !important; }
  
−
.toctogglelabel {
+
.smw-ask-options-row-odd { background: none; } /* fix Special:Ask color clash */
−
color: #f9a916;
+
.smw-ask-options-row-even { background: none; } /* fix Special:Ask color clash */
−
}
+
#ask-help .smw-modal-content { background-color: var(--background-color--secondary); } /* fix Special:Ask help menu color clash */
 +
#options-toggle:not(:checked) + #options-list .options-parameter-list::after { background-image: none; }
  
−
.toctogglelabel:hover {
+
.infobox-right {
−
color: #f9a916;
 
−
opacity: 0.6;
 
−
text-decoration: none;
 
−
}
 
−
 
 
−
.toc .toctitle {
 
−
text-align: left;
 
−
}
 
−
 
 
−
.mw-body .toc ul li ul {
 
−
margin-left: 1.5rem;
 
−
}
 
−
 
 
−
.floatright {
 
 
float: right;
 
float: right;
 +
position: relative;
 +
background: var(--background-color--primary);
 +
margin: 0 0 1em 1em;
 +
padding: 0;
 
}
 
}
−
 
+
.skill-infobox-row-heading {
−
.mw-body .firstHeading {
+
border-right: 3px solid #3c3e46!important;
−
border-bottom: none;
+
border-bottom: none !important;
 +
text-align: right;
 +
width: auto;
 
}
 
}
−
 
+
.skill-infobox-row-data {
−
.table {
+
word-break: break-word;
−
color: #f0f2f5;
+
border-bottom: none !important;
−
font-size: 0.9rem;
 
 
}
 
}
−
 
+
@media screen and (max-width: 500px) {
−
.table-hover tbody tr:hover {
+
.infobox-right {
−
color: #f0f2f5;
+
float: none!important;
−
}
+
margin: 0 auto!important;
−
 
+
margin-bottom: 1rem!important;
−
.table th {
+
width: 100%!important;
−
color: #fff;
+
}
−
white-space: nowrap;
 
−
}
 
−
 
 
−
.table th, .table td {
 
−
background: #262831;
 
−
border-top: 1px solid #1b1c23;
 
 
}
 
}
  
 
.skill-row {
 
.skill-row {
 
padding: 0.75rem;
 
padding: 0.75rem;
−
background: #262831;
+
background: var(--background-color--secondary);
 
margin-bottom: 1rem;
 
margin-bottom: 1rem;
 
border-radius: 0.25rem;
 
border-radius: 0.25rem;
 
}
 
}
  
−
div.tright {
+
/* REDUCED MOTION SETTINGS */
−
margin-bottom: 1rem 0 1rem 1rem;
+
@media (prefers-reduced-motion: reduce)
−
}
+
{
−
 
+
  *, ::before, ::after
−
@media screen and (max-width: 768px) {
+
  {
−
.toc {
+
    animation-delay: -1ms !important;
−
float: none;
+
    animation-duration: 1ms !important;
−
margin-left: 0;
+
    animation-iteration-count: 1 !important;
−
}
+
    background-attachment: initial !important;
−
+
    scroll-behavior: auto !important;
−
div.tright, div.floatright, table.floatright {
+
    transition-duration: 0s !important;
−
width: 100%!important;
+
    transition-delay: 0s !important;
−
    float: none!important;
+
  }
−
    clear: none!important;
 
−
    margin: 1rem 0 1rem 0!important;
 
−
}
 
−
}
 
−
 
 
−
@media screen and (max-width: 425px) {
 
−
.toc {
 
−
width: 100%;
 
−
}
 
−
}
 
−
 
 
−
.table {
 
−
margin-bottom: 0;
 
−
}
 
−
 
 
−
.table th, .table td {
 
−
border: none;
 
−
}
 
−
 
 
−
table tr {
 
−
border-bottom: 1px solid #1b1c23;
 
−
}
 
−
 
 
−
table tr:last-child {
 
−
border-bottom: none;
 
−
}
 
−
 
 
−
.thumbinner {
 
−
border: none!important;
 
−
padding: 0.25rem!important;
 
−
background-color: #262831!important;
 
−
}
 
−
 
 
−
.thumbimage {
 
−
border: 1px solid #111217!important;
 
−
background: #111217!important;
 
 
}
 
}

Latest revision as of 09:18, 8 June 2024

/* DARK THEMES */
body.skin-darkbootstrap, body.skin-dark {
	/* class colors */
	--hero--bomber: #fb5f5f;
	--hero--champion: #9557cc;
	--hero--mercenary: #b23f1d;
	--hero--pain-reaper: #381539;
	--hero--paladin: #b46f08; /* adjusted */
	--hero--warmonger: #b8312f;
	
	/* location colors */
	--location--camp: #838148;
	--location--dungeon: #56204c;
	--location--zone: #056f03;
	
	/* NPC colors */
	--NPC--ally: #169011;
	--NPC--neutral: #df8234;
	--NPC--enemy: #af211d;
	
	/* item colors */
	--quality--common: #978c97; /* adjusted from #cebece */
	--quality--uncommon: #21ab29;
	--quality--rare: #009fd9;
	--quality--epic: #ba4ab0;
	--quality--legendary: #efac39;
	--quality--quest-item: #ffb629;
}

/* CLASS COLORS */
.bomber { background-color: var(--hero--bomber) !important; }
.champion { background-color: var(--hero--champion) !important; }
.mercenary { background-color: var(--hero--mercenary) !important; }
.pain.reaper { background-color: var(--hero--pain-reaper) !important; }
.paladin { background-color: var(--hero--paladin) !important; }
.warmonger { background-color: var(--hero--warmonger) !important; }

/* LOCATION COLORS */
.location-camp { background-color: var(--location--camp) !important; }
.location-dungeon { background-color: var(--location--dungeon) !important; }
.location-zone { background-color: var(--location--zone) !important; }

/* NPC COLORS */
.NPC-ally { background-color: var(--NPC--ally) !important; }
.NPC-ally img { border: 1px solid var(--NPC--ally) !important; }

.NPC-neutral { background-color: var(--NPC--neutral) !important; }
.NPC-neutral img { border: 1px solid var(--NPC--neutral) !important; }

.NPC-enemy { background-color: var(--NPC--enemy) !important; }
.NPC-enemy img { border: 1px solid var(--NPC--enemy) !important; }

/* spans */
span.NPC-ally { color: var(--NPC--ally) !important; background-color: transparent !important; }
span.NPC-neutral { color: var(--NPC--neutral) !important; background-color: transparent !important; }
span.NPC-enemy { color: var(--NPC--enemy) !important; background-color: transparent !important; }

/* QUEST COLORS */
.quest { background-color: var(--quality--quest-item) !important; }

/* ITEM COLORS */
/* normal */
.quality-common { background-color: var(--quality--common) !important; }
.quality-common img { border: 1px solid var(--quality--common) !important; }

.quality-uncommon { background-color: var(--quality--uncommon) !important; }
.quality-uncommon img { border: 1px solid var(--quality--uncommon) !important; }

.quality-rare { background-color: var(--quality--rare) !important; }
.quality-rare img { border: 1px solid var(--quality--rare) !important; }

.quality-epic { background-color: var(--quality--epic) !important; }
.quality-epic img { border: 1px solid var(--quality--epic) !important; }

.quality-legendary { background-color: var(--quality--legendary) !important; }
.quality-legendary img { border: 1px solid var(--quality--legendary) !important; }

.quality-quest-item { background-color: var(--quality--quest-item) !important; }
.quality-quest-item img { border: 1px solid var(--quality--quest-item) !important; }

/* spans */
span.quality-common { color: var(--quality--common) !important; background-color: transparent !important; }
span.quality-uncommon { color: var(--quality--uncommon) !important; background-color: transparent !important; }
span.quality-rare { color: var(--quality--rare) !important; background-color: transparent !important; }
span.quality-epic { color: var(--quality--epic) !important; background-color: transparent !important; }
span.quality-legendary { color: var(--quality--legendary) !important; background-color: transparent !important; }
span.quality-quest-item { color: var(--quality--quest-item) !important; background-color: transparent !important; }

.recipe-img { position: relative; width: 85px; height: 85px; }
/* create diagonal line through image */
.recipe-img::after {
  position: absolute;
  content: "";
  left: 0px;
  top: 35px;
  right: -10px;
  border-top: 3px black solid;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* GENERAL FORMATTING */
a.selflink, a.mw-selflink { color: var(--text-color); font-weight: 700; } /* format selflinks */
a.selflink:hover, a.mw-selflink:hover { color: var(--text-color); } /* fix selflink color change when hover */
.thumb { overflow: scroll; } /* scrollable images on smaller viewports */
.smw-callout-error { background: var(--background-color--secondary); } /* semanti MediaWiki error text background */
.smw-callout-warning { background: var(--background-color--secondary); } /* semantic MediaWiki warning text contrast */
span.smwb-value { color: var(--background-color--secondary); }/* semantic MediaWiki value text contrast */
.mw-content-ltr dl dl { margin-left: 1.6em; }/* indents for dialogue */
.mw-content-ltr dd { margin-top: .5rem; }/* spacing for dialogue */

/* TABLES */
#used-in .wikitable {
	float: left;
	margin-right: 16px;
}

.wikitable > tr > th, .wikitable > * > tr > th {
	background-color: #ffffff1a;
	text-align: left;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
	border: none;
	border-bottom: 1px solid #1b1c23;
	padding: 0.5rem 0.75rem;
}
.wikitable {
	background: var(--background-color--secondary);
	color: #f0f2f5;
	width: auto;
	border: none;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

table.mw-abuselog-details { background-color: var(--background-color--secondary); } /* fix abuse log color clash */
table.mw-abuselog-details th { background-color: var(--background-color--primary); }
table.mw_metadata { color: var(--background-color--secondary); } /* fix image metadata color clash */
table.mw_metadata a { color: blue !important; text-decoration: underline !important; }

.smw-ask-options-row-odd { background: none; } /* fix Special:Ask color clash */
.smw-ask-options-row-even { background: none; } /* fix Special:Ask color clash */
#ask-help .smw-modal-content { background-color: var(--background-color--secondary); } /* fix Special:Ask help menu color clash */
#options-toggle:not(:checked) + #options-list .options-parameter-list::after { background-image: none; }

.infobox-right {
	float: right;
	position: relative;
	background: var(--background-color--primary);
	margin: 0 0 1em 1em;
	padding: 0;
}
.skill-infobox-row-heading {
	border-right: 3px solid #3c3e46!important;
	border-bottom: none !important;
	text-align: right;
	width: auto;
}
.skill-infobox-row-data {
	word-break: break-word;
	border-bottom: none !important;
}
@media screen and (max-width: 500px) {
	.infobox-right {
		float: none!important;
		margin: 0 auto!important;
		margin-bottom: 1rem!important;
		width: 100%!important;
	}
}

.skill-row {
	padding: 0.75rem;
	background: var(--background-color--secondary);
	margin-bottom: 1rem;
	border-radius: 0.25rem;
}

/* REDUCED MOTION SETTINGS */
@media (prefers-reduced-motion: reduce)
{
  *, ::before, ::after
  {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
Retrieved from "https://corepunk.wiki/w/index.php?title=MediaWiki:Common.css&oldid=9626"