common.css

/*
    Theming Variables
*/

:root {
    --nrdb-bg-color: #222;
    --nrdb-text-color: #fff;
    --nrdb-font-family: Helvtiva;
    /* header */
    --nrdb-header-bg: red;
    --nrdb-header-padding: 6px 12px;
    --nrdb-header-text-color: white;
    /* main */
    --nrdb-main-padding: 12px;
    /* widget sizing */
    --widget-row-height: 42px;
}

body {
    margin: 0;
    font-family: Helvetica;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--nrdb-bg-color);
    color: var(--nrdb-text-color);
}

main {
    padding: var(--nrdb-main-padding);
}

/**
* Placeholder
*/

.nrdb-placeholder-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}

.nrdb-placeholder {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #222;
    text-align: center;
    padding: 1.5rem 2rem;
    border-radius: 6px;
    border: 1px solid #d1d1d1;
    background-color: #fff;
}

.nrdb-placeholder img {
    width: 150px;
}

.nrdb-placeholder p {
    margin: 0.5rem 0 0;
}

.nrdb-placeholder .status-info {
    font-weight: 600;
}

.nrdb-placeholder .status-warning {
    color: #bb2020;
    font-weight: 600;
}

.nrdb-placeholder .status-duplicates {
    font-weight: 400;
    color: #222;
    margin-top: 0.5rem;
}

/**
* Common Widget Styling
*/  
.nrdb-ui-widget {
    min-height: var(--widget-row-height);
}

/**
* Widget: Button
*/
.v-btn {
    text-transform: none;
}

/**
* Widget: Form
*/ 

.nrdb-ui-form-label {
    font-weight: bold;
    margin-bottom: 1rem;
}
.nrdb-ui-form-rows {
    display: grid;
    gap: 0.5rem;
}
.nrdb-ui-form-rows--split {
    grid-template-columns: 1fr 1fr;
}
.nrdb-ui-form-row {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}
.nrdb-ui-form-row .nrdb-ui-widget,
.nrdb-ui-form-row .v-selection-control {
    min-height: 0;
}
.nrdb-ui-form-actions {
    margin-top: 1rem; 
}
.nrdb-ui-form-actions button {
    margin-right: 1rem; 
}
.nrdb-ui-form-row .v-text-field .v-input__details {
    padding-inline-start: 0;
}

/**
* Widget: Radio Group
*/
.nrdb-ui-radio-group .v-selection-control-group {
    display: grid;
}
.nrdb-ui-radio-group .v-selection-control-group .v-selection-control {
    grid-area: initial;
}
.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-2 .v-selection-control-group {
    grid-template-columns: repeat(2, 1fr);
}
.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-3 .v-selection-control-group {
    grid-template-columns: repeat(3, 1fr);
}
.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-4 .v-selection-control-group {
    grid-template-columns: repeat(4, 1fr);
}
.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-5 .v-selection-control-group {
    grid-template-columns: repeat(5, 1fr);
}


/**
* Widget: Markdown
*/ 
.nrdb-ui-markdown h1 {
    margin: 0.67em 0;
}
.nrdb-ui-markdown p {
    margin: 1em 0;
}
.nrdb-ui-markdown>*:first-child {
    margin-top: 0 !important;
}
.nrdb-ui-markdown p,
.nrdb-ui-markdown blockquote,
.nrdb-ui-markdown ul,
.nrdb-ui-markdown ol,
.nrdb-ui-markdown dl,
.nrdb-ui-markdown table,
.nrdb-ui-markdown pre,
.nrdb-ui-markdown details {
    margin-top: 0;
    margin-bottom: 1rem;
}
.nrdb-ui-markdown h1,
.nrdb-ui-markdown h2,
.nrdb-ui-markdown h3,
.nrdb-ui-markdown h4,
.nrdb-ui-markdown h5,
.nrdb-ui-markdown h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.25;
}
.nrdb-ui-markdown ul,
.nrdb-ui-markdown ol {
    padding-left: 2em;
}
.nrdb-ui-markdown hr {
    margin: 1rem 0;
}
.nrdb-ui-markdown ul ul,
.nrdb-ui-markdown ul ol,
.nrdb-ui-markdown ol ol,
.nrdb-ui-markdown ol ul {
    margin-top: 0;
    margin-bottom: 0;
}
.nrdb-ui-markdown code {
    background: #f3f3f3; /* should use theme variable? */
    font-size: 0.85rem;
}
.nrdb-ui-markdown pre code {
    overflow: auto;
    line-height: 1.25rem;
    /* color: var(TBD); */
    border-radius: 6px;
}
.nrdb-ui-markdown blockquote {
    padding-left: 1em;
    border-left: 4px solid #d1d1d1; /* should use theme variable? */
    color: gray; /* should use theme variable? */
}
.nrdb-ui-markdown table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0.5em 0;
    width: 100%;
    overflow: auto;
    width: max-content;
}
.nrdb-ui-markdown table th {
    font-weight: bold;
    padding: 0.5em 0.5em;
    border: 1px solid #d1d1d1; /* should use theme variable? */
}
.nrdb-ui-markdown table td {
    padding: 0.5em 0.5em;
    border: 1px solid #d1d1d1; /* should use theme variable? */
}

/**
*  Theming Overrides
*/

.v-list-item--active {
    background-color: var(--v-theme-background);
}

/* Override the default Vuetify theme by making 'primary' the main colour for widgets, rather than 'surface' */
.v-btn--variant-elevated,
.v-btn--variant-flat,
.v-btn-group .v-btn--variant-elevated.v-btn--active,
.v-btn-group .v-btn--variant-flat.v-btn--active {
    background-color: rgb(var(--v-theme-primary));
    color: rgb(var(--v-theme-on-primary));
}

.v-btn-group .v-btn--variant-elevated,
.v-btn-group .v-btn--variant-flat {
    background-color: rgb(var(--v-theme-surface));
    color: rgb(var(--v-theme-on-surface));
}

.v-btn-group .v-btn {
    flex-grow: 1;
}

.v-card {
    border: 1px solid rgb(var(--v-theme-group-outline));
}

/* focused border color */
.v-field--variant-outlined.v-field--focused .v-field__outline__end,
.v-field--variant-outlined.v-field--focused .v-field__outline__notch:after,
.v-field--variant-outlined.v-field--focused .v-field__outline__notch:before,
.v-field--variant-outlined.v-field--focused .v-field__outline__start {
    border-color: rgb(var(--v-theme-primary));
}

/* dropdown list items */
.v-menu>.v-overlay__content>.v-card, .v-menu>.v-overlay__content>.v-list, .v-menu>.v-overlay__content>.v-sheet {
    background: rgb(var(--v-theme-background));
    color: rgb(var(--v-theme-on-background));
}

.v-slider-track__background,
.v-slider-track__fill,
.v-slider-track__tick,
.v-slider-thumb__surface {
    background-color: rgb(var(--v-theme-primary));
}

/* switch thumb */

.v-switch__track {
    opacity: 0.3;
}
.v-switch__thumb {
    color: rgb(var(--v-theme-surface-variant));
}

.active .v-switch__track {
    opacity: 0.6;
}
.active .v-switch__thumb {
    opacity: 1.0;
}

/* Data Table */

.v-table {
    background: rgb(var(--v-theme-group-background));
}

.v-table, .v-table .v-table__wrapper > table > thead > tr > th {
    color: rgb(var(--v-theme-on-group-background));
}
.v-table .v-table__wrapper > table > thead > tr > th {
    font-weight: 600;
}