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

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

1. GEchartpopup, .GEdatachart {

g.highcharts-label text > a:visited {

   	fill:white;

} }

1. 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;
   }

}

1. 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); }