diff options
| author | Vincent Petry <vincent@nextcloud.com> | 2021-01-20 11:32:26 +0100 |
|---|---|---|
| committer | Vincent Petry <vincent@nextcloud.com> | 2021-01-20 12:25:33 +0100 |
| commit | 6e2c6525da5ab05f7a85dbe4ba53f44a951684c2 (patch) | |
| tree | 34633cd3bf791ad31ef3e4a6c0e4b14825ad16a1 /apps | |
| parent | 2c9345a3c674c333e863c21ca249cb336c91fbff (diff) | |
| download | nextcloud-server-6e2c6525da5ab05f7a85dbe4ba53f44a951684c2.tar.gz nextcloud-server-6e2c6525da5ab05f7a85dbe4ba53f44a951684c2.zip | |
Dark mode adjustments for popover
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>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/accessibility/css/dark.scss | 21 |
1 files changed, 19 insertions, 2 deletions
diff --git a/apps/accessibility/css/dark.scss b/apps/accessibility/css/dark.scss index 78203eae9f3..90f9e80f51f 100644 --- a/apps/accessibility/css/dark.scss +++ b/apps/accessibility/css/dark.scss @@ -53,11 +53,12 @@ $color-border-dark: lighten($color-main-background, 14%); .bubble, .app-navigation-entry-menu, -.popovermenu { +.popovermenu, +.popover__menu { li { > button, > a, - > .menuitem { + > .menuitem, > .popover__menuitem { > img { filter: invert(100%); } @@ -71,6 +72,22 @@ $color-border-dark: lighten($color-main-background, 14%); 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-']{ |