src/chrome/browser/resources/inspect/inspect.css

   1 /*
   2  * Copyright (c) 2012 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  */
   6
   7 body {
   8   color: rgb(48, 57, 66);
   9   font-family: Arial, sans-serif;
  10   font-size: 13px;
  11   margin: 0;
  12   min-width: 47em;
  13   padding: 20px 20px 65px 0;
  14 }
  15
  16 img {
  17   height: 16px;
  18   padding-left: 2px;
  19   padding-right: 5px;
  20   vertical-align: top;
  21   width: 16px;
  22 }
  23
  24 #container {
  25   -webkit-flex-direction: row;
  26   display: -webkit-flex;
  27 }
  28
  29 #navigation {
  30   width: 150px;
  31 }
  32
  33 #content {
  34   -webkit-flex: 1;
  35 }
  36
  37 #caption {
  38   color: rgb(92, 97, 102);
  39   font-size: 150%;
  40   padding-bottom: 10px;
  41   padding-left: 20px;
  42 }
  43
  44 .tab-header {
  45   -webkit-border-start: 6px solid transparent;
  46   padding-left: 15px;
  47 }
  48
  49 .tab-header.selected {
  50   -webkit-border-start-color: rgb(78, 87, 100);
  51 }
  52
  53 .tab-header > button {
  54   background-color: white;
  55   border: 0;
  56   cursor: pointer;
  57   font: inherit;
  58   line-height: 17px;
  59   margin: 6px 0;
  60   padding: 0 2px;
  61 }
  62
  63 .tab-header:not(.selected) > button {
  64   color: #999;
  65 }
  66
  67 #content > div:not(.selected) {
  68   display: none;
  69 }
  70
  71 .content-header {
  72   border-bottom: 1px solid #eee;
  73   font-size: 150%;
  74   padding-bottom: 10px;
  75 }
  76
  77 .device-header {
  78   -webkit-box-align: baseline;
  79   -webkit-box-orient: horizontal;
  80   display: -webkit-box;
  81   margin: 10px 0 0;
  82   padding: 2px 0;
  83 }
  84
  85 .device-name {
  86   font-size: 150%;
  87 }
  88
  89 .device-serial {
  90   color: #888;
  91   font-size: 80%;
  92   margin-left: 6px;
  93 }
  94
  95 .device-ports {
  96   -webkit-box-orient: horizontal;
  97   display: -webkit-box;
  98   margin-left: 8px;
  99 }
 100
 101 .port-icon {
 102   -webkit-border-radius: 6px;
 103   background-color: rgb(64, 192, 64);
 104   border: 0 solid transparent;
 105   height: 12px;
 106   margin: 2px;
 107   width: 12px;
 108 }
 109
 110 .port-icon.error {
 111   background-color: rgb(224, 32, 32);
 112 }
 113
 114 .port-icon.connected {
 115   -webkit-transform: scale(1.2);
 116   background-color: rgb(0, 255, 0);
 117 }
 118
 119 .port-icon.transient {
 120   -webkit-transform: scale(1.2);
 121   background-color: orange;
 122 }
 123
 124 .port-number {
 125   height: 16px;
 126   margin-right: 5px;
 127 }
 128
 129 .browser-header {
 130   -webkit-box-align: center;
 131   -webkit-box-orient: horizontal;
 132   display: -webkit-box;
 133   padding-top: 10px;
 134 }
 135
 136 .browser-header > .browser-name {
 137   font-size: 110%;
 138   font-weight: bold;
 139 }
 140
 141 .row {
 142   padding: 6px 0;
 143   position: relative;
 144 }
 145
 146 .subrow-box {
 147   display: inline-block;
 148   vertical-align: top;
 149 }
 150
 151 .subrow {
 152   -webkit-box-orient: horizontal;
 153   display: -webkit-box;
 154 }
 155
 156 .subrow > div {
 157   margin-right: 0.5em;
 158 }
 159
 160 .webview-thumbnail {
 161   display: inline-block;
 162   margin-right: 5px;
 163   overflow: hidden;
 164   position: relative;
 165   vertical-align: top;
 166 }
 167
 168 .screen-rect {
 169   background-color: #eee;
 170   position: absolute;
 171 }
 172
 173 .view-rect {
 174   background-color: #ccc;
 175   min-height: 1px;
 176   min-width: 1px;
 177   position: absolute;
 178 }
 179
 180 .view-rect.hidden {
 181   background-color: #ddd;
 182 }
 183
 184 .guest {
 185   padding-left: 20px;
 186 }
 187
 188 .invisible-view {
 189   color: rgb(151, 156, 160);
 190 }
 191
 192 .url {
 193   color: #A0A0A0;
 194 }
 195
 196 .list {
 197   margin-top: 5px;
 198 }
 199
 200 a {
 201   color: rgb(17, 85, 204);
 202   margin-right: 15px;
 203 }
 204
 205 a:not(:hover) {
 206   text-decoration: none;
 207 }
 208
 209 .list:not(.pages) .subrow {
 210   height: 19px;
 211 }
 212
 213 a.disabled {
 214   opacity: 0.5;
 215   pointer-events: none;
 216 }
 217
 218 .open > input {
 219   border: 1px solid #aaa;
 220   height: 17px;
 221   line-height: 17px;
 222   margin-left: 20px;
 223   padding: 0 2px;
 224 }
 225
 226 .open > input:focus {
 227   -webkit-transition: border-color 200ms;
 228   border-color: rgb(77, 144, 254);
 229   outline: none;
 230 }
 231
 232 .open > button {
 233   line-height: 13px;
 234 }
 235
 236 #device-settings {
 237   border-bottom: 1px solid #eee;
 238   padding: 5px 0;
 239 }
 240
 241 #device-settings input {
 242   vertical-align: middle;
 243 }
 244
 245 #device-settings button {
 246   margin-left: 15px;
 247 }
 248
 249 #port-forwarding-overlay {
 250   -webkit-box-align: center;
 251   -webkit-box-pack: center;
 252   background-color: rgba(255, 255, 255, 0.75);
 253   bottom: 0;
 254   display: -webkit-box;
 255   left: 0;
 256   position: absolute;
 257   right: 0;
 258   top: 0;
 259 }
 260
 261 #port-forwarding-overlay:not(.open) {
 262   display: none;
 263 }
 264
 265 #port-forwarding-config {
 266   -webkit-border-radius: 3px;
 267   background: white;
 268   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
 269   color: #333;
 270   padding: 17px 17px 12px;
 271   position: relative;
 272 }
 273
 274 .close-button {
 275   background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
 276   height: 14px;
 277   width: 14px;
 278 }
 279
 280 .close-button:active {
 281   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 282 }
 283
 284 .close-button:hover {
 285   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 286 }
 287
 288 #port-forwarding-config > .close-button {
 289   position: absolute;
 290   right: 7px;
 291   top: 7px;
 292 }
 293
 294 #port-forwarding-config-title {
 295   font-size: 130%;
 296 }
 297
 298 #port-forwarding-config-list {
 299   border: 1px solid #eee;
 300   height: 180px;
 301   margin-bottom: 10px;
 302   margin-top: 10px;
 303   overflow-x: hidden;
 304 }
 305
 306 .port-forwarding-pair {
 307   -webkit-flex-direction: row;
 308   display: -webkit-flex;
 309 }
 310
 311 .port-forwarding-pair:hover {
 312   background-color: #eee;
 313 }
 314
 315 .port-forwarding-pair.selected,
 316 .port-forwarding-pair.selected:hover {
 317   background-color: #ccc;
 318 }
 319
 320 .port-forwarding-pair input {
 321   border: 1px solid transparent;
 322   line-height: 20px;
 323   margin: 4px;
 324   padding: 0 3px;
 325 }
 326
 327 .port-forwarding-pair.fresh:not(.selected) input {
 328   border-color: #eee;
 329 }
 330
 331 .port-forwarding-pair input.port {
 332   width: 4em;
 333 }
 334
 335 .port-forwarding-pair input.location {
 336   -webkit-flex: 1;
 337 }
 338
 339 .port-forwarding-pair:not(.empty) input.invalid {
 340   background-color: rgb(255, 200, 200);
 341 }
 342
 343 .port-forwarding-pair .close-button {
 344   margin: 8px 8px;
 345 }
 346
 347 .port-forwarding-pair.fresh .close-button,
 348 .port-forwarding-pair:not(.selected):not(:hover) .close-button:not(:hover) {
 349   background-image: none;
 350   pointer-events: none;
 351 }
 352
 353 .port-forwarding-pair:not(.selected) .close-button:not(:hover) {
 354   opacity: 0.5;
 355 }
 356
 357 #port-forwarding-enable {
 358   vertical-align: middle;
 359 }
 360
 361 #port-forwarding-config-buttons > button {
 362   float: right;
 363 }
 364
 365 #port-forwarding-config-buttons > label {
 366   position: relative;
 367   top: 5px;
 368 }