1/* 2 * Extension plugin styles 3 * 4 * @author Christopher Smith <chris@jalakai.co.uk> 5 * @author Piyush Mishra <me@piyushmishra.com> 6 * @author Håkan Sandell <sandell.hakan@gmail.com> 7 * @author Anika Henke <anika@selfthinker.org> 8 */ 9 10/** 11 * very simple lightbox 12 * @link http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/ 13 */ 14#plugin__extensionlightbox { 15 position: fixed; 16 top: 0; 17 left: 0; 18 width: 100%; 19 height: 100%; 20 background: url(images/overlay.png) repeat; 21 text-align: center; 22 cursor: pointer; 23 z-index: 9999; 24 25 p { 26 text-align: right; 27 color: #fff; 28 margin-right: 20px; 29 font-size: 12px; 30 } 31 32 img { 33 box-shadow: 0 0 25px #111; 34 max-width: 90%; 35 max-height: 90%; 36 } 37} 38 39/** 40 * general styles 41 */ 42#extension__manager { 43 // tab layout - most of it is in the main template 44 ul.tabs li.active a { 45 background-color: @ini_background_alt; 46 border-bottom: solid 1px @ini_background_alt; 47 z-index: 2; 48 } 49 .panelHeader { 50 background-color: @ini_background_alt; 51 margin: 0 0 10px 0; 52 padding: 10px 10px 8px; 53 overflow: hidden; 54 } 55 56 // message spacing 57 div.msg { 58 margin: 0.4em 0 0 0; 59 } 60} 61 62/* 63 * extensions table 64 */ 65#extension__list { 66 ul.extensionList { 67 margin-left: 0; 68 margin-right: 0; 69 padding: 0; 70 list-style: none; 71 } 72 73 ul.extensionList li { 74 margin: 0 0 .5em; 75 padding: 0 0 .5em; 76 color: @ini_text; 77 border-bottom: 1px solid @ini_border; 78 overflow: hidden; 79 } 80 81 button { 82 margin-bottom: .3em; 83 } 84} 85 86/** 87 * extension table left column 88 */ 89#extension__list .legend { 90 position: relative; 91 width: 75%; 92 float: left; 93 94 // padding 95 > div { 96 padding: 0 .5em 0 132px; 97 border-right: 1px solid @ini_background_alt; 98 overflow: hidden; 99 } 100 101 // screenshot 102 div.screenshot { 103 margin-top: 4px; 104 margin-left: -132px; 105 max-width: 120px; 106 float: left; 107 position: relative; 108 109 img { 110 width: 120px; 111 height: 70px; 112 border-radius: 5px; 113 box-shadow: 2px 2px 2px #666; 114 } 115 116 span { 117 min-height: 24px; 118 min-width: 24px; 119 position: absolute; 120 left: 0; 121 top: 0; 122 } 123 } 124 125 // plugin headline 126 h2 { 127 width: 100%; 128 float: right; 129 margin: 0.2em 0 0.5em; 130 font-size: 100%; 131 font-weight: normal; 132 border: none; 133 134 strong { 135 font-size: 120%; 136 font-weight: bold; 137 vertical-align: baseline; 138 } 139 } 140 141 // description 142 p { 143 margin: 0 0 0.6em 0; 144 } 145 146 // popularity bar 147 div.popularity { 148 background-color: @ini_background; 149 border: 1px solid silver; 150 height: .4em; 151 margin: 0 auto; 152 padding: 1px; 153 width: 5.5em; 154 position: absolute; 155 right: .5em; 156 top: 0.2em; 157 158 div { 159 background-color: @ini_border; 160 height: 100%; 161 } 162 } 163 164 // Docs, Bugs, Tags 165 div.linkbar { 166 font-size: 85%; 167 168 span.tags { 169 padding-left: 18px; 170 background: transparent url(images/tag.png) no-repeat 0 0; 171 } 172 173 a.bugs { 174 padding-left: 18px; 175 background: transparent url(images/bug.gif) no-repeat 0 0; 176 } 177 } 178 179 // more info button 180 a.info { 181 background: transparent url(images/down.png) no-repeat 0 0; 182 border-width: 0; 183 height: 13px; 184 width: 13px; 185 text-indent: -9999px; 186 float: right; 187 margin: .5em 0 0; 188 overflow: hidden; 189 190 &.close { 191 background: transparent url(images/up.png) no-repeat 0 0; 192 } 193 } 194 195 // detailed info box 196 dl.details { 197 margin: 0.4em 0 0 0; 198 font-size: 85%; 199 border-top: 1px solid @ini_background_alt; 200 clear: both; 201 202 dt { 203 clear: left; 204 float: left; 205 width: 25%; 206 margin: 0; 207 text-align: right; 208 font-weight: normal; 209 padding: 0.2em 5px 0 0; 210 font-weight: bold; 211 } 212 213 dd { 214 margin-left: 25%; 215 padding: 0.2em 0 0 5px; 216 217 a.donate { 218 padding-left: 18px; 219 background: transparent url(images/donate.png) left center no-repeat; 220 } 221 } 222 } 223} 224 225[dir=rtl] #extension__list .legend { 226 float: right; 227 228 > div { 229 padding: 0 132px 0 .5em; 230 border-left: 1px solid @ini_background_alt; 231 border-right-width: 0; 232 } 233 234 div.screenshot { 235 margin-left: 0; 236 margin-right: -132px; 237 float: right; 238 239 span { 240 left: auto; 241 right: 0; 242 } 243 } 244 245 h2 { 246 float: left; 247 } 248 249 div.popularity { 250 right: auto; 251 left: .5em; 252 } 253 254 div.linkbar span.tags, 255 dl.details dd a.donate { 256 padding-left: 0; 257 padding-right: 18px; 258 background-position: top right; 259 } 260 261 a.info { 262 float: left; 263 } 264 265 dl.details { 266 dt { 267 clear: right; 268 float: right; 269 text-align: left; 270 padding-left: 5px; 271 padding-right: 0; 272 } 273 274 dd { 275 margin-left: 0; 276 margin-right: 25%; 277 padding-left: 0; 278 padding-right: 5px; 279 } 280 } 281} 282 283/* 284 * Enabled/Disabled overrides 285 */ 286#extension__list { 287 288 &.hasDisplayOptions { 289 .enabled, 290 .disabled, 291 .updatable { 292 display: none; 293 } 294 295 &.enabled .enabled, 296 &.disabled .disabled, 297 &.updatable .updatable { 298 display: block; 299 } 300 } 301 302 .enabled div.screenshot span { 303 background: transparent url(images/enabled.png) no-repeat 2px 2px; 304 } 305 306 .disabled div.screenshot span { 307 background: transparent url(images/disabled.png) no-repeat 2px 2px; 308 } 309 310 .disabled .legend { 311 opacity: 0.7; 312 } 313} 314 315/** 316 * extension table right column 317 */ 318#extension__manager .actions { 319 padding: 0; 320 font-size: 95%; 321 width: 25%; 322 float: right; 323 text-align: right; 324 325 .version { 326 display: block; 327 } 328 329 p { 330 margin: 0.2em 0; 331 text-align: center; 332 } 333 334 p.permerror { 335 margin-left: 0.4em; 336 text-align: left; 337 padding-left: 19px; 338 background: transparent url(images/warning.png) center left no-repeat; 339 line-height: 18px; 340 font-size: 12px; 341 } 342} 343 344[dir=rtl] #extension__manager .actions { 345 float: left; 346 text-align: left; 347 348 p.permerror { 349 margin-left: 0; 350 margin-right: 0.4em; 351 text-align: right; 352 padding-left: 0; 353 padding-right: 19px; 354 background-position: center right; 355 } 356} 357 358/** 359 * Search form 360 */ 361#extension__manager form.search { 362 display: block; 363 margin-bottom: 2em; 364 365 span { 366 font-weight: bold; 367 } 368 369 input.edit { 370 width: 25em; 371 } 372} 373 374/** 375 * Install form 376 */ 377#extension__manager form.install { 378 text-align: center; 379 display: block; 380 width: 60%; 381} 382 383#extension__viewoptions label { 384 margin-left: 1em; 385 vertical-align: baseline; 386} 387