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 22:17, 18 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;
  margin-left: 35px;
  max-width: 300px;
  background: #f6f6f6;
  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: color-mix(in srgb, #3288bd, transparent 50%);
}
.table-bg-common,
.table-bg-green {
  background: color-mix(in srgb, #abdda4, transparent 50%);
}
.table-bg-uncommon,
.table-bg-yellow {
  background: color-mix(in srgb, #fee08b, transparent 50%);
}
.table-bg-rare,
.table-bg-orange {
  background: color-mix(in srgb, #f46d43, transparent 50%);
}
.table-bg-veryrare,
.table-bg-red {
  background: color-mix(in srgb, #d53e4f, transparent 50%);
}
.table-bg-random,
.table-bg-pink {
  background: color-mix(in srgb, #5e4fa2, transparent 50%);
  color: #f8f9fa;
}
.table-bg-gray,
.table-bg-grey {
  background:#5d6773;
}
.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; }

.tile-halves {
  background: #5b4d48;
  border: none;
}
.mainpage-social {
  border: none;
  box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3);
}
.tile-halves {
  display: flex;
  flex-flow: row wrap;
  background: var(--tile-background-color);
  box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.1);
}

.mainpage-social.mainpage-discord .tile-top {
  background: #5865f2;
}
.mainpage-social .tile-top {
  display: flex;
  align-items: center;
  padding: 1em 1.5em;
}
.tile-top {
  width: 100%;
  padding: 1.3rem 1.5rem 0.6rem;
}

.mainpage-social .social-icon {
  margin-right: 0.75em;
  text-align: center;
  width: 60px;
}

.mainpage-social .arrow {
  position: absolute;
  top: calc(50% - .5em);
  right: 0;
  height: 1em;
  width: 0.7em;
  background-size: 0.7em 1em;
  transition: 0.3s ease-out;
    transition-duration: 0.3s;
}
.arrow {
  background: url(https://brightershoreswiki.org/images/White-chevron.svg) no-repeat;
    background-size: auto;
  display: inline-block;
  height: 0.7rem;
  width: 0.45rem;
  vertical-align: middle;
}

.mainpage-social .social-header {
  color: #fff;
  font-weight: bold;
  font-size: 1.15em;
  margin: 0.5em 0 -0.15em;
}

.mainpage-social .server-tagline {
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5em;
}

.mainpage-social.mainpage-discord .tile-bottom {
  background: #525ee0;
}

.mainpage-social .tile-bottom p {
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

/* Sidebar Discord */
#n-Discord a {
  color:#fff !important;
  font-weight:bold;
  border-radius:4px;
  border:1px solid #4c57d0;
  background-color:#5865f2;
  display:block;
  position:relative;
  padding:4px 4px 5px calc(17px + 6.5px * 2);
  box-shadow:0 2px 3px rgba(0,0,0,0.1);
  transition:0.2s
}
#n-Discord a::before {
  content:'Chat on ';
  font-weight:normal;
  opacity:0.85
}
#n-Discord a::after {
  content:'';
  background:url(https://brightershoreswiki.org/images/Discord_logo_icon.svg) no-repeat;
  background-size:17px 13px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.1));
  position:absolute;
  top:5px;
  left:7px;
  width:17px;
  height:13px
}
#n-Discord a:hover {
  text-decoration:none;
  background-color:#525ee0
}
Retrieved from "https://highspell.wiki/w/index.php?title=MediaWiki:Common.css&oldid=4439"