// SCSS variables $color-main-text: #d8d8d8; $color-main-background: #181818; $color-background-hover: lighten($color-main-background, 4%); $color-background-dark: lighten($color-main-background, 7%); $color-background-darker: lighten($color-main-background, 14%); $color-placeholder-light: lighten($color-main-background, 10%); $color-placeholder-dark: lighten($color-main-background, 20%); $color-text-maxcontrast: darken($color-main-text, 30%); $color-text-light: darken($color-main-text, 10%); $color-text-lighter: darken($color-main-text, 20%); $color-loading-light: #777; $color-loading-dark: #ccc; $color-box-shadow: transparentize(darken($color-main-background, 70%), 0.5); $color-border: lighten($color-main-background, 7%); $color-border-dark: lighten($color-main-background, 14%); $image-logo: url('../../../core/img/logo/logo.svg?v=1'); $image-logoheader: url('../../../core/img/logo/logo.svg?v=1'); #app-navigation > ul > li > a:first-child, #app-navigation > ul > li > ul > li > a:first-child, #expanddiv a, .activity-section .activity-icon.monochrome { & > img, :not(.avatardiv) > img { filter: invert(100%); } } #navigation #apps li a, #body-settings #content-vue.app-settings .app-image-icon, #body-settings #content-vue.app-settings #app-sidebar #app-details-view h2 { svg { filter: invert(100%); } } // Otherwise icon-more gets inverted via function #appmenu .icon-more-white { filter: invert(100%); } // since svg icons are inverted, revert to white for the header .header-right > * { >[class^='icon-'] { filter: invert(100%); } } .bubble, .app-navigation-entry-menu, .popovermenu, .popover__menu { li { > button, > a, > .menuitem, > .popover__menuitem { > img { filter: invert(100%); } } } } .bubble, .app-navigation-entry-menu, .popovermenu, #header .menu { border: 1px solid var(--color-border); } .popover[x-placement^='top'] .popover__arrow { border-top-color: var(--color-border); } .popover[x-placement^='bottom'] .popover__arrow { border-bottom-color: var(--color-border); } .popover[x-placement^='left'] .popover__arrow { border-left-color: var(--color-border); } .popover[x-placement^='right'] .popover__arrow { border-right-color: var(--color-border); } .popover .popover__inner { border: 1px solid var(--color-border); } // Prevent slideshow icons from going dark #slideshow { [class^='icon-'], [class*=' icon-']{ filter: invert(100%); } } input[type=checkbox] { &.checkbox { &:checked + label:before { background-image: url('../../../core/img/actions/checkbox-mark-dark.svg'); } &:indeterminate + label:before { background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg'); } } }