Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/68736
Change subject: Bug 49279: Style upload button correctly in Opera and Firefox
......................................................................
Bug 49279: Style upload button correctly in Opera and Firefox
The file input is a pain to style. So apply the styling to the list
item itself. Make the file input invisible using opacity so it is
still clickable. Set a width and height for the purpose of Firefox so
that entire button is clickable.
Bug: 49279
Change-Id: I0ebcb9a569e7dccaea41e3462885e1f607b1c3ae
---
M less/common/pageactions.less
M stylesheets/common/pageactions.css
2 files changed, 35 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/36/68736/1
diff --git a/less/common/pageactions.less b/less/common/pageactions.less
index b5a546f..0fb27aa 100644
--- a/less/common/pageactions.less
+++ b/less/common/pageactions.less
@@ -27,19 +27,30 @@
height: 40px;
width: 40px;
+ // file inputs are notoriously difficult to style
+ input {
+ height: 40px;
+ width: 40px;
+ opacity: 0;
+ }
+
+ &#ca-upload,
button,
- input,
a {
- width: 40px; // undo rules set in watchlist / nearby
lists
+ text-indent: -9999px;
background-position: center center;
+ background-repeat: no-repeat;
.background-size( auto, @watchStarSize );
+ }
+
+ input,
+ button,
+ a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- text-indent: -9999px;
- background-repeat: no-repeat;
}
}
@@ -62,11 +73,11 @@
}
}
+#ca-upload {
+ background-image: url(images/pagemenu/upload.png);
+}
+
#ca-edit.enabled,
#ca-upload.enabled {
display: inline-block;
- input {
- border: none;
- background-image: url(images/pagemenu/upload.png);
- }
}
diff --git a/stylesheets/common/pageactions.css
b/stylesheets/common/pageactions.css
index 7d80397..a61b210 100644
--- a/stylesheets/common/pageactions.css
+++ b/stylesheets/common/pageactions.css
@@ -20,24 +20,32 @@
height: 40px;
width: 40px;
}
-#page-actions li button,
-#page-actions li input,
-#page-actions li a {
+#page-actions li input {
+ height: 40px;
width: 40px;
+ opacity: 0;
+}
+#page-actions li#ca-upload,
+#page-actions li button,
+#page-actions li a {
+ text-indent: -9999px;
background-position: center center;
+ background-repeat: no-repeat;
/* use -webkit prefix for older android browsers eg. nexus 1 */
-moz-background-size: auto 22px;
-o-background-size: auto 22px;
-webkit-background-size: auto 22px;
background-size: auto 22px;
+}
+#page-actions li input,
+#page-actions li button,
+#page-actions li a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- text-indent: -9999px;
- background-repeat: no-repeat;
}
#page-actions .edit-page {
margin-top: 0;
@@ -52,12 +60,10 @@
#ca-talk a {
background-image: url(images/pagemenu/talk.png);
}
+#ca-upload {
+ background-image: url(images/pagemenu/upload.png);
+}
#ca-edit.enabled,
#ca-upload.enabled {
display: inline-block;
-}
-#ca-edit.enabled input,
-#ca-upload.enabled input {
- border: none;
- background-image: url(images/pagemenu/upload.png);
}
--
To view, visit https://gerrit.wikimedia.org/r/68736
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0ebcb9a569e7dccaea41e3462885e1f607b1c3ae
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
