LCARStrek/devtools/app-manager/connection-footer.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 /************** LAYOUT **************/
   6
   7 #connection-footer {
   8   display: flex;
   9   flex-direction: column;
  10   height: 50px;
  11 }
  12
  13 #banners-and-logs {
  14   display: flex;
  15   flex-grow: 1;
  16 }
  17
  18 #logs {
  19   display: flex;
  20   width: 40%;
  21   padding: 0;
  22   width: 100%;
  23 }
  24
  25 .banner {
  26   display: none;
  27   width: 60%;
  28 }
  29
  30 #connection-footer[status="connected"]     #banner-connected,
  31 #connection-footer[status="connecting"]    #banner-connecting,
  32 #connection-footer[status="disconnected"]  #banner-disconnected,
  33 #connection-footer[status="disconnecting"] #banner-disconnecting {
  34   display: flex;
  35 }
  36
  37 body.show-simulators .banner,
  38 body.edit-connection .banner {
  39   display: none !important;
  40 }
  41
  42 body.show-simulators #banner-simulators,
  43 body.edit-connection #banner-editing {
  44   display: flex !important;
  45 }
  46
  47 #banner-logs {
  48   width: 40%;
  49   display: flex;
  50 }
  51
  52 #logs > pre {
  53   overflow: auto;
  54   white-space: pre-line;
  55 }
  56
  57 #status.banner-box {
  58   width: 100% !important;
  59 }
  60
  61 .banner-box {
  62   display: flex;
  63   flex-direction: column;
  64   justify-content: center;
  65   width: 100%;
  66 }
  67
  68 #banner-connected > .banner-box {
  69   align-items: flex-start;
  70 }
  71
  72 #start-simulator-box {
  73   display: inline;
  74 }
  75
  76 /************** PIXELS **************/
  77
  78 * {
  79   margin: 0;
  80   padding: 0;
  81   box-sizing: border-box;
  82   font-size: 0.9rem;
  83 }
  84
  85 body {
  86   color: #FF9F00;
  87   background-color: #000000;
  88   font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  89 }
  90
  91 button {
  92   background-color: #C09070;
  93   color: #000000;
  94   border: none;
  95   cursor: pointer;
  96   border-radius: 300px;
  97   padding-top: 1px;
  98   padding-bottom: 2px;
  99   -moz-padding-start: .5em;
 100   -moz-padding-end: calc(.5em + 1px);
 101 }
 102
 103 button.left {
 104   margin-right: 0px;
 105   border-top-right-radius: 0;
 106   border-bottom-right-radius: 0;
 107 }
 108
 109 button.right {
 110   margin-left: -6px;
 111   border-top-left-radius: 0;
 112   border-bottom-left-radius: 0;
 113 }
 114
 115 button.action-primary {
 116   background-color: #A06060;
 117 }
 118
 119 button.action-cancel {
 120 }
 121
 122 button:hover,
 123 button.action-primary:hover {
 124   background-color: #FFCF00;
 125   color: #000000;
 126 }
 127
 128 button:hover:active {
 129   padding-top: 2px;
 130   padding-bottom: 1px;
 131   -moz-padding-start: calc(.5em + 1px);
 132   -moz-padding-end: .5em;
 133 }
 134
 135 #banners-and-logs {
 136 /*  border-top: #9C9CFF solid;*/
 137   border-width: 1px 0;
 138 /*  background: linear-gradient(to bottom, #323A42, #29313A);
 139   color: #A8BABF;*/
 140 }
 141
 142 #status {
 143 /*  background: linear-gradient(to bottom, #454F59, #404952);
 144   box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;*/
 145 }
 146
 147 #logs > pre {
 148   border: 1px solid #A09090;
 149   font-size: 10px;
 150   background: #000000;
 151   padding: 5px;
 152   height: 100%;
 153   padding-left: 20px;
 154   position: relative;
 155 }
 156
 157 #logs > pre span{
 158   color: #9C9CFF;
 159   position: fixed;
 160   right: calc(30% - 15px);
 161   bottom: -1px;
 162 }
 163
 164 #logs > pre b {
 165   font-size: 10px;
 166   color: #A09090;
 167 }
 168
 169 .banner-box {
 170 /*  border-right: 1px solid #111;
 171   background-position: center right;
 172   background-size: 1px 100%;
 173   background-repeat: no-repeat;*/
 174   padding: 10px 20px;
 175   position: relative;
 176 }
 177
 178 .connected-status {
 179   color: #9C9CFF;
 180   padding-bottom: 10px;
 181 }
 182
 183 .connected-status {
 184   font-size: 150%;
 185   top: 10%;
 186   padding-right: 3px;
 187   position: relative;
 188 }
 189
 190 .connected-indicator {
 191   border-radius: 300px;
 192   height: 100%;
 193   flex: 0 0 10px;
 194 }
 195
 196 #banner-connected .connected-indicator,
 197 #banner-connecting .connected-indicator {
 198   background-color: #008484;
 199 }
 200
 201 #banner-simulators .connected-indicator,
 202 #banner-disconnected .connected-indicator,
 203 #banner-editing .connected-indicator,
 204 #banner-disconnecting .connected-indicator {
 205   background-color: #A09090;
 206 }
 207
 208 #banner-simulators .banner-content > * {
 209   display: inline-block;
 210 }
 211
 212 #banner-simulators[simulator-count="0"] .found-simulator,
 213 #banner-simulators:not([simulator-count="0"]) .no-simulator {
 214   display: none;
 215 }
 216
 217 #connection-no-device,
 218 [device-count="0"] > #connection-found-device,
 219 #connection-manual,
 220 #connection-assisted {
 221   display: none;
 222 }
 223
 224 #connection-found-device,
 225 [device-count="0"] > #connection-no-device,
 226 [adb-available="true"] > #connection-assisted,
 227 [adb-available="false"] > #connection-manual {
 228   display: inline;
 229 }