diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less new file mode 100644 index 000000000..9e206f133 --- /dev/null +++ b/apps/common/mobile/resources/less/_mixins.less @@ -0,0 +1,6 @@ +// 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}"); +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_about.less b/apps/common/mobile/resources/less/ios/_about.less new file mode 100644 index 000000000..fd808f139 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_about.less @@ -0,0 +1,45 @@ +// 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; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_button.less b/apps/common/mobile/resources/less/ios/_button.less new file mode 100644 index 000000000..da6c4d105 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_button.less @@ -0,0 +1,8 @@ +// Active button icon color +.button { + &.active { + i.icon { + background-color: #fff; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less new file mode 100644 index 000000000..735003d49 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_color-palette.less @@ -0,0 +1,48 @@ +// 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; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_container.less b/apps/common/mobile/resources/less/ios/_container.less new file mode 100644 index 000000000..48bfa040b --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_container.less @@ -0,0 +1,76 @@ +// Container +.phone.ios { + .container-edit { + .navbar { + .hairline(top, @toolbarBorderColor); + } + + .page-content { + .list-block:first-child { + margin-top: -1px; + } + } + } +} + +.container-edit, +.container-add, +.container-settings { + &.popover { + width: 360px; + } + + &.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%; + + .button { + padding: 0 1px; + } + } + } + .popover-inner { + height: 400px; + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_contextmenu.less b/apps/common/mobile/resources/less/ios/_contextmenu.less new file mode 100644 index 000000000..39c726203 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_contextmenu.less @@ -0,0 +1,88 @@ +// 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() + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_dataview.less b/apps/common/mobile/resources/less/ios/_dataview.less new file mode 100644 index 000000000..3c4497719 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_dataview.less @@ -0,0 +1,34 @@ +// Data view + +.dataview { + &.page-content { + background: @white; + } + + .row { + justify-content: space-around; + } + + 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; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_listview.less b/apps/common/mobile/resources/less/ios/_listview.less new file mode 100644 index 000000000..922c86558 --- /dev/null +++ b/apps/common/mobile/resources/less/ios/_listview.less @@ -0,0 +1,86 @@ +// 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; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_about.less b/apps/common/mobile/resources/less/material/_about.less new file mode 100644 index 000000000..3ed030ff3 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_about.less @@ -0,0 +1,45 @@ +// 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: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat; + + @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'); + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_button.less b/apps/common/mobile/resources/less/material/_button.less new file mode 100644 index 000000000..f680dcb57 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_button.less @@ -0,0 +1,9 @@ +// Active button icon color + +.button { + &.active { + i.icon { + background-color: #fff; + } + } +} diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less new file mode 100644 index 000000000..a85ccca82 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_color-palette.less @@ -0,0 +1,48 @@ +// Color palette + +.color-palette { + a { + flex-grow: 1; + position: relative; + min-width: 10px; + min-height: 26px; + margin: 1px 1px 0 0; + border: 1px 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; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_container.less b/apps/common/mobile/resources/less/material/_container.less new file mode 100644 index 000000000..ae3210438 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_container.less @@ -0,0 +1,72 @@ +// Container + +.phone.android { + .container-edit { + + .page-content { + .list-block:first-child { + margin-top: -1px; + } + } + } +} + +.container-edit, +.container-add, +.container-settings { + &.popover { + width: 360px; + } + + &.popup, + &.popover { + .list-block { + + ul { + border-radius: 0; + background: #fff; + } + + &:first-child { + margin-top: 0; + + li:first-child a { + border-radius: 0; + } + } + } + + &, + .popover-inner { + > .content-block { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + } + } + + .popover-view { + border-radius: 3px; + + > .pages { + border-radius: 3px; + } + } + } + + .categories { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + + > .toolbar { + top: 0; + height: 100%; + } + } + .popover-inner { + height: 400px; + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_contextmenu.less b/apps/common/mobile/resources/less/material/_contextmenu.less new file mode 100644 index 000000000..906bb1911 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_contextmenu.less @@ -0,0 +1,20 @@ +// Context menu + +.document-menu { + width: auto; + line-height: 1 !important; + + .popover-inner { + overflow: hidden; + } + + .list-block { + ul { + height: 48px; + } + + li { + display: inline-block; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_dataview.less b/apps/common/mobile/resources/less/material/_dataview.less new file mode 100644 index 000000000..570a14650 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_dataview.less @@ -0,0 +1,31 @@ +// Data view + +.dataview { + .row { + justify-content: space-around; + } + + ul { + padding: 0 10px; + list-style: none; + justify-content: space-around; + + li { + display: inline-block; + } + } + + .active { + position: relative; + + &::after { + content: ''; + width: 20px; + height: 20px; + background-color: red; + position: absolute; + right: 0; + bottom: 0; + } + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_listview.less b/apps/common/mobile/resources/less/material/_listview.less new file mode 100644 index 000000000..a95e80645 --- /dev/null +++ b/apps/common/mobile/resources/less/material/_listview.less @@ -0,0 +1,68 @@ +// List extend + +.item-content{ + .item-after { + &.splitter { + label { + color: #000; + margin:0 5px; + line-height: 36px; + } + + .button { + min-width: 40px; + margin-left: 0; + } + } + + &.value { + display: block; + min-width: 50px; + color: @black; + margin-left: 10px; + text-align: right; + } + } + + &.buttons { + .item-inner { + padding-top: 0; + padding-bottom: 0; + + > .row { + width: 100%; + + .button { + flex: 1; + font-size: 17px; + margin-left: 5px; + + &:first-child { + margin-left: 0; + } + + &.active { + color: #fff; + background-color: @themeColor; + } + } + } + } + } + + .color-preview { + width: 30px; + height: 30px; + border-radius: 16px; + margin-top: -3px; + border: 0.5px solid gray; + } +} + +.item-link { + &.no-indicator { + .item-inner { + background-image: none; + } + } +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css index 8675686bb..0ccd17873 100644 --- a/apps/documenteditor/mobile/resources/css/app-ios.css +++ b/apps/documenteditor/mobile/resources/css/app-ios.css @@ -5834,13 +5834,6 @@ html:not(.phone) #editor-navbar.navbar .right a + a, html:not(.phone) #editor-navbar.navbar .left a + a { margin-left: 10px; } -.searchbar.document { - background: #e4e4e6; -} -.searchbar.document .buttons-row { - margin-left: 10px; - margin-right: 5px; -} .phone.ios .container-edit .navbar:before { content: ''; position: absolute; @@ -5867,9 +5860,6 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before { .phone.ios .container-edit .page-content .list-block:first-child { margin-top: -1px; } -.container-edit.popup, -.container-add.popup, -.container-settings.popup, .container-edit.popover, .container-add.popover, .container-settings.popover { @@ -5960,6 +5950,31 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before { .container-settings .popover-inner { height: 400px; } +.dataview.page-content { + background: #ffffff; +} +.dataview .row { + justify-content: space-around; +} +.dataview ul { + padding: 0 10px; + list-style: none; +} +.dataview ul li { + display: inline-block; +} +.dataview .active { + position: relative; +} +.dataview .active::after { + content: ''; + width: 20px; + height: 20px; + background-color: red; + position: absolute; + right: 0; + bottom: 0; +} .item-content .item-after.splitter { color: #000; } @@ -6025,173 +6040,9 @@ html.pixel-ratio-3 .item-content i .color-preview { .item-link.no-indicator .item-inner { background-image: none; } -.about .page-content { - text-align: center; -} -.about .content-block:first-child { - margin: 15px 0; -} -.about .content-block { - margin: 0 auto 15px; -} -.about .content-block a { - color: #000; -} -.about h3 { - font-weight: normal; - margin: 0; -} -.about h3.vendor { - color: #000; - font-weight: bold; - margin-top: 15px; -} -.about p > label { - margin-right: 5px; -} -.about .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) { - .about .logo { - background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); - background-size: auto; - } -} -#add-table .page, -#add-shape .page { - background-color: #fff; -} -.dataview.page-content { - background: #ffffff; -} -.dataview .row { - justify-content: space-around; -} -.dataview ul { - padding: 0 10px; - list-style: none; -} -.dataview ul li { - display: inline-block; -} -.dataview .active { - position: relative; -} -.dataview .active::after { - content: ''; - width: 20px; - height: 20px; - background-color: red; - position: absolute; - right: 0; - bottom: 0; -} -.table-styles .row, -.table-styles .row li { - margin-bottom: 12px; -} -.table-styles li { - margin: 0; - padding: 1px; -} -.table-styles li img { - width: 70px; - height: 50px; -} -.shapes li { - width: 70px; - height: 70px; - margin: 0 1px; -} -.shapes li .thumb { - width: 100%; - height: 100%; - background-color: #4066D7; -} -.chart-types li { - width: 60px; - height: 60px; - margin: 6px; -} -.chart-types li .thumb { - width: 100%; - height: 100%; - background-size: contain; -} -.bullets ul, -.numbers ul { - margin-top: 10px; -} -.bullets li, -.numbers li { - width: 70px; - height: 70px; - margin-right: 1px; - border: 1px solid #c4c4c4; -} -html.pixel-ratio-2 .bullets li, -html.pixel-ratio-2 .numbers li { - border: 0.5px solid #c4c4c4; -} -html.pixel-ratio-3 .bullets li, -html.pixel-ratio-3 .numbers li { - border: 0.33px solid #c4c4c4; -} -.bullets li .thumb, -.numbers li .thumb { - width: 100%; - height: 100%; - background-color: #ffffff; - background-size: cover; -} -.bullets li .thumb label, -.numbers li .thumb label { - width: 100%; - text-align: center; - position: absolute; - top: 34%; -} .button.active i.icon { background-color: #fff; } -.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 .color-palette a { - border: 0.5px solid #c4c4c4; -} -html.pixel-ratio-3 .color-palette a { - border: 0.33px solid #c4c4c4; -} -.color-palette a.active:after { - content: ' '; - position: absolute; - left: 50%; - margin-left: -6px; - top: 50%; - margin-top: -4px; - width: 12px; - height: 9px; - background: no-repeat center; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23fff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E"); - -webkit-background-size: 12px 9px; - background-size: 12px 9px; - filter: drop-shadow(0px 0px 1px #000); -} -.color-palette a.transparent { - background-repeat: no-repeat; - background-size: 100% 100%; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2022%2022'%20xml%3Aspace%3D'preserve'%3E%3Cline%20stroke%3D'%23ff0000'%20stroke-linecap%3D'undefined'%20stroke-linejoin%3D'undefined'%20id%3D'svg_1'%20y2%3D'0'%20x2%3D'22'%20y1%3D'22'%20x1%3D'0'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); -} -.color-palette .theme-colors .item-inner { - display: inline-block; -} .document-menu { background-color: rgba(0, 0, 0, 0.9); width: auto; @@ -6316,6 +6167,137 @@ html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after .document-menu .list-block.no-hairlines-between .list-group-title:after { display: none; } +.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 .color-palette a { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .color-palette a { + border: 0.33px solid #c4c4c4; +} +.color-palette a.active:after { + content: ' '; + position: absolute; + left: 50%; + margin-left: -6px; + top: 50%; + margin-top: -4px; + width: 12px; + height: 9px; + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23fff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 12px 9px; + background-size: 12px 9px; + filter: drop-shadow(0px 0px 1px #000); +} +.color-palette a.transparent { + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2022%2022'%20xml%3Aspace%3D'preserve'%3E%3Cline%20stroke%3D'%23ff0000'%20stroke-linecap%3D'undefined'%20stroke-linejoin%3D'undefined'%20id%3D'svg_1'%20y2%3D'0'%20x2%3D'22'%20y1%3D'22'%20x1%3D'0'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +.color-palette .theme-colors .item-inner { + display: inline-block; +} +.about .page-content { + text-align: center; +} +.about .content-block:first-child { + margin: 15px 0; +} +.about .content-block { + margin: 0 auto 15px; +} +.about .content-block a { + color: #000; +} +.about h3 { + font-weight: normal; + margin: 0; +} +.about h3.vendor { + color: #000; + font-weight: bold; + margin-top: 15px; +} +.about p > label { + margin-right: 5px; +} +.about .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) { + .about .logo { + background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); + background-size: auto; + } +} +.tablet .searchbar.document.replace .center .searchbar-input:first-child { + margin-right: 10px; +} +.tablet .searchbar.document.replace .center .replace { + display: block; +} +.tablet .searchbar.document.replace .right .replace { + display: flex; + margin: 0 10px; +} +.tablet .searchbar.document .center { + width: 100%; +} +.tablet .searchbar.document .center .replace { + display: none; +} +.tablet .searchbar.document .right .prev { + margin-left: 0; +} +.tablet .searchbar.document .right .replace { + display: none; +} +.phone .searchbar.document.replace { + height: 88px; +} +.phone .searchbar.document.replace .left { + margin-top: -44px; +} +.phone .searchbar.document.replace .center .searchbar-input { + margin: 8px 0; +} +.phone .searchbar.document.replace .center .replace { + display: block; +} +.phone .searchbar.document.replace .right .replace { + display: flex; +} +.phone .searchbar.document .left, +.phone .searchbar.document .center, +.phone .searchbar.document .right { + flex-direction: column; +} +.phone .searchbar.document .left { + min-width: 22px; + max-width: 22px; +} +.phone .searchbar.document .center { + width: 100%; +} +.phone .searchbar.document .center .replace { + display: none; +} +.phone .searchbar.document .right > p { + margin: 0; +} +.phone .searchbar.document .right .replace { + display: none; +} +.searchbar.document { + background: #e4e4e6; +} i.icon.icon-search { width: 22px; height: 22px; @@ -6517,3 +6499,72 @@ i.icon.icon-link { height: 22px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.4%2C9.8c0%2C0-2.1-0.1-3.8%2C1.2c-2.8%2C2-3.3%2C4.3-3.3%2C4.3s1.6-1.7%2C3.5-2.5c1.7-0.7%2C3.7-0.4%2C3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C21%2C5.5%2C16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4.1-9-9C2%2C6%2C6%2C2%2C11%2C2s9%2C4.1%2C9%2C9C20%2C16%2C16%2C20%2C11%2C20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } +#add-table .page, +#add-shape .page { + background-color: #fff; +} +.table-styles .row, +.table-styles .row li { + margin-bottom: 12px; +} +.table-styles li { + margin: 0; + padding: 1px; +} +.table-styles li img { + width: 70px; + height: 50px; +} +.shapes li { + width: 70px; + height: 70px; + margin: 0 1px; +} +.shapes li .thumb { + width: 100%; + height: 100%; + background-color: #4066D7; +} +.chart-types li { + width: 60px; + height: 60px; + margin: 6px; +} +.chart-types li .thumb { + width: 100%; + height: 100%; + background-size: contain; +} +.bullets ul, +.numbers ul { + margin-top: 10px; +} +.bullets li, +.numbers li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .bullets li, +html.pixel-ratio-2 .numbers li { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .bullets li, +html.pixel-ratio-3 .numbers li { + border: 0.33px solid #c4c4c4; +} +.bullets li .thumb, +.numbers li .thumb { + width: 100%; + height: 100%; + background-color: #ffffff; + background-size: cover; +} +.bullets li .thumb label, +.numbers li .thumb label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; +} diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css index f4affec33..dad5c542e 100644 --- a/apps/documenteditor/mobile/resources/css/app-material.css +++ b/apps/documenteditor/mobile/resources/css/app-material.css @@ -5631,9 +5631,6 @@ a.item-link, .phone.android .container-edit .page-content .list-block:first-child { margin-top: -1px; } -.container-edit.popup, -.container-add.popup, -.container-settings.popup, .container-edit.popover, .container-add.popover, .container-settings.popover { @@ -5716,6 +5713,29 @@ a.item-link, .container-settings .popover-inner { height: 400px; } +.dataview .row { + justify-content: space-around; +} +.dataview ul { + padding: 0 10px; + list-style: none; + justify-content: space-around; +} +.dataview ul li { + display: inline-block; +} +.dataview .active { + position: relative; +} +.dataview .active::after { + content: ''; + width: 20px; + height: 20px; + background-color: red; + position: absolute; + right: 0; + bottom: 0; +} .item-content .item-after.splitter label { color: #000; margin: 0 5px; @@ -5761,130 +5781,22 @@ a.item-link, .item-link.no-indicator .item-inner { background-image: none; } -.about .page-content { - text-align: center; -} -.about .content-block:first-child { - margin: 15px 0; -} -.about .content-block { - margin: 0 auto 15px; -} -.about .content-block a { - color: #000; -} -.about h3 { - font-weight: normal; - margin: 0; -} -.about h3.vendor { - color: #000; - font-weight: bold; - margin-top: 15px; -} -.about p > label { - margin-right: 5px; -} -.about .logo { - background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat; -} -@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { - .about .logo { - background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); - } -} -#add-table .page, -#add-shape .page { +.button.active i.icon { background-color: #fff; } -.dataview .row { - justify-content: space-around; +.document-menu { + width: auto; + line-height: 1 !important; } -.dataview ul { - padding: 0 10px; - list-style: none; - justify-content: space-around; +.document-menu .popover-inner { + overflow: hidden; } -.dataview ul li { +.document-menu .list-block ul { + height: 48px; +} +.document-menu .list-block li { display: inline-block; } -.dataview .active { - position: relative; -} -.dataview .active::after { - content: ''; - width: 20px; - height: 20px; - background-color: red; - position: absolute; - right: 0; - bottom: 0; -} -.table-styles .row, -.table-styles .row li { - margin-bottom: 12px; -} -.table-styles li { - margin: 0; - padding: 1px; -} -.table-styles li img { - width: 70px; - height: 50px; -} -.shapes li { - width: 70px; - height: 70px; - margin: 0 1px; -} -.shapes li .thumb { - width: 100%; - height: 100%; - background-color: #5a7dc9; -} -.chart-types li { - width: 60px; - height: 60px; - margin: 6px; -} -.chart-types li .thumb { - width: 100%; - height: 100%; - background-size: contain; -} -.bullets ul, -.numbers ul { - margin-top: 10px; -} -.bullets li, -.numbers li { - width: 70px; - height: 70px; - margin-right: 1px; - border: 1px solid #c4c4c4; -} -html.pixel-ratio-2 .bullets li, -html.pixel-ratio-2 .numbers li { - border: 0.5px solid #c4c4c4; -} -html.pixel-ratio-3 .bullets li, -html.pixel-ratio-3 .numbers li { - border: 0.33px solid #c4c4c4; -} -.bullets li .thumb, -.numbers li .thumb { - width: 100%; - height: 100%; - background-color: #ffffff; - background-size: cover; -} -.bullets li .thumb label, -.numbers li .thumb label { - width: 100%; - text-align: center; - position: absolute; - top: 34%; -} .color-palette a { flex-grow: 1; position: relative; @@ -5922,21 +5834,37 @@ html.pixel-ratio-3 .color-palette a { .color-palette .theme-colors .item-inner { display: inline-block; } -.document-menu { - width: auto; - line-height: 1 !important; +.about .page-content { + text-align: center; } -.document-menu .popover-inner { - overflow: hidden; +.about .content-block:first-child { + margin: 15px 0; } -.document-menu .list-block ul { - height: 48px; +.about .content-block { + margin: 0 auto 15px; } -.document-menu .list-block li { - display: inline-block; +.about .content-block a { + color: #000; } -.button.active i.icon { - background-color: #fff; +.about h3 { + font-weight: normal; + margin: 0; +} +.about h3.vendor { + color: #000; + font-weight: bold; + margin-top: 15px; +} +.about p > label { + margin-right: 5px; +} +.about .logo { + background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { + .about .logo { + background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); + } } i.icon.icon-expand-up { width: 17px; @@ -6129,3 +6057,72 @@ i.icon.icon-link { height: 22px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } +#add-table .page, +#add-shape .page { + background-color: #fff; +} +.table-styles .row, +.table-styles .row li { + margin-bottom: 12px; +} +.table-styles li { + margin: 0; + padding: 1px; +} +.table-styles li img { + width: 70px; + height: 50px; +} +.shapes li { + width: 70px; + height: 70px; + margin: 0 1px; +} +.shapes li .thumb { + width: 100%; + height: 100%; + background-color: #5a7dc9; +} +.chart-types li { + width: 60px; + height: 60px; + margin: 6px; +} +.chart-types li .thumb { + width: 100%; + height: 100%; + background-size: contain; +} +.bullets ul, +.numbers ul { + margin-top: 10px; +} +.bullets li, +.numbers li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .bullets li, +html.pixel-ratio-2 .numbers li { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .bullets li, +html.pixel-ratio-3 .numbers li { + border: 0.33px solid #c4c4c4; +} +.bullets li .thumb, +.numbers li .thumb { + width: 100%; + height: 100%; + background-color: #ffffff; + background-size: cover; +} +.bullets li .thumb label, +.numbers li .thumb label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; +} diff --git a/apps/documenteditor/mobile/resources/less/app-ios.less b/apps/documenteditor/mobile/resources/less/app-ios.less index b22647010..3af65d20e 100644 --- a/apps/documenteditor/mobile/resources/less/app-ios.less +++ b/apps/documenteditor/mobile/resources/less/app-ios.less @@ -51,222 +51,17 @@ } } -// Search -.searchbar.document { - background: lighten(@searchbarBg, 10%); +@import url('../../../../common/mobile/resources/less/_mixins.less'); +@import url('../../../../common/mobile/resources/less/ios/_container.less'); +@import url('../../../../common/mobile/resources/less/ios/_dataview.less'); +@import url('../../../../common/mobile/resources/less/ios/_listview.less'); +@import url('../../../../common/mobile/resources/less/ios/_button.less'); +@import url('../../../../common/mobile/resources/less/ios/_contextmenu.less'); +@import url('../../../../common/mobile/resources/less/ios/_color-palette.less'); +@import url('../../../../common/mobile/resources/less/ios/_about.less'); - .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 { - width: 360px; - - .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%; - - .button { - padding: 0 1px; - } - } - } - .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; - } - } -} +@import url('ios/_search.less'); +@import url('ios/_icons.less'); // Add Container @@ -277,41 +72,6 @@ } } -// Data view - -.dataview { - &.page-content { - background: @white; - } - - .row { - justify-content: space-around; - } - - 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 { @@ -402,357 +162,4 @@ } } } -} - -// 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(''); - } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less index bafaac01f..595267ff8 100644 --- a/apps/documenteditor/mobile/resources/less/app-material.less +++ b/apps/documenteditor/mobile/resources/less/app-material.less @@ -44,189 +44,17 @@ @import url('../../../../../vendor/framework7/src/less/material/disabled.less'); -// Edit container -.phone.android { - .container-edit { +@import url('../../../../common/mobile/resources/less/_mixins.less'); +@import url('../../../../common/mobile/resources/less/material/_container.less'); +@import url('../../../../common/mobile/resources/less/material/_dataview.less'); +@import url('../../../../common/mobile/resources/less/material/_listview.less'); +@import url('../../../../common/mobile/resources/less/material/_button.less'); +@import url('../../../../common/mobile/resources/less/material/_contextmenu.less'); +@import url('../../../../common/mobile/resources/less/material/_color-palette.less'); +@import url('../../../../common/mobile/resources/less/material/_about.less'); - .page-content { - .list-block:first-child { - margin-top: -1px; - } - } - } -} - -// Edit container -.container-edit, -.container-add, -.container-settings { - &.popup, - &.popover { - width: 360px; - - .list-block { - - ul { - border-radius: 0; - background: #fff; - } - - &:first-child { - margin-top: 0; - - li:first-child a { - border-radius: 0; - } - } - } - - &, - .popover-inner { - > .content-block { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - } - } - - .popover-view { - border-radius: 3px; - - > .pages { - border-radius: 3px; - } - } - } - - .categories { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - - > .toolbar { - top: 0; - height: 100%; - } - } - .popover-inner { - height: 400px; - } -} - -// List extend -.item-content{ - .item-after { - &.splitter { - label { - color: #000; - margin:0 5px; - line-height: 36px; - } - - .button { - min-width: 40px; - margin-left: 0; - } - } - - &.value { - display: block; - min-width: 50px; - color: @black; - margin-left: 10px; - text-align: right; - } - } - - &.buttons { - .item-inner { - padding-top: 0; - padding-bottom: 0; - - > .row { - width: 100%; - - .button { - flex: 1; - font-size: 17px; - margin-left: 5px; - - &:first-child { - margin-left: 0; - } - - &.active { - color: #fff; - background-color: @themeColor; - } - } - } - } - } - - .color-preview { - width: 30px; - height: 30px; - border-radius: 16px; - margin-top: -3px; - border: 0.5px solid gray; - } -} - -.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: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat; - - @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'); - } - } -} +@import url('material/_search.less'); +@import url('material/_icons.less'); // Add Container @@ -237,37 +65,6 @@ } } -// Data view - -.dataview { - .row { - justify-content: space-around; - } - - ul { - padding: 0 10px; - list-style: none; - justify-content: space-around; - - 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 { @@ -359,314 +156,3 @@ } } } - -// Color palette - -.color-palette { - a { - flex-grow: 1; - position: relative; - min-width: 10px; - min-height: 26px; - margin: 1px 1px 0 0; - border: 1px 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 { - width: auto; - line-height: 1 !important; - - .popover-inner { - overflow: hidden; - } - - .list-block { - ul { - height: 48px; - } - - li { - display: inline-block; - } - } -} - -// 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}"); -} - -// Active button icon color -.button { - &.active { - i.icon { - background-color: #fff; - } - } -} - -// Icons -i.icon { - &.icon-expand-up { - width: 17px; - height: 17px; - .encoded-svg-background(''); - } - &.icon-expand-down { - width: 17px; - height: 17px; - .encoded-svg-background(''); - } - &.icon-search { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-edit { - 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-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-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-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(''); - } -} - -// Overwrite color for toolbar -.navbar { - i.icon { - &.icon-undo { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-redo { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-search { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-burger { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-plus { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-edit { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-settings { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - &.icon-prev { - width: 20px; - height: 20px; - .encoded-svg-background(''); - } - &.icon-next { - width: 20px; - height: 20px; - .encoded-svg-background(''); - } - &.icon-expand-down { - width: 22px; - height: 22px; - .encoded-svg-background(''); - } - } -} diff --git a/apps/documenteditor/mobile/resources/less/ios/_icons.less b/apps/documenteditor/mobile/resources/less/ios/_icons.less new file mode 100644 index 000000000..9f7395ebc --- /dev/null +++ b/apps/documenteditor/mobile/resources/less/ios/_icons.less @@ -0,0 +1,198 @@ +// 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(''); + } +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/less/ios/_search.less b/apps/documenteditor/mobile/resources/less/ios/_search.less new file mode 100644 index 000000000..f032af5a0 --- /dev/null +++ b/apps/documenteditor/mobile/resources/less/ios/_search.less @@ -0,0 +1,107 @@ +// Search + +.tablet { + // Replace mode + .searchbar.document.replace { + .center { + .searchbar-input:first-child { + margin-right: 10px; + } + + .replace { + display: block; + } + } + + .right { + .replace { + display: flex; + margin: 0 10px; + } + } + } + + // Search mode + .searchbar.document { + .center { + width: 100%; + + .replace { + display: none; + } + } + + .right { + .prev { + margin-left: 0; + } + + .replace { + display: none; + } + } + } +} + +.phone { + // Replace mode + .searchbar.document.replace { + height: 88px; + + .left { + margin-top: -44px; + } + + .center { + .searchbar-input { + margin: 8px 0; + } + + .replace { + display: block; + } + } + + .right { + .replace { + display: flex; + } + } + } + + // Search mode + .searchbar.document { + .left, + .center, + .right { + flex-direction: column; + } + + .left { + min-width: 22px; + max-width: 22px; + } + + .center { + width: 100%; + + .replace { + display: none; + } + } + + .right { + > p { + margin: 0; + } + + .replace { + display: none; + } + } + } +} + +.searchbar.document { + background: lighten(@searchbarBg, 10%); +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/less/material/_icons.less b/apps/documenteditor/mobile/resources/less/material/_icons.less new file mode 100644 index 000000000..321b5376d --- /dev/null +++ b/apps/documenteditor/mobile/resources/less/material/_icons.less @@ -0,0 +1,224 @@ +// Icons +i.icon { + &.icon-expand-up { + width: 17px; + height: 17px; + .encoded-svg-background(''); + } + &.icon-expand-down { + width: 17px; + height: 17px; + .encoded-svg-background(''); + } + &.icon-search { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-edit { + 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-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-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-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(''); + } +} + +// Overwrite color for toolbar +.navbar { + i.icon { + &.icon-undo { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-redo { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-search { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-burger { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-plus { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-edit { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-settings { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-prev { + width: 20px; + height: 20px; + .encoded-svg-background(''); + } + &.icon-next { + width: 20px; + height: 20px; + .encoded-svg-background(''); + } + &.icon-expand-down { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + } +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/resources/less/material/_search.less b/apps/documenteditor/mobile/resources/less/material/_search.less new file mode 100644 index 000000000..e69de29bb