/*
 * App Selector JS (CSS Stylesheet)
 *
 * Implements app selection on claranguyen.me and other affiliated websites.
 * Please do not use this implementation without asking me first. :)
 * Contact information at the bottom of this comment section.
 *
 * HOW TO USE:
 *     Make a div in your webpage with an ID called "appswitch". Then call
 *     "inject_appmenu()". It will fill in the div with contents needed to
 *      do the app switch.
 *
 * REQUIREMENTS:
 *     -appsel.js
 *
 * ~Clara (clara@claranguyen.me)
 */

/* Animations */
@keyframes bgfadein {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}
}

@keyframes textfadein {
	0% {
		left: -200px;
		opacity: 0;
	}
	10% {
		left: -200px;
		opacity: 0;
	}
	35% {
		left: 0px;
		opacity: 1;
	}
}

@keyframes appfadein {
	0% {
		top: 48px;
		opacity: 0;
	}
	15% {
		top: 48px;
		opacity: 0;
	}
	35% {
		top: 16px;
		opacity: 1;
	}
}

div#appswitchhidden {
	width : 0px;
	height: 0px;
}

div#appswitch {
	position: fixed;
	left  : 0px;
	top   : 0px;
	width : 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: saturate(2) blur(25px);
	z-index: 100000;
	animation: bgfadein 3s forwards;
}

div#appswitch-main {
	width: calc(100% - 200px);
	height: calc(100% - 168px);
	padding: 168px 100px;
}

div#appswitch-main .as-title {
	color: white;
	width: 100%;
	font-size: 250%;
	position: relative;
	animation: textfadein 3s forwards;
}

div#appswitch-main .app-tile {
	width: 136px;
	height: 136px;
	margin: 4px 8px 4px 0px;
	background-color: #BBB;
	outline: solid rgba(0, 0, 0, 0.4) 3px;
	outline-offset: -3px;
	float: left;
	box-shadow: 4px 4px 10px #222;
	position: relative;
	animation: appfadein 3s forwards;
	top: 16px;
}

div#appswitch-main .app-tile .app-name {
	position: relative;
	top: -24px;
	right: 8px;
	width: 100%;
	text-align: right;
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 2px black;
}

div#appswitch-main .app-tile .app-link {
	width: 136px;
	height: 136px;
}

div#appswitch-main .app-tile .app-link:hover {
	background-color: rgba(0, 0, 0, 0.5);
}