nopaque/app/static/css/materialize.override.css
2024-09-25 12:08:20 +02:00

64 lines
1.7 KiB
CSS

/* #region sidenav-fixed */
/*
* The sidenav-fixed class is used which causes the sidenav to be fixed and open
* on large screens and hides to the regular functionality on smaller screens.
* In order to prevent the sidenav to overlap the content, the content (header, main and footer)
* gets an offset equal to the width of the sidenav.
*
* Read more: https://materializecss.com/sidenav.html#variations
*/
body[data-sidenav-fixed="true" i] header,
body[data-sidenav-fixed="true" i] main,
body[data-sidenav-fixed="true" i] footer {
padding-left: 300px;
}
@media only screen and (max-width : 992px) {
body[data-sidenav-fixed="true" i] header,
body[data-sidenav-fixed="true" i] main,
body[data-sidenav-fixed="true" i] footer {
padding-left: 0;
}
}
body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
width: calc(100% - 300px);
}
@media only screen and (max-width : 992px) {
body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
width: 100%;
}
}
/* #endregion sidenav-fixed */
/* #region sticky-footer */
/*
* Sticky Footer:
* A sticky footer always stays on the bottom of the page regardless of how
* little content is on the page. However, this footer will be pushed down if
* there is a lot of content, so it is different from a fixed footer.
*
* Note: This may cause issues in Internet Explorer which has weak support for
* flexbox.
*
* Read more: https://materializecss.com/footer.html#sticky-footer
*/
body[data-sticky-footer="true" i] {
display: flex;
min-height: 100vh;
flex-direction: column;
}
body[data-sticky-footer="true" i] main {
flex: 1 0 auto;
}
/* #endregion sticky-footer */
/* #region other-overrides */
::placeholder {
color: #9e9e9e;
opacity: 1;
}
/* #endregion other-overrides */