Breakout some scss
This commit is contained in:
parent
d88bb557dc
commit
04ace65942
2
buildstyle.sh
Normal file
2
buildstyle.sh
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
scss client/scss/main.scss dist/www/style.css
|
||||
rm -rf .sass-cache
|
||||
11
client/scss/canvas.scss
Normal file
11
client/scss/canvas.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
canvas {
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
42
client/scss/createGame.scss
Normal file
42
client/scss/createGame.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
span.button > img {
|
||||
pointer-events: none;
|
||||
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
|
||||
image-rendering: pixelated; /* Chrome */
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
transform: translate(0, 10px);
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
span.button.wide {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
span.button.wide > img {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
span.button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
background: lightgray;
|
||||
width:90px;
|
||||
height:90px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
span.button:hover {
|
||||
background: gray;
|
||||
}
|
||||
9
client/scss/font.scss
Normal file
9
client/scss/font.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@font-face {
|
||||
font-family: "moderndos";
|
||||
src: url('fonts/moderndos.woff2') format('woff2'),
|
||||
url('fonts/moderndos.ttf') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: moderndos;
|
||||
}
|
||||
14
client/scss/joinGame.scss
Normal file
14
client/scss/joinGame.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
input.codeInput {
|
||||
width: inherit !important;
|
||||
text-align: center;
|
||||
padding-top: 20px !important;
|
||||
padding-bottom: 20px !important;
|
||||
border-radius: 2px;
|
||||
outline: solid gray 2px;
|
||||
font-size: 4.8em;
|
||||
}
|
||||
|
||||
.codeContainer > button {
|
||||
max-width: auto !important;
|
||||
width: inherit !important;
|
||||
}
|
||||
|
|
@ -1,13 +1,9 @@
|
|||
@font-face {
|
||||
/* font-weight: 500; */
|
||||
font-family: "moderndos";
|
||||
src: url('fonts/moderndos.woff2') format('woff2'),
|
||||
url('fonts/moderndos.ttf') format('truetype');
|
||||
}
|
||||
@import "createGame.scss";
|
||||
@import "font.scss";
|
||||
@import "canvas.scss";
|
||||
@import "slider.scss";
|
||||
@import "joinGame.scss";
|
||||
|
||||
* {
|
||||
font-family: moderndos;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin: 0px;
|
||||
|
|
@ -91,61 +87,8 @@ input {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
input.codeInput {
|
||||
width: inherit !important;
|
||||
text-align: center;
|
||||
padding-top: 20px !important;
|
||||
padding-bottom: 20px !important;
|
||||
border-radius: 2px;
|
||||
outline: solid gray 2px;
|
||||
font-size: 4.8em;
|
||||
}
|
||||
|
||||
.codeContainer > button {
|
||||
max-width: auto !important;
|
||||
width: inherit !important;
|
||||
}
|
||||
|
||||
.sliderNumber {
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color: black;
|
||||
font-size: 1.7em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sliderContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 55px;
|
||||
width: 300px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
background: #f1f8t6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
border-radius: 0px;
|
||||
background: #f1f8t6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=button], button, .buttonLink {
|
||||
width: 50%;
|
||||
|
|
@ -156,7 +99,7 @@ input[type=button], button, .buttonLink {
|
|||
border: none;
|
||||
cursor: pointer; }
|
||||
|
||||
input[type=number], input[type=text] {
|
||||
input[type=number], input[type=text] {
|
||||
/* width: 100%; */
|
||||
width: 300px;
|
||||
display: inline-block;
|
||||
|
|
@ -167,83 +110,17 @@ input[type=button], button, .buttonLink {
|
|||
background-color: lightgray; }
|
||||
|
||||
|
||||
|
||||
span.button > img {
|
||||
pointer-events: none;
|
||||
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
|
||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
||||
image-rendering: -o-crisp-edges; /* Opera */
|
||||
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
|
||||
image-rendering: pixelated; /* Chrome */
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
transform: translate(0, 10px);
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
span.button.wide {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
span.button.wide > img {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
span.button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
background: lightgray;
|
||||
width:90px;
|
||||
height:90px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
span.button:hover {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.canvas1{
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.canvas3 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.canvasStack {
|
||||
|
||||
/* top: 50px; */
|
||||
|
||||
background: darkslategray;
|
||||
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hidden {
|
||||
|
|
|
|||
40
client/scss/slider.scss
Normal file
40
client/scss/slider.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.sliderNumber {
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
color: black;
|
||||
font-size: 1.7em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sliderContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 55px;
|
||||
width: 300px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
background: #f1f8t6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
border-radius: 0px;
|
||||
background: #f1f8t6;
|
||||
cursor: pointer;
|
||||
}
|
||||
23
package-lock.json
generated
23
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
|||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"express": "^4.18.1",
|
||||
"rollup": "^2.75.7",
|
||||
"sass": "^1.52.3",
|
||||
"socket.io": "^4.5.0",
|
||||
"ts-node": "^10.8.1",
|
||||
|
|
@ -901,6 +902,20 @@
|
|||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "2.75.7",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
|
||||
"integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
|
|
@ -1905,6 +1920,14 @@
|
|||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "2.75.7",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
|
||||
"integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
|
||||
"requires": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"express": "^4.18.1",
|
||||
"rollup": "^2.75.7",
|
||||
"sass": "^1.52.3",
|
||||
"socket.io": "^4.5.0",
|
||||
"ts-node": "^10.8.1",
|
||||
|
|
|
|||
Loading…
Reference in a new issue