DudenAwesome [WIP] by riedler

/* ==UserStyle==
@name DudenAwesome
@namespace https://RiedleroD/userstyles-riedler/
@version 0.1.0
@description Dark & w i d e style for duden.de
@author	Riedler
@preprocessor stylus
@var	select		thm		"Theme"	{"black":"black","dark":"dark","light":"light"}
@var	checkbox	wide	"Wide"			1
@var	checkbox	uwide	"Ultra wide"	0
@var	checkbox	adh		"Hide all ads"	0
@var	checkbox	ovf		"Overflow fix"	1
==/UserStyle== */

if thm==black
		bgc_main=#000
		bgc_secondary=#151515
		bgc_ter=#222
		txc_main=#DDD
		txc_secondary=#969b9f
		txc_teritary=#999
		txc_header=#EEE
		bgc_inputs=#222
		bgc_theme=#ca0
		bgc_theme_sd=#b90
		bgc_theme_l=#cfb050
		bgc_theme_op=#A80
		bgc_theme_opop=#333
		bgc_theme_sec=#a83
		bgc_theme_ter=#652
		bgc_theme_qad=#652
		ft1=invert(0.6) hue-rotate(190deg) brightness(1.4) saturate(10)
	if thm==dark
		bgc_main=#333
		bgc_secondary=#151515
		bgc_ter=#555
		txc_main=#EEE
		txc_secondary=#969b9f
		txc_teritary=#999
		bgc_inputs=#444
		txc_header=#FFF
		bgc_theme=#da1
		bgc_theme_sd=#db2
		bgc_theme_l=#dc6
		bgc_theme_op=#A80
		bgc_theme_opop=#666
		bgc_theme_sec=#A83
		bgc_theme_ter=#873
		bgc_theme_qad=#873
		ft1=invert(0.6) hue-rotate(190deg) brightness(1.4) saturate(10)
	if thm==light
		bgc_main=#FFF
		bgc_secondary=#eFF3F5
		bgc_ter=#dadee0
		txc_main=#333
		txc_secondary=#969b9f
		txc_teritary=#999
		txc_header=#000
		brd_ter=#e5e5e5
		bgc_inputs=#FFF
		bgc_theme=#ffd008
		bgc_theme_sd=#fbb914
		bgc_theme_l=#ffda4d
		bgc_theme_op=#EFF3F5
		bgc_theme_opop=#e2e2e2
		bgc_theme_sec=#ffedaa
		bgc_theme_ter=#fff6d0
		bgc_theme_qad=#fffae9
		ft1=none
replace_img(w,h,source){
	box-sizing: border-box;
	width:w;
	height:h;
	padding-left:w;
	background:url(source) no-repeat;
}
@-moz-document domain("duden.de"){
	if ovf{
		body{
			overflow-x:hidden;}
	}
	button{
		color:txc_main;}
	tr{
		background-color:rgba(bgc_main,0.2);}
	.tabloid{
		background-color:bgc_main;
		color:txc_main;}
	.tabloid__sheet::before{
		background-color:bgc_theme;}
	.trickle{
		color:#000;
		.trickle--open,
		&:focus-within,
		&:not(.trickle--closed):hover{
			background-color:bgc_theme_op;}
	}
	.trickle__children{
		background-color:bgc_theme_op;
		color:#000;}
	.trickle__child-link{
		&:focus,&:hover{
			background-color:bgc_theme_opop;
			color:txc_main;
			.trickle__child-icon{
				filter:ft1;
			}
		}
	}
	.trickle--highlighted{
		background-color:bgc_theme_l;}
	.form-asap--simple_no{
		background-color:bgc_secondary;
		& .form-asap__slot{
			background-color:bgc_inputs;
			&>input{
				color:txc_main;}
			}
	}
	.form-asap__tab--active,
	:checked+.form-asap__tab{
		color:txc_header;}
	.form-asap__divider{
		color:txc_secondary;}
	.form-asap__button{
		background-color:bgc_theme;
		&:focus,
		&:hover{
			background-color:bgc_theme_op;
		}
	}
	.form-asap__suggestion{
		background-color:bgc_theme_sec;
		border-color:bgc_theme_sec;
		color:txc_main;
		&:focus,
		&:hover{
			background-color:bgc_theme;}
	}
	.form-asap__guesses{
		background-color:bgc_inputs;
		border-color:bgc_secondary;}
	.form-asap__guess-title{
		background-color:bgc_theme_sec;}
	.form-asap__guess-group{
		border-bottom-color:bgc_secondary;}
	.shelf__main{
		background-color:bgc_theme;
		.shelf__style_pale>&{
			background-color:bgc_theme_sec;}
		.shelf__style_paler>&{
			background-color:bgc_theme_ter;}
	}
	.vignette__label{
		background-color:bgc_theme_sec;}
	.knob{
		background-color:txc_main;
		color:bgc_main;}
	.shifter__next,
	.shifter__prev{
		background-color:bgc_ter;
		&:hover{
			background-color:txc_secondary;}
	}
	.shifter__dot{
		color:bgc_ter;}
	.shifter__dot.shifter__dot--current{
		color:txc_secondary;}
	.chirp{
		background-color:bgc_secondary;}
	.chirp__name{
		color:txc_main;}
	#block-dudentwitterblock>.essay>.essay__bottom>div>div:not([data-twitter]){
		background:linear-gradient(#0000,bgc_main) !important;
	}
	.essay__title>a:hover{
		background-image:linear-gradient(to top,bgc_theme 10%,transparent 10%)}
	.more__arrow{
		background-color:bgc_theme;
		box-shadow:1px 1px 0 1px bgc_theme_sd;}
	.more--white .more__arrow{
		background-color:bgc_main;}
	.scene--style_corp{
		background-color:bgc_theme;}
	.stage{
		background-color:bgc_theme;}
	.stage__main{
		background-color:bgc_secondary;}
	.cc{
		background-color:bgc_theme_l;}
	.cc__pause,
	.cc__play{
		background-color:bgc_main;}
	.tabloid__masthead{
		background-color:bgc_theme;}
	.tabloid__footer-top{
		background-color:bgc_secondary;}
	.tabloid__footer-bottom{
		background-color:bgc_theme;}
	.rubric{
		color:txc_main;}
	.pager__item{
		background-color:bgc_secondary;
		border-bottom-color:bgc_theme;}
	.pager__item--current{
		border-bottom-color:txc_main;}
	.pager__item--skipping{
		border-bottom-color:#0000;
		background-color:#0000;}
	.wrap-table__flexion{
		border-top-color:bgc_main;}
	.wrap-table__flexions-void,
	.wrap-table__flexions-head,
	.wrap-table__flexion-head{
		background-color:bgc_theme_sec;}
	.wrap-table__flexion{
		background-color:bgc_theme_ter;}
	.wrap-table tr:nth-child(2n){
		background-color:rgba(bgc_main,0.75);}
	.mere-table{
		background-color:bgc_theme_ter;
		& tr:nth-child(2n){
			background-color:rgba(bgc_main,0.75);}
	}
	.mere-table__head{
		border-right-color:bgc_main;}
	.chapters__list{
		border-bottom-color:bgc_secondary;
		background-color:bgc_main;}
	.chapters__chapter{
		border-top-color:bgc_secondary;}
	.chapters__link{
		&:hover{
			background-color:bgc_theme_ter;}
		&.chapters__link--active{
			background-color:bgc_theme_sec;}
	}
	.gizmo__gadget-icon{
		background-color:bgc_secondary;
		border-color:bgc_main;}
	.gizmo__gadget--prominent .gizmo__gadget-icon{
		background-color:bgc_theme;}
	.tag-cluster{
		background-color:bgc_theme_ter;}
	.tag-cluster__filter-label::before{
		background-color:bgc_theme;}
	.enumeration{
		background-color:bgc_main;
		box-shadow:-20px 0 0 bgc_main,20px 0 0 bgc_main;}
	.note{
		background-color:bgc_theme_ter;
		outline-color:bgc_main;}
	.division::before{
		background-color:txc_main;}
	.scaffold__head{
		background-color:bgc_theme;}
	if wide{
		.tabloid__side-column,
		.tabloid__note{
			display:none;
		}
		.tabloid__sheet--has-sidebar{
			grid-template-columns:60px auto minmax(70px,max-content) repeat(6,auto);}
		.tabloid__main-column-top,
		.tabloid__main-column{
			grid-column:2/12;}
	}
	if uwide{
		.tabloid__main-column-top,
		.tabloid__main-column{
			grid-column:1/13;}
	}
	if adh{
		.tabloid__main-column>div:not(.hidden):not(.views-element-container),
		.views-element-container>div>.segment>aside,
		.tabloid__wide-top{
			display:none;}
		aside+.vignette,
		script+.vignette{
			border-top:none;
			margin-top:-30px;}
		.tabloid__main-column.tabloid__main-column--has-note>article>div>aside{
			display:none;}
		.columns:nth-child(6)>.columns__row--width_2{
			&>.columns__col--no_1{
				display:none;}
			&>.columns__col--no_2{
				grid-column:4/9;}
		}
	}
	img[src="https://cdn.duden.de/public_files/2020-09/firefox_logo.png?null"]{
		replace_img(260px,48px,"https://www.mozilla.org/media/protocol/img/logos/firefox/browser/logo-word-hor-xs.c87882e8c93c.png");}
}
@-moz-document domain("mentor.duden.de"){
	.desk,
	.desk__background{
		background-image:linear-gradient(90deg,bgc_main 50%,bgc_theme_qad 0);}
	.pad{
		background-color:bgc_main;}
	.rim{
		background-color:bgc_main;
		color:txc_teritary;}
	body{
		color:txc_main;}
}