[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Twenty Seventeen
   3  Description: Used to style blocks.
   4  */
   5  
   6  /*--------------------------------------------------------------
   7  >>> TABLE OF CONTENTS:
   8  ----------------------------------------------------------------
   9  1.0 General Block Styles
  10  2.0 Blocks - Common Blocks
  11  3.0 Blocks - Formatting
  12  4.0 Blocks - Layout Elements
  13  5.0 Blocks - Widgets
  14  6.0 Blocks - Colors
  15  --------------------------------------------------------------*/
  16  
  17  /*--------------------------------------------------------------
  18  1.0 General Block Styles
  19  --------------------------------------------------------------*/
  20  
  21  /* Captions */
  22  
  23  [class^="wp-block-"]:not(.wp-block-gallery) > figcaption {
  24      font-style: italic;
  25      margin-bottom: 1.5em;
  26      text-align: left;
  27  }
  28  
  29  .rtl [class^="wp-block-"]:not(.wp-block-gallery) > figcaption {
  30      text-align: right;
  31  }
  32  
  33  /*--------------------------------------------------------------
  34  2.0 Blocks - Common Blocks
  35  --------------------------------------------------------------*/
  36  
  37  /* Paragraph */
  38  
  39  p.has-drop-cap:not(:focus)::first-letter {
  40      font-size: 5em;
  41      margin-top: 0.075em;
  42  }
  43  
  44  /* Image */
  45  
  46  .wp-block-image {
  47      margin-bottom: 1.5em;
  48  }
  49  
  50  .wp-block-image figure {
  51      margin-bottom: 0;
  52      margin-top: 0;
  53  }
  54  
  55  .wp-block-image figure.alignleft {
  56      margin-top: 0;
  57      margin-right: 1.5em;
  58  }
  59  
  60  .wp-block-image figure.alignright {
  61      margin-top: 0;
  62      margin-left: 1.5em;
  63  }
  64  
  65  .wp-block-image a,
  66  .wp-block-image a:hover,
  67  .wp-block-image a:focus,
  68  .widget-area .wp-block-image a,
  69  .widget-area .wp-block-image a:hover,
  70  .widget-area .wp-block-image a:focus {
  71      -webkit-box-shadow: none;
  72      box-shadow: none;
  73  }
  74  
  75  .entry-content > .wp-block-image:first-child figure.alignleft,
  76  .entry-content > .wp-block-image:first-child figure.alignright {
  77      margin-top: 1.5em;
  78  }
  79  
  80  /* Gallery */
  81  
  82  .wp-block-gallery {
  83      margin-bottom: 1.5em;
  84  }
  85  
  86  .wp-block-gallery figcaption {
  87      font-style: italic;
  88  }
  89  
  90  .wp-block-gallery.aligncenter {
  91      display: flex;
  92      margin: 0 -8px;
  93  }
  94  
  95  /* Quote */
  96  
  97  .wp-block-quote:not(.is-large):not(.is-style-large) {
  98      border: 0;
  99      padding: 0;
 100  }
 101  
 102  .wp-block-quote.alignleft p:last-of-type,
 103  .wp-block-quote.alignright p:last-of-type {
 104      margin-bottom: 0;
 105  }
 106  
 107  .wp-block-quote cite {
 108      color: inherit;
 109      font-size: inherit;
 110  }
 111  
 112  /* Audio */
 113  
 114  .wp-block-audio audio {
 115      display: block;
 116      width: 100%;
 117  }
 118  
 119  /* Cover */
 120  
 121  .wp-block-cover-image.alignright,
 122  .wp-block-cover.alignright,
 123  .wp-block-cover-image.alignleft,
 124  .wp-block-cover.alignleft,
 125  .wp-block-cover-image.aligncenter,
 126  .wp-block-cover.aligncenter {
 127      display: flex;
 128  }
 129  
 130  /* File */
 131  
 132  .wp-block-file .wp-block-file__button {
 133      background-color: #222;
 134      -webkit-border-radius: 2px;
 135      border-radius: 2px;
 136      -webkit-box-shadow: none;
 137      box-shadow: none;
 138      color: #fff;
 139      display: inline-block;
 140      font-size: 14px;
 141      font-size: 0.875rem;
 142      font-weight: 800;
 143      margin-top: 2em;
 144      padding: 0.7em 2em;
 145      -webkit-transition: background-color 0.2s ease-in-out;
 146      transition: background-color 0.2s ease-in-out;
 147      white-space: pre-line;
 148  }
 149  
 150  .wp-block-file .wp-block-file__button:hover,
 151  .wp-block-file .wp-block-file__button:focus {
 152      background-color: #767676;
 153      -webkit-box-shadow: none;
 154      box-shadow: none;
 155  }
 156  
 157  /*--------------------------------------------------------------
 158  3.0 Blocks - Formatting
 159  --------------------------------------------------------------*/
 160  
 161  /* Code */
 162  
 163  .wp-block-code {
 164      background: transparent;
 165      border: 0;
 166      padding: 0;
 167  }
 168  
 169  .wp-block-code code {
 170      font-size: inherit;
 171  }
 172  
 173  /* Pullquote */
 174  
 175  .wp-block-pullquote {
 176      border: 0 solid;
 177  }
 178  
 179  .wp-block-pullquote__citation,
 180  .wp-block-pullquote cite {
 181      font-size: inherit;
 182      text-transform: none;
 183  }
 184  
 185  /* Table */
 186  
 187  .wp-block-table thead th {
 188      border-bottom: 2px solid #bbb;
 189      padding-bottom: 0.5em;
 190  }
 191  
 192  .wp-block-table tr {
 193      border-bottom: 1px solid #eee;
 194  }
 195  
 196  .wp-block-table th,
 197  .wp-block-table td {
 198      border: 0;
 199  }
 200  
 201  .rtl .wp-block-table th,
 202  .rtl .wp-block-table td {
 203      text-align: right;
 204  }
 205  
 206  /* Calendar */
 207  
 208  .wp-block-calendar th {
 209      text-align: center;
 210  }
 211  
 212  .wp-block-buttons[style*="font-weight"] .wp-block-button__link,
 213  .wp-block-button[style*="font-weight"] .wp-block-button__link {
 214      font-weight: inherit;
 215  }
 216  
 217  /*--------------------------------------------------------------
 218  4.0 Blocks - Layout Elements
 219  --------------------------------------------------------------*/
 220  
 221  /* Buttons */
 222  
 223  .wp-block-button .wp-block-button__link {
 224      -webkit-box-shadow: none;
 225      box-shadow: none;
 226      display: inline-block;
 227      font-size: 14px;
 228      font-size: 0.875rem;
 229      font-weight: 800;
 230      line-height: 1.66;
 231      margin-top: 2em;
 232      padding: 0.7em 2em;
 233      -webkit-transition: background-color 0.2s ease-in-out;
 234      transition: background-color 0.2s ease-in-out;
 235      white-space: pre-line;
 236  }
 237  
 238  .entry-content .wp-block-button__link {
 239      background-color: #222;
 240      color: #fff;
 241  }
 242  
 243  .entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
 244      background-color: transparent;
 245  }
 246  
 247  .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
 248      color: #222;
 249  }
 250  
 251  .colors-dark .wp-block-button__link {
 252      background-color: #fff;
 253      color: #000;
 254  }
 255  
 256  .entry-content .wp-block-button__link:hover,
 257  .entry-content .wp-block-button__link:focus,
 258  .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
 259  .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
 260      background-color: #767676;
 261      -webkit-box-shadow: none;
 262      box-shadow: none;
 263      color: #fff;
 264  }
 265  
 266  .colors-dark .entry-content .wp-block-button__link:hover,
 267  .colors-dark .entry-content .wp-block-button__link:focus,
 268  .colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
 269  .colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
 270      background-color: #bbb;
 271      color: #000;
 272  }
 273  
 274  .colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
 275      color: #fff;
 276  }
 277  
 278  .colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
 279  .colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
 280      color: #222;
 281  }
 282  
 283  .colors-custom .entry-content .wp-block-button__link,
 284  .colors-custom .entry-content .wp-block-button__link:hover,
 285  .colors-custom .entry-content .wp-block-button__link:focus,
 286  .colors-dark .entry-content .wp-block-button__link,
 287  .colors-dark .entry-content .wp-block-button__link:hover,
 288  .colors-dark .entry-content .wp-block-button__link:focus {
 289      -webkit-box-shadow: none;
 290      box-shadow: none;
 291  }
 292  
 293  .colors-custom .entry-content .wp-block-button__link:hover,
 294  .colors-custom .entry-content .wp-block-button__link:focus {
 295      color: #fff;
 296  }
 297  
 298  /* Separator */
 299  
 300  .wp-block-separator {
 301      border: 0;
 302  }
 303  
 304  .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
 305      max-width: 100px;
 306  }
 307  
 308  /* Media & Text */
 309  
 310  .wp-block-media-text {
 311      margin-bottom: 1.5em;
 312  }
 313  
 314  .wp-block-media-text *:last-child {
 315      margin-bottom: 0;
 316  }
 317  
 318  /*--------------------------------------------------------------
 319  5.0 Blocks - Widgets
 320  --------------------------------------------------------------*/
 321  
 322  /* Archives, Categories & Latest Posts */
 323  
 324  .wp-block-archives.aligncenter,
 325  .wp-block-categories.aligncenter,
 326  .wp-block-latest-posts.aligncenter {
 327      list-style-position: inside;
 328      text-align: center;
 329  }
 330  
 331  /* Comments */
 332  
 333  .wp-block-latest-comments article {
 334      margin-bottom: 4rem;
 335  }
 336  
 337  .widget-area .wp-block-latest-comments article {
 338      margin-bottom: 1em;
 339  }
 340  
 341  .blog:not(.has-sidebar) #primary .wp-block-latest-comments article,
 342  .archive:not(.page-one-column):not(.has-sidebar) #primary .wp-block-latest-comments article,
 343  .search:not(.has-sidebar) #primary .wp-block-latest-comments article {
 344      float: none;
 345      width: 100%;
 346  }
 347  
 348  .wp-block-latest-comments .avatar,
 349  .wp-block-latest-comments__comment-avatar {
 350      border-radius: 0;
 351  }
 352  
 353  .wp-block-latest-comments a {
 354      -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
 355      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
 356  }
 357  
 358  .wp-block-latest-comments .wp-block-latest-comments__comment {
 359      border-top: none;
 360  }
 361  
 362  .wp-block-latest-comments__comment-meta {
 363      font-size: 16px;
 364      font-size: 1rem;
 365      margin-bottom: 0.4em;
 366  }
 367  
 368  .wp-block-latest-comments__comment-author,
 369  .wp-block-latest-comments__comment-link {
 370      font-weight: 700;
 371      text-decoration: none;
 372  }
 373  
 374  .wp-block-latest-comments__comment-date {
 375      color: #767676;
 376      font-size: 10px;
 377      font-size: 0.625rem;
 378      font-weight: 800;
 379      letter-spacing: 0.1818em;
 380      margin-top: 0.4em;
 381      text-transform: uppercase;
 382  }
 383  
 384  /* Query Loop & Post Template */
 385  
 386  .wp-block-query .wp-block-post-template > li {
 387      border-top: none;
 388  }
 389  
 390  /* Site Logo */
 391  
 392  :root .entry-content .wp-block-site-logo a.custom-logo-link {
 393      -webkit-box-shadow: none;
 394      box-shadow: none;
 395  }
 396  
 397  .entry-content .wp-block-site-logo img {
 398      max-height: none;
 399  }
 400  
 401  /*--------------------------------------------------------------
 402  6.0 Blocks - Colors
 403  --------------------------------------------------------------*/
 404  
 405  .entry-content .has-pale-pink-color {
 406      color: #f78da7;
 407  }
 408  
 409  .entry-content .has-pale-pink-background-color,
 410  .wp-block-button.is-style-outline .has-pale-pink-background-color:link {
 411      background-color: #f78da7;
 412  }
 413  
 414  .entry-content .has-vivid-red-color {
 415      color: #cf2e2e;
 416  }
 417  
 418  .entry-content .has-vivid-red-background-color,
 419  .wp-block-button.is-style-outline .has-vivid-red-background-color:link {
 420      background-color: #cf2e2e;
 421  }
 422  
 423  .entry-content .has-luminous-vivid-orange-color {
 424      color: #ff6900;
 425  }
 426  
 427  .entry-content .has-luminous-vivid-orange-background-color,
 428  .wp-block-button.is-style-outline .has-luminous-vivid-orange-background-color:link {
 429      background-color: #ff6900;
 430  }
 431  
 432  .entry-content .has-luminous-vivid-amber-color {
 433      color: #fcb900;
 434  }
 435  
 436  .entry-content .has-luminous-vivid-amber-background-color,
 437  .wp-block-button.is-style-outline .has-luminous-vivid-amber-background-color:link {
 438      background-color: #fcb900;
 439  }
 440  
 441  .entry-content .has-light-green-cyan-color {
 442      color: #7bdcb5;
 443  }
 444  
 445  .entry-content .has-light-green-cyan-background-color,
 446  .wp-block-button.is-style-outline .has-light-green-cyan-background-color:link {
 447      background-color: #7bdcb5;
 448  }
 449  
 450  .entry-content .has-vivid-green-cyan-color {
 451      color: #00d084;
 452  }
 453  
 454  .entry-content .has-vivid-green-cyan-background-color,
 455  .wp-block-button.is-style-outline .has-vivid-green-cyan-background-color:link {
 456      background-color: #00d084;
 457  }
 458  
 459  .entry-content .has-pale-cyan-blue-color {
 460      color: #8ed1fc;
 461  }
 462  
 463  .entry-content .has-pale-cyan-blue-background-color,
 464  .wp-block-button.is-style-outline .has-pale-cyan-blue-background-color:link {
 465      background-color: #8ed1fc;
 466  }
 467  
 468  .entry-content .has-vivid-cyan-blue-color {
 469      color: #0693e3;
 470  }
 471  
 472  .entry-content .has-vivid-cyan-blue-background-color,
 473  .wp-block-button.is-style-outline .has-vivid-cyan-blue-background-color:link {
 474      background-color: #0693e3;
 475  }
 476  
 477  .entry-content .has-very-light-gray-color {
 478      color: #eee;
 479  }
 480  
 481  .entry-content .has-very-light-gray-background-color,
 482  .wp-block-button.is-style-outline .has-very-light-gray-background-color:link {
 483      background-color: #eee;
 484  }
 485  
 486  .entry-content .has-cyan-bluish-gray-color {
 487      color: #abb8c3;
 488  }
 489  
 490  .entry-content .has-cyan-bluish-gray-background-color,
 491  .wp-block-button.is-style-outline .has-cyan-bluish-gray-background-color:link {
 492      background-color: #abb8c3;
 493  }
 494  
 495  .entry-content .has-very-dark-gray-color {
 496      color: #313131;
 497  }
 498  
 499  .entry-content .has-very-dark-gray-background-color,
 500  .wp-block-button.is-style-outline .has-very-dark-gray-background-color:link {
 501      background-color: #313131;
 502  }