Create Dies theme (#840)

* create dies theme scss

* made logo path and width variables

* fixed linting

* theming done

Author: Ellen-Wittingen

app/adapters/application.js

@@ -15,6 +15,7 @@ export default class ApplicationAdapter extends JSONAPIAdapter {
     let headers = {};
     if (this.session.isAuthenticated) {
       headers.Authorization = `Bearer ${this.session.data.authenticated.access_token}`;
+      document.documentElement.classList.add('authenticated');
     }
 
     return headers;

app/styles/app.scss

@@ -74,3 +74,6 @@
 // Import package style
 @import 'ember-power-select/themes/bootstrap';
 @import 'ember-power-select';
+
+// Dies theme, comment out when not in the Dies-week
+@import 'dies-theme';

app/styles/dies-theme.scss

@@ -0,0 +1,130 @@
+// stylelint-disable selector-no-qualifying-type
+html.authenticated {
+  $primary-color: #840400;
+  $link-color: #840400;
+  $button-fg-color: #efead6;
+  $button-bg-color: #840400;
+  $app-bg-color: #efead6;
+  $sidebar-fg-color: #efead6;
+  $sidebar-bg-color: #840400;
+  $navbar-fg-color: #efead6;
+  $navbar-bg-color: #0f1c3f;
+  $navbar-button-fg-color: #efead6;
+  $navbar-button-bg-color: #840400;
+  $dies-logo-url: '/images/dies_logo.png';
+  $dies-logo-width: 5rem;
+
+  .app {
+    background-color: $app-bg-color;
+  }
+
+  .header-nav {
+    background-color: $navbar-bg-color;
+    color: $navbar-fg-color;
+
+    .breadcrumb-item::before {
+      color: $navbar-fg-color;
+    }
+
+    .header-logo {
+      background-image: url($dies-logo-url);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      width: $dies-logo-width;
+    }
+
+    .btn-primary {
+      @include button-variant(
+        $navbar-button-bg-color,
+        $navbar-button-bg-color,
+      );
+
+      color: $navbar-button-fg-color;
+    }
+  }
+
+  .menu-sidebar {
+    background-color: $sidebar-bg-color;
+
+    .menu-sidebar-item {
+      color: $sidebar-fg-color;
+
+      &.sidebar-item-minor {
+        color: shade-color($sidebar-fg-color, 40%);  /* stylelint-disable-line function-no-unknown */
+      }
+    }
+  }
+
+  .btn-primary {
+    @include button-variant(
+      $button-bg-color,
+      $button-bg-color,
+    );
+
+    color: $button-fg-color;
+  }
+
+  p a {
+    color: $link-color;
+  }
+
+  a:hover, 
+  a .list-group-item:hover, 
+  .link-highlight:hover {
+    color: shade-color($link-color, 30%);  /* stylelint-disable-line function-no-unknown */
+  }
+
+  .form-check-input { 
+    &:checked {
+      border-color: $button-bg-color;
+      background-color: $button-bg-color;
+    }
+
+    &:focus {
+      border-color: tint-color($button-bg-color, 50%);  /* stylelint-disable-line function-no-unknown */
+      box-shadow: 0 0 0 0.25rem rgba($button-bg-color, 0.25);
+    }
+  }
+
+  .text-primary {
+    color: $primary-color !important;
+  }
+
+  .bg-primary {
+    background-color: $primary-color !important;
+  }
+
+  .form-control:focus {
+    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
+  }
+
+  .page-actions-buttons {
+    // stylelint-disable selector-max-compound-selectors
+    .input-group-text, 
+    .filter-bar-filter, 
+    .input-group button {
+      background-color: tint-color($navbar-bg-color, 10%);  /* stylelint-disable-line function-no-unknown */
+      color: $navbar-fg-color;
+    }
+
+    .filter-bar-filter::placeholder {
+      opacity: 1; /* Firefox */
+      color: shade-color($navbar-fg-color, 30%); /* stylelint-disable-line function-no-unknown */
+    }
+
+    .form-control:focus {
+      box-shadow: 0 0 0 0.25rem tint-color($navbar-bg-color, 15%); /* stylelint-disable-line function-no-unknown */
+    }
+  }
+
+  .new-forum-posts {
+    background-color: $primary-color;
+  }
+
+  .advertisement-tool {
+    background: $white;
+  }
+
+}
+// stylelint-enable selector-no-qualifying-type