Bureaucrats, editor, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
47,327
edits
MediaWiki:Common.less/gemw.less: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
Line 1:
/* ===================================
Exchange namespace formatting
=================================== */
:root {
--gemw-positive-color: @lima;
--gemw-unchanged-color: @curious-blue;
--gemw-negative-color: @flamingo;
--gemw-historical-border-color: @black;
}
.gemw-container {
max-width: 60em;
margin: 4em auto;
}
/* ------------------
header
------------------ */
.gemw-header {
display: flex;
border-left-width: .25em;
border-left-style: solid;
padding-left: 1em;
margin-bottom: 3em;
&.positive {
border-color: var(--gemw-positive-color);
}
&.negative {
border-color: var(--gemw-negative-color);
}
&.unchanged {
border-color: var(--gemw-unchanged-color);
}
.gemw-section-left {
flex: 1;
}
.gemw-name {
font-size: 1.15em;
font-weight: bold;
margin-bottom: 0;
a {
color: inherit;
}
}
.gemw-examine {
color: var(--byline-color);
font-size: 1.05em;
font-style: italic;
margin: 0 1em 1.25em 0;
}
.gemw-price {
display: inline-block; // for animation
font-size: 2.75em;
font-weight: bold;
&::after {
content: ' coins';
color: var(--byline-color);
font-size: 1rem;
font-weight: normal;
word-spacing: .25em;
}
}
.gemw-change {
display: inline-block; // for animation
font-size: 1rem;
font-weight: bold;
margin-left: 2em;
word-spacing: .5em;
img {
vertical-align: baseline;
}
}
.gemw-section-right {
text-align: right;
}
.gemw-updated {
color: var(--byline-color);
line-height: 1.5em;
margin-top: .25em;
}
.gemw-time {
color: var(--byline-color);
font-weight: bold;
}
}
/* ------------------
body
------------------ */
.gemw-body {
display: flex;
.gemw-section-left {
width: 40%;
margin-right: 2em;
dl {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin-bottom: -1.25em;
}
> div {
margin-top: 2em;
}
a {
color: var(--byline-color);
}
}
.gemw-property {
width: 30%;
border-top: .15em dotted var(--body-mid);
padding-top: .25em;
margin-bottom: 1.5em;
dt {
color: var(--byline-color);
font-weight: normal;
}
dd {
font-weight: bold;
margin: -0.25em 0 0;
}
}
.gemw-links {
color: var(--byline-color);
margin-bottom: .35em;
}
.gemw-section-right {
width: 60%;
}
}
/* historical overrides */
.gemw-container.gemw-historical {
.gemw-header {
&.positive, &.negative, &.neutral, &.unchanged {
border-color: var(--gemw-historical-border-color);
}
.gemw-time .jsPurgeLink, .gemw-time > span.plainlinks {
display: none;
}
.gemw-section-left:after {
content: "This is a historical item no longer available on the Grand Exchange. The data is preserved here as an archive.";
font-style: italic;
}
}
}
/* =================
GE Charts
================= */
// @todo overhaul this with the script
#overlay {
display: none;
background-color: var(--ooui-window-background);
height: auto;
width: auto;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 400; // https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
}
// fix an issue with chrome ignoring the set colours for some reason
#GEchartpopup, .GEdatachart {
g.highcharts-label text > a:visited {
fill:white;
}
}
#GEchartpopup {
// ooui-like interface, why is this hand-crafted and not ooui in the first
// place?
background: var(--ooui-interface);
border: 1px solid var(--ooui-interface-border);
border-radius: 2px;
color: var(--ooui-text);
position: fixed;
left: 0;
right: 0;
top: 1em;
bottom: 1em;
margin: auto;
padding: 1em;
max-width: 975px;
z-index: 450;
overflow: auto;
#closepopup {
float: right;
margin-bottom: 5px;
z-index: 100;
}
}
#GEpopupchart {
height: 500px;
}
.highcharts-container .highcharts-range-selector {
font-size: 11px;
}
.GEPermLink {
float: right;
font-size: 14px;
}
.GEPermLink ~ .GEdatachart {
clear: right;
}
.smallChart {
.highcharts-range-selector {
display: none;
}
// this is supposed to select ONLY the 'reset zoom' button
// if it selects anything else, please remove this
.highcharts-button title + rect {
display: none;
}
// don't allow line-break on small chart titles
.highcharts-title {
white-space: nowrap !important;
}
.zoomButton,
// the 'Zoom' label
svg > text:first-of-type,
.highcharts-input-group {
display: none;
}
}
.smallChart, .mediumChart {
.highcharts-scrollbar {
display:none;
}
}
/* var-ify */
.highcharts-background,
.highcharts-plot-background {
fill: transparent;
}
.highcharts-title,
.highcharts-subtitle {
color: var(--text-color) !important;
}
.highcharts-axis-title {
fill: var(--text-color) !important;
}
.highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-tick,
.highcharts-axis-line {
stroke: var(--ooui-normal-border);
}
.highcharts-axis-labels text,
.highcharts-range-selector-group text {
color: var(--ooui-text) !important;
fill: var(--ooui-text) !important;
}
.highcharts-label-box {
stroke: var(--ooui-normal-border);
}
.highcharts-button-box {
fill: var(--ooui-normal);
}
/* ------------------------
bottom navigation
------------------------ */
.highcharts-navigator-outline {
stroke: var(--ooui-interface-border);
}
.highcharts-scrollbar-track {
fill: transparent;
stroke: var(--ooui-interface-border);
}
.highcharts-scrollbar-button,
.highcharts-scrollbar-thumb,
.highcharts-navigator-handle {
fill: var(--ooui-normal);
stroke: var(--ooui-normal-border);
}
.highcharts-scrollbar-arrow {
fill: var(--ooui-text);
}
.highcharts-scrollbar-rifles {
stroke: var(--ooui-text);
}
| |||