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


@media (prefers-color-scheme: dark) {

    /* general colour settings: */
    body.darkmode {

		/* general elements */
		ul.tabs {
			& {
				border-bottom-color: @ini_form_btn_outline_dark;
			}
			li > a {
				color: @ini_form_btn_text_dark !important;
			}
			li.active > a, li > strong {
				border-color: @ini_form_btn_outline_dark !important;
				border-top-color: @ini_theme_color_dark !important;
				border-bottom-color: @ini_background_dark !important;
			}
		}
		input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
			background-color: @ini_form_field_bg_dark;
			color: @ini_form_field_text_dark;
			border-color: @ini_form_btn_outline_dark;
		}
		button {
			border-color: @ini_form_btn_outline_dark;
			background-color: @ini_form_btn_bg_dark;
			color: @ini_form_btn_text_dark;
		}
		button[type="submit"] {
			border-color: @ini_form_btn_outline_dark;
			background-color: @ini_form_submit_btn_bg_dark;
			color: @ini_form_submit_btn_text_dark;
		}

		/* background color: */
		& {
			color: @ini_text_dark;
			background-color: @ini_background_dark;
			scrollbar-color: @ini_bg_alt_dark @ini_background_dark;
		}
		#skip-link a {
			background-color: @ini_background_dark;
			color: @ini_link_dark;
		}
		ul.tabs li > strong {
			background-color: @ini_background_dark;
			border-bottom-color: @ini_background_dark;
		}
		#config__manager table td.value div.selection {
			background-color: @ini_background_dark;
		}

		/* toolbar */
		#toolbar-layout {
			& {
				background-color: @ini_toolbar_background_dark;
				border-bottom-color: @ini_toolbar_border_dark;
			}
			button, a:link, a:visited {
				color: @ini_toolbar_text_dark;
			}
			button:hover, a:hover {
				color: @ini_toolbar_text_dark;
				background-color: @ini_toolbar_hl_bg_dark;
			}
			button:focus, a:focus {
				outline-color: @ini_toolbar_focus_dark;
			}
			svg {
				fill: @ini_toolbar_text_dark;
			}
			#tb-menu-group::before {
				background: linear-gradient(90deg, transparent 0, @ini_toolbar_background_dark 80%);
			}
			#site-toolbar {
				#user-action-menu, #pagetools-popup {
					& {
						background-color: @ini_toolbar_background_dark;
						color: @ini_toolbar_text_dark;
						border-color: @ini_toolbar_border_dark;
					}
					&:before {
						border-bottom-color: @ini_toolbar_border_dark;
					}
					&:after {
						border-bottom-color: @ini_toolbar_background_dark;
					}
					li {
						border-bottom-color: @ini_toolbar_border_dark;
					}
				}
			}
		}
		
		& > #header-layout {
			#searchbar-layout {
				background-color: @ini_searchbar_bg_dark;
				color: @ini_searchbar_text_dark;
			}
			#searchbar-layout #searchbar #search-group #dw__search div.no {
				& {
					border: @ini_form_field_outline;
					background-color: @ini_form_field_bg_dark;
				}
				input {
					color: @ini_form_field_text_dark;
					background-color: @ini_form_field_bg_dark;
				}
				button {
					color: @ini_form_btn_text_dark;
					background-color: @ini_form_btn_bg_dark;
				}
				button:hover {
					filter: ~"brightness(120%)";
				}
			}
			#menu-layout {
				background-color: @ini_header_bg_dark;
				color: @ini_header_text_dark;
			}
		}
	}
}