[Summary view] [Print] [Text view]

   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  7.0 Blocks - Colors
  16  --------------------------------------------------------------*/
  17  
  18  /*--------------------------------------------------------------
  19  1.0 Block Alignments
  20  --------------------------------------------------------------*/
  21  
  22  .editor-block-list__layout .editor-block-list__block[data-align="full"] > .editor-block-list__block-edit figure {
  23      width: auto;
  24  }
  25  
  26  /*--------------------------------------------------------------
  27  2.0 General Typography
  28  --------------------------------------------------------------*/
  29  
  30  .edit-post-visual-editor .editor-block-list__block,
  31  .edit-post-visual-editor .editor-block-list__block p,
  32  .editor-default-block-appender textarea.editor-default-block-appender__content {
  33      font-family: "Source Sans Pro", Helvetica, sans-serif;
  34      font-size: 16px;
  35      font-weight: 400;
  36      line-height: 1.5;
  37  }
  38  
  39  .edit-post-visual-editor .editor-block-list__block {
  40      color: #141412;
  41  }
  42  
  43  .editor-post-title__block .editor-post-title__input {
  44      font-family: Bitter, Georgia, serif;
  45      font-size: 48px;
  46      font-weight: 300;
  47      line-height: 1.0909090909;
  48      margin-bottom: 12px;
  49      margin: 0 0 12px 0;
  50  }
  51  
  52  /*--------------------------------------------------------------
  53  3.0 General Block Styles
  54  --------------------------------------------------------------*/
  55  
  56  /* Main content width */
  57  
  58  .wp-block {
  59      max-width: 634px; /* 604px + 30px to account for padding */
  60  }
  61  
  62  .wp-block.alignwide,
  63  .wp-block.alignfull {
  64      max-width: inherit;
  65  }
  66  
  67  [class^="wp-block-"] .wp-block {
  68      max-width: 100%;
  69  }
  70  
  71  /* Link styles */
  72  
  73  .edit-post-visual-editor a,
  74  .editor-block-list__block a,
  75  .wp-block-freeform.block-library-rich-text__tinymce a {
  76      color: #bc360a;
  77  }
  78  
  79  /* List styles */
  80  
  81  .edit-post-visual-editor ul:not(.wp-block-gallery):not(.wp-block-post-template),
  82  .editor-block-list__block ul:not(.wp-block-gallery):not(.wp-block-post-template),
  83  .block-library-list ul,
  84  .edit-post-visual-editor ol,
  85  .editor-block-list__block ol,
  86  .block-library-list ol,
  87  .block-library-list .editor-rich-text__tinymce {
  88      padding: 0;
  89  }
  90  
  91  .edit-post-visual-editor ul:not(.wp-block-gallery):not(.wp-block-post-template),
  92  .edit-post-visual-editor .editor-block-list__block ul:not(.wp-block-gallery):not(.wp-block-post-template),
  93  .block-library-list ul {
  94      list-style-type: square;
  95  }
  96  
  97  .edit-post-visual-editor ol,
  98  .editor-block-list__block ol,
  99  .block-library-list ol {
 100      list-style: decimal;
 101  }
 102  
 103  .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
 104  .editor-block-list__block ul:not(.wp-block-gallery) li > ul,
 105  .block-library-list li > ul,
 106  .edit-post-visual-editor li > ol,
 107  .editor-block-list__block li > ol,
 108  .block-library-list li > ol {
 109      margin: 0;
 110  }
 111  
 112  .edit-post-visual-editor ul:not(.wp-block-gallery) li,
 113  .editor-block-list__block ul:not(.wp-block-gallery) li,
 114  .edit-post-visual-editor ol li,
 115  .editor-block-list__block ol li,
 116  .block-library-list li {
 117      margin-bottom: 0;
 118  }
 119  
 120  .editor-styles-wrapper ul.block-editor-block-list__block:not(.wp-block-post-template),
 121  .editor-styles-wrapper ol.block-editor-block-list__block:not(.wp-block-post-template),
 122  .editor-styles-wrapper ol ul:not(.wp-block-gallery):not(.wp-block-post-template),
 123  .editor-styles-wrapper ul ul:not(.wp-block-gallery):not(.wp-block-post-template),
 124  .editor-styles-wrapper ul ol,
 125  .editor-styles-wrapper ol ol,
 126  .wp-block-freeform.block-library-rich-text__tinymce ul,
 127  .wp-block-freeform.block-library-rich-text__tinymce ol {
 128      padding: 0 0 0 40px;
 129  }
 130  
 131  .rtl .editor-styles-wrapper ul.block-editor-block-list__block:not(.wp-block-post-template),
 132  .rtl .editor-styles-wrapper ol.block-editor-block-list__block:not(.wp-block-post-template),
 133  .rtl .editor-styles-wrapper ol ul:not(.wp-block-gallery):not(.wp-block-post-template),
 134  .rtl .editor-styles-wrapper ul ul:not(.wp-block-gallery):not(.wp-block-post-template),
 135  .rtl .editor-styles-wrapper ul ol,
 136  .rtl .editor-styles-wrapper ol ol,
 137  .rtl .wp-block-freeform.block-library-rich-text__tinymce ul,
 138  .rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
 139      padding: 0 40px 0 0;
 140  }
 141  
 142  /* Quote */
 143  
 144  .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 145      border-left: 0;
 146      border-right: 0;
 147      font-style: italic;
 148      margin: 24px 40px;
 149      padding-left: 0;
 150      padding-right: 0;
 151  }
 152  
 153  .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
 154      font-size: 24px;
 155      font-weight: 300;
 156  }
 157  
 158  /* Table */
 159  
 160  .rtl .editor-block-list__block table th,
 161  .rtl .editor-block-list__block table td {
 162      text-align: right;
 163  }
 164  
 165  /* Code */
 166  
 167  .wp-block-freeform.block-library-rich-text__tinymce code,
 168  .editor-styles-wrapper .wp-block-code {
 169      background: transparent;
 170  }
 171  
 172  /* Captions */
 173  
 174  [class^="wp-block-"] figcaption,
 175  [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
 176      color: #220e10;
 177      font-size: 18px;
 178      font-style: italic;
 179      font-weight: 300;
 180      line-height: 1.5;
 181      margin: 0 0 24px;
 182  }
 183  
 184  /*--------------------------------------------------------------
 185  4.0 Blocks - Common Blocks
 186  --------------------------------------------------------------*/
 187  
 188  /* Paragraph */
 189  
 190  p.has-drop-cap:not(:focus)::first-letter {
 191      font-size: 5em;
 192  }
 193  
 194  /* Gallery */
 195  
 196  .edit-post-visual-editor .wp-block-gallery {
 197      margin-bottom: 24px;
 198      padding: 0;
 199  }
 200  
 201  .wp-block-gallery figcaption,
 202  .wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
 203      color: #fff;
 204      font-size: 13px;
 205      margin-bottom: 0;
 206  }
 207  
 208  /* Quote */
 209  
 210  .wp-block-quote {
 211      font-style: italic;
 212      margin: 24px 40px;
 213      padding: 0;
 214  }
 215  
 216  .editor-block-list__block .wp-block-quote p {
 217      font-size: 24px;
 218      font-weight: 300;
 219  }
 220  
 221  .wp-block-quote:not(.is-large):not(.is-style-large) {
 222      border-left: 0;
 223      border-right: 0;
 224      padding-left: 40px;
 225      padding-right: 40px;
 226  }
 227  
 228  .wp-block-quote .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body,
 229  .wp-block-quote .wp-block-quote__citation {
 230      color: inherit;
 231      font-size: 16px;
 232      font-style: italic;
 233      font-weight: normal;
 234      text-transform: uppercase;
 235  }
 236  
 237  .wp-block-quote.is-large p,
 238  .wp-block-quote.is-style-large p {
 239      font-size: 28px;
 240  }
 241  
 242  .wp-block-quote.is-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body,
 243  .wp-block-quote.is-style-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body {
 244      font-size: 18px;
 245  }
 246  
 247  /* Cover */
 248  
 249  .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text,
 250  .edit-post-visual-editor .editor-block-list__block .wp-block-cover p.wp-block-cover-text {
 251      font-size: 32px;
 252      line-height: 1.25;
 253  }
 254  
 255  /* File */
 256  
 257  .wp-block-file .wp-block-file__textlink {
 258      color: #bc360a;
 259  }
 260  
 261  .wp-block-file .wp-block-file__button {
 262      background: #e05d22; /* Old browsers */
 263      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 264      background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 265      border: none;
 266      border-bottom: 3px solid #b93207;
 267      color: #fff;
 268      display: inline-block;
 269      font-size: 16px;
 270      line-height: 24px;
 271      padding: 11px 24px 10px;
 272      text-decoration: none;
 273  }
 274  
 275  /* Verse */
 276  
 277  .editor-styles-wrapper .wp-block-verse {
 278      font-family: inherit;
 279  }
 280  
 281  /*--------------------------------------------------------------
 282  5.0 Blocks - Formatting
 283  --------------------------------------------------------------*/
 284  
 285  /* Code */
 286  
 287  .editor-styles-wrapper .wp-block-code {
 288      border: 0;
 289      padding: 0;
 290  }
 291  
 292  /* Pullquote */
 293  
 294  .edit-post-visual-editor .wp-block-pullquote {
 295      border: 0;
 296      padding: 0.5em 0;
 297  }
 298  
 299  .edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p {
 300      font-weight: 300;
 301  }
 302  
 303  .edit-post-visual-editor .wp-block-pullquote__citation,
 304  .edit-post-visual-editor .wp-block-pullquote cite,
 305  .edit-post-visual-editor .wp-block-pullquote footer {
 306      color: #141412;
 307      font-size: 16px;
 308  }
 309  
 310  /* Table */
 311  
 312  .wp-block-table {
 313      border-bottom: 1px solid #ededed;
 314      border-collapse: collapse;
 315      border-spacing: 0;
 316      font-size: 14px;
 317      line-height: 2;
 318      margin: 0 0 20px;
 319      width: 100%;
 320  }
 321  
 322  .wp-block-table th {
 323      border: 0;
 324      font-weight: bold;
 325      text-transform: uppercase;
 326  }
 327  
 328  .editor-block-list__block .wp-block-table td {
 329      border: 0;
 330      border-top: 1px solid #ededed;
 331      padding: 0;
 332  }
 333  
 334  .editor-styles-wrapper .wp-block-table[style*="font-size"] *,
 335  .editor-styles-wrapper .wp-block-table[class*="-font-size"] * {
 336          font-size: inherit;
 337  }
 338  
 339  /*--------------------------------------------------------------
 340  6.0 Blocks - Layout Elements
 341  --------------------------------------------------------------*/
 342  
 343  /* Buttons */
 344  
 345  .wp-block-button .wp-block-button__link {
 346      display: inline-block;
 347      font-size: 16px;
 348      line-height: 24px;
 349      padding: 11px 24px 10px;
 350      text-decoration: none;
 351  }
 352  
 353  .wp-block-button__link {
 354      background: #e05d22;
 355      border-bottom: 3px solid #b93207;
 356      color: #fff;
 357  }
 358  
 359  .is-style-outline .wp-block-button__link:not(.has-text-color) {
 360      border-width: 2px;
 361      color: #e05d22;
 362  }
 363  
 364  .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 365      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 366      background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 367  }
 368  
 369  .wp-block-button.is-style-no-shadow .wp-block-button__link {
 370      border-bottom: none;
 371  }
 372  
 373  /* Separator */
 374  
 375  .editor-block-list__block hr.wp-block-separator {
 376      margin-left: auto;
 377      margin-right: auto;
 378  }
 379  
 380  /* Media & Text */
 381  
 382  .wp-block-media-text *:last-child {
 383      margin-bottom: 0;
 384  }
 385  
 386  /* Group */
 387  
 388  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block,
 389  [data-align="wide"] .wp-block,
 390  [data-align="full"] .wp-block {
 391      max-width: 634px;
 392  }
 393  
 394  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
 395      max-width: 1100px;
 396  }
 397  
 398  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 399      max-width: 100%;
 400  }
 401  
 402  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 403      width: calc(100% + 60px);
 404      max-width: calc(100% + 60px);
 405  }
 406  
 407  /*--------------------------------------------------------------
 408  7.0 Blocks - Widgets
 409  --------------------------------------------------------------*/
 410  
 411  /* Archives, Categories & Latest Posts */
 412  
 413  [data-align="center"] .wp-block-archives ul,
 414  [data-align="center"] .wp-block-categories ul,
 415  [data-align="center"] .wp-block-latest-posts ul {
 416      list-style-position: inside;
 417      text-align: center;
 418  }
 419  
 420  /* Latest Comments */
 421  
 422  .editor-block-list__block .wp-block-latest-comments {
 423      margin: 0;
 424      padding: 0;
 425  }
 426  
 427  .wp-block-latest-comments .avatar,
 428  .wp-block-latest-comments__comment-avatar {
 429      border-radius: 0;
 430  }
 431  
 432  .wp-block-latest-comments__comment,
 433  .wp-block-latest-comments__comment-excerpt,
 434  .wp-block-latest-comments__comment-excerpt p {
 435      font-size: 16px;
 436  }
 437  
 438  .wp-block-latest-comments__comment-excerpt p:last-child {
 439      margin-bottom: 0;
 440  }
 441  
 442  .wp-block-latest-comments__comment-date {
 443      font-size: 16px;
 444  }
 445  
 446  .wp-block-latest-comments .wp-block-latest-comments__comment {
 447      background: url(../images/dotted-line.png) repeat-x left top;
 448      margin-bottom: 0;
 449      padding: 24px 0;
 450  }
 451  
 452  /* Latest Posts */
 453  
 454  .edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid {
 455      list-style-type: none;
 456      margin-left: 0;
 457      margin-right: 0;
 458  }
 459  
 460  .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 461      margin-bottom: 1em;
 462  }
 463  
 464  /*--------------------------------------------------------------
 465  7.0 Blocks - Colors
 466  --------------------------------------------------------------*/
 467  
 468  :root .editor-styles-wrapper .has-dark-gray-color {
 469      color: #141412;
 470  }
 471  
 472  :root .editor-styles-wrapper .has-dark-gray-background-color {
 473      background-color: #141412;
 474  }
 475  
 476  :root .editor-styles-wrapper .has-red-color {
 477      color: #bc360a;
 478  }
 479  
 480  :root .editor-styles-wrapper .has-red-background-color {
 481      background-color: #bc360a;
 482  }
 483  
 484  :root .editor-styles-wrapper .has-medium-orange-color {
 485      color: #db572f;
 486  }
 487  
 488  :root .editor-styles-wrapper .has-medium-orange-background-color {
 489      background-color: #db572f;
 490  }
 491  
 492  :root .editor-styles-wrapper .has-light-orange-color {
 493      color: #ea9629;
 494  }
 495  
 496  :root .editor-styles-wrapper .has-light-orange-background-color {
 497      background-color: #ea9629;
 498  }
 499  
 500  :root .editor-styles-wrapper .has-yellow-color {
 501      color: #fbca3c;
 502  }
 503  
 504  :root .editor-styles-wrapper .has-yellow-background-color {
 505      background-color: #fbca3c;
 506  }
 507  
 508  :root .editor-styles-wrapper .has-white-color {
 509      color: #fff;
 510  }
 511  
 512  :root .editor-styles-wrapper .has-white-background-color {
 513      background-color: #fff;
 514  }
 515  
 516  :root .editor-styles-wrapper .has-dark-brown-color {
 517      color: #220e10;
 518  }
 519  
 520  :root .editor-styles-wrapper .has-dark-brown-background-color {
 521      background-color: #220e10;
 522  }
 523  
 524  :root .editor-styles-wrapper .has-medium-brown-color {
 525      color: #722d19;
 526  }
 527  
 528  :root .editor-styles-wrapper .has-medium-brown-background-color {
 529      background-color: #722d19;
 530  }
 531  
 532  :root .editor-styles-wrapper .has-light-brown-color {
 533      color: #eadaa6;
 534  }
 535  
 536  :root .editor-styles-wrapper .has-light-brown-background-color {
 537      background-color: #eadaa6;
 538  }
 539  
 540  :root .editor-styles-wrapper .has-beige-color {
 541      color: #e8e5ce;
 542  }
 543  
 544  :root .editor-styles-wrapper .has-beige-background-color {
 545      background-color: #e8e5ce;
 546  }
 547  
 548  :root .editor-styles-wrapper .has-off-white-color {
 549      color: #f7f5e7;
 550  }
 551  
 552  :root .editor-styles-wrapper .has-off-white-background-color {
 553      background-color: #f7f5e7;
 554  }