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

css: refactor notice box css.

Browse Source 
* Remove .ui-corner-all, .ui-state-highlight, .ui-state-error classes
  from notice boxes.
* Use .notice, .notice-info, .notice-error classes instead.
* Replace <p> elements in notices with <div>'s so that we don't have to
  work around the `margin-bottom: 1em` from <p> elements.
* Replace <h1> elements in notices with <h2>.
* Standardize info notices to use the same shade of light yellow in the
  light theme.
This commit is contained in:
evazion
2019-09-22 14:10:18 -05:00
parent 6b2e6fa3f4
commit e98db8a5b8
14 changed files with 67 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/src/javascripts/utility.js
View File

@@ -19,7 +19,7 @@ Utility.test_max_width = function(width) {
Utility.notice_timeout_id = undefined;
Utility.notice = function(msg, permanent) {
$('#notice').addClass("ui-state-highlight").removeClass("ui-state-error").fadeIn("fast").children("span").html(msg);
$('#notice').addClass("notice-info").removeClass("notice-error").fadeIn("fast").children("span").html(msg);
if (Utility.notice_timeout_id !== undefined) {
clearTimeout(Utility.notice_timeout_id)
@@ -33,7 +33,7 @@ Utility.notice = function(msg, permanent) {
}
Utility.error = function(msg) {
$('#notice').removeClass("ui-state-highlight").addClass("ui-state-error").fadeIn("fast").children("span").html(msg);
$('#notice').removeClass("notice-info").addClass("notice-error").fadeIn("fast").children("span").html(msg);
if (Utility.notice_timeout_id !== undefined) {
clearTimeout(Utility.notice_timeout_id)

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

@@ -9,7 +9,7 @@
--error-background-color: hsl(0, 100%, 95%); /* light red */
--success-background-color: hsl(120, 100%, 95%); /* light green */
--warning-background-color: hsl(50, 100%, 95%); /* light yellow */
--warning-background-color: hsl(50, 100%, 93%); /* light yellow */
--subnav-menu-background-color: #F5F5FF;
@@ -165,23 +165,18 @@
--bulk-update-request-approved-color: green;
--bulk-update-request-failed-color: red;
--notice-text-color: var(--text-color);
--notice-background: #FFFBBF;
--notice-border: 1px solid #CCC999;
--sign-in-link-color: #E00;
--footer-border: 1px solid #EEE;
--jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-state-error-background: #FDDFDE;
--jquery-ui-state-error-border: 1px solid #FBC7C6;
--jquery-ui-state-error-text-color: var(--text-color);
--jquery-ui-state-highlight-background: #FDF5D9;
--jquery-ui-state-highlight-border: 1px solid #FCEEC1;
--jquery-ui-state-highlight-text-color: var(--text-color);
--jquery-ui-dialog-box-shadow: 2px 2px 1px grey;
--notice-error-background: var(--error-background-color);
--notice-error-border: 1px solid #FBC7C6;
--notice-info-background: var(--warning-background-color);
--notice-info-border: 1px solid #CCC999;
--dtext-blockquote-border: 1px solid #666;
--dtext-blockquote-background: #EEE;
--dtext-code-background: #EEE;
@@ -351,12 +346,6 @@ body[data-user-theme="dark"] {
--jquery-ui-widget-content-text-color: var(--text-color);
--jquery-ui-widget-content-background: var(--grey-2);
--jquery-ui-dialog-box-shadow: 0px 0px 8px var(--grey-1);
--jquery-ui-state-error-background: var(--red-0);
--jquery-ui-state-error-border: 1px solid var(--grey-4);
--jquery-ui-state-error-text-color: var(--text-color);
--jquery-ui-state-highlight-background: var(--blue-0);
--jquery-ui-state-highlight-border: 1px solid var(--blue-1);
--jquery-ui-state-highlight-text-color: var(--text-color);
--keyboard-shortcut-color: var(--text-color);
--keyboard-shortcut-background-color: var(--grey-2);
@@ -381,9 +370,10 @@ body[data-user-theme="dark"] {
--note-highlight-color: var(--blue-1);
--note-tn-color: var(--muted-text-color);
--notice-text-color: var(--grey-5);
--notice-background: var(--blue-0);
--notice-border: 1px solid var(--blue-1);
--notice-error-background: var(--red-0);
--notice-error-border: 1px solid var(--grey-4);
--notice-info-background: var(--blue-0);
--notice-info-border: 1px solid var(--blue-1);
--paginator-arrow-background-color: white;
--paginator-arrow-color: var(--link-color);

15
app/javascript/src/styles/common/main_layout.scss
View File

@@ -5,21 +5,6 @@ div#page {
margin: 0 20px;
padding: 0 10px;
div#upgrade-account-notice, div#ban-notice, div#dmail-notice, div#mod-notice {
margin: 1em 0;
padding: 1em;
text-align: center;
position: relative;
h1 {
font-size: $h2_size;
}
p {
margin: 0;
}
}
aside#sidebar {
width: 15em;
float: left;

39
app/javascript/src/styles/common/notices.scss
View File

@@ -9,21 +9,42 @@ div.error-messages {
}
div#notice {
padding: 0.25em;
padding: 0.5em;
position: fixed;
top: 0.5em;
top: 1em;
left: 25%;
width: 50%;
z-index: 100;
&:not(.ui-state-error) {
background: var(--notice-background);
border: var(--notice-border);
color: var(--notice-text-color);
a#close-notice-link {
position: absolute;
right: 1em;
}
}
a#close-notice-link {
position: absolute;
right: 1em;
.notice {
border-radius: 3px;
}
.notice-small {
font-size: 0.8em;
margin: 0.5em 0;
padding: 0.5em 1em;
}
.notice-large {
margin: 1em 0;
padding: 1em;
text-align: center;
position: relative;
}
.notice-info {
background: var(--notice-info-background);
border: var(--notice-info-border);
}
.notice-error {
background: var(--notice-error-background);
border: var(--notice-error-border);
}

6
app/javascript/src/styles/specific/posts.scss
View File

@@ -232,12 +232,10 @@ div#c-posts {
}
.post-notice {
font-size: 0.8em;
margin: 0.5em 0;
padding: 0.5em;
margin-bottom: 0.5em;
overflow: hidden;
border: var(--post-notice-border);
border-radius: 3px;
ul.post-flag-reasons, ul.post-appeal-reasons {
list-style: inside;
@@ -260,7 +258,7 @@ div#c-posts {
&.post-notice-deleted { background: var(--post-deleted-notice-background); }
&.post-notice-appealed { background: var(--post-appealed-notice-background); }
&.post-notice-resized { background: var(--post-resized-notice-background); }
&.post-notice-search { background: var(--post-search-notice-background); font-size: 1em; }
&.post-notice-search { background: var(--post-search-notice-background); }
}
aside#sidebar #tag-list h2 {

10
app/javascript/src/styles/specific/wiki_pages.scss
View File

@@ -1,13 +1,3 @@
div#c-wiki-pages {
#a-new {
div.notice {
font-size: 0.8em;
padding: 1em;
margin: 1em 0;
}
}
}
.wiki-other-name {
background-color: var(--wiki-page-other-name-background-color);
padding: 3px;