theme update and UI improvements

atoponce · atoponce · commit dbe61a2ea031 · 2017-09-09T23:48:44.000-06:00
diff --git a/assets/style.css b/assets/style.css
@@ -5,10 +5,36 @@
 
 /* body tags */
 body { margin: 0; }
+select {
+    -moz-appearance: none;  
+    -webkit-appearance: none; 
+    background-color: white;
+    border:1px solid black;
+    color: black;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px 22px 5px 6px;
+    width: 120px;
+}
+select option {
+    background-color: white;
+    color :black;
+}
+select::-ms-expand{
+    display:none;
+}
 button {
+    -moz-appearance: none;  
+    -webkit-appearance: none; 
+    background: #fff;
+    border:1px solid black;
     position: absolute;
     right: 10px;
-    top: 10px;
+    top: 40px;
+    color: black;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px 10px;
 }
 /* classes */
 .stats {
@@ -23,39 +49,55 @@ button {
 }
 .passphrase-separator {
     bottom: 5px;
-    /*right: 40px;*/
     right: 5px;
     position: absolute;
 }
-.optional {
-    left: 10px;
-    position: absolute;
-    top: 10px;
-}
 .cell {
     border: 1px solid black;
     display: table-cell;
     float: left;
-    height: 150px;
+    height: 180px;
     margin: 5px;
-    padding: 0px 4px;
     position: relative;
     width: 364px;
 }
 .password {
     font-family: "Dejavu Sans Mono", "Courier New", "Lucidia Console", Monaco, monospace;
     font-size: 18px;
+    margin: 50px 10px 0px 10px;
     text-align: center;
 }
 .cell-title {
-    margin-top: 25px;
+    background-color: #3385ff;
+    border-bottom: 1px solid black;
+    color: white;
+    margin-top: 0px;
+    padding: 5px;
     text-align: center;
 }
 .info-link {
     position: absolute;
     bottom: 5px;
     right: 5px;
 }
+.optional {
+    left: 10px;
+    position: absolute;
+    top: 40px;
+}
+.optional:after {
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    bottom: 3px;
+    color: black;
+    content: '⊳';
+    font-size: 18px;
+    left: 100px;
+    pointer-events: none;
+    position: absolute;
+    transform: rotate(90deg);
+}
 /* ids */
 #container {
     display: table;
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <link rel="shortcut icon" href="favicon.ico">
-    <link integrity="sha256-59U5fUnSnro6fLunzvrOYDYaMK0rztwBFmISM27NunY=" crossorigin="anonymous" rel="stylesheet" href="assets/style.css">
+    <link integrity="sha256-DwMZFBA9D9hwt+Xd8LCz3zdinwlkpOF99hzgH1WUSIY=" crossorigin="anonymous" rel="stylesheet" href="assets/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Passphrase and Password Generator</title>
