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 (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

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;
     }
 }