User:Reversedragon/FirstNineThousand/hue.css

/* stylesheet for showing counting numbers versus identifiers, and term categories; currently testing it with Stylus extension */

ol.hue  { list-style-type: none; margin-left: 0; }
ol.hue.reset { counter-reset: list; }

ol.hue li { counter-increment: list; border-color: #a0a0a0; padding-left: 10em; }
ol.hue.wide li { padding-left: 11.7em; }

ol.hue li:before, ol.hue.compound dfn:before {
 display: inline-block; text-align: right !important; content: counter(list);
 min-width: 7em; 
 border: 0px solid transparent; border-width: 0 4px 0 4px;
}

/* dl { border: 3px solid red; }  dt { border: 2px solid blue; }  dd { border: 1px solid green; }  li { border: 1px solid purple; } */
dl.hue { display: block; }
dl.hue dt, dl.hue dd, dl.hue dd ul li { display: inline-block; }
dl.hue dfn, dl.hue dd dl, dl.hue .row dt { display: table-cell; }
dl.hue dt, dl.hue dd { vertical-align: top; }
dl.hue .row { display: table-row; }
dl.hue .row dd .row { margin-top: 0; }
dl.hue dt { min-width: 15em; }
dl.hue dd, dl.hue li { min-width: 15em; margin: 0 1.2em 0 0; }
dl.hue dfn { min-width: 11em; padding: 0.12em 0.8em 0 0; font-style: normal; }
dl.hue dd dl, dl.hue dd ul { min-width: 50em; }
dl.hue dd dl dd, dl.hue dd ul li { min-width: auto; }
/* definition list formatting */
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 { background: var(--background-color-neutral-subtle,#f8f9fa); }
.wikitable .row { background: var(--background-color-neutral-subtle,#f8f9fa) !important; }
.wikitable dt { background: var(--background-color-neutral,#eaecf0); }
dl.hue:not(.row) { border: none; width: 100%; }
dl.hue dt, dl.hue dd { padding: 0.3em 0.4em; }
.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 { background: #f9f9f9; margin: 0 0.5em 0 -10em; padding: 0 0.7em; }
ol.hue.wide li:before { min-width: 9em; margin: 0 0.5em 0 -11.7em; }
ol.hue.compound li:before {}
ol.hue.compound dfn:before { margin: 0em 0.37em 0 -9.45em; padding: 0 0.7em; }  /* I'm a little confused what had unaligned these but oh well */

.hue .number_empty { border-color: transparent; }  .hue .number_empty:before  { background: #404040;  color: #fafafa; }
ol.hue li:before  { border-color: transparent; }  /* display totally unlabeled entries more plainly */
/* all labeled entries set border-color on the entry. I could not really make them inherit background-color so I stopped there. */
ol.hue li.number_done:before, ol.hue li[value]:before, ol.hue.compound [data-qid]:before  { border-color: inherit; }

/* Item dimensions and numberings */
/* .clean lists: no automatic numbers. .compound lists: neatly accommodate property-table-style definition tags. */
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) }

/* Properties */
ol.hue.clean.compound [data-structure]:after { content: " [" attr(data-structure) "]" }  /* data type / "data class" / "data structure" */

/* nested ordered lists */
ol.hue li ol { counter-increment: none; margin-left: 1.2em; }
ol.hue li ol li { counter-increment: none; padding-left: 0.5em; }

.hue .string :before,  /* omit swatches in complicated definition lists */
ol.hue li ol li:before,  ol.hue.compound li:before,  /* omit swatches in compound ol-dfn lists */
.hue dd dfn .field,  /* show field/series clarification in number lists, but not definition lists */
ol.hue .item-dimension,  /* .item-dimension is for when the CSS doesn't load */
.hue dd dfn.manual:before
{ content: ""; display: none; }

/* dl-style dfn hidden inside ol */
ol.hue.compound dfn { font-style: normal; display: inline-block; }
ol.hue.compound dfn a { color: inherit; }
.previews { display: flex; vertical-align: middle; }
.previews > ol, .previews > dl { display: flex; }
.previews > ol.hue, .previews > dl.hue { margin: 1em 3.5em 0 0; }

dl.hue .item-dimension { display: inline; }
dl.hue .item-dimension abbr { text-decoration: none; font-family: monospace; font-size: 140%; line-height: 0.75; }


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