GoogleVoice-Dark.user.css

/* ==UserStyle==
@name        Google Voice - Dark Style
@namespace   Devo7v
@version     0.2.49
@homepageURL https://github.com/Devo7v/UserCSS
@supportURL  https://github.com/Devo7v/UserCSS/issues
@updateURL   https://raw.githubusercontent.com/Devo7v/UserCSS/master/GoogleVoice-Dark.user.css
@description Provides a dark theme for Google Voice
@license     CC-BY-NC-SA-4.0
@author      Devo7v

@preprocessor stylus

@var select gvoice-accent "Accent Color"[
    "New",
    "Old",
    "Custom"
]
@var color gvoice-accent-custom "Custom Accent Color" #33B679
@var select gvoice-corner "Round/Square Elements"[
    "Round",
    "Square",
    "Squircle"
]

@var color gvoice-background-color "Primary Background Color" #111111
@var color gvoice-background-color-light "Light Background Color" #333333
@var color gvoice-background-color-dark "Dark Background Color" #222222

@var color gvoice-text-color "Primary Text Color" #AAAAAA

@var select SystemTheme "Apply Style Under System Theme"[
"Dark" ,
"Light",
"Always"
]
==/UserStyle== */


@-moz-document url-prefix("http://voice.google.com/"), url-prefix("https://voice.google.com/") {

:root{
    if gvoice-accent == "New"{
        --gvoice-accent-color: #00897B;
        --gvoice-accent-color-rotate: 0deg;
    }
    else if gvoice-accent == "Old"{
        --gvoice-accent-color: #4284F4;
        --gvoice-accent-color-rotate: 93.37318deg;
    }
    else if gvoice-accent == "Custom"{
        --gvoice-accent-color: gvoice-accent-custom;
        --gvoice-accent-color-rotate: 0deg;
    }
    if gvoice-corner == "Round"{
        --gvoice-corner-radius: 2.0rem;
    }
    else if gvoice-corner == "Square"{
        --gvoice-corner-radius: 0.0rem;
    }
    else if gvoice-corner == "Squircle"{
        --gvoice-corner-radius: 0.75rem;
    }
}

/*=======Set the colors based on system theme options=======*/
if SystemTheme == "Dark" {
    @media (prefers-color-scheme: dark)  {
        :root{
            --gvoice-background-color: gvoice-background-color;
            --gvoice-background-color-light: gvoice-background-color-light;
            --gvoice-background-color-dark: gvoice-background-color-dark;
            --gvoice-text-color: gvoice-text-color;
            --gvoice-border-color: #444444;
            --gvoice-white: #FFFFFF;
        }
    }
    @media (prefers-color-scheme: light)  {
        :root{
            --gvoice-background-color: #fff;
            --gvoice-background-color-light: #f1f3f4;
            --gvoice-background-color-dark: #dadce0;
            --gvoice-text-color: #202124;
            --gvoice-border-color: #dadce0;
            --gvoice-white: #202124;
        }
    }
}
if SystemTheme == "Light" {
    @media (prefers-color-scheme: light)  {
        :root{
            --gvoice-background-color: gvoice-background-color;
            --gvoice-background-color-light: gvoice-background-color-light;
            --gvoice-background-color-dark: gvoice-background-color-dark;
            --gvoice-text-color: gvoice-text-color;
            --gvoice-border-color: #444444;
            --gvoice-white: #FFFFFF;
        }
    }
    @media (prefers-color-scheme: dark)  {
        :root{
            --gvoice-background-color: #fff;
            --gvoice-background-color-light: #f1f3f4;
            --gvoice-background-color-dark: #dadce0;
            --gvoice-text-color: #202124;
            --gvoice-border-color: #dadce0;
            --gvoice-white: #202124;
        }
    }
}
if SystemTheme == "Always" {
        :root{
            --gvoice-background-color: gvoice-background-color;
            --gvoice-background-color-light: gvoice-background-color-light;
            --gvoice-background-color-dark: gvoice-background-color-dark;
            --gvoice-text-color: gvoice-text-color;
            --gvoice-border-color: #444444;
            --gvoice-white: #FFFFFF;
        }
}

/*Make Elements Square or Round*/
.Bqxti-VCkuzd, .gvPageRoot .bubble, .incoming .bubble, .gvMessageItem-bubble /*sent and received message bubbles*/
.YxDDMd-Dfn1ve .YxDDMd-VCkuzd, .d8IJmb-haAclf.d8IJmb-E6eRQd, .d8IJmb-haAclf.d8IJmb-E6eRQd .d8IJmb-HiaYvf, .container.last, .container.first, /*corners of pictures in threads*/
.photo, /*User pictures*/
.avatar, /*User pictures in the message list*/
.chip, /*receiving calls button at the top*/
.GYQtq-CLHpQd .GYQtq-mpvPNd, /*Send a message icon*/
.gvPageRoot .container.batch-selected .batch-selection, /*selecting multiple icons on the call list*/
.gvPageRoot .container::before, /*background of highlighted items when selecting multiple items on the call list*/
.rkljfb-rVkNNe, /*Highlight when selecting multiple message items/threads*/
.gvThreadItem-avatarBatchSelected .gvThreadItem-avatarCheckmark.gvThreadItem-avatarCheckmark.gvThreadItem-avatarCheckmark, .gvThreadItem-avatarCheckmark, /*checkbox when selecting multiple items on the message list*/
.gvThreadItem-root::before, /*background of highlighted items when selecting multiple items on the message list*/
.YxDDMd-MJZihc.YxDDMd-XLMwWc .YxDDMd-VCkuzd, /*bottom right corner of random pictures*/
.gvThreadItem-selected, .gvThreadItem-root:hover, /*active thread from the message list*/
.ZRgO8c-ienHib, /*Icon when selecting specific messages in a thread*/
.md-button.md-icon-button, /*highlight when hovering over 3-dot for each message*/
.q2hAhb-OjaX2e.q2hAhb-OjaX2e.q2hAhb-OjaX2e, /*send message box at the bottom*/
.gvImageAttachment-image, /*Image attachments*/
.gvVideoAttachment-video, /*Video attachments*/
.gmat-nav-list-item, /*selected icon in the nav bar*/
.rkljfb-H9tDt::before, /*selected items in a list*/
.gvPageRoot .button, /*numpad numbers*/
.call-button, /*call button next to the name/number in the dialer*/
.mat-mdc-icon-button, .mat-mdc-icon-button .mat-mdc-button-persistent-ripple, /*end call button*/
{
    border-radius: var(--gvoice-corner-radius) !important;
    /*2.0 is the default (rounded), 0 will make the edges completely square*/
}

/*Roundness of the highlight of the selected item on the left side bar*/
.gmat-mdc-list.mat-mdc-nav-list.mat-mdc-list-base a.mat-mdc-list-item {
    --mat-list-active-indicator-shape: 0 0 0 0 !important;
}
    
/*General text color*/
.gvPageRoot .grey-900, .thread-info{
    color: var(--gvoice-text-color) !important;
}

/*General Link Colors*/
a {
    color: var(--gvoice-text-color) !important;
    background-color: transparent !important;
}

/*Spinners*/
.mat-progress-spinner circle, .mat-spinner circle, #mpcInit > svg:nth-child(1) > path:nth-child(1){
    stroke: var(--gvoice-accent-color) !important;
}

/*Greeting text color*/
.greeting, .status{
    color: var(--gvoice-text-color) !important;
}

/*Not connected notification at top*/
.zQ5vdd-haAclf {
    background-color: var(--gvoice-background-color-light) !important;
}

/*Google Voice Logo*/
img.gb_Dc {
    filter: hue-rotate(var(--gvoice-accent-color-rotate)) !important;
    -webkit-filter: hue-rotate(var(--gvoice-accent-color-rotate)) !important;
    -o-filter: hue-rotate(var(--gvoice-accent-color-rotate)) !important;
    -ms-filter: hue-rotate(var(--gvoice-accent-color-rotate)) !important;
}

/*Alternative menthod for recoloring the Google Voice Logo*/
/*img.gb_Oc{
    width: 0px !important;
    height: 0px !important;
    padding: 16px !important;
    background-size: 32px 32px !important;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/bf/Google_Voice_icon_(2020).svg") !important;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/11/Google_Voice_icon_(2018-2020).svg") !important;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/1e/Google_voice_(2009-2012).svg") !important;
    fill: var(--gvoice-accent-color) !important;
}

/*Text color for Availability*/
.title {
    color: var(--gvoice-text-color) !important;
}

/*Availability Drop Down*/
.availability-menu-panel .cdk-dialog-container {
    background: var(--gvoice-background-color-light) !important;
}

/*Availability Drop Down DND Button*/
.dnd-status {
    background-color: var(--gvoice-background-color-dark) !important;
}
.dnd-status:hover {
    background-color: var(--gvoice-background-color-light) !important;
}
.mat-mdc-button:not(:disabled) {
    color: var(--gvoice-text-color) !important;
}

/*===Audio settings popup===*/
/*Background color*/
div.mat-mdc-select-panel {
    background-color: var(--gvoice-background-color-dark) !important;
}
/*Text color in dropdown boxes*/
.mat-mdc-select-min-line {
    color: var(--gvoice-text-color) !important;
}
/*Outline of item when not selected*/
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--gvoice-text-color) !important;
}
/*Outline of item when selected*/
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--gvoice-accent-color) !important;
}
/*Checkmark for selected source*/
.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
    color: var(--gvoice-accent-color) !important;
}
/*Arrow next to text indicating a dropdown box*/
.mat-mdc-select-arrow svg {
    fill: var(--gvoice-accent-color)
}
/*Search box suggestion list*/
/*li.ng-star-inserted:hover {
    background-color: red !important;
}*/

/*Bottom Border for the Google Bar*/
#gvPageRoot > div:nth-child(1){
    border-bottom: 0px solid var(--gbar-border-color) !important
}

/*Highlight and hovering background*/
.gvThreadItem-selected, .gvThreadItem-root:hover /*Message List*/ {
    background-color: var(--gvoice-background-color-light) !important;
}

/*Left Nav Bar*/
div.content > div:nth-child(2) > gv-side-nav {
    background: var(--gvoice-background-color) !important;
}

/*=======Unread Navigation Item=======*/
.gvPageRoot .unread .navItemLabel {
    color: var(--gvoice-accent-color) !important;
    opacity: 0.5 !important;
}

/*=======Navigation Items=======*/
.mdc-list-item__primary-text {
    color var(--gvoice-text-color) !important;
}
.mdc-list-item:hover .mdc-list-item__primary-text {
    color: var(--gvoice-white) !important;
}

/*=======Selected Navigation Item=======*/
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text {
    color: var(--gvoice-accent-color) !important;
}
.gmat-mdc-list.mat-mdc-nav-list .mdc-list-item--activated {
    background-color: rgba(#4284F4, 0.2) !important
}

/*=======Call List=======*/
/*Call List items*/
.gvPageRoot .container.active, .gvPageRoot [_nghost-wka-c309] .container:hover {
    background-color: var(--gvoice-background-color-light) !important;
}

/*Selected call background*/
.gvMessagingView-threadDetailsWrap {
    background: var(--gvoice-background-color)
}

/*Selected call text*/
.primary-text {
    color: var(--gvoice-text-color) !important;
}

/*Call List multi-select icon*/
.mat-ripple.container.read.ng-star-inserted:hover, .mat-ripple.container.read.ng-star-inserted:focus {
    background-color: var(--gvoice-background-color-light) !important;
}
.gvPageRoot .container.batch-selected .batch-selection {
    background: var(--gvoice-accent-color) !important;
}
.gvPageRoot .container::after {
    border-top: 3px solid var(--gvoice-accent-color) !important;
}
.gvPageRoot .container {
    color: var(--gvoice-accent-color) !important;
}
.gvPageRoot .container::before {
    background-color: var(--gvoice-background-color-dark) !important;
}


/*=======Text Messages=======*/
/*Input box at the bottom*/
.cdk-textarea-autosize {
    color: var(--gvoice-white) !important;
    background: var(--gvoice-background-color) !important;
}
.gvThreadDetails-messageEntryContainer {
    background: initial !important;
}

/*Selected message phone number*/
.gvMessageListHeader-subtitle {
    color: var(--gvoice-text-color) !important;
}

/*Outgoing Text messages*/
.bubble  {
    color: var(--gvoice-white) !important;
    /*#00695c;*/
    background-color: var(--gvoice-background-color-light) !important;
}

/*Incoming Text messages*/
.incoming .bubble, .gvMessageItem-bubble {
    background-color: var(--gvoice-accent-color) !important;
    color: var(--gvoice-white) !important;
}

/*Incoming and outgoing name and date/time text*/
.gvMessageItem-postTime, .gvMessageItem-status {
    color: var(--gvoice-text-color) !important;
}

::-moz-placeholder {
    color: var(--gvoice-white) !important;
    opacity: 1 !important;
}

/*Overall Background and Text*/
md-content, body, .gvInfiniteScroll-root, .gvMessageListHeader-messageHeader, .md-body-1 {
    background-color: var(--gvoice-background-color) !important;
    color: var(--gvoice-white) !important;
}

/*Text Message List*/
.GYQtq-CLHpQd {
    border-right: 1px solid var(--gvoice-border-color) !important;
}

/*Text Message List Text*/
.gvThreadItem-root, .gvThreadItem-unread {
    color: var(--gvoice-text-color) !important;
}

/* Message multi-select icon */
/*.ZRgO8c-oyZWsd:hover .ZRgO8c-ienHib {
    filter: brightness(150%) !important;
    -webkit-filter: brightness(150%) !important;
    -o-filter: brightness(150%) !important;
    -ms-filter: brightness(150%) !important;
    background-color: var(--gvoice-border-color) !important;
}

/*Message multi-select icon*/
.gvThreadItem-avatarBatchSelected .gvThreadItem-avatarCheckmark.gvThreadItem-avatarCheckmark.gvThreadItem-avatarCheckmark {
    background: var(--gvoice-accent-color) !important;
}
.gvBatchThreadSelectHeader-container::after{
    border-top: 3px solid var(--gvoice-accent-color) !important;
}
.gvThreadItem-root::before {
    background-color: var(--gvoice-background-color-dark) !important;
}

/* Message multi-select icon color */
.ZRgO8c-GWfNzd .ZRgO8c-ienHib.ZRgO8c-ienHib, .rkljfb-ymuZHc .rkljfb-rVkNNe.rkljfb-rVkNNe.rkljfb-rVkNNe {
    background-color: var(--gvoice-accent-color) !important;
}

/*Message multi-select background color*/
.rkljfb-H9tDt::before, .gmat-nav-list-item.gmat-list-item-active {
    background-color: var(--gvoice-background-color-light) !important;
}

/*Message Title Text*/
.E4guKe-npMLoc {
    color: var(--gvoice-white) !important;
}

/*Message Date/Time Text*/
/*.E4guKe-biJjHb*/
.Bqxti-HIQJ9 {
    color: var(--gvoice-white) !important;
}

/*Message Preview Text*/
.E4guKe-bVEB4e {
    color: var(--gvoice-white) !important;
}

/*Unread items in list*/
.container[_ngcontent-fhd-c16], .gmat-subtitle-2 {
    font-weight: 600 !important;
}

/*Messages Subtitle Text*/
.uM2Vn-VdSJob {
    color: var(--gvoice-white) !important;
}

/*Messages More Options*/
md-menu-content {
    background-color: var(--gvoice-background-color-dark) !important;
}

/*Message Search*/
/*Send a message box at bottom*/
.q2hAhb-OjaX2e.q2hAhb-OjaX2e.q2hAhb-OjaX2e{
    background-color: var(--gvoice-background-color-dark) !important;
    color: var(--gvoice-text-color) !important;
}

/*Table Headers*/
.GYQtq-RZ063d, /* top right headers */
.tDBuBb-NastXc, /* call details */
.hlKfD-tJHJj, /* make call */
.q2hAhb-RZ063d/* top right header */
{
    border-bottom: 1px solid var(--gvoice-border-color) !important;
    color: var(--gvoice-white) !important;
}

/*Bottom Box*/
.tDBuBb-Zpe2Q, /* phone calls */
.hlKfD-fqVkud/* make call */
{
    border-top: 1px solid var(--gvoice-border-color) !important;
    color: var(--gvoice-white) !important;
}

/*Call Contact Text Color*/
.md-button.md-primary {
    color: var(--gvoice-accent-color) !important;
}

/* people and options right slideout */
.GYQtq-pZARYb {
    border-left: 1px solid var(--gvoice-border-color) !important;
}

/*Icons*/
.md-button,
.mat-icon,
.md-icon-button,
.gv-nav-item-icon,
.material-icons-extended {
    color: var(--gvoice-white) !important;
}

/*Primary Icon*/
.mat-primary > svg {
    color: var(--gvoice-accent-color) !important;
}

/*Clicking on an icon*/
button.activated {
    color: var(--gvoice-accent-color) !important;
}

/* blue circle transition when hovering over buttons */
a.md-button.md-default-theme.md-icon-button:hover:not([disabled]),
a.md-button.md-icon-button:hover:not([disabled]),
.md-button.md-default-theme.md-icon-button:hover:not([disabled]),
.md-button.md-icon-button:hover:not([disabled]) .md-icon-button.uYPEqb-H9tDt.md-button:hover/* send message icon */
{
    background-color: var(--gvoice-accent-color) !important;
}

.md-button.md-fab, /* Send message icon background */
.hlKfD-NkdnBe.hlKfD-NkdnBe:not([disabled])/* dial button */
{
    background-color: var(--gvoice-accent-color) !important;
}

/*======= selected section icon color =======*/
.gmat-nav-list-item.gmat-list-item-active .mat-icon svg {
    color: var(--gvoice-accent-color) !important;
}

/* Item selection from list background */
/*.IC8yrb-haAclf, /* left side items section header */
.TK1dEe-haAclf/* message section header */
{
    background-color: var(--gvoice-background-color) !important;
}
.TK1dEe-haAclf::after{
    border-top: 3px solid var(--gvoice-accent-color) !important;
}

/*Message Section Header*/
.mat-icon-button.mat-primary, .gvPageRoot .teal-800, .simpleSnackBarAction {
    color: var(--gvoice-accent-color) !important;
}

/*Message Section Header when a message is selected*/
#ib57, .mat-icon-button .mat-icon, .gvPageRoot .teal-800 {
    color: var(--gvoice-accent-color) !important;
}

.IC8yrb-haAclf::after {
    border-top: 3px solid var(--gvoice-accent-color) !important;
}

/* items selected from list */
.E4guKe-ymuZHc .E4guKe-rVkNNe.E4guKe-rVkNNe.E4guKe-rVkNNe {
    background-color: var(--gvoice-accent-color) !important;
}

/* selection sections left border */
.FzDNDf-gk6SMd.FzDNDf-k77Iif, /* main sections */
.ieK2Ab-sk6lWe.ieK2Ab-gk6SMd, /* 3 dot while in settings menu */
.Xkk8O-gk6SMd, /* settings section */
.rkljfb-gk6SMd/* msg/call/vm/archive lists selected item */
{
    border-left-color: var(--gvoice-accent-color) !important;
}

.a3Rk8e-Sfac4e/*Mark all as read png icon */
{
    filter: invert(100%) brightness(5) !important;
    -webkit-filter: invert(100%) brightness(5) !important;
    -o-filter: invert(100%) brightness(5) !important;
    -ms-filter: invert(100%) brightness(5) !important;
}

/* mark all as read dialog */
md-dialog.md-default-theme, md-dialog {
    background-color: var(--gvoice-background-color-dark) !important;
}

/*======= Voicemail =======*/
/*Progress Bar*/
.gvVoicemailPlayer-progressBarLine {
    background-color: var(--gvoice-white) !important;
}
.gvVoicemailPlayer-progressBar, .gvVoicemailPlayer-progressBarDot, .gvVoicemailPlayer-progressBarLineDummy {
    background-color: var(--gvoice-accent-color) !important;
}


/*======= unread counts =======*/
.IhMtsf-ho7Xm-NnAfwf, .navItemBadge {
    background-color: var(--gvoice-accent-color) !important;
    color: #FFFFFF !important;
}

/* call dialog call button */
.md-button.md-primary {
    color: var(--gvoice-accent-color) !important;
}

/* calling dialog text */
.q68de-Ne3sFf, .q68de-iOyk4d,
md-select .md-select-value.md-select-placeholder,
md-input-container.md-input-has-value label:not(.md-no-float) {
    color: var(--gvoice-white) !important;
}

/* calling dialog selected option text */
md-select-menu md-option[selected],
md-select:focus:not([disabled]) .md-select-value,
md-select-menu md-content md-option {
    color: var(--gvoice-accent-color) !important;
}

/* calling dialog selected option lower border */
md-select:focus:not([disabled]) .md-select-value,
md-select .md-select-value {
    border-bottom-color: var(--gvoice-accent-color) !important;
}

/* calling dialog menu option highlight */
md-select-menu md-option:focus:not([disabled]):not([selected]),
md-select-menu md-content md-option:hover:not([disabled]) {
    background-color: var(--gvoice-background-color-dark) !important;
}

/*Reject incoming call button*/
.I2Bidd-P77PNc.I2Bidd-P77PNc:not([disabled]) {
    background-color: #d93025 !important;
}

/*Accept incoming call button*/
.I2Bidd-zddfv.I2Bidd-zddfv:not([disabled]) {
    background-color: #1e8e3e !important;
}

/* call section */
.GYQtq-ocIXwb {
    background-color: var(--gvoice-background-color) !important;
}

/* dial pad section */
/*.hlKfD-Mjd3I {
    border-color: var(--gvoice-border-color) !important;
}

/* dial pad text */
/*.lp3vjd-LgbsSe, .lp3vjd-cHYyed, .button[_ngcontent-jcn-c21], .button[_ngcontent-pcw-c22] {
    color: var(--gvoice-white) !important;
}

/* call header text color and border */
.hlKfD-pex4lc, .hlKfD-KdeNEf {
    color: var(--gvoice-white) !important;
    border-color: var(--gvoice-border-color) !important;
}

/*=======SETTINGS=======*/
/* settings left side background color */
.layout-row.flex.Xkk8O-haAclf.Xkk8O-kYvABc {
    background-color: var(--gvoice-background-color) !important;
}

/*Button Colors*/
.gmat-button .mat-stroked-button:not([disabled]), .gmat-button.mat-stroked-button:not([disabled]){
    background: var(--gvoice-background-color-light) !important;
    color: var(--gvoice-accent-color) !important;
}

/*===Messages===*/
/*Header*/
.sectionTitle, .header{
    color: var(--gvoice-text-color) !important;
}

/*Device Labels*/
.deviceLabel{
    color: var(--gvoice-text-color)!important;
}

/*Sliders*/
.mat-slide-toggle-bar /*slider background*/{
    background-color: rgba(255,255,255,0.38) !important;
}
.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb /*Enabled slider*/{
    background-color: var(--gvoice-accent-color) !important;
}

/*===Calls===*/
/*Subheadings*/
.internalHeader{
    color: var(--gvoice-text-color) !important;
}

.hOvp7c-jW1oEc, /* settings message icon */
.GxiAAc-mQ2ste.GxiAAc-mQ2ste.GxiAAc-k9P1i/* settings vm greeting play button */
{
    background-color: var(--gvoice-accent-color) !important;
}

/*===Voicemail===*/
/*Active greeting*/
.active-title{
    color: var(--gvoice-accent-color) !important;
}

/*Greeting name*/
.name{
    color: var(--gvoice-text-color) !important;
}

/*=Manage All Greetings=*/
/*Background*/
.gmat-dialog-panel .mat-dialog-container{
    background-color: var(--gvoice-background-color-light) !important;
}

/*Headings*/
.subtitle{
    color: var(--gvoice-accent-color) !important;
}

/* settings voicemail greeting add button */
/*.PFS3Eb-g6kmac {
    border-color: var(--gvoice-accent-color) !important;
}

/*md-checkbox.md-checked .md-icon, /* settings checkbox buttons */
/*md-switch.md-checked .md-thumb/* settings switch circles */
/*{
    background-color: var(--gvoice-accent-color) !important;
}

/*===Web Notifications===*/
.notificationText{
    color: var(--gvoice-text-color) !important;
}

/*===Payments===*/
/*Current Balance*/
.creditSubheader{
    color: var(--gvoice-accent-color) !important;
}

/*Auto-Recharge*/
.mat-select-value{
    color: var(--gvoice-text-color)
}
#mat-select-0-panel{
    background-color: var(--gvoice-background-color-light) !important;
}
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
    color: var(--gvoice-accent-color) !important;
}
/*.mat-option-text{
    color: var(--gvoice-text-color) !important;
}

/* settings switch background bar */
md-switch .md-bar {
    background-color: var(--gvoice-border-color) !important;
}

/* settings small text items */
.Y01sTe-akRZae {
    color: var(--gvoice-white) !important;
}

/* new linked number dialog input box */
md-input-container .md-input {
    color: var(--gvoice-white) !important;
    border-color: var(--gvoice-accent-color) !important;
}

/* new linked number button */
.b1gcZe-KZ43Se md-icon {
    border-color: var(--gvoice-accent-color) !important;
}

/* Manage Greetings text background */
/*.sMgtJb-tJHJj {
    background-color: unset !important;
}

/*=======Audio Settings=======*/
/*Background*/
.full-panel{
    background-color: var(--gvoice-background-color-light) !important;
}

/*Microphone Feedback*/
.gvPageRoot .bars{
    color: var(--gvoice-accent-color) !important;
}

/*Dropdown Lists*/
.mat-select-panel{
    background-color: var(--gvoice-background-color-dark)
}

/*Dropdown List Text Color*/
.mat-option.mat-focus-indicator.ng-star-inserted.mat-selected.mat-active{
    color: var(--gvoice-accent-color) !important;
}
.mat-option.mat-focus-indicator.ng-star-inserted{
    color: var(--gvoice-text-color) !important
}

/*Active Dropdown List*/
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
    color: var(--gvoice-accent-color) !important;
}

/* new contact name input box label */
md-input-container label {
    color: var(--gvoice-white) !important;
}

/* new contact buttons */
.gmat-button .mat-button:not([disabled]), .gmat-button.mat-button:not([disabled]){
    color: var(--gvoice-accent-color) !important;
}
.mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay, .mat-stroked-button.mat-primary .mat-button-focus-overlay, .gmat-button .mat-flat-button:not([disabled]), .gmat-button.mat-flat-button:not([disabled]){
    background: var(--gvoice-accent-color) !important;
}

/* new message recipient text input box */
input.ng-valid {
    color: var(--gvoice-white) !important;
}

/* suggested new contact phone # label */
.md-autocomplete-suggestions-container li {
    color: var(--gvoice-white) !important;
}

/* contact selection background */
.md-whiteframe-4dp {
    background-color: var(--gvoice-background-color-dark) !important;
}

/* contact card name and number type */
.dOUild-XSJd1, .dOUild-Od0oM, .Gb0ubd-Od0oM {
    color: var(--gvoice-white) !important;
}

/* center of starred contact star badge */
.dOUild-yreACb {
    background-color: var(--gvoice-background-color-dark) !important;
}

/* circle in starred contact star badge */
.dOUild-fI6EEc {
    color: #f4b400 !important;
}

/* voicemail playback progress bar */
.wnqXZe-P1ekSe-ZMv3u, .wnqXZe-xro71b, .wnqXZe-Igk6W, .wnqXZe-kemPlf {
    background-color: var(--gvoice-accent-color) !important;
}

/* search results send message button */
.q2hAhb-OjaX2e {
    background-color: var(--gvoice-accent-color) !important;
}

/* search results send message button icon */
.q2hAhb-OjaX2e md-icon {
    color: var(--gvoice-accent-color) !important;
}

/* call button text */
.md-button.md-raised:not([disabled]) {
    color: var(--gvoice-white) !important;
}

/* place border below google bar container (top of google voice frame) */
.gv_root {
    border-top: 1px solid var(--gvoice-border-color) !important;
}

/*=======Dialer=======*/
/*Main background color*/
.gvCallSidebar-root{
    background-color: var(--gvoice-background-color) !important;
}

/*Call as text*/
.call-as-label, .phone-number{
    color: var(--gvoice-text-color) !important;
}

/*Enter Name or Number*/
input.ng-valid {
    background-color: var(--gvoice-background-color) !important
}

/*Duration text*/
.GHQeBe-jOfkMb{
    color: var(--gvoice-text-color) !important;
}

/*Caller name*/
.GHQeBe-qdm4Zd{
    color: var(--gvoice-text-color) !important;
}

/*Caller Phone Number*/
.GHQeBe-wKtwcc, .GHQeBe-jOfkMb, .phone-number-details {
    color: var(--gvoice-text-color) !important;
}

/*Dialed Numbers*/
.gmat-headline-5{
    background-color: var(--gvoice-background-color) !important;
}

/*Numberpad Numbers*/
.gvPageRoot .button {
    background-color: var(--gvoice-background-color) !important;
}
.gvPageRoot .button:hover {
    background-color: var(--gvoice-background-color-dark) !important;
}
.button {
    color: var(--gvoice-text-color) !important;
}

/*Show keypad / hide keypad background*/
.root.mat-button, .mat-mdc-button .mat-mdc-button-touch-target {
    background-color: var(--gvoice-background-color) !important;
    color: var(--gvoice-text-color) !important;
}

/*Show keypad / hide keypad icon*/
.icon > svg:nth-child(1) > path:nth-child(1){
    color: var(--gvoice-accent-color) !important;
}

/*Message button*/
.button.button[_ngcontent-ngx-c13], .gvPageRoot [_nghost-ng-c2158453531]  {
    background-color: var(--gvoice-background-color-light) !important;
}
.icon.icon{
    color: var(--gvoice-accent-color) !important;    
}


/*Active Call Background*/
.ng-tns-c315-1.ng-star-inserted, .dtmf-input, .active-call-wrapper{
    background-color: var(--gvoice-background-color) !important;
    border: 0px solid var(--gvoice-border-color) !important;
    color: var(--gvoice-text-color)
}

/*Active Call - caller name*/
.remote-display-name {
    color: var(--gvoice-text-color) !important;
}

}