Template:Ws diclist/styles.css
Jump to navigation
Jump to search
/* 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 ... */