framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
53 lines (51 loc) • 1.47 kB
text/less
.md {
@import (multiple) '../../less/colors-md.less';
@import (multiple) '../../less/vars-md.less';
.toolbar ~ .photo-browser-captions {
bottom: @toolbarSize;
transform: translate3d(0, 0px, 0);
&.photo-browser-captions-exposed {
transform: translate3d(0, 0px, 0);
}
}
.photo-browser-exposed .toolbar ~ .photo-browser-captions {
transform: translate3d(0, @toolbarSize, 0);
}
.photo-browser-page .toolbar {
transform: none;
}
.photo-browser-page {
.navbar, .toolbar {
background: rgba(red(@barsBg), green(@barsBg) , blue(@barsBg),0.95);
transition: 400ms;
}
}
.photo-browser-dark, .photo-browser-page-dark {
.navbar, .toolbar {
background: rgba(30,30,30,0.8) ;
color: #fff;
a {
color: #fff;
}
}
}
.color-theme-loop({
.color-theme-@{colorThemeName}, .color-@{colorThemeName} {
.photo-browser-page:not(.photo-browser-page-dark) {
.navbar, .toolbar {
background-color: rgba(red(@colorThemeValue), green(@colorThemeValue) , blue(@colorThemeValue),0.95);
}
}
}
});
.safe-areas({
.photo-browser-captions {
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
.toolbar ~ .photo-browser-captions {
bottom: ~"calc(@{toolbarSize} + constant(safe-area-inset-bottom))";
bottom: ~"calc(@{toolbarSize} + env(safe-area-inset-bottom))";
}
});
}