Allowing more options to style pretix shops (#1585)

* Fix caching issues in SASS compilation

* Allow to set a custom page background color

* Allow to disable round corners

* Support larger header pictures

* Allow to show title despite header

* Move language picker

* FIx widget styles

src/pretix/static/pretixpresale/scss/_calendar.scss

@@ -10,7 +10,7 @@
     display: block;
     background: $brand-primary;
     color: white;
-    border-radius: 5px;
+    border-radius: $border-radius-large;
     padding: 3px 5px;
     margin-top: 3px;
     font-size: 12px;

src/pretix/static/pretixpresale/scss/_event.scss

@@ -153,7 +153,7 @@ section.front-page {
     line-height: 22px;
 }
 @media (max-width: $screen-sm-max) {
-    .page-header h1 small {
+    .page-header h1 small, h1.content-header small {
         display: block;
         white-space: normal;
     }

src/pretix/static/pretixpresale/scss/_iframe.scss

@@ -1,6 +1,13 @@
-.in-iframe .page-header {
+.in-iframe .page-header, .in-iframe .page-header-links {
   display: none;
 }
+body.in-iframe {
+  background: white !important;
+}
+.in-iframe .main-box {
+  margin: auto;
+  border-radius: 0 !important;
+}
 .in-iframe .container {
   padding-top: 10px;
   width: 100%;

src/pretix/static/pretixpresale/scss/_rtl.scss

@@ -47,7 +47,7 @@ html.rtl {
   .fa-arrow-left::before {
     content: $fa-var-arrow-right;
   }
-  .page-header h1 {
+  .page-header h1, h2.content-header {
     direction: rtl;
     * {
       display: inline-block;

src/pretix/static/pretixpresale/scss/_theme.scss

@@ -0,0 +1,95 @@
+@import "../../pretixbase/scss/_contrast.scss";
+
+.page-header {
+  position: relative;
+  padding-bottom: 9px;
+  margin-top: 20px;
+
+  h1 {
+    margin: 0;
+  }
+  h1 small {
+    white-space: nowrap;
+  }
+  .loginbox {
+    padding-top: 15px;
+  }
+  .event-logo, .organizer-logo {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.main-box {
+  background: $main-box-bg;
+}
+
+.page-header-links > div.header-part {
+  padding-top: 15px;
+  padding-bottom: 15px;
+
+  a {
+    color: choose-contrast-color($body-bg, white, $link-color);
+  }
+  a.active, .locales a.active {
+    border-bottom-color: choose-contrast-color($body-bg, white, $link-color) !important;
+  }
+}
+
+.page-header.logo-large {
+  margin: 0 -15px;
+
+  img {
+    width: 100%;
+  }
+
+  .loginbox {
+    text-align: right;
+    padding: 10px;
+    html.rtl & {
+      text-align: left;
+    }
+  }
+
+  border-bottom: none;
+}
+
+h2.content-header {
+  margin-top: 0;
+}
+@media (max-width: $screen-xs-max) {
+  h2.content-header small {
+    display: block;
+  }
+}
+@media (min-width: $screen-sm-min) {
+  .main-box {
+    @if ($body-bg != #FFFFFF) {
+      margin: 20px auto;
+      border-radius: $border-radius-large;
+    }
+  }
+  .page-header-links {
+    padding: 0;
+  }
+  .page-header-links > div.header-part {
+    @if ($body-bg != #FFFFFF) {
+      padding: 10px 0;
+      margin-bottom: -20px;
+    }
+  }
+
+  .page-header.logo-large {
+    img {
+      @if ($body-bg != #FFFFFF) {
+        border-top-right-radius: $border-radius-large;
+        border-top-left-radius: $border-radius-large;
+      }
+    }
+  }
+  .page-header .loginbox {
+    @if ($body-bg != #FFFFFF) {
+      padding-top: 0;
+    }
+  }
+}

src/pretix/static/pretixpresale/scss/main.scss

@@ -4,6 +4,7 @@
 @import "../../datetimepicker/_bootstrap-datetimepicker.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
 
+@import "_theme.scss";
 @import "_event.scss";
 @import "_cart.scss";
 @import "_forms.scss";
@@ -21,24 +22,6 @@ footer {
     padding: 10px 0;
     font-size: 11px;
 }
-.page-header {
-    position: relative;
-    padding-bottom: 9px;
-
-    h1 {
-        margin: 0;
-    }
-    h1 small {
-        white-space: nowrap;
-    }
-    .loginbox {
-        padding-top: 15px;
-    }
-    .event-logo, .organizer-logo {
-        max-width: 100%;
-        height: auto;
-    }
-}
 .js-only {
     display: none;
 }