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

Timestamp:

10/25/2016 09:16:56 PM (10 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

File:

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

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

@@ -13 +13 @@
         .image-gallery-left-nav,
         .image-gallery-right-nav {
-                color: #fff;
-                font-size: ms( 12 );
+                display: none;
+                font-size: ms( 10 );
                 height: 100%;
                 position: absolute;
-                text-shadow: 0 2px 2px $ig-black;
                 top: 0;
                 z-index: 4;
+                border-color: #eee;
+                -webkit-transition: background 0.1s ease, border 0.1s ease;
+                transition: background 0.1s ease, border 0.1s ease;
 
                 @media (max-width: $ig-screen-sm-min) {
@@ -27 +29 @@
                 @media (min-width: $ig-screen-sm-min) {
                         &:hover {
-                                color: #fff;
+                                background: #fff;
+                                opacity: 0.8;
+                                border: 1px solid #eee;
                         }
                 }
 
                 &:before {
-                        padding: 15px;
                         position: relative;
-                        top: -15px;
+                        font-family: 'dashicons';
                 }
         }
@@ -42 +45 @@
 
                 &:before {
-                        content: '\027E8';
+                        content: '\f341';
+                }
+
+                &:hover {
+                        margin-left: -1px;
                 }
         }
@@ -50 +57 @@
 
                 &:before {
-                        content: '\027E9';
+                        content: '\f345';
+                }
+
+                &:hover {
+                        margin-right: -1px;
+                }
+        }
+
+        &:hover {
+                .image-gallery-left-nav,
+                .image-gallery-right-nav {
+                        display: block;
                 }
         }
@@ -60 +78 @@
         position: relative;
         white-space: nowrap;
+        border: 1px solid #eee;
 }
 
@@ -86 +105 @@
                 padding: 10px 20px;
                 white-space: normal;
+                font-size: ms( -2 );
 
                 @media (max-width: $ig-screen-sm-min) {
@@ -98 +118 @@
         background: #fff;
         margin-top: 5px;
-        overflow: hidden;
+        //overflow: hidden;
 
         .image-gallery-thumbnails-container {
@@ -111 +131 @@
         display: table-cell;
         margin-right: 5px;
+        border: 1px solid #eee;
 
         .image-gallery-image {
@@ -117 +138 @@
 
         img {
-                border: 4px solid transparent;
                 vertical-align: middle;
                 width: 100px;
 
                 @media (max-width: $ig-screen-sm-min) {
-                        border: 3px solid transparent;
                         width: 75px;
                 }
         }
 
+        &:hover {
+                box-shadow: 0 1px 8px rgba(0,0,0,0.3);
+        }
+
         &.active {
-                img {
-                        border: 4px solid $ig-blue;
-
-                        @media (max-width: $ig-screen-sm-min) {
-                                border: 3px solid $ig-blue;
-                        }
-                }
+                border: 1px solid $ig-blue;
         }
 }