From 481f1d853e30c7832e562073c428ae6e99a20f4b Mon Sep 17 00:00:00 2001 From: acer Date: Wed, 14 Oct 2020 00:48:42 -0400 Subject: [PATCH] Make dark theme higher contrast --- images/sprites-light.png | Bin 0 -> 14615 bytes src/css/layout.css | 66 +++++++++++--------- src/css/menu.css | 14 ++--- src/css/popup.css | 14 ++--- src/css/reset.css | 112 +++++++++++++++++++++++----------- src/js/libs/popup.js | 2 +- src/js/modules/file/search.js | 2 +- 7 files changed, 128 insertions(+), 82 deletions(-) create mode 100644 images/sprites-light.png diff --git a/images/sprites-light.png b/images/sprites-light.png new file mode 100644 index 0000000000000000000000000000000000000000..8154b68a34e8262078efa33190bb7ec24e3fb5f1 GIT binary patch literal 14615 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 lQXs;&{`>fEU;xyDf{{TapIJf`+ literal 0 HcmV?d00001 diff --git a/src/css/layout.css b/src/css/layout.css index 8c8ef2d..e98e43f 100644 --- a/src/css/layout.css +++ b/src/css/layout.css @@ -43,6 +43,9 @@ .grey{ color:grey; } +.text_muted{ + color: var(--text-color-muted); +} .external{ padding-right: 15px; } @@ -52,7 +55,7 @@ width:10px; height:10px; margin-left: 5px; - background: url(images/sprites.png) no-repeat -700px 0; + background: var(--sprites-url) no-repeat -700px 0; opacity: 0.3; } .noselect { @@ -66,7 +69,7 @@ .block{ position: relative; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-area); + background-color: var(--area-background-color); border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); margin-bottom: 10px; @@ -74,7 +77,7 @@ } .sidebar_right .block{ background-color: #68727b; - background-color: var(--background-color-section); + background-color: var(--area-background-color); } .block:last-child{ margin-bottom: 0; @@ -85,7 +88,7 @@ margin: 0; font-size: 110%; background-color: rgba(255, 255, 255, 0.3); - background-color: var(--background-color-header); + background-color: var(--header-background-color); border-bottom: #555; } .block.toggled h2, .block h2.toggled:after{ @@ -100,13 +103,13 @@ right: 10px; top: 10px; border-style: solid; - border-width: 0 5px 6px 5px; - border-color: transparent transparent #333333 transparent; + border-width: 0 4px 5px 4px; + border-color: transparent transparent var(--text-color-muted) transparent; } .block h2.toggled:before{ /* icon */ - border-width: 6px 5px 0 5px; - border-color: #333333 transparent transparent transparent; + border-width: 5px 4px 0 4px; + border-color: var(--text-color-muted) transparent transparent transparent; } .block .content{ padding:5px; @@ -152,7 +155,7 @@ body .sp-preview{ top: 0; width: 31px; height: 30px; - background: url(images/sprites.png) -50px -100px no-repeat; + background: var(--sprites-url) -50px -100px no-repeat; } .logo:hover:after{ animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97); @@ -191,7 +194,7 @@ body .sp-preview{ flex-direction: row; align-items: center; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-section); + background-color: var(--section-background-color); overflow: hidden; margin-bottom: 5px; } @@ -217,9 +220,8 @@ body .sp-preview{ .attributes button{ display: inline-block; padding: 3px 10px; - border: 1px solid #444; - border-color: var(--border-color); - background-color: var(--background-color-button); + border: 1px solid var(--border-color); + background-color: var(--button-background-color); margin-right: 5px; } .attributes button:hover{ @@ -229,6 +231,7 @@ body .sp-preview{ .attributes button.active{ background-color: #419147; background-color: var(--background-color-active); + color: var(--text-color-active); } /* ========== left sidebar ================================================== */ @@ -240,7 +243,7 @@ body .sp-preview{ display: flex; flex-direction: row; flex-wrap: wrap; - background-color: var(--background-color-section); + background-color: var(--section-background-color); padding: 0 5px 5px 0; margin-right: 5px; overflow: hidden; @@ -252,8 +255,8 @@ body .sp-preview{ .sidebar_left .item{ display:block; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-area); - background-image: url(images/sprites.png); + background-color: var(--area-background-color); + background-image: var(--sprites-url); background-repeat: no-repeat; height: 25px; width: 30px; @@ -266,8 +269,9 @@ body .sp-preview{ background-color: var(--background-color-hover); } .sidebar_left .item.active{ - background-color: #419147; background-color: var(--background-color-active); + background-image: var(--sprites-url-active); + color: var(--text-color-active); } .sidebar_left .select{ background-position: -342px 2px; } @@ -374,10 +378,10 @@ body .sp-preview{ .main_color_rgb input{ width: 70px; } -.main_color_rgb .red{ color:#aa0000; } -.main_color_rgb .green{ color:#00aa00; } -.main_color_rgb .blue{ color:#0000aa; } -.main_color_rgb .alpha{ color: #333333; } +.main_color_rgb .red{ color: var(--text-color-red); } +.main_color_rgb .green{ color: var(--text-color-green); } +.main_color_rgb .blue{ color: var(--text-color-blue); } +.main_color_rgb .alpha{ color: var(--text-color-muted); } .color_hex{ width: calc(100% - 60px); @@ -399,7 +403,7 @@ body .sp-preview{ border:1px solid #444; border-color: var(--border-color); text-decoration:none; - color:#000000; + color:var(--text-color); font-size:12px; } .layer_add{ @@ -409,6 +413,7 @@ body .sp-preview{ background-color: var(--background-color-active); border:1px solid #444; border-color: var(--border-color); + color: var(--text-color-active); cursor:pointer; text-decoration:none; } @@ -421,19 +426,19 @@ body .sp-preview{ height:19px; overflow:hidden; background-color:#989898; - background-color: var(--background-color-area); + background-color: var(--area-background-color); border:1px solid #393939; border-color: var(--border-color); border-radius:3px; cursor:pointer; overflow:hidden; font-size: 12px; - color:#333333; + color:var(--text-color); white-space: nowrap; } .layers_list .item.active .layer_name{ - background-color: #419147; background-color: var(--background-color-active); + color: var(--text-color-active); } .layers_list .visibility{ float:left; @@ -442,7 +447,7 @@ body .sp-preview{ margin-right: 5px; width:20px; height:19px; - background: url('images/sprites.png') no-repeat -148px -99px; + background: var(--sprites-url) no-repeat -148px -99px; opacity:0.1; filter: drop-shadow(0px 0px 2px white); } @@ -454,7 +459,7 @@ body .sp-preview{ width:12px; height:19px; margin-left: 5px; - background: url('images/sprites.png') no-repeat -100px -96px; + background: var(--sprites-url) no-repeat -100px -96px; } /* filters */ .layers_list .filters{ @@ -502,14 +507,15 @@ body .sp-preview{ .block.details button.reset{ width: 25px; overflow: hidden; - opacity: 0.3; - background-image: url(images/sprites.png); + opacity: 0.5; + background-image: var(--sprites-url); background-repeat: no-repeat; background-position: -747px 2px; color: transparent; } .block.details button.active{ - background-color: var(--background-color-active); + background-color: var(--background-color-active); + color: var(--text-color-active); } @media screen and (max-width:700px){ diff --git a/src/css/menu.css b/src/css/menu.css index f5836ec..50c42bc 100644 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -1,9 +1,9 @@ :root { --menu-dropdown-background-color: #ffffff; - --menu-dropdown-border-color: #5680C1; + --menu-dropdown-border-color: #49844d; --menu-dropdown-text-color: #2d2b2b; --menu-dropdown-text-muted-color: #aaaaaa; - --menu-dropdown-hover-background-color: #E4EBF8; + --menu-dropdown-hover-background-color: #d6f4d8; --menu-dropdown-hover-text-color: #2d2d2d; --menu-dropdown-divider-color: #e5e5e5; } @@ -34,7 +34,7 @@ margin: 0; height: 30px; padding-left: 10px; - background: var(--background-color-menu); + background: var(--menu-background-color); } .main_menu > ul.menu_bar > li { padding: 0; @@ -45,7 +45,7 @@ display: flex; align-items: center; font-size: 12px; - color: var(--text-color-menu); + color: var(--menu-text-color); text-decoration: none; padding: 0 10px; height: 100%; @@ -140,7 +140,7 @@ width: 10px; height: 10px; margin-left: 5px; - background: url(images/sprites.png) no-repeat -700px 0; + background: var(--sprites-url) no-repeat -700px 0; opacity: 0.3; } .main_menu > ul.menu_dropdown > li > a > * { @@ -167,14 +167,14 @@ position: absolute; width: 50px; height: 50px; - background: url("images/sprites.png") no-repeat 11px -86px; - filter: invert(1); + background: var(--sprites-url) no-repeat 11px -86px; display: block; top: 0; z-index: 200; border: 0; outline: 0; cursor: pointer; + filter: var(--mobile-menu-toggle-filter); } .left_mobile_menu { left:0; } .right_mobile_menu { right:0; } diff --git a/src/css/popup.css b/src/css/popup.css index 8c355a5..92abd9c 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -5,7 +5,7 @@ left: calc(100vw / 2); transform: translate(-50%, 0); background-color: #7A838B; - background-color: var(--background-color-section); + background-color: var(--area-background-color); border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); width: 90vw; @@ -13,7 +13,7 @@ max-height: calc(80vh); margin:0px auto 0px auto; padding:10px; - box-shadow: 0 0 20px rgba(0,0,0,0.5); + box-shadow: 0 0 0 4000px rgba(0,0,0,0.3), 0 0 20px rgba(0,0,0,0.5); z-index: 100; overflow-y: auto; font-size: 13px; @@ -23,14 +23,14 @@ max-width: 800px; } #popup a{ - color: #000080; + color: var(--link-color); } #popup h2{ margin: -10px -10px 5px -10px; padding: 6px 10px; font-size: 18px; background-color: rgba(255, 255, 255, 0.3); - background-color: var(--background-color-header); + background-color: var(--header-background-color); /*cursor:move;*/ } #popup .buttons{ @@ -68,7 +68,7 @@ #popup .button{ margin: 0 3px; background-color: rgba(255, 255, 255, 0.2); - background-color: var(--background-color-button); + background-color: var(--button-background-color); min-width:60px; border:1px solid rgba(0, 0, 0, 0.5); border:1px solid var(--border-color); @@ -84,11 +84,11 @@ margin-left: 0; } #popup label span{ - color:#444444; + color:var(--text-color-muted); } #popup .checkbox label{ margin-top: 5px; - color:#444444; + color:var(--text-color-muted); } @media screen and (max-width:500px){ #canvas_preview_container{ diff --git a/src/css/reset.css b/src/css/reset.css index 080b05d..947d3c3 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -4,45 +4,86 @@ } :root { /* original - default */ - --background: #424F5A; - --text-color: #000000; - --background-color-section: #68727b; - --background-color-area: #868e95; - --background-color-header: #a2a8ae; - --background-color-button: #959ca2; - --background-color-menu: #2D2D2D; - --text-color-menu: #cccccc; - --background-color-active: #419147; - --background-color-hover: #b4b9bd; - --border-color: #3c3c3c; + --background: radial-gradient(circle, #aaa 0%, #4d5355 100%); + --text-color: #f4f3f3; + --text-color-muted: #c1c1c1; + --text-color-red: #e38282; + --text-color-green: #8bdb8b; + --text-color-blue: #a4a4ff; + --link-color: #9ffda5; + --section-background-color: #323a3c; + --area-background-color: #464d4f; + --header-background-color: #373d3f; + --button-background-color: #2f3739; + --input-background-color: #2f3739; + --input-text-color: #f4f3f3; + --input-border-color: #0f0f0f; + --menu-background-color: #222; + --menu-text-color: #cccccc; + --background-color-active: #adecab; + --background-color-hover: #575f62; + --text-color-active: #215b2a; + --border-color: #727677; + --scrollbar-track-color: #464d4f; + --scrollbar-thumb-color: #2f3739; + --sprites-url: url(images/sprites-light.png); + --sprites-url-active: url(images/sprites.png); + --mobile-menu-toggle-filter: none; } body.theme-light{ /* light */ --background: #f9f9fa; --text-color: #0c0c0d; - --background-color-section: #f1f1f1; - --background-color-area: #ccc; - --background-color-header: #dcdcdc; - --background-color-button: #f9f9fa; - --background-color-menu: #f1f1f1; - --text-color-menu: #333333; - --background-color-active: #0a84ff; - --background-color-hover: #e1e1e2; + --text-color-muted: #444444; + --text-color-red: #bb2424; + --text-color-green: #2b882b; + --text-color-blue: #5454ca; + --link-color: #000080; + --section-background-color: #eaeaea; + --area-background-color: #d9d9d9; + --header-background-color: #c8c8c8; + --button-background-color: #f9f9fa; + --input-background-color: #ffffff; + --input-text-color: #0c0c0d; + --input-border-color: #ccc; + --menu-background-color: #eaeaea; + --menu-text-color: #333333; + --menu-dropdown-hover-background-color: #a3dbf7; + --menu-dropdown-border-color: #15439b; + --background-color-active: #a3dbf7; + --background-color-hover: #c4c4c4; + --text-color-active: #15439b; --border-color: #c1c1c1; + --scrollbar-track-color: #f9f9fa; + --scrollbar-thumb-color: #919090; + --sprites-url: url(images/sprites.png); + --sprites-url-active: url(images/sprites.png); + --mobile-menu-toggle-filter: none; } body.theme-green{ /* green */ --background: #050702; --text-color: #acc3a9; - --background-color-section: #1c2e04; - --background-color-area: #3b5f11; - --background-color-header: #2b460f; - --background-color-button: #2e4a0d; - --background-color-menu: #1c2e04; - --text-color-menu: #acc3a9; + --text-color-muted: #80937d; + --link-color: #9ffda5; + --section-background-color: #1c2e04; + --area-background-color: #3b5f11; + --header-background-color: #2b460f; + --button-background-color: #2e4a0d; + --input-background-color: #ffffff; + --input-text-color: #0c0c0d; + --input-border-color: #ccc; + --menu-background-color: #1c2e04; + --menu-text-color: #acc3a9; --background-color-active: #58960e; --background-color-hover: #58960e; + --text-color-active: #acc3a9; --border-color: #4d6b1e; + --scrollbar-track-color: #050702; + --scrollbar-thumb-color: #80937d; + --sprites-url: url(images/sprites.png); + --sprites-url-active: url(images/sprites.png); + --mobile-menu-toggle-filter: invert(); } body{ margin: 0px; @@ -95,9 +136,10 @@ hr{ border-color: rgba(0,0,0,0.3); border-bottom: 0; } -input[type="text"], input[type="button"], select, input[type="number"], textarea{ - border:1px solid #393939; - border-color: var(--border-color); +input[type="text"], select, input[type="number"], textarea{ + background: var(--input-background-color); + border: 1px solid var(--input-border-color); + color: var(--input-text-color); padding: 3px 5px; font-size: 13px; } @@ -111,18 +153,16 @@ input[type="range"]{ margin-left:0px; width:100%; } -input[type="button"]{ - background: #dddddd; -} -input[type="button"]:disabled{ - visibility:hidden; -} -button{ +button, input[type="button"]{ border-radius: 0; cursor: pointer; - background-color: var(--background-color-button); + border: 1px solid var(--border-color); + background-color: var(--button-background-color); color: var(--color-text); } +button:disabled, input[type="button"]:disabled{ + visibility:hidden; +} label{ display: inline-block; vertical-align: top; diff --git a/src/js/libs/popup.js b/src/js/libs/popup.js index cd81f6c..0efe339 100644 --- a/src/js/libs/popup.js +++ b/src/js/libs/popup.js @@ -49,7 +49,7 @@ var instance = null; var template = `
- +
diff --git a/src/js/modules/file/search.js b/src/js/modules/file/search.js index d49bf59..b4aeb87 100644 --- a/src/js/modules/file/search.js +++ b/src/js/modules/file/search.js @@ -42,7 +42,7 @@ class File_search_media_class { var settings = { title: 'Search', - comment: 'Source: pixabay.com.', + comment: 'Source: pixabay.com.', className: 'wide', params: [ {name: "query", title: "Keyword:", value: query},