User:Reversedragon/FirstNineThousand/hue.css

/* stylesheet for showing counting numbers versus identifiers, and term categories */

/* either medium - print or screen */
ol.hue li,  dl.hue, dl.hue.data_rating .row  { display: block; }
ol.hue li:before  { display: inline-block; }

/* basic Hue lists */
ol.hue         { list-style-type: none; margin-left: 0; }
ol.hue.reset   { counter-reset: list; }
ol.hue li  { counter-increment: list; min-width: 10em; padding-left: 10em; }

/* swatch hanging indents */
ol.hue li:before     { margin: 0 0.5em 0 -10em; }
ol.hue.compound dfn  { margin: 0 0 0 10em; }
ol.hue li:before, ol.hue.wide li:before  { padding: 0 0.7em;  min-width: 4.5em; }
ol.hue.wide li:before  { min-width: 8em; }
ol.hue.compound dfn:before  { padding: 0 0.7em; margin-right: 0.5em; }
/* nested ordered lists */
ol.hue ol     { list-style-type: decimal; margin-left: 0.7em; }
ol.hue ol li  { padding-left: 0.8em; counter-increment: none; display: list-item; }

/* Item dimensions and numberings */
/* .clean lists: no automatic numbers. .compound lists: neatly accommodate property-table-style definition tags. */
ol.hue ol li:before  { content: none; }
ol.hue > li:before { content: attr(value); }
ol.hue       li[value]:before { content: attr(value) "　/　" counter(list); }
ol.hue.clean li[value]:before { content: attr(value); }
ol.hue.clean.compound [data-qid]:before { content: attr(data-qid) }
ol.hue       li[value][data-dimension]:before { content: attr(data-dimension) "–" attr(value) "　/　" counter(list); } /* "Z " */
ol.hue.clean li[value][data-dimension]:before { content: attr(data-dimension) "–" attr(value) }
ol.hue.clean.compound [data-qid][data-dimension]:before { content: attr(data-dimension) "–" attr(data-qid) }
/* L and P are actual separate namespaces, so display them without hyphen */
ol.hue li[value][data-dimension="L"]:before, ol.hue li[value][data-dimension="P"]:before
  { content: attr(data-dimension) attr(value) "　/　" counter(list); }
ol.hue.clean li[value][data-dimension="L"]:before, ol.hue.clean li[value][data-dimension="P"]:before
  { content: attr(data-dimension) attr(value) }
ol.hue.clean.compound [data-qid][data-dimension="L"]:before, ol.hue.clean.compound [data-qid][data-dimension="P"]:before
  { content: attr(data-dimension) attr(data-qid) }
/* experiment: for thesis portal entries not turned into Ontology pages. data-edprefix and -edsuffix may be used to concatenate anything to a serial number, totally preformatted. */
ol.hue li[data-serial]:before, ol.hue.clean.compound [data-serial]:before { content: attr(data-serial); }
ol.hue li[data-edition][data-serial]:before,  ol.hue.clean.compound [data-edition][data-serial]:before { content: attr(data-edition) "/" attr(data-serial); }
ol.hue li[data-edprefix][data-serial]:before, ol.hue.clean.compound [data-edprefix][data-serial]:before { content: attr(data-edprefix) "" attr(data-serial); }
ol.hue li[data-edsuffix][data-serial]:before, ol.hue.clean.compound [data-edsuffix][data-serial]:before { content: attr(data-serial) "" attr(data-edsuffix); }

/* definition lists */
dl.hue .row { display: grid; grid-template-columns: 15.2em auto; }
dl.hue dt, dl.hue dd  { min-width: 15em; margin: 0 1.2em 0 0; padding: 0.1em 0.4em; display: inline-block; }
dl.hue dt  { margin: 0 1em 0 0; }
dl.hue dt:first-child { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 1; }
dl.hue dt:first-child dfn { height: 100%; }
dl.hue dd { grid-column-start: 2; }
dl.hue, dl.hue dd, dl.hue.data_wavebuild dl.hue .values,  dl.hue .row dl  { border: none; }
.hue dfn, .hue.compound dfn  { display: inline-block; }
.hue dfn span span.tts { font-size: inherit; }  /* prepare for mobile stylesheet correction */
/* for pages with table of contents - usually omitted on Item pages, but may be useful if they are very long */
ol.hue + dl.hue { margin-top: 1.3em; }  ol.hue + p + div.toc { margin-top: 1.1em; }

/* dimension icons / clarifications */
.hue .item-dimension, .hue.data_wavebuild dfn ins.wave-score  { display: inline; }
.hue dfn, .hue.compound dfn, .hue.data_wavebuild dfn ins.wave-score  { font-style: normal; }
dl.hue .item-dimension abbr, dl.hue .item-dimension ins, .hue dfn ins { text-decoration: none; }
ol.hue .data-structure, .hue .edition-sense { font-size: 90%; }
.hue dfn ins.wave-score { margin-left: 0.4em; }

/* qualifiers */
dl.hue .row dd.values  { display: grid; grid-template-columns: 15.2em auto; }
dl.hue .row dl  { margin: 1px 0; }
dl.hue .values dd.value-main, dl.hue.data_wavebuild dd dl dd  { padding: 0; }
/* wavebuilder combinations */
dl.hue.data_wavebuild dd .wrap, dl.hue.data_wavebuild dd dl dt, dl.hue.data_wavebuild dd dl dd,
  .data_wavebuild .p153 .values, .data_wavebuild .p135 .values,  /* reset for forward.css */
  .data_wavebuild .row .wrap dt, .data_wavebuild .p153 .one, .data_wavebuild .p135 .both,
   dl.hue.data_rating .row dd.values  { display: inline-block; }
dl.hue.data_wavebuild .row dl, dl.hue.data_rating .row dl, dl.hue.data_motifs .row dl  { margin: 0; }

/* source rating hub */
dl.hue.data_rating .row dt.test-n, dl.hue.data_rating .row dt.rating-level  { display: none; }
dl.hue.data_rating .row dd.test-n-int:before  { content: "/ "; }
dl.hue.data_rating .row dd.test-q-int, dl.hue.data_rating .row dd.test-n-int  { min-width: 0.9em; }
dl.hue.data_rating .row dt, dl.hue.data_rating .row dd.test-rubric  { min-width: 1.1em; }
dl.hue.data_rating .row dd.rating-level-item  { min-width: 2.2em; }
dl.hue.data_rating .row dd dfn  { min-width: 3em; }

dl.hue dd dl.values dt.term, dl.hue dd.values dl dt.term  /* semantic "triple subject" headings */
, .hue dfn .wave-score, dl.hue .data-structure, ol.hue dfn .edition-sense
, ol.hue.compound li:before, dl.hue dt dfn:before, dl.hue dt dfn .figure, dl.hue dfn.manual:before, dl.hue .string dfn:before  /* swatches */
, ol.hue.compound dfn.flag:before, dl.hue dfn.manual .flag
, .hue dd dfn .field  /* show field/series clarification in number lists, but not definition lists */
, dl.hue dt .edition-sense, dl.hue ruby rt
, .data_wavebuild .edition-sense.term  /* make label-subentities look exactly like one Item simply has multiple names */
, dl.hue .shorthand  /* shorthand templates - mainly HuePalette, optionally displayed with Gadget */
, .data_wavebuild .p135 .wrap.p145, .data_wavebuild .p135 .wrap.p134 .result, .data_wavebuild .p153 .wrap.p134  /* omit information added for "A B" layout */
{ content: none; display: none; }

@media print {
 .hue dfn, .hue.compound dfn, .hue dt  { border: 1px solid black; }
 .hue dl, .hue dl dt  { border-color: #202020; }
 ol.hue li, ol.hue.compound li dfn,  .mw-body .hue dfn a, .hue dt dfn, dl.hue .string dfn  { border: none; }
 ol.hue li[value]:before, ol.hue.compound dfn[data-qid]:before  { border: 1px solid black; }
 
 ol.hue li, ol.hue.compound li dfn  { padding: 0; margin: 0; }
 
 dl.hue .row dd.values  { grid-template-columns: auto auto; }
 
 .hue dd dfn .figure  { display: inline-block; margin: 0 0.4em 0 0; }
 
 ol.hue dfn .item-dimension, ol.hue dfn .tradition  /* philosophy tag */
 { content: none; display: none; }
}


@media screen {

/* basic hue lists */
ol.hue li      { min-width: 10em; padding-left: 10em; }
ol.hue.wide li { padding-left: 11.7em; }
/* swatch hanging indents */
ol.hue li:before       { margin: 0 0.5em 0 -9.95em; padding: 0 0.7em; }
ol.hue.wide li:before  { margin: 0 0.5em 0 -11.7em; min-width: 9em; }
ol.hue.compound li     { margin: 0 0.5em 0 0; background: transparent; }
ol.hue.compound dfn    { margin: 0 0.5em 0 0; }
ol.hue.compound dfn:before, ol.hue.compound dfn.flag .figure  { padding: 0 0.7em; margin: 0 0.5em 0 -9.95em; width: 8em; }

/* second-background setup */
ol.hue li  { z-index: 1; }
ol.hue li, ol.hue.compound li dfn, ol.hue.compound li dfn:before, ol.hue.compound li dfn.flag .figure
  dl.hue .row dd, dl.hue dd dfn, dl.hue dd .value-main dfn, dl.hue dd dfn:before, dl.hue dd dfn .figure,
  .hue dfn a, .hue dfn ins, .hue dfn span  { position: relative; }
ol.hue li:after, ol.hue li dfn:before, ol.hue.compound li dfn:after,  dl.hue dd dfn:after, dl.hue dd .value-main dfn:after  { position: absolute; }

/* second-background for basic & compound lists */
ol.hue li:after, ol.hue.compound li dfn:after,  dl.hue dd dfn:after  { opacity: 0.9; width: 100%; height: 100%; left: 0; top: 0; }
ol.hue li:after, ol.hue.compound li dfn:after,  dl.hue dd > dfn:after, dl.hue dd .value-main dfn:after  { content: "   "; display: block; z-index: -1; }
ol.hue.compound li dfn:after,  dl.hue dd dfn:after  { opacity: 0.8 }
ol.hue dfn  { width: 100%; z-index: 4; }
dl.hue dd dfn:after, dl.hue dd .value-main dfn:after  { z-index: 0; }
/* get rid of second-backgrounds where they shouldn't be */
ol.hue.compound li:after, ol.hue ol li:after, ol.hue li.number_empty:after,  dl.hue .row.string dfn:after  { content: none; }
/* quick fix to definition tags on Term pages */
dl.hue .string.highlighted dd dfn, ol.hue dfn.term { width: auto; min-width: auto; padding: 0 0.5em; }
dl.hue .string.highlighted dfn:before, dl.hue .string.highlighted dfn .figure { content: none; display: none; }
ol.hue dfn.term { padding: 0; background: none; }  /* in number lists, assume that including Terms is for things like TTS-corrected markup and thus they shouldn't be highlighted */

/* stuff inside definitions */
ol.hue dfn,  dl.hue .string:not(.highlighted) dfn,  .hue dfn a, .hue dfn ins, .hue dfn span  { background: transparent; }
ol.hue li:before,  ol.hue.compound li dfn:before, ol.hue.compound li dfn.flag .figure, dl.hue dd dfn:before, .hue dd dfn .figure
  { display: inline-block; opacity: 1; background-color: inherit; }  /* color swatch */
ol.hue.compound li dfn:before, ol.hue.compound li dfn.flag .figure  { top: 0; height: auto; }  /* number swatch */
ol.hue li:before  { position: relative; z-index: 4; }
.hue dfn a, .hue dfn ins, .hue dfn span,  dl.hue dd dfn:before, .hue dd dfn .figure  { z-index: 5; }

/* definition lists */
dl.hue .row { border-width: 0 0 1px 0; }  dl.hue .row:last-child { border-width: 0 0 0 0; }
dl.hue .row dt:first-child { border-width: 0 1px 0 0; box-sizing: border-box; }  /* grid overlays padded boxes weirdly without border-box */
dl.hue dfn { min-width: 11em; padding: 0.12em 0.8em 0 0; }
/* qualifiers / compound triples */
dl.hue .row dl dt  { margin-left: 1.5em; }
dl.hue .row dl dt:first-child { border-width: 1px; }

/* definitions */
dl.hue dd dfn  { padding: 0.12em 0.4em 0.12em 0.2em; }
ol.hue.compound dfn a, ol.hue .data-structure  { color: inherit; background: transparent; }
/* dimension icons */
.hue dd .figure:before, .hue dd dfn .item-dimension abbr, .hue dd dfn .item-dimension ins  { display: inline-block; content: attr(data-icon); }
dl.hue .item-dimension abbr, dl.hue .item-dimension ins, .hue dd .figure:before { font-family: monospace; font-size: 140%; line-height: 0.75; }
.figure.item-dimension ins.tts { font-size: inherit; line-height: 0.5; font-size: 50%; }  /* avoid icon styles turning TTS text huge and expanding icon box */
.hue dd dfn .figure abbr, .hue dd dfn .figure ins { width: 0px; overflow: hidden; }  /* display Latin string in anything that's not a screen browser, icon in screen browsers */
.hue dfn ins abbr { cursor: inherit; }

/* special qualifiers / wavebuilder combinations */
dl.hue.data_wavebuild dd dl dt, dl.hue.data_wavebuild dd dl dd { display: inline-block; }
dl.hue.data_wavebuild .row dd, dl.hue.data_motifs .row dd { min-width: 25em; }
dl.hue.wide .row dd { min-width: 40em; }
dl.hue.data_motifs .row dd.values  { grid-template-columns: 27em auto; }

/* swatches */
ol.hue li:before, ol.hue.compound dfn:before, ol.hue.compound dfn.flag .figure {
 text-align: right !important; content: counter(list); min-width: 7em; border: 0px solid transparent; border-width: 0 4px 0 4px;
}
.hue dd dfn:before, .hue dd dfn .figure  { content: "   "; text-align: center; display: inline-block; width: 1.5em; margin: 0 0.5em 0 0; }
ol.hue li:before  { border-color: transparent; }  /* display totally unlabeled entries plainly */
ol.hue li.number_done:before, ol.hue li[value]:before, ol.hue.compound [data-qid]:before,
  ol.hue.compound [data-edprefix]:before, ol.hue.compound [data-edsuffix]:before,  /* used on thesis portal / SSR pages acting as Items */
  ol.hue.compound [data-qid].flag .figure, ol.hue.compound [data-edprefix].flag .figure, ol.hue.compound [data-edsuffix].flag .figure
    { border-color: inherit; }  /* list items set border color */
/* .flag: manual Item number bullet, in order to be more TTS-friendly */
ol.hue.compound dfn.flag .figure, ol.hue.compound dfn.flag .figure.flag { display: inline-block; }
.hue.compound dfn.flag .flag, .hue.compound dfn.flag .tts, .hue.compound dfn.flag .tts .visual { font-size: inherit; color: inherit; }

/* number list colors */
.mw-body ol.hue, .mw-body ol.hue li,  .mw-body dl.hue dfn  { color: inherit; }
ol.hue li  { border-color: #808080; background: #e9e9e9; }  /* colorless list entry */
/* definition list colors */
dl.hue, .wikitable .row, .wikitable dt, .wikitable dfn:before, .wikitable dfn .figure { border: 1px solid var(--border-color-base,#a2a9b1); }
dl.hue, .wikitable .row, .wikitable dt, .wikitable dd,  dl.hue dfn:after { background: var(--background-color-neutral-subtle,#f8f9fa); }
.wikitable .row { background: var(--background-color-neutral-subtle,#f8f9fa) !important; }
.wikitable dt,  dl.hue dt dfn:after { background: var(--background-color-neutral,#eaecf0); }
ol.hue li:after, ol.hue dfn:after  { background: var(--background-color-base,#fff); }  /* second-background for number lists */
/* reset color */
ol.hue ol li  { background: none; }
dl.hue dt dfn { background-color: transparent !important; }  /* the second stylesheet precedes this by invoking particular field/series colors, but those must come second */
.mw-body ol.hue.compound dfn a, .mw-body ol.hue.compound dfn span, .mw-body ol.hue.compound dfn ins  { color: var(--color-base,#202122); }

ol.hue dfn .item-dimension, ol.hue dfn .swatch, ol.hue.compound dfn.flag:before, .hue dfn .tradition,  /* philosophy tag */
  dl.hue dfn ins.result  /* source rating hub */
    { content: none; display: none; }

}

/* series-specific tweaks:  [[User:Reversedragon/FirstNineThousand/hue2.css]] */
/* [[Category:Fake Item lists]] */