use transparent logo

Author: ryanphuang

_includes/banner.html

@@ -2,7 +2,7 @@
   <div class="main_menu">
     <nav class="navbar navbar-expand-lg navbar-light">
       <div class="container box_1620">
-        <a class="navbar-brand logo_h" href="{{ '/' | relative_url }}"><img src="{{ '/assets/img/logo-gray.png' | relative_url }}" alt="OrderLab"></a>
+        <a class="navbar-brand logo_h" href="{{ '/' | relative_url }}"><img src="{{ '/assets/img/logo-transparent.png' | relative_url }}" alt="OrderLab"></a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>

assets/css/modern.css

@@ -172,6 +172,7 @@ a:hover {
   width: auto;
   display: block;
   filter: none;
+  transition: filter 0.2s ease, opacity 0.2s ease;
 }
 
 .header_area .navbar .nav .nav-item {
@@ -1653,9 +1654,16 @@ a:hover {
 [data-theme="dark"] .header_area .navbar-brand {
   background: transparent;
   border: 0;
+  border-radius: 0;
+  padding: 0;
   box-shadow: none;
 }
 
+[data-theme="dark"] .header_area .navbar-brand img {
+  filter: brightness(0) invert(1) contrast(1.1);
+  opacity: 0.96;
+}
+
 [data-theme="dark"] .theme-toggle {
   border: 0;
   background: transparent;