mirror of
https://github.com/pretix/pretix.git
synced 2026-05-05 15:14:04 +00:00
A11y improvements (#2081)
Co-authored-by: Raphael Michel <michel@rami.io> Co-authored-by: Raphael Michel <mail@raphaelmichel.de>
This commit is contained in:
Richard Schreiber
committed by
GitHub
GitHub
parent
cc13ca1c3f
commit
3dcfa57b70
@@ -194,7 +194,7 @@ body:after {
|
||||
height: 30px;
|
||||
background: url(static('lightbox/images/close.png')) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
border: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
/*
|
||||
|
||||
WARNING! CUSTOMIZED!
|
||||
|
||||
Added improvements for better A11y-support,
|
||||
i.e. role, aria-labelledby, aria-modal and <button>
|
||||
|
||||
*/
|
||||
|
||||
/*!
|
||||
* Lightbox v2.8.1
|
||||
* by Lokesh Dhakar
|
||||
@@ -78,7 +87,7 @@
|
||||
// Attach event handlers to the new DOM elements. click click click
|
||||
Lightbox.prototype.build = function() {
|
||||
var self = this;
|
||||
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
|
||||
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox" role="dialog" aria-labelledby="lightboxLabel" aria-modal="true"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details" id="lightboxLabel"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><button aria-label="'+gettext("close")+'" class="lb-close"></button></div></div></div></div>').appendTo($('body'));
|
||||
|
||||
// Cache jQuery objects
|
||||
this.$lightbox = $('#lightbox');
|
||||
@@ -195,6 +204,7 @@
|
||||
left: left + 'px'
|
||||
}).fadeIn(this.options.fadeDuration);
|
||||
|
||||
this.$lightbox.find(".lb-close").focus();
|
||||
this.changeImage(imageNumber);
|
||||
};
|
||||
|
||||
@@ -359,6 +369,7 @@
|
||||
// Thanks Nate Wright for the fix. @https://github.com/NateWr
|
||||
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
|
||||
this.album[this.currentImageIndex].title !== '') {
|
||||
this.$lightbox.find('.lb-image').attr("alt", this.album[this.currentImageIndex].title);
|
||||
this.$lightbox.find('.lb-caption')
|
||||
.html(this.album[this.currentImageIndex].title)
|
||||
.fadeIn('fast')
|
||||
|
||||
20
src/pretix/static/lightbox/js/lightbox.min.js
vendored
20
src/pretix/static/lightbox/js/lightbox.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -244,13 +244,15 @@ $(function () {
|
||||
var waitingDialog = {
|
||||
show: function (message) {
|
||||
"use strict";
|
||||
$("#loadingmodal").find("h3").html(message);
|
||||
$("#loadingmodal h3").html(message);
|
||||
$("#loadingmodal .progress").hide();
|
||||
$("body").addClass("loading");
|
||||
$("#loadingmodal").removeAttr("hidden");
|
||||
},
|
||||
hide: function () {
|
||||
"use strict";
|
||||
$("body").removeClass("loading");
|
||||
$("#loadingmodal").attr("hidden", true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
setup_collapsible_details = function (el) {
|
||||
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
|
||||
el.find("details summary, details summary a[data-toggle=variations]").click(function (e) {
|
||||
if (this.tagName !== "A" && $(e.target).closest("a, button").length > 0) {
|
||||
el.find("details summary").click(function (e) {
|
||||
if (this.tagName !== "A" && $(e.target).closest("a").length > 0) {
|
||||
return true;
|
||||
}
|
||||
var $details = $(this).closest("details");
|
||||
@@ -57,6 +57,36 @@ setup_collapsible_details = function (el) {
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
el.find("article button[data-toggle=variations]").click(function (e) {
|
||||
var $button = $(this);
|
||||
var $details = $button.closest("article");
|
||||
var $detailsNotSummary = $(".variations", $details);
|
||||
var isOpen = !$detailsNotSummary.prop("hidden");
|
||||
if ($detailsNotSummary.is(':animated')) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
var altLabel = $button.attr("data-label-alt");
|
||||
$button.attr("data-label-alt", $button.text());
|
||||
$button.text(altLabel);
|
||||
$button.attr("aria-expanded", !isOpen);
|
||||
|
||||
if (isOpen) {
|
||||
$details.removeClass("details-open");
|
||||
$detailsNotSummary.stop().show().slideUp(500, function () {
|
||||
$detailsNotSummary.prop("hidden", true);
|
||||
});
|
||||
} else {
|
||||
$detailsNotSummary.prop("hidden", false).stop().hide();
|
||||
$details.addClass("details-open");
|
||||
$detailsNotSummary.slideDown();
|
||||
}
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
el.find(".variations-collapsed").prop("hidden", true);
|
||||
};
|
||||
|
||||
$(function () {
|
||||
|
||||
@@ -100,9 +100,8 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
background: transparent;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.alert-primary, .alert-warning, .alert-info, .alert-success, .alert-danger {
|
||||
color: #3b3b3b;
|
||||
.panel-heading {
|
||||
border-radius: 0;
|
||||
}
|
||||
.panel-danger > .panel-heading, .panel-success > .panel-heading, .panel-default > .panel-heading, .panel-info > .panel-heading, .panel-warning > .panel-heading {
|
||||
color: #000000;
|
||||
@@ -122,7 +121,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
text-align: left;
|
||||
}
|
||||
.alert-legal {
|
||||
border-color: $state-info-border;
|
||||
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
|
||||
}
|
||||
.alert-success, .alert-danger, .alert-info, .alert-warning, .alert-legal {
|
||||
position: relative;
|
||||
@@ -166,6 +165,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
.alert-primary::before {
|
||||
background: $brand-primary !important;
|
||||
outline-color: $brand-primary;
|
||||
}
|
||||
.alert-primary {
|
||||
border-color: $brand-primary !important;
|
||||
|
||||
@@ -44,14 +44,18 @@ $navbar-inverse-link-hover-color: $gray-lighter;
|
||||
$navbar-inverse-brand-hover-color: $gray-lighter;
|
||||
$navbar-inverse-color: white;
|
||||
|
||||
$state-success-bg: white !default;
|
||||
$state-success-bg: lighten($brand-success, 48%) !default;
|
||||
$state-success-border: $brand-success;
|
||||
$state-info-bg: white !default;
|
||||
$state-success-text: darken($brand-success, 10%);
|
||||
$state-info-bg: lighten($brand-info, 33%) !default;
|
||||
$state-info-border: $brand-info;
|
||||
$state-warning-bg: white !default;
|
||||
$state-info-text: darken($brand-info, 20%);
|
||||
$state-warning-bg: lighten($brand-warning, 41%) !default;
|
||||
$state-warning-border: $brand-warning;
|
||||
$state-danger-bg: white !default;
|
||||
$state-danger-border: $brand-danger;
|
||||
$state-warning-text: darken($brand-warning, 25%);
|
||||
$state-danger-bg: lighten($brand-danger, 43%) !default;
|
||||
$state-danger-border: $brand-danger;
|
||||
$state-danger-text: darken($brand-danger, 5%);
|
||||
$panel-success-border: tint($brand-success, 50%);
|
||||
$panel-success-heading-bg: tint($brand-success, 50%);
|
||||
$panel-danger-border: tint($brand-danger, 50%);
|
||||
|
||||
@@ -35,16 +35,20 @@ var cart = {
|
||||
var now = cart._get_now();
|
||||
var diff_minutes = Math.floor(cart._deadline.diff(now) / 1000 / 60);
|
||||
var diff_seconds = Math.floor(cart._deadline.diff(now) / 1000 % 60);
|
||||
|
||||
if (diff_minutes < 2 || diff_minutes == 5) $("#cart-deadline").get(0).setAttribute("aria-live", "polite");
|
||||
else $("#cart-deadline").get(0).removeAttribute("aria-live");
|
||||
|
||||
if (diff_minutes < 0) {
|
||||
$("#cart-deadline").text(gettext("The items in your cart are no longer reserved for you."));
|
||||
$("#cart-deadline").text(gettext("The items in your cart are no longer reserved for you. You can still complete your order as long as they’re available."));
|
||||
$("#cart-deadline-short").text(
|
||||
gettext("Cart expired")
|
||||
);
|
||||
window.clearInterval(cart._deadline_interval);
|
||||
} else {
|
||||
$("#cart-deadline").text(ngettext(
|
||||
"The items in your cart are reserved for you for one minute.",
|
||||
"The items in your cart are reserved for you for {num} minutes.",
|
||||
"The items in your cart are reserved for you for one minute.",
|
||||
"The items in your cart are reserved for you for {num} minutes.",
|
||||
diff_minutes
|
||||
).replace(/\{num\}/g, diff_minutes));
|
||||
$("#cart-deadline-short").text(
|
||||
@@ -71,13 +75,17 @@ $(function () {
|
||||
cart.init();
|
||||
}
|
||||
|
||||
$(".apply-voucher").hide();
|
||||
$(".apply-voucher-toggle").click(function (e) {
|
||||
$(".apply-voucher-toggle").hide();
|
||||
$(".apply-voucher").show();
|
||||
$(".apply-voucher input[type=text]").first().focus();
|
||||
e.preventDefault();
|
||||
return true;
|
||||
$(".toggle-container").each(function() {
|
||||
var summary = $(".toggle-summary", this);
|
||||
var content = $("> :not(.toggle-summary)", this);
|
||||
var toggle = summary.find(".toggle").on("click", function(e) {
|
||||
this.ariaExpanded = !this.ariaExpanded;
|
||||
if (this.classList.contains("toggle-remove")) summary.attr("hidden", true);
|
||||
content.show().find(":input:visible").first().focus();
|
||||
});
|
||||
if (toggle.attr("aria-expanded")) {
|
||||
content.hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(".cart-icon-details.collapse-lines").each(function () {
|
||||
|
||||
@@ -119,7 +119,7 @@ var form_handlers = function (el) {
|
||||
width: $(this).attr("data-size") ? parseInt($(this).attr("data-size")) : 256,
|
||||
height: $(this).attr("data-size") ? parseInt($(this).attr("data-size")) : 256,
|
||||
}
|
||||
);
|
||||
).find("canvas").attr("role", "img").attr("aria-label", this.getAttribute("data-desc"));
|
||||
});
|
||||
|
||||
el.find("input[data-exclusive-prefix]").each(function () {
|
||||
@@ -180,6 +180,11 @@ $(function () {
|
||||
|
||||
$("body").removeClass("nojs");
|
||||
|
||||
$(".accordion-radio").click(function() {
|
||||
var $input = $("input", this);
|
||||
if (!$input.prop("checked")) $input.prop('checked', true).trigger("change");
|
||||
});
|
||||
|
||||
$("input[data-toggle=radiocollapse]").change(function () {
|
||||
$($(this).attr("data-parent")).find(".collapse.in").collapse('hide');
|
||||
$($(this).attr("data-target")).collapse('show');
|
||||
@@ -191,6 +196,27 @@ $(function () {
|
||||
$(".has-error, .alert-danger").each(function () {
|
||||
$(this).closest("div.panel-collapse").collapse("show");
|
||||
});
|
||||
$(".has-error").first().each(function(){
|
||||
if ($(this).is(':input')) this.focus();
|
||||
else $(":input", this).get(0).focus();
|
||||
});
|
||||
$(".alert-danger").first().each(function() {
|
||||
var content = $("<ul></ul>").click(function(e) {
|
||||
var input = $(e.target.hash).get(0);
|
||||
if (input) input.focus();
|
||||
input.scrollIntoView({block: "center"});
|
||||
e.preventDefault();
|
||||
});
|
||||
$(".has-error").each(function() {
|
||||
var target = target = $(":input", this);
|
||||
var desc = $("#" + target.attr("aria-describedby").split(' ', 1)[0]);
|
||||
// multi-input fields have a role=group with aria-labelledby
|
||||
var label = this.hasAttribute("aria-labelledby") ? $("#" + this.getAttribute("aria-labelledby")) : $("[for="+target.attr("id")+"]");
|
||||
|
||||
content.append("<li><a href='#" + target.attr("id") + "'>" + label.get(0).childNodes[0].nodeValue + "</a>: "+desc.text()+"</li>");
|
||||
});
|
||||
$(this).append(content);
|
||||
});
|
||||
|
||||
$("#voucher-box").hide();
|
||||
$("#voucher-toggle").show();
|
||||
@@ -280,9 +306,9 @@ $(function () {
|
||||
// Subevent choice
|
||||
if ($(".subevent-toggle").length) {
|
||||
$(".subevent-list").hide();
|
||||
$(".subevent-toggle").css("display", "block").click(function () {
|
||||
$(".subevent-toggle").show().click(function () {
|
||||
$(".subevent-list").slideToggle(300);
|
||||
$(".subevent-toggle").slideToggle(300)
|
||||
$(this).slideToggle(300).attr("aria-expanded", true);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -320,7 +346,7 @@ $(function () {
|
||||
|
||||
$(".table-calendar td.has-events").click(function () {
|
||||
var $tr = $(this).closest(".table-calendar").find(".selected-day");
|
||||
$tr.find("td").html($(this).find(".events").html());
|
||||
$tr.find("td").html($(this).find(".events").clone());
|
||||
$tr.find("td").prepend($("<h3>").text($(this).attr("data-date")));
|
||||
$tr.removeClass("hidden");
|
||||
});
|
||||
|
||||
@@ -3,57 +3,82 @@
|
||||
width: 14.29%;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.events {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
a.event {
|
||||
display: block;
|
||||
background: $brand-primary;
|
||||
color: white;
|
||||
border-radius: $border-radius-large;
|
||||
background: lighten($brand-primary, 48%);
|
||||
color: $brand-primary;
|
||||
border-radius: $border-radius-base;
|
||||
border-style: solid;
|
||||
border-color: lighten($brand-primary, 30%);
|
||||
border-width: 1px 1px 1px 12px;
|
||||
border-left-color: inherit;
|
||||
|
||||
padding: 3px 5px;
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
text-decoration: none;
|
||||
|
||||
&.continued {
|
||||
background: #888;
|
||||
opacity: 0.8;
|
||||
&:hover {
|
||||
background: lighten($brand-primary, 50%);
|
||||
border-color: $brand-primary;
|
||||
}
|
||||
&:focus {
|
||||
outline-color: inherit;
|
||||
}
|
||||
|
||||
&.continued, &.over {
|
||||
background: lighten(#767676, 48%);
|
||||
border-color: lighten(#767676, 30%);
|
||||
border-left-color: lighten(#767676, 30%);
|
||||
color: #767676;
|
||||
&:hover {
|
||||
background: darken(#888, 15%);
|
||||
opacity: 1;
|
||||
background: lighten(#767676, 50%);
|
||||
border-color: lighten(#767676, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.soon {
|
||||
opacity: 0.8;
|
||||
background: lighten($brand-primary, 53%);
|
||||
border-color: lighten($brand-primary, 40%);
|
||||
border-left-color: lighten($brand-primary, 20%);
|
||||
color: lighten($brand-primary, 5%);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.over {
|
||||
opacity: 0.8;
|
||||
background: #888;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: darken(#888, 15%);
|
||||
background: lighten($brand-primary, 55%);
|
||||
border-color: lighten($brand-primary, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&.available, {
|
||||
background: $brand-success;
|
||||
background: lighten($brand-success, 48%);
|
||||
border-color: lighten($brand-success, 30%);
|
||||
border-left-color: $brand-success;
|
||||
color: darken($brand-success, 12%);
|
||||
|
||||
&:hover {
|
||||
background: darken($brand-success, 15%);
|
||||
background: lighten($brand-success, 50%);
|
||||
border-color: $brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.reserved, &.soldout, {
|
||||
background: $brand-danger;
|
||||
background: lighten($brand-danger, 43%);
|
||||
border-color: lighten($brand-danger, 30%);
|
||||
border-left-color: lighten($brand-danger, 30%);
|
||||
color: darken($brand-danger, 5%);
|
||||
|
||||
&:hover {
|
||||
background: darken($brand-danger, 15%);
|
||||
background: lighten($brand-danger, 45%);
|
||||
border-color: lighten($brand-danger, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,11 +89,6 @@
|
||||
.event-time, .event-status {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: darken($brand-primary, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.week-calendar {
|
||||
|
||||
@@ -2,6 +2,13 @@
|
||||
/* Cart grid */
|
||||
padding: 10px 0;
|
||||
|
||||
.product>*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.product p+.dl-inline {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.count form {
|
||||
display: inline;
|
||||
}
|
||||
@@ -14,21 +21,23 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.total {
|
||||
border-top: 1px solid $table-border-color;
|
||||
}
|
||||
|
||||
dl {
|
||||
.dl-indented {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
margin: 5px 0 0;
|
||||
|
||||
dt {
|
||||
margin-top: 5px;
|
||||
}
|
||||
dd:not(.toplevel) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
dt {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
|
||||
&>div {
|
||||
position: relative;
|
||||
@@ -59,14 +68,6 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 5px 0;
|
||||
dt {
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-icon-details {
|
||||
position: relative;
|
||||
padding-left: 1.4em;
|
||||
@@ -94,23 +95,88 @@
|
||||
}
|
||||
}
|
||||
|
||||
.apply-voucher {
|
||||
input {
|
||||
height: 32px;
|
||||
.cart [role=rowgroup]:last-child {
|
||||
border-top: 1px solid $table-border-color;
|
||||
}
|
||||
.cart .total strong {
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
|
||||
.cart .checkout-button-secondary > :last-child p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cart .checkout-button-row > div {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cart .checkout-button-row .btn {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
min-height: 34px;
|
||||
}
|
||||
.cart .checkout-button-row .btn-primary {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.cart .row:last-child p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-xs-min) {
|
||||
.cart .checkout-button-secondary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: floor(($grid-gutter-width / 2));
|
||||
}
|
||||
.cart .checkout-button-secondary > * {
|
||||
flex: 1 0;
|
||||
}
|
||||
.cart .checkout-button-row > :last-child p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.cart .checkout-button-row .btn-primary {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.cart .checkout-button-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
padding-top: 0;
|
||||
margin-left: - floor(($grid-gutter-width / 4));
|
||||
margin-right: - floor(($grid-gutter-width / 4));
|
||||
}
|
||||
.cart .checkout-button-row > * {
|
||||
padding-left: floor(($grid-gutter-width / 4));
|
||||
padding-right: floor(($grid-gutter-width / 4));
|
||||
flex: 0;
|
||||
}
|
||||
.cart .checkout-button-primary p {
|
||||
text-align: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cart .checkout-button-secondary > * {
|
||||
flex: 1 0;
|
||||
}
|
||||
#voucher_code {
|
||||
min-width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media(max-width: $screen-sm-max) {
|
||||
.cart .panel-body {
|
||||
padding: 5px;
|
||||
.checkout-button-row {
|
||||
padding: 0 10px;
|
||||
}
|
||||
#cart-deadline {
|
||||
display: block;
|
||||
padding: 0 10px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cart-row {
|
||||
.download-desktop {
|
||||
clear: both;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 15px 0 13px 0;
|
||||
list-style: none;
|
||||
|
||||
.checkout-step {
|
||||
flex: 1;
|
||||
@@ -26,8 +27,13 @@
|
||||
padding-top: 10px;
|
||||
color: $text-muted;
|
||||
}
|
||||
a .checkout-step-label {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.checkout-step-bar-left {
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 0;
|
||||
@@ -36,14 +42,15 @@
|
||||
background: $gray-lighter;
|
||||
z-index: 100;
|
||||
}
|
||||
.checkout-step-bar-right {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
&:after {
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 6px;
|
||||
background: $gray-lighter;
|
||||
z-index: 100;
|
||||
}
|
||||
&.step-done:before, &.step-done:after, &.step-current:before {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&:last-child:after,
|
||||
&:first-child:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.step-done .checkout-step-icon {
|
||||
@@ -51,12 +58,9 @@
|
||||
background: $brand-primary;
|
||||
color: white;
|
||||
}
|
||||
&.step-done .checkout-step-label {
|
||||
&.step-done .checkout-step-label a {
|
||||
color: $brand-primary;
|
||||
}
|
||||
&.step-done .checkout-step-bar-left, &.step-done .checkout-step-bar-right {
|
||||
background: $brand-primary;
|
||||
}
|
||||
|
||||
&.step-current .checkout-step-icon {
|
||||
border: 1px solid $brand-primary;
|
||||
@@ -66,25 +70,26 @@
|
||||
&.step-current .checkout-step-label {
|
||||
color: $brand-primary;
|
||||
}
|
||||
&.step-current .checkout-step-bar-left {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&:last-child .checkout-step-bar-right,
|
||||
&:first-child .checkout-step-bar-left {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-sm-max) {
|
||||
.checkout-step-label {
|
||||
display: none;
|
||||
/* visually hide, but keep for screen-readers */
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
.addons legend {
|
||||
border-bottom: none;
|
||||
}
|
||||
.product-row {
|
||||
.addons &:first-child {
|
||||
border-top: 2px solid $table-border-color;
|
||||
}
|
||||
.addons &:last-child {
|
||||
border-bottom: 2px solid $table-border-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.addons & {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
@@ -78,7 +76,7 @@
|
||||
display: block;
|
||||
}
|
||||
.price ins {
|
||||
color: $brand-success;
|
||||
color: $alert-success-text;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
@@ -121,6 +119,9 @@ article.item-with-variations:last-child, .product-row:last-child {
|
||||
border-bottom: 2px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
article.item-with-variations .product-row:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio .variation-description {
|
||||
padding-left: 20px;
|
||||
@@ -170,7 +171,7 @@ article.item-with-variations:last-child, .product-row:last-child {
|
||||
.checkout-button-row {
|
||||
padding-top: 15px;
|
||||
}
|
||||
section.front-page {
|
||||
div.front-page {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.offline-banner {
|
||||
@@ -201,23 +202,21 @@ section.front-page {
|
||||
.subevent-list {
|
||||
background-color: white;
|
||||
|
||||
form {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
a.subevent-row {
|
||||
.label {
|
||||
text-decoration: none;
|
||||
}
|
||||
.subevent-row a {
|
||||
display: block;
|
||||
color: $text-color;
|
||||
padding: 3px 0;
|
||||
}
|
||||
a.subevent-row:nth-child(2n) {
|
||||
.subevent-row:nth-child(2n) a {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
a.subevent-row:hover {
|
||||
text-decoration: none;
|
||||
.subevent-row:hover a {
|
||||
background-color: darken($gray-lighter, 10%);
|
||||
}
|
||||
.subevent-row .row > div {
|
||||
@@ -226,6 +225,16 @@ section.front-page {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-nav, .calendar-nav li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
.calendar-nav li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.subevent-toggle {
|
||||
display: none;
|
||||
}
|
||||
@@ -269,8 +278,16 @@ h2.subevent-head {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info-download {
|
||||
margin-top: 15px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.lead + .info-download {
|
||||
margin-top: -15px;
|
||||
}
|
||||
.download-btn-form + .download-btn-form {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.refund-gift-card-code {
|
||||
font-size: 24px;
|
||||
font-family: $font-family-monospace;
|
||||
|
||||
@@ -10,6 +10,9 @@ a.btn, button.btn {
|
||||
.panel-title .radio {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.panel-title label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-control + .form-control-feedback {
|
||||
/* Fix for https://github.com/FortAwesome/Font-Awesome/issues/4313 */
|
||||
@@ -68,13 +71,11 @@ a.btn, button.btn {
|
||||
.panel-default>.accordion-radio>.panel-heading {
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
padding: 12px 15px;
|
||||
padding: 8px 15px;
|
||||
|
||||
input[type=radio] {
|
||||
margin-top: 0;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
.panel-default>.accordion-radio+.panel-collapse>.panel-body {
|
||||
|
||||
@@ -27,11 +27,11 @@
|
||||
.page-header-links > div.header-part {
|
||||
padding-top: 15px;
|
||||
|
||||
a {
|
||||
a:link, a:visited {
|
||||
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;
|
||||
a:active, a:hover, a:focus {
|
||||
color: choose-contrast-color($body-bg, white, $link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -20,6 +20,35 @@
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.order-details dt {
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
margin-right: .25em;
|
||||
}
|
||||
.status-dot {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.text-warning { color: $brand-warning; }
|
||||
.text-info { color: $brand-info; }
|
||||
.text-success { color: $brand-success; }
|
||||
.text-danger { color: $brand-danger; }
|
||||
h1 a, .btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
a, .btn-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
*/
|
||||
/* bootstrap sets outline-offset with :active:focus so we need to match specifity of selector */
|
||||
/* see line 26, pretix/static/bootstrap/scss/bootstrap/_buttons.scss */
|
||||
button:focus, a:focus, .btn:focus, summary:focus,
|
||||
/*button:active, a:active, .btn:active, summary:active,*/
|
||||
button:active:focus, a:active:focus, .btn:active:focus, summary:active:focus {
|
||||
outline: 2px solid $link-hover-color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 10px 0;
|
||||
}
|
||||
@@ -27,24 +56,39 @@ footer nav {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
footer nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
}
|
||||
footer nav li:not(:first-child):before {
|
||||
content: "·";
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.js-only {
|
||||
display: none;
|
||||
}
|
||||
.locales, .loginstatus {
|
||||
display: inline;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
border-bottom: 2px solid $gray-light;
|
||||
}
|
||||
a.active {
|
||||
border-bottom: 2px solid $brand-primary;
|
||||
/*border-bottom: 2px solid $brand-primary;*/
|
||||
font-weight: bold;
|
||||
}
|
||||
img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
.locales ul {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
}
|
||||
.locales li {
|
||||
display: inline;
|
||||
}
|
||||
.loginstatus a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@@ -181,8 +225,10 @@ body.loading .container {
|
||||
@media (min-width: $screen-md-min) {
|
||||
.thank-you {
|
||||
min-height: 170px;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
max-width: 59em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 3em;
|
||||
|
||||
.fa {
|
||||
float: left;
|
||||
@@ -213,9 +259,15 @@ body.loading .container {
|
||||
}
|
||||
}
|
||||
|
||||
.blank-after {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.dl-horizontal dt {
|
||||
white-space: normal;
|
||||
}
|
||||
.dl-inline dt, .dl-inline dd {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.collapse-indicator {
|
||||
-moz-transition: all 150ms ease-in 0s;
|
||||
@@ -231,7 +283,7 @@ body.loading .container {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
|
||||
.panel-title a[data-toggle="collapse"], details .panel-title {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
margin: -10px -15px;
|
||||
|
||||
Reference in New Issue
Block a user