Alex at 16:14, 17 October 2024

2024-10-17T16:14:32Z

Alex at 16:12, 17 October 2024

2024-10-17T16:12:12Z

Alex: 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..."

2024-10-16T23:09:47Z

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..."

New page

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

MediaWiki:Common.less/gemw.less - Revision history

Alex at 16:14, 17 October 2024

Alex at 16:12, 17 October 2024