New color scheme and UI design

src/pretix/static/pretixbase/scss/_theme.scss

@@ -0,0 +1,135 @@
+.sidebar-nav li > a > .fa {
+  color: $navbar-inverse-bg;
+}
+
+.btn {
+  border-width: 0px;
+}
+
+.btn-default {
+  box-shadow: 0px 0px 0px 1px #cccccc inset;
+  box-sizing: border-box;
+}
+
+.btn-default:hover, .btn-default:focus {
+  box-shadow: 0px 0px 0px 1px #cccccc inset, inset 0 1px 3px 0 #BFBFBF;
+  background: $btn-default-bg;
+}
+
+.btn-default:active, .btn-default:active:hover, .btn-default:active:focus {
+  box-shadow: 0px 0px 0px 1px #cccccc inset, inset 0 1px 8px 0 #BFBFBF;
+  background: $btn-default-bg;
+  outline: 0;
+}
+
+.btn-primary:hover, .btn-primary:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-primary, 25%);
+  background: $btn-primary-bg;
+}
+
+.btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-primary, 25%);
+  background: $btn-primary-bg;
+  outline: 0;
+}
+
+.btn-success:hover, .btn-success:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-success, 25%);
+  background: $btn-success-bg;
+}
+
+.btn-success:active, .btn-success:active:hover, .btn-success:active:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-success, 25%);
+  background: $btn-success-bg;
+  outline: 0;
+}
+
+.btn-warning:hover, .btn-warning:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-warning, 25%);
+  background: $btn-warning-bg;
+}
+
+.btn-warning:active, .btn-warning:active:hover, .btn-warning:active:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-warning, 25%);
+  background: $btn-warning-bg;
+  outline: 0;
+}
+
+.btn-danger:hover, .btn-danger:focus {
+  box-shadow: inset 0 1px 8px 0 shade($brand-danger, 25%);
+  background: $btn-danger-bg;
+}
+
+.btn-danger:active, .btn-danger:active:hover, .btn-danger:active:focus {
+  box-shadow: inset 0 1px 3px 0 shade($brand-danger, 25%);
+  background: $btn-danger-bg;
+  outline: 0;
+}
+
+.alert-primary, .alert-warning, .alert-info, .alert-success, .alert-danger {
+  color: #3b3b3b;
+}
+.panel-danger > .panel-heading, .panel-success > .panel-heading, .panel-default > .panel-heading, .panel-info > .panel-heading, .panel-warning > .panel-heading {
+  color: #000000;
+}
+.panel-primary .panel-heading {
+  color: white;
+}
+
+
+.alert {
+  text-align: left;
+}
+.alert-legal {
+  border-color: $state-info-border;
+}
+.alert-success, .alert-danger, .alert-info, .alert-warning, .alert-legal {
+  position: relative;
+  padding-left: 65px;
+
+  &::before {
+    color: white;
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    width: 50px;
+    padding-top: 13px;
+    text-align: center;
+    height: 100%;
+    font: normal normal normal 14px FontAwesome;
+    font-size: 24px;
+    text-rendering: auto; // optimizelegibility throws things off #1094
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.alert-success::before {
+  background: $state-success-border;
+  content: "\f00c";
+}
+.alert-info::before {
+  background: $state-info-border;
+  content: "\f129";
+}
+.alert-warning::before {
+  background: $state-warning-border;
+  content: "\f071";
+  font-size: 22px;
+  padding-top: 14px;
+}
+.alert-legal::before {
+  background: $state-info-border;
+  content: "\f0e3";
+}
+.alert-danger::before {
+  background: $state-danger-border;
+  content: "\f071";
+  font-size: 22px;
+  padding-top: 14px;
+}
+
+.progress-bar {
+  box-shadow: none;
+  -webkit-box-shadow: none;
+}

src/pretix/static/pretixbase/scss/_variables.scss

@@ -0,0 +1,58 @@
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+$gray-darker: lighten(#000, 13.5%);
+$gray-dark: lighten(#000, 20%);
+$gray: lighten(#000, 33.5%);
+$gray-light: lighten(#000, 60%);
+$gray-lighter: lighten(#000, 93.5%);
+$gray-lightest: lighten(#000, 97.25%);
+
+$font-family-sans-serif:  "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$text-color: #222222;
+$text-muted: #999999;
+
+$brand-primary: #7f5a91 !default;
+$brand-success: #50a167;
+$brand-info: #5f9cd4;
+$brand-warning: #ffb419;
+$brand-danger: #d36060;
+
+$btn-default-border: #CCCCCC;
+
+$border-radius-base:        3px !default;
+$border-radius-large:       4px !default;
+$border-radius-small:       2px !default;
+
+$state-success-text: $brand-success;
+$state-info-text: $brand-info;
+$state-warning-text: $brand-warning;
+$state-danger-text: $brand-danger;
+
+$navbar-inverse-bg: #3b1c4a;
+$navbar-inverse-link-color: white;
+$navbar-inverse-link-hover-color: $gray-lighter;
+$navbar-inverse-brand-hover-color: $gray-lighter;
+$navbar-inverse-color: white;
+
+$state-success-bg:               white;
+$state-success-border:           $brand-success;
+$state-info-bg:                  white;
+$state-info-border:              $brand-info;
+$state-warning-bg:               white;
+$state-warning-border:           $brand-warning;
+$state-danger-bg:                white;
+$state-danger-border:            $brand-danger;
+$panel-success-border:               tint($brand-success, 50%);
+$panel-success-heading-bg:               tint($brand-success, 50%);
+$panel-danger-border:               tint($brand-danger, 50%);
+$panel-danger-heading-bg:               tint($brand-danger, 50%);
+$panel-warning-border:               tint($brand-warning, 50%);
+$panel-warning-heading-bg:               tint($brand-warning, 50%);
+$panel-default-border: #e5e5e5;
+$panel-default-heading-bg: #e5e5e5;

src/pretix/static/pretixbase/scss/cachedfiles.scss

@@ -1,6 +1,7 @@
+@import "_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "_theme.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
-@import "colors.scss";
 
 
 body {

src/pretix/static/pretixbase/scss/error.scss

@@ -1,5 +1,6 @@
-@import "colors.scss";
+@import "_variables.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "_theme.scss";
 @import "../../fontawesome/scss/font-awesome.scss";