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 {
|
.buttons div {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 0 5px 0 0;
|
margin: 0 5px 0 0;
|
||||||
background-position: 0 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Rolloff state */
|
/* Rolloff state */
|
||||||
.buttons div a {
|
.buttons div a {
|
||||||
display: block;
|
display: inline-block;
|
||||||
width: 100%;
|
line-height: 16px;
|
||||||
height: 100%;
|
font-size: 13px;
|
||||||
background-position: 0 0;
|
white-space: nowrap;
|
||||||
position: relative;
|
border: 1px solid #c7c3bf;
|
||||||
overflow: hidden;
|
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;
|
||||||
|
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 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 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 */
|
/* Big button images */
|
||||||
.reply-icon span { background: transparent none 0 0 no-repeat; }
|
.buttons div.reply-icon a:after, .buttons div.pmreply-icon a:after { background-position: -20px 0; }
|
||||||
.post-icon span { background: transparent none 0 0 no-repeat; }
|
.buttons div.reply-icon a:hover:after, .buttons div.pmreply-icon a:hover:after { background-position: -20px -20px; }
|
||||||
.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; }
|
|
||||||
|
|
||||||
/* Set big button dimensions */
|
.buttons div.post-icon a:after, .buttons div.newpm-icon a:after { background-position: 0 0; }
|
||||||
.buttons div.reply-icon { width: 96px; height: 25px; }
|
.buttons div.post-icon a:hover:after, .buttons div.newpm-icon a:hover:after { background-position: 0 -20px; }
|
||||||
.buttons div.post-icon { width: 96px; height: 25px; }
|
|
||||||
.buttons div.locked-icon { width: 88px; height: 25px; }
|
.buttons div.locked-icon a:after { background-position: -60px 0; }
|
||||||
.buttons div.pmreply-icon { width: 96px; height: 25px; }
|
.buttons div.locked-icon a:hover:after { background-position: -60px -20px; }
|
||||||
.buttons div.newpm-icon { width: 84px; height: 25px; }
|
|
||||||
.buttons div.forwardpm-icon { width: 96px; height: 25px; }
|
.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)
|
/* Sub-header (navigation bar)
|
||||||
--------------------------------------------- */
|
--------------------------------------------- */
|
||||||
|
|
|
||||||
|
|
@ -649,14 +649,6 @@ fieldset.polls dd div {
|
||||||
Colours and backgrounds for buttons.css
|
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 {
|
a.print {
|
||||||
background-image: url("./images/icon_print.gif");
|
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 */
|
/* Set profile icon dimensions */
|
||||||
ul.profile-icons li.pm-icon { width: 28px; height: 20px; }
|
ul.profile-icons li.pm-icon { width: 28px; height: 20px; }
|
||||||
ul.profile-icons li.quote-icon { width: 54px; 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 image */
|
||||||
.online { background-image: url("./icon_user_online.gif"); }
|
.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 */
|
/* Icon images */
|
||||||
.pm-icon, .pm-icon a { background-image: url("./icon_contact_pm.gif"); }
|
.pm-icon, .pm-icon a { background-image: url("./icon_contact_pm.gif"); }
|
||||||
.quote-icon, .quote-icon a { background-image: url("./icon_post_quote.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