Skip to content

Commit 98d3354

Browse files
ZhiFengJiajiazhifeng
ZhiFengJia
authored and
jiazhifeng
committed
feat:暗黑主题
1 parent e417766 commit 98d3354

File tree

2 files changed

+167
-40
lines changed

2 files changed

+167
-40
lines changed

‎remote-web/src/main/resources/static/WebIDE.html‎

Lines changed: 8 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -32,47 +32,15 @@
3232
integrity="sha512-GAled7oA9WlRkBaUQlUEgxm37hf43V2KEMaEiWlvBO/ueP2BLvBLKN5tIJu4VZOTwo6Z4XvrojYngoN9dJw2ug=="
3333
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
3434

35-
<style>
36-
a {
37-
color: rgb(205,205,205);
38-
}
39-
a:hover {
40-
color: rgb(61,64,67);
41-
}
42-
.nav-pills .show>.nav-link {
43-
color: #fff;
44-
background-color: rgb(61,64,67);
45-
}
46-
.nav-link, .nav-tabs .nav-link.active {
47-
color: #495057;
48-
background-color: rgb(61,64,67);
49-
border-color: #dee2e6 #dee2e6 #fff;
50-
}
51-
.nav .nav-tabs .card-header-tabs{
52-
background-color: rgb(32,33,36);
53-
}
54-
.form-control[readonly] {
55-
color: rgb(205,205,205);
56-
background-color: #0a0a0a;
57-
}
58-
.jstree-default .jstree-wholerow-clicked {
59-
background: rgb(13,41,42);
60-
}
61-
.dropdown-menu {
62-
background-color: rgb(32,33,36);
63-
}
64-
dropdown-item {
65-
color: rgb(205,205,205);
66-
}
67-
</style>
35+
<link rel="stylesheet" href="/css/darkly.css" />
6836

6937
<title>Web IDE</title>
7038
</head>
7139

72-
<body class="container-fluid" style="background-color: rgb(32,33,36);">
40+
<body class="container-fluid">
7341
<div class="row">
7442
<div class="col">
75-
<ul class="nav nav-pills">
43+
<ul class="nav nav-pills" style="border: 1px solid #000000;">
7644
<li class="nav-item dropdown">
7745
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
7846
aria-expanded="false">File</a>
@@ -125,7 +93,7 @@
12593
</li>
12694
</ul>
12795
</div>
128-
<div class="card-body overflow-auto" style="padding-right:0px;padding-left:0px;padding:0px;height: 600px;background-color: rgb(61,64,67);color: rgb(205,205,205);">
96+
<div class="card-body overflow-auto">
12997
<div id="jstree"></div>
13098
</div>
13199
</div>
@@ -159,7 +127,7 @@
159127
</div>
160128
</div>
161129
</div>
162-
<div class="row border">
130+
<div class="row">
163131
<div class="col" style="padding-right:0px;padding-left:0px;">
164132
<nav>
165133
<div class="nav nav-tabs" id="nav-tab" role="tablist">
@@ -169,10 +137,10 @@
169137
aria-controls="nav-terminal" aria-selected="false">Terminal</a>
170138
</div>
171139
</nav>
172-
<div class="tab-content" id="nav-tabContent" style="height: 200px;">
140+
<div class="tab-content" id="nav-tabContent">
173141
<div class="tab-pane fade show active" id="nav-console" role="tabpanel"
174142
aria-labelledby="nav-console-tab">
175-
<textarea id="console" class="form-control" style="height: 200px;" placeholder="控制台"
143+
<textarea id="console" class="form-control" placeholder="控制台"
176144
readonly></textarea>
177145
</div>
178146
<div class="tab-pane fade" id="nav-terminal" role="tabpanel" aria-labelledby="nav-terminal-tab">
@@ -244,7 +212,7 @@ <h5 class="modal-title" id="aboutModalLabel">项目简介</h5>
244212
lineNumbers: true,
245213
matchBrackets: true,
246214
indentUnit: 4,
247-
indentWithTabs: true,ambiance,blackboard
215+
indentWithTabs: true,
248216
});
249217
editor.setSize('auto', '600');
250218
editor.setOption("theme", 'darcula');

‎remote-web/src/main/resources/static/css/darkly.css‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
.card {
2+
position: relative;
3+
display: -ms-flexbox;
4+
display: flex;
5+
-ms-flex-direction: column;
6+
flex-direction: column;
7+
min-width: 0;
8+
word-wrap: break-word;
9+
background-color: rgb(32,33,36);
10+
background-clip: border-box;
11+
border: 0px;
12+
border-radius: 0.25rem;
13+
}
14+
.card-header {
15+
padding: 0rem;
16+
}
17+
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
18+
color: rgb(205,205,205);
19+
background-color: rgb(61,64,67);
20+
border-color: rgb(205,205,205);
21+
}
22+
.nav-tabs .nav-link {
23+
margin-bottom: 0px;
24+
border: 0px;
25+
}
26+
.nav-tabs {
27+
border-bottom: 0px;
28+
}
29+
body {
30+
margin: 0;
31+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
32+
font-size: 1rem;
33+
font-weight: 400;
34+
line-height: 1.5;
35+
color: rgb(205,205,205);
36+
text-align: left;
37+
background-color: rgb(32,33,36);
38+
}
39+
.form-control {
40+
display: block;
41+
width: 100%;
42+
height: calc(1.5em + 0.75rem + 2px);
43+
padding: 0.375rem 0.75rem;
44+
font-size: 1rem;
45+
font-weight: 400;
46+
line-height: 1.5;
47+
background-clip: padding-box;
48+
border: 1px solid #2b2b2b;
49+
border-radius: 0.25rem;
50+
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
51+
}
52+
.form-control:disabled, .form-control[readonly] {
53+
background-color: #2b2b2b;
54+
color: rgb(205,205,205);
55+
opacity: 1;
56+
height: 13.4rem;
57+
}
58+
a {
59+
color: rgb(205,205,205);
60+
text-decoration: none;
61+
background-color: transparent;
62+
}
63+
a:hover {
64+
color: #ffffff;
65+
text-decoration: underline;
66+
}
67+
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
68+
color: rgb(205,205,205);
69+
background-color: rgb(61,64,67);
70+
}
71+
.dropdown-menu {
72+
position: absolute;
73+
top: 100%;
74+
left: 0;
75+
z-index: 1000;
76+
display: none;
77+
float: left;
78+
min-width: 10rem;
79+
padding: 0.5rem 0;
80+
margin: 0.125rem 0 0;
81+
font-size: 1rem;
82+
color: rgb(205,205,205);
83+
text-align: left;
84+
list-style: none;
85+
background-color: rgb(32,33,36);
86+
background-clip: padding-box;
87+
border: 1px solid rgba(0,0,0,.15);
88+
border-radius: 0.25rem;
89+
}
90+
.dropdown-item:focus, .dropdown-item:hover {
91+
color: #ffffff;
92+
text-decoration: none;
93+
background-color: #beebff;
94+
}
95+
.dropdown-item {
96+
display: block;
97+
width: 100%;
98+
padding: 0.25rem 1.5rem;
99+
clear: both;
100+
font-weight: 400;
101+
color: rgb(205,205,205);
102+
text-align: inherit;
103+
white-space: nowrap;
104+
background-color: transparent;
105+
border: 0;
106+
}
107+
.card-body.overflow-auto {
108+
padding-right:0px;
109+
padding-left:0px;
110+
padding:0px;
111+
height: 600px;
112+
background-color: rgb(61,64,67);
113+
color: rgb(205,205,205);
114+
}
115+
.col{
116+
position: relative;
117+
width: 100%;
118+
padding-right: 0px;
119+
padding-left: 0px;
120+
}
121+
.card-header-tabs {
122+
margin-right: 0rem;
123+
margin-bottom: 0rem;
124+
margin-left: 0rem;
125+
border-bottom: 0rem;
126+
}
127+
.modal-content {
128+
position: relative;
129+
display: -ms-flexbox;
130+
display: flex;
131+
-ms-flex-direction: column;
132+
flex-direction: column;
133+
width: 100%;
134+
pointer-events: auto;
135+
background-color: rgb(61,64,67);
136+
color: rgb(205,205,205);
137+
background-clip: padding-box;
138+
border: 1px solid rgba(0,0,0,.2);
139+
border-radius: 0.3rem;
140+
outline: 0;
141+
}
142+
.close {
143+
float: right;
144+
font-size: 1.5rem;
145+
font-weight: 700;
146+
line-height: 1;
147+
color: #fff;
148+
text-shadow: 0 1px 0 #fff;
149+
opacity: .5;
150+
}
151+
152+
.jstree-default .jstree-wholerow-clicked {
153+
background: #beebff;
154+
background: -webkit-linear-gradient(top, #beebff 0, #a8e4ff 100%);
155+
background: linear-gradient(to bottom,rgb(0,0,0) 0, rgb(0,0,0) 100%);
156+
}
157+
.jstree-default .jstree-wholerow-hovered {
158+
background: rgb(32,33,36);
159+
}

0 commit comments

Comments
 (0)