Side by Side Diff: skin/popup.css
Issue 29801613:
Issue 6321 - Move the popup under UI (Closed)
Patch Set: added missing files
Created June 27, 2018, 10:42 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« metadata.chrome ('K')
|
« popup.js ('k')
|
skin/popup.png » ('j')
|
no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 body | |
| 2 { | |
| 3 min-width: 250px; | |
| 4 margin: 0px; | |
| 5 font-family: Segoe UI, Arial, sans-serif; | |
| 6 font-size: 13px; | |
| 7 color: #545454; | |
| 8 background-color: #f8f6f2; | |
| 9 background-image: url(background.png); | |
| 10 } | |
| 11 | |
| 12 #clickhide-instructions, | |
| 13 #clickhide-cancel, | |
| 14 body.clickhide-active li | |
| 15 { | |
| 16 display: none; | |
| 17 } | |
| 18 | |
| 19 body.clickhide-active #clickhide-instructions, | |
| 20 body.clickhide-active #clickhide-cancel | |
| 21 { | |
| 22 display: block; | |
| 23 } | |
| 24 | |
| 25 body.local #enabled, | |
| 26 body.local #clickhide, | |
| 27 body.local #stats-page, | |
| 28 body.local #issueReporter | |
| 29 { | |
| 30 display: none; | |
| 31 } | |
| 32 | |
| 33 body.nohtml #clickhide, | |
| 34 body.disabled #clickhide | |
| 35 { | |
| 36 display: none; | |
| 37 } | |
| 38 | |
| 39 header | |
| 40 { | |
| 41 height: 45px; | |
| 42 margin-bottom: 40px; | |
| 43 border-bottom: 1px solid #e1ddd8; | |
| 44 background-image: url(background-main.png); | |
| 45 } | |
| 46 | |
| 47 #logo | |
| 48 { | |
| 49 display: block; | |
| 50 position: relative; | |
| 51 top: 15px; | |
| 52 margin: 0px auto; | |
| 53 } | |
| 54 | |
| 55 #wrapper | |
| 56 { | |
| 57 padding: 0px 20px; | |
| 58 } | |
| 59 | |
| 60 #notification, #menu | |
| 61 { | |
| 62 margin-bottom: 10px; | |
| 63 } | |
| 64 | |
| 65 #notification | |
| 66 { | |
| 67 position: relative; | |
| 68 margin-top: -70px; | |
| 69 min-height: 50px; | |
| 70 padding: 10px; | |
| 71 color: #fff; | |
| 72 border: 3px solid black; | |
| 73 background-color: #555; | |
| 74 } | |
| 75 | |
| 76 #notification.critical | |
| 77 { | |
| 78 border-color: #a4311c; | |
| 79 background-color: #c72e12; | |
| 80 } | |
| 81 | |
| 82 #notification.information | |
| 83 { | |
| 84 border-color: #1c5fa4; | |
| 85 background-color: #1281c7; | |
| 86 } | |
| 87 | |
| 88 #notification h1 | |
| 89 { | |
| 90 margin: 0px 15px 5px 0px; | |
| 91 font-size: 15px; | |
| 92 } | |
| 93 | |
| 94 #notification a | |
| 95 { | |
| 96 color: #fff; | |
| 97 } | |
| 98 | |
| 99 #notification-close | |
| 100 { | |
| 101 cursor: pointer; | |
| 102 display: inline-block; | |
| 103 position: absolute; | |
| 104 top: 10px; | |
| 105 right: 10px; | |
| 106 width: 8px; | |
| 107 height: 8px; | |
| 108 background-image: url(popup.png); | |
| 109 background-position: -34px -89px; | |
| 110 } | |
| 111 | |
| 112 #notification.closing | |
| 113 { | |
| 114 border-color: #000; | |
| 115 background-color: #020D14; | |
| 116 } | |
| 117 | |
| 118 #notification.closing #notification-content, | |
| 119 #notification:not(.closing) #notification-close-content | |
| 120 { | |
| 121 display: none; | |
| 122 } | |
| 123 | |
| 124 #notification-close-content li | |
| 125 { | |
| 126 padding: 7px 7px 7px 17px; | |
| 127 color: #FFF; | |
| 128 text-decoration: underline; | |
| 129 white-space: inherit; | |
| 130 border: none; | |
| 131 } | |
| 132 | |
| 133 #notification-close-content li::before | |
| 134 { | |
| 135 content: "\0203A"; | |
| 136 display: inline-block; /* prevent pseudo element from being underlined */ | |
| 137 width: 10px; | |
| 138 margin-left: -10px; | |
| 139 } | |
| 140 | |
| 141 #notification-close-content li:hover | |
| 142 { | |
| 143 background-color: rgba(255, 255, 255, 0.3); | |
| 144 } | |
| 145 | |
| 146 footer | |
| 147 { | |
| 148 cursor: pointer; | |
| 149 padding: 10px 35px; | |
| 150 border-top: 1px solid #e1ddd8; | |
| 151 background-image: url(background-main.png); | |
| 152 } | |
| 153 | |
| 154 footer:hover | |
| 155 { | |
| 156 background: -moz-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0. 1)), | |
| 157 url(background-main.png); | |
| 158 background: -webkit-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)), | |
| 159 url(background-main.png); | |
| 160 background: linear-gradient(to bottom, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0 .1)), | |
| 161 url(background-main.png); | |
| 162 } | |
| 163 | |
| 164 footer .icon | |
| 165 { | |
| 166 background-position: -50px -65px; | |
| 167 } | |
| 168 | |
| 169 ul | |
| 170 { | |
| 171 margin: 0px; | |
| 172 padding: 0px; | |
| 173 } | |
| 174 | |
| 175 li | |
| 176 { | |
| 177 cursor: pointer; | |
| 178 list-style-type: none; | |
| 179 white-space: nowrap; | |
| 180 border-top: 1px dashed #a5a4a1; | |
| 181 } | |
| 182 | |
| 183 li ul | |
| 184 { | |
| 185 margin-left: 35px; | |
| 186 } | |
| 187 | |
| 188 li li | |
| 189 { | |
| 190 cursor: default; | |
| 191 padding: 10px 15px; | |
| 192 } | |
| 193 | |
| 194 .menu-item | |
| 195 { | |
| 196 padding: 10px 0px 10px 15px; | |
| 197 } | |
| 198 | |
| 199 .menu-item:hover | |
| 200 { | |
| 201 background-color: #ece7df; | |
| 202 } | |
| 203 | |
| 204 .icon | |
| 205 { | |
| 206 display: inline-block; | |
| 207 width: 15px; | |
| 208 height: 15px; | |
| 209 margin-right: 15px; | |
| 210 vertical-align: top; | |
| 211 background-image: url(popup.png); | |
| 212 } | |
| 213 | |
| 214 #enabled-yes strong | |
| 215 { | |
| 216 font-weight: normal; | |
| 217 color: #12610e; | |
| 218 } | |
| 219 | |
| 220 #enabled-no strong | |
| 221 { | |
| 222 font-weight: normal; | |
| 223 color: #ac0505; | |
| 224 } | |
| 225 | |
| 226 #enabled .icon | |
| 227 { | |
| 228 background-position: -50px -1px ; | |
| 229 } | |
| 230 | |
| 231 body.disabled #enabled .icon | |
| 232 { | |
| 233 background-position: -50px -17px; | |
| 234 } | |
| 235 | |
| 236 #enabled-no, | |
| 237 body.disabled #enabled #enabled-yes | |
| 238 { | |
| 239 display: none; | |
| 240 } | |
| 241 | |
| 242 body.disabled #enabled #enabled-no | |
| 243 { | |
| 244 display: inline; | |
| 245 } | |
| 246 | |
| 247 #clickhide .icon, | |
| 248 #clickhide-cancel .icon | |
| 249 { | |
| 250 background-position: -50px -33px; | |
| 251 } | |
| 252 | |
| 253 #clickhide-instructions | |
| 254 { | |
| 255 margin: 10px 15px; | |
| 256 } | |
| 257 | |
| 258 #stats-container .icon | |
| 259 { | |
| 260 background-position: -50px -49px; | |
| 261 } | |
| 262 | |
| 263 #issueReporter .icon | |
| 264 { | |
| 265 visibility: hidden; | |
| 266 } | |
| 267 | |
| 268 #stats strong | |
| 269 { | |
| 270 font-size: 15px; | |
| 271 line-height: 140%; | |
| 272 } | |
| 273 | |
| 274 .collapse | |
| 275 { | |
| 276 position: relative; | |
| 277 padding-right: 25px; | |
| 278 } | |
| 279 | |
| 280 .collapse-icon-placeholder | |
| 281 { | |
| 282 display: none; | |
| 283 width: 45px; | |
| 284 } | |
| 285 | |
| 286 .collapse-icon | |
| 287 { | |
| 288 display: inline-block; | |
| 289 position: absolute; | |
| 290 top: 13px; | |
| 291 right: 10px; | |
| 292 width: 11px; | |
| 293 height: 11px; | |
| 294 background-image: url(popup.png); | |
| 295 background-position: -34px -65px; | |
| 296 } | |
| 297 | |
| 298 .collapsed .collapse-icon | |
| 299 { | |
| 300 background-position: -34px -77px; | |
| 301 } | |
| 302 | |
| 303 .collapsed .collapsible | |
| 304 { | |
| 305 display: none; | |
| 306 } | |
| 307 | |
| 308 .checkbox | |
| 309 { | |
| 310 display: inline-block; | |
| 311 width: 15px; | |
| 312 height: 15px; | |
| 313 margin-right: 5px; | |
| 314 vertical-align: middle; | |
| 315 background-image: url(popup.png); | |
| 316 background-position: -34px -1px; | |
| 317 } | |
| 318 | |
| 319 .checkbox:hover | |
| 320 { | |
| 321 background-position: -34px -17px; | |
| 322 } | |
| 323 | |
| 324 .checkbox[aria-checked="false"] | |
| 325 { | |
| 326 background-position: -34px -33px; | |
| 327 } | |
| 328 | |
| 329 .checkbox[aria-checked="false"]:hover | |
| 330 { | |
| 331 background-position: -34px -49px; | |
| 332 } | |
| 333 | |
| 334 label | |
| 335 { | |
| 336 vertical-align: middle; | |
| 337 } | |
| OLD | NEW |
