Skip to content

Commit 48538f5

Browse files
u9gu9g
authored
Remove css from index.html (#54)
* Remove css from index.html * Create styles.css * Update webpack.config.js
1 parent b9c3a6a commit 48538f5

File tree

3 files changed

+130
-120
lines changed

3 files changed

+130
-120
lines changed

‎index.html

Lines changed: 1 addition & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -2,126 +2,7 @@
22
<html>
33
<head>
44
<title>Prismarine Web Client</title>
5-
<style type="text/css">
6-
@font-face {
7-
font-family: minecraft;
8-
src: url(minecraftia.woff);
9-
}
10-
@font-face {
11-
font-family: mojangles;
12-
src: url(mojangles.ttf);
13-
}
14-
html {
15-
overflow: hidden;
16-
}
17-
18-
html, body {
19-
height: 100%;
20-
margin: 0;
21-
padding: 0;
22-
}
23-
24-
canvas {
25-
height: 100%;
26-
width: 100%;
27-
font-size: 0;
28-
29-
margin: 0;
30-
padding: 0;
31-
}
32-
.chat-wrapper {
33-
position: fixed;
34-
background-color: rgba(0, 0, 0, 0.5);
35-
}
36-
37-
.chat-display-wrapper {
38-
bottom: calc(8px * 16);
39-
padding: 4px;
40-
max-height: calc(90px * 8);
41-
width: calc(320px * 4);
42-
}
43-
44-
.chat-input-wrapper {
45-
bottom: calc(2px * 16);
46-
width: 100%;
47-
overflow: hidden;
48-
background-color: rgba(0, 0, 0, 0);
49-
}
50-
51-
.chat {
52-
overflow: hidden;
53-
color: white;
54-
font-size: 16px;
55-
margin: 0px;
56-
line-height: 100%;
57-
text-shadow: 2px 2px 0px #3f3f3f;
58-
font-family: mojangles, minecraft, monospace;
59-
width: 100%;
60-
max-height: calc(90px * 8)
61-
}
62-
63-
input[type=text] {
64-
background-color: rgba(0, 0, 0, 0.5);
65-
display: none;
66-
}
67-
li {
68-
display: block;
69-
}
70-
#crosshair {
71-
image-rendering: optimizeSpeed;
72-
image-rendering: -moz-crisp-edges;
73-
image-rendering: -webkit-optimize-contrast;
74-
image-rendering: -o-crisp-edges;
75-
image-rendering: pixelated;
76-
-ms-interpolation-mode: nearest-neighbor;
77-
position: absolute;
78-
top: 50%;
79-
left: 50%;
80-
height: calc(256px * 4);
81-
width: calc(256px * 4);
82-
transform: translate(calc(-50% + 120px * 4), calc(-50% + 120px * 4));
83-
clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
84-
}
85-
86-
h1 {
87-
font-family: mojangles, minecraft, monospace;
88-
}
89-
.loader {
90-
display: initial;
91-
}
92-
#loading-image {
93-
height: 75%;
94-
top: 50%;
95-
left: 50%;
96-
position: absolute;
97-
transform: translate(-50%, -50%);
98-
image-rendering: crisp-edges;
99-
image-rendering: -webkit-crisp-edges;
100-
}
101-
#loading-background {
102-
background-color: #60a490;
103-
z-index: 100;
104-
height: 100% !important;
105-
width: 100%;
106-
position: fixed;
107-
}
108-
#loading-text {
109-
color: #29594b;
110-
z-index: 200;
111-
position: absolute;
112-
top: 50%;
113-
left: 50%;
114-
transform: translate(-50%, 12rem);
115-
}
116-
body {
117-
-webkit-touch-callout: none;
118-
-webkit-user-select: none;
119-
-khtml-user-select: none;
120-
-moz-user-select: none;
121-
-ms-user-select: none;
122-
user-select: none;
123-
}
124-
</style>
5+
<link rel="stylesheet" href="styles.css">
1256
</head>
1267
<body id="main-body">
1278
<img id="crosshair" src="extra-textures/icons.png">

‎styles.css

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@font-face {
2+
font-family: minecraft;
3+
src: url(minecraftia.woff);
4+
}
5+
6+
@font-face {
7+
font-family: mojangles;
8+
src: url(mojangles.ttf);
9+
}
10+
11+
html {
12+
overflow: hidden;
13+
}
14+
15+
html,
16+
body {
17+
height: 100%;
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
canvas {
23+
height: 100%;
24+
width: 100%;
25+
font-size: 0;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
.chat-wrapper {
31+
position: fixed;
32+
background-color: rgba(0, 0, 0, 0.5);
33+
}
34+
35+
.chat-display-wrapper {
36+
bottom: calc(8px * 16);
37+
padding: 4px;
38+
max-height: calc(90px * 8);
39+
width: calc(320px * 4);
40+
}
41+
42+
.chat-input-wrapper {
43+
bottom: calc(2px * 16);
44+
width: 100%;
45+
overflow: hidden;
46+
background-color: rgba(0, 0, 0, 0);
47+
}
48+
49+
.chat {
50+
overflow: hidden;
51+
color: white;
52+
font-size: 16px;
53+
margin: 0px;
54+
line-height: 100%;
55+
text-shadow: 2px 2px 0px #3f3f3f;
56+
font-family: mojangles, minecraft, monospace;
57+
width: 100%;
58+
max-height: calc(90px * 8)
59+
}
60+
61+
input[type=text] {
62+
background-color: rgba(0, 0, 0, 0.5);
63+
display: none;
64+
}
65+
66+
li {
67+
display: block;
68+
}
69+
70+
#crosshair {
71+
image-rendering: optimizeSpeed;
72+
image-rendering: -moz-crisp-edges;
73+
image-rendering: -webkit-optimize-contrast;
74+
image-rendering: -o-crisp-edges;
75+
image-rendering: pixelated;
76+
-ms-interpolation-mode: nearest-neighbor;
77+
position: absolute;
78+
top: 50%;
79+
left: 50%;
80+
height: calc(256px * 4);
81+
width: calc(256px * 4);
82+
transform: translate(calc(-50% + 120px * 4), calc(-50% + 120px * 4));
83+
clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
84+
}
85+
86+
h1 {
87+
font-family: mojangles, minecraft, monospace;
88+
}
89+
90+
.loader {
91+
display: initial;
92+
}
93+
94+
#loading-image {
95+
height: 75%;
96+
top: 50%;
97+
left: 50%;
98+
position: absolute;
99+
transform: translate(-50%, -50%);
100+
image-rendering: crisp-edges;
101+
image-rendering: -webkit-crisp-edges;
102+
}
103+
104+
#loading-background {
105+
background-color: #60a490;
106+
z-index: 100;
107+
height: 100% !important;
108+
width: 100%;
109+
position: fixed;
110+
}
111+
112+
#loading-text {
113+
color: #29594b;
114+
z-index: 200;
115+
position: absolute;
116+
top: 50%;
117+
left: 50%;
118+
transform: translate(-50%, 12rem);
119+
}
120+
121+
body {
122+
-webkit-touch-callout: none;
123+
-webkit-user-select: none;
124+
-khtml-user-select: none;
125+
-moz-user-select: none;
126+
-ms-user-select: none;
127+
user-select: none;
128+
}

‎webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const config = {
5858
new CopyPlugin({
5959
patterns: [
6060
{ from: path.join(__dirname, '/index.html'), to: './index.html' },
61+
{ from: path.join(__dirname, '/styles.css'), to: './styles.css' },
6162
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/blocksStates/'), to: './blocksStates/' },
6263
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' },
6364
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },

0 commit comments

Comments
 (0)