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