jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix #4492: Switch from qtip2 to tippy.js.

Browse Source
This commit is contained in:
evazion
2020-06-30 22:40:40 -05:00
parent 5f05a41fbc
commit 94490eb57f
6 changed files with 130 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/src/styles/base/040_colors.css
View File

@@ -72,7 +72,8 @@
--comment-sticky-background-color: var(--subnav-menu-background-color);
--post-tooltip-background-color: var(--body-background-color);
--post-tooltip-border-color: #767676;
--post-tooltip-border-color: hsla(210, 100%, 3%, 0.15);
--post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10);
--post-tooltip-header-background-color: var(--subnav-menu-background-color);
--post-tooltip-info-color: #555;
--post-tooltip-scrollbar-background: #999999;

59
app/javascript/src/styles/specific/post_tooltips.scss
View File

@@ -1,6 +1,5 @@
$tooltip-line-height: 16px;
$tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.
$tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
$tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
@mixin thin-scrollbar {
&::-webkit-scrollbar {
@@ -46,16 +45,20 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
}
}
.post-tooltip {
max-width: $tooltip-width;
min-width: $tooltip-width;
.tippy-box[data-theme~="post-tooltip"] {
min-width: 200px;
box-sizing: border-box;
font-size: 11px;
line-height: $tooltip-line-height;
border-color: var(--post-tooltip-border-color);
background-color: var(--post-tooltip-background-color);
.qtip-content {
border: 1px solid var(--post-tooltip-border-color);
border-radius: 4px;
background-color: var(--post-tooltip-background-color);
background-clip: padding-box;
box-shadow: var(--post-tooltip-box-shadow);
.tippy-content {
padding: 0;
> * {
@@ -116,7 +119,43 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
}
}
&.post-tooltip-loading {
visibility: hidden;
/* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
&[data-placement^=bottom] {
> .tippy-arrow:before {
border-bottom-color: var(--post-tooltip-background-color);
bottom: 16px;
}
> .tippy-arrow:after {
border-bottom-color: var(--post-tooltip-border-color);
border-width: 0 7px 7px;
top: -8px;
left: 1px;
}
}
&[data-placement^=top] {
> .tippy-arrow:before {
border-top-color: var(--post-tooltip-background-color);
}
> .tippy-arrow:after {
border-top-color: var(--post-tooltip-border-color);
border-width: 7px 7px 0;
top: 17px;
left: 1px;
}
}
> .tippy-arrow:after {
border-color: transparent;
border-style: solid;
content: "";
position: absolute;
z-index: -1;
}
}
div[data-tippy-root].post-tooltip-loading {
visibility: hidden !important;
}