X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/48ab98cb1779cf2088c1351ac3dd3d0da6fb31d3..e3ff8f35458a959c1879c0a4976701ed8dcfe651:/wp-admin/css/nav-menus.css diff --git a/wp-admin/css/nav-menus.css b/wp-admin/css/nav-menus.css index 28e32b80..b7a25a12 100644 --- a/wp-admin/css/nav-menus.css +++ b/wp-admin/css/nav-menus.css @@ -6,7 +6,7 @@ } ul.add-menu-item-tabs li { - padding: 3px 5px 3px 8px; + padding: 3px 5px 4px 8px; } .accordion-section ul.category-tabs, @@ -27,6 +27,10 @@ ul.add-menu-item-tabs li { margin-bottom: 0; } +.has-no-menu-item .button-controls { + display: none; +} + #nav-menus-frame { margin-left: 300px; margin-top: 23px; @@ -61,10 +65,6 @@ ul.add-menu-item-tabs li { position: relative; } -.blank-slate .menu-name { - height: 2em; -} - .blank-slate .menu-settings { border: none; margin-top: 0; @@ -73,9 +73,9 @@ ul.add-menu-item-tabs li { } .is-submenu { - color: #999; + color: #555d66; /* #fafafa background */ font-style: italic; - font-weight: normal; + font-weight: 400; margin-left: 4px; } @@ -86,23 +86,18 @@ ul.add-menu-item-tabs li { background: #fbfbfb; } -.manage-menus select { - float: left; - margin-right: 6px; -} - -.manage-menus .selected-menu { - float: left; - margin: 5px 6px 0 0; -} - -.manage-menus .submit-btn { - float: left; - margin-top: 1px; +.manage-menus .selected-menu, +.manage-menus select, +.manage-menus .submit-btn, +.nav-menus-php .add-new-menu-action { + display: inline-block; + margin-right: 3px; + vertical-align: middle; } -.menu-edit p { - margin: .3em 0 .6em; +.manage-menus select, +.menu-location-menus select { + max-width: 100%; } .menu-edit #post-body-content h3 { @@ -114,24 +109,28 @@ ul.add-menu-item-tabs li { margin-top: 2em; } -.menu-settings dl { +.menu-settings-group { margin: 0 0 10px; overflow: hidden; - padding-left: 18%; + padding-left: 20%; } -.menu-settings dd { +.menu-settings-group:last-of-type { + margin-bottom: 0; +} + +.menu-settings-input { float: left; margin: 0; width: 100%; } -.menu-settings dt { +.menu-settings-group-name { float: left; clear: both; - width: 21.951%; + width: 25%; padding: 3px 0 0; - margin-left: -21.951%; + margin-left: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */ } .menu-settings label { @@ -143,17 +142,20 @@ ul.add-menu-item-tabs li { } .theme-location-set { - color: #999; + color: #72777c; font-size: 11px; } /* Menu Container */ + +/* @todo: responsive view. */ #menu-management-liquid { float: left; min-width: 100%; margin-top: 3px; } +/* @todo: responsive view. */ #menu-management { position: relative; margin-right: 20px; @@ -169,7 +171,7 @@ ul.add-menu-item-tabs li { .nav-menus-php #post-body { padding: 0 10px 10px; border-top: 1px solid #fff; - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; background: #fff; } @@ -179,12 +181,15 @@ ul.add-menu-item-tabs li { } #nav-menu-header { - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; margin-bottom: 0; } #nav-menu-header .menu-name-label { - margin-top: 4px; + display: inline-block; + vertical-align: middle; + margin-right: 7px; + font-style: italic; } .nav-menus-php #post-body div.updated, @@ -216,8 +221,12 @@ ul.add-menu-item-tabs li { margin-top: -2px; } -.widefat td.menu-location-menus { - padding-bottom: 5px; +.widefat .menu-locations .menu-location-title { + padding: 13px 10px 0; +} + +.menu-location-title label { + font-weight: 600; } .menu-location-menus select { @@ -249,27 +258,13 @@ ul.add-menu-item-tabs li { border-right: 1px solid #ccc; } -#wpbody .open-label { - display: block; - float:left; -} - -#wpbody .open-label span { - padding-right: 10px; -} - -.js .input-with-default-title { - color: #aaa; - font-style: italic; -} - #menu-management .inside { padding: 0 10px; } /* Add Menu Item Boxes */ .postbox .howto input, -.accordion-container .howto input { +.customlinkdiv .menu-item-textbox { width: 180px; float: right; } @@ -278,10 +273,6 @@ ul.add-menu-item-tabs li { margin: 0; } -.customlinkdiv .howto input { - width: 180px; -} - .customlinkdiv p { margin-top: 0 } @@ -304,25 +295,6 @@ ul.add-menu-item-tabs li { padding: 0; } -.nav-menus-php .add-new-menu-action { - float: left; - margin: 6px 0 0 6px; - line-height: 15px; -} - -.nav-menus-php .meta-sep, -.nav-menus-php .submitdelete, -.nav-menus-php .submitcancel { - display: block; - float: left; - margin: 6px 0; - line-height: 15px; -} - -.meta-sep { - padding: 0 2px; -} - /* @todo: is this actually used? */ #cancel-save { text-decoration: underline; @@ -345,11 +317,6 @@ ul.add-menu-item-tabs li { float: right; } -.postbox .spinner { - display: none; - vertical-align: middle; -} - .button-controls { clear:both; margin: 10px 0; @@ -367,6 +334,7 @@ ul.add-menu-item-tabs li { /* Create Menu */ #menu-name { width: 270px; + vertical-align: middle; } #manage-menu .inside { @@ -393,10 +361,10 @@ ul.add-menu-item-tabs li { width: 180px; } +.customlinkdiv label, .nav-menus-php .howto span { - margin-top: 6px; - display: block; float: left; + margin-top: 6px; } /* Menu item types */ @@ -404,6 +372,11 @@ ul.add-menu-item-tabs li { width: 190px; } +.quick-search-wrap .spinner { + float: none; + margin: -3px -10px 0 0; +} + .nav-menus-php .list-wrap { display: none; clear: both; @@ -467,10 +440,11 @@ ul.add-menu-item-tabs li { } .menu-item-bar .menu-item-handle { - border: 1px solid #dfdfdf; + border: 1px solid #ddd; position: relative; padding: 10px 15px; height: auto; + min-height: 20px; width: 382px; line-height: 30px; overflow: hidden; @@ -504,19 +478,20 @@ ul.add-menu-item-tabs li { font-weight: 600; line-height: 20px; display: block; + /* @todo: responsive view. */ margin-right: 13em; } .menu-item-handle .menu-item-title.no-title { - color: #999; + color: #72777c; } /* Sortables */ -li.menu-item.ui-sortable-helper dl { +li.menu-item.ui-sortable-helper .menu-item-bar { margin-top: 0; } -li.menu-item.ui-sortable-helper .menu-item-transport dl { +li.menu-item.ui-sortable-helper .menu-item-transport .menu-item-bar { margin-top: 13px; } @@ -526,7 +501,12 @@ li.menu-item.ui-sortable-helper .menu-item-transport dl { margin-top: 13px; } -/* WARNING: The factor of 30px is hardcoded into the nav-menus javascript. */ +/* Hide the transport list when it's empty */ +.menu-item .menu-item-transport:empty { + display: none; +} + +/* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript. */ .menu-item-depth-0 { margin-left: 0px; } .menu-item-depth-1 { margin-left: 30px; } .menu-item-depth-2 { margin-left: 60px; } @@ -568,11 +548,11 @@ body.menu-max-depth-11 { min-width: 1280px !important; } /* Menu item controls */ .item-type { - color: #777; + display: inline-block; + padding: 12px 16px; + color: #666; font-size: 12px; - padding: 12px 10px; line-height: 18px; - display: block; } .item-controls { @@ -608,6 +588,51 @@ body.menu-max-depth-11 { min-width: 1280px !important; } white-space: nowrap; } +.no-js.nav-menus-php .item-edit { + position: static; + float: right; + width: auto; + height: auto; + margin-right: -10px !important; + padding: 12px 0; + color: #0073aa; + text-decoration: underline; + font-size: 12px; + line-height: 18px; + text-indent: 0; +} + +.nav-menus-php .item-edit:before { + margin-top: 10px; + margin-left: 4px; + width: 20px; + -webkit-border-radius: 50%; + border-radius: 50%; + text-indent: -1px; /* account for the dashicon alignment */ +} + +.no-js.nav-menus-php .item-edit:before { + display: none; +} + +.rtl .nav-menus-php .item-edit:before { + text-indent: 1px; /* account for the dashicon alignment */ +} + +.nav-menus-php .item-edit:focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +.nav-menus-php .item-edit:focus:before { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + /* Menu editing */ .menu-instructions-inactive { display: none; @@ -625,9 +650,38 @@ body.menu-max-depth-11 { min-width: 1280px !important; } box-shadow: 0 1px 1px rgba(0,0,0,0.04); } -.menu-item-settings .field-move a { +.menu-item-settings .field-move { + margin: 3px 0 5px; + line-height: 1.5; +} + +.field-move-visual-label { + float: left; + margin-right: 4px; + font-style: italic; +} + +.menu-item-settings .field-move .button-link { display: none; margin: 0 2px; + color: #0073aa; + font-style: italic; + text-decoration: underline; +} + +.menu-item-settings .field-move .button-link:hover, +.menu-item-settings .field-move .button-link:active { + color: #00a0d2; +} + +.menu-item-settings .field-move .button-link:focus { + color: #124964; + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } .menu-item-edit-active .menu-item-settings { @@ -639,16 +693,25 @@ body.menu-max-depth-11 { min-width: 1280px !important; } } .add-menu-item-pagelinks { - margin: .5em auto; + margin: .5em -10px; text-align: center; } +.add-menu-item-pagelinks .page-numbers { + display: inline-block; + min-width: 20px; +} + +.add-menu-item-pagelinks .page-numbers.dots { + min-width: 0; +} + .link-to-original { display: block; - margin: 0 0 10px; + margin: 0 0 15px; padding: 3px 5px 5px; - border: 1px solid #dfdfdf; - color: #777; + border: 1px solid #ddd; + color: #72777c; font-size: 12px; font-style: italic; } @@ -670,7 +733,6 @@ body.menu-max-depth-11 { min-width: 1280px !important; } .description-thin { width: 190px; - height: 40px; } .description-wide { @@ -679,6 +741,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; } .menu-item-actions { padding-top: 15px; + padding-bottom: 7px; } #cancel-save { @@ -688,35 +751,23 @@ body.menu-max-depth-11 { min-width: 1280px !important; } /* Major/minor publishing actions (classes) */ .nav-menus-php .major-publishing-actions { clear: both; - padding: 3px 0 6px; + padding: 10px 0; + line-height: 28px; } .nav-menus-php .major-publishing-actions .publishing-action { text-align: right; float: right; - line-height: 23px; - margin: 4px 0 1px; } .nav-menus-php .blank-slate .menu-settings { display: none; } +/* Same as the Publish Meta Box #delete-action */ .nav-menus-php .delete-action { float: left; - margin-top: 2px; -} - -.nav-menus-php .submitbox .submitcancel { - border-bottom: 1px solid #0074a2; - padding: 1px 2px; - color: #0074a2; - text-decoration: none; -} - -.nav-menus-php .submitbox .submitcancel:hover { - background: #0074a2; - color: #fff; + line-height: 28px; } .nav-menus-php .major-publishing-actions .form-invalid { @@ -724,23 +775,6 @@ body.menu-max-depth-11 { min-width: 1280px !important; } margin-left: -4px; } -/* Clearfix */ -#menu-item-name-wrap:after, -#menu-item-url-wrap:after, -#menu-name-label:after, -#menu-settings-column .inside:after, -#nav-menus-frame:after, -.nav-menus-php #post-body-content:after, -.nav-menus-php .button-controls:after, -.nav-menus-php .major-publishing-actions:after, -.nav-menus-php .menu-item-settings:after { - clear: both; - content: "."; - display: block; - height: 0; - visibility: hidden; -} - #nav-menus-frame, .button-controls, #menu-item-url-wrap, @@ -751,6 +785,24 @@ body.menu-max-depth-11 { min-width: 1280px !important; } /* =Media Queries -------------------------------------------------------------- */ +@media only screen and (min-width: 769px) and (max-width: 1000px){ + body.menu-max-depth-0 { + min-width: 0 !important; + } + + #menu-management-liquid{ + width: 100%; + } + + .nav-menus-php #post-body-content{ + min-width: 0; + } + + .menu-item-bar .menu-item-handle{ + width: 90%; + } +} + @media screen and ( max-width: 782px ) { body.nav-menus-php { min-width: 0 !important; @@ -801,14 +853,9 @@ body.menu-max-depth-11 { min-width: 1280px !important; } margin-top: 4px; } - .nav-menus-php .major-publishing-actions .publishing-action { - margin-top: 6px; - } - .nav-menus-php .delete-action { font-size: 14px; - line-height: 50px; - margin-top: 12px; + line-height: 30px; } .menu-item-bar .menu-item-handle, @@ -824,29 +871,44 @@ body.menu-max-depth-11 { min-width: 1280px !important; } .menu-item-settings .description-thin, .menu-item-settings .description-wide { width: 100%; - height: auto; } .menu-item-settings input { width: 100%; } - .menu-settings dl { + .menu-item-settings input[type="checkbox"], + .menu-item-settings input[type="radio"] { + width: 25px; + } + + .menu-settings-group { padding-left: 0; } - .menu-settings dd { + .menu-settings-group-name { float: none; - width: 100%; + width: auto; + margin-left: 0; margin-bottom: 15px; } - .menu-settings dt { + .menu-settings-input { float: none; - width: auto; - margin-left: 0; margin-bottom: 15px; } + + .menu-edit .checkbox-input { + margin-top: 0; + } + + .manage-menus select { + margin: 0.5em 0; + } + + .widefat .menu-locations .menu-location-title { + padding-top: 16px; + } } @media only screen and (max-width: 768px) {