Side by Side Diff: skin/popup.css
Issue 29317001:
Relocated icon and redesigned icon popup (Closed)
Patch Set: Addressed Wladimir's comments
Created Dec. 4, 2013, 10:39 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« skin/background-main-hover.png ('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 { | |
| 29 display: none; | |
| 30 } | |
| 31 | |
| 32 header | |
| 33 { | |
| 34 height: 45px; | |
| 35 margin-bottom: 40px; | |
| 36 border-bottom: 1px solid #e1ddd8; | |
| 37 background-image: url(background-main.png); | |
| 38 } | |
| 39 | |
| 40 #logo | |
| 41 { | |
| 42 position: relative; | |
| 43 top: 20px; | |
| 44 width: 55px; | |
| 45 height: 55px; | |
| 46 margin: 0px auto; | |
| 47 background-image: url(abp-icon-big.png); | |
| 48 background-size: 100%; | |
| 49 } | |
| 50 | |
| 51 #wrapper | |
| 52 { | |
| 53 padding: 0px 20px; | |
| 54 } | |
| 55 | |
| 56 #notification, #menu | |
| 57 { | |
| 58 margin-bottom: 10px; | |
| 59 } | |
| 60 | |
| 61 #notification | |
| 62 { | |
| 63 display: none; | |
| 64 position: relative; | |
| 65 margin-top: -70px; | |
| 66 min-height: 50px; | |
| 67 padding: 10px; | |
| 68 color: #fff; | |
| 69 border: 3px solid black; | |
| 70 background-color: #555; | |
| 71 } | |
| 72 | |
| 73 #notification.critical | |
| 74 { | |
| 75 border-color: #a4311c; | |
| 76 background-color: #c72e12; | |
| 77 } | |
| 78 | |
| 79 #notification.information | |
| 80 { | |
| 81 border-color: #1c5fa4; | |
| 82 background-color: #1281c7; | |
| 83 } | |
| 84 | |
| 85 #notification h1 | |
| 86 { | |
| 87 margin: 0px 15px 5px 0px; | |
| 88 font-size: 15px; | |
| 89 } | |
| 90 | |
| 91 #notification a | |
| 92 { | |
| 93 color: #fff; | |
| 94 } | |
| 95 | |
| 96 #close-notification | |
| 97 { | |
| 98 cursor: pointer; | |
| 99 display: inline-block; | |
| 100 position: absolute; | |
| 101 top: 10px; | |
| 102 right: 10px; | |
| 103 width: 8px; | |
| 104 height: 8px; | |
| 105 background-image: url(popup.png); | |
| 106 background-position: -34px -89px; | |
| 107 } | |
| 108 | |
| 109 footer | |
| 110 { | |
| 111 cursor: pointer; | |
| 112 padding: 10px 35px; | |
| 113 border-top: 1px solid #e1ddd8; | |
| 114 background-image: url(background-main.png); | |
| 115 } | |
| 116 | |
| 117 footer:hover | |
| 118 { | |
| 119 background-image: url(background-main-hover.png); | |
| 120 } | |
| 121 | |
| 122 footer .icon | |
| 123 { | |
| 124 background-position: -50px -65px; | |
| 125 } | |
| 126 | |
| 127 ul | |
| 128 { | |
| 129 margin: 0px; | |
| 130 padding: 0px; | |
| 131 } | |
| 132 | |
| 133 li | |
| 134 { | |
| 135 cursor: pointer; | |
| 136 list-style-type: none; | |
| 137 white-space: nowrap; | |
| 138 border-top: 1px dashed #a5a4a1; | |
| 139 } | |
| 140 | |
| 141 li ul | |
| 142 { | |
| 143 margin-left: 35px; | |
| 144 } | |
| 145 | |
| 146 li li | |
| 147 { | |
| 148 cursor: default; | |
| 149 padding: 10px 15px; | |
| 150 } | |
| 151 | |
| 152 .menu-item | |
| 153 { | |
| 154 padding: 10px 0px 10px 15px; | |
| 155 } | |
| 156 | |
| 157 .menu-item:hover | |
| 158 { | |
| 159 background-color: #ece7df; | |
| 160 } | |
| 161 | |
| 162 .icon | |
| 163 { | |
| 164 display: inline-block; | |
| 165 width: 15px; | |
| 166 height: 15px; | |
| 167 margin-right: 15px; | |
| 168 vertical-align: top; | |
| 169 background-image: url(popup.png); | |
| 170 } | |
| 171 | |
| 172 #enabled-yes strong | |
| 173 { | |
| 174 font-weight: normal; | |
| 175 color: #12610e; | |
| 176 } | |
| 177 | |
| 178 #enabled-no strong | |
| 179 { | |
| 180 font-weight: normal; | |
| 181 color: #ac0505; | |
| 182 } | |
| 183 | |
| 184 #enabled .icon | |
| 185 { | |
| 186 background-position: -50px -1px ; | |
| 187 } | |
| 188 | |
| 189 #enabled.off .icon | |
| 190 { | |
| 191 background-position: -50px -17px; | |
| 192 } | |
| 193 | |
| 194 #enabled-no, | |
| 195 #enabled.off #enabled-yes | |
| 196 { | |
| 197 display: none; | |
| 198 } | |
| 199 | |
| 200 #enabled.off #enabled-no | |
| 201 { | |
| 202 display: inline; | |
| 203 } | |
| 204 | |
| 205 #clickhide .icon, | |
| 206 #clickhide-cancel .icon | |
| 207 { | |
| 208 background-position: -50px -33px; | |
| 209 } | |
| 210 | |
| 211 #clickhide-instructions | |
| 212 { | |
| 213 margin: 10px 15px; | |
| 214 } | |
| 215 | |
| 216 #stats-container .icon | |
| 217 { | |
| 218 background-position: -50px -49px; | |
| 219 } | |
| 220 | |
| 221 | |
| 222 #stats strong | |
| 223 { | |
| 224 font-size: 15px; | |
| 225 line-height: 140%; | |
| 226 } | |
| 227 | |
| 228 #share | |
| 229 { | |
| 230 margin-top: 5px; | |
| 231 color: #949494; | |
| 232 } | |
| 233 | |
| 234 #share-box | |
| 235 { | |
| 236 margin-top: 10px; | |
| 237 } | |
| 238 | |
| 239 #share-box div[data-social] | |
| 240 { | |
| 241 cursor: pointer; | |
| 242 display: inline-block; | |
| 243 width: 32px; | |
| 244 height: 32px; | |
| 245 margin: 3px 10px 3px 3px; | |
| 246 border-radius: 3px; | |
| 247 background-image: url(popup.png); | |
| 248 } | |
| 249 | |
| 250 #share-box div[data-social]:hover | |
| 251 { | |
| 252 margin: 0px 7px 0px 0px; | |
| 253 border: 3px solid #cdc6bd | |
| 254 } | |
| 255 | |
| 256 #share-box div[data-social="facebook"] | |
| 257 { | |
| 258 background-position: -1px -1px; | |
| 259 } | |
| 260 | |
| 261 #share-box div[data-social="twitter"] | |
| 262 { | |
| 263 background-position: -1px -34px; | |
| 264 } | |
| 265 | |
| 266 #share-box div[data-social="gplus"] | |
| 267 { | |
| 268 background-position: -1px -67px; | |
| 269 } | |
| 270 | |
| 271 .collapse | |
| 272 { | |
| 273 position: relative; | |
| 274 padding-right: 25px; | |
| 275 } | |
| 276 | |
| 277 .collapse-icon | |
| 278 { | |
| 279 display: inline-block; | |
| 280 position: absolute; | |
| 281 top: 13px; | |
| 282 right: 10px; | |
| 283 width: 11px; | |
| 284 height: 11px; | |
| 285 background-image: url(popup.png); | |
| 286 background-position: -34px -65px; | |
| 287 } | |
| 288 | |
| 289 .collapsed .collapse-icon | |
| 290 { | |
| 291 background-position: -34px -77px; | |
| 292 } | |
| 293 | |
| 294 .collapsed .collapsable | |
| 295 { | |
| 296 display: none; | |
| 297 } | |
| 298 | |
| 299 .checkbox | |
| 300 { | |
| 301 display: inline-block; | |
| 302 width: 15px; | |
| 303 height: 15px; | |
| 304 margin-right: 5px; | |
| 305 vertical-align: middle; | |
| 306 background-image: url(popup.png); | |
| 307 background-position: -34px -1px; | |
| 308 } | |
| 309 | |
| 310 .checkbox:hover | |
| 311 { | |
| 312 background-position: -34px -17px; | |
| 313 } | |
| 314 | |
| 315 .checkbox[aria-checked="false"] | |
| 316 { | |
| 317 background-position: -34px -33px; | |
| 318 } | |
| 319 | |
| 320 .checkbox[aria-checked="false"]:hover | |
| 321 { | |
| 322 background-position: -34px -49px; | |
| 323 } | |
| 324 | |
| 325 label | |
| 326 { | |
| 327 vertical-align: middle; | |
| 328 } | |
| OLD | NEW |
« no previous file with comments
|
« skin/background-main-hover.png ('k')
|
skin/popup.png » ('j')
|
no next file with comments »
