| /* |
| * Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| body { |
| color: rgb(48, 57, 66); |
| font-family: Arial, sans-serif; |
| font-size: 13px; |
| margin: 0; |
| min-width: 47em; |
| padding: 20px 20px 65px 0; |
| } |
| |
| img { |
| height: 16px; |
| padding-left: 2px; |
| padding-right: 5px; |
| vertical-align: top; |
| width: 16px; |
| } |
| |
| #container { |
| -webkit-flex-direction: row; |
| display: -webkit-flex; |
| } |
| |
| #navigation { |
| width: 150px; |
| } |
| |
| #content { |
| -webkit-flex: 1; |
| } |
| |
| #caption { |
| color: rgb(92, 97, 102); |
| font-size: 150%; |
| padding-bottom: 10px; |
| padding-left: 20px; |
| } |
| |
| .tab-header { |
| -webkit-border-start: 6px solid transparent; |
| padding-left: 15px; |
| } |
| |
| .tab-header.selected { |
| -webkit-border-start-color: rgb(78, 87, 100); |
| } |
| |
| .tab-header > button { |
| background-color: white; |
| border: 0; |
| cursor: pointer; |
| font: inherit; |
| line-height: 17px; |
| margin: 6px 0; |
| padding: 0 2px; |
| } |
| |
| .tab-header:not(.selected) > button { |
| color: #999; |
| } |
| |
| #content > div:not(.selected) { |
| display: none; |
| } |
| |
| .content-header { |
| border-bottom: 1px solid #eee; |
| font-size: 150%; |
| padding-bottom: 10px; |
| } |
| |
| #devices-help { |
| margin-top: 10px; |
| } |
| |
| .device-header { |
| -webkit-box-align: baseline; |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| margin: 10px 0 0; |
| padding: 2px 0; |
| } |
| |
| .device-name { |
| font-size: 150%; |
| } |
| |
| .device-serial { |
| color: #888; |
| font-size: 80%; |
| margin-left: 6px; |
| } |
| |
| .device-ports { |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| margin-left: 8px; |
| } |
| |
| .port-icon { |
| -webkit-border-radius: 6px; |
| background-color: rgb(64, 192, 64); |
| border: 0 solid transparent; |
| height: 12px; |
| margin: 2px; |
| width: 12px; |
| } |
| |
| .port-icon.error { |
| background-color: rgb(224, 32, 32); |
| } |
| |
| .port-icon.connected { |
| -webkit-transform: scale(1.2); |
| background-color: rgb(0, 255, 0); |
| } |
| |
| .port-icon.transient { |
| -webkit-transform: scale(1.2); |
| background-color: orange; |
| } |
| |
| .port-number { |
| height: 16px; |
| margin-right: 5px; |
| } |
| |
| .browser-header { |
| -webkit-box-align: center; |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| padding-top: 10px; |
| } |
| |
| .browser-header > .browser-name { |
| font-size: 110%; |
| font-weight: bold; |
| } |
| |
| .row { |
| padding: 6px 0; |
| position: relative; |
| } |
| |
| .subrow-box { |
| display: inline-block; |
| vertical-align: top; |
| } |
| |
| .subrow { |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| } |
| |
| .subrow > div { |
| margin-right: 0.5em; |
| } |
| |
| .webview-thumbnail { |
| display: inline-block; |
| margin-right: 5px; |
| overflow: hidden; |
| position: relative; |
| vertical-align: top; |
| } |
| |
| .screen-rect { |
| background-color: #eee; |
| position: absolute; |
| } |
| |
| .view-rect { |
| background-color: #ccc; |
| min-height: 1px; |
| min-width: 1px; |
| position: absolute; |
| } |
| |
| .view-rect.hidden { |
| background-color: #ddd; |
| } |
| |
| .guest { |
| padding-left: 20px; |
| } |
| |
| .invisible-view { |
| color: rgb(151, 156, 160); |
| } |
| |
| .url { |
| color: #A0A0A0; |
| } |
| |
| .list { |
| margin-top: 5px; |
| } |
| |
| .action { |
| color: rgb(17, 85, 204); |
| cursor: pointer; |
| margin-right: 15px; |
| } |
| |
| .action:hover { |
| text-decoration: underline; |
| } |
| |
| .list:not(.pages) .subrow { |
| height: 19px; |
| } |
| |
| .action.disabled { |
| opacity: 0.5; |
| pointer-events: none; |
| } |
| |
| .open > input { |
| border: 1px solid #aaa; |
| height: 17px; |
| line-height: 17px; |
| margin-left: 20px; |
| padding: 0 2px; |
| } |
| |
| .open > input:focus { |
| -webkit-transition: border-color 200ms; |
| border-color: rgb(77, 144, 254); |
| outline: none; |
| } |
| |
| .open > button { |
| line-height: 13px; |
| } |
| |
| #device-settings { |
| border-bottom: 1px solid #eee; |
| padding: 5px 0; |
| } |
| |
| #device-settings input { |
| vertical-align: middle; |
| } |
| |
| #device-settings button { |
| margin-left: 15px; |
| } |
| |
| #port-forwarding-overlay { |
| -webkit-box-align: center; |
| -webkit-box-pack: center; |
| background-color: rgba(255, 255, 255, 0.75); |
| bottom: 0; |
| display: -webkit-box; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| #port-forwarding-overlay:not(.open) { |
| display: none; |
| } |
| |
| #port-forwarding-config { |
| -webkit-border-radius: 3px; |
| background: white; |
| box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); |
| color: #333; |
| padding: 17px 17px 12px; |
| position: relative; |
| } |
| |
| .close-button { |
| background-image: url('chrome://theme/IDR_CLOSE_DIALOG'); |
| height: 14px; |
| width: 14px; |
| } |
| |
| .close-button:active { |
| background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P'); |
| } |
| |
| .close-button:hover { |
| background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H'); |
| } |
| |
| #port-forwarding-config > .close-button { |
| position: absolute; |
| right: 7px; |
| top: 7px; |
| } |
| |
| #port-forwarding-config-title { |
| font-size: 130%; |
| } |
| |
| #port-forwarding-config-list { |
| border: 1px solid #eee; |
| height: 180px; |
| margin-bottom: 10px; |
| margin-top: 10px; |
| overflow-x: hidden; |
| } |
| |
| .port-forwarding-pair { |
| -webkit-flex-direction: row; |
| display: -webkit-flex; |
| } |
| |
| .port-forwarding-pair:hover { |
| background-color: #eee; |
| } |
| |
| .port-forwarding-pair.selected, |
| .port-forwarding-pair.selected:hover { |
| background-color: #ccc; |
| } |
| |
| .port-forwarding-pair input { |
| border: 1px solid transparent; |
| line-height: 20px; |
| margin: 4px; |
| padding: 0 3px; |
| } |
| |
| .port-forwarding-pair.fresh:not(.selected) input { |
| border-color: #eee; |
| } |
| |
| .port-forwarding-pair input.port { |
| width: 4em; |
| } |
| |
| .port-forwarding-pair input.location { |
| -webkit-flex: 1; |
| } |
| |
| .port-forwarding-pair:not(.empty) input.invalid { |
| background-color: rgb(255, 200, 200); |
| } |
| |
| .port-forwarding-pair .close-button { |
| margin: 8px 8px; |
| } |
| |
| .port-forwarding-pair.fresh .close-button, |
| .port-forwarding-pair:not(.selected):not(:hover) .close-button:not(:hover) { |
| background-image: none; |
| pointer-events: none; |
| } |
| |
| .port-forwarding-pair:not(.selected) .close-button:not(:hover) { |
| opacity: 0.5; |
| } |
| |
| #port-forwarding-enable { |
| vertical-align: middle; |
| } |
| |
| #port-forwarding-config-buttons > button { |
| float: right; |
| } |
| |
| #port-forwarding-config-buttons > label { |
| position: relative; |
| top: 5px; |
| } |