css sprites (still ongoing)

git-svn-id: http://piwigo.org/svn/trunk@8076 68402e56-0260-453c-a942-63ccdbb3a9ee

12 files changed, 139 insertions, 78 deletions

diff --git a/themes/default/iconset.css b/themes/default/iconset.css
index 1bcc7c810..bd9f3f9e6 100644
--- a/themes/default/iconset.css
+++ b/themes/default/iconset.css
@@ -1,6 +1,8 @@
 .pwg-icon {
-	display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
-	width: 26px; height: 26px; background-image: url(sprite.png); 
+	display: block; /*IE6*/
+	display: inline-block; /*IE6 does not get it*/
+	text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
+	width: 26px; height: 26px; background-image: url(sprite.png);
 }
 .pwg-button-text { display:none; }
 
@@ -16,22 +18,24 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
 
 .pwg-button {
 	display: inline-block;
+	vertical-align: middle;
 }
 
 .pwg-icon-home {background-position: -26px 0}
 .pwg-icon-camera {background-position: -52px 0}
 .pwg-icon-calendar {background-position: -78px 0}
 .pwg-icon-save {background-position: -104px 0}
+.pwg-icon-cloud {background-position: -130px 0}
+.pwg-icon-letters {background-position: -156px 0}
 
 .pwg-icon-arrow-n {background-position: 0 -26px}
 .pwg-icon-arrow-e {background-position: -26px -26px}
 .pwg-icon-arrow-s {background-position: -52px -26px}
 .pwg-icon-arrow-w {background-position: -78px -26px}
-
-.pwg-icon-arrowstop-n {background-position: 0 -52px}
-.pwg-icon-arrowstop-e {background-position: -26px -52px}
-.pwg-icon-arrowstop-s {background-position: -52px -52px}
-.pwg-icon-arrowstop-w {background-position: -78px -52px}
+.pwg-icon-arrowstop-n {background-position: -104px -26px}
+.pwg-icon-arrowstop-e {background-position: -130px -26px}
+.pwg-icon-arrowstop-s {background-position: -156px -26px}
+.pwg-icon-arrowstop-w {background-position: -182px -26px}
 
 .pwg-icon-caddie {background-position: 0 -78px}
 .pwg-icon-caddie-add {background-position: -26px -78px}
@@ -41,18 +45,21 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
 .pwg-icon-favorite-del {background-position: -130px -78px}
 
 .pwg-icon-camera-info {background-position: 0 -104px}
+.pwg-icon-camera-representative {background-position: -26px -104px}
+.pwg-icon-edit {background-position: -52px -104px}
+.pwg-icon-register {background-position: -78px -104px}
+.pwg-icon-lost-password {background-position: -104px -104px}
 
 .pwg-icon-slideshow {background-position: 0 -130px}
 .pwg-icon-play {background-position: -26px -130px}
 .pwg-icon-pause {background-position: -52px -130px}
+.pwg-icon-stop {background-position: -78px -130px}
+.pwg-icon-clock-plus {background-position: -104px -130px}
+.pwg-icon-clock-minus {background-position: -130px -130px}
+.pwg-icon-repeat-play {background-position: -156px -130px}
+.pwg-icon-repeat-stop {background-position: -182px -130px}
 
 /*
-.pwg-icon-representative
-.pwg-icon-edit
-.pwg-icon-register
-.pwg-icon-lost-password
-.pwg-icon-cloud
-.pwg-icon-letters
 .pwg-icon-camera-calendar
 flat
 normal
diff --git a/themes/default/sprite.png b/themes/default/sprite.png
index f29704b98..dfeaaf74a 100644
--- a/themes/default/sprite.png
+++ b/themes/default/sprite.png
diff --git a/themes/default/template/about.tpl b/themes/default/template/about.tpl
index 477bd323e..9e9515386 100644
--- a/themes/default/template/about.tpl
+++ b/themes/default/template/about.tpl
@@ -1,11 +1,9 @@
 <div id="content" class="content">
   <div class="titrePage">
     <ul class="categoryActions">
-      <li>
-        <a href="{$U_HOME}" title="{'return to homepage'|@translate}">
-          <img src="{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}">
-        </a>
-      </li>
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
     </ul>
     <h2>{'About'|@translate}</h2>
   </div>
diff --git a/themes/default/template/comments.tpl b/themes/default/template/comments.tpl
index 69afca2ee..56f3b8a86 100644
--- a/themes/default/template/comments.tpl
+++ b/themes/default/template/comments.tpl
@@ -1,11 +1,13 @@
 <div id="content" class="content">
 
-  <div class="titrePage">
-    <ul class="categoryActions">
-      <li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-    </ul>
-    <h2>{'User comments'|@translate}</h2>
-  </div>
+<div class="titrePage">
+	<ul class="categoryActions">
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
+	</ul>
+	<h2>{'User comments'|@translate}</h2>
+</div>
 
 <form class="filter" action="{$F_ACTION}" method="get">
 
diff --git a/themes/default/template/identification.tpl b/themes/default/template/identification.tpl
index ca9bd04f7..3fcc24b50 100644
--- a/themes/default/template/identification.tpl
+++ b/themes/default/template/identification.tpl
@@ -1,11 +1,13 @@
 <div id="content" class="content">
 
-  <div class="titrePage">
-    <ul class="categoryActions">
-      <li><a href="{$U_HOME}" title="{'Go through the gallery as a visitor'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-    </ul>
-    <h2>{'Identification'|@translate}</h2>
-  </div>
+<div class="titrePage">
+	<ul class="categoryActions">
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
+	</ul>
+	<h2>{'Identification'|@translate}</h2>
+</div>
 
   {if isset($errors) }
   <div class="errors">
@@ -53,10 +55,14 @@
   </p>
 
   <p>
-    {if isset($U_REGISTER) }
-    <a href="{$U_REGISTER}" title="{'Register'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/register.png" class="button" alt="{'Register'|@translate}"> {'Register'|@translate}</a>
-    {/if}
-    <a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"> {'Forgot your password?'|@translate}</a>
+{if isset($U_REGISTER)}
+		<a href="{$U_REGISTER}" title="{'Register'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-register">&nbsp;</span><span>{'Register'|@translate}</span>
+		</a>
+{/if}
+		<a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-lost-password">&nbsp;</span><span>{'Forgot your password?'|@translate}</span>
+		</a>
   </p>
 
 </form>
diff --git a/themes/default/template/menubar_identification.tpl b/themes/default/template/menubar_identification.tpl
index 6a6a596a1..7591e7f60 100644
--- a/themes/default/template/menubar_identification.tpl
+++ b/themes/default/template/menubar_identification.tpl
@@ -50,11 +50,15 @@
 	<div>
         <input type="hidden" name="redirect" value="{$smarty.server.REQUEST_URI|@urlencode}">
 	<input class="submit" type="submit" name="login" value="{'Submit'|@translate}">
-	<ul class="actions">
-		<li><a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"></a></li>
-		{if isset($U_REGISTER)}
-		<li><a href="{$U_REGISTER}" title="{'Create a new account'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/register.png" class="button" alt="{'Register'|@translate}"></a></li>
-		{/if}
+	<ul class="categoryActions">
+{if isset($U_REGISTER)}
+		<li><a href="{$U_REGISTER}" title="{'Create a new account'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-register">&nbsp;</span>
+		</a></li>
+{/if}
+		<li><a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-lost-password">&nbsp;</span>
+		</a></li>
 	</ul>
 	</div>
 
diff --git a/themes/default/template/notification.tpl b/themes/default/template/notification.tpl
index 4fb1c70f4..ef2d99ced 100644
--- a/themes/default/template/notification.tpl
+++ b/themes/default/template/notification.tpl
@@ -6,7 +6,9 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
-      <li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
     </ul>
     <h2>{'Notification'|@translate}</h2>
   </div>
diff --git a/themes/default/template/picture_toolbar.tpl b/themes/default/template/picture_toolbar.tpl
index 23a7e0fed..e6f0d8edd 100644
--- a/themes/default/template/picture_toolbar.tpl
+++ b/themes/default/template/picture_toolbar.tpl
@@ -56,6 +56,37 @@ y.callService(
 
 	<div class="navigationButtons" style="float:right">
 {if $DISPLAY_NAV_BUTTONS or isset($slideshow)}
+{if isset($slideshow)}
+  {if isset($slideshow.U_INC_PERIOD)}
+		<a href="{$slideshow.U_INC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-clock-minus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
+		</a>
+	{else}
+		<span class="pwg-state-disabled pwg-button">
+			<span class="pwg-icon pwg-icon-clock-minus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
+		</span>
+	{/if}
+  {if isset($slideshow.U_DEC_PERIOD)}
+		<a href="{$slideshow.U_DEC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-clock-plus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
+		</a>
+	{else}
+		<span class="pwg-state-disabled pwg-button">
+			<span class="pwg-icon pwg-icon-clock-plus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
+		</span>
+	{/if}
+{/if}
+{if isset($slideshow.U_START_REPEAT)}
+		<a href="{$slideshow.U_START_REPEAT}" title="{'Repeat the slideshow'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-repeat-play">&nbsp;</span><span class="pwg-button-text">{'Repeat the slideshow'|@translate}</span>
+		</a>
+{/if}
+{if isset($slideshow.U_STOP_REPEAT)}
+		<a href="{$slideshow.U_STOP_REPEAT}" title="{'Not repeat the slideshow'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-repeat-stop">&nbsp;</span><span class="pwg-button-text">{'Not repeat the slideshow'|@translate}</span>
+		</a>
+{/if}
+
 {if isset($first)}
 		<a href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" class="pwg-state-default pwg-button">
 			<span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
diff --git a/themes/default/template/profile.tpl b/themes/default/template/profile.tpl
index 2bfcad3d1..3a401c599 100644
--- a/themes/default/template/profile.tpl
+++ b/themes/default/template/profile.tpl
@@ -10,12 +10,14 @@
 </div>
 {/if}
 
-  <div class="titrePage">
-    <ul class="categoryActions">
-      <li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-    </ul>
-    <h2>{'Profile'|@translate}</h2>
-  </div>
+<div class="titrePage">
+	<ul class="categoryActions">
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
+	</ul>
+	<h2>{'Profile'|@translate}</h2>
+</div>
 
 {$PROFILE_CONTENT}
 </div> <!-- content -->
diff --git a/themes/default/template/register.tpl b/themes/default/template/register.tpl
index 4d97be09d..c7f6d446f 100644
--- a/themes/default/template/register.tpl
+++ b/themes/default/template/register.tpl
@@ -2,12 +2,14 @@
 
 <div id="content" class="content">
 
-  <div class="titrePage">
-    <ul class="categoryActions">
-      <li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-    </ul>
-    <h2>{'Registration'|@translate}</h2>
-  </div>
+<div class="titrePage">
+	<ul class="categoryActions">
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
+	</ul>
+	<h2>{'Registration'|@translate}</h2>
+</div>
 
 {if isset($errors)}
   <div class="errors">
diff --git a/themes/default/template/search.tpl b/themes/default/template/search.tpl
index cc958f7dd..e16e5e897 100644
--- a/themes/default/template/search.tpl
+++ b/themes/default/template/search.tpl
@@ -1,11 +1,10 @@
-
 {* Example of resizeable *}
-
+{*
 {include file='include/resize.inc.tpl'}
-
+*}
 
 {* Example of datepicker *}
-
+{*
 {include file='include/datepicker.inc.tpl'}
 
 {footer_script}{literal}
@@ -13,18 +12,22 @@
   pwg_initialization_datepicker("#end_day", "#end_month", "#end_year", "#end_linked_date", null, "#start_linked_date", null);
  jQuery().ready(function(){ $(".date_today").hide(); });
 {/literal}{/footer_script}
-
+*}
 
 <div id="content" class="content">
 
-  <div class="titrePage">
-    <ul class="categoryActions">
+	<div class="titrePage">
+		<ul class="categoryActions">
 			{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
-      <li><a href="{$U_HELP}" onclick="popuphelp(this.href); return false;" title="{'Help'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/help.png" class="button" alt="(?)"></a></li>
-      <li><a href="{$U_HOME}" title="{'Home'|@translate}" rel="Home"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-    </ul>
-    <h2>{'Search'|@translate}</h2>
-  </div>
+			<li><a href="{$U_HELP}" onclick="popuphelp(this.href); return false;" title="{'Help'|@translate}" class="pwg-state-default pwg-button">
+				<span class="pwg-icon pwg-icon-help">&nbsp;</span><span class="pwg-button-text">{'Help'|@translate}</span>
+			</a></li>
+			<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+				<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+			</a></li>
+		</ul>
+		<h2>{'Search'|@translate}</h2>
+	</div>
 
 {if isset($errors) }
 <div class="errors">
diff --git a/themes/default/template/tags.tpl b/themes/default/template/tags.tpl
index 4c226f80c..820e3ee69 100644
--- a/themes/default/template/tags.tpl
+++ b/themes/default/template/tags.tpl
@@ -1,19 +1,23 @@
 <div id="content" class="content">
 
-	<div class="titrePage">
-		<ul class="categoryActions">
-		{if $display_mode == 'letters'}
-			<li><a href="{$U_CLOUD}" title="{'show tag cloud'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/tag_cloud.png" class="button" alt="{'cloud'|@translate}"></a></li>
-		{/if}
-
-		{if $display_mode == 'cloud'}
-			<li><a href="{$U_LETTERS}" title="{'group by letters'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/tag_letters.png" class="button" alt="{'letters'|@translate}"></a></li>
-		{/if}
-
-			<li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-		</ul>
-		<h2>{'Tags'|@translate}</h2>
-  </div>
+<div class="titrePage">
+	<ul class="categoryActions">
+{if $display_mode == 'letters'}
+		<li><a href="{$U_CLOUD}" title="{'show tag cloud'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-cloud">&nbsp;</span><span class="pwg-button-text">{'cloud'|@translate}</span>
+		</a></li>
+{/if}
+{if $display_mode == 'cloud'}
+		<li><a href="{$U_LETTERS}" title="{'group by letters'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-letters">&nbsp;</span><span class="pwg-button-text">{'letters'|@translate}</span>
+		</a></li>
+{/if}
+		<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
+		</a></li>
+	</ul>
+	<h2>{'Tags'|@translate}</h2>
+</div>
 
 {if isset($tags)}
 	{if $display_mode == 'cloud'}