aboutsummaryrefslogtreecommitdiff
path: root/web/pw-visualizer/src
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-11-15 22:31:50 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-11-15 22:31:50 +0100
commit3afa795cf559915e95b108e40beea18760b33064 (patch)
tree9ca2d3f582acf1f947d287f7750f48c8119257d7 /web/pw-visualizer/src
parent4aa8ca8303b5d25b745e8cae71e283455945bdd1 (diff)
downloadplanetwars.dev-3afa795cf559915e95b108e40beea18760b33064.tar.xz
planetwars.dev-3afa795cf559915e95b108e40beea18760b33064.zip
restyle turn progress bar
Diffstat (limited to 'web/pw-visualizer/src')
-rw-r--r--web/pw-visualizer/src/style.css133
1 files changed, 67 insertions, 66 deletions
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;
- }