/*
 * Settings JS (CSS Stylesheet)
 *
 * Implements a settings menu which the user can edit and customise site
 * functionality with. Whatever functionality you choose to add in, up to
 * you. It has to be hardcoded.
 *
 * 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 "settingsdiv". Then call
 *     "inject_settings_menu()". It will fill in the div with contents needed
 *     to do the app switch.
 *
 * REQUIREMENTS:
 *     -settings.js
 *
 * Author:
 *    Clara Nguyen (@iDestyKK)
 */

div#settings_menu_hidden {
	width : 0px;
	height: 0px;
	overflow: hidden;
}

div#settings_menu_hidden .title,
div#settings_menu_hidden .banner-link {
	display: none;
}

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

div#settings_menu h2 {
	border: 0px solid transparent;
	left: -14px;
}

div#settings_menu .top-bar {
	width: 100%;
	height: 28px;
	padding: 8px;
	position: fixed;
	background-color: #F2F3F4;
	/* border-bottom: 2px solid #DEDFE0; */
	color: #000;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.5);
	z-index: 1000001;
	text-shadow: 0px 0px 0px transparent;
}

div#settings_menu .top-bar .top-bar-inner {
	width: calc(100% - 200px);
	max-width: 1000px;
	margin: 0 auto;
	height: 100%;
}

div#settings_menu .top-bar .top-bar-inner .title {
	float: left;
	margin: 0 4px;
	font-weight: bold;
	padding: 4px 8px 4px 8px;
}

div#settings_menu .top-bar .top-bar-inner .banner-link {
	position: relative;
	float: right;
	margin: 0px 4px;
	font-weight: bold;
	padding: 4px 8px 4px 8px;
	border-radius: 4px;
	color: #000;
}

body.dark   div#settings_menu .top-bar .top-bar-inner .banner-link,
body.amoled div#settings_menu .top-bar .top-bar-inner .banner-link {
	color: #FFF;
}

div#settings_menu .top-bar .top-bar-inner .banner-link:hover {
	background-color: #000;
	color: #FFF;
}

@keyframes settingsslidein {
	from {
		top: -50%;
	}
	to {
		top: 0%;
	}
}

div#settings_menu .main {
	width: calc(100% - 200px);
	height: 50%;
	max-width: 1000px;
	margin: 44px auto 0px auto;
	position: relative;
	z-index: 1000000;
	top: 0%;
	animation-duration: 0.25s;
	animation-name: settingsslidein;
}

div#settings_menu .main table.settings-table {
	width: 100%;
	height: 100%;
	border-spacing: 0px;
	border-collapse: separate;
	color: #000;
	font-family: ssans-regular, kosugimaru;
}

div#settings_menu .main table.settings-table td.left {
	width: 30%;
	background-color: #D1D1D1;
	vertical-align: top;
	padding-top: 28px;
}

div#settings_menu .main table.settings-table td.left .tab {
	width: calc(100% - 6px);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 6px 14px 6px 6px;
	margin: 2px 8px;
	text-align: right;
	box-sizing: border-box;
	font-size: 110%;
	font-weight: bold;
}

div#settings_menu .main table.settings-table td.left a {
	text-decoration: none;
	color: inherit;
}

div#settings_menu .main table.settings-table td.left .tab:hover,
div#settings_menu .main table.settings-table td.left .selected {
	background-color: #EEE;
}

div#settings_menu .main table.settings-table td.right {
	width: 70%;
	background-color: #EEE;
	vertical-align: top;
	padding: 22px;
}

div#settings_menu .main table.settings-table td.right .cat_hidden {
	display: none;
}

div#settings_menu .main table.settings-table td.right div#sc_appearance table.option {
	width: 100%;
	text-align: center;
}

div#settings_menu .main table.settings-table td.right div#sc_appearance table.option img {
	width: 70%;
	border: 1px solid #CCC;
	border-radius: 4px;
}

div#settings_menu .main table.settings-table td.right div#sc_language select,
div#settings_menu .main table.settings-table td.right div#sc_appearance select {
	color: #000;
	background-color: #FFF;
	font-family: inherit;
	font-size: inherit;
	padding: 2px 4px;
	width: 240px;
}

/* Dark Theme Bonuses */

body.dark div#settings_menu .top-bar .top-bar-inner .banner-link:hover {
	background-color: #FFF;
	color: #000;
}

body.dark div#settings_menu .top-bar {
	background-color: #111217;
	/* border-bottom: 2px solid #DEDFE0; */
	color: #FFF;
}

body.dark div#settings_menu .main table.settings-table td.left {
	background-color: #1D1D23;
	color: #FFF;
}

body.dark div#settings_menu .main table.settings-table td.left .tab:hover,
body.dark div#settings_menu .main table.settings-table td.left .selected {
	background-color: #17171C;
}

body.dark div#settings_menu .main table.settings-table td.right {
	background-color: #17171C;
	color: #FFF;
}

body.dark div#settings_menu .main table.settings-table td.right div#sc_appearance table.option,
body.dark div#settings_menu .main table.settings-table td.right div#sc_about table.details {
	color: #FFF;
}

body.dark div#settings_menu .main table.settings-table td.right div#sc_appearance table.option img {
	border: 1px solid #333;
}

body.dark div#settings_menu .main table.settings-table td.right div#sc_language select,
body.dark div#settings_menu .main table.settings-table td.right div#sc_appearance select {
	color: #FFF;
	background-color: #000;
	border: 2px solid #1D1D22;
}

body.dark a.no-dec {
	color: inherit;
}

/* AMOLED Theme Bonuses */

body.amoled div#settings_menu .top-bar .top-bar-inner .banner-link:hover {
	background-color: #FFF;
	color: #000;
}

body.amoled div#settings_menu .top-bar {
	background-color: #000;
	/* border-bottom: 2px solid #DEDFE0; */
	color: #FFF;
}

body.amoled div#settings_menu .main table.settings-table td.left {
	background-color: rgba(8, 8, 10, 0.85);
	color: #FFF;
}

body.amoled div#settings_menu .main table.settings-table td.left .tab:hover,
body.amoled div#settings_menu .main table.settings-table td.left .selected {
	background-color: #0e0e0e;
}

body.amoled div#settings_menu .main table.settings-table td.right {
	background-color: #0e0e0e;
	color: #FFF;
}

body.amoled div#settings_menu .main table.settings-table td.right div#sc_appearance table.option,
body.amoled div#settings_menu .main table.settings-table td.right div#sc_about table.details {
	color: #FFF;
}

body.amoled div#settings_menu .main table.settings-table td.right div#sc_appearance table.option img {
	border: 1px solid #333;
}

body.amoled div#settings_menu .main table.settings-table td.right div#sc_language select,
body.amoled div#settings_menu .main table.settings-table td.right div#sc_appearance select {
	color: #FFF;
	background-color: #000;
	border: 2px solid #1D1D22;
}

body.amoled a.no-dec {
	color: inherit;
}