WordPress.org
Get WordPress

Making WordPress.org

Changeset 4292


Ignore:
Timestamp:
10/25/2016 09:16:56 PM (8 years ago)
Author:
mapk
Message:

Fixing the Screenshot Viewer styling for the new Plugin Directory.

See https://meta.trac.wordpress.org/ticket/1828#comment:52

Fixes #1828

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery/style.scss

    r4223 r4292  
    1313    .image-gallery-left-nav,
    1414    .image-gallery-right-nav {
    15         color: #fff;
    16         font-size: ms( 12 );
     15        display: none;
     16        font-size: ms( 10 );
    1717        height: 100%;
    1818        position: absolute;
    19         text-shadow: 0 2px 2px $ig-black;
    2019        top: 0;
    2120        z-index: 4;
     21        border-color: #eee;
     22        -webkit-transition: background 0.1s ease, border 0.1s ease;
     23        transition: background 0.1s ease, border 0.1s ease;
    2224
    2325        @media (max-width: $ig-screen-sm-min) {
    … …  
    2729        @media (min-width: $ig-screen-sm-min) {
    2830            &:hover {
    29                 color: #fff;
     31                background: #fff;
     32                opacity: 0.8;
     33                border: 1px solid #eee;
    3034            }
    3135        }
    3236
    3337        &:before {
    34             padding: 15px;
    3538            position: relative;
    36             top: -15px;
     39            font-family: 'dashicons';
    3740        }
    3841    }
    … …  
    4245
    4346        &:before {
    44             content: '\027E8';
     47            content: '\f341';
     48        }
     49
     50        &:hover {
     51            margin-left: -1px;
    4552        }
    4653    }
    … …  
    5057
    5158        &:before {
    52             content: '\027E9';
     59            content: '\f345';
     60        }
     61
     62        &:hover {
     63            margin-right: -1px;
     64        }
     65    }
     66
     67    &:hover {
     68        .image-gallery-left-nav,
     69        .image-gallery-right-nav {
     70            display: block;
    5371        }
    5472    }
    … …  
    6078    position: relative;
    6179    white-space: nowrap;
     80    border: 1px solid #eee;
    6281}
    6382
    … …  
    86105        padding: 10px 20px;
    87106        white-space: normal;
     107        font-size: ms( -2 );
    88108
    89109        @media (max-width: $ig-screen-sm-min) {
    … …  
    98118    background: #fff;
    99119    margin-top: 5px;
    100     overflow: hidden;
     120    //overflow: hidden;
    101121
    102122    .image-gallery-thumbnails-container {
    … …  
    111131    display: table-cell;
    112132    margin-right: 5px;
     133    border: 1px solid #eee;
    113134
    114135    .image-gallery-image {
    … …  
    117138
    118139    img {
    119         border: 4px solid transparent;
    120140        vertical-align: middle;
    121141        width: 100px;
    122142
    123143        @media (max-width: $ig-screen-sm-min) {
    124             border: 3px solid transparent;
    125144            width: 75px;
    126145        }
    127146    }
    128147
     148    &:hover {
     149        box-shadow: 0 1px 8px rgba(0,0,0,0.3);
     150    }
     151
    129152    &.active {
    130         img {
    131             border: 4px solid $ig-blue;
    132 
    133             @media (max-width: $ig-screen-sm-min) {
    134                 border: 3px solid $ig-blue;
    135             }
    136         }
     153        border: 1px solid $ig-blue;
    137154    }
    138155}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/style.scss

    r4223 r4292  
    1414        text-transform: inherit;
    1515    }
    16 
    17     figcaption {
    18         font-style: italic;
    19     }
    2016}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r4278 r4292  
    22982298.image-gallery-content .image-gallery-left-nav,
    22992299.image-gallery-content .image-gallery-right-nav {
    2300   color: #fff;
    2301   font-size: 61.035px;
    2302   font-size: 3.8146972656rem;
     2300  display: none;
     2301  font-size: 48.828px;
     2302  font-size: 3.0517578125rem;
    23032303  height: 100%;
    23042304  position: absolute;
    2305   text-shadow: 0 2px 2px #222;
    23062305  top: 0;
    23072306  z-index: 4;
     2307  border-color: #eee;
     2308  -webkit-transition: background 0.1s ease, border 0.1s ease;
     2309  transition: background 0.1s ease, border 0.1s ease;
    23082310}
    23092311
    … …  
    23182320  .image-gallery-content .image-gallery-left-nav:hover,
    23192321  .image-gallery-content .image-gallery-right-nav:hover {
    2320     color: #fff;
     2322    background: #fff;
     2323    opacity: 0.8;
     2324    border: 1px solid #eee;
    23212325  }
    23222326}
    … …  
    23242328.image-gallery-content .image-gallery-left-nav:before,
    23252329.image-gallery-content .image-gallery-right-nav:before {
    2326   padding: 15px;
    23272330  position: relative;
    2328   top: -15px;
     2331  font-family: 'dashicons';
    23292332}
    23302333
    … …  
    23342337
    23352338.image-gallery-content .image-gallery-left-nav:before {
    2336   content: '\027E8';
     2339  content: '\f341';
     2340}
     2341
     2342.image-gallery-content .image-gallery-left-nav:hover {
     2343  margin-left: -1px;
    23372344}
    23382345
    … …  
    23422349
    23432350.image-gallery-content .image-gallery-right-nav:before {
    2344   content: '\027E9';
     2351  content: '\f345';
     2352}
     2353
     2354.image-gallery-content .image-gallery-right-nav:hover {
     2355  margin-right: -1px;
     2356}
     2357
     2358.image-gallery-content:hover .image-gallery-left-nav,
     2359.image-gallery-content:hover .image-gallery-right-nav {
     2360  display: block;
    23452361}
    23462362
    … …  
    23502366  position: relative;
    23512367  white-space: nowrap;
     2368  border: 1px solid #eee;
    23522369}
    23532370
    … …  
    23772394  padding: 10px 20px;
    23782395  white-space: normal;
     2396  font-size: 12.8px;
     2397  font-size: 0.8rem;
    23792398}
    23802399
    … …  
    23892408  background: #fff;
    23902409  margin-top: 5px;
    2391   overflow: hidden;
    23922410}
    23932411
    … …  
    24012419  display: table-cell;
    24022420  margin-right: 5px;
     2421  border: 1px solid #eee;
    24032422}
    24042423
    … …  
    24082427
    24092428.image-gallery-thumbnail img {
    2410   border: 4px solid transparent;
    24112429  vertical-align: middle;
    24122430  width: 100px;
    … …  
    24152433@media (max-width: 768px) {
    24162434  .image-gallery-thumbnail img {
    2417     border: 3px solid transparent;
    24182435    width: 75px;
    24192436  }
    24202437}
    24212438
    2422 .image-gallery-thumbnail.active img {
    2423   border: 4px solid #337ab7;
    2424 }
    2425 
    2426 @media (max-width: 768px) {
    2427   .image-gallery-thumbnail.active img {
    2428     border: 3px solid #337ab7;
    2429   }
     2439.image-gallery-thumbnail:hover {
     2440  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
     2441  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
     2442}
     2443
     2444.image-gallery-thumbnail.active {
     2445  border: 1px solid #337ab7;
    24302446}
    24312447
    … …  
    24662482  padding: 0;
    24672483  text-transform: inherit;
    2468 }
    2469 
    2470 .plugin-screenshots figcaption {
    2471   font-style: italic;
    24722484}
    24732485
    … …  
    32103222  }
    32113223}
     3224/*# sourceMappingURL=style.css.map */
Note: See TracChangeset for help on using the changeset viewer.