Side by Side Diff: skin/popup.css
Issue 29317001:
Relocated icon and redesigned icon popup (Closed)
Patch Set: Rebased
Created Nov. 19, 2013, 1:43 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« safari/background.js ('K')
|
« 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-on strong | |
| 173 { | |
| 174 font-weight: normal; | |
| 175 color: #12610e; | |
| 176 } | |
| 177 | |
| 178 #enabled-off 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-off | |
| 195 { | |
| 196 display: none; | |
| 197 } | |
| 198 | |
| 199 #enabled.off #enabled-on | |
| 200 { | |
| 201 display: none; | |
| 202 } | |
| 203 | |
| 204 #enabled.off #enabled-off | |
| 205 { | |
| 206 display: inline; | |
| 207 } | |
| 208 | |
| 209 #clickhide .icon, | |
| 210 #clickhide-cancel .icon | |
| 211 { | |
| 212 background-position: -50px -33px; | |
| 213 } | |
| 214 | |
| 215 #clickhide-instructions | |
| 216 { | |
| 217 margin: 10px 15px; | |
| 218 } | |
| 219 | |
| 220 #stats-container .icon | |
| 221 { | |
| 222 background-position: -50px -49px; | |
| 223 } | |
| 224 | |
| 225 | |
| 226 #stats strong | |
| 227 { | |
| 228 font-size: 15px; | |
| 229 line-height: 140%; | |
| 230 } | |
| 231 | |
| 232 #share | |
| 233 { | |
| 234 margin-top: 5px; | |
| 235 color: #949494; | |
| 236 } | |
| 237 | |
| 238 #share-box | |
| 239 { | |
| 240 margin-top: 10px; | |
| 241 } | |
| 242 | |
| 243 #share-box div[data-social] | |
| 244 { | |
| 245 cursor: pointer; | |
| 246 display: inline-block; | |
| 247 width: 32px; | |
| 248 height: 32px; | |
| 249 margin: 3px 10px 3px 3px; | |
| 250 border-radius: 3px; | |
| 251 background-image: url(popup.png); | |
| 252 } | |
| 253 | |
| 254 #share-box div[data-social]:hover | |
| 255 { | |
| 256 margin: 0px 7px 0px 0px; | |
| 257 border: 3px solid #cdc6bd | |
| 258 } | |
| 259 | |
| 260 #share-box div[data-social="facebook"] | |
| 261 { | |
| 262 background-position: -1px -1px; | |
| 263 } | |
| 264 | |
| 265 #share-box div[data-social="twitter"] | |
| 266 { | |
| 267 background-position: -1px -34px; | |
| 268 } | |
| 269 | |
| 270 #share-box div[data-social="gplus"] | |
| 271 { | |
| 272 background-position: -1px -67px; | |
| 273 } | |
| 274 | |
| 275 .collapse | |
| 276 { | |
| 277 position: relative; | |
| 278 padding-right: 25px; | |
| 279 } | |
| 280 | |
| 281 .collapse-icon | |
| 282 { | |
| 283 display: inline-block; | |
| 284 position: absolute; | |
| 285 top: 13px; | |
| 286 right: 10px; | |
| 287 width: 11px; | |
| 288 height: 11px; | |
| 289 background-image: url(popup.png); | |
| 290 background-position: -34px -65px; | |
| 291 } | |
| 292 | |
| 293 .collapsed .collapse-icon | |
| 294 { | |
| 295 background-position: -34px -77px; | |
| 296 } | |
| 297 | |
| 298 .collapsed .collapsable | |
| 299 { | |
| 300 display: none; | |
| 301 } | |
| 302 | |
| 303 .checkbox | |
| 304 { | |
| 305 display: inline-block; | |
| 306 width: 15px; | |
| 307 height: 15px; | |
| 308 margin-right: 5px; | |
| 309 vertical-align: middle; | |
| 310 background-image: url(popup.png); | |
| 311 background-position: -34px -1px; | |
| 312 } | |
| 313 | |
| 314 .checkbox:hover | |
| 315 { | |
| 316 background-position: -34px -17px; | |
| 317 } | |
| 318 | |
| 319 .checkbox[aria-checked="false"] | |
| 320 { | |
| 321 background-position: -34px -33px; | |
| 322 } | |
| 323 | |
| 324 .checkbox[aria-checked="false"]:hover | |
| 325 { | |
| 326 background-position: -34px -49px; | |
| 327 } | |
| 328 | |
| 329 label | |
| 330 { | |
| 331 vertical-align: middle; | |
| 332 } | |
| OLD | NEW |
« safari/background.js ('K')
|
« skin/background-main-hover.png ('k')
|
skin/popup.png » ('j')
|
no next file with comments »
