diff --git a/skin.json b/skin.json index 8d7d7e7..e7de7be 100644 --- a/skin.json +++ b/skin.json @@ -129,6 +129,12 @@ ], "mobile.special.mobilemenu.styles": [ "skinStyles/mobile.special.mobilemenu.styles/minerva.less" + ], + "mobile.editor.ve": [ + "skinStyles/mobile.editor.ve/minerva.less" + ], + "mobile.notifications.overlay": [ + "skinStyles/mobile.notifications.overlay/minerva.less" ] } }, diff --git a/skinStyles/README.txt b/skinStyles/README.txt new file mode 100644 index 0000000..957d5b9 --- /dev/null +++ b/skinStyles/README.txt @@ -0,0 +1,2 @@ +If a module introduced by MobileFrontend has Minerva specific styles they are added here and applied +as part of ResourceModuleSkinStyles. diff --git a/skinStyles/mobile.editor.ve/minerva.less b/skinStyles/mobile.editor.ve/minerva.less new file mode 100644 index 0000000..c802765 --- /dev/null +++ b/skinStyles/mobile.editor.ve/minerva.less @@ -0,0 +1,105 @@ +@import 'mediawiki.mixins.less'; +@import 'minerva.variables'; + +.editor-overlay-ve { + .content { + // VisualEditor doesn't have collapsible-heading class, so we need to apply + // heading styles to the header tags directly. + h1, h2 { + margin-bottom: 0.5em; + border-bottom: solid 1px @colorGray14; + overflow: hidden; + } + + // Styling for images (as output by Parsiod) + // These styles are mostly derived from content.parsoid.less, which the Minerva skin + // opts out of (since the styles are largely Vectorish). + // FIXME: Once Parser and Parsoid output are synchronized, we'll want to move these + // from here into the regular Minerva content styles. + figure[typeof*='mw:Image'], + figure[typeof*='mw:Video'], + figure[typeof*='mw:Audio'] { + max-width: 100%; + // Defaults to right alignment when not explicitly set. Should be flippable. + margin: 0.6em 0 0.6em 1.4em; + + &.mw-halign-left { + /* @noflip */ + margin: 0.6em 1.4em 0.6em 0; + /* @noflip */ + clear: left; + /* @noflip */ + float: left; + } + + &.mw-halign-right { + /* @noflip */ + margin: 0.6em 0 0.6em 1.4em; + /* @noflip */ + clear: right; + /* @noflip */ + float: right; + } + + &.mw-halign-center { + margin: 0.6em auto 0.6em auto; + clear: none; + float: none; + } + } + } + + .overlay-content { + // prevent disappearing after scrolling when -webkit-overflow-scrolling: touch + // is used (http://stackoverflow.com/a/10170170) + * { + -webkit-transform: translate( 0, 0 ); + } + + .surface { + overflow: hidden; + } + + .ve-init-mw-target-surface > .ve-ui-debugBar { + margin: 0 -@contentMargin; + } + } + + // Toolbar + @targetIconSize: 20px; + .overlay-header-container { + box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 ); + + .ve-init-mw-mobileArticleTarget-toolbar { + /* Account for difference in height between MF toolbar (3.35em) and VE toolbar (3em) */ + font-size: ( 3.35em / 3 ); + + @media all and ( min-width: @wgMFDeviceWidthDesktop ) { + border-color: @colorGray12; + border-style: solid; + border-width: 0 1px; + } + + .oo-ui-iconElement-icon { + /* Overwrite `contain` value here, as we're 16px base sized */ + .background-size( @targetIconSize, @targetIconSize ); + } + + .oo-ui-toolbar-bar { + border: 0; + box-shadow: none; + } + } + } + + .overlay-header { + /* Reset unwanted header styles */ + border-collapse: separate; + border: 0; + } +} + +.ve-ui-overlay { + /* enough to cover .overlay-header-container with z-index: 5 */ + z-index: 6; +} diff --git a/skinStyles/mobile.notifications.overlay/minerva.less b/skinStyles/mobile.notifications.overlay/minerva.less new file mode 100644 index 0000000..fad64fe --- /dev/null +++ b/skinStyles/mobile.notifications.overlay/minerva.less @@ -0,0 +1,28 @@ +@import 'minerva.variables'; + +.notifications-overlay .overlay-content { + top: @headerHeight; + bottom: @headerHeight; + + .mw-echo-ui-notificationsWidget { + top: @headerHeight; + } +} + +@media all and ( min-width: @deviceWidthTablet ) { + .notifications-overlay { + .mw-echo-notification { + padding: 1.75em @contentPaddingTablet; + } + .overlay-header .cancel { + // 0 because we want to have some tappable area to the left of the icon + left: 0; + } + .overlay-header { + padding-left: 0; + padding-right: 0; + // T170903 + max-width: none; + } + } +}