Changeset 84988 in spip-zone


Ignore:
Timestamp:
Oct 3, 2014, 11:08:24 PM (5 years ago)
Author:
rastapopoulos@…
Message:

Tentage d'amélioration de la visionneuse en petit écran, on fait en sorte que l'image prenne le plus de place possible, sans marges autour. Et le mini-album en-dessous, on active le "petit/grand sur hover" que en vraiment grand écran (susceptible d'avoir le hover).

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/photographe/theme/css/modules/_visionneuse.scss

    r84905 r84988  
    33        background-color:#222;
    44        color:white;
    5         height: calc(100vh - 4.5em);
    65        margin-bottom:($typo-margin-vertical/2);
    7         padding:2.5%;
    8         padding-bottom:3em;
     6        max-height:100%;
    97        position:relative;
    108        text-align:center;
    11         //line-height:90vh;
    129       
    1310        .ajaxbloc{
     
    2219        }
    2320        .large{
    24                 height:100%;
    25                
    2621                .adapt-img-wrapper,img{
    2722                        background-size:contain;
    2823                        background-position:center center;
    2924                        height:100%;
    30                         max-height:100%;
     25                        max-height: 100vh;
    3126                        max-width:100%;
    3227                }
     
    8681                line-height:$typo-margin-vertical*2;
    8782                margin:0 auto;
    88                 width:20em;
     83                position:relative;
    8984               
    9085                img{
     
    9287                        border:1px solid grey;
    9388                        opacity:0.9;
    94                         width:$typo-margin-vertical;
     89                        width:$typo-margin-vertical*2;
    9590                }
    9691                .active img{
     
    10095                .prev, .next{
    10196                        display:inline-block;
    102                         height:1em;
     97                        position:relative;
    10398                        text-indent: -9999px;
     99                        vertical-align:middle;
    104100                        white-space: nowrap;
    105                         vertical-align:middle;
    106                         width:64px;
    107                         position:relative;
     101                        width:$typo-margin-vertical*2;
     102                       
     103                        a:after{
     104                                display:block;
     105                                font-size:$typo-margin-vertical*2;
     106                                height:100%;
     107                                position:absolute;
     108                                top:0;
     109                                text-indent:0;
     110                                vertical-align:middle;
     111                                width:1em;
     112                        }
    108113                }
     114                .prev a:after{
     115                        content:"<";
     116                }
     117                .next a:after{
     118                        content:">";
     119                }
     120        }
     121       
     122        @include media($bp-medium-plus-up){
     123                height: calc(100vh - 4.5em);
     124                padding:2.5%;
     125                padding-bottom:3em;
    109126               
    110                 &:hover{
    111                         @include linear-gradient(center top, rgba(#222,0), #222 1em);
    112                         bottom:0;
    113                         height:4.5em;
    114                         left:0;
    115                         position:absolute;
    116                         width:100%;
     127                .large{
     128                        height:100%;
     129                }
     130        }
     131        @include media($bp-large_up){
     132                .mini-album{
     133                        width:20em;
    117134                       
    118135                        img{
    119                                 width:auto;
     136                                width:$typo-margin-vertical;
    120137                        }
    121                         .prev, .next{
    122                                 height:4em;
    123                                
    124                                 a:after{
    125                                         display:block;
    126                                         font-size:4em;
    127                                         height:100%;
    128                                         position:absolute;
    129                                         top:0.125em;
    130                                         text-indent:0;
    131                                         vertical-align:middle;
    132                                         width:1em;
     138                        .prev,.next{
     139                                visibility:hidden;
     140                        }
     141                       
     142                        &:hover{
     143                                @include linear-gradient(center top, rgba(#222,0), #222 1em);
     144                                bottom:0;
     145                                height:4.5em;
     146                                left:0;
     147                                position:absolute;
     148                                width:100%;
     149                       
     150                                img{
     151                                        width:auto;
    133152                                }
    134                         }
    135                         .prev a:after{
    136                         content:"<";
    137                         }
    138                         .next a:after{
    139                                 content:">";
     153                                .prev,.next{
     154                                        visibility:visible;
     155                                }
    140156                        }
    141157                }
Note: See TracChangeset for help on using the changeset viewer.