1@import "iconset.css"; 2/** 3 * Menubar 4 */ 5#menubar { 6 float: left; 7 margin: 0 0 10px 1em; 8 padding: 0; 9 display: inline; 10 width: 18em; 11} 12 13#menubar DL, #menubar DT, #menubar DD { 14 margin: 0; padding: 0; display: block; 15} 16 17.menubarFilter { 18 float: right; 19 margin: -4px 0 0; 20} 21 22/* H2 properties copied here */ 23#menubar DT { 24 font-weight: bold; 25 padding: 5px; 26 font-size: 120%; 27 text-align: center; 28} 29 30#menubar UL, 31#menubar FORM, 32#menubar P { 33 font-size: 92%; 34 margin: 10px 0 10px 5px; 35} 36#menubar UL { 37 list-style-type: square; 38 list-style-position: inside; 39 padding: 0 0 0 2px; 40} 41#menubar UL UL { 42 font-size: 100%; 43 margin-top: 0; 44 margin-bottom: 0; 45} 46 47/*IE6 needs override because of > selector*/ 48#menubar LI.selected>A { 49 font-weight: bold; 50} 51 52#menubar .menuInfoCatByChild { 53 font-size: 80%; 54 font-style: italic; 55} 56 57#mbCategories IMG { 58 vertical-align: bottom; /*otherwise line height changes*/ 59} 60 61#menubar INPUT { 62 text-indent: 2px; 63} 64 65/* quickconnect form */ 66 67#quickconnect FIELDSET { 68 margin: 0 5px 0 0; 69 padding: 0; /*IE6 requires padding 0*/ 70} 71 72#quickconnect DIV { 73 margin: 8px 5px; 74 padding: 0; 75} 76 77#menuTagCloud { 78 text-align: center; 79 margin: 5px 0; 80} 81 82#menuTagCloud SPAN { 83 white-space: nowrap; 84 margin-right: 5px; 85} 86 87/** 88 * Content 89 */ 90.contentWithMenu { 91 margin-left: 20em; /* = #menubar width + 2em */ 92} 93 94.content .navigationBar, .content .additional_info, .content .calendarBar { 95 margin: 8px 4px; 96 text-align: center; 97} 98 99.content .pageNumberSelected { 100 font-style: italic; 101 font-weight: bold; 102} 103 104.content .additional_info { 105 font-size: 110%; 106} 107 108.content .titrePage { 109 padding: 0 0 3px; 110} 111 112.content .notification { 113 padding:0 25px; 114} 115 116#menubar .badge { 117 margin-left:5px; 118} 119 120.badge::before { 121 content: '['; 122} 123 124.badge::after { 125 content: ']'; 126} 127 128.badge.badgeCategories::before { 129 content:"("; 130} 131.badge.badgeCategories::after { 132 content:")"; 133} 134 135/* A nicer (more modern) way to present badge, with a background color and no brackets */ 136 137/* 138.badge::before, .badge::after { 139 content:none; 140} 141 142.badge { 143 display: inline-block; 144 min-width: 5px; 145 padding: 3px 7px; 146 color: #eee; 147 line-height: 1; 148 vertical-align: middle; 149 white-space: nowrap; 150 text-align: center; 151 background-color: #666; 152 border-radius: 10px; 153} 154*/ 155 156/* category and tag results paragraphs on a quick search */ 157.search_results { 158 font-size: 16px; 159 margin: 10px 16px; 160} 161 162/* actions */ 163.categoryActions { 164 margin: 0 2px; 165 width: auto; 166 padding: 0; 167 text-indent: 0; 168 list-style: none; 169 text-align: center; 170 float: right; 171} 172 173.categoryActions LI { 174 display: inline; 175} 176 177/* begin chronology/calendar elements*/ 178.calendarViews { 179 float: right; 180 margin: 5px 5px 0 0; 181} 182 183.calItem { 184 font-weight: bold; 185 margin: 0 1px; 186 padding: 0 1px; 187 border: 1px solid gray; 188} 189 190.calendarCalBar { 191 margin: 10px; 192} 193 194.calCalHead { 195 font-weight: bold; 196 font-size: 110%; 197 margin: 0 2px; 198} 199 200.calCal { margin: 0 2px; } 201 202/* nice looking month calendar*/ 203TABLE.calMonth { 204 border: 0; 205 border-collapse: collapse; 206 margin-bottom: 10px; /*<-IE ignores this */ 207} 208 209TD.calDayCellFull, TD.calDayCellEmpty { 210 vertical-align: top; 211 font-weight: bold; 212 font-size: 18px; 213 border: 1px solid gray; 214} 215 216.calBackDate { 217 padding-left: 4px; 218 padding-top: 0; 219 z-index: 2; 220 position: absolute; 221 vertical-align: top; 222 color: #000; 223} 224 225.calForeDate { 226 padding-left: 5px; 227 padding-top: 1px; 228 z-index: 3; 229 position: absolute; 230 vertical-align: top; 231 color: #fff; 232} 233 234/* Category thumbnails on main page, CSS code inspired from MOD subcatify */ 235.thumbnailCategories { 236 margin: 0; 237 padding: 0; 238 list-style: none; 239 overflow: hidden; 240 width: 100%; 241} 242 243.thumbnailCategories LI { 244 margin: 0; 245 padding: 0; 246 float: left; 247 width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/ 248} 249 250.thumbnailCategory { 251 display:block; 252 padding: 2px 0 0 2px; 253 margin: 5px; 254} 255 256.thumbnailCategory .description { 257 font-size: 90%; 258 overflow: auto; 259 /*width: inherit;*/ 260} 261 262.thumbnailCategory .description H3 { 263 text-align: left; 264 margin: 0; 265 padding: 0.1em; 266 font-size: 120%; 267} 268 269.thumbnailCategory .description P { 270 margin: 0; 271} 272 273.illustration {/*also used by comment lists*/ 274 text-align: left; 275 margin: 2px 0 0 2px; 276 float: left; 277} 278 279/* Loader gif new in 2.5 */ 280.loader { 281 display: none; 282 position: fixed; 283 right: 0; 284 bottom: 0; 285} 286 287/* User comments */ 288#comments { 289 padding-left: 5px; 290 padding-right: 5px; 291} 292 293.commentsList { 294 margin: 0; 295 padding: 0; 296 list-style: none; 297 overflow: hidden; 298 width: 100%; 299} 300 301.commentElement { 302 border-radius: 5px; 303 margin: 5px; 304 padding: 2px 0 0 2px; 305 float: left; 306 width:99%; 307} 308 309.commentElement .description { 310 overflow: auto; 311 /*width: inherit;*/ 312} 313 314/* Thumbnails */ 315 316/* Thumbnail "elastic" layout */ 317.thumbnails { 318 margin: 0; 319 padding: 0; 320 list-style: none; 321 text-align: center; /* to center the whole collection in .content */ 322} 323.thumbnails LI { display: inline } 324 325.thumbnails .wrap1 { 326 margin: 0 7px 5px 7px; 327 display: table-cell; display: inline-table; 328 display: inline-block;/* Why 3 display option ??? */ 329 vertical-align: top; /* OK with Opera and IE6 not Geko */ 330 text-align: center; /* to center the thumbnail and legend in Geko/Opera */ 331} 332.thumbnails .wrap2 { 333 margin: 0; /* important reset the margins */ 334 display: table-cell;/* block prevents vertical-align here */ 335 vertical-align: middle;/* Ok with Opera and Geko not IE6 */ 336 border-radius: 4px; /* round corners with CSS3 compliant browsers */ 337} 338 339.thumbnails .wrap2 A { 340 display: block; 341 border-bottom: 0; 342} 343.thumbnails IMG { 344 vertical-align: middle; 345} 346 347.thumbnails SPAN.thumbLegend { 348 overflow: hidden;/* oversized legend is clipped */ 349 display: block; /* display: none; if you don't want legend */ 350 height: 4em; /* legend height (don't set auto to be Gecko friendly)*/ 351} 352 353/** 354 * Picture 355 */ 356#imageHeaderBar { 357 padding-top: 2px; 358 padding-bottom: 2px; 359 overflow: hidden; 360 width: 100%; 361} 362 363#imageHeaderBar .browsePath { 364 float: left; 365 margin-left: 10px; 366} 367 368#imageToolBar .imageNumber { 369 float: right; 370 margin:-20px 9px 0 0; 371} 372 373#imageHeaderBar H2 { 374 display: inline; 375 text-align: center; 376 padding: 0; 377} 378 379#imageToolBar { 380 text-align: center; 381 margin-bottom: 2px; 382 padding: 0; 383 height: 28px; 384} 385 386#imageToolBar .actionButtons { float: left; } 387#imageToolBar .navigationButtons { float: right; } 388#imageToolBar .pwg-button {width:42px;} 389 390.switchBox { 391 padding: 0.5em 5px; 392 border-radius: 4px; 393 z-index: 100; 394 text-align:left; 395 display: none; 396 position: absolute; 397 left: 0; top: 0; /*left, right set through js*/ 398} 399 400.switchBoxTitle { 401 border-bottom:1px solid #ccc; 402 padding-bottom:5px; 403 margin-bottom:5px; 404} 405 406#downloadSwitchBox ul { 407 margin:0; 408 padding:0; 409 list-style-type:none; 410} 411 412#theImage { 413 text-align: center; 414} 415 416#imageInfos { 417 position: relative; /*for IE7 positioning of "who can see this photo"*/ 418 min-height: 120px; 419} 420 421#linkPrev { 422 float: left; 423 margin: 5px 10px 0 5px; 424} 425 426#linkNext { 427 float: right; 428 margin: 5px 5px 0 10px; 429 text-align: right; 430} 431 432 433DIV.thumbHover{ /*only first & last holders are divs*/ 434 width: 108px; 435 height: 118px; 436 border: 1px solid gray; 437 padding: 0 5px; 438 line-height: 1.2; 439} 440 441.imageInfoTable UL { /*this is the album list*/ 442 margin: 0; 443 padding: 0 0 0 1em; 444 list-style-type: square; 445} 446 447.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty { 448 padding:0; 449 border:0; 450 color:inherit; 451 background-color:transparent !important; /* Konqueror doesn't accept transparent here */ 452} 453 454.rateButton, .rateButtonStarFull, .rateButtonStarEmpty { 455 cursor: pointer; 456} 457 458.rateButtonSelected { 459 font-weight:bold; 460 font-size:120%; 461} 462 463.rateButtonStarFull { 464 background: url('icon/rating-stars.gif') no-repeat -16px center; width:16px; 465} 466 467.rateButtonStarEmpty { 468 background: url('icon/rating-stars.gif') no-repeat 0 center; width:16px; 469} 470 471/** 472 * Default Layout 473 */ 474BODY { 475 margin: 5px; 476 padding: 0; 477 font-size: 0.8em; 478 font-family: Arial,Helvetica,sans-serif; 479 min-width: 60em; /* ~ 3* #menubar width; width of the page before getting a scrollbar; IE6 doesn't get that*/ 480} 481 482IMG { 483 border: 0; /*IE<=9 adds border for linked images*/ 484} 485 486#thePopuphelpPage { 487 min-width: 0; /*reset the min width*/ 488} 489 490 491H1 { 492 text-align: center; 493 font-size: 150%; 494 font-weight: bold; 495 padding: 0; 496 margin: 0.5em 0 1em 0; 497} 498 499H2 { 500 margin: 0; 501 padding: 5px 0.5em; 502 text-align: left; 503 font-size: 120%; 504} 505 506A { 507 text-decoration:none; 508} 509A:hover { 510 border-bottom: 1px solid #858460; 511} 512A.pwg-state-default:hover { 513 border-bottom: 0; /*reset above for icons*/ 514} 515 516#copyright { 517 clear: both; 518 font-size: 83%; 519 text-align: center; 520 margin: 0 0 10px 0; 521} 522 523INPUT, SELECT { 524 margin: 0; 525 font-size: 1em; /* <= some browsers don't set it correctly */ 526} 527 528TABLE { /* horizontaly centered */ 529 margin-left: auto; 530 margin-right: auto; 531} 532 533 534FORM { padding: 0; margin: 0; } 535 536FORM P { 537 text-align: center; 538 margin-top: 2em; 539 margin-bottom: 2em; 540} 541 542 543/** 544 * Filter forms are displayed label by label with the input (or select...) 545 * below the label. Use an UL to make a group (radiobox for instance). 546 * Use a SPAN to group objects in line 547 */ 548FIELDSET { 549 padding: 1em; 550 margin: 1em; 551} 552 553.filter UL { 554 display: block; 555 float: left; 556 margin: 0 1em 1em 0; 557 padding: 0; 558} 559 560.filter LI { 561 list-style: none; 562 margin-bottom: 0.5em; 563} 564 565.filter FIELDSET { 566 padding-bottom:0; 567} 568 569.filter P { 570 text-align:left; 571 margin:0 0 15px 0; 572 line-height:20px; 573} 574 575.filter input[name="search_allwords"], .filter #authors, .filter #tags { 576 width:500px; 577} 578 579.filter P input[type="checkbox"], .filter P input[type="radio"] { 580 vertical-align:middle; 581 margin-top:-4px; 582} 583 584.filter input[type="submit"] { 585 margin-left:1em; 586} 587 588.filter P LABEL { 589 margin-right:1em; 590} 591 592 593 594.properties UL { 595 list-style-type: none; 596 margin: 0; 597 padding: 0; 598} 599 600.properties LI { 601 margin-bottom: 0.5em; 602 padding: 0; 603 line-height: 1.8em; 604 clear: left; 605} 606 607.properties SPAN.property { 608 font-weight: bold; 609 float: left; 610 width: 50%; 611 text-align: right; 612 margin: 0; 613 padding: 0 0.5em 0 0; 614} 615 616#fullTagCloud { 617 font-size: 120%; 618 text-align: justify; 619 padding: 0; 620 margin: 1em; 621} 622 623#fullTagCloud SPAN { 624 white-space: nowrap; 625 margin: 0 2px; 626} 627 628 629.tagLevel5 { font-size: 150% !important; } 630.tagLevel4 { font-size: 140% !important; } 631.tagLevel3 { font-size: 120% !important; } 632.tagLevel2 { font-size: 100% !important; } 633.tagLevel1 { font-size: 90% !important; } 634 635 636/* Popup help page */ 637#thePopuphelpPage #copyright { 638 display: none; 639} 640 641#thePopuphelpPage P { 642 padding: 0.5em; 643} 644 645#thePopuphelpPage DL { 646 margin: 0 25px 25px; 647} 648 649TR.tagLine { 650 border-bottom: 1px solid #ddd; 651} 652TD.nbEntries { 653 text-align: right; 654 font-style: italic; 655 font-size: 90%; 656} 657 658FIELDSET.tagLetter { 659 border: 1px solid #d3d3d3; 660 width: 200px; 661 margin: 0.5em; 662 padding: 10px; 663} 664 665LEGEND.tagLetterLegend { 666 border: 1px solid #d3d3d3; 667 font-size:120%; 668 font-weight: bold; 669 padding: 0 5px; 670 font-style: normal; 671} 672 673TABLE.tagLetterContent { 674 width:100%; 675 font-size:80%; 676 border-collapse : collapse; 677} 678 679#theHeader {text-align: center;} 680 681/* jQuery datepicker */ 682IMG.ui-datepicker-trigger { 683 cursor : pointer; 684} 685 686 687/** 688 * Default colors 689 */ 690 691 /* So that non-links are slightly greyed out */ 692.content .navigationBar, SPAN.calItem, TD.calDayCellEmpty { 693 color: #b0b0b0; 694} 695 696/* Tables & forms */ 697/* IE <= 6 is so bad with this that you can't merge with the following rule */ 698INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], 699INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] { 700 color: #000; 701 background-color: #d3d3d3; /* lightgrey */ 702} 703 704SELECT, TEXTAREA { 705 color: #000; 706 background-color: #d3d3d3; /* lightgrey */ 707} 708 709INPUT:focus, SELECT:focus, TEXTAREA:focus { 710 background-color: #f5f5f5; /* whitesmoke */ 711} 712 713/* some theme set a border on INPUT which is not pretty for radio/checkbox */ 714INPUT[type="radio"], INPUT[type="checkbox"] { 715 border: none; /* <= Opera needs this */ 716} 717 718 719.content.messages { 720 padding:0; 721 background:none; 722 border:none; 723} 724 725.errors { /* Errors display */ 726 color: red; 727 font-weight: bold; 728 margin: 5px; 729 border: 1px solid red; 730 background: #ffe1e1 url(icon/errors.png) no-repeat center right; 731 padding: 10px 50px 10px 10px; 732} 733 734/* Informations box */ 735.infos { 736 color: #002000; 737 background: #98fb98 url(icon/infos.png) no-repeat center right; 738 margin: 5px; 739 padding: 10px 50px 10px 10px; 740} 741 742/* Header message like upgrade*/ 743.header_msgs { 744 text-align:center; 745 font-weight: bold; 746 color:#696969; /* dimgray */ 747 background-color: #d3d3d3; 748 margin: 1px; 749 padding: 1px; 750} 751 752/* Header notes box */ 753.header_notes { 754 border: 1px solid #aaa; 755 text-align: center; 756 background-image: url(icon/note.png); 757 background-repeat: no-repeat; 758 background-position: top left; 759 font-weight: bold; 760 margin: 14px; 761 padding: 5px 0 0 0; 762} 763 764LEGEND { 765 font-style: italic; 766 color: inherit; /*for IE*/ 767} 768 769#piwigoAbout {width:600px;margin:0 auto;} 770#linkToPiwigo {text-align:center;} 771 772.message { 773 background-color: lightyellow; 774 color:#333; 775 margin-bottom:1em; 776 padding: 12px; 777 -moz-border-radius: 3px; 778 -khtml-border-radius: 3px; 779 -webkit-border-radius: 3px; 780 border-radius: 3px; 781} 782 783#lostPassword p { 784 text-align: left; 785 margin: 1.5em 0; 786 line-height: 1.5em; 787} 788 789/* image comments rules */ 790 791#commentAdd, #pictureCommentList { width: 48%; padding: 0 1%;} 792#commentAdd { float: left; } 793#pictureCommentList { float: right; } 794 795#commentAdd input[type="text"], 796#comments TEXTAREA { 797 max-width: 99%; 798 width: 99%; 799} 800 801.commentAuthor { 802 font-weight: bold; 803} 804 805.commentDate { 806 font-style: italic 807} 808 809#pictureCommentList .commentsOrder { float: left; margin-bottom: 5px;} 810#pictureCommentList .navigationBar { float: right; margin-bottom: 5px;} 811#pictureComments h4 { margin: 0;} 812#comments FORM P { 813 margin: 5px 0; text-align: left; 814} 815 816/* image info table */ 817 818.imageInfoTable {display:table; margin: auto;} 819.imageInfo {display:table-row; line-height:20px;} 820.imageInfo dt {display:table-cell; text-align:right; font-weight:bold; padding-right:0.5em;} 821.imageInfo dd {display:table-cell; text-align:left; font-weight:normal;} 822 823/* Selectize */ 824.selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { 825 padding: 0px 5px !important; 826} 827 828 829#TagsGroupRemoveTag span{ 830 display:none; 831} 832