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

css: standardize box shadows.

Browse Source 
* Standardize dialog box and tooltip box shadows.

* Add shadows behind all other floating elements, namely the
  autocomplete menu and translation notes (except for embedded notes,
  which are usually meant to be seamless).
This commit is contained in:
evazion
2021-02-23 04:11:50 -06:00
parent 8894a31d74
commit 7966dcb3c9
5 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/src/styles/specific/common_tooltips.scss
View File

@@ -9,7 +9,7 @@ div[data-tippy-root].tooltip-loading {
color: var(--text-color);
background-color: var(--post-tooltip-background-color);
background-clip: padding-box;
box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color);
box-shadow: var(--shadow-lg);
/* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
&[data-placement^=bottom] {

4
app/javascript/src/styles/specific/notes.scss
View File

@@ -13,6 +13,7 @@
border: 1px solid var(--note-body-border-color);
background: var(--note-body-background);
color: var(--note-body-text-color);
box-shadow: var(--shadow-lg);
min-width: 140px;
width: min-content;
min-height: 1em;
@@ -95,6 +96,7 @@
height: 100px;
cursor: move;
background: var(--note-body-background);
box-shadow: var(--shadow-lg);
line-height: 1.25;
opacity: 0.5;
z-index: 100;
@@ -116,6 +118,7 @@
color: var(--note-body-text-color);
border: 1px solid transparent;
opacity: 1;
box-shadow: none;
&:hover {
border: 1px solid var(--note-box-border-color);
@@ -164,6 +167,7 @@ div#note-preview {
opacity: 0.6;
display: none;
background: var(--note-preview-background);
box-shadow: var(--shadow-lg);
z-index: 250;
}