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