ghost 4.27.1 → 4.30.0

package/core/frontend/src/cards/css/file.css

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

package/core/frontend/src/cards/css/nft.css

@@ -3,9 +3,11 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.kg-nft-card-container {
+.kg-nft-card a.kg-nft-card-container {
     position: static;
     display: flex;
     flex: auto;
@@ -18,7 +20,7 @@
                 roboto, noto,
                 'segoe ui', arial,
                 sans-serif;
-    font-size: 1.4rem;
+    font-size: 14px;
     font-weight: 400;
     box-shadow: 0 2px 6px -2px rgb(0 0 0 / 10%), 0 0 1px rgb(0 0 0 / 40%);
     width: 100%;
@@ -29,18 +31,12 @@
     transition: none;
 }
 
-.kg-nft-card:hover {
-    color: #333;
-    opacity: 1.0;
-    transition: none;
-}
-
 .kg-nft-card * {
     position: static;
 }
 
 .kg-nft-metadata {
-    padding: 2.0rem;
+    padding: 20px;
     width: 100%;
 }
 
@@ -58,7 +54,7 @@
 
 .kg-nft-header h4.kg-nft-title {
     font-family: inherit;
-    font-size: 1.9rem;
+    font-size: 19px;
     font-weight: 700;
     line-height: 1.3em;
     min-width: unset;
@@ -76,7 +72,7 @@
 .kg-nft-creator {
     font-family: inherit;
     line-height: 1.4em;
-    margin: 0.4rem 0 0;
+    margin: 4px 0 0;
     color: #ababab;
 }
 
@@ -87,8 +83,8 @@
 
 .kg-nft-card p.kg-nft-description {
     font-family: inherit;
-    font-size: 1.4rem;
+    font-size: 14px;
     line-height: 1.4em;
-    margin: 2.0rem 0 0;
+    margin: 20px 0 0;
     color: #222;
 }

package/core/frontend/src/cards/css/product.css

@@ -1,101 +1,130 @@
-.kg-product-card-container {
+.kg-product-card {
     display: flex;
-    background: transparent;
-    box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
-    border-radius: 5px;
+    align-items: center;
     flex-direction: column;
-    text-decoration: none;
-    max-width: 550px;
-    padding: 20px;
     width: 100%;
 }
 
-.kg-product-card {
+.kg-product-card-container {
+    display: grid;
+    grid-template-columns: auto min-content;
     align-items: center;
-    display: flex;
-    flex-direction: column;
+    grid-row-gap: 16px;
+    background: transparent;
+    max-width: 550px;
+    padding: 20px;
     width: 100%;
+    border-radius: 5px;
+    box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
 }
 
 .kg-product-card-image {
-    margin-bottom: 1.6rem;
-}
-
-.kg-product-card-header {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    grid-column: 1 / 3;
+    justify-self: center;
 }
 
 .kg-product-card-title-container {
-    flex: 2 1 250px;
+    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.4em;
+    line-height: 1.15em;
 }
 
 .kg-product-card-description {
-    font-size: 1em;
-    line-height: 1.6em;
+    grid-column: 1 / 3;
+}
+
+.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;
-    margin-top: 8px;
 }
 
-.kg-product-card-button {
-    width: 100%;
-    margin-top: 16px;
+.kg-product-card .kg-product-card-description p:not(:first-of-type) {
+    margin-top: 0.8em;
+    margin-bottom: 0;
+}
+
+.kg-product-card .kg-product-card-description p:first-of-type {
+    margin-top: -4px;
+}
+
+.kg-product-card .kg-product-card-description ul,
+.kg-product-card .kg-product-card-description ol {
+    margin-top: 0.95em;
+}
+
+.kg-product-card .kg-product-card-description li+li {
+    margin-top: 0.2em;
 }
 
 .kg-product-card-rating {
     display: flex;
     align-items: center;
-    flex: 0 0 100px;
+    grid-column: 2 / 3;
+    align-self: start;
+    justify-self: end;
+    padding-left: 16px;
+}
+
+@media (max-width: 400px) {
+    .kg-product-card-title-container {
+        grid-column: 1 / 3;
+    }
+
+    .kg-product-card-rating {
+        grid-column: 1 / 3;
+        justify-self: start;
+        margin-top: -15px;
+        padding-left: 0;
+    }
 }
 
 .kg-product-card-rating-star {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 32px;
+    height: 28px;
     width: 20px;
 }
 
 .kg-product-card-rating-star svg {
     width: 16px;
     height: 16px;
-    fill: #fff;
+    fill: currentColor;
+    opacity: 0.15;
 }
 
-.kg-product-card-rating-edit .kg-product-card-rating-star:hover {
-    opacity: 0.7;
+.kg-product-card-rating-active.kg-product-card-rating-star svg {
+    opacity: 1;
 }
 
-.kg-product-card-rating-edit {
-    background: none;
+.kg-product-card a.kg-product-card-button {
+    justify-content: center;
+    grid-column: 1 / 3;
     display: flex;
+    position: static;
     align-items: center;
+    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-rating-preview {
-    display: flex;
-}
-
-.kg-product-card-rating-star svg {
-    fill: #ebeef0;
-}
-
-.kg-product-card-rating-active.kg-product-card-rating-star svg {
-    fill: #394047;
+.kg-product-card a.kg-product-card-btn-accent {
+    background-color: var(--ghost-accent-color);
+    color: #fff;
 }
-
-.kg-product-card-button {
-    justify-content: center;
-}

package/core/frontend/src/cards/css/toggle.css

@@ -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;
 }