Darklearning by riedler

Mirrored from https://github.com/RiedleroD/userstyles-riedler/raw/master/Darklearning.user.css

Darklearning screenshot
Homepage Install Get Stylus Write a review

Details

Authorriedler

LicenseCC BY-SA 4.0

Created atApril 9, 2021 08:54

Updated atMay 25, 2022 21:03

Applies toelearning, moodle

Statistics

Learn how we calculate statistics in the FAQ.

Total views383

Total installs55

Weekly installs2

Description

Dark style for moodle, but specifically for the configuration my school uses. Other ones aren’t officially supported, but might work too if the domain names are modified idk.

Notes

Version: 1.2.14
Changelog (since 1.2.13):


- fixed some dropdowns clipping outside containers & vanishing
- removed old and forgotten lines that interfered with the style
- the cursor now reacts to labels for quiz answers accordingly
- fixed icon color in page footer
- restyled traffic lights in quizzes
- optimized some inline SVGs
- improved legibility of light red text on dark red background

History

Daily snapshots of style statistics.

2021-07-072021-07-312021-08-232021-09-152021-10-082021-10-312021-11-232021-12-162022-01-082022-01-312022-02-232022-03-18Date0.000.631.251.882.503.133.754.385.00Daily countDaily installsDaily updatesDaily views
2021-07-072021-07-312021-08-232021-09-152021-10-082021-10-312021-11-232021-12-162022-01-082022-01-312022-02-232022-03-18Date0.0037.0073.00109.00145.00182.00218.00254.00290.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name			Darklearning
@namespace		https://github.com/RiedleroD/userstyles-riedler
@version		1.2.14
@description	Darker version of Elearning
@author			Riedler
@license		MPL-2.0
@homepageURL	https://github.com/RiedleroD/userstyles-riedler
@updateURL		https://github.com/RiedleroD/userstyles-riedler/raw/master/Darklearning.user.css
@preprocessor	stylus
@var	select	sidebar	"Navigation Sidebar"{
	"Grow on hover":"Goh",
	"Slide on hover":"Soh",
	"Static":"S"}
@var	select CPB		"Card Progressbar"{
	"Default":"D",
	"Compact":"C",
	"Borderless":"BL",
	"Compact Borderless":"CBL",
	"Round":"R",
	"Round Borderless":"RBL",
	"Round Compact":"RC",
	"Round Compact Borderless":"RCBL"
}
@var	select	LSI		"Link Selection Indicator"{
	"Clamps":"C",
	"Braces":"B",
	"Underbelly":"U",
	"Flat":"F",
	"Round":"R",
	"Encased":"E"
}
@var	select	PBCS	"ProgressBarCell Shape"{
	"Pronounced":"pron",
	"Teardrop":"tear",
	"Round":"rnd",
	"Rounded":"rndd",
	"Soft Edges":"sft",
	"Rectangle":"rect",
	"Modifier debug":"debug_mod"
}
@var	select	PBCSm "ProgressBarCell Modifier"{
	"Normal":"normal",
	"Horizontal flip":"hflip",
	"Vertical flip":"vflip",
	"Flip right side":"rflip",
	"Flip left side":"lflip",
	"Flip top side":"tflip",
	"Flip bottom side":"bflip",
	"Rotate 90°":"r90",
	"Rotate 180°":"r180",
	"Rotate 270°":"r270"
}
@var	select	NBCS	"Course Navbar Cell Shape"{
	"Pronounced":"pron",
	"Teardrop":"tear",
	"Round":"rnd",
	"Rounded":"rndd",
	"Soft Edges":"sft",
	"Rectangle":"rect",
	"Modifier debug":"debug_mod"
}
@var	select	NBCSm "Course Navbar Cell Modifier"{
	"Normal":"normal",
	"Horizontal flip":"hflip",
	"Vertical flip":"vflip",
	"Flip right side":"rflip",
	"Flip left side":"lflip",
	"Flip top side":"tflip",
	"Flip bottom side":"bflip",
	"Rotate 90°":"r90",
	"Rotate 180°":"r180",
	"Rotate 270°":"r270"
}
@var	select	NBS		"Course Navbar Shape"{
	"Pronounced":"pron",
	"Teardrop":"tear",
	"Round":"rnd",
	"Rounded":"rndd",
	"Soft Edges":"sft",
	"Rectangle":"rect",
	"Modifier debug":"debug_mod"
}
@var	select	NBSm "Course Navbar Modifier"{
	"Normal":"normal",
	"Horizontal flip":"hflip",
	"Vertical flip":"vflip",
	"Flip right side":"rflip",
	"Flip left side":"lflip",
	"Flip top side":"tflip",
	"Flip bottom side":"bflip",
	"Rotate 90°":"r90",
	"Rotate 180°":"r180",
	"Rotate 270°":"r270"
}
@var	checkbox	anon	"Anonymity (for screenshots)" 0
@var	select	EICC	"Embedded Image Color Correction"{
	"Recommended":"invert(0.86) hue-rotate(180deg)",
	"Full":"invert(1) hue-rotate(180deg)",
	"Dim":"brightness(0.8)",
	"Debug":"invert(1) hue-rotate(180deg) saturate(100)",
	"Off":"none"}
@var	text	ntip	"Navigation Tree initial padding"	"0"
@var	text	ntmp	"Navigation Tree max padding"		"0.5rem"
==/UserStyle== */

//color variables
bg0  = #000
bg1	 = #151515
bg2	 = #222
bg2_5= #252525
bg3	 = #333
bg3_5= #383838
bg4	 = #444
bg5	 = #555
bg6	 = #666
slc	 = #000
brd	 = #888
hbrd = #AAA
dtxt = #151515
txt	 = #AAA
htxt = #CCC
hhtxt= #FFF
mtxt = #8AA
lnk	 = #418BA4
hlnk = #6AC
btn	 = #418BA4
hbtn = #6AC
tru	 = #262
htru = #6C6
fals = #822
hfals= #F55
idk  = #A50
hidk = #FA0
cal0 = #533
cal1 = #535
cal2 = #553
cal3 = #555
cal4 = #353
pb	 = #669
c0	 = #66A
c1	 = #3C3
c2	 = #CC3
c3	 = #C33
c4   = #C73

irad = 0.3rem //input border radius
crad = 0.5rem //card border radius


svg_select_arrs="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1'%3E%3Cpath fill='"+rgba(txt,0.999)+"' stroke='"+rgba(txt,0.999)+"' d='M8 1 2 6h12zM2 10H14L8 15z'/%3E%3C/svg%3E"

barshape_base(name){
	if name=="pron"{
		return (0.5em) (0.5em) (1em) (1em)
	}else if name=="tear"{
		return (0) (0.5em) (0.5em) (0.5em)
	}else if name=="rnd"{
		return (1em) (1em) (1em) (1em)
	}else if name=="rndd"{
		return (0.5em) (0.5em) (0.5em) (0.5em)
	}else if name=="sft"{
		return (0.25em) (0.25em) (0.25em) (0.25em)
	}else if name=="rect"{
		return (0) (0) (0) (0)
	}else if name=="debug_mod"{
		return (0) (0.5em) (1em) (0.25em)
	}else{
		return (100%) (100%) (100%) (100%)
	}
}
barshape(name,mod){
	shape=barshape_base(name)
	if mod=="normal"{
		return (shape[0]) (shape[1]) (shape[2]) (shape[3])
	}else if mod=="hflip"{
		return (shape[3]) (shape[2]) (shape[1]) (shape[0])
	}else if mod=="vflip"{
		return (shape[1]) (shape[0]) (shape[3]) (shape[2])
	}else if mod=="rflip"{
		return (shape[0]) (shape[2]) (shape[1]) (shape[3])
	}else if mod=="lflip"{
		return (shape[3]) (shape[1]) (shape[2]) (shape[0])
	}else if mod=="tflip"{
		return (shape[1]) (shape[0]) (shape[2]) (shape[3])
	}else if mod=="bflip"{
		return (shape[0]) (shape[1]) (shape[3]) (shape[2])
	}else if mod=="r90"{
		return (shape[3]) (shape[0]) (shape[1]) (shape[2])
	}else if mod=="r180"{
		return (shape[2]) (shape[3]) (shape[0]) (shape[1])
	}else if mod=="r270"{
		return (shape[1]) (shape[2]) (shape[3]) (shape[0])
	}else{
		return (100%) (0) (100%) (0)
	}
}
lbarshape(name,mod){
	shape=barshape(name,mod)
	return (shape[0]) (0) (0) (shape[3])
}
rbarshape(name,mod){
	shape=barshape(name,mod)
	return (0) (shape[1]) (shape[2]) (0)
}

urlenc(x){
	x=''+x//in case it's not a string, it is now.
	x=replace('%','%25',x)
	x=replace(' ','%20',x)
	x=replace('"','%22',x)
	x=replace('#','%23',x)
	x=replace('\$','%24',x)
	x=replace('&','%26',x)
	x=replace('\/','%2F',x)
	x=replace('<','%3C',x)
	x=replace('>','%3E',x)
	x=replace('=','%3F',x)
	return x
}
@-moz-document domain("elearning.tgm.ac.at"), regexp(".*userstyle_testing/darklearning.*"){
	/*text selections*/
	::-moz-selection{/*for firefox and derivatives*/
		background:slc;
		color:htxt;
	}
	::selection{/*for most other browsers that support this*/
		background:slc;
		color:htxt;
	}
	/*scrollbars*/
	::-webkit-scrollbar{//scrollbars in chrome and safari
		&,
		&-track-piece{
			background-color:bg1 !important;
		}
		&-corner,
		&-thumb{
			background-color:bg3 !important;
			border-radius:0.4em;
		}
	}
	:root{//actual standardized way, but ofc only Firefox implements it
		scrollbar-width:thin;
		scrollbar-color:bg3 bg1;}
	.visual-scroll-x,//so far only found in the quiz, but there's no telling if it's used in other places as well, so-
	.visual-scroll-y,{
		scrollbar-color:bg3 bg1 !important;
		&::-webkit-scrollbar-thumb{
			border:solid 1px bg0;
		}
		&::-webkit-scrollbar-track{
			border:none;
		}
	}
	/*animations*/
	@keyframes bg-pulse-grey{
		0%{background-color:brd}
		50%{background-color:hbrd}
		80%{background-color:hhbrd}
		100%{background-color:brd}
	}
	/*navbar*/
	.navbar{
		background-color:bg2;
		border-bottom-right-radius:0.5em;
		border-bottom-left-radius:0.5em;
		border-bottom:solid 1px bg1;
		box-shadow:none;
	}
	.breadcrumb:not(:empty){
		border-color:brd;
		border-width:1px;}
	.navbar-light, 
	.navbar-bootswatch,{
		& .navbar-nav{
			& .nav-link{
				color:lnk;
				&:hover,
				&:focus{
					color:hlnk;
				}
			}
			& .active,
			& .show{
				&>.nav-link{color:hlnk}
			}
		}
	}
	/*dropdown-menu*/
	.dropdown{
		&-menu{
			background-color:bg3;
		}
		&-divider{
			border-top-color:brd;
		}
		&-item{
			&,
			&:focus{
				background-color:#0000;
				color:lnk;
			}
			&:hover{
				background-color:bg4;
				color:hlnk;
			}
		}
		&-header{
			color:txt;
		}
	}
	/*notification drawer*/
	.popover-region{
		&-container{
			background-color:bg3;
			border-color:brd;
			border-radius:irad;}
		&-toggle{
			&::after{
				border-bottom-color:bg3;
			}
			&::before{
				border-bottom-color:brd;
			}
		}
		&-header-container{
			border-bottom-color:brd;
		}
		&-footer-container{
			background-color:bg3;
			border-top-color:brd;
			border-radius:0 0 irad irad;
		}
	}
	.content-item-container{
		border-bottom-color:brd;
		color:txt;
		&:hover{
			background-color:bg4;
			color:htxt;}
		&.unread{
			background-color:bg4;}
		&.unread:hover{
			background-color:bg5;}
		& .content-item-footer .timestamp{
			color:txt;}
	}
	/*message drawer*/
	.message-app{
		background-color:bg2 !important;
		& .input-group{
			&>input,
			&-text{
				background-color:bg3 !important;
				border-color:brd;
				color:brd;
			}
			& .btn{
				border-color:brd;
			}
		}
		& .form-control:focus{
			color:txt;}
		& .card{
			background-color:bg2;}
		& .border-bottom{
			border-color:brd !important;}
		& .card.expanded .list-group .list-group-item{
			background-color:bg3;}
		&>.header-container>.bg-white{
			background-color:bg3 !important;}
		& .message{
			&.send{
				background-color:bg5 !important;
			}
			&.received{
				background-color:bg4 !important;
				& .tail{
					border-bottom-color:bg4;
				}
			}
			&.send .tail{
				border-bottom-color:bg5;
			}
		}
		& .list-group .list-group-item{
			background:bg3;}
		& .nav-pills{
			border:solid brd 1px;
			&>.nav-item>a{
				&:not(.active){
					background-color:bg3;}
				&.active{
					background-color:bg4;}
			}
		}
		& .no-gutters{
		outline:solid 1px bg3;}
		& .content-message-container>div[data-region="self-conversation-message-container"]{
			background-color:bg4 !important;}
		&>div>div>div{
			outline:solid 1px bg3;}
		& .col-8>.footer-container>.bg-white{
			background-color:bg3 !important;
			border:none !important;}
		& button.btn-icon.btn-link{
			&:hover,
			&:focus{
				background-color:bg5 !important;
			}
		}
		& textarea.form-control{
			background-color:bg4 !important;
			border:none;
		}
		& .header-container>.bg-white{
			background-color:bg3 !important;
			border-color:bg3 !important;
		}
		& .body-container{
			& div[data-region="settings"]{
				background-color:bg2;
			}
			&>div.h-100.bg-white{
				background-color:bg2 !important;
			}
		}
		&>.footer-container>.bg-white{
			background-color:bg2 !important;
			border-color:brd !important;
		}
		&>.closewidget{
			background-color:bg3 !important;
			&>a{
				color:txt !important;
			}
		}
		& [data-region="contacts-container"]{
			background-color:bg3;}
		& [data-region="non-contacts-container"]{
			background-color:bg3;
			border-top-color:brd !important;}
		& div[data-region="all-contacts-container"] .text-right{
			background-color:bg3;
			border-top: solid 1px brd;
			&:hover{
				background-color:bg5;
			}
		}
		& div[data-region="confirm-dialogue"]{
			background-color:bg3 !important;
			border:solid 1px brd;
			border-radius:crad;
			& .btn-primary{
				&>span{
					color:htxt !important;
				}
				&:hover>span{
					color:hhtxt !important;
				}
			}
		}
	}
	#conversation-actions-menu-button{
		color:brd;
		&:hover{
			background-color:bg5;
		}
		&:focus{
			background-color:bg6;
		}
	}
	.custom-control{
		&-label{
			cursor:pointer;
			&::before{
				background-color:brd;
			}
		}
		&-input{
			&:checked~^[0]-label::before{
				background-color:btn !important;
				border-color:btn !important;
				color:htxt;
				cursor:pointer;
			}
			&:not(:checked)~^[0]-label::before{
				background-color:bg3 !important;
				border-color:brd;
				cursor:pointer;
			}
		}
		.custom-switch &-input{
			&:checked~^[0]-label::after{
				background-color:htxt;
				cursor:pointer;
			}
			&:not(:checked)~^[0]-label::after{
				background-color:brd;
				cursor:pointer;
			}
		}
		.custom-radio &-input:checked~&-label::after{
			background-image:radial-gradient(ellipse at center,htxt 0%,htxt 75%,#0000 75%);
			border-radius:100%;
		}
	}
	.custom-select{
		color:txt;
		border-color:brd;
		border-radius:irad;
		background-color:bg3;
		background-image:url(svg_select_arrs);
		background-repeat:no-repeat;
		background-size:0.75em;
		cursor:pointer;
		&:disabled{
			color:txt;
			background-color:bg3;
			background-image:none;
			&:hover{
				color:txt;
				background-color:bg3;
			}
		}
		&:hover,
		&:focus{
			background-color:bg3;
			color:txt;
		}
		&:focus{
			border-color:btn;
			box-shadow:0 0 0 .2rem rgba(btn,.25);
		}
	}
	//see -> https://elearning.tgm.ac.at/user/index.php?id=5503
	.form-autocomplete-suggestions{
		background-color:bg1;
		border-color:brd;
		& li{
			color:txt;
			&:hover,&:focus,
			&[aria-selected="true"]{
				background-color:btn;
				color:htxt;
			}
			&[aria-selected="true"]{
				box-shadow:0 0 0 0.2rem rgba(btn,0.33);
			}
		}
	}
	.form-autocomplete-downarrow{
		color:txt;
		.form-control:hover+&{
			color:htxt;
		}
	}
	.switch input{
		&+label::before{
			background-color:brd;
		}
		&:checked + label::before{
			background-color:btn;
		}
	}
	/*body*/
	:root,body,#page{
		background-color:bg1 !important;}
	#region-main{
		border-radius:crad;
		overflow:visible;
		margin-bottom:1.5em;
		background-color:bg2;}
	#page-header>div>div.card{
		background-color:bg2;}
	/*footer*/
	#page-footer{
		color:txt !important;
		background-color:bg2 !important;
		border-top-left-radius:0.5em;
		border-top-right-radius:0.5em;
		& a{
			color:lnk;
			&:hover,
			&:focus{
				color:hlnk;
			}
			& .icon{
				color:txt;
			}
		}
	}
	/*sideblocks*/
	.block{
		&.card{
			background-color:bg2;
			if sidebar=="Goh"{
				&[role="navigation"]{
					overflow:visible;
				}
			}
		}
		&-timeline{
			& .list-group-item{
				background-color:#0000;
				&-action{
					color:txt;
					&:hover,
					&:focus,
					&:active{
						color:htxt;
						background-color:#0000;
					}
				}
			}
			& .event-name{
				color:lnk;
				font-weight:500;
				&:hover{
					color:hlnk;
				}
			}
			&>.border-bottom,
			& [data-region="event-list-content"]>[data-region="paged-content-container"]>[data-region="page-container"]>[data-region="paged-content-page"]>.border-bottom{
				border-bottom:none !important;
			}
			& [data-region="event-list-container"]>div>img{
				filter:invert(1) brightness(1.3);
			}
		}
		&_navigation,
		&_settings{
			& .block_tree{
				& .tree_item.branch,
				& ul,
				& p.hasicon{
					padding-left:0;
					margin-left:0;
				}
			}
		}
		&_navigation{
			& .block_tree{
				& .tree_item{
					max-width:100%;
					width:max-content;
					position:relative;
					background-color:bg2;
					z-index:2;
					border-radius:0 irad irad 0;
					transition:0.2s max-width;
				}	
				& .contains_branch>ul{
					transition: padding-left 0.2s;
					if sidebar=="S"{
						padding-left:ntmp;
					}else{
						padding-left:ntip;
					}
				}
			}
			&:hover .block_tree{
				if sidebar=="Goh"{
					& .tree_item{
						white-space:nowrap;
						max-width:100vw;
						padding-right:0.25em;
						& .item-content-wrap{
							max-width:25vw;
							text-overflow: ellipsis;
						}
					}
				}
				if sidebar!="S"{
					& .contains_branch>ul{
						padding-left:ntmp;
					}
				}
			}
		}
		& .block-cards{
			& a.coursename{
				color:lnk;
				&:hover,
				&:focus{
					color:hlnk;
				}
			}
			& span.categoryname{
				color:txt;
			}
			& .btn-link{
				color:txt;
				
			}
			& .btn.btn-link.btn-icon{
				&:hover,
				&:focus{
					background-color:bg4;
				}
			}
		}
		& .block-controls{
			& .dropdown-toggle{
				color:txt;
			}
		}
	}
	/*text*/
	span,p,pre,
	.text-center,.text-right,
	.logininfo,.generaltable,
	h1,h2,h3,h4,h5,h6,
	body,:root,
	ul,ol{
		color:txt;}
	textarea.form-control{
		background-color:bg5 !important;
		border:solid brd 1px;
		border-radius:irad;}
	.text-muted{
		color:mtxt;
	}
	/*links*/
	a,
	a>span{
		color:lnk
	}
	a:hover,
	a:focus{
		&,
		&>span{
			color:hlnk;
		}
	}
	/*Text with inline background coloring*/
	span[style*="background-color: rgb(125\, 159\, 211);"]{
		background-color:btn !important;
		color:dtxt !important;}
	span[style*="background-color: rgb(255\, 207\, 53);"],
	span[style*="background-color: rgb(152\, 202\, 62);"]{
		color:#000 !important;}
	span[style*="background-color: white;"]:not([class]){
		background-color:#0000 !important;}
	span[style*="background-color: rgb(239\, 69\, 64);"]{
		background-color:fals !important;}
	span[style*="color: rgb(239\, 69\, 64)"]{
		color:hfals !important;
		&[style*="background-color: rgb(255\, 255\, 255)"]{
			background-color:bg0 !important;
		}
	}
	span>span[style*="background-color: rgb(255\, 255\, 255)"],
    a[style*="background-color: rgb(255\, 255\, 255)"]{
		background-color:bg2 !important;
	}
	/*VPL badge*/
	div[style="float:right; right:10px; padding:8px; background-color: white;text-align:center;"]{
		background-color:bg3 !important;
		border-radius:irad;
		box-shadow:0 0 0.2rem 1px #000;
		transition:background-color 0.1s;
		cursor:pointer;
		&:hover{
			background-color:bg4 !important;
			& a{
				color:hlnk !important;
			}
		}
		& a:hover{
			text-decoration:none;
		}
	}
	/*random shit again*/
	.logo>img{
		filter:invert(1) hue-rotate(180deg);}
	.empty-placeholder-image-lg{
		filter:invert(1);
	}
	.dndupload-arrow{
		filter:invert(0.9) hue-rotate(180deg);
	}
	/*seems like a footer in some dialog boxes?*/
	.yui3-skin-sam .yui3-panel .yui3-widget-ft{
		background-color:#0000;
	}
	/*Buttons*/
	.close,
	.moodle-dialogue-base .closebutton{
		&:hover,
		&:focus{
			color:txt;
			opacity:1;
		}
	}
	.btn{
		border-radius:irad;
		&-outline-secondary{
			border-color:brd;
			&:hover,
			&:focus{
				background-color:bg4;
				border-color:bg6;
				color:htxt;
			}
			&:not(:disabled):not(.disabled):active,
			&:not(:disabled):not(.disabled).active,
			.show > &.dropdown-toggle{
				background-color:brd;
				&,&>span{
					color:dtxt;
				}
			}
		}
		&-outline-success{
			border-color:tru;
			color:txt;
			&:hover{
				background-color:tru;
				border-color:tru;
				color:htru;
			}
			&:not(:disabled):not(.disabled):active{
				background-color:htru;
				border-color:htru;
				color:dtxt;
			}
		}
		&-secondary{
			background-color:#FFF2;
			color:txt;
			border:none;
			&:hover{
				background-color:#FFF4;
				color:htxt;
				border-color:brd;}
			&:focus,
			&.focus{
				box-shadow:inset 0 0.1em 0 0 hbrd;
				outline:solid 1px brd;
				outline-offset:1px;
				background-color:brd;
				color:dtxt;}
			&.disabled,
			&:disabled{
				background-color:bg5;
				color:txt;}
		}
		&-primary{
			color:dtxt !important;
			background-color:btn;
			border:none;
			&:hover,
			&:not(:disabled):not(.disabled):active,
			&:not(:disabled):not(.disabled).active,
 			.show>&.dropdown-toggle{
				color:dtxt;
				background-color:hbtn;
			}
			&.close:hover>span{//TODO: find out where this is used
				color:hhtxt !important;
			}
			&:focus,
			&.focus{
				outline:none;
				box-shadow:0 0 1em hbtn;
				background-color:hbtn;
				color:dtxt;
			}
			&:focus-visible{
				outline:solid 1px hbtn;
				box-shadow:inset 0 0 0 1px dtxt;
				&:focus{
					box-shadow:inset 0 0 0 1px dtxt,0 0 1em hbtn;
				}
			}
			&:disabled,
			&.disabled{
				background-color:btn;
			}
		}
		&-light{
			color:txt;
			&:hover{
				color:lnk;
			}
			&.focus,
			&:focus{
				color:hlnk;
			}
			&:not(:disabled):not(.disabled):active,
			&:not(:disabled):not(.disabled).active,
			.show > &.dropdown-toggle{
				color:hlnk;
			}
		}
		&:disabled,
		&.disabled{
			opacity:1;
			filter:grayscale(0.25) brightness(0.75) contrast(0.75);
		}
	}
	& .btn-link{
		color:lnk;
		transition:none;
		&:hover,
		&:focus{
			color:hlnk;
		}
	}
	.pagination>.page-item{
		& .page-link{
			color:lnk;
			background-color:bg4;
			border-color:#0000;
			&:hover{
				color:hlnk;
				background-color:bg5;
				border-color:brd;
			}
		}
		&.active{
			cursor:not-allowed;
			& .page-link{
				color:htxt;
				background-color:btn;
				border-color:btn;
			}
		}
	}
	.preference-state-status-container>span{
		&.on-text,
		&.off-text{
			color:bg1 !important;
		}
	}
	.hover-tooltip{
		background-color:bg3 !important;
		border: solid 1px brd !important;
		&::after{
			border-top-color:bg3 !important;
			filter:drop-shadow(0 1px 0 brd);
		}
	}
	#goto-top-link>a.btn{
		background-color:bg3;
		border:none;
		box-shadow:0 0 0.2rem 1px bg0;
		transform:translate(-50%,-100%);
		&:hover{
			background-color:bg4;
		}
		&:focus{
			outline:none;
			box-shadow:0 0 0.2rem 1px lnk;
		}
		&>.icon{
			margin-right:0;
		}
	}
	/*Dropdown menus*/
	.dropdown-item:active,.dropdown-item.active{
		background-color:bg4;}
	/*php-generated code block with colors without classes*/
	div[style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"]{
		background-color:bg0 !important;
		& span[style*="color: #000080"]{
			color:c0 !important;
		}
		& span[style*="color: #008800"]{
			color:c1 !important;
		}
		& span[style*="color: #0000FF"]{
			color:c2 !important;
		}
		& span[style*="color: #FF0000"]{
			color:c3 !important;
		}
	}
	div[style="background-color: #e6e6e6; font-size: 0.75em; padding: 4px;"]{
		background-color:bg3 !important;
	}
	/*tooltips: popups that pop up when you hover over stuff with set tooltips*/
	.tooltip>*{
		background-color:bg3 !important;
		color:txt !important;}
	/*popovers: the same, but with more complex content and a very annoying arrow*/
	.popover{
		background-color:bg1;
		color:txt;
		border:none;
		border-radius:irad;
		box-shadow:0 0 0.1em 0 brd}
	.bs-popover{
		//see https://elearning.tgm.ac.at/calendar/view.php?view=month
		&-top>.arrow,
		&-auto[x-placement^="top"]>.arrow{
			&::after{
				border-top-color:bg1;
			}
			&::before{
				border-top-color:rgba(brd,0.5);
			}
		}
		//see above link
		&-bottom,
		&-auto[x-placement^="bottom"]{
			& .popover-header::before{
				border-bottom:solid 0.1em bg2;
			}
			&>.arrow::after{
				border-bottom-color:bg2;
			}
			&>.arrow::before{
				border-bottom-color:rgba(brd,0.5);
			}
		}
		//see https://elearning.tgm.ac.at/course/view.php?id=5454&section=1
		&-left>.arrow,
		&-auto[x-placement^="left"]>.arrow{
			&::after{
				border-left-color:bg1;
			}
			&::before{
				border-left-color:rgba(brd,0.5);
			}
		}
		//TODO: find out where this is used
		&-right>.arrow,
		&-auto[x-placement^="right"]>.arrow{
			&::after{
				border-right-color:bg1;
			}
			&::before{
				border-right-color:rgba(brd,0.5);
			}
		}
	}
	.popover{
		&-header{//TODO restructure
			background-color:bg2;
			border-bottom-color:#0000;
			border-radius:0.5em 0.5em 0 0;
			color:htxt !important;}
		&-body{
			color:txt;
			border-radius:0.5em;}
	}
	/*Manually colored tables*/
	table[bgcolor="grey"]{
		background-color:bg4;
	}
	th[style*="background-color: rgb(146\, 208\, 80)"]{
		background-color:tru !important;
	}
	th[style*="background-color: #fef65b"]{
		background-color:idk !important;
	}
	/*Misc*/
	.otherstudent.highlight{
		outline:none;
		color:htxt;
	}
	.resourcelinkdetails{
		color:txt;
		filter:brightness(0.8);
	}
	.usertext{
		color:lnk !important;
	}
	#action-menu-toggle-0:hover .usertext{
		color:hlnk !important;//TODO: fix this mess by removing the catch-all text colorator
	}
	if(anon==1){
		.usertext{
			display:none;
		}
		.userbutton::before{
			content:"Anonymous User";
			margin-right:0.25rem;
			color:lnk;
		}
		#action-menu-toggle-0:hover .userbutton::before,
		#action-menu-toggle-0:focus .userbutton::before{
			color:hlnk;
		}
		#page-footer .logininfo>a:first-child{
			font-size:0;
			text-decoration:none;//produces visual glitches when left on
			&::after{
				font-size:0.9375rem;//that's the usual font size in elearning
				content:"Anonymous"
				text-decoration:underline;
			}
		}
	}
	.nav-tabs,
	.nav-pills{
		background-color:bg3;
		border-radius:barshape(NBS,NBSm);
		border-bottom:none;
		.show>& .nav-link.active.dropdown-toggle{
			background-color:bg4;
			border-radius:barshape(NBCS,NBCSm);
		}
		& .nav-link{
			background-color:#0000;
			border:none;
			padding:0.5em 1em;
			&.active{
				color:txt;
				max-height:100%;
			}
			&.active:not(:disabled):not(.disabled){
				&.active,
				&:active{
					background-color:bg4;
					border-radius:barshape(NBCS,NBCSm);
					border-bottom:none;
				}
			}
		}
		& .nav-item{
			margin-bottom:0;
			&.show .nav-link.active{
				color:txt;
				max-height:100%;
			}
		}
	}
	.mform fieldset{
		border-bottom-color:brd;
	}
	.matchtext{
		background-color:hbtn !important;
		color:bg3 !important;}
	.card{
		border-radius:crad;
		background-color:bg3;
		&-img{
			filter:EICC;}
		&-footer{
			background-color:bg3 !important;
		}
	}
	.alert{
		color:txt;
		&,//I hate moodle sometimes
		&-danger,
		&-info,
		&-success{
			border-radius:crad;
			& a:link,
			& a:visited{
				color:lnk;
				&:hover{color:hlnk}
			}
		}
		&-danger{
			border:solid 1px hfals;
			background-color:rgba(fals,0.5);
			color:hfals;
		}
		&-info{
			border:solid 1px pb;
			background-color:rgba(pb,0.5);
		}
		&-success{
			border:solid 1px htru;
			background-color:rgba(tru,0.5);
			color:htru;
		}
		&>.close{
			color:inherit;
		}
	}
	#page-mod-quiz-attempt #connection{
		&-error{
			background-color:fals;
			color:txt;
		}
		&-ok{
			background-color:tru;
			color:txt;
		}
	}
	.close,
	.moodle-dialogue-base .closebutton{
		text-shadow:none;
		opacity:1;
		color:txt;
		filter:none;
		transition:filter 0.2s;
		&:not(:disabled):not(.disabled):hover,
		&:not(:disabled):not(.disabled):focus{
			opacity:1;
			filter:drop-shadow(0 0 0.1em #000);
		}
	}
	.yui3-button{
		background-image:none;}
	.path-mod div.activity-information{
		border-bottom-color:brd;
	}
	div.comment-area textarea{
		background-color:bg3;
		border:solid 1px brd;
		border-radius:irad;
		padding:0.25em;
		line-height:100%;
		color:txt !important;}
	ul.comment-list>li{
		background-color:bg3 !important;
		border-radius:irad;
		& .text_to_html{
			color:txt;
		}
	}
	.comment-delete>a{
		&>i{
			color:fals;
			filter:brightness(1.5);
		}
		&:hover>i{
			color:fals;
			filter:brightness(2);}
	}
	#coursesearchbox{
		background-color:bg3;
		border-color:brd;
		color:txt;
	}
	.table,
	table.collection,
	table.flexible,
	.generaltable{
		& th,
		& td,
		& thead th{
			border-color:brd;
			color:txt;
		}
	}
	.generaltable tbody tr{
		&:hover{
			color:txt;
			background-color:#0000;
		}
		&:nth-of-type(2n+1){
			background-color:#0000;
		}
	}
	.yui3-datatable{
		& .yui3-datatable-header{
			background-color:bg3 !important;
			text-shadow:none;
			color:txt !important;
			border-bottom:solid 1px brd;
		}
		& .yui3-datatable-cell,
		& .yui3-datatable-header{
			border-left-color:brd;
		}
		& .yui3-datatable-sort-liner{
			display:flex;
			align-items:space-between;
			padding-right:1em;
			& .yui3-datatable-sort-indicator{
				background-image:url(svg_select_arrs);
				background-position:center right;
				background-size:100%;
				width:0.8em;
				height:0.8em;
			}
		}
		& .yui3-datatable-data>tr>td{
			background-color:bg3 !important;
		}
	}
	.preferences-container .preference-table{
		border-color:brd;
		color:txt;
		& tr td:nth-child(even),
		& tr th:nth-child(even){
			border-color:brd;
			background-color:bg2_5;
		}
	}
	#id_comments{
		color:txt;}
	
	input[type="checkbox"]{
		appearance:none;
		min-width:1em;
		max-width:1em;
		min-height:1em;
		max-height:1em;
		border:0.12em solid hbrd;
		border-radius:irad;
		color:txt;
		&:checked:after{
			content:"";
			position:absolute;
			font:normal normal normal 14px/1 FontAwesome;
			font-size:85%;
		}
	}
	input[type="radio"]{
		appearance:none;
		min-width:1em;
		max-width:1em;
		min-height:1em;
		max-height:1em;
		background-image:radial-gradient(#0000 50%,hbrd 60%,#0000 70%);
		background-size:1em 1em;
		&:checked{
			background-image:radial-gradient(hbrd 30%, #0000 40%,#0000 50%,hbrd 60%,#0000 70%);
		}
	}
	input[type="file"]{
		cursor:pointer;/*not default for some reason?*/
		&::-webkit-file-upload-button{
			background-color:bg4;
			color:txt;
			border:none;
			border-radius:irad;
			cursor:pointer;
			&:hover{
				background-color:bg5;
				color:txt;
			}
		}
	}
	@supports (-moz-appearance:none){/*firefox-specific hack*/
		input[type="file"]{
			color:dtxt;
			filter:invert(0.8);}
	}
	.form-control{
		border-radius:irad;
		background-color:bg3;
		border-color:brd;
		color:txt;
		&:disabled,
		&[readonly],
		&[readonly]:hover{
			background-color:brd;
			color:dtxt;
			cursor:not-allowed;
		}
		&:hover,
		&:focus{
			background-color:bg4;
			color:txt;
		}
		&:focus{
			border-color:btn;
			box-shadow:0 0 0 .2rem rgba(btn,.25);
		}
		select&{
			appearance:none;
			background-image:url(svg_select_arrs);
			background-repeat:no-repeat;
			background-position:right center;
			background-origin:content-box;
			background-size:0.75rem;
			padding-right:0.25rem;
		}
	}
	.input-group{
		&>.form-control{
			&,
			&.border-right-0{
				border-radius:irad 0 0 irad;
			}
			&.border-left-0{
				border-radius:0 irad irad 0;
				&.border-right-0{
					border-radius:0;
				}
			}
		}
		&-prepend>span{
			border-radius:irad 0 0 irad;
		}
		&-append{
			border-radius:0 irad irad 0;
			overflow:hidden;
			&>.btn-primary{
				border:none;
				border-radius:0;
			}
		}
	}
	.border-bottom{
		border-bottom-color:brd !important;}
	code{
		color:mtxt;
		background-color:bg1;
		outline:solid 2px bg0;
		font-family:Monospace;
		font-size:1.08em;
		padding:0 0.1em;
	}
	.highlight{
		outline:solid 1px hlnk;}
	.aalink,
	.arrow_link,
	a:not([class]),
	.activityinstance>a,
	#page-footer a:not([class]){
		&.focus,
		&:focus{//janky box-shadow offsets; a better solution is desired
			color:hlnk;
			if LSI=="C"{
				background-color:#0000;
				box-shadow:0 -0.2rem brd,0 0.2rem brd;
				border-radius:0.3em;
			}else if LSI="B"{
				background-color:#0000;
				box-shadow:0 0.4rem 0 -0.1rem bg2,0 -0.4rem 0 -0.1rem bg2,0 0 0 0.1rem bg2,0 0 0 0.3rem brd;
			}else if LSI=="U"{
				background-color:#0000;
				box-shadow:0 0 0 2px bg2,0 0.2rem 0 1px brd;
				border-radius:0.3em;
			}else if LSI=="F"{
				background-color:bg4;
				box-shadow:0 -.2rem bg4,0 .2rem brd;
			}else if LSI=="R"{
				background-color:#0000;
				box-shadow:0 0 0 2px bg2,0 0 0 3px brd;
				border-radius:0.3em;
			}else if LSI=="E"{
				background-color:#0000;
				box-shadow:0 0 0 2px bg2,0 0 0 3px brd;
			}
		}
	}
	#qrcode>img{
		filter:none;
		background-color:#FFF;
		padding:4px;
	}
	.forumpost{
		border-color:brd;
		border-radius:crad;
	}
	/*Editor Atto*/
	div.editor_atto{
		& .icon{
			//TODO: check if this is even used outside the toolbar
			filter:invert(1) hue-rotate(180deg);
		}
		&_content{
			background-color:bg2 !important;
			border:none !important;
			border-bottom-left-radius:0.5em;
			border-bottom-right-radius:0.5em;
			resize:none;
			&_wrap{
				border-color:brd !important;
				border:solid 1px;
				border-top:none;
				color:txt;
				background-color:bg3;
				border-bottom-left-radius:0.5em;
				border-bottom-right-radius:0.5em;
			}
		}
		&_toolbar{
			background-color:bg2 !important;
			border-color:brd !important;
			border-top-left-radius:0.5em;
			border-top-right-radius:0.5em;
			& div.atto_group{
				overflow:clip;
			}
			& button{
				&:active,
				&.highlight{
					background-image:none;
					background-color:bg4;
					& .icon::before{
						color:htxt;
					}
				}
				&:hover{
					background-image:none;
					background-color:bg4;
					& .icon::before{
						color:htxt;
					}
				}
				&[disabled]{
					opacity:1;
					background-color:brd;
					& .icon::before{
						color:dtxt;
					}
				}
				& .icon{
					filter:none;
					color:txt;
				}
				& + button{
					border-left-color:brd;
				}
			}
		}
		&_notification .atto_{//TODO get url for this
			&info,
			&warning{
				border-radius:0.5em;
				border-top-right-radius:0;
				border:solid 1px brd;
				margin-top:-1px;
			}
			&warning{
				background-color:fals;
			}
			&info{
				background-color:bg3;
			}
		}
	}
	.atto_group{
		background-color:bg3 !important;
		border:none !important;
		&>button{
			border-color:brd !important;
		}
	}
	/*Filemanager*/
	.filemanager{
		& .fp-navbar{
			background-color:bg3;
			border-radius:crad crad 0 0;
			border:none;
			border-bottom:solid 1px brd;
		}
		& &-container{
			background-color:bg3;
			border-radius: 0 0 crad crad;
			border:none !important;
		}
		& .yui3-datatable{
			&-header{
				border-bottom-color:brd !important;
			}
			&-even,
			&-odd{
				& .yui3-datatable-cell{
					background-color:bg2 !important;
					border-left-color:bg2 !important;
				}
			}
		}
		& .btn{
			background-color:bg5;
			color:lnk;
			&:hover{
				background-color:bg6;
				color:hlnk;
			}
			&:active{
				background-color:brd !important;
				color:hlnk;
			}
			&>.icon{
				vertical-align:middle;
			}
		}
		.moodle-dialogue & .fp-thumbnail{
			border:none;
			min-width:112px;
			background-color:#0000;
		}
		& .fp-content:focus{
			outline:none;
		}
		& .fp-treeview .fp-folder>tbody>tr>td{
			background-color:bg3;
		}
		& .fp-pathbar .fp-path-folder{
			background:none;
			&::before{
				display:inline-block;
				width:0;
				content:"";
				font:normal normal normal 14px/1 FontAwesome;
			}
		}
	}
	.filepicker{
		& .fp-navbar{
			border:solid 1px brd;
			border-bottom:none;
			border-bottom-left-radius:0;
			border-bottom-right-radius:0;
			padding-bottom:0;
		}
		& .fp-content{
			background-color:#0000;
			border:solid 1px brd;
			border-top:none;
			border-top-left-radius:0;
			border-top-right-radius:0;
			height:initial;
			padding-bottom:1em;
		}
		& .moodle-dialogue-bd{
			min-height:20vh;
			max-height:80vh;
			padding-bottom:1em;
			overflow-y:auto;
			& .file-picker{
				margin-bottom:1em;
			}
		}
	}
	.filepicker,
	.file-picker,
	.filemanager{
		& .fp-viewbar{
			background-color:bg5;
			border-radius:irad;
			overflow:hidden;
			&>.btn{
				background-color:bg5;
				border-radius:0;
				color:lnk;
				&:focus{
					outline:none;
					box-shadow:none;
					outline-offset:0;
					color:hlnk;
				}
				&:hover{
					color:hlnk;
					background-color:bg6;
				}
				&.checked{
					background-color:btn;
					&>.icon{
						color:hlnk;
					}
				}
			}
			&:not(.disabled) a.checked{
				color:hlnk;
			}
		}
		& .fp-info .fp-thumbnail{
			border-radius:irad;
			box-shadow:0 0 0.5em bg0;
		}
		& .fp-thumbnail{
			border:none;
			min-width:112px;
			background-color:#0000;
			border-bottom:none;
			&>img{
				border:none;
			}
		}
		& .fp-iconview .fp-file{
			box-shadow:0 0 0.5em bg0;
			border-radius:irad irad 0 0;
			&name{
				background-color:bg3;
				border-top:none;
				border-radius: 0 0 irad irad;
				padding:0 0.1em 0.1em 0.1em;
				box-shadow:0 0 0.5em bg0;
				margin-bottom:0.5em;
				&-field{
					padding-left:1em;
					margin-left:-1em;
					padding-right:1em;
					margin-top:-3px;
					margin-right:-1em;
				}
			}
			&:hover .fp-filename-field{
				overflow:hidden;
				height:auto;
			}
		}
	}
	.dndupload-target{
		background-color:bg3 !important;}
	/*ace editor*/
	.ace-tm{
		background-color:bg0;
		color:txt;
		& .ace_gutter{
			background-color:bg2;
			color:txt;
			&-active-line{
				background-color:bg3;
				color:htxt;
			}
		}
		& .ace_marker-layer .ace_active-line{
			background-color:#FFF1;
		}
		& .ace_print-margin{
			background-color:brd;
		}
		& .ace_cursor{
			color:htxt;
		}
		& .ace_indent-guide{
			background-image:none;
			border-right:solid 1px brd;
		}
	}
	.ui_wrapper[style*="border: 1px solid darkgrey"]{
		border-color:brd !important;}
	/*Coderunner*/
	coderunner{//TODO - seems to only partially work
		.que.& div{
			&.^[0]-test-results.bad,
			&.pre_syntax_error,
			&.pre_question_error{
				background-color:fals;
				&.precheck{
					background:repeating-linear-gradient(0deg,rgba(hfals,0.5),rgba(fals,0.5) 8px,rgba(fals,0.5) 8px,rgba(hfals,0.5) 16px)
				}
			}
			&.^[0]-test-results{
				color:txt;
			}
		}
		.que.& tr{
			&.r0 td,
			&.r1 td{
				background-color:bg3;
			}
		}
		#page-question-type-&,
		.que.&{
			& table.^[0]-test-results,
			& table.^[0]examples{
				& th,
				& td{
					border-color:brd;
				}
				& .header{
					background-color:bg4;
				}
			}
			& div.^[0]-test-results.good,
			& tr.^[0]-failed-test.fixed{
				background-color:tru;
				&.precheck{
					background:repeating-linear-gradient(0deg,rgba(htru,0.5),rgba(tru,0.5) 8px,rgba(tru,0.5) 8px,rgba(htru,0.5) 16px)
				}
			}
			& div.ui_wrapper{
				background-color:bg1;
			}
		}
	}
	/*VPL IDE*/ //TODO: border radii
	#vpl_menu{
		border-radius:0.25em 0.25em 0 0;
	}
	#vpl_tabs{
		border-radius:0 0 0.25em 0.25em;
	}
	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default{
		border:none;
		background:bg4;
	}
	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active,
	a.ui-button:active,
	.ui-button:active,
	.ui-button.ui-state-active:hover{
		border:none;
		background:bg4;
		border-top:inset 1px brd;
		&>a{
			color:hlnk !important;
		}
	}
	.ui-corner-all{
		border-radius:0.25em;
	}
	.vpl_ide_tr{
		height:auto !important;
		border-radius:0 0 0.25em 0.25em;
		background:bg3;
	}
	.ui-widget-header{
		display:flex;
		border:none;
		background:bg3;
	}
	.ui-button{
		border:none;
		background:bg4;
		margin:1px;
		margin-right:calc(0.1em + 1px);
		&:hover{
			background:bg5;
		}
	}
	.ui-controlgroup-horizontal{
		margin:0 calc(0.1em + 1px) 0 1px;
		& .ui-button{
			margin-left:0;
			margin-right:0;
		}
	}
	.ui-widget.ui-widget-content{
		border:solid 1px #0000;
		background:bg3;
	}
	.ui-widget-content{
		color:txt;
		background:bg4;
	}
	.vpl_ide_file{
		margin-top:0;
	}
	.vpl_ide_closeicon{
		text-shadow:none;
	}
	//TODO: replace with custom icons
	.ui-state-active .ui-icon,
	.ui-button:active .ui-icon{
		filter:brightness(2);
	}
	.ui-icon,
	.ui-widget-content .ui-icon{
		filter:brightness(4);
	}
	.ui-state-hover .ui-icon,
	.ui-state-focus .ui-icon,
	.ui-button:hover .ui-icon,
	.ui-button:focus .ui-icon{
		filter:brightness(2);
	}
	.ui-dialog{
		& .ui-dialog-buttonpane button{
			color:txt;
			border:solid 1px #0000;
			border-color:#0000;//because of a css technicality
			background:bg4;
			&:hover{
				border-color:brd;
			}
		}
		& .ui-dialog-titlebar-close:hover{
			border:none;
			background:#0000;
		}
	}
	/*Calendar*/
	.calendar_event,
	.path-calendar .maincalendar .calendarmonth ul li .badge.badge-circle.calendar_event{
		&_course{
			background-color:cal0;
		}
		&_category{
			background-color:cal1;
		}
		&_group{
			background-color:cal2;
		}
		&_user{
			background-color:cal3;
		}
		&_site{
			background-color:cal4;
		}
	}
	/*Replacement images + image manipulation*/
	.atto_image_button_text-bottom.img-responsive,
	.atto_image_button_text-top.img-responsive,/*most likely embedded images in 	assignment descriptions*/
	.qtext img,/*images in the question text, most of the time classless*/
	img[src*="mod_page"],/*images with mod_page in the source url, most of the images in courses have this*/
	.img-fluid,//probably mostly large images in modal lessons
	.region-main-content img:not([class]):not([src^="https://elearning.tgm.ac.at/theme/"]){/*images without class - a last resort, really*/
		filter:EICC;}
	img[src$="elearning.tgm.ac.at/theme/image.php/classic/core/"][src$="/i/loading_small"]{
		filter:invert(1);
	}
	.loading{
		background-image:none !important;
		&:before{
			content:"\00a0";
			background-image:url("https://elearning.tgm.ac.at/theme/image.php/classic/core/123456/i/loading_small");
			background-repeat:no-repeat;
			filter:invert(1);
		}
	}
	img[src="https://elearning.tgm.ac.at/theme/image.php/classic/core/1604966287/u/f1"]{
		filter:brightness(0.39) contrast(2)}
	#spinning_wheel{
		filter:invert(1) brightness(1.5);
	}
	/*row where it displays what you've done and what you didn't. Normally only in course/view.php, but also in other places*/
	.barRow{
		& .progressBarCell{
			border:none;
			border-left:solid 1px bg2;
			border-radius:0;
			&[style*="background-color:#73A839"]{
				background-color:tru !important;
			}
			&[style*="background-color:#C71C22"]{
				background-color:fals !important;
			}
			&[style*="background-color:#FFCC00"]{
				background-color:idk !important;
			}
		}
		& .firstProgressBarCell{
			border-right:none !important;
			border-left:none;
			border-radius:lbarshape(PBCS,PBCSm) !important;
			&.lastProgressBarCell{
				border-radius:barshape(PBCS,PBCSm) !important;
			}
		}
		& .lastProgressBarCell{
			border-radius:rbarshape(PBCS,PBCSm) !important;
		}
	}
	 // don't ask
	.block_completion_progress{
		& .barModeScroll,
		& .barModeSqueeze{
			.progressBarCell{
				border:none;
				margin-left:1px;
				&.completed{
					background-color:tru;
				}
				&.submittedNotComplete{
					background-color:idk;
				}
				&.notCompleted{
					background-color:fals;
				}
				&:first-of-type{
					border-radius:lbarshape(PBCS,PBCSm);
					margin-left:0;
				}
				&:last-of-type{
					border-radius:rbarshape(PBCS,PBCSm);
					border-right:none;
				}
				&:only-of-type{
					border-radius:barshape(PBCS,PBCSm);
				}
			}
		}
	}
	/*flexitour*/
	span[data-flexitour="container"]{
		&[x-placement="top"],
		&[x-placement="top-start"]{
			& div[data-role="arrow"]::after{
				border-top-color:currentColor;
				box-shadow:0 -0.5em currentColor;
			}
		}
		&[x-placement="bottom"],
		&[x-placement="bottom-start"]{
			& div[data-role="arrow"]::after{
				border-bottom-color:currentColor;
				box-shadow:0 0.5em currentColor;
				.format-tiles &{
					color:lnk;
				}
			}
		}
		& div[data-role="arrow"]::after{
			color:bg3;
		}
	}
	/*badges*/
	.badge{
		background-color:bg4;
		color:txt;
		padding:0 0.5em;
		border-radius:irad;
		&-info{
			padding:0.25em 0.5em;
		}
		&-secondary>strong{
			background-color:brd;
			color:dtxt;
		}
		&-success>strong{
			background-color:tru;
			color:htru;
		}
		&>strong{
			display:inline-block;
			margin-left:-0.5em;
			padding:0.25em 0.25em 0.25em 0.5em;
			border-radius:irad 0 0 irad;
		}
	}
	/*highlightjs*/
	.hljs{
		background-color:bg1;
		color:txt;
		box-shadow:inset 0 0 0 2px bg0;
		&-doctag,
		&-keyword,
		&-formula{
			color:c0;
		}
		&-string,
		&-regexp,
		&-addition,
		&-attribute,
		&-meta-string{
			color:c1;
		}
		&-attr,
		&-variable,
		&-template-variable,
		&-type,
		&-selector-class,
		&-selector-attr,
		&-selector-pseudo,
		&-number{
		 color:c2;
		}
		&-section,
		&-name,
		&-selector-tag,
		&-deletion,
		&-subst{
			color:c3;
		}
		&-built_in,
		&-class &-title{
			color:c4;
		}
	}
	/* popup dialogue windows, e.g. when the session runs out and elearning tells you to login again */
	.modal{
		&-header{
			background-color:bg3;
		}
		&-footer{
			background-color:bg3;
			border-color:brd;
		}
		&-content{
			background-color:bg3;
			border:none;
			border-radius:crad;
		}
	}
	.moodle-dialogue-base .moodle-dialogue-wrap{
		background-color:bg3;
		border-color:brd;
		border-radius:crad;
		overflow:hidden;
	}
	.moodle-dialogue-hd{//fixes titles that would otherwise extend outside the card
		word-break:break-word;
	}
	.modal-header,
	.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
	.path-mod-assign [data-region="grade-panel"] .popout>.col-md-3{
		border-color:brd;
	}
	/* search bars */
	.simplesearchform{
		& .btn-submit{
			background-color:bg3;
			border-color:brd;
			border-left:none;
			border-radius:0 irad irad 0;
			transition:none;
		}
		&:hover .btn-submit{
			background-color:bg4;
		}
	}
	/* genericocss, whatever that is */
	.filter_generico_warning{
		color:hidk;
		background-color:idk;
	}
	/* raw html codeblock generated by hilite.me */
	div[style*="background: #ffffff"][style*="border: solid gray"][style*="border-width: .1em .1em .1em .8em"][style*="padding: .2em .6em"]{
		background-color:bg0 !important;
		border-color:brd !important;
		border-radius:0 crad crad 0;
		& span{
			&[style*="color: #000080"]{
				color:c0 !important;
			}
			&[style*="color: #008000"]{
				color:c1 !important;
			}
			&[style*="color: #ff0000"]{
				color:c3 !important;
			}
			&[style*="color: #0000ff"]{
				color:hbtn !important;
			}
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/my/.*?") {
	.dashboard-card{
		border-width:0;
		background-color:bg3;}
	.course{
		&-info-container{
			background-color:bg3;
		}
		&-menubtn{
			&:hover,&:focus{
				background-color:bg4 !important;
			}
		}
		&listitem{
			background-color:bg2;
			border-color:#0000;
			border-top-color:brd;
			border-bottom-color:brd;
		}
		&-summaryitem{
			background-color:bg3 !important;
			border:none !important;
		}
	}
	.progress{
		background-color:bg1 !important;
		border-color:bg1 !important;
		margin-bottom: 0.5rem;
		height:0.4rem !important;
		&-bar{
			background-color:btn;
		}
		if CPB=="C"{
			height:0.3rem !important;
		}else if CPB=="BL"{
			border:none !important;
		}else if CPB=="CBL"{
			border:none !important;
			height:0.3rem !important;
		}else if CPB=="R"{
			border-radius:0.2rem;
		}else if CPB=="RBL"{
			border:none !important;
			border-radius:0.2rem;
		}else if CPB=="RC"{
			border-radius:0.15rem;
			height:0.3rem !important;
		}else if CPB=="RCBL"{
			border:none !important;
			border-radius:0.15rem;
			height:0.3rem !important;
		}
	}
	.block-myoverview>.container-fluid.p-0{
		margin-top:1.5em;}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/(\\?.*)?") {
	.sitelink{
		filter:invert(1) hue-rotate(180deg);}
	#login_username,
	#login_password{
		background-color:bg3 !important;
		color:txt !important;}
	.forumpost{
		border-color:brd !important;
		border-radius:crad;}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/login/index\\.php.*?") {
	.mt-3{
		color:txt;}
	img.img-fluid{
		filter:invert(1) hue-rotate(180deg) brightness(0.9);}
	#modal{
		&-content{background-color:bg2;}
		&-header{border-bottom:none;}
		&-footer{border-top:none;}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/course/view\\.php.*?") {
	#region-main{
		background-color:bg2;}
	.section{
		border-bottom-color:brd !important;
		& li.activity.hasinfo{
			border-bottom-color:brd;
		}
		&.current::before{
			border-color:btn;
		}
	}
	.progressEventInfo .iconInInfo{ /*Fixes a specific icon being distorted because someone forgot that width was set to 12px*/
		width:1.2em;
		height:1.2em;
	}
	/*These new tiles, ykwim*/
	.tiles{
		&>.tile,
		&>.section{
			background-color:bg2 !important;
		}
	}
	.format-tiles{
		& #header-overlay,
		& #window-overlay{
			background-color:#888;
			mix-blend-mode:multiply;
			opacity:1;
		}
		& #page .course-content ul li.section.main{
			background-color:bg2;
		}
		& li.activity.subtile{
			background-color:bg2;
			border-color:brd;
			& .activitytitle a{
				background:linear-gradient(to bottom,bg4 85%,#0000);
			}
		}
		& li.activity button[data-action="change-completion-status"]{
			&>.completion-icon{
				outline:solid 3px #0000;
				transition:outline-color 300ms ease-in-out;
				border-radius:100%;
			}
			&:hover{
				border-color:#0000;
				&>.completion-icon-y{
					outline-color:rgba(htru,0.6);
				}
				&>.completion-icon-n{
					outline-color:txt;
				}
			}
		}
		& #buttonhidesec0{
			background-color:#0000;
			&:hover{
				background-color:bg4;
				border-radius:irad;
			}
		}
		& .sectiontitle h2{
			color:txt;
		}
		& .sectiontitle::after,
		& .tag-info{
			background-color:tru;
		}
		& .course-content{
			& ul.tiles .tile{
				box-shadow:2px 4px 5px 0 #000A;
				transform:translateY(0);//this is needed for compatibility
				border-top:none;
				border-radius:irad;
				&:hover{
					box-shadow:2px 10px 8px -3px #000A;
					transition:all 0.25s ease-in-out;
					transform:translateY(-6px);
				}
				&.phototile{
					background-color:#444 !important;/*darkening the background image*/
					background-blend-mode:overlay;
					& .photo-tile-text h3{
						color:htxt !important;
						font-weight:500;
						font-size:1.25rem;
						background-color:lnk;
					}
				}
			}
			& .section .activity:hover{
				background-color:bg3;
			}
		}
		/* the arrows in format tile thingies */
		/* possibly also applicable to .embed_cm_modal .embed_file_button */
		& .course-content .single-section .navigation-arrows{
			display:inline-flex;
			& .navigation-arrow{
				transition:none;
				opacity:1;
				margin:0 0.25em;
				border-radius:irad;
				display:inline-flex;
				justify-content:center;
				align-items:center;
				&>.dir-rtl-hide{
					display:flex;
					align-items:center;
					height:100%;/*jesus, why?*/
				}
				&:not(.dimmed){
					background-color:bg3;
					&:hover{
						background-color:bg4;
						& .icon{
							filter:brightness(1.2);
						}
					}
				}
				&.dimmed:hover{
					background-color:#0000;
				}
				&:hover{
					transform:none;
				}
				& .icon{
					height:60%;
				}
			}
		}
		& .editor_atto_content_wrap{
			& h1,& h2,& h3,& h4{
				border-left-color:tru;
			}
		}
		/*some small fixes for https://elearning.tgm.ac.at/course/view.php?id=5836*/
		& .badge-info{
			background-color:bg4;
		}
		& .tile a .availabilityinfo,
		& .availabilityinfo .badge{
			color:txt;
		}
	}
	.format-tiles ul.tiles .headerabovetiles button.selected,
	.headerabovetiles button:active,
	.headerabovetiles button:focus,
	.format-tiles .modal-header{
		background-color:btn;
		&,& h5{
			color:htxt;
		}
	}
	/*progress bar time descriptor*/
	.progressBarCell>.nowDiv{
		&>.icon{
			display:none;}
		&.lastHalfNow{
			background:url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M0 0H16V16Z' fill='rgb(127,127,127)'/></svg>") no-repeat;
			background-position:5.5em 5px;
			padding-right:1.3em;}
		&.firstNow{
			background:url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M16 0H0V16Z' fill='rgb(127,127,127)'/></svg>") no-repeat;
			background-position:0em 5px;
			padding-left:1.3em;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/user/files\\.php.*?") {
	.filemanager-container,
	.fp-navbar{
		background-color:bg3;
		border:none !important;}
	a.btn-sm{
		background-color:bg4;
		&:active,
		&.active,
		&:focus,
		&.checked{
			background-color:bg6 !important;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/grade/report/overview/index\\.php.*?") {
	thead>tr>th{
		border-bottom:none !important;}
	table td,
	table th{
		border-color:brd !important;}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/message/output/popup/notifications.php.*?") {
	.content-item-container{
		background-color:bg2;
		color:txt;
		border-color:brd;
		&:first-child{
			border-top-left-radius:0.25rem;
		}
		&.selected{
			background-color:bg3;
			border-color:hbrd;
			color:htxt;
		}
		&.selector,
		&:hover{
			&.content-item-footer .timestamp{
				color:txt;
			}
		}
	}
	.notification-area{
		border-color:brd;
		& .control-area{
			border-right-color:brd;
		}
		& .content-area .header{
			border-bottom-color:brd;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/message/index\\.php.*?") {
	#region-main .border-right.h-100{
		border-color:bg3 !important;}
}

@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/user/(profile|view)\\.php.*?") {
	#region-main .profile_tree>.node_category{
		background-color:bg3;
		border-radius:crad;}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/mod/organizer/view\\.php.*") {
	#organizer_main_cointainer{
		& span.countdown{
			&_normal{
				background-color:tru;
				color:htxt;
			}
			&_passed{
				background-color:bg4;
			}
			&_critical{
				background-color:fals;
			}
		}
		& tr.registered_slot td{
			background-color:tru !important;
			color:htxt;
		}
		
		& table tr.past_due td{
			background-color:bg4 !important;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/mod/assign/view\\.php.*?") {
	/*Abgabestatus*/
	.submissionsummarytable>table>tbody>tr{
		&>td,
		&>th{
			background-color:bg3;
			&:first-child{
				background-color:bg4;
				color:htxt;
			}
		}
		&>td.submission{
			&graded,
			&statussubmitted{
				background-color:tru;
				color:htru;
			}
			&notgraded{
				background-color:bg3;
				color:txt;
			}
			&statusdraft{
				background-color:idk;
				color:hidk;
			}
		}
		&>td.latesubmission,
		&>td.overdue{
			background-color:fals;
			color:hfals;
			&>font{
				color:hfals;
			}
		}
		&>td.earlysubmission{
			background-color:tru;
			color:htru;
		}
		&:first-of-type{
			&>td,
			&>th{
				border-top:none;
				&:first-child{
					border-top-left-radius:crad;
				}
				&:last-child{
					border-top-right-radius:crad;
				}
			}
		}
		&:last-of-type{
			&>td,
			&>th{
				&:first-child{
					border-bottom-left-radius:crad;
				}
				&:last-child{
					border-bottom-right-radius:crad;
				}
			}
		}
	}
	#jump-to-activity{
		background-color:bg3;
		border-color:brd;
		color:txt;}
	/*Grading criteria in full assignment view*/
	//see -> https://elearning.tgm.ac.at/mod/assign/view.php?id=206006
	.gradingform_rubric .criteria>tbody{
		border-radius:crad;
		overflow:hidden;
		border:solid 1px brd;
	}
	.gradingform_rubric .criterion{
		border-color:brd;
		border-right:none;
		border-left:none;
		&.even{
			border:none;
			background:#0000;
			&>td{
				background:bg4;
				&:first-of-type{
					background:bg5;
				}
			}
		}
		&.odd{
			&>td{
				background:bg3;
				&:first-of-type{
					background:bg4;
				}
			}
		}
		&:last-of-type{
			border-bottom:none;
		}
		& .levels .level{
			border-left-color:brd;
			&.last{
				border-right:none;
			}
			&.checked{
				background:tru;
				border:none;
				border-left:solid 1px brd;
				& .score,
				& .score>span{
					color:htru;
				}
			}
			& .score{
				color:txt;
			}
			
		}
		& .remark{
			border-left:solid 1px brd;
		}
	}
	/*Another grading criteria form*/
	//see -> https://elearning.tgm.ac.at/mod/assign/view.php?id=208163
	.gradingform_guide .criterion{
		border:none;
		&.even{
			background-color:#0000;
			&>td{background-color:bg3}
		}
		&.odd{background-color:bg4}
		&.first>td{
			border-radius:irad irad 0 0;
		}
		&.last>td{
			border-radius:0 0 irad irad;
		}
		& .criteriondescriptionscore{
			background-color:bg6;
			color:dtxt;
			border-radius:50%;
			display:inline-block;
			width:1.5em;
			height:1.5em;
			vertical-align:baseline;
			text-align:center;
			padding:0.25em 0;
			line-height:1em;
			font-weight:bold;
		}
	}
	//annotated PDFs in assignments
	input[name="assignfeedback_editpdf_haschanges"]+.visibleifjs>a{
		color:lnk;
		transition:none;
		&:hover{
			color:hlnk;
			text-decoration:underline;
		}
	}
	.assignfeedback_editpdf_widget .pageheader{
		background-color:bg3;
		border-color:brd;
		& .toolbar,
		& .navigation-search,
		& .navigation-expcol,
		& .navigation{
			border-color:brd;
			overflow:hidden;
			background-color:#0000;
		}
		& .navigation button,
		& .navigation select + button{
			border-color:brd;
		}
		& button:hover{
			background-image:none;
			background-color:bg4;
			& img{
				filter:brightness(1.2);
			}
		}
		select{
			background-color:#0000;
			color:txt;
			&:hover{
				background-color:bg4;
				color:htxt;
			}
		}
	}
	.assignfeedback_editpdf_widget .drawingregion{
		background-color:bg3;
		border:none;
	}
	.assignfeedback_editpdf_commentsearch input[placeholder="Kommentare filtern..."]{
		//style is copied from login text inputs
		//TODO: deduplicate
		background-color:bg3;
		color:txt;
		border:solid 1px brd;
		border-radius:irad;
		padding:.375rem .75rem;
		font-size:.9375rem;
		line-height:1.5;
		transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
		&:focus{
			border-color:btn;
			box-shadow: 0 0 0 .2rem rgba(btn,.25);
			outline:none;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/user/preferences\\.php.*?") {
	#region-main .card.mb-3{
		background-color:bg3;}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/admin/tool/dataprivacy/mydatarequests\\.php.*?") {
	div[data-region="datarequests"]>.mt-1.mb-1>.btn.btn-primary{
		color:txt !important;}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/mod/(student)?quiz.*?"), regexp(".*userstyle_testing/darklearning.*") {
	.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd{
		color:txt;}
	.que.multichoice .answer{
		& div.r0,
		& div.r1{
			border-radius:irad;
			& .icon.fa{
				align-self:center;
			}
			& div[data-region="answer-label"]{
				cursor:pointer;
			}
			& input[disabled]+div[data-region="answer-label"]{
				cursor:not-allowed;
			}
		}
		& .incorrect{
			background-color:fals;
			border:solid 1px hfals;
			&, & p, & span,
			& .answernumber{
				color:hfals;
			}
		}
		& .correct{
			background-color:tru;
			border:solid 1px htru;
			&, & p, & span,
			& .answernumber{
				color:htru;
			}
		}
	}
	.que .formulation{
		background-color:bg3;
		color:txt;
		border-radius:crad;}
	.que .correct .custom-select{
		background-color:tru;}
	.que .incorrect .custom-select{
		background-color:fals;}
	.que .correctness{
		&.notanswered,
		&.incorrect{
			background-color:fals;
		}
		&.correct{
			background-color:tru;
		}
	}
	.que .outcome{
		background-color:bg3;
		color:txt;
		border-radius:crad;}
	.que .info{	
		background-color:bg3;	
		border-radius:crad;	
		border:none;}	
	.que.essay .qtype_essay{
		&_response.readonly{
			background-color:bg4;
			padding-left:0.2em;
			border-radius:irad;
		}
		&_monospaced{
			background-color:bg2;
			padding:0.25em;
			border-radius:irad;
			color:txt;
			border-color:brd;
		}
	}
	.que.ddwtos,
	.que.ddimageortext,
	form.mform fieldset#id_previewareaheader{
		& .group1{
			background-color:bg3;
		}
		& .draghome,
		& .drop{
			border-radius:irad;
			border-color:brd;
		}
		& .drop,
		& .dropzone,
		& .droparea .draghome,
		& .draghome.placed:not(.beingdragged){
			&:focus,
			&.valid-drag-over-drop{
				border-color:btn;
				box-shadow:0 0 5px 3px btn,inset 0 0 2px 0 btn;
			}
		}
		& img.dropbackground,
		& img.group1{
			filter:EICC;
		}
	}
	.que .answer{
		&>.correct>.specificfeedback{
			background-color:tru;
			border: solid 1px htru;
		}
		&>.incorrect>.specificfeedback{
			background-color:fals;
			border: solid 1px hfals;
		}
		&>div>.specificfeedback{
			border-radius:irad;
			margin:-1px -1px -1px 0;
		}
	}
	.que.multianswer .feedbackspan{
		border-radius:0 0 crad crad;
		background:linear-gradient(to top,rgba(idk,0.9) 70%,rgba(idk,0.7) 80%,rgba(idk,0.3) 90%,rgba(idk,0) 100%);
		color:hidk;
		border:solid 1px hidk;
		border-top:none;
		box-shadow:0 0.2em 0.5em bg0,0 0.2em 0.2em idk;
	}
	.path-mod-quiz #mod_quiz_navblock{
		& a.qnbutton{
			transition:transform 0.1s;
			color:txt !important;
			background-color:bg4;
			&:hover{
				text-decoration:none;
				&:not(.thispage){
					transform:scale(1.2);
				}
			}
			&:focus-visible,
			&:focus,
			&:active{
				text-decoration:none;
				outline:solid 1px brd;
				box-shadow:none;
			}
			&.thispage{
				cursor:default;
				&>.thispageholder{
					outline:solid 1px brd;
				}
			}
			&>.thispageholder{
				border:none;
			}
			&.correct>.trafficlight{
				background-color:tru;
				background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.5 6.5'%3E%3Cpath fill='"+urlenc(htru)+"' d='M0 3.25l2.5 2.5 4-4-1-1-3 3-1.5-1.5z'/%3E%3C/svg%3E%0A");
			}
			&.partiallycorrect>.trafficlight{
				background-color:idk;
				background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Ccircle fill='"+urlenc(hidk)+"' r='12'/%3E%3C/svg%3E%0A");
			}
			&.incorrect
			&.notanswered,
			&.invalidanswer{
				&>.trafficlight{
					background-color:fals;
					background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath fill='"+urlenc(hfals)+"' d='M0 1l1-1 2 2 2-2 1 1-2 2 2 2-1 1-2-2-2 2-1-1 2-2z'/%3E%3C/svg%3E");
				}
			}
			&.notyetanswered>.trafficlight{	
				background-color:bg4;
			}
			&.answersaved>.trafficlight{	
				background-color:brd;
			}
			&.flagged>.thispageholder{
				background-position:top right;
			}
		}
		& .allquestionsononepage a.qnbutton.thispage{
			cursor:pointer;
			&:hover{
				transform:scale(1.2);
			}
			&>.thispageholder{
				outline:none;
			}
		}
	}
	.quizreviewsummary{
		border-radius:crad;
		overflow:hidden;
		&>tbody>tr{
			&:first-child>.cell{
				border-top:none;
			}
			&>.cell:first-child{
				background-color:bg3_5;
			}
			&>.cell:last-child{
				background-color:bg3;
			}
		}
	}
	#page-mod-quiz-view table.quizattemptsummary tr.bestrow td{
		border-color:brd;
		background-color:bg2;}
	.quizattemptsummary>thead>tr>th{
		border-bottom:none;}
	.answer>input[type="text"]{	
		background-color:bg4;}
	.subquestion input[type="text"]{	
		background-color:bg4;	
		border-color:brd;	
		border-radius:irad;	
		color:txt;}	
	.submitbtns{
		& button[type="submit"].btn,	
		& input[type="submit"].btn{	
			background-color:bg3;	
			border-radius:irad;
			&.mod_quiz-next-nav{	
				background-color:btn;	
				border-color:btn;
			}
			&.btn.mod_quiz-next-nav:hover{	
				background-color:hbtn;	
				border-color:hbtn;
			}
		}
	}
	#quiz-timer-wrapper #quiz-timer{
		border-color:hidk;
		background-color:idk;
		color:hidk;
		& #quiz-time-left{
			color:inherit;
		}
		&.timeleft{
			&14,&15,&16{
				background-color:idk;
				color:hidk;
				border-color:hidk;
			}
			&9,&10,&11,&12,&13{
				background-color:fals;
				color:hfals;
				border-color:hfals
			}
			&4,&5,&6,&7,&8{
				background-color:hfals;
				color:fals;
				border-color:fals;
			}
			&0,&1,&2,&3{
				background-color:#000;
				color:#F00;
				border-color:#F00;
				box-shadow:0 0 0 1px #000;
			}
			&0{
				font-size:0;
				&::after{
					font-size:1rem;
					color:#F00;
					content:"Game Over";
				}
			}
		}
	}
	input[type="text"],
	input[type="checkbox"],
	.custom-select{
		&.incorrect,
		&.notanswered,
		.incorrect>&,
		.notanswered>&{
			&,
			&:hover{
				background-color:fals;
				color:hfals;
				border-color:hfals;
				transition:none
			}
		}
		&.partiallycorrect,
		.partiallycorrect>&{
			&,
			&:hover{
				background-color:idk;
				color:hidk;
				border-color:hidk;
				transition:none
			}
		}
		&.correct,
		.correct>&{
			&,
			&:hover{
				background-color:tru;
				color:htru;
				border-color:htru;
				transition:none
			}
		}
	}
	input[type="radio"]{
		&.incorrect,
		&.notanswered,
		.incorrect>&,
		.notanswered>&{
			background-image: radial-gradient(hfals 30%,#0000 40%,#0000 50%, hfals 60%,#0000 70%);
		}
		&.partiallycorrect,
		.partiallycorrect>&{
			background-image: radial-gradient(hidk 30%,#0000 40%,#0000 50%, hidk 60%,#0000 70%);
		}
		&.correct,
		.correct>&{
			background-image: radial-gradient(htru 30%,#0000 40%,#0000 50%, htru 60%,#0000 70%);
		}
	}
	input,select{
		&:disabled,
		&[readonly]{
			cursor:not-allowed;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/calendar/view\\.php.*?") {
	.eventlist .event .card{
		background-color:bg3;
		border-radius:crad !important;
		overflow:hidden;
	}
	.path-calendar .maincalendar{
		& .calendar_event_course{
			border:none;
		}
		& .calendarmonth ul li>a{
			text-overflow:clip;
			&:hover{
				overflow:visible;
				transform:translate(0,0);
				margin-bottom:0.45em;
				&.eventname{
					background-color:bg3;
					position:absolute;
					right:-3.5em;
				}
			}
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/user/index\\.php.*?") {
	.filter-group{
		border:none !important;
		border-radius:irad;
		background-color:bg3 !important;
		& .bg-white.border{
			border:none !important;
			background-color:bg3 !important;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/mod/lesson/view\\.php.*?") {
	.no-overflow img[role="presentation"]{
		width:100%;
		margin:0;
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/mod/studentquiz/view\\.php.*?") {
	#categoryquestions{
		//table head
		& thead,
		&>tbody>tr.r1{
			background-color:bg3;
		}
		//various icons, mostly denoting the type of quiz
		& img.icon{
			&[title="CodeRunner"]{
				border-radius:irad;
				filter:saturate(0.6);
			}
			&[title="Multiple-Choice"],
			&[title="Zuordnung"],
			&[title="Wahr/Falsch"],
			&[src$="/state_new"]{
				filter:invert(0.75);
			}
		}
		//difficulty and rating bars
		& .difficultylevel svg,
		& .mod_studentquiz_ratingbar svg{
			& rect[fill="#fff"]{
				fill:bg0;
				stroke:bg0;
			}
			& rect[fill="#007bff"]{
				fill:btn;
				stroke:bg0;
				stroke-width:1px;
			}
			& path{
				fill:btn;
				stroke:bg0;
			}
		}
	}
	//question filters - basically toggle buttons
	.path-mod-studentquiz input[type="checkbox"].toggle{
		& + a,
		& + label a{
			border:solid 1px btn;
			background-color:bg3;
			color:btn;
		}
		&:checked + a,
		&:checked + label a{
			border:solid 1px hbtn;
			background-color:hbtn;
			color:dtxt;
		}
	}
	//weird thing which functions as a label and submit button at the same time - for the page count
	.btn[value="Seitengröße:"]{
		background-color:bg3;
		color:txt;
		border:solid 1px brd;
		border-right:none;
		border-radius:irad 0 0 irad;
		&:hover{
			background-color:bg4;
			color:htxt;
			border-color:hbrd;
		}
		&:focus{
			background-color:bg5;
			border-color:hbtn;
			color:hhtxt;
		}
		& + .form-control{
			border-radius:0 irad irad 0;
			border-left:none;
		}
	}
	//statistics sideblock with horrible progressbars and even worse colored spans
	#mod_studentquiz_statblock{
		& svg{
			//the feeling when you have to fix the style of a large buisness :'I
			overflow:visible; //otherwise the borders get clipped
		}
		& rect{
			stroke-width:1px !important;
			rx: irad !important;
			ry: irad !important;
		}
		& rect:last-of-type{
			fill:tru !important;
			stroke:htru !important;
		}
		& rect:nth-of-type(2){
			fill: fals !important;
			stroke: hfals !important;
		}
		& rect:first-of-type{
			fill:idk !important;
			stroke:hidk !important;
		}
		& span[style*="color:#f0ad4e"]{
			color:hidk !important;
		}
		& span[style*="color:#d9534f"]{
			color:hfals !important;
		}
		& span[style*="color:#5cb85c"]{
			color:htru !important;
		}
	}
}
@-moz-document regexp("https?://elearning\\.tgm\\.ac\\.at/mod/studentquiz/(attempt|commenthistory)\\.php.*?"){
	svg[width="100%"] rect{
		&:first-of-type{
			fill:bg3 !important;
		}
		&:nth-of-type(2){
			fill:btn !important;
		}
	}
	svg[width="100%"] text{
		fill:txt;
	}
	.btn[value="Abbrechen"]{
		color:hfals;
		background-color:fals;
		border:solid 1px hfals;
		&:hover{
			color:dtxt;
			background-color:hfals;
		}
		&:focus,
		&.focus{
			outline:none;
			box-shadow:0 0 1em hfals;
		}
		&:focus-visible{
			outline:none;
			box-shadow:inset 0 0 0 1px dtxt;
			&:focus{
				box-shadow:inset 0 0 0 1px dtxt,0 0 1em hfals;
			}
		}
	}
	.path-mod-studentquiz{
		& .studentquiz_behaviour{
			& .comment_list>div.studentquiz-comment-container{
				border-color:brd;
			}
			& .star,
			& .rate .rating .rateable.star-empty,
			& .rate .rating:hover .rateable.star-empty{
				filter:contrast(0.1) saturate(10) brightness(1) hue-rotate(-30deg);
			}
		}
		& .studentquiz-comment-container{
			& .no-comment{
				border-top-color:brd;
			}
			& .filter-desc.current,
			& .filter-asc.current{
				& .studentquiz-comment-filter-type i::before{
					filter:contrast(0.1) saturate(10) brightness(0.8) hue-rotate(-30deg);
				}
			}
			& .studentquiz-comment{
				&-item{
					border-top-color:brd;
				}
				&-author{
					color:txt;
				}
				&-expand,
				&-collapse{
					color:txt;
					background-color:bg3;
					border-color:brd;
					border-bottom:none;
					&[disabled],
					&[disabled]:hover{
						background-color:brd;
						border-color:brd;
						color:htxt
						&::after{
							filter:contrast(0) brightness(1.5);
						}
					}
					&:hover,
					&:focus,
					&:active{
						color:htxt;
						background-color:bg4;
						border-color:hbrd;
						border-bottom:none;
						&::after{
							filter:contrast(0) brightness(1.4);
						}
					}
					&::after {
						filter:contrast(0) brightness(1.15);
					}
				}
				&-text,
				&-text-deleted{
					background-color:bg3;
					border:solid 1px brd;
					border-radius:irad;
					color:txt;
				}
				&-postfragmentform{
					background-color:#0000;
					color:txt;
				}
			}
		}
	}
	img[src$="/switch_plus"],
	img[src$="/switch_minus"]{
		filter:contrast(0.1) saturate(10) brightness(0.8) hue-rotate(-30deg);
	}
}

Reviews

No reviews yet.