Side by Side Diff: skin/popup.css
Issue 29317001:
Relocated icon and redesigned icon popup (Closed)
Patch Set:
Created Nov. 7, 2013, 5:44 p.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: Helvetica, Arial, sans-serif; | |
| 6 font-size: 13px; | |
| 7 color: #7f776b; | |
| 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:hover | |
| 142 { | |
| 143 background-color: #ece7df; | |
| 144 } | |
| 145 | |
| 146 li ul | |
| 147 { | |
| 148 margin-left: 35px; | |
| 149 } | |
| 150 | |
| 151 li li | |
| 152 { | |
| 153 cursor: default; | |
| 154 padding: 10px 15px; | |
| 155 } | |
| 156 | |
| 157 .menu-item | |
| 158 { | |
| 159 padding: 10px 0px 10px 15px; | |
| 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 .icon | |
| 173 { | |
| 174 background-position: -50px -1px ; | |
| 175 } | |
| 176 | |
| 177 #enabled.off .icon | |
| 178 { | |
| 179 background-position: -50px -17px; | |
| 180 } | |
| 181 | |
| 182 #enabled-off | |
| 183 { | |
| 184 display: none; | |
| 185 } | |
| 186 | |
| 187 #enabled.off #enabled-on | |
| 188 { | |
| 189 display: none; | |
| 190 } | |
| 191 | |
| 192 #enabled.off #enabled-off | |
| 193 { | |
| 194 display: inline; | |
| 195 } | |
| 196 | |
| 197 #clickhide .icon, | |
| 198 #clickhide-cancel .icon | |
| 199 { | |
| 200 background-position: -50px -33px; | |
| 201 } | |
| 202 | |
| 203 #clickhide-instructions | |
| 204 { | |
| 205 margin: 10px 15px; | |
| 206 } | |
| 207 | |
| 208 #stats-container .icon | |
| 209 { | |
| 210 background-position: -50px -49px; | |
| 211 } | |
| 212 | |
| 213 | |
| 214 #stats strong | |
| 215 { | |
| 216 font-size: 15px; | |
| 217 line-height: 140%; | |
| 218 } | |
| 219 | |
| 220 #share | |
| 221 { | |
| 222 margin-top: 5px; | |
| 223 } | |
| 224 | |
| 225 #share-box | |
| 226 { | |
| 227 margin-top: 10px; | |
| 228 } | |
| 229 | |
| 230 #share-box div[data-social] | |
| 231 { | |
| 232 cursor: pointer; | |
| 233 display: inline-block; | |
| 234 width: 33px; | |
| 235 height: 33px; | |
| 236 margin-right: 10px; | |
| 237 background-image: url(popup.png); | |
| 238 } | |
| 239 | |
| 240 #share-box div[data-social="facebook"] | |
| 241 { | |
| 242 background-position: -1px -1px; | |
| 243 } | |
| 244 | |
| 245 #share-box div[data-social="twitter"] | |
| 246 { | |
| 247 background-position: -1px -34px; | |
| 248 } | |
| 249 | |
| 250 #share-box div[data-social="gplus"] | |
| 251 { | |
| 252 background-position: -1px -67px; | |
| 253 } | |
| 254 | |
| 255 .collapse | |
| 256 { | |
| 257 position: relative; | |
| 258 padding-right: 25px; | |
| 259 } | |
| 260 | |
| 261 .collapse-icon | |
| 262 { | |
| 263 display: inline-block; | |
| 264 position: absolute; | |
| 265 top: 13px; | |
| 266 right: 10px; | |
| 267 width: 11px; | |
| 268 height: 11px; | |
| 269 background-image: url(popup.png); | |
| 270 background-position: -34px -65px; | |
| 271 } | |
| 272 | |
| 273 .collapsed .collapse-icon | |
| 274 { | |
| 275 background-position: -34px -77px; | |
| 276 } | |
| 277 | |
| 278 .collapsed .collapsable | |
| 279 { | |
| 280 display: none; | |
| 281 } | |
| 282 | |
| 283 .checkbox | |
| 284 { | |
| 285 display: inline-block; | |
| 286 width: 15px; | |
| 287 height: 15px; | |
| 288 vertical-align: middle; | |
| 289 background-image: url(popup.png); | |
| 290 } | |
| 291 | |
| 292 .checkbox | |
| 293 { | |
| 294 background-position: -34px -1px; | |
| 295 } | |
| 296 | |
| 297 .checkbox[aria-checked="false"] | |
| 298 { | |
| 299 background-position: -34px -33px; | |
| 300 } | |
| 301 | |
| 302 | |
| 303 | |
| 304 | |
| OLD | NEW |
« no previous file with comments
|
« skin/background-main-hover.png ('k')
|
skin/popup.png » ('j')
|
no next file with comments »
