shimmie2/themes/default/style.css

:root {
	color-scheme: light dark;

	--page: #EEE;
	--text: #000;
	--link-default: #0000EE;
	--link-visited: #551A8B;
	
	--title: #BBB;
	--title-border: #AAA;
	
	--header: #CCC;
	--header-border: #BBB;
	
	--block: #DDD;
	--block-border: #CCC;

	--zebra-border: #CCC;
	--zebra-header: #DDD;
	--zebra-odd: #EFEFEF;
	--zebra-even: #E0E0E0;
}
  
@media (prefers-color-scheme: dark) {
	:root {
		--page: #222;
		--text: #CCC;
		--link-default: #BBF;
		--link-visited: #EAF;
			
		--title: #333;
		--title-border: #555;
		
		--header: #444;
		--header-border: #666;
		
		--block: #555;
		--block-border: #777;
	
		--zebra-border: #777;
		--zebra-header: #444;
		--zebra-odd: #555;
		--zebra-even: #666;
	}	
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*                  things common to all pages                    *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
:root {
	font-size: 14px;
	font-family: sans-serif;
}

HEADER H1 {
	max-height: 3em;
	overflow: hidden;
}
BODY {
	background: var(--page);
	color: var(--text);
	margin: 0;
}
H1 {
	background: var(--title);
	border: 1px solid var(--title-border);
	text-align: center;
}
H1 A {
	color: var(--text);
}
H3 {
	text-align: center;
	margin: 0;
}
SECTION>H3 {
	background: var(--header);
	border: 1px solid var(--header-border);
}
SECTION>.blockbody, .comment, .setupblock {
	background: var(--block);
	border: 1px solid var(--block-border);
}
SECTION>.blockbody, H1, SECTION>H3, FOOTER, .comment, .setupblock {
	margin: 8px;
	padding: 8px;
	border-radius: 12px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
THEAD {
	font-weight: bold;
}
TD {
	vertical-align: top;
	text-align: center;
}

TABLE.zebra {border-spacing: 0; border: 2px solid var(--zebra-border);}
TABLE.zebra TD, TABLE.zebra TH {vertical-align: middle; padding: 4px;}
TABLE.zebra THEAD {position: sticky;top: 0;}
TABLE.zebra THEAD TR:last-child TD, TABLE.zebra TR:last-child THEAD TH {border-bottom: 2px solid var(--zebra-border);}
TABLE.zebra TFOOT TR:first-child TD, TABLE.zebra TFOOT TR:first-child TH {border-top: 2px solid var(--zebra-border);}
TABLE.zebra TR TD {border-bottom: 1px solid var(--zebra-header);}
TABLE.zebra TR:nth-child(odd) {background: var(--zebra-odd);}
TABLE.zebra TR:nth-child(even) {background: var(--zebra-even);}

FOOTER {
	clear: both;
	font-size: 0.7rem;
	text-align: center;
	background: var(--title);
	border: 1px solid var(--title-border);
}

A {
	text-decoration: none;
	color: var(--link-default);
}
A:hover {
	text-decoration: underline;
}
A:visited {
	color: var(--link-visited);
}

UL {
	text-align: left;
}

CODE {
	background: #BBB;
	font-size: 0.9rem;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*             the navigation bar, and all its blocks             *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

NAV {
	width: 200px;
	float: left;
	text-align: center;
	margin-left: 16px;
}
NAV .blockbody {
	font-size: 0.85rem;
	text-align: center;
	overflow: hidden;
}
NAV TABLE {
	width: 100%;
}
NAV INPUT {
	width: 100%;
}
NAV SELECT {
	width: 100%;
}

TABLE.tag_list {
	border-collapse: collapse;
}
TABLE.tag_list>THEAD {
	display: none;
}
TABLE.tag_list>TBODY>TR>TD {
	display: inline;
	padding: 0;
}
TABLE.tag_list>TBODY>TR>TD:after {
	content: " ";
}

.more:after {
	content: " >>>";
}

.tag_count:before {
	content: "(";
}
.tag_count:after {
	content: ")";
}

#paginator .blockbody {
	background: none;
	border: none;
	box-shadow: none;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*                 the main part of each page                     *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

ARTICLE {
	margin-left: 226px;
	margin-right: 16px;
	margin-top: 16px;
	text-align: center;
	height: 1%;
}
ARTICLE TABLE {
	width: 90%;
	margin: auto;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*                     specific page types                        *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#short-wiki-description > .blockbody {
	padding-bottom: 15px;
}
#short-wiki-description h2 {
	margin: 0 0 0.4em;
}

#pagelist {
	margin-top: 32px;
}

.thumb IMG {
	border: 1px solid var(--block-border);
	background: var(--block);
	padding: 8px;
	border-radius: 12px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

/* example of how to apply specific styles to specific thumbs for specific userclasses */
/*
BODY[data-userclass="anonymous"] .thumb[data-rating="e"] IMG {
	filter: blur(5px);
}
*/