From d91cd45790fd5a6a717af472f6459862dc38ea14 Mon Sep 17 00:00:00 2001 From: Zaphod Date: Sun, 25 Mar 2012 19:23:03 +0000 Subject: feature 2587: theme elegant, new version git-svn-id: http://piwigo.org/svn/trunk@13730 68402e56-0260-453c-a942-63ccdbb3a9ee --- themes/elegant/icon/arrows_ccc.png | Bin 0 -> 921 bytes themes/elegant/icon/arrows_fff.png | Bin 0 -> 562 bytes themes/elegant/icon/img_next.png | Bin 0 -> 941 bytes themes/elegant/icon/img_prev.png | Bin 0 -> 924 bytes themes/elegant/icon/none.png | Bin 0 -> 101 bytes themes/elegant/icon/rating-stars.png | Bin 0 -> 553 bytes themes/elegant/local_head.tpl | 6 +- themes/elegant/scripts.js | 131 +++++------- themes/elegant/scripts_pp.js | 176 ++++++++++++++++ themes/elegant/template/picture.tpl | 385 +++++++++++++++++++++++++++++++++++ themes/elegant/theme.css | 324 +++++++++++++++++------------ 11 files changed, 805 insertions(+), 217 deletions(-) create mode 100644 themes/elegant/icon/arrows_ccc.png create mode 100644 themes/elegant/icon/arrows_fff.png create mode 100644 themes/elegant/icon/img_next.png create mode 100644 themes/elegant/icon/img_prev.png create mode 100644 themes/elegant/icon/none.png create mode 100644 themes/elegant/icon/rating-stars.png create mode 100644 themes/elegant/scripts_pp.js create mode 100644 themes/elegant/template/picture.tpl diff --git a/themes/elegant/icon/arrows_ccc.png b/themes/elegant/icon/arrows_ccc.png new file mode 100644 index 000000000..d4e0b3514 Binary files /dev/null and b/themes/elegant/icon/arrows_ccc.png differ diff --git a/themes/elegant/icon/arrows_fff.png b/themes/elegant/icon/arrows_fff.png new file mode 100644 index 000000000..a3a4cd675 Binary files /dev/null and b/themes/elegant/icon/arrows_fff.png differ diff --git a/themes/elegant/icon/img_next.png b/themes/elegant/icon/img_next.png new file mode 100644 index 000000000..be982ed82 Binary files /dev/null and b/themes/elegant/icon/img_next.png differ diff --git a/themes/elegant/icon/img_prev.png b/themes/elegant/icon/img_prev.png new file mode 100644 index 000000000..1061c77b5 Binary files /dev/null and b/themes/elegant/icon/img_prev.png differ diff --git a/themes/elegant/icon/none.png b/themes/elegant/icon/none.png new file mode 100644 index 000000000..f32e0d46b Binary files /dev/null and b/themes/elegant/icon/none.png differ diff --git a/themes/elegant/icon/rating-stars.png b/themes/elegant/icon/rating-stars.png new file mode 100644 index 000000000..b4d4de476 Binary files /dev/null and b/themes/elegant/icon/rating-stars.png differ diff --git a/themes/elegant/local_head.tpl b/themes/elegant/local_head.tpl index 8279d6f15..0c935140e 100644 --- a/themes/elegant/local_head.tpl +++ b/themes/elegant/local_head.tpl @@ -1 +1,5 @@ -{combine_script id='elegant.scripts' require='jquery' path='themes/elegant/scripts.js'} +{if $BODY_ID=='thePicturePage'} + {combine_script id='elegant.scripts_pp' load='header' require='jquery' path='themes/elegant/scripts_pp.js'} +{else} + {combine_script id='elegant.scripts' load='header' require='jquery' path='themes/elegant/scripts.js'} +{/if} \ No newline at end of file diff --git a/themes/elegant/scripts.js b/themes/elegant/scripts.js index d6e9d7cc5..20433ac65 100644 --- a/themes/elegant/scripts.js +++ b/themes/elegant/scripts.js @@ -1,109 +1,78 @@ -jQuery("document").ready(function(jQuery){ - - var menubar=jQuery("#menubar"); - var content=jQuery("#content"); - - if ( (menubar.length == 1) && (content.length ==1)) { - menubar.after("
«
"); - - jQuery("#menuswitcher").click(function(){ - if (jQuery("#menubar").is(":hidden")) { - showMenu(0); - return false; - } else { - hideMenu(0); - return false; - } - }); - - // creates a variable with the contents of the cookie side-menu - var sidemenu = jQuery.cookie('side-menu'); - - // if cookie says the menu is hiding, keep it hidden! - if (sidemenu == 'hiding') { - hideMenu(0); - } else { - showMenu(0); - } - - } - - var comments=jQuery("#thePicturePage #comments"); - if (comments.length == 1) { - var comments_button=jQuery("#comments h3"); - - if (comments_button.length == 0) { - jQuery("#addComment").before("

Comments

"); - comments_button=jQuery("#comments h3"); - } - - if (jQuery.cookie('comments') == 'visible') { - comments_button.addClass("comments_toggle").addClass("comments_toggle_off"); - } else { - comments.addClass("comments_hidden"); - comments_button.addClass("comments_toggle").addClass("comments_toggle_on"); - } - - comments_button.click(function() { +/** + * Cookie plugin + * Copyright (c) 2006 Klaus Hartl (stilbuero.de) + * Dual licensed under the MIT and GPL licenses: + */ +jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;} +var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;} +expires='; expires='+date.toUTCString();} +var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i#the_page #menubar {display:none;} #content.contentWithMenu, #the_page > .content {margin-left:35px;}"); +} else { + jQuery("head").append(""); +} function hideMenu(delay) { - var menubar=jQuery("#menubar"); - var menuswitcher=jQuery("#menuswitcher"); + var menuswitcher=jQuery("#menuSwitcher"); var content=jQuery("#the_page > .content"); var pcontent=jQuery("#content"); menubar.hide(delay); menuswitcher.addClass("menuhidden").removeClass("menushown"); - menuswitcher.text("»"); content.addClass("menuhidden").removeClass("menushown"); pcontent.addClass("menuhidden").removeClass("menushown"); - jQuery.cookie('side-menu', 'hiding', {path: "/"}); + jQuery.cookie('page-menu', 'hidden', {path: "/"}); } function showMenu(delay) { var menubar=jQuery("#menubar"); - var menuswitcher=jQuery("#menuswitcher"); + var menuswitcher=jQuery("#menuSwitcher"); var content=jQuery("#the_page > .content"); var pcontent=jQuery("#content"); menubar.show(delay); menuswitcher.addClass("menushown").removeClass("menuhidden"); - menuswitcher.text("«"); content.addClass("menushown").removeClass("menuhidden"); pcontent.addClass("menushown").removeClass("menuhidden"); - jQuery.cookie('side-menu', 'showing', {path: "/"}); + jQuery.cookie('page-menu', 'visible', {path: "/"}); } -/** - * Cookie plugin - * Copyright (c) 2006 Klaus Hartl (stilbuero.de) - * Dual licensed under the MIT and GPL licenses: - */ -jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;} -var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;} -expires='; expires='+date.toUTCString();} -var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i "); + + // if cookie says the menu is hiding, keep it hidden! + if (sidemenu == 'hidden') { + hideMenu(0); + } else { + showMenu(0); + } + + jQuery("#menuSwitcher").click(function(){ + if (jQuery("#menubar").is(":hidden")) { + showMenu(0); + return false; + } else { + hideMenu(0); + return false; + } + }); + + + } + +}); + diff --git a/themes/elegant/scripts_pp.js b/themes/elegant/scripts_pp.js new file mode 100644 index 000000000..92e8cfc06 --- /dev/null +++ b/themes/elegant/scripts_pp.js @@ -0,0 +1,176 @@ +/** + * Cookie plugin + * Copyright (c) 2006 Klaus Hartl (stilbuero.de) + * Dual licensed under the MIT and GPL licenses: + */ +jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options=jQuery.extend({},options);options.expires=-1;} +var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;} +expires='; expires='+date.toUTCString();} +var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i#content.contentWithMenu, #the_page > .content {margin-left:240px;}"); +} else { + jQuery("head").append(""); +} + +function hideMenu(delay) { + var menubar=jQuery("#menubar"); + var menuswitcher=jQuery("#menuSwitcher"); + var content=jQuery("#the_page > .content"); + var pcontent=jQuery("#content"); + + menubar.hide(delay); + menuswitcher.addClass("menuhidden").removeClass("menushown"); + content.addClass("menuhidden").removeClass("menushown"); + pcontent.addClass("menuhidden").removeClass("menushown"); + jQuery.cookie('picture-menu', 'hidden', {path: "/"}); + +} + +function showMenu(delay) { + + var menubar=jQuery("#menubar"); + var menuswitcher=jQuery("#menuSwitcher"); + var content=jQuery("#the_page > .content"); + var pcontent=jQuery("#content"); + + menubar.show(delay); + menuswitcher.addClass("menushown").removeClass("menuhidden"); + content.addClass("menushown").removeClass("menuhidden"); + pcontent.addClass("menushown").removeClass("menuhidden"); + jQuery.cookie('picture-menu', 'visible', {path: "/"}); + +} + +function hideInfo(delay) { + + var imageInfos=jQuery("#imageInfos"); + var infoswitcher=jQuery("#infoSwitcher"); + var theImage=jQuery("#theImage"); + + imageInfos.hide(delay); + infoswitcher.addClass("infohidden").removeClass("infoshown"); + theImage.addClass("infohidden").removeClass("infoshown"); + jQuery.cookie('side-info', 'hidden', {path: "/"}); + +} + +function showInfo(delay) { + + var imageInfos=jQuery("#imageInfos"); + var infoswitcher=jQuery("#infoSwitcher"); + var theImage=jQuery("#theImage"); + + imageInfos.show(delay); + infoswitcher.addClass("infoshown").removeClass("infohidden"); + theImage.addClass("infoshown").removeClass("infohidden"); + jQuery.cookie('side-info', 'visible', {path: "/"}); + +} + +jQuery("document").ready(function(jQuery){ + + // side-menu show/hide + + var sidemenu = jQuery.cookie('picture-menu'); + var menubar=jQuery("#menubar"); + + if (menubar.length == 1) { + + jQuery("#menuSwitcher").html("
 
"); + + // if cookie says the menu is hiding, keep it hidden! + if (sidemenu == 'visible') { + showMenu(0); + } else { + hideMenu(0); + } + + jQuery("#menuSwitcher").click(function(){ + if (jQuery("#menubar").is(":hidden")) { + showMenu(0); + return false; + } else { + hideMenu(0); + return false; + } + }); + + } + + // info show/hide + + var sideinfo = jQuery.cookie('side-info'); + var imageInfos=jQuery("#imageInfos"); + + if (imageInfos.length == 1) { + + jQuery("#infoSwitcher").html("
 
"); + + // if cookie says the menu is hiding, keep it hidden! + if (sideinfo == 'hidden') { + hideInfo(0); + } else { + showInfo(0); + } + + jQuery("#infoSwitcher").click(function(){ + if (jQuery("#imageInfos").is(":hidden")) { + showInfo(0); + return false; + } else { + hideInfo(0); + return false; + } + }); + + } + + // comments show/hide + + var commentsswicther=jQuery("#commentsSwitcher"); + var comments=jQuery("#thePicturePage #comments"); + + commentsswicther.html("
 
"); + + if (comments.length == 1) { + var comments_button=jQuery("#comments h3"); + + if (comments_button.length == 0) { + jQuery("#addComment").before("

Comments

"); + comments_button=jQuery("#comments h3"); + } + + if (jQuery.cookie('comments') == 'visible') { + comments.addClass("commentsshown"); + comments_button.addClass("comments_toggle").addClass("comments_toggle_off"); + } else { + comments.addClass("commentshidden"); + comments_button.addClass("comments_toggle").addClass("comments_toggle_on"); + } + + comments_button.click(function() { commentsToggle() }); + commentsswicther.click(function() { commentsToggle() }); + + } + + +}); + +function commentsToggle() { + var comments=jQuery("#thePicturePage #comments"); + var comments_button=jQuery("#comments h3"); + + if (comments.hasClass("commentshidden")) { + comments.removeClass("commentshidden").addClass("commentsshown"); + comments_button.addClass("comments_toggle_off").removeClass("comments_toggle_on");; + jQuery.cookie('comments', 'visible', {path: "/"}); + } else { + comments.addClass("commentshidden").removeClass("commentsshown"); + comments_button.addClass("comments_toggle_on").removeClass("comments_toggle_off");; + jQuery.cookie('comments', 'hidden', {path: "/"}); + } + +} diff --git a/themes/elegant/template/picture.tpl b/themes/elegant/template/picture.tpl new file mode 100644 index 000000000..e509ccaf1 --- /dev/null +++ b/themes/elegant/template/picture.tpl @@ -0,0 +1,385 @@ +{* Example of resizeable +{include file='include/autosize.inc.tpl'} +*} +{if isset($MENUBAR)}{$MENUBAR}{/if} +
+{if isset($errors) or not empty($infos)} +{include file='infos_errors.tpl'} +{/if} +{if !empty($PLUGIN_PICTURE_BEFORE)}{$PLUGIN_PICTURE_BEFORE}{/if} + +
+
+ {$SECTION_TITLE}{$LEVEL_SEPARATOR}

{$current.TITLE}

+
+
+ +
+
{$PHOTO}
+
+ +{if count($current.unique_derivatives)>1} +{footer_script}{literal} +function changeImgSrc(url,typeSave,typeMap) +{ + var theImg = document.getElementById("theMainImage"); + if (theImg) + { + theImg.removeAttribute("width");theImg.removeAttribute("height"); + theImg.src = url; + theImg.useMap = "#map"+typeMap; + } + jQuery('.derivativeChecked').hide(); + jQuery('#derivativeChecked'+typeSave).show(); + jQuery('#derivativeSwitchBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected'); + jQuery('#derivativeName'+typeSave).addClass('switchSelected').removeClass('switchUnselected'); + document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}'; +} + +function toggleDerivativeSwitchBox() +{ + var elt = document.getElementById("derivativeSwitchBox"), + ePos = document.getElementById("derivativeSwitchLink"); + if (elt.style.display==="none") + { + elt.style.position = "absolute"; + elt.style.left = (ePos.offsetLeft)+"px"; + elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; + elt.style.display=""; + } + else + elt.style.display="none"; +} +{/literal}{/footer_script} +{strip} + {'Photo sizes'|@translate} + +{/strip}{/if} + + +{strip}{if isset($U_SLIDESHOW_START)} + + {'slideshow'|@translate} + +{/if}{/strip} +{strip}{if isset($U_METADATA)} + + {'Show file metadata'|@translate} + +{/if}{/strip} +{strip}{if isset($current.U_DOWNLOAD)} + + {'Download'|@translate} + +{/if}{/strip} +{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if} +{strip}{if isset($favorite)} + + {'Favorites'|@translate} + +{/if}{/strip} +{strip}{if isset($U_SET_AS_REPRESENTATIVE)} + + {'representative'|@translate} + +{/if}{/strip} +{strip}{if isset($U_ADMIN)} + + {'Edit'|@translate} + +{/if}{/strip} +{strip}{if isset($U_CADDIE)}{*caddie management BEGIN*} +{footer_script} +{literal}function addToCadie(aElement, rootUrl, id) +{ +if (aElement.disabled) return; +aElement.disabled=true; +var y = new PwgWS(rootUrl); +y.callService( + "pwg.caddie.add", {image_id: id} , + { + onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; }, + onSuccess: function(result) { aElement.disabled = false; } + } + ); +}{/literal} +{/footer_script} + + {'Caddie'|@translate} + +{/if}{/strip}{*caddie management END*} +
+ + {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'} +
{**} + +
+
+{$ELEMENT_CONTENT} + +{if isset($COMMENT_IMG)} +

{$COMMENT_IMG}

+{/if} + +{if isset($U_SLIDESHOW_STOP)} +

+ [ {'stop the slideshow'|@translate} ] +

+{/if} + +
+{if $DISPLAY_NAV_THUMB} +
+ {if isset($previous)} + + {/if} + {if isset($next)} + + {/if} +
+{/if} + +
+{strip} + {if $display_info.author} +
+
{'Author'|@translate}
+
{if isset($INFO_AUTHOR)}{$INFO_AUTHOR}{else}{'N/A'|@translate}{/if}
+
+ {/if} + {if $display_info.created_on} +
+
{'Created on'|@translate}
+
{if isset($INFO_CREATION_DATE)}{$INFO_CREATION_DATE}{else}{'N/A'|@translate}{/if}
+
+ {/if} + {if $display_info.posted_on} +
+
{'Posted on'|@translate}
+
{$INFO_POSTED_DATE}
+
+ {/if} + {if $display_info.dimensions} +
+
{'Dimensions'|@translate}
+
{if isset($INFO_DIMENSIONS)}{$INFO_DIMENSIONS}{else}{'N/A'|@translate}{/if}
+
+ {/if} + {if $display_info.file} +
+
{'File'|@translate}
+
{$INFO_FILE}
+
+ {/if} + {if $display_info.filesize} +
+
{'Filesize'|@translate}
+
{if isset($INFO_FILESIZE)}{$INFO_FILESIZE}{else}{'N/A'|@translate}{/if}
+
+ {/if} + {if $display_info.tags } +
+
{'Tags'|@translate}
+
+ {if isset($related_tags)} + {foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}{$tag.name}{/foreach} + {else}  + {/if} +
+
+ {/if} + {if $display_info.categories} + +
{'Albums'|@translate}
+
+ {if isset($related_categories)} +
    + {foreach from=$related_categories item=cat} +
  • {$cat}
    • + {/foreach} +
+ {/if} +
+ + {/if} + {if $display_info.visits} +
+
{'Visits'|@translate}
+
{$INFO_VISITS}
+
+ {/if} + +{if $display_info.rating_score and isset($rate_summary)} +
+
{'Rating score'|@translate}
+
+ {if $rate_summary.count} + {$rate_summary.score} ({assign var='rate_text' value='%d rates'|@translate}{$pwg->sprintf($rate_text, $rate_summary.count)}) + {else} + {'no rate'|@translate} + {/if} +
+
+{/if} + +{if isset($rating)} +
+
+ {if isset($rating.USER_RATE)}{'Update your rating'|@translate}{else}{'Rate this photo'|@translate}{/if} +
+
+
+
+ {foreach from=$rating.marks item=mark name=rate_loop} + {if isset($rating.USER_RATE) && $mark==$rating.USER_RATE} + + {else} + + {/if} + {/foreach} + {strip}{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'} + {combine_script id='rating' load='async' require='core.scripts' path='themes/default/js/rating.js'} + {footer_script} + var _pwgRatingAutoQueue = _pwgRatingAutoQueue||[]; + _pwgRatingAutoQueue.push( {ldelim}rootUrl: '{$ROOT_URL}', image_id: {$current.id}, + onSuccess : function(rating) {ldelim} + var e = document.getElementById("updateRate"); + if (e) e.innerHTML = "{'Update your rating'|@translate|@escape:'javascript'}"; + e = document.getElementById("ratingScore"); + if (e) e.innerHTML = rating.score; + e = document.getElementById("ratingCount"); + if (e) e.innerHTML = "({'%d rates'|@translate|@escape:'javascript'})".replace( "%d", rating.count); + {rdelim}{rdelim} ); + {/footer_script} + {/strip} +
+
+
+
+{/if} + +{if $display_info.privacy_level and isset($available_permission_levels)} +
+
{'Who can see this photo?'|@translate}
+
+{combine_script id='core.scripts' require='jquery' load='async' path='themes/default/js/scripts.js'} +{footer_script} +{literal}function setPrivacyLevel(rootUrl, id, level) +{ +var y = new PwgWS(rootUrl); +y.callService( + "pwg.images.setPrivacyLevel", {image_id: id, level:level} , + { + method: "POST", + onFailure: function(num, text) { alert(num + " " + text); }, + onSuccess: function(result) { + jQuery('.levelCheck').hide(); + jQuery('#levelCheck'+level).show(); + jQuery('#privacyLevelBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected'); + jQuery('#switchLevel'+level).addClass('switchSelected').removeClass('switchUnselected'); + } + } + ); +} +function togglePrivacyLevelBox() +{ + var elt = document.getElementById("privacyLevelBox"), + ePos = document.getElementById("privacyLevelLink"); + if (elt.style.display == "none") + { + elt.style.position = "absolute"; + elt.style.left = (ePos.offsetLeft)+"px"; + elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px"; + elt.style.display=""; + } + else + elt.style.display="none"; +} +{/literal} +{/footer_script} + + + +
+
+{/if} +{/strip} +
+ +{if isset($metadata)} +
+{foreach from=$metadata item=meta} +

{$meta.TITLE}

+ {foreach from=$meta.lines item=value key=label} +
{$label}
+
{$value}
+ {/foreach} +{/foreach} +
+{/if} +
+
+ +{if isset($COMMENT_COUNT)} +
+ {if $COMMENT_COUNT > 0} +

{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}

+ {if $COMMENT_COUNT > 2} + {$COMMENTS_ORDER_TITLE} + {/if} + {else} +

{$pwg->l10n_dec('%d comment', '%d comments',$COMMENT_COUNT)}

+ {/if} + {if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if} + + {if isset($comments)} + {include file='comment_list.tpl'} + {/if} + + {if isset($comment_add)} +
+
+ {'Add a comment'|@translate} + {if $comment_add.SHOW_AUTHOR} + + {/if} + + + +
+
+ {/if} +
+{/if}{*comments*} + +{if !empty($PLUGIN_PICTURE_AFTER)}{$PLUGIN_PICTURE_AFTER}{/if} + +
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 -- cgit v1.2.3