bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update css

Browse Source
This commit is contained in:
vben
2024-06-23 14:21:27 +08:00
parent 6f0c05dd50
commit 26b8c6ef27
49 changed files with 401 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/@core/shared/design-tokens/src/dark/index.css
View File

@@ -1,76 +1,68 @@
:root.dark {
/* 基础背景颜色颜色 */
/* Default background color of <body />...etc */
--background: 220deg 13.04% 8%;
--foreground: 220 13% 91%;
--color-background: 220deg 13.04% 8%;
/* Background color for <Card /> */
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
/* 基础文本颜色 */
--color-foreground: 220 13% 91%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 222.86deg 8.43% 16.27%;
--popover-foreground: 210 40% 98%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 220deg 6.82% 17.25%;
--muted-foreground: 215 20.2% 65.1%;
/* 主题颜色 */
--color-primary: 211 91% 39%;
--primary: 211 91% 39%;
--primary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-primary-foreground: 0 0 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 63% 31%;
--destructive-foreground: 0 0 98%;
/* Used for success actions such as <message> */
--success: 144 57% 58%;
--success-foreground: 0 0 98%;
/* Used for warning actions such as <message> */
--warning: 42 84% 61%;
--warning-foreground: 0 0 98%;
/* 颜色次要 */
--color-secondary: 240 5% 17%;
--secondary: 240 5% 17%;
--secondary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-secondary-foreground: 0 0 98%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 0deg 0% 100% / 8%;
--accent-hover: 0deg 0% 100% / 12%;
--accent-foreground: 0 0 98%;
/* 次要文本颜色 */
--color-secondary-desc: 210 12.16% 70.98%;
/* Darker color */
--heavy: 0deg 0% 100% / 12%;
--heavy-foreground: var(--accent-foreground);
/* 普通颜色 */
/* Default border color */
--border: 0deg 0% 100% / 10%;
/* --color-accent: 240 3.7% 15.9%; */
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;
--input-placeholder: 218deg 11% 65%;
--input-background: 0deg 0% 100% / 5%;
/* --color-accent: 220deg 7.32% 16.08%; */
--color-accent: 0deg 0% 100% / 8%;
--color-accent-hover: 0deg 0% 100% / 12%;
/* 普通颜色前景色，如按钮文本颜色 */
--color-accent-foreground: 0 0 98%;
/* 破坏性颜色 */
--color-destructive: 0 63% 31%;
/* 破坏性颜色 */
--color-destructive-foreground: 0 86% 97%;
--color-muted: 220deg 6.82% 17.25%;
--color-muted-foreground: 215 20.2% 65.1%;
--color-heavy: 0deg 0% 100% / 12%;
--color-heavy-foreground: var(--color-accent-foreground);
/* 基础边框色 */
--color-border: 0deg 0% 100% / 10%;
/* --color-popover: 240 4% 29%; */
--color-popover: 222.86deg 8.43% 16.27%;
--color-popover-foreground: 210 40% 98%;
--color-card: 222.2 84% 4.9%;
--color-card-foreground: 210 40% 98%;
/* 基础文本边框色 */
--color-input: 0deg 0% 100% / 10%;
/* input placeholder 颜色 */
--color-input-placeholder: 218deg 11% 65%;
/* 基础文本背景色 */
/* --color-input-background: 216deg 5.38% 18.24%; */
--color-input-background: 0deg 0% 100% / 5%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 遮罩颜色 */
--color-overlay: 0deg 0% 0% / 40%;
--color-ring: 222.2 84% 4.9%;
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius-base: 0.5rem;
--radius: 0.5rem;
color-scheme: dark;
}

116
packages/@core/shared/design-tokens/src/default/index.css
View File

@@ -1,86 +1,86 @@
/* https://gavin-yyc.github.io/colorconvert/ */
:root {
--color-background: 0 0 100%;
/* Default background color of <body />...etc */
--background: 0 0 100%;
--foreground: 210 6% 21%;
/* 基础文本颜色 */
--color-foreground: 210 6% 21%;
/* Background color for <Card /> */
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
/* 主题颜色 */
--color-primary: 211 91% 39%;
--primary: 211 91% 39%;
--primary-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-primary-foreground: 0 0 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive: 0 78% 68%;
--destructive-foreground: 0 0 98%;
/* 颜色次要 */
--color-secondary: 240 5% 96%;
/* Used for success actions such as <message> */
--success: 144 57% 58%;
--success-foreground: 0 0 98%;
/* 前景色，如按钮文本颜色 */
--color-secondary-foreground: 240 6% 10%;
/* Used for warning actions such as <message> */
--warning: 42 84% 61%;
--warning-foreground: 0 0 98%;
/* 次要文本颜色 */
--color-secondary-desc: 216.4 16.09% 34.12%;
/* Secondary colors for <Button /> */
--secondary: 240 5% 96%;
--secondary-foreground: 240 6% 10%;
/* 普通颜色 */
--color-accent: 240 5% 96%;
--color-accent-hover: 200deg 10% 90%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 240 5% 96%;
--accent-hover: 200deg 10% 90%;
--accent-foreground: 240 6% 10%;
/* 普通颜色前景色，如按钮文本颜色 */
--color-accent-foreground: 240 6% 10%;
/* Darker color */
--heavy: 192deg 9.43% 89.61%;
--heavy-foreground: var(--accent-foreground);
/* 破坏性颜色 */
--color-destructive: 0 77.78% 68.24%;
/* Default border color */
--border: 240 6% 90%;
/* 破坏性颜色 */
--color-destructive-foreground: 0 0 98%;
--color-muted: 210 40% 96.1%;
--color-muted-foreground: 215.4 16.3% 46.9%;
--color-heavy: 192deg 9.43% 89.61%;
--color-heavy-foreground: var(--color-accent-foreground);
--color-popover: 0 0% 100%;
--color-popover-foreground: 222.2 84% 4.9%;
--color-card: 0 0% 100%;
--color-card-foreground: 222.2 84% 4.9%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0 100%;
/* 基础边框色 */
--color-border: 240 6% 90%;
/* 基础文本边框色 */
--color-input: 240deg 5.88% 90%;
/* input placeholder 颜色 */
--color-input-placeholder: 217 10.6% 65%;
/* 基础文本背景色 */
--color-input-background: 0 0 100%;
--color-ring: 222.2 84% 4.9%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* 遮罩颜色 */
--color-overlay: 0deg 0% 0% / 40%;
/* dark */
--color-dark-foreground: 220 13% 91%;
--color-dark-border: 0deg 0% 100% / 10%;
--color-dark-accent: 0deg 0% 100% / 8%;
--color-dark-accent-hover: 0deg 0% 100% / 12%;
--overlay: 0deg 0% 0% / 40%;
/* 基本文字大小 */
--font-size-base: 16px;
/* 基本圆角大小 */
--radius-base: 0.5rem;
/* Border radius for card, input and buttons */
--radius: 0.5rem;
/* ======================================== */
/* 用于浅色主题下一些暗色主题的颜色 */
--dark-foreground: 220 13% 91%;
--dark-border: 0deg 0% 100% / 10%;
--dark-accent: 0deg 0% 100% / 8%;
--dark-accent-hover: 0deg 0% 100% / 12%;
/* =============component & UI============= */
/* ======================================== */
/* menu */
--color-menu-dark: 225deg 12% 13%;
--color-menu-dark-darken: 223deg 11% 10%;
--color-menu: 0deg 0% 100%;
--color-menu-darken: 0deg 0% 95%;
--menu: 0deg 0% 100%;
--menu-darken: 0deg 0% 95%;
accent-color: var(--color-primary);
/* menu-dark */
--menu-dark: 225deg 12% 13%;
--menu-dark-darken: 223deg 11% 10%;
accent-color: var(--primary);
color-scheme: light;
}

327
packages/@core/shared/design/src/index.css
View File

@@ -1,327 +0,0 @@
@charset "UTF-8";
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
#app,
.ant-app,
body,
html {
width: 100%;
height: 100%;
overscroll-behavior: none;
}
*,
::after,
::before {
@apply border-border;
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
body.invert-mode {
@apply invert;
}
body.grayscale-mode {
@apply grayscale;
}
html {
@apply text-foreground bg-background;
font-variation-settings: normal;
text-size-adjust: 100%;
font-synthesis-weight: none;
scroll-behavior: smooth;
text-rendering: optimizelegibility;
-webkit-tap-highlight-color: transparent;
}
a,
a:active,
a:hover,
a:link,
a:visited {
color: inherit;
text-decoration: none;
}
::view-transition-new(root),
::view-transition-old(root) {
mix-blend-mode: normal;
animation: none;
}
::view-transition-old(root) {
z-index: 1;
}
::view-transition-new(root) {
z-index: 2147483646;
}
html.dark::view-transition-old(root) {
z-index: 2147483646;
}
html.dark::view-transition-new(root) {
z-index: 1;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
}
input:-webkit-autofill {
border: none;
box-shadow: 0 0 0 1000px transparent inset;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
.slide-up-enter-active,
.slide-up-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-up-move {
transition: transform 0.3s;
}
.slide-up-enter-from,
.slide-up-leave-to {
opacity: 0;
transform: translateY(-15px);
}
.slide-down-enter-active,
.slide-down-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-down-move {
transition: transform 0.3s;
}
.slide-down-enter-from,
.slide-down-leave-to {
opacity: 0;
transform: translateY(15px);
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-left-move {
transition: transform 0.3s;
}
.slide-left-enter-from,
.slide-left-leave-to {
opacity: 0;
transform: translateX(-15px);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.slide-right-move {
transition: transform 0.3s;
}
.slide-right-enter-from,
.slide-right-leave-to {
opacity: 0;
transform: translateX(15px);
}
.fade-transition-enter-active,
.fade-transition-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-transition-enter-from,
.fade-transition-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
transition: all 0.3s;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(30px);
}
.fade-down-enter-active,
.fade-down-leave-active {
transition:
opacity 0.25s,
transform 0.3s;
}
.fade-down-enter-from {
opacity: 0;
transform: translateY(-10%);
}
.fade-down-leave-to {
opacity: 0;
transform: translateY(10%);
}
.fade-scale-leave-active,
.fade-scale-enter-active {
transition: all 0.28s;
}
.fade-scale-enter-from {
opacity: 0;
transform: scale(1.2);
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.8);
}
.fade-up-enter-active,
.fade-up-leave-active {
transition:
opacity 0.2s,
transform 0.25s;
}
.fade-up-enter-from {
opacity: 0;
transform: translateY(10%);
}
.fade-up-leave-to {
opacity: 0;
transform: translateY(-10%);
}
@keyframes fade-slide {
0% {
opacity: 0;
transform: translateX(-30px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(30px);
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-10%);
}
}
@keyframes fade-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(10%);
}
}
.fade-slow {
animation: fade 3s infinite;
}
.fade-slide-slow {
animation: fade-slide 3s infinite;
}
.fade-up-slow {
animation: fade-up 3s infinite;
}
.fade-down-slow {
animation: fade-down 3s infinite;
}
.collapse-transition {
transition:
0.2s height ease-in-out,
0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}
.collapse-transition-leave-active,
.collapse-transition-enter-active {
transition:
0.2s max-height ease-in-out,
0.2s padding-top ease-in-out,
0.2s margin-top ease-in-out;
}