Still landing on the old Fandom wiki? Install the HighSpell Wiki Redirector browser extension to automatically redirect all highspell.fandom.com links to highspell.wiki. Works on both Firefox and Chrome, and is open-source. → Learn more and install it now!

MediaWiki:Common.css

From HighSpell Wiki
Revision as of 21:15, 17 May 2025 by Ryan (talk | contribs)
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.
/* CSS placed here will be applied to all skins */

/* Float infoboxes to the right */
.infobox {
  float: right;
  clear: right;
  margin: 0 0 1em 1em;
}

/* Hide page name on the home page */
body.page-Main_Page h1#firstHeading {
  display: none !important;
}

/* Prettify stub boxes */
.stub-box {
  max-width: 600px;
  display: flex;
  align-items: center;
  background-color: #e9e9e9;
  border-left: 4px solid #09bb62;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 0.95em;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.stub-image {
  display: flex;
  align-items: center;
  margin-right: 10px;
  padding: 0;
}
.stub-image img {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}
.stub-text {
  text-align: left;
  line-height: 1.4em;
}
.stub-word {
  color: #4f504c;
}

/* Main page stuff */
.mainpage-header {
  display: flex;
}
.mainpage-header .header-intro {
  flex: 2;
  max-width: 770px;
  background: #f6f6f6;
  padding: 0px 20px 20px;
  border-radius: 12px;
  font-family: sans-serif;
  color: #101418;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.mainpage-header .header-stats {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  max-width: 200px;
  background: #f6f6f6;
  padding: 0px 20px 20px;
  border-radius: 12px;
  font-family: sans-serif;
  color: #101418;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.header-stats ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Cell data alignments */
.cell-data-center {
  text-align: center;
}
.cell-data-left {
  text-align: left;
}
.cell-data-right {
  text-align: right;
}

/* Drop table background colors */
.table-bg-always,
.table-bg-blue {
  background:#0b5884;
  color:#f8f9fa;
}
.table-bg-common,
.table-bg-green {
  background:#3c780a;
  color:#f8f9fa;
}
.table-bg-uncommon,
.table-bg-yellow {
  background:#a48900;
  color:#f8f9fa;
}
.table-bg-rare,
.table-bg-orange {
  background:#b55e0c;
  color:#f8f9fa;
}
.table-bg-veryrare,
.table-bg-red {
  background:#9f261e;
  color:#f8f9fa;
}
.table-bg-random,
.table-bg-pink {
  background:#984c89;
  color:#f8f9fa;
}
.table-bg-gray,
.table-bg-grey {
  background:#5d6773;
  color:#f8f9fa;
}
.table-bg-fade {
  opacity:0.6;
  background:rgba(0,0,0,0.1)
}

/* Frontpage stuff */
.skill-wrapper {
  max-width: 810px;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 18px;
  background: #f6f6f6;
  padding: 20px;
  border-radius: 12px;
  font-family: sans-serif;
  color: #101418;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.skill {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background 0.2s ease;
  cursor: pointer;
}

.skill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-right: 10px;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  text-align: center;
  font-size: 16px;
}

/* Hover Backgrounds */
.skill-hitpoints:hover { background-color: #f2da85; }
.skill-accuracy:hover { background-color: #d6f47c; }
.skill-strength:hover { background-color: #a6fc7b; }
.skill-defense:hover { background-color: #efc181; }
.skill-magic:hover { background-color: #f9b7b6; }
.skill-range:hover { background-color: #a372e0; }
.skill-cooking:hover { background-color: #c7c2fc; }
.skill-crafting:hover { background-color: #f78acd; }
.skill-mining:hover { background-color: #abfcf8; }
.skill-crime:hover { background-color: #adbbff; }
.skill-enchanting:hover { background-color: #81efaf; }
.skill-fishing:hover { background-color: #a4fce7; }
.skill-forestry:hover { background-color: #fcc7f2; }
.skill-harvesting:hover { background-color: #f9dfb3; }
.skill-potionmaking:hover { background-color: #98b7f9; }
.skill-smithing:hover { background-color: #ff7cf1; }

/* Always-colored icon boxes */
.skill-hitpoints .skill-icon { background-color: #f2da85; }
.skill-accuracy .skill-icon { background-color: #d6f47c; }
.skill-strength .skill-icon { background-color: #a6fc7b; }
.skill-defense .skill-icon { background-color: #efc181; }
.skill-magic .skill-icon { background-color: #f9b7b6; }
.skill-range .skill-icon { background-color: #a372e0; }
.skill-cooking .skill-icon { background-color: #c7c2fc; }
.skill-crafting .skill-icon { background-color: #f78acd; }
.skill-mining .skill-icon { background-color: #abfcf8; }
.skill-crime .skill-icon { background-color: #adbbff; }
.skill-enchanting .skill-icon { background-color: #81efaf; }
.skill-fishing .skill-icon { background-color: #a4fce7; }
.skill-forestry .skill-icon { background-color: #fcc7f2; }
.skill-harvesting .skill-icon { background-color: #f9dfb3; }
.skill-potionmaking .skill-icon { background-color: #98b7f9; }
.skill-smithing .skill-icon { background-color: #ff7cf1; }