@import 'variables';

html {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	//overflow: -moz-scrollbars-vertical;
	//overflow-y: scroll;
}
html, body {width: 100%; height: 100%;}

// width testing
#wrap:after {display: none; content: " "; position: absolute; z-index: 9999; top: 0; left: 0; width: 318px; height: 10px; background: black; border: 1px solid blue;}

::selection {background: #bfe1de;}
::-moz-selection {background: #bfe1de;}
* {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
	-webkit-tap-highlight-color: transparent;
}
*:focus {outline: 0;}

body {font-size: 10px; font-family: 'Noto Sans', helvetica, arial, sans-serif; background: @theme_gutter;}

a { text-decoration: none; }

//#wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;}
#wrap {height: 100%; overflow-y: scroll; overflow-x: hidden;}
#app {.transition(left .3s);}
#main {position: relative; left: 0; z-index: 5; padding: @header_height 0 80px 0; .transition(left 0.3s);}
body.loggedout #main {padding-top: @header_height;}

@header_pad_top: 4px;
@header_adjusted: (@header_height - @header_pad_top);

header {position: fixed; .fixed-fix(); z-index: 14; width: 100%; height: @header_height; margin: 0 0 0 0; padding: 0 0 0 0; background: @theme_black_bg;}
header.under {z-index: 10;}
header {
	> div {display: flex; align-items: center; justify-content: space-between; width: 100%; flex-basis: 100%; height: @header_height;}
	.title {display: flex; align-items: center; justify-content: flex-start;}
	// this min-width keeps the logo/title from smashing against each other when the title is shorter. 
	.title {min-width: 200px;}
	a.logo {display: flex; align-items: center; flex-basis: 60px; flex-shrink: 0; width: 60px; height: 28px; margin: -1px 0 0 0;}
	a.logo {
		img {position: relative; z-index: 2; max-width: 100%; height: 100%; margin: -1px 0 0 8px;}
		icon {position: relative; z-index: 1; margin: 0px 0 0 -14px; font-size: 28.5px; color: #8fc46a; .transition(margin-left .3s);}
	}
	/*
	a.logo:before {content: " "; position: fixed; opacity: 0; z-index: 4; top: 26px; left: 8px; width: 12px; height: 12px; background: @theme_warn; border-radius: 6px; .transition(opacity .3s);}
	.notify {
		a.logo:before {opacity: 1;}
	}
	*/
	.has-back {
		h1 {margin-left: 10px;}
		a.logo {display: none;}
	}

	h1 {display: flex; align-items: center; flex-grow: 1; min-width: 100px; height: @header_height; margin: 0 0 0 0; text-align: left; font-weight: normal; font-size: 1.6em; line-height: 1.2em; .ellipsis();}
	h1 {
		> span,
		> a {display: flex; align-items: center; max-width: 100%; color: @theme_primary; .ellipsis();}
		> a {
			icon {vertical-align: -12%; margin-right: 8px; color: #8fc46a; font-size: 1.4em;}
			span {display: flex; flex-wrap: nowrap; align-items: center;}
		}
		space {display: block; max-width: 90px; margin: 0 6px 0 0; padding: 2px 6px; font-size: 14px; cursor: pointer; .ellipsis(); border-radius: 3px;}
		space {
			&.light {color: #eee;}
			&.dark {color: @theme_black_bg;}
		}
	}
	ul.actions {display: flex; flex-wrap: nowrap; height: @header_height; margin-right: 8px; list-style: none;}
	ul.actions {
		> li {display: inline-block; min-width: 22px; height: @header_height; vertical-align: top;}
		> li {
			&.mod {position: relative;}
			&.mod:after {display: block; content: " "; position: absolute; top: 6px; right: 0; width: 10px; height: 10px; margin: 0 0 0 0; background: @theme_warn; border-radius: 5px;}
			&.mod.bottom:after {top: auto; bottom: 8px; right: 2px;}

			&.notification {margin-right: 6px;}

			a {min-width: 36px;}
			> a {display: inline-block; height: @header_adjusted; line-height: 42px; text-align: center;}
			> a {
				icon {font-size: 22px; color: #eee; vertical-align: middle;}
				icon.info {font-size: 20px;}
			}
			.item-actions {
				> a {height: @header_height; margin: 2px 0 0 0; line-height: @header_height; text-align: center;}
				> a icon {color: #eee;}
				> .menu {top: 8px; right: 8px;}
			}
		}
	}
}

footer {display: block; margin: 32px 0 0 0; padding: 16px; font-size: 10px; color: #777; text-align: right;}

/* settings menu slide in */
body.settings {
	header a.logo icon {margin-left: -20px;}
}

/* body page slide shite */
#tmp-slide {position: absolute; margin-top: @header_height; display: none; width: 100%; overflow-y: scroll; .transition(left 0.3s);}
body.loggedout #tmp-slide {margin-top: @header_height;}
body.page-slide {overflow: hidden;}
body.page-slide #tmp-slide {display: block;}

