Jdlrobson has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/382882 )
Change subject: Avoid clashes with MediaWiki:Common.css for hlist rules
......................................................................
Avoid clashes with MediaWiki:Common.css for hlist rules
Impacts footer and main menu
Bug: T173507
Change-Id: Ie519550c0657c2314ecccaca1d65ecf99d0a3f5f
---
M resources/skins.minerva.mainMenu.styles/mainmenu.less
M skinStyles/mediawiki.hlist/minerva.less
A skinStyles/mobilefrontend.js/Overlay.less
A skinStyles/mobilefrontend.js/images/error.svg
A skinStyles/mobilefrontend.js/toast.less
5 files changed, 175 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/MinervaNeue
refs/changes/82/382882/1
diff --git a/resources/skins.minerva.mainMenu.styles/mainmenu.less
b/resources/skins.minerva.mainMenu.styles/mainmenu.less
index 8b2780b..75ec233 100644
--- a/resources/skins.minerva.mainMenu.styles/mainmenu.less
+++ b/resources/skins.minerva.mainMenu.styles/mainmenu.less
@@ -110,6 +110,11 @@
margin: 0;
font-size: 0.75em; // equals `12px` at base
`font-size: 16px`
+ // T173507
+ &:after {
+ content: none;
+ }
+
a {
color: @colorProgressive;
padding: 0.7em 12px;
diff --git a/skinStyles/mediawiki.hlist/minerva.less
b/skinStyles/mediawiki.hlist/minerva.less
index 80e646a..d6a0f06 100644
--- a/skinStyles/mediawiki.hlist/minerva.less
+++ b/skinStyles/mediawiki.hlist/minerva.less
@@ -28,13 +28,14 @@
.hlist-separated {
li:after {
- content: '•';
+ // Make sure we override any site styles
+ content: '•' !important;
padding-left: 8px;
color: @linkColor;
font-size: 16px;
line-height: 1;
}
:last-child:after {
- content: '';
+ content: none !important;
}
}
diff --git a/skinStyles/mobilefrontend.js/Overlay.less
b/skinStyles/mobilefrontend.js/Overlay.less
new file mode 100644
index 0000000..5f3c641
--- /dev/null
+++ b/skinStyles/mobilefrontend.js/Overlay.less
@@ -0,0 +1,33 @@
+@import 'minerva.variables';
+@import 'minerva.mixins';
+
+.overlay {
+ padding-top: @headerHeight;
+
+ .license {
+ .secondary-text();
+ }
+
+ .header-action {
+ a,
+ button {
+ height: @headerHeight;
+ }
+ }
+
+ .slider-button {
+ top: @headerHeight;
+ }
+
+ > ul, button {
+ width: @headerHeight;
+ }
+}
+
+@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
+ .overlay-header {
+ // Make sure the close button and secondary button icon images
are aligned
+ // with the content.
+ max-width: @contentMaxWidthTablet + ( 2 * @iconGutterWidth );
+ }
+}
diff --git a/skinStyles/mobilefrontend.js/images/error.svg
b/skinStyles/mobilefrontend.js/images/error.svg
new file mode 100644
index 0000000..c9bc517
--- /dev/null
+++ b/skinStyles/mobilefrontend.js/images/error.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 24 24"><path fill="#d33" fill-rule="evenodd" d="M11.643
22.364c1.234 0 2.235-.956 2.235-2.136h-4.47c0 1.18 1 2.136 2.234
2.136zm7.25-12.284v3.998l1.77 3.603v1.1H2.623v-1.1l1.77-3.602V10.08c0-2.894
1.822-5.41 4.475-6.47.26-1.283 1.415-2.227 2.773-2.227s2.51.944 2.776
2.227c2.653 1.06 4.477 3.576 4.477 6.47zM12.92 4.974h-2.554c-2.438.553-4.255
2.64-4.255 5.14v4.474l-1.7
2.44h14.47l-1.702-2.44v-4.474c.024-4.076-3.616-5.09-4.255-5.14z"/></svg>
\ No newline at end of file
diff --git a/skinStyles/mobilefrontend.js/toast.less
b/skinStyles/mobilefrontend.js/toast.less
new file mode 100644
index 0000000..01d8985
--- /dev/null
+++ b/skinStyles/mobilefrontend.js/toast.less
@@ -0,0 +1,133 @@
+@import 'minerva.variables';
+@import 'minerva.mixins';
+
+// Toast notifications
+//
+// Styleguide 3.
+
+.drawer {
+ background-color: @colorGray15;
+ // needed for Android 4.x
+ position: absolute;
+ // needed for MSIE 9 (Windows Phone 7)
+ width: 100%;
+}
+
+// Basic toast notification
+//
+// Toast must have visible class to be shown
+//
+// Markup:
+// <div class="toast visible">
+// Notification for user.
+// </div>
+//
+// Styleguide 3.1.
+.mw-notification,
+.toast,
+.drawer {
+ .box-sizing( border-box );
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ box-shadow: 0 -1px 8px 0 rgba( 0, 0, 0, 0.35 );
+ word-wrap: break-word;
+ // needs to be higher than for overlays to show on top of overlays
+ z-index: @z-indexOverOverlay;
+ // don't use visibility: hidden in old browsers that don't support
animations
+ display: none;
+
+ &.visible, &.mw-notification-visible {
+ display: block;
+ }
+}
+
+.mw-notification,
+.toast {
+ font-size: 0.9em;
+ padding: 0.9em 1em;
+ background-color: @toastNotificationColor;
+ color: #fff;
+ margin: 0 10% 20px;
+ width: 80%;
+ text-align: center;
+ border-radius: @borderRadius;
+
+ // Toast notification error state
+ //
+ // When the toast message needs to convey that an error has occurred
add the error class
+ //
+ // Markup:
+ // <div class="toast visible error">
+ // An error occurred.
+ // </div>
+ //
+ // Styleguide 3.2.
+ &.mw-notification-type-error {
+ // FIXME: Use `mobile.startup.images` to serve this file.
+ // Styling icon with the class mw-notification-type-error
+ // allows extensions ot use mw.notify( msg, 'error' ) and have
those styled as errors.
+ // see
https://github.com/search?l=JavaScript&q=org%3Awikimedia+mw.notify&type=Code
+ .background-image( 'images/error.svg' );
+ .background-size( 24px, 24px );
+ background-position: 16px 50%;
+ background-repeat: no-repeat;
+ padding-left: 5%;
+ width: 75%;
+ border: 0; // FIXME: this is needed because a global .error
adds border
+ }
+
+ a {
+ color: @colorProgressive;
+
+ &.new {
+ color: @colorDestructive;
+ }
+ }
+}
+
+.mw-notification-area {
+ z-index: @z-indexOverOverlay;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+}
+
+.animations {
+ .mw-notification,
+ .drawer {
+ @duration: 0.25s;
+ display: block;
+ visibility: hidden;
+ /* we can't determine the actual size of the drawer in CSS, so
this is
+ * an estimate; it doesn't have to be exact because it's used
only for
+ * the sliding animation, not for hiding the drawer */
+ .transform( translate( 0, 100px ) );
+ // counter translate with bottom to avoid empty blank space at
the bottom
+ // especially on browsers that don't support position: fixed
+ bottom: 100px;
+ opacity: 0;
+
+ // Only apply the transition when an animation is needed (when
drawer/toast hidden/shown)
+ &.animated, &.mw-notification-tag-toast {
+ // delay visibility transition to make other
transitions visible
+ // http://fvsch.com/code/transition-fade/test5.html
+ // need to assign to a temporary variable to preserve
commas
+ //
https://github.com/leafo/lessphp/issues/105#issuecomment-2872598
+ @transition: @duration, opacity @duration, visibility
0s @duration, bottom 0s @duration;
+ .transition-transform( @transition );
+ }
+
+ &.visible, &.mw-notification-visible {
+ bottom: 0;
+ // need to assign to a temporary variable to preserve
commas
+ //
https://github.com/leafo/lessphp/issues/105#issuecomment-2872598
+ @transition: @duration, opacity @duration;
+ .transition-transform( @transition );
+ visibility: visible;
+ opacity: 1;
+ .transform( translate( 0, 0 ) );
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/382882
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie519550c0657c2314ecccaca1d65ecf99d0a3f5f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/MinervaNeue
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
