Files
danbooru/app/assets/stylesheets/specific/post_tooltips.scss
evazion a22bf20230 post tooltips: add header bar with more post info.
Add a header bar containing the following information:

* Uploader + top tagger + upload date
* Score, favorite count, comment count
* Rating
* Source (Pixiv, Twitter, etc)
* Image dimensions

Also list series pools with tags.
2018-05-07 13:18:22 -05:00

116 lines
1.9 KiB
SCSS

$tooltip-line-height: 16px;
$tooltip-body-height: $tooltip-line-height * 6; // 6 lines high.
$tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
@mixin thin-scrollbar {
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
&::-webkit-scrollbar-thumb {
background: #999999;
border: 0px none #FFFFFF;
border-radius: 0px;
}
&::-webkit-scrollbar-thumb:hover {
background: #AAAAAA;
}
&::-webkit-scrollbar-thumb:active {
background: #AAAAAA;
}
&::-webkit-scrollbar-track {
background: #EEEEEE;
border: 0px none #ffffff;
border-radius: 0px;
}
&::-webkit-scrollbar-track:hover {
background: #EEEEEE;
}
&::-webkit-scrollbar-track:active {
background: #EEEEEE;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
}
.post-tooltip {
max-width: $tooltip-width;
min-width: $tooltip-width;
box-sizing: border-box;
font-size: 11px;
line-height: $tooltip-line-height;
border-color: #767676;
.qtip-content {
padding: 0;
> * {
padding: 2px 6px;
}
.post-tooltip-body {
@include thin-scrollbar;
max-height: $tooltip-body-height;
overflow-y: auto;
li {
margin-right: 0;
}
}
.post-tooltip-header {
background-color: $menu_color;
display: flex;
white-space: nowrap;
overflow: hidden;
.post-tooltip-header-left {
flex: 1;
}
.post-tooltip-header-right {
flex: 1;
text-align: right;
}
.fa-xs {
vertical-align: baseline;
}
.post-tooltip-disable {
margin-left: 0.5em;
}
}
.post-tooltip-info {
margin-left: 0.5em;
color: #555;
font-size: 10px;
}
}
&:not(:hover) {
a, span {
color: #777 !important;
}
}
&.post-tooltip-loading {
visibility: hidden;
}
}