81 lines
1.8 KiB
SCSS
81 lines
1.8 KiB
SCSS
:root {
|
|
|
|
--warn-color: #e14154; // reddish for warnings/errors
|
|
|
|
//
|
|
// Vertical and horizontal padding for the status-article element (Status.html, Notification.html)
|
|
//
|
|
--status-pad-v: 10px;
|
|
--status-pad-h: 20px;
|
|
|
|
@media (max-width: 767px) {
|
|
--status-pad-h: 10px;
|
|
}
|
|
|
|
@media (max-width: 240px) {
|
|
--status-pad-h: 5px;
|
|
}
|
|
|
|
//
|
|
// Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
|
|
//
|
|
|
|
--nav-font-size: 1rem;
|
|
--nav-indicator-height: 3px;
|
|
--nav-border-bottom: 0px;
|
|
--nav-icon-pad-v: 14px;
|
|
--nav-icon-pad-h: 20px;
|
|
--nav-icon-size: 20px;
|
|
|
|
--nav-total-height: calc(
|
|
(var(--nav-icon-pad-v) * 2) +
|
|
var(--nav-icon-size) +
|
|
var(--nav-indicator-height) +
|
|
var(--nav-border-bottom)
|
|
);
|
|
|
|
--main-content-gap-top: 20px;
|
|
--main-content-pad-vertical: calc(
|
|
var(--nav-total-height) +
|
|
var(--main-content-gap-top)
|
|
);
|
|
--main-content-pad-top: var(--main-content-pad-vertical);
|
|
--main-content-pad-bottom: 0px;
|
|
|
|
--main-margin-bottom: 15px;
|
|
--main-border-size: 1px;
|
|
|
|
@media (max-width: 991px) {
|
|
--nav-icon-pad-v: 18px;
|
|
--nav-icon-pad-h: 10px;
|
|
--nav-icon-size: 25px;
|
|
--nav-border-bottom: 0px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
--main-content-gap-top: 0px;
|
|
}
|
|
|
|
@media (max-width: 240px) {
|
|
--nav-icon-pad-v: 10px;
|
|
--nav-icon-pad-h: 0px;
|
|
}
|
|
|
|
// Used for moving the nav bar to the bottom
|
|
--nav-top: 0px;
|
|
--nav-bottom: initial;
|
|
--toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
|
|
--fab-gap-top: var(--nav-total-height); // used to position the FAB (floating action button) below the top nav
|
|
|
|
//
|
|
// focus outline
|
|
//
|
|
|
|
--focus-width: 2px;
|
|
|
|
@media (max-width: 240px) {
|
|
--focus-width: 3px;
|
|
}
|
|
|
|
}
|