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

users: add username tooltips.

Browse Source
This commit is contained in:
evazion
2020-07-13 11:28:58 -05:00
parent d7f489b68e
commit 88bbd1e3f0
12 changed files with 354 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/src/styles/base/020_base.scss
View File

@@ -129,6 +129,14 @@ table tfoot {
font-size: 0.9em;
}
a.link-plain {
color: unset;
&:hover {
text-decoration: underline;
}
}
.fixed-width-container {
max-width: 70em;
}

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

@@ -2,6 +2,7 @@
--body-background-color: white;
--text-color: hsl(0, 0%, 15%);
--inverse-text-color: white;
--muted-text-color: hsl(0, 0%, 55%);
--header-color: hsl(0, 0%, 15%);
@@ -82,6 +83,9 @@
--post-tooltip-scrollbar-track-background: #EEEEEE;
--post-tooltip-scrollbar-track-border: 0 none white;
--user-tooltip-positive-feedback-color: orange;
--user-tooltip-negative-feedback-color: red;
--preview-current-post-background: rgba(0, 0, 0, 0.1);
--autocomplete-selected-background-color: var(--subnav-menu-background-color);
@@ -201,6 +205,7 @@
--user-platinum-color: gray;
--user-gold-color: #00F;
--user-member-color: var(--link-color);
--user-banned-color: black;
--news-updates-background: #EEE;
--news-updates-border: 2px solid #666;
@@ -261,6 +266,7 @@ body[data-current-user-theme="dark"] {
/* main text colors */
--text-color: var(--grey-5);
--inverse-text-color: white;
--muted-text-color: var(--grey-4);
--header-color: var(--grey-6);
@@ -283,6 +289,7 @@ body[data-current-user-theme="dark"] {
--collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-color);
--user-banned-color: var(--grey-1);
--user-member-color: var(--blue-1);
--user-gold-color: var(--yellow-1);
--user-platinum-color: var(--grey-4);
@@ -395,6 +402,9 @@ body[data-current-user-theme="dark"] {
--post-tooltip-scrollbar-track-background: var(--grey-1);
--post-tooltip-scrollbar-track-border: none;
--user-tooltip-positive-feedback-color: var(--yellow-1);
--user-tooltip-negative-feedback-color: var(--red-1);
--preview-pending-color: var(--blue-1);
--preview-flagged-color: var(--red-1);
--preview-deleted-color: var(--grey-5);

3
app/javascript/src/styles/common/messages.scss
View File

@@ -17,7 +17,8 @@ div.list-of-messages {
a.message-timestamp {
font-style: italic;
color: var(--text-color);
font-size: 0.90em;
color: var(--muted-text-color);
&:hover { text-decoration: underline; }
}
}

51
app/javascript/src/styles/specific/common_tooltips.scss Normal file
View File

@@ -0,0 +1,51 @@
div[data-tippy-root].tooltip-loading {
visibility: hidden !important;
}
.tippy-box[data-theme~="common-tooltip"] {
box-sizing: border-box;
border: 1px solid var(--post-tooltip-border-color);
border-radius: 4px;
color: var(--text-color);
background-color: var(--post-tooltip-background-color);
background-clip: padding-box;
box-shadow: var(--post-tooltip-box-shadow);
/* 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;
}
}

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

@@ -47,17 +47,9 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
.tippy-box[data-theme~="post-tooltip"] {
min-width: 200px;
box-sizing: border-box;
font-size: 11px;
line-height: $tooltip-line-height;
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;
@@ -118,44 +110,4 @@ $tooltip-body-height: $tooltip-line-height * 4; // 4 lines high.
font-size: 10px;
}
}
/* 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;
}

78
app/javascript/src/styles/specific/user_tooltips.scss Normal file
View File

@@ -0,0 +1,78 @@
.tippy-box[data-theme~="user-tooltip"] {
line-height: 1.25em;
min-width: 350px;
.user-tooltip-header {
margin-bottom: 1em;
display: grid;
grid:
"avatar header-top"
"avatar header-bottom" /
32px 1fr;
column-gap: 0.25em;
.user-tooltip-avatar {
font-size: 32px;
grid-area: avatar;
align-self: center;
}
.user-tooltip-header-top {
grid-area: header-top;
.user-tooltip-badge {
color: var(--inverse-text-color);
font-size: 0.70em;
padding: 2px 4px;
margin-right: 0.25em;
border-radius: 3px;
&.user-tooltip-badge-admin { background-color: var(--user-admin-color); }
&.user-tooltip-badge-moderator { background-color: var(--user-moderator-color); }
&.user-tooltip-badge-approver { background-color: var(--user-builder-color); }
&.user-tooltip-badge-contributor { background-color: var(--user-builder-color); }
&.user-tooltip-badge-builder { background-color: var(--user-builder-color); }
&.user-tooltip-badge-platinum { background-color: var(--user-platinum-color); }
&.user-tooltip-badge-gold { background-color: var(--user-gold-color); }
&.user-tooltip-badge-member { background-color: var(--user-member-color); }
&.user-tooltip-badge-banned { background-color: var(--user-banned-color); }
&.user-tooltip-badge-positive-feedback {
color: var(--user-tooltip-positive-feedback-color);
border: 1px solid;
}
&.user-tooltip-badge-negative-feedback {
color: var(--user-tooltip-negative-feedback-color);
border: 1px solid;
}
}
}
.user-tooltip-header-bottom {
grid-area: header-bottom;
color: var(--muted-text-color);
font-size: 0.75em;
}
}
.user-tooltip-stats {
display: grid;
grid: auto / repeat(3, 1fr);
column-gap: 1em;
row-gap: 0.5em;
.user-tooltip-stat-item {
text-align: center;
.user-tooltip-stat-value {
font-weight: bold;
}
.user-tooltip-stat-name {
font-size: 0.90em;
color: var(--muted-text-color);
}
}
}
}