Franknoirot/help menu (#2173)
* Add exclamationMark icon * Add basic LowerRightControls component * Create a help menu * Remove NetworkHealthIndicator from AppHeader * Refactor Tooltip to be able to be corner-anchored * Add a better flag back to the Tooltip * Give tooltip a faint theme outline on light mode too * Fix broken reset onboarding behavior on home page * Fix bug with isInProject * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
GitHub
@ -1,47 +1,40 @@
|
||||
/* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */
|
||||
|
||||
.tooltip {
|
||||
/* internal CSS vars */
|
||||
--_delay: 200ms;
|
||||
--_p-inline: 1ch;
|
||||
--_p-block: 4px;
|
||||
--_triangle-size: 7px;
|
||||
/* --_bg: hsl(0 0% 20%); */
|
||||
--_bg: var(--chalkboard-10);
|
||||
--_shadow-alpha: 20%;
|
||||
|
||||
/* Used to power spacing and layout for RTL languages */
|
||||
--isRTL: -1;
|
||||
|
||||
/* Using conic gradients to get a clear tip triangle */
|
||||
--_bottom-tip: conic-gradient(
|
||||
from -30deg at bottom,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
/* internal CSS vars */
|
||||
--_delay: 200ms;
|
||||
--_triangle-width: 8px;
|
||||
--_triangle-height: 12px;
|
||||
--_p-inline: calc(50% + calc(var(--isRTL) * var(--_triangle-width) / 2));
|
||||
--_p-block: 4px;
|
||||
--_bg: var(--chalkboard-10);
|
||||
--_shadow-alpha: 5%;
|
||||
--_theme-alpha: 0.15;
|
||||
--_theme-outline: drop-shadow(
|
||||
0 1px 0
|
||||
oklch(
|
||||
var(--primary-lightness) var(--primary-chroma) var(--primary-hue) /
|
||||
var(--_theme-alpha)
|
||||
)
|
||||
)
|
||||
bottom / 100% 50% no-repeat;
|
||||
--_top-tip: conic-gradient(
|
||||
from 150deg at top,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
drop-shadow(
|
||||
0 -1px 0 oklch(var(--primary-lightness) var(--primary-chroma)
|
||||
var(--primary-hue) / var(--_theme-alpha))
|
||||
)
|
||||
top / 100% 50% no-repeat;
|
||||
--_right-tip: conic-gradient(
|
||||
from -120deg at right,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
drop-shadow(
|
||||
1px 0 0
|
||||
oklch(
|
||||
var(--primary-lightness) var(--primary-chroma) var(--primary-hue) /
|
||||
var(--_theme-alpha)
|
||||
)
|
||||
)
|
||||
right / 50% 100% no-repeat;
|
||||
--_left-tip: conic-gradient(
|
||||
from 60deg at left,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
)
|
||||
left / 50% 100% no-repeat;
|
||||
drop-shadow(
|
||||
-1px 0 0 oklch(var(--primary-lightness) var(--primary-chroma)
|
||||
var(--primary-hue) / var(--_theme-alpha))
|
||||
);
|
||||
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
@ -69,22 +62,17 @@
|
||||
@apply text-chalkboard-110;
|
||||
will-change: filter;
|
||||
filter: drop-shadow(0 1px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
|
||||
drop-shadow(0 6px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
|
||||
drop-shadow(0 4px 8px hsl(0 0% 0% / var(--_shadow-alpha)))
|
||||
var(--_theme-outline);
|
||||
}
|
||||
|
||||
:global(.dark) .tooltip {
|
||||
--_bg: var(--chalkboard-110);
|
||||
--_theme-alpha: 40%;
|
||||
@apply text-chalkboard-10;
|
||||
filter: var(--_theme-outline);
|
||||
}
|
||||
|
||||
/* TODO we don't support a light theme yet */
|
||||
/* @media (prefers-color-scheme: light) {
|
||||
.tooltip {
|
||||
--_bg: white;
|
||||
--_shadow-alpha: 15%;
|
||||
}
|
||||
} */
|
||||
|
||||
.tooltip:dir(rtl) {
|
||||
--isRTL: 1;
|
||||
}
|
||||
@ -103,7 +91,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:is(:focus, :focus-visible, :focus-within) > .tooltip {
|
||||
.tooltip:focus-visible {
|
||||
--_delay: 0 !important;
|
||||
}
|
||||
|
||||
@ -120,114 +108,148 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* tooltip shape is a pseudo element so we can cast a shadow */
|
||||
.tooltip::after {
|
||||
content: '';
|
||||
background: var(--_bg);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
mask: var(--_tip);
|
||||
/* Sometimes there's no visible label,
|
||||
* so we'll use the tooltip as the label
|
||||
*/
|
||||
.tooltip:only-child::before {
|
||||
content: 'Tooltip:';
|
||||
}
|
||||
|
||||
.tooltip.top,
|
||||
.tooltip.blockStart,
|
||||
.tooltip.bottom,
|
||||
.tooltip.blockEnd {
|
||||
.caret {
|
||||
width: 8px;
|
||||
height: var(--_triangle-height);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transform-origin: center center;
|
||||
color: var(--_bg);
|
||||
}
|
||||
|
||||
.top,
|
||||
.bottom {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* TOP || BLOCK-START */
|
||||
.tooltip.top,
|
||||
.tooltip.blockStart {
|
||||
.tooltip.top {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
--_x: calc(50% * var(--isRTL));
|
||||
}
|
||||
|
||||
.tooltip.top::after,
|
||||
.tooltip.tooltip.blockStart::after {
|
||||
--_tip: var(--_bottom-tip);
|
||||
inset-block-end: calc(var(--_triangle-size) * -1);
|
||||
border-block-end: var(--_triangle-size) solid transparent;
|
||||
.top .caret {
|
||||
inset-block-start: calc(100% - 1px);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* RIGHT || INLINE-END */
|
||||
.tooltip.right,
|
||||
.tooltip.inlineEnd {
|
||||
inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
|
||||
.tooltip.top-right {
|
||||
inset-inline-end: var(--_p-inline);
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
/* The corner caret SVG is bottom-right oriented by default */
|
||||
.top-right .caret {
|
||||
inset-block-start: calc(100% - 1px);
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.tooltip.right {
|
||||
inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-height));
|
||||
inset-block-end: 50%;
|
||||
--_y: 50%;
|
||||
}
|
||||
|
||||
.tooltip.right::after,
|
||||
.tooltip.tooltip.inlineEnd::after {
|
||||
--_tip: var(--_left-tip);
|
||||
inset-inline-start: calc(var(--_triangle-size) * -1);
|
||||
border-inline-start: var(--_triangle-size) solid transparent;
|
||||
.right .caret {
|
||||
inset-inline-end: calc(100% - 1px);
|
||||
inset-block-start: 50%;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.tooltip.right:dir(rtl)::after,
|
||||
.tooltip.inlineEnd:dir(rtl)::after {
|
||||
--_tip: var(--_right-tip);
|
||||
.tooltip.bottom-right {
|
||||
inset-inline-end: var(--_p-inline);
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
.tooltip.bottom,
|
||||
.tooltip.blockEnd {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
|
||||
.bottom-right .caret {
|
||||
inset-block-end: calc(100% - 1px);
|
||||
inset-inline-end: 0;
|
||||
transform: rotate(180deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.tooltip.bottom {
|
||||
--_x: calc(50% * var(--isRTL));
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
.tooltip.bottom::after,
|
||||
.tooltip.tooltip.blockEnd::after {
|
||||
--_tip: var(--_top-tip);
|
||||
inset-block-start: calc(var(--_triangle-size) * -1);
|
||||
border-block-start: var(--_triangle-size) solid transparent;
|
||||
.bottom .caret {
|
||||
inset-block-end: calc(100% - 1px);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%) scaleY(-1);
|
||||
}
|
||||
|
||||
/* LEFT || INLINE-START */
|
||||
.tooltip.left,
|
||||
.tooltip.inlineStart {
|
||||
inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
|
||||
.tooltip.bottom-left {
|
||||
inset-inline-start: var(--_p-inline);
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
.bottom-left .caret {
|
||||
inset-block-end: calc(100% - 1px);
|
||||
inset-inline-start: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tooltip.left {
|
||||
inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-height));
|
||||
inset-block-end: 50%;
|
||||
--_y: 50%;
|
||||
}
|
||||
|
||||
.tooltip.left::after,
|
||||
.tooltip.tooltip.inlineStart::after {
|
||||
--_tip: var(--_right-tip);
|
||||
inset-inline-end: calc(var(--_triangle-size) * -1);
|
||||
border-inline-end: var(--_triangle-size) solid transparent;
|
||||
.left .caret {
|
||||
inset-inline-start: calc(100% - 1px);
|
||||
inset-block-start: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.tooltip.left:dir(rtl)::after,
|
||||
.tooltip.inlineStart:dir(rtl)::after {
|
||||
--_tip: var(--_left-tip);
|
||||
.tooltip.top-left {
|
||||
inset-inline-start: var(--_p-inline);
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
.top-left .caret {
|
||||
inset-block-start: calc(100% - 1px);
|
||||
inset-inline-start: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* TOP || BLOCK-START */
|
||||
:has(> :is(.tooltip.top, .tooltip.blockStart)):not(:hover, :active) .tooltip {
|
||||
:has(> :is(.tooltip.top, .tooltip.top-left, .tooltip.top-right)):not(
|
||||
:hover,
|
||||
:active
|
||||
)
|
||||
.tooltip {
|
||||
--_y: 3px;
|
||||
}
|
||||
|
||||
/* RIGHT || INLINE-END */
|
||||
:has(> :is(.tooltip.right, .tooltip.inlineEnd)):not(:hover, :active)
|
||||
.tooltip {
|
||||
:has(> :is(.tooltip.right)):not(:hover, :active) .tooltip {
|
||||
--_x: calc(var(--isRTL) * -3px * -1);
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
:has(> :is(.tooltip.bottom, .tooltip.blockEnd)):not(:hover, :active)
|
||||
:has(
|
||||
> :is(
|
||||
.tooltip.bottom,
|
||||
.tooltip.tooltip.bottom-left,
|
||||
.tooltip.bottom-right
|
||||
)
|
||||
):not(:hover, :active)
|
||||
.tooltip {
|
||||
--_y: -3px;
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
:has(> :is(.tooltip.left, .tooltip.inlineStart)):not(:hover, :active)
|
||||
.tooltip {
|
||||
:has(> :is(.tooltip.left)):not(:hover, :active) .tooltip {
|
||||
--_x: calc(var(--isRTL) * 3px * -1);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user