WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
WordPress/wp-includes/css/media-views.css

2903 lines
55 KiB
CSS
Raw Normal View History

Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
/**
* Base Styles
*/
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
.media-modal * {
Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes. We'll be using it for two distinct tasks: * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build. * Color CSS files will receive prefixes when they are built. This commit: * Adds prefixes we were missing to core CSS. * Removes prefixes that we no longer need from core CSS. * Removes all prefixes from colors CSS. props ocean90. fixes #27078. Built from https://develop.svn.wordpress.org/trunk@27174 git-svn-id: http://core.svn.wordpress.org/trunk@27038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-13 03:30:17 -05:00
box-sizing: content-box;
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
}
Media: Reset box-sizing for input elements in the entire media modal. See [29727]. Props tyxla for initial patch. Fixes #34556. Built from https://develop.svn.wordpress.org/trunk@35699 git-svn-id: http://core.svn.wordpress.org/trunk@35663 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-18 18:36:28 -05:00
.media-modal input,
.media-modal select,
.media-modal textarea {
box-sizing: border-box;
Media Frames: Set the box-sizing CSS property to border-box for checkboxes and radio buttons. props mlteal. see #29493. Built from https://develop.svn.wordpress.org/trunk@29727 git-svn-id: http://core.svn.wordpress.org/trunk@29501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-10 14:09:16 -04:00
}
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
.media-modal,
.media-frame {
System fonts: Don't quote single-word font names, per our coding standards. props ocean90, netweb. see #36753. Built from https://develop.svn.wordpress.org/trunk@38152 git-svn-id: http://core.svn.wordpress.org/trunk@38093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-07-26 12:39:30 -04:00
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
font-size: 12px;
Modals: Significantly improve the touch scrolling experience. This particularly fixes the attachment and plugin details modals, but also improves other modals such as wpLink and interim login. props iseulde. fixes #31609, #31611. see #31610, #31612. Built from https://develop.svn.wordpress.org/trunk@32073 git-svn-id: http://core.svn.wordpress.org/trunk@32052 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-07 23:19:28 -04:00
-webkit-overflow-scrolling: touch;
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-modal legend {
padding: 0;
font-size: 13px;
}
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
.media-modal label {
font-size: 13px;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-modal .legend-inline {
position: absolute;
transform: translate(-100%, 50%);
margin-left: -1%;
line-height: 1.2;
}
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame a {
Media: Account for the most obvious and common style conflicts that may occur when the media modal is loaded on the frontend. Tested primarily with P2. props lessbloat, helenyhou. fixes #22752. git-svn-id: http://core.svn.wordpress.org/trunk@23077 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 14:15:40 -05:00
border-bottom: 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
color: #2271b1;
Media: Update colors to match the times. This bikeshed is a real nice blue. props afercia. fixes #34244. see #34388. Built from https://develop.svn.wordpress.org/trunk@35330 git-svn-id: http://core.svn.wordpress.org/trunk@35296 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-21 12:18:26 -04:00
}
.media-frame a:hover,
.media-frame a:active {
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
color: #135e96;
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
}
Media: Update colors to match the times. This bikeshed is a real nice blue. props afercia. fixes #34244. see #34388. Built from https://develop.svn.wordpress.org/trunk@35330 git-svn-id: http://core.svn.wordpress.org/trunk@35296 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-21 12:18:26 -04:00
.media-frame a:focus {
box-shadow:
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
0 0 0 1px #4f94d4,
0 0 2px 1px rgba(79, 148, 212, 0.8);
color: #043959;
Accessibility: Add focus styles for Windows High Contrast mode. Introduces in core new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline as already explored in the Block Editor. This first part covers some of the main user interface controls like buttons, links, and media views elements. Other parts will be addressed in the next future. Fixes #41286. Built from https://develop.svn.wordpress.org/trunk@44544 git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 11:47:50 -05:00
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
Media: Add base form element CSS. props lessbloat. see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22780 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:00:18 -05:00
}
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame a.button {
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
color: #2c3338;
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
}
.media-frame a.button:hover {
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
color: #1d2327;
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
}
.media-frame a.button-primary,
.media-frame a.button-primary:hover {
color: #fff;
}
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
.media-frame input,
.media-frame textarea {
padding: 6px 8px;
}
.media-frame select,
.wp-admin .media-frame select {
Administration: Standardize form control height and alignment across the admin. This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3. Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh. Fixes #48420. Built from https://develop.svn.wordpress.org/trunk@46866 git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
min-height: 30px;
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
vertical-align: middle;
}
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame input[type="text"],
.media-frame input[type="password"],
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
.media-frame input[type="color"],
.media-frame input[type="date"],
.media-frame input[type="datetime"],
.media-frame input[type="datetime-local"],
.media-frame input[type="email"],
.media-frame input[type="month"],
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame input[type="number"],
.media-frame input[type="search"],
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
.media-frame input[type="tel"],
.media-frame input[type="time"],
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame input[type="url"],
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
.media-frame input[type="week"],
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame textarea,
.media-frame select {
Accessibility: Improve and modernize user interface controls for better contrast. Fourth part: Media Views form controls. Props anevins, audrasjb, nrqsnchzm, kjellr, karmatosed. Fixes #47150. Built from https://develop.svn.wordpress.org/trunk@46244 git-svn-id: http://core.svn.wordpress.org/trunk@46056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 11:49:57 -04:00
box-shadow: 0 0 0 transparent;
border-radius: 4px;
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
border: 1px solid #8c8f94;
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
background-color: #fff;
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
color: #2c3338;
System fonts: Don't quote single-word font names, per our coding standards. props ocean90, netweb. see #36753. Built from https://develop.svn.wordpress.org/trunk@38152 git-svn-id: http://core.svn.wordpress.org/trunk@38093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-07-26 12:39:30 -04:00
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
font-size: 13px;
}
.media-frame input[type="text"],
.media-frame input[type="password"],
.media-frame input[type="date"],
.media-frame input[type="datetime"],
.media-frame input[type="datetime-local"],
.media-frame input[type="email"],
.media-frame input[type="month"],
.media-frame input[type="number"],
.media-frame input[type="search"],
.media-frame input[type="tel"],
.media-frame input[type="time"],
.media-frame input[type="url"],
.media-frame input[type="week"] {
padding: 0 8px;
/* inherits font size 13px */
line-height: 2.15384615; /* 28px */
Media: Add base form element CSS. props lessbloat. see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22780 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:00:18 -05:00
}
Administration: Standardize form control height and alignment across the admin. This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3. Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh. Fixes #48420. Built from https://develop.svn.wordpress.org/trunk@46866 git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 15:26:03 -05:00
/* Search field in the Media Library toolbar */
.media-frame.mode-grid .wp-filter input[type="search"] {
font-size: 14px;
line-height: 2;
}
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
.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 textarea:focus,
.media-frame select:focus {
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
border-color: #3582c4;
box-shadow: 0 0 0 1px #3582c4;
Accessibility: Improve and modernize user interface controls for better contrast. Fourth part: Media Views form controls. Props anevins, audrasjb, nrqsnchzm, kjellr, karmatosed. Fixes #47150. Built from https://develop.svn.wordpress.org/trunk@46244 git-svn-id: http://core.svn.wordpress.org/trunk@46056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 11:49:57 -04:00
outline: 2px solid transparent;
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
}
Only show Delete in media modal if the user can delete. Props nacin, koopersmith fixes #22711 git-svn-id: http://core.svn.wordpress.org/trunk@23032 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:33:51 -05:00
.media-frame input:disabled,
.media-frame textarea:disabled,
.media-frame input[readonly],
.media-frame textarea[readonly] {
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
background-color: #f0f0f1;
Only show Delete in media modal if the user can delete. Props nacin, koopersmith fixes #22711 git-svn-id: http://core.svn.wordpress.org/trunk@23032 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:33:51 -05:00
}
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame input[type="search"] {
Media: Add base form element CSS. props lessbloat. see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22780 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:00:18 -05:00
-webkit-appearance: textfield;
}
Accessibility: Improve the color contrast ratio for the input placeholders. Also, cleans up a bit the CSS removing rules for elements that don't use placeholders any more. Fixes #35777. Built from https://develop.svn.wordpress.org/trunk@36619 git-svn-id: http://core.svn.wordpress.org/trunk@36586 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-02-22 18:29:26 -05:00
.media-frame ::-webkit-input-placeholder {
Accessibility: Administration: Use a darker gray color for various admin UI items. This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio. Follow-up to [50025], [50525]. Props sabernhardt, ryelle. Merges [50571] to the 5.7 branch. Fixes #52760. Built from https://develop.svn.wordpress.org/branches/5.7@50578 git-svn-id: http://core.svn.wordpress.org/branches/5.7@50191 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-03-25 10:44:06 -04:00
color: #646970;
Accessibility: Improve the color contrast ratio for the input placeholders. Also, cleans up a bit the CSS removing rules for elements that don't use placeholders any more. Fixes #35777. Built from https://develop.svn.wordpress.org/trunk@36619 git-svn-id: http://core.svn.wordpress.org/trunk@36586 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-02-22 18:29:26 -05:00
}
.media-frame ::-moz-placeholder {
Accessibility: Administration: Use a darker gray color for various admin UI items. This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio. Follow-up to [50025], [50525]. Props sabernhardt, ryelle. Merges [50571] to the 5.7 branch. Fixes #52760. Built from https://develop.svn.wordpress.org/branches/5.7@50578 git-svn-id: http://core.svn.wordpress.org/branches/5.7@50191 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-03-25 10:44:06 -04:00
color: #646970;
Accessibility: Improve the color contrast ratio for the input placeholders. Also, cleans up a bit the CSS removing rules for elements that don't use placeholders any more. Fixes #35777. Built from https://develop.svn.wordpress.org/trunk@36619 git-svn-id: http://core.svn.wordpress.org/trunk@36586 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-02-22 18:29:26 -05:00
opacity: 1;
}
.media-frame :-ms-input-placeholder {
Accessibility: Administration: Use a darker gray color for various admin UI items. This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio. Follow-up to [50025], [50525]. Props sabernhardt, ryelle. Merges [50571] to the 5.7 branch. Fixes #52760. Built from https://develop.svn.wordpress.org/branches/5.7@50578 git-svn-id: http://core.svn.wordpress.org/branches/5.7@50191 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-03-25 10:44:06 -04:00
color: #646970;
In Firefox, style placeholder text a dark gray since the browser doesn't do it for us. props helenyhou, fixes #22689. git-svn-id: http://core.svn.wordpress.org/trunk@22986 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 00:17:23 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
/*
* In some cases there's the need of higher specificity,
* for example higher than `.media-embed .setting`.
*/
.media-frame .hidden,
.media-frame .setting.hidden {
Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409. Built from https://develop.svn.wordpress.org/trunk@27050 git-svn-id: http://core.svn.wordpress.org/trunk@26924 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-28 16:17:12 -05:00
display: none;
}
Sync our jQuery UI styles with jQuery UI 1.11.2 CSS. Removes also our own implementations for touch-action compatibility for IE Touch. props georgestephanis, ocean90. fixes #26843. Built from https://develop.svn.wordpress.org/trunk@30343 git-svn-id: http://core.svn.wordpress.org/trunk@30342 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-11-14 14:28:22 -05:00
/*!
Update jQuery UI to 1.11.4. Changelog: * https://jqueryui.com/changelog/1.11.4/ * https://github.com/jquery/jquery-ui/compare/1.11.3...1.11.4 props scott.gonzalez for arranging this release. fixes #31597, #30998. Built from https://develop.svn.wordpress.org/trunk@31716 git-svn-id: http://core.svn.wordpress.org/trunk@31697 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-03-11 11:12:27 -04:00
* jQuery UI Draggable/Sortable 1.11.4
Sync our jQuery UI styles with jQuery UI 1.11.2 CSS. Removes also our own implementations for touch-action compatibility for IE Touch. props georgestephanis, ocean90. fixes #26843. Built from https://develop.svn.wordpress.org/trunk@30343 git-svn-id: http://core.svn.wordpress.org/trunk@30342 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-11-14 14:28:22 -05:00
* http://jqueryui.com
*
Update jQuery UI to 1.11.3. Changelog: * http://jqueryui.com/changelog/1.11.3/ * https://github.com/jquery/jquery-ui/compare/1.11.2...1.11.3 fixes #31473. Built from https://develop.svn.wordpress.org/trunk@31569 git-svn-id: http://core.svn.wordpress.org/trunk@31550 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-02-27 05:21:26 -05:00
* Copyright jQuery Foundation and other contributors
Sync our jQuery UI styles with jQuery UI 1.11.2 CSS. Removes also our own implementations for touch-action compatibility for IE Touch. props georgestephanis, ocean90. fixes #26843. Built from https://develop.svn.wordpress.org/trunk@30343 git-svn-id: http://core.svn.wordpress.org/trunk@30342 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-11-14 14:28:22 -05:00
* Released under the MIT license.
* http://jquery.org/license
*/
.ui-draggable-handle,
.ui-sortable-handle {
Update jQuery UI to 1.11.3. Changelog: * http://jqueryui.com/changelog/1.11.3/ * https://github.com/jquery/jquery-ui/compare/1.11.2...1.11.3 fixes #31473. Built from https://develop.svn.wordpress.org/trunk@31569 git-svn-id: http://core.svn.wordpress.org/trunk@31550 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-02-27 05:21:26 -05:00
touch-action: none;
Fix dragging in IE10 on touch devices. Props georgestephanis, koopersmith fixes #22583 git-svn-id: http://core.svn.wordpress.org/trunk@22866 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:00:00 -05:00
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
/**
* Modal
*/
.media-modal {
position: fixed;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
Media: Introduce wp.media.editor.open(editor_id) and leverage it in distraction-free writing (fullscreen). props azaozz, koopersmith. fixes #22541. git-svn-id: http://core.svn.wordpress.org/trunk@22875 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 14:09:00 -05:00
z-index: 160000;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Allow wp_enqueue_media() to "just work" in a customizer control. props westonruter. fixes #25618. Built from https://develop.svn.wordpress.org/trunk@26589 git-svn-id: http://core.svn.wordpress.org/trunk@26479 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-03 15:54:11 -05:00
.wp-customizer .media-modal {
z-index: 560000;
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
.media-modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
Minimum heights for the media modal to prevent it from scrunching up on tiny devices. (Panning is better.) props helenyhou. fixes #22747. git-svn-id: http://core.svn.wordpress.org/trunk@23052 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 19:40:13 -05:00
min-height: 360px;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
background: #000;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
opacity: 0.7;
Media: Introduce wp.media.editor.open(editor_id) and leverage it in distraction-free writing (fullscreen). props azaozz, koopersmith. fixes #22541. git-svn-id: http://core.svn.wordpress.org/trunk@22875 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 14:09:00 -05:00
z-index: 159900;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Allow wp_enqueue_media() to "just work" in a customizer control. props westonruter. fixes #25618. Built from https://develop.svn.wordpress.org/trunk@26589 git-svn-id: http://core.svn.wordpress.org/trunk@26479 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-03 15:54:11 -05:00
.wp-customizer .media-modal-backdrop {
z-index: 559900;
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
.media-modal-close {
Responsive and RTL css improvements or the media modal. Props ocean90, koopersmith see #22615 git-svn-id: http://core.svn.wordpress.org/trunk@22960 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 21:53:53 -05:00
position: absolute;
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
top: 0;
right: 0;
width: 50px;
height: 50px;
Administration: Fix minor misalignments caused by the `button-link` CSS class. After [40059] the CSS class `button-link` uses `text-align: left` by default. This change now requires to limit as much as possible the use of `button-link` to controls that should really look like links and to explicitly set `text-align: center` in a few other cases. Fixes #39983. Built from https://develop.svn.wordpress.org/trunk@40358 git-svn-id: http://core.svn.wordpress.org/trunk@40265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 12:51:45 -04:00
margin: 0;
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
padding: 0;
Administration: Fix minor misalignments caused by the `button-link` CSS class. After [40059] the CSS class `button-link` uses `text-align: left` by default. This change now requires to limit as much as possible the use of `button-link` to controls that should really look like links and to explicitly set `text-align: center` in a few other cases. Fixes #39983. Built from https://develop.svn.wordpress.org/trunk@40358 git-svn-id: http://core.svn.wordpress.org/trunk@40265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 12:51:45 -04:00
border: 1px solid transparent;
background: 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
color: #646970;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
z-index: 1000;
Administration: Fix minor misalignments caused by the `button-link` CSS class. After [40059] the CSS class `button-link` uses `text-align: left` by default. This change now requires to limit as much as possible the use of `button-link` to controls that should really look like links and to explicitly set `text-align: center` in a few other cases. Fixes #39983. Built from https://develop.svn.wordpress.org/trunk@40358 git-svn-id: http://core.svn.wordpress.org/trunk@40265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 12:51:45 -04:00
cursor: pointer;
outline: none;
Standardize transition-animations on modal close/arrow buttons. props celloexpressions. fixes #29021. Built from https://develop.svn.wordpress.org/trunk@29365 git-svn-id: http://core.svn.wordpress.org/trunk@29141 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-02 18:02:19 -04:00
transition: color .1s ease-in-out, background .1s ease-in-out;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
Administration: Fix minor misalignments caused by the `button-link` CSS class. After [40059] the CSS class `button-link` uses `text-align: left` by default. This change now requires to limit as much as possible the use of `button-link` to controls that should really look like links and to explicitly set `text-align: center` in a few other cases. Fixes #39983. Built from https://develop.svn.wordpress.org/trunk@40358 git-svn-id: http://core.svn.wordpress.org/trunk@40265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 12:51:45 -04:00
.media-modal-close:hover,
.media-modal-close:active {
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
color: #135e96;
Buttons: Improve the `.button-link` CSS class for link-like buttons. Updates `.button-link` adding color and underline to make link-like buttons look like links by default. Introduces `.button-link-delete` as a modifier, stackable CSS class for red button-links. Props Cheffheid, afercia. See #34242. Fixes #35126. Built from https://develop.svn.wordpress.org/trunk@40052 git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 11:47:44 -05:00
}
Administration: Fix minor misalignments caused by the `button-link` CSS class. After [40059] the CSS class `button-link` uses `text-align: left` by default. This change now requires to limit as much as possible the use of `button-link` to controls that should really look like links and to explicitly set `text-align: center` in a few other cases. Fixes #39983. Built from https://develop.svn.wordpress.org/trunk@40358 git-svn-id: http://core.svn.wordpress.org/trunk@40265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 12:51:45 -04:00
.media-modal-close:focus {
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
color: #135e96;
border-color: #4f94d4;
box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
Accessibility: Add focus styles for Windows High Contrast mode. Introduces in core new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline as already explored in the Block Editor. This first part covers some of the main user interface controls like buttons, links, and media views elements. Other parts will be addressed in the next future. Fixes #41286. Built from https://develop.svn.wordpress.org/trunk@44544 git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 11:47:50 -05:00
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
Align and unify (most) modal and customizer icons. fixes #29147. Built from https://develop.svn.wordpress.org/trunk@29542 git-svn-id: http://core.svn.wordpress.org/trunk@29318 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-19 16:38:16 -04:00
}
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
.media-modal-close span.media-modal-icon {
background-image: none;
}
Revert [29287] based on design and core team feedback. see #29012. Built from https://develop.svn.wordpress.org/trunk@29447 git-svn-id: http://core.svn.wordpress.org/trunk@29225 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-08 15:01:19 -04:00
.media-modal-close .media-modal-icon:before {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "\f158";
Dashicons CSS: one-word font families don't need quotes. Font families with a space in the name should use double-quotes (doesn't apply here). Props afercia. Fixes #32866. Built from https://develop.svn.wordpress.org/trunk@33912 git-svn-id: http://core.svn.wordpress.org/trunk@33881 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-05 15:57:25 -04:00
font: normal 20px/1 dashicons;
General: Use correct value for the `speak` property in various CSS files. Follow-up to [49263]. Props hareesh-pillai. Fixes #51622. Built from https://develop.svn.wordpress.org/trunk@49309 git-svn-id: http://core.svn.wordpress.org/trunk@49071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-25 22:25:09 -04:00
speak: never;
Revert [29287] based on design and core team feedback. see #29012. Built from https://develop.svn.wordpress.org/trunk@29447 git-svn-id: http://core.svn.wordpress.org/trunk@29225 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-08 15:01:19 -04:00
vertical-align: middle;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Media Modal: Remove the outline from the modal's close button. props lessbloat, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22180 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-10 22:54:19 -04:00
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
.media-modal-content {
position: absolute;
Media JS: Improve markup and CSS of the modal view's title. Also improves the accuracy of closing the modal when the backdrop is clicked (which became error-prone around the title bar in [22144]). see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22158 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-10 05:40:22 -04:00
top: 0;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
left: 0;
right: 0;
bottom: 0;
overflow: auto;
Minimum heights for the media modal to prevent it from scrunching up on tiny devices. (Panning is better.) props helenyhou. fixes #22747. git-svn-id: http://core.svn.wordpress.org/trunk@23052 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 19:40:13 -05:00
min-height: 300px;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
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
background: #fff;
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
-webkit-font-smoothing: subpixel-antialiased;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Media Library: After [35499], increase the specificity of our selectors so that they don't cause problems for the `wp-admin` Media Library page. Props aaronrutley. Fixes #32005. Built from https://develop.svn.wordpress.org/trunk@35532 git-svn-id: http://core.svn.wordpress.org/trunk@35496 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-04 18:43:26 -05:00
.media-modal-content .media-frame select.attachment-filters {
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
margin-top: 32px;
Media Library: After [35499], increase the specificity of our selectors so that they don't cause problems for the `wp-admin` Media Library page. Props aaronrutley. Fixes #32005. Built from https://develop.svn.wordpress.org/trunk@35532 git-svn-id: http://core.svn.wordpress.org/trunk@35496 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-04 18:43:26 -05:00
margin-right: 2%;
width: 42%;
width: calc(48% - 12px);
}
.media-modal-content .attachments-browser .search {
width: 100%;
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
/* higher specificity */
.wp-core-ui .media-modal-icon {
Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-29 09:36:12 -05:00
background-image: url(../images/uploader-icons.png);
background-repeat: no-repeat;
}
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
/**
* Toolbar
*/
.media-toolbar {
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
position: absolute;
top: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
left: 0;
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
right: 0;
z-index: 100;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
height: 60px;
padding: 0 16px;
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
border: 0 solid #dcdcde;
Better responsive breakpoints for the Gallery editing screen. props koopersmith. fixes #22741 git-svn-id: http://core.svn.wordpress.org/trunk@23071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 05:15:42 -05:00
overflow: hidden;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Media: Ensure Crop Image is always visible. Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed. Props karinedo, sagarprajapati, Cybr, mayurk. Fixes #40152. Built from https://develop.svn.wordpress.org/trunk@40428 git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-14 05:31:43 -04:00
.media-frame-toolbar .media-toolbar {
Media: Make sure the bottom media toolbar content is fully visible with Internet Explorer 11. Props mspatovaliyski. Fixes #47502. Built from https://develop.svn.wordpress.org/trunk@45526 git-svn-id: http://core.svn.wordpress.org/trunk@45337 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-13 10:12:52 -04:00
top: auto;
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
bottom: -47px;
Media: Ensure Crop Image is always visible. Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed. Props karinedo, sagarprajapati, Cybr, mayurk. Fixes #40152. Built from https://develop.svn.wordpress.org/trunk@40428 git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-14 05:31:43 -04:00
height: auto;
Media: Make sure the bottom media toolbar content is fully visible with Internet Explorer 11. Props mspatovaliyski. Fixes #47502. Built from https://develop.svn.wordpress.org/trunk@45526 git-svn-id: http://core.svn.wordpress.org/trunk@45337 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-13 10:12:52 -04:00
overflow: visible;
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
border-top: 1px solid #dcdcde;
Media: Ensure Crop Image is always visible. Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed. Props karinedo, sagarprajapati, Cybr, mayurk. Fixes #40152. Built from https://develop.svn.wordpress.org/trunk@40428 git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-14 05:31:43 -04:00
}
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
.media-toolbar-primary {
float: right;
Better responsive breakpoints for the Gallery editing screen. props koopersmith. fixes #22741 git-svn-id: http://core.svn.wordpress.org/trunk@23071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 05:15:42 -05:00
height: 100%;
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
position: relative;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
.media-toolbar-secondary {
float: left;
Better responsive breakpoints for the Gallery editing screen. props koopersmith. fixes #22741 git-svn-id: http://core.svn.wordpress.org/trunk@23071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 05:15:42 -05:00
height: 100%;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
Add attachment display settings to the media modal. * Add a media view for button groups. * Add button dropdown containers. * Add a dropdown property to the button media model. fixes #22206, #21814, see #21390, #21813, #21598. git-svn-id: http://core.svn.wordpress.org/trunk@22247 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 15:25:17 -04:00
.media-toolbar-primary > .media-button,
.media-toolbar-primary > .media-button-group {
margin-left: 10px;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
float: left;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
margin-top: 15px;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
Add attachment display settings to the media modal. * Add a media view for button groups. * Add button dropdown containers. * Add a dropdown property to the button media model. fixes #22206, #21814, see #21390, #21813, #21598. git-svn-id: http://core.svn.wordpress.org/trunk@22247 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 15:25:17 -04:00
.media-toolbar-secondary > .media-button,
.media-toolbar-secondary > .media-button-group {
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
margin-right: 10px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
margin-top: 15px;
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
}
/**
* Sidebar
*/
.media-sidebar {
position: absolute;
top: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
right: 0;
Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22809 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 01:30:25 -05:00
bottom: 0;
Media: Integrate the gallery workflow with the media menu. `wp.media.model.Query.more()` * If a request has already been sent out for more attachments, return that request object instead of creating another. `wp.media.controller.Region` * A region allows views to be swapped in and out of a section of the page without either view having to know about the other. * Application components can use the same callbacks and resources by leveraging `Region.mode()`, which triggers a set of callbacks to create or transform the current view, but only if necessary. `wp.media.view.Frame` * Leverage `Region` controllers instead of forcing states to swap view objects, which causes states to fit more comfortably in the controller-camp. * Add `previous()`, a method to fetch the previous state `id`. * Separate out the default settings over several objects (so blank frames can be instantiated). `wp.media.view.MediaFrame` * The base `Frame` used for media management: handles integration with the `Modal` and `UploaderWindow` views. `wp.media.view.MediaFrame.Post` * Includes all default media states and callbacks necessary for inserting media into a post. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22437 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-07 15:14:41 -05:00
width: 267px;
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
padding: 0 16px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
z-index: 75;
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
background: #f6f7f7;
border-left: 1px solid #dcdcde;
Media: Allow the modal sidebar to scroll. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22534 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 14:10:04 -05:00
overflow: auto;
Media: Add -webkit-overflow-scrolling for a smoother mobile/iOS experience. props koopersmith. fixes #22657. git-svn-id: http://core.svn.wordpress.org/trunk@22959 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 20:44:15 -05:00
-webkit-overflow-scrolling: touch;
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
}
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
/*
* Implementation of bottom padding in overflow content differs across browsers.
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
*/
.media-sidebar::after {
content: "";
display: flex;
clear: both;
height: 24px;
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.hide-toolbar .media-sidebar {
bottom: 0;
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
}
Media: Improve the headings hierarchy in the Media Views for better accessibility. Fixes #34273. Built from https://develop.svn.wordpress.org/trunk@35427 git-svn-id: http://core.svn.wordpress.org/trunk@35391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-28 19:08:24 -04:00
.media-sidebar h2,
.image-details h2 {
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
position: relative;
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 600;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
text-transform: uppercase;
font-size: 12px;
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
color: #646970;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
margin: 24px 0 8px;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting {
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
display: block;
float: left;
width: 100%;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
margin: 0 0 10px;
}
.media-sidebar .collection-settings .setting {
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
margin: 1px 0;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting.has-description,
.attachment-details .setting.has-description {
margin-bottom: 5px;
Media: Sidebar labels should be display block. Prevents wonkiness like inputs disappearing because Chrome no like you. props helenyhou. fixes #22721. git-svn-id: http://core.svn.wordpress.org/trunk@23063 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 23:06:45 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting .link-to-custom {
Fix a regression of positioning in Attachment Display Settings. props paulwilde. see #24716. Built from https://develop.svn.wordpress.org/trunk@29000 git-svn-id: http://core.svn.wordpress.org/trunk@28788 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-04 19:29:16 -04:00
margin: 3px 2px 0;
Media: Account for the most obvious and common style conflicts that may occur when the media modal is loaded on the frontend. Tested primarily with P2. props lessbloat, helenyhou. fixes #22752. git-svn-id: http://core.svn.wordpress.org/trunk@23077 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 14:15:40 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
.attachment-details .setting span, /* Back-compat for pre-5.3 */
.media-sidebar .setting .name,
.media-sidebar .setting .value,
.attachment-details .setting .name {
Media: Allow the modal sidebar to scroll. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22534 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 14:10:04 -05:00
min-width: 30%;
Media: Add custom URL as an option to attachment display properties. see #21390, #22206. git-svn-id: http://core.svn.wordpress.org/trunk@22537 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 15:36:46 -05:00
margin-right: 4%;
Media: Add base form element CSS. props lessbloat. see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22780 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:00:18 -05:00
font-size: 12px;
Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further. props ericlewis, shaunandrews, wonderboymusic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28682 git-svn-id: http://core.svn.wordpress.org/trunk@28500 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-06-05 18:01:18 -04:00
text-align: right;
Correctly wrap the text in long input labels in the media manager. Fixes #23003 Props ramiabraham Built from https://develop.svn.wordpress.org/trunk@30359 git-svn-id: http://core.svn.wordpress.org/trunk@30358 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-11-16 14:01:22 -05:00
word-wrap: break-word;
}
.media-sidebar .setting .name {
max-width: 80px;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting .value {
text-align: left;
}
.media-sidebar .setting select {
Media: Set a max width on select elements in the sidebar. fixes #22517, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22733 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 17:51:35 -05:00
max-width: 65%;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting input[type="checkbox"],
.media-sidebar .field input[type="checkbox"],
.media-sidebar .setting input[type="radio"],
.media-sidebar .field input[type="radio"],
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting input[type="checkbox"],
.attachment-details .field input[type="checkbox"],
.attachment-details .setting input[type="radio"],
.attachment-details .field input[type="radio"] {
Media: Fix vertical and horizontal alignment of the gallery "Random" checkbox, and checkbox settings in general. Includes RTL. props koopersmith. fixes #22724. git-svn-id: http://core.svn.wordpress.org/trunk@23034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:51:27 -05:00
float: none;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
margin: 8px 3px 0;
Media: Fix vertical and horizontal alignment of the gallery "Random" checkbox, and checkbox settings in general. Includes RTL. props koopersmith. fixes #22724. git-svn-id: http://core.svn.wordpress.org/trunk@23034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:51:27 -05:00
padding: 0;
Add random and reverse sorting options to gallery settings. Props koopersmith fixes #22637 git-svn-id: http://core.svn.wordpress.org/trunk@22987 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 00:32:25 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
.attachment-details .setting span, /* Back-compat for pre-5.3 */
.media-sidebar .setting .name,
.media-sidebar .setting .value,
.media-sidebar .checkbox-label-inline,
.attachment-details .setting .name,
.attachment-details .setting .value,
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
.compat-item label span {
float: left;
min-height: 22px;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
padding-top: 8px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.33333333;
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 400;
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
color: #646970;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .checkbox-label-inline {
font-size: 12px;
}
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields. For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. These fields now have a new "Copy URL" button that is easy to use and accessible to everyone. Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia. See #41612, #50322, #50335. Fixes #48463. Built from https://develop.svn.wordpress.org/trunk@48232 git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
.media-sidebar .copy-to-clipboard-container,
.attachment-details .copy-to-clipboard-container {
flex-wrap: wrap;
margin-top: 10px;
margin-left: calc( 35% - 1px );
padding-top: 10px;
}
/* Needs high specificity. */
.attachment-details .attachment-info .copy-to-clipboard-container {
float: none;
}
.media-sidebar .copy-to-clipboard-container .success,
.attachment-details .copy-to-clipboard-container .success {
padding: 0;
min-height: 0;
Media: Make the "Copy URL" button implementation more consistent with other instances in core: * Make the "Copied!" text green. * Make the button verbiage clear that it's copied "to clipboard". Props garrett-eclipse, mukesh27. Fixes #51355. Built from https://develop.svn.wordpress.org/trunk@49064 git-svn-id: http://core.svn.wordpress.org/trunk@48826 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-09-27 16:48:05 -04:00
line-height: 2.18181818;
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields. For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. These fields now have a new "Copy URL" button that is easy to use and accessible to everyone. Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia. See #41612, #50322, #50335. Fixes #48463. Built from https://develop.svn.wordpress.org/trunk@48232 git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
text-align: left;
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
color: #008a20;
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields. For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. These fields now have a new "Copy URL" button that is easy to use and accessible to everyone. Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia. See #41612, #50322, #50335. Fixes #48463. Built from https://develop.svn.wordpress.org/trunk@48232 git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
}
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
.compat-item label span {
Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further. props ericlewis, shaunandrews, wonderboymusic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28682 git-svn-id: http://core.svn.wordpress.org/trunk@28500 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-06-05 18:01:18 -04:00
text-align: right;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting input[type="text"],
.media-sidebar .setting input[type="password"],
.media-sidebar .setting input[type="email"],
.media-sidebar .setting input[type="number"],
.media-sidebar .setting input[type="search"],
.media-sidebar .setting input[type="tel"],
.media-sidebar .setting input[type="url"],
.media-sidebar .setting textarea,
.media-sidebar .setting .value,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting input[type="text"],
.attachment-details .setting input[type="password"],
.attachment-details .setting input[type="email"],
.attachment-details .setting input[type="number"],
.attachment-details .setting input[type="search"],
.attachment-details .setting input[type="tel"],
.attachment-details .setting input[type="url"],
.attachment-details .setting textarea,
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.attachment-details .setting .value,
.attachment-details .setting + .description {
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
box-sizing: border-box;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
margin: 1px;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
width: 65%;
float: right;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting .value,
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.attachment-details .setting .value,
.attachment-details .setting + .description {
Fix a regression of positioning in Attachment Display Settings. props paulwilde. see #24716. Built from https://develop.svn.wordpress.org/trunk@29000 git-svn-id: http://core.svn.wordpress.org/trunk@28788 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-04 19:29:16 -04:00
margin: 0 1px;
text-align: left;
}
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.attachment-details .setting + .description {
Accessibility: Improve the "Alt text" description styles for small screens. Amends [44900]. See #41612. Built from https://develop.svn.wordpress.org/trunk@45248 git-svn-id: http://core.svn.wordpress.org/trunk@45057 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-18 17:43:52 -04:00
clear: both;
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
font-size: 12px;
font-style: normal;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
margin-bottom: 10px;
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting textarea,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting textarea,
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
.compat-item .field textarea {
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
height: 62px;
Media: Allow textareas to be vertically resized. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22703 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-19 21:59:31 -05:00
resize: vertical;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
}
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
.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 .label,
.compat-item .field {
display: block;
margin: 0;
padding: 0;
}
.compat-item .label {
min-width: 30%;
margin-right: 4%;
float: left;
text-align: right;
}
Media: RTL styles for the media modal. props ocean90. see #22453, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22604 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-15 18:58:33 -05:00
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
.compat-item .label span {
display: block;
width: 100%;
}
.compat-item .field {
float: right;
Fix spacing of `.compat-item .field` form widgets in media modal. Props trepmal. Fixes #30886. Built from https://develop.svn.wordpress.org/trunk@31038 git-svn-id: http://core.svn.wordpress.org/trunk@31019 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-03 15:47:23 -05:00
width: 65%;
margin: 1px;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
}
Media: Don't stretch radio and checkbox inputs in compat fields. Adjust margin for radio inputs. props kovshenin for initial patch. fixes #28647. Built from https://develop.svn.wordpress.org/trunk@29360 git-svn-id: http://core.svn.wordpress.org/trunk@29136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-02 15:53:17 -04:00
.compat-item .field input[type="text"],
.compat-item .field input[type="password"],
.compat-item .field input[type="email"],
.compat-item .field input[type="number"],
.compat-item .field input[type="search"],
.compat-item .field input[type="tel"],
Fix spacing of `.compat-item .field` form widgets in media modal. Props trepmal. Fixes #30886. Built from https://develop.svn.wordpress.org/trunk@31038 git-svn-id: http://core.svn.wordpress.org/trunk@31019 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-03 15:47:23 -05:00
.compat-item .field input[type="url"],
.compat-item .field textarea {
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
width: 100%;
margin: 0;
Fix spacing of `.compat-item .field` form widgets in media modal. Props trepmal. Fixes #30886. Built from https://develop.svn.wordpress.org/trunk@31038 git-svn-id: http://core.svn.wordpress.org/trunk@31019 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-03 15:47:23 -05:00
box-sizing: border-box;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
}
Media Grid: Don't show attachment details in the "sidebar" for errors. Props ocean90. Fixes #29037. Built from https://develop.svn.wordpress.org/trunk@29527 git-svn-id: http://core.svn.wordpress.org/trunk@29303 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-17 22:26:16 -04:00
.sidebar-for-errors .attachment-details,
.sidebar-for-errors .compat-item,
Media Grid: don't hide the uploader progress bar for individual items. See [29527], #29037. Built from https://develop.svn.wordpress.org/trunk@29567 git-svn-id: http://core.svn.wordpress.org/trunk@29341 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-21 00:38:17 -04:00
.sidebar-for-errors .media-sidebar .media-progress-bar,
Media Grid: Don't show attachment details in the "sidebar" for errors. Props ocean90. Fixes #29037. Built from https://develop.svn.wordpress.org/trunk@29527 git-svn-id: http://core.svn.wordpress.org/trunk@29303 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-17 22:26:16 -04:00
.sidebar-for-errors .upload-details {
display: none !important;
}
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
/**
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
* Menu
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
*/
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.media-menu {
position: absolute;
top: 0;
left: 0;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
right: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
bottom: 0;
margin: 0;
Accessibility: Make the Media modal an ARIA modal dialog. For a number of years, the Media modal missed an explicit ARIA role and the required attributes for modal dialogs. This was confusing for assistive technology users, since they may not realize they're inside a dialog, and that consequently the keyboard interactions may be different from the rest of the page. Lack of an explicit label for the dialog was confusing as well, since assistive technology users didn't have an immediate sense of what the dialog is for. This change makes the Media modal meet the ARIA Authoring Practices recommendations, helping users better understand the purpose and interactions with the modal. Also, it makes sure to hide the rest of the page content from assistive technologies, until support for `aria-modal="true"` improves. Additionally: - moves the modal H1 heading to the beginning of the modal content - changes the modal left menu position to make visual and DOM order match - improves the `wp.media.view.FocusManager` documentation Fixes #47145. Built from https://develop.svn.wordpress.org/trunk@45572 git-svn-id: http://core.svn.wordpress.org/trunk@45383 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-27 08:33:56 -04:00
padding: 50px 0 10px;
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
background: #f6f7f7;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
border-right-width: 1px;
border-right-style: solid;
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
border-right-color: #c3c4c7;
Media: Prevent text from being selected in the menu. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22595 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:51:31 -05:00
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-menu .media-menu-item {
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
display: block;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
box-sizing: border-box;
width: 100%;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
position: relative;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
border: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
margin: 0;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
padding: 8px 20px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
font-size: 14px;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
line-height: 1.28571428;
background: transparent;
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
color: #2271b1;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
text-align: left;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
text-decoration: none;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
cursor: pointer;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-menu .media-menu-item:hover {
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
background: rgba(0, 0, 0, 0.04);
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-menu .media-menu-item:active {
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
color: #2271b1;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
outline: none;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.media-menu .active,
.media-menu .active:hover {
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
color: #1d2327;
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 600;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-menu .media-menu-item:focus {
box-shadow:
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
0 0 0 1px #4f94d4,
0 0 2px 1px rgba(79, 148, 212, 0.8);
color: #043959;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.media-menu .separator {
height: 0;
margin: 12px 20px;
padding: 0;
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
border-top: 1px solid #dcdcde;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
/**
* Menu
*/
.media-router {
position: relative;
padding: 0 6px;
margin: 0;
clear: both;
Merge colors.css into wp-admin.css. Non-default color schemes became overloads rather than swaps in the 3.8 redesign. Benefits include: * No more border-width, border-style, border-color insanity. * Point releases are much less likely to require extra finagling to avoid rebuilding the color schemes. * Yours truly has a better overall vision of ~14,000 lines of admin CSS and where we go from here. 1,065 net lines of red, y'all. props helen, jorbin. fixes #18380. Built from https://develop.svn.wordpress.org/trunk@27106 git-svn-id: http://core.svn.wordpress.org/trunk@26973 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-06 01:25:18 -05:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-router .media-menu-item {
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
position: relative;
float: left;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
border: 0;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
margin: 0;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
padding: 8px 10px 9px;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
height: 18px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.28571428;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
font-size: 14px;
text-decoration: none;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
background: transparent;
cursor: pointer;
transition: none;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-router .media-menu-item:last-child {
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
border-right: 0;
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-router .media-menu-item:hover,
.media-router .media-menu-item:active {
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
color: #2271b1;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
.media-router .active,
.media-router .active:hover {
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
color: #1d2327;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
}
.media-router .media-menu-item:focus {
box-shadow:
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
0 0 0 1px #4f94d4,
0 0 2px 1px rgba(79, 148, 212, 0.8);
color: #043959;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
.media-router .active,
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-router .media-menu-item.active:last-child {
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
margin: -1px -1px 0;
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
background: #fff;
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
border: 1px solid #dcdcde;
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
border-bottom: none;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
.media-router .active:after {
display: none;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
/**
* Frame
*/
.media-frame {
overflow: hidden;
Bring Featured Images back into the main media dialog. Most users don't realize that the Featured Image meta box exists; if they do, few use it. Restores the old meta box UI, including the admin_post_thumbnail_html filter. If a plugin is using _wp_post_thumbnail_html() in conjunction with Thickbox elsewhere, it will also magically still work. Specific underlying changes: * Converts the modal view to use the view manager, which means that a call to open() will automatically call render and attach if necessary. * Doesn't automatically set a state in wp.media, to allow code to customize the states to be added before activation. props koopersmith. fixes #21776. git-svn-id: http://core.svn.wordpress.org/trunk@22979 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-02 21:38:10 -05:00
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
.media-frame-menu {
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
position: absolute;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
top: 0;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
left: 0;
bottom: 0;
Remove the box-shadow from the separator in the right sidebar of the media modal. Props avryl. Fixes #27217. Built from https://develop.svn.wordpress.org/trunk@27448 git-svn-id: http://core.svn.wordpress.org/trunk@27294 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 21:46:14 -05:00
width: 200px;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
z-index: 150;
}
.media-frame-title {
position: absolute;
top: 0;
left: 200px;
right: 0;
Align and unify (most) modal and customizer icons. fixes #29147. Built from https://develop.svn.wordpress.org/trunk@29542 git-svn-id: http://core.svn.wordpress.org/trunk@29318 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-19 16:38:16 -04:00
height: 50px;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
z-index: 200;
}
.media-frame-router {
position: absolute;
Align and unify (most) modal and customizer icons. fixes #29147. Built from https://develop.svn.wordpress.org/trunk@29542 git-svn-id: http://core.svn.wordpress.org/trunk@29318 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-19 16:38:16 -04:00
top: 50px;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
left: 200px;
right: 0;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
height: 36px;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
z-index: 200;
}
.media-frame-content {
position: absolute;
Align and unify (most) modal and customizer icons. fixes #29147. Built from https://develop.svn.wordpress.org/trunk@29542 git-svn-id: http://core.svn.wordpress.org/trunk@29318 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-19 16:38:16 -04:00
top: 84px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
left: 200px;
Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22809 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 01:30:25 -05:00
right: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
bottom: 61px;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
height: auto;
width: auto;
Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:05:03 -04:00
margin: 0;
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
overflow: auto;
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
background: #fff;
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
border-top: 1px solid #dcdcde;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
.media-frame-toolbar {
position: absolute;
left: 200px;
right: 0;
z-index: 100;
Media: Ensure Crop Image is always visible. Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed. Props karinedo, sagarprajapati, Cybr, mayurk. Fixes #40152. Built from https://develop.svn.wordpress.org/trunk@40428 git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-14 05:31:43 -04:00
bottom: 60px;
height: auto;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
.media-frame.hide-menu .media-frame-title,
.media-frame.hide-menu .media-frame-router,
.media-frame.hide-menu .media-frame-toolbar,
.media-frame.hide-menu .media-frame-content {
left: 0;
}
.media-frame.hide-toolbar .media-frame-content {
bottom: 0;
}
.media-frame.hide-router .media-frame-content {
Align and unify (most) modal and customizer icons. fixes #29147. Built from https://develop.svn.wordpress.org/trunk@29542 git-svn-id: http://core.svn.wordpress.org/trunk@29318 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-19 16:38:16 -04:00
top: 50px;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
Accessibility: Improve keyboard accessibility avoiding confusing tab stops in the Media views. When sections of the media modal are hidden out of view, their controls may be still focusable and actionable. This completely hides these sections to avoid unnecessary tab stops and potential confusion for assistive technology users. Props SergeyBiryukov, afercia. Fixes #30599. Built from https://develop.svn.wordpress.org/trunk@39529 git-svn-id: http://core.svn.wordpress.org/trunk@39469 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-12-06 18:28:41 -05:00
.media-frame.hide-menu .media-frame-menu,
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
.media-frame.hide-menu .media-frame-menu-heading,
Accessibility: Improve keyboard accessibility avoiding confusing tab stops in the Media views. When sections of the media modal are hidden out of view, their controls may be still focusable and actionable. This completely hides these sections to avoid unnecessary tab stops and potential confusion for assistive technology users. Props SergeyBiryukov, afercia. Fixes #30599. Built from https://develop.svn.wordpress.org/trunk@39529 git-svn-id: http://core.svn.wordpress.org/trunk@39469 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-12-06 18:28:41 -05:00
.media-frame.hide-router .media-frame-router,
.media-frame.hide-toolbar .media-frame-toolbar {
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
display: none;
}
.media-frame-title h1 {
padding: 0 16px;
font-size: 22px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 2.27272727;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
margin: 0;
}
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
.media-frame-menu-heading,
.media-attachments-filter-heading {
position: absolute;
left: 20px;
top: 22px;
margin: 0;
font-size: 13px;
line-height: 1;
/* Above the media-frame-menu. */
z-index: 151;
}
.media-attachments-filter-heading {
top: 10px;
left: 16px;
}
.mode-grid .media-attachments-filter-heading {
top: 0;
left: -9999px;
}
.mode-grid .media-frame-actions-heading {
display: none;
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.wp-core-ui .button.media-frame-menu-toggle {
display: none;
}
Add header image uploads with cropping to the customizer. props mcsf, ehg, gcorne. see #21785. Built from https://develop.svn.wordpress.org/trunk@27497 git-svn-id: http://core.svn.wordpress.org/trunk@27339 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-11 00:13:16 -04:00
.media-frame-title .suggested-dimensions {
font-size: 14px;
float: right;
margin-right: 20px;
}
Customizer: Fix header image cropping when working with huge images. Affected Firefox in particular. props ehg. fixes #27790. Built from https://develop.svn.wordpress.org/trunk@28101 git-svn-id: http://core.svn.wordpress.org/trunk@27932 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-13 14:20:14 -04:00
.media-frame-content .crop-content {
height: 100%;
}
Site Icon: Add crop preview to the media modal. * Monkey patches imgAreaSelect library to support touch events. * Removes Settings version of Site Icon since it would have been the same flow. * Removes default value for Customizer setting - there is no default favicon. Fixes #16434. Built from https://develop.svn.wordpress.org/trunk@33329 git-svn-id: http://core.svn.wordpress.org/trunk@33301 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-20 11:57:25 -04:00
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
margin-right: 300px;
}
Header images: Handle cropping failures. props ehg. see #21785. Built from https://develop.svn.wordpress.org/trunk@27946 git-svn-id: http://core.svn.wordpress.org/trunk@27776 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-04 11:48:16 -04:00
.media-frame-content .crop-content .crop-image {
Add header image uploads with cropping to the customizer. props mcsf, ehg, gcorne. see #21785. Built from https://develop.svn.wordpress.org/trunk@27497 git-svn-id: http://core.svn.wordpress.org/trunk@27339 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-11 00:13:16 -04:00
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-frame-content .crop-content .upload-errors {
Header images: Handle cropping failures. props ehg. see #21785. Built from https://develop.svn.wordpress.org/trunk@27946 git-svn-id: http://core.svn.wordpress.org/trunk@27776 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-04 11:48:16 -04:00
position: absolute;
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-right: -150px;
z-index: 600000;
}
Media: Backwards compatibility for media_upload_tabs. * Adds `createIframeStates()` to the `MediaFrame` view. It creates states and bindings for the `media_upload_tabs` output, and is included on `MediaFrame.Post` by default. * Hijacks `tb_remove()` when the media modal is open to ensure the modal closes correctly. * Adds a `chromeless` parameter to thickbox media tab URLs to render the UI without the old row of tabs. see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22523 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 02:51:37 -05:00
/**
* Iframes
*/
.media-frame .media-iframe {
overflow: hidden;
}
Media: Fix vertical and horizontal alignment of the gallery "Random" checkbox, and checkbox settings in general. Includes RTL. props koopersmith. fixes #22724. git-svn-id: http://core.svn.wordpress.org/trunk@23034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:51:27 -05:00
.media-frame .media-iframe,
.media-frame .media-iframe iframe {
Media: Backwards compatibility for media_upload_tabs. * Adds `createIframeStates()` to the `MediaFrame` view. It creates states and bindings for the `media_upload_tabs` output, and is included on `MediaFrame.Post` by default. * Hijacks `tb_remove()` when the media modal is open to ensure the modal closes correctly. * Adds a `chromeless` parameter to thickbox media tab URLs to render the UI without the old row of tabs. see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22523 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 02:51:37 -05:00
height: 100%;
width: 100%;
Ensure iframes in the media modal on the frontend have no borders. props nacin. fixes #22804. git-svn-id: http://core.svn.wordpress.org/trunk@23118 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-07 05:27:07 -05:00
border: 0;
Media: Backwards compatibility for media_upload_tabs. * Adds `createIframeStates()` to the `MediaFrame` view. It creates states and bindings for the `media_upload_tabs` output, and is included on `MediaFrame.Post` by default. * Hijacks `tb_remove()` when the media modal is open to ensure the modal closes correctly. * Adds a `chromeless` parameter to thickbox media tab URLs to render the UI without the old row of tabs. see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22523 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 02:51:37 -05:00
}
Media: Add filters to the media library. fixes #22514, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22712 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 08:49:35 -05:00
/**
* Attachment Browser Filters
*/
.media-frame select.attachment-filters {
margin-top: 11px;
Fix the search field width in the media modal, media library grid and on the install new plugins screen. Props helen, fixes #30658. Built from https://develop.svn.wordpress.org/trunk@30813 git-svn-id: http://core.svn.wordpress.org/trunk@30803 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-12-10 23:12:23 -05:00
margin-right: 2%;
Media Library: After [35499], increase the specificity of our selectors so that they don't cause problems for the `wp-admin` Media Library page. Props aaronrutley. Fixes #32005. Built from https://develop.svn.wordpress.org/trunk@35532 git-svn-id: http://core.svn.wordpress.org/trunk@35496 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-04 18:43:26 -05:00
max-width: 42%;
max-width: calc(48% - 12px);
Make sure the spinner in the media modal is visible on narrow screens (without affecting the media grid). Fixes #30725. Built from https://develop.svn.wordpress.org/trunk@32120 git-svn-id: http://core.svn.wordpress.org/trunk@32099 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-13 20:54:30 -04:00
}
.media-frame select.attachment-filters:last-of-type {
margin-right: 0;
Media: Port date filter width fix from Gutenberg. Ensures the entire date selection dropdown shows in the media modal. Previously this was worked around in https://github.com/WordPress/gutenberg/commit/8deaf5eca672848224e286e0ab03dde40fd5219d in Gutenberg. This moves the rule to core, allowing the workaround to be removed in Gutenberg. Props ianbelanger. Fixes #44760. See https://github.com/WordPress/gutenberg/issues/2202 Built from https://develop.svn.wordpress.org/trunk@44653 git-svn-id: http://core.svn.wordpress.org/trunk@44484 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-18 20:20:49 -05:00
width: auto;
max-width: 100%;
Media: Add filters to the media library. fixes #22514, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22712 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 08:49:35 -05:00
}
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
/**
* Search
*/
.media-frame .search {
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
margin: 32px 0 0;
Add a sidebar to the media modal. * Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar. * Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters. * Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog. see #21390, #21776, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@22321 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 02:56:23 -04:00
padding: 4px;
font-size: 13px;
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
color: #3c434a;
System fonts: Don't quote single-word font names, per our coding standards. props ocean90, netweb. see #36753. Built from https://develop.svn.wordpress.org/trunk@38152 git-svn-id: http://core.svn.wordpress.org/trunk@38093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-07-26 12:39:30 -04:00
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
-webkit-appearance: none;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
Fix the search field width in the media modal, media library grid and on the install new plugins screen. Props helen, fixes #30658. Built from https://develop.svn.wordpress.org/trunk@30813 git-svn-id: http://core.svn.wordpress.org/trunk@30803 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-12-10 23:12:23 -05:00
.media-toolbar-primary .search {
max-width: 100%;
Media: Add instructions to drag and drop to reorder images on gallery and batch edit pages. Removes search boxes from these pages as well. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22529 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 04:11:33 -05:00
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.media-frame .media-search-input-label {
position: absolute;
left: 0;
top: 10px;
margin: 0;
line-height: 1;
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
/**
* Attachments
*/
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachments {
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
margin: 0;
Media: Add -webkit-overflow-scrolling for a smoother mobile/iOS experience. props koopersmith. fixes #22657. git-svn-id: http://core.svn.wordpress.org/trunk@22959 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 20:44:15 -05:00
-webkit-overflow-scrolling: touch;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
/**
* Attachment
*/
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment {
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
position: relative;
float: left;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
padding: 8px;
margin: 0;
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
color: #3c434a;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
cursor: pointer;
Media: Add base form element CSS. props lessbloat. see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22780 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:00:18 -05:00
list-style: none;
Media: IE fixes for attachment selections. props lessbloat. see #22446. git-svn-id: http://core.svn.wordpress.org/trunk@22876 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 14:14:36 -05:00
text-align: center;
Make browser text-selections ignore attachment views. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21786 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-07 18:15:52 -04:00
-webkit-user-select: none;
Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes. We'll be using it for two distinct tasks: * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build. * Color CSS files will receive prefixes when they are built. This commit: * Adds prefixes we were missing to core CSS. * Removes prefixes that we no longer need from core CSS. * Removes all prefixes from colors CSS. props ocean90. fixes #27078. Built from https://develop.svn.wordpress.org/trunk@27174 git-svn-id: http://core.svn.wordpress.org/trunk@27038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-13 03:30:17 -05:00
-ms-user-select: none;
user-select: none;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
width: 25%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
box-sizing: border-box;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment:focus,
.wp-core-ui .selected.attachment:focus,
.wp-core-ui .attachment.details:focus {
At long last, improved keyboard accessibility for the media modal. props lessbloat, grahamarmfield, sharonaustin, bramd. see #23560. Built from https://develop.svn.wordpress.org/trunk@28607 git-svn-id: http://core.svn.wordpress.org/trunk@28431 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-28 23:39:15 -04:00
box-shadow:
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
inset 0 0 2px 3px #fff,
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
inset 0 0 0 7px #4f94d4;
Accessibility: Add focus styles for Windows High Contrast mode. Introduces in core new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline as already explored in the Block Editor. This first part covers some of the main user interface controls like buttons, links, and media views elements. Other parts will be addressed in the next future. Fixes #41286. Built from https://develop.svn.wordpress.org/trunk@44544 git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 11:47:50 -05:00
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -6px;
At long last, improved keyboard accessibility for the media modal. props lessbloat, grahamarmfield, sharonaustin, bramd. see #23560. Built from https://develop.svn.wordpress.org/trunk@28607 git-svn-id: http://core.svn.wordpress.org/trunk@28431 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-28 23:39:15 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .selected.attachment {
Media CSS: Fix typo in `box-shadow` property for WebKit and update indentation to match the other ones. Built from https://develop.svn.wordpress.org/trunk@29268 git-svn-id: http://core.svn.wordpress.org/trunk@29050 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-22 15:58:18 -04:00
box-shadow:
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
inset 0 0 0 5px #fff,
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
inset 0 0 0 7px #c3c4c7;
Keyboard accessibility for the media modal: * Arrow keys navigate between items in the grid. * Transfer focus into the panel when selecting a tab along the side. * Transfer focus into the details sidebar when selecting an item and vice versa. * Set initial focus on the close button so that it is visible. props celloexpressions, lessbloat, ericlewis. fixes #25100, #25101, #28704. see #23560. Built from https://develop.svn.wordpress.org/trunk@29220 git-svn-id: http://core.svn.wordpress.org/trunk@29004 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-18 03:57:15 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment.details {
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
box-shadow:
inset 0 0 0 3px #fff,
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
inset 0 0 0 7px #2271b1;
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment-preview {
Caption editing in the media modal library. * Adds a `describe` option to the workflow controller to support inline caption editing. * For images, descriptions are mapped to the `caption` attribute. * For other media items, descriptions are mapped to the `title` attribute. * Descriptions are saved when the textarea's `change` event fires (i.e. when the textarea is blurred). fixes #21807, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22173 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-10 19:32:48 -04:00
position: relative;
Media modal/grid: fix the position of attachment icons, restore the background, fix in ie8. See #27423. Built from https://develop.svn.wordpress.org/trunk@29393 git-svn-id: http://core.svn.wordpress.org/trunk@29171 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-06 02:29:16 -04:00
box-shadow:
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
inset 0 0 15px rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
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
background: #f0f0f1;
Media modal/grid: fix the position of attachment icons, restore the background, fix in ie8. See #27423. Built from https://develop.svn.wordpress.org/trunk@29393 git-svn-id: http://core.svn.wordpress.org/trunk@29171 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-06 02:29:16 -04:00
cursor: pointer;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment-preview:before {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "";
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
display: block;
padding-top: 100%;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .icon {
Media: IE fixes for attachment selections. props lessbloat. see #22446. git-svn-id: http://core.svn.wordpress.org/trunk@22876 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 14:14:36 -05:00
margin: 0 auto;
overflow: hidden;
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .thumbnail {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
overflow: hidden;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
position: absolute;
Better thumbnail previews in the image editor. * Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out. * Various style changes. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-08 19:20:04 -04:00
top: 0;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
right: 0;
bottom: 0;
Better thumbnail previews in the image editor. * Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out. * Various style changes. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-08 19:20:04 -04:00
left: 0;
Media grid bulk selection styling: * Fade content within each attachment item so that focus styling is still clear. * Less jarring toolbar pinning. * Tighten up the fade in/out transition. see #28842. Built from https://develop.svn.wordpress.org/trunk@29489 git-svn-id: http://core.svn.wordpress.org/trunk@29267 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 03:18:15 -04:00
opacity: 1;
transition: opacity .1s;
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .portrait img {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
max-width: 100%;
Media grid, round 2. Expect much more to come. * Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser. * Show some details in the grid view to more easily distinguish items. props ericlewis, wonderboymusic, JerrySarcastic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28993 git-svn-id: http://core.svn.wordpress.org/trunk@28781 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-03 23:39:15 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .landscape img {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
max-height: 100%;
Media grid, round 2. Expect much more to come. * Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser. * Show some details in the grid view to more easily distinguish items. props ericlewis, wonderboymusic, JerrySarcastic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28993 git-svn-id: http://core.svn.wordpress.org/trunk@28781 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-03 23:39:15 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .thumbnail:after {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "";
Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:05:03 -04:00
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:05:03 -04:00
overflow: hidden;
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .thumbnail img {
Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:05:03 -04:00
top: 0;
left: 0;
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .thumbnail .centered {
Fix positioning of attachment thumbnail overlays. Prevents the overlay from blocking buttons inside the attachment preview, such as the remove button in the gallery editor. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22343 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-31 16:34:50 -04:00
position: absolute;
top: 0;
left: 0;
width: 100%;
Build: Remove a stray CSS comment that Autoprefixer failed to remove in [43309]. Props netweb. See #45080. Built from https://develop.svn.wordpress.org/trunk@44343 git-svn-id: http://core.svn.wordpress.org/trunk@44173 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-12-19 19:27:47 -05:00
height: 100%;
Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes. We'll be using it for two distinct tasks: * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build. * Color CSS files will receive prefixes when they are built. This commit: * Adds prefixes we were missing to core CSS. * Removes prefixes that we no longer need from core CSS. * Removes all prefixes from colors CSS. props ocean90. fixes #27078. Built from https://develop.svn.wordpress.org/trunk@27174 git-svn-id: http://core.svn.wordpress.org/trunk@27038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-13 03:30:17 -05:00
transform: translate( 50%, 50% );
Fix positioning of attachment thumbnail overlays. Prevents the overlay from blocking buttons inside the attachment preview, such as the remove button in the gallery editor. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22343 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-31 16:34:50 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .thumbnail .centered img {
Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes. We'll be using it for two distinct tasks: * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build. * Color CSS files will receive prefixes when they are built. This commit: * Adds prefixes we were missing to core CSS. * Removes prefixes that we no longer need from core CSS. * Removes all prefixes from colors CSS. props ocean90. fixes #27078. Built from https://develop.svn.wordpress.org/trunk@27174 git-svn-id: http://core.svn.wordpress.org/trunk@27038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-13 03:30:17 -05:00
transform: translate( -50%, -50% );
Better thumbnail previews in the image editor. * Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out. * Various style changes. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-08 19:20:04 -04:00
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
Media: Fix focus and selected state for the selected attachments set. props iseulde. fixes #31898. Built from https://develop.svn.wordpress.org/trunk@32072 git-svn-id: http://core.svn.wordpress.org/trunk@32051 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-07 17:29:26 -04:00
.wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
Media modal/grid: fix the position of attachment icons, restore the background, fix in ie8. See #27423. Built from https://develop.svn.wordpress.org/trunk@29393 git-svn-id: http://core.svn.wordpress.org/trunk@29171 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-06 02:29:16 -04:00
transform: translate( -50%, -70% );
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .filename {
Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:05:03 -04:00
position: absolute;
left: 0;
right: 0;
bottom: 0;
Fix overflow of long filenames in the media modal. Props koopersmith, GregLone fixes #22554 git-svn-id: http://core.svn.wordpress.org/trunk@22870 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:58:47 -05:00
overflow: hidden;
max-height: 100%;
word-wrap: break-word;
Show filenames for non-image attachments in the new media modal. Also passes all attachment model attributes to the attachment view template by default (instead of selecting specific values). see #21390, #21836. git-svn-id: http://core.svn.wordpress.org/trunk@22159 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-10 05:55:47 -04:00
text-align: center;
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 600;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
Fix overflow of long filenames in the media modal. Props koopersmith, GregLone fixes #22554 git-svn-id: http://core.svn.wordpress.org/trunk@22870 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:58:47 -05:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .filename div {
Fix overflow of long filenames in the media modal. Props koopersmith, GregLone fixes #22554 git-svn-id: http://core.svn.wordpress.org/trunk@22870 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:58:47 -05:00
padding: 5px 10px;
Better thumbnail previews in the image editor. * Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out. * Various style changes. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-08 19:20:04 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .thumbnail img {
Better thumbnail previews in the image editor. * Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out. * Various style changes. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-08 19:20:04 -04:00
position: absolute;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.wp-core-ui .attachment-close {
Improve keyboard control of Edit Selection mode in the media manager. See #29326 Props adamsilverstein Built from https://develop.svn.wordpress.org/trunk@30374 git-svn-id: http://core.svn.wordpress.org/trunk@30371 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-11-17 22:34:25 -05:00
display: block;
Add quick insert buttons to attachment views in the library and remove buttons to attachment views in the gallery editor. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-27 03:45:26 -04:00
position: absolute;
Media Modal: Improve attachment remove button styles. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22184 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-11 00:11:47 -04:00
top: 5px;
right: 5px;
height: 22px;
width: 22px;
padding: 0;
Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-29 09:36:12 -05:00
background-color: #fff;
background-position: -96px 4px;
border-radius: 3px;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
Buttons: Improve the `.button-link` CSS class for link-like buttons. Updates `.button-link` adding color and underline to make link-like buttons look like links by default. Introduces `.button-link-delete` as a modifier, stackable CSS class for red button-links. Props Cheffheid, afercia. See #34242. Fixes #35126. Built from https://develop.svn.wordpress.org/trunk@40052 git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 11:47:44 -05:00
transition: none;
Media Modal: Improve attachment remove button styles. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22184 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-11 00:11:47 -04:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.wp-core-ui .attachment-close:hover,
.wp-core-ui .attachment-close:focus {
Improve keyboard control of Edit Selection mode in the media manager. See #29326 Props adamsilverstein Built from https://develop.svn.wordpress.org/trunk@30374 git-svn-id: http://core.svn.wordpress.org/trunk@30371 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-11-17 22:34:25 -05:00
background-position: -36px 4px;
Add quick insert buttons to attachment views in the library and remove buttons to attachment views in the gallery editor. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22053 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-27 03:45:26 -04:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment .check {
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
display: none;
height: 24px;
width: 24px;
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
padding: 0;
Buttons: Improve the `.button-link` CSS class for link-like buttons. Updates `.button-link` adding color and underline to make link-like buttons look like links by default. Introduces `.button-link-delete` as a modifier, stackable CSS class for red button-links. Props Cheffheid, afercia. See #34242. Fixes #35126. Built from https://develop.svn.wordpress.org/trunk@40052 git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 11:47:44 -05:00
border: 0;
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
position: absolute;
Media Grid: fix z-index of attachment "check" See #24716. Built from https://develop.svn.wordpress.org/trunk@29084 git-svn-id: http://core.svn.wordpress.org/trunk@28870 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-11 00:24:14 -04:00
z-index: 10;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
top: 0;
right: 0;
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
outline: 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
background: #f0f0f1;
Buttons: Improve the `.button-link` CSS class for link-like buttons. Updates `.button-link` adding color and underline to make link-like buttons look like links by default. Introduces `.button-link-delete` as a modifier, stackable CSS class for red button-links. Props Cheffheid, afercia. See #34242. Fixes #35126. Built from https://develop.svn.wordpress.org/trunk@40052 git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 11:47:44 -05:00
cursor: pointer;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.wp-core-ui .attachment .check .media-modal-icon {
display: block;
Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-29 09:36:12 -05:00
background-position: -1px 0;
height: 15px;
width: 15px;
margin: 5px;
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.wp-core-ui .attachment .check:hover .media-modal-icon {
Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-29 09:36:12 -05:00
background-position: -40px 0;
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment.selected .check {
Media: Attachment checkboxes now function as such. fixes #22462, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22706 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 06:10:04 -05:00
display: block;
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .attachment.details .check,
.wp-core-ui .attachment.selected .check:focus,
.wp-core-ui .media-frame.mode-grid .attachment.selected .check {
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
background-color: #2271b1;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
box-shadow:
0 0 0 1px #fff,
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
0 0 0 2px #2271b1;
Move media modal colors out of `colors.css` and into `media-views.css`, as the modal can be triggered on the front end. props avryl, props collinsinternet for the initial patch. see #26677 for trunk. Built from https://develop.svn.wordpress.org/trunk@26929 git-svn-id: http://core.svn.wordpress.org/trunk@26810 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-09 11:36:12 -05:00
}
Accessibility: Add focus styles for Windows High Contrast mode. Introduces in core new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline as already explored in the Block Editor. This first part covers some of the main user interface controls like buttons, links, and media views elements. Other parts will be addressed in the next future. Fixes #41286. Built from https://develop.svn.wordpress.org/trunk@44544 git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 11:47:50 -05:00
.wp-core-ui .attachment.selected .check:focus {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.wp-core-ui .attachment.details .check .media-modal-icon,
.wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-29 09:36:12 -05:00
background-position: -21px 0;
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.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 {
Icons for select, deselect, and window close in the media modal. Props JerrySarcastic, helenyhou, ocean90, lessbloat fixes #22610 git-svn-id: http://core.svn.wordpress.org/trunk@22920 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-29 09:36:12 -05:00
background-position: -60px 0;
}
Scope attachment selectors in media views to avoid interfering with attachment pages on front-end. props valendesigns. fixes #30878. Built from https://develop.svn.wordpress.org/trunk@31174 git-svn-id: http://core.svn.wordpress.org/trunk@31155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-01-13 02:16:23 -05:00
.wp-core-ui .media-frame .attachment .describe {
Caption editing in the media modal library. * Adds a `describe` option to the workflow controller to support inline caption editing. * For images, descriptions are mapped to the `caption` attribute. * For other media items, descriptions are mapped to the `title` attribute. * Descriptions are saved when the textarea's `change` event fires (i.e. when the textarea is blurred). fixes #21807, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22173 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-10 19:32:48 -04:00
position: relative;
display: block;
width: 100%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
margin: 0;
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
padding: 0 8px;
Caption editing in the media modal library. * Adds a `describe` option to the workflow controller to support inline caption editing. * For images, descriptions are mapped to the `caption` attribute. * For other media items, descriptions are mapped to the `title` attribute. * Descriptions are saved when the textarea's `change` event fires (i.e. when the textarea is blurred). fixes #21807, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22173 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-10 19:32:48 -04:00
font-size: 12px;
border-radius: 0;
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
/**
* Attachments Browser
*/
.media-frame .attachments-browser {
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
position: relative;
width: 100%;
height: 100%;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
overflow: hidden;
}
.attachments-browser .media-toolbar {
Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22809 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 01:30:25 -05:00
right: 300px;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
height: 72px;
background: #fff;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Media grid, round 2. Expect much more to come. * Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser. * Show some details in the grid view to more easily distinguish items. props ericlewis, wonderboymusic, JerrySarcastic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28993 git-svn-id: http://core.svn.wordpress.org/trunk@28781 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-03 23:39:15 -04:00
.attachments-browser.hide-sidebar .media-toolbar {
right: 0;
}
Media: Add an "upload more files" button to upload states. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22552 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 18:52:17 -05:00
.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 {
Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights. Improves cross-browsers rendering and addresses most of the reported edge cases. See #47477. Built from https://develop.svn.wordpress.org/trunk@46356 git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 13:24:59 -04:00
margin: 10px 0;
Media: Add an "upload more files" button to upload states. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22552 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 18:52:17 -05:00
}
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
.attachments-browser .attachments {
padding: 2px 8px 8px;
}
Improve switching between browser and upload state. Props koopersmith fixes #22628 git-svn-id: http://core.svn.wordpress.org/trunk@22945 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 01:01:47 -05:00
.attachments-browser .attachments,
.attachments-browser .uploader-inline {
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
position: absolute;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
top: 72px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
left: 0;
Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22809 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 01:30:25 -05:00
right: 300px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
bottom: 0;
overflow: auto;
At long last, improved keyboard accessibility for the media modal. props lessbloat, grahamarmfield, sharonaustin, bramd. see #23560. Built from https://develop.svn.wordpress.org/trunk@28607 git-svn-id: http://core.svn.wordpress.org/trunk@28431 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-28 23:39:15 -04:00
outline: none;
Media grid: * Introduce the concept of bulk editing via a separate mode. Like the list view, only bulk deleting is available. The UI is a little funky, especially with the field display toggles there, but refinements will come. * Up the max thumbnail size from 120px to 150px. * Slide-down panel for the add new uploader. Known issue: it doesn't close again. * Remove the toolbar region in the EditAttachment frame. * Defer a function call so the grid fills available space. * Give feedback when no results are found. Also needs styling. props ericlewis. see #24716. Built from https://develop.svn.wordpress.org/trunk@29056 git-svn-id: http://core.svn.wordpress.org/trunk@28844 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 23:50:17 -04:00
}
.attachments-browser .uploader-inline.hidden {
Media Grid: Remove CSS transition from inline uploader. props ericlewis. fixes #28840. see #28851. Built from https://develop.svn.wordpress.org/trunk@29131 git-svn-id: http://core.svn.wordpress.org/trunk@28916 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-13 06:44:14 -04:00
display: none;
Media grid: * Introduce the concept of bulk editing via a separate mode. Like the list view, only bulk deleting is available. The UI is a little funky, especially with the field display toggles there, but refinements will come. * Up the max thumbnail size from 120px to 150px. * Slide-down panel for the add new uploader. Known issue: it doesn't close again. * Remove the toolbar region in the EditAttachment frame. * Defer a function call so the grid fills available space. * Give feedback when no results are found. Also needs styling. props ericlewis. see #24716. Built from https://develop.svn.wordpress.org/trunk@29056 git-svn-id: http://core.svn.wordpress.org/trunk@28844 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 23:50:17 -04:00
}
Fix the media modal Insert into post button on narrow screens by limiting the width of .media-toolbar-primary and .media-toolbar-secondary only inside .attachments-browser (the top toolbar). Props iseulde, DrewAPicture. Fixes #31908. Built from https://develop.svn.wordpress.org/trunk@32121 git-svn-id: http://core.svn.wordpress.org/trunk@32100 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-13 21:21:27 -04:00
.attachments-browser .media-toolbar-primary {
Media Library: After [35499], increase the specificity of our selectors so that they don't cause problems for the `wp-admin` Media Library page. Props aaronrutley. Fixes #32005. Built from https://develop.svn.wordpress.org/trunk@35532 git-svn-id: http://core.svn.wordpress.org/trunk@35496 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-04 18:43:26 -05:00
max-width: 33%;
Fix the media modal Insert into post button on narrow screens by limiting the width of .media-toolbar-primary and .media-toolbar-secondary only inside .attachments-browser (the top toolbar). Props iseulde, DrewAPicture. Fixes #31908. Built from https://develop.svn.wordpress.org/trunk@32121 git-svn-id: http://core.svn.wordpress.org/trunk@32100 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-13 21:21:27 -04:00
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.mode-grid .attachments-browser .media-toolbar-primary {
display: flex;
align-items: center;
}
.mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
display: none;
}
Fix the media modal Insert into post button on narrow screens by limiting the width of .media-toolbar-primary and .media-toolbar-secondary only inside .attachments-browser (the top toolbar). Props iseulde, DrewAPicture. Fixes #31908. Built from https://develop.svn.wordpress.org/trunk@32121 git-svn-id: http://core.svn.wordpress.org/trunk@32100 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-13 21:21:27 -04:00
.attachments-browser .media-toolbar-secondary {
Media Library: After [35499], increase the specificity of our selectors so that they don't cause problems for the `wp-admin` Media Library page. Props aaronrutley. Fixes #32005. Built from https://develop.svn.wordpress.org/trunk@35532 git-svn-id: http://core.svn.wordpress.org/trunk@35496 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-04 18:43:26 -05:00
max-width: 66%;
Fix the media modal Insert into post button on narrow screens by limiting the width of .media-toolbar-primary and .media-toolbar-secondary only inside .attachments-browser (the top toolbar). Props iseulde, DrewAPicture. Fixes #31908. Built from https://develop.svn.wordpress.org/trunk@32121 git-svn-id: http://core.svn.wordpress.org/trunk@32100 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-13 21:21:27 -04:00
}
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
.uploader-inline .close {
background-color: transparent;
border: 0;
cursor: pointer;
height: 48px;
Accessibility: Improve the Media Library inline uploader accessibility. 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
2017-03-31 13:38:43 -04:00
outline: none;
padding: 0;
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
position: absolute;
Accessibility: Improve the Media Library inline uploader accessibility. 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
2017-03-31 13:38:43 -04:00
right: 2px;
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
text-align: center;
Accessibility: Improve the Media Library inline uploader accessibility. 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
2017-03-31 13:38:43 -04:00
top: 2px;
width: 48px;
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
z-index: 1;
}
.uploader-inline .close:before {
Accessibility: Improve the Media Library inline uploader accessibility. 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
2017-03-31 13:38:43 -04:00
font: normal 30px/1 dashicons !important;
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
color: #50575e;
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
display: inline-block;
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "\f335";
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
font-weight: 300;
Accessibility: Improve the Media Library inline uploader accessibility. 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
2017-03-31 13:38:43 -04:00
margin-top: 1px;
}
.uploader-inline .close:focus {
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
outline: 1px solid #4f94d4;
box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
Media Grid: make the Uploader closable. Props ericlewis. See #24716. Built from https://develop.svn.wordpress.org/trunk@29082 git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 19:06:15 -04:00
}
Media grid: * Introduce the concept of bulk editing via a separate mode. Like the list view, only bulk deleting is available. The UI is a little funky, especially with the field display toggles there, but refinements will come. * Up the max thumbnail size from 120px to 150px. * Slide-down panel for the add new uploader. Known issue: it doesn't close again. * Remove the toolbar region in the EditAttachment frame. * Defer a function call so the grid fills available space. * Give feedback when no results are found. Also needs styling. props ericlewis. see #24716. Built from https://develop.svn.wordpress.org/trunk@29056 git-svn-id: http://core.svn.wordpress.org/trunk@28844 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 23:50:17 -04:00
.attachments-browser.hide-sidebar .attachments,
.attachments-browser.hide-sidebar .uploader-inline {
Media grid, round 2. Expect much more to come. * Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser. * Show some details in the grid view to more easily distinguish items. props ericlewis, wonderboymusic, JerrySarcastic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28993 git-svn-id: http://core.svn.wordpress.org/trunk@28781 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-03 23:39:15 -04:00
right: 0;
Remove some unnecessary empty space in the media library grid view. props adamsilverstein. see #24716. Built from https://develop.svn.wordpress.org/trunk@29017 git-svn-id: http://core.svn.wordpress.org/trunk@28805 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-07 16:30:16 -04:00
margin-right: 0;
Media grid, round 2. Expect much more to come. * Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser. * Show some details in the grid view to more easily distinguish items. props ericlewis, wonderboymusic, JerrySarcastic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28993 git-svn-id: http://core.svn.wordpress.org/trunk@28781 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-03 23:39:15 -04:00
}
Media: Add instructions to drag and drop to reorder images on gallery and batch edit pages. Removes search boxes from these pages as well. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22529 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 04:11:33 -05:00
.attachments-browser .instructions {
display: inline-block;
margin-top: 16px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Follow-up to [45478]. Props ianbelanger, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@46431 git-svn-id: http://core.svn.wordpress.org/trunk@46229 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 22:57:03 -04:00
line-height: 1.38461538;
Media: Add instructions to drag and drop to reorder images on gallery and batch edit pages. Removes search boxes from these pages as well. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22529 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 04:11:33 -05:00
font-size: 13px;
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
color: #646970;
Media: Add instructions to drag and drop to reorder images on gallery and batch edit pages. Removes search boxes from these pages as well. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22529 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 04:11:33 -05:00
}
Media Grid, add padding to "No Media Found" message. Props michalzuber. See #24716. Built from https://develop.svn.wordpress.org/trunk@29067 git-svn-id: http://core.svn.wordpress.org/trunk@28853 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-10 13:31:15 -04:00
.attachments-browser .no-media {
padding: 2em 0 0 2em;
}
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
/**
* Progress Bar
*/
.media-progress-bar {
position: relative;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
height: 10px;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
width: 70%;
margin: 10px auto;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
border-radius: 10px;
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
background: #dcdcde;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
background: rgba(0, 0, 0, 0.1);
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
.media-progress-bar div {
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
height: 10px;
min-width: 20px;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
width: 0;
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
background: #2271b1;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
border-radius: 10px;
Standardize transition-animations on modal close/arrow buttons. props celloexpressions. fixes #29021. Built from https://develop.svn.wordpress.org/trunk@29365 git-svn-id: http://core.svn.wordpress.org/trunk@29141 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-02 18:02:19 -04:00
transition: width 300ms;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
.media-uploader-status .media-progress-bar {
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
display: none;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
width: 100%;
}
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
.uploading.media-uploader-status .media-progress-bar {
display: block;
}
Rename the attachment-thumbnail class in the media modal Attachment view to prevent conflicts with wp_get_attachment_image(). see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21909 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-18 21:10:17 -04:00
.attachment-preview .media-progress-bar {
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
position: absolute;
top: 50%;
left: 15%;
width: 70%;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
margin: -5px 0 0 0;
}
.media-uploader-status {
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
position: relative;
Properly pass WordPress uploading errors to wp.Uploader. Props koopersmith fixes #22655 git-svn-id: http://core.svn.wordpress.org/trunk@22954 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 10:40:09 -05:00
margin: 0 auto;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
padding-bottom: 10px;
Properly pass WordPress uploading errors to wp.Uploader. Props koopersmith fixes #22655 git-svn-id: http://core.svn.wordpress.org/trunk@22954 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 10:40:09 -05:00
max-width: 400px;
Media: Use a full uploader status view in the inline uploader. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22825 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 07:54:49 -05:00
}
Media: Improve the headings hierarchy in the Media Views for better accessibility. Fixes #34273. Built from https://develop.svn.wordpress.org/trunk@35427 git-svn-id: http://core.svn.wordpress.org/trunk@35391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-28 19:08:24 -04:00
.uploader-inline .media-uploader-status h2 {
Media: Use a full uploader status view in the inline uploader. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22825 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 07:54:49 -05:00
display: none;
}
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
.media-uploader-status .upload-details {
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
display: none;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
font-size: 12px;
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
color: #646970;
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
}
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
.uploading.media-uploader-status .upload-details {
display: block;
}
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
.media-uploader-status .upload-detail-separator {
padding: 0 4px;
}
.media-uploader-status .upload-count {
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
color: #3c434a;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
.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 {
Accessibility: Improve the media views upload Dismiss Errors button. - makes the Dismiss Errors button visible in the media views inline uploader - avoids a focus loss when activating the Dismiss Errors button See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354 Fixes #47113. Built from https://develop.svn.wordpress.org/trunk@45376 git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 15:33:53 -04:00
position: absolute;
top: -3px;
right: -5px;
padding: 5px;
border-radius: 50%;
transition: none;
Media: Use a full uploader status view in the inline uploader. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22825 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 07:54:49 -05:00
text-decoration: none;
}
Accessibility: Improve the media views upload Dismiss Errors button. - makes the Dismiss Errors button visible in the media views inline uploader - avoids a focus loss when activating the Dismiss Errors button See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354 Fixes #47113. Built from https://develop.svn.wordpress.org/trunk@45376 git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 15:33:53 -04:00
.uploader-inline .media-uploader-status .upload-dismiss-errors {
top: 2px;
right: 2px;
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
}
Accessibility: Improve the media views upload Dismiss Errors button. - makes the Dismiss Errors button visible in the media views inline uploader - avoids a focus loss when activating the Dismiss Errors button See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354 Fixes #47113. Built from https://develop.svn.wordpress.org/trunk@45376 git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 15:33:53 -04:00
.media-uploader-status .upload-dismiss-errors::before {
Accessibility: Improve the color contrast ratio of the dismiss notice buttons. Props chris_dev. Fixes #39970. Built from https://develop.svn.wordpress.org/trunk@40570 git-svn-id: http://core.svn.wordpress.org/trunk@40440 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-04 18:32:46 -04:00
content: "\f153";
display: block;
font: normal 16px/1 dashicons;
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
color: #787c82;
Accessibility: Improve the color contrast ratio of the dismiss notice buttons. Props chris_dev. Fixes #39970. Built from https://develop.svn.wordpress.org/trunk@40570 git-svn-id: http://core.svn.wordpress.org/trunk@40440 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-04 18:32:46 -04:00
}
Accessibility: Improve the media views upload Dismiss Errors button. - makes the Dismiss Errors button visible in the media views inline uploader - avoids a focus loss when activating the Dismiss Errors button See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354 Fixes #47113. Built from https://develop.svn.wordpress.org/trunk@45376 git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 15:33:53 -04:00
.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
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
color: #646970;
Accessibility: Improve the media views upload Dismiss Errors button. - makes the Dismiss Errors button visible in the media views inline uploader - avoids a focus loss when activating the Dismiss Errors button See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354 Fixes #47113. Built from https://develop.svn.wordpress.org/trunk@45376 git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 15:33:53 -04:00
}
.errors.media-uploader-status .upload-dismiss-errors:hover::before,
.errors.media-uploader-status .upload-dismiss-errors:focus::before {
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
color: #d63638;
Accessibility: Improve the color contrast ratio of the dismiss notice buttons. Props chris_dev. Fixes #39970. Built from https://develop.svn.wordpress.org/trunk@40570 git-svn-id: http://core.svn.wordpress.org/trunk@40440 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-04 18:32:46 -04:00
}
Media: Add uploader error detection to the inline uploader view as well. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22824 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 07:35:05 -05:00
.upload-errors .upload-error {
Media: Visually align upload errors with other admin notices. props sagarjadhav. fixes #31874. Built from https://develop.svn.wordpress.org/trunk@32506 git-svn-id: http://core.svn.wordpress.org/trunk@32476 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-05-15 12:19:26 -04:00
padding: 12px;
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
margin-bottom: 12px;
background: #fff;
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
border-left: 4px solid #d63638;
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
}
Notices: Update one more instance of white-on-white. Because the media modal can be used on the front-end, the CSS needs to be added here rather than using the notice classes. props paulwilde. fixes #32244. Built from https://develop.svn.wordpress.org/trunk@34990 git-svn-id: http://core.svn.wordpress.org/trunk@34955 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-09 13:47:25 -04:00
.uploader-inline .upload-errors .upload-error {
Accessibility: Improve the media views upload Dismiss Errors button. - makes the Dismiss Errors button visible in the media views inline uploader - avoids a focus loss when activating the Dismiss Errors button See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354 Fixes #47113. Built from https://develop.svn.wordpress.org/trunk@45376 git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 15:33:53 -04:00
padding: 12px 30px;
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
background-color: #fcf0f1;
Notices: Update one more instance of white-on-white. Because the media modal can be used on the front-end, the CSS needs to be added here rather than using the notice classes. props paulwilde. fixes #32244. Built from https://develop.svn.wordpress.org/trunk@34990 git-svn-id: http://core.svn.wordpress.org/trunk@34955 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-09 13:47:25 -04:00
box-shadow: none;
}
Media: Visually align upload errors with other admin notices. props sagarjadhav. fixes #31874. Built from https://develop.svn.wordpress.org/trunk@32506 git-svn-id: http://core.svn.wordpress.org/trunk@32476 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-05-15 12:19:26 -04:00
.upload-errors .upload-error-filename {
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 600;
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
}
Media: Add uploader error detection to the inline uploader view as well. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22824 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 07:35:05 -05:00
.upload-errors .upload-error-message {
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
display: block;
padding-top: 8px;
Properly pass WordPress uploading errors to wp.Uploader. Props koopersmith fixes #22655 git-svn-id: http://core.svn.wordpress.org/trunk@22954 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 10:40:09 -05:00
word-wrap: break-word;
Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22818 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 05:56:10 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
/**
* Window and Editor uploaders used to display "drop zones"
*/
.uploader-window,
.wp-editor-wrap .uploader-editor {
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
display: none;
}
.uploader-window {
position: fixed;
z-index: 250000;
opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
Dev/build tools: Use grunt-autoprefixer for CSS vendor prefixes. We'll be using it for two distinct tasks: * Core CSS files will keep prefixes. `grunt autoprefixer:core` will update files directly in src/ as a pre-commit step, rather than doing it on build. * Color CSS files will receive prefixes when they are built. This commit: * Adds prefixes we were missing to core CSS. * Removes prefixes that we no longer need from core CSS. * Removes all prefixes from colors CSS. props ocean90. fixes #27078. Built from https://develop.svn.wordpress.org/trunk@27174 git-svn-id: http://core.svn.wordpress.org/trunk@27038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-13 03:30:17 -05:00
transition: opacity 250ms;
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.wp-editor-wrap .uploader-editor {
position: absolute;
z-index: 99998; /* under the toolbar */
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
background: rgba(140, 143, 148, 0.9);
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
}
.uploader-window,
.wp-editor-wrap .uploader-editor.droppable {
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
background: rgba(10, 75, 120, 0.9);
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
}
.uploader-window-content,
.wp-editor-wrap .uploader-editor-content {
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px dashed #fff;
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
/* uploader drop-zone title */
.uploader-window h1, /* Back-compat for pre-5.3 */
.uploader-window .uploader-editor-title,
.wp-editor-wrap .uploader-editor .uploader-editor-title {
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
position: absolute;
top: 50%;
left: 0;
right: 0;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
transform: translateY(-50%);
font-size: 3em;
line-height: 1.3;
font-weight: 600;
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
color: #fff;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
margin: 0;
padding: 0 10px;
}
.wp-editor-wrap .uploader-editor .uploader-editor-title {
display: none;
}
.wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
display: block;
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
}
.uploader-window .media-progress-bar {
margin-top: 20px;
max-width: 300px;
background: transparent;
border-color: #fff;
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
display: none;
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
}
.uploader-window .media-progress-bar div {
background: #fff;
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
}
Give media a heart transplant. Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine. The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships). The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events. This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view). Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch. Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions. see #21390, #21809. git-svn-id: http://core.svn.wordpress.org/trunk@22320 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-28 19:29:17 -04:00
.uploading .uploader-window .media-progress-bar {
Add new media workflow scripts, styles, and templates. Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console: new wp.media.controller.Workflow().render().modal.open(); The Javascript is broken up into two files, with the slugs media-models and media-views. * media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you. * media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime... To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts': wp_enqueue_script( 'media-views' ); wp_enqueue_style( 'media-views' ); wp_plupload_default_settings(); add_action( 'admin_footer', 'wp_print_media_templates' ); see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
display: block;
Adds UI for media modal toolbars, buttons, and the selected item(s) status. Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console: wp.media({ multiple: true }); see #21390, #21808. git-svn-id: http://core.svn.wordpress.org/trunk@21769 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-06 03:46:15 -04:00
}
Improve switching between browser and upload state. Props koopersmith fixes #22628 git-svn-id: http://core.svn.wordpress.org/trunk@22945 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 01:01:47 -05:00
.media-frame .uploader-inline {
Media Grid: improve uploader styles. Props michalzuber, ericlewis. See #28851. Built from https://develop.svn.wordpress.org/trunk@29296 git-svn-id: http://core.svn.wordpress.org/trunk@29078 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-24 20:31:15 -04:00
margin-bottom: 20px;
padding: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
text-align: center;
}
.uploader-inline-content {
position: absolute;
top: 30%;
left: 0;
right: 0;
}
Media: Add support for applicable *-upload-ui hooks. Supports pre-upload-ui, pre-plupload-upload-ui, post-plupload-upload-ui, post-upload-ui. see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22557 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 20:50:08 -05:00
.uploader-inline-content .upload-ui {
Media Grid: improve uploader styles. Props michalzuber, ericlewis. See #28851. Built from https://develop.svn.wordpress.org/trunk@29296 git-svn-id: http://core.svn.wordpress.org/trunk@29078 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-24 20:31:15 -04:00
margin: 2em 0;
Media: Add support for applicable *-upload-ui hooks. Supports pre-upload-ui, pre-plupload-upload-ui, post-plupload-upload-ui, post-upload-ui. see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22557 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 20:50:08 -05:00
}
Media: Account for the most obvious and common style conflicts that may occur when the media modal is loaded on the frontend. Tested primarily with P2. props lessbloat, helenyhou. fixes #22752. git-svn-id: http://core.svn.wordpress.org/trunk@23077 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 14:15:40 -05:00
.uploader-inline-content .post-upload-ui {
margin-bottom: 2em;
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
.uploader-inline .has-upload-message .upload-ui {
margin: 0 0 4em;
}
Media: Improve the headings hierarchy in the Media Views for better accessibility. Fixes #34273. Built from https://develop.svn.wordpress.org/trunk@35427 git-svn-id: http://core.svn.wordpress.org/trunk@35391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-28 19:08:24 -04:00
.uploader-inline h2 {
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
font-size: 20px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.4;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
font-weight: 400;
Media Grid: improve uploader styles. Props michalzuber, ericlewis. See #28851. Built from https://develop.svn.wordpress.org/trunk@29296 git-svn-id: http://core.svn.wordpress.org/trunk@29078 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-24 20:31:15 -04:00
margin: 0;
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
.uploader-inline .has-upload-message .upload-instructions {
font-size: 14px;
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
color: #3c434a;
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 400;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
}
Media: Make friends with media_upload_form. Adds notices for browser incompatibility, upload limits, maximum file size, and large file issues to the uploader. fixes #22243, see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22821 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 06:46:03 -05:00
.uploader-inline .drop-instructions {
display: none;
}
.supports-drag-drop .uploader-inline .drop-instructions {
Media: Only display "Drop files" text when the browser supports drag and drop. see #22446, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22609 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-16 04:39:58 -05:00
display: block;
}
Media: Make friends with media_upload_form. Adds notices for browser incompatibility, upload limits, maximum file size, and large file issues to the uploader. fixes #22243, see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22821 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 06:46:03 -05:00
.uploader-inline p {
Media Grid: improve uploader styles. Props michalzuber, ericlewis. See #28851. Built from https://develop.svn.wordpress.org/trunk@29296 git-svn-id: http://core.svn.wordpress.org/trunk@29078 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-24 20:31:15 -04:00
margin: 0.5em 0;
Media: Make friends with media_upload_form. Adds notices for browser incompatibility, upload limits, maximum file size, and large file issues to the uploader. fixes #22243, see #22186, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22821 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 06:46:03 -05:00
}
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
.uploader-inline .media-progress-bar {
display: none;
}
.uploading.uploader-inline .media-progress-bar {
display: block;
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.uploader-inline .browser {
display: inline-block !important;
}
/**
* Selection
*/
.media-selection {
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
position: absolute;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
top: 0;
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
left: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
right: 350px;
height: 60px;
padding: 0 0 0 16px;
overflow: hidden;
white-space: nowrap;
}
.media-selection .selection-info {
display: inline-block;
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
font-size: 12px;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
height: 60px;
margin-right: 10px;
vertical-align: top;
}
Media: Hide "Edit" link in the selection view when it doesn't make sense Props koopersmith, ocean90, nacin fixes #22713 git-svn-id: http://core.svn.wordpress.org/trunk@23031 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:23:47 -05:00
.media-selection.empty,
.media-selection.editing {
display: none;
}
.media-selection.one .edit-selection {
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
display: none;
}
.media-selection .count {
display: block;
padding-top: 12px;
font-size: 14px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.42857142;
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 600;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.media-selection .button-link {
Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:36:06 -05:00
float: left;
padding: 1px 8px;
margin: 1px 8px 1px -8px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.4;
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
border-right: 1px solid #dcdcde;
color: #2271b1;
Buttons: Improve the `.button-link` CSS class for link-like buttons. Updates `.button-link` adding color and underline to make link-like buttons look like links by default. Introduces `.button-link-delete` as a modifier, stackable CSS class for red button-links. Props Cheffheid, afercia. See #34242. Fixes #35126. Built from https://develop.svn.wordpress.org/trunk@40052 git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 11:47:44 -05:00
text-decoration: none;
Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:36:06 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.media-selection .button-link:hover,
.media-selection .button-link:focus {
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
color: #135e96;
Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:36:06 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.media-selection .button-link:last-child {
Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:36:06 -05:00
border-right: 0;
Media: Hide "Edit" link in the selection view when it doesn't make sense Props koopersmith, ocean90, nacin fixes #22713 git-svn-id: http://core.svn.wordpress.org/trunk@23031 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 13:23:47 -05:00
margin-right: 0;
Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:36:06 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.selection-info .clear-selection {
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
color: #d63638;
Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-14 21:36:06 -05:00
}
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.selection-info .clear-selection:hover,
.selection-info .clear-selection:focus {
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
color: #d63638;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Media: Disable 'Insert gallery' and 'Set featured image' if nothing is queued. Converts selection toolbars to use the newer view manager. props koopersmith, fixes #22714. git-svn-id: http://core.svn.wordpress.org/trunk@23024 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 11:21:57 -05:00
.media-selection .selection-view {
display: inline-block;
Media: Account for the most obvious and common style conflicts that may occur when the media modal is loaded on the frontend. Tested primarily with P2. props lessbloat, helenyhou. fixes #22752. git-svn-id: http://core.svn.wordpress.org/trunk@23077 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 14:15:40 -05:00
vertical-align: top;
Media: Disable 'Insert gallery' and 'Set featured image' if nothing is queued. Converts selection toolbars to use the newer view manager. props koopersmith, fixes #22714. git-svn-id: http://core.svn.wordpress.org/trunk@23024 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 11:21:57 -05:00
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.media-selection .attachments {
display: inline-block;
Media: IE fixes for attachment selections. props lessbloat. see #22446. git-svn-id: http://core.svn.wordpress.org/trunk@22876 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 14:14:36 -05:00
height: 48px;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
margin: 6px;
padding: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
overflow: hidden;
vertical-align: top;
}
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
.media-selection .attachment {
Media modal: fix reordering of the thumbnails while creating or editing a gallery, props avryl, fixes #29606 for trunk. Built from https://develop.svn.wordpress.org/trunk@29876 git-svn-id: http://core.svn.wordpress.org/trunk@29633 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-11 19:24:23 -04:00
width: 40px;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
padding: 0;
Media modal: fix reordering of the thumbnails while creating or editing a gallery, props avryl, fixes #29606 for trunk. Built from https://develop.svn.wordpress.org/trunk@29876 git-svn-id: http://core.svn.wordpress.org/trunk@29633 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-11 19:24:23 -04:00
margin: 4px;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
.media-selection .attachment .thumbnail {
Media modal: fix reordering of the thumbnails while creating or editing a gallery, props avryl, fixes #29606 for trunk. Built from https://develop.svn.wordpress.org/trunk@29876 git-svn-id: http://core.svn.wordpress.org/trunk@29633 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-11 19:24:23 -04:00
top: 0;
right: 0;
bottom: 0;
left: 0;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
.media-selection .attachment .icon {
Media: IE fixes for attachment selections. props lessbloat. see #22446. git-svn-id: http://core.svn.wordpress.org/trunk@22876 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 14:14:36 -05:00
width: 50%;
}
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
.media-selection .attachment-preview {
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
box-shadow: none;
Media: * Make attachment focus styles more obvious, particularly for already selected items. * Fix styling for the selection set attachments. * Remove some CSS cruft. fixes #28822. Built from https://develop.svn.wordpress.org/trunk@29607 git-svn-id: http://core.svn.wordpress.org/trunk@29381 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-25 17:26:16 -04:00
background: none;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
Media: Fix focus and selected state for the selected attachments set. props iseulde. fixes #31898. Built from https://develop.svn.wordpress.org/trunk@32072 git-svn-id: http://core.svn.wordpress.org/trunk@32051 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-07 17:29:26 -04:00
.wp-core-ui .media-selection .attachment:focus,
.wp-core-ui .media-selection .selected.attachment:focus,
.wp-core-ui .media-selection .attachment.details:focus {
box-shadow:
0 0 0 1px #fff,
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
0 0 2px 3px #4f94d4;
Accessibility: Add focus styles for Windows High Contrast mode. Introduces in core new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline as already explored in the Block Editor. This first part covers some of the main user interface controls like buttons, links, and media views elements. Other parts will be addressed in the next future. Fixes #41286. Built from https://develop.svn.wordpress.org/trunk@44544 git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 11:47:50 -05:00
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
Media: Fix focus and selected state for the selected attachments set. props iseulde. fixes #31898. Built from https://develop.svn.wordpress.org/trunk@32072 git-svn-id: http://core.svn.wordpress.org/trunk@32051 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-07 17:29:26 -04:00
}
.wp-core-ui .media-selection .selected.attachment {
box-shadow: none;
}
.wp-core-ui .media-selection .attachment.details {
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
box-shadow:
0 0 0 1px #fff,
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
0 0 0 3px #2271b1;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
}
.media-selection:after {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "";
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
display: block;
position: absolute;
top: 0;
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
right: 0;
bottom: 0;
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
width: 25px;
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
background-image: linear-gradient(to left,#fff,rgba(255, 255, 255, 0));
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
}
Streamlining media, part I. The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits. This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image. The fine print follows. ---- '''Styles''' * Tightened padding around the modal to optimize for a smaller default screen size. * Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state). * Add a size for `hero` buttons. * Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar). ---- '''Code''' `wp.media.controller.StateManager` * Don't fire `activate` and `deactivate` if attempting to switch to the current state. `wp.media.controller.State` * Add a base state class to bind default methods (as not all states will inherit from the `Library` state). * On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`. * The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute. * `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`. `wp.media.controller.Library` * Now inherits from `wp.media.controller.State`. `wp.media.controller.Upload` * A new state to improve the upload experience. * Displays a large dropzone when empty (a `UploaderInline` view). * When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session). `wp.media.view.Frame` * In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed. * `wp.media.view.PriorityList` * A new container view used to sort and render child views by the `priority` property. * Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`. * Next step: Use two instances to power `wp.media.view.Toolbar`. `wp.media.view.Menu` and `wp.media.view.MenuItem` * A new `PriorityList` view that renders a list of views used to switch between states. * `MenuItem` instances have `id` attributes that are tied directly to states. * Separators can be added as plain `Backbone.View` instances with the `separator` class. * Supports any type of `Backbone.View`. `media.view.Menu.Landing` * The landing menu for the 'insert media' workflow. * Includes an inactive link to an "Embed from URL" state. * Next steps: only use in select cases to allot for other workflows (such as featured images). `wp.media.view.AttachmentsBrowser` * A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property). * Currently only renders a `Search` view as a control. * Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI. `wp.media.view.Attachments` * If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments. * Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties. * Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element. * `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing. * Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views. `wp.media.view.UploaderWindow` * Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button. `wp.media.view.UploaderInline` * No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance. * Used as the default `upload` state view. `wp.media.view.Selection` * An interactive representation of the selected `Attachments`. * Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`. ---- see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
.media-selection .attachment .filename {
display: none;
Add inline uploader UI to media modal sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 03:38:13 -04:00
}
Show a spinner when attachment details are saved. Props koopersmith see #22613 git-svn-id: http://core.svn.wordpress.org/trunk@22991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 01:37:49 -05:00
/**
* Spinner
*/
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
.media-frame .spinner {
Remove unnecessary quotes from urls in CSS. props TobiasBg. fixes #22476. Built from https://develop.svn.wordpress.org/trunk@27289 git-svn-id: http://core.svn.wordpress.org/trunk@27145 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-26 12:23:13 -05:00
background: url(../images/spinner.gif) no-repeat;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
background-size: 20px 20px;
Media: Bring back spinners, now without bouncing select elements. props afercia for the initial patch. see #22839, #30725. Built from https://develop.svn.wordpress.org/trunk@32101 git-svn-id: http://core.svn.wordpress.org/trunk@32080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-09 16:35:28 -04:00
float: right;
display: inline-block;
visibility: hidden;
Show a spinner when attachment details are saved. Props koopersmith see #22613 git-svn-id: http://core.svn.wordpress.org/trunk@22991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 01:37:49 -05:00
opacity: 0.7;
filter: alpha(opacity=70);
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
width: 20px;
height: 20px;
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
margin: 0;
Media: Bring back spinners, now without bouncing select elements. props afercia for the initial patch. see #22839, #30725. Built from https://develop.svn.wordpress.org/trunk@32101 git-svn-id: http://core.svn.wordpress.org/trunk@32080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-09 16:35:28 -04:00
vertical-align: middle;
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.media-frame.mode-grid .spinner {
margin: 0;
float: none;
vertical-align: middle;
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.media-modal .media-toolbar .spinner {
float: none;
vertical-align: bottom;
margin: 0 0 5px 5px;
}
Accessibility: Media: Improve the Media Modal spinner position after [46418]. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46549 git-svn-id: http://core.svn.wordpress.org/trunk@46346 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-15 12:47:02 -04:00
.media-frame .instructions + .spinner.is-active {
vertical-align: middle;
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.media-frame .spinner.is-active {
visibility: visible;
Add a loading indicator to the Media Library. Props kadamwhite, gcorne, kovshenin. Fixes #24859. Built from https://develop.svn.wordpress.org/trunk@27438 git-svn-id: http://core.svn.wordpress.org/trunk@27285 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 12:46:15 -05:00
}
Media Grid Attachment Details modal UI improvements: * Align better visually with the existing media modal and the post image edit modal. * Add back a link to the full attachment edit screen (post.php). * Add a title to the modal and move prev/next buttons next to the more-consistent close button. * Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button. Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup. props ericlewis, helen, melchoyce. see #28844. fixes #28915. Built from https://develop.svn.wordpress.org/trunk@29204 git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-16 23:55:15 -04:00
/**
* Attachment Details
*/
.attachment-details {
position: relative;
overflow: auto;
}
.attachment-details .settings-save-status {
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
float: right;
text-transform: none;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
font-weight: 400;
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
}
Revert styling changes to the Attachment Details modal from [29289]. fixes #28844. Built from https://develop.svn.wordpress.org/trunk@29436 git-svn-id: http://core.svn.wordpress.org/trunk@29214 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 16:32:16 -04:00
.attachment-details .settings-save-status .spinner {
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
float: none;
Media: Bring back spinners, now without bouncing select elements. props afercia for the initial patch. see #22839, #30725. Built from https://develop.svn.wordpress.org/trunk@32101 git-svn-id: http://core.svn.wordpress.org/trunk@32080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-09 16:35:28 -04:00
margin-left: 5px;
Show a spinner when attachment details are saved. Props koopersmith see #22613 git-svn-id: http://core.svn.wordpress.org/trunk@22991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 01:37:49 -05:00
}
Media Grid Attachment Details modal UI improvements: * Align better visually with the existing media modal and the post image edit modal. * Add back a link to the full attachment edit screen (post.php). * Add a title to the modal and move prev/next buttons next to the more-consistent close button. * Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button. Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup. props ericlewis, helen, melchoyce. see #28844. fixes #28915. Built from https://develop.svn.wordpress.org/trunk@29204 git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-16 23:55:15 -04:00
.attachment-details .settings-save-status .saved {
Show a spinner when attachment details are saved. Props koopersmith see #22613 git-svn-id: http://core.svn.wordpress.org/trunk@22991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 01:37:49 -05:00
display: none;
}
Media: Bring back spinners, now without bouncing select elements. props afercia for the initial patch. see #22839, #30725. Built from https://develop.svn.wordpress.org/trunk@32101 git-svn-id: http://core.svn.wordpress.org/trunk@32080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-09 16:35:28 -04:00
.attachment-details.save-waiting .settings-save-status .spinner {
visibility: visible;
}
Media Grid Attachment Details modal UI improvements: * Align better visually with the existing media modal and the post image edit modal. * Add back a link to the full attachment edit screen (post.php). * Add a title to the modal and move prev/next buttons next to the more-consistent close button. * Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button. Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup. props ericlewis, helen, melchoyce. see #28844. fixes #28915. Built from https://develop.svn.wordpress.org/trunk@29204 git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-16 23:55:15 -04:00
.attachment-details.save-complete .settings-save-status .saved {
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
display: inline-block;
Show a spinner when attachment details are saved. Props koopersmith see #22613 git-svn-id: http://core.svn.wordpress.org/trunk@22991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 01:37:49 -05:00
}
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
.attachment-info {
overflow: hidden;
min-height: 60px;
margin-bottom: 16px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.5;
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
color: #646970;
border-bottom: 1px solid #dcdcde;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
padding-bottom: 11px;
Add attachment details to the media sidebar. * Also moves most of the `Frame` view's `createSelection` method to a real `Selection` model (which inherits from the `Attachments` model). * Properly assigns the library within the `Gallery` state, allowing for the `Gallery` state to inherit from the `Library` state. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 11:13:02 -04:00
}
Media: Add an audio and video player to the media manager modal. This introduces a means of playing existing audio and video files while browsing them prior to selecting them for use. Props antpb, Mista-Flo, garrett-eclipse, mapk Fixes #43640 Built from https://develop.svn.wordpress.org/trunk@49195 git-svn-id: http://core.svn.wordpress.org/trunk@48957 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-18 13:39:07 -04:00
.attachment-info .wp-media-wrapper {
margin-bottom: 8px;
}
.attachment-info .wp-media-wrapper.wp-audio {
margin-top: 13px;
}
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
.attachment-info .filename {
Use numeric font weights instead of keywords. When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight. The WordPress CSS Coding Standards have been updated accordingly. props coderste. see #36753. Built from https://develop.svn.wordpress.org/trunk@37740 git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 14:37:28 -04:00
font-weight: 600;
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
color: #3c434a;
Media: Prevent the compat view from wrapping around the attachment details. Allow the filename to break-word. props koopersmith, SergeyBiryukov. fixes #22667. git-svn-id: http://core.svn.wordpress.org/trunk@22983 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-02 23:15:32 -05:00
word-wrap: break-word;
Add attachment details to the media sidebar. * Also moves most of the `Frame` view's `createSelection` method to a real `Selection` model (which inherits from the `Attachments` model). * Properly assigns the library within the `Gallery` state, allowing for the `Gallery` state to inherit from the `Library` state. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 11:13:02 -04:00
}
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
.attachment-info .thumbnail {
position: relative;
float: left;
max-width: 120px;
max-height: 120px;
Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou. git-svn-id: http://core.svn.wordpress.org/trunk@23095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 00:52:19 -05:00
margin-top: 5px;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
margin-right: 10px;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
margin-bottom: 5px;
Improve attachment detailed preview styling. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:16:12 -04:00
}
Media: Ensure variables in the attachment details template have defined defaults. * Adds styling to the upload progress bar in the attachment details template. * Defines the `filename` attribute when Plupload creates the client-side `Attachment` model. fixes #22410, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22543 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-11 00:16:41 -05:00
.uploading .attachment-info .thumbnail {
width: 120px;
height: 80px;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
Media: Ensure variables in the attachment details template have defined defaults. * Adds styling to the upload progress bar in the attachment details template. * Defines the `filename` attribute when Plupload creates the client-side `Attachment` model. fixes #22410, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22543 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-11 00:16:41 -05:00
}
.uploading .attachment-info .media-progress-bar {
Media: Add global upload progress to the sidebar. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22816 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 04:32:21 -05:00
margin-top: 35px;
Media: Ensure variables in the attachment details template have defined defaults. * Adds styling to the upload progress bar in the attachment details template. * Defines the `filename` attribute when Plupload creates the client-side `Attachment` model. fixes #22410, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22543 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-11 00:16:41 -05:00
}
In the `Attachment Details` section of the media modal, only add `box-shadow` to images. Other mime-type icons look strange with an arbitrary border. Props avryl. Fixes #27949. Built from https://develop.svn.wordpress.org/trunk@28369 git-svn-id: http://core.svn.wordpress.org/trunk@28197 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-11 02:19:14 -04:00
.attachment-info .thumbnail-image:after {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "";
Improve attachment detailed preview styling. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:16:12 -04:00
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
Improve attachment detailed preview styling. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 14:16:12 -04:00
overflow: hidden;
}
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
.attachment-info .thumbnail img {
Add attachment details to the media sidebar. * Also moves most of the `Frame` view's `createSelection` method to a real `Selection` model (which inherits from the `Attachments` model). * Properly assigns the library within the `Gallery` state, allowing for the `Gallery` state to inherit from the `Library` state. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 11:13:02 -04:00
display: block;
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
max-width: 120px;
max-height: 120px;
Add attachment details to the media sidebar. * Also moves most of the `Frame` view's `createSelection` method to a real `Selection` model (which inherits from the `Attachments` model). * Properly assigns the library within the `Gallery` state, allowing for the `Gallery` state to inherit from the `Library` state. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 11:13:02 -04:00
margin: 0 auto;
}
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
.attachment-info .details {
Add attachment details to the media sidebar. * Also moves most of the `Frame` view's `createSelection` method to a real `Selection` model (which inherits from the `Attachments` model). * Properly assigns the library within the `Gallery` state, allowing for the `Gallery` state to inherit from the `Library` state. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22323 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-29 11:13:02 -04:00
float: left;
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
font-size: 12px;
Media: Prevent the compat view from wrapping around the attachment details. Allow the filename to break-word. props koopersmith, SergeyBiryukov. fixes #22667. git-svn-id: http://core.svn.wordpress.org/trunk@22983 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-02 23:15:32 -05:00
max-width: 100%;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
}
Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou. git-svn-id: http://core.svn.wordpress.org/trunk@23095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 00:52:19 -05:00
.attachment-info .edit-attachment,
When `MEDIA_TRASH` is true, show the proper context in the `attachment-details` sidebar. Without this fix, it always showed "Delete Permanently." Props toszcze. Fixes #26783. Built from https://develop.svn.wordpress.org/trunk@27454 git-svn-id: http://core.svn.wordpress.org/trunk@27300 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-07 11:42:14 -05:00
.attachment-info .delete-attachment,
Media Grid, support `MEDIA_TRASH`: * Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash` * In the attachment edit modal, properly toggle between Trash/Untrash * In `media.view.Attachment`, add a method for `untrashAttachment` * When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI. * Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true * Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter. * Cleanup the bootstrapping of `media.view.MediaFrame.Manage` * Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true` * Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set. Props koop for the knowledge sharing and thought partnership. See #29145. Built from https://develop.svn.wordpress.org/trunk@29490 git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 14:31:19 -04:00
.attachment-info .trash-attachment,
.attachment-info .untrash-attachment {
Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou. git-svn-id: http://core.svn.wordpress.org/trunk@23095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 00:52:19 -05:00
display: block;
Add a delete link to the media modal. Props merty, nacin, koopersmith fixes #22524 git-svn-id: http://core.svn.wordpress.org/trunk@22869 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:50:59 -05:00
text-decoration: none;
No wrap for the attachment Delete Permanently link in the media modal. Props SergeyBiryukov fixes #22667 git-svn-id: http://core.svn.wordpress.org/trunk@22998 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 14:49:45 -05:00
white-space: nowrap;
Add a delete link to the media modal. Props merty, nacin, koopersmith fixes #22524 git-svn-id: http://core.svn.wordpress.org/trunk@22869 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:50:59 -05:00
}
Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou. git-svn-id: http://core.svn.wordpress.org/trunk@23095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 00:52:19 -05:00
.attachment-details.needs-refresh .attachment-info .edit-attachment {
display: none;
}
.attachment-info .edit-attachment {
display: block;
}
Media Grid Attachment Details modal UI improvements: * Align better visually with the existing media modal and the post image edit modal. * Add back a link to the full attachment edit screen (post.php). * Add a title to the modal and move prev/next buttons next to the more-consistent close button. * Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button. Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup. props ericlewis, helen, melchoyce. see #28844. fixes #28915. Built from https://develop.svn.wordpress.org/trunk@29204 git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-16 23:55:15 -04:00
.media-modal .delete-attachment,
Media Grid, support `MEDIA_TRASH`: * Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash` * In the attachment edit modal, properly toggle between Trash/Untrash * In `media.view.Attachment`, add a method for `untrashAttachment` * When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI. * Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true * Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter. * Cleanup the bootstrapping of `media.view.MediaFrame.Manage` * Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true` * Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set. Props koop for the knowledge sharing and thought partnership. See #29145. Built from https://develop.svn.wordpress.org/trunk@29490 git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 14:31:19 -04:00
.media-modal .trash-attachment,
.media-modal .untrash-attachment {
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
display: inline;
padding: 0;
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
color: #d63638;
Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou. git-svn-id: http://core.svn.wordpress.org/trunk@23095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 00:52:19 -05:00
}
Media Grid Attachment Details modal UI improvements: * Align better visually with the existing media modal and the post image edit modal. * Add back a link to the full attachment edit screen (post.php). * Add a title to the modal and move prev/next buttons next to the more-consistent close button. * Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button. Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup. props ericlewis, helen, melchoyce. see #28844. fixes #28915. Built from https://develop.svn.wordpress.org/trunk@29204 git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-16 23:55:15 -04:00
.media-modal .delete-attachment:hover,
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.media-modal .delete-attachment:focus,
Media Grid, support `MEDIA_TRASH`: * Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash` * In the attachment edit modal, properly toggle between Trash/Untrash * In `media.view.Attachment`, add a method for `untrashAttachment` * When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI. * Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true * Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter. * Cleanup the bootstrapping of `media.view.MediaFrame.Manage` * Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true` * Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set. Props koop for the knowledge sharing and thought partnership. See #29145. Built from https://develop.svn.wordpress.org/trunk@29490 git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-14 14:31:19 -04:00
.media-modal .trash-attachment:hover,
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
.media-modal .trash-attachment:focus,
.media-modal .untrash-attachment:hover,
.media-modal .untrash-attachment:focus {
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
color: #d63638;
Add a delete link to the media modal. Props merty, nacin, koopersmith fixes #22524 git-svn-id: http://core.svn.wordpress.org/trunk@22869 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 10:50:59 -05:00
}
Add attachment display settings to the media modal. * Add a media view for button groups. * Add button dropdown containers. * Add a dropdown property to the button media model. fixes #22206, #21814, see #21390, #21813, #21598. git-svn-id: http://core.svn.wordpress.org/trunk@22247 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 15:25:17 -04:00
/**
* Attachment Display Settings
*/
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
.attachment-display-settings {
Media: Set a max width on select elements in the sidebar. fixes #22517, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22733 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 17:51:35 -05:00
width: 100%;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
float: left;
Media: Set a max width on select elements in the sidebar. fixes #22517, see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22733 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-20 17:51:35 -05:00
overflow: hidden;
Media: Add backwards compatibility for attachment_fields_to_edit and attachment_fields_to_save. see #22186. git-svn-id: http://core.svn.wordpress.org/trunk@22541 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 20:26:42 -05:00
}
Add attachment display settings to the media modal. * Add a media view for button groups. * Add button dropdown containers. * Add a dropdown property to the button media model. fixes #22206, #21814, see #21390, #21813, #21598. git-svn-id: http://core.svn.wordpress.org/trunk@22247 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-10-16 15:25:17 -04:00
Add core support for Playlists and Video Playlists. * Playlists operate like galleries in the admin. * Provide default UI and JS support in themes using MediaElement and Backbone. * The shortcodes are clickable, editable, and configurable using the media modal. * Playlists support images for each item, whether or not the current theme supports images for `attachment:audio` and `attachment:video` * Playlists respond to `$content_width` and resize videos accordingly. * All playlist data is included inline, using a script tag with `type="application/json"`, allowing anyone to unenqueue the WP playlist JS and roll their own. * Playlist styles are minimal and work out of the box in the last 5 default themes. They inherit and adapt to the current theme's font styles, and their rules are easily overrideable. See #26631. Built from https://develop.svn.wordpress.org/trunk@27239 git-svn-id: http://core.svn.wordpress.org/trunk@27096 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-24 13:08:16 -05:00
.collection-settings {
Media: Add title, caption, and alt text, and attachment info to sidebar. * Improve sidebar styles. * Separate the hybrid title/caption field. * Improve the sidebar image thumbnail. * Remove filenames from inside the non-image icon thumbnail. * Properly sync title/caption/alt. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22532 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-10 13:25:04 -05:00
overflow: hidden;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
}
Update the UI styles for Playlist Settings. Props melchoyce for the design. See #26631. Built from https://develop.svn.wordpress.org/trunk@27487 git-svn-id: http://core.svn.wordpress.org/trunk@27331 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-09 19:19:15 -04:00
.collection-settings .setting input[type="checkbox"] {
float: left;
margin-right: 8px;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.collection-settings .setting span, /* Back-compat for pre-5.3 */
.collection-settings .setting .name {
Update the UI styles for Playlist Settings. Props melchoyce for the design. See #26631. Built from https://develop.svn.wordpress.org/trunk@27487 git-svn-id: http://core.svn.wordpress.org/trunk@27331 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-09 19:19:15 -04:00
min-width: inherit;
}
At long last, a first pass at bringing the image editor into the media modal. props gcorne, DH-Shredder, tomauger. see #21811. Built from https://develop.svn.wordpress.org/trunk@27445 git-svn-id: http://core.svn.wordpress.org/trunk@27292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 17:55:14 -05:00
/**
* Image Editor
*/
Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716. Built from https://develop.svn.wordpress.org/trunk@29053 git-svn-id: http://core.svn.wordpress.org/trunk@28841 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 21:24:14 -04:00
.media-modal .imgedit-wrap {
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
position: static;
At long last, a first pass at bringing the image editor into the media modal. props gcorne, DH-Shredder, tomauger. see #21811. Built from https://develop.svn.wordpress.org/trunk@27445 git-svn-id: http://core.svn.wordpress.org/trunk@27292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 17:55:14 -05:00
}
Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716. Built from https://develop.svn.wordpress.org/trunk@29053 git-svn-id: http://core.svn.wordpress.org/trunk@28841 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 21:24:14 -04:00
.media-modal .imgedit-wrap .imgedit-panel-content {
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
padding: 16px 16px 0 16px;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
position: absolute;
top: 0;
right: 282px;
bottom: 0;
left: 0;
overflow: auto;
At long last, a first pass at bringing the image editor into the media modal. props gcorne, DH-Shredder, tomauger. see #21811. Built from https://develop.svn.wordpress.org/trunk@27445 git-svn-id: http://core.svn.wordpress.org/trunk@27292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 17:55:14 -05:00
}
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
/*
* Implementation of bottom padding in overflow content differs across browsers.
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
*/
.media-modal .imgedit-wrap .imgedit-submit {
margin-bottom: 16px;
}
Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716. Built from https://develop.svn.wordpress.org/trunk@29053 git-svn-id: http://core.svn.wordpress.org/trunk@28841 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 21:24:14 -04:00
.media-modal .imgedit-wrap .imgedit-settings {
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
background: #f6f7f7;
border-left: 1px solid #dcdcde;
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
padding: 20px 16px 0;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
position: absolute;
top: 0;
right: 0;
bottom: 0;
At long last, a first pass at bringing the image editor into the media modal. props gcorne, DH-Shredder, tomauger. see #21811. Built from https://develop.svn.wordpress.org/trunk@27445 git-svn-id: http://core.svn.wordpress.org/trunk@27292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 17:55:14 -05:00
width: 250px;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
overflow: auto;
}
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
/*
* Implementation of bottom padding in overflow content differs across browsers.
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
*/
.media-modal .imgedit-wrap .imgedit-save-target {
margin: 8px 0 24px;
}
Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716. Built from https://develop.svn.wordpress.org/trunk@29053 git-svn-id: http://core.svn.wordpress.org/trunk@28841 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 21:24:14 -04:00
.media-modal .imgedit-group {
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
background: none;
border: 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
border-bottom: 1px solid #dcdcde;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
box-shadow: none;
margin: 0;
margin-bottom: 16px;
padding: 0;
padding-bottom: 16px;
RTL: Fix modal alignments. * Prevent horizontal scrollbars in Chrome. * URL fields should be always LTR. * Force the plugin details to be LTR for all screens, see #19778. fixes #29352. Built from https://develop.svn.wordpress.org/trunk@29623 git-svn-id: http://core.svn.wordpress.org/trunk@29397 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 08:55:16 -04:00
position: relative; /* RTL fix, #WP29352 */
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
}
Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716. Built from https://develop.svn.wordpress.org/trunk@29053 git-svn-id: http://core.svn.wordpress.org/trunk@28841 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 21:24:14 -04:00
.media-modal .imgedit-group:last-of-type {
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
border: none;
margin: 0;
padding: 0;
}
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
.media-modal .imgedit-group-top {
margin: 0;
}
.media-modal .imgedit-group-top h2,
.media-modal .imgedit-group-top h2 .button-link {
display: inline-block;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
text-transform: uppercase;
font-size: 12px;
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
color: #646970;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
margin: 0;
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
margin-top: 3px;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
}
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
.media-modal .imgedit-group-top h2 a,
.media-modal .imgedit-group-top h2 .button-link {
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
text-decoration: 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
color: #646970;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
}
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
/* higher specificity than media.css */
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
border: 1px solid transparent;
margin: 0;
padding: 0;
background: transparent;
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
color: #2271b1;
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
font-size: 20px;
line-height: 1;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
cursor: pointer;
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
box-sizing: content-box;
box-shadow: none;
}
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
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
color: #2271b1;
border-color: #4f94d4;
box-shadow: 0 0 3px rgba(34, 113, 177, 0.8);
Accessibility: Add focus styles for Windows High Contrast mode. Introduces in core new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline as already explored in the Block Editor. This first part covers some of the main user interface controls like buttons, links, and media views elements. Other parts will be addressed in the next future. Fixes #41286. Built from https://develop.svn.wordpress.org/trunk@44544 git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 11:47:50 -05:00
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
}
.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;
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
}
Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716. Built from https://develop.svn.wordpress.org/trunk@29053 git-svn-id: http://core.svn.wordpress.org/trunk@28841 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-09 21:24:14 -04:00
.media-modal .imgedit-help-toggled span.dashicons:before {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "\f142";
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
}
Media: make the Image Editor usable with a keyboard. For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-08 14:13:26 -05:00
.media-modal .imgedit-thumbnail-preview {
margin: 10px 8px 0 0;
}
.imgedit-thumbnail-preview-caption {
display: block;
At long last, a first pass at bringing the image editor into the media modal. props gcorne, DH-Shredder, tomauger. see #21811. Built from https://develop.svn.wordpress.org/trunk@27445 git-svn-id: http://core.svn.wordpress.org/trunk@27292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 17:55:14 -05:00
}
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
Accessibility: Media: Improve accessibility of the status and error messages in the Image Editor. - improves focus management by moving focus to the notices, if any, or to the first "tabbable" element - this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages - adds an ARIA role `alert` to all the notices - uses `wp.a11y.speak()` to announce messages to assistive technology - this way, all visual users will see the messages while assistive technology users will get an audible message - uses `wp.i18n` for translatable strings in `wp-admin/js/image-edit.js` Props anevins, ryanshoover, antpb, SergeyBiryukov, afercia. See #20491. Fixes #47147. Built from https://develop.svn.wordpress.org/trunk@48375 git-svn-id: http://core.svn.wordpress.org/trunk@48144 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-07-07 09:45:02 -04:00
.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
.media-modal .imgedit-wrap .notice {
Restyle the image editor so it looks way less hideous. props avryl. see #27544. Built from https://develop.svn.wordpress.org/trunk@27842 git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 04:51:14 -04:00
margin: 0;
margin-bottom: 16px;
}
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
/**
Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409. Built from https://develop.svn.wordpress.org/trunk@27050 git-svn-id: http://core.svn.wordpress.org/trunk@26924 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-28 16:17:12 -05:00
* Embed from URL and Image Details
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
*/
.embed-url {
display: block;
position: relative;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
padding: 16px;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
margin: 0;
Final round of media UX improvements. Props koopersmith fixes #21390 #22502 git-svn-id: http://core.svn.wordpress.org/trunk@23006 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-03 20:26:03 -05:00
z-index: 250;
background: #fff;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
font-size: 18px;
}
Scope media views CSS fallbacks. Props koopersmith fixes #22616 git-svn-id: http://core.svn.wordpress.org/trunk@22886 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:45:06 -05:00
.media-frame .embed-url input {
Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22782 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-21 13:37:52 -05:00
font-size: 18px;
Media: Fix the media modal "Insert from URL" field height after [46356]. See #47477. Built from https://develop.svn.wordpress.org/trunk@46362 git-svn-id: http://core.svn.wordpress.org/trunk@46161 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:20:58 -04:00
line-height: 1.22222222; /* 22px */
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
width: 100%;
min-width: 200px;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-frame .embed-url input::-ms-clear {
display: none; /* the "x" in IE 11 conflicts with the spinner */
}
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
.media-frame .embed-url .spinner {
position: absolute;
When adding a URL in the `Insert from URL` state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields. This will probably be iterated upon. Props helen, jtsternberg, wonderboymusic. See #15490. Built from https://develop.svn.wordpress.org/trunk@28581 git-svn-id: http://core.svn.wordpress.org/trunk@28406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-26 19:57:14 -04:00
top: 32px;
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
right: 26px;
}
.media-frame .embed-loading .embed-url .spinner {
Media: Bring back spinners, now without bouncing select elements. props afercia for the initial patch. see #22839, #30725. Built from https://develop.svn.wordpress.org/trunk@32101 git-svn-id: http://core.svn.wordpress.org/trunk@32080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-09 16:35:28 -04:00
visibility: visible;
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
}
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
.embed-link-settings,
Add TinyMCE placeholders for `audio` and `video` shortcodes. * Add `wp.media.mixin`. * Add `wp.media.audio` and `wp.media.video`. * Add `wp.media.model.PostAudio` and `wp.media.model.PostVideo` * Add `wp.media.controller.AudioDetails` and `wp.media.controller.VideoDetails`. * Add `wp.media.controller.ReplaceAudio` and `wp.media.controller.ReplaceVideo`. * Add `wp.media.view.MediaFrame.AudioDetails` and `wp.media.view.MediaFrame.VideoDetails`. * Add `wp.media.view.AudioDetails` and `wp.media.view.VideoDetails`. * Update the `wpgallery` TinyMCE plugin. * Display audio and video players in the media modal when shortcode is clicked. * Provide a UI to edit shortcode attributes in the media modal. * Provide a UI to replace the `src` media file in an `audio` or `video` shortcode. See #27016. Built from https://develop.svn.wordpress.org/trunk@27411 git-svn-id: http://core.svn.wordpress.org/trunk@27258 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-05 10:06:14 -05:00
.embed-media-settings {
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
position: absolute;
When adding a URL in the `Insert from URL` state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields. This will probably be iterated upon. Props helen, jtsternberg, wonderboymusic. See #15490. Built from https://develop.svn.wordpress.org/trunk@28581 git-svn-id: http://core.svn.wordpress.org/trunk@28406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-26 19:57:14 -04:00
top: 70px;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
left: 0;
right: 0;
bottom: 0;
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
padding: 0 16px;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
overflow: auto;
}
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
/*
* Implementation of bottom padding in overflow content differs across browsers.
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
*/
.embed-link-settings::after,
.embed-media-settings::after {
content: "";
display: flex;
clear: both;
height: 24px;
}
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
.media-embed .embed-link-settings {
/* avoid Firefox to give focus to the embed preview container parent */
overflow: visible;
}
In the `Insert From URL` state of the `Post` frame, add the necessary CSS for focus styles for images. Example image to insert: https://flic.kr/p/rnsm5M See #28820. Built from https://develop.svn.wordpress.org/trunk@31585 git-svn-id: http://core.svn.wordpress.org/trunk@31566 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-02-27 17:13:27 -05:00
.embed-preview img,
.embed-preview iframe,
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
.embed-preview embed,
.mejs-container video {
When adding a URL in the `Insert from URL` state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields. This will probably be iterated upon. Props helen, jtsternberg, wonderboymusic. See #15490. Built from https://develop.svn.wordpress.org/trunk@28581 git-svn-id: http://core.svn.wordpress.org/trunk@28406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-26 19:57:14 -04:00
max-width: 100%;
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
vertical-align: middle;
When adding a URL in the `Insert from URL` state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields. This will probably be iterated upon. Props helen, jtsternberg, wonderboymusic. See #15490. Built from https://develop.svn.wordpress.org/trunk@28581 git-svn-id: http://core.svn.wordpress.org/trunk@28406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-26 19:57:14 -04:00
}
In the `Insert From URL` state of the `Post` frame, add the necessary CSS for focus styles for images. Example image to insert: https://flic.kr/p/rnsm5M See #28820. Built from https://develop.svn.wordpress.org/trunk@31585 git-svn-id: http://core.svn.wordpress.org/trunk@31566 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-02-27 17:13:27 -05:00
.embed-preview a {
display: inline-block;
}
When adding a URL in the `Insert from URL` state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields. This will probably be iterated upon. Props helen, jtsternberg, wonderboymusic. See #15490. Built from https://develop.svn.wordpress.org/trunk@28581 git-svn-id: http://core.svn.wordpress.org/trunk@28406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-26 19:57:14 -04:00
.embed-preview img {
In the `Insert From URL` state of the `Post` frame, add the necessary CSS for focus styles for images. Example image to insert: https://flic.kr/p/rnsm5M See #28820. Built from https://develop.svn.wordpress.org/trunk@31585 git-svn-id: http://core.svn.wordpress.org/trunk@31566 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-02-27 17:13:27 -05:00
display: block;
When adding a URL in the `Insert from URL` state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields. This will probably be iterated upon. Props helen, jtsternberg, wonderboymusic. See #15490. Built from https://develop.svn.wordpress.org/trunk@28581 git-svn-id: http://core.svn.wordpress.org/trunk@28406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-26 19:57:14 -04:00
height: auto;
}
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
.mejs-container:focus {
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
outline: 1px solid #4f94d4;
box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8);
Improve focus when previewing an oEmbed from Add Media Panel Props afercia. Fixes #28820. Built from https://develop.svn.wordpress.org/trunk@32861 git-svn-id: http://core.svn.wordpress.org/trunk@32832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-19 14:49:27 -04:00
}
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.image-details .media-modal {
left: 140px;
right: 140px;
}
.image-details .media-frame-title,
.image-details .media-frame-content,
.image-details .media-frame-router {
left: 0;
}
Add TinyMCE placeholders for `audio` and `video` shortcodes. * Add `wp.media.mixin`. * Add `wp.media.audio` and `wp.media.video`. * Add `wp.media.model.PostAudio` and `wp.media.model.PostVideo` * Add `wp.media.controller.AudioDetails` and `wp.media.controller.VideoDetails`. * Add `wp.media.controller.ReplaceAudio` and `wp.media.controller.ReplaceVideo`. * Add `wp.media.view.MediaFrame.AudioDetails` and `wp.media.view.MediaFrame.VideoDetails`. * Add `wp.media.view.AudioDetails` and `wp.media.view.VideoDetails`. * Update the `wpgallery` TinyMCE plugin. * Display audio and video players in the media modal when shortcode is clicked. * Provide a UI to edit shortcode attributes in the media modal. * Provide a UI to replace the `src` media file in an `audio` or `video` shortcode. See #27016. Built from https://develop.svn.wordpress.org/trunk@27411 git-svn-id: http://core.svn.wordpress.org/trunk@27258 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-05 10:06:14 -05:00
.image-details .embed-media-settings {
Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409. Built from https://develop.svn.wordpress.org/trunk@27050 git-svn-id: http://core.svn.wordpress.org/trunk@26924 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-28 16:17:12 -05:00
top: 0;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
overflow: visible;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
padding: 0;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
}
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
.image-details .embed-media-settings::after {
content: none;
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
.image-details .embed-media-settings,
.image-details .embed-media-settings div {
box-sizing: border-box;
}
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.image-details .column-settings {
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
background: #f6f7f7;
border-right: 1px solid #dcdcde;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
min-height: 100%;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
width: 55%;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
position: absolute;
top: 0;
left: 0;
}
Media: Improve the headings hierarchy in the Media Views for better accessibility. Fixes #34273. Built from https://develop.svn.wordpress.org/trunk@35427 git-svn-id: http://core.svn.wordpress.org/trunk@35391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-28 19:08:24 -04:00
.image-details .column-settings h2 {
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
margin: 20px;
padding-top: 20px;
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
border-top: 1px solid #dcdcde;
color: #1d2327;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
}
.image-details .column-image {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
width: 45%;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
position: absolute;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
left: 55%;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
top: 0;
Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409. Built from https://develop.svn.wordpress.org/trunk@27050 git-svn-id: http://core.svn.wordpress.org/trunk@26924 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-28 16:17:12 -05:00
}
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
.image-details .image {
margin: 20px;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
}
.image-details .image img {
max-width: 100%;
max-height: 500px;
}
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
.image-details .advanced-toggle {
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
padding: 0;
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
color: #646970;
In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links. Props afercia. Fixes #26550. Built from https://develop.svn.wordpress.org/trunk@32952 git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 01:01:24 -04:00
text-transform: uppercase;
Buttons: Improve the `.button-link` CSS class for link-like buttons. Updates `.button-link` adding color and underline to make link-like buttons look like links by default. Introduces `.button-link-delete` as a modifier, stackable CSS class for red button-links. Props Cheffheid, afercia. See #34242. Fixes #35126. Built from https://develop.svn.wordpress.org/trunk@40052 git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 11:47:44 -05:00
text-decoration: none;
}
.image-details .advanced-toggle:hover,
.image-details .advanced-toggle:active {
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
color: #646970;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
}
IE8 doesn't support `::before` and `::after` pseudo-elements. Replace them with `:before` and `:after`. props andrezrv, DrewAPicture, ocean90. fixes #28082. Built from https://develop.svn.wordpress.org/trunk@29314 git-svn-id: http://core.svn.wordpress.org/trunk@29095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-28 11:52:17 -04:00
.image-details .advanced-toggle:after {
Dashicons CSS: one-word font families don't need quotes. Font families with a space in the name should use double-quotes (doesn't apply here). Props afercia. Fixes #32866. Built from https://develop.svn.wordpress.org/trunk@33912 git-svn-id: http://core.svn.wordpress.org/trunk@33881 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-05 15:57:25 -04:00
font: normal 20px/1 dashicons;
General: Use correct value for the `speak` property in various CSS files. Follow-up to [49263]. Props hareesh-pillai. Fixes #51622. Built from https://develop.svn.wordpress.org/trunk@49309 git-svn-id: http://core.svn.wordpress.org/trunk@49071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-25 22:25:09 -04:00
speak: never;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "\f140";
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
display: inline-block;
margin-top: -2px;
}
IE8 doesn't support `::before` and `::after` pseudo-elements. Replace them with `:before` and `:after`. props andrezrv, DrewAPicture, ocean90. fixes #28082. Built from https://develop.svn.wordpress.org/trunk@29314 git-svn-id: http://core.svn.wordpress.org/trunk@29095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-28 11:52:17 -04:00
.image-details .advanced-visible .advanced-toggle:after {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "\f142";
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
}
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .custom-size label, /* Back-compat for pre-5.3 */
.image-details .custom-size .custom-size-setting {
Edit Image modal: - Fix issue with adding a link to an image that didn't have one previously. - Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed. - Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post. Props gcorne, and props sdasse for the design help, see #27366 Built from https://develop.svn.wordpress.org/trunk@27918 git-svn-id: http://core.svn.wordpress.org/trunk@27748 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-02 23:21:15 -04:00
display: block;
float: left;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .custom-size .custom-size-setting label {
float: none;
Edit Image modal: - Fix issue with adding a link to an image that didn't have one previously. - Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed. - Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post. Props gcorne, and props sdasse for the design help, see #27366 Built from https://develop.svn.wordpress.org/trunk@27918 git-svn-id: http://core.svn.wordpress.org/trunk@27748 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-02 23:21:15 -04:00
}
.image-details .custom-size input {
width: 5em;
}
.image-details .custom-size .sep {
float: left;
margin: 26px 6px 0 6px;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .custom-size .description {
margin-left: 0;
Edit Image modal: - Fix issue with adding a link to an image that didn't have one previously. - Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed. - Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post. Props gcorne, and props sdasse for the design help, see #27366 Built from https://develop.svn.wordpress.org/trunk@27918 git-svn-id: http://core.svn.wordpress.org/trunk@27748 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-02 23:21:15 -04:00
}
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
.media-embed .thumbnail {
max-width: 100%;
max-height: 200px;
position: relative;
float: left;
}
.media-embed .thumbnail img {
max-height: 200px;
When inserting from URL in the media modal, retain query params and properly insert the caption code. Props koopersmith fixes #22796 git-svn-id: http://core.svn.wordpress.org/trunk@23110 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-06 18:12:59 -05:00
display: block;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
}
.media-embed .thumbnail:after {
Grunt RTL CSS: `swap-dashicons-left-right-arrows` in `rtlcss:properties` expects double-quoted `content` strings in CSS. It doesn't swap single-quoted values. Props Ankit K Gupta, yoavf, netweb. Fixes #33786. Built from https://develop.svn.wordpress.org/trunk@34011 git-svn-id: http://core.svn.wordpress.org/trunk@33980 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-10 16:22:25 -04:00
content: "";
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Coding standards: Fix incorrect CSS `rgba()` values. Also, fixes some indentation where spaces were used instead of tabs. Props nielslange, mukesh27. Fixes #45937. Built from https://develop.svn.wordpress.org/trunk@44791 git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 17:02:52 -05:00
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
overflow: hidden;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-embed .setting,
.media-embed .setting-group {
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
width: 100%;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
margin: 10px 0;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
float: left;
display: block;
clear: both;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-embed .setting-group .setting:not(.checkbox-setting) {
margin: 0;
}
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.media-embed .setting.has-description {
margin-bottom: 5px;
}
.media-embed .description {
clear: both;
font-style: normal;
}
Accessibility: Media: Allow users to set a proper language for Video subtitles. For a number of years, subtitles track added to videos were always set to "English" regardless of the actual subtitles language. By making the track `srclang`, `label`, and `kind` attributes editable, content authors are now able to set a language that matches the actual track content. Props BjornW, audrasjb, birgire, karmatosed, sabernhardt, afercia. Fixes #47559. Built from https://develop.svn.wordpress.org/trunk@46373 git-svn-id: http://core.svn.wordpress.org/trunk@46172 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-01 18:05:58 -04:00
.media-embed .content-track + .description {
line-height: 1.4;
/* The !important needs to override a high specificity selector from wp-medialement.css */
max-width: none !important;
}
.media-embed .remove-track {
margin-bottom: 10px;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .embed-media-settings .setting,
.image-details .embed-media-settings .setting-group {
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
float: none;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
width: auto;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
}
.image-details .actions {
margin: 10px 0;
}
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
.image-details .hidden {
display: none;
}
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.media-embed .setting input[type="text"],
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-embed .setting textarea,
.media-embed fieldset {
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
display: block;
width: 100%;
max-width: 400px;
}
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
.image-details .embed-media-settings .setting input[type="text"],
.image-details .embed-media-settings .setting textarea {
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
max-width: inherit;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
width: 70%;
}
.image-details .embed-media-settings .setting input.link-to-custom,
Edit Image modal: - Fix issue with adding a link to an image that didn't have one previously. - Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed. - Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post. Props gcorne, and props sdasse for the design help, see #27366 Built from https://develop.svn.wordpress.org/trunk@27918 git-svn-id: http://core.svn.wordpress.org/trunk@27748 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-02 23:21:15 -04:00
.image-details .embed-media-settings .link-target,
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.image-details .embed-media-settings .custom-size,
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .embed-media-settings .setting-group,
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.image-details .description {
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
margin-left: 27%;
width: 70%;
}
Accessibility: improve the "URL" and "Alt text" fields in the media modals. Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 06:43:51 -04:00
.image-details .description {
font-style: normal;
margin-top: 0;
}
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
.image-details .embed-media-settings .link-target {
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
margin-top: 16px;
}
.image-details .checkbox-label,
.audio-details .checkbox-label,
.video-details .checkbox-label {
vertical-align: baseline;
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
}
Don't show textareas that have "hidden" as a class in the media modal. See #27915. Built from https://develop.svn.wordpress.org/trunk@28169 git-svn-id: http://core.svn.wordpress.org/trunk@28000 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-19 14:34:17 -04:00
.media-embed .setting input.hidden,
.media-embed .setting textarea.hidden {
Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409. Built from https://develop.svn.wordpress.org/trunk@27050 git-svn-id: http://core.svn.wordpress.org/trunk@26924 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-28 16:17:12 -05:00
display: none;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-embed .setting span, /* Back-compat for pre-5.3 */
.media-embed .setting .name,
.media-embed .setting-group .name {
display: inline-block;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
font-size: 13px;
CSS Coding Standards: Use unitless values for `line-height` in `wp-includes/css/media-views.css`. Props ianbelanger, pbiron, afercia. Fixes #46529. See #44643. Built from https://develop.svn.wordpress.org/trunk@45478 git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 09:18:52 -04:00
line-height: 1.84615384;
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
color: #646970;
Media: Add Embed from URL tab. Note: There is a bug that currently blocks adding several successive embeds. see #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-12 00:57:12 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-embed .setting span {
display: block; /* Back-compat for pre-5.3 */
width: 200px; /* Back-compat for pre-5.3 */
}
.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
.image-details .embed-media-settings .setting .name {
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
float: left;
width: 25%;
text-align: right;
margin: 8px 1% 0 1%;
line-height: 1.1;
}
Media: Fix buttons group layout for Internet Explorer 11 after [45499]. Props sabernhardt, afercia. See #47122. Fixes #48087. Built from https://develop.svn.wordpress.org/trunk@46237 git-svn-id: http://core.svn.wordpress.org/trunk@46049 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 06:00:59 -04:00
/* Buttons group in IE 11. */
Media: After [46237] add the same fix to the `.button-group` on the "Insert form URL" screen in the media modal. Props afercia, sabernhardt. FIxes #48087. Built from https://develop.svn.wordpress.org/trunk@46567 git-svn-id: http://core.svn.wordpress.org/trunk@46364 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-21 19:23:04 -04:00
.media-frame .setting-group .button-group,
Media: Fix buttons group layout for Internet Explorer 11 after [45499]. Props sabernhardt, afercia. See #47122. Fixes #48087. Built from https://develop.svn.wordpress.org/trunk@46237 git-svn-id: http://core.svn.wordpress.org/trunk@46049 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 06:00:59 -04:00
.image-details .embed-media-settings .setting .button-group {
width: auto;
}
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.media-embed-sidebar {
position: absolute;
top: 0;
left: 440px;
}
Add hooks to the wpeditimage tinymce plugin and to the image details portion of the media modal. - Add wp.media.events which is intended to be a global media event bus. - Add a post-render event to the ImageDetails view that third-party code can leverage to add subviews. - Performance improvement for the initialization of the PostImage model. - A bit more markup to the image details template to make it easier to add a view to the advanced options. Props gcorne, fixes #27698 Built from https://develop.svn.wordpress.org/trunk@28095 git-svn-id: http://core.svn.wordpress.org/trunk@27926 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-13 00:02:15 -04:00
.advanced-section,
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.link-settings {
margin-top: 10px;
}
Media IE7 fixes. props azaozz, lessbloat. fixes #22732. git-svn-id: http://core.svn.wordpress.org/trunk@23061 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 22:15:53 -05:00
/**
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
* Button groups fix: can be removed together with the Back-compat for pre-5.3
Media IE7 fixes. props azaozz, lessbloat. fixes #22732. git-svn-id: http://core.svn.wordpress.org/trunk@23061 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 22:15:53 -05:00
*/
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-frame .setting .button-group {
display: flex;
margin: 0 !important;
max-width: none !important;
}
Media IE7 fixes. props azaozz, lessbloat. fixes #22732. git-svn-id: http://core.svn.wordpress.org/trunk@23061 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 22:15:53 -05:00
RTL font-family overrides. (Tahoma generally, and Arial for Hebrew.) props yoavf. fixes #24977. Built from https://develop.svn.wordpress.org/trunk@26816 git-svn-id: http://core.svn.wordpress.org/trunk@26703 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-08 20:31:11 -05:00
/**
* Localization
*/
.rtl .media-modal,
.rtl .media-frame,
.rtl .media-frame .search,
.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"],
After [29360], add rules for `<input>`s in the scope of `.media-sidebar`. Props ocean90. Fixes #28647. Built from https://develop.svn.wordpress.org/trunk@29441 git-svn-id: http://core.svn.wordpress.org/trunk@29219 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 17:34:16 -04:00
.rtl .media-frame input[type="tel"],
RTL font-family overrides. (Tahoma generally, and Arial for Hebrew.) props yoavf. fixes #24977. Built from https://develop.svn.wordpress.org/trunk@26816 git-svn-id: http://core.svn.wordpress.org/trunk@26703 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-12-08 20:31:11 -05:00
.rtl .media-frame textarea,
.rtl .media-frame select {
font-family: Tahoma, sans-serif;
}
:lang(he-il) .rtl .media-modal,
: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 textarea,
:lang(he-il) .rtl .media-frame select {
font-family: Arial, sans-serif;
}
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
/**
* Responsive layout
*/
@media only screen and (max-width: 900px) {
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-modal .media-frame-title {
height: 40px;
}
.media-modal .media-frame-title h1 {
line-height: 2.22222222;
font-size: 18px;
}
.media-modal-close {
width: 42px;
height: 42px;
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
/* Drop-down menu */
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-frame .media-frame-title {
position: static;
padding: 0 44px;
text-align: center;
}
Media modals: Better responsive views, especially the header. * Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here. * Make the header shorter when on particularly narrow screens, which also tend to be shorter. * Don't restrict the height of images in the attachment details modal, to take advantage of all available space. fixes #29339. Built from https://develop.svn.wordpress.org/trunk@29632 git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 17:50:16 -04:00
.media-frame:not(.hide-menu) .media-frame-router,
.media-frame:not(.hide-menu) .media-frame-content,
.media-frame:not(.hide-menu) .media-frame-toolbar {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
left: 0;
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.media-frame:not(.hide-menu) .media-frame-router {
/* 40 title + (40 - 6) menu toggle button + 6 spacing */
top: 80px;
}
.media-frame:not(.hide-menu) .media-frame-content {
/* 80 + room for the tabs */
top: 114px;
}
.media-frame.hide-router .media-frame-content {
top: 80px;
}
Media modals: Better responsive views, especially the header. * Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here. * Make the header shorter when on particularly narrow screens, which also tend to be shorter. * Don't restrict the height of images in the attachment details modal, to take advantage of all available space. fixes #29339. Built from https://develop.svn.wordpress.org/trunk@29632 git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 17:50:16 -04:00
.media-frame:not(.hide-menu) .media-frame-menu {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
position: static;
width: 0;
}
Media modals: Better responsive views, especially the header. * Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here. * Make the header shorter when on particularly narrow screens, which also tend to be shorter. * Don't restrict the height of images in the attachment details modal, to take advantage of all available space. fixes #29339. Built from https://develop.svn.wordpress.org/trunk@29632 git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 17:50:16 -04:00
.media-frame:not(.hide-menu) .media-menu {
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
display: none;
Media at small screens: - Show the image details/settings as an overlay. - Better styling for the frame drop-down. - Remove the multi-select by default on the Insert frame. See #27423 Built from https://develop.svn.wordpress.org/trunk@29452 git-svn-id: http://core.svn.wordpress.org/trunk@29230 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 01:09:16 -04:00
width: auto;
max-width: 80%;
overflow: auto;
z-index: 2000;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
top: 75px;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
left: 50%;
transform: translateX(-50%);
Media at small screens: - Show the image details/settings as an overlay. - Better styling for the frame drop-down. - Remove the multi-select by default on the Insert frame. See #27423 Built from https://develop.svn.wordpress.org/trunk@29452 git-svn-id: http://core.svn.wordpress.org/trunk@29230 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 01:09:16 -04:00
right: auto;
bottom: auto;
padding: 5px 0;
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
border: 1px solid #c3c4c7;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
}
Media modals: Better responsive views, especially the header. * Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here. * Make the header shorter when on particularly narrow screens, which also tend to be shorter. * Don't restrict the height of images in the attachment details modal, to take advantage of all available space. fixes #29339. Built from https://develop.svn.wordpress.org/trunk@29632 git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 17:50:16 -04:00
.media-frame:not(.hide-menu) .media-menu.visible {
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
display: block;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Media modals: Better responsive views, especially the header. * Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here. * Make the header shorter when on particularly narrow screens, which also tend to be shorter. * Don't restrict the height of images in the attachment details modal, to take advantage of all available space. fixes #29339. Built from https://develop.svn.wordpress.org/trunk@29632 git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 17:50:16 -04:00
.media-frame:not(.hide-menu) .media-menu > a {
Media at small screens: - Show the image details/settings as an overlay. - Better styling for the frame drop-down. - Remove the multi-select by default on the Insert frame. See #27423 Built from https://develop.svn.wordpress.org/trunk@29452 git-svn-id: http://core.svn.wordpress.org/trunk@29230 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 01:09:16 -04:00
padding: 12px 16px;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
font-size: 16px;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Media modals: Better responsive views, especially the header. * Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here. * Make the header shorter when on particularly narrow screens, which also tend to be shorter. * Don't restrict the height of images in the attachment details modal, to take advantage of all available space. fixes #29339. Built from https://develop.svn.wordpress.org/trunk@29632 git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 17:50:16 -04:00
.media-frame:not(.hide-menu) .media-menu .separator {
Media at small screens: - Show the image details/settings as an overlay. - Better styling for the frame drop-down. - Remove the multi-select by default on the Insert frame. See #27423 Built from https://develop.svn.wordpress.org/trunk@29452 git-svn-id: http://core.svn.wordpress.org/trunk@29230 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 01:09:16 -04:00
margin: 5px 10px;
}
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
/* Visually hide the menu heading keeping it available to assistive technologies. */
.media-frame-menu-heading {
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
padding: 0;
width: 1px;
word-wrap: normal !important;
}
/* Reveal the menu toggle button. */
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
display: inline-flex;
align-items: center;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: -6px 0 0;
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
padding: 0 2px 0 12px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
background: transparent;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
/* Only for IE11 to vertically align text within the inline-flex button */
height: 0.1%;
/* Modern browsers */
min-height: 40px;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.wp-core-ui .button.media-frame-menu-toggle:hover,
.wp-core-ui .button.media-frame-menu-toggle:active {
background: transparent;
transform: none;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
}
Accessibility: Media: Use the ARIA tabs pattern for the media modal menus. The ARIA tabs pattern improves interaction for keyboard and assistive technologies users. It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected. Props audrasjb, afercia, joedolson, karmatosed, melchoyce. See #47149. Built from https://develop.svn.wordpress.org/trunk@46363 git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 15:37:58 -04:00
.wp-core-ui .button.media-frame-menu-toggle:focus {
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
/* End drop-down menu */
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
.media-sidebar {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
width: 230px;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
.attachments-browser .attachments,
Improve switching between browser and upload state. Props koopersmith fixes #22628 git-svn-id: http://core.svn.wordpress.org/trunk@22945 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 01:01:47 -05:00
.attachments-browser .uploader-inline,
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
.attachments-browser .media-toolbar {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
right: 262px;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
margin: 6px 0px;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting input,
.media-sidebar .setting textarea,
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting .name,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting input,
.attachment-details .setting textarea,
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.attachment-details .setting .name,
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
.compat-item label span {
float: none;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
display: inline-block;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.media-sidebar .setting span, /* Back-compat for pre-5.3 */
.attachment-details .setting span, /* Back-compat for pre-5.3 */
.media-sidebar .checkbox-label-inline {
float: none;
}
.media-sidebar .setting .select-label-inline {
display: inline;
}
.media-sidebar .setting .name,
.media-sidebar .checkbox-label-inline,
.attachment-details .setting .name,
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
.compat-item label span {
text-align: inherit;
min-height: 16px;
Responsive and RTL css improvements or the media modal. Props ocean90, koopersmith see #22615 git-svn-id: http://core.svn.wordpress.org/trunk@22960 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 21:53:53 -05:00
margin: 0;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
padding: 8px 2px 2px;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields. For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. These fields now have a new "Copy URL" button that is easy to use and accessible to everyone. Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia. See #41612, #50322, #50335. Fixes #48463. Built from https://develop.svn.wordpress.org/trunk@48232 git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
/* Needs high specificity. */
.media-sidebar .setting .copy-to-clipboard-container,
.attachment-details .attachment-info .copy-to-clipboard-container {
margin-left: 0;
padding-top: 0;
}
.media-sidebar .setting .copy-attachment-url,
.attachment-details .attachment-info .copy-attachment-url {
margin: 0 1px;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting .value,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting .value {
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
float: none;
width: auto;
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting input[type="text"],
.media-sidebar .setting input[type="password"],
.media-sidebar .setting input[type="email"],
.media-sidebar .setting input[type="number"],
.media-sidebar .setting input[type="search"],
.media-sidebar .setting input[type="tel"],
.media-sidebar .setting input[type="url"],
.media-sidebar .setting textarea,
.media-sidebar .setting select,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting input[type="text"],
.attachment-details .setting input[type="password"],
.attachment-details .setting input[type="email"],
.attachment-details .setting input[type="number"],
.attachment-details .setting input[type="search"],
.attachment-details .setting input[type="tel"],
.attachment-details .setting input[type="url"],
.attachment-details .setting textarea,
Accessibility: Improve the "Alt text" description styles for small screens. Amends [44900]. See #41612. Built from https://develop.svn.wordpress.org/trunk@45248 git-svn-id: http://core.svn.wordpress.org/trunk@45057 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-18 17:43:52 -04:00
.attachment-details .setting select,
.attachment-details .setting + .description {
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
float: none;
Responsive and RTL css improvements or the media modal. Props ocean90, koopersmith see #22615 git-svn-id: http://core.svn.wordpress.org/trunk@22960 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 21:53:53 -05:00
width: 98%;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
max-width: none;
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
height: auto;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.media-frame .media-toolbar input[type="search"] {
line-height: 2.25; /* 36px */
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.media-sidebar .setting select.columns,
Small screen responsive for attachment details modal. see #28844. Built from https://develop.svn.wordpress.org/trunk@29496 git-svn-id: http://core.svn.wordpress.org/trunk@29274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 00:10:16 -04:00
.attachment-details .setting select.columns {
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
width: auto;
}
.media-frame input,
.media-frame textarea,
.media-frame .search {
padding: 3px 6px;
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.wp-admin .media-frame select {
min-height: 40px;
font-size: 16px;
line-height: 1.625;
padding: 5px 24px 5px 8px;
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
.image-details .column-image {
width: 30%;
left: 70%;
}
.image-details .column-settings {
width: 70%;
}
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.image-details .media-modal {
left: 30px;
right: 30px;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .embed-media-settings .setting,
.image-details .embed-media-settings .setting-group {
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
margin: 20px;
}
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
.image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
.image-details .embed-media-settings .setting .name {
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
float: none;
text-align: left;
width: 100%;
margin-bottom: 4px;
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
margin-left: 0;
}
.media-modal .legend-inline {
position: static;
transform: none;
margin-left: 0;
margin-bottom: 6px;
}
.image-details .embed-media-settings .setting-group .setting {
margin-bottom: 0;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
}
.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;
}
Accessibility: Improve the "Alt text" description styles for small screens. Amends [44900]. See #41612. Built from https://develop.svn.wordpress.org/trunk@45248 git-svn-id: http://core.svn.wordpress.org/trunk@45057 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-18 17:43:52 -04:00
.image-details .embed-media-settings .setting.has-description {
margin-bottom: 5px;
}
.image-details .description {
width: auto;
margin: 0 20px;
}
Edit Image modal: - Fix issue with adding a link to an image that didn't have one previously. - Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed. - Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post. Props gcorne, and props sdasse for the design help, see #27366 Built from https://develop.svn.wordpress.org/trunk@27918 git-svn-id: http://core.svn.wordpress.org/trunk@27748 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-02 23:21:15 -04:00
.image-details .embed-media-settings .custom-size {
margin-left: 20px;
Edit Image modal: - Move all advanced options under a single “Show advanced options” toggle that mirrors the behavior and look-and-feel of the wplink modal. - Switch to using <select> for the Size and Link To. - Bring back the field for CSS Class for the image, but don’t incorporate the internally managed WordPress classes (size-, wp-image-, etc…). - On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields. - Keep image at top on screen sizes where the two columns are stacked into a single column. - Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism. Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27898 git-svn-id: http://core.svn.wordpress.org/trunk@27729 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 21:54:15 -04:00
}
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
.collection-settings .setting input[type="checkbox"] {
Accessibility: Improve accessibility of all the media views form controls. - changes the media views form controls to have explicitly associated labels with for/id attributes - adds a few missing labels / aria-labels - improves a few existing labels / aria-labels - improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes - improves the image custom size input fields and their labelling - adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies - swaps the columns source order in the image details template, to make visual and DOM order match - swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match - gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right - merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload") - makes the "upload-ui" consistent across the media views - hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner - adds comments to all the media templates to clarify their usage - slightly increases vertical spacing between form fields in the media sidebar - removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4 - removes some CSS still targeting Internet Explorer 7 and 8 Fixes #47141. Fixes #47122. Built from https://develop.svn.wordpress.org/trunk@45499 git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 16:45:02 -04:00
float: none;
Restore some rules for media sidebar settings. HTML5 input type selection is intense. fixes #29218. Built from https://develop.svn.wordpress.org/trunk@29504 git-svn-id: http://core.svn.wordpress.org/trunk@29281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-15 12:02:15 -04:00
margin-top: 0;
}
Responsive and RTL css improvements or the media modal. Props ocean90, koopersmith see #22615 git-svn-id: http://core.svn.wordpress.org/trunk@22960 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-30 21:53:53 -05:00
.media-selection {
min-width: 120px;
}
.media-selection:after {
background: none;
}
.media-selection .attachments {
display: none;
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
.media-modal .attachments-browser .media-toolbar .search {
max-width: 100%;
height: auto;
float: right;
}
.media-modal .attachments-browser .media-toolbar .attachment-filters {
height: auto;
}
Improvements to the media uploader at responsive sizes: * Change load order so larger breakpoint loads before smaller breakpoint. * Use absolute positioning rather than floats, to fix some overflow issues. * Remove the max-height media query so desktop browsers benefit from the responsive styles. * Reset text inputs to 16px so iOS doesn't force zoom. * Adjust the position of the close button so it doesn't overlap the Create Gallery link. See #25977. Props joen. Built from https://develop.svn.wordpress.org/trunk@26219 git-svn-id: http://core.svn.wordpress.org/trunk@26127 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 14:54:10 -05:00
/* Text inputs need to be 16px, or they force zooming on iOS */
.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 textarea,
.media-frame select {
font-size: 16px;
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
}
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
.media-frame .media-toolbar input[type="search"] {
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
line-height: 2.3755; /* 38px */
}
.media-modal .media-toolbar .spinner {
margin-bottom: 10px;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
}
}
@media screen and (max-width: 782px) {
.attachments-browser .media-toolbar {
height: 82px;
}
.attachments-browser .attachments,
.attachments-browser .uploader-inline {
top: 82px;
}
.media-frame-toolbar .media-toolbar {
Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers. Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method. - uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing - removes a couple leftovers from [40428] - fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border Props sabernhardt, afercia. See #40152. Fixes #48378. Built from https://develop.svn.wordpress.org/trunk@47266 git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 11:32:06 -05:00
bottom: -54px;
Accessibility: Media: Add more headings in the Media Modal. Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces. - adds three new headings within the media modal - improves plural form translation for "item selected" by using `wp.i18n` - horizontally centers the media modal menu in the responsive view Props kjellr, karmatosed, melchoyce, afercia. See #47149. Fixes #47610. Built from https://develop.svn.wordpress.org/trunk@46375 git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 08:10:57 -04:00
}
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
.mode-grid .attachments-browser .media-toolbar-primary {
display: block;
}
Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields. For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. These fields now have a new "Copy URL" button that is easy to use and accessible to everyone. Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia. See #41612, #50322, #50335. Fixes #48463. Built from https://develop.svn.wordpress.org/trunk@48232 git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 09:16:04 -04:00
.media-sidebar .copy-to-clipboard-container .success,
.attachment-details .copy-to-clipboard-container .success {
font-size: 14px;
line-height: 2.71428571;
}
Accessibility: Media: Improve the search media field labelling. Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels. Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format. Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example: - users with cognitive disabilities may have trouble remembering what the filled field does - speech recognition users cannot see the name they can speak to set focus on the field - low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia. See #40331. Fixes #47138. Built from https://develop.svn.wordpress.org/trunk@46418 git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 08:43:03 -04:00
}
Improvements to the modal media uploader on mobile in landscape orientation. * Merge the 782 and 500 width queries into a single 640px query * At this breakpoint, remove the drop shadow and margin from the uploader modal * For only landscape views, tabs are shown in a single line. * Add padding to tab links to account for untappable 20px area at top of landscape viewport in iOS * Add overflow: visible to .embed-link-settings at responsive sizes to prevent unnecessary framed scrolling See #25977, props joen. Built from https://develop.svn.wordpress.org/trunk@26250 git-svn-id: http://core.svn.wordpress.org/trunk@26156 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-18 15:07:10 -05:00
/* Responsive on portrait and landscape */
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
/* Full-bleed modal */
Edit Image modal: - Bring back some of the advanced settings. - Make the layout two-column for wider screens, remove the sidebar, and shrink the modal a bit. - The image reflects the size as inserted in the post as long as it doesn't overflow the column and is not too tall. Changing the size to another intermediate will also update the image "preview." - Rename "Edit Image" to "Edit Original" to try and better communicate that editing the image will modify the media library item not just the image inserted into the post that is being edited. (updates two PNGs from precommit) Props gcorne, see #27366 Built from https://develop.svn.wordpress.org/trunk@27797 git-svn-id: http://core.svn.wordpress.org/trunk@27632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-27 18:41:14 -04:00
.media-modal,
Media at small screens: - Show the image details/settings as an overlay. - Better styling for the frame drop-down. - Remove the multi-select by default on the Insert frame. See #27423 Built from https://develop.svn.wordpress.org/trunk@29452 git-svn-id: http://core.svn.wordpress.org/trunk@29230 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 01:09:16 -04:00
.image-details .media-modal {
Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977. Built from https://develop.svn.wordpress.org/trunk@26229 git-svn-id: http://core.svn.wordpress.org/trunk@26136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 16:47:09 -05:00
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
.media-modal-backdrop {
Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977. Built from https://develop.svn.wordpress.org/trunk@26229 git-svn-id: http://core.svn.wordpress.org/trunk@26136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 16:47:09 -05:00
position: fixed;
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
.media-sidebar {
Media at small screens: - Show the image details/settings as an overlay. - Better styling for the frame drop-down. - Remove the multi-select by default on the Insert frame. See #27423 Built from https://develop.svn.wordpress.org/trunk@29452 git-svn-id: http://core.svn.wordpress.org/trunk@29230 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 01:09:16 -04:00
z-index: 1900;
max-width: 70%;
bottom: 120%;
box-sizing: border-box;
padding-bottom: 0;
}
.media-sidebar.visible {
bottom: 0;
Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977. Built from https://develop.svn.wordpress.org/trunk@26229 git-svn-id: http://core.svn.wordpress.org/trunk@26136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 16:47:09 -05:00
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
.attachments-browser .attachments,
.attachments-browser .uploader-inline,
.attachments-browser .media-toolbar {
right: 0;
Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977. Built from https://develop.svn.wordpress.org/trunk@26229 git-svn-id: http://core.svn.wordpress.org/trunk@26136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 16:47:09 -05:00
}
Improvements to the modal media uploader on mobile in landscape orientation. * Merge the 782 and 500 width queries into a single 640px query * At this breakpoint, remove the drop shadow and margin from the uploader modal * For only landscape views, tabs are shown in a single line. * Add padding to tab links to account for untappable 20px area at top of landscape viewport in iOS * Add overflow: visible to .embed-link-settings at responsive sizes to prevent unnecessary framed scrolling See #25977, props joen. Built from https://develop.svn.wordpress.org/trunk@26250 git-svn-id: http://core.svn.wordpress.org/trunk@26156 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-18 15:07:10 -05:00
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
.image-details .media-frame-title {
display: block;
top: 0;
font-size: 14px;
Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977. Built from https://develop.svn.wordpress.org/trunk@26229 git-svn-id: http://core.svn.wordpress.org/trunk@26136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 16:47:09 -05:00
}
Image Details modal: Restore narrow responsive layout. props celloexpressions. fixes #29337. Built from https://develop.svn.wordpress.org/trunk@29617 git-svn-id: http://core.svn.wordpress.org/trunk@29391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 01:20:16 -04:00
.image-details .column-image,
.image-details .column-settings {
width: 100%;
position: relative;
left: 0;
}
.image-details .column-settings {
padding: 4px 0;
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
/* Media tabs on the top */
.media-frame-content .media-toolbar .instructions {
display: none;
Move media uploader responsive styles from wp-admin.css to media-views.css; clean up duplicated media queries. See #25977. Built from https://develop.svn.wordpress.org/trunk@26229 git-svn-id: http://core.svn.wordpress.org/trunk@26136 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-15 16:47:09 -05:00
}
Improvements to the modal media uploader on mobile in landscape orientation. * Merge the 782 and 500 width queries into a single 640px query * At this breakpoint, remove the drop shadow and margin from the uploader modal * For only landscape views, tabs are shown in a single line. * Add padding to tab links to account for untappable 20px area at top of landscape viewport in iOS * Add overflow: visible to .embed-link-settings at responsive sizes to prevent unnecessary framed scrolling See #25977, props joen. Built from https://develop.svn.wordpress.org/trunk@26250 git-svn-id: http://core.svn.wordpress.org/trunk@26156 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-18 15:07:10 -05:00
}
Accessibility: Make the Media modal an ARIA modal dialog. For a number of years, the Media modal missed an explicit ARIA role and the required attributes for modal dialogs. This was confusing for assistive technology users, since they may not realize they're inside a dialog, and that consequently the keyboard interactions may be different from the rest of the page. Lack of an explicit label for the dialog was confusing as well, since assistive technology users didn't have an immediate sense of what the dialog is for. This change makes the Media modal meet the ARIA Authoring Practices recommendations, helping users better understand the purpose and interactions with the modal. Also, it makes sure to hide the rest of the page content from assistive technologies, until support for `aria-modal="true"` improves. Additionally: - moves the modal H1 heading to the beginning of the modal content - changes the modal left menu position to make visual and DOM order match - improves the `wp.media.view.FocusManager` documentation Fixes #47145. Built from https://develop.svn.wordpress.org/trunk@45572 git-svn-id: http://core.svn.wordpress.org/trunk@45383 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-27 08:33:56 -04:00
@media only screen and (min-width: 901px) and (max-height: 400px) {
.media-menu,
.media-frame:not(.hide-menu) .media-menu {
top: 0;
padding-top: 44px;
}
}
Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423. Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-07 23:46:17 -04:00
@media only screen and (max-width: 480px) {
Site Icon: Add crop preview to the media modal. * Monkey patches imgAreaSelect library to support touch events. * Removes Settings version of Site Icon since it would have been the same flow. * Removes default value for Customizer setting - there is no default favicon. Fixes #16434. Built from https://develop.svn.wordpress.org/trunk@33329 git-svn-id: http://core.svn.wordpress.org/trunk@33301 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-20 11:57:25 -04:00
.wp-core-ui.wp-customizer .media-button {
margin-top: 13px;
}
Responsive CSS for the media modal. props azaozz. see #22615, #21390. git-svn-id: http://core.svn.wordpress.org/trunk@22887 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-27 20:51:15 -05:00
}
Move HiDPI block to the bottom of media-views. @media does not provide additional specificity, so the non-retina stuff overrides if the retina rules come first. props lessbloat, fixes #22728. git-svn-id: http://core.svn.wordpress.org/trunk@23026 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 11:32:06 -05:00
/**
* HiDPI Displays
*/
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
Say hello to a fresh new look for the WordPress admin. Still to come: more color schemes, a responsive component, and more. see #25858. props iammattthomas, tillkruess, EmpireOfLight, melchoyce, ryelle, joen, mitchoyoshitaka, sirbrillig, andypeatling, isaackeyet, Otto42, dd32, matt, helen. Built from https://develop.svn.wordpress.org/trunk@26072 git-svn-id: http://core.svn.wordpress.org/trunk@25992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-09 19:27:10 -05:00
Media: Fix icons for HiDPI displays on the media modal after [32952]. Props vtieu. Fixes #35200. Built from https://develop.svn.wordpress.org/trunk@36122 git-svn-id: http://core.svn.wordpress.org/trunk@36088 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-12-30 13:32:29 -05:00
.wp-core-ui .media-modal-icon {
IE8 doesn't support `::before` and `::after` pseudo-elements. Replace them with `:before` and `:after`. props andrezrv, DrewAPicture, ocean90. fixes #28082. Built from https://develop.svn.wordpress.org/trunk@29314 git-svn-id: http://core.svn.wordpress.org/trunk@29095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-28 11:52:17 -04:00
background-image: url(../images/uploader-icons-2x.png);
background-size: 134px 15px;
}
Move HiDPI block to the bottom of media-views. @media does not provide additional specificity, so the non-retina stuff overrides if the retina rules come first. props lessbloat, fixes #22728. git-svn-id: http://core.svn.wordpress.org/trunk@23026 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-04 11:32:06 -05:00
IE8 doesn't support `::before` and `::after` pseudo-elements. Replace them with `:before` and `:after`. props andrezrv, DrewAPicture, ocean90. fixes #28082. Built from https://develop.svn.wordpress.org/trunk@29314 git-svn-id: http://core.svn.wordpress.org/trunk@29095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-28 11:52:17 -04:00
.media-frame .spinner {
background-image: url(../images/spinner-2x.gif);
}
Introduce Edit Image (single mode) in the media modal and use it to edit images inserted in the editor. Adds new feature: replace an image in the editor. Props gcorne, see #24409. Built from https://develop.svn.wordpress.org/trunk@27050 git-svn-id: http://core.svn.wordpress.org/trunk@26924 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-01-28 16:17:12 -05:00
}
Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further. props ericlewis, shaunandrews, wonderboymusic. see #24716. Built from https://develop.svn.wordpress.org/trunk@28682 git-svn-id: http://core.svn.wordpress.org/trunk@28500 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-06-05 18:01:18 -04:00
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="1"] .attachment {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
width: 100%;
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="2"] .attachment {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
width: 50%;
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="3"] .attachment {
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
width: 33.33%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="4"] .attachment {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
width: 25%;
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="5"] .attachment {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
width: 20%;
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="6"] .attachment {
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
width: 16.66%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="7"] .attachment {
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
width: 14.28%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="8"] .attachment {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
width: 12.5%;
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="9"] .attachment {
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
width: 11.11%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="10"] .attachment {
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
width: 10%;
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="11"] .attachment {
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
width: 9.09%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}
Media: Avoid repeated thumbnail resizing. props avryl, wonderboymusic, azaozz. fixes #27423. Built from https://develop.svn.wordpress.org/trunk@29686 git-svn-id: http://core.svn.wordpress.org/trunk@29461 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:10:19 -04:00
.media-frame-content[data-columns="12"] .attachment {
Media: Better padding for attachment items. props avryl. fixes #29085. Built from https://develop.svn.wordpress.org/trunk@29687 git-svn-id: http://core.svn.wordpress.org/trunk@29462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-09-03 02:28:16 -04:00
width: 8.33%;
Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423. Built from https://develop.svn.wordpress.org/trunk@29376 git-svn-id: http://core.svn.wordpress.org/trunk@29154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-05 01:20:18 -04:00
}