makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-11 22:08:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/12155] Move existing button style to a more generic class.

Browse source 
PHPBB3-12155
This commit is contained in:
Cesar G 2014-05-15 13:22:43 -07:00
parent 03d3762d52
commit 00ff33c9b4
6 changed files with 95 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -39,7 +39,11 @@
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
<div class="buttons">
<div class="<!-- 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}"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></a></div>
<div class="<!-- 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">
<span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF -->
</a>
</div>
</div>
<!-- ENDIF -->
@ -223,7 +227,11 @@
<div class="topic-actions">
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
<div class="buttons">
<div class="<!-- 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}"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF --></a></div>
<div class="<!-- 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">
<span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_FORUM_LOCKED}<!-- ELSE -->{L_BUTTON_NEW_TOPIC}<!-- ENDIF -->
</a>
</div>
</div>
<!-- ENDIF -->

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

@ -29,7 +29,11 @@
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></a></div>
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->">
<a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->" class="icon-button button">
<span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
</a>
</div>
<!-- ENDIF -->
</div>
@ -316,7 +320,11 @@
<div class="topic-actions">
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF --></a></div>
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->">
<a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->" class="button icon-button">
<span></span><!-- IF S_IS_LOCKED -->{L_BUTTON_TOPIC_LOCKED}<!-- ELSE -->{L_BUTTON_POST_REPLY}<!-- ENDIF -->
</a>
</div>
<!-- ENDIF -->
</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) -->
<div class="dropdown-container dropdown-button-control topic-tools">
<span title="{L_TOPIC_TOOLS}" class="dropdown-trigger dropdown-select dropdown-select-icon tools-icon"><span></span></span>
<span title="{L_TOPIC_TOOLS}" class="button icon-button tools-icon dropdown-trigger dropdown-select"><span></span></span>
<div class="dropdown hidden">
<div class="pointer"><div class="pointer-inner"></div></div>
<ul class="dropdown-contents">

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

@ -4,20 +4,8 @@
/* Rollover buttons
Based on: http://wellstyled.com/css-nopreload-rollovers.html
----------------------------------------*/
.buttons {
float: left;
width: auto;
height: auto;
}
/* Rollover state */
.buttons div, .dropdown-select {
float: left;
margin: 0 5px 0 0;
}
/* Rolloff state */
.buttons div a, .dropdown-select {
.button {
cursor: pointer;
display: inline-block;
line-height: 17.5px;
height: 18px;
@ -26,9 +14,8 @@
border: 1px solid transparent;
border-radius: 4px;
background: transparent none 0 0 repeat-x;
padding: 2px 22px 2px 8px;
padding: 2px 8px;
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
font-weight: 600;
position: relative;
text-decoration: none !important;
outline-style: none !important;
@ -36,70 +23,69 @@
*padding-right: 8px;
}
.buttons div span { display: none; }
.icon-button, .dropdown-select {
padding-right: 22px;
}
.buttons div a:after, .dropdown-select:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 6px;
width: 12px;
height: 12px;
margin-top: -6px;
.icon-button.dropdown-select {
padding-right: 44px;
}
.icon-button span {
background: transparent 0 0 no-repeat;
}
.buttons div a:hover:after {
background-position: 0 -20px;
}
.dropdown-select {
cursor: pointer;
font-family: inherit;
font-size: 1em;
font-weight: normal;
display: block;
float: right;
height: 12px;
margin: 3px -16px 0 0;
width: 12px;
}
.dropdown-select:after {
background-position: -103px 10px;
border-left: 1px solid;
margin-top: 0;
content: '';
position: absolute;
top: 0;
right: 0;
height: 21px;
width: 15px;
height: 22px;
width: 16px;
}
.dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after {
background-position: -103px -10px;
}
.dropdown-select-icon:before {
content: '';
display: block;
.buttons, .buttons div {
float: left;
margin-right: 4px;
margin-top: 2px;
}
.buttons .button, .dropdown-select {
margin-right: 5px;
}
/* Big button images */
.buttons div.reply-icon a:after, .buttons div.pmreply-icon a:after { background-position: -20px 0; }
.buttons div.reply-icon a:hover:after, .buttons div.pmreply-icon a:hover:after { background-position: -20px -20px; }
.reply-icon a span, .pmreply-icon a span { background-position: -20px 0; }
.reply-icon a:hover span, .pmreply-icon a:hover span { background-position: -20px -20px; }
.buttons div.post-icon a:after, .buttons div.newpm-icon a:after { background-position: 0 0; }
.buttons div.post-icon a:hover:after, .buttons div.newpm-icon a:hover:after { background-position: 0 -20px; }
.post-icon a span, .newpm-icon a span, .reply-all a span { background-position: 0 0; }
.post-icon a:hover span, .newpm-icon a:hover span,
.reply-all a:hover span { background-position: 0 -20px; }
.buttons div.locked-icon a:after { background-position: -60px 0; }
.buttons div.locked-icon a:hover:after { background-position: -60px -20px; }
.locked-icon a span { background-position: -60px 0; }
.locked-icon a:hover span { background-position: -60px -20px; }
.buttons div.forwardpm-icon a:after { background-position: -40px 0; }
.buttons div.forwardpm-icon a:hover:after { background-position: -40px -20px; }
.forwardpm-icon a span { background-position: -40px 0; }
.forwardpm-icon a:hover span { background-position: -40px -20px; }
.dropdown-select.tools-icon:before { background-position: -80px 0; height: 16px; width: 16px; }
.tools-icon span {
background-position: -80px 0;
height: 16px;
margin-top: 2px;
width: 16px;
}
.dropdown-visible .dropdown-select.tools-icon:before,
.nojs .dropdown-container:hover .dropdown-select.tools-icon:before { background-position: -80px -20px; }
.dropdown-visible .tools-icon span,
.nojs .dropdown-container:hover .tools-icon span { background-position: -80px -20px; }
/* Icon images
---------------------------------------- */

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

@ -668,8 +668,7 @@ dd.profile-warnings {
--------------------------------------------------------------
Colours and backgrounds for buttons.css
-------------------------------------------------------------- */
.buttons div a, .dropdown-select {
.button {
border-color: #C7C3BF;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(top, #FFFFFF, #E9E9E9);
@ -679,19 +678,10 @@ Colours and backgrounds for buttons.css
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#E9E9E9')";
box-shadow: 0 0 0 1px #FFFFFF inset;
-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
color: #BC2A4D !important;
}
.dropdown-select {
color: #5C6482 !important;
}
.dropdown-select:after {
border-color: #DADADA;
}
.buttons div a:hover, .dropdown-select:hover, .dropdown-visible .dropdown-select,
.dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
.button:hover, .dropdown-visible .dropdown-select, .nojs .dropdown-container:hover .dropdown-select {
border-color: #0a8ed0;
background-image: -moz-linear-gradient(top, #E9E9E9, #FFFFFF);
background-image: -webkit-linear-gradient(top, #E9E9E9, #FFFFFF);
@ -701,9 +691,9 @@ Colours and backgrounds for buttons.css
text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2);
}
.dropdown-select:hover {
border-color: #C7C3BF;
}
.buttons .button { color: #BC2A4D !important; }
.dropdown-select:after { border-color: #DADADA; }
.dropdown-select:hover { border-color: #C7C3BF; }
.dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
border-color: #A6B2BA;