/**
 * This file provides styles for the edit view (?do=edit), preview
 * and section edit buttons.
 */

/* edit view
********************************************************************/

.mode_edit div.editBox {
}

.mode_edit div.editBox button {
	border:				#666 solid 1px;
	border-radius:		1px;
	padding:			3pt 6pt;
	margin:				0 2px;
	cursor:				pointer;
}

.mode_edit div.editButtons button:hover {
	text-decoration:	underline;
}
.mode_edit div.editBox button:focus {
	outline:			@ini_focus_color solid 2px;
	background-color:	@ini_background;
}

/* #edbtn__save {
	color:				#000;
	font-weight:		bold;
	background:			#CCC url('images/material/cloud-upload-outline.svg') no-repeat 6pt center;
	background-size:	1.5em;
	filter:				invert(.8);
	padding-left:		2.65em;
} */

/*____________ toolbar ____________*/

.mode_edit div.toolbar {
    display: inline-block;
}
#draft__status {
    font-size: small;
    color: @ini_text_alt;
    background-color: inherit;
}
[dir=rtl] #draft__status {
    /* float: left; */
}
#tool__bar {
    float: left;
}
[dir=rtl] #tool__bar {
    float: right;
}

/* hide the hard-coded button images */
#tool__bar button>img {
	visibility: hidden;
}

#tool__bar button {
	background:	#E9E9ED none center no-repeat;
	background-size: 20px;
	border:	@ini_border solid 1px;
}
#tool__bar button[aria-haspopup=true]:after,
#tool__bar button:nth-child(10):after,
#tool__bar button:nth-child(15):after {
	content: '';
	display: inline-block;
	position: absolute;
	width: 8px;
	height: 8px;
	margin-left: -2px;
	margin-top: 14px;
	background:	transparent none center no-repeat;
	background-size: 13px;
}

#tool__bar button[aria-haspopup=true]:after {
	background-image: url('images/editor/overlay-menu.svg');
}
#tool__bar button:nth-child(10):after,
#tool__bar button:nth-child(15):after {
	background-image: url('images/editor/overlay-popup.svg');
}

/* import the new icons */
#tool__bar button[accesskey="b"] { background-image: url('images/editor/format-bold.svg'); }
#tool__bar button[accesskey="i"] { background-image: url('images/editor/format-italic.svg'); }
#tool__bar button[accesskey="u"] { background-image: url('images/editor/format-underline.svg'); }
#tool__bar button[accesskey="m"] { background-image: url('images/editor/format-monospace.svg'); }
#tool__bar button[accesskey="d"] { background-image: url('images/editor/format-strikethrough.svg'); }
#tool__bar button[accesskey="8"] { background-image: url('images/editor/format-header-equal.svg'); margin-left: 4pt; }
#tool__bar button[accesskey="9"] { background-image: url('images/editor/format-header-decrease.svg'); }
#tool__bar button[accesskey="0"] { background-image: url('images/editor/format-header-increase.svg'); }
#tool__bar button:nth-child(9) { background-image: url('images/editor/format-header-menu.svg'); }
#tool__bar button[accesskey="l"] { background-image: url('images/editor/insert-link.svg');margin-left:4pt; }
#tool__bar button:nth-child(11) { background-image: url('images/editor/insert-external-link.svg'); }
#tool__bar button[accesskey="-"] { background-image: url('images/editor/format-list-numbered.svg');  margin-left:4pt;}
#tool__bar button[accesskey="."] { background-image: url('images/editor/format-list-bulleted.svg'); }
#tool__bar button:nth-child(14) { background-image: url('images/editor/insert-hr.svg');margin-left:4pt;}
#tool__bar button:nth-child(15) { background-image: url('images/editor/insert-media.svg');margin-left:4pt; }
#tool__bar button:nth-child(16) { background-image: url('images/editor/insert-emoticon.svg');margin-left:4pt; }
#tool__bar button:nth-child(17) { background-image: url('images/editor/insert-symbol.svg'); }
#tool__bar button[accesskey="y"] { background-image: url('images/editor/insert-signature.svg');margin-left:4pt; }

/* buttons inside of toolbar */
.mode_edit div.toolbar button.toolbutton {
	margin:		0;
}
/* picker popups (outside of .dokuwiki) */
div.picker {
    width: 300px;
    border: 1px solid #CCC;
    background-color: #EEE;
    color: inherit;
}
/* picker for headlines */
div.picker.pk_hl {
    width: auto;
}

/* buttons inside of picker */
div.picker button.pickerbutton,
div.picker button.toolbutton {
    padding: .1em .35em;
    border-width: 0;
}

/*____________ edit textarea ____________*/

.dokuwiki textarea.edit {
    width: 100%;
	padding: 1px 0 0 2px;
    margin-bottom: .5em;
	background-color: #EEE;
	font-family: 'Source Code Pro',Menlo,Consolas,'Courier New',Courier,monospace;
	font-size: 12pt;
	line-height: 17pt;
	caret-color: @ini_focus_color;
}
.dokuwiki textarea.edit:focus {
	outline: transparent none 0;
}

/*____________ below the textarea ____________*/

.dokuwiki div.editBar {
    overflow: hidden;
    margin-bottom: .5em;
}

/* size and wrap controls */
#size__ctl {
    float: right;
}
[dir=rtl] #size__ctl {
    float: left;
}
#size__ctl img {
    cursor: pointer;
}

/* edit buttons */
.dokuwiki .editBar .editButtons {
    display: inline;
    margin-right: 1em;
}
[dir=rtl] .dokuwiki .editBar .editButtons {
    margin-right: 0;
    margin-left: 1em;
}
.dokuwiki .editBar .editButtons button {
}

/* summary input and minor changes checkbox */
.dokuwiki .editBar .summary {
    display: inline;
}
.dokuwiki .editBar .summary label {
    vertical-align: middle;
    white-space: nowrap;
}
.dokuwiki .editBar .summary label span {
    vertical-align: middle;
}
.dokuwiki .editBar .summary input {
}
/* change background colour if summary is missing */
.dokuwiki .editBar .summary input.missing {
    color: @ini_text;
    background-color: #ffcccc;
}

/* preview
********************************************************************/

.dokuwiki div.preview {
    border: dotted #CCC;
    border-width: .2em 0;
    padding: 1.4em 0;
    margin-bottom: 1.4em;
}

/* section edit buttons
********************************************************************/

/* .dokuwiki .secedit {
    float: right;
    margin-top: -1.4em;
} */
[dir=rtl] .dokuwiki .secedit {
    float: left;
}
/*.dokuwiki .secedit button {
    font-size: 75%;
}*/

/* style for section highlighting
.dokuwiki div.section_highlight {
    margin: 0 -1em;
    padding: 0 .5em;
    border: solid @ini_background_alt;
    border-width: 0 .5em;
} */

/* dark mode overrides */
@media (prefers-color-scheme: dark) {

	body.mode_edit.darkmode  textarea.edit {
		background-color:	@ini_background_alt_dark;
		border:				@ini_headlines_dark solid 1px;
		color:				@ini_text_dark;
	}

	body.mode_edit.darkmode div.editBox button {
		background-color:	@ini_headlines_dark;
		border-color:		@ini_border_dark;
	}
	body.mode_edit.darkmode div.editBox button#edbtn__save {
		filter:				invert(.9);
	}
	body.mode_edit.darkmode #tool__bar button {
		border-color:	@ini_border_dark;
		filter: invert(.8);
	}
}