aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--themes/Sylvia/theme.css377
1 files changed, 201 insertions, 176 deletions
diff --git a/themes/Sylvia/theme.css b/themes/Sylvia/theme.css
index 0c37ad9c1..22f0ff13f 100644
--- a/themes/Sylvia/theme.css
+++ b/themes/Sylvia/theme.css
@@ -1,68 +1,14 @@
+/* thumbnail wrap size */
.content .thumbnailCategory div.illustration {
width:165px !important; /* Usable range 162px-360px , optimal : Thumbnail width + 40px */
}
#comments .thumbnailCategory div.illustration {
width:220px !important; /* Usable range 219px-360px , optimal : Thumbnail width + 95px */
}
-#comments .thumbnailCategories hr {display:none;}
-#comments .filter input[type="submit"] { margin-top:1.8em; }
-/* Sylvia Theme is close to the Roma Admin theme */
-BODY, H1, H3, DT, INPUT.rateButtonSelected, H2, #menubar DT {
- color:#666;
-}
-#imageHeaderBar, #imageToolBar A:hover {
- background-color: transparent;
-}
-BODY {
- background:#111 url(images/bottom-left-bg.jpg) no-repeat fixed left bottom;
- margin:0;
- min-height: 100%;
- height: 100%;
- padding:0;
-}
-#the_page {
- background:transparent url(images/top-left-bg.jpg) no-repeat scroll left top;
- left:0;
- margin:0;
- padding:0;
- position:absolute;
- top:0;
- z-index:0;
- width: 100%;
- min-width: 100%;
-}
-#theHeader {
- min-height:110px;
- height:110px;
-}
-#mbIdentification p, .totalImages {
- color:#666;
-}
-.header_msgs {
- background:transparent url(images/header_msgs-bg.gif) repeat scroll left top;
- border:0;
- color:#333;
- font-size:24px;
- left:0;
- margin:0;
- padding:10px 0 6px 0;
- text-align:center;
- top:0;
- width:100%;
- z-index:99;
-}
-.header_notes {
- background:transparent url(images/header_msgs-bg.gif) repeat scroll left top;
- border:0 none;
- color:#333;
- font-size:16px;
- margin:0;
- padding:0;
- position:absolute;
- top:0;
- width:100%;
- z-index:99;
-}
+
+/**
+ * Menubar
+ */
#menubar DL {
background:transparent url(images/menuBox_top.gif) no-repeat scroll left top;
margin:0 0 5px 40px;
@@ -73,9 +19,6 @@ BODY {
min-height: 32px;
overflow-x: hidden;
}
-#imageHeaderBar H2 {
- border: 0;
-}
#menubar DT {
background-color:#111;
border:0;
@@ -125,7 +68,18 @@ BODY {
background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom;
margin:0;
}
-#menubar DL#mbIdentification {
+#menubar p {
+ padding: 16px 16px 0;
+}
+#menubar .button {
+ position:relative;
+ right:9px;
+ top:16px;
+ height:16px;
+ width:16px;
+}
+
+#menubar #mbIdentification {
background:transparent url(images/menuId_top.gif) no-repeat scroll left top !important;
}
#menubar #mbIdentification DD {
@@ -144,15 +98,10 @@ BODY {
padding: 2px 16px 0;
margin: 0;
}
-#menubar p {
- padding: 16px 16px 0;
-}
-#menubar .button {
- position:relative;
- right:9px;
- top:16px;
- height:16px;
- width:16px;
+#menubar #mbIdentification fieldset div input[type="text"] {
+ margin: 0 0 3px;
+ width: 174px;
+ display: inline;
}
#menubar #mbIdentification .button {
height:24px;
@@ -167,31 +116,62 @@ BODY {
#menubar #mbIdentification legend {
display: none;
}
+#mbIdentification p, .totalImages {
+ color:#666;
+}
+
#menubar #menuTagCloud {
- margin: 0;
- padding: 0 8px 0 16px;
+ background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom;
+ margin:0;
+ padding: 0 12px;
+}
+
+#qsearchInput:focus, input:focus, select:focus, textarea:focus, input.focus, form .focus {
+ background-color:#444;
+ color:#999;
+}
+#qsearchInput {
+ color:#999;
}
+
+/**
+ * Content
+ */
.content {
background:#222 url(images/fillet.gif) repeat-x scroll left top;
min-height:466px;
}
+#the_page {
+ background:transparent url(images/top-left-bg.jpg) no-repeat scroll left top;
+ left:0;
+ margin:0;
+ padding:0;
+ position:absolute;
+ top:0;
+ z-index:0;
+ width: 100%;
+ min-width: 100%;
+}
+
#theCategoryPage .content {
border: 1px solid #000;
border-top: 0;
margin:21px 7px 0 290px !important;
padding-top:7px;
}
+
.content h2 {
margin:0;
padding:0px 10px 15px 15px;
border:0;
}
-#menubar form {
- background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom;
- margin:0;
+.content .navigationBar {
+ color:#666;
}
+
+/* Category thumbnails on main page */
.content .thumbnailCategories li {
background:#222 url(images/cat_bottom-right.gif) no-repeat scroll right bottom;
width:49%;
@@ -218,6 +198,7 @@ BODY {
margin: 0;
padding:15px 10px 3px 0;
overflow-x: hidden !important;
+ height:158px;
}
.content .thumbnailCategory .description .text {
display:block;
@@ -235,9 +216,38 @@ BODY {
}
.content .thumbnailCategories li:hover {
background-color:#111;
-}
-.content .navigationBar {
- color:#666;
+}
+
+/* header */
+#theHeader {
+ min-height:110px;
+ height:110px;
+}
+
+.header_msgs {
+ background:transparent url(images/header_msgs-bg.gif) repeat scroll left top;
+ border:0;
+ color:#333;
+ font-size:24px;
+ left:0;
+ margin:0;
+ padding:10px 0 6px 0;
+ text-align:center;
+ top:0;
+ width:100%;
+ z-index:99;
+}
+.header_notes {
+ background:transparent url(images/header_msgs-bg.gif) repeat scroll left top;
+ border:0 none;
+ color:#333;
+ font-size:16px;
+ margin:0;
+ padding:0;
+ position:absolute;
+ top:0;
+ width:100%;
+ z-index:99;
}
.infos {
color:#f70;
@@ -248,9 +258,6 @@ BODY {
min-height: 48px;
text-align:left;
}
-.infos li, .errors li {
- list-style-type:none;
-}
.errors {
color:#f33;
border:0;
@@ -261,39 +268,39 @@ BODY {
text-align:left;
font-weight:bold;
}
-#menubar #menuTagCloud {
- background:transparent url(images/menuBox_sides.gif) repeat-y scroll left bottom;
- margin:0;
- padding: 0 12px;
-}
-H2 {
- border-bottom: 1px solid #000000;
+.infos li, .errors li {
+ list-style-type:none;
}
-#qsearchInput {
- color:#999;
+
+/* User comments */
+#theCommentsPage .content .thumbnailCategories li,
+#theCommentsPage .content .thumbnailCategory ,
+#theCommentsPage .content .thumbnailCategory .description,
+#theCommentsPage .content .thumbnailCategory div.illustration {
+ background-image: none;
}
-FIELDSET, INPUT, SELECT, TEXTAREA {
+#theCommentsPage .content .thumbnailCategory {
+ padding: 15px 2px 6px 12px;
border: 1px solid #666;
}
-input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] {
- background-color:#444;
- color:#999;
-} /* stupid Line but needed due to inpact on other themes and deadline of Piwigo 2.0 */
-input[type="file"] {
- background-color:#222;
- border: 1px solid #666;
+#theCommentsPage .content .odd {
+ background-color: #222;
+ border-top:0 !important;
}
-INPUT, select, textarea {
- color:#999;
- background-color:#444;
+#theCommentsPage .content .even {
+ background-color: #111;
}
-input[type="radio"], input[type="checkbox"], input[type="button"].rateButtonStarEmpty, input[type="button"].rateButtonStarFull {
+#theCommentsPage .content .thumbnailCategories li:hover {
background-color: transparent;
}
-#qsearchInput:focus, input:focus, select:focus, textarea:focus, input.focus, form .focus {
- background-color:#444;
- color:#999;
+#theCommentsPage #comments {
+ padding: 0 0 5px 10px;
}
+
+#comments .thumbnailCategories hr {display:none;}
+#comments .filter input[type="submit"] { margin-top:1.8em; }
+
+/* Thumbnails */
.thumbnails .wrap2 {
border: 1px solid #666; /* thumbnails border color and style */
border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */
@@ -311,34 +318,11 @@ input[type="radio"], input[type="checkbox"], input[type="button"].rateButtonStar
.calItemEmpty, td.calDayCellEmpty, td.calDayCellFull {
border:1px solid #666;
}
-A, .rateButton {
- color:#f70;
- border-width: 0;
-}
-A:hover, A:active {
- color:#f33;
- border-bottom: 1px solid #ff3363;
- cursor: pointer;
-}
-a.external {
- color:#ff3363;
- border:0;
- text-decoration: none;
-}
-a.external:hover {
- color:#ff7700;
- border:0;
-}
-a.Piwigo {
- font-family: verdana, arial, helvetica, sans-serif !important;
- font-size: 11px; font-weight: normal; letter-spacing: 0;
- color : #F33; text-decoration: none; border: 0; }
-a.Piwigo:hover {
- border-bottom: 1px solid #ff3363;
-}
-#theImage A, .illustration A, A.navThumb, A.navThumb {
- border-bottom-width: 0;
-}
+
+
+/**
+ * Picture
+ */
#imageToolBar {
padding:0 7%;
}
@@ -348,32 +332,19 @@ a.Piwigo:hover {
#imageHeaderBar .browsePath {
margin-left:7%;
}
-*, *:focus, *:active, input:active, a:active, input:focus, a:focus {
- outline: none;
+#imageHeaderBar, #imageToolBar A:hover {
+ background-color: transparent;
}
-#debug {
- margin: 15px 15px 5px 248px;
- font-size:12px;
- clear: both;
+#imageHeaderBar H2 {
+ border: 0;
+}
+
+#theImage A, .illustration A, A.navThumb, A.navThumb {
+ border-bottom-width: 0;
}
.rateButtonStarFull, .rateButtonStarEmpty {
background-image: url('icon/rating-stars.gif');
}
-#menubar #mbIdentification fieldset div input[type="text"] {
- margin: 0 0 3px;
- width: 174px;
- display: inline;
-}
-input[type="button"], input[type="submit"], input[type="reset"] {
- color:#ff3363;
- background-color:#222;
- border-color:#ff3363;
-}
-input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
- color:#999;
- border-color:#666;
-}
-.titrePage img.button[alt="x"] { margin: 0 3px 3px; }
#thePicturePage .thumbnailCategory {
padding: 15px 2px 6px 12px;
@@ -390,6 +361,7 @@ input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hove
background-color: #222;
border-top:0 !important;
}
+
#addComment fieldset {
color: #f70;
border-color: #f70;
@@ -397,42 +369,95 @@ input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hove
#addComment fieldset label {
color: #666;
}
-#theCommentsPage .content .thumbnailCategories li,
-#theCommentsPage .content .thumbnailCategory ,
-#theCommentsPage .content .thumbnailCategory .description,
-#theCommentsPage .content .thumbnailCategory div.illustration {
- background-image: none;
+
+
+/**
+ * Default Layout
+ */
+*, *:focus, *:active, input:active, a:active, input:focus, a:focus {
+ outline: none;
}
-#theCommentsPage .content .thumbnailCategory {
- padding: 15px 2px 6px 12px;
+BODY {
+ background:#111 url(images/bottom-left-bg.jpg) no-repeat fixed left bottom;
+ margin:0;
+ min-height: 100%;
+ height: 100%;
+ padding:0;
+}
+BODY, H1, H3, DT, INPUT.rateButtonSelected, H2, #menubar DT {
+ color:#666;
+}
+
+/* forms */
+FIELDSET, INPUT, SELECT, TEXTAREA {
border: 1px solid #666;
}
-#theCommentsPage .content .odd {
- background-color: #222;
- border-top:0 !important;
+input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] {
+ background-color:#444;
+ color:#999;
+} /* stupid Line but needed due to inpact on other themes and deadline of Piwigo 2.0 */
+input[type="file"] {
+ background-color:#222;
+ border: 1px solid #666;
}
-#theCommentsPage .content .even {
- background-color: #111;
+INPUT, select, textarea {
+ color:#999;
+ background-color:#444;
}
-#theCommentsPage .content .thumbnailCategories li:hover {
+input[type="radio"], input[type="checkbox"], input[type="button"].rateButtonStarEmpty, input[type="button"].rateButtonStarFull {
background-color: transparent;
}
-#theCommentsPage #comments {
- padding: 0 0 5px 10px;
+input[type="button"], input[type="submit"], input[type="reset"] {
+ color:#ff3363;
+ background-color:#222;
+ border-color:#ff3363;
+}
+input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
+ color:#999;
+ border-color:#666;
+}
+
+/* links */
+A, .rateButton {
+ color:#f70;
+ border-width: 0;
+}
+A:hover, A:active {
+ color:#f33;
+ border-bottom: 1px solid #ff3363;
+ cursor: pointer;
+}
+a.external {
+ color:#ff3363;
+ border:0;
+ text-decoration: none;
}
+a.external:hover {
+ color:#ff7700;
+ border:0;
+}
+a.Piwigo {
+ font-family: verdana, arial, helvetica, sans-serif !important;
+ font-size: 11px; font-weight: normal; letter-spacing: 0;
+ color : #F33; text-decoration: none; border: 0; }
+a.Piwigo:hover {
+ border-bottom: 1px solid #ff3363;
+}
+
+.titrePage img.button[alt="x"] { margin: 0 3px 3px; }
tr.tagLine, fieldset.tagLetter, legend.tagLetterLegend {
border-color: #666;
}
-
-#the_page .content .thumbnailCategory .description {
- height:158px;
+#debug {
+ margin: 15px 15px 5px 248px;
+ font-size:12px;
+ clear: both;
}
+/* sprites */
.pwg-icon {
background-image: url(../default/s26/outline_ff3363.png);
}
-
A:hover .pwg-icon {
background-image: url(../default/s26/outline_ff7700.png);
}
-