web-apps/apps/spreadsheeteditor/mobile/src/less/app.less

@import '../../../../common/mobile/resources/less/variables.less';
@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/colors-table.less';
@import '../../../../common/mobile/resources/less/colors-table-dark.less';
@import './app.rtl.less';

// @themeColor: #40865c;
@brandColor: var(--brand-cell);

.device-ios {
    --toolbar-background: var(--background-primary, #fff);
    --toolbar-segment: var(--brand-cell, #40865C);
    --toolbar-icons: var(--brand-cell, #40865C);
}
.device-android {
    --toolbar-background: var(--brand-cell, #40865C);

    .theme-type-dark {
        --toolbar-icons: var(--brand-cell, #40865C);
    }
}

@toolbar-background: var(--toolbar-background);
@toolbar-segment: var(--toolbar-segment);
@button-active-opacity: var(--active-opacity-cell);

@import '../../../../common/mobile/resources/less/collaboration.less';
@import '../../../../common/mobile/resources/less/common.less';
@import '../../../../common/mobile/resources/less/common-ios.less';
@import '../../../../common/mobile/resources/less/common-material.less';
@import '../../../../common/mobile/resources/less/icons.less';
@import '../../../../common/mobile/resources/less/dataview.less';
@import '../../../../common/mobile/resources/less/search.less';
@import '../../../../common/mobile/resources/less/contextmenu.less';
@import '../../../../common/mobile/resources/less/comments.less';
@import './app-material.less';
@import './app-ios.less';
@import './icons-ios.less';
@import './icons-material.less';
@import './icons-common.less';
@import './celleditor.less';
@import './statusbar.less';

.page[data-name='home'] {
    .page-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
};

:root {
    --f7-popover-width: 360px;
    //--f7-page-content-extra-padding-top: 37px;
}

.page-function-info {
    &.page-content, .page-content {
        background-color: @background-primary;
    }

    .function-info {
        padding: 0 15px;
        h3 {
            color: @text-normal;
        }
    
        p {
            color: @text-secondary;
        }
    }
}

.username-tip {
    background-color: #ee3525; 
}

// Skeleton of workbook

.doc-placeholder {
    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-subnavbar-offset, 0px));
    overflow: hidden;
    background: #fbfbfb;
    width: 100%;
    height: 100%;
    border: 1px solid #dfdfdf;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    z-index: 6000;

    > .columns {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: inline-block;
        background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0,
        linear-gradient(rgba(0,0,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: 25px;
        }
    }
}

.item-input-wrap {
    input[type = number] {
        -moz-appearance: textfield;
    }
}

.move-sheet {
    .swipe-container {
      display: flex;
      justify-content: center;
      height: 40px;
      background-color: @background-primary;
        .icon-swipe {
        margin-top: 8px;
        width: 40px;
        height: 4px;
        background: @background-menu-divider;
        border-radius: 2px;
        }
    }
    .navbar {
        top: -1px;
    }
}

.actions-move-sheet {
    background-color: @background-secondary;
}

// All-list sheet
.all-list {
    --f7-popover-width: 190px;
    .item-checkbox{
        padding-left: 8px;
        .icon-checkbox{
            border-color: transparent;
            margin-right: 8px;
            &::after{
                color: @brandColor;
            }
        }
        .item-after div {
            color: @text-secondary;
            font-style: italic;
        }
        input[type='checkbox']:checked ~ .icon-checkbox {
            background-color: unset;
            border-color: transparent;
        }
    }
}

.sheet-filter, .popover-filter {
    .list {
        ul li:first-child .list-button{
            color: @text-normal;
            &::after {
                background: @background-menu-divider;
            }
        }

        .item-inner {
            color: @text-normal;
        }
    }
}

.tooltip-cell-data {
    width: 186px;
    height: 153px;
    overflow-y: auto;
    box-shadow: 0px 20px 46px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .popover-inner {
        padding: 8px;
    }
    &__title {
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 16px;
        color: @text-normal;
        margin: 0;
        margin-bottom: 4px;
    }
    &__msg {
        font-style: normal;
        font-weight: 400;
        font-size: 11px;
        line-height: 13px;
        color: @text-secondary;
        letter-spacing: 0.06px;
        margin: 0;
    }
}

// Cell styles

.cell-styles-list {
    ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        background-color: @background-tertiary;
        li.item-theme {
            // border: 0.5px solid #c8c7cc;
            border: 2px solid @fill-white;
            padding: 1px;
            background-repeat: no-repeat;
            width: 108px;
            height: 53px;
            margin-bottom: 8px;
            background-position: center;
            .item-content {
                width: 100%;
                height: 100%;
                padding: 0;
                .item-inner {
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    &:after {
                        display: none;
                    }
                    .thumb {
                        width: 100%;
                        height: 100%;
                        padding: 0;
                        background-size: contain;
                        background-color: var(--canvas-content-background);
                    }
                }
            }
            &.active:before {
                content: '';
                position: absolute;
                width: 22px;
                height: 22px;
                right: 2px;
                bottom: 2px;
                z-index: 1;
                .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
            }
        }
        &:after {
            display: none;
        }
    }
}