[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,
 146  [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
 147      color: #757575;
 148      font-size: 12px;
 149      line-height: 2;
 150      font-style: italic;
 151      text-align: start;
 152  }
 153  
 154  /* Definition Lists */
 155  
 156  .wp-block-freeform.block-library-rich-text__tinymce dt {
 157      margin-bottom: 0;
 158  }
 159  
 160  /*--------------------------------------------------------------
 161  3.0 Blocks - Common Blocks
 162  --------------------------------------------------------------*/
 163  
 164  /* Paragraph */
 165  
 166  p.has-drop-cap:not(:focus)::first-letter {
 167      font-size: 5em;
 168      margin-top: 0.1em;
 169  }
 170  
 171  /* Image */
 172  
 173  .wp-block-image {
 174      margin-left: 0;
 175      margin-right: 0;
 176  }
 177  
 178  /* Gallery */
 179  
 180  .wp-block-gallery {
 181      margin-bottom: 24px;
 182  }
 183  
 184  .wp-block-gallery figcaption,
 185  .wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
 186      color: #fff;
 187      text-align: center;
 188  }
 189  
 190  /* Quote */
 191  
 192  .wp-block-quote,
 193  .wp-block-quote:not(.is-large):not(.is-style-large) {
 194      padding: 24px;
 195  }
 196  
 197  .wp-block-quote p {
 198      font-style: italic;
 199  }
 200  
 201  .wp-block-quote:not(.is-large):not(.is-style-large) {
 202      border: 0;
 203  }
 204  
 205  .wp-block-quote.is-large p,
 206  .wp-block-quote.is-style-large p {
 207      font-size: 20px;
 208  }
 209  
 210  .wp-block-quote .wp-block-quote__citation {
 211      color: inherit;
 212      font-style: italic;
 213  }
 214  
 215  .wp-block-quote.is-large .wp-block-quote__citation,
 216  .wp-block-quote.is-style-large .wp-block-quote__citation {
 217      font-size: 18px;
 218  }
 219  
 220  /* Cover */
 221  
 222  .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p,
 223  .edit-post-visual-editor .editor-block-list__block .wp-block-cover p {
 224      font-size: 28px;
 225  }
 226  
 227  /* File */
 228  
 229  .wp-block-file .wp-block-file__textlink {
 230      color: #21759b;
 231      text-decoration: underline;
 232  }
 233  
 234  .wp-block-file .wp-block-file__button {
 235      background-color: #e6e6e6;
 236      background-repeat: repeat-x;
 237      background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
 238      background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 239      background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
 240      background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
 241      background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
 242      border: 1px solid #d2d2d2;
 243      border-radius: 3px;
 244      box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
 245      color: #7c7c7c;
 246      font-family: inherit;
 247      font-size: 11px;
 248      font-weight: normal;
 249      line-height: 1.428571429;
 250      padding: 6px 10px;
 251  }
 252  
 253  /*--------------------------------------------------------------
 254  4.0 Blocks - Formatting
 255  --------------------------------------------------------------*/
 256  
 257  /* Verse */
 258  
 259  .editor-block-list__block .wp-block-verse pre {
 260      font-size: 12px;
 261  }
 262  
 263  /* Code */
 264  
 265  .wp-block-code {
 266      border: 0;
 267      font-family: Consolas, Monaco, Lucida Console, monospace;
 268      font-size: 12px;
 269      line-height: 2;
 270      padding: 0;
 271  }
 272  
 273  .wp-block-html .CodeMirror-sizer {
 274      line-height: 1.7;
 275  }
 276  
 277  /* Preformatted */
 278  
 279  .editor-block-list__block .wp-block-preformatted pre {
 280      font-size: 12px;
 281  }
 282  
 283  /* Pullquote */
 284  
 285  .wp-block-pullquote {
 286      font-style: italic;
 287  }
 288  
 289  .wp-block-pullquote .wp-block-pullquote__citation,
 290  .wp-block-pullquote cite {
 291      font-size: 14px;
 292      text-transform: none;
 293  }
 294  
 295  /* Table */
 296  
 297  .wp-block-table {
 298      border-bottom: 1px solid #ededed;
 299      border-collapse: collapse;
 300      border-spacing: 0;
 301      font-size: 14px;
 302      line-height: 2;
 303      margin: 0 0 20px;
 304      width: 100%;
 305  }
 306  
 307  .editor-styles-wrapper .has-text-color th {
 308      color: inherit;
 309  }
 310  
 311  .editor-styles-wrapper .wp-block-table[style*="font-size"] *,
 312  .editor-styles-wrapper .wp-block-table[class*="-font-size"] * {
 313      font-size: inherit;
 314  }
 315  
 316  .editor-block-list__block .wp-block-table th {
 317      border: 0;
 318      font-size: 11px;
 319      font-weight: bold;
 320      text-transform: uppercase;
 321  }
 322  
 323  .editor-block-list__block .wp-block-table td {
 324      border: 0;
 325      border-top: 1px solid #ededed;
 326      font-size: 12px;
 327      padding: 0;
 328  }
 329  
 330  .wp-block-table__cell-content {
 331      padding: 6px 10px 6px 0;
 332  }
 333  
 334  /*--------------------------------------------------------------
 335  5.0 Blocks - Layout Elements
 336  --------------------------------------------------------------*/
 337  
 338  /* Buttons */
 339  
 340  .wp-block-button__link {
 341      background-color: #e6e6e6;
 342      color: #7c7c7c;
 343  }
 344  
 345  .wp-block-button .wp-block-button__link {
 346      border: 1px solid #d2d2d2;
 347      font-family: inherit;
 348      font-size: 11px;
 349      font-weight: normal;
 350      line-height: 1.428571429;
 351      padding: 6px 10px;
 352  }
 353  
 354  .wp-block-button .editor-rich-text__tinymce.mce-content-body {
 355      line-height: 1.428571429;
 356  }
 357  
 358  .wp-block-button__link:not(.has-text-color) {
 359      box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
 360  }
 361  
 362  .wp-block-button.is-style-outline .wp-block-button__link {
 363      background-color: inherit;
 364      border-color: inherit;
 365  }
 366  
 367  .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 368      background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
 369      background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 370      background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
 371      background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
 372      background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
 373      background-repeat: repeat-x;
 374      color: #7c7c7c;
 375  }
 376  
 377  /* Separator */
 378  
 379  .editor-block-list__block hr.wp-block-separator {
 380      margin-left: auto;
 381      margin-right: auto;
 382  }
 383  
 384  /* Media & Text */
 385  
 386  .wp-block-media-text *:last-child {
 387      margin-bottom: 0;
 388  }
 389  
 390  /*--------------------------------------------------------------
 391  6.0 Blocks - Widgets
 392  --------------------------------------------------------------*/
 393  
 394  /* Archives, Categories & Latest Posts */
 395  
 396  [data-align="center"] .wp-block-archives ul,
 397  [data-align="center"] .wp-block-categories ul,
 398  [data-align="center"] .wp-block-latest-posts ul {
 399      list-style-position: inside;
 400  }
 401  
 402  /* Archives */
 403  
 404  .editor-block-list__block ul.wp-block-archives {
 405      padding-left: 0;
 406  }
 407  
 408  /* Categories */
 409  
 410  .editor-block-list__block .wp-block-categories ul {
 411      padding-left: 0;
 412  }
 413  
 414  /* Latest Comments */
 415  
 416  .editor-block-list__block .wp-block-latest-comments {
 417      margin: 0;
 418      padding: 0;
 419  }
 420  
 421  .wp-block-latest-comments .avatar,
 422  .wp-block-latest-comments__comment-avatar {
 423      border-radius: 0;
 424      box-shadow: none;
 425  }
 426  
 427  .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
 428  .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
 429      margin-left: 60px;
 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: 14px;
 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      color: #5e5e5e;
 444  }
 445  
 446  .wp-block-latest-comments .wp-block-latest-comments__comment {
 447      margin: 0;
 448      padding: 24px 0;
 449  }
 450  
 451  .wp-block-latest-comments article {
 452      border-bottom: 4px double #ededed;
 453      padding-bottom: 2em;
 454  }
 455  
 456  /* Latest Posts */
 457  
 458  .editor-block-list__block .wp-block-latest-posts {
 459      padding-left: 0;
 460      padding-right: 0;
 461  }
 462  
 463  /*--------------------------------------------------------------
 464  7.0 Blocks - Colors
 465  --------------------------------------------------------------*/
 466  
 467  :root .editor-styles-wrapper .has-blue-color,
 468  :root .editor-styles-wrapper .has-blue-color:visited {
 469      color: #21759b;
 470  }
 471  
 472  :root .editor-styles-wrapper .has-blue-background-color,
 473  :root .editor-styles-wrapper .has-blue-background-color:visited {
 474      background-color: #21759b;
 475  }
 476  
 477  :root .editor-styles-wrapper .has-dark-gray-color,
 478  :root .editor-styles-wrapper .has-dark-gray-color:visited {
 479      color: #373737;
 480  }
 481  
 482  :root .editor-styles-wrapper .has-dark-gray-background-color,
 483  :root .editor-styles-wrapper .has-dark-gray-background-color:visited {
 484      background-color: #373737;
 485  }
 486  
 487  :root .editor-styles-wrapper .has-medium-gray-color,
 488  :root .editor-styles-wrapper .has-medium-gray-color:visited {
 489      color: #9f9f9f;
 490  }
 491  
 492  :root .editor-styles-wrapper .has-medium-gray-background-color,
 493  :root .editor-styles-wrapper .has-medium-gray-background-color:visited {
 494      background-color: #9f9f9f;
 495  }
 496  
 497  :root .editor-styles-wrapper .has-light-gray-color,
 498  :root .editor-styles-wrapper .has-light-gray-color:visited {
 499      color: #e6e6e6;
 500  }
 501  
 502  :root .editor-styles-wrapper .has-light-gray-background-color,
 503  :root .editor-styles-wrapper .has-light-gray-background-color:visited {
 504      background-color: #e6e6e6;
 505  }
 506  
 507  :root .editor-styles-wrapper .has-white-color,
 508  :root .editor-styles-wrapper .has-white-color:visited {
 509      color: #fff;
 510  }
 511  
 512  :root .editor-styles-wrapper .has-white-background-color,
 513  :root .editor-styles-wrapper .has-white-background-color:visited {
 514      background-color: #fff;
 515  }