Dark like MS Teams (TOPdesk Operator Recoloring) by calli23

/* ==UserStyle==
@name           Default Dark (TOPdesk Operator Recoloring)
@namespace      github.com/topdesk/topdesk-operator-recoloring
@version        2.13.1
@description    Override the colors of the TOPdesk operator section, for accessibility purposes.
@homepageURL    https://github.com/TOPdesk/operator-recoloring
@supportURL     https://github.com/TOPdesk/operator-recoloring/issues
@license        MIT
@preprocessor   default

@var color background "Background" #1f1f1f
@var text background-filter "Background filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(71%)
@var color on-background "On background" #d6d6d6
@var text on-background-filter "On background filter" brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(178deg) brightness(129%) contrast(78%)
@var color selection "Selection" rgba(252, 252, 252, 0.99)
@var color on-selection "On selection" #1f1f1f
@var color surface "Surface" #2e2e2e
@var text surface-filter "Surface filter" brightness(0) saturate(100%) invert(19%) sepia(0%) saturate(1%) hue-rotate(180deg) brightness(102%) contrast(82%)
@var color on-surface "On surface" #eeeeee
@var text on-surface-filter "On surface filter" brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(178deg) brightness(129%) contrast(78%)
@var color disabled "Disabled" #545454
@var text disabled-filter "Disabled filter" brightness(0) saturate(100%) invert(19%) sepia(0%) saturate(1%) hue-rotate(180deg) brightness(102%) contrast(62%)
@var color on-disabled "On disabled" #bdbbbb
@var text on-disabled-filter "On disabled filter" brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(407%) hue-rotate(172deg) brightness(89%) contrast(69%)
@var color primary "Primary" #7f85f5 
@var text primary-filter "Primary filter" brightness(0) saturate(100%) invert(52%) sepia(29%) saturate(2819%) hue-rotate(211deg) brightness(101%) contrast(92%)
@var color primary-muted "Primary muted" #5b5fc7
@var text primary-muted-filter "Primary muted filter" brightness(0) saturate(100%) invert(66%) sepia(52%) saturate(3051%) hue-rotate(7deg) brightness(95%) contrast(69%)
@var color on-primary "On primary" #eee
@var text on-primary-filter "On primary filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(71%)
@var color error "Error" #e37d80
@var text error-filter "Error filter" invert(59%) sepia(54%) saturate(783%) hue-rotate(309deg) brightness(99%) contrast(80%)
@var color on-error "On error" #1f1f1f
@var text on-error-filter "On error filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(71%)

@var color on-background-border "Border" #3d3d3d
@var color on-surface-border "Surface Border" #1b1a19
@var color on-surface-hover "Surface Hover" #3b3a39
==/UserStyle== */
@-moz-document regexp("http(s)?://.*/tas/(secure|public)/login/form.*"), regexp("http(s)?://.*/tas/(secure|public)/login/saml"), regexp("http(s)?://.*/tas/(secure|public)/logout"), regexp("http(s)?://.*/tas/admin/.*") {
/*
 * Public, Secure, and Admin login pages
 */
#background {
	background: var(--background);
}

#content-container {
	background: var(--surface);
}

.pagetitle,
.message-warning,
.message-info,
.loginlabel,
#checkboxlabel,
.label,
a#logo-link {
	color: var(--on-surface);
}

span.message-warning {
	color: var(--error);
}

span.message-warning::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.1 4h2v2h-2zm0 3h2v4h-2zm1-6c-3.9 0-7 2.9-7 6.5 0 1.2.4 2.4 1 3.4l-1 3.1 3.4-.9c1 .6 2.3.9 3.6.9 3.9 0 7-2.9 7-6.5S12 1 8.1 1Z'/%3E%3C/svg%3E");

	width: 1.5em;
	height: 1.5em;

	display: inline-block;
	margin-right: 1em;
	vertical-align: middle;

	filter: var(--error-filter);
}

img.message-warning {
	display: none;
}

a.label:hover,
a#logo-link:hover {
	color: var(--primary);
}

.logintextbox {
	background: var(--background);
	color: var(--on-background);
	border-color: var(--on-background-border);
}

.remembercheckbox input[type='checkbox'] {
	background: var(--background);
	border-color: var(--on-background-border);
}

.remembercheckbox input[type='checkbox']:checked {
	background: var(--primary);
	border-color: var(--primary);
}

.remembercheckbox input[type='checkbox']::after {
	border-color: var(--on-primary);
}

.remembercheckbox input[type='checkbox']:focus {
	outline: 2px solid var(--on-surface);
	outline-offset: 2px;
}

input[type='submit']#login,
a#login-button,
a.idpselect {
	background: var(--primary);
	color: var(--on-primary);
	border: 1px solid var(--primary);
}

input[type='submit']#login:hover,
a#login-button:hover,
a.idpselect:hover {
	background: var(--primary-muted);
}

input[type='submit']#login:active,
a#login-button:active,
a.idpselect:active {
	background: var(--on-primary);
	color: var(--primary);
	border-color: var(--primary);
}

input:focus-visible,
a.label:focus-visible,
a#logo-link:focus-visible,
a.idpselect:focus-visible {
	outline: 2px solid var(--on-surface);
	outline-offset: 2px;
}

div.button {
	/* Chosen IDP while waiting for SAML redirect */
	background: var(--background);
	border: 1px solid var(--primary);
}

}
@-moz-document regexp("http(s)?://.*/passwordforgottenrequest.*") {
/*
 * Password Forgotten page
 */

/* The url is a bit unspecific, so adding a check for body.realm-ROOT to not unintentionally affect other sites */
body.realm-ROOT #background {
	background: var(--background);
}

body.realm-ROOT #content-container {
	background: var(--surface);
}

body.realm-ROOT :is(.pagetitle, .subtitle, .loginlabel, .label) {
	color: var(--on-surface);
}

body.realm-ROOT a.label:hover {
	color: var(--primary);
}

body.realm-ROOT :is(input:focus-visible, a.label:focus-visible, a#logo-link:focus-visible) {
	outline: 2px solid var(--on-surface);
	outline-offset: 2px;
}

body.realm-ROOT .logintextbox {
	background: var(--background);
	color: var(--on-background);
	border-color: var(--on-background-border);
}

body.realm-ROOT input[type='submit']#login {
	background: var(--primary);
	color: var(--on-primary);
	border: 1px solid var(--primary);
}

body.realm-ROOT input[type='submit']#login:hover {
	background: var(--primary-muted);
}

body.realm-ROOT input[type='submit']#login:active {
	background: var(--on-primary);
	color: var(--primary);
	border-color: var(--primary);
}

}
@-moz-document regexp("http(s)?://.*/tas/secure/mango/.*"), regexp("http(s)?://.*/services/workflows-v2.*"), regexp("http(s)?://.*/tas/secure/[^assetmgmt].*?action=.*"), regexp("http(s)?://.*/tas/secure/suggestions/.*"), regexp("http(s)?://.*/tas/secure/homescreen-html-widgets/.*"), regexp("http(s)?://.*/tas/secure/shareandsubscribe/.*"), regexp("http(s)?://.*/tas/secure/emaileditor/.*") {
/*
 * Button
 */

/* Default button */
[mtype='button']:not([guielement='hyperlink']),
[guielement='toolbar_button'],
body.popup .divpopupcontainer .divpopupclientarea button,
.suggestionsWidget .suggestionsWidget-toggleButton,
.suggestionsWidget .suggestionsWidget-newKIButton,
.suggestionsWidget .help-button,
.suggestionsWidget .suggestionsWidget-intro .intro-button,
body[cardType='naturalselection'] .button,
div#checklist .button {
	--text-color: var(--on-background);
	--filter: var(--on-background-filter);

	background: var(--background);
	border-color: var(--on-background-border);
	color: var(--text-color);
}
[guielement='toolbar_button'] > [guielement='toolbar_button_label'] {
	color: var(--text-color);
}
[guielement='toolbar_button'] > [guielement='icon'],
[guielement='toolbar_button'] > [guielement='icon-button'] {
	filter: var(--filter);
}

[mtype='button']:not([guielement='hyperlink']):hover,
[guielement='toolbar_button']:hover,
[guielement='toolbar_button'][mstyles~='toolbar_menu_opened'],
body.popup .divpopupcontainer .divpopupclientarea button:hover,
.suggestionsWidget .suggestionsWidget-toggleButton:hover,
.suggestionsWidget .suggestionsWidget-newKIButton:hover,
.suggestionsWidget .help-button:hover,
.suggestionsWidget .suggestionsWidget-intro .intro-button:hover,
body[cardType='naturalselection'] .button:hover,
div#checklist .button:hover {
	background: var(--on-background);
	border-color: var(--on-background-border);

	--text-color: var(--background);
	--filter: var(--background-filter);
}

[mtype='button']:not([guielement='hyperlink']):active,
[guielement='toolbar_button']:active,
body.popup .divpopupcontainer .divpopupclientarea button:active,
.suggestionsWidget .suggestionsWidget-toggleButton:active,
.suggestionsWidget .suggestionsWidget-newKIButton:active,
.suggestionsWidget .help-button:active,
.suggestionsWidget .suggestionsWidget-intro .intro-button:active,
body[cardType='naturalselection'] .button:active,
div#checklist .button:active {
	background: var(--surface);
	border-color: var(--on-surface-border);

	--text-color: var(--on-surface);
	--filter: var(--on-surface-filter);
}

/* Preferred button / Blue (toolbar) button / Bookmark button*/
[mtype='button'][guielement='preferred_button'],
[mtype='button'][mstyles~='default-button'],
[guielement='toolbar_button'][mstyles~='blue'],
[guielement='toolbar_button'][mstyles~='orange'],
body.popup .divpopupcontainer .divpopupclientarea button.primary,
.suggestionsWidget .suggestionsWidget-searchButton,
div#checklist .button.is-primary {
	background: var(--primary);
	border-color: var(--primary);

	--text-color: var(--on-primary);
	--filter: var(--on-primary-filter);
}

[mtype='button'][guielement='preferred_button']:hover,
[mtype='button'][mstyles~='default-button']:hover,
[guielement='toolbar_button'][mstyles~='blue']:hover,
[guielement='toolbar_button'][mstyles~='orange']:hover,
body.popup .divpopupcontainer .divpopupclientarea button.primary:hover,
.suggestionsWidget .suggestionsWidget-searchButton:hover,
div#checklist .button.is-primary:hover {
	background: var(--primary-muted);
	border-color: var(--primary-m...