[DE PE SSE mobile] Fix Bug 56323

[DE PE SSE mobile] Fix Bug 56323

@import './about';

@white: #ffffff;
@black: #000000;
@gray: #c4c4c4;
@darkGray: #6d6d72;
@green: #4cd964;
@red: #f00;
@autoColor: @black;

.navbar.main-navbar {
    height: 0;
    &.navbar-with-logo {
        height: 26px;
    }
    .navbar-inner {
        display: flex;
        justify-content: center;
        padding-top: 8px;
    }
    .navbar-bg {
        &:before, &:after {
            content: none;
        }
    }
}

.navbar {
    .title {
        text-overflow: initial;
        white-space: normal;
    }
}

.navbar-hidden {
    transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
}

.navbar-hidden+.page>.page-content, .navbar-hidden+.page-content {
    padding-top: 0;
}

.page.editor>.page-content {
    transition: padding-top .3s ease-in;
}

.subnavbar {
    .subnavbar-inner {
        padding: 0;
    }
    .icon-back {
        color: @toolbar-icons;
    }
}

.page.page-with-subnavbar {
    .page-content {
        --f7-page-subnavbar-offset: 0px;
    }
    &.page-with-logo .page-content {
        --f7-page-subnavbar-offset: 26px;
    }
}

.popup, .popover, .sheet-modal {
    .list {
        &:first-child {
            margin-top: 0;
        }
        .inner-range-title {
            color: @text-normal;
            padding: 15px 0 0 15px;
        }

        .range-number {
            color: @text-normal;
        }
    }
    .page-content {
        &.no-padding-top {
            padding-top: 0;
        }
    }
}

.disabled, [disabled] {
    opacity: .55;
    pointer-events: none;
}

.text-content {
    padding: 14px 10px 0 10px;
}

.list {
    li.no-indicator {
        .item-link {
            .item-inner{
                padding-right: 15px;
                &:before {
                    content: none;
                }
            }
        }
    }
    .item-text {
        text-overflow: initial;
        white-space: normal;
        height: auto;
        max-height: initial;
        -webkit-line-clamp: initial;
    }
    .font-item img {
        filter: var(--image-border-types-filter, none)
    }
    .buttons {
        .button.active {
            background-color: @button-active-opacity;
        }
    }
    .item-content {
        .color-preview.auto {
            background-color: @autoColor;
        }
    }
}

// Bullets, numbers and multilevels

.bullets,
.numbers,
.multilevels {
    .list {
        margin: 0;
        ul {
            background: none;
            &:before, &:after {
                display: none;
            }
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding: 5px;

            li {
                width: 70px;
                height: 70px;
                border: 1px solid @gray;
                html.pixel-ratio-2 & {
                    border: 0.5px solid @gray;
                }
                html.pixel-ratio-3 & {
                    border: 0.33px solid @gray;
                }

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

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

    .row.list .item-content {
        padding-left: 0;
        min-height: 68px;
        .item-inner{
            padding: 0;
            &:after {
                display: none;
            }
        }
    }
}

.popover__titled .popover-inner{
    .list {
        ul {
            background-color: var(--f7-list-bg-color);
            li:first-child, li:last-child {
                a {
                    border-radius: 0;
                }
            }
        }
    }
}

.popover .list + .list {
    margin-top: 0;
}

.popover .list:first-child li:first-child, .popover .list:first-child li:first-child a, .popover .list:first-child li:first-child > label, .popover .list:last-child li:last-child, .popover .list:last-child li:last-child a, .popover .list:last-child li:last-child > label {
    border-radius: 0;
}

.shapes {
    li {
        width: 70px;
        height: 70px;
        margin: 0 1px;

        .thumb {
            width: 100%;
            height: 100%;
            background-color: @brandColor;
        }
    }
}

.chart-types {
    width: 100%;
    .row {
        padding: 0 10px;
    }
    li {
        width: 60px;
        height: 60px;
        margin: 6px;

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

.chart-styles {
    .row {
        li {
            margin: 0;
            padding: 1px;
        }
        img {
            width: 50px;
            height: 50px;
        }
    }
}

.segmented {
    .decrement, .increment {
        text-overflow: clip;
    }
}

.about {
    .content-block {
        margin: 0 auto 15px;

        p:last-child a{
            color: var(--brand-word);
            text-decoration: underline;
        }
    }
}

.content-block {
    margin: 32px 0;
    padding: 0 16px;
    box-sizing: border-box;
    p {
        color: @text-normal;
    }
}

// Color Schemes

.color-schemes-menu {
    cursor: pointer;
    display: block;
    // background-color: @white;
    .item-inner {
        justify-content: flex-start;
    }
    .color-schema-block {
        display: flex;
    }
    .color {
        min-width: 26px;
        min-height: 26px;
        margin: 0 2px 0 0;
        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
    }
    .item-title {
        margin-left: 20px;
        color: @text-normal;
    }
}

// Layout

.slide-layout {
    &__list {
        margin: auto;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        &::before, &::after {
            display: none;
        }
    }
    li {
        position: relative;
        z-index: 1;
        margin-top: 12px;
        img {
            box-shadow: 0 0 0 1px rgba(0,0,0,.15);
        }
    }
    .item-inner {
        padding-top: 0;
    }
    .item-inner:after {
        display: none;
    }
    .item-inner:before {
        opacity: 0;
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        right: 11px;
        bottom: 0;
        z-index: 1;
        background-repeat: no-repeat;
        .encoded-svg-mask('<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="@{brandColor}"><g><circle fill="transparent" 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>');
    }
    .active .item-inner:before {
        opacity: 1;
    }
}

// Transition

.slide-transition {
    .splitter {
        display: flex;
        align-items: center;
        color: @black;
        label {
            margin: 0 5px;
        }
    }
    .buttons-row {
        display: flex;
        margin: 0;
        min-width: 90px;
        margin-left: 10px;
        .button {
            width: 100%;
        }
        .button:first-child {
            border-radius: 5px 0 0 5px;
            border-left-width: 1px;
            border-left-style: solid;
        }
        .button:last-child {
            border-radius: 0 5px 5px 0;
        }
    }
}

.style-effect, .style-type {
    .list .item-title {
        font-weight: normal;
    }
}

.range-slider-delay {
    width: 100%;
    margin: 4px 0 5px 0;
    appearance: none;
    background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    outline: 0;
    border: none;
    box-sizing: content-box;
    &:disabled {
        opacity: .55;
    }
    &::-webkit-slider-thumb {
        appearance: none;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: @white;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    }
    &::-ms-thumb {
        appearance: none;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: @white;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    }
}

.buttons-list {
    ul {
        // &::before, &::after {
        //     display: none;
        // }
        li {
            border: 0;
            font-weight: normal;
            .item-link {
                height: 100%;
                .item-content {
                    min-height: initial;
                    height: 100%;
                    padding: 0;
                }
                .item-inner {
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                    min-height: initial;
                    &::before {
                        display: none;
                    }
                }
            }
        }
    }
}

.item-color-auto {
    .color-auto {
        width: 22px;
        height: 22px;
        background-color: @autoColor;
    }
    &.active {
        .color-auto {
            box-shadow: 0 0 0 1px @white, 0 0 0 4px @brandColor;
            border-radius: 1px;
        }
    }
}

.page {
    .color-palettes {
        .list {
            ul {
                .palette {
                    padding: 8px 0px;
                    a {
                        flex-grow: 1;
                        position: relative;
                        min-width: 10px;
                        min-height: 26px;
                        margin: 1px 1px 0 0;
                        box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
                        border-radius: 0;
                        &.active:after {
                            content: ' ';
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            box-shadow: 0 0 0 1px @white, 0 0 0 4px @brandColor;
                            z-index: 1;
                            border-radius: 1px;
                        }
                        &.transparent {
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
                        }
                    }
                }
            }
        }
        .row {
            padding: 0;
        }
        .list .item-inner {
            display: block;
            color: var(--text-normal);
        }
        .standart-colors, .dynamic-colors {
            .palette {
                display: flex;
            }
        }

        .dynamic-colors {
            .empty-color {
                background-color: @white;
            }
        }
    }
}

#color-picker {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
    margin-top: 4px;
    .color-picker-container {
        width: calc(100% - 94px);
        position: relative;
        max-width: 100%;
        height: auto;
        font-size: 0;
        .color-picker-module-wheel {
            margin: 0;
        }
    }
    .right-block {
        margin-left: 20px;
        .color-hsb-preview {
            width: 72px;
            height: 72px;
            overflow: hidden;
            border: 1px solid @gray;
            border-radius: 100px;
            .new-color-hsb-preview, .current-color-hsb-preview {
                height: 36px;
            }
            .new-color-hsb-preview {
                border-radius: 100px 100px 0 0;
            }
            .current-color-hsb-preview {
                border-radius: 0 0 100px 100px;
            }
        }
        .button-round {
            height: 72px;
            width: 72px;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100px;
            background-color: @fill-white;
            box-shadow: 0 4px 4px rgba(0,0,0,.25);
            // border-color: transparent;
            border: 0;
            margin-top: 20px;
        }
    }
}

// Table styles

.table-styles {
    width: 100%;
    .row {
        &, li {
            margin-bottom: 12px;
        }
        li, div {
            box-shadow: 0 0 0 1px @gray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    li,
    .row div {
        margin: 0;
        padding: 1px;

        img {
            width: 70px;
            height: 50px;
        }
    }
}

#edit-table-style {
    .list ul ul {
        padding-left: 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;
        li.item-theme {
            border: 0.5px solid #c8c7cc;
            padding: 1px;
            background-repeat: no-repeat;
            width: 108px;
            height: 52px;
            margin-bottom: 10px;
            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>');
            }
        }
    }
}

// input[type="number"]

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

// Regional Settings

.icon.lang-flag {
    background-size: 48px auto;
    background-image: ~'url(@{common-image-path}/controls/flags@2x.png)';
}

.icon.lang-flag {
    width: 16px;
    height: 12px;
}

.lang-flag.ca,
.lang-flag.ca-ES {
  background-position: 0 0;
}
.lang-flag.cs,
.lang-flag.cs-CZ {
  background-position: -16px 0;
}
.lang-flag.da,
.lang-flag.da-DK {
  background-position: -32px 0;
}
.lang-flag.de,
.lang-flag.de-DE {
  background-position: 0 -12px;
}
.lang-flag.el,
.lang-flag.el-GR {
  background-position: -16px -12px;
}
.lang-flag.en,
.lang-flag.en-US {
  background-position: -32px -12px;
}
.lang-flag.fr,
.lang-flag.fr-FR {
  background-position: 0 -24px;
}
.lang-flag.hu,
.lang-flag.hu-HU {
  background-position: -16px -24px;
}
.lang-flag.it,
.lang-flag.it-IT {
  background-position: -32px -24px;
}
.lang-flag.ko,
.lang-flag.ko-KR {
  background-position: 0 -36px;
}
.lang-flag.nl,
.lang-flag.nl-NL {
  background-position: -16px -36px;
}
.lang-flag.nb,
.lang-flag.nb-NO,
.lang-flag.nn,
.lang-flag.nn-NO {
  background-position: -32px -36px;
}
.lang-flag.pl,
.lang-flag.pl-PL {
  background-position: 0 -48px;
}
.lang-flag.pt,
.lang-flag.pt-BR {
  background-position: -16px -48px;
}
.lang-flag.ro,
.lang-flag.ro-RO {
  background-position: -32px -48px;
}
.lang-flag.ru,
.lang-flag.ru-RU {
  background-position: 0 -60px;
}
.lang-flag.sv,
.lang-flag.sv-SE {
  background-position: -32px -60px;
}
.lang-flag.tr,
.lang-flag.tr-TR {
  background-position: 0 -72px;
}
.lang-flag.uk,
.lang-flag.uk-UA {
  background-position: -16px -72px;
}
.lang-flag.lv,
.lang-flag.lv-LV {
  background-position: -32px -72px;
}
.lang-flag.lt,
.lang-flag.lt-LT {
  background-position: 0 -84px;
}
.lang-flag.vi,
.lang-flag.vi-VN {
  background-position: -16px -84px;
}
.lang-flag.de-CH,
.lang-flag.fr-CH,
.lang-flag.it-CH {
  background-position: -32px -84px;
}
.lang-flag.pt-PT {
  background-position: -16px -96px;
}
.lang-flag.de-AT {
  background-position: -32px -96px;
}
.lang-flag.es,
.lang-flag.es-ES {
  background-position: 0 -108px;
}
.lang-flag.en-GB {
  background-position: -32px -108px;
}
.lang-flag.en-AU {
  background-position: 0 -120px;
}
.lang-flag.az-Latn-AZ {
  background-position: -16px -120px;
}
.lang-flag.id,
.lang-flag.id-ID {
  background-position: -32px -120px;
}
.lang-flag.bg,
.lang-flag.bg-BG {
  background-position: 0 -132px;
}
.lang-flag.ca-ES-valencia {
  background-position: -16px -132px;
}
.lang-flag.en-CA {
  background-position: -32px -132px;
}
.lang-flag.en-ZA {
  background-position: 0 -144px;
}
.lang-flag.eu,
.lang-flag.eu-ES {
  background-position: -16px -144px;
}
.lang-flag.gl,
.lang-flag.gl-ES {
  background-position: -32px -144px;
}
.lang-flag.hr,
.lang-flag.hr-HR {
  background-position: 0 -156px;
}
.lang-flag.lb,
.lang-flag.lb-LU {
  background-position: -16px -156px;
}
.lang-flag.mn,
.lang-flag.mn-MN {
  background-position: -32px -156px;
}
.lang-flag.sl,
.lang-flag.sl-SI {
  background-position: 0 -168px;
}
.lang-flag.sr,
.lang-flag.sr-Cyrl-RS,
.lang-flag.sr-Latn-RS {
  background-position: -16px -168px;
}
.lang-flag.sk,
.lang-flag.sk-SK {
  background-position: -32px -168px;
}
.lang-flag.kk,
.lang-flag.kk-KZ {
  background-position: 0 -180px;
}
.lang-flag.fi,
.lang-flag.fi-FI,
.lang-flag.sv-FI {
  background-position: -16px -180px;
}
.lang-flag.zh,
.lang-flag.zh-CN {
  background-position: -32px -180px;
}
.lang-flag.ja,
.lang-flag.ja-JP {
  background-position: 0 -192px;
}
.lang-flag.es-MX {
  background-position: -16px -192px;
}

.checkbox-in-modal {
    margin-top: 10px;
    display: flex;
    align-items: center;
    .right-text {
        margin-left: 10px;
    }
}

.username-tip {
    height: 20px;
    color: @white;
    padding: 0 10px;
    position: absolute;
    z-index: 900;
    display: none;
    pointer-events: none;
    transition: opacity 0.1ms ease-out;
    opacity: 0;
    &.active {
        display: block;
        opacity: 1;
    }
}

.dlg-adv-options {
    z-index: 13700;
    .content-block {
        padding: 0;
    }
    .picker-3d {
        .picker-item {
            padding: 0;
            text-align: left;
            font-size: 16px;
        }
    }
    .picker-center-highlight {
        width: 100%;
        left: 0;
        right: 0;
    }
}

// Skeleton of document

@keyframes flickerAnimation {
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}
@-o-keyframes flickerAnimation{
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}
@-moz-keyframes flickerAnimation{
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}
@-webkit-keyframes flickerAnimation{
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}

.doc-placeholder-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6000;
    top: 0;
    left: 0;
    overflow: hidden;
}

// Statusbar

.statusbar .statusbar--box-tabs > ul > .locked a {
    box-shadow: inset 0 2px red;
}

// Fonts List

.font-item {
    .item-inner {
        overflow: hidden;
        &:after {
            left: 16px;
        }
    }
}

// Functions List

.cell-editor {
    overflow: initial;
}

.functions-list {
    max-height: 200px;
    width: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: @background-primary;
    &__mobile {
        position: absolute;
        right: 0;
        left: 0;
        width: 100%;
        box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
        .list {
            margin: 0;
            ul:before {
                display: none;
            }
            .item-content {
                padding-left: 0;
            }
            .item-inner {
                padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
            }
            .item-title {
                font-size: 15px;
            }
        }
    }
}

// Function List Popover

#idx-functions-list {
    width: 350px;
    .popover-inner {
        .navbars {
            .right .link {
                font-weight: 600;
            }
            .navbar-bg {
                background:  @background-secondary;
                &::after {
                    background: @background-menu-divider;
                }
            }
        }
        .page-function-info{
            .navbar {
                .navbar-bg::after {
                    background: @background-menu-divider;
                }
                .navbar-inner{
                    background:  @background-secondary;
                    .title {
                        color: @text-normal;
                    }
                    .right .link {
                        color: @brandColor;
                        font-weight: 600;
                    }
                    .icon-back::after {
                        color: @brandColor;
                    }
                }
            }
        }
    }
}

// Highlight Colors

.highlight-palette {
    width: 100%;
}

.highlight-color {
    min-width: 10px;
    min-height: 34px;
    margin: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    position: relative;
    flex-grow: 1;
    &_active:after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #446995;
        z-index: 1;
        border-radius: 1px;
    }
}
#idx-celleditor.expanded {
    .functions-list {
        &__mobile {
            top: 70px;
        }
    }
}

.popover__functions {
    box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.3);
    .view {
        transition: .2s height;
    }
}

.target-function-list {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    height: 100%;
}

.dropdown-list {
    &__placeholder  {
        opacity: 0.6;
        .item-inner {
            border-bottom: 1px solid var(--f7-list-item-border-color);
        }
    }
}

@import './about';

@white: #ffffff;
@black: #000000;
@gray: #c4c4c4;
@darkGray: #6d6d72;
@green: #4cd964;
@red: #f00;
@autoColor: @black;

.navbar.main-navbar {
    height: 0;
    &.navbar-with-logo {
        height: 26px;
    }
    .navbar-inner {
        display: flex;
        justify-content: center;
        padding-top: 8px;
    }
    .navbar-bg {
        &:before, &:after {
            content: none;
        }
    }
}

.navbar {
    .title {
        text-overflow: initial;
        white-space: normal;
    }
}

.navbar-hidden {
    transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
}

.navbar-hidden+.page>.page-content, .navbar-hidden+.page-content {
    padding-top: 0;
}

.page.editor>.page-content {
    transition: padding-top .3s ease-in;
}

.subnavbar {
    .subnavbar-inner {
        padding: 0;
    }
    .icon-back {
        color: @toolbar-icons;
    }
}

.page.page-with-subnavbar {
    .page-content {
        --f7-page-subnavbar-offset: 0px;
    }
    &.page-with-logo .page-content {
        --f7-page-subnavbar-offset: 26px;
    }
}

.popup, .popover, .sheet-modal {
    .list {
        &:first-child {
            margin-top: 0;
        }
        .inner-range-title {
            color: @text-normal;
            padding: 15px 0 0 15px;
        }

        .range-number {
            color: @text-normal;
        }
    }
    .page-content {
        &.no-padding-top {
            padding-top: 0;
        }
    }
}

.disabled, [disabled] {
    opacity: .55;
    pointer-events: none;
}

.text-content {
    padding: 14px 10px 0 10px;
}

.list {
    li.no-indicator {
        .item-link {
            .item-inner{
                padding-right: 15px;
                &:before {
                    content: none;
                }
            }
        }
    }
    .item-text {
        text-overflow: initial;
        white-space: normal;
        height: auto;
        max-height: initial;
        -webkit-line-clamp: initial;
    }
    .font-item img {
        filter: var(--image-border-types-filter, none)
    }
    .buttons {
        .button.active {
            background-color: @button-active-opacity;
        }
    }
    .item-content {
        .color-preview.auto {
            background-color: @autoColor;
        }
    }
}
// Bullets, numbers and multilevels
    .bullets,
    .numbers,
    .multilevels {
        .list{
            margin: 5px;
            ul {
                background: none;
                &:before, &:after {
                    display: none;
                }
                display: flex;
                justify-content: space-around;
                width: 100%;
                margin-top: 10px;
                padding:  0 5px;

                li {
                    width: 70px;
                    height: 70px;
                    border: 1px solid @gray;
                    html.pixel-ratio-2 & {
                        border: 0.5px solid @gray;
                    }
                    html.pixel-ratio-3 & {
                        border: 0.33px solid @gray;
                    }

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

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

        .row.list .item-content {
            padding-left: 0;
            min-height: 68px;
            .item-inner{
                padding: 0;
                &:after {
                    display: none;
                }
            }
        }
}

.popover__titled .popover-inner{
    .list {
        ul {
            background-color: var(--f7-list-bg-color);
            li:first-child, li:last-child {
                a {
                    border-radius: 0;
                }
            }
        }
    }
}

.shapes {
    li {
        width: 70px;
        height: 70px;
        margin: 0 1px;

        .thumb {
            width: 100%;
            height: 100%;
            background-color: @brandColor;
        }
    }
}

.chart-types {
    width: 100%;
    .row {
        padding: 0 10px;
    }
    li {
        width: 60px;
        height: 60px;
        margin: 6px;

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

.chart-styles {
    .row {
        li {
            margin: 0;
            padding: 1px;
        }
        img {
            width: 50px;
            height: 50px;
        }
    }
}

.segmented {
    .decrement, .increment {
        text-overflow: clip;
    }
}

.about {
    .content-block {
        margin: 0 auto 15px;

        p:last-child a{
            color: var(--brand-word);
            text-decoration: underline;
        }
    }
}

.content-block {
    margin: 32px 0;
    padding: 0 16px;
    box-sizing: border-box;
    p {
        color: @text-normal;
    }
}

// Color Schemes

.color-schemes-menu {
    cursor: pointer;
    display: block;
    // background-color: @white;
    .item-inner {
        justify-content: flex-start;
    }
    .color-schema-block {
        display: flex;
    }
    .color {
        min-width: 26px;
        min-height: 26px;
        margin: 0 2px 0 0;
        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
    }
    .item-title {
        margin-left: 20px;
        color: @text-normal;
    }
}

// Layout

.slide-layout {
    &__list {
        margin: auto;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        &::before, &::after {
            display: none;
        }
    }
    li {
        position: relative;
        z-index: 1;
        margin-top: 12px;
        img {
            box-shadow: 0 0 0 1px rgba(0,0,0,.15);
        }
    }
    .item-inner {
        padding-top: 0;
    }
    .item-inner:after {
        display: none;
    }
    .item-inner:before {
        opacity: 0;
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        right: 11px;
        bottom: 0;
        z-index: 1;
        background-repeat: no-repeat;
        .encoded-svg-mask('<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="@{brandColor}"><g><circle fill="transparent" 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>');
    }
    .active .item-inner:before {
        opacity: 1;
    }
}

// Transition

.slide-transition {
    .splitter {
        display: flex;
        align-items: center;
        color: @black;
        label {
            margin: 0 5px;
        }
    }
    .buttons-row {
        display: flex;
        margin: 0;
        min-width: 90px;
        margin-left: 10px;
        .button {
            width: 100%;
        }
        .button:first-child {
            border-radius: 5px 0 0 5px;
            border-left-width: 1px;
            border-left-style: solid;
        }
        .button:last-child {
            border-radius: 0 5px 5px 0;
        }
    }
}

.style-effect, .style-type {
    .list .item-title {
        font-weight: normal;
    }
}

.range-slider-delay {
    width: 100%;
    margin: 4px 0 5px 0;
    appearance: none;
    background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    outline: 0;
    border: none;
    box-sizing: content-box;
    &:disabled {
        opacity: .55;
    }
    &::-webkit-slider-thumb {
        appearance: none;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: @white;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    }
    &::-ms-thumb {
        appearance: none;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: @white;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    }
}

.buttons-list {
    ul {
        // &::before, &::after {
        //     display: none;
        // }
        li {
            border: 0;
            font-weight: normal;
            .item-link {
                height: 100%;
                .item-content {
                    min-height: initial;
                    height: 100%;
                    padding: 0;
                }
                .item-inner {
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                    min-height: initial;
                    &::before {
                        display: none;
                    }
                }
            }
        }
    }
}

.item-color-auto {
    .color-auto {
        width: 22px;
        height: 22px;
        background-color: @autoColor;
    }
    &.active {
        .color-auto {
            box-shadow: 0 0 0 1px @white, 0 0 0 4px @brandColor;
            border-radius: 1px;
        }
    }
}

.page {
    .color-palettes {
        .list {
            ul {
                .palette {
                    padding: 8px 0px;
                    a {
                        flex-grow: 1;
                        position: relative;
                        min-width: 10px;
                        min-height: 26px;
                        margin: 1px 1px 0 0;
                        box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
                        border-radius: 0;
                        &.active:after {
                            content: ' ';
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            box-shadow: 0 0 0 1px @white, 0 0 0 4px @brandColor;
                            z-index: 1;
                            border-radius: 1px;
                        }
                        &.transparent {
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
                        }
                    }
                }
            }
        }
        .row {
            padding: 0;
        }
        .list .item-inner {
            display: block;
            color: var(--text-normal);
        }
        .standart-colors, .dynamic-colors {
            .palette {
                display: flex;
            }
        }

        .dynamic-colors {
            .empty-color {
                background-color: @white;
            }
        }
    }
}

#color-picker {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
    margin-top: 4px;
    .color-picker-container {
        width: calc(100% - 94px);
        position: relative;
        max-width: 100%;
        height: auto;
        font-size: 0;
        .color-picker-module-wheel {
            margin: 0;
        }
    }
    .right-block {
        margin-left: 20px;
        .color-hsb-preview {
            width: 72px;
            height: 72px;
            overflow: hidden;
            border: 1px solid @gray;
            border-radius: 100px;
            .new-color-hsb-preview, .current-color-hsb-preview {
                height: 36px;
            }
            .new-color-hsb-preview {
                border-radius: 100px 100px 0 0;
            }
            .current-color-hsb-preview {
                border-radius: 0 0 100px 100px;
            }
        }
        .button-round {
            height: 72px;
            width: 72px;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100px;
            background-color: @fill-white;
            box-shadow: 0 4px 4px rgba(0,0,0,.25);
            // border-color: transparent;
            border: 0;
            margin-top: 20px;
        }
    }
}

// Table styles

.table-styles {
    width: 100%;
    .row {
        &, li {
            margin-bottom: 12px;
        }
        li, div {
            box-shadow: 0 0 0 1px @gray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    li,
    .row div {
        margin: 0;
        padding: 1px;

        img {
            width: 70px;
            height: 50px;
        }
    }
}

#edit-table-style {
    .list ul ul {
        padding-left: 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;
        li.item-theme {
            border: 0.5px solid #c8c7cc;
            padding: 1px;
            background-repeat: no-repeat;
            width: 108px;
            height: 52px;
            margin-bottom: 10px;
            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>');
            }
        }
    }
}

// input[type="number"]

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

// Regional Settings

.icon.lang-flag {
    background-size: 48px auto;
    background-image: ~'url(@{common-image-path}/controls/flags@2x.png)';
}

.icon.lang-flag {
    width: 16px;
    height: 12px;
}

.lang-flag.ca,
.lang-flag.ca-ES {
  background-position: 0 0;
}
.lang-flag.cs,
.lang-flag.cs-CZ {
  background-position: -16px 0;
}
.lang-flag.da,
.lang-flag.da-DK {
  background-position: -32px 0;
}
.lang-flag.de,
.lang-flag.de-DE {
  background-position: 0 -12px;
}
.lang-flag.el,
.lang-flag.el-GR {
  background-position: -16px -12px;
}
.lang-flag.en,
.lang-flag.en-US {
  background-position: -32px -12px;
}
.lang-flag.fr,
.lang-flag.fr-FR {
  background-position: 0 -24px;
}
.lang-flag.hu,
.lang-flag.hu-HU {
  background-position: -16px -24px;
}
.lang-flag.it,
.lang-flag.it-IT {
  background-position: -32px -24px;
}
.lang-flag.ko,
.lang-flag.ko-KR {
  background-position: 0 -36px;
}
.lang-flag.nl,
.lang-flag.nl-NL {
  background-position: -16px -36px;
}
.lang-flag.nb,
.lang-flag.nb-NO,
.lang-flag.nn,
.lang-flag.nn-NO {
  background-position: -32px -36px;
}
.lang-flag.pl,
.lang-flag.pl-PL {
  background-position: 0 -48px;
}
.lang-flag.pt,
.lang-flag.pt-BR {
  background-position: -16px -48px;
}
.lang-flag.ro,
.lang-flag.ro-RO {
  background-position: -32px -48px;
}
.lang-flag.ru,
.lang-flag.ru-RU {
  background-position: 0 -60px;
}
.lang-flag.sv,
.lang-flag.sv-SE {
  background-position: -32px -60px;
}
.lang-flag.tr,
.lang-flag.tr-TR {
  background-position: 0 -72px;
}
.lang-flag.uk,
.lang-flag.uk-UA {
  background-position: -16px -72px;
}
.lang-flag.lv,
.lang-flag.lv-LV {
  background-position: -32px -72px;
}
.lang-flag.lt,
.lang-flag.lt-LT {
  background-position: 0 -84px;
}
.lang-flag.vi,
.lang-flag.vi-VN {
  background-position: -16px -84px;
}
.lang-flag.de-CH,
.lang-flag.fr-CH,
.lang-flag.it-CH {
  background-position: -32px -84px;
}
.lang-flag.pt-PT {
  background-position: -16px -96px;
}
.lang-flag.de-AT {
  background-position: -32px -96px;
}
.lang-flag.es,
.lang-flag.es-ES {
  background-position: 0 -108px;
}
.lang-flag.en-GB {
  background-position: -32px -108px;
}
.lang-flag.en-AU {
  background-position: 0 -120px;
}
.lang-flag.az-Latn-AZ {
  background-position: -16px -120px;
}
.lang-flag.id,
.lang-flag.id-ID {
  background-position: -32px -120px;
}
.lang-flag.bg,
.lang-flag.bg-BG {
  background-position: 0 -132px;
}
.lang-flag.ca-ES-valencia {
  background-position: -16px -132px;
}
.lang-flag.en-CA {
  background-position: -32px -132px;
}
.lang-flag.en-ZA {
  background-position: 0 -144px;
}
.lang-flag.eu,
.lang-flag.eu-ES {
  background-position: -16px -144px;
}
.lang-flag.gl,
.lang-flag.gl-ES {
  background-position: -32px -144px;
}
.lang-flag.hr,
.lang-flag.hr-HR {
  background-position: 0 -156px;
}
.lang-flag.lb,
.lang-flag.lb-LU {
  background-position: -16px -156px;
}
.lang-flag.mn,
.lang-flag.mn-MN {
  background-position: -32px -156px;
}
.lang-flag.sl,
.lang-flag.sl-SI {
  background-position: 0 -168px;
}
.lang-flag.sr,
.lang-flag.sr-Cyrl-RS,
.lang-flag.sr-Latn-RS {
  background-position: -16px -168px;
}
.lang-flag.sk,
.lang-flag.sk-SK {
  background-position: -32px -168px;
}
.lang-flag.kk,
.lang-flag.kk-KZ {
  background-position: 0 -180px;
}
.lang-flag.fi,
.lang-flag.fi-FI,
.lang-flag.sv-FI {
  background-position: -16px -180px;
}
.lang-flag.zh,
.lang-flag.zh-CN {
  background-position: -32px -180px;
}
.lang-flag.ja,
.lang-flag.ja-JP {
  background-position: 0 -192px;
}
.lang-flag.es-MX {
  background-position: -16px -192px;
}

.checkbox-in-modal {
    margin-top: 10px;
    display: flex;
    align-items: center;
    .right-text {
        margin-left: 10px;
    }
}

.username-tip {
    height: 20px;
    color: @white;
    padding: 0 10px;
    position: absolute;
    z-index: 900;
    display: none;
    pointer-events: none;
    transition: opacity 0.1ms ease-out;
    opacity: 0;
    &.active {
        display: block;
        opacity: 1;
    }
}

.dlg-adv-options {
    z-index: 13700;
    .content-block {
        padding: 0;
    }
    .picker-3d {
        .picker-item {
            padding: 0;
            text-align: left;
            font-size: 16px;
        }
    }
    .picker-center-highlight {
        width: 100%;
        left: 0;
        right: 0;
    }
}

// Skeleton of document

@keyframes flickerAnimation {
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}
@-o-keyframes flickerAnimation{
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}
@-moz-keyframes flickerAnimation{
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}
@-webkit-keyframes flickerAnimation{
    0%   { opacity:0.1; }
    50%  { opacity:1; }
    100% { opacity:0.1; }
}

.doc-placeholder-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6000;
    top: 0;
    left: 0;
    overflow: hidden;
}

// Statusbar

.statusbar .statusbar--box-tabs > ul > .locked a {
    box-shadow: inset 0 2px red;
}

// Fonts List

.font-item {
    .item-inner {
        overflow: hidden;
        &:after {
            left: 16px;
        }
    }
}

// Functions List

.cell-editor {
    overflow: initial;
}

.functions-list {
    max-height: 200px;
    width: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: @background-primary;
    &__mobile {
        position: absolute;
        right: 0;
        left: 0;
        width: 100%;
        box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
        .list {
            margin: 0;
            ul:before {
                display: none;
            }
            .item-content {
                padding-left: 0;
            }
            .item-inner {
                padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
            }
            .item-title {
                font-size: 15px;
            }
        }
    }
}

// Function List Popover

#idx-functions-list {
    width: 350px;
    .popover-inner {
        .navbars {
            .right .link {
                font-weight: 600;
            }
            .navbar-bg {
                background:  @background-secondary;
                &::after {
                    background: @background-menu-divider;
                }
            }
        }
        .page-function-info{
            .navbar {
                .navbar-bg::after {
                    background: @background-menu-divider;
                }
                .navbar-inner{
                    background:  @background-secondary;
                    .title {
                        color: @text-normal;
                    }
                    .right .link {
                        color: @brandColor;
                        font-weight: 600;
                    }
                    .icon-back::after {
                        color: @brandColor;
                    }
                }
            }
        }
    }
}

// Highlight Colors

.highlight-palette {
    width: 100%;
}

.highlight-color {
    min-width: 10px;
    min-height: 34px;
    margin: 1px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
    position: relative;
    flex-grow: 1;
    &_active:after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #446995;
        z-index: 1;
        border-radius: 1px;
    }
}
#idx-celleditor.expanded {
    .functions-list {
        &__mobile {
            top: 70px;
        }
    }
}

.popover__functions {
    box-shadow: 0px 10px 100px rgba(0, 0, 0, 0.3);
    .view {
        transition: .2s height;
    }
}

.target-function-list {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    height: 100%;
}

.dropdown-list {
    &__placeholder  {
        opacity: 0.6;
        .item-inner {
            border-bottom: 1px solid var(--f7-list-item-border-color);
        }
    }
}


Remove the margin atop playlist thumbnails

.artist-thumbnail {
  color: @base-color;
  display: block;
  float: left;
  height: 245px;
  width: 180px;
  margin: 0 20px 20px 30px;
  text-align: center;

  .thumbnail {
    background: @light-purple;
    border: 1px solid @smooth-purple;
    border-radius: 100%;
    box-shadow: 0 1px 1px fade(@darkest-purple, 20%);
    color: @smooth-purple;
    height: 180px;
    width: 180px;
    margin: auto;
    overflow: hidden;
    font-size: 70px;
    margin-bottom: 0.2em;

    img { width: 100%; }

    .glyphicon { line-height: 230% };
  }
}

.playlist-thumbnail {
  .box();
  cursor: pointer;
  float: left;
  margin: 0 20px 20px 20px;
  width: 250px;

  h3, h4     { margin: 0 0 0.2em 0; }
  h4         { color: silver; }
  .legend    { padding: 0px 10px 10px 10px; }
  .glyphicon { font-size: 12px; }

  img {
    -webkit-transition: opacity 0.3s ease-in-out;
    width: 250px;
    height: 141px;
  }

  &:hover img {
    opacity: 0.7;
  }
}

.artist-thumbnail {
  color: @base-color;
  display: block;
  float: left;
  height: 245px;
  width: 180px;
  margin: 0 20px 20px 30px;
  text-align: center;

  .thumbnail {
    background: @light-purple;
    border: 1px solid @smooth-purple;
    border-radius: 100%;
    box-shadow: 0 1px 1px fade(@darkest-purple, 20%);
    color: @smooth-purple;
    height: 180px;
    width: 180px;
    margin: auto;
    overflow: hidden;
    font-size: 70px;
    margin-bottom: 0.2em;

    img { width: 100%; }

    .glyphicon { line-height: 230% };
  }
}

.playlist-thumbnail {
  .box();
  cursor: pointer;
  float: left;
  margin: 10px 20px 20px 20px;
  width: 250px;

  h3, h4     { margin: 0 0 0.2em 0; }
  h4         { color: silver; }
  .legend    { padding: 0px 10px 10px 10px; }
  .glyphicon { font-size: 12px; }

  img {
    -webkit-transition: opacity 0.3s ease-in-out;
    width: 250px;
    height: 141px;
  }

  &:hover img {
    opacity: 0.7;
  }
}


update WIP less

update WIP less

@frame-width: 300px;

@page-width: @frame-width - 20px;
@page-rule: 1px solid grey;

@box-shadow: grey;
@highlight: #1ab4e5;
@background: #222222;

@font-size: 12px;

@tab-size: 40px;
@tab-inactive: #444444;
@tab-border: 1px solid grey;

@thumb-size: 16px;
@thumb-radius: 15px;
@thumb-border: 1px solid #00001E;
@thumb-box-shadow: 0px 0px 0px #000031;

@track-background: #eeeeee;
@track-box-shadow: 0px 0px 0px #000000;
@track-border: 0px solid #010101;
@track-border-radius: 0px;
@track-height: 4px;

@animation-speed: 0.25s;

@icon-sheet: url(../images/icons.png);

body {
	font-family: 'Source Sans Pro Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.cv-container {
	position: relative;
	overflow: hidden;
	height: 600px;
	width: 1000px;
	touch-action: none;
}

#cv-frame *, #cv-tab-box *, #cv-frame, #cv-tab-box {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#cv-frame {
	position: absolute;
	top: 0px;
	left: 0px;
	width: @frame-width;
	height: 100%;
	background-color: @background;
	transform: translateX(-@frame-width);
	transition: transform @animation-speed ease-in;
	z-index: 10;
	overflow-y: auto;
	overflow-x: hidden;
}

#cv-frame div.page {
	position: absolute;
	top: 0px;
	bottom: 40px;
	left: 0px;
	width: @page-width;
	height: 100%;
	color: white;
	background-color: @background;
	padding: 0 4px 20px 20px;
	cursor: default;
}

#cv-frame div.page ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: @page-width;
	height: 100%;
	cursor: default;
	font-size: @font-size;
	overflow-y: visible;
	overflow-x: hidden;
}

#cv-frame div.page li {
	position: relative;
	margin-left: 20px;
	border-bottom: 1px solid #444444;
}

#cv-frame div.page ul li.selected {
	color: @highlight;
}

#cv-frame div.page li:hover {
	color: @highlight;
}

#cv-frame div.page div#ui-path {
	font-size: @font-size;
	margin-top: 8px;
	border-top: @page-rule;
	border-bottom: @page-rule;
	padding: 2px 0 2px 0px;
}

#cv-frame div.page div#ui-path span {
	color: @highlight;
}

#cv-frame div.page div.slide {
	position: absolute;
	top: 64px;
	bottom: 4px;
	left: 0px;
	max-height: 100%;
	background-color: @background;
	transition: transform @animation-speed ease-in;
}

#cv-frame div.slide-out {
	border-right: 1px grey solid;
	transform: translateX(-100%);
}

#cv-frame div.page div.descend-tree {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0;
	color: @highlight;
	z-index: 110;
}

#cv-frame.onscreen {
	transform: none;
	transition: transform @animation-speed ease-out;
}

#cv-frame a.download {
	display: block;
	width: 100%;
	margin: 16px 0 4px 0;
	border: none;
	border-bottom: 4px solid @highlight;
	padding: 0 0 4px 0;
	color: #dddddd;
	background-color: black;
	box-shadow: 1px 1px 8px 0px @box-shadow;
	outline: none;
	text-decoration: none;
	text-align: center;
}

#cv-frame a.download:hover {
	color: white;
}

#cv-frame a.download:active {
	color: #dddddd;
	border-bottom: 4px solid #0c536a;
	box-shadow: none;
	box-shadow: inset 1px 1px 8px 0px @box-shadow;
}

#cv-tab-box {
	position: absolute;
	top: 0px;
	width: @tab-size;
	z-index: 200;
	transform: none;
	transition: transform @animation-speed ease-in;
}

#cv-tab-box.onscreen {
	transform: translateX( @frame-width );
	transition: transform @animation-speed ease-out;
}

#cv-tab-box .tab {
	float: left;
	width: @tab-size;
	height: @tab-size;
	border-top: 1px solid black;
	border-left: @tab-border;
	background-color: @tab-inactive;
	background-origin: content-box;
	background-image: @icon-sheet;
	padding: 1px;
}

#cv-tab-box #close {
	background-color: @background;
	background-image: @icon-sheet;
	background-position: -360px;
	border-left: none;
	display: none;
}

#cv-tab-box.onscreen #close {
	display: block;
	margin-left: -100px;
	z-index: 200;
}

#cv-tab-box #fullscreen {
	display: none;
	border-left: none;
	background-color: @background;
}

#cv-tab-box.onscreen #fullscreen {
	position: absolute;
	top: 0px;
	left: -60px;
	display: block;
	z-index: 400;
}

#fullscreen.expand {
	background-image: @icon-sheet;
	background-position: -252px;
}

#fullscreen.collapse {
	background-image: @icon-sheet;
	background-position: -216px;
}

#cv-tab-box #icon_settings {
	background-position: 0 0;
}

#cv-tab-box #icon_terrain {
	background-position: -36px 0;
}

#cv-tab-box #icon_explore {
	background-position: -72px 0;
}

#cv-tab-box #icon_route {
	background-position: -108px 0;
}

#cv-tab-box #icon_info {
	background-position: -144px 0;
}

#cv-tab-box #icon_help {
	background-position: -180px 0;
}

#cv-tab-box.onscreen div.toptab {
	background-color: @background;
	border-top: @tab-border;
	border-bottom: @tab-border;
	border-left: none;
	border-right: 2px solid @highlight;
}

@media (min-width: 768px) {

	/* default to normal size */
	body div.toggle-fullscreen {
		position: fixed !important;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 999;
	}

}

@media (max-width: 767px) {

	#cv-frame {
		width: 100%;
		transform: translateY(-100%);
	}

	#cv-frame.onscreen {
		padding-top: @tab-size;
	}

	#cv-frame div.page {
		width: 95%;
		top: @tab-size;
	}

	#cv-frame div.page div.slide, #cv-frame div.slide ul {
		width: 100%;
	}

	#cv-tab-box {
		left: 0px;
		right: 0px;
		height: @tab-size;
		width: auto;
	}

	#cv-tab-box.onscreen {
		transform: none;
		background-color: @tab-inactive;
		border-bottom: thin solid white;
	}

	#cv-tab-box.onscreen .tab {
		border-bottom: thin solid white;
	}

	#cv-tab-box.onscreen #fullscreen.tab {
		position: static;
		float: left;
		margin: 0;
		background-color: @tab-inactive;
	}

	/* default to full screen */
	body div.cv-container:not( .toggle-fullscreen ) {
		position: fixed !important;
		top: 0px !important;
		bottom: 0px !important;
		left: 0px !important;
		right: 0px !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 999;
	}

	#cv-tab-box.onscreen div.toptab {
		background-color: @background;
		border-left: none;
		border-right: 1px solid gray;
		border-top: 4px solid @highlight;
		border-bottom: none;
		z-index: 20;
	}

	#cv-tab-box #close {
		position: fixed;
		background-color: @tab-inactive;
		background-image: @icon-sheet;
		background-position: -324px;
		top: 0px;
		right: 0px;
		left: auto;
	}

	#cv-tab-box.onscreen #close {
		float: right;
		margin: 0;
	}

}

#cv-frame div.page div.header {
	height: 16px;
	margin: 16px 0px 8px 0px;
	padding-left: 2px;
	font-weight: bold;
}

#cv-frame div.page div.control {
	margin: 2px 0 2px 0;
	padding: 2px 2px 0 0;
}

#cv-frame div.page label {
	display: block;
	border-top: @page-rule;
	padding: 2px 0 8px 0px;
	font-size: @font-size;
}

#cv-frame div.page select {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 5px 0px;
	padding-top: 2px;
}

#cv-frame div.page select:empty {
	background-color: #888888;
}

#cv-frame div.page button {
	display: block;
	width: 100%;
	height: 28px;
	margin: 16px 0 4px 0;
	border: none;
	border-bottom: 4px solid @highlight;
	padding-bottom: 4px;
	color: #dddddd;
	background-color: black;
	box-shadow: 1px 1px 8px 0px @box-shadow;
	outline: none;
}

#cv-frame div.page button:hover {
	color: white;
}

#cv-frame div.page button:active {
	border-bottom: 4px solid #0c536a;
	box-shadow: none;
	box-shadow: inset 1px 1px 8px 0px @box-shadow;
	color: #dddddd;
}

#cv-frame div.page input[type="text"] {
	display: block;
	width: 100%;
	margin-top: 2px;
	margin-left: 0px;
}

div.cv-checkbox {
	position: relative;
	margin-right: 0;
}

#cv-frame div.page input[type="checkbox"] {
	position: absolute;
	right: 0px;
	top: 4px;
}

#cv-frame div.page input[type="range"] {
	display: block;
	max-width: 100%;
	margin-left: 0px;
	margin-bottom: 3px;
}

#cv-frame dt, #cv-frame dd {
	font-size: @font-size;
}

#cv-frame dt {
	clear: both;
	float: left;
	padding-left: 16px;
}

#cv-frame dd {
	margin-left: 60px;
}

#cv-frame p {
	padding-left: 8px;
	font-size: @font-size;
	line-height: 18px;
}

#cv-frame p.spaced {
	margin-top: 18px;
}

#cv-frame a, #cv-frame a:visited {
	padding-left: 8px;
	color: white;
	text-decoration: none;
}

#cv-frame a, #cv-frame a:hover {
	color: @highlight;
}

.overlay-branding {
	position: absolute;
	right: 0;
	top: 0;
	color: white;
	margin: 4px;
}

#cv-frame input[type=checkbox]:checked + label {
	color: @highlight;
}

#cv-frame input[type=range] {
	height: 23px;
	width: 100%;
	-webkit-appearance: none;
	margin: 0px 0;
	background-color: transparent;
}

#cv-frame input[type=range]:focus {
	outline: none;
}

.track-size-mixin() {
	width: 100%;
	height: @track-height;
	cursor: pointer;
}

.track-mixin() {
	box-shadow: @track-box-shadow;
	background: @track-background;
	border-radius: @track-border-radius;
	border: @track-border;
}

.thumb-mixin() {
	box-shadow: @thumb-box-shadow;
	border: @thumb-border;
	height: @thumb-size;
	width: @thumb-size;
	border-radius: @thumb-radius;
	background: @highlight;
	cursor: pointer;
}

#cv-frame input[type=range]::-webkit-slider-runnable-track {
	.track-size-mixin();
	.track-mixin();
}

#cv-frame input[type=range]::-webkit-slider-thumb {
	.thumb-mixin();
	-webkit-appearance: none;
	margin-top: -6px;
}

#cv-frame input[type=range]:focus::-webkit-slider-runnable-track {
	background: @track-background;
}

#cv-frame input[type=range]::-moz-range-track {
	.track-size-mixin();
	.track-mixin();
}

#cv-frame input[type=range]::-moz-range-thumb {
	.thumb-mixin();
}

#cv-frame input[type=range]::-ms-track {
	.track-size-mixin();
	background: transparent;
	border-color: transparent;
	color: transparent;
}

#cv-frame input[type=range]::-ms-fill-lower {
	.track-mixin();
}

#cv-frame input[type=range]::-ms-fill-upper {
	.track-mixin();
}

#cv-frame input[type=range]::-ms-thumb {
	.thumb-mixin();
	margin-top: 1px;
}

#cv-frame input[type=range]:focus::-ms-fill-lower {
	background: @track-background;
}

#cv-frame input[type=range]:focus::-ms-fill-upper {
	background: @track-background;
}
#cv-frame div.reload:hover {
	color: lime;
}

@box-shadow: #888888;
@highlight: #1ab4e5;
@background: #222222;
@border-tab: #888888;
@font-size: 12px;
@tab-size: 40px;
@tab-inactive: #444444;

@thumb-size: 16px;
@thumb-radius: 15px;
@thumb-border: 1px solid #00001E;
@thumb-box-shadow: 0px 0px 0px #000031;

@track-background: #eeeeee;
@track-box-shadow: 0px 0px 0px #000000;
@track-border: 0px solid #010101;
@track-border-radius: 0px;

@icon-sheet: url(../images/icons.png);

body {
	font-family: 'Source Sans Pro Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.cv-container {
	position: relative;
	overflow: hidden;
	height: 600px;
	width: 1000px;
	touch-action: none;
}

#cv-frame *, #cv-tab-box *, #cv-frame, #cv-tab-box {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#cv-frame {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 100%;
	background-color: @background;
	transform: translateX(-300px);
	transition: transform 0.25s ease-in;
	z-index: 10;
	overflow-y: auto;
	overflow-x: hidden;
}

#cv-frame div.page {
	position: absolute;
	top: 0px;
	bottom: 40px;
	left: 0px;
	width: 280px;
	height: 100%;
	color: white;
	background-color: @background;
	padding: 0 4px 20px 20px;
	cursor: default;
}

#cv-frame div.page ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 280px;
	height: 100%;
	cursor: default;
	font-size: @font-size;
	overflow-y: visible;
	overflow-x: hidden;
}

#cv-frame div.page li {
	position: relative;
	margin-left: 20px;
	border-bottom: 1px solid #444444;
}

#cv-frame div.page ul li.selected {
	color: #1ab4e5;
}

#cv-frame div.page li:hover {
	color: yellow;
}

#cv-frame div.page div#ui-path {
	font-size: @font-size;
	margin-top: 8px;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	padding: 2px 0 2px 0px;
}

#cv-frame div.page div#ui-path span {
	color: #1ab4e5;
}

#cv-frame div.page div.slide {
	position: absolute;
	top: 64px;
	bottom: 4px;
	left: 0px;
	max-height: 100%;
	background-color: @background;
	transition: transform 0.25s ease-in;
}

#cv-frame div.slide-out {
	border-right: 1px grey solid;
	transform: translateX(-100%);
}

#cv-frame div.page div.descend-tree {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0;
	color: @highlight;
	z-index: 110;
}

#cv-frame.onscreen {
	transform: none;
	transition: transform 0.25s ease-out;
}

#cv-frame a.download {
	display: block;
	width: 100%;
	margin: 16px 0 4px 0;
	border: none;
	border-bottom: 4px solid @highlight;
	padding: 0 0 4px 0;
	color: #dddddd;
	background-color: black;
	box-shadow: 1px 1px 8px 0px @box-shadow;
	outline: none;
	text-decoration: none;
	text-align: center;
}

#cv-frame a.download:hover {
	color: white;
}

#cv-frame a.download:active {
	color: #dddddd;
	border-bottom: 4px solid #0c536a;
	box-shadow: none;
	box-shadow: inset 1px 1px 8px 0px @box-shadow;
}

#cv-tab-box {
	position: absolute;
	top: 0px;
	width: @tab-size;
	z-index: 200;
	transform: none;
	transition: transform 0.25s ease-in;
}

#cv-tab-box.onscreen {
	transform: translateX( 300px );
	transition: transform 0.25s ease-out;
}

#cv-tab-box .tab {
	float: left;
	width: @tab-size;
	height: @tab-size;
	border-top: 1px solid black;
	border-left: thin @border-tab solid;
	background-color: @tab-inactive;
	background-origin: content-box;
	background-image: @icon-sheet;
	padding: 1px;
}

#cv-tab-box #close {
	background-color: @background;
	background-image: @icon-sheet;
	background-position: -360px;
	border-left: none;
	display: none;
}

#cv-tab-box.onscreen #close {
	display: block;
	margin-left: -100px;
	z-index: 200;
}

#cv-tab-box #fullscreen {
	display: none;
	border-left: none;
	background-color: @background;
}

#cv-tab-box.onscreen #fullscreen {
	position: absolute;
	top: 0px;
	left: -60px;
	display: block;
	z-index: 400;
}

#fullscreen.expand {
	background-image: @icon-sheet;
	background-position: -252px;
}

#fullscreen.collapse {
	background-image: @icon-sheet;
	background-position: -216px;
}

#cv-tab-box #icon_settings {
	background-position: 0 0;
}

#cv-tab-box #icon_terrain {
	background-position: -36px 0;
}

#cv-tab-box #icon_explore {
	background-position: -72px 0;
}

#cv-tab-box #icon_route {
	background-position: -108px 0;
}

#cv-tab-box #icon_info {
	background-position: -144px 0;
}

#cv-tab-box #icon_help {
	background-position: -180px 0;
}

#cv-tab-box.onscreen div.toptab {
	background-color: @background;
	border-top: 1px solid @border-tab;
	border-bottom: 1px solid @border-tab;
	border-left: none;
	border-right: 2px solid @highlight;
}

@media (min-width: 768px) {

	/* default to normal size */
	body div.toggle-fullscreen {
		position: fixed !important;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 999;
	}

}

@media (max-width: 767px) {

	#cv-frame {
		width: 100%;
		transform: translateY(-100%);
	}

	#cv-frame.onscreen {
		padding-top: @tab-size;
	}

	#cv-frame div.page {
		width: 95%;
		top: @tab-size;
	}

	#cv-frame div.page div.slide, #cv-frame div.slide ul {
		width: 100%;
	}

	#cv-tab-box {
		left: 0px;
		right: 0px;
		height: @tab-size;
		width: auto;
	}

	#cv-tab-box.onscreen {
		transform: none;
		background-color: @tab-inactive;
		border-bottom: thin solid white;
	}

	#cv-tab-box.onscreen .tab {
		border-bottom: thin solid white;
	}

	#cv-tab-box.onscreen #fullscreen.tab {
		position: static;
		float: left;
		margin: 0;
		background-color: @tab-inactive;
	}

	/* default to full screen */
	body div.cv-container:not( .toggle-fullscreen ) {
		position: fixed !important;
		top: 0px !important;
		bottom: 0px !important;
		left: 0px !important;
		right: 0px !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 999;
	}

	#cv-tab-box.onscreen div.toptab {
		background-color: @background;
		border-left: none;
		border-right: 1px solid gray;
		border-top: 4px solid @highlight;
		border-bottom: none;
		z-index: 20;
	}

	#cv-tab-box #close {
		position: fixed;
		background-color: @tab-inactive;
		background-image: @icon-sheet;
		background-position: -324px;
		top: 0px;
		right: 0px;
		left: auto;
	}

	#cv-tab-box.onscreen #close {
		float: right;
		margin: 0;
	}

}

#cv-frame div.page div.header {
	height: 16px;
	margin: 16px 0px 8px 0px;
	padding-left: 2px;
	font-weight: bold;
}

#cv-frame div.page div.control {
	margin: 2px 0 2px 0;
	padding: 2px 2px 0 0;
}

#cv-frame div.page label {
	display: block;
	border-top: 1px solid grey;
	padding: 2px 0 8px 0px;
	font-size: @font-size;
}

#cv-frame div.page select {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 5px 0px;
	padding-top: 2px;
}

#cv-frame div.page select:empty {
	background-color: #888888;
}

#cv-frame div.page button {
	display: block;
	width: 100%;
	height: 28px;
	margin: 16px 0 4px 0;
	border: none;
	border-bottom: 4px solid @highlight;
	padding-bottom: 4px;
	color: #dddddd;
	background-color: black;
	box-shadow: 1px 1px 8px 0px @box-shadow;
	outline: none;
}

#cv-frame div.page button:hover {
	color: white;
}

#cv-frame div.page button:active {
	border-bottom: 4px solid #0c536a;
	box-shadow: none;
	box-shadow: inset 1px 1px 8px 0px @box-shadow;
	color: #dddddd;
}

#cv-frame div.page input[type="text"] {
	display: block;
	width: 100%;
	margin-top: 2px;
	margin-left: 0px;
}

div.cv-checkbox {
	position: relative;
	margin-right: 0;
}

#cv-frame div.page input[type="checkbox"] {
	position: absolute;
	right: 0px;
	top: 4px;
}

#cv-frame div.page input[type="range"] {
	display: block;
	max-width: 100%;
	margin-left: 0px;
	margin-bottom: 3px;
}

#cv-frame dt, #cv-frame dd {
	font-size: @font-size;
}

#cv-frame dt {
	clear: both;
	float: left;
	padding-left: 16px;
}

#cv-frame dd {
	margin-left: 60px;
}

#cv-frame p {
	padding-left: 8px;
	font-size: @font-size;
	line-height: 18px;
}

#cv-frame p.spaced {
	margin-top: 18px;
}

#cv-frame a, #cv-frame a:visited {
	padding-left: 8px;
	color: white;
	text-decoration: none;
}

#cv-frame a, #cv-frame a:hover {
	color: yellow;
}

.overlay-branding {
	position: absolute;
	right: 0;
	top: 0;
	color: white;
	margin: 4px;
}

#cv-frame input[type=checkbox]:checked + label {
	color: @highlight;
}

#cv-frame input[type=range] {
	height: 23px;
	width: 100%;
	-webkit-appearance: none;
	margin: 10px 0;
	background-color: transparent;
}

#cv-frame input[type=range]:focus {
	outline: none;
}

.track-mixin() {
	box-shadow: @track-box-shadow;
	background: @track-background;
	border-radius: @track-border-radius;
	border: @track-border;
}

.thumb-mixin() {
	box-shadow: @thumb-box-shadow;
	border: @thumb-border;
	height: @thumb-size;
	width: @thumb-size;
	border-radius: @thumb-radius;
	background: @highlight;
	cursor: pointer;
}

#cv-frame input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	.track-mixin();
}

#cv-frame input[type=range]::-webkit-slider-thumb {
	.thumb-mixin();
	-webkit-appearance: none;
	margin-top: -6px;
}

#cv-frame input[type=range]:focus::-webkit-slider-runnable-track {
	background: @track-background;
}

#cv-frame input[type=range]::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	.track-mixin();
}

#cv-frame input[type=range]::-moz-range-thumb {
	.thumb-mixin();
}

#cv-frame input[type=range]::-ms-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

#cv-frame input[type=range]::-ms-fill-lower {
	.track-mixin();
}

#cv-frame input[type=range]::-ms-fill-upper {
	.track-mixin();
}

#cv-frame input[type=range]::-ms-thumb {
	.thumb-mixin();
	margin-top: 1px;
}

#cv-frame input[type=range]:focus::-ms-fill-lower {
	background: @track-background;
}

#cv-frame input[type=range]:focus::-ms-fill-upper {
	background: @track-background;
}
#cv-frame div.reload:hover {
	color: lime;
}


改进textarea样式

改进textarea样式

@import (reference) "global";
/* Text Area */
@textAreaResize: vertical;
@textAreaLineHeight: 1.2857;
@textAreaMinHeight: 8em;
@textAreaMaxHeight: 24em;
@textAreaBackground: #FFFFFF;
@textAreaBorder: 1px solid @borderColor;
@transition: background-color @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing;
@textAreaTransition: @transition;

@textAreaFocusBackground: #FFFFFF;
@textAreaFocusBorderColor: #85B7D9;
@textAreaFocusColor: rgba(0, 0, 0, 0.95);
@textAreaFocusBoxShadow: none;
@textAreaFocusBorderRadius: @defaultBorderRadius;

@textAreaErrorColor: #9F3A38;
@textAreaBorderColor: #E0B4B4;
@textAreaBackgroundColor: #FFF6F6;
@textAreaErrorFocusColor: rgba(255, 80, 80, 0.7);

.ui.input.textarea {
	width: 100%;
}

textarea {
	margin: 0em;
	-webkit-appearance: none;
	tap-highlight-color: rgba(255, 255, 255, 0);
	padding: 0.78571429em 1em;
	background: #FFFFFF;
	border: 1px solid rgba(34, 36, 38, 0.15);
	outline: none;
	color: rgba(0, 0, 0, 0.87);
	border-radius: 0.28571429rem;
	box-shadow: 0em 0em 0em 0em transparent inset;
	-webkit-transition: color 0.1s ease, border-color 0.1s ease;
	transition: color 0.1s ease, border-color 0.1s ease;
	font-size: 1em;
	line-height: 1.2857;
	resize: vertical;
	vertical-align: top;
	width: 100%;
}

textarea:not([rows]) {
	height: 100%;
	min-height: 1em;
}

textarea:focus {
	color: @textAreaFocusColor;
	border-color: @textAreaFocusBorderColor;
	border-radius: @textAreaFocusBorderRadius;
	background: @textAreaFocusBackground;
	box-shadow: @textAreaFocusBoxShadow;
	-webkit-appearance: none;
}

textarea {
	vertical-align: top;
}

textarea.error {
	background: @textAreaBackgroundColor;
	border-color: @textAreaBorderColor;
	color: @textAreaErrorColor;
	box-shadow: none;
}

@import (reference) "global";
/* Text Area */
@textAreaResize: vertical;
@textAreaLineHeight: 1.2857;
@textAreaMinHeight: 8em;
@textAreaMaxHeight: 24em;
@textAreaBackground: #FFFFFF;
@textAreaBorder: 1px solid @borderColor;
@transition: background-color @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing;
@textAreaTransition: @transition;

@textAreaFocusBackground: #FFFFFF;
@textAreaFocusBorderColor: #85B7D9;
@textAreaFocusColor: rgba(0, 0, 0, 0.95);
@textAreaFocusBoxShadow: none;
@textAreaFocusBorderRadius: @defaultBorderRadius;

@textAreaErrorColor: #9F3A38;
@textAreaBorderColor: #E0B4B4;
@textAreaBackgroundColor: #FFF6F6;
@textAreaErrorFocusColor: rgba(255, 80, 80, 0.7);

.ui.input.textarea {
	width: 100%;
}

textarea {
	margin: 0em;
	-webkit-appearance: none;
	tap-highlight-color: rgba(255, 255, 255, 0);
	padding: 0.78571429em 1em;
	background: #FFFFFF;
	border: 1px solid rgba(34, 36, 38, 0.15);
	outline: none;
	color: rgba(0, 0, 0, 0.87);
	border-radius: 0.28571429rem;
	box-shadow: 0em 0em 0em 0em transparent inset;
	-webkit-transition: color 0.1s ease, border-color 0.1s ease;
	transition: color 0.1s ease, border-color 0.1s ease;
	font-size: 1em;
	line-height: 1.2857;
	resize: vertical;
	vertical-align: top;
	width: 100%;
}

textarea:not([rows]) {
	height: 12em;
	min-height: 1em;
}

textarea:focus {
	color: @textAreaFocusColor;
	border-color: @textAreaFocusBorderColor;
	border-radius: @textAreaFocusBorderRadius;
	background: @textAreaFocusBackground;
	box-shadow: @textAreaFocusBoxShadow;
	-webkit-appearance: none;
}

textarea {
	vertical-align: top;
}

textarea.error {
	background: @textAreaBackgroundColor;
	border-color: @textAreaBorderColor;
	color: @textAreaErrorColor;
	box-shadow: none;
}


Delete mixins.less

Delete mixins.less

.button-variant(@color; @background; @border) {
	color: @color;
	background-color: @background;
	border-color: @border;

	&:hover,
	&:focus,
	&:active,
	&.active,
	.open .dropdown-toggle& {
		color: @color;
		background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
	}
	&:active,
	&.active,
	.open .dropdown-toggle& {
		background-image: none;
	}
	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&:active,
		&.active {
			background-color: @background;
			border-color: @border;
		}
	}

	.badge {
		color: @background;
		background-color: @color;
	}
}

.transition-all() {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}


navbar colors

navbar colors

/*
Sidhuvud/Sidfot

Sidhuvud och sidhuvud används för att [signalera källa och tjänstens namn](http://webbriktlinjer.se/r/22-ange-vilken-organisation-som-ar-utgivare-till-webbplatsen-pa-samtliga-sidor/).

Styleguide 3.
*/

/*
Sidhuvud

För tjänster med generiskt uttryck finns två olika varianter av sidhuvuden.

Vid behov använd toppnavigation för länkar som till exempel: Logga in, Feedback, Kontakt.

Styleguide 3.1
*/

/*
Sidhuvud version 1

I denna version skrivs KB:s logotype följt avntjänstens namn ut i headern. Typsnittet för namn är Open sans googlefont. Viktigt att tänka på är att länka logotyp + namn till tjänstens startsida. Vid behov ange beskrivande text om tjänsten i kursiv stil.

Markup:

Markup:

	    Projektnamn

Home

About

Contact

	        Dropdown

	    Projektnamn

Home

About

Contact

	        Dropdown

Styleguide 3.1.1
*/

/*
Sidhuvud version 2

I denna version används KB:s logotyp i headern. Tjänstens namn skrivs ut centrerat i jumbotronen.

Markup:

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        Toggle navigation

      </button>

Feedback

Logga in

Tjänst

Tilläggstext om tjänsten

Styleguide 3.1.2
*/

.navbar {
	border-radius: 0px;
	margin-bottom: 0px;
	border-width: 0px;

  color: @black;
  .navbar-nav>li>a {
    &:hover, &:focus {
      background-color: @gray-lighter;
    }
    &:active {
      background-color: @gray-light;
    }
    color: @black;
  }
}
.navbar-collapse {
	border-color: rgba(0, 0, 0, 0.2) !important;
}
.navbar-inverse {
	background-color: @black;
	border-color: @black;
	color: @white;
	.navbar-brand {
    color: @white;
	}
}
.navbar-inverse .navbar-nav>li>a {
  &:hover, &:focus {
    background-color: @gray-dark;
  }
  &:active {
    background-color: @gray-darker;
  }
  color: @white;
}

.navbar-brand {
	color: @gray-dark;
	font-size: 25px;
	font-weight: 500;
	small {
		margin-left: 10px;
		margin-top: -5px;
		font-size: 16px;
	}
}
.navbar-logo {
  padding: 0px;
  img {
  	margin: 10% 0px 10% 10%;
    height: 80%;
  }
  margin: 0px 15px 0px 0px;
}

/*
Logotyper

KBs Logotyp i SVG-format.

## Filer

* [KB Logo svart](./assets/kb_logo_black.svg)
* [KB Logo vit](./assets/kb_logo_white.svg)
* [KB Text svart](./assets/kb_text_black.svg)
* [KB Text vit](./assets/kb_text_white.svg)

.logo-small - Liten logga (50px)
.logo-medium - Mellan logga (100px)
.logo-large - Stor logga (150px)

För att indikera att en logo endast är dekorativ ska följande uppfyllas:

>Check that title attribute is either absent or empty.
>
>Check that alt attribute is present and empty.

* http://www.w3.org/TR/WCAG20-TECHS/H67.html

Markup:

Styleguide 3.2
*/

.logo-small {
	height: 50px;
}
.logo-medium {
	height: 100px;
}
.logo-large {
	height: 150px;
}

/*
Sidfot

Det finns två varianter av sidfötter, den minimala och den utökade. Det går att kombinera de båda alternativt att endast använda den minimala.

### Användning
Använd .footer-container för att stapla flera footers inuti footer-tagen.

Styleguide 3.3
*/

/*
Minimal sidfot

Använd den minimala sidfoten för tjänster där behovet endast är att förmedla att KB är avsändare. Länka Kungl. biblioteket till www.kb.se och ange rätt länk till specifik support för tjänsten. Kan leda till Kundo-forum, mejladress eller en kontaktsida.

Markup:

            KUNGL. BIBLIOTEKET

          Support: test.test@kb.se

Styleguide 3.3.1
*/

/*
Utökad sidfot

Använd den utökade sidfoten om det finns behov av att förmedla ytterligare information som till exempel fler kontaktvägar, relaterade tjänster, licensuppgifter eller redovisa samarbeten med övriga organisationer för den specifika tjänsten. Tänk på att använda ytan i den utökade sidfoten endast för att stötta användarnas behov av mer information för att nå sina mål.

Markup:

List 1

Lorem ipsum

Dorem

Ipsum santi laninum

Verti absolutom

Neo geosatium

Verti absolutom

Neo geosatium

List 2

Ipsum santi laninum

Lorem ipsum

Neo geosatium

Verti absolutom

Neo geosatium

Dorem

Verti absolutom

List 3

Verti absolutom

Ipsum santi laninum

Dorem

Lorem ipsum

Neo geosatium

Verti absolutom

Neo geosatium

              KUNGL. BIBLIOTEKET

            Support: test.test@kb.se

Styleguide 3.3.2
*/
.footer {
	overflow: hidden;
}
.footer {
  .logo-small, .logo-medium, .logo-large {
    @media screen and (max-width: @screen-sm-min) {
      margin-bottom: 1em;
    }
  }
  &>div:first-of-type {
    margin-top: 50px;
  }
}
.footer-container {
  &>div {
    padding: 25px 0px;
  }
}

.footer h1 {
  margin-top: 25px;
  font-size: 18px;
  font-weight: 700;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
}
.footer h2 {
  font-size: 14px;
  font-weight: 700;
}

/*
Sidhuvud/Sidfot

Sidhuvud och sidhuvud används för att [signalera källa och tjänstens namn](http://webbriktlinjer.se/r/22-ange-vilken-organisation-som-ar-utgivare-till-webbplatsen-pa-samtliga-sidor/).

Styleguide 3.
*/

/*
Sidhuvud

För tjänster med generiskt uttryck finns två olika varianter av sidhuvuden.

Vid behov använd toppnavigation för länkar som till exempel: Logga in, Feedback, Kontakt.

Styleguide 3.1
*/

/*
Sidhuvud version 1

I denna version skrivs KB:s logotype följt avntjänstens namn ut i headern. Typsnittet för namn är Open sans googlefont. Viktigt att tänka på är att länka logotyp + namn till tjänstens startsida. Vid behov ange beskrivande text om tjänsten i kursiv stil.

Markup:

Markup:

	    Projektnamn

Home

About

Contact

	        Dropdown

	    Projektnamn

Home

About

Contact

	        Dropdown

Styleguide 3.1.1
*/

/*
Sidhuvud version 2

I denna version används KB:s logotyp i headern. Tjänstens namn skrivs ut centrerat i jumbotronen.

Markup:

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        Toggle navigation

      </button>

Feedback

Logga in

Tjänst

Tilläggstext om tjänsten

Styleguide 3.1.2
*/

.navbar {
	border-radius: 0px;
	margin-bottom: 0px;
	border-width: 0px;

	color: @black;
	.navbar-nav>li>a {
		&:hover, &:focus {
			background-color: @gray-lighter;
		}
		&:active {
			background-color: @gray-light;
		}
		color: @black;
	}
}
.navbar-collapse {
	border-color: rgba(0, 0, 0, 0.2) !important;
}
.navbar-inverse {
	background-color: @black;
	border-color: @black;
	color: @white;
	.navbar-brand {
    color: @white;
	}
}
.navbar-inverse .navbar-nav>li>a {
  &:hover {
    background-color: @gray-dark;
  }
  color: @white !important;
}

.navbar-brand {
	color: @gray-dark;
	font-size: 25px;
	font-weight: 500;
	small {
		margin-left: 10px;
		margin-top: -5px;
		font-size: 16px;
	}
}
.navbar-logo {
  padding: 0px;
  img {
  	margin: 10% 0px 10% 10%;
    height: 80%;
  }
  margin: 0px 15px 0px 0px;
}

/*
Logotyper

KBs Logotyp i SVG-format.

## Filer

* [KB Logo svart](./assets/kb_logo_black.svg)
* [KB Logo vit](./assets/kb_logo_white.svg)
* [KB Text svart](./assets/kb_text_black.svg)
* [KB Text vit](./assets/kb_text_white.svg)

.logo-small - Liten logga (50px)
.logo-medium - Mellan logga (100px)
.logo-large - Stor logga (150px)

För att indikera att en logo endast är dekorativ ska följande uppfyllas:

>Check that title attribute is either absent or empty.
>
>Check that alt attribute is present and empty.

* http://www.w3.org/TR/WCAG20-TECHS/H67.html

Markup:

Styleguide 3.2
*/

.logo-small {
	height: 50px;
}
.logo-medium {
	height: 100px;
}
.logo-large {
	height: 150px;
}

/*
Sidfot

Det finns två varianter av sidfötter, den minimala och den utökade. Det går att kombinera de båda alternativt att endast använda den minimala.

### Användning
Använd .footer-container för att stapla flera footers inuti footer-tagen.

Styleguide 3.3
*/

/*
Minimal sidfot

Använd den minimala sidfoten för tjänster där behovet endast är att förmedla att KB är avsändare. Länka Kungl. biblioteket till www.kb.se och ange rätt länk till specifik support för tjänsten. Kan leda till Kundo-forum, mejladress eller en kontaktsida.

Markup:

            KUNGL. BIBLIOTEKET

          Support: test.test@kb.se

Styleguide 3.3.1
*/

/*
Utökad sidfot

Använd den utökade sidfoten om det finns behov av att förmedla ytterligare information som till exempel fler kontaktvägar, relaterade tjänster, licensuppgifter eller redovisa samarbeten med övriga organisationer för den specifika tjänsten. Tänk på att använda ytan i den utökade sidfoten endast för att stötta användarnas behov av mer information för att nå sina mål.

Markup:

List 1

Lorem ipsum

Dorem

Ipsum santi laninum

Verti absolutom

Neo geosatium

Verti absolutom

Neo geosatium

List 2

Ipsum santi laninum

Lorem ipsum

Neo geosatium

Verti absolutom

Neo geosatium

Dorem

Verti absolutom

List 3

Verti absolutom

Ipsum santi laninum

Dorem

Lorem ipsum

Neo geosatium

Verti absolutom

Neo geosatium

              KUNGL. BIBLIOTEKET

            Support: test.test@kb.se

Styleguide 3.3.2
*/
.footer {
	overflow: hidden;
}
.footer {
  .logo-small, .logo-medium, .logo-large {
    @media screen and (max-width: @screen-sm-min) {
      margin-bottom: 1em;
    }
  }
  &>div:first-of-type {
    margin-top: 50px;
  }
}
.footer-container {
  &>div {
    padding: 25px 0px;
  }
}

.footer h1 {
  margin-top: 25px;
  font-size: 18px;
  font-weight: 700;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
}
.footer h2 {
  font-size: 14px;
  font-weight: 700;
}


breadcrumb tweaks

breadcrumb tweaks