Changeset 114704 in spip-zone


Ignore:
Timestamp:
Apr 2, 2019, 9:56:06 AM (8 months ago)
Author:
arnaud.berard@…
Message:

séparer les css fonctionelles des utilitaires

Location:
_plugins_/lazysizes/trunk/css
Files:
1 added
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/lazysizes/trunk/css/lazysizes.css

    r105439 r114704  
    11.lazyload {
    22    opacity: 0;
    3     transition: opacity 0.2s 0.2s;
     3}
     4/* [1] utilisation de body pour surpasser un block ayant la propriété cover */
     5body .lazyloading {/* 1 */
     6  opacity: .5;
     7  background: #f7f7f7 url(../images/loader.gif) no-repeat center;
     8  background-size: 32px;/* 1 */
    49}
    510
    6 .lazyloading {
    7     opacity: 1;
    8     background: #f7f7f7 url(../images/loader.gif) no-repeat center;
    9     /*min-height: 60px;*/
    10 }
    11 
    12 
    1311.lazyloaded {
    14     opacity: 1;
    15     /*transition: 300ms opacity;*/
     12  opacity: 1;
     13  -webkit-transition: opacity 2s linear;
     14  transition: opacity 2s linear;
    1615}
    1716
    1817.no-js img.lazyload {
    19     display: none;
     18  display: none;
    2019}
    21 
    22 
    23 /* Preserve ratio utilities
    24 
    25 .ratio-box          -    preserve le ratio/proportions d'une image via la technique css du ratio intrinseque et le padding
    26                         le padding est calcullé dans le markup
    27 
    28 .ratio-container    -   preserve le ratio en imposant par défaut le 16:9
    29 
    30 @see - https://github.com/aFarkas/lazysizes#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps
    31 
    32 */
    33 .ratio-box {
    34         position: relative;
    35         height: 0;
    36         display: block;
    37         width: 100%;
    38         /* padding-bottom is calculated and rendered in to HTML */
    39 }
    40 
    41 .ratio-box img,
    42 .ratio-box iframe,
    43 .ratio-box video {
    44         position: absolute;
    45         top: 0;
    46         left: 0;
    47         width: 100%;
    48         height: 100%;
    49         display: block;
    50 }
    51 
    52 .ratio-container {
    53     position: relative;
    54 }
    55 .ratio-container:after {
    56     content: '';
    57     display: block;
    58     height: 0;
    59     width: 100%;
    60     /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    61     padding-bottom: 56.25%;
    62     content: "";
    63 }
    64 .ratio-container > * {
    65     position: absolute;
    66     top: 0;
    67     left: 0;
    68     width: 100%;
    69     height: 100%;
    70 }
    71 
    72 /* unknown ratio variation */
    73 .unknown-ratio > * {
    74     max-width: 100%;
    75     max-height: 100%;
    76     width: auto;
    77     height: auto;
    78 }
Note: See TracChangeset for help on using the changeset viewer.