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 #devices-help {
  78   margin-top: 10px;
  79 }
  80
  81 .device-header {
  82   -webkit-box-align: baseline;
  83   -webkit-box-orient: horizontal;
  84   display: -webkit-box;
  85   margin: 10px 0 0;
  86   padding: 2px 0;
  87 }
  88
  89 .device-name {
  90   font-size: 150%;
  91 }
  92
  93 .device-serial {
  94   color: #888;
  95   font-size: 80%;
  96   margin-left: 6px;
  97 }
  98
  99 .device-ports {
 100   -webkit-box-orient: horizontal;
 101   display: -webkit-box;
 102   margin-left: 8px;
 103 }
 104
 105 .port-icon {
 106   -webkit-border-radius: 6px;
 107   background-color: rgb(64, 192, 64);
 108   border: 0 solid transparent;
 109   height: 12px;
 110   margin: 2px;
 111   width: 12px;
 112 }
 113
 114 .port-icon.error {
 115   background-color: rgb(224, 32, 32);
 116 }
 117
 118 .port-icon.connected {
 119   -webkit-transform: scale(1.2);
 120   background-color: rgb(0, 255, 0);
 121 }
 122
 123 .port-icon.transient {
 124   -webkit-transform: scale(1.2);
 125   background-color: orange;
 126 }
 127
 128 .port-number {
 129   height: 16px;
 130   margin-right: 5px;
 131 }
 132
 133 .browser-header {
 134   -webkit-box-align: center;
 135   -webkit-box-orient: horizontal;
 136   display: -webkit-box;
 137   padding-top: 10px;
 138 }
 139
 140 .browser-header > .browser-name {
 141   font-size: 110%;
 142   font-weight: bold;
 143 }
 144
 145 .row {
 146   padding: 6px 0;
 147   position: relative;
 148 }
 149
 150 .subrow-box {
 151   display: inline-block;
 152   vertical-align: top;
 153 }
 154
 155 .subrow {
 156   -webkit-box-orient: horizontal;
 157   display: -webkit-box;
 158 }
 159
 160 .subrow > div {
 161   margin-right: 0.5em;
 162 }
 163
 164 .webview-thumbnail {
 165   display: inline-block;
 166   margin-right: 5px;
 167   overflow: hidden;
 168   position: relative;
 169   vertical-align: top;
 170 }
 171
 172 .screen-rect {
 173   background-color: #eee;
 174   position: absolute;
 175 }
 176
 177 .view-rect {
 178   background-color: #ccc;
 179   min-height: 1px;
 180   min-width: 1px;
 181   position: absolute;
 182 }
 183
 184 .view-rect.hidden {
 185   background-color: #ddd;
 186 }
 187
 188 .guest {
 189   padding-left: 20px;
 190 }
 191
 192 .invisible-view {
 193   color: rgb(151, 156, 160);
 194 }
 195
 196 .url {
 197   color: #A0A0A0;
 198 }
 199
 200 .list {
 201   margin-top: 5px;
 202 }
 203
 204 .action {
 205   color: rgb(17, 85, 204);
 206   cursor: pointer;
 207   margin-right: 15px;
 208 }
 209
 210 .action:hover {
 211   text-decoration: underline;
 212 }
 213
 214 .list:not(.pages) .subrow {
 215   height: 19px;
 216 }
 217
 218 .action.disabled {
 219   opacity: 0.5;
 220   pointer-events: none;
 221 }
 222
 223 .open > input {
 224   border: 1px solid #aaa;
 225   height: 17px;
 226   line-height: 17px;
 227   margin-left: 20px;
 228   padding: 0 2px;
 229 }
 230
 231 .open > input:focus {
 232   -webkit-transition: border-color 200ms;
 233   border-color: rgb(77, 144, 254);
 234   outline: none;
 235 }
 236
 237 .open > button {
 238   line-height: 13px;
 239 }
 240
 241 #device-settings {
 242   border-bottom: 1px solid #eee;
 243   padding: 5px 0;
 244 }
 245
 246 #device-settings input {
 247   vertical-align: middle;
 248 }
 249
 250 #device-settings button {
 251   margin-left: 15px;
 252 }
 253
 254 #port-forwarding-overlay {
 255   -webkit-box-align: center;
 256   -webkit-box-pack: center;
 257   background-color: rgba(255, 255, 255, 0.75);
 258   bottom: 0;
 259   display: -webkit-box;
 260   left: 0;
 261   position: absolute;
 262   right: 0;
 263   top: 0;
 264 }
 265
 266 #port-forwarding-overlay:not(.open) {
 267   display: none;
 268 }
 269
 270 #port-forwarding-config {
 271   -webkit-border-radius: 3px;
 272   background: white;
 273   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
 274   color: #333;
 275   padding: 17px 17px 12px;
 276   position: relative;
 277 }
 278
 279 .close-button {
 280   background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
 281   height: 14px;
 282   width: 14px;
 283 }
 284
 285 .close-button:active {
 286   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 287 }
 288
 289 .close-button:hover {
 290   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 291 }
 292
 293 #port-forwarding-config > .close-button {
 294   position: absolute;
 295   right: 7px;
 296   top: 7px;
 297 }
 298
 299 #port-forwarding-config-title {
 300   font-size: 130%;
 301 }
 302
 303 #port-forwarding-config-list {
 304   border: 1px solid #eee;
 305   height: 180px;
 306   margin-bottom: 10px;
 307   margin-top: 10px;
 308   overflow-x: hidden;
 309 }
 310
 311 .port-forwarding-pair {
 312   -webkit-flex-direction: row;
 313   display: -webkit-flex;
 314 }
 315
 316 .port-forwarding-pair:hover {
 317   background-color: #eee;
 318 }
 319
 320 .port-forwarding-pair.selected,
 321 .port-forwarding-pair.selected:hover {
 322   background-color: #ccc;
 323 }
 324
 325 .port-forwarding-pair input {
 326   border: 1px solid transparent;
 327   line-height: 20px;
 328   margin: 4px;
 329   padding: 0 3px;
 330 }
 331
 332 .port-forwarding-pair.fresh:not(.selected) input {
 333   border-color: #eee;
 334 }
 335
 336 .port-forwarding-pair input.port {
 337   width: 4em;
 338 }
 339
 340 .port-forwarding-pair input.location {
 341   -webkit-flex: 1;
 342 }
 343
 344 .port-forwarding-pair:not(.empty) input.invalid {
 345   background-color: rgb(255, 200, 200);
 346 }
 347
 348 .port-forwarding-pair .close-button {
 349   margin: 8px 8px;
 350 }
 351
 352 .port-forwarding-pair.fresh .close-button,
 353 .port-forwarding-pair:not(.selected):not(:hover) .close-button:not(:hover) {
 354   background-image: none;
 355   pointer-events: none;
 356 }
 357
 358 .port-forwarding-pair:not(.selected) .close-button:not(:hover) {
 359   opacity: 0.5;
 360 }
 361
 362 #port-forwarding-enable {
 363   vertical-align: middle;
 364 }
 365
 366 #port-forwarding-config-buttons > button {
 367   float: right;
 368 }
 369
 370 #port-forwarding-config-buttons > label {
 371   position: relative;
 372   top: 5px;
 373 }