libreoffice-online/loleaflet/css/device-mobile.css
Pedro Pinto Silva 189fa6af7f Mobile: jsdialogs: Text import: Fix separator btn position
Depends on: https://gerrit.libreoffice.org/c/core/+/116265

Fixes checkbutton (Use separators) position by placing it
before divider label ('separatoroptions') thus, improving readability. User
can now see it clearly that all those separator options are related
and hierarchically under a main option: #toseparatedby.checkbutton.

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I97b133e3e873a76ca75290728adaf1a45c9bcece
2021-08-05 10:39:00 +02:00

792 lines
19 KiB
CSS

/* 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;
position: relative;
z-index: 1002;
}
#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 {
height: 0;
width: 100%;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow: scroll;
z-index: 1010;
bottom: 34px !important;
background-color: #00000050;
display: none;
}
#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;
}
#tb_formulabar_item_address, #tb_formulabar_item_item_2, #tb_formulabar_item_functiondialog {
vertical-align: middle;
}
/* Related to selectionMarkers.css */
#tb_formulabar_item_formula, #tb_formulabar_item_address {
height: 44px !important;
padding-top: 0px !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;
}
.spreadsheet-tab-selected{
color: #0b87e7 !important;
border-color: #0b87e7;
}
#tb_spreadsheet-toolbar_item_insertsheet {
padding: 0 7px 0 12px;
}
.spreadsheet-tab-scroll {
overflow-x: scroll;
scrollbar-width: none; /*css draft (firefox only)*/
-ms-scrollbar: none; /*ie*/
-webkit-overflow-scrolling: touch;
margin: 0;
}
.spreadsheet-tabs-container, #spreadsheet-toolbar{
background-color: #fff;
border-top: 1px solid #eceff4;
}
#spreadsheet-toolbar{
background-color: #fbfbfb;
border-top: 1px solid #eceff4;
height: 40px;
padding: 0;
}
#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;
}
#toolbar-down table.w2ui-button.checked {
border: 1px solid #e5f1ff;
background-color: #e5f1ff;
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-dialog-message > div {
text-align: left;
font-family: var(--vex-font) !important;
font-size: 1em !important;
font-weight: 600 !important;
}
.vex-dialog-message label {
width: 84%;
padding-left: 4%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: text-bottom;
}
.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;
}
/* Vex: Welcome dialog */
.vex-welcome-mobile .vex-dialog-form .vex-content {
padding: 0;
}
.vex-welcome-mobile .vex-dialog-button-primary {
width: 100%;
}
/* 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: 35px !important;
border-top: 1px solid var(--gray-color) !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{
display: block !important;
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;
box-shadow: none;
}
#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;
box-shadow: none !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 !important;
}
.w2ui-toolbar .w2ui-break{
background-image: none;
background-color: #dae6f3;
}
#formulabar .w2ui-break {
visibility: hidden;
}
#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 {
max-width: initial;
}
/* Show sidebar beyond 768px only */
#sidebar-dock-wrapper {
display: none !important;
}
#document-container.sidebar-document {
left: 0px !important;
}
#closebuttonwrapper {
display: none;
}
/* Slidesorter in portrait mode */
#presentation-controls-wrapper.portrait {
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;
overflow-x: scroll;
overflow-y: hidden;
line-height: 60px;
}
#slide-sorter.portrait .preview-img {
min-width: 37px;
max-width: 60px;
max-height: 45px;
margin: 0;
}
#slide-sorter.portrait .preview-frame {
max-height: 60px;
max-width: 100%;
display: inline-block;
padding-right: 1em;
margin: 0;
}
#slide-sorter.portrait .preview-frame.preview-img-dropsite {
padding-right: 0px;
border-right: 20px solid var(--gray-color);
border-bottom: none;
}
#document-container.landscape.parts-preview-document.keyboard {
left: 0px !important;
}
#slide-sorter.landscape {
overflow-x: hidden;
overflow-y: scroll;
}
#slide-sorter.landscape .preview-img {
min-width: 20px;
max-width: 60px;
margin: 0;
}
#slide-sorter.landscape .preview-frame {
max-height: initial;
max-width: 66px;
display: block;
margin: 1em 3px;
}
/* Highlight where a slide can be dropped when reordering by drag-and-drop. */
#slide-sorter.landscape .preview-frame.preview-img-dropsite {
border-bottom: 10px solid var(--gray-color);
}
#mobile-wizard.menuwizard {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#mobile-wizard.shapeswizard {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Related to mobilewizard.cxx */
#mobile-wizard-header.landscape {
display: none;
}
#mobile-wizard-header.portrait {
display: block;
}
/* Related to mobile-wizard based menubar */
#mobile-wizard.menuwizard.landscape #mobile-wizard-content.landscape {
overflow-y: auto !important;
}
/* Disable tooltips when on touch devices */
.w2ui-tag .w2ui-tag-top {
display: none !important;
}
.impress-comment-highlight {
filter: grayscale(1);
}
/* Related to jquery.contextMenu.css */
.context-menu-list .context-menu-item {
height: 38px;
width: 100%;
display: table;
box-sizing: border-box;
padding-left: 16px;
}
.context-menu-list .context-menu-item span {
display: table-cell;
vertical-align: middle;
font-weight: bold;
color: dark-grey;
padding-left: 38px;
}
.context-menu-list .context-menu-item:nth-child(1) span {
background: url('images/lc_editannotation.svg') no-repeat left center /24px;
}
.context-menu-list .context-menu-item:nth-child(2) span {
background: url('images/lc_replycomment.svg') no-repeat left center /24px;
}
.context-menu-list .context-menu-item:nth-child(3) span {
background: url('images/lc_deleteannotation.svg') no-repeat left center /24px;
}
.context-menu-list .context-menu-item:nth-child(4) span {
background: url('images/lc_ok.svg') no-repeat left center /24px;
}
/* Related to jsdialogs.css */
/* - macros */
#mobile-wizard-content #MacroWarnMedium p {
color: var(--gray-light-txt--color);
}
#mobile-wizard-content #MacroWarnMedium p:first-child {
color: #333;
}
#mobile-wizard-content #MacroWarnMedium p:first-child::after {
content: ' ';
background: url('images/lc_runmacro.svg') no-repeat left -2px / 24px;
width: 24px;
height: 24px;
float: left;
padding-left: 8px;
}
#mobile-wizard-content #MacroSelectorDialog #helpmacro {
margin: 4%;
padding: 5px;
width: auto;
box-sizing: border-box;
color: var(--gray-light-txt--color) !important;
border-radius: 4px;
border: 1px solid var(--gray-light-bg-color);
font-family: var(--mobile-font);
font-size: 16px;
font-weight: normal;
/*hide for now*/
display: none;
}
#mobile-wizard-content #MacroSelectorDialog #categories,
#mobile-wizard-content #MacroSelectorDialog #commands {
border-radius: 4px;
height: auto;
border-color: var(--gray-light-bg-color);
}
#mobile-wizard-content #MacroSelectorDialog #categories > .ui-treeview-body > .mobile-wizard li {
border-bottom: 1px solid var(--gray-light-bg-color);
}
#mobile-wizard-content #MacroSelectorDialog #commands {
margin-bottom: 6px;
}
#mobile-wizard-content #MacroSelectorDialog #commands.selected {
border-color: #0b87e7;
}
#mobile-wizard-content #MacroSelectorDialog #commands > .mobile-wizard.ui-treeview-body {
min-height: auto;
}
#mobile-wizard-content #MacroSelectorDialog #commands.empty > .mobile-wizard.ui-treeview-body::after {
content: '…';
width: 22px;
height: 22px;
line-height: 11px;
display: block;
padding-left: 8px;
color: var(--gray-color);
font-size: 22px;
}
/* busy popup */
#mobile-wizard.popup {
border-radius: 16px 16px 0 0;
}
#mobile-wizard.popup #mobile-wizard-content {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#mobile-wizard.popup.potrait #mobile-wizard-content {
flex-direction: column;
}
#mobile-wizard.popup.landscape {
height: 75% !important;
}
#mobile-wizard.popup.landscape #mobile-wizard-content {
flex-direction: row;
}
#mobile-wizard.popup #busylabel {
border-bottom: none !important;
font-size: 100% !important;
margin: 20px !important;
width: 100%;
}
/* snackbar */
#mobile-wizard.popup.snackbar {
height: 48px !important;
margin: 16px 5% !important;
width: 90%;
position: absolute;
}
/* - Import text */
#mobile-wizard-content #separatoroptions {
margin-top: 54px;
}
#mobile-wizard-content #toseparatedby.checkbutton {
margin-top: -74px;
margin-bottom: 24px;
}