Skip to content

Commit e884edd

Browse files
shengyuanshengyuan
committed
Add the style of stages and modify some style of index to fix bug
1 parent 1b66c77 commit e884edd

5 files changed

Lines changed: 229 additions & 9 deletions

File tree

‎css/egame-stages.css‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
body {
2+
background-color: #C6DDE0;
3+
}
4+
5+
header {
6+
width: 100%;
7+
height: 135px;
8+
min-width: 200px;
9+
background-image: none;
10+
position: relative;
11+
}
12+
13+
#banner-left {
14+
background-image: url(../media/egame/banner-left.png);
15+
background-size: 100% 100%;
16+
left: 0;
17+
position: absolute;
18+
width: 640px;
19+
height: 120px;
20+
}
21+
22+
#banner-middle {
23+
background-image: url(../media/egame/banner-middle.png);
24+
background-size: 20.39px 120px;
25+
background-repeat: repeat-x;
26+
left: 640px;
27+
position: absolute;
28+
width: calc(100% - 983.5px);
29+
height: 120px;
30+
}
31+
32+
#banner-right {
33+
background-image: url(../media/egame/banner-right.png);
34+
background-size: 100% 100%;
35+
right: 0;
36+
position: absolute;
37+
width: 343.5px;
38+
height: 120px;
39+
}
40+
41+
header > a {
42+
display: none;
43+
}
44+
45+
header > h1 {
46+
display: none
47+
}
48+
49+
.egame .blocklySvg {
50+
background-color: #C6DDE0;
51+
}
52+
53+
svg defs>pattern:last-child line {
54+
stroke: #DFEDF0;
55+
}
56+
57+
table.nav td.tabmax,
58+
table td.tabmin {
59+
background-color: #C6DDE0;
60+
}
61+
62+
.blocklyMainBackground {
63+
stroke-width: 0 !important;
64+
}
65+
66+
#tabRow {
67+
border: 1px solid #C6DDE0;
68+
}
69+
70+
#tabRow > td {
71+
border: 0px;
72+
}
73+
74+
table.nav {
75+
height: calc(100vh - 150px);
76+
}
77+
78+
#userMenu,
79+
#userMenu span {
80+
font-size: 18px;
81+
}
82+
83+
#userMenu {
84+
top: 40px;
85+
right: 77px;
86+
}
87+
88+
#userMenu a,
89+
#userMenu span,
90+
#languageMenu {
91+
color: #8CFFE8;
92+
}
93+
94+
.check,
95+
.linkButton:link,
96+
#check-device-online:hover,
97+
button#runButton:hover,
98+
#check-btn {
99+
color: #FFF;
100+
}
101+
102+
.linkButton,
103+
#check-device-online,
104+
#check-device-online:hover {
105+
background: #5EB2BF;
106+
}
107+
108+
.linkButton:hover,
109+
table.nav td.tabmax button:hover {
110+
color: #5EB2BF;
111+
}
112+
113+
table.nav td.tabmax button {
114+
background: #5EB2BF;
115+
color: #FFF;
116+
}
117+
118+
#input-device {
119+
background: #c6dde0;
120+
color: #008891;
121+
box-shadow: inset #5EB2BF 0 0 3px;
122+
}
123+
124+
.toolMenu div {
125+
color: #008891;
126+
}
127+
128+
.garden {
129+
width: 40vw;
130+
bottom: 0;
131+
right: 32%;
132+
position: absolute;
133+
pointer-events: none;
134+
user-select: none;
135+
}
136+
137+
table.nav td.tabon {
138+
background: #008891;
139+
color: #d9feff;
140+
border-bottom-color: #008891 !important;
141+
}
142+
143+
table.nav td {
144+
color: #008891;
145+
}
146+
147+
.blocklyToolboxDiv {
148+
background-color: #008891 !important;
149+
color: #d9feff !important;
150+
}
151+
152+
.blocklyTreeRow:hover {
153+
background-color: rgba(190, 231, 232, 0.5) !important;
154+
}
155+
156+
.blocklyToolboxDiv .blocklyTreeSelected {
157+
background-color: #DDFF63 !important;
158+
}
159+
160+
.blocklyTreeSelected .blocklyTreeLabel {
161+
color: #008891 !important;
162+
}
163+
164+
pre.content {
165+
border: 1px solid #008891;
166+
}
167+
168+
table.nav td.tabmax button.opened {
169+
background-color: #008891;
170+
}
171+
172+
#simulator-area {
173+
border: 10px solid #5eb2bf;
174+
top: 172px;
175+
}
176+
177+
.resize-area {
178+
background-image: url(../media/egame/resize-bar.png);
179+
}
180+
181+
table.nav td.tabmax button.opened:hover {
182+
color: #d9feff;
183+
}
184+
185+
.blocklyFlyoutBackground {
186+
fill: #A1C4CC !important;
187+
}
188+
189+
td#copyCode:after {
190+
background: #5eb2bf !important;
191+
color: #ffffff;
192+
}
193+
194+
td#copyCode:before {
195+
border-color: transparent rgb(94, 178, 191) transparent transparent;
196+
}
197+
198+
td#copyCode:hover:before {
199+
border-color: transparent rgb(94, 178, 191) transparent transparent;
200+
}
201+
202+
#cuteman01::before {
203+
background-color: #C6DDE0;
204+
width: calc(32vw - 40px);
205+
}
206+
207+
#demoArea {
208+
height: calc(100% - 181px);
209+
}

‎css/egame.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ svg defs>pattern:last-child line {
5454
stroke: #DFEDF0;
5555
}
5656

57-
table.nav td.tabmax, table td.tabmin {
57+
table.nav td.tabmax,
58+
table td.tabmin {
5859
background-color: #C6DDE0;
5960
}
6061

@@ -71,7 +72,7 @@ table.nav td.tabmax, table td.tabmin {
7172
}
7273

7374
table.nav {
74-
height: calc(100vh - 160px);
75+
height: calc(100vh - 150px);
7576
}
7677

7778
#userMenu,
@@ -90,6 +91,10 @@ table.nav {
9091
color: #8CFFE8;
9192
}
9293

94+
#userMenu a:first-child {
95+
display:none;
96+
}
97+
9398
.check,
9499
.linkButton:link,
95100
#check-device-online:hover,
@@ -125,17 +130,17 @@ table.nav td.tabmax button {
125130
}
126131

127132
.garden {
133+
width: 50vw;
128134
bottom: 0;
129135
right: 150px;
130136
position: absolute;
137+
pointer-events: none;
138+
user-select: none;
131139
}
132140

133141
table.nav td.tabon {
134142
background: #008891;
135143
color: #d9feff;
136-
}
137-
138-
td.tabon {
139144
border-bottom-color: #008891 !important;
140145
}
141146

@@ -148,15 +153,15 @@ table.nav td {
148153
color: #d9feff !important;
149154
}
150155

151-
.blocklyTreeRow.blocklyTreeRow:hover {
156+
.blocklyTreeRow:hover {
152157
background-color: rgba(190, 231, 232, 0.5) !important;
153158
}
154159

155-
.blocklyToolboxDiv .blocklyTreeSelected.blocklyTreeSelected {
160+
.blocklyToolboxDiv .blocklyTreeSelected {
156161
background-color: #DDFF63 !important;
157162
}
158163

159-
.blocklyTreeSelected.blocklyTreeSelected .blocklyTreeLabel {
164+
.blocklyTreeSelected .blocklyTreeLabel {
160165
color: #008891 !important;
161166
}
162167

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<link rel="stylesheet" href="css/style.css">
2121
<link rel="stylesheet" href="css/blockly.css">
2222
<link rel="stylesheet" href="css/dialog.css">
23-
<link rel="stylesheet" href="css/egame.css">
2423

2524
<script src="components/blockly-src/blockly_compressed.js"></script>
2625
<script src="components/blockly-src/blocks_compressed.js"></script>

‎views/index.handlebars‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<link rel="stylesheet" href="../css/egame.css">
2+
13
<header>
24
<div id="banner-left"></div>
35
<div id="banner-middle"></div>

‎views/stages.handlebars‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<link rel="stylesheet" href="../css/stages.css">
2+
<link rel="stylesheet" href="../css/egame-stages.css">
23
<script src="../js/stages.js"></script>
34

45
<header>
6+
<div id="banner-left"></div>
7+
<div id="banner-middle"></div>
8+
<div id="banner-right"></div>
59
<a href="index.html" title="Webduino Blockly"><img class="logo" src="media/logo.png"></a>
610
<h1>Webduino Blockly {{subTitle}}</h1>
711
<span>( <a href="index-stages{{#if_eq lang 'en'}}-en{{else if_eq lang 'zh-hans'}}-zh-hans{{/if_eq}}.html" target="_blank"><i class="icon-undo2"></i> {{backStagesIndex}}</a> )</span>
@@ -100,3 +104,4 @@
100104
<iframe id="simulator-frame" src="components/simulator/dist/index.html"></iframe>
101105
</div>
102106
</div>
107+
<img src="./../media/egame/garden.png" class="garden"></img>

0 commit comments

Comments
 (0)