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

/* style manager */
#plugin__styling {
	&.ispopup {
		font-size: smaller;
	}
	form.styling {
		p:first-child {
			text-align: right;
		}
		table {
			tr:nth-child(odd) {
				background-color: @ini_background_alt;
			}
			& {
				width: 100%;
			}
			input {
				width: 100%;
				min-width: 16em;
				text-align: left;
			}
			input[type=text] {
				font-size: 75%;
			}
		}
		button[name="run[preview]"],
		button[name="run[reset]"],
		button[name="run[revert]"] {
			border: @ini_form_btn_outline solid 1px;
			background-color: @ini_form_btn_bg;
			color: @ini_form_btn_text;
		}
	}
}

/* configuration manager */
#config__manager {
	& {
		position: relative;
	}
	table {
		&, tbody, thead, tr, td, th {
			display: block;
			border: none;
			box-sizing: border-box;
		}
		td.label {
			& {
				padding: 0;
				font-size: .9rem;
				line-height: 1.5em;
				margin-bottom: .25em;
				border: none;
			}
			span.outkey {
				& {
					margin: 0;
					float: right;
					z-index: initial;
					line-height: 1.4em;
					padding: 0 .25em;
					background-color: transparent;
				}
				a:link, a:visited {
					background-color: @ini_background_neu;
					color: @ini_link;
					text-decoration: none;
					padding: .25em;
					border: @ini_link solid 1px;
					border-radius: .25em;
				}
				a:hover, a:focus {
					color: @ini_text;
					text-decoration: underline;
				}
			}
			img {
				padding: 0 .25em;
			}
		}
		td.value {
			& {
				clear: right;
				margin-left: 6pt; padding-left: 6pt;
				border: transparent 2pt solid;
				width: ~"calc(100% - 1em)";
				margin-bottom: .5em;
				font-size: .85rem;
			}
			div.input {
				& {
					width: 100%;
					background-color: transparent;
					font-size: smaller;
				}
				& > * {
					font-size: .85rem;
				}
			}
			input[type=text], input[type=password], select, textarea {
				background-color: @ini_form_field_bg;
			}
			input[type=text], input[type=password] {
				width: ~"calc(100% - 1.5em)";
			}
			input[name="config[fmode]"], input[name="config[dmode]"],
			input[name="config[auth_security_timeout]"],
			input[name="config[cssdatauri]"],
			input[name="config[tpl____nuropa____bannersize]"] {
				max-width: 4em;
			}
			input[name="config[recent]"], input[name="config[recent_days]"], input[name="config[breadcrumbs]"],
			input[name="config[jpg_quality]"],
			input[name="config[sitemap]"],
			input[name="config[readdircache]"], input[name="config[search_nslimit]"],
			input[name="config[logretain]"] {
				max-width: 2.25em;
			}
			input[name="config[defaultgroup]"],
			input[name="config[indexdelay]"],
			input[name="config[locktime]"], input[name="config[cachetime]"],
			input[name="config[fetchsize]"],
			input[name="config[subscribe_time]"],
			input[name="config[rss_update]"],
			input[name="config[tpl____nuropa____bannerimg]"] {
				max-width: 11em;
			}

			div.selection {
				display: grid;
				grid-template-columns: auto 1.25em;
				column-gap: .25em;
				place-items: start center;
				background-color: @ini_background;
				padding: .25em;
				border-left: @ini_theme_color solid 2pt;
				width: calc(50% - 2em);
				text-align: left;
			}
			div.selection:hover {
				background-color: @ini_background_alt;
			}
			div.selectiondefault {
				border-left-color: transparent;
			}
			label {
				float: initial;
				color: @ini_text;
				display: block;
				width: 100%;
			}
			div.other {
				background-color: transparent;
				font-size: small;
			}
			textarea {
				width: 100%;
				resize: vertical;
				font-family: @ini_mono_fonts;
				font-size: @ini_mono_font_size;
			}
		}
		tr:not(.default) {
			td.value {
				border-left-color: @ini_theme_color;
			}
		}
	}
	fieldset {
		& {
			background-color: @ini_background_alt;
			border: @ini_border_color solid 1pt;
			border-radius: .25rem;
			-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.3);
			box-shadow: 1px 1px 1px 0 rgba(0,0,0,.3);
			margin: 1.5rem 0 1rem 0;
		}
		legend {
			font-size: 1em;
			position: relative;
			top: ~"calc(-.75em - 2pt)";
			padding: .25em .5em .25em .5em;
			border: @ini_border_color solid 1pt;
			border-top: @ini_theme_color solid 2.5pt;
			border-bottom-width: 0;
			background-color: @ini_background_alt;
			border-radius: .25em .25em 0 0;
		}
	}
	#dw__configform > p:last-child {
		& {
			position: sticky;
			bottom: 0;
			padding: .5rem;
			display: grid;
			grid-template-columns: auto auto;
			justify-items: center;
			background-color: rgba(246,246,246,.8);
		}
		button {
			box-shadow: 0 0 4px rgba(0,0,0,0.3);
		}
	}
}
			
/* extension manager */
#extension__manager {
	.panelHeader,
	ul.tabs li.active a {
		background-color: transparent;
	}
	form.install.doku_form {
		& {
			width: 100%;
		}
		label.block {
			& {
			}
			span {
				display: block;
				text-align: left;
				width: ~"calc(100% - .5em)";
			}
			input {
				display: block;
				width: ~"calc(100% - 2em)";
				margin: .25em 0 0 1em;
			}
			&:nth-of-type(3) {
				& {
					display: grid;
					grid-template-columns: 2em auto;
					gap: .5em;
				}
				input[type=checkbox] {
					width: 1.25em; height: 1.25em;
				}
			}
		}
	}
	ul.extensionList {
		li {
			padding: .25em;
			border-radius: .25em;
		}
		li.enabled {
			background-color: @ini_background_alt;
		}
		a.info, a.info.close {
			background-position: right;
			width: 40px; height: 22px;
			margin-bottom: 2px;
		}
	}
}

/* user manager */
#user__manager {
	table {
		& {
			border: @ini_border_color solid 2px;
		}
		thead, tfooter {
			background-color: @ini_background_alt;
		}
		tbody {
			tr:nth-child(even) {
				background-color: @ini_background_alt;
			}
		}
		button:not([name="fn[add]"]) {
			border: @ini_form_btn_outline solid 1px;
			background-color: @ini_form_btn_bg;
			color: @ini_form_btn_text;
			font-size: small;
			padding: .25em .5em;
		}
	}
}

/* upgrade manager */
#plugin__upgrade {
	.log-notice {
		margin: .25em 0;
	}
	#plugin__upgrade_meter {
		span.stage {
			font-size: 16px;
			line-height: 20px;
		}
	}
}

/* log viewer */
#plugin__logviewer {
	dl {
		& {
			border: @ini_text_alt solid 1px;
			background-color: @ini_background_neu;
			padding: .5rem;
			font-family: @ini_mono_fonts;
			font-size: smaller;
			color: @ini_text_neu;
			box-shadow: inset 2pt 2pt 4pt rgba(0,0,0,0.3);
		}
		dt {
			color: @ini_text_neu;
		}
	}
}

/* move plugin */
body.mode_admin form.plugin_move_form fieldset {

	& {
		padding-top: 1em;
	}

	label {
		display: block;
		width: 100%;
	}
	input[name="dst"] {
		width: 100%;
	}
	label.block.indent.select {
		margin: 1em 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	button[type="submit"] {
		display: block;
		margin: 0 auto;
	}
}

/* page redirect plugin */
main div.noteredirect {
	clear: none;
	margin: 3rem 0 0 0;
	text-align: left;
	line-height: 1.3em;
	color: @ini_text_neu;
	padding-left: 2.5em;
	background: @ini_background_neu url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,14A2,2 0 0,1 14,16A2,2 0 0,1 12,18A2,2 0 0,1 10,16A2,2 0 0,1 12,14M23.46,8.86L21.87,15.75L15,14.16L18.8,11.78C17.39,9.5 14.87,8 12,8C8.05,8 4.77,10.86 4.12,14.63L2.15,14.28C2.96,9.58 7.06,6 12,6C15.58,6 18.73,7.89 20.5,10.72L23.46,8.86Z' style='opacity: 50%25'/%3E%3C/svg%3E") .5em center no-repeat;
	background-size: 1.25em;
	border: @ini_text_neu solid 1pt;
}

main #toc.toggle_show ~ div.noteredirect {
	max-width: 50%;
}

/* prosemirror overrides */
body.mode_edit, body.mode_preview {
	.plugin_prosemirror_useWYSIWYG {
		& {
			color: @ini_link;
			background-color: transparent;
			border: transparent 0 none;
			padding: 0; margin: 0 0 .25em 0;
			float: right;
		}
		&:hover {
			text-decoration: underline;
		}
	}
}
#prosemirror__editor {
	& {
		clear: both;
	}
	.menubar.prosemirror-menubar-fixed {
		margin-top: ~"calc(" @ini_toolbar_font_size ~" + .5rem)";
	}
	.menubar .menuitem {
		padding: 0;
	}
}