/* ==UserStyle== @name Soft Green (TOPdesk Operator Recoloring) @namespace github.com/topdesk/topdesk-operator-recoloring @version 2.14.5 @description Override the colors of the TOPdesk operator section, for accessibility purposes. @homepageURL https://github.com/TOPdesk/operator-recoloring @supportURL https://github.com/TOPdesk/operator-recoloring/issues @license MIT @preprocessor default @var color background "Background" #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 */ } }