WordPress/wp-admin/css/admin-menu.css
Aaron Jorbin 50cb2c5e28 Update autoprefixer browser support matrix
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/

This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.

So, in the (paraphrased) words of Taylor Swift:

I remember when we dropped support  the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you

We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...

Fixes #37651.
Props stunnedbeast, netweb, jorbin.



Built from https://develop.svn.wordpress.org/trunk@41062


git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-07-16 01:15:46 +00:00

927 lines
19 KiB
CSS

#adminmenuback,
#adminmenuwrap,
#adminmenu,
#adminmenu .wp-submenu {
width: 160px;
background-color: #23282d;
}
#adminmenuback {
position: fixed;
top: 0;
bottom: -120px;
z-index: 1; /* positive z-index to avoid elastic scrolling woes in Safari */
}
#adminmenu {
clear: left;
margin: 12px 0;
padding: 0;
list-style: none;
}
.folded #adminmenuback,
.folded #adminmenuwrap,
.folded #adminmenu,
.folded #adminmenu li.menu-top {
width: 36px;
}
.icon16 {
height: 18px;
width: 18px;
padding: 6px 6px;
margin: -6px 0 0 -8px;
float: left;
}
/* New Menu icons */
.icon16:before {
color: #82878c; /* same as new icons */
font: normal 20px/1 dashicons;
speak: none;
padding: 6px 0;
height: 34px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: all .1s ease-in-out;
}
.icon16.icon-dashboard:before {
content: "\f226";
}
.icon16.icon-post:before {
content: "\f109";
}
.icon16.icon-media:before {
content: "\f104";
}
.icon16.icon-links:before {
content: "\f103";
}
.icon16.icon-page:before {
content: "\f105";
}
.icon16.icon-comments:before {
content: "\f101";
margin-top: 1px;
}
.icon16.icon-appearance:before {
content: "\f100";
}
.icon16.icon-plugins:before {
content: "\f106";
}
.icon16.icon-users:before {
content: "\f110";
}
.icon16.icon-tools:before {
content: "\f107";
}
.icon16.icon-settings:before {
content: "\f108";
}
.icon16.icon-site:before {
content: "\f541";
}
.icon16.icon-generic:before {
content: "\f111";
}
/* hide background-image for icons above */
.icon16.icon-dashboard,
.menu-icon-dashboard div.wp-menu-image,
.icon16.icon-post,
.menu-icon-post div.wp-menu-image,
.icon16.icon-media,
.menu-icon-media div.wp-menu-image,
.icon16.icon-links,
.menu-icon-links div.wp-menu-image,
.icon16.icon-page,
.menu-icon-page div.wp-menu-image,
.icon16.icon-comments,
.menu-icon-comments div.wp-menu-image,
.icon16.icon-appearance,
.menu-icon-appearance div.wp-menu-image,
.icon16.icon-plugins,
.menu-icon-plugins div.wp-menu-image,
.icon16.icon-users,
.menu-icon-users div.wp-menu-image,
.icon16.icon-tools,
.menu-icon-tools div.wp-menu-image,
.icon16.icon-settings,
.menu-icon-settings div.wp-menu-image,
.icon16.icon-site,
.menu-icon-site div.wp-menu-image,
.icon16.icon-generic,
.menu-icon-generic div.wp-menu-image {
background-image: none !important;
}
/*------------------------------------------------------------------------------
7.0 - Main Navigation (Left Menu)
------------------------------------------------------------------------------*/
#adminmenuwrap {
position: relative;
float: left;
z-index: 9990;
}
/* side admin menu */
#adminmenu * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#adminmenu li {
margin: 0;
padding: 0;
cursor: pointer;
}
#adminmenu a {
display: block;
line-height: 18px;
padding: 2px 5px;
color: #eee;
}
#adminmenu .wp-submenu a {
color: #b4b9be;
color: rgba(240,245,250,0.7);
}
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
background: none;
}
#adminmenu a:hover,
#adminmenu li.menu-top > a:focus,
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
color: #00b9eb;
}
#adminmenu li.menu-top {
border: none;
min-height: 34px;
position: relative;
}
#adminmenu .wp-submenu {
list-style: none;
position: absolute;
top: -1000em;
left: 160px;
overflow: visible;
word-wrap: break-word;
}
#adminmenu .wp-submenu,
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
padding: 7px 0 8px;
z-index: 9999;
background-color: #32373c;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.js #adminmenu .sub-open,
.js #adminmenu .opensub .wp-submenu,
#adminmenu a.menu-top:focus + .wp-submenu,
.no-js li.wp-has-submenu:hover .wp-submenu {
top: -1px;
}
#adminmenu .wp-has-current-submenu .wp-submenu,
.no-js li.wp-has-current-submenu:hover .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
position: relative;
z-index: 3;
top: auto;
left: auto;
right: auto;
bottom: auto;
border: 0 none;
margin-top: 0;
box-shadow: none;
background-color: #32373c;
}
/* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
position: relative;
background-color: #191e23;
color: #00b9eb;
}
.folded #adminmenu li.menu-top:hover,
.folded #adminmenu li.opensub > a.menu-top,
.folded #adminmenu li > a.menu-top:focus {
z-index: 10000;
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow div {
background: #0073aa;
color: #fff;
}
.folded #adminmenu .wp-submenu.sub-open,
.folded #adminmenu .opensub .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
.folded #adminmenu a.menu-top:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
top: 0;
left: 36px;
}
.folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
position: absolute;
top: -1000em;
}
#adminmenu .wp-not-current-submenu .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
min-width: 160px;
width: auto;
}
#adminmenu .wp-submenu a {
font-size: 13px;
line-height: 1.2;
margin: 0;
padding: 6px 0;
}
#adminmenu .wp-submenu li.current,
#adminmenu .wp-submenu li.current a,
#adminmenu .opensub .wp-submenu li.current a,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover,
#adminmenu .wp-submenu li.current a:focus {
color: #fff;
}
#adminmenu .wp-not-current-submenu li > a,
.folded #adminmenu .wp-has-current-submenu li > a {
padding-right: 16px;
padding-left: 14px;
transition: all .1s ease-in-out;
}
#adminmenu .wp-has-current-submenu ul > li > a,
.folded #adminmenu li.menu-top .wp-submenu > li > a {
padding: 6px 12px;
}
#adminmenu a.menu-top,
#adminmenu .wp-submenu-head {
font-size: 14px;
font-weight: 400;
line-height: 18px;
padding: 0;
}
#adminmenu .wp-submenu-head {
display: none;
}
.folded #adminmenu .wp-menu-name {
position: absolute;
left: -999px;
}
.folded #adminmenu .wp-submenu-head {
display: block;
}
#adminmenu .wp-submenu li {
padding: 0;
margin: 0;
overflow: hidden;
}
#adminmenu .wp-menu-image img {
padding: 9px 0 0 0;
opacity: 0.6;
filter: alpha(opacity=60);
}
#adminmenu div.wp-menu-name {
padding: 8px 0;
}
#adminmenu div.wp-menu-image {
float: left;
width: 36px;
height: 34px;
margin: 0;
text-align: center;
}
#adminmenu div.wp-menu-image.svg {
background-repeat: no-repeat;
background-position: center;
background-size: 20px auto;
}
div.wp-menu-image:before {
color: #a0a5aa;
color: rgba(240,245,250,0.6);
padding: 7px 0;
transition: all .1s ease-in-out;
}
#adminmenu div.wp-menu-image:before {
color: #a0a5aa;
color: rgba(240,245,250,0.6);
}
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
#adminmenu .current div.wp-menu-image:before,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
color: #fff;
}
#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
color: #00b9eb;
}
/* IE8 doesn't redraw the pseudo elements unless you make a change to the content, this restore the initial color after hover */
.ie8 #adminmenu li.opensub div.wp-menu-image:before {
color: #a0a5aa;
}
.folded #adminmenu div.wp-menu-image {
width: 35px;
height: 30px;
position: absolute;
z-index: 25;
}
.folded #adminmenu a.menu-top {
height: 34px;
}
/* No @font-face support */
.no-font-face #adminmenu .wp-menu-image {
display: none;
}
.no-font-face #adminmenu div.wp-menu-name {
padding: 8px 12px;
}
.no-font-face.auto-fold #adminmenu .wp-menu-name {
margin-left: 0;
}
/* End no @font-face support */
/* Sticky admin menu */
.sticky-menu #adminmenuwrap {
position: fixed;
}
/* A new arrow */
.wp-menu-arrow {
display: none !important;
}
ul#adminmenu a.wp-has-current-submenu {
position: relative;
}
ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
right: 0;
border: solid 8px transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #f1f1f1;
top: 50%;
margin-top: -8px;
}
.folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
display: none;
}
.folded ul#adminmenu a.wp-has-current-submenu:after,
.folded ul#adminmenu > li a.current:after {
border-width: 4px;
margin-top: -4px;
}
/* flyout menu arrow */
#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 8px;
top: 10px;
z-index: 10000;
}
.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
border-width: 4px;
margin-top: -4px;
top: 18px;
}
#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
border-right-color: #32373c;
}
#adminmenu li.menu-top:hover .wp-menu-image img,
#adminmenu li.wp-has-current-submenu .wp-menu-image img {
opacity: 1;
filter: alpha(opacity=100);
}
#adminmenu li.wp-menu-separator {
height: 5px;
padding: 0;
margin: 0 0 6px 0;
cursor: inherit;
}
/* @todo: is this even needed given that it's nested beneath the above li.wp-menu-separator? */
#adminmenu div.separator {
height: 2px;
padding: 0;
}
#adminmenu .wp-submenu .wp-submenu-head {
color: #fff;
font-weight: 400;
font-size: 14px;
padding: 8px 4px 8px 11px;
margin: -7px 0px 4px;
}
#adminmenu li.current,
.folded #adminmenu li.wp-menu-open {
border: 0 none;
}
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
display: inline-block;
background-color: #d54e21;
color: #fff;
font-size: 9px;
line-height: 17px;
font-weight: 600;
margin: 1px 0 0 2px;
vertical-align: top;
border-radius: 10px;
z-index: 26;
}
#adminmenu li .awaiting-mod span,
#adminmenu li span.update-plugins span {
display: block;
padding: 0 6px;
}
#adminmenu li.current a .awaiting-mod,
#adminmenu li a.wp-has-current-submenu .update-plugins {
background-color: #00b9eb;
color: #fff;
}
#adminmenu li span.count-0 {
display: none;
}
#collapse-button {
display: block;
width: 100%;
height: 34px;
margin: 0;
border: none;
padding: 0;
position: relative;
overflow: visible;
line-height: 34px;
background: none;
color: #aaa;
cursor: pointer;
outline: 0;
}
#collapse-button:hover,
#collapse-button:focus {
color: #00b9eb;
}
#collapse-button .collapse-button-icon,
#collapse-button .collapse-button-label {
/* absolutely positioned to avoid 1px shift in IE when button is pressed */
display: block;
position: absolute;
top: 0;
left: 0;
line-height: 34px;
}
#collapse-button .collapse-button-icon {
width: 36px;
height: 34px;
}
#collapse-button .collapse-button-label {
padding: 0 0 0 36px;
}
.folded #collapse-button .collapse-button-label {
display: none;
}
#collapse-button .collapse-button-icon:after {
content: "\f148";
display: block;
position: relative;
top: 7px;
text-align: center;
font: normal 20px/1 dashicons !important;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* rtl:ignore */
.folded #collapse-button .collapse-button-icon:after,
.rtl #collapse-button .collapse-button-icon:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rtl.folded #collapse-button .collapse-button-icon:after {
-webkit-transform: none;
transform: none;
}
#collapse-button .collapse-button-icon:after,
#collapse-button .collapse-button-label {
transition: all .1s ease-in-out;
}
/**
* Toolbar menu toggle
*/
li#wp-admin-bar-menu-toggle {
display: none;
}
/* Hide-if-customize for items we can't add classes to */
.customize-support #menu-appearance a[href="themes.php?page=custom-header"],
.customize-support #menu-appearance a[href="themes.php?page=custom-background"] {
display: none;
}
/* Auto-folding of the admin menu */
@media only screen and (max-width: 960px) {
.auto-fold #wpcontent,
.auto-fold #wpfooter {
margin-left: 36px;
}
.auto-fold #adminmenuback,
.auto-fold #adminmenuwrap,
.auto-fold #adminmenu,
.auto-fold #adminmenu li.menu-top {
width: 36px;
}
.auto-fold #adminmenu .wp-submenu.sub-open,
.auto-fold #adminmenu .opensub .wp-submenu,
.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
.auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
.auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
top: 0px;
left: 36px;
}
.auto-fold #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
position: absolute;
top: -1000em;
margin-right: -1px;
padding: 7px 0 8px;
z-index: 9999;
}
.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
min-width: 150px;
width: auto;
}
.auto-fold #adminmenu .wp-has-current-submenu li > a {
padding-right: 16px;
padding-left: 14px;
}
.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
padding-left: 12px;
}
.auto-fold #adminmenu .wp-menu-name {
position: absolute;
left: -999px;
}
.auto-fold #adminmenu .wp-submenu-head {
display: block;
}
.auto-fold #adminmenu div.wp-menu-image {
height: 30px;
width: 34px;
position: absolute;
z-index: 25;
}
.auto-fold #adminmenu a.menu-top {
height: 34px;
}
.auto-fold #adminmenu li.wp-menu-open {
border: 0 none;
}
.auto-fold #adminmenu .wp-has-current-submenu.menu-top-last {
margin-bottom: 0;
}
.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
display: none;
}
.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
border-width: 4px;
margin-top: -4px;
top: 16px;
}
.auto-fold ul#adminmenu a.wp-has-current-submenu:after,
.auto-fold ul#adminmenu > li a.current:after {
border-width: 4px;
margin-top: -4px;
}
.auto-fold #adminmenu li.menu-top:hover,
.auto-fold #adminmenu li.opensub > a.menu-top,
.auto-fold #adminmenu li > a.menu-top:focus {
z-index: 10000;
}
.auto-fold #collapse-menu .collapse-button-label {
display: none;
}
/* rtl:ignore */
.auto-fold #collapse-button .collapse-button-icon:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.rtl.auto-fold #collapse-button .collapse-button-icon:after {
-webkit-transform: none;
transform: none;
}
}
@media screen and ( max-width: 782px ) {
.auto-fold #wpcontent {
position: relative;
margin-left: 0;
padding-left: 10px;
}
.sticky-menu #adminmenuwrap {
position: relative;
z-index: auto;
top: 0;
}
/* Sidebar Adjustments */
.auto-fold #adminmenu,
.auto-fold #adminmenuback,
.auto-fold #adminmenuwrap {
position: absolute;
width: 190px;
z-index: 100;
}
.auto-fold #adminmenuback,
.auto-fold #adminmenuwrap {
display: none;
}
.auto-fold .wp-responsive-open #adminmenuback,
.auto-fold .wp-responsive-open #adminmenuwrap {
display: block;
}
.auto-fold #adminmenu li.menu-top {
width: 100%;
}
/* Resize the admin menu items to a comfortable touch size */
.auto-fold #adminmenu li a {
font-size: 16px;
padding: 5px;
}
.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
padding: 10px 10px 10px 20px;
}
/* Restore the menu names */
.auto-fold #adminmenu .wp-menu-name {
position: static;
margin-left: 35px;
}
/* Switch the arrow side */
.auto-fold ul#adminmenu a.wp-has-current-submenu:after,
.auto-fold ul#adminmenu > li.current > a.current:after {
border-width: 8px;
margin-top: -8px;
}
.auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
display: none;
}
/* Make the submenus appear correctly when tapped. */
#adminmenu .wp-submenu {
position: relative;
display: none;
}
.auto-fold #adminmenu .selected .wp-submenu,
.auto-fold #adminmenu .wp-menu-open .wp-submenu {
position: relative;
display: block;
top: 0;
left: -1px;
box-shadow: none;
}
.auto-fold #adminmenu .selected .wp-submenu:after,
.auto-fold #adminmenu .wp-menu-open .wp-submenu:after {
display: none;
}
.auto-fold #adminmenu .opensub .wp-submenu {
display: none;
}
.auto-fold #adminmenu .selected .wp-submenu {
display: block;
}
.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
display: block;
}
.auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
.auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
position: relative;
left: -1px;
right: 0;
top: 0;
}
/* Remove submenu headers and adjust sub meu*/
#adminmenu .wp-submenu .wp-submenu-head {
display: none;
}
/* Toolbar menu toggle */
#wp-responsive-toggle {
position: fixed;
top: 5px;
left: 4px;
padding-right: 10px;
z-index: 99999;
border: none;
box-sizing: border-box;
}
#wpadminbar #wp-admin-bar-menu-toggle a {
display: block;
padding: 0;
overflow: hidden;
outline: none;
text-decoration: none;
border: 1px solid transparent;
background: none;
height: 44px;
margin-left: -1px;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
background: #32373c;
}
li#wp-admin-bar-menu-toggle {
display: block;
}
#wpadminbar #wp-admin-bar-menu-toggle a:hover {
border: 1px solid transparent;
}
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
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;
}
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
color: #00b9eb;
}
}
/* Smartphone */
@media screen and (max-width: 600px) {
#adminmenuwrap,
#adminmenuback {
display: none;
}
.wp-responsive-open #adminmenuwrap,
.wp-responsive-open #adminmenuback {
display: block;
}
.auto-fold #adminmenu {
top: 46px;
}
}