]> _ Git - fluidbook-html5.git/commitdiff
fix #2372 @1
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 5 Dec 2018 11:21:14 +0000 (12:21 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 5 Dec 2018 11:21:14 +0000 (12:21 +0100)
style/fluidbook.less

index 569bf5f8f0d01f8dbcceb9d15e797b69ff03b5dd..81f2bb0f677126b2510588235a6516b005dc7815 100644 (file)
@@ -103,6 +103,7 @@ html {
        -webkit-user-select: text;
        -o-user-select: text;
        -ms-user-select: text;
+
        &.ios {
                position: fixed;
                top: 0;
@@ -202,6 +203,7 @@ body, html {
                #links {
                        cursor: url(./images/cursors/zoom-in.cur), auto;
                }
+
                .zoomed {
                        #links {
                                cursor: url(./images/cursors/zoom-out.cur), auto;
@@ -215,6 +217,7 @@ body, html {
                #links {
                        cursor: zoom-in;
                }
+
                .zoomed {
                        #links {
                                cursor: zoom-out;
@@ -225,6 +228,7 @@ body, html {
 
 #links .link {
        cursor: auto;
+
        &.eventOverlayLink {
                cursor: inherit;
        }
@@ -282,6 +286,7 @@ body, html {
 
        &.show {
                display: block;
+
                svg {
                        animation-name: loader-spin;
                        animation-duration: 1s;
@@ -302,6 +307,7 @@ body, html {
 
 .background {
        background-repeat: no-repeat;
+
        img {
                width: 100%;
                height: 100%;
@@ -329,6 +335,7 @@ body, html {
        position: absolute;
        top: 0px;
        background-color: #fff;
+
        .texts {
                position: absolute;
                top: -1px;
@@ -350,6 +357,7 @@ body, html {
 
        &.right {
                z-index: 1;
+
                .shade {
                        left: 0px;
                }
@@ -375,6 +383,7 @@ body, html {
        top: 0px;
        left: 0px;
        z-index: 3;
+
        .highlight {
                position: absolute;
                border-width: 2px;
@@ -388,15 +397,19 @@ body, html {
                &[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="2"], &[data-color="7"], &[data-color="12"] {
                        .highlight-area(#00ffff);
                }
+
                &[data-color="3"], &[data-color="8"], &[data-color="13"] {
                        .highlight-area(#ff00ff);
                }
+
                &[data-color="4"], &[data-color="9"], &[data-color="14"] {
                        .highlight-area(#ff0000);
                }
@@ -476,6 +489,7 @@ body, html {
                        &.left {
                                background-image: url("../images/shadows/back/left.png");
                                left: -35px;
+
                                .portrait & {
                                        left: -29px;
                                }
@@ -725,6 +739,7 @@ header {
 #nav > a {
        vertical-align: top;
        display: inline-block;
+
        &.hidden {
                display: none;
        }
@@ -845,6 +860,7 @@ footer, header, #interface {
        -o-transition: opacity 400ms ease-in, visibility 400ms ease-in;
        -ms-transition: opacity 400ms ease-in, visibility 400ms ease-in;
        transition: opacity 400ms ease-in, visibility 400ms ease-in;
+
        &.hidden {
                visibility: hidden;
                opacity: 0;
@@ -886,6 +902,7 @@ a.bookmark {
 /* Cart */
 .icon-cart {
        position: relative;
+
        span.number {
                position: absolute;
                top: 0.7em;
@@ -915,10 +932,12 @@ a.bookmark {
                        td {
                                &.name {
                                        width: 100%;
+
                                        .m {
                                                display: block;
                                        }
                                }
+
                                &.price, &.price_excluding_taxes, &.price_unit {
                                        display: none;
                                }
@@ -931,6 +950,7 @@ a.bookmark {
                        text-align: left;
                        position: relative;
                        top: -40px;
+
                        p {
                                float: none;
                                width: 100%;
@@ -947,6 +967,7 @@ a.bookmark {
 
                .cart-shipping-form {
                        margin-top: 30px;
+
                        .col {
                                &.col-left, &.col-right {
                                        width: 100%;
@@ -956,6 +977,7 @@ a.bookmark {
                                        padding: 0 30px;
                                }
                        }
+
                        .cart-footer {
                                top: 0;
                        }
@@ -967,23 +989,29 @@ a.bookmark {
                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;
@@ -994,6 +1022,7 @@ a.bookmark {
                                        top: 1px;
                                        left: -5px;
                                        padding: 0 6px;
+
                                        svg {
                                                width: 11px;
                                                height: 11px;
@@ -1002,10 +1031,12 @@ a.bookmark {
                                }
                        }
                }
+
                .input-number {
                        position: relative;
                        width: 170px;
                        height: 44px;
+
                        input {
                                height: 44px;
                                width: 70px;
@@ -1016,6 +1047,7 @@ a.bookmark {
                                padding: 20px;
                                text-align: center;
                        }
+
                        a {
                                display: inline-block;
                                height: 44px;
@@ -1032,17 +1064,20 @@ a.bookmark {
                        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;
@@ -1054,6 +1089,7 @@ a.bookmark {
                clear: both;
                width: 100%;
                text-align: left;
+
                p {
                        float: left;
                        width: 450px;
@@ -1075,6 +1111,7 @@ a.bookmark {
                        display: inline-block;
                        text-align: left;
                        position: relative;
+
                        input {
                                width: 100%;
                                padding: 18px 15px;
@@ -1138,6 +1175,7 @@ html.ios body.portrait #interface {
                position: relative;
                left: 50%;
        }
+
        .rightContainer {
                position: relative;
                left: -50%;
@@ -1170,6 +1208,7 @@ html.ios body.portrait #interface {
                transition: opacity 1s;
                display: none;
                opacity: 0;
+
                &.show {
                        opacity: 1;
                }
@@ -1188,12 +1227,15 @@ html.ios body.portrait #interface {
        height: 100%;
        display: block;
        background-color: transparent;
+
        &.displayArea {
                -webkit-tap-highlight-color: @links-area-color;
                background-color: fadeout(@links-color, 99.999%);
+
                &.animating {
                        background-color: @links-area-color;
                }
+
                .no-ftouch &:hover {
                        opacity: 1 !important;
                        background-color: @links-area-color;
@@ -1222,6 +1264,7 @@ html.ios body.portrait #interface {
 
                &.left {
                        left: @bookmark-corner-offset;
+
                        .portrait #fluidbook & {
                                right: @bookmark-corner-offset+@book-page-width;
                                left: auto;
@@ -1240,6 +1283,7 @@ html.ios body.portrait #interface {
        opacity: 0.01;
        display: block;
        cursor: pointer;
+
        &[data-enabled], &:hover {
                opacity: 1 !important;
                -moz-transition: none;
@@ -1324,6 +1368,7 @@ html.ios body.portrait #interface {
                        padding: 0;
                        position: relative;
                        z-index: 4;
+
                        a, div {
                                &.button.back {
                                        width: 30px;
@@ -1352,6 +1397,7 @@ html.ios body.portrait #interface {
        // Popup with close button outside
        &[data-menu="iframe"], &[data-menu="text"] {
                overflow: visible;
+
                a, div {
                        &.button.back {
                                right: -30px;
@@ -1395,6 +1441,7 @@ html.ios body.portrait #interface {
        &[data-menu="bookmarks-help"] {
                .content {
                        padding: 40px 70px 100px 70px;
+
                        p {
                                margin-bottom: 60px;
                                font-size: 0.9em;
@@ -1402,22 +1449,27 @@ html.ios body.portrait #interface {
                        }
 
                        @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;
@@ -1425,9 +1477,11 @@ html.ios body.portrait #interface {
                                                        }
                                                }
                                        }
+
                                        a.bookmark {
                                                pointer-events: none;
                                        }
+
                                        .img {
                                                position: relative;
                                                width: @w;
@@ -1511,6 +1565,7 @@ html.ios body.portrait #interface {
                                                transition: opacity 500ms;
                                                position: absolute;
                                        }
+
                                        img {
                                                display: block;
                                        }
@@ -1530,6 +1585,7 @@ html.ios body.portrait #interface {
        .fonctions {
                padding: 0 @menu-padding @menu-padding 0;
                text-align: right;
+
                a {
                        line-height: 12px;
                        border-radius: 2px;
@@ -1545,9 +1601,11 @@ html.ios body.portrait #interface {
        &.fs {
                .fonctions {
                        padding: 0 @menu-padding @menu-padding @menu-padding;
+
                        a {
                                display: block;
                                margin: 0 0 10px 0;
+
                                &:last-child {
                                        margin: 0;
                                }
@@ -1558,6 +1616,7 @@ html.ios body.portrait #interface {
        &[data-chapters] {
                max-width: 320px;
        }
+
        &.animate {
                -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
                -webkit-transition: -webkit-transform 600ms ease-out;
@@ -1565,6 +1624,7 @@ html.ios body.portrait #interface {
                -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
                transition: transform 600ms ease-out;
        }
+
        .caption {
                padding: 20px @menu-padding;
                width: 100%;
@@ -1585,6 +1645,7 @@ html.ios body.portrait #interface {
                        line-height: 25px;
                        display: block;
                        cursor: pointer;
+
                        &.back {
                                position: absolute;
                                top: 0;
@@ -1630,6 +1691,7 @@ form input[type="text"], form input[type="email"] {
                margin: auto;
                text-align: left;
        }
+
        .doubleThumb, .padding {
                display: inline-block;
                padding: 10px 10px 25px 10px;
@@ -1651,6 +1713,7 @@ form input[type="text"], form input[type="email"] {
                text-align: left;
                width: 100%;
                padding: 20px @padding 0;
+
                .doubleThumb {
                        width: 100px;
                }
@@ -1660,17 +1723,21 @@ form input[type="text"], form input[type="email"] {
 
 .doubleThumb {
        height: @thumb-height;
+
        &.left {
                margin-right: 10px;
        }
+
        &.simple {
                .overlay {
                        width: 100px;
                }
+
                &.left {
                        .hits {
                                left: -50px;
                        }
+
                        &.singlemode {
                                .hits {
                                        left: 0px;
@@ -1709,6 +1776,7 @@ form input[type="text"], form input[type="email"] {
                font-size: 12px;
                height: 26px;
                top: @hits-top;
+
                &.yes {
                        padding: 5px;
                        border-radius: 1px;
@@ -1740,6 +1808,7 @@ form input[type="text"], form input[type="email"] {
                background-blend-mode: normal, overlay;
                background-repeat: no-repeat;
        }
+
        .number {
                text-align: center;
                display: block;
@@ -1751,20 +1820,26 @@ form input[type="text"], form input[type="email"] {
                font-size: 14px;
                line-height: 1;
        }
+
        &.right {
                left: 110px;
        }
+
        &.simple {
                width: 100px;
+
                &.right {
                        margin-left: 100px;
                }
        }
+
        &.left {
                margin-right: 100px;
        }
 
-       @shade-height: unit(@thumb-height+22, px);
+       @extrashadowheight: min(22, @thumb-height*0.2);
+       @shade-height: unit(@thumb-height+@extrashadowheight, px);
+
        &:before {
                position: absolute;
                content: "";
@@ -1848,6 +1923,7 @@ ul.chapters.shareList a.level0 .svg-icon {
        .portrait & .icon.afterSearch {
                display: none;
        }
+
        .icon {
                position: absolute;
                top: 0px;
@@ -2008,6 +2084,7 @@ ul.chapters.shareList a.level0 .svg-icon {
        left: 0px;
        z-index: 30;
        display: none;
+
        > div {
                position: absolute;
                border-radius: 10px;
@@ -2015,6 +2092,7 @@ ul.chapters.shareList a.level0 .svg-icon {
                font-size: 0.8rem;
                background-color: @menu-background;
                color: @menu-text;
+
                p {
                        margin: 0 0 20px 0;
                }
@@ -2072,6 +2150,7 @@ ul.chapters.shareList a.level0 .svg-icon {
        .multimediaContainer {
                padding: 0;
                position: relative;
+
                &:after {
                        content: '';
                        position: absolute;
@@ -2083,6 +2162,7 @@ ul.chapters.shareList a.level0 .svg-icon {
                        pointer-events: auto;
                }
        }
+
        img.multimedia {
                position: relative;
                z-index: 1;
@@ -2090,6 +2170,7 @@ ul.chapters.shareList a.level0 .svg-icon {
                height: auto;
                display: block;
        }
+
        .text {
                padding: 20px;
                white-space: pre-line;
@@ -2098,6 +2179,7 @@ ul.chapters.shareList a.level0 .svg-icon {
 
        &[data-menu="multimedia"] {
                background: transparent;
+
                &.fs {
                        background: @menu-background;
                }
@@ -2107,6 +2189,7 @@ ul.chapters.shareList a.level0 .svg-icon {
                position: absolute;
                top: 0;
                left: 0;
+
                .link {
                        position: absolute;
                }
@@ -2118,24 +2201,30 @@ ul.chapters.shareList a.level0 .svg-icon {
 ul.chapters {
        list-style: none;
        padding: 20px 0;
+
        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;
                }
@@ -2147,25 +2236,31 @@ ul.chapters {
                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;
 
@@ -2175,6 +2270,7 @@ ul.chapters {
                        }
 
                }
+
                &.level2 {
                        padding-left: 80px;
 
@@ -2187,6 +2283,7 @@ ul.chapters {
                                margin: -2px 0 0 0;
                        }
                }
+
                .level3 {
                        padding-left: 110px;
 
@@ -2195,6 +2292,7 @@ ul.chapters {
                                padding-right: 110px;
                        }
                }
+
                > nav {
                        display: none;
                }
@@ -2210,6 +2308,7 @@ ul.chapters {
                }
 
        }
+
        .right {
                right: 32px;
                top: 5px;
@@ -2242,6 +2341,7 @@ ul.chapters {
                                width: 16px;
                                height: 16px;
                        }
+
                        border-radius: 1px;
 
                        &.noshadow {
@@ -2355,6 +2455,7 @@ ul.chapters {
        z-index: 12;
        pointer-events: none;
        display: none;
+
        canvas {
                position: absolute;
                top: 0;
@@ -2621,6 +2722,7 @@ ul.chapters {
                        top: unit(@tooltip-arrows-size*-1, px);
                }
        }
+
        &[data-pos-y="s"] {
                &:after {
                        border-top: @tooltip-arrows-size solid @tooltip-background;
@@ -2633,6 +2735,7 @@ ul.chapters {
                        left: 16px;
                }
        }
+
        &[data-pos-x="e"] {
                &:after {
                        right: 16px;
@@ -2650,6 +2753,7 @@ ul.chapters {
        width: 100%;
        padding: 20px 40px;
        z-index: 20;
+
        a.close {
                position: absolute;
                top: 0px;
@@ -2662,12 +2766,14 @@ ul.chapters {
                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;
@@ -2696,14 +2802,17 @@ ul.chapters {
                .zoomPopupWrapper:last-of-type .zoomPopupClose {
                        display: none;
                }
+
                .zoomPopupWrapper:first-of-type .zoomPopupClose {
                        display: block;
                }
        }
+
        &.layout-side-by-side {
                .zoomPopupWrapper:first-of-type .zoomPopupClose {
                        display: none;
                }
+
                .zoomPopupWrapper:last-of-type .zoomPopupClose {
                        display: block;
                }
@@ -2740,6 +2849,7 @@ ul.chapters {
                display: block;
                z-index: 102;
        }
+
        .zoomPopupClose {
                @zoom-close-button-size: 30px;
 
@@ -2814,6 +2924,7 @@ body > input {
                .nav-fullscreen-exit {
                        display: inline-block;
                }
+
                .nav-fullscreen {
                        display: none;
                }
@@ -2824,6 +2935,7 @@ body > input {
        .tabs {
                transition: opacity 400ms;
                position: relative;
+
                &.hide {
                        opacity: 0;
                        pointer-events: none;
@@ -2889,6 +3001,7 @@ body > input {
        &.visible {
                opacity: 1;
                pointer-events: auto;
+
                .edge & {
                        visibility: visible;
                }
@@ -2920,6 +3033,7 @@ body > input {
                margin-top: 5px;
                font-family: @font;
                font-size: 14px;
+
                &.parsley-error {
                        border-color: #cc0000;
                }
@@ -2983,6 +3097,7 @@ body > input {
 #pscanvas {
        visibility: hidden;
 }
-#loadedcontents{
+
+#loadedcontents {
        display: none;
 }
\ No newline at end of file