Skip to content

Commit 80075c3

Browse files
miswantingmiswanting
committed
fix Theme
1 parent d5d06b4 commit 80075c3

6 files changed

Lines changed: 99 additions & 43 deletions

File tree

‎Next/FrontEnd/src/css/intro.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.container-intro {
2+
height: 100%;
3+
display: flex;
4+
background-color: var(--default-back);
5+
cursor: default;
6+
}
7+
.logo-banner {
8+
align-self: center;
9+
width: 100%;
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
.logo-group {
14+
align-self: center;
15+
}

‎Next/FrontEnd/src/css/theme.css‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,61 @@
1+
:root {
2+
--a: #030609;
3+
--b: #333639;
4+
--c: #636669;
5+
--d: #939699;
6+
--e: #c3c6c9;
7+
--f: #f3f6f9;
8+
}
19
.light-theme {
210
/* 静态 */
3-
--static-front: #000;
4-
--static-back: #fff;
11+
--static-front: #f3f6f9;
12+
--static-back: #030609;
13+
/* 不可用 */
14+
--disabled-front: #636669;
15+
--disabled-back: #333639;
516
/* 默认 */
6-
--default-front: #111;
7-
--default-back: #eee;
8-
/* 交互 */
9-
--react-front: #222;
10-
--react-back: #ddd;
17+
--default-front: #c3c6c9;
18+
--default-back: #333639;
19+
/* 可交互 */
20+
--react-front: #c3c6c9;
21+
--react-back: #434649;
1122
/* 悬停 */
12-
--hover-front: #333;
13-
--hover-back: #ccc;
23+
--hover-front: #333639;
24+
--hover-back: #c3c6c9;
1425
/* 激活 */
15-
--active-front: #444;
16-
--active-back: #bbb;
26+
--active-front: #030609;
27+
--active-back: #f3f6f9;
1728
}
1829
.dark-theme {
30+
/* 静态 */
31+
--static-front: #f3f6f9;
32+
--static-back: #030609;
33+
/* 不可用 */
34+
--disabled-front: #636669;
35+
--disabled-back: #333639;
36+
/* 默认 */
37+
--default-front: #c3c6c9;
38+
--default-back: #333639;
39+
/* 可交互 */
40+
--react-front: #c3c6c9;
41+
--react-back: #434649;
42+
/* 悬停 */
43+
--hover-front: #333639;
44+
--hover-back: #c3c6c9;
45+
/* 激活 */
46+
--active-front: #030609;
47+
--active-back: #f3f6f9;
48+
}
49+
50+
/* --active-light: #eaeaea;
51+
--hover-light: #cccccc;
52+
--react-light: #a5a5a5;
53+
--light: #d5d5d5;
54+
--active-dark: #202020;
55+
--hover-dark: #202020;
56+
--react-dark: #333333;
57+
--dark: #242424; */
58+
/* .dark-theme {
1959
--active-light: #eaeaea;
2060
--hover-light: #cccccc;
2161
--react-light: #a5a5a5;
@@ -24,4 +64,4 @@
2464
--hover-dark: #202020;
2565
--react-dark: #333333;
2666
--dark: #242424;
27-
}
67+
} */

‎Next/FrontEnd/src/css/window.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.window {
22
display: flex;
33
flex-direction: column;
4-
color: var(--light);
4+
color: var(--default-front);
55
cursor: default;
66
}
77

@@ -17,25 +17,25 @@
1717
}
1818
.header {
1919
text-align: center;
20-
color: var(--react-light);
20+
color: var(--default-front);
2121
}
2222
.menu-bar > span {
2323
padding: 0em 0.5em;
2424
text-align: center;
25-
background-color: var(--react-dark);
25+
background-color: var(--default-back);
2626
}
2727
.window-operator-bar > span {
2828
padding: 0em 0.5em;
2929
text-align: center;
30-
background-color: var(--react-dark);
30+
background-color: var(--default-back);
3131
}
3232
.menu:hover,
3333
.menu-add:hover {
34-
background-color: var(--hover-dark);
34+
background-color: var(--default-back);
3535
}
3636
.title {
3737
flex-grow: 1;
38-
background-color: var(--react-dark);
38+
background-color: var(--default-back);
3939
-webkit-app-region: drag;
4040
cursor: grab;
4141
}
@@ -44,30 +44,30 @@
4444
}
4545
.min:hover {
4646
color: lime;
47-
background-color: var(--hover-dark);
47+
background-color: var(--hover-back);
4848
}
4949
.max:hover {
5050
color: yellow;
51-
background-color: var(--hover-dark);
51+
background-color: var(--hover-back);
5252
}
5353
.close:hover {
5454
color: red;
55-
background-color: var(--hover-dark);
55+
background-color: var(--hover-back);
5656
}
5757

5858
.container {
5959
flex-grow: 1;
60-
background-color: var(--dark);
60+
background-color: var(--default-back);
6161
overflow-y: auto;
6262
}
6363

6464
.container::-webkit-scrollbar {
6565
width: 6px;
6666
}
6767
.container::-webkit-scrollbar-thumb {
68-
background: var(--react-dark);
68+
background: var(--react-back);
6969
border-radius: 3px;
7070
}
7171
.footer {
72-
background-color: var(--dark);
72+
background-color: var(--default-back);
7373
}

‎Next/FrontEnd/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<link rel="stylesheet" href="css/base.css">
1111
<link rel="stylesheet" href="css/theme.css">
1212
<link rel="stylesheet" href="css/window.css">
13+
<link rel="stylesheet" href="css/intro.css">
1314
<link rel="stylesheet" href="span-charm/span-charm.css">
1415
<!-- <link rel="stylesheet" href="span-charm/"> -->
1516
</head>

‎Next/FrontEnd/src/span-charm/span-charm.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ h2 {
2626
}
2727
.button {
2828
cursor: pointer;
29-
background-color: #434649;
29+
background-color: var(--react-back);
3030
}
3131
.button:hover {
32-
color: var(--dark-color);
33-
background-color: var(--light-color);
32+
color: var(--hover-front);
33+
background-color: var(--hover-back);
3434
}
3535
.link {
3636
cursor: pointer;
@@ -52,7 +52,7 @@ span.text.shake {
5252
.progress {
5353
position: relative;
5454
display: inline-block;
55-
background-color: gray;
55+
background-color: var(--react-back);
5656
vertical-align: middle;
5757
height: 1rem;
5858
margin: 0rem 0.2rem;
@@ -63,7 +63,7 @@ span.text.shake {
6363
}
6464
.progress > .bar {
6565
position: absolute;
66-
background-color: lime;
66+
background-color: var(--default-front);
6767
height: 100%;
6868
border-radius: 0.2rem;
6969
left: 0px;
@@ -77,9 +77,9 @@ span.text.shake {
7777
.input {
7878
height: 1rem;
7979
width: 100px;
80-
background-color: var(--react-dark);
80+
background-color: var(--react-back);
8181
border: none;
82-
color: var(--react-light);
82+
color: var(--react-front);
8383
margin: 0rem 0.2rem;
8484
}
8585
input:focus {
@@ -102,7 +102,7 @@ input:focus {
102102
position: absolute;
103103
bottom: 0rem;
104104
left: 0rem;
105-
background-color: var(--react-dark);
105+
background-color: var(--react-back);
106106
width: max-content;
107107
border: 0.5px solid gray;
108108
}
@@ -119,5 +119,5 @@ input:focus {
119119
flex-grow: 1;
120120
height: 1px;
121121
align-self: center;
122-
background-color: var(--light);
122+
background-color: var(--default-front);
123123
}

‎Next/FrontEnd/src/ui/intro.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -175,15 +175,15 @@ function AnimeIntro(props) {
175175
return (
176176
React.createElement('div',
177177
{
178-
style: { height: '100%', display: 'flex', backgroundColor: 'var(--dark)', cursor: 'default' }
178+
className: 'container-intro'
179179
},
180180
React.createElement('div',
181181
{
182-
style: { alignSelf: 'center', width: '100%', display: 'flex', flexDirection: 'column' }
182+
className: 'logo-banner'
183183
},
184184
React.createElement('div',
185185
{
186-
style: { alignSelf: 'center' }
186+
className: 'logo-group'
187187
},
188188
React.createElement('svg',
189189
{
@@ -200,7 +200,7 @@ function AnimeIntro(props) {
200200
{
201201
id: 'txt',
202202
style: { textAnchor: 'middle', fontWeight: 'bold', fontSize: '120px', transform: 'translateX(0px)translateY(47px)' },
203-
fill: 'var(--light)'
203+
fill: 'var(--default-front)'
204204
},
205205
'Era.js'
206206
),
@@ -211,7 +211,7 @@ function AnimeIntro(props) {
211211
y: '-140',
212212
width: '320px',
213213
height: '280px',
214-
fill: 'var(--dark)',
214+
fill: 'var(--default-back)',
215215
},
216216

217217
),
@@ -243,7 +243,7 @@ function AnimeIntro(props) {
243243
id: 'tri1',
244244
style: { opacity: 0 },
245245
points: "-50,-50 50,-50 -50,50",
246-
fill: 'var(--light)'
246+
fill: 'var(--default-front)'
247247
},
248248

249249
),
@@ -252,7 +252,7 @@ function AnimeIntro(props) {
252252
id: 'tri2',
253253
style: { opacity: 0 },
254254
points: "50,50 50,-50 -50,50",
255-
fill: 'var(--light)'
255+
fill: 'var(--default-front)'
256256
},
257257

258258
),
@@ -261,7 +261,7 @@ function AnimeIntro(props) {
261261
id: 'rect',
262262
style: { transform: 'scale(0.0)' },
263263
points: "-50,-50 50,-50 50,50 -50,50",
264-
fill: 'var(--light)'
264+
fill: 'var(--default-front)'
265265
},
266266

267267
)
@@ -271,14 +271,14 @@ function AnimeIntro(props) {
271271
React.createElement('div',
272272
{
273273
id: 'inst',
274-
style: { color: 'var(--light)', opacity: 0.0, textAlign: 'center' },
274+
style: { color: 'var(--default-front)', opacity: 0.0, textAlign: 'center' },
275275
},
276276

277277
'Waiting for Connection...',
278278
React.createElement('div',
279279
{
280280
id: 'inst-more',
281-
style: { color: 'var(--light)', opacity: 0.0, textAlign: 'center', fontSize: '0.7rem' },
281+
style: { color: 'var(--default-front)', opacity: 0.0, textAlign: 'center', fontSize: '0.7rem' },
282282
},
283283
React.createElement('span', null,
284284
'If there is no connection for a long time,',

0 commit comments

Comments
 (0)