/*==========================
|
Framework7 Layouts Themes
|
==========================*/
|
.layout-dark .navbar,
|
.navbar.layout-dark {
|
border-bottom-color: #333333;
|
background-color: #131313;
|
color: #ffffff;
|
}
|
.layout-dark .toolbar,
|
.toolbar.layout-dark {
|
border-top-color: #333333;
|
background-color: #131313;
|
color: #ffffff;
|
}
|
.layout-dark .photo-browser .navbar,
|
.photo-browser.layout-dark .navbar,
|
.layout-dark .view[data-page="photo-browser-slides"] .navbar,
|
.view[data-page="photo-browser-slides"].layout-dark .navbar,
|
.layout-dark .photo-browser .toolbar,
|
.photo-browser.layout-dark .toolbar,
|
.layout-dark .view[data-page="photo-browser-slides"] .toolbar,
|
.view[data-page="photo-browser-slides"].layout-dark .toolbar {
|
background: rgba(19, 19, 19, 0.95);
|
}
|
.layout-dark .tabbar a:not(.active) {
|
color: #ffffff;
|
}
|
.layout-dark .page,
|
.layout-dark .login-screen-content,
|
.page.layout-dark,
|
.layout-dark .panel,
|
.panel.layout-dark {
|
background-color: #222426;
|
color: #dddddd;
|
}
|
.layout-dark .content-block-title {
|
color: #ffffff;
|
}
|
.layout-dark .content-block,
|
.content-block.layout-dark {
|
color: #bbbbbb;
|
}
|
.layout-dark .content-block-inner {
|
background: #1c1d1f;
|
color: #dddddd;
|
border-color: #393939;
|
}
|
.layout-dark .list-block ul,
|
.list-block.layout-dark ul {
|
background: #1c1d1f;
|
border-color: #393939;
|
}
|
.layout-dark .list-block.inset ul,
|
.list-block.layout-dark.inset ul {
|
background: #1c1d1f;
|
}
|
.layout-dark .list-block.notifications > ul,
|
.list-block.layout-dark.notifications > ul {
|
background: none;
|
}
|
.layout-dark .popover,
|
.popover.layout-dark {
|
background: rgba(0, 0, 0, 0.8);
|
}
|
.layout-dark .popover .popover-angle:after,
|
.popover.layout-dark .popover-angle:after {
|
background: rgba(0, 0, 0, 0.8);
|
}
|
.layout-dark .popover .list-block ul,
|
.popover.layout-dark .list-block ul {
|
background: none;
|
}
|
.layout-dark .actions-popover .list-block ul {
|
border-color: #393939;
|
}
|
.layout-dark .actions-popover .actions-popover-label {
|
border-bottom-color: #393939;
|
}
|
.layout-dark li.sorting {
|
background-color: #29292f;
|
}
|
.layout-dark .swipeout-actions-left a,
|
.layout-dark .swipeout-actions-right a {
|
background-color: #444444;
|
}
|
.layout-dark .item-inner,
|
.layout-dark .list-block ul ul li:last-child .item-inner {
|
border-color: #393939;
|
}
|
.layout-dark .item-after {
|
color: #bbbbbb;
|
}
|
html:not(.watch-active-state) .layout-dark .item-link:active,
|
html:not(.watch-active-state) .layout-dark label.label-checkbox:active,
|
html:not(.watch-active-state) .layout-dark label.label-radio:active,
|
.layout-dark .item-link.active-state,
|
.layout-dark label.label-checkbox.active-state,
|
.layout-dark label.label-radio.active-state {
|
background-color: #29292f;
|
}
|
.layout-dark .item-link.list-button {
|
border-bottom-color: #393939;
|
}
|
.layout-dark .list-block-label {
|
color: #bbbbbb;
|
}
|
.layout-dark .item-divider,
|
.layout-dark .list-group-title {
|
background: #1a1a1a;
|
color: #bbbbbb;
|
border-top-color: #393939;
|
}
|
.layout-dark .searchbar {
|
background: #333333;
|
border-bottom-color: #333333;
|
}
|
.layout-dark .list-block input[type="text"],
|
.list-block.layout-dark input[type="text"],
|
.layout-dark .list-block input[type="password"],
|
.list-block.layout-dark input[type="password"],
|
.layout-dark .list-block input[type="email"],
|
.list-block.layout-dark input[type="email"],
|
.layout-dark .list-block input[type="tel"],
|
.list-block.layout-dark input[type="tel"],
|
.layout-dark .list-block input[type="url"],
|
.list-block.layout-dark input[type="url"],
|
.layout-dark .list-block input[type="date"],
|
.list-block.layout-dark input[type="date"],
|
.layout-dark .list-block input[type="datetime-local"],
|
.list-block.layout-dark input[type="datetime-local"],
|
.layout-dark .list-block input[type="number"],
|
.list-block.layout-dark input[type="number"],
|
.layout-dark .list-block select,
|
.list-block.layout-dark select,
|
.layout-dark .list-block textarea,
|
.list-block.layout-dark textarea {
|
color: #ffffff;
|
}
|
.layout-dark .label-switch .checkbox {
|
background-color: #393939;
|
}
|
.layout-dark .label-switch .checkbox:before {
|
background-color: #1c1d1f;
|
}
|
.layout-dark .range-slider input[type="range"]:after {
|
background: #1c1d1f;
|
}
|
/* === White layout === */
|
.layout-white .navbar,
|
.navbar.layout-white {
|
border-bottom-color: #dddddd;
|
background-color: #ffffff;
|
color: #000000;
|
}
|
.layout-white .toolbar,
|
.toolbar.layout-white {
|
border-top-color: #dddddd;
|
background-color: #ffffff;
|
color: #000000;
|
}
|
.layout-white .photo-browser .navbar,
|
.photo-browser.layout-white .navbar,
|
.layout-white .view[data-page="photo-browser-slides"] .navbar,
|
.view[data-page="photo-browser-slides"].layout-white .navbar,
|
.layout-white .photo-browser .toolbar,
|
.photo-browser.layout-white .toolbar,
|
.layout-white .view[data-page="photo-browser-slides"] .toolbar,
|
.view[data-page="photo-browser-slides"].layout-white .toolbar {
|
background: rgba(255, 255, 255, 0.95);
|
}
|
.layout-white .tabbar a:not(.active) {
|
color: #777777;
|
}
|
.layout-white .page,
|
.layout-white .login-screen-content,
|
.page.layout-white,
|
.layout-white .panel,
|
.panel.layout-white {
|
background-color: #ffffff;
|
color: #000000;
|
}
|
.layout-white .content-block-title {
|
color: #777777;
|
}
|
.layout-white .content-block,
|
.content-block.layout-white {
|
color: #777777;
|
}
|
.layout-white .content-block-inner {
|
background: #fafafa;
|
color: #000000;
|
border-color: #dddddd;
|
}
|
.layout-white .list-block ul,
|
.list-block.layout-white ul {
|
background: #ffffff;
|
border-color: #dddddd;
|
}
|
.layout-white .list-block.inset ul,
|
.list-block.layout-white.inset ul {
|
background: #fafafa;
|
}
|
.layout-white .list-block.notifications > ul,
|
.list-block.layout-white.notifications > ul {
|
background: none;
|
}
|
.layout-white .popover-inner > .list-block ul {
|
background: none;
|
}
|
.layout-white li.sorting {
|
background-color: #eeeeee;
|
}
|
.layout-white .swipeout-actions-left a,
|
.layout-white .swipeout-actions-right a {
|
background-color: #c7c7cc;
|
}
|
.layout-white .item-inner,
|
.layout-white .list-block ul ul li:last-child .item-inner {
|
border-color: #dddddd;
|
}
|
.layout-white .item-after {
|
color: #8e8e93;
|
}
|
html:not(.watch-active-state) .layout-white .item-link:active,
|
html:not(.watch-active-state) .layout-white label.label-checkbox:active,
|
html:not(.watch-active-state) .layout-white label.label-radio:active,
|
.layout-white .item-link.active-state,
|
.layout-white label.label-checkbox.active-state,
|
.layout-white label.label-radio.active-state {
|
background-color: #eeeeee;
|
}
|
.layout-white .item-link.list-button {
|
border-bottom-color: #dddddd;
|
}
|
.layout-white .list-block-label {
|
color: #777777;
|
}
|
.layout-white .item-divider,
|
.layout-white .list-group-title {
|
background: #f7f7f7;
|
color: #777777;
|
border-top-color: #dddddd;
|
}
|
.layout-white .searchbar {
|
background: #c9c9ce;
|
border-bottom-color: #b4b4b4;
|
}
|
.layout-white .list-block input[type="text"],
|
.list-block.layout-white input[type="text"],
|
.layout-white .list-block input[type="password"],
|
.list-block.layout-white input[type="password"],
|
.layout-white .list-block input[type="email"],
|
.list-block.layout-white input[type="email"],
|
.layout-white .list-block input[type="tel"],
|
.list-block.layout-white input[type="tel"],
|
.layout-white .list-block input[type="url"],
|
.list-block.layout-white input[type="url"],
|
.layout-white .list-block input[type="date"],
|
.list-block.layout-white input[type="date"],
|
.layout-white .list-block input[type="datetime-local"],
|
.list-block.layout-white input[type="datetime-local"],
|
.layout-white .list-block input[type="number"],
|
.list-block.layout-white input[type="number"],
|
.layout-white .list-block select,
|
.list-block.layout-white select,
|
.layout-white .list-block textarea,
|
.list-block.layout-white textarea {
|
color: #777777;
|
}
|
.layout-white .label-switch .checkbox {
|
background-color: #e5e5e5;
|
}
|
.layout-white .label-switch .checkbox:before {
|
background-color: #ffffff;
|
}
|
.layout-white .range-slider input[type="range"]:after {
|
background: #ffffff;
|
}
|
