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