Administration: Standardize colors used in CSS to a single palette.
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.
Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw
Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.
Built from https://develop.svn.wordpress.org/trunk@50025
git-svn-id: http://core.svn.wordpress.org/trunk@49726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-01-26 13:54:59 -05:00
|
|
|
.media-modal *{box-sizing:content-box}.media-modal input,.media-modal select,.media-modal textarea{box-sizing:border-box}.media-frame,.media-modal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12px;-webkit-overflow-scrolling:touch}.media-modal legend{padding:0;font-size:13px}.media-modal label{font-size:13px}.media-modal .legend-inline{position:absolute;transform:translate(-100%,50%);margin-left:-1%;line-height:1.2}.media-frame a{border-bottom:none;color:#2271b1}.media-frame a:active,.media-frame a:hover{color:#135e96}.media-frame a:focus{box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);color:#043959;outline:1px solid transparent}.media-frame a.button{color:#2c3338}.media-frame a.button:hover{color:#1d2327}.media-frame a.button-primary,.media-frame a.button-primary:hover{color:#fff}.media-frame input,.media-frame textarea{padding:6px 8px}.media-frame select,.wp-admin .media-frame select{min-height:30px;vertical-align:middle}.media-frame input[type=color],.media-frame input[type=date],.media-frame input[type=datetime-local],.media-frame input[type=datetime],.media-frame input[type=email],.media-frame input[type=month],.media-frame input[type=number],.media-frame input[type=password],.media-frame input[type=search],.media-frame input[type=tel],.media-frame input[type=text],.media-frame input[type=time],.media-frame input[type=url],.media-frame input[type=week],.media-frame select,.media-frame textarea{box-shadow:0 0 0 transparent;border-radius:4px;border:1px solid #8c8f94;background-color:#fff;color:#2c3338;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px}.media-frame input[type=date],.media-frame input[type=datetime-local],.media-frame input[type=datetime],.media-frame input[type=email],.media-frame input[type=month],.media-frame input[type=number],.media-frame input[type=password],.media-frame input[type=search],.media-frame input[type=tel],.media-frame input[type=text],.media-frame input[type=time],.media-frame input[type=url],.media-frame input[type=week]{padding:0 8px;line-height:2.15384615}.media-frame.mode-grid .wp-filter input[type=search]{font-size:14px;line-height:2}.media-frame input[type=email]:focus,.media-frame input[type=number]:focus,.media-frame input[type=password]:focus,.media-frame input[type=search]:focus,.media-frame input[type=text]:focus,.media-frame input[type=url]:focus,.media-frame select:focus,.media-frame textarea:focus{border-color:#3582c4;box-shadow:0 0 0 1px #3582c4;outline:2px solid transparent}.media-frame input:disabled,.media-frame input[readonly],.media-frame textarea:disabled,.media-frame textarea[readonly]{background-color:#f0f0f1}.media-frame input[type=search]{-webkit-appearance:textfield}.media-frame ::-webkit-input-placeholder{color:#787c82}.media-frame ::-moz-placeholder{color:#787c82;opacity:1}.media-frame :-ms-input-placeholder{color:#787c82}.media-frame .hidden,.media-frame .setting.hidden{display:none}/*!
|
Administration: Standardize colors used in CSS to a single palette.
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.
Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw
Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.
Built from https://develop.svn.wordpress.org/trunk@50025
git-svn-id: http://core.svn.wordpress.org/trunk@49726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-01-26 13:54:59 -05:00
|
|
|
*/.ui-draggable-handle,.ui-sortable-handle{touch-action:none}.media-modal{position:fixed;top:30px;left:30px;right:30px;bottom:30px;z-index:160000}.wp-customizer .media-modal{z-index:560000}.media-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;min-height:360px;background:#000;opacity:.7;z-index:159900}.wp-customizer .media-modal-backdrop{z-index:559900}.media-modal-close{position:absolute;top:0;right:0;width:50px;height:50px;margin:0;padding:0;border:1px solid transparent;background:0 0;color:#646970;z-index:1000;cursor:pointer;outline:0;transition:color .1s ease-in-out,background .1s ease-in-out}.media-modal-close:active,.media-modal-close:hover{color:#135e96}.media-modal-close:focus{color:#135e96;border-color:#4f94d4;box-shadow:0 0 3px rgba(34,113,177,.8);outline:2px solid transparent}.media-modal-close span.media-modal-icon{background-image:none}.media-modal-close .media-modal-icon:before{content:"\f158";font:normal 20px/1 dashicons;speak:never;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.media-modal-content{position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto;min-height:300px;box-shadow:0 5px 15px rgba(0,0,0,.7);background:#fff;-webkit-font-smoothing:subpixel-antialiased}.media-modal-content .media-frame select.attachment-filters{margin-top:32px;margin-right:2%;width:42%;width:calc(48% - 12px)}.media-modal-content .attachments-browser .search{width:100%}.wp-core-ui .media-modal-icon{background-image:url(../images/uploader-icons.png);background-repeat:no-repeat}.media-toolbar{position:absolute;top:0;left:0;right:0;z-index:100;height:60px;padding:0 16px;border:0 solid #dcdcde;overflow:hidden}.media-frame-toolbar .media-toolbar{top:auto;bottom:-47px;height:auto;overflow:visible;border-top:1px solid #dcdcde}.media-toolbar-primary{float:right;height:100%;position:relative}.media-toolbar-secondary{float:left;height:100%}.media-toolbar-primary>.media-button,.media-toolbar-primary>.media-button-group{margin-left:10px;float:left;margin-top:15px}.media-toolbar-secondary>.media-button,.media-toolbar-secondary>.media-button-group{margin-right:10px;margin-top:15px}.media-sidebar{position:absolute;top:0;right:0;bottom:0;width:267px;padding:0 16px;z-index:75;background:#f6f7f7;border-left:1px solid #dcdcde;overflow:auto;-webkit-overflow-scrolling:touch}.media-sidebar::after{content:"";display:flex;clear:both;height:24px}.hide-toolbar .media-sidebar{bottom:0}.image-details h2,.media-sidebar h2{position:relative;font-weight:600;text-transform:uppercase;font-size:12px;color:#646970;margin:24px 0 8px}.attachment-details .setting,.media-sidebar .setting{display:block;float:left;width:100%;margin:0 0 10px}.media-sidebar .collection-settings .setting{margin:1px 0}.attachment-details .setting.has-description,.media-sidebar .setting.has-description{margin-bottom:5px}.media-sidebar .setting .link-to-custom{margin:3px 2px 0}.attachment-details .setting .name,.attachment-details .setting span,.media-sidebar .setting .name,.media-sidebar .setting .value,.media-sidebar .setting span{min-width:30%;margin-right:4%;font-size:12px;text-align:right;word-wrap:break-word}.media-sidebar .setting .name{max-width:80px}.media-sidebar .setting .value{text-align:left}.media-sidebar .setting select{max-width:65%}.attachment-details .field input[type=checkbox],.attachment-details .field input[type=radio],.attachment-details .setting input[type=checkbox],.attachment-details .setting input[type=radio],.media-sidebar .field input[type=checkbox],.media-sidebar .field input[type=radio],.media-sidebar .setting input[type=checkbox],.media-sidebar .setting input[type=radio]{float:none;margin:8px 3px 0;padding:0}.attachment-details .setting .name,.attachment-details .setting .value,.attachment-details .setting span,.compat-item label span,.media-sidebar .checkbox-label-inline,.media-sidebar .setting .name,.media-sidebar .setting .value,.media-sidebar .setting span{float:left;min-height:22px;padding-top:8px;line-height:1.33333333;font-weight:400;color:#646970}.media-sidebar .checkbox-label-inline{font
|