|
|
|
@ -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} |
|
|
|
|
