diff --git a/css/options.css b/css/options.css index e317239..e79b73c 100644 --- a/css/options.css +++ b/css/options.css @@ -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} diff --git a/options.html b/options.html index 849b4e7..bee4b9f 100644 --- a/options.html +++ b/options.html @@ -12,35 +12,27 @@
-
- -
+
-
- -
+
-
- -
+
-
- -
+