engelsystem/resources/assets/themes/theme7.scss

// 35c3 dark (2018)

// Variables
// --------------------------------------------------
@import "dark";

$gray-darker:  #000;
$gray-dark:    #000;
$gray:         #4d4d4c; // BEBOOT
$gray-light:   $gray;
$gray-lighter: lighten($gray, 15%);

$brand-primary: #0084b0; // FRESH
$primary:       #0084b0;
$brand-success: #00a356; // HOPE
$success:       #00a356; // HOPE
$brand-info:    $brand-primary;
$info:          $brand-primary;
$brand-warning: #f9b000; // GLINT
$warning:       #f9b000; // GLINT
$brand-danger:  #e40429; // BEAT
$danger:        #e40429; // BEAT


//== changed Scaffolding

$text-color: $gray-lighter;

$body-bg:    #000;
$body-color: $text-color;

$link-color:       $brand-primary;
$link-hover-color: lighten($link-color, 10%);


//== changed Typography

$headings-color: $brand-primary;


//== changed Tables

$table-bg:           $gray-darker;
$table-bg-accent:    #111;
$table-border-color: $gray;


// component

$component-active-color: #fff;
$component-active-bg:    $primary;


//== changed Buttons

$btn-color:      $link-color;
$btn-default-bg: $gray-darker;

$btn-default-border: $brand-primary;

$btn-primary-color:  $gray-darker;
$btn-primary-border: $brand-primary;

$btn-success-border: darken($btn-default-bg, 10%);

$btn-info-color:  $gray-darker;
$btn-info-border: darken($btn-default-bg, 10%);

$btn-warning-color:  $gray-darker;
$btn-warning-border: darken($btn-default-bg, 9%);

$btn-danger-color:  $gray-darker;
$btn-danger-border: darken($btn-default-bg, 10%);


//== changed Forms

$input-bg:             $gray-darker;
$input-color:          $link-color;
$input-border-color:   $brand-primary;
$input-group-addon-bg: $gray-lighter;


//== changed Dropdowns

$dropdown-border:                $brand-primary;
$dropdown-fallback-border:       $brand-primary;
$dropdown-divider-bg:            $dropdown-border;
$dropdown-link-color:            $link-color;
$dropdown-link-hover-color:      $link-hover-color;
$dropdown-bg:                    $gray-darker;
$dropdown-link-hover-bg:         $dropdown-bg;


//== changed Navbar

$navbar-default-border:             $brand-primary;
$navbar-default-link-hover-color:   $link-hover-color;
$navbar-default-link-active-color:  $brand-primary;
$navbar-default-brand-color:        $brand-primary;
$navbar-default-brand-hover-color:  lighten($brand-primary, 10%);


//== changed Pagination

$pagination-color:         $brand-primary;
$pagination-border:        $brand-primary;

$pagination-hover-color:   $gray-darker;
$pagination-hover-bg:      $component-active-bg;
$pagination-hover-border:  $pagination-border;

$pagination-active-color:  $pagination-hover-color;
$pagination-active-bg:     $pagination-hover-bg;
$pagination-active-border: $pagination-hover-border;


//== changed Form states and alerts

$state-success-text:   $gray-darker;
$state-success-bg:     $brand-success;
$state-success-border: darken($state-success-bg, 5%);

$state-info-text:      $gray-darker;
$state-info-bg:        $brand-info;
$state-info-border:    darken($state-info-bg, 7%);

$state-warning-text:   $gray-darker;
$state-warning-bg:     $brand-warning;
$state-warning-border: darken($state-warning-bg, 3%);

$state-danger-text:    $gray-darker;
$state-danger-bg:      $brand-danger;
$state-danger-border:  darken($state-danger-bg, 3%);


//== changed Labels

$label-color:            $gray-darker;
$label-link-hover-color: $brand-primary;


//== changed Type

$headings-small-color:        $gray-light;

$alert-bg-scale: 0%;
$alert-border-scale: 0;
$alert-color-scale: 0;

@import "cyborg_variables.scss";
@import "cyborg_styles.scss";

.messages .text-danger {
  color: $gray-darker;
}

.messages .text-info {
  color: $gray-darker;
}

.messages .caret {
  color: $gray-darker;
}


// Bootswatch
// -----------------------------------------------------
// changed Typography =================================================================

.text-primary,
.text-primary:hover,
a.text-primary:hover {
  color: $brand-primary;
}

.text-success,
.text-success:hover,
a.text-success:hover {
  color: $brand-success;
}

.text-danger,
.text-danger:hover,
a.text-danger:hover {
  color: $brand-danger;
}

.text-warning,
.text-warning:hover,
a.text-warning:hover {
  color: $brand-warning;
}

.text-info,
.text-info:hover,
a.text-info:hover {
  color: $brand-info;
}

// changed Tables =====================================================================

table,
.table {
  color: $text-color;

  a:not(.btn) {
    color: $brand-primary;
    text-decoration: underline;
  }

  .text-muted {
    color: $text-muted;
  }
}

// changed Forms ======================================================================

.input-group-addon {
  background-color: $btn-default-bg;
}

// changed Indicators =================================================================

.alert {

  .h1, .h2, .h3, .h4, .h5, .h6,
  h1, h2, h3, h4, h5, h6 {
    color: #fff;
  }

  .alert-link,
  a {
    color: $alert-warning-text;
    text-decoration: underline;
  }

  .close {
    text-decoration: none;
  }
}

// changed Containers =================================================================

.btn-primary, .card-info .card-heading {
  background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
}

.btn-secondary {
  color: $primary;
  background-color: #000;
  border-color: $primary;

  &:hover {
    color: $primary;
    background-color: #000;
    border-color: darken($primary, 10%);
  }
}

.bg-warning {
  color: #000;
}

// changed code tag
code {
  background-color: $state-info-bg;
  color: $state-info-text;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  code {
    color: $headings-color;
  }

  &.bg-primary,
  &.bg-secondary,
  &.bg-success,
  &.bg-danger,
  &.bg-info {
      color: #fff;
  }
}