openstamanager/resources/scss/_material.scss

@use "variables";
@use '@material/theme' with (
    $primary: variables.$primary,
    $secondary: variables.$secondary
);
@use "@material/card";
@use "@material/layout-grid/mdc-layout-grid";
@use "@material/data-table/data-table";

@import "https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css";

@include card.core-styles;
@include data-table.core-styles;
@include data-table.theme-baseline;

/* ---------------------------
    MWC Components
--------------------------- */
mwc-button .mdi {
    font-size: 18px;
}

mwc-list > a,
mwc-menu > a {
    text-decoration: none;
}

mwc-list-item {
    --mdc-list-item-meta-size: auto;

    &:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    &:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

material-drawer {
    --mdc-theme-primary: var(--mdc-theme-primary2, variables.$primary);

    > mwc-list mwc-list-item {
        border-bottom-right-radius: 100px !important;
        border-top-right-radius: 100px !important;
    }
}

material-drawer[type="modal"][open] {
    z-index: 8;
    padding-top: initial;
}

top-app-bar {
    width: 100%;

    --mdc-theme-primary: var(--mdc-theme-background, #fff);
    --mdc-theme-on-primary: var(--mdc-theme-text-primary-on-background, #5f6368);
}

.mwc-button--rounded {
    --mdc-shape-small: 100px;
}

/* ---------------------------
    MDC Cards
--------------------------- */
.mdc-card {
    padding: 16px;
}

.mdc-card__thumbnail {
    padding-right: 16px;
    font-size: 24px;
}

.mdc-card__title {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--mdc-typography-headline1-font-family, variables.$body_font);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    line-height: 2rem;
}

.mdc-card__subhead {
    display: block;
    font-family: var(--mdc-typography-subtitle1-font-family, variables.$body_font);
}

.mdc-card__supporting-text {
    display: block;
    padding-top: 16px;
    font-family: var(--mdc-typography-font-family, variables.$body_font);
}

.mdc-card__title,
.mdc-card__subhead,
.mdc-card__supporting-text {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-decoration: inherit;
    text-transform: inherit;
}

.mdc-card__subhead,
.mdc-card__supporting-text {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.0178571429em;
    line-height: 1.25rem;
    opacity: 0.6;
}

/* ---------------------------
    MDC Sticky FABs
--------------------------- */

mwc-fab.sticky {
    position: fixed;
    right: 16px;
    bottom: 16px;
}

/* ---------------------------
    MDC Theme and Typography
--------------------------- */
:root {
    --mdc-theme-primary: #{variables.$primary};
    --mdc-theme-primary2: #{variables.$primary}; // Fix for MWC Drawer styling
    --mdc-theme-secondary: #{variables.$secondary};
    --mdc-theme-background: #fff;
    --mdc-theme-surface: #fff;
    --mdc-theme-error: #b00020;
    --mdc-theme-text-primary-on-background: #000d;
    --mdc-theme-text-icon-on-background: #00000060;
    --mdc-theme-outline-color: #e0e0e0;
    --mdc-typography-font-family: #{variables.$body_font};
    --mdc-typography-button-font-family: #{variables.$headings_font};

    @each $type in headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2 {
        --mdc-typography-#{$type}-font-family: #{variables.$body_font};
        --mdc-typography-#{$type}-font-weight: 500;
    }
}

.mdc-high-contrast {
    --mdc-theme-primary: #{lighten(variables.$primary, 100%)};
    --mdc-theme-primary2: #{lighten(variables.$primary, 50%)}; // Fix for MWC Drawer styling
    --mdc-theme-secondary: #{variables.$secondary};
    --mdc-theme-on-primary: #000;
    --mdc-theme-on-secondary: #000;
    --mdc-theme-error: #cf6679;
    --mdc-theme-text-primary-on-background: #fff;
    --mdc-theme-text-secondary-on-background: #b9b9b989;
    --mdc-theme-text-icon-on-background: #e7e7e7;
    --mdc-theme-background: #121212;
    --mdc-theme-surface: #121212;
    --mdc-ripple-color: #fff;
    --mdc-button-outline-color: #e0e0e0;
    --mdc-dialog-heading-ink-color: #fff;
    --mdc-dialog-content-ink-color: #fff;
    --mdc-checkbox-unchecked-color: #fff;
    --mdc-text-field-idle-line-color: #fff;

    [slot="appContent"] {
        color: var(--mdc-theme-on-primary, #{variables.$primary});
    }

    a {
        color: var(--mdc-theme-primary, #{variables.$primary});
    }

    mwc-textfield {
        --mdc-theme-primary: var(--mdc-theme-secondary, #{variables.$secondary});
    }

    mwc-icon-button,
    i.mdi:not(.light-bg) {
        color: var(--mdc-theme-text-icon-on-background, #000d);
    }

    mwc-button {
        --mdc-ripple-color: var(--mdc-theme-primary, #{variables.$primary});

        &[raised] {
            --mdc-ripple-color: unset;

            i.mdi {
                color: unset;
            }
        }
    }
}