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 { 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  { content: "   "; 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; }
.hue .field_internal { border-color: #909090; }  .hue .field_internal:before { background: #d3d3d3; /* LightGray */ }
.hue .field_geo      { border-color: #60A096; }  .hue .field_geo:before      { background: #B0E0E6; /* PowderBlue */ }
.hue .field_nations  { border-color: #aE8847; }  .hue .field_nations:before  { background: #ddB887; /* Burlywood */ }
.hue .field_exstruct { border-color: #4969e9; }  .hue .field_exstruct:before { background: #afcce6; }
.hue .field_trotsky  { border-color: #BF4C10; }  .hue .field_trotsky:before  { background: #FF8C00; /* DarkOrange */ }
.hue .field_ML       { border-color: #820212; }  .hue .field_ML:before       { background: #C24252; /* crimson */  color: #fafafa; }
.hue .field_mdem     { border-color: #5330AB; }  .hue .field_mdem:before     { background: #9370DB; /* MediumPurple */ }
.hue .field_fantasy  { border-color: #40AE50; }  .hue .field_fantasy:before  { background: #90EE90; /* LightGreen */ }
.hue .field_horror   { border-color: #305E00; }  .hue .field_horror:before   { background: #509E40; }

ol.hue li:before  { border-color: transparent; }
ol.hue li.number_done:before, ol.hue li[value]:before, ol.hue.compound [data-qid]:before  { border-color: inherit; }

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 is an actual separate namespace, so display it 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) }

ol.hue.clean.compound [data-structure]:after { content: " [" attr(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, dl.hue .item-dimension  /* .item-dimension is for when the CSS doesn't load */
{ 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; }


/* [[Category:Fake Item lists]] */