selfhosted
/
zer0bin
mirror of https://github.com/zer0bin-dev/zer0bin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 💄 Dynamic tooltip positions

This commit is contained in:
ThatOneCalculator 2022-03-22 12:12:27 -07:00
parent 7f33ae0327
commit 2a8a4c3ac5
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/icons.ts
View File

@ -36,11 +36,17 @@ githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
extraSVGAttrs: extraSVGAttrs,
})
let theme = "rosepine-extended"
if (window.location.pathname == "/") {
theme = "rosepine"
}
tippy("#save-button", {
content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
placement: "bottom",
animation: "scale",
theme: "rosepine",
theme: theme,
allowHTML: true,
})
@ -48,7 +54,7 @@ tippy("#new-button", {
content: "New paste<br><span class='keybind'>Ctrl + N</span>",
placement: "bottom",
animation: "scale",
theme: "rosepine",
theme: theme,
allowHTML: true,
})
@ -56,7 +62,7 @@ tippy("#copy-button", {
content: "Duplicate paste<br><span class='keybind'>Ctrl + D</span>",
placement: "bottom",
animation: "scale",
theme: "rosepine",
theme: theme,
allowHTML: true,
})
@ -71,6 +77,6 @@ tippy("#github-button", {
})}</span>`,
placement: "bottom",
animation: "scale",
theme: "rosepine",
theme: theme,
allowHTML: true,
})

12
frontend/style/tooltip.scss
View File

@ -4,11 +4,11 @@ $font-mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono", "Courier New", monospace;
@import "./font.scss";
.tippy-box[data-theme~="rosepine"] {
.rosepine-parent {
color: $text;
background-color: $bg;
opacity: 0.8;
margin-top: 0.3rem;
padding: 10px;
font-family: $font-mono;
> .tippy-backdrop {
@ -18,3 +18,11 @@ $font-mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
fill: $bg;
}
}
.tippy-box[data-theme~="rosepine"] {
@extend .rosepine-parent;
margin-top: 0.3rem;
}
.tippy-box[data-theme~="rosepine-extended"] {
@extend .rosepine-parent;
margin-top: 0.6rem;
}