mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-28 14:18:52 +00:00
[ticket/10431] CSS3 buttons
CSS3 replacements for big buttons PHPBB3-10431
This commit is contained in:
Vjacheslav Trushkin
parent
e86ecc0f3b
commit
3e03f95cb7
4 changed files with 56 additions and 49 deletions
|
|
@ -14,40 +14,71 @@
|
|||
.buttons div {
|
||||
float: left;
|
||||
margin: 0 5px 0 0;
|
||||
background-position: 0 100%;
|
||||
}
|
||||
|
||||
/* Rolloff state */
|
||||
.buttons div a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: 0 0;
|
||||
display: inline-block;
|
||||
line-height: 16px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #c7c3bf;
|
||||
border-radius: 4px;
|
||||
background: #fff none 0 0 repeat-x;
|
||||
background-image: -moz-linear-gradient(top, #fff, #e9e9e9);
|
||||
background-image: -webkit-linear-gradient(top, #fff, #e9e9e9);
|
||||
background-image: -o-linear-gradient(top, #fff, #e9e9e9);
|
||||
background-image: linear-gradient(to bottom, #fff, #e9e9e9);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e9e9e9')";
|
||||
box-shadow: 0 0 0 1px #fff inset;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff inset;
|
||||
text-shadow: 1px 1px 0 #fff, -1px -1px 0 rgba(188, 42, 77, 0.25);
|
||||
padding: 3px 22px 3px 8px;
|
||||
color: #bc2a4d !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none !important;
|
||||
outline-style: none !important;
|
||||
}
|
||||
|
||||
/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
|
||||
/*.buttons div span { display: none; }*/
|
||||
/*.buttons div a:hover { background-image: none; }*/
|
||||
.buttons div span { position: absolute; width: 100%; height: 100%; cursor: pointer;}
|
||||
.buttons div a:hover span { background-position: 0 100%; }
|
||||
.buttons div span { display: none; }
|
||||
|
||||
.buttons div a:hover {
|
||||
border-color: #0a8ed0;
|
||||
background-image: -moz-linear-gradient(top, #e9e9e9, #fff);
|
||||
background-image: -webkit-linear-gradient(top, #e9e9e9, #fff);
|
||||
background-image: -o-linear-gradient(top, #e9e9e9, #fff);
|
||||
background-image: linear-gradient(to bottom, #e9e9e9, #fff);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9e9e9', EndColorStr='#ffffff')";
|
||||
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px -1px 0 rgba(188, 42, 77, 0.2);
|
||||
}
|
||||
|
||||
.buttons div a:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -6px;
|
||||
background: url("images/buttons.png") 0px 0 no-repeat;
|
||||
}
|
||||
|
||||
.buttons div a:hover:after {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
/* Big button images */
|
||||
.reply-icon span { background: transparent none 0 0 no-repeat; }
|
||||
.post-icon span { background: transparent none 0 0 no-repeat; }
|
||||
.locked-icon span { background: transparent none 0 0 no-repeat; }
|
||||
.pmreply-icon span { background: none 0 0 no-repeat; }
|
||||
.newpm-icon span { background: none 0 0 no-repeat; }
|
||||
.forwardpm-icon span { background: none 0 0 no-repeat; }
|
||||
.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; }
|
||||
|
||||
/* Set big button dimensions */
|
||||
.buttons div.reply-icon { width: 96px; height: 25px; }
|
||||
.buttons div.post-icon { width: 96px; height: 25px; }
|
||||
.buttons div.locked-icon { width: 88px; height: 25px; }
|
||||
.buttons div.pmreply-icon { width: 96px; height: 25px; }
|
||||
.buttons div.newpm-icon { width: 84px; height: 25px; }
|
||||
.buttons div.forwardpm-icon { width: 96px; height: 25px; }
|
||||
.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; }
|
||||
|
||||
.buttons div.locked-icon a:after { background-position: -60px 0; }
|
||||
.buttons div.locked-icon a:hover:after { 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; }
|
||||
|
||||
/* Sub-header (navigation bar)
|
||||
--------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -649,14 +649,6 @@ fieldset.polls dd div {
|
|||
Colours and backgrounds for buttons.css
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
/* Big button images */
|
||||
.reply-icon span { background-image: url("./en/button_topic_reply.gif"); }
|
||||
.post-icon span { background-image: url("./en/button_topic_new.gif"); }
|
||||
.locked-icon span { background-image: url("./en/button_topic_locked.gif"); }
|
||||
.pmreply-icon span { background-image: url("./en/button_pm_reply.gif") ;}
|
||||
.newpm-icon span { background-image: url("./en/button_pm_new.gif") ;}
|
||||
.forwardpm-icon span { background-image: url("./en/button_pm_forward.gif") ;}
|
||||
|
||||
a.print {
|
||||
background-image: url("./images/icon_print.gif");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
/* Set big button dimensions */
|
||||
.buttons div.reply-icon { width: 96px; height: 25px; }
|
||||
.buttons div.post-icon { width: 96px; height: 25px; }
|
||||
.buttons div.locked-icon { width: 88px; height: 25px; }
|
||||
.buttons div.pmreply-icon { width: 96px; height: 25px; }
|
||||
.buttons div.newpm-icon { width: 84px; height: 25px; }
|
||||
.buttons div.forwardpm-icon { width: 96px; height: 25px; }
|
||||
|
||||
/* Set profile icon dimensions */
|
||||
ul.profile-icons li.pm-icon { width: 28px; height: 20px; }
|
||||
ul.profile-icons li.quote-icon { width: 54px; height: 20px; }
|
||||
|
|
@ -14,14 +6,6 @@ ul.profile-icons li.edit-icon { width: 42px; height: 20px; }
|
|||
/* Online image */
|
||||
.online { background-image: url("./icon_user_online.gif"); }
|
||||
|
||||
/* Big button images */
|
||||
.reply-icon span { background-image: url("./button_topic_reply.gif"); }
|
||||
.post-icon span { background-image: url("./button_topic_new.gif"); }
|
||||
.locked-icon span { background-image: url("./button_topic_locked.gif"); }
|
||||
.pmreply-icon span { background-image: url("./button_pm_reply.gif") ;}
|
||||
.newpm-icon span { background-image: url("./button_pm_new.gif") ;}
|
||||
.forwardpm-icon span { background-image: url("./button_pm_forward.gif") ;}
|
||||
|
||||
/* Icon images */
|
||||
.pm-icon, .pm-icon a { background-image: url("./icon_contact_pm.gif"); }
|
||||
.quote-icon, .quote-icon a { background-image: url("./icon_post_quote.gif"); }
|
||||
|
|
|
|||
BIN
phpBB/styles/prosilver/theme/images/buttons.png
Normal file
BIN
phpBB/styles/prosilver/theme/images/buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
Add table
Reference in a new issue