Difference between revisions of "MediaWiki:Common.css"
From Alter Aeon Wiki
m |
m |
||
Line 1: | Line 1: | ||
html { | html { | ||
--aa-rarity-rare: | --aa-rarity-rare-rgb: 255, 255, 0; | ||
--aa-rarity-artifact: | --aa-rarity-rare: rgb(var(--aa-rarity-rare-rgb)); | ||
--aa-rarity-epic: | --aa-rarity-artifact-rgb: 255, 136, 0; | ||
--aa-rarity-relic: | --aa-rarity-artifact: rgb(var(--aa-rarity-artifact-rgb)); | ||
--aa-rarity-unique: | --aa-rarity-epic-rgb: 255, 0, 255; | ||
--aa-rarity-antique: # | --aa-rarity-epic: rgb(var(--aa-rarity-artifact-epic)); | ||
--aa-rarity-relic-rgb: 255, 0, 255; | |||
--aa-rarity-relic: rgb(var(--aa-rarity-relic-epic)); | |||
--aa-rarity-unique-rgb: 0, 255, 255; | |||
--aa-rarity-unique: rgb(var(--aa-rarity-unique-epic)); | |||
--aa-rarity-antique-rgb: 0, 255, 255; | |||
--aa-rarity-antique: rgb(var(--aa-rarity-antique-epic)); | |||
--aa-item-bg-color: #171510; | |||
--aa-item-header-color: #252017; | |||
} | } | ||
Line 108: | Line 116: | ||
.item { | .item { | ||
display: flex; | display: flex; | ||
position: relative; | |||
flex-direction: column; | flex-direction: column; | ||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), | ||
Line 114: | Line 123: | ||
border: 1px solid #685635; | border: 1px solid #685635; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
background-color: | background-color: var(--aa-item-bg-color); | ||
color: #e0e0e0; | color: #e0e0e0; | ||
font-size: 1rem; | font-size: 1rem; | ||
Line 128: | Line 137: | ||
} | } | ||
.item__header { | .item__header { | ||
background-color: | background-color: var(--aa-item-header-color); | ||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), | ||
0 1px 5px 0 rgba(0, 0, 0, 0.12), | 0 1px 5px 0 rgba(0, 0, 0, 0.12), | ||
Line 216: | Line 225: | ||
.item--artifact .item__type__desc { | .item--artifact .item__type__desc { | ||
color: var(--aa-rarity-artifact); | color: var(--aa-rarity-artifact); | ||
} | |||
.item.item--artifact { | |||
background: var(--aa-item-bg-color) linear-gradient(45deg, rgb(var(--aa-rarity-artifact-rgb), 0.1) 0%, transparent 50%); | |||
} | } | ||
.item--rare .item__header__name a, | .item--rare .item__header__name a, |
Revision as of 23:12, 24 February 2021
html { --aa-rarity-rare-rgb: 255, 255, 0; --aa-rarity-rare: rgb(var(--aa-rarity-rare-rgb)); --aa-rarity-artifact-rgb: 255, 136, 0; --aa-rarity-artifact: rgb(var(--aa-rarity-artifact-rgb)); --aa-rarity-epic-rgb: 255, 0, 255; --aa-rarity-epic: rgb(var(--aa-rarity-artifact-epic)); --aa-rarity-relic-rgb: 255, 0, 255; --aa-rarity-relic: rgb(var(--aa-rarity-relic-epic)); --aa-rarity-unique-rgb: 0, 255, 255; --aa-rarity-unique: rgb(var(--aa-rarity-unique-epic)); --aa-rarity-antique-rgb: 0, 255, 255; --aa-rarity-antique: rgb(var(--aa-rarity-antique-epic)); --aa-item-bg-color: #171510; --aa-item-header-color: #252017; } body { font-size: 14px; } #mw_main { font-size: 100% !important; } /* Title CSS */ #mw_contentholder h1 { overflow: visible; font-size: 2.5em; border-bottom: none; } #mw-content-text > h2 { font-size: 2em; } #mw-content-text > h2, #mw-content-text h3, #mw-content-text h4 { border-bottom: 1px solid #292929; } #mw_contentholder > h1, #mw-content-text > h2 { font-family: 'IM Fell DW Pica', serif; font-weight: normal; } #p-personal { top: 0 !important; } /* CSS placed here will be applied to all skins */ table.zebra tr:nth-child(odd) { } table.wikitable td.subheader { font-weight:normal; text-align: center; font-style: italic; } table.wikitable td ul { text-align:left; } /* Template list hack */ table.wikitable td hr { display: none; } /* Skill/Spell and Quest Table styles */ table.spelltable tr td, table.questtable tr td { text-align: center; } table.spelltable tr th, table.questtable tr th { text-align: center; } table.questtable { table-layout:fixed; border-radius: 10px 10px 0 0; border-collapse: inherit; margin: 0 1em 1em 0; } table.questtable table, table.queststeptable, table.queststeptable table, table.questfootertable table { table-layout:fixed; } table.questtable tr th, table.questtable tr td { border: none; padding: 0; } table.questtable tr:first-child th { border-bottom: 2px solid #555; background-color: #222; border-radius: 8px 8px 0 0; } table.questtable table tr:first-child th { border: none; background-color: transparent; } table.queststeptable { margin: 0 1em 1em 0; } table.stepnumber { background-color: #222; color: #eeddcc } table.stepnumber tr:first-child { font-size: 70%; } table.stepnumber tr:last-child { font-size: 130%; font-family: serif; } table.queststeptable tr:first-child td:first-child { background-color: #222; } table.questfootertable tr th, table.questfootertable tr td { border: none; padding: 0; } table.questfootertable { table-layout:fixed; border-radius: 0 0 10px 10px ; border-collapse: inherit; } table.questfootertable tr:last-child th { border-top: 2px solid #555; background-color: #222; border-radius: 0 0 8px 8px; } table.questfootertable table tr:last-child th { border: none; background-color: transparent; } table.collapsed tr.collapsible { display: none; } .collapseButton { font-weight: normal; text-align: left; } /* Inline code style */ span.icode { color: #eeddcc; border: 1px dashed #aa6600; background-color: #303030; font-family: monospace; padding: 0.1em 0.5em 0.1em 0.5em; } /* MUD output pre tags */ pre.mud-output { color: #eeddcc; background-color: #222; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); border: 1px solid #cc6600; } .item { display: flex; position: relative; flex-direction: column; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); border: 1px solid #685635; font-family: sans-serif; background-color: var(--aa-item-bg-color); color: #e0e0e0; font-size: 1rem; font-family: 'Cinzel', serif; line-height: 1.4rem; width: 320px; overflow: hidden; text-shadow: 1px 1px 2px #000; } .item > * { padding: 8px; position: relative; } .item__header { background-color: var(--aa-item-header-color); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } .item__header__name { margin: 0; border: none !important; font-size: 1.2rem; line-height: 1.6rem; text-transform: capitalize; font-family: 'IM Fell DW Pica',serif; } .item__header__name a, .item__header__name a.new { color: #fff; } .item__type { display: flex; } .item__type__desc { flex: 1; } .item__type__typename { text-transform: capitalize; } .item__type__slot { font-size: 0.8rem; } .item__divider { padding: 0; margin: 0 16px; border-bottom: 1px solid rgba(127, 127, 127, 0.9); } .item__weapon-stats__range { color: #fff; font-weight: 600; font-size: 1.4rem; } .item__weapon-stats__speed { text-transform: capitalize; } .item__weapon-stats__type { margin-left: 4px; display: inline-block; text-transform: capitalize; } .item__armor-stats__ac { color: #fff; } .item__affects { margin: 0 !important; padding: 8px !important; list-style: none; color: #fff; flex: 1; } .item__affects__affect { padding-left: 16px; position: relative; text-transform: capitalize; } .item__affects__affect--negative { color: #f00; } .item__requirements { color: #fff; margin: 0; list-style: none; text-align: right; } .item__requirements__flags { padding: 0; margin: 0; } .item__requirements__flags > * { display: inline-block; } .item__requirements__binding { color: #0f0; } .item__keywords { font-size: 0.8rem; } .item--artifact .item__header__name a, .item--artifact .item__header__name a.new, .item--artifact .item__type__desc { color: var(--aa-rarity-artifact); } .item.item--artifact { background: var(--aa-item-bg-color) linear-gradient(45deg, rgb(var(--aa-rarity-artifact-rgb), 0.1) 0%, transparent 50%); } .item--rare .item__header__name a, .item--rare .item__header__name a.new, .item--rare .item__type__desc { color: var(--aa-rarity-rare); } .item--epic .item__header__name a, .item--epic .item__header__name a.new, .item--epic .item__type__desc { color: var(--aa-rarity-epic); } .item--relic .item__header__name a, .item--relic .item__header__name a.new, .item--relic .item__type__desc { color: var(--aa-rarity-relic); } .item--unique .item__header__name a, .item--unique .item__header__name a.new, .item--unique .item__type__desc { color: var(--aa-rarity-unique); } .item--antique .item__header__name a, .item--antique .item__header__name a.new, .item--antique .item__type__desc { color: var(--aa-rarity-antique); } .item-gallery { display: flex; flex-wrap: wrap; } .item-gallery > .item { margin: 8px; }