/* ==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
@updateURL https://raw.githubusercontent.com/Karl255/UserCSS-Styles/master/e-Dnevnik%20Material%20Dark/e-Dnevnik%20Material%20Dark.user.css
@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);
}
}
}
}