From: Vincent Vanwaelscappel Date: Thu, 21 Mar 2019 11:39:26 +0000 (+0100) Subject: wip #2643 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=08c151e44ed57a00cd86cc469dd19f27c75dea63;p=fluidbook-html5.git wip #2643 @4 --- diff --git a/js/libs/countup/countup.min.js b/js/libs/countup/countup.min.js new file mode 100644 index 00000000..d0ad750e --- /dev/null +++ b/js/libs/countup/countup.min.js @@ -0,0 +1,247 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +// playground: stackblitz.com/edit/countup-typescript +var CountUp = /** @class */ (function () { + function CountUp(target, endVal, options) { + var _this = this; + this.target = target; + this.endVal = endVal; + this.options = options; + this.version = '2.0.4'; + this.defaults = { + startVal: 0, + decimalPlaces: 0, + duration: 2, + useEasing: true, + useGrouping: true, + smartEasingThreshold: 999, + smartEasingAmount: 333, + separator: ',', + decimal: '.', + prefix: '', + suffix: '' + }; + this.finalEndVal = null; // for smart easing + this.useEasing = true; + this.countDown = false; + this.error = ''; + this.startVal = 0; + this.paused = true; + this.count = function (timestamp) { + if (!_this.startTime) { + _this.startTime = timestamp; + } + var progress = timestamp - _this.startTime; + _this.remaining = _this.duration - progress; + // to ease or not to ease + if (_this.useEasing) { + if (_this.countDown) { + _this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration); + } + else { + _this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration); + } + } + else { + if (_this.countDown) { + _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration)); + } + else { + _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration); + } + } + // don't go past endVal since progress can exceed duration in the last frame + if (_this.countDown) { + _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal; + } + else { + _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal; + } + // decimal + _this.frameVal = Math.round(_this.frameVal * _this.decimalMult) / _this.decimalMult; + // format and print value + _this.printValue(_this.frameVal); + // whether to continue + if (progress < _this.duration) { + _this.rAF = requestAnimationFrame(_this.count); + } + else if (_this.finalEndVal !== null) { + // smart easing + _this.update(_this.finalEndVal); + } + else { + if (_this.callback) { + _this.callback(); + } + } + }; + // default format and easing functions + this.formatNumber = function (num) { + var neg = (num < 0) ? '-' : ''; + var result, x, x1, x2, x3; + result = Math.abs(num).toFixed(_this.options.decimalPlaces); + result += ''; + x = result.split('.'); + x1 = x[0]; + x2 = x.length > 1 ? _this.options.decimal + x[1] : ''; + if (_this.options.useGrouping) { + x3 = ''; + for (var i = 0, len = x1.length; i < len; ++i) { + if (i !== 0 && (i % 3) === 0) { + x3 = _this.options.separator + x3; + } + x3 = x1[len - i - 1] + x3; + } + x1 = x3; + } + // optional numeral substitution + if (_this.options.numerals && _this.options.numerals.length) { + x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; }); + x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; }); + } + return neg + _this.options.prefix + x1 + x2 + _this.options.suffix; + }; + this.easeOutExpo = function (t, b, c, d) { + return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b; + }; + this.options = __assign({}, this.defaults, options); + this.formattingFn = (this.options.formattingFn) ? + this.options.formattingFn : this.formatNumber; + this.easingFn = (this.options.easingFn) ? + this.options.easingFn : this.easeOutExpo; + this.startVal = this.validateValue(this.options.startVal); + this.frameVal = this.startVal; + this.endVal = this.validateValue(endVal); + this.options.decimalPlaces = Math.max(0 || this.options.decimalPlaces); + this.decimalMult = Math.pow(10, this.options.decimalPlaces); + this.resetDuration(); + this.options.separator = String(this.options.separator); + this.useEasing = this.options.useEasing; + if (this.options.separator === '') { + this.options.useGrouping = false; + } + this.el = (typeof target === 'string') ? document.getElementById(target) : target; + if (this.el) { + this.printValue(this.startVal); + } + else { + this.error = '[CountUp] target is null or undefined'; + } + } + // determines where easing starts and whether to count down or up + CountUp.prototype.determineDirectionAndSmartEasing = function () { + var end = (this.finalEndVal) ? this.finalEndVal : this.endVal; + this.countDown = (this.startVal > end); + var animateAmount = end - this.startVal; + if (Math.abs(animateAmount) > this.options.smartEasingThreshold) { + this.finalEndVal = end; + var up = (this.countDown) ? 1 : -1; + this.endVal = end + (up * this.options.smartEasingAmount); + this.duration = this.duration / 2; + } + else { + this.endVal = end; + this.finalEndVal = null; + } + if (this.finalEndVal) { + this.useEasing = false; + } + else { + this.useEasing = this.options.useEasing; + } + }; + // start animation + CountUp.prototype.start = function (callback) { + if (this.error) { + return; + } + this.callback = callback; + if (this.duration > 0) { + this.determineDirectionAndSmartEasing(); + this.paused = false; + this.rAF = requestAnimationFrame(this.count); + } + else { + this.printValue(this.endVal); + } + }; + // pause/resume animation + CountUp.prototype.pauseResume = function () { + if (!this.paused) { + cancelAnimationFrame(this.rAF); + } + else { + this.startTime = null; + this.duration = this.remaining; + this.startVal = this.frameVal; + this.determineDirectionAndSmartEasing(); + this.rAF = requestAnimationFrame(this.count); + } + this.paused = !this.paused; + }; + // reset to startVal so animation can be run again + CountUp.prototype.reset = function () { + cancelAnimationFrame(this.rAF); + this.paused = true; + this.resetDuration(); + this.startVal = this.validateValue(this.options.startVal); + this.frameVal = this.startVal; + this.printValue(this.startVal); + }; + // pass a new endVal and start animation + CountUp.prototype.update = function (newEndVal) { + cancelAnimationFrame(this.rAF); + this.startTime = null; + this.endVal = this.validateValue(newEndVal); + if (this.endVal === this.frameVal) { + return; + } + this.startVal = this.frameVal; + if (!this.finalEndVal) { + this.resetDuration(); + } + this.determineDirectionAndSmartEasing(); + this.rAF = requestAnimationFrame(this.count); + }; + CountUp.prototype.printValue = function (val) { + var result = this.formattingFn(val); + if (this.el.tagName === 'INPUT') { + var input = this.el; + input.value = result; + } + else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') { + this.el.textContent = result; + } + else { + this.el.innerHTML = result; + } + }; + CountUp.prototype.ensureNumber = function (n) { + return (typeof n === 'number' && !isNaN(n)); + }; + CountUp.prototype.validateValue = function (value) { + var newValue = Number(value); + if (!this.ensureNumber(newValue)) { + this.error = "[CountUp] invalid start or end value: " + value; + return null; + } + else { + return newValue; + } + }; + CountUp.prototype.resetDuration = function () { + this.startTime = null; + this.duration = Number(this.options.duration) * 1000; + this.remaining = this.duration; + }; + return CountUp; +}()); diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 89b2f348..09d38f26 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -233,6 +233,7 @@ FluidbookLinks.prototype = { var from = {}; var to = {}; var duration = 0.5; + var tweenmax = true; if (animation.duration !== undefined) { duration = parseFloat(animation.duration); } @@ -281,7 +282,7 @@ FluidbookLinks.prototype = { var defaultParams = {startAngle: '0', direction: 'clockwise', size: 'outside', innerRadius: '0'}; animation = $.extend({}, defaultParams, animation); animation.startAngle = parseFloat(animation.startAngle); - animation.innerRadius=parseFloat(animation.innerRadius); + animation.innerRadius = parseFloat(animation.innerRadius); console.log(animation); if (animation.direction === 'clockwise') { from.angle = animation.startAngle + 720; @@ -338,10 +339,59 @@ FluidbookLinks.prototype = { stroke: 'none' }); }; + } else if (animation.type === 'number') { + tweenmax = false; + var defaultParams = { + startValue: '0', + decimalSeparator: '.', + decimalDigitNumber: '0', + separator: ' ', + align: 'left', + letterSpacing: '0', + prefix: '', + suffix: '', + backgroundColor: 'transparent', + }; + animation = $.extend({}, defaultParams, animation); + animation.startValue = parseFloat(animation.startValue.replace(/,/, '.')); + animation.decimalDigitNumber = parseInt(animation.decimalDigitNumber); + animation.letterSpacing = parseFloat(animation.letterSpacing); + + var options = { + useEasing: true, + useGrouping: true, + separator: animation.separator, + decimalPlaces: animation.decimalDigitNumber, + decimal: animation.decimalSeparator, + prefix: animation.prefix, + suffix: animation.suffix, + easingFn: function (t, b, c, d) { + var ea = to.ease.split('.'); + return b + window[ea[0]][ea[1]].getRatio(t / d) * c + } + }; + + var css = { + textAlign: animation.align, + letterSpacing: animation.letterSpacing, + opacity: 0, + } + + var $this = this; + $(this).css(css); + var value = parseFloat($(this).text().replace(/,/, '.')); + $(this).text(''); + var countup = new CountUp($(this).attr('id'), value, options); + setTimeout(function () { + $($this).css('opacity', 1); + countup.start(); + }, to.delay * 1000); } $(this).show(); - TweenMax.fromTo($(this), duration, from, to); + if (tweenmax) { + TweenMax.fromTo($(this), duration, from, to); + } }); }, diff --git a/style/fluidbook.less b/style/fluidbook.less index ab7981c0..062c6ca6 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2,411 +2,411 @@ // See #1773 use { - pointer-events: none; + pointer-events: none; } .notransition { - transition: none !important; + transition: none !important; } /* Screenshot */ .screenshot .mview { - overflow-y: hidden; + overflow-y: hidden; } /* Incompatible */ .no-csstransforms #device { - display: none; + display: none; } .csstransforms #message { - display: none; + display: none; } #message { - text-align: center; - margin: 30px auto; - width: 600px; + text-align: center; + margin: 30px auto; + width: 600px; } #message a { - text-decoration: underline; + text-decoration: underline; } #message a:after { - content: " »"; + content: " »"; } /* Disable print div*/ #printpages { - display: none; + display: none; } /* Global settings */ a, input[type=text], input[type=password], input[type=file], input[type=search], input[type=email], textarea { - outline: none; - -webkit-appearance: none; + outline: none; + -webkit-appearance: none; } a { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } *::-ms-clear { - display: none; + display: none; } * { - padding: 0; - margin: 0; + padding: 0; + margin: 0; - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -ms-touch-action: double-tap-zoom pinch-zoom; - -ms-scroll-chaining: chained; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -ms-touch-action: double-tap-zoom pinch-zoom; + -ms-scroll-chaining: chained; - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } img { - border: 0; - box-sizing: content-box; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; + border: 0; + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } b, strong, h1, h2, h3, h4, h5, h6 { - font-weight: 600; + font-weight: 600; } html { - user-select: text; - -moz-user-select: text; - -webkit-user-select: text; - -o-user-select: text; - -ms-user-select: text; + user-select: text; + -moz-user-select: text; + -webkit-user-select: text; + -o-user-select: text; + -ms-user-select: text; - &.ios { - position: fixed; - top: 0; - left: 0; - } + &.ios { + position: fixed; + top: 0; + left: 0; + } } body { - position: relative; - -webkit-touch-callout: none !important; + position: relative; + -webkit-touch-callout: none !important; } body, input { - font-family: @font; + font-family: @font; } body.loading * { - cursor: progress !important; + cursor: progress !important; } html.screenshot #main { - visibility: visible !important; - display: block !important; + visibility: visible !important; + display: block !important; } html.screenshot #loader { - visibility: hidden !important; + visibility: hidden !important; } body, html { - overflow-y: hidden; - overflow-x: hidden; - width: 100%; - height: 100%; - touch-action: none; + overflow-y: hidden; + overflow-x: hidden; + width: 100%; + height: 100%; + touch-action: none; } #main { - position: relative; - display: none; - overflow-x: hidden; - overflow-y: hidden; - visibility: hidden; - opacity: 1; - z-index: 0; - height: 100%; - width: 100%; + position: relative; + display: none; + overflow-x: hidden; + overflow-y: hidden; + visibility: hidden; + opacity: 1; + z-index: 0; + height: 100%; + width: 100%; } #main.fadeout, #view.fadeout { - transition: opacity 500ms ease-out; - opacity: 0; + transition: opacity 500ms ease-out; + opacity: 0; } #hiddencontents { - display: none; + display: none; } /* Background */ #background { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 0; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 0; } #background .links { - position: absolute; - width: 100%; - height: 100%; + position: absolute; + width: 100%; + height: 100%; } #background .links .link { - position: absolute; + position: absolute; } /* Orientation */ .portrait .shade, .portrait .page.right { - display: none; + display: none; } .portrait .hideOnPortrait { - display: none; + display: none; } /* Desktop devices */ .msie { - &.desktop { - #links { - cursor: url(./images/cursors/zoom-in.cur), auto; - } + &.desktop { + #links { + cursor: url(./images/cursors/zoom-in.cur), auto; + } - .zoomed { - #links { - cursor: url(./images/cursors/zoom-out.cur), auto; - } - } - } + .zoomed { + #links { + cursor: url(./images/cursors/zoom-out.cur), auto; + } + } + } } &.no-msie { - &.desktop { - #links { - cursor: zoom-in; - } + &.desktop { + #links { + cursor: zoom-in; + } - .zoomed { - #links { - cursor: zoom-out; - } - } - } + .zoomed { + #links { + cursor: zoom-out; + } + } + } } #links .link { - cursor: auto; + cursor: auto; - &.eventOverlayLink { - cursor: inherit; - } + &.eventOverlayLink { + cursor: inherit; + } - iframe { - width: 100%; - height: 100%; - position: absolute; - -webkit-transform-origin: 0 0 0; - -moz-transform-origin: 0 0 0; - -ms-transform-origin: 0 0 0; - -o-transform-origin: 0 0 0; - transform-origin: 0 0 0; - } + iframe { + width: 100%; + height: 100%; + position: absolute; + -webkit-transform-origin: 0 0 0; + -moz-transform-origin: 0 0 0; + -ms-transform-origin: 0 0 0; + -o-transform-origin: 0 0 0; + transform-origin: 0 0 0; + } } .link { - -webkit-transform-origin: 0 0 0; - -moz-transform-origin: 0 0 0; - -ms-transform-origin: 0 0 0; - -o-transform-origin: 0 0 0; - transform-origin: 0 0 0; + -webkit-transform-origin: 0 0 0; + -moz-transform-origin: 0 0 0; + -ms-transform-origin: 0 0 0; + -o-transform-origin: 0 0 0; + transform-origin: 0 0 0; } @keyframes loader-spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } /* Loader */ #loader { - position: absolute; - @loaderSize: 48px; - @loaderMargin: unit(@loaderSize/-2, px); - top: 0; - left: 0; - z-index: 1000; - width: @loaderSize; - height: @loaderSize; - margin: @loaderMargin 0 0 @loaderMargin; - display: none; - - svg { - width: 100%; - height: 100%; - fill: @loader-background-color; - color: @loader-foreground-color; - transform-origin: 50% 50% - } - - &.show { - display: block; - - svg { - animation-name: loader-spin; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-timing-function: linear; - } - } + position: absolute; + @loaderSize: 48px; + @loaderMargin: unit(@loaderSize/-2, px); + top: 0; + left: 0; + z-index: 1000; + width: @loaderSize; + height: @loaderSize; + margin: @loaderMargin 0 0 @loaderMargin; + display: none; + + svg { + width: 100%; + height: 100%; + fill: @loader-background-color; + color: @loader-foreground-color; + transform-origin: 50% 50% + } + + &.show { + display: block; + + svg { + animation-name: loader-spin; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + } } /* Pages */ .background, .texts { - pointer-events: none; - position: absolute; - top: 0px; - left: 0px; - overflow: visible; + pointer-events: none; + position: absolute; + top: 0px; + left: 0px; + overflow: visible; } .background { - background-repeat: no-repeat; - width: 100%; - height: 100%; + background-repeat: no-repeat; + width: 100%; + height: 100%; - img { - width: unit(@book-page-correct-width, px); - height: unit(@book-page-correct-height, px); - } + img { + width: unit(@book-page-correct-width, px); + height: unit(@book-page-correct-height, px); + } } .texts { - img, object { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - } + img, object { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + } } /* Espaces forcés */ #currentDoublePage { - pointer-events: none; + pointer-events: none; } .page { - overflow: hidden; - position: absolute; - top: 0px; - background-color: transparent; - - .texts { - position: absolute; - top: -1px; - left: -1px; - } - - .background { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - } - - .shade { - position: absolute; - top: 0px; - } - - &.right { - z-index: 1; - - .shade { - left: 0px; - } - } - - &.left { - .shade { - right: 0px; - } - } + overflow: hidden; + position: absolute; + top: 0px; + background-color: transparent; + + .texts { + position: absolute; + top: -1px; + left: -1px; + } + + .background { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + } + + .shade { + position: absolute; + top: 0px; + } + + &.right { + z-index: 1; + + .shade { + left: 0px; + } + } + + &.left { + .shade { + right: 0px; + } + } } .doublePage, #pages { - position: absolute; - top: 0px; - left: 0px; - overflow: hidden; + position: absolute; + top: 0px; + left: 0px; + overflow: hidden; } /* Search */ #searchHighlights { - position: absolute; - top: 0px; - left: 0px; - z-index: 3; + position: absolute; + top: 0px; + left: 0px; + z-index: 3; - .highlight { - position: absolute; - border-width: 2px; - border-radius: 2px; - border-style: solid; + .highlight { + position: absolute; + border-width: 2px; + border-radius: 2px; + border-style: solid; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - transform-origin: 0 0; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + transform-origin: 0 0; - &[data-color="0"], &[data-color="5"], &[data-color="10"] { - .highlight-area(#00ff00); - } + &[data-color="0"], &[data-color="5"], &[data-color="10"] { + .highlight-area(#00ff00); + } - &[data-color="1"], &[data-color="6"], &[data-color="11"] { - .highlight-area(#ffff00); - } + &[data-color="1"], &[data-color="6"], &[data-color="11"] { + .highlight-area(#ffff00); + } - &[data-color="2"], &[data-color="7"], &[data-color="12"] { - .highlight-area(#00ffff); - } + &[data-color="2"], &[data-color="7"], &[data-color="12"] { + .highlight-area(#00ffff); + } - &[data-color="3"], &[data-color="8"], &[data-color="13"] { - .highlight-area(#ff00ff); - } + &[data-color="3"], &[data-color="8"], &[data-color="13"] { + .highlight-area(#ff00ff); + } - &[data-color="4"], &[data-color="9"], &[data-color="14"] { - .highlight-area(#ff0000); - } - } + &[data-color="4"], &[data-color="9"], &[data-color="14"] { + .highlight-area(#ff0000); + } + } } /* Shadow */ @@ -414,225 +414,225 @@ body, html { @shadow-height: 120px; @shadow-offset: 0px; #shadow { - @shadow-width-left: @book-page-width+12; - @shadow-width-right: @book-page-width+12; - position: absolute; - top: 0px; - left: 0px; - width: unit(@shadow-width-left+@shadow-width-right, px); - height: unit(@book-page-height, px); - pointer-events: none; - mix-blend-mode: multiply; - - transition-property: none !important; - transition-duration: 0ms !important; - - > .shadow { - position: absolute; - left: 0; - opacity: @shadow-opacity; - .shadowedge-fade-item(); - - &.bottom { - bottom: -@shadow-height+@shadow-offset; - background-size: 100% @shadow-height; - height: @shadow-height; - - .portrait & { - opacity: @shadow-opacity/2; - } - - &.left { - left: -12px; - width: @shadow-width-left; - background-image: url("../images/shadows/back/bottom-left.png"); - } - - &.right { - background-image: url("../images/shadows/back/bottom-right.png"); - width: @shadow-width-right; - - .landscape & { - left: @book-page-width; - } - } - } - - &.side { - top: 0; - width: 35px; - height: unit(@book-page-height, px); - background-size: 100% 100%; - - &.right { - left: unit(@book-page-width*2, px); - background-image: url("../images/shadows/back/right.png"); - - .portrait & { - display: block !important; - left: unit(@book-page-width - 6, px); - } - } - - &.left { - background-image: url("../images/shadows/back/left.png"); - left: -35px; - - .portrait & { - left: -29px; - } - } - - } - } + @shadow-width-left: @book-page-width+12; + @shadow-width-right: @book-page-width+12; + position: absolute; + top: 0px; + left: 0px; + width: unit(@shadow-width-left+@shadow-width-right, px); + height: unit(@book-page-height, px); + pointer-events: none; + mix-blend-mode: multiply; + + transition-property: none !important; + transition-duration: 0ms !important; + + > .shadow { + position: absolute; + left: 0; + opacity: @shadow-opacity; + .shadowedge-fade-item(); + + &.bottom { + bottom: -@shadow-height+@shadow-offset; + background-size: 100% @shadow-height; + height: @shadow-height; + + .portrait & { + opacity: @shadow-opacity/2; + } + + &.left { + left: -12px; + width: @shadow-width-left; + background-image: url("../images/shadows/back/bottom-left.png"); + } + + &.right { + background-image: url("../images/shadows/back/bottom-right.png"); + width: @shadow-width-right; + + .landscape & { + left: @book-page-width; + } + } + } + + &.side { + top: 0; + width: 35px; + height: unit(@book-page-height, px); + background-size: 100% 100%; + + &.right { + left: unit(@book-page-width*2, px); + background-image: url("../images/shadows/back/right.png"); + + .portrait & { + display: block !important; + left: unit(@book-page-width - 6, px); + } + } + + &.left { + background-image: url("../images/shadows/back/left.png"); + left: -35px; + + .portrait & { + left: -29px; + } + } + + } + } } #edges { - transition-property: none !important; - transition-duration: 0ms !important; - - position: absolute; - top: 0px; - left: 0px; - width: unit(@book-page-width*2, px); - height: unit(@book-page-height, px); - pointer-events: none; - .hideifnot(@edges-display); - - .portrait & { - width: unit(@book-page-width, px); - } - - @edge-scale: 1; - - > .edge { - .shadowedge-fade-item(); - position: absolute; - top: 0; - height: 100%; - - > div { - background-size: 100% 100%; - position: absolute; - background-repeat: no-repeat; - } - - .top { - top: 0; - height: unit(12*@edge-scale, px); - } - - .bottom { - bottom: 0; - height: unit(22*@edge-scale, px); - } - - .middle { - top: unit(12*@edge-scale, px); - bottom: unit(22*@edge-scale, px); - } - - &.left { - left: unit(-17*@edge-scale, px); - width: unit(17*@edge-scale, px); - - div { - width: unit(17*@edge-scale, px); - } - - .top { - background-image: url("../images/edges/edge-left-top.png"); - } - - .bottom { - background-image: url("../images/edges/edge-left-bottom.png"); - } - - .middle { - background-image: url("../images/edges/edge-left-middle.png"); - } - } - - &.right { - right: unit(-11*@edge-scale, px); - width: unit(11*@edge-scale, px); - - div { - width: unit(11*@edge-scale, px); - } - - .top { - background-image: url("../images/edges/edge-right-top.png"); - } - - .bottom { - background-image: url("../images/edges/edge-right-bottom.png"); - } - - .middle { - background-image: url("../images/edges/edge-right-middle.png"); - } - } - } + transition-property: none !important; + transition-duration: 0ms !important; + + position: absolute; + top: 0px; + left: 0px; + width: unit(@book-page-width*2, px); + height: unit(@book-page-height, px); + pointer-events: none; + .hideifnot(@edges-display); + + .portrait & { + width: unit(@book-page-width, px); + } + + @edge-scale: 1; + + > .edge { + .shadowedge-fade-item(); + position: absolute; + top: 0; + height: 100%; + + > div { + background-size: 100% 100%; + position: absolute; + background-repeat: no-repeat; + } + + .top { + top: 0; + height: unit(12*@edge-scale, px); + } + + .bottom { + bottom: 0; + height: unit(22*@edge-scale, px); + } + + .middle { + top: unit(12*@edge-scale, px); + bottom: unit(22*@edge-scale, px); + } + + &.left { + left: unit(-17*@edge-scale, px); + width: unit(17*@edge-scale, px); + + div { + width: unit(17*@edge-scale, px); + } + + .top { + background-image: url("../images/edges/edge-left-top.png"); + } + + .bottom { + background-image: url("../images/edges/edge-left-bottom.png"); + } + + .middle { + background-image: url("../images/edges/edge-left-middle.png"); + } + } + + &.right { + right: unit(-11*@edge-scale, px); + width: unit(11*@edge-scale, px); + + div { + width: unit(11*@edge-scale, px); + } + + .top { + background-image: url("../images/edges/edge-right-top.png"); + } + + .bottom { + background-image: url("../images/edges/edge-right-bottom.png"); + } + + .middle { + background-image: url("../images/edges/edge-right-middle.png"); + } + } + } } /* Locale Flag icon */ .locale-flag { - display: inline-block; - width: 22px; - height: 17px; - border-radius: 1px; - background-position: 50% 50%; - background-repeat: no-repeat; - margin: 0 18px 4px; + display: inline-block; + width: 22px; + height: 17px; + border-radius: 1px; + background-position: 50% 50%; + background-repeat: no-repeat; + margin: 0 18px 4px; - #menu & { - padding: 0; - margin: 0 10px 0 0; - } + #menu & { + padding: 0; + margin: 0 10px 0 0; + } } .localesList { - li { - a { - padding: 10px 20px !important; + li { + a { + padding: 10px 20px !important; - img { - vertical-align: middle; - margin: -2px 0 0 0; - } + img { + vertical-align: middle; + margin: -2px 0 0 0; + } - span { - display: inline-block !important; - padding: 0 12px !important; - } - } - } + span { + display: inline-block !important; + padding: 0 12px !important; + } + } + } } @zoomtransition: 350ms; @zoomtransitioninertia: 400ms; #z { - position: absolute; - z-index: 11; - direction: ltr; - top: 0; - left: 0; + position: absolute; + z-index: 11; + direction: ltr; + top: 0; + left: 0; - transition: transform @zoomtransition ease-out; + transition: transform @zoomtransition ease-out; - &.notransition { - transition: none; - } + &.notransition { + transition: none; + } - &.transition-inertia { - transition: transform-origin @zoomtransitioninertia ease-out; - } + &.transition-inertia { + transition: transform-origin @zoomtransitioninertia ease-out; + } - &.nozoom { - height: 0 !important; - } + &.nozoom { + height: 0 !important; + } } @import "slider"; @@ -640,2269 +640,2275 @@ body, html { /* Center */ #center-fluidbook, #center-shadow { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; - &.animate { - .page-transition(0.7); - } + &.animate { + .page-transition(0.7); + } } /* Fluidbook */ #fluidbook { - position: absolute; - z-index: 11; - direction: ltr; + position: absolute; + z-index: 11; + direction: ltr; - &.animate { - transition: all @zoomtransition ease-out; - } + &.animate { + transition: all @zoomtransition ease-out; + } } #cache { - display: none; + display: none; } #pagesnumbers { - padding: 0; - position: absolute; - white-space: nowrap; - pointer-events: none; - font-size: unit(13*@z, px); - margin: 0.12em 0 0 0; - top: @book-page-height; - color: @page-number-color; - .hideifnot(@display-page-number); - opacity: 1; - - &.hidden { - transition: none; - opacity: 0; - } - - > div { - width: @book-page-width; - text-align: center; - display: inline-block; - } + padding: 0; + position: absolute; + white-space: nowrap; + pointer-events: none; + font-size: unit(13*@z, px); + margin: 0.12em 0 0 0; + top: @book-page-height; + color: @page-number-color; + .hideifnot(@display-page-number); + opacity: 1; + + &.hidden { + transition: none; + opacity: 0; + } + + > div { + width: @book-page-width; + text-align: center; + display: inline-block; + } } .portrait #pagesnumbers .right { - display: none; + display: none; } @import "interface"; /* Header */ header { - position: relative; - z-index: 12; + position: relative; + z-index: 12; - // Header should sit above help overlay when it is open - .help & { - z-index: 21; - background-color: transparent; // Disable background so icons are visible - } + // Header should sit above help overlay when it is open + .help & { + z-index: 21; + background-color: transparent; // Disable background so icons are visible + } - // Bug #2159 - .menu-burger .landscape & { - z-index: 10; - } + // Bug #2159 + .menu-burger .landscape & { + z-index: 10; + } } #nav > a { - vertical-align: top; - display: inline-block; + vertical-align: top; + display: inline-block; - &.hidden { - display: none; - } + &.hidden { + display: none; + } } #nav a { - padding: 0 10px 20px 10px; + padding: 0 10px 20px 10px; } .ltr #nav a#submitSearch { - margin: 0 0 0 5px; + margin: 0 0 0 5px; } .rtl #nav a#submitSearch { - margin: 0 5px 0 0; + margin: 0 5px 0 0; } #nav > a > img { - padding: 10px 2px 0px 2px; - vertical-align: top; + padding: 10px 2px 0px 2px; + vertical-align: top; } #nav { - position: relative; - white-space: nowrap; + position: relative; + white-space: nowrap; - #locales { - background-color: @icon-color; - } + #locales { + background-color: @icon-color; + } } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { - display: none; + display: none; } .hint { - padding: 2px 5px 5px; - height: 22px; - width: 137px; - margin: 2px; - display: block; - font-size: 12px; + padding: 2px 5px 5px; + height: 22px; + width: 137px; + margin: 2px; + display: block; + font-size: 12px; } #searchHints { - border-radius: 1px; - width: 150px; - padding: 5px; - display: none; - z-index: 25; - position: absolute; + border-radius: 1px; + width: 150px; + padding: 5px; + display: none; + z-index: 25; + position: absolute; } #logo { - position: absolute; - top: 0px; - background-repeat: no-repeat; - z-index: 10; - - &.hidden { - visibility: hidden; - pointer-events: none; - } - - &.overridenByFluidbook, .help & { - visibility: hidden; - } - - // Positioning for left-to-right Fluidbooks + inverted menu on RTL - .ltr &, .rtl.menu-inverted & { - right: 0; - left: auto; - transform-origin: 100% 0; // Top right transform origin so positioning is correct after scaling - } - - // Positioning for right-to-left Fluidbooks + inverted menu on LTR - .rtl &, .ltr.menu-inverted & { - left: 0; - right: auto; - transform-origin: 0 0; // Top left transform origin so positioning is correct after scaling - } + position: absolute; + top: 0px; + background-repeat: no-repeat; + z-index: 10; + + &.hidden { + visibility: hidden; + pointer-events: none; + } + + &.overridenByFluidbook, .help & { + visibility: hidden; + } + + // Positioning for left-to-right Fluidbooks + inverted menu on RTL + .ltr &, .rtl.menu-inverted & { + right: 0; + left: auto; + transform-origin: 100% 0; // Top right transform origin so positioning is correct after scaling + } + + // Positioning for right-to-left Fluidbooks + inverted menu on LTR + .rtl &, .ltr.menu-inverted & { + left: 0; + right: auto; + transform-origin: 0 0; // Top left transform origin so positioning is correct after scaling + } } /* Credits */ footer { - font-family: @font; - font-size: 8px; - text-transform: uppercase; - position: absolute; - bottom: 2px; - z-index: 20; - transform-origin: 100% 100%; + font-family: @font; + font-size: 8px; + text-transform: uppercase; + position: absolute; + bottom: 2px; + z-index: 20; + transform-origin: 100% 100%; } footer a { - display: inline-block; - text-decoration: none; - transform-origin: 100% 100%; - transform: scale(1.08, 0.95) !important; + display: inline-block; + text-decoration: none; + transform-origin: 100% 100%; + transform: scale(1.08, 0.95) !important; } .ltr footer { - right: 4px; + right: 4px; } .rtl footer { - left: 4px; + left: 4px; } /* Fluidbook zooming */ footer, header, #interface { - transition: opacity 400ms ease-in, visibility 400ms ease-in; + transition: opacity 400ms ease-in, visibility 400ms ease-in; - .ios & { - transition: none; - } + .ios & { + transition: none; + } - &.hidden { - visibility: hidden; - opacity: 0; - z-index: 0; - } + &.hidden { + visibility: hidden; + opacity: 0; + z-index: 0; + } } #shadow { - @shadow-zoom-transition: 400ms; + @shadow-zoom-transition: 400ms; - transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; + transition: opacity @shadow-zoom-transition ease-in, visibility @shadow-zoom-transition ease-in; - &.animate { - transition: all @zoomtransition ease-out; - } + &.animate { + transition: all @zoomtransition ease-out; + } - .ios & { - transition: none !important; - } + .ios & { + transition: none !important; + } - &.hidden { - visibility: hidden; - opacity: 0; - z-index: 0; - } + &.hidden { + visibility: hidden; + opacity: 0; + z-index: 0; + } } a.bookmark { - &.hidden { - visibility: hidden; - } + &.hidden { + visibility: hidden; + } } /* Cart */ .icon-cart { - position: relative; - - span.number { - position: absolute; - top: 0.7em; - left: 0; - color: @icon-color; - text-align: center; - width: 100%; - font-size: 0.7em; - } - - &#menu_cart { - span.number { - width: auto; - top: 14px; - left: 39px; - } - } + position: relative; + + span.number { + position: absolute; + top: 0.7em; + left: 0; + color: @icon-color; + text-align: center; + width: 100%; + font-size: 0.7em; + } + + &#menu_cart { + span.number { + width: auto; + top: 14px; + left: 39px; + } + } } [data-menu="cart"] { - .cart-empty { - padding: 50px; - } - - &.fs { - table { - td { - &.name { - width: 100%; - - .m { - display: block; - } - } - - &.price, &.price_excluding_taxes, &.price_unit { - display: none; - } - } - } - - .cart-footer { - clear: both; - width: 100%; - text-align: left; - position: relative; - top: -40px; - - p { - float: none; - width: 100%; - font-size: 0.8em; - padding: 0 30px 30px; - margin: 0; - } - - .fonctions { - float: none; - width: 100%; - } - } - - .cart-shipping-form { - margin-top: 30px; - - .col { - &.col-left, &.col-right { - width: 100%; - left: 0; - margin-top: 0; - margin-right: 0; - padding: 0 30px; - } - } - - .cart-footer { - top: 0; - } - } - - } - - table { - width: 100%; - max-width: 1004px; - margin-left: 10px; - - td { - padding: 15px; - text-align: left; - vertical-align: middle; - white-space: nowrap; - - &.name { - white-space: normal; - - .m { - display: none; - } - } - - &.price { - font-weight: 700; - } - - &.price, &.price_excluding_taxes, &.price_unit { - text-align: right; - } - - &.delete { - a { - display: inline-block; - width: 23px; - height: 23px; - background-color: @menu-button-background; - position: relative; - top: 1px; - left: -5px; - padding: 0 6px; - - svg { - width: 11px; - height: 11px; - display: inline-block; - } - } - } - } - - .input-number { - position: relative; - width: 170px; - height: 44px; - - input { - height: 44px; - width: 70px; - display: inline-block; - margin: 0 2px; - border: 0; - vertical-align: top; - padding: 20px; - text-align: center; - } - - a { - display: inline-block; - height: 44px; - width: 44px; - background-color: @menu-button-background; - text-align: center; - font-weight: 700; - font-size: 30px; - } - } - - &.cart-totals { - width: 250px; - margin: 18px 18px 50px; - float: right; - clear: both; - - td.hr { - height: 2px; - background-color: #fff; - padding: 0; - } - - tr.total { - td { - font-weight: 700; - - } - } - - td { - padding: 6px 12px; - text-align: right; - } - } - } - - .cart-footer { - clear: both; - width: 100%; - text-align: left; - - p { - float: left; - width: 450px; - font-size: 0.8em; - margin-top: 10px; - margin-left: 30px; - } - - .fonctions { - float: right; - width: 450px; - } - } - - .cart-shipping-form { - .col { - width: 441px; - margin-top: 30px; - display: inline-block; - text-align: left; - position: relative; - - input { - width: 100%; - padding: 18px 15px; - background-color: #fff; - margin-bottom: 25px; - font-size: 1.1em; - border: 2px solid #fff; - - &.parsley-error { - border-color: #cc0000; - } - } - - p { - text-align: left; - padding: 15px 10px 15px 10px; - } - - &.col-left { - left: -5px; - margin-right: 80px; - } - } - - .cart-footer { - margin-top: 10px; - } - - .parsley-errors-list { - display: none; - } - } - - .cart-confirmation { - margin: 50px 0; - text-align: left; - padding: 0 30px; - } + .cart-empty { + padding: 50px; + } + + &.fs { + table { + td { + &.name { + width: 100%; + + .m { + display: block; + } + } + + &.price, &.price_excluding_taxes, &.price_unit { + display: none; + } + } + } + + .cart-footer { + clear: both; + width: 100%; + text-align: left; + position: relative; + top: -40px; + + p { + float: none; + width: 100%; + font-size: 0.8em; + padding: 0 30px 30px; + margin: 0; + } + + .fonctions { + float: none; + width: 100%; + } + } + + .cart-shipping-form { + margin-top: 30px; + + .col { + &.col-left, &.col-right { + width: 100%; + left: 0; + margin-top: 0; + margin-right: 0; + padding: 0 30px; + } + } + + .cart-footer { + top: 0; + } + } + + } + + table { + width: 100%; + max-width: 1004px; + margin-left: 10px; + + td { + padding: 15px; + text-align: left; + vertical-align: middle; + white-space: nowrap; + + &.name { + white-space: normal; + + .m { + display: none; + } + } + + &.price { + font-weight: 700; + } + + &.price, &.price_excluding_taxes, &.price_unit { + text-align: right; + } + + &.delete { + a { + display: inline-block; + width: 23px; + height: 23px; + background-color: @menu-button-background; + position: relative; + top: 1px; + left: -5px; + padding: 0 6px; + + svg { + width: 11px; + height: 11px; + display: inline-block; + } + } + } + } + + .input-number { + position: relative; + width: 170px; + height: 44px; + + input { + height: 44px; + width: 70px; + display: inline-block; + margin: 0 2px; + border: 0; + vertical-align: top; + padding: 20px; + text-align: center; + } + + a { + display: inline-block; + height: 44px; + width: 44px; + background-color: @menu-button-background; + text-align: center; + font-weight: 700; + font-size: 30px; + } + } + + &.cart-totals { + width: 250px; + margin: 18px 18px 50px; + float: right; + clear: both; + + td.hr { + height: 2px; + background-color: #fff; + padding: 0; + } + + tr.total { + td { + font-weight: 700; + + } + } + + td { + padding: 6px 12px; + text-align: right; + } + } + } + + .cart-footer { + clear: both; + width: 100%; + text-align: left; + + p { + float: left; + width: 450px; + font-size: 0.8em; + margin-top: 10px; + margin-left: 30px; + } + + .fonctions { + float: right; + width: 450px; + } + } + + .cart-shipping-form { + .col { + width: 441px; + margin-top: 30px; + display: inline-block; + text-align: left; + position: relative; + + input { + width: 100%; + padding: 18px 15px; + background-color: #fff; + margin-bottom: 25px; + font-size: 1.1em; + border: 2px solid #fff; + + &.parsley-error { + border-color: #cc0000; + } + } + + p { + text-align: left; + padding: 15px 10px 15px 10px; + } + + &.col-left { + left: -5px; + margin-right: 80px; + } + } + + .cart-footer { + margin-top: 10px; + } + + .parsley-errors-list { + display: none; + } + } + + .cart-confirmation { + margin: 50px 0; + text-align: left; + padding: 0 30px; + } } // Hack for #1433 html.ios body.portrait #interface { - transition: none; + transition: none; } /* Links */ #links { - position: absolute; - top: 0px; - left: 0px; - z-index: 4; - background-color: rgba(0, 0, 0, 0.001); + position: absolute; + top: 0px; + left: 0px; + z-index: 4; + background-color: rgba(0, 0, 0, 0.001); } .rtl #pages.double #links { - .leftContainer { - position: relative; - left: 50%; - } + .leftContainer { + position: relative; + left: 50%; + } - .rightContainer { - position: relative; - left: -50%; - } + .rightContainer { + position: relative; + left: -50%; + } } #links .link { - position: absolute; - cursor: auto; + position: absolute; + cursor: auto; } .link.multimedia { - position: absolute; - -ms-touch-action: manipulation; - touch-action: manipulation; + position: absolute; + -ms-touch-action: manipulation; + touch-action: manipulation; - // Fix #2551 - overflow: hidden; + // Fix #2551 + overflow: hidden; - // Fix #2556 - &.tabslink { - overflow: visible; - } + // Fix #2556 + &.tabslink { + overflow: visible; + } - &.notinteractive { - pointer-events: none; - } + &.notinteractive { + pointer-events: none; + } - // Force images to take space provided (see: https://team.cubedesigners.com/redmine/issues/1457) - > img.multimediaimage { - width: 100%; - height: 100%; - } + // Force images to take space provided (see: https://team.cubedesigners.com/redmine/issues/1457) + > img.multimediaimage { + width: 100%; + height: 100%; + } } .link { - &[data-hidden="1"] { - transition: opacity 1s; - display: none; - opacity: 0; + &[data-hidden="1"] { + transition: opacity 1s; + display: none; + opacity: 0; - &.show { - opacity: 1; - } - } + &.show { + opacity: 1; + } + } } .link.contentLink { - z-index: 0 !important; - position: absolute; - pointer-events: none; + z-index: 0 !important; + position: absolute; + pointer-events: none; - &[data-animation-type="reveal"], &[data-animation-type="fadein"] { - display: none; - } + &[data-animation-type="reveal"], &[data-animation-type="fadein"] { + display: none; + } + + &.textLink { + white-space: nowrap; + opacity: 0; + } } @links-area-color: fadeout(@links-color, 70%); .link a { - width: 100%; - height: 100%; - display: block; - background-color: transparent; + width: 100%; + height: 100%; + display: block; + background-color: transparent; - &.displayArea { - -webkit-tap-highlight-color: @links-area-color; - background-color: fadeout(@links-color, 99.999%); + &.displayArea { + -webkit-tap-highlight-color: @links-area-color; + background-color: fadeout(@links-color, 99.999%); - &.animating { - background-color: @links-area-color; - } + &.animating { + background-color: @links-area-color; + } - .no-ftouch &:hover { - opacity: 1 !important; - background-color: @links-area-color; - } - } + .no-ftouch &:hover { + opacity: 1 !important; + background-color: @links-area-color; + } + } } #links .nonlinkarea { - width: 100%; - height: 100%; - position: absolute; - top: 0px; - left: 0px; - display: block; - cursor: zoom-in; + width: 100%; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + display: block; + cursor: zoom-in; } /* Bookmarks */ .bookmark { - #links & { - z-index: 4999; - width: @bookmark-corner-size; - height: @bookmark-corner-size; - background-size: @bookmark-corner-size @bookmark-corner-size; - - &.left { - left: @bookmark-corner-offset; - - .portrait #fluidbook & { - right: @bookmark-corner-offset+@book-page-width; - left: auto; - } - } - - &.right { - right: @bookmark-corner-offset; - } - } - - svg { - color: @bookmark-star-disabled-color; - } - - &[data-enabled] { - svg { - color: @bookmark-star-enabled-color; - } - } - - background-repeat: no-repeat; - position: absolute; - background-size: cover; - top: 0px; - opacity: 0.01; - display: block; - cursor: pointer; - - &[data-enabled], &:hover { - opacity: 1 !important; - transition: none; - } + #links & { + z-index: 4999; + width: @bookmark-corner-size; + height: @bookmark-corner-size; + background-size: @bookmark-corner-size @bookmark-corner-size; + + &.left { + left: @bookmark-corner-offset; + + .portrait #fluidbook & { + right: @bookmark-corner-offset+@book-page-width; + left: auto; + } + } + + &.right { + right: @bookmark-corner-offset; + } + } + + svg { + color: @bookmark-star-disabled-color; + } + + &[data-enabled] { + svg { + color: @bookmark-star-enabled-color; + } + } + + background-repeat: no-repeat; + position: absolute; + background-size: cover; + top: 0px; + opacity: 0.01; + display: block; + cursor: pointer; + + &[data-enabled], &:hover { + opacity: 1 !important; + transition: none; + } } .bookmark.left { - left: 0; + left: 0; } .bookmark.right, .portrait #fluidbook .bookmark.left { - right: 0; + right: 0; - svg { - transform: scaleX(-1); - } + svg { + transform: scaleX(-1); + } } .landscape .bookmark.left { - left: 0px; + left: 0px; } .bookmark.right { - right: 0px; + right: 0px; } @menu-padding: 30px; /* View */ #viewOverlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 21; - cursor: pointer; // Needed or click events don't work on iOS (see: https://stackoverflow.com/a/16006333) - .overlayBackground(); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 21; + cursor: pointer; // Needed or click events don't work on iOS (see: https://stackoverflow.com/a/16006333) + .overlayBackground(); } #view, #viewOverlay { - visibility: hidden; + visibility: hidden; } .mview { - .menu-color(@menu-background, @menu-button-background); - color: @menu-text; - position: absolute; - top: 0; - left: 0; - z-index: 22; - display: none; - overflow: hidden; - background-repeat: no-repeat; - background-size: 100% 100%; - max-width: 600px; - width: 100%; - - @menutransition: 400ms; - - transition: opacity @menutransition, top @menutransition; - - &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"] { - .caption { - height: 0; - padding: 0; - position: relative; - z-index: 4; - - a, div { - &.button.back { - width: 30px; - height: 30px; - padding: 10px; - font-size: 7px; - line-height: 10px; - } - } - } - - .ps__rail-x, .ps__rail-x { - z-index: 4; - } - } - - &[data-menu="text"] { - > .content > .text { - li { - list-style-position: outside; - margin-left: 1em; - } - } - } - - // Popup with close button outside - &[data-menu="iframe"], &[data-menu="text"] { - overflow: visible; - - a, div { - &.button.back { - right: -30px; - } - } - - &[data-type="10doigts"] { - border-radius: 15px; - - a, div { - &.button.back { - right: 0; - border-radius: 0 15px 0 0; - } - } - } - - &.fs { - a, div { - &.button.back { - top: 0px; - right: 0px; - } - } - } - } - - &[data-type="10doigts"] { - border-radius: 15px; - } - - &[data-menu="iframe"] { - .iframeContainer, .iframeHolder { - height: 100%; - background-color: #fff; - - &[data-type="10doigts"] { - border-radius: 15px; - } - } - - .content { - &[data-type="10doigts"] { - border-radius: 15px; - } - - overflow: hidden; - } - - - } - - &[data-menu="externalchapters"] { - .caption { - a, div { - &.button.back { - width: 60px; - height: 60px; - padding: 22px; - line-height: 1; - } - } - } - } - - &[data-menu="bookmarks-help"] { - .content { - padding: 40px 70px 100px 70px; - - p { - margin-bottom: 60px; - font-size: 0.9em; - text-align: center; - } - - @w: 147px; - - .doubleThumb { - position: relative; - width: @w*2; - height: @w/@book-page-ratio; - margin: 0 auto; - - .thumb { - - &:before { - display: none; - } - - &.left { - margin-right: @w; - - } - - &.right { - left: @w; - - .img { - &:after { - left: auto; - right: -24px; - } - } - } - - a.bookmark { - pointer-events: none; - } - - .img { - position: relative; - width: @w; - height: @w/@book-page-ratio; - - &:after { - content: ""; - position: absolute; - z-index: -1; - top: -24px; - left: -24px; - width: 100px; - height: 100px; - background-color: @menu-background; - border: 2px solid #fff; - border-radius: 50%; - } - - } - - .bookmark { - width: 60px; - height: 60px; - z-index: 2; - } - } - } - } - } - - .zoomhdHolder { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - - .zoomhdControls { - position: absolute; - bottom: 50px; - left: 50%; - width: 0; - - a { - position: absolute; - display: block; - top: -20px; - left: 10px; - width: 50px; - height: 50px; - border-radius: 50%; - background-color: @menu-button-background; - color: @menu-text; - - &.minus { - left: -60px; - } - } - } - - .zoomhdMove { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - - .zoomhdRefScale { - pointer-events: none; - position: absolute; - margin-top: -30px; - top: 50%; - left: 50%; - - .zoomhdScale { - position: absolute; - top: 50%; - left: 50%; - - .zoomhdImage { - opacity: 0; - transition: opacity 500ms; - position: absolute; - } - - img { - display: block; - } - } - } - } - - } - - &[data-menu="webvideo"], &[data-menu="webvideo"] { - iframe { - width: 100%; - height: 100%; - } - } - - .fonctions { - padding: 0 @menu-padding @menu-padding 0; - text-align: right; - - a { - line-height: 12px; - border-radius: 2px; - text-transform: uppercase; - margin: 0 0 0 10px; - padding: 16px 25px; - display: inline-block; - height: 45px; - text-align: center; - } - } - - &.fs { - .fonctions { - padding: 0 @menu-padding @menu-padding @menu-padding; - - a { - display: block; - margin: 0 0 10px 0; - - &:last-child { - margin: 0; - } - } - } - } - - &[data-chapters] { - max-width: 320px; - } - - &.animate { - transition: transform 600ms ease-out; - } - - .caption { - padding: 20px @menu-padding; - width: 100%; - height: 60px; - - h2 { - font-size: 16px; - line-height: 16px; - font-weight: 400; - margin: 0 auto; - white-space: nowrap; - } - - div.button, a { - height: 27px; - font-weight: 600; - font-size: 14px; - line-height: 25px; - display: block; - cursor: pointer; - - &.back { - position: absolute; - top: 0; - right: 0; - width: 60px; - height: 60px; - padding: 22px; - line-height: 1; - z-index: 1; - - &.small { - width: 30px; - height: 30px; - padding: 10px; - font-size: 7px; - line-height: 10px; - } - - .rtl & { - right: auto; - left: 0; - } - } - } - } - - .content { - text-align: center; - width: 100%; - overflow: hidden; - position: relative; - -webkit-overflow-scrolling: touch; - } + .menu-color(@menu-background, @menu-button-background); + color: @menu-text; + position: absolute; + top: 0; + left: 0; + z-index: 22; + display: none; + overflow: hidden; + background-repeat: no-repeat; + background-size: 100% 100%; + max-width: 600px; + width: 100%; + + @menutransition: 400ms; + + transition: opacity @menutransition, top @menutransition; + + &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"] { + .caption { + height: 0; + padding: 0; + position: relative; + z-index: 4; + + a, div { + &.button.back { + width: 30px; + height: 30px; + padding: 10px; + font-size: 7px; + line-height: 10px; + } + } + } + + .ps__rail-x, .ps__rail-x { + z-index: 4; + } + } + + &[data-menu="text"] { + > .content > .text { + li { + list-style-position: outside; + margin-left: 1em; + } + } + } + + // Popup with close button outside + &[data-menu="iframe"], &[data-menu="text"] { + overflow: visible; + + a, div { + &.button.back { + right: -30px; + } + } + + &[data-type="10doigts"] { + border-radius: 15px; + + a, div { + &.button.back { + right: 0; + border-radius: 0 15px 0 0; + } + } + } + + &.fs { + a, div { + &.button.back { + top: 0px; + right: 0px; + } + } + } + } + + &[data-type="10doigts"] { + border-radius: 15px; + } + + &[data-menu="iframe"] { + .iframeContainer, .iframeHolder { + height: 100%; + background-color: #fff; + + &[data-type="10doigts"] { + border-radius: 15px; + } + } + + .content { + &[data-type="10doigts"] { + border-radius: 15px; + } + + overflow: hidden; + } + + + } + + &[data-menu="externalchapters"] { + .caption { + a, div { + &.button.back { + width: 60px; + height: 60px; + padding: 22px; + line-height: 1; + } + } + } + } + + &[data-menu="bookmarks-help"] { + .content { + padding: 40px 70px 100px 70px; + + p { + margin-bottom: 60px; + font-size: 0.9em; + text-align: center; + } + + @w: 147px; + + .doubleThumb { + position: relative; + width: @w*2; + height: @w/@book-page-ratio; + margin: 0 auto; + + .thumb { + + &:before { + display: none; + } + + &.left { + margin-right: @w; + + } + + &.right { + left: @w; + + .img { + &:after { + left: auto; + right: -24px; + } + } + } + + a.bookmark { + pointer-events: none; + } + + .img { + position: relative; + width: @w; + height: @w/@book-page-ratio; + + &:after { + content: ""; + position: absolute; + z-index: -1; + top: -24px; + left: -24px; + width: 100px; + height: 100px; + background-color: @menu-background; + border: 2px solid #fff; + border-radius: 50%; + } + + } + + .bookmark { + width: 60px; + height: 60px; + z-index: 2; + } + } + } + } + } + + .zoomhdHolder { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + + .zoomhdControls { + position: absolute; + bottom: 50px; + left: 50%; + width: 0; + + a { + position: absolute; + display: block; + top: -20px; + left: 10px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: @menu-button-background; + color: @menu-text; + + &.minus { + left: -60px; + } + } + } + + .zoomhdMove { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + + .zoomhdRefScale { + pointer-events: none; + position: absolute; + margin-top: -30px; + top: 50%; + left: 50%; + + .zoomhdScale { + position: absolute; + top: 50%; + left: 50%; + + .zoomhdImage { + opacity: 0; + transition: opacity 500ms; + position: absolute; + } + + img { + display: block; + } + } + } + } + + } + + &[data-menu="webvideo"], &[data-menu="webvideo"] { + iframe { + width: 100%; + height: 100%; + } + } + + .fonctions { + padding: 0 @menu-padding @menu-padding 0; + text-align: right; + + a { + line-height: 12px; + border-radius: 2px; + text-transform: uppercase; + margin: 0 0 0 10px; + padding: 16px 25px; + display: inline-block; + height: 45px; + text-align: center; + } + } + + &.fs { + .fonctions { + padding: 0 @menu-padding @menu-padding @menu-padding; + + a { + display: block; + margin: 0 0 10px 0; + + &:last-child { + margin: 0; + } + } + } + } + + &[data-chapters] { + max-width: 320px; + } + + &.animate { + transition: transform 600ms ease-out; + } + + .caption { + padding: 20px @menu-padding; + width: 100%; + height: 60px; + + h2 { + font-size: 16px; + line-height: 16px; + font-weight: 400; + margin: 0 auto; + white-space: nowrap; + } + + div.button, a { + height: 27px; + font-weight: 600; + font-size: 14px; + line-height: 25px; + display: block; + cursor: pointer; + + &.back { + position: absolute; + top: 0; + right: 0; + width: 60px; + height: 60px; + padding: 22px; + line-height: 1; + z-index: 1; + + &.small { + width: 30px; + height: 30px; + padding: 10px; + font-size: 7px; + line-height: 10px; + } + + .rtl & { + right: auto; + left: 0; + } + } + } + } + + .content { + text-align: center; + width: 100%; + overflow: hidden; + position: relative; + -webkit-overflow-scrolling: touch; + } } form input[type="text"], form input[type="email"] { - background-color: @menu-field-background; - color: @menu-field-text; + background-color: @menu-field-background; + color: @menu-field-text; } #indexView { - #indexViewHolder { - margin: auto; - text-align: left; - } - - .doubleThumb, .padding { - display: inline-block; - padding: 10px 10px 25px 10px; - margin: 0 5px 15px; - position: relative; - width: 200px; - cursor: pointer; - text-align: center; - box-sizing: content-box; - border-radius: 3px; - - &.singlemode { - width: 100px; - } - } - - &.bookmarkView { - @padding: @menu-padding - 10px; - text-align: left; - width: 100%; - padding: 20px @padding 0; - - .doubleThumb { - width: 100px; - } - } + #indexViewHolder { + margin: auto; + text-align: left; + } + + .doubleThumb, .padding { + display: inline-block; + padding: 10px 10px 25px 10px; + margin: 0 5px 15px; + position: relative; + width: 200px; + cursor: pointer; + text-align: center; + box-sizing: content-box; + border-radius: 3px; + + &.singlemode { + width: 100px; + } + } + + &.bookmarkView { + @padding: @menu-padding - 10px; + text-align: left; + width: 100%; + padding: 20px @padding 0; + + .doubleThumb { + width: 100px; + } + } } #indexViewMessage { - padding: 2em 0; - text-align: center; + padding: 2em 0; + text-align: center; } .doubleThumb { - height: @thumb-height; - - &.left { - margin-right: 10px; - } - - &.simple { - .overlay { - width: 100px; - } - - &.left { - .hits { - left: -50px; - } - - &.singlemode { - .hits { - left: 0px; - } - } - } - - &.right { - .hits { - left: 50px; - } - } - } - - &.here { - background-color: @menu-select-background; - color: @menu-select-text; - } - - .overlay { - background-color: rgba(0, 0, 0, 0.5); - position: absolute; - top: 0px; - left: 0px; - width: 200px; - z-index: 4; - } - - @hits-top: (@thumb-height - 26) / 2; - - .hits { - position: relative; - display: inline; - - z-index: 5; - font-size: 12px; - height: 26px; - top: @hits-top; - - &.yes { - padding: 5px; - border-radius: 1px; - color: @menu-text; - background-color: @menu-background; - } - } + height: @thumb-height; + + &.left { + margin-right: 10px; + } + + &.simple { + .overlay { + width: 100px; + } + + &.left { + .hits { + left: -50px; + } + + &.singlemode { + .hits { + left: 0px; + } + } + } + + &.right { + .hits { + left: 50px; + } + } + } + + &.here { + background-color: @menu-select-background; + color: @menu-select-text; + } + + .overlay { + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + top: 0px; + left: 0px; + width: 200px; + z-index: 4; + } + + @hits-top: (@thumb-height - 26) / 2; + + .hits { + position: relative; + display: inline; + + z-index: 5; + font-size: 12px; + height: 26px; + top: @hits-top; + + &.yes { + padding: 5px; + border-radius: 1px; + color: @menu-text; + background-color: @menu-background; + } + } } .padding { - height: 1px; + height: 1px; } .thumb { - position: absolute; - - .bookmark { - width: 35px; - height: 35px; - z-index: 2; - } - - .img { - width: 100px; - height: @thumb-height; - background-color: transparent; - position: relative; - z-index: 1; - background-blend-mode: normal, overlay; - // Fix #2631 - .android.chrome &{ - background-blend-mode: normal, normal; - } - background-repeat: no-repeat; - } - - .number { - text-align: center; - display: block; - margin: 0; - padding: 5px 0 0 0; - max-width: 100px; - position: relative; - z-index: 1; - font-size: 14px; - line-height: 1; - } - - &.right { - left: 110px; - } - - &.simple { - width: 100px; - - &.right { - margin-left: 100px; - } - } - - &.left { - margin-right: 100px; - } - - @extrashadowheight: min(22, @thumb-height*0.2); - @shade-height: unit(@thumb-height+@extrashadowheight, px); - - &:before { - position: absolute; - content: ""; - background-image: url("../images/shadows/thumbnails/back.png"); - background-size: 100% 100%; - background-repeat: no-repeat; - opacity: 0.65; - top: -5px; - left: -5px; - width: 111px; - height: @shade-height; - z-index: 0; - } + position: absolute; + + .bookmark { + width: 35px; + height: 35px; + z-index: 2; + } + + .img { + width: 100px; + height: @thumb-height; + background-color: transparent; + position: relative; + z-index: 1; + background-blend-mode: normal, overlay; + // Fix #2631 + .android.chrome & { + background-blend-mode: normal, normal; + } + + background-repeat: no-repeat; + } + + .number { + text-align: center; + display: block; + margin: 0; + padding: 5px 0 0 0; + max-width: 100px; + position: relative; + z-index: 1; + font-size: 14px; + line-height: 1; + } + + &.right { + left: 110px; + } + + &.simple { + width: 100px; + + &.right { + margin-left: 100px; + } + } + + &.left { + margin-right: 100px; + } + + @extrashadowheight: min(22, @thumb-height*0.2); + @shade-height: unit(@thumb-height+@extrashadowheight, px); + + &:before { + position: absolute; + content: ""; + background-image: url("../images/shadows/thumbnails/back.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + opacity: 0.65; + top: -5px; + left: -5px; + width: 111px; + height: @shade-height; + z-index: 0; + } } /* Share */ ul.chapters.shareList a.level0 .svg-icon { - height: 25px; - width: 25px; - display: inline-block; - vertical-align: middle; - margin: 0 10px 6px 0; + height: 25px; + width: 25px; + display: inline-block; + vertical-align: middle; + margin: 0 10px 6px 0; - .rtl & { - margin: 0 0 6px 10px; - } + .rtl & { + margin: 0 0 6px 10px; + } } @import "help"; /* Archives */ #archivesview { - position: relative; - overflow: hidden; - top: 44px; + position: relative; + overflow: hidden; + top: 44px; } #archivesview .links { - position: absolute; - top: 0px; - left: 0px; + position: absolute; + top: 0px; + left: 0px; } #archivesview .links .link { - position: absolute; + position: absolute; } /* Inner view */ #innerView { - position: absolute; - top: 0px; - left: 0px; - z-index: 30; - display: none; - - > div { - position: absolute; - border-radius: 10px; - padding: 20px; - font-size: 0.8rem; - background-color: @menu-background; - color: @menu-text; - - p { - margin: 0 0 20px 0; - } - } - - form { - input { - &[type="text"], &[type="email"] { - font-family: @font; - padding: 5px; - border-radius: 1px; - border: 0; - width: 100%; - margin: 7px 0; - } - } - } - - .close { - position: absolute; - top: 0px; - right: 0px; - width: 34px; - height: 34px; - display: block; - background-image: url("../data/images/interface-close.svg"); - background-size: 14px 14px; - background-position: 50% 50%; - background-repeat: no-repeat; - } - - input[type="submit"] { - background-image: -moz-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Chrome10+,Safari5.1+ */ - background-image: -o-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Opera 11.10+ */ - background-image: -ms-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* IE10+ */ - background-image: linear-gradient(to bottom, #ffffff 0%, #a2a2a2 100%); /* W3C */ - border: 0; - color: #000; - font-weight: bold; - position: absolute; - right: 20px; - bottom: 20px; - padding: 4px 10px 6px; - border-radius: 1px; - display: inline-block; - cursor: pointer; - } + position: absolute; + top: 0px; + left: 0px; + z-index: 30; + display: none; + + > div { + position: absolute; + border-radius: 10px; + padding: 20px; + font-size: 0.8rem; + background-color: @menu-background; + color: @menu-text; + + p { + margin: 0 0 20px 0; + } + } + + form { + input { + &[type="text"], &[type="email"] { + font-family: @font; + padding: 5px; + border-radius: 1px; + border: 0; + width: 100%; + margin: 7px 0; + } + } + } + + .close { + position: absolute; + top: 0px; + right: 0px; + width: 34px; + height: 34px; + display: block; + background-image: url("../data/images/interface-close.svg"); + background-size: 14px 14px; + background-position: 50% 50%; + background-repeat: no-repeat; + } + + input[type="submit"] { + background-image: -moz-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* FF3.6+ */ + background-image: -webkit-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Chrome10+,Safari5.1+ */ + background-image: -o-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* Opera 11.10+ */ + background-image: -ms-linear-gradient(top, #ffffff 0%, #a2a2a2 100%); /* IE10+ */ + background-image: linear-gradient(to bottom, #ffffff 0%, #a2a2a2 100%); /* W3C */ + border: 0; + color: #000; + font-weight: bold; + position: absolute; + right: 20px; + bottom: 20px; + padding: 4px 10px 6px; + border-radius: 1px; + display: inline-block; + cursor: pointer; + } } @import "fluidbook.video.less"; /* multimedia */ .mview { - .multimediaContainer { - padding: 0; - position: relative; - - &:after { - content: ''; - position: absolute; - z-index: 2; - width: 100%; - height: 100%; - top: 0; - left: 0; - pointer-events: auto; - } - } - - img.multimedia { - position: relative; - z-index: 1; - width: 100%; - height: auto; - display: block; - } - - .text { - padding: 20px; - white-space: pre-line; - text-align: left; - } - - &[data-menu="multimedia"] { - background: transparent; - - &.fs { - background: @menu-background; - } - } - - .links { - position: absolute; - top: 0; - left: 0; - - .link { - position: absolute; - } - } + .multimediaContainer { + padding: 0; + position: relative; + + &:after { + content: ''; + position: absolute; + z-index: 2; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: auto; + } + } + + img.multimedia { + position: relative; + z-index: 1; + width: 100%; + height: auto; + display: block; + } + + .text { + padding: 20px; + white-space: pre-line; + text-align: left; + } + + &[data-menu="multimedia"] { + background: transparent; + + &.fs { + background: @menu-background; + } + } + + .links { + position: absolute; + top: 0; + left: 0; + + .link { + position: absolute; + } + } } // Chapters ul.chapters { - list-style: none; - padding: 20px 0; + list-style: none; + padding: 20px 0; - ul { - list-style: none; - } - - > li { - clear: both; - } + ul { + list-style: none; + } + + > li { + clear: both; + } - li { - position: relative; - - &[data-level="1"] + [data-level="0"] { - margin-top: 15px; - } - - &[data-level="2"] + [data-level="1"] { - margin-top: 10px; - } - - &[data-level="3"] + [data-level="2"] { - margin-top: 5px; - } - - &.separator { - height: 20px; - } - } - - a { - font-size: 16px; - display: block; - text-align: left; - padding: 5px 32px; - transition: background-color 250ms; - - .rtl & { - text-align: right; - } - - &.level-1 { - font-family: @font; - font-weight: 400; - text-align: center; - - .right { - display: none; - } - } - - &.level0 { - font-family: @font; - font-weight: 400; - - .right .puce { - margin: 2px 0 0 0; - } - - } - - &.level1 { - padding-left: 50px; - - .rtl & { - padding-left: 0; - padding-right: 50px; - } - - } - - &.level2 { - padding-left: 80px; - - .rtl & { - padding-left: 0; - padding-right: 80px; - } - - .right .puce { - margin: -2px 0 0 0; - } - } - - .level3 { - padding-left: 110px; - - .rtl & { - padding-left: 0; - padding-right: 110px; - } - } - - > nav { - display: none; - } - } - - li > a > span { - display: block; - padding-right: 30px; - - .rtl & { - padding-right: 0; - padding-left: 30px; - } - - } - - .right { - right: 32px; - top: 5px; - position: absolute; - display: inline-block; - vertical-align: top; - width: 25px; - height: 25px; - text-align: center; - - .rtl & { - right: auto; - left: 32px; - } - - .puce { - width: 25px; - height: 25px; - color: #fff; - position: relative; - display: flex; - align-items: center; - justify-content: center; - - .rtl & { - transform: rotate(180deg); - } - - svg { - width: 16px; - height: 16px; - } - - border-radius: 1px; - - &.noshadow { - border-radius: 0px; - - box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); - -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); - -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); - -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); - -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); - - margin: 0 0 0 15px; - float: right; - } - } - } + li { + position: relative; + + &[data-level="1"] + [data-level="0"] { + margin-top: 15px; + } + + &[data-level="2"] + [data-level="1"] { + margin-top: 10px; + } + + &[data-level="3"] + [data-level="2"] { + margin-top: 5px; + } + + &.separator { + height: 20px; + } + } + + a { + font-size: 16px; + display: block; + text-align: left; + padding: 5px 32px; + transition: background-color 250ms; + + .rtl & { + text-align: right; + } + + &.level-1 { + font-family: @font; + font-weight: 400; + text-align: center; + + .right { + display: none; + } + } + + &.level0 { + font-family: @font; + font-weight: 400; + + .right .puce { + margin: 2px 0 0 0; + } + + } + + &.level1 { + padding-left: 50px; + + .rtl & { + padding-left: 0; + padding-right: 50px; + } + + } + + &.level2 { + padding-left: 80px; + + .rtl & { + padding-left: 0; + padding-right: 80px; + } + + .right .puce { + margin: -2px 0 0 0; + } + } + + .level3 { + padding-left: 110px; + + .rtl & { + padding-left: 0; + padding-right: 110px; + } + } + + > nav { + display: none; + } + } + + li > a > span { + display: block; + padding-right: 30px; + + .rtl & { + padding-right: 0; + padding-left: 30px; + } + + } + + .right { + right: 32px; + top: 5px; + position: absolute; + display: inline-block; + vertical-align: top; + width: 25px; + height: 25px; + text-align: center; + + .rtl & { + right: auto; + left: 32px; + } + + .puce { + width: 25px; + height: 25px; + color: #fff; + position: relative; + display: flex; + align-items: center; + justify-content: center; + + .rtl & { + transform: rotate(180deg); + } + + svg { + width: 16px; + height: 16px; + } + + border-radius: 1px; + + &.noshadow { + border-radius: 0px; + + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); + -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); + -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); + -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); + -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0); + + margin: 0 0 0 15px; + float: right; + } + } + } } /* ipad mag */ .pad #pagesnumbers, .pad footer { - display: none; + display: none; } .pad #interface, .pad header { - opacity: 0; - visibility: hidden; - z-index: 21; + opacity: 0; + visibility: hidden; + z-index: 21; } .pad #interface { - position: absolute; - top: 0px; - left: 0px; - width: 100%; + position: absolute; + top: 0px; + left: 0px; + width: 100%; } #down { - display: none; + display: none; } .pad #down { - display: block; - width: 40px; - height: 40px; - border-radius: 1px; - background-image: url("../data/images/interface-down.svg"); - background-repeat: no-repeat; - padding: 8px 8px 8px 8px; - position: absolute; - bottom: 10px; - right: 10px; - background-size: 24px 24px; - background-position: 50% 50%; - z-index: 22; - opacity: 0; - background-color: rgba(0, 0, 0, 0.6); - - transition: all .15s ease-out; - transform-origin: 50% 20px; - - -moz-transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); + display: block; + width: 40px; + height: 40px; + border-radius: 1px; + background-image: url("../data/images/interface-down.svg"); + background-repeat: no-repeat; + padding: 8px 8px 8px 8px; + position: absolute; + bottom: 10px; + right: 10px; + background-size: 24px 24px; + background-position: 50% 50%; + z-index: 22; + opacity: 0; + background-color: rgba(0, 0, 0, 0.6); + + transition: all .15s ease-out; + transform-origin: 50% 20px; + + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); } #down.right { - -moz-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); } /* Transitions */ .doublePage { - &._2d, &._3d { - .page-transition(1); - } + &._2d, &._3d { + .page-transition(1); + } } /* 2D */ .doublePage._2d.sliding { - transition: none; + transition: none; } /* 3D Flip */ #flip3dcontainer { - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 12; - pointer-events: none; - display: none; - overflow: hidden; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 12; + pointer-events: none; + display: none; + overflow: hidden; - canvas { - position: relative; - left: 0; - } + canvas { + position: relative; + left: 0; + } } .ios #pages { - transform: translateZ(1); + transform: translateZ(1); } /* 3D */ #pages._3dtransition { - -moz-perspective-origin: 50% 75%; - -webkit-perspective-origin: 50% 75%; - -ms-perspective-origin: 50% 75%; - -o-perspective-origin: 50% 75%; - perspective-origin: 50% 75%; + -moz-perspective-origin: 50% 75%; + -webkit-perspective-origin: 50% 75%; + -ms-perspective-origin: 50% 75%; + -o-perspective-origin: 50% 75%; + perspective-origin: 50% 75%; - -moz-perspective: 5000px; - -webkit-perspective: 5000px; - -o-perspective: 5000px; - -ms-perspective: 5000px; - perspective: 5000px; + -moz-perspective: 5000px; + -webkit-perspective: 5000px; + -o-perspective: 5000px; + -ms-perspective: 5000px; + perspective: 5000px; - overflow: visible !important; + overflow: visible !important; } .doublePage._3d { - overflow: visible; - z-index: 100; + overflow: visible; + z-index: 100; - -moz-transform-style: preserve-3d; - -webkit-transform-style: preserve-3d; - -o-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -webkit-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; } ._3d .page { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -o-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; + -moz-backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -o-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; - left: 0px !important; + left: 0px !important; } .doublePage._3d .right { - -webkit-transform: rotate3d(0, 1, 0, 0deg); - -o-transform: rotate3d(0, 1, 0, 0deg); - -ms-transform: rotate3d(0, 1, 0, 0deg); - transform: rotate3d(0, 1, 0, 0deg); - -moz-transform: rotateY(0deg) translate3d(0, 0, 0); + -webkit-transform: rotate3d(0, 1, 0, 0deg); + -o-transform: rotate3d(0, 1, 0, 0deg); + -ms-transform: rotate3d(0, 1, 0, 0deg); + transform: rotate3d(0, 1, 0, 0deg); + -moz-transform: rotateY(0deg) translate3d(0, 0, 0); } .mozrotation .doublePage._3d .right { - -moz-transform: rotateY(0deg) translate3d(0, 0, 0); - transform: rotateY(0deg) translate3d(0, 0, 0); + -moz-transform: rotateY(0deg) translate3d(0, 0, 0); + transform: rotateY(0deg) translate3d(0, 0, 0); } .doublePage._3d .left { - -webkit-transform: rotate3d(0, 1, 0, 180deg); - -o-transform: rotate3d(0, 1, 0, 180deg); - -ms-transform: rotate3d(0, 1, 0, 180deg); - transform: rotate3d(0, 1, 0, 180deg); - -moz-transform: rotateY(180deg) translate3d(0, 0, 0); + -webkit-transform: rotate3d(0, 1, 0, 180deg); + -o-transform: rotate3d(0, 1, 0, 180deg); + -ms-transform: rotate3d(0, 1, 0, 180deg); + transform: rotate3d(0, 1, 0, 180deg); + -moz-transform: rotateY(180deg) translate3d(0, 0, 0); } .mozrotation .doublePage._3d .left { - transform: rotateY(180deg) translate3d(0, 0, 0); - -moz-transform: rotateY(180deg) translate3d(0, 0, 0); + transform: rotateY(180deg) translate3d(0, 0, 0); + -moz-transform: rotateY(180deg) translate3d(0, 0, 0); } .doublePage._3d.nextstart { - -webkit-transform: rotate3d(0, 1, 0, 360deg); - -o-transform: rotate3d(0, 1, 0, 360deg); - -ms-transform: rotate3d(0, 1, 0, 360deg); - transform: rotate3d(0, 1, 0, 360deg); - -moz-transform: rotateY(360deg) translate3d(0, 0, 0); + -webkit-transform: rotate3d(0, 1, 0, 360deg); + -o-transform: rotate3d(0, 1, 0, 360deg); + -ms-transform: rotate3d(0, 1, 0, 360deg); + transform: rotate3d(0, 1, 0, 360deg); + -moz-transform: rotateY(360deg) translate3d(0, 0, 0); - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -o-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; + -moz-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + -o-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; } .mozrotation .doublePage._3d.nextstart { - -moz-transform: rotateY(360deg) translate3d(0, 0, 0); - transform: rotateY(360deg) translate3d(0, 0, 0); + -moz-transform: rotateY(360deg) translate3d(0, 0, 0); + transform: rotateY(360deg) translate3d(0, 0, 0); } .doublePage._3d.nextend { - -webkit-transform: rotate3d(0, 1, 0, 180deg); - -o-transform: rotate3d(0, 1, 0, 180deg); - -ms-transform: rotate3d(0, 1, 0, 180deg); - transform: rotate3d(0, 1, 0, 180deg); - -moz-transform: rotateY(180deg) translate3d(0, 0, 0); + -webkit-transform: rotate3d(0, 1, 0, 180deg); + -o-transform: rotate3d(0, 1, 0, 180deg); + -ms-transform: rotate3d(0, 1, 0, 180deg); + transform: rotate3d(0, 1, 0, 180deg); + -moz-transform: rotateY(180deg) translate3d(0, 0, 0); } .mozrotation .doublePage._3d.nextend { - -moz-transform: rotateY(180deg) translate3d(0, 0, 0); - transform: rotateY(180deg) translate3d(0, 0, 0); + -moz-transform: rotateY(180deg) translate3d(0, 0, 0); + transform: rotateY(180deg) translate3d(0, 0, 0); } .doublePage._3d.prevstart { - -webkit-transform: rotate3d(0, 1, 0, 180deg); - -o-transform: rotate3d(0, 1, 0, 180deg); - -ms-transform: rotate3d(0, 1, 0, 180deg); - transform: rotate3d(0, 1, 0, 180deg); - -moz-transform: rotateY(180deg) translate3d(0, 0, 0); + -webkit-transform: rotate3d(0, 1, 0, 180deg); + -o-transform: rotate3d(0, 1, 0, 180deg); + -ms-transform: rotate3d(0, 1, 0, 180deg); + transform: rotate3d(0, 1, 0, 180deg); + -moz-transform: rotateY(180deg) translate3d(0, 0, 0); - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - -o-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; + -moz-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + -o-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; } .mozrotation .doublePage._3d.prevstart { - -moz-transform: rotateY(180deg) translate3d(0, 0, 0); - transform: rotateY(180deg) translate3d(0, 0, 0); + -moz-transform: rotateY(180deg) translate3d(0, 0, 0); + transform: rotateY(180deg) translate3d(0, 0, 0); } .doublePage._3d.prevend { - -webkit-transform: rotate3d(0, 1, 0, 360deg); - -o-transform: rotate3d(0, 1, 0, 360deg); - -ms-transform: rotate3d(0, 1, 0, 360deg); - transform: rotate3d(0, 1, 0, 360deg); - -moz-transform: rotateY(360deg) translate3d(0, 0, 0); + -webkit-transform: rotate3d(0, 1, 0, 360deg); + -o-transform: rotate3d(0, 1, 0, 360deg); + -ms-transform: rotate3d(0, 1, 0, 360deg); + transform: rotate3d(0, 1, 0, 360deg); + -moz-transform: rotateY(360deg) translate3d(0, 0, 0); } .mozrotation .doublePage._3d.prevend { - -moz-transform: rotateY(360deg) translate3d(0, 0, 0); - transform: rotateY(360deg) translate3d(0, 0, 0); + -moz-transform: rotateY(360deg) translate3d(0, 0, 0); + transform: rotateY(360deg) translate3d(0, 0, 0); } #fontsLoader { - position: absolute; - bottom: 0px; - right: 0px; - width: 0; - height: 0px; - overflow: hidden; + position: absolute; + bottom: 0px; + right: 0px; + width: 0; + height: 0px; + overflow: hidden; } /* Splash screen */ #splash { - position: absolute; - top: 0; - left: 0; - z-index: 40; - width: 100%; - height: 100%; - - .logo { - position: absolute; - - // Make sure logo fits and is centred even on small screens - img { - transition: opacity 400ms linear; - max-width: 95%; - height: auto; - display: block; - margin: 0 auto; - opacity: 0; - } - } + position: absolute; + top: 0; + left: 0; + z-index: 40; + width: 100%; + height: 100%; + + .logo { + position: absolute; + + // Make sure logo fits and is centred even on small screens + img { + transition: opacity 400ms linear; + max-width: 95%; + height: auto; + display: block; + margin: 0 auto; + opacity: 0; + } + } } #popinOverlay { - position: absolute; - z-index: 29; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.3); - display: none; + position: absolute; + z-index: 29; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.3); + display: none; } #popinOverlay iframe { - background-color: #fff; - overflow: hidden; + background-color: #fff; + overflow: hidden; } #popinOverlay > * { - position: absolute; - z-index: 30; - top: 0px; - left: 0px; + position: absolute; + z-index: 30; + top: 0px; + left: 0px; } /* Tooltip */ #tooltip { - @tooltip-arrows-size: 10px; - - position: absolute; - background-color: @tooltip-background; - color: @tooltip-color; - top: 0px; - left: 0px; - padding: 20px 25px; - border-radius: 3px; - display: none; - font-size: 14px; - z-index: 100; - white-space: pre-wrap; - line-height: 16px; - -moz-transform-origin: 0 0; - -ms-transform-origin: 0 0; - -o-transform-origin: 0 0; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - box-sizing: border-box; - pointer-events: none; - - &[data-style="invert"] { - font-weight: 700; - background-color: @tooltip-color; - color: @tooltip-background; - - &[data-pos-y="n"] { - &:after { - border-bottom-color: @tooltip-color; - } - } - - &[data-pos-y="s"] { - &:after { - border-top-color: @tooltip-color; - } - } - } - - &[data-style="error"] { - font-weight: 700; - background-color: #cc0000; - color: #fff; - - &[data-pos-y="n"] { - &:after { - border-bottom-color: #cc0000; - } - } - - &[data-pos-y="s"] { - &:after { - border-top-color: #cc0000; - } - } - } - - &:after { - content: ""; - position: absolute; - width: 0; - height: 0; - border-left: @tooltip-arrows-size solid transparent; - border-right: @tooltip-arrows-size solid transparent; - display: block; - } - - &[data-pos-y="n"] { - &:after { - border-bottom: @tooltip-arrows-size solid @tooltip-background; - top: unit(@tooltip-arrows-size*-1, px); - } - } - - &[data-pos-y="s"] { - &:after { - border-top: @tooltip-arrows-size solid @tooltip-background; - bottom: unit(@tooltip-arrows-size*-1, px); - } - } - - &[data-pos-x="w"] { - &:after { - left: 16px; - } - } - - &[data-pos-x="e"] { - &:after { - right: 16px; - } - } + @tooltip-arrows-size: 10px; + + position: absolute; + background-color: @tooltip-background; + color: @tooltip-color; + top: 0px; + left: 0px; + padding: 20px 25px; + border-radius: 3px; + display: none; + font-size: 14px; + z-index: 100; + white-space: pre-wrap; + line-height: 16px; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + -o-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + box-sizing: border-box; + pointer-events: none; + + &[data-style="invert"] { + font-weight: 700; + background-color: @tooltip-color; + color: @tooltip-background; + + &[data-pos-y="n"] { + &:after { + border-bottom-color: @tooltip-color; + } + } + + &[data-pos-y="s"] { + &:after { + border-top-color: @tooltip-color; + } + } + } + + &[data-style="error"] { + font-weight: 700; + background-color: #cc0000; + color: #fff; + + &[data-pos-y="n"] { + &:after { + border-bottom-color: #cc0000; + } + } + + &[data-pos-y="s"] { + &:after { + border-top-color: #cc0000; + } + } + } + + &:after { + content: ""; + position: absolute; + width: 0; + height: 0; + border-left: @tooltip-arrows-size solid transparent; + border-right: @tooltip-arrows-size solid transparent; + display: block; + } + + &[data-pos-y="n"] { + &:after { + border-bottom: @tooltip-arrows-size solid @tooltip-background; + top: unit(@tooltip-arrows-size*-1, px); + } + } + + &[data-pos-y="s"] { + &:after { + border-top: @tooltip-arrows-size solid @tooltip-background; + bottom: unit(@tooltip-arrows-size*-1, px); + } + } + + &[data-pos-x="w"] { + &:after { + left: 16px; + } + } + + &[data-pos-x="e"] { + &:after { + right: 16px; + } + } } /* Privacy settings */ #cookieConsent { - background-color: rgba(0, 0, 0, 0.8); - position: fixed; - bottom: 0; - left: 0; - width: 100%; - padding: 20px 40px; - z-index: 20; - - a.close { - position: absolute; - top: 0px; - right: 0px; - padding: 20px; - background-image: url("../images/close.svg"); - background-size: 16px 16px; - background-repeat: no-repeat; - background-position: 20px 20px; - width: 56px; - height: 56px; - } - - p { - text-align: center; - color: #ffffff; - font-size: 15px; - margin: 0 auto; - max-width: 1100px; - - a { - white-space: nowrap; - text-decoration: underline; - } - } + background-color: rgba(0, 0, 0, 0.8); + position: fixed; + bottom: 0; + left: 0; + width: 100%; + padding: 20px 40px; + z-index: 20; + + a.close { + position: absolute; + top: 0px; + right: 0px; + padding: 20px; + background-image: url("../images/close.svg"); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: 20px 20px; + width: 56px; + height: 56px; + } + + p { + text-align: center; + color: #ffffff; + font-size: 15px; + margin: 0 auto; + max-width: 1100px; + + a { + white-space: nowrap; + text-decoration: underline; + } + } } /* Zoom Image Popups */ #zoomPopupOverlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 100; - display: none; - .overlayBackground(); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + display: none; + .overlayBackground(); } // Depending on the layout, hide one of the close buttons // We need to define both first and last rules in case there is only one zoom zone // In this case, the last written rule will apply #zoomPopupGroupWrapper { - &.layout-stacked { - .zoomPopupWrapper:last-of-type .zoomPopupClose { - display: none; - } + &.layout-stacked { + .zoomPopupWrapper:last-of-type .zoomPopupClose { + display: none; + } - .zoomPopupWrapper:first-of-type .zoomPopupClose { - display: block; - } - } + .zoomPopupWrapper:first-of-type .zoomPopupClose { + display: block; + } + } - &.layout-side-by-side { - .zoomPopupWrapper:first-of-type .zoomPopupClose { - display: none; - } + &.layout-side-by-side { + .zoomPopupWrapper:first-of-type .zoomPopupClose { + display: none; + } - .zoomPopupWrapper:last-of-type .zoomPopupClose { - display: block; - } - } + .zoomPopupWrapper:last-of-type .zoomPopupClose { + display: block; + } + } } .zoomPopupWrapper, .zoomPopupClose { - cursor: zoom-out !important; // Needed for close link, otherwise pointer cursor is used + cursor: zoom-out !important; // Needed for close link, otherwise pointer cursor is used } .zoomPopupWrapper { - display: none; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all 0.5s ease-in-out; - transform-origin: 0 0; - position: absolute; - z-index: 101; - - &:hover { - .zoomPopupClose { - opacity: 1; - } - } - - img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - z-index: 102; - } - - .zoomPopupClose { - @zoom-close-button-size: 30px; - - position: absolute; - top: 0; - right: -@zoom-close-button-size; - width: @zoom-close-button-size; - height: @zoom-close-button-size; - padding: 11px; - z-index: 103; - background-color: @menu-button-background; - color: @menu-text; - opacity: 1; - transition: opacity 250ms; - - .svg-icon { - display: block; // Needed for proper positioning in centre of square - } - - .rtl & { - right: auto; - left: 0; - } - } + display: none; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: all 0.5s ease-in-out; + transform-origin: 0 0; + position: absolute; + z-index: 101; + + &:hover { + .zoomPopupClose { + opacity: 1; + } + } + + img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + z-index: 102; + } + + .zoomPopupClose { + @zoom-close-button-size: 30px; + + position: absolute; + top: 0; + right: -@zoom-close-button-size; + width: @zoom-close-button-size; + height: @zoom-close-button-size; + padding: 11px; + z-index: 103; + background-color: @menu-button-background; + color: @menu-text; + opacity: 1; + transition: opacity 250ms; + + .svg-icon { + display: block; // Needed for proper positioning in centre of square + } + + .rtl & { + right: auto; + left: 0; + } + } } @import "lib/perfect-scrollbar.less"; @media handled and (orientation: portrait) { - #ol { - display: none; - } + #ol { + display: none; + } - @-ms-viewport { - width: 800px; - } + @-ms-viewport { + width: 800px; + } } @media handled and (orientation: landscape) { - #op { - display: none; - } + #op { + display: none; + } - @-ms-viewport { - width: 1280px; - } + @-ms-viewport { + width: 1280px; + } } /* Blur input */ body > input { - position: absolute; - bottom: 0; - left: 0; + position: absolute; + bottom: 0; + left: 0; } /* SVG Sprite */ [class^="interface-"], [class*=" interface-"], [class^="nav-"], [class*=" nav-"], [class^="share-"], [class*=" share-"] { - display: inline-block; - fill: currentColor; + display: inline-block; + fill: currentColor; } /* Icon states */ .icon-fullscreen { - // Full screen exit icon hidden by default - .nav-fullscreen-exit { - display: none; - } + // Full screen exit icon hidden by default + .nav-fullscreen-exit { + display: none; + } - // Switch icons - &.active { - .nav-fullscreen-exit { - display: inline-block; - } + // Switch icons + &.active { + .nav-fullscreen-exit { + display: inline-block; + } - .nav-fullscreen { - display: none; - } - } + .nav-fullscreen { + display: none; + } + } } .links .link.multimedia { - .tabs { - transition: opacity 400ms; - position: relative; - - &.hide { - opacity: 0; - pointer-events: none; - } - - .tablink { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: block; - background: none !important; - } - } + .tabs { + transition: opacity 400ms; + position: relative; + + &.hide { + opacity: 0; + pointer-events: none; + } + + .tablink { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: block; + background: none !important; + } + } } .inlineslideshow { - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - overflow: hidden; - - .slide { - display: none; - width: 100%; - height: 100%; - background-size: cover; - background-position: 50% 50%; - opacity: 0; - - position: absolute; - top: 0; - left: 0; - z-index: 0; - - &.show { - z-index: 1; - opacity: 1; - transition: opacity @inlineslideshow-transition-time; - } - } + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + overflow: hidden; + + .slide { + display: none; + width: 100%; + height: 100%; + background-size: cover; + background-position: 50% 50%; + opacity: 0; + + position: absolute; + top: 0; + left: 0; + z-index: 0; + + &.show { + z-index: 1; + opacity: 1; + transition: opacity @inlineslideshow-transition-time; + } + } } #links .fb_iframe_widget { - transform-origin: 0 0 0; - transform: scale(2.5); + transform-origin: 0 0 0; + transform: scale(2.5); } /* Landing Page */ #landingPage { - opacity: 0; - pointer-events: none; - transition: opacity 0.3s ease-in; - z-index: 30; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - .edge & { - visibility: hidden; - } - - &.visible { - opacity: 1; - pointer-events: auto; - - .edge & { - visibility: visible; - } - } - - iframe { - width: 100%; - height: 100%; - border: none; - } + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease-in; + z-index: 30; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + .edge & { + visibility: hidden; + } + + &.visible { + opacity: 1; + pointer-events: auto; + + .edge & { + visibility: visible; + } + } + + iframe { + width: 100%; + height: 100%; + border: none; + } } .cart-bourbon-suggest { - padding: 30px; - width: 100%; + padding: 30px; + width: 100%; - label { - margin-bottom: 15px; - display: block; - text-align: left; - } + label { + margin-bottom: 15px; + display: block; + text-align: left; + } - input, textarea, select { - border: 2px solid #fff; - width: 100%; - padding: 8px; - display: block; - margin-top: 5px; - font-family: @font; - font-size: 14px; + input, textarea, select { + border: 2px solid #fff; + width: 100%; + padding: 8px; + display: block; + margin-top: 5px; + font-family: @font; + font-size: 14px; - &.parsley-error { - border-color: #cc0000; - } + &.parsley-error { + border-color: #cc0000; + } - } + } - .parsley-errors-list { - display: none; - } + .parsley-errors-list { + display: none; + } - .fonctions { - padding: 20px 0 0 0; - } + .fonctions { + padding: 20px 0 0 0; + } } /* SEO */ #seoContents { - display: none; + display: none; } /* General Utils */ .pointer-events-none { - pointer-events: none; + pointer-events: none; } /* Webfonts*/ @font-face { - font-family: 'Open Sans'; - src: url("fonts/OpenSans-Regular.woff2") format("woff2"), url("fonts/OpenSans-Regular.woff") format("woff"); - font-weight: 400; - font-style: normal; + font-family: 'Open Sans'; + src: url("fonts/OpenSans-Regular.woff2") format("woff2"), url("fonts/OpenSans-Regular.woff") format("woff"); + font-weight: 400; + font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: url("fonts/OpenSans-Semibold.woff2") format("woff2"), url("fonts/OpenSans-Semibold.woff") format("woff"); - font-weight: 600; - font-style: normal; + font-family: 'Open Sans'; + src: url("fonts/OpenSans-Semibold.woff2") format("woff2"), url("fonts/OpenSans-Semibold.woff") format("woff"); + font-weight: 600; + font-style: normal; } /* Links anims rollovers */ @keyframes enterupanddown { - 0% { - margin-top: 0px; - } - 100% { - margin-top: -40px; - } + 0% { + margin-top: 0px; + } + 100% { + margin-top: -40px; + } } [data-rollover="upanddown"] { - &.animaterollover { - animation: enterupanddown 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2 alternate forwards; - } + &.animaterollover { + animation: enterupanddown 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2 alternate forwards; + } } @import "print.less"; @@ -2910,9 +2916,9 @@ body > input { @import "additional.less"; #pscanvas { - visibility: hidden; + visibility: hidden; } #loadedcontents { - display: none; + display: none; }