discourse/app/assets/stylesheets/common/base/d-popover.scss

$d-popover-background: var(--secondary);
$d-popover-border: var(--primary-low);

.tippy-box {
  color: var(--primary);
  background: $d-popover-background;
  border: 1px solid var(--primary-low);
  box-shadow: shadow("menu-panel");
}

.tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {
  top: 12px;
}
.tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg {
  top: -10px;
}

.tippy-svg-arrow > svg {
  color: $d-popover-background;
}

[data-tooltip] > *,
[data-popover] > * {
  pointer-events: none;
}
FEATURE: automatic dark mode (#10341) A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting. 2020-08-04 10:57:10 +08:00			`$d-popover-background: var(--secondary);`
UX: update color on arrow tippy box (#17263) 2022-06-28 19:25:40 +08:00			`$d-popover-border: var(--primary-low);`
FEATURE: unified popover implementation (#7244) 2019-03-26 22:43:27 +08:00
FIX: uses tippy for popover (#15409) Note this commit also introduce a new {{d-popover}} component, example usage: ```hbs {{#d-popover \|state\|}} {{d-button label="foo.things" class="d-popover-trigger"}} <div class="d-popover-content"> Some content <div> {{/d-popover}} ``` 2022-05-02 23:10:26 +08:00			`.tippy-box {`
			`color: var(--primary);`
			`background: $d-popover-background;`
UX: update chat menu popover styling (#16955) 2022-05-31 15:51:50 +08:00			`border: 1px solid var(--primary-low);`
			`box-shadow: shadow("menu-panel");`
FEATURE: unified popover implementation (#7244) 2019-03-26 22:43:27 +08:00			`}`

FIX: uses tippy for popover (#15409) Note this commit also introduce a new {{d-popover}} component, example usage: ```hbs {{#d-popover \|state\|}} {{d-button label="foo.things" class="d-popover-trigger"}} <div class="d-popover-content"> Some content <div> {{/d-popover}} ``` 2022-05-02 23:10:26 +08:00			`.tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {`
			`top: 12px;`
FEATURE: unified popover implementation (#7244) 2019-03-26 22:43:27 +08:00			`}`
FIX: uses tippy for popover (#15409) Note this commit also introduce a new {{d-popover}} component, example usage: ```hbs {{#d-popover \|state\|}} {{d-button label="foo.things" class="d-popover-trigger"}} <div class="d-popover-content"> Some content <div> {{/d-popover}} ``` 2022-05-02 23:10:26 +08:00			`.tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg {`
			`top: -10px;`
			`}`
UX: Onboarding edits (#18581) * UX: Adjust size of svg arrow * UX: Refactor & style edits 2022-10-13 21:39:52 +08:00
UX: Make user tips more visible (#22012) Inverts the background of the user tip to make it more visible. 2023-06-13 02:08:49 +08:00			`.tippy-svg-arrow > svg {`
			`color: $d-popover-background;`
FIX: uses tippy for popover (#15409) Note this commit also introduce a new {{d-popover}} component, example usage: ```hbs {{#d-popover \|state\|}} {{d-button label="foo.things" class="d-popover-trigger"}} <div class="d-popover-content"> Some content <div> {{/d-popover}} ``` 2022-05-02 23:10:26 +08:00			`}`
FEATURE: unified popover implementation (#7244) 2019-03-26 22:43:27 +08:00
FIX: uses tippy for popover (#15409) Note this commit also introduce a new {{d-popover}} component, example usage: ```hbs {{#d-popover \|state\|}} {{d-button label="foo.things" class="d-popover-trigger"}} <div class="d-popover-content"> Some content <div> {{/d-popover}} ``` 2022-05-02 23:10:26 +08:00			`[data-tooltip] > *,`
			`[data-popover] > * {`
			`pointer-events: none;`
FEATURE: unified popover implementation (#7244) 2019-03-26 22:43:27 +08:00			`}`