/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: sidebar.less
 */

#sidebar {
	margin-top: 1.2rem;
	margin-right: 1rem;
}

/* animated collapse menu: */
#main-sidebar-layout {
	& {
		transition-duration: .4s;
	}
	#sb-header {
		#tg_button {
			& {
				background-color: transparent;
				border: transparent none 0;
				position: relative;
				top: 1.5rem;
				padding: 0;
			}
			svg {
				& {
					width: 1em; height: 2em;
				}
				.top-bar, .bottom-bar {
					transform-origin: center;
					transition-duration: .5s;
					fill: @ini_link;
				}
			}
		}
	}
	&.toggle_auto {
		#tg_button {
			& {
				float: right;
				left: .5rem;
			}
			svg {
				.top-bar { transform: scale(100%,125%) translate(10%,-25%) rotate(-60deg); }
				.bottom-bar { transform: scale(100%, 125%) translate(25%,15%) rotate(60deg); }
			}
		}
	}
	&.toggle_collapse {
		#tg_button {
			& {
				float: left;
				left: 0;
			}
			svg {
				.top-bar { transform: scale(100%, 125%) translate(-20%,-15%) rotate(60deg); }
				.bottom-bar { transform: scale(100%, 125%) translate(-30%,0) rotate(-60deg); }
			}
		}
	}
}
#sbNavigation {
	& {
		text-align: @ini_sidebar_text_align;
		margin-top: 1.25rem;
		font-size: .9rem;
	}
	ul, ol {
		margin: .25rem;
		list-style: none inside;
	}
	ul ul, ol ol, ul ol, ol ul {
		margin-left: .75rem;
		list-style: none inside;
	}
	dl {
		margin: 0;
		list-style: none inside;
	}
	dl dd {
		margin-left: .5rem;
		list-style: none inside;
	}
	details {
		& {
			margin-left: 1em;
		}
		summary {
			& {
				font-family: @ini_headline_fonts;
				font-size: .90rem;
				line-height: 1em;
				text-indent: -.75em;
				color: @ini_sidebar_headline_color;
				cursor: pointer;
				border-radius: .25em;
				padding: .5em .5em .5em 2px;
			}
			&:hover {
				color: @ini_sidebar_link_color;
			}
			&:focus {
				outline: @ini_focus_outline 2px solid;
			}
		}
	}
	
	
	a:link, a:visited {
		display: block;
		padding: .5em .5em .5em 2px;
		width: 100%;
		box-sizing: border-box;
		color: @ini_sidebar_link_color;
		text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
	}
	h1, h2, h3, h4, h5, h6, dt {
		font-family: @ini_headline_fonts;
		color: @ini_sidebar_headline_color;
		margin: .5em 0 .25em 0;
		text-align: @ini_sidebar_text_align;
		line-height: 1em;
		font-weight: normal;
	}
	h1, h2 {
		font-size: 1rem;
		text-decoration: red line-through;
		line-height: 1.25em;
	}
	h3 {
		font-size: .96rem;
	}
	h4, dt {
		font-size: .90rem;
	}
	h5 {
		font-size: .86rem;
		font-style: italic;
	}
	h6 {
		font-size: .8rem;
		font-style: italic;
	}
	p, li, dd {
		font-size: .8rem;
		color: @ini_text;
		text-align: @ini_sidebar_text_align;
	}
	.curid {
		font-weight: bold;
	}
	a:link, a:visited {
		color: @ini_sidebar_link_color;
	}
	hr {
		width: 67%;
		border: transparent 0 none;
		background-color: @ini_sidebar_headline_color;
		height: 1pt;
		margin-top: .25em;
	}
}


/* hide sidebar in special modes: */
body.mode_admin,
body.mode_edit,
body.mode_media,
body.mode_index,
body.mode_revisions,
body.mode_backlink,
body.mode_recent,
body.mode_profile,
body.mode_login,
body.mode_resendpwd,
body.mode_diff {
	#main-sidebar-layout {
		grid-template-columns: 0 100% !important;
	}
	#sidebar header,
	#sbNavigation {
		display: none;
	}
}