From 7c4e2caf0188545ca1318b4f7bb69227294a3ba0 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Thu, 14 Nov 2013 22:36:34 +0000 Subject: [PATCH] Move #wpadminbar responsive styles from wp-admin.css to admin-bar.css. Remove unneeded font overrides and !importants where possible. Make sure the site menu item uses the globe icon consistently instead of switching to the home icon <782px. Fixes #25971. git-svn-id: https://develop.svn.wordpress.org/trunk@26176 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/wp-admin.css | 386 +++--------------------------- src/wp-includes/css/admin-bar.css | 338 +++++++++++++++++++++++++- 2 files changed, 364 insertions(+), 360 deletions(-) diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index a92991b800..1b796c8298 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/src/wp-admin/css/wp-admin.css @@ -967,7 +967,7 @@ h2 .nav-tab, /* New Menu icons */ .icon16:before { - font: normal 20px/1 'dashicons' !important; + font: normal 20px/1 'dashicons'; speak: none; padding: 6px 0; height: 34px; @@ -11339,47 +11339,6 @@ li#wp-admin-bar-toggle-button { margin-top: -2px; } - #wpadminbar #wp-admin-bar-toggle-button a { - display: block; - padding: 0; - overflow: hidden; - outline: none; - text-decoration: none; - border: 1px solid transparent; - background: none; - height: 44px; - margin-left: -1px; - } - - li#wp-admin-bar-toggle-button { - display: block; - } - - #wpadminbar #wp-admin-bar-toggle-button a:hover { - border: 1px solid transparent; - } - - #wpadminbar #wp-admin-bar-toggle-button .ab-icon:before { - color: #888; - content: '\f228'; - display: inline-block; - float: left; - font: normal 40px/45px 'Dashicons'; - vertical-align: middle; - outline: none; - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - height: 44px; - width: 50px; - padding: 0; - border: none; - text-align: center; - text-decoration: none; - box-sizing: border-box; - -moz-box-sizing: border-box; - } - .moby6-open #wpadminbar #wp-admin-bar-toggle-button a { background: #000; } @@ -12551,294 +12510,45 @@ li#wp-admin-bar-toggle-button { } @media screen and ( max-width: 782px ) { - /* Toolbar Touchification*/ - html.wp-toolbar { - padding-top: 46px; - } - - html #wpadminbar { - left: 0 !important; - z-index: 500 !important; - height: 46px; - min-width: 300px; - - -webkit-transform: translate3d(0, 0, 0); - -webkit-backface-visibility: hidden; - -webkit-transition: 0; - transform: translate3d(0, 0, 0); - backface-visibility: hidden; - transition: 0; - } - - #wpadminbar * { - font: normal 14px/32px "Open Sans", sans-serif; - } - - #wpadminbar .quicklinks li > a { - padding: 0; - height: 46px; - line-height: 46px; - width: auto; - } - - #wpadminbar .ab-icon { - font: 40px/1 dashicons !important; - margin: 0; - padding: 0; - width: 50px; - height: 46px; - } - - #wpadminbar .ab-icon:before { - text-align: center; - } - - #wpadminbar .ab-submenu { - padding: 0; - } - - #wpadminbar .ab-label { - display: none; - } - - #wpadminbar .menupop li:hover > .ab-sub-wrapper, - #wpadminbar .menupop li.hover > .ab-sub-wrapper { - margin-top: -46px; - } - - #wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item { - padding-right: 30px; - } - - #wpadminbar .menupop .menupop > .ab-item:before { - top: 10px; - right: 6px; - } - - #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item { - font-size: 16px; - padding: 6px 15px 12px; - } - - #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty { - display: none; - } - - /* WP logo */ - #wpadminbar #wp-admin-bar-wp-logo > .ab-item { - padding: 0; - } - - #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon { - padding: 0; - width: 50px; - height: 46px; - text-align: center; - vertical-align: top; - } - - #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { - font: 28px/1 'dashicons' !important; - top: -3px; - } - - #wpadminbar .ab-icon, - #wpadminbar .ab-item::before { - padding: 0; - } - - /* My Sites and "Site Title" menu */ - #wpadminbar #wp-admin-bar-my-sites > .ab-item, - #wpadminbar #wp-admin-bar-site-name > .ab-item { - text-indent: 100%; - text-overflow: clip !important; - width: 50px; - padding: 0; - color: #999; - position: relative; - } - - #wpadminbar #wp-admin-bar-my-sites > .ab-item:before, - #wpadminbar #wp-admin-bar-site-name > .ab-item:before { + #wpadminbar #wp-admin-bar-toggle-button a { display: block; - text-indent: 0; - font: normal 35px/1 'dashicons' !important; - speak: none; - top: 5px; - width: 50px; - text-align: center; + padding: 0; + overflow: hidden; + outline: none; + text-decoration: none; + border: 1px solid transparent; + background: none; + height: 44px; + margin-left: -1px; + } + + li#wp-admin-bar-toggle-button { + display: block; + } + + #wpadminbar #wp-admin-bar-toggle-button a:hover { + border: 1px solid transparent; + } + + #wpadminbar #wp-admin-bar-toggle-button .ab-icon:before { + color: #888; + content: '\f228'; + display: inline-block; + float: left; + font: normal 40px/45px 'Dashicons'; + vertical-align: middle; + outline: none; + margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - } - - #wpadminbar #wp-admin-bar-site-name > .ab-item:before { - content: '\f102'; - padding: 0; - } - - #wpadminbar #wp-admin-bar-my-sites > .ab-item:before { - content: '\f112'; - font-size: 28px !important; - padding-top: 8px; - padding-left: 12px; - } - - #wpadminbar #wp-admin-bar-appearance { - margin-top: 0; - } - - #wpadminbar .quicklinks li .blavatar:before { - display: none; - } - - /* Search */ - #wpadminbar #wp-admin-bar-search { - display: none; - } - - /* New Content */ - #wpadminbar #wp-admin-bar-new-content .ab-icon:before { - top: 0; - line-height: 53px; - height: 46px !important; - text-align: center; + height: 44px; width: 50px; - display: block; - } - - /* Updates */ - #wpadminbar #wp-admin-bar-updates { - text-align: center; - } - - #wpadminbar #wp-admin-bar-updates .ab-icon:before { - top: 3px; - } - - /* Comments */ - #wpadminbar #wp-admin-bar-comments .ab-icon { - margin: 0; - } - - #wpadminbar #wp-admin-bar-comments .ab-icon:before { - display: block; - font-size: 34px; - height: 46px; - line-height: 47px; - top: 0; - } - - /* My Account */ - #wpadminbar #wp-admin-bar-my-account > a { - position: relative; - white-space: nowrap; - text-indent: 100%; - width: 28px; - padding: 0 10px; - } - - #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { - position: absolute; - top: 13px; - right: 10px; - width: 26px; - height: 26px; - } - - #wpadminbar #wp-admin-bar-user-actions.ab-submenu { padding: 0; - } - - #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar { - display: none; - } - - #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li { - margin: 0; - } - - #wpadminbar #wp-admin-bar-user-info .display-name { - height: auto; - font-size: 16px; - line-height: 24px; - color: #eee; - } - - #wpadminbar #wp-admin-bar-user-info a { - padding-top: 4px; - } - - #wpadminbar #wp-admin-bar-user-info .username { - line-height: 0.8 !important; - margin-bottom: -2px; - } - - /* Hide all third party items */ - #wp-admin-bar-top-secondary > li { - display: none; - } - - #wp-admin-bar-root-default li#wp-admin-bar-wp-logo, - #wp-admin-bar-root-default li#wp-admin-bar-my-sites, - #wp-admin-bar-root-default li#wp-admin-bar-site-name, - #wp-admin-bar-root-default li#wp-admin-bar-new-content, - #wp-admin-bar-root-default li#wp-admin-bar-comments, - #wp-admin-bar-root-default li#wp-admin-bar-new-content, - #wp-admin-bar-top-secondary li#wp-admin-bar-my-account { - display: block; - } - - #wpadminbar ul#wp-admin-bar-root-default > li { - margin-right: 0; - } - - /* Experimental fix for touch toolbar dropdown positioning */ - #wpadminbar .ab-top-menu, - #wpadminbar .ab-top-secondary, - #wpadminbar #wp-admin-bar-wp-logo, - #wpadminbar #wp-admin-bar-my-sites, - #wpadminbar #wp-admin-bar-site-name, - #wpadminbar #wp-admin-bar-updates, - #wpadminbar #wp-admin-bar-comments, - #wpadminbar #wp-admin-bar-new-content, - #wpadminbar #wp-admin-bar-my-account { - position: static; - } - - #wpadminbar #wp-admin-bar-comments, - #wpadminbar #wp-admin-bar-new-content, - #wpadminbar #wp-admin-bar-my-account { - float: right; - } - - #wpadminbar #wp-admin-bar-comments .ab-sub-wrapper, - #wpadminbar #wp-admin-bar-new-content .ab-sub-wrapper, - #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper { - right: 0; - left: auto; - } - - #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-comments { - margin-right: 100px; - } - - #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-new-content { - margin-right: -100px; - } - - #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account { - margin-right: -150px; - } - - .network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account { - margin-right: 0; - } -} - -/* Horizontal */ -@media screen and (max-width: 480px) and (orientation: landscape) { - #wpadminbar { - position: absolute; + border: none; + text-align: center; + text-decoration: none; + box-sizing: border-box; + -moz-box-sizing: border-box; } } @@ -12852,30 +12562,4 @@ li#wp-admin-bar-toggle-button { height: 100%; z-index: 400; } - - #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { - position: fixed; - width: 100%; - left: 0; - } - - #wpadminbar .menupop .menupop > .ab-item:before { - display: none; - } - - #wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper { - margin-left: 0; - } - - #wpadminbar #wp-admin-bar-updates, - #wpadminbar #wp-admin-bar-view, - #wpadminbar #wp-admin-bar-edit { - display: none; - } } - -@media screen and (max-width: 350px) { - #wpadminbar #wp-admin-bar-wp-logo { - display: none; - } -} \ No newline at end of file diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index d03f895b6a..41bb56e78f 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -6,7 +6,6 @@ position: static; text-transform: none; letter-spacing: normal; - line-height: 30px; font: normal 13px/32px "Open Sans", sans-serif; color: #eee; border-radius: 0; @@ -19,13 +18,6 @@ transition: none; } -#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default *, -#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary * { - text-transform: none; - letter-spacing: normal; - font: normal 13px/32px "Open Sans", sans-serif; -} - #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label, #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label, @@ -217,11 +209,12 @@ color: #2ea2cc; } +#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon, #wpadminbar .ab-icon, #wpadminbar .ab-item:before { position: relative; float: left; - font: normal 20px/1 'dashicons' !important; + font: normal 20px/1 'dashicons'; speak: none; padding: 4px 0; -webkit-font-smoothing: antialiased; @@ -432,6 +425,7 @@ #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { content: '\f120'; + top: 2px; } /* @@ -667,3 +661,329 @@ * html #wpadminbar .menupop a span { background-image: none; } + + +@media screen and ( max-width: 782px ) { + /* Toolbar Touchification*/ + html.wp-toolbar { + padding-top: 46px; + } + + html #wpadminbar { + left: 0 !important; + z-index: 500 !important; + height: 46px; + min-width: 300px; + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + -webkit-transition: 0; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + transition: 0; + } + + #wpadminbar * { + font: normal 14px/32px "Open Sans", sans-serif; + } + + #wpadminbar .quicklinks li > a { + padding: 0; + height: 46px; + line-height: 46px; + width: auto; + } + + #wpadminbar .ab-icon { + font: 40px/1 dashicons !important; + margin: 0; + padding: 0; + width: 50px; + height: 46px; + } + + #wpadminbar .ab-icon:before { + text-align: center; + } + + #wpadminbar .ab-submenu { + padding: 0; + } + + #wpadminbar .ab-label { + display: none; + } + + #wpadminbar .menupop li:hover > .ab-sub-wrapper, + #wpadminbar .menupop li.hover > .ab-sub-wrapper { + margin-top: -46px; + } + + #wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item { + padding-right: 30px; + } + + #wpadminbar .menupop .menupop > .ab-item:before { + top: 10px; + right: 6px; + } + + #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item { + font-size: 16px; + padding: 6px 15px 12px; + } + + #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty { + display: none; + } + + /* WP logo */ + #wpadminbar #wp-admin-bar-wp-logo > .ab-item { + padding: 0; + } + + #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon { + padding: 0; + width: 50px; + height: 46px; + text-align: center; + vertical-align: top; + } + + #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { + font: 28px/1 'dashicons' !important; + top: -3px; + } + + #wpadminbar .ab-icon, + #wpadminbar .ab-item:before { + padding: 0; + } + + /* My Sites and "Site Title" menu */ + #wpadminbar #wp-admin-bar-my-sites > .ab-item, + #wpadminbar #wp-admin-bar-site-name > .ab-item { + text-indent: 100%; + text-overflow: clip !important; + width: 50px; + padding: 0; + color: #999; + position: relative; + } + + #wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon, + #wpadminbar .ab-icon, + #wpadminbar .ab-item:before { + padding: 0; + margin-right: 0; + } + + #wpadminbar #wp-admin-bar-my-sites > .ab-item:before, + #wpadminbar #wp-admin-bar-site-name > .ab-item:before { + display: block; + text-indent: 0; + font: normal 32px/1 'dashicons'; + speak: none; + top: 7px; + width: 50px; + text-align: center; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + #wpadminbar #wp-admin-bar-appearance { + margin-top: 0; + } + + #wpadminbar .quicklinks li .blavatar:before { + display: none; + } + + /* Search */ + #wpadminbar #wp-admin-bar-search { + display: none; + } + + /* New Content */ + #wpadminbar #wp-admin-bar-new-content .ab-icon:before { + top: 0; + line-height: 53px; + height: 46px !important; + text-align: center; + width: 50px; + display: block; + } + + /* Updates */ + #wpadminbar #wp-admin-bar-updates { + text-align: center; + } + + #wpadminbar #wp-admin-bar-updates .ab-icon:before { + top: 3px; + } + + /* Comments */ + #wpadminbar #wp-admin-bar-comments .ab-icon { + margin: 0; + } + + #wpadminbar #wp-admin-bar-comments .ab-icon:before { + display: block; + font-size: 34px; + height: 46px; + line-height: 47px; + top: 0; + } + + /* My Account */ + #wpadminbar #wp-admin-bar-my-account > a { + position: relative; + white-space: nowrap; + text-indent: 100%; + width: 28px; + padding: 0 10px; + } + + #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + position: absolute; + top: 13px; + right: 10px; + width: 26px; + height: 26px; + } + + #wpadminbar #wp-admin-bar-user-actions.ab-submenu { + padding: 0; + } + + #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar { + display: none; + } + + #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li { + margin: 0; + } + + #wpadminbar #wp-admin-bar-user-info .display-name { + height: auto; + font-size: 16px; + line-height: 24px; + color: #eee; + } + + #wpadminbar #wp-admin-bar-user-info a { + padding-top: 4px; + } + + #wpadminbar #wp-admin-bar-user-info .username { + line-height: 0.8 !important; + margin-bottom: -2px; + } + + /* Hide all third party items */ + #wp-admin-bar-top-secondary > li { + display: none; + } + + #wp-admin-bar-root-default li#wp-admin-bar-wp-logo, + #wp-admin-bar-root-default li#wp-admin-bar-my-sites, + #wp-admin-bar-root-default li#wp-admin-bar-site-name, + #wp-admin-bar-root-default li#wp-admin-bar-new-content, + #wp-admin-bar-root-default li#wp-admin-bar-comments, + #wp-admin-bar-root-default li#wp-admin-bar-new-content, + #wp-admin-bar-top-secondary li#wp-admin-bar-my-account { + display: block; + } + + #wpadminbar ul#wp-admin-bar-root-default > li { + margin-right: 0; + } + + /* Experimental fix for touch toolbar dropdown positioning */ + #wpadminbar .ab-top-menu, + #wpadminbar .ab-top-secondary, + #wpadminbar #wp-admin-bar-wp-logo, + #wpadminbar #wp-admin-bar-my-sites, + #wpadminbar #wp-admin-bar-site-name, + #wpadminbar #wp-admin-bar-updates, + #wpadminbar #wp-admin-bar-comments, + #wpadminbar #wp-admin-bar-new-content, + #wpadminbar #wp-admin-bar-my-account { + position: static; + } + + #wpadminbar #wp-admin-bar-comments, + #wpadminbar #wp-admin-bar-new-content, + #wpadminbar #wp-admin-bar-my-account { + float: right; + } + + #wpadminbar #wp-admin-bar-comments .ab-sub-wrapper, + #wpadminbar #wp-admin-bar-new-content .ab-sub-wrapper, + #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper { + right: 0; + left: auto; + } + + #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-comments { + margin-right: 100px; + } + + #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-new-content { + margin-right: -98px; + } + + #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account { + margin-right: -150px; + } + + .network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account { + margin-right: 0; + } +} + +/* Horizontal */ +@media screen and (max-width: 480px) and (orientation: landscape) { + #wpadminbar { + position: absolute; + } +} + +/* Smartphone */ +@media screen and (max-width: 480px) { + #moby6-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 400; + } + + #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { + position: fixed; + width: 100%; + left: 0; + } + + #wpadminbar .menupop .menupop > .ab-item:before { + display: none; + } + + #wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper { + margin-left: 0; + } + + #wpadminbar #wp-admin-bar-updates, + #wpadminbar #wp-admin-bar-view, + #wpadminbar #wp-admin-bar-edit { + display: none; + } +} + +@media screen and (max-width: 350px) { + #wpadminbar #wp-admin-bar-wp-logo { + display: none; + } +} \ No newline at end of file