Difference between revisions of "Common.css"

Revision as of 15:30, 14 January 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--city: #9c8c6b;
	--location--dungeon: #56204c;
	--location--zone: #056f03;
	
	/* NPC colors */
	--NPC--ally: #169011;
	--NPC--neutral: #df8234;
	--NPC--enemy: #af211d;
	
	/* item colors */
	--quality--common: #b5a7b5; /* 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-city { background-color: var(--location--city) !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-neutral { background-color: var(--NPC--neutral) !important; }
.NPC-enemy { background-color: var(--NPC--enemy) !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 { background-color: 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; }

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

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

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

.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;
  }
}