aboutsummaryrefslogtreecommitdiffstats
path: root/phpBB/styles/prosilver/theme
diff options
context:
space:
mode:
authorCesar G <prototech91@gmail.com>2014-05-15 13:22:43 -0700
committerCesar G <prototech91@gmail.com>2014-05-27 07:17:46 -0700
commit00ff33c9b42479bee386cd45e863cb0bfe25a882 (patch)
tree7327baee6bac3a30d8a739b61909ac8f219ae3a2 /phpBB/styles/prosilver/theme
parent03d3762d52a5c63168311fb103e517a7ed36c83c (diff)
downloadforums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.gz
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.bz2
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.tar.xz
forums-00ff33c9b42479bee386cd45e863cb0bfe25a882.zip
[ticket/12155] Move existing button style to a more generic class.
PHPBB3-12155
Diffstat (limited to 'phpBB/styles/prosilver/theme')
-rw-r--r--phpBB/styles/prosilver/theme/buttons.css94
-rw-r--r--phpBB/styles/prosilver/theme/colours.css20
2 files changed, 45 insertions, 69 deletions
diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css
index 3df604394c..35a209233e 100644
--- a/phpBB/styles/prosilver/theme/buttons.css
+++ b/phpBB/styles/prosilver/theme/buttons.css
@@ -4,20 +4,8 @@
/* Rollover buttons
Based on: http://wellstyled.com/css-nopreload-rollovers.html
----------------------------------------*/
-.buttons {
- float: left;
- width: auto;
- height: auto;
-}
-
-/* Rollover state */
-.buttons div, .dropdown-select {
- float: left;
- margin: 0 5px 0 0;
-}
-
-/* Rolloff state */
-.buttons div a, .dropdown-select {
+.button {
+ cursor: pointer;
display: inline-block;
line-height: 17.5px;
height: 18px;
@@ -26,9 +14,8 @@
border: 1px solid transparent;
border-radius: 4px;
background: transparent none 0 0 repeat-x;
- padding: 2px 22px 2px 8px;
+ padding: 2px 8px;
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
- font-weight: 600;
position: relative;
text-decoration: none !important;
outline-style: none !important;
@@ -36,70 +23,69 @@
*padding-right: 8px;
}
-.buttons div span { display: none; }
-
-.buttons div a:after, .dropdown-select:after {
- content: '';
- display: block;
- position: absolute;
- top: 50%;
- right: 6px;
- width: 12px;
- height: 12px;
- margin-top: -6px;
- background: transparent 0 0 no-repeat;
+.icon-button, .dropdown-select {
+ padding-right: 22px;
}
-.buttons div a:hover:after {
- background-position: 0 -20px;
+.icon-button.dropdown-select {
+ padding-right: 44px;
}
-.dropdown-select {
- cursor: pointer;
- font-family: inherit;
- font-size: 1em;
- font-weight: normal;
+.icon-button span {
+ background: transparent 0 0 no-repeat;
+ display: block;
+ float: right;
+ height: 12px;
+ margin: 3px -16px 0 0;
+ width: 12px;
}
.dropdown-select:after {
background-position: -103px 10px;
border-left: 1px solid;
- margin-top: 0;
+ content: '';
+ position: absolute;
top: 0;
right: 0;
- height: 21px;
- width: 15px;
+ height: 22px;
+ width: 16px;
}
.dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after {
background-position: -103px -10px;
}
-.dropdown-select-icon:before {
- content: '';
- display: block;
+.buttons, .buttons div {
float: left;
- margin-right: 4px;
- margin-top: 2px;
+}
+
+.buttons .button, .dropdown-select {
+ margin-right: 5px;
}
/* Big button images */
-.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; }
+.reply-icon a span, .pmreply-icon a span { background-position: -20px 0; }
+.reply-icon a:hover span, .pmreply-icon a:hover span { 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; }
+.post-icon a span, .newpm-icon a span, .reply-all a span { background-position: 0 0; }
+.post-icon a:hover span, .newpm-icon a:hover span,
+.reply-all a:hover span { 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; }
+.locked-icon a span { background-position: -60px 0; }
+.locked-icon a:hover span { 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; }
+.forwardpm-icon a span { background-position: -40px 0; }
+.forwardpm-icon a:hover span { background-position: -40px -20px; }
-.dropdown-select.tools-icon:before { background-position: -80px 0; height: 16px; width: 16px; }
+.tools-icon span {
+ background-position: -80px 0;
+ height: 16px;
+ margin-top: 2px;
+ width: 16px;
+}
-.dropdown-visible .dropdown-select.tools-icon:before,
-.nojs .dropdown-container:hover .dropdown-select.tools-icon:before { background-position: -80px -20px; }
+.dropdown-visible .tools-icon span,
+.nojs .dropdown-container:hover .tools-icon span { background-position: -80px -20px; }
/* Icon images
---------------------------------------- */
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index a7d7184642..91dea07b40 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -668,8 +668,7 @@ dd.profile-warnings {
--------------------------------------------------------------
Colours and backgrounds for buttons.css
-------------------------------------------------------------- */
-
-.buttons div a, .dropdown-select {
+.button {
border-color: #C7C3BF;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(top, #FFFFFF, #E9E9E9);
@@ -679,19 +678,10 @@ Colours and backgrounds for buttons.css
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#E9E9E9')";
box-shadow: 0 0 0 1px #FFFFFF inset;
-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
- color: #BC2A4D !important;
-}
-
-.dropdown-select {
color: #5C6482 !important;
}
-.dropdown-select:after {
- border-color: #DADADA;
-}
-
-.buttons div a:hover, .dropdown-select:hover, .dropdown-visible .dropdown-select,
-.dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
+.button:hover, .dropdown-visible .dropdown-select, .nojs .dropdown-container:hover .dropdown-select {
border-color: #0a8ed0;
background-image: -moz-linear-gradient(top, #E9E9E9, #FFFFFF);
background-image: -webkit-linear-gradient(top, #E9E9E9, #FFFFFF);
@@ -701,9 +691,9 @@ 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);
}
-.dropdown-select:hover {
- border-color: #C7C3BF;
-}
+.buttons .button { color: #BC2A4D !important; }
+.dropdown-select:after { border-color: #DADADA; }
+.dropdown-select:hover { border-color: #C7C3BF; }
.dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
border-color: #A6B2BA;