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