From 3e03f95cb73ad090e22514be856c9b0613e0448a Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Sun, 11 Nov 2012 19:07:00 +0100 Subject: [PATCH 1/7] [ticket/10431] CSS3 buttons CSS3 replacements for big buttons PHPBB3-10431 --- phpBB/styles/prosilver/theme/buttons.css | 81 ++++++++++++------ phpBB/styles/prosilver/theme/colours.css | 8 -- .../styles/prosilver/theme/en/stylesheet.css | 16 ---- .../styles/prosilver/theme/images/buttons.png | Bin 0 -> 2563 bytes 4 files changed, 56 insertions(+), 49 deletions(-) create mode 100644 phpBB/styles/prosilver/theme/images/buttons.png 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 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) --------------------------------------------- */ 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 0000000000000000000000000000000000000000..a19abdc2b8aeb3b344a1718d78314104082fa2ba GIT binary patch literal 2563 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 literal 0 HcmV?d00001 From 8b1920adb59d2cc6e8bed558c56fb33ab5c4b0f7 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Mon, 12 Nov 2012 10:25:12 +0100 Subject: [PATCH 2/7] [ticket/10431] Different font for iOS Different font for buttons on iOS devices because Verdana looks incorrectly aligned in Safari/iOS. Also slightly changed text shadow. PHPBB3-10431 --- phpBB/styles/prosilver/theme/buttons.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 9a69956368..2ba17a7717 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -32,8 +32,9 @@ -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); + text-shadow: 1px 1px 0 #fff, -1px -1px 1px rgba(188, 42, 77, 0.25); padding: 3px 22px 3px 8px; + font-family: "Futura-Medium", Verdana; color: #bc2a4d !important; position: relative; text-decoration: none !important; From 25124b361e8e23f338efb0f649abf46a37c66e3d Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Mon, 12 Nov 2012 10:42:11 +0100 Subject: [PATCH 3/7] [ticket/10431] Adjustments for IE7 Adjustments to buttons for IE7 PHPBB3-10431 --- phpBB/styles/prosilver/theme/buttons.css | 1 + 1 file changed, 1 insertion(+) diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 2ba17a7717..544f4d3def 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -39,6 +39,7 @@ position: relative; text-decoration: none !important; outline-style: none !important; + *padding-right: 8px; } .buttons div span { display: none; } From 8e700f7e2bfecc514f8ed4ae8db43dd37703ca1e Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Mon, 12 Nov 2012 11:03:30 +0100 Subject: [PATCH 4/7] [ticket/10431] Changed fonts for Linux Added backup fonts for Linux systems that do not have Verdana font PHPBB3-10431 --- phpBB/styles/prosilver/theme/buttons.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 544f4d3def..02f973d0ff 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -34,7 +34,7 @@ -webkit-box-shadow: 0 0 0 1px #fff inset; text-shadow: 1px 1px 0 #fff, -1px -1px 1px rgba(188, 42, 77, 0.25); padding: 3px 22px 3px 8px; - font-family: "Futura-Medium", Verdana; + font-family: "Futura-Medium", Verdana, Arial, Helvetica; color: #bc2a4d !important; position: relative; text-decoration: none !important; From 63b037b4bd1d1d3650235081b8d834a27719d2e1 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Tue, 15 Jan 2013 23:12:44 +0200 Subject: [PATCH 5/7] [ticket/10431] Adjustments for large buttons Changing CSS for large buttons to display better on Mac browsers. Fixing tabs. PHPBB3-10431 --- phpBB/styles/prosilver/theme/buttons.css | 67 ++++++++++++------------ 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index 02f973d0ff..543d9d8183 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/phpBB/styles/prosilver/theme/buttons.css @@ -18,56 +18,57 @@ /* Rolloff state */ .buttons div a { - display: inline-block; - line-height: 16px; - font-size: 13px; + display: inline-block; + line-height: 17.5px; + height: 18px; + font-size: 13px; white-space: nowrap; - border: 1px solid #c7c3bf; - border-radius: 4px; + 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); + 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 1px rgba(188, 42, 77, 0.25); - padding: 3px 22px 3px 8px; - font-family: "Futura-Medium", Verdana, Arial, Helvetica; - color: #bc2a4d !important; - position: relative; - text-decoration: none !important; - outline-style: none !important; + box-shadow: 0 0 0 1px #fff inset; + -webkit-box-shadow: 0 0 0 1px #fff inset; + padding: 2px 22px 2px 8px; + font-family: Verdana, Arial, Helvetica; + color: #bc2a4d !important; + position: relative; + text-decoration: none !important; + outline-style: none !important; + vertical-align: bottom; *padding-right: 8px; } .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); + 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); + 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; + 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; + background: url("images/buttons.png") 0px 0 no-repeat; } .buttons div a:hover:after { - background-position: 0 -20px; + background-position: 0 -20px; } /* Big button images */ .buttons div.reply-icon a:after, .buttons div.pmreply-icon a:after { background-position: -20px 0; } From 74b09c01ffce189c73053f2d3749740254287aa7 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Wed, 16 Jan 2013 00:03:17 +0200 Subject: [PATCH 6/7] [ticket/10431] Remove reply-all custom css Remove CSS for reply-all button that is no longer used PHPBB3-10431 --- phpBB/styles/prosilver/theme/cp.css | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/phpBB/styles/prosilver/theme/cp.css b/phpBB/styles/prosilver/theme/cp.css index da3ec1736e..e32ff8fcb8 100644 --- a/phpBB/styles/prosilver/theme/cp.css +++ b/phpBB/styles/prosilver/theme/cp.css @@ -287,20 +287,6 @@ dl.mini dd { line-height: 2.5em; } -/* PM panel adjustments */ -.reply-all a.left { - background-position: 3px 60%; -} - -.reply-all a.left:hover { - background-position: 0px 60%; -} - -.reply-all { - font-size: 11px; - padding-top: 5px; -} - /* Defined rules list for PM options */ ol.def-rules { padding-left: 0; From 107a9016f1d4677f059cd0e10ccfdd8bd79cfce2 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Wed, 16 Jan 2013 00:09:10 +0200 Subject: [PATCH 7/7] [ticket/10431] Remove .left class from reply-all Remove .left class from .reply-all button PHPBB3-10431 --- phpBB/styles/prosilver/template/ucp_pm_message_header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpBB/styles/prosilver/template/ucp_pm_message_header.html b/phpBB/styles/prosilver/template/ucp_pm_message_header.html index 29e6a5a46b..f03b7c2c86 100644 --- a/phpBB/styles/prosilver/template/ucp_pm_message_header.html +++ b/phpBB/styles/prosilver/template/ucp_pm_message_header.html @@ -11,7 +11,7 @@
{L_POST_REPLY_PM}
{L_UCP_PM_COMPOSE}
{L_FORWARD_PM}
-
{L_REPLY_TO_ALL}
+
{L_REPLY_TO_ALL}