kratos/inc/codestar-framework/assets/scss/vendor/_themes.scss

/**
 * 02. Themes
 */

/**
 * 02. 01. Theme Dark
 */
.csf-theme-dark{

  .csf-header-inner{
    background-color: #050505;

    h1{
      color: #fff;

      small{
        color: #555;
      }
    }
  }

  .csf-expand-all{
    color: #999;
    background-color: #222;

    &:hover{
      color: #fff;
      background-color: #333;
    }
  }

  .csf-search{

    input{
      color: #fff;
      background-color: #222;
    }

    &:focus{
      background-color: #444;
    }

    &::-webkit-input-placeholder{
      color: #666;
    }
  }

  .csf-nav{

    ul{

      li{

        a{
          color: #999;
          border-color: #2f2f2f;
          background-color: #222;

          &:hover{
            color: #fff;
          }
        }

        .csf-active{
          color: #fff;
          background-color: #111;
        }
      }

      ul{

        li{

          a{
            border-color: #2f2f2f;
            background-color: #191919;
          }

          .csf-active{
            background-color: #101010;
          }
        }

        &:before{
          background-color: rgba(#222, 0.75);
        }
      }
    }

    > ul > li:last-child > a{
      border: none;
    }
  }

  .csf-nav-normal{

    ul{

      li{

        a{
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }

        .csf-active:after{
          content: " ";
          position: absolute;
          right: 0;
          top: 50%;
          height: 0;
          width: 0;
          pointer-events: none;
          border: solid transparent;
          border-right-color: #fff;
          border-width: 4px;
          margin-top: -4px;
        }
      }
    }
  }

  .csf-nav-inline{
    background-color: #222;

    ul{

      li{

        a{
          text-align: center;
          border-right-width: 1px;
          border-right-style: solid;
        }

        .csf-active:after{
          content: " ";
          position: absolute;
          left: 50%;
          bottom: 0;
          height: 0;
          width: 0;
          pointer-events: none;
          border: solid transparent;
          border-bottom-color: #fff;
          border-width: 4px;
          margin-left: -4px;
        }
      }
    }
  }

  .csf-nav-background{
    background-color: #222;
  }

  .csf-footer{
    color: #555;
    background-color: #050505;
  }
}

/**
 * 02. 02. Theme Light
 */
.csf-theme-light{

  .csf-container{
    border: 1px solid #ccd0d4;
    box-shadow: 0 0 15 rgba(0,0,0,0.04);
  }

  .csf-header-inner{
    border-bottom: 1px solid #ccd0d4;
    background-color: #f5f5f5;
    background: linear-gradient(#fefefe, #f5f5f5);

    h1{

      small{
        color: #999;
      }
    }
  }

  .csf-expand-all{
    color: #999;
    background-color: #eee;

    &:hover{
      color: #555;
    }
  }

  .csf-search{

    input{
      color: #555;
      background-color: #eee;

      &::-webkit-input-placeholder{
        color: #999;
      }
    }
  }

  .csf-nav{

    ul{

      li{

        a{
          font-weight: 500;
          color: #444;
          background-color: #f5f5f5;

          &:hover{
            color: #111;
            background-color: #fff;
          }
        }

        .csf-active{
          color: #111;
          background-color: #fff;
        }
      }

      ul{

        li{

          a{
            background-color: #eee;
          }
        }
      }
    }
  }

  .csf-nav-normal{

    > ul{
      margin-right: -1px;
      margin-bottom: -1px;

      li{

        a{
          border-bottom: 1px solid #ccd0d4;
          border-right: 1px solid #ccd0d4;
        }

        .csf-active{
          border-right-color: #fff;
        }
      }
    }
  }

  .csf-nav-inline{
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccd0d4;

    > ul{
      margin-bottom: -1px;

      li{

        a{
          text-align: center;
          border-right: 1px solid #ccd0d4;
          border-bottom: 1px solid #ccd0d4;
        }

        .csf-active{
          border-bottom-color: #fff;
        }
      }

      ul{
        display: none !important
      }
    }

    .csf-arrow:after{
      display: none;
    }
  }

  .csf-nav-background{
    background-color: #f5f5f5;
    border-right: 1px solid #ccd0d4;
  }

  .csf-footer{
    color: #555;
    border-top: 1px solid #ccd0d4;
    background-color: #f5f5f5;
    background: linear-gradient(#fafafa, #f5f5f5);
  }
}