MediaWiki:Common.less/gemw.less

/* =================================== 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);}