The Tor Browser / file comparison
comparison: browser/themes/shared/devtools/app-manager/connection-footer.css
browser/themes/shared/devtools/app-manager/connection-footer.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:3c96605aed3e |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 /************** LAYOUT **************/ | |
| 6 | |
| 7 #connection-footer { | |
| 8 display: flex; | |
| 9 flex-direction: column; | |
| 10 height: 50px; | |
| 11 } | |
| 12 | |
| 13 #banners-and-logs { | |
| 14 display: flex; | |
| 15 flex-grow: 1; | |
| 16 } | |
| 17 | |
| 18 #logs { | |
| 19 display: flex; | |
| 20 width: 40%; | |
| 21 padding: 0; | |
| 22 width: 100%; | |
| 23 } | |
| 24 | |
| 25 .banner { | |
| 26 display: none; | |
| 27 width: 60%; | |
| 28 } | |
| 29 | |
| 30 #connection-footer[status="connected"] #banner-connected, | |
| 31 #connection-footer[status="connecting"] #banner-connecting, | |
| 32 #connection-footer[status="disconnected"] #banner-disconnected, | |
| 33 #connection-footer[status="disconnecting"] #banner-disconnecting { | |
| 34 display: flex; | |
| 35 } | |
| 36 | |
| 37 body.show-simulators .banner, | |
| 38 body.edit-connection .banner { | |
| 39 display: none !important; | |
| 40 } | |
| 41 | |
| 42 body.show-simulators #banner-simulators, | |
| 43 body.edit-connection #banner-editing { | |
| 44 display: flex !important; | |
| 45 } | |
| 46 | |
| 47 #banner-logs { | |
| 48 width: 40%; | |
| 49 display: flex; | |
| 50 } | |
| 51 | |
| 52 #logs > pre { | |
| 53 overflow: auto; | |
| 54 white-space: pre-line; | |
| 55 } | |
| 56 | |
| 57 #status.banner-box { | |
| 58 width: 100% !important; | |
| 59 } | |
| 60 | |
| 61 .banner-box { | |
| 62 display: flex; | |
| 63 flex-direction: column; | |
| 64 justify-content: center; | |
| 65 width: 100%; | |
| 66 } | |
| 67 | |
| 68 #banner-connected > .banner-box { | |
| 69 align-items: flex-start; | |
| 70 } | |
| 71 | |
| 72 #start-simulator-box { | |
| 73 display: inline; | |
| 74 } | |
| 75 | |
| 76 /************** PIXELS **************/ | |
| 77 | |
| 78 * { | |
| 79 margin: 0; | |
| 80 padding: 0; | |
| 81 box-sizing: border-box; | |
| 82 font-size: 0.9rem; | |
| 83 } | |
| 84 | |
| 85 body { | |
| 86 color: #333; | |
| 87 background-color: white; | |
| 88 font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; | |
| 89 } | |
| 90 | |
| 91 button { | |
| 92 background: linear-gradient(to bottom, #49535C, #394148); | |
| 93 box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1); | |
| 94 color: #9FA6AD; | |
| 95 text-shadow: 0px 1px 1px rgba(0,0,0,0.6); | |
| 96 border: 1px solid #111; | |
| 97 cursor: pointer; | |
| 98 border-radius: 3px; | |
| 99 padding: 3px 10px; | |
| 100 } | |
| 101 | |
| 102 button.left { | |
| 103 margin-right: 0px; | |
| 104 border-top-right-radius: 0; | |
| 105 border-bottom-right-radius: 0; | |
| 106 } | |
| 107 | |
| 108 button.right { | |
| 109 margin-left: -6px; | |
| 110 border-top-left-radius: 0; | |
| 111 border-bottom-left-radius: 0; | |
| 112 } | |
| 113 | |
| 114 button.action-primary { | |
| 115 background: linear-gradient(to bottom, #276DA3, #1E5580); | |
| 116 color: #EEE; | |
| 117 } | |
| 118 | |
| 119 button.action-cancel { | |
| 120 background: linear-gradient(to bottom, #B32B02, #942300); | |
| 121 color: #EEE; | |
| 122 } | |
| 123 | |
| 124 #banners-and-logs { | |
| 125 border-top: #111 solid; | |
| 126 border-width: 1px 0; | |
| 127 background: linear-gradient(to bottom, #323A42, #29313A); | |
| 128 color: #A8BABF; | |
| 129 box-shadow: inset 0 0 1px #424A51; | |
| 130 } | |
| 131 | |
| 132 #status { | |
| 133 background: linear-gradient(to bottom, #454F59, #404952); | |
| 134 box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973; | |
| 135 } | |
| 136 | |
| 137 #logs > pre { | |
| 138 border: 1px solid #111; | |
| 139 box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3); | |
| 140 font-size: 10px; | |
| 141 background: #22272D; | |
| 142 padding: 5px; | |
| 143 height: 100%; | |
| 144 padding-left: 20px; | |
| 145 position: relative; | |
| 146 } | |
| 147 | |
| 148 #logs > pre span{ | |
| 149 text-shadow: 0 1px 2px #000; | |
| 150 color: #3195FB; | |
| 151 position: fixed; | |
| 152 right: calc(30% - 15px); | |
| 153 bottom: -1px; | |
| 154 } | |
| 155 | |
| 156 #logs > pre b { | |
| 157 font-size: 10px; | |
| 158 color: #70C4FF; | |
| 159 } | |
| 160 | |
| 161 .banner-box { | |
| 162 box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973; | |
| 163 border-right: 1px solid #111; | |
| 164 background-position: center right; | |
| 165 background-size: 1px 100%; | |
| 166 background-repeat: no-repeat; | |
| 167 padding: 10px 20px; | |
| 168 position: relative; | |
| 169 } | |
| 170 | |
| 171 .connected-status { | |
| 172 color: #B3BFC9; | |
| 173 text-shadow: 0px 1px 2px rgba(0,0,0,0.9); | |
| 174 padding-bottom: 10px; | |
| 175 } | |
| 176 | |
| 177 .connected-status { | |
| 178 font-size: 150%; | |
| 179 top: 10%; | |
| 180 padding-right: 3px; | |
| 181 position: relative; | |
| 182 } | |
| 183 | |
| 184 .connected-indicator { | |
| 185 box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3); | |
| 186 height: 100%; | |
| 187 flex: 0 0 10px; | |
| 188 } | |
| 189 | |
| 190 #banner-connected .connected-indicator, | |
| 191 #banner-connecting .connected-indicator { | |
| 192 background: linear-gradient(to bottom, #69B8FF, #339FFF ); | |
| 193 } | |
| 194 | |
| 195 #banner-simulators .connected-indicator, | |
| 196 #banner-disconnected .connected-indicator, | |
| 197 #banner-editing .connected-indicator, | |
| 198 #banner-disconnecting .connected-indicator { | |
| 199 background: linear-gradient(to bottom, #375A87, #1C4375 ); | |
| 200 } | |
| 201 | |
| 202 #banner-simulators .banner-content > * { | |
| 203 display: inline-block; | |
| 204 } | |
| 205 | |
| 206 #banner-simulators[simulator-count="0"] .found-simulator, | |
| 207 #banner-simulators:not([simulator-count="0"]) .no-simulator { | |
| 208 display: none; | |
| 209 } | |
| 210 | |
| 211 #connection-no-device, | |
| 212 [device-count="0"] > #connection-found-device, | |
| 213 #connection-manual, | |
| 214 #connection-assisted { | |
| 215 display: none; | |
| 216 } | |
| 217 | |
| 218 #connection-found-device, | |
| 219 [device-count="0"] > #connection-no-device, | |
| 220 [adb-available="true"] > #connection-assisted, | |
| 221 [adb-available="false"] > #connection-manual { | |
| 222 display: inline; | |
| 223 } |
