diff --git a/src/Flows.css b/src/Flows.css index 54f443c..a4c07dd 100644 --- a/src/Flows.css +++ b/src/Flows.css @@ -1,6 +1,6 @@ :root { --box-bgcolor-light: hsl(0,0%,97%); - --box-bgcolor-dark: hsl(0,0%,20%); + --box-bgcolor-dark: hsl(0,0%,16%); } .box { @@ -15,11 +15,7 @@ .root-dark-mode .box { background-color: var(--box-bgcolor-dark); color: var(--foreground-dark); - box-shadow: 0 0 3px rgba(255,255,255,.2); -} - -.root-dark-mode .sidebar .box { - --box-bgcolor-dark: hsl(0,0%,25%); + box-shadow: 0 0 2px rgba(255,255,255,.25), 0 0 7px rgba(0,0,0,.15); } .box-tip { diff --git a/src/Sidebar.css b/src/Sidebar.css index fe1892a..58eb394 100644 --- a/src/Sidebar.css +++ b/src/Sidebar.css @@ -21,10 +21,10 @@ } .root-dark-mode .sidebar-on .sidebar-shadow { - opacity: .5; + opacity: .65; } .root-dark-mode .sidebar-on .sidebar-shadow:active { - opacity: .65; + opacity: .8; } .sidebar { @@ -109,7 +109,7 @@ } .root-dark-mode .sidebar-title { - background-color: hsla(0,0%,20%,.6); + background-color: hsla(0,0%,18%,.6); color: var(--foreground-dark); text-shadow: 0 0 3px black; } diff --git a/src/Title.css b/src/Title.css index 0ef4f2c..3119b65 100644 --- a/src/Title.css +++ b/src/Title.css @@ -12,8 +12,8 @@ } .root-dark-mode .title-bar { - background-color: hsla(0,0%,15%,.6); - box-shadow: 0 0 15px rgba(255,255,255,.2); + background-color: hsla(0,0%,12%,.8); + box-shadow: 0 0 5px rgba(255,255,255,.1); } .control-bar { @@ -29,7 +29,7 @@ border-radius: 5px; } .control-btn:hover { - background-color: #555555; + background-color: #666666; color: white; } .control-btn-label { @@ -71,10 +71,12 @@ } .root-dark-mode .control-search { - background-color: rgba(255,255,255,.7) !important; + background-color: hsla(0,0%,35%,.6) !important; + color: var(--foreground-dark); } .root-dark-mode .control-search:focus { - background-color: hsl(0,0%,90%) !important; + background-color: hsl(0,0%,80%) !important; + color: black !important; } .list-menu { diff --git a/src/color_picker.js b/src/color_picker.js index f786652..7fa51d7 100644 --- a/src/color_picker.js +++ b/src/color_picker.js @@ -11,14 +11,14 @@ export class ColorPicker { get(name) { name=name.toLowerCase(); if(name==='洞主') - return ['hsl(0,0%,97%)','hsl(0,0%,25%)']; + return ['hsl(0,0%,97%)','hsl(0,0%,16%)']; if(!this.names[name]) { this.current_h+=golden_ratio_conjugate; this.current_h%=1; this.names[name]=[ `hsl(${this.current_h*360}, 50%, 90%)`, - `hsl(${this.current_h*360}, 60%, 25%)`, + `hsl(${this.current_h*360}, 60%, 20%)`, ]; } return this.names[name]; diff --git a/src/index.css b/src/index.css index 535c541..c0da48c 100644 --- a/src/index.css +++ b/src/index.css @@ -57,17 +57,31 @@ button, .button { } .root-dark-mode button, .root-dark-mode .button { - background-color: rgba(255,255,255,.6); + background-color: hsl(0,0%,30%); + color: var(--foreground-dark); } button:hover, .button:hover { background-color: rgba(255,255,255,.7); } +.root-dark-mode button:hover, .root-dark-mode .button:hover { + background-color: hsl(0,0%,40%); +} + button:disabled, .button:disabled { background-color: rgba(128,128,128,.5); } +.root-dark-mode button:disabled, .root-dark-mode .button:disabled { + background-color: hsl(0,0%,20%); + color: hsl(0,0%,60%); +} + .root-dark-mode input:not([type=file]), .root-dark-mode textarea { - background-color: hsl(0,0%,80%); + background-color: hsl(0,0%,30%); + color: var(--foreground-dark); +} +.root-dark-mode input:not([type=file])::placeholder { + color: var(--foreground-dark); } \ No newline at end of file diff --git a/src/infrastructure b/src/infrastructure index 111383a..9901aa8 160000 --- a/src/infrastructure +++ b/src/infrastructure @@ -1 +1 @@ -Subproject commit 111383ab1f22c6e712bc3e83c4934f6d89b6db05 +Subproject commit 9901aa83dfa8ee01da9e9480cc9524b18e29c40c