Serge NOEL
414 lines
7.9 KiB
CSS
414 lines
7.9 KiB
CSS
/**********************************************************************************************
|
|
*
|
|
* CSS for 'webThrottle.html'
|
|
*
|
|
* This CSS defines the web throttle look.
|
|
*
|
|
* >>> This file version: 1.2 - by Oscar Moutinho (oscar.moutinho@gmail.com)
|
|
*
|
|
**********************************************************************************************/
|
|
|
|
/* Global ************************************************************************************/
|
|
|
|
html {}
|
|
|
|
body {
|
|
background-color:rgb(168, 168, 168);
|
|
color:rgb(248, 248, 248);
|
|
font-family:tahoma, arial, helvetica, sans-serif; /* verdana ?! (use only unicode fonts with IPA Extensions (96: 0250�02AF) */
|
|
/* font-size:16px; [managed internally - standard is 16px and is equal to 1em] */
|
|
}
|
|
|
|
*, *:before, *:after { /* box model width and height contains borders and paddings */
|
|
-webkit-box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
#bodyFrames {
|
|
overflow:hidden;
|
|
background-color:black;
|
|
}
|
|
|
|
.frame {
|
|
position:absolute;
|
|
margin:1px;
|
|
border:0;
|
|
}
|
|
|
|
#bodyFrameOuter {
|
|
position:absolute;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
margin:0;
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
|
|
#bodyFrameInner {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
margin:0;
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
|
|
.fadeIn {-webkit-animation:fadeIn 1s; -moz-animation:fadeIn 1s; animation:fadeIn 1s;}
|
|
|
|
@-webkit-keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
|
|
|
|
@-moz-keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
|
|
|
|
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
|
|
|
|
.fadeOut {-webkit-animation:fadeOut 2s; -moz-animation:fadeOut 2s; animation:fadeOut 2s;}
|
|
|
|
@-webkit-keyframes fadeOut {from {opacity:1;} to {opacity:0;}}
|
|
|
|
@-moz-keyframes fadeOut {from {opacity:1;} to {opacity:0;}}
|
|
|
|
@keyframes fadeOut {from {opacity:1;} to {opacity:0;}}
|
|
|
|
.selectionList {
|
|
background-clip: padding-box;
|
|
position:fixed;
|
|
height:auto;
|
|
width:auto;
|
|
background-color:rgb(255, 255, 255);
|
|
border:15px solid rgb(255, 255, 255);
|
|
border:15px solid rgba(255, 255, 255, 0.5);
|
|
border-radius:5px;
|
|
padding:5px;
|
|
color:black;
|
|
text-align:center;
|
|
opacity:0.9;
|
|
z-index:+10;
|
|
}
|
|
|
|
.selectionListItem {
|
|
height:auto;
|
|
width:auto;
|
|
overflow:hidden;
|
|
white-space:nowrap;
|
|
margin:5px;
|
|
opacity:1;
|
|
cursor:pointer;
|
|
}
|
|
|
|
#selectionListTitle {
|
|
font-size:120%;
|
|
text-decoration:underline;
|
|
font-weight:bold;
|
|
cursor:auto;
|
|
}
|
|
|
|
.activeListItem {
|
|
font-weight:bold;
|
|
}
|
|
|
|
#selectionListItemBlank {
|
|
cursor:auto;
|
|
}
|
|
|
|
#selectionListCancel {
|
|
background-color:rgb(128, 128, 128);
|
|
font-weight:bold;
|
|
}
|
|
|
|
.imageContainer {position:absolute; overflow:hidden;}
|
|
|
|
.imageInitial {display:block; margin:auto; /* [managed internally] */}
|
|
|
|
.image {display:block; margin:auto;/* [managed internally] */}
|
|
|
|
.locoName, .locoRoad, .locoMfg, .panelName {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
text-align:center;
|
|
}
|
|
|
|
.smoothAlert {
|
|
background-clip: padding-box;
|
|
position:fixed;
|
|
height:auto;
|
|
width:auto;
|
|
background-color:rgb(255, 255, 255);
|
|
border:5px double rgb(128, 128, 128);
|
|
border:5px double rgba(128, 128, 128, 0.3);
|
|
border-radius:10px;
|
|
padding:5px;
|
|
color:black;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.smoothAlertLine {
|
|
height:auto;
|
|
width:auto;
|
|
overflow:hidden;
|
|
white-space:nowrap;
|
|
margin:5px;
|
|
}
|
|
|
|
.button {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
margin:2px;
|
|
border-radius:5px;
|
|
color:black;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.button:active {color:rgb(248, 248, 248);}
|
|
|
|
.buttonText {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
text-align:center;
|
|
}
|
|
|
|
#header {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
padding:2px;
|
|
}
|
|
|
|
#power {font-size:150%;}
|
|
|
|
.powerUnknown {background-color:yellow;}
|
|
|
|
.powerOff {background-color:red;}
|
|
|
|
.powerOn {background-color:lime;}
|
|
|
|
#toFrame {background-color:rgb(128, 128, 128); color:rgb(248, 248, 248); font-size:120%;}
|
|
|
|
#removeFrame {background-color:rgb(128, 128, 128); font-size:120%; z-index:+300;}
|
|
|
|
#speedPosition {background-color:rgb(128, 128, 128); font-size:150%;}
|
|
|
|
#speedPosition:active {background-color:rgb(48, 48, 48);}
|
|
|
|
#fontSmaller {font-size:90%;}
|
|
|
|
#fontLarger {font-size:150%;}
|
|
|
|
#help {color:yellow; font-size:150%; z-index:+300;}
|
|
|
|
/* Roster / Panels ***************************************************************************/
|
|
|
|
#buttons {position:absolute; overflow:hidden;}
|
|
|
|
#groups {background-color:rgb(128, 128, 128); font-size:120%;}
|
|
|
|
#groups:active {background-color:rgb(48, 48, 48);}
|
|
|
|
#turnouts {background-color:rgb(128, 128, 128); font-size:120%;}
|
|
|
|
#turnouts:active {background-color:rgb(48, 48, 48);}
|
|
|
|
#routes {background-color:rgb(128, 128, 128); font-size:120%;}
|
|
|
|
#routes:active {background-color:rgb(48, 48, 48);}
|
|
|
|
#panels {background-color:rgb(128, 128, 128); font-size:120%;}
|
|
|
|
#panels:active {background-color:rgb(48, 48, 48);}
|
|
|
|
.rosterCell {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:rgb(48, 48, 48);
|
|
margin:2px;
|
|
border-radius:5px;
|
|
padding:5px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.panelCell {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:rgb(48, 48, 48);
|
|
margin:2px;
|
|
border-radius:5px;
|
|
padding:5px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
/* Throttle **********************************************************************************/
|
|
|
|
#movementActive {background-color:rgb(128, 128, 128); font-size:120%;}
|
|
|
|
#movementActive:active {background-color:rgb(48, 48, 48);}
|
|
|
|
#emergencyStop {font-size:120%; background-color:red;}
|
|
|
|
.speed {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:rgb(128, 128, 128);
|
|
}
|
|
|
|
#speedGrid {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#speedLimits {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:rgb(48, 48, 48);
|
|
margin:15px;
|
|
border-radius:5px;
|
|
}
|
|
|
|
#speedBar {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:darkorange;
|
|
margin:15px;
|
|
border-radius:5px;
|
|
z-index:+5;
|
|
}
|
|
|
|
#speedTouch {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:transparent;
|
|
z-index:+6;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.direction {
|
|
background-color:rgb(48, 48, 48);
|
|
-webkit-transform:rotate(90deg);
|
|
-moz-transform:rotate(90deg);
|
|
-ms-transform:rotate(90deg);
|
|
transform:rotate(90deg);
|
|
font-size:200%;
|
|
font-weight:bold;
|
|
color:yellow;
|
|
}
|
|
|
|
.direction:active {color:rgb(248, 248, 248);}
|
|
|
|
.directionActive {color:lime;}
|
|
|
|
.directionActive:active {color:rgb(248, 248, 248);}
|
|
|
|
.directionInactive {color:red;}
|
|
|
|
.directionInactive:active {color:rgb(248, 248, 248);}
|
|
|
|
.functionsOuter {
|
|
position:absolute;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
margin:0;
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
|
|
.functionsInner {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
color: black;
|
|
margin:0;
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
|
|
.functionButton {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:rgb(48, 48, 48);
|
|
color:rgb(192, 192, 192);
|
|
margin:2px;
|
|
border-radius:5px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.functionButton:active {color:rgb(248, 248, 248);}
|
|
|
|
.funcLabel {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
text-align:center;
|
|
}
|
|
|
|
.funcState {
|
|
position:absolute;
|
|
margin:2px;
|
|
border-radius:5px;
|
|
}
|
|
|
|
.funcOn {background-color:lime;}
|
|
|
|
.funcOff {background-color:rgb(48, 48, 48);}
|
|
|
|
#locoName {
|
|
background-color:rgb(48, 48, 48);
|
|
color:rgb(192, 192, 192);
|
|
margin:2px;
|
|
border-radius:5px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.locoCell {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
margin:2px;
|
|
}
|
|
|
|
/* Panel *************************************************************************************/
|
|
|
|
.panel {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
border:0;
|
|
}
|
|
|
|
/* Turnouts and Routes ***********************************************************************/
|
|
|
|
.trCell {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
background-color:rgb(48, 48, 48);
|
|
margin:2px;
|
|
border-radius:5px;
|
|
padding:5px;
|
|
}
|
|
|
|
.trName {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
text-align:left;
|
|
}
|
|
|
|
.trStatus {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
text-align:right;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.turnoutThrown, .routeInactive {color:red;}
|
|
|
|
.turnoutClosed, .routeActive {color:lime;}
|
|
|
|
.turnoutUndefined, .routeUndefined {color:yellow;}
|
|
|
|
.routeDisabled {color:gray;}
|
|
|
|
/* END ***************************************************************************************/
|