makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 14:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/12155] Get rid of the <span> where possible and fix buttons in Safari.

Browse source 
PHPBB3-12155
This commit is contained in:
Cesar G 2014-05-26 14:53:00 -07:00
parent dff6741c7b
commit 4d60583412
6 changed files with 48 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
phpBB/styles/prosilver/template/ucp_pm_message_header.html
View file

@ -10,21 +10,21 @@
<div class="buttons"> <div class="buttons">
<!-- IF U_POST_REPLY_PM --> <!-- IF U_POST_REPLY_PM -->
<a title="{L_POST_REPLY_PM}" href="{U_POST_REPLY_PM}" class="button icon-button pmreply-icon"> <a title="{L_POST_REPLY_PM}" href="{U_POST_REPLY_PM}" class="button icon-button pmreply-icon">
<span>{L_BUTTON_PM_REPLY}</span> {L_BUTTON_PM_REPLY}
</a> </a>
<!-- ELSEIF U_POST_NEW_TOPIC --> <!-- ELSEIF U_POST_NEW_TOPIC -->
<a href="{U_POST_NEW_TOPIC}" accesskey="n" title="{L_UCP_PM_COMPOSE}" class="button icon-button newpm-icon"> <a href="{U_POST_NEW_TOPIC}" accesskey="n" title="{L_UCP_PM_COMPOSE}" class="button icon-button newpm-icon">
<span>{L_BUTTON_PM_NEW}</span> {L_BUTTON_PM_NEW}
</a> </a>
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF U_FORWARD_PM --> <!-- IF U_FORWARD_PM -->
<a title="{L_POST_FORWARD_PM}" href="{U_FORWARD_PM}" class="button icon-button forwardpm-icon"> <a title="{L_POST_FORWARD_PM}" href="{U_FORWARD_PM}" class="button icon-button forwardpm-icon">
<span>{L_BUTTON_PM_FORWARD}</span> {L_BUTTON_PM_FORWARD}
</a> </a>
<!-- ENDIF --> <!-- ENDIF -->
<!-- IF U_POST_REPLY_PM and S_PM_RECIPIENTS gt 1 --> <!-- IF U_POST_REPLY_PM and S_PM_RECIPIENTS gt 1 -->
<a title="{L_REPLY_TO_ALL}" href="{U_POST_REPLY_ALL}" class="button icon-button reply-all"> <a title="{L_REPLY_TO_ALL}" href="{U_POST_REPLY_ALL}" class="button icon-button reply-all">
<span>{L_BUTTON_PM_REPLY_ALL}</span> {L_BUTTON_PM_REPLY_ALL}
</a> </a>
<!-- ENDIF --> <!-- ENDIF -->
</div> </div>
@ -32,7 +32,7 @@
<!-- IF not S_IS_BOT and U_PRINT_PM --> <!-- IF not S_IS_BOT and U_PRINT_PM -->
<div class="dropdown-container dropdown-button-control topic-tools"> <div class="dropdown-container dropdown-button-control topic-tools">
<span title="{L_PM_TOOLS}" class="dropdown-trigger dropdown-select button icon-button tools-icon"><span></span></span> <span title="{L_PM_TOOLS}" class="dropdown-trigger dropdown-select button icon-button tools-icon"></span>
<div class="dropdown hidden"> <div class="dropdown hidden">
<div class="pointer"><div class="pointer-inner"></div></div> <div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents"> <ul class="dropdown-contents">

4
phpBB/styles/prosilver/template/viewforum_body.html
View file

@ -40,7 +40,7 @@
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO --> <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
<div class="buttons"> <div class="buttons">
<a href="{U_POST_NEW_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"> <a href="{U_POST_NEW_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
<span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></span> <!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF -->
</a> </a>
</div> </div>
<!-- ENDIF --> <!-- ENDIF -->
@ -226,7 +226,7 @@
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO --> <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
<div class="buttons"> <div class="buttons">
<a href="{U_POST_NEW_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"> <a href="{U_POST_NEW_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
<span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></span> <!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF -->
</a> </a>
</div> </div>
<!-- ENDIF --> <!-- ENDIF -->

4
phpBB/styles/prosilver/template/viewtopic_body.html
View file

@ -30,7 +30,7 @@
<div class="buttons"> <div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO --> <!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<a href="{U_POST_REPLY_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"> <a href="{U_POST_REPLY_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
<span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></span> <!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
</a> </a>
<!-- ENDIF --> <!-- ENDIF -->
</div> </div>
@ -343,7 +343,7 @@
<div class="buttons"> <div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO --> <!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<a href="{U_POST_REPLY_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"> <a href="{U_POST_REPLY_TOPIC}" class="button icon-button <!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
<span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></span> <!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
</a> </a>
<!-- ENDIF --> <!-- ENDIF -->
</div> </div>

2
phpBB/styles/prosilver/template/viewtopic_topic_tools.html
View file

@ -1,6 +1,6 @@
<!-- IF not S_IS_BOT and (U_WATCH_TOPIC or U_BOOKMARK_TOPIC or U_BUMP_TOPIC or S_HAS_ATTACHMENTS or U_EMAIL_TOPIC or U_PRINT_TOPIC or S_DISPLAY_TOPIC_TOOLS) --> <!-- IF not S_IS_BOT and (U_WATCH_TOPIC or U_BOOKMARK_TOPIC or U_BUMP_TOPIC or S_HAS_ATTACHMENTS or U_EMAIL_TOPIC or U_PRINT_TOPIC or S_DISPLAY_TOPIC_TOOLS) -->
<div class="dropdown-container dropdown-button-control topic-tools"> <div class="dropdown-container dropdown-button-control topic-tools">
<span title="{L_TOPIC_TOOLS}" class="button icon-button tools-icon dropdown-trigger dropdown-select"><span></span></span> <span title="{L_TOPIC_TOOLS}" class="button icon-button tools-icon dropdown-trigger dropdown-select"></span>
<div class="dropdown hidden"> <div class="dropdown hidden">
<div class="pointer"><div class="pointer-inner"></div></div> <div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents"> <ul class="dropdown-contents">

80
phpBB/styles/prosilver/theme/buttons.css
View file

@ -22,26 +22,17 @@
vertical-align: bottom; vertical-align: bottom;
} }
.icon-button, .dropdown-select {
padding-right: 20px;
}
.icon-button.dropdown-select { .icon-button.dropdown-select {
padding-right: 44px; padding-right: 28px;
} }
.icon-button span { .icon-button:before {
display: inline-block;
float: right;
}
.icon-button span:after {
background: transparent 0 0 no-repeat; background: transparent 0 0 no-repeat;
content: ''; content: '';
display: inline-block; display: inline-block;
float: right; float: right;
height: 12px; height: 12px;
margin: 3px -14px 0 0; margin: 3px 0 0 2px;
width: 12px; width: 12px;
} }
@ -69,29 +60,29 @@
} }
/* Big button images */ /* Big button images */
.reply-icon span:after, .pmreply-icon span:after { background-position: -20px 0; } .reply-icon:before, .pmreply-icon:before { background-position: -20px 0; }
.reply-icon:hover span:after, .pmreply-icon:hover span:after { background-position: -20px -20px; } .reply-icon:hover:before, .pmreply-icon:hover:before { background-position: -20px -20px; }
.post-icon span:after, .newpm-icon span:after, .reply-all span:after { background-position: 0 0; } .post-icon:before, .newpm-icon:before, .reply-all:before { background-position: 0 0; }
.post-icon:hover span:after, .post-icon:hover:before,
.newpm-icon:hover span:after, .newpm-icon:hover:before,
.reply-all:hover span:after { background-position: 0 -20px; } .reply-all:hover:before { background-position: 0 -20px; }
.locked-icon span:after { background-position: -60px 0; } .locked-icon:before { background-position: -60px 0; }
.locked-icon:hover span:after { background-position: -60px -20px; } .locked-icon:hover:before { background-position: -60px -20px; }
.forwardpm-icon span:after { background-position: -40px 0; } .forwardpm-icon:before { background-position: -40px 0; }
.forwardpm-icon:hover span:after { background-position: -40px -20px; } .forwardpm-icon:hover:before { background-position: -40px -20px; }
.tools-icon span:after { .tools-icon:before {
background-position: -80px 0; background-position: -80px 0;
height: 16px; height: 16px;
margin-top: 2px; margin-top: 2px;
width: 16px; width: 16px;
} }
.dropdown-visible .tools-icon span:after, .dropdown-visible .tools-icon:before,
.nojs .dropdown-container:hover .tools-icon span:after { background-position: -80px -20px; } .nojs .dropdown-container:hover .tools-icon:before { background-position: -80px -20px; }
/* Icon images /* Icon images
---------------------------------------- */ ---------------------------------------- */
@ -189,28 +180,31 @@ ul.linklist.bulletin li.small-icon:before {
} }
.post-buttons .icon-button span { .post-buttons .icon-button span {
font-size: 0; display: block;
height: 0;
overflow: hidden;
position: absolute;
width: 1px;
} }
.post-buttons .icon-button span:after { .post-buttons .icon-button:before {
float: none; margin-left: 0;
margin-right: 0;
} }
.quote-icon span:after { background-position: -122px 0; } .quote-icon:before { background-position: -122px 0; }
.quote-icon:hover span:after { background-position: -122px -21px; } .quote-icon:hover:before { background-position: -122px -21px; }
.edit-icon span:after { background-position: -137px 0; } .edit-icon:before { background-position: -137px 0; }
.edit-icon:hover span:after { background-position: -137px -21px; } .edit-icon:hover:before { background-position: -137px -21px; }
.warn-icon span:after { background-position: -208px 0; } .warn-icon:before { background-position: -208px 0; }
.warn-icon:hover span:after { background-position: -208px -21px; } .warn-icon:hover:before { background-position: -208px -21px; }
.delete-icon span:after { background-position: -152px 0; } .delete-icon:before { background-position: -152px 0; }
.delete-icon:hover span:after { background-position: -152px -21px; } .delete-icon:hover:before { background-position: -152px -21px; }
.report-icon span:after { background-position: -165px 0; } .report-icon:before { background-position: -165px 0; }
.report-icon:hover span:after { background-position: -165px -21px; } .report-icon:hover:before { background-position: -165px -21px; }
.info-icon span:after { background-position: -175px 0; } .info-icon:before { background-position: -175px 0; }
.info-icon:hover span:after { background-position: -175px -21px; } .info-icon:hover:before { background-position: -175px -21px; }
.button.responsive-menu-link span:after { background-position: -191px 0; } .button.responsive-menu-link:before { background-position: -191px 0; }
.button.responsive-menu-link:hover span:after { background-position: -191px -21px; } .button.responsive-menu-link:hover:before { background-position: -191px -21px; }
/* Responsive buttons in post body */ /* Responsive buttons in post body */
.post-buttons .dropdown { .post-buttons .dropdown {

2
phpBB/styles/prosilver/theme/colours.css
View file

@ -726,7 +726,7 @@ Colours and backgrounds for buttons.css
/* Profile & navigation icons */ /* Profile & navigation icons */
.contact-icon { background-image: url("./images/icons_contact.png"); } .contact-icon { background-image: url("./images/icons_contact.png"); }
.icon-button span:after, .dropdown-select:after { background-image: url("./images/icons_button.png"); } .icon-button:before, .dropdown-select:after { background-image: url("./images/icons_button.png"); }
/* Forum icons & Topic icons */ /* Forum icons & Topic icons */
.global_read { background-image: url("./images/announce_read.gif"); } .global_read { background-image: url("./images/announce_read.gif"); }