wp/wp-content/themes/twentysixteen/css/editor-style.css
changeset 8 c7c34916027a
parent 7 cf61fcea0001
child 9 177826044cd9
equal deleted inserted replaced
7:cf61fcea0001 8:c7c34916027a
     1 /*
       
     2 Theme Name: Twenty Sixteen
       
     3 Description: Used to style the TinyMCE editor.
       
     4 */
       
     5 
       
     6 
       
     7 /**
       
     8  * Table of Contents:
       
     9  *
       
    10  * 1.0 - Body
       
    11  * 2.0 - Typography
       
    12  * 3.0 - Elements
       
    13  * 4.0 - Alignment
       
    14  * 5.0 - Caption
       
    15  * 6.0 - Galleries
       
    16  * 7.0 - Audio / Video
       
    17  * 8.0 - RTL
       
    18  */
       
    19 
       
    20 
       
    21 /**
       
    22  * 1.0 - Body
       
    23  */
       
    24 
       
    25 body {
       
    26 	color: #1a1a1a;
       
    27 	font-family: Merriweather, Georgia, serif;
       
    28 	font-size: 16px;
       
    29 	font-weight: 400;
       
    30 	line-height: 1.75;
       
    31 	margin: 20px 40px;
       
    32 	max-width: 600px;
       
    33 	vertical-align: baseline;
       
    34 }
       
    35 
       
    36 body.post-type-page {
       
    37 	max-width: 840px;
       
    38 }
       
    39 
       
    40 
       
    41 /**
       
    42  * 2.0 - Typography
       
    43  */
       
    44 
       
    45 h1,
       
    46 h2,
       
    47 h3,
       
    48 h4,
       
    49 h5,
       
    50 h6 {
       
    51 	clear: both;
       
    52 	font-weight: 900;
       
    53 	margin: 56px 0 28px;
       
    54 }
       
    55 
       
    56 h1 {
       
    57 	font-size: 33px;
       
    58 	line-height: 1.2727272727;
       
    59 }
       
    60 
       
    61 h2 {
       
    62 	font-size: 28px;
       
    63 	line-height: 1.25;
       
    64 }
       
    65 
       
    66 h3 {
       
    67 	font-size: 23px;
       
    68 	line-height: 1.2173913043;
       
    69 }
       
    70 
       
    71 h4,
       
    72 h5,
       
    73 h6 {
       
    74 	font-size: 19px;
       
    75 	line-height: 1.1052631579;
       
    76 }
       
    77 
       
    78 h4 {
       
    79 	letter-spacing: 0.13333em;
       
    80 	text-transform: uppercase;
       
    81 }
       
    82 
       
    83 h6 {
       
    84 	font-style: italic;
       
    85 }
       
    86 
       
    87 h1:first-child,
       
    88 h2:first-child,
       
    89 h3:first-child,
       
    90 h4:first-child,
       
    91 h5:first-child,
       
    92 h6:first-child {
       
    93 	margin-top: 0;
       
    94 }
       
    95 
       
    96 p {
       
    97 	margin: 0 0 28px;
       
    98 }
       
    99 
       
   100 b,
       
   101 strong {
       
   102 	font-weight: 700;
       
   103 }
       
   104 
       
   105 dfn,
       
   106 cite,
       
   107 em,
       
   108 i {
       
   109 	font-style: italic;
       
   110 }
       
   111 
       
   112 blockquote {
       
   113 	border-left: 4px solid #1a1a1a;
       
   114 	color: #686868;
       
   115 	font-size: 19px;
       
   116 	font-style: italic;
       
   117 	line-height: 1.4736842105;
       
   118 	margin-bottom: 28px;
       
   119 	overflow: hidden;
       
   120 	padding: 0 0 0 24px;
       
   121 }
       
   122 
       
   123 blockquote:not(.alignleft):not(.alignright) {
       
   124 	margin-left: -28px;
       
   125 }
       
   126 
       
   127 blockquote blockquote:not(.alignleft):not(.alignright) {
       
   128 	margin-left: 0;
       
   129 }
       
   130 
       
   131 blockquote:before,
       
   132 blockquote:after {
       
   133 	content: "";
       
   134 	display: table;
       
   135 }
       
   136 
       
   137 blockquote:after {
       
   138 	clear: both;
       
   139 }
       
   140 
       
   141 blockquote > :last-child {
       
   142 	margin-bottom: 0;
       
   143 }
       
   144 
       
   145 blockquote cite,
       
   146 blockquote small {
       
   147 	color: #1a1a1a;
       
   148 	font-size: 16px;
       
   149 	line-height: 1.75;
       
   150 }
       
   151 
       
   152 blockquote em,
       
   153 blockquote i,
       
   154 blockquote cite {
       
   155 	font-style: normal;
       
   156 }
       
   157 
       
   158 blockquote strong,
       
   159 blockquote b {
       
   160 	font-weight: 400;
       
   161 }
       
   162 
       
   163 blockquote.alignleft,
       
   164 blockquote.alignright {
       
   165 	border: 0 solid #1a1a1a;
       
   166 	border-top-width: 4px;
       
   167 	padding: 18px 0 0;
       
   168 	width: -webkit-calc(50% - 14px);
       
   169 	width: calc(50% - 14px);
       
   170 }
       
   171 
       
   172 address {
       
   173 	font-style: italic;
       
   174 	margin: 0 0 28px;
       
   175 }
       
   176 
       
   177 code,
       
   178 kbd,
       
   179 tt,
       
   180 var,
       
   181 samp,
       
   182 pre {
       
   183 	font-family: Inconsolata, monospace;
       
   184 }
       
   185 
       
   186 pre {
       
   187 	border: 1px solid #d1d1d1;
       
   188 	font-size: 16px;
       
   189 	line-height: 1.3125;
       
   190 	margin: 0 0 28px;
       
   191 	max-width: 100%;
       
   192 	overflow: auto;
       
   193 	padding: 14px;
       
   194 	white-space: pre;
       
   195 	white-space: pre-wrap;
       
   196 	word-wrap: break-word;
       
   197 }
       
   198 
       
   199 code {
       
   200 	background-color: #d1d1d1;
       
   201 	padding: 2px 4px;
       
   202 }
       
   203 
       
   204 abbr[title] {
       
   205 	border-bottom: 1px dotted #d1d1d1;
       
   206 	cursor: help;
       
   207 }
       
   208 
       
   209 mark,
       
   210 ins {
       
   211 	background: #007acc;
       
   212 	color: #fff;
       
   213 	padding: 2px 4px;
       
   214 	text-decoration: none;
       
   215 }
       
   216 
       
   217 sup,
       
   218 sub {
       
   219 	font-size: 75%;
       
   220 	height: 0;
       
   221 	line-height: 0;
       
   222 	position: relative;
       
   223 	vertical-align: baseline;
       
   224 }
       
   225 
       
   226 sub {
       
   227 	top: -6px;
       
   228 }
       
   229 
       
   230 sup {
       
   231 	bottom: -3px;
       
   232 }
       
   233 
       
   234 small {
       
   235 	font-size: 80%;
       
   236 }
       
   237 
       
   238 big {
       
   239 	font-size: 125%;
       
   240 }
       
   241 
       
   242 
       
   243 /**
       
   244  * 3.0 - Elements
       
   245  */
       
   246 
       
   247 hr {
       
   248 	background-color: #d1d1d1;
       
   249 	border: 0;
       
   250 	height: 1px;
       
   251 	margin-bottom: 28px;
       
   252 }
       
   253 
       
   254 ul,
       
   255 ol {
       
   256 	margin: 0 0 28px 0;
       
   257 	padding: 0;
       
   258 }
       
   259 
       
   260 ul {
       
   261 	list-style: disc;
       
   262 }
       
   263 
       
   264 ol {
       
   265 	list-style: decimal;
       
   266 }
       
   267 
       
   268 li > ul,
       
   269 li > ol {
       
   270 	margin-bottom: 0;
       
   271 }
       
   272 
       
   273 li > ul,
       
   274 blockquote > ul {
       
   275 	margin-left: 20px;
       
   276 }
       
   277 
       
   278 li > ol,
       
   279 blockquote > ol {
       
   280 	margin-left: 24px;
       
   281 }
       
   282 
       
   283 dl {
       
   284 	margin: 0 0 28px;
       
   285 }
       
   286 
       
   287 dt {
       
   288 	font-weight: bold;
       
   289 }
       
   290 
       
   291 dd {
       
   292 	margin: 0 0 28px;
       
   293 }
       
   294 
       
   295 table,
       
   296 th,
       
   297 td,
       
   298 .mce-item-table,
       
   299 .mce-item-table th,
       
   300 .mce-item-table td {
       
   301 	border: 1px solid #d1d1d1;
       
   302 }
       
   303 
       
   304 table a {
       
   305 	color: #007acc;
       
   306 }
       
   307 
       
   308 table,
       
   309 .mce-item-table {
       
   310 	border-collapse: separate;
       
   311 	border-spacing: 0;
       
   312 	border-width: 1px 0 0 1px;
       
   313 	margin: 0 0 28px;
       
   314 	width: 100%;
       
   315 }
       
   316 
       
   317 table th,
       
   318 .mce-item-table th,
       
   319 table caption {
       
   320 	border-width: 0 1px 1px 0;
       
   321 	font-size: 16px;
       
   322 	font-weight: 700;
       
   323 	padding: 7px;
       
   324 	text-align: left;
       
   325 	vertical-align: baseline;
       
   326 }
       
   327 
       
   328 table td,
       
   329 .mce-item-table td {
       
   330 	border-width: 0 1px 1px 0;
       
   331 	font-size: 16px;
       
   332 	padding: 7px;
       
   333 	vertical-align: baseline;
       
   334 }
       
   335 
       
   336 img {
       
   337 	border: 0;
       
   338 	height: auto;
       
   339 	max-width: 100%;
       
   340 	vertical-align: middle;
       
   341 }
       
   342 
       
   343 a img {
       
   344 	display: block;
       
   345 }
       
   346 
       
   347 figure {
       
   348 	margin: 0;
       
   349 }
       
   350 
       
   351 del {
       
   352 	opacity: 0.8;
       
   353 }
       
   354 
       
   355 a {
       
   356 	box-shadow: 0 1px 0 0 currentColor;
       
   357 	color: #007acc;
       
   358 	text-decoration: none;
       
   359 }
       
   360 
       
   361 fieldset {
       
   362 	border: 1px solid #d1d1d1;
       
   363 	margin: 0 0 28px;
       
   364 	padding: 14px;
       
   365 }
       
   366 
       
   367 
       
   368 /**
       
   369  * 4.0 - Alignment
       
   370  */
       
   371 
       
   372 .alignleft {
       
   373 	float: left;
       
   374 	margin: 6px 28px 28px 0;
       
   375 }
       
   376 
       
   377 .alignright {
       
   378 	float: right;
       
   379 	margin: 6px 0 28px 28px;
       
   380 }
       
   381 
       
   382 .aligncenter {
       
   383 	clear: both;
       
   384 	display: block;
       
   385 	margin: 0 auto 28px;
       
   386 }
       
   387 
       
   388 
       
   389 /**
       
   390  * 5.0 - Caption
       
   391  */
       
   392 
       
   393 .wp-caption {
       
   394 	background: transparent;
       
   395 	border: none;
       
   396 	margin-bottom: 28px;
       
   397 	max-width: 100%;
       
   398 	padding: 0;
       
   399 	text-align: inherit;
       
   400 }
       
   401 
       
   402 .wp-caption-text,
       
   403 .wp-caption-dd {
       
   404 	color: #686868;
       
   405 	font-size: 13px;
       
   406 	font-style: italic;
       
   407 	line-height: 1.6153846154;
       
   408 	padding-top: 7px;
       
   409 }
       
   410 
       
   411 
       
   412 /**
       
   413  * 6.0 - Galleries
       
   414  */
       
   415 
       
   416 .mce-content-body .wpview-wrap {
       
   417 	margin-bottom: 28px;
       
   418 }
       
   419 
       
   420 .gallery {
       
   421 	margin: 0 -1.1666667%;
       
   422 	padding: 0;
       
   423 }
       
   424 
       
   425 .gallery .gallery-item {
       
   426 	display: inline-block;
       
   427 	max-width: 33.33%;
       
   428 	padding: 0 1.1400652% 2.2801304%;
       
   429 	text-align: center;
       
   430 	vertical-align: top;
       
   431 	width: 100%;
       
   432 }
       
   433 
       
   434 .gallery-columns-1 .gallery-item {
       
   435 	max-width: 100%;
       
   436 }
       
   437 
       
   438 .gallery-columns-2 .gallery-item {
       
   439 	max-width: 50%;
       
   440 }
       
   441 
       
   442 .gallery-columns-4 .gallery-item {
       
   443 	max-width: 25%;
       
   444 }
       
   445 
       
   446 .gallery-columns-5 .gallery-item {
       
   447 	max-width: 20%;
       
   448 }
       
   449 
       
   450 .gallery-columns-6 .gallery-item {
       
   451 	max-width: 16.66%;
       
   452 }
       
   453 
       
   454 .gallery-columns-7 .gallery-item {
       
   455 	max-width: 14.28%;
       
   456 }
       
   457 
       
   458 .gallery-columns-8 .gallery-item {
       
   459 	max-width: 12.5%;
       
   460 }
       
   461 
       
   462 .gallery-columns-9 .gallery-item {
       
   463 	max-width: 11.11%;
       
   464 }
       
   465 
       
   466 .gallery .gallery-caption {
       
   467 	font-size: 13px;
       
   468 	margin: 0;
       
   469 }
       
   470 
       
   471 .gallery-columns-6 .gallery-caption,
       
   472 .gallery-columns-7 .gallery-caption,
       
   473 .gallery-columns-8 .gallery-caption,
       
   474 .gallery-columns-9 .gallery-caption {
       
   475 	display: none;
       
   476 }
       
   477 
       
   478 
       
   479 /**
       
   480  * 7.0 - Audio / Video
       
   481  */
       
   482 
       
   483 .wp-audio-shortcode a,
       
   484 .wp-playlist a {
       
   485 	box-shadow: none;
       
   486 }
       
   487 
       
   488 .mce-content-body .wp-audio-playlist {
       
   489 	margin: 0;
       
   490 	padding-bottom: 0;
       
   491 }
       
   492 
       
   493 .mce-content-body .wp-playlist-tracks {
       
   494 	margin-top: 0;
       
   495 }
       
   496 
       
   497 .mce-content-body  .wp-playlist-item {
       
   498 	padding: 10px 0;
       
   499 }
       
   500 
       
   501 .mce-content-body .wp-playlist-item-length {
       
   502 	top: 10px;
       
   503 }
       
   504 
       
   505 
       
   506 /**
       
   507  * 8.0 - RTL
       
   508  */
       
   509 
       
   510 .rtl blockquote {
       
   511 	border: 0 solid #1a1a1a;
       
   512 	border-right-width: 4px;
       
   513 }
       
   514 
       
   515 .rtl blockquote.alignleft,
       
   516 .rtl blockquote.alignright {
       
   517 	border: 0 solid #1a1a1a;
       
   518 	border-top-width: 4px;
       
   519 }
       
   520 
       
   521 .rtl blockquote:not(.alignleft):not(.alignright) {
       
   522 	margin-right: -28px;
       
   523 	padding: 0 24px 0 0;
       
   524 }
       
   525 
       
   526 .rtl blockquote blockquote:not(.alignleft):not(.alignright) {
       
   527 	margin-right: 0;
       
   528 	margin-left: auto;
       
   529 }
       
   530 
       
   531 .rtl li > ul,
       
   532 .rtl blockquote > ul {
       
   533 	margin-right: 20px;
       
   534 	margin-left: auto;
       
   535 }
       
   536 
       
   537 .rtl li > ol,
       
   538 .rtl blockquote > ol {
       
   539 	margin-right: 24px;
       
   540 	margin-left: auto;
       
   541 }
       
   542 
       
   543 .rtl table th,
       
   544 .rtl .mce-item-table th,
       
   545 .rtl table caption {
       
   546 	text-align: right;
       
   547 }