The Tor Browser / annotate

browser/themes/shared/devtools/app-manager/device.css@6474c204b198 (annotated)

browser/themes/shared/devtools/app-manager/device.css

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0 2 * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0 4
michael@0 5 /***************** GENERAL *****************/
michael@0 6
michael@0 7 * {
michael@0 8 margin: 0;
michael@0 9 padding: 0;
michael@0 10 box-sizing: border-box;
michael@0 11 }
michael@0 12
michael@0 13 html, body {
michael@0 14 height: 100%;
michael@0 15 }
michael@0 16
michael@0 17 body {
michael@0 18 font-size: 0.9rem;
michael@0 19 color: #333;
michael@0 20 background-color: rgb(225, 225, 225);
michael@0 21 font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
michael@0 22 display: flex;
michael@0 23 flex-direction: column;
michael@0 24 }
michael@0 25
michael@0 26 template {
michael@0 27 display: none;
michael@0 28 }
michael@0 29
michael@0 30 h1 {
michael@0 31 font-size: 20px;
michael@0 32 }
michael@0 33
michael@0 34 #content {
michael@0 35 display: flex;
michael@0 36 flex-direction: row;
michael@0 37 height: 100%;
michael@0 38 overflow: hidden;
michael@0 39 }
michael@0 40
michael@0 41 #detail {
michael@0 42 background-image: url('noise.png');
michael@0 43 display: flex;
michael@0 44 flex-grow: 1;
michael@0 45 z-index: 1;
michael@0 46 overflow: hidden;
michael@0 47 }
michael@0 48
michael@0 49 #meta {
michael@0 50 background-size: 100%;
michael@0 51 padding-top: 50px;
michael@0 52 }
michael@0 53
michael@0 54 #connection-footer {
michael@0 55 border-width: 0;
michael@0 56 height: 50px;
michael@0 57 min-height: 50px;
michael@0 58 }
michael@0 59
michael@0 60
michael@0 61 #root-actor-debug {
michael@0 62 background: white;
michael@0 63 }
michael@0 64
michael@0 65 /***************** APP BUTTONS *****************/
michael@0 66
michael@0 67
michael@0 68
michael@0 69 .app-buttons {
michael@0 70 display: block;
michael@0 71 margin-left: 20px;
michael@0 72 color: #BBB;
michael@0 73 }
michael@0 74
michael@0 75 button {
michael@0 76 margin: 0;
michael@0 77 font-size: 11px;
michael@0 78 border: 1px solid #CCC;
michael@0 79 padding: 5px 15px;
michael@0 80 cursor: pointer;
michael@0 81 background: rgba(255,255,255,0.4);
michael@0 82 text-transform: uppercase;
michael@0 83 border-radius: 3px;
michael@0 84 border-width: 1px;
michael@0 85 }
michael@0 86
michael@0 87 .app-buttons > button {
michael@0 88 display: none;
michael@0 89 }
michael@0 90
michael@0 91 .app-buttons > button[disabled] {
michael@0 92 background-color: transparent;
michael@0 93 opacity: 0.4;
michael@0 94 pointer-events: none;
michael@0 95 }
michael@0 96
michael@0 97 .app[running="false"] > .app-buttons > .button-start,
michael@0 98 .app[running="true"] > .app-buttons > .button-stop,
michael@0 99 .app[running="true"] > .app-buttons > .button-debug {
michael@0 100 display: inline-block;
michael@0 101 }
michael@0 102
michael@0 103 .button-debug {
michael@0 104 color: #3498DB;
michael@0 105 }
michael@0 106
michael@0 107 .button-debug:hover {
michael@0 108 background-color: #3498DB;
michael@0 109 color: #FFF;
michael@0 110 }
michael@0 111
michael@0 112 .button-debug[disabled] {
michael@0 113 color: #3498DB;
michael@0 114 }
michael@0 115
michael@0 116 .button-start {
michael@0 117 color: #18BC9C
michael@0 118 }
michael@0 119
michael@0 120 .button-start:hover {
michael@0 121 background-color: #18BC9C;
michael@0 122 color: #FFF;
michael@0 123 }
michael@0 124
michael@0 125 .button-start[disabled] {
michael@0 126 color: #18BC9C
michael@0 127 }
michael@0 128
michael@0 129 .button-stop {
michael@0 130 color: #E74C3C;
michael@0 131 }
michael@0 132
michael@0 133 .button-stop:hover {
michael@0 134 background-color: #E74C3C;
michael@0 135 color: #FFF;
michael@0 136 }
michael@0 137
michael@0 138 .button-stop[disabled] {
michael@0 139 color: #E74C3C;
michael@0 140 }
michael@0 141
michael@0 142
michael@0 143
michael@0 144 /***************** PERMISSIONS *****************/
michael@0 145
michael@0 146
michael@0 147
michael@0 148
michael@0 149 .permission-table {
michael@0 150 display: flex;
michael@0 151 flex-direction: column;
michael@0 152 height: 100%;
michael@0 153 }
michael@0 154
michael@0 155 .permission-table-body {
michael@0 156 overflow: auto;
michael@0 157 display: flex;
michael@0 158 flex-grow: 1;
michael@0 159 flex-direction: column;
michael@0 160 }
michael@0 161
michael@0 162 .permission-table-header,
michael@0 163 .permission-table-footer {
michael@0 164 display: flex;
michael@0 165 background: #FFF;
michael@0 166 border-top: 1px solid #CCC;
michael@0 167 z-index: 2;
michael@0 168 flex-shrink: 0;
michael@0 169 }
michael@0 170
michael@0 171 .permission-table-header > div,
michael@0 172 .permission-table-footer > div {
michael@0 173 z-index: 2;
michael@0 174 flex-grow: 1;
michael@0 175 background: linear-gradient(to bottom, #49535C, #394148);
michael@0 176 box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1);
michael@0 177 color: #9FA6AD;
michael@0 178 text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
michael@0 179 border: 0;
michael@0 180 margin: auto 0;
michael@0 181 padding: 5px;
michael@0 182 text-align: center;
michael@0 183 background: transparent;
michael@0 184 box-shadow: none;
michael@0 185 text-shadow: none;
michael@0 186 }
michael@0 187
michael@0 188 .permission-table-header > div {
michael@0 189 flex-basis: 20%;
michael@0 190 }
michael@0 191
michael@0 192 .permission-table-header > div:first-child {
michael@0 193 text-align: left;
michael@0 194 padding-left: 10px;
michael@0 195 flex-basis: 30%;
michael@0 196 }
michael@0 197
michael@0 198 .permission-table-header {
michael@0 199 border: 0;
michael@0 200 border-bottom: 1px solid #CCC;
michael@0 201 box-shadow: 0 1px 4px rgba(0,0,0,0.3);
michael@0 202 }
michael@0 203
michael@0 204 .permission-table-footer {
michael@0 205 box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
michael@0 206 }
michael@0 207
michael@0 208 .permission {
michael@0 209 display: flex;
michael@0 210 flex-grow: 1;
michael@0 211 }
michael@0 212
michael@0 213 .permission:nth-child(odd) {
michael@0 214 background: #E4E4E4;
michael@0 215 }
michael@0 216
michael@0 217 .permission:hover {
michael@0 218 background: #EEE;
michael@0 219 }
michael@0 220
michael@0 221 .permission > div {
michael@0 222 flex-grow: 1;
michael@0 223 flex-basis: 20%;
michael@0 224 text-align: center;
michael@0 225 padding: 3px;
michael@0 226 border-right: 1px solid #CCC;
michael@0 227 border-bottom: 1px solid #CCC;
michael@0 228 }
michael@0 229
michael@0 230 .permission > div:first-child {
michael@0 231 text-align: left;
michael@0 232 padding: 3px 10px;
michael@0 233 flex-basis: 30%;
michael@0 234 font-weight: bold;
michael@0 235 }
michael@0 236
michael@0 237 .permission > div[permission="1"]:before, .allow-label:after {
michael@0 238 color: #98CF39;
michael@0 239 content: ' \2713';
michael@0 240 }
michael@0 241
michael@0 242 .permission > div[permission="2"]:before, .deny-label:after {
michael@0 243 color: #CC4908;
michael@0 244 content: ' \2715';
michael@0 245 }
michael@0 246
michael@0 247 .permission > div[permission="3"]:before, .prompt-label:after {
michael@0 248 color: #009EED;
michael@0 249 content: ' !';
michael@0 250 }
michael@0 251
michael@0 252
michael@0 253
michael@0 254
michael@0 255 /***************** SIDEBAR *****************/
michael@0 256
michael@0 257
michael@0 258
michael@0 259
michael@0 260 #sidebar {
michael@0 261 background: #EEE;
michael@0 262 position: relative;
michael@0 263 box-shadow: 0 1px 6px rgba(0,0,0,0.3);
michael@0 264 display: flex;
michael@0 265 flex-direction: column;
michael@0 266 flex: 0 0 350px;
michael@0 267 overflow: hidden;
michael@0 268 z-index: 100;
michael@0 269 }
michael@0 270
michael@0 271 .sidebar-item {
michael@0 272 background-color: #F6F6F6;
michael@0 273 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
michael@0 274 color: #666;
michael@0 275 line-height: 120%;
michael@0 276 cursor: pointer;
michael@0 277 display: flex;
michael@0 278 padding: 15px 10px;
michael@0 279 display: block;
michael@0 280 text-align: left;
michael@0 281 flex-grow: 1;
michael@0 282 }
michael@0 283
michael@0 284 .sidebar-item > * {
michael@0 285 flex-shrink: 0;
michael@0 286 }
michael@0 287
michael@0 288 .sidebar-item:hover {
michael@0 289 background-color: #EEE;
michael@0 290 }
michael@0 291
michael@0 292 .sidebar-item.selected {
michael@0 293 background-color: #46AFE3;
michael@0 294 color: #FFF;
michael@0 295 }
michael@0 296
michael@0 297 .help {
michael@0 298 float: right;
michael@0 299 padding: 0 5px;
michael@0 300 }
michael@0 301
michael@0 302 /***************** HEADER *****************/
michael@0 303
michael@0 304 header {
michael@0 305 padding-top: 140px;
michael@0 306 background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
michael@0 307 color: #FFF;
michael@0 308 text-shadow: 0 1px 2px rgba(0,0,0,0.8);
michael@0 309 padding: 10px;
michael@0 310 }
michael@0 311
michael@0 312
michael@0 313
michael@0 314 /***************** APPS & BROWSER TABS *****************/
michael@0 315
michael@0 316
michael@0 317
michael@0 318
michael@0 319 .apps, .browser-tabs {
michael@0 320 display: flex;
michael@0 321 flex-direction: column;
michael@0 322 overflow: auto;
michael@0 323 }
michael@0 324
michael@0 325 .app, .browser-tab {
michael@0 326 display: flex;
michael@0 327 align-items: center;
michael@0 328 order: 1;
michael@0 329 }
michael@0 330
michael@0 331 .app-name, .browser-tab-details {
michael@0 332 flex-grow: 1;
michael@0 333 font-weight: bold;
michael@0 334 }
michael@0 335
michael@0 336 .app, .browser-tab {
michael@0 337 padding: 10px 20px;
michael@0 338 border-bottom: 1px solid #CCC;
michael@0 339 }
michael@0 340
michael@0 341 .app:hover, .browser-tab:hover {
michael@0 342 background-color: #EFEFEF;
michael@0 343 }
michael@0 344
michael@0 345 .app-icon {
michael@0 346 width: 32px;
michael@0 347 height: 32px;
michael@0 348 margin-right: 10px;
michael@0 349 }
michael@0 350
michael@0 351 .browser-tab-url-subheading {
michael@0 352 font-size: 10px;
michael@0 353 }
michael@0 354
michael@0 355
michael@0 356
michael@0 357 /***************** NOT CONNECTED *****************/
michael@0 358
michael@0 359
michael@0 360
michael@0 361 body:not(.notconnected) > #notConnectedMessage,
michael@0 362 body.notconnected > #content {
michael@0 363 display: none;
michael@0 364 }
michael@0 365
michael@0 366 #notConnectedMessage {
michael@0 367 flex-grow: 1;
michael@0 368 flex-direction: column;
michael@0 369 margin: 50px auto;
michael@0 370 }
michael@0 371
michael@0 372 #notConnectedMessage > span {
michael@0 373 padding: 20px;
michael@0 374 border: 1px solid #CCC;
michael@0 375 border-radius: 5px;
michael@0 376 }
michael@0 377
michael@0 378 #notConnectedMessage > span:before {
michael@0 379 content: '';
michael@0 380 background: url('error.svg') no-repeat;
michael@0 381 background-size: 18px;
michael@0 382 height: 24px;
michael@0 383 width: 24px;
michael@0 384 position: relative;
michael@0 385 top: 10px;
michael@0 386 display: inline-block;
michael@0 387 }
michael@0 388
michael@0 389
michael@0 390
michael@0 391 /***************** TABS *****************/
michael@0 392
michael@0 393 #tabs {
michael@0 394 flex-grow: 1;
michael@0 395 overflow: auto;
michael@0 396 }
michael@0 397
michael@0 398 .tabpanel:not(.selected) {
michael@0 399 display: none;
michael@0 400 }
michael@0 401
michael@0 402 #tabs-headers {
michael@0 403 flex-shrink: 0;
michael@0 404 display: flex;
michael@0 405 flex-direction: column;
michael@0 406 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial