html, body{ padding: 0; margin: 0; } html{ height: 100%; } body{ min-height: 100%; background: #c6dbd2; } button{ border: 1px solid blue; border-radius: 3px; margin: 2px; } #plan, .window{ height: 100%; width: 100%; overflow: auto; position: absolute; } .window{ bottom: 0; right: 0; background: white; } .tile{ border: 1px solid black; width: 30px; height: 30px; position: absolute; background: white; } .crossH{ width: 60px; } .crossV{ height: 60px !important; } label{ display: flex; } svg circle, svg line, svg polygon, svg rect{ fill:#617de4; stroke-width:5; stroke:rgb(0,0,0); } svg.Relay rect{ fill: white; } svg.locked polygon, svg.locked rect:not(.sig_a):not(.sig_b){ fill:lime; } svg.occupied polygon, svg.occupied rect:not(.sig_a):not(.sig_b){ fill:yellow; } svg text{ font-size: 38px; font-family: sans-serif; } svg .block{ fill: #ffffff; } svg circle{ fill: gray; } .menu{ position: fixed; width: 100%; height: 30px; bottom: 20px; } .menu > div{ position: relative; float: left; border: 1px solid black; height: 30px; min-width: 30px; background: white; padding: 3px; text-align: center; } .Shadow, .menu .list{ display: none; } .menu div:hover .list{ display: inherit; } .menu > div > .list{ position: fixed; height: 30px; bottom: 50px; width: 100%; z-index: 10; } .menu > div > .list > *{ position: relative; border: 1px solid black; height: 30px; min-width: 30px; text-align: center; float: left; background: #ecffa2; } #messages{ position: fixed; bottom: 5px; right: 5px; padding: 5px; border-radius: 5px; background: yellow; z-index: 100; } h2{ margin: 0 0 10px; text-align: center; background: #627fda; } .swapbtn, .closebtn{ position: absolute; top: 10px; font-size: 30px; background: red; color: white; } .closebtn{ right: 10px; } .swapbtn{ right: 50px; } #Eraser polygon{ stroke: red; } .signal.stop .sig_a{ fill: red; } .signal.go .sig_a{ fill: lime; } .sig_b{ fill: black; } .link{ cursor: pointer; } #heartbeat { width: 15px; height: 15px; background: lime; position: fixed; top: 10px; left: 10px; display: none; } svg.left rect, svg.right rect, svg.straight .left, svg.straight .right{ fill: #ddd !important; } .occupied .block{ fill: yellow; } .active circle{ fill: #ffcc88; } polygon.oneway{ fill: lime; stroke-width:0; } fieldset{ float: left; border: 1px solid black; border-radius: 5px; } .error{ background: red; } h4,ul{ clear: both; } .menu div.emergency{ background: #ffb561; } svg.disabled circle, svg.disabled line, svg.disabled polygon, svg.disabled rect{ fill: #ddddef; stroke-width:5; stroke: red; }