Skip to content

Dark like MS Teams (TOPdesk Operator Recoloring) by calli23

Details

Authorcalli23

LicenseMIT

Categorytopdesk.net

Created

Updated

Size250 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Override the colors of the TOPdesk operator section, for accessibility purposes.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==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...

Reviews

No reviews yet.