Skip to content

Commit 683fde4

Browse files
oddengineoddengine
committed
v2.5.02 - Player is now open-sourced completely.
1 parent a075d59 commit 683fde4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+13424
-0
lines changed

‎example/nes/css/basic.css

Lines changed: 1086 additions & 0 deletions
Large diffs are not rendered by default.

‎example/nes/css/odd.nes.classic.css

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
.nes-flex {
2+
display: flex !important;
3+
}
4+
5+
.nes-wrapper {
6+
width: 100%;
7+
height: 100%;
8+
color: white;
9+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
10+
background: black;
11+
position: relative;
12+
overflow: hidden;
13+
}
14+
15+
.nes-wrapper * {
16+
margin: 0px;
17+
padding: 0px;
18+
/* font-family: Microsoft YaHei, Arial, sans-serif; */
19+
font-size: 14px;
20+
font-weight: normal;
21+
box-sizing: content-box;
22+
}
23+
24+
.nes-ui-classic .nes-tooltip {
25+
padding: 8px 12px 6px;
26+
font-size: 10px;
27+
line-height: 10px;
28+
border-radius: 2px;
29+
background: #454545;
30+
left: 0px;
31+
position: absolute;
32+
cursor: default;
33+
pointer-events: none;
34+
visibility: hidden;
35+
}
36+
37+
@media(hover:hover) {
38+
.nes-ui-classic *:hover>.nes-tooltip {
39+
visibility: visible;
40+
}
41+
}
42+
43+
.nes-ui-classic *:active>.nes-tooltip {
44+
visibility: visible;
45+
}
46+
47+
.nes-ui-classic .nes-button {
48+
position: relative;
49+
text-align: center;
50+
white-space: nowrap;
51+
background-repeat: no-repeat;
52+
background-position: center;
53+
cursor: pointer;
54+
-webkit-user-select: none;
55+
-moz-user-select: none;
56+
-o-user-select: none;
57+
user-select: none;
58+
}
59+
60+
@media screen and (orientation: portrait) {
61+
.nes-ui-classic .nes-content {
62+
width: 100%;
63+
height: 93.75vw;
64+
}
65+
}
66+
67+
@media screen and (orientation: landscape) {
68+
.nes-ui-classic .nes-content {
69+
margin: 0 auto;
70+
width: 106.66vh;
71+
height: 100%;
72+
}
73+
}
74+
75+
.nes-ui-classic .nes-content canvas {
76+
width: 100%;
77+
height: 100%;
78+
}
79+
80+
.nes-ui-classic .nes-controlbar {
81+
width: 100%;
82+
height: 60%;
83+
bottom: 0px;
84+
position: absolute;
85+
display: block;
86+
}
87+
88+
.nes-ui-classic .nes-controlbar>div {
89+
width: 100%;
90+
height: 100%;
91+
position: relative;
92+
display: flex;
93+
}
94+
95+
.nes-ui-classic .nes-controlbar .nes-left,
96+
.nes-ui-classic .nes-controlbar .nes-center,
97+
.nes-ui-classic .nes-controlbar .nes-right {
98+
align-self: flex-end;
99+
display: flex;
100+
}
101+
102+
.nes-ui-classic .nes-controlbar .nes-left,
103+
.nes-ui-classic .nes-controlbar .nes-right {
104+
flex-grow: 0;
105+
}
106+
107+
.nes-ui-classic .nes-controlbar .nes-left {
108+
height: 100%;
109+
}
110+
111+
.nes-ui-classic .nes-controlbar .nes-center,
112+
.nes-ui-classic .nes-controlbar .nes-right {
113+
height: 60%;
114+
}
115+
116+
.nes-ui-classic .nes-controlbar .nes-center {
117+
justify-content: flex-end;
118+
flex: 1 1;
119+
}
120+
121+
.nes-ui-classic .nes-controlbar .nes-center>*,
122+
.nes-ui-classic .nes-controlbar .nes-right>* {
123+
align-self: center;
124+
}
125+
126+
.nes-ui-classic .nes-controlbar .nes-center>* {
127+
height: 40px;
128+
}
129+
130+
.nes-ui-classic .nes-controlbar .nes-left>*>.nes-tooltip,
131+
.nes-ui-classic .nes-controlbar .nes-center>*>.nes-tooltip,
132+
.nes-ui-classic .nes-controlbar .nes-right>*>.nes-tooltip {
133+
bottom: 41px;
134+
}
135+
136+
.nes-ui-classic .nes-controlbar .nes-joystick {
137+
width: 60vh;
138+
border: 1px solid #3cafab;
139+
border-radius: 50%;
140+
box-sizing: border-box;
141+
position: relative;
142+
}
143+
144+
.nes-ui-classic .nes-controlbar .nes-button.mute,
145+
.nes-ui-classic[muted="true"] .nes-controlbar .nes-button.mute,
146+
.nes-ui-classic[muted="false"] .nes-controlbar .nes-button.unmute {
147+
display: none;
148+
}
149+
150+
.nes-ui-classic[muted="false"] .nes-controlbar .nes-button.mute {
151+
display: block;
152+
}
153+
154+
.nes-ui-classic .nes-controlbar .nes-button.reload {
155+
margin-right: 2px;
156+
width: 30px;
157+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%23E6E6E6" class="icon" viewBox="0 0 1024 1024"><path d="M511.674151 1024a450.164985 450.164985 0 0 1-11.516202-900.178042V0.364629l184.380771 163.809614-184.380771 163.809615V205.711573a368.305757 368.305757 0 1 0 380.30813 367.910742h82.041544A451.046172 451.046172 0 0 1 511.674151 1024z"/></svg>');
158+
}
159+
160+
@media(hover:hover) {
161+
.nes-ui-classic .nes-controlbar .nes-button.reload:hover {
162+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%2300AAEE" class="icon" viewBox="0 0 1024 1024"><path d="M511.674151 1024a450.164985 450.164985 0 0 1-11.516202-900.178042V0.364629l184.380771 163.809614-184.380771 163.809615V205.711573a368.305757 368.305757 0 1 0 380.30813 367.910742h82.041544A451.046172 451.046172 0 0 1 511.674151 1024z"/></svg>');
163+
}
164+
}
165+
166+
.nes-ui-classic .nes-controlbar .nes-button.reload:active {
167+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%2300AAEE" class="icon" viewBox="0 0 1024 1024"><path d="M511.674151 1024a450.164985 450.164985 0 0 1-11.516202-900.178042V0.364629l184.380771 163.809614-184.380771 163.809615V205.711573a368.305757 368.305757 0 1 0 380.30813 367.910742h82.041544A451.046172 451.046172 0 0 1 511.674151 1024z"/></svg>');
168+
}
169+
170+
.nes-ui-classic .nes-controlbar .nes-button.capture {
171+
margin-right: 3px;
172+
width: 30px;
173+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="%23E6E6E6" class="bi bi-camera-fill" viewBox="0 0 16 16"><path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/></svg>');
174+
}
175+
176+
@media(hover:hover) {
177+
.nes-ui-classic .nes-controlbar .nes-button.capture:hover {
178+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="%2300AAEE" class="bi bi-camera-fill" viewBox="0 0 16 16"><path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/></svg>');
179+
}
180+
}
181+
182+
.nes-ui-classic .nes-controlbar .nes-button.capture:active {
183+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="%2300AAEE" class="bi bi-camera-fill" viewBox="0 0 16 16"><path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/></svg>');
184+
}
185+
186+
.nes-ui-classic .nes-controlbar .nes-button.mute,
187+
.nes-ui-classic .nes-controlbar .nes-button.unmute {
188+
margin-right: 20px;
189+
width: 30px;
190+
}
191+
192+
.nes-ui-classic .nes-controlbar .nes-button.mute {
193+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23E6E6E6" class="icon" viewBox="0 0 1024 1024"><path d="M719.52 831.52a48 48 0 0 1-33.952-81.92c131.008-131.008 131.008-344.16 0-475.168a48 48 0 1 1 67.872-67.872c81.6 81.6 126.528 190.08 126.528 305.472s-44.928 223.872-126.528 305.472a47.84 47.84 0 0 1-33.952 14.048z m-170.496-90.496a48 48 0 0 1-33.952-81.92 208.256 208.256 0 0 0 0-294.144 48 48 0 1 1 67.872-67.872c118.528 118.528 118.528 311.392 0 429.92a47.84 47.84 0 0 1-33.952 14.048zM416 960a32 32 0 0 1-22.624-9.376L146.752 704H32a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32h114.752l246.624-246.624A32 32 0 0 1 448 96v832a32.064 32.064 0 0 1-32 32z"/></svg>');
194+
}
195+
196+
@media(hover:hover) {
197+
.nes-ui-classic .nes-controlbar .nes-button.mute:hover {
198+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%2300AAEE" class="icon" viewBox="0 0 1024 1024"><path d="M719.52 831.52a48 48 0 0 1-33.952-81.92c131.008-131.008 131.008-344.16 0-475.168a48 48 0 1 1 67.872-67.872c81.6 81.6 126.528 190.08 126.528 305.472s-44.928 223.872-126.528 305.472a47.84 47.84 0 0 1-33.952 14.048z m-170.496-90.496a48 48 0 0 1-33.952-81.92 208.256 208.256 0 0 0 0-294.144 48 48 0 1 1 67.872-67.872c118.528 118.528 118.528 311.392 0 429.92a47.84 47.84 0 0 1-33.952 14.048zM416 960a32 32 0 0 1-22.624-9.376L146.752 704H32a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32h114.752l246.624-246.624A32 32 0 0 1 448 96v832a32.064 32.064 0 0 1-32 32z"/></svg>');
199+
}
200+
}
201+
202+
.nes-ui-classic .nes-controlbar .nes-button.mute:active {
203+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%2300AAEE" class="icon" viewBox="0 0 1024 1024"><path d="M719.52 831.52a48 48 0 0 1-33.952-81.92c131.008-131.008 131.008-344.16 0-475.168a48 48 0 1 1 67.872-67.872c81.6 81.6 126.528 190.08 126.528 305.472s-44.928 223.872-126.528 305.472a47.84 47.84 0 0 1-33.952 14.048z m-170.496-90.496a48 48 0 0 1-33.952-81.92 208.256 208.256 0 0 0 0-294.144 48 48 0 1 1 67.872-67.872c118.528 118.528 118.528 311.392 0 429.92a47.84 47.84 0 0 1-33.952 14.048zM416 960a32 32 0 0 1-22.624-9.376L146.752 704H32a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32h114.752l246.624-246.624A32 32 0 0 1 448 96v832a32.064 32.064 0 0 1-32 32z"/></svg>');
204+
}
205+
206+
.nes-ui-classic .nes-controlbar .nes-button.unmute {
207+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23E6E6E6" class="icon" viewBox="0 0 1024 1024"><path d="M960 619.136V704h-84.864L768 596.864 660.864 704H576v-84.864L683.136 512 576 404.864V320h84.864L768 427.136 875.136 320H960v84.864L852.864 512 960 619.136zM416 960a32 32 0 0 1-22.624-9.376L146.752 704H32a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32h114.752l246.624-246.624A32 32 0 0 1 448 96v832a32.064 32.064 0 0 1-32 32z"/></svg>');
208+
}
209+
210+
@media(hover:hover) {
211+
.nes-ui-classic .nes-controlbar .nes-button.unmute:hover {
212+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%2300AAEE" class="icon" viewBox="0 0 1024 1024"><path d="M960 619.136V704h-84.864L768 596.864 660.864 704H576v-84.864L683.136 512 576 404.864V320h84.864L768 427.136 875.136 320H960v84.864L852.864 512 960 619.136zM416 960a32 32 0 0 1-22.624-9.376L146.752 704H32a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32h114.752l246.624-246.624A32 32 0 0 1 448 96v832a32.064 32.064 0 0 1-32 32z"/></svg>');
213+
}
214+
}
215+
216+
.nes-ui-classic .nes-controlbar .nes-button.unmute:active {
217+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%2300AAEE" class="icon" viewBox="0 0 1024 1024"><path d="M960 619.136V704h-84.864L768 596.864 660.864 704H576v-84.864L683.136 512 576 404.864V320h84.864L768 427.136 875.136 320H960v84.864L852.864 512 960 619.136zM416 960a32 32 0 0 1-22.624-9.376L146.752 704H32a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32h114.752l246.624-246.624A32 32 0 0 1 448 96v832a32.064 32.064 0 0 1-32 32z"/></svg>');
218+
}
219+
220+
.nes-ui-classic .nes-controlbar .nes-button.select,
221+
.nes-ui-classic .nes-controlbar .nes-button.start {
222+
margin-right: 10px;
223+
width: 80px;
224+
height: 30px;
225+
line-height: 30px;
226+
font-weight: bold;
227+
border: 1px solid #3cafab;
228+
border-radius: 4px;
229+
box-sizing: border-box;
230+
display: inline-block;
231+
}
232+
233+
.nes-ui-classic .nes-controlbar .nes-button.b,
234+
.nes-ui-classic .nes-controlbar .nes-button.a {
235+
margin-right: 10px;
236+
width: 35vh;
237+
height: 35vh;
238+
line-height: 35vh;
239+
border: 1px solid #3cafab;
240+
border-radius: 50%;
241+
box-sizing: border-box;
242+
}
243+
244+
.nes-ui-classic .nes-controlbar .nes-button.start,
245+
.nes-ui-classic .nes-controlbar .nes-button.a {
246+
margin-right: 10px;
247+
}
248+
249+
.nes-ui-classic .nes-controlbar .nes-button.select,
250+
.nes-ui-classic .nes-controlbar .nes-button.start,
251+
.nes-ui-classic .nes-controlbar .nes-button.b,
252+
.nes-ui-classic .nes-controlbar .nes-button.a {
253+
background-color: rgba(255, 255, 255, 0.0);
254+
}
255+
256+
@media(hover:hover) {
257+
258+
.nes-ui-classic .nes-controlbar .nes-button.select:hover,
259+
.nes-ui-classic .nes-controlbar .nes-button.start:hover,
260+
.nes-ui-classic .nes-controlbar .nes-button.b:hover,
261+
.nes-ui-classic .nes-controlbar .nes-button.a:hover {
262+
background-color: rgba(255, 255, 255, 0.3);
263+
}
264+
}
265+
266+
.nes-ui-classic .nes-controlbar .nes-button.select:active,
267+
.nes-ui-classic .nes-controlbar .nes-button.start:active,
268+
.nes-ui-classic .nes-controlbar .nes-button.b:active,
269+
.nes-ui-classic .nes-controlbar .nes-button.a:active {
270+
background-color: rgba(255, 255, 255, 0.3);
271+
}

‎example/nes/css/style.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@import url("basic.css") screen;
2+
3+
html,
4+
body {
5+
width: 100%;
6+
height: 100%;
7+
}
8+
9+
/**
10+
* input-wrapper
11+
*/
12+
13+
.input-wrapper {
14+
padding: 12px 16px;
15+
width: 100%;
16+
background-color: #FFFFFF;
17+
display: flex;
18+
}
19+
20+
.input-wrapper input {
21+
margin-right: 8px;
22+
flex: 1 1;
23+
}
24+
25+
.input-wrapper .btn {
26+
width: 80px;
27+
height: 36px;
28+
line-height: 36px;
29+
flex-grow: 0;
30+
}

0 commit comments

Comments
 (0)