engelsystem/resources/assets/themes/theme7.scss

// 35c3 dark (2018)

// Variables
// --------------------------------------------------

$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

$body-bg:               #000;

$text-color:            $gray-lighter;

$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, 10%);

$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 Panels

$panel-default-border:        $brand-primary;
$panel-default-heading-bg:    $gray-darker;

$panel-primary-text:          $gray-darker;


//== changed Badges

$badge-color:                 #fff;


//== changed Type

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

@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, .panel-info .panel-heading {
  background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
}

.label-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;
  }
}