mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-27 21:58:52 +00:00
[ticket/12769] Completely refactor btns and paging
This commit is contained in:
Michael Miday
parent
77cf756378
commit
201a961367
6 changed files with 117 additions and 103 deletions
|
|
@ -38,7 +38,6 @@
|
|||
<div class="action-bar top">
|
||||
|
||||
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
|
||||
<div class="buttons">
|
||||
<!-- EVENT viewforum_buttons_top_before -->
|
||||
|
||||
<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
|
||||
|
|
@ -49,12 +48,12 @@
|
|||
<!-- ENDIF -->
|
||||
</a>
|
||||
<!-- EVENT viewforum_buttons_top_after -->
|
||||
</div>
|
||||
<!-- ENDIF -->
|
||||
|
||||
<!-- IF S_DISPLAY_SEARCHBOX -->
|
||||
<div class="search-box" role="search">
|
||||
<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
|
||||
</div>
|
||||
<fieldset>
|
||||
<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
|
||||
<button class="button" type="submit" title="{L_SEARCH}">
|
||||
|
|
@ -263,8 +262,7 @@
|
|||
<!-- IF .topicrow and not S_DISPLAY_ACTIVE -->
|
||||
<div class="action-bar bottom">
|
||||
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
|
||||
<div class="buttons">
|
||||
<!-- EVENT viewforum_buttons_bottom_before -->
|
||||
<!-- EVENT viewforum_buttons_bottom_before -->
|
||||
|
||||
<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
|
||||
<!-- IF S_IS_LOCKED -->
|
||||
|
|
@ -274,8 +272,7 @@
|
|||
<!-- ENDIF -->
|
||||
</a>
|
||||
|
||||
<!-- EVENT viewforum_buttons_bottom_after -->
|
||||
</div>
|
||||
<!-- EVENT viewforum_buttons_bottom_after -->
|
||||
<!-- ENDIF -->
|
||||
|
||||
<div class="pagination">
|
||||
|
|
|
|||
|
|
@ -27,9 +27,8 @@
|
|||
<!-- ENDIF -->
|
||||
|
||||
<div class="action-bar top">
|
||||
|
||||
<div class="buttons">
|
||||
<!-- EVENT viewtopic_buttons_top_before -->
|
||||
<div class="action-bar bar-top">
|
||||
<!-- EVENT viewtopic_buttons_top_before -->
|
||||
|
||||
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
|
||||
<a href="{U_POST_REPLY_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
|
||||
|
|
@ -41,9 +40,7 @@
|
|||
</a>
|
||||
<!-- ENDIF -->
|
||||
|
||||
<!-- EVENT viewtopic_buttons_top_after -->
|
||||
</div>
|
||||
|
||||
<!-- EVENT viewtopic_buttons_top_after -->
|
||||
<!-- INCLUDE viewtopic_topic_tools.html -->
|
||||
<!-- EVENT viewtopic_dropdown_top_custom -->
|
||||
|
||||
|
|
@ -392,8 +389,7 @@
|
|||
|
||||
<!-- EVENT viewtopic_body_topic_actions_before -->
|
||||
<div class="action-bar bottom">
|
||||
<div class="buttons">
|
||||
<!-- EVENT viewtopic_buttons_bottom_before -->
|
||||
<!-- EVENT viewtopic_buttons_bottom_before -->
|
||||
|
||||
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
|
||||
<a href="{U_POST_REPLY_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->">
|
||||
|
|
@ -404,9 +400,7 @@
|
|||
<!-- ENDIF -->
|
||||
</a>
|
||||
<!-- ENDIF -->
|
||||
|
||||
<!-- EVENT viewtopic_buttons_bottom_after -->
|
||||
</div>
|
||||
<!-- EVENT viewtopic_buttons_bottom_after -->
|
||||
|
||||
<!-- INCLUDE viewtopic_topic_tools.html -->
|
||||
|
||||
|
|
|
|||
|
|
@ -2,29 +2,24 @@
|
|||
---------------------------------------- */
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
padding: 2px 8px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent none 0 0 repeat-x;
|
||||
padding: 2px 8px;
|
||||
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
|
||||
position: relative;
|
||||
text-decoration: none !important;
|
||||
outline-style: none !important;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
.icon-button:before {
|
||||
background: transparent 0 0 no-repeat;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
float: right;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
|
|
@ -97,24 +92,17 @@
|
|||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.post-buttons .icon-button {
|
||||
padding: 5px;
|
||||
.post-buttons .button, .format-buttons .button {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.hastouch .post-buttons .icon-button {
|
||||
padding: 2px 8px;
|
||||
.hastouch .post-buttons {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.post-buttons .icon-button span {
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.post-buttons .icon-button:before {
|
||||
margin-left: 0;
|
||||
.post-buttons .button span {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* Responsive buttons in post body */
|
||||
|
|
|
|||
|
|
@ -172,39 +172,24 @@ dl.details dd {
|
|||
color: #1198D9;
|
||||
}
|
||||
|
||||
/* Pagination
|
||||
---------------------------------------- */
|
||||
|
||||
.pagination li a {
|
||||
background-color: #ECEDEE;
|
||||
border-color: #B4BAC0;
|
||||
color: #5C758C;
|
||||
}
|
||||
|
||||
.pagination li.ellipsis span {
|
||||
background-color: transparent;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.pagination li.active span {
|
||||
background-color: #4692BF;
|
||||
border-color: #4692BF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.pagination li a:hover, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
|
||||
background-color: #368AD2;
|
||||
border-color: #368AD2;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.pagination li.next a, .pagination li.previous a, .pagination li.page-jump a {
|
||||
background-image: url("./images/icons_pagination.png");
|
||||
}
|
||||
|
||||
/* Pagination in viewforum for multipage topics */
|
||||
.row .pagination {
|
||||
background-image: url("./images/icon_pages.gif");
|
||||
}
|
||||
|
||||
.jumpbox .dropdown li {
|
||||
|
|
@ -662,9 +647,30 @@ 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);
|
||||
}
|
||||
|
||||
.button i {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
.button:focus i,
|
||||
.button:hover i {
|
||||
color: #1878cb;
|
||||
}
|
||||
|
||||
.caret { border-color: #DADADA; }
|
||||
.caret { border-color: #C7C3BF; }
|
||||
|
||||
.jumpbox .button, .jumpbox .button i {
|
||||
color: #536482;
|
||||
}
|
||||
|
||||
.jumpbox .button:hover {
|
||||
border-color: #C7C3BF;
|
||||
}
|
||||
|
||||
.jumpbox .button:hover i {
|
||||
color: #536482;
|
||||
}
|
||||
|
||||
.dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
|
||||
border-color: #A6B2BA;
|
||||
color: #105289;
|
||||
|
|
@ -673,6 +679,52 @@ Colours and backgrounds for buttons.css
|
|||
.contact-icons a { border-color: #DCDCDC; }
|
||||
.contact-icons a:hover { background-color: #F2F6F9; }
|
||||
|
||||
/* Pagination
|
||||
---------------------------------------- */
|
||||
|
||||
.pagination li a {
|
||||
background: #ECEDEE;
|
||||
filter: none;
|
||||
border-color: #B4BAC0;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
color: #5C758C;
|
||||
}
|
||||
|
||||
.pagination li.ellipsis span {
|
||||
background: transparent;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.pagination li.active span {
|
||||
background: #4692BF;
|
||||
border-color: #4692BF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
|
||||
background: #368AD2;
|
||||
border-color: #368AD2;
|
||||
filter: none;
|
||||
color: #FFFFFF;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Search box
|
||||
--------------------------------------------- */
|
||||
|
||||
.search-box .inputbox,
|
||||
.search-box .inputbox:hover,
|
||||
.search-box .inputbox:focus,
|
||||
.search-box .button:focus,
|
||||
.search-box .button:hover {
|
||||
border-color: #C7C3BF;
|
||||
}
|
||||
|
||||
.search-header {
|
||||
box-shadow: 0 0 10px #0075B0;
|
||||
}
|
||||
|
||||
/* Icon images
|
||||
---------------------------------------- */
|
||||
.icon-acp { background-image: url("./images/icon_acp.gif"); }
|
||||
|
|
@ -1154,14 +1206,6 @@ input.disabled {
|
|||
border-color: #F1F8FF transparent;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link:before {
|
||||
border-color: #105289;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu.visible a.responsive-menu-link:before {
|
||||
border-color: #D31141;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-contents {
|
||||
background: #fff;
|
||||
border-color: #B9B9B9;
|
||||
|
|
|
|||
|
|
@ -806,16 +806,20 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
}
|
||||
|
||||
.pagination li a, .pagination li span {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.pagination li.active span {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
min-width: 10px;
|
||||
padding: 3px;
|
||||
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.pagination li.ellipsis span {
|
||||
|
|
@ -827,37 +831,24 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.pagination li.page-jump a, .pagination li.next a, .pagination li.previous a {
|
||||
background-repeat: no-repeat;
|
||||
font-size: 0;
|
||||
height: 14px;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
.pagination li.page-jump a {
|
||||
background-position: 0 2px;
|
||||
width: 24px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.pagination li.next a {
|
||||
background-position: -50px 2px;
|
||||
.pagination li.page-jump a i {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.pagination li.previous a {
|
||||
background-position: -30px 2px;
|
||||
.pagination li.arrow a i {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.pagination li.page-jump a:hover, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger { background-position: 0 -18px; }
|
||||
.pagination li.next a:hover { background-position: -48px -16px; }
|
||||
.pagination li.previous a:hover { background-position: -29px -16px; }
|
||||
|
||||
/* Pagination in viewforum for multipage topics */
|
||||
.row .pagination {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
padding: 1px 0 1px 15px;
|
||||
font-size: 10px;
|
||||
background: none 0 50% no-repeat;
|
||||
}
|
||||
|
||||
.row .pagination > ul {
|
||||
|
|
@ -865,8 +856,9 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
}
|
||||
|
||||
.row .pagination li a, .row .pagination li span {
|
||||
border-radius: 1px;
|
||||
padding: 1px;
|
||||
border-radius: 2px;
|
||||
padding: 1px 3px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
/* jQuery popups
|
||||
|
|
|
|||
|
|
@ -316,6 +316,7 @@ a.button1, input.button1, input.button3, a.button2, input.button2 {
|
|||
padding-bottom: 1px;
|
||||
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
|
||||
background: transparent none repeat-x top left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a.button1, input.button1 {
|
||||
|
|
@ -342,12 +343,10 @@ a.button2, input.button2, input.button3 {
|
|||
}
|
||||
|
||||
/* <a> button in the style of the form buttons */
|
||||
a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
|
||||
a.button1, a.button2 {
|
||||
text-decoration: none;
|
||||
padding: 2px 8px;
|
||||
line-height: 250%;
|
||||
vertical-align: text-bottom;
|
||||
background-position: 0 1px;
|
||||
}
|
||||
|
||||
/* Hover states */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue