stardew-checkup.css

/* stardew-checkup.css
 * https://mouseypounds.github.io/stardew-checkup/
 */

html {
	min-height: 100%;
	background-attachment: fixed;
	background-color: #80a0f0; /* fallback color if gradients are not supported */
	background-image: -webkit-linear-gradient(top, #80a0f0, #c0ffff, #40c040); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
	background-image:    -moz-linear-gradient(top, #80a0f0, #c0ffff, #40c040); /* For Firefox (3.6 to 15) */
	background-image:      -o-linear-gradient(top, #80a0f0, #c0ffff, #40c040); /* For old Opera (11.1 to 12.0) */ 
	background-image:         linear-gradient(to bottom, #80a0f0, #c0ffff, #40c040); /* Standard syntax; must be last */
}
body {
	margin: 15px;
	color: #603000;
}
a:link, a:visited { color: #804000; }
a:hover { color: #d08000; }
a:active { color: #ffa000; }
h3 {
	margin: 20px 0 4px;
	display: inline-block;
}
.panel {
	background-color: #ffe0b0;
	padding: .5em 2em .5em 1em;
	margin: 5px;
	border: 5px solid #804000;
	border-radius: 15px;
}
#header {
	padding-right: 5em;
}
#footer {
	text-align: center;
	padding-right: 1em;
	margin-bottom: 3em;
}
#input-container { display: none; }
#output-container { display: none; }
#progress-container { display: none; }
.initial_hide { display: none; }
.error {
	font-weight: bold;
	font-size: 150%;
	color: #ff0000;
}
.path {
	font-family: monospace;
}
.ach,.warn,.note {
	font-style: italic;
}
.pts, .strong {
	font-weight: bold;
}
.ach_yes,.ms_yes,.pt_yes {
	color: #004000;
}
.ach_yes:before,.ms_yes:before {
	content: "\2714 ";
	margin-right: 3px;
}
.ach_no,.ms_no,.pt_no {
	color: #c00000;
}
.ach_no:before,.ach_imp:before,.ms_no:before,.ms_imp:before {
	content: "\2718 ";
	margin-right: 3px;
}
.ach_imp,.ms_imp,.pt_imp {
	color: #888;
}
.ach_list {
	list-style: none;
	padding-left: 50px;
	margin-top: 0px;
	margin-bottom: 4px;
	text-indent: -15px;
}
.result:before {
	content: "\25c8 ";
	margin-right: 3px;
}
.result {
	padding-left: 15px;
}
.explain:before {
	content: "* ";
	margin-right: 3px;
}
.explain {
	padding-left: 15px;
	font-style: italic;
}

.need:before,.warn:before {
	content: "! ";
	font-weight: bold;
	margin-right: 3px;
}
.need {
	margin-left: 38px;
}
.need > ul, .need > ol {
	margin-left: 3.5em;
	margin-top: 0px;
}
.need ol, .need ul {
	padding-left: 1.5em;
}
ol.outer, ul.outer {
	margin-top: 0;
	padding-left: 3em;
}
ol.compact, ul.compact {
	margin-top: 0;
	padding-left: 1em;
}
table.output {
	border: none;
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
.output td {
	vertical-align: top;
}
tr td:not(:first-child) {
	border-left: 1px solid;
}
#PlayerList {
	position: fixed;
	left: 0;
	bottom: 0;
	padding: 3px;
	max-height: 90%;
	width: 100%;
	overflow: auto;
	background-color: #603000;
	color: #eecc99;
	display: none;
}
#PlayerList > table {
	border: none;
	width: 99%;
	table-layout: fixed;
}
#PlayerList tr td:not(:first-child) {
	border: 2px solid #eecc99;
}
#PlayerList td {
	text-align: center;
	cursor: pointer;
	padding: 4px;
}
#PlayerList td.on:hover, #PlayerList td.off:hover  {
	color: #ffe0b0;
	background-color: #906030;
}
#PlayerList td.on {
	color: #eecc99;
	background-color: #804000;
}
#PlayerList td.off {
	color: #906030;
	background-color: #603000;
}
#TOC {
	position: fixed;
	right: 0;
	top: 0;
	padding: 0;
	max-height: 90%;
	max-width: 200px;
	overflow: auto;
	background-color: #eecc99;
	box-shadow: -2px 2px 25px #603000;
}
#TOC, #TOC-details {
	display:none;
}
#TOC:hover #TOC-details {
	display:block;
}
#TOC > h1, #TOC li a {
	padding: 5px 10px;
	display: block;
}
#TOC > h1 {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	background-color: #804000;
	color: #eecc99;
}
#TOC ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#TOC li a {
	color: #60300;
	text-decoration: none;
}
#TOC li a:hover {
	background-color: #ffe0b0;
}
.radio_set {
	display: inline-block;
	width: 18em;
}
/* tooltip implementation based on code from Andrea Ligios
   https://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div
   http://jsfiddle.net/AndreaLigios/jtLbpy62/
 */
[data-tooltip]:before {
	position: absolute;
	content: attr(data-tooltip);
	opacity: 0;
	box-shadow: 2px 2px 1px #603000;
	padding: .5em;
	color: #603000;
	white-space: pre;
}
[data-tooltip]:hover:before {        
	opacity: 0.9;
	background: #ec9;
	margin-top: -1.5em;
	margin-left: .5em;
	z-index: 2;
}
[data-tooltip]:not([data-tooltip-persistent]):before {
	pointer-events: none;
}