@import "common";
@import "pulser";

$aside-menu-width : 200px;
$main-view-search-bar-height : 40px;

::-webkit-scrollbar { 
	background : none;
}
::-webkit-scrollbar-button {
	display : none;
}
::-webkit-scrollbar-track {
	background : none;
}
::-webkit-scrollbar-track-piece { 
	background : transparentize(white, 0.9);
}
::-webkit-scrollbar-thumb {
	background : transparentize(white, 0.5);
}
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

._button {
	min-width : 125px;
	padding : 5px 15px;
	margin : 0 5px;
	display : inline-block;
	border : 1px solid transparent;
	font : {
		family : $oxygen;
		size : 0.9em;
	}
	text-align : center;
	color : white;
	background : transparentize(white, 0.75);
	outline : none;
	cursor : pointer;

	@include transition(background-color, .25s, ease);
	@include border-radius(5px);
}

.confirm-button {
	@extend ._button;

	&:hover {
		background-color : $blue;
	}
}

.cancel-button {
	@extend ._button;

	&:hover {
		background-color : $red;
	}
}

.main-view-wrapper, ._overlay-menu-wrapper {
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
}

.main-view-wrapper {
	z-index : 1;

	.aside-menu, .main-view {
		position : absolute;
		top : 0;
		height : 100%;

		@include transition(left, .5s, ease);
	}
}

.aside-menu {
	left : - $aside-menu-width;
	width : $aside-menu-width;
	background-color : $black;
	box-shadow: inset -5px 0 15px transparentize(black, 0.5);

	&.visible {
		left : 0;
	}

	ul {
		margin : 0;
		padding : 0;
		list-style-type: none;

		li {
			padding : 10px 15px;
			border-bottom : 1px solid transparentize(black, 0.75);
			color : white;
			font : {
				family : $oxygen;
				size : 0.9em;
			}
			cursor : pointer;
			@include transition(background-color, .5s, ease);

			&:hover {
				background-color : transparentize(white, 0.9);
			}
		}
	}
}

.main-view, ._overlay-menu-wrapper {
	background-image : url($img-folder + 'main-background.png');
}

.main-view {
	width : 100%;

	&.background {
		left : $aside-menu-width;
	}

	.main-view-header, .main-view-content, .search-bar {
		position : absolute;
		left : 0;
		width : 100%;
	}

	.main-view-header, .search-bar {
		z-index : 2;
	}
}

.main-view-header {
	top : 0;
	padding : 10px 15px;
	@include box-sizing(border-box);

	img, p {
		display : inline-block;
		vertical-align : middle;
		margin : 0px 5px;
		cursor : pointer;
	}

	img {
		@include transition(opacity, 0.5s, ease);

		&:hover {
			opacity : 0.5;
		}
	}

	p {
		color : white;
		font : {
			family : $oxygen;
			size : 1em;
		}
	}
}

.search-bar {
	top : $body-height - $main-view-search-bar-height;
	height : $main-view-search-bar-height;

	background-color : transparent;

	@include transition(background-color, 0.5s, ease);

	&.active, &:hover:not(.active) {
		background-color : transparentize(black, 0.5);
	}

	ul {
		margin : 5px 10px 5px 10px;
		padding : 0;
		list-style-type : none;

		li {
			display : inline-block;
			vertical-align : middle;
			padding : 0;
			height : $main-view-search-bar-height - 10px;
			@include box-sizing(border-box);

			&.icon, &.clickable-icon {
				padding : 5px;
			}

			&.clickable-icon {
				cursor : pointer;
				@include transition(opacity, .5s, ease);

				&:hover:not(.hidden) {
					opacity : 0.75;
				}
			}

			&.hidden {
				opacity : 0;
				cursor : default;
			}
		}
	}

	ul li input {
		width : $app-width - (30 * 2) - 20 - 10;
		height : 100%;
		border : none;
		outline : none;
		padding : 0 5px 0 20px;
		background : transparent;
		color : white;
		@include box-sizing(border-box);

		font : {
			family : $oxygen;
			size : 0.9em;
		}

		&::-webkit-input-placeholder {
			opacity : 0;
			@include transition(opacity, 0.5s, ease);
		}

		&:focus::-webkit-input-placeholder, &:hover::-webkit-input-placeholder {
			color : transparentize(white, 0.25);
			opacity : 1;
		}
	}
}

.main-view-content {
	top : 0;
	height : 100%;
	overflow : auto;
	z-index : 1;

	ul {
		margin : 10px 20px 30px 20px;
		padding : 0;
		list-style-type : none;
		overflow-x : hidden;
	}

	ul li {
		width : 70%;
		margin : 20px auto;
		background-color : transparentize(black, 0.75);
		border-bottom : 2px solid transparentize(black, 0.7);
		cursor : pointer;
		@include border-radius(5px);
		@include transition(background-color, .5s, ease);

		&:hover {
			background-color : transparentize(black, 0.5);
		}

		.bookmark-favicon-wrapper, .bookmark-details-wrapper {
			display : inline-block;
			vertical-align : middle;
		}

		.bookmark-favicon-wrapper {
			width : 25%;
			text-align : center;
		}

		.bookmark-details-wrapper {
			width : 75%;
			margin : 1em 0;
		}

		img {
			width : 16px;
			padding : 15px;
			background-color : transparentize(white, 0.75);
			@include border-radius(50%);
		}

		h2, p {
			font-family : $oxygen;
			margin : 0.5em 1em;
			word-break : break-word;
		}

		h2 {
			font-weight : normal;
			color : white;
			font-size : 1em;
			line-height : 1.8em;
		}

		p {
			color : #ccc;
			font-size : 0.8em;
			text-align : justify;
			line-height : 1.6em;
		}
	}

	.default-bookmark-list {
		display : none;
		font: {
			size : 1.2em;
			family : $oxygen;
		}
		margin : 3em 1em;
		color : transparentize(white, 0.25);
		text-align : center;
	}
}

._overlay-menu-wrapper {
	z-index : 2;
	display : none;
	opacity : 0;
	overflow : auto;
	overflow-X : hidden;

	.overlay-menu {
		margin : 30px;

		form {
			text-align : center;

			textarea, input[type="text"] {
				width : 250px;
				padding : 10px;
				outline : none;
				border : none;
				background-color : transparentize(black, 0.75);
				font : {
					family : $oxygen;
					size : 0.9em;
				}
				color : white;
				@include border-radius(5px);

				@include transition(background-color, .5s, ease);

				&:focus {
					background-color : transparentize(black, 0.5);
				}

				&::-webkit-input-placeholder {
					color : transparentize(white, 0.25);
				}
			}

			textarea {
				height : 150px;
			}
		}
	}
}

.tag-list-menu-wrapper {
	@extend ._overlay-menu-wrapper;

	h2, li {
		color : white;
		font-family : $oxygen;
		word-break : break-word;
	}

	ul {
		margin : 0;
		padding : 0;
		list-style-type : none;

		li {
			display : inline-block;
			margin : 10px 2.5%;
			width : 28%;
			font-size : 0.9em;
			cursor : pointer;
			vertical-align : top;
		}
	}

	h2 {
		margin : 1.5em 0 0.5em 0;
		font-size : 1.2em;
		font-weight : normal;
		padding : 0 50px 2px 10px;

		&.index {
			border-bottom : 2px solid transparentize(white, 0.70);
			color : transparentize(white, 0.70);
			margin-right : $app-width * .70;
		}

		&:not(.index) {
			cursor : pointer;
		}
	}
}

.bookmark-form-menu-wrapper {
	@extend ._overlay-menu-wrapper;

	form .bookmark-icon {
		width : 16px;
		padding : 15px;
		background-color : transparentize(white, 0.75);
		@include border-radius(50%);
	}

	form ul {
		width : 300px;
		margin : 0;
		padding : 0;
		list-style-type : none;
		display : inline-block;

		li {
			display : inline-block;
			vertical-align : middle;
			padding : 2.5px 10px;
			margin : 5px;
			font : {
				family : $oxygen;
				size : 0.8em;
			}
			color : white;
			background-color : transparentize(white, 0.75);
			cursor : pointer;

			@include transition(background-color, .5s, ease);

			&:hover:not(.active) {
				background-color : transparentize(white, .5);
			}

			&.active {
				background-color : $blue;
			}
		}
	}
}

.bookmark-deletion-menu-wrapper, .tag-deletion-menu-wrapper {
	@extend ._overlay-menu-wrapper;

	.overlay-menu {
		margin-top : 200px;
	}

	p {
		color : white;
		font : {
			family : $oxygen;
			size : 1.2em;
		}
		text-align : center;
		margin : 1em;
	}
}

.tag-form-menu-wrapper {
	@extend ._overlay-menu-wrapper;

	.overlay-menu {
		margin-top : 180px;
	}
}

.drag-file-area, .export-area {
	@extend .overlay-menu;

	text-align : center;
	height : $body-height - 70;

	h1 {
		font : {
			family : $oxygen;
			size : 2em;
		}
		margin : 1em;
		color : white;
	}
}

.drag-file-area {
	.pulser {
		@include pulser(white);
		display : none;
	}
}

.export-area {
	textarea {
		background : transparentize(black, 0.5);
		color : white;
		font : {
			family : $oxygen;
			size : 0.8em;
		}
		padding : 10px 15px;
		height : 200px;
		width : 300px;
		outline : none;
		border : none;
		overflow : hidden;
	}
}

.import-browser-menu-wrapper,
.export-browser-menu-wrapper,
.import-backup-menu-wrapper,
.create-backup-menu-wrapper {
	@extend ._overlay-menu-wrapper;
}

.context-menu {
	position : absolute;
	display : none;
	z-index : 99;
	width : 150px;

	background-color : white;
	@include border-radius(5px);
	box-shadow : 5px 5px 5px 0 transparentize(black, 0.5);

	&.visible {
		display : block;
	}

	ul {
		margin : 5px 0;
		padding : 0;
		list-style-type: none;

		li {
			color : $black;
			font : {
				family : $oxygen;
				size : 0.9em;
			}
			padding : 5px 5px 5px 20px;
			word-break : break-word;
			cursor : pointer;

			&:hover {
				background-color : $blue;
			}
		}
	}
}