WIP: apply bootstrap theme

* logo color

lib/views/layout/layout.html

@@ -132,10 +132,10 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
               <path d="M0 376v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 280v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 184v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 88v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM96 376v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 280v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 184v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 88v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625z"></path>
             </svg> -->
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.44 196.11" class="light-logo">
-              <polygon points="56.61 196.11 169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11" />
-              <polygon points="75.48 98.05 94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05" />
-              <polygon points="0 98.06 56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06" />
-              <polygon points="75.48 163.43 56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43" />
+              <polygon class="group2" points="56.61 196.11 169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11" />
+              <polygon class="group1" points="75.48 98.05 94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05" />
+              <polygon class="group1" points="0 98.06 56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06" />
+              <polygon class="group1" points="75.48 163.43 56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43" />
             </svg>
           </b>
           <span class="hidden-xs" style="color: black">

resource/styles/scss/_override-agileadmin.scss

@@ -1,11 +1,32 @@
-// hide sidebar by agile-admin completely
+// when sidebar is hidden
 .content-wrapper {
+  // hide sidebar by agile-admin completely
   .sidebar {
     display: none;
   }
   #page-wrapper {
     margin-left: 0;
   }
+
+  // Logo
+  .top-left-part {
+    background-color: darken($topbar, 10%);
+
+    .logo {
+      svg.dark-logo, svg.light-logo {
+        fill: lighten($topbar, 15%);
+
+        &:hover {
+          .group1 {
+            fill: #74bc45;
+          }
+          .group2 {
+            fill: #1664b0;
+          }
+        }
+      }
+    }
+  }
 }
 
 /*
@@ -13,16 +34,22 @@
  */
 .top-left-part {
   line-height: 0%;
+
   a {
     text-transform: none;
   }
 
   .logo {
+    // set transition for fill
+    svg * {
+      transition: fill 0.8s ease-out;
+    }
+
     svg.dark-logo, svg.dark-logo-text {
       fill: white;
     }
     svg.light-logo, svg.light-logo-text {
-      fill: #4F5467;
+      fill: $dark-themecolor;
     }
     svg.dark-logo, svg.light-logo {
       padding: 12px;
@@ -34,8 +61,8 @@
       height: 50px;
     }
   }
-}
 
+}
 
 /*
  * Form