<path d="m0 26l512 0 0 51-512 0z m0 204l512 0 0 52-512 0z m0 205l512 0 0 51-512 0z"/>
</symbol>
+ <symbol id="interface-next" viewBox="0 0 53 107">
+ <path d="M37,39L19.7,21.8c-0.3-0.3-0.7-0.3-0.9,0l-1.4,1.4c-0.3,0.3-0.3,0.7,0,0.9L33,39.6L17.5,55.1
+ c-0.3,0.3-0.3,0.7,0,0.9l1.4,1.4c0.3,0.3,0.7,0.3,0.9,0L37,40.1c0.1-0.1,0.2-0.3,0.2-0.5C37.2,39.4,37.1,39.2,37,39z M30,86.5h2
+ v-15h-2V86.5z M26.8,78C26.7,78,26.7,78,26.8,78l-6.3-6.3c-0.3-0.3-0.7-0.3-0.9,0L19,72.2c-0.3,0.3-0.3,0.7,0,0.9l5.8,5.8L19,84.8
+ c-0.3,0.3-0.3,0.7,0,0.9l0.5,0.5c0.3,0.3,0.7,0.3,0.9,0l6.2-6.2c0,0,0.1,0,0.1-0.1l0.5-0.5c0.1-0.1,0.2-0.3,0.2-0.5
+ c0-0.2-0.1-0.3-0.2-0.5L26.8,78z"/>
+ </symbol>
+
+ <symbol id="interface-previous" viewBox="0 0 53 107">
+ <path d="M36.5,55.1L21,39.6l15.5-15.5c0.3-0.3,0.3-0.7,0-0.9l-1.4-1.4c-0.3-0.3-0.7-0.3-0.9,0L17,39
+ c-0.2,0.2-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.2,0.5l17.2,17.2c0.3,0.3,0.7,0.3,0.9,0l1.4-1.4C36.8,55.7,36.8,55.3,36.5,55.1z M22,86.5
+ h2v-15h-2V86.5z M29.1,79l5.8-5.8c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.3-0.3-0.7-0.3-0.9,0L27.3,78c0,0,0,0-0.1,0l-0.5,0.5
+ c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l0.5,0.5c0,0,0.1,0,0.1,0.1l6.2,6.2c0.3,0.3,0.7,0.3,0.9,0l0.5-0.5
+ c0.3-0.3,0.3-0.7,0-0.9L29.1,79z"/>
+ </symbol>
+
</svg>
if (navType == 'horizontalNav') {
navExtraImage = this.fluidbook.datas.navExtraImage;
- link = '<a id="' + elementID + '" data-tooltip="'
+ this.fluidbook.datas.navExtraTooltip +'" href="' + this.fluidbook.datas.navExtraLink + '"><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
+ link = '<a id="' + elementID + '" data-tooltip="'
+ this.fluidbook.datas.navExtraTooltip + '" href="' + this.fluidbook.datas.navExtraLink + '"><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
} else if (navType == 'menu') {
navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
// Toggle icon on fullscreen change (also handles exiting via ESC key)
if (screenfull.enabled) {
- screenfull.on('change', function() {
+ screenfull.on('change', function () {
// Slight delay to stop icon state flickering during fullscreen transition
setTimeout(function () {
$('.icon-fullscreen').toggleClass('active');
}
this._inited['interface'] = true;
- var res = this.getLink('interface-previous', '#', 'previous', '', '', '', false);
- res += this.getLink('interface-next', '#', 'next', '', '', '', false);
+ var res = '';
+ if ($('html').hasClass('ltr')) {
+ res += this.getLink('interface-previous', '#', 'previous', '', '', '', true);
+ res += this.getLink('interface-next', '#', 'next', '', '', '', true);
+ } else {
+ res += this.getLink('interface-previous', '#', 'next', '', '', '', true);
+ res += this.getLink('interface-next', '#', 'previous', '', '', '', true);
+ }
+
$('#interface').append(res);
$(document).on('click', '#next', goNextPage);
$(document).on('click', '#previous', goPreviousPage);
}
#next, #previous {
- background: #f00;
- width: 40px;
- height: 100px;
+ width: 53px;
+ height: 107px;
+ background-size: 53px 107px;
position: absolute;
top: 310px;
display: block;
opacity: 1;
z-index: 21;
- background-size: 40px 100px;
-
- .sharp & {
- width: 53px;
- height: 107px;
- background-size: 53px 107px;
- }
+ color: @arrows-color;
+ background-color: @arrows-background;
}
#next, #previous, #down, #splash {
}
.rtl #previous, .ltr #next {
- background-image: url("../data/images/interface-sharp-next.svg");
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
right: 0px;
}
.rtl #next, .ltr #previous {
- background-image: url("../data/images/interface-sharp-previous.svg");
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
left: 0px;
}
}
-.no-svg {
- &.rtl #next, &.ltr #previous {
- background-image: url("../data/images/interface-previous.png");
- }
-
- &.rtl #previous, &.ltr #next {
- background-image: url("../data/images/interface-next.png");
- }
-
- &.sharp {
- &.rtl #next, &.ltr #previous {
- background-image: url("../data/images/interface-sharp-previous.png");
- }
-
- &.rtl #previous, &.ltr #next {
- background-image: url("../data/images/interface-sharp-next.png");
- }
- }
-}
-
/* Header */
header {
position: relative;
.number {
text-align: center;
display: block;
- margin: 0;
+ margin: 0;
padding: 5px 0 0 0;
max-width: 100px;
position: relative;
z-index: 1;
- font-size: 14px;
- font-weight: bold;
- line-height: 1;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 1;
}
&.right {
left: 100px;
left: 0;
background-color: transparent;
}
+
#helpView {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
display: inline-block;
white-space: nowrap;
padding: 0 0.5em;
- border-color: #fff;
- border-style: solid;
- border-width: 0 0 0 1px; // Left border
+ border-color: #fff;
+ border-style: solid;
+ border-width: 0 0 0 1px; // Left border
- // When in RTL default or LTR with menu inverted, the labels need to be on the other side of the line
- .rtl.menu-default &, .ltr.menu-inverted & {
- border-width: 0 1px 0 0; // Right border
- transform: translateX(-100%); // Flip position back to where it would be if it was based on a left border line
- }
+ // When in RTL default or LTR with menu inverted, the labels need to be on the other side of the line
+ .rtl.menu-default &, .ltr.menu-inverted & {
+ border-width: 0 1px 0 0; // Right border
+ transform: translateX(-100%); // Flip position back to where it would be if it was based on a left border line
+ }
}
.icon span {
padding-right: 80px;
}
-
.right .puce {
margin: -2px 0 0 0;
}
}
/* SVG Sprite */
-[class^="interface-"], [class*=" interface-"] {
+[class^="interface-"], [class*=" interface-"], [class^="nav-"], [class*=" nav-"], [class^="share-"], [class*=" share-"] {
display: inline-block;
fill: currentColor;
}
.icon-fullscreen {
// Full screen exit icon hidden by default
- .interface-fullscreen-exit {
+ .nav-fullscreen-exit {
display: none;
}
// Switch icons
&.active {
- .interface-fullscreen-exit {
+ .nav-fullscreen-exit {
display: inline-block;
}
- .interface-fullscreen {
+ .nav-fullscreen {
display: none;
}
}
}
-
/* Webfonts*/
@font-face {
projects / fluidbook-html5.git / commitdiff
