e-Dnevnik Material Dark by karl255

/* ==UserStyle==
@name         e-Dnevnik Material Dark
@author       Karl_255 (Karlo Bistrički)
@namespace    github.com/Karl255
@version      1.1.3
@description  Material UI tamna tema za e-Dnevnik (A Material dark theme for e-Dnevnik)
@homepageURL  https://github.com/Karl255/UserCSS-Styles
@supportURL   https://github.com/Karl255/UserCSS-Styles/issues
@license      MIT
@preprocessor less

@var color accentColor "Accent color" #1D4E73
==/UserStyle== */

@-moz-document domain("ocjene.skole.hr") {
	:root {
		--material-root-surface: #121212;
		--surface-color: #ffffff0b;
		--surface-color-light: #ffffff21;
		--surface-color-floating: #262626; /* for elements floating above other elements, such as dropdowns */
		--accent-color: @accentColor;
		--accent-color-light: lighten(@accentColor, 10%);
		--accent-color-transparent: fade(@accentColor, 50%);
		--text-title: #ffffff;
		--text-normal: #cacaca;
		--text-minor: #7e7e7e;
	}
	
	/* scroll fix */
	html {
		overflow-y: auto;
	}
	
	body {
		overflow-y: unset;
	}
	
	html,
	body {
		min-height: 100vh;
		background: var(--material-root-surface);
	}
	
	/* title text */
	html, /* the text color for titles isn't set anywhere, eg. it inherited it from html (well actually from nowhere, but whatever) */
	.flex-table.header,
	.school-name .schoolyear span:nth-child(2) {
		color: var(--text-title);
	}
	
	/* normal text */
	p,
	a,
	label,
	input,
	.footer,
	.section-text,
	.flex-table {
		color: var(--text-normal);
	}
	
	/* minor text */
	.login-body-box-smallprint > span,
	.class-alerts ul li,
	.export-menu a.disabled {
		color: var(--text-minor);
	}
	
	/* logo text */
	.logo,
	.logo-text,
	.logo-link {
		color: #A9ABB0;
	}
	
	/* removing these useless constraint which prevent the webite from functioning properly */
	#page-wrapper {
		max-height: unset;
		min-height: unset;
	}
	
	/* material ui layers (should probably use hard-coded values as it is suggested in the guidelines) */
	#page-wrapper,
	.login-body-box,
	.class-menu-vertical .class-info {
		background: var(--surface-color) !important;
	}
	
	/* these elements don't need a border anyomre */
	input[type="text"],
	input[type="password"],
	.section-text {
		border: none;
		background: var(--surface-color);
	}
	
	/* currently selected tab */
	#class-administration-menu .selected {
		position: relative;
		box-shadow: unset;
		
		a {
			color: var(--accent-color-light);
		}
		
		/* replacing the inset shadow (stupid solution tbh) with an ::after */
		&::after {
			content: " ";
			position: absolute;
			bottom: 0;
			background: var(--accent-color-light);
			width: 100%;
			height: 2px;
			transform: translatex(-5px);
		}
	}
	
	/* negative grade stuff, good that I have them, allows me to test it */
	.table-container .flex-table.row.negative {
		background-color: #ff00002c;
		
		.flex-row {
			background-color: unset;
			-webkit-box-shadow: unset;
			box-shadow: unset;
		}
	}
	
	/* elements inside the header of the main content in most pages */
	.content-menu {
		background: var(--accent-color);
		
		div {
			border-color: var(--text-normal);
			background: none;
		}
	}
	
	/* shadow removals in various places */
	#page-wrapper,
	.login-body-box,
	.content-menu,
	.dropdown-content {
		box-shadow: unset;
	}
	
	/* replacing shadows with borders in various places (shadows were barely visible so I had to do that) */
	#class-administration-menu,
	.content-wrapper,
	.dropdown-menu-header {
		box-shadow: unset;
		border: 1px solid var(--surface-color)
	}
	
	
	/* classes list horizontal scrollbar */
	.classes {
		flex-grow: 1;
		padding-left: 0; /* having that padding there is just stupid so I removed it */
		/* styling it using the upcoming standard (firefox only atm) */
		scrollbar-width: thin;
		scrollbar-color: var(--surface-color-light) var(--surface-color);
		
		/* old webkit-based browser styling (chrome, new edge, opera, safari), eventually will be deprecated */
		&::-webkit-scrollbar {
			width: 8px;
		}
		
		&::-webkit-scrollbar-track {
			background: var(--surface-color);
		}
		
		&::-webkit-scrollbar-thumb {
			background: var(--surface-color-light);
		}
		
		/* the crappy arrow buttons are replaced with a scrollbar */
		.list-arrow {
			display: none;
		}
	}
	
	.student-list .class-menu-vertical {
		.class,
		.class-info {
			box-shadow: unset;
			
			.class-alerts {
				border-color: var(--surface-color)
			}
		}
		
		.class-menu {
			border-color: var(--surface-color);
			
			ul li,
			ul li:last-of-type {
				border-color: var(--surface-color);
			}
			
			/* fix for classes cards (bottom element clips over the rounded corners of parent) */
			.overall-grade {
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
			}
		}
		
		.show li.overall-grade {
			background: var(--surface-color);
			color: var(--text-normal);
		}
	}
	
	/* text-colored border (separators) in subject list */
	.list li {
		border-color: var(--surface-color) !important;
		
		span:first-of-type {
			border-color: currentcolor;
		}
	}
	
	/* table restyle */
	.flex-table {
		border-color: var(--surface-color) !important;
		
		&.header {
			background: none;
			
			&.first {
				background: var(--accent-color);
			}
		}
	}
	
	.flex-row {
		border-color: var(--surface-color);
		
		/* adding rounded corners to the bottom of tables */
		&.row:last-child {
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
	}
	
	
	/* dropdown menu in the content */
	.dropdown-menu-wrapper {
		ul {
			box-shadow: unset;
			
			li a {
				background: none;
				border-color: var(--surface-color);
			}
		}
		
		.dropdown-content {
			background: var(--surface-color-floating);
			border: 1px solid var(--surface-color);
			border-top: none;
			border-bottom: none;
			/* because box-sizing is content-box, the dropdown-content is the right width, but shifted 1px to the right */
			transform: translatex(-1px);
			
			.selected {
				background: var(--accent-color-transparent);
				font-weight: bold;
			}
		}
	}
	
	/* dropdown menu in the top right (home page, log out etc.) */
	.menu-wrapper {
		.dropdown-menu-header {
			background: var(--surface-color-floating);
			
			li {
				border-color: var(--surface-color);
			}
		}
	}
}