UX: Make user tips more visible (#22012)
Inverts the background of the user tip to make it more visible.
This commit is contained in:
parent
7c768a2ff9
commit
774698491d
|
@ -15,14 +15,8 @@ $d-popover-border: var(--primary-low);
|
||||||
top: -10px;
|
top: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tippy-rounded-arrow {
|
.tippy-svg-arrow > svg {
|
||||||
fill: $d-popover-background;
|
color: $d-popover-background;
|
||||||
.svg-arrow {
|
|
||||||
fill: $d-popover-border;
|
|
||||||
}
|
|
||||||
.svg-content {
|
|
||||||
fill: $d-popover-background;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-tooltip] > *,
|
[data-tooltip] > *,
|
||||||
|
|
|
@ -1,3 +1,30 @@
|
||||||
|
.tippy-box[data-theme="user-tips"] {
|
||||||
|
background-color: var(--tertiary);
|
||||||
|
color: var(--secondary);
|
||||||
|
border-color: var(--tertiary);
|
||||||
|
|
||||||
|
.btn-flat {
|
||||||
|
color: var(--secondary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--d-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--secondary);
|
||||||
|
color: var(--tertiary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--tertiary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .tippy-svg-arrow > svg {
|
||||||
|
color: var(--tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.user-tip {
|
.user-tip {
|
||||||
z-index: z("composer", "content") - 1;
|
z-index: z("composer", "content") - 1;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue