Moj TVZ Dark by karl255

Imported and mirrored from https://raw.githubusercontent.com/Karl255/UserCSS-Styles/master/Moj%20TVZ%20Dark/Moj%20TVZ%20Dark.user.css
Details

Authorkarl255
LicenseMIT
Categorytvz
Created2 years, 2 months ago
Updated1 month, 3 weeks ago
Size45 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Tamna tema za moj.tvz.hr i Grader sustav s mogućnostima za prilagođavanje.
Notes

Za korištenje potrebna je jedna od ovih proširenja:
Stylus - preporučeno (Firefox, Chrome ili Edge, Opera)
xStyle (Firefox ili Chrome)
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Moj TVZ Dark
@author       Karl_255 (Karlo Bistrički)
@namespace    github.com/Karl255
@version      3.0.4
@description  Tamna tema za moj.tvz.hr i Grader sustav s mogućnostima za prilagođavanje
@homepageURL  https://github.com/Karl255/UserCSS-Styles
@supportURL   https://github.com/Karl255/UserCSS-Styles/issues
@license      MIT
@preprocessor less

@var color  bg-color-base     "Temeljna pozadinska boja"                                          hsl(210, 5%, 5%)
@var number bg-l-increment    "Korak posvijetljenja pozadinske boje (za \"slojeve\" sučelja) (%)" 5%
@var number btn-hover-ligthen "Korak posvijetljenja za gumbe (%)"                                 -5%

@var color  primary-color     "\"Primarna\" boja"    #337ab7
@var color  info-color        "Boja \"informacija\"" #0b3c85
@var color  success-color     "Boja \"uspjeh\""      #117A11
@var color  warning-color     "Boja \"upozorenje\""  #8F6F0E
@var color  danger-color      "Boja \"opasnost\""    #900F0F

@var color  text-color        "Boja glasvnog teksta"                     whitesmoke
@var color  hc-text-color     "Boja teksta kod obojanih pozadina"        white
@var color  subtext-color     "Boja podteksta (pomalo izblijeđen tekst)" #cccccc
@var color  link-color        "Boja poveznica"                           #60b1f7

@var checkbox hide-profile-picture "Sakrij profilnu sliku na početnoj strani" 0
@var checkbox show-credits "Prikaži creditse na dnu stranica" 1

@var text dummy-grader-section "--- Postavke samo za grader sustav ---" ""

@var checkbox grader-whole-task   "Automatski prikaži cijeli tekst zadatka" 1
@var select   grader-whole-in-out "Veličina okvira za ulaz i izlaz programa" {
	"Mala (Grader default)": "small",
	"Srednja*":              "medium",
	"Velika":                "large"
}
@var select   grader-code-block-size "Veličina okvira za kod" {
	"Mala (350px, Grader default)": "small",
	"Srednja (600px)*":             "medium",
	"Velika (900px)":               "large",
	"Prikaži sve":                  "all"
}

@var checkbox experimental-lms-theme "Eksperimentalna tamna tema za LMS" 0

==/UserStyle== */

@ad-text: "Moj TVZ Dark theme by Karlo Bistrički (https://userstyles.world/style/3078/moj-tvz-dark)";

@-moz-document domain("moj.tvz.hr") {
	/*** reset ***/
	
	html {
		height: 100%;
	}
	
	body {
		min-height: 100%;
	}
	
	/*** Bootstrap themeing ***/
	
	:root {
		color-scheme: dark;
		--bs-body-color: #dee2e6;
		--bs-body-color-rgb: 222,226,230;
		--bs-body-bg: #212529;
		--bs-body-bg-rgb: 33,37,41;
		--bs-emphasis-color: #fff;
		--bs-emphasis-color-rgb: 255,255,255;
		--bs-secondary-color: rgba(222, 226, 230, 0.75);
		--bs-secondary-color-rgb: 222,226,230;
		--bs-secondary-bg: #343a40;
		--bs-secondary-bg-rgb: 52,58,64;
		--bs-tertiary-color: rgba(222, 226, 230, 0.5);
		--bs-tertiary-color-rgb: 222,226,230;
		--bs-tertiary-bg: #2b3035;
		--bs-tertiary-bg-rgb: 43,48,53;
		--bs-primary-text-emphasis: #6ea8fe;
		--bs-secondary-text-emphasis: #a7acb1;
		--bs-success-text-emphasis: #75b798;
		--bs-info-text-emphasis: #6edff6;
		--bs-warning-text-emphasis: #ffda6a;
		--bs-danger-text-emphasis: #ea868f;
		--bs-light-text-emphasis: #f8f9fa;
		--bs-dark-text-emphasis: #dee2e6;
		--bs-primary-bg-subtle: #031633;
		--bs-secondary-bg-subtle: #161719;
		--bs-success-bg-subtle: #051b11;
		--bs-info-bg-subtle: #032830;
		--bs-warning-bg-subtle: #332701;
		--bs-danger-bg-subtle: #2c0b0e;
		--bs-light-bg-subtle: #343a40;
		--bs-dark-bg-subtle: #1a1d20;
		--bs-primary-border-subtle: #084298;
		--bs-secondary-border-subtle: #41464b;
		--bs-success-border-subtle: #0f5132;
		--bs-info-border-subtle: #087990;
		--bs-warning-border-subtle: #997404;
		--bs-danger-border-subtle: #842029;
		--bs-light-border-subtle: #495057;
		--bs-dark-border-subtle: #343a40;
		--bs-heading-color: inherit;
		--bs-link-color: #6ea8fe;
		--bs-link-hover-color: #8bb9fe;
		--bs-link-color-rgb: 110,168,254;
		--bs-link-hover-color-rgb: 139,185,254;
		--bs-code-color: #e685b5;
		--bs-highlight-color: #dee2e6;
		--bs-highlight-bg: #664d03;
		--bs-border-color: #495057;
		--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
		--bs-form-valid-color: #75b798;
		--bs-form-valid-border-color: #75b798;
		--bs-form-invalid-color: #ea868f;
		--bs-form-invalid-border-color: #ea868f;
	}

	/*** broken loader ***/
	
	.pace .pace-progress::before {
		width: unset;
		aspect-ratio: 1 / 1;

		display: grid;
		place-items: center;
	}

	.pace, // remove once it works properly
	.pace:has([data-progress-text="99%"]) {
		display: none;
	}
	
	/*** mojtvz.css overrides ***/
	
	.danger-mojtvz {
		background-color: var(--bs-card-bg);
	}
	
	.btn-mojtvzboja {
		//color: #ffffff;
		//background-color: #00447c;
		//border-color: #130269;
	}
	
	.btn-mojtvzboja:hover,
	.btn-mojtvzboja:focus,
	.btn-mojtvzboja:active,
	.btn-mojtvzboja.active,
	.open .dropdown-toggle.btn-mojtvzboja {
		//color: #ffffff;
		//background-color: #5b5754;
		//border-color: #130269;
	}
	
	.btn-mojtvzboja:active,
	.btn-mojtvzboja.active,
	.open .dropdown-toggle.btn-mojtvzboja {
		//background-image: none;
	}
	
	.btn-mojtvzboja.disabled,
	.btn-mojtvzboja[disabled],
	fieldset[disabled] .btn-mojtvzboja,
	.btn-mojtvzboja.disabled:hover,
	.btn-mojtvzboja[disabled]:hover,
	fieldset[disabled] .btn-mojtvzboja:hover,
	.btn-mojtvzboja.disabled:focus,
	.btn-mojtvzboja[disabled]:focus,
	fieldset[disabled] .btn-mojtvzboja:focus,
	.btn-mojtvzboja.disabled:active,
	.btn-mojtvzboja[disabled]:active,
	fieldset[disabled] .btn-mojtvzboja:active,
	.btn-mojtvzboja.disabled.active,
	.btn-mojtvzboja[disabled].active,
	fieldset[disabled] .btn-mojtvzboja.active {
		//background-color: #00447c;
		//border-color: #130269;
	}
	
	.btn-mojtvzboja .badge {
		//color: #00447c;
		//background-color: #ffffff;
	}
	
	.mojtvzlink {
		//position: relative;
		color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); /* reset to BS */
		//text-decoration: none;
	}
	
	.mojtvzlink:hover {
		color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)); /* reset to BS */
	}
	
	.mojtvzlink::after {
		//position: absolute;
		//bottom: 0;
		//left: 0;
		//right: 0;
		//margin: 0 auto;
		//content: "";
		background-color: currentColor;
		//width: 0%;
		//height: 2px;
		//transition: all 0.5s;
	}
	.mojtvzlink:hover::after {
		//width: 100%;
	}
	
	.mojtvzdno {
		//margin-bottom: 1px;
		//height: 30px;
		//line-height: 30px;
		//padding: 0px 15px;
	}
	
	/*** datatables fixes ***/
	
	.dataTables_wrapper .dataTables_length {
		color: unset;
	}
	
	button.dt-button,
	div.dt-button,
	a.dt-button,
	input.dt-button,
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_processing,
	.dataTables_wrapper .dataTables_paginate
	{
		color: unset;
	}
	
	.dataTables_wrapper .dataTables_paginate .paginate_button {
		color: inherit !important;
		
		&.current,
		&.current:hover {
			color: inherit !important;
			background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
			border: 1px solid rgba(0, 0, 0, 0.3);
		}
	}
	
	.dataTables_wrapper .dataTables_length select {
		background-color: none;
	}
	
	/*** (dark) theme fixes ***/
	
	.border-white {
		border-color: var(--bs-border-color-translucent) !important;
	}
	
	.card.border-warning,
	.card.border-light {
		border-color: var(--bs-card-border-color) !important;
	}
	
	/*** other fixes ***/
		
	body > .container-fluid > .row {
		min-height: 100vh;
		
		display: flex;
		flex-direction: column;
		
		> .sadrzaj {
			flex-grow: 1;
		}
	}
	
	body.text-center {
		text-align: unset !important;
	}
	
	.sadrzaj {
		margin-block: 2rem;
	}
	
	.sadrzaj + .alert {
		margin-bottom: 0;
	}
	
	.containter > .card + .card {
		margin-top: 1rem;
	}
	
	// Bootstrap 5 apparently removed panels?
	.panel {
		padding-block: 1rem;
	}
	
	[style*="color: #000000"],
	[style*="color: black"],
	[style*="color: #333333"],
	[style*="color: windowtext"] /* TIL */ {
		color: inherit !important;
	}
	
	form[name="formac"] > .card + .card {
		margin-top: 2rem;
	}
	
	/*** ad ***/
	.sadrzaj + * h6 {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		
		&::after {
			content: @ad-text;
		}
	}
}

@-moz-document url("https://moj.tvz.hr/"), regexp("https://moj\\.tvz\\.hr/studij[A-Za-z0-9]*\\?.*"), regexp("https://moj\\.tvz\\.hr/studij[A-Za-z0-9]*/prikaz/mojtvz\\?.*"),
regexp("https://moj\\.tvz\\.hr/.*link=prikaz/.*") {
	// welcome page
	& when (@hide-profile-picture = 1) {
		.sadrzaj > .row > :first-child > center > :first-child [class*="col"]:has(img) {
			display: none;
			
			+ * {
				margin-inline: auto;
			}
		}
	}
}

// TODO: remove unnecessary styling
@-moz-document domain("grader.tvz.hr") {
	@link-hover-color: desaturate(darken(@link-color, 25%), 25%);

	* {
		box-shadow: none !important;
		text-shadow: none !important;
		scrollbar-color: lighten(@bg-color-base, 20%) @bg-color-base;
	}

	:root {
		color: @text-color;

		@border-color-base: lighten(@bg-color-base, @bg-l-increment);
		--bg-100: @bg-color-base;                               // unused on moj.tvz.hr and Grader
		--bg-200: lighten(@bg-color-base, @bg-l-increment);     // bottom/base panels
		--bg-300: lighten(@bg-color-base, 2 * @bg-l-increment); // hovered elements, some elements
		--bg-400: lighten(@bg-color-base, 3 * @bg-l-increment); // navbar, modal, most elements
		--border-100: @border-color-base;
		--border-200: lighten(@border-color-base, @bg-l-increment);
		--border-300: lighten(@border-color-base, 2 * @bg-l-increment);
		--border-400: lighten(@border-color-base, 3 * @bg-l-increment);
	}

	/* login page only */
	body > .main-section {
		color: inherit;

		display: flex;
		flex-direction: column;

		// proper centering while keeping the background "banner" stretched
		> .container-fluid {
			flex-grow: 1;

			margin: 0;
			padding: 0;
			height: unset !important;
			overflow: clip;

			> * {
				display: grid;

		...
Reviews

No reviews yet.