@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('');
}
}