chrome/browser/resources/inspect/inspect.css

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