sidebar-common.css

:root {
	--font-color: #444;
	--font-color-active: #000;
	--font-color-inactive: #999;
	--border-color: #eee;
	--border-color-active: #ccc;
	--background-color : #fcfcfc;
	--background-color-active: #e3ecf1;
	background-color: var(--background-color);
}

@font-face {
	font-family: "Roboto";
	src: url(./Roboto-Regular.woff2);
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "Roboto";
	src: url(./Roboto-Italic.woff2);
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "Roboto";
	src: url(./Roboto-Bold.woff2);
	font-style: normal;
	font-weight: bold;
}
@font-face {
	font-family: "Roboto";
	src: url(./Roboto-BoldItalic.woff2);
	font-style: italic;
	font-weight: bold;
}

.leftBar {
	padding-right: .1rem;
}
.rightBar {
	padding-left: .1rem;
}

body {
	background-size: cover;
	background-repeat: no-repeat;
	background-clip: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 100%;
	width: 100%;
	overflow: hidden;
	height: 100vh;
	font-family: "Roboto";
}

a,
a:visited {
	color: unset;
}
p,
ul {
	padding: 0;
	margin: 0;
}
main {
	width: 100%;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	color: var(--font-color);
}

.hidden {
	display: none!important;
}

.updated #rss-reloadAll>span,
.updated #pocket-reload>span {
	animation: spin 1.8s linear infinite;
	mask-image: url(icons/loader.svg) !important;
	-webkit-mask-image: url(icons/loader.svg) !important;
}
.updating {
	animation: blink 2s linear infinite;
}

@keyframes spin {
	100% {
		transform:rotate(360deg);
	}
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

nav {
	width: 100%;
	padding: .3rem 0;
	background-color: var(--background-color);
	user-select: none;
	moz-user-select: none;
}

	.controls {
		display: inline-flex;
		background-color: inherit;
	}
	nav>.controls {
		flex-flow: row;
		flex-wrap: wrap;
		width: auto;
		max-width: 100%;
	}
	#controls-iframe {
		margin-top: .4rem;
	}

	#controls-sidebar {
		display: inline-flex;
	}

	#controls-top {
		display: none;
		flex-flow: row;
		height: auto;
		min-height: 2rem;
		width: 100%;
		box-sizing: border-box;
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: var(--background-color);
		border-top-color: var(--border-color);
		border-top-width: .1rem;
		border-top-style: solid;
		padding: .4rem .2rem;
		padding-right: 1rem;
	}
	#controls-button {
		width: 100%;
		justify-content: center;
	}
	.history #controls-button {
		margin-top: .5rem;
		margin-bottom: .5rem;
	}

	#controls-bottom {
		display: none;
		flex-flow: row;
		height: auto;
		min-height: 2rem;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: var(--background-color);
		border-top-color: var(--border-color);
		border-top-width: .1rem;
		border-top-style: solid;
		padding: .4rem .2rem;
		padding-right: 1rem;
	}

	#controls-item {
		display: none;
		position: absolute;
		right: 0;
		top: 0.05rem;
		padding-left: .4rem;
	}
	.item:hover>#controls-item,
	.folder-name:hover>#controls-item {
		display: block;
	}
	.moving #controls-item {
		display: none!important;
	}
		#controls-bottom>svg {
			position: absolute;
			left: .8rem;
			top: .6rem;
			width: 1.5rem;
			height: 1.5rem;
			margin: 0;
		}

		.button {
			position: relative;
			display: none;
			align-items: safe center;
			cursor: pointer;
			color: var(--font-color);
		}
		#controls-sidebar>.button,
		#controls-button>.button {
			box-sizing: border-box;
			width: 48%;
			display: inline-block;
			text-align: center;
		}

		#controls-sidebar>.button,
		#controls-iframe>.button {
			width: 1.4rem;
			height: 1.4rem;
		}
		#controls-item>.button {
			width: 1rem;
			height: 1rem;
			margin: 0 .06rem;
		}
		.active #controls-item>.button {
			width: 1.05rem;
			height: 1.05rem;
		}
		.leftBar nav>.controls>.button {
			margin-left: .1rem;
		}
		.leftBar #controls-bottom>.button {
			margin-left: .4rem;
		}
		.rightBar nav>.controls>.button,
		.rightBar #controls-bottom>.button {
			margin-right: .4rem;
		}

		#controls-bottom>.button,
		#controls-top>.button {
			display: inline-block;
		}

		#mainControls-sidebarActions {
			position: absolute;
			background-color: var(--background-color);
			z-index: 999;
			top: 0;
			right: 0;
			margin-right: 0!important;
			padding: .45rem .2rem;
		}
			#mainControls-sidebarActions>span {
				width: .7rem!important;
				height: 1.4rem!important;
			}

		.text-button {
			user-select: none;
			--moz-user-select: none;
			font-weight: bold;
			cursor: pointer;
			width: auto;
			border-bottom-width: .05rem;
			text-align: center;
			font-size: 1rem;
			line-height: 1rem;
		}

			.button>span {
				display: inline-block;
				width: 1.4rem;
				height: 1.4rem;
				background-color: var(--font-color);
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-size: 90% 90%;
				-webkit-mask-position: center;
				-webkit-mask-mode: alpha;
				-webkit-mask-clip: content-box;
				mask-repeat: no-repeat;
				mask-size: 90% 90%;
				mask-position: center;
				mask-mode: alpha;
				mask-clip: content-box;
			}
			#controls-button>.button>span {
				width: 1.2rem;
				height: 1.2rem;
			}
			#controls-item>.button>span,
			#controls-top>.button>span {
				width: .9rem;
				height: .9rem;
			}
			.button:hover>span {
				-webkit-mask-size: 100% 100%;
				mask-size: 100% 100%;
				background-color: var(--font-color-active)!important;
			}

			.button #rss-unreaded {
				position: absolute;
				display: inline-block;
				top: 0;
				right: 0;
				margin: 0;
				padding: .1rem;
				color: var(--font-color-active);
				background-color: var(--background-color);
				opacity: .8;
				font-size: .5rem;
				line-height: .5rem;
			}
			.button #rss-unreaded:empty {
				padding: 0;
			}

			.tabs #mainControls-tabs::before,
			.bookmarks #mainControls-bookmarks::before,
			.history #mainControls-history::before,
			.downloads #mainControls-downloads::before,
			.rss #mainControls-rss::before,
			.pocket #mainControls-pocket::before,
			.search #mainControls-search::before,
			.plain #tabs-plain::before,
			.domain #tabs-domain::before,
			.tree #tabs-tree::before,
			.plain #rss-plain::before,
			.domain #rss-domain::before,
			.plain #pocket-plain::before,
			.domain #pocket-domain::before,
			.type #pocket-type::before,
			#unfixed-button::before,
			.pinned .pin::before {
				content: '';
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0;
				height: 1.4rem;
				width: 1.4rem;
				box-shadow: 0 0 2px 2px var(--background-color-active);
				background-color: var(--background-color-active);
			}

.tree-view.moved>.folder-content .folder{
	display: none!important;
}
	.folder.folded>.folder-content {
		display: none;
	}
	.hidden-view.folder.folded>.folder-content {
		display: block;
	}
	.hidden-view>.folder-content,
	.tree #root-folder>div>.tree-view>.folder-content,
	.tree #root-folder>div>.type-view>.folder-content {
		margin-left: 0;
		border-left: none;
	}
	.folder.moved>.folder-content {
		display: none;
	}
	.moved.hidden-view>.folder-content,
	.moved.tree-view>.folder-content {
		display: block;
	}
		.item,
		.folder-name {
			display: block;
			text-decoration: none;
			white-space: nowrap;
			font-size: .9rem;
			line-height: .9rem;
			overflow: hidden;
			height: auto;
			padding: .1rem .2rem .1rem 1.45rem;
			margin: .2rem;
			position: relative;
			background-repeat: no-repeat;
			background-size: .9rem .9rem;
			background-position-y: .1rem;
			user-select: none;
			--moz-user-select: none;
		}
		.folder.domain-view .loading.item {
			padding-left: 1.4rem!important;
		}
			.loading::before {
				padding: 0!important;
				animation: spin 1.8s linear infinite;
				transform-origin: 50% 50%;
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -.5rem;
				width: 1rem;
				height: 1rem;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 1rem 1rem;
				background-image: url('icons/loader.svg')!important;
			}
			.folder.domain-view .loading::before {
				left: .2rem;
				width: .8rem;
				height: .8rem;
				background-size: .8rem .8rem;
			}
		.loading.item {
			background-image: none!important;
		}
		.item.moved {
			opacity: .5;
		}
		.leftBar .item {
			background-position-x: .2rem;
		}
		.rightBar .item {
			background-position-x: .1rem;
		}


		.item:hover {
			background-color: var(--border-color);
			border-color: var(--border-color-active);
			color: var(--font-color-active);
			cursor: pointer;
		}
		.folder-name {
			display: none;
			position: relative;
			border-style: solid;
			border-width: .05rem;
			border-color: var(--border-color-active);
			background-color: var(--border-color);
			cursor: pointer;
			padding-left: 2.8rem;
			background-position-x: 1.4rem;
		}
		.folder-name:hover {
			border-color: var(--border-color);
			background-color: var(--border-color-active);
			cursor: default;
		}
		.normal-view .folder-name {
			background-image: none;
			padding-left: 1.4rem;
		}
			.folder-name::before {
				content: '';
				display: inline-block;
				position: absolute;
				left: .3rem;
				top: .1rem;
				width: .8rem;
				height: .8rem;
				background-image: url(icons/folder-open.svg);
				background-size: 100% 100%;
			}
			.folder-name:hover::before {
				background-image: url(icons/folder-open-hover.svg);
			}

		.domain-view>.folder-name,
		.type-view>.folder-name,
		.normal-view>.folder-name {
			display: block;
		}
			.folded>.folder-name::before {
				transform: rotate(-90deg);
			}

#search-results {
	display: none;
}
.search-active #search-results {
	display: block;
}
.search-active #root-folder,
.search-active #controls-button {
	display: none;
}
	#search-container {
		position: relative;
		width: 100%;
	}
		.search-input {
			height: 1.6rem;
			width: calc(100% - .4rem);
			text-indent: 1.8rem;
			background-color: var(--background-color-active);
			border-style: solid;
			border-color: var(--border-color);
			border-width: .05rem;
			margin: 0 .2rem;
			color: var(--font-color-active);
		}
		.search-input::placeholder {
			color: var(--font-color-inactive);
		}
		.search-icon {
			display: inline-block;
			width: 1.2rem;
			height: 1.2rem;
			position: absolute;
			z-index: 99;
			left: .4rem;
			top: .2rem;
			background-color: var(--font-color-inactive);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			-webkit-mask-position: center;
			-webkit-mask-mode: alpha;
			-webkit-mask-image: url(icons/search.svg);
			mask-repeat: no-repeat;
			mask-size: 100% 100%;
			mask-position: center;
			mask-mode: alpha;
			mask-image: url(icons/search.svg);
		}
		.search-options {
			width: 1.2rem;
			height: 1.2rem;
			position: absolute;
			z-index: 99;
			left: .4rem;
			top: .2rem;
			margin-left: .1rem;
			background-color: var(--font-color-inactive);
			display: inline-block;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			-webkit-mask-position: center;
			-webkit-mask-mode: alpha;
			mask-repeat: no-repeat;
			mask-size: 100% 100%;
			mask-position: center;
			mask-mode: alpha;
			-webkit-mask-image: url('icons/options.svg');
			mask-image: url('icons/options.svg');
		}
		.clear-search {
			display: none;
			width: 1.2rem;
			height: 1.2rem;
			position: absolute;
			z-index: 99;
			right: .4rem;
			top: .2rem;
			background-color: var(--font-color-inactive);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			-webkit-mask-position: center;
			-webkit-mask-mode: alpha;
			-webkit-mask-image: url(icons/close.svg);
			mask-repeat: no-repeat;
			mask-size: 100% 100%;
			mask-position: center;
			mask-mode: alpha;
			mask-image: url(icons/close.svg);
		}

		.search .search-icon:hover {
			background-color: var(--font-color-active);
		}

@media (max-width: 2rem) {
	body {
		overflow:hidden;
	}
		main {
			max-height: calc(100vh - 3rem);
			overflow: hidden;
		}
		nav>.controls {
			flex-flow: column;
		}
		#controls-item {
			display: none!important;
		}
		#controls-button {
			flex-flow: column;
			padding: 0 .2rem;
		}
			#controls-button>.button {
				margin-top: .3rem;
			}
			#controls-sidebar>.button {
				display: none;
			}
			.manual.unfixed #mainControls-leftBarShow,
			.manual.unfixed #mainControls-rightBarShow,
			.tabs #mainControls-tabs,
			.bookmarks #mainControls-bookmarks,
			.history #mainControls-history,
			.downloads #mainControls-downloads,
			.rss #mainControls-rss,
			.pocket #mainControls-pocket,
			.search #mainControls-search {
				display: inline-block;
			}
}

@media (min-width: 2.01rem) {

	main {
		margin-bottom: 2.5rem;
	}
	main.search-at-top {
		margin-bottom: 0;
	}
		.pocket #controls-top,
		.search-at-top #controls-top {
			display: flex;
			margin-bottom: .5rem;
			margin-top: .5rem;
		}
		#controls-bottom {
			display: flex;
		}
		.search-at-top #controls-bottom {
			display: none;
		}
			#controls-sidebar>.button {
				display: inline-block;
			}
			#controls-button>.button {
				margin-right: .5rem;
				margin-left: .5rem;
				padding: .3rem 0;
			}
			.manual.unfixed #mainControls-leftBarHide,
			.manual.unfixed #mainControls-rightBarHide,
			.unfixed.narrow #mainControls-narrow,
			.unfixed.wide #mainControls-wide,
			.unfixed #mainControls-pin,
			.fixed #mainControls-unpin {
				display: inline-block;
			}
			.hover #mainControls-unpin {
				display: none;
			}
			.leftBar nav>.controls>.button {
				margin-left: .4rem;
			}
	.tabs.tree>#root-folder>.folder {
		border-left: none;
	}
		.folder-content {
			margin-left: .8rem;
			border-left: .1rem dotted var(--border-color-active);
		}
			.leftBar .item {
				background-position-x: 0;
			}
			.folder.normal-view>.item,
			.folder.type-view>.item {
				padding-left: 1.6rem;
				margin-left: .8rem;
				border-left: .1rem dotted var(--border-color-active);
				background-position: .4rem 0rem;
			}
			.folder.domain-view .item {
				padding-left: .6rem;
				margin-left: 0;
				background-image: none;
			}
			.tree>#tabs-folder-0>.folder>.folder-content>.item {
				border-left: none;
			}
}