Browse Source

switch to flex and new icons

dev
Kyle 1 year ago
parent
commit
90036c2585
4 changed files with 69 additions and 134 deletions
  1. +0
    -15
      css/color.css
  2. +18
    -16
      css/options.css
  3. +22
    -2
      css/style.css
  4. +29
    -101
      options.html

+ 0
- 15
css/color.css View File

@@ -1,15 +0,0 @@
body{color:#9f9f9f}
button{color:#303030;background-color:#cfcfcf}
button:hover{color:#bebebe;background-color:#323234}
input[type="text"]{color:#404040;background-color:#cfcfcf}
input[type="text"]:hover{background-color:#a6a6a6}
polygon{fill:#cfcfcf}
polygon:hover{fill:#a6a6a6}
body.dark{color:#bebebe;background-color:#0c0c0d}
body.dark button{color:#bebebe;background-color:#323234}
body.dark button:hover{color:#303030;background-color:#cfcfcf}
body.dark input[type="text"]{color:#bebebe;background-color:#323234}
body.dark input[type="text"]:hover{background-color:#474749}
body.dark polygon{fill:#323234}
body.dark polygon:hover{fill:#474749}
body,button,input,polygon{-webkit-transition:200ms;transition:200ms}

+ 18
- 16
css/options.css View File

@@ -1,18 +1,20 @@
.group{position:absolute;width:100%}
.pad{padding:60px}
.row{padding:10px}
.label{display:inline-block;width:30px}
.field{display:inline}
.label span{display:table-cell;vertical-align:middle}
#mode{position:absolute;left:0;right:0;margin:auto;z-index:9}
#quad1 .group{text-align:right;bottom:0}
#quad2 .group{bottom:0}
#quad3 .group{text-align:right}
button{top:calc(50% + 75px);height:60px;width:60px;border-radius:30px;outline:0;font-size:16px}
.quadrant{display:flex;width:calc(50% - 100px);height:calc(50% - 100px);margin:50px}
.row{display:flex;align-items:center;padding:10px}
#quad1.quadrant{flex-direction:column-reverse}
#quad1 .row{flex-direction:row-reverse}
#quad2.quadrant{flex-direction:column-reverse}
#quad2 .row{flex-direction:row}
#quad3.quadrant{flex-direction:column}
#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:hover{cursor:pointer}
input[type="text"]{display:inline-block;height:48px;width:80%;max-width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
.colorwrapper{height:70px;width:70px;display:inline-block;vertical-align:middle;overflow:hidden}
input[type="color"]{height:100px;width:100px;position:relative;top:-15px;left:-15px}
button svg{display:inline;vertical-align:middle}
#mode{position:absolute;top:calc(50% + 75px);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}
input[type="color"]{height:70px;width:70px;outline:none}
input[type="color"]:hover{cursor:pointer}
input:focus{outline:0}
svg.icon{height:1em;width:1em;vertical-align:-.125em}
a{outline:none}
input{outline:none}
svg.icon{height:1em;width:1em;padding:0 1em}

+ 22
- 2
css/style.css View File

@@ -1,5 +1,25 @@
*{padding:0;margin:0;border:0}
body,html,.content{width:100%;height:100%}
a{outline:none}
.content{display:flex;flex-flow: row wrap}
#logo{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:10%;height:10%}
.quadrant{position:relative;width:50%;height:50%;outline:none}
#logo{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:10%;max-width:100px;height:10%;max-height:100px}
.quadrant{position:relative;width:50%;height:50%}

body{color:#9f9f9f}
button{color:#303030;background-color:#cfcfcf}
button:hover{color:#bebebe;background-color:#323234}
input[type="text"]{color:#404040;background-color:#cfcfcf}
input[type="text"]:hover{background-color:#a6a6a6}
polygon{fill:#cfcfcf}
polygon:hover{fill:#a6a6a6}
.icon{color:#303030}

body.dark{color:#bebebe;background-color:#0c0c0d}
body.dark button{color:#bebebe;background-color:#323234}
body.dark button:hover{color:#303030;background-color:#cfcfcf}
body.dark input[type="text"]{color:#bebebe;background-color:#323234}
body.dark input[type="text"]:hover{background-color:#474749}
body.dark polygon{fill:#323234}
body.dark polygon:hover{fill:#474749}
body.dark .icon{color:#9f9f9f}
body,button,input,polygon{-webkit-transition:200ms;transition:200ms}

+ 29
- 101
options.html View File

@@ -12,122 +12,50 @@
<body>
<div class="content">
<div class="quadrant" id="quad1">
<div class="group">
<div class="pad">
<div class="row">
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
</label>
</div>
</div>
<div class="row">
<div class="field">
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
</label>
</div>
</div>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="quadrant" id="quad2">
<div class="group">
<div class="pad">
<div class="row">
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
</label>
</div>
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
</div>
<div class="row">
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
</label>
</div>
<div class="field">
<input type="text" spellcheck="false" tabindex="2" />
</div>
</div>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="quadrant" id="quad3">
<div class="group">
<div class="pad">
<div class="row">
<div class="field">
<input type="text" spellcheck="false" tabindex="3" />
</div>
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
</label>
</div>
</div>
<div class="row">
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
</label>
</div>
</div>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="quadrant" id="quad4">
<div class="group">
<div class="pad">
<div class="row">
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
</label>
</div>
<div class="field">
<input type="text" spellcheck="false" tabindex="4" />
</div>
</div>
<div class="row">
<div class="label">
<label>
<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M269.9 364.6c1.4 6.4 2.1 13 2.1 19.7 0 81.2-54.2 127.7-134.8 127.7C41.5 512 0 435.1 0 347.6c10.4 7.1 46.9 36.5 58.7 36.5 7 0 13-4 15.5-10.6 23.6-62.2 66.5-76.5 112.9-77.4 15.6 33.8 46.1 59.6 82.8 68.5zM460.6 0c-14.4 0-27.9 6.4-38.2 15.7C228.2 190 208 194.1 208 245.4c0 48.8 40.5 90.6 90.2 90.6 59 0 93.2-43.4 200.6-244.8 7-13.7 13.2-28.5 13.2-43.9C512 19.7 487.3 0 460.6 0z"></path></svg>
</label>
</div>
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
</div>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<input type="text" spellcheck="false" tabindex="1" />
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
<input type="color" value="#cfcfcf" />
</div>
</div>
<svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">
<a href="index.html"><polygon id="logo-svg" points="5,10 10,5 5,0 0,5" /></a>
</svg>
<button id="mode">
<svg style="height:1em;width:1em;font-size:1.33333em;vertical-align:-.225em;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</button>
</div>
<script src="js/options.js"></script>


Loading…
Cancel
Save