MediaWiki:MobileEditor.css

/** * * @title                   MobileEditor * @description            Mobile editor for FANDOM. * @author                 Speedit * @version                0.7.0 * @license                CC-BY-SA 3.0 * @notes                  Dependent on MobileEditor main script. * */ /** * @section                Body styling overrides. * @element                .mediawiki */ .mobile body.mediawiki { background: #fff; padding: 0; } /** * @section                Mobile editor wrapper. * @element                #mobile-editor__wrapper */ .mediawiki #mobile-editor__wrapper { background: #fff; bottom: 0; color: #3a3a3a; font-family: Rubik, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; height: 100vh; left: 0; line-height: 1.5em; overflow: hidden; position: relative; top: 0; width: 100vw; } .mediawiki #mobile-editor__wrapper * { box-sizing: border-box; } .mobile #mobile-editor__wrapper ~ #WikiaNotifications { display: none; } /** * @section                Mobile editor panes. * @element                .me-is-pane, .me-is-hidden */ .mediawiki #mobile-editor__wrapper .me-is-pane { height: calc(100vh - 55px); position: absolute; width: 100vw; } .mediawiki #mobile-editor__wrapper *.me-is-hidden { display: none !important; } /** * @section                Mobile editor overlay. * @element                .mobile-editor__overlay */ .mediawiki #mobile-editor__wrapper .mobile-editor__overlay { display: flex; left: 0; position: absolute; width: 100vw; z-index: 1000; } .mediawiki #mobile-editor__wrapper:not(.me-is-initialized) .mobile-editor__overlay { height: 100vh; top: 0; } .mediawiki #mobile-editor__wrapper.me-is-initialized .mobile-editor__overlay { top: 55px; height: calc(100vh - 55px); background: hsla(0, 0%, 0%, 0.2); } .mediawiki #mobile-editor__wrapper .mobile-editor__overlay .wds-spinner { position: static; } /** * @section                Mobile editor UI components. * @element                .mobile-editor__textarea, .mobile-editor__button */ .mediawiki #mobile-editor__wrapper .mobile-editor__textarea { border-color: #00acac; border-style: solid; border-width: 0; font-size: inherit; font-family: inherit; height: 100%; line-height: inherit; padding: 0.5em; resize: none; width: 100%; } .mediawiki #mobile-editor__wrapper .mobile-editor__button { align-items: center; border-width: 1px; border-style: solid; border-radius: 3px; color: #00acac; display: inline-flex; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 7px 12px; } .mediawiki #mobile-editor__wrapper .mobile-editor__button .wds-icon:first-child:not(:only-child) { margin-right: 6px; } .mediawiki #mobile-editor__wrapper .mobile-editor__is-text { border: none; padding: 0; } .mediawiki #mobile-editor__wrapper .mobile-editor__button:hover { transition: color 0.75s; color: #00d6d6; } /** * @section                Mobile editor checkboxes. * @element                .mobile-editor__checkbox */ .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox { min-height: 24px; display: flex; } .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox input { display: none; -webkit-appearance: none; height: auto; margin: 0; } .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox .wds-icon { fill: #00acac; } .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox input:not(:checked) + label .wds-icon { display: none; } .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox input:not(:checked) + label:before { background: #00acac; border-radius: 1px; content: ''; height: 18px; width: 18px; margin: 3px; } .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox label { display: flex; align-items: center; } .mediawiki #mobile-editor__wrapper .mobile-editor__checkbox label span { margin-left: 7px; } /** * @section                Mobile editor header. * @element                .mobile-editor__header */ .mediawiki #mobile-editor__wrapper .mobile-editor__header { align-items: center; background: #002a33; color: #fff; display: flex; flex-flow: row nowrap; height: 55px; min-height: 55px; padding: 12px; width: 100vw; } .mediawiki #mobile-editor__wrapper .mobile-editor__header-previous { display: flex; border-right: 1px solid #5f7a7b; border-radius: 0; padding-right: 20px; margin-right: 12px; } .mediawiki #mobile-editor__wrapper .mobile-editor__header-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: pre; margin-right: 12px; } .mediawiki #mobile-editor__wrapper.me-is-codeeditor #mobile-editor__textbox { font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; white-space: pre; } /** * @section                Mobile editor actions pane. * @element                .mobile-editor__actions */ .mediawiki #mobile-editor__wrapper .mobile-editor__field { margin-top: 14px; padding: 0 28px; } .mediawiki #mobile-editor__wrapper .mobile-editor__summary-field { display: flex; flex-flow: column nowrap; } .mediawiki #mobile-editor__wrapper .mobile-editor__summary-field #mobile-editor__summary { background: #f2f5f5; border-width: 0 0 0 2px; margin-top: 7px; overflow-y: hidden; white-space: nowrap; } .mediawiki #mobile-editor__wrapper .mobile-editor__utilities-field { display: flex; flex-flow: column nowrap; } .mediawiki #mobile-editor__wrapper .mobile-editor__utilities-field, .mediawiki #mobile-editor__wrapper .mobile-editor__utilities-field .mobile-editor__button { flex: 1; } .mediawiki #mobile-editor__wrapper .mobile-editor__utilities-field .mobile-editor__button:nth-child(n+2) { margin-top: 7px; } .mediawiki #dev-wds-sprite #wds-icons-pages-small g { fill: currentColor !important; } .mediawiki #mobile-editor__wrapper.me-is-codeeditor .mobile-editor__util-preview { display: none; } /** * @subsection             Mobile editor licensing notice. * @element                .mobile-editor__licensing */ .mediawiki #mobile-editor__wrapper .mobile-editor__licensing { border-top: 1px solid #ccc; bottom: 0; font-size: x-small; left: 0; line-height: 1em; margin: 0 28px; overflow-y: scroll; padding: 1em; position: absolute; white-space: pre; width: calc(100vw - 56px); } .mediawiki #mobile-editor__wrapper .mobile-editor__licensing-icon { display: inline; line-height: 1em; margin-right: 0.3em; opacity: 0.2; vertical-align: text-bottom; } .mediawiki #mobile-editor__wrapper .mobile-editor__licensing-icon img { display: inline; height: 1em; } .mediawiki #mobile-editor__wrapper .mobile-editor__licensing-icon img:nth-child(n+2) { margin-left: 0.2em; } /** * @section                Mobile editor utilities. * @element                .mobile-editor__utilities */ .mediawiki #mobile-editor__wrapper #mobile-editor__preview, .mediawiki #mobile-editor__wrapper #mobile-editor__diff { width: 100%; height: 100%; } /** * @section                Mobile editor diff utility. * @element                #mobile-editor__diff */ .mediawiki #mobile-editor__diff table.diff, .mediawiki #mobile-editor__diff table.diff tbody { background: none; display: flex; flex-flow: column nowrap; max-height: calc(100vh - 55px); overflow-y: scroll; } .mediawiki #mobile-editor__diff table.diff tr { display: flex; flex-flow: column nowrap; align-self: stretch; flex-shrink: 0; } .mediawiki #mobile-editor__diff table.diff td { background: none; color: inherit; } .mediawiki #mobile-editor__diff table.diff tr.diff-header, .mediawiki #mobile-editor__diff table.diff td.diff-lineno ~ td.diff-lineno, .mediawiki #mobile-editor__diff table.diff td.diff-context ~ td.diff-context, .mediawiki #mobile-editor__diff table.diff td.diff-marker, .mediawiki #mobile-editor__diff table.diff td.diff-empty { display: none; } .mediawiki #mobile-editor__diff table.diff td.diff-addedline, .mediawiki #mobile-editor__diff table.diff td.diff-deletedline, .mediawiki #mobile-editor__diff table.diff td.diff-context { border-radius: 0; } .mediawiki #mobile-editor__diff table.diff td.diff-addedline:nth-child(2), .mediawiki #mobile-editor__diff table.diff td.diff-deletedline:nth-child(2), .mediawiki #mobile-editor__diff table.diff td.diff-context:nth-child(2) { margin-top: 1em; } .mediawiki #mobile-editor__diff table.diff td[class^="diff"]:empty:before { content: ' '; line-height: 1em; } /** * @section                Mobile editor diff colors (hardcoded). * @element                #mobile-editor__diff * @notes                  To be removed when local theme support is added. */ .mediawiki #mobile-editor__diff table.diff td.diff-addedline { border-color: #a3d3ff; color: #2d2d2d; } .mediawiki #mobile-editor__diff table.diff td.diff-deletedline { border-color: #ffe49c; color: #2d2d2d; } .mediawiki #mobile-editor__diff table.diff td.diff-context { background-color: #f7f7f7; border-color: #e6e6e6; color: #2d2d2d; } .mediawiki #mobile-editor__diff table.diff .diffchange-inline { color: #2d2d2d; } .mediawiki #mobile-editor__diff table.diff td.diff-addedline .diffchange { background: #d8ecff; } .mediawiki #mobile-editor__diff table.diff td.diff-deletedline .diffchange { background: #feeec8; } /** **/