78 lines
2.0 KiB
SCSS
78 lines
2.0 KiB
SCSS
@import '~@angular/material/theming';
|
|
|
|
/** Custom component theme. Only lives in a specific scope */
|
|
@mixin os-site-theme($theme) {
|
|
$primary: map-get($theme, primary);
|
|
$accent: map-get($theme, accent);
|
|
$warn: map-get($theme, accent);
|
|
$foreground: map-get($theme, foreground);
|
|
$background: map-get($theme, background);
|
|
|
|
os-site {
|
|
/* main background color */
|
|
.main-container {
|
|
background-color: mat-color($background, background);
|
|
}
|
|
.nav-toolbar {
|
|
background-color: mat-color($background, card); //TODO
|
|
}
|
|
|
|
.nav-toggle-button {
|
|
background: mat-color($background, background);
|
|
color: mat-color($foreground, icon);
|
|
}
|
|
|
|
/* seperator */
|
|
mat-nav-list.main-nav,
|
|
mat-divider {
|
|
border-top-color: $os-outline;
|
|
}
|
|
|
|
/** style and align the nav icons the icons*/
|
|
.main-nav,
|
|
.user-menu {
|
|
mat-icon {
|
|
color: mat-color($foreground, icon);
|
|
}
|
|
span {
|
|
color: mat-color($foreground, text);
|
|
}
|
|
}
|
|
|
|
/** style the active link */
|
|
.active {
|
|
mat-icon {
|
|
color: mat-color($primary);
|
|
}
|
|
span {
|
|
color: mat-color($primary);
|
|
}
|
|
}
|
|
|
|
/** style for the offline-banner */
|
|
.offline-banner {
|
|
display: flex;
|
|
top: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 20px;
|
|
background: mat-color($primary, 900);
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
|
|
mat-icon {
|
|
$font-size: 16px;
|
|
width: $font-size;
|
|
height: $font-size;
|
|
font-size: $font-size;
|
|
}
|
|
|
|
span {
|
|
font-size: 90%;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|