css sprites

git-svn-id: http://piwigo.org/svn/trunk@8091 68402e56-0260-453c-a942-63ccdbb3a9ee
2010-12-12 12:22:49 +00:00 · 2010-12-12 12:22:49 +00:00 · 7626e48e01
commit 7626e48e01
parent 4448b8db7f
12 changed files with 130 additions and 131 deletions
--- a/themes/clear/theme.css
+++ b/themes/clear/theme.css
@ -50,8 +50,9 @@ UL.thumbnails SPAN.wrap2:hover,

 /* links */
 A, INPUT.rateButton {
-    color: #005e89;
-    background: transparent;
+	color: #005e89;
+	background: transparent;
+	border-bottom: 1px dotted #005e89;
 }

 A:hover, INPUT.rateButton:hover {
--- a/themes/default/iconset.css
+++ b/themes/default/iconset.css
@ -6,13 +6,13 @@
 }
 .pwg-button-text { display:none; }

-a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
+A.pwg-state-default, A.pwg-state-default:visited, A.pwg-state-default:hover {
 	text-decoration: none !important;
 }

 .pwg-state-disabled .pwg-icon {
 	opacity: .5;
-	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";!
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 }

@ -23,10 +23,11 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {

 .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-save {background-position: -78px 0}
+.pwg-icon-cloud {background-position: -104px 0}
+.pwg-icon-letters {background-position: -130px 0}
+.pwg-icon-calendar {background-position: -156px 0}
+.pwg-icon-camera-calendar {background-position: -182px 0}

 .pwg-icon-arrow-n {background-position: 0 -26px}
 .pwg-icon-arrow-e {background-position: -26px -26px}
@ -37,6 +38,11 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
 .pwg-icon-arrowstop-s {background-position: -156px -26px}
 .pwg-icon-arrowstop-w {background-position: -182px -26px}

+.pwg-icon-close {background-position: 0 -52px}
+.pwg-icon-category-edit {background-position: -26px -52px}
+.pwg-icon-category-view-normal {background-position: -156px -52px}
+.pwg-icon-category-view-flat {background-position: -182px -52px}
+
 .pwg-icon-caddie {background-position: 0 -78px}
 .pwg-icon-caddie-add {background-position: -26px -78px}
 .pwg-icon-caddie-del {background-position: -52px -78px}
@ -45,7 +51,7 @@ 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-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}
@ -59,23 +65,6 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
 .pwg-icon-repeat-play {background-position: -156px -130px}
 .pwg-icon-repeat-stop {background-position: -182px -130px}

-/*
-.pwg-icon-camera-calendar
-flat
-normal
-filter-plus
-filter-minus
-
-.pwg-icon-stop
-
-.pwg-icon-time
-.pwg-icon-time-plus
-.pwg-icon-time-minus
-.pwg-icon-repeat
-.pwg-icon-repeat-yes
-.pwg-icon-repeat-no
-*/
-

 A.pwg-button {
 	border: 1px solid blue;
--- a/themes/default/sprite.png
+++ b/themes/default/sprite.png
--- a/themes/default/template/about.tpl
+++ b/themes/default/template/about.tpl
@ -1,9 +1,9 @@
 <div id="content" class="content">
  <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>
+			<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>
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@ -1,76 +1,85 @@
 {$MENUBAR}
 {if !empty($PLUGIN_INDEX_CONTENT_BEFORE)}{$PLUGIN_INDEX_CONTENT_BEFORE}{/if}
 <div id="content" class="content">
-  <div class="titrePage">
-    <ul class="categoryActions">
-      {if !empty($image_orders) }
-      <li>
-      {'Sort order'|@translate}:
-      <select onchange="document.location = this.options[this.selectedIndex].value;">
-        {foreach from=$image_orders item=image_order }
-        <option value="{$image_order.URL}"{if $image_order.SELECTED} selected="selected"{/if}>{$image_order.DISPLAY}</option>
-        {/foreach}
-      </select>
-      </li>
-      {/if}
+<div class="titrePage">
+	<ul class="categoryActions">
+		{if !empty($image_orders) }
+		<li>
+		{'Sort order'|@translate}:
+		<select onchange="document.location = this.options[this.selectedIndex].value;">
+			{foreach from=$image_orders item=image_order }
+			<option value="{$image_order.URL}"{if $image_order.SELECTED} selected="selected"{/if}>{$image_order.DISPLAY}</option>
+			{/foreach}
+		</select>
+		</li>
+		{/if}

-      {if isset($favorite) }
-      <li><a href="{$favorite.U_FAVORITE}" title="{'delete all images from your favorites'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/del_all_favorites.png" class="button" alt="favorite" title="{'delete all images from your favorites'|@translate}"></a></li>
-      {/if}
+{if isset($favorite)}
+		<li><a href="{$favorite.U_FAVORITE}" title="{'delete all images from your favorites'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-favorite-del">&nbsp;</span><span class="pwg-button-text">{'delete all images from your favorites'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_CADDIE)}
+		<li><a href="{$U_CADDIE}" title="{'add to caddie'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_EDIT)}
+		<li><a href="{$U_EDIT}" title="{'edit'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-category-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_SEARCH_RULES)}
+		{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
+		<li><a href="{$U_SEARCH_RULES}" onclick="popuphelp(this.href); return false;" title="{'Search rules'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-help">&nbsp;</span><span class="pwg-button-text">(?)</span>
+		</a></li>
+{/if}
+{if isset($U_SLIDESHOW)}
+		<li><a href="{$U_SLIDESHOW}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_FLAT)}
+		<li><a href="{$U_MODE_FLAT}" title="{'display all elements in all sub-albums'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
+			<span class="pwg-icon pwg-icon-category-view-flat">&nbsp;</span><span class="pwg-button-text">{'display all elements in all sub-albums'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_NORMAL)}
+		<li><a href="{$U_MODE_NORMAL}" title="{'return to normal view mode'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-category-view-normal">&nbsp;</span><span class="pwg-button-text">{'return to normal view mode'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_POSTED)}
+		<li><a href="{$U_MODE_POSTED}" title="{'display a calendar by posted date'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-camera-calendar">&nbsp;</span><span class="pwg-button-text">{'Calendar'|@translate}</span>
+		</a></li>
+{/if}
+{if isset($U_MODE_CREATED)}
+		<li><a href="{$U_MODE_CREATED}" title="{'display a calendar by creation date'|@translate}" class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-camera-calendar">&nbsp;</span><span class="pwg-button-text">{'Calendar'|@translate}</span>
+		</a></li>
+{/if}
+{if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
+	</ul>

-      {if isset($U_CADDIE) }
-      <li><a href="{$U_CADDIE}" title="{'add to caddie'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/caddie_add.png" class="button" alt="{'caddie'|@translate}"></a></li>
-      {/if}
+<h2>{$TITLE}</h2>

-      {if isset($U_EDIT) }
-      <li><a href="{$U_EDIT}" title="{'edit'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/category_edit.png" class="button" alt="{'edit'|@translate}"></a></li>
-      {/if}
+{if isset($chronology_views)}
+<div class="calendarViews">{'View'|@translate}:
+	<select onchange="document.location = this.options[this.selectedIndex].value;">
+		{foreach from=$chronology_views item=view}
+		<option value="{$view.VALUE}"{if $view.SELECTED} selected="selected"{/if}>{$view.CONTENT}</option>
+		{/foreach}
+	</select>
+</div>
+{/if}

-      {if isset($U_SEARCH_RULES) }
-			{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
-      <li><a href="{$U_SEARCH_RULES}" onclick="popuphelp(this.href); return false;" title="{'Search rules'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/search_rules.png" class="button" alt="(?)"></a></li>
-      {/if}
+{if isset($chronology.TITLE) }
+<h2>{$chronology.TITLE}</h2>
+{/if}

-      {if isset($U_SLIDESHOW) }
-      <li><a href="{$U_SLIDESHOW}" title="{'slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_slideshow.png" class="button" alt="{'slideshow'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_MODE_FLAT) }
-      <li><a href="{$U_MODE_FLAT}" title="{'display all elements in all sub-albums'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/flat.png" class="button" alt="{'display all elements in all sub-albums'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_MODE_NORMAL) }
-      <li><a href="{$U_MODE_NORMAL}" title="{'return to normal view mode'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/normal_mode.png" class="button" alt="{'return to normal view mode'|@translate}"></a></li>
-      {/if}
-
-      {if isset($U_MODE_POSTED) }
-      <li><a href="{$U_MODE_POSTED}" title="{'display a calendar by posted date'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/calendar.png" class="button" alt="{'display a calendar by posted date'|@translate}"></a></li>
-      {/if}
-      
-      {if isset($U_MODE_CREATED) }
-      <li><a href="{$U_MODE_CREATED}" title="{'display a calendar by creation date'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/calendar_created.png" class="button" alt="{'display a calendar by creation date'|@translate}"></a></li>
-      {/if}
-      
-      {if !empty($PLUGIN_INDEX_ACTIONS)}{$PLUGIN_INDEX_ACTIONS}{/if}
-    </ul>
-
-  <h2>{$TITLE}</h2>
-
-  {if isset($chronology_views) }
-  <div class="calendarViews">{'View'|@translate}:
-    <select onchange="document.location = this.options[this.selectedIndex].value;">
-      {foreach from=$chronology_views item=view}
-      <option value="{$view.VALUE}"{if $view.SELECTED} selected="selected"{/if}>{$view.CONTENT}</option>
-      {/foreach}
-    </select>
-  </div>
-  {/if}
-
-  {if isset($chronology.TITLE) }
-  <h2>{$chronology.TITLE}</h2>
-  {/if}
-
-  </div> <!-- titrePage -->
+</div> <!-- titrePage -->

 {if !empty($PLUGIN_INDEX_CONTENT_BEGIN)}{$PLUGIN_INDEX_CONTENT_BEGIN}{/if}

--- a/themes/default/template/nbm.tpl
+++ b/themes/default/template/nbm.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="{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
-    </ul>
-    <h2>{'Notification'|@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>{'Notification'|@translate}</h2>
+	</div>

  {if not empty($errors)}
  <div class="errors">
--- a/themes/default/template/password.tpl
+++ b/themes/default/template/password.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>{'Password forgotten'|@translate}</h2>
-  </div>
+	<div class="titrePage">
+		<ul class="categoryActions">
+			<li><a href="{$U_HOME}" title="{'Go through the gallery as a visitor'|@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>{'Password forgotten'|@translate}</h2>
+	</div>

  {if count($errors)}
  <div class="errors">
--- a/themes/default/template/picture_toolbar.tpl
+++ b/themes/default/template/picture_toolbar.tpl
@ -17,7 +17,7 @@
 {/if}
 {if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
 {if isset($favorite)}
-		<a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}" class="pwg-state-default pwg-button" rel="novollow">
+		<a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}" class="pwg-state-default pwg-button" rel="nofollow">
 			<span class="pwg-icon pwg-icon-favorite-{if $favorite.IS_FAVORITE}del{else}add{/if}">&nbsp;</span><span class="pwg-button-text">{'Favorites'|@translate}</span>
 		</a>
 {/if}
--- a/themes/default/template/popuphelp.tpl
+++ b/themes/default/template/popuphelp.tpl
@ -1,14 +1,12 @@
 <div id="content" class="content">
-  <div class="titrePage">
+	<div class="titrePage">
 	<ul class="categoryActions">
-	  <li>
-		<a href="#" onclick="window.close();" title="{'Close this window'|@translate}">
-		  <img src="{$ROOT_URL}{$themeconf.icon_dir}/exit.png" class="button" alt="exit">
-		</a>
-	  </li>
+		<li><a href="#" onclick="window.close();" title="{'Close this window'|@translate} class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-close">&nbsp;</span><span class="pwg-button-text">exit</span>
+		</a></li>
 	</ul>
-  <h2>{$PAGE_TITLE}</h2>
-  </div>
+	<h2>{$PAGE_TITLE}</h2>
+	</div>

 {$HELP_CONTENT}

--- a/themes/default/template/search_rules.tpl
+++ b/themes/default/template/search_rules.tpl
@ -1,14 +1,12 @@
 <div id="content" class="content">
-  <div class="titrePage">
+	<div class="titrePage">
 	<ul class="categoryActions">
-	  <li>
-		<a href="#" onclick="window.close();" title="{'Close this window'|@translate}">
-		  <img src="{$ROOT_URL}{$themeconf.icon_dir}/exit.png" class="button" alt="exit">
-		</a>
-	  </li>
+		<li><a href="#" onclick="window.close();" title="{'Close this window'|@translate} class="pwg-state-default pwg-button">
+			<span class="pwg-icon pwg-icon-close">&nbsp;</span><span class="pwg-button-text">exit</span>
+		</a></li>
 	</ul>
-  <h2>{'Search rules'|@translate}</h2>
-  </div>
+	<h2>{'Search rules'|@translate}</h2>
+	</div>

 {if isset($INTRODUCTION) }
 <p>{$INTRODUCTION}</p>
--- a/themes/default/template/upload.tpl
+++ b/themes/default/template/upload.tpl
@ -1,4 +1,3 @@
-
 {* Example of resizeable *}
 {*
 {include file='include/autosize.inc.tpl'}
@ -6,12 +5,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>{'Upload a picture'|@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>{'Upload a picture'|@translate}</h2>
+	</div>

  {if !empty($errors)}
  <div class="errors">
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@ -455,7 +455,6 @@ H2 {

 A {
 	text-decoration:none;
-	border-bottom: 1px dotted #005e89;
 }
 A:hover {
 	border-bottom: 1px solid #858460;