8,290
edits
MediaWiki:Mobile.css: Difference between revisions
add styles for Template:Item/CoreStats
mNo edit summary |
(add styles for Template:Item/CoreStats) |
||
| Line 185: | Line 185: | ||
b { | b { | ||
font-weight: 700; /* fix for firefox additive bolding when there are multiple nested <b> tags */ | font-weight: 700; /* fix for firefox additive bolding when there are multiple nested <b> tags */ | ||
} | |||
/* | |||
* QUD STYLES - TOOLTIPS | |||
* ===================== | |||
*/ | |||
.qud-tooltip { | |||
position: relative; | |||
} | |||
.qud-tooltip .qud-tooltip-text { | |||
visibility: hidden; | |||
width: 120px; | |||
background-color: var(--qud-bg-color-darker); | |||
color: var(--qud-color-y); | |||
text-align: center; | |||
padding: 5px 0; | |||
border-radius: 6px; | |||
font-size: calc(0.23em + 7px); | |||
position: absolute; | |||
z-index: 1; | |||
width: 120px; | |||
bottom: 100%; | |||
left: 50%; | |||
margin-left: -60px; /* half of the width */ | |||
border: 1px solid rgba(177,201,195,0.1); | |||
} | |||
.qud-tooltip .qud-tooltip-text.qud-tooltip-wide { | |||
width: 160px; | |||
margin-left: -80px; | |||
} | |||
.qud-tooltip > sup + .qud-tooltip-text { | |||
font-weight: normal; | |||
} | |||
.qud-tooltip.mobile-visible:hover .qud-tooltip-text, | |||
.qud-tooltip.mobile-visible:focus .qud-tooltip-text { | |||
/* must be explicitly enabled for mobile using mobile-visible class */ | |||
visibility: visible; | |||
} | |||
.qud-tooltip-ulabel { /* apply ulabel class for dotted underline on tooltip word */ | |||
text-decoration: underline dotted rgba(177,201,195,0.7); | |||
} | |||
/* extend-line style uses dynamic width extending rightward from tooltip text (instead of fixed width centered tooltip) */ | |||
.qud-tooltip > span.qud-tooltip-text.extend-line { | |||
width:auto; | |||
white-space: nowrap; | |||
padding: 0.8em 1em; | |||
margin-left: -0.5em; | |||
left:0; | |||
right:auto; | |||
top:auto; | |||
bottom:100%; | |||
margin-left:unset; | |||
} | |||
/* style superscripts - intended to contain a question mark for tooltip hover (other symbols might work but are untested) */ | |||
.qud-tooltip > sup { | |||
display: inline-block; | |||
width:9px; | |||
height:9px; | |||
line-height:9px; | |||
border-radius:20px; | |||
margin-left: 3px; | |||
margin-right: 3px; | |||
border:1px solid #cccccc; | |||
text-align:center; | |||
padding:1px; | |||
font-family:'Source Code Pro','Lucida Console',Monaco,'Courier New',Courier; | |||
font-size:10px; | |||
font-weight:100; | |||
} | |||
.qud-tooltip sup, | |||
.qud-tooltip .qud-tooltip-ulabel { | |||
transition: all 0.15s; | |||
} | |||
.qud-tooltip.mobile-visible:hover sup, | |||
.qud-tooltip.mobile-visible:focus sup { | |||
transform: scale(1.15, 1.15); | |||
color: var(--qud-color-c); | |||
border-color: var(--qud-color-c); | |||
font-weight: bold; | |||
} | |||
.qud-tooltip.mobile-visible:hover .qud-tooltip-ulabel, | |||
.qud-tooltip.mobile-visible:focus .qud-tooltip-ulabel { | |||
text-decoration-color: var(--qud-color-c); | |||
} | } | ||
/* | /* | ||
| Line 327: | Line 409: | ||
top: .8em; | top: .8em; | ||
right: 1em; | right: 1em; | ||
} | } | ||
/* | /* | ||
| Line 526: | Line 526: | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
.qud-roll-range { | .qud-roll-range, .qud-roll-average { | ||
font-style: italic; | font-style: italic; | ||
display: block; | display: block; | ||
| Line 825: | Line 825: | ||
display: inline-block; | display: inline-block; | ||
text-decoration: none; | text-decoration: none; | ||
} | |||
/* | |||
* QUD ITEM - CORE STATS | |||
* ===================== | |||
*/ | |||
.qud-item-stats-entry > .qud-tooltip-text { | |||
transition: all 0.1s; | |||
color: var(--qud-color-y-dark); | |||
} | |||
.qud-item-stats-entry:hover > .qud-tooltip-text { | |||
transform: scale(0.8695652, 0.8695652) translateY(3px); | |||
} | |||
.qud-item-stats { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
color: var(--qud-color-y); | |||
} | |||
.qud-item-stats > .qud-item-stats-entry-wrap { | |||
flex: 1 0 50%; | |||
text-align: center; | |||
font-size: 1.7em; | |||
font-family: var(--qud-font-terminal1); | |||
white-space: nowrap; | |||
font-weight: bold; | |||
margin: 0.1em 0; | |||
} | |||
.qud-item-stats-entry { | |||
display: inline-block; | |||
transition: all 0.1s; | |||
} | |||
.qud-item-stats-entry:hover { | |||
transform: scale(1.15, 1.15); | |||
} | |||
.qud-item-stats-entry > div { | |||
display: inline-block; | |||
padding: 0 0.1em; | |||
} | |||
.qud-item-stat-symbol.symbol-lb { | |||
margin-right: -0.3em; /* visual tweak to make this look more "centered" */ | |||
padding-left: 0.3em; | |||
opacity: 0.9; | |||
} | |||
.qud-item-stat-symbol.symbol-dram { | |||
color: var(--qud-color-b); /* should be color "w" if trade good */ | |||
padding-right: 0; | |||
} | |||
.symbol-dram + .qud-item-stat-value { | |||
color: var(--qud-color-c); | |||
padding-left: 0; | |||
} | |||
.qud-item-stat-symbol > .qud-stat-icon { | |||
padding-right: 0px; /* normalize padding to match non-"qud-stat-icon" symbols */ | |||
} | |||
.qud-max-pv { | |||
color: var(--qud-color-k); | |||
} | } | ||