Changeset 25844

Timestamp:

10/18/2013 05:35:39 PM (12 years ago)

Author:

ocean90

Message:

CSS cleanup for the about page.

Also fixes for IE and support for RTL.

see #25603.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (1 diff)
• css/ie.css (modified) (3 diffs)
• css/wp-admin-rtl.css (modified) (3 diffs)
• css/wp-admin.css (modified) (15 diffs)

trunk/src/wp-admin/about.php

@@ -40 +40 @@
 
     <div class="feature-section col three-col about-updates">
-        <div>
+        <div class="col-1">
             <h4><?php _e( 'Updates While You Sleep' ); ?></h4>
             <p><?php _e( 'With WordPress 3.7, you don&#8217;t have to lift a finger to apply maintenance and security updates. Most sites are now able to automatically apply these updates in the background, though some configurations may not allow it.' ); ?></p>
         </div>
-        <div><img alt="" src="<?php echo admin_url( 'images/about-updates-2x.png' ); ?>" /></div>
-        <div class="last-feature">
+        <div class="col-2">
+            <img alt="" src="<?php echo admin_url( 'images/about-updates-2x.png' ); ?>" />
+        </div>
+        <div class="col-3 last-feature">
             <h4><?php _e( 'More Reliable Than Ever' ); ?></h4>
             <p><?php _e( 'The update process has been made even more reliable and secure, with dozens of new checks and safeguards.' ); ?></p>

trunk/src/wp-admin/css/ie.css

@@ -487 +487 @@
 }
 
-.about-wrap img.element-screenshot {
-    padding: 2px;
-}
-
-.about-wrap .feature-section img,
-.about-wrap .feature-section .image-mask {
-    border-width: 1px;
-    border-style: solid;
-}
-
-.about-wrap .feature-section.three-col img {
-    margin-left: 0;
-}
-
 .available-theme {
     display: inline;
@@ -514 +500 @@
 }
 
-.about-wrap .three-col-images img {
-    margin: 0 0.6% 10px;
-}
-
-.about-wrap .three-col-images .last-feature,
-.about-wrap .three-col-images .first-feature {
-    float: none;
+.about-wrap .three-col.about-updates .col-2 {
+    width: 15%;
+}
+
+.revisions-tickmarks,
+.revisions-tooltip {
+    display: none !important;
+}
+
+.revisions.pinned .revisions-controls {
+    position: relative;
 }
 
@@ -627 +617 @@
     height: 29px;
 }
-
-.revisions-tickmarks,
-.revisions-tooltip {
-    display: none !important;
-}
-
-.revisions.pinned .revisions-controls {
-    position: relative;
-}
-

trunk/src/wp-admin/css/wp-admin-rtl.css

@@ -1707 +1707 @@
 }
 
+.about-wrap .feature-section.two-col div,
 .about-wrap .feature-section.three-col div {
     margin-right: 0;
@@ -1713 +1714 @@
 }
 
-.about-wrap .feature-section.three-col h4 {
-    text-align: right;
-}
-
-.about-wrap .feature-section.three-col img {
-    margin-right: 5px;
-    margin-left: 0;
-}
-
-.about-wrap .feature-section.three-col .last-feature {
-    margin-left: 0;
-}
-
-.about-wrap .feature-section img {
-    margin: 0 0 10px 0.7%;
-}
-
-.about-wrap .feature-section.images-stagger-right img,
-.about-wrap .feature-section.images-stagger-right .video {
-    float: left;
-    margin: 0 2em 12px 5px;
-}
-
-.about-wrap .feature-section.images-stagger-left img {
-    float: right;
-    margin: 0 5px 12px 2em;
+.about-wrap .feature-section.col .last-feature {
+    margin-left: 0;
+}
+
+.about-wrap .feature-section div p img {
+    float: left;
+    margin-left: 0;
+    margin-right: 10px;
 }
 
@@ -1748 +1731 @@
 }
 
-@media only screen and (max-width: 900px) {
-    .about-wrap .feature-section.images-stagger-right .video.image-66 {
-        margin-right: 3px;
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .about-wrap .feature-section .image-66 {
-        float: none;
-    }
-
-    .about-wrap .feature-section.images-stagger-right .image-66 {
-        margin-right: 3px;
-    }
-
-    .about-wrap .feature-section.images-stagger-left .image-66 {
-        margin-left: 3px;
-    }
-}
 
 /*------------------------------------------------------------------------------

trunk/src/wp-admin/css/wp-admin.css

@@ -2313 +2313 @@
 
 .wp-core-ui .welcome-panel .button.button-hero {
-    margin: 15px 0 3px;
+    margin: 15px 0 3px;
 }
 
@@ -2379 +2379 @@
 
 .welcome-panel .welcome-write-blog {
-    background-position: 0 -44px;
+    background-position: 0 -44px;
 }
 
@@ -2387 +2387 @@
 
 .welcome-panel .welcome-panel-column li {
-    line-height: 16px;
-    list-style-type: none;
+    line-height: 16px;
+    list-style-type: none;
 }
 
@@ -3163 +3163 @@
 
 .no-js .category-tabs li.hide-if-no-js {
-    display: none;
+    display: none;
 }
 
@@ -5776 +5776 @@
 }
 
-.about-wrap .about-passwords {
-    margin: 20px 0;
-    padding: 1px 20px 10px;
-    background-color: #f9f9f9;
-}
-
-.about-wrap .about-auto-update {
-    text-align: center;
-    background-color: #f9f9ef;
-    clear: both;
-    padding: 10px;
-}
-
-.about-wrap .about-auto-update.cool {
-    background-color: #eff9ef;
-}
-
-.about-wrap .about-password-meter input {
-    font-size: 250%;
-    width: 100%;
-    display: block;
-    width: 100%;
-    padding: 5px;
-}
-
-.about-wrap .about-password-meter #pass-strength-result {
-    font-weight: normal !important;
-    display:block !important;
-    font-size: 150%;
-    width: 100%;
-    padding: 17px 0;
-    margin-bottom: 15px;
-}
-
-.about-wrap .feature-section img {
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    max-width: 20%;
-}
-
-.about-wrap .feature-section div p img {
-    float: right;
-    margin-left: 10px;
-}
 
 /* Typography */
@@ -5856 +5810 @@
 
 .about-wrap h3 {
-    font-size: 24px;
-    margin-bottom: 1em;
+    font-size: 1.5em;
+    line-height: 1.5em;
     padding-top: 20px;
 }
@@ -5864 +5818 @@
     padding-bottom: 20px;
 }
-
-.about-wrap .feature-section 
 
 .about-wrap .feature-section h4 {
@@ -5932 +5884 @@
 /* Changelog / Update screen */
 
-.about-wrap .feature-section img,
-.about-wrap .feature-section .video {
-    border: none;
-    margin: 0 1.94% 10px 0;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-}
-
-.about-wrap .feature-section .video video {
-    max-width: 100%;
-}
-
 .about-wrap .feature-section.three-col img {
     margin: 0.5em 0 0.5em 5px;
@@ -5950 +5890 @@
 }
 
-.ie8 .about-wrap .feature-section.three-col img {
-    margin-left: 0;
-}
-
-.about-wrap .feature-section.images-stagger-right img,
-.about-wrap .feature-section.images-stagger-right .video {
-    float: right;
-    margin: 0 5px 12px 2em;
-}
-
-.about-wrap .feature-section.images-stagger-left img {
-    float: left;
-    margin: 0 2em 12px 5px;
-}
-
-.about-wrap .feature-section .image-100 {
-    margin: 0 0 2em 0;
-    width: 100%;
-}
-
-.about-wrap .feature-section .image-66 {
-    width: 65%;
-}
-
-.about-wrap .feature-section .image-66.video {
-    max-width: 600px;
-}
-
-.about-wrap .feature-section .image-50 {
-    max-width: 50%;
-}
-
-.about-wrap .feature-section img.image-30 {
-    max-width: 31.2381%;
-}
-
-.ie8 .about-wrap .feature-section img {
-    border-width: 1px;
-    border-style: solid;
-}
-
-.about-wrap .images-stagger-right img.image-30:nth-child(2) {
-    margin-left: 1em;
-}
-
 .about-wrap .feature-section.col {
     margin-bottom: 0;
@@ -6000 +5895 @@
 
 .about-wrap .feature-section.col h4 {
-    margin:  0 0 0.6em 0;
-}
-
-.about-wrap .feature-section.col .last-feature {
-    margin-right: 0;
+    margin: 0 0 0.6em 0;
 }
 
@@ -6019 +5910 @@
 }
 
-.about-wrap .three-col.about-updates div:nth-of-type(1),
-.about-wrap .three-col.about-updates div:nth-of-type(3) {
+.about-wrap .three-col.about-updates .col-1,
+.about-wrap .three-col.about-updates .col-3 {
     width: 37%;
     margin: 0;
 }
 
-.about-wrap .three-col.about-updates div:nth-of-type(2) {
+.about-wrap .three-col.about-updates .col-2 {
     width: 16%;
     margin: 0 5%;
 }
 
+.about-wrap .feature-section.col .last-feature {
+    margin-right: 0;
+}
+
 .about-wrap .three-col.about-updates img {
     margin: 0;
 }
 
-.about-wrap .three-col-images {
-    text-align: center;
-}
-
-.about-wrap .three-col-images img {
-    margin: 0 0 10px;
-}
-
-.about-wrap .three-col-images .last-feature {
-    float: right;
-}
-
-.about-wrap .three-col-images .first-feature {
-    float: left;
-}
-
 .about-wrap .changelog .feature-section {
     overflow: hidden;
+}
+
+.about-wrap .about-passwords {
+    margin: 20px 0;
+    padding: 1px 20px 10px;
+    background-color: #f9f9f9;
+}
+
+.about-wrap .about-auto-update {
+    text-align: center;
+    background-color: #f9f9ef;
+    clear: both;
+    padding: 10px;
+}
+
+.about-wrap .about-auto-update.cool {
+    background-color: #eff9ef;
+}
+
+.about-wrap .about-password-meter input {
+    font-size: 250%;
+    line-height: 1;
+    width: 100%;
+    display: block;
+    width: 100%;
+    padding: 5px;
+}
+
+.about-wrap .about-password-meter #pass-strength-result {
+    display: block !important;
+    font-size: 150%;
+    width: 100%;
+    padding: 17px 0;
+    margin-bottom: 15px;
+}
+
+.about-wrap .feature-section div p img {
+    float: right;
+    margin-left: 10px;
+    max-width: 20%;
 }
 
@@ -6059 +5978 @@
 }
 
-@media only screen and (max-width: 900px) {
-    .about-wrap .feature-section.images-stagger-left img,
-    .about-wrap .feature-section.images-stagger-right img,
-    .about-wrap .feature-section.images-stagger-right .video {
-        clear: both;
-    }
-
-    .about-wrap .feature-section .video.image-66 {
-        float: none;
-        width: 98%;
-        max-width: 98%;
-    }
-
-    .about-wrap .feature-section.images-stagger-right .video.image-66 {
-        margin-left: 3px;
-    }
-}
-
-@media only screen and (max-width: 768px) {
-    .about-wrap .feature-section .image-66 {
-        float: none;
-        width: 98%;
-        max-width: 98%;
-    }
-
-    .about-wrap .feature-section.images-stagger-right .image-66 {
-        margin-left: 3px;
-    }
-
-    .about-wrap .feature-section.images-stagger-left .image-66 {
-        margin-right: 3px;
-    }
-}
 
 /* Return to Dashboard Home link */
@@ -9369 +9255 @@
 
     .press-this .tagchecklist span a {
-        background-image: url('../images/xit-2x.gif');
-        background-size: 20px auto;
+        background-image: url('../images/xit-2x.gif');
+        background-size: 20px auto;
      }
 
@@ -9376 +9262 @@
     .js .stuffbox:hover .handlediv,
     .widget-top a.widget-action {
-        background-image: url('../images/arrows-2x.png');
-        background-size: 15px 123px;
+        background-image: url('../images/arrows-2x.png');
+        background-size: 15px 123px;
      }
 
     .widget-top a.widget-action:hover {
-        background-image: url('../images/arrows-dark-2x.png');
-        background-size: 15px 123px;
+        background-image: url('../images/arrows-dark-2x.png');
+        background-size: 15px 123px;
     }
 
@@ -9441 +9327 @@
 
     .wp-full-overlay .collapse-sidebar-arrow {
-        background-image: url('../images/arrows-2x.png');
-        background-size: 15px 123px;
+        background-image: url('../images/arrows-2x.png');
+        background-size: 15px 123px;
      }