discourse/app/assets/stylesheets/common/base/user-tips.scss
Bianca Nenciu bdb9ee8507
UX: Improve user tips (#22518)
- Add an icon to the bootstrap user tip to draw attention
- Remove the second "don't show user tip" button from every user tip
2023-07-11 18:22:40 +03:00

80 lines
1.3 KiB
SCSS

.tippy-box[data-theme="user-tip"] {
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);
}
.d-icon {
color: var(--tertiary);
}
}
> .tippy-svg-arrow {
color: var(--tertiary);
}
}
.user-tip {
z-index: z("composer", "content") - 1;
&__container {
font-weight: normal;
min-width: 300px;
padding: 0.5em;
text-align: left;
}
&__title {
font-size: var(--font-up-2);
font-weight: bold;
}
&__content {
margin-top: 0.25em;
}
&__buttons {
margin-top: 1em;
}
}
.tippy-box[data-theme~="user-tips"][data-placement^="left"]
> .tippy-svg-arrow
> svg {
left: 12px;
}
.tippy-box[data-theme~="user-tips"][data-placement^="top"]
> .tippy-svg-arrow
> svg {
top: 12px;
}
.tippy-box[data-theme~="user-tips"][data-placement^="bottom"]
> .tippy-svg-arrow
> svg {
top: -14px;
left: -1px;
}
.tippy-box[data-theme~="user-tips"] > .tippy-svg-arrow:after,
.tippy-box[data-theme~="user-tips"] > .tippy-svg-arrow > svg {
width: 18px;
height: 18px;
}