@import url('../../../../../vendor/framework7/src/less/ios/_mixins.less'); @import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less'); // Colors @themeColor: #4066D7; // (64,102,215) @import url('../../../../../vendor/framework7/src/less/ios/intro.less'); @import url('../../../../../vendor/framework7/src/less/ios/grid.less'); @import url('../../../../../vendor/framework7/src/less/ios/views.less'); @import url('../../../../../vendor/framework7/src/less/ios/pages.less'); @import url('../../../../../vendor/framework7/src/less/ios/toolbars.less'); @import url('../../../../../vendor/framework7/src/less/ios/toolbars-pages.less'); @import url('../../../../../vendor/framework7/src/less/ios/searchbar.less'); @import url('../../../../../vendor/framework7/src/less/ios/messagebar.less'); @import url('../../../../../vendor/framework7/src/less/ios/icons.less'); //@import url('../../../../../vendor/framework7/src/less/ios/badges.less'); //@import url('../../../../../vendor/framework7/src/less/ios/chips.less'); @import url('../../../../../vendor/framework7/src/less/ios/content-block.less'); @import url('../../../../../vendor/framework7/src/less/ios/lists.less'); //@import url('../../../../../vendor/framework7/src/less/ios/contacts.less'); @import url('../../../../../vendor/framework7/src/less/ios/forms.less'); //@import url('../../../../../vendor/framework7/src/less/ios/floating-button.less'); //@import url('../../../../../vendor/framework7/src/less/ios/accordion.less'); @import url('../../../../../vendor/framework7/src/less/ios/cards.less'); @import url('../../../../../vendor/framework7/src/less/ios/modals.less'); @import url('../../../../../vendor/framework7/src/less/ios/panels.less'); //@import url('../../../../../vendor/framework7/src/less/ios/lazy-load.less'); @import url('../../../../../vendor/framework7/src/less/ios/tabs.less'); @import url('../../../../../vendor/framework7/src/less/ios/messages.less'); @import url('../../../../../vendor/framework7/src/less/ios/statusbar.less'); @import url('../../../../../vendor/framework7/src/less/ios/preloader.less'); @import url('../../../../../vendor/framework7/src/less/ios/progressbar.less'); //@import url('../../../../../vendor/framework7/src/less/ios/pull-to-refresh.less'); //@import url('../../../../../vendor/framework7/src/less/ios/infinite-scroll.less'); //@import url('../../../../../vendor/framework7/src/less/ios/autocomplete.less'); @import url('../../../../../vendor/framework7/src/less/ios/swiper.less'); //@import url('../../../../../vendor/framework7/src/less/ios/photo-browser.less'); @import url('../../../../../vendor/framework7/src/less/ios/picker.less'); //@import url('../../../../../vendor/framework7/src/less/ios/calendar.less'); @import url('../../../../../vendor/framework7/src/less/ios/notifications.less'); //@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less'); @import url('../../../../../vendor/framework7/src/less/ios/disabled.less'); // Main Toolbar #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { margin-left: 0; html:not(.phone) & { margin-left: 10px; } } // Search .searchbar.document { background: lighten(@searchbarBg, 10%); .buttons-row { margin-left: 10px; margin-right: 5px; } } // Edit container .phone.ios { .container-edit { .navbar { .hairline(top, @toolbarBorderColor); } .page-content { .list-block:first-child { margin-top: -1px; } } } } .container-edit, .container-add, .container-settings { &.popup, &.popover { .list-block { ul { border-radius: 0 !important; background: #fff; } &:first-child { margin-top: 0; } li:first-child a, li:last-child a { border-radius: 0 !important; } } &, .popover-inner { > .content-block { width: 100%; height: 100%; margin: 0; padding: 0; color: #000; } } .popover-view { border-radius: 13px; > .pages { border-radius: 13px; } } } .categories { width: 100%; > .buttons-row { width: 100%; } } .popover-inner { height: 400px; } } // List extend .item-content { .item-after { &.splitter { color: #000; label { margin: 0 5px; } .buttons-row { min-width: 90px; margin-left: 10px; } } &.value { display: block; min-width: 60px; color: @black; margin-left: 10px; text-align: right; } } &.buttons { .item-inner { padding-top: 0; padding-bottom: 0; align-items: stretch; > .row { width: 100%; align-items: stretch; .button { flex: 1; border: none; height: inherit; border-radius: 0; font-size: 17px; display: flex; align-items: center; justify-content: center; } } } } .item-after .color-preview { width: 75px; height: 30px; margin-top: -3px; border: 1px solid #c4c4c4; html.pixel-ratio-2 & { border: 0.5px solid #c4c4c4; } html.pixel-ratio-3 & { border: 0.33px solid #c4c4c4; } } i .color-preview { width: 22px; height: 8px; display: inline-block; margin-top: 21px; box-sizing: border-box; border: 1px solid #c4c4c4; html.pixel-ratio-2 & { border: 0.5px solid #c4c4c4; } html.pixel-ratio-3 & { border: 0.33px solid #c4c4c4; } } } .item-link { &.no-indicator { .item-inner { background-image: none; } } } // About .about { .page-content { text-align: center; } .content-block:first-child { margin: 15px 0; } .content-block { margin: 0 auto 15px; a { color: #000; } } h3 { font-weight: normal; margin: 0; &.vendor { color: #000; font-weight: bold; margin-top: 15px; } } p > label { margin-right: 5px; } .logo { background-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png'); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); background-size: auto; } } } // Add Container #add-table, #add-shape { .page { background-color: #fff; } } // Data view .dataview { &.page-content { background: @white; } ul { padding: 0 10px; list-style: none; li { display: inline-block; } } .active { position: relative; &::after { content: ''; width: 20px; height: 20px; background-color: red; position: absolute; right: 0; bottom: 0; } } } // Table styles .table-styles { li { margin: 0; padding: 1px; img { width: 70px; height: 50px; } } } // Shapes .shapes { li { width: 70px; height: 70px; margin: 0 1px; .thumb { width: 100%; height: 100%; background-color: @themeColor; } } } // Charts .chart-types { li { width: 60px; height: 60px; margin: 6px; .thumb { width: 100%; height: 100%; background-size: contain; } } } // Bullets and numbers .bullets, .numbers { ul { margin-top: 10px; } li { width: 70px; height: 70px; margin-right: 1px; border: 1px solid #c4c4c4; html.pixel-ratio-2 & { border: 0.5px solid #c4c4c4; } html.pixel-ratio-3 & { border: 0.33px solid #c4c4c4; } &.active { border: none; filter: invert(); .thumb { background-color:spin(@themeColor, 180);//lighten(@themeColor, 20%); } } .thumb { width: 100%; height: 100%; background-color: @white; background-size: cover; label { width: 100%; text-align: center; position: absolute; top: 34%; } } } } // Active button icon color .button { &.active { i.icon { background-color: #fff; } } } // Color palette .color-palette { a { flex-grow: 1; position: relative; min-width: 10px; min-height: 26px; margin: 1px 1px 0 0; border: 0.5px solid #c4c4c4; html.pixel-ratio-2 & { border: 0.5px solid #c4c4c4; } html.pixel-ratio-3 & { border: 0.33px solid #c4c4c4; } &.active { &:after { content:' '; position: absolute; left: 50%; margin-left: -6px; top: 50%; margin-top: -4px; width: 12px; height: 9px; background: no-repeat center; .encoded-svg-background(""); -webkit-background-size: 12px 9px; background-size: 12px 9px; filter: drop-shadow(0px 0px 1px #000); } } &.transparent { background-repeat: no-repeat; background-size: 100% 100%; .encoded-svg-background(""); } } .theme-colors { .item-inner { display: inline-block; } } } // Context menu .document-menu { @contextMenuBg: rgba(0,0,0,0.9); @modalHairlineColor: rgba(230,230,230,0.9); @modalButtonColor : rgba(200,200,200,0.9); background-color: @contextMenuBg; width: auto; border-radius: 8px; .popover-angle { &:after { background: @contextMenuBg; } } .list-block { font-size: 14px; &:first-child { ul { .hairline-remove(left); border-radius: 7px 0 0 7px; } li:first-child a{ border-radius: 7px 0 0 7px; } } &:last-child { ul { .hairline-remove(right); border-radius: 0 7px 7px 0; } li:last-child a{ border-radius: 0 7px 7px 0; } } &:first-child:last-child { li:first-child:last-child a, ul:first-child:last-child { border-radius: 7px; } } .item-link { display: inline-block; html:not(.watch-active-state) &:active, &.active-state { //.transition(0ms); background-color: #d9d9d9; .item-inner { .hairline-color(right, transparent); } } &.list-button { color: @white; .hairline(right, @modalHairlineColor); line-height: 36px; } } // List items li { display: inline-block; } // Last-childs li { &:last-child { .list-button { .hairline-remove(right); } } &:last-child, &:last-child li:last-child { .item-inner { .hairline-remove(right); } } li:last-child, &:last-child li { .item-inner { .hairline(right, @modalHairlineColor); } } } .no-hairlines(); .no-hairlines-between() } } // Encoded SVG Background .encoded-svg-mask(@svg) { @url: `encodeURIComponent(@{svg})`; background-color: @themeColor; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}"); } // Icons i.icon { &.icon-search { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-burger { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-edit { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-undo { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-redo { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-reader { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-download { width: 22px; height: 28px; .encoded-svg-background(''); } &.icon-info { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-plus { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-settings { width: 24px; height: 24px; .encoded-svg-background(''); } &.icon-about { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-help { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-versions { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-text-additional { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-text-color { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-text-selection { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-bullets { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-numbers { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-linespacing { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-text-align-center { width: 22px; height: 22px; .encoded-svg-mask(''); } &.icon-text-align-jast { width: 22px; height: 22px; .encoded-svg-mask(''); } &.icon-text-align-left { width: 22px; height: 22px; .encoded-svg-mask(''); } &.icon-text-align-right { width: 22px; height: 22px; .encoded-svg-mask(''); } &.icon-de-indent { width: 22px; height: 22px; .encoded-svg-mask(''); } &.icon-in-indent { width: 22px; height: 22px; .encoded-svg-mask(''); } &.icon-prev { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-next { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-table-add-column-left { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-table-add-column-right { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-table-add-row-above { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-table-add-row-below { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-table-remove-column { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-table-remove-row { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-expand-down { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-pagebreak { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-sectionbreak { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-stringbreak { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-pagenumber { width: 22px; height: 22px; .encoded-svg-background(''); } &.icon-link { width: 22px; height: 22px; .encoded-svg-background(''); } }