[bug] add missing input colour focus style

zombieFox · zombieFox · commit 6e68d03bea07 · 2018-12-27T11:41:17.000-07:00
diff --git a/css/theme.css b/css/theme.css
@@ -19,7 +19,7 @@
 box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
 }
 
-.theme-input[type="color"]{
+.theme-input{
 opacity: 0;
 width: 2px;
 min-width: 2px;
@@ -28,3 +28,10 @@
 top: 0;
 left: 0;
 }
+
+.theme-input:focus+.theme-label{
+ background-color: var(--gray-03);
+ border-bottom-color: rgb(var(--accent));
+ color: var(--white);
+ outline: 0;
+}
diff --git a/index.html b/index.html
@@ -60,10 +60,10 @@
 </div>
 <div class="head-item mb-3 mb-xl-0">
 <form class="theme">
+ <input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
 <label class="button mb-0 theme-label" for="accent-picker">
 <span class="button-text">Accent</span>
 </label>
- <input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
 </form>
 </div>
 </div>
@@ -86,6 +86,7 @@
 <script src="js/state.js"></script>
 <script src="js/data.js"></script>
 <script src="js/links.js"></script>
+<script src="js/version.js"></script>
 <script src="js/init.js"></script>
 
 </html>

-Original file line number
+Diff line change
 box-shadow:000.25em0rgba(var(--accent),0.6),000.5em0rgba(var(--accent),0.4);
+}
 -.theme-input[type="color"]{
 +.theme-input{
 opacity:0;
 width:2px;
 min-width:2px;
 top:0;
 left:0;
+}
++
 +.theme-input:focus+.theme-label{
 +background-color:var(--gray-03);
 +border-bottom-color:rgb(var(--accent));
 +color:var(--white);
 +outline:0;
 +}
-Original file line number
+Diff line change
 </div>
 <divclass="head-item mb-3 mb-xl-0">
 <formclass="theme">
 +<inputid="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
 <labelclass="button mb-0 theme-label" for="accent-picker">
 <spanclass="button-text">Accent</span>
 </label>
 -<inputid="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">
 </form>
 </div>
 </div>
 <scriptsrc="js/state.js"></script>
 <scriptsrc="js/data.js"></script>
 <scriptsrc="js/links.js"></script>
 +<scriptsrc="js/version.js"></script>
 <scriptsrc="js/init.js"></script>
 </html>