aboutsummaryrefslogtreecommitdiffstats
path: root/themes/default/theme.css
diff options
context:
space:
mode:
authorpatdenice <patdenice@piwigo.org>2010-03-13 16:57:44 +0000
committerpatdenice <patdenice@piwigo.org>2010-03-13 16:57:44 +0000
commit59d9c085aa6a86961f53055f7a1936a16f576712 (patch)
treee781eba07f1005394ff401800cdea71a97c84f62 /themes/default/theme.css
parent32d62126660c3c24556577d42bff024767127e55 (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 'themes/default/theme.css')
-rw-r--r--themes/default/theme.css857
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