framework7-without-localstorage/src/less/ios/framework7.ios.colors.less

Full featured mobile HTML framework for building iOS & Android apps

@import url('_mixins.less');
@import url('_colors-vars.less');
/*==========================
Framework7 Color Themes
==========================*/
.theme-mixin(@colorName, @color, @colorHex) {
    //Buttons
    .theme-@{colorName} .button:not(.button-fill) {
        border-color: @color;
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.15);
        }
        &.active {
            background-color: @color;
            color:#fff;
        }
    }
    .theme-@{colorName} .button.button-fill {
        background: @color;
        color:#fff;
    }
    // Progress bar
    .progressbar {
        &.theme-@{colorName}, .theme-@{colorName} & {
            span {
                background-color: @color;
            }
        }
    }
    .progressbar-infinite {
        &.theme-@{colorName}, .theme-@{colorName} & {
            &:before {
                background-color: @color;
            }
        }
    }
    //Icons
    .theme-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    i.icon-next.color-@{colorName}, i.icon-next.theme-@{colorName}, .theme-@{colorName} i.icon-next {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#@{colorHex}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
    i.icon-prev.color-@{colorName}, i.icon-prev.theme-@{colorName}, .theme-@{colorName} i.icon-prev {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#@{colorHex}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    i.icon-back.color-@{colorName}, i.icon-back.theme-@{colorName}, .theme-@{colorName} i.icon-back {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#@{colorHex}'/></svg>");
    }
    i.icon-forward.color-@{colorName}, i.icon-forward.theme-@{colorName}, .theme-@{colorName} i.icon-forward {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#@{colorHex}'/></svg>");
    }
    i.icon-bars.color-@{colorName}, i.icon-bars.theme-@{colorName}, .theme-@{colorName} i.icon-bars {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'><path fill='#@{colorHex}' d='M0,0h2v2H0V0z M4,0h17v1H4V0z M0,6h2v2H0V6z M4,6h17v1H4V6z M0,12h2v2H0V12z M4,12h17v1H4V12z'/></svg>");
        @media (-webkit-min-device-pixel-ratio: 2) {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='#@{colorHex}' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
        }
    }

    // Theme
    .theme-@{colorName} {
        a, .item-link.list-button, .list-button {
            color: @color;
        }
        .tabbar, .tabbar& {
            a, a i {
                color:inherit;
            }
            a.active, a.active i {
                color:@color;
            }
        }
        .messagebar .messagebar-send-link {
            background-color: @color;
        }
        label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
        label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox,
        .form-checkbox input[type="checkbox"]:checked ~ i,
        label.label-checkbox& input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
        label.label-checkbox& input[type="radio"]:checked + .item-media i.icon-form-checkbox,
        .form-checkbox& input[type="checkbox"]:checked ~ i {
            background-color: @color;
        }
        .form-radio input[type="radio"]:checked ~ i,
        label.label-radio input[type="checkbox"]:checked ~ .item-inner,
        label.label-radio input[type="radio"]:checked ~ .item-inner,
        .form-radio& input[type="radio"]:checked ~ i,
        label.label-radio& input[type="checkbox"]:checked ~ .item-inner,
        label.label-radio& input[type="radio"]:checked ~ .item-inner {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='#@{colorHex}' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
        // Data Tables
        .data-table, .data-table& {
            .data-table-header-selected {
                background: rgba(red(@color), green(@color), blue(@color), 0.1);
            }
            .data-table-title-selected {
                color: @color;
            }
        }
    }
    .swiper-pagination {
        &.color-@{colorName}, .theme-@{colorName} & {
            .swiper-pagination-bullet-active {
                background-color: @color;
            }
            .swiper-pagination-progressbar {
                background-color: @color;
            }
        }
        &.swiper-pagination-progress.bg-@{colorName} {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.25);
        }
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        &.color-@{colorName}, .theme-@{colorName} & {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#@{colorHex}'/></svg>");
        }
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        &.color-@{colorName}, .theme-@{colorName} & {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#@{colorHex}'/></svg>");
        }
    }
    // Floating Button
    .floating-button, .speed-dial-buttons a {
        .theme-@{colorName} &, &.theme-@{colorName} {
            color:#fff;
            background: @color;
            html:not(.watch-active-state) &:active, &.active-state {
                background: darken(@color, 8%);
            }
            i {
                color: inherit;
            }
        }
    }
    // Range Slider
    .range-slider {
        .theme-@{colorName} &, &.theme-@{colorName} {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
            input[type="range"]::-ms-fill-lower {
                background-color: @color;
            }
        }
    }
    // Badges
    .badge.theme-@{colorName} {
    	background-color:@color;
    	color: #fff;
    }
}
.theme-mixin(e('gray'), #8e8e93, '8e8e93');
.theme-mixin(e('white'), #ffffff, 'ffffff');
.theme-mixin(e('black'), #000000, '000000');
.theme-mixin(e('lightblue'), #5ac8fa, '5ac8fa');
.theme-mixin(e('yellow'), #ffcc00, 'ffcc00');
.theme-mixin(e('orange'), #ff9500, 'ff9500');
.theme-mixin(e('pink'), #ff2d55, 'ff2d55');
.theme-mixin(e('blue'), #007aff, '007aff');
.theme-mixin(e('green'), #4cd964, '4cd964');
.theme-mixin(e('red'), #ff3b30, 'ff3b30');

/*==========================
Framework7 Color + Bg + Border
==========================*/
.color-mixin(@colorName, @color, @colorHex) {
    // Overwrite colors for links, icons, buttons, badges, icon, preloader
    //Plain color and links
    .color-@{colorName} {
        color: @color;
        .list-block .item-link.list-button&, .list-button&, .tabbar a.active&, a& {
            color: @color;
        }
        .label-switch input[type="checkbox"]:checked + .checkbox&, .label-switch& input[type="checkbox"]:checked + .checkbox{
            background-color: @color;
        }
    }
    //Buttons
    .color-@{colorName}.button:not(.button-fill), .color-@{colorName}.buttons-row .button {
        border-color: @color;
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.15);
        }
        &.active {
            background-color: @color;
            color:#fff;
        }
    }
    .button.button-fill.color-@{colorName} {
        background: @color;
        color:#fff;
    }
    // Progress bar
    .progressbar {
        &.color-@{colorName}, &.bg-@{colorName} {
            span {
                background-color: @color;
            }
        }
    }
    .progressbar-infinite {
        &.color-@{colorName}, &.bg-@{colorName} {
            &:before {
                background-color: @color;
            }
        }
    }
    //Icons
    .color-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    // Preloader
    .preloader.color-@{colorName}, .preloader.preloader-@{colorName} {
        .encoded-svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#@{colorHex}' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
    }
    // Bg rule
    .bg-@{colorName}, .button.button-fill.bg-@{colorName}, a.bg-@{colorName}, .list-block .swipeout-actions-left a.bg-@{colorName}, .list-block .swipeout-actions-right a.bg-@{colorName} {
        background-color: @color;
    }
    // Border rule
    .border-@{colorName} {
        border-color: @color;
        .list-block &.item-inner, .list-block ul&, & {
            &:after, &:before {
                background-color: @color;
            }
        }
    }
    // Floating Button
    .floating-button, .speed-dial-buttons a {
        &.color-@{colorName}, &.bg-@{colorName} {
            color:#fff;
            background: @color;
            html:not(.watch-active-state) &:active, &.active-state {
                background: darken(@color, 8%);
            }
            i {
                color: inherit;
            }
        }
    }
    // Range Slider
    .range-slider {
        &.color-@{colorName} {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
            input[type="range"]::-ms-fill-lower {
                background-color: @color;
            }
        }
    }
    // Badges
    .badge.color-@{colorName} {
        background-color:@color;
        color: #fff;
    }
}
.color-mixin(e('gray'), #8e8e93, '8e8e93');
.color-mixin(e('white'), #ffffff, 'ffffff');
.color-mixin(e('black'), #000000, '000000');
.color-mixin(e('lightblue'), #5ac8fa, '5ac8fa');
.color-mixin(e('yellow'), #ffcc00, 'ffcc00');
.color-mixin(e('orange'), #ff9500, 'ff9500');
.color-mixin(e('pink'), #ff2d55, 'ff2d55');
.color-mixin(e('blue'), #007aff, '007aff');
.color-mixin(e('green'), #4cd964, '4cd964');
.color-mixin(e('red'), #ff3b30, 'ff3b30');

/*==========================
Framework7 Layouts Themes
==========================*/
/* === Dark layout === */
.layout-dark {
    @pageBg: #222426;
    @barsBg: #131313;
    @barsBorder: #333;
    @barsText: #fff;
    @tabBarText: #fff;
    @text: #ddd;
    @lightText: #bbb;
    @strongText: #fff;
    @activeLink: #29292f;
    @blockBg: #1c1d1f;
    @blockBorder: #393939;
    @blockStrongBg: #1c1d1f;
    @dividerBg: #1a1a1a;
    @itemAfterText: @lightText;
    @searchbarBg: #333;
    @searchbarBorder: #333;
    @swipeoutButton: #444;
    @checkboxBorder: @blockBorder;
    .navbar, .navbar&, .subnavbar, .subnavbar& {
        .hairline-color(bottom, @barsBorder);
        background-color: @barsBg;
        color:@barsText;
    }
    .toolbar, .toolbar& {
        .hairline-color(top, @barsBorder);
        background-color: @barsBg;
        color:@barsText;
    }
    // Picker
    .picker-modal {
        .toolbar {
            background-color: @barsBg;
        }
    }
    .popover .picker-modal .toolbar {
        background: none;
    }
    .picker-calendar-week-days {
        color:#fff;
        background-color: @barsBg;
    }
    .popover .picker-modal, .picker-modal.picker-modal-inline {
        .picker-center-highlight {
            .hairline-color(top, @barsBorder);
            .hairline-color(bottom, @barsBorder);
        }
        .picker-item.picker-selected {
            color:#fff;
        }
        .picker-calendar-week-days {
            color: #fff;
        }
        .picker-calendar-day {
            color:#fff;
            &.picker-calendar-day-prev, &.picker-calendar-day-next {
                color: #777;
            }
            &.picker-calendar-day-disabled {
                color: #555;
            }
            &.picker-calendar-day-today span {
                background: #333;
            }
            &.picker-calendar-day-has-events span:after {
                background: #555;
            }
        }
        .picker-calendar-week-days, .picker-calendar-row {
            .hairline-color(bottom, @barsBorder);
        }
        .toolbar ~ .picker-modal-inner .picker-calendar-months,  .picker-calendar-week-days ~ .picker-calendar-months {
            .hairline-color(top, @barsBorder);
        }

    }
    .popover .picker-modal {
        .toolbar {
            .hairline-color(bottom, @barsBorder);
        }
    }
    // Photo Browser
    .photo-browser, .views .view[data-page="photo-browser-slides"] {
        .navbar, .toolbar {
            color:#000;
            background: rgba(247,247,247,0.95);
        }
    }
    .photo-browser-dark {
        .navbar, .toolbar {
            background: rgba(30,30,30,0.8);
            color:#fff;
        }
    }

    .tabbar a:not(.active) {
        color:@tabBarText;
    }
    .page, .login-screen-content, .page&, .panel, .panel& {
        background-color: @pageBg;
        color:@text;
    }
    .content-block-title {
        color:@strongText;
    }
    .content-block, .content-block& {
        color:@lightText;
    }
    .content-block-inner {
        background: @blockStrongBg;
        color:@text;
        .hairline-color(top, @blockBorder);
        .hairline-color(bottom, @blockBorder);
    }
    .list-block, .list-block& {
        ul {
            background: @blockBg;
            .hairline-color(top, @blockBorder);
            .hairline-color(bottom, @blockBorder);
        }
        &.inset ul{
            background: @blockStrongBg;
        }
        &.notifications > ul {
            background: none;
        }
    }
    .autocomplete-dropdown  {
        background: @blockBg;
        .list-block b {
            color: #fff;
        }
    }
    .card {
        background: @blockBg;
    }
    .card-header{
        .hairline-color(bottom, @blockBorder);
    }
    .card-footer {
        .hairline-color(top, @blockBorder);
        color:@lightText;
    }
    .popover, .popover& {
        background: rgba(0,0,0,0.8);
        .popover-angle:after {
            background: rgba(0,0,0,0.8);
        }
        .list-block ul {
            background: none;
        }

    }
    .actions-popover .list-block ul {
        .hairline-color(top, @blockBorder);
        .hairline-color(bottom, @blockBorder);
    }
    .actions-popover .actions-popover-label {
        .hairline-color(bottom, @blockBorder);
    }
    li.sorting {
        background-color: @activeLink;
    }
    .swipeout-actions-left a, .swipeout-actions-right a {
        background-color: @swipeoutButton;
    }
    .item-inner, .list-block ul ul li:last-child .item-inner {
        .hairline-color(bottom, @blockBorder);
    }
    .item-after {
        color:@itemAfterText;
    }
    .item-link, label.label-checkbox, label.label-radio {
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: @activeLink;
        }
    }
    .item-link.list-button, .list-button {
        .hairline-color(bottom, @blockBorder);
    }
    .list-block-label {
        color:@lightText;
    }
    .item-divider, .list-group-title {
        background: @dividerBg;
        color:@lightText;
        .hairline-color(top, @blockBorder);
    }

    // Searchbar
    .searchbar {
        background: @searchbarBg;
        .hairline-color(bottom, @searchbarBorder);
    }

    // Forms
    .list-block, .list-block& {
        input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
            color:@strongText;
        }
    }
    .label-switch .checkbox {
        background-color: @checkboxBorder;
        &:before {
            background-color: @blockBg;
        }
    }
    .range-slider input[type="range"]:after {
        background: @blockBg;
    }
    .range-slider input[type="range"]::-ms-thumb {
        border: none;
    }
    // Timeline
    .timeline-item-inner {
        background: @blockBg;
    }
    .timeline-item-divider {
        background: rgba(255,255,255,0.3);
    }
    .content-block-inner .timeline-item-inner {
        border-color: @blockBorder;
    }
    .timeline-item-time {
        color: #8e8e93;
    }
    .timeline-horizontal .timeline-item-date {
        .hairline-color(bottom, @barsBorder);
        background-color: @barsBg;
    }
    .timeline-horizontal .timeline-item {
        .hairline-color(right, @barsBorder);
    }
    .timeline-year-title, .timeline-month-title {
        background-color: @barsBg;
    }
    .timeline-month .timeline-item {
        .hairline-color(top, @barsBorder);
    }
    .timeline-year {
        .hairline-color(right, @barsBorder);
    }
    // Data Table
    .data-table {
        tbody {
            tr.data-table-row-selected {
                background: rgba(255,255,255,0.05);
            }
            td {
                .hairline(top, @blockBorder);
            }
        }
        html:not(.ios):not(.android) & {
            tbody tr:hover {
                background: rgba(255,255,255,0.05);
            }
        }
        .sortable-cell:not(.numeric-cell):after, .sortable-cell.numeric-cell:before {
            .encoded-svg-background("<svg fill='#ffffff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z' fill='#ffffff'/></svg>");
        }

        // Collapsible
        @media (max-width:480px) and (orientation:portrait) {
            &.data-table-collapsible {
                tr {
                    .hairline(top, @blockBorder);
                }
                tr:hover {
                    background-color: inherit;
                }
            }
        }
    }
}

/* === White layout === */
.layout-white {
    @pageBg: #fff;
    @barsBg: #fff;
    @barsBorder: #ddd;
    @barsText: #000;
    @tabBarText: #777;
    @text: #000;
    @lightText: #777;
    @strongText: #777;
    @activeLink: #eee;
    @blockBg: @pageBg;
    @blockBorder: #ddd;
    @blockStrongBg: #fafafa;
    @dividerBg: #f7f7f7;
    @itemAfterText: #8e8e93;
    @searchbarBg: #c9c9ce;
    @searchbarBorder: #b4b4b4;
    @swipeoutButton: #c7c7cc;
    @checkboxBorder: #e5e5e5;
    .navbar, .navbar&, .subnavbar, .subnavbar& {
        .hairline-color(bottom, @barsBorder);
        background-color: @barsBg;
        color:@barsText;
    }
    .toolbar, .toolbar& {
        .hairline-color(top, @barsBorder);
        background-color: @barsBg;
        color:@barsText;
    }

    // Picker
    .picker-modal {
        .toolbar {
            background-color: @barsBg;
        }
    }
    .popover .picker-modal .toolbar {
        background: none;
    }
    .popover .picker-modal, .picker-modal.picker-modal-inline {
        .picker-center-highlight {
            .hairline-color(top, @barsBorder);
            .hairline-color(bottom, @barsBorder);
        }
        .picker-calendar-week-days, .picker-calendar-row {
            .hairline-color(bottom, @barsBorder);
        }
        .toolbar ~ .picker-modal-inner .picker-calendar-months,  .picker-calendar-week-days ~ .picker-calendar-months {
            .hairline-color(top, @barsBorder);
        }
    }
    .popover .picker-modal {
        .toolbar {
            .hairline-color(bottom, @barsBorder);
        }
    }
    // Photo Browser
    .photo-browser, .views .view[data-page="photo-browser-slides"] {
        .navbar, .toolbar {
            color:#000;
            background: rgba(247,247,247,0.95);
        }
    }
    .photo-browser-dark {
        .navbar, .toolbar {
            background: rgba(30,30,30,0.8);
            color:#fff;
        }
    }
    .tabbar a:not(.active) {
        color:@tabBarText;
    }
    .page, .login-screen-content, .page&, .panel, .panel& {
        background-color: @pageBg;
        color: @text;
    }
    .content-block-title {
        color:@strongText;
    }
    .content-block, .content-block& {
        color:@lightText;
    }
    .content-block-inner {
        background: @blockStrongBg;
        color:@text;
        .hairline-color(bottom, @blockBorder);
        .hairline-color(top, @blockBorder);
    }
    .list-block, .list-block& {
        ul {
            background: @blockBg;
            .hairline-color(bottom, @blockBorder);
            .hairline-color(top, @blockBorder);
        }
        &.inset ul{
            background: @blockStrongBg;
        }
        &.notifications > ul {
            background: none;
        }
    }
    .popover-inner > .list-block ul {
        background: none;
    }
    li.sorting {
        background-color: @activeLink;
    }
    .swipeout-actions-left a, .swipeout-actions-right a {
        background-color: @swipeoutButton;
    }
    .item-inner, .list-block ul ul li:last-child .item-inner {
        border-color: @blockBorder;
        .hairline-color(bottom, @blockBorder);
    }
    .item-after {
        color:@itemAfterText;
    }
    .item-link, label.label-checkbox, label.label-radio {
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: @activeLink;
        }
    }
    .item-link.list-button, .list-button {
        .hairline-color(bottom, @blockBorder);
    }
    .list-block-label {
        color:@lightText;
    }
    .item-divider, .list-group-title {
        background: @dividerBg;
        color:@lightText;
        .hairline-color(top, @blockBorder);
    }

    // Searchbar
    .searchbar {
        background: @searchbarBg;
        .hairline-color(bottom, @searchbarBorder);
    }

    // Forms
    .list-block, .list-block& {
        input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
            color:@strongText;
        }
    }
    .label-switch .checkbox {
        background-color: @checkboxBorder;
        &:before {
            background-color: @blockBg;
        }
    }
    .range-slider input[type="range"]:after {
        background: @blockBg;
    }
    // Timeline
    .timeline-item-inner {
        background: @blockStrongBg;
    }
    .content-block-inner .timeline-item-inner {
        border-color: @blockBorder;
    }
    .timeline-item-time {
        color: #8e8e93;
    }
    .timeline-horizontal .timeline-item-date {
        .hairline-color(bottom, @barsBorder);
        background-color: @barsBg;
    }
    .timeline-horizontal .timeline-item {
        .hairline-color(right, @barsBorder);
    }
    .timeline-year-title, .timeline-month-title {
        background-color: @barsBg;
    }
    .timeline-month .timeline-item {
        .hairline-color(top, @barsBorder);
    }
    .timeline-year {
        .hairline-color(right, @barsBorder);
    }
}