mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-10 22:58:33 +02:00
60676ee282
When a theme supports HTML5 captions via add_theme_support( 'html5', 'caption' ), figure and figcaption will be used instead of div and p. There's a bonus. But first, some history: Captions were introduced with an inline style set for the container. This remains, as it is there to force captions to wrap. But this inline style included an extra 10 pixels, which have vexxed theme developers for years. While these pixels were designed to ensure padding around floated images, modern themes handle this with grace. The additional pixels thus feel encumbering. As the new HTML5 gallery support avoids outputting default gallery styles (again, irking theme developers for years; see #26697), the new HTML5 caption support will also ditch these 10 pixels of unwanted hand-holding. The 10 pixels are also removed entirely in the visual editor (and more styles may also disappear here; see #26642), giving themes the power necessary to match the frontend styles. The filter img_caption_shortcode_width added in 3.7 to work around this madness (see #14380) is skipped entirely when the theme supports HTML5 captions. props obenland, azaozz. see #26642. also fixes #9066. Built from https://develop.svn.wordpress.org/trunk@27668 git-svn-id: http://core.svn.wordpress.org/trunk@27511 1a063a9b-81f0-0310-95a4-ce76da25c4cd
396 lines
6.2 KiB
CSS
396 lines
6.2 KiB
CSS
/* Additional default styles for the editor */
|
|
body {
|
|
font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
color: #333;
|
|
margin: 10px;
|
|
}
|
|
|
|
/* DFW mode */
|
|
html.wp-fullscreen,
|
|
html.wp-fullscreen body {
|
|
background: transparent;
|
|
width: auto;
|
|
max-width: none;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.aligncenter,
|
|
dl.aligncenter {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.alignleft {
|
|
float: left;
|
|
}
|
|
|
|
.alignright {
|
|
float: right;
|
|
}
|
|
|
|
.wp-caption {
|
|
border: 1px solid #ddd;
|
|
text-align: center;
|
|
background-color: #f3f3f3;
|
|
padding-top: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.html5-captions .wp-caption {
|
|
padding: 4px;
|
|
}
|
|
|
|
.mceIEcenter {
|
|
text-align: center;
|
|
}
|
|
|
|
.wp-caption img {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 none;
|
|
}
|
|
|
|
div.mceTemp {
|
|
-ms-user-select: element;
|
|
}
|
|
|
|
dl.wp-caption,
|
|
dl.wp-caption * {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
.wp-caption-dd {
|
|
font-size: 11px;
|
|
line-height: 17px;
|
|
padding: 0 4px 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
pre {
|
|
font: 12px/18px Consolas, Monaco, monospace;
|
|
}
|
|
|
|
td {
|
|
color: #000;
|
|
font-size: 11px;
|
|
margin: 8px;
|
|
}
|
|
|
|
/* Styles for the WordPress plugins */
|
|
.mce-content-body img[data-mce-placeholder] {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.mce-content-body img.mce-wp-nextpage,
|
|
.mce-content-body img.mce-wp-more {
|
|
border: 0;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
width: 95%;
|
|
height: 10px;
|
|
display: block;
|
|
margin: 15px auto 0;
|
|
outline: 0;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Remove blue highlighting of selected images in WebKit */
|
|
img::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.mce-content-body img.mce-wp-nextpage[data-mce-selected],
|
|
.mce-content-body img.mce-wp-more[data-mce-selected] {
|
|
background-color: rgba(128,128,128,0.2);
|
|
outline: 1px dotted #888;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.mce-content-body img.mce-wp-more {
|
|
border-top: 2px dashed #bbb;
|
|
}
|
|
|
|
.mce-content-body img.mce-wp-nextpage {
|
|
border-top: 3px dotted #bbb;
|
|
}
|
|
|
|
/* Gallery, audio, video placeholders */
|
|
.mce-content-body img.wp-media {
|
|
border: 1px solid #aaa;
|
|
background-color: #f2f2f2;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 99%;
|
|
height: 250px;
|
|
outline: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mce-content-body img.wp-media:hover {
|
|
background-color: #ededed;
|
|
border-color: #777;
|
|
}
|
|
|
|
.mce-content-body img.wp-media.wp-media-selected {
|
|
background-color: #d8d8d8;
|
|
border-color: #777;
|
|
}
|
|
|
|
.mce-content-body img.wp-media.wp-gallery {
|
|
background-image: url(images/gallery.png);
|
|
}
|
|
|
|
/* Image resize handles */
|
|
.mce-content-body div.mce-resizehandle {
|
|
border-color: #777;
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
.mce-content-body img[data-mce-selected] {
|
|
outline: 1px solid #777;
|
|
}
|
|
|
|
.mce-content-body img[data-mce-resize="false"] {
|
|
outline: 0;
|
|
}
|
|
|
|
audio,
|
|
video,
|
|
embed {
|
|
display: -moz-inline-stack;
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
audio {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/**
|
|
* WP Views
|
|
*/
|
|
|
|
.wpview-wrap {
|
|
width: 99.99%; /* All IE need hasLayout, incl. 11 (ugh, not again!!) */
|
|
position: relative;
|
|
clear: both;
|
|
}
|
|
|
|
/* delegate the handling of the selection to the wpview tinymce plugin */
|
|
.wpview-wrap,
|
|
.wpview-wrap * {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* hide the shortcode content, but allow the content to still be selected */
|
|
.wpview-wrap .wpview-clipboard {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
overflow: hidden;
|
|
outline: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/**
|
|
* Media previews
|
|
*/
|
|
.wpview-wrap {
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.wpview-type-audio {
|
|
padding: 24px 0 0;
|
|
}
|
|
|
|
.wpview-type-video {
|
|
padding: 0;
|
|
}
|
|
|
|
.wont-play {
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.wont-play p {
|
|
font-size: 13px;
|
|
line-height: 1.3;
|
|
display: block;
|
|
width: 70%;
|
|
margin: 0 15%;
|
|
text-align: center;
|
|
}
|
|
|
|
.wpview-type-gallery:after {
|
|
content: '';
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.wpview-wrap .toolbar {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
#wp-image-toolbar {
|
|
position: absolute;
|
|
}
|
|
|
|
.wpview-wrap .toolbar div,
|
|
#wp-image-toolbar div {
|
|
margin-top: 7px;
|
|
margin-right: 7px;
|
|
padding: 2px;
|
|
width: 30px;
|
|
height: 30px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
background-color: #000;
|
|
background-color: rgba(0,0,0,0.9);
|
|
cursor: pointer;
|
|
color: white;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.wpview-wrap .toolbar div:hover,
|
|
#wp-image-toolbar div:hover {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
|
background-color: #000;
|
|
color: #2ea2cc;
|
|
}
|
|
|
|
/* temporary overrides; still pending styling */
|
|
.wpview-type-audio .toolbar div,
|
|
.wont-play .toolbar div {
|
|
margin: 0;
|
|
padding: 3px;
|
|
width: 20px;
|
|
height: 20px;
|
|
box-shadow: none;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.wpview-wrap.selected .toolbar,
|
|
.wpview-type-audio .toolbar,
|
|
.wpview-type-video .toolbar {
|
|
display: block;
|
|
}
|
|
|
|
.wpview-type-gallery.selected,
|
|
.wpview-type-audio,
|
|
.wpview-type-video {
|
|
background-color: #f2f8ff; /* fallback to old blue */
|
|
background-color: rgba(0,0,0,0.1);
|
|
border-color: #777;
|
|
border-color: rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.wpview-type-video .track-details,
|
|
.wpview-type-audio .track-details {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 5px;
|
|
width: 85%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.gallery img[data-mce-selected]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.gallery a {
|
|
cursor: default;
|
|
}
|
|
|
|
.gallery {
|
|
margin: auto -6px;
|
|
padding: 6px 0;
|
|
line-height: 1;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.gallery .gallery-item {
|
|
float: left;
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 6px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.gallery .gallery-caption,
|
|
.gallery .gallery-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.gallery .gallery-caption {
|
|
font-size: 13px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.gallery-columns-1 .gallery-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.gallery-columns-2 .gallery-item {
|
|
width: 50%;
|
|
}
|
|
|
|
.gallery-columns-3 .gallery-item {
|
|
width: 33.333%;
|
|
}
|
|
|
|
.gallery-columns-4 .gallery-item {
|
|
width: 25%;
|
|
}
|
|
|
|
.gallery-columns-5 .gallery-item {
|
|
width: 20%;
|
|
}
|
|
|
|
.gallery-columns-6 .gallery-item {
|
|
width: 16.667%;
|
|
}
|
|
|
|
.gallery-columns-7 .gallery-item {
|
|
width: 14.285%;
|
|
}
|
|
|
|
.gallery-columns-8 .gallery-item {
|
|
width: 12.5%;
|
|
}
|
|
|
|
.gallery-columns-9 .gallery-item {
|
|
width: 11.111%;
|
|
}
|
|
|
|
.gallery img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img.wp-oembed {
|
|
border: 1px dashed #888;
|
|
background: #f7f5f2 url(images/embedded.png) no-repeat scroll center center;
|
|
width: 300px;
|
|
height: 250px;
|
|
outline: 0;
|
|
}
|