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