smitegods.less

// http://lesscss.org/

:root {
	color-scheme: light dark;
}

@import "less/colors";
@import "smiteicons";

* {border:0; margin:0; padding:0; text-decoration:none;}

html { padding:8px 8px 16px; font-size:100%; line-height:1.3em; }
html { color: #000; background-color: #fff;}
@media (prefers-color-scheme: dark) {
	html { color: #ddd; background-color: #0d0d0d;}
}
h1 {font-size:1.6em; line-height:1.6em; margin:0.2em 0 0.1em;}
h2 {font-size:1.4em; line-height:1.4em; margin:0.3em 0 0.1em;}

input[type=text] { border:1px solid #dddddd; }
table, tr, th, td {border:1px solid #cccccc; vertical-align:top;}
table {border-collapse:collapse;}
th, td {padding:2px;}
thead th {vertical-align:bottom;}
tbody th {text-align:center;}
ul, li {list-style-type:none; display:inline-block;}
aside { font-style:italic; }

@import "less/relatedpages.less";
@import "less/footer.less";

.god {
	display:inline-block; position:relative; background-color:#dddddd;
	@media (prefers-color-scheme: dark) { background-color: #333;}
}
.god a {display:block;}
/* .god:hover::after {content:attr(title); color:#000000; background-color:#ffffff; display:block; width:100%; height:12px; position:absolute;} */
/* Icon size: 128x128 */
.godicon, .godnoicon { display:block; width:64px; height:64px; overflow: hidden; }
.godnoicon { background-color:lightblue; font-style:italic; text-align:center; }
.godname { height:16px; font-size:14px; line-height:16px; text-align:center; white-space:nowrap; overflow:hidden; }
.god {
	.godinfo-handle {
		cursor: pointer;
		display: block;
	}
}

.data-block {
	background:#fafafa;
	padding:8px 4px;
	margin:4px;
	border:2px solid transparent;
	@media (prefers-color-scheme: dark) {
		background: #2d2d2d;
	}
}
.data-block h2 {
	margin:0 0 0.1em;
}
.filter {
	margin-bottom:8px;
}
#legend {float:right;}
#options {float:left;}
#filters {float:left;}

#legend_freerotation, .freerotation {
	font-size:12px; line-height:12px;
	background:#44cc44;
	font-weight:bold;
	padding:2px;
	border:1px solid #000;
	cursor:default;
}
.freerotation {
	position:absolute; top:0px; left:0px;
	border-radius:0 0 2px 0;
}

.icon-pantheon {
	width:100px;
	height:1em;
	font-size:80px;
	line-height:1em;
	float:right;
}
input[type=button], input[type=text] {
	padding:2px 4px;
}
.filter-role-option, .filter-pantheon-option {
	background:#dddddd;
	padding:2px 4px;
	cursor:pointer;
	@media (prefers-color-scheme: dark) {
		background: #463f3f;
	}
}
.icon-role {
	vertical-align: middle;
	margin-right: 2px;
}

#role-column-assassin, #filter-role-option-assassin {
	background: @color-assassin;
	@media (prefers-color-scheme: dark) {
		background: darken(@color-assassin, 30%);
	}
}
#role-column-warrior, #filter-role-option-warrior {
	background:@color-warrior;
	@media (prefers-color-scheme: dark) {
		background: darken(@color-warrior, 40%);
	}
}
#role-column-hunter, #filter-role-option-hunter {
	background:@color-hunter;
	@media (prefers-color-scheme: dark) {
		background: darken(@color-hunter, 40%);
	}
}
#role-column-mage, #filter-role-option-mage {
	background:@color-mage;
	@media (prefers-color-scheme: dark) {
		background: darken(@color-mage, 30%);
	}
}
#role-column-guardian, #filter-role-option-guardian {
	background:@color-guardian;
	@media (prefers-color-scheme: dark) {
		background: darken(@color-guardian, 30%);
	}
}

.god .goddetails {
	display: none;
}
#god-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);

	&.active {
		display: block;
	}

	#god-overlay-close-handle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 24px;
		height: 24px;
		padding: 2px 4px;
		background-color: #ccc;
		cursor: pointer;
		text-align: center;
	}

	.goddetails {
		display: block;
		margin: 1em auto;
		max-width: 500px;
		background-color: #fff;
		padding: 10px;
		@media (prefers-color-scheme: dark) {
			background-color: #333;
		}
	}
	
	.caption { font-size:0.6em; line-height:1em; }
	h2 { margin:0; }
	.ability { margin-top: 2px; }
	.ability img {
		margin-right: 4px;
		height: 2em;
		vertical-align: middle;
	}
	.ability-description {
		padding-left: 1em;
	}
}