wp/wp-content/themes/twentyfourteen/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 Fourteen
       
     3 Description: Used to style the TinyMCE editor.
       
     4 */
       
     5 
       
     6 
       
     7 /**
       
     8  * Table of Contents:
       
     9  *
       
    10  * 1.0 - Body
       
    11  * 2.0 - Headings
       
    12  * 3.0 - Text Elements
       
    13  * 4.0 - Links
       
    14  * 5.0 - Alignment
       
    15  * 6.0 - Tables
       
    16  * 7.0 - Images
       
    17  * 8.0 - Galleries
       
    18  * 9.0 - Audio/Video
       
    19  * 10.0 - RTL
       
    20  * ----------------------------------------------------------------------------
       
    21  */
       
    22 
       
    23 
       
    24 /**
       
    25  * 1.0 Body
       
    26  * ----------------------------------------------------------------------------
       
    27  */
       
    28 
       
    29 html .mceContentBody {
       
    30 	font-size: 100%;
       
    31 	max-width: 474px;
       
    32 }
       
    33 
       
    34 body {
       
    35 	color: #2b2b2b;
       
    36 	font-family: Lato, sans-serif;
       
    37 	font-weight: 400;
       
    38 	line-height: 1.5;
       
    39 	vertical-align: baseline;
       
    40 }
       
    41 
       
    42 
       
    43 /**
       
    44  * 2.0 Headings
       
    45  * ----------------------------------------------------------------------------
       
    46  */
       
    47 
       
    48 h1,
       
    49 h2,
       
    50 h3,
       
    51 h4,
       
    52 h5,
       
    53 h6 {
       
    54 	clear: both;
       
    55 	font-weight: 700;
       
    56 	margin: 36px 0 12px;
       
    57 }
       
    58 
       
    59 h1 {
       
    60 	font-size: 26px;
       
    61 	line-height: 1.3846153846;
       
    62 }
       
    63 
       
    64 h2 {
       
    65 	font-size: 24px;
       
    66 	line-height: 1;
       
    67 }
       
    68 
       
    69 h3 {
       
    70 	font-size: 22px;
       
    71 	line-height: 1.0909090909;
       
    72 }
       
    73 
       
    74 h4 {
       
    75 	font-size: 20px;
       
    76 	line-height: 1.2;
       
    77 }
       
    78 
       
    79 h5 {
       
    80 	font-size: 18px;
       
    81 	line-height: 1.3333333333;
       
    82 }
       
    83 
       
    84 h6 {
       
    85 	font-size: 16px;
       
    86 	line-height: 1.5;
       
    87 }
       
    88 
       
    89 h1:first-child,
       
    90 h2:first-child,
       
    91 h3:first-child,
       
    92 h4:first-child,
       
    93 h5:first-child,
       
    94 h6:first-child {
       
    95 	margin-top: 0;
       
    96 }
       
    97 
       
    98 
       
    99 /**
       
   100  * 3.0 Text Elements
       
   101  * ----------------------------------------------------------------------------
       
   102  */
       
   103 
       
   104 address {
       
   105 	font-style: italic;
       
   106 	margin-bottom: 24px;
       
   107 }
       
   108 
       
   109 abbr[title] {
       
   110 	border-bottom: 1px dotted #2b2b2b;
       
   111 	cursor: help;
       
   112 }
       
   113 
       
   114 b,
       
   115 strong {
       
   116 	font-weight: 700;
       
   117 }
       
   118 
       
   119 cite {
       
   120 	border: 0;
       
   121 }
       
   122 
       
   123 cite,
       
   124 dfn,
       
   125 em,
       
   126 i {
       
   127 	font-style: italic;
       
   128 }
       
   129 
       
   130 mark,
       
   131 ins {
       
   132 	background: #fff9c0;
       
   133 	border: 0;
       
   134 	color: inherit;
       
   135 	text-decoration: none;
       
   136 }
       
   137 
       
   138 p {
       
   139 	margin: 0 0 24px;
       
   140 }
       
   141 
       
   142 code,
       
   143 kbd,
       
   144 tt,
       
   145 var,
       
   146 samp,
       
   147 pre {
       
   148 	font-family: monospace, serif;
       
   149 	font-size: 15px;
       
   150 	line-height: 1.6;
       
   151 }
       
   152 
       
   153 pre {
       
   154 	border: 1px solid rgba(0, 0, 0, 0.1);
       
   155 	margin-bottom: 24px;
       
   156 	max-width: 100%;
       
   157 	overflow: auto;
       
   158 	padding: 12px;
       
   159 	white-space: pre;
       
   160 	white-space: pre-wrap;
       
   161 	word-wrap: break-word;
       
   162 }
       
   163 
       
   164 blockquote,
       
   165 q {
       
   166 	quotes: none;
       
   167 }
       
   168 
       
   169 blockquote:before,
       
   170 blockquote:after,
       
   171 q:before,
       
   172 q:after {
       
   173 	content: "";
       
   174 	content: none;
       
   175 }
       
   176 
       
   177 blockquote {
       
   178 	color: #767676;
       
   179 	font-size: 19px;
       
   180 	font-style: italic;
       
   181 	font-weight: 300;
       
   182 	line-height: 1.2631578947;
       
   183 	margin: 0 0 24px;
       
   184 }
       
   185 
       
   186 blockquote cite,
       
   187 blockquote small {
       
   188 	color: #2b2b2b;
       
   189 	font-size: 16px;
       
   190 	font-weight: 400;
       
   191 	line-height: 1.5;
       
   192 }
       
   193 
       
   194 blockquote em,
       
   195 blockquote i,
       
   196 blockquote cite {
       
   197 	font-style: normal;
       
   198 }
       
   199 
       
   200 blockquote strong,
       
   201 blockquote b {
       
   202 	font-weight: 400;
       
   203 }
       
   204 
       
   205 small {
       
   206 	font-size: smaller;
       
   207 }
       
   208 
       
   209 big {
       
   210 	font-size: 125%;
       
   211 }
       
   212 
       
   213 sup,
       
   214 sub {
       
   215 	font-size: 75%;
       
   216 	height: 0;
       
   217 	line-height: 0;
       
   218 	position: relative;
       
   219 	vertical-align: baseline;
       
   220 }
       
   221 
       
   222 sup {
       
   223 	bottom: 1ex;
       
   224 }
       
   225 
       
   226 sub {
       
   227 	top: .5ex;
       
   228 }
       
   229 
       
   230 dl {
       
   231 	margin: 0 0 24px;
       
   232 }
       
   233 
       
   234 dt {
       
   235 	font-weight: bold;
       
   236 }
       
   237 
       
   238 dd {
       
   239 	margin: 0 0 24px;
       
   240 }
       
   241 
       
   242 ul,
       
   243 ol {
       
   244 	list-style: none;
       
   245 	margin: 0 0 24px 20px;
       
   246 	padding-left: 0;
       
   247 }
       
   248 
       
   249 ul {
       
   250 	list-style: disc;
       
   251 }
       
   252 
       
   253 ol {
       
   254 	list-style: decimal;
       
   255 }
       
   256 
       
   257 li > ul,
       
   258 li > ol {
       
   259 	margin: 0 0 0 20px;
       
   260 }
       
   261 
       
   262 del {
       
   263 	color: #767676;
       
   264 }
       
   265 
       
   266 hr {
       
   267 	background-color: rgba(0, 0, 0, 0.1);
       
   268 	border: 0;
       
   269 	height: 1px;
       
   270 	margin-bottom: 23px;
       
   271 }
       
   272 
       
   273 
       
   274 /**
       
   275  * 4.0 Links
       
   276  * ----------------------------------------------------------------------------
       
   277  */
       
   278 
       
   279 a {
       
   280 	color: #24890d;
       
   281 	text-decoration: none;
       
   282 }
       
   283 
       
   284 a:visited {
       
   285 	color: #24890d;
       
   286 }
       
   287 
       
   288 a:focus {
       
   289 	outline: thin dotted;
       
   290 }
       
   291 
       
   292 a:active,
       
   293 a:hover {
       
   294 	color: #41a62a;
       
   295 	outline: 0;
       
   296 }
       
   297 
       
   298 
       
   299 /**
       
   300  * 5.0 Alignment
       
   301  * ----------------------------------------------------------------------------
       
   302  */
       
   303 
       
   304 .alignleft {
       
   305 	float: left;
       
   306 	margin: 7px 24px 7px 0;
       
   307 }
       
   308 
       
   309 .alignright {
       
   310 	float: right;
       
   311 	margin: 7px 0 7px 24px;
       
   312 }
       
   313 
       
   314 .aligncenter {
       
   315 	clear: both;
       
   316 	display: block;
       
   317 	margin: 7px auto;
       
   318 }
       
   319 
       
   320 blockquote.alignleft,
       
   321 blockquote.alignright {
       
   322 	border-top: 1px solid rgba(0, 0, 0, 0.1);
       
   323 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       
   324 	padding-top: 17px;
       
   325 	width: 50%;
       
   326 }
       
   327 
       
   328 blockquote.alignleft p,
       
   329 blockquote.alignright p {
       
   330 	margin-bottom: 17px;
       
   331 }
       
   332 
       
   333 
       
   334 /**
       
   335  * 6.0 Tables
       
   336  * ----------------------------------------------------------------------------
       
   337  */
       
   338 
       
   339 .mceItemTable,
       
   340 .mce-item-table {
       
   341 	border: 1px solid rgba(0, 0, 0, 0.1);
       
   342 	border-width: 1px 0 0 1px;
       
   343 	border-collapse: separate;
       
   344 	border-spacing: 0;
       
   345 	font-size: 14px;
       
   346 	line-height: 1.2857142857;
       
   347 	margin-bottom: 24px;
       
   348 	width: 100%;
       
   349 }
       
   350 
       
   351 .mceItemTable th,
       
   352 .mceItemTable caption,
       
   353 .mce-item-table th,
       
   354 .mce-item-table caption {
       
   355 	border: 1px solid rgba(0, 0, 0, 0.1);
       
   356 	border-width: 0 1px 1px 0;
       
   357 	font-weight: 700;
       
   358 	padding: 8px;
       
   359 	text-align: left;
       
   360 	text-transform: uppercase;
       
   361 	vertical-align: baseline;
       
   362 }
       
   363 
       
   364 .mceItemTable td,
       
   365 .mce-item-table td {
       
   366 	border: 1px solid rgba(0, 0, 0, 0.1);
       
   367 	border-width: 0 1px 1px 0;
       
   368 	font-family: Lato, sans-serif;
       
   369 	font-size: 14px;
       
   370 	padding: 8px;
       
   371 	vertical-align: baseline;
       
   372 }
       
   373 
       
   374 
       
   375 /**
       
   376  * 7.0 Images
       
   377  * ----------------------------------------------------------------------------
       
   378  */
       
   379 
       
   380 img {
       
   381 	height: auto;
       
   382 	max-width: 100%;
       
   383 	vertical-align: middle;
       
   384 }
       
   385 
       
   386 .wp-caption {
       
   387 	background: transparent;
       
   388 	border: none;
       
   389 	color: #767676;
       
   390 	margin: 0 0 24px 0;
       
   391 	max-width: 100%;
       
   392 	padding: 0;
       
   393 	text-align: left;
       
   394 }
       
   395 
       
   396 .html5-captions .wp-caption {
       
   397 	padding: 0;
       
   398 }
       
   399 
       
   400 .wp-caption.alignleft {
       
   401 	margin: 7px 14px 7px 0;
       
   402 }
       
   403 
       
   404 .html5-captions .wp-caption.alignleft {
       
   405 	margin-right: 24px;
       
   406 }
       
   407 
       
   408 .wp-caption.alignright {
       
   409 	margin: 7px 0 7px 14px;
       
   410 }
       
   411 
       
   412 .wp-caption.alignright img,
       
   413 .wp-caption.alignright .wp-caption-dd {
       
   414 	padding-left: 10px;
       
   415 }
       
   416 
       
   417 .html5-captions .wp-caption.alignright {
       
   418 	margin-left: 24px;
       
   419 }
       
   420 
       
   421 .html5-captions .wp-caption.alignright img,
       
   422 .html5-captions .wp-caption.alignright .wp-caption-dd {
       
   423 	padding: 0;
       
   424 }
       
   425 
       
   426 .wp-caption.aligncenter {
       
   427 	margin: 7px auto;
       
   428 }
       
   429 
       
   430 .wp-caption-dt {
       
   431 	margin: 0;
       
   432 }
       
   433 
       
   434 .wp-caption .wp-caption-text,
       
   435 .wp-caption-dd {
       
   436 	-webkit-box-sizing: border-box;
       
   437 	-moz-box-sizing: border-box;
       
   438 	box-sizing: border-box;
       
   439 	font-size: 12px;
       
   440 	font-style: italic;
       
   441 	line-height: 1.5;
       
   442 	margin: 9px 0;
       
   443 	padding: 0 10px 0 0; /* Avoid the caption to overflow the width of the image because wp-caption has 10px wider width */
       
   444 	text-align: left;
       
   445 }
       
   446 
       
   447 .mceTemp + ul,
       
   448 .mceTemp + ol {
       
   449 	list-style-position: inside;
       
   450 }
       
   451 
       
   452 /**
       
   453  * 8.0 Gallery
       
   454  * -----------------------------------------------------------------------------
       
   455  */
       
   456 
       
   457 .gallery .gallery-item {
       
   458 	float: left;
       
   459 	margin: 0 4px 4px 0;
       
   460 	overflow: hidden;
       
   461 	padding: 0;
       
   462 	position: relative;
       
   463 }
       
   464 
       
   465 .gallery-columns-1 .gallery-item {
       
   466 	max-width: 100%;
       
   467 	width: auto;
       
   468 }
       
   469 
       
   470 .gallery-columns-2 .gallery-item {
       
   471 	max-width: 48%;
       
   472 	max-width: -webkit-calc(50% - 14px);
       
   473 	max-width:         calc(50% - 14px);
       
   474 	width: auto;
       
   475 }
       
   476 
       
   477 .gallery-columns-3 .gallery-item {
       
   478 	max-width: 32%;
       
   479 	max-width: -webkit-calc(33.3% - 11px);
       
   480 	max-width:         calc(33.3% - 11px);
       
   481 	width: auto;
       
   482 }
       
   483 
       
   484 .gallery-columns-4 .gallery-item {
       
   485 	max-width: 23%;
       
   486 	max-width: -webkit-calc(25% - 9px);
       
   487 	max-width:         calc(25% - 9px);
       
   488 	width: auto;
       
   489 }
       
   490 
       
   491 .gallery-columns-5 .gallery-item {
       
   492 	max-width: 19%;
       
   493 	max-width: -webkit-calc(20% - 8px);
       
   494 	max-width:         calc(20% - 8px);
       
   495 	width: auto;
       
   496 }
       
   497 
       
   498 .gallery-columns-6 .gallery-item {
       
   499 	max-width: 15%;
       
   500 	max-width: -webkit-calc(16.7% - 7px);
       
   501 	max-width:         calc(16.7% - 7px);
       
   502 	width: auto;
       
   503 }
       
   504 
       
   505 .gallery-columns-7 .gallery-item {
       
   506 	max-width: 13%;
       
   507 	max-width: -webkit-calc(14.28% - 7px);
       
   508 	max-width:         calc(14.28% - 7px);
       
   509 	width: auto;
       
   510 }
       
   511 
       
   512 .gallery-columns-8 .gallery-item {
       
   513 	max-width: 11%;
       
   514 	max-width: -webkit-calc(12.5% - 6px);
       
   515 	max-width:         calc(12.5% - 6px);
       
   516 	width: auto;
       
   517 }
       
   518 
       
   519 .gallery-columns-9 .gallery-item {
       
   520 	max-width: 9%;
       
   521 	max-width: -webkit-calc(11.1% - 6px);
       
   522 	max-width:         calc(11.1% - 6px);
       
   523 	width: auto;
       
   524 }
       
   525 
       
   526 .gallery-columns-1 .gallery-item:nth-of-type(1n),
       
   527 .gallery-columns-2 .gallery-item:nth-of-type(2n),
       
   528 .gallery-columns-3 .gallery-item:nth-of-type(3n),
       
   529 .gallery-columns-4 .gallery-item:nth-of-type(4n),
       
   530 .gallery-columns-5 .gallery-item:nth-of-type(5n),
       
   531 .gallery-columns-6 .gallery-item:nth-of-type(6n),
       
   532 .gallery-columns-7 .gallery-item:nth-of-type(7n),
       
   533 .gallery-columns-8 .gallery-item:nth-of-type(8n),
       
   534 .gallery-columns-9 .gallery-item:nth-of-type(9n) {
       
   535 	margin-right: 0;
       
   536 }
       
   537 
       
   538 .gallery-columns-1 .gallery-item:nth-of-type(1n),
       
   539 .gallery-columns-2 .gallery-item:nth-of-type(2n - 1),
       
   540 .gallery-columns-3 .gallery-item:nth-of-type(3n - 2),
       
   541 .gallery-columns-4 .gallery-item:nth-of-type(4n - 3),
       
   542 .gallery-columns-5 .gallery-item:nth-of-type(5n - 4),
       
   543 .gallery-columns-6 .gallery-item:nth-of-type(6n - 5),
       
   544 .gallery-columns-7 .gallery-item:nth-of-type(7n - 6),
       
   545 .gallery-columns-8 .gallery-item:nth-of-type(8n - 7),
       
   546 .gallery-columns-9 .gallery-item:nth-of-type(9n - 8) {
       
   547 	margin-left: 12px; /* Compensate for the default negative margin on .gallery, which can't be changed. */
       
   548 }
       
   549 
       
   550 .gallery .gallery-caption {
       
   551 	background-color: rgba(0, 0, 0, 0.7);
       
   552 	-webkit-box-sizing: border-box;
       
   553 	-moz-box-sizing:    border-box;
       
   554 	box-sizing:         border-box;
       
   555 	color: #fff;
       
   556 	font-size: 12px;
       
   557 	line-height: 1.5;
       
   558 	margin: 0;
       
   559 	max-height: 50%;
       
   560 	opacity: 0;
       
   561 	padding: 6px 8px;
       
   562 	position: absolute;
       
   563 	bottom: 0;
       
   564 	left: 0;
       
   565 	text-align: left;
       
   566 	width: 100%;
       
   567 }
       
   568 
       
   569 .gallery .gallery-caption:before {
       
   570 	content: "";
       
   571 	height: 100%;
       
   572 	min-height: 49px;
       
   573 	position: absolute;
       
   574 	top: 0;
       
   575 	left: 0;
       
   576 	width: 100%;
       
   577 }
       
   578 
       
   579 .gallery-item:hover .gallery-caption {
       
   580 	opacity: 1;
       
   581 }
       
   582 
       
   583 .gallery-columns-7 .gallery-caption,
       
   584 .gallery-columns-8 .gallery-caption,
       
   585 .gallery-columns-9 .gallery-caption {
       
   586 	display: none;
       
   587 }
       
   588 
       
   589 
       
   590 /**
       
   591  * 9.0 Audio/Video
       
   592  * ----------------------------------------------------------------------------
       
   593  */
       
   594 
       
   595 .mejs-mediaelement,
       
   596 .mejs-container .mejs-controls {
       
   597 	background: #000;
       
   598 }
       
   599 
       
   600 .mejs-controls .mejs-time-rail .mejs-time-loaded,
       
   601 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
       
   602 	background: #fff;
       
   603 }
       
   604 
       
   605 .mejs-controls .mejs-time-rail .mejs-time-current {
       
   606 	background: #24890d;
       
   607 }
       
   608 
       
   609 .mejs-controls .mejs-time-rail .mejs-time-total,
       
   610 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
       
   611 	background: rgba(255, 255, 255, .33);
       
   612 }
       
   613 
       
   614 .mejs-controls .mejs-time-rail span,
       
   615 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
       
   616 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
       
   617 	border-radius: 0;
       
   618 }
       
   619 
       
   620 .mejs-overlay-loading {
       
   621 	background: transparent;
       
   622 }
       
   623 
       
   624 .mejs-overlay-button {
       
   625 	background-color: #fff;
       
   626 	background-image: none;
       
   627 	border-radius: 2px;
       
   628 	box-shadow: 1px 1px 1px rgba(0,0,0,.8);
       
   629 	color: #000;
       
   630 	height: 36px;
       
   631 	margin-left: -24px;
       
   632 	width: 48px;
       
   633 }
       
   634 
       
   635 .mejs-overlay-button:before {
       
   636 	-webkit-font-smoothing: antialiased;
       
   637 	content: '\f452';
       
   638 	display: inline-block;
       
   639 	font: normal 32px/1.125 Genericons;
       
   640 	position: absolute;
       
   641 	top: 1px;
       
   642 	left: 10px;
       
   643 }
       
   644 
       
   645 .mejs-controls .mejs-button button:focus {
       
   646 	outline: none;
       
   647 }
       
   648 
       
   649 .mejs-controls .mejs-button button {
       
   650 	-webkit-font-smoothing: antialiased;
       
   651 	background: none;
       
   652 	color: #fff;
       
   653 	display: inline-block;
       
   654 	font: normal 16px/1 Genericons;
       
   655 }
       
   656 
       
   657 .mejs-playpause-button.mejs-play button:before {
       
   658 	content: '\f452';
       
   659 }
       
   660 
       
   661 .mejs-playpause-button.mejs-pause button:before {
       
   662 	content: '\f448';
       
   663 }
       
   664 
       
   665 .mejs-volume-button.mejs-mute button:before {
       
   666 	content: '\f109';
       
   667 	font-size: 20px;
       
   668 	position: absolute;
       
   669 	top: -2px;
       
   670 	left: 0;
       
   671 }
       
   672 
       
   673 .mejs-volume-button.mejs-unmute button:before {
       
   674 	content: '\f109';
       
   675 	left: 0;
       
   676 	position: absolute;
       
   677 	top: 0;
       
   678 }
       
   679 
       
   680 .mejs-fullscreen-button button:before {
       
   681 	content: '\f474';
       
   682 }
       
   683 
       
   684 .mejs-fullscreen-button.mejs-unfullscreen button:before {
       
   685 	content: '\f406';
       
   686 }
       
   687 
       
   688 .mejs-overlay:hover .mejs-overlay-button {
       
   689 	background-color: #24890d;
       
   690 	color: #fff;
       
   691 }
       
   692 
       
   693 .mejs-controls .mejs-button button:hover {
       
   694 	color: #41a62a;
       
   695 }
       
   696 
       
   697 
       
   698 /**
       
   699  * 10.0 RTL
       
   700  * ----------------------------------------------------------------------------
       
   701  */
       
   702 
       
   703 html .mceContentBody.rtl {
       
   704 	direction: rtl;
       
   705 	unicode-bidi: embed;
       
   706 }
       
   707 
       
   708 .rtl ol,
       
   709 .rtl ul {
       
   710 	margin-left: 0;
       
   711 	margin-right: 24px;
       
   712 }
       
   713 
       
   714 .rtl .wp-caption,
       
   715 .rtl tr th {
       
   716 	text-align: right;
       
   717 }
       
   718 
       
   719 .rtl td {
       
   720 	text-align: right;
       
   721 }