control stylesheet

src/pretix/control/templates/pretixcontrol/event/base.html

@@ -107,7 +107,7 @@
     {% if 'can_view_vouchers' in request.eventpermset %}
         <li>
             <a href="{% url 'control:event.vouchers' organizer=request.event.organizer.slug event=request.event.slug %}"
-                    {% if url_name == "event.voucher" %}class="active"{% endif %}>
+                    {% if "event.voucher" in url_name %}class="active"{% endif %}>
                 <i class="fa fa-tags fa-fw"></i>
                 {% trans "Vouchers" %}
             </a>

src/pretix/control/templates/pretixcontrol/order/index.html

@@ -12,6 +12,22 @@
 {% endblock %}
 {% block content %}
     {% blocktrans asvar s_taxes %}taxes{% endblocktrans %}
+    {% if order.is_expired_by_time %}
+        <form action="{% url "control:event.order.transition" event=request.event.slug organizer=request.event.organizer.slug code=order.code %}"
+                method="post">
+            {% csrf_token %}
+            <div class="alert alert-info">
+                <button name="status" value="e" class="btn btn-default pull-right">{% trans "Expire order" %}</button>
+                {% trans "The payment for this order is overdue, but you have configured not to expire orders automatically. To free quota capacity, you can mark it as expired manually." %}
+                <div class="clearfix"></div>
+            </div>
+        </form>
+    {% endif %}
+
+    <div class="row">
+        <div class="col-xs-12 col-lg-10">
+            <div class="panel items">
+                <div class="panel-body">
                     <h1>
                         {% blocktrans trimmed with code=order.code %}
                             Order details: {{ code }}
@@ -54,27 +70,6 @@
                             </div>
                         </form>
                     {% endif %}
-    {% if order.is_expired_by_time %}
-        <form action="{% url "control:event.order.transition" event=request.event.slug organizer=request.event.organizer.slug code=order.code %}"
-                method="post">
-            {% csrf_token %}
-            <div class="alert alert-info">
-                <button name="status" value="e" class="btn btn-default pull-right">{% trans "Expire order" %}</button>
-                {% trans "The payment for this order is overdue, but you have configured not to expire orders automatically. To free quota capacity, you can mark it as expired manually." %}
-                <div class="clearfix"></div>
-            </div>
-        </form>
-    {% endif %}
-
-    <div class="row">
-        <div class="col-xs-12 col-lg-10">
-            <div class="panel panel-primary items">
-                <div class="panel-heading">
-                    <h3 class="panel-title">
-                        {% trans "Order details" %}
-                    </h3>
-                </div>
-                <div class="panel-body">
                     <dl class="dl-horizontal">
                         <dt>{% trans "Order code" %}</dt>
                         <dd>{{ order.code }}</dd>

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

@@ -1,6 +1,26 @@
 .sidebar-nav li > a > .fa {
   color: $navbar-inverse-bg;
 }
+.sidebar-nav {
+  padding-top: 10px;
+}
+.sidebar-nav li > a {
+  padding: 7px 15px;
+}
+.sidebar-nav li li a {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.sidebar-nav li ul {
+  margin-bottom: 5px;
+}
+.sidebar-nav li.active > a, .sidebar-nav li a.active {
+  font-weight: bold;
+}
+
+.panel h1, .panel h2 {
+  margin-top: 0;
+}
 
 .btn {
   border-width: 0px;
@@ -69,6 +89,14 @@
 .alert-primary, .alert-warning, .alert-info, .alert-success, .alert-danger {
   color: #3b3b3b;
 }
+
+.panel {
+  box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+}
+.panel-default > .panel-heading, .panel-default > .panel-footer {
+  background: white;
+}
+
 .panel-danger > .panel-heading, .panel-success > .panel-heading, .panel-default > .panel-heading, .panel-info > .panel-heading, .panel-warning > .panel-heading {
   color: #000000;
 }

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

@@ -13,6 +13,8 @@ $gray-light: lighten(#000, 60%);
 $gray-lighter: lighten(#000, 93.5%);
 $gray-lightest: lighten(#000, 97.25%);
 
+$page-background: #fbf7fc;
+
 $font-family-sans-serif:  "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $text-color: #222222;
 $text-muted: #999999;
@@ -23,6 +25,10 @@ $brand-info: #5f9cd4;
 $brand-warning: #ffb419;
 $brand-danger: #d36060;
 
+$font-size-base:          14px;
+$font-size-h1:            floor(($font-size-base * 2.15));
+$font-size-h2:            floor(($font-size-base * 2.0));
+
 $btn-default-border: #CCCCCC;
 
 $border-radius-base:        3px !default;
@@ -39,6 +45,11 @@ $navbar-inverse-link-color: white;
 $navbar-inverse-link-hover-color: $gray-lighter;
 $navbar-inverse-brand-hover-color: $gray-lighter;
 $navbar-inverse-color: white;
+$navbar-default-bg: $page-background;
+
+$nav-link-hover-bg: $page-background;
+$navbar-default-link-active-bg: $page-background;
+$navbar-default-link-hover-bg: $page-background;
 
 $state-success-bg:               white;
 $state-success-border:           $brand-success;

src/pretix/static/pretixcontrol/scss/_dashboard.scss

@@ -10,9 +10,12 @@
   flex: 1 0 auto;
   align-self: stretch;
   padding: 15px 5px;
-  border: 5px solid white;
   min-height: 160px;
-  background: #F8F8F8;
+  margin: 5px;
+
+  background: white;
+  box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+  border-radius: $panel-border-radius;
 }
 
 .dashboard .widget-container.widget-full {
@@ -110,6 +113,7 @@
     }
     a.status-warning {
       background: $brand-warning;
+      color: black;
     }
     a.status-default {
       background: $gray-light;

src/pretix/static/pretixcontrol/scss/_sb-admin-2.scss

@@ -7,7 +7,7 @@ Modified by Raphael Michel
 // Global Styles
 
 body {
-    background-color: $gray-lightest;
+    background-color: $page-background;
 }
 
 // Wrappers
@@ -17,17 +17,15 @@ body {
 }
 
 #page-wrapper {
-    padding: 0 15px;
+    padding: 20px 15px 0;
     min-height: 568px;
-    background-color: white;
 }
 
 @media(min-width:768px) {
     #page-wrapper {
         position: inherit;
-        margin: 0 0 0 250px;
+        margin: 0 0 0 220px;
-        padding: 0 30px;
+        padding: 20px 30px 0;
-        border-left: 1px solid darken($gray-lightest, 6.5%);
     }
 }
 
@@ -95,7 +93,7 @@ body {
 
 // --Sidebar
 
-.sidebar {
+.sidebar { li
     .sidebar-nav.navbar-collapse {
         padding-left: 0;
         padding-right: 0;
@@ -107,13 +105,7 @@ body {
 }
 
 .sidebar ul li {
-    border-bottom: 1px solid darken($gray-lightest, 6.5%);
     position: relative;
-    a {
-        &.active {
-            background-color: $gray-lighter;
-        }
-    }
     a.arrow {
         position: absolute;
         right: 0;