CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss

   1 html,body {
   2         padding:0;
   3         margin: 0 auto;
   4         width:100%;
   5         height:100%;
   6         min-height:100%;
   7         color: black;
   8         background: #FFF;
   9 }
  10
  11 /* http://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo */
  12 .navbar-brand {
  13         padding: 0px;
  14 }
  15 .navbar-brand>img {
  16         height: 100%;
  17         padding: 5px;
  18         width: auto;
  19 }
  20 .navbar-right {
  21         margin-right: 0;
  22 }
  23
  24 /* used in navbar to show/hide items depending on connection status */
  25 .not-connected .if-connecting    { display: none; }
  26 .not-connected .if-connected     { display: none; }
  27 .not-connected .if-started       { display: none; }
  28 .connecting    .if-not-connected { display: none; }
  29 .connecting    .if-connected     { display: none; }
  30 .connecting    .if-started       { display: none; }
  31 .connected     .if-not-connected { display: none; }
  32 .connected     .if-connecting    { display: none; }
  33 .connected     .if-started       { display: none; }
  34 .started       .if-not-connected { display: none; }
  35 .started       .if-connecting    { display: none; }
  36 .started       .if-connected     { display: none; }
  37
  38 .content{
  39         position: absolute;
  40         left:0;
  41         right:0;
  42         bottom:0;
  43         top: 50px;
  44         padding:0;
  45         overflow: hidden;
  46 }
  47
  48 .quad {
  49         position: relative;
  50         overflow: hidden;
  51         width:100%;
  52         height:50%;
  53         padding:0;
  54         margin: 0;
  55         box-sizing:border-box;
  56         -moz-box-sizing:border-box;
  57         -webkit-box-sizing:border-box;
  58         border: 4px ridge silver;
  59         border-radius: 15px;
  60         text-align: left;
  61 }
  62
  63 .center {
  64         display: table-cell;
  65         width:100%;
  66         height:100%;
  67         vertical-align: middle;
  68 }
  69
  70 #quad1 { border-bottom-right-radius: 0;}
  71 #quad2 { border-bottom-left-radius: 0; }
  72 #quad3 { border-top-right-radius: 0; overflow: auto; }
  73 #quad4 { border-top-left-radius: 0; }
  74
  75 /* in quad 1 */
  76 #view1,#view2 {
  77         position: relative;
  78         width: auto !important;
  79         height: auto !important;
  80         min-width: 100%;
  81         min-height: 100%;
  82         display: block;
  83         top: 50%;
  84         left: 50%;
  85         transform: translate(-50%,-50%);
  86         -webkit-transform: translate(-50%,-50%);
  87 }
  88
  89 .number { text-align: center; vertical-align: middle; font: italic bold 12px monospace; }
  90
  91 /*
  92 #espan { position: absolute; left: 1em; bottom: 1em; }
  93 #espeed { position: absolute; top: 30px; width: 100px; color: green; font-size: 28px; }
  94
  95 #vspan { position: absolute; right: 1em; bottom: 1em; }
  96 #vspeed { position: absolute; top: 16px; width: 100px; color: cyan; font-size: 42px; }
  97 */
  98
  99 #cluster {
 100         position: absolute;
 101         bottom:0;
 102         left:0;
 103         right:0;
 104         background: rgba(50,50,50,.4);
 105         height: 43%;
 106         border-top: 2px outset silver;
 107         border-top-left-radius: 50%;
 108         border-top-right-radius: 50%;
 109 }
 110
 111 #torqueGauge    { position: absolute; bottom: -2%; left: 1%; width: 14%; }
 112 #rpmGauge               { position: absolute; bottom: -4%; left: 16%; width: 21%; }
 113 #speedGauge             { position: absolute; bottom: -3%; left: 38%; width: 24%; }
 114 #MAFGauge               { position: absolute; bottom: -4%; right: 16%; width: 21%; }
 115 #IATempGauge    { position: absolute; bottom: -2%;  right: 1%; width: 14%; }
 116
 117 /* in quad 2 */
 118 #mapstreet {
 119         position: absolute;
 120         width: 100%;
 121         height: 100%;
 122 }
 123
 124 #car {
 125         position: absolute;
 126         top: 50%;
 127         left: 50%;
 128         z-index: 2000;
 129
 130 }
 131
 132 #gaspan { position: absolute; bottom:0; left:0; right:0; background: rgba(200,200,200,.3); padding: 1em; z-index: 2000;}
 133
 134 #gas { position: relative; float: right; width: 69px; height: 92px; }
 135 #gas div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; }
 136
 137 #copan { overflow: hidden; min-height: 50px; position: relative; height: 92px;}
 138 #copan div {
 139         display:inline;
 140         position: absolute;
 141         bottom: 0;
 142         width: 10%;
 143         height: 0%;
 144         font-size: 10px;
 145         color: black;
 146         background: yellow;
 147         border: 1px solid grey;
 148         padding: 0;
 149 }
 150 #copan div p {
 151         text-align: center;
 152         position: absolute;
 153         bottom: 2px;
 154         margin: 0;
 155         width: 100%;
 156 }
 157
 158 #con1 { left: 0%; }
 159 #con2 { left: 11%; }
 160 #con3 { left: 22%; }
 161 #con4 { left: 33%; }
 162 #con5 { left: 44%; }
 163 #con6 { left: 55%; }
 164 #con7 { left: 66%; }
 165 #con8 { left: 77%; }
 166 #con9 { left: 88%; }
 167
 168 #gpblack { background: url(/images/gas-pump-black.png); }
 169 #gpgreen { background: url(/images/gas-pump-green.png); }
 170 #gpred { background: url(/images/gas-pump-red.png); visibility: hidden; }
 171
 172 /* quad 3 */
 173 #xcdata {
 174         text-align: left;
 175 }
 176
 177 .leaflet-control-layers-toggle {
 178     background-image: url(/images/layers.png);
 179 }
 180
 181 /* quad 4 */
 182 #mapsat {
 183         position: absolute;
 184         width: 100%;
 185         height: 100%;
 186 }
 187