586 lines
9.4 KiB
CSS
586 lines
9.4 KiB
CSS
/* Global Styles */
|
|
|
|
/* ========== CSS Reset ========== */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* ========== Theme Transition ========== */
|
|
|
|
html.theme-transition,
|
|
html.theme-transition *,
|
|
html.theme-transition *::before,
|
|
html.theme-transition *::after {
|
|
transition-property: color, background-color, border-color, box-shadow, fill, stroke;
|
|
transition-duration: 0.46s;
|
|
transition-timing-function: var(--ease-in-out);
|
|
}
|
|
|
|
/* 确保表格元素在 View Transition 期间不会创建独立的层叠上下文 */
|
|
html.theme-view-transition .ant-table-wrapper,
|
|
html.theme-view-transition .ant-table,
|
|
html.theme-view-transition .ant-table-container,
|
|
html.theme-view-transition .ant-table-content,
|
|
html.theme-view-transition .ant-table-sticky-holder {
|
|
contain: none !important;
|
|
isolation: auto !important;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html.theme-transition,
|
|
html.theme-transition *,
|
|
html.theme-transition *::before,
|
|
html.theme-transition *::after {
|
|
transition: none !important;
|
|
}
|
|
|
|
html.theme-view-transition::view-transition-old(root),
|
|
html.theme-view-transition::view-transition-new(root) {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
html.theme-view-transition::view-transition-old(root),
|
|
html.theme-view-transition::view-transition-new(root) {
|
|
mix-blend-mode: normal;
|
|
will-change: clip-path;
|
|
}
|
|
|
|
html.theme-view-transition::view-transition-old(root) {
|
|
animation: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
html.theme-view-transition::view-transition-new(root) {
|
|
animation: theme-clip-reveal 0.74s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
z-index: 9999;
|
|
}
|
|
|
|
html.theme-view-transition.dark::view-transition-old(root) {
|
|
animation: theme-clip-conceal 0.74s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
z-index: 9999;
|
|
}
|
|
|
|
html.theme-view-transition.dark::view-transition-new(root) {
|
|
animation: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes theme-clip-reveal {
|
|
from {
|
|
clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
|
|
}
|
|
to {
|
|
clip-path: circle(
|
|
var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y)
|
|
);
|
|
}
|
|
}
|
|
|
|
@keyframes theme-clip-conceal {
|
|
from {
|
|
clip-path: circle(
|
|
var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y)
|
|
);
|
|
}
|
|
to {
|
|
clip-path: circle(0 at var(--theme-transition-x) var(--theme-transition-y));
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-base);
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-layout);
|
|
}
|
|
|
|
/* ========== Typography ========== */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: var(--line-height-tight);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-4xl);
|
|
}
|
|
h2 {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
h3 {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
h4 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
h5 {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
h6 {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
line-height: var(--line-height-base);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
transition: color var(--duration-base);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-5);
|
|
}
|
|
|
|
/* ========== Lists ========== */
|
|
|
|
ul,
|
|
ol {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ========== Scrollbar ========== */
|
|
|
|
/* For Webkit browsers */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg-layout);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-border);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* For Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-border) var(--color-bg-layout);
|
|
}
|
|
|
|
/* ========== Utility Classes ========== */
|
|
|
|
/* Text Alignment */
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Text Colors */
|
|
.text-primary {
|
|
color: var(--color-text-primary);
|
|
}
|
|
.text-secondary {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.text-tertiary {
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
.text-success {
|
|
color: var(--color-success);
|
|
}
|
|
.text-warning {
|
|
color: var(--color-warning);
|
|
}
|
|
.text-error {
|
|
color: var(--color-error);
|
|
}
|
|
.text-info {
|
|
color: var(--color-info);
|
|
}
|
|
|
|
/* Font Weights */
|
|
.font-normal {
|
|
font-weight: var(--font-weight-normal);
|
|
}
|
|
.font-medium {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.font-semibold {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
.font-bold {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
/* Display */
|
|
.block {
|
|
display: block;
|
|
}
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.inline-flex {
|
|
display: inline-flex;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Flex Utilities */
|
|
.flex-row {
|
|
flex-direction: row;
|
|
}
|
|
.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.flex-nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
.justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
.justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
.justify-around {
|
|
justify-content: space-around;
|
|
}
|
|
.items-start {
|
|
align-items: flex-start;
|
|
}
|
|
.items-end {
|
|
align-items: flex-end;
|
|
}
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
.items-baseline {
|
|
align-items: baseline;
|
|
}
|
|
.items-stretch {
|
|
align-items: stretch;
|
|
}
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Spacing */
|
|
.m-0 {
|
|
margin: 0;
|
|
}
|
|
.mt-0 {
|
|
margin-top: 0;
|
|
}
|
|
.mr-0 {
|
|
margin-right: 0;
|
|
}
|
|
.mb-0 {
|
|
margin-bottom: 0;
|
|
}
|
|
.ml-0 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.p-0 {
|
|
padding: 0;
|
|
}
|
|
.pt-0 {
|
|
padding-top: 0;
|
|
}
|
|
.pr-0 {
|
|
padding-right: 0;
|
|
}
|
|
.pb-0 {
|
|
padding-bottom: 0;
|
|
}
|
|
.pl-0 {
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* Margin Spacing */
|
|
.m-xs {
|
|
margin: var(--spacing-xs);
|
|
}
|
|
.m-sm {
|
|
margin: var(--spacing-sm);
|
|
}
|
|
.m-md {
|
|
margin: var(--spacing-md);
|
|
}
|
|
.m-lg {
|
|
margin: var(--spacing-lg);
|
|
}
|
|
.m-xl {
|
|
margin: var(--spacing-xl);
|
|
}
|
|
|
|
.mt-xs {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
.mt-sm {
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
.mt-md {
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
.mt-lg {
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
.mt-xl {
|
|
margin-top: var(--spacing-xl);
|
|
}
|
|
|
|
.mb-xs {
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
.mb-sm {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
.mb-md {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
.mb-lg {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
.mb-xl {
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
/* Padding Spacing */
|
|
.p-xs {
|
|
padding: var(--spacing-xs);
|
|
}
|
|
.p-sm {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
.p-md {
|
|
padding: var(--spacing-md);
|
|
}
|
|
.p-lg {
|
|
padding: var(--spacing-lg);
|
|
}
|
|
.p-xl {
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
/* Width */
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
.w-auto {
|
|
width: auto;
|
|
}
|
|
|
|
/* Height */
|
|
.h-full {
|
|
height: 100%;
|
|
}
|
|
.h-auto {
|
|
height: auto;
|
|
}
|
|
.h-screen {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Border Radius */
|
|
.rounded-none {
|
|
border-radius: 0;
|
|
}
|
|
.rounded-sm {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.rounded {
|
|
border-radius: var(--radius-base);
|
|
}
|
|
.rounded-lg {
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.rounded-full {
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
/* Cursor */
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
.cursor-default {
|
|
cursor: default;
|
|
}
|
|
.cursor-not-allowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Position */
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
.absolute {
|
|
position: absolute;
|
|
}
|
|
.fixed {
|
|
position: fixed;
|
|
}
|
|
.sticky {
|
|
position: sticky;
|
|
}
|
|
|
|
/* Overflow */
|
|
.overflow-auto {
|
|
overflow: auto;
|
|
}
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
.overflow-visible {
|
|
overflow: visible;
|
|
}
|
|
.overflow-scroll {
|
|
overflow: scroll;
|
|
}
|
|
|
|
/* Transitions */
|
|
.transition-all {
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.transition-colors {
|
|
transition:
|
|
color var(--duration-base) var(--ease-out),
|
|
background-color var(--duration-base) var(--ease-out),
|
|
border-color var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.transition-transform {
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
/* ========== Card Component ========== */
|
|
|
|
.card {
|
|
background: var(--color-bg-container);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
border: 1px solid var(--color-border-secondary);
|
|
padding: var(--spacing-lg);
|
|
transition: all var(--duration-slow) var(--ease-out);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-card-hover);
|
|
}
|
|
|
|
/* ========== Page Container ========== */
|
|
|
|
.page-container {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.page-description {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ========== Loading States ========== */
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* ========== Empty States ========== */
|
|
|
|
.empty-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-3xl) var(--spacing-lg);
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 64px;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
/* ========== Responsive ========== */
|
|
|
|
@media (max-width: 768px) {
|
|
.page-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.card {
|
|
padding: var(--spacing-md);
|
|
}
|
|
}
|