display: none;
}
+.hidden {
+ display: none;
+}
+
#dialogArea,
.overlayArea {
position: absolute;
.overlayArea.hidden {
opacity: 0;
transition-duration: 1s;
+ display: block;
}
#dialogArea:-moz-system-metric(touch-enabled),
}
#dialogArea input[type="button"],
+#dialogArea button,
#dialogArea input[type="text"],
#dialogArea select,
.overlayArea input[type="button"],
+.overlayArea button,
.overlayArea select,
.menuDrawer input[type="button"],
+.menuDrawer button,
.menuDrawer select {
font-size: inherit;
}
position: absolute;
top: 0;
bottom: 0;
- left: calc(-40ch - 1ch); /* account for padding */
+ transform: translateX(calc(-40ch - 1ch)); /* account for padding */
width: 40ch;
max-width: 95%; /* make sure we don't overflow the screen */
background-color: rgba(15, 15, 15, .9);
padding: 0 .5ch; /* account for legend */
margin: 0;
z-index: 10;
- transition-property: left;
+ transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease;
}
.menuDrawer:not(.hidden) {
- left: 0;
+ transform: translateX(0);
}
@media screen and (max-width: 330px) {
}
}
-.menuDrawer > p {
+.menuDrawer p {
margin: .5em 0;
}
}
/* Custom button design */
-.menuDrawer input[type="button"] {
+.menuDrawer input[type="button"],
+.menuDrawer button {
text-align: center;
vertical-align: middle;
background-image: none;
border-radius: 3px;
}
-.menuDrawer input[type="button"]:hover {
+.menuDrawer input[type="button"]:disabled,
+.menuDrawer button:disabled {
+ background-color: rgba(204, 204, 204, .1);
+ color: rgba(204, 204, 204, .5);
+ border: 1px solid rgba(255, 255, 255, .5);
+}
+
+.menuDrawer input[type="button"]:not(:disabled):hover,
+.menuDrawer button:not(:disabled):hover {
background-color: rgba(204, 204, 204, .4);
border: 1px solid #FFFFFF;
}
-.menuDrawer input[type="button"]:active {
+.menuDrawer input[type="button"]:not(:disabled):active,
+.menuDrawer button:not(:disabled):active {
background-color: rgba(204, 204, 255, .3);
color: #FFCCAA;
padding-top: 2px;
color: #404040;
}
+.menuDrawer input[type="text"],
+.menuDrawer input[type="number"] {
+ font-size: 1em;
+ vertical-align: middle;
+ background-image: none;
+ background-color: rgba(204, 204, 204, .7);
+ color: #404040;
+ padding: 1px .5em;
+ border: 1px solid #CCCCCC;
+ border-radius: 3px;
+}
+
+.menuDrawer input[type="text"] {
+ text-align: left;
+}
+
+.menuDrawer input[type="number"] {
+ text-align: right;
+}
+
+.menuDrawer input[type="text"]:disabled,
+.menuDrawer input[type="number"]:disabled {
+ background-color: rgba(204, 204, 204, .1);
+ color: rgba(204, 204, 204, .5);
+ border: 1px solid rgba(255, 255, 255, .5);
+}
+
+.menuDrawer input[type="text"]:not(:disabled):hover,
+.menuDrawer input[type="number"]:not(:disabled):hover {
+ border: 1px solid #FFFFFF;
+}
+
+.menuDrawer input[type="text"]:not(:disabled):focus,
+.menuDrawer input[type="number"]:not(:disabled):focus {
+ background-color: rgba(204, 204, 255, .8);
+ border: 1px solid #FFFFFF;
+ color: #202020;
+}
+
+.menuDrawer p.subTitle {
+ margin: .75em 0 .5em;
+ font-weight: bold;
+}
+
#trackData {
margin: 0;
}
+#trackDialogArea {
+ border-top: 2px solid;
+ border-bottom: 2px solid;
+ padding: 3px 0;
+}
+
#map, #track {
position: fixed;
border: 0;
display: none;
}
-.settingsSubTitle {
- margin: .5em 0 0;
- font-weight: bold;
-}
-
#copyright {
bottom: 5px;
right: .5em;
margin: 0;
- font-size: small;
+ font-size: .8em;
opacity: .66;
z-index: 2;
background-color: rgba(255, 255, 255, 1);
#copyright.hidden {
opacity: 0;
+ display: block;
}
#dialogArea {
#dialogArea.hidden {
top: -100%;
+ display: block;
}
.dialogTitle {
.dialogHelp {
margin: .5em 0;
- font-size: small;
+ font-size: .8em;
opacity: .66;
}
#copyright {
bottom: 1px;
right: 1px;
- font-size: 8px;
}
}