/* AUTO-GENERATED — do not edit by hand. Generated by scripts/compile_sass.py (generate_apps_css). Run `python scripts/compile_sass.py` to regenerate. */ :root { --app-colour-absence: #3a6878; --app-colour-activities: #4A6F95; --app-colour-administrator: dimgray; --app-colour-administrator-tool: #3A3A38; --app-colour-apps: #4F46E5; --app-colour-app-store: #1668b8; --app-colour-assessments: #7e726a; --app-colour-audit: #3a6878; --app-colour-bookmarks: #800080; --app-colour-calculate: #107C41; --app-colour-calendar: orangered; --app-colour-case-manager: #3a6878; --app-colour-chokhmah: #7C5A3E; --app-colour-classifieds: #8a6e48; --app-colour-cloud-storage: #1a2030; --app-colour-configuration: #2D6A8A; --app-colour-contacts: rgb(143, 104, 6); --app-colour-contracts: #208840; --app-colour-demo: #001d71; --app-colour-diary: #8B5E3C; --app-colour-document-browser: #c73d78; --app-colour-documents: #0278d4; --app-colour-draw: #005597; --app-colour-drive: #0061FF; --app-colour-events: orangered; --app-colour-family-tree: #6E1F22; --app-colour-favourites: #e0a21a; --app-colour-feedback: #208840; --app-colour-gymnast: #C50F1F; --app-colour-help: dimgray; --app-colour-image-bank: #7E726A; --app-colour-images: #fe28a2; --app-colour-jahrzeit: #5B6680; --app-colour-jobs: #c73d78; --app-colour-journal: #FA2D48; --app-colour-kiki: #7A5AF8; --app-colour-library: #a06430; --app-colour-mail: #0078D4; --app-colour-mailings: #1668b8; --app-colour-meetings: limegreen; --app-colour-messages: #4267B2; --app-colour-monitor: #0E9C8A; --app-colour-news: #F26522; --app-colour-notes: #B8860B; --app-colour-notifications: #6e6862; --app-colour-office: #1668b8; --app-colour-password: #696969; --app-colour-polls: #208840; --app-colour-preferences: dimgray; --app-colour-present: #C43E1C; --app-colour-profile: #6e6862; --app-colour-publisher: #1668b8; --app-colour-registration: #1a2030; --app-colour-reminders: Purple; --app-colour-sabra: #1E6F5C; --app-colour-search: dimgray; --app-colour-setup: #4a6f95; --app-colour-signup: #5BA17F; --app-colour-slide-bank: #b8232c; --app-colour-team-spaces: SeaGreen; --app-colour-todo: Purple; --app-colour-todo-legacy: #c73d78; --app-colour-updates: #6c5ce7; --app-colour-weather: #2E97D4; --app-colour-whiteboard: #6b46c1; --app-colour-workspaces: DodgerBlue; --app-colour-write: #0f6cbd; } :root { --app-colour-absence: #3a6878; } .app-absence, body:has(#app-space.state-on.active-app-absence) #tabs-bar .tab.application-absence, body:has(#app-space.state-on) .application-absence + .application-label { --app-colour: var(--app-colour-absence); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-absence, span.app-icon.app-absence { color: var(--app-colour-absence); } .quaive-portlet.app-absence .well-header:before { background-image: url(../../app-icons/absence.svg); } .tab.application-absence .app-name:before, .application-absence + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/absence.svg); } #application-body-absence.state-on ~ #tabs-bar .tab.application-absence { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-absence) { #tabs-bar .tab.application-absence .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-absence .object-name { display: none; } } &:not(.active-app-absence) #tabs-bar .tab.application-absence .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-absence.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-absence .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-absence { display: block; } } } #app-space.active-app-absence.state-on #application-body-absence { display: block; } body:has(#app-space.state-on.active-app-absence) .tab.application-absence .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-activities: #4A6F95; } .app-activities, body:has(#app-space.state-on.active-app-activities) #tabs-bar .tab.application-activities, body:has(#app-space.state-on) .application-activities + .application-label { --app-colour: var(--app-colour-activities); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-activities, span.app-icon.app-activities { color: var(--app-colour-activities); } .quaive-portlet.app-activities .well-header:before { background-image: url(../../app-icons/activities.svg); } .tab.application-activities .app-name:before, .application-activities + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/activities.svg); } #application-body-activities.state-on ~ #tabs-bar .tab.application-activities { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-activities) { #tabs-bar .tab.application-activities .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-activities .object-name { display: none; } } &:not(.active-app-activities) #tabs-bar .tab.application-activities .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-activities.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-activities .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-activities { display: block; } } } #app-space.active-app-activities.state-on #application-body-activities { display: block; } body:has(#app-space.state-on.active-app-activities) .tab.application-activities .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-administrator: dimgray; } .app-administrator, body:has(#app-space.state-on.active-app-administrator) #tabs-bar .tab.application-administrator, body:has(#app-space.state-on) .application-administrator + .application-label { --app-colour: var(--app-colour-administrator); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-administrator, span.app-icon.app-administrator { color: var(--app-colour-administrator); } .quaive-portlet.app-administrator .well-header:before { background-image: url(../../app-icons/administrator.svg); } .tab.application-administrator .app-name:before, .application-administrator + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/administrator.svg); } #application-body-administrator.state-on ~ #tabs-bar .tab.application-administrator { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-administrator) { #tabs-bar .tab.application-administrator .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-administrator .object-name { display: none; } } &:not(.active-app-administrator) #tabs-bar .tab.application-administrator .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-administrator.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-administrator .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-administrator { display: block; } } } #app-space.active-app-administrator.state-on #application-body-administrator { display: block; } body:has(#app-space.state-on.active-app-administrator) .tab.application-administrator .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-administrator-tool: #3A3A38; } .app-administrator-tool, body:has(#app-space.state-on.active-app-administrator-tool) #tabs-bar .tab.application-administrator-tool, body:has(#app-space.state-on) .application-administrator-tool + .application-label { --app-colour: var(--app-colour-administrator-tool); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-administrator-tool, span.app-icon.app-administrator-tool { color: var(--app-colour-administrator-tool); } .quaive-portlet.app-administrator-tool .well-header:before { background-image: url(../../app-icons/administrator-tool.svg); } .tab.application-administrator-tool .app-name:before, .application-administrator-tool + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/administrator-tool.svg); } #application-body-administrator-tool.state-on ~ #tabs-bar .tab.application-administrator-tool { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-administrator-tool) { #tabs-bar .tab.application-administrator-tool .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-administrator-tool .object-name { display: none; } } &:not(.active-app-administrator-tool) #tabs-bar .tab.application-administrator-tool .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-administrator-tool.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-administrator-tool .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-administrator-tool { display: block; } } } #app-space.active-app-administrator-tool.state-on #application-body-administrator-tool { display: block; } body:has(#app-space.state-on.active-app-administrator-tool) .tab.application-administrator-tool .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-apps: #4F46E5; } .app-apps, body:has(#app-space.state-on.active-app-apps) #tabs-bar .tab.application-apps, body:has(#app-space.state-on) .application-apps + .application-label { --app-colour: var(--app-colour-apps); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-apps, span.app-icon.app-apps { color: var(--app-colour-apps); } .quaive-portlet.app-apps .well-header:before { background-image: url(../../app-icons/apps.svg); } .tab.application-apps .app-name:before, .application-apps + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/apps.svg); } #application-body-apps.state-on ~ #tabs-bar .tab.application-apps { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-apps) { #tabs-bar .tab.application-apps .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-apps .object-name { display: none; } } &:not(.active-app-apps) #tabs-bar .tab.application-apps .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-apps.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-apps .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-apps { display: block; } } } #app-space.active-app-apps.state-on #application-body-apps { display: block; } body:has(#app-space.state-on.active-app-apps) .tab.application-apps .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-app-store: #1668b8; } .app-app-store, body:has(#app-space.state-on.active-app-app-store) #tabs-bar .tab.application-app-store, body:has(#app-space.state-on) .application-app-store + .application-label { --app-colour: var(--app-colour-app-store); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-app-store, span.app-icon.app-app-store { color: var(--app-colour-app-store); } .quaive-portlet.app-app-store .well-header:before { background-image: url(../../app-icons/app-store.svg); } .tab.application-app-store .app-name:before, .application-app-store + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/app-store.svg); } #application-body-app-store.state-on ~ #tabs-bar .tab.application-app-store { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-app-store) { #tabs-bar .tab.application-app-store .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-app-store .object-name { display: none; } } &:not(.active-app-app-store) #tabs-bar .tab.application-app-store .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-app-store.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-app-store .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-app-store { display: block; } } } #app-space.active-app-app-store.state-on #application-body-app-store { display: block; } body:has(#app-space.state-on.active-app-app-store) .tab.application-app-store .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-assessments: #7e726a; } .app-assessments, body:has(#app-space.state-on.active-app-assessments) #tabs-bar .tab.application-assessments, body:has(#app-space.state-on) .application-assessments + .application-label { --app-colour: var(--app-colour-assessments); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-assessments, span.app-icon.app-assessments { color: var(--app-colour-assessments); } .quaive-portlet.app-assessments .well-header:before { background-image: url(../../app-icons/assessments.svg); } .tab.application-assessments .app-name:before, .application-assessments + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/assessments.svg); } #application-body-assessments.state-on ~ #tabs-bar .tab.application-assessments { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-assessments) { #tabs-bar .tab.application-assessments .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-assessments .object-name { display: none; } } &:not(.active-app-assessments) #tabs-bar .tab.application-assessments .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-assessments.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-assessments .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-assessments { display: block; } } } #app-space.active-app-assessments.state-on #application-body-assessments { display: block; } body:has(#app-space.state-on.active-app-assessments) .tab.application-assessments .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-audit: #3a6878; } .app-audit, body:has(#app-space.state-on.active-app-audit) #tabs-bar .tab.application-audit, body:has(#app-space.state-on) .application-audit + .application-label { --app-colour: var(--app-colour-audit); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-audit, span.app-icon.app-audit { color: var(--app-colour-audit); } .quaive-portlet.app-audit .well-header:before { background-image: url(../../app-icons/audit.svg); } .tab.application-audit .app-name:before, .application-audit + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/audit.svg); } #application-body-audit.state-on ~ #tabs-bar .tab.application-audit { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-audit) { #tabs-bar .tab.application-audit .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-audit .object-name { display: none; } } &:not(.active-app-audit) #tabs-bar .tab.application-audit .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-audit.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-audit .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-audit { display: block; } } } #app-space.active-app-audit.state-on #application-body-audit { display: block; } body:has(#app-space.state-on.active-app-audit) .tab.application-audit .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-bookmarks: #800080; } .app-bookmarks, body:has(#app-space.state-on.active-app-bookmarks) #tabs-bar .tab.application-bookmarks, body:has(#app-space.state-on) .application-bookmarks + .application-label { --app-colour: var(--app-colour-bookmarks); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-bookmarks, span.app-icon.app-bookmarks { color: var(--app-colour-bookmarks); } .quaive-portlet.app-bookmarks .well-header:before { background-image: url(../../app-icons/bookmarks.svg); } .tab.application-bookmarks .app-name:before, .application-bookmarks + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/bookmarks.svg); } #application-body-bookmarks.state-on ~ #tabs-bar .tab.application-bookmarks { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-bookmarks) { #tabs-bar .tab.application-bookmarks .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-bookmarks .object-name { display: none; } } &:not(.active-app-bookmarks) #tabs-bar .tab.application-bookmarks .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-bookmarks.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-bookmarks .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-bookmarks { display: block; } } } #app-space.active-app-bookmarks.state-on #application-body-bookmarks { display: block; } body:has(#app-space.state-on.active-app-bookmarks) .tab.application-bookmarks .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-calculate: #107C41; } .app-calculate, body:has(#app-space.state-on.active-app-calculate) #tabs-bar .tab.application-calculate, body:has(#app-space.state-on) .application-calculate + .application-label { --app-colour: var(--app-colour-calculate); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-calculate, span.app-icon.app-calculate { color: var(--app-colour-calculate); } .quaive-portlet.app-calculate .well-header:before { background-image: url(../../app-icons/calculate.svg); } .tab.application-calculate .app-name:before, .application-calculate + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/calculate.svg); } #application-body-calculate.state-on ~ #tabs-bar .tab.application-calculate { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-calculate) { #tabs-bar .tab.application-calculate .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-calculate .object-name { display: none; } } &:not(.active-app-calculate) #tabs-bar .tab.application-calculate .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-calculate.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-calculate .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-calculate { display: block; } } } #app-space.active-app-calculate.state-on #application-body-calculate { display: block; } body:has(#app-space.state-on.active-app-calculate) .tab.application-calculate .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-calendar: orangered; } .app-calendar, body:has(#app-space.state-on.active-app-calendar) #tabs-bar .tab.application-calendar, body:has(#app-space.state-on) .application-calendar + .application-label { --app-colour: var(--app-colour-calendar); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-calendar, span.app-icon.app-calendar { color: var(--app-colour-calendar); } .quaive-portlet.app-calendar .well-header:before { background-image: url(../../app-icons/calendar.svg); } .tab.application-calendar .app-name:before, .application-calendar + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/calendar.svg); } #application-body-calendar.state-on ~ #tabs-bar .tab.application-calendar { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-calendar) { #tabs-bar .tab.application-calendar .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-calendar .object-name { display: none; } } &:not(.active-app-calendar) #tabs-bar .tab.application-calendar .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-calendar.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-calendar .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-calendar { display: block; } } } #app-space.active-app-calendar.state-on #application-body-calendar { display: block; } body:has(#app-space.state-on.active-app-calendar) .tab.application-calendar .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-case-manager: #3a6878; } .app-case-manager, body:has(#app-space.state-on.active-app-case-manager) #tabs-bar .tab.application-case-manager, body:has(#app-space.state-on) .application-case-manager + .application-label { --app-colour: var(--app-colour-case-manager); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-case-manager, span.app-icon.app-case-manager { color: var(--app-colour-case-manager); } .quaive-portlet.app-case-manager .well-header:before { background-image: url(../../app-icons/case-manager.svg); } .tab.application-case-manager .app-name:before, .application-case-manager + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/case-manager.svg); } #application-body-case-manager.state-on ~ #tabs-bar .tab.application-case-manager { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-case-manager) { #tabs-bar .tab.application-case-manager .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-case-manager .object-name { display: none; } } &:not(.active-app-case-manager) #tabs-bar .tab.application-case-manager .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-case-manager.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-case-manager .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-case-manager { display: block; } } } #app-space.active-app-case-manager.state-on #application-body-case-manager { display: block; } body:has(#app-space.state-on.active-app-case-manager) .tab.application-case-manager .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-chokhmah: #7C5A3E; } .app-chokhmah, body:has(#app-space.state-on.active-app-chokhmah) #tabs-bar .tab.application-chokhmah, body:has(#app-space.state-on) .application-chokhmah + .application-label { --app-colour: var(--app-colour-chokhmah); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-chokhmah, span.app-icon.app-chokhmah { color: var(--app-colour-chokhmah); } .quaive-portlet.app-chokhmah .well-header:before { background-image: url(../../app-icons/chokhmah.svg); } .tab.application-chokhmah .app-name:before, .application-chokhmah + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/chokhmah.svg); } #application-body-chokhmah.state-on ~ #tabs-bar .tab.application-chokhmah { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-chokhmah) { #tabs-bar .tab.application-chokhmah .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-chokhmah .object-name { display: none; } } &:not(.active-app-chokhmah) #tabs-bar .tab.application-chokhmah .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-chokhmah.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-chokhmah .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-chokhmah { display: block; } } } #app-space.active-app-chokhmah.state-on #application-body-chokhmah { display: block; } body:has(#app-space.state-on.active-app-chokhmah) .tab.application-chokhmah .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-classifieds: #8a6e48; } .app-classifieds, body:has(#app-space.state-on.active-app-classifieds) #tabs-bar .tab.application-classifieds, body:has(#app-space.state-on) .application-classifieds + .application-label { --app-colour: var(--app-colour-classifieds); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-classifieds, span.app-icon.app-classifieds { color: var(--app-colour-classifieds); } .quaive-portlet.app-classifieds .well-header:before { background-image: url(../../app-icons/classifieds.svg); } .tab.application-classifieds .app-name:before, .application-classifieds + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/classifieds.svg); } #application-body-classifieds.state-on ~ #tabs-bar .tab.application-classifieds { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-classifieds) { #tabs-bar .tab.application-classifieds .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-classifieds .object-name { display: none; } } &:not(.active-app-classifieds) #tabs-bar .tab.application-classifieds .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-classifieds.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-classifieds .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-classifieds { display: block; } } } #app-space.active-app-classifieds.state-on #application-body-classifieds { display: block; } body:has(#app-space.state-on.active-app-classifieds) .tab.application-classifieds .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-cloud-storage: #1a2030; } .app-cloud-storage, body:has(#app-space.state-on.active-app-cloud-storage) #tabs-bar .tab.application-cloud-storage, body:has(#app-space.state-on) .application-cloud-storage + .application-label { --app-colour: var(--app-colour-cloud-storage); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-cloud-storage, span.app-icon.app-cloud-storage { color: var(--app-colour-cloud-storage); } .quaive-portlet.app-cloud-storage .well-header:before { background-image: url(../../app-icons/cloud-storage.svg); } .tab.application-cloud-storage .app-name:before, .application-cloud-storage + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/cloud-storage.svg); } #application-body-cloud-storage.state-on ~ #tabs-bar .tab.application-cloud-storage { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-cloud-storage) { #tabs-bar .tab.application-cloud-storage .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-cloud-storage .object-name { display: none; } } &:not(.active-app-cloud-storage) #tabs-bar .tab.application-cloud-storage .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-cloud-storage.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-cloud-storage .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-cloud-storage { display: block; } } } #app-space.active-app-cloud-storage.state-on #application-body-cloud-storage { display: block; } body:has(#app-space.state-on.active-app-cloud-storage) .tab.application-cloud-storage .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-configuration: #2D6A8A; } .app-configuration, body:has(#app-space.state-on.active-app-configuration) #tabs-bar .tab.application-configuration, body:has(#app-space.state-on) .application-configuration + .application-label { --app-colour: var(--app-colour-configuration); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-configuration, span.app-icon.app-configuration { color: var(--app-colour-configuration); } .quaive-portlet.app-configuration .well-header:before { background-image: url(../../app-icons/configuration.svg); } .tab.application-configuration .app-name:before, .application-configuration + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/configuration.svg); } #application-body-configuration.state-on ~ #tabs-bar .tab.application-configuration { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-configuration) { #tabs-bar .tab.application-configuration .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-configuration .object-name { display: none; } } &:not(.active-app-configuration) #tabs-bar .tab.application-configuration .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-configuration.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-configuration .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-configuration { display: block; } } } #app-space.active-app-configuration.state-on #application-body-configuration { display: block; } body:has(#app-space.state-on.active-app-configuration) .tab.application-configuration .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-contacts: rgb(143, 104, 6); } .app-contacts, body:has(#app-space.state-on.active-app-contacts) #tabs-bar .tab.application-contacts, body:has(#app-space.state-on) .application-contacts + .application-label { --app-colour: var(--app-colour-contacts); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-contacts, span.app-icon.app-contacts { color: var(--app-colour-contacts); } .quaive-portlet.app-contacts .well-header:before { background-image: url(../../app-icons/contacts.svg); } .tab.application-contacts .app-name:before, .application-contacts + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/contacts.svg); } #application-body-contacts.state-on ~ #tabs-bar .tab.application-contacts { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-contacts) { #tabs-bar .tab.application-contacts .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-contacts .object-name { display: none; } } &:not(.active-app-contacts) #tabs-bar .tab.application-contacts .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-contacts.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-contacts .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-contacts { display: block; } } } #app-space.active-app-contacts.state-on #application-body-contacts { display: block; } body:has(#app-space.state-on.active-app-contacts) .tab.application-contacts .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-contracts: #208840; } .app-contracts, body:has(#app-space.state-on.active-app-contracts) #tabs-bar .tab.application-contracts, body:has(#app-space.state-on) .application-contracts + .application-label { --app-colour: var(--app-colour-contracts); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-contracts, span.app-icon.app-contracts { color: var(--app-colour-contracts); } .quaive-portlet.app-contracts .well-header:before { background-image: url(../../app-icons/contracts.svg); } .tab.application-contracts .app-name:before, .application-contracts + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/contracts.svg); } #application-body-contracts.state-on ~ #tabs-bar .tab.application-contracts { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-contracts) { #tabs-bar .tab.application-contracts .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-contracts .object-name { display: none; } } &:not(.active-app-contracts) #tabs-bar .tab.application-contracts .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-contracts.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-contracts .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-contracts { display: block; } } } #app-space.active-app-contracts.state-on #application-body-contracts { display: block; } body:has(#app-space.state-on.active-app-contracts) .tab.application-contracts .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-demo: #001d71; } .app-demo, body:has(#app-space.state-on.active-app-demo) #tabs-bar .tab.application-demo, body:has(#app-space.state-on) .application-demo + .application-label { --app-colour: var(--app-colour-demo); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-demo, span.app-icon.app-demo { color: var(--app-colour-demo); } .quaive-portlet.app-demo .well-header:before { background-image: url(../../app-icons/demo.svg); } .tab.application-demo .app-name:before, .application-demo + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/demo.svg); } #application-body-demo.state-on ~ #tabs-bar .tab.application-demo { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-demo) { #tabs-bar .tab.application-demo .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-demo .object-name { display: none; } } &:not(.active-app-demo) #tabs-bar .tab.application-demo .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-demo.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-demo .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-demo { display: block; } } } #app-space.active-app-demo.state-on #application-body-demo { display: block; } body:has(#app-space.state-on.active-app-demo) .tab.application-demo .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-diary: #8B5E3C; } .app-diary, body:has(#app-space.state-on.active-app-diary) #tabs-bar .tab.application-diary, body:has(#app-space.state-on) .application-diary + .application-label { --app-colour: var(--app-colour-diary); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-diary, span.app-icon.app-diary { color: var(--app-colour-diary); } .quaive-portlet.app-diary .well-header:before { background-image: url(../../app-icons/diary.svg); } .tab.application-diary .app-name:before, .application-diary + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/diary.svg); } #application-body-diary.state-on ~ #tabs-bar .tab.application-diary { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-diary) { #tabs-bar .tab.application-diary .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-diary .object-name { display: none; } } &:not(.active-app-diary) #tabs-bar .tab.application-diary .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-diary.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-diary .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-diary { display: block; } } } #app-space.active-app-diary.state-on #application-body-diary { display: block; } body:has(#app-space.state-on.active-app-diary) .tab.application-diary .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-document-browser: #c73d78; } .app-document-browser, body:has(#app-space.state-on.active-app-document-browser) #tabs-bar .tab.application-document-browser, body:has(#app-space.state-on) .application-document-browser + .application-label { --app-colour: var(--app-colour-document-browser); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-document-browser, span.app-icon.app-document-browser { color: var(--app-colour-document-browser); } .quaive-portlet.app-document-browser .well-header:before { background-image: url(../../app-icons/document-browser.svg); } .tab.application-document-browser .app-name:before, .application-document-browser + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/document-browser.svg); } #application-body-document-browser.state-on ~ #tabs-bar .tab.application-document-browser { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-document-browser) { #tabs-bar .tab.application-document-browser .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-document-browser .object-name { display: none; } } &:not(.active-app-document-browser) #tabs-bar .tab.application-document-browser .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-document-browser.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-document-browser .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-document-browser { display: block; } } } #app-space.active-app-document-browser.state-on #application-body-document-browser { display: block; } body:has(#app-space.state-on.active-app-document-browser) .tab.application-document-browser .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-documents: #0278d4; } .app-documents, body:has(#app-space.state-on.active-app-documents) #tabs-bar .tab.application-documents, body:has(#app-space.state-on) .application-documents + .application-label { --app-colour: var(--app-colour-documents); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-documents, span.app-icon.app-documents { color: var(--app-colour-documents); } .quaive-portlet.app-documents .well-header:before { background-image: url(../../app-icons/documents.svg); } .tab.application-documents .app-name:before, .application-documents + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/documents.svg); } #application-body-documents.state-on ~ #tabs-bar .tab.application-documents { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-documents) { #tabs-bar .tab.application-documents .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-documents .object-name { display: none; } } &:not(.active-app-documents) #tabs-bar .tab.application-documents .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-documents.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-documents .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-documents { display: block; } } } #app-space.active-app-documents.state-on #application-body-documents { display: block; } body:has(#app-space.state-on.active-app-documents) .tab.application-documents .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-draw: #005597; } .app-draw, body:has(#app-space.state-on.active-app-draw) #tabs-bar .tab.application-draw, body:has(#app-space.state-on) .application-draw + .application-label { --app-colour: var(--app-colour-draw); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-draw, span.app-icon.app-draw { color: var(--app-colour-draw); } .quaive-portlet.app-draw .well-header:before { background-image: url(../../app-icons/draw.svg); } .tab.application-draw .app-name:before, .application-draw + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/draw.svg); } #application-body-draw.state-on ~ #tabs-bar .tab.application-draw { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-draw) { #tabs-bar .tab.application-draw .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-draw .object-name { display: none; } } &:not(.active-app-draw) #tabs-bar .tab.application-draw .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-draw.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-draw .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-draw { display: block; } } } #app-space.active-app-draw.state-on #application-body-draw { display: block; } body:has(#app-space.state-on.active-app-draw) .tab.application-draw .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-drive: #0061FF; } .app-drive, body:has(#app-space.state-on.active-app-drive) #tabs-bar .tab.application-drive, body:has(#app-space.state-on) .application-drive + .application-label { --app-colour: var(--app-colour-drive); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-drive, span.app-icon.app-drive { color: var(--app-colour-drive); } .quaive-portlet.app-drive .well-header:before { background-image: url(../../app-icons/drive.svg); } .tab.application-drive .app-name:before, .application-drive + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/drive.svg); } #application-body-drive.state-on ~ #tabs-bar .tab.application-drive { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-drive) { #tabs-bar .tab.application-drive .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-drive .object-name { display: none; } } &:not(.active-app-drive) #tabs-bar .tab.application-drive .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-drive.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-drive .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-drive { display: block; } } } #app-space.active-app-drive.state-on #application-body-drive { display: block; } body:has(#app-space.state-on.active-app-drive) .tab.application-drive .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-events: orangered; } .app-events, body:has(#app-space.state-on.active-app-events) #tabs-bar .tab.application-events, body:has(#app-space.state-on) .application-events + .application-label { --app-colour: var(--app-colour-events); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-events, span.app-icon.app-events { color: var(--app-colour-events); } .quaive-portlet.app-events .well-header:before { background-image: url(../../app-icons/events.svg); } .tab.application-events .app-name:before, .application-events + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/events.svg); } #application-body-events.state-on ~ #tabs-bar .tab.application-events { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-events) { #tabs-bar .tab.application-events .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-events .object-name { display: none; } } &:not(.active-app-events) #tabs-bar .tab.application-events .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-events.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-events .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-events { display: block; } } } #app-space.active-app-events.state-on #application-body-events { display: block; } body:has(#app-space.state-on.active-app-events) .tab.application-events .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-family-tree: #6E1F22; } .app-family-tree, body:has(#app-space.state-on.active-app-family-tree) #tabs-bar .tab.application-family-tree, body:has(#app-space.state-on) .application-family-tree + .application-label { --app-colour: var(--app-colour-family-tree); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-family-tree, span.app-icon.app-family-tree { color: var(--app-colour-family-tree); } .quaive-portlet.app-family-tree .well-header:before { background-image: url(../../app-icons/family-tree.svg); } .tab.application-family-tree .app-name:before, .application-family-tree + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/family-tree.svg); } #application-body-family-tree.state-on ~ #tabs-bar .tab.application-family-tree { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-family-tree) { #tabs-bar .tab.application-family-tree .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-family-tree .object-name { display: none; } } &:not(.active-app-family-tree) #tabs-bar .tab.application-family-tree .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-family-tree.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-family-tree .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-family-tree { display: block; } } } #app-space.active-app-family-tree.state-on #application-body-family-tree { display: block; } body:has(#app-space.state-on.active-app-family-tree) .tab.application-family-tree .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-favourites: #e0a21a; } .app-favourites, body:has(#app-space.state-on.active-app-favourites) #tabs-bar .tab.application-favourites, body:has(#app-space.state-on) .application-favourites + .application-label { --app-colour: var(--app-colour-favourites); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-favourites, span.app-icon.app-favourites { color: var(--app-colour-favourites); } .quaive-portlet.app-favourites .well-header:before { background-image: url(../../app-icons/favourites.svg); } .tab.application-favourites .app-name:before, .application-favourites + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/favourites.svg); } #application-body-favourites.state-on ~ #tabs-bar .tab.application-favourites { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-favourites) { #tabs-bar .tab.application-favourites .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-favourites .object-name { display: none; } } &:not(.active-app-favourites) #tabs-bar .tab.application-favourites .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-favourites.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-favourites .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-favourites { display: block; } } } #app-space.active-app-favourites.state-on #application-body-favourites { display: block; } body:has(#app-space.state-on.active-app-favourites) .tab.application-favourites .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-feedback: #208840; } .app-feedback, body:has(#app-space.state-on.active-app-feedback) #tabs-bar .tab.application-feedback, body:has(#app-space.state-on) .application-feedback + .application-label { --app-colour: var(--app-colour-feedback); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-feedback, span.app-icon.app-feedback { color: var(--app-colour-feedback); } .quaive-portlet.app-feedback .well-header:before { background-image: url(../../app-icons/feedback.svg); } .tab.application-feedback .app-name:before, .application-feedback + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/feedback.svg); } #application-body-feedback.state-on ~ #tabs-bar .tab.application-feedback { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-feedback) { #tabs-bar .tab.application-feedback .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-feedback .object-name { display: none; } } &:not(.active-app-feedback) #tabs-bar .tab.application-feedback .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-feedback.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-feedback .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-feedback { display: block; } } } #app-space.active-app-feedback.state-on #application-body-feedback { display: block; } body:has(#app-space.state-on.active-app-feedback) .tab.application-feedback .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-gymnast: #C50F1F; } .app-gymnast, body:has(#app-space.state-on.active-app-gymnast) #tabs-bar .tab.application-gymnast, body:has(#app-space.state-on) .application-gymnast + .application-label { --app-colour: var(--app-colour-gymnast); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-gymnast, span.app-icon.app-gymnast { color: var(--app-colour-gymnast); } .quaive-portlet.app-gymnast .well-header:before { background-image: url(../../app-icons/gymnast.svg); } .tab.application-gymnast .app-name:before, .application-gymnast + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/gymnast.svg); } #application-body-gymnast.state-on ~ #tabs-bar .tab.application-gymnast { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-gymnast) { #tabs-bar .tab.application-gymnast .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-gymnast .object-name { display: none; } } &:not(.active-app-gymnast) #tabs-bar .tab.application-gymnast .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-gymnast.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-gymnast .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-gymnast { display: block; } } } #app-space.active-app-gymnast.state-on #application-body-gymnast { display: block; } body:has(#app-space.state-on.active-app-gymnast) .tab.application-gymnast .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-help: dimgray; } .app-help, body:has(#app-space.state-on.active-app-help) #tabs-bar .tab.application-help, body:has(#app-space.state-on) .application-help + .application-label { --app-colour: var(--app-colour-help); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-help, span.app-icon.app-help { color: var(--app-colour-help); } .quaive-portlet.app-help .well-header:before { background-image: url(../../app-icons/help.svg); } .tab.application-help .app-name:before, .application-help + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/help.svg); } #application-body-help.state-on ~ #tabs-bar .tab.application-help { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-help) { #tabs-bar .tab.application-help .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-help .object-name { display: none; } } &:not(.active-app-help) #tabs-bar .tab.application-help .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-help.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-help .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-help { display: block; } } } #app-space.active-app-help.state-on #application-body-help { display: block; } body:has(#app-space.state-on.active-app-help) .tab.application-help .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-image-bank: #7E726A; } .app-image-bank, body:has(#app-space.state-on.active-app-image-bank) #tabs-bar .tab.application-image-bank, body:has(#app-space.state-on) .application-image-bank + .application-label { --app-colour: var(--app-colour-image-bank); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-image-bank, span.app-icon.app-image-bank { color: var(--app-colour-image-bank); } .quaive-portlet.app-image-bank .well-header:before { background-image: url(../../app-icons/image-bank.svg); } .tab.application-image-bank .app-name:before, .application-image-bank + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/image-bank.svg); } #application-body-image-bank.state-on ~ #tabs-bar .tab.application-image-bank { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-image-bank) { #tabs-bar .tab.application-image-bank .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-image-bank .object-name { display: none; } } &:not(.active-app-image-bank) #tabs-bar .tab.application-image-bank .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-image-bank.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-image-bank .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-image-bank { display: block; } } } #app-space.active-app-image-bank.state-on #application-body-image-bank { display: block; } body:has(#app-space.state-on.active-app-image-bank) .tab.application-image-bank .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-images: #fe28a2; } .app-images, body:has(#app-space.state-on.active-app-images) #tabs-bar .tab.application-images, body:has(#app-space.state-on) .application-images + .application-label { --app-colour: var(--app-colour-images); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-images, span.app-icon.app-images { color: var(--app-colour-images); } .quaive-portlet.app-images .well-header:before { background-image: url(../../app-icons/images.svg); } .tab.application-images .app-name:before, .application-images + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/images.svg); } #application-body-images.state-on ~ #tabs-bar .tab.application-images { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-images) { #tabs-bar .tab.application-images .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-images .object-name { display: none; } } &:not(.active-app-images) #tabs-bar .tab.application-images .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-images.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-images .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-images { display: block; } } } #app-space.active-app-images.state-on #application-body-images { display: block; } body:has(#app-space.state-on.active-app-images) .tab.application-images .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-jahrzeit: #5B6680; } .app-jahrzeit, body:has(#app-space.state-on.active-app-jahrzeit) #tabs-bar .tab.application-jahrzeit, body:has(#app-space.state-on) .application-jahrzeit + .application-label { --app-colour: var(--app-colour-jahrzeit); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-jahrzeit, span.app-icon.app-jahrzeit { color: var(--app-colour-jahrzeit); } .quaive-portlet.app-jahrzeit .well-header:before { background-image: url(../../app-icons/jahrzeit.svg); } .tab.application-jahrzeit .app-name:before, .application-jahrzeit + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/jahrzeit.svg); } #application-body-jahrzeit.state-on ~ #tabs-bar .tab.application-jahrzeit { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-jahrzeit) { #tabs-bar .tab.application-jahrzeit .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-jahrzeit .object-name { display: none; } } &:not(.active-app-jahrzeit) #tabs-bar .tab.application-jahrzeit .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-jahrzeit.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-jahrzeit .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-jahrzeit { display: block; } } } #app-space.active-app-jahrzeit.state-on #application-body-jahrzeit { display: block; } body:has(#app-space.state-on.active-app-jahrzeit) .tab.application-jahrzeit .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-jobs: #c73d78; } .app-jobs, body:has(#app-space.state-on.active-app-jobs) #tabs-bar .tab.application-jobs, body:has(#app-space.state-on) .application-jobs + .application-label { --app-colour: var(--app-colour-jobs); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-jobs, span.app-icon.app-jobs { color: var(--app-colour-jobs); } .quaive-portlet.app-jobs .well-header:before { background-image: url(../../app-icons/jobs.svg); } .tab.application-jobs .app-name:before, .application-jobs + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/jobs.svg); } #application-body-jobs.state-on ~ #tabs-bar .tab.application-jobs { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-jobs) { #tabs-bar .tab.application-jobs .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-jobs .object-name { display: none; } } &:not(.active-app-jobs) #tabs-bar .tab.application-jobs .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-jobs.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-jobs .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-jobs { display: block; } } } #app-space.active-app-jobs.state-on #application-body-jobs { display: block; } body:has(#app-space.state-on.active-app-jobs) .tab.application-jobs .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-journal: #FA2D48; } .app-journal, body:has(#app-space.state-on.active-app-journal) #tabs-bar .tab.application-journal, body:has(#app-space.state-on) .application-journal + .application-label { --app-colour: var(--app-colour-journal); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-journal, span.app-icon.app-journal { color: var(--app-colour-journal); } .quaive-portlet.app-journal .well-header:before { background-image: url(../../app-icons/journal.svg); } .tab.application-journal .app-name:before, .application-journal + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/journal.svg); } #application-body-journal.state-on ~ #tabs-bar .tab.application-journal { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-journal) { #tabs-bar .tab.application-journal .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-journal .object-name { display: none; } } &:not(.active-app-journal) #tabs-bar .tab.application-journal .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-journal.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-journal .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-journal { display: block; } } } #app-space.active-app-journal.state-on #application-body-journal { display: block; } body:has(#app-space.state-on.active-app-journal) .tab.application-journal .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-kiki: #7A5AF8; } .app-kiki, body:has(#app-space.state-on.active-app-kiki) #tabs-bar .tab.application-kiki, body:has(#app-space.state-on) .application-kiki + .application-label { --app-colour: var(--app-colour-kiki); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-kiki, span.app-icon.app-kiki { color: var(--app-colour-kiki); } .quaive-portlet.app-kiki .well-header:before { background-image: url(../../app-icons/kiki.svg); } .tab.application-kiki .app-name:before, .application-kiki + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/kiki.svg); } #application-body-kiki.state-on ~ #tabs-bar .tab.application-kiki { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-kiki) { #tabs-bar .tab.application-kiki .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-kiki .object-name { display: none; } } &:not(.active-app-kiki) #tabs-bar .tab.application-kiki .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-kiki.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-kiki .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-kiki { display: block; } } } #app-space.active-app-kiki.state-on #application-body-kiki { display: block; } body:has(#app-space.state-on.active-app-kiki) .tab.application-kiki .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-library: #a06430; } .app-library, body:has(#app-space.state-on.active-app-library) #tabs-bar .tab.application-library, body:has(#app-space.state-on) .application-library + .application-label { --app-colour: var(--app-colour-library); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-library, span.app-icon.app-library { color: var(--app-colour-library); } .quaive-portlet.app-library .well-header:before { background-image: url(../../app-icons/library.svg); } .tab.application-library .app-name:before, .application-library + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/library.svg); } #application-body-library.state-on ~ #tabs-bar .tab.application-library { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-library) { #tabs-bar .tab.application-library .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-library .object-name { display: none; } } &:not(.active-app-library) #tabs-bar .tab.application-library .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-library.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-library .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-library { display: block; } } } #app-space.active-app-library.state-on #application-body-library { display: block; } body:has(#app-space.state-on.active-app-library) .tab.application-library .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-mail: #0078D4; } .app-mail, body:has(#app-space.state-on.active-app-mail) #tabs-bar .tab.application-mail, body:has(#app-space.state-on) .application-mail + .application-label { --app-colour: var(--app-colour-mail); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-mail, span.app-icon.app-mail { color: var(--app-colour-mail); } .quaive-portlet.app-mail .well-header:before { background-image: url(../../app-icons/mail.svg); } .tab.application-mail .app-name:before, .application-mail + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/mail.svg); } #application-body-mail.state-on ~ #tabs-bar .tab.application-mail { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-mail) { #tabs-bar .tab.application-mail .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-mail .object-name { display: none; } } &:not(.active-app-mail) #tabs-bar .tab.application-mail .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-mail.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-mail .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-mail { display: block; } } } #app-space.active-app-mail.state-on #application-body-mail { display: block; } body:has(#app-space.state-on.active-app-mail) .tab.application-mail .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-mailings: #1668b8; } .app-mailings, body:has(#app-space.state-on.active-app-mailings) #tabs-bar .tab.application-mailings, body:has(#app-space.state-on) .application-mailings + .application-label { --app-colour: var(--app-colour-mailings); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-mailings, span.app-icon.app-mailings { color: var(--app-colour-mailings); } .quaive-portlet.app-mailings .well-header:before { background-image: url(../../app-icons/mailings.svg); } .tab.application-mailings .app-name:before, .application-mailings + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/mailings.svg); } #application-body-mailings.state-on ~ #tabs-bar .tab.application-mailings { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-mailings) { #tabs-bar .tab.application-mailings .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-mailings .object-name { display: none; } } &:not(.active-app-mailings) #tabs-bar .tab.application-mailings .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-mailings.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-mailings .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-mailings { display: block; } } } #app-space.active-app-mailings.state-on #application-body-mailings { display: block; } body:has(#app-space.state-on.active-app-mailings) .tab.application-mailings .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-meetings: limegreen; } .app-meetings, body:has(#app-space.state-on.active-app-meetings) #tabs-bar .tab.application-meetings, body:has(#app-space.state-on) .application-meetings + .application-label { --app-colour: var(--app-colour-meetings); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-meetings, span.app-icon.app-meetings { color: var(--app-colour-meetings); } .quaive-portlet.app-meetings .well-header:before { background-image: url(../../app-icons/meetings.svg); } .tab.application-meetings .app-name:before, .application-meetings + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/meetings.svg); } #application-body-meetings.state-on ~ #tabs-bar .tab.application-meetings { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-meetings) { #tabs-bar .tab.application-meetings .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-meetings .object-name { display: none; } } &:not(.active-app-meetings) #tabs-bar .tab.application-meetings .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-meetings.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-meetings .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-meetings { display: block; } } } #app-space.active-app-meetings.state-on #application-body-meetings { display: block; } body:has(#app-space.state-on.active-app-meetings) .tab.application-meetings .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-messages: #4267B2; } .app-messages, body:has(#app-space.state-on.active-app-messages) #tabs-bar .tab.application-messages, body:has(#app-space.state-on) .application-messages + .application-label { --app-colour: var(--app-colour-messages); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-messages, span.app-icon.app-messages { color: var(--app-colour-messages); } .quaive-portlet.app-messages .well-header:before { background-image: url(../../app-icons/messages.svg); } .tab.application-messages .app-name:before, .application-messages + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/messages.svg); } #application-body-messages.state-on ~ #tabs-bar .tab.application-messages { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-messages) { #tabs-bar .tab.application-messages .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-messages .object-name { display: none; } } &:not(.active-app-messages) #tabs-bar .tab.application-messages .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-messages.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-messages .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-messages { display: block; } } } #app-space.active-app-messages.state-on #application-body-messages { display: block; } body:has(#app-space.state-on.active-app-messages) .tab.application-messages .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-monitor: #0E9C8A; } .app-monitor, body:has(#app-space.state-on.active-app-monitor) #tabs-bar .tab.application-monitor, body:has(#app-space.state-on) .application-monitor + .application-label { --app-colour: var(--app-colour-monitor); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-monitor, span.app-icon.app-monitor { color: var(--app-colour-monitor); } .quaive-portlet.app-monitor .well-header:before { background-image: url(../../app-icons/monitor.svg); } .tab.application-monitor .app-name:before, .application-monitor + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/monitor.svg); } #application-body-monitor.state-on ~ #tabs-bar .tab.application-monitor { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-monitor) { #tabs-bar .tab.application-monitor .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-monitor .object-name { display: none; } } &:not(.active-app-monitor) #tabs-bar .tab.application-monitor .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-monitor.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-monitor .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-monitor { display: block; } } } #app-space.active-app-monitor.state-on #application-body-monitor { display: block; } body:has(#app-space.state-on.active-app-monitor) .tab.application-monitor .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-news: #F26522; } .app-news, body:has(#app-space.state-on.active-app-news) #tabs-bar .tab.application-news, body:has(#app-space.state-on) .application-news + .application-label { --app-colour: var(--app-colour-news); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-news, span.app-icon.app-news { color: var(--app-colour-news); } .quaive-portlet.app-news .well-header:before { background-image: url(../../app-icons/news.svg); } .tab.application-news .app-name:before, .application-news + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/news.svg); } #application-body-news.state-on ~ #tabs-bar .tab.application-news { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-news) { #tabs-bar .tab.application-news .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-news .object-name { display: none; } } &:not(.active-app-news) #tabs-bar .tab.application-news .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-news.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-news .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-news { display: block; } } } #app-space.active-app-news.state-on #application-body-news { display: block; } body:has(#app-space.state-on.active-app-news) .tab.application-news .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-notes: #B8860B; } .app-notes, body:has(#app-space.state-on.active-app-notes) #tabs-bar .tab.application-notes, body:has(#app-space.state-on) .application-notes + .application-label { --app-colour: var(--app-colour-notes); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-notes, span.app-icon.app-notes { color: var(--app-colour-notes); } .quaive-portlet.app-notes .well-header:before { background-image: url(../../app-icons/notes.svg); } .tab.application-notes .app-name:before, .application-notes + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/notes.svg); } #application-body-notes.state-on ~ #tabs-bar .tab.application-notes { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-notes) { #tabs-bar .tab.application-notes .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-notes .object-name { display: none; } } &:not(.active-app-notes) #tabs-bar .tab.application-notes .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-notes.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-notes .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-notes { display: block; } } } #app-space.active-app-notes.state-on #application-body-notes { display: block; } body:has(#app-space.state-on.active-app-notes) .tab.application-notes .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-notifications: #6e6862; } .app-notifications, body:has(#app-space.state-on.active-app-notifications) #tabs-bar .tab.application-notifications, body:has(#app-space.state-on) .application-notifications + .application-label { --app-colour: var(--app-colour-notifications); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-notifications, span.app-icon.app-notifications { color: var(--app-colour-notifications); } .quaive-portlet.app-notifications .well-header:before { background-image: url(../../app-icons/notifications.svg); } .tab.application-notifications .app-name:before, .application-notifications + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/notifications.svg); } #application-body-notifications.state-on ~ #tabs-bar .tab.application-notifications { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-notifications) { #tabs-bar .tab.application-notifications .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-notifications .object-name { display: none; } } &:not(.active-app-notifications) #tabs-bar .tab.application-notifications .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-notifications.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-notifications .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-notifications { display: block; } } } #app-space.active-app-notifications.state-on #application-body-notifications { display: block; } body:has(#app-space.state-on.active-app-notifications) .tab.application-notifications .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-office: #1668b8; } .app-office, body:has(#app-space.state-on.active-app-office) #tabs-bar .tab.application-office, body:has(#app-space.state-on) .application-office + .application-label { --app-colour: var(--app-colour-office); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-office, span.app-icon.app-office { color: var(--app-colour-office); } .quaive-portlet.app-office .well-header:before { background-image: url(../../app-icons/office.svg); } .tab.application-office .app-name:before, .application-office + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/office.svg); } #application-body-office.state-on ~ #tabs-bar .tab.application-office { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-office) { #tabs-bar .tab.application-office .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-office .object-name { display: none; } } &:not(.active-app-office) #tabs-bar .tab.application-office .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-office.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-office .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-office { display: block; } } } #app-space.active-app-office.state-on #application-body-office { display: block; } body:has(#app-space.state-on.active-app-office) .tab.application-office .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-password: #696969; } .app-password, body:has(#app-space.state-on.active-app-password) #tabs-bar .tab.application-password, body:has(#app-space.state-on) .application-password + .application-label { --app-colour: var(--app-colour-password); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-password, span.app-icon.app-password { color: var(--app-colour-password); } .quaive-portlet.app-password .well-header:before { background-image: url(../../app-icons/password.svg); } .tab.application-password .app-name:before, .application-password + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/password.svg); } #application-body-password.state-on ~ #tabs-bar .tab.application-password { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-password) { #tabs-bar .tab.application-password .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-password .object-name { display: none; } } &:not(.active-app-password) #tabs-bar .tab.application-password .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-password.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-password .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-password { display: block; } } } #app-space.active-app-password.state-on #application-body-password { display: block; } body:has(#app-space.state-on.active-app-password) .tab.application-password .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-polls: #208840; } .app-polls, body:has(#app-space.state-on.active-app-polls) #tabs-bar .tab.application-polls, body:has(#app-space.state-on) .application-polls + .application-label { --app-colour: var(--app-colour-polls); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-polls, span.app-icon.app-polls { color: var(--app-colour-polls); } .quaive-portlet.app-polls .well-header:before { background-image: url(../../app-icons/polls.svg); } .tab.application-polls .app-name:before, .application-polls + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/polls.svg); } #application-body-polls.state-on ~ #tabs-bar .tab.application-polls { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-polls) { #tabs-bar .tab.application-polls .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-polls .object-name { display: none; } } &:not(.active-app-polls) #tabs-bar .tab.application-polls .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-polls.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-polls .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-polls { display: block; } } } #app-space.active-app-polls.state-on #application-body-polls { display: block; } body:has(#app-space.state-on.active-app-polls) .tab.application-polls .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-preferences: dimgray; } .app-preferences, body:has(#app-space.state-on.active-app-preferences) #tabs-bar .tab.application-preferences, body:has(#app-space.state-on) .application-preferences + .application-label { --app-colour: var(--app-colour-preferences); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-preferences, span.app-icon.app-preferences { color: var(--app-colour-preferences); } .quaive-portlet.app-preferences .well-header:before { background-image: url(../../app-icons/preferences.svg); } .tab.application-preferences .app-name:before, .application-preferences + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/preferences.svg); } #application-body-preferences.state-on ~ #tabs-bar .tab.application-preferences { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-preferences) { #tabs-bar .tab.application-preferences .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-preferences .object-name { display: none; } } &:not(.active-app-preferences) #tabs-bar .tab.application-preferences .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-preferences.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-preferences .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-preferences { display: block; } } } #app-space.active-app-preferences.state-on #application-body-preferences { display: block; } body:has(#app-space.state-on.active-app-preferences) .tab.application-preferences .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-present: #C43E1C; } .app-present, body:has(#app-space.state-on.active-app-present) #tabs-bar .tab.application-present, body:has(#app-space.state-on) .application-present + .application-label { --app-colour: var(--app-colour-present); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-present, span.app-icon.app-present { color: var(--app-colour-present); } .quaive-portlet.app-present .well-header:before { background-image: url(../../app-icons/present.svg); } .tab.application-present .app-name:before, .application-present + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/present.svg); } #application-body-present.state-on ~ #tabs-bar .tab.application-present { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-present) { #tabs-bar .tab.application-present .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-present .object-name { display: none; } } &:not(.active-app-present) #tabs-bar .tab.application-present .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-present.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-present .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-present { display: block; } } } #app-space.active-app-present.state-on #application-body-present { display: block; } body:has(#app-space.state-on.active-app-present) .tab.application-present .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-profile: #6e6862; } .app-profile, body:has(#app-space.state-on.active-app-profile) #tabs-bar .tab.application-profile, body:has(#app-space.state-on) .application-profile + .application-label { --app-colour: var(--app-colour-profile); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-profile, span.app-icon.app-profile { color: var(--app-colour-profile); } .quaive-portlet.app-profile .well-header:before { background-image: url(../../app-icons/profile.svg); } .tab.application-profile .app-name:before, .application-profile + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/profile.svg); } #application-body-profile.state-on ~ #tabs-bar .tab.application-profile { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-profile) { #tabs-bar .tab.application-profile .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-profile .object-name { display: none; } } &:not(.active-app-profile) #tabs-bar .tab.application-profile .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-profile.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-profile .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-profile { display: block; } } } #app-space.active-app-profile.state-on #application-body-profile { display: block; } body:has(#app-space.state-on.active-app-profile) .tab.application-profile .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-publisher: #1668b8; } .app-publisher, body:has(#app-space.state-on.active-app-publisher) #tabs-bar .tab.application-publisher, body:has(#app-space.state-on) .application-publisher + .application-label { --app-colour: var(--app-colour-publisher); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-publisher, span.app-icon.app-publisher { color: var(--app-colour-publisher); } .quaive-portlet.app-publisher .well-header:before { background-image: url(../../app-icons/publisher.svg); } .tab.application-publisher .app-name:before, .application-publisher + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/publisher.svg); } #application-body-publisher.state-on ~ #tabs-bar .tab.application-publisher { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-publisher) { #tabs-bar .tab.application-publisher .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-publisher .object-name { display: none; } } &:not(.active-app-publisher) #tabs-bar .tab.application-publisher .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-publisher.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-publisher .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-publisher { display: block; } } } #app-space.active-app-publisher.state-on #application-body-publisher { display: block; } body:has(#app-space.state-on.active-app-publisher) .tab.application-publisher .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-registration: #1a2030; } .app-registration, body:has(#app-space.state-on.active-app-registration) #tabs-bar .tab.application-registration, body:has(#app-space.state-on) .application-registration + .application-label { --app-colour: var(--app-colour-registration); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-registration, span.app-icon.app-registration { color: var(--app-colour-registration); } .quaive-portlet.app-registration .well-header:before { background-image: url(../../app-icons/registration.svg); } .tab.application-registration .app-name:before, .application-registration + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/registration.svg); } #application-body-registration.state-on ~ #tabs-bar .tab.application-registration { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-registration) { #tabs-bar .tab.application-registration .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-registration .object-name { display: none; } } &:not(.active-app-registration) #tabs-bar .tab.application-registration .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-registration.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-registration .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-registration { display: block; } } } #app-space.active-app-registration.state-on #application-body-registration { display: block; } body:has(#app-space.state-on.active-app-registration) .tab.application-registration .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-reminders: Purple; } .app-reminders, body:has(#app-space.state-on.active-app-reminders) #tabs-bar .tab.application-reminders, body:has(#app-space.state-on) .application-reminders + .application-label { --app-colour: var(--app-colour-reminders); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-reminders, span.app-icon.app-reminders { color: var(--app-colour-reminders); } .quaive-portlet.app-reminders .well-header:before { background-image: url(../../app-icons/reminders.svg); } .tab.application-reminders .app-name:before, .application-reminders + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/reminders.svg); } #application-body-reminders.state-on ~ #tabs-bar .tab.application-reminders { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-reminders) { #tabs-bar .tab.application-reminders .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-reminders .object-name { display: none; } } &:not(.active-app-reminders) #tabs-bar .tab.application-reminders .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-reminders.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-reminders .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-reminders { display: block; } } } #app-space.active-app-reminders.state-on #application-body-reminders { display: block; } body:has(#app-space.state-on.active-app-reminders) .tab.application-reminders .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-sabra: #1E6F5C; } .app-sabra, body:has(#app-space.state-on.active-app-sabra) #tabs-bar .tab.application-sabra, body:has(#app-space.state-on) .application-sabra + .application-label { --app-colour: var(--app-colour-sabra); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-sabra, span.app-icon.app-sabra { color: var(--app-colour-sabra); } .quaive-portlet.app-sabra .well-header:before { background-image: url(../../app-icons/sabra.svg); } .tab.application-sabra .app-name:before, .application-sabra + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/sabra.svg); } #application-body-sabra.state-on ~ #tabs-bar .tab.application-sabra { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-sabra) { #tabs-bar .tab.application-sabra .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-sabra .object-name { display: none; } } &:not(.active-app-sabra) #tabs-bar .tab.application-sabra .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-sabra.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-sabra .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-sabra { display: block; } } } #app-space.active-app-sabra.state-on #application-body-sabra { display: block; } body:has(#app-space.state-on.active-app-sabra) .tab.application-sabra .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-search: dimgray; } .app-search, body:has(#app-space.state-on.active-app-search) #tabs-bar .tab.application-search, body:has(#app-space.state-on) .application-search + .application-label { --app-colour: var(--app-colour-search); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-search, span.app-icon.app-search { color: var(--app-colour-search); } .quaive-portlet.app-search .well-header:before { background-image: url(../../app-icons/search.svg); } .tab.application-search .app-name:before, .application-search + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/search.svg); } #application-body-search.state-on ~ #tabs-bar .tab.application-search { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-search) { #tabs-bar .tab.application-search .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-search .object-name { display: none; } } &:not(.active-app-search) #tabs-bar .tab.application-search .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-search.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-search .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-search { display: block; } } } #app-space.active-app-search.state-on #application-body-search { display: block; } body:has(#app-space.state-on.active-app-search) .tab.application-search .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-setup: #4a6f95; } .app-setup, body:has(#app-space.state-on.active-app-setup) #tabs-bar .tab.application-setup, body:has(#app-space.state-on) .application-setup + .application-label { --app-colour: var(--app-colour-setup); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-setup, span.app-icon.app-setup { color: var(--app-colour-setup); } .quaive-portlet.app-setup .well-header:before { background-image: url(../../app-icons/setup.svg); } .tab.application-setup .app-name:before, .application-setup + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/setup.svg); } #application-body-setup.state-on ~ #tabs-bar .tab.application-setup { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-setup) { #tabs-bar .tab.application-setup .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-setup .object-name { display: none; } } &:not(.active-app-setup) #tabs-bar .tab.application-setup .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-setup.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-setup .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-setup { display: block; } } } #app-space.active-app-setup.state-on #application-body-setup { display: block; } body:has(#app-space.state-on.active-app-setup) .tab.application-setup .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-signup: #5BA17F; } .app-signup, body:has(#app-space.state-on.active-app-signup) #tabs-bar .tab.application-signup, body:has(#app-space.state-on) .application-signup + .application-label { --app-colour: var(--app-colour-signup); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-signup, span.app-icon.app-signup { color: var(--app-colour-signup); } .quaive-portlet.app-signup .well-header:before { background-image: url(../../app-icons/signup.svg); } .tab.application-signup .app-name:before, .application-signup + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/signup.svg); } #application-body-signup.state-on ~ #tabs-bar .tab.application-signup { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-signup) { #tabs-bar .tab.application-signup .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-signup .object-name { display: none; } } &:not(.active-app-signup) #tabs-bar .tab.application-signup .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-signup.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-signup .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-signup { display: block; } } } #app-space.active-app-signup.state-on #application-body-signup { display: block; } body:has(#app-space.state-on.active-app-signup) .tab.application-signup .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-slide-bank: #b8232c; } .app-slide-bank, body:has(#app-space.state-on.active-app-slide-bank) #tabs-bar .tab.application-slide-bank, body:has(#app-space.state-on) .application-slide-bank + .application-label { --app-colour: var(--app-colour-slide-bank); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-slide-bank, span.app-icon.app-slide-bank { color: var(--app-colour-slide-bank); } .quaive-portlet.app-slide-bank .well-header:before { background-image: url(../../app-icons/slide-bank.svg); } .tab.application-slide-bank .app-name:before, .application-slide-bank + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/slide-bank.svg); } #application-body-slide-bank.state-on ~ #tabs-bar .tab.application-slide-bank { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-slide-bank) { #tabs-bar .tab.application-slide-bank .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-slide-bank .object-name { display: none; } } &:not(.active-app-slide-bank) #tabs-bar .tab.application-slide-bank .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-slide-bank.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-slide-bank .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-slide-bank { display: block; } } } #app-space.active-app-slide-bank.state-on #application-body-slide-bank { display: block; } body:has(#app-space.state-on.active-app-slide-bank) .tab.application-slide-bank .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-team-spaces: SeaGreen; } .app-team-spaces, body:has(#app-space.state-on.active-app-team-spaces) #tabs-bar .tab.application-team-spaces, body:has(#app-space.state-on) .application-team-spaces + .application-label { --app-colour: var(--app-colour-team-spaces); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-team-spaces, span.app-icon.app-team-spaces { color: var(--app-colour-team-spaces); } .quaive-portlet.app-team-spaces .well-header:before { background-image: url(../../app-icons/team-spaces.svg); } .tab.application-team-spaces .app-name:before, .application-team-spaces + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/team-spaces.svg); } #application-body-team-spaces.state-on ~ #tabs-bar .tab.application-team-spaces { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-team-spaces) { #tabs-bar .tab.application-team-spaces .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-team-spaces .object-name { display: none; } } &:not(.active-app-team-spaces) #tabs-bar .tab.application-team-spaces .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-team-spaces.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-team-spaces .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-team-spaces { display: block; } } } #app-space.active-app-team-spaces.state-on #application-body-team-spaces { display: block; } body:has(#app-space.state-on.active-app-team-spaces) .tab.application-team-spaces .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-todo: Purple; } .app-todo, body:has(#app-space.state-on.active-app-todo) #tabs-bar .tab.application-todo, body:has(#app-space.state-on) .application-todo + .application-label { --app-colour: var(--app-colour-todo); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-todo, span.app-icon.app-todo { color: var(--app-colour-todo); } .quaive-portlet.app-todo .well-header:before { background-image: url(../../app-icons/todo.svg); } .tab.application-todo .app-name:before, .application-todo + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/todo.svg); } #application-body-todo.state-on ~ #tabs-bar .tab.application-todo { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-todo) { #tabs-bar .tab.application-todo .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-todo .object-name { display: none; } } &:not(.active-app-todo) #tabs-bar .tab.application-todo .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-todo.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-todo .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-todo { display: block; } } } #app-space.active-app-todo.state-on #application-body-todo { display: block; } body:has(#app-space.state-on.active-app-todo) .tab.application-todo .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-todo-legacy: #c73d78; } .app-todo-legacy, body:has(#app-space.state-on.active-app-todo-legacy) #tabs-bar .tab.application-todo-legacy, body:has(#app-space.state-on) .application-todo-legacy + .application-label { --app-colour: var(--app-colour-todo-legacy); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-todo-legacy, span.app-icon.app-todo-legacy { color: var(--app-colour-todo-legacy); } .quaive-portlet.app-todo-legacy .well-header:before { background-image: url(../../app-icons/todo-legacy.svg); } .tab.application-todo-legacy .app-name:before, .application-todo-legacy + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/todo-legacy.svg); } #application-body-todo-legacy.state-on ~ #tabs-bar .tab.application-todo-legacy { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-todo-legacy) { #tabs-bar .tab.application-todo-legacy .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-todo-legacy .object-name { display: none; } } &:not(.active-app-todo-legacy) #tabs-bar .tab.application-todo-legacy .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-todo-legacy.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-todo-legacy .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-todo-legacy { display: block; } } } #app-space.active-app-todo-legacy.state-on #application-body-todo-legacy { display: block; } body:has(#app-space.state-on.active-app-todo-legacy) .tab.application-todo-legacy .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-updates: #6c5ce7; } .app-updates, body:has(#app-space.state-on.active-app-updates) #tabs-bar .tab.application-updates, body:has(#app-space.state-on) .application-updates + .application-label { --app-colour: var(--app-colour-updates); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-updates, span.app-icon.app-updates { color: var(--app-colour-updates); } .quaive-portlet.app-updates .well-header:before { background-image: url(../../app-icons/updates.svg); } .tab.application-updates .app-name:before, .application-updates + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/updates.svg); } #application-body-updates.state-on ~ #tabs-bar .tab.application-updates { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-updates) { #tabs-bar .tab.application-updates .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-updates .object-name { display: none; } } &:not(.active-app-updates) #tabs-bar .tab.application-updates .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-updates.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-updates .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-updates { display: block; } } } #app-space.active-app-updates.state-on #application-body-updates { display: block; } body:has(#app-space.state-on.active-app-updates) .tab.application-updates .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-weather: #2E97D4; } .app-weather, body:has(#app-space.state-on.active-app-weather) #tabs-bar .tab.application-weather, body:has(#app-space.state-on) .application-weather + .application-label { --app-colour: var(--app-colour-weather); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-weather, span.app-icon.app-weather { color: var(--app-colour-weather); } .quaive-portlet.app-weather .well-header:before { background-image: url(../../app-icons/weather.svg); } .tab.application-weather .app-name:before, .application-weather + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/weather.svg); } #application-body-weather.state-on ~ #tabs-bar .tab.application-weather { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-weather) { #tabs-bar .tab.application-weather .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-weather .object-name { display: none; } } &:not(.active-app-weather) #tabs-bar .tab.application-weather .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-weather.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-weather .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-weather { display: block; } } } #app-space.active-app-weather.state-on #application-body-weather { display: block; } body:has(#app-space.state-on.active-app-weather) .tab.application-weather .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-whiteboard: #6b46c1; } .app-whiteboard, body:has(#app-space.state-on.active-app-whiteboard) #tabs-bar .tab.application-whiteboard, body:has(#app-space.state-on) .application-whiteboard + .application-label { --app-colour: var(--app-colour-whiteboard); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-whiteboard, span.app-icon.app-whiteboard { color: var(--app-colour-whiteboard); } .quaive-portlet.app-whiteboard .well-header:before { background-image: url(../../app-icons/whiteboard.svg); } .tab.application-whiteboard .app-name:before, .application-whiteboard + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/whiteboard.svg); } #application-body-whiteboard.state-on ~ #tabs-bar .tab.application-whiteboard { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-whiteboard) { #tabs-bar .tab.application-whiteboard .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-whiteboard .object-name { display: none; } } &:not(.active-app-whiteboard) #tabs-bar .tab.application-whiteboard .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-whiteboard.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-whiteboard .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-whiteboard { display: block; } } } #app-space.active-app-whiteboard.state-on #application-body-whiteboard { display: block; } body:has(#app-space.state-on.active-app-whiteboard) .tab.application-whiteboard .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-workspaces: DodgerBlue; } .app-workspaces, body:has(#app-space.state-on.active-app-workspaces) #tabs-bar .tab.application-workspaces, body:has(#app-space.state-on) .application-workspaces + .application-label { --app-colour: var(--app-colour-workspaces); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-workspaces, span.app-icon.app-workspaces { color: var(--app-colour-workspaces); } .quaive-portlet.app-workspaces .well-header:before { background-image: url(../../app-icons/workspaces.svg); } .tab.application-workspaces .app-name:before, .application-workspaces + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/workspaces.svg); } #application-body-workspaces.state-on ~ #tabs-bar .tab.application-workspaces { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-workspaces) { #tabs-bar .tab.application-workspaces .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-workspaces .object-name { display: none; } } &:not(.active-app-workspaces) #tabs-bar .tab.application-workspaces .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-workspaces.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-workspaces .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-workspaces { display: block; } } } #app-space.active-app-workspaces.state-on #application-body-workspaces { display: block; } body:has(#app-space.state-on.active-app-workspaces) .tab.application-workspaces .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } :root { --app-colour-write: #0f6cbd; } .app-write, body:has(#app-space.state-on.active-app-write) #tabs-bar .tab.application-write, body:has(#app-space.state-on) .application-write + .application-label { --app-colour: var(--app-colour-write); } /* Inline SVG icons painted with ``currentColor`` (e.g. on a help page head, or in a portlet header) pick up the app's brand colour from here. The canonical ```` tile icons stay white because doesn't propagate ``color``. */ svg.app-icon.app-write, span.app-icon.app-write { color: var(--app-colour-write); } .quaive-portlet.app-write .well-header:before { background-image: url(../../app-icons/write.svg); } .tab.application-write .app-name:before, .application-write + .application-label .breadcrumbs a:before { background-image: url(../../app-icons/write.svg); } #application-body-write.state-on ~ #tabs-bar .tab.application-write { display: grid; } #app-space { &.state-off, &.state-paused, &:not(.active-app-write) { #tabs-bar .tab.application-write .app-name:before { background-color: transparent !important; } /* Per-tab object-name (e.g. workspace title on the workspaces / documents tabs) only shows when that tab's app is the active one — keeps inactive tabs compact. */ #tabs-bar .tab.application-write .object-name { display: none; } } &:not(.active-app-write) #tabs-bar .tab.application-write .more-menu-toggle, &.state-paused #tabs-bar .tab .more-menu-toggle, &.state-paused #application-body + .application-label .more-menu-toggle { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); display: none; } &.state-paused #application-body + .application-label .breadcrumbs a:before { filter: var(--tabs-bar-tab-app-icon-filter-dimmed); } &.active-app-write.state-on, &.state-on #application-body + .application-label .breadcrumbs a:before { .tab.application-write .app-name:before { filter: invert(0%) !important; opacity: 1 !important; } #application-body-write { display: block; } } } #app-space.active-app-write.state-on #application-body-write { display: block; } body:has(#app-space.state-on.active-app-write) .tab.application-write .app-name:before, body:has(#app-space.state-on #application-body + .application-label .breadcrumbs a:before) { filter: invert(0%) !important; } /* Side global nav — rail position follows the active app's sidebar state */ @media only screen and (min-width: calc(768px + 1px)) { body[data-global-nav="side"]:has(#app-space.state-on.active-app-absence #application-body-absence.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-activities #application-body-activities.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-administrator #application-body-administrator.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-administrator-tool #application-body-administrator-tool.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-apps #application-body-apps.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-app-store #application-body-app-store.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-assessments #application-body-assessments.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-audit #application-body-audit.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-bookmarks #application-body-bookmarks.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-calculate #application-body-calculate.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-calendar #application-body-calendar.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-case-manager #application-body-case-manager.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-chokhmah #application-body-chokhmah.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-classifieds #application-body-classifieds.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-cloud-storage #application-body-cloud-storage.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-configuration #application-body-configuration.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-contacts #application-body-contacts.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-contracts #application-body-contracts.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-demo #application-body-demo.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-diary #application-body-diary.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-document-browser #application-body-document-browser.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-documents #application-body-documents.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-draw #application-body-draw.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-drive #application-body-drive.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-events #application-body-events.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-family-tree #application-body-family-tree.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-favourites #application-body-favourites.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-feedback #application-body-feedback.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-gymnast #application-body-gymnast.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-help #application-body-help.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-image-bank #application-body-image-bank.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-images #application-body-images.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-jahrzeit #application-body-jahrzeit.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-jobs #application-body-jobs.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-journal #application-body-journal.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-kiki #application-body-kiki.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-library #application-body-library.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-mail #application-body-mail.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-mailings #application-body-mailings.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-meetings #application-body-meetings.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-messages #application-body-messages.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-monitor #application-body-monitor.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-news #application-body-news.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-notes #application-body-notes.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-notifications #application-body-notifications.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-office #application-body-office.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-password #application-body-password.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-polls #application-body-polls.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-preferences #application-body-preferences.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-present #application-body-present.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-profile #application-body-profile.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-publisher #application-body-publisher.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-registration #application-body-registration.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-reminders #application-body-reminders.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-sabra #application-body-sabra.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-search #application-body-search.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-setup #application-body-setup.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-signup #application-body-signup.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-slide-bank #application-body-slide-bank.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-team-spaces #application-body-team-spaces.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-todo #application-body-todo.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-todo-legacy #application-body-todo-legacy.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-updates #application-body-updates.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-weather #application-body-weather.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-whiteboard #application-body-whiteboard.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-workspaces #application-body-workspaces.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } body[data-global-nav="side"]:has(#app-space.state-on.active-app-write #application-body-write.sidebar-left-closed) #global-nav-side { inset-inline-start: calc(0.5 * var(--sidebar-padding-right, 25px)); } }