wp/wp-content/themes/twentythirteen/css/editor-blocks.css
changeset 10 372f2766ea20
equal deleted inserted replaced
9:177826044cd9 10:372f2766ea20
       
     1 /*
       
     2 Theme Name: Twenty Thirteen
       
     3 Description: Used to style blocks in the editor.
       
     4 */
       
     5 
       
     6 /*--------------------------------------------------------------
       
     7 >>> TABLE OF CONTENTS:
       
     8 ----------------------------------------------------------------
       
     9 1.0 General Typography
       
    10 2.0 General Block Styles
       
    11 3.0 Blocks - Common Blocks
       
    12 4.0 Blocks - Formatting
       
    13 5.0 Blocks - Layout Elements
       
    14 6.0 Blocks - Widgets
       
    15 --------------------------------------------------------------*/
       
    16 
       
    17 /*--------------------------------------------------------------
       
    18 1.0 Block Alignments
       
    19 --------------------------------------------------------------*/
       
    20 
       
    21 .editor-block-list__layout .editor-block-list__block[data-align="full"] > .editor-block-list__block-edit figure {
       
    22 	width: auto;
       
    23 }
       
    24 
       
    25 /*--------------------------------------------------------------
       
    26 2.0 General Typography
       
    27 --------------------------------------------------------------*/
       
    28 
       
    29 .edit-post-visual-editor .editor-block-list__block,
       
    30 .edit-post-visual-editor .editor-block-list__block p,
       
    31 .editor-default-block-appender textarea.editor-default-block-appender__content {
       
    32 	font-family: "Source Sans Pro", Helvetica, sans-serif;
       
    33 	font-size: 16px;
       
    34 	font-weight: 400;
       
    35 	line-height: 1.5;
       
    36 }
       
    37 
       
    38 .edit-post-visual-editor .editor-block-list__block {
       
    39 	color: #141412;
       
    40 }
       
    41 
       
    42 .editor-post-title__block .editor-post-title__input {
       
    43 	font-family: Bitter, Georgia, serif;
       
    44 	font-size: 48px;
       
    45 	font-weight: 300;
       
    46 	line-height: 1.0909090909;
       
    47 	margin-bottom: 12px;
       
    48 	margin: 0 0 12px 0;
       
    49 }
       
    50 
       
    51 /*--------------------------------------------------------------
       
    52 3.0 General Block Styles
       
    53 --------------------------------------------------------------*/
       
    54 
       
    55 /* Main content width */
       
    56 
       
    57 .wp-block {
       
    58 	max-width: 634px; /* 604px + 30px to account for padding */
       
    59 }
       
    60 
       
    61 .wp-block.alignwide,
       
    62 .wp-block.alignfull {
       
    63 	max-width: inherit;
       
    64 }
       
    65 
       
    66 [class^="wp-block-"] .wp-block {
       
    67 	max-width: 100%;
       
    68 }
       
    69 
       
    70 /* Link styles */
       
    71 
       
    72 .edit-post-visual-editor a,
       
    73 .editor-block-list__block a,
       
    74 .wp-block-freeform.block-library-rich-text__tinymce a {
       
    75 	color: #bc360a;
       
    76 }
       
    77 
       
    78 /* List styles */
       
    79 
       
    80 .edit-post-visual-editor ul:not(.wp-block-gallery),
       
    81 .editor-block-list__block ul:not(.wp-block-gallery),
       
    82 .block-library-list ul,
       
    83 .edit-post-visual-editor ol,
       
    84 .editor-block-list__block ol,
       
    85 .block-library-list ol {
       
    86 	margin: 16px 0;
       
    87 	padding: 0 0 0 40px;
       
    88 }
       
    89 
       
    90 .block-library-list .editor-rich-text__tinymce {
       
    91 	padding: 0 0 0 40px;
       
    92 }
       
    93 
       
    94 .edit-post-visual-editor ul:not(.wp-block-gallery),
       
    95 .edit-post-visual-editor .editor-block-list__block ul:not(.wp-block-gallery),
       
    96 .block-library-list ul {
       
    97 	list-style-type: square;
       
    98 }
       
    99 
       
   100 .edit-post-visual-editor ol,
       
   101 .editor-block-list__block ol,
       
   102 .block-library-list ol {
       
   103 	list-style: decimal;
       
   104 }
       
   105 
       
   106 .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
       
   107 .editor-block-list__block ul:not(.wp-block-gallery) li > ul,
       
   108 .block-library-list li > ul,
       
   109 .edit-post-visual-editor li > ol,
       
   110 .editor-block-list__block li > ol,
       
   111 .block-library-list li > ol {
       
   112 	margin: 0;
       
   113 }
       
   114 
       
   115 .edit-post-visual-editor ul:not(.wp-block-gallery) li,
       
   116 .editor-block-list__block ul:not(.wp-block-gallery) li,
       
   117 .edit-post-visual-editor ol li,
       
   118 .editor-block-list__block ol li,
       
   119 .block-library-list li {
       
   120 	margin-bottom: 0;
       
   121 }
       
   122 
       
   123 .rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
       
   124 .rtl .editor-block-list__block ul:not(.wp-block-gallery),
       
   125 .rtl .block-library-list ul,
       
   126 .rtl .edit-post-visual-editor ol,
       
   127 .rtl .editor-block-list__block ol,
       
   128 .rtl .block-library-list ol {
       
   129 	padding-left: 0;
       
   130 	padding-right: 40px;
       
   131 }
       
   132 
       
   133 .rtl .block-library-list .editor-rich-text__tinymce {
       
   134 	padding-left: 0;
       
   135 	padding-right: 40px;
       
   136 }
       
   137 
       
   138 /* Quote */
       
   139 
       
   140 .wp-block-freeform.block-library-rich-text__tinymce blockquote {
       
   141 	border-left: 0;
       
   142 	border-right: 0;
       
   143 	font-style: italic;
       
   144 	margin: 24px 40px;
       
   145 	padding-left: 0;
       
   146 	padding-right: 0;
       
   147 }
       
   148 
       
   149 .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
       
   150 	font-size: 24px;
       
   151 	font-weight: 300;
       
   152 }
       
   153 
       
   154 /* Table */
       
   155 
       
   156 .rtl .editor-block-list__block table th,
       
   157 .rtl .editor-block-list__block table td {
       
   158 	text-align: right;
       
   159 }
       
   160 
       
   161 /* Code */
       
   162 
       
   163 .wp-block-freeform.block-library-rich-text__tinymce code {
       
   164 	background: transparent;
       
   165 }
       
   166 
       
   167 /* Captions */
       
   168 
       
   169 [class^="wp-block-"] figcaption,
       
   170 [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
       
   171 	color: #220e10;
       
   172 	font-size: 18px;
       
   173 	font-style: italic;
       
   174 	font-weight: 300;
       
   175 	line-height: 1.5;
       
   176 	margin: 0 0 24px;
       
   177 }
       
   178 
       
   179 /*--------------------------------------------------------------
       
   180 4.0 Blocks - Common Blocks
       
   181 --------------------------------------------------------------*/
       
   182 
       
   183 /* Paragraph */
       
   184 
       
   185 p.has-drop-cap:not(:focus)::first-letter {
       
   186 	font-size: 5em;
       
   187 }
       
   188 
       
   189 /* Gallery */
       
   190 
       
   191 .edit-post-visual-editor .wp-block-gallery {
       
   192 	margin-bottom: 24px;
       
   193 	padding: 0;
       
   194 }
       
   195 
       
   196 .wp-block-gallery figcaption,
       
   197 .wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
       
   198 	color: #fff;
       
   199 	font-size: 13px;
       
   200 	margin-bottom: 0;
       
   201 }
       
   202 
       
   203 /* Quote */
       
   204 
       
   205 .wp-block-quote {
       
   206 	font-style: italic;
       
   207 	margin: 24px 40px;
       
   208 	padding: 0;
       
   209 }
       
   210 
       
   211 .editor-block-list__block .wp-block-quote p {
       
   212 	font-size: 24px;
       
   213 	font-weight: 300;
       
   214 }
       
   215 
       
   216 .wp-block-quote:not(.is-large):not(.is-style-large) {
       
   217 	border-left: 0;
       
   218 	border-right: 0;
       
   219 	padding-left: 0;
       
   220 	padding-right: 0;
       
   221 }
       
   222 
       
   223 .wp-block-quote .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body {
       
   224 	color: inherit;
       
   225 	font-size: 16px;
       
   226 	font-style: italic;
       
   227 	text-transform: uppercase;
       
   228 }
       
   229 
       
   230 .wp-block-quote.is-large p,
       
   231 .wp-block-quote.is-style-large p {
       
   232 	font-size: 28px;
       
   233 }
       
   234 
       
   235 .wp-block-quote.is-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body,
       
   236 .wp-block-quote.is-style-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body {
       
   237 	font-size: 18px;
       
   238 }
       
   239 
       
   240 /* Cover */
       
   241 
       
   242 .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text,
       
   243 .edit-post-visual-editor .editor-block-list__block .wp-block-cover p.wp-block-cover-text {
       
   244 	font-size: 32px;
       
   245 	line-height: 1.25;
       
   246 }
       
   247 
       
   248 /* File */
       
   249 
       
   250 .wp-block-file .wp-block-file__textlink {
       
   251 	color: #bc360a;
       
   252 }
       
   253 
       
   254 .wp-block-file .wp-block-file__button {
       
   255 	background: #e05d22; /* Old browsers */
       
   256 	background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
       
   257 	background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
       
   258 	border: none;
       
   259 	border-bottom: 3px solid #b93207;
       
   260 	color: #fff;
       
   261 	display: inline-block;
       
   262 	font-size: 16px;
       
   263 	line-height: 24px;
       
   264 	padding: 11px 24px 10px;
       
   265 	text-decoration: none;
       
   266 }
       
   267 
       
   268 /*--------------------------------------------------------------
       
   269 5.0 Blocks - Formatting
       
   270 --------------------------------------------------------------*/
       
   271 
       
   272 /* Code */
       
   273 
       
   274 .wp-block-code {
       
   275 	border: 0;
       
   276 	padding: 0;
       
   277 }
       
   278 
       
   279 /* Pullquote */
       
   280 
       
   281 .edit-post-visual-editor .wp-block-pullquote {
       
   282 	border: 0;
       
   283 	padding: 0.5em 0;
       
   284 }
       
   285 
       
   286 .edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p {
       
   287 	font-weight: 300;
       
   288 }
       
   289 
       
   290 .edit-post-visual-editor .wp-block-pullquote__citation,
       
   291 .edit-post-visual-editor .wp-block-pullquote cite,
       
   292 .edit-post-visual-editor .wp-block-pullquote footer {
       
   293 	color: #141412;
       
   294 	font-size: 16px;
       
   295 }
       
   296 
       
   297 /* Table */
       
   298 
       
   299 .wp-block-table {
       
   300 	border-bottom: 1px solid #ededed;
       
   301 	border-collapse: collapse;
       
   302 	border-spacing: 0;
       
   303 	font-size: 14px;
       
   304 	line-height: 2;
       
   305 	margin: 0 0 20px;
       
   306 	width: 100%;
       
   307 }
       
   308 
       
   309 .wp-block-table th {
       
   310 	border: 0;
       
   311 	font-weight: bold;
       
   312 	text-transform: uppercase;
       
   313 }
       
   314 
       
   315 .editor-block-list__block .wp-block-table td {
       
   316 	border: 0;
       
   317 	border-top: 1px solid #ededed;
       
   318 	padding: 0;
       
   319 }
       
   320 
       
   321 /*--------------------------------------------------------------
       
   322 6.0 Blocks - Layout Elements
       
   323 --------------------------------------------------------------*/
       
   324 
       
   325 /* Buttons */
       
   326 
       
   327 .wp-block-button .wp-block-button__link {
       
   328 	display: inline-block;
       
   329 	font-size: 16px;
       
   330 	line-height: 24px;
       
   331 	padding: 11px 24px 10px;
       
   332 	text-decoration: none;
       
   333 }
       
   334 
       
   335 .wp-block-button__link {
       
   336 	background: #e05d22;
       
   337 	border-bottom: 3px solid #b93207;
       
   338 	color: #fff;
       
   339 }
       
   340 
       
   341 .is-style-outline .wp-block-button__link {
       
   342 	border-width: 2px;
       
   343 	color: #e05d22;
       
   344 }
       
   345 
       
   346 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
       
   347 	background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
       
   348 	background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
       
   349 }
       
   350 
       
   351 /* Separator */
       
   352 
       
   353 .editor-block-list__block hr.wp-block-separator {
       
   354 	margin-left: auto;
       
   355 	margin-right: auto;
       
   356 }
       
   357 
       
   358 /* Media & Text */
       
   359 
       
   360 .wp-block-media-text *:last-child {
       
   361 	margin-bottom: 0;
       
   362 }
       
   363 
       
   364 /*--------------------------------------------------------------
       
   365 7.0 Blocks - Widgets
       
   366 --------------------------------------------------------------*/
       
   367 
       
   368 /* Archives, Categories & Latest Posts */
       
   369 
       
   370 [data-align="center"] .wp-block-archives ul,
       
   371 [data-align="center"] .wp-block-categories ul,
       
   372 [data-align="center"] .wp-block-latest-posts ul {
       
   373 	list-style-position: inside;
       
   374 	text-align: center;
       
   375 }
       
   376 
       
   377 /* Latest Comments */
       
   378 
       
   379 .editor-block-list__block .wp-block-latest-comments {
       
   380 	margin: 0;
       
   381 	padding: 0;
       
   382 }
       
   383 
       
   384 .wp-block-latest-comments .avatar,
       
   385 .wp-block-latest-comments__comment-avatar {
       
   386 	border-radius: 0;
       
   387 }
       
   388 
       
   389 .wp-block-latest-comments__comment,
       
   390 .wp-block-latest-comments__comment-excerpt,
       
   391 .wp-block-latest-comments__comment-excerpt p {
       
   392 	font-size: 16px;
       
   393 }
       
   394 
       
   395 .wp-block-latest-comments__comment-excerpt p:last-child {
       
   396 	margin-bottom: 0;
       
   397 }
       
   398 
       
   399 .wp-block-latest-comments__comment-date {
       
   400 	font-size: 16px;
       
   401 }
       
   402 
       
   403 .wp-block-latest-comments .wp-block-latest-comments__comment {
       
   404 	background: url(../images/dotted-line.png) repeat-x left top;
       
   405 	margin-bottom: 0;
       
   406 	padding: 24px 0;
       
   407 }
       
   408 
       
   409 /* Latest Posts */
       
   410 
       
   411 .edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid {
       
   412 	list-style-type: none;
       
   413 	margin-left: 0;
       
   414 	margin-right: 0;
       
   415 }
       
   416 
       
   417 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
       
   418 	margin-bottom: 1em;
       
   419 }