Changeset 13730
- Timestamp:
- Mar 25, 2012, 9:23:03 PM (12 years ago)
- Location:
- trunk/themes/elegant
- Files:
-
- 10 added
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/themes/elegant/local_head.tpl
r13464 r13730 1 {combine_script id='elegant.scripts' require='jquery' path='themes/elegant/scripts.js'} 1 {if $BODY_ID=='thePicturePage'} 2 {combine_script id='elegant.scripts_pp' load='header' require='jquery' path='themes/elegant/scripts_pp.js'} 3 {else} 4 {combine_script id='elegant.scripts' load='header' require='jquery' path='themes/elegant/scripts.js'} 5 {/if} -
trunk/themes/elegant/scripts.js
r13479 r13730 1 jQuery("document").ready(function(jQuery){ 2 3 var menubar=jQuery("#menubar"); 4 var content=jQuery("#content"); 5 6 if ( (menubar.length == 1) && (content.length ==1)) { 7 menubar.after("<div id=\"menuswitcher\">«</div>"); 8 9 jQuery("#menuswitcher").click(function(){ 10 if (jQuery("#menubar").is(":hidden")) { 11 showMenu(0); 12 return false; 13 } else { 14 hideMenu(0); 15 return false; 16 } 17 }); 18 19 // creates a variable with the contents of the cookie side-menu 20 var sidemenu = jQuery.cookie('side-menu'); 21 22 // if cookie says the menu is hiding, keep it hidden! 23 if (sidemenu == 'hiding') { 24 hideMenu(0); 25 } else { 26 showMenu(0); 27 } 28 29 } 30 31 var comments=jQuery("#thePicturePage #comments"); 32 if (comments.length == 1) { 33 var comments_button=jQuery("#comments h3"); 34 35 if (comments_button.length == 0) { 36 jQuery("#addComment").before("<h3>Comments</h3>"); 37 comments_button=jQuery("#comments h3"); 38 } 39 40 if (jQuery.cookie('comments') == 'visible') { 41 comments_button.addClass("comments_toggle").addClass("comments_toggle_off"); 42 } else { 43 comments.addClass("comments_hidden"); 44 comments_button.addClass("comments_toggle").addClass("comments_toggle_on"); 45 } 46 47 comments_button.click(function() { 48 49 var comments=jQuery("#thePicturePage #comments"); 50 if (comments.hasClass("comments_hidden")) { 51 comments.removeClass("comments_hidden"); 52 comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");; 53 jQuery.cookie('comments', 'visible', {path: "/"}); 54 } else { 55 comments.addClass("comments_hidden"); 56 comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");; 57 jQuery.cookie('comments', 'hidden', {path: "/"}); 58 } 59 60 }); 61 62 } 63 64 65 }); 66 67 function hideMenu(delay) { 68 69 var menubar=jQuery("#menubar"); 70 var menuswitcher=jQuery("#menuswitcher"); 71 var content=jQuery("#the_page > .content"); 72 var pcontent=jQuery("#content"); 73 74 menubar.hide(delay); 75 menuswitcher.addClass("menuhidden").removeClass("menushown"); 76 menuswitcher.text("»"); 77 content.addClass("menuhidden").removeClass("menushown"); 78 pcontent.addClass("menuhidden").removeClass("menushown"); 79 jQuery.cookie('side-menu', 'hiding', {path: "/"}); 80 81 } 82 83 function showMenu(delay) { 84 85 var menubar=jQuery("#menubar"); 86 var menuswitcher=jQuery("#menuswitcher"); 87 var content=jQuery("#the_page > .content"); 88 var pcontent=jQuery("#content"); 89 90 menubar.show(delay); 91 menuswitcher.addClass("menushown").removeClass("menuhidden"); 92 menuswitcher.text("«"); 93 content.addClass("menushown").removeClass("menuhidden"); 94 pcontent.addClass("menushown").removeClass("menuhidden"); 95 jQuery.cookie('side-menu', 'showing', {path: "/"}); 96 97 } 98 99 /** 1 /** 100 2 * Cookie plugin 101 3 * Copyright (c) 2006 Klaus Hartl (stilbuero.de) … … 108 10 return cookieValue;}}; 109 11 12 if (jQuery.cookie('page-menu') == 'hidden') { 13 jQuery("head").append("<style type=\"text/css\">#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}</style>"); 14 } else { 15 jQuery("head").append("<style type=\"text/css\">#content.contentWithMenu, #the_page > .content {margin-left:240px;}</style>"); 16 } 17 18 function hideMenu(delay) { 19 var menubar=jQuery("#menubar"); 20 var menuswitcher=jQuery("#menuSwitcher"); 21 var content=jQuery("#the_page > .content"); 22 var pcontent=jQuery("#content"); 23 24 menubar.hide(delay); 25 menuswitcher.addClass("menuhidden").removeClass("menushown"); 26 content.addClass("menuhidden").removeClass("menushown"); 27 pcontent.addClass("menuhidden").removeClass("menushown"); 28 jQuery.cookie('page-menu', 'hidden', {path: "/"}); 29 30 } 31 32 function showMenu(delay) { 33 34 var menubar=jQuery("#menubar"); 35 var menuswitcher=jQuery("#menuSwitcher"); 36 var content=jQuery("#the_page > .content"); 37 var pcontent=jQuery("#content"); 38 39 menubar.show(delay); 40 menuswitcher.addClass("menushown").removeClass("menuhidden"); 41 content.addClass("menushown").removeClass("menuhidden"); 42 pcontent.addClass("menushown").removeClass("menuhidden"); 43 jQuery.cookie('page-menu', 'visible', {path: "/"}); 44 45 } 46 47 jQuery("document").ready(function(jQuery){ 48 49 var sidemenu = jQuery.cookie('page-menu'); 50 var menubar=jQuery("#menubar"); 51 52 if (menubar.length == 1) { 53 54 jQuery("#menuSwitcher").html("<div class=\"switchArrow\"> </div>"); 55 56 // if cookie says the menu is hiding, keep it hidden! 57 if (sidemenu == 'hidden') { 58 hideMenu(0); 59 } else { 60 showMenu(0); 61 } 62 63 jQuery("#menuSwitcher").click(function(){ 64 if (jQuery("#menubar").is(":hidden")) { 65 showMenu(0); 66 return false; 67 } else { 68 hideMenu(0); 69 return false; 70 } 71 }); 72 73 74 } 75 76 }); 77 78 -
trunk/themes/elegant/theme.css
r13697 r13730 1 /* colors & backgrounds */ 2 3 html, body {background-color:#111;} 4 5 body {margin: 5px 0;} 6 7 a:hover {border-bottom:none;} 8 9 #menuswitcher { 10 display:block; 11 font-size:200%; 12 text-align:center; 13 float:left; 14 height:33px; 15 cursor:pointer; 16 margin: 28px 0 0 -35px; 17 } 18 19 #menubar, 20 #menuswitcher.menuhidden { 21 border-radius : 0 10px 10px 0; 22 background-color: #222; 23 border: solid 1px #333; 24 border-width: 2px 2px 2px 0; 25 } 26 27 #menuswitcher.menuhidden { 1 /* backgorunds */ 2 3 html, body { background-color: #111;} 4 5 #content, .content { background-color: #222;} 6 .content .titrePage { background-color: #111;} 7 8 #menubar, #the_page #menuSwitcher.menuhidden { background-color: #222;} 9 10 #thePicturePage, #imageHeaderBar { background-color: #111;} 11 #imageInfos, #infoSwitcher.infohidden { background-color: #333;} 12 #thePicturePage #comments { background-color: #333;} 13 14 .switchBox, .header_notes { background-color: #555;} 15 .thumbnailCategory, .commentElement { background-color: #333;} 16 .message { background-color: #666;} 17 18 INPUT[type="text"], INPUT[type="password"], 19 INPUT[type="button"], INPUT[type="submit"], 20 INPUT[type="reset"], INPUT[type="file"] { background-color: #999;} 21 INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #ccc;} 22 23 24 /* font colors */ 25 26 body, legend { color: #aaa;} 27 a { color: #ccc;} 28 a:hover { color: #fff;} 29 INPUT.rateButton { color: #fff;} 30 H1, H3, INPUT.rateButtonSelected { color: #ccc;} 31 .message { color: #fff;} 32 .commentContent .comments_toggle:hover { color: #fff;} 33 34 35 /* borders */ 36 37 #content,.content, .content .titrePage { border-bottom: 2px solid #444;} 38 #imageHeaderBar { border: solid 0 #444; border-bottom-width:2px;} 39 #copyright { border-top-width:2px;} 40 .switchBox { border: 1px solid #000;} 41 .switchBoxTitle { border-bottom: 1px solid #444;} 42 FIELDSET, INPUT, SELECT, TEXTAREA { border: 1px solid #999;} 43 44 45 /* icons */ 46 47 .pwg-icon { background-image: url(../default/s26/outline_808080.png);} 48 A:hover .pwg-icon { background-image: url(../default/s26/outline_ffffff.png);} 49 50 51 /* general rules */ 52 53 body { margin: 5px 0;} 54 a:hover { border-bottom: none;} 55 #copyright { padding:0 4px 0 0; text-align:right;} 56 57 58 /* content */ 59 60 #the_page #content.menushown, #the_page > .content.menushown, .contentWithMenu { margin-left: 240px;} 61 #the_page #content.menuhidden, #the_page > .content.menuhidden { margin-left: 35px;} 62 #the_page #content, #the_page > .content { margin-right: 0;} 63 64 #content,.content { margin-bottom: 4px; padding-bottom: 4px;} 65 #thePicturePage #content { padding-bottom: 0;} 66 .content .titrePage { padding:0; margin-bottom:4px;} 67 .content .titrePage H2 { line-height: 20px; margin: 0; padding: 8px 0 0 2px;} 68 69 70 /* menubar */ 71 72 #menubar { 73 display: inline; 74 width: 230px; 75 float: left; 76 margin: 28px 8px 10px 0; 77 padding: 0; 78 } 79 #menubar DT { text-align: left;} 80 #menubar dd { padding: 0 0 1em 1em;} 81 #menubar .pwg-icon-filter { display: none;} 82 83 84 /* switchers */ 85 86 #menuSwitcher { 87 display: block; 88 text-align: center; 89 height: 32px; 90 cursor: pointer; 91 float: left; 92 margin: 28px 0 0 -34px; 93 } 94 95 96 #imageInfos, #infoSwitcher.infohidden { border-radius: 10px 0 0 10px;} 97 #menubar, #the_page #menuSwitcher.menuhidden { border-radius: 0 10px 10px 0;} 98 #the_page #menuSwitcher.menuhidden { width: 25px; margin-left: 0;} 99 100 #infoSwitcher { 101 display: block; 102 text-align: center; 103 height: 32px; 104 cursor: pointer; 105 position:absolute; 106 left:75%; 107 top:0; 108 margin: 10px 0 0 7px; 109 z-index:99; 110 } 111 112 #infoSwitcher.infohidden { 28 113 width:25px; 29 margin-left:0; 30 } 31 32 /* content */ 33 34 #content.menushown, #the_page > .content.menushown { margin-left:240px;} 35 #content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;} 36 #content, #the_page > .content { margin-right:0;} 37 38 #content,.content { 39 background-color: #222; 40 border-bottom: 2px solid #444; 41 margin-bottom: 4px; 42 padding-bottom: 4px; 43 } 44 45 #thePicturePage #content {padding-bottom:0;} 46 47 .content .titrePage { 48 background-color: #111; 49 border-bottom: 2px solid #444; 50 padding:0; 51 margin-bottom:4px; 52 } 53 54 .content .titrePage H2 { 55 line-height: 20px; 56 margin: 0; 114 top:10px; 115 right:0; 116 left:auto; 117 margin:0; 118 } 119 120 #theImage.infohidden { width: 100%;} 121 122 #commentsSwitcher { float: left; margin:3px 0; cursor:pointer;} 123 .noCommentContent #commentsSwitcher { display: none;} 124 125 .switchArrow { width: 16px; height: 16px; margin: 8px 5px 8px 4px;} 126 .switchArrow { background: transparent url("icon/arrows_ccc.png");} 127 .switchArrow:hover { background: transparent url("icon/arrows_fff.png");} 128 .menuhidden .switchArrow { background-position: 0 0;} 129 .menushown .switchArrow { background-position: -16px 0;} 130 .infohidden .switchArrow { background-position: -16px 0;} 131 .infoshown .switchArrow { background-position: 0 0;} 132 .commentshidden .switchArrow { background-position: -48px 0;} 133 .commentsshown .switchArrow { background-position: -32px 0;} 134 135 136 /* switchboxes */ 137 138 .switchBox { 139 border-radius: 4px 4px 4px 4px; 140 padding: 0.5em 10px; 141 text-align: left; 142 z-index: 100; 143 } 144 .switchBox .switchCheck { width: 18px; text-align: left; display: inline-block; line-height:17px;} 145 .switchBox .switchUnselected { margin-left: 18px; line-height:17px;} 146 147 148 /* thumbnails */ 149 150 #thumbnails { padding-top: 5px;} 151 .thumbnails IMG { margin-bottom: 0; vertical-align: middle;} 152 .thumbnailCategory DIV.illustration, 153 .commentElement DIV.illustration { margin: 2px; text-align: center;} 154 155 156 /* picture page */ 157 158 .contentWithMenu #imageHeaderBar { padding: 0;} 159 #imageHeaderBar { padding: 0 0 0 10px;} 160 #imageHeaderBar { width: auto;} 161 #imageHeaderBar h2 { font-size: 100%; font-weight: inherit;} 162 #imageHeaderBar .browsePath { 163 display:inline-block; 164 float:none; 165 font-size:120%; 166 line-height:20px; 57 167 padding: 8px 0 0 2px; 58 } 59 60 61 body { color: #999;} 62 a { color: #ccc;} 63 a:hover { color: #fff;} 64 65 66 67 /* menubar */ 68 69 #menubar { 70 float: left; 71 margin: 28px 13px 10px 0; 72 padding: 0; 73 display: inline; 74 width: 225px; 75 } 76 77 #menubar DT { color: #999; text-align:left;} 78 #menubar DT a { color: #ccc;} 79 #menubar DT a:hover { color: #fff;} 80 #menubar dd { padding: 0 0 1em 1em;} 81 82 /* text color */ 83 BODY, H1, H3, 84 INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ { 85 color:#d0d0d0; 86 } 87 88 #menubar .pwg-icon-filter {display:none;} 89 90 91 92 93 /* backgrounds */ 94 95 96 #imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes { 97 background-color: #505050; 98 } 99 100 #imageHeaderBar H2 { 101 background-image: none; 102 } 103 104 #imageHeaderBar { 105 border-top: 1px solid #000; 106 } 107 108 /* borders */ 109 #derivativeSwitchBox, #sortOrderBox { 110 border: 2px solid #444; 111 } 112 113 .switchBoxTitle { 114 border-bottom:2px solid #444; 115 } 116 117 .derivativeSizeDetails {display:none} 118 119 FIELDSET, INPUT, SELECT, TEXTAREA { 120 border: 1px solid gray; 121 } 122 123 124 .thumbnails IMG {margin-bottom:0; vertical-align:middle;} 125 .thumbnailCategory DIV.illustration, .commentElement DIV.illustration {margin: 2px; text-align:center;} 126 127 /* picture page */ 128 #thePicturePage {background-color:#111;} 129 #imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;} 130 .contentWithMenu #imageHeaderBar {padding:0;} 131 #copyright {border-top-width:2px;} 132 #imageHeaderBar {border-bottom-width:2px; width:auto; background:#111} 133 #imageToolBar {background:none;} 134 #imageToolBar {margin-top: -28px; margin-bottom:0;} 135 #theImage {padding-top:10px;} 136 #imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;} 137 #imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;} 138 #imageHeaderBar .imageNumber:before {content:'['} 139 #imageHeaderBar .imageNumber:after {content:']'} 140 #imageHeaderBar h2 {font-size:100%;} 141 #thePicturePage .pwg-button {width:26px;} 142 #thePicturePage .actionButtons {margin-right: 26px;} 143 #imageToolBar {float:right;} 144 145 #thePicturePage #comments {padding-top:12px; padding-bottom:12px;} 146 #thePicturePage #comments h3 {margin-top:10px; margin-bottom:10px;} 147 #thePicturePage #comments form { margin-bottom:10px;} 148 #thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;} 149 .noCommentText {display:block;} 150 #copyright {padding:4px 4px 0 0; text-align:right;} 151 152 #thePicturePage .comments_toggle_on:before {content:'(+) '} 153 #thePicturePage .comments_toggle_off:before {content:'(-) '} 154 155 .comments_hidden ul, .comments_hidden form {display:none;} 156 .thumbnailCategory, .commentElement {background-color: #333;} 157 .comments_toggle {cursor: pointer;} 158 .comments_toggle:hover {color:#fff;} 159 160 #the_page .content .stuffs {margin:0!important} 161 162 #thumbnails {padding-top: 5px;} 163 164 INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;} 165 INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;} 166 167 /* links */ 168 INPUT.rateButton { 169 color: #fff; 170 } 171 172 .pwg-icon { 173 background-image: url(../default/s26/outline_808080.png); 174 } 175 176 A:hover .pwg-icon { 177 background-image: url(../default/s26/outline_ffffff.png); 178 } 179 180 .message { 181 color:white; 182 background-color:#666; 183 } 168 font-weight:bold; 169 margin:0; 170 } 171 .imageNumber { display: inline-block; float: right; line-height: 26px; margin-right: 2px; min-width: 40px; text-align: center;} 172 #imageToolBar { margin-top: -28px; margin-bottom: 0; float: right;} 173 #thePicturePage .pwg-button { width: 26px;} 174 #thePicturePage .actionButtons { margin-right: 26px;} 175 176 #theImageAndInfos { 177 display: block; 178 width: 100%; 179 position: relative; 180 } 181 #theImage { 182 display: inline-block; 183 width: 75%; 184 vertical-align: top; 185 overflow: auto; 186 padding: 10px 0 5px 0; 187 } 188 189 .rateButtonStarFull { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;} 190 .rateButtonStarEmpty { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;} 191 192 193 /* image infos */ 194 195 #imageInfos { 196 display: inline-block; 197 width: 24.5%; 198 vertical-align: top; 199 padding-top: 35px; 200 padding-bottom: 5px; 201 margin: 10px 0 10px 0.5%; 202 word-wrap:break-word; 203 } 204 205 #imageInfos .navThumbs { width: 250px; height: 130px; margin: auto; padding: 0 5px;} 206 #imageInfos .navThumb { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;} 207 #imageInfos #linkPrev { float: left;} 208 #imageInfos #linkNext { float: right;} 209 #imageInfos .thumbHover { position: absolute; width: 100%; height: 100%;} 210 #imageInfos .prevThumbHover { background: transparent url(icon/none.png) no-repeat center center;} 211 #imageInfos .prevThumbHover:hover { background: transparent url(icon/img_prev.png) no-repeat center center;} 212 #imageInfos .nextThumbHover { background: transparent url(icon/none.png) no-repeat center center;} 213 #imageInfos .nextThumbHover:hover { background: transparent url(icon/img_next.png) no-repeat center center;} 214 215 #imageInfos dl { padding: 0 15px;} 216 #imageInfos dt { font-weight: bold;} 217 #imageInfos dd { margin: 0 0 5px 20px;} 218 #imageInfos h3 { margin: 20px 0 10px;} 219 220 221 /* image comments */ 222 223 #thePicturePage #comments { padding: 2px 5px;} 224 #thePicturePage #comments h3 { margin: 10px 0;} 225 #thePicturePage #comments form { margin-bottom: 10px;} 226 #thePicturePage #comments fieldset { margin: 0 1em;} 227 228 .noCommentText { display:block;} 229 .commentshidden ul, 230 .commentshidden form {display:none;} 231 .commentContent .comments_toggle {cursor: pointer;} 232 233 234 /* plugins */ 235 236 #the_page .content .stuffs { margin: 0!important} 237 .categoryActions .theme_menuf { display: none;}
Note: See TracChangeset
for help on using the changeset viewer.