Visual Overhaul using BEM naming convention

css/index.css

@@ -2,12 +2,7 @@ body {
     overflow-y: scroll;
 }
 
-a {
-    color: #3366FF;
-}
-
 canvas {
-    border: 1px solid #ccc;
     background-color: #FFF;
 }
 
@@ -21,18 +16,6 @@ h6 {
     margin-bottom: 5px;
 }
 
-.navbar-nav>li {
-    float: left;
-}
-.navbar-nav>li>a {
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-.navbar-nav {
-    float: left;
-    margin: 0;
-}
-
 .btn-file {
     position: relative;
     overflow: hidden;
@@ -75,6 +58,8 @@ td:nth-child(3) {
 #preview {
     display: block;
     cursor: default;
+    /* Perfectly fit to remove white space */
+    /* width: 642px; */
 }
 
 #image_url_lge {
@@ -102,25 +87,27 @@ td:nth-child(3) {
 }
 
 .result {
-    transition: all 0.1s ease-out;
+    transition: all var(--transition);
 }
 
 .result a {
-    transition: all 0.1s ease-out;
+    transition: all var(--transition);
 }
 
-.result .text, .result .thumb {
+.result .text,
+.result .thumb {
     display: inline-block;
 }
 
 .result .thumb {
     float: right;
 }
+
 .result a>div::after {
-   content: " ";
-   display: block; 
-   height: 0; 
-   clear: both;
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
 }
 
 #results-list .nav>li>a {
@@ -170,32 +157,37 @@ td:nth-child(3) {
     top: -5px;
     visibility: hidden;
 }
+
 #fileNameDisplay {
     position: absolute;
     font-size: 10px;
     margin-top: 10px;
 }
+
 #timeCodeDisplay {
     position: absolute;
     right: 16px;
     font-size: 10px;
     margin-top: 10px;
 }
 
-
-#main, #results-list, #info {
+#main,
+#results-list,
+#info {
     display: inline-block;
     margin: 10px;
     margin: 10px;
 }
+
 #main {
     position: relative;
     width: 642px;
     margin-bottom: 1em;
-    background-color: rgba(255, 255, 255, 1);
+    background-color: #fff;
     color: #333;
-    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
-    font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
+    font-family: var(--font);
+    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--box-shadow);
 }
 
 #form {
@@ -204,24 +196,97 @@ td:nth-child(3) {
     width: 100%;
 }
 
+#main .btn,
+#search2Btn {
+    text-shadow: none;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    padding: 4px 10px !important;
+    line-height: 20px;
+    transform: translateY(-2px);
+    -webkit-transform: translateY(-2px);
+    transition: background-color var(--transition);
+    -webkit-transition: background-color var(--transition);
+}
+
+#searchBtn,
+#search2Btn {
+    font-weight: 700;
+    background: var(--default-color);
+    /* twiistrz edit background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); */
+}
+
+#main .btn:hover:not([disabled]),
+#main .btn:focus:not([disabled]),
+#searchBtn:hover:not([disabled]),
+#search2Btn:hover:not([disabled]) {
+    color: #fff;
+    background-color: var(--default-color);
+    /* twiistrz edit background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); */
+    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--box-shadow);
+}
+
 #main .btn.disabled,
 #main .btn[disabled] {
-    cursor: default !important;
+    cursor: not-allowed !important;
+}
+
+#instruction {
+    font-size: 12px;
+}
+
+#main input {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+    padding: 0 10px;
+    line-height: 20px;
+}
+
+#main input#imageURL {
+    margin: 2px 0 5px !important;
+}
+
+#main input:focus {
+    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--box-shadow);
+}
+
+#main .main-footer {
+    border-top: 1px solid rgba(139, 156, 174, 0.3);
+    padding: 1rem 0;
+    text-align: center;
+    text-shadow: none !important;
+    font-size: 15px;
+    line-height: 1.7;
+}
+
+#main .main-footer__warning {
+    color: #EA0000;
+}
+
+#main .main-filesource {
+    height: 15px;
+    border-top: 1px solid rgba(139, 156, 174, 0.3);
 }
 
 #results-list {
     float: left;
     width: 642px;
     background-color: rgba(255, 255, 255, 1);
     color: #333;
-    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
-    font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
+    font-family: var(--font);
+    box-shadow: var(--box-shadow);
+    -webkit-box-shadow: var(--box-shadow);
 }
 
 @media (min-width: 1020px) {
     #results-list {
         width: 320px;
     }
+
     .result .thumb {
         float: none;
     }
@@ -246,15 +311,15 @@ td:nth-child(3) {
     z-index: 6;
     background-color: rgba(255, 255, 255, 1);
     color: #333;
-    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
     display: none;
     visibility: hidden;
     opacity: 0;
     transition: visibility 100ms ease-out, opacity 100ms ease-out !important;
     font-size: 0.9em;
     line-height: 1.5em;
     padding: 1em;
-    font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
+    font-family: var(--font);
 }
 
 #info #naturalText,
@@ -285,7 +350,7 @@ td:nth-child(3) {
 }
 
 #info h2 {
-    font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
+    font-family: var(--font);
     font-size: 12px;
 }
 
@@ -363,32 +428,35 @@ td:nth-child(3) {
 }
 
 .ripple {
-  position: relative;
-  left: -80px;
-  top: -220px;
-  box-sizing: content-box;
-  display: block;
-  border-style: double;
-  border-radius: 800px;
-  animation: ripple 1s cubic-bezier(0, 0, 0.2, 1);
-  animation-iteration-count: infinite;
+    position: relative;
+    left: -80px;
+    top: -220px;
+    box-sizing: content-box;
+    display: block;
+    border-style: double;
+    border-radius: 800px;
+    animation: ripple 1s cubic-bezier(0, 0, 0.2, 1);
+    animation-iteration-count: infinite;
 }
 
 @keyframes ripple {
-  0% {
-    width: 0px;
-    height: 0px;
-    transform: translate(350px, 350px);
-    border-width: 50px;
-    border-color: #ffffff;
-    opacity: 1;
-  }
-  100% {
-    width: 800px;
-    height: 800px;
-    transform: translate(0px, 0px);
-    border-width: 0;
-    border-color: #0000ff;
-    opacity: 0;
-  }
-}
+    0% {
+        width: 0px;
+        height: 0px;
+        transform: translate(350px, 350px);
+        border-width: 50px;
+        /* border-color: #ffffff; */
+        border-color: rgba(45,54,64,0.6);
+        opacity: 1;
+    }
+
+    100% {
+        width: 800px;
+        height: 800px;
+        transform: translate(0px, 0px);
+        border-width: 0;
+        /* border-color: #0000ff; */
+        border-color: #2d3640;
+        opacity: 0;
+    }
+}