User:Aerotinge/Gadget-sandbox.css

/**
 * This is CSS for the [[MediaWiki:Gadget-PageNumbers-core.js]] gadget
 *
 * This defines some common CSS that applies to all layouts, as well
 * as the side-wide Layouts.
 */

/* The clearfix */
.wsg-pagenumbers-clearfix:after {
	content: "";
	display: table;
	clear: both;
}

#ct-pagenumbers {
	position: absolute; /* TODO: Not so absolute */
	top: 0;
	left: 0;
}

/*
 * Style of the pagenumber span when inline with the text
 */
span.pagenumber {
	color: var(--fbc-secondary-text, #666666);
	font-size: inherit;
	line-height: inherit;
	font-family: monospace;
	font-weight: 600;
	text-shadow: 0 0 .25em #A8A;
	vertical-align: top;
}

/*
 * Style of the pagenumbers when beside the text
 */
div.pagenumber {
	position: absolute;
	font-size: calc(1rem - 5px);
	line-height: calc(1rem * 1);
	font-weight: normal;
	font-style: normal;
	text-indent: 0;
}

/*
 * Hidden pagenumbers
 */
.pagenumber.pagenumber-invisible {
	display: none;
}

/*
 * Page extent overlay
 */
#highlight-area {
	display: none;
	position: absolute;
	width: 100%;
}

#highlight-area > div {
	background-color: #000000;
	opacity: 0.2;
	filter: alpha(opacity=20);
}

/*
 * Display options (other than layouts)
 */

/*
 * Serif or Sans. Maybe we can have Ming(Song)/Gothic(Hei) typefaces here instead if the WM provides webfonts supports.
 */
.ws-display-serif {
	font-family: Georgia, serif;
}

/*
 * Built-in Layouts
 */

/* the basic layouts */
.ws-page-container {
	position: relative;
	display: block;
	margin-right: 0;
	margin-left: 0;
	/* Add some top margin to avoid pagenumbers crashing into header */
	margin-top: 14px;
}
.ws-region-container {
	position: relative;
	display: block;
}

/* Space for the page numbers if there are any */
.dynlayout-haspagenums .ws-region-container {
	/* Maxout the container
	margin-right: 0; */
	margin-inline-start: 3em;
}
.ws-column-container {
	position: static;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.ws-column-container img {
	/* Prevent images leaking out of the container */
	max-width: 100%;
	height: auto;
}

/*
 * Layout 2: 橫排
 */
 
/*
 * [[template:DL]] related
 */
div.dynlayout-layout_2 small.sfrac.nowrap {
	
}
div.dynlayout-layout_2 small.sfrac.nowrap > span {
    vertical-align: top;
	display: inline;
}
div.dynlayout-layout_2 small.sfrac.nowrap > span > span {
	display: contents;
}

/*
 * inline-list related
 * Maybe make inline-list a template and change it into wst-inline-list? But how to pass a variable input as a CSS ::maker pseudo-element with a template?
 */
div.dynlayout-layout_2 .inline-list {
	display: list-item;
	margin-inline-start: 2em;
}

/*
 * [[template:ia]] related
 */
div.dynlayout-layout_2 .wst-ia {
	color: var(--color-destructive--visited, #996666);
}

/*
 * [[template:DG]] related
 */
div.dynlayout-layout_2 .wst-shifted {
	display: none;
}
div.dynlayout-layout_2 .wst-shifted + span {
	margin-inline-start: 0 !important;
}

/*
 * Layout 3: 直排
 */
div.dynlayout-layout_3 .ws-region-container {
	writing-mode: vertical-rl;
	/* Use {{Default_layoout}} template to set --CJK_chars_per_line here
	 * since the MediaWiki hates variable storing in the styles.css
	 */
	height: var(--CJK_chars_per_line, 25.49em);
	float: right;
	width: 100%;
	overflow-x: scroll;
	line-height: 2em;
}

/*
 * [[template:DL]] related
 */
div.dynlayout-layout_3 small.sfrac.nowrap {
	line-height: 1em;
	font-size: inherit;
}
div.dynlayout-layout_3 small.sfrac.nowrap > span {
    transform: scaleX(0.75);
	vertical-align: middle;
	display: inline-block;
}
div.dynlayout-layout_3 small.sfrac.nowrap > span > span {
	display: block;
}

/*
 * [[template:ia]] related
 */
div.dynlayout-layout_3 .wst-ia {
	display: none;
}

/*
 * inline-list related
 * Maybe make inline-list a template and change it into wst-inline-list? But how to pass a variable input as a CSS ::maker pseudo-element with a template?
 */
div.dynlayout-layout_3 .inline-list {
    display: inline list-item;
	margin-inline-start: revert;
    list-style-position: inside;
}

/*
 * [[template:DG]] related
 */