MediaWiki:Common.less/gemw.less: Difference between revisions

Jump to navigation Jump to search
no edit summary
(Created page with "→‎=================================== 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-l...")
 
No edit summary
Tag: Reverted
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);}
/* ===================================
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);
}

Navigation menu