diff options
| -rw-r--r-- | themes/Sylvia/theme.css | 377 |
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); } - |