WordPress/wp-content/themes/twentyseventeen/assets/css/editor-style.css
desrosj 0c1769e5ba Twenty Seventeen: Bug Fixes.
- Remove unnecessary `ol` styles from editor. Twenty Seventeen was designed with bolded numbers for its ordered list styles. This was removed from the theme prior to launch, but it was left in the editor styles, so it needed to be removed there, too.
- To improve accessibility, the cookies content checkbox in the comment form needed some visible indication when it’s in focus.
- Twenty Seventeen’s editor styles contained an Internet Explorer 8 specific fix that stopped images from being scalable in the editor in other browsers. Since the editor no longer supports IE8, this fix can safely be removed.
- Fix the `font-family` used for Simplified Chinese (zh_CN) in the block editor CSS.

Props mmaumio, edpittol, pratikthink, afercia, audrasjb, mihaivalentin, subrataemfluence, vaishalipanchal, ze3kr, laurelfulford.

Merges [44203-44205] and [44235] into trunk.

Fixes #44775, #44699, #39738, #45408.
Built from https://develop.svn.wordpress.org/trunk@44307


git-svn-id: http://core.svn.wordpress.org/trunk@44137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-12-19 03:25:48 +00:00

583 lines
8.6 KiB
CSS

/*
Theme Name: Twenty Seventeen
Description: Used to style the TinyMCE editor.
*/
/**
* Table of Contents:
*
* 1.0 - Body
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Alignment
* 5.0 - Caption
* 6.0 - Galleries
* 7.0 - Media Elements
* 8.0 - RTL
*/
/**
* 1.0 - Body
*/
body {
background-color: #fff;
color: #333;
margin: 20px 40px;
max-width: 580px;
}
/**
* 2.0 - Typography
*/
body,
button,
input,
select,
textarea {
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 400;
line-height: 1.66;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
line-height: 1.4;
margin: 0 0 0.75em;
padding: 1.5em 0 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
padding-top: 0;
}
h1 {
font-size: 24px;
font-size: 1.5rem;
font-weight: 300;
}
h2 {
color: #666;
font-size: 20px;
font-size: 1.25rem;
font-weight: 300;
}
h3 {
color: #333;
font-size: 18px;
font-size: 1.125rem;
font-weight: 300;
}
h4 {
color: #333;
font-size: 16px;
font-size: 1rem;
font-weight: 800;
}
h5 {
color: #767676;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
h6 {
color: #333;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 800;
}
p {
margin: 0 0 1.5em;
padding: 0;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
color: #666;
font-size: 18px;
font-size: 1.125rem;
font-style: italic;
line-height: 1.7;
margin: 0;
overflow: hidden;
padding: 0;
}
blockquote.alignleft,
blockquote.alignright {
font-size: 14px;
font-size: 0.875rem;
width: 34%;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #eee;
text-decoration: none;
}
big {
font-size: 125%;
}
blockquote,
q {
quotes: "" "";
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
/* Typography for Thai Font */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6 {
letter-spacing: 0;
line-height: 1.65;
}
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
line-height: 1.8;
}
/**
* 3.0 - Elements
*/
hr {
background-color: #bbb;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em;
padding: 0;
}
ul {
list-style: disc;
}
ol > li {
position: relative;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
}
table {
border-collapse: collapse;
margin: 0 0 1.5em;
width: 100%;
}
thead th {
border-bottom: 2px solid #bbb;
padding-bottom: 0.5em;
}
th {
padding: 0.4em;
text-align: left;
}
tr {
border-bottom: 1px solid #eee;
}
td {
padding: 0.4em;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
a {
-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
color: #222;
text-decoration: none;
-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:focus {
color: #000;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}
/* Fixes linked images */
a img {
background: #fff;
-webkit-box-shadow: 0 0 0 6px #fff;
box-shadow: 0 0 0 6px #fff;
}
/**
* 4.0 - Alignment
*/
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
embed,
iframe,
object {
margin-bottom: 1.5em;
max-width: 100%;
}
/**
* 5.0 - Caption
*/
.wp-caption {
color: #666;
font-size: 13px;
font-size: 0.8125rem;
font-style: italic;
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
/**
* 6.0 - Galleries
*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
-webkit-box-shadow: none;
box-shadow: none;
background: none;
display: inline-block;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/**
* 7.0 - Media Elements
*/
.mejs-container {
margin-bottom: 1.5em;
}
/* Audio Player */
.mejs-controls a.mejs-horizontal-volume-slider,
.mejs-controls a.mejs-horizontal-volume-slider:focus,
.mejs-controls a.mejs-horizontal-volume-slider:hover {
background: transparent;
border: 0;
}
/* Playlist Color Overrides: Light */
.wp-playlist-light {
border-color: #eee;
color: #222;
}
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
color: #333;
}
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
color: #767676;
}
.wp-playlist-light .wp-playlist-item {
border-bottom: 1px dotted #eee;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}
.wp-playlist-light .wp-playlist-item:hover,
.wp-playlist-light .wp-playlist-item:focus {
border-bottom-color: rgba(0, 0, 0, 0);
background-color: #767676;
color: #fff;
}
.wp-playlist-light a.wp-playlist-caption:hover,
.wp-playlist-light .wp-playlist-item:hover a,
.wp-playlist-light .wp-playlist-item:focus a {
color: #fff;
}
/* Playlist Color Overrides: Dark */
.wp-playlist-dark {
background: #222;
border-color: #333;
}
.wp-playlist-dark .mejs-container .mejs-controls {
background-color: #333;
}
.wp-playlist-dark .wp-playlist-caption {
color: #fff;
}
.wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
color: #eee;
}
.wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
color: #aaa;
}
.wp-playlist-dark .wp-playlist-playing {
background-color: #333;
}
.wp-playlist-dark .wp-playlist-item {
border-bottom: 1px dotted #555;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}
.wp-playlist-dark .wp-playlist-item:hover,
.wp-playlist-dark .wp-playlist-item:focus {
border-bottom-color: rgba(0, 0, 0, 0);
background-color: #aaa;
color: #222;
}
.wp-playlist-dark a.wp-playlist-caption:hover,
.wp-playlist-dark .wp-playlist-item:hover a,
.wp-playlist-dark .wp-playlist-item:focus a {
color: #222;
}
/* Playlist Style Overrides */
.wp-playlist {
padding: 0.625em 0.625em 0.3125em;
}
.wp-playlist-current-item .wp-playlist-item-title {
font-weight: 700;
}
.wp-playlist-current-item .wp-playlist-item-album {
font-style: normal;
}
.wp-playlist-current-item .wp-playlist-item-artist {
font-size: 10px;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.1818em;
text-transform: uppercase;
}
.wp-playlist-item {
padding: 0 0.3125em;
cursor: pointer;
}
.wp-playlist-item:last-of-type {
border-bottom: none;
}
.wp-playlist-item a {
padding: 0.3125em 0;
border-bottom: none;
}
.wp-playlist-item a,
.wp-playlist-item a:focus,
.wp-playlist-item a:hover {
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
}
.wp-playlist-item-length {
top: 5px;
}
/**
* 8.0 - RTL
*/
.rtl th {
text-align: right;
}
.rtl ol > li:before {
left: auto;
right: -1.5em;
}
.rtl li > ul,
.rtl li > ol {
margin-left: 0;
margin-right: 1.5em;
}
.rtl .mejs-offscreen {
right: -10000px;
}