aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVjacheslav Trushkin <cyberalien@gmail.com>2012-11-11 19:07:00 +0100
committerVjacheslav Trushkin <cyberalien@gmail.com>2012-11-11 19:07:00 +0100
commit3e03f95cb73ad090e22514be856c9b0613e0448a (patch)
treedddb13fb8fd4953a31e75122a94fc1767195a5c7
parente86ecc0f3bd6383d31a670896720a970b8faaaa9 (diff)
downloadforums-3e03f95cb73ad090e22514be856c9b0613e0448a.tar
forums-3e03f95cb73ad090e22514be856c9b0613e0448a.tar.gz
forums-3e03f95cb73ad090e22514be856c9b0613e0448a.tar.bz2
forums-3e03f95cb73ad090e22514be856c9b0613e0448a.tar.xz
forums-3e03f95cb73ad090e22514be856c9b0613e0448a.zip
[ticket/10431] CSS3 buttons
CSS3 replacements for big buttons PHPBB3-10431
Diffstat
-rw-r--r--phpBB/styles/prosilver/theme/buttons.css83
-rw-r--r--phpBB/styles/prosilver/theme/colours.css8
-rw-r--r--phpBB/styles/prosilver/theme/en/stylesheet.css16
-rw-r--r--phpBB/styles/prosilver/theme/images/buttons.pngbin0 -> 2563 bytes
4 files changed, 57 insertions, 50 deletions
diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css
index e817380f8e..9a69956368 100644
--- a/phpBB/styles/prosilver/theme/buttons.css
+++ b/phpBB/styles/prosilver/theme/buttons.css
@@ -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;
- position: relative;
- overflow: hidden;
+ 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;
+ 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; }
-
-/* 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.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; }
+
+.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)
--------------------------------------------- */
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index d7ce9a7622..0a8e011171 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -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");
}
diff --git a/phpBB/styles/prosilver/theme/en/stylesheet.css b/phpBB/styles/prosilver/theme/en/stylesheet.css
index d17f9a5be4..1a3d0acb4b 100644
--- a/phpBB/styles/prosilver/theme/en/stylesheet.css
+++ b/phpBB/styles/prosilver/theme/en/stylesheet.css
@@ -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"); }
diff --git a/phpBB/styles/prosilver/theme/images/buttons.png b/phpBB/styles/prosilver/theme/images/buttons.png
new file mode 100644
index 0000000000..a19abdc2b8
--- /dev/null
+++ b/phpBB/styles/prosilver/theme/images/buttons.png
Binary files differ
generated by cgit v1.2.1 (git 2.21.0) at 2026-01-03 23:06:36 +0000