mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
048dac30ed
refs https://github.com/TryGhost/Product/issues/4105 --- <!-- Leave the line below if you'd like GitHub Copilot to generate a summary from your commit --> <!-- copilot:summary --> ### <samp>🤖 Generated by Copilot at 2edba98</samp> This pull request introduces a new monorepo package called `admin-x-design`, which contains components, design guidelines and documentation for building apps in Ghost Admin. It also moves some existing components and files from the deprecated `admin-x-settings` package to the new `admin-x-design` package, and updates some styles and rules to use TailwindCSS. The purpose of these changes is to improve the consistency, maintainability and usability of the Ghost Admin UI.
99 lines
1.9 KiB
CSS
99 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: 860px) {
|
|
.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;
|
|
}
|