diff options
Diffstat (limited to '')
| -rw-r--r-- | themes/elegant/theme.css | 324 |
1 files changed, 189 insertions, 135 deletions
diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css index 1997d5dc6..c6b072249 100644 --- a/themes/elegant/theme.css +++ b/themes/elegant/theme.css @@ -1,183 +1,237 @@ -/* colors & backgrounds */ +/* backgorunds */ -html, body {background-color:#111;} +html, body { background-color: #111;} -body {margin: 5px 0;} +#content, .content { background-color: #222;} +.content .titrePage { background-color: #111;} -a:hover {border-bottom:none;} +#menubar, #the_page #menuSwitcher.menuhidden { background-color: #222;} -#menuswitcher { - display:block; - font-size:200%; - text-align:center; - float:left; - height:33px; - cursor:pointer; - margin: 28px 0 0 -35px; -} +#thePicturePage, #imageHeaderBar { background-color: #111;} +#imageInfos, #infoSwitcher.infohidden { background-color: #333;} +#thePicturePage #comments { background-color: #333;} -#menubar, -#menuswitcher.menuhidden { - border-radius : 0 10px 10px 0; - background-color: #222; - border: solid 1px #333; - border-width: 2px 2px 2px 0; -} +.switchBox, .header_notes { background-color: #555;} +.thumbnailCategory, .commentElement { background-color: #333;} +.message { background-color: #666;} -#menuswitcher.menuhidden { - width:25px; - margin-left:0; -} +INPUT[type="text"], INPUT[type="password"], +INPUT[type="button"], INPUT[type="submit"], +INPUT[type="reset"], INPUT[type="file"] { background-color: #999;} +INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #ccc;} -/* content */ -#content.menushown, #the_page > .content.menushown { margin-left:240px;} -#content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;} -#content, #the_page > .content { margin-right:0;} +/* font colors */ -#content,.content { - background-color: #222; - border-bottom: 2px solid #444; - margin-bottom: 4px; - padding-bottom: 4px; -} +body, legend { color: #aaa;} +a { color: #ccc;} +a:hover { color: #fff;} +INPUT.rateButton { color: #fff;} +H1, H3, INPUT.rateButtonSelected { color: #ccc;} +.message { color: #fff;} +.commentContent .comments_toggle:hover { color: #fff;} -#thePicturePage #content {padding-bottom:0;} -.content .titrePage { - background-color: #111; - border-bottom: 2px solid #444; - padding:0; - margin-bottom:4px; -} +/* borders */ -.content .titrePage H2 { - line-height: 20px; - margin: 0; - padding: 8px 0 0 2px; -} +#content,.content, .content .titrePage { border-bottom: 2px solid #444;} +#imageHeaderBar { border: solid 0 #444; border-bottom-width:2px;} +#copyright { border-top-width:2px;} +.switchBox { border: 1px solid #000;} +.switchBoxTitle { border-bottom: 1px solid #444;} +FIELDSET, INPUT, SELECT, TEXTAREA { border: 1px solid #999;} + + +/* icons */ +.pwg-icon { background-image: url(../default/s26/outline_808080.png);} +A:hover .pwg-icon { background-image: url(../default/s26/outline_ffffff.png);} -body { color: #999;} -a { color: #ccc;} -a:hover { color: #fff;} +/* general rules */ + +body { margin: 5px 0;} +a:hover { border-bottom: none;} +#copyright { padding:0 4px 0 0; text-align:right;} + + +/* content */ + +#the_page #content.menushown, #the_page > .content.menushown, .contentWithMenu { margin-left: 240px;} +#the_page #content.menuhidden, #the_page > .content.menuhidden { margin-left: 35px;} +#the_page #content, #the_page > .content { margin-right: 0;} + +#content,.content { margin-bottom: 4px; padding-bottom: 4px;} +#thePicturePage #content { padding-bottom: 0;} +.content .titrePage { padding:0; margin-bottom:4px;} +.content .titrePage H2 { line-height: 20px; margin: 0; padding: 8px 0 0 2px;} /* menubar */ -#menubar { +#menubar { + display: inline; + width: 230px; float: left; - margin: 28px 13px 10px 0; + margin: 28px 8px 10px 0; padding: 0; - display: inline; - width: 225px; } +#menubar DT { text-align: left;} +#menubar dd { padding: 0 0 1em 1em;} +#menubar .pwg-icon-filter { display: none;} -#menubar DT { color: #999; text-align:left;} -#menubar DT a { color: #ccc;} -#menubar DT a:hover { color: #fff;} -#menubar dd { padding: 0 0 1em 1em;} -/* text color */ -BODY, H1, H3, -INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ { - color:#d0d0d0; -} +/* switchers */ -#menubar .pwg-icon-filter {display:none;} +#menuSwitcher { + display: block; + text-align: center; + height: 32px; + cursor: pointer; + float: left; + margin: 28px 0 0 -34px; +} +#imageInfos, #infoSwitcher.infohidden { border-radius: 10px 0 0 10px;} +#menubar, #the_page #menuSwitcher.menuhidden { border-radius: 0 10px 10px 0;} +#the_page #menuSwitcher.menuhidden { width: 25px; margin-left: 0;} +#infoSwitcher { + display: block; + text-align: center; + height: 32px; + cursor: pointer; + position:absolute; + left:75%; + top:0; + margin: 10px 0 0 7px; + z-index:99; +} -/* backgrounds */ +#infoSwitcher.infohidden { + width:25px; + top:10px; + right:0; + left:auto; + margin:0; +} +#theImage.infohidden { width: 100%;} -#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { - background-color: #505050; -} +#commentsSwitcher { float: left; margin:3px 0; cursor:pointer;} +.noCommentContent #commentsSwitcher { display: none;} -#imageHeaderBar H2 { - background-image: none; -} +.switchArrow { width: 16px; height: 16px; margin: 8px 5px 8px 4px;} +.switchArrow { background: transparent url("icon/arrows_ccc.png");} +.switchArrow:hover { background: transparent url("icon/arrows_fff.png");} +.menuhidden .switchArrow { background-position: 0 0;} +.menushown .switchArrow { background-position: -16px 0;} +.infohidden .switchArrow { background-position: -16px 0;} +.infoshown .switchArrow { background-position: 0 0;} +.commentshidden .switchArrow { background-position: -48px 0;} +.commentsshown .switchArrow { background-position: -32px 0;} -#imageHeaderBar { - border-top: 1px solid #000; -} -/* borders */ -#derivativeSwitchBox, #sortOrderBox { - border: 2px solid #444; -} +/* switchboxes */ -.switchBoxTitle { - border-bottom:2px solid #444; +.switchBox { + border-radius: 4px 4px 4px 4px; + padding: 0.5em 10px; + text-align: left; + z-index: 100; } +.switchBox .switchCheck { width: 18px; text-align: left; display: inline-block; line-height:17px;} +.switchBox .switchUnselected { margin-left: 18px; line-height:17px;} -.derivativeSizeDetails {display:none} -FIELDSET, INPUT, SELECT, TEXTAREA { - border: 1px solid gray; -} +/* thumbnails */ +#thumbnails { padding-top: 5px;} +.thumbnails IMG { margin-bottom: 0; vertical-align: middle;} +.thumbnailCategory DIV.illustration, +.commentElement DIV.illustration { margin: 2px; text-align: center;} -.thumbnails IMG {margin-bottom:0; vertical-align:middle;} -.thumbnailCategory DIV.illustration, .commentElement DIV.illustration {margin: 2px; text-align:center;} /* picture page */ -#thePicturePage {background-color:#111;} -#imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;} -.contentWithMenu #imageHeaderBar {padding:0;} -#copyright {border-top-width:2px;} -#imageHeaderBar {border-bottom-width:2px; width:auto; background:#111} -#imageToolBar {background:none;} -#imageToolBar {margin-top: -28px; margin-bottom:0;} -#theImage {padding-top:10px;} -#imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;} -#imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;} -#imageHeaderBar .imageNumber:before {content:'['} -#imageHeaderBar .imageNumber:after {content:']'} -#imageHeaderBar h2 {font-size:100%;} -#thePicturePage .pwg-button {width:26px;} -#thePicturePage .actionButtons {margin-right: 26px;} -#imageToolBar {float:right;} - -#thePicturePage #comments {padding-top:12px; padding-bottom:12px;} -#thePicturePage #comments h3 {margin-top:10px; margin-bottom:10px;} -#thePicturePage #comments form { margin-bottom:10px;} -#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;} -.noCommentText {display:block;} -#copyright {padding:4px 4px 0 0; text-align:right;} - -#thePicturePage .comments_toggle_on:before {content:'(+) '} -#thePicturePage .comments_toggle_off:before {content:'(-) '} - -.comments_hidden ul, .comments_hidden form {display:none;} -.thumbnailCategory, .commentElement {background-color: #333;} -.comments_toggle {cursor: pointer;} -.comments_toggle:hover {color:#fff;} - -#the_page .content .stuffs {margin:0!important} - -#thumbnails {padding-top: 5px;} - -INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;} -INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;} - -/* links */ -INPUT.rateButton { - color: #fff; + +.contentWithMenu #imageHeaderBar { padding: 0;} +#imageHeaderBar { padding: 0 0 0 10px;} +#imageHeaderBar { width: auto;} +#imageHeaderBar h2 { font-size: 100%; font-weight: inherit;} +#imageHeaderBar .browsePath { + display:inline-block; + float:none; + font-size:120%; + line-height:20px; + padding: 8px 0 0 2px; + font-weight:bold; + margin:0; } +.imageNumber { display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;} +#imageToolBar { margin-top: -28px; margin-bottom: 0; float: right;} +#thePicturePage .pwg-button { width: 26px;} +#thePicturePage .actionButtons { margin-right: 26px;} -.pwg-icon { - background-image: url(../default/s26/outline_808080.png); +#theImageAndInfos { + display: block; + width: 100%; + position: relative; +} +#theImage { + display: inline-block; + width: 75%; + vertical-align: top; + overflow: auto; + padding: 10px 0 5px 0; } -A:hover .pwg-icon { - background-image: url(../default/s26/outline_ffffff.png); +.rateButtonStarFull { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;} +.rateButtonStarEmpty { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;} + + +/* image infos */ + +#imageInfos { + display: inline-block; + width: 24.5%; + vertical-align: top; + padding-top: 35px; + padding-bottom: 5px; + margin: 10px 0 10px 0.5%; + word-wrap:break-word; } -.message { - color:white; - background-color:#666; -}
\ No newline at end of file +#imageInfos .navThumbs { width: 250px; height: 130px; margin: auto; padding: 0 5px;} +#imageInfos .navThumb { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;} +#imageInfos #linkPrev { float: left;} +#imageInfos #linkNext { float: right;} +#imageInfos .thumbHover { position: absolute; width: 100%; height: 100%;} +#imageInfos .prevThumbHover { background: transparent url(icon/none.png) no-repeat center center;} +#imageInfos .prevThumbHover:hover { background: transparent url(icon/img_prev.png) no-repeat center center;} +#imageInfos .nextThumbHover { background: transparent url(icon/none.png) no-repeat center center;} +#imageInfos .nextThumbHover:hover { background: transparent url(icon/img_next.png) no-repeat center center;} + +#imageInfos dl { padding: 0 15px;} +#imageInfos dt { font-weight: bold;} +#imageInfos dd { margin: 0 0 5px 20px;} +#imageInfos h3 { margin: 20px 0 10px;} + + +/* image comments */ + +#thePicturePage #comments { padding: 2px 5px;} +#thePicturePage #comments h3 { margin: 10px 0;} +#thePicturePage #comments form { margin-bottom: 10px;} +#thePicturePage #comments fieldset { margin: 0 1em;} + +.noCommentText { display:block;} +.commentshidden ul, +.commentshidden form {display:none;} +.commentContent .comments_toggle {cursor: pointer;} + + +/* plugins */ + +#the_page .content .stuffs { margin: 0!important} +.categoryActions .theme_menuf { display: none;}
\ No newline at end of file |