From 0c5b790a448fae13e568678d9273f5570a13fde0 Mon Sep 17 00:00:00 2001 From: joppekroon Date: Wed, 29 May 2024 14:31:17 +0000 Subject: [PATCH] deploy: c986b3773f3e2253c4787b4165534c877b65b2bd --- docs/index.html | 2 +- ...k-operator-recoloring.cobalt_blue.user.css | 9461 +++++++++++++++++ ...-operator-recoloring.default_dark.user.css | 9461 +++++++++++++++++ ...sk-operator-recoloring.soft_green.user.css | 9461 +++++++++++++++++ .../topdesk-operator-recoloring.user.css | 9461 +++++++++++++++++ 5 files changed, 37845 insertions(+), 1 deletion(-) create mode 100644 docs/themes/topdesk-operator-recoloring.cobalt_blue.user.css create mode 100644 docs/themes/topdesk-operator-recoloring.default_dark.user.css create mode 100644 docs/themes/topdesk-operator-recoloring.soft_green.user.css create mode 100644 docs/themes/topdesk-operator-recoloring.user.css diff --git a/docs/index.html b/docs/index.html index 97ee0ac..cafc89c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -TOPdesk Operator Recoloring

Version: 2.14.5

TOPdesk Operator Recoloring

TOPdesk like you've never seen before

The Goal

If you are a TOPdesk operator that has trouble working with TOPdesk due to it's white and blue color scheme, the TOPdesk Operator Recoloring project can help by adjusting the colors of TOPdesk to your needs.

There are plenty of things in TOPdesk of which the color can't be changed like this. For example the circular context menu buttons on fields in most cards won't change. However, most things can be changed, so that an operator with dyslexia, contrast (in)sensitivity, or color blindness can work with TOPdesk.

Install Stylus

The Stylus browser extension is needed by the TOPdesk Operator Recoloring to override the TOPdesk styling. Stylus is available for Chrome, Firefox, and Edge.

Install Stylus on Chrome

The chrome web store page for Stylus.

Open the Chrome Web Store page for Stylus with Chrome.

The Add to Chrome button.

Click the Add to Chrome button near the top of the page.

The Chrome permission popup which warns that the Stylus extension will be able to 'Read and change all your data on all websites'.

A permission confirmation popup will appear, choose Add extension.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus has been added to Chrome'.

The Stylus extension button will now appear in Chrome's extension bar.

Install Stylus on Firefox

The Firefox add-on page for Stylus.

Open the Firefox add-on page for Stylus with Firefox.

The Add to Firefox button.

Click the Add to Firefox button near the top of the page.

The Firefox permission popup which warns that the Stylus extension will be able to 'Access your data for all websites', 'Access browser tabs', and 'Access browser activity during navigation'.

A permission confirmation popup will appear, choose Add.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus was added'.

The Stylus extension button will now appear in Firefox's extension bar.

Install Stylus on Edge

The Chrome web store page for Stylus. A banner at the top says 'You can now add extensions from the Chrome web store to Microsoft Edge', with a button that reads 'Allow extensions from other stores'.

Open the Chrome Web Store page for Stylus with Edge. Skip the next 2 steps if the Add to Chrome button is shown.

The 'Allow extensions from other stores' from other stores button.

Click the Allow extensions from other stores button in the bar at the top of the page.

The confirmation popup to allow extensions from other stores, which explains that 'Microsoft does not verify extensions installed from third-party stores'.

A confirmation popup will appear, click Allow.

The Add to Chrome button.

The Add to Chrome button will now be available near the top of the page, click it.

The Edge permission popup which warns that the Stylus extension will be able to 'Read and change all your data on all websites'.

A permission confirmation popup will appear, choose Add extension.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus has been added to Microsof Edge'.

The Stylus extension button will now appear in Edge's extension bar.

Install TOPdesk Operator Recoloring

Once Stylus has been installed, TOPdesk must be prepared and finally the TOPdesk Operator Recoloring can be installed.

Installing Custom Styles

The topdesk homescreen, with the user menu opened and the 'My settings' option highlighted.

In the TOPdesk operator's section, open the User menu and click the My settings option.

The my settings page. A big red arrow points at the checked 'support custom colours' checkbox.

In the Accessibility block, tick Support custom colours and click Save.

The themes section of this website.

Click the install button for your favorite theme which will open a new window.

The 'install style' page of Stylus. A big red arrow points at the Install style button right below the title. The colors and filters can be seen in an overlay on the side.

If Stylus is installed, the opened window will look like this. Click the Install style button.

The topdesk screen is now all blue thanks to the 'cobalt blue' theme.

The TOPdesk colours will now be overridden by your chosen theme!

Themes

There are a couple of themes available out of the box. You can completely adjust any theme to your needs. See below for instructions on how to customize the theme to your liking.

Default Dark

TOPdesk themed with black, dark gray, and a bright orange accent color.

The default dark theme uses white text on black and dark gray backgrounds, with occassional bright orange accents to create a "dark mode" with strong contrast.

Install Default Dark theme

Soft Green

TOPdesk themed with soft white, mauve, and a green accent color.

The Soft Green theme replaces the stark white and blue backgrounds of TOPdesk with off-white and mauve. Still light, but lower contrast and much easier on the eye. The green color accentuates a few things to provide an anchor, and identify important things.

Install Soft Green theme

Cobalt Blue

TOPdesk themed with dark blues, and a yellow accent color.

Inspired by the Cobalt themes by Wes Bos, Cobalt Blue reduces the bright light coming from your screen without going full black. Two tints of blue, and a yellow accent color, produces a stylish not-quite dark mode.

Install Cobalt Blue theme

Customize

All the colors used by the TOPdesk Operator Recoloring can be adjusted to your preference.

Some cases, mostly icons, require a complicated filter instruction to color accordingly. Fortunately this instruction can be calculated automatically from your hexadecimal color! All the steps are explained below!

Custom Colors

The stylus extension button is highlighted, and below is a menu with the installed theme as well as several other options.

Open the Stylus extension menu, and click the gear icon in the menu item of the theme.

The stylus style configuration popup, with all the colors and filters for the theme.

Click the color box for the color you want to change, and pick your new color.

The calculate filter form of this website. The color field contains the value '#FF00FF'.

Fill in the hexadecimal value of the new color in the Calculate Filter form below, and click Calculate.

The calculate filter form of this website. The result text area contains the calculated value starting with 'brightness(0)'.

The result appears next to the form after a short time. Click Copy to copy the result to the clipboard.

The stylus style configuration popup again, but the 'Primary' color is now pink and the 'Primary filter' field is selected.

Paste the new filter value in the filter field of the color you changed. Make sure the changes are saved.

Topdesk in the cobalt theme, but now with a pink accent color.

And enjoy your personalized TOPdesk!

Calculate Filter

Fill in the hexadecimal value of your color and press Calculate.

#

Feedback

If you have feedback or questions, please raise an issue on the GitHub project.

\ No newline at end of file +TOPdesk Operator Recoloring

Version: 3.0.0

TOPdesk Operator Recoloring

TOPdesk like you've never seen before

The Goal

If you are a TOPdesk operator that has trouble working with TOPdesk due to it's white and blue color scheme, the TOPdesk Operator Recoloring project can help by adjusting the colors of TOPdesk to your needs.

There are plenty of things in TOPdesk of which the color can't be changed like this. For example the circular context menu buttons on fields in most cards won't change. However, most things can be changed, so that an operator with dyslexia, contrast (in)sensitivity, or color blindness can work with TOPdesk.

Install Stylus

The Stylus browser extension is needed by the TOPdesk Operator Recoloring to override the TOPdesk styling. Stylus is available for Chrome, Firefox, and Edge.

Install Stylus on Chrome

The chrome web store page for Stylus.

Open the Chrome Web Store page for Stylus with Chrome.

The Add to Chrome button.

Click the Add to Chrome button near the top of the page.

The Chrome permission popup which warns that the Stylus extension will be able to 'Read and change all your data on all websites'.

A permission confirmation popup will appear, choose Add extension.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus has been added to Chrome'.

The Stylus extension button will now appear in Chrome's extension bar.

Install Stylus on Firefox

The Firefox add-on page for Stylus.

Open the Firefox add-on page for Stylus with Firefox.

The Add to Firefox button.

Click the Add to Firefox button near the top of the page.

The Firefox permission popup which warns that the Stylus extension will be able to 'Access your data for all websites', 'Access browser tabs', and 'Access browser activity during navigation'.

A permission confirmation popup will appear, choose Add.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus was added'.

The Stylus extension button will now appear in Firefox's extension bar.

Install Stylus on Edge

The Chrome web store page for Stylus. A banner at the top says 'You can now add extensions from the Chrome web store to Microsoft Edge', with a button that reads 'Allow extensions from other stores'.

Open the Chrome Web Store page for Stylus with Edge. Skip the next 2 steps if the Add to Chrome button is shown.

The 'Allow extensions from other stores' from other stores button.

Click the Allow extensions from other stores button in the bar at the top of the page.

The confirmation popup to allow extensions from other stores, which explains that 'Microsoft does not verify extensions installed from third-party stores'.

A confirmation popup will appear, click Allow.

The Add to Chrome button.

The Add to Chrome button will now be available near the top of the page, click it.

The Edge permission popup which warns that the Stylus extension will be able to 'Read and change all your data on all websites'.

A permission confirmation popup will appear, choose Add extension.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus has been added to Microsof Edge'.

The Stylus extension button will now appear in Edge's extension bar.

Install TOPdesk Operator Recoloring

Once Stylus has been installed, TOPdesk must be prepared and finally the TOPdesk Operator Recoloring can be installed.

Installing Custom Styles

The topdesk homescreen, with the user menu opened and the 'My settings' option highlighted.

In the TOPdesk operator's section, open the User menu and click the My settings option.

The my settings page. A big red arrow points at the checked 'support custom colours' checkbox.

In the Accessibility block, tick Support custom colours and click Save.

The themes section of this website.

Click the install button for your favorite theme which will open a new window.

The 'install style' page of Stylus. A big red arrow points at the Install style button right below the title. The colors and filters can be seen in an overlay on the side.

If Stylus is installed, the opened window will look like this. Click the Install style button.

The topdesk screen is now all blue thanks to the 'cobalt blue' theme.

The TOPdesk colours will now be overridden by your chosen theme!

Themes

There are a couple of themes available out of the box. You can completely adjust any theme to your needs. See below for instructions on how to customize the theme to your liking.

Default Dark

TOPdesk themed with black, dark gray, and a bright orange accent color.

The default dark theme uses white text on black and dark gray backgrounds, with occassional bright orange accents to create a "dark mode" with strong contrast.

Install Default Dark theme

Soft Green

TOPdesk themed with soft white, mauve, and a green accent color.

The Soft Green theme replaces the stark white and blue backgrounds of TOPdesk with off-white and mauve. Still light, but lower contrast and much easier on the eye. The green color accentuates a few things to provide an anchor, and identify important things.

Install Soft Green theme

Cobalt Blue

TOPdesk themed with dark blues, and a yellow accent color.

Inspired by the Cobalt themes by Wes Bos, Cobalt Blue reduces the bright light coming from your screen without going full black. Two tints of blue, and a yellow accent color, produces a stylish not-quite dark mode.

Install Cobalt Blue theme

Customize

All the colors used by the TOPdesk Operator Recoloring can be adjusted to your preference.

Some cases, mostly icons, require a complicated filter instruction to color accordingly. Fortunately this instruction can be calculated automatically from your hexadecimal color! All the steps are explained below!

Custom Colors

The stylus extension button is highlighted, and below is a menu with the installed theme as well as several other options.

Open the Stylus extension menu, and click the gear icon in the menu item of the theme.

The stylus style configuration popup, with all the colors and filters for the theme.

Click the color box for the color you want to change, and pick your new color.

The calculate filter form of this website. The color field contains the value '#FF00FF'.

Fill in the hexadecimal value of the new color in the Calculate Filter form below, and click Calculate.

The calculate filter form of this website. The result text area contains the calculated value starting with 'brightness(0)'.

The result appears next to the form after a short time. Click Copy to copy the result to the clipboard.

The stylus style configuration popup again, but the 'Primary' color is now pink and the 'Primary filter' field is selected.

Paste the new filter value in the filter field of the color you changed. Make sure the changes are saved.

Topdesk in the cobalt theme, but now with a pink accent color.

And enjoy your personalized TOPdesk!

Calculate Filter

Fill in the hexadecimal value of your color and press Calculate.

#

Feedback

If you have feedback or questions, please raise an issue on the GitHub project.

\ No newline at end of file diff --git a/docs/themes/topdesk-operator-recoloring.cobalt_blue.user.css b/docs/themes/topdesk-operator-recoloring.cobalt_blue.user.css new file mode 100644 index 0000000..50367f1 --- /dev/null +++ b/docs/themes/topdesk-operator-recoloring.cobalt_blue.user.css @@ -0,0 +1,9461 @@ + +/* ==UserStyle== +@name Cobalt Blue (TOPdesk Operator Recoloring) +@namespace github.com/topdesk/topdesk-operator-recoloring +@version 3.0.0 +@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 +@updateURL https://topdesk.github.io/operator-recoloring/themes/topdesk-operator-recoloring.cobalt_blue.user.css +@license MIT +@preprocessor default + +@var color background "Background" #122738 +@var text background-filter "Background filter" brightness(0) saturate(100%) invert(11%) sepia(7%) saturate(7110%) hue-rotate(170deg) brightness(89%) contrast(90%) +@var color on-background "On background" #ffffff +@var text on-background-filter "On background filter" brightness(0) saturate(100%) invert(100%) sepia(27%) saturate(170%) hue-rotate(248deg) brightness(107%) contrast(101%) +@var color selection "Selection" rgba(58, 217, 0, 0.99) +@var color on-selection "On selection" #000000 +@var color surface "Surface" #193549 +@var text surface-filter "Surface filter" brightness(0) saturate(100%) invert(12%) sepia(84%) saturate(551%) hue-rotate(164deg) brightness(93%) contrast(86%) +@var color on-surface "On surface" #ffffff +@var text on-surface-filter "On surface filter" brightness(0) saturate(100%) invert(100%) sepia(27%) saturate(170%) hue-rotate(248deg) brightness(107%) contrast(101%) +@var color disabled "Disabled" #193549 +@var text disabled-filter "Disabled filter" brightness(0) saturate(100%) invert(14%) sepia(9%) saturate(5296%) hue-rotate(168deg) brightness(92%) contrast(85%) +@var color on-disabled "On disabled" #234e6d +@var text on-disabled-filter "On disabled filter" brightness(0) saturate(100%) invert(27%) sepia(17%) saturate(1661%) hue-rotate(162deg) brightness(95%) contrast(93%) +@var color primary "Primary" #ffc600 +@var text primary-filter "Primary filter" brightness(0) saturate(100%) invert(73%) sepia(12%) saturate(7485%) hue-rotate(4deg) brightness(108%) contrast(118%) +@var color primary-muted "Primary muted" #ff9d00 +@var text primary-muted-filter "Primary muted filter" brightness(0) saturate(100%) invert(76%) sepia(65%) saturate(4201%) hue-rotate(359deg) brightness(101%) contrast(109%) +@var color on-primary "On primary" #000000 +@var text on-primary-filter "On primary filter" brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(340deg) brightness(94%) contrast(106%) +@var color error "Error" #ff0088 +@var text error-filter "Error filter" brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(6972%) hue-rotate(321deg) brightness(102%) contrast(107%) +@var color on-error "On error" #000000 +@var text on-error-filter "On error filter" brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7500%) hue-rotate(340deg) brightness(94%) contrast(106%) +==/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); +} + +.remembercheckbox input[type='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} + +.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); +} + +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); + 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); + + --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); + + --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-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[mtype='button'][guielement='preferred_button']:active, +[mtype='button'][mstyles~='default-button']:active, +[guielement='toolbar_button'][mstyles~='blue']:active, +[guielement='toolbar_button'][mstyles~='orange']:active, +body.popup .divpopupcontainer .divpopupclientarea button.primary:active, +.suggestionsWidget .suggestionsWidget-searchButton:active, +div#checklist .button.is-primary:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +/* Disabled button */ +[mtype='button'][disabled='true'], +[mtype='button'][disabled='true']:hover, +[guielement='toolbar_button'][disabled='true'], +[guielement='toolbar_button'][disabled='true']:hover, +div#checklist .button[disabled], +div#checklist .button[disabled]:hover { + background: var(--disabled); + border-color: var(--on-disabled); + + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); + + pointer-events: none; +} + +/* Tab bar */ +[mstyles~='header_bar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[mstyles~='header_bar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* Quicklaunch buttons */ +div[mtype='group'][mstyles~='ql-button'] { + background: transparent; + --filter: var(--on-surface-filter); + outline-offset: -2px !important; +} +div[mtype='group'][mstyles~='ql-button'] > input, +div[mtype='group'][mstyles~='ql-button'] > input + div[mtype='label'] { + filter: var(--filter); + background: transparent !important; +} + +div[mtype='group'][mstyles~='ql-button']:hover, +div[mtype='group'][mstyles~='ql-button']:focus { + --filter: var(--primary-filter); +} + +div[mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +/* topdesk menu button */ +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:hover, +div[handle='topdesk_menu'][mstyles~='ql-button']:focus { + background: var(--primary-muted); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:hover > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:focus > input { + /* These are non-transparent action buttons */ + filter: none; +} + +button#notifications-icon { + /* iframe is too tiny to show the normal outline */ + outline-offset: -2px !important; +} + +button#notifications-icon::before { + content: ''; + background: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + filter: var(--on-surface-filter); +} +button#notifications-icon:hover::before { + filter: var(--primary-filter); +} + +span#unread-notification-count { + background: var(--primary); + color: var(--on-primary); + border: 1px solid var(--surface); +} + +/* Buttons with a background image */ +.suggestionsWidget .suggestionsWidget-searchButton, +.suggestionsWidget .suggestionsWidget-toggleButton, +.suggestionsWidget .suggestionsWidget-newKIButton, +.suggestionsWidget .help-button { + position: relative; +} +.suggestionsWidget .suggestionsWidget-searchButton:before, +.suggestionsWidget .suggestionsWidget-toggleButton:before, +.suggestionsWidget .suggestionsWidget-newKIButton:before, +.suggestionsWidget .help-button:before { + content: ''; + position: absolute; + filter: var(--filter); + top: 7px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* Knowledge base popup search button */ +.suggestionsWidget .suggestionsWidget-searchButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M15.9 14.2L12 10.3c.6-.9 1-2.1 1-3.3 0-3.3-2.7-6-6-6S1 3.7 1 7s2.7 6 6 6c1.2 0 2.3-.4 3.2-.9l3.9 3.9 1.8-1.8zM3 7c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* Knowledge base popup toggle button */ +.suggestionsWidget .suggestionsWidget-toggleButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M10.5 11.5L6.9 8l3.6-3.5 1 1L9.1 8l2.4 2.5z'/%3E%3Cpath d='M6.5 11.5L2.9 8l3.6-3.5 1 1L5.1 8l2.4 2.5z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* Knowledge base popup create item button */ +.suggestionsWidget .suggestionsWidget-newKIButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M2.5 13H13v1H2.5z'/%3E%3Cpath d='M15 4h-2V1c0-.6-.4-1-1-1H3C1.3 0 0 1.3 0 3v10c0 1.7 1.3 3 3 3h10v-1H2.5c-.8 0-1.5-.7-1.5-1.5S1.7 12 2.5 12H12c.6 0 1-.4 1-1V8h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1zm0 3h-3v3h-2V7H7V5h3V2h2v3h3v2z'/%3E%3C/svg%3E"); + left: 8px; +} + +/* Knowledge base popup help button */ +.suggestionsWidget .help-button:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M4.8 5.5c0-.4.1-.8.4-1.2.3-.4.6-.8 1.1-1 .5-.3 1.1-.4 1.8-.4.6 0 1.2.1 1.6.3.5.2.8.5 1.1.9.2.4.4.9.4 1.3s-.1.7-.2.9c-.1.3-.3.5-.5.7s-.6.5-1.1 1l-.4.4c-.1.1-.1.2-.2.3 0 .1-.1.2-.1.2 0 .1-.1.2-.1.4-.1.5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.1-.2-.2-.4-.2-.7 0-.4.1-.7.2-.9.1-.2.2-.5.4-.7l.7-.7c.3-.2.5-.4.6-.5s.2-.3.3-.4.1-.3.1-.5c0-.3-.1-.6-.4-.9-.3-.2-.6-.3-1-.3-.5 0-.8.1-1 .4-.2.2-.4.6-.6 1 0 .5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.2-.2-.3-.4-.3-.6zM8 12.9c-.3 0-.5-.1-.7-.2-.2-.2-.3-.4-.3-.7s.1-.5.3-.7c.2-.2.4-.3.7-.3s.5.1.7.3.3.4.3.7-.1.5-.3.7-.4.2-.7.2z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* + * General styles + */ +html, +body { + background: transparent; +} + +/* Generic focus style */ +*:focus { + z-index: 1000 !important; + outline: 2px solid var(--on-background) !important; + outline-offset: 2px !important; +} + +/* focus fix for combobox dropdown */ +input[type='text'][mtype='combobox']:focus { + z-index: 0 !important; +} + +/* Tab bar and Quicklaunch */ +[mstyles~='header_bar'], +[handle='quicklaunch_bar_settings_area'], +[handle='quicklaunch_bar_buttons_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Page */ +[guielement='toplevelwindow'], +[mstyles='left_side'] { + background: var(--background); + --text-color: var(--on-background); +} + +body > div[guielement='toplevelwindow'] > div[style*='background-color'] { + /* Sent emails set background in their style attribute */ + background: transparent !important; +} + +/* Text */ +[mtype='label'], +[mtype='rtlabel'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--text-color); +} +[mtype='label'][mstyles~='error'], +[mtype='rtlabel'][mstyles~='error'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--error); +} + +::selection { + background: var(--selection); + color: var(--on-selection); +} + +/* Link */ +a, +[guielement='hyperlink'], +[mtype='label'][mstyles~='link_label'] { + color: var(--primary); +} +a:hover, +[guielement='hyperlink']:hover, +[mtype='label'][mstyles~='link_label']:hover { + color: var(--primary-muted); +} + +/* Tooltip */ +#infoboxdiv { + background: var(--surface); + color: var(--on-surface); +} +/* Bubble tooltips */ +[guielement='infobubble-bubble'] { + background: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='south'] { + border-top-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='east'] { + border-left-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='west'] { + border-right-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='north'] { + border-bottom-color: var(--surface); +} +[guielement='infobubble-bubble'] [mstyles~='infobubble-message'] { + color: var(--on-surface); +} + +/* Popup */ +[guielement='subwindow'] > img:only-child { + /* The pointer triangle used in some popups */ + filter: var(--on-background-filter); +} + +[guielement='popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='popup-header'] { + border-color: var(--on-surface); +} +[guielement='popup-body'] [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] { + background: transparent; + color: var(--text-color); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label'][mstyles~='selected'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='popup-footer'] { + background: var(--surface); + border-color: var(--on-surface); +} +/* HTML style popup */ +body.popup .divpopupcontainer { + background: var(--surface); + color: var(--on-surface); + --text-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader { + border-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader .divpopuptitle { + color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupclientarea { + background: transparent; +} +body.popup .divpopupcontainer .divpopupclientarea .buttons, +body.popup .divpopupcontainer .divpopupclientarea .grid-settings-popup-buttons { + background: transparent; + border-color: var(--on-surface); +} + +/* stamp popup */ +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup']:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button.disabledButton { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Datepicker + */ +[guielement='calendar-grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='calendar-grid'] [guielement='calendar-cell'] [guielement='calendar-cell-label'] { + color: var(--text-color); +} +/* non-working day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-non-working-day'] { + background: var(--surface); + --text-color: var(--on-surface); +} +/* Special style for 'today' to aid orientation */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-today'] { + --text-color: var(--primary); + border-color: transparent; +} +/* currently selected cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +/* 'focused' cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-highlighted'] { + border-color: var(--primary); +} +[guielement='calendar-grid'] + [guielement='calendar-cell'][mstyles~='cal-selected'][mstyles~='cal-highlighted'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + border-color: var(--on-primary); +} +/* 'go to today' button */ +[guielement='datepicker-today'] { + background: transparent; + color: var(--primary); +} +[guielement='datepicker-today']:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Loading screen */ +[guielement='toplevelwindow'] > [mstyles~='content_area'] { + background-color: var(--background); +} + +body[style*='background-color: #ffffff'] { + background-color: var(--background) !important; +} + +#busy_message_area { + background-color: var(--surface); + padding: 36px; +} +#busy_message_area > #busy_message_image { + display: none !important; +} +#busy_message_area > #busymessage { + color: var(--on-surface); +} + +#busy_message_area::before { + content: ''; + display: block; + width: 60px; + height: 60px; + margin: 0 auto 12px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 58%, + var(--on-surface) 60% + ); + + animation-name: pulse; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: 0.2s; +} + +#busy_message_area::after { + content: ''; + display: block; + width: 46px; + height: 46px; + margin: -80px auto 24px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 55%, + var(--on-surface) 57% + ); + + animation-name: pulse; + animation-duration: 2.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: -1.5s; +} + +@keyframes pulse { + from { + opacity: 1; + } + to { + opacity: 0.2; + } +} + +@media (prefers-reduced-motion: no-preference) { + #busy_message_area::before { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 58%, + transparent 60% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-large; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: 0s; + } + + #busy_message_area::after { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 55%, + transparent 57% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-small; + animation-duration: 3.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: -0.5s; + } + + @keyframes spin-large { + from { + rotate: 0deg; + } + to { + rotate: 720deg; + } + } + + @keyframes spin-small { + from { + rotate: 0deg; + } + to { + rotate: 1440deg; + } + } +} + +/* + * Tab + */ + +/* Default */ +[guielement='window_tab'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='window_tab'] [guielement='icon'], +[guielement='window_tab'] [guielement='icon-button'] { + filter: var(--filter); +} +/* Status icon (dual color, can't be recolored) */ +[guielement='window_tab'] [guielement='icon']:nth-of-type(2) { + filter: none; +} + +/* Current */ +[guielement='window_tab'][mstyles~='active'] { + background: var(--background); + border-bottom-color: var(--background); + border-top: 3px solid var(--primary); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +/* +* Card tab +*/ + +/* Current */ +[role='tablist'] [role='tab'][aria-selected='true'], +[role='tablist'] [role='tab'][aria-selected='true'] * { + border-bottom-color: var(--primary); + color: var(--primary); +} + +/* HTML style tabs */ +.subtabscontainer .subtabcaptions .tabcaption { + border-color: var(--text-color) !important; +} +.subtabscontainer .subtabcaptions .tabcaption a { + color: var(--text-color); +} +.subtabscontainer .subtabcaptions .tabcaption.active { + --text-color: var(--primary); +} + +/* + * Menu + */ +[guielement='topdesk-menu'], +[guielement='topdesk-submenu'], +[guielement='toolbar_menu'], +div#checklist div.menu { + background: var(--surface); +} +[guielement='topdesk-submenu'] { + border-left-color: var(--on-surface); +} + +/* Default */ +[guielement='topdesk-menu-item'], +[guielement='toolbar_menu_button'], +div#checklist div.menu [role='button'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='topdesk-menu-item'] *, +[guielement='toolbar_menu_button'] * { + background: transparent; +} +[guielement='topdesk-menu-item'] [guielement='topdesk-menu-icon'], +[guielement='toolbar_menu_button'] [mtype='imagebutton'] { + filter: var(--filter); +} + +div#checklist div.menu [role='button'] { + color: var(--text-color); +} + +/* Hover */ +[guielement='topdesk-menu-item']:hover, +[guielement='toolbar_menu_button']:hover, +div#checklist div.menu [role='button']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Focus */ +[guielement='topdesk-menu-item']:focus, +[guielement='toolbar_menu_button']:focus, +div#checklist div.menu [role='button']:focus { + outline: none !important; + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Disabled */ +[guielement='topdesk-menu-item'][disabled='true'], +[guielement='toolbar_menu_button'][disabled='true'], +div#checklist div.menu [role='button'][aria-disabled='true'] { + background: var(--disabled); + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} + +/* Separators */ +[guielement='topdesk-menu-separator'], +[guielement='toolbar_menu_group'], +div#checklist div.menu li .separator { + border-color: var(--on-surface); +} + +/* Selected item */ +[guielement='topdesk-menu-item'][mstyles~='topdesk-menu-item-active'] { + border-left-color: var(--primary); +} + +/* Suppressing focus style on menu after click on Menu button */ +[guielement='toolbar_menu'] > [mtype='group']:focus { + outline: none !important; +} + +/* + * Action / Request + */ + +/* + * Request + */ +[guielement='pt-request-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-request-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-request-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged request entries */ +[guielement='pt-request-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-request-container'] [mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +/* Collapsed flagged entry fade-out */ +[guielement='pt-request-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--primary)) !important; +} + +/* Links */ +[guielement="pt-request-container"] div[rt] a, +[guielement="pt-request-container"] a /* Support for versions before october 2020 */ { + color: var(--primary); +} + +/* Speech bubble tail */ +[guielement='pt-request-pointer'] { + border-right-color: var(--surface); +} + +/* Expand/Collapse buttons */ +[guielement='pt-request-container'] [guielement='crt-button-expand'], +[guielement='pt-request-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* +* Action +*/ +[guielement='pt-trail-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-trail'], +[guielement='pt-trail-container'] [guielement='pt-mail'], +[guielement='pt-trail-container'] [guielement='pt-attachment'], +[guielement='pt-trail-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-trail-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged action entries */ +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +[guielement="pt-trail-container"] div[rt] a, +[guielement="pt-trail-container"] a, /* Support for versions before october 2020 */ +[guielement="pt-trail-container"] [guielement="pt-linkbutton"] { + color: var(--primary); +} + +/* Collapsed flagged entry fade-out */ +[guielement='pt-trail-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, #eda911) !important; +} + +/* Action entry filter button */ +[mtype='button'][guielement='pt-channel-button'] { + color: var(--primary); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:hover { + color: var(--primary-muted); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:active { + color: var(--background); + background: var(--primary); +} + +/* Expand/Collapse buttons */ +[guielement='pt-trail-container'] [guielement='crt-button-expand'], +[guielement='pt-trail-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* Mail and attachment entry icons (only present in Action) */ +[guielement='pt-mail'] img[guielement='icon'], +[guielement='pt-attachment'] img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Invisible for caller */ +[guielement='pt-trail-container'] [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +/* +* Rich text +*/ + +/* edit area */ +[guielement='pt-richtextarea'] { + background: var(--background); + border-color: var(--on-background); +} +body[contenteditable='true'] { + color: var(--on-background) !important; +} +[guielement='pt-memo-editable'], +[guielement='pt-attachment-editable'] { + background: transparent; +} +[guielement='pt-attachment-editable'] > [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* toolbar buttons, the image gets washed out in toggled state :-( */ +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:hover, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:active, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'][disabled='true'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* stamp popup */ +[guielement='memo'] { + background: var(--background); + --text-color: var(--on-background); +} + +/* While loading in */ +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] { + background-color: var(--surface) !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] > [guielement='image'] { + /* image doesn't color, and is more distracting than useful */ + display: none !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true']::before { + content: ''; + position: absolute; + inset: 0; + background: white; + + animation-name: pulse-feed; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes pulse-feed { + from { + opacity: 0; + } + to { + opacity: 0.2; + } +} + +/* + * Home, Module, and Dashboard pages + */ + +/* Can't recolor the background of the banner, so need to force the color of the text to make sure it remains visible */ +[handle='ie11campaign.banner.application_manager.description'], +[handle='ie11campaign.banner.application_manager.description'] + [mtype='group'] a { + color: black; +} + +[guielement='widget'] { + border-color: transparent; +} +[guielement='widget_header'], +[guielement='widget_content_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='widget_content_area'] { + border-color: var(--on-surface); +} +[guielement='widget_content_area'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Main pages widget / Tile widgets */ +[guielement^='widget_page_image_button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement^='widget_page_image_button']:hover { + background: var(--primary-muted); +} +[guielement^='widget_page_image_button']:active { + background: var(--background); + border: 1px solid var(--primary); + --filter: var(--on-background-filter); +} +[guielement^='widget_page_image_button'] > [guielement='icon'] { + filter: var(--filter); +} + +/* My tasks widget / Tasks per group widget */ +[guielement='widget_content_area'] [mstyles~='todo_header_group'] { + border-color: var(--on-surface); +} + +/* Selections, Reports, and Shortcuts widget */ +[guielement='selections_reports_content_area'] { + background: var(--surface); +} +[guielement='selections_reports_item'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='selections_reports_item']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[guielement='selections_reports_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* Current major calls widget */ +[handle='major_incident_widget_main'] [guielement='block_header'] { + background: var(--surface); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:hover { + filter: var(--primary-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:active { + filter: var(--primary-muted-filter); +} + +/* KPI widget */ +[guielement='widget_content_area'] [mstyles~='italic_text'] { + color: var(--text-color) !important; +} + +/* Report widget */ +[guielement='widget_content_area'] [guielement='image']:not([role='presentation']) { + /* + * The report legend is included in the image itself, + * forcing the background to make sure the legend is visible. + * + * Setting a simple filter, e.g. filter: invert(1), may have + * a more desirable effect depending on the chosen background + * of the widget + * + * NOTE: this also affects KPI's as they can't be distinguished + */ + background: #fcfcfc; +} + +/* Conversations widget */ +[guielement='conversation-reply'] { + background: transparent; +} + +[guielement='conversation-text'] a { + color: var(--primary); +} +[guielement='conversation-text'] a:hover { + color: var(--primary-muted); +} +[guielement='conversation-link'] { + background: transparent; + color: var(--primary); +} +[guielement='conversation-link']:hover { + background: transparent; + color: var(--primary-muted); +} +[guielement='conversation-number'] + [guielement='icon-button'] { + filter: var(--primary-filter); +} +[guielement='conversation-number'] + [guielement='icon-button']:hover { + filter: var(--primary-muted-filter); +} + +/* Navigation pane */ +[guielement='navigator_container'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='navigator_item'] [guielement='icon'] { + filter: var(--filter); +} +[guielement='navigator_item'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Selections widget / Reports widget / Shortcuts widget */ +[guielement='widget'] [guielement='link_button'] { + background: transparent; + color: var(--primary) !important; +} +[guielement='widget'] [guielement='link_button']:hover { + color: var(--primary-muted) !important; +} + +/* Get started widget */ +div#app { + background-image: none; +} +/* close button */ +.widget-container .widget-button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.widget-container .widget-button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.widget-container .widget-button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} +/* about us button */ +.welcome-widget #button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.welcome-widget #button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.welcome-widget #button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} + +/* Subwidgets */ +.widget-container .service-excellence-widget-frame, +.widget-container .service-excellence-widget-frame:hover, +.widget-container .getting-started-widget-frame, +.widget-container .getting-started-widget-frame:hover, +.widget-container .task-board-widget-frame, +.widget-container .task-board-widget-frame:hover { + background: var(--surface); +} +/* header */ +.widget-container .service-excellence-widget-frame h1, +.widget-container .getting-started-widget-frame h1, +.widget-container .task-board-widget-frame h1 { + color: var(--on-surface); +} + +/* Service excellence subwidget */ +/* view more blogs link */ +.widget-container .service-excellence-widget-frame a { + color: var(--primary); +} +.widget-container .service-excellence-widget-frame a:hover { + color: var(--primary-muted); +} +/* blog item */ +.widget-container .service-excellence-widget-frame .rss-item a { + background: var(--surface); + --text-color: var(--on-surface); +} + +.widget-container .service-excellence-widget-frame .rss-item a:focus, +.widget-container .service-excellence-widget-frame .rss-item a:hover { + background: var(--on-surface); + --text-color: var(--surface); +} + +.widget-container + .service-excellence-widget-frame + .rss-item + .rss-item-body + .rss-item-content + > div + .fade-out-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .rss-title-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .display-date { + color: var(--text-color); +} + +/* Getting started subwidget */ +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li .video-title { + color: var(--on-surface); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li.playing, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li.playing + .video-title { + background: var(--primary); + color: var(--on-primary); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:hover, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:hover + .video-title, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:focus, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:focus + .video-title { + background: var(--on-surface); + color: var(--surface); +} + +/* My calls subwidget */ +.widget-container .task-board-widget-frame .task-board-widget a { + --text-color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget a .td-icon, +.widget-container .task-board-widget-frame .task-board-widget a .content .title, +.widget-container .task-board-widget-frame .task-board-widget a .content .request, +.widget-container .task-board-widget-frame .task-board-widget a .content .request span, +.widget-container .task-board-widget-frame .task-board-widget a .display-date, +.widget-container .task-board-widget-frame .task-board-widget a .display-date .td-icon { + color: var(--text-color); +} +.widget-container .task-board-widget-frame .task-board-widget a:hover, +.widget-container .task-board-widget-frame .task-board-widget a:focus { + background: var(--on-surface); + --text-color: var(--surface); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a { + color: var(--primary); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a:hover { + background: none; + color: var(--primary-muted); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button svg { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover { + background: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover svg { + color: var(--surface); +} + +/* Flow chart */ +[mstyles='flowchart_container'] + :is( + [mstyles~='flowchart_block_simple'], + [mstyles~='flowchart_block_multi'], + [mstyles~='flowchart_block_dashed'], + [mstyles~='flowchart_icon_container'] + ) { + background: var(--background); + border-color: var(--on-background); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_empty'] { + border-color: var(--on-surface); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_multi'] { + box-shadow: 1px -1px var(--background), 2px -2px var(--on-background), 3px -3px var(--background), + 4px -4px var(--on-background); +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:last-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:last-child { + /* status icons are multicolored and thus can't be recolored */ + filter: none; +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:first-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:first-child { + filter: var(--on-background-filter); +} +[mstyles='flowchart_container'] [guielement='flowchart_label'] { + color: var(--on-background); +} +[mstyles='flowchart_container'] [mtype='rectangle'] { + border-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_right'] { + border-left-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_left'] { + border-right-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_up'] { + border-bottom-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_down'] { + border-top-color: var(--on-surface) !important; +} + +/* Marketplace widget */ +[guielement='no_padding_webpage_content_area'] { + background: var(--surface); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"] +{ + background-color: var(--primary); + color: var(--on-primary); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:hover +{ + background-color: var(--primary-muted); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:active +{ + background-color: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} + +/* + * Knowledge base suggestions widget (as seen on call card) + * Buttons are (mostly) styled in buttons.css + */ + +.suggestionsWidget { + background: var(--background); + border-color: var(--primary); +} + +.suggestionsWidget .suggestionsWidget-header { + background: transparent; + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body { + color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > img { + filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); + -webkit-appearance: listbox; + -moz-appearance: listbox; + appearance: listbox; +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select:focus { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language option { + background: var(--background); + color: var(--on-background); +} +.suggestionsWidget .help-button { + border-radius: 50%; + border: 1px solid currentColor; +} + +.suggestionsWidget .suggestionsWidget-list { + background: transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion, +.suggestionsWidget + .suggestionsWidget-suggestion.suggestionsWidget-suggestion-with-standard-solution { + background: transparent; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-suggestion > a { + background: transparent; + color: var(--text-color); + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > button { + background-color: transparent; + filter: var(--filter); + opacity: 1; + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > a:hover, +.suggestionsWidget .suggestionsWidget-suggestion > a:focus { + --text-color: var(--primary); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-suggestion > button:hover, +.suggestionsWidget .suggestionsWidget-suggestion > button:focus { + --filter: var(--primary-filter); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-noSuggestionsFound { + filter: var(--on-background-filter); +} + +.suggestionsWidget .suggestionsWidget-intro .footer { + background: var(--surface); + color: var(--on-surface); +} +.suggestionsWidget .suggestionsWidget-intro .footer > a:hover { + color: var(--primary-muted); +} + +/* disabling blue focus styling */ +.suggestionsWidget .suggestionsWidget-intro .intro-button:focus { + border-color: var(--on-background); + box-shadow: none; +} + +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='dialog'] { + background: var(--surface); +} +/* header */ +[data-handle='shareandsubscribe_sharee_picker'] header { + border-bottom-color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > strong, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] > strong { + color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > button { + filter: var(--on-surface-filter); +} + +/* Search field */ +[data-handle='shareandsubscribe_sharee_picker'] input[type='search'] { + background: var(--background); + border-color: var(--on-background); + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button { + --bg: var(--primary); + --filter: var(--on-primary-filter); + --border: var(--primary); + + position: relative; + background: var(--bg) !important; + border-color: var(--border) !important; +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:hover { + --bg: var(--primary-muted); + --filter: var(--on-primary-filter); + --border: var(--primary-muted); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:active { + --bg: var(--background); + --filter: var(--primary-filter); + --border: var(--primary); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M10 10l5 5'/%3E%3Ccircle cx='5.9' cy='6' r='5' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"); + + filter: var(--filter); + position: absolute; + top: 8px; + left: 8px; + width: 16px; + height: 16px; +} + +/* non-result status messages */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='searching'], +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='help-text'] { + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='no-search-results'] { + filter: var(--on-background-filter); +} + +/* Search results section*/ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] { + background: var(--background); + color: var(--on-background); + + --filter: var(--on-background-filter); + --hover-fg: var(--background); + --hover-filter: var(--background-filter); +} + +/* Sharees section */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] { + color: var(--on-surface); + + --filter: var(--on-surface-filter); + --hover-fg: var(--surface); + --hover-filter: var(--surface-filter); +} + +/* Items */ +[data-handle='shareandsubscribe_sharee_picker'] li:hover { + background: currentColor; + --filter: var(--hover-filter); + --text-color: var(--hover-fg); +} + +[data-handle='shareandsubscribe_sharee_picker'] li > div, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] li button, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] li button, +[data-handle='shareandsubscribe_sharee_picker'] li strong { + color: var(--text-color); +} +[data-handle='shareandsubscribe_sharee_picker'] li img[src^='data:image/svg+xml'] { + background: transparent; + border: 1px solid currentColor; + filter: var(--filter); +} +/* separator */ +[data-handle='shareandsubscribe_sharee_picker'] li:not(:last-child) { + border-bottom-color: currentColor; +} + +/* Footer */ +[data-handle='shareandsubscribe_sharee_picker'] footer { + background: var(--surface); + border-top: 1px solid var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button { + background: var(--bg) !important; + border-color: var(--border) !important; + color: var(--text-color) !important; +} + +/* Cancel button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel'] { + --bg: var(--background); + --border: var(--on-background); + --text-color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:hover { + --bg: var(--on-background); + --border: var(--on-background); + --text-color: var(--background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:active { + --bg: var(--surface); + --border: var(--on-surface); + --text-color: var(--on-surface); +} + +/* Share button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit'] { + --bg: var(--primary); + --border: var(--primary); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:hover { + --bg: var(--primary-muted); + --border-color: var(--primary-muted); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:active { + --bg: var(--on-primary); + --border: var(--primary); + --text-color: var(--primary); +} + +/* Icons in minimized groups */ +[guielement='mg-minimized-content'] [guielement='icon'] { + filter: var(--on-background-filter); +} + +/* Header buttons */ +[guielement='mg-header'] input[aria-haspopup='false'] { + filter: var(--primary-filter); +} +[guielement='mg-header'] input[aria-haspopup='false'][disabled='true'] { + filter: var(--disabled-filter); +} + +/* +* Form +*/ + +/* Default */ +input[type='text'], +div[guielement='datetimecontrol'], +div[guielement='unittextbox'], +button[role='checkbox'], +button[role='radio'], +textarea[mtype='textarea'], +textarea.textarea, +body[cardType='naturalselection'] input, +body[cardType='naturalselection'] select { + --border: var(--on-background); + --static-filter: var(--on-background-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); + border-color: var(--border); +} +textarea[mtype='textarea'] { + border-color: var(--border) !important; +} + +/* Readonly */ +input[type='text'][readonly='true'], +div[guielement='datetimecontrol'][readonly='true'], +div[guielement='unittextbox'][readonly='true'], +button[role='checkbox'][readonly='true'], +button[role='radio'][readonly='true'], +textarea[mtype='textarea'][readonly='true'] { + --border: var(--disabled); + --static-filter: var(--on-background-filter); + --button-filter: var(--disabled-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +/* Disabled */ +input[type='text'][disabled='true'], +div[guielement='datetimecontrol'][disabled='true'], +div[guielement='unittextbox'][disabled='true'], +button[role='checkbox'][disabled='true'], +button[role='radio'][disabled='true'], +textarea[mtype='textarea'][disabled='true'], +textarea.textarea:disabled { + --border: var(--on-disabled); + --static-filter: var(--on-disabled-filter); + --button-filter: var(--on-disabled-filter); + + background: var(--disabled); + color: var(--on-disabled); + --text-color: var(--on-disabled); +} + +/* Error */ +input[type='text'][mstyles~='error'], +div[guielement='datetimecontrol'][mstyles~='error'], +div[guielement='unittextbox'][mstyles~='error'], +textarea[mtype='textarea'][mstyles~='error'], +textarea.textarea:invalid { + --border: var(--error); + --static-filter: var(--error-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--error); + --text-color: var(--error); +} + +/* Combobox dropdown icon */ +body[cardType='naturalselection'] span.arrowdown, +input[type='text'][mtype='combobox'] + div > img { + filter: var(--on-background-filter); +} +input[type='text'][mtype='combobox'][readonly='true'] + div > img, +input[type='text'][mtype='combobox'][disabled='true'] + div > img { + filter: var(--on-disabled-filter); +} +input[type='text'][mtype='combobox'][mstyles~='error'] + div > img { + filter: var(--error-filter); +} + +/* Combobox options */ +body[cardType='naturalselection'] option, +[mango_combobox='true'][role='option'] { + background: var(--background) !important; + color: var(--on-background) !important; +} +[mango_combobox='true'][role='option'][style*='highlight'] { + background: var(--on-background) !important; + color: var(--background) !important; +} + +/* Datepicker button */ +div[guielement='datetimecontrol'] > input[guielement='icon-button'] { + filter: var(--button-filter); +} + +/* Unit text box */ +div[guielement='unittextbox'] > img, +div[guielement='unittextbox'] > [guielement='unittextbox_prefix'], +div[guielement='unittextbox'] > [guielement='unittextbox_suffix'] { + background: transparent; +} +div[guielement='unittextbox'] > img { + filter: var(--static-filter); +} + +/* Checkbox */ +button[role='checkbox'] { + box-sizing: border-box; + border: 1px solid var(--border); +} +button[role='checkbox'] > img { + display: none !important; +} + +/* checkmark */ +button[role='checkbox'][aria-checked='true']::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/* Radio button */ +button[role='radio'] > img { + display: none !important; +} +button[role='radio'] { + border: 1px solid var(--border); + border-radius: 50%; +} +/* dot */ +button[role='radio'][aria-checked='true']::before { + content: ''; + position: absolute; + border-radius: 50%; + top: 4px; + left: 4px; + width: 8px; + height: 8px; + background: currentColor; +} + +/* Search */ +[guielement='sp-search-main-group'], +[mstyles~='quicklaunch_search_background'] { + background: transparent; + border: 1px solid var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button'], +[guielement='quicklaunch_search_button'] { + background: var(--primary); + border-color: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button']:hover, +[guielement='quicklaunch_search_button']:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button']:active, +[guielement='quicklaunch_search_button']:active { + background: var(--background); + border-color: var(--primary); + --filter: var(--primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button'] [guielement='icon'], +[guielement='quicklaunch_search_button'] [guielement='icon'] { + filter: var(--filter); +} + +/* List control */ +[guielement='list_control'], +[guielement='list_control'] [guielement='list_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='list_control'] [guielement='list_item']:hover { + background: var(--on-background); + --text-color: var(--background); + --filter: var(--background-filter); +} +[guielement='list_control'] [guielement='list_item'][mstyles~='selected'], +[guielement='list_control'] [guielement='list_item'] [mstyles~='selected_suggestion'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[guielement='list_control'] [guielement='list_item'] [mtype='label'] { + color: var(--text-color) !important; +} +[guielement='list_control'] [guielement='list_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* memofield buttons */ +.memowithheader .images img { + filter: var(--on-surface-filter); +} +.memowithheader .images img:hover { + filter: var(--primary-filter); +} +.memowithheader .images img:active { + filter: var(--primary-muted-filter); +} +.memowithheader .images img[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* + * HTML style form elements + */ +table.fields .label { + color: var(--text-color); +} +/* select */ +table.fields .arrowdown { + filter: var(--on-background-filter); +} +#dropdownlayer .dropdownselect { + background: var(--background); + color: var(--on-background); +} +.optionvalue { + color: var(--text-color); +} + +/* list control */ +div.fields .selectlist { + background: var(--background); +} +div.fields .selectlist .selected { + background: var(--on-background); + color: var(--background); +} + +/* search with autocomplete */ +table.textinput { + background: var(--background); +} +table.textinput #queryfield { + color: var(--on-background); +} +table.textinput + #suggestionbox { + background: var(--background); +} +table.textinput + #suggestionbox .dropdown { + color: var(--on-background); +} +table.textinput + #suggestionbox .dropdown[style*='background'] { + background: var(--on-background) !important; + color: var(--background); +} + +/* KI explorer panel */ +[guielement='explorer_header'], +[guielement='explorer_body'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='explorer_body'] [guielement='tree_node_line'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); +} +[guielement='explorer_body'] + [guielement='tree_node_line'] + [mtype='group'][mstyles~='tree_top_level'] { + background: transparent; +} + +/* KI Rich Text fields, and keyword block */ + +[guielement='block_body'], +[guielement='block_header'] { + background: transparent; +} +[guielement='memo_rich_text_area'] { + background: var(--background); + border-color: var(--on-background); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton'], +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:hover, +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:active, +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='imagebutton'][disabled='true'], +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* KI tags */ +.tagList > .tag { + background: var(--background); + border-color: var(--on-background); +} +.tagList > .tag > .tagName { + color: var(--on-background); +} +.tagList > .tag > button { + filter: var(--on-background-filter); +} +.tagList > .tag > button:hover { + filter: var(--primary-filter); +} +.addTagOptions .optionsSeparator { + color: var(--on-background); +} + +.addTagOptions .td-field { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-field::placeholder { + color: var(--on-background); +} +.addTagOptions .td-button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.addTagOptions .td-field option { + color: var(--on-background); +} +.addTagOptions .td-field option:disabled { + font-style: italic; +} + +/* KI Read version styles */ +[guielement='kb-search-main-group'] { + background: transparent; + border: 1px solid var(--primary); +} +[guielement='kb-comment-group'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='kb-content'] a { + color: var(--primary); +} +[guielement='kb-content'] a:hover { + color: var(--primary-muted); +} + +/* + * Email editor in email actions + */ + +/* Toolbar */ +div#cke_emailEditor .cke_top { + background: var(--surface); +} +div#cke_emailEditor .cke_top a.cke_button, +div#cke_emailEditor .cke_top a.cke_combo_button { + filter: var(--on-surface-filter); +} +div#cke_emailEditor .cke_top a.cke_button:focus, +div#cke_emailEditor .cke_top a.cke_button:hover, +div#cke_emailEditor .cke_top a.cke_combo_button:focus, +div#cke_emailEditor .cke_top a.cke_combo_button:hover, +div#cke_emailEditor .cke_top span.cke_combo_on a.cke_combo_button { + background: transparent; + filter: var(--primary-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled { + filter: var(--on-disabled-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_icon, +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_arrow { + opacity: 1; +} + +html.cke_panel_container .cke_panel_grouptitle { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_list { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_listItem a > * { + color: var(--text-color); +} + +html.cke_panel_container .cke_panel_listItem a:hover, +html.cke_panel_container .cke_panel_listItem a:focus { + background: transparent; + --text-color: var(--primary); +} + +html.cke_panel_container .cke_panel_listItem.cke_selected a, +html.cke_panel_container .cke_panel_listItem a:active { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Contents */ +div#cke_emailEditor .cke_contents { + background: var(--background); +} + +/* + * These rules will cause any color styling in the email to be lost, + * But will give an increased chance for the user to be able to read + * it. + * + * Checking the original style can be done by turning off the style + * in Stylus. + */ +body.cke_editable, +body.cke_editable * { + background: var(--background) !important; + color: var(--on-background) !important; +} +body.cke_editable a { + color: var(--primary) !important; +} + +body[cardType='naturalselection'] { + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +body[cardType='naturalselection'] div#header div.title, +body[cardType='naturalselection'] legend span, +body[cardType='naturalselection'] .fieldlistheader, +body[cardType='naturalselection'] .linklistgroupheader, +body[cardType='naturalselection'] .linklistheader, +body[cardType='naturalselection'] table.tabcontrol { + color: var(--text-color); +} + +body[cardType='naturalselection'] a { + color: var(--primary); +} + +body[cardType='naturalselection'] table.fieldlist { + --filter: var(--on-background-filter); +} + +body[cardType='naturalselection'] table.fieldlist td:hover:not(.fieldlistheader), +body[cardType='naturalselection'] table.fieldlist td:focus-within:not(.fieldlistheader) { + --filter: var(--primary-filter); + --text-color: var(--primary); +} + +body[cardType='naturalselection'] img.icon { + background: transparent; + filter: var(--filter); +} + +body[cardType='naturalselection'] img.icon + a { + color: var(--text-color); +} + +/* Checkbox */ +body[cardType='naturalselection'] .checkboxlayouter:not(#ie8) input.checkbox + label.checkbox { + background: none; + border: 1px solid var(--on-background); + height: 16px; + margin-top: 2px; +} + +body[cardType='naturalselection'] + .checkboxlayouter:not(#ie8) + input.checkbox:checked + + label.checkbox::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/** + * Various random things specific to certain cards + */ + +/* + * Partial card info block (Partail Incident, Change Activity) + */ +[guielement='mg-infoblock-content'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='mg-infoblock-content'] img[guielement='icon']:first-of-type { + filter: var(--on-surface-filter); +} + +/* + * Change breadcrumb + */ +[guielement='change_phase_breadcrumb'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='change_phase_breadcrumb'] > [mtype='label'] { + color: var(--text-color) !important; +} + +/* + * Checklist + */ +div#checklist { + background: var(--background); + + --text-color: var(--on-background); + + color: var(--text-color); +} + +div#checklist .explanation-text, +div#checklist .checked-amount, +div#checklist .the-text { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button'] .icon.details, +div#checklist .subtask-header .actions button.date-button, +div#checklist .subtask-header .actions button.menu-button, +div#checklist .subtask-header .operator-and-date button { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button']:hover .icon.details, +div#checklist .subtask-header .actions [role='button']:focus .icon.details, +div#checklist .subtask-header .actions [role='button'] .icon.details.currently-edited, +div#checklist .subtask-header .actions button.date-button:hover, +div#checklist .subtask-header .actions button.menu-button:hover, +div#checklist .subtask-header .actions button.menu-button:focus, +div#checklist .subtask-header .actions button.date-button:focus, +div#checklist .subtask-header .actions button.date-button.currently-edited, +div#checklist .subtask-header .operator-and-date button:hover, +div#checklist .subtask-header .operator-and-date button:focus { + color: var(--primary) !important; +} + +div#checklist .subtask-header.hover, +div#checklist .subtask-header.hover .actions.hover { + background: var(--on-background) !important; + --text-color: var(--background); +} + +/* Context menu, Confirm, and Cancel buttons*/ +div#checklist [role='button'] .icon.circle, +div#checklist button.menu-button .border, +div#checklist .modal-card.popup .close { + color: var(--text-color); + border-color: var(--text-color); +} + +div#checklist [role='button'][aria-disabled='true'] .icon.circle { + --text-color: var(--disabled); + background: none; +} + +div#checklist [role='button']:hover .icon.circle, +div#checklist [role='button']:focus .icon.circle, +div#checklist button.menu-button:hover .border, +div#checklist button.menu-button:focus .border, +div#checklist .modal-card.popup .close:hover, +div#checklist .modal-card.popup .close:focus { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +/* Checkboxes */ +div#checklist .check-container .check { + background: var(--background); + color: var(--on-background); +} + +/* Template select */ +div#checklist ul#templateList li.template-entry.selected { + background: var(--selection); + color: var(--on-selection); +} + +div#checklist ul#templateList li.template-entry:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* Modal popup */ +div#checklist .modal-card.popup .modal-card-head, +div#checklist .modal-card.popup .modal-card-body, +div#checklist .modal-card.popup .modal-card-foot { + background: var(--surface); + --text-color: var(--on-surface); +} +div#checklist .modal-card.popup .modal-card-title { + color: var(--on-surface); +} + +/* Assign operator dialog & Date picker dialog*/ +div#checklist [role='dialog'], +div#checklist .date-picker-popup, +div#checklist .date-picker-popup .date-picker-footer { + background: var(--surface); + --text-color: var(--on-surface); + color: var(--text-color); +} + +div#checklist [role='dialog'] li { + color: var(--on-surface); +} + +div#checklist [role='dialog'] li[role='option']:hover { + background: var(--on-surface); + color: var(--surface); +} + +div#checklist [role='dialog'] button.change-assignee-popover-action-button, +div#checklist .date-picker-popup .td-reset-date button, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today { + background: none; + color: var(--primary); +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:hover, +div#checklist [role='dialog'] button.change-assignee-popover-action-button:focus, +div#checklist .date-picker-popup .td-reset-date button:hover, +div#checklist .date-picker-popup .td-reset-date button:focus, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:hover, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:focus { + color: var(--primary-muted) !important; +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:active, +div#checklist .date-picker-popup .td-reset-date button:active, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:active { + background: var(--primary); + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker-container { + background: var(--background); +} + +div#checklist .help.is-danger { + color: var(--error); +} + +div#checklist .td-date-picker { + color: var(--on-background); +} + +div#checklist .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-header-cell { + background: var(--background); + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selectable { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.weekend { + background-color: var(--disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:not(.currentMonth) { + color: var(--on-disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.today { + border: 1px solid var(--primary-muted) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.focused { + border: 2px solid var(--primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selected { + background-color: var(--primary) !important; + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:hover.selectable { + background-color: var(--primary-muted); + color: var(--on-primary); +} + +div#checklist .date-and-time .control input + .icon { + color: var(--on-background); +} + +div#checklist .date-and-time .control input:focus { + border-color: var(--on-background); + box-shadow: none; +} + +div#checklist .date-and-time .control input:focus + .icon { + z-index: 1000; +} + +div#checklist .date-and-time .control input[aria-invalid='true'] { + background: var(--background); + color: var(--error); + border-color: var(--error); +} + +div#checklist .date-and-time .control input[aria-invalid='true'] + .icon { + color: var(--error); +} + +/* Panels */ + +[mstyles='planboard_dispatch_panel_main'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box'], +[mstyles='planboard_dispatch_panel_main'] [guielement='icon'] { + filter: var(--on-surface-filter); +} +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box']:hover { + filter: var(--primary-filter); +} + +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[mstyles='planboard_dispatch_panel_main'] + [guielement^='planboard_work_item_draggable_'][mstyles^='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +#dragdiv > [guielement^='planboard_work_item_draggable_'] { + background: var(--on-primary); + --text-color: var(--primary); + --filter: var(--primary-filter); + border: 1px solid var(--primary); +} +#dragdiv [mstyles='planboard_work_item_first_text'], +#dragdiv [mstyles='planboard_work_item_second_text'] { + color: var(--text-color); +} + +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button'], +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button'], +[guielement='planner_detail_content'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button']:nth-of-type(2), +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button']:nth-of-type(2), +[guielement='planner_detail_content'] [guielement='icon-button']:nth-of-type(2) { + filter: none; +} + +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption'] { + --filter: var(--on-background-filter); +} +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption']:hover { + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_detail_content'] { + --filter: var(--on-surface-filter); +} + +[guielement='group_linked_information'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='group_linked_information'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='planboard_detail_section_subgroup'] [guielement='pt-memo'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='planboard_detail_section_subgroup'] img[handle^='invisible-for-caller-label-'] { + filter: var(--on-surface-filter); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] + :not([handle='planboard.dispatch.quickplanning']) + + [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Toolbar */ + +[guielement='planboard_weekview_toolbar'] { + background: var(--surface); + --filter: var(--on-surface-filter); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement='planboard_weekview_toolbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime'], +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo'] { + background: transparent; + --text-color: var(--on-surface); +} +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime']:hover, +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo']:hover { + background: transparent; + --text-color: var(--primary); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='day'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='work_week'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='week'] { + /* These have two colours, and on/off can't be distinguished */ + filter: none; +} + +/* Scheduler */ +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] { + background: var(--surface); + --filter: var(--on-surface-filter); + --border: var(--on-surface); + border-color: var(--border); +} +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'] + > [mstyles~='planboard_quick_scheduler_daily_schedule'] { + border-color: var(--border); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler']:hover, +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button']:hover { + --filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler_pressed'], +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed'] { + background: var(--primary); + --border: var(--on-primary); + --filter: var(--on-primary-filter); + border-color: var(--on-primary); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed']:hover, +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed']:hover { + background: var(--primary-muted); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] [handle='picker_part'] { + filter: var(--filter); +} + +[guielement='planner_toolbar_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_toolbar_popup'] [guielement='planboard_header'] { + border-color: var(--text-color); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item'] { + background: var(--background); + --text-color: var(--on-background); + border-color: var(--on-background); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item']:hover { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Grid */ + +/* Header */ +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='planboard_header'] + [guielement='planner_period_header_cell'][mstyles='current_period'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* Operator group row */ +[guielement='planner_row'] [guielement='planboard_operatorgroup_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Operator row */ +[guielement='planner_row'] [guielement='planboard_operator_cell'], +[guielement='planner_row'] [guielement='planner_item_title_cell'], +[guielement='planner_row'] [guielement='planner_cell'] { + background: var(--background); + --text-color: var(--on-background); +} + +[guielement='planboard_operator_cell'] [mstyles='planboard_clickable planboard_zone_label'] { + /* Resetting the color of the timezone button label, as it is printed on top of a dual colored icon */ + color: inherit; +} + +/* Popups */ +[handle='planboard_popup'] [guielement='planner_popup_window'], +[handle='planboard_popup'] [guielement='planboard_popup_header'], +[handle='planboard_popup'] [guielement='planboard_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[handle='planboard_popup'] [handle='planboard.todopopup.to_dispatch']:hover { + --text-color: var(--primary); +} + +[handle='planboard_popup'] [guielement='planboard_work_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'][mstyles*='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'] + [guielement='icon-button']:first-of-type { + filter: var(--filter); +} + +/* + * Filter panel + */ +[guielement='planner_page_content'] [guielement='filter_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_header'], +[guielement='planner_page_content'] [guielement='filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_body'] > [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='planner_page_content'] + [guielement='filter_panel_body'] + > [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* date picker */ +[mstyles='planner_datepicker_grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekday'] { + --text-color: var(--on-background); + background: var(--background); +} +/* non-working day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekend'] { + --text-color: var(--on-surface); + background: var(--surface); +} +/* Special style for 'today' to aid orientation */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today'] { + border-color: transparent; +} +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today_label'] { + --text-color: var(--primary); +} +/* currently selected cell */ +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekday'][mstyles~='planner_datepicker_selected'], +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekend'][mstyles~='planner_datepicker_selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* + * Actions + */ +[guielement='planner_page_content'] [guielement='detail_panel_main'] { + border: 1px solid var(--on-background); +} + +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='planned'] { + --status-color: #057aab; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='terminated'] { + --status-color: #178755; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='request'] { + --status-color: #eda911; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header'] { + background: var(--surface); + --text-color: var(--on-surface); + border-bottom: 0px; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 8px; + background: var(--status-color); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] { + background: var(--background) !important; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'][mstyles~='active'] { + border-color: var(--primary); + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_group_header'] + > [guielement='icon']:first-of-type { + filter: none; +} + +[guielement='planner_page_content'] + [guielement='detail_panel_body'] + input[placeholder]::placeholder { + color: var(--text-color) !important; +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 4px; + background: var(--status-color); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_highlighted_block'] + [guielement='detail_panel_reserved_item'][mstyles~='hovered'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='planner_popup_window'], +[guielement='planner_popup_window'] > [guielement='planner_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_popup_window'] [guielement='spinner-button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button']:hover { + filter: var(--primary-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button'] + [guielement='textbox'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin'] { + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin']:hover { + filter: var(--primary-filter); +} + +/* + * Planner + */ +[handle='reservation.planner.main_view'] > [guielement='planner_header_row'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] + [guielement='mg-header'][mstyles~='reservable_items_group_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_row'] { + background: var(--background); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='servicewindow_shadow_'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='blocked_period_shadow_'] { + background: var(--disabled) !important; +} +[handle='reservation.planner.main_view'] [guielement='planner_item_title_cell'] { + background: var(--background) !important; +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_cell_icon'] > img { + filter: var(--on-background-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_OFF'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON_HOVER'] { + filter: none; +} +[handle='reservation.planner.main_view'] [guielement='planner_room_capacity'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +#dragdiv { + border-color: var(--on-background) !important; +} + +/* New reservation column */ +[handle='reservation.planner.main_view'] [guielement='background_shadow_section'] { + background: repeating-linear-gradient( + -45deg, + transparent, + transparent 9px, + var(--primary) 9px, + var(--primary) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='foreground_shadow_section'] { + border-color: var(--primary); + background: transparent; +} +[handle='reservation.planner.main_view'] [guielement='reservation_feedback_section']:hover { + border-color: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='divisible_room_restriction'] { + background: repeating-linear-gradient( + -45deg, + var(--primary-muted), + var(--primary-muted) 6px, + transparent 6px, + transparent 10px + ); + border-color: var(--primary-muted); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] { + background: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] + > img { + filter: var(--on-primary-filter); +} + +/* Reservation */ +[handle='reservation.planner.main_view'] [guielement='reservation_section'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_section'][mstyles~='selected_section'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[handle='reservation.planner.main_view'] [guielement='reservation_section'] > img { + filter: var(--filter); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] { + background: repeating-linear-gradient( + 45deg, + transparent, + transparent 6px, + var(--disabled) 6px, + var(--disabled) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] > img { + display: none !important; +} + +/* Availability popup */ +[guielement='planner_popup_content'] [handle='availableassets'] ~ img[style*='width: 24px'] { + filter: var(--on-surface-filter); +} + +/* + * TASK BOARD and BOOKMARKS + */ +/* notification */ +[guielement='notification-box'][mstyles='notification-alert'] { + background: var(--background); + border: 1px solid var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] + > [guielement='notification-message'] { + color: var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] > [guielement='icon'] { + filter: var(--primary-filter); +} + +/* filter panel */ +[guielement='taskboard_filter_panel'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border: 1px solid var(--on-background); +} +[guielement='taskboard_filter_panel_header'], +[guielement='taskboard_filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + border-color: var(--on-surface); +} + +[guielement='taskboard_datefilter_button'] { + border-color: var(--surface); +} +[guielement='taskboard_datefilter_button'] > [mtype='label'] { + background: none; +} +[guielement='taskboard_datefilter_button'][mstyles~='taskboard_active_date_filter_caption'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='taskboard_filter_panel_filter_fields'] [mstyles='taskboard_filter_panel_section'] { + border-color: var(--on-background); +} + +[guielement='taskboard_filter_panel_filter_fields'] + [mstyles='taskboard_filter_panel_section'] + [guielement='icon'] { + filter: var(--filter); +} + +/* task list */ +[guielement='taskboard_item_border_group'] { + border-color: var(--surface); +} + +[guielement='taskboard_item_header'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border-color: var(--surface); +} +[guielement='taskboard_item_header'][mstyles~='unfolded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='taskboard_bookmark_button']:disabled { + visibility: hidden !important; +} +[guielement='taskboard_task_icon'] { + filter: var(--filter); +} + +[guielement='taskboard_item_body'] { + border-color: var(--surface); +} +[guielement='taskboard_item_body'] [guielement='taskboard_task_body_data_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='taskboard_item_body'] + [guielement='pt-memo'] + [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +[guielement='taskboard_item_body'] [guielement='pt-memo'] a { + color: var(--primary); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} + +[guielement='taskboard_item']:hover [guielement='taskboard_item_header'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_header'], +[guielement='taskboard_item']:hover [guielement='taskboard_item_body'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_body'] { + border-color: var(--primary-muted); +} + +/** + * Change activity planner tab + */ + +/* + * Change activity planner toolbar + */ +/* Date picker button */ +[guielement='planner_menu_group'] [handle='service_window_check_date_date'] { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] [handle='service_window_check_date_date']:hover { + filter: var(--primary-filter); +} +/* Lock/Unlock buttons (when selecting an activitty) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']) { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):disabled { + padding-bottom: 2px; + border-bottom: 1px solid currentColor; /* The color will be overridden by the filter*/ +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):not(:disabled):hover { + filter: var(--primary-filter); +} +/* Link/Unlink image (when creating/breaking a dependency) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + [mstyles='planner_menu_title'] + ~ [guielement='image'] { + filter: var(--on-background-filter); +} + +/* + * Change activity planner + */ +[guielement='planner_container'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/* Timeline bar */ +[guielement='planner_container'] [guielement='planner_scroll_button_group'], +[guielement='planner_container'] [guielement='planner_view_combobox_container'], +[guielement='planner_container'] + [guielement='planner_default_group'] + :is( + [guielement='planner_time_line_item_first_line'], + [guielement='planner_time_line_item_second_line'] + ) { + border-color: var(--on-surface); +} + +[guielement='planner_container'] [handle='gantt_zoomfit'] { + filter: var(--on-surface-filter); +} +[guielement='planner_container'] [handle='gantt_zoomfit']:hover { + filter: var(--primary-filter); +} + +/* Marker bar */ +[guielement='planner_container'] [guielement='planner_marker_group'] { + background-color: var(--background); + background-color: var(--surface); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle='planner.todaymarker.title'] { + background-color: var(--primary) !important; + color: var(--on-primary); + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [mtype='rectangle']:is( + [style*='background-color: rgb(219, 216, 235)'], + [style*='background-color:#dbd8eb'] + ) { + /* Arrow on the today marker */ + background-color: var(--primary) !important; +} + +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle^='Sprint'][handle$='_marker'] { + filter: var(--on-surface-filter); +} + +/* Activities sidebar */ +[guielement='planner_container'] [guielement='planner_info_group'] { + border-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_inner_group'] { + background-color: var(--background); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_header_line'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--surface); +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] { + --text-color: var(--on-background); + + background-color: transparent !important; + border-color: transparent; +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] + :is( + [guielement='planner_info_control_title'], + [guielement='planner_info_control_subtitle'] + )[style*='color'] { + color: var(--text-color) !important; +} + +/* Planner area */ +[guielement='planner_container'] [guielement='planner_draw_area'] { + background-color: var(--background); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-background); + --text-color: var(--on-background); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + > [mtype='group']:not([guielement]) { + /* Out of service window / weekend */ + background-color: var(--on-background) !important; + opacity: 0.1; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_background_row'] { + background-color: transparent !important; + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_header_line'] { + background-color: var(--surface); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_duration_in_group_header'] { + background-color: var(--on-surface); + --text-color: var(--surface); +} + +/* Connectors */ +[guielement='planner_container'] [guielement='planner_draw_area'] [mtype='rectangle'] { + border-color: var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [mtype='rectangle'][style*='z-index: 3;'] { + /* Connector connected to selected activity */ + border-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_begin'] { + /* Start connector */ + background-color: var(--on-background); + padding: 0; + width: 6px !important; + height: 6px !important; + border-radius: 50%; + border: 2px solid var(--background); + border-right: 0px; + top: 8.5px !important; + left: unset !important; + right: -4px; +} +[guielement='planner_container'] [guielement='planner_draw_area'] [guielement='planner_link_end'] { + /* End connector area */ + position: relative; + overflow: hidden; + width: 8px !important; + height: 12px !important; + border-width: 0px; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_end']:after { + /* End connector arrow */ + content: ''; + position: absolute; + width: 10px; + height: 10px; + background: var(--on-background); + transform: rotate(45deg); + left: -7px; + top: 1px; + box-shadow: 0 0 0px 2px black; +} + +/* Blocks */ +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_info_control_title'] { + /* to fix templates where the label is forced grey */ + color: var(--text-color) !important; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* light-ish red unselected */ + [style*='background-color: rgb(208, 49, 49);'], [style*='background-color:#d03131;'], + /* light-ish red selected */ + [style*='background-color: rgb(191, 27, 44);'], [style*='background-color:#bf1b2c;'], + /* darker red (doesn't seem to change on selection)*/ + [style*='background-color: rgb(164, 23, 37);'], [style*='background-color:#a41725;'], + ) { + /* Overdue / No Go */ + background-color: var(--error) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* grey */ + [style*='background-color: rgb(149, 149, 149);'], [style*='background-color:#959595;'], + ) { + /* Not ready to start / Not ready to authorize */ + background-color: transparent !important; + border: 1px solid var(--error) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* lightblue unselected */ + [style*='background-color: rgb(118, 182, 209);'], [style*='background-color:#76b6d1;'], + /* lightblue selected */ + [style*='background-color: rgb(73, 158, 193);'], [style*='background-color:#499ec1;'], + ) { + /* Ready to start */ + background: repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* blue unselected */ + [style*='background-color: rgb(5, 122, 171);'], [style*='background-color:#057aab;'], + /* blue selected */ + [style*='background-color: rgb(0, 107, 156);'], [style*='background-color:#006b9c;'], + ) { + /* Waiting for Authorization / Started */ + background: repeating-linear-gradient( + -45deg, + var(--primary), + var(--primary) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--primary) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* green unselected */ + [style*='background-color: rgb(23, 135, 85);'], [style*='background-color:#178755;'], + /* green selected */ + [style*='background-color: rgb(19, 117, 73);'], [style*='background-color:#137549;'], + ) { + /* Resolved / Go */ + background-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* teal unselected */ + [style*='background-color: rgb(115, 197, 158);'], [style*='background-color:#73c59e;'], + /* teal selected */ + [style*='background-color: rgb(66, 177, 128);'], [style*='background-color:#42b180;'], + ) { + /* Skipped */ + background: repeating-linear-gradient( + 45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ), + repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* white (also has grey border) */ + [style*='background-color: rgb(242, 242, 242);'], [style*='background-color:#f2f2f2;'], + ) { + /* Template */ + background-color: transparent !important; + border: 2px dotted var(--on-background) !important; +} + +/* Planner scope bar */ +[guielement='planner_container'] [guielement='planner_custom_scroll_area'] [guielement='image'] { + filter: var(--on-surface-filter); +} + +/* Vertical lines */ +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;'] { + /* Milestone line */ + border-color: var(--milestone-line-color) !important; +} +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;']:is( + [style*='border-left-color: rgb(219, 216, 235)'], + [style*='border-left:1px solid #dbd8eb'] + ) { + /* Today line */ + --milestone-line-color: var(--primary); +} + +/* Activitity bar (hover/select state) */ +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(183, 178, 216)'] { + /* Selected */ + box-shadow: inset 8px 0px 0px 0px var(--primary); + border-color: var(--primary); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(219, 216, 235)'] { + /* Hovered */ + border-color: var(--on-background); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(159, 153, 203)'] { + /* Selected and Hovered */ + box-shadow: inset 8px 0px 0px 0px var(--on-background); + border-color: var(--on-background); +} + +/* Collapsible sidebar */ +[guielement='collapsible_panel_container'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [guielement='collapsible_panel_header'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [mstyles='chm-planner-sidepanel-filter'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt'] { + filter: var(--on-background-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:hover { + filter: var(--primary-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:active { + filter: var(--primary-muted-filter); +} + +/* + * New activity popup + */ +[guielement='popup-body'] [guielement='rich_text_memo_group'][mstyles~='memo_like_progresstrail'] { + background-color: transparent; +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']) { + filter: var(--on-surface-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):hover { + filter: var(--primary-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):active { + filter: var(--primary-muted-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button'])[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/** + * Activity Overview tab + */ +[guielement='collected_memo_history'] [guielement='history_entry_list'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + :is([guielement='history_stamp'], [guielement='history_contents']) { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button'] { + background-color: transparent; + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button']:hover { + --text-color: var(--primary-muted); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'][mstyles='history_entry_non_clickable']::before { + content: '▸'; + position: absolute; + left: -12px; + font-size: 14px; + color: var(--text-color); +} + +/** + * Activity Checklist + */ +[guielement='checklist_sidebar_header'] { + background-color: var(--surface); + border-color: var(--surface); +} + +[guielement='checklist_sidebar_content'] { + background-color: var(--surface); + border-color: var(--surface); + border-top-color: var(--on-surface); +} + +[guielement='checklist_item'] + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--surface); +} +[guielement='checklist_item']:is(:hover, :focus-within) + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--primary); +} + +[guielement='checklist_item'] [guielement='checklist_item_header'][mstyles='unfolded'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='checklist_item'] + [guielement='checklist_item_content'] + [guielement='checklist_grey_section'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/** + * Change Calendar + */ +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--on-surface); +} +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] > [mtype='group'] { + border-color: var(--on-surface) !important; +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] { + background: var(--on-surface); /* The table and cell borders of the month view */ +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekend'] { + background-color: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekday'] { + background-color: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] > [mstyles~='month_calendar_today'] { + border-color: transparent; + box-shadow: inset 0 0 0 2px var(--primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_week_label'] { + background-color: var(--primary); + --text-color: var(--on-primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_item'] { + background-color: transparent; +} +[guielement='changecalendarpage'] [guielement='month_calendar_item']:hover { + background-color: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[guielement='changecalendarpage'] + [guielement='month_calendar_item'] + [guielement='icon'][mtype='imagearea']:first-child { + filter: var(--filter); +} + +/** + * Time Registration + */ + +[guielement='tr-fold-header-border'] { + border-top-color: transparent; +} + +[guielement='tr-fold-header'], +[guielement='tr-fold-content'] { + border-left-color: var(--surface); +} + +[guielement='tr-fold-header'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='tr-fold-header'] > img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='tr-fold-content'] img[guielement='icon'] { + filter: var(--on-background-filter); +} + +[guielement='tr-fold-header'] [guielement='tr-time'] { + color: var(--primary); +} +[guielement='tr-fold-content'] [guielement='tr-time'] { + border-color: var(--text-color); +} + +/** + * Mango Grid + */ + +[mtype='grid'] { + border-color: var(--background); + --selected-row-border: var(--primary); +} + +[mtype='grid'][mstyles='blurred'] { + --selected-row-border: var(--on-surface); +} + +[mtype='grid'] [id$='_content'] { + color: var(--text-color); +} + +/* selected */ +[mtype='grid'] [id$='_selection'] [id*='_selection_'][style*='background-color'] { + background-color: transparent !important; + box-shadow: inset 0 0 0px 1px var(--selected-row-border); +} + +/* header */ +[mtype='grid'] [id$='_header'] { + --text-color: var(--on-surface); +} + +[mtype='grid'] [id$='_header'] img { + filter: var(--on-surface-filter); +} + +[mtype='grid'] [id$='_header'] [style*='background-color'] { + background-color: var(--surface) !important; +} +[mtype='grid'] [id$='_header'] [style*='border-right'] { + border-color: var(--on-surface) !important; +} + +/* Content */ +[mtype='grid'] [id$='_columnstyling'] [style*='background-color'] { + background-color: var(--background) !important; +} + +[mtype='grid'] [id$='_content'] [style*='border-right'] { + border-color: var(--on-background) !important; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/concurrent_users/.*") { +body { + background: var(--background); +} + +.notification.is-warning { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); + border-radius: 5px; +} + +.notification.is-warning .icon { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/grid.*"), regexp("http(s)?://.*/tas/secure/[^assetmgmt].*?action=.*") { +/* + * Grids + */ + +/* + * The checkboxes are a dual colored image on top of a native checkbox. + * Unfortunately neither one can be recolored or styled effectively. + */ + +html, +body { + background: transparent; +} + +body[cardtype='grid'] { + background: var(--background); + color: var(--on-background); +} +body[cardtype='grid'] .header { + border-color: var(--on-surface); +} + +body[cardtype='grid'] .topbar .filter > a { + color: var(--primary); +} +body[cardtype='grid'] .topbar .filter > a:hover { + color: var(--primary-muted); +} +body[cardtype='grid'] .topbar .filter > a:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Grid buttons */ +body[cardtype='grid'] #actionbar .button { + --text-color: var(--on-background); + --filter: var(--on-background-filter); + + background: var(--background); + border-color: var(--on-background); + color: var(--text-color); + + margin-top: 4px; + height: 24px; + line-height: 24px; +} + +body[cardtype='grid'] #actionbar .menu-button > .chevron { + filter: var(--filter); +} + +body[cardtype='grid'] #actionbar .button:hover, +body[cardtype='grid'] #actionbar .button.menu-button.toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button:focus { + outline: 2px solid var(--primary) !important; + outline-offset: 2px; + isolation: isolate; +} + +body[cardtype='grid'] #actionbar .button:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred { + background: var(--primary); + border-color: var(--primary); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +body[cardtype='grid'] #actionbar #reload-grid-button, +body[cardtype='grid'] #actionbar .button.setup_button { + position: relative; +} + +body[cardtype='grid'] #actionbar #reload-grid-button::before, +body[cardtype='grid'] #actionbar .button.setup_button::before { + content: ''; + position: absolute; + filter: var(--filter); + top: 4px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* grid reload button */ +body[cardtype='grid'] #actionbar #reload-grid-button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath fill='%23757576' d='M14.9 6V0L13 1.9C9.8-.6 5.3-.4 2.4 2.5c-3.1 3.1-3.1 8.1 0 11.2 3.1 3.1 8.1 3.1 11.2 0 1.4-1.4 2.1-3.1 2.3-4.9h-2.7c-.1 1.1-.6 2.2-1.5 3-2.1 2.1-5.4 2.1-7.5 0-2.1-2.1-2.1-5.4 0-7.5 1.8-1.8 4.7-2 6.8-.6L8.9 6h6z'/%3E%3C/svg%3E"); + left: 8px; +} +/* grid setup button */ +body[cardtype='grid'] #actionbar .button.setup_button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M13.9 7.2l1.8-.7-1.1-2.8-1.8.7c-.3-.5-.7-.8-1.2-1.2l.7-1.8L9.6.3l-.8 1.8c-.5-.1-1.1-.1-1.6 0L6.4.3 3.6 1.4l.7 1.8c-.4.4-.8.8-1.1 1.2l-1.8-.8L.3 6.4l1.8.7c-.1.6-.1 1.2 0 1.7l-1.8.8 1.1 2.8 1.8-.7c.3.5.7.8 1.2 1.2l-.7 1.8 2.8 1.1.7-1.8c.5.1 1.1.1 1.7 0l.7 1.8 2.8-1.1-.7-1.8c.5-.3.8-.7 1.2-1.2l1.8.7 1.1-2.8-1.8-.7c0-.6 0-1.2-.1-1.7zm-4.7 3.6c-1.5.6-3.3-.1-3.9-1.6s.1-3.3 1.6-3.9c1.5-.6 3.3.1 3.9 1.6.6 1.5-.1 3.2-1.6 3.9z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* auto-refresh button enabled */ +/* Should have been a proper toggle button with aria-pressed="true" */ +body[cardtype='grid'] #actionbar .button.autorefresh-toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled::before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z'/%3E%3C/svg%3E"); + + margin-right: 8px; + margin-bottom: -3px; + + width: 16px; + height: 16px; + filter: var(--filter); + + display: inline-block; +} + +/* Grid menu */ +body[cardtype='grid'] .more-menu { + background: var(--surface); +} +body[cardtype='grid'] .more-menu .menu-item { + color: var(--on-surface); +} + +body[cardtype='grid'] .more-menu .menu-item:hover, +body[cardtype='grid'] .more-menu .menu-item:focus { + outline: none !important; + background: var(--on-surface); + color: var(--surface); +} + +/* grid container */ +body[cardtype='grid'] .stretchdiv { + background: var(--background); +} + +/* column headers */ +#headers .column { + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + + background: var(--surface); + color: var(--text-color); +} +#headers .column .ordericon { + filter: var(--filter); +} +/* column header separator */ +#headers .column .sizer #border { + background: var(--on-surface); +} +#headers .column.highlight { + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); + + background: var(--primary); +} +/* bottom bar */ +body[cardtype='grid'] .bottombar { + background: var(--surface); + color: var(--on-surface); +} +body[cardtype='grid'] .bottombar .currentpage { + color: var(--primary); +} +body[cardtype='grid'] .bottombar a { + color: var(--on-surface); +} + +/* data cells */ +div#columnsscroll { + background: var(--background); +} +div#columnsscroll .column span { + color: var(--text-color); +} +div#columnsscroll .column:is(#_status, #_changetypecolumn, #_typecolumn) span > .gridicon { + filter: var(--filter); +} +div#columnsscroll .column .normal, +div#columnsscroll .column .overduechanged, +div#columnsscroll .column .overduenew { + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +div#columnsscroll .column .overduealert { + /* Due today */ + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +div#columnsscroll .column .overduealarm { + /* Overdue */ + --text-color: var(--error); + --filter: var(--error-filter); +} +div#columnsscroll .column .archived { + --text-color: var(--primary); + --filter: var(--primary-filter); +} +/* highlight bar */ +div#columnsscroll div#selected.focus { + background: none; + border: 1px solid var(--primary); +} +div#columnsscroll div#selected.nofocus { + background: none; + border: 1px solid var(--on-background); +} +/* column separator */ +div#columnsscroll .column { + border-color: var(--on-background); +} + +/* details */ +#detailframediv .ui-resizable-handle { + filter: var(--on-background-filter); +} +#detailsbody .memocontainer { + color: var(--on-background); + border-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/agileboard/.*") { +::selection { + background: var(--selection); + color: var(--on-selection); +} + +body { + background: var(--background) !important; + + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +:is(h1, h2, h3, h4, h5, h6).title { + color: var(--text-color) !important; +} +div.title.is-5 { + /* Assign to "heading" in the 'Create note' popup */ + color: var(--text-color); +} + +p.label { + color: var(--text-color); +} +.choose-board label.filterlabel { + /* choose board select label */ + color: var(--text-color); +} + +a.has-text-link { + color: var(--primary) !important; +} +a.has-text-link:hover { + background: var(--on-background); + color: var(--background) !important; +} +a.has-text-link:focus { + outline: 2px solid var(--outline-color); + color: var(--primary) !important; +} + +#board-data-with-side-panel .resizable-container .resizer { + /* resize handle between board and sidebar */ + border-color: var(--on-background); +} + +/* + * Top row link buttons + */ +.filter-button > i.icon, +.filter-button > a, +.all-boards-button > i.icon, +.all-boards-button > a { + color: var(--text-color) !important; +} +.filter-button > a, +.all-boards-button > a { + outline: none; +} +.filter-button:hover, +.all-boards-button:hover { + --text-color: var(--primary); +} +.all-boards-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +.filter-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: -2px; +} + +.filter-header.active .filter-button { + background: var(--surface); + --text-color: var(--on-surface); +} +.filter-header.active .filter-button:hover { + --text-color: var(--primary); +} + +/* + * Filter bar + */ +.header .filter-bar { + background: var(--surface); +} +.header .filter-bar label { + color: var(--on-surface); +} +.toggle-button-group input[type='radio'] + .button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.toggle-button-group input[type='radio']:hover + .button { + background: var(--on-background); + color: var(--background); +} +.toggle-button-group input[type='radio']:active + .button { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked + .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked:hover + .button { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +.toggle-button-group input[type='radio']:focus + .button { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + z-index: 1; +} + +/* + * Button + */ +button.button, +button.calendar-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + border-color: var(--border-color) !important; + color: var(--text-color) !important; + + isolation: isolate; + + transition: none !important; +} +button.button:hover, +button.calendar-button:hover { + --bg-color: var(--on-background); + --text-color: var(--background); +} +button.button:active, +button.calendar-button:active { + --bg-color: var(--surface); + --text-color: var(--on-surface); + --border-color: var(--on-surface); +} +button.button:focus, +button.calendar-button:focus { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px !important; + box-shadow: none !important; +} +button.button .icon { + color: var(--text-color); +} + +button.button.is-primary { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +button.button.is-primary:hover { + --bg-color: var(--primary-muted); + --border-color: var(--primary-muted); +} +button.button.is-primary:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); +} + +button.button.is-primary[disabled], +button.button[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); + + pointer-events: none; +} + +button.is-primary.is-selected { + --bg-color: var(--on-background); + --text-color: var(--background); + --border-color: var(--on-background); +} + +/* assign to me button in Çreate note' popup */ +button.button.circle[disabled] { + background: var(--bg-color) !important; + border-color: var(--border-color) !important; +} + +/* + * Menu + */ +ul.button-submenu { + background: var(--surface); + color: var(--on-surface); +} +ul.button-submenu li { + --bg-color: var(--surface); + --color: var(--on-surface); + + background: var(--bg-color) !important; + color: var(--text-color) !important; +} +ul.button-submenu li:focus, +ul.button-submenu li:hover { + --bg-color: var(--on-surface); + --text-color: var(--surface); +} +ul.button-submenu li:focus { + outline: none; +} +ul.button-submenu li.item.divided { + border-top-color: var(--on-surface); +} + +/* + * Popup + */ +header.modal-card-head { + background: var(--surface); + border-color: var(--on-surface); + + --outline-color: var(--on-surface); + --text-color: var(--on-surface); +} +header.modal-card-head > .modal-card-title { + color: var(--text-color); +} +header.modal-card-head > button.delete { + background: var(--background); + border-color: var(--on-background); + + --color: var(--on-background); +} +header.modal-card-head > button.delete:hover { + background: var(--primary); + border-color: var(--primary); + + --color: var(--on-primary); +} +header.modal-card-head > button.delete:active { + background: var(--on-primary); + border-color: var(--primary); + + --color: var(--primary); +} +header.modal-card-head > button.delete:focus { + box-shadow: none; + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +header.modal-card-head > button.delete::before, +header.modal-card-head > button.delete::after, +header.modal-card-head > button.delete:active::before, +header.modal-card-head > button.delete:active::after, +header.modal-card-head > button.delete:hover::before, +header.modal-card-head > button.delete:hover::after { + background: var(--color); +} +section.modal-card-body { + background: var(--surface); + + --text-color: var(--on-surface); +} +footer.modal-card-foot { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); +} + +/* Help popup shortcuts */ +div.item.label { + color: var(--text-color); +} +div.item.label > span { + border-color: var(--on-background); + background: var(--background); + color: var(--on-background); +} + +/* + * Field + */ +.field .field-label label.label { + color: var(--text-color); +} + +.field.is-danger label.label { + color: var(--error); +} + +input.input, +textarea.textarea, +.select select { + --bg-color: var(--background); + --border-color: var(--on-background); + --text-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} + +input.input:invalid, +.select select:invalid, +.field.is-danger input.input { + --text-color: var(--error); + --border-color: var(--error); +} + +input.input:focus, +textarea.textarea:focus, +.select select:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; + box-shadow: none; +} + +input.input[disabled], +textarea.textarea[disabled], +.select select[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); +} + +.select select { + appearance: auto; +} + +input.is-checkradio + label { + --check-bg-color: var(--background); + --check-color: var(--on-background); + --check-border-color: var(--on-background); + + color: var(--text-color); + margin-left: 4px !important; /* making space for the outline */ +} +input.is-checkradio + label::before, +input.is-checkradio:checked + label::before { + background: var(--check-bg-color) !important; + border-color: var(--check-border-color) !important; + box-shadow: none !important; +} +input.is-checkradio + label::after { + border-color: var(--check-color) !important; +} +input.is-checkradio:focus + label::before { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px; +} +input.is-checkradio[type='checkbox']:hover:not([disabled]) + label::before, +input.is-checkradio[type='checkbox']:focus:not([disabled]) + label::before { + border-color: var(--check-border-color) !important; +} + +#provide-title { + /* making space for the outline of the provide title field in the create board popup */ + margin-top: 4px; +} + +/* + * Date picker + */ +#due-date-input .date-picker { + background: var(--surface); +} +#due-date-input .td-date-picker-container { + background: var(--surface); +} +#due-date-input .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-surface); +} +#due-date-input .td-date-picker-controls-container button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} +#due-date-input .td-date-picker-controls-container button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + box-shadow: none; +} +#due-date-input button.td-date-time-input-go-to-today { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input button.td-date-time-input-go-to-today:hover { + text-decoration: underline; +} +#due-date-input button.td-date-time-input-go-to-today:focus { + color: var(--primary); + text-decoration: underline; + outline: none; +} +#due-date-input table:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +#due-date-input th.td-date-picker-header-cell { + color: var(--on-surface); + background-color: var(--surface); +} +#due-date-input td.td-date-picker-cell { + border-color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label { + background: var(--background); + color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label.selectable:hover { + background-color: var(--primary-muted); + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.weekend { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.today { + color: var(--primary); + border-color: transparent !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected { + background: var(--primary) !important; + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.focused { + border-color: var(--primary) !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected.focused { + border-color: var(--on-primary) !important; +} + +/* + * Notification + */ +div.notification.is-primary { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +div.notification.is-primary .icon { + color: var(--on-background); +} +div.notification.is-danger { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--error); +} +div.notification.is-danger .icon { + color: var(--error); +} +div.notification.is-warning { + background: var(--background); + color: var(--on-background); + border: 2px solid var(--primary); +} +div.notification.is-warning .icon { + color: var(--primary); +} +div.notification.is-warning a.close { + color: var(--primary); +} +div.notification.is-warning a.close:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +div.notification.is-warning a.close:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * Board + */ + +.board .header { + background: transparent; +} +.board #lanes-headers { + background: transparent; +} +.board .lane-header { + background: var(--surface); +} +.board .lane-header .label { + color: var(--on-surface); +} +.board .lane-header .lane-task-count { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +.board .lane { + background: var(--surface); +} + +:is(.gu-unselectable, .board) .task-container { + --text-color: var(--on-background); + + background: var(--background); + border: 1px solid var(--on-background); + color: var(--text-color); +} +:is(.gu-unselectable, .board) + .task-container + div[handle='assignee-avatar-initials'] + > .vue-avatar--wrapper { + background-color: var(--background) !important; + border: 1px solid var(--on-background); + color: var(--on-background) !important; +} +:is(.gu-unselectable, .board) .task-container [handle='assignee-avatar']:focus { + outline: 1px solid var(--primary); +} + +:is(.gu-unselectable, .board) .task-container .is-black-link { + color: var(--text-color); +} +:is(.gu-unselectable, .board) .task-container .is-black-link:focus { + outline: none; + color: var(--primary); + text-decoration: underline; +} + +:is(.gu-unselectable, .board) .task-container .formatted-text { + color: var(--text-color); +} + +:is(.gu-unselectable, .board) .task-container .icon { + color: var(--text-color) !important; +} +:is(.gu-unselectable, .board) .task-container .overdue { + color: var(--error); +} + +:is(.gu-unselectable, .board) .task-container.selected { + background: var(--background); + border-color: var(--primary-muted); + + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container:focus, +:is(.gu-unselectable, .board) .task-container:focus-within { + background: var(--background); + border-color: var(--primary); + outline: none; + border-left-width: 8px; + + --text-color: var(--on-background); +} + +.board .task-container.closed:not(:focus):not(:focus-within):not(:hover) { + background: var(--disabled); + --text-color: var(--on-disabled); +} + +.board .task-container.closed:not(:focus):not(:focus-within):hover, +.gu-unselectable .task-container.closed { + background: var(--background); + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container .task-content.has-folded-corner::after { + border-color: var(--on-background) var(--surface); +} +:is(.gu-unselectable, .board) .task-container:focus .task-content.has-folded-corner::after, +:is(.gu-unselectable, .board) .task-container:focus-within .task-content.has-folded-corner::after { + border-color: var(--primary) var(--surface); +} + +.board .task-container.gu-transit { + background: var(--on-primary); + border-color: var(--primary); + --text-color: var(--primary); +} + +/* + * Sidebar + */ + +#side-panel { + background: var(--background); + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +#side-panel #side-panel-header span.card-header { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link:hover { + text-decoration: underline; +} +#side-panel #side-panel-header a.is-black-link:focus { + outline: none; + --text-color: var(--primary); + text-decoration: underline; +} +#side-panel #side-panel-header .icon { + color: var(--text-color) !important; +} +#side-panel #side-panel-header button.close-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); +} +#side-panel #side-panel-header button.close-button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#side-panel #side-panel-header button.close-button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#side-panel .parent-block { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); +} +#side-panel .parent-block .icon { + color: var(--text-color) !important; +} + +#side-panel .task-details .caller-name, +#side-panel .task-details .branch-name, +#side-panel .task-details .label, +#side-panel .content .label { + color: var(--text-color); +} +#side-panel .content .description-container { + --text-color: var(--on-background); + background: var(--background); + border: 1px solid var(--primary); +} +#side-panel .content .description-container::after { + border-color: var(--primary) var(--background); + bottom: -1px; + right: -1px; +} +#side-panel .content .description-container .creation-date, +#side-panel .content .description-container .description { + color: var(--text-color); +} + +#side-panel .progresstrail .pt-entry { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); + border-color: var(--on-surface); +} +#side-panel .progresstrail .pt-entry .pt-header, +#side-panel .progresstrail .pt-entry .pt-header .pt-date, +#side-panel .progresstrail .pt-entry a, +#side-panel .progresstrail .pt-entry .icon, +#side-panel .progresstrail .pt-entry figcaption, +#side-panel .progresstrail .pt-entry strong { + color: var(--text-color) !important; +} +#side-panel .progresstrail .pt-entry a:active { + --text-color: var(--primary); +} +#side-panel .progresstrail .pt-entry a:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +#side-panel .progresstrail .pt-entry.flagged { + --text-color: var(--on-primary); + background: var(--primary); +} +#side-panel .progresstrail .pt-entry.invisible { + border-left-color: var(--primary); +} + +/* + * Change assignee popup + */ +.change-assignee-popover:is(.positioned-above, .positioned-below) { + border-color: var(--primary); + background-color: var(--background); +} +.change-assignee-popover.positioned-above::before { + border-top-color: var(--primary) !important; +} +.change-assignee-popover.positioned-above::after { + border-top-color: var(--background) !important; +} +.change-assignee-popover.positioned-below::before { + border-bottom-color: var(--primary) !important; +} +.change-assignee-popover.positioned-below::after { + border-bottom-color: var(--background) !important; +} + +.change-assignee-popover-action-button { + --button-clr: var(--on-background); + color: var(--button-clr) !important; + background-color: transparent !important; + text-decoration: underline; +} + +.change-assignee-popover-action-button:not(:disabled):hover, +.change-assignee-popover-action-button:not(:disabled):focus-visible { + --button-clr: var(--primary); +} + +.change-assignee-popover-action-button:disabled { + --button-clr: var(--disabled); +} + +.change-assignee-popover-divider { + border-color: var(--on-background) !important; +} + +.change-assignee-popover .user-list .user-list-option:hover, +.change-assignee-popover .user-list .user-list-option:focus { + background-color: var(--primary); + --text-color: var(--on-primary); +} +.change-assignee-popover .user-list .user-list-option [handle='user-list-option-name'] { + color: var(--text-color); +} +@media (forced-colors: none) { + .change-assignee-popover .user-list .user-list-option:focus { + outline: none; + } +} + +/* + * Edit Board popup + */ +[role='dialog'] [role='tablist'] [role='tab'] a { + color: var(--on-background); + border-bottom-color: var(--on-background); +} +[role='dialog'] [role='tablist'] [role='tab'].is-active a { + color: var(--primary); + border-bottom-color: var(--primary); +} + +/* Integration switch */ +.status-mapping .mapping.checkbox { + background: transparent; + color: var(--on-surface); +} +.status-mapping .mapping.checkbox .toggle { + border: 2px solid var(--on-surface); + background: var(--background); +} +.status-mapping .mapping.checkbox .toggle .toggle-inner { + margin: 0; + border: 2px solid var(--on-background); + background-color: var(--background); +} +.status-mapping .mapping.checkbox .toggle.enabled .toggle-inner { + background-color: var(--on-background); +} + +/* labels */ +.dnd-hint, +.lane-name.label { + color: var(--on-surface); +} + +/* status mapper */ +.lanes .status, +.lanes .status.closed { + --text-color: var(--on-background); + + background-color: var(--background); + border: 2px solid var(--on-background); +} +.lanes .status .name { + color: var(--text-color); +} +.lanes .status:hover, +.lanes .status.closed:hover { + background-color: var(--on-background); + --text-color: var(--background); +} +.lanes .status + .status { + margin-top: 4px; +} + +/* status mapper drag and drop */ +.lanes .status.gu-transit { + background: var(--background) !important; + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone, +.lanes .lane.closed .lane-settings-content.lane-drop-zone { + background: var(--background) !important; +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.allowed.over { + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.notAllowed { + background: var(--disabled) !important; + border: 2px solid var(--background); +} + +/* + * Create note popup + */ +.modal-card-foot .feedback-link { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-buttons.*") { +/* + * Module Page Buttons + */ + +html, +body { + background: var(--surface); +} + +.richbutton { + border-color: var(--on-surface); + background: var(--background); + + overflow: auto; /* richbutton-image clips through the rounded corners of the border */ +} +.richbutton .richbutton-title, +.richbutton .richbutton-description { + color: var(--on-background); +} +.richbutton .richbutton-image { + background: var(--background); + color: var(--on-background); +} + +.richbutton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.richbutton:hover, +.richbutton:active { + border-color: var(--primary); +} +.richbutton:is(:hover, :active) .richbutton-title { + color: var(--primary); +} +.richbutton:is(:hover, :focus-visible) .richbutton-image { + background: var(--background); + color: var(--primary); +} + +.richbutton:active .richbutton-image { + background: var(--primary); + color: var(--on-primary); +} + +.richbutton .richbutton-new { + background: var(--primary); + color: var(--on-primary); +} + +@media (prefers-reduced-motion: no-preference) { + .richbutton .richbutton-image { + transition: transform; + transform-origin: center bottom; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + .richbutton:hover .richbutton-image { + transform: scale(1.1); + transition-duration: 0.15s; + transition-timing-function: ease-out; + } +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-migration-information.*") { +/* + * Module Page Migration + */ + +html, +body { + background: var(--surface); + color: var(--on-surface); +} + +a { + color: var(--primary); +} +a:hover { + color: var(--primary-muted); +} +a:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +button.button.is-primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} + +button.button.is-primary:focus { + color: var(--on-primary); +} +button.button.is-primary:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*") { +/* + * Asset overview + */ + +/* + * !! Ignoring keyboard focus, as the page is completely unworkable by keyboard. + */ + +*, +*::after { + box-shadow: none !important; +} +body { + background: var(--background); + color: var(--on-background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +input[type='text'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +input[type='text']:disabled { + background: var(--background); + color: var(--on-background); + border-color: var(--disabled); +} +label.checkboxButton { + --color: var(--on-background); + --bg: var(--background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; + transition: none !important; +} +label.checkboxButton > .icon.check { + color: var(--color) !important; +} +label.checkboxButton > span.label { + /* 'Range' checkbox label for a count filter */ + color: var(--color); +} +label.checkboxButton:hover { + --color: var(--primary); + --border-color: var(--primary); +} +.overview card-header > .title > .details { + color: var(--on-background); +} + +/* Share link */ +.share-link .shareLink span { + color: var(--on-background); + text-decoration: underline; +} +.share-link .shareLink i.tiny.icon:first-child { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.share-link .shareLink:hover span { + color: var(--primary); +} +.share-link .shareLink:hover i.tiny.icon:first-child { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} + +.share-link .popover .popover-popup { + border-color: var(--surface); +} +.share-link .popover .popover-popup::after { + border-color: var(--surface); +} +.share-link .popover .popover-popup .head, +.share-link .popover .popover-popup .content, +.share-link .popover .popover-popup .foot { + background: var(--surface); + border-color: var(--on-surface); + color: var(--on-surface); +} +.share-link .popover .popover-popup .head .icon { + color: var(--on-surface); +} +.share-link .popover .popover-popup .foot .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.share-link .popover .popover-popup .foot .button:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.share-link .popover .popover-popup .foot .button:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +/* New button */ +.ui.button.tdButton.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.ui.button.tdButton.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary.active { + /* menu open */ + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} + +.ui.button.tdButton.dropdown .menu.white { + border: none; + background: var(--surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input { + padding: 8px; + border-color: var(--on-surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input { + border: 1px solid transparent; +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input:focus { + border-color: var(--on-surface); +} + +.ui.button.tdButton.dropdown .menu.white .item { + color: var(--on-surface); + border-bottom: none; + padding: 8px 16px; + font-size: 0.875rem; + width: 150px; +} +.ui.button.tdButton.dropdown .menu.white .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.ui.button.tdButton.dropdown .menu.white .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Toolbar */ +card-header .toolbars .toolbar .split.buttons { + border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons :where(.tdButton, .tdActionButton, [role='button']) { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .refresh:before { + color: var(--color); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']).active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu { + border: none !important; +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu a.tdButton { + --bg: var(--surface); + --color: var(--on-surface); + + padding: 8px 16px; +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton[aria-disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton:hover:not([aria-disabled='true']) { + --bg: var(--on-surface); + --color: var(--surface); +} + +/* Toolbar 'columns' menu, filter panel 'add filter' menu, and filter panel 'context' menus */ +.dropdown-content.menu { + background: var(--surface); + color: var(--on-surface); + border: none; +} +.dropdown-content.menu::after { + /* Setting this to important so it also works for the add filter menu */ + border-top-color: var(--surface) !important; +} +.dropdown-content.menu .search { + border-color: var(--on-surface); +} +.dropdown-content.menu .search .icon { + color: var(--on-background); + right: 16px; +} +.dropdown-content.menu .search input { + height: initial; + padding: 8px; + border: 1px solid transparent; +} +.dropdown-content.menu .search input:focus { + border-color: var(--on-surface); +} +.dropdown-content.menu .header { + background: var(--background); + color: var(--on-background); + border-top: 4px solid var(--surface); +} +.dropdown-content.menu .footer { + border-color: var(--on-surface); +} +.dropdown-content.menu .item { + --filter: var(--on-surface-filter); + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; +} +.dropdown-content.menu .item .icon.small { + filter: var(--filter) !important; +} +.dropdown-content.menu .item label, +.dropdown-content.menu .item.is-active label, +.dropdown-content.menu .item .filter-header label { + /* Item label in add filter menu and filter context menu*/ + color: var(--color); +} +.dropdown-content.menu .item.selected, +.dropdown-content.menu .item.is-active { + --filter: var(--on-primary-filter); + --bg: var(--primary); + --color: var(--on-primary); +} +.dropdown-content.menu .item:hover { + --filter: var(--surface-filter); + --bg: var(--on-surface); + --color: var(--surface); +} +.dropdown-content.menu .item.disabled { + opacity: initial; + --bg: var(--disabled); + --color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} +.dropdown-content.menu .item [role='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} +.dropdown-content.menu .item [role='checkbox'] > .check { + color: var(--on-background); +} +.dropdown-content.menu .footer .tdActionButton.reset { + --bg: var(--surface); + --color: var(--primary); + padding: 8px; + text-decoration: underline; +} + +/* + * Filter panel + */ +asset-filter.panel { + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header { + border-color: var(--on-background); +} +asset-filter.panel > .header span { + color: var(--on-background); +} +asset-filter.panel .bordered { + border-color: var(--on-background); +} +asset-filter.panel .subheader { + color: var(--on-background); +} +asset-filter.panel .subheader .icon { + color: var(--on-background); +} +asset-filter.panel .filter-message { + color: var(--on-background); +} +/* Collapse/expand button */ +asset-filter.panel > .header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* Search */ +asset-filter.panel > .content .highlighted { + background: var(--primary); + border-bottom: 1px solid var(--on-background); +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input { + height: 2rem; + border-color: transparent; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input:focus { + outline: 2px solid var(--on-primary); + outline-offset: 2px; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch .icon { + color: var(--on-background); + display: flex; + align-items: center; +} + +/* Saved filters actions */ +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button { + background: var(--background); + color: var(--on-background); + transition: none !important; + text-shadow: none !important; +} +asset-filter.panel + .filter-overviews + .subheader + .icon-buttons + button.icon-button:not(:disabled):hover { + background: var(--on-background); + color: var(--background); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:active { + background: var(--surface); + color: var(--on-surface); + border: 1px solid var(--on-surface); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:disabled { + color: var(--disabled); +} +/* Saved filters action popups */ +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup { + background: var(--surface); + color: var(--on-surface); + border-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup::after { + border-top-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup + .foot { + background: var(--surface); + border-color: var(--on-surface); +} +/* Filter visibility dropdown */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown { + --color: var(--on-surface); + + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .icon { + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown:hover { + --color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu { + border: 1px solid var(--on-surface); + border-radius: 0; + + width: fit-content; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item { + background: var(--surface); + color: var(--on-surface); + + padding: 8px 16px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item.selected { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* Saved filters save action popup */ +asset-filter.panel .filter-overviews .save-view-component .popover .popover-popup input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier { + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a { + color: var(--primary); + text-decoration: underline; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a:hover { + color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + .icon { + color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + span { + color: var(--on-surface); +} +/* Saved filters save action save button */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary { + color: var(--on-primary); + background: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:hover { + color: var(--on-primary); + background: var(--primary-muted); + border-color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:active { + color: var(--primary); + background: var(--background); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button:disabled { + color: var(--on-disabled); + background: var(--disabled); + border-color: var(--on-disabled); +} +/* Saved filters delete popup delete button */ +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive { + color: var(--on-error); + background: var(--error); + border-color: var(--error); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:active { + color: var(--error); + background: var(--on-error); + border-color: var(--error); +} +/* Saved filters delete popup cancel button */ +asset-filter.panel .filter-overviews .delete-view-component .popover .popover-popup .foot button { + color: var(--on-background); + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:active { + color: var(--on-surface); + background: var(--surface); + border-color: var(--on-surface); +} +/* Saved filters list */ +asset-filter.panel .filter-overviews li { + --color: var(--on-background); + color: var(--color); +} +asset-filter.panel .filter-overviews li .icon.edited { + color: var(--color); +} +asset-filter.panel .filter-overviews li:hover { + --color: var(--background); + background: var(--on-background); +} +asset-filter.panel .filter-overviews li.selected { + --color: var(--on-primary); + background: var(--primary); +} + +/* Filter */ +asset-filter.panel .asset-filter-item .filter-header > :is(.icon, label, .filter-title) { + color: var(--on-background); +} +/* delete button/context menu button */ +asset-filter.panel .asset-filter-item .filter-header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:hover > .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:active > .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* add filter button */ +asset-filter.panel .actions .create.tdActionButton > .icon.add { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:hover > .icon.add { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:active > .icon.add { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel .actions .create.tdActionButton > .icon.chevron { + color: var(--on-background); +} +/* filter with buttons */ +asset-filter.panel .asset-filter-item .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + transition: none !important; +} +asset-filter.panel .asset-filter-item .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .tdButton:active { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel .asset-filter-item .tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +/* filter with select */ +asset-filter.panel .asset-filter-item [role='combobox'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text { + color: var(--on-background); + opacity: initial; +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.clickable:hover { + color: var(--primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.opened::after { + color: var(--on-surface); + border-color: var(--surface); + background: var(--surface); + opacity: initial; +} +/* filter with select menu */ +asset-filter.panel .asset-filter-item [role='combobox'] .menu { + background: var(--surface); + border-color: var(--surface); + --color: var(--on-surface); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item { + color: var(--color); + padding: 4px 2px; + border-color: transparent; +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item .icon { + color: var(--color); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +/* filter on date */ +asset-filter.panel .asset-filter-item .dateField > input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background) !important; +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu { + border-color: var(--surface); +} +/* filter on date ranges */ +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges { + background: var(--surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li { + color: var(--on-surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li.active { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li:hover { + background: var(--on-surface); + color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs { + background: var(--surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Filter on date custom range calendar */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Filter on date custom range calendar table */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} +/* filter field focus */ +asset-filter.panel .asset-filter-item .filter-content > input[type='text']:focus, +asset-filter.panel .asset-filter-item [role='combobox']:focus-within, +asset-filter.panel .asset-filter-item input[type='text'].numberField:focus, +asset-filter.panel .asset-filter-item .dateField > input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Types */ +asset-filter.panel .typeFilters li { + --color: var(--on-background); +} +asset-filter.panel .typeFilters li > span { + color: var(--color); +} +asset-filter.panel .typeFilters li:hover { + background: var(--on-background); + --color: var(--background); +} + +/* Grid */ +grid .overviewFooter { + margin-top: 1rem; + background: transparent; + border: none; +} +grid .overviewFooter p { + color: var(--on-background); +} +grid .pagination { + color: var(--on-background); + margin-bottom: 1rem; +} +grid .pagination .loadMore { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +grid .pagination .loadMore:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +grid .pagination .loadMore:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +grid .pagination p { + color: var(--on-background); +} +/*Grid table*/ +grid table.tdGrid { + border: none; +} +grid table.tdGrid thead { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: transparent; + + border-bottom: 1px solid var(--on-surface); +} +grid table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +grid table.tdGrid :is(th, td) { + background: var(--bg) !important; + color: var(--color) !important; + + border-left: none !important; +} +grid table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +grid table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +grid table.tdGrid th.check, +grid table.tdGrid tbody tr td.check { + vertical-align: top; + padding-top: 10px; +} +grid table.tdGrid tbody tr td { + vertical-align: top; + padding: 8px; +} +grid table.tdGrid tbody tr td .row-element { + align-items: flex-start; +} +grid table.tdGrid tbody tr td .row-element .icon { + color: var(--color); +} +grid table.tdGrid tbody tr td .row-element .icon.interruption { + color: var(--error) !important; +} +grid table.tdGrid tbody tr td .row-element p { + margin: 0; +} +grid table.tdGrid tbody tr td .row-element .details { + color: var(--color); +} +grid table.tdGrid [data-tooltip]::after { + /* tooltip */ + background: var(--surface); + color: var(--on-surface); +} + +/* Feedback button */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / Bulk action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction p, +.tdOverlay .body .instruction .icon { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* import popup */ +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton > .icon.expanded { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton:hover > .icon.expanded { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset + .body.upload + > .accordion + > .title + > .tdActionButton:active + > .icon.expanded { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > span { + color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .content ul li { + color: var(--on-surface) !important; +} +.tdOverlay.importAsset .body.upload > .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea.drag-over { + border-color: var(--primary); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* export popup */ +.tdOverlay.exportAsset > .body > .info > .icon.spreadsheet { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body > .info > p { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body .field + .field { + margin-top: 4px; +} + +.tdOverlay.exportAsset > .body .radio.checkbox { + display: flex; + align-items: center; + + --pip: var(--background); + --border-color: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox.checked { + --pip: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox:hover { + --pip: var(--primary); + --border-color: var(--primary); +} +.tdOverlay.exportAsset > .body input[type='radio'] { + appearance: none; + border: 1px solid var(--on-background); + border-radius: 50%; + height: 14px; + aspect-ratio: 1; + background: var(--background); + + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 3px var(--pip) !important; + border-color: var(--border-color); +} +.tdOverlay.exportAsset > .body input[type='radio']:checked { + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 7px var(--pip) !important; +} + +/* + * AM is transitioning to DS components, the styles needed to make that work live here. + */ + +/* Bulk edit button */ +bulk-edit-button { + background: transparent; /* Background of the container for the button, i.e. not the button itself */ + + --bulk-edit-button-background-color: transparent; /* background */ + --bulk-edit-button-text-color: var(--on-background); /* foreground */ + --bulk-edit-button-border-color: var(--on-background); /* border */ +} + +/* + * Feedback link, Copy of DS component feedback link + */ +feedback-link { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +feedback-link:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ + + /* --ds-color-bg-insight-emphasis: var(--on-background); :active background */ +} +feedback-link:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ +} +feedback-link:focus-within { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +overview-grid { + color: var(--on-background); /* Selection count */ + + /* + * Copy of design-system/search.css + */ + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ + + /* + * Copied and adjusted to fit from design-system/datatable.css + */ + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* --ds-color-fg-primary-subtle clashes with the pagination, so I can't use --on-background here as in the normal ds-datatable */ + --ds-color-bg-primary-emphasis: var(--primary); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + /* --ds-color-border-primary-default: var(--on-background); status loading (Clashes with search :focus & :hover styling) */ + --ds-color-border-warning-default: var(--error); /* status error */ + + /* + * Slotted content + */ + --ds-color-fg-primary-default: var(--on-background); /* table row:not(:checked) icon color */ + --ds-color-fg-primary-emphasis: var(--on-background); /* table row:checked icon color */ + + --ds-color-bg-danger-mild: var(--error); /* impacted tag background */ + --ds-color-fg-danger-emphasis: var(--on-error); /* impacted tag foreground */ + + /* To make the header and footer readable in older version of ds table. */ + --ds-color-bg-subtle: var(--background); + + /* + * Copy of design-system/pagination.css + */ + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground (clashes with checkmark in table) */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ + + /* Special variable for slotted links in the table */ + --overview-link-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/card.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/settings.*") { +*, +*::after, +*::before { + box-shadow: none !important; + transition: none !important; +} +body { + background: var(--background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +h1 { + color: var(--on-background); +} +.tdTab { + padding: 0 16px; /* Aligning content with header, and other cards in topdesk */ + z-index: 0; +} +i.loading::before { + border-color: var(--on-primary) !important; +} +i.loading::after { + border-color: var(--primary) !important; +} + +/* + * Card toolbar + */ +/* Warning message */ +card-header .toolbars .toolbar .warning.message { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} +card-header .toolbars .toolbar .warning.message a { + color: var(--primary); +} +card-header .toolbars .toolbar .warning.message a:hover { + background: var(--primary); + color: var(--on-primary); +} +/* Button container */ +card-header .toolbars .toolbar .split.buttons { + border: none; /* There's a weird space between the button and the border of the container */ + min-height: unset; /* Re-adjust the height */ +} +card-header .toolbars .toolbar .split.buttons .tdButton.iconed::before { + margin-top: 2px; /* Adjust the icons to sit in the center vertically */ +} +/* Buttons */ +card-header .toolbars { + /* + * Isolating the toolbars to their own layer. + * This keeps disabled buttons visible (they have z-index:-1) in the graphical overview. + * And the z-index: 1 makes sure the menus draw on top of the card content. + */ + z-index: 1; +} +card-header .toolbars .toolbar .tdButton, +card-header .toolbars .toolbar .dropdown[data-handle='more'] { + /* More button in template designer */ + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border: 1px solid var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .tdButton:not(:first-child) { + margin-left: -1px; /* Move adjacent button borders on top of eachother */ +} +card-header .toolbars .toolbar .tdButton:hover, +card-header .toolbars .toolbar .tdButton.dropdown.active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'].active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .tdButton:active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:active { + --bg: var(--background); + --color: var(--primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton:disabled, +card-header .toolbars .toolbar .tdButton.enabled.active /* View toggle */ { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); + z-index: -1; /* Prefer the border of non-disabled buttons */ +} +card-header .toolbars .toolbar .tdButton.iconed::before { + color: var(--color); +} +card-header .toolbars .toolbar .tdButton:focus-visible, +card-header .toolbars .toolbar .dropdown[data-handle='more']:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + z-index: 1; /* The outline should be on top of adjacent buttons */ +} +/* Dropdown menu */ +card-header .toolbars .toolbar .tdButton.dropdown .menu, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu { + border: none !important; + border-radius: unset; +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item { + border: none !important; + margin-left: unset; + padding: 8px 16px; + + --bg: var(--surface); + --color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item:hover, +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item.selected, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item.selected { + --bg: var(--on-surface); + --color: var(--surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item[disabled='true'], +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item[disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} + +/* +* General Widget things +*/ +.tdWidgetContainer { + border: none; +} +/* Error indicator. This just pops up in some places */ +.state.conflict.icon { + color: var(--error) !important; +} +/* title/toolbar */ +.tdWidgetContainer .toolbar { + background: var(--surface); + border: none; +} +.tdWidgetContainer .toolbar .editable-title { + color: var(--on-background); +} +.tdWidgetContainer .toolbar .toolbarSeparator { + background: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item:hover { + color: var(--primary); +} +.tdWidgetContainer .toolbar .items button.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer .toolbar .items button.item[disabled] { + background: var(--disabled); + color: var(--on-disabled); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown > :is(.icon, label) { + color: var(--text-color); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown { + --text-color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown:hover { + --text-color: var(--primary); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active { + background: var(--on-surface); + --text-color: var(--surface); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu { + background: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item.active:hover { + /* The .active class does not seem to have a purpose, but forces a background that is equal to normal hover nonetheless */ + background: var(--on-surface) !important; + color: var(--surface) !important; +} +/* Toolbar popout area */ +.tdWidgetContainer .workareas .workarea { + background: var(--surface); + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .body > .icon { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea :is(.fieldlabels, .message, h4) { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer { + border-color: var(--on-surface); + border-bottom: none; +} +/* Toolbar popout area buttons */ +.tdWidgetContainer .workareas .workarea .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:disabled { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* Inline dropdown, like selects but somehow different */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover + .chevron { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu { + background: var(--background); + border: 1px solid var(--on-background); + border-radius: 0px; + + left: unset; + right: unset; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item { + background: var(--background); + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item:hover { + background: var(--on-background); + color: var(--background); +} +/* Checkboxes, also slightly different then in widget content for some reason */ +.tdWidgetContainer .workareas .workarea .field .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton .check { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Empty widget */ +.tdWidgetContainer:not([data-handle='relationshipWidget']) .widget > .empty :is(.icon, span) { + /* see the relationship widget for the reason of the exception here */ + color: var(--on-background); +} + +/* + * Fields + */ +/* labels */ +.field .fieldlabels { + color: var(--on-background); +} +.field .fieldlabels.error { + color: var(--error); +} +/* text field */ +.field .fields.textField :where(input, textarea) { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.textField :where(input, textarea).error { + background: var(--background); + color: var(--error); + border-color: var(--error); +} +.field .fields.textField :where(input, textarea):focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* select */ +.field .fields.suggestField .selection { + --color: var(--on-background); + + background: var(--background); + color: var(--color); + border-color: var(--on-background); +} +.field .fields.suggestField .selection.error { + --color: var(--error); + + background: var(--background); + border-color: var(--error); +} +.field .fields.suggestField .selection .chevron { + color: var(--color); +} +.field .fields.suggestField .selection input { + color: var(--color); + outline: none; +} +.field .fields.suggestField .selection .text { + color: var(--color); + opacity: revert; +} +.field .fields.suggestField .selection .text.clickable::after { + color: var(--primary); + border-color: var(--primary); + opacity: revert; +} +.field .fields.suggestField .selection:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field .fields.suggestField .selection .menu { + border-radius: 0; + border: 1px solid var(--on-background); +} +.field .fields.suggestField .selection .menu .item { + --bg: var(--background); + --color: var(--on-background); + border: none; + + background: var(--bg); + color: var(--color); + padding: 8px; +} +.field .fields.suggestField .selection .menu .item .icon { + color: var(--color) !important; +} +.field .fields.suggestField .selection .menu .item.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +.field .fields.suggestField .selection .menu .item .inactive { + --color: var(--disabled); +} +.field .fields.suggestField .selection .menu .item:hover { + --bg: var(--on-background); + --color: var(--background); +} +.field .fields.suggestField .selection .menu .item > .overflow { + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.suggestField .selection .message { + background: var(--background); + color: var(--on-background); +} +.field .fields.suggestField .selection .placeholder { + color: var(--on-background); +} +/* Checkbox */ +.field .fields.checkboxField .checkboxButton { + --color: var(--on-background); + + background: var(--background); + border-color: var(--on-background); +} +.field .fields.checkboxField .checkboxButton.disabled { + --color: var(--on-disabled); + + background: var(--disabled); + border-color: var(--on-disabled); +} +.field .fields.checkboxField .checkboxButton.checked.disabled { + --color: var(--on-background); + + background: var(--background); + border-color: var(--background); +} +.field .fields.checkboxField .checkboxButton .check { + color: var(--color); +} +.field .fields.checkboxField .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Numberfield */ +.field .fields.numberField .inputWithDecorationContainer { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field .fields.numberField .inputWithDecorationContainer.error { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.numberField input { + background: var(--bg); + color: var(--color); + border-color: var(--border); +} +.field .fields.numberField :where(.pre, .post) { + color: var(--color) !important; +} +.field .fields.numberField input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Datetimefield */ +.field .fields.dateTimeField { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field[aria-invalid='true'] .fields.dateTimeField { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.dateTimeField :where(.dateField, .timeField) { + border: 1px solid var(--border); +} +.field .fields.dateTimeField input { + background: var(--bg); + color: var(--color); + border: none; +} +.field .fields.dateTimeField .timeField { + border-left: none; +} +.field .fields.dateTimeField .timeField .icon.time { + color: var(--color); +} +.field .fields.dateTimeField input::placeholder { + color: var(--color); +} +.field .fields.dateTimeField :where(.dateField, .timeField):focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* time field layout fix, i.e. place clock icon inside field */ +.field .fields.dateTimeField .dateField { + flex: revert; + flex-grow: 1; +} +.field .fields.dateTimeField .timeField { + flex: revert; + width: 9ch; + + display: flex; + flex-direction: row-reverse; +} +.field .fields.dateTimeField .timeField input { + padding-right: 3px; +} +.field .fields.dateTimeField .timeField .handle { + background: var(--bg); + display: flex; + align-items: center; + padding-left: 3px; +} +.field .fields.dateTimeField .timeField .handle .icon.time { + margin-top: 2px; + margin-right: -2px; +} +/* date field datepicker */ +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar { + background: var(--surface); + border-color: var(--surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * General widget + */ +/* collapsed ID and specification */ +.tdWidgetContainer[data-handle='generalWidget'] section > label { + color: var(--on-background) !important; +} +/* edit button */ +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand .icon { + background: var(--bg); + color: var(--pen); + border-color: var(--circle); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand { + --bg: var(--background); + --pen: var(--on-background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:hover { + --bg: var(--on-background); + --pen: var(--background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:active { + --bg: var(--surface); + --pen: var(--on-surface); + --circle: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* status display */ +.tdWidgetContainer[data-handle='generalWidget'] .status-display :is(.text, .icon, .status.label) { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu { + border-radius: 0; + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item { + background: var(--surface); + color: var(--on-surface); + padding: 8px 4px; + border: 2px solid var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item.selected { + background: var(--background); + color: var(--primary); + border-color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); + border-color: var(--on-surface); +} +/* status switch */ +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::after { + box-shadow: inset 0 0 0 2px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='generalWidget'] + .status-switch + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-icon: var(--background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted { + --thumb-bg: var(--error); + --thumb-icon: var(--on-error); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch[disabled='true'] { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--background); + --thumb-icon: var(--on-background); + --thumb-border: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted[disabled='true'] { + --thumb-icon: var(--error); + --thumb-border: var(--error); +} +/* asset icon */ +.tdWidgetContainer[data-handle='generalWidget'] .icon.assettype { + color: var(--on-background) !important; + border-color: var(--on-background) !important; /* separator */ +} + +/* + * History widget + */ +.tdWidgetContainer[data-handle='historyWidget'] .togglebuttons { + border-color: var(--on-background); +} +/* buttons */ +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* feed */ +.tdWidgetContainer[data-handle='historyWidget'] h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .feed .label .icon { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event:not(:last-of-type) { + margin-bottom: 16px; /* Spread each record a bit for readability */ +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .act { + /* If summary spills into multiple lines, subsequent lines get a little indent */ + text-indent: -8px; + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .description { + font-weight: normal; /* allow the user to "pop" */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .summary + :is(.user, .description, .date), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + :is(.fieldname, .decorator, .value), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .icon.small, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + .value.new, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .briefDescription + > span:last-of-type, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content { + line-height: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .content { + padding-top: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > * { + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > *:first-child { + padding-left: revert; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + text-decoration: underline; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a:hover { + color: var(--primary-muted); +} +/* pagination */ +.tdWidgetContainer[data-handle='historyWidget'] + .pagination + :is(.items-summary, .items-summary__number, p) { + color: var(--on-background); +} + +/* + * Relationship widget + * + * This widget can't be styled at the moment. The asset part of the widget uses a custom element with shadow DOM that + * can not (yet) be styled with Stylus (https://github.com/openstyles/stylus/issues/739). + * + * And for some reason the custom element root itself does not take a background color, so the whole widget must be + * reset to the original background color. + * + * Styling only the services part would then make the widget become disjointed. + */ +.tdWidgetContainer[data-handle='relationshipWidget'] .relationship.widget { + background: white; +} + +/* + * Assignment widget + */ +.tdWidgetContainer[data-handle='assignmentWidget'] h4 { + color: var(--on-background); +} +/* items */ +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* + * Dataset widget + */ +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead th { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td { + color: var(--color); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton .check { + color: var(--on-background); +} + +/* + * Documents widget + */ +/* File drop area */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea.drag-over { + color: var(--primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Files to upload */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item { + border-bottom: none; +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item > :is(.icon, .content) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* File upload progress */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress { + background: var(--background); + border: 1px solid var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress .bar { + background: repeating-linear-gradient( + -45deg, + var(--primary) 0px, + var(--primary) 16px, + var(--primary-muted) 16px, + var(--primary-muted) 32px + ); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress.error .bar { + background: var(--error) !important; +} +/* document list */ +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* +* Relationship grid widget +*/ +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode { + margin: 0; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header { + padding: 12px 16px; + background: var(--surface); + margin: 0; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header :is(.icon, h4) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid { + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead th { + padding: 12px 16px; + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody td { + padding: 6px 16px; + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .row-element + :is(.icon, .details) { + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton + .check { + color: var(--on-background); +} + +/* +* Reservations widget +*/ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .column + .column { + border-color: var(--on-background); +} +/* switch label */ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .row span { + color: var(--on-background); +} +/* switch control */ +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::after { + box-shadow: inset 0 0 0 1px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(12px); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle.disabled { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--disabled); + --thumb-border: var(--on-disabled); +} + +/* + * Graphical overview + */ +body .card.takeoverMode { + background: var(--background); +} +body .card.takeoverMode card-header { + background: none; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle { + stroke: unset; + fill: unset; +} +body .card.takeoverMode .graphicalOverview .nodes .node, +body .card.takeoverMode .graphicalOverview .nodes .node .action { + --bg: var(--background); + --icon: var(--on-background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:hover, +body .card.takeoverMode .graphicalOverview .nodes .node .action:hover { + --bg: var(--on-background); + --icon: var(--background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:active, +body .card.takeoverMode .graphicalOverview .nodes .node .action:active { + --bg: var(--surface); + --icon: var(--on-surface); + --border: var(--on-surface); +} +/* Node */ +body .card.takeoverMode .graphicalOverview .nodes .node circle.invisible { + fill: var(--bg); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.highlight { + fill: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.nodeborder { + fill: var(--bg); + stroke: var(--border); + stroke-width: 1px; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.selectable { + stroke: var(--primary); + stroke-width: 3px; +} +body + .card.takeoverMode + .graphicalOverview + .nodes + .node + circle.selectable:not([r='0']) + ~ circle.nodeborder { + --border: var(--background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.red { + stroke: var(--error); /* impacted node */ + fill: var(--bg); +} +/* Node action */ +body .card.takeoverMode .graphicalOverview .nodes .node .action circle { + fill: var(--bg); + stroke: var(--border); +} +/* icon */ +body .card.takeoverMode .graphicalOverview .nodes .node use { + fill: var(--icon); +} +/* Node label */ +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel rect { + fill: var(--surface); +} +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel text { + fill: var(--on-surface); +} +/* Edges */ +body .card.takeoverMode .graphicalOverview .edges path { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .paths text { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .arrowLabels textPath { + fill: var(--on-background); +} + +/* + * Graphical overview sidebar + */ +body .card.takeoverMode .cardPreview .header { + background: var(--surface); + border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header :is(.previewTitle, .previewSubTitle) { + color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close .icon { + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +body .card.mini .fieldset.widget .field .fieldlabels { + color: var(--on-background); +} + +/* + * Feedback button + */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction :is(p, .icon, h4) { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .instruction, +.tdOverlay.confirmArchive .fieldlabels { + color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/*************** + * DESIGN MODE * + ***************/ + +card-header .editable-title { + color: var(--on-background); +} + +/* + * card/widget title edit + */ +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input { + background: var(--background) !important; + color: var(--on-background) !important; + border-color: var(--on-background) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Drag handles + */ +.dragHandle .icon { + color: var(--color) !important; +} +.dragHandle:hover { + --color: var(--primary) !important; +} +/* Field drag handle */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .dragHandle { + --color: var(--on-background); +} + +/* Dragging widget background */ +.tdWidgetContainer.being-dragged.drag-element { + background: var(--background); +} +/* Dragging field background */ +.field.being-dragged { + background: var(--background); + border: 1px solid var(--primary); +} +/* Widget drop target */ +.drop-zone.drag-over::before { + border-color: var(--primary) !important; + background: var(--background) !important; +} +.drop-zone.drag-over::after { + background: var(--primary) !important; +} + +/* + * Toolbar + */ +/* Toolbar drag handle */ +.tdWidgetContainer .toolbar.designmode .dragHandle { + --color: var(--on-surface); +} +/* delete button */ +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] { + --color: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +/* Extra actions */ +.tdWidgetContainer .toolbar.designmode .dropdown.item { + --color: var(--on-surface); + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item.active { + --color: var(--surface); + background: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item { + background: var(--surface); + color: var(--on-surface); + + padding: 6px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item.disabled { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Layout toggle button + */ +card-header .toolbars .toolbar .split.buttons .tdButton.toggle.active { + /* Design mode layout toggle */ + background: var(--disabled) !important; + color: var(--on-disabled) !important; + border-color: var(--on-disabled) !important; + z-index: -1; /* Prefer the border of non-disabled buttons */ +} + +/* + * Mandatory toggle on fields + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + border-color: var(--border-color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory.active { + --bg: var(--background); + --color: var(--error); + --border-color: var(--error); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory::before { + color: var(--color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] + .fieldset.widget + .field + .toggle.mandatory:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Field selection + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field { + border: 1px solid transparent; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field.selectedForEditing { + background: var(--background); + border: 1px solid var(--primary); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:hover { + background: var(--background); + border: 1px solid var(--on-background); +} + +/* + * Grid widget + */ +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget .field.draggable { + --color: var(--on-surface); /* takes care of the drag-handle color as well */ + background: var(--surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable.drop-zone.drag-over { + box-shadow: -2px 0 0 var(--primary) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget .field label { + color: var(--color); +} + +/* + * Workarea + */ +/* Suggest field items */ +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon::before { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon:hover::before { + color: var(--primary); +} +/* Field id description */ +.tdWidgetContainer .workareas .workarea .fieldID .fields span:is(.label, .value) { + color: var(--on-surface); +} +/* Add/create field switch */ +.tdWidgetContainer .workareas .workarea .addcreate-switch > label { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch > label.active { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label { + background: var(--on-background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::before { + background: var(--background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::after { + background: var(--on-background) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer + .workareas + .workarea + .addcreate-switch + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +/* Inline field drop down field type icons */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text > .icon, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item > .icon { + color: var(--color); +} + +/* + * General widget + */ +/* General widget numbering example */ +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .autonumberExample + :is(.title, .example) { + color: var(--on-surface); +} +/* Change icon grid */ +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body p { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list { + background: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item { + --color: var(--on-surface); + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:focus { + outline: 2px solid var(--color); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .body + .list + .item + > :is(.content, .icon) { + color: var(--color) !important; +} + +/* + * Web widget + */ +/* Web widget insert url part dropdown */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton { + --icon-bg: var(--background); + --icon-fg: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-fg: var(--background); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:active { + --icon-bg: var(--surface); + --icon-fg: var(--on-surface); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + > .add.icon { + background: var(--icon-bg); + color: var(--icon-fg); + border-color: var(--icon-border); +} +/* Web widget insert url part dropdown menu*/ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu::after { + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + .search.icon, +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input::placeholder { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item { + background: var(--surface); + --color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item + :is(.icon, span) { + color: var(--color); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +/* Web widget warning message */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .status { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .icon { + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * Add widget buttons + */ +/* Add widget button */ +add-widget-dropdown .tdActionButton.inlineDropdown .button { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button .displayText { + color: var(--color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown.active .button { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +/* Add widget menu */ +add-widget-dropdown .tdActionButton.inlineDropdown .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu::after { + border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu { + margin-top: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu::after { + top: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu { + margin-bottom: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu::after { + bottom: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter .search.icon, +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input::placeholder { + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .header { + background: var(--background); + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item { + background: var(--surface); + color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item:hover { + background: var(--on-surface); + color: var(--surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item.selected { + background: var(--primary); + color: var(--on-primary); +} + +/********************* + * Template designer * + *********************/ +/* + * Sidebar + */ +settings-sidebar.panel { + background: var(--surface); + border-right: none; + border-left: 1px solid var(--on-surface); + padding: 0px 16px; +} +/* Header */ +settings-sidebar.panel .header span { + color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* Tabs */ +settings-sidebar.panel .tabs ul { + border-color: var(--on-surface) !important; +} +settings-sidebar.panel .tabs li { + --clr: var(--on-surface); + + border-color: var(--clr) !important; +} +settings-sidebar.panel .tabs a { + color: var(--clr) !important; +} +settings-sidebar.panel .tabs li.is-active { + --clr: var(--primary); +} +/* Actions footer */ +settings-sidebar.panel .actions.bordered { + border-color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton { + color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton:hover { + color: var(--primary); +} +/* Template list/ Field list / Link type list*/ +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li { + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; + + padding: 8px 16px; +} +settings-sidebar.panel .field-overview ul.selectable li .icon { + color: var(--color); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:hover { + --bg: var(--on-surface); + --color: var(--surface); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:focus-visible { + outline: 2px solid currentColor; + outline-offset: -4px; +} +settings-sidebar.panel .field-overview ul.selectable li .field-item.being-dragged { + background: var(--background); + color: var(--on-background); + outline-color: var(--primary); + + --color: var(--on-background); +} +/* Field search */ +settings-sidebar.panel .field-overview .search-bar input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + padding: 16px 8px; +} +settings-sidebar.panel .field-overview .search-bar .icon { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +settings-sidebar.panel .field-overview p.no-results { + color: var(--on-surface); +} +/* Create new template/ new link type */ +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton, +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} + +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton { + --icon-bg: var(--background); + --icon-color: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-color: var(--background); + --icon-border: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:active { + --icon-bg: var(--surface); + --icon-color: var(--on-surface); + --icon-border: var(--on-surface); + + color: var(--primary); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton > .icon { + background: var(--icon-bg); + color: var(--icon-color); + border-color: var(--icon-border); +} +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +/* + * Template designer placeholder + */ +.placeholderGfx .placeholder-stage { + background: none; +} +.placeholderGfx p { + color: var(--on-background); + font-style: normal; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} +.page-header { + --ds-color-bg-primary-default: var(--background); +} + +/* + * Asset list + */ +.asset-list { + --ds-color-fg-muted: var(--on-background); +} +.asset-list .ds-icon { + color: var(--on-background); +} +.asset-list a { + color: var(--primary); + text-decoration: underline; +} + +} +@-moz-document regexp("http(s)?://.*/services/active-user-overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +.active-user-overview .left.column strong { + color: var(--on-background); +} + +.active-user-overview .ds-icon.licensed-color { + color: var(--on-background); +} +.active-user-overview .ds-icon.online-color { + color: var(--primary); +} +.active-user-overview .ds-icon.offline-color { + border: 1px solid var(--on-background); + border-radius: 50%; + color: var(--background); /* icon background */ + background-color: var(--on-background); /* icon cross */ +} + +} +@-moz-document regexp("http(s)?://.*/services/user-group-linking-ui/.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); + + --ds-color-fg-primary-default: var(--on-background); /* links */ + --ds-color-fg-primary-emphasis: var(--on-background); /* empty group bullets */ + + --ds-color-bg-primary-mid: transparent; /* link:focus background */ + --ds-color-fg-primary-subtle: var(--on-background); /* link:focus color */ +} + +.overview__ki-list .title:focus-visible { + /* link outline is unfortunately removed entirely, have to reinstate */ + outline: 2px solid var(--on-background); + outline-offset: 4px; + border-radius: 4px; +} + +/* + * Expand/collapse group buttons (The primary styling does not work well here) + */ +.overview__ki-list .ds-button[variant='primary'] { + background-color: transparent; + color: var(--on-background); + border-color: transparent; +} + +.overview__ki-list .ds-button[variant='primary']:hover { + color: var(--on-primary); +} + +.overview__ki-list .ds-button[variant='primary']:active { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*"), regexp("http(s)?://.*/services/active-user-overview.*"), regexp("http(s)?://.*/services/user-group-linking-ui/.*"), regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +/* + * DS-Feedback-Link + * + * There are two versions: + * - .ds-feedback-link is fixed on the right side and expands on hover. + * - .ds-button[variant='insight'] is a button alternative for where the link does not work. + */ +.ds-feedback-link, +.ds-button[variant='insight'] { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +.ds-feedback-link:hover, +.ds-button[variant='insight']:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ +} +.ds-feedback-link:active, +.ds-button[variant='insight']:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ + --ds-color-border-insight-emphasis: var(--on-background); /* :active border (overridden by :focus for link variant) */ +} +.ds-feedback-link:focus-within, +.ds-button[variant='insight']:focus-visible { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +/* + * DS-Button (primary variant) + */ +.ds-button[variant='primary'] { + background-color: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ds-button[variant='primary']:hover { + box-shadow: none; + + background-color: var(--primary-muted); +} +.ds-button[variant='primary']:focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button[variant='primary']:active { + background-color: var(--background); + color: var(--primary); + border-color: var(--primary); + --outline-color: var(--primary); +} + +/* + * DS-Button (basic variant) + */ +.ds-button:not([variant]) { + background-color: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.ds-button:not([variant]):hover { + box-shadow: none; + background-color: var(--on-background); + color: var(--background); +} +.ds-button:not([variant]):focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button:not([variant]):active { + background-color: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * DS-Button (disabled) + */ +.ds-button[aria-disabled='true'] { + /* Undoing the evil 'opacity trick' */ + filter: none; + opacity: unset; + + background-color: var(--disabled); + color: var(--on-disabled); + border-color: var(--on-disabled); +} + +/* + * DS-Panel + */ +.ds-panel { + --ds-color-bg-subtle: var(--surface); /* header background */ + --ds-color-bg-default: var(--surface); /* content background */ + + color: var(--on-surface); + + --text-color: var(--on-surface); + --outline-color: var(--on-surface); + + /* header-content divider border color, has the same variable as the panel border color itself */ + border: none; + --ds-color-border-muted: var(--on-surface); +} + +/* + * DS-Select-Rich and DS-Combobox + */ +.ds-select-rich, +.ds-combobox { + --ds-color-field-label-fg: var(--text-color, var(--on-background)); /* label + helptext color */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-border: var(--on-background); /* field border */ + --ds-color-field-icon-fg: var(--on-background); /* chevron color */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + + /* focus colors */ + --ds-color-field-outline-inner: transparent; /* box-shadow color */ + --ds-color-field-outline-outer: var(--outline-color); /* border and outline */ + + /* dropdown colors */ + --ds-color-bg-default: var(--background); /* popup background */ + --ds-color-fg-default: var(--on-background); /* popup foreground */ + --ds-color-border-default: var(--on-background); /* popup border */ + + --ds-color-bg-primary-default: transparent; /* option:hover background */ + --ds-color-bg-primary-soft: transparent; /* option:checked background */ + --ds-color-border-primary-emphasis: var(--on-background); /* option:hover border */ + --ds-color-fg-primary-emphasis: var(--on-background); /* option:checked checkmark color */ +} + +.ds-select-rich:hover, +.ds-combobox:hover { + --ds-color-field-outline-outer: var(--primary); + --ds-color-field-icon-fg: var(--primary); + --ds-color-field-border: var(--primary); +} + +/* Error case */ +.ds-select-rich lion-select-invoker[aria-invalid='true'], +.ds-combobox[shows-feedback-for='error'] { + --ds-color-field-border: var(--error); + --ds-color-field-icon-fg: var(--error); + --ds-color-field-outline-inner: transparent; + --ds-color-field-outline-outer: var(--error); /* on focus */ +} +.ds-select-rich[shows-feedback-for='error'] lion-validation-feedback, +.ds-combobox[shows-feedback-for='error'] lion-validation-feedback { + --ds-color-field-fg: var(--error); + --ds-color-field-icon-fg: var(--error); +} +.ds-select-rich lion-select-invoker[aria-invalid='true'] { + --ds-color-field-fg: var(--error); + --ds-color-field-bg: var(--background); +} +.ds-combobox[shows-feedback-for='error']:hover, +.ds-select-rich:hover lion-select-invoker[aria-invalid='true'] { + --ds-color-field-outline-inner: var(--error); +} + +/* + * DS-Switch + */ +.ds-switch { + --ds-color-bg-primary-mid: var(--on-background); /* :checked track border */ + --ds-color-bg-primary-emphasis: var(--background); /* :checked track background */ + --ds-color-bg-primary-default: var(--on-background); /* :checked thumb background */ + --ds-color-fg-primary-default: var(--background); /* :checked thumb icon */ + + --ds-color-bg-muted: var(--background); /* :not(:checked) track background */ + --ds-color-bg-default: var(--on-background); /* :not(:checked) thumb background */ + --ds-color-fg-muted: var(--background); /* :not(:checked) thumb icon */ + + --ds-color-border-primary-emphasis: var(--on-background); /* :hover track border */ + + box-shadow: none; +} +.ds-switch lion-switch-button[aria-checked='false'] { + /* + * Border color in unchecked state uses same variable as the track background `--ds-color-bg-muted`. + * So to be able to differentiate the border from the background we need to override the border-color property on the track itself. + */ + border-color: var(--on-background); +} +.ds-switch lion-switch-button:hover { + box-shadow: 0 0 0 4px var(--on-background); +} +.ds-switch lion-switch-button:focus-visible { + box-shadow: none; + outline-color: var(--on-background); +} +.ds-switch label { + /* + * The label color uses the same variable as the unchecked thumb icon `--ds-color-fg-muted`. + * But the label needs to contrast with the background, and the thumb icon with the thumb background. + * Therefore we need to override the color of the label explicitly here. + */ + color: var(--text-color, var(--on-background)); +} + +.ds-data-table { + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* + * The DS adds color to the checkbox when it is checked, but this feels too "busy" in this context. + * Unfortunately there is no other way to indicate selected status, but neither has the old grid so it is not too bad. + * + * A bar on the left side would be nice, and that could be achieved with a linear-gradient except that the color is + * applied to `background-color` (and not `background`) which only allows solid colors. + */ + --ds-color-bg-primary-emphasis: var(--background); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-background); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + --ds-color-border-primary-default: var(--primary); /* status loading */ + --ds-color-border-warning-default: var(--error); /* status error */ +} + +/* + * links are commonly slotted into the datatable, their design/implementation is not fully consistent + */ +.ds-data-table > a { + color: var(--primary); + text-decoration: underline; +} +.ds-data-table > a:hover { + text-decoration-color: var(--primary); +} +.ds-data-table > a:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + border-radius: 4px; + + text-decoration-color: var(--primary); + box-shadow: none; + background-color: unset; +} + +.ds-pagination { + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + /* background-color is set to transparent in the component so can't be changed. (only in default state) */ + /* border-color is set to transparent in the component, so can't be changed. (all states except :hover and :focus) */ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ +} + +.ds-search-form { + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ +} + +.ds-modal-content { + --outline-color: var(--on-surface); + --text-color: var(--on-surface); + + --ds-color-bg-default: var(--surface); /* Modal background */ + --ds-color-fg-default: var(--text-color); /* Modal foreground */ + + --ds-color-fg-muted: var(--on-surface); /* Close button */ + --ds-color-bg-primary-soft: transparent; /* Close button:hover & :focus box-shadow */ + --ds-color-border-primary-emphasis: var(--on-surface); /* Close button:hover & :focus border & outline */ +} + +} \ No newline at end of file diff --git a/docs/themes/topdesk-operator-recoloring.default_dark.user.css b/docs/themes/topdesk-operator-recoloring.default_dark.user.css new file mode 100644 index 0000000..1bf0389 --- /dev/null +++ b/docs/themes/topdesk-operator-recoloring.default_dark.user.css @@ -0,0 +1,9461 @@ + +/* ==UserStyle== +@name Default Dark (TOPdesk Operator Recoloring) +@namespace github.com/topdesk/topdesk-operator-recoloring +@version 3.0.0 +@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 +@updateURL https://topdesk.github.io/operator-recoloring/themes/topdesk-operator-recoloring.default_dark.user.css +@license MIT +@preprocessor default + +@var color background "Background" #0c0c0c +@var text background-filter "Background filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(91%) +@var color on-background "On background" #fcfcfc +@var text on-background-filter "On background filter" brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(178deg) brightness(129%) contrast(98%) +@var color selection "Selection" rgba(252, 252, 252, 0.99) +@var color on-selection "On selection" #0c0c0c +@var color surface "Surface" #404040 +@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" #fcfcfc +@var text on-surface-filter "On surface filter" brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(178deg) brightness(129%) contrast(98%) +@var color disabled "Disabled" #404040 +@var text disabled-filter "Disabled filter" brightness(0) saturate(100%) invert(19%) sepia(0%) saturate(1%) hue-rotate(180deg) brightness(102%) contrast(82%) +@var color on-disabled "On disabled" #8c8c8c +@var text on-disabled-filter "On disabled filter" brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(407%) hue-rotate(172deg) brightness(89%) contrast(89%) +@var color primary "Primary" #eda911 +@var text primary-filter "Primary filter" brightness(0) saturate(100%) invert(71%) sepia(67%) saturate(1479%) hue-rotate(354deg) brightness(97%) contrast(92%) +@var color primary-muted "Primary muted" #d5970e +@var text primary-muted-filter "Primary muted filter" brightness(0) saturate(100%) invert(66%) sepia(52%) saturate(3051%) hue-rotate(7deg) brightness(95%) contrast(89%) +@var color on-primary "On primary" #0c0c0c +@var text on-primary-filter "On primary filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(91%) +@var color error "Error" #FF0070 +@var text error-filter "Error filter" brightness(0) saturate(100%) invert(16%) sepia(54%) saturate(7483%) hue-rotate(326deg) brightness(100%) contrast(109%) +@var color on-error "On error" #0c0c0c +@var text on-error-filter "On error filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(91%) +==/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); +} + +.remembercheckbox input[type='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} + +.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); +} + +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); + 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); + + --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); + + --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-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[mtype='button'][guielement='preferred_button']:active, +[mtype='button'][mstyles~='default-button']:active, +[guielement='toolbar_button'][mstyles~='blue']:active, +[guielement='toolbar_button'][mstyles~='orange']:active, +body.popup .divpopupcontainer .divpopupclientarea button.primary:active, +.suggestionsWidget .suggestionsWidget-searchButton:active, +div#checklist .button.is-primary:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +/* Disabled button */ +[mtype='button'][disabled='true'], +[mtype='button'][disabled='true']:hover, +[guielement='toolbar_button'][disabled='true'], +[guielement='toolbar_button'][disabled='true']:hover, +div#checklist .button[disabled], +div#checklist .button[disabled]:hover { + background: var(--disabled); + border-color: var(--on-disabled); + + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); + + pointer-events: none; +} + +/* Tab bar */ +[mstyles~='header_bar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[mstyles~='header_bar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* Quicklaunch buttons */ +div[mtype='group'][mstyles~='ql-button'] { + background: transparent; + --filter: var(--on-surface-filter); + outline-offset: -2px !important; +} +div[mtype='group'][mstyles~='ql-button'] > input, +div[mtype='group'][mstyles~='ql-button'] > input + div[mtype='label'] { + filter: var(--filter); + background: transparent !important; +} + +div[mtype='group'][mstyles~='ql-button']:hover, +div[mtype='group'][mstyles~='ql-button']:focus { + --filter: var(--primary-filter); +} + +div[mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +/* topdesk menu button */ +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:hover, +div[handle='topdesk_menu'][mstyles~='ql-button']:focus { + background: var(--primary-muted); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:hover > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:focus > input { + /* These are non-transparent action buttons */ + filter: none; +} + +button#notifications-icon { + /* iframe is too tiny to show the normal outline */ + outline-offset: -2px !important; +} + +button#notifications-icon::before { + content: ''; + background: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + filter: var(--on-surface-filter); +} +button#notifications-icon:hover::before { + filter: var(--primary-filter); +} + +span#unread-notification-count { + background: var(--primary); + color: var(--on-primary); + border: 1px solid var(--surface); +} + +/* Buttons with a background image */ +.suggestionsWidget .suggestionsWidget-searchButton, +.suggestionsWidget .suggestionsWidget-toggleButton, +.suggestionsWidget .suggestionsWidget-newKIButton, +.suggestionsWidget .help-button { + position: relative; +} +.suggestionsWidget .suggestionsWidget-searchButton:before, +.suggestionsWidget .suggestionsWidget-toggleButton:before, +.suggestionsWidget .suggestionsWidget-newKIButton:before, +.suggestionsWidget .help-button:before { + content: ''; + position: absolute; + filter: var(--filter); + top: 7px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* Knowledge base popup search button */ +.suggestionsWidget .suggestionsWidget-searchButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M15.9 14.2L12 10.3c.6-.9 1-2.1 1-3.3 0-3.3-2.7-6-6-6S1 3.7 1 7s2.7 6 6 6c1.2 0 2.3-.4 3.2-.9l3.9 3.9 1.8-1.8zM3 7c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* Knowledge base popup toggle button */ +.suggestionsWidget .suggestionsWidget-toggleButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M10.5 11.5L6.9 8l3.6-3.5 1 1L9.1 8l2.4 2.5z'/%3E%3Cpath d='M6.5 11.5L2.9 8l3.6-3.5 1 1L5.1 8l2.4 2.5z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* Knowledge base popup create item button */ +.suggestionsWidget .suggestionsWidget-newKIButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M2.5 13H13v1H2.5z'/%3E%3Cpath d='M15 4h-2V1c0-.6-.4-1-1-1H3C1.3 0 0 1.3 0 3v10c0 1.7 1.3 3 3 3h10v-1H2.5c-.8 0-1.5-.7-1.5-1.5S1.7 12 2.5 12H12c.6 0 1-.4 1-1V8h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1zm0 3h-3v3h-2V7H7V5h3V2h2v3h3v2z'/%3E%3C/svg%3E"); + left: 8px; +} + +/* Knowledge base popup help button */ +.suggestionsWidget .help-button:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M4.8 5.5c0-.4.1-.8.4-1.2.3-.4.6-.8 1.1-1 .5-.3 1.1-.4 1.8-.4.6 0 1.2.1 1.6.3.5.2.8.5 1.1.9.2.4.4.9.4 1.3s-.1.7-.2.9c-.1.3-.3.5-.5.7s-.6.5-1.1 1l-.4.4c-.1.1-.1.2-.2.3 0 .1-.1.2-.1.2 0 .1-.1.2-.1.4-.1.5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.1-.2-.2-.4-.2-.7 0-.4.1-.7.2-.9.1-.2.2-.5.4-.7l.7-.7c.3-.2.5-.4.6-.5s.2-.3.3-.4.1-.3.1-.5c0-.3-.1-.6-.4-.9-.3-.2-.6-.3-1-.3-.5 0-.8.1-1 .4-.2.2-.4.6-.6 1 0 .5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.2-.2-.3-.4-.3-.6zM8 12.9c-.3 0-.5-.1-.7-.2-.2-.2-.3-.4-.3-.7s.1-.5.3-.7c.2-.2.4-.3.7-.3s.5.1.7.3.3.4.3.7-.1.5-.3.7-.4.2-.7.2z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* + * General styles + */ +html, +body { + background: transparent; +} + +/* Generic focus style */ +*:focus { + z-index: 1000 !important; + outline: 2px solid var(--on-background) !important; + outline-offset: 2px !important; +} + +/* focus fix for combobox dropdown */ +input[type='text'][mtype='combobox']:focus { + z-index: 0 !important; +} + +/* Tab bar and Quicklaunch */ +[mstyles~='header_bar'], +[handle='quicklaunch_bar_settings_area'], +[handle='quicklaunch_bar_buttons_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Page */ +[guielement='toplevelwindow'], +[mstyles='left_side'] { + background: var(--background); + --text-color: var(--on-background); +} + +body > div[guielement='toplevelwindow'] > div[style*='background-color'] { + /* Sent emails set background in their style attribute */ + background: transparent !important; +} + +/* Text */ +[mtype='label'], +[mtype='rtlabel'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--text-color); +} +[mtype='label'][mstyles~='error'], +[mtype='rtlabel'][mstyles~='error'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--error); +} + +::selection { + background: var(--selection); + color: var(--on-selection); +} + +/* Link */ +a, +[guielement='hyperlink'], +[mtype='label'][mstyles~='link_label'] { + color: var(--primary); +} +a:hover, +[guielement='hyperlink']:hover, +[mtype='label'][mstyles~='link_label']:hover { + color: var(--primary-muted); +} + +/* Tooltip */ +#infoboxdiv { + background: var(--surface); + color: var(--on-surface); +} +/* Bubble tooltips */ +[guielement='infobubble-bubble'] { + background: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='south'] { + border-top-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='east'] { + border-left-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='west'] { + border-right-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='north'] { + border-bottom-color: var(--surface); +} +[guielement='infobubble-bubble'] [mstyles~='infobubble-message'] { + color: var(--on-surface); +} + +/* Popup */ +[guielement='subwindow'] > img:only-child { + /* The pointer triangle used in some popups */ + filter: var(--on-background-filter); +} + +[guielement='popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='popup-header'] { + border-color: var(--on-surface); +} +[guielement='popup-body'] [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] { + background: transparent; + color: var(--text-color); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label'][mstyles~='selected'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='popup-footer'] { + background: var(--surface); + border-color: var(--on-surface); +} +/* HTML style popup */ +body.popup .divpopupcontainer { + background: var(--surface); + color: var(--on-surface); + --text-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader { + border-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader .divpopuptitle { + color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupclientarea { + background: transparent; +} +body.popup .divpopupcontainer .divpopupclientarea .buttons, +body.popup .divpopupcontainer .divpopupclientarea .grid-settings-popup-buttons { + background: transparent; + border-color: var(--on-surface); +} + +/* stamp popup */ +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup']:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button.disabledButton { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Datepicker + */ +[guielement='calendar-grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='calendar-grid'] [guielement='calendar-cell'] [guielement='calendar-cell-label'] { + color: var(--text-color); +} +/* non-working day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-non-working-day'] { + background: var(--surface); + --text-color: var(--on-surface); +} +/* Special style for 'today' to aid orientation */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-today'] { + --text-color: var(--primary); + border-color: transparent; +} +/* currently selected cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +/* 'focused' cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-highlighted'] { + border-color: var(--primary); +} +[guielement='calendar-grid'] + [guielement='calendar-cell'][mstyles~='cal-selected'][mstyles~='cal-highlighted'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + border-color: var(--on-primary); +} +/* 'go to today' button */ +[guielement='datepicker-today'] { + background: transparent; + color: var(--primary); +} +[guielement='datepicker-today']:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Loading screen */ +[guielement='toplevelwindow'] > [mstyles~='content_area'] { + background-color: var(--background); +} + +body[style*='background-color: #ffffff'] { + background-color: var(--background) !important; +} + +#busy_message_area { + background-color: var(--surface); + padding: 36px; +} +#busy_message_area > #busy_message_image { + display: none !important; +} +#busy_message_area > #busymessage { + color: var(--on-surface); +} + +#busy_message_area::before { + content: ''; + display: block; + width: 60px; + height: 60px; + margin: 0 auto 12px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 58%, + var(--on-surface) 60% + ); + + animation-name: pulse; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: 0.2s; +} + +#busy_message_area::after { + content: ''; + display: block; + width: 46px; + height: 46px; + margin: -80px auto 24px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 55%, + var(--on-surface) 57% + ); + + animation-name: pulse; + animation-duration: 2.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: -1.5s; +} + +@keyframes pulse { + from { + opacity: 1; + } + to { + opacity: 0.2; + } +} + +@media (prefers-reduced-motion: no-preference) { + #busy_message_area::before { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 58%, + transparent 60% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-large; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: 0s; + } + + #busy_message_area::after { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 55%, + transparent 57% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-small; + animation-duration: 3.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: -0.5s; + } + + @keyframes spin-large { + from { + rotate: 0deg; + } + to { + rotate: 720deg; + } + } + + @keyframes spin-small { + from { + rotate: 0deg; + } + to { + rotate: 1440deg; + } + } +} + +/* + * Tab + */ + +/* Default */ +[guielement='window_tab'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='window_tab'] [guielement='icon'], +[guielement='window_tab'] [guielement='icon-button'] { + filter: var(--filter); +} +/* Status icon (dual color, can't be recolored) */ +[guielement='window_tab'] [guielement='icon']:nth-of-type(2) { + filter: none; +} + +/* Current */ +[guielement='window_tab'][mstyles~='active'] { + background: var(--background); + border-bottom-color: var(--background); + border-top: 3px solid var(--primary); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +/* +* Card tab +*/ + +/* Current */ +[role='tablist'] [role='tab'][aria-selected='true'], +[role='tablist'] [role='tab'][aria-selected='true'] * { + border-bottom-color: var(--primary); + color: var(--primary); +} + +/* HTML style tabs */ +.subtabscontainer .subtabcaptions .tabcaption { + border-color: var(--text-color) !important; +} +.subtabscontainer .subtabcaptions .tabcaption a { + color: var(--text-color); +} +.subtabscontainer .subtabcaptions .tabcaption.active { + --text-color: var(--primary); +} + +/* + * Menu + */ +[guielement='topdesk-menu'], +[guielement='topdesk-submenu'], +[guielement='toolbar_menu'], +div#checklist div.menu { + background: var(--surface); +} +[guielement='topdesk-submenu'] { + border-left-color: var(--on-surface); +} + +/* Default */ +[guielement='topdesk-menu-item'], +[guielement='toolbar_menu_button'], +div#checklist div.menu [role='button'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='topdesk-menu-item'] *, +[guielement='toolbar_menu_button'] * { + background: transparent; +} +[guielement='topdesk-menu-item'] [guielement='topdesk-menu-icon'], +[guielement='toolbar_menu_button'] [mtype='imagebutton'] { + filter: var(--filter); +} + +div#checklist div.menu [role='button'] { + color: var(--text-color); +} + +/* Hover */ +[guielement='topdesk-menu-item']:hover, +[guielement='toolbar_menu_button']:hover, +div#checklist div.menu [role='button']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Focus */ +[guielement='topdesk-menu-item']:focus, +[guielement='toolbar_menu_button']:focus, +div#checklist div.menu [role='button']:focus { + outline: none !important; + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Disabled */ +[guielement='topdesk-menu-item'][disabled='true'], +[guielement='toolbar_menu_button'][disabled='true'], +div#checklist div.menu [role='button'][aria-disabled='true'] { + background: var(--disabled); + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} + +/* Separators */ +[guielement='topdesk-menu-separator'], +[guielement='toolbar_menu_group'], +div#checklist div.menu li .separator { + border-color: var(--on-surface); +} + +/* Selected item */ +[guielement='topdesk-menu-item'][mstyles~='topdesk-menu-item-active'] { + border-left-color: var(--primary); +} + +/* Suppressing focus style on menu after click on Menu button */ +[guielement='toolbar_menu'] > [mtype='group']:focus { + outline: none !important; +} + +/* + * Action / Request + */ + +/* + * Request + */ +[guielement='pt-request-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-request-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-request-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged request entries */ +[guielement='pt-request-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-request-container'] [mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +/* Collapsed flagged entry fade-out */ +[guielement='pt-request-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--primary)) !important; +} + +/* Links */ +[guielement="pt-request-container"] div[rt] a, +[guielement="pt-request-container"] a /* Support for versions before october 2020 */ { + color: var(--primary); +} + +/* Speech bubble tail */ +[guielement='pt-request-pointer'] { + border-right-color: var(--surface); +} + +/* Expand/Collapse buttons */ +[guielement='pt-request-container'] [guielement='crt-button-expand'], +[guielement='pt-request-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* +* Action +*/ +[guielement='pt-trail-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-trail'], +[guielement='pt-trail-container'] [guielement='pt-mail'], +[guielement='pt-trail-container'] [guielement='pt-attachment'], +[guielement='pt-trail-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-trail-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged action entries */ +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +[guielement="pt-trail-container"] div[rt] a, +[guielement="pt-trail-container"] a, /* Support for versions before october 2020 */ +[guielement="pt-trail-container"] [guielement="pt-linkbutton"] { + color: var(--primary); +} + +/* Collapsed flagged entry fade-out */ +[guielement='pt-trail-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, #eda911) !important; +} + +/* Action entry filter button */ +[mtype='button'][guielement='pt-channel-button'] { + color: var(--primary); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:hover { + color: var(--primary-muted); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:active { + color: var(--background); + background: var(--primary); +} + +/* Expand/Collapse buttons */ +[guielement='pt-trail-container'] [guielement='crt-button-expand'], +[guielement='pt-trail-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* Mail and attachment entry icons (only present in Action) */ +[guielement='pt-mail'] img[guielement='icon'], +[guielement='pt-attachment'] img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Invisible for caller */ +[guielement='pt-trail-container'] [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +/* +* Rich text +*/ + +/* edit area */ +[guielement='pt-richtextarea'] { + background: var(--background); + border-color: var(--on-background); +} +body[contenteditable='true'] { + color: var(--on-background) !important; +} +[guielement='pt-memo-editable'], +[guielement='pt-attachment-editable'] { + background: transparent; +} +[guielement='pt-attachment-editable'] > [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* toolbar buttons, the image gets washed out in toggled state :-( */ +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:hover, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:active, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'][disabled='true'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* stamp popup */ +[guielement='memo'] { + background: var(--background); + --text-color: var(--on-background); +} + +/* While loading in */ +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] { + background-color: var(--surface) !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] > [guielement='image'] { + /* image doesn't color, and is more distracting than useful */ + display: none !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true']::before { + content: ''; + position: absolute; + inset: 0; + background: white; + + animation-name: pulse-feed; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes pulse-feed { + from { + opacity: 0; + } + to { + opacity: 0.2; + } +} + +/* + * Home, Module, and Dashboard pages + */ + +/* Can't recolor the background of the banner, so need to force the color of the text to make sure it remains visible */ +[handle='ie11campaign.banner.application_manager.description'], +[handle='ie11campaign.banner.application_manager.description'] + [mtype='group'] a { + color: black; +} + +[guielement='widget'] { + border-color: transparent; +} +[guielement='widget_header'], +[guielement='widget_content_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='widget_content_area'] { + border-color: var(--on-surface); +} +[guielement='widget_content_area'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Main pages widget / Tile widgets */ +[guielement^='widget_page_image_button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement^='widget_page_image_button']:hover { + background: var(--primary-muted); +} +[guielement^='widget_page_image_button']:active { + background: var(--background); + border: 1px solid var(--primary); + --filter: var(--on-background-filter); +} +[guielement^='widget_page_image_button'] > [guielement='icon'] { + filter: var(--filter); +} + +/* My tasks widget / Tasks per group widget */ +[guielement='widget_content_area'] [mstyles~='todo_header_group'] { + border-color: var(--on-surface); +} + +/* Selections, Reports, and Shortcuts widget */ +[guielement='selections_reports_content_area'] { + background: var(--surface); +} +[guielement='selections_reports_item'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='selections_reports_item']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[guielement='selections_reports_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* Current major calls widget */ +[handle='major_incident_widget_main'] [guielement='block_header'] { + background: var(--surface); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:hover { + filter: var(--primary-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:active { + filter: var(--primary-muted-filter); +} + +/* KPI widget */ +[guielement='widget_content_area'] [mstyles~='italic_text'] { + color: var(--text-color) !important; +} + +/* Report widget */ +[guielement='widget_content_area'] [guielement='image']:not([role='presentation']) { + /* + * The report legend is included in the image itself, + * forcing the background to make sure the legend is visible. + * + * Setting a simple filter, e.g. filter: invert(1), may have + * a more desirable effect depending on the chosen background + * of the widget + * + * NOTE: this also affects KPI's as they can't be distinguished + */ + background: #fcfcfc; +} + +/* Conversations widget */ +[guielement='conversation-reply'] { + background: transparent; +} + +[guielement='conversation-text'] a { + color: var(--primary); +} +[guielement='conversation-text'] a:hover { + color: var(--primary-muted); +} +[guielement='conversation-link'] { + background: transparent; + color: var(--primary); +} +[guielement='conversation-link']:hover { + background: transparent; + color: var(--primary-muted); +} +[guielement='conversation-number'] + [guielement='icon-button'] { + filter: var(--primary-filter); +} +[guielement='conversation-number'] + [guielement='icon-button']:hover { + filter: var(--primary-muted-filter); +} + +/* Navigation pane */ +[guielement='navigator_container'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='navigator_item'] [guielement='icon'] { + filter: var(--filter); +} +[guielement='navigator_item'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Selections widget / Reports widget / Shortcuts widget */ +[guielement='widget'] [guielement='link_button'] { + background: transparent; + color: var(--primary) !important; +} +[guielement='widget'] [guielement='link_button']:hover { + color: var(--primary-muted) !important; +} + +/* Get started widget */ +div#app { + background-image: none; +} +/* close button */ +.widget-container .widget-button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.widget-container .widget-button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.widget-container .widget-button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} +/* about us button */ +.welcome-widget #button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.welcome-widget #button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.welcome-widget #button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} + +/* Subwidgets */ +.widget-container .service-excellence-widget-frame, +.widget-container .service-excellence-widget-frame:hover, +.widget-container .getting-started-widget-frame, +.widget-container .getting-started-widget-frame:hover, +.widget-container .task-board-widget-frame, +.widget-container .task-board-widget-frame:hover { + background: var(--surface); +} +/* header */ +.widget-container .service-excellence-widget-frame h1, +.widget-container .getting-started-widget-frame h1, +.widget-container .task-board-widget-frame h1 { + color: var(--on-surface); +} + +/* Service excellence subwidget */ +/* view more blogs link */ +.widget-container .service-excellence-widget-frame a { + color: var(--primary); +} +.widget-container .service-excellence-widget-frame a:hover { + color: var(--primary-muted); +} +/* blog item */ +.widget-container .service-excellence-widget-frame .rss-item a { + background: var(--surface); + --text-color: var(--on-surface); +} + +.widget-container .service-excellence-widget-frame .rss-item a:focus, +.widget-container .service-excellence-widget-frame .rss-item a:hover { + background: var(--on-surface); + --text-color: var(--surface); +} + +.widget-container + .service-excellence-widget-frame + .rss-item + .rss-item-body + .rss-item-content + > div + .fade-out-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .rss-title-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .display-date { + color: var(--text-color); +} + +/* Getting started subwidget */ +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li .video-title { + color: var(--on-surface); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li.playing, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li.playing + .video-title { + background: var(--primary); + color: var(--on-primary); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:hover, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:hover + .video-title, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:focus, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:focus + .video-title { + background: var(--on-surface); + color: var(--surface); +} + +/* My calls subwidget */ +.widget-container .task-board-widget-frame .task-board-widget a { + --text-color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget a .td-icon, +.widget-container .task-board-widget-frame .task-board-widget a .content .title, +.widget-container .task-board-widget-frame .task-board-widget a .content .request, +.widget-container .task-board-widget-frame .task-board-widget a .content .request span, +.widget-container .task-board-widget-frame .task-board-widget a .display-date, +.widget-container .task-board-widget-frame .task-board-widget a .display-date .td-icon { + color: var(--text-color); +} +.widget-container .task-board-widget-frame .task-board-widget a:hover, +.widget-container .task-board-widget-frame .task-board-widget a:focus { + background: var(--on-surface); + --text-color: var(--surface); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a { + color: var(--primary); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a:hover { + background: none; + color: var(--primary-muted); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button svg { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover { + background: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover svg { + color: var(--surface); +} + +/* Flow chart */ +[mstyles='flowchart_container'] + :is( + [mstyles~='flowchart_block_simple'], + [mstyles~='flowchart_block_multi'], + [mstyles~='flowchart_block_dashed'], + [mstyles~='flowchart_icon_container'] + ) { + background: var(--background); + border-color: var(--on-background); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_empty'] { + border-color: var(--on-surface); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_multi'] { + box-shadow: 1px -1px var(--background), 2px -2px var(--on-background), 3px -3px var(--background), + 4px -4px var(--on-background); +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:last-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:last-child { + /* status icons are multicolored and thus can't be recolored */ + filter: none; +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:first-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:first-child { + filter: var(--on-background-filter); +} +[mstyles='flowchart_container'] [guielement='flowchart_label'] { + color: var(--on-background); +} +[mstyles='flowchart_container'] [mtype='rectangle'] { + border-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_right'] { + border-left-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_left'] { + border-right-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_up'] { + border-bottom-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_down'] { + border-top-color: var(--on-surface) !important; +} + +/* Marketplace widget */ +[guielement='no_padding_webpage_content_area'] { + background: var(--surface); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"] +{ + background-color: var(--primary); + color: var(--on-primary); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:hover +{ + background-color: var(--primary-muted); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:active +{ + background-color: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} + +/* + * Knowledge base suggestions widget (as seen on call card) + * Buttons are (mostly) styled in buttons.css + */ + +.suggestionsWidget { + background: var(--background); + border-color: var(--primary); +} + +.suggestionsWidget .suggestionsWidget-header { + background: transparent; + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body { + color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > img { + filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); + -webkit-appearance: listbox; + -moz-appearance: listbox; + appearance: listbox; +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select:focus { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language option { + background: var(--background); + color: var(--on-background); +} +.suggestionsWidget .help-button { + border-radius: 50%; + border: 1px solid currentColor; +} + +.suggestionsWidget .suggestionsWidget-list { + background: transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion, +.suggestionsWidget + .suggestionsWidget-suggestion.suggestionsWidget-suggestion-with-standard-solution { + background: transparent; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-suggestion > a { + background: transparent; + color: var(--text-color); + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > button { + background-color: transparent; + filter: var(--filter); + opacity: 1; + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > a:hover, +.suggestionsWidget .suggestionsWidget-suggestion > a:focus { + --text-color: var(--primary); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-suggestion > button:hover, +.suggestionsWidget .suggestionsWidget-suggestion > button:focus { + --filter: var(--primary-filter); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-noSuggestionsFound { + filter: var(--on-background-filter); +} + +.suggestionsWidget .suggestionsWidget-intro .footer { + background: var(--surface); + color: var(--on-surface); +} +.suggestionsWidget .suggestionsWidget-intro .footer > a:hover { + color: var(--primary-muted); +} + +/* disabling blue focus styling */ +.suggestionsWidget .suggestionsWidget-intro .intro-button:focus { + border-color: var(--on-background); + box-shadow: none; +} + +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='dialog'] { + background: var(--surface); +} +/* header */ +[data-handle='shareandsubscribe_sharee_picker'] header { + border-bottom-color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > strong, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] > strong { + color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > button { + filter: var(--on-surface-filter); +} + +/* Search field */ +[data-handle='shareandsubscribe_sharee_picker'] input[type='search'] { + background: var(--background); + border-color: var(--on-background); + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button { + --bg: var(--primary); + --filter: var(--on-primary-filter); + --border: var(--primary); + + position: relative; + background: var(--bg) !important; + border-color: var(--border) !important; +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:hover { + --bg: var(--primary-muted); + --filter: var(--on-primary-filter); + --border: var(--primary-muted); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:active { + --bg: var(--background); + --filter: var(--primary-filter); + --border: var(--primary); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M10 10l5 5'/%3E%3Ccircle cx='5.9' cy='6' r='5' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"); + + filter: var(--filter); + position: absolute; + top: 8px; + left: 8px; + width: 16px; + height: 16px; +} + +/* non-result status messages */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='searching'], +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='help-text'] { + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='no-search-results'] { + filter: var(--on-background-filter); +} + +/* Search results section*/ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] { + background: var(--background); + color: var(--on-background); + + --filter: var(--on-background-filter); + --hover-fg: var(--background); + --hover-filter: var(--background-filter); +} + +/* Sharees section */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] { + color: var(--on-surface); + + --filter: var(--on-surface-filter); + --hover-fg: var(--surface); + --hover-filter: var(--surface-filter); +} + +/* Items */ +[data-handle='shareandsubscribe_sharee_picker'] li:hover { + background: currentColor; + --filter: var(--hover-filter); + --text-color: var(--hover-fg); +} + +[data-handle='shareandsubscribe_sharee_picker'] li > div, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] li button, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] li button, +[data-handle='shareandsubscribe_sharee_picker'] li strong { + color: var(--text-color); +} +[data-handle='shareandsubscribe_sharee_picker'] li img[src^='data:image/svg+xml'] { + background: transparent; + border: 1px solid currentColor; + filter: var(--filter); +} +/* separator */ +[data-handle='shareandsubscribe_sharee_picker'] li:not(:last-child) { + border-bottom-color: currentColor; +} + +/* Footer */ +[data-handle='shareandsubscribe_sharee_picker'] footer { + background: var(--surface); + border-top: 1px solid var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button { + background: var(--bg) !important; + border-color: var(--border) !important; + color: var(--text-color) !important; +} + +/* Cancel button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel'] { + --bg: var(--background); + --border: var(--on-background); + --text-color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:hover { + --bg: var(--on-background); + --border: var(--on-background); + --text-color: var(--background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:active { + --bg: var(--surface); + --border: var(--on-surface); + --text-color: var(--on-surface); +} + +/* Share button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit'] { + --bg: var(--primary); + --border: var(--primary); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:hover { + --bg: var(--primary-muted); + --border-color: var(--primary-muted); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:active { + --bg: var(--on-primary); + --border: var(--primary); + --text-color: var(--primary); +} + +/* Icons in minimized groups */ +[guielement='mg-minimized-content'] [guielement='icon'] { + filter: var(--on-background-filter); +} + +/* Header buttons */ +[guielement='mg-header'] input[aria-haspopup='false'] { + filter: var(--primary-filter); +} +[guielement='mg-header'] input[aria-haspopup='false'][disabled='true'] { + filter: var(--disabled-filter); +} + +/* +* Form +*/ + +/* Default */ +input[type='text'], +div[guielement='datetimecontrol'], +div[guielement='unittextbox'], +button[role='checkbox'], +button[role='radio'], +textarea[mtype='textarea'], +textarea.textarea, +body[cardType='naturalselection'] input, +body[cardType='naturalselection'] select { + --border: var(--on-background); + --static-filter: var(--on-background-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); + border-color: var(--border); +} +textarea[mtype='textarea'] { + border-color: var(--border) !important; +} + +/* Readonly */ +input[type='text'][readonly='true'], +div[guielement='datetimecontrol'][readonly='true'], +div[guielement='unittextbox'][readonly='true'], +button[role='checkbox'][readonly='true'], +button[role='radio'][readonly='true'], +textarea[mtype='textarea'][readonly='true'] { + --border: var(--disabled); + --static-filter: var(--on-background-filter); + --button-filter: var(--disabled-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +/* Disabled */ +input[type='text'][disabled='true'], +div[guielement='datetimecontrol'][disabled='true'], +div[guielement='unittextbox'][disabled='true'], +button[role='checkbox'][disabled='true'], +button[role='radio'][disabled='true'], +textarea[mtype='textarea'][disabled='true'], +textarea.textarea:disabled { + --border: var(--on-disabled); + --static-filter: var(--on-disabled-filter); + --button-filter: var(--on-disabled-filter); + + background: var(--disabled); + color: var(--on-disabled); + --text-color: var(--on-disabled); +} + +/* Error */ +input[type='text'][mstyles~='error'], +div[guielement='datetimecontrol'][mstyles~='error'], +div[guielement='unittextbox'][mstyles~='error'], +textarea[mtype='textarea'][mstyles~='error'], +textarea.textarea:invalid { + --border: var(--error); + --static-filter: var(--error-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--error); + --text-color: var(--error); +} + +/* Combobox dropdown icon */ +body[cardType='naturalselection'] span.arrowdown, +input[type='text'][mtype='combobox'] + div > img { + filter: var(--on-background-filter); +} +input[type='text'][mtype='combobox'][readonly='true'] + div > img, +input[type='text'][mtype='combobox'][disabled='true'] + div > img { + filter: var(--on-disabled-filter); +} +input[type='text'][mtype='combobox'][mstyles~='error'] + div > img { + filter: var(--error-filter); +} + +/* Combobox options */ +body[cardType='naturalselection'] option, +[mango_combobox='true'][role='option'] { + background: var(--background) !important; + color: var(--on-background) !important; +} +[mango_combobox='true'][role='option'][style*='highlight'] { + background: var(--on-background) !important; + color: var(--background) !important; +} + +/* Datepicker button */ +div[guielement='datetimecontrol'] > input[guielement='icon-button'] { + filter: var(--button-filter); +} + +/* Unit text box */ +div[guielement='unittextbox'] > img, +div[guielement='unittextbox'] > [guielement='unittextbox_prefix'], +div[guielement='unittextbox'] > [guielement='unittextbox_suffix'] { + background: transparent; +} +div[guielement='unittextbox'] > img { + filter: var(--static-filter); +} + +/* Checkbox */ +button[role='checkbox'] { + box-sizing: border-box; + border: 1px solid var(--border); +} +button[role='checkbox'] > img { + display: none !important; +} + +/* checkmark */ +button[role='checkbox'][aria-checked='true']::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/* Radio button */ +button[role='radio'] > img { + display: none !important; +} +button[role='radio'] { + border: 1px solid var(--border); + border-radius: 50%; +} +/* dot */ +button[role='radio'][aria-checked='true']::before { + content: ''; + position: absolute; + border-radius: 50%; + top: 4px; + left: 4px; + width: 8px; + height: 8px; + background: currentColor; +} + +/* Search */ +[guielement='sp-search-main-group'], +[mstyles~='quicklaunch_search_background'] { + background: transparent; + border: 1px solid var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button'], +[guielement='quicklaunch_search_button'] { + background: var(--primary); + border-color: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button']:hover, +[guielement='quicklaunch_search_button']:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button']:active, +[guielement='quicklaunch_search_button']:active { + background: var(--background); + border-color: var(--primary); + --filter: var(--primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button'] [guielement='icon'], +[guielement='quicklaunch_search_button'] [guielement='icon'] { + filter: var(--filter); +} + +/* List control */ +[guielement='list_control'], +[guielement='list_control'] [guielement='list_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='list_control'] [guielement='list_item']:hover { + background: var(--on-background); + --text-color: var(--background); + --filter: var(--background-filter); +} +[guielement='list_control'] [guielement='list_item'][mstyles~='selected'], +[guielement='list_control'] [guielement='list_item'] [mstyles~='selected_suggestion'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[guielement='list_control'] [guielement='list_item'] [mtype='label'] { + color: var(--text-color) !important; +} +[guielement='list_control'] [guielement='list_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* memofield buttons */ +.memowithheader .images img { + filter: var(--on-surface-filter); +} +.memowithheader .images img:hover { + filter: var(--primary-filter); +} +.memowithheader .images img:active { + filter: var(--primary-muted-filter); +} +.memowithheader .images img[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* + * HTML style form elements + */ +table.fields .label { + color: var(--text-color); +} +/* select */ +table.fields .arrowdown { + filter: var(--on-background-filter); +} +#dropdownlayer .dropdownselect { + background: var(--background); + color: var(--on-background); +} +.optionvalue { + color: var(--text-color); +} + +/* list control */ +div.fields .selectlist { + background: var(--background); +} +div.fields .selectlist .selected { + background: var(--on-background); + color: var(--background); +} + +/* search with autocomplete */ +table.textinput { + background: var(--background); +} +table.textinput #queryfield { + color: var(--on-background); +} +table.textinput + #suggestionbox { + background: var(--background); +} +table.textinput + #suggestionbox .dropdown { + color: var(--on-background); +} +table.textinput + #suggestionbox .dropdown[style*='background'] { + background: var(--on-background) !important; + color: var(--background); +} + +/* KI explorer panel */ +[guielement='explorer_header'], +[guielement='explorer_body'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='explorer_body'] [guielement='tree_node_line'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); +} +[guielement='explorer_body'] + [guielement='tree_node_line'] + [mtype='group'][mstyles~='tree_top_level'] { + background: transparent; +} + +/* KI Rich Text fields, and keyword block */ + +[guielement='block_body'], +[guielement='block_header'] { + background: transparent; +} +[guielement='memo_rich_text_area'] { + background: var(--background); + border-color: var(--on-background); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton'], +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:hover, +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:active, +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='imagebutton'][disabled='true'], +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* KI tags */ +.tagList > .tag { + background: var(--background); + border-color: var(--on-background); +} +.tagList > .tag > .tagName { + color: var(--on-background); +} +.tagList > .tag > button { + filter: var(--on-background-filter); +} +.tagList > .tag > button:hover { + filter: var(--primary-filter); +} +.addTagOptions .optionsSeparator { + color: var(--on-background); +} + +.addTagOptions .td-field { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-field::placeholder { + color: var(--on-background); +} +.addTagOptions .td-button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.addTagOptions .td-field option { + color: var(--on-background); +} +.addTagOptions .td-field option:disabled { + font-style: italic; +} + +/* KI Read version styles */ +[guielement='kb-search-main-group'] { + background: transparent; + border: 1px solid var(--primary); +} +[guielement='kb-comment-group'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='kb-content'] a { + color: var(--primary); +} +[guielement='kb-content'] a:hover { + color: var(--primary-muted); +} + +/* + * Email editor in email actions + */ + +/* Toolbar */ +div#cke_emailEditor .cke_top { + background: var(--surface); +} +div#cke_emailEditor .cke_top a.cke_button, +div#cke_emailEditor .cke_top a.cke_combo_button { + filter: var(--on-surface-filter); +} +div#cke_emailEditor .cke_top a.cke_button:focus, +div#cke_emailEditor .cke_top a.cke_button:hover, +div#cke_emailEditor .cke_top a.cke_combo_button:focus, +div#cke_emailEditor .cke_top a.cke_combo_button:hover, +div#cke_emailEditor .cke_top span.cke_combo_on a.cke_combo_button { + background: transparent; + filter: var(--primary-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled { + filter: var(--on-disabled-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_icon, +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_arrow { + opacity: 1; +} + +html.cke_panel_container .cke_panel_grouptitle { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_list { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_listItem a > * { + color: var(--text-color); +} + +html.cke_panel_container .cke_panel_listItem a:hover, +html.cke_panel_container .cke_panel_listItem a:focus { + background: transparent; + --text-color: var(--primary); +} + +html.cke_panel_container .cke_panel_listItem.cke_selected a, +html.cke_panel_container .cke_panel_listItem a:active { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Contents */ +div#cke_emailEditor .cke_contents { + background: var(--background); +} + +/* + * These rules will cause any color styling in the email to be lost, + * But will give an increased chance for the user to be able to read + * it. + * + * Checking the original style can be done by turning off the style + * in Stylus. + */ +body.cke_editable, +body.cke_editable * { + background: var(--background) !important; + color: var(--on-background) !important; +} +body.cke_editable a { + color: var(--primary) !important; +} + +body[cardType='naturalselection'] { + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +body[cardType='naturalselection'] div#header div.title, +body[cardType='naturalselection'] legend span, +body[cardType='naturalselection'] .fieldlistheader, +body[cardType='naturalselection'] .linklistgroupheader, +body[cardType='naturalselection'] .linklistheader, +body[cardType='naturalselection'] table.tabcontrol { + color: var(--text-color); +} + +body[cardType='naturalselection'] a { + color: var(--primary); +} + +body[cardType='naturalselection'] table.fieldlist { + --filter: var(--on-background-filter); +} + +body[cardType='naturalselection'] table.fieldlist td:hover:not(.fieldlistheader), +body[cardType='naturalselection'] table.fieldlist td:focus-within:not(.fieldlistheader) { + --filter: var(--primary-filter); + --text-color: var(--primary); +} + +body[cardType='naturalselection'] img.icon { + background: transparent; + filter: var(--filter); +} + +body[cardType='naturalselection'] img.icon + a { + color: var(--text-color); +} + +/* Checkbox */ +body[cardType='naturalselection'] .checkboxlayouter:not(#ie8) input.checkbox + label.checkbox { + background: none; + border: 1px solid var(--on-background); + height: 16px; + margin-top: 2px; +} + +body[cardType='naturalselection'] + .checkboxlayouter:not(#ie8) + input.checkbox:checked + + label.checkbox::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/** + * Various random things specific to certain cards + */ + +/* + * Partial card info block (Partail Incident, Change Activity) + */ +[guielement='mg-infoblock-content'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='mg-infoblock-content'] img[guielement='icon']:first-of-type { + filter: var(--on-surface-filter); +} + +/* + * Change breadcrumb + */ +[guielement='change_phase_breadcrumb'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='change_phase_breadcrumb'] > [mtype='label'] { + color: var(--text-color) !important; +} + +/* + * Checklist + */ +div#checklist { + background: var(--background); + + --text-color: var(--on-background); + + color: var(--text-color); +} + +div#checklist .explanation-text, +div#checklist .checked-amount, +div#checklist .the-text { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button'] .icon.details, +div#checklist .subtask-header .actions button.date-button, +div#checklist .subtask-header .actions button.menu-button, +div#checklist .subtask-header .operator-and-date button { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button']:hover .icon.details, +div#checklist .subtask-header .actions [role='button']:focus .icon.details, +div#checklist .subtask-header .actions [role='button'] .icon.details.currently-edited, +div#checklist .subtask-header .actions button.date-button:hover, +div#checklist .subtask-header .actions button.menu-button:hover, +div#checklist .subtask-header .actions button.menu-button:focus, +div#checklist .subtask-header .actions button.date-button:focus, +div#checklist .subtask-header .actions button.date-button.currently-edited, +div#checklist .subtask-header .operator-and-date button:hover, +div#checklist .subtask-header .operator-and-date button:focus { + color: var(--primary) !important; +} + +div#checklist .subtask-header.hover, +div#checklist .subtask-header.hover .actions.hover { + background: var(--on-background) !important; + --text-color: var(--background); +} + +/* Context menu, Confirm, and Cancel buttons*/ +div#checklist [role='button'] .icon.circle, +div#checklist button.menu-button .border, +div#checklist .modal-card.popup .close { + color: var(--text-color); + border-color: var(--text-color); +} + +div#checklist [role='button'][aria-disabled='true'] .icon.circle { + --text-color: var(--disabled); + background: none; +} + +div#checklist [role='button']:hover .icon.circle, +div#checklist [role='button']:focus .icon.circle, +div#checklist button.menu-button:hover .border, +div#checklist button.menu-button:focus .border, +div#checklist .modal-card.popup .close:hover, +div#checklist .modal-card.popup .close:focus { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +/* Checkboxes */ +div#checklist .check-container .check { + background: var(--background); + color: var(--on-background); +} + +/* Template select */ +div#checklist ul#templateList li.template-entry.selected { + background: var(--selection); + color: var(--on-selection); +} + +div#checklist ul#templateList li.template-entry:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* Modal popup */ +div#checklist .modal-card.popup .modal-card-head, +div#checklist .modal-card.popup .modal-card-body, +div#checklist .modal-card.popup .modal-card-foot { + background: var(--surface); + --text-color: var(--on-surface); +} +div#checklist .modal-card.popup .modal-card-title { + color: var(--on-surface); +} + +/* Assign operator dialog & Date picker dialog*/ +div#checklist [role='dialog'], +div#checklist .date-picker-popup, +div#checklist .date-picker-popup .date-picker-footer { + background: var(--surface); + --text-color: var(--on-surface); + color: var(--text-color); +} + +div#checklist [role='dialog'] li { + color: var(--on-surface); +} + +div#checklist [role='dialog'] li[role='option']:hover { + background: var(--on-surface); + color: var(--surface); +} + +div#checklist [role='dialog'] button.change-assignee-popover-action-button, +div#checklist .date-picker-popup .td-reset-date button, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today { + background: none; + color: var(--primary); +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:hover, +div#checklist [role='dialog'] button.change-assignee-popover-action-button:focus, +div#checklist .date-picker-popup .td-reset-date button:hover, +div#checklist .date-picker-popup .td-reset-date button:focus, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:hover, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:focus { + color: var(--primary-muted) !important; +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:active, +div#checklist .date-picker-popup .td-reset-date button:active, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:active { + background: var(--primary); + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker-container { + background: var(--background); +} + +div#checklist .help.is-danger { + color: var(--error); +} + +div#checklist .td-date-picker { + color: var(--on-background); +} + +div#checklist .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-header-cell { + background: var(--background); + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selectable { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.weekend { + background-color: var(--disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:not(.currentMonth) { + color: var(--on-disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.today { + border: 1px solid var(--primary-muted) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.focused { + border: 2px solid var(--primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selected { + background-color: var(--primary) !important; + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:hover.selectable { + background-color: var(--primary-muted); + color: var(--on-primary); +} + +div#checklist .date-and-time .control input + .icon { + color: var(--on-background); +} + +div#checklist .date-and-time .control input:focus { + border-color: var(--on-background); + box-shadow: none; +} + +div#checklist .date-and-time .control input:focus + .icon { + z-index: 1000; +} + +div#checklist .date-and-time .control input[aria-invalid='true'] { + background: var(--background); + color: var(--error); + border-color: var(--error); +} + +div#checklist .date-and-time .control input[aria-invalid='true'] + .icon { + color: var(--error); +} + +/* Panels */ + +[mstyles='planboard_dispatch_panel_main'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box'], +[mstyles='planboard_dispatch_panel_main'] [guielement='icon'] { + filter: var(--on-surface-filter); +} +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box']:hover { + filter: var(--primary-filter); +} + +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[mstyles='planboard_dispatch_panel_main'] + [guielement^='planboard_work_item_draggable_'][mstyles^='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +#dragdiv > [guielement^='planboard_work_item_draggable_'] { + background: var(--on-primary); + --text-color: var(--primary); + --filter: var(--primary-filter); + border: 1px solid var(--primary); +} +#dragdiv [mstyles='planboard_work_item_first_text'], +#dragdiv [mstyles='planboard_work_item_second_text'] { + color: var(--text-color); +} + +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button'], +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button'], +[guielement='planner_detail_content'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button']:nth-of-type(2), +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button']:nth-of-type(2), +[guielement='planner_detail_content'] [guielement='icon-button']:nth-of-type(2) { + filter: none; +} + +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption'] { + --filter: var(--on-background-filter); +} +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption']:hover { + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_detail_content'] { + --filter: var(--on-surface-filter); +} + +[guielement='group_linked_information'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='group_linked_information'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='planboard_detail_section_subgroup'] [guielement='pt-memo'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='planboard_detail_section_subgroup'] img[handle^='invisible-for-caller-label-'] { + filter: var(--on-surface-filter); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] + :not([handle='planboard.dispatch.quickplanning']) + + [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Toolbar */ + +[guielement='planboard_weekview_toolbar'] { + background: var(--surface); + --filter: var(--on-surface-filter); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement='planboard_weekview_toolbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime'], +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo'] { + background: transparent; + --text-color: var(--on-surface); +} +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime']:hover, +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo']:hover { + background: transparent; + --text-color: var(--primary); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='day'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='work_week'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='week'] { + /* These have two colours, and on/off can't be distinguished */ + filter: none; +} + +/* Scheduler */ +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] { + background: var(--surface); + --filter: var(--on-surface-filter); + --border: var(--on-surface); + border-color: var(--border); +} +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'] + > [mstyles~='planboard_quick_scheduler_daily_schedule'] { + border-color: var(--border); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler']:hover, +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button']:hover { + --filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler_pressed'], +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed'] { + background: var(--primary); + --border: var(--on-primary); + --filter: var(--on-primary-filter); + border-color: var(--on-primary); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed']:hover, +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed']:hover { + background: var(--primary-muted); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] [handle='picker_part'] { + filter: var(--filter); +} + +[guielement='planner_toolbar_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_toolbar_popup'] [guielement='planboard_header'] { + border-color: var(--text-color); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item'] { + background: var(--background); + --text-color: var(--on-background); + border-color: var(--on-background); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item']:hover { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Grid */ + +/* Header */ +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='planboard_header'] + [guielement='planner_period_header_cell'][mstyles='current_period'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* Operator group row */ +[guielement='planner_row'] [guielement='planboard_operatorgroup_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Operator row */ +[guielement='planner_row'] [guielement='planboard_operator_cell'], +[guielement='planner_row'] [guielement='planner_item_title_cell'], +[guielement='planner_row'] [guielement='planner_cell'] { + background: var(--background); + --text-color: var(--on-background); +} + +[guielement='planboard_operator_cell'] [mstyles='planboard_clickable planboard_zone_label'] { + /* Resetting the color of the timezone button label, as it is printed on top of a dual colored icon */ + color: inherit; +} + +/* Popups */ +[handle='planboard_popup'] [guielement='planner_popup_window'], +[handle='planboard_popup'] [guielement='planboard_popup_header'], +[handle='planboard_popup'] [guielement='planboard_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[handle='planboard_popup'] [handle='planboard.todopopup.to_dispatch']:hover { + --text-color: var(--primary); +} + +[handle='planboard_popup'] [guielement='planboard_work_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'][mstyles*='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'] + [guielement='icon-button']:first-of-type { + filter: var(--filter); +} + +/* + * Filter panel + */ +[guielement='planner_page_content'] [guielement='filter_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_header'], +[guielement='planner_page_content'] [guielement='filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_body'] > [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='planner_page_content'] + [guielement='filter_panel_body'] + > [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* date picker */ +[mstyles='planner_datepicker_grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekday'] { + --text-color: var(--on-background); + background: var(--background); +} +/* non-working day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekend'] { + --text-color: var(--on-surface); + background: var(--surface); +} +/* Special style for 'today' to aid orientation */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today'] { + border-color: transparent; +} +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today_label'] { + --text-color: var(--primary); +} +/* currently selected cell */ +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekday'][mstyles~='planner_datepicker_selected'], +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekend'][mstyles~='planner_datepicker_selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* + * Actions + */ +[guielement='planner_page_content'] [guielement='detail_panel_main'] { + border: 1px solid var(--on-background); +} + +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='planned'] { + --status-color: #057aab; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='terminated'] { + --status-color: #178755; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='request'] { + --status-color: #eda911; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header'] { + background: var(--surface); + --text-color: var(--on-surface); + border-bottom: 0px; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 8px; + background: var(--status-color); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] { + background: var(--background) !important; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'][mstyles~='active'] { + border-color: var(--primary); + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_group_header'] + > [guielement='icon']:first-of-type { + filter: none; +} + +[guielement='planner_page_content'] + [guielement='detail_panel_body'] + input[placeholder]::placeholder { + color: var(--text-color) !important; +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 4px; + background: var(--status-color); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_highlighted_block'] + [guielement='detail_panel_reserved_item'][mstyles~='hovered'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='planner_popup_window'], +[guielement='planner_popup_window'] > [guielement='planner_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_popup_window'] [guielement='spinner-button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button']:hover { + filter: var(--primary-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button'] + [guielement='textbox'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin'] { + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin']:hover { + filter: var(--primary-filter); +} + +/* + * Planner + */ +[handle='reservation.planner.main_view'] > [guielement='planner_header_row'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] + [guielement='mg-header'][mstyles~='reservable_items_group_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_row'] { + background: var(--background); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='servicewindow_shadow_'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='blocked_period_shadow_'] { + background: var(--disabled) !important; +} +[handle='reservation.planner.main_view'] [guielement='planner_item_title_cell'] { + background: var(--background) !important; +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_cell_icon'] > img { + filter: var(--on-background-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_OFF'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON_HOVER'] { + filter: none; +} +[handle='reservation.planner.main_view'] [guielement='planner_room_capacity'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +#dragdiv { + border-color: var(--on-background) !important; +} + +/* New reservation column */ +[handle='reservation.planner.main_view'] [guielement='background_shadow_section'] { + background: repeating-linear-gradient( + -45deg, + transparent, + transparent 9px, + var(--primary) 9px, + var(--primary) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='foreground_shadow_section'] { + border-color: var(--primary); + background: transparent; +} +[handle='reservation.planner.main_view'] [guielement='reservation_feedback_section']:hover { + border-color: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='divisible_room_restriction'] { + background: repeating-linear-gradient( + -45deg, + var(--primary-muted), + var(--primary-muted) 6px, + transparent 6px, + transparent 10px + ); + border-color: var(--primary-muted); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] { + background: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] + > img { + filter: var(--on-primary-filter); +} + +/* Reservation */ +[handle='reservation.planner.main_view'] [guielement='reservation_section'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_section'][mstyles~='selected_section'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[handle='reservation.planner.main_view'] [guielement='reservation_section'] > img { + filter: var(--filter); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] { + background: repeating-linear-gradient( + 45deg, + transparent, + transparent 6px, + var(--disabled) 6px, + var(--disabled) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] > img { + display: none !important; +} + +/* Availability popup */ +[guielement='planner_popup_content'] [handle='availableassets'] ~ img[style*='width: 24px'] { + filter: var(--on-surface-filter); +} + +/* + * TASK BOARD and BOOKMARKS + */ +/* notification */ +[guielement='notification-box'][mstyles='notification-alert'] { + background: var(--background); + border: 1px solid var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] + > [guielement='notification-message'] { + color: var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] > [guielement='icon'] { + filter: var(--primary-filter); +} + +/* filter panel */ +[guielement='taskboard_filter_panel'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border: 1px solid var(--on-background); +} +[guielement='taskboard_filter_panel_header'], +[guielement='taskboard_filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + border-color: var(--on-surface); +} + +[guielement='taskboard_datefilter_button'] { + border-color: var(--surface); +} +[guielement='taskboard_datefilter_button'] > [mtype='label'] { + background: none; +} +[guielement='taskboard_datefilter_button'][mstyles~='taskboard_active_date_filter_caption'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='taskboard_filter_panel_filter_fields'] [mstyles='taskboard_filter_panel_section'] { + border-color: var(--on-background); +} + +[guielement='taskboard_filter_panel_filter_fields'] + [mstyles='taskboard_filter_panel_section'] + [guielement='icon'] { + filter: var(--filter); +} + +/* task list */ +[guielement='taskboard_item_border_group'] { + border-color: var(--surface); +} + +[guielement='taskboard_item_header'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border-color: var(--surface); +} +[guielement='taskboard_item_header'][mstyles~='unfolded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='taskboard_bookmark_button']:disabled { + visibility: hidden !important; +} +[guielement='taskboard_task_icon'] { + filter: var(--filter); +} + +[guielement='taskboard_item_body'] { + border-color: var(--surface); +} +[guielement='taskboard_item_body'] [guielement='taskboard_task_body_data_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='taskboard_item_body'] + [guielement='pt-memo'] + [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +[guielement='taskboard_item_body'] [guielement='pt-memo'] a { + color: var(--primary); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} + +[guielement='taskboard_item']:hover [guielement='taskboard_item_header'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_header'], +[guielement='taskboard_item']:hover [guielement='taskboard_item_body'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_body'] { + border-color: var(--primary-muted); +} + +/** + * Change activity planner tab + */ + +/* + * Change activity planner toolbar + */ +/* Date picker button */ +[guielement='planner_menu_group'] [handle='service_window_check_date_date'] { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] [handle='service_window_check_date_date']:hover { + filter: var(--primary-filter); +} +/* Lock/Unlock buttons (when selecting an activitty) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']) { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):disabled { + padding-bottom: 2px; + border-bottom: 1px solid currentColor; /* The color will be overridden by the filter*/ +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):not(:disabled):hover { + filter: var(--primary-filter); +} +/* Link/Unlink image (when creating/breaking a dependency) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + [mstyles='planner_menu_title'] + ~ [guielement='image'] { + filter: var(--on-background-filter); +} + +/* + * Change activity planner + */ +[guielement='planner_container'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/* Timeline bar */ +[guielement='planner_container'] [guielement='planner_scroll_button_group'], +[guielement='planner_container'] [guielement='planner_view_combobox_container'], +[guielement='planner_container'] + [guielement='planner_default_group'] + :is( + [guielement='planner_time_line_item_first_line'], + [guielement='planner_time_line_item_second_line'] + ) { + border-color: var(--on-surface); +} + +[guielement='planner_container'] [handle='gantt_zoomfit'] { + filter: var(--on-surface-filter); +} +[guielement='planner_container'] [handle='gantt_zoomfit']:hover { + filter: var(--primary-filter); +} + +/* Marker bar */ +[guielement='planner_container'] [guielement='planner_marker_group'] { + background-color: var(--background); + background-color: var(--surface); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle='planner.todaymarker.title'] { + background-color: var(--primary) !important; + color: var(--on-primary); + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [mtype='rectangle']:is( + [style*='background-color: rgb(219, 216, 235)'], + [style*='background-color:#dbd8eb'] + ) { + /* Arrow on the today marker */ + background-color: var(--primary) !important; +} + +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle^='Sprint'][handle$='_marker'] { + filter: var(--on-surface-filter); +} + +/* Activities sidebar */ +[guielement='planner_container'] [guielement='planner_info_group'] { + border-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_inner_group'] { + background-color: var(--background); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_header_line'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--surface); +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] { + --text-color: var(--on-background); + + background-color: transparent !important; + border-color: transparent; +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] + :is( + [guielement='planner_info_control_title'], + [guielement='planner_info_control_subtitle'] + )[style*='color'] { + color: var(--text-color) !important; +} + +/* Planner area */ +[guielement='planner_container'] [guielement='planner_draw_area'] { + background-color: var(--background); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-background); + --text-color: var(--on-background); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + > [mtype='group']:not([guielement]) { + /* Out of service window / weekend */ + background-color: var(--on-background) !important; + opacity: 0.1; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_background_row'] { + background-color: transparent !important; + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_header_line'] { + background-color: var(--surface); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_duration_in_group_header'] { + background-color: var(--on-surface); + --text-color: var(--surface); +} + +/* Connectors */ +[guielement='planner_container'] [guielement='planner_draw_area'] [mtype='rectangle'] { + border-color: var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [mtype='rectangle'][style*='z-index: 3;'] { + /* Connector connected to selected activity */ + border-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_begin'] { + /* Start connector */ + background-color: var(--on-background); + padding: 0; + width: 6px !important; + height: 6px !important; + border-radius: 50%; + border: 2px solid var(--background); + border-right: 0px; + top: 8.5px !important; + left: unset !important; + right: -4px; +} +[guielement='planner_container'] [guielement='planner_draw_area'] [guielement='planner_link_end'] { + /* End connector area */ + position: relative; + overflow: hidden; + width: 8px !important; + height: 12px !important; + border-width: 0px; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_end']:after { + /* End connector arrow */ + content: ''; + position: absolute; + width: 10px; + height: 10px; + background: var(--on-background); + transform: rotate(45deg); + left: -7px; + top: 1px; + box-shadow: 0 0 0px 2px black; +} + +/* Blocks */ +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_info_control_title'] { + /* to fix templates where the label is forced grey */ + color: var(--text-color) !important; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* light-ish red unselected */ + [style*='background-color: rgb(208, 49, 49);'], [style*='background-color:#d03131;'], + /* light-ish red selected */ + [style*='background-color: rgb(191, 27, 44);'], [style*='background-color:#bf1b2c;'], + /* darker red (doesn't seem to change on selection)*/ + [style*='background-color: rgb(164, 23, 37);'], [style*='background-color:#a41725;'], + ) { + /* Overdue / No Go */ + background-color: var(--error) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* grey */ + [style*='background-color: rgb(149, 149, 149);'], [style*='background-color:#959595;'], + ) { + /* Not ready to start / Not ready to authorize */ + background-color: transparent !important; + border: 1px solid var(--error) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* lightblue unselected */ + [style*='background-color: rgb(118, 182, 209);'], [style*='background-color:#76b6d1;'], + /* lightblue selected */ + [style*='background-color: rgb(73, 158, 193);'], [style*='background-color:#499ec1;'], + ) { + /* Ready to start */ + background: repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* blue unselected */ + [style*='background-color: rgb(5, 122, 171);'], [style*='background-color:#057aab;'], + /* blue selected */ + [style*='background-color: rgb(0, 107, 156);'], [style*='background-color:#006b9c;'], + ) { + /* Waiting for Authorization / Started */ + background: repeating-linear-gradient( + -45deg, + var(--primary), + var(--primary) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--primary) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* green unselected */ + [style*='background-color: rgb(23, 135, 85);'], [style*='background-color:#178755;'], + /* green selected */ + [style*='background-color: rgb(19, 117, 73);'], [style*='background-color:#137549;'], + ) { + /* Resolved / Go */ + background-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* teal unselected */ + [style*='background-color: rgb(115, 197, 158);'], [style*='background-color:#73c59e;'], + /* teal selected */ + [style*='background-color: rgb(66, 177, 128);'], [style*='background-color:#42b180;'], + ) { + /* Skipped */ + background: repeating-linear-gradient( + 45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ), + repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* white (also has grey border) */ + [style*='background-color: rgb(242, 242, 242);'], [style*='background-color:#f2f2f2;'], + ) { + /* Template */ + background-color: transparent !important; + border: 2px dotted var(--on-background) !important; +} + +/* Planner scope bar */ +[guielement='planner_container'] [guielement='planner_custom_scroll_area'] [guielement='image'] { + filter: var(--on-surface-filter); +} + +/* Vertical lines */ +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;'] { + /* Milestone line */ + border-color: var(--milestone-line-color) !important; +} +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;']:is( + [style*='border-left-color: rgb(219, 216, 235)'], + [style*='border-left:1px solid #dbd8eb'] + ) { + /* Today line */ + --milestone-line-color: var(--primary); +} + +/* Activitity bar (hover/select state) */ +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(183, 178, 216)'] { + /* Selected */ + box-shadow: inset 8px 0px 0px 0px var(--primary); + border-color: var(--primary); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(219, 216, 235)'] { + /* Hovered */ + border-color: var(--on-background); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(159, 153, 203)'] { + /* Selected and Hovered */ + box-shadow: inset 8px 0px 0px 0px var(--on-background); + border-color: var(--on-background); +} + +/* Collapsible sidebar */ +[guielement='collapsible_panel_container'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [guielement='collapsible_panel_header'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [mstyles='chm-planner-sidepanel-filter'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt'] { + filter: var(--on-background-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:hover { + filter: var(--primary-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:active { + filter: var(--primary-muted-filter); +} + +/* + * New activity popup + */ +[guielement='popup-body'] [guielement='rich_text_memo_group'][mstyles~='memo_like_progresstrail'] { + background-color: transparent; +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']) { + filter: var(--on-surface-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):hover { + filter: var(--primary-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):active { + filter: var(--primary-muted-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button'])[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/** + * Activity Overview tab + */ +[guielement='collected_memo_history'] [guielement='history_entry_list'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + :is([guielement='history_stamp'], [guielement='history_contents']) { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button'] { + background-color: transparent; + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button']:hover { + --text-color: var(--primary-muted); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'][mstyles='history_entry_non_clickable']::before { + content: '▸'; + position: absolute; + left: -12px; + font-size: 14px; + color: var(--text-color); +} + +/** + * Activity Checklist + */ +[guielement='checklist_sidebar_header'] { + background-color: var(--surface); + border-color: var(--surface); +} + +[guielement='checklist_sidebar_content'] { + background-color: var(--surface); + border-color: var(--surface); + border-top-color: var(--on-surface); +} + +[guielement='checklist_item'] + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--surface); +} +[guielement='checklist_item']:is(:hover, :focus-within) + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--primary); +} + +[guielement='checklist_item'] [guielement='checklist_item_header'][mstyles='unfolded'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='checklist_item'] + [guielement='checklist_item_content'] + [guielement='checklist_grey_section'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/** + * Change Calendar + */ +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--on-surface); +} +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] > [mtype='group'] { + border-color: var(--on-surface) !important; +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] { + background: var(--on-surface); /* The table and cell borders of the month view */ +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekend'] { + background-color: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekday'] { + background-color: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] > [mstyles~='month_calendar_today'] { + border-color: transparent; + box-shadow: inset 0 0 0 2px var(--primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_week_label'] { + background-color: var(--primary); + --text-color: var(--on-primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_item'] { + background-color: transparent; +} +[guielement='changecalendarpage'] [guielement='month_calendar_item']:hover { + background-color: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[guielement='changecalendarpage'] + [guielement='month_calendar_item'] + [guielement='icon'][mtype='imagearea']:first-child { + filter: var(--filter); +} + +/** + * Time Registration + */ + +[guielement='tr-fold-header-border'] { + border-top-color: transparent; +} + +[guielement='tr-fold-header'], +[guielement='tr-fold-content'] { + border-left-color: var(--surface); +} + +[guielement='tr-fold-header'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='tr-fold-header'] > img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='tr-fold-content'] img[guielement='icon'] { + filter: var(--on-background-filter); +} + +[guielement='tr-fold-header'] [guielement='tr-time'] { + color: var(--primary); +} +[guielement='tr-fold-content'] [guielement='tr-time'] { + border-color: var(--text-color); +} + +/** + * Mango Grid + */ + +[mtype='grid'] { + border-color: var(--background); + --selected-row-border: var(--primary); +} + +[mtype='grid'][mstyles='blurred'] { + --selected-row-border: var(--on-surface); +} + +[mtype='grid'] [id$='_content'] { + color: var(--text-color); +} + +/* selected */ +[mtype='grid'] [id$='_selection'] [id*='_selection_'][style*='background-color'] { + background-color: transparent !important; + box-shadow: inset 0 0 0px 1px var(--selected-row-border); +} + +/* header */ +[mtype='grid'] [id$='_header'] { + --text-color: var(--on-surface); +} + +[mtype='grid'] [id$='_header'] img { + filter: var(--on-surface-filter); +} + +[mtype='grid'] [id$='_header'] [style*='background-color'] { + background-color: var(--surface) !important; +} +[mtype='grid'] [id$='_header'] [style*='border-right'] { + border-color: var(--on-surface) !important; +} + +/* Content */ +[mtype='grid'] [id$='_columnstyling'] [style*='background-color'] { + background-color: var(--background) !important; +} + +[mtype='grid'] [id$='_content'] [style*='border-right'] { + border-color: var(--on-background) !important; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/concurrent_users/.*") { +body { + background: var(--background); +} + +.notification.is-warning { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); + border-radius: 5px; +} + +.notification.is-warning .icon { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/grid.*"), regexp("http(s)?://.*/tas/secure/[^assetmgmt].*?action=.*") { +/* + * Grids + */ + +/* + * The checkboxes are a dual colored image on top of a native checkbox. + * Unfortunately neither one can be recolored or styled effectively. + */ + +html, +body { + background: transparent; +} + +body[cardtype='grid'] { + background: var(--background); + color: var(--on-background); +} +body[cardtype='grid'] .header { + border-color: var(--on-surface); +} + +body[cardtype='grid'] .topbar .filter > a { + color: var(--primary); +} +body[cardtype='grid'] .topbar .filter > a:hover { + color: var(--primary-muted); +} +body[cardtype='grid'] .topbar .filter > a:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Grid buttons */ +body[cardtype='grid'] #actionbar .button { + --text-color: var(--on-background); + --filter: var(--on-background-filter); + + background: var(--background); + border-color: var(--on-background); + color: var(--text-color); + + margin-top: 4px; + height: 24px; + line-height: 24px; +} + +body[cardtype='grid'] #actionbar .menu-button > .chevron { + filter: var(--filter); +} + +body[cardtype='grid'] #actionbar .button:hover, +body[cardtype='grid'] #actionbar .button.menu-button.toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button:focus { + outline: 2px solid var(--primary) !important; + outline-offset: 2px; + isolation: isolate; +} + +body[cardtype='grid'] #actionbar .button:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred { + background: var(--primary); + border-color: var(--primary); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +body[cardtype='grid'] #actionbar #reload-grid-button, +body[cardtype='grid'] #actionbar .button.setup_button { + position: relative; +} + +body[cardtype='grid'] #actionbar #reload-grid-button::before, +body[cardtype='grid'] #actionbar .button.setup_button::before { + content: ''; + position: absolute; + filter: var(--filter); + top: 4px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* grid reload button */ +body[cardtype='grid'] #actionbar #reload-grid-button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath fill='%23757576' d='M14.9 6V0L13 1.9C9.8-.6 5.3-.4 2.4 2.5c-3.1 3.1-3.1 8.1 0 11.2 3.1 3.1 8.1 3.1 11.2 0 1.4-1.4 2.1-3.1 2.3-4.9h-2.7c-.1 1.1-.6 2.2-1.5 3-2.1 2.1-5.4 2.1-7.5 0-2.1-2.1-2.1-5.4 0-7.5 1.8-1.8 4.7-2 6.8-.6L8.9 6h6z'/%3E%3C/svg%3E"); + left: 8px; +} +/* grid setup button */ +body[cardtype='grid'] #actionbar .button.setup_button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M13.9 7.2l1.8-.7-1.1-2.8-1.8.7c-.3-.5-.7-.8-1.2-1.2l.7-1.8L9.6.3l-.8 1.8c-.5-.1-1.1-.1-1.6 0L6.4.3 3.6 1.4l.7 1.8c-.4.4-.8.8-1.1 1.2l-1.8-.8L.3 6.4l1.8.7c-.1.6-.1 1.2 0 1.7l-1.8.8 1.1 2.8 1.8-.7c.3.5.7.8 1.2 1.2l-.7 1.8 2.8 1.1.7-1.8c.5.1 1.1.1 1.7 0l.7 1.8 2.8-1.1-.7-1.8c.5-.3.8-.7 1.2-1.2l1.8.7 1.1-2.8-1.8-.7c0-.6 0-1.2-.1-1.7zm-4.7 3.6c-1.5.6-3.3-.1-3.9-1.6s.1-3.3 1.6-3.9c1.5-.6 3.3.1 3.9 1.6.6 1.5-.1 3.2-1.6 3.9z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* auto-refresh button enabled */ +/* Should have been a proper toggle button with aria-pressed="true" */ +body[cardtype='grid'] #actionbar .button.autorefresh-toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled::before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z'/%3E%3C/svg%3E"); + + margin-right: 8px; + margin-bottom: -3px; + + width: 16px; + height: 16px; + filter: var(--filter); + + display: inline-block; +} + +/* Grid menu */ +body[cardtype='grid'] .more-menu { + background: var(--surface); +} +body[cardtype='grid'] .more-menu .menu-item { + color: var(--on-surface); +} + +body[cardtype='grid'] .more-menu .menu-item:hover, +body[cardtype='grid'] .more-menu .menu-item:focus { + outline: none !important; + background: var(--on-surface); + color: var(--surface); +} + +/* grid container */ +body[cardtype='grid'] .stretchdiv { + background: var(--background); +} + +/* column headers */ +#headers .column { + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + + background: var(--surface); + color: var(--text-color); +} +#headers .column .ordericon { + filter: var(--filter); +} +/* column header separator */ +#headers .column .sizer #border { + background: var(--on-surface); +} +#headers .column.highlight { + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); + + background: var(--primary); +} +/* bottom bar */ +body[cardtype='grid'] .bottombar { + background: var(--surface); + color: var(--on-surface); +} +body[cardtype='grid'] .bottombar .currentpage { + color: var(--primary); +} +body[cardtype='grid'] .bottombar a { + color: var(--on-surface); +} + +/* data cells */ +div#columnsscroll { + background: var(--background); +} +div#columnsscroll .column span { + color: var(--text-color); +} +div#columnsscroll .column:is(#_status, #_changetypecolumn, #_typecolumn) span > .gridicon { + filter: var(--filter); +} +div#columnsscroll .column .normal, +div#columnsscroll .column .overduechanged, +div#columnsscroll .column .overduenew { + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +div#columnsscroll .column .overduealert { + /* Due today */ + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +div#columnsscroll .column .overduealarm { + /* Overdue */ + --text-color: var(--error); + --filter: var(--error-filter); +} +div#columnsscroll .column .archived { + --text-color: var(--primary); + --filter: var(--primary-filter); +} +/* highlight bar */ +div#columnsscroll div#selected.focus { + background: none; + border: 1px solid var(--primary); +} +div#columnsscroll div#selected.nofocus { + background: none; + border: 1px solid var(--on-background); +} +/* column separator */ +div#columnsscroll .column { + border-color: var(--on-background); +} + +/* details */ +#detailframediv .ui-resizable-handle { + filter: var(--on-background-filter); +} +#detailsbody .memocontainer { + color: var(--on-background); + border-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/agileboard/.*") { +::selection { + background: var(--selection); + color: var(--on-selection); +} + +body { + background: var(--background) !important; + + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +:is(h1, h2, h3, h4, h5, h6).title { + color: var(--text-color) !important; +} +div.title.is-5 { + /* Assign to "heading" in the 'Create note' popup */ + color: var(--text-color); +} + +p.label { + color: var(--text-color); +} +.choose-board label.filterlabel { + /* choose board select label */ + color: var(--text-color); +} + +a.has-text-link { + color: var(--primary) !important; +} +a.has-text-link:hover { + background: var(--on-background); + color: var(--background) !important; +} +a.has-text-link:focus { + outline: 2px solid var(--outline-color); + color: var(--primary) !important; +} + +#board-data-with-side-panel .resizable-container .resizer { + /* resize handle between board and sidebar */ + border-color: var(--on-background); +} + +/* + * Top row link buttons + */ +.filter-button > i.icon, +.filter-button > a, +.all-boards-button > i.icon, +.all-boards-button > a { + color: var(--text-color) !important; +} +.filter-button > a, +.all-boards-button > a { + outline: none; +} +.filter-button:hover, +.all-boards-button:hover { + --text-color: var(--primary); +} +.all-boards-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +.filter-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: -2px; +} + +.filter-header.active .filter-button { + background: var(--surface); + --text-color: var(--on-surface); +} +.filter-header.active .filter-button:hover { + --text-color: var(--primary); +} + +/* + * Filter bar + */ +.header .filter-bar { + background: var(--surface); +} +.header .filter-bar label { + color: var(--on-surface); +} +.toggle-button-group input[type='radio'] + .button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.toggle-button-group input[type='radio']:hover + .button { + background: var(--on-background); + color: var(--background); +} +.toggle-button-group input[type='radio']:active + .button { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked + .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked:hover + .button { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +.toggle-button-group input[type='radio']:focus + .button { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + z-index: 1; +} + +/* + * Button + */ +button.button, +button.calendar-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + border-color: var(--border-color) !important; + color: var(--text-color) !important; + + isolation: isolate; + + transition: none !important; +} +button.button:hover, +button.calendar-button:hover { + --bg-color: var(--on-background); + --text-color: var(--background); +} +button.button:active, +button.calendar-button:active { + --bg-color: var(--surface); + --text-color: var(--on-surface); + --border-color: var(--on-surface); +} +button.button:focus, +button.calendar-button:focus { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px !important; + box-shadow: none !important; +} +button.button .icon { + color: var(--text-color); +} + +button.button.is-primary { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +button.button.is-primary:hover { + --bg-color: var(--primary-muted); + --border-color: var(--primary-muted); +} +button.button.is-primary:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); +} + +button.button.is-primary[disabled], +button.button[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); + + pointer-events: none; +} + +button.is-primary.is-selected { + --bg-color: var(--on-background); + --text-color: var(--background); + --border-color: var(--on-background); +} + +/* assign to me button in Çreate note' popup */ +button.button.circle[disabled] { + background: var(--bg-color) !important; + border-color: var(--border-color) !important; +} + +/* + * Menu + */ +ul.button-submenu { + background: var(--surface); + color: var(--on-surface); +} +ul.button-submenu li { + --bg-color: var(--surface); + --color: var(--on-surface); + + background: var(--bg-color) !important; + color: var(--text-color) !important; +} +ul.button-submenu li:focus, +ul.button-submenu li:hover { + --bg-color: var(--on-surface); + --text-color: var(--surface); +} +ul.button-submenu li:focus { + outline: none; +} +ul.button-submenu li.item.divided { + border-top-color: var(--on-surface); +} + +/* + * Popup + */ +header.modal-card-head { + background: var(--surface); + border-color: var(--on-surface); + + --outline-color: var(--on-surface); + --text-color: var(--on-surface); +} +header.modal-card-head > .modal-card-title { + color: var(--text-color); +} +header.modal-card-head > button.delete { + background: var(--background); + border-color: var(--on-background); + + --color: var(--on-background); +} +header.modal-card-head > button.delete:hover { + background: var(--primary); + border-color: var(--primary); + + --color: var(--on-primary); +} +header.modal-card-head > button.delete:active { + background: var(--on-primary); + border-color: var(--primary); + + --color: var(--primary); +} +header.modal-card-head > button.delete:focus { + box-shadow: none; + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +header.modal-card-head > button.delete::before, +header.modal-card-head > button.delete::after, +header.modal-card-head > button.delete:active::before, +header.modal-card-head > button.delete:active::after, +header.modal-card-head > button.delete:hover::before, +header.modal-card-head > button.delete:hover::after { + background: var(--color); +} +section.modal-card-body { + background: var(--surface); + + --text-color: var(--on-surface); +} +footer.modal-card-foot { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); +} + +/* Help popup shortcuts */ +div.item.label { + color: var(--text-color); +} +div.item.label > span { + border-color: var(--on-background); + background: var(--background); + color: var(--on-background); +} + +/* + * Field + */ +.field .field-label label.label { + color: var(--text-color); +} + +.field.is-danger label.label { + color: var(--error); +} + +input.input, +textarea.textarea, +.select select { + --bg-color: var(--background); + --border-color: var(--on-background); + --text-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} + +input.input:invalid, +.select select:invalid, +.field.is-danger input.input { + --text-color: var(--error); + --border-color: var(--error); +} + +input.input:focus, +textarea.textarea:focus, +.select select:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; + box-shadow: none; +} + +input.input[disabled], +textarea.textarea[disabled], +.select select[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); +} + +.select select { + appearance: auto; +} + +input.is-checkradio + label { + --check-bg-color: var(--background); + --check-color: var(--on-background); + --check-border-color: var(--on-background); + + color: var(--text-color); + margin-left: 4px !important; /* making space for the outline */ +} +input.is-checkradio + label::before, +input.is-checkradio:checked + label::before { + background: var(--check-bg-color) !important; + border-color: var(--check-border-color) !important; + box-shadow: none !important; +} +input.is-checkradio + label::after { + border-color: var(--check-color) !important; +} +input.is-checkradio:focus + label::before { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px; +} +input.is-checkradio[type='checkbox']:hover:not([disabled]) + label::before, +input.is-checkradio[type='checkbox']:focus:not([disabled]) + label::before { + border-color: var(--check-border-color) !important; +} + +#provide-title { + /* making space for the outline of the provide title field in the create board popup */ + margin-top: 4px; +} + +/* + * Date picker + */ +#due-date-input .date-picker { + background: var(--surface); +} +#due-date-input .td-date-picker-container { + background: var(--surface); +} +#due-date-input .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-surface); +} +#due-date-input .td-date-picker-controls-container button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} +#due-date-input .td-date-picker-controls-container button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + box-shadow: none; +} +#due-date-input button.td-date-time-input-go-to-today { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input button.td-date-time-input-go-to-today:hover { + text-decoration: underline; +} +#due-date-input button.td-date-time-input-go-to-today:focus { + color: var(--primary); + text-decoration: underline; + outline: none; +} +#due-date-input table:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +#due-date-input th.td-date-picker-header-cell { + color: var(--on-surface); + background-color: var(--surface); +} +#due-date-input td.td-date-picker-cell { + border-color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label { + background: var(--background); + color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label.selectable:hover { + background-color: var(--primary-muted); + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.weekend { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.today { + color: var(--primary); + border-color: transparent !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected { + background: var(--primary) !important; + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.focused { + border-color: var(--primary) !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected.focused { + border-color: var(--on-primary) !important; +} + +/* + * Notification + */ +div.notification.is-primary { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +div.notification.is-primary .icon { + color: var(--on-background); +} +div.notification.is-danger { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--error); +} +div.notification.is-danger .icon { + color: var(--error); +} +div.notification.is-warning { + background: var(--background); + color: var(--on-background); + border: 2px solid var(--primary); +} +div.notification.is-warning .icon { + color: var(--primary); +} +div.notification.is-warning a.close { + color: var(--primary); +} +div.notification.is-warning a.close:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +div.notification.is-warning a.close:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * Board + */ + +.board .header { + background: transparent; +} +.board #lanes-headers { + background: transparent; +} +.board .lane-header { + background: var(--surface); +} +.board .lane-header .label { + color: var(--on-surface); +} +.board .lane-header .lane-task-count { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +.board .lane { + background: var(--surface); +} + +:is(.gu-unselectable, .board) .task-container { + --text-color: var(--on-background); + + background: var(--background); + border: 1px solid var(--on-background); + color: var(--text-color); +} +:is(.gu-unselectable, .board) + .task-container + div[handle='assignee-avatar-initials'] + > .vue-avatar--wrapper { + background-color: var(--background) !important; + border: 1px solid var(--on-background); + color: var(--on-background) !important; +} +:is(.gu-unselectable, .board) .task-container [handle='assignee-avatar']:focus { + outline: 1px solid var(--primary); +} + +:is(.gu-unselectable, .board) .task-container .is-black-link { + color: var(--text-color); +} +:is(.gu-unselectable, .board) .task-container .is-black-link:focus { + outline: none; + color: var(--primary); + text-decoration: underline; +} + +:is(.gu-unselectable, .board) .task-container .formatted-text { + color: var(--text-color); +} + +:is(.gu-unselectable, .board) .task-container .icon { + color: var(--text-color) !important; +} +:is(.gu-unselectable, .board) .task-container .overdue { + color: var(--error); +} + +:is(.gu-unselectable, .board) .task-container.selected { + background: var(--background); + border-color: var(--primary-muted); + + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container:focus, +:is(.gu-unselectable, .board) .task-container:focus-within { + background: var(--background); + border-color: var(--primary); + outline: none; + border-left-width: 8px; + + --text-color: var(--on-background); +} + +.board .task-container.closed:not(:focus):not(:focus-within):not(:hover) { + background: var(--disabled); + --text-color: var(--on-disabled); +} + +.board .task-container.closed:not(:focus):not(:focus-within):hover, +.gu-unselectable .task-container.closed { + background: var(--background); + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container .task-content.has-folded-corner::after { + border-color: var(--on-background) var(--surface); +} +:is(.gu-unselectable, .board) .task-container:focus .task-content.has-folded-corner::after, +:is(.gu-unselectable, .board) .task-container:focus-within .task-content.has-folded-corner::after { + border-color: var(--primary) var(--surface); +} + +.board .task-container.gu-transit { + background: var(--on-primary); + border-color: var(--primary); + --text-color: var(--primary); +} + +/* + * Sidebar + */ + +#side-panel { + background: var(--background); + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +#side-panel #side-panel-header span.card-header { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link:hover { + text-decoration: underline; +} +#side-panel #side-panel-header a.is-black-link:focus { + outline: none; + --text-color: var(--primary); + text-decoration: underline; +} +#side-panel #side-panel-header .icon { + color: var(--text-color) !important; +} +#side-panel #side-panel-header button.close-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); +} +#side-panel #side-panel-header button.close-button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#side-panel #side-panel-header button.close-button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#side-panel .parent-block { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); +} +#side-panel .parent-block .icon { + color: var(--text-color) !important; +} + +#side-panel .task-details .caller-name, +#side-panel .task-details .branch-name, +#side-panel .task-details .label, +#side-panel .content .label { + color: var(--text-color); +} +#side-panel .content .description-container { + --text-color: var(--on-background); + background: var(--background); + border: 1px solid var(--primary); +} +#side-panel .content .description-container::after { + border-color: var(--primary) var(--background); + bottom: -1px; + right: -1px; +} +#side-panel .content .description-container .creation-date, +#side-panel .content .description-container .description { + color: var(--text-color); +} + +#side-panel .progresstrail .pt-entry { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); + border-color: var(--on-surface); +} +#side-panel .progresstrail .pt-entry .pt-header, +#side-panel .progresstrail .pt-entry .pt-header .pt-date, +#side-panel .progresstrail .pt-entry a, +#side-panel .progresstrail .pt-entry .icon, +#side-panel .progresstrail .pt-entry figcaption, +#side-panel .progresstrail .pt-entry strong { + color: var(--text-color) !important; +} +#side-panel .progresstrail .pt-entry a:active { + --text-color: var(--primary); +} +#side-panel .progresstrail .pt-entry a:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +#side-panel .progresstrail .pt-entry.flagged { + --text-color: var(--on-primary); + background: var(--primary); +} +#side-panel .progresstrail .pt-entry.invisible { + border-left-color: var(--primary); +} + +/* + * Change assignee popup + */ +.change-assignee-popover:is(.positioned-above, .positioned-below) { + border-color: var(--primary); + background-color: var(--background); +} +.change-assignee-popover.positioned-above::before { + border-top-color: var(--primary) !important; +} +.change-assignee-popover.positioned-above::after { + border-top-color: var(--background) !important; +} +.change-assignee-popover.positioned-below::before { + border-bottom-color: var(--primary) !important; +} +.change-assignee-popover.positioned-below::after { + border-bottom-color: var(--background) !important; +} + +.change-assignee-popover-action-button { + --button-clr: var(--on-background); + color: var(--button-clr) !important; + background-color: transparent !important; + text-decoration: underline; +} + +.change-assignee-popover-action-button:not(:disabled):hover, +.change-assignee-popover-action-button:not(:disabled):focus-visible { + --button-clr: var(--primary); +} + +.change-assignee-popover-action-button:disabled { + --button-clr: var(--disabled); +} + +.change-assignee-popover-divider { + border-color: var(--on-background) !important; +} + +.change-assignee-popover .user-list .user-list-option:hover, +.change-assignee-popover .user-list .user-list-option:focus { + background-color: var(--primary); + --text-color: var(--on-primary); +} +.change-assignee-popover .user-list .user-list-option [handle='user-list-option-name'] { + color: var(--text-color); +} +@media (forced-colors: none) { + .change-assignee-popover .user-list .user-list-option:focus { + outline: none; + } +} + +/* + * Edit Board popup + */ +[role='dialog'] [role='tablist'] [role='tab'] a { + color: var(--on-background); + border-bottom-color: var(--on-background); +} +[role='dialog'] [role='tablist'] [role='tab'].is-active a { + color: var(--primary); + border-bottom-color: var(--primary); +} + +/* Integration switch */ +.status-mapping .mapping.checkbox { + background: transparent; + color: var(--on-surface); +} +.status-mapping .mapping.checkbox .toggle { + border: 2px solid var(--on-surface); + background: var(--background); +} +.status-mapping .mapping.checkbox .toggle .toggle-inner { + margin: 0; + border: 2px solid var(--on-background); + background-color: var(--background); +} +.status-mapping .mapping.checkbox .toggle.enabled .toggle-inner { + background-color: var(--on-background); +} + +/* labels */ +.dnd-hint, +.lane-name.label { + color: var(--on-surface); +} + +/* status mapper */ +.lanes .status, +.lanes .status.closed { + --text-color: var(--on-background); + + background-color: var(--background); + border: 2px solid var(--on-background); +} +.lanes .status .name { + color: var(--text-color); +} +.lanes .status:hover, +.lanes .status.closed:hover { + background-color: var(--on-background); + --text-color: var(--background); +} +.lanes .status + .status { + margin-top: 4px; +} + +/* status mapper drag and drop */ +.lanes .status.gu-transit { + background: var(--background) !important; + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone, +.lanes .lane.closed .lane-settings-content.lane-drop-zone { + background: var(--background) !important; +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.allowed.over { + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.notAllowed { + background: var(--disabled) !important; + border: 2px solid var(--background); +} + +/* + * Create note popup + */ +.modal-card-foot .feedback-link { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-buttons.*") { +/* + * Module Page Buttons + */ + +html, +body { + background: var(--surface); +} + +.richbutton { + border-color: var(--on-surface); + background: var(--background); + + overflow: auto; /* richbutton-image clips through the rounded corners of the border */ +} +.richbutton .richbutton-title, +.richbutton .richbutton-description { + color: var(--on-background); +} +.richbutton .richbutton-image { + background: var(--background); + color: var(--on-background); +} + +.richbutton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.richbutton:hover, +.richbutton:active { + border-color: var(--primary); +} +.richbutton:is(:hover, :active) .richbutton-title { + color: var(--primary); +} +.richbutton:is(:hover, :focus-visible) .richbutton-image { + background: var(--background); + color: var(--primary); +} + +.richbutton:active .richbutton-image { + background: var(--primary); + color: var(--on-primary); +} + +.richbutton .richbutton-new { + background: var(--primary); + color: var(--on-primary); +} + +@media (prefers-reduced-motion: no-preference) { + .richbutton .richbutton-image { + transition: transform; + transform-origin: center bottom; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + .richbutton:hover .richbutton-image { + transform: scale(1.1); + transition-duration: 0.15s; + transition-timing-function: ease-out; + } +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-migration-information.*") { +/* + * Module Page Migration + */ + +html, +body { + background: var(--surface); + color: var(--on-surface); +} + +a { + color: var(--primary); +} +a:hover { + color: var(--primary-muted); +} +a:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +button.button.is-primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} + +button.button.is-primary:focus { + color: var(--on-primary); +} +button.button.is-primary:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*") { +/* + * Asset overview + */ + +/* + * !! Ignoring keyboard focus, as the page is completely unworkable by keyboard. + */ + +*, +*::after { + box-shadow: none !important; +} +body { + background: var(--background); + color: var(--on-background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +input[type='text'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +input[type='text']:disabled { + background: var(--background); + color: var(--on-background); + border-color: var(--disabled); +} +label.checkboxButton { + --color: var(--on-background); + --bg: var(--background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; + transition: none !important; +} +label.checkboxButton > .icon.check { + color: var(--color) !important; +} +label.checkboxButton > span.label { + /* 'Range' checkbox label for a count filter */ + color: var(--color); +} +label.checkboxButton:hover { + --color: var(--primary); + --border-color: var(--primary); +} +.overview card-header > .title > .details { + color: var(--on-background); +} + +/* Share link */ +.share-link .shareLink span { + color: var(--on-background); + text-decoration: underline; +} +.share-link .shareLink i.tiny.icon:first-child { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.share-link .shareLink:hover span { + color: var(--primary); +} +.share-link .shareLink:hover i.tiny.icon:first-child { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} + +.share-link .popover .popover-popup { + border-color: var(--surface); +} +.share-link .popover .popover-popup::after { + border-color: var(--surface); +} +.share-link .popover .popover-popup .head, +.share-link .popover .popover-popup .content, +.share-link .popover .popover-popup .foot { + background: var(--surface); + border-color: var(--on-surface); + color: var(--on-surface); +} +.share-link .popover .popover-popup .head .icon { + color: var(--on-surface); +} +.share-link .popover .popover-popup .foot .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.share-link .popover .popover-popup .foot .button:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.share-link .popover .popover-popup .foot .button:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +/* New button */ +.ui.button.tdButton.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.ui.button.tdButton.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary.active { + /* menu open */ + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} + +.ui.button.tdButton.dropdown .menu.white { + border: none; + background: var(--surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input { + padding: 8px; + border-color: var(--on-surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input { + border: 1px solid transparent; +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input:focus { + border-color: var(--on-surface); +} + +.ui.button.tdButton.dropdown .menu.white .item { + color: var(--on-surface); + border-bottom: none; + padding: 8px 16px; + font-size: 0.875rem; + width: 150px; +} +.ui.button.tdButton.dropdown .menu.white .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.ui.button.tdButton.dropdown .menu.white .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Toolbar */ +card-header .toolbars .toolbar .split.buttons { + border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons :where(.tdButton, .tdActionButton, [role='button']) { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .refresh:before { + color: var(--color); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']).active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu { + border: none !important; +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu a.tdButton { + --bg: var(--surface); + --color: var(--on-surface); + + padding: 8px 16px; +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton[aria-disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton:hover:not([aria-disabled='true']) { + --bg: var(--on-surface); + --color: var(--surface); +} + +/* Toolbar 'columns' menu, filter panel 'add filter' menu, and filter panel 'context' menus */ +.dropdown-content.menu { + background: var(--surface); + color: var(--on-surface); + border: none; +} +.dropdown-content.menu::after { + /* Setting this to important so it also works for the add filter menu */ + border-top-color: var(--surface) !important; +} +.dropdown-content.menu .search { + border-color: var(--on-surface); +} +.dropdown-content.menu .search .icon { + color: var(--on-background); + right: 16px; +} +.dropdown-content.menu .search input { + height: initial; + padding: 8px; + border: 1px solid transparent; +} +.dropdown-content.menu .search input:focus { + border-color: var(--on-surface); +} +.dropdown-content.menu .header { + background: var(--background); + color: var(--on-background); + border-top: 4px solid var(--surface); +} +.dropdown-content.menu .footer { + border-color: var(--on-surface); +} +.dropdown-content.menu .item { + --filter: var(--on-surface-filter); + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; +} +.dropdown-content.menu .item .icon.small { + filter: var(--filter) !important; +} +.dropdown-content.menu .item label, +.dropdown-content.menu .item.is-active label, +.dropdown-content.menu .item .filter-header label { + /* Item label in add filter menu and filter context menu*/ + color: var(--color); +} +.dropdown-content.menu .item.selected, +.dropdown-content.menu .item.is-active { + --filter: var(--on-primary-filter); + --bg: var(--primary); + --color: var(--on-primary); +} +.dropdown-content.menu .item:hover { + --filter: var(--surface-filter); + --bg: var(--on-surface); + --color: var(--surface); +} +.dropdown-content.menu .item.disabled { + opacity: initial; + --bg: var(--disabled); + --color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} +.dropdown-content.menu .item [role='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} +.dropdown-content.menu .item [role='checkbox'] > .check { + color: var(--on-background); +} +.dropdown-content.menu .footer .tdActionButton.reset { + --bg: var(--surface); + --color: var(--primary); + padding: 8px; + text-decoration: underline; +} + +/* + * Filter panel + */ +asset-filter.panel { + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header { + border-color: var(--on-background); +} +asset-filter.panel > .header span { + color: var(--on-background); +} +asset-filter.panel .bordered { + border-color: var(--on-background); +} +asset-filter.panel .subheader { + color: var(--on-background); +} +asset-filter.panel .subheader .icon { + color: var(--on-background); +} +asset-filter.panel .filter-message { + color: var(--on-background); +} +/* Collapse/expand button */ +asset-filter.panel > .header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* Search */ +asset-filter.panel > .content .highlighted { + background: var(--primary); + border-bottom: 1px solid var(--on-background); +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input { + height: 2rem; + border-color: transparent; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input:focus { + outline: 2px solid var(--on-primary); + outline-offset: 2px; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch .icon { + color: var(--on-background); + display: flex; + align-items: center; +} + +/* Saved filters actions */ +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button { + background: var(--background); + color: var(--on-background); + transition: none !important; + text-shadow: none !important; +} +asset-filter.panel + .filter-overviews + .subheader + .icon-buttons + button.icon-button:not(:disabled):hover { + background: var(--on-background); + color: var(--background); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:active { + background: var(--surface); + color: var(--on-surface); + border: 1px solid var(--on-surface); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:disabled { + color: var(--disabled); +} +/* Saved filters action popups */ +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup { + background: var(--surface); + color: var(--on-surface); + border-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup::after { + border-top-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup + .foot { + background: var(--surface); + border-color: var(--on-surface); +} +/* Filter visibility dropdown */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown { + --color: var(--on-surface); + + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .icon { + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown:hover { + --color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu { + border: 1px solid var(--on-surface); + border-radius: 0; + + width: fit-content; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item { + background: var(--surface); + color: var(--on-surface); + + padding: 8px 16px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item.selected { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* Saved filters save action popup */ +asset-filter.panel .filter-overviews .save-view-component .popover .popover-popup input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier { + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a { + color: var(--primary); + text-decoration: underline; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a:hover { + color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + .icon { + color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + span { + color: var(--on-surface); +} +/* Saved filters save action save button */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary { + color: var(--on-primary); + background: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:hover { + color: var(--on-primary); + background: var(--primary-muted); + border-color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:active { + color: var(--primary); + background: var(--background); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button:disabled { + color: var(--on-disabled); + background: var(--disabled); + border-color: var(--on-disabled); +} +/* Saved filters delete popup delete button */ +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive { + color: var(--on-error); + background: var(--error); + border-color: var(--error); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:active { + color: var(--error); + background: var(--on-error); + border-color: var(--error); +} +/* Saved filters delete popup cancel button */ +asset-filter.panel .filter-overviews .delete-view-component .popover .popover-popup .foot button { + color: var(--on-background); + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:active { + color: var(--on-surface); + background: var(--surface); + border-color: var(--on-surface); +} +/* Saved filters list */ +asset-filter.panel .filter-overviews li { + --color: var(--on-background); + color: var(--color); +} +asset-filter.panel .filter-overviews li .icon.edited { + color: var(--color); +} +asset-filter.panel .filter-overviews li:hover { + --color: var(--background); + background: var(--on-background); +} +asset-filter.panel .filter-overviews li.selected { + --color: var(--on-primary); + background: var(--primary); +} + +/* Filter */ +asset-filter.panel .asset-filter-item .filter-header > :is(.icon, label, .filter-title) { + color: var(--on-background); +} +/* delete button/context menu button */ +asset-filter.panel .asset-filter-item .filter-header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:hover > .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:active > .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* add filter button */ +asset-filter.panel .actions .create.tdActionButton > .icon.add { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:hover > .icon.add { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:active > .icon.add { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel .actions .create.tdActionButton > .icon.chevron { + color: var(--on-background); +} +/* filter with buttons */ +asset-filter.panel .asset-filter-item .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + transition: none !important; +} +asset-filter.panel .asset-filter-item .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .tdButton:active { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel .asset-filter-item .tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +/* filter with select */ +asset-filter.panel .asset-filter-item [role='combobox'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text { + color: var(--on-background); + opacity: initial; +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.clickable:hover { + color: var(--primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.opened::after { + color: var(--on-surface); + border-color: var(--surface); + background: var(--surface); + opacity: initial; +} +/* filter with select menu */ +asset-filter.panel .asset-filter-item [role='combobox'] .menu { + background: var(--surface); + border-color: var(--surface); + --color: var(--on-surface); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item { + color: var(--color); + padding: 4px 2px; + border-color: transparent; +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item .icon { + color: var(--color); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +/* filter on date */ +asset-filter.panel .asset-filter-item .dateField > input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background) !important; +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu { + border-color: var(--surface); +} +/* filter on date ranges */ +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges { + background: var(--surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li { + color: var(--on-surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li.active { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li:hover { + background: var(--on-surface); + color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs { + background: var(--surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Filter on date custom range calendar */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Filter on date custom range calendar table */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} +/* filter field focus */ +asset-filter.panel .asset-filter-item .filter-content > input[type='text']:focus, +asset-filter.panel .asset-filter-item [role='combobox']:focus-within, +asset-filter.panel .asset-filter-item input[type='text'].numberField:focus, +asset-filter.panel .asset-filter-item .dateField > input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Types */ +asset-filter.panel .typeFilters li { + --color: var(--on-background); +} +asset-filter.panel .typeFilters li > span { + color: var(--color); +} +asset-filter.panel .typeFilters li:hover { + background: var(--on-background); + --color: var(--background); +} + +/* Grid */ +grid .overviewFooter { + margin-top: 1rem; + background: transparent; + border: none; +} +grid .overviewFooter p { + color: var(--on-background); +} +grid .pagination { + color: var(--on-background); + margin-bottom: 1rem; +} +grid .pagination .loadMore { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +grid .pagination .loadMore:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +grid .pagination .loadMore:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +grid .pagination p { + color: var(--on-background); +} +/*Grid table*/ +grid table.tdGrid { + border: none; +} +grid table.tdGrid thead { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: transparent; + + border-bottom: 1px solid var(--on-surface); +} +grid table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +grid table.tdGrid :is(th, td) { + background: var(--bg) !important; + color: var(--color) !important; + + border-left: none !important; +} +grid table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +grid table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +grid table.tdGrid th.check, +grid table.tdGrid tbody tr td.check { + vertical-align: top; + padding-top: 10px; +} +grid table.tdGrid tbody tr td { + vertical-align: top; + padding: 8px; +} +grid table.tdGrid tbody tr td .row-element { + align-items: flex-start; +} +grid table.tdGrid tbody tr td .row-element .icon { + color: var(--color); +} +grid table.tdGrid tbody tr td .row-element .icon.interruption { + color: var(--error) !important; +} +grid table.tdGrid tbody tr td .row-element p { + margin: 0; +} +grid table.tdGrid tbody tr td .row-element .details { + color: var(--color); +} +grid table.tdGrid [data-tooltip]::after { + /* tooltip */ + background: var(--surface); + color: var(--on-surface); +} + +/* Feedback button */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / Bulk action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction p, +.tdOverlay .body .instruction .icon { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* import popup */ +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton > .icon.expanded { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton:hover > .icon.expanded { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset + .body.upload + > .accordion + > .title + > .tdActionButton:active + > .icon.expanded { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > span { + color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .content ul li { + color: var(--on-surface) !important; +} +.tdOverlay.importAsset .body.upload > .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea.drag-over { + border-color: var(--primary); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* export popup */ +.tdOverlay.exportAsset > .body > .info > .icon.spreadsheet { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body > .info > p { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body .field + .field { + margin-top: 4px; +} + +.tdOverlay.exportAsset > .body .radio.checkbox { + display: flex; + align-items: center; + + --pip: var(--background); + --border-color: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox.checked { + --pip: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox:hover { + --pip: var(--primary); + --border-color: var(--primary); +} +.tdOverlay.exportAsset > .body input[type='radio'] { + appearance: none; + border: 1px solid var(--on-background); + border-radius: 50%; + height: 14px; + aspect-ratio: 1; + background: var(--background); + + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 3px var(--pip) !important; + border-color: var(--border-color); +} +.tdOverlay.exportAsset > .body input[type='radio']:checked { + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 7px var(--pip) !important; +} + +/* + * AM is transitioning to DS components, the styles needed to make that work live here. + */ + +/* Bulk edit button */ +bulk-edit-button { + background: transparent; /* Background of the container for the button, i.e. not the button itself */ + + --bulk-edit-button-background-color: transparent; /* background */ + --bulk-edit-button-text-color: var(--on-background); /* foreground */ + --bulk-edit-button-border-color: var(--on-background); /* border */ +} + +/* + * Feedback link, Copy of DS component feedback link + */ +feedback-link { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +feedback-link:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ + + /* --ds-color-bg-insight-emphasis: var(--on-background); :active background */ +} +feedback-link:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ +} +feedback-link:focus-within { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +overview-grid { + color: var(--on-background); /* Selection count */ + + /* + * Copy of design-system/search.css + */ + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ + + /* + * Copied and adjusted to fit from design-system/datatable.css + */ + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* --ds-color-fg-primary-subtle clashes with the pagination, so I can't use --on-background here as in the normal ds-datatable */ + --ds-color-bg-primary-emphasis: var(--primary); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + /* --ds-color-border-primary-default: var(--on-background); status loading (Clashes with search :focus & :hover styling) */ + --ds-color-border-warning-default: var(--error); /* status error */ + + /* + * Slotted content + */ + --ds-color-fg-primary-default: var(--on-background); /* table row:not(:checked) icon color */ + --ds-color-fg-primary-emphasis: var(--on-background); /* table row:checked icon color */ + + --ds-color-bg-danger-mild: var(--error); /* impacted tag background */ + --ds-color-fg-danger-emphasis: var(--on-error); /* impacted tag foreground */ + + /* To make the header and footer readable in older version of ds table. */ + --ds-color-bg-subtle: var(--background); + + /* + * Copy of design-system/pagination.css + */ + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground (clashes with checkmark in table) */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ + + /* Special variable for slotted links in the table */ + --overview-link-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/card.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/settings.*") { +*, +*::after, +*::before { + box-shadow: none !important; + transition: none !important; +} +body { + background: var(--background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +h1 { + color: var(--on-background); +} +.tdTab { + padding: 0 16px; /* Aligning content with header, and other cards in topdesk */ + z-index: 0; +} +i.loading::before { + border-color: var(--on-primary) !important; +} +i.loading::after { + border-color: var(--primary) !important; +} + +/* + * Card toolbar + */ +/* Warning message */ +card-header .toolbars .toolbar .warning.message { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} +card-header .toolbars .toolbar .warning.message a { + color: var(--primary); +} +card-header .toolbars .toolbar .warning.message a:hover { + background: var(--primary); + color: var(--on-primary); +} +/* Button container */ +card-header .toolbars .toolbar .split.buttons { + border: none; /* There's a weird space between the button and the border of the container */ + min-height: unset; /* Re-adjust the height */ +} +card-header .toolbars .toolbar .split.buttons .tdButton.iconed::before { + margin-top: 2px; /* Adjust the icons to sit in the center vertically */ +} +/* Buttons */ +card-header .toolbars { + /* + * Isolating the toolbars to their own layer. + * This keeps disabled buttons visible (they have z-index:-1) in the graphical overview. + * And the z-index: 1 makes sure the menus draw on top of the card content. + */ + z-index: 1; +} +card-header .toolbars .toolbar .tdButton, +card-header .toolbars .toolbar .dropdown[data-handle='more'] { + /* More button in template designer */ + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border: 1px solid var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .tdButton:not(:first-child) { + margin-left: -1px; /* Move adjacent button borders on top of eachother */ +} +card-header .toolbars .toolbar .tdButton:hover, +card-header .toolbars .toolbar .tdButton.dropdown.active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'].active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .tdButton:active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:active { + --bg: var(--background); + --color: var(--primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton:disabled, +card-header .toolbars .toolbar .tdButton.enabled.active /* View toggle */ { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); + z-index: -1; /* Prefer the border of non-disabled buttons */ +} +card-header .toolbars .toolbar .tdButton.iconed::before { + color: var(--color); +} +card-header .toolbars .toolbar .tdButton:focus-visible, +card-header .toolbars .toolbar .dropdown[data-handle='more']:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + z-index: 1; /* The outline should be on top of adjacent buttons */ +} +/* Dropdown menu */ +card-header .toolbars .toolbar .tdButton.dropdown .menu, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu { + border: none !important; + border-radius: unset; +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item { + border: none !important; + margin-left: unset; + padding: 8px 16px; + + --bg: var(--surface); + --color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item:hover, +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item.selected, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item.selected { + --bg: var(--on-surface); + --color: var(--surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item[disabled='true'], +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item[disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} + +/* +* General Widget things +*/ +.tdWidgetContainer { + border: none; +} +/* Error indicator. This just pops up in some places */ +.state.conflict.icon { + color: var(--error) !important; +} +/* title/toolbar */ +.tdWidgetContainer .toolbar { + background: var(--surface); + border: none; +} +.tdWidgetContainer .toolbar .editable-title { + color: var(--on-background); +} +.tdWidgetContainer .toolbar .toolbarSeparator { + background: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item:hover { + color: var(--primary); +} +.tdWidgetContainer .toolbar .items button.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer .toolbar .items button.item[disabled] { + background: var(--disabled); + color: var(--on-disabled); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown > :is(.icon, label) { + color: var(--text-color); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown { + --text-color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown:hover { + --text-color: var(--primary); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active { + background: var(--on-surface); + --text-color: var(--surface); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu { + background: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item.active:hover { + /* The .active class does not seem to have a purpose, but forces a background that is equal to normal hover nonetheless */ + background: var(--on-surface) !important; + color: var(--surface) !important; +} +/* Toolbar popout area */ +.tdWidgetContainer .workareas .workarea { + background: var(--surface); + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .body > .icon { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea :is(.fieldlabels, .message, h4) { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer { + border-color: var(--on-surface); + border-bottom: none; +} +/* Toolbar popout area buttons */ +.tdWidgetContainer .workareas .workarea .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:disabled { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* Inline dropdown, like selects but somehow different */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover + .chevron { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu { + background: var(--background); + border: 1px solid var(--on-background); + border-radius: 0px; + + left: unset; + right: unset; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item { + background: var(--background); + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item:hover { + background: var(--on-background); + color: var(--background); +} +/* Checkboxes, also slightly different then in widget content for some reason */ +.tdWidgetContainer .workareas .workarea .field .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton .check { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Empty widget */ +.tdWidgetContainer:not([data-handle='relationshipWidget']) .widget > .empty :is(.icon, span) { + /* see the relationship widget for the reason of the exception here */ + color: var(--on-background); +} + +/* + * Fields + */ +/* labels */ +.field .fieldlabels { + color: var(--on-background); +} +.field .fieldlabels.error { + color: var(--error); +} +/* text field */ +.field .fields.textField :where(input, textarea) { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.textField :where(input, textarea).error { + background: var(--background); + color: var(--error); + border-color: var(--error); +} +.field .fields.textField :where(input, textarea):focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* select */ +.field .fields.suggestField .selection { + --color: var(--on-background); + + background: var(--background); + color: var(--color); + border-color: var(--on-background); +} +.field .fields.suggestField .selection.error { + --color: var(--error); + + background: var(--background); + border-color: var(--error); +} +.field .fields.suggestField .selection .chevron { + color: var(--color); +} +.field .fields.suggestField .selection input { + color: var(--color); + outline: none; +} +.field .fields.suggestField .selection .text { + color: var(--color); + opacity: revert; +} +.field .fields.suggestField .selection .text.clickable::after { + color: var(--primary); + border-color: var(--primary); + opacity: revert; +} +.field .fields.suggestField .selection:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field .fields.suggestField .selection .menu { + border-radius: 0; + border: 1px solid var(--on-background); +} +.field .fields.suggestField .selection .menu .item { + --bg: var(--background); + --color: var(--on-background); + border: none; + + background: var(--bg); + color: var(--color); + padding: 8px; +} +.field .fields.suggestField .selection .menu .item .icon { + color: var(--color) !important; +} +.field .fields.suggestField .selection .menu .item.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +.field .fields.suggestField .selection .menu .item .inactive { + --color: var(--disabled); +} +.field .fields.suggestField .selection .menu .item:hover { + --bg: var(--on-background); + --color: var(--background); +} +.field .fields.suggestField .selection .menu .item > .overflow { + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.suggestField .selection .message { + background: var(--background); + color: var(--on-background); +} +.field .fields.suggestField .selection .placeholder { + color: var(--on-background); +} +/* Checkbox */ +.field .fields.checkboxField .checkboxButton { + --color: var(--on-background); + + background: var(--background); + border-color: var(--on-background); +} +.field .fields.checkboxField .checkboxButton.disabled { + --color: var(--on-disabled); + + background: var(--disabled); + border-color: var(--on-disabled); +} +.field .fields.checkboxField .checkboxButton.checked.disabled { + --color: var(--on-background); + + background: var(--background); + border-color: var(--background); +} +.field .fields.checkboxField .checkboxButton .check { + color: var(--color); +} +.field .fields.checkboxField .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Numberfield */ +.field .fields.numberField .inputWithDecorationContainer { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field .fields.numberField .inputWithDecorationContainer.error { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.numberField input { + background: var(--bg); + color: var(--color); + border-color: var(--border); +} +.field .fields.numberField :where(.pre, .post) { + color: var(--color) !important; +} +.field .fields.numberField input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Datetimefield */ +.field .fields.dateTimeField { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field[aria-invalid='true'] .fields.dateTimeField { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.dateTimeField :where(.dateField, .timeField) { + border: 1px solid var(--border); +} +.field .fields.dateTimeField input { + background: var(--bg); + color: var(--color); + border: none; +} +.field .fields.dateTimeField .timeField { + border-left: none; +} +.field .fields.dateTimeField .timeField .icon.time { + color: var(--color); +} +.field .fields.dateTimeField input::placeholder { + color: var(--color); +} +.field .fields.dateTimeField :where(.dateField, .timeField):focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* time field layout fix, i.e. place clock icon inside field */ +.field .fields.dateTimeField .dateField { + flex: revert; + flex-grow: 1; +} +.field .fields.dateTimeField .timeField { + flex: revert; + width: 9ch; + + display: flex; + flex-direction: row-reverse; +} +.field .fields.dateTimeField .timeField input { + padding-right: 3px; +} +.field .fields.dateTimeField .timeField .handle { + background: var(--bg); + display: flex; + align-items: center; + padding-left: 3px; +} +.field .fields.dateTimeField .timeField .handle .icon.time { + margin-top: 2px; + margin-right: -2px; +} +/* date field datepicker */ +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar { + background: var(--surface); + border-color: var(--surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * General widget + */ +/* collapsed ID and specification */ +.tdWidgetContainer[data-handle='generalWidget'] section > label { + color: var(--on-background) !important; +} +/* edit button */ +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand .icon { + background: var(--bg); + color: var(--pen); + border-color: var(--circle); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand { + --bg: var(--background); + --pen: var(--on-background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:hover { + --bg: var(--on-background); + --pen: var(--background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:active { + --bg: var(--surface); + --pen: var(--on-surface); + --circle: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* status display */ +.tdWidgetContainer[data-handle='generalWidget'] .status-display :is(.text, .icon, .status.label) { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu { + border-radius: 0; + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item { + background: var(--surface); + color: var(--on-surface); + padding: 8px 4px; + border: 2px solid var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item.selected { + background: var(--background); + color: var(--primary); + border-color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); + border-color: var(--on-surface); +} +/* status switch */ +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::after { + box-shadow: inset 0 0 0 2px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='generalWidget'] + .status-switch + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-icon: var(--background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted { + --thumb-bg: var(--error); + --thumb-icon: var(--on-error); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch[disabled='true'] { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--background); + --thumb-icon: var(--on-background); + --thumb-border: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted[disabled='true'] { + --thumb-icon: var(--error); + --thumb-border: var(--error); +} +/* asset icon */ +.tdWidgetContainer[data-handle='generalWidget'] .icon.assettype { + color: var(--on-background) !important; + border-color: var(--on-background) !important; /* separator */ +} + +/* + * History widget + */ +.tdWidgetContainer[data-handle='historyWidget'] .togglebuttons { + border-color: var(--on-background); +} +/* buttons */ +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* feed */ +.tdWidgetContainer[data-handle='historyWidget'] h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .feed .label .icon { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event:not(:last-of-type) { + margin-bottom: 16px; /* Spread each record a bit for readability */ +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .act { + /* If summary spills into multiple lines, subsequent lines get a little indent */ + text-indent: -8px; + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .description { + font-weight: normal; /* allow the user to "pop" */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .summary + :is(.user, .description, .date), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + :is(.fieldname, .decorator, .value), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .icon.small, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + .value.new, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .briefDescription + > span:last-of-type, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content { + line-height: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .content { + padding-top: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > * { + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > *:first-child { + padding-left: revert; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + text-decoration: underline; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a:hover { + color: var(--primary-muted); +} +/* pagination */ +.tdWidgetContainer[data-handle='historyWidget'] + .pagination + :is(.items-summary, .items-summary__number, p) { + color: var(--on-background); +} + +/* + * Relationship widget + * + * This widget can't be styled at the moment. The asset part of the widget uses a custom element with shadow DOM that + * can not (yet) be styled with Stylus (https://github.com/openstyles/stylus/issues/739). + * + * And for some reason the custom element root itself does not take a background color, so the whole widget must be + * reset to the original background color. + * + * Styling only the services part would then make the widget become disjointed. + */ +.tdWidgetContainer[data-handle='relationshipWidget'] .relationship.widget { + background: white; +} + +/* + * Assignment widget + */ +.tdWidgetContainer[data-handle='assignmentWidget'] h4 { + color: var(--on-background); +} +/* items */ +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* + * Dataset widget + */ +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead th { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td { + color: var(--color); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton .check { + color: var(--on-background); +} + +/* + * Documents widget + */ +/* File drop area */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea.drag-over { + color: var(--primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Files to upload */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item { + border-bottom: none; +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item > :is(.icon, .content) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* File upload progress */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress { + background: var(--background); + border: 1px solid var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress .bar { + background: repeating-linear-gradient( + -45deg, + var(--primary) 0px, + var(--primary) 16px, + var(--primary-muted) 16px, + var(--primary-muted) 32px + ); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress.error .bar { + background: var(--error) !important; +} +/* document list */ +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* +* Relationship grid widget +*/ +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode { + margin: 0; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header { + padding: 12px 16px; + background: var(--surface); + margin: 0; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header :is(.icon, h4) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid { + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead th { + padding: 12px 16px; + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody td { + padding: 6px 16px; + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .row-element + :is(.icon, .details) { + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton + .check { + color: var(--on-background); +} + +/* +* Reservations widget +*/ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .column + .column { + border-color: var(--on-background); +} +/* switch label */ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .row span { + color: var(--on-background); +} +/* switch control */ +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::after { + box-shadow: inset 0 0 0 1px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(12px); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle.disabled { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--disabled); + --thumb-border: var(--on-disabled); +} + +/* + * Graphical overview + */ +body .card.takeoverMode { + background: var(--background); +} +body .card.takeoverMode card-header { + background: none; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle { + stroke: unset; + fill: unset; +} +body .card.takeoverMode .graphicalOverview .nodes .node, +body .card.takeoverMode .graphicalOverview .nodes .node .action { + --bg: var(--background); + --icon: var(--on-background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:hover, +body .card.takeoverMode .graphicalOverview .nodes .node .action:hover { + --bg: var(--on-background); + --icon: var(--background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:active, +body .card.takeoverMode .graphicalOverview .nodes .node .action:active { + --bg: var(--surface); + --icon: var(--on-surface); + --border: var(--on-surface); +} +/* Node */ +body .card.takeoverMode .graphicalOverview .nodes .node circle.invisible { + fill: var(--bg); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.highlight { + fill: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.nodeborder { + fill: var(--bg); + stroke: var(--border); + stroke-width: 1px; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.selectable { + stroke: var(--primary); + stroke-width: 3px; +} +body + .card.takeoverMode + .graphicalOverview + .nodes + .node + circle.selectable:not([r='0']) + ~ circle.nodeborder { + --border: var(--background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.red { + stroke: var(--error); /* impacted node */ + fill: var(--bg); +} +/* Node action */ +body .card.takeoverMode .graphicalOverview .nodes .node .action circle { + fill: var(--bg); + stroke: var(--border); +} +/* icon */ +body .card.takeoverMode .graphicalOverview .nodes .node use { + fill: var(--icon); +} +/* Node label */ +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel rect { + fill: var(--surface); +} +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel text { + fill: var(--on-surface); +} +/* Edges */ +body .card.takeoverMode .graphicalOverview .edges path { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .paths text { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .arrowLabels textPath { + fill: var(--on-background); +} + +/* + * Graphical overview sidebar + */ +body .card.takeoverMode .cardPreview .header { + background: var(--surface); + border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header :is(.previewTitle, .previewSubTitle) { + color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close .icon { + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +body .card.mini .fieldset.widget .field .fieldlabels { + color: var(--on-background); +} + +/* + * Feedback button + */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction :is(p, .icon, h4) { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .instruction, +.tdOverlay.confirmArchive .fieldlabels { + color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/*************** + * DESIGN MODE * + ***************/ + +card-header .editable-title { + color: var(--on-background); +} + +/* + * card/widget title edit + */ +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input { + background: var(--background) !important; + color: var(--on-background) !important; + border-color: var(--on-background) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Drag handles + */ +.dragHandle .icon { + color: var(--color) !important; +} +.dragHandle:hover { + --color: var(--primary) !important; +} +/* Field drag handle */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .dragHandle { + --color: var(--on-background); +} + +/* Dragging widget background */ +.tdWidgetContainer.being-dragged.drag-element { + background: var(--background); +} +/* Dragging field background */ +.field.being-dragged { + background: var(--background); + border: 1px solid var(--primary); +} +/* Widget drop target */ +.drop-zone.drag-over::before { + border-color: var(--primary) !important; + background: var(--background) !important; +} +.drop-zone.drag-over::after { + background: var(--primary) !important; +} + +/* + * Toolbar + */ +/* Toolbar drag handle */ +.tdWidgetContainer .toolbar.designmode .dragHandle { + --color: var(--on-surface); +} +/* delete button */ +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] { + --color: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +/* Extra actions */ +.tdWidgetContainer .toolbar.designmode .dropdown.item { + --color: var(--on-surface); + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item.active { + --color: var(--surface); + background: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item { + background: var(--surface); + color: var(--on-surface); + + padding: 6px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item.disabled { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Layout toggle button + */ +card-header .toolbars .toolbar .split.buttons .tdButton.toggle.active { + /* Design mode layout toggle */ + background: var(--disabled) !important; + color: var(--on-disabled) !important; + border-color: var(--on-disabled) !important; + z-index: -1; /* Prefer the border of non-disabled buttons */ +} + +/* + * Mandatory toggle on fields + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + border-color: var(--border-color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory.active { + --bg: var(--background); + --color: var(--error); + --border-color: var(--error); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory::before { + color: var(--color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] + .fieldset.widget + .field + .toggle.mandatory:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Field selection + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field { + border: 1px solid transparent; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field.selectedForEditing { + background: var(--background); + border: 1px solid var(--primary); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:hover { + background: var(--background); + border: 1px solid var(--on-background); +} + +/* + * Grid widget + */ +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget .field.draggable { + --color: var(--on-surface); /* takes care of the drag-handle color as well */ + background: var(--surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable.drop-zone.drag-over { + box-shadow: -2px 0 0 var(--primary) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget .field label { + color: var(--color); +} + +/* + * Workarea + */ +/* Suggest field items */ +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon::before { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon:hover::before { + color: var(--primary); +} +/* Field id description */ +.tdWidgetContainer .workareas .workarea .fieldID .fields span:is(.label, .value) { + color: var(--on-surface); +} +/* Add/create field switch */ +.tdWidgetContainer .workareas .workarea .addcreate-switch > label { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch > label.active { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label { + background: var(--on-background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::before { + background: var(--background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::after { + background: var(--on-background) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer + .workareas + .workarea + .addcreate-switch + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +/* Inline field drop down field type icons */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text > .icon, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item > .icon { + color: var(--color); +} + +/* + * General widget + */ +/* General widget numbering example */ +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .autonumberExample + :is(.title, .example) { + color: var(--on-surface); +} +/* Change icon grid */ +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body p { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list { + background: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item { + --color: var(--on-surface); + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:focus { + outline: 2px solid var(--color); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .body + .list + .item + > :is(.content, .icon) { + color: var(--color) !important; +} + +/* + * Web widget + */ +/* Web widget insert url part dropdown */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton { + --icon-bg: var(--background); + --icon-fg: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-fg: var(--background); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:active { + --icon-bg: var(--surface); + --icon-fg: var(--on-surface); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + > .add.icon { + background: var(--icon-bg); + color: var(--icon-fg); + border-color: var(--icon-border); +} +/* Web widget insert url part dropdown menu*/ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu::after { + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + .search.icon, +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input::placeholder { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item { + background: var(--surface); + --color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item + :is(.icon, span) { + color: var(--color); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +/* Web widget warning message */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .status { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .icon { + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * Add widget buttons + */ +/* Add widget button */ +add-widget-dropdown .tdActionButton.inlineDropdown .button { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button .displayText { + color: var(--color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown.active .button { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +/* Add widget menu */ +add-widget-dropdown .tdActionButton.inlineDropdown .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu::after { + border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu { + margin-top: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu::after { + top: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu { + margin-bottom: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu::after { + bottom: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter .search.icon, +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input::placeholder { + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .header { + background: var(--background); + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item { + background: var(--surface); + color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item:hover { + background: var(--on-surface); + color: var(--surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item.selected { + background: var(--primary); + color: var(--on-primary); +} + +/********************* + * Template designer * + *********************/ +/* + * Sidebar + */ +settings-sidebar.panel { + background: var(--surface); + border-right: none; + border-left: 1px solid var(--on-surface); + padding: 0px 16px; +} +/* Header */ +settings-sidebar.panel .header span { + color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* Tabs */ +settings-sidebar.panel .tabs ul { + border-color: var(--on-surface) !important; +} +settings-sidebar.panel .tabs li { + --clr: var(--on-surface); + + border-color: var(--clr) !important; +} +settings-sidebar.panel .tabs a { + color: var(--clr) !important; +} +settings-sidebar.panel .tabs li.is-active { + --clr: var(--primary); +} +/* Actions footer */ +settings-sidebar.panel .actions.bordered { + border-color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton { + color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton:hover { + color: var(--primary); +} +/* Template list/ Field list / Link type list*/ +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li { + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; + + padding: 8px 16px; +} +settings-sidebar.panel .field-overview ul.selectable li .icon { + color: var(--color); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:hover { + --bg: var(--on-surface); + --color: var(--surface); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:focus-visible { + outline: 2px solid currentColor; + outline-offset: -4px; +} +settings-sidebar.panel .field-overview ul.selectable li .field-item.being-dragged { + background: var(--background); + color: var(--on-background); + outline-color: var(--primary); + + --color: var(--on-background); +} +/* Field search */ +settings-sidebar.panel .field-overview .search-bar input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + padding: 16px 8px; +} +settings-sidebar.panel .field-overview .search-bar .icon { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +settings-sidebar.panel .field-overview p.no-results { + color: var(--on-surface); +} +/* Create new template/ new link type */ +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton, +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} + +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton { + --icon-bg: var(--background); + --icon-color: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-color: var(--background); + --icon-border: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:active { + --icon-bg: var(--surface); + --icon-color: var(--on-surface); + --icon-border: var(--on-surface); + + color: var(--primary); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton > .icon { + background: var(--icon-bg); + color: var(--icon-color); + border-color: var(--icon-border); +} +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +/* + * Template designer placeholder + */ +.placeholderGfx .placeholder-stage { + background: none; +} +.placeholderGfx p { + color: var(--on-background); + font-style: normal; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} +.page-header { + --ds-color-bg-primary-default: var(--background); +} + +/* + * Asset list + */ +.asset-list { + --ds-color-fg-muted: var(--on-background); +} +.asset-list .ds-icon { + color: var(--on-background); +} +.asset-list a { + color: var(--primary); + text-decoration: underline; +} + +} +@-moz-document regexp("http(s)?://.*/services/active-user-overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +.active-user-overview .left.column strong { + color: var(--on-background); +} + +.active-user-overview .ds-icon.licensed-color { + color: var(--on-background); +} +.active-user-overview .ds-icon.online-color { + color: var(--primary); +} +.active-user-overview .ds-icon.offline-color { + border: 1px solid var(--on-background); + border-radius: 50%; + color: var(--background); /* icon background */ + background-color: var(--on-background); /* icon cross */ +} + +} +@-moz-document regexp("http(s)?://.*/services/user-group-linking-ui/.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); + + --ds-color-fg-primary-default: var(--on-background); /* links */ + --ds-color-fg-primary-emphasis: var(--on-background); /* empty group bullets */ + + --ds-color-bg-primary-mid: transparent; /* link:focus background */ + --ds-color-fg-primary-subtle: var(--on-background); /* link:focus color */ +} + +.overview__ki-list .title:focus-visible { + /* link outline is unfortunately removed entirely, have to reinstate */ + outline: 2px solid var(--on-background); + outline-offset: 4px; + border-radius: 4px; +} + +/* + * Expand/collapse group buttons (The primary styling does not work well here) + */ +.overview__ki-list .ds-button[variant='primary'] { + background-color: transparent; + color: var(--on-background); + border-color: transparent; +} + +.overview__ki-list .ds-button[variant='primary']:hover { + color: var(--on-primary); +} + +.overview__ki-list .ds-button[variant='primary']:active { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*"), regexp("http(s)?://.*/services/active-user-overview.*"), regexp("http(s)?://.*/services/user-group-linking-ui/.*"), regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +/* + * DS-Feedback-Link + * + * There are two versions: + * - .ds-feedback-link is fixed on the right side and expands on hover. + * - .ds-button[variant='insight'] is a button alternative for where the link does not work. + */ +.ds-feedback-link, +.ds-button[variant='insight'] { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +.ds-feedback-link:hover, +.ds-button[variant='insight']:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ +} +.ds-feedback-link:active, +.ds-button[variant='insight']:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ + --ds-color-border-insight-emphasis: var(--on-background); /* :active border (overridden by :focus for link variant) */ +} +.ds-feedback-link:focus-within, +.ds-button[variant='insight']:focus-visible { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +/* + * DS-Button (primary variant) + */ +.ds-button[variant='primary'] { + background-color: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ds-button[variant='primary']:hover { + box-shadow: none; + + background-color: var(--primary-muted); +} +.ds-button[variant='primary']:focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button[variant='primary']:active { + background-color: var(--background); + color: var(--primary); + border-color: var(--primary); + --outline-color: var(--primary); +} + +/* + * DS-Button (basic variant) + */ +.ds-button:not([variant]) { + background-color: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.ds-button:not([variant]):hover { + box-shadow: none; + background-color: var(--on-background); + color: var(--background); +} +.ds-button:not([variant]):focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button:not([variant]):active { + background-color: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * DS-Button (disabled) + */ +.ds-button[aria-disabled='true'] { + /* Undoing the evil 'opacity trick' */ + filter: none; + opacity: unset; + + background-color: var(--disabled); + color: var(--on-disabled); + border-color: var(--on-disabled); +} + +/* + * DS-Panel + */ +.ds-panel { + --ds-color-bg-subtle: var(--surface); /* header background */ + --ds-color-bg-default: var(--surface); /* content background */ + + color: var(--on-surface); + + --text-color: var(--on-surface); + --outline-color: var(--on-surface); + + /* header-content divider border color, has the same variable as the panel border color itself */ + border: none; + --ds-color-border-muted: var(--on-surface); +} + +/* + * DS-Select-Rich and DS-Combobox + */ +.ds-select-rich, +.ds-combobox { + --ds-color-field-label-fg: var(--text-color, var(--on-background)); /* label + helptext color */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-border: var(--on-background); /* field border */ + --ds-color-field-icon-fg: var(--on-background); /* chevron color */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + + /* focus colors */ + --ds-color-field-outline-inner: transparent; /* box-shadow color */ + --ds-color-field-outline-outer: var(--outline-color); /* border and outline */ + + /* dropdown colors */ + --ds-color-bg-default: var(--background); /* popup background */ + --ds-color-fg-default: var(--on-background); /* popup foreground */ + --ds-color-border-default: var(--on-background); /* popup border */ + + --ds-color-bg-primary-default: transparent; /* option:hover background */ + --ds-color-bg-primary-soft: transparent; /* option:checked background */ + --ds-color-border-primary-emphasis: var(--on-background); /* option:hover border */ + --ds-color-fg-primary-emphasis: var(--on-background); /* option:checked checkmark color */ +} + +.ds-select-rich:hover, +.ds-combobox:hover { + --ds-color-field-outline-outer: var(--primary); + --ds-color-field-icon-fg: var(--primary); + --ds-color-field-border: var(--primary); +} + +/* Error case */ +.ds-select-rich lion-select-invoker[aria-invalid='true'], +.ds-combobox[shows-feedback-for='error'] { + --ds-color-field-border: var(--error); + --ds-color-field-icon-fg: var(--error); + --ds-color-field-outline-inner: transparent; + --ds-color-field-outline-outer: var(--error); /* on focus */ +} +.ds-select-rich[shows-feedback-for='error'] lion-validation-feedback, +.ds-combobox[shows-feedback-for='error'] lion-validation-feedback { + --ds-color-field-fg: var(--error); + --ds-color-field-icon-fg: var(--error); +} +.ds-select-rich lion-select-invoker[aria-invalid='true'] { + --ds-color-field-fg: var(--error); + --ds-color-field-bg: var(--background); +} +.ds-combobox[shows-feedback-for='error']:hover, +.ds-select-rich:hover lion-select-invoker[aria-invalid='true'] { + --ds-color-field-outline-inner: var(--error); +} + +/* + * DS-Switch + */ +.ds-switch { + --ds-color-bg-primary-mid: var(--on-background); /* :checked track border */ + --ds-color-bg-primary-emphasis: var(--background); /* :checked track background */ + --ds-color-bg-primary-default: var(--on-background); /* :checked thumb background */ + --ds-color-fg-primary-default: var(--background); /* :checked thumb icon */ + + --ds-color-bg-muted: var(--background); /* :not(:checked) track background */ + --ds-color-bg-default: var(--on-background); /* :not(:checked) thumb background */ + --ds-color-fg-muted: var(--background); /* :not(:checked) thumb icon */ + + --ds-color-border-primary-emphasis: var(--on-background); /* :hover track border */ + + box-shadow: none; +} +.ds-switch lion-switch-button[aria-checked='false'] { + /* + * Border color in unchecked state uses same variable as the track background `--ds-color-bg-muted`. + * So to be able to differentiate the border from the background we need to override the border-color property on the track itself. + */ + border-color: var(--on-background); +} +.ds-switch lion-switch-button:hover { + box-shadow: 0 0 0 4px var(--on-background); +} +.ds-switch lion-switch-button:focus-visible { + box-shadow: none; + outline-color: var(--on-background); +} +.ds-switch label { + /* + * The label color uses the same variable as the unchecked thumb icon `--ds-color-fg-muted`. + * But the label needs to contrast with the background, and the thumb icon with the thumb background. + * Therefore we need to override the color of the label explicitly here. + */ + color: var(--text-color, var(--on-background)); +} + +.ds-data-table { + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* + * The DS adds color to the checkbox when it is checked, but this feels too "busy" in this context. + * Unfortunately there is no other way to indicate selected status, but neither has the old grid so it is not too bad. + * + * A bar on the left side would be nice, and that could be achieved with a linear-gradient except that the color is + * applied to `background-color` (and not `background`) which only allows solid colors. + */ + --ds-color-bg-primary-emphasis: var(--background); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-background); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + --ds-color-border-primary-default: var(--primary); /* status loading */ + --ds-color-border-warning-default: var(--error); /* status error */ +} + +/* + * links are commonly slotted into the datatable, their design/implementation is not fully consistent + */ +.ds-data-table > a { + color: var(--primary); + text-decoration: underline; +} +.ds-data-table > a:hover { + text-decoration-color: var(--primary); +} +.ds-data-table > a:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + border-radius: 4px; + + text-decoration-color: var(--primary); + box-shadow: none; + background-color: unset; +} + +.ds-pagination { + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + /* background-color is set to transparent in the component so can't be changed. (only in default state) */ + /* border-color is set to transparent in the component, so can't be changed. (all states except :hover and :focus) */ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ +} + +.ds-search-form { + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ +} + +.ds-modal-content { + --outline-color: var(--on-surface); + --text-color: var(--on-surface); + + --ds-color-bg-default: var(--surface); /* Modal background */ + --ds-color-fg-default: var(--text-color); /* Modal foreground */ + + --ds-color-fg-muted: var(--on-surface); /* Close button */ + --ds-color-bg-primary-soft: transparent; /* Close button:hover & :focus box-shadow */ + --ds-color-border-primary-emphasis: var(--on-surface); /* Close button:hover & :focus border & outline */ +} + +} \ No newline at end of file diff --git a/docs/themes/topdesk-operator-recoloring.soft_green.user.css b/docs/themes/topdesk-operator-recoloring.soft_green.user.css new file mode 100644 index 0000000..6df9902 --- /dev/null +++ b/docs/themes/topdesk-operator-recoloring.soft_green.user.css @@ -0,0 +1,9461 @@ + +/* ==UserStyle== +@name Soft Green (TOPdesk Operator Recoloring) +@namespace github.com/topdesk/topdesk-operator-recoloring +@version 3.0.0 +@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 +@updateURL https://topdesk.github.io/operator-recoloring/themes/topdesk-operator-recoloring.soft_green.user.css +@license MIT +@preprocessor default + +@var color background "Background" #f2efef +@var text background-filter "Background filter" brightness(0) saturate(100%) invert(76%) sepia(92%) saturate(4%) hue-rotate(314deg) brightness(102%) contrast(103%) +@var color on-background "On background" #1a1919 +@var text on-background-filter "On background filter" brightness(0) saturate(100%) invert(4%) sepia(4%) saturate(831%) hue-rotate(314deg) brightness(103%) contrast(87%) +@var color selection "Selection" rgba(3, 94, 6, 0.99) +@var color on-selection "On selection" #ffffff +@var color surface "Surface" #776363 +@var text surface-filter "Surface filter" brightness(0) saturate(100%) invert(37%) sepia(3%) saturate(1865%) hue-rotate(311deg) brightness(103%) contrast(85%) +@var color on-surface "On surface" #fcfcfc +@var text on-surface-filter "On surface filter" brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(352deg) brightness(105%) contrast(98%) +@var color disabled "Disabled" #404040 +@var text disabled-filter "Disabled filter" brightness(0) saturate(100%) invert(22%) sepia(0%) saturate(0%) hue-rotate(188deg) brightness(91%) contrast(83%) +@var color on-disabled "On disabled" #8c8c8c +@var text on-disabled-filter "On disabled filter" brightness(0) saturate(100%) invert(64%) sepia(0%) saturate(1%) hue-rotate(149deg) brightness(88%) contrast(80%) +@var color primary "Primary" #1bc122 +@var text primary-filter "Primary filter" brightness(0) saturate(100%) invert(50%) sepia(86%) saturate(2526%) hue-rotate(87deg) brightness(109%) contrast(83%) +@var color primary-muted "Primary muted" #359d3d +@var text primary-muted-filter "Primary muted filter" brightness(0) saturate(100%) invert(46%) sepia(11%) saturate(3148%) hue-rotate(74deg) brightness(106%) contrast(78%) +@var color on-primary "On primary" #ffffff +@var text on-primary-filter "On primary filter" brightness(0) saturate(100%) invert(96%) sepia(96%) saturate(0%) hue-rotate(92deg) brightness(106%) contrast(105%) +@var color error "Error" #ff0000 +@var text error-filter "Error filter" brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(6925%) hue-rotate(359deg) brightness(108%) contrast(115%) +@var color on-error "On error" #0c0c0c +@var text on-error-filter "On error filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(7009%) hue-rotate(350deg) brightness(103%) contrast(91%) +==/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); +} + +.remembercheckbox input[type='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} + +.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); +} + +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); + 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); + + --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); + + --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-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[mtype='button'][guielement='preferred_button']:active, +[mtype='button'][mstyles~='default-button']:active, +[guielement='toolbar_button'][mstyles~='blue']:active, +[guielement='toolbar_button'][mstyles~='orange']:active, +body.popup .divpopupcontainer .divpopupclientarea button.primary:active, +.suggestionsWidget .suggestionsWidget-searchButton:active, +div#checklist .button.is-primary:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +/* Disabled button */ +[mtype='button'][disabled='true'], +[mtype='button'][disabled='true']:hover, +[guielement='toolbar_button'][disabled='true'], +[guielement='toolbar_button'][disabled='true']:hover, +div#checklist .button[disabled], +div#checklist .button[disabled]:hover { + background: var(--disabled); + border-color: var(--on-disabled); + + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); + + pointer-events: none; +} + +/* Tab bar */ +[mstyles~='header_bar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[mstyles~='header_bar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* Quicklaunch buttons */ +div[mtype='group'][mstyles~='ql-button'] { + background: transparent; + --filter: var(--on-surface-filter); + outline-offset: -2px !important; +} +div[mtype='group'][mstyles~='ql-button'] > input, +div[mtype='group'][mstyles~='ql-button'] > input + div[mtype='label'] { + filter: var(--filter); + background: transparent !important; +} + +div[mtype='group'][mstyles~='ql-button']:hover, +div[mtype='group'][mstyles~='ql-button']:focus { + --filter: var(--primary-filter); +} + +div[mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +/* topdesk menu button */ +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:hover, +div[handle='topdesk_menu'][mstyles~='ql-button']:focus { + background: var(--primary-muted); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:hover > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:focus > input { + /* These are non-transparent action buttons */ + filter: none; +} + +button#notifications-icon { + /* iframe is too tiny to show the normal outline */ + outline-offset: -2px !important; +} + +button#notifications-icon::before { + content: ''; + background: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + filter: var(--on-surface-filter); +} +button#notifications-icon:hover::before { + filter: var(--primary-filter); +} + +span#unread-notification-count { + background: var(--primary); + color: var(--on-primary); + border: 1px solid var(--surface); +} + +/* Buttons with a background image */ +.suggestionsWidget .suggestionsWidget-searchButton, +.suggestionsWidget .suggestionsWidget-toggleButton, +.suggestionsWidget .suggestionsWidget-newKIButton, +.suggestionsWidget .help-button { + position: relative; +} +.suggestionsWidget .suggestionsWidget-searchButton:before, +.suggestionsWidget .suggestionsWidget-toggleButton:before, +.suggestionsWidget .suggestionsWidget-newKIButton:before, +.suggestionsWidget .help-button:before { + content: ''; + position: absolute; + filter: var(--filter); + top: 7px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* Knowledge base popup search button */ +.suggestionsWidget .suggestionsWidget-searchButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M15.9 14.2L12 10.3c.6-.9 1-2.1 1-3.3 0-3.3-2.7-6-6-6S1 3.7 1 7s2.7 6 6 6c1.2 0 2.3-.4 3.2-.9l3.9 3.9 1.8-1.8zM3 7c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* Knowledge base popup toggle button */ +.suggestionsWidget .suggestionsWidget-toggleButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M10.5 11.5L6.9 8l3.6-3.5 1 1L9.1 8l2.4 2.5z'/%3E%3Cpath d='M6.5 11.5L2.9 8l3.6-3.5 1 1L5.1 8l2.4 2.5z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* Knowledge base popup create item button */ +.suggestionsWidget .suggestionsWidget-newKIButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M2.5 13H13v1H2.5z'/%3E%3Cpath d='M15 4h-2V1c0-.6-.4-1-1-1H3C1.3 0 0 1.3 0 3v10c0 1.7 1.3 3 3 3h10v-1H2.5c-.8 0-1.5-.7-1.5-1.5S1.7 12 2.5 12H12c.6 0 1-.4 1-1V8h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1zm0 3h-3v3h-2V7H7V5h3V2h2v3h3v2z'/%3E%3C/svg%3E"); + left: 8px; +} + +/* Knowledge base popup help button */ +.suggestionsWidget .help-button:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M4.8 5.5c0-.4.1-.8.4-1.2.3-.4.6-.8 1.1-1 .5-.3 1.1-.4 1.8-.4.6 0 1.2.1 1.6.3.5.2.8.5 1.1.9.2.4.4.9.4 1.3s-.1.7-.2.9c-.1.3-.3.5-.5.7s-.6.5-1.1 1l-.4.4c-.1.1-.1.2-.2.3 0 .1-.1.2-.1.2 0 .1-.1.2-.1.4-.1.5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.1-.2-.2-.4-.2-.7 0-.4.1-.7.2-.9.1-.2.2-.5.4-.7l.7-.7c.3-.2.5-.4.6-.5s.2-.3.3-.4.1-.3.1-.5c0-.3-.1-.6-.4-.9-.3-.2-.6-.3-1-.3-.5 0-.8.1-1 .4-.2.2-.4.6-.6 1 0 .5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.2-.2-.3-.4-.3-.6zM8 12.9c-.3 0-.5-.1-.7-.2-.2-.2-.3-.4-.3-.7s.1-.5.3-.7c.2-.2.4-.3.7-.3s.5.1.7.3.3.4.3.7-.1.5-.3.7-.4.2-.7.2z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* + * General styles + */ +html, +body { + background: transparent; +} + +/* Generic focus style */ +*:focus { + z-index: 1000 !important; + outline: 2px solid var(--on-background) !important; + outline-offset: 2px !important; +} + +/* focus fix for combobox dropdown */ +input[type='text'][mtype='combobox']:focus { + z-index: 0 !important; +} + +/* Tab bar and Quicklaunch */ +[mstyles~='header_bar'], +[handle='quicklaunch_bar_settings_area'], +[handle='quicklaunch_bar_buttons_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Page */ +[guielement='toplevelwindow'], +[mstyles='left_side'] { + background: var(--background); + --text-color: var(--on-background); +} + +body > div[guielement='toplevelwindow'] > div[style*='background-color'] { + /* Sent emails set background in their style attribute */ + background: transparent !important; +} + +/* Text */ +[mtype='label'], +[mtype='rtlabel'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--text-color); +} +[mtype='label'][mstyles~='error'], +[mtype='rtlabel'][mstyles~='error'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--error); +} + +::selection { + background: var(--selection); + color: var(--on-selection); +} + +/* Link */ +a, +[guielement='hyperlink'], +[mtype='label'][mstyles~='link_label'] { + color: var(--primary); +} +a:hover, +[guielement='hyperlink']:hover, +[mtype='label'][mstyles~='link_label']:hover { + color: var(--primary-muted); +} + +/* Tooltip */ +#infoboxdiv { + background: var(--surface); + color: var(--on-surface); +} +/* Bubble tooltips */ +[guielement='infobubble-bubble'] { + background: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='south'] { + border-top-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='east'] { + border-left-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='west'] { + border-right-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='north'] { + border-bottom-color: var(--surface); +} +[guielement='infobubble-bubble'] [mstyles~='infobubble-message'] { + color: var(--on-surface); +} + +/* Popup */ +[guielement='subwindow'] > img:only-child { + /* The pointer triangle used in some popups */ + filter: var(--on-background-filter); +} + +[guielement='popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='popup-header'] { + border-color: var(--on-surface); +} +[guielement='popup-body'] [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] { + background: transparent; + color: var(--text-color); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label'][mstyles~='selected'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='popup-footer'] { + background: var(--surface); + border-color: var(--on-surface); +} +/* HTML style popup */ +body.popup .divpopupcontainer { + background: var(--surface); + color: var(--on-surface); + --text-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader { + border-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader .divpopuptitle { + color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupclientarea { + background: transparent; +} +body.popup .divpopupcontainer .divpopupclientarea .buttons, +body.popup .divpopupcontainer .divpopupclientarea .grid-settings-popup-buttons { + background: transparent; + border-color: var(--on-surface); +} + +/* stamp popup */ +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup']:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button.disabledButton { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Datepicker + */ +[guielement='calendar-grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='calendar-grid'] [guielement='calendar-cell'] [guielement='calendar-cell-label'] { + color: var(--text-color); +} +/* non-working day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-non-working-day'] { + background: var(--surface); + --text-color: var(--on-surface); +} +/* Special style for 'today' to aid orientation */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-today'] { + --text-color: var(--primary); + border-color: transparent; +} +/* currently selected cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +/* 'focused' cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-highlighted'] { + border-color: var(--primary); +} +[guielement='calendar-grid'] + [guielement='calendar-cell'][mstyles~='cal-selected'][mstyles~='cal-highlighted'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + border-color: var(--on-primary); +} +/* 'go to today' button */ +[guielement='datepicker-today'] { + background: transparent; + color: var(--primary); +} +[guielement='datepicker-today']:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Loading screen */ +[guielement='toplevelwindow'] > [mstyles~='content_area'] { + background-color: var(--background); +} + +body[style*='background-color: #ffffff'] { + background-color: var(--background) !important; +} + +#busy_message_area { + background-color: var(--surface); + padding: 36px; +} +#busy_message_area > #busy_message_image { + display: none !important; +} +#busy_message_area > #busymessage { + color: var(--on-surface); +} + +#busy_message_area::before { + content: ''; + display: block; + width: 60px; + height: 60px; + margin: 0 auto 12px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 58%, + var(--on-surface) 60% + ); + + animation-name: pulse; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: 0.2s; +} + +#busy_message_area::after { + content: ''; + display: block; + width: 46px; + height: 46px; + margin: -80px auto 24px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 55%, + var(--on-surface) 57% + ); + + animation-name: pulse; + animation-duration: 2.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: -1.5s; +} + +@keyframes pulse { + from { + opacity: 1; + } + to { + opacity: 0.2; + } +} + +@media (prefers-reduced-motion: no-preference) { + #busy_message_area::before { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 58%, + transparent 60% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-large; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: 0s; + } + + #busy_message_area::after { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 55%, + transparent 57% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-small; + animation-duration: 3.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: -0.5s; + } + + @keyframes spin-large { + from { + rotate: 0deg; + } + to { + rotate: 720deg; + } + } + + @keyframes spin-small { + from { + rotate: 0deg; + } + to { + rotate: 1440deg; + } + } +} + +/* + * Tab + */ + +/* Default */ +[guielement='window_tab'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='window_tab'] [guielement='icon'], +[guielement='window_tab'] [guielement='icon-button'] { + filter: var(--filter); +} +/* Status icon (dual color, can't be recolored) */ +[guielement='window_tab'] [guielement='icon']:nth-of-type(2) { + filter: none; +} + +/* Current */ +[guielement='window_tab'][mstyles~='active'] { + background: var(--background); + border-bottom-color: var(--background); + border-top: 3px solid var(--primary); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +/* +* Card tab +*/ + +/* Current */ +[role='tablist'] [role='tab'][aria-selected='true'], +[role='tablist'] [role='tab'][aria-selected='true'] * { + border-bottom-color: var(--primary); + color: var(--primary); +} + +/* HTML style tabs */ +.subtabscontainer .subtabcaptions .tabcaption { + border-color: var(--text-color) !important; +} +.subtabscontainer .subtabcaptions .tabcaption a { + color: var(--text-color); +} +.subtabscontainer .subtabcaptions .tabcaption.active { + --text-color: var(--primary); +} + +/* + * Menu + */ +[guielement='topdesk-menu'], +[guielement='topdesk-submenu'], +[guielement='toolbar_menu'], +div#checklist div.menu { + background: var(--surface); +} +[guielement='topdesk-submenu'] { + border-left-color: var(--on-surface); +} + +/* Default */ +[guielement='topdesk-menu-item'], +[guielement='toolbar_menu_button'], +div#checklist div.menu [role='button'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='topdesk-menu-item'] *, +[guielement='toolbar_menu_button'] * { + background: transparent; +} +[guielement='topdesk-menu-item'] [guielement='topdesk-menu-icon'], +[guielement='toolbar_menu_button'] [mtype='imagebutton'] { + filter: var(--filter); +} + +div#checklist div.menu [role='button'] { + color: var(--text-color); +} + +/* Hover */ +[guielement='topdesk-menu-item']:hover, +[guielement='toolbar_menu_button']:hover, +div#checklist div.menu [role='button']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Focus */ +[guielement='topdesk-menu-item']:focus, +[guielement='toolbar_menu_button']:focus, +div#checklist div.menu [role='button']:focus { + outline: none !important; + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Disabled */ +[guielement='topdesk-menu-item'][disabled='true'], +[guielement='toolbar_menu_button'][disabled='true'], +div#checklist div.menu [role='button'][aria-disabled='true'] { + background: var(--disabled); + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} + +/* Separators */ +[guielement='topdesk-menu-separator'], +[guielement='toolbar_menu_group'], +div#checklist div.menu li .separator { + border-color: var(--on-surface); +} + +/* Selected item */ +[guielement='topdesk-menu-item'][mstyles~='topdesk-menu-item-active'] { + border-left-color: var(--primary); +} + +/* Suppressing focus style on menu after click on Menu button */ +[guielement='toolbar_menu'] > [mtype='group']:focus { + outline: none !important; +} + +/* + * Action / Request + */ + +/* + * Request + */ +[guielement='pt-request-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-request-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-request-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged request entries */ +[guielement='pt-request-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-request-container'] [mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +/* Collapsed flagged entry fade-out */ +[guielement='pt-request-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--primary)) !important; +} + +/* Links */ +[guielement="pt-request-container"] div[rt] a, +[guielement="pt-request-container"] a /* Support for versions before october 2020 */ { + color: var(--primary); +} + +/* Speech bubble tail */ +[guielement='pt-request-pointer'] { + border-right-color: var(--surface); +} + +/* Expand/Collapse buttons */ +[guielement='pt-request-container'] [guielement='crt-button-expand'], +[guielement='pt-request-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* +* Action +*/ +[guielement='pt-trail-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-trail'], +[guielement='pt-trail-container'] [guielement='pt-mail'], +[guielement='pt-trail-container'] [guielement='pt-attachment'], +[guielement='pt-trail-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-trail-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged action entries */ +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +[guielement="pt-trail-container"] div[rt] a, +[guielement="pt-trail-container"] a, /* Support for versions before october 2020 */ +[guielement="pt-trail-container"] [guielement="pt-linkbutton"] { + color: var(--primary); +} + +/* Collapsed flagged entry fade-out */ +[guielement='pt-trail-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, #eda911) !important; +} + +/* Action entry filter button */ +[mtype='button'][guielement='pt-channel-button'] { + color: var(--primary); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:hover { + color: var(--primary-muted); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:active { + color: var(--background); + background: var(--primary); +} + +/* Expand/Collapse buttons */ +[guielement='pt-trail-container'] [guielement='crt-button-expand'], +[guielement='pt-trail-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* Mail and attachment entry icons (only present in Action) */ +[guielement='pt-mail'] img[guielement='icon'], +[guielement='pt-attachment'] img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Invisible for caller */ +[guielement='pt-trail-container'] [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +/* +* Rich text +*/ + +/* edit area */ +[guielement='pt-richtextarea'] { + background: var(--background); + border-color: var(--on-background); +} +body[contenteditable='true'] { + color: var(--on-background) !important; +} +[guielement='pt-memo-editable'], +[guielement='pt-attachment-editable'] { + background: transparent; +} +[guielement='pt-attachment-editable'] > [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* toolbar buttons, the image gets washed out in toggled state :-( */ +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:hover, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:active, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'][disabled='true'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* stamp popup */ +[guielement='memo'] { + background: var(--background); + --text-color: var(--on-background); +} + +/* While loading in */ +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] { + background-color: var(--surface) !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] > [guielement='image'] { + /* image doesn't color, and is more distracting than useful */ + display: none !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true']::before { + content: ''; + position: absolute; + inset: 0; + background: white; + + animation-name: pulse-feed; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes pulse-feed { + from { + opacity: 0; + } + to { + opacity: 0.2; + } +} + +/* + * Home, Module, and Dashboard pages + */ + +/* Can't recolor the background of the banner, so need to force the color of the text to make sure it remains visible */ +[handle='ie11campaign.banner.application_manager.description'], +[handle='ie11campaign.banner.application_manager.description'] + [mtype='group'] a { + color: black; +} + +[guielement='widget'] { + border-color: transparent; +} +[guielement='widget_header'], +[guielement='widget_content_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='widget_content_area'] { + border-color: var(--on-surface); +} +[guielement='widget_content_area'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Main pages widget / Tile widgets */ +[guielement^='widget_page_image_button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement^='widget_page_image_button']:hover { + background: var(--primary-muted); +} +[guielement^='widget_page_image_button']:active { + background: var(--background); + border: 1px solid var(--primary); + --filter: var(--on-background-filter); +} +[guielement^='widget_page_image_button'] > [guielement='icon'] { + filter: var(--filter); +} + +/* My tasks widget / Tasks per group widget */ +[guielement='widget_content_area'] [mstyles~='todo_header_group'] { + border-color: var(--on-surface); +} + +/* Selections, Reports, and Shortcuts widget */ +[guielement='selections_reports_content_area'] { + background: var(--surface); +} +[guielement='selections_reports_item'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='selections_reports_item']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[guielement='selections_reports_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* Current major calls widget */ +[handle='major_incident_widget_main'] [guielement='block_header'] { + background: var(--surface); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:hover { + filter: var(--primary-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:active { + filter: var(--primary-muted-filter); +} + +/* KPI widget */ +[guielement='widget_content_area'] [mstyles~='italic_text'] { + color: var(--text-color) !important; +} + +/* Report widget */ +[guielement='widget_content_area'] [guielement='image']:not([role='presentation']) { + /* + * The report legend is included in the image itself, + * forcing the background to make sure the legend is visible. + * + * Setting a simple filter, e.g. filter: invert(1), may have + * a more desirable effect depending on the chosen background + * of the widget + * + * NOTE: this also affects KPI's as they can't be distinguished + */ + background: #fcfcfc; +} + +/* Conversations widget */ +[guielement='conversation-reply'] { + background: transparent; +} + +[guielement='conversation-text'] a { + color: var(--primary); +} +[guielement='conversation-text'] a:hover { + color: var(--primary-muted); +} +[guielement='conversation-link'] { + background: transparent; + color: var(--primary); +} +[guielement='conversation-link']:hover { + background: transparent; + color: var(--primary-muted); +} +[guielement='conversation-number'] + [guielement='icon-button'] { + filter: var(--primary-filter); +} +[guielement='conversation-number'] + [guielement='icon-button']:hover { + filter: var(--primary-muted-filter); +} + +/* Navigation pane */ +[guielement='navigator_container'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='navigator_item'] [guielement='icon'] { + filter: var(--filter); +} +[guielement='navigator_item'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Selections widget / Reports widget / Shortcuts widget */ +[guielement='widget'] [guielement='link_button'] { + background: transparent; + color: var(--primary) !important; +} +[guielement='widget'] [guielement='link_button']:hover { + color: var(--primary-muted) !important; +} + +/* Get started widget */ +div#app { + background-image: none; +} +/* close button */ +.widget-container .widget-button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.widget-container .widget-button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.widget-container .widget-button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} +/* about us button */ +.welcome-widget #button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.welcome-widget #button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.welcome-widget #button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} + +/* Subwidgets */ +.widget-container .service-excellence-widget-frame, +.widget-container .service-excellence-widget-frame:hover, +.widget-container .getting-started-widget-frame, +.widget-container .getting-started-widget-frame:hover, +.widget-container .task-board-widget-frame, +.widget-container .task-board-widget-frame:hover { + background: var(--surface); +} +/* header */ +.widget-container .service-excellence-widget-frame h1, +.widget-container .getting-started-widget-frame h1, +.widget-container .task-board-widget-frame h1 { + color: var(--on-surface); +} + +/* Service excellence subwidget */ +/* view more blogs link */ +.widget-container .service-excellence-widget-frame a { + color: var(--primary); +} +.widget-container .service-excellence-widget-frame a:hover { + color: var(--primary-muted); +} +/* blog item */ +.widget-container .service-excellence-widget-frame .rss-item a { + background: var(--surface); + --text-color: var(--on-surface); +} + +.widget-container .service-excellence-widget-frame .rss-item a:focus, +.widget-container .service-excellence-widget-frame .rss-item a:hover { + background: var(--on-surface); + --text-color: var(--surface); +} + +.widget-container + .service-excellence-widget-frame + .rss-item + .rss-item-body + .rss-item-content + > div + .fade-out-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .rss-title-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .display-date { + color: var(--text-color); +} + +/* Getting started subwidget */ +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li .video-title { + color: var(--on-surface); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li.playing, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li.playing + .video-title { + background: var(--primary); + color: var(--on-primary); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:hover, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:hover + .video-title, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:focus, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:focus + .video-title { + background: var(--on-surface); + color: var(--surface); +} + +/* My calls subwidget */ +.widget-container .task-board-widget-frame .task-board-widget a { + --text-color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget a .td-icon, +.widget-container .task-board-widget-frame .task-board-widget a .content .title, +.widget-container .task-board-widget-frame .task-board-widget a .content .request, +.widget-container .task-board-widget-frame .task-board-widget a .content .request span, +.widget-container .task-board-widget-frame .task-board-widget a .display-date, +.widget-container .task-board-widget-frame .task-board-widget a .display-date .td-icon { + color: var(--text-color); +} +.widget-container .task-board-widget-frame .task-board-widget a:hover, +.widget-container .task-board-widget-frame .task-board-widget a:focus { + background: var(--on-surface); + --text-color: var(--surface); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a { + color: var(--primary); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a:hover { + background: none; + color: var(--primary-muted); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button svg { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover { + background: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover svg { + color: var(--surface); +} + +/* Flow chart */ +[mstyles='flowchart_container'] + :is( + [mstyles~='flowchart_block_simple'], + [mstyles~='flowchart_block_multi'], + [mstyles~='flowchart_block_dashed'], + [mstyles~='flowchart_icon_container'] + ) { + background: var(--background); + border-color: var(--on-background); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_empty'] { + border-color: var(--on-surface); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_multi'] { + box-shadow: 1px -1px var(--background), 2px -2px var(--on-background), 3px -3px var(--background), + 4px -4px var(--on-background); +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:last-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:last-child { + /* status icons are multicolored and thus can't be recolored */ + filter: none; +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:first-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:first-child { + filter: var(--on-background-filter); +} +[mstyles='flowchart_container'] [guielement='flowchart_label'] { + color: var(--on-background); +} +[mstyles='flowchart_container'] [mtype='rectangle'] { + border-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_right'] { + border-left-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_left'] { + border-right-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_up'] { + border-bottom-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_down'] { + border-top-color: var(--on-surface) !important; +} + +/* Marketplace widget */ +[guielement='no_padding_webpage_content_area'] { + background: var(--surface); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"] +{ + background-color: var(--primary); + color: var(--on-primary); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:hover +{ + background-color: var(--primary-muted); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:active +{ + background-color: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} + +/* + * Knowledge base suggestions widget (as seen on call card) + * Buttons are (mostly) styled in buttons.css + */ + +.suggestionsWidget { + background: var(--background); + border-color: var(--primary); +} + +.suggestionsWidget .suggestionsWidget-header { + background: transparent; + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body { + color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > img { + filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); + -webkit-appearance: listbox; + -moz-appearance: listbox; + appearance: listbox; +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select:focus { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language option { + background: var(--background); + color: var(--on-background); +} +.suggestionsWidget .help-button { + border-radius: 50%; + border: 1px solid currentColor; +} + +.suggestionsWidget .suggestionsWidget-list { + background: transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion, +.suggestionsWidget + .suggestionsWidget-suggestion.suggestionsWidget-suggestion-with-standard-solution { + background: transparent; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-suggestion > a { + background: transparent; + color: var(--text-color); + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > button { + background-color: transparent; + filter: var(--filter); + opacity: 1; + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > a:hover, +.suggestionsWidget .suggestionsWidget-suggestion > a:focus { + --text-color: var(--primary); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-suggestion > button:hover, +.suggestionsWidget .suggestionsWidget-suggestion > button:focus { + --filter: var(--primary-filter); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-noSuggestionsFound { + filter: var(--on-background-filter); +} + +.suggestionsWidget .suggestionsWidget-intro .footer { + background: var(--surface); + color: var(--on-surface); +} +.suggestionsWidget .suggestionsWidget-intro .footer > a:hover { + color: var(--primary-muted); +} + +/* disabling blue focus styling */ +.suggestionsWidget .suggestionsWidget-intro .intro-button:focus { + border-color: var(--on-background); + box-shadow: none; +} + +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='dialog'] { + background: var(--surface); +} +/* header */ +[data-handle='shareandsubscribe_sharee_picker'] header { + border-bottom-color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > strong, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] > strong { + color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > button { + filter: var(--on-surface-filter); +} + +/* Search field */ +[data-handle='shareandsubscribe_sharee_picker'] input[type='search'] { + background: var(--background); + border-color: var(--on-background); + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button { + --bg: var(--primary); + --filter: var(--on-primary-filter); + --border: var(--primary); + + position: relative; + background: var(--bg) !important; + border-color: var(--border) !important; +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:hover { + --bg: var(--primary-muted); + --filter: var(--on-primary-filter); + --border: var(--primary-muted); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:active { + --bg: var(--background); + --filter: var(--primary-filter); + --border: var(--primary); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M10 10l5 5'/%3E%3Ccircle cx='5.9' cy='6' r='5' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"); + + filter: var(--filter); + position: absolute; + top: 8px; + left: 8px; + width: 16px; + height: 16px; +} + +/* non-result status messages */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='searching'], +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='help-text'] { + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='no-search-results'] { + filter: var(--on-background-filter); +} + +/* Search results section*/ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] { + background: var(--background); + color: var(--on-background); + + --filter: var(--on-background-filter); + --hover-fg: var(--background); + --hover-filter: var(--background-filter); +} + +/* Sharees section */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] { + color: var(--on-surface); + + --filter: var(--on-surface-filter); + --hover-fg: var(--surface); + --hover-filter: var(--surface-filter); +} + +/* Items */ +[data-handle='shareandsubscribe_sharee_picker'] li:hover { + background: currentColor; + --filter: var(--hover-filter); + --text-color: var(--hover-fg); +} + +[data-handle='shareandsubscribe_sharee_picker'] li > div, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] li button, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] li button, +[data-handle='shareandsubscribe_sharee_picker'] li strong { + color: var(--text-color); +} +[data-handle='shareandsubscribe_sharee_picker'] li img[src^='data:image/svg+xml'] { + background: transparent; + border: 1px solid currentColor; + filter: var(--filter); +} +/* separator */ +[data-handle='shareandsubscribe_sharee_picker'] li:not(:last-child) { + border-bottom-color: currentColor; +} + +/* Footer */ +[data-handle='shareandsubscribe_sharee_picker'] footer { + background: var(--surface); + border-top: 1px solid var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button { + background: var(--bg) !important; + border-color: var(--border) !important; + color: var(--text-color) !important; +} + +/* Cancel button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel'] { + --bg: var(--background); + --border: var(--on-background); + --text-color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:hover { + --bg: var(--on-background); + --border: var(--on-background); + --text-color: var(--background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:active { + --bg: var(--surface); + --border: var(--on-surface); + --text-color: var(--on-surface); +} + +/* Share button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit'] { + --bg: var(--primary); + --border: var(--primary); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:hover { + --bg: var(--primary-muted); + --border-color: var(--primary-muted); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:active { + --bg: var(--on-primary); + --border: var(--primary); + --text-color: var(--primary); +} + +/* Icons in minimized groups */ +[guielement='mg-minimized-content'] [guielement='icon'] { + filter: var(--on-background-filter); +} + +/* Header buttons */ +[guielement='mg-header'] input[aria-haspopup='false'] { + filter: var(--primary-filter); +} +[guielement='mg-header'] input[aria-haspopup='false'][disabled='true'] { + filter: var(--disabled-filter); +} + +/* +* Form +*/ + +/* Default */ +input[type='text'], +div[guielement='datetimecontrol'], +div[guielement='unittextbox'], +button[role='checkbox'], +button[role='radio'], +textarea[mtype='textarea'], +textarea.textarea, +body[cardType='naturalselection'] input, +body[cardType='naturalselection'] select { + --border: var(--on-background); + --static-filter: var(--on-background-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); + border-color: var(--border); +} +textarea[mtype='textarea'] { + border-color: var(--border) !important; +} + +/* Readonly */ +input[type='text'][readonly='true'], +div[guielement='datetimecontrol'][readonly='true'], +div[guielement='unittextbox'][readonly='true'], +button[role='checkbox'][readonly='true'], +button[role='radio'][readonly='true'], +textarea[mtype='textarea'][readonly='true'] { + --border: var(--disabled); + --static-filter: var(--on-background-filter); + --button-filter: var(--disabled-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +/* Disabled */ +input[type='text'][disabled='true'], +div[guielement='datetimecontrol'][disabled='true'], +div[guielement='unittextbox'][disabled='true'], +button[role='checkbox'][disabled='true'], +button[role='radio'][disabled='true'], +textarea[mtype='textarea'][disabled='true'], +textarea.textarea:disabled { + --border: var(--on-disabled); + --static-filter: var(--on-disabled-filter); + --button-filter: var(--on-disabled-filter); + + background: var(--disabled); + color: var(--on-disabled); + --text-color: var(--on-disabled); +} + +/* Error */ +input[type='text'][mstyles~='error'], +div[guielement='datetimecontrol'][mstyles~='error'], +div[guielement='unittextbox'][mstyles~='error'], +textarea[mtype='textarea'][mstyles~='error'], +textarea.textarea:invalid { + --border: var(--error); + --static-filter: var(--error-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--error); + --text-color: var(--error); +} + +/* Combobox dropdown icon */ +body[cardType='naturalselection'] span.arrowdown, +input[type='text'][mtype='combobox'] + div > img { + filter: var(--on-background-filter); +} +input[type='text'][mtype='combobox'][readonly='true'] + div > img, +input[type='text'][mtype='combobox'][disabled='true'] + div > img { + filter: var(--on-disabled-filter); +} +input[type='text'][mtype='combobox'][mstyles~='error'] + div > img { + filter: var(--error-filter); +} + +/* Combobox options */ +body[cardType='naturalselection'] option, +[mango_combobox='true'][role='option'] { + background: var(--background) !important; + color: var(--on-background) !important; +} +[mango_combobox='true'][role='option'][style*='highlight'] { + background: var(--on-background) !important; + color: var(--background) !important; +} + +/* Datepicker button */ +div[guielement='datetimecontrol'] > input[guielement='icon-button'] { + filter: var(--button-filter); +} + +/* Unit text box */ +div[guielement='unittextbox'] > img, +div[guielement='unittextbox'] > [guielement='unittextbox_prefix'], +div[guielement='unittextbox'] > [guielement='unittextbox_suffix'] { + background: transparent; +} +div[guielement='unittextbox'] > img { + filter: var(--static-filter); +} + +/* Checkbox */ +button[role='checkbox'] { + box-sizing: border-box; + border: 1px solid var(--border); +} +button[role='checkbox'] > img { + display: none !important; +} + +/* checkmark */ +button[role='checkbox'][aria-checked='true']::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/* Radio button */ +button[role='radio'] > img { + display: none !important; +} +button[role='radio'] { + border: 1px solid var(--border); + border-radius: 50%; +} +/* dot */ +button[role='radio'][aria-checked='true']::before { + content: ''; + position: absolute; + border-radius: 50%; + top: 4px; + left: 4px; + width: 8px; + height: 8px; + background: currentColor; +} + +/* Search */ +[guielement='sp-search-main-group'], +[mstyles~='quicklaunch_search_background'] { + background: transparent; + border: 1px solid var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button'], +[guielement='quicklaunch_search_button'] { + background: var(--primary); + border-color: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button']:hover, +[guielement='quicklaunch_search_button']:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button']:active, +[guielement='quicklaunch_search_button']:active { + background: var(--background); + border-color: var(--primary); + --filter: var(--primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button'] [guielement='icon'], +[guielement='quicklaunch_search_button'] [guielement='icon'] { + filter: var(--filter); +} + +/* List control */ +[guielement='list_control'], +[guielement='list_control'] [guielement='list_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='list_control'] [guielement='list_item']:hover { + background: var(--on-background); + --text-color: var(--background); + --filter: var(--background-filter); +} +[guielement='list_control'] [guielement='list_item'][mstyles~='selected'], +[guielement='list_control'] [guielement='list_item'] [mstyles~='selected_suggestion'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[guielement='list_control'] [guielement='list_item'] [mtype='label'] { + color: var(--text-color) !important; +} +[guielement='list_control'] [guielement='list_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* memofield buttons */ +.memowithheader .images img { + filter: var(--on-surface-filter); +} +.memowithheader .images img:hover { + filter: var(--primary-filter); +} +.memowithheader .images img:active { + filter: var(--primary-muted-filter); +} +.memowithheader .images img[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* + * HTML style form elements + */ +table.fields .label { + color: var(--text-color); +} +/* select */ +table.fields .arrowdown { + filter: var(--on-background-filter); +} +#dropdownlayer .dropdownselect { + background: var(--background); + color: var(--on-background); +} +.optionvalue { + color: var(--text-color); +} + +/* list control */ +div.fields .selectlist { + background: var(--background); +} +div.fields .selectlist .selected { + background: var(--on-background); + color: var(--background); +} + +/* search with autocomplete */ +table.textinput { + background: var(--background); +} +table.textinput #queryfield { + color: var(--on-background); +} +table.textinput + #suggestionbox { + background: var(--background); +} +table.textinput + #suggestionbox .dropdown { + color: var(--on-background); +} +table.textinput + #suggestionbox .dropdown[style*='background'] { + background: var(--on-background) !important; + color: var(--background); +} + +/* KI explorer panel */ +[guielement='explorer_header'], +[guielement='explorer_body'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='explorer_body'] [guielement='tree_node_line'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); +} +[guielement='explorer_body'] + [guielement='tree_node_line'] + [mtype='group'][mstyles~='tree_top_level'] { + background: transparent; +} + +/* KI Rich Text fields, and keyword block */ + +[guielement='block_body'], +[guielement='block_header'] { + background: transparent; +} +[guielement='memo_rich_text_area'] { + background: var(--background); + border-color: var(--on-background); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton'], +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:hover, +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:active, +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='imagebutton'][disabled='true'], +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* KI tags */ +.tagList > .tag { + background: var(--background); + border-color: var(--on-background); +} +.tagList > .tag > .tagName { + color: var(--on-background); +} +.tagList > .tag > button { + filter: var(--on-background-filter); +} +.tagList > .tag > button:hover { + filter: var(--primary-filter); +} +.addTagOptions .optionsSeparator { + color: var(--on-background); +} + +.addTagOptions .td-field { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-field::placeholder { + color: var(--on-background); +} +.addTagOptions .td-button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.addTagOptions .td-field option { + color: var(--on-background); +} +.addTagOptions .td-field option:disabled { + font-style: italic; +} + +/* KI Read version styles */ +[guielement='kb-search-main-group'] { + background: transparent; + border: 1px solid var(--primary); +} +[guielement='kb-comment-group'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='kb-content'] a { + color: var(--primary); +} +[guielement='kb-content'] a:hover { + color: var(--primary-muted); +} + +/* + * Email editor in email actions + */ + +/* Toolbar */ +div#cke_emailEditor .cke_top { + background: var(--surface); +} +div#cke_emailEditor .cke_top a.cke_button, +div#cke_emailEditor .cke_top a.cke_combo_button { + filter: var(--on-surface-filter); +} +div#cke_emailEditor .cke_top a.cke_button:focus, +div#cke_emailEditor .cke_top a.cke_button:hover, +div#cke_emailEditor .cke_top a.cke_combo_button:focus, +div#cke_emailEditor .cke_top a.cke_combo_button:hover, +div#cke_emailEditor .cke_top span.cke_combo_on a.cke_combo_button { + background: transparent; + filter: var(--primary-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled { + filter: var(--on-disabled-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_icon, +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_arrow { + opacity: 1; +} + +html.cke_panel_container .cke_panel_grouptitle { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_list { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_listItem a > * { + color: var(--text-color); +} + +html.cke_panel_container .cke_panel_listItem a:hover, +html.cke_panel_container .cke_panel_listItem a:focus { + background: transparent; + --text-color: var(--primary); +} + +html.cke_panel_container .cke_panel_listItem.cke_selected a, +html.cke_panel_container .cke_panel_listItem a:active { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Contents */ +div#cke_emailEditor .cke_contents { + background: var(--background); +} + +/* + * These rules will cause any color styling in the email to be lost, + * But will give an increased chance for the user to be able to read + * it. + * + * Checking the original style can be done by turning off the style + * in Stylus. + */ +body.cke_editable, +body.cke_editable * { + background: var(--background) !important; + color: var(--on-background) !important; +} +body.cke_editable a { + color: var(--primary) !important; +} + +body[cardType='naturalselection'] { + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +body[cardType='naturalselection'] div#header div.title, +body[cardType='naturalselection'] legend span, +body[cardType='naturalselection'] .fieldlistheader, +body[cardType='naturalselection'] .linklistgroupheader, +body[cardType='naturalselection'] .linklistheader, +body[cardType='naturalselection'] table.tabcontrol { + color: var(--text-color); +} + +body[cardType='naturalselection'] a { + color: var(--primary); +} + +body[cardType='naturalselection'] table.fieldlist { + --filter: var(--on-background-filter); +} + +body[cardType='naturalselection'] table.fieldlist td:hover:not(.fieldlistheader), +body[cardType='naturalselection'] table.fieldlist td:focus-within:not(.fieldlistheader) { + --filter: var(--primary-filter); + --text-color: var(--primary); +} + +body[cardType='naturalselection'] img.icon { + background: transparent; + filter: var(--filter); +} + +body[cardType='naturalselection'] img.icon + a { + color: var(--text-color); +} + +/* Checkbox */ +body[cardType='naturalselection'] .checkboxlayouter:not(#ie8) input.checkbox + label.checkbox { + background: none; + border: 1px solid var(--on-background); + height: 16px; + margin-top: 2px; +} + +body[cardType='naturalselection'] + .checkboxlayouter:not(#ie8) + input.checkbox:checked + + label.checkbox::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/** + * Various random things specific to certain cards + */ + +/* + * Partial card info block (Partail Incident, Change Activity) + */ +[guielement='mg-infoblock-content'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='mg-infoblock-content'] img[guielement='icon']:first-of-type { + filter: var(--on-surface-filter); +} + +/* + * Change breadcrumb + */ +[guielement='change_phase_breadcrumb'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='change_phase_breadcrumb'] > [mtype='label'] { + color: var(--text-color) !important; +} + +/* + * Checklist + */ +div#checklist { + background: var(--background); + + --text-color: var(--on-background); + + color: var(--text-color); +} + +div#checklist .explanation-text, +div#checklist .checked-amount, +div#checklist .the-text { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button'] .icon.details, +div#checklist .subtask-header .actions button.date-button, +div#checklist .subtask-header .actions button.menu-button, +div#checklist .subtask-header .operator-and-date button { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button']:hover .icon.details, +div#checklist .subtask-header .actions [role='button']:focus .icon.details, +div#checklist .subtask-header .actions [role='button'] .icon.details.currently-edited, +div#checklist .subtask-header .actions button.date-button:hover, +div#checklist .subtask-header .actions button.menu-button:hover, +div#checklist .subtask-header .actions button.menu-button:focus, +div#checklist .subtask-header .actions button.date-button:focus, +div#checklist .subtask-header .actions button.date-button.currently-edited, +div#checklist .subtask-header .operator-and-date button:hover, +div#checklist .subtask-header .operator-and-date button:focus { + color: var(--primary) !important; +} + +div#checklist .subtask-header.hover, +div#checklist .subtask-header.hover .actions.hover { + background: var(--on-background) !important; + --text-color: var(--background); +} + +/* Context menu, Confirm, and Cancel buttons*/ +div#checklist [role='button'] .icon.circle, +div#checklist button.menu-button .border, +div#checklist .modal-card.popup .close { + color: var(--text-color); + border-color: var(--text-color); +} + +div#checklist [role='button'][aria-disabled='true'] .icon.circle { + --text-color: var(--disabled); + background: none; +} + +div#checklist [role='button']:hover .icon.circle, +div#checklist [role='button']:focus .icon.circle, +div#checklist button.menu-button:hover .border, +div#checklist button.menu-button:focus .border, +div#checklist .modal-card.popup .close:hover, +div#checklist .modal-card.popup .close:focus { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +/* Checkboxes */ +div#checklist .check-container .check { + background: var(--background); + color: var(--on-background); +} + +/* Template select */ +div#checklist ul#templateList li.template-entry.selected { + background: var(--selection); + color: var(--on-selection); +} + +div#checklist ul#templateList li.template-entry:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* Modal popup */ +div#checklist .modal-card.popup .modal-card-head, +div#checklist .modal-card.popup .modal-card-body, +div#checklist .modal-card.popup .modal-card-foot { + background: var(--surface); + --text-color: var(--on-surface); +} +div#checklist .modal-card.popup .modal-card-title { + color: var(--on-surface); +} + +/* Assign operator dialog & Date picker dialog*/ +div#checklist [role='dialog'], +div#checklist .date-picker-popup, +div#checklist .date-picker-popup .date-picker-footer { + background: var(--surface); + --text-color: var(--on-surface); + color: var(--text-color); +} + +div#checklist [role='dialog'] li { + color: var(--on-surface); +} + +div#checklist [role='dialog'] li[role='option']:hover { + background: var(--on-surface); + color: var(--surface); +} + +div#checklist [role='dialog'] button.change-assignee-popover-action-button, +div#checklist .date-picker-popup .td-reset-date button, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today { + background: none; + color: var(--primary); +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:hover, +div#checklist [role='dialog'] button.change-assignee-popover-action-button:focus, +div#checklist .date-picker-popup .td-reset-date button:hover, +div#checklist .date-picker-popup .td-reset-date button:focus, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:hover, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:focus { + color: var(--primary-muted) !important; +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:active, +div#checklist .date-picker-popup .td-reset-date button:active, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:active { + background: var(--primary); + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker-container { + background: var(--background); +} + +div#checklist .help.is-danger { + color: var(--error); +} + +div#checklist .td-date-picker { + color: var(--on-background); +} + +div#checklist .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-header-cell { + background: var(--background); + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selectable { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.weekend { + background-color: var(--disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:not(.currentMonth) { + color: var(--on-disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.today { + border: 1px solid var(--primary-muted) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.focused { + border: 2px solid var(--primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selected { + background-color: var(--primary) !important; + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:hover.selectable { + background-color: var(--primary-muted); + color: var(--on-primary); +} + +div#checklist .date-and-time .control input + .icon { + color: var(--on-background); +} + +div#checklist .date-and-time .control input:focus { + border-color: var(--on-background); + box-shadow: none; +} + +div#checklist .date-and-time .control input:focus + .icon { + z-index: 1000; +} + +div#checklist .date-and-time .control input[aria-invalid='true'] { + background: var(--background); + color: var(--error); + border-color: var(--error); +} + +div#checklist .date-and-time .control input[aria-invalid='true'] + .icon { + color: var(--error); +} + +/* Panels */ + +[mstyles='planboard_dispatch_panel_main'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box'], +[mstyles='planboard_dispatch_panel_main'] [guielement='icon'] { + filter: var(--on-surface-filter); +} +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box']:hover { + filter: var(--primary-filter); +} + +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[mstyles='planboard_dispatch_panel_main'] + [guielement^='planboard_work_item_draggable_'][mstyles^='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +#dragdiv > [guielement^='planboard_work_item_draggable_'] { + background: var(--on-primary); + --text-color: var(--primary); + --filter: var(--primary-filter); + border: 1px solid var(--primary); +} +#dragdiv [mstyles='planboard_work_item_first_text'], +#dragdiv [mstyles='planboard_work_item_second_text'] { + color: var(--text-color); +} + +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button'], +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button'], +[guielement='planner_detail_content'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button']:nth-of-type(2), +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button']:nth-of-type(2), +[guielement='planner_detail_content'] [guielement='icon-button']:nth-of-type(2) { + filter: none; +} + +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption'] { + --filter: var(--on-background-filter); +} +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption']:hover { + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_detail_content'] { + --filter: var(--on-surface-filter); +} + +[guielement='group_linked_information'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='group_linked_information'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='planboard_detail_section_subgroup'] [guielement='pt-memo'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='planboard_detail_section_subgroup'] img[handle^='invisible-for-caller-label-'] { + filter: var(--on-surface-filter); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] + :not([handle='planboard.dispatch.quickplanning']) + + [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Toolbar */ + +[guielement='planboard_weekview_toolbar'] { + background: var(--surface); + --filter: var(--on-surface-filter); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement='planboard_weekview_toolbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime'], +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo'] { + background: transparent; + --text-color: var(--on-surface); +} +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime']:hover, +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo']:hover { + background: transparent; + --text-color: var(--primary); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='day'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='work_week'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='week'] { + /* These have two colours, and on/off can't be distinguished */ + filter: none; +} + +/* Scheduler */ +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] { + background: var(--surface); + --filter: var(--on-surface-filter); + --border: var(--on-surface); + border-color: var(--border); +} +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'] + > [mstyles~='planboard_quick_scheduler_daily_schedule'] { + border-color: var(--border); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler']:hover, +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button']:hover { + --filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler_pressed'], +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed'] { + background: var(--primary); + --border: var(--on-primary); + --filter: var(--on-primary-filter); + border-color: var(--on-primary); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed']:hover, +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed']:hover { + background: var(--primary-muted); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] [handle='picker_part'] { + filter: var(--filter); +} + +[guielement='planner_toolbar_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_toolbar_popup'] [guielement='planboard_header'] { + border-color: var(--text-color); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item'] { + background: var(--background); + --text-color: var(--on-background); + border-color: var(--on-background); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item']:hover { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Grid */ + +/* Header */ +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='planboard_header'] + [guielement='planner_period_header_cell'][mstyles='current_period'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* Operator group row */ +[guielement='planner_row'] [guielement='planboard_operatorgroup_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Operator row */ +[guielement='planner_row'] [guielement='planboard_operator_cell'], +[guielement='planner_row'] [guielement='planner_item_title_cell'], +[guielement='planner_row'] [guielement='planner_cell'] { + background: var(--background); + --text-color: var(--on-background); +} + +[guielement='planboard_operator_cell'] [mstyles='planboard_clickable planboard_zone_label'] { + /* Resetting the color of the timezone button label, as it is printed on top of a dual colored icon */ + color: inherit; +} + +/* Popups */ +[handle='planboard_popup'] [guielement='planner_popup_window'], +[handle='planboard_popup'] [guielement='planboard_popup_header'], +[handle='planboard_popup'] [guielement='planboard_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[handle='planboard_popup'] [handle='planboard.todopopup.to_dispatch']:hover { + --text-color: var(--primary); +} + +[handle='planboard_popup'] [guielement='planboard_work_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'][mstyles*='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'] + [guielement='icon-button']:first-of-type { + filter: var(--filter); +} + +/* + * Filter panel + */ +[guielement='planner_page_content'] [guielement='filter_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_header'], +[guielement='planner_page_content'] [guielement='filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_body'] > [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='planner_page_content'] + [guielement='filter_panel_body'] + > [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* date picker */ +[mstyles='planner_datepicker_grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekday'] { + --text-color: var(--on-background); + background: var(--background); +} +/* non-working day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekend'] { + --text-color: var(--on-surface); + background: var(--surface); +} +/* Special style for 'today' to aid orientation */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today'] { + border-color: transparent; +} +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today_label'] { + --text-color: var(--primary); +} +/* currently selected cell */ +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekday'][mstyles~='planner_datepicker_selected'], +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekend'][mstyles~='planner_datepicker_selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* + * Actions + */ +[guielement='planner_page_content'] [guielement='detail_panel_main'] { + border: 1px solid var(--on-background); +} + +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='planned'] { + --status-color: #057aab; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='terminated'] { + --status-color: #178755; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='request'] { + --status-color: #eda911; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header'] { + background: var(--surface); + --text-color: var(--on-surface); + border-bottom: 0px; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 8px; + background: var(--status-color); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] { + background: var(--background) !important; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'][mstyles~='active'] { + border-color: var(--primary); + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_group_header'] + > [guielement='icon']:first-of-type { + filter: none; +} + +[guielement='planner_page_content'] + [guielement='detail_panel_body'] + input[placeholder]::placeholder { + color: var(--text-color) !important; +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 4px; + background: var(--status-color); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_highlighted_block'] + [guielement='detail_panel_reserved_item'][mstyles~='hovered'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='planner_popup_window'], +[guielement='planner_popup_window'] > [guielement='planner_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_popup_window'] [guielement='spinner-button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button']:hover { + filter: var(--primary-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button'] + [guielement='textbox'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin'] { + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin']:hover { + filter: var(--primary-filter); +} + +/* + * Planner + */ +[handle='reservation.planner.main_view'] > [guielement='planner_header_row'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] + [guielement='mg-header'][mstyles~='reservable_items_group_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_row'] { + background: var(--background); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='servicewindow_shadow_'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='blocked_period_shadow_'] { + background: var(--disabled) !important; +} +[handle='reservation.planner.main_view'] [guielement='planner_item_title_cell'] { + background: var(--background) !important; +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_cell_icon'] > img { + filter: var(--on-background-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_OFF'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON_HOVER'] { + filter: none; +} +[handle='reservation.planner.main_view'] [guielement='planner_room_capacity'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +#dragdiv { + border-color: var(--on-background) !important; +} + +/* New reservation column */ +[handle='reservation.planner.main_view'] [guielement='background_shadow_section'] { + background: repeating-linear-gradient( + -45deg, + transparent, + transparent 9px, + var(--primary) 9px, + var(--primary) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='foreground_shadow_section'] { + border-color: var(--primary); + background: transparent; +} +[handle='reservation.planner.main_view'] [guielement='reservation_feedback_section']:hover { + border-color: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='divisible_room_restriction'] { + background: repeating-linear-gradient( + -45deg, + var(--primary-muted), + var(--primary-muted) 6px, + transparent 6px, + transparent 10px + ); + border-color: var(--primary-muted); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] { + background: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] + > img { + filter: var(--on-primary-filter); +} + +/* Reservation */ +[handle='reservation.planner.main_view'] [guielement='reservation_section'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_section'][mstyles~='selected_section'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[handle='reservation.planner.main_view'] [guielement='reservation_section'] > img { + filter: var(--filter); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] { + background: repeating-linear-gradient( + 45deg, + transparent, + transparent 6px, + var(--disabled) 6px, + var(--disabled) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] > img { + display: none !important; +} + +/* Availability popup */ +[guielement='planner_popup_content'] [handle='availableassets'] ~ img[style*='width: 24px'] { + filter: var(--on-surface-filter); +} + +/* + * TASK BOARD and BOOKMARKS + */ +/* notification */ +[guielement='notification-box'][mstyles='notification-alert'] { + background: var(--background); + border: 1px solid var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] + > [guielement='notification-message'] { + color: var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] > [guielement='icon'] { + filter: var(--primary-filter); +} + +/* filter panel */ +[guielement='taskboard_filter_panel'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border: 1px solid var(--on-background); +} +[guielement='taskboard_filter_panel_header'], +[guielement='taskboard_filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + border-color: var(--on-surface); +} + +[guielement='taskboard_datefilter_button'] { + border-color: var(--surface); +} +[guielement='taskboard_datefilter_button'] > [mtype='label'] { + background: none; +} +[guielement='taskboard_datefilter_button'][mstyles~='taskboard_active_date_filter_caption'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='taskboard_filter_panel_filter_fields'] [mstyles='taskboard_filter_panel_section'] { + border-color: var(--on-background); +} + +[guielement='taskboard_filter_panel_filter_fields'] + [mstyles='taskboard_filter_panel_section'] + [guielement='icon'] { + filter: var(--filter); +} + +/* task list */ +[guielement='taskboard_item_border_group'] { + border-color: var(--surface); +} + +[guielement='taskboard_item_header'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border-color: var(--surface); +} +[guielement='taskboard_item_header'][mstyles~='unfolded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='taskboard_bookmark_button']:disabled { + visibility: hidden !important; +} +[guielement='taskboard_task_icon'] { + filter: var(--filter); +} + +[guielement='taskboard_item_body'] { + border-color: var(--surface); +} +[guielement='taskboard_item_body'] [guielement='taskboard_task_body_data_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='taskboard_item_body'] + [guielement='pt-memo'] + [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +[guielement='taskboard_item_body'] [guielement='pt-memo'] a { + color: var(--primary); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} + +[guielement='taskboard_item']:hover [guielement='taskboard_item_header'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_header'], +[guielement='taskboard_item']:hover [guielement='taskboard_item_body'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_body'] { + border-color: var(--primary-muted); +} + +/** + * Change activity planner tab + */ + +/* + * Change activity planner toolbar + */ +/* Date picker button */ +[guielement='planner_menu_group'] [handle='service_window_check_date_date'] { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] [handle='service_window_check_date_date']:hover { + filter: var(--primary-filter); +} +/* Lock/Unlock buttons (when selecting an activitty) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']) { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):disabled { + padding-bottom: 2px; + border-bottom: 1px solid currentColor; /* The color will be overridden by the filter*/ +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):not(:disabled):hover { + filter: var(--primary-filter); +} +/* Link/Unlink image (when creating/breaking a dependency) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + [mstyles='planner_menu_title'] + ~ [guielement='image'] { + filter: var(--on-background-filter); +} + +/* + * Change activity planner + */ +[guielement='planner_container'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/* Timeline bar */ +[guielement='planner_container'] [guielement='planner_scroll_button_group'], +[guielement='planner_container'] [guielement='planner_view_combobox_container'], +[guielement='planner_container'] + [guielement='planner_default_group'] + :is( + [guielement='planner_time_line_item_first_line'], + [guielement='planner_time_line_item_second_line'] + ) { + border-color: var(--on-surface); +} + +[guielement='planner_container'] [handle='gantt_zoomfit'] { + filter: var(--on-surface-filter); +} +[guielement='planner_container'] [handle='gantt_zoomfit']:hover { + filter: var(--primary-filter); +} + +/* Marker bar */ +[guielement='planner_container'] [guielement='planner_marker_group'] { + background-color: var(--background); + background-color: var(--surface); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle='planner.todaymarker.title'] { + background-color: var(--primary) !important; + color: var(--on-primary); + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [mtype='rectangle']:is( + [style*='background-color: rgb(219, 216, 235)'], + [style*='background-color:#dbd8eb'] + ) { + /* Arrow on the today marker */ + background-color: var(--primary) !important; +} + +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle^='Sprint'][handle$='_marker'] { + filter: var(--on-surface-filter); +} + +/* Activities sidebar */ +[guielement='planner_container'] [guielement='planner_info_group'] { + border-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_inner_group'] { + background-color: var(--background); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_header_line'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--surface); +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] { + --text-color: var(--on-background); + + background-color: transparent !important; + border-color: transparent; +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] + :is( + [guielement='planner_info_control_title'], + [guielement='planner_info_control_subtitle'] + )[style*='color'] { + color: var(--text-color) !important; +} + +/* Planner area */ +[guielement='planner_container'] [guielement='planner_draw_area'] { + background-color: var(--background); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-background); + --text-color: var(--on-background); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + > [mtype='group']:not([guielement]) { + /* Out of service window / weekend */ + background-color: var(--on-background) !important; + opacity: 0.1; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_background_row'] { + background-color: transparent !important; + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_header_line'] { + background-color: var(--surface); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_duration_in_group_header'] { + background-color: var(--on-surface); + --text-color: var(--surface); +} + +/* Connectors */ +[guielement='planner_container'] [guielement='planner_draw_area'] [mtype='rectangle'] { + border-color: var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [mtype='rectangle'][style*='z-index: 3;'] { + /* Connector connected to selected activity */ + border-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_begin'] { + /* Start connector */ + background-color: var(--on-background); + padding: 0; + width: 6px !important; + height: 6px !important; + border-radius: 50%; + border: 2px solid var(--background); + border-right: 0px; + top: 8.5px !important; + left: unset !important; + right: -4px; +} +[guielement='planner_container'] [guielement='planner_draw_area'] [guielement='planner_link_end'] { + /* End connector area */ + position: relative; + overflow: hidden; + width: 8px !important; + height: 12px !important; + border-width: 0px; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_end']:after { + /* End connector arrow */ + content: ''; + position: absolute; + width: 10px; + height: 10px; + background: var(--on-background); + transform: rotate(45deg); + left: -7px; + top: 1px; + box-shadow: 0 0 0px 2px black; +} + +/* Blocks */ +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_info_control_title'] { + /* to fix templates where the label is forced grey */ + color: var(--text-color) !important; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* light-ish red unselected */ + [style*='background-color: rgb(208, 49, 49);'], [style*='background-color:#d03131;'], + /* light-ish red selected */ + [style*='background-color: rgb(191, 27, 44);'], [style*='background-color:#bf1b2c;'], + /* darker red (doesn't seem to change on selection)*/ + [style*='background-color: rgb(164, 23, 37);'], [style*='background-color:#a41725;'], + ) { + /* Overdue / No Go */ + background-color: var(--error) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* grey */ + [style*='background-color: rgb(149, 149, 149);'], [style*='background-color:#959595;'], + ) { + /* Not ready to start / Not ready to authorize */ + background-color: transparent !important; + border: 1px solid var(--error) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* lightblue unselected */ + [style*='background-color: rgb(118, 182, 209);'], [style*='background-color:#76b6d1;'], + /* lightblue selected */ + [style*='background-color: rgb(73, 158, 193);'], [style*='background-color:#499ec1;'], + ) { + /* Ready to start */ + background: repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* blue unselected */ + [style*='background-color: rgb(5, 122, 171);'], [style*='background-color:#057aab;'], + /* blue selected */ + [style*='background-color: rgb(0, 107, 156);'], [style*='background-color:#006b9c;'], + ) { + /* Waiting for Authorization / Started */ + background: repeating-linear-gradient( + -45deg, + var(--primary), + var(--primary) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--primary) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* green unselected */ + [style*='background-color: rgb(23, 135, 85);'], [style*='background-color:#178755;'], + /* green selected */ + [style*='background-color: rgb(19, 117, 73);'], [style*='background-color:#137549;'], + ) { + /* Resolved / Go */ + background-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* teal unselected */ + [style*='background-color: rgb(115, 197, 158);'], [style*='background-color:#73c59e;'], + /* teal selected */ + [style*='background-color: rgb(66, 177, 128);'], [style*='background-color:#42b180;'], + ) { + /* Skipped */ + background: repeating-linear-gradient( + 45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ), + repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* white (also has grey border) */ + [style*='background-color: rgb(242, 242, 242);'], [style*='background-color:#f2f2f2;'], + ) { + /* Template */ + background-color: transparent !important; + border: 2px dotted var(--on-background) !important; +} + +/* Planner scope bar */ +[guielement='planner_container'] [guielement='planner_custom_scroll_area'] [guielement='image'] { + filter: var(--on-surface-filter); +} + +/* Vertical lines */ +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;'] { + /* Milestone line */ + border-color: var(--milestone-line-color) !important; +} +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;']:is( + [style*='border-left-color: rgb(219, 216, 235)'], + [style*='border-left:1px solid #dbd8eb'] + ) { + /* Today line */ + --milestone-line-color: var(--primary); +} + +/* Activitity bar (hover/select state) */ +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(183, 178, 216)'] { + /* Selected */ + box-shadow: inset 8px 0px 0px 0px var(--primary); + border-color: var(--primary); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(219, 216, 235)'] { + /* Hovered */ + border-color: var(--on-background); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(159, 153, 203)'] { + /* Selected and Hovered */ + box-shadow: inset 8px 0px 0px 0px var(--on-background); + border-color: var(--on-background); +} + +/* Collapsible sidebar */ +[guielement='collapsible_panel_container'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [guielement='collapsible_panel_header'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [mstyles='chm-planner-sidepanel-filter'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt'] { + filter: var(--on-background-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:hover { + filter: var(--primary-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:active { + filter: var(--primary-muted-filter); +} + +/* + * New activity popup + */ +[guielement='popup-body'] [guielement='rich_text_memo_group'][mstyles~='memo_like_progresstrail'] { + background-color: transparent; +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']) { + filter: var(--on-surface-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):hover { + filter: var(--primary-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):active { + filter: var(--primary-muted-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button'])[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/** + * Activity Overview tab + */ +[guielement='collected_memo_history'] [guielement='history_entry_list'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + :is([guielement='history_stamp'], [guielement='history_contents']) { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button'] { + background-color: transparent; + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button']:hover { + --text-color: var(--primary-muted); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'][mstyles='history_entry_non_clickable']::before { + content: '▸'; + position: absolute; + left: -12px; + font-size: 14px; + color: var(--text-color); +} + +/** + * Activity Checklist + */ +[guielement='checklist_sidebar_header'] { + background-color: var(--surface); + border-color: var(--surface); +} + +[guielement='checklist_sidebar_content'] { + background-color: var(--surface); + border-color: var(--surface); + border-top-color: var(--on-surface); +} + +[guielement='checklist_item'] + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--surface); +} +[guielement='checklist_item']:is(:hover, :focus-within) + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--primary); +} + +[guielement='checklist_item'] [guielement='checklist_item_header'][mstyles='unfolded'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='checklist_item'] + [guielement='checklist_item_content'] + [guielement='checklist_grey_section'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/** + * Change Calendar + */ +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--on-surface); +} +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] > [mtype='group'] { + border-color: var(--on-surface) !important; +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] { + background: var(--on-surface); /* The table and cell borders of the month view */ +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekend'] { + background-color: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekday'] { + background-color: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] > [mstyles~='month_calendar_today'] { + border-color: transparent; + box-shadow: inset 0 0 0 2px var(--primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_week_label'] { + background-color: var(--primary); + --text-color: var(--on-primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_item'] { + background-color: transparent; +} +[guielement='changecalendarpage'] [guielement='month_calendar_item']:hover { + background-color: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[guielement='changecalendarpage'] + [guielement='month_calendar_item'] + [guielement='icon'][mtype='imagearea']:first-child { + filter: var(--filter); +} + +/** + * Time Registration + */ + +[guielement='tr-fold-header-border'] { + border-top-color: transparent; +} + +[guielement='tr-fold-header'], +[guielement='tr-fold-content'] { + border-left-color: var(--surface); +} + +[guielement='tr-fold-header'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='tr-fold-header'] > img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='tr-fold-content'] img[guielement='icon'] { + filter: var(--on-background-filter); +} + +[guielement='tr-fold-header'] [guielement='tr-time'] { + color: var(--primary); +} +[guielement='tr-fold-content'] [guielement='tr-time'] { + border-color: var(--text-color); +} + +/** + * Mango Grid + */ + +[mtype='grid'] { + border-color: var(--background); + --selected-row-border: var(--primary); +} + +[mtype='grid'][mstyles='blurred'] { + --selected-row-border: var(--on-surface); +} + +[mtype='grid'] [id$='_content'] { + color: var(--text-color); +} + +/* selected */ +[mtype='grid'] [id$='_selection'] [id*='_selection_'][style*='background-color'] { + background-color: transparent !important; + box-shadow: inset 0 0 0px 1px var(--selected-row-border); +} + +/* header */ +[mtype='grid'] [id$='_header'] { + --text-color: var(--on-surface); +} + +[mtype='grid'] [id$='_header'] img { + filter: var(--on-surface-filter); +} + +[mtype='grid'] [id$='_header'] [style*='background-color'] { + background-color: var(--surface) !important; +} +[mtype='grid'] [id$='_header'] [style*='border-right'] { + border-color: var(--on-surface) !important; +} + +/* Content */ +[mtype='grid'] [id$='_columnstyling'] [style*='background-color'] { + background-color: var(--background) !important; +} + +[mtype='grid'] [id$='_content'] [style*='border-right'] { + border-color: var(--on-background) !important; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/concurrent_users/.*") { +body { + background: var(--background); +} + +.notification.is-warning { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); + border-radius: 5px; +} + +.notification.is-warning .icon { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/grid.*"), regexp("http(s)?://.*/tas/secure/[^assetmgmt].*?action=.*") { +/* + * Grids + */ + +/* + * The checkboxes are a dual colored image on top of a native checkbox. + * Unfortunately neither one can be recolored or styled effectively. + */ + +html, +body { + background: transparent; +} + +body[cardtype='grid'] { + background: var(--background); + color: var(--on-background); +} +body[cardtype='grid'] .header { + border-color: var(--on-surface); +} + +body[cardtype='grid'] .topbar .filter > a { + color: var(--primary); +} +body[cardtype='grid'] .topbar .filter > a:hover { + color: var(--primary-muted); +} +body[cardtype='grid'] .topbar .filter > a:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Grid buttons */ +body[cardtype='grid'] #actionbar .button { + --text-color: var(--on-background); + --filter: var(--on-background-filter); + + background: var(--background); + border-color: var(--on-background); + color: var(--text-color); + + margin-top: 4px; + height: 24px; + line-height: 24px; +} + +body[cardtype='grid'] #actionbar .menu-button > .chevron { + filter: var(--filter); +} + +body[cardtype='grid'] #actionbar .button:hover, +body[cardtype='grid'] #actionbar .button.menu-button.toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button:focus { + outline: 2px solid var(--primary) !important; + outline-offset: 2px; + isolation: isolate; +} + +body[cardtype='grid'] #actionbar .button:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred { + background: var(--primary); + border-color: var(--primary); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +body[cardtype='grid'] #actionbar #reload-grid-button, +body[cardtype='grid'] #actionbar .button.setup_button { + position: relative; +} + +body[cardtype='grid'] #actionbar #reload-grid-button::before, +body[cardtype='grid'] #actionbar .button.setup_button::before { + content: ''; + position: absolute; + filter: var(--filter); + top: 4px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* grid reload button */ +body[cardtype='grid'] #actionbar #reload-grid-button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath fill='%23757576' d='M14.9 6V0L13 1.9C9.8-.6 5.3-.4 2.4 2.5c-3.1 3.1-3.1 8.1 0 11.2 3.1 3.1 8.1 3.1 11.2 0 1.4-1.4 2.1-3.1 2.3-4.9h-2.7c-.1 1.1-.6 2.2-1.5 3-2.1 2.1-5.4 2.1-7.5 0-2.1-2.1-2.1-5.4 0-7.5 1.8-1.8 4.7-2 6.8-.6L8.9 6h6z'/%3E%3C/svg%3E"); + left: 8px; +} +/* grid setup button */ +body[cardtype='grid'] #actionbar .button.setup_button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M13.9 7.2l1.8-.7-1.1-2.8-1.8.7c-.3-.5-.7-.8-1.2-1.2l.7-1.8L9.6.3l-.8 1.8c-.5-.1-1.1-.1-1.6 0L6.4.3 3.6 1.4l.7 1.8c-.4.4-.8.8-1.1 1.2l-1.8-.8L.3 6.4l1.8.7c-.1.6-.1 1.2 0 1.7l-1.8.8 1.1 2.8 1.8-.7c.3.5.7.8 1.2 1.2l-.7 1.8 2.8 1.1.7-1.8c.5.1 1.1.1 1.7 0l.7 1.8 2.8-1.1-.7-1.8c.5-.3.8-.7 1.2-1.2l1.8.7 1.1-2.8-1.8-.7c0-.6 0-1.2-.1-1.7zm-4.7 3.6c-1.5.6-3.3-.1-3.9-1.6s.1-3.3 1.6-3.9c1.5-.6 3.3.1 3.9 1.6.6 1.5-.1 3.2-1.6 3.9z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* auto-refresh button enabled */ +/* Should have been a proper toggle button with aria-pressed="true" */ +body[cardtype='grid'] #actionbar .button.autorefresh-toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled::before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z'/%3E%3C/svg%3E"); + + margin-right: 8px; + margin-bottom: -3px; + + width: 16px; + height: 16px; + filter: var(--filter); + + display: inline-block; +} + +/* Grid menu */ +body[cardtype='grid'] .more-menu { + background: var(--surface); +} +body[cardtype='grid'] .more-menu .menu-item { + color: var(--on-surface); +} + +body[cardtype='grid'] .more-menu .menu-item:hover, +body[cardtype='grid'] .more-menu .menu-item:focus { + outline: none !important; + background: var(--on-surface); + color: var(--surface); +} + +/* grid container */ +body[cardtype='grid'] .stretchdiv { + background: var(--background); +} + +/* column headers */ +#headers .column { + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + + background: var(--surface); + color: var(--text-color); +} +#headers .column .ordericon { + filter: var(--filter); +} +/* column header separator */ +#headers .column .sizer #border { + background: var(--on-surface); +} +#headers .column.highlight { + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); + + background: var(--primary); +} +/* bottom bar */ +body[cardtype='grid'] .bottombar { + background: var(--surface); + color: var(--on-surface); +} +body[cardtype='grid'] .bottombar .currentpage { + color: var(--primary); +} +body[cardtype='grid'] .bottombar a { + color: var(--on-surface); +} + +/* data cells */ +div#columnsscroll { + background: var(--background); +} +div#columnsscroll .column span { + color: var(--text-color); +} +div#columnsscroll .column:is(#_status, #_changetypecolumn, #_typecolumn) span > .gridicon { + filter: var(--filter); +} +div#columnsscroll .column .normal, +div#columnsscroll .column .overduechanged, +div#columnsscroll .column .overduenew { + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +div#columnsscroll .column .overduealert { + /* Due today */ + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +div#columnsscroll .column .overduealarm { + /* Overdue */ + --text-color: var(--error); + --filter: var(--error-filter); +} +div#columnsscroll .column .archived { + --text-color: var(--primary); + --filter: var(--primary-filter); +} +/* highlight bar */ +div#columnsscroll div#selected.focus { + background: none; + border: 1px solid var(--primary); +} +div#columnsscroll div#selected.nofocus { + background: none; + border: 1px solid var(--on-background); +} +/* column separator */ +div#columnsscroll .column { + border-color: var(--on-background); +} + +/* details */ +#detailframediv .ui-resizable-handle { + filter: var(--on-background-filter); +} +#detailsbody .memocontainer { + color: var(--on-background); + border-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/agileboard/.*") { +::selection { + background: var(--selection); + color: var(--on-selection); +} + +body { + background: var(--background) !important; + + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +:is(h1, h2, h3, h4, h5, h6).title { + color: var(--text-color) !important; +} +div.title.is-5 { + /* Assign to "heading" in the 'Create note' popup */ + color: var(--text-color); +} + +p.label { + color: var(--text-color); +} +.choose-board label.filterlabel { + /* choose board select label */ + color: var(--text-color); +} + +a.has-text-link { + color: var(--primary) !important; +} +a.has-text-link:hover { + background: var(--on-background); + color: var(--background) !important; +} +a.has-text-link:focus { + outline: 2px solid var(--outline-color); + color: var(--primary) !important; +} + +#board-data-with-side-panel .resizable-container .resizer { + /* resize handle between board and sidebar */ + border-color: var(--on-background); +} + +/* + * Top row link buttons + */ +.filter-button > i.icon, +.filter-button > a, +.all-boards-button > i.icon, +.all-boards-button > a { + color: var(--text-color) !important; +} +.filter-button > a, +.all-boards-button > a { + outline: none; +} +.filter-button:hover, +.all-boards-button:hover { + --text-color: var(--primary); +} +.all-boards-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +.filter-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: -2px; +} + +.filter-header.active .filter-button { + background: var(--surface); + --text-color: var(--on-surface); +} +.filter-header.active .filter-button:hover { + --text-color: var(--primary); +} + +/* + * Filter bar + */ +.header .filter-bar { + background: var(--surface); +} +.header .filter-bar label { + color: var(--on-surface); +} +.toggle-button-group input[type='radio'] + .button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.toggle-button-group input[type='radio']:hover + .button { + background: var(--on-background); + color: var(--background); +} +.toggle-button-group input[type='radio']:active + .button { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked + .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked:hover + .button { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +.toggle-button-group input[type='radio']:focus + .button { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + z-index: 1; +} + +/* + * Button + */ +button.button, +button.calendar-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + border-color: var(--border-color) !important; + color: var(--text-color) !important; + + isolation: isolate; + + transition: none !important; +} +button.button:hover, +button.calendar-button:hover { + --bg-color: var(--on-background); + --text-color: var(--background); +} +button.button:active, +button.calendar-button:active { + --bg-color: var(--surface); + --text-color: var(--on-surface); + --border-color: var(--on-surface); +} +button.button:focus, +button.calendar-button:focus { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px !important; + box-shadow: none !important; +} +button.button .icon { + color: var(--text-color); +} + +button.button.is-primary { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +button.button.is-primary:hover { + --bg-color: var(--primary-muted); + --border-color: var(--primary-muted); +} +button.button.is-primary:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); +} + +button.button.is-primary[disabled], +button.button[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); + + pointer-events: none; +} + +button.is-primary.is-selected { + --bg-color: var(--on-background); + --text-color: var(--background); + --border-color: var(--on-background); +} + +/* assign to me button in Çreate note' popup */ +button.button.circle[disabled] { + background: var(--bg-color) !important; + border-color: var(--border-color) !important; +} + +/* + * Menu + */ +ul.button-submenu { + background: var(--surface); + color: var(--on-surface); +} +ul.button-submenu li { + --bg-color: var(--surface); + --color: var(--on-surface); + + background: var(--bg-color) !important; + color: var(--text-color) !important; +} +ul.button-submenu li:focus, +ul.button-submenu li:hover { + --bg-color: var(--on-surface); + --text-color: var(--surface); +} +ul.button-submenu li:focus { + outline: none; +} +ul.button-submenu li.item.divided { + border-top-color: var(--on-surface); +} + +/* + * Popup + */ +header.modal-card-head { + background: var(--surface); + border-color: var(--on-surface); + + --outline-color: var(--on-surface); + --text-color: var(--on-surface); +} +header.modal-card-head > .modal-card-title { + color: var(--text-color); +} +header.modal-card-head > button.delete { + background: var(--background); + border-color: var(--on-background); + + --color: var(--on-background); +} +header.modal-card-head > button.delete:hover { + background: var(--primary); + border-color: var(--primary); + + --color: var(--on-primary); +} +header.modal-card-head > button.delete:active { + background: var(--on-primary); + border-color: var(--primary); + + --color: var(--primary); +} +header.modal-card-head > button.delete:focus { + box-shadow: none; + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +header.modal-card-head > button.delete::before, +header.modal-card-head > button.delete::after, +header.modal-card-head > button.delete:active::before, +header.modal-card-head > button.delete:active::after, +header.modal-card-head > button.delete:hover::before, +header.modal-card-head > button.delete:hover::after { + background: var(--color); +} +section.modal-card-body { + background: var(--surface); + + --text-color: var(--on-surface); +} +footer.modal-card-foot { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); +} + +/* Help popup shortcuts */ +div.item.label { + color: var(--text-color); +} +div.item.label > span { + border-color: var(--on-background); + background: var(--background); + color: var(--on-background); +} + +/* + * Field + */ +.field .field-label label.label { + color: var(--text-color); +} + +.field.is-danger label.label { + color: var(--error); +} + +input.input, +textarea.textarea, +.select select { + --bg-color: var(--background); + --border-color: var(--on-background); + --text-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} + +input.input:invalid, +.select select:invalid, +.field.is-danger input.input { + --text-color: var(--error); + --border-color: var(--error); +} + +input.input:focus, +textarea.textarea:focus, +.select select:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; + box-shadow: none; +} + +input.input[disabled], +textarea.textarea[disabled], +.select select[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); +} + +.select select { + appearance: auto; +} + +input.is-checkradio + label { + --check-bg-color: var(--background); + --check-color: var(--on-background); + --check-border-color: var(--on-background); + + color: var(--text-color); + margin-left: 4px !important; /* making space for the outline */ +} +input.is-checkradio + label::before, +input.is-checkradio:checked + label::before { + background: var(--check-bg-color) !important; + border-color: var(--check-border-color) !important; + box-shadow: none !important; +} +input.is-checkradio + label::after { + border-color: var(--check-color) !important; +} +input.is-checkradio:focus + label::before { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px; +} +input.is-checkradio[type='checkbox']:hover:not([disabled]) + label::before, +input.is-checkradio[type='checkbox']:focus:not([disabled]) + label::before { + border-color: var(--check-border-color) !important; +} + +#provide-title { + /* making space for the outline of the provide title field in the create board popup */ + margin-top: 4px; +} + +/* + * Date picker + */ +#due-date-input .date-picker { + background: var(--surface); +} +#due-date-input .td-date-picker-container { + background: var(--surface); +} +#due-date-input .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-surface); +} +#due-date-input .td-date-picker-controls-container button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} +#due-date-input .td-date-picker-controls-container button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + box-shadow: none; +} +#due-date-input button.td-date-time-input-go-to-today { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input button.td-date-time-input-go-to-today:hover { + text-decoration: underline; +} +#due-date-input button.td-date-time-input-go-to-today:focus { + color: var(--primary); + text-decoration: underline; + outline: none; +} +#due-date-input table:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +#due-date-input th.td-date-picker-header-cell { + color: var(--on-surface); + background-color: var(--surface); +} +#due-date-input td.td-date-picker-cell { + border-color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label { + background: var(--background); + color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label.selectable:hover { + background-color: var(--primary-muted); + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.weekend { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.today { + color: var(--primary); + border-color: transparent !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected { + background: var(--primary) !important; + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.focused { + border-color: var(--primary) !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected.focused { + border-color: var(--on-primary) !important; +} + +/* + * Notification + */ +div.notification.is-primary { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +div.notification.is-primary .icon { + color: var(--on-background); +} +div.notification.is-danger { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--error); +} +div.notification.is-danger .icon { + color: var(--error); +} +div.notification.is-warning { + background: var(--background); + color: var(--on-background); + border: 2px solid var(--primary); +} +div.notification.is-warning .icon { + color: var(--primary); +} +div.notification.is-warning a.close { + color: var(--primary); +} +div.notification.is-warning a.close:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +div.notification.is-warning a.close:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * Board + */ + +.board .header { + background: transparent; +} +.board #lanes-headers { + background: transparent; +} +.board .lane-header { + background: var(--surface); +} +.board .lane-header .label { + color: var(--on-surface); +} +.board .lane-header .lane-task-count { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +.board .lane { + background: var(--surface); +} + +:is(.gu-unselectable, .board) .task-container { + --text-color: var(--on-background); + + background: var(--background); + border: 1px solid var(--on-background); + color: var(--text-color); +} +:is(.gu-unselectable, .board) + .task-container + div[handle='assignee-avatar-initials'] + > .vue-avatar--wrapper { + background-color: var(--background) !important; + border: 1px solid var(--on-background); + color: var(--on-background) !important; +} +:is(.gu-unselectable, .board) .task-container [handle='assignee-avatar']:focus { + outline: 1px solid var(--primary); +} + +:is(.gu-unselectable, .board) .task-container .is-black-link { + color: var(--text-color); +} +:is(.gu-unselectable, .board) .task-container .is-black-link:focus { + outline: none; + color: var(--primary); + text-decoration: underline; +} + +:is(.gu-unselectable, .board) .task-container .formatted-text { + color: var(--text-color); +} + +:is(.gu-unselectable, .board) .task-container .icon { + color: var(--text-color) !important; +} +:is(.gu-unselectable, .board) .task-container .overdue { + color: var(--error); +} + +:is(.gu-unselectable, .board) .task-container.selected { + background: var(--background); + border-color: var(--primary-muted); + + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container:focus, +:is(.gu-unselectable, .board) .task-container:focus-within { + background: var(--background); + border-color: var(--primary); + outline: none; + border-left-width: 8px; + + --text-color: var(--on-background); +} + +.board .task-container.closed:not(:focus):not(:focus-within):not(:hover) { + background: var(--disabled); + --text-color: var(--on-disabled); +} + +.board .task-container.closed:not(:focus):not(:focus-within):hover, +.gu-unselectable .task-container.closed { + background: var(--background); + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container .task-content.has-folded-corner::after { + border-color: var(--on-background) var(--surface); +} +:is(.gu-unselectable, .board) .task-container:focus .task-content.has-folded-corner::after, +:is(.gu-unselectable, .board) .task-container:focus-within .task-content.has-folded-corner::after { + border-color: var(--primary) var(--surface); +} + +.board .task-container.gu-transit { + background: var(--on-primary); + border-color: var(--primary); + --text-color: var(--primary); +} + +/* + * Sidebar + */ + +#side-panel { + background: var(--background); + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +#side-panel #side-panel-header span.card-header { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link:hover { + text-decoration: underline; +} +#side-panel #side-panel-header a.is-black-link:focus { + outline: none; + --text-color: var(--primary); + text-decoration: underline; +} +#side-panel #side-panel-header .icon { + color: var(--text-color) !important; +} +#side-panel #side-panel-header button.close-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); +} +#side-panel #side-panel-header button.close-button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#side-panel #side-panel-header button.close-button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#side-panel .parent-block { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); +} +#side-panel .parent-block .icon { + color: var(--text-color) !important; +} + +#side-panel .task-details .caller-name, +#side-panel .task-details .branch-name, +#side-panel .task-details .label, +#side-panel .content .label { + color: var(--text-color); +} +#side-panel .content .description-container { + --text-color: var(--on-background); + background: var(--background); + border: 1px solid var(--primary); +} +#side-panel .content .description-container::after { + border-color: var(--primary) var(--background); + bottom: -1px; + right: -1px; +} +#side-panel .content .description-container .creation-date, +#side-panel .content .description-container .description { + color: var(--text-color); +} + +#side-panel .progresstrail .pt-entry { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); + border-color: var(--on-surface); +} +#side-panel .progresstrail .pt-entry .pt-header, +#side-panel .progresstrail .pt-entry .pt-header .pt-date, +#side-panel .progresstrail .pt-entry a, +#side-panel .progresstrail .pt-entry .icon, +#side-panel .progresstrail .pt-entry figcaption, +#side-panel .progresstrail .pt-entry strong { + color: var(--text-color) !important; +} +#side-panel .progresstrail .pt-entry a:active { + --text-color: var(--primary); +} +#side-panel .progresstrail .pt-entry a:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +#side-panel .progresstrail .pt-entry.flagged { + --text-color: var(--on-primary); + background: var(--primary); +} +#side-panel .progresstrail .pt-entry.invisible { + border-left-color: var(--primary); +} + +/* + * Change assignee popup + */ +.change-assignee-popover:is(.positioned-above, .positioned-below) { + border-color: var(--primary); + background-color: var(--background); +} +.change-assignee-popover.positioned-above::before { + border-top-color: var(--primary) !important; +} +.change-assignee-popover.positioned-above::after { + border-top-color: var(--background) !important; +} +.change-assignee-popover.positioned-below::before { + border-bottom-color: var(--primary) !important; +} +.change-assignee-popover.positioned-below::after { + border-bottom-color: var(--background) !important; +} + +.change-assignee-popover-action-button { + --button-clr: var(--on-background); + color: var(--button-clr) !important; + background-color: transparent !important; + text-decoration: underline; +} + +.change-assignee-popover-action-button:not(:disabled):hover, +.change-assignee-popover-action-button:not(:disabled):focus-visible { + --button-clr: var(--primary); +} + +.change-assignee-popover-action-button:disabled { + --button-clr: var(--disabled); +} + +.change-assignee-popover-divider { + border-color: var(--on-background) !important; +} + +.change-assignee-popover .user-list .user-list-option:hover, +.change-assignee-popover .user-list .user-list-option:focus { + background-color: var(--primary); + --text-color: var(--on-primary); +} +.change-assignee-popover .user-list .user-list-option [handle='user-list-option-name'] { + color: var(--text-color); +} +@media (forced-colors: none) { + .change-assignee-popover .user-list .user-list-option:focus { + outline: none; + } +} + +/* + * Edit Board popup + */ +[role='dialog'] [role='tablist'] [role='tab'] a { + color: var(--on-background); + border-bottom-color: var(--on-background); +} +[role='dialog'] [role='tablist'] [role='tab'].is-active a { + color: var(--primary); + border-bottom-color: var(--primary); +} + +/* Integration switch */ +.status-mapping .mapping.checkbox { + background: transparent; + color: var(--on-surface); +} +.status-mapping .mapping.checkbox .toggle { + border: 2px solid var(--on-surface); + background: var(--background); +} +.status-mapping .mapping.checkbox .toggle .toggle-inner { + margin: 0; + border: 2px solid var(--on-background); + background-color: var(--background); +} +.status-mapping .mapping.checkbox .toggle.enabled .toggle-inner { + background-color: var(--on-background); +} + +/* labels */ +.dnd-hint, +.lane-name.label { + color: var(--on-surface); +} + +/* status mapper */ +.lanes .status, +.lanes .status.closed { + --text-color: var(--on-background); + + background-color: var(--background); + border: 2px solid var(--on-background); +} +.lanes .status .name { + color: var(--text-color); +} +.lanes .status:hover, +.lanes .status.closed:hover { + background-color: var(--on-background); + --text-color: var(--background); +} +.lanes .status + .status { + margin-top: 4px; +} + +/* status mapper drag and drop */ +.lanes .status.gu-transit { + background: var(--background) !important; + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone, +.lanes .lane.closed .lane-settings-content.lane-drop-zone { + background: var(--background) !important; +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.allowed.over { + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.notAllowed { + background: var(--disabled) !important; + border: 2px solid var(--background); +} + +/* + * Create note popup + */ +.modal-card-foot .feedback-link { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-buttons.*") { +/* + * Module Page Buttons + */ + +html, +body { + background: var(--surface); +} + +.richbutton { + border-color: var(--on-surface); + background: var(--background); + + overflow: auto; /* richbutton-image clips through the rounded corners of the border */ +} +.richbutton .richbutton-title, +.richbutton .richbutton-description { + color: var(--on-background); +} +.richbutton .richbutton-image { + background: var(--background); + color: var(--on-background); +} + +.richbutton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.richbutton:hover, +.richbutton:active { + border-color: var(--primary); +} +.richbutton:is(:hover, :active) .richbutton-title { + color: var(--primary); +} +.richbutton:is(:hover, :focus-visible) .richbutton-image { + background: var(--background); + color: var(--primary); +} + +.richbutton:active .richbutton-image { + background: var(--primary); + color: var(--on-primary); +} + +.richbutton .richbutton-new { + background: var(--primary); + color: var(--on-primary); +} + +@media (prefers-reduced-motion: no-preference) { + .richbutton .richbutton-image { + transition: transform; + transform-origin: center bottom; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + .richbutton:hover .richbutton-image { + transform: scale(1.1); + transition-duration: 0.15s; + transition-timing-function: ease-out; + } +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-migration-information.*") { +/* + * Module Page Migration + */ + +html, +body { + background: var(--surface); + color: var(--on-surface); +} + +a { + color: var(--primary); +} +a:hover { + color: var(--primary-muted); +} +a:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +button.button.is-primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} + +button.button.is-primary:focus { + color: var(--on-primary); +} +button.button.is-primary:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*") { +/* + * Asset overview + */ + +/* + * !! Ignoring keyboard focus, as the page is completely unworkable by keyboard. + */ + +*, +*::after { + box-shadow: none !important; +} +body { + background: var(--background); + color: var(--on-background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +input[type='text'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +input[type='text']:disabled { + background: var(--background); + color: var(--on-background); + border-color: var(--disabled); +} +label.checkboxButton { + --color: var(--on-background); + --bg: var(--background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; + transition: none !important; +} +label.checkboxButton > .icon.check { + color: var(--color) !important; +} +label.checkboxButton > span.label { + /* 'Range' checkbox label for a count filter */ + color: var(--color); +} +label.checkboxButton:hover { + --color: var(--primary); + --border-color: var(--primary); +} +.overview card-header > .title > .details { + color: var(--on-background); +} + +/* Share link */ +.share-link .shareLink span { + color: var(--on-background); + text-decoration: underline; +} +.share-link .shareLink i.tiny.icon:first-child { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.share-link .shareLink:hover span { + color: var(--primary); +} +.share-link .shareLink:hover i.tiny.icon:first-child { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} + +.share-link .popover .popover-popup { + border-color: var(--surface); +} +.share-link .popover .popover-popup::after { + border-color: var(--surface); +} +.share-link .popover .popover-popup .head, +.share-link .popover .popover-popup .content, +.share-link .popover .popover-popup .foot { + background: var(--surface); + border-color: var(--on-surface); + color: var(--on-surface); +} +.share-link .popover .popover-popup .head .icon { + color: var(--on-surface); +} +.share-link .popover .popover-popup .foot .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.share-link .popover .popover-popup .foot .button:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.share-link .popover .popover-popup .foot .button:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +/* New button */ +.ui.button.tdButton.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.ui.button.tdButton.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary.active { + /* menu open */ + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} + +.ui.button.tdButton.dropdown .menu.white { + border: none; + background: var(--surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input { + padding: 8px; + border-color: var(--on-surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input { + border: 1px solid transparent; +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input:focus { + border-color: var(--on-surface); +} + +.ui.button.tdButton.dropdown .menu.white .item { + color: var(--on-surface); + border-bottom: none; + padding: 8px 16px; + font-size: 0.875rem; + width: 150px; +} +.ui.button.tdButton.dropdown .menu.white .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.ui.button.tdButton.dropdown .menu.white .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Toolbar */ +card-header .toolbars .toolbar .split.buttons { + border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons :where(.tdButton, .tdActionButton, [role='button']) { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .refresh:before { + color: var(--color); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']).active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu { + border: none !important; +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu a.tdButton { + --bg: var(--surface); + --color: var(--on-surface); + + padding: 8px 16px; +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton[aria-disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton:hover:not([aria-disabled='true']) { + --bg: var(--on-surface); + --color: var(--surface); +} + +/* Toolbar 'columns' menu, filter panel 'add filter' menu, and filter panel 'context' menus */ +.dropdown-content.menu { + background: var(--surface); + color: var(--on-surface); + border: none; +} +.dropdown-content.menu::after { + /* Setting this to important so it also works for the add filter menu */ + border-top-color: var(--surface) !important; +} +.dropdown-content.menu .search { + border-color: var(--on-surface); +} +.dropdown-content.menu .search .icon { + color: var(--on-background); + right: 16px; +} +.dropdown-content.menu .search input { + height: initial; + padding: 8px; + border: 1px solid transparent; +} +.dropdown-content.menu .search input:focus { + border-color: var(--on-surface); +} +.dropdown-content.menu .header { + background: var(--background); + color: var(--on-background); + border-top: 4px solid var(--surface); +} +.dropdown-content.menu .footer { + border-color: var(--on-surface); +} +.dropdown-content.menu .item { + --filter: var(--on-surface-filter); + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; +} +.dropdown-content.menu .item .icon.small { + filter: var(--filter) !important; +} +.dropdown-content.menu .item label, +.dropdown-content.menu .item.is-active label, +.dropdown-content.menu .item .filter-header label { + /* Item label in add filter menu and filter context menu*/ + color: var(--color); +} +.dropdown-content.menu .item.selected, +.dropdown-content.menu .item.is-active { + --filter: var(--on-primary-filter); + --bg: var(--primary); + --color: var(--on-primary); +} +.dropdown-content.menu .item:hover { + --filter: var(--surface-filter); + --bg: var(--on-surface); + --color: var(--surface); +} +.dropdown-content.menu .item.disabled { + opacity: initial; + --bg: var(--disabled); + --color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} +.dropdown-content.menu .item [role='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} +.dropdown-content.menu .item [role='checkbox'] > .check { + color: var(--on-background); +} +.dropdown-content.menu .footer .tdActionButton.reset { + --bg: var(--surface); + --color: var(--primary); + padding: 8px; + text-decoration: underline; +} + +/* + * Filter panel + */ +asset-filter.panel { + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header { + border-color: var(--on-background); +} +asset-filter.panel > .header span { + color: var(--on-background); +} +asset-filter.panel .bordered { + border-color: var(--on-background); +} +asset-filter.panel .subheader { + color: var(--on-background); +} +asset-filter.panel .subheader .icon { + color: var(--on-background); +} +asset-filter.panel .filter-message { + color: var(--on-background); +} +/* Collapse/expand button */ +asset-filter.panel > .header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* Search */ +asset-filter.panel > .content .highlighted { + background: var(--primary); + border-bottom: 1px solid var(--on-background); +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input { + height: 2rem; + border-color: transparent; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input:focus { + outline: 2px solid var(--on-primary); + outline-offset: 2px; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch .icon { + color: var(--on-background); + display: flex; + align-items: center; +} + +/* Saved filters actions */ +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button { + background: var(--background); + color: var(--on-background); + transition: none !important; + text-shadow: none !important; +} +asset-filter.panel + .filter-overviews + .subheader + .icon-buttons + button.icon-button:not(:disabled):hover { + background: var(--on-background); + color: var(--background); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:active { + background: var(--surface); + color: var(--on-surface); + border: 1px solid var(--on-surface); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:disabled { + color: var(--disabled); +} +/* Saved filters action popups */ +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup { + background: var(--surface); + color: var(--on-surface); + border-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup::after { + border-top-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup + .foot { + background: var(--surface); + border-color: var(--on-surface); +} +/* Filter visibility dropdown */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown { + --color: var(--on-surface); + + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .icon { + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown:hover { + --color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu { + border: 1px solid var(--on-surface); + border-radius: 0; + + width: fit-content; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item { + background: var(--surface); + color: var(--on-surface); + + padding: 8px 16px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item.selected { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* Saved filters save action popup */ +asset-filter.panel .filter-overviews .save-view-component .popover .popover-popup input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier { + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a { + color: var(--primary); + text-decoration: underline; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a:hover { + color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + .icon { + color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + span { + color: var(--on-surface); +} +/* Saved filters save action save button */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary { + color: var(--on-primary); + background: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:hover { + color: var(--on-primary); + background: var(--primary-muted); + border-color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:active { + color: var(--primary); + background: var(--background); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button:disabled { + color: var(--on-disabled); + background: var(--disabled); + border-color: var(--on-disabled); +} +/* Saved filters delete popup delete button */ +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive { + color: var(--on-error); + background: var(--error); + border-color: var(--error); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:active { + color: var(--error); + background: var(--on-error); + border-color: var(--error); +} +/* Saved filters delete popup cancel button */ +asset-filter.panel .filter-overviews .delete-view-component .popover .popover-popup .foot button { + color: var(--on-background); + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:active { + color: var(--on-surface); + background: var(--surface); + border-color: var(--on-surface); +} +/* Saved filters list */ +asset-filter.panel .filter-overviews li { + --color: var(--on-background); + color: var(--color); +} +asset-filter.panel .filter-overviews li .icon.edited { + color: var(--color); +} +asset-filter.panel .filter-overviews li:hover { + --color: var(--background); + background: var(--on-background); +} +asset-filter.panel .filter-overviews li.selected { + --color: var(--on-primary); + background: var(--primary); +} + +/* Filter */ +asset-filter.panel .asset-filter-item .filter-header > :is(.icon, label, .filter-title) { + color: var(--on-background); +} +/* delete button/context menu button */ +asset-filter.panel .asset-filter-item .filter-header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:hover > .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:active > .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* add filter button */ +asset-filter.panel .actions .create.tdActionButton > .icon.add { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:hover > .icon.add { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:active > .icon.add { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel .actions .create.tdActionButton > .icon.chevron { + color: var(--on-background); +} +/* filter with buttons */ +asset-filter.panel .asset-filter-item .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + transition: none !important; +} +asset-filter.panel .asset-filter-item .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .tdButton:active { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel .asset-filter-item .tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +/* filter with select */ +asset-filter.panel .asset-filter-item [role='combobox'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text { + color: var(--on-background); + opacity: initial; +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.clickable:hover { + color: var(--primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.opened::after { + color: var(--on-surface); + border-color: var(--surface); + background: var(--surface); + opacity: initial; +} +/* filter with select menu */ +asset-filter.panel .asset-filter-item [role='combobox'] .menu { + background: var(--surface); + border-color: var(--surface); + --color: var(--on-surface); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item { + color: var(--color); + padding: 4px 2px; + border-color: transparent; +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item .icon { + color: var(--color); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +/* filter on date */ +asset-filter.panel .asset-filter-item .dateField > input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background) !important; +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu { + border-color: var(--surface); +} +/* filter on date ranges */ +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges { + background: var(--surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li { + color: var(--on-surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li.active { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li:hover { + background: var(--on-surface); + color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs { + background: var(--surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Filter on date custom range calendar */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Filter on date custom range calendar table */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} +/* filter field focus */ +asset-filter.panel .asset-filter-item .filter-content > input[type='text']:focus, +asset-filter.panel .asset-filter-item [role='combobox']:focus-within, +asset-filter.panel .asset-filter-item input[type='text'].numberField:focus, +asset-filter.panel .asset-filter-item .dateField > input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Types */ +asset-filter.panel .typeFilters li { + --color: var(--on-background); +} +asset-filter.panel .typeFilters li > span { + color: var(--color); +} +asset-filter.panel .typeFilters li:hover { + background: var(--on-background); + --color: var(--background); +} + +/* Grid */ +grid .overviewFooter { + margin-top: 1rem; + background: transparent; + border: none; +} +grid .overviewFooter p { + color: var(--on-background); +} +grid .pagination { + color: var(--on-background); + margin-bottom: 1rem; +} +grid .pagination .loadMore { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +grid .pagination .loadMore:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +grid .pagination .loadMore:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +grid .pagination p { + color: var(--on-background); +} +/*Grid table*/ +grid table.tdGrid { + border: none; +} +grid table.tdGrid thead { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: transparent; + + border-bottom: 1px solid var(--on-surface); +} +grid table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +grid table.tdGrid :is(th, td) { + background: var(--bg) !important; + color: var(--color) !important; + + border-left: none !important; +} +grid table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +grid table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +grid table.tdGrid th.check, +grid table.tdGrid tbody tr td.check { + vertical-align: top; + padding-top: 10px; +} +grid table.tdGrid tbody tr td { + vertical-align: top; + padding: 8px; +} +grid table.tdGrid tbody tr td .row-element { + align-items: flex-start; +} +grid table.tdGrid tbody tr td .row-element .icon { + color: var(--color); +} +grid table.tdGrid tbody tr td .row-element .icon.interruption { + color: var(--error) !important; +} +grid table.tdGrid tbody tr td .row-element p { + margin: 0; +} +grid table.tdGrid tbody tr td .row-element .details { + color: var(--color); +} +grid table.tdGrid [data-tooltip]::after { + /* tooltip */ + background: var(--surface); + color: var(--on-surface); +} + +/* Feedback button */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / Bulk action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction p, +.tdOverlay .body .instruction .icon { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* import popup */ +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton > .icon.expanded { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton:hover > .icon.expanded { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset + .body.upload + > .accordion + > .title + > .tdActionButton:active + > .icon.expanded { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > span { + color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .content ul li { + color: var(--on-surface) !important; +} +.tdOverlay.importAsset .body.upload > .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea.drag-over { + border-color: var(--primary); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* export popup */ +.tdOverlay.exportAsset > .body > .info > .icon.spreadsheet { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body > .info > p { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body .field + .field { + margin-top: 4px; +} + +.tdOverlay.exportAsset > .body .radio.checkbox { + display: flex; + align-items: center; + + --pip: var(--background); + --border-color: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox.checked { + --pip: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox:hover { + --pip: var(--primary); + --border-color: var(--primary); +} +.tdOverlay.exportAsset > .body input[type='radio'] { + appearance: none; + border: 1px solid var(--on-background); + border-radius: 50%; + height: 14px; + aspect-ratio: 1; + background: var(--background); + + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 3px var(--pip) !important; + border-color: var(--border-color); +} +.tdOverlay.exportAsset > .body input[type='radio']:checked { + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 7px var(--pip) !important; +} + +/* + * AM is transitioning to DS components, the styles needed to make that work live here. + */ + +/* Bulk edit button */ +bulk-edit-button { + background: transparent; /* Background of the container for the button, i.e. not the button itself */ + + --bulk-edit-button-background-color: transparent; /* background */ + --bulk-edit-button-text-color: var(--on-background); /* foreground */ + --bulk-edit-button-border-color: var(--on-background); /* border */ +} + +/* + * Feedback link, Copy of DS component feedback link + */ +feedback-link { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +feedback-link:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ + + /* --ds-color-bg-insight-emphasis: var(--on-background); :active background */ +} +feedback-link:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ +} +feedback-link:focus-within { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +overview-grid { + color: var(--on-background); /* Selection count */ + + /* + * Copy of design-system/search.css + */ + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ + + /* + * Copied and adjusted to fit from design-system/datatable.css + */ + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* --ds-color-fg-primary-subtle clashes with the pagination, so I can't use --on-background here as in the normal ds-datatable */ + --ds-color-bg-primary-emphasis: var(--primary); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + /* --ds-color-border-primary-default: var(--on-background); status loading (Clashes with search :focus & :hover styling) */ + --ds-color-border-warning-default: var(--error); /* status error */ + + /* + * Slotted content + */ + --ds-color-fg-primary-default: var(--on-background); /* table row:not(:checked) icon color */ + --ds-color-fg-primary-emphasis: var(--on-background); /* table row:checked icon color */ + + --ds-color-bg-danger-mild: var(--error); /* impacted tag background */ + --ds-color-fg-danger-emphasis: var(--on-error); /* impacted tag foreground */ + + /* To make the header and footer readable in older version of ds table. */ + --ds-color-bg-subtle: var(--background); + + /* + * Copy of design-system/pagination.css + */ + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground (clashes with checkmark in table) */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ + + /* Special variable for slotted links in the table */ + --overview-link-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/card.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/settings.*") { +*, +*::after, +*::before { + box-shadow: none !important; + transition: none !important; +} +body { + background: var(--background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +h1 { + color: var(--on-background); +} +.tdTab { + padding: 0 16px; /* Aligning content with header, and other cards in topdesk */ + z-index: 0; +} +i.loading::before { + border-color: var(--on-primary) !important; +} +i.loading::after { + border-color: var(--primary) !important; +} + +/* + * Card toolbar + */ +/* Warning message */ +card-header .toolbars .toolbar .warning.message { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} +card-header .toolbars .toolbar .warning.message a { + color: var(--primary); +} +card-header .toolbars .toolbar .warning.message a:hover { + background: var(--primary); + color: var(--on-primary); +} +/* Button container */ +card-header .toolbars .toolbar .split.buttons { + border: none; /* There's a weird space between the button and the border of the container */ + min-height: unset; /* Re-adjust the height */ +} +card-header .toolbars .toolbar .split.buttons .tdButton.iconed::before { + margin-top: 2px; /* Adjust the icons to sit in the center vertically */ +} +/* Buttons */ +card-header .toolbars { + /* + * Isolating the toolbars to their own layer. + * This keeps disabled buttons visible (they have z-index:-1) in the graphical overview. + * And the z-index: 1 makes sure the menus draw on top of the card content. + */ + z-index: 1; +} +card-header .toolbars .toolbar .tdButton, +card-header .toolbars .toolbar .dropdown[data-handle='more'] { + /* More button in template designer */ + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border: 1px solid var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .tdButton:not(:first-child) { + margin-left: -1px; /* Move adjacent button borders on top of eachother */ +} +card-header .toolbars .toolbar .tdButton:hover, +card-header .toolbars .toolbar .tdButton.dropdown.active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'].active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .tdButton:active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:active { + --bg: var(--background); + --color: var(--primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton:disabled, +card-header .toolbars .toolbar .tdButton.enabled.active /* View toggle */ { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); + z-index: -1; /* Prefer the border of non-disabled buttons */ +} +card-header .toolbars .toolbar .tdButton.iconed::before { + color: var(--color); +} +card-header .toolbars .toolbar .tdButton:focus-visible, +card-header .toolbars .toolbar .dropdown[data-handle='more']:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + z-index: 1; /* The outline should be on top of adjacent buttons */ +} +/* Dropdown menu */ +card-header .toolbars .toolbar .tdButton.dropdown .menu, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu { + border: none !important; + border-radius: unset; +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item { + border: none !important; + margin-left: unset; + padding: 8px 16px; + + --bg: var(--surface); + --color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item:hover, +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item.selected, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item.selected { + --bg: var(--on-surface); + --color: var(--surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item[disabled='true'], +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item[disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} + +/* +* General Widget things +*/ +.tdWidgetContainer { + border: none; +} +/* Error indicator. This just pops up in some places */ +.state.conflict.icon { + color: var(--error) !important; +} +/* title/toolbar */ +.tdWidgetContainer .toolbar { + background: var(--surface); + border: none; +} +.tdWidgetContainer .toolbar .editable-title { + color: var(--on-background); +} +.tdWidgetContainer .toolbar .toolbarSeparator { + background: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item:hover { + color: var(--primary); +} +.tdWidgetContainer .toolbar .items button.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer .toolbar .items button.item[disabled] { + background: var(--disabled); + color: var(--on-disabled); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown > :is(.icon, label) { + color: var(--text-color); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown { + --text-color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown:hover { + --text-color: var(--primary); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active { + background: var(--on-surface); + --text-color: var(--surface); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu { + background: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item.active:hover { + /* The .active class does not seem to have a purpose, but forces a background that is equal to normal hover nonetheless */ + background: var(--on-surface) !important; + color: var(--surface) !important; +} +/* Toolbar popout area */ +.tdWidgetContainer .workareas .workarea { + background: var(--surface); + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .body > .icon { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea :is(.fieldlabels, .message, h4) { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer { + border-color: var(--on-surface); + border-bottom: none; +} +/* Toolbar popout area buttons */ +.tdWidgetContainer .workareas .workarea .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:disabled { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* Inline dropdown, like selects but somehow different */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover + .chevron { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu { + background: var(--background); + border: 1px solid var(--on-background); + border-radius: 0px; + + left: unset; + right: unset; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item { + background: var(--background); + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item:hover { + background: var(--on-background); + color: var(--background); +} +/* Checkboxes, also slightly different then in widget content for some reason */ +.tdWidgetContainer .workareas .workarea .field .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton .check { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Empty widget */ +.tdWidgetContainer:not([data-handle='relationshipWidget']) .widget > .empty :is(.icon, span) { + /* see the relationship widget for the reason of the exception here */ + color: var(--on-background); +} + +/* + * Fields + */ +/* labels */ +.field .fieldlabels { + color: var(--on-background); +} +.field .fieldlabels.error { + color: var(--error); +} +/* text field */ +.field .fields.textField :where(input, textarea) { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.textField :where(input, textarea).error { + background: var(--background); + color: var(--error); + border-color: var(--error); +} +.field .fields.textField :where(input, textarea):focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* select */ +.field .fields.suggestField .selection { + --color: var(--on-background); + + background: var(--background); + color: var(--color); + border-color: var(--on-background); +} +.field .fields.suggestField .selection.error { + --color: var(--error); + + background: var(--background); + border-color: var(--error); +} +.field .fields.suggestField .selection .chevron { + color: var(--color); +} +.field .fields.suggestField .selection input { + color: var(--color); + outline: none; +} +.field .fields.suggestField .selection .text { + color: var(--color); + opacity: revert; +} +.field .fields.suggestField .selection .text.clickable::after { + color: var(--primary); + border-color: var(--primary); + opacity: revert; +} +.field .fields.suggestField .selection:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field .fields.suggestField .selection .menu { + border-radius: 0; + border: 1px solid var(--on-background); +} +.field .fields.suggestField .selection .menu .item { + --bg: var(--background); + --color: var(--on-background); + border: none; + + background: var(--bg); + color: var(--color); + padding: 8px; +} +.field .fields.suggestField .selection .menu .item .icon { + color: var(--color) !important; +} +.field .fields.suggestField .selection .menu .item.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +.field .fields.suggestField .selection .menu .item .inactive { + --color: var(--disabled); +} +.field .fields.suggestField .selection .menu .item:hover { + --bg: var(--on-background); + --color: var(--background); +} +.field .fields.suggestField .selection .menu .item > .overflow { + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.suggestField .selection .message { + background: var(--background); + color: var(--on-background); +} +.field .fields.suggestField .selection .placeholder { + color: var(--on-background); +} +/* Checkbox */ +.field .fields.checkboxField .checkboxButton { + --color: var(--on-background); + + background: var(--background); + border-color: var(--on-background); +} +.field .fields.checkboxField .checkboxButton.disabled { + --color: var(--on-disabled); + + background: var(--disabled); + border-color: var(--on-disabled); +} +.field .fields.checkboxField .checkboxButton.checked.disabled { + --color: var(--on-background); + + background: var(--background); + border-color: var(--background); +} +.field .fields.checkboxField .checkboxButton .check { + color: var(--color); +} +.field .fields.checkboxField .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Numberfield */ +.field .fields.numberField .inputWithDecorationContainer { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field .fields.numberField .inputWithDecorationContainer.error { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.numberField input { + background: var(--bg); + color: var(--color); + border-color: var(--border); +} +.field .fields.numberField :where(.pre, .post) { + color: var(--color) !important; +} +.field .fields.numberField input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Datetimefield */ +.field .fields.dateTimeField { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field[aria-invalid='true'] .fields.dateTimeField { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.dateTimeField :where(.dateField, .timeField) { + border: 1px solid var(--border); +} +.field .fields.dateTimeField input { + background: var(--bg); + color: var(--color); + border: none; +} +.field .fields.dateTimeField .timeField { + border-left: none; +} +.field .fields.dateTimeField .timeField .icon.time { + color: var(--color); +} +.field .fields.dateTimeField input::placeholder { + color: var(--color); +} +.field .fields.dateTimeField :where(.dateField, .timeField):focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* time field layout fix, i.e. place clock icon inside field */ +.field .fields.dateTimeField .dateField { + flex: revert; + flex-grow: 1; +} +.field .fields.dateTimeField .timeField { + flex: revert; + width: 9ch; + + display: flex; + flex-direction: row-reverse; +} +.field .fields.dateTimeField .timeField input { + padding-right: 3px; +} +.field .fields.dateTimeField .timeField .handle { + background: var(--bg); + display: flex; + align-items: center; + padding-left: 3px; +} +.field .fields.dateTimeField .timeField .handle .icon.time { + margin-top: 2px; + margin-right: -2px; +} +/* date field datepicker */ +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar { + background: var(--surface); + border-color: var(--surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * General widget + */ +/* collapsed ID and specification */ +.tdWidgetContainer[data-handle='generalWidget'] section > label { + color: var(--on-background) !important; +} +/* edit button */ +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand .icon { + background: var(--bg); + color: var(--pen); + border-color: var(--circle); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand { + --bg: var(--background); + --pen: var(--on-background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:hover { + --bg: var(--on-background); + --pen: var(--background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:active { + --bg: var(--surface); + --pen: var(--on-surface); + --circle: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* status display */ +.tdWidgetContainer[data-handle='generalWidget'] .status-display :is(.text, .icon, .status.label) { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu { + border-radius: 0; + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item { + background: var(--surface); + color: var(--on-surface); + padding: 8px 4px; + border: 2px solid var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item.selected { + background: var(--background); + color: var(--primary); + border-color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); + border-color: var(--on-surface); +} +/* status switch */ +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::after { + box-shadow: inset 0 0 0 2px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='generalWidget'] + .status-switch + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-icon: var(--background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted { + --thumb-bg: var(--error); + --thumb-icon: var(--on-error); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch[disabled='true'] { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--background); + --thumb-icon: var(--on-background); + --thumb-border: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted[disabled='true'] { + --thumb-icon: var(--error); + --thumb-border: var(--error); +} +/* asset icon */ +.tdWidgetContainer[data-handle='generalWidget'] .icon.assettype { + color: var(--on-background) !important; + border-color: var(--on-background) !important; /* separator */ +} + +/* + * History widget + */ +.tdWidgetContainer[data-handle='historyWidget'] .togglebuttons { + border-color: var(--on-background); +} +/* buttons */ +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* feed */ +.tdWidgetContainer[data-handle='historyWidget'] h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .feed .label .icon { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event:not(:last-of-type) { + margin-bottom: 16px; /* Spread each record a bit for readability */ +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .act { + /* If summary spills into multiple lines, subsequent lines get a little indent */ + text-indent: -8px; + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .description { + font-weight: normal; /* allow the user to "pop" */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .summary + :is(.user, .description, .date), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + :is(.fieldname, .decorator, .value), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .icon.small, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + .value.new, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .briefDescription + > span:last-of-type, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content { + line-height: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .content { + padding-top: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > * { + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > *:first-child { + padding-left: revert; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + text-decoration: underline; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a:hover { + color: var(--primary-muted); +} +/* pagination */ +.tdWidgetContainer[data-handle='historyWidget'] + .pagination + :is(.items-summary, .items-summary__number, p) { + color: var(--on-background); +} + +/* + * Relationship widget + * + * This widget can't be styled at the moment. The asset part of the widget uses a custom element with shadow DOM that + * can not (yet) be styled with Stylus (https://github.com/openstyles/stylus/issues/739). + * + * And for some reason the custom element root itself does not take a background color, so the whole widget must be + * reset to the original background color. + * + * Styling only the services part would then make the widget become disjointed. + */ +.tdWidgetContainer[data-handle='relationshipWidget'] .relationship.widget { + background: white; +} + +/* + * Assignment widget + */ +.tdWidgetContainer[data-handle='assignmentWidget'] h4 { + color: var(--on-background); +} +/* items */ +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* + * Dataset widget + */ +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead th { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td { + color: var(--color); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton .check { + color: var(--on-background); +} + +/* + * Documents widget + */ +/* File drop area */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea.drag-over { + color: var(--primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Files to upload */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item { + border-bottom: none; +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item > :is(.icon, .content) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* File upload progress */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress { + background: var(--background); + border: 1px solid var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress .bar { + background: repeating-linear-gradient( + -45deg, + var(--primary) 0px, + var(--primary) 16px, + var(--primary-muted) 16px, + var(--primary-muted) 32px + ); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress.error .bar { + background: var(--error) !important; +} +/* document list */ +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* +* Relationship grid widget +*/ +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode { + margin: 0; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header { + padding: 12px 16px; + background: var(--surface); + margin: 0; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header :is(.icon, h4) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid { + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead th { + padding: 12px 16px; + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody td { + padding: 6px 16px; + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .row-element + :is(.icon, .details) { + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton + .check { + color: var(--on-background); +} + +/* +* Reservations widget +*/ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .column + .column { + border-color: var(--on-background); +} +/* switch label */ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .row span { + color: var(--on-background); +} +/* switch control */ +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::after { + box-shadow: inset 0 0 0 1px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(12px); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle.disabled { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--disabled); + --thumb-border: var(--on-disabled); +} + +/* + * Graphical overview + */ +body .card.takeoverMode { + background: var(--background); +} +body .card.takeoverMode card-header { + background: none; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle { + stroke: unset; + fill: unset; +} +body .card.takeoverMode .graphicalOverview .nodes .node, +body .card.takeoverMode .graphicalOverview .nodes .node .action { + --bg: var(--background); + --icon: var(--on-background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:hover, +body .card.takeoverMode .graphicalOverview .nodes .node .action:hover { + --bg: var(--on-background); + --icon: var(--background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:active, +body .card.takeoverMode .graphicalOverview .nodes .node .action:active { + --bg: var(--surface); + --icon: var(--on-surface); + --border: var(--on-surface); +} +/* Node */ +body .card.takeoverMode .graphicalOverview .nodes .node circle.invisible { + fill: var(--bg); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.highlight { + fill: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.nodeborder { + fill: var(--bg); + stroke: var(--border); + stroke-width: 1px; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.selectable { + stroke: var(--primary); + stroke-width: 3px; +} +body + .card.takeoverMode + .graphicalOverview + .nodes + .node + circle.selectable:not([r='0']) + ~ circle.nodeborder { + --border: var(--background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.red { + stroke: var(--error); /* impacted node */ + fill: var(--bg); +} +/* Node action */ +body .card.takeoverMode .graphicalOverview .nodes .node .action circle { + fill: var(--bg); + stroke: var(--border); +} +/* icon */ +body .card.takeoverMode .graphicalOverview .nodes .node use { + fill: var(--icon); +} +/* Node label */ +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel rect { + fill: var(--surface); +} +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel text { + fill: var(--on-surface); +} +/* Edges */ +body .card.takeoverMode .graphicalOverview .edges path { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .paths text { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .arrowLabels textPath { + fill: var(--on-background); +} + +/* + * Graphical overview sidebar + */ +body .card.takeoverMode .cardPreview .header { + background: var(--surface); + border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header :is(.previewTitle, .previewSubTitle) { + color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close .icon { + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +body .card.mini .fieldset.widget .field .fieldlabels { + color: var(--on-background); +} + +/* + * Feedback button + */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction :is(p, .icon, h4) { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .instruction, +.tdOverlay.confirmArchive .fieldlabels { + color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/*************** + * DESIGN MODE * + ***************/ + +card-header .editable-title { + color: var(--on-background); +} + +/* + * card/widget title edit + */ +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input { + background: var(--background) !important; + color: var(--on-background) !important; + border-color: var(--on-background) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Drag handles + */ +.dragHandle .icon { + color: var(--color) !important; +} +.dragHandle:hover { + --color: var(--primary) !important; +} +/* Field drag handle */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .dragHandle { + --color: var(--on-background); +} + +/* Dragging widget background */ +.tdWidgetContainer.being-dragged.drag-element { + background: var(--background); +} +/* Dragging field background */ +.field.being-dragged { + background: var(--background); + border: 1px solid var(--primary); +} +/* Widget drop target */ +.drop-zone.drag-over::before { + border-color: var(--primary) !important; + background: var(--background) !important; +} +.drop-zone.drag-over::after { + background: var(--primary) !important; +} + +/* + * Toolbar + */ +/* Toolbar drag handle */ +.tdWidgetContainer .toolbar.designmode .dragHandle { + --color: var(--on-surface); +} +/* delete button */ +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] { + --color: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +/* Extra actions */ +.tdWidgetContainer .toolbar.designmode .dropdown.item { + --color: var(--on-surface); + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item.active { + --color: var(--surface); + background: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item { + background: var(--surface); + color: var(--on-surface); + + padding: 6px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item.disabled { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Layout toggle button + */ +card-header .toolbars .toolbar .split.buttons .tdButton.toggle.active { + /* Design mode layout toggle */ + background: var(--disabled) !important; + color: var(--on-disabled) !important; + border-color: var(--on-disabled) !important; + z-index: -1; /* Prefer the border of non-disabled buttons */ +} + +/* + * Mandatory toggle on fields + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + border-color: var(--border-color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory.active { + --bg: var(--background); + --color: var(--error); + --border-color: var(--error); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory::before { + color: var(--color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] + .fieldset.widget + .field + .toggle.mandatory:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Field selection + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field { + border: 1px solid transparent; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field.selectedForEditing { + background: var(--background); + border: 1px solid var(--primary); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:hover { + background: var(--background); + border: 1px solid var(--on-background); +} + +/* + * Grid widget + */ +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget .field.draggable { + --color: var(--on-surface); /* takes care of the drag-handle color as well */ + background: var(--surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable.drop-zone.drag-over { + box-shadow: -2px 0 0 var(--primary) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget .field label { + color: var(--color); +} + +/* + * Workarea + */ +/* Suggest field items */ +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon::before { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon:hover::before { + color: var(--primary); +} +/* Field id description */ +.tdWidgetContainer .workareas .workarea .fieldID .fields span:is(.label, .value) { + color: var(--on-surface); +} +/* Add/create field switch */ +.tdWidgetContainer .workareas .workarea .addcreate-switch > label { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch > label.active { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label { + background: var(--on-background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::before { + background: var(--background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::after { + background: var(--on-background) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer + .workareas + .workarea + .addcreate-switch + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +/* Inline field drop down field type icons */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text > .icon, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item > .icon { + color: var(--color); +} + +/* + * General widget + */ +/* General widget numbering example */ +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .autonumberExample + :is(.title, .example) { + color: var(--on-surface); +} +/* Change icon grid */ +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body p { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list { + background: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item { + --color: var(--on-surface); + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:focus { + outline: 2px solid var(--color); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .body + .list + .item + > :is(.content, .icon) { + color: var(--color) !important; +} + +/* + * Web widget + */ +/* Web widget insert url part dropdown */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton { + --icon-bg: var(--background); + --icon-fg: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-fg: var(--background); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:active { + --icon-bg: var(--surface); + --icon-fg: var(--on-surface); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + > .add.icon { + background: var(--icon-bg); + color: var(--icon-fg); + border-color: var(--icon-border); +} +/* Web widget insert url part dropdown menu*/ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu::after { + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + .search.icon, +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input::placeholder { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item { + background: var(--surface); + --color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item + :is(.icon, span) { + color: var(--color); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +/* Web widget warning message */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .status { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .icon { + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * Add widget buttons + */ +/* Add widget button */ +add-widget-dropdown .tdActionButton.inlineDropdown .button { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button .displayText { + color: var(--color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown.active .button { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +/* Add widget menu */ +add-widget-dropdown .tdActionButton.inlineDropdown .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu::after { + border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu { + margin-top: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu::after { + top: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu { + margin-bottom: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu::after { + bottom: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter .search.icon, +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input::placeholder { + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .header { + background: var(--background); + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item { + background: var(--surface); + color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item:hover { + background: var(--on-surface); + color: var(--surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item.selected { + background: var(--primary); + color: var(--on-primary); +} + +/********************* + * Template designer * + *********************/ +/* + * Sidebar + */ +settings-sidebar.panel { + background: var(--surface); + border-right: none; + border-left: 1px solid var(--on-surface); + padding: 0px 16px; +} +/* Header */ +settings-sidebar.panel .header span { + color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* Tabs */ +settings-sidebar.panel .tabs ul { + border-color: var(--on-surface) !important; +} +settings-sidebar.panel .tabs li { + --clr: var(--on-surface); + + border-color: var(--clr) !important; +} +settings-sidebar.panel .tabs a { + color: var(--clr) !important; +} +settings-sidebar.panel .tabs li.is-active { + --clr: var(--primary); +} +/* Actions footer */ +settings-sidebar.panel .actions.bordered { + border-color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton { + color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton:hover { + color: var(--primary); +} +/* Template list/ Field list / Link type list*/ +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li { + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; + + padding: 8px 16px; +} +settings-sidebar.panel .field-overview ul.selectable li .icon { + color: var(--color); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:hover { + --bg: var(--on-surface); + --color: var(--surface); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:focus-visible { + outline: 2px solid currentColor; + outline-offset: -4px; +} +settings-sidebar.panel .field-overview ul.selectable li .field-item.being-dragged { + background: var(--background); + color: var(--on-background); + outline-color: var(--primary); + + --color: var(--on-background); +} +/* Field search */ +settings-sidebar.panel .field-overview .search-bar input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + padding: 16px 8px; +} +settings-sidebar.panel .field-overview .search-bar .icon { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +settings-sidebar.panel .field-overview p.no-results { + color: var(--on-surface); +} +/* Create new template/ new link type */ +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton, +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} + +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton { + --icon-bg: var(--background); + --icon-color: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-color: var(--background); + --icon-border: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:active { + --icon-bg: var(--surface); + --icon-color: var(--on-surface); + --icon-border: var(--on-surface); + + color: var(--primary); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton > .icon { + background: var(--icon-bg); + color: var(--icon-color); + border-color: var(--icon-border); +} +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +/* + * Template designer placeholder + */ +.placeholderGfx .placeholder-stage { + background: none; +} +.placeholderGfx p { + color: var(--on-background); + font-style: normal; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} +.page-header { + --ds-color-bg-primary-default: var(--background); +} + +/* + * Asset list + */ +.asset-list { + --ds-color-fg-muted: var(--on-background); +} +.asset-list .ds-icon { + color: var(--on-background); +} +.asset-list a { + color: var(--primary); + text-decoration: underline; +} + +} +@-moz-document regexp("http(s)?://.*/services/active-user-overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +.active-user-overview .left.column strong { + color: var(--on-background); +} + +.active-user-overview .ds-icon.licensed-color { + color: var(--on-background); +} +.active-user-overview .ds-icon.online-color { + color: var(--primary); +} +.active-user-overview .ds-icon.offline-color { + border: 1px solid var(--on-background); + border-radius: 50%; + color: var(--background); /* icon background */ + background-color: var(--on-background); /* icon cross */ +} + +} +@-moz-document regexp("http(s)?://.*/services/user-group-linking-ui/.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); + + --ds-color-fg-primary-default: var(--on-background); /* links */ + --ds-color-fg-primary-emphasis: var(--on-background); /* empty group bullets */ + + --ds-color-bg-primary-mid: transparent; /* link:focus background */ + --ds-color-fg-primary-subtle: var(--on-background); /* link:focus color */ +} + +.overview__ki-list .title:focus-visible { + /* link outline is unfortunately removed entirely, have to reinstate */ + outline: 2px solid var(--on-background); + outline-offset: 4px; + border-radius: 4px; +} + +/* + * Expand/collapse group buttons (The primary styling does not work well here) + */ +.overview__ki-list .ds-button[variant='primary'] { + background-color: transparent; + color: var(--on-background); + border-color: transparent; +} + +.overview__ki-list .ds-button[variant='primary']:hover { + color: var(--on-primary); +} + +.overview__ki-list .ds-button[variant='primary']:active { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*"), regexp("http(s)?://.*/services/active-user-overview.*"), regexp("http(s)?://.*/services/user-group-linking-ui/.*"), regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +/* + * DS-Feedback-Link + * + * There are two versions: + * - .ds-feedback-link is fixed on the right side and expands on hover. + * - .ds-button[variant='insight'] is a button alternative for where the link does not work. + */ +.ds-feedback-link, +.ds-button[variant='insight'] { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +.ds-feedback-link:hover, +.ds-button[variant='insight']:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ +} +.ds-feedback-link:active, +.ds-button[variant='insight']:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ + --ds-color-border-insight-emphasis: var(--on-background); /* :active border (overridden by :focus for link variant) */ +} +.ds-feedback-link:focus-within, +.ds-button[variant='insight']:focus-visible { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +/* + * DS-Button (primary variant) + */ +.ds-button[variant='primary'] { + background-color: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ds-button[variant='primary']:hover { + box-shadow: none; + + background-color: var(--primary-muted); +} +.ds-button[variant='primary']:focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button[variant='primary']:active { + background-color: var(--background); + color: var(--primary); + border-color: var(--primary); + --outline-color: var(--primary); +} + +/* + * DS-Button (basic variant) + */ +.ds-button:not([variant]) { + background-color: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.ds-button:not([variant]):hover { + box-shadow: none; + background-color: var(--on-background); + color: var(--background); +} +.ds-button:not([variant]):focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button:not([variant]):active { + background-color: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * DS-Button (disabled) + */ +.ds-button[aria-disabled='true'] { + /* Undoing the evil 'opacity trick' */ + filter: none; + opacity: unset; + + background-color: var(--disabled); + color: var(--on-disabled); + border-color: var(--on-disabled); +} + +/* + * DS-Panel + */ +.ds-panel { + --ds-color-bg-subtle: var(--surface); /* header background */ + --ds-color-bg-default: var(--surface); /* content background */ + + color: var(--on-surface); + + --text-color: var(--on-surface); + --outline-color: var(--on-surface); + + /* header-content divider border color, has the same variable as the panel border color itself */ + border: none; + --ds-color-border-muted: var(--on-surface); +} + +/* + * DS-Select-Rich and DS-Combobox + */ +.ds-select-rich, +.ds-combobox { + --ds-color-field-label-fg: var(--text-color, var(--on-background)); /* label + helptext color */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-border: var(--on-background); /* field border */ + --ds-color-field-icon-fg: var(--on-background); /* chevron color */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + + /* focus colors */ + --ds-color-field-outline-inner: transparent; /* box-shadow color */ + --ds-color-field-outline-outer: var(--outline-color); /* border and outline */ + + /* dropdown colors */ + --ds-color-bg-default: var(--background); /* popup background */ + --ds-color-fg-default: var(--on-background); /* popup foreground */ + --ds-color-border-default: var(--on-background); /* popup border */ + + --ds-color-bg-primary-default: transparent; /* option:hover background */ + --ds-color-bg-primary-soft: transparent; /* option:checked background */ + --ds-color-border-primary-emphasis: var(--on-background); /* option:hover border */ + --ds-color-fg-primary-emphasis: var(--on-background); /* option:checked checkmark color */ +} + +.ds-select-rich:hover, +.ds-combobox:hover { + --ds-color-field-outline-outer: var(--primary); + --ds-color-field-icon-fg: var(--primary); + --ds-color-field-border: var(--primary); +} + +/* Error case */ +.ds-select-rich lion-select-invoker[aria-invalid='true'], +.ds-combobox[shows-feedback-for='error'] { + --ds-color-field-border: var(--error); + --ds-color-field-icon-fg: var(--error); + --ds-color-field-outline-inner: transparent; + --ds-color-field-outline-outer: var(--error); /* on focus */ +} +.ds-select-rich[shows-feedback-for='error'] lion-validation-feedback, +.ds-combobox[shows-feedback-for='error'] lion-validation-feedback { + --ds-color-field-fg: var(--error); + --ds-color-field-icon-fg: var(--error); +} +.ds-select-rich lion-select-invoker[aria-invalid='true'] { + --ds-color-field-fg: var(--error); + --ds-color-field-bg: var(--background); +} +.ds-combobox[shows-feedback-for='error']:hover, +.ds-select-rich:hover lion-select-invoker[aria-invalid='true'] { + --ds-color-field-outline-inner: var(--error); +} + +/* + * DS-Switch + */ +.ds-switch { + --ds-color-bg-primary-mid: var(--on-background); /* :checked track border */ + --ds-color-bg-primary-emphasis: var(--background); /* :checked track background */ + --ds-color-bg-primary-default: var(--on-background); /* :checked thumb background */ + --ds-color-fg-primary-default: var(--background); /* :checked thumb icon */ + + --ds-color-bg-muted: var(--background); /* :not(:checked) track background */ + --ds-color-bg-default: var(--on-background); /* :not(:checked) thumb background */ + --ds-color-fg-muted: var(--background); /* :not(:checked) thumb icon */ + + --ds-color-border-primary-emphasis: var(--on-background); /* :hover track border */ + + box-shadow: none; +} +.ds-switch lion-switch-button[aria-checked='false'] { + /* + * Border color in unchecked state uses same variable as the track background `--ds-color-bg-muted`. + * So to be able to differentiate the border from the background we need to override the border-color property on the track itself. + */ + border-color: var(--on-background); +} +.ds-switch lion-switch-button:hover { + box-shadow: 0 0 0 4px var(--on-background); +} +.ds-switch lion-switch-button:focus-visible { + box-shadow: none; + outline-color: var(--on-background); +} +.ds-switch label { + /* + * The label color uses the same variable as the unchecked thumb icon `--ds-color-fg-muted`. + * But the label needs to contrast with the background, and the thumb icon with the thumb background. + * Therefore we need to override the color of the label explicitly here. + */ + color: var(--text-color, var(--on-background)); +} + +.ds-data-table { + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* + * The DS adds color to the checkbox when it is checked, but this feels too "busy" in this context. + * Unfortunately there is no other way to indicate selected status, but neither has the old grid so it is not too bad. + * + * A bar on the left side would be nice, and that could be achieved with a linear-gradient except that the color is + * applied to `background-color` (and not `background`) which only allows solid colors. + */ + --ds-color-bg-primary-emphasis: var(--background); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-background); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + --ds-color-border-primary-default: var(--primary); /* status loading */ + --ds-color-border-warning-default: var(--error); /* status error */ +} + +/* + * links are commonly slotted into the datatable, their design/implementation is not fully consistent + */ +.ds-data-table > a { + color: var(--primary); + text-decoration: underline; +} +.ds-data-table > a:hover { + text-decoration-color: var(--primary); +} +.ds-data-table > a:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + border-radius: 4px; + + text-decoration-color: var(--primary); + box-shadow: none; + background-color: unset; +} + +.ds-pagination { + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + /* background-color is set to transparent in the component so can't be changed. (only in default state) */ + /* border-color is set to transparent in the component, so can't be changed. (all states except :hover and :focus) */ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ +} + +.ds-search-form { + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ +} + +.ds-modal-content { + --outline-color: var(--on-surface); + --text-color: var(--on-surface); + + --ds-color-bg-default: var(--surface); /* Modal background */ + --ds-color-fg-default: var(--text-color); /* Modal foreground */ + + --ds-color-fg-muted: var(--on-surface); /* Close button */ + --ds-color-bg-primary-soft: transparent; /* Close button:hover & :focus box-shadow */ + --ds-color-border-primary-emphasis: var(--on-surface); /* Close button:hover & :focus border & outline */ +} + +} \ No newline at end of file diff --git a/docs/themes/topdesk-operator-recoloring.user.css b/docs/themes/topdesk-operator-recoloring.user.css new file mode 100644 index 0000000..1bf0389 --- /dev/null +++ b/docs/themes/topdesk-operator-recoloring.user.css @@ -0,0 +1,9461 @@ + +/* ==UserStyle== +@name Default Dark (TOPdesk Operator Recoloring) +@namespace github.com/topdesk/topdesk-operator-recoloring +@version 3.0.0 +@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 +@updateURL https://topdesk.github.io/operator-recoloring/themes/topdesk-operator-recoloring.default_dark.user.css +@license MIT +@preprocessor default + +@var color background "Background" #0c0c0c +@var text background-filter "Background filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(91%) +@var color on-background "On background" #fcfcfc +@var text on-background-filter "On background filter" brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(178deg) brightness(129%) contrast(98%) +@var color selection "Selection" rgba(252, 252, 252, 0.99) +@var color on-selection "On selection" #0c0c0c +@var color surface "Surface" #404040 +@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" #fcfcfc +@var text on-surface-filter "On surface filter" brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(178deg) brightness(129%) contrast(98%) +@var color disabled "Disabled" #404040 +@var text disabled-filter "Disabled filter" brightness(0) saturate(100%) invert(19%) sepia(0%) saturate(1%) hue-rotate(180deg) brightness(102%) contrast(82%) +@var color on-disabled "On disabled" #8c8c8c +@var text on-disabled-filter "On disabled filter" brightness(0) saturate(100%) invert(62%) sepia(0%) saturate(407%) hue-rotate(172deg) brightness(89%) contrast(89%) +@var color primary "Primary" #eda911 +@var text primary-filter "Primary filter" brightness(0) saturate(100%) invert(71%) sepia(67%) saturate(1479%) hue-rotate(354deg) brightness(97%) contrast(92%) +@var color primary-muted "Primary muted" #d5970e +@var text primary-muted-filter "Primary muted filter" brightness(0) saturate(100%) invert(66%) sepia(52%) saturate(3051%) hue-rotate(7deg) brightness(95%) contrast(89%) +@var color on-primary "On primary" #0c0c0c +@var text on-primary-filter "On primary filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(91%) +@var color error "Error" #FF0070 +@var text error-filter "Error filter" brightness(0) saturate(100%) invert(16%) sepia(54%) saturate(7483%) hue-rotate(326deg) brightness(100%) contrast(109%) +@var color on-error "On error" #0c0c0c +@var text on-error-filter "On error filter" brightness(0) saturate(100%) invert(0%) sepia(11%) saturate(1945%) hue-rotate(61deg) brightness(105%) contrast(91%) +==/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); +} + +.remembercheckbox input[type='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} + +.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); +} + +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); + 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); + + --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); + + --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-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[mtype='button'][guielement='preferred_button']:active, +[mtype='button'][mstyles~='default-button']:active, +[guielement='toolbar_button'][mstyles~='blue']:active, +[guielement='toolbar_button'][mstyles~='orange']:active, +body.popup .divpopupcontainer .divpopupclientarea button.primary:active, +.suggestionsWidget .suggestionsWidget-searchButton:active, +div#checklist .button.is-primary:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +/* Disabled button */ +[mtype='button'][disabled='true'], +[mtype='button'][disabled='true']:hover, +[guielement='toolbar_button'][disabled='true'], +[guielement='toolbar_button'][disabled='true']:hover, +div#checklist .button[disabled], +div#checklist .button[disabled]:hover { + background: var(--disabled); + border-color: var(--on-disabled); + + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); + + pointer-events: none; +} + +/* Tab bar */ +[mstyles~='header_bar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[mstyles~='header_bar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* Quicklaunch buttons */ +div[mtype='group'][mstyles~='ql-button'] { + background: transparent; + --filter: var(--on-surface-filter); + outline-offset: -2px !important; +} +div[mtype='group'][mstyles~='ql-button'] > input, +div[mtype='group'][mstyles~='ql-button'] > input + div[mtype='label'] { + filter: var(--filter); + background: transparent !important; +} + +div[mtype='group'][mstyles~='ql-button']:hover, +div[mtype='group'][mstyles~='ql-button']:focus { + --filter: var(--primary-filter); +} + +div[mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +/* topdesk menu button */ +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:hover, +div[handle='topdesk_menu'][mstyles~='ql-button']:focus { + background: var(--primary-muted); +} + +div[handle='topdesk_menu'][mtype='group'][mstyles~='ql-button']:active { + background: var(--background); + --filter: var(--primary-filter); +} + +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.expand'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:hover + > input, +div[handle='windowmanagement.quicklaunch.collapse'][mtype='group'][mstyles~='ql-button']:focus + > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button'] > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:hover > input, +div[handle='menu_action_edit'][mtype='group'][mstyles~='ql-button']:focus > input { + /* These are non-transparent action buttons */ + filter: none; +} + +button#notifications-icon { + /* iframe is too tiny to show the normal outline */ + outline-offset: -2px !important; +} + +button#notifications-icon::before { + content: ''; + background: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + filter: var(--on-surface-filter); +} +button#notifications-icon:hover::before { + filter: var(--primary-filter); +} + +span#unread-notification-count { + background: var(--primary); + color: var(--on-primary); + border: 1px solid var(--surface); +} + +/* Buttons with a background image */ +.suggestionsWidget .suggestionsWidget-searchButton, +.suggestionsWidget .suggestionsWidget-toggleButton, +.suggestionsWidget .suggestionsWidget-newKIButton, +.suggestionsWidget .help-button { + position: relative; +} +.suggestionsWidget .suggestionsWidget-searchButton:before, +.suggestionsWidget .suggestionsWidget-toggleButton:before, +.suggestionsWidget .suggestionsWidget-newKIButton:before, +.suggestionsWidget .help-button:before { + content: ''; + position: absolute; + filter: var(--filter); + top: 7px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* Knowledge base popup search button */ +.suggestionsWidget .suggestionsWidget-searchButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M15.9 14.2L12 10.3c.6-.9 1-2.1 1-3.3 0-3.3-2.7-6-6-6S1 3.7 1 7s2.7 6 6 6c1.2 0 2.3-.4 3.2-.9l3.9 3.9 1.8-1.8zM3 7c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* Knowledge base popup toggle button */ +.suggestionsWidget .suggestionsWidget-toggleButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M10.5 11.5L6.9 8l3.6-3.5 1 1L9.1 8l2.4 2.5z'/%3E%3Cpath d='M6.5 11.5L2.9 8l3.6-3.5 1 1L5.1 8l2.4 2.5z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* Knowledge base popup create item button */ +.suggestionsWidget .suggestionsWidget-newKIButton:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M2.5 13H13v1H2.5z'/%3E%3Cpath d='M15 4h-2V1c0-.6-.4-1-1-1H3C1.3 0 0 1.3 0 3v10c0 1.7 1.3 3 3 3h10v-1H2.5c-.8 0-1.5-.7-1.5-1.5S1.7 12 2.5 12H12c.6 0 1-.4 1-1V8h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1zm0 3h-3v3h-2V7H7V5h3V2h2v3h3v2z'/%3E%3C/svg%3E"); + left: 8px; +} + +/* Knowledge base popup help button */ +.suggestionsWidget .help-button:before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M4.8 5.5c0-.4.1-.8.4-1.2.3-.4.6-.8 1.1-1 .5-.3 1.1-.4 1.8-.4.6 0 1.2.1 1.6.3.5.2.8.5 1.1.9.2.4.4.9.4 1.3s-.1.7-.2.9c-.1.3-.3.5-.5.7s-.6.5-1.1 1l-.4.4c-.1.1-.1.2-.2.3 0 .1-.1.2-.1.2 0 .1-.1.2-.1.4-.1.5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.1-.2-.2-.4-.2-.7 0-.4.1-.7.2-.9.1-.2.2-.5.4-.7l.7-.7c.3-.2.5-.4.6-.5s.2-.3.3-.4.1-.3.1-.5c0-.3-.1-.6-.4-.9-.3-.2-.6-.3-1-.3-.5 0-.8.1-1 .4-.2.2-.4.6-.6 1 0 .5-.3.7-.7.7-.2 0-.4-.1-.6-.2-.2-.2-.3-.4-.3-.6zM8 12.9c-.3 0-.5-.1-.7-.2-.2-.2-.3-.4-.3-.7s.1-.5.3-.7c.2-.2.4-.3.7-.3s.5.1.7.3.3.4.3.7-.1.5-.3.7-.4.2-.7.2z'/%3E%3C/svg%3E"); + left: -1px; + top: -1px; +} + +/* + * General styles + */ +html, +body { + background: transparent; +} + +/* Generic focus style */ +*:focus { + z-index: 1000 !important; + outline: 2px solid var(--on-background) !important; + outline-offset: 2px !important; +} + +/* focus fix for combobox dropdown */ +input[type='text'][mtype='combobox']:focus { + z-index: 0 !important; +} + +/* Tab bar and Quicklaunch */ +[mstyles~='header_bar'], +[handle='quicklaunch_bar_settings_area'], +[handle='quicklaunch_bar_buttons_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Page */ +[guielement='toplevelwindow'], +[mstyles='left_side'] { + background: var(--background); + --text-color: var(--on-background); +} + +body > div[guielement='toplevelwindow'] > div[style*='background-color'] { + /* Sent emails set background in their style attribute */ + background: transparent !important; +} + +/* Text */ +[mtype='label'], +[mtype='rtlabel'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--text-color); +} +[mtype='label'][mstyles~='error'], +[mtype='rtlabel'][mstyles~='error'] { + /* + * --text-color should be adjusted whenever the background changes, + * to ensure the contained labels receive the correct color. + */ + color: var(--error); +} + +::selection { + background: var(--selection); + color: var(--on-selection); +} + +/* Link */ +a, +[guielement='hyperlink'], +[mtype='label'][mstyles~='link_label'] { + color: var(--primary); +} +a:hover, +[guielement='hyperlink']:hover, +[mtype='label'][mstyles~='link_label']:hover { + color: var(--primary-muted); +} + +/* Tooltip */ +#infoboxdiv { + background: var(--surface); + color: var(--on-surface); +} +/* Bubble tooltips */ +[guielement='infobubble-bubble'] { + background: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='south'] { + border-top-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='east'] { + border-left-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='west'] { + border-right-color: var(--surface); +} +[guielement='infobubble-tail'][mstyles~='north'] { + border-bottom-color: var(--surface); +} +[guielement='infobubble-bubble'] [mstyles~='infobubble-message'] { + color: var(--on-surface); +} + +/* Popup */ +[guielement='subwindow'] > img:only-child { + /* The pointer triangle used in some popups */ + filter: var(--on-background-filter); +} + +[guielement='popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='popup-header'] { + border-color: var(--on-surface); +} +[guielement='popup-body'] [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] { + background: transparent; + color: var(--text-color); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +[guielement='popup-body'] + [mstyles~='memo_readonly_area'][mstyles~='popup-body-content'] + [mtype='label'][mstyles~='selected'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='popup-footer'] { + background: var(--surface); + border-color: var(--on-surface); +} +/* HTML style popup */ +body.popup .divpopupcontainer { + background: var(--surface); + color: var(--on-surface); + --text-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader { + border-color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupheader .divpopuptitle { + color: var(--on-surface); +} +body.popup .divpopupcontainer .divpopupclientarea { + background: transparent; +} +body.popup .divpopupcontainer .divpopupclientarea .buttons, +body.popup .divpopupcontainer .divpopupclientarea .grid-settings-popup-buttons { + background: transparent; + border-color: var(--on-surface); +} + +/* stamp popup */ +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button[onclick^='MacroPopup']:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +body.popup .divpopupcontainer .fields .button.disabledButton { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Datepicker + */ +[guielement='calendar-grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='calendar-grid'] [guielement='calendar-cell'] [guielement='calendar-cell-label'] { + color: var(--text-color); +} +/* non-working day cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-non-working-day'] { + background: var(--surface); + --text-color: var(--on-surface); +} +/* Special style for 'today' to aid orientation */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-today'] { + --text-color: var(--primary); + border-color: transparent; +} +/* currently selected cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} +/* 'focused' cell */ +[guielement='calendar-grid'] [guielement='calendar-cell'][mstyles~='cal-highlighted'] { + border-color: var(--primary); +} +[guielement='calendar-grid'] + [guielement='calendar-cell'][mstyles~='cal-selected'][mstyles~='cal-highlighted'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + border-color: var(--on-primary); +} +/* 'go to today' button */ +[guielement='datepicker-today'] { + background: transparent; + color: var(--primary); +} +[guielement='datepicker-today']:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Loading screen */ +[guielement='toplevelwindow'] > [mstyles~='content_area'] { + background-color: var(--background); +} + +body[style*='background-color: #ffffff'] { + background-color: var(--background) !important; +} + +#busy_message_area { + background-color: var(--surface); + padding: 36px; +} +#busy_message_area > #busy_message_image { + display: none !important; +} +#busy_message_area > #busymessage { + color: var(--on-surface); +} + +#busy_message_area::before { + content: ''; + display: block; + width: 60px; + height: 60px; + margin: 0 auto 12px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 58%, + var(--on-surface) 60% + ); + + animation-name: pulse; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: 0.2s; +} + +#busy_message_area::after { + content: ''; + display: block; + width: 46px; + height: 46px; + margin: -80px auto 24px; + border-radius: 50%; + + background: radial-gradient( + circle at center, + transparent 0%, + transparent 55%, + var(--on-surface) 57% + ); + + animation-name: pulse; + animation-duration: 2.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-delay: -1.5s; +} + +@keyframes pulse { + from { + opacity: 1; + } + to { + opacity: 0.2; + } +} + +@media (prefers-reduced-motion: no-preference) { + #busy_message_area::before { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 58%, + transparent 60% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-large; + animation-duration: 4s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: 0s; + } + + #busy_message_area::after { + background: radial-gradient( + circle at center, + var(--surface) 0%, + var(--surface) 55%, + transparent 57% + ), + conic-gradient( + transparent 22.5deg, + var(--on-surface) 22.8deg, + var(--on-surface) 337.2deg, + transparent 337.5deg + ); + + animation-name: spin-small; + animation-duration: 3.5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; + animation-direction: normal; + animation-delay: -0.5s; + } + + @keyframes spin-large { + from { + rotate: 0deg; + } + to { + rotate: 720deg; + } + } + + @keyframes spin-small { + from { + rotate: 0deg; + } + to { + rotate: 1440deg; + } + } +} + +/* + * Tab + */ + +/* Default */ +[guielement='window_tab'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='window_tab'] [guielement='icon'], +[guielement='window_tab'] [guielement='icon-button'] { + filter: var(--filter); +} +/* Status icon (dual color, can't be recolored) */ +[guielement='window_tab'] [guielement='icon']:nth-of-type(2) { + filter: none; +} + +/* Current */ +[guielement='window_tab'][mstyles~='active'] { + background: var(--background); + border-bottom-color: var(--background); + border-top: 3px solid var(--primary); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +/* +* Card tab +*/ + +/* Current */ +[role='tablist'] [role='tab'][aria-selected='true'], +[role='tablist'] [role='tab'][aria-selected='true'] * { + border-bottom-color: var(--primary); + color: var(--primary); +} + +/* HTML style tabs */ +.subtabscontainer .subtabcaptions .tabcaption { + border-color: var(--text-color) !important; +} +.subtabscontainer .subtabcaptions .tabcaption a { + color: var(--text-color); +} +.subtabscontainer .subtabcaptions .tabcaption.active { + --text-color: var(--primary); +} + +/* + * Menu + */ +[guielement='topdesk-menu'], +[guielement='topdesk-submenu'], +[guielement='toolbar_menu'], +div#checklist div.menu { + background: var(--surface); +} +[guielement='topdesk-submenu'] { + border-left-color: var(--on-surface); +} + +/* Default */ +[guielement='topdesk-menu-item'], +[guielement='toolbar_menu_button'], +div#checklist div.menu [role='button'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='topdesk-menu-item'] *, +[guielement='toolbar_menu_button'] * { + background: transparent; +} +[guielement='topdesk-menu-item'] [guielement='topdesk-menu-icon'], +[guielement='toolbar_menu_button'] [mtype='imagebutton'] { + filter: var(--filter); +} + +div#checklist div.menu [role='button'] { + color: var(--text-color); +} + +/* Hover */ +[guielement='topdesk-menu-item']:hover, +[guielement='toolbar_menu_button']:hover, +div#checklist div.menu [role='button']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Focus */ +[guielement='topdesk-menu-item']:focus, +[guielement='toolbar_menu_button']:focus, +div#checklist div.menu [role='button']:focus { + outline: none !important; + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Disabled */ +[guielement='topdesk-menu-item'][disabled='true'], +[guielement='toolbar_menu_button'][disabled='true'], +div#checklist div.menu [role='button'][aria-disabled='true'] { + background: var(--disabled); + --text-color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} + +/* Separators */ +[guielement='topdesk-menu-separator'], +[guielement='toolbar_menu_group'], +div#checklist div.menu li .separator { + border-color: var(--on-surface); +} + +/* Selected item */ +[guielement='topdesk-menu-item'][mstyles~='topdesk-menu-item-active'] { + border-left-color: var(--primary); +} + +/* Suppressing focus style on menu after click on Menu button */ +[guielement='toolbar_menu'] > [mtype='group']:focus { + outline: none !important; +} + +/* + * Action / Request + */ + +/* + * Request + */ +[guielement='pt-request-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-request-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-request-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged request entries */ +[guielement='pt-request-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-request-container'] [mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +/* Collapsed flagged entry fade-out */ +[guielement='pt-request-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--primary)) !important; +} + +/* Links */ +[guielement="pt-request-container"] div[rt] a, +[guielement="pt-request-container"] a /* Support for versions before october 2020 */ { + color: var(--primary); +} + +/* Speech bubble tail */ +[guielement='pt-request-pointer'] { + border-right-color: var(--surface); +} + +/* Expand/Collapse buttons */ +[guielement='pt-request-container'] [guielement='crt-button-expand'], +[guielement='pt-request-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* +* Action +*/ +[guielement='pt-trail-container'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='pt-trail'], +[guielement='pt-trail-container'] [guielement='pt-mail'], +[guielement='pt-trail-container'] [guielement='pt-attachment'], +[guielement='pt-trail-container'] [guielement='pt-memo'] { + background: transparent; + border-top-color: var(--on-surface); +} +/* Collapsed entry fade-out */ +[guielement='pt-trail-container'] [handle='crt-gradient'] { + background-image: linear-gradient(transparent, var(--surface)) !important; +} + +/* Flagged action entries */ +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='pt-trail-container'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} +[guielement="pt-trail-container"] div[rt] a, +[guielement="pt-trail-container"] a, /* Support for versions before october 2020 */ +[guielement="pt-trail-container"] [guielement="pt-linkbutton"] { + color: var(--primary); +} + +/* Collapsed flagged entry fade-out */ +[guielement='pt-trail-container'] [mstyles~='pt-flagged'][handle='crt-gradient'] { + background-image: linear-gradient(transparent, #eda911) !important; +} + +/* Action entry filter button */ +[mtype='button'][guielement='pt-channel-button'] { + color: var(--primary); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:hover { + color: var(--primary-muted); + background: transparent; +} +[mtype='button'][guielement='pt-channel-button']:active { + color: var(--background); + background: var(--primary); +} + +/* Expand/Collapse buttons */ +[guielement='pt-trail-container'] [guielement='crt-button-expand'], +[guielement='pt-trail-container'] [guielement='crt-button-collapse'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} + +/* Mail and attachment entry icons (only present in Action) */ +[guielement='pt-mail'] img[guielement='icon'], +[guielement='pt-attachment'] img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Invisible for caller */ +[guielement='pt-trail-container'] [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +/* +* Rich text +*/ + +/* edit area */ +[guielement='pt-richtextarea'] { + background: var(--background); + border-color: var(--on-background); +} +body[contenteditable='true'] { + color: var(--on-background) !important; +} +[guielement='pt-memo-editable'], +[guielement='pt-attachment-editable'] { + background: transparent; +} +[guielement='pt-attachment-editable'] > [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* toolbar buttons, the image gets washed out in toggled state :-( */ +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:hover, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton']:active, +[guielement='pt-richtextbuttonbar'] [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='pt-richtextbuttonbar'] [guielement='imagebutton'][disabled='true'], +[guielement='pt-richtextbuttonbar'] [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* stamp popup */ +[guielement='memo'] { + background: var(--background); + --text-color: var(--on-background); +} + +/* While loading in */ +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] { + background-color: var(--surface) !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true'] > [guielement='image'] { + /* image doesn't color, and is more distracting than useful */ + display: none !important; +} +[handle='progress_trail_loading'] > [mtype='group'][disabled='true']::before { + content: ''; + position: absolute; + inset: 0; + background: white; + + animation-name: pulse-feed; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes pulse-feed { + from { + opacity: 0; + } + to { + opacity: 0.2; + } +} + +/* + * Home, Module, and Dashboard pages + */ + +/* Can't recolor the background of the banner, so need to force the color of the text to make sure it remains visible */ +[handle='ie11campaign.banner.application_manager.description'], +[handle='ie11campaign.banner.application_manager.description'] + [mtype='group'] a { + color: black; +} + +[guielement='widget'] { + border-color: transparent; +} +[guielement='widget_header'], +[guielement='widget_content_area'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='widget_content_area'] { + border-color: var(--on-surface); +} +[guielement='widget_content_area'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Main pages widget / Tile widgets */ +[guielement^='widget_page_image_button'] { + background: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement^='widget_page_image_button']:hover { + background: var(--primary-muted); +} +[guielement^='widget_page_image_button']:active { + background: var(--background); + border: 1px solid var(--primary); + --filter: var(--on-background-filter); +} +[guielement^='widget_page_image_button'] > [guielement='icon'] { + filter: var(--filter); +} + +/* My tasks widget / Tasks per group widget */ +[guielement='widget_content_area'] [mstyles~='todo_header_group'] { + border-color: var(--on-surface); +} + +/* Selections, Reports, and Shortcuts widget */ +[guielement='selections_reports_content_area'] { + background: var(--surface); +} +[guielement='selections_reports_item'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='selections_reports_item']:hover { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[guielement='selections_reports_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* Current major calls widget */ +[handle='major_incident_widget_main'] [guielement='block_header'] { + background: var(--surface); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:hover { + filter: var(--primary-filter); +} +[handle='major_incident_widget_main'] [guielement='major_incidents_button']:active { + filter: var(--primary-muted-filter); +} + +/* KPI widget */ +[guielement='widget_content_area'] [mstyles~='italic_text'] { + color: var(--text-color) !important; +} + +/* Report widget */ +[guielement='widget_content_area'] [guielement='image']:not([role='presentation']) { + /* + * The report legend is included in the image itself, + * forcing the background to make sure the legend is visible. + * + * Setting a simple filter, e.g. filter: invert(1), may have + * a more desirable effect depending on the chosen background + * of the widget + * + * NOTE: this also affects KPI's as they can't be distinguished + */ + background: #fcfcfc; +} + +/* Conversations widget */ +[guielement='conversation-reply'] { + background: transparent; +} + +[guielement='conversation-text'] a { + color: var(--primary); +} +[guielement='conversation-text'] a:hover { + color: var(--primary-muted); +} +[guielement='conversation-link'] { + background: transparent; + color: var(--primary); +} +[guielement='conversation-link']:hover { + background: transparent; + color: var(--primary-muted); +} +[guielement='conversation-number'] + [guielement='icon-button'] { + filter: var(--primary-filter); +} +[guielement='conversation-number'] + [guielement='icon-button']:hover { + filter: var(--primary-muted-filter); +} + +/* Navigation pane */ +[guielement='navigator_container'] { + background: var(--surface); + border-color: transparent; + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='navigator_item'] [guielement='icon'] { + filter: var(--filter); +} +[guielement='navigator_item'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} + +/* Selections widget / Reports widget / Shortcuts widget */ +[guielement='widget'] [guielement='link_button'] { + background: transparent; + color: var(--primary) !important; +} +[guielement='widget'] [guielement='link_button']:hover { + color: var(--primary-muted) !important; +} + +/* Get started widget */ +div#app { + background-image: none; +} +/* close button */ +.widget-container .widget-button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.widget-container .widget-button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.widget-container .widget-button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} +/* about us button */ +.welcome-widget #button { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); +} +.welcome-widget #button:hover { + background: var(--primary); + border-color: var(--primary); + color: var(--on-primary); +} +.welcome-widget #button:active { + background: transparent; + border-color: var(--primary); + color: var(--primary); +} + +/* Subwidgets */ +.widget-container .service-excellence-widget-frame, +.widget-container .service-excellence-widget-frame:hover, +.widget-container .getting-started-widget-frame, +.widget-container .getting-started-widget-frame:hover, +.widget-container .task-board-widget-frame, +.widget-container .task-board-widget-frame:hover { + background: var(--surface); +} +/* header */ +.widget-container .service-excellence-widget-frame h1, +.widget-container .getting-started-widget-frame h1, +.widget-container .task-board-widget-frame h1 { + color: var(--on-surface); +} + +/* Service excellence subwidget */ +/* view more blogs link */ +.widget-container .service-excellence-widget-frame a { + color: var(--primary); +} +.widget-container .service-excellence-widget-frame a:hover { + color: var(--primary-muted); +} +/* blog item */ +.widget-container .service-excellence-widget-frame .rss-item a { + background: var(--surface); + --text-color: var(--on-surface); +} + +.widget-container .service-excellence-widget-frame .rss-item a:focus, +.widget-container .service-excellence-widget-frame .rss-item a:hover { + background: var(--on-surface); + --text-color: var(--surface); +} + +.widget-container + .service-excellence-widget-frame + .rss-item + .rss-item-body + .rss-item-content + > div + .fade-out-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .rss-title-text, +.widget-container .service-excellence-widget-frame .rss-item .rss-item-header .display-date { + color: var(--text-color); +} + +/* Getting started subwidget */ +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li .video-title { + color: var(--on-surface); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li.playing, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li.playing + .video-title { + background: var(--primary); + color: var(--on-primary); +} +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:hover, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:hover + .video-title, +.widget-container .getting-started-widget-frame .getting-started-widget .playlist li a:focus, +.widget-container + .getting-started-widget-frame + .getting-started-widget + .playlist + li + a:focus + .video-title { + background: var(--on-surface); + color: var(--surface); +} + +/* My calls subwidget */ +.widget-container .task-board-widget-frame .task-board-widget a { + --text-color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget a .td-icon, +.widget-container .task-board-widget-frame .task-board-widget a .content .title, +.widget-container .task-board-widget-frame .task-board-widget a .content .request, +.widget-container .task-board-widget-frame .task-board-widget a .content .request span, +.widget-container .task-board-widget-frame .task-board-widget a .display-date, +.widget-container .task-board-widget-frame .task-board-widget a .display-date .td-icon { + color: var(--text-color); +} +.widget-container .task-board-widget-frame .task-board-widget a:hover, +.widget-container .task-board-widget-frame .task-board-widget a:focus { + background: var(--on-surface); + --text-color: var(--surface); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a { + color: var(--primary); +} +.widget-container .task-board-widget-frame .task-board-widget .overview-link a:hover { + background: none; + color: var(--primary-muted); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button svg { + color: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover { + background: var(--on-surface); +} +.widget-container .task-board-widget-frame .task-board-widget .update-area button:hover svg { + color: var(--surface); +} + +/* Flow chart */ +[mstyles='flowchart_container'] + :is( + [mstyles~='flowchart_block_simple'], + [mstyles~='flowchart_block_multi'], + [mstyles~='flowchart_block_dashed'], + [mstyles~='flowchart_icon_container'] + ) { + background: var(--background); + border-color: var(--on-background); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_empty'] { + border-color: var(--on-surface); +} +[mstyles='flowchart_container'] [mstyles~='flowchart_block_multi'] { + box-shadow: 1px -1px var(--background), 2px -2px var(--on-background), 3px -3px var(--background), + 4px -4px var(--on-background); +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:last-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:last-child { + /* status icons are multicolored and thus can't be recolored */ + filter: none; +} +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon']:first-child, +[mstyles='flowchart_container'] + [mstyles~='flowchart_icon_container'] + [guielement='icon-button']:first-child { + filter: var(--on-background-filter); +} +[mstyles='flowchart_container'] [guielement='flowchart_label'] { + color: var(--on-background); +} +[mstyles='flowchart_container'] [mtype='rectangle'] { + border-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_right'] { + border-left-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_left'] { + border-right-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_up'] { + border-bottom-color: var(--on-surface) !important; +} +[mstyles='flowchart_container'] [mstyles~='arrowhead_down'] { + border-top-color: var(--on-surface) !important; +} + +/* Marketplace widget */ +[guielement='no_padding_webpage_content_area'] { + background: var(--surface); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"] +{ + background-color: var(--primary); + color: var(--on-primary); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:hover +{ + background-color: var(--primary-muted); +} +a[href="https://marketplace.topdesk.com/?_sfm_solution_creator=topdesk"]:active +{ + background-color: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} + +/* + * Knowledge base suggestions widget (as seen on call card) + * Buttons are (mostly) styled in buttons.css + */ + +.suggestionsWidget { + background: var(--background); + border-color: var(--primary); +} + +.suggestionsWidget .suggestionsWidget-header { + background: transparent; + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body { + color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > img { + filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select { + background: transparent; + color: var(--on-background); + border-color: var(--on-background); + -webkit-appearance: listbox; + -moz-appearance: listbox; + appearance: listbox; +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language > select:focus { + border-color: var(--on-background); +} +.suggestionsWidget .suggestionsWidget-body .suggestionsWidget-filters-language option { + background: var(--background); + color: var(--on-background); +} +.suggestionsWidget .help-button { + border-radius: 50%; + border: 1px solid currentColor; +} + +.suggestionsWidget .suggestionsWidget-list { + background: transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion, +.suggestionsWidget + .suggestionsWidget-suggestion.suggestionsWidget-suggestion-with-standard-solution { + background: transparent; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +.suggestionsWidget .suggestionsWidget-suggestion > a { + background: transparent; + color: var(--text-color); + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > button { + background-color: transparent; + filter: var(--filter); + opacity: 1; + border: 2px solid transparent; +} +.suggestionsWidget .suggestionsWidget-suggestion > a:hover, +.suggestionsWidget .suggestionsWidget-suggestion > a:focus { + --text-color: var(--primary); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-suggestion > button:hover, +.suggestionsWidget .suggestionsWidget-suggestion > button:focus { + --filter: var(--primary-filter); + outline: none !important; + border-color: currentColor; +} + +.suggestionsWidget .suggestionsWidget-noSuggestionsFound { + filter: var(--on-background-filter); +} + +.suggestionsWidget .suggestionsWidget-intro .footer { + background: var(--surface); + color: var(--on-surface); +} +.suggestionsWidget .suggestionsWidget-intro .footer > a:hover { + color: var(--primary-muted); +} + +/* disabling blue focus styling */ +.suggestionsWidget .suggestionsWidget-intro .intro-button:focus { + border-color: var(--on-background); + box-shadow: none; +} + +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='dialog'] { + background: var(--surface); +} +/* header */ +[data-handle='shareandsubscribe_sharee_picker'] header { + border-bottom-color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > strong, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] > strong { + color: var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] header > button { + filter: var(--on-surface-filter); +} + +/* Search field */ +[data-handle='shareandsubscribe_sharee_picker'] input[type='search'] { + background: var(--background); + border-color: var(--on-background); + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button { + --bg: var(--primary); + --filter: var(--on-primary-filter); + --border: var(--primary); + + position: relative; + background: var(--bg) !important; + border-color: var(--border) !important; +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:hover { + --bg: var(--primary-muted); + --filter: var(--on-primary-filter); + --border: var(--primary-muted); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:active { + --bg: var(--background); + --filter: var(--primary-filter); + --border: var(--primary); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search_bar'] button:before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M10 10l5 5'/%3E%3Ccircle cx='5.9' cy='6' r='5' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"); + + filter: var(--filter); + position: absolute; + top: 8px; + left: 8px; + width: 16px; + height: 16px; +} + +/* non-result status messages */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='searching'], +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='help-text'] { + color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='no-search-results'] { + filter: var(--on-background-filter); +} + +/* Search results section*/ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] { + background: var(--background); + color: var(--on-background); + + --filter: var(--on-background-filter); + --hover-fg: var(--background); + --hover-filter: var(--background-filter); +} + +/* Sharees section */ +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] { + color: var(--on-surface); + + --filter: var(--on-surface-filter); + --hover-fg: var(--surface); + --hover-filter: var(--surface-filter); +} + +/* Items */ +[data-handle='shareandsubscribe_sharee_picker'] li:hover { + background: currentColor; + --filter: var(--hover-filter); + --text-color: var(--hover-fg); +} + +[data-handle='shareandsubscribe_sharee_picker'] li > div, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='search-results'] li button, +[data-handle='shareandsubscribe_sharee_picker'] [data-handle='sharees'] li button, +[data-handle='shareandsubscribe_sharee_picker'] li strong { + color: var(--text-color); +} +[data-handle='shareandsubscribe_sharee_picker'] li img[src^='data:image/svg+xml'] { + background: transparent; + border: 1px solid currentColor; + filter: var(--filter); +} +/* separator */ +[data-handle='shareandsubscribe_sharee_picker'] li:not(:last-child) { + border-bottom-color: currentColor; +} + +/* Footer */ +[data-handle='shareandsubscribe_sharee_picker'] footer { + background: var(--surface); + border-top: 1px solid var(--on-surface); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button { + background: var(--bg) !important; + border-color: var(--border) !important; + color: var(--text-color) !important; +} + +/* Cancel button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel'] { + --bg: var(--background); + --border: var(--on-background); + --text-color: var(--on-background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:hover { + --bg: var(--on-background); + --border: var(--on-background); + --text-color: var(--background); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='cancel']:active { + --bg: var(--surface); + --border: var(--on-surface); + --text-color: var(--on-surface); +} + +/* Share button */ +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit'] { + --bg: var(--primary); + --border: var(--primary); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:hover { + --bg: var(--primary-muted); + --border-color: var(--primary-muted); + --text-color: var(--on-primary); +} +[data-handle='shareandsubscribe_sharee_picker'] footer > button[data-handle='submit']:active { + --bg: var(--on-primary); + --border: var(--primary); + --text-color: var(--primary); +} + +/* Icons in minimized groups */ +[guielement='mg-minimized-content'] [guielement='icon'] { + filter: var(--on-background-filter); +} + +/* Header buttons */ +[guielement='mg-header'] input[aria-haspopup='false'] { + filter: var(--primary-filter); +} +[guielement='mg-header'] input[aria-haspopup='false'][disabled='true'] { + filter: var(--disabled-filter); +} + +/* +* Form +*/ + +/* Default */ +input[type='text'], +div[guielement='datetimecontrol'], +div[guielement='unittextbox'], +button[role='checkbox'], +button[role='radio'], +textarea[mtype='textarea'], +textarea.textarea, +body[cardType='naturalselection'] input, +body[cardType='naturalselection'] select { + --border: var(--on-background); + --static-filter: var(--on-background-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); + border-color: var(--border); +} +textarea[mtype='textarea'] { + border-color: var(--border) !important; +} + +/* Readonly */ +input[type='text'][readonly='true'], +div[guielement='datetimecontrol'][readonly='true'], +div[guielement='unittextbox'][readonly='true'], +button[role='checkbox'][readonly='true'], +button[role='radio'][readonly='true'], +textarea[mtype='textarea'][readonly='true'] { + --border: var(--disabled); + --static-filter: var(--on-background-filter); + --button-filter: var(--disabled-filter); + + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +/* Disabled */ +input[type='text'][disabled='true'], +div[guielement='datetimecontrol'][disabled='true'], +div[guielement='unittextbox'][disabled='true'], +button[role='checkbox'][disabled='true'], +button[role='radio'][disabled='true'], +textarea[mtype='textarea'][disabled='true'], +textarea.textarea:disabled { + --border: var(--on-disabled); + --static-filter: var(--on-disabled-filter); + --button-filter: var(--on-disabled-filter); + + background: var(--disabled); + color: var(--on-disabled); + --text-color: var(--on-disabled); +} + +/* Error */ +input[type='text'][mstyles~='error'], +div[guielement='datetimecontrol'][mstyles~='error'], +div[guielement='unittextbox'][mstyles~='error'], +textarea[mtype='textarea'][mstyles~='error'], +textarea.textarea:invalid { + --border: var(--error); + --static-filter: var(--error-filter); + --button-filter: var(--on-background-filter); + + background: var(--background); + color: var(--error); + --text-color: var(--error); +} + +/* Combobox dropdown icon */ +body[cardType='naturalselection'] span.arrowdown, +input[type='text'][mtype='combobox'] + div > img { + filter: var(--on-background-filter); +} +input[type='text'][mtype='combobox'][readonly='true'] + div > img, +input[type='text'][mtype='combobox'][disabled='true'] + div > img { + filter: var(--on-disabled-filter); +} +input[type='text'][mtype='combobox'][mstyles~='error'] + div > img { + filter: var(--error-filter); +} + +/* Combobox options */ +body[cardType='naturalselection'] option, +[mango_combobox='true'][role='option'] { + background: var(--background) !important; + color: var(--on-background) !important; +} +[mango_combobox='true'][role='option'][style*='highlight'] { + background: var(--on-background) !important; + color: var(--background) !important; +} + +/* Datepicker button */ +div[guielement='datetimecontrol'] > input[guielement='icon-button'] { + filter: var(--button-filter); +} + +/* Unit text box */ +div[guielement='unittextbox'] > img, +div[guielement='unittextbox'] > [guielement='unittextbox_prefix'], +div[guielement='unittextbox'] > [guielement='unittextbox_suffix'] { + background: transparent; +} +div[guielement='unittextbox'] > img { + filter: var(--static-filter); +} + +/* Checkbox */ +button[role='checkbox'] { + box-sizing: border-box; + border: 1px solid var(--border); +} +button[role='checkbox'] > img { + display: none !important; +} + +/* checkmark */ +button[role='checkbox'][aria-checked='true']::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/* Radio button */ +button[role='radio'] > img { + display: none !important; +} +button[role='radio'] { + border: 1px solid var(--border); + border-radius: 50%; +} +/* dot */ +button[role='radio'][aria-checked='true']::before { + content: ''; + position: absolute; + border-radius: 50%; + top: 4px; + left: 4px; + width: 8px; + height: 8px; + background: currentColor; +} + +/* Search */ +[guielement='sp-search-main-group'], +[mstyles~='quicklaunch_search_background'] { + background: transparent; + border: 1px solid var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button'], +[guielement='quicklaunch_search_button'] { + background: var(--primary); + border-color: var(--primary); + --filter: var(--on-primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button']:hover, +[guielement='quicklaunch_search_button']:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +[guielement='sp-search-main-group'] [guielement='button']:active, +[guielement='quicklaunch_search_button']:active { + background: var(--background); + border-color: var(--primary); + --filter: var(--primary-filter); +} +[guielement='sp-search-main-group'] [guielement='button'] [guielement='icon'], +[guielement='quicklaunch_search_button'] [guielement='icon'] { + filter: var(--filter); +} + +/* List control */ +[guielement='list_control'], +[guielement='list_control'] [guielement='list_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='list_control'] [guielement='list_item']:hover { + background: var(--on-background); + --text-color: var(--background); + --filter: var(--background-filter); +} +[guielement='list_control'] [guielement='list_item'][mstyles~='selected'], +[guielement='list_control'] [guielement='list_item'] [mstyles~='selected_suggestion'] { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[guielement='list_control'] [guielement='list_item'] [mtype='label'] { + color: var(--text-color) !important; +} +[guielement='list_control'] [guielement='list_item'] [guielement='icon'] { + filter: var(--filter); +} + +/* memofield buttons */ +.memowithheader .images img { + filter: var(--on-surface-filter); +} +.memowithheader .images img:hover { + filter: var(--primary-filter); +} +.memowithheader .images img:active { + filter: var(--primary-muted-filter); +} +.memowithheader .images img[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* + * HTML style form elements + */ +table.fields .label { + color: var(--text-color); +} +/* select */ +table.fields .arrowdown { + filter: var(--on-background-filter); +} +#dropdownlayer .dropdownselect { + background: var(--background); + color: var(--on-background); +} +.optionvalue { + color: var(--text-color); +} + +/* list control */ +div.fields .selectlist { + background: var(--background); +} +div.fields .selectlist .selected { + background: var(--on-background); + color: var(--background); +} + +/* search with autocomplete */ +table.textinput { + background: var(--background); +} +table.textinput #queryfield { + color: var(--on-background); +} +table.textinput + #suggestionbox { + background: var(--background); +} +table.textinput + #suggestionbox .dropdown { + color: var(--on-background); +} +table.textinput + #suggestionbox .dropdown[style*='background'] { + background: var(--on-background) !important; + color: var(--background); +} + +/* KI explorer panel */ +[guielement='explorer_header'], +[guielement='explorer_body'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='explorer_body'] [guielement='tree_node_line'][mstyles~='selected'] { + background: var(--on-surface); + --text-color: var(--surface); +} +[guielement='explorer_body'] + [guielement='tree_node_line'] + [mtype='group'][mstyles~='tree_top_level'] { + background: transparent; +} + +/* KI Rich Text fields, and keyword block */ + +[guielement='block_body'], +[guielement='block_header'] { + background: transparent; +} +[guielement='memo_rich_text_area'] { + background: var(--background); + border-color: var(--on-background); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton'], +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:hover, +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='rich_text_memo_group'] > [guielement='block_header'] [guielement='imagebutton']:active, +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button']:active { + filter: var(--primary-muted-filter); +} +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='imagebutton'][disabled='true'], +[guielement='rich_text_memo_group'] + > [guielement='block_header'] + [guielement='icon-button'][disabled='true'] { + filter: var(--on-disabled-filter); +} + +/* KI tags */ +.tagList > .tag { + background: var(--background); + border-color: var(--on-background); +} +.tagList > .tag > .tagName { + color: var(--on-background); +} +.tagList > .tag > button { + filter: var(--on-background-filter); +} +.tagList > .tag > button:hover { + filter: var(--primary-filter); +} +.addTagOptions .optionsSeparator { + color: var(--on-background); +} + +.addTagOptions .td-field { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-field::placeholder { + color: var(--on-background); +} +.addTagOptions .td-button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.addTagOptions .td-button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.addTagOptions .td-field option { + color: var(--on-background); +} +.addTagOptions .td-field option:disabled { + font-style: italic; +} + +/* KI Read version styles */ +[guielement='kb-search-main-group'] { + background: transparent; + border: 1px solid var(--primary); +} +[guielement='kb-comment-group'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='kb-content'] a { + color: var(--primary); +} +[guielement='kb-content'] a:hover { + color: var(--primary-muted); +} + +/* + * Email editor in email actions + */ + +/* Toolbar */ +div#cke_emailEditor .cke_top { + background: var(--surface); +} +div#cke_emailEditor .cke_top a.cke_button, +div#cke_emailEditor .cke_top a.cke_combo_button { + filter: var(--on-surface-filter); +} +div#cke_emailEditor .cke_top a.cke_button:focus, +div#cke_emailEditor .cke_top a.cke_button:hover, +div#cke_emailEditor .cke_top a.cke_combo_button:focus, +div#cke_emailEditor .cke_top a.cke_combo_button:hover, +div#cke_emailEditor .cke_top span.cke_combo_on a.cke_combo_button { + background: transparent; + filter: var(--primary-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled { + filter: var(--on-disabled-filter); +} +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_icon, +div#cke_emailEditor .cke_top a.cke_button.cke_button_disabled .cke_button_arrow { + opacity: 1; +} + +html.cke_panel_container .cke_panel_grouptitle { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_list { + background: var(--surface); + color: var(--on-surface); +} + +html.cke_panel_container .cke_panel_listItem a > * { + color: var(--text-color); +} + +html.cke_panel_container .cke_panel_listItem a:hover, +html.cke_panel_container .cke_panel_listItem a:focus { + background: transparent; + --text-color: var(--primary); +} + +html.cke_panel_container .cke_panel_listItem.cke_selected a, +html.cke_panel_container .cke_panel_listItem a:active { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Contents */ +div#cke_emailEditor .cke_contents { + background: var(--background); +} + +/* + * These rules will cause any color styling in the email to be lost, + * But will give an increased chance for the user to be able to read + * it. + * + * Checking the original style can be done by turning off the style + * in Stylus. + */ +body.cke_editable, +body.cke_editable * { + background: var(--background) !important; + color: var(--on-background) !important; +} +body.cke_editable a { + color: var(--primary) !important; +} + +body[cardType='naturalselection'] { + background: var(--background); + color: var(--on-background); + --text-color: var(--on-background); +} + +body[cardType='naturalselection'] div#header div.title, +body[cardType='naturalselection'] legend span, +body[cardType='naturalselection'] .fieldlistheader, +body[cardType='naturalselection'] .linklistgroupheader, +body[cardType='naturalselection'] .linklistheader, +body[cardType='naturalselection'] table.tabcontrol { + color: var(--text-color); +} + +body[cardType='naturalselection'] a { + color: var(--primary); +} + +body[cardType='naturalselection'] table.fieldlist { + --filter: var(--on-background-filter); +} + +body[cardType='naturalselection'] table.fieldlist td:hover:not(.fieldlistheader), +body[cardType='naturalselection'] table.fieldlist td:focus-within:not(.fieldlistheader) { + --filter: var(--primary-filter); + --text-color: var(--primary); +} + +body[cardType='naturalselection'] img.icon { + background: transparent; + filter: var(--filter); +} + +body[cardType='naturalselection'] img.icon + a { + color: var(--text-color); +} + +/* Checkbox */ +body[cardType='naturalselection'] .checkboxlayouter:not(#ie8) input.checkbox + label.checkbox { + background: none; + border: 1px solid var(--on-background); + height: 16px; + margin-top: 2px; +} + +body[cardType='naturalselection'] + .checkboxlayouter:not(#ie8) + input.checkbox:checked + + label.checkbox::before { + content: ''; + position: absolute; + border-bottom: 2px solid currentColor; + border-left: 2px solid currentColor; + top: 2px; + left: 2px; + width: 9px; + height: 5px; + transform: rotate(-45deg); +} + +/** + * Various random things specific to certain cards + */ + +/* + * Partial card info block (Partail Incident, Change Activity) + */ +[guielement='mg-infoblock-content'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='mg-infoblock-content'] img[guielement='icon']:first-of-type { + filter: var(--on-surface-filter); +} + +/* + * Change breadcrumb + */ +[guielement='change_phase_breadcrumb'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='change_phase_breadcrumb'] > [mtype='label'] { + color: var(--text-color) !important; +} + +/* + * Checklist + */ +div#checklist { + background: var(--background); + + --text-color: var(--on-background); + + color: var(--text-color); +} + +div#checklist .explanation-text, +div#checklist .checked-amount, +div#checklist .the-text { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button'] .icon.details, +div#checklist .subtask-header .actions button.date-button, +div#checklist .subtask-header .actions button.menu-button, +div#checklist .subtask-header .operator-and-date button { + color: var(--text-color); +} + +div#checklist .subtask-header .actions [role='button']:hover .icon.details, +div#checklist .subtask-header .actions [role='button']:focus .icon.details, +div#checklist .subtask-header .actions [role='button'] .icon.details.currently-edited, +div#checklist .subtask-header .actions button.date-button:hover, +div#checklist .subtask-header .actions button.menu-button:hover, +div#checklist .subtask-header .actions button.menu-button:focus, +div#checklist .subtask-header .actions button.date-button:focus, +div#checklist .subtask-header .actions button.date-button.currently-edited, +div#checklist .subtask-header .operator-and-date button:hover, +div#checklist .subtask-header .operator-and-date button:focus { + color: var(--primary) !important; +} + +div#checklist .subtask-header.hover, +div#checklist .subtask-header.hover .actions.hover { + background: var(--on-background) !important; + --text-color: var(--background); +} + +/* Context menu, Confirm, and Cancel buttons*/ +div#checklist [role='button'] .icon.circle, +div#checklist button.menu-button .border, +div#checklist .modal-card.popup .close { + color: var(--text-color); + border-color: var(--text-color); +} + +div#checklist [role='button'][aria-disabled='true'] .icon.circle { + --text-color: var(--disabled); + background: none; +} + +div#checklist [role='button']:hover .icon.circle, +div#checklist [role='button']:focus .icon.circle, +div#checklist button.menu-button:hover .border, +div#checklist button.menu-button:focus .border, +div#checklist .modal-card.popup .close:hover, +div#checklist .modal-card.popup .close:focus { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +/* Checkboxes */ +div#checklist .check-container .check { + background: var(--background); + color: var(--on-background); +} + +/* Template select */ +div#checklist ul#templateList li.template-entry.selected { + background: var(--selection); + color: var(--on-selection); +} + +div#checklist ul#templateList li.template-entry:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* Modal popup */ +div#checklist .modal-card.popup .modal-card-head, +div#checklist .modal-card.popup .modal-card-body, +div#checklist .modal-card.popup .modal-card-foot { + background: var(--surface); + --text-color: var(--on-surface); +} +div#checklist .modal-card.popup .modal-card-title { + color: var(--on-surface); +} + +/* Assign operator dialog & Date picker dialog*/ +div#checklist [role='dialog'], +div#checklist .date-picker-popup, +div#checklist .date-picker-popup .date-picker-footer { + background: var(--surface); + --text-color: var(--on-surface); + color: var(--text-color); +} + +div#checklist [role='dialog'] li { + color: var(--on-surface); +} + +div#checklist [role='dialog'] li[role='option']:hover { + background: var(--on-surface); + color: var(--surface); +} + +div#checklist [role='dialog'] button.change-assignee-popover-action-button, +div#checklist .date-picker-popup .td-reset-date button, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today { + background: none; + color: var(--primary); +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:hover, +div#checklist [role='dialog'] button.change-assignee-popover-action-button:focus, +div#checklist .date-picker-popup .td-reset-date button:hover, +div#checklist .date-picker-popup .td-reset-date button:focus, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:hover, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:focus { + color: var(--primary-muted) !important; +} +div#checklist [role='dialog'] button.change-assignee-popover-action-button:active, +div#checklist .date-picker-popup .td-reset-date button:active, +div#checklist .date-picker-popup button.td-date-time-input-go-to-today:active { + background: var(--primary); + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker-container { + background: var(--background); +} + +div#checklist .help.is-danger { + color: var(--error); +} + +div#checklist .td-date-picker { + color: var(--on-background); +} + +div#checklist .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-header-cell { + background: var(--background); + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selectable { + color: var(--on-background); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.weekend { + background-color: var(--disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:not(.currentMonth) { + color: var(--on-disabled); +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.today { + border: 1px solid var(--primary-muted) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.focused { + border: 2px solid var(--primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content.selected { + background-color: var(--primary) !important; + color: var(--on-primary) !important; +} + +div#checklist .td-date-picker .td-date-picker-cell .td-date-picker-cell-content:hover.selectable { + background-color: var(--primary-muted); + color: var(--on-primary); +} + +div#checklist .date-and-time .control input + .icon { + color: var(--on-background); +} + +div#checklist .date-and-time .control input:focus { + border-color: var(--on-background); + box-shadow: none; +} + +div#checklist .date-and-time .control input:focus + .icon { + z-index: 1000; +} + +div#checklist .date-and-time .control input[aria-invalid='true'] { + background: var(--background); + color: var(--error); + border-color: var(--error); +} + +div#checklist .date-and-time .control input[aria-invalid='true'] + .icon { + color: var(--error); +} + +/* Panels */ + +[mstyles='planboard_dispatch_panel_main'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box'], +[mstyles='planboard_dispatch_panel_main'] [guielement='icon'] { + filter: var(--on-surface-filter); +} +[mstyles='planboard_dispatch_panel_main'] [handle='filter_icon_box']:hover { + filter: var(--primary-filter); +} + +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[mstyles='planboard_dispatch_panel_main'] [guielement^='planboard_work_item_draggable_']:hover { + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[mstyles='planboard_dispatch_panel_main'] + [guielement^='planboard_work_item_draggable_'][mstyles^='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +#dragdiv > [guielement^='planboard_work_item_draggable_'] { + background: var(--on-primary); + --text-color: var(--primary); + --filter: var(--primary-filter); + border: 1px solid var(--primary); +} +#dragdiv [mstyles='planboard_work_item_first_text'], +#dragdiv [mstyles='planboard_work_item_second_text'] { + color: var(--text-color); +} + +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button'], +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button'], +[guielement='planner_detail_content'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement^='planboard_work_item_draggable_'] [guielement='icon-button']:nth-of-type(2), +[guielement='planboard_detail_header'] + > [mstyles~='planboard_detail_section_caption'] + [guielement='icon-button']:nth-of-type(2), +[guielement='planner_detail_content'] [guielement='icon-button']:nth-of-type(2) { + filter: none; +} + +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption'] { + --filter: var(--on-background-filter); +} +[guielement='planboard_detail_header'] > [mstyles~='planboard_detail_section_caption']:hover { + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_detail_content'] { + --filter: var(--on-surface-filter); +} + +[guielement='group_linked_information'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='group_linked_information'] [guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='planboard_detail_section_subgroup'] [guielement='pt-memo'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='planboard_detail_section_subgroup'] img[handle^='invisible-for-caller-label-'] { + filter: var(--on-surface-filter); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='subwindow'][mstyles='planboard_dispatch_panel_filter_popup'] + :not([handle='planboard.dispatch.quickplanning']) + + [guielement='icon'] { + filter: var(--on-surface-filter); +} + +/* Toolbar */ + +[guielement='planboard_weekview_toolbar'] { + background: var(--surface); + --filter: var(--on-surface-filter); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'] { + filter: var(--filter); +} +[guielement='planboard_weekview_toolbar'] [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime'], +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo'] { + background: transparent; + --text-color: var(--on-surface); +} +[guielement='planboard_weekview_toolbar'] button[handle='planboard.action.visibletime']:hover, +[guielement='planboard_weekview_toolbar'] button[handle='planboard.toolbar.show_todo']:hover { + background: transparent; + --text-color: var(--primary); +} + +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='day'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='work_week'], +[guielement='planboard_weekview_toolbar'] [guielement='icon-button'][handle='week'] { + /* These have two colours, and on/off can't be distinguished */ + filter: none; +} + +/* Scheduler */ +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] { + background: var(--surface); + --filter: var(--on-surface-filter); + --border: var(--on-surface); + border-color: var(--border); +} +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'] + > [mstyles~='planboard_quick_scheduler_daily_schedule'] { + border-color: var(--border); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler']:hover, +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button']:hover { + --filter: var(--primary-filter); +} + +[guielement='planboard_weekview_toolbar'] [mstyles~='planboard_quick_scheduler_enabler_pressed'], +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed'] { + background: var(--primary); + --border: var(--on-primary); + --filter: var(--on-primary-filter); + border-color: var(--on-primary); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed']:hover, +[guielement='planboard_weekview_toolbar'] + [handle='schedule-picker-button'][mstyles~='planboard_quick_scheduler_picker_pressed']:hover { + background: var(--primary-muted); +} + +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] + [mstyles~='planboard_quick_scheduler_enabler_pressed'] + > [guielement='icon-button'], +[guielement='planboard_weekview_toolbar'] [handle='schedule-picker-button'] [handle='picker_part'] { + filter: var(--filter); +} + +[guielement='planner_toolbar_popup'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_toolbar_popup'] [guielement='planboard_header'] { + border-color: var(--text-color); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item'] { + background: var(--background); + --text-color: var(--on-background); + border-color: var(--on-background); +} + +[guielement='planner_toolbar_popup'] [mstyles~='planboard_daily_schedule_list_item']:hover { + background: var(--primary); + --text-color: var(--on-primary); +} + +/* Grid */ + +/* Header */ +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button'] { + filter: var(--on-background-filter); +} +[guielement='planboard_header'] [handle='actiedoor2.plural'] + [guielement='icon-button']:hover { + filter: var(--primary-filter); +} +[guielement='planboard_header'] + [guielement='planner_period_header_cell'][mstyles='current_period'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* Operator group row */ +[guielement='planner_row'] [guielement='planboard_operatorgroup_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +/* Operator row */ +[guielement='planner_row'] [guielement='planboard_operator_cell'], +[guielement='planner_row'] [guielement='planner_item_title_cell'], +[guielement='planner_row'] [guielement='planner_cell'] { + background: var(--background); + --text-color: var(--on-background); +} + +[guielement='planboard_operator_cell'] [mstyles='planboard_clickable planboard_zone_label'] { + /* Resetting the color of the timezone button label, as it is printed on top of a dual colored icon */ + color: inherit; +} + +/* Popups */ +[handle='planboard_popup'] [guielement='planner_popup_window'], +[handle='planboard_popup'] [guielement='planboard_popup_header'], +[handle='planboard_popup'] [guielement='planboard_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[handle='planboard_popup'] [handle='planboard.todopopup.to_dispatch']:hover { + --text-color: var(--primary); +} + +[handle='planboard_popup'] [guielement='planboard_work_item'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'][mstyles*='planboard_work_item_active_'] { + background: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +[handle='planboard_popup'] + [guielement='planboard_work_item'] + [guielement='icon-button']:first-of-type { + filter: var(--filter); +} + +/* + * Filter panel + */ +[guielement='planner_page_content'] [guielement='filter_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_header'], +[guielement='planner_page_content'] [guielement='filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_page_content'] [guielement='filter_panel_body'] > [guielement='icon-button'] { + filter: var(--on-surface-filter); +} +[guielement='planner_page_content'] + [guielement='filter_panel_body'] + > [guielement='icon-button']:hover { + filter: var(--primary-filter); +} + +/* date picker */ +[mstyles='planner_datepicker_grid'] { + /* background color creates the cell borders */ + background: var(--on-background); +} +/* day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekday'] { + --text-color: var(--on-background); + background: var(--background); +} +/* non-working day cell */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_weekend'] { + --text-color: var(--on-surface); + background: var(--surface); +} +/* Special style for 'today' to aid orientation */ +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today'] { + border-color: transparent; +} +[mstyles='planner_datepicker_grid'] [mstyles~='planner_datepicker_today_label'] { + --text-color: var(--primary); +} +/* currently selected cell */ +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekday'][mstyles~='planner_datepicker_selected'], +[mstyles='planner_datepicker_grid'] + [mstyles~='planner_datepicker_weekend'][mstyles~='planner_datepicker_selected'] { + background: var(--primary-muted); + --text-color: var(--on-primary); +} + +/* + * Actions + */ +[guielement='planner_page_content'] [guielement='detail_panel_main'] { + border: 1px solid var(--on-background); +} + +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='planned'] { + --status-color: #057aab; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='terminated'] { + --status-color: #178755; +} +[guielement='planner_page_content'] [guielement='detail_panel_main'][mstyles='request'] { + --status-color: #eda911; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header'] { + background: var(--surface); + --text-color: var(--on-surface); + border-bottom: 0px; +} + +[guielement='planner_page_content'] [guielement='detail_panel_header']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 8px; + background: var(--status-color); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] { + background: var(--background) !important; + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'][mstyles~='active'] { + border-color: var(--primary); + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_tabbutton'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_body'] [guielement='icon'] { + filter: var(--filter); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_group_header'] + > [guielement='icon']:first-of-type { + filter: none; +} + +[guielement='planner_page_content'] + [guielement='detail_panel_body'] + input[placeholder]::placeholder { + color: var(--text-color) !important; +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='planner_page_content'] [guielement='detail_panel_highlighted_block']::before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 4px; + background: var(--status-color); +} + +[guielement='planner_page_content'] + [guielement='detail_panel_highlighted_block'] + [guielement='detail_panel_reserved_item'][mstyles~='hovered'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='planner_popup_window'], +[guielement='planner_popup_window'] > [guielement='planner_popup_footer'] { + background: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='planner_popup_window'] [guielement='spinner-button'] { + background: transparent; + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button']:hover { + filter: var(--primary-filter); +} +[guielement='planner_popup_window'] [guielement='spinner-button'] + [guielement='textbox'] { + background: var(--background); + --text-color: var(--on-background); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin'] { + filter: var(--on-surface-filter); +} +[guielement='planner_popup_window'] [handle='reservations.services.edit.trash_bin']:hover { + filter: var(--primary-filter); +} + +/* + * Planner + */ +[handle='reservation.planner.main_view'] > [guielement='planner_header_row'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] + [guielement='mg-header'][mstyles~='reservable_items_group_header'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_row'] { + background: var(--background); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='servicewindow_shadow_'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_row'] + [handle^='blocked_period_shadow_'] { + background: var(--disabled) !important; +} +[handle='reservation.planner.main_view'] [guielement='planner_item_title_cell'] { + background: var(--background) !important; +} +[handle='reservation.planner.main_view'] [guielement='reservable_item_cell_icon'] > img { + filter: var(--on-background-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_OFF'], +[handle='reservation.planner.main_view'] + [guielement='reservable_item_cell_icon'] + > img[handle$='_MINI_STAR_ON_HOVER'] { + filter: none; +} +[handle='reservation.planner.main_view'] [guielement='planner_room_capacity'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +#dragdiv { + border-color: var(--on-background) !important; +} + +/* New reservation column */ +[handle='reservation.planner.main_view'] [guielement='background_shadow_section'] { + background: repeating-linear-gradient( + -45deg, + transparent, + transparent 9px, + var(--primary) 9px, + var(--primary) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='foreground_shadow_section'] { + border-color: var(--primary); + background: transparent; +} +[handle='reservation.planner.main_view'] [guielement='reservation_feedback_section']:hover { + border-color: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='divisible_room_restriction'] { + background: repeating-linear-gradient( + -45deg, + var(--primary-muted), + var(--primary-muted) 6px, + transparent 6px, + transparent 10px + ); + border-color: var(--primary-muted); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] { + background: var(--primary); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_feedback_section'][mstyles~='selected_section'] + > img { + filter: var(--on-primary-filter); +} + +/* Reservation */ +[handle='reservation.planner.main_view'] [guielement='reservation_section'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[handle='reservation.planner.main_view'] + [guielement='reservation_section'][mstyles~='selected_section'] { + background: var(--on-surface); + --text-color: var(--surface); + --filter: var(--surface-filter); +} +[handle='reservation.planner.main_view'] [guielement='reservation_section'] > img { + filter: var(--filter); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] { + background: repeating-linear-gradient( + 45deg, + transparent, + transparent 6px, + var(--disabled) 6px, + var(--disabled) 10px + ); +} +[handle='reservation.planner.main_view'] [guielement='block_time_section'] > img { + display: none !important; +} + +/* Availability popup */ +[guielement='planner_popup_content'] [handle='availableassets'] ~ img[style*='width: 24px'] { + filter: var(--on-surface-filter); +} + +/* + * TASK BOARD and BOOKMARKS + */ +/* notification */ +[guielement='notification-box'][mstyles='notification-alert'] { + background: var(--background); + border: 1px solid var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] + > [guielement='notification-message'] { + color: var(--primary); +} +[guielement='notification-box'][mstyles='notification-alert'] > [guielement='icon'] { + filter: var(--primary-filter); +} + +/* filter panel */ +[guielement='taskboard_filter_panel'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border: 1px solid var(--on-background); +} +[guielement='taskboard_filter_panel_header'], +[guielement='taskboard_filter_panel_header_folded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + border-color: var(--on-surface); +} + +[guielement='taskboard_datefilter_button'] { + border-color: var(--surface); +} +[guielement='taskboard_datefilter_button'] > [mtype='label'] { + background: none; +} +[guielement='taskboard_datefilter_button'][mstyles~='taskboard_active_date_filter_caption'] { + background: var(--primary); + --text-color: var(--on-primary); +} + +[guielement='taskboard_filter_panel_filter_fields'] [mstyles='taskboard_filter_panel_section'] { + border-color: var(--on-background); +} + +[guielement='taskboard_filter_panel_filter_fields'] + [mstyles='taskboard_filter_panel_section'] + [guielement='icon'] { + filter: var(--filter); +} + +/* task list */ +[guielement='taskboard_item_border_group'] { + border-color: var(--surface); +} + +[guielement='taskboard_item_header'] { + background: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); + border-color: var(--surface); +} +[guielement='taskboard_item_header'][mstyles~='unfolded'] { + background: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +[guielement='taskboard_bookmark_button']:disabled { + visibility: hidden !important; +} +[guielement='taskboard_task_icon'] { + filter: var(--filter); +} + +[guielement='taskboard_item_body'] { + border-color: var(--surface); +} +[guielement='taskboard_item_body'] [guielement='taskboard_task_body_data_panel'] { + background: var(--surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'] { + background: var(--surface); + border-color: var(--on-surface); + --text-color: var(--on-surface); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] { + background: var(--primary); + --text-color: var(--on-primary); +} +[guielement='taskboard_item_body'] + [guielement='pt-memo'] + [guielement='pt-entry-sidebar'][mstyles~='pt-invisible'] { + background: repeating-linear-gradient( + -45deg, + var(--surface) 0px, + var(--surface) 8px, + var(--background) 8px, + var(--background) 16px + ); +} + +[guielement='taskboard_item_body'] [guielement='pt-memo'] a { + color: var(--primary); +} +[guielement='taskboard_item_body'] [guielement='pt-memo'][mstyles~='pt-flagged'] a { + color: var(--on-primary); +} + +[guielement='taskboard_item']:hover [guielement='taskboard_item_header'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_header'], +[guielement='taskboard_item']:hover [guielement='taskboard_item_body'], +[guielement='taskboard_item']:focus-within [guielement='taskboard_item_body'] { + border-color: var(--primary-muted); +} + +/** + * Change activity planner tab + */ + +/* + * Change activity planner toolbar + */ +/* Date picker button */ +[guielement='planner_menu_group'] [handle='service_window_check_date_date'] { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] [handle='service_window_check_date_date']:hover { + filter: var(--primary-filter); +} +/* Lock/Unlock buttons (when selecting an activitty) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']) { + filter: var(--on-background-filter); +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):disabled { + padding-bottom: 2px; + border-bottom: 1px solid currentColor; /* The color will be overridden by the filter*/ +} +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + :is([handle='unlock'], [handle='locked']):not(:disabled):hover { + filter: var(--primary-filter); +} +/* Link/Unlink image (when creating/breaking a dependency) */ +[guielement='planner_menu_group'] + [guielement='planner_menu_choice_group'] + [mstyles='planner_menu_title'] + ~ [guielement='image'] { + filter: var(--on-background-filter); +} + +/* + * Change activity planner + */ +[guielement='planner_container'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/* Timeline bar */ +[guielement='planner_container'] [guielement='planner_scroll_button_group'], +[guielement='planner_container'] [guielement='planner_view_combobox_container'], +[guielement='planner_container'] + [guielement='planner_default_group'] + :is( + [guielement='planner_time_line_item_first_line'], + [guielement='planner_time_line_item_second_line'] + ) { + border-color: var(--on-surface); +} + +[guielement='planner_container'] [handle='gantt_zoomfit'] { + filter: var(--on-surface-filter); +} +[guielement='planner_container'] [handle='gantt_zoomfit']:hover { + filter: var(--primary-filter); +} + +/* Marker bar */ +[guielement='planner_container'] [guielement='planner_marker_group'] { + background-color: var(--background); + background-color: var(--surface); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle='planner.todaymarker.title'] { + background-color: var(--primary) !important; + color: var(--on-primary); + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_marker_group'] + [mtype='rectangle']:is( + [style*='background-color: rgb(219, 216, 235)'], + [style*='background-color:#dbd8eb'] + ) { + /* Arrow on the today marker */ + background-color: var(--primary) !important; +} + +[guielement='planner_container'] + [guielement='planner_marker_group'] + [handle^='Sprint'][handle$='_marker'] { + filter: var(--on-surface-filter); +} + +/* Activities sidebar */ +[guielement='planner_container'] [guielement='planner_info_group'] { + border-color: var(--on-surface); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_inner_group'] { + background-color: var(--background); +} +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_header_line'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--surface); +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] { + --text-color: var(--on-background); + + background-color: transparent !important; + border-color: transparent; +} + +[guielement='planner_container'] + [guielement='planner_info_group'] + [guielement='planner_info_control'] + :is( + [guielement='planner_info_control_title'], + [guielement='planner_info_control_subtitle'] + )[style*='color'] { + color: var(--text-color) !important; +} + +/* Planner area */ +[guielement='planner_container'] [guielement='planner_draw_area'] { + background-color: var(--background); + border-color: var(--on-surface); + + --milestone-line-color: var(--on-background); + --text-color: var(--on-background); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + > [mtype='group']:not([guielement]) { + /* Out of service window / weekend */ + background-color: var(--on-background) !important; + opacity: 0.1; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_background_row'] { + background-color: transparent !important; + border-color: transparent; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_header_line'] { + background-color: var(--surface); +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_duration_in_group_header'] { + background-color: var(--on-surface); + --text-color: var(--surface); +} + +/* Connectors */ +[guielement='planner_container'] [guielement='planner_draw_area'] [mtype='rectangle'] { + border-color: var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [mtype='rectangle'][style*='z-index: 3;'] { + /* Connector connected to selected activity */ + border-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_begin'] { + /* Start connector */ + background-color: var(--on-background); + padding: 0; + width: 6px !important; + height: 6px !important; + border-radius: 50%; + border: 2px solid var(--background); + border-right: 0px; + top: 8.5px !important; + left: unset !important; + right: -4px; +} +[guielement='planner_container'] [guielement='planner_draw_area'] [guielement='planner_link_end'] { + /* End connector area */ + position: relative; + overflow: hidden; + width: 8px !important; + height: 12px !important; + border-width: 0px; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_link_end']:after { + /* End connector arrow */ + content: ''; + position: absolute; + width: 10px; + height: 10px; + background: var(--on-background); + transform: rotate(45deg); + left: -7px; + top: 1px; + box-shadow: 0 0 0px 2px black; +} + +/* Blocks */ +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_info_control_title'] { + /* to fix templates where the label is forced grey */ + color: var(--text-color) !important; +} + +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* light-ish red unselected */ + [style*='background-color: rgb(208, 49, 49);'], [style*='background-color:#d03131;'], + /* light-ish red selected */ + [style*='background-color: rgb(191, 27, 44);'], [style*='background-color:#bf1b2c;'], + /* darker red (doesn't seem to change on selection)*/ + [style*='background-color: rgb(164, 23, 37);'], [style*='background-color:#a41725;'], + ) { + /* Overdue / No Go */ + background-color: var(--error) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* grey */ + [style*='background-color: rgb(149, 149, 149);'], [style*='background-color:#959595;'], + ) { + /* Not ready to start / Not ready to authorize */ + background-color: transparent !important; + border: 1px solid var(--error) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* lightblue unselected */ + [style*='background-color: rgb(118, 182, 209);'], [style*='background-color:#76b6d1;'], + /* lightblue selected */ + [style*='background-color: rgb(73, 158, 193);'], [style*='background-color:#499ec1;'], + ) { + /* Ready to start */ + background: repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* blue unselected */ + [style*='background-color: rgb(5, 122, 171);'], [style*='background-color:#057aab;'], + /* blue selected */ + [style*='background-color: rgb(0, 107, 156);'], [style*='background-color:#006b9c;'], + ) { + /* Waiting for Authorization / Started */ + background: repeating-linear-gradient( + -45deg, + var(--primary), + var(--primary) 5px, + transparent 5px, + transparent 10px + ) !important; + border: 1px solid var(--primary) !important; + padding: 1px !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* green unselected */ + [style*='background-color: rgb(23, 135, 85);'], [style*='background-color:#178755;'], + /* green selected */ + [style*='background-color: rgb(19, 117, 73);'], [style*='background-color:#137549;'], + ) { + /* Resolved / Go */ + background-color: var(--primary) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* teal unselected */ + [style*='background-color: rgb(115, 197, 158);'], [style*='background-color:#73c59e;'], + /* teal selected */ + [style*='background-color: rgb(66, 177, 128);'], [style*='background-color:#42b180;'], + ) { + /* Skipped */ + background: repeating-linear-gradient( + 45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ), + repeating-linear-gradient( + -45deg, + var(--on-background), + var(--on-background) 1px, + transparent 1px, + transparent 10px + ) !important; + border: 1px solid var(--on-background) !important; +} +[guielement='planner_container'] + [guielement='planner_draw_area'] + [guielement='planner_item_control'] + [mstyles='clickable']:is( + /* white (also has grey border) */ + [style*='background-color: rgb(242, 242, 242);'], [style*='background-color:#f2f2f2;'], + ) { + /* Template */ + background-color: transparent !important; + border: 2px dotted var(--on-background) !important; +} + +/* Planner scope bar */ +[guielement='planner_container'] [guielement='planner_custom_scroll_area'] [guielement='image'] { + filter: var(--on-surface-filter); +} + +/* Vertical lines */ +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;'] { + /* Milestone line */ + border-color: var(--milestone-line-color) !important; +} +[guielement='planner_container'] + :is([guielement='planner_marker_group'], [guielement='planner_draw_area']) + [mtype='rectangle'][style*='width: 0px;']:is( + [style*='border-left-color: rgb(219, 216, 235)'], + [style*='border-left:1px solid #dbd8eb'] + ) { + /* Today line */ + --milestone-line-color: var(--primary); +} + +/* Activitity bar (hover/select state) */ +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(183, 178, 216)'] { + /* Selected */ + box-shadow: inset 8px 0px 0px 0px var(--primary); + border-color: var(--primary); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(219, 216, 235)'] { + /* Hovered */ + border-color: var(--on-background); +} +[guielement='planner_container'] + :is( + [guielement='planner_draw_area'] [guielement='planner_background_row'], + [guielement='planner_info_group'] [guielement='planner_info_control'] + )[style*='background-color: rgb(159, 153, 203)'] { + /* Selected and Hovered */ + box-shadow: inset 8px 0px 0px 0px var(--on-background); + border-color: var(--on-background); +} + +/* Collapsible sidebar */ +[guielement='collapsible_panel_container'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [guielement='collapsible_panel_header'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [mstyles='chm-planner-sidepanel-filter'] { + border-color: var(--on-surface); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt'] { + filter: var(--on-background-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:hover { + filter: var(--primary-filter); +} +[guielement='collapsible_panel_container'] [handle='new_activity_from_template_in_gantt']:active { + filter: var(--primary-muted-filter); +} + +/* + * New activity popup + */ +[guielement='popup-body'] [guielement='rich_text_memo_group'][mstyles~='memo_like_progresstrail'] { + background-color: transparent; +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']) { + filter: var(--on-surface-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):hover { + filter: var(--primary-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button']):active { + filter: var(--primary-muted-filter); +} +[guielement='popup-body'] + [guielement='rich_text_memo_group'] + > [guielement='block_header'] + :is([guielement='imagebutton'], [guielement='icon-button'])[disabled='true'] { + filter: var(--on-disabled-filter); +} + +/** + * Activity Overview tab + */ +[guielement='collected_memo_history'] [guielement='history_entry_list'] { + background-color: var(--surface); + border-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + :is([guielement='history_stamp'], [guielement='history_contents']) { + background-color: transparent; +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button'] { + background-color: transparent; + --text-color: var(--on-surface); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'] + [guielement='link_button']:hover { + --text-color: var(--primary-muted); +} +[guielement='collected_memo_history'] + [guielement='history_entry_list'] + [guielement='history_entry'][mstyles='history_entry_non_clickable']::before { + content: '▸'; + position: absolute; + left: -12px; + font-size: 14px; + color: var(--text-color); +} + +/** + * Activity Checklist + */ +[guielement='checklist_sidebar_header'] { + background-color: var(--surface); + border-color: var(--surface); +} + +[guielement='checklist_sidebar_content'] { + background-color: var(--surface); + border-color: var(--surface); + border-top-color: var(--on-surface); +} + +[guielement='checklist_item'] + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--surface); +} +[guielement='checklist_item']:is(:hover, :focus-within) + :is([guielement='checklist_item_header'], [guielement='checklist_item_content']) { + border-color: var(--primary); +} + +[guielement='checklist_item'] [guielement='checklist_item_header'][mstyles='unfolded'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} +[guielement='checklist_item'] + [guielement='checklist_item_content'] + [guielement='checklist_grey_section'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +/** + * Change Calendar + */ +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] { + background-color: var(--surface); + --text-color: var(--on-surface); + border-color: var(--on-surface); +} +[guielement='changecalendarpage'] [guielement='month_calendar_weekviewheader'] > [mtype='group'] { + border-color: var(--on-surface) !important; +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] { + background: var(--on-surface); /* The table and cell borders of the month view */ +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekend'] { + background-color: var(--surface); + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} +[guielement='changecalendarpage'] + [mstyles='month_grid_grid'] + > [mstyles~='month_calendar_weekday'] { + background-color: var(--background); + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +[guielement='changecalendarpage'] [mstyles='month_grid_grid'] > [mstyles~='month_calendar_today'] { + border-color: transparent; + box-shadow: inset 0 0 0 2px var(--primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_week_label'] { + background-color: var(--primary); + --text-color: var(--on-primary); +} +[guielement='changecalendarpage'] [guielement='month_calendar_item'] { + background-color: transparent; +} +[guielement='changecalendarpage'] [guielement='month_calendar_item']:hover { + background-color: var(--primary); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +[guielement='changecalendarpage'] + [guielement='month_calendar_item'] + [guielement='icon'][mtype='imagearea']:first-child { + filter: var(--filter); +} + +/** + * Time Registration + */ + +[guielement='tr-fold-header-border'] { + border-top-color: transparent; +} + +[guielement='tr-fold-header'], +[guielement='tr-fold-content'] { + border-left-color: var(--surface); +} + +[guielement='tr-fold-header'] { + background-color: var(--surface); + --text-color: var(--on-surface); +} + +[guielement='tr-fold-header'] > img[guielement='icon'] { + filter: var(--on-surface-filter); +} + +[guielement='tr-fold-content'] img[guielement='icon'] { + filter: var(--on-background-filter); +} + +[guielement='tr-fold-header'] [guielement='tr-time'] { + color: var(--primary); +} +[guielement='tr-fold-content'] [guielement='tr-time'] { + border-color: var(--text-color); +} + +/** + * Mango Grid + */ + +[mtype='grid'] { + border-color: var(--background); + --selected-row-border: var(--primary); +} + +[mtype='grid'][mstyles='blurred'] { + --selected-row-border: var(--on-surface); +} + +[mtype='grid'] [id$='_content'] { + color: var(--text-color); +} + +/* selected */ +[mtype='grid'] [id$='_selection'] [id*='_selection_'][style*='background-color'] { + background-color: transparent !important; + box-shadow: inset 0 0 0px 1px var(--selected-row-border); +} + +/* header */ +[mtype='grid'] [id$='_header'] { + --text-color: var(--on-surface); +} + +[mtype='grid'] [id$='_header'] img { + filter: var(--on-surface-filter); +} + +[mtype='grid'] [id$='_header'] [style*='background-color'] { + background-color: var(--surface) !important; +} +[mtype='grid'] [id$='_header'] [style*='border-right'] { + border-color: var(--on-surface) !important; +} + +/* Content */ +[mtype='grid'] [id$='_columnstyling'] [style*='background-color'] { + background-color: var(--background) !important; +} + +[mtype='grid'] [id$='_content'] [style*='border-right'] { + border-color: var(--on-background) !important; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/concurrent_users/.*") { +body { + background: var(--background); +} + +.notification.is-warning { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); + border-radius: 5px; +} + +.notification.is-warning .icon { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/grid.*"), regexp("http(s)?://.*/tas/secure/[^assetmgmt].*?action=.*") { +/* + * Grids + */ + +/* + * The checkboxes are a dual colored image on top of a native checkbox. + * Unfortunately neither one can be recolored or styled effectively. + */ + +html, +body { + background: transparent; +} + +body[cardtype='grid'] { + background: var(--background); + color: var(--on-background); +} +body[cardtype='grid'] .header { + border-color: var(--on-surface); +} + +body[cardtype='grid'] .topbar .filter > a { + color: var(--primary); +} +body[cardtype='grid'] .topbar .filter > a:hover { + color: var(--primary-muted); +} +body[cardtype='grid'] .topbar .filter > a:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Grid buttons */ +body[cardtype='grid'] #actionbar .button { + --text-color: var(--on-background); + --filter: var(--on-background-filter); + + background: var(--background); + border-color: var(--on-background); + color: var(--text-color); + + margin-top: 4px; + height: 24px; + line-height: 24px; +} + +body[cardtype='grid'] #actionbar .menu-button > .chevron { + filter: var(--filter); +} + +body[cardtype='grid'] #actionbar .button:hover, +body[cardtype='grid'] #actionbar .button.menu-button.toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button:focus { + outline: 2px solid var(--primary) !important; + outline-offset: 2px; + isolation: isolate; +} + +body[cardtype='grid'] #actionbar .button:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred { + background: var(--primary); + border-color: var(--primary); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:hover { + background: var(--primary-muted); + border-color: var(--primary-muted); + + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} + +body[cardtype='grid'] #actionbar .button.preferred:active { + background: var(--on-primary); + border-color: var(--primary); + + --text-color: var(--primary); + --filter: var(--primary-filter); +} + +body[cardtype='grid'] #actionbar #reload-grid-button, +body[cardtype='grid'] #actionbar .button.setup_button { + position: relative; +} + +body[cardtype='grid'] #actionbar #reload-grid-button::before, +body[cardtype='grid'] #actionbar .button.setup_button::before { + content: ''; + position: absolute; + filter: var(--filter); + top: 4px; + height: 16px; + width: 16px; + pointer-events: none; +} + +/* grid reload button */ +body[cardtype='grid'] #actionbar #reload-grid-button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath fill='%23757576' d='M14.9 6V0L13 1.9C9.8-.6 5.3-.4 2.4 2.5c-3.1 3.1-3.1 8.1 0 11.2 3.1 3.1 8.1 3.1 11.2 0 1.4-1.4 2.1-3.1 2.3-4.9h-2.7c-.1 1.1-.6 2.2-1.5 3-2.1 2.1-5.4 2.1-7.5 0-2.1-2.1-2.1-5.4 0-7.5 1.8-1.8 4.7-2 6.8-.6L8.9 6h6z'/%3E%3C/svg%3E"); + left: 8px; +} +/* grid setup button */ +body[cardtype='grid'] #actionbar .button.setup_button::before { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3E%3Cpath d='M13.9 7.2l1.8-.7-1.1-2.8-1.8.7c-.3-.5-.7-.8-1.2-1.2l.7-1.8L9.6.3l-.8 1.8c-.5-.1-1.1-.1-1.6 0L6.4.3 3.6 1.4l.7 1.8c-.4.4-.8.8-1.1 1.2l-1.8-.8L.3 6.4l1.8.7c-.1.6-.1 1.2 0 1.7l-1.8.8 1.1 2.8 1.8-.7c.3.5.7.8 1.2 1.2l-.7 1.8 2.8 1.1.7-1.8c.5.1 1.1.1 1.7 0l.7 1.8 2.8-1.1-.7-1.8c.5-.3.8-.7 1.2-1.2l1.8.7 1.1-2.8-1.8-.7c0-.6 0-1.2-.1-1.7zm-4.7 3.6c-1.5.6-3.3-.1-3.9-1.6s.1-3.3 1.6-3.9c1.5-.6 3.3.1 3.9 1.6.6 1.5-.1 3.2-1.6 3.9z'/%3E%3C/svg%3E"); + left: 7px; +} + +/* auto-refresh button enabled */ +/* Should have been a proper toggle button with aria-pressed="true" */ +body[cardtype='grid'] #actionbar .button.autorefresh-toggled { + background: var(--on-background); + border-color: var(--on-background); + + --text-color: var(--background); + --filter: var(--background-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled:active { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); +} + +body[cardtype='grid'] #actionbar .button.autorefresh-toggled::before { + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z'/%3E%3C/svg%3E"); + + margin-right: 8px; + margin-bottom: -3px; + + width: 16px; + height: 16px; + filter: var(--filter); + + display: inline-block; +} + +/* Grid menu */ +body[cardtype='grid'] .more-menu { + background: var(--surface); +} +body[cardtype='grid'] .more-menu .menu-item { + color: var(--on-surface); +} + +body[cardtype='grid'] .more-menu .menu-item:hover, +body[cardtype='grid'] .more-menu .menu-item:focus { + outline: none !important; + background: var(--on-surface); + color: var(--surface); +} + +/* grid container */ +body[cardtype='grid'] .stretchdiv { + background: var(--background); +} + +/* column headers */ +#headers .column { + --text-color: var(--on-surface); + --filter: var(--on-surface-filter); + + background: var(--surface); + color: var(--text-color); +} +#headers .column .ordericon { + filter: var(--filter); +} +/* column header separator */ +#headers .column .sizer #border { + background: var(--on-surface); +} +#headers .column.highlight { + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); + + background: var(--primary); +} +/* bottom bar */ +body[cardtype='grid'] .bottombar { + background: var(--surface); + color: var(--on-surface); +} +body[cardtype='grid'] .bottombar .currentpage { + color: var(--primary); +} +body[cardtype='grid'] .bottombar a { + color: var(--on-surface); +} + +/* data cells */ +div#columnsscroll { + background: var(--background); +} +div#columnsscroll .column span { + color: var(--text-color); +} +div#columnsscroll .column:is(#_status, #_changetypecolumn, #_typecolumn) span > .gridicon { + filter: var(--filter); +} +div#columnsscroll .column .normal, +div#columnsscroll .column .overduechanged, +div#columnsscroll .column .overduenew { + --text-color: var(--on-background); + --filter: var(--on-background-filter); +} +div#columnsscroll .column .overduealert { + /* Due today */ + background: var(--primary-muted); + --text-color: var(--on-primary); + --filter: var(--on-primary-filter); +} +div#columnsscroll .column .overduealarm { + /* Overdue */ + --text-color: var(--error); + --filter: var(--error-filter); +} +div#columnsscroll .column .archived { + --text-color: var(--primary); + --filter: var(--primary-filter); +} +/* highlight bar */ +div#columnsscroll div#selected.focus { + background: none; + border: 1px solid var(--primary); +} +div#columnsscroll div#selected.nofocus { + background: none; + border: 1px solid var(--on-background); +} +/* column separator */ +div#columnsscroll .column { + border-color: var(--on-background); +} + +/* details */ +#detailframediv .ui-resizable-handle { + filter: var(--on-background-filter); +} +#detailsbody .memocontainer { + color: var(--on-background); + border-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/agileboard/.*") { +::selection { + background: var(--selection); + color: var(--on-selection); +} + +body { + background: var(--background) !important; + + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +:is(h1, h2, h3, h4, h5, h6).title { + color: var(--text-color) !important; +} +div.title.is-5 { + /* Assign to "heading" in the 'Create note' popup */ + color: var(--text-color); +} + +p.label { + color: var(--text-color); +} +.choose-board label.filterlabel { + /* choose board select label */ + color: var(--text-color); +} + +a.has-text-link { + color: var(--primary) !important; +} +a.has-text-link:hover { + background: var(--on-background); + color: var(--background) !important; +} +a.has-text-link:focus { + outline: 2px solid var(--outline-color); + color: var(--primary) !important; +} + +#board-data-with-side-panel .resizable-container .resizer { + /* resize handle between board and sidebar */ + border-color: var(--on-background); +} + +/* + * Top row link buttons + */ +.filter-button > i.icon, +.filter-button > a, +.all-boards-button > i.icon, +.all-boards-button > a { + color: var(--text-color) !important; +} +.filter-button > a, +.all-boards-button > a { + outline: none; +} +.filter-button:hover, +.all-boards-button:hover { + --text-color: var(--primary); +} +.all-boards-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +.filter-button:focus-within { + outline: 2px solid var(--outline-color); + outline-offset: -2px; +} + +.filter-header.active .filter-button { + background: var(--surface); + --text-color: var(--on-surface); +} +.filter-header.active .filter-button:hover { + --text-color: var(--primary); +} + +/* + * Filter bar + */ +.header .filter-bar { + background: var(--surface); +} +.header .filter-bar label { + color: var(--on-surface); +} +.toggle-button-group input[type='radio'] + .button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.toggle-button-group input[type='radio']:hover + .button { + background: var(--on-background); + color: var(--background); +} +.toggle-button-group input[type='radio']:active + .button { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked + .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.toggle-button-group input[type='radio']:checked:hover + .button { + background: var(--primary-muted); + border-color: var(--primary-muted); +} +.toggle-button-group input[type='radio']:focus + .button { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + z-index: 1; +} + +/* + * Button + */ +button.button, +button.calendar-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + border-color: var(--border-color) !important; + color: var(--text-color) !important; + + isolation: isolate; + + transition: none !important; +} +button.button:hover, +button.calendar-button:hover { + --bg-color: var(--on-background); + --text-color: var(--background); +} +button.button:active, +button.calendar-button:active { + --bg-color: var(--surface); + --text-color: var(--on-surface); + --border-color: var(--on-surface); +} +button.button:focus, +button.calendar-button:focus { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px !important; + box-shadow: none !important; +} +button.button .icon { + color: var(--text-color); +} + +button.button.is-primary { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +button.button.is-primary:hover { + --bg-color: var(--primary-muted); + --border-color: var(--primary-muted); +} +button.button.is-primary:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); +} + +button.button.is-primary[disabled], +button.button[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); + + pointer-events: none; +} + +button.is-primary.is-selected { + --bg-color: var(--on-background); + --text-color: var(--background); + --border-color: var(--on-background); +} + +/* assign to me button in Çreate note' popup */ +button.button.circle[disabled] { + background: var(--bg-color) !important; + border-color: var(--border-color) !important; +} + +/* + * Menu + */ +ul.button-submenu { + background: var(--surface); + color: var(--on-surface); +} +ul.button-submenu li { + --bg-color: var(--surface); + --color: var(--on-surface); + + background: var(--bg-color) !important; + color: var(--text-color) !important; +} +ul.button-submenu li:focus, +ul.button-submenu li:hover { + --bg-color: var(--on-surface); + --text-color: var(--surface); +} +ul.button-submenu li:focus { + outline: none; +} +ul.button-submenu li.item.divided { + border-top-color: var(--on-surface); +} + +/* + * Popup + */ +header.modal-card-head { + background: var(--surface); + border-color: var(--on-surface); + + --outline-color: var(--on-surface); + --text-color: var(--on-surface); +} +header.modal-card-head > .modal-card-title { + color: var(--text-color); +} +header.modal-card-head > button.delete { + background: var(--background); + border-color: var(--on-background); + + --color: var(--on-background); +} +header.modal-card-head > button.delete:hover { + background: var(--primary); + border-color: var(--primary); + + --color: var(--on-primary); +} +header.modal-card-head > button.delete:active { + background: var(--on-primary); + border-color: var(--primary); + + --color: var(--primary); +} +header.modal-card-head > button.delete:focus { + box-shadow: none; + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +header.modal-card-head > button.delete::before, +header.modal-card-head > button.delete::after, +header.modal-card-head > button.delete:active::before, +header.modal-card-head > button.delete:active::after, +header.modal-card-head > button.delete:hover::before, +header.modal-card-head > button.delete:hover::after { + background: var(--color); +} +section.modal-card-body { + background: var(--surface); + + --text-color: var(--on-surface); +} +footer.modal-card-foot { + background: var(--surface); + border-color: var(--on-surface); + + --text-color: var(--on-surface); +} + +/* Help popup shortcuts */ +div.item.label { + color: var(--text-color); +} +div.item.label > span { + border-color: var(--on-background); + background: var(--background); + color: var(--on-background); +} + +/* + * Field + */ +.field .field-label label.label { + color: var(--text-color); +} + +.field.is-danger label.label { + color: var(--error); +} + +input.input, +textarea.textarea, +.select select { + --bg-color: var(--background); + --border-color: var(--on-background); + --text-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} + +input.input:invalid, +.select select:invalid, +.field.is-danger input.input { + --text-color: var(--error); + --border-color: var(--error); +} + +input.input:focus, +textarea.textarea:focus, +.select select:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; + box-shadow: none; +} + +input.input[disabled], +textarea.textarea[disabled], +.select select[disabled] { + --bg-color: var(--disabled); + --text-color: var(--on-disabled); + --border-color: var(--on-disabled); +} + +.select select { + appearance: auto; +} + +input.is-checkradio + label { + --check-bg-color: var(--background); + --check-color: var(--on-background); + --check-border-color: var(--on-background); + + color: var(--text-color); + margin-left: 4px !important; /* making space for the outline */ +} +input.is-checkradio + label::before, +input.is-checkradio:checked + label::before { + background: var(--check-bg-color) !important; + border-color: var(--check-border-color) !important; + box-shadow: none !important; +} +input.is-checkradio + label::after { + border-color: var(--check-color) !important; +} +input.is-checkradio:focus + label::before { + outline: 2px solid var(--outline-color) !important; + outline-offset: 2px; +} +input.is-checkradio[type='checkbox']:hover:not([disabled]) + label::before, +input.is-checkradio[type='checkbox']:focus:not([disabled]) + label::before { + border-color: var(--check-border-color) !important; +} + +#provide-title { + /* making space for the outline of the provide title field in the create board popup */ + margin-top: 4px; +} + +/* + * Date picker + */ +#due-date-input .date-picker { + background: var(--surface); +} +#due-date-input .td-date-picker-container { + background: var(--surface); +} +#due-date-input .td-date-picker-controls-container .td-date-picker-controls-current-date { + color: var(--on-surface); +} +#due-date-input .td-date-picker-controls-container button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg-color) !important; + color: var(--text-color) !important; + border-color: var(--border-color) !important; +} +#due-date-input .td-date-picker-controls-container button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#due-date-input .td-date-picker-controls-container button:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; + box-shadow: none; +} +#due-date-input button.td-date-time-input-go-to-today { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input button.td-date-time-input-go-to-today:hover { + text-decoration: underline; +} +#due-date-input button.td-date-time-input-go-to-today:focus { + color: var(--primary); + text-decoration: underline; + outline: none; +} +#due-date-input table:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +#due-date-input th.td-date-picker-header-cell { + color: var(--on-surface); + background-color: var(--surface); +} +#due-date-input td.td-date-picker-cell { + border-color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label { + background: var(--background); + color: var(--on-background); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.label.selectable:hover { + background-color: var(--primary-muted); + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.weekend { + background: var(--surface); + color: var(--on-surface); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.today { + color: var(--primary); + border-color: transparent !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected { + background: var(--primary) !important; + color: var(--on-primary); +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.focused { + border-color: var(--primary) !important; +} +#due-date-input td.td-date-picker-cell > div.td-date-picker-cell-content.selected.focused { + border-color: var(--on-primary) !important; +} + +/* + * Notification + */ +div.notification.is-primary { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +div.notification.is-primary .icon { + color: var(--on-background); +} +div.notification.is-danger { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--error); +} +div.notification.is-danger .icon { + color: var(--error); +} +div.notification.is-warning { + background: var(--background); + color: var(--on-background); + border: 2px solid var(--primary); +} +div.notification.is-warning .icon { + color: var(--primary); +} +div.notification.is-warning a.close { + color: var(--primary); +} +div.notification.is-warning a.close:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +div.notification.is-warning a.close:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * Board + */ + +.board .header { + background: transparent; +} +.board #lanes-headers { + background: transparent; +} +.board .lane-header { + background: var(--surface); +} +.board .lane-header .label { + color: var(--on-surface); +} +.board .lane-header .lane-task-count { + background: var(--background); + color: var(--on-background); + border: 1px solid var(--on-background); +} +.board .lane { + background: var(--surface); +} + +:is(.gu-unselectable, .board) .task-container { + --text-color: var(--on-background); + + background: var(--background); + border: 1px solid var(--on-background); + color: var(--text-color); +} +:is(.gu-unselectable, .board) + .task-container + div[handle='assignee-avatar-initials'] + > .vue-avatar--wrapper { + background-color: var(--background) !important; + border: 1px solid var(--on-background); + color: var(--on-background) !important; +} +:is(.gu-unselectable, .board) .task-container [handle='assignee-avatar']:focus { + outline: 1px solid var(--primary); +} + +:is(.gu-unselectable, .board) .task-container .is-black-link { + color: var(--text-color); +} +:is(.gu-unselectable, .board) .task-container .is-black-link:focus { + outline: none; + color: var(--primary); + text-decoration: underline; +} + +:is(.gu-unselectable, .board) .task-container .formatted-text { + color: var(--text-color); +} + +:is(.gu-unselectable, .board) .task-container .icon { + color: var(--text-color) !important; +} +:is(.gu-unselectable, .board) .task-container .overdue { + color: var(--error); +} + +:is(.gu-unselectable, .board) .task-container.selected { + background: var(--background); + border-color: var(--primary-muted); + + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container:focus, +:is(.gu-unselectable, .board) .task-container:focus-within { + background: var(--background); + border-color: var(--primary); + outline: none; + border-left-width: 8px; + + --text-color: var(--on-background); +} + +.board .task-container.closed:not(:focus):not(:focus-within):not(:hover) { + background: var(--disabled); + --text-color: var(--on-disabled); +} + +.board .task-container.closed:not(:focus):not(:focus-within):hover, +.gu-unselectable .task-container.closed { + background: var(--background); + --text-color: var(--on-background); +} + +:is(.gu-unselectable, .board) .task-container .task-content.has-folded-corner::after { + border-color: var(--on-background) var(--surface); +} +:is(.gu-unselectable, .board) .task-container:focus .task-content.has-folded-corner::after, +:is(.gu-unselectable, .board) .task-container:focus-within .task-content.has-folded-corner::after { + border-color: var(--primary) var(--surface); +} + +.board .task-container.gu-transit { + background: var(--on-primary); + border-color: var(--primary); + --text-color: var(--primary); +} + +/* + * Sidebar + */ + +#side-panel { + background: var(--background); + --outline-color: var(--on-background); + --text-color: var(--on-background); +} + +#side-panel #side-panel-header span.card-header { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link { + color: var(--text-color); +} +#side-panel #side-panel-header a.is-black-link:hover { + text-decoration: underline; +} +#side-panel #side-panel-header a.is-black-link:focus { + outline: none; + --text-color: var(--primary); + text-decoration: underline; +} +#side-panel #side-panel-header .icon { + color: var(--text-color) !important; +} +#side-panel #side-panel-header button.close-button { + --bg-color: var(--background); + --text-color: var(--on-background); + --border-color: var(--on-background); +} +#side-panel #side-panel-header button.close-button:hover { + --bg-color: var(--primary); + --text-color: var(--on-primary); + --border-color: var(--primary); +} +#side-panel #side-panel-header button.close-button:active { + --bg-color: var(--on-primary); + --text-color: var(--primary); + --border-color: var(--primary); +} +#side-panel .parent-block { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); +} +#side-panel .parent-block .icon { + color: var(--text-color) !important; +} + +#side-panel .task-details .caller-name, +#side-panel .task-details .branch-name, +#side-panel .task-details .label, +#side-panel .content .label { + color: var(--text-color); +} +#side-panel .content .description-container { + --text-color: var(--on-background); + background: var(--background); + border: 1px solid var(--primary); +} +#side-panel .content .description-container::after { + border-color: var(--primary) var(--background); + bottom: -1px; + right: -1px; +} +#side-panel .content .description-container .creation-date, +#side-panel .content .description-container .description { + color: var(--text-color); +} + +#side-panel .progresstrail .pt-entry { + --text-color: var(--on-surface); + background: var(--surface); + color: var(--text-color); + border-color: var(--on-surface); +} +#side-panel .progresstrail .pt-entry .pt-header, +#side-panel .progresstrail .pt-entry .pt-header .pt-date, +#side-panel .progresstrail .pt-entry a, +#side-panel .progresstrail .pt-entry .icon, +#side-panel .progresstrail .pt-entry figcaption, +#side-panel .progresstrail .pt-entry strong { + color: var(--text-color) !important; +} +#side-panel .progresstrail .pt-entry a:active { + --text-color: var(--primary); +} +#side-panel .progresstrail .pt-entry a:focus { + outline: 2px solid var(--outline-color); + outline-offset: 2px; +} +#side-panel .progresstrail .pt-entry.flagged { + --text-color: var(--on-primary); + background: var(--primary); +} +#side-panel .progresstrail .pt-entry.invisible { + border-left-color: var(--primary); +} + +/* + * Change assignee popup + */ +.change-assignee-popover:is(.positioned-above, .positioned-below) { + border-color: var(--primary); + background-color: var(--background); +} +.change-assignee-popover.positioned-above::before { + border-top-color: var(--primary) !important; +} +.change-assignee-popover.positioned-above::after { + border-top-color: var(--background) !important; +} +.change-assignee-popover.positioned-below::before { + border-bottom-color: var(--primary) !important; +} +.change-assignee-popover.positioned-below::after { + border-bottom-color: var(--background) !important; +} + +.change-assignee-popover-action-button { + --button-clr: var(--on-background); + color: var(--button-clr) !important; + background-color: transparent !important; + text-decoration: underline; +} + +.change-assignee-popover-action-button:not(:disabled):hover, +.change-assignee-popover-action-button:not(:disabled):focus-visible { + --button-clr: var(--primary); +} + +.change-assignee-popover-action-button:disabled { + --button-clr: var(--disabled); +} + +.change-assignee-popover-divider { + border-color: var(--on-background) !important; +} + +.change-assignee-popover .user-list .user-list-option:hover, +.change-assignee-popover .user-list .user-list-option:focus { + background-color: var(--primary); + --text-color: var(--on-primary); +} +.change-assignee-popover .user-list .user-list-option [handle='user-list-option-name'] { + color: var(--text-color); +} +@media (forced-colors: none) { + .change-assignee-popover .user-list .user-list-option:focus { + outline: none; + } +} + +/* + * Edit Board popup + */ +[role='dialog'] [role='tablist'] [role='tab'] a { + color: var(--on-background); + border-bottom-color: var(--on-background); +} +[role='dialog'] [role='tablist'] [role='tab'].is-active a { + color: var(--primary); + border-bottom-color: var(--primary); +} + +/* Integration switch */ +.status-mapping .mapping.checkbox { + background: transparent; + color: var(--on-surface); +} +.status-mapping .mapping.checkbox .toggle { + border: 2px solid var(--on-surface); + background: var(--background); +} +.status-mapping .mapping.checkbox .toggle .toggle-inner { + margin: 0; + border: 2px solid var(--on-background); + background-color: var(--background); +} +.status-mapping .mapping.checkbox .toggle.enabled .toggle-inner { + background-color: var(--on-background); +} + +/* labels */ +.dnd-hint, +.lane-name.label { + color: var(--on-surface); +} + +/* status mapper */ +.lanes .status, +.lanes .status.closed { + --text-color: var(--on-background); + + background-color: var(--background); + border: 2px solid var(--on-background); +} +.lanes .status .name { + color: var(--text-color); +} +.lanes .status:hover, +.lanes .status.closed:hover { + background-color: var(--on-background); + --text-color: var(--background); +} +.lanes .status + .status { + margin-top: 4px; +} + +/* status mapper drag and drop */ +.lanes .status.gu-transit { + background: var(--background) !important; + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone, +.lanes .lane.closed .lane-settings-content.lane-drop-zone { + background: var(--background) !important; +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.allowed.over { + border: 2px solid var(--primary); +} +.lanes .lane .lane-settings-content.lane-drop-zone.drop-zone.notAllowed { + background: var(--disabled) !important; + border: 2px solid var(--background); +} + +/* + * Create note popup + */ +.modal-card-foot .feedback-link { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-buttons.*") { +/* + * Module Page Buttons + */ + +html, +body { + background: var(--surface); +} + +.richbutton { + border-color: var(--on-surface); + background: var(--background); + + overflow: auto; /* richbutton-image clips through the rounded corners of the border */ +} +.richbutton .richbutton-title, +.richbutton .richbutton-description { + color: var(--on-background); +} +.richbutton .richbutton-image { + background: var(--background); + color: var(--on-background); +} + +.richbutton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.richbutton:hover, +.richbutton:active { + border-color: var(--primary); +} +.richbutton:is(:hover, :active) .richbutton-title { + color: var(--primary); +} +.richbutton:is(:hover, :focus-visible) .richbutton-image { + background: var(--background); + color: var(--primary); +} + +.richbutton:active .richbutton-image { + background: var(--primary); + color: var(--on-primary); +} + +.richbutton .richbutton-new { + background: var(--primary); + color: var(--on-primary); +} + +@media (prefers-reduced-motion: no-preference) { + .richbutton .richbutton-image { + transition: transform; + transform-origin: center bottom; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + .richbutton:hover .richbutton-image { + transform: scale(1.1); + transition-duration: 0.15s; + transition-timing-function: ease-out; + } +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/module-page-migration-information.*") { +/* + * Module Page Migration + */ + +html, +body { + background: var(--surface); + color: var(--on-surface); +} + +a { + color: var(--primary); +} +a:hover { + color: var(--primary-muted); +} +a:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} + +button.button.is-primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} + +button.button.is-primary:focus { + color: var(--on-primary); +} +button.button.is-primary:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +button.button.is-primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*") { +/* + * Asset overview + */ + +/* + * !! Ignoring keyboard focus, as the page is completely unworkable by keyboard. + */ + +*, +*::after { + box-shadow: none !important; +} +body { + background: var(--background); + color: var(--on-background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +input[type='text'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +input[type='text']:disabled { + background: var(--background); + color: var(--on-background); + border-color: var(--disabled); +} +label.checkboxButton { + --color: var(--on-background); + --bg: var(--background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; + transition: none !important; +} +label.checkboxButton > .icon.check { + color: var(--color) !important; +} +label.checkboxButton > span.label { + /* 'Range' checkbox label for a count filter */ + color: var(--color); +} +label.checkboxButton:hover { + --color: var(--primary); + --border-color: var(--primary); +} +.overview card-header > .title > .details { + color: var(--on-background); +} + +/* Share link */ +.share-link .shareLink span { + color: var(--on-background); + text-decoration: underline; +} +.share-link .shareLink i.tiny.icon:first-child { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.share-link .shareLink:hover span { + color: var(--primary); +} +.share-link .shareLink:hover i.tiny.icon:first-child { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} + +.share-link .popover .popover-popup { + border-color: var(--surface); +} +.share-link .popover .popover-popup::after { + border-color: var(--surface); +} +.share-link .popover .popover-popup .head, +.share-link .popover .popover-popup .content, +.share-link .popover .popover-popup .foot { + background: var(--surface); + border-color: var(--on-surface); + color: var(--on-surface); +} +.share-link .popover .popover-popup .head .icon { + color: var(--on-surface); +} +.share-link .popover .popover-popup .foot .button { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.share-link .popover .popover-popup .foot .button:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.share-link .popover .popover-popup .foot .button:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} + +/* New button */ +.ui.button.tdButton.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +.ui.button.tdButton.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +.ui.button.tdButton.primary.active { + /* menu open */ + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} + +.ui.button.tdButton.dropdown .menu.white { + border: none; + background: var(--surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input { + padding: 8px; + border-color: var(--on-surface); +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input { + border: 1px solid transparent; +} +.ui.button.tdButton.dropdown .menu.white .ui.search.input input:focus { + border-color: var(--on-surface); +} + +.ui.button.tdButton.dropdown .menu.white .item { + color: var(--on-surface); + border-bottom: none; + padding: 8px 16px; + font-size: 0.875rem; + width: 150px; +} +.ui.button.tdButton.dropdown .menu.white .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.ui.button.tdButton.dropdown .menu.white .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/* Toolbar */ +card-header .toolbars .toolbar .split.buttons { + border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons :where(.tdButton, .tdActionButton, [role='button']) { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .refresh:before { + color: var(--color); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']):active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header + .toolbars + .toolbar + .split.buttons + :where(.tdButton, .tdActionButton, [role='button']).active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu { + border: none !important; +} +card-header .toolbars .toolbar .split.buttons .dropdown[data-handle='more'] .menu a.tdButton { + --bg: var(--surface); + --color: var(--on-surface); + + padding: 8px 16px; +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton[aria-disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} +card-header + .toolbars + .toolbar + .split.buttons + .dropdown[data-handle='more'] + .menu + a.tdButton:hover:not([aria-disabled='true']) { + --bg: var(--on-surface); + --color: var(--surface); +} + +/* Toolbar 'columns' menu, filter panel 'add filter' menu, and filter panel 'context' menus */ +.dropdown-content.menu { + background: var(--surface); + color: var(--on-surface); + border: none; +} +.dropdown-content.menu::after { + /* Setting this to important so it also works for the add filter menu */ + border-top-color: var(--surface) !important; +} +.dropdown-content.menu .search { + border-color: var(--on-surface); +} +.dropdown-content.menu .search .icon { + color: var(--on-background); + right: 16px; +} +.dropdown-content.menu .search input { + height: initial; + padding: 8px; + border: 1px solid transparent; +} +.dropdown-content.menu .search input:focus { + border-color: var(--on-surface); +} +.dropdown-content.menu .header { + background: var(--background); + color: var(--on-background); + border-top: 4px solid var(--surface); +} +.dropdown-content.menu .footer { + border-color: var(--on-surface); +} +.dropdown-content.menu .item { + --filter: var(--on-surface-filter); + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; +} +.dropdown-content.menu .item .icon.small { + filter: var(--filter) !important; +} +.dropdown-content.menu .item label, +.dropdown-content.menu .item.is-active label, +.dropdown-content.menu .item .filter-header label { + /* Item label in add filter menu and filter context menu*/ + color: var(--color); +} +.dropdown-content.menu .item.selected, +.dropdown-content.menu .item.is-active { + --filter: var(--on-primary-filter); + --bg: var(--primary); + --color: var(--on-primary); +} +.dropdown-content.menu .item:hover { + --filter: var(--surface-filter); + --bg: var(--on-surface); + --color: var(--surface); +} +.dropdown-content.menu .item.disabled { + opacity: initial; + --bg: var(--disabled); + --color: var(--on-disabled); + --filter: var(--on-disabled-filter); +} +.dropdown-content.menu .item [role='checkbox'] { + background: var(--background); + border-color: var(--on-background); +} +.dropdown-content.menu .item [role='checkbox'] > .check { + color: var(--on-background); +} +.dropdown-content.menu .footer .tdActionButton.reset { + --bg: var(--surface); + --color: var(--primary); + padding: 8px; + text-decoration: underline; +} + +/* + * Filter panel + */ +asset-filter.panel { + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header { + border-color: var(--on-background); +} +asset-filter.panel > .header span { + color: var(--on-background); +} +asset-filter.panel .bordered { + border-color: var(--on-background); +} +asset-filter.panel .subheader { + color: var(--on-background); +} +asset-filter.panel .subheader .icon { + color: var(--on-background); +} +asset-filter.panel .filter-message { + color: var(--on-background); +} +/* Collapse/expand button */ +asset-filter.panel > .header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel > .header .tdActionButton:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* Search */ +asset-filter.panel > .content .highlighted { + background: var(--primary); + border-bottom: 1px solid var(--on-background); +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input { + height: 2rem; + border-color: transparent; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch input:focus { + outline: 2px solid var(--on-primary); + outline-offset: 2px; +} +asset-filter.panel > .content .highlighted .asset-filter-quicksearch .icon { + color: var(--on-background); + display: flex; + align-items: center; +} + +/* Saved filters actions */ +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button { + background: var(--background); + color: var(--on-background); + transition: none !important; + text-shadow: none !important; +} +asset-filter.panel + .filter-overviews + .subheader + .icon-buttons + button.icon-button:not(:disabled):hover { + background: var(--on-background); + color: var(--background); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:active { + background: var(--surface); + color: var(--on-surface); + border: 1px solid var(--on-surface); +} +asset-filter.panel .filter-overviews .subheader .icon-buttons button.icon-button:disabled { + color: var(--disabled); +} +/* Saved filters action popups */ +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup { + background: var(--surface); + color: var(--on-surface); + border-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup::after { + border-top-color: var(--surface); +} +asset-filter.panel + .filter-overviews + :is(.save-view-component, .delete-view-component) + .popover + .popover-popup + .foot { + background: var(--surface); + border-color: var(--on-surface); +} +/* Filter visibility dropdown */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown { + --color: var(--on-surface); + + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .icon { + color: var(--color); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown:hover { + --color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu { + border: 1px solid var(--on-surface); + border-radius: 0; + + width: fit-content; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item { + background: var(--surface); + color: var(--on-surface); + + padding: 8px 16px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item.selected { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .visibility-selector + .inline-dropdown + .menu + .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* Saved filters save action popup */ +asset-filter.panel .filter-overviews .save-view-component .popover .popover-popup input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier { + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a { + color: var(--primary); + text-decoration: underline; +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .content + .view-modifier + a:hover { + color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + .icon { + color: var(--on-surface); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + .feedback + span { + color: var(--on-surface); +} +/* Saved filters save action save button */ +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary { + color: var(--on-primary); + background: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:hover { + color: var(--on-primary); + background: var(--primary-muted); + border-color: var(--primary-muted); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button.primary:active { + color: var(--primary); + background: var(--background); + border-color: var(--primary); +} +asset-filter.panel + .filter-overviews + .save-view-component + .popover + .popover-popup + .foot + button:disabled { + color: var(--on-disabled); + background: var(--disabled); + border-color: var(--on-disabled); +} +/* Saved filters delete popup delete button */ +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive { + color: var(--on-error); + background: var(--error); + border-color: var(--error); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button.destructive:active { + color: var(--error); + background: var(--on-error); + border-color: var(--error); +} +/* Saved filters delete popup cancel button */ +asset-filter.panel .filter-overviews .delete-view-component .popover .popover-popup .foot button { + color: var(--on-background); + background: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:hover { + color: var(--background); + background: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .filter-overviews + .delete-view-component + .popover + .popover-popup + .foot + button:active { + color: var(--on-surface); + background: var(--surface); + border-color: var(--on-surface); +} +/* Saved filters list */ +asset-filter.panel .filter-overviews li { + --color: var(--on-background); + color: var(--color); +} +asset-filter.panel .filter-overviews li .icon.edited { + color: var(--color); +} +asset-filter.panel .filter-overviews li:hover { + --color: var(--background); + background: var(--on-background); +} +asset-filter.panel .filter-overviews li.selected { + --color: var(--on-primary); + background: var(--primary); +} + +/* Filter */ +asset-filter.panel .asset-filter-item .filter-header > :is(.icon, label, .filter-title) { + color: var(--on-background); +} +/* delete button/context menu button */ +asset-filter.panel .asset-filter-item .filter-header .tdActionButton > .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:hover > .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .filter-header .tdActionButton:active > .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* add filter button */ +asset-filter.panel .actions .create.tdActionButton > .icon.add { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:hover > .icon.add { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .actions .create.tdActionButton:active > .icon.add { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel .actions .create.tdActionButton > .icon.chevron { + color: var(--on-background); +} +/* filter with buttons */ +asset-filter.panel .asset-filter-item .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + transition: none !important; +} +asset-filter.panel .asset-filter-item .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item .tdButton:active { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel .asset-filter-item .tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +/* filter with select */ +asset-filter.panel .asset-filter-item [role='combobox'] { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text { + color: var(--on-background); + opacity: initial; +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.clickable:hover { + color: var(--primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] > a.text.opened::after { + color: var(--on-surface); + border-color: var(--surface); + background: var(--surface); + opacity: initial; +} +/* filter with select menu */ +asset-filter.panel .asset-filter-item [role='combobox'] .menu { + background: var(--surface); + border-color: var(--surface); + --color: var(--on-surface); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item { + color: var(--color); + padding: 4px 2px; + border-color: transparent; +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item .icon { + color: var(--color); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +asset-filter.panel .asset-filter-item [role='combobox'] .menu .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +/* filter on date */ +asset-filter.panel .asset-filter-item .dateField > input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background) !important; +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu { + border-color: var(--surface); +} +/* filter on date ranges */ +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges { + background: var(--surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li { + color: var(--on-surface); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li.active { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel .asset-filter-item .dateField .daterangepicker.dropdown-menu .ranges li:hover { + background: var(--on-surface); + color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs { + background: var(--surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:hover { + background: var(--primary-muted); + color: var(--on-primary); + border-color: var(--primary-muted); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button.primary:active { + background: var(--on-primary); + color: var(--primary); + border-color: var(--primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu + .ranges + .range_inputs + button:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Filter on date custom range calendar */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Filter on date custom range calendar table */ +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +asset-filter.panel + .asset-filter-item + .dateField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} +/* filter field focus */ +asset-filter.panel .asset-filter-item .filter-content > input[type='text']:focus, +asset-filter.panel .asset-filter-item [role='combobox']:focus-within, +asset-filter.panel .asset-filter-item input[type='text'].numberField:focus, +asset-filter.panel .asset-filter-item .dateField > input:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* Types */ +asset-filter.panel .typeFilters li { + --color: var(--on-background); +} +asset-filter.panel .typeFilters li > span { + color: var(--color); +} +asset-filter.panel .typeFilters li:hover { + background: var(--on-background); + --color: var(--background); +} + +/* Grid */ +grid .overviewFooter { + margin-top: 1rem; + background: transparent; + border: none; +} +grid .overviewFooter p { + color: var(--on-background); +} +grid .pagination { + color: var(--on-background); + margin-bottom: 1rem; +} +grid .pagination .loadMore { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +grid .pagination .loadMore:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +grid .pagination .loadMore:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +grid .pagination p { + color: var(--on-background); +} +/*Grid table*/ +grid table.tdGrid { + border: none; +} +grid table.tdGrid thead { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: transparent; + + border-bottom: 1px solid var(--on-surface); +} +grid table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +grid table.tdGrid :is(th, td) { + background: var(--bg) !important; + color: var(--color) !important; + + border-left: none !important; +} +grid table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +grid table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +grid table.tdGrid th.check, +grid table.tdGrid tbody tr td.check { + vertical-align: top; + padding-top: 10px; +} +grid table.tdGrid tbody tr td { + vertical-align: top; + padding: 8px; +} +grid table.tdGrid tbody tr td .row-element { + align-items: flex-start; +} +grid table.tdGrid tbody tr td .row-element .icon { + color: var(--color); +} +grid table.tdGrid tbody tr td .row-element .icon.interruption { + color: var(--error) !important; +} +grid table.tdGrid tbody tr td .row-element p { + margin: 0; +} +grid table.tdGrid tbody tr td .row-element .details { + color: var(--color); +} +grid table.tdGrid [data-tooltip]::after { + /* tooltip */ + background: var(--surface); + color: var(--on-surface); +} + +/* Feedback button */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / Bulk action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction p, +.tdOverlay .body .instruction .icon { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +/* import popup */ +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton > .icon.expanded { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > .tdActionButton:hover > .icon.expanded { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset + .body.upload + > .accordion + > .title + > .tdActionButton:active + > .icon.expanded { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .title > span { + color: var(--on-surface); +} +.tdOverlay.importAsset .body.upload > .accordion > .content ul li { + color: var(--on-surface) !important; +} +.tdOverlay.importAsset .body.upload > .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea.drag-over { + border-color: var(--primary); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay.importAsset .body.upload > .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* export popup */ +.tdOverlay.exportAsset > .body > .info > .icon.spreadsheet { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body > .info > p { + color: var(--on-surface); +} +.tdOverlay.exportAsset > .body .field + .field { + margin-top: 4px; +} + +.tdOverlay.exportAsset > .body .radio.checkbox { + display: flex; + align-items: center; + + --pip: var(--background); + --border-color: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox.checked { + --pip: var(--on-background); +} +.tdOverlay.exportAsset > .body .radio.checkbox:hover { + --pip: var(--primary); + --border-color: var(--primary); +} +.tdOverlay.exportAsset > .body input[type='radio'] { + appearance: none; + border: 1px solid var(--on-background); + border-radius: 50%; + height: 14px; + aspect-ratio: 1; + background: var(--background); + + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 3px var(--pip) !important; + border-color: var(--border-color); +} +.tdOverlay.exportAsset > .body input[type='radio']:checked { + box-shadow: inset 0 0 0 2px var(--background), inset 0 0 0 7px var(--pip) !important; +} + +/* + * AM is transitioning to DS components, the styles needed to make that work live here. + */ + +/* Bulk edit button */ +bulk-edit-button { + background: transparent; /* Background of the container for the button, i.e. not the button itself */ + + --bulk-edit-button-background-color: transparent; /* background */ + --bulk-edit-button-text-color: var(--on-background); /* foreground */ + --bulk-edit-button-border-color: var(--on-background); /* border */ +} + +/* + * Feedback link, Copy of DS component feedback link + */ +feedback-link { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +feedback-link:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ + + /* --ds-color-bg-insight-emphasis: var(--on-background); :active background */ +} +feedback-link:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ +} +feedback-link:focus-within { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +overview-grid { + color: var(--on-background); /* Selection count */ + + /* + * Copy of design-system/search.css + */ + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ + + /* + * Copied and adjusted to fit from design-system/datatable.css + */ + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* --ds-color-fg-primary-subtle clashes with the pagination, so I can't use --on-background here as in the normal ds-datatable */ + --ds-color-bg-primary-emphasis: var(--primary); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + /* --ds-color-border-primary-default: var(--on-background); status loading (Clashes with search :focus & :hover styling) */ + --ds-color-border-warning-default: var(--error); /* status error */ + + /* + * Slotted content + */ + --ds-color-fg-primary-default: var(--on-background); /* table row:not(:checked) icon color */ + --ds-color-fg-primary-emphasis: var(--on-background); /* table row:checked icon color */ + + --ds-color-bg-danger-mild: var(--error); /* impacted tag background */ + --ds-color-fg-danger-emphasis: var(--on-error); /* impacted tag foreground */ + + /* To make the header and footer readable in older version of ds table. */ + --ds-color-bg-subtle: var(--background); + + /* + * Copy of design-system/pagination.css + */ + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground (clashes with checkmark in table) */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ + + /* Special variable for slotted links in the table */ + --overview-link-color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/card.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/settings.*") { +*, +*::after, +*::before { + box-shadow: none !important; + transition: none !important; +} +body { + background: var(--background); +} +::selection { + background: var(--selection) !important; + color: var(--on-selection) !important; +} +h1 { + color: var(--on-background); +} +.tdTab { + padding: 0 16px; /* Aligning content with header, and other cards in topdesk */ + z-index: 0; +} +i.loading::before { + border-color: var(--on-primary) !important; +} +i.loading::after { + border-color: var(--primary) !important; +} + +/* + * Card toolbar + */ +/* Warning message */ +card-header .toolbars .toolbar .warning.message { + background: var(--background); + color: var(--primary); + border: 1px solid var(--primary); +} +card-header .toolbars .toolbar .warning.message a { + color: var(--primary); +} +card-header .toolbars .toolbar .warning.message a:hover { + background: var(--primary); + color: var(--on-primary); +} +/* Button container */ +card-header .toolbars .toolbar .split.buttons { + border: none; /* There's a weird space between the button and the border of the container */ + min-height: unset; /* Re-adjust the height */ +} +card-header .toolbars .toolbar .split.buttons .tdButton.iconed::before { + margin-top: 2px; /* Adjust the icons to sit in the center vertically */ +} +/* Buttons */ +card-header .toolbars { + /* + * Isolating the toolbars to their own layer. + * This keeps disabled buttons visible (they have z-index:-1) in the graphical overview. + * And the z-index: 1 makes sure the menus draw on top of the card content. + */ + z-index: 1; +} +card-header .toolbars .toolbar .tdButton, +card-header .toolbars .toolbar .dropdown[data-handle='more'] { + /* More button in template designer */ + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border: 1px solid var(--border-color) !important; +} +card-header .toolbars .toolbar .split.buttons .tdButton:not(:first-child) { + margin-left: -1px; /* Move adjacent button borders on top of eachother */ +} +card-header .toolbars .toolbar .tdButton:hover, +card-header .toolbars .toolbar .tdButton.dropdown.active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'].active { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +card-header .toolbars .toolbar .tdButton:active, +card-header .toolbars .toolbar .dropdown[data-handle='more']:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton.primary:active { + --bg: var(--background); + --color: var(--primary); + --border-color: var(--primary); +} +card-header .toolbars .toolbar .tdButton:disabled, +card-header .toolbars .toolbar .tdButton.enabled.active /* View toggle */ { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); + z-index: -1; /* Prefer the border of non-disabled buttons */ +} +card-header .toolbars .toolbar .tdButton.iconed::before { + color: var(--color); +} +card-header .toolbars .toolbar .tdButton:focus-visible, +card-header .toolbars .toolbar .dropdown[data-handle='more']:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + z-index: 1; /* The outline should be on top of adjacent buttons */ +} +/* Dropdown menu */ +card-header .toolbars .toolbar .tdButton.dropdown .menu, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu { + border: none !important; + border-radius: unset; +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item { + border: none !important; + margin-left: unset; + padding: 8px 16px; + + --bg: var(--surface); + --color: var(--on-surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item:hover, +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item.selected, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item:hover, +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item.selected { + --bg: var(--on-surface); + --color: var(--surface); +} +card-header .toolbars .toolbar .tdButton.dropdown .menu .tdButton.item[disabled='true'], +card-header .toolbars .toolbar .dropdown[data-handle='more'] .menu .tdButton.item[disabled='true'] { + --bg: var(--disabled); + --color: var(--on-disabled); +} + +/* +* General Widget things +*/ +.tdWidgetContainer { + border: none; +} +/* Error indicator. This just pops up in some places */ +.state.conflict.icon { + color: var(--error) !important; +} +/* title/toolbar */ +.tdWidgetContainer .toolbar { + background: var(--surface); + border: none; +} +.tdWidgetContainer .toolbar .editable-title { + color: var(--on-background); +} +.tdWidgetContainer .toolbar .toolbarSeparator { + background: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items button.item:hover { + color: var(--primary); +} +.tdWidgetContainer .toolbar .items button.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer .toolbar .items button.item[disabled] { + background: var(--disabled); + color: var(--on-disabled); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown > :is(.icon, label) { + color: var(--text-color); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown { + --text-color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown:hover { + --text-color: var(--primary); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active { + background: var(--on-surface); + --text-color: var(--surface); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu { + background: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item { + color: var(--on-surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar .items .filter.item.ui.dropdown.active .menu .item.active:hover { + /* The .active class does not seem to have a purpose, but forces a background that is equal to normal hover nonetheless */ + background: var(--on-surface) !important; + color: var(--surface) !important; +} +/* Toolbar popout area */ +.tdWidgetContainer .workareas .workarea { + background: var(--surface); + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .body > .icon { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea :is(.fieldlabels, .message, h4) { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer { + border-color: var(--on-surface); + border-bottom: none; +} +/* Toolbar popout area buttons */ +.tdWidgetContainer .workareas .workarea .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .footer .tdButton:disabled { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* Inline dropdown, like selects but somehow different */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text:hover + .chevron { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu { + background: var(--background); + border: 1px solid var(--on-background); + border-radius: 0px; + + left: unset; + right: unset; +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item { + background: var(--background); + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item:hover { + background: var(--on-background); + color: var(--background); +} +/* Checkboxes, also slightly different then in widget content for some reason */ +.tdWidgetContainer .workareas .workarea .field .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton .check { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .field .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Empty widget */ +.tdWidgetContainer:not([data-handle='relationshipWidget']) .widget > .empty :is(.icon, span) { + /* see the relationship widget for the reason of the exception here */ + color: var(--on-background); +} + +/* + * Fields + */ +/* labels */ +.field .fieldlabels { + color: var(--on-background); +} +.field .fieldlabels.error { + color: var(--error); +} +/* text field */ +.field .fields.textField :where(input, textarea) { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.textField :where(input, textarea).error { + background: var(--background); + color: var(--error); + border-color: var(--error); +} +.field .fields.textField :where(input, textarea):focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* select */ +.field .fields.suggestField .selection { + --color: var(--on-background); + + background: var(--background); + color: var(--color); + border-color: var(--on-background); +} +.field .fields.suggestField .selection.error { + --color: var(--error); + + background: var(--background); + border-color: var(--error); +} +.field .fields.suggestField .selection .chevron { + color: var(--color); +} +.field .fields.suggestField .selection input { + color: var(--color); + outline: none; +} +.field .fields.suggestField .selection .text { + color: var(--color); + opacity: revert; +} +.field .fields.suggestField .selection .text.clickable::after { + color: var(--primary); + border-color: var(--primary); + opacity: revert; +} +.field .fields.suggestField .selection:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field .fields.suggestField .selection .menu { + border-radius: 0; + border: 1px solid var(--on-background); +} +.field .fields.suggestField .selection .menu .item { + --bg: var(--background); + --color: var(--on-background); + border: none; + + background: var(--bg); + color: var(--color); + padding: 8px; +} +.field .fields.suggestField .selection .menu .item .icon { + color: var(--color) !important; +} +.field .fields.suggestField .selection .menu .item.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +.field .fields.suggestField .selection .menu .item .inactive { + --color: var(--disabled); +} +.field .fields.suggestField .selection .menu .item:hover { + --bg: var(--on-background); + --color: var(--background); +} +.field .fields.suggestField .selection .menu .item > .overflow { + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.suggestField .selection .message { + background: var(--background); + color: var(--on-background); +} +.field .fields.suggestField .selection .placeholder { + color: var(--on-background); +} +/* Checkbox */ +.field .fields.checkboxField .checkboxButton { + --color: var(--on-background); + + background: var(--background); + border-color: var(--on-background); +} +.field .fields.checkboxField .checkboxButton.disabled { + --color: var(--on-disabled); + + background: var(--disabled); + border-color: var(--on-disabled); +} +.field .fields.checkboxField .checkboxButton.checked.disabled { + --color: var(--on-background); + + background: var(--background); + border-color: var(--background); +} +.field .fields.checkboxField .checkboxButton .check { + color: var(--color); +} +.field .fields.checkboxField .checkboxButton:focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Numberfield */ +.field .fields.numberField .inputWithDecorationContainer { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field .fields.numberField .inputWithDecorationContainer.error { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.numberField input { + background: var(--bg); + color: var(--color); + border-color: var(--border); +} +.field .fields.numberField :where(.pre, .post) { + color: var(--color) !important; +} +.field .fields.numberField input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* Datetimefield */ +.field .fields.dateTimeField { + --bg: var(--background); + --color: var(--on-background); + --border: var(--on-background); +} +.field[aria-invalid='true'] .fields.dateTimeField { + --bg: var(--background); + --color: var(--error); + --border: var(--error); +} +.field .fields.dateTimeField :where(.dateField, .timeField) { + border: 1px solid var(--border); +} +.field .fields.dateTimeField input { + background: var(--bg); + color: var(--color); + border: none; +} +.field .fields.dateTimeField .timeField { + border-left: none; +} +.field .fields.dateTimeField .timeField .icon.time { + color: var(--color); +} +.field .fields.dateTimeField input::placeholder { + color: var(--color); +} +.field .fields.dateTimeField :where(.dateField, .timeField):focus-within { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* time field layout fix, i.e. place clock icon inside field */ +.field .fields.dateTimeField .dateField { + flex: revert; + flex-grow: 1; +} +.field .fields.dateTimeField .timeField { + flex: revert; + width: 9ch; + + display: flex; + flex-direction: row-reverse; +} +.field .fields.dateTimeField .timeField input { + padding-right: 3px; +} +.field .fields.dateTimeField .timeField .handle { + background: var(--bg); + display: flex; + align-items: center; + padding-left: 3px; +} +.field .fields.dateTimeField .timeField .handle .icon.time { + margin-top: 2px; + margin-right: -2px; +} +/* date field datepicker */ +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar { + background: var(--surface); + border-color: var(--surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar { + background: var(--surface); + border-left-color: var(--on-surface); + border-bottom-color: var(--surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input + input { + border-color: var(--on-background) !important; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .daterangepicker_input::after { + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton + .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:hover + .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .tdActionButton:active + .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.field .fields.dateTimeField .daterangepicker.dropdown-menu.show-calendar .calendar select:focus { + border-color: var(--on-background); + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + th, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.week { + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available { + background: var(--background); + color: var(--on-background); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:first-of-type + td.available { + border-top: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + tr:last-of-type + td.available { + border-bottom: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:nth-of-type(2) { + border-left: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:last-of-type { + border-right: 1px solid var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.weekend { + background: var(--surface); + color: var(--on-surface); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td:not(.off) { + font-weight: bold; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.today::before { + border-color: currentColor; + border-radius: 50%; + aspect-ratio: 1; + inset: 2px; +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.in-range { + background: var(--primary); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.start-date, +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.end-date { + background: var(--primary-muted); + color: var(--on-primary); +} +.field + .fields.dateTimeField + .daterangepicker.dropdown-menu.show-calendar + .calendar + .calendar-table + td.available:hover { + background: var(--on-background); + color: var(--background); +} + +/* + * General widget + */ +/* collapsed ID and specification */ +.tdWidgetContainer[data-handle='generalWidget'] section > label { + color: var(--on-background) !important; +} +/* edit button */ +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand .icon { + background: var(--bg); + color: var(--pen); + border-color: var(--circle); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand { + --bg: var(--background); + --pen: var(--on-background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:hover { + --bg: var(--on-background); + --pen: var(--background); + --circle: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:active { + --bg: var(--surface); + --pen: var(--on-surface); + --circle: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .tdActionButton.expand:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* status display */ +.tdWidgetContainer[data-handle='generalWidget'] .status-display :is(.text, .icon, .status.label) { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu { + border-radius: 0; + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item { + background: var(--surface); + color: var(--on-surface); + padding: 8px 4px; + border: 2px solid var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item.selected { + background: var(--background); + color: var(--primary); + border-color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-display .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); + border-color: var(--on-surface); +} +/* status switch */ +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch label::after { + box-shadow: inset 0 0 0 2px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='generalWidget'] + .status-switch + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-icon: var(--background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted { + --thumb-bg: var(--error); + --thumb-icon: var(--on-error); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch[disabled='true'] { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--background); + --thumb-icon: var(--on-background); + --thumb-border: var(--on-background); +} +.tdWidgetContainer[data-handle='generalWidget'] .status-switch.impacted[disabled='true'] { + --thumb-icon: var(--error); + --thumb-border: var(--error); +} +/* asset icon */ +.tdWidgetContainer[data-handle='generalWidget'] .icon.assettype { + color: var(--on-background) !important; + border-color: var(--on-background) !important; /* separator */ +} + +/* + * History widget + */ +.tdWidgetContainer[data-handle='historyWidget'] .togglebuttons { + border-color: var(--on-background); +} +/* buttons */ +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton.active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='historyWidget'] button.tdButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +/* feed */ +.tdWidgetContainer[data-handle='historyWidget'] h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .feed .label .icon { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event:not(:last-of-type) { + margin-bottom: 16px; /* Spread each record a bit for readability */ +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .act { + /* If summary spills into multiple lines, subsequent lines get a little indent */ + text-indent: -8px; + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] .history.widget .feed .event .summary .description { + font-weight: normal; /* allow the user to "pop" */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .summary + :is(.user, .description, .date), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + :is(.fieldname, .decorator, .value), +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .icon.small, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.fieldModified + .value.new, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .briefDescription + > span:last-of-type, +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + color: var(--primary); +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content { + line-height: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + .content { + padding-top: revert; /* "Reason: ..." takes a lot of vertical space */ +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > * { + padding-left: 8px; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + > *:first-child { + padding-left: revert; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a { + text-decoration: underline; +} +.tdWidgetContainer[data-handle='historyWidget'] + .history.widget + .feed + .event + .eventdetail.list + .item + .content + a:hover { + color: var(--primary-muted); +} +/* pagination */ +.tdWidgetContainer[data-handle='historyWidget'] + .pagination + :is(.items-summary, .items-summary__number, p) { + color: var(--on-background); +} + +/* + * Relationship widget + * + * This widget can't be styled at the moment. The asset part of the widget uses a custom element with shadow DOM that + * can not (yet) be styled with Stylus (https://github.com/openstyles/stylus/issues/739). + * + * And for some reason the custom element root itself does not take a background color, so the whole widget must be + * reset to the original background color. + * + * Styling only the services part would then make the widget become disjointed. + */ +.tdWidgetContainer[data-handle='relationshipWidget'] .relationship.widget { + background: white; +} + +/* + * Assignment widget + */ +.tdWidgetContainer[data-handle='assignmentWidget'] h4 { + color: var(--on-background); +} +/* items */ +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='assignmentWidget'] .tdContentList .item .content > a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* + * Dataset widget + */ +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid thead th { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td { + color: var(--color); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='gridWidget'] table.tdGrid tbody td .checkboxButton .check { + color: var(--on-background); +} + +/* + * Documents widget + */ +/* File drop area */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea.drag-over { + color: var(--primary); + border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .fileDropArea .tdButton:active { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +/* Files to upload */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item { + border-bottom: none; +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item > :is(.icon, .content) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .list .item .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* File upload progress */ +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress { + background: var(--background); + border: 1px solid var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress .bar { + background: repeating-linear-gradient( + -45deg, + var(--primary) 0px, + var(--primary) 16px, + var(--primary-muted) 16px, + var(--primary-muted) 32px + ); +} +.tdWidgetContainer[data-handle='documentWidget'] .workarea .progress.error .bar { + background: var(--error) !important; +} +/* document list */ +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--background); + + border-color: var(--border-color) !important; + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item.selected { + --border-color: var(--primary); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item:focus-visible { + outline: 2px solid var(--on-background) !important; + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .icon { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content > .details { + color: var(--color); +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a { + color: var(--color); + text-decoration: underline; +} +.tdWidgetContainer[data-handle='documentWidget'] .tdContentList .item .content a:hover { + background: var(--primary); + color: var(--on-primary); +} + +/* +* Relationship grid widget +*/ +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode { + margin: 0; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header { + padding: 12px 16px; + background: var(--surface); + margin: 0; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode .header :is(.icon, h4) { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid { + border: none; + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + :is(tbody, tr, th, td) { + border: none; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead { + background: var(--surface); + border-bottom: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid thead th { + padding: 12px 16px; + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody { + --bg: var(--background); + --color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody tr { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr.selected { + --bg: var(--primary-muted); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + tr:hover { + --bg: var(--on-background); + --color: var(--background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] .content-card-mode table.tdGrid tbody td { + padding: 6px 16px; + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .row-element + :is(.icon, .details) { + color: var(--color); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton { + background: var(--background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='relationshipGridWidget'] + .content-card-mode + table.tdGrid + tbody + td + .checkboxButton + .check { + color: var(--on-background); +} + +/* +* Reservations widget +*/ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget h4 { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .column + .column { + border-color: var(--on-background); +} +/* switch label */ +.tdWidgetContainer[data-handle='reservationsWidget'] .reservations.widget .row span { + color: var(--on-background); +} +/* switch control */ +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label { + background: var(--border) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::before { + background: var(--bg) !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle label::after { + box-shadow: inset 0 0 0 1px var(--thumb-border) !important; + background: var(--thumb-bg) !important; + color: var(--thumb-icon) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer[data-handle='reservationsWidget'] + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(12px); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle { + --border: var(--on-background); + --bg: var(--background); + + --thumb-bg: var(--on-background); + --thumb-border: var(--thumb-bg); +} +.tdWidgetContainer[data-handle='reservationsWidget'] .toggle.disabled { + --border: var(--on-disabled); + --bg: var(--disabled); + + --thumb-bg: var(--disabled); + --thumb-border: var(--on-disabled); +} + +/* + * Graphical overview + */ +body .card.takeoverMode { + background: var(--background); +} +body .card.takeoverMode card-header { + background: none; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle { + stroke: unset; + fill: unset; +} +body .card.takeoverMode .graphicalOverview .nodes .node, +body .card.takeoverMode .graphicalOverview .nodes .node .action { + --bg: var(--background); + --icon: var(--on-background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:hover, +body .card.takeoverMode .graphicalOverview .nodes .node .action:hover { + --bg: var(--on-background); + --icon: var(--background); + --border: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node:active, +body .card.takeoverMode .graphicalOverview .nodes .node .action:active { + --bg: var(--surface); + --icon: var(--on-surface); + --border: var(--on-surface); +} +/* Node */ +body .card.takeoverMode .graphicalOverview .nodes .node circle.invisible { + fill: var(--bg); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.highlight { + fill: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.nodeborder { + fill: var(--bg); + stroke: var(--border); + stroke-width: 1px; +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.selectable { + stroke: var(--primary); + stroke-width: 3px; +} +body + .card.takeoverMode + .graphicalOverview + .nodes + .node + circle.selectable:not([r='0']) + ~ circle.nodeborder { + --border: var(--background); +} +body .card.takeoverMode .graphicalOverview .nodes .node circle.red { + stroke: var(--error); /* impacted node */ + fill: var(--bg); +} +/* Node action */ +body .card.takeoverMode .graphicalOverview .nodes .node .action circle { + fill: var(--bg); + stroke: var(--border); +} +/* icon */ +body .card.takeoverMode .graphicalOverview .nodes .node use { + fill: var(--icon); +} +/* Node label */ +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel rect { + fill: var(--surface); +} +body .card.takeoverMode .graphicalOverview .nodes .nodeLabel text { + fill: var(--on-surface); +} +/* Edges */ +body .card.takeoverMode .graphicalOverview .edges path { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .paths text { + stroke: var(--on-background); +} +body .card.takeoverMode .graphicalOverview .arrowLabels textPath { + fill: var(--on-background); +} + +/* + * Graphical overview sidebar + */ +body .card.takeoverMode .cardPreview .header { + background: var(--surface); + border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header :is(.previewTitle, .previewSubTitle) { + color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +body .card.takeoverMode .cardPreview .header .close:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +body .card.takeoverMode .cardPreview .header .close .icon { + background: var(--bg); + color: var(--color); + border-color: var(--border-color); +} +body .card.mini .fieldset.widget .field .fieldlabels { + color: var(--on-background); +} + +/* + * Feedback button + */ +button.feedback { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:hover { + background: var(--on-background); + color: var(--background); + border-color: var(--background); +} +button.feedback:focus { + background: var(--background); + color: var(--primary); + border-color: var(--primary); +} +button.feedback:active { + background: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +button.feedback:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +button.feedback::before, +button.feedback::after { + display: none; +} +/* Feedback popup / action popups */ +.tdOverlay { + background: var(--surface); +} +.tdOverlay .header { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .header .close .icon { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay .header .close:hover .icon { + background: var(--on-background); + color: var(--background); + border-color: var(--on-background); +} +.tdOverlay .header .close:active .icon { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer { + background: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} +.tdOverlay .footer > span { + color: var(--on-surface) !important; +} +.tdOverlay .footer .conflict.icon { + color: var(--error) !important; +} +.tdOverlay .footer .tdButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; + + transition: none; +} +.tdOverlay .footer .tdButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdOverlay .footer .tdButton.primary { + --bg: var(--primary); + --color: var(--on-primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.primary:hover { + --bg: var(--primary-muted); + --color: var(--on-primary); + --border-color: var(--primary-muted); +} +.tdOverlay .footer .tdButton.primary:active { + --bg: var(--on-primary); + --color: var(--primary); + --border-color: var(--primary); +} +.tdOverlay .footer .tdButton.destructive { + --bg: var(--error); + --color: var(--on-error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton.destructive:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdOverlay .footer .tdButton.destructive:active { + --bg: var(--on-error); + --color: var(--error); + --border-color: var(--error); +} +.tdOverlay .footer .tdButton[disabled] { + --bg: var(--disabled); + --color: var(--on-disabled); + --border-color: var(--on-disabled); +} +/* delete popup and confirmation popup */ +.tdOverlay .body .instruction :is(p, .icon, h4) { + color: var(--on-surface) !important; +} +/* archive popup */ +.tdOverlay.confirmArchive .instruction, +.tdOverlay.confirmArchive .fieldlabels { + color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdOverlay.confirmArchive .dropdown:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdOverlay.confirmArchive .dropdown .text { + color: var(--on-background); + opacity: 1; +} +.tdOverlay.confirmArchive .dropdown .menu { + background: var(--surface); + border-color: var(--on-surface); +} +.tdOverlay.confirmArchive .dropdown .menu .item { + padding: 4px; + color: var(--on-surface); + border: none; +} +.tdOverlay.confirmArchive .dropdown .menu .item.selected { + background: var(--primary); + color: var(--on-primary); +} +.tdOverlay.confirmArchive .dropdown .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} + +/*************** + * DESIGN MODE * + ***************/ + +card-header .editable-title { + color: var(--on-background); +} + +/* + * card/widget title edit + */ +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +:is(card-header, .toolbar.designmode) .editable-title .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input { + background: var(--background) !important; + color: var(--on-background) !important; + border-color: var(--on-background) !important; +} +:is(card-header, .toolbar.designmode) .editable-title input:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Drag handles + */ +.dragHandle .icon { + color: var(--color) !important; +} +.dragHandle:hover { + --color: var(--primary) !important; +} +/* Field drag handle */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .dragHandle { + --color: var(--on-background); +} + +/* Dragging widget background */ +.tdWidgetContainer.being-dragged.drag-element { + background: var(--background); +} +/* Dragging field background */ +.field.being-dragged { + background: var(--background); + border: 1px solid var(--primary); +} +/* Widget drop target */ +.drop-zone.drag-over::before { + border-color: var(--primary) !important; + background: var(--background) !important; +} +.drop-zone.drag-over::after { + background: var(--primary) !important; +} + +/* + * Toolbar + */ +/* Toolbar drag handle */ +.tdWidgetContainer .toolbar.designmode .dragHandle { + --color: var(--on-surface); +} +/* delete button */ +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] { + --color: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget'] .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode button.iconed[data-handle='removeWidget']:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +/* Extra actions */ +.tdWidgetContainer .toolbar.designmode .dropdown.item { + --color: var(--on-surface); + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:hover { + --color: var(--primary); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item:focus-visible { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .icon { + color: var(--color); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item.active { + --color: var(--surface); + background: var(--on-surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item { + background: var(--surface); + color: var(--on-surface); + + padding: 6px; +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item:hover { + background: var(--on-surface); + color: var(--surface); +} +.tdWidgetContainer .toolbar.designmode .dropdown.item .menu .item.disabled { + background: var(--disabled); + color: var(--on-disabled); +} + +/* + * Layout toggle button + */ +card-header .toolbars .toolbar .split.buttons .tdButton.toggle.active { + /* Design mode layout toggle */ + background: var(--disabled) !important; + color: var(--on-disabled) !important; + border-color: var(--on-disabled) !important; + z-index: -1; /* Prefer the border of non-disabled buttons */ +} + +/* + * Mandatory toggle on fields + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg); + border-color: var(--border-color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory.active { + --bg: var(--background); + --color: var(--error); + --border-color: var(--error); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field .toggle.mandatory::before { + color: var(--color); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] + .fieldset.widget + .field + .toggle.mandatory:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} + +/* + * Field selection + */ +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:focus { + outline: 2px solid var(--on-background); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field { + border: 1px solid transparent; +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field.selectedForEditing { + background: var(--background); + border: 1px solid var(--primary); +} +.tdWidgetContainer[data-handle='fieldSetWidget'] .fieldset.widget .field:hover { + background: var(--background); + border: 1px solid var(--on-background); +} + +/* + * Grid widget + */ +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget { + border-top: 1px solid var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget.widget .fieldset.widget .field.draggable { + --color: var(--on-surface); /* takes care of the drag-handle color as well */ + background: var(--surface); + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable:focus { + outline: 2px solid var(--on-surface); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='gridWidget'] + .gridWidget.widget + .fieldset.widget + .field.draggable.drop-zone.drag-over { + box-shadow: -2px 0 0 var(--primary) !important; +} +.tdWidgetContainer[data-handle='gridWidget'] .gridWidget .field label { + color: var(--color); +} + +/* + * Workarea + */ +/* Suggest field items */ +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon::before { + color: var(--on-background); +} +.tdWidgetContainer .workareas .workarea .fields.fields.suggestField a.label > .icon:hover::before { + color: var(--primary); +} +/* Field id description */ +.tdWidgetContainer .workareas .workarea .fieldID .fields span:is(.label, .value) { + color: var(--on-surface); +} +/* Add/create field switch */ +.tdWidgetContainer .workareas .workarea .addcreate-switch > label { + color: var(--on-surface); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch > label.active { + color: var(--primary); +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label { + background: var(--on-background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::before { + background: var(--background) !important; +} +.tdWidgetContainer .workareas .workarea .addcreate-switch .toggle label::after { + background: var(--on-background) !important; + margin-left: revert !important; + + /* Replace switch transition with a more performant one */ + transition: transform 0.2s ease-in-out !important; +} +.tdWidgetContainer + .workareas + .workarea + .addcreate-switch + .toggle + input[type='checkbox']:checked + + label::after { + transform: translateX(24px); +} +/* Inline field drop down field type icons */ +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .text > .icon, +.tdWidgetContainer .workareas .workarea .field .fields .inline-dropdown .menu .item > .icon { + color: var(--color); +} + +/* + * General widget + */ +/* General widget numbering example */ +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .autonumberExample + :is(.title, .example) { + color: var(--on-surface); +} +/* Change icon grid */ +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body p { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list { + background: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item { + --color: var(--on-surface); + border: none; +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +.tdWidgetContainer[data-handle='generalWidget'] .workareas .workarea .body .list .item:focus { + outline: 2px solid var(--color); + outline-offset: -4px; +} +.tdWidgetContainer[data-handle='generalWidget'] + .workareas + .workarea + .body + .list + .item + > :is(.content, .icon) { + color: var(--color) !important; +} + +/* + * Web widget + */ +/* Web widget insert url part dropdown */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton { + --icon-bg: var(--background); + --icon-fg: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-fg: var(--background); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton:active { + --icon-bg: var(--surface); + --icon-fg: var(--on-surface); + --icon-border: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + > .add.icon { + background: var(--icon-bg); + color: var(--icon-fg); + border-color: var(--icon-border); +} +/* Web widget insert url part dropdown menu*/ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .urlFields .tdActionButton .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu::after { + border-color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + .search.icon, +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input::placeholder { + color: var(--on-background); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .dropdown-filter + input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item { + background: var(--surface); + --color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item + :is(.icon, span) { + color: var(--color); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item:hover { + background: var(--on-surface); + --color: var(--surface); +} +.tdWidgetContainer[data-handle='webWidget'] + .workareas + .workarea + .urlFields + .tdActionButton + .menu + .item.selected { + background: var(--primary); + --color: var(--on-primary); +} +/* Web widget warning message */ +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .status { + color: var(--on-surface); +} +.tdWidgetContainer[data-handle='webWidget'] .workareas .workarea .footer .feedback .icon { + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * Add widget buttons + */ +/* Add widget button */ +add-widget-dropdown .tdActionButton.inlineDropdown .button { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); + + background: var(--bg) !important; + border-color: var(--border-color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button .displayText { + color: var(--color) !important; +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .button:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown.active .button { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +/* Add widget menu */ +add-widget-dropdown .tdActionButton.inlineDropdown .menu { + background: var(--surface); + border-color: var(--on-surface); + padding: 0px 4px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu::after { + border-color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu { + margin-top: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown:not(.upward) .menu::after { + top: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu { + margin-bottom: 4px; /* Add some spacing between button and menu */ +} +add-widget-dropdown .tdActionButton.inlineDropdown.upward .menu::after { + bottom: -4px; /* Pointer is hiding behind the menu a bit */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .footer { + background: var(--surface); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: none; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter { + background: var(--surface); + border-top-left-radius: 4px; + border-top-right-radius: 4px; + border: none; + padding: 16px 4px; + + z-index: 3; /* To hide the bottom of the pointer */ +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter .search.icon, +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input::placeholder { + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .dropdown-filter input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .header { + background: var(--background); + color: var(--on-background); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item { + background: var(--surface); + color: var(--on-surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item:hover { + background: var(--on-surface); + color: var(--surface); +} +add-widget-dropdown .tdActionButton.inlineDropdown .menu .items .item.selected { + background: var(--primary); + color: var(--on-primary); +} + +/********************* + * Template designer * + *********************/ +/* + * Sidebar + */ +settings-sidebar.panel { + background: var(--surface); + border-right: none; + border-left: 1px solid var(--on-surface); + padding: 0px 16px; +} +/* Header */ +settings-sidebar.panel .header span { + color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton { + --bg: var(--background); + --color: var(--on-background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:hover { + --bg: var(--on-background); + --color: var(--background); + --border-color: var(--on-background); +} +settings-sidebar.panel .header .tdActionButton:active { + --bg: var(--surface); + --color: var(--on-surface); + --border-color: var(--on-surface); +} +settings-sidebar.panel .header .tdActionButton .icon { + background: var(--bg) !important; + color: var(--color) !important; + border-color: var(--border-color) !important; +} +/* Tabs */ +settings-sidebar.panel .tabs ul { + border-color: var(--on-surface) !important; +} +settings-sidebar.panel .tabs li { + --clr: var(--on-surface); + + border-color: var(--clr) !important; +} +settings-sidebar.panel .tabs a { + color: var(--clr) !important; +} +settings-sidebar.panel .tabs li.is-active { + --clr: var(--primary); +} +/* Actions footer */ +settings-sidebar.panel .actions.bordered { + border-color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton { + color: var(--on-surface); +} +settings-sidebar.panel .actions.bordered .tdActionButton:hover { + color: var(--primary); +} +/* Template list/ Field list / Link type list*/ +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li { + --bg: var(--surface); + --color: var(--on-surface); + + background: var(--bg) !important; + color: var(--color) !important; + + padding: 8px 16px; +} +settings-sidebar.panel .field-overview ul.selectable li .icon { + color: var(--color); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li.selected { + --bg: var(--primary); + --color: var(--on-primary); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:hover { + --bg: var(--on-surface); + --color: var(--surface); +} +settings-sidebar.panel + :is(template-selector, .field-overview, capability-selector) + ul.selectable + li:focus-visible { + outline: 2px solid currentColor; + outline-offset: -4px; +} +settings-sidebar.panel .field-overview ul.selectable li .field-item.being-dragged { + background: var(--background); + color: var(--on-background); + outline-color: var(--primary); + + --color: var(--on-background); +} +/* Field search */ +settings-sidebar.panel .field-overview .search-bar input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); + + padding: 16px 8px; +} +settings-sidebar.panel .field-overview .search-bar .icon { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .field-overview .search-bar input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} +settings-sidebar.panel .field-overview p.no-results { + color: var(--on-surface); +} +/* Create new template/ new link type */ +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton, +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} + +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton { + --icon-bg: var(--background); + --icon-color: var(--on-background); + --icon-border: var(--on-background); + + color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:hover { + --icon-bg: var(--on-background); + --icon-color: var(--background); + --icon-border: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton:active { + --icon-bg: var(--surface); + --icon-color: var(--on-surface); + --icon-border: var(--on-surface); + + color: var(--primary); +} +settings-sidebar.panel .tab-content .entityCreator + .tdActionButton > .icon { + background: var(--icon-bg); + color: var(--icon-color); + border-color: var(--icon-border); +} +settings-sidebar.panel .tab-content .entityCreator { + background: var(--surface); + border-color: var(--on-surface); +} +settings-sidebar.panel .tab-content .entityCreator input { + background: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input::placeholder { + color: var(--on-background); +} +settings-sidebar.panel .tab-content .entityCreator input:focus { + outline: 2px solid var(--on-surface); + outline-offset: 2px; +} + +/* + * Template designer placeholder + */ +.placeholderGfx .placeholder-stage { + background: none; +} +.placeholderGfx p { + color: var(--on-background); + font-style: normal; +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} +.page-header { + --ds-color-bg-primary-default: var(--background); +} + +/* + * Asset list + */ +.asset-list { + --ds-color-fg-muted: var(--on-background); +} +.asset-list .ds-icon { + color: var(--on-background); +} +.asset-list a { + color: var(--primary); + text-decoration: underline; +} + +} +@-moz-document regexp("http(s)?://.*/services/active-user-overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +.active-user-overview .left.column strong { + color: var(--on-background); +} + +.active-user-overview .ds-icon.licensed-color { + color: var(--on-background); +} +.active-user-overview .ds-icon.online-color { + color: var(--primary); +} +.active-user-overview .ds-icon.offline-color { + border: 1px solid var(--on-background); + border-radius: 50%; + color: var(--background); /* icon background */ + background-color: var(--on-background); /* icon cross */ +} + +} +@-moz-document regexp("http(s)?://.*/services/user-group-linking-ui/.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); +} + +} +@-moz-document regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +html, +body { + background-color: var(--background); + color: var(--on-background); + + --outline-color: var(--on-background); + + --ds-color-fg-primary-default: var(--on-background); /* links */ + --ds-color-fg-primary-emphasis: var(--on-background); /* empty group bullets */ + + --ds-color-bg-primary-mid: transparent; /* link:focus background */ + --ds-color-fg-primary-subtle: var(--on-background); /* link:focus color */ +} + +.overview__ki-list .title:focus-visible { + /* link outline is unfortunately removed entirely, have to reinstate */ + outline: 2px solid var(--on-background); + outline-offset: 4px; + border-radius: 4px; +} + +/* + * Expand/collapse group buttons (The primary styling does not work well here) + */ +.overview__ki-list .ds-button[variant='primary'] { + background-color: transparent; + color: var(--on-background); + border-color: transparent; +} + +.overview__ki-list .ds-button[variant='primary']:hover { + color: var(--on-primary); +} + +.overview__ki-list .ds-button[variant='primary']:active { + color: var(--primary); +} + +} +@-moz-document regexp("http(s)?://.*/tas/secure/assetmgmt/bulk-edit.*"), regexp("http(s)?://.*/tas/secure/assetmgmt/overview.*"), regexp("http(s)?://.*/services/active-user-overview.*"), regexp("http(s)?://.*/services/user-group-linking-ui/.*"), regexp("http(s)?://.*/services/knowledge-base-ui-v1/overview.*") { +/* + * DS-Feedback-Link + * + * There are two versions: + * - .ds-feedback-link is fixed on the right side and expands on hover. + * - .ds-button[variant='insight'] is a button alternative for where the link does not work. + */ +.ds-feedback-link, +.ds-button[variant='insight'] { + --ds-color-bg-insight-mid: var(--background); /* background */ + --ds-color-fg-insight-subtle: var(--on-background); /* foreground */ + --ds-color-border-insight-default: var(--on-background); /* border */ + + --ds-color-border-insight-emphasis: var(--background); /* :hover border */ + + --ds-color-border-insight-soft: transparent; /* :hover & :focus box-shadow (for link variant) */ + --ds-color-bg-insight-soft: transparent; /* :hover & :focus box-shadow (for button variant) */ + + --ds-color-bg-insight-emphasis: var(--surface); /* :active background */ +} +.ds-feedback-link:hover, +.ds-button[variant='insight']:hover { + --ds-color-bg-insight-mid: var(--on-background); /* :hover background */ + --ds-color-fg-insight-subtle: var(--background); /* :hover foreground */ +} +.ds-feedback-link:active, +.ds-button[variant='insight']:active { + --ds-color-fg-insight-subtle: var(--on-surface); /* :active foreground */ + --ds-color-border-insight-emphasis: var(--on-background); /* :active border (overridden by :focus for link variant) */ +} +.ds-feedback-link:focus-within, +.ds-button[variant='insight']:focus-visible { + /* Would have preferred to deal with border and outline separately, but alas that is not possible */ + --ds-color-border-insight-emphasis: var(--outline-color, var(--on-background)); /* outline & border */ +} + +/* + * DS-Button (primary variant) + */ +.ds-button[variant='primary'] { + background-color: var(--primary); + color: var(--on-primary); + border-color: var(--primary); +} +.ds-button[variant='primary']:hover { + box-shadow: none; + + background-color: var(--primary-muted); +} +.ds-button[variant='primary']:focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button[variant='primary']:active { + background-color: var(--background); + color: var(--primary); + border-color: var(--primary); + --outline-color: var(--primary); +} + +/* + * DS-Button (basic variant) + */ +.ds-button:not([variant]) { + background-color: var(--background); + color: var(--on-background); + border-color: var(--on-background); +} +.ds-button:not([variant]):hover { + box-shadow: none; + background-color: var(--on-background); + color: var(--background); +} +.ds-button:not([variant]):focus-visible { + box-shadow: none; + + outline-color: var(--outline-color); +} +.ds-button:not([variant]):active { + background-color: var(--surface); + color: var(--on-surface); + border-color: var(--on-surface); +} + +/* + * DS-Button (disabled) + */ +.ds-button[aria-disabled='true'] { + /* Undoing the evil 'opacity trick' */ + filter: none; + opacity: unset; + + background-color: var(--disabled); + color: var(--on-disabled); + border-color: var(--on-disabled); +} + +/* + * DS-Panel + */ +.ds-panel { + --ds-color-bg-subtle: var(--surface); /* header background */ + --ds-color-bg-default: var(--surface); /* content background */ + + color: var(--on-surface); + + --text-color: var(--on-surface); + --outline-color: var(--on-surface); + + /* header-content divider border color, has the same variable as the panel border color itself */ + border: none; + --ds-color-border-muted: var(--on-surface); +} + +/* + * DS-Select-Rich and DS-Combobox + */ +.ds-select-rich, +.ds-combobox { + --ds-color-field-label-fg: var(--text-color, var(--on-background)); /* label + helptext color */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-border: var(--on-background); /* field border */ + --ds-color-field-icon-fg: var(--on-background); /* chevron color */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + + /* focus colors */ + --ds-color-field-outline-inner: transparent; /* box-shadow color */ + --ds-color-field-outline-outer: var(--outline-color); /* border and outline */ + + /* dropdown colors */ + --ds-color-bg-default: var(--background); /* popup background */ + --ds-color-fg-default: var(--on-background); /* popup foreground */ + --ds-color-border-default: var(--on-background); /* popup border */ + + --ds-color-bg-primary-default: transparent; /* option:hover background */ + --ds-color-bg-primary-soft: transparent; /* option:checked background */ + --ds-color-border-primary-emphasis: var(--on-background); /* option:hover border */ + --ds-color-fg-primary-emphasis: var(--on-background); /* option:checked checkmark color */ +} + +.ds-select-rich:hover, +.ds-combobox:hover { + --ds-color-field-outline-outer: var(--primary); + --ds-color-field-icon-fg: var(--primary); + --ds-color-field-border: var(--primary); +} + +/* Error case */ +.ds-select-rich lion-select-invoker[aria-invalid='true'], +.ds-combobox[shows-feedback-for='error'] { + --ds-color-field-border: var(--error); + --ds-color-field-icon-fg: var(--error); + --ds-color-field-outline-inner: transparent; + --ds-color-field-outline-outer: var(--error); /* on focus */ +} +.ds-select-rich[shows-feedback-for='error'] lion-validation-feedback, +.ds-combobox[shows-feedback-for='error'] lion-validation-feedback { + --ds-color-field-fg: var(--error); + --ds-color-field-icon-fg: var(--error); +} +.ds-select-rich lion-select-invoker[aria-invalid='true'] { + --ds-color-field-fg: var(--error); + --ds-color-field-bg: var(--background); +} +.ds-combobox[shows-feedback-for='error']:hover, +.ds-select-rich:hover lion-select-invoker[aria-invalid='true'] { + --ds-color-field-outline-inner: var(--error); +} + +/* + * DS-Switch + */ +.ds-switch { + --ds-color-bg-primary-mid: var(--on-background); /* :checked track border */ + --ds-color-bg-primary-emphasis: var(--background); /* :checked track background */ + --ds-color-bg-primary-default: var(--on-background); /* :checked thumb background */ + --ds-color-fg-primary-default: var(--background); /* :checked thumb icon */ + + --ds-color-bg-muted: var(--background); /* :not(:checked) track background */ + --ds-color-bg-default: var(--on-background); /* :not(:checked) thumb background */ + --ds-color-fg-muted: var(--background); /* :not(:checked) thumb icon */ + + --ds-color-border-primary-emphasis: var(--on-background); /* :hover track border */ + + box-shadow: none; +} +.ds-switch lion-switch-button[aria-checked='false'] { + /* + * Border color in unchecked state uses same variable as the track background `--ds-color-bg-muted`. + * So to be able to differentiate the border from the background we need to override the border-color property on the track itself. + */ + border-color: var(--on-background); +} +.ds-switch lion-switch-button:hover { + box-shadow: 0 0 0 4px var(--on-background); +} +.ds-switch lion-switch-button:focus-visible { + box-shadow: none; + outline-color: var(--on-background); +} +.ds-switch label { + /* + * The label color uses the same variable as the unchecked thumb icon `--ds-color-fg-muted`. + * But the label needs to contrast with the background, and the thumb icon with the thumb background. + * Therefore we need to override the color of the label explicitly here. + */ + color: var(--text-color, var(--on-background)); +} + +.ds-data-table { + --ds-color-bg-default: var(--background); /* table background */ + --ds-color-fg-default: var(--on-background); /* table foreground */ + --ds-color-border-muted: var(--on-background); /* table border + row border + column/header/footer dividers */ + + --ds-color-bg-primary-soft: transparent; /* table:focus box-shadow */ + + /* table:focus & checkbox:focus border + outline, column resizer color */ + --ds-color-border-primary-emphasis: var(--on-background); + + --ds-color-bg-primary-default: transparent; /* table row:checked background */ + + --ds-color-border-default: var(--on-background); /* checkbox border */ + --ds-color-border-primary-soft: transparent; /* checkbox:focus box-shadow */ + + /* + * The DS adds color to the checkbox when it is checked, but this feels too "busy" in this context. + * Unfortunately there is no other way to indicate selected status, but neither has the old grid so it is not too bad. + * + * A bar on the left side would be nice, and that could be achieved with a linear-gradient except that the color is + * applied to `background-color` (and not `background`) which only allows solid colors. + */ + --ds-color-bg-primary-emphasis: var(--background); /* checkbox:checked background */ + --ds-color-fg-primary-subtle: var(--on-background); /* checkbox:checked foreground */ + + /* Status bar (border-bottom of the header cells) */ + --ds-color-border-primary-default: var(--primary); /* status loading */ + --ds-color-border-warning-default: var(--error); /* status error */ +} + +/* + * links are commonly slotted into the datatable, their design/implementation is not fully consistent + */ +.ds-data-table > a { + color: var(--primary); + text-decoration: underline; +} +.ds-data-table > a:hover { + text-decoration-color: var(--primary); +} +.ds-data-table > a:focus-visible { + outline: 2px solid var(--on-background); + outline-offset: 2px; + border-radius: 4px; + + text-decoration-color: var(--primary); + box-shadow: none; + background-color: unset; +} + +.ds-pagination { + --ds-color-fg-primary-emphasis: var(--on-background); /* button foreground*/ + /* background-color is set to transparent in the component so can't be changed. (only in default state) */ + /* border-color is set to transparent in the component, so can't be changed. (all states except :hover and :focus) */ + + --ds-color-bg-primary-mid: var(--primary); /* current page background */ + --ds-color-fg-primary-subtle: var(--on-primary); /* current page foreground */ + + /* no background in the disabled state is less busy */ + --ds-color-bg-mild: transparent; /* prev/next :disabled background */ + --ds-color-bg-muted: var(--disabled); /* prev/next :disabled foreground */ + + --ds-color-bg-primary-soft: transparent; /* :focus & :hover box-shadow */ + --ds-color-border-primary-emphasis: var(--on-background); /* :focus border and outline, :hover border */ +} + +.ds-search-form { + --ds-color-fg-muted: var(--on-background); /* Placeholder */ + + --ds-color-field-bg: var(--background); /* field background */ + --ds-color-field-fg: var(--on-background); /* field foreground */ + --ds-color-field-border: var(--on-background); /* field border */ + + --ds-color-border-primary-default: var(--on-background); /* field:hover & :focus box-shadow */ + + --ds-color-field-icon-fg: var(--on-background); /* button:not(:hover,:focus) foreground */ + + --ds-color-field-button-bg-hover: var(--primary); /* button:hover & :focus background */ + --ds-color-field-icon-fg-hover: var(--on-primary); /* button:hover & :focus foreground */ +} + +.ds-modal-content { + --outline-color: var(--on-surface); + --text-color: var(--on-surface); + + --ds-color-bg-default: var(--surface); /* Modal background */ + --ds-color-fg-default: var(--text-color); /* Modal foreground */ + + --ds-color-fg-muted: var(--on-surface); /* Close button */ + --ds-color-bg-primary-soft: transparent; /* Close button:hover & :focus box-shadow */ + --ds-color-border-primary-emphasis: var(--on-surface); /* Close button:hover & :focus border & outline */ +} + +} \ No newline at end of file