Resolve "Fix: bugs"

Closes #14 (closed)

common/common.scss

@@ -42,6 +42,10 @@ input[type="color"]:focus,
   outline: none;
 }
 
+:root {
+  --banner-secondary-text: var(--primary-medium);
+}
+
 .d-header {
   height: 5em;
   box-shadow: none;
@@ -51,15 +55,16 @@ input[type="color"]:focus,
   border-radius: 10px;
 }
 
+///////// HOME //////////
 .custom-homepage-columns {
   margin: 2em 0 2em 0;
   .col {
     position: relative;
     @include border-radius;
-    background: $color-white;
     padding: 2em 2em 1em;
-    border-top: 8px solid $tertiary;
-    box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+    border-top: 8px solid $header_background;
+    box-shadow: 0 8px 60px 0 rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
+
     .header-wrapper {
       color: var(--primary);
       background-color: transparent;
@@ -69,15 +74,15 @@ input[type="color"]:focus,
     }
     .btn-more {
       color: var(--secondary);
-      background: var(--tertiary);
+      background: var(--primary-medium);
       transition: all 0.3s linear;
       @include border-radius;
       text-transform: uppercase;
-      border: 1px solid var(--tertiary);
+      border: 1px solid var(--primary-medium);
       &:hover {
-        background: var(--tertiary);
+        background: var(--primary-medium);
         color: var(--secondary);
-        box-shadow: 4px 4px $color-box-shadow;
+        box-shadow: 4px 4px $tertiary;
         transition: 0.3s;
         @include border-radius;
       }
@@ -85,6 +90,36 @@ input[type="color"]:focus,
   }
 }
 
+/// Text ///
+p {
+  color: var(--primary);
+}
+
+.site-texts .site-text .site-text-value {
+  color: var(--primary);
+}
+
+.th {
+  color: var(--primary);
+}
+
+.permalink-description {
+  color: var(--quarternary);
+}
+
+.admin-customize .themes-list-container .themes-list-item.inactive-indicator {
+  color: var(--primary-medium);
+}
+
+.content-list h3 {
+  color: var(--primary-medium);
+}
+
+/// text box ///
+.topic-list-item.visited a.title:not(.badge-notification), .latest-topic-list-item.visited a.title:not(.badge-notification), .category-topic-link.visited a.title:not(.badge-notification) {
+  color: $primary;
+}
+
 .navigation-categories .search-banner {
   @include border-radius;
   height: 350px;
@@ -94,39 +129,36 @@ input[type="color"]:focus,
   max-width: 1110px;
 }
 
-.category-box-inner {
-  background: $color-white;
-}
-
 .navigation-topics {
+  
   .container.list-container {
     @include border-radius;
-    box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+    box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
     padding: 2em;
-    background-color: $color-white;
-    border-top: 8px solid $tertiary;
+    border-top: 8px solid $primary-medium;
     margin-top: .8em;
   }
 }
 
 .search-widget .search-context {
   padding: 10px;
-  background-color: var(--tertiary-medium);
+  background-color: var(--primary-medium-medium);
   @include border-radius;
 }
 
 .search-menu .search-context .show-help {
-  color: $color-white;
+  color: $header_background;
 }
 
 .menu-panel .d-label {
-  color: $color-black;
+  color: $primary;
 }
 
 a {
-  color: var(--tertiary-hover);
+  color: var(--primary-medium-hover);
 }
 
+// White background in boxes
 .category-boxes {
   display: grid;
   grid-gap: 2em;
@@ -138,23 +170,31 @@ a {
     overflow: hidden;
     border: none;
     border-top: 8px solid;
-    background: var(--secondary);
+
     @include border-radius;
-    box-shadow: 0px 2px 3px 0px rgba(2,47,57,.14);
+    box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
+
     .category-box-inner {
       border: none;
       padding: 0;
+
       .category-details {
-        padding: 2em;
+        padding: 0.3em;
       }
     }
     &:hover {
-      box-shadow: 0px 40px 30px 0px rgba(2,47,57,.10);
+      box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1);
       transform: translateY(-2px);
     }
   }
 }
 
+//category title
+.category-list .category-text-title {
+  align-items: baseline;
+  display: inline-flex;
+}
+
 @media (max-width: 960px) {
   .category-boxes.with-logos.with-subcategories {
     grid-template-columns: 1fr;
@@ -164,25 +204,24 @@ a {
 .category-list-item.category {
   @include border-radius;
   border-right: 1px solid var(--primary-low) !important;
-  box-shadow: 0 0 4px 0 rgba(0,0,0,.10);
+  box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1);
   margin: 0 0.59em 2em .59em;
-  background: $color-white;
 }
 
 #create-topic {
   color: var(--secondary);
-  background: var(--tertiary);
+  background: var(--primary-medium);
   transition: all 0.3s linear;
   @include border-radius;
   text-transform: uppercase;
-  border: 2px solid var(--tertiary);
+  border: 2px solid var(--primary-medium);
   .fa {
     color: var(--secondary);
   }
   &:hover {
-    background: var(--tertiary);
+    background: var(--primary-medium);
     color: var(--secondary);
-    box-shadow: 4px 4px $color-box-shadow;
+    box-shadow: 4px 4px $tertiary;
     transition: all 0.3s linear;
     @include border-radius;
     .fa {
@@ -201,7 +240,7 @@ a {
     border-radius: none;
     border: none;
     &:hover {
-      background: var(--tertiary);
+      background: var(--primary-medium);
       border-radius: 0;
     }
   }
@@ -210,15 +249,15 @@ a {
 .list-controls .combo-box .combo-box-header {
   border: none;
   @include border-radius;
-  background-color: $color-white;
+  background-color: $header_background;
 }
 
 .menu-panel .panel-body-bottom .btn {
   svg {
-    color: var(--tertiary);
+    color: var(--primary-medium);
   }
   &:hover {
-    background: var(--tertiary);
+    background: var(--primary-medium);
     color: var(--secondary);
   }
 }
@@ -230,34 +269,21 @@ a {
     @include border-radius;
     transition: all 0.3s linear;
     background-color: transparent;
-    color: var(--tertiary);
-    border: 1px dashed var(--tertiary);
+    color: var(--primary-medium);
+    border: 1px dashed var(--primary-medium);
   }
   &.active {
     @include border-radius;
     transition: all 0.3s linear;
-    background: $color-mint;
+    background: $primary-medium;
     color: var(--secondary);
-    border: 1px solid $color-mint;
-  }
-}
-
-.select-kit.dropdown-select-box .dropdown-select-box-header {
-  background: var(--tertiary);
-  @include border-radius;
-  border: 1px solid var(--tertiary);
-  color: var(--secondary);
-  svg {
-    color: var(--secondary);
-    &:hover {
-      color: var(--secondary);
-    }
+    border: 1px solid $primary-medium;
   }
 }
 
 .d-editor-button-bar .select-kit.dropdown-select-box .dropdown-select-box-header {
   background: transparent;
-  color: var(--primary-medium);
+  color: var(--primary-low-mid);
   border: 1px solid transparent;
   border-radius: 0;
   svg {
@@ -277,25 +303,25 @@ a {
 
 .discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
   color: var(--secondary);
-  background: var(--tertiary-hover);
+  background: $header-background;
   border-radius: 5px;
   .fa {
-    color: var(--secondary);
+    color: var(--quaternary);
   }
 }
 
 .menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
 .menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
-  background-color: var(--tertiary-low);
+  background-color: var(--primary-medium-low);
 }
 
-.btn-default {
+.btn-default, .btn.btn-icon-text {
   color: var(--secondary);
-  background: var(--tertiary);
+  background: var(--primary-medium);
   transition: all 0.3s linear;
   @include border-radius;
   text-transform: uppercase;
-  border: 1px solid var(--tertiary);
+
   .fa {
     color: var(--secondary);
   }
@@ -331,7 +357,7 @@ a:hover {
   color: var(--tertiary-hover);
 }
 
-.image-upload-controls .btn-default {
+.image-upload-controls {
   border: 1px solid var(--secondary);
   .fa {
     color: var(--secondary);
@@ -349,7 +375,7 @@ a:hover {
 }
 
 .custom-search-banner-wrap h1, .custom-search-banner-wrap p {
-  color: $color-white;
+  color: $header_background;
 }
 
 .btn[href] {
@@ -369,3 +395,301 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
     border: 1px dashed var(--tertiary);
   }
 }
+
+.banner-box {
+  width: $large-width;
+  max-width: calc(100% - 16px);
+  margin: 0 auto;
+  margin-top: 20px;
+  color: $primary_text_color;
+  position: relative;
+  background-image: url($banner_background_image);
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: $background_color;
+
+  .button-container {
+    margin-right: 5px;
+    position: absolute;
+    z-index: z("base") + 1;
+    right: 0;
+    top: 2px;
+
+    .close,
+    .toggle {
+      float: right;
+      padding: 5px;
+      border: none;
+      color: $tertiary;
+      background: transparent;
+      font-size: 1.5157em;
+      cursor: pointer;
+
+      svg {
+        color: $tertiary;
+      }
+      .d-button-label {
+        font-size: 1em;
+        color: $header-background;
+      }
+
+      &:hover {
+        svg {
+          color: $primary;
+        }
+        .d-button-label {
+          font-size: 1em;
+          color: $header-background !important;
+        }
+      }
+
+      .svg-icon.hidden {
+        display: none;
+      }
+    }
+  }
+
+  h1,
+  h2,
+  h3 {
+    text-align: center;
+    color: $secondary_text_color;
+  }
+
+  a {
+    color: $link_text_color;
+  }
+
+  .section-header {
+    padding-bottom: 20px;
+
+    .x-title {
+      padding: 25px 65px;
+      margin: 0;
+    }
+
+    .colored-line {
+      margin: auto;
+      width: 165px;
+      height: 1px;
+      background: $secondary_text_color;
+    }
+
+    .description p {
+      margin: 0;
+      padding: 15px;
+      text-align: center;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: center;
+
+    .single-box {
+      float: left;
+      position: relative;
+      min-height: 1px;
+      padding: 0px 15px 30px;
+      text-align: center;
+
+      .icon {
+        font-size: 70px;
+        color: $secondary_text_color;
+
+        .responsive-img {
+          vertical-align: -0.125em;
+          border-style: none;
+          border-width: 1px;
+          height: 220px;
+        }
+      }
+
+      .banner-list {
+        display: flex;
+        justify-content: center;
+        ul {
+          text-align: left;
+          margin: 0;
+        }
+
+        li {
+          color: var(--primary);
+        }
+      }
+    }
+  }
+}
+
+body {
+  background-color: $header_primary;
+}
+
+//Categories boxes
+.category-list tbody .category {
+  padding: 0;
+  border-width: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.category-list tbody td {
+  display: inline-block;
+  width: 250px;
+  height: 250px;
+  border-left-color: transparent;
+  background-color: $secondary;
+  border-radius: 10px;
+}
+
+.category-list tbody .category {
+  border-left: 6px solid;
+  background-color: none;
+}
+
+///here, 120px is aboute logo/icons size
+.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
+  --height: 120px;
+  height: var(--height);
+  width: calc(var(--height) * var(--aspect-ratio));
+  max-width: 100%;
+  border-color: none;
+  border-top: none;
+}
+
+.logo.aspect-image img, .logo.aspect-image img {
+padding-top: 20px;
+}
+
+.categories-and-latest {
+flex-direction: column;
+}
+
+.category-list {
+thead,
+.topics,
+.subcategories,
+.category-description {
+  display: none;
+  align-items: baseline;
+}
+
+
+.category-list .category-text-title {
+  align-items: baseline;
+  display: inline-flex;
+}
+
+tbody {
+  text-align: center;
+
+  tr {
+    display: inline-block;
+    width: 250px;
+    height: 250px;
+    margin: 0.75em;
+    border-left-color: transparent;
+    border-radius: 10px;
+    border-bottom: none;
+  }
+
+  .category {
+    padding: 0;
+    border-width: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    
+    &:hover {
+      box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10);
+      transform: translateY(-2px) !important;
+    }
+
+    > div {
+      height: 100%;
+    }
+
+    .category-logo {
+      float: unset;
+      margin: 0 auto;
+    }
+
+    .category-name {
+      margin-top: 1.25em;
+    }
+
+    h3 {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      a[href] {
+        flex-direction: column-reverse;
+        width: 250px;
+      }
+    }
+
+    &:after {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      content: "";
+      z-index: 1;
+      box-sizing: border-box;
+      pointer-events: none;
+      opacity: 0.35;
+      border-color: inherit;
+    }
+  }
+}
+}
+
+//fin categories boxes
+
+.banner-box .row .single-box .icon .responsive-img {
+  height: 220px !important;
+}
+
+///// footer background and font //////
+.custom-footer{
+  background: var(--primary-medium) !important;
+}
+
+.custom-footer > ul {
+  color: var(--secondary) !important;
+}
+
+.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
+  color: var(--secondary) !important;
+}
+
+////Color showcase categories/////
+.custom-homepage-columns .col {
+  position: relative;
+  background-color: $secondary;
+}
+
+///// button widget ///////
+.btn-flat .icon {
+  color: $primary-low-mid;
+}
+
+.btn-flat .d-icon {
+  color: $primary-low-mid;
+}
+
+.admin-report .header .breadcrumb .report .info {
+  color: $primary-medium;
+}
+
+/// Page Top & Latest ///
+.navigation-topics .container.list-container{
+  background-color: $secondary;
+}