sexier overlay

index.html

@@ -110,12 +110,12 @@
     width: 100%;
     margin: 0;
     border: 0;
-    background: #222;
     outline: 0;
-    -webkit-appearance: none;
+    background: #222;
-    -moz-appearance: none;
     color: #fff;
     font-family: 'Lato', sans-serif;
+    -webkit-appearance: none;
+    -moz-appearance: none;
   }
 
   ul,
@@ -142,10 +142,10 @@
 
   .search-suggestion {
     padding: 14px 12px;
-    transition: 0.5s;
+    transition: .5s;
     font-size: .8rem;
-    cursor: pointer;
     text-align: left;
+    cursor: pointer;
   }
 
   .search-suggestion:hover,
@@ -155,94 +155,104 @@
 
   .overlay {
     position: fixed;
-    box-sizing: border-box;
     top: 0;
     left: 0;
+    visibility: hidden;
+    overflow: auto;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
-    padding: 0 10px;
+    padding: 8vw;
-    transition: 200ms;
+    transition: visibility .2s, opacity .2s, transform .4s;
-    background: #222;
+    transform: translateY(10px);
-    visibility: hidden;
     opacity: 0;
-    overflow: auto;
+    background: #00d2ff;
+    background: -webkit-linear-gradient(to top left, #00d2ff, #3a7bd5);
+    background: linear-gradient(to top left, #00d2ff, #3a7bd5);
+    font-size: 1.2rem;
   }
 
   .overlay[data-toggled='true'] {
     visibility: visible;
+    transform: translateY(0);
     opacity: 1;
   }
 
-  .lists {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding-bottom: 20px;
-    overflow: auto;
-  }
-
   .category {
-    width: 175px;
+    width: 100%;
-    margin: 20px 10px 0;
+    margin-bottom: 3em;
   }
 
   .category-name {
-    margin: 0;
+    margin: 0 0 2em;
-    padding: 14px;
+    color: #b5f1ff;
-    border-radius: 2px 2px 0 0;
+    font-size: .7em;
-    background: #30a388;
+    letter-spacing: .2em;
-    color: #000;
-    font-size: .7rem;
     text-transform: uppercase;
-    text-align: center;
-  }
-
-  .command {
-    transition: background 200ms;
-    background: #333;
-  }
-
-  .command:hover {
-    background: #313131;
-  }
-
-  .command:nth-child(even) {
-    background: #3a3a3a;
-  }
-
-  .command:nth-child(even):hover {
-    background: #383838;
-  }
-
-  .command:last-of-type {
-    border-radius: 0 0 2px 2px;
   }
 
   .command a {
     display: block;
-    padding: 14px 12px;
+    position: relative;
-    color: #eee;
+    padding: .5em 0;
-    font-size: .8rem;
+    color: #fff;
-    line-height: 1.3rem;
+    font-size: 1em;
+    line-height: 2em;
     text-decoration: none;
   }
 
   .command-key {
     display: block;
-    width: 32px;
-    margin-right: 10px;
     float: left;
-    border-radius: 2px;
+    width: 2.5em;
-    background: #292929;
+    margin-right: 1em;
-    font-family: 'Courier New', monospace;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, .1);
+    font-size: .8em;
     text-align: center;
   }
 
-  @media (min-width: 740px) {
+  .command-name {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .command-name::after {
+    content: ' ';
+    position: absolute;
+    right: 0;
+    bottom: -.35em;
+    left: 0;
+    height: 2px;
+    transition: .2s;
+    transform: translateX(-2em);
+    background-color: rgba(255, 255, 255, .2);
+    opacity: 0;
+  }
+
+  .command:hover .command-name::after {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  @media (min-width: 850px) {
     .overlay {
       display: flex;
       justify-content: center;
       align-items: center;
+      padding: 2em;
+      font-size: 1.3vw;
+    }
+
+    .lists {
+      display: flex;
+      justify-content: space-around;
+      width: 100%;
+    }
+
+    .category {
+      width: 10em;
+      margin-bottom: 0;
     }
   }
 </style>