Move some hardcoded colors to CSS

Author: mlochbaum

graphtool.js

@@ -9,7 +9,7 @@ doc.html(`
       <g id="hide-icon">
         <path d="M2 6Q7 0 12 6Q7 12 2 6Z" stroke-width="1" stroke="currentColor" fill="none"/>
         <circle cx="7" cy="6" r="2" stroke="none" fill="currentColor"/>
-        <line stroke-width="1" x1="4.4" y1="10.3" x2="10.4" y2="2.3" stroke="white"/>
+        <line stroke-width="1" x1="4.4" y1="10.3" x2="10.4" y2="2.3" class="keyBackground"/>
         <line stroke-width="1" x1="3.6" y1= "9.7" x2= "9.6" y2="1.7" stroke="currentColor"/>
       </g>
       <g id="pin-icon" text-anchor="middle" font-size="100px" fill="currentColor">
@@ -106,7 +106,7 @@ let gr = doc.select("#fr-graph"),
 
 
 gr.append("rect").attrs({x:0, y:pad.t-8, width:W0, height:H0-22, rx:4,
-                         fill:"white"});
+                         "class":"graphBackground"});
 watermark(gr);
 
 
@@ -1001,7 +1001,6 @@ function updatePhoneTable() {
                 .attr("viewBox","0 0 280 145")
                 .insert("path").attrs({
                     fill:"none",
-                    stroke:"#445",
                     "stroke-width":30,
                     "stroke-linecap":"round",
                     d:"M265 110V25q0 -10 -10 -10H105q-24 0 -48 20l-24 20q-24 20 -2 40l18 15q24 20 42 20h100"

style.css

@@ -1,5 +1,6 @@
 noscript { position:absolute; left:0; right:0; font-size:6em; text-align:center; }
 html { background:#e5e5e5; }
+.graphBackground { fill:white; }
 .main { height:100vh; display:flex; flex-direction:column; color:black; }
 .graphBox { margin:0.25em auto 0.75em; }
 #fr-graph { width:calc((100vh - 13.5em) * 800 / 346); max-width:100%; }
@@ -102,8 +103,10 @@ td.remove       { width:1.4em; font-size:120%; padding-left:0.08em; }
 .keySel rect,.keySelBoth { cursor:pointer; }
 
 .pinMark { float:right; width:80%; margin-right:-8.6%; margin-bottom:0.6em; }
+.pinMark path { stroke:#445; }
 
 tr { background:#f9fcfc; }
+.keyBackground { stroke:#f9fcfc; }
 .scrollOuter { flex:1; position:relative; }
 .scroll {
     position:absolute; left:0; right:0; top:0; bottom:0;

styles/dark.css

@@ -6,7 +6,9 @@ html,.addPhone { background:#191b1f; }
 .addLock { color:#778; }
 .addPhone.locked:after { border-color:#375b0b; }
 tr { background:#d7e0e0; }
+.keyBackground { stroke:#d7e0e0; }
 .search { background:#e3e2e1; }
+.pinMark path { stroke:#726d63; }
 .scroll div { border-left-color:#101112; }
 .select { border-bottom-color:#101112; }
 .chevron,.stop { fill:#101112; }

styles/white.css

@@ -3,6 +3,7 @@ html,.addPhone { background:white; }
 .button { border-left-color:white; }
 .tools { background:#ebf0ed; }
 tr { background:#ebeeee; }
+.keyBackground { stroke:#ebeeee; }
 button { background:#dddbce; }
 button:before,button:after { border-color:#dde4a0; }
 .button.selected { background-color: #e4eb6c; }