themes.less

/*==========================
Framework7 Layouts Themes
==========================*/
@import url('_mixins.less');
/* === 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-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: #444;
            }
        }
        .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, .photo-browser&, .view[data-page="photo-browser-slides"], .view[data-page="photo-browser-slides"]& {
        .navbar, .toolbar {
            background: rgba(red(@barsBg), green(@barsBg), blue(@barsBg), 0.95);
        }
    }
    .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;
        }
    }
    .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 {
        .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;
    }

}

/* === 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
    .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, .photo-browser&, .view[data-page="photo-browser-slides"], .view[data-page="photo-browser-slides"]& {
        .navbar, .toolbar {
            background: rgba(red(@barsBg), green(@barsBg), blue(@barsBg), 0.95);
        }
    }
    .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 {
        .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;
    }
}