LCARStrek/browser/devtools/app-manager/device.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /*****************      GENERAL      *****************/
   6
   7 * {
   8   margin: 0;
   9   padding: 0;
  10   box-sizing: border-box;
  11 }
  12
  13 html, body {
  14   height: 100%;
  15 }
  16
  17 body {
  18   font-size: 0.9rem;
  19   color: #FF9F00;
  20   background-color: #000000;
  21   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  22   display: flex;
  23   flex-direction: column;
  24 }
  25
  26 template {
  27   display: none;
  28 }
  29
  30 h1 {
  31   font-size: 20px;
  32 }
  33
  34 #content {
  35   display: flex;
  36   flex-direction: row;
  37   height: 100%;
  38   overflow: hidden;
  39 }
  40
  41 #detail {
  42   display: flex;
  43   flex-grow: 1;
  44   z-index: 1;
  45   overflow: hidden;
  46 }
  47
  48 #meta {
  49   background-size: 100%;
  50   padding-top: 50px;
  51 }
  52
  53 #connection-footer {
  54   border-width: 0;
  55   height: 50px;
  56   min-height: 50px;
  57 }
  58
  59
  60
  61 /*****************     APP BUTTONS      *****************/
  62
  63
  64
  65 .app-buttons {
  66   display: block;
  67   margin-left: 20px;
  68   color: #FF9F00;
  69 }
  70
  71 button {
  72   margin: 0;
  73   font-size: 11px;
  74   padding: 5px 15px;
  75   cursor: pointer;
  76   background-color: #C09070;
  77   text-transform: uppercase;
  78   border-radius: 300px;
  79   border-width: 1px;
  80 }
  81
  82 .app-buttons > button {
  83   display: none;
  84 }
  85
  86 .app-buttons > button:not([disabled]):hover {
  87   background-color: #FFCF00;
  88   color: #000000;
  89 }
  90
  91 .app-buttons > button[disabled] {
  92   background-color: #402858;
  93   color: #000000;
  94   pointer-events: none;
  95 }
  96
  97 .app[running="false"] > .app-buttons > .button-start,
  98 .app[running="true"] > .app-buttons > .button-stop,
  99 .app[running="true"] > .app-buttons > .button-debug {
 100   display: inline-block;
 101 }
 102 /*
 103 .button-debug {
 104   color: #3498DB;
 105 }
 106
 107 .button-debug:hover {
 108   background-color: #3498DB;
 109   color: #FFF;
 110 }
 111
 112 .button-debug[disabled] {
 113   color: #3498DB;
 114 }
 115
 116 .button-start {
 117   color: #18BC9C
 118 }
 119
 120 .button-start:hover {
 121   background-color: #18BC9C;
 122   color: #FFF;
 123 }
 124
 125 .button-start[disabled] {
 126   color: #18BC9C
 127 }
 128
 129 .button-stop {
 130   color: #E74C3C;
 131 }
 132
 133 .button-stop:hover {
 134   background-color: #E74C3C;
 135   color: #FFF;
 136 }
 137
 138 .button-stop[disabled] {
 139   color: #E74C3C;
 140 }
 141 */
 142
 143
 144 /*****************     PERMISSIONS     *****************/
 145
 146
 147
 148
 149 .permission-table {
 150   display: flex;
 151   flex-direction: column;
 152   height: 100%;
 153 }
 154
 155 .permission-table-body {
 156   overflow: auto;
 157   display: flex;
 158   flex-grow: 1;
 159   flex-direction: column;
 160 }
 161
 162 .permission-table-header,
 163 .permission-table-footer {
 164   display: flex;
 165   background: #000000;
 166   border-top: 1px solid #9C9CFF;
 167   z-index: 2;
 168   flex-shrink: 0;
 169 }
 170
 171 .permission-table-header > div,
 172 .permission-table-footer > div {
 173   z-index: 2;
 174   flex-grow: 1;
 175   background-color: #000000;
 176   color: #FF9F00;
 177   border: 0;
 178   margin: auto 0;
 179   padding: 5px;
 180   text-align: center;
 181   background: transparent;
 182   box-shadow: none;
 183   text-shadow: none;
 184 }
 185
 186 .permission-table-header > div {
 187   flex-basis: 20%;
 188 }
 189
 190 .permission-table-header > div:first-child {
 191   text-align: left;
 192   padding-left: 10px;
 193   flex-basis: 30%;
 194 }
 195
 196 .permission-table-header {
 197   border: 0;
 198   border-bottom: 1px solid #9C9CFF;
 199 /*  box-shadow: 0 1px 4px rgba(0,0,0,0.3);*/
 200 }
 201
 202 .permission-table-footer {
 203 /*  box-shadow: 0 -1px 4px rgba(0,0,0,0.3);*/
 204 }
 205
 206 .permission {
 207   display: flex;
 208   flex-grow: 1;
 209 }
 210
 211 .permission:nth-child(odd) {
 212   background-color: #404000;
 213 }
 214
 215 .permission:hover {
 216   background-color: #FFCF00;
 217   color: #000000;
 218 }
 219
 220 .permission > div {
 221   flex-grow: 1;
 222   flex-basis: 20%;
 223   text-align: center;
 224   padding: 3px;
 225   border-right: 1px solid #9C9CFF;
 226   border-bottom: 1px solid #9C9CFF;
 227 }
 228
 229 .permission > div:first-child {
 230   text-align: left;
 231   padding: 3px 10px;
 232   flex-basis: 30%;
 233   font-weight: bold;
 234 }
 235
 236 .permission > div[permission="1"]:before, .allow-label:after {
 237   color: #008484;
 238   content: '   \2713';
 239 }
 240
 241 .permission > div[permission="2"]:before, .deny-label:after {
 242   color: #FF0000;
 243   content: '   \2715';
 244 }
 245
 246 .permission > div[permission="3"]:before, .prompt-label:after {
 247   color: #9C9CFF;
 248   content: '   !';
 249 }
 250
 251
 252
 253
 254 /*****************     SIDEBAR      *****************/
 255
 256
 257
 258
 259 #sidebar {
 260   background: #000000;
 261   position: relative;
 262   display: flex;
 263   flex-direction: column;
 264   flex: 0 0 350px;
 265   overflow: hidden;
 266   z-index: 100;
 267 }
 268
 269 .sidebar-item {
 270   background-color: #000000;
 271   color: #FF9F00;
 272   line-height: 120%;
 273   cursor: pointer;
 274   display: flex;
 275   padding: 15px 10px;
 276   display: block;
 277   text-align: left;
 278   flex-grow: 1;
 279 }
 280
 281 .sidebar-item > * {
 282   flex-shrink: 0;
 283 }
 284
 285 .sidebar-item:hover,
 286 .sidebar-item.selected:hover {
 287   background-color: #FFCF00;
 288   color: #000000
 289 }
 290
 291 .sidebar-item.selected {
 292   background-color: #008484;
 293   color: #000000;
 294 }
 295
 296 .help {
 297   float: right;
 298   padding: 0 5px;
 299 }
 300
 301 /*****************     HEADER      *****************/
 302
 303 header {
 304   padding-top: 140px;
 305   color: #9C9CFF;
 306   padding: 10px;
 307 }
 308
 309
 310
 311 /*****************      APPS & BROWSER TABS      *****************/
 312
 313
 314
 315
 316 .apps, .browser-tabs {
 317   display: flex;
 318   flex-direction: column;
 319   overflow: auto;
 320 }
 321
 322 .app, .browser-tab {
 323   display: flex;
 324   align-items: center;
 325   order: 1;
 326 }
 327
 328 .app-name, .browser-tab-details {
 329   flex-grow: 1;
 330   font-weight: bold;
 331 }
 332
 333 .app, .browser-tab {
 334   padding: 10px 20px;
 335   border-bottom: 1px solid #9C9CFF;
 336 }
 337
 338 .app:hover, .browser-tab:hover {
 339   background-color: #404000;
 340 }
 341
 342 .app-icon {
 343   width: 32px;
 344   height: 32px;
 345   margin-right: 10px;
 346 }
 347
 348 .browser-tab-url-subheading {
 349   font-size: 10px;
 350 }
 351
 352
 353
 354 /*****************      NOT CONNECTED      *****************/
 355
 356
 357
 358 body:not(.notconnected) > #notConnectedMessage,
 359 body.notconnected > #content {
 360   display: none;
 361 }
 362
 363 #notConnectedMessage {
 364   flex-grow: 1;
 365   flex-direction: column;
 366   margin: 50px auto;
 367 }
 368
 369 #notConnectedMessage > span {
 370   padding: 20px;
 371   border: 1px solid #9C9CFF;
 372   border-radius: 5px;
 373 }
 374
 375 #notConnectedMessage > span:before {
 376   content: '';
 377   background: url('error.svg') no-repeat;
 378   background-size: 18px;
 379   height: 24px;
 380   width: 24px;
 381   position: relative;
 382   top: 10px;
 383   display: inline-block;
 384 }
 385
 386
 387
 388 /*****************      TABS       *****************/
 389
 390 #tabs {
 391   flex-grow: 1;
 392   overflow: auto;
 393 }
 394
 395 .tabpanel:not(.selected) {
 396   display: none;
 397 }
 398
 399 #tabs-headers {
 400   flex-shrink: 0;
 401   display: flex;
 402   flex-direction: column;
 403 }