mirror of
https://github.com/nextcloud/server.git
synced 2026-02-24 18:37:44 -05:00
6e2c6525da
Add new popover classes from @nextcloud/vue's Popover and PopoverMenu* components. This fixes issues where the menu icons were not inverted. Adjusted border for both the avatar popover menu and also actions popover menu to make them easier to distinguish from the background. Now using border color for the popover arrow to make it more visible outside the border. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
108 lines
2.5 KiB
SCSS
108 lines
2.5 KiB
SCSS
// SCSS variables
|
|
$color-main-text: #d8d8d8;
|
|
$color-main-background: #181818;
|
|
|
|
$color-background-dark: lighten($color-main-background, 4%);
|
|
$color-background-darker: lighten($color-main-background, 8%);
|
|
|
|
$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%);
|
|
|
|
#app-navigation > ul > li > a:first-child,
|
|
#app-navigation > ul > li > ul > li > a:first-child,
|
|
#contactsmenu-menu a,
|
|
#expanddiv a,
|
|
.activity-section .activity-icon.monochrome {
|
|
& > img,
|
|
:not(.avatardiv) > img {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
#navigation #apps li a,
|
|
#body-settings #content.app-settings .app-image-icon,
|
|
#body-settings #content.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');
|
|
}
|
|
}
|
|
}
|