diff options
author | patdenice <patdenice@piwigo.org> | 2010-03-13 16:57:44 +0000 |
---|---|---|
committer | patdenice <patdenice@piwigo.org> | 2010-03-13 16:57:44 +0000 |
commit | 59d9c085aa6a86961f53055f7a1936a16f576712 (patch) | |
tree | e781eba07f1005394ff401800cdea71a97c84f62 /themes/default/theme.css | |
parent | 32d62126660c3c24556577d42bff024767127e55 (diff) |
Feature 1502: merge multiple css files into theme.css in default theme.
git-svn-id: http://piwigo.org/svn/trunk@5129 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r-- | themes/default/theme.css | 857 |
1 files changed, 848 insertions, 9 deletions
diff --git a/themes/default/theme.css b/themes/default/theme.css index 2411eb469..c0df101b2 100644 --- a/themes/default/theme.css +++ b/themes/default/theme.css @@ -1,12 +1,851 @@ +/** + * Menubar + */ +#menubar { + float: left; + margin: 0 0 10px 1em; + padding: 0; + display: inline; +} -/* template css */ -@import "menubar.css"; -@import "content.css"; -@import "thumbnails.css"; -@import "picture.css"; -@import "default-layout.css"; -/* Override properties with import local file */ -@import "local-layout.css"; +#menubar DL, #menubar DT, #menubar DD { + margin: 0; padding: 0; display: block; +} -@import "default-colors.css"; +#menubar .button { + margin: -2px 2px 2px; + width: auto; + padding: 0; + text-indent: 0; + list-style: none; + text-align: center; + float: right; +} +/* H2 properties copied here */ +#menubar DT { + font-weight: bold; + padding: 5px 5px 5px 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; +} + +#menubar LI.selected A { + font-weight: bold; +} + +#menubar LI.selected LI A { + font-weight: normal; +} + +#menubar .menuInfoCatByChild { + font-size: 80%; + font-style: italic; +} + +#menubar INPUT { + text-indent: 2px; +} + +/* quickconnect form */ +FORM#quickconnect { + margin: 5px; + padding: 0; +} + +FORM#quickconnect FIELDSET { + margin: 0; + padding: 0; /*IE6 requires padding 0*/ +} + +FORM#quickconnect FIELDSET DIV { + margin: 8px 5px; + padding: 0; +} + +#menubar #menuTagCloud { + text-align: center; + margin: 5px 0; +} + +#menubar #menuTagCloud SPAN { + white-space: nowrap; +} + +/** + * Content + */ +.content { + margin-right: 1em; + margin-bottom: 1em; /* when it's longer than menu bar */ +} + +BODY#theCommentsPage .content, +BODY#theUploadPage .content, +BODY#theRegisterPage .content, +BODY#theIdentificationPage .content, +BODY#theProfilePage .content, +BODY#theSearchPage .content, +BODY#theAboutPage .content, +BODY#thePopuphelpPage .content, +BODY#thePasswordPage .content, +BODY#theNotificationPage .content, +BODY#theTagsPage .content, +BODY#theNBMPage .content +{ + margin: 1em; +} + +.content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/ + +.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%; +} + + +/* actions */ +UL.categoryActions { + margin: 0 2px; + width: auto; + padding: 0; + text-indent: 0; + list-style: none; + text-align: center; +} + +.content DIV.titrePage UL.categoryActions { + float: right; + text-align: center; +} + +.content DIV.titrePage { + padding: 0 0 3px; +} + +.content UL.categoryActions LI { + display: inline; +} + +.content UL.categoryActions A IMG, UL.categoryActions A { + border: none; + margin-bottom: -5px; +} + +/* begin chronology/calendar elements*/ +.content DIV.calendarViews { + display: block; + float: right; + margin: 2px 0 0; +} + +SPAN.calItem, SPAN.calItemEmpty { + font-weight: bold; + margin: 0 1px; +} + +SPAN.calItem A { border:0 } + +.content DIV.calendarCalBar { + margin: 10px 10px; + text-align: left; +} + +SPAN.calCalHead { + font-weight: bold; + font-size: 110%; + margin: 0 2px; +} + +SPAN.calCal { margin: 0 2px; } + +/* nice looking month calendar*/ +TABLE.calMonth { + border: none; + border-collapse: collapse; + margin-bottom: 10px; /*<-IE ignores this */ +} + +TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank { + vertical-align: top; + font-weight: bold; + font-size: 18px; +} + +TD.calDayHead { + font-weight: bold; + font-size: 12px; + text-align: center; +} + +DIV.calImg { + overflow: hidden; + vertical-align: bottom; + z-index: 1; + position: relative; /*<- this required by IE*/ +} + +.calImg img { + position: relative; + border: 0; +} + +.calBackDate { + padding-left: 4px; + padding-top: 0px; + 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 */ +.content UL.thumbnailCategories { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + width: 100%; +} + +.content UL.thumbnailCategories LI { + margin:0; + padding:0; + float:left; +} + +.content DIV.thumbnailCategory { + display:block; + padding: 2px 0px 0px 2px; + margin: 5px; +} + +.content DIV.thumbnailCategory DIV.description { + font-size: 90%; + overflow: auto; + /*width: inherit;*/ +} + +.content DIV.thumbnailCategory DIV.description H3 { + text-align: left; + background: transparent; + margin: 0; + padding: 0.1em; + font-size: 120%; +} + +.content DIV.thumbnailCategory DIV.description P { + margin: 0; +} + +.content DIV.thumbnailCategory DIV.illustration { + text-align: left; + margin: 2px 0 0 2px; + float: left; +} + + +/* User comments */ +DIV#comments { + padding-left: 5px; + padding-right: 5px; +} + +DIV#comments DIV.description { + font-size: 100%; +} + +/* Thumbnails */ +.content UL.thumbnails SPAN.thumbLegend { + font-size: 90%; + overflow: hidden;/* oversized legend is clipped */ +} + +/* Thumbnail "elastic" layout */ +.content UL.thumbnails { + margin: 0; + padding: 0; + list-style: none; + text-align: center; /* to center the whole collection in .content */ +} +.content UL.thumbnails LI { display: inline } + +.content UL.thumbnails SPAN.wrap1 { + margin: 0 5px 5px 5px; + 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 */ +} +.content UL.thumbnails SPAN.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 */ +} +.content UL.thumbnails SPAN.wrap2 A, +.content UL.thumbnails LABEL { + display: block; + border-bottom: none; +} +.content UL.thumbnails IMG { + margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/ +} + +/** + * Picture + */ +#imageHeaderBar { + padding-top: 2px; + padding-bottom: 2px; + margin-top: 4px; + overflow: hidden; + width: 100%; +} + +#imageHeaderBar .browsePath { + float: left; + margin-left: 10px; +} + +#imageHeaderBar .imageNumber { + float: right; + margin-right: 10px; +} + +#imageHeaderBar H2 { + text-align: center; + padding: 0; + clear: both; +} + +#imageToolBar { + text-align: center; + position: relative; + clear: both; + margin-bottom: 4px; + padding: 0; + height: 28px; +} + +#imageToolBar A, #imageToolBar IMG { + display: block; + border: none; + margin: 0; padding: 0; +} +#imageToolBar A { width: 48px; } +#imageToolBar IMG { margin: 2px auto; } +#imageToolBar .randomButtons A { float: left; } +#imageToolBar .navButtons A { float: right; } + +#theImage { + clear: left; + text-align: center; +} + +#theImage>IMG { + display: block; + margin: 0 auto; + border: none; +} + +#linkPrev { + float: left; + margin-right: 10px; + margin-left: 5px; +} + +#linkNext { + float: right; + margin-right: 5px; + margin-left: 10px; +} + +TABLE.infoTable .label { + font-weight: bold; + text-align: right; + padding-right: 0.5em; +} + +TABLE.infoTable TD.value UL { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: square; +} + +.thumbnailCategories LI { list-style: none; } + +.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty { + padding:0; + border:0; +} + +.rateButton, .rateButtonStarFull, .rateButtonStarEmpty { + cursor: pointer; +} + +.rateButtonSelected { + font-weight:bold; + font-size:120%; +} + +.rateButtonStarFull { + background: url('icon/rating-stars.gif') no-repeat scroll; background-position:-16px center; width:16px; +} + +.rateButtonStarEmpty { + background: url('icon/rating-stars.gif') no-repeat scroll; background-position:0 center; width:16px; +} + +/** + * Default Layout + */ +BODY { + margin: 5px; + padding: 0; + font-size: 0.8em; + font-family: Arial,Helvetica,sans-serif; +} + + +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 5px 0.5em; + text-align: left; + font-size: 120%; +} + +A { + text-decoration:none; + border-bottom: 1px dotted #005e89; +} +A:hover { + border-bottom: 1px solid #858460; +} + +IMG { + border: none; +} + +HR.separation { + visibility: hidden; + clear: both; +} + +#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; +} + +FORM FIELDSET P { + margin-top: 1em; + margin-bottom: 0; +} + +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 */ +} + +FORM.filter FIELDSET UL { + margin: 0; +} +FORM.filter FIELDSET UL, +FORM.filter FIELDSET LABEL { + display: block; + float: left; + margin-right: 1em; + padding: 0; +} + +FORM.filter FIELDSET LI { + list-style: none; + margin-bottom: 0.5em; +} + +FORM.filter FIELDSET LI LABEL { + display: inline; + float: none; +} + +FORM.filter FIELDSET UL.tagSelection LABEL { + display: inline; + float: none; + margin-right:0.5em;/*reduce from above*/ +} + +/* cannot use FIELDSET>LABEL because of IE<=6 */ +FORM.filter FIELDSET LABEL INPUT, +FORM.filter FIELDSET LABEL SELECT, +FORM.filter FIELDSET LABEL SPAN, +FORM.filter FIELDSET LABEL TEXTAREA { + display: block; + margin: 0.5em 0; +} +FORM.filter FIELDSET * LABEL INPUT, +FORM.filter FIELDSET * LABEL SELECT, +FORM.filter FIELDSET * LABEL TEXTAREA, +FORM.filter FIELDSET LABEL SPAN INPUT, +FORM.filter FIELDSET LABEL SPAN SELECT, +FORM.filter FIELDSET LABEL SPAN TEXTAREA { + display: inline; + vertical-align: top; + margin: 0 0.5em 0 0; +} + +FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT { + margin-right:0; +} + +/* following declaration is important to avoid strange FF behaviour */ +FORM.filter FIELDSET LABEL SPAN SELECT { + margin: 0; +} + +FORM.filter FIELDSET P +{ + clear: left; + display: block; +} + +FORM.filter INPUT[type="submit"] { + margin-top: 1em; +} + +FORM.properties UL { + list-style-type: none; + margin: 0; + padding: 0; +} + +FORM.properties LI { + margin-bottom: 0.5em; + padding: 0; + line-height: 1.8em; + clear: left; +} + +FORM.properties SPAN.property { + font-weight: bold; + float: left; + width: 50%; + text-align: right; + margin: 0; + padding: 0 0.5em 0 0; +} + +/* button tools */ +UL.actions { + text-indent: 0; + list-style: none; +} +UL.actions LI { + display: inline; +} +UL.actions A, UL.actions IMG { + border: none; +} + +UL.tagSelection { + width: 99%; + margin: 1em 0 1em 0; + padding: 0; +} + +UL.tagSelection LI { + display: inline; + white-space: nowrap; +} + +#fullTagCloud { + font-size: 120%; + text-align: justify; + padding: 0; + margin: 1em 2em 1em 2em; +} + +#fullTagCloud SPAN { + white-space: nowrap; + margin: 0 2px; +} + + +.tagLevel5 { font-size: 150%; } +.tagLevel4 { font-size: 140%; } +.tagLevel3 { font-size: 120%; } +.tagLevel2 { font-size: 100%; } +.tagLevel1 { font-size: 90%; } + + +/* Popup help page */ +BODY#thePopuphelpPage #copyright { + display: none; +} + +#theNotificationPage p { padding: 0.5em; } +BODY#thePopuphelpPage .content P { + text-align: justify; + padding: 0.5em; +} + +BODY#thePopuphelpPage .content OL LI, +BODY#thePopuphelpPage .content UL LI +{ + margin-bottom: 0.5em; +} + +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;} + +#theNotificationPage DL, +#thePopuphelpPage DL { margin: 0 25px 25px; } +.content #comments UL.thumbnailCategories LI { width:99%; } +/* jQuery datepicker */ +IMG.ui-datepicker-trigger { + cursor : pointer; +} + +/* Set the width of the menubar for the galery */ +#menubar { + width: 18em; +} +.content { + margin-left: 20em; /* = #menubar width + 2em */ +} +/* Set minimum width of the page before getting a scrollbar */ +/* IE5 and IE6 don't get that */ +BODY { + min-width: 60em; /* ~ 3* #menubar width */ +} +BODY#thePopuphelpPage { + min-width: 0; +} + +/* Set some sizes according to your maximum thumbnail width and height */ +.content UL.thumbnails SPAN, +.content UL.thumbnails SPAN.wrap2 A, +.content UL.thumbnails LABEL, +.content DIV.thumbnailCategory DIV.illustration { + width: 140px; /* max thumbnail width + 2px */ +} +.content UL.thumbnails SPAN.wrap2, +.content DIV.thumbnailCategory DIV.description { + height: 140px; /* max thumbnail height + 2px */ +} + + +/* Category thumbnails on main page */ +.content UL.thumbnailCategories LI { + width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/ +} + +/* Set defaults for thumbnails legend */ +.content UL.thumbnails SPAN.thumbLegend { + display: block; /* display: none; if you don't want legend */ + height: 4em; /* legend height (don't set auto to be Gecko friendly)*/ +} + +/** + * Default colors + */ +#imageToolBar * { + background: inherit; +} + +/* So that non-links are slightly greyed out */ +.content .navigationBar, SPAN.calItemEmpty, 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:black; + background-color: #d3d3d3; /* lightgrey */ +} + +INPUT.text, INPUT.password, INPUT.button, +INPUT.submit, INPUT.reset, INPUT.file, +SELECT, TEXTAREA { + color:black; + background-color: #d3d3d3; /* lightgrey */ +} + +INPUT:focus, SELECT:focus, TEXTAREA:focus, INPUT.focus, FORM .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 */ +} + +INPUT.radio, INPUT.checkbox { + border: none; /* <= IE6 needs this */ +} + +/* rate buttons displayed like links */ +INPUT.rateButton, INPUT.rateButtonSelected, INPUT.rateButtonStarFull, INPUT.rateButtonStarEmpty { + color:inherit; + background-color:transparent !important; /* Konqueror doesn't accept transparent here */ +} + +.errors { /* Errors display */ + color: red; + background-color: #ffe1e1; + font-weight: bold; + margin: 5px; + border: 1px solid red; + background-image: url(icon/errors.png); + background-repeat: no-repeat; + background-position: top right; + padding: 10px 50px 10px 10px; +} + +/* Informations box in administration */ +.infos { + color: #002000; + background-color: #98fb98; /* palegreen */ + background-image: url(icon/infos.png); + background-repeat: no-repeat; + background-position: top right; + margin: 5px; + padding: 10px 50px 10px 10px; +} + +/* Header message like upgrade or adviser mode */ +.header_msgs { + text-align:center; + font-weight: bold; + color:#696969; /* dimgray */ + background-color: #d3d3d3; + margin: 1px; + padding: 1px; +} + +/* Header notes box in public/administration */ +.header_notes { + border: 1px solid #aaaaaa; /* border color and style */ + text-align: center; + background-image: url(icon/note.png); + background-repeat: no-repeat; + background-position: top left; + font-weight: bold; + margin: 14px; + padding: 5px 00px 0px 0px; +} + +LEGEND { + font-style: italic; +} + +/*calendar*/ +SPAN.calItem, SPAN.calItemEmpty, +TD.calDayCellEmpty, TD.calDayCellFull { + border: 1px solid gray; +}
\ No newline at end of file |