Feat(Theme): Support dark mode
This commit is contained in:
@@ -1,52 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
gap: 10px;
|
||||
width: 0;
|
||||
|
||||
.title {
|
||||
flex: 0 0 auto;
|
||||
height: 40px;
|
||||
|
||||
> * {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.6em;
|
||||
color: @production-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.config {
|
||||
.configContent {
|
||||
padding: 20px;
|
||||
|
||||
.createBt {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.noPreview {
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/assets/css/pages/tools/create.style.ts
Normal file
52
src/assets/css/pages/tools/create.style.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
|
||||
'> *': {
|
||||
gap: 10,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
flex: '0 0 auto',
|
||||
height: 40,
|
||||
|
||||
'> *': {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: token.fontSizeXL,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
}
|
||||
},
|
||||
|
||||
config: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
createBt: {
|
||||
width: '100%',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
|
||||
preview: {
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
},
|
||||
|
||||
noPreview: {
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeLG,
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
}))
|
||||
@@ -1,36 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.rootContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> * {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.draggableMask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggableContent {
|
||||
position: fixed;
|
||||
inset-inline-end: 48px;
|
||||
inset-block-end: 48px;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
inset-inline-end: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
40
src/assets/css/pages/tools/edit.style.ts
Normal file
40
src/assets/css/pages/tools/edit.style.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
rootBox: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
content: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
'> *': {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
draggableMask: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
|
||||
draggableContent: {
|
||||
position: 'fixed',
|
||||
insetInlineEnd: 48,
|
||||
insetBlockEnd: 48,
|
||||
|
||||
'> *': {
|
||||
position: 'relative',
|
||||
insetInlineEnd: 0,
|
||||
insetBlockEnd: 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,54 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
.ownContent {
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
& > :first-child {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.favoriteDivider {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
:first-child, :last-child {
|
||||
height: 0;
|
||||
border: 1px dashed @divide-color;
|
||||
}
|
||||
|
||||
.dividerText {
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.2em;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.starContent {
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
src/assets/css/pages/tools/index.style.ts
Normal file
45
src/assets/css/pages/tools/index.style.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20
|
||||
},
|
||||
|
||||
ownContent: {
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
favoriteDivider: {
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
marginTop: 20,
|
||||
|
||||
'> :first-child, > :last-child': {
|
||||
height: 0,
|
||||
border: `1px dashed ${token.colorSplit}`
|
||||
}
|
||||
},
|
||||
|
||||
dividerText: {
|
||||
flex: '0 0 auto !important',
|
||||
fontSize: '1.2em',
|
||||
color: token.colorTextSecondary
|
||||
},
|
||||
|
||||
starContent: {
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'flex-start',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,8 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
12
src/assets/css/pages/tools/source.style.ts
Normal file
12
src/assets/css/pages/tools/source.style.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}
|
||||
}))
|
||||
@@ -1,43 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
.search {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
> * {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
}
|
||||
|
||||
.rootContent {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.4em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
src/assets/css/pages/tools/store.style.ts
Normal file
41
src/assets/css/pages/tools/store.style.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
search: {
|
||||
display: 'flex',
|
||||
position: 'sticky',
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
top: 20,
|
||||
zIndex: 10,
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.3s ease',
|
||||
|
||||
'> *': {
|
||||
width: '80%'
|
||||
}
|
||||
},
|
||||
|
||||
hide: {
|
||||
transform: 'translateY(-60px)'
|
||||
},
|
||||
|
||||
root: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.4em',
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,79 +0,0 @@
|
||||
@import "@/assets/css/constants";
|
||||
|
||||
.root {
|
||||
padding: 80px 20px 20px 20px;
|
||||
|
||||
.rootBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
align-items: center;
|
||||
min-width: 900px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
> .info {
|
||||
margin-left: 40px;
|
||||
transform: translateY(-40px);
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.avatarBox {
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.avatar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.infoName {
|
||||
margin: 20px 0 0 24px;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 2.4em;
|
||||
font-weight: bolder;
|
||||
color: @production-color;
|
||||
}
|
||||
|
||||
.url {
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
width: 180px;
|
||||
min-height: 290px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.noTool {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
color: @font-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/assets/css/pages/tools/user.style.ts
Normal file
82
src/assets/css/pages/tools/user.style.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(({ token }) => ({
|
||||
root: {
|
||||
padding: '80px 20px 20px 20px'
|
||||
},
|
||||
|
||||
content: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
alignItems: 'center',
|
||||
minWidth: 900,
|
||||
paddingBottom: 20
|
||||
},
|
||||
|
||||
info: {
|
||||
marginLeft: 40,
|
||||
transform: 'translateY(-40px)',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto !important'
|
||||
}
|
||||
},
|
||||
|
||||
avatarBox: {
|
||||
backgroundColor: token.colorBgLayout,
|
||||
padding: 4,
|
||||
borderRadius: '50%',
|
||||
boxShadow: token.boxShadow
|
||||
},
|
||||
|
||||
avatar: {
|
||||
backgroundColor: 'transparent !important'
|
||||
},
|
||||
|
||||
infoName: {
|
||||
margin: '20px 0 0 20px',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> *': {
|
||||
flex: '0 0 auto'
|
||||
}
|
||||
},
|
||||
|
||||
nickname: {
|
||||
fontSize: token.fontSizeHeading2,
|
||||
fontWeight: 'bolder',
|
||||
color: token.colorPrimary
|
||||
},
|
||||
|
||||
url: {
|
||||
cursor: 'pointer',
|
||||
|
||||
'> span': {
|
||||
marginLeft: 8
|
||||
}
|
||||
},
|
||||
|
||||
tools: {
|
||||
padding: 20,
|
||||
gap: 20,
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
|
||||
'> div': {
|
||||
flex: '0 0 auto',
|
||||
|
||||
'> div': {
|
||||
backgroundColor: token.colorBgLayout
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
noTool: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 20,
|
||||
fontSize: token.fontSizeLG,
|
||||
color: token.colorTextSecondary
|
||||
}
|
||||
}))
|
||||
@@ -1,9 +0,0 @@
|
||||
.root {
|
||||
padding: 20px;
|
||||
|
||||
.rootBox {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
13
src/assets/css/pages/tools/view.style.ts
Normal file
13
src/assets/css/pages/tools/view.style.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { createStyles } from 'antd-style'
|
||||
|
||||
export default createStyles(() => ({
|
||||
root: {
|
||||
padding: 20
|
||||
},
|
||||
|
||||
content: {
|
||||
position: 'relative',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
}))
|
||||
Reference in New Issue
Block a user