web-apps/apps/spreadsheeteditor/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: #40865c; // (79,158,79)
@themeColorLight: #c7e8d1;
@navBarIconColor: #fff;

@appToolbarHeight: @navbarSize;

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

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

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

@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('material/_search.less');
@import url('material/_icons.less');
@import url('../../../../common/mobile/resources/less/material/_sailfish_fix.less');
@import url('app-common');
@import url('celleditor');
@import url('statusbar');
@import url('sailfish-fix');

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

// Add Container

#add-table,
#add-shape {
  .page {
    background-color: #fff;
  }
}

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

// Charts

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

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

// Cell style
.cell-styles.dataview {
  .active:after {
    right: 2px;
    bottom: 2px;
  }

  .row {
    padding: 5px 0;

    li {
      border: 1px solid @listBlockBorderColor;
      html.pixel-ratio-2 & {
        border: 0.5px solid @listBlockBorderColor;
      }
      html.pixel-ratio-3 & {
        border: 0.33px solid @listBlockBorderColor;
      }
      padding: 2px;

      .thumb {
        width: 112px;
        height: 38px;
        background-size: contain;
      }
    }
  }
}

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

//Edit users
@initialEditUser: #373737;

#user-list {
  .item-content {
    padding-left: 0;
  }
  .item-inner {
    justify-content: flex-start;
    padding-left: 15px;
  }
  .length {
    margin-left: 4px;
  }
  .color {
    min-width: 40px;
    min-height: 40px;
    margin-right: 20px;
    text-align: center;
    border-radius: 50px;
    line-height: 40px;
    color: @initialEditUser;
    font-weight: 400;
  }
  ul:before {
    content: none;
  }
}

//Filter Options
.filter-root-view {
  .list-center .item-title {
    text-align: center;
    width: 100%;
  }
  #btn-delete-filter {
    color: @red;
  }
}

//Regional Settings
[data-page="regional-settings-view"] {
  .list-block .item-title-row {
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 100%;
  }
  .item-title {
    font-weight: 400;
    white-space: normal;
    order: 1;
  }
}

@common-image-path:         "../../../../common/mobile/resources/img";
@img-flags-width: 48px;
.icon.lang-flag {
  order: 2;
  width: 16px;
  height: 12px;
  background-image: data-uri(%("%s",'@{common-image-path}/controls/flags.png'));
  background-repeat: no-repeat;
  background-size: auto;

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx),
  only screen and (min-resolution: 192dpi) {
    background-image: data-uri(%("%s",'@{common-image-path}/controls/flags@2x.png'));
    background-size:  @img-flags-width auto;
  }
}

.lang-flag {
  background-position: -16px -108px;

  &.ca, &.ca-ES                     {background-position: 0          0;}
  &.cs, &.cs-CZ                     {background-position: -16px      0;}
  &.da, &.da-DK                     {background-position: -32px      0;}
  &.de, &.de-DE                     {background-position: 0          -12px;}
  &.el, &.el-GR                     {background-position: -16px      -12px;}
  &.en, &.en-US                     {background-position: -32px      -12px;}
  &.fr, &.fr-FR                     {background-position: 0          -24px;}
  &.hu, &.hu-HU                     {background-position: -16px      -24px;}
  &.it, &.it-IT                     {background-position: -32px      -24px;}
  &.ko, &.ko-KR                     {background-position: 0          -36px;}
  &.nl, &.nl-NL                     {background-position: -16px      -36px;}
  &.nb, &.nb-NO, &.nn, &.nn-NO      {background-position: -32px      -36px;}
  &.pl, &.pl-PL                     {background-position: 0          -48px;}
  &.pt, &.pt-BR                     {background-position: -16px      -48px;}
  &.ro, &.ro-RO                     {background-position: -32px      -48px;}
  &.ru, &.ru-RU                     {background-position: 0          -60px;}
  &.sv, &.sv-SE                     {background-position: -32px      -60px;}
  &.tr, &.tr-TR                     {background-position: 0          -72px;}
  &.uk, &.uk-UA                     {background-position: -16px      -72px;}
  &.lv, &.lv-LV                     {background-position: -32px      -72px;}
  &.lt, &.lt-LT                     {background-position: 0          -84px;}
  &.vi, &.vi-VN                     {background-position: -16px      -84px;}
  &.de-CH                           {background-position: -32px      -84px;}
  &.pt-PT                           {background-position: -16px      -96px;}
  &.de-AT                           {background-position: -32px      -96px;}
  &.es, &.es-ES                     {background-position: 0          -108px;}
  &.en-GB                           {background-position: -32px      -108px;}
  &.en-AU                           {background-position: 0          -120px;}
  &.az-Latn-AZ                      {background-position: -16px      -120px;}
  &.id, &.id-ID                     {background-position: -32px      -120px;}

  &.bg, &.bg-BG                     {background-position: 0          -132px;}
  &.ca-ES-valencia                  {background-position: -16px      -132px;}
  &.en-CA                           {background-position: -32px      -132px;}
  &.en-ZA                           {background-position: 0          -144px;}
  &.eu, &.eu-ES                     {background-position: -16px      -144px;}
  &.gl, &.gl-ES                     {background-position: -32px      -144px;}
  &.hr, &.hr-HR                     {background-position: 0          -156px;}
  &.lb, &.lb-LU                     {background-position: -16px      -156px;}
  &.mn, &.mn-MN                     {background-position: -32px      -156px;}
  &.sl, &.sl-SI                     {background-position: 0          -168px;}
  &.sr, &.sr-Cyrl-RS, &.sr-Latn-RS  {background-position: -16px      -168px;}
  &.sk, &.sk-SK                     {background-position: -32px      -168px;}
  &.kk, &.kk-KZ                     {background-position: 0          -180px;}
  &.fi, &.fi-FI, &.sv-FI            {background-position: -16px      -180px;}
  &.zh, &.zh-CN                     {background-position: -32px      -180px;}
  &.ja, &.ja-JP                     {background-position: 0          -192px;}
  &.es-MX                           {background-position: -16px      -192px;}
}

// Skeleton of workbook

.doc-placeholder {
  background: #fbfbfb;
  width: 100%;
  height: 100%;
  border: 1px solid #dfdfdf;
  white-space: nowrap;
  padding-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  > .columns {
    width: 100%;
    height: 100%;
    display: inline-block;
    background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0,
    linear-gradient(rgba(0,255,0,0) 19px, #d5d5d5 20px) 0 0,
    linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x;
    background-size: 80px 20px;

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

    &:first-child {
      background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0;
      background-size: 20px 20px;
      width: 35px;
    }
  }
}