You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
10 KiB
451 lines
10 KiB
/* |
|
Theme Name: Twenty Seventeen |
|
Description: Used to style blocks. |
|
*/ |
|
|
|
/*-------------------------------------------------------------- |
|
>>> TABLE OF CONTENTS: |
|
---------------------------------------------------------------- |
|
1.0 General Block Styles |
|
2.0 Blocks - Common Blocks |
|
3.0 Blocks - Formatting |
|
4.0 Blocks - Layout Elements |
|
5.0 Blocks - Widgets |
|
6.0 Blocks - Colors |
|
--------------------------------------------------------------*/ |
|
|
|
/*-------------------------------------------------------------- |
|
1.0 General Block Styles |
|
--------------------------------------------------------------*/ |
|
|
|
/* Captions */ |
|
|
|
[class^="wp-block-"]:not(.wp-block-gallery) figcaption { |
|
font-style: italic; |
|
margin-bottom: 1.5em; |
|
text-align: left; |
|
} |
|
|
|
.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption { |
|
text-align: right; |
|
} |
|
|
|
/*-------------------------------------------------------------- |
|
2.0 Blocks - Common Blocks |
|
--------------------------------------------------------------*/ |
|
|
|
/* Paragraph */ |
|
|
|
p.has-drop-cap:not(:focus)::first-letter { |
|
font-size: 5em; |
|
margin-top: 0.075em; |
|
} |
|
|
|
/* Image */ |
|
|
|
.wp-block-image { |
|
margin-bottom: 1.5em; |
|
} |
|
|
|
.wp-block-image figure { |
|
margin-bottom: 0; |
|
margin-top: 0; |
|
} |
|
|
|
.wp-block-image figure.alignleft { |
|
margin-right: 1.5em; |
|
} |
|
|
|
.wp-block-image figure.alignright { |
|
margin-left: 1.5em; |
|
} |
|
|
|
/* Gallery */ |
|
|
|
.wp-block-gallery { |
|
margin-bottom: 1.5em; |
|
} |
|
|
|
.wp-block-gallery figcaption { |
|
font-style: italic; |
|
} |
|
|
|
.wp-block-gallery.aligncenter { |
|
display: flex; |
|
margin: 0 -8px; |
|
} |
|
|
|
/* Quote */ |
|
|
|
.wp-block-quote:not(.is-large):not(.is-style-large) { |
|
border: 0; |
|
padding: 0; |
|
} |
|
|
|
.wp-block-quote.alignleft p:last-of-type, |
|
.wp-block-quote.alignright p:last-of-type { |
|
margin-bottom: 0; |
|
} |
|
|
|
.wp-block-quote cite { |
|
color: inherit; |
|
font-size: inherit; |
|
} |
|
|
|
/* Audio */ |
|
|
|
.wp-block-audio audio { |
|
display: block; |
|
width: 100%; |
|
} |
|
|
|
/* Cover */ |
|
|
|
.wp-block-cover-image.alignright, |
|
.wp-block-cover.alignright, |
|
.wp-block-cover-image.alignleft, |
|
.wp-block-cover.alignleft, |
|
.wp-block-cover-image.aligncenter, |
|
.wp-block-cover.aligncenter { |
|
display: flex; |
|
} |
|
|
|
/* File */ |
|
|
|
.wp-block-file .wp-block-file__button { |
|
background-color: #222; |
|
-webkit-border-radius: 2px; |
|
border-radius: 2px; |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
color: #fff; |
|
display: inline-block; |
|
font-size: 14px; |
|
font-size: 0.875rem; |
|
font-weight: 800; |
|
margin-top: 2em; |
|
padding: 0.7em 2em; |
|
-webkit-transition: background-color 0.2s ease-in-out; |
|
transition: background-color 0.2s ease-in-out; |
|
white-space: nowrap; |
|
} |
|
|
|
.wp-block-file .wp-block-file__button:hover, |
|
.wp-block-file .wp-block-file__button:focus { |
|
background-color: #767676; |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
} |
|
|
|
/*-------------------------------------------------------------- |
|
3.0 Blocks - Formatting |
|
--------------------------------------------------------------*/ |
|
|
|
/* Code */ |
|
|
|
.wp-block-code { |
|
background: transparent; |
|
border: 0; |
|
padding: 0; |
|
} |
|
|
|
/* Pullquote */ |
|
|
|
.wp-block-pullquote { |
|
border: 0; |
|
} |
|
|
|
.wp-block-pullquote__citation, |
|
.wp-block-pullquote cite { |
|
font-size: inherit; |
|
text-transform: none; |
|
} |
|
|
|
/* Table */ |
|
|
|
.wp-block-table thead th { |
|
border-bottom: 2px solid #bbb; |
|
padding-bottom: 0.5em; |
|
} |
|
|
|
.wp-block-table tr { |
|
border-bottom: 1px solid #eee; |
|
} |
|
|
|
.wp-block-table th, |
|
.wp-block-table td { |
|
border: 0; |
|
} |
|
|
|
.rtl .wp-block-table th, |
|
.rtl .wp-block-table td { |
|
text-align: right; |
|
} |
|
|
|
/*-------------------------------------------------------------- |
|
4.0 Blocks - Layout Elements |
|
--------------------------------------------------------------*/ |
|
|
|
/* Buttons */ |
|
|
|
.wp-block-button .wp-block-button__link { |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
display: inline-block; |
|
font-size: 14px; |
|
font-size: 0.875rem; |
|
font-weight: 800; |
|
line-height: 1.66; |
|
margin-top: 2em; |
|
padding: 0.7em 2em; |
|
-webkit-transition: background-color 0.2s ease-in-out; |
|
transition: background-color 0.2s ease-in-out; |
|
white-space: nowrap; |
|
} |
|
|
|
.entry-content .wp-block-button__link { |
|
background-color: #222; |
|
color: #fff; |
|
} |
|
|
|
.entry-content .is-style-outline .wp-block-button__link:not(.has-background) { |
|
background-color: transparent; |
|
} |
|
|
|
.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) { |
|
color: #222; |
|
} |
|
|
|
.colors-dark .wp-block-button__link { |
|
background-color: #fff; |
|
color: #000; |
|
} |
|
|
|
.entry-content .wp-block-button__link:hover, |
|
.entry-content .wp-block-button__link:focus, |
|
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover, |
|
.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus { |
|
background-color: #767676; |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
color: #fff; |
|
} |
|
|
|
.colors-dark .entry-content .wp-block-button__link:hover, |
|
.colors-dark .entry-content .wp-block-button__link:focus, |
|
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover, |
|
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus { |
|
background-color: #bbb; |
|
color: #000; |
|
} |
|
|
|
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) { |
|
color: #fff; |
|
} |
|
|
|
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover, |
|
.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus { |
|
color: #222; |
|
} |
|
|
|
.colors-custom .entry-content .wp-block-button__link, |
|
.colors-custom .entry-content .wp-block-button__link:hover, |
|
.colors-custom .entry-content .wp-block-button__link:focus, |
|
.colors-dark .entry-content .wp-block-button__link, |
|
.colors-dark .entry-content .wp-block-button__link:hover, |
|
.colors-dark .entry-content .wp-block-button__link:focus { |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
} |
|
|
|
.colors-custom .entry-content .wp-block-button__link:hover, |
|
.colors-custom .entry-content .wp-block-button__link:focus { |
|
color: #fff; |
|
} |
|
|
|
/* Separator */ |
|
|
|
.wp-block-separator { |
|
border: 0; |
|
} |
|
|
|
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { |
|
max-width: 100px; |
|
} |
|
|
|
/* Media & Text */ |
|
|
|
.wp-block-media-text { |
|
margin-bottom: 1.5em; |
|
} |
|
|
|
.wp-block-media-text *:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
/*-------------------------------------------------------------- |
|
5.0 Blocks - Widgets |
|
--------------------------------------------------------------*/ |
|
|
|
/* Archives, Categories & Latest Posts */ |
|
|
|
.wp-block-archives.aligncenter, |
|
.wp-block-categories.aligncenter, |
|
.wp-block-latest-posts.aligncenter { |
|
list-style-position: inside; |
|
text-align: center; |
|
} |
|
|
|
/* Comments */ |
|
|
|
.wp-block-latest-comments article { |
|
margin-bottom: 4em; |
|
} |
|
|
|
.blog:not(.has-sidebar) #primary .wp-block-latest-comments article, |
|
.archive:not(.page-one-column):not(.has-sidebar) #primary .wp-block-latest-comments article, |
|
.search:not(.has-sidebar) #primary .wp-block-latest-comments article { |
|
float: none; |
|
width: 100%; |
|
} |
|
|
|
.wp-block-latest-comments .avatar, |
|
.wp-block-latest-comments__comment-avatar { |
|
border-radius: 0; |
|
} |
|
|
|
.wp-block-latest-comments a { |
|
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); |
|
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); |
|
|
|
} |
|
|
|
.wp-block-latest-comments__comment-meta { |
|
font-size: 16px; |
|
font-size: 1rem; |
|
margin-bottom: 0.4em; |
|
} |
|
|
|
.wp-block-latest-comments__comment-author, |
|
.wp-block-latest-comments__comment-link { |
|
font-weight: 700; |
|
text-decoration: none; |
|
} |
|
|
|
.wp-block-latest-comments__comment-date { |
|
color: #767676; |
|
font-size: 10px; |
|
font-size: 0.625rem; |
|
font-weight: 800; |
|
letter-spacing: 0.1818em; |
|
margin-top: 0.4em; |
|
text-transform: uppercase; |
|
} |
|
|
|
.editor-block-list__block .wp-block-latest-comments__comment-excerpt p { |
|
font-size: 14px; |
|
font-size: 0.875rem; |
|
} |
|
|
|
/*-------------------------------------------------------------- |
|
6.0 Blocks - Colors |
|
--------------------------------------------------------------*/ |
|
|
|
.entry-content .has-pale-pink-color { |
|
color: #f78da7; |
|
} |
|
|
|
.entry-content .has-pale-pink-background-color, |
|
.wp-block-button.is-style-outline .has-pale-pink-background-color:link { |
|
background-color: #f78da7; |
|
} |
|
|
|
.entry-content .has-vivid-red-color { |
|
color: #cf2e2e; |
|
} |
|
|
|
.entry-content .has-vivid-red-background-color, |
|
.wp-block-button.is-style-outline .has-vivid-red-background-color:link { |
|
background-color: #cf2e2e; |
|
} |
|
|
|
.entry-content .has-luminous-vivid-orange-color { |
|
color: #ff6900; |
|
} |
|
|
|
.entry-content .has-luminous-vivid-orange-background-color, |
|
.wp-block-button.is-style-outline .has-luminous-vivid-orange-background-color:link { |
|
background-color: #ff6900; |
|
} |
|
|
|
.entry-content .has-luminous-vivid-amber-color { |
|
color: #fcb900; |
|
} |
|
|
|
.entry-content .has-luminous-vivid-amber-background-color, |
|
.wp-block-button.is-style-outline .has-luminous-vivid-amber-background-color:link { |
|
background-color: #fcb900; |
|
} |
|
|
|
.entry-content .has-light-green-cyan-color { |
|
color: #7bdcb5; |
|
} |
|
|
|
.entry-content .has-light-green-cyan-background-color, |
|
.wp-block-button.is-style-outline .has-light-green-cyan-background-color:link { |
|
background-color: #7bdcb5; |
|
} |
|
|
|
.entry-content .has-vivid-green-cyan-color { |
|
color: #00d084; |
|
} |
|
|
|
.entry-content .has-vivid-green-cyan-background-color, |
|
.wp-block-button.is-style-outline .has-vivid-green-cyan-background-color:link { |
|
background-color: #00d084; |
|
} |
|
|
|
.entry-content .has-pale-cyan-blue-color { |
|
color: #8ed1fc; |
|
} |
|
|
|
.entry-content .has-pale-cyan-blue-background-color, |
|
.wp-block-button.is-style-outline .has-pale-cyan-blue-background-color:link { |
|
background-color: #8ed1fc; |
|
} |
|
|
|
.entry-content .has-vivid-cyan-blue-color { |
|
color: #0693e3; |
|
} |
|
|
|
.entry-content .has-vivid-cyan-blue-background-color, |
|
.wp-block-button.is-style-outline .has-vivid-cyan-blue-background-color:link { |
|
background-color: #0693e3; |
|
} |
|
|
|
.entry-content .has-very-light-gray-color { |
|
color: #eee; |
|
} |
|
|
|
.entry-content .has-very-light-gray-background-color, |
|
.wp-block-button.is-style-outline .has-very-light-gray-background-color:link { |
|
background-color: #eee; |
|
} |
|
|
|
.entry-content .has-cyan-bluish-gray-color { |
|
color: #abb8c3; |
|
} |
|
|
|
.entry-content .has-cyan-bluish-gray-background-color, |
|
.wp-block-button.is-style-outline .has-cyan-bluish-gray-background-color:link { |
|
background-color: #abb8c3; |
|
} |
|
|
|
.entry-content .has-very-dark-gray-color { |
|
color: #313131; |
|
} |
|
|
|
.entry-content .has-very-dark-gray-background-color, |
|
.wp-block-button.is-style-outline .has-very-dark-gray-background-color:link { |
|
background-color: #313131; |
|
}
|
|
|