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

Updated

Categoryelearning, moodle

Statistics

Learn how we calculate statistics in the FAQ.

Total views530

Total installs83

Weekly installs7

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

(preview image is outdated, will fix after I get added to some coures)

Version: 1.3.1
Changelog (since 1.3.0):

  • styled "success" line of buttons
  • styled separator in activity completion info
  • fixed submission status tables
  • fixed some links on focus
  • fixed badge style
  • removed style & settings for in-card progress bars, as they've been removed from elearning
  • styled assignment wrappers
  • styled completion indicators in assignment drawer
  • fixed some popup title text color
  • fixed the anonymous mode
  • fixed bug in W11 chrome regarding scrollbar borders (incomplete)
  • format tiles 😩
  • styled secondary alert boxes
  • fixed selected pagination item
  • fixed studentquiz statistics colors
  • styled highlighted row in studentquiz rankings
  • fixed generic caption color
  • fixed some activity icons
  • fixed an icon with a cross on a red circle
  • styled in-calendar events

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.3.1
@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	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"{
	"Rectangle":"rect",
	"Rounded":"rndd",
	"Soft Edges":"sft",
	"Round":"rnd",
	"Teardrop":"tear",
	"Pronounced":"pron",
	"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"{
	"Rectangle":"rect",
	"Soft Edges":"sft",
	"Rounded":"rndd",
	"Round":"rnd",
	"Teardrop":"tear",
	"Pronounced":"pron",
	"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"}
==/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 = #899
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 regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at(?!\\/archiv).*"){
	/*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,
	#page.drawers::-webkit-scrollbar{//scrollbars in chrome and safari
		&,
		&-track-piece{
			background-color:bg1 !important;
		}
		&-corner,
		&-thumb{
			background-color:bg3 !important;
			border-radius:0.4em;
			border:none;
		}
	}
	:root,
	#page.drawers{//actual standardized way, but ofc only Firefox implements it
		scrollbar-width:auto;
		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}
	}
	/*body*/
	:root,body,#page{
		background-color:bg1 !important;
		color-scheme:dark;
		color:txt;
	}
	#page.drawers .main-inner{
		border-radius:crad;
		overflow:visible;
		background-color:bg2;
	}
	#region-main{
		background-color:#0000;//nothing to see here
	}
	/*navbar*/
	.navbar{
		background-color:bg2 !important;
		border-radius:0 0 0.5em 0.5em;
	}
	.navbar.fixed-top{
		border-bottom:solid 1px bg1;
		& .navbar-brand .logo{
			filter:invert(0.86) hue-rotate(180deg);
		}
		& .divider{
			background-color:brd;
			border-left-color:brd !important;
		}
	}
	.primary-navigation .navigation .nav-link{
		color:lnk;
	}
	.navbar-light .navbar-nav{
		& .nav-link{
			color:lnk;
			&:hover,&:focus{
				color:hlnk;
			}
		}
		&:is(.show,.active) > .nav-link,
		& .nav-link:is(.show,.active){
			color:dtxt;
		}
	}
	.moremenu .nav-link{
		&:hover,&:focus{
			background-color:bg3;
		}
		&.active{
			background-color:btn;
			color:dtxt;
			border-bottom:none;
			&:hover,&:focus{
				background-color:hlnk;
			}
		}
	}
	.moremenu .nav-tabs{
		background-color:#0000;
	}
	/*secondary navbar*/
	.secondary-navigation .navigation{
		border-top:none;
		border-bottom:none;
		height:auto;
		background-color:bg3;
		border-radius:barshape(NBS,NBSm);
		overflow:clip;
		padding:0.25em;
		& .nav-tabs .nav-link{
			border-radius:barshape(NBCS,NBCSm);
		}
		&.moremenu .nav-link{
			height:100%;
			padding:.33rem .75rem
			&.active{
				cursor:default;
				pointer-events:none;
			}
		}
	}
	/*dropdown-menu*/
	.dropdown{
		&-menu{
			background-color:bg3;
			color:txt;
		}
		&-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{
				color:txt;
				background-color:bg5 !important;
			}
			&.received{
				color:txt;
				background-color:bg4 !important;
				& .tail{
					border-bottom-color:bg4;
				}
			}
			&.send .tail{
				border-bottom-color:bg5;
			}
			&:is(.send,/.received) .time{
				color:mtxt;
			}
		}
		& .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;
				}
			}
		}
	}
	/* generic color stuff */
	.bg-secondary{
		background-color:bg3 !important;
		/:is(a,button)&:is(:hover,/:focus){
			background-color:bg4 !important;
		}
	}
	/* other stuff */
	.border{
		border-color:brd !important;
	}
	.list-group-item{
		background:bg3;
		border-color:brd;
		&-action{
			color:txt;
			&:hover,&:focus{
				background-color:bg4;
				color:htxt;
			}
		}
	}
	#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;
		}
	}
	/*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);
			}
		}
		&_recentlyaccesseditems{
			& [data-region="recentlyaccesseditems-view-content"]>div>img{
				filter:invert(1) brightness(1.3);
			}
		}
		&_navigation,
		&_settings{
			& .block_tree{
				& .tree_item.branch,
				& ul,
				& p.hasicon{
					padding-left:0;
					margin-left:0;
				}
			}
		}
		& .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*/
	textarea.form-control{
		background-color:bg5 !important;
		border:solid brd 1px;
		border-radius:irad;
	}
	.text-muted{
		color:mtxt !important;
	}
	.text-primary{
		color:btn !important;
	}
	caption{
		//the original style makes them look muted, but that just seems wrong
		color:htxt;
	}
	/*links*/
	a,
	a>span{
		color:lnk
	}
	a:hover,
	a:focus{
		&,
		&>span{
			color:hlnk;
		}
	}
	.aalink,
	a.autolink,
	#page-footer a:not([class]),
	.arrow_link,
	a:not([class]),
	.activityinstance > a{
		&.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;
			}
		}
	}
	/*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*/
	.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;
		color:txt;
		&:hover{
			color:htxt;
		}
		&-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;
			}
		}
		&-success{
			background-color:tru;
			border-color:tru;
			color:htru;
			&:focus,&.focus{
				border-color:htru;
				color:htru;
				background-color:tru;
				box-shadow:none;
			}
			&:hover{
				background-color:htru;
				color:tru;
				border-color:htru;
			}
		}
		&-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;
			}
		}
		&.btn-icon:is(:hover,/:focus){
			background-color:bg3;
		}
		&-link{
			color:lnk;
			&:hover{
				color:hlnk;
			}
		}
		&:disabled,
		&.disabled{
			opacity:1;
			filter:grayscale(0.25) brightness(0.75) contrast(0.75);
		}
	}
	.activity-add,
	.block-add{
		background-color:btn;
		color:dtxt;
		border:none;
		&:hover,&:focus{
			color:dtxt;
			background-color:hbtn;
			text-decoration:none;
		}
	}
	//pagination used in recentlyaccessedcourses on dashboard
	.pagination>.page-item{
		& .page-link{
			background-color:bg4;
			border-color:#0000;
			color:htxt;
			&:focus{
				box-shadow:none;
				z-index:0;
				color:lnk;
			}
			&:hover{
				background-color:bg5;
				border-color:brd;
				color:htxt;
				z-index:3;
			}
		}
		&.active,
		&.disabled{
			& .page-link{
				cursor:default;
				background-color:brd;
				&>span{
					color:txt;
				}
			}
		}
	}
	.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;
		}
	}
	/*drawer handle buttons*/
	.drawer-toggles .drawer-toggler .btn{
		background-color:bg3;
		&:hover{color:txt}
	}
	/*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{
		&>&-inner{
			background-color:bg3;
			color:txt;
			border:solid 1px bg0;
			border-radius:0.25em;
			margin-left:-1px;
		}
		&>.arrow::before{
			border-right-color:bg3;
			filter:drop-shadow(-1px 0 0 bg0);
		}
	}
	/*popovers: the same, but with more complex content and a very annoying arrow*/
	.popover{
		background-color:bg1;
		color:txt;
		border:solid 1px bg4;
		border-radius:irad;
		&-header{
			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;
		}
		& .border-bottom{
			border-bottom-color:bg4 !important;
		}
	}
	.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:bg4;
			}
		}
		//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:bg4;
			}
		}
		//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:bg4;
			}
		}
		//TODO: find out where this is used
		&-right>.arrow,
		&-auto[x-placement^="right"]>.arrow{
			&::after{
				border-right-color:bg1;
			}
			&::before{
				border-right-color:bg4;
			}
		}
	}
	/*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;
	}
	/*sidedrawer*/
	.drawer{
		background-color:bg2;
	}
	.courseindex .courseindex-item{
		&:hover,
		&:focus,
		&:is(:hover,/:focus) .courseindex-link{
			color:txt;
		}
		.courseindex-chevron span,
		.courseindex-link{
			color:txt;
			&:hover{
				color:htxt;
			}
		}
		& .completioninfo.completion_complete{
			color:tru;
		}
		&.pageitem{
			background-color:btn;
			&>.courseindex-link,
			&>.courseindex-chevron span{color:dtxt}
			&:hover,&:focus{
				background-color:hbtn;
				&>.courseindex-link,
				&>.courseindex-chevron span{color:dtxt}
			}
			& .completioninfo{
				color:dtxt;
			}
		}
	}
	/* Activites */
	.activity-item:not(.activityinline){
		border:none;
	}
	.path-mod .activity-header:not(:empty){
		background-color:bg3;
		border-radius:0.5em;
	}
	.path-mod .activity-information .completion-info{
		border-bottom-color:brd;
	}
	/*Activity icon button thingies*/
	.activityiconcontainer{
		background-color:bg3;
		&.content{
			background-color:c0;
			--f:invert(.9);
			--mbm:overlay;
		}
		&.communication{
			background-color:c1;
			--f:invert(.5);
			--mbm:multiply;
		}
		&.collaboration{
			background-color:c3;
			--f:invert(0.4);
			--mbm:multiply;
		}
		&.assessment{
			background-color:c4;
			--f:invert(.85);
			--mbm:overlay;
		}
		&>img:is(.activityicon,/.icon){
			mix-blend-mode:var(--mbm);
			filter:var(--f) !important;
		}
		&.modicon_studentquiz{
			//the original image is kinda bad ngl
			--f:invert(1) hue-rotate(180deg) saturate(1.5) brightness(0.85);
		}
	}
	/*Misc*/
	.otherstudent.highlight{
		outline:none;
		color:htxt;
	}
	.resourcelinkdetails{
		color:txt;
		filter:brightness(0.8);
	}
	#action-menu-toggle-0:hover .usertext{
		color:hlnk !important;//TODO: fix this mess by removing the catch-all text colorator
	}
	.userinitials{
		background-color:txt;
		color:dtxt;
		/#user-menu-toggle:hover &{background-color:htxt}
	}
	if(anon==1){
		.userinitials{
			font-size:0 !important;
			&::after{
				font-size:1rem;
				content:"AN";
			}
			&.size-100::after{
				font-size:1.875rem;
			}
		}
	}
	.mform fieldset{
		border-bottom-color:brd;
	}
	.matchtext{
		background-color:hbtn !important;
		color:bg3 !important;}
	.card{
		border-radius:crad;
		background-color:bg3;
		border:none;
		&-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;
		}
		&-secondary{
			border:solid 1px brd;
			background-color:rgba(brd,0.5);
			color:htxt;
		}
		&>.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;}
	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;}
	#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*/
	.maincalendar{
		& .calendarmonth{
			border-radius:0.5em;
			border-collapse:separate;
			td,th{
				border:solid 1px brd;
				border-left:none;
				border-top:none;
			}
			& :not(thead+tbody)>tr:first-of-type>:is(th,td){
				border-top:solid 1px brd;
				&:first-of-type{
					border-top-left-radius:0.25em;
				}
				&:last-of-type{
					border-top-right-radius:0.25em;
				}
			}
			& tr>:is(th,td):first-of-type{
				border-left:solid 1px brd;
			}
			& tbody>tr:last-of-type>:is(td,th){
				&:first-of-type{
					border-bottom-left-radius:0.25em;
				}
				&:last-of-type{
					border-bottom-right-radius:0.25em;
				}
			}
			& .clickable:hover{
				background-color:bg3;
			}
			& td.dayblank{
				background-color:bg4;
			}
			& th{
				background-color:btn;
				border-color:btn !important;
				&>span{color:dtxt}
			}
			& td.today .day-number-circle{
				background-color:bg3;
				color:txt;
			}
		}
	}
	section:not(#region-main) .block.block_calendar_month .maincalendar .calendartable.calendarmonth td.clickable:not(.today):hover .day-number-circle{
		//wtf
		background-color:bg3;
	}
	.calendar_event_course{
		--c:cal0;
		--cl:lighten(cal0,30);
	}
	.calendar_event_category{
		--c:cal1;
		--cl:lighten(cal1,30);
	}
	.calendar_event_group{
		--c:cal2;
		--cl:lighten(cal2,30);
	}
	.calendar_event_user{
		--c:cal3;
		--cl:lighten(cal3,30);
	}
	.calendar_event_site{
		--c:cal4;
		--cl:lighten(cal4,30);
	}
	.calendar_event_other{
		--c:bg3;
		--cl:lighten(bg3,30);
	}
	.maincalendar .calendarmonth ul li .calendar-circle{
		//misaligned, but whatever
		background-color:var(--c) !important;
		border-color:var(--cl) !important;
		border-width:1px !important;
	}
	.block .calendar_filters li span{
		background-color:var(--c);
		& i{
			color:var(--cl) !important;
		}
	}
	/*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);
	}
	img[src^="https://elearning.tgm.ac.at/theme/image.php/boost"]:is([src$="monologo"],/[src$="i/arrow-left"]){
		filter:invert(0.8);
	}
	img[src^="https://elearning.tgm.ac.at/theme/image.php/boost/block_completion_progress/"][src$="/cross"]{
		filter:invert(1) hue-rotate(180deg) contrast(0.75) saturate(1.5) brightness(0.9);
	}
	/*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;
				}
			}
		}
		&[x-placement="right"],
		&[x-placement="right-start"]{
			& div[data-role="arrow"]::after{
				border-right-color:currentColor;
			}
		}
		& div[data-role="arrow"]::after{
			color:bg3;
		}
		& .modal-dialog .modal-content{
			& .modal-header{
				border-radius:crad crad 0 0;
			}
			& .modal-footer{
				border-radius:0 0 crad crad;
			}
		}
	}
	/*badges*/
	.badge,
	.automatic-completion-conditions .badge,
	.path-mod .automatic-completion-conditions .badge{
		background-color:bg4;
		color:txt;
		padding:0 0.5em;
		border-radius:irad;
		mix-blend-mode:normal;//thanks
		&>i{
			z-index:3;
			position:relative;
		}
		&-info{
			padding:0.25em 0.5em;
		}
		&>strong{
			display:inline-block;
			margin-left:-0.5em;
			padding:0.25em 0.25em 0.25em 0.5em;
			border-radius:irad 0 0 irad;
			z-index:2;
			position:relative;
		}
		&-secondary>strong,
		&>strong{
			background-color:brd;
			color:dtxt;
		}
		&.alert-success{
			background-image:linear-gradient(to right,tru 25%,#0000 25%);
			border:none;
			&>strong{
				background-color:tru;
				color:htru;
			}
			&>i{
				color:htru;
			}
		}
		&.badge-light{
			background-color:bg4 !important;
		}
	}
	/*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.yui3-widget-hd{
			color:txt;//resetting color:initial (fuck you)
		}
	}
	.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;
	}
	/*progress bar time descriptor*/
	//TODO: restyle
	.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;
		}
	}
	/* 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;
		overflow:hidden;
	}
	.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;
		}
	}
	.block-myoverview>.container-fluid.p-0{
		margin-top:1.5em;
	}
	//welcoming heading which unfortunately contains the user's first name
	if(anon){
		#page-header>.w-100>.d-flex.align-items-center>h2.mb-3.mt-3{
			font-size:0;
			&:after{
				content:"Welcome back, Anon! 👋";
				font-size:1.875rem;
			}
		}
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/?(\\?.*)?$"), regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/mod\\/forum\\/discuss\\.php.*") {
	.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;
	}
	.description .course-description-item{
		background-color:bg4;
	}
	/*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 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;
				}
			}
		}
		& button.tiles-top-button{
			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{
				transition:background-color 0.1s ease-in-out,all 0.1s ease-in-out;
				cursor:pointer;
				&:hover{
					transition:transform 0.1s ease-in-out
				}
			}
			& .section .activity:hover{
				background-color:bg3;
			}
			& .tile-bg{
				background-color:bg3;
			}
		}
		& ul.tiles .tile h3{
			color:txt;
		}
		& .tile-icon{
			position:relative;//no idea why this is needed
		}
		& .course-content ul.tiles .tile,
		& li.section:not(#section-0) .course-section-header{
			border-top-color:btn;
			border-top-width:0.25em;
			box-shadow:0.1em 0.2em 0.5em 0 bg0;
			&:hover{
				border-top-color:hbtn;
			}
		}
		/*activites in format tiles*/
		& li.subtile.activity{
			background-color:bg3;
			border:none;
			border-top:solid 0.25em;
			cursor:pointer;
			background-size:25% auto;
			border-radius:crad;
			&.page,
			&.url,
			&.resource{
				border-top-color:c0;
			}
			&.modsecurestreaming,
			&.resource.mp4,
			&.url.video{
				border-top-color:c1;
			}
			&.folder{
				border-top-color:c2;
			}
			&.resource.pdf{
				border-top-color:c3;
			}
			&.assign{
				border-top-color:c4;
			}
			& .activitytype{
				color:mtxt;
			}
			& a:not(.dropdown-item),
			/^[0] #page-content li.subtile.activity a:not(.dropdown-item){
				color:txt;
			}
			& .activitytitle a{
				background:linear-gradient(to bottom,bg4 85%,#0000);
			}
			&:hover{
				background-size:25% auto;
			}
		}
		/* 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;
				}
				&:not(.dimmed){
					background-color:bg3;
					&:hover{
						background-color:bg4;
						& .icon{
							filter:brightness(1.2);
						}
					}
				}
				&.dimmed:hover{
					background-color:#0000;
				}
				&:hover{
					transform:none;
					text-decoration:none;
				}
				& .icon{
					display:contents;
				}
			}
		}
		& .editor_atto_content_wrap{
			& h1,& h2,& h3,& h4{
				border-left-color:tru;
			}
		}
		/*completion checkboxes*/
		& .completioncheckbox{
			display:flex;
			border-color:brd;
			justify-content:center;
			align-items:center;
			transition:none;
			color:txt;
			& .icon{//why
				margin:0;
				width:auto !important;
				height:auto;
				color:inherit !important;
			}
			&.complete{
				background-color:tru;
				border-color:tru;
				color:htru;
			}
		}
		& li.activity button[data-action="change-completion-status"]:hover{
			border-color:brd;
			background-color:brd;
			transition:none;
			color:htxt !important;
		}
		& li.activity button[data-action="change-completion-status"].complete:hover{
			border-color:htru;
			background-color:htru;
			color:tru !important;
		}
		/*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;
		}
	}
	/*assignment wrappers*/
	.activity-wrapper.activity>.activity-item:not(.activityinline){
		background-color:bg3;
		border-radius:crad;
	}
}
@-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\\/mod\\/organizer\\/view\\.php.*") {
	#region-main .profile_tree>.node_category{
		background-color:bg3;
		border-radius:crad;}
	#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;
				border-left:none;
			}
			&:last-child{
				border-right:none;
			}
		}
		&>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{
				border-bottom:none;
				&: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.*") {
	.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;
			&.active{
				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{
		& :is(a,span).qnbutton{
			color:txt !important;
			background-color:bg4;
			&:hover{
				text-decoration:none;
			}
			&:focus-visible,
			&:focus,
			&:active{
				text-decoration:none;
				outline:solid 1px brd;
				box-shadow:none;
			}
			&.thispage{
				&>.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;
			}
		}
		& a.qnbutton{
			transition:transform 0.1s;
			&:hover:not(.thispage){
				transform:scale(1.2);
			}
		}
		& .qnbuttons:not(.allquestionsononepage){
			.qnbutton.thispage{
				cursor:default;
			}
		}
		& .allquestionsononepage{
			& :is(span,a).qnbutton.thispage{
				&>.thispageholder{
					outline:none;
					border:none;
				}
			}
			& a.qnbutton.thispage{
				cursor:pointer;
				&:hover{
					transform:scale(1.2);
				}
			}
		}
	}
	.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;
		}
	}
	//highlighted row in student rankings
	.path-mod-studentquiz .mod-studentquiz-summary-highlight{
		background-color:bg3;
	}
}
@-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;
		}
	}
	.path-mod-studentquiz span.stat{
		//why do I need to do this?
		display:flex;
		line-height:0;
		align-items:center;
		&.approvals,
		&.last-attempt-correct{
			background-color:tru;
			color:htru;
		}
		&.disapprovals,
		&.last-attempt-incorrect{
			background-color:fals;
			color:hfals;
		}
		&.changed,
		&.never-answered{
			background-color:idk;
			color:hidk;
		}
	}
}
@-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);
	}
}
@-moz-document regexp("https?:\\/\\/elearning\\.tgm\\.ac\\.at\\/login\\/index\\.php.*"){
	.pagelayout-login #page{
		background-image:none;
	}
	.login-container{
		background-color:bg3;
		border-radius:0.5em;
		& .login-divider{
			border-top-color:brd;
		}
		& .divider{
			background-color:brd;
			border-left-color:brd !important;
		}
	}
}

Reviews

No reviews yet.