web-apps/apps/presentationeditor/mobile/resources/less/app-material.less

@import url('../../../../../vendor/framework7/src/less/material/_mixins.less');
@import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less');

// Colors
@themeColor: #aa5252; // (223,103,55)
@themeColorLight: #f1d1d1;
@navBarIconColor: #fff;

@import url('../../../../../vendor/framework7/src/less/material/intro.less');
@import url('../../../../../vendor/framework7/src/less/material/grid.less');
@import url('../../../../../vendor/framework7/src/less/material/views.less');
@import url('../../../../../vendor/framework7/src/less/material/pages.less');
@import url('../../../../../vendor/framework7/src/less/material/toolbars.less');
@import url('../../../../../vendor/framework7/src/less/material/toolbars-pages.less');
@import url('../../../../../vendor/framework7/src/less/material/searchbar.less');
@import url('../../../../../vendor/framework7/src/less/material/messagebar.less');
@import url('../../../../../vendor/framework7/src/less/material/icons.less');
@import url('../../../../../vendor/framework7/src/less/material/badges.less');
//@import url('../../../../../vendor/framework7/src/less/material/chips.less');
@import url('../../../../../vendor/framework7/src/less/material/content-block.less');
@import url('../../../../../vendor/framework7/src/less/material/lists.less');
//@import url('../../../../../vendor/framework7/src/less/material/contacts.less');
@import url('../../../../../vendor/framework7/src/less/material/forms.less');
@import url('../../../../../vendor/framework7/src/less/material/floating-button.less');
//@import url('../../../../../vendor/framework7/src/less/material/accordion.less');
//@import url('../../../../../vendor/framework7/src/less/material/cards.less');
@import url('../../../../../vendor/framework7/src/less/material/modals.less');
@import url('../../../../../vendor/framework7/src/less/material/panels.less');
//@import url('../../../../../vendor/framework7/src/less/material/lazy-load.less');
@import url('../../../../../vendor/framework7/src/less/material/tabs.less');
@import url('../../../../../vendor/framework7/src/less/material/messages.less');
@import url('../../../../../vendor/framework7/src/less/material/statusbar.less');
@import url('../../../../../vendor/framework7/src/less/material/preloader.less');
@import url('../../../../../vendor/framework7/src/less/material/progressbar.less');
//@import url('../../../../../vendor/framework7/src/less/material/pull-to-refresh.less');
//@import url('../../../../../vendor/framework7/src/less/material/infinite-scroll.less');
//@import url('../../../../../vendor/framework7/src/less/material/autocomplete.less');
//@import url('../../../../../vendor/framework7/src/less/material/swiper.less');
//@import url('../../../../../vendor/framework7/src/less/material/photo-browser.less');
@import url('../../../../../vendor/framework7/src/less/material/picker.less');
//@import url('../../../../../vendor/framework7/src/less/material/calendar.less');
@import url('../../../../../vendor/framework7/src/less/material/notifications.less');
//@import url('../../../../../vendor/framework7/src/less/material/login-screen.less');
@import url('../../../../../vendor/framework7/src/less/material/ripple.less');
@import url('../../../../../vendor/framework7/src/less/material/disabled.less');


@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');
@import url('../../../../common/mobile/resources/less/material/_color-schema.less');
@import url('../../../../common/mobile/resources/less/material/_collaboration.less');

@import url('material/_search.less');
@import url('material/_icons.less');
@import url('../../../../common/mobile/resources/less/material/_sailfish_fix.less');

// Top offset

#editor_sdk {
  position: absolute;
  left: 0;
  right: 0;
  top: @toolbarSize;
  bottom: 0;
  height: auto;
  overflow: hidden;
  .transition(300ms);
}
#editor_sdk.with-logo {
  top: 80px;
}


// Disable text select
* {
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  user-select:text;
}

// Main Toolbar
#editor-navbar.navbar .right {
  padding-right: 4px;
}
#editor-navbar.navbar .right a.link,
#editor-navbar.navbar .left a.link {
  padding: 0 13px;
}

.logo-navbar {
  height: 80px;
  .navbar-inner {
    top: 24px;
    height: 56px;
  }
}

// Add Container

#add-table,
#add-shape {
  .page {
    background-color: #fff;
  }
}
.container-add {
  .categories {
    i.icon {
      opacity: 0.5;
    }
    .active {
      i.icon {
        opacity: 1;
      }
    }
  }
}

// Table styles

.table-styles {
  .row {
    &, li {
      margin-bottom: 12px;
    }
  }

  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;
    }
  }
}

// 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 {
      //
    }

    .thumb {
      width: 100%;
      height: 100%;
      background-color: @white;
      background-size: cover;

      label {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 34%;
      }
    }
  }
}

// Slide layout

.slide-layout {
  .row {
      margin-bottom: 12px;
  }

  li {
    margin: 0;
    padding: 1px;

    img {
      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    }
  }
}

// Slide theme

.slide-theme {
  .row {
    margin-top: 14px;
    margin-bottom: 12px;

    div {
      margin: 0;
      padding: 3px;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
      width: 85px;
      height: 38px;
    }
  }
  .item-theme {
    background-image: url('../../../../../../sdkjs/common/Images/themes_thumbnail.png');
  }
}

// Charts

.chart-types {
  li {
    width: 60px;
    height: 60px;
    margin: 6px;

    .thumb {
      width: 100%;
      height: 100%;
      background-size: contain;
    }
  }
}

.modal.modal-in {
  max-height: 100%;
  overflow: auto;
}

// Skeleton of document

.doc-placeholder {
  background: #f5f5f5;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  position: absolute;
  padding-top: 22px;

  .slide-h {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    width: 90%;
    height: 100%;
    margin: 0 auto;
  }

  .slide-v {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-bottom: 56.1333%;
  }

  .slide-container {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fbfbfb;
    border: 1px solid #dfdfdf;

    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
    -moz-animation: flickerAnimation 2s infinite ease-in-out;
    -o-animation: flickerAnimation 2s infinite ease-in-out;
    animation: flickerAnimation 2s infinite ease-in-out;

    > .line {
      height: 20%;
      margin: 0 120px;
      border-radius: 6px;
      background: #f5f5f5;

      &:nth-child(1) {
        height: 30%;
        margin: 10% 80px 0;
      }

      &.empty {
        background: transparent;
      }
    }
  }
}

// Macros settings
.page-macros-settings[data-page="settings-macros-view"] {
  .list-block {
    li.media-item {
      .item-title {
        font-weight: normal;
      }
      .item-subtitle {
        font-size: 14px;
        color: @gray;
      }
    }
  }
}