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

.navbar-brand {
  strong {
    color: $brand-primary;
  }
}

.navbar-dark .navbar-nav .nav-link {
  color: $brand-primary;
}

// 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;
  }
}