dc17fc9ba9
search for 'mary qwerty' will ignore 'qwerty' and return only results for 'mary' if there is no such thing as 'qwerty' in the photos (if there was 'mary' and 'qwerty', the results for both 'mary' AND 'qwerty' would be shown) git-svn-id: http://piwigo.org/svn/trunk@27882 68402e56-0260-453c-a942-63ccdbb3a9ee
783 lines
13 KiB
CSS
783 lines
13 KiB
CSS
@import "iconset.css";
|
|
/**
|
|
* Menubar
|
|
*/
|
|
#menubar {
|
|
float: left;
|
|
margin: 0 0 10px 1em;
|
|
padding: 0;
|
|
display: inline;
|
|
width: 18em;
|
|
}
|
|
|
|
#menubar DL, #menubar DT, #menubar DD {
|
|
margin: 0; padding: 0; display: block;
|
|
}
|
|
|
|
.menubarFilter {
|
|
float: right;
|
|
margin: -4px 0 0;
|
|
}
|
|
|
|
/* H2 properties copied here */
|
|
#menubar DT {
|
|
font-weight: bold;
|
|
padding: 5px;
|
|
font-size: 120%;
|
|
text-align: center;
|
|
}
|
|
|
|
#menubar UL,
|
|
#menubar FORM,
|
|
#menubar P {
|
|
font-size: 92%;
|
|
margin: 10px 0 10px 5px;
|
|
}
|
|
#menubar UL {
|
|
list-style-type: square;
|
|
list-style-position: inside;
|
|
padding: 0 0 0 2px;
|
|
}
|
|
#menubar UL UL {
|
|
font-size: 100%;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/*IE6 needs override because of > selector*/
|
|
#menubar LI.selected>A {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#menubar .menuInfoCatByChild {
|
|
font-size: 80%;
|
|
font-style: italic;
|
|
}
|
|
|
|
#mbCategories IMG {
|
|
vertical-align: bottom; /*otherwise line height changes*/
|
|
}
|
|
|
|
#menubar INPUT {
|
|
text-indent: 2px;
|
|
}
|
|
|
|
/* quickconnect form */
|
|
|
|
#quickconnect FIELDSET {
|
|
margin: 0 5px 0 0;
|
|
padding: 0; /*IE6 requires padding 0*/
|
|
}
|
|
|
|
#quickconnect DIV {
|
|
margin: 8px 5px;
|
|
padding: 0;
|
|
}
|
|
|
|
#menuTagCloud {
|
|
text-align: center;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
#menuTagCloud SPAN {
|
|
white-space: nowrap;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/**
|
|
* Content
|
|
*/
|
|
.contentWithMenu {
|
|
margin-left: 20em; /* = #menubar width + 2em */
|
|
}
|
|
|
|
.content .navigationBar, .content .additional_info, .content .calendarBar {
|
|
margin: 8px 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.content .pageNumberSelected {
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content .additional_info {
|
|
font-size: 110%;
|
|
}
|
|
|
|
.content .titrePage {
|
|
padding: 0 0 3px;
|
|
}
|
|
|
|
.content .notification {
|
|
padding:0 25px;
|
|
}
|
|
|
|
/* category and tag results paragraphs on a quick search */
|
|
.search_results {
|
|
font-size: 16px;
|
|
margin: 10px 16px;
|
|
}
|
|
|
|
/* actions */
|
|
.categoryActions {
|
|
margin: 0 2px;
|
|
width: auto;
|
|
padding: 0;
|
|
text-indent: 0;
|
|
list-style: none;
|
|
text-align: center;
|
|
float: right;
|
|
}
|
|
|
|
.categoryActions LI {
|
|
display: inline;
|
|
}
|
|
|
|
/* begin chronology/calendar elements*/
|
|
.calendarViews {
|
|
float: right;
|
|
margin: 5px 5px 0 0;
|
|
}
|
|
|
|
.calItem {
|
|
font-weight: bold;
|
|
margin: 0 1px;
|
|
padding: 0 1px;
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
.calendarCalBar {
|
|
margin: 10px;
|
|
}
|
|
|
|
.calCalHead {
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.calCal { margin: 0 2px; }
|
|
|
|
/* nice looking month calendar*/
|
|
TABLE.calMonth {
|
|
border: 0;
|
|
border-collapse: collapse;
|
|
margin-bottom: 10px; /*<-IE ignores this */
|
|
}
|
|
|
|
TD.calDayCellFull, TD.calDayCellEmpty {
|
|
vertical-align: top;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
.calBackDate {
|
|
padding-left: 4px;
|
|
padding-top: 0;
|
|
z-index: 2;
|
|
position: absolute;
|
|
vertical-align: top;
|
|
color: #000;
|
|
}
|
|
|
|
.calForeDate {
|
|
padding-left: 5px;
|
|
padding-top: 1px;
|
|
z-index: 3;
|
|
position: absolute;
|
|
vertical-align: top;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Category thumbnails on main page, CSS code inspired from MOD subcatify */
|
|
.thumbnailCategories {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.thumbnailCategories LI {
|
|
margin: 0;
|
|
padding: 0;
|
|
float: left;
|
|
width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/
|
|
}
|
|
|
|
.thumbnailCategory {
|
|
display:block;
|
|
padding: 2px 0 0 2px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.thumbnailCategory .description {
|
|
font-size: 90%;
|
|
overflow: auto;
|
|
/*width: inherit;*/
|
|
}
|
|
|
|
.thumbnailCategory .description H3 {
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0.1em;
|
|
font-size: 120%;
|
|
}
|
|
|
|
.thumbnailCategory .description P {
|
|
margin: 0;
|
|
}
|
|
|
|
.illustration {/*also used by comment lists*/
|
|
text-align: left;
|
|
margin: 2px 0 0 2px;
|
|
float: left;
|
|
}
|
|
|
|
/* Loader gif new in 2.5 */
|
|
.loader {
|
|
display: none;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* User comments */
|
|
#comments {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.commentsList {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.commentElement {
|
|
border-radius: 5px;
|
|
margin: 5px;
|
|
padding: 2px 0 0 2px;
|
|
float: left;
|
|
width:99%;
|
|
}
|
|
|
|
.commentElement .description {
|
|
overflow: auto;
|
|
/*width: inherit;*/
|
|
}
|
|
|
|
/* Thumbnails */
|
|
|
|
/* Thumbnail "elastic" layout */
|
|
.thumbnails {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
text-align: center; /* to center the whole collection in .content */
|
|
}
|
|
.thumbnails LI { display: inline }
|
|
|
|
.thumbnails .wrap1 {
|
|
margin: 0 7px 5px 7px;
|
|
display: table-cell; display: inline-table;
|
|
display: inline-block;/* Why 3 display option ??? */
|
|
vertical-align: top; /* OK with Opera and IE6 not Geko */
|
|
text-align: center; /* to center the thumbnail and legend in Geko/Opera */
|
|
}
|
|
.thumbnails .wrap2 {
|
|
margin: 0; /* important reset the margins */
|
|
display: table-cell;/* block prevents vertical-align here */
|
|
vertical-align: middle;/* Ok with Opera and Geko not IE6 */
|
|
border-radius: 4px; /* round corners with CSS3 compliant browsers */
|
|
}
|
|
|
|
.thumbnails .wrap2 A {
|
|
display: block;
|
|
border-bottom: 0;
|
|
}
|
|
.thumbnails IMG {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.thumbnails SPAN.thumbLegend {
|
|
overflow: hidden;/* oversized legend is clipped */
|
|
display: block; /* display: none; if you don't want legend */
|
|
height: 4em; /* legend height (don't set auto to be Gecko friendly)*/
|
|
}
|
|
|
|
/**
|
|
* Picture
|
|
*/
|
|
#imageHeaderBar {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
#imageHeaderBar .browsePath {
|
|
float: left;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#imageToolBar .imageNumber {
|
|
float: right;
|
|
margin:-20px 9px 0 0;
|
|
}
|
|
|
|
#imageHeaderBar H2 {
|
|
display: inline;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
#imageToolBar {
|
|
text-align: center;
|
|
margin-bottom: 2px;
|
|
padding: 0;
|
|
height: 28px;
|
|
}
|
|
|
|
#imageToolBar .actionButtons { float: left; }
|
|
#imageToolBar .navigationButtons { float: right; }
|
|
#imageToolBar .pwg-button {width:42px;}
|
|
|
|
.switchBox {
|
|
padding: 0.5em 5px;
|
|
border-radius: 4px;
|
|
z-index: 100;
|
|
text-align:left;
|
|
display: none;
|
|
position: absolute;
|
|
left: 0; top: 0; /*left, right set through js*/
|
|
}
|
|
|
|
.switchBoxTitle {
|
|
border-bottom:1px solid #ccc;
|
|
padding-bottom:5px;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
#theImage {
|
|
text-align: center;
|
|
}
|
|
|
|
#imageInfos {
|
|
position: relative; /*for IE7 positioning of "who can see this photo"*/
|
|
min-height: 120px;
|
|
}
|
|
|
|
#linkPrev {
|
|
float: left;
|
|
margin: 5px 10px 0 5px;
|
|
}
|
|
|
|
#linkNext {
|
|
float: right;
|
|
margin: 5px 5px 0 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
DIV.thumbHover{ /*only first & last holders are divs*/
|
|
width: 108px;
|
|
height: 118px;
|
|
border: 1px solid gray;
|
|
padding: 0 5px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.imageInfoTable UL { /*this is the album list*/
|
|
margin: 0;
|
|
padding: 0 0 0 1em;
|
|
list-style-type: square;
|
|
}
|
|
|
|
.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty {
|
|
padding:0;
|
|
border:0;
|
|
color:inherit;
|
|
background-color:transparent !important; /* Konqueror doesn't accept transparent here */
|
|
}
|
|
|
|
.rateButton, .rateButtonStarFull, .rateButtonStarEmpty {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rateButtonSelected {
|
|
font-weight:bold;
|
|
font-size:120%;
|
|
}
|
|
|
|
.rateButtonStarFull {
|
|
background: url('icon/rating-stars.gif') no-repeat -16px center; width:16px;
|
|
}
|
|
|
|
.rateButtonStarEmpty {
|
|
background: url('icon/rating-stars.gif') no-repeat 0 center; width:16px;
|
|
}
|
|
|
|
/**
|
|
* Default Layout
|
|
*/
|
|
BODY {
|
|
margin: 5px;
|
|
padding: 0;
|
|
font-size: 0.8em;
|
|
font-family: Arial,Helvetica,sans-serif;
|
|
min-width: 60em; /* ~ 3* #menubar width; width of the page before getting a scrollbar; IE6 doesn't get that*/
|
|
}
|
|
|
|
IMG {
|
|
border: 0; /*IE<=9 adds border for linked images*/
|
|
}
|
|
|
|
#thePopuphelpPage {
|
|
min-width: 0; /*reset the min width*/
|
|
}
|
|
|
|
|
|
H1 {
|
|
text-align: center;
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
margin: 0.5em 0 1em 0;
|
|
}
|
|
|
|
H2 {
|
|
margin: 0;
|
|
padding: 5px 0.5em;
|
|
text-align: left;
|
|
font-size: 120%;
|
|
}
|
|
|
|
A {
|
|
text-decoration:none;
|
|
}
|
|
A:hover {
|
|
border-bottom: 1px solid #858460;
|
|
}
|
|
A.pwg-state-default:hover {
|
|
border-bottom: 0; /*reset above for icons*/
|
|
}
|
|
|
|
#copyright {
|
|
clear: both;
|
|
font-size: 83%;
|
|
text-align: center;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
INPUT, SELECT {
|
|
margin: 0;
|
|
font-size: 1em; /* <= some browsers don't set it correctly */
|
|
}
|
|
|
|
TABLE { /* horizontaly centered */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
FORM { padding: 0; margin: 0; }
|
|
|
|
FORM P {
|
|
text-align: center;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
SELECT.categoryList {
|
|
height: 20em;
|
|
width: 500px;
|
|
}
|
|
|
|
|
|
/**
|
|
* Filter forms are displayed label by label with the input (or select...)
|
|
* below the label. Use an UL to make a group (radiobox for instance).
|
|
* Use a SPAN to group objects in line
|
|
*/
|
|
FIELDSET {
|
|
padding: 1em;
|
|
margin: 1em;
|
|
overflow: hidden; /* <- makes Opera happy */
|
|
}
|
|
|
|
.filter UL,
|
|
.filter LABEL {
|
|
display: block;
|
|
float: left;
|
|
margin-right: 1em;
|
|
padding: 0;
|
|
}
|
|
|
|
.filter LI {
|
|
list-style: none;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.filter LI LABEL {
|
|
display: inline;
|
|
float: none;
|
|
}
|
|
|
|
/*IE6 needs override because of > selector*/
|
|
.filter LABEL>INPUT,
|
|
.filter LABEL>SELECT {
|
|
display: block;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.filter FIELDSET * LABEL>INPUT {
|
|
display: inline;
|
|
vertical-align: top;
|
|
margin: 0 0.5em 0 0;
|
|
}
|
|
|
|
|
|
.properties UL {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.properties LI {
|
|
margin-bottom: 0.5em;
|
|
padding: 0;
|
|
line-height: 1.8em;
|
|
clear: left;
|
|
}
|
|
|
|
.properties SPAN.property {
|
|
font-weight: bold;
|
|
float: left;
|
|
width: 50%;
|
|
text-align: right;
|
|
margin: 0;
|
|
padding: 0 0.5em 0 0;
|
|
}
|
|
|
|
.tagSelection {
|
|
margin: 1em 0 !important;
|
|
}
|
|
|
|
.tagSelection LI {
|
|
display:inline-block;
|
|
width: 150px;
|
|
overflow:hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#fullTagCloud {
|
|
font-size: 120%;
|
|
text-align: justify;
|
|
padding: 0;
|
|
margin: 1em;
|
|
}
|
|
|
|
#fullTagCloud SPAN {
|
|
white-space: nowrap;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
|
|
.tagLevel5 { font-size: 150% !important; }
|
|
.tagLevel4 { font-size: 140% !important; }
|
|
.tagLevel3 { font-size: 120% !important; }
|
|
.tagLevel2 { font-size: 100% !important; }
|
|
.tagLevel1 { font-size: 90% !important; }
|
|
|
|
|
|
/* Popup help page */
|
|
#thePopuphelpPage #copyright {
|
|
display: none;
|
|
}
|
|
|
|
#thePopuphelpPage P {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
#thePopuphelpPage DL {
|
|
margin: 0 25px 25px;
|
|
}
|
|
|
|
TR.tagLine {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
TD.nbEntries {
|
|
text-align: right;
|
|
font-style: italic;
|
|
font-size: 90%;
|
|
}
|
|
|
|
FIELDSET.tagLetter {
|
|
border: 1px solid #d3d3d3;
|
|
width: 200px;
|
|
margin: 0.5em;
|
|
padding: 10px;
|
|
}
|
|
|
|
LEGEND.tagLetterLegend {
|
|
border: 1px solid #d3d3d3;
|
|
font-size:120%;
|
|
font-weight: bold;
|
|
padding: 0 5px;
|
|
font-style: normal;
|
|
}
|
|
|
|
TABLE.tagLetterContent {
|
|
width:100%;
|
|
font-size:80%;
|
|
border-collapse : collapse;
|
|
}
|
|
|
|
#theHeader {text-align: center;}
|
|
|
|
/* jQuery datepicker */
|
|
IMG.ui-datepicker-trigger {
|
|
cursor : pointer;
|
|
}
|
|
|
|
|
|
/**
|
|
* Default colors
|
|
*/
|
|
|
|
/* So that non-links are slightly greyed out */
|
|
.content .navigationBar, SPAN.calItem, TD.calDayCellEmpty {
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
/* Tables & forms */
|
|
/* IE <= 6 is so bad with this that you can't merge with the following rule */
|
|
INPUT[type="text"], INPUT[type="password"], INPUT[type="button"],
|
|
INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {
|
|
color: #000;
|
|
background-color: #d3d3d3; /* lightgrey */
|
|
}
|
|
|
|
SELECT, TEXTAREA {
|
|
color: #000;
|
|
background-color: #d3d3d3; /* lightgrey */
|
|
}
|
|
|
|
INPUT:focus, SELECT:focus, TEXTAREA:focus {
|
|
background-color: #f5f5f5; /* whitesmoke */
|
|
}
|
|
|
|
/* some theme set a border on INPUT which is not pretty for radio/checkbox */
|
|
INPUT[type="radio"], INPUT[type="checkbox"] {
|
|
border: none; /* <= Opera needs this */
|
|
}
|
|
|
|
|
|
.content.messages {
|
|
padding:0;
|
|
background:none;
|
|
border:none;
|
|
}
|
|
|
|
.errors { /* Errors display */
|
|
color: red;
|
|
font-weight: bold;
|
|
margin: 5px;
|
|
border: 1px solid red;
|
|
background: #ffe1e1 url(icon/errors.png) no-repeat center right;
|
|
padding: 10px 50px 10px 10px;
|
|
}
|
|
|
|
/* Informations box */
|
|
.infos {
|
|
color: #002000;
|
|
background: #98fb98 url(icon/infos.png) no-repeat center right;
|
|
margin: 5px;
|
|
padding: 10px 50px 10px 10px;
|
|
}
|
|
|
|
/* Header message like upgrade*/
|
|
.header_msgs {
|
|
text-align:center;
|
|
font-weight: bold;
|
|
color:#696969; /* dimgray */
|
|
background-color: #d3d3d3;
|
|
margin: 1px;
|
|
padding: 1px;
|
|
}
|
|
|
|
/* Header notes box */
|
|
.header_notes {
|
|
border: 1px solid #aaa;
|
|
text-align: center;
|
|
background-image: url(icon/note.png);
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
font-weight: bold;
|
|
margin: 14px;
|
|
padding: 5px 0 0 0;
|
|
}
|
|
|
|
LEGEND {
|
|
font-style: italic;
|
|
color: inherit; /*for IE*/
|
|
}
|
|
|
|
#piwigoAbout {width:600px;margin:0 auto;}
|
|
#linkToPiwigo {text-align:center;}
|
|
|
|
.message {
|
|
background-color: lightyellow;
|
|
color:#333;
|
|
margin-bottom:1em;
|
|
padding: 12px;
|
|
-moz-border-radius: 3px;
|
|
-khtml-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#lostPassword p {
|
|
text-align: left;
|
|
margin: 1.5em 0;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
/* image comments rules */
|
|
|
|
#commentAdd, #pictureCommentList { width: 48%; padding: 0 1%;}
|
|
#commentAdd { float: left; }
|
|
#pictureCommentList { float: right; }
|
|
|
|
#commentAdd input[type="text"],
|
|
#comments TEXTAREA {
|
|
max-width: 99%;
|
|
width: 99%;
|
|
}
|
|
|
|
.commentAuthor {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.commentDate {
|
|
font-style: italic
|
|
}
|
|
|
|
#pictureCommentList .commentsOrder { float: left; margin-bottom: 5px;}
|
|
#pictureCommentList .navigationBar { float: right; margin-bottom: 5px;}
|
|
#pictureComments h4 { margin: 0;}
|
|
#comments FORM P {
|
|
margin: 5px 0; text-align: left;
|
|
}
|
|
|
|
/* image info table */
|
|
|
|
.imageInfoTable {display:table; margin: auto;}
|
|
.imageInfo {display:table-row; line-height:20px;}
|
|
.imageInfo dt {display:table-cell; text-align:right; font-weight:bold; padding-right:0.5em;}
|
|
.imageInfo dd {display:table-cell; text-align:left; font-weight:normal;}
|