/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: _edit.css
 */

main {
	.secedit {
		& {
			float: right;
			margin-top: -22pt;
			line-height: 0;
			z-index: 5;
			display: none;
		}
		div.no {
			display: inline;
			margin: 0;
			padding: 0;
		}
		button {
			border: @ini_border_color solid 1.5pt;
			background-color: transparent;
			color: transparent;
			width: 1.75rem; height: 1.75rem;
			border-radius: 50%;
			font-size: 0;
			z-index: 90;
			cursor: pointer;
		}
		button:hover, button:focus {
			outline: @ini_focus_outline solid 2pt;
			border-color: @ini_border_color;
			background-color: transparent;			
		}
		button::before {
			content: ' ';
			display: inline-block;
			width: .9rem; height: .9rem;
			background: transparent url('/latest/lib/tpl/nuropa/images/icon/edit.svg') no-repeat center;
			background-size: 100%;
		}
	}
	div.section_highlight_wrapper.section_highlight {
		outline: @ini_focus_outline dashed 3px;
		border-radius: .25em;
	}
}

/* show edit buttons when logged in */
body.loggedIn main .secedit {
	display: initial;
}

body.mode_edit, body.mode_preview {
	#main-layout main {
		& {
			max-width: 100%;
		}
		& > p:first-of-type {
			font-size: small;
			padding-left: .5rem;
		}
		.editBox {
			& {
			}
			.toolbar {
				z-index: 10;
				position: sticky;
				top: ~"calc(" @ini_toolbar_font_size ~" + 1.25rem)";
				background-color: @ini_toolbar_background;
				border: @ini_toolbar_border solid 1px;
				padding: .25rem;
				margin-bottom: .25em;
				box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2);
			}
			#tool__bar {
				& {
				}
				button.toolbutton {
					& {
						width: 24px; height: 24px;
						border: transparent solid 1px;
						border-radius: .125rem;
						background-color: transparent;
						padding: .125rem;
						margin: .125rem 0 .125rem .25rem;
						cursor: pointer;
					}
					&:hover {
						background-color: @ini_toolbar_hl_bg;
					}
				}
			}
			#draft__status {
				font-size: small;
				margin: .125rem 0 .125rem .5rem;
				float: left;
			}
			#dw__editform {
				textarea {
					& {
						width: 100%;
						box-sizing: border-box;
						min-width: 100%;
						max-width: 100%;
						font-family: @ini_mono_fonts;
						font-size: @ini_mono_font_size;
						resize: vertical;
					}
					&:focus {
						outline: transparent none 0;
					}
				}
				div.license {
					font-size: small;
					margin: 1.5em .125em 1em .5em;
					text-align: center;
				}
			}
			#wiki__editbar {
				& {
					margin-top: .25rem;
				}
				#size__ctl {
					& {
						float: right;
					}
					img {
						width: 24px;
						height: 24px;
						margin-left: .25rem;
					}
					img:nth-child(1), img:nth-child(2) {
						display: none;
					}
					button {
						& {
							border: transparent 0 none;
							background-color: transparent;
							padding: 0; margin: 0;
						}
						svg {
							width: 28px; height: 28px;
						}
					}
				}
				.editButtons {
					& {
						display: flex;
						justify-content: space-around;
						padding: .5rem 0 0 0;
					}
					button {
						& {
							border: @ini_form_btn_outline solid 1px;
							margin: 0 .25rem;
						}
						&[name="do[cancel]"] {
							background-color: @ini_form_btn_bg;
							color: @ini_form_btn_text;
						}
					}
					#edbtn__preview {
						background-color: @ini_form_alt_btn_bg;
						color: @ini_form_alt_btn_text;
					}
				}
				.summary {
					& {
						display: grid;
						grid-template-columns: auto max-content;
						column-gap: .5rem;
						font-size: .86rem;
					}
					label[for=edit__summary] {
						& > span {
							display: block;
							width: 100%;
						}
						input[type=text] {
							width: e('calc(100% - 10px)');
							margin: 4px;
						}
					}
					label[for=edit__minoredit] {
						&::before {
							content: 'Â ';
							display: block;
							width: 100%;
							margin-bottom: .125rem;
						}
						input {
							margin: 4px;
						}
						span {
							white-space: nowrap;
						}
					}
				}
				
			}
		}
	}
	h1#preview {
		& {
			max-width: @ini_site_width;
			font-size: 1rem;
			line-height: 1rem;
			margin: .25rem auto;
		}
		& + div.level1 {
			max-width: @ini_site_width;
			margin: 0 auto;
		}
	}
	div.preview {
		max-width: @ini_site_width;
		margin: 0 auto;
		border: @ini_border_color solid 1px;
		padding: .5rem .25rem;
		-webkit-box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2);
		box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2);
		border-top: @ini_menubar_background solid 1rem;
		border-bottom: @ini_footer_background solid 1rem;
		overflow: hidden;
	}
	
	& > div.picker {
		& {
			z-index: 11;
			font-family: @ini_toolbar_fonts;
			font-size: @ini_toolbar_font_size;
			color: @ini_toolbar_text;
			background-color: @ini_toolbar_background;
			border: @ini_toolbar_border solid 1px;
			padding: .125em;
			box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2);
		}
		button {
			background-color: transparent;
			border: transparent none 0;
			min-width: 24px; min-height: 24px;
			cursor: pointer;
			margin: 1px;
		}
		button:hover {
			background-color: @ini_toolbar_hl_bg;
		}
	}

	& > #picker1 {
		& {
			width: 308px; max-width: 308px; min-width: 308px;
			resize: both;
			overflow: auto;
		}
		button {
			padding: .1em;
			border-color: @ini_toolbar_border;
		}
	}
	& > #picker2 {
		& {
			width: 585px; max-width: 585px; min-width: 585px;
			resize: both;
			overflow: auto;
		}
		button {
			padding: .25em;
			border-color: @ini_toolbar_border;
		}
	}
}

body.mode_edit.focus_mode,
body.mode_preview.focus_mode {
	& {
		margin-top: 0 !important;
	}
	#skip-link, #toolbar-layout, #header-layout, #footer-layout,
	#to-top-block {
		display: none !important;
	}
	#main-layout {
		& {
			padding-bottom: 0;
		}
		#main-sidebar-layout {
			& {
				max-width: 100%;
				grid-template-columns: 0 auto 0;
			}
			#sidebar {
				visibility: hidden;
			}
			#main-content {
				p:first-of-type {
					display: none;
				}
				#dw__editform {
					padding: 0 .25rem;
				}
			}
			main .editBox .toolbar {
				top: 0 !important;
			}
		}
	}
	#preview,
	div.preview {
		margin: 0 .5rem;
		max-width: 100%;
		border-width: 1pt 1px;
	}
}