mirror of
https://github.com/WordPress/WordPress.git
synced 2024-08-30 01:29:59 +02:00
83c3e3e00e
For the past 6 years, WordPress has operated as an oEmbed consumer, allowing users to easily embed content from other sites. By adding oEmbed provider support, this allows any oEmbed consumer to embed posts from WordPress sites. In addition to creating an oEmbed provider, WordPress' oEmbed consumer code has been enhanced to work with any site that provides oEmbed data (as long as it matches some strict security rules), and provides a preview from within the post editor. For security, embeds appear within a sandboxed iframe - the iframe content is a template that can be styled or replaced entirely by the theme on the provider site. Props swissspidy, pento, melchoyce, netweb, pfefferle, johnbillion, extendwings, davidbinda, danielbachhuber, SergeyBiryukov, afercia Fixes #32522. Built from https://develop.svn.wordpress.org/trunk@34903 git-svn-id: http://core.svn.wordpress.org/trunk@34868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
360 lines
7.9 KiB
CSS
360 lines
7.9 KiB
CSS
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
/* Text meant only for screen readers */
|
|
.screen-reader-text {
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute !important;
|
|
width: 1px;
|
|
}
|
|
|
|
/* Dashicons */
|
|
.dashicons {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
-webkit-background-size: 20px 20px;
|
|
background-size: 20px;
|
|
background-position: center;
|
|
-webkit-transition: background .1s ease-in;
|
|
transition: background .1s ease-in;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
|
|
.dashicons-no {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M15.55%2013.7l-2.19%202.06-3.42-3.65-3.64%203.43-2.06-2.18%203.64-3.43-3.42-3.64%202.18-2.06%203.43%203.64%203.64-3.42%202.05%202.18-3.64%203.43z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.dashicons-admin-comments {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.wp-embed-comments a:hover .dashicons-admin-comments {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.dashicons-share {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.wp-embed-share-dialog-open:hover .dashicons-share {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
|
|
}
|
|
|
|
.wp-embed {
|
|
width: 100%;
|
|
padding: 25px;
|
|
font: 400 14px/1.5 'Open Sans', sans-serif;
|
|
color: #82878c;
|
|
background: white;
|
|
border: 1px solid #e5e5e5;
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
/* Clearfix */
|
|
overflow: auto;
|
|
zoom: 1;
|
|
}
|
|
|
|
.wp-embed a {
|
|
color: #82878c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-embed a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.wp-embed-featured-image {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.wp-embed-featured-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
border: none;
|
|
}
|
|
|
|
.wp-embed-featured-image.square {
|
|
float: left;
|
|
max-width: 160px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.wp-embed p {
|
|
margin: 0;
|
|
}
|
|
|
|
p.wp-embed-heading {
|
|
margin: 0 0 15px;
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.wp-embed-heading a {
|
|
color: #32373c;
|
|
}
|
|
|
|
.wp-embed .wp-embed-more {
|
|
color: #b4b9be;
|
|
}
|
|
|
|
.wp-embed-footer {
|
|
display: table;
|
|
width: 100%;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.wp-embed-site-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
-webkit-transform: translateY(-50%);
|
|
-ms-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
height: 25px;
|
|
width: 25px;
|
|
border: 0;
|
|
}
|
|
|
|
.wp-embed-site-title {
|
|
font-weight: bold;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.wp-embed-site-title a {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-left: 35px;
|
|
}
|
|
|
|
.wp-embed-site-title,
|
|
.wp-embed-meta {
|
|
display: table-cell;
|
|
}
|
|
|
|
.wp-embed-meta {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.wp-embed-comments,
|
|
.wp-embed-share {
|
|
display: inline;
|
|
}
|
|
|
|
.wp-embed-meta a:hover {
|
|
text-decoration: none;
|
|
color: #0073aa;
|
|
}
|
|
|
|
.wp-embed-comments a {
|
|
line-height: 25px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.wp-embed-comments + .wp-embed-share {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.wp-embed-share-dialog {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(10, 10, 10, 0.9);
|
|
color: #fff;
|
|
opacity: 1;
|
|
transition: opacity .25s ease-in-out;
|
|
-moz-transition: opacity .25s ease-in-out;
|
|
-webkit-transition: opacity .25s ease-in-out;
|
|
}
|
|
|
|
.wp-embed-share-dialog.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open,
|
|
.wp-embed-share-dialog-close {
|
|
margin: -8px 0 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open .dashicons,
|
|
.wp-embed-share-dialog-close .dashicons {
|
|
padding: 4px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open .dashicons {
|
|
top: 8px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-open:focus .dashicons,
|
|
.wp-embed-share-dialog-close:focus .dashicons {
|
|
-webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
|
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
|
-webkit-border-radius: 100%;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.wp-embed-share-dialog-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-close:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-embed-share-dialog-close .dashicons {
|
|
height: 24px;
|
|
width: 24px;
|
|
-webkit-background-size: 24px 24px;
|
|
background-size: 24px;
|
|
}
|
|
|
|
.wp-embed-share-dialog-content {
|
|
height: 100%;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wp-embed-share-dialog-text {
|
|
margin-top: 25px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.wp-embed-share-tabs {
|
|
margin: 0 0 20px;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.wp-embed-share-tab-button {
|
|
display: inline;
|
|
}
|
|
|
|
.wp-embed-share-tab-button button {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
font-size: 16px;
|
|
line-height: 1.3;
|
|
color: #aaa;
|
|
cursor: pointer;
|
|
-webkit-transition: color .1s ease-in;
|
|
transition: color .1s ease-in;
|
|
}
|
|
|
|
.wp-embed-share-tab-button [aria-selected="true"] {
|
|
color: #fff;
|
|
}
|
|
|
|
.wp-embed-share-tab-button button:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.wp-embed-share-tab-button + .wp-embed-share-tab-button {
|
|
margin: 0 0 0 10px;
|
|
padding: 0 0 0 11px;
|
|
border-left: 1px solid #aaa;
|
|
}
|
|
|
|
.wp-embed-share-tab[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
p.wp-embed-share-description {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
font-style: italic;
|
|
color: #aaa;
|
|
}
|
|
|
|
.wp-embed-share-input {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border: none;
|
|
height: 28px;
|
|
margin: 0 0 10px 0;
|
|
padding: 0 5px;
|
|
font: 400 14px/1.5 'Open Sans', sans-serif;
|
|
resize: none;
|
|
cursor: text;
|
|
}
|
|
|
|
textarea.wp-embed-share-input {
|
|
height: 72px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-featured-image.square {
|
|
float: right;
|
|
margin-right: 0;
|
|
|
|
margin-left: 20px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-site-title a {
|
|
padding-left: 0;
|
|
padding-right: 35px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-site-icon {
|
|
margin-right: 0;
|
|
margin-left: 10px;
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-meta {
|
|
text-align: left;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-footer {
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-share {
|
|
margin-left: 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-share-dialog-close {
|
|
right: auto;
|
|
left: 20px;
|
|
}
|
|
|
|
html[dir="rtl"] .wp-embed-share-tab-button + .wp-embed-share-tab-button {
|
|
margin: 0 10px 0 0;
|
|
padding: 0 11px 0 0;
|
|
border-left: none;
|
|
border-right: 1px solid #aaa;
|
|
}
|