Skip to content

Commit 961fc5d

Browse files
sudo-bclisudo-bcli
committed
modify & build for windows
1 parent b52aaec commit 961fc5d

File tree

4 files changed

+285
-281
lines changed

4 files changed

+285
-281
lines changed

‎assets/css/style.css‎

Lines changed: 184 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,184 @@
1-
/**
2-
CSS for our small web page (or interface if you like to call it in that way)
3-
@author bcli, Mar.25 2019
4-
@description I'm not using SASS now, since CSS3 would be just OK for this kind of small project
5-
to read more about CSS variables
6-
@see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
7-
**/
8-
9-
:root{
10-
--parent-width: 256px;
11-
--parent-color-bg: #ede091;
12-
--shrimp-width: 180px;
13-
--shrimp-img: url('../img/shrimp.png');
14-
--shrimp-img-with-file: url('../img/shrimp-with-file.png');
15-
--shrimp-rotate-deg: 360deg;
16-
--shrimp-trans-duration: 0.2s;
17-
--info-height: 32px;
18-
--dbg-border: none;
19-
--log-table-border: solid 1px #000000;
20-
--log-table-color: #dddddd;
21-
--log-table-color-bg-th: #4d4d4d;
22-
--log-table-color-bg-even: #e0d588;
23-
--log-table-color-bg-odd: #eede75;
24-
--log-table-color-bg-hover: #d8d8d8;
25-
--log-table-color-bg-error: #db7062;
26-
--reset-btn-width: 72px;
27-
--reset-btn-height: 36px;
28-
--loading-icon-color: #4d4d4d;
29-
--loading-icon-width: 64px;
30-
/* --border-dbg: solid #000000 1px;*/
31-
}
32-
33-
body{
34-
background-color: var(--parent-color-bg);
35-
}
36-
37-
#parent{
38-
padding-top: 10px;
39-
text-align: center;
40-
width: var(--parent-width);
41-
height: var(--parent-width);
42-
background-color: #ede091;
43-
font-family: monospace;
44-
}
45-
46-
*{
47-
box-sizing: border-box;
48-
}
49-
50-
.info-box{
51-
margin:0 auto;
52-
padding-top: 10px;
53-
height: var(--info-height);
54-
text-align: center;
55-
line-height: calc(var(--info-height) - 5px);
56-
width: calc(var(--parent-width) - 10px);
57-
border: var(--border-dbg);
58-
font-size: 20px;
59-
vertical-align: center;
60-
}
61-
62-
.info-box svg{
63-
top: 2px;
64-
position: relative;
65-
height: 20px;
66-
}
67-
68-
.shrimp-img{
69-
margin: 0 auto;
70-
height: var(--shrimp-width);
71-
width: var(--shrimp-width);
72-
border: var(--border-dbg);
73-
background: var(--shrimp-img);
74-
background-repeat: no-repeat;
75-
background-size: var(--shrimp-width) var(--shrimp-width);
76-
transform:rotate(calc(var(--shrimp-rotate-deg) * -1));
77-
transition-property: transform background;
78-
transition-duration: var(--shrimp-trans-duration);
79-
transition-timing-function: ease-in-out;
80-
}
81-
82-
.shrimp-img-with-file{
83-
margin: 0 auto;
84-
height: var(--shrimp-width);
85-
width: var(--shrimp-width);
86-
border: var(--border-dbg);
87-
background: var(--shrimp-img-with-file);
88-
background-repeat: no-repeat;
89-
background-size: var(--shrimp-width) var(--shrimp-width);
90-
transform:rotate(calc(var(--shrimp-rotate-deg)));
91-
transition-property: transform background;
92-
transition-duration: var(--shrimp-trans-duration);
93-
transition-timing-function: ease-in-out;
94-
}
95-
96-
.log-table{
97-
margin: 0 auto;
98-
display: none;
99-
text-align: left;
100-
padding: 10px 1px 5px 1px;
101-
margin-bottom: 64px;
102-
}
103-
104-
.log-table table:first-child{
105-
width: 246px;
106-
border: var(--border-log-table);
107-
}
108-
109-
.log-table table:first-child th{
110-
color: var(--log-table-color);
111-
background-color: var(--log-table-color-bg-th);
112-
}
113-
114-
.log-table table:first-child td,th{
115-
padding: 8px;
116-
}
117-
118-
.log-table table:first-child tr{
119-
cursor: pointer;
120-
}
121-
122-
.log-table table:first-child tr:nth-child(even){
123-
background-color: var(--log-table-color-bg-even);
124-
}
125-
126-
.log-table table:first-child tr:nth-child(odd){
127-
background-color: var(--log-table-color-bg-odd);
128-
}
129-
130-
.log-table table:first-child tr:hover{
131-
background-color: var(--log-table-color-bg-hover);
132-
}
133-
134-
.reset-btn{
135-
display: none;
136-
margin:0 auto;
137-
text-align: center;
138-
position: fixed;
139-
right: 5px;
140-
bottom: 5px;
141-
cursor: pointer;
142-
opacity: 0.7;
143-
transform:rotate(calc(var(--shrimp-rotate-deg) * -1));
144-
transition-property: opacity transform;
145-
transition-duration: var(--shrimp-trans-duration);
146-
transition-timing-function: ease-in-out;
147-
}
148-
149-
.reset-btn img{
150-
width: 72px;
151-
height: 72px;
152-
opacity: 0.8;
153-
}
154-
155-
.reset-btn:hover{
156-
opacity: 1;
157-
transform:rotate(calc(var(--shrimp-rotate-deg)));
158-
transition-property: opacity transform;
159-
transition-duration: var(--shrimp-trans-duration);
160-
transition-timing-function: ease-in-out;
161-
}
162-
163-
.icon-box{
164-
margin: 0 auto;
165-
padding-top: 15px;
166-
display: none;
167-
height: var(--loading-icon-width);
168-
width: var(--loading-icon-width);
169-
}
170-
171-
.icon-box svg{
172-
height: var(--loading-icon-width);
173-
width: var(--loading-icon-width);
174-
fill: var(--loading-icon-color);
175-
}
176-
177-
#loading-icon{
178-
display: none;
179-
}
180-
181-
#done-icon{
182-
display: none;
183-
}
184-
1+
/**
2+
CSS for our small web page (or interface if you like to call it in that way)
3+
@author bcli, Mar.25 2019
4+
@description I'm not using SASS now, since CSS3 would be just OK for this kind of small project
5+
to read more about CSS variables
6+
@see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
7+
**/
8+
9+
:root{
10+
--parent-width: 256px;
11+
--parent-color-bg: #ede091;
12+
--shrimp-width: 180px;
13+
--shrimp-img: url('../img/shrimp.png');
14+
--shrimp-img-with-file: url('../img/shrimp-with-file.png');
15+
--shrimp-rotate-deg: 360deg;
16+
--shrimp-trans-duration: 0.2s;
17+
--info-height: 32px;
18+
--dbg-border: none;
19+
--log-table-border: solid 1px #000000;
20+
--log-table-color: #dddddd;
21+
--log-table-color-bg-th: #4d4d4d;
22+
--log-table-color-bg-even: #e0d588;
23+
--log-table-color-bg-odd: #eede75;
24+
--log-table-color-bg-hover: #d8d8d8;
25+
--log-table-color-bg-error: #db7062;
26+
--reset-btn-width: 72px;
27+
--reset-btn-height: 36px;
28+
--loading-icon-color: #4d4d4d;
29+
--loading-icon-width: 64px;
30+
/* --border-dbg: solid #000000 1px;*/
31+
}
32+
33+
body{
34+
background-color: var(--parent-color-bg);
35+
}
36+
37+
#parent{
38+
padding-top: 10px;
39+
text-align: center;
40+
width: var(--parent-width);
41+
height: var(--parent-width);
42+
background-color: #ede091;
43+
font-family: monospace;
44+
}
45+
46+
*{
47+
box-sizing: border-box;
48+
}
49+
50+
.info-box{
51+
margin:0 auto;
52+
padding-top: 10px;
53+
height: var(--info-height);
54+
text-align: center;
55+
line-height: calc(var(--info-height) - 5px);
56+
width: calc(var(--parent-width) - 10px);
57+
border: var(--border-dbg);
58+
font-size: 20px;
59+
vertical-align: center;
60+
}
61+
62+
.info-box svg{
63+
top: 2px;
64+
position: relative;
65+
height: 20px;
66+
}
67+
68+
.shrimp-img{
69+
margin: 0 auto;
70+
height: var(--shrimp-width);
71+
width: var(--shrimp-width);
72+
border: var(--border-dbg);
73+
background: var(--shrimp-img);
74+
background-repeat: no-repeat;
75+
background-size: var(--shrimp-width) var(--shrimp-width);
76+
transform:rotate(calc(var(--shrimp-rotate-deg) * -1));
77+
transition-property: transform background;
78+
transition-duration: var(--shrimp-trans-duration);
79+
transition-timing-function: ease-in-out;
80+
}
81+
82+
.shrimp-img-with-file{
83+
margin: 0 auto;
84+
height: var(--shrimp-width);
85+
width: var(--shrimp-width);
86+
border: var(--border-dbg);
87+
background: var(--shrimp-img-with-file);
88+
background-repeat: no-repeat;
89+
background-size: var(--shrimp-width) var(--shrimp-width);
90+
transform:rotate(calc(var(--shrimp-rotate-deg)));
91+
transition-property: transform background;
92+
transition-duration: var(--shrimp-trans-duration);
93+
transition-timing-function: ease-in-out;
94+
}
95+
96+
.log-table{
97+
margin: 0 auto;
98+
display: none;
99+
text-align: left;
100+
padding: 10px 1px 5px 1px;
101+
margin-bottom: 64px;
102+
}
103+
104+
.log-table table:first-child{
105+
width: 280px;
106+
border: var(--border-log-table);
107+
}
108+
109+
.log-table table:first-child th{
110+
color: var(--log-table-color);
111+
background-color: var(--log-table-color-bg-th);
112+
}
113+
114+
.log-table table:first-child td,th{
115+
padding: 8px;
116+
}
117+
118+
.log-table table:first-child tr{
119+
cursor: pointer;
120+
}
121+
122+
.log-table table:first-child tr:nth-child(even){
123+
background-color: var(--log-table-color-bg-even);
124+
}
125+
126+
.log-table table:first-child tr:nth-child(odd){
127+
background-color: var(--log-table-color-bg-odd);
128+
}
129+
130+
.log-table table:first-child tr:hover{
131+
background-color: var(--log-table-color-bg-hover);
132+
}
133+
134+
.reset-btn{
135+
display: none;
136+
margin:0 auto;
137+
text-align: center;
138+
position: fixed;
139+
right: 5px;
140+
bottom: 5px;
141+
cursor: pointer;
142+
opacity: 0.7;
143+
transform:rotate(calc(var(--shrimp-rotate-deg) * -1));
144+
transition-property: opacity transform;
145+
transition-duration: var(--shrimp-trans-duration);
146+
transition-timing-function: ease-in-out;
147+
}
148+
149+
.reset-btn img{
150+
width: 72px;
151+
height: 72px;
152+
opacity: 0.8;
153+
}
154+
155+
.reset-btn:hover{
156+
opacity: 1;
157+
transform:rotate(calc(var(--shrimp-rotate-deg)));
158+
transition-property: opacity transform;
159+
transition-duration: var(--shrimp-trans-duration);
160+
transition-timing-function: ease-in-out;
161+
}
162+
163+
.icon-box{
164+
margin: 0 auto;
165+
padding-top: 15px;
166+
display: none;
167+
height: var(--loading-icon-width);
168+
width: var(--loading-icon-width);
169+
}
170+
171+
.icon-box svg{
172+
height: var(--loading-icon-width);
173+
width: var(--loading-icon-width);
174+
fill: var(--loading-icon-color);
175+
}
176+
177+
#loading-icon{
178+
display: none;
179+
}
180+
181+
#done-icon{
182+
display: none;
183+
}
184+

‎assets/icon/shrimp_win.ico‎

28.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)