MediaWiki:MobileEditor.css

/** * * @title                   MobileEditor * @description            Mobile editor for FANDOM. * @author                 Speedit * @version                0.5.0 * @license                CC-BY-SA 3.0 * @notes                  Dependent on MobileEditor main script. * */ .skin-oasis #mobile-editor__wrapper { background: #fff; color: #3a3a3a; display: flex; flex-flow: column nowrap; font-family: Rubik,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.5em; height: 100vh; width: 100vw; position: relative; } .skin-oasis #mobile-editor__wrapper .mobile-editor__overlay { display: flex; left: 0; position: fixed; width: 100vw; z-index: 1000; } .skin-oasis #mobile-editor__wrapper:not(.me-is-initialized) .mobile-editor__overlay { height: 100vh; top: 0; } .skin-oasis #mobile-editor__wrapper.me-is-initialized .mobile-editor__overlay { top: 55px; height: calc(100vh - 55px); background: hsla(0, 0%, 0%, 0.2); } .skin-oasis #mobile-editor__wrapper .wds-spinner { position: static; } .skin-oasis #mobile-editor__wrapper .me-is-hidden { display: none; } .skin-oasis #mobile-editor__wrapper .me-is-pane { flex: 1; } .skin-oasis #mobile-editor__wrapper .mobile-editor__textarea { box-sizing: border-box; border: 1px solid #ccc; font-size: inherit; font-family: inherit; line-height: inherit; height: 100%; padding: 0.5em; width: 100%; } .skin-oasis #mobile-editor__wrapper.me-is-codeeditor .mobile-editor__textarea { white-space: pre; } .skin-oasis #mobile-editor__wrapper .mobile-editor__button { border-width: 1px; border-style: solid; border-radius: 3px; color: #00acac; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 7px 12px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__is-text { border: none; padding: 0; } .skin-oasis #mobile-editor__wrapper .mobile-editor__button:hover { transition: color 0.75s; color: #00d6d6; } .skin-oasis #mobile-editor__wrapper .mobile-editor__header { align-items: center; background: #002a33; box-sizing: border-box; color: #fff; display: flex; flex-flow: row nowrap; height: 55px; min-height: 55px; padding: 12px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__header-previous { display: flex; border-right: 1px solid #5f7a7b; border-radius: 0; padding-right: 20px; margin-right: 12px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__header-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: pre; margin-right: 12px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__field { margin-top: 14px; padding: 0 28px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__summary-field { display: flex; flex-flow: column nowrap; } .skin-oasis #mobile-editor__wrapper .mobile-editor__checkbox { min-height: 24px; display: flex; } .skin-oasis #mobile-editor__wrapper .mobile-editor__checkbox input { display: none; -webkit-appearance: none; height: auto; margin: 0; } .skin-oasis #mobile-editor__wrapper .mobile-editor__checkbox input:not(:checked) + label .wds-icon { display: none; } .skin-oasis #mobile-editor__wrapper .mobile-editor__checkbox input:not(:checked) + label:before { background: currentColor; content: ''; height: 18px; width: 18px; margin: 3px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__label { display: flex; align-items: center; } .mobile-editor__label span { margin-left: 7px; } .skin-oasis #mobile-editor__wrapper .mobile-editor__utilities-field { display: flex; } .skin-oasis #mobile-editor__wrapper .mobile-editor__utilities-field, .skin-oasis #mobile-editor__wrapper .mobile-editor__utilities-field .mobile-editor__button { flex: 1; } .skin-oasis #mobile-editor__wrapper .mobile-editor__utilities-field .mobile-editor__button:nth-child(n+2) { margin-left: 1em; } .skin-oasis #mobile-editor__wrapper.me-is-codeeditor .mobile-editor__util-preview { display: none; } .skin-oasis #mobile-editor__wrapper .mobile-editor__licensing { border-top: 1px solid #ccc; position: absolute; bottom: 0; left: 0; width: 100vw; padding: 1em; } .skin-oasis #mobile-editor__wrapper .mobile-editor__licensing-icon { display: inline; line-height: 1em; vertical-align: middle; } .skin-oasis #mobile-editor__wrapper .mobile-editor__licensing-icon img { display: inline; height: 14px; } .skin-oasis #mobile-editor__wrapper #mobile-editor__preview, .skin-oasis #mobile-editor__wrapper #mobile-editor__diff { width: 100%; height: 100%; } .skin-oasis #mobile-editor__diff table.diff tr { display: flex; flex-flow: column nowrap; align-self: stretch; flex-shrink: 0; } .skin-oasis #mobile-editor__diff table.diff, .skin-oasis #mobile-editor__diff table.diff tbody { background: none; display: flex; flex-flow: column nowrap; max-height: calc(100vh - 55px); overflow-y: scroll; } .skin-oasis #mobile-editor__diff table.diff td[class^="diff"] { background: none; color: inherit; } .skin-oasis #mobile-editor__diff table.diff tr.diff-header, .skin-oasis #mobile-editor__diff table.diff td.diff-lineno ~ td.diff-lineno, .skin-oasis #mobile-editor__diff table.diff td.diff-context ~ td.diff-context, .skin-oasis #mobile-editor__diff table.diff td.diff-marker, .skin-oasis #mobile-editor__diff table.diff td.diff-empty { display: none; } .skin-oasis #mobile-editor__diff table.diff td.diff-addedline, .skin-oasis #mobile-editor__diff table.diff td.diff-deletedline, .skin-oasis #mobile-editor__diff table.diff td.diff-context { border-radius: 0; } .skin-oasis #mobile-editor__diff table.diff td.diff-addedline:nth-child(2), .skin-oasis #mobile-editor__diff table.diff td.diff-deletedline:nth-child(2), .skin-oasis #mobile-editor__diff table.diff td.diff-context:nth-child(2) { margin-top: 1em; } .skin-oasis #mobile-editor__diff table.diff td.diff-context:empty:before { content: ' '; line-height: 1em; } /** **/