ah crap I now see why people use fontend frameworks this is hell.
This commit is contained in:
parent
d14305cbca
commit
23fddbe799
|
|
@ -7,7 +7,7 @@ export class Game {
|
||||||
constructor(name) {
|
constructor(name) {
|
||||||
this.name = name;
|
this.name = name;
|
||||||
this.players = [];
|
this.players = [];
|
||||||
this.world = new World([32,32])
|
this.world = new World([16,9])
|
||||||
}
|
}
|
||||||
|
|
||||||
addPlayer(id, name) {
|
addPlayer(id, name) {
|
||||||
|
|
|
||||||
|
|
@ -8,24 +8,17 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Canvas used to generate individual sprites off one sprite atlas -->
|
<!-- Canvas used to generate individual sprites off one sprite atlas -->
|
||||||
<h4 id="status">Connection Status</h4>
|
|
||||||
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
|
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
|
||||||
<span class="left" id="left"><p>left</p></span>
|
<main>
|
||||||
<div id="wrapwrap">
|
|
||||||
<div class="wrapper" id="wrapper">
|
|
||||||
<span class="canvasStack">
|
|
||||||
<canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="game">
|
<div id="game">
|
||||||
<span id="leftBar">
|
<span id="leftBar">
|
||||||
|
<p id="status">Connection Status</p>
|
||||||
</span>
|
</span>
|
||||||
<span id="rightBar">
|
<span id="rightBar">
|
||||||
<div id="canvas">
|
<div class="canvasContainer">
|
||||||
|
<canvas oncontextmenu="return false;" id="canvas" width=0 height=0></canvas>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,6 +28,7 @@
|
||||||
<input type="text" id="name" value="bob">
|
<input type="text" id="name" value="bob">
|
||||||
<input type="submit" id="submit" value="join">
|
<input type="submit" id="submit" value="join">
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
<script src='scripts/script.js' type="module"></script>
|
<script src='scripts/script.js' type="module"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,29 @@ import {game} from "../game/game.js"
|
||||||
|
|
||||||
export var canvas = document.getElementById('canvas');
|
export var canvas = document.getElementById('canvas');
|
||||||
export var ctx = canvas.getContext('2d');
|
export var ctx = canvas.getContext('2d');
|
||||||
export var wrapper = document.getElementById('wrapper');
|
export var wrapper = document.getElementById('game');
|
||||||
|
export var rightBar = document.getElementById('rightBar');
|
||||||
|
export var leftBar = document.getElementById('leftBar');
|
||||||
|
canvas.width = game.tileSize*game.gridSize[0];
|
||||||
|
canvas.height = game.tileSize*game.gridSize[1];
|
||||||
|
scaleEverythingGood()
|
||||||
|
|
||||||
canvas.width = game.tileSize*game.gridSize[0] * 1;
|
window.addEventListener('resize', scaleEverythingGood);
|
||||||
canvas.height = game.tileSize*game.gridSize[1] * 1;
|
|
||||||
// wrapper.style.height = `${canvas.height}px`
|
function scaleEverythingGood() {
|
||||||
// wrapper.style.width = `${canvas.height * 2}px`
|
const width = window.innerWidth-2;
|
||||||
|
const height = window.innerHeight-2;
|
||||||
|
let canvasWidth
|
||||||
|
if (canvas.width > canvas.height) {
|
||||||
|
canvasWidth = Math.max(width, height)
|
||||||
|
} else {
|
||||||
|
canvasWidth = width
|
||||||
|
}
|
||||||
|
canvasWidth = canvasWidth/4
|
||||||
|
canvas.style.width = `${canvasWidth}px`;
|
||||||
|
rightBar.style.width = `${canvasWidth}px`
|
||||||
|
leftBar.style.width = `${canvasWidth/2}px`
|
||||||
|
const wrapperWidth = rightBar.style.width + leftBar.style.width;
|
||||||
|
wrapper.style.width = `${wrapperWidth}px`
|
||||||
|
wrapper.style.height = `${height}px`
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@ class Game {
|
||||||
this.status = status;
|
this.status = status;
|
||||||
}
|
}
|
||||||
reset() {
|
reset() {
|
||||||
game = new Game(16, [32, 32], null, false);
|
game = new Game(16, [16, 9], null, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export var game = new Game(16, [32, 32])
|
export var game = new Game(16, [16, 9])
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import {game} from "../../game/game.js";
|
import {game} from "../../game/game.js";
|
||||||
import { clickCanvas } from "/scripts/net/netcode.js";
|
import { clickCanvas } from "/scripts/net/netcode.js";
|
||||||
import { getButton } from "/scripts/interface/game/picker.js";
|
import { getButton } from "/scripts/interface/game/picker.js";
|
||||||
|
import { canvas } from "../../display/html.js"
|
||||||
|
|
||||||
class Cursor {
|
class Cursor {
|
||||||
constructor(){
|
constructor(){
|
||||||
|
|
@ -36,12 +37,14 @@ function mouseMoved(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getMousePosition(canvas, event) {
|
function getMousePosition(canvas, event) {
|
||||||
|
const tileSize = game.tileSize
|
||||||
// Get mouse position on canvas
|
// Get mouse position on canvas
|
||||||
const rect = canvas.getBoundingClientRect();
|
const rect = canvas.getBoundingClientRect();
|
||||||
const x = event.clientX - rect.left;
|
const mouseX = event.clientX - rect.left;
|
||||||
const y = event.clientY - rect.top;
|
const mouseY = event.clientY - rect.top;
|
||||||
const xu = cursor.x
|
// scale mouse coordinates to canvas coordinates
|
||||||
const yu = cursor.y
|
const xu = Math.floor((mouseX * canvas.width / canvas.clientWidth)/tileSize);
|
||||||
|
const yu = Math.floor((mouseY * canvas.height / canvas.clientHeight)/tileSize);
|
||||||
const button = event.button
|
const button = event.button
|
||||||
|
|
||||||
console.log("Click!")
|
console.log("Click!")
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,13 @@ import * as picker from "/scripts/interface/game/picker.js"
|
||||||
|
|
||||||
export function changeScene(scene) {
|
export function changeScene(scene) {
|
||||||
if (scene == "game") {
|
if (scene == "game") {
|
||||||
document.getElementById('menu').style = "display: none;"
|
// document.getElementById('menu').style = "display: none;"
|
||||||
document.getElementById('container').style = ""
|
// document.getElementById('container').style = ""
|
||||||
// picker.create();
|
// picker.create();
|
||||||
}
|
}
|
||||||
if (scene == "mainmenu") {
|
if (scene == "mainmenu") {
|
||||||
document.getElementById('menu').style = ""
|
// document.getElementById('menu').style = ""
|
||||||
document.getElementById('container').style = "display: none;"
|
// document.getElementById('container').style = "display: none;"
|
||||||
// picker.destroy();
|
// picker.destroy();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
281
www/style.css
281
www/style.css
|
|
@ -1,230 +1,51 @@
|
||||||
/*
|
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;
|
||||||
|
cursor: pointer;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
/* #mydiv {
|
|
||||||
position: absolute;
|
#status {
|
||||||
cursor: move;
|
position: absolute;
|
||||||
z-index: 10;
|
display: block;
|
||||||
background: coral;
|
}
|
||||||
width: 30px;
|
#game {
|
||||||
height: 30px;
|
margin: 0px;
|
||||||
border: 1px solid #d3d3d3;
|
padding: 0px;
|
||||||
} */
|
background: tan;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
span.button > img {
|
}
|
||||||
pointer-events: none;
|
|
||||||
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
|
#leftBar {
|
||||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
margin: 0px;
|
||||||
image-rendering: -o-crisp-edges; /* Opera */
|
padding: 0px;
|
||||||
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
|
display: inline-flex;
|
||||||
image-rendering: pixelated; /* Chrome */
|
background: red;
|
||||||
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
|
height: inherit;
|
||||||
width: 70px;
|
}
|
||||||
height: 70px;
|
#rightBar {
|
||||||
transform: translate(0, 8px);
|
margin: 0px;
|
||||||
border: 2px solid darkgray;
|
padding: 0px;
|
||||||
border-radius: 4px;
|
display: inline-flex;
|
||||||
background: lightgray;
|
background: orange;
|
||||||
}
|
height: inherit;
|
||||||
|
align-items: center;
|
||||||
span.button {
|
|
||||||
-webkit-user-select: none;
|
}
|
||||||
-moz-user-select: none;
|
.canvasContainer {
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
}
|
||||||
display: inline-block;
|
|
||||||
background: tan;
|
|
||||||
width:90px;
|
|
||||||
height:90px;
|
|
||||||
margin: 5px 5px 5px 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 3px;
|
|
||||||
white-space: normal;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
span.button:hover {
|
|
||||||
background: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.canvas1{
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.canvas3 {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.canvasStack {
|
|
||||||
|
|
||||||
/* top: 50px; */
|
|
||||||
|
|
||||||
background: darkslategray;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrapper {
|
|
||||||
|
|
||||||
/* display: flex; */
|
|
||||||
/* justify-content: right; */
|
|
||||||
/* left: 50%; */
|
|
||||||
/* transform: translate(-50%, 0); */
|
|
||||||
/* position: absolute; */
|
|
||||||
background: khaki;
|
|
||||||
width: 750px;
|
|
||||||
height: 750px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrapwrap {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
text-align: center;
|
|
||||||
background-color: #2c2f33;
|
|
||||||
color: white;
|
|
||||||
font-variant: normal;
|
|
||||||
font-family: verdana;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 25pt;
|
|
||||||
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 20pt;
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
/* font-size: 12pt; */
|
|
||||||
/* text-align: left; */
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 12pt;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.startButton {
|
|
||||||
width: 100.5%;
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
padding-top: 14px;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subSection {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12pt;
|
|
||||||
color: white;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #4d5259;
|
|
||||||
border-style: solid;
|
|
||||||
border: solid white;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
padding-top: 2px;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 98%;
|
|
||||||
background: none;
|
|
||||||
outline: none;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
height: 1px;
|
|
||||||
border: 2px solid #white;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
border: 1px solid #bdc3c7;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: #4CAF50;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider::-moz-range-thumb {
|
|
||||||
border: 1px solid #bdc3c7;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: #4CAF50;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider::-moz-range-track {
|
|
||||||
width: 100%;
|
|
||||||
height: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.spacer{
|
|
||||||
display:inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 25px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
||||||
213
www/styleold.css
Normal file
213
www/styleold.css
Normal file
|
|
@ -0,0 +1,213 @@
|
||||||
|
|
||||||
|
/* #mydiv {
|
||||||
|
position: absolute;
|
||||||
|
cursor: move;
|
||||||
|
z-index: 10;
|
||||||
|
background: coral;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid #d3d3d3;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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 */
|
||||||
|
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
transform: translate(0, 8px);
|
||||||
|
border: 2px solid darkgray;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.button {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
display: inline-block;
|
||||||
|
background: tan;
|
||||||
|
width:90px;
|
||||||
|
height:90px;
|
||||||
|
margin: 5px 5px 5px 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 3px;
|
||||||
|
white-space: normal;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
span.button:hover {
|
||||||
|
background: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas1{
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas3 {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvasStack {
|
||||||
|
|
||||||
|
/* top: 50px; */
|
||||||
|
|
||||||
|
background: darkslategray;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
|
||||||
|
/* display: flex; */
|
||||||
|
/* justify-content: right; */
|
||||||
|
/* left: 50%; */
|
||||||
|
/* transform: translate(-50%, 0); */
|
||||||
|
/* position: absolute; */
|
||||||
|
background: khaki;
|
||||||
|
width: 750px;
|
||||||
|
height: 750px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapwrap {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
background-color: #2c2f33;
|
||||||
|
color: white;
|
||||||
|
font-variant: normal;
|
||||||
|
font-family: verdana;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25pt;
|
||||||
|
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 20pt;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
/* font-size: 12pt; */
|
||||||
|
/* text-align: left; */
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 12pt;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.startButton {
|
||||||
|
width: 100.5%;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding-top: 14px;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subSection {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12pt;
|
||||||
|
color: white;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #4d5259;
|
||||||
|
border-style: solid;
|
||||||
|
border: solid white;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
padding-top: 2px;
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 98%;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 1px;
|
||||||
|
border: 2px solid #white;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
border: 1px solid #bdc3c7;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #4CAF50;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
|
border: 1px solid #bdc3c7;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: #4CAF50;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-moz-range-track {
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.spacer{
|
||||||
|
display:inline-block;
|
||||||
|
width: 1px;
|
||||||
|
height: 25px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue