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

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

@@ -90,6 +90,8 @@ html {
--white: #FFFFFF; --white: #FFFFFF;
--black: #000000; --black: #000000;
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} }
html { html {
@@ -172,7 +174,6 @@ html {
--post-tooltip-background-color: var(--body-background-color); --post-tooltip-background-color: var(--body-background-color);
--post-tooltip-border-color: var(--grey-2); --post-tooltip-border-color: var(--grey-2);
--post-tooltip-box-shadow-color: rgba(0, 0, 0, 0.15);
--post-tooltip-header-background-color: var(--blue-0); --post-tooltip-header-background-color: var(--blue-0);
--post-tooltip-info-color: var(--muted-text-color); --post-tooltip-info-color: var(--muted-text-color);
@@ -253,7 +254,6 @@ html {
--jquery-ui-widget-content-background: var(--body-background-color); --jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-color); --jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-dialog-box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color);
--notice-error-background: var(--red-1); --notice-error-background: var(--red-1);
--notice-error-border-color: var(--red-2); --notice-error-border-color: var(--red-2);
@@ -450,7 +450,6 @@ body[data-current-user-theme="dark"] {
--jquery-ui-widget-content-text-color: var(--text-color); --jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-widget-content-background: var(--grey-8); --jquery-ui-widget-content-background: var(--grey-8);
--jquery-ui-dialog-box-shadow: 0 4 14px -2px var(--grey-1);
--notice-error-background: var(--red-8); --notice-error-background: var(--red-8);
--notice-error-border-color: var(--red-7); --notice-error-border-color: var(--red-7);

1
app/javascript/src/styles/common/autocomplete.scss
View File

@@ -1,6 +1,7 @@
.ui-autocomplete.ui-widget { .ui-autocomplete.ui-widget {
font-size: var(--text-sm); font-size: var(--text-sm);
border: 1px solid var(--autocomplete-border-color); border: 1px solid var(--autocomplete-border-color);
box-shadow: var(--shadow-lg);
div.ui-menu-item-wrapper { div.ui-menu-item-wrapper {
padding: 0.25em 0.4em; padding: 0.25em 0.4em;

2
app/javascript/src/styles/common/jquery_ui_custom.scss
View File

@@ -24,7 +24,7 @@ div.ui-dialog {
overflow: visible; overflow: visible;
font-size: 1em; font-size: 1em;
z-index: 999 !important; z-index: 999 !important;
box-shadow: var(--jquery-ui-dialog-box-shadow); box-shadow: var(--shadow-lg);
padding: 0; padding: 0;
.ui-dialog-titlebar { .ui-dialog-titlebar {

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); color: var(--text-color);
background-color: var(--post-tooltip-background-color); background-color: var(--post-tooltip-background-color);
background-clip: padding-box; 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 */ /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */
&[data-placement^=bottom] { &[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); border: 1px solid var(--note-body-border-color);
background: var(--note-body-background); background: var(--note-body-background);
color: var(--note-body-text-color); color: var(--note-body-text-color);
box-shadow: var(--shadow-lg);
min-width: 140px; min-width: 140px;
width: min-content; width: min-content;
min-height: 1em; min-height: 1em;
@@ -95,6 +96,7 @@
height: 100px; height: 100px;
cursor: move; cursor: move;
background: var(--note-body-background); background: var(--note-body-background);
box-shadow: var(--shadow-lg);
line-height: 1.25; line-height: 1.25;
opacity: 0.5; opacity: 0.5;
z-index: 100; z-index: 100;
@@ -116,6 +118,7 @@
color: var(--note-body-text-color); color: var(--note-body-text-color);
border: 1px solid transparent; border: 1px solid transparent;
opacity: 1; opacity: 1;
box-shadow: none;
&:hover { &:hover {
border: 1px solid var(--note-box-border-color); border: 1px solid var(--note-box-border-color);
@@ -164,6 +167,7 @@ div#note-preview {
opacity: 0.6; opacity: 0.6;
display: none; display: none;
background: var(--note-preview-background); background: var(--note-preview-background);
box-shadow: var(--shadow-lg);
z-index: 250; z-index: 250;
} }