/* CSS specific for mobile phones. */ /* Related to editor.css */ #editor-btn{ max-width: 160px; } #editor-btn td:last-of-type{ max-width: 96px; padding-left: 8px; text-align: left; } #currently-msg{ padding: 12px 5px; } input#follow-checkbox { width: 24px; height: 24px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; border-radius: 2px; border: 2px solid #aaa; outline: none; box-shadow: #00000015 0px 0px 2px 1px; margin: 0px !important; } #follow-container { display: block; position: relative; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; } .checkmark:after { content: ''; position: absolute; display: none; left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } input#follow-checkbox:checked ~ .checkmark:after { display: block; } input#follow-checkbox:checked ~ .checkmark { background-color: #0b87e7; } #userlist_table + hr { display: none;} div#w2ui-overlay-actionbar.w2ui-overlay{ margin-left: -7px; } /* Related to loleaflet.css */ #toolbar-hamburger { width: 36px; height: 36px; } #toolbar-hamburger.menuwizard-opened { width: 36px; height: 43px; } #toolbar-hamburger.menuwizard-opened .main-menu-btn { padding-top: 10px; } .logo { background-size: 100px; max-width: 24px; max-height: 31px; top: 0; } #toolbar-logo { width: 0px !important; } #document-header{ display: none !important; } /* No ruler on mobile phones. */ .loleaflet-ruler { height: 0px; display: none; } /* Related to menubar.css */ .document-logo { width: 35px; height: 38px; } #document-titlebar { display: none; } .document-title { display: none; } /* hide the menu in mobile view */ #main-menu-state:not(:checked) ~ #main-menu { display: none; } .main-menu-btn { display: inline-block; } .main-nav { position: absolute; height: 0; width: 100%; top: 37px; /*set equal to toolbar up's height*/ margin: 0; -webkit-overflow-scrolling: touch; overflow: scroll; z-index: 1010; bottom: 34px !important; background-color: #00000050; display: block !important; /* Show menubar even if folded */ } #main-menu { position: relative; top: 0; width: 70%; float: right; background-color: white; height: 100%; } .writer-icon-img { background-size: 35px 35px; } .calc-icon-img { background-size: 35px 35px; } .impress-icon-img { background-size: 35px 35px; } #document-name-input { display: none; } /* Related to scollBar.css */ .mCSB_scrollTools_vertical{ width: 38px !important; } #mobile-wizard-header .mCSB_container { top: 1px !important; } .mCSB_scrollTools_vertical .mCSB_dragger_bar { position: fixed !important; margin-top: 8px !important; height: 48px !important; width: 48px !important; right: -16px; border-radius: 100px !important; background: url('images/lc_scrollbar_mobile.svg') no-repeat center #fff !important; background-size: 24px !important; box-shadow: 0 1px 3px 1px #00000050; } #mCSB_1_dragger_horizontal > .mCSB_dragger_bar, #mCSB_2_dragger_horizontal > .mCSB_dragger_bar, #mCSB_3_dragger_horizontal > .mCSB_dragger_bar { height: 2px; background-color: #bbb; margin-top: 9px; } #mCSB_1_scrollbar_horizontal .mCSB_draggerRail, #mCSB_2_scrollbar_horizontal .mCSB_draggerRail, #mCSB_3_scrollbar_horizontal .mCSB_draggerRail{ background-color: #f2f2f2 !important; } /* Related to selectionMarkers.css */ #tb_formulabar_item_formula, #tb_formulabar_item_address { height: 54px !important; } #tb_formulabar_item_formula > div, #tb_formulabar_item_address > div { margin-top: -16px; } #tb_formulabar_item_functiondialog > div { margin-top: -20px; } .inputbar_multiline #tb_formulabar_item_formula > div, .inputbar_multiline #tb_formulabar_item_address > div { margin-top: 0px; } .inputbar_multiline #tb_formulabar_item_address{ border-right: solid 1px #0000004d !important; } .inputbar_multiline #addressInput{ border: none; } /* Related to spreadsheet.css */ @-moz-document url-prefix() { #spreadsheet-row-column-frame.readonly { top: 36px !important; } #document-container.spreadsheet-document.readonly { top: 56px !important; } #spreadsheet-row-column-frame { top: 75px !important } #document-container.spreadsheet-document { top: 95px !important; } } .spreadsheet-tab{ background-color: #eaf5ff; color: #4c4c4c; border-radius: 3px; border-color: #fbfbfb; padding-top: 2px; padding-bottom: 6px; margin-top: 4px; } .spreadsheet-tab-selected{ color: #0b87e7 !important; border-color: #0b87e7; border-top-left-radius: 0px; border-top-right-radius: 0px; margin-top: 2px; padding-top: 5px; padding-bottom: 7px; } .spreadsheet-tabs-container { bottom: 0; left: 28px; } #tb_spreadsheet-toolbar_item_insertsheet { padding-left: 3px; } .spreadsheet-tab-scroll { overflow-x: scroll; scrollbar-width: none; /*css draft (firefox only)*/ -ms-scrollbar: none; /*ie*/ -webkit-overflow-scrolling: touch; } .spreadsheet-tabs-container, #spreadsheet-toolbar{ background-color: #fff; border-top: 1px solid #eceff4; } #spreadsheet-toolbar{ bottom: 0; background-color: #fbfbfb; border-top: 1px solid #eceff4; height: 40px; padding-top: 6px; padding-left: 1px; padding-bottom: 0px; padding-right: 0px; } #spreadsheet-toolbar .w2ui-tb-image{ padding-top: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; } #toolbar-down table.w2ui-button.over { border: 1px solid #eee; background-color: #eeeeee; border-radius: 0px; } /* Related to vex.css */ .vex-open .loleaflet-user-idle { background: rgba(0, 0, 0, 0) !important; font-size: xx-large !important; color: #fff !important; text-align: center !important; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input select, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='date'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='datetime'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='datetime-local'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='email'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='month'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='number'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='password'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='search'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='tel'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='text'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='time'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='url'], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='week']{ padding: 0 !important } .vex-content .loleaflet-annotation-img { box-sizing: content-box !important; } .vex-dialog-input > textarea.loleaflet-annotation-textarea { height: 150px; border: 4px solid #f0f0f0 !important; box-shadow: 0 0 1px 1px #dfdfdf; } .vex-dialog-input > textarea.loleaflet-annotation-textarea:focus { height: 150px; border: 4px solid #f0f0f0 !important; box-shadow: 0 0 1px 1px #0b87e7 !important; } .vex-dialog-message { text-align: center; font-family: var(--vex-font) !important; font-size: 1em !important; font-weight: 600 !important; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='text'] { border-radius: 4px !important; background-color: #fff !important; width: 100%; width: -moz-available !important; width: -webkit-fill-available !important; width: fill-available !important; border: 4px solid #fff !important; box-shadow: 0 0 1px 1px #dfdfdf; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='text']:focus { border: 4px solid #fff !important; box-shadow: 0 0 1px 1px #0b87e7 !important; color: #0b87e7 !important; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type='text']:focus input{ color: #000 !important; } .vex-dialog-input { font-family: var(--vex-font) !important; font-size: 0.8em; } .vex.vex-theme-plain .vex-content { height: 100% !important; max-width: 100% !important; width: auto !important; border: none; box-shadow: none; border-radius: none; } .vex.vex-theme-plain { padding: 0px !important; position: relative !important; top: -42px !important; } .vex-open .vex-overlay { z-index: 2000; min-height: 100%; position: absolute; width: 100%; width: -moz-available !important; width: -webkit-fill-available !important; width: fill-available !important; top: 0; background-color: white; } .vex.vex-theme-plain input { font-size: 1.1em !important; } textarea.loleaflet-annotation-textarea { min-width: -moz-available !important; min-width: -webkit-fill-available !important; min-width: fill-available !important; } button.vex-dialog-button-primary.vex-dialog-button.vex-first { border: 1px solid #0b87e7 !important; border-radius: 4px !important; background-color: #0b87e7 !important; color: #fff !important; } button.vex-dialog-button-secondary.vex-dialog-button.vex-last { border-radius: 4px; background-color: #fff !important; border: 1px solid #aaa !important; } .vex.vex-theme-plain .vex-dialog-button{ line-height: 1em !important; height: auto !important; } .vex-overlay.loleaflet-user-idle-overlay { background-color: #05396180; } .vex-content.loleaflet-user-idle{ padding-top: 160px !important; padding-bottom: 160px !important; } /* Related to toolbar.css */ .insertshape-grid { box-sizing: content-box; position: static; padding: 2px 0px; display: inline-block; width: 100%; height: 100%; overflow-y: scroll; } #toolbar-up.w2ui-toolbar{ padding-top: 0px; padding-bottom: 0px; background: transparent; } #formulabar { padding: 0px !important; border-top: 1px solid #bbbbbb !important; } #tb_actionbar_item_fullscreen{display: none;} #toolbar-down { height: 34px !important; border-top: 1px solid #f1f1f1 !important; } #toolbar-down > .w2ui-scroll-wrapper { overflow-x: scroll !important; scrollbar-width: none; /*css draft (firefox only)*/ -ms-scrollbar: none; /*ie*/ } #toolbar-down > .w2ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/ display: none; } #toolbar-down .w2ui-scroll-left, #toolbar-down .w2ui-scroll-right{ background: none; height: 100%; width: 0px; top: 0%; box-shadow: 8px 0 13px 2px #0b87e7, -6px 0px 6px 6px #007cdc; border-radius: 0px; } #toolbar-down .w2ui-scroll-right{ right: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #addressInput{ width: 60px !important; border: 1px solid #bbbbbb; border-bottom: none; border-top: none; border-left: none; height: 35px !important; } .w2ui-icon.equal, .w2ui-icon.autosum{width: 38px !important;} #formulaInput{ border: 1px solid #bbbbbb; border-bottom: none; border-top: none; border-right: none; height: 35px !important; } #calc-inputbar-wrapper { display: block; border: none; } #calc-inputbar { display: block; width: 100%; position: relative; padding: 0px; margin: 0px; } #tb_actionbar_item_undo .w2ui-tb-image, #tb_actionbar_item_redo .w2ui-tb-image, #tb_actionbar_item_mobile_wizard .w2ui-tb-image, #tb_actionbar_item_prev .w2ui-tb-image, #tb_actionbar_item_next .w2ui-tb-image, #tb_actionbar_item_insertion_mobile_wizard .w2ui-tb-image, #tb_actionbar_item_insertcomment .w2ui-tb-image, #tb_actionbar_item_fullscreen-presentation .w2ui-tb-image{ min-width: 38px; } #tb_actionbar_item_userlist table{ margin: -1px 0px auto 3px !important; } #toolbar-up .checked{ border-color: #fff !important; background: none !important; } #toolbar-up .checked .w2ui-tb-image, #toolbar-up .w2ui-tb-image:hover, #toolbar-up .w2ui-tb-image:focus, #toolbar-up .w2ui-tb-image:active, #toolbar-hamburger.menuwizard-closed:active{ -webkit-filter: drop-shadow(0px 0px 4px #0b87e7); filter: drop-shadow(0px 0px 4px #0b87e7); } #toolbar-up .over{ border-color: #fff !important; } #toolbar-up .over:hover .w2ui-tb-image, #toolbar-up .over:active .w2ui-tb-image{ -webkit-filter: drop-shadow(0px 0px 4px #0b87e7); filter: drop-shadow(0px 0px 4px #0b87e7); border-color: #fff transparent; } #toolbar-down table.w2ui-button .w2ui-tb-image { margin: 5px 9px 3px !important; } .w2ui-toolbar .w2ui-break{ background-image: none; background-color: #dae6f3; } #setgamma input.spinfield, #linewidth input.spinfield, #nolines input.spinfield{ width: 140px !important; } td[id^='tb_spreadsheet-toolbar_item'] table.w2ui-button.over { background: none; border-color: #fff; } td[id^='tb_spreadsheet-toolbar_item'] table.w2ui-button{ border: none !important; } td[id^='tb_spreadsheet-toolbar_item']:focus table.w2ui-button, td[id^='tb_spreadsheet-toolbar_item']:active table.w2ui-button{ background-color: #eaf5ff; outline: none; border: none; } td[id^='tb_spreadsheet-toolbar_item']:focus table.w2ui-button div.w2ui-icon, td[id^='tb_spreadsheet-toolbar_item']:active table.w2ui-button div.w2ui-icon{ -webkit-filter: grayscale(100%) brightness(80%) sepia(100%) hue-rotate(-190deg) saturate(900%) contrast(0.8); filter: grayscale(100%) brightness(80%) sepia(100%) hue-rotate(-190deg) saturate(900%) contrast(0.8); } #toolbar-down table.w2ui-button:not(.checked) td.w2ui-tb-down > div { border-top: none !important; margin-top: 0 !important; border-bottom: 5px solid #8D99A7 !important; } #toolbar-down table.w2ui-button.checked td.w2ui-tb-down > div { border-bottom: none; border-top: 5px solid #8D99A7; margin-bottom: 5px !important; } #w2ui-overlay-editbar .menu{ border-radius: 3px; } #w2ui-overlay-editbar:before{ border: none !important; } #w2ui-overlay-editbar:after{ border: none; border-top: 8px solid #000000; border-top-color: inherit; border-right: 8px solid transparent; border-left: 8px solid transparent; top: 100%; margin-top: -3px; } #toolbar-search #tb_searchbar_item_search *{ width: 100% !important; } #toolbar-search input#search-input{ font-size: 16px; } #toolbar-search #tb_searchbar_item_left, #tb_searchbar_right { display: none; } #toolbar-search #tb_searchbar_item_hidesearchbar{ padding: 1px 8px !important; } #toolbar-search #tb_searchbar_item_search{ width: 80%; } #toolbar-search #search-input-group > label{ display: none; } .context-menu-link{ display: flex; flex-direction: row; align-items: center; } /* Related to slidesorter */ /* Show slidesorter beyond 768px only */ #presentation-controls-wrapper { top: 41px; left: initial; bottom: 33px; max-width: initial; } #presentation-controls-wrapper.readonly { top: 41px; bottom: 0px; } /* Show sidebar beyond 768px only */ #sidebar-dock-wrapper { display: none; top: 41px; } #document-container.sidebar-document { left: 0px !important; } #document-container.readonly { top: 37px; /*set equal to toolbar up's height*/ bottom: 0px; } #document-container.readonly.parts-preview-document { bottom: 65px; } #document-container.readonly.spreadsheet-document { top: 61px !important; bottom: 42px; } #document-container.parts-preview-document { left: 0px !important; bottom: 95px; } #document-container.spreadsheet-document { top: 92px !important; bottom: 72px; } #document-container { top: 37px; /*set equal to toolbar up's height*/ right: 0px !important; bottom: 35px; } #spreadsheet-row-column-frame { top: 72px; bottom: 36px; bottom: 68px; } #document-container.spreadsheet-document.readonly { top: 57px !important; } #spreadsheet-row-column-frame.readonly { top: 41px !important; bottom: 35px !important; } #closebuttonwrapper { display: none; } /* Slidesorter in portrait mode */ #presentation-controls-wrapper.portrait { top: initial; left: initial; bottom: 33px; position: fixed; width: 100%; max-width: initial; } #presentation-controls-wrapper.portrait.readonly { top: initial; bottom: 0px; width: 100%; position: fixed; } #document-container.portrait.readonly.parts-preview-document { bottom: 61px; } #document-container.portrait.parts-preview-document { left: 0px !important; bottom: 95px; width: 100%; } #document-container.portrait.parts-preview-document.keyboard { bottom: 33px; } #document-container.portrait.parts-preview-document #map { box-shadow: none; } #slide-sorter.portrait { max-height: 60px; } .preview-img-portrait { min-width: 37px; max-width: 60px; margin: 0px; } .preview-frame-portrait { max-height: 60px; max-width: 100%; display: inline-block; padding-right: 1em; margin: 0; } .preview-frame-portrait.preview-img-dropsite { padding-right: 0px; border-right: 20px solid #b6b6b6; border-bottom: none; } /* Slidesorter in landscape mode */ #presentation-controls-wrapper.landscape { top: 41px; bottom: 33px; } #presentation-controls-wrapper.landscape.readonly { top: 41px; bottom: 0px; max-width: 120px; } #document-container.landscape.parts-preview-document { top: 41px; left: 66px !important; bottom: 35px; } #document-container.landscape.readonly.parts-preview-document { top: 41px; bottom: 0px; width: initial; } #document-container.landscape.parts-preview-document.keyboard { left: 0px !important; } #slide-sorter.landscape { max-width: 120px; } .preview-img-landscape { min-width: 20px; max-width: 60px; margin-left: 1px; } .preview-frame-landscape { max-height: initial; max-width: 66px; display: block; } /* Highlight where a slide can be dropped when reordering by drag-and-drop. */ .preview-frame-landscape.preview-img-dropsite { border-bottom: 10px solid #b6b6b6; } /* Related to mobilewizard.cxx */ #mobile-wizard-header.landscape { display: none; } #mobile-wizard-content.with-slide-sorter-above.landscape { top: 48px !important; } #mobile-wizard-header.portrait { display: block; } #mobile-wizard-content.with-slide-sorter-above.portrait { top: 111px !important; } /* Related to mobile-wizard based menubar */ #mobile-wizard.menuwizard.landscape #mobile-wizard-content.with-slide-sorter-above.landscape { overflow-y: auto !important; } #mobile-wizard.menuwizard.portrait #mobile-wizard-content.with-slide-sorter-above.portrait { overflow-y: hidden !important; } /* Disable tooltips when on touch devices */ .w2ui-tag .w2ui-tag-top { display: none !important; }