browser/src/scss/styles.scss

$primary: #3c8dbc;
$primary-accent: #286090;
$secondary: #ced4da;
$success: #00a65a;
$info: #555555;
$warning: #bf7e16;
$danger: #dd4b39;

$theme-colors: (  
    "primary-accent": $primary-accent
);

$body-bg: #ffffff;
$body-color: #333333;

$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
    Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';

$h1-font-size: 1.7rem;
$h2-font-size: 1.3rem;
$h3-font-size: 1rem;
$h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: 1rem;

$navbar-padding-y: .75rem;
$grid-gutter-width: 20px;
$card-spacer-y: .6rem;

$list-group-item-padding-y: .6rem;
$list-group-active-color: $body-color;
$list-group-active-bg: #ffffff;
$list-group-active-border-color: rgba(#000000, .125);

$dropdown-link-color: $body-color;
$dropdown-link-hover-bg: rgba(#000000, .06);
$dropdown-link-active-color: $dropdown-link-color;
$dropdown-link-active-bg: rgba(#000000, .1);
$dropdown-item-padding-x: 1rem;

$navbar-brand-font-size: 35px;
$navbar-brand-height: 35px;
$navbar-brand-padding-y: 0;
$navbar-dark-color: rgba(#ffffff, .7);
$navbar-dark-hover-color: rgba(#ffffff, .9);

$input-bg: #fafafa;
$input-focus-bg: #ffffff;
$input-disabled-bg: #e0e0e0;

$table-hover-bg: rgba(#000000, .03);

@import "../../node_modules/bootstrap/scss/bootstrap";

html {
    font-size: 14px;
}

body {
    min-width: 1010px;
}

.page-header {
    border-bottom: 1px solid $border-color;
    padding-bottom: 0.6rem;
    margin-bottom: 0.5rem;

    h1, h2, h3, h4 {
        margin: 0;
    }
}

.navbar {
    padding-left: 0;
    padding-right: 0;
}

.navbar-brand {
    margin-top: -20px;
    margin-bottom: -20px;
}

.container {
    width: 980px;
    max-width: none !important;
    margin: 0 auto;
    padding: 0;
}

.page-content {
    margin-top: 20px;
}

.footer {
    margin-top: 40px;
    padding: 40px 0 20px 0;
    border-top: 1px solid $border-color;
}

.list-group-item.active {
    border-left: 3px solid theme-color("primary");
    font-weight: bold;
    padding-left: calc(#{$list-group-item-padding-x} - 3px);
}

.card-header, .modal-header {
    font-weight: bold;
    text-transform: uppercase;

    small {
        font-weight: normal;
        text-transform: none;
    }
}

.modal-body {
    h3 {
        font-weight: normal;
        text-transform: uppercase;
        color: $text-muted;
    }
}

.modal-footer {
    justify-content: initial;
    background-color: $input-bg;
}

form label {
    font-weight: bold;
}

.btn[class*="btn-outline-"]:not(:hover) {
    background-color: #ffffff;
}

.btn-outline-secondary {
    color: $text-muted;

    &:hover {
        color: $body-color;
    }
}

app-vault-icon .fa {
    color: $text-muted;
}

app-vault {
    .table {
        tr:first-child {
            td {
                border: none;
            }
        }

        tr:hover {
            td:last-child .dropdown button {
                visibility: initial;
            }
        }

        td {
            vertical-align: middle;

            small {
                color: $text-muted;
            }
        }

        td:first-child {
            width: 35px;
        }

        td:nth-child(2) {
            width: 45px;
            text-align: center;

            img {
                @extend .rounded;
                @extend .img-fluid;
            }
        }

        td:nth-child(3) {
            line-height: 1;
        }

        td:last-child {
            width: 72px;
            text-align: right;

            .btn {
                line-height: 1;
            }
            
            .dropdown:not(.show) button {
                visibility: hidden;
            }
        }
    }
}

app-vault-groupings {
    .card {
        #search {
            margin-bottom: 1rem;
        }

        h3 {
            font-weight: normal;
            text-transform: uppercase;
            color: $text-muted;
        }

        ul:last-child {
            margin-bottom: 0;
        }

        a {
            color: $body-color;

            &:hover {
                &.text-muted {
                    color: $body-color !important;
                }
            }
        }
        
        ul.fa-ul {
            margin-left: 1.9em;

            .fa-li {
                top: 4px;
            }

            &.carets {
                margin-left: 1.1em;

                .fa-li {
                    left: -24px;
                }
            }
        }

        .show-active {
            display: none;
        }

        li.active {
            .show-active {
                display: inline;
            }
        }

        li.active {
            a:first-child {
                font-weight: bold;
                color: theme-color("primary");
            }
        }
    }
}