Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 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 { |
Torne (Richard Coles) | c2e0dbd | 2013-05-09 18:35:53 +0100 | [diff] [blame] | 8 | color: rgb(48, 57, 66); |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 9 | font-family: Arial, sans-serif; |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 10 | font-size: 13px; |
| 11 | margin: 0; |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 12 | min-width: 47em; |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 13 | padding: 20px 20px 65px 0; |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 14 | } |
| 15 | |
| 16 | img { |
| 17 | float: left; |
| 18 | height: 16px; |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 19 | padding-left: 2px; |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 20 | padding-right: 5px; |
| 21 | width: 16px; |
| 22 | } |
| 23 | |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 24 | #container { |
| 25 | -webkit-flex-direction: row; |
| 26 | display: -webkit-flex; |
| 27 | } |
| 28 | |
| 29 | #navigation { |
| 30 | width: 150px; |
| 31 | } |
| 32 | |
| 33 | #content { |
| 34 | -webkit-flex: 1; |
| 35 | } |
| 36 | |
| 37 | #caption { |
| 38 | color: rgb(92, 97, 102); |
| 39 | font-size: 150%; |
| 40 | padding-bottom: 10px; |
| 41 | padding-left: 20px; |
| 42 | } |
| 43 | |
| 44 | .tab-header { |
| 45 | -webkit-border-start: 6px solid transparent; |
| 46 | padding-left: 15px; |
| 47 | } |
| 48 | |
| 49 | .tab-header.selected { |
| 50 | -webkit-border-start-color: rgb(78, 87, 100); |
| 51 | } |
| 52 | |
| 53 | .tab-header > button { |
| 54 | background-color: white; |
| 55 | border: 0; |
| 56 | cursor: pointer; |
| 57 | font: inherit; |
| 58 | line-height: 17px; |
| 59 | margin: 6px 0; |
| 60 | padding: 0 2px; |
| 61 | } |
| 62 | |
| 63 | .tab-header:not(.selected) > button { |
| 64 | color: #999; |
| 65 | } |
| 66 | |
| 67 | #content > div:not(.selected) { |
| 68 | display: none; |
| 69 | } |
| 70 | |
| 71 | .content-header { |
Torne (Richard Coles) | c2e0dbd | 2013-05-09 18:35:53 +0100 | [diff] [blame] | 72 | border-bottom: 1px solid #eee; |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 73 | font-size: 150%; |
| 74 | padding-bottom: 4px; |
| 75 | } |
| 76 | |
| 77 | .section { |
| 78 | font-size: 150%; |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 79 | margin: 10px 0 0; |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 80 | padding: 2px 0; |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 81 | } |
| 82 | |
Torne (Richard Coles) | c2e0dbd | 2013-05-09 18:35:53 +0100 | [diff] [blame] | 83 | .small-section { |
| 84 | font-weight: bold; |
| 85 | margin: 5px 0 0; |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 86 | padding: 2px 0; |
Torne (Richard Coles) | c2e0dbd | 2013-05-09 18:35:53 +0100 | [diff] [blame] | 87 | } |
| 88 | |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 89 | .row { |
Ben Murdoch | ca12bfa | 2013-07-23 11:17:05 +0100 | [diff] [blame] | 90 | padding: 5px 0; |
Torne (Richard Coles) | 5821806 | 2012-11-14 11:43:16 +0000 | [diff] [blame] | 91 | } |
| 92 | |
| 93 | .url { |
| 94 | color: #A0A0A0; |
| 95 | } |
Torne (Richard Coles) | c2e0dbd | 2013-05-09 18:35:53 +0100 | [diff] [blame] | 96 | |
| 97 | .list { |
| 98 | margin-bottom: 20px; |
| 99 | margin-top: 5px; |
| 100 | } |
| 101 | |
| 102 | a { |
| 103 | color: rgb(17, 85, 204); |
Ben Murdoch | bb1529c | 2013-08-08 10:24:53 +0100 | [diff] [blame^] | 104 | padding: 0 3px; |
Torne (Richard Coles) | c2e0dbd | 2013-05-09 18:35:53 +0100 | [diff] [blame] | 105 | text-decoration: none; |
| 106 | } |
Ben Murdoch | 2385ea3 | 2013-08-06 11:01:04 +0100 | [diff] [blame] | 107 | |
Ben Murdoch | bb1529c | 2013-08-08 10:24:53 +0100 | [diff] [blame^] | 108 | a.disabled { |
| 109 | opacity: 0.5; |
| 110 | pointer-events: none; |
| 111 | } |
| 112 | |
| 113 | .open { |
| 114 | margin-bottom: -4px; |
| 115 | margin-top: 5px; |
| 116 | } |
| 117 | |
| 118 | .open > input { |
| 119 | border: 1px solid #aaa; |
| 120 | height: 17px; |
| 121 | line-height: 17px; |
| 122 | margin-left: 20px; |
| 123 | padding: 0 2px; |
| 124 | } |
| 125 | |
| 126 | .open > button { |
| 127 | line-height: 13px; |
| 128 | } |
| 129 | |
Ben Murdoch | 2385ea3 | 2013-08-06 11:01:04 +0100 | [diff] [blame] | 130 | #port-forwarding-settings { |
| 131 | position: absolute; |
| 132 | right: 20px; |
| 133 | top: 15px; |
| 134 | } |
| 135 | |
| 136 | #port-forwarding-overlay { |
| 137 | -webkit-box-align: center; |
| 138 | -webkit-box-pack: center; |
| 139 | background-color: rgba(255, 255, 255, 0.75); |
| 140 | bottom: 0; |
| 141 | display: -webkit-box; |
| 142 | left: 0; |
| 143 | position: absolute; |
| 144 | right: 0; |
| 145 | top: 0; |
| 146 | } |
| 147 | |
| 148 | #port-forwarding-overlay:not(.open) { |
| 149 | display: none; |
| 150 | } |
| 151 | |
| 152 | #port-forwarding-config { |
| 153 | -webkit-border-radius: 3px; |
| 154 | background: white; |
| 155 | box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); |
| 156 | color: #333; |
| 157 | padding: 17px; |
| 158 | position: relative; |
| 159 | } |
| 160 | |
| 161 | .close-button { |
| 162 | background-image: url('chrome://theme/IDR_CLOSE_DIALOG'); |
| 163 | height: 14px; |
| 164 | width: 14px; |
| 165 | } |
| 166 | |
| 167 | .close-button:active { |
| 168 | background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P'); |
| 169 | } |
| 170 | |
| 171 | .close-button:hover { |
| 172 | background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H'); |
| 173 | } |
| 174 | |
| 175 | #port-forwarding-config > .close-button { |
| 176 | position: absolute; |
| 177 | right: 7px; |
| 178 | top: 7px; |
| 179 | } |
| 180 | |
| 181 | #port-forwarding-config-title { |
| 182 | font-size: 130%; |
| 183 | } |
| 184 | |
| 185 | #port-forwarding-config-list { |
| 186 | border: 1px solid #eee; |
| 187 | height: 180px; |
| 188 | margin-bottom: 10px; |
| 189 | margin-top: 10px; |
| 190 | overflow-x: hidden; |
| 191 | } |
| 192 | |
| 193 | .port-forwarding-pair { |
| 194 | -webkit-flex-direction: row; |
| 195 | display: -webkit-flex; |
| 196 | } |
| 197 | |
| 198 | .port-forwarding-pair:hover { |
| 199 | background-color: #eee; |
| 200 | } |
| 201 | |
| 202 | .port-forwarding-pair.selected, |
| 203 | .port-forwarding-pair.selected:hover { |
| 204 | background-color: #ccc; |
| 205 | } |
| 206 | |
| 207 | .port-forwarding-pair input { |
| 208 | border: 1px solid transparent; |
| 209 | line-height: 20px; |
| 210 | margin: 4px; |
| 211 | padding: 0 3px; |
| 212 | } |
| 213 | |
| 214 | .port-forwarding-pair.fresh:not(.selected) input { |
| 215 | border-color: #eee; |
| 216 | } |
| 217 | |
| 218 | .port-forwarding-pair input.port { |
| 219 | width: 4em; |
| 220 | } |
| 221 | |
| 222 | .port-forwarding-pair input.location { |
| 223 | -webkit-flex: 1; |
| 224 | } |
| 225 | |
| 226 | .port-forwarding-pair:not(.empty) input.invalid { |
| 227 | background-color: rgb(255, 200, 200); |
| 228 | } |
| 229 | |
| 230 | .port-forwarding-pair .close-button { |
| 231 | margin: 8px 8px; |
| 232 | } |
| 233 | |
| 234 | .port-forwarding-pair.fresh .close-button, |
| 235 | .port-forwarding-pair:not(.selected):not(:hover) .close-button:not(:hover) { |
| 236 | background-image: none; |
| 237 | pointer-events: none; |
| 238 | } |
| 239 | |
| 240 | .port-forwarding-pair:not(.selected) .close-button:not(:hover) { |
| 241 | opacity: 0.5; |
| 242 | } |
| 243 | |
| 244 | #port-forwarding-config-buttons > button { |
| 245 | float: right; |
| 246 | } |