Template:Ws diclist/styles.css

/* Styles used to format a dictionary or definition list */

/* To format a defintion list, a wrapper DIV container using which is CSS classed with the model name. The default style which does not change very much from the Mediawiki styling, has the class-name _ws_diclist_sc

To alter the formatting a rule must be applied for both DD and DT elements, if they are different from the Mediawiki defaults.

/* Default style - */ /* This style uses the Mediawiki default in terms of layout, but reformats the header items (usally bold) to normal weighted small-caps; /* List is laid out per browser, the first item (such as the word to be defined) is in normal weight, as opposed to the bold formatting Mediawiki applies normally*/

/* There are two rules here, the second is effectively an alias for the first. */ div._ws_diclist_smallcaps dl dt, div._ws_diclist_sc dl dt{ font-weight: normal; font-variant: small-caps; }

/* _ws_diclist_flatsc

The following model produces a "flattend" list, by making dd and dt elements inline.

TODO: figure out how to do a DD DL transition properly. */

/* This rule ensures a break after the end of the list. */ div._ws_diclist_flatsc dl:after {content:"";display:table;clear:both;}

/*Header element:

This is defined to be a normal weighted, small-caps text. It is made inline so it can be displayed in a flat horizontal manner, for the same reasons the margins and padding are collapsed to minimum. */

div._ws_diclist_flatsc dt{ font-weight: normal; font-variant: small-caps; display: inline; text-align: left; margin:0;padding:0; }

/* This ::before rule, ensures that each group of dd elemeents (for a given dt) appears on a new line, (effectively by forcing a block element to break the flow)

TODO: This isn't ideal, and if there is a more official way to do this, it should be implemented. */

div._ws_diclist_flatsc dt::before{ display:block; margin:0; content:""; /* For some reason there needs to be some content here even if it's null, for the "null" block to display.*/ }

/* This ::after rule appends an em-dash between the header and list items. */ div._ws_diclist_flatsc dt:after{ content:"—"; }

/* "Definition" list item, */ div._ws_diclist_flatsc dd { margin:0;padding:0; /* collapsed margins and padding */ display: inline; /* displayed inline, so it can be displayed in flattend form */ }

/*** * List with terms and definitions on the same line, no separator * and italic type for terms, upright type for definitions. ***/

.inline_italic_normal dd { display: inline; margin-left: 0.3em; }

.inline_italic_normal dd::after { content: ""; display: table; }

.inline_italic_normal dt { display: inline; font-style: italic; font-weight: normal; }

/* Implement new styles below this line ... */