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 ... */