TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +03:00
Code Issues Projects Releases Wiki Activity

Card css specificity updates (#13895)

Browse Source 
The default CSS styles of the new cards that have been released in the past couple of weeks was overoptimised for overridability. It was done by defining the lowest specificity scores for each card style. This resulted in certain default styles being unusable for a lot of themes – e.g. the text color of a button (which is a a element that is usually defined on a higher specificity) could easily be the same color as its background (accent color by default).

The solution to this issue is to increase the specificity level of globally used default elements (such as a's h1 and other headings, p's etc.) to a medium level so that they have precedence over styles that are defined in most themes. Our baseline specificity score for these default style is 21, which seems to be covering most of the cases in popular themes.

This commit contains CSS updates in card default styles that implement this change.
This commit is contained in:
Peter Zimon 2021-12-15 12:58:24 +01:00 committed by GitHub
parent a1df1a8166
commit cebbc7ce38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 97 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/frontend/src/cards/css/audio.css
View File

@ -50,7 +50,7 @@
padding: 8px 12px;
border: none;
font-family: inherit;
font-size: 1.1em;
font-size: 1.15em;
font-weight: 700;
line-height: 1.15em;
background: transparent;

5
core/frontend/src/cards/css/bookmark.css
View File

@ -4,13 +4,14 @@
width: 100%;
}
.kg-bookmark-container,
.kg-bookmark-container:hover {
.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover {
display: flex;
text-decoration: none;
border-radius: 3px;
border: 1px solid rgb(124 139 154 / 25%);
overflow: hidden;
color: inherit;
}
.kg-bookmark-content {

7
core/frontend/src/cards/css/button.css
View File

@ -10,13 +10,14 @@
justify-content: flex-start;
}
a.kg-btn {
.kg-button-card a.kg-btn {
display: flex;
position: static;
align-items: center;
padding: 0 1.2em;
height: 2.4em;
line-height: 1em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.95em;
font-weight: 600;
text-decoration: none;
@ -24,11 +25,11 @@ a.kg-btn {
transition: opacity 0.2s ease-in-out;
}
a.kg-btn:hover {
.kg-button-card a.kg-btn:hover {
opacity: 0.85;
}
a.kg-btn-accent {
.kg-button-card a.kg-btn-accent {
background-color: var(--ghost-accent-color);
color: #fff;
}

9
core/frontend/src/cards/css/callout.css
View File

@ -46,13 +46,14 @@
color: #fff;
}
.kg-callout-emoji {
.kg-callout-card div.kg-callout-emoji {
padding-right: .8em;
line-height: 1.3em;
font-size: 1.2em;
line-height: 1.45em;
font-size: 1.15em;
}
.kg-callout-text {
.kg-callout-card div.kg-callout-text {
font-size: .95em;
line-height: 1.5em;
margin-top: 0.15em;
}

50
core/frontend/src/cards/css/file.css
View File

@ -1,4 +1,8 @@
a.kg-file-card {
.kg-file-card {
display: flex;
}
.kg-file-card a.kg-file-card-container {
display: flex;
align-items: center;
justify-content: space-between;
@ -9,56 +13,57 @@ a.kg-file-card {
border-radius: 3px;
transition: all ease-in-out 0.35s;
text-decoration: none;
width: 100%;
}
a.kg-file-card:hover {
.kg-file-card a.kg-file-card-container:hover {
border: 1px solid rgb(124 139 154 / 35%);
}
.kg-file-card .kg-file-card-container {
.kg-file-card-contents {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 8px;
margin: 4px 8px;
}
.kg-file-card .kg-file-card-title {
.kg-file-card-title {
font-size: 1.15em;
font-weight: 700;
line-height: 1.3em;
}
.kg-file-card .kg-file-card-caption {
font-size: 1.0em;
.kg-file-card-caption {
font-size: 0.95em;
line-height: 1.5em;
opacity: 0.6;
line-height: 1.4em;
}
.kg-file-card .kg-file-card-metadata {
.kg-file-card-metadata {
display: inline;
font-size: 0.825em;
line-height: 1.4em;
line-height: 1.5em;
margin-top: 2px;
}
.kg-file-card .kg-file-card-filename {
.kg-file-card-filename {
display: inline;
font-weight: 500;
}
.kg-file-card .kg-file-card-filesize {
.kg-file-card-filesize {
display: inline-block;
font-size: 0.925em;
opacity: 0.6;
}
.kg-file-card .kg-file-card-filesize:before {
.kg-file-card-filesize:before {
display: inline-block;
content: "\2022";
margin-right: 4px;
}
.kg-file-card .kg-file-card-icon {
.kg-file-card-icon {
position: relative;
display: flex;
align-items: center;
@ -68,7 +73,7 @@ a.kg-file-card:hover {
height: 100%;
}
.kg-file-card .kg-file-card-icon:before {
.kg-file-card-icon:before {
position: absolute;
display: block;
content: "";
@ -82,35 +87,36 @@ a.kg-file-card:hover {
border-radius: 2px;
}
.kg-file-card:hover .kg-file-card-icon:before {
.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before {
opacity: 0.08;
}
.kg-file-card .kg-file-card-icon svg {
.kg-file-card-icon svg {
width: 24px;
height: 24px;
color: var(--ghost-accent-color);
}
/* Size variations */
.kg-file-card.kg-file-card-medium {
.kg-file-card-medium a.kg-file-card-container {
min-height: 72px;
}
.kg-file-card.kg-file-card-medium .kg-file-card-container .kg-file-card-caption {
.kg-file-card-medium .kg-file-card-caption {
opacity: 1.0;
font-weight: 500;
}
.kg-file-card.kg-file-card-small {
.kg-file-card-small a.kg-file-card-container {
min-height: 52px;
}
.kg-file-card.kg-file-card-small .kg-file-card-metadata {
.kg-file-card-small .kg-file-card-metadata {
font-size: 1.0em;
margin-top: 0;
}
.kg-file-card.kg-file-card-small .kg-file-card-icon svg {
.kg-file-card-small .kg-file-card-icon svg {
width: 20px;
height: 20px;
}

8
core/frontend/src/cards/css/nft.css
View File

@ -7,7 +7,7 @@
margin-right: auto;
}
.kg-nft-card-container {
.kg-nft-card a.kg-nft-card-container {
position: static;
display: flex;
flex: auto;
@ -31,12 +31,6 @@
transition: none;
}
.kg-nft-card:hover {
color: #333;
opacity: 1.0;
transition: none;
}
.kg-nft-card * {
position: static;
}

47
core/frontend/src/cards/css/product.css
View File

@ -27,44 +27,44 @@
grid-column: 1 / 2;
}
.kg-product-card-title {
.kg-product-card h4.kg-product-card-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-decoration: none;
font-weight: 700;
font-size: 1.4em;
margin-top: 0;
margin-bottom: 0;
line-height: 1.25em;
line-height: 1.15em;
}
.kg-product-card-description {
grid-column: 1 / 3;
font-size: 1em;
line-height: 1.4em;
}
.kg-product-card .kg-product-card-description p,
.kg-product-card .kg-product-card-description ol,
.kg-product-card .kg-product-card-description ul {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.95em;
line-height: 1.5em;
opacity: .7;
}
.kg-product-card-description p:not(:first-of-type) {
.kg-product-card .kg-product-card-description p:not(:first-of-type) {
margin-top: 0.8em;
margin-bottom: 0;
}
.kg-product-card-description p:first-of-type {
.kg-product-card .kg-product-card-description p:first-of-type {
margin-top: -4px;
}
.kg-product-card-description p:last-of-type {
margin-bottom: 6px;
.kg-product-card .kg-product-card-description ul,
.kg-product-card .kg-product-card-description ol {
margin-top: 0.95em;
}
.kg-product-card-description ul {
margin-top: 1rem;
}
.kg-product-card-description li {
line-height: 1.4em;
}
.kg-product-card-description li+li {
.kg-product-card .kg-product-card-description li+li {
margin-top: 0.2em;
}
@ -106,24 +106,25 @@
opacity: 1;
}
.kg-product-card-button {
.kg-product-card a.kg-product-card-button {
justify-content: center;
grid-column: 1 / 3;
width: 100%;
display: flex;
position: static;
align-items: center;
padding: 0 1.2em;
height: 2.4em;
line-height: 1em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 0.95em;
font-weight: 600;
line-height: 1em;
text-decoration: none;
width: 100%;
height: 2.4em;
border-radius: 5px;
padding: 0 1.2em;
transition: opacity 0.2s ease-in-out;
}
.kg-product-card-btn-accent {
.kg-product-card a.kg-product-card-btn-accent {
background-color: var(--ghost-accent-color);
color: #fff;
}

53
core/frontend/src/cards/css/toggle.css
View File

@ -1,5 +1,8 @@
.kg-toggle-card+.kg-toggle-card {
margin-top: 1em;
.kg-toggle-card {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
border-radius: 4px;
padding: 1.2em;
}
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
@ -19,25 +22,10 @@
position: relative;
}
.kg-toggle-content p:first-of-type {
margin-top: 0.5em;
}
.kg-toggle-content p {
font-size: 0.95em;
}
.kg-toggle-card[data-kg-toggle-state="close"] svg {
transform: unset;
}
.kg-toggle-card {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
border-radius: 4px;
padding: 1.2em;
}
.kg-toggle-heading {
cursor: pointer;
display: flex;
@ -45,6 +33,30 @@
align-items: flex-start;
}
.kg-toggle-card h4.kg-toggle-heading-text {
font-size: 1.15em;
font-weight: 700;
line-height: 1.3em;
margin-top: 0;
margin-bottom: 0;
}
.kg-toggle-content p:first-of-type {
margin-top: 0.5em;
}
.kg-toggle-card .kg-toggle-content p,
.kg-toggle-card .kg-toggle-content ol,
.kg-toggle-card .kg-toggle-content ul {
font-size: 0.95em;
line-height: 1.5em;
margin-top: 0.95em;
}
.kg-toggle-card li + li {
margin-top: 0.5em;
}
.kg-toggle-card-icon {
height: 24px;
width: 24px;
@ -72,9 +84,6 @@
fill-rule: evenodd;
}
.kg-toggle-heading-text {
margin-top: 0;
margin-bottom: 0;
line-height: 1.3em;
font-size: 1.1em;
.kg-toggle-card + .kg-toggle-card {
margin-top: 1em;
}