Skip to content

Instantly share code, notes, and snippets.

@LC43

LC43/wp-embed.css

Last active December 8, 2023 09:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LC43/486fc943ffe18f170b116adf804ea171 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LC43/486fc943ffe18f170b116adf804ea171 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for embedded wp content
Raw
wp-embed.css
.wp-embed .dashicons {
display:inline-block;
width:20px;
height:20px;
background-color:transparent;
background-repeat:no-repeat;
background-size:20px;
background-position:center;
transition:background .1s ease-in;
position:relative;
top:5px
}
.wp-embed .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")
}
.wp-embed .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 .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")
}
.wp-embed .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");
display:none
}
.wp-embed .dashicons-share {
display:inline-block
}
.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 {
padding:25px;
font-size:14px;
font-weight:400;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
line-height:1.5;
color:#8c8f94;
background:#fff;
border:1px solid #dcdcde;
box-shadow:0 1px 1px rgba(0,0,0,.05);
overflow:auto;
zoom:1
}
.wp-embed a {
color:#8c8f94;
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:600;
font-size:22px;
line-height:1.3
}
.wp-embed-heading a {
color:#2c3338
}
.wp-embed .wp-embed-more {
color:#c3c4c7
}
.wp-embed-footer {
display:table;
width:100%;
margin-top:30px
}
.wp-embed-site-icon {
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
height:25px;
width:25px;
border:0
}
.wp-embed-site-title {
font-weight:600;
line-height:1.78571428
}
.wp-embed-site-title a {
position:relative;
display:inline-block;
padding-left:35px
}
.wp-embed-meta,
.wp-embed-site-title {
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:#2271b1
}
.wp-embed-comments a {
line-height:1.78571428;
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:#1d2327;
background-color:rgba(0,0,0,.9);
color:#fff;
opacity:1;
transition:opacity .25s ease-in-out
}
.wp-embed-share-dialog.hidden {
opacity:0;
visibility:hidden
}
.wp-embed-share-dialog-close,
.wp-embed-share-dialog-open {
margin:-8px 0 0;
padding:0;
background:0 0;
border:none;
cursor:pointer;
outline:0
}
.wp-embed-share-dialog-close .dashicons,
.wp-embed-share-dialog-open .dashicons {
padding:4px
}
.wp-embed-share-dialog-open .dashicons {
top:8px
}
.wp-embed-share-dialog-close:focus .dashicons,
.wp-embed-share-dialog-open:focus .dashicons {
box-shadow:0 0 0 1px #4f94d4,0 0 2px 1px rgba(79,148,212,.8);
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;
background-size:24px
}
.wp-embed-share-dialog-content {
height:100%;
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-block
}
.wp-embed-share-tab-button button {
margin:0;
padding:0;
border:none;
background:0 0;
font-size:16px;
line-height:1.3;
color:#a7aaad;
cursor:pointer;
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 #a7aaad
}
.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:#a7aaad
}
.wp-embed-share-input {
box-sizing:border-box;
width:100%;
border:none;
height:28px;
margin:0 0 10px;
padding:0 5px;
font-size:14px;
font-weight:400;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
line-height:1.5;
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-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 #a7aaad
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment