stardew-predictor.css

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

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;
}
.tab-panel > h3 {
	margin: 8px 0 4px;
}
.panel {
	background-color: #ffe0b0;
	padding: 8px 5% 8px 12px;
	margin: 5px;
	border: 5px solid #804000;
	border-radius: 15px;
}
#footer {
	padding-right: 12px;
}
#input-container { display: none; }
#output-container { 
	display: none;
	min-height: 750px;
}
#progress-container { display: none; }
.initial_hide { display: none; }
.error {
	font-weight: bold;
	font-size: 150%;
	color: #ff0000;
}
.path {
	font-family: monospace;
}
#footer {
	text-align: center;
}
.ach,.warn,.note {
	font-style: italic;
}
.pts, .strong {
	font-weight: bold;
}
.none {
	font-style: italic;
	opacity: 0.5;
}
.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,.ms_no:before {
	content: "\2718 ";
	margin-right: 3px;
}
.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;
}
.need:before,.warn:before {
	content: "! ";
	font-weight: bold;
	margin-right: 3px;
}
.need {
	margin-left: 38px;
}
.need > ul {
	margin-left: 48px;
	margin-top: 0px;
}
.need > ol {
	margin-left: 48px;
	margin-top: 0px;
}
#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;
}
#tabset-div {
	padding: 15px;
}
.tabset > input[type="radio"] {
	position: absolute;
	left: -200vw;
}
.tabset .tab-panel {
	display: none;
}
/* This needs new entries every time we add a new tab */
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7),
.tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8),
.tabset > input:nth-child(17):checked ~ .tab-panels > .tab-panel:nth-child(9),
.tabset > input:nth-child(19):checked ~ .tab-panels > .tab-panel:nth-child(10),
.tabset > input:nth-child(21):checked ~ .tab-panels > .tab-panel:nth-child(11),
.tabset > input:nth-child(23):checked ~ .tab-panels > .tab-panel:nth-child(12),
.tabset > input:nth-child(25):checked ~ .tab-panels > .tab-panel:nth-child(13),
.tabset > input:nth-child(27):checked ~ .tab-panels > .tab-panel:nth-child(14) {
    display: block;
}
.tabset > label {
	position: relative;
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #906030;
	border-bottom: 0;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	background-color: #ffe0b0;
	border-radius: 8px 8px 0 0;
	color: #906030;
	text-align: center;
}
.tabset > label:hover,
.tabset > input:focus + label {
	background-color: #eecc99;
	border-color: #603000;
	color: #603000;
}
.tabset > input:checked + label {
	border-color: #603000;
	border-bottom: 1px solid #eecc99;
	margin-bottom: -1px;
	color: #603000;
	background-color: #eecc99;
}
.tab-panel {
	padding: 10px 25px;
	border: 1px solid #603000;
	border-radius: 0 8px 8px 8px;
	background-color: #eecc99;
}
table.output, table.calendar {
	border: 2px solid black;
	background-color: white;
	border-collapse: collapse;
}
th, td {
	border: 1px solid black;
	text-align: center;
}
th {
	color: white;
	background-color: #333;
}
td {
	color: black;
}
table.output th, table.output td {
	padding: 3px 8px;
}
.calendar td {
	text-align: left;
	vertical-align: top;
	padding: 0;
	min-width: 8.5em;
	white-space: nowrap;
}
tr.past > td, td.past, td.count {
	background-color: #ccc;
	color: #333;
}
tr.current > td, td.current {
	background-color: #ffe0b0;
}
.date {
	display: inline-block;
	border-style: solid;
	border-color: black;
	border-width: 0 1px 1px 0; 
	text-align: right;
	padding: 0 3px 0 0;
	width: 1.25em;
}
td hr {
	border-style: dashed;
	border-color: black;
	border-width: 1px 0 0 0;
	width: 90%;
	text-align: center;
}
.cell {
	display: inline-block;
	padding: 3px;
}
td .train, td .night, td .crane, td .resort {
	text-align: center;
	width: 100%;
}
td.legend {
	border: 2px solid black;
	text-align: center;
}
th.day {
	min-width: 12em;
}
th.item {
	min-width: 8em;
}
th.shirt-item {
	min-width: 36px;
}
.shirt-name {
	white-space: nowrap;
}
th.multi, th.item, td.item {
	border-left-width: 2px;
}
th.qty {
	width: 1.5em;
}
th.price {
	width: 3em;
}
th.index {
	width: 2em;
}
th.geode-result, th.wp-result {
	width: 8em;
}
th.long_list {
	width: 36em;
}
td.long_list {
	text-align: left;
}
fieldset {
	padding: .5em;
	margin: .5em;
}
.buttons {
	display: flex;
	justify-content: space-between;
}
#mines-buttons, #train-buttons, #night-buttons, #crane-buttons, #winterstar-buttons {
	max-width: 57em;
}
#cart-buttons, #cart-search, #krobus-buttons, #krobus-search, #wallpaper-buttons, #wallpaper-search {
	max-width: 45em;
}
#geode-buttons, #geode-search, #enchant-buttons {
	max-width: 67em;
}
/* Icon images */
img.icon {
	vertical-align: -2px;
	width: 16px;
	height: 16px;
	background-image:url("./all_icons.png")
}
img.small-icon {
	vertical-align: -2px;
	width: 13px;
	height: 16px;
	background-image:url("./all_icons.png")
}
img.event {
	vertical-align: -1px;
	width: 32px;
	height: 32px;
	background-image:url("./all_icons.png")
}
img.tall {
	vertical-align: -1px;
	width: 16px;
	height: 32px;
	background-image:url("./all_icons.png")
}
img#train {
    background-position: 0px 0px;
	width: 64px;
}
img#event_b {
    background-position: -100px 0px;
	width: 28px;
}
img#event_c {
    background-position: 0px -32px;
}
img#event_f {
    background-position: -96px -32px;
}
img#event_m {
    background-position: -64px -32px;
}
img#event_o {
    background-position: -32px -32px;
}
img#event_w {
    background-position: -64px 0px;
	width: 36px;
}
img#movie_gs {
	background-position: 0px -64px;
	height: 32px;
}
img#geode_r {
    background-position: 0px -96px;
}
img#geode_f {
    background-position: -16px -96px;
}
img#geode_m {
    background-position: -32px -96px;
}
img#geode_o {
    background-position: -48px -96px;
}
img#geode_t {
    background-position: -32px -112px;
}
img#geode_c {
    background-position: -80px -112px;
}
img#gunther {
    background-position: -64px -96px;
}
img#pierre {
    background-position: 0px -112px;
}
img#morris {
    background-position: -16px -112px;
}
img#icon_m {
    background-position: -80px -96px;
}
img#icon_s {
    background-position: -96px -96px;
}
img#icon_i {
    background-position: -112px -96px;
}
img#icon_q {
    background-position: -48px -112px;
}
img#icon_d {
    background-position: -64px -112px;
}
img#icon_h {
    background-position: -96px -112px;
}
img#icon_b {
    background-position: -112px -112px;
}
img#enchant_w {
    background-position: 0px -128px;
}
img#enchant_p {
    background-position: -16px -128px;
}
img#enchant_a {
    background-position: -32px -128px;
}
img#enchant_h {
    background-position: -48px -128px;
}
img#enchant_c {
    background-position: -64px -128px;
}
img#enchant_f {
    background-position: -80px -128px;
}
/* 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: #ffe0b0;
	margin-top: -1.5em;
	margin-left: .5em;
	z-index: 2;
}
[data-tooltip]:not([data-tooltip-persistent]):before {
	pointer-events: none;
}