Ghost/apps/admin-x-design-system/styles.css
Daniël van der Winden 42299abf82
Added styling for accent colours on Tiers and Offers (#20696)
fixes
https://linear.app/tryghost/issue/DES-81/misleading-hardcoded-tier-preview-title-colors

Tiers and Offers in Admin were shown with hardcoded pink titles. This
changes that. They are now shown with black titles, and only in the preview will they render with the site's accent colour. 

---------

Co-authored-by: Princi Vershwal <vershwal.princi@gmail.com>
2024-08-01 09:46:11 +00:00

101 lines
1.9 KiB
CSS

@import './preflight.css';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Defaults */
@layer base {
/* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */
@font-face {
font-family: "Inter";
src: local("Inter") format("truetype-variations");
font-weight: 100 900;
}
.admin-x-base {
& {
@apply font-sans text-black text-base leading-normal;
}
h1, h2, h3, h4, h5 {
@apply font-bold tracking-tight leading-tighter;
}
h1 {
@apply text-4xl leading-supertight;
}
h2 {
@apply text-2xl;
}
h3 {
@apply text-xl;
}
h4 {
@apply text-lg;
}
h5 {
@apply text-md leading-supertight;
}
h6 {
@apply text-md leading-normal;
}
}
}
.admin-x-base {
line-height: 1.5;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
letter-spacing: unset;
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
@media (max-width: 800px) {
.admin-x-base {
height: calc(100vh - 55px);
}
}
.admin-x-base.dark {
color: #FAFAFB;
}
.admin-x-base.dark .gh-loading-orb-container {
background-color: #000000;
}
.admin-x-base.dark .gh-loading-orb {
filter: invert(100%);
}
.admin-x-base .no-scrollbar::-webkit-scrollbar {
display: none; /* Chrome */
}
.admin-x-base .no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Prose classes are for formatting arbitrary HTML that comes from the API */
.gh-prose-links a {
color: #30CF43;
}