mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-26 19:18:57 +01:00
822b8afb50
For better accessibility, expandable panels should be placed immediately after the control that expands them. This change moves the Media Library inline uploader up, right after the "Add New" button, also introducing consistency with the Plugin and Theme uploaders. Adds a proper ARIA role on the button and an `aria-expanded` attribute to give better feedback to assistive technologies users about the uploader's expanded state. Improves the focus handling when closing the uploader, improves the focus style and color contrast ratio of the uploader "close" button. Props mantismamita, karmatosed, adamsilverstein, afercia. Fixes #37188. Built from https://develop.svn.wordpress.org/trunk@40359 git-svn-id: http://core.svn.wordpress.org/trunk@40266 1a063a9b-81f0-0310-95a4-ce76da25c4cd
8 lines
41 KiB
CSS
8 lines
41 KiB
CSS
.media-menu,.media-router{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.media-modal *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.media-modal input,.media-modal select,.media-modal textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;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 label,.media-modal legend{font-size:13px}.media-frame input,.media-frame textarea{padding:6px 8px}.media-frame select,.wp-admin .media-frame select{line-height:28px;margin-top:3px}.media-frame a{border-bottom:none;color:#0073aa}.media-frame a:active,.media-frame a:hover{color:#00a0d2}.media-frame a:focus{-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);outline:0;color:#124964}.media-frame a.button{color:#32373c}.media-frame a.button:hover{color:#23282d}.media-frame a.button-primary,.media-frame a.button-primary:hover{color:#fff}.media-frame input[type=text],.media-frame input[type=password],.media-frame input[type=number],.media-frame input[type=search],.media-frame input[type=email],.media-frame input[type=url],.media-frame select,.media-frame textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:12px;border-width:1px;border-style:solid;border-color:#ddd}.media-frame input[type=text]:focus,.media-frame input[type=password]:focus,.media-frame input[type=number]:focus,.media-frame input[type=search]:focus,.media-frame input[type=email]:focus,.media-frame input[type=url]:focus,.media-frame select:focus,.media-frame textarea:focus{border-color:#5b9dd9}.media-frame select{height:24px;padding:2px}.media-frame input:disabled,.media-frame input[readonly],.media-frame textarea:disabled,.media-frame textarea[readonly]{background-color:#eee}.media-frame input[type=search]{-webkit-appearance:textfield}.media-frame ::-webkit-input-placeholder{color:#72777c}.media-frame ::-moz-placeholder{color:#72777c;opacity:1}.media-frame :-ms-input-placeholder{color:#72777c}.media-frame .hidden{display:none}/*!
|
|
* jQuery UI Draggable/Sortable 1.11.4
|
|
* http://jqueryui.com
|
|
*
|
|
* Copyright jQuery Foundation and other contributors
|
|
* Released under the MIT license.
|
|
* http://jquery.org/license
|
|
*/.ui-draggable-handle,.ui-sortable-handle{-ms-touch-action:none;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:#666;z-index:1000;cursor:pointer;outline:0;-webkit-transition:color .1s ease-in-out,background .1s ease-in-out;transition:color .1s ease-in-out,background .1s ease-in-out}.media-modal-close:active,.media-modal-close:hover{color:#00a0d2}.media-modal-close:focus{color:#00a0d2;border-color:#5b9dd9;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.media-modal-close span.media-modal-icon{background-image:none}.media-modal-close .media-modal-icon:before{content:"\f158";font:400 20px/1 dashicons;speak:none;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;-webkit-box-shadow:0 5px 15px rgba(0,0,0,.7);box-shadow:0 5px 15px rgba(0,0,0,.7);background:#fcfcfc;-webkit-font-smoothing:subpixel-antialiased}.media-modal-content .media-frame select.attachment-filters{margin-top:11px;margin-right:2%;width:42%;width:-webkit-calc(48% - 12px);width:calc(48% - 12px)}.media-modal-content .attachments-browser .media-toolbar-secondary{width:66%}.media-modal-content .media-toolbar-primary.search-form{width:33%}.media-modal-content .media-toolbar-primary .media-button{float:right}.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-menu,.media-sidebar{top:0;bottom:0;background:#f3f3f3;right:0}.media-toolbar{position:absolute;top:0;left:0;right:0;z-index:100;height:60px;padding:0 16px;border:0 solid #ddd;overflow:hidden}.media-toolbar-primary{float:right;height:100%}.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;width:267px;padding:0 16px 24px;z-index:75;border-left:1px solid #ddd;overflow:auto;-webkit-overflow-scrolling:touch}.hide-toolbar .media-sidebar{bottom:0}.media-sidebar .sidebar-title{font-size:20px;margin:0;padding:12px 10px 10px;line-height:28px}.media-sidebar .sidebar-content{padding:0 10px;margin-bottom:130px}.media-sidebar .search{display:block;width:100%}.image-details h2,.image-details h3,.media-sidebar h2,.media-sidebar h3{position:relative;font-weight:600;text-transform:uppercase;font-size:12px;color:#666;margin:24px 0 8px}.attachment-details .setting,.media-sidebar .setting{display:block;float:left;width:100%;margin:1px 0}.attachment-details .setting label,.media-sidebar .setting label{display:block}.attachment-details .setting .link-to-custom,.media-sidebar .setting .link-to-custom{margin:3px 2px 0}.attachment-details .setting span,.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}.attachment-details .setting select,.media-sidebar .setting select{max-width:65%}.attachment-details .field input[type=radio],.attachment-details .field input[type=checkbox],.attachment-details .setting input[type=radio],.attachment-details .setting input[type=checkbox],.media-sidebar .field input[type=radio],.media-sidebar .field input[type=checkbox],.media-sidebar .setting input[type=radio],.media-sidebar .setting input[type=checkbox]{float:none;margin:8px 3px 0;padding:0}.attachment-details .setting span,.compat-item label span,.media-sidebar .setting span{float:left;min-height:22px;padding-top:8px;line-height:16px;font-weight:400;color:#666}.media-menu>a,.media-router>a{line-height:18px;font-size:14px;text-decoration:none}.compat-item label span{text-align:right}.attachment-details .setting .value,.attachment-details .setting input[type=tel],.attachment-details .setting input[type=text],.attachment-details .setting input[type=password],.attachment-details .setting input[type=number],.attachment-details .setting input[type=search],.attachment-details .setting input[type=email],.attachment-details .setting input[type=url],.attachment-details .setting textarea,.media-sidebar .setting .value,.media-sidebar .setting input[type=tel],.media-sidebar .setting input[type=text],.media-sidebar .setting input[type=password],.media-sidebar .setting input[type=number],.media-sidebar .setting input[type=search],.media-sidebar .setting input[type=email],.media-sidebar .setting input[type=url],.media-sidebar .setting textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:1px;width:65%;float:right}.attachment-details .setting .value,.media-sidebar .setting .value{margin:0 1px;text-align:left}.attachment-details .setting textarea,.compat-item .field textarea,.media-sidebar .setting textarea{height:62px;resize:vertical}.attachment-details select,.media-sidebar select{margin-top:3px}.compat-item{float:left;width:100%;overflow:hidden}.compat-item table{width:100%;table-layout:fixed;border-spacing:0;border:0}.compat-item tr{padding:2px 0;display:block;overflow:hidden}.compat-item .field,.compat-item .label{display:block;margin:0;padding:0}.compat-item .label{min-width:30%;margin-right:4%;float:left;text-align:right}.compat-item .label span{display:block;width:100%}.compat-item .field{float:right;width:65%;margin:1px}.compat-item .field input[type=tel],.compat-item .field input[type=text],.compat-item .field input[type=password],.compat-item .field input[type=number],.compat-item .field input[type=search],.compat-item .field input[type=email],.compat-item .field input[type=url],.compat-item .field textarea{width:100%;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.sidebar-for-errors .attachment-details,.sidebar-for-errors .compat-item,.sidebar-for-errors .media-sidebar .media-progress-bar,.sidebar-for-errors .upload-details{display:none!important}.media-menu{position:absolute;left:0;margin:0;padding:10px 0;border-right-width:1px;border-right-style:solid;border-right-color:#ccc;user-select:none}.media-menu>a{display:block;position:relative;padding:8px 20px;margin:0;color:#0073aa}.media-frame-title .dashicons,.media-frame.hide-menu .media-frame-menu,.media-frame.hide-router .media-frame-router,.media-frame.hide-toolbar .media-frame-toolbar{display:none}.media-menu>a:hover{color:#0073aa;background:rgba(0,0,0,.04)}.media-menu>a:active{outline:0}.media-menu .active,.media-menu .active:hover{color:#23282d;font-weight:600}.media-menu .separator{height:0;margin:12px 20px;padding:0;border-top:1px solid #ddd}.media-router{position:relative;padding:0 6px;margin:0;clear:both;user-select:none}.media-router a{-webkit-transition:none;transition:none}.media-router>a{position:relative;float:left;padding:8px 10px 9px;margin:0;height:18px}.media-frame,.media-frame-menu{position:absolute;left:0;bottom:0;top:0}.media-router>a:last-child{border-right:0}.media-router>a:active{outline:0}.media-router .active,.media-router .active:hover{color:#32373c}.media-router .active,.media-router>a.active:last-child{margin:-1px -1px 0;background:#fff;border:1px solid #ddd;border-bottom:none}.media-router .active:after{display:none}.media-frame{overflow:hidden;right:0}.media-frame-menu{width:200px;z-index:150}.media-frame-router,.media-frame-title{z-index:200;left:200px;position:absolute;right:0}.media-frame-title{top:0;height:50px}.media-frame-router{top:50px;height:36px}.media-frame-content{position:absolute;top:84px;left:200px;right:0;bottom:61px;height:auto;width:auto;margin:0;overflow:auto;background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.media-frame-toolbar{position:absolute;left:200px;right:0;bottom:0;height:60px;z-index:100}.media-frame.hide-menu .media-frame-content,.media-frame.hide-menu .media-frame-router,.media-frame.hide-menu .media-frame-title,.media-frame.hide-menu .media-frame-toolbar{left:0}.media-frame.hide-toolbar .media-frame-content{bottom:0}.media-frame.hide-router .media-frame-content{top:50px}.media-frame.hide-router .media-frame-title{border-bottom:1px solid #ddd;-webkit-box-shadow:0 4px 4px -4px rgba(0,0,0,.1);box-shadow:0 4px 4px -4px rgba(0,0,0,.1)}.media-frame-title h1{padding:0 16px;font-size:22px;line-height:50px;margin:0}.media-frame-title .suggested-dimensions{font-size:14px;float:right;margin-right:20px}.media-frame-content .crop-content{height:100%}.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon{margin-right:300px}.media-frame-content .crop-content .crop-image{display:block;margin:auto;max-width:100%;max-height:100%}.media-frame-content .crop-content .upload-errors{position:absolute;width:300px;top:50%;left:50%;margin-left:-150px;margin-right:-150px;z-index:600000}.media-frame .media-iframe{overflow:hidden}.media-frame .media-iframe,.media-frame .media-iframe iframe{height:100%;width:100%;border:0}.media-frame select.attachment-filters{margin-top:11px;margin-right:2%;max-width:42%;max-width:-webkit-calc(48% - 12px);max-width:calc(48% - 12px)}.media-toolbar-primary .search,.wp-core-ui .attachment .portrait img{max-width:100%}.media-frame select.attachment-filters:last-of-type{margin-right:0}.media-frame .search{margin-top:11px;padding:4px;font-size:13px;color:#444;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;-webkit-appearance:none}.wp-core-ui .attachments{margin:0;-webkit-overflow-scrolling:touch}.wp-core-ui .attachment{position:relative;float:left;padding:8px;margin:0;color:#444;cursor:pointer;list-style:none;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:25%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.wp-core-ui .attachment.details:focus,.wp-core-ui .attachment:focus,.wp-core-ui .selected.attachment:focus{-webkit-box-shadow:inset 0 0 2px 3px #fff,inset 0 0 0 7px #5b9dd9;box-shadow:inset 0 0 2px 3px #fff,inset 0 0 0 7px #5b9dd9;outline:0}.wp-core-ui .selected.attachment{-webkit-box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px #ccc;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px #ccc}.wp-core-ui .attachment.details{-webkit-box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #0073aa;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #0073aa}.wp-core-ui .attachment-preview{position:relative;-webkit-box-shadow:inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);background:#eee;cursor:pointer}.wp-core-ui .attachment-preview:before{content:"";display:block;padding-top:100%}.wp-core-ui .attachment .icon{margin:0 auto;overflow:hidden}.wp-core-ui .attachment .thumbnail{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;opacity:1;-webkit-transition:opacity .1s;transition:opacity .1s}.wp-core-ui .attachment .landscape img{max-height:100%}.wp-core-ui .attachment .thumbnail:after{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden}.wp-core-ui .attachment .thumbnail img{top:0;left:0}.wp-core-ui .attachment .thumbnail .centered{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:translate(50%,50%);-ms-transform:translate(50%,50%);transform:translate(50%,50%)}.wp-core-ui .attachment .thumbnail .centered img{-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon{-webkit-transform:translate(-50%,-70%);-ms-transform:translate(-50%,-70%);transform:translate(-50%,-70%)}.ie8 .wp-core-ui .attachment img.icon{top:20%;position:relative}.wp-core-ui .attachment .filename{position:absolute;left:0;right:0;bottom:0;overflow:hidden;max-height:100%;word-wrap:break-word;text-align:center;font-weight:600;background:rgba(255,255,255,.8);-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.wp-core-ui .attachment .filename div{padding:5px 10px}.wp-core-ui .attachment .thumbnail img{position:absolute}.wp-core-ui .attachment-close{display:block;position:absolute;top:5px;right:5px;height:22px;width:22px;padding:0;background-color:#fff;background-position:-96px 4px;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.3);box-shadow:0 0 0 1px rgba(0,0,0,.3);-webkit-transition:none;transition:none}.wp-core-ui .attachment-close:focus,.wp-core-ui .attachment-close:hover{background-position:-36px 4px}.wp-core-ui .attachment .check{display:none;height:24px;width:24px;padding:0;border:0;position:absolute;z-index:10;top:0;right:0;outline:0;background:#eee;cursor:pointer;-webkit-box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(0,0,0,.15);box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(0,0,0,.15)}.wp-core-ui .attachment .check .media-modal-icon{display:block;background-position:-1px 0;height:15px;width:15px;margin:5px}.wp-core-ui .attachment .check:hover .media-modal-icon{background-position:-40px 0}.wp-core-ui .attachment.selected .check{display:block}.wp-core-ui .attachment.details .check,.wp-core-ui .attachment.selected .check:focus,.wp-core-ui .media-frame.mode-grid .attachment.selected .check{background-color:#0073aa;-webkit-box-shadow:0 0 0 1px #fff,0 0 0 2px #0073aa;box-shadow:0 0 0 1px #fff,0 0 0 2px #0073aa}.wp-core-ui .attachment.details .check .media-modal-icon,.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon{background-position:-21px 0}.wp-core-ui .attachment.details .check:hover .media-modal-icon,.wp-core-ui .attachment.selected .check:focus .media-modal-icon,.wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon{background-position:-60px 0}.wp-core-ui .media-frame .attachment .describe{position:relative;display:block;width:100%;margin:0;padding:8px;font-size:12px;-webkit-border-radius:0;border-radius:0}.media-frame .attachments-browser{position:relative;width:100%;height:100%;overflow:hidden}.attachments-browser .media-toolbar{right:300px;height:50px}.attachments-browser.hide-sidebar .media-toolbar{right:0}.attachments-browser .media-toolbar-primary>.media-button,.attachments-browser .media-toolbar-primary>.media-button-group,.attachments-browser .media-toolbar-secondary>.media-button,.attachments-browser .media-toolbar-secondary>.media-button-group{margin:11px 0}.attachments-browser .attachments{padding:2px 8px 8px}.attachments-browser .attachments,.attachments-browser .uploader-inline{position:absolute;top:50px;left:0;right:300px;bottom:0;overflow:auto;outline:0}.attachments-browser .uploader-inline.hidden{display:none}.attachments-browser .media-toolbar-primary{max-width:33%}.attachments-browser .media-toolbar-secondary{max-width:66%}.uploader-inline .close{background-color:transparent;border:0;cursor:pointer;height:48px;outline:0;padding:0;position:absolute;right:2px;text-align:center;top:2px;width:48px;z-index:1}.uploader-inline .close:before{font:400 30px/1 dashicons!important;color:#555d66;display:inline-block;content:"\f335";font-weight:300;margin-top:1px}.uploader-inline .close:focus{outline:#5b9dd9 solid 1px;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.attachments-browser.hide-sidebar .attachments,.attachments-browser.hide-sidebar .uploader-inline{right:0;margin-right:0}.attachments-browser .instructions{display:inline-block;margin-top:16px;line-height:18px;font-size:13px;color:#666;margin-right:.5em}.attachments-browser .no-media{padding:2em 0 0 2em}.media-progress-bar{position:relative;height:10px;width:70%;margin:10px auto;-webkit-border-radius:10px;border-radius:10px;background:#ddd;background:rgba(0,0,0,.1)}.media-progress-bar div{height:10px;min-width:20px;width:0;background:#0073aa;-webkit-border-radius:10px;border-radius:10px;-webkit-transition:width .3s;transition:width .3s}.media-uploader-status .media-progress-bar{display:none;width:100%}.uploading.media-uploader-status .media-progress-bar{display:block}.attachment-preview .media-progress-bar{position:absolute;top:50%;left:15%;width:70%;margin:-5px 0 0}.media-uploader-status{position:relative;margin:0 auto;padding-bottom:10px;max-width:400px}.uploader-inline .media-uploader-status h2,.uploader-inline .media-uploader-status h3{display:none}.media-uploader-status .upload-details{display:none;font-size:12px;color:#666}.uploading.media-uploader-status .upload-details{display:block}.media-uploader-status .upload-detail-separator{padding:0 4px}.media-uploader-status .upload-count{color:#444}.media-uploader-status .upload-dismiss-errors,.media-uploader-status .upload-errors{display:none}.errors.media-uploader-status .upload-dismiss-errors,.errors.media-uploader-status .upload-errors{display:block}.media-uploader-status .upload-dismiss-errors{text-decoration:none}.media-sidebar .media-uploader-status .upload-dismiss-errors{position:absolute;top:0;right:0;-webkit-transition:none;transition:none}.upload-errors .upload-error{padding:12px;margin-bottom:12px;background:#fff;border-left:4px solid #dc3232;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.uploader-inline .upload-errors .upload-error{background-color:#fbeaea;-webkit-box-shadow:none;box-shadow:none}.upload-errors .upload-error-filename{font-weight:600}.upload-errors .upload-error-message{display:block;padding-top:8px;word-wrap:break-word}.uploader-window{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,86,132,.9);z-index:250000;display:none;text-align:center;opacity:0;-webkit-transition:opacity 250ms;transition:opacity 250ms}.uploader-window-content{position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px dashed #fff}.uploader-window h1,.uploader-window h3{margin:-.5em 0 0;position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:40px;color:#fff;padding:0}.uploader-window .media-progress-bar{margin-top:20px;max-width:300px;background:0 0;border-color:#fff;display:none}.uploader-window .media-progress-bar div{background:#fff}.uploading .uploader-window .media-progress-bar{display:block}.media-frame .uploader-inline{margin-bottom:20px;padding:0;text-align:center}.uploader-inline-content{position:absolute;top:30%;left:0;right:0}.uploader-inline-content .upload-ui{margin:2em 0}.uploader-inline-content .post-upload-ui{margin-bottom:2em}.uploader-inline .has-upload-message .upload-ui{margin:0 0 4em}.uploader-inline h2,.uploader-inline h3{font-size:20px;line-height:28px;font-weight:400;margin:0}.uploader-inline .has-upload-message .upload-instructions{font-size:14px;color:#444;font-weight:400}.uploader-inline .drop-instructions{display:none}.supports-drag-drop .uploader-inline .drop-instructions{display:block}.uploader-inline p{font-size:12px;margin:.5em 0}.uploader-inline .media-progress-bar{display:none}.uploading.uploader-inline .media-progress-bar{display:block}.uploader-inline .browser{display:inline-block!important}.media-selection{position:absolute;top:0;left:0;right:350px;height:60px;padding:0 0 0 16px;overflow:hidden;white-space:nowrap}.media-selection .selection-info{display:inline-block;font-size:12px;height:60px;margin-right:10px;vertical-align:top}.media-selection.editing,.media-selection.empty,.media-selection.one .edit-selection{display:none}.media-selection .count{display:block;padding-top:12px;font-size:14px;line-height:20px;font-weight:600}.media-selection .attachments,.media-selection .selection-view{display:inline-block;vertical-align:top}.media-selection .button-link{float:left;padding:1px 8px;margin:1px 8px 1px -8px;line-height:16px;border-right:1px solid #ddd;color:#0073aa;text-decoration:none}.media-selection .button-link:focus,.media-selection .button-link:hover{color:#00a0d2}.media-selection .button-link:last-child{border-right:0;margin-right:0}.selection-info .clear-selection{color:#bc0b0b}.selection-info .clear-selection:focus,.selection-info .clear-selection:hover{color:red}.media-selection .attachments{height:48px;margin:6px;padding:0;overflow:hidden}.media-selection .attachment{width:40px;padding:0;margin:4px}.media-selection .attachment .thumbnail{top:0;right:0;bottom:0;left:0}.media-selection .attachment .icon{width:50%}.media-selection .attachment-preview{-webkit-box-shadow:none;box-shadow:none;background:0 0}.wp-core-ui .media-selection .attachment.details:focus,.wp-core-ui .media-selection .attachment:focus,.wp-core-ui .media-selection .selected.attachment:focus{-webkit-box-shadow:0 0 0 1px #fff,0 0 2px 3px #5b9dd9;box-shadow:0 0 0 1px #fff,0 0 2px 3px #5b9dd9}.wp-core-ui .media-selection .selected.attachment{-webkit-box-shadow:none;box-shadow:none}.wp-core-ui .media-selection .attachment.details{-webkit-box-shadow:0 0 0 1px #fff,0 0 0 3px #0073aa;box-shadow:0 0 0 1px #fff,0 0 0 3px #0073aa}.media-selection:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;width:25px;background-image:-webkit-gradient(linear,right top,left top,from(rgba(255,255,255,1)),to(rgba(255,255,255,0)));background-image:-webkit-linear-gradient(right,rgba(255,255,255,1),rgba(255,255,255,0));background-image:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0))}.media-selection .attachment .filename{display:none}.media-frame .spinner{background:url(../images/spinner.gif) no-repeat;-webkit-background-size:20px 20px;background-size:20px 20px;float:right;display:inline-block;visibility:hidden;opacity:.7;filter:alpha(opacity=70);width:20px;height:20px;margin:0;vertical-align:middle}.attachment-details.save-waiting .settings-save-status .spinner,.media-frame .embed-loading .embed-url .spinner,.media-frame .spinner.is-active{visibility:visible}.media-toolbar .spinner{margin-top:14px}.attachment-details{position:relative;overflow:auto}.attachment-details .settings-save-status{float:right;text-transform:none;z-index:10}.attachment-details .settings-save-status .spinner{margin-left:5px}.attachment-details .settings-save-status .saved{float:right;display:none}.attachment-details.save-complete .settings-save-status .saved{display:block}.attachment-info{overflow:hidden;min-height:60px;margin-bottom:16px;line-height:18px;color:#666;border-bottom:1px solid #ddd;padding-bottom:11px}.attachment-info .filename{font-weight:600;color:#444;word-wrap:break-word}.attachment-info .thumbnail{position:relative;float:left;max-width:120px;max-height:120px;margin-top:5px;margin-right:10px;margin-bottom:5px}.uploading .attachment-info .thumbnail{width:120px;height:80px;-webkit-box-shadow:inset 0 0 15px rgba(0,0,0,.1);box-shadow:inset 0 0 15px rgba(0,0,0,.1)}.uploading .attachment-info .media-progress-bar{margin-top:35px}.attachment-info .thumbnail-image:after{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);overflow:hidden}.attachment-info .thumbnail img{display:block;max-width:120px;max-height:120px;margin:0 auto}.attachment-info .details{float:left;font-size:12px;max-width:100%}.attachment-info .delete-attachment,.attachment-info .edit-attachment,.attachment-info .trash-attachment,.attachment-info .untrash-attachment{display:block;text-decoration:none;white-space:nowrap}.attachment-details.needs-refresh .attachment-info .edit-attachment{display:none}.attachment-info .edit-attachment{display:block}.media-modal .delete-attachment,.media-modal .trash-attachment,.media-modal .untrash-attachment{display:inline;padding:0;color:#bc0b0b}.media-modal .delete-attachment:focus,.media-modal .delete-attachment:hover,.media-modal .trash-attachment:focus,.media-modal .trash-attachment:hover,.media-modal .untrash-attachment:focus,.media-modal .untrash-attachment:hover{color:red}.attachment-display-settings{width:100%;float:left;overflow:hidden}.attachment-display-settings h4{margin:1.4em 0 .4em}.collection-settings{overflow:hidden}.collection-settings .setting input[type=checkbox]{float:left;margin-right:8px}.collection-settings .setting span{min-width:inherit}.media-modal .imgedit-wrap{position:static}.media-modal .imgedit-wrap .imgedit-panel-content{padding:16px;position:absolute;top:0;right:282px;bottom:0;left:0;overflow:auto}.media-modal .imgedit-wrap .imgedit-settings{background:#f3f3f3;border-left:1px solid #ddd;padding:20px 16px 16px;position:absolute;top:0;right:0;bottom:0;width:250px;overflow:auto}.media-modal .imgedit-group{background:0 0;border:none;border-bottom:1px solid #ddd;-webkit-box-shadow:none;box-shadow:none;margin:0 0 16px;padding:0 0 16px;position:relative}.media-modal .imgedit-group:last-of-type{border:none;margin:0;padding:0}.media-modal .imgedit-group-top{margin:0}.media-modal .imgedit-group-top h2,.media-modal .imgedit-group-top h2 .button-link,.media-modal .imgedit-group-top h3{display:inline-block;text-transform:uppercase;font-size:12px;color:#666;margin:3px 0 0}.embed-url,.imgedit-thumbnail-preview-caption{display:block}.media-modal .imgedit-group-top h2 .button-link,.media-modal .imgedit-group-top h2 a,.media-modal .imgedit-group-top h3 a{text-decoration:none;color:#666}.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active,.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover{border:1px solid transparent;margin:0;padding:0;background:0 0;color:#0074a2;font-size:20px;line-height:1;cursor:pointer;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-box-shadow:none;box-shadow:none}.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus{color:#0074a2;border-color:#5b9dd9;outline:0;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle{margin-top:-3px}.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle{margin-top:-2px}.media-modal .imgedit-help-toggled span.dashicons:before{content:"\f142"}.media-modal .imgedit-thumbnail-preview{margin:10px 8px 0 0}.media-modal .imgedit-wrap div.updated{margin:0 0 16px}.embed-url{position:relative;padding:16px;margin:0;z-index:250;background:#fff;font-size:18px}.media-frame .embed-url input{font-size:18px;padding:12px 14px;width:100%;min-width:200px;-webkit-box-shadow:inset 2px 2px 4px -2px rgba(0,0,0,.1);box-shadow:inset 2px 2px 4px -2px rgba(0,0,0,.1)}.media-frame .embed-url .spinner{position:absolute;top:32px;right:26px}.embed-link-settings,.embed-media-settings{position:absolute;top:70px;left:0;right:0;bottom:0;padding:16px 16px 32px;overflow:auto}.media-embed .embed-link-settings{overflow:visible}.embed-preview embed,.embed-preview iframe,.embed-preview img,.mejs-container video{max-width:100%;vertical-align:middle}.embed-preview a{display:inline-block}.embed-preview img{display:block;height:auto}.mejs-container:focus{outline:#5b9dd9 solid 1px;-webkit-box-shadow:0 0 2px 1px rgba(30,140,190,.8);box-shadow:0 0 2px 1px rgba(30,140,190,.8)}.image-details .media-modal{left:140px;right:140px}.image-details .media-frame-content,.image-details .media-frame-router,.image-details .media-frame-title{left:0}.image-details .embed-media-settings{top:0;overflow:visible;padding:0}.image-details .embed-media-settings,.image-details .embed-media-settings div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.image-details .column-settings{background:#f3f3f3;border-right:1px solid #ddd;min-height:100%;width:55%;position:absolute;top:0;left:0}.image-details .column-settings h2,.image-details .column-settings h3{margin:20px;padding-top:20px;border-top:1px solid #ddd;color:#23282d}.image-details .column-image{width:45%;position:absolute;left:55%;top:0}.image-details .image{margin:20px}.image-details .image img{max-width:100%;max-height:500px}.image-details .advanced-toggle{padding:0;color:#666;text-transform:uppercase;text-decoration:none}.image-details .advanced-toggle:active,.image-details .advanced-toggle:hover{color:#666}.image-details .advanced-toggle:after{font:400 20px/1 dashicons;speak:none;vertical-align:top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f140";display:inline-block;margin-top:-2px}.image-details .advanced-visible .advanced-toggle:after{content:"\f142"}.image-details .embed-media-settings .size{margin-bottom:4px}.image-details .custom-size span{display:block}.image-details .custom-size label{display:block;float:left}.image-details .custom-size span small{color:#555d66;font-size:inherit}.image-details .custom-size input{width:5em}.image-details .custom-size .sep{float:left;margin:26px 6px 0}.image-details .custom-size:after{content:"";display:table;clear:both}.media-embed .thumbnail{max-width:100%;max-height:200px;position:relative;float:left}.media-embed .thumbnail img{max-height:200px;display:block}.media-embed .thumbnail:after{content:"";display:block;position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden}.media-embed .setting{width:100%;margin:10px 0;float:left;display:block;clear:both}.image-details .embed-media-settings .setting{float:none;width:auto}.image-details .actions{margin:10px 0}.image-details .hidden{display:none}.media-embed .setting input[type=text],.media-embed .setting textarea{display:block;width:100%;max-width:400px;margin:1px 0}.image-details .embed-media-settings .setting input[type=text],.image-details .embed-media-settings .setting textarea{max-width:inherit;width:70%}.image-details .embed-media-settings .custom-size,.image-details .embed-media-settings .link-target,.image-details .embed-media-settings .setting input.link-to-custom{margin-left:27%;width:70%}.image-details .embed-media-settings .link-target{margin-top:24px}.media-embed .setting input.hidden,.media-embed .setting textarea.hidden{display:none}.media-embed .setting span{display:block;width:200px;font-size:13px;line-height:24px;color:#666}.image-details .embed-media-settings .setting span{float:left;width:25%;text-align:right;margin:8px 1% 0;line-height:1.1}.media-embed .setting .button-group{margin:2px 0}.media-embed-sidebar{position:absolute;top:0;left:440px}.advanced-section,.link-settings{margin-top:10px}.wp-editor-wrap .uploader-editor{background:rgba(150,150,150,.9);position:absolute;top:0;left:0;width:100%;height:100%;z-index:99998;display:none;text-align:center}.wp-editor-wrap .uploader-editor-content{border:1px dashed #fff;position:absolute;top:10px;left:10px;right:10px;bottom:10px}.wp-editor-wrap .uploader-editor .uploader-editor-title{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:3em;line-height:1.3;font-weight:600;color:#fff;padding:0;margin:0;display:none}.wp-editor-wrap .uploader-editor.droppable{background:rgba(0,86,132,.9)}.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title{display:block}.ie7 .media-frame .attachments-browser{position:static}.ie7 .media-frame .embed-url input{margin-top:4px;width:90%}.ie7 .compat-item{width:99%}.ie7 .attachment-display-settings{width:auto}.ie7 .attachment-preview,.ie7 .attachment-preview .thumbnail{width:120px;height:120px}.ie7 .media-frame .attachment .describe{width:102px}.ie7 .media-sidebar .setting select{max-width:55%}.ie7 .media-sidebar .setting input[type=tel],.ie7 .media-sidebar .setting input[type=text],.ie7 .media-sidebar .setting input[type=password],.ie7 .media-sidebar .setting input[type=number],.ie7 .media-sidebar .setting input[type=search],.ie7 .media-sidebar .setting input[type=email],.ie7 .media-sidebar .setting input[type=url],.ie7 .media-sidebar .setting textarea{width:55%}.ie7 .media-sidebar .setting .link-to-custom{float:left}.rtl .media-frame,.rtl .media-frame .search,.rtl .media-frame input[type=tel],.rtl .media-frame input[type=text],.rtl .media-frame input[type=password],.rtl .media-frame input[type=number],.rtl .media-frame input[type=search],.rtl .media-frame input[type=email],.rtl .media-frame input[type=url],.rtl .media-frame select,.rtl .media-frame textarea,.rtl .media-modal{font-family:Tahoma,sans-serif}:lang(he-il) .rtl .media-frame,:lang(he-il) .rtl .media-frame .search,:lang(he-il) .rtl .media-frame input[type=text],:lang(he-il) .rtl .media-frame input[type=password],:lang(he-il) .rtl .media-frame input[type=number],:lang(he-il) .rtl .media-frame input[type=search],:lang(he-il) .rtl .media-frame input[type=email],:lang(he-il) .rtl .media-frame input[type=url],:lang(he-il) .rtl .media-frame select,:lang(he-il) .rtl .media-frame textarea,:lang(he-il) .rtl .media-modal{font-family:Arial,sans-serif}@media only screen and (max-width:900px){.media-frame:not(.hide-menu) .media-frame-content,.media-frame:not(.hide-menu) .media-frame-router,.media-frame:not(.hide-menu) .media-frame-title,.media-frame:not(.hide-menu) .media-frame-toolbar{left:0}.media-frame:not(.hide-menu) .media-frame-menu{position:static;width:0}.media-frame:not(.hide-menu) .media-menu{width:auto;max-width:80%;overflow:auto;z-index:2000;top:50px;left:-300px;right:auto;bottom:auto;padding:5px 0;border:1px solid #ccc}.media-frame:not(.hide-menu) .media-menu.visible{left:0}.media-frame:not(.hide-menu) .media-menu>a{padding:12px 16px;font-size:16px}.media-frame:not(.hide-menu) .media-menu>a.active{display:none}.media-frame:not(.hide-menu) .media-menu .separator{margin:5px 10px}.media-frame:not(.hide-menu) .media-frame-title{left:0}.media-frame:not(.hide-menu) .media-frame-title .dashicons{display:inline-block;line-height:50px}.media-frame:not(.hide-menu) .media-frame-title h1{color:#0073aa;line-height:3;font-size:18px;float:left;cursor:pointer}.media-sidebar{width:230px}.attachments-browser .attachments,.attachments-browser .media-toolbar,.attachments-browser .uploader-inline{right:262px}.attachment-details .setting,.media-sidebar .setting{margin:6px 0}.attachment-details .setting input,.attachment-details .setting span,.attachment-details .setting textarea,.compat-item label span,.media-sidebar .setting input,.media-sidebar .setting span,.media-sidebar .setting textarea{float:none}.attachment-details .setting span,.compat-item label span,.media-sidebar .setting span{text-align:inherit;min-height:16px;margin:0;padding:8px 2px 0}.attachment-details .setting .value,.media-sidebar .setting .value{float:none;width:auto}.attachment-details .setting input[type=tel],.attachment-details .setting input[type=text],.attachment-details .setting input[type=password],.attachment-details .setting input[type=number],.attachment-details .setting input[type=search],.attachment-details .setting input[type=email],.attachment-details .setting input[type=url],.attachment-details .setting select,.attachment-details .setting textarea,.media-sidebar .setting input[type=tel],.media-sidebar .setting input[type=text],.media-sidebar .setting input[type=password],.media-sidebar .setting input[type=number],.media-sidebar .setting input[type=search],.media-sidebar .setting input[type=email],.media-sidebar .setting input[type=url],.media-sidebar .setting select,.media-sidebar .setting textarea{float:none;width:98%;max-width:none;height:auto}.attachment-details .setting select.columns,.media-sidebar .setting select.columns{width:auto}.media-frame .search,.media-frame input,.media-frame textarea{padding:3px 6px}.image-details .column-image{width:30%;left:70%}.image-details .column-settings{width:70%}.image-details .media-modal{left:30px;right:30px}.image-details .embed-media-settings .setting{margin:20px}.image-details .embed-media-settings .setting span{float:none;text-align:left;width:100%;margin-bottom:4px}.image-details .embed-media-settings .setting input.link-to-custom,.image-details .embed-media-settings .setting input[type=text],.image-details .embed-media-settings .setting textarea{width:100%;margin-left:0}.image-details .embed-media-settings .custom-size{margin-left:20px}.collection-settings .setting input[type=checkbox]{margin-top:0}.media-selection{min-width:120px}.media-selection:after{background:0 0}.media-selection .attachments{display:none}.media-modal .attachments-browser .media-toolbar .search{max-width:100%;height:auto;float:right}.media-modal .attachments-browser .media-toolbar .attachment-filters{height:auto}.media-modal .attachments-browser .media-toolbar .spinner{margin:14px 2px 0}.media-frame input[type=text],.media-frame input[type=password],.media-frame input[type=number],.media-frame input[type=search],.media-frame input[type=email],.media-frame input[type=url],.media-frame select,.media-frame textarea{font-size:16px}}@media only screen and (max-width:640px),screen and (max-height:400px){.image-details .media-modal,.media-modal{position:fixed;top:0;left:0;right:0;bottom:0}.media-modal-backdrop{position:fixed}.media-sidebar{z-index:1900;max-width:70%;bottom:120%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-bottom:0}.media-sidebar.visible{bottom:0}.attachments-browser .attachments,.attachments-browser .media-toolbar,.attachments-browser .uploader-inline{right:0}.image-details .media-frame-title{display:block;top:0;font-size:14px}.image-details .column-image,.image-details .column-settings{width:100%;position:relative;left:0}.image-details .column-settings{padding:4px 0}.media-frame-content .media-toolbar .instructions{display:none}}@media screen and (max-height:400px){.media-menu{padding:0}.media-frame-router{top:44px}.media-frame-content{top:78px}.attachments-browser .attachments{top:40px}.embed-link-settings{overflow:visible}}@media only screen and (max-width:480px){.media-modal-close{top:-5px}.media-modal .media-frame-title{height:40px}.wp-core-ui.wp-customizer .media-button{margin-top:13px}.media-frame:not(.hide-menu) .media-frame-title h1,.media-modal .media-frame-title h1{font-size:18px;line-height:40px}.media-frame:not(.hide-menu) .media-frame-title .dashicons{line-height:40px}.media-frame-router,.media-frame:not(.hide-menu) .media-menu{top:40px}.media-frame-content{top:74px}.media-frame.hide-router .media-frame-content{top:40px}}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:120dpi){.wp-core-ui .media-modal-icon{background-image:url(../images/uploader-icons-2x.png);-webkit-background-size:134px 15px;background-size:134px 15px}.media-frame .spinner{background-image:url(../images/spinner-2x.gif)}}.media-frame-content[data-columns="1"] .attachment{width:100%}.media-frame-content[data-columns="2"] .attachment{width:50%}.media-frame-content[data-columns="3"] .attachment{width:33.33%}.media-frame-content[data-columns="4"] .attachment{width:25%}.media-frame-content[data-columns="5"] .attachment{width:20%}.media-frame-content[data-columns="6"] .attachment{width:16.66%}.media-frame-content[data-columns="7"] .attachment{width:14.28%}.media-frame-content[data-columns="8"] .attachment{width:12.5%}.media-frame-content[data-columns="9"] .attachment{width:11.11%}.media-frame-content[data-columns="10"] .attachment{width:10%}.media-frame-content[data-columns="11"] .attachment{width:9.09%}.media-frame-content[data-columns="12"] .attachment{width:8.33%} |