Browse Source

move color and url options together

dev
Kyle 1 year ago
parent
commit
99a19c7eda
2 changed files with 9 additions and 17 deletions
  1. +5
    -5
      css/options.css
  2. +4
    -12
      options.html

+ 5
- 5
css/options.css View File

@@ -1,5 +1,5 @@
.quadrant{display:flex;width:calc(50% - 100px);height:calc(50% - 100px);margin:50px}
.row{display:flex;align-items:center;padding:10px}
.quadrant{display:flex;width:calc(50% - 120px);height:calc(50% - 120px);margin:60px}
.row{display:flex;align-items:center}
#quad1.quadrant{flex-direction:column-reverse}
#quad1 .row{flex-direction:row-reverse}
#quad2.quadrant{flex-direction:column-reverse}
@@ -8,11 +8,11 @@
#quad3 .row{flex-direction:row-reverse}
#quad4.quadrant{flex-direction:column}
#quad4 .row{flex-direction:row}
button{height:60px;width:60px;border-radius:30px;outline:0;font-size:1em}
button{height:50px;width:50px;border-radius:30px;outline:0;font-size:1em}
button:hover{cursor:pointer}
button svg{display:inline;vertical-align:middle}
#mode{position:absolute;top:calc(50% + 85px);left:0;right:0;margin:auto}
input[type="text"]{height:48px;width:80%;max-width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
#mode{position:absolute;top:calc(50% + 60px);left:0;right:0;margin:auto}
input[type="text"]{height:48px;width:100%;max-width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
input[type="color"]{height:50px;width:50px;outline:none}
input[type="color"]:hover{cursor:pointer}
a{outline:none}


+ 4
- 12
options.html View File

@@ -12,35 +12,27 @@
<body>
<div class="content">
<div class="quadrant" id="quad1">
<div class="row">
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<input type="color" value="#cfcfcf" />
<input type="text" spellcheck="false" tabindex="1" />
</div>
</div>
<div class="quadrant" id="quad2">
<div class="row">
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<input type="color" value="#cfcfcf" />
<input type="text" spellcheck="false" tabindex="1" />
</div>
</div>
<div class="quadrant" id="quad3">
<div class="row">
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<input type="color" value="#cfcfcf" />
<input type="text" spellcheck="false" tabindex="1" />
</div>
</div>
<div class="quadrant" id="quad4">
<div class="row">
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<input type="color" value="#cfcfcf" />
<input type="text" spellcheck="false" tabindex="1" />
</div>
</div>
<svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">


Loading…
Cancel
Save