WordPress.org

Make WordPress Core

Changeset 26134


Ignore:
Timestamp:
11/13/2013 05:59:32 PM (6 years ago)
Author:
iammattthomas
Message:

Bring in the responsive component of MP6. See #25858.

  • Makes the admin fully responsive down to 320px wide.
  • Adds a touch-optimized main menu that can be opened and closed from the toolbar.
  • Size and positioning adjustments to icons, buttons, and text elements for better touch usability.

A few changes since MP6:

  • Removed jQuery mobile. This script was used to add swipe controls to open/close the sidebar menu. This feature was apparently buggy and due to the pending demise of jQuery mobile, it was removed.
  • Removed use of Backbone.js. Adding Backbone.js to this script would add a dependency of Backbone.js for all of the admin. Additionally, it was used to add a menu item. Instead of doing that, it was added via the admin menu API. This also fixes a bad delay in the item showing in the menu.
  • CSS layout is standardized. Comments have also been cleaned up.
  • Jetpack and Akismet code is removed.
  • RTL CSS is removed.
  • JS passes hinting other than one small issue that will likely be removed when parts of the code are reviewed.

A number of areas for improvement remain; we're tracking these issues in the comments of #25858.

Props to tollmanz, tillkruess, helen, dd32, and apeatling.

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/admin-header.php

    r26124 r26134  
    6868    isRtl = <?php echo (int) is_rtl(); ?>;
    6969</script>
     70<meta name="viewport" content="width=device-width,initial-scale=1.0">
    7071<?php
    7172
  • trunk/src/wp-admin/css/wp-admin.css

    r26125 r26134  
    19221922/* Sticky admin menu */
    19231923
    1924 .sticky-menu #wpwrap {
    1925     z-index: 1; /* prevent flyouts from going behind content in Webkit */
    1926 }
    1927 
    19281924.sticky-menu #adminmenuwrap {
    19291925    position: fixed;
     
    1024110237}
    1024210238
     10239li#wp-admin-bar-toggle-button {
     10240    display: none;
     10241}
     10242
    1024310243/* =Media Queries
    1024410244-------------------------------------------------------------- */
     
    1045810458    text-decoration: none;
    1045910459}
     10460
     10461@-ms-viewport {
     10462    width: device-width;
     10463    zoom: 1;
     10464    user-zoom: fixed;
     10465}
     10466
     10467@media screen and ( max-width: 782px ) {
     10468    body {
     10469        min-width: 240px;
     10470        overflow-x: hidden;
     10471    }
     10472
     10473    body * {
     10474        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
     10475    }
     10476
     10477    #wpwrap {
     10478        background: #f0f0f0;
     10479        overflow-x: hidden;
     10480    }
     10481
     10482    #wpcontent, .auto-fold #wpcontent {
     10483        position: relative;
     10484        margin-left: 0;
     10485        padding-left: 10px;
     10486    }
     10487
     10488    .wrap {
     10489        margin-right: 10px;
     10490        margin-left: 0;
     10491    }
     10492
     10493    .col-wrap {
     10494        padding: 0;
     10495    }
     10496
     10497    .sticky-menu #adminmenuwrap {
     10498        position: relative;
     10499        z-index: auto;
     10500        top: 0;
     10501    }
     10502
     10503    /* Hidden Elements */
     10504    #screen-meta,
     10505    #screen-meta-links,
     10506    #collapse-menu,
     10507    .post-format-select {
     10508        display: none !important;
     10509    }
     10510
     10511    /* Input Elements */
     10512    textarea {
     10513        -webkit-appearance: none;
     10514    }
     10515
     10516    input[type=text], input[type=search],
     10517    input[type=password], input[type=number] {
     10518        -webkit-appearance: none;
     10519        padding: 6px 10px;
     10520    }
     10521
     10522    input.code {
     10523        padding-bottom: 5px;
     10524        padding-top: 10px;
     10525    }
     10526
     10527    input[type=checkbox], .widefat th input[type=checkbox] {
     10528        -webkit-appearance: none;
     10529        padding: 10px;
     10530    }
     10531
     10532    .widefat th input[type=checkbox] {
     10533        margin-bottom: 8px;
     10534    }
     10535
     10536    input[type=checkbox]:checked:before, .widefat th input[type=checkbox]:before {
     10537        font: normal 30px/1 'Dashicons';
     10538        margin: -3px -5px;
     10539    }
     10540
     10541    input[type=radio],
     10542    input[type=checkbox] {
     10543        height: 25px;
     10544        width: 25px;
     10545    }
     10546
     10547    .wp-admin p input[type=checkbox],
     10548    .wp-admin p input[type=radio] {
     10549        margin-top: -3px;
     10550    }
     10551
     10552    input[type=radio]:checked:before {
     10553        vertical-align: middle;
     10554        width: 9px;
     10555        height: 9px;
     10556        margin: 7px;
     10557        line-height: 16px;
     10558    }
     10559
     10560    .wp-upload-form input[type=submit] {
     10561        margin-top: 10px;
     10562    }
     10563
     10564    #wpbody select {
     10565        height: 36px;
     10566        font-size: 16px;
     10567    }
     10568
     10569    .wp-core-ui .button,
     10570    input#publish,
     10571    input#save-post,
     10572    a.preview {
     10573        padding: 10px 14px;
     10574        line-height: 1;
     10575        font-size: 14px;
     10576        vertical-align: middle;
     10577        height: auto;
     10578        margin-bottom: 4px;
     10579    }
     10580
     10581    #media-upload.wp-core-ui .button {
     10582        padding: 0 10px 1px;
     10583        height: 24px;
     10584        line-height: 22px;
     10585        font-size: 13px;
     10586    }
     10587
     10588    .wrap .add-new-h2, .wrap .add-new-h2:active {
     10589        padding: 10px 15px;
     10590        font-size: 14px;
     10591    }
     10592
     10593    .wp-color-result {
     10594        height: auto;
     10595        padding-left: 45px;
     10596    }
     10597
     10598    .wp-color-result:after {
     10599        font-size: 14px;
     10600        height: auto;
     10601        padding: 6px 14px;
     10602    }
     10603
     10604    #createuser .form-field input {
     10605        width: 100%;
     10606    }
     10607
     10608    /* Feedback Messages */
     10609    .wrap div.updated, .wrap div.error, .media-upload-form div.error {
     10610        margin: 20px 0 10px 0;
     10611        padding: 5px 10px;
     10612        font-size: 14px;
     10613        line-height: 175%;
     10614    }
     10615
     10616    /* Sidebar Adjustments */
     10617    .auto-fold #adminmenu,
     10618    .auto-fold #adminmenuback,
     10619    .auto-fold #adminmenuwrap {
     10620        position: absolute;
     10621        top: 0;
     10622        left: 0;
     10623        z-index: 100;
     10624    }
     10625
     10626    .auto-fold #adminmenuback,
     10627    .auto-fold #adminmenuwrap {
     10628        left: -200px;
     10629    }
     10630
     10631    .auto-fold #adminmenuwrap,
     10632    .auto-fold #adminmenu,
     10633    .auto-fold #adminmenuback {
     10634        width: 190px;
     10635    }
     10636
     10637    .auto-fold #adminmenu li.menu-top {
     10638        width: 100%;
     10639    }
     10640
     10641    /* Let the menubar scroll independently of the main column */
     10642    .auto-fold #adminmenuwrap {
     10643        height: 100%;
     10644        position: fixed;
     10645        overflow: hidden;
     10646        overflow-y: scroll;
     10647        top: 46px;
     10648
     10649        height: -webkit-calc(100% - 46px);
     10650        height: calc(100% - 46px);
     10651
     10652        -webkit-box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
     10653        box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
     10654
     10655        -moz-box-sizing: border-box;
     10656        -webkit-box-sizing: border-box;
     10657        box-sizing: border-box;
     10658
     10659        -webkit-overflow-scrolling: touch;
     10660    }
     10661
     10662    /* Experimental animations for sidebar */
     10663    .auto-fold #adminmenu,
     10664    .auto-fold #adminmenuback,
     10665    .auto-fold #adminmenuwrap {
     10666        -moz-transition: left .2s ease-in-out;
     10667        -webkit-transition: left .2s ease-in-out;
     10668        transition: left .2s ease-in-out;
     10669    }
     10670
     10671    #wpbody {
     10672        -moz-transition: right .2s ease-in-out;
     10673        -webkit-transition: right .2s ease-in-out;
     10674        transition: right .2s ease-in-out;
     10675    }
     10676
     10677    .auto-fold #adminmenu {
     10678        -webkit-opacity: .10;
     10679        -moz-opacity: .10;
     10680        opacity: .10;
     10681        -moz-transition: left .2s ease-in-out, -moz-opacity .3s ease-in;
     10682        -webkit-transition: left .2s ease-in-out, -webkit-opacity .3s ease-in;
     10683        transition: left .2s ease-in-out, opacity .3s ease-in;
     10684    }
     10685
     10686    .auto-fold .moby6-open #adminmenu {
     10687        -moz-opacity: 1;
     10688        -webkit-opacity: 1;
     10689        opacity: 1;
     10690    }
     10691
     10692    /* Resize the admin menu items to a comfortable touch size */
     10693    .auto-fold #adminmenu li a {
     10694        font-size: 16px;
     10695        padding: 5px;
     10696    }
     10697
     10698    .auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
     10699        padding: 10px 10px 10px 20px;
     10700    }
     10701
     10702    /* Restore the menu names */
     10703    .auto-fold #adminmenu .wp-menu-name {
     10704        display: block;
     10705        margin-left: 35px;
     10706    }
     10707
     10708    /* Switch the arrow side */
     10709    .auto-fold ul#adminmenu a.wp-has-current-submenu:after,
     10710    .auto-fold ul#adminmenu > li.current > a.current:after {
     10711        border-width: 8px;
     10712        margin-top: -8px;
     10713    }
     10714
     10715    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     10716        display: none;
     10717    }
     10718
     10719    /* Make the submenus appear correctly when tapped. */
     10720    #adminmenu .wp-submenu {
     10721        position: relative;
     10722        display: none;
     10723    }
     10724
     10725    .auto-fold #adminmenu .selected .wp-submenu,
     10726    .auto-fold #adminmenu .wp-menu-open .wp-submenu {
     10727        position: relative;
     10728        display: block;
     10729        top: 0;
     10730        left: -1px;
     10731        -webkit-box-shadow: none;
     10732        box-shadow: none;
     10733    }
     10734
     10735    .auto-fold #adminmenu .selected .wp-submenu:after,
     10736    .auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
     10737        display: none;
     10738    }
     10739
     10740    .auto-fold #adminmenu .opensub .wp-submenu {
     10741        display: none;
     10742    }
     10743
     10744    .auto-fold #adminmenu .selected .wp-submenu {
     10745        display: block;
     10746    }
     10747
     10748    .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
     10749        display: block;
     10750    }
     10751
     10752    /* Remove submenu headers and adjust sub meu*/
     10753    #adminmenu .wp-submenu .wp-submenu-head {
     10754        display: none;
     10755    }
     10756
     10757    /*  Sidebar Toggle */
     10758    #moby6-toggle {
     10759        position: fixed;
     10760        top: 5px;
     10761        left: 4px;
     10762        padding-right: 10px;
     10763        z-index: 99999;
     10764        border: none;
     10765        box-sizing: border-box;
     10766        -moz-box-sizing: border-box;
     10767    }
     10768
     10769    .wrap .icon32 + h2 {
     10770        margin-top: -2px;
     10771    }
     10772
     10773    #wpadminbar #wp-admin-bar-toggle-button a {
     10774        display: block;
     10775        padding: 0;
     10776        overflow: hidden;
     10777        outline: none;
     10778        text-decoration: none;
     10779        border: 1px solid transparent;
     10780        background: none;
     10781        height: 44px;
     10782        margin-left: -1px;
     10783    }
     10784
     10785    li#wp-admin-bar-toggle-button {
     10786        display: block;
     10787    }
     10788
     10789    #wpadminbar #wp-admin-bar-toggle-button a:hover {
     10790        border: 1px solid transparent;
     10791    }
     10792
     10793    #wpadminbar #wp-admin-bar-toggle-button .ab-icon:before {
     10794        color: #888;
     10795        content: '\f228';
     10796        display: inline-block;
     10797        float: left;
     10798        font: normal 40px/45px 'Dashicons';
     10799        vertical-align: middle;
     10800        outline: none;
     10801        margin: 0;
     10802        -webkit-font-smoothing: antialiased;
     10803        -moz-osx-font-smoothing: grayscale;
     10804        height: 44px;
     10805        width: 50px;
     10806        padding: 0;
     10807        border: none;
     10808        text-align: center;
     10809        text-decoration: none;
     10810        box-sizing: border-box;
     10811        -moz-box-sizing: border-box;
     10812    }
     10813
     10814    .moby6-open #wpadminbar #wp-admin-bar-toggle-button a {
     10815        background: #000;
     10816    }
     10817
     10818    .moby6-open #wpbody {
     10819        right: -190px;
     10820    }
     10821
     10822    .auto-fold .moby6-open #adminmenuback,
     10823    .auto-fold .moby6-open #adminmenuwrap {
     10824        left: 0;
     10825    }
     10826
     10827    /* General New Post Form */
     10828    #post-body-content {
     10829        min-width: 0;
     10830    }
     10831
     10832    #titlediv #title {
     10833        padding: 8px;
     10834    }
     10835
     10836    #titlediv #title-prompt-text,
     10837    #wp-fullscreen-title-prompt-text {
     10838        padding: 10px 10px;
     10839    }
     10840
     10841    .post-format-options {
     10842        padding-right: 0;
     10843    }
     10844
     10845    .post-format-options a {
     10846        margin-right: 5px;
     10847        margin-bottom: 5px;
     10848        min-width: 52px;
     10849    }
     10850
     10851    .post-format-options .post-format-title {
     10852        font-size: 11px;
     10853    }
     10854
     10855    .post-format-options a div {
     10856        height: 28px;
     10857        width: 28px;
     10858    }
     10859
     10860    .post-format-options a div:before {
     10861        font-size: 26px !important;
     10862    }
     10863
     10864    /* General Metabox */
     10865    .postbox {
     10866        font-size: 14px;
     10867    }
     10868
     10869    #poststuff h3,
     10870    .metabox-holder h3 {
     10871        padding: 12px;
     10872    }
     10873
     10874    .postbox .handlediv {
     10875        margin-top: 3px;
     10876    }
     10877
     10878    /* Publish Metabox Options */
     10879    #post-visibility-select {
     10880        line-height: 280%;
     10881    }
     10882
     10883    .wp-core-ui .save-post-status.button {
     10884        top: 16px;
     10885        position: relative;
     10886        margin: 0 10px;
     10887    }
     10888
     10889    .wp-core-ui .save-post-visibility,
     10890    .wp-core-ui .save-timestamp {
     10891        vertical-align: middle;
     10892        margin-right: 15px;
     10893    }
     10894
     10895    .timestamp-wrap select#mm {
     10896        display: block;
     10897        width: 100%;
     10898        margin-bottom: 10px;
     10899    }
     10900
     10901    .timestamp-wrap #jj,
     10902    .timestamp-wrap #aa,
     10903    .timestamp-wrap #hh,
     10904    .timestamp-wrap #mn {
     10905        padding: 12px 3px;
     10906        font-size: 14px;
     10907        margin-bottom: 5px;
     10908        width: auto;
     10909        text-align: center;
     10910    }
     10911
     10912    /* Categories Metabox */
     10913    ul.category-tabs {
     10914        margin: 30px 0 15px;
     10915    }
     10916
     10917    ul.category-tabs li.tabs {
     10918        padding: 15px;
     10919    }
     10920
     10921    ul#categorychecklist li {
     10922        margin-bottom: 15px;
     10923    }
     10924
     10925    ul#categorychecklist ul {
     10926        margin-top: 15px;
     10927    }
     10928
     10929    .category-add input[type=text],
     10930    .category-add select {
     10931        max-width: none;
     10932        margin-bottom: 15px;
     10933    }
     10934
     10935    /* Tags Metabox */
     10936    .tagsdiv .newtag {
     10937        width: 100%;
     10938        padding: 25px 10px;
     10939        margin-bottom: 15px;
     10940    }
     10941
     10942    .tagchecklist {
     10943        margin: 25px 10px;
     10944    }
     10945
     10946    .tagchecklist span {
     10947        font-size: 16px;
     10948        line-height: 120%;
     10949    }
     10950
     10951    /* Revisions */
     10952    #diff-next-revision,
     10953    #diff-previous-revision {
     10954        margin-top: -1em;
     10955    }
     10956
     10957    table.diff {
     10958        -ms-word-break: break-all;
     10959        word-break: break-all;
     10960        word-wrap: break-word;
     10961    }
     10962
     10963    /* TinyMCE Adjustments */
     10964    .mceToolbar * {
     10965        white-space: normal !important;
     10966    }
     10967
     10968    .mceToolbar tr,
     10969    .mceToolbar td {
     10970        float: left !important;
     10971    }
     10972
     10973    .wp_themeSkin a.mceButton {
     10974        width: 30px;
     10975        height: 30px;
     10976    }
     10977
     10978    .wp_themeSkin .mceButton .mceIcon {
     10979        margin-top: 5px;
     10980        margin-left: 5px;
     10981    }
     10982
     10983    .wp_themeSkin .mceSplitButton {
     10984        margin-top: 1px;
     10985    }
     10986
     10987    .wp_themeSkin .mceSplitButton td a.mceAction {
     10988        padding-top: 6px;
     10989        padding-bottom: 6px;
     10990        padding-left: 6px;
     10991        padding-right: 3px;
     10992    }
     10993
     10994    .wp_themeSkin .mceSplitButton td a.mceOpen,
     10995    .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen {
     10996        padding-top: 6px;
     10997        padding-bottom: 6px;
     10998        background-position: 1px 6px;
     10999    }
     11000
     11001    .wp_themeSkin table.mceListBox {
     11002        margin: 5px;
     11003    }
     11004
     11005    div.quicktags-toolbar input {
     11006        padding: 10px 20px;
     11007    }
     11008
     11009    #wp-content-editor-tools {
     11010        padding-top: 20px;
     11011        padding-right: 15px;
     11012        overflow: hidden;
     11013    }
     11014
     11015    a.wp-switch-editor {
     11016        font-size: 16px;
     11017        line-height: 1em;
     11018        margin: 3px 0 0 7px;
     11019        padding: 12px 15px !important;
     11020    }
     11021
     11022    #wp-content-media-buttons a {
     11023        font-size: 16px;
     11024        line-height: 37px;
     11025        height: 39px;
     11026        padding: 0 20px 0 15px;
     11027    }
     11028
     11029    .wp-media-buttons span.wp-media-buttons-icon,
     11030    .wp-media-buttons span.jetpack-contact-form-icon {
     11031        width: 22px !important;
     11032        margin-top: -3px !important;
     11033        margin-left: -5px !important;
     11034    }
     11035
     11036    .wp-media-buttons .add_media span.wp-media-buttons-icon:before,
     11037    .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before {
     11038        font-size: 20px !important;
     11039    }
     11040
     11041    #content_wp_fullscreen {
     11042        display: none;
     11043    }
     11044
     11045    .misc-pub-section {
     11046        padding: 20px 10px 20px;
     11047    }
     11048
     11049    .misc-pub-section > a {
     11050        float: right;
     11051        font-size: 16px;
     11052    }
     11053
     11054    #delete-action,
     11055    #publishing-action {
     11056        line-height: 47px;
     11057    }
     11058
     11059    /* Subsubsub Nav */
     11060    .subsubsub {
     11061        font-size: 16px;
     11062        text-align: center;
     11063        margin-bottom: 15px;
     11064    }
     11065
     11066    /* WP List Table Options & Filters */
     11067    .tablenav {
     11068        height: auto;
     11069    }
     11070
     11071    .tablenav.top {
     11072        margin: 0;
     11073    }
     11074
     11075    .tablenav.bottom {
     11076        position: relative;
     11077        margin-top: 15px;
     11078    }
     11079
     11080    .tablenav br {
     11081        display: none;
     11082    }
     11083
     11084    .tablenav br.clear {
     11085        display: block;
     11086    }
     11087
     11088    p.search-box {
     11089        float: none;
     11090        clear: both;
     11091        margin-top: 35px;
     11092    }
     11093
     11094    p.search-box input[name="s"] {
     11095        height: auto;
     11096        float: none;
     11097        width: 100%;
     11098        margin-bottom: 10px;
     11099        -webkit-appearance: none;
     11100    }
     11101
     11102    .tablenav.top .actions, .view-switch {
     11103        display: none;
     11104    }
     11105
     11106    /* Pagination */
     11107    .tablenav.top .displaying-num {
     11108        display: none;
     11109    }
     11110
     11111    .tablenav.bottom .displaying-num {
     11112        position: absolute;
     11113        right: 0;
     11114        top: 10px;
     11115        font-size: 14px;
     11116    }
     11117
     11118    .tablenav-pages {
     11119        width: 100%;
     11120        text-align: center;
     11121        margin: 0 0 25px;
     11122    }
     11123
     11124    .tablenav.bottom .tablenav-pages {
     11125        margin-top: 25px;
     11126    }
     11127
     11128    .tablenav.top .tablenav-pages.one-page {
     11129        display: none;
     11130    }
     11131
     11132    .tablenav.bottom .tablenav-pages.one-page {
     11133        margin: 15px 0 0 0;
     11134        height: 0;
     11135    }
     11136
     11137    .tablenav-pages .pagination-links .paging-input {
     11138        font-size: 18px;
     11139    }
     11140
     11141    .tablenav-pages .pagination-links a {
     11142        padding: 8px 20px 11px;
     11143        font-size: 18px;
     11144        background: rgba(0, 0, 0, 0.05);
     11145    }
     11146
     11147    .tablenav-pages .pagination-links .current-page {
     11148        padding: 10px;
     11149        font-size: 14px;
     11150    }
     11151
     11152    /* WP List Table Adjustments: General */
     11153    .form-wrap > p {
     11154        display: none;
     11155    }
     11156
     11157    .comment-count {
     11158        font-size: 14px;
     11159    }
     11160
     11161    /* Posts */
     11162    .column-title {
     11163        width: 85%;
     11164    }
     11165
     11166    .fixed .column-comments, .widefat .check-column {
     11167        width: 35px
     11168    }
     11169
     11170    .fixed .column-date, .fixed .column-author,
     11171    .column-categories, .column-tags {
     11172        display: none;
     11173    }
     11174
     11175    .widefat thead .check-column, .widefat tfoot .check-column {
     11176        padding: 10px 0 10px;
     11177    }
     11178
     11179    .widefat * {
     11180        word-wrap: normal;
     11181    }
     11182
     11183    /* Categories */
     11184    .fixed .column-description {
     11185        display: none;
     11186    }
     11187
     11188    .fixed .column-posts {
     11189        width: 50px;
     11190    }
     11191
     11192    .fixed .column-slug {
     11193        width: 30%;
     11194    }
     11195
     11196    /* Comments */
     11197    .fixed .column-response {
     11198        width: 35%;
     11199    }
     11200
     11201    /* Media */
     11202    .fixed .column-parent {
     11203        display: none;
     11204    }
     11205
     11206    /* Comments */
     11207    .fixed .column-email, .fixed .column-name {
     11208        display: none;
     11209    }
     11210
     11211    .fixed .column-role {
     11212        width: 35%;
     11213    }
     11214
     11215    /* Plugins */
     11216    .plugins .column-description {
     11217        width: 70%;
     11218    }
     11219
     11220    #wpbody-content .plugins .plugin-title {
     11221        white-space: normal;
     11222        width: 30%;
     11223    }
     11224
     11225    /* Updates */
     11226    #wpbody-content #update-themes-table .plugin-title {
     11227        width: auto;
     11228    }
     11229
     11230    /* Form Tables */
     11231    .form-table {
     11232        -moz-box-sizing: border-box;
     11233        box-sizing: border-box;
     11234    }
     11235
     11236    .form-table th,
     11237    .form-table td {
     11238        display: block;
     11239        width: auto;
     11240        vertical-align: middle;
     11241    }
     11242
     11243    .form-table .color-palette td {
     11244        display: table-cell;
     11245        width: 15px;
     11246    }
     11247
     11248    .form-table table.color-palette {
     11249        margin-right: 10px;
     11250    }
     11251
     11252    textarea,
     11253    input {
     11254        font-size: 16px;
     11255    }
     11256
     11257    .form-table td input[type="text"],
     11258    .form-table td input[type="password"],
     11259    .form-table td select,
     11260    .form-table td textarea,
     11261    .form-table span.description,
     11262    #profile-page .form-table textarea {
     11263        width: 100%;
     11264        font-size: 16px;
     11265        line-height: 1.5;
     11266        padding: 7px 10px;
     11267        display: block;
     11268        max-width: none;
     11269        box-sizing: border-box;
     11270        -mox-box-sizing: border-box;
     11271    }
     11272
     11273    input[type=text].small-text,
     11274    input[type=search].small-text,
     11275    input[type=password].small-text,
     11276    input[type=number].small-text,
     11277    input[type="number"].small-text,
     11278    .form-table input[type=text].small-text {
     11279        width: auto;
     11280        max-width: 55px;
     11281        display: inline;
     11282        padding: 3px 6px;
     11283        margin: 0 3px;
     11284    }
     11285
     11286    #pass-strength-result {
     11287        width: 100%;
     11288        box-sizing: border-box;
     11289        -mox-box-sizing: border-box;
     11290        padding: 8px;
     11291    }
     11292
     11293    .form-table span.description {
     11294        padding: 4px 0 0;
     11295        line-height: 1.4em;
     11296    }
     11297
     11298    .form-table th {
     11299        padding-top: 10px;
     11300        padding-bottom: 0;
     11301        border-bottom: 0;
     11302    }
     11303
     11304    .form-table td {
     11305        padding-top: 8px;
     11306        padding-left: 0;
     11307    }
     11308
     11309    .form-table input.regular-text {
     11310        width: 100%;
     11311    }
     11312
     11313    .form-table label {
     11314        font-size: 14px;
     11315    }
     11316
     11317    .form-table fieldset label {
     11318        display: block;
     11319    }
     11320
     11321    #utc-time {
     11322        margin-top: 10px;
     11323    }
     11324
     11325    #utc-time,
     11326    #local-time {
     11327        display: block;
     11328        float: none;
     11329        padding: 0;
     11330        line-height: 2;
     11331    }
     11332
     11333    /* Add/Edit Media */
     11334    .wp_attachment_details label[for="content"] {
     11335        font-size: 14px;
     11336        line-height: 1.5em;
     11337    }
     11338
     11339    #media-items {
     11340        width: 100%;
     11341    }
     11342
     11343    .media-modal {
     11344        width: auto;
     11345    }
     11346
     11347    .media-frame {
     11348        overflow: auto;
     11349    }
     11350
     11351    .media-frame-menu {
     11352        position: relative;
     11353        width: auto;
     11354    }
     11355
     11356    .media-menu {
     11357        border-right: none;
     11358        position: relative;
     11359        border-bottom: 1px solid #dddddd;
     11360        overflow: hidden;
     11361    }
     11362
     11363    .media-menu .separator {
     11364        display: none;
     11365    }
     11366
     11367    .media-menu a {
     11368        float: left;
     11369        width: 40%;
     11370    }
     11371
     11372    .media-frame-router, .media-frame-content, .media-frame-toolbar {
     11373        left: auto;
     11374        right: auto;
     11375        top: auto;
     11376        bottom: auto;
     11377        position: relative;
     11378    }
     11379
     11380    .media-frame-title {
     11381        top: auto;
     11382        left: auto;
     11383        right: 0;
     11384        height: auto;
     11385    }
     11386
     11387    .media-frame-router {
     11388        margin-top: 10px;
     11389    }
     11390
     11391    .media-frame-title h1 {
     11392        line-height: 3;
     11393        font-size: 18px;
     11394    }
     11395
     11396    .media-router {
     11397        bottom: -2px;
     11398    }
     11399
     11400    .media-frame-content {
     11401        min-height: 300px;
     11402        max-height: 500px;
     11403        overflow: auto;
     11404    }
     11405
     11406    .media-toolbar-primary, .media-toolbar-secondary {
     11407        height: auto;
     11408    }
     11409
     11410    .uploader-inline h3 {
     11411        margin: 0 0 .8em 0;
     11412    }
     11413
     11414    .uploader-inline-content {
     11415        top: auto;
     11416    }
     11417
     11418    .uploader-inline-content .upload-ui {
     11419        margin: 0;
     11420    }
     11421
     11422    .attachments-browser .attachments, .attachments-browser .uploader-inline {
     11423        position: relative;
     11424        margin-right: 180px;
     11425    }
     11426
     11427    /* Links */
     11428    .link-manager-php #posts-filter {
     11429        margin-top: 25px;
     11430    }
     11431
     11432    .link-manager-php .tablenav.bottom {
     11433        overflow: hidden;
     11434    }
     11435
     11436    .links-table #link_rel {
     11437        max-width: none;
     11438    }
     11439
     11440    .links-table th,
     11441    .links-table td {
     11442        padding: 10px 0;
     11443    }
     11444
     11445    /**
     11446     * Nav Menus
     11447     * ----------------------------------------------------------------------------
     11448     */
     11449    body.nav-menus-php {
     11450        min-width: 0 !important;
     11451    }
     11452
     11453    #nav-menus-frame {
     11454        margin-left: 0;
     11455        float: none;
     11456        width: 100%;
     11457    }
     11458
     11459    #wpbody-content #menu-settings-column {
     11460        display: block;
     11461        width: 100%;
     11462        float: none;
     11463        margin-left: 0;
     11464    }
     11465
     11466    #side-sortables .add-menu-item-tabs {
     11467        margin: 15px 0;
     11468    }
     11469
     11470    ul.add-menu-item-tabs li.tabs {
     11471        padding: 15px;
     11472    }
     11473
     11474    .nav-menus-php .item-controls .item-type {
     11475        margin-top: 2px;
     11476    }
     11477
     11478    .nav-menus-php .customlinkdiv .howto input {
     11479        width: 65%;
     11480    }
     11481
     11482    .nav-menus-php .quick-search {
     11483        width: 85%;
     11484    }
     11485
     11486    #menu-management-liquid {
     11487        margin-top: 25px;
     11488    }
     11489
     11490    .nav-menus-php .menu-name-label.howto span {
     11491        margin-top: 13px
     11492    }
     11493
     11494    .menu-name-label #menu-name {
     11495        margin-top: 4px;
     11496    }
     11497
     11498    .nav-menus-php .major-publishing-actions .publishing-action {
     11499        margin-top: 6px;
     11500    }
     11501
     11502    .nav-menus-php .delete-action {
     11503        font-size: 14px;
     11504        line-height: 50px;
     11505        margin-top: 12px;
     11506    }
     11507
     11508    .menu-item-bar .menu-item-handle,
     11509    .menu-item-settings,
     11510    .description-wide {
     11511        width: auto;
     11512    }
     11513
     11514    .menu-item-settings {
     11515        padding: 10px;
     11516    }
     11517
     11518    .menu-item-settings .description-thin,
     11519    .menu-item-settings .description-wide {
     11520        width: 100%;
     11521        height: auto;
     11522    }
     11523
     11524    .menu-item-settings input {
     11525        width: 100%;
     11526    }
     11527
     11528    /* Theme Management Page */
     11529    #current-theme.has-screenshot {
     11530        padding: 0;
     11531        clear: both;
     11532    }
     11533
     11534    #current-theme img {
     11535        float: none;
     11536        margin-left: 0;
     11537        margin-bottom: 15px;
     11538    }
     11539
     11540    #current-theme.has-screenshot img.hide-if-no-customize {
     11541        display: block;
     11542    }
     11543
     11544    .available-theme .action-links .delete-theme {
     11545        float: none;
     11546        margin: 0;
     11547        padding: 0;
     11548        clear: both;
     11549    }
     11550
     11551    .available-theme .action-links .delete-theme a {
     11552        padding: 0;
     11553    }
     11554
     11555    /* Widget Management Page (Needs UX work on mobile) */
     11556    #templateside {
     11557        float: none;
     11558        width: auto;
     11559    }
     11560
     11561    #templateside li {
     11562        margin: 0;
     11563    }
     11564
     11565    #templateside li a {
     11566        display: block;
     11567        padding: 5px;
     11568    }
     11569
     11570    #templateside .highlight {
     11571        padding: 5px;
     11572        margin-left: -5px;
     11573        margin-top: -5px;
     11574    }
     11575
     11576    #template div {
     11577        float: none;
     11578        margin: 0;
     11579        width: auto;
     11580    }
     11581
     11582    #template textarea {
     11583        width: 100%;
     11584    }
     11585
     11586    .fileedit-sub .alignright {
     11587        margin-top: 15px;
     11588    }
     11589
     11590    /* Plugin/Theme Management Page */
     11591    .wp-list-table.plugins {
     11592        position: relative;
     11593        margin-top: 35px;
     11594        margin-bottom: 50px;
     11595    }
     11596
     11597    .wp-list-table.plugins thead .column-description,
     11598    #wpbody-content .wp-list-table.plugins tfoot .column-description,
     11599    .wp-list-table.plugins th#description {
     11600        display: none;
     11601    }
     11602
     11603    #wpbody-content .wp-list-table.plugins,
     11604    #wpbody-content .wp-list-table.plugins thead,
     11605    #wpbody-content .wp-list-table.plugins tbody,
     11606    #wpbody-content .wp-list-table.plugins tr,
     11607    #wpbody-content .wp-list-table.plugins .column-description,
     11608    #wpbody-content .wp-list-table.plugins .plugin-title,
     11609    #wpbody-content .wp-list-table.plugins .theme-title,
     11610    #wpbody-content .wp-list-table.plugins .plugin-update,
     11611    #wpbody-content .wp-list-table.plugins .manage-column.column-name {
     11612        display: block;
     11613        width: auto;
     11614    }
     11615
     11616    .wp-list-table.plugins thead,
     11617    .wp-list-table.plugins tfoot {
     11618        position: absolute;
     11619        top: -35px;
     11620        left: 0;
     11621        right: 0;
     11622        width: auto;
     11623        height: 35px;
     11624    }
     11625
     11626    .wp-list-table.plugins tfoot {
     11627        bottom: -35px;
     11628        top: auto;
     11629    }
     11630
     11631    .active, .inactive {
     11632        padding-top: 0;
     11633    }
     11634
     11635    .wp-list-table.plugins .plugin-title,
     11636    .wp-list-table.plugins .theme-title {
     11637        padding-top: 13px;
     11638        padding-bottom: 4px;
     11639    }
     11640
     11641    .plugins tr.active + tr.inactive th.check-column,
     11642    .plugins tr.active + tr.inactive td,
     11643    .wp-list-table.plugins .plugin-title,
     11644    .wp-list-table.plugins .theme-title,
     11645    .wp-list-table.plugins tbody th {
     11646        box-shadow: none;
     11647        -webkit-box-shadow: none;
     11648    }
     11649
     11650    .plugins tbody {
     11651        padding: 1px 0 0;
     11652    }
     11653
     11654    /* Set drop shadow again per original mp6 plugin settings at line 1265 of colors-mp6.css in r687296, remove when original styles have been corrected */
     11655    .plugins tr.active + tr.inactive td.column-description {
     11656        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     11657        -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     11658        -ms-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     11659        -o-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     11660        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     11661    }
     11662
     11663    .plugins tr.active + tr.inactive th.check-column,
     11664    .plugins tr.active + tr.inactive td {
     11665        border-top: none;
     11666    }
     11667
     11668    .wp-list-table.plugins .column-description {
     11669        padding-top: 0;
     11670    }
     11671
     11672    .wp-list-table.plugins .manage-column.column-name,
     11673    .wp-list-table.plugins .column-description,
     11674    .wp-list-table.plugins .plugin-title,
     11675    .wp-list-table.plugins .theme-title {
     11676        padding-right: 12px;
     11677        padding-left: 46px;
     11678    }
     11679
     11680    .wp-list-table.plugins tr {
     11681        position: relative;
     11682    }
     11683
     11684    .wp-list-table.plugins th.check-column,
     11685    .wp-list-table.plugins tr.update th.check-column {
     11686        position: absolute;
     11687        height: auto;
     11688        top: 0;
     11689        bottom: 0;
     11690        left: 0;
     11691        padding-left: 2px;
     11692        padding-top: 18px;
     11693    }
     11694
     11695    .wp-list-table.plugins thead th.check-column,
     11696    .wp-list-table.plugins tfoot th.check-column {
     11697        padding-left: 3px;
     11698        padding-top: 11px;
     11699        background: none;
     11700    }
     11701
     11702    .widefat tbody th.check-column input[type="checkbox"] {
     11703        margin-top: -3px;
     11704        margin-left: 9px;
     11705    }
     11706
     11707    .wp-list-table.plugins .active .check-column input,
     11708    .wp-list-table.plugins .update .check-column input {
     11709        margin-left: 6px;
     11710    }
     11711
     11712    .wp-list-table.plugins thead .check-column input,
     11713    .wp-list-table.plugins tfoot .check-column input {
     11714        margin-top: -6px;
     11715    }
     11716
     11717    .wp-list-table.plugins .active th.check-column {
     11718        background: none;
     11719    }
     11720
     11721    .wp-list-table.plugins .plugin-title strong,
     11722    .wp-list-table.plugins .theme-title strong {
     11723        font-size: 1.4em;
     11724        line-height: 1.6em;
     11725    }
     11726
     11727    /*  Dashboard */
     11728    #dashboard_recent_comments #the-comment-list .comment-item .avatar {
     11729        height: 30px;
     11730        width: 30px;
     11731        margin: 4px 10px 5px 0;
     11732    }
     11733
     11734    /*  About Page */
     11735    .about-wrap .feature-section.two-col div {
     11736        width: 100%;
     11737        margin: 0;
     11738        float: none;
     11739    }
     11740
     11741    .about-wrap .three-col.about-updates .col-1,
     11742        /*.about-wrap .three-col.about-updates .col-2,*/
     11743    .about-wrap .three-col.about-updates .col-3 {
     11744        padding: 0;
     11745    }
     11746
     11747    .about-wrap .three-col.about-updates .col-1 {
     11748        width: 100%;
     11749        padding-right: 210px;
     11750    }
     11751
     11752    .about-wrap .three-col.about-updates .col-2 {
     11753        position: relative;
     11754        float: right;
     11755        width: 180px;
     11756        margin-left: -100%;
     11757    }
     11758
     11759    .about-wrap .three-col.about-updates .col-3 {
     11760        width: 100%;
     11761    }
     11762
     11763    .about-wrap .about-password-meter input,
     11764    .about-wrap .about-password-meter #pass-strength-result {
     11765        width: 99%;
     11766    }
     11767
     11768    /* Moderate Comment */
     11769    .comment-ays {
     11770        border-bottom: none;
     11771    }
     11772
     11773    #wpfooter {
     11774        display: none;
     11775    }
     11776
     11777    #comments-form .checkforspam {
     11778        display: none;
     11779    }
     11780}
     11781
     11782/* Tiny screens [ = smaller than 400 wide, 600 tall] */
     11783@media screen and (max-width: 400px), screen and (max-height: 600px) {
     11784    /* Align Add Media + Visual + Text tabs */
     11785    #wp-content-media-buttons a {
     11786        font-size: 14px;
     11787        padding: 0 10px 0 10px;
     11788    }
     11789
     11790    .media-modal {
     11791        position: fixed;
     11792        top: 0;
     11793        left: 0;
     11794        right: 0;
     11795        bottom: 0;
     11796    }
     11797
     11798    .media-modal-backdrop {
     11799        position: fixed;
     11800    }
     11801
     11802    .attachments-browser .attachment,
     11803    .attachments-browser .attachment-preview {
     11804        max-width: 100%;
     11805    }
     11806
     11807    .attachments-browser .media-toolbar-primary input.search {
     11808        max-width: 150px;
     11809    }
     11810
     11811    .uploader-inline-content {
     11812        position: relative;
     11813    }
     11814
     11815    .media-sidebar .setting input[type="checkbox"],
     11816    .media-sidebar .field input[type="checkbox"] {
     11817        width: 25px;
     11818    }
     11819
     11820    /* Don't bother with title for phone-size */
     11821    .media-frame-title {
     11822        display: none;
     11823    }
     11824
     11825    .media-frame-toolbar {
     11826        position: absolute;
     11827        bottom: 0px;
     11828        left: 0;
     11829        right: 0;
     11830        background: #FFF;
     11831        border-top: 1px solid #DEDEDE;
     11832    }
     11833
     11834    .media-toolbar {
     11835        position: relative;
     11836    }
     11837
     11838    .media-frame {
     11839        overflow: hidden;
     11840    }
     11841
     11842    .media-frame .attachments-browser {
     11843        padding-bottom: 300px;
     11844    }
     11845
     11846    .attachments-browser .attachments {
     11847        top: 0;
     11848    }
     11849
     11850    .attachment-details h3 {
     11851        margin-top: 45px;
     11852    }
     11853
     11854    /* Image From Link */
     11855    .embed-link-settings,
     11856    .embed-image-settings {
     11857        padding-bottom: 52px;
     11858    }
     11859
     11860    /* Gallery */
     11861    .media-frame.hide-router .media-frame-content {
     11862        top: 0;
     11863        border-top: none;
     11864    }
     11865
     11866    .gallery-settings h3 {
     11867        margin-top: 45px;
     11868    }
     11869}
     11870
     11871@media only screen and (max-width: 500px) {
     11872    .about-wrap {
     11873        margin-right: 20px;
     11874        margin-left: 10px;
     11875    }
     11876
     11877    .about-wrap h1,
     11878    .about-text {
     11879        margin-right: 0;
     11880    }
     11881
     11882    .about-text {
     11883        margin-bottom: 0.25em;
     11884    }
     11885
     11886    .about-wrap .wp-badge {
     11887        position: relative;
     11888        margin-bottom: 1.5em;
     11889        width: 100%;
     11890    }
     11891
     11892    .about-wrap .feature-section.three-col div {
     11893        width: 100%;
     11894        float: none;
     11895    }
     11896
     11897    .about-wrap .three-col.about-updates .col-1 {
     11898        padding: 0;
     11899        float: none;
     11900    }
     11901
     11902    .about-wrap .three-col.about-updates .col-2 {
     11903        margin: 0 0 20px;
     11904        width: 100%;
     11905        float: none;
     11906    }
     11907
     11908    .about-wrap .about-passwords {
     11909        margin: 20px -20px;
     11910    }
     11911
     11912}
     11913
     11914@media screen and ( max-width: 782px ) {
     11915    /* Toolbar Touchification*/
     11916    html.wp-toolbar {
     11917        padding-top: 46px;
     11918    }
     11919
     11920    html #wpadminbar {
     11921        left: 0 !important;
     11922        z-index: 500 !important;
     11923        height: 46px;
     11924        min-width: 300px;
     11925
     11926        -webkit-transform: translate3d(0, 0, 0);
     11927        -webkit-backface-visibility: hidden;
     11928        -webkit-transition: 0;
     11929        transform: translate3d(0, 0, 0);
     11930        backface-visibility: hidden;
     11931        transition: 0;
     11932    }
     11933
     11934    #wpadminbar * {
     11935        font: normal 14px/32px "Open Sans", sans-serif;
     11936    }
     11937
     11938    #wpadminbar .quicklinks li > a {
     11939        padding: 0;
     11940        height: 46px;
     11941        line-height: 46px;
     11942        width: auto;
     11943    }
     11944
     11945    #wpadminbar .ab-icon {
     11946        font: 40px/1 dashicons !important;
     11947        margin: 0;
     11948        padding: 0;
     11949        width: 50px;
     11950        height: 46px;
     11951    }
     11952
     11953    #wpadminbar .ab-icon:before {
     11954        text-align: center;
     11955    }
     11956
     11957    #wpadminbar .ab-submenu {
     11958        padding: 0;
     11959    }
     11960
     11961    #wpadminbar .ab-label {
     11962        display: none;
     11963    }
     11964
     11965    #wpadminbar .menupop li:hover > .ab-sub-wrapper,
     11966    #wpadminbar .menupop li.hover > .ab-sub-wrapper {
     11967        margin-top: -46px;
     11968    }
     11969
     11970    #wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item {
     11971        padding-right: 30px;
     11972    }
     11973
     11974    #wpadminbar .menupop .menupop > .ab-item:before {
     11975        top: 10px;
     11976        right: 6px;
     11977    }
     11978
     11979    #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item {
     11980        font-size: 16px;
     11981        padding: 6px 15px 12px;
     11982    }
     11983
     11984    #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty {
     11985        display: none;
     11986    }
     11987
     11988    /* WP logo */
     11989    #wpadminbar #wp-admin-bar-wp-logo > .ab-item {
     11990        padding: 0;
     11991    }
     11992
     11993    #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
     11994        padding: 0;
     11995        width: 50px;
     11996        height: 46px;
     11997        text-align: center;
     11998        vertical-align: top;
     11999    }
     12000
     12001    #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
     12002        font: 28px/1 'dashicons' !important;
     12003        top: -3px;
     12004    }
     12005
     12006    #wpadminbar .ab-icon,
     12007    #wpadminbar .ab-item::before {
     12008        padding: 0;
     12009    }
     12010
     12011    /* My Sites and "Site Title" menu */
     12012    #wpadminbar #wp-admin-bar-my-sites > .ab-item,
     12013    #wpadminbar #wp-admin-bar-site-name > .ab-item {
     12014        text-indent: 100%;
     12015        text-overflow: clip !important;
     12016        width: 50px;
     12017        padding: 0;
     12018        color: #999;
     12019        position: relative;
     12020    }
     12021
     12022    #wpadminbar #wp-admin-bar-my-sites > .ab-item:before,
     12023    #wpadminbar #wp-admin-bar-site-name > .ab-item:before {
     12024        display: block;
     12025        text-indent: 0;
     12026        font: normal 35px/1 'dashicons' !important;
     12027        speak: none;
     12028        top: 5px;
     12029        width: 50px;
     12030        text-align: center;
     12031        -webkit-font-smoothing: antialiased;
     12032        -moz-osx-font-smoothing: grayscale;
     12033    }
     12034
     12035    #wpadminbar #wp-admin-bar-site-name > .ab-item:before {
     12036        content: '\f102';
     12037        padding: 0;
     12038    }
     12039
     12040    #wpadminbar #wp-admin-bar-my-sites > .ab-item:before {
     12041        content: '\f112';
     12042        font-size: 28px !important;
     12043        padding-top: 8px;
     12044        padding-left: 12px;
     12045    }
     12046
     12047    #wpadminbar #wp-admin-bar-appearance {
     12048        margin-top: 0;
     12049    }
     12050
     12051    #wpadminbar .quicklinks li .blavatar:before {
     12052        display: none;
     12053    }
     12054
     12055    /* Search */
     12056    #wpadminbar #wp-admin-bar-search {
     12057        display: none;
     12058    }
     12059
     12060    /* New Content */
     12061    #wpadminbar #wp-admin-bar-new-content .ab-icon:before {
     12062        top: 0;
     12063        line-height: 53px;
     12064        height: 46px !important;
     12065        text-align: center;
     12066        width: 50px;
     12067        display: block;
     12068    }
     12069
     12070    /* Updates */
     12071    #wpadminbar #wp-admin-bar-updates {
     12072        text-align: center;
     12073    }
     12074
     12075    #wpadminbar #wp-admin-bar-updates .ab-icon:before {
     12076        top: 3px;
     12077    }
     12078
     12079    /* Comments */
     12080    #wpadminbar #wp-admin-bar-comments .ab-icon {
     12081        margin: 0;
     12082    }
     12083
     12084    #wpadminbar #wp-admin-bar-comments .ab-icon:before {
     12085        display: block;
     12086        font-size: 34px;
     12087        height: 46px;
     12088        line-height: 47px;
     12089        top: 0;
     12090    }
     12091
     12092    /* My Account */
     12093    #wpadminbar #wp-admin-bar-my-account > a {
     12094        position: relative;
     12095        white-space: nowrap;
     12096        text-indent: 100%;
     12097        width: 28px;
     12098        padding: 0 10px;
     12099    }
     12100
     12101    #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
     12102        position: absolute;
     12103        top: 13px;
     12104        right: 10px;
     12105        width: 26px;
     12106        height: 26px;
     12107    }
     12108
     12109    #wpadminbar #wp-admin-bar-user-actions.ab-submenu {
     12110        padding: 0;
     12111    }
     12112
     12113    #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar {
     12114        display: none;
     12115    }
     12116
     12117    #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
     12118        margin: 0;
     12119    }
     12120
     12121    #wpadminbar #wp-admin-bar-user-info .display-name {
     12122        height: auto;
     12123        font-size: 16px;
     12124        line-height: 24px;
     12125        color: #eee;
     12126    }
     12127
     12128    #wpadminbar #wp-admin-bar-user-info a {
     12129        padding-top: 4px;
     12130    }
     12131
     12132    #wpadminbar #wp-admin-bar-user-info .username {
     12133        line-height: 0.8 !important;
     12134        margin-bottom: -2px;
     12135    }
     12136
     12137    /* Hide all third party items */
     12138    #wp-admin-bar-top-secondary > li {
     12139        display: none;
     12140    }
     12141
     12142    #wp-admin-bar-root-default li#wp-admin-bar-wp-logo,
     12143    #wp-admin-bar-root-default li#wp-admin-bar-my-sites,
     12144    #wp-admin-bar-root-default li#wp-admin-bar-site-name,
     12145    #wp-admin-bar-root-default li#wp-admin-bar-new-content,
     12146    #wp-admin-bar-root-default li#wp-admin-bar-comments,
     12147    #wp-admin-bar-root-default li#wp-admin-bar-new-content,
     12148    #wp-admin-bar-top-secondary li#wp-admin-bar-my-account {
     12149        display: block;
     12150    }
     12151
     12152    #wpadminbar ul#wp-admin-bar-root-default > li {
     12153        margin-right: 0;
     12154    }
     12155
     12156    /* Experimental fix for touch toolbar dropdown positioning */
     12157    #wpadminbar .ab-top-menu,
     12158    #wpadminbar .ab-top-secondary,
     12159    #wpadminbar #wp-admin-bar-wp-logo,
     12160    #wpadminbar #wp-admin-bar-my-sites,
     12161    #wpadminbar #wp-admin-bar-site-name,
     12162    #wpadminbar #wp-admin-bar-updates,
     12163    #wpadminbar #wp-admin-bar-comments,
     12164    #wpadminbar #wp-admin-bar-new-content,
     12165    #wpadminbar #wp-admin-bar-my-account {
     12166        position: static;
     12167    }
     12168
     12169    #wpadminbar #wp-admin-bar-comments,
     12170    #wpadminbar #wp-admin-bar-new-content,
     12171    #wpadminbar #wp-admin-bar-my-account {
     12172        float: right;
     12173    }
     12174
     12175    #wpadminbar #wp-admin-bar-comments .ab-sub-wrapper,
     12176    #wpadminbar #wp-admin-bar-new-content .ab-sub-wrapper,
     12177    #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
     12178        right: 0;
     12179        left: auto;
     12180    }
     12181
     12182    #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-comments {
     12183        margin-right: 100px;
     12184    }
     12185
     12186    #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-new-content {
     12187        margin-right: -100px;
     12188    }
     12189
     12190    #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account {
     12191        margin-right: -150px;
     12192    }
     12193
     12194    .network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account {
     12195        margin-right: 0;
     12196    }
     12197}
     12198
     12199/* Horizontal */
     12200@media screen and (max-width: 480px) and (orientation: landscape) {
     12201    #wpadminbar {
     12202        position: absolute;
     12203    }
     12204}
     12205
     12206/* Smartphone */
     12207@media screen and (max-width: 480px) {
     12208    #moby6-overlay {
     12209        position: fixed;
     12210        top: 0;
     12211        left: 0;
     12212        width: 100%;
     12213        height: 100%;
     12214        z-index: 400;
     12215    }
     12216
     12217    #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper {
     12218        position: fixed;
     12219        width: 100%;
     12220        left: 0;
     12221    }
     12222
     12223    #wpadminbar .menupop .menupop > .ab-item:before {
     12224        display: none;
     12225    }
     12226
     12227    #wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper {
     12228        margin-left: 0;
     12229    }
     12230
     12231    #wpadminbar #wp-admin-bar-updates,
     12232    #wpadminbar #wp-admin-bar-view,
     12233    #wpadminbar #wp-admin-bar-edit {
     12234        display: none;
     12235    }
     12236}
     12237
     12238@media screen and (max-width: 350px) {
     12239    #wpadminbar #wp-admin-bar-wp-logo {
     12240        display: none;
     12241    }
     12242}
  • trunk/src/wp-admin/js/common.js

    r26125 r26134  
    531531stickyMenu.init();
    532532
     533var moby6 = {
     534
     535    init: function() {
     536        // cached selectors
     537        this.$html = $( document.documentElement );
     538        this.$body = $( document.body );
     539        this.$wpwrap = $( '#wpwrap' );
     540        this.$wpbody = $( '#wpbody' );
     541        this.$adminmenu = $( '#adminmenu' );
     542        this.$overlay = $( '#moby6-overlay' );
     543        this.$toolbar = $( '#wp-toolbar' );
     544        this.$toolbarPopups = this.$toolbar.find( 'a[aria-haspopup="true"]' );
     545
     546        // Modify functionality based on custom activate/deactivate event
     547        this.$html
     548            .on( 'activate.moby6', function() { moby6.activate(); } )
     549            .on( 'deactivate.moby6', function() { moby6.deactivate(); } );
     550
     551        // Toggle sidebar when toggle is clicked
     552        $( '#wp-admin-bar-toggle-button' ).on( 'click', function(evt) {
     553            evt.preventDefault();
     554            moby6.$wpwrap.toggleClass( 'moby6-open' );
     555        } );
     556
     557        // Trigger custom events based on active media query.
     558        this.matchMedia();
     559        $( window ).on( 'resize', $.proxy( this.matchMedia, this ) );
     560    },
     561
     562    activate: function() {
     563
     564        window.stickymenu && window.stickymenu.disable();
     565
     566        if ( ! moby6.$body.hasClass( 'auto-fold' ) )
     567            moby6.$body.addClass( 'auto-fold' );
     568
     569        this.modifySidebarEvents();
     570        this.disableDraggables();
     571        this.movePostSearch();
     572
     573    },
     574
     575    deactivate: function() {
     576
     577        window.stickymenu && window.stickymenu.enable();
     578
     579        this.enableDraggables();
     580        this.removeHamburgerButton();
     581        this.restorePostSearch();
     582
     583    },
     584
     585    matchMedia: function() {
     586        clearTimeout( this.resizeTimeout );
     587        this.resizeTimeout = setTimeout( function() {
     588
     589            if ( ! window.matchMedia )
     590                return;
     591
     592            if ( window.matchMedia( '(max-width: 782px)' ).matches ) {
     593                if ( moby6.$html.hasClass( 'touch' ) )
     594                    return;
     595                moby6.$html.addClass( 'touch' ).trigger( 'activate.moby6' );
     596            } else {
     597                if ( ! moby6.$html.hasClass( 'touch' ) )
     598                    return;
     599                moby6.$html.removeClass( 'touch' ).trigger( 'deactivate.moby6' );
     600            }
     601
     602            if ( window.matchMedia( '(max-width: 480px)' ).matches ) {
     603                moby6.enableOverlay();
     604            } else {
     605                moby6.disableOverlay();
     606            }
     607
     608        }, 150 );
     609    },
     610
     611    enableOverlay: function() {
     612        if ( this.$overlay.length === 0 ) {
     613            this.$overlay = $( '<div id="moby6-overlay"></div>' )
     614                .insertAfter( '#wpcontent' )
     615                .hide()
     616                .on( 'click.moby6', function() {
     617                    moby6.$toolbar.find( '.menupop.hover' ).removeClass( 'hover' );
     618                    $( this ).hide();
     619                });
     620        }
     621        this.$toolbarPopups.on( 'click.moby6', function() {
     622            moby6.$overlay.show();
     623        });
     624    },
     625
     626    disableOverlay: function() {
     627        this.$toolbarPopups.off( 'click.moby6' );
     628        this.$overlay.hide();
     629    },
     630
     631    modifySidebarEvents: function() {
     632        this.$body.off( '.wp-mobile-hover' );
     633        this.$adminmenu.find( 'a.wp-has-submenu' ).off( '.wp-mobile-hover' );
     634
     635        var scrollStart = 0;
     636        this.$adminmenu.on( 'touchstart.moby6', 'li.wp-has-submenu > a', function() {
     637            scrollStart = $( window ).scrollTop();
     638        });
     639
     640        this.$adminmenu.on( 'touchend.moby6', 'li.wp-has-submenu > a', function( e ) {
     641            e.preventDefault();
     642
     643            if ( $( window ).scrollTop() !== scrollStart )
     644                return false;
     645
     646            $( this ).find( 'li.wp-has-submenu' ).removeClass( 'selected' );
     647            $( this ).parent( 'li' ).addClass( 'selected' );
     648        });
     649    },
     650
     651    disableDraggables: function() {
     652        this.$wpbody
     653            .find( '.hndle' )
     654            .removeClass( 'hndle' )
     655            .addClass( 'hndle-disabled' );
     656    },
     657
     658    enableDraggables: function() {
     659        this.$wpbody
     660            .find( '.hndle-disabled' )
     661            .removeClass( 'hndle-disabled' )
     662            .addClass( 'hndle' );
     663    },
     664
     665    removeHamburgerButton: function() {
     666        if ( this.hamburgerButtonView !== undefined )
     667            this.hamburgerButtonView.destroy();
     668    },
     669
     670    movePostSearch: function() {
     671        this.searchBox = this.$wpbody.find( 'p.search-box' );
     672        if ( this.searchBox.length ) {
     673            this.searchBox.hide();
     674            if ( this.searchBoxClone === undefined ) {
     675                this.searchBoxClone = this.searchBox.first().clone().insertAfter( 'div.tablenav.bottom' );
     676            }
     677            this.searchBoxClone.show();
     678        }
     679    },
     680
     681    restorePostSearch: function() {
     682        if ( this.searchBox !== undefined ) {
     683            this.searchBox.show();
     684            if ( this.searchBoxClone !== undefined )
     685                this.searchBoxClone.hide();
     686        }
     687    }
     688};
     689
     690// Fire moby6.init when document is ready
     691$( document ).ready( $.proxy( moby6.init, moby6 ) );
     692
     693// make Windows 8 devices playing along nicely
     694if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) {
     695    var msViewportStyle = document.createElement( 'style' );
     696    msViewportStyle.appendChild(
     697        document.createTextNode( '@-ms-viewport{width:auto!important}' )
     698    );
     699    document.getElementsByTagName( 'head' )[0].appendChild( msViewportStyle );
     700}
     701
    533702// internal use
    534703$(document).bind( 'wp_CloseOnEscape', function( e, data ) {
  • trunk/src/wp-includes/admin-bar.php

    r26120 r26134  
    154154        'href'      => __('http://wordpress.org/support/forum/requests-and-feedback'),
    155155    ) );
     156}
     157
     158/**
     159 * Add the sidebar toggle button.
     160 *
     161 * @since 3.8.0
     162 *
     163 * @param WP_Admin_Bar $wp_admin_bar
     164 */
     165function wp_admin_bar_sidebar_toggle( $wp_admin_bar ) {
     166    if ( is_admin() ) {
     167        $wp_admin_bar->add_menu( array(
     168            'id'    => 'toggle-button',
     169            'title' => '<span class="ab-icon"></span>',
     170            'href'  => '#',
     171            'meta'  => array(
     172                'title' => __( 'Menu' ),
     173            ),
     174        ) );
     175    }
    156176}
    157177
  • trunk/src/wp-includes/class-wp-admin-bar.php

    r25880 r26134  
    483483
    484484        // Site related.
     485        add_action( 'admin_bar_menu', 'wp_admin_bar_sidebar_toggle', 0 );
    485486        add_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 );
    486487        add_action( 'admin_bar_menu', 'wp_admin_bar_my_sites_menu', 20 );
Note: See TracChangeset for help on using the changeset viewer.