[Summary view] [Print] [Text view]

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