Created
May 9, 2018 13:48
-
-
Save cdils/a2f1d4f9408b4870f82f5c96e6f62c65 to your computer and use it in GitHub Desktop.
This is an unminified version of the stylesheet that ships with the WordPress Gutenberg plugin. Original SCSS files are here -> https://github.com/WordPress/gutenberg/tree/master/core-blocks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.wp-block-embed figcaption { | |
margin-top: .5em; | |
color: #6c7781; | |
text-align: center; | |
font-size: 13px | |
} | |
.editor-block-list__block[data-type="core/embed"][data-align=left] .editor-block-list__block-edit, | |
.editor-block-list__block[data-type="core/embed"][data-align=right] .editor-block-list__block-edit, | |
.wp-block-embed.alignleft, | |
.wp-block-embed.alignright { | |
max-width: 318px; | |
width: 100% | |
} | |
p.is-small-text { | |
font-size: 14px | |
} | |
p.is-regular-text { | |
font-size: 16px | |
} | |
p.is-large-text { | |
font-size: 36px | |
} | |
p.is-larger-text { | |
font-size: 48px | |
} | |
p.has-drop-cap:not(:focus):first-letter { | |
float: left; | |
font-size: 4.1em; | |
line-height: .7; | |
font-family: serif; | |
font-weight: 600; | |
margin: .07em .23em 0 0; | |
text-transform: uppercase; | |
font-style: normal | |
} | |
p.has-background { | |
padding: 20px 30px | |
} | |
.has-pale-pink-background-color { | |
background-color: #f78da7 | |
} | |
.has-vivid-red-background-color { | |
background-color: #cf2e2e | |
} | |
.has-luminous-vivid-orange-background-color { | |
background-color: #ff6900 | |
} | |
.has-luminous-vivid-amber-background-color { | |
background-color: #fcb900 | |
} | |
.has-light-green-cyan-background-color { | |
background-color: #7bdcb5 | |
} | |
.has-vivid-green-cyan-background-color { | |
background-color: #00d084 | |
} | |
.has-pale-cyan-blue-background-color { | |
background-color: #8ed1fc | |
} | |
.has-vivid-cyan-blue-background-color { | |
background-color: #0693e3 | |
} | |
.has-very-light-gray-background-color { | |
background-color: #eee | |
} | |
.has-cyan-bluish-gray-background-color { | |
background-color: #abb8c3 | |
} | |
.has-very-dark-gray-background-color { | |
background-color: #313131 | |
} | |
.has-pale-pink-color { | |
color: #f78da7 | |
} | |
.has-vivid-red-color { | |
color: #cf2e2e | |
} | |
.has-luminous-vivid-orange-color { | |
color: #ff6900 | |
} | |
.has-luminous-vivid-amber-color { | |
color: #fcb900 | |
} | |
.has-light-green-cyan-color { | |
color: #7bdcb5 | |
} | |
.has-vivid-green-cyan-color { | |
color: #00d084 | |
} | |
.has-pale-cyan-blue-color { | |
color: #8ed1fc | |
} | |
.has-vivid-cyan-blue-color { | |
color: #0693e3 | |
} | |
.has-very-light-gray-color { | |
color: #eee | |
} | |
.has-cyan-bluish-gray-color { | |
color: #abb8c3 | |
} | |
.has-very-dark-gray-color { | |
color: #313131 | |
} | |
.wp-block-quote cite, | |
.wp-block-quote footer { | |
color: #6c7781; | |
margin-top: 1em; | |
position: relative; | |
font-size: 13px; | |
font-style: normal | |
} | |
.wp-block-quote.is-large { | |
margin: 0 0 16px; | |
padding: 0 1em | |
} | |
.wp-block-quote.is-large p { | |
font-size: 24px; | |
font-style: italic; | |
line-height: 1.6 | |
} | |
.wp-block-quote.is-large cite, | |
.wp-block-quote.is-large footer { | |
font-size: 19px; | |
text-align: right | |
} | |
.wp-block-gallery { | |
display: flex; | |
flex-wrap: wrap; | |
list-style-type: none; | |
margin: 0; | |
padding: 0 | |
} | |
.wp-block-gallery .blocks-gallery-image, | |
.wp-block-gallery .blocks-gallery-item { | |
margin: 8px; | |
display: flex; | |
flex-grow: 1; | |
flex-direction: column; | |
justify-content: center; | |
position: relative | |
} | |
.wp-block-gallery .blocks-gallery-image figure, | |
.wp-block-gallery .blocks-gallery-item figure { | |
margin: 0; | |
height: 100%; | |
display: flex; | |
align-items: flex-end | |
} | |
.wp-block-gallery .blocks-gallery-image img, | |
.wp-block-gallery .blocks-gallery-item img { | |
display: block; | |
max-width: 100%; | |
height: auto | |
} | |
.wp-block-gallery .blocks-gallery-image figcaption, | |
.wp-block-gallery .blocks-gallery-item figcaption { | |
padding: 40px 10px 5px; | |
color: #fff; | |
text-align: center; | |
font-size: 13px; | |
background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 60%, transparent); | |
position: absolute; | |
width: 100%; | |
max-height: 100%; | |
overflow: auto | |
} | |
.wp-block-gallery.is-cropped .blocks-gallery-image a, | |
.wp-block-gallery.is-cropped .blocks-gallery-image img, | |
.wp-block-gallery.is-cropped .blocks-gallery-item a, | |
.wp-block-gallery.is-cropped .blocks-gallery-item img { | |
flex: 1; | |
width: 100%; | |
height: 100%; | |
-o-object-fit: cover; | |
object-fit: cover | |
} | |
.wp-block-gallery.is-cropped .blocks-gallery-image _:-ms-lang(x), | |
.wp-block-gallery.is-cropped .blocks-gallery-image figure, | |
.wp-block-gallery.is-cropped .blocks-gallery-item _:-ms-lang(x), | |
.wp-block-gallery.is-cropped .blocks-gallery-item figure { | |
height: auto; | |
width: auto | |
} | |
.wp-block-gallery .blocks-gallery-image, | |
.wp-block-gallery .blocks-gallery-item { | |
width: calc(100% / 2 - 16px) | |
} | |
.wp-block-gallery.columns-1 .blocks-gallery-image, | |
.wp-block-gallery.columns-1 .blocks-gallery-item { | |
width: calc(100% / 1 - 16px) | |
} | |
@media (min-width:600px) { | |
.wp-block-gallery.columns-3 .blocks-gallery-image, | |
.wp-block-gallery.columns-3 .blocks-gallery-item { | |
width: calc(100% / 3 - 16px) | |
} | |
.wp-block-gallery.columns-4 .blocks-gallery-image, | |
.wp-block-gallery.columns-4 .blocks-gallery-item { | |
width: calc(100% / 4 - 16px) | |
} | |
.wp-block-gallery.columns-5 .blocks-gallery-image, | |
.wp-block-gallery.columns-5 .blocks-gallery-item { | |
width: calc(100% / 5 - 16px) | |
} | |
.wp-block-gallery.columns-6 .blocks-gallery-image, | |
.wp-block-gallery.columns-6 .blocks-gallery-item { | |
width: calc(100% / 6 - 16px) | |
} | |
.wp-block-gallery.columns-7 .blocks-gallery-image, | |
.wp-block-gallery.columns-7 .blocks-gallery-item { | |
width: calc(100% / 7 - 16px) | |
} | |
.wp-block-gallery.columns-8 .blocks-gallery-image, | |
.wp-block-gallery.columns-8 .blocks-gallery-item { | |
width: calc(100% / 8 - 16px) | |
} | |
} | |
.wp-block-gallery.alignleft, | |
.wp-block-gallery.alignright, | |
[data-align=left] .wp-block-gallery, | |
[data-align=right] .wp-block-gallery { | |
max-width: 318px; | |
width: 100% | |
} | |
.wp-block-audio figcaption { | |
margin-top: .5em; | |
color: #6c7781; | |
text-align: center; | |
font-size: 13px | |
} | |
.wp-block-button { | |
margin-bottom: 1.5em | |
} | |
.wp-block-button .wp-block-button__link { | |
border: none; | |
border-radius: 23px; | |
box-shadow: none; | |
cursor: pointer; | |
display: inline-block; | |
font-size: 18px; | |
line-height: 24px; | |
margin: 0; | |
padding: 11px 24px; | |
text-align: center; | |
text-decoration: none; | |
white-space: normal; | |
word-break: break-all | |
} | |
.wp-block-button.aligncenter { | |
text-align: center | |
} | |
.wp-block-button.alignright { | |
text-align: right | |
} | |
.wp-block-button__link:not(.has-background), | |
.wp-block-button__link:not(.has-background):active, | |
.wp-block-button__link:not(.has-background):focus, | |
.wp-block-button__link:not(.has-background):hover { | |
background-color: #32373c | |
} | |
.wp-block-button__link:not(.has-text-color), | |
.wp-block-button__link:not(.has-text-color):active, | |
.wp-block-button__link:not(.has-text-color):focus, | |
.wp-block-button__link:not(.has-text-color):hover { | |
color: #fff | |
} | |
.wp-block-categories.alignleft { | |
margin-right: 2em | |
} | |
.wp-block-categories.alignright { | |
margin-left: 2em | |
} | |
.wp-block-columns { | |
display: grid; | |
grid-auto-flow: dense | |
} | |
.wp-block-columns.has-2-columns { | |
grid-auto-columns: 50% | |
} | |
.wp-block-columns.has-3-columns { | |
grid-auto-columns: 33.33333% | |
} | |
.wp-block-columns.has-4-columns { | |
grid-auto-columns: 25% | |
} | |
.wp-block-columns.has-5-columns { | |
grid-auto-columns: 20% | |
} | |
.wp-block-columns.has-6-columns { | |
grid-auto-columns: 16.66667% | |
} | |
.wp-block-columns .layout-column-1 { | |
grid-column: 1 | |
} | |
.wp-block-columns .layout-column-2 { | |
grid-column: 2 | |
} | |
.wp-block-columns .layout-column-3 { | |
grid-column: 3 | |
} | |
.wp-block-columns .layout-column-4 { | |
grid-column: 4 | |
} | |
.wp-block-columns .layout-column-5 { | |
grid-column: 5 | |
} | |
.wp-block-columns .layout-column-6 { | |
grid-column: 6 | |
} | |
.wp-block-cover-image { | |
position: relative; | |
background-size: cover; | |
min-height: 430px; | |
width: 100%; | |
margin: 0 0 1.5em; | |
display: flex; | |
justify-content: center; | |
align-items: center | |
} | |
.wp-block-cover-image.has-left-content { | |
justify-content: flex-start | |
} | |
.wp-block-cover-image.has-left-content .wp-block-cover-image-text, | |
.wp-block-cover-image.has-left-content h2 { | |
margin-left: 0; | |
text-align: left | |
} | |
.wp-block-cover-image.has-right-content { | |
justify-content: flex-end | |
} | |
.wp-block-cover-image.has-right-content .wp-block-cover-image-text, | |
.wp-block-cover-image.has-right-content h2 { | |
margin-right: 0; | |
text-align: right | |
} | |
.wp-block-cover-image .wp-block-cover-image-text, | |
.wp-block-cover-image h2 { | |
color: #fff; | |
font-size: 2em; | |
line-height: 1.25; | |
z-index: 1; | |
margin-bottom: 0; | |
max-width: 636px; | |
padding: 14px; | |
text-align: center | |
} | |
.wp-block-cover-image .wp-block-cover-image-text a, | |
.wp-block-cover-image .wp-block-cover-image-text a:active, | |
.wp-block-cover-image .wp-block-cover-image-text a:focus, | |
.wp-block-cover-image .wp-block-cover-image-text a:hover, | |
.wp-block-cover-image h2 a, | |
.wp-block-cover-image h2 a:active, | |
.wp-block-cover-image h2 a:focus, | |
.wp-block-cover-image h2 a:hover { | |
color: #fff | |
} | |
.wp-block-cover-image.has-parallax { | |
background-attachment: fixed | |
} | |
.wp-block-cover-image.has-background-dim:before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
background-color: rgba(0, 0, 0, .5) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-10:before { | |
background-color: rgba(0, 0, 0, .1) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-20:before { | |
background-color: rgba(0, 0, 0, .2) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-30:before { | |
background-color: rgba(0, 0, 0, .3) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-40:before { | |
background-color: rgba(0, 0, 0, .4) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-50:before { | |
background-color: rgba(0, 0, 0, .5) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-60:before { | |
background-color: rgba(0, 0, 0, .6) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-70:before { | |
background-color: rgba(0, 0, 0, .7) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-80:before { | |
background-color: rgba(0, 0, 0, .8) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-90:before { | |
background-color: rgba(0, 0, 0, .9) | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-100:before { | |
background-color: #000 | |
} | |
.wp-block-cover-image.components-placeholder { | |
height: inherit | |
} | |
.wp-block-cover-image.alignleft, | |
.wp-block-cover-image.alignright, | |
[data-align=left] .wp-block-cover-image, | |
[data-align=right] .wp-block-cover-image { | |
max-width: 318px; | |
width: 100% | |
} | |
.wp-block-image { | |
width: -webkit-fit-content; | |
width: -moz-fit-content; | |
width: fit-content | |
} | |
.wp-block-image figcaption { | |
margin-top: .5em; | |
color: #6c7781; | |
text-align: center; | |
font-size: 13px | |
} | |
.wp-block-image.aligncenter { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
text-align: center | |
} | |
.wp-block-latest-posts.alignleft { | |
margin-right: 2em | |
} | |
.wp-block-latest-posts.alignright { | |
margin-left: 2em | |
} | |
.wp-block-latest-posts.is-grid { | |
display: flex; | |
flex-wrap: wrap; | |
padding: 0; | |
list-style: none | |
} | |
.wp-block-latest-posts.is-grid li { | |
margin: 0 16px 16px 0; | |
width: 100% | |
} | |
@media (min-width:600px) { | |
.wp-block-latest-posts.columns-2 li { | |
width: calc(50% - 16px) | |
} | |
.wp-block-latest-posts.columns-3 li { | |
width: calc(33.33333% - 16px) | |
} | |
.wp-block-latest-posts.columns-4 li { | |
width: calc(25% - 16px) | |
} | |
.wp-block-latest-posts.columns-5 li { | |
width: calc(20% - 16px) | |
} | |
.wp-block-latest-posts.columns-6 li { | |
width: calc(16.66667% - 16px) | |
} | |
} | |
.wp-block-latest-posts__post-date { | |
display: block; | |
color: #6c7781; | |
font-size: 13px | |
} | |
.wp-block-pullquote { | |
border-top: 4px solid #555d66; | |
border-bottom: 4px solid #555d66; | |
color: #40464d; | |
padding: 3em 0; | |
text-align: center | |
} | |
.wp-block-pullquote.alignleft, | |
.wp-block-pullquote.alignright { | |
max-width: 400px | |
} | |
.wp-block-pullquote.alignleft>p, | |
.wp-block-pullquote.alignright>p { | |
font-size: 20px | |
} | |
.wp-block-pullquote>p { | |
font-size: 24px; | |
line-height: 1.6 | |
} | |
.wp-block-pullquote cite, | |
.wp-block-pullquote footer { | |
color: #40464d; | |
position: relative; | |
text-transform: uppercase; | |
font-size: 13px | |
} | |
.wp-block-separator { | |
border: none; | |
border-bottom: 2px solid #8f98a1; | |
max-width: 100px; | |
margin: 1.65em auto | |
} | |
p.wp-block-subhead { | |
font-size: 1.1em; | |
font-style: italic; | |
opacity: .75 | |
} | |
.wp-block-table { | |
overflow-x: auto; | |
display: block | |
} | |
.wp-block-table table { | |
border-collapse: collapse; | |
width: 100% | |
} | |
.wp-block-text-columns, | |
.wp-block-text-columns.aligncenter { | |
display: flex | |
} | |
.wp-block-text-columns .wp-block-column { | |
box-sizing: border-box; | |
margin: 0 16px; | |
padding: 0 | |
} | |
.wp-block-text-columns .wp-block-column:first-child { | |
margin-left: 0 | |
} | |
.wp-block-text-columns .wp-block-column:last-child { | |
margin-right: 0 | |
} | |
.wp-block-text-columns.columns-2 .wp-block-column { | |
width: 50% | |
} | |
.wp-block-text-columns.columns-3 .wp-block-column { | |
width: 33.33333% | |
} | |
.wp-block-text-columns.columns-4 .wp-block-column { | |
width: 25% | |
} | |
.wp-block-video { | |
margin: 0 | |
} | |
.wp-block-video figcaption { | |
margin-top: .5em; | |
color: #6c7781; | |
text-align: center; | |
font-size: 13px | |
} | |
.wp-block-video.aligncenter { | |
text-align: center | |
} | |
.shared-block-edit-panel { | |
align-items: center; | |
background: #f8f9f9; | |
color: #555d66; | |
display: flex; | |
flex-wrap: wrap; | |
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif; | |
font-size: 13px; | |
margin: 0 -14px; | |
padding: 10px 14px; | |
position: relative; | |
top: 14px | |
} | |
.shared-block-edit-panel .shared-block-edit-panel__spinner { | |
margin: 0 5px | |
} | |
.shared-block-edit-panel .shared-block-edit-panel__info { | |
margin-right: auto | |
} | |
.shared-block-edit-panel .shared-block-edit-panel__label { | |
margin-right: 10px; | |
white-space: nowrap; | |
font-weight: 600 | |
} | |
.shared-block-edit-panel .shared-block-edit-panel__title { | |
flex: 1 1 100%; | |
font-size: 14px; | |
height: 30px; | |
margin: 5px 0 10px | |
} | |
.wp-core-ui .shared-block-edit-panel .shared-block-edit-panel__button { | |
margin: 0 5px 0 0 | |
} | |
@media (min-width:960px) { | |
.shared-block-edit-panel { | |
flex-wrap: nowrap | |
} | |
.shared-block-edit-panel .shared-block-edit-panel__title { | |
margin: 0 | |
} | |
.wp-core-ui .shared-block-edit-panel .shared-block-edit-panel__button { | |
margin: 0 0 0 5px | |
} | |
} | |
.shared-block-indicator { | |
background: #fff; | |
border-left: 1px dashed #e2e4e7; | |
color: #555d66; | |
border-top: 1px dashed #e2e4e7; | |
bottom: -14px; | |
height: 30px; | |
padding: 5px; | |
position: absolute; | |
right: -14px; | |
width: 30px | |
} |
THANK YOU!
@ronalfy Use at your own risk. I would assume this is outdated. :)
@cdils it helped get my colors back 🤗
Awesome!!
…On Sun, Mar 27, 2022 at 1:42 PM Ronald Huereca ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
@cdils <https://github.com/cdils> it helped get my colors back 🤗
—
Reply to this email directly, view it on GitHub
<https://gist.github.com/a2f1d4f9408b4870f82f5c96e6f62c65#gistcomment-4112366>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAXUWEES2FMVRTZO3O3T4I3VCDB4ZANCNFSM4HPLRHUA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is there a working link, https://github.com/WordPress/gutenberg/tree/master/core-blocks does not work anymore.