sss.css

/***************************************
 * Global sanity
 */
* {
	box-sizing:border-box;
	padding:0;
	margin:0;
}
/***************************************
 * Assorted styling
 */
body {
	background-color:#f9f9f9;
	margin:0 auto;
	width:840px;
}
a {
	color:#333;
}
a:hover {
	text-decoration:none;
}
#container {
	float:left;
}
#banner {
	display:block;
	height:50px;
	margin:6px 0;
	width:818px;
}
#banner-text {
	fill:#999;
}
#bannerbg-top {
	background-color:#eee;
	height:50px;
	left:0;
	position:absolute;
	top:0;
	width:max(840px,100%);
	z-index:-1;
}
#bannerbg-bottom {
	background-color:#e0e0e0;
	height:12px;
	left:0;
	position:absolute;
	top:50px;
	width:max(840px,100%);
	z-index:-1;
}
.grey {
	color:#999;
}
.bold {
	color:#666;
}
#error {
	background-color:#eee;
	border-color:#c74243;
	border-style:solid;
	border-width:3px 1px 1px;
	color:#c74243;
	float:left;
	font-family:verdana,sans-serif;
	font-size:10px;
	font-weight:bold;
	margin:30px 222px 15px 200px;
	padding:5px;
	text-align:center;
	width:416px;
}
#ranking {
	background-color:#eee;
	border-radius:5px;
	border:1px solid #e0e0e0;
	color:#999;
	margin-left:15px;
	padding:2px 5px;
}
.section, .info {
	color:#666;
	float:left;
	font-family:verdana,sans-serif;
	font-size:12px;
	font-weight:bold;
	margin:15px 22px 7px 0;
	width:818px;
}
.section {
	border:1px solid #e0e0e0;
	padding:1px;
	text-align:center;
}
.title-left {
	float:left;
}
.title-right {
	float:right;
	font-style:italic;
	font-weight:normal;
}
.up::before {
	color:#70a35e;
	content:'\25B2';
}
.down::before {
	color:#c74243;
	content:'\25BC';
}
#userpic {
	border-radius:50%;
	float:right;
	height:80px;
	margin-top:.5em;
	width:80px;
}
/***************************************
 * Graph colors; (n)ight, (m)orning, (a)fternoon, (e)vening
 */
.n {
	background-color:#416d9c;
}
.m {
	background-color:#70a35e;
}
.a {
	background-color:#ebb056;
}
.e {
	background-color:#c74243;
}
/***************************************
 * Global table styling
 */
table {
	background-color:#eee;
	border-collapse:separate;
	border-color:#999;
	border-spacing:0;
	border-style:solid;
	border-width:3px 1px 1px;
	float:left;
	margin:15px 22px 7px 0;
	table-layout:fixed;
}
th, td {
	font-family:verdana,sans-serif;
	font-size:10px;
	padding:1px 3px;
}
th {
	color:#666;
	text-align:left;
}
td {
	color:#333;
}
/***************************************
 * Small generic tables
 */
.small {
	width:258px;
}
.small col:nth-child(1) {
	width:80px;
}
.small col:nth-child(2) {
	width:36px;
}
.small col:nth-child(3) {
	width:140px;
}
.small thead td,
.small tbody td:nth-child(2) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.small thead td:nth-child(1),
.small tbody td:nth-child(1) {
	text-align:right;
}
.small tbody td:nth-child(2) {
	text-align:center;
}
.small tbody td:nth-child(3) {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/***************************************
 * Large generic tables
 */
.large {
	width:818px;
}
.large col:nth-child(1) {
	width:80px;
}
.large col:nth-child(2) {
	width:36px;
}
.large col:nth-child(3) {
	width:140px;
}
.large col:nth-child(4) {
	width:560px;
}
.large thead td,
.large tbody td:nth-child(2) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.large thead td:nth-child(1),
.large tbody td:nth-child(1) {
	text-align:right;
}
.large tbody td:nth-child(2) {
	text-align:center;
}
.large tbody td:nth-child(3),
.large tbody td:nth-child(4) {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.large tbody td:nth-child(4).wrap {
	overflow-wrap:break-word;
	white-space:normal;
}
.large tbody td {
	/* In case of wrapping */
	vertical-align:top;
}
/***************************************
 * Medium generic tables
 */
.medium {
	width:538px;
}
.medium col:nth-child(1),
.medium col:nth-child(4) {
	width:80px;
}
.medium col:nth-child(2) {
	width:36px;
}
.medium col:nth-child(3) {
	width:340px;
}
.medium thead td,
.medium tbody td:nth-child(2) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.medium thead td:nth-child(1),
.medium tbody td:nth-child(1) {
	text-align:right;
}
.medium tbody td:nth-child(2) {
	text-align:center;
}
.medium tbody td:nth-child(3) {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.medium thead td:nth-child(4),
.medium tbody td:nth-child(4) {
	text-align:right;
}
/***************************************
 * Activity graph tables
 */
.act {
	width:818px;
}
.act.day {
	width:240px;
}
.act.scroll {
	margin-right:22px;
	overflow-x:scroll;
}
.act.year {
	/* Variable width specified in HTML */
	float:right;
}
.act.year-scroll {
	/* Variable width specified in HTML */
	margin-right:0;
}
.act col {
	width:34px;
}
.act tbody td {
	padding:0;
}
.act tfoot td {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
	padding:1px 0;
	text-align:center;
}
.act ul {
	height:124px;
	position:relative;
}
.act ul.est {
	opacity:0.6;
}
.act li {
	bottom:0;
	display:block;
	margin-left:9px;
	position:absolute;
	width:16px;
}
.act li:nth-child(1) {
	margin-left:0;
	text-align:center;
	width:100%;
}
/***************************************
 * Most talkative people tables
 */
.ppl {
	width:818px;
}
.ppl col:nth-child(1),
.ppl col:nth-child(2) {
	width:80px;
}
.ppl col:nth-child(3) {
	width:36px;
}
.ppl col:nth-child(4) {
	width:140px;
}
.ppl col:nth-child(5) {
	width:90px;
}
.ppl col:nth-child(6) {
	width:56px;
}
.ppl col:nth-child(7) {
	width:334px;
}
.ppl thead td,
.ppl tbody td:nth-child(3) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.ppl thead td:nth-child(1),
.ppl tbody td:nth-child(1),
.ppl thead td:nth-child(2),
.ppl tbody td:nth-child(2),
.ppl thead td:nth-child(5),
.ppl tbody td:nth-child(5) {
	text-align:right;
}
.ppl tbody td:nth-child(3),
.ppl thead td:nth-child(6) {
	text-align:center;
}
.ppl tbody td:nth-child(4),
.ppl tbody td:nth-child(7) {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.ppl tbody td:nth-child(5) {
	padding-left:0;
}
.ppl thead td:nth-child(6) {
	padding:1px 0;
}
.ppl li {
	display:inline-block;
	height:6px;
}
/***************************************
 * Less talkative people table
 */
.ppl2 {
	width:818px;
}
.ppl2 col:nth-child(1),
.ppl2 col:nth-child(5),
.ppl2 col:nth-child(9),
.ppl2 col:nth-child(13) {
	width:12px;
}
.ppl2 col:nth-child(2),
.ppl2 col:nth-child(6),
.ppl2 col:nth-child(10) {
	width:80px;
}
.ppl2 col:nth-child(3),
.ppl2 col:nth-child(7),
.ppl2 col:nth-child(11) {
	width:36px;
}
.ppl2 col:nth-child(4),
.ppl2 col:nth-child(8),
.ppl2 col:nth-child(12) {
	width:140px;
}
.ppl2 thead td,
.ppl2 tbody td:nth-child(3),
.ppl2 tbody td:nth-child(7),
.ppl2 tbody td:nth-child(11) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.ppl2 thead td:nth-child(2),
.ppl2 tbody td:nth-child(2),
.ppl2 thead td:nth-child(6),
.ppl2 tbody td:nth-child(6),
.ppl2 thead td:nth-child(10),
.ppl2 tbody td:nth-child(10) {
	text-align:right;
}
.ppl2 tbody td:nth-child(3),
.ppl2 tbody td:nth-child(7),
.ppl2 tbody td:nth-child(11) {
	text-align:center;
}
.ppl2 tbody td:nth-child(4),
.ppl2 tbody td:nth-child(8),
.ppl2 tbody td:nth-child(12) {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/***************************************
 * People by time of day table
 */
.tod {
	width:818px;
}
.tod col:nth-child(1) {
	width:36px;
}
.tod col:nth-child(2),
.tod col:nth-child(3),
.tod col:nth-child(4),
.tod col:nth-child(5) {
	width:195px;
}
.tod thead td,
.tod tbody td:nth-child(1) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.tod tbody td {
	height:3em;
	vertical-align:top;
}
.tod tbody td:nth-child(1) {
	text-align:center;
}
.tod thead td:nth-child(2),
.tod tbody td:nth-child(2),
.tod thead td:nth-child(3),
.tod tbody td:nth-child(3),
.tod thead td:nth-child(4),
.tod tbody td:nth-child(4),
.tod tbody td:nth-child(5),
.tod thead td:nth-child(5) {
	text-align:right;
}
.tod div {
	float:right;
	height:6px;
	margin-top:3px;
}
/***************************************
 * History index table
 */
.index {
	width:818px;
}
.index col:nth-child(1) {
	width:36px;
}
.index col:nth-child(1n+2) {
	width:65px;
}
.index thead td,
.index tbody td:nth-child(1) {
	background-color:#e0e0e0;
	color:#999;
	font-weight:bold;
}
.index tbody td:nth-child(1) {
	padding:1px 0;
	text-align:center;
}
.index thead td:nth-child(1n+2),
.index tbody td:nth-child(1n+2) {
	text-align:right;
}
/***************************************
 * Dark color theme
 */
@media (prefers-color-scheme: dark) {
	body {
		background-color:#171717;
	}
	a, td {
		color:#c3c3c3;
	}
	.bold, .info, th {
		color:#999;
	}
	#banner-text {
		fill:#6f6f6f;
	}
	.banner-graph, .n, .m, .a, .e, .up::before, .down::before {
		filter:brightness(80%);
	}
	#bannerbg-top, #error {
		background-color:#222;
	}
	#bannerbg-bottom {
		background-color:#303030;
	}
	#ranking {
		background-color:#222;
		border-color:#303030;
		color:#6f6f6f;
	}
	.section {
		border-color:#303030;
		color:#999;
	}
	table {
		background-color:#222;
		border-color:#6f6f6f;
	}
	.small thead td,
	.small tbody td:nth-child(2),
	.large thead td,
	.large tbody td:nth-child(2),
	.medium thead td,
	.medium tbody td:nth-child(2),
	.act tfoot td,
	.ppl thead td,
	.ppl tbody td:nth-child(3),
	.ppl2 thead td,
	.ppl2 tbody td:nth-child(3),
	.ppl2 tbody td:nth-child(7),
	.ppl2 tbody td:nth-child(11),
	.tod thead td,
	.tod tbody td:nth-child(1),
	.index thead td,
	.index tbody td:nth-child(1) {
		background-color:#303030;
		color:#6f6f6f;
	}
}