aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/pw-server/src/lib/components/Visualizer.svelte10
-rw-r--r--web/pw-visualizer/src/style.css133
2 files changed, 73 insertions, 70 deletions
diff --git a/web/pw-server/src/lib/components/Visualizer.svelte b/web/pw-server/src/lib/components/Visualizer.svelte
index 9859a59..a44fcc6 100644
--- a/web/pw-server/src/lib/components/Visualizer.svelte
+++ b/web/pw-server/src/lib/components/Visualizer.svelte
@@ -57,10 +57,12 @@
</div>
<div id="meta">
- <div id="turnCounter">0 / 0</div>
- <div>
- <span>Ms per frame:&nbsp;</span>
- <input type="number" id="speed" value="300" />
+ <div class="infocontainer">
+ <div id="turnCounter">0 / 0</div>
+ <div>
+ <span>Ms per frame:&nbsp;</span>
+ <input type="number" id="speed" value="300" />
+ </div>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" />
diff --git a/web/pw-visualizer/src/style.css b/web/pw-visualizer/src/style.css
index 02ab069..6ec2694 100644
--- a/web/pw-visualizer/src/style.css
+++ b/web/pw-visualizer/src/style.css
@@ -20,11 +20,10 @@
}
#meta {
- padding: 10px 2%;
color: white;
position: absolute;
bottom: 0;
- width: 96%;
+ width: 100%;
}
.options {
@@ -52,6 +51,71 @@
.option:hover {
background-color: #777;
}
+
+ .infocontainer {
+ padding: 10px;
+ position: absolute;
+ bottom: 14px;
+ }
+
+
+ .slidecontainer {
+ width: 100%;
+ }
+
+ .slider {
+ width: 100%;
+ height: 12px;
+ position: absolute;
+ bottom: 0;
+ cursor: pointer;
+ border-top: 1px solid black;
+ margin: 0;
+ padding: 0;
+ }
+
+ /*Chrome*/
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
+ .slider {
+ overflow: hidden;
+ -webkit-appearance: none;
+ background-color: #555;
+ }
+
+ /* .slider::-webkit-slider-runnable-track {
+ height: 12px;
+ -webkit-appearance: none;
+ color: #fff;
+ margin-top: -1px;
+ } */
+
+ .slider::-webkit-slider-thumb {
+ width: 18px;
+ height: 12px;
+ border-radius: 50%;
+ -webkit-appearance: none;
+ cursor: ew-resize;
+ background: #fff;
+ }
+
+ }
+
+
+ /** FF*/
+ .slider::-moz-range-thumb {
+ background: #fff;
+ border: 0;
+ height: 100%;
+ }
+ .slider::-moz-range-progress {
+ background-color: #0073e5;
+ height: 100%;
+ }
+ .slider::-moz-range-track {
+ background-color: #000000;
+ height: 100%;
+ }
+
.lds-roller {
display: none;
@@ -178,29 +242,7 @@
height: 100%;
}
- .button {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 0;
- height: 0;
- }
-
- .button::before {
- content: "";
- display: block;
- float: left;
- margin: 0 -20px 0 0;
- font-family: 'fontawesome';
- content: "\f1e1";
- transform: translate(-1em, 0px);
- color: antiquewhite;
- font-size: 1.5em;
- }
-
- .button:hover::before {
- color: #ff7f00;
- }
+
/* ----------------------------------------------
* Generated by Animista on 2019-9-17 14:35:13
* Licensed under FreeBSD License.
@@ -234,44 +276,3 @@
transform: translate(-50%, -150%);
}
}
- /**
- * ----------------------------------------
- * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
- * ----------------------------------------
- */
-
- .slidecontainer {
- margin-top: 10px;
- width: 100%;
- /* Width of the outside container */
- }
-
- .slider {
- -webkit-appearance: none;
- width: 100%;
- height: 15px;
- border-radius: 5px;
- background: #d3d3d3;
- outline: none;
- opacity: 0.7;
- -webkit-transition: .2s;
- transition: opacity .2s;
- }
-
- .slider::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 25px;
- height: 25px;
- border-radius: 50%;
- background: #ff7000;
- cursor: pointer;
- }
-
- .slider::-moz-range-thumb {
- width: 25px;
- height: 25px;
- border-radius: 50%;
- background: #ff7000;
- cursor: pointer;
- }