paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark_theme: Clean up Tippy box styles.

Browse Source 
Fixes part of #35880.
This commit is contained in:
Sayam Samal
2025-09-11 17:59:36 +05:30
committed by Tim Abbott
parent 930eadb085
commit b9b1798a1e
4 changed files with 21 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/styles/app_variables.css
View File

@@ -1474,7 +1474,18 @@
hsl(200deg 79% 66%)
);
/* Tippy colors */
--color-background-tippy-box: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 0%));
/* Widgets colors */
--color-background-dropdown-widget: light-dark(
hsl(240deg 20% 98%),
hsl(240deg 5% 16%)
);
--color-border-dropdown-widget: light-dark(
hsl(0deg 0% 0% / 40%),
hsl(0deg 0% 0%)
);
--color-border-dropdown-widget-button: light-dark(
hsl(0deg 0% 80%),
hsl(0deg 0% 0% / 60%)

29
web/styles/dark_theme.css
View File

@@ -38,35 +38,6 @@
}
}
.tippy-box:not([data-theme]) {
background: hsl(0deg 0% 0%);
&[data-placement^="top"] > .tippy-arrow::before {
border-top-color: hsl(0deg 0% 0%);
}
&[data-placement^="bottom"] > .tippy-arrow::before {
border-bottom-color: hsl(0deg 0% 0%);
}
&[data-placement^="left"] > .tippy-arrow::before {
border-left-color: hsl(0deg 0% 0%);
}
&[data-placement^="right"] > .tippy-arrow::before {
border-right-color: hsl(0deg 0% 0%);
}
}
.tippy-box[data-theme="dropdown-widget"] {
background-color: hsl(240deg 5% 16%);
border: 1px solid hsl(0deg 0% 0%);
box-shadow:
0 7px 13px hsl(0deg 0% 0% / 35%),
0 5px 8px hsl(0deg 0% 0% / 32%),
0 2px 4px hsl(0deg 0% 0% / 20%);
}
.dropdown-list-delete {
/* hsl(7deg 100% 74%) corresponds to var(--red-250) */
color: color-mix(

10
web/styles/popovers.css
View File

@@ -56,12 +56,12 @@
.tippy-box[data-theme="dropdown-widget"] {
border-radius: 6px;
background-color: hsl(240deg 20% 98%);
border: 1px solid hsl(0deg 0% 0% / 40%);
background-color: var(--color-background-dropdown-widget);
border: 1px solid var(--color-border-dropdown-widget);
box-shadow:
0 7px 13px hsl(0deg 0% 0% / 15%),
0 5px 8px hsl(0deg 0% 0% / 12%),
0 2px 4px hsl(0deg 0% 0% / 10%);
0 7px 13px light-dark(hsl(0deg 0% 0% / 15%), hsl(0deg 0% 0% / 35%)),
0 5px 8px light-dark(hsl(0deg 0% 0% / 12%), hsl(0deg 0% 0% / 32%)),
0 2px 4px light-dark(hsl(0deg 0% 0% / 10%), hsl(0deg 0% 0% / 20%));
/* Tippy dropdown widgets scale with the base font-size. */
font-size: var(--base-font-size-px);

10
web/styles/tooltips.css
View File

@@ -10,7 +10,7 @@
/* Affects all tippy tooltips not using any theme. */
.tippy-box:not([data-theme]) {
background: hsl(0deg 0% 20%);
background: var(--color-background-tippy-box);
border-radius: 5px;
/* 14px at 14px/1em */
font-size: var(--base-font-size-px);
@@ -47,19 +47,19 @@
}
&[data-placement^="top"] > .tippy-arrow::before {
border-top-color: hsl(0deg 0% 20%);
border-top-color: var(--color-background-tippy-box);
}
&[data-placement^="bottom"] > .tippy-arrow::before {
border-bottom-color: hsl(0deg 0% 20%);
border-bottom-color: var(--color-background-tippy-box);
}
&[data-placement^="left"] > .tippy-arrow::before {
border-left-color: hsl(0deg 0% 20%);
border-left-color: var(--color-background-tippy-box);
}
&[data-placement^="right"] > .tippy-arrow::before {
border-right-color: hsl(0deg 0% 20%);
border-right-color: var(--color-background-tippy-box);
}
}