diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss index cdc87614..12230e02 100644 --- a/src/styles/desktop/global.scss +++ b/src/styles/desktop/global.scss @@ -28,13 +28,15 @@ input[type=number] { } } -/** custom class **/ +/** Custom class **/ :root { --default-icon-color: var(--v-theme-on-surface); + --v-expand-panel-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); } :root .v-theme--dark { --default-icon-color: var(--v-theme-on-surface); + --v-expand-panel-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); } .pin-codes-input { @@ -53,6 +55,10 @@ input[type=number] { font-size: 1.25rem; } +.expand-panel-title-with-bg { + background-color: var(--v-expand-panel-title-bg); +} + .auth-logo { position: absolute; z-index: 1; @@ -92,6 +98,44 @@ input[type=number] { height: 1rem; } +/** Common class for replacing the default style of Materio **/ +.v-application, +.text-body-1, +.text-body-2, +.text-subtitle-1, +.text-subtitle-2 { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); +} + +.v-label { + &:not(.v-field-label--floating) { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); + } +} + +.v-card-subtitle, +.v-list-item-subtitle { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); +} + +.v-table { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); +} + +.v-text-field { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); + + .v-label { + color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)); + } + + .v-select__selection { + .v-label { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); + } + } +} + /** Replacing the default style of @vuepic/vue-datepicker **/ .dp__theme_light { --dp-primary-color: #c67e48;