[Summary view] [Print] [Text view]

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