obshagce/base.css

/*
	General styles

	some practically general ones will be in the
	Board styling section

*/

abbr {
	cursor:help;
}

body {
	margin:0;
	padding:1em;
}

img {
	height:100%;	/*	resize to fill their container	*/
	width:100%;		/*	resize to fill their container	*/
	vertical-align:bottom;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
	Board styling

	See readme.txt for a layout diagram
	with IDs and classes labeled
 */

main#board {
	display:grid;
	grid-gap:2px;
	grid-template-columns:32em 32em;
	grid-template-rows:auto;
	grid-template-areas:
		"perp 	view"
		"msg	view";
}
main#board section.window {
	background-color:lightgray;
	border:2px outset lightgrey;
	padding:2px;
}

main#board h1,
main#board h2 {
	border:2px groove lightgray;
	display:inline-block;
	font-size:1em;
	margin:0;
	margin-bottom:2px;
	padding:0 1em;
	text-transform:uppercase;
}
main#board h1 {
	text-align:center;
}
main#board h2 {}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

main#board section#view {
	grid-area:view;
	text-align:center;
}
main#board section#view section#map {
	display:grid;
	grid-gap:2px;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr 1fr 1fr 1fr 1fr;
}
main#board section#view section#map section.cell {
	background-size:6em 6em;
	border:1px inset lightgray;
	height:6em;
	padding:0;
	width:6em;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

main#board section#perception {
	grid-area:perp;
}
main#board section#perception section#senses {
	display:grid;
	grid-gap:2px;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr 1fr;
}

main#board section#perception section#senses section.icon {
	border:1px outset lightgray;
}

main#board section#perception section#senses section.description {
	border:1px inset lightgray;
	color:black;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
*/

main#board section#message {
	grid-area:msg;
}
main#board iframe {
	border:1px inset lightgray;
	height:15em;
	margin:0;
	padding:0;
	width:31.4em;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
	Title screen styling
*/

main#titlescreen {
	margin:0;
	padding:0;
	width:32em;
}

main#titlescreen h1,
main#titlescreen h2 {
	font-size:1em;
	margin:0 1em;
	text-align:center;
	text-transform:uppercase;
}
main#titlescreen h1 {
	font-style:italic;
}
main#titlescreen h2 {}
main#titlescreen h3 {
	margin:0;
}

main#titlescreen header,
main#titlescreen hr,
main#titlescreen section {
	margin:2px 0;
	padding:0;
}

main#titlescreen hr {
	height:3px;
}

main#titlescreen section#credit {}

main#titlescreen section#notes ul {
	margin:0;
}

main#titlescreen section#splash {
	padding:0;
	text-align:center;
}

/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-
	Some generic manipulation classes

	Use these to easily rotate, flip, etc., images
*/

/*	Rotate elements. Mostly for 'tiles'?	*/
.rotate_90	{transform:rotate(90deg);}
.rotate_180	{transform:rotate(180deg);}
.rotate_270	{transform:rotate(270deg);}

/*	Flip image	*/
.flip_h	{transform: scaleX(-1);}
.flip_v	{transform: scaleY(-1);}

/*	Round images	*/
.shape_circle {border-radius:50%;}

/*	Align elements.	*/
.align_top		{text-align:top;}
.align_right	{text-align:right;}
.align_bottom	{text-align:bottom;}
.align_left		{text-align:left;}
.align_hcenter	{text-align:center;}
/*	.align_vcenter	{}	A PAIN	*/

/*	Keep image's original size	*/
.no_scale {
	height:auto;
	width:auto;
}

/*	Undoes indentation on board cell	*/
.empty {
	background-image:none!important;
	border:none!important;
}

/*	Animation

	Use these classes to apply simple animated effects
*/

/*	Blink	*/
.blink {
	animation-name:blink;
	animation-duration:0.4s;
	animation-timing-function:step-start;
	animation-iteration-count:infinite;
}
@keyframes blink {
	50% { opacity:0; }
}

/*	Colour cycle
	Might add different flavours later?
*/
.cycle{
	animation-name:cycle;
	animation-duration:0.2s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
@keyframes cycle {
	0%		{ color:#ff55ff; }
	20%		{ color:#ffffff; }
	40%		{ color:#55ff55; }
	60%		{ color:#ffff55; }
	80%		{ color:#0000aa; }
	100%	{ color:#aa0000; }
}

/*	Flip
	Simple animation by flipping image	*/
.flipanim_h {
	transform:scaleX(+1);
	animation-name:flipanim_h;
	animation-duration: 0.8s;
	animation-timing-function:step-start;
	animation-iteration-count:infinite;
}
@keyframes flipanim_h {
	50% { transform:scaleX(-1); }
}