mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-11-18 03:41:45 +00:00
500462f4b2
We need to set 'padding-top' matching the height of the toolbar somewhere, so that the toolbar doesn't cover the top of the editing surface. Apparently moving it from the current place (the top-level wrapper for the MF overlay) to the document node (the node with the 'contenteditable' attribute) allows Safari to properly scroll the cursor into view when focussing, rather than scrolling it offscreen. Bug: T219066 Change-Id: Iee1e03bce24c2f149a0aa0f393a37b9db43eaca6
146 lines
3 KiB
Plaintext
146 lines
3 KiB
Plaintext
/*!
|
|
* VisualEditor MediaWiki Initialization MobileArticleTarget styles.
|
|
*
|
|
* @copyright 2011-2019 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
.ve-init-mw-target-surface {
|
|
// margin-left and margin-right defined by the skin
|
|
// (see .content styles in Minerva)
|
|
margin-bottom: 1em;
|
|
|
|
.ve-ce-attachedRootNode,
|
|
.ve-ui-surface-placeholder {
|
|
padding: 0;
|
|
|
|
&:before {
|
|
// This is done in this weird way to allow the margin to collapse with the margin of first
|
|
// element inside the editing surface. See I69d4d4bd9390a1007bc40cda9e78a6b3e7a1bd1d.
|
|
margin-top: 1em;
|
|
content: '';
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.ve-init-mw-mobileArticleTarget.overlay {
|
|
// Override MobileFrontend `.overlay` styles.
|
|
// `padding-top` is instead set on a different element in adjustContentPadding().
|
|
padding-top: 0;
|
|
}
|
|
|
|
@media screen and ( max-width: 767px ) {
|
|
.ve-init-mw-target-surface .ve-ui-surface-placeholder > * {
|
|
/* Fix margin overlap */
|
|
margin-top: 0;
|
|
/* Placeholder doesn't need a border as well */
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.ve-ui-debugBar {
|
|
padding-top: 0.8em;
|
|
border-top: 1px solid #c8ccd1;
|
|
box-shadow: 0 10px 10px -10px rgba( 0, 0, 0, 0.15 ) inset;
|
|
}
|
|
|
|
.ve-ui-debugBar-selectionLabel {
|
|
min-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Hide toolbar shortcuts, no use on mobile */
|
|
.oo-ui-popupToolGroup-tools .oo-ui-tool-link .oo-ui-tool-accel {
|
|
display: none;
|
|
}
|
|
|
|
.ve-init-mw-mobileArticleTarget-title-container {
|
|
width: 100%;
|
|
position: relative;
|
|
border-right: 1px solid #c8ccd1;
|
|
}
|
|
|
|
.ve-init-mw-mobileArticleTarget-title {
|
|
padding: 0 0.5em;
|
|
line-height: 3.164em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.ve-init-mw-mobileArticleTarget-pageTools,
|
|
.ve-init-mw-mobileArticleTarget-editTools {
|
|
display: table;
|
|
|
|
> .oo-ui-toolGroup,
|
|
> .ve-init-mw-mobileArticleTarget-title-container {
|
|
display: table-cell;
|
|
}
|
|
}
|
|
|
|
/* Edit tools has no 100% width cells */
|
|
.ve-init-mw-mobileArticleTarget-editTools {
|
|
width: 100%;
|
|
|
|
> .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle {
|
|
> .oo-ui-iconElement-icon,
|
|
> .oo-ui-indicatorElement-indicator {
|
|
left: 50%;
|
|
}
|
|
|
|
> .oo-ui-iconElement-icon {
|
|
margin-left: -1.875em;
|
|
}
|
|
}
|
|
|
|
> .oo-ui-barToolGroup {
|
|
text-align: center;
|
|
|
|
> .oo-ui-toolGroup-tools > .oo-ui-tool {
|
|
width: 100%;
|
|
|
|
> .oo-ui-tool-link {
|
|
padding: 0.875em;
|
|
|
|
> .oo-ui-iconElement-icon:not( .oo-ui-tool-checkIcon ) {
|
|
position: static;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
> .oo-ui-tool-title {
|
|
vertical-align: middle;
|
|
|
|
@media screen and ( max-width: 767px ) {
|
|
// stylelint-disable-next-line declaration-no-important
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .oo-ui-toolGroup {
|
|
&-empty {
|
|
display: none;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ve-init-mw-mobileArticleTarget-editTools-hidden,
|
|
.ve-init-mw-mobileArticleTarget-pageToolbar-hidden {
|
|
display: none;
|
|
}
|