Media: Update admin image editor design.
Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values.
A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.
Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.
Built from https://develop.svn.wordpress.org/trunk@55919
git-svn-id: http://core.svn.wordpress.org/trunk@55431 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-06-14 16:42:27 -04:00
|
|
|
#wpwrap{height:auto;min-height:100%;width:100%;position:relative;-webkit-font-smoothing:subpixel-antialiased}#wpcontent{height:100%;padding-right:20px}#wpcontent,#wpfooter{margin-right:160px}.folded #wpcontent,.folded #wpfooter{margin-right:36px}#wpbody-content{padding-bottom:65px;float:right;width:100%;overflow:visible}.inner-sidebar{float:left;clear:left;display:none;width:281px;position:relative}.columns-2 .inner-sidebar{margin-left:auto;width:286px;display:block}.columns-2 .inner-sidebar #side-sortables,.inner-sidebar #side-sortables{min-height:300px;width:280px;padding:0}.has-right-sidebar .inner-sidebar{display:block}.has-right-sidebar #post-body{float:right;clear:right;width:100%;margin-left:-2000px}.has-right-sidebar #post-body-content{margin-left:300px;float:none;width:auto}#col-left{float:right;width:35%}#col-right{float:left;width:65%}#col-left .col-wrap{padding:0 0 0 6px}#col-right .col-wrap{padding:0 6px 0 0}.alignleft{float:right}.alignright{float:left}.textleft{text-align:right}.textright{text-align:left}.clear{clear:both}.wp-clearfix:after{content:"";display:table;clear:both}.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.button .screen-reader-text{height:auto}.screen-reader-shortcut{position:absolute;top:-1000em;right:6px;height:auto;width:auto;display:block;font-size:14px;font-weight:600;padding:15px 23px 14px;background:#f0f0f1;color:#2271b1;z-index:100000;line-height:normal}.screen-reader-shortcut:focus{top:-25px;color:#2271b1;box-shadow:0 0 2px 2px rgba(0,0,0,.6);text-decoration:none;outline:2px solid transparent;outline-offset:-2px}.hidden,.js .closed .inside,.js .hide-if-js,.js .wp-core-ui .hide-if-js,.js.wp-core-ui .hide-if-js,.no-js .hide-if-no-js,.no-js .wp-core-ui .hide-if-no-js,.no-js.wp-core-ui .hide-if-no-js{display:none}#menu-management .menu-edit,#menu-settings-column .accordion-container,.comment-ays,.feature-filter,.manage-menus,.menu-item-handle,.popular-tags,.stuffbox,.widget-inside,.widget-top,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{border:1px solid #c3c4c7;box-shadow:0 1px 1px rgba(0,0,0,.04)}.comment-ays,.feature-filter,.popular-tags,.stuffbox,.widgets-holder-wrap,.wp-editor-container,p.popular-tags,table.widefat{background:#fff}body,html{height:100%;margin:0;padding:0}body{background:#f0f0f1;color:#3c434a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.4em;min-width:600px}body.iframe{min-width:0;padding-top:1px}body.modal-open{overflow:hidden}body.mobile.modal-open #wpwrap{overflow:hidden;position:fixed;height:100%}iframe,img{border:0}td{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}a{color:#2271b1;transition-property:border,background,color;transition-duration:.05s;transition-timing-function:ease-in-out}a,div{outline:0}a:active,a:hover{color:#135e96}.wp-person a:focus .gravatar,a:focus,a:focus .media-icon img,a:focus .plugin-icon{color:#043959;box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);outline:1px solid transparent}#adminmenu a:focus{box-shadow:none;outline:1px solid transparent;outline-offset:-1px}.screen-reader-text:focus{box-shadow:none;outline:0}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}.wp-die-message,p{font-size:13px;line-height:1.5;margin:1em 0}blockquote{margin:1em}dd,li{margin-bottom:6px}h1,h2,h3,h4,h5,h6{display:block;font-weight:600}h1{color:#1d2327;font-size:2em;margin:.67em 0}h2,h3{color:#1d2327;font-size:1.3em;margin:1em 0}.update-core-php h2{margin-top:4em}.update-messages h2,.update-php h2,h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}ol,ul{padding:0}ul{list-style:none}ol{list-style-type:decimal;margin-right:2em}ul.ul-disc{list-style:disc outside}ul.ul-square
|
Help/About: Improve Dashboard screen options behavior on small screens.
This changeset improve Dashboard screen options by stacking them vertically on small screens.
Props dhrumilk, prashantbhivsane, marybaum, dhruvishah2203, ababir, mukesh27, chiragrathod103, oglekler, tb1909, jahidcse, audrasjb.
Fixes #57977.
Built from https://develop.svn.wordpress.org/trunk@55984
git-svn-id: http://core.svn.wordpress.org/trunk@55496 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-06-22 03:54:23 -04:00
|
|
|
*/.ui-draggable-handle,.ui-sortable-handle{touch-action:none}.accordion-section{border-bottom:1px solid #dcdcde;margin:0}.accordion-section.open .accordion-section-content,.no-js .accordion-section .accordion-section-content{display:block}.accordion-section.open:hover{border-bottom-color:#dcdcde}.accordion-section-content{display:none;padding:10px 20px 15px;overflow:hidden;background:#fff}.accordion-section-title{margin:0;padding:12px 15px 15px;position:relative;border-right:1px solid #dcdcde;border-left:1px solid #dcdcde;-webkit-user-select:none;user-select:none}.js .accordion-section-title{cursor:pointer}.js .accordion-section-title:after{position:absolute;top:12px;left:10px;z-index:1}.accordion-section-title:focus{outline:1px solid transparent}.accordion-section-title:focus:after,.accordion-section-title:hover:after{border-color:#a7aaad transparent;outline:1px solid transparent}.cannot-expand .accordion-section-title{cursor:auto}.cannot-expand .accordion-section-title:after{display:none}.control-section .accordion-section-title,.customize-pane-child .accordion-section-title{border-right:none;border-left:none;padding:10px 14px 11px 10px;line-height:1.55;background:#fff}.control-section .accordion-section-title:after,.customize-pane-child .accordion-section-title:after{top:calc(50% - 10px)}.js .control-section .accordion-section-title:focus,.js .control-section .accordion-section-title:hover,.js .control-section.open .accordion-section-title,.js .control-section:hover .accordion-section-title{color:#1d2327;background:#f6f7f7}.control-section.open .accordion-section-title{border-bottom:1px solid #dcdcde}.network-admin .edit-site-actions{margin-top:0}.my-sites{display:block;overflow:auto;zoom:1}.my-sites li{display:block;padding:8px 3%;min-height:130px;margin:0}@media only screen and (max-width:599px){.my-sites li{min-height:0}}@media only screen and (min-width:600px){.my-sites.striped li{background-color:#fff;position:relative}.my-sites.striped li:after{content:"";width:1px;height:100%;position:absolute;top:0;left:0;background:#c3c4c7}}@media only screen and (min-width:600px) and (max-width:699px){.my-sites li{float:right;width:44%}.my-sites.striped li{background-color:#fff}.my-sites.striped li:nth-of-type(2n+1){clear:right}.my-sites.striped li:nth-of-type(2n+2):after{content:none}.my-sites li:nth-of-type(4n+1),.my-sites li:nth-of-type(4n+2){background-color:#f6f7f7}}@media only screen and (min-width:700px) and (max-width:1199px){.my-sites li{float:right;width:27.333333%;background-color:#fff}.my-sites.striped li:nth-of-type(3n+3):after{content:none}.my-sites li:nth-of-type(6n+1),.my-sites li:nth-of-type(6n+2),.my-sites li:nth-of-type(6n+3){background-color:#f6f7f7}}@media only screen and (min-width:1200px) and (max-width:1399px){.my-sites li{float:right;width:21%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(4n+1){clear:right}.my-sites.striped li:nth-of-type(4n+4):after{content:none}.my-sites li:nth-of-type(8n+1),.my-sites li:nth-of-type(8n+2),.my-sites li:nth-of-type(8n+3),.my-sites li:nth-of-type(8n+4){background-color:#f6f7f7}}@media only screen and (min-width:1400px) and (max-width:1599px){.my-sites li{float:right;width:16%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(5n+1){clear:right}.my-sites.striped li:nth-of-type(5n+5):after{content:none}.my-sites li:nth-of-type(10n+1),.my-sites li:nth-of-type(10n+2),.my-sites li:nth-of-type(10n+3),.my-sites li:nth-of-type(10n+4),.my-sites li:nth-of-type(10n+5){background-color:#f6f7f7}}@media only screen and (min-width:1600px){.my-sites li{float:right;width:12.666666%;padding:8px 2%;background-color:#fff}.my-sites.striped li:nth-of-type(6n+1){clear:right}.my-sites.striped li:nth-of-type(6n+6):after{content:none}.my-sites li:nth-of-type(12n+1),.my-sites li:nth-of-type(12n+2),.my-sites li:nth-of-type(12n+3),.my-sites li:nth-of-type(12n+4),.my-sites li:nth-of-type(12n+5),.my-sites li:nth-of-type(12n+6){background-color:#f6f7f7}}.my-sites li a{text-decoration:none}@media print,(-webkit-min-device-pixel-ratio:1.25),(min-resolution:
|
