blob: 0282658387b7934056b9bf7e2c68baf3f7524ef1 [file] [log] [blame]
:root {
color-scheme: dark;
--TWPT-primary-text: #e8eaed;
--TWPT-primary-text-alt: var(--TWPT-primary-text);
--TWPT-secondary-text: #9aa0a6;
--TWPT-primary-background: #202124;
--TWPT-secondary-background: #28292c;
--TWPT-active-background: #3c4043;
--TWPT-card-border: #5f6368;
--TWPT-subtle-border: #383735;
--TWPT-link: #8ab4f8;
--TWPT-highlighted-item-background: rgba(255, 255, 255, .08);
--TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
--TWPT-drawer-background: #2d2e30;
--TWPT-button-background: #3c3e42;
--TWPT-subtle-button-background: rgba(255, 255, 255, .54);
--TWPT-input-underline: rgba(255, 255, 255, .28);
--TWPT-starred: #fbbc04;
--TWPT-blue-100: #BBDEFB;
--TWPT-blue-A100: #82B1FF;
--TWPT-bad-text: #f6aea9;
--TWPT-bad-text-lightbg: #ffc4c0;
--TWPT-good-text: #34a853;
--TWPT-good-text-lightbg: #3cc160;
--TWPT-interop-primary-text: var(--TWPT-primary-text);
--TWPT-interop-secondary-text: #c4c7c5;
--TWPT-interop-subtle-border: #474747;
--TWPT-interop-success: #37be5f;
--TWPT-interop-blue: #7cacf8;
/* MD3 dark theme variables */
--TWPT-md-sys-color-primary: #bda5ff;
--TWPT-md-sys-color-on-primary: #000;
--TWPT-md-sys-color-surface: var(--TWPT-drawer-background);
--TWPT-md-sys-color-on-surface: var(--TWPT-primary-text);
--TWPT-md-sys-color-on-surface-rgb: 154, 160, 166;
--TWPT-md-sys-color-on-surface-variant: var(--TWPT-secondary-text);
--TWPT-md-list-list-divider-color: var(--TWPT-subtle-border);
--TWPT-md-ripple-hover-state-layer-color: white;
--TWPT-md-ripple-pressed-state-layer-color: white;
--TWPT-custom-md-icon-color: var(--TWPT-subtle-button-background);
}
body {
color: var(--TWPT-primary-text);
background-color: var(--TWPT-primary-background)!important;
}
p {
color: var(--TWPT-primary-text);
}
body.ec a {
color: var(--TWPT-link);
}
/* Header */
.material-content > header {
background-color: var(--TWPT-primary-background)!important;
}
.material-content > header .app-title-button,
.material-content > header .app-title-text {
color: var(--TWPT-secondary-text)!important;
}
.material-content > header :is(material-button,
material-button material-icon,
.mdc-button.mdc-icon-button,
.mdc-button.mdc-icon-button material-icon,
notification-bell material-icon) {
color: rgba(255, 255, 255, .87)!important;
}
.search-box {
background-color: #313235!important;
}
.search-box .clear-icon {
opacity: 0.8;
color: rgba(255, 255, 255, .87)!important;
}
.material-content > header .bell.mixin {
fill: rgba(255, 255, 255, .87)!important;
}
/* Notification bell */
notification-bell:focus {
background-color: rgba(255, 255, 255, .10)!important;
}
/* Drawer */
material-drawer, material-drawer .panel, material-list-item {
background-color: var(--TWPT-drawer-background)!important;
}
material-list-item:hover, material-list-item:focus, material-list-item.item--active {
background-color: var(--TWPT-active-background)!important;
}
material-drawer .panel {
border-bottom-color: #25231f!important;
}
material-drawer .drawer-section-title, material-drawer .header > material-icon {
color: var(--TWPT-secondary-text)!important;
}
material-drawer material-list-item,
material-drawer material-list-item .title {
color: #d2cecb!important;
}
material-drawer ec-forum-drawer-item material-checkbox material-icon {
filter: brightness(1.5);
}
/* Tabs */
material-tab-strip tab-button {
color: var(--TWPT-secondary-text)!important;
}
material-tab-strip tab-button.active {
color: var(--TWPT-blue-A100)!important;
}
material-tab-strip .tab-indicator {
border-top-color: var(--TWPT-blue-A100)!important;
}
/* Header menus */
.popup material-list-item {
color: #d2cecb!important;
}
/* Filters (ec-query-builder) */
material-condition-builder .compound-condition-operator {
color: var(--TWPT-secondary-text)!important;
}
material-condition-builder .compound-condition-operator:is(::before, ::after) {
border-left-color: rgba(255, 255, 255, .20)!important;
}
material-condition-builder .add-button,
ec-query-builder .save-filter-button:not([disabled]) {
color: var(--TWPT-blue-A100)!important;
}
material-condition-builder .add-condition,
ec-query-builder .close-button {
background-color: var(--TWPT-interop-blue)!important;
color: #1f1f1f!important;
}
/* Selector */
/*
* This applies not only to the selector but also to the ec-work-state-picker.
*/
.popup-wrapper, material-list, .popup .item-group-list {
background-color: var(--TWPT-drawer-background)!important;
}
material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
.popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
border-top-color: #1f1f1f!important;
}
material-list material-select-item:hover,
material-list material-select-item:focus,
material-list material-select-dropdown-item:hover,
material-list material-select-dropdown-item:focus,
material-list material-select-dropdown-item.active,
material-list material-select-dropdown-item:not(.multiselect).selected,
material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
.popup .item-group-list material-select-item:hover,
.popup .item-group-list material-select-item:focus,
.popup .item-group-list material-select-item.active,
.popup .item-group-list material-select-dropdown-item:hover,
.popup .item-group-list material-select-dropdown-item:focus,
.popup .item-group-list material-select-dropdown-item.active,
.popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
background-color: var(--TWPT-highlighted-item-background)!important;
}
material-list .single-select-item,
material-list .menu-item-label,
material-list .label,
material-list .text-segment,
menu-item-groups .single-select-item,
menu-item-groups .menu-item-label,
menu-item-groups .label,
menu-item-groups .text-segment {
color: rgba(255, 255, 255, .87)!important;
}
.popup .item-group-list material-icon {
color: rgba(255, 255, 255, .7)!important;
}
material-list [group] > [label] {
color: #8a8a8a!important;
}
/* This is shown in the new thread view */
ec-forum-language-picker .labeled-select .select-label {
color: var(--TWPT-secondary-text)!important;
}
/* Main */
.main {
color: var(--TWPT-primary-text)!important;
}
/* Border color for the page title bar (most pages use .title-bar although
* some use .page-header).
*/
main .title-bar, main .page-header {
border-bottom-color: var(--TWPT-subtle-border)!important;
}
main .title-bar .title, main .page-header h1, main .header h1 {
color: var(--TWPT-primary-text)!important;
}
.card {
background-color: var(--TWPT-secondary-background)!important;
color: var(--TWPT-primary-text)!important;
border-color: var(--TWPT-card-border)!important;
}
.card .card-title, .card, .card-section-title {
color: var(--TWPT-primary-text)!important;
}
.card .card-section-hint, .card .card-section-checkbox-hint {
color: var(--TWPT-secondary-text)!important;
}
/* Action bar */
.material-content .action-bar material-button,
ec-bulk-actions material-button,
ec-back-button material-button,
.sort-options material-button {
color: var(--TWPT-subtle-button-background)!important;
}
.material-content .action-bar .review-button.reviewing {
color: #1a73e8!important;
background: #dae7ff!important;
}
.material-content .action-bar material-button.starred {
color: var(--TWPT-starred)!important;
}
/* ec-work-state-picker and ec-symptom-picker */
ec-work-state-picker > button,
ec-symptom-picker > button {
color: var(--TWPT-secondary-text)!important;
background-color: var(--TWPT-button-background)!important;
border-color: var(--TWPT-subtle-border)!important;
}
.material-popup-content .popup-content .title {
color: var(--TWPT-primary-text)!important;
}
/* Thread list */
ec-thread-list ul.thread-group {
background-color: var(--TWPT-primary-background)!important;
}
ec-thread-list ec-bulk-actions, ec-thread-list ec-thread-summary material-expansionpanel {
border-bottom-color: var(--TWPT-subtle-border)!important;
}
ec-thread-list .no-results {
color: var(--TWPT-primary-text-alt)!important;
}
ec-thread-summary material-expansionpanel.read:not(.checked) {
background-color: var(--TWPT-thread-read-background)!important;
}
ec-thread-summary material-expansionpanel.read .title span:not(.icon) {
opacity: 0.8;
}
ec-thread-summary material-expansionpanel.read .title .icon {
opacity: 0.48!important;
}
ec-thread-summary material-expansionpanel.checked {
background-color: #2c4b77!important;
}
ec-thread-summary material-expansionpanel .title {
color: var(--TWPT-primary-text)!important;
}
ec-thread-summary material-expansionpanel ec-second-summary-line,
material-expansionpanel .header-content,
material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
material-expansionpanel .duplicate-label {
color: #928e89!important;
}
material-expansionpanel .removed-label {
color: var(--TWPT-bad-text)!important;
}
ec-thread-summary material-expansionpanel ec-safe-html.body,
material-expansionpanel .issue-tracking-work-state {
color: var(--TWPT-primary-text)!important;
}
/*
* The following section changes the styles of the checkboxes in thread lists,
* based in the styles defined in the "Checkbox input" section.
**/
ec-thread-summary material-expansionpanel .action material-button:not(.starred),
ec-thread-list material-checkbox material-icon,
ec-thread-summary material-expansionpanel .star-button:not(.starred),
ec-thread-summary material-expansionpanel .mdc-button.mdc-icon-button material-icon {
color: #696867!important; /* Custom value to match previous behavior */
opacity: 1!important;
}
ec-thread-summary material-expansionpanel .action material-button.starred {
color: var(--TWPT-starred)!important;
}
ec-thread-list material-checkbox material-icon.filled {
color: #62a5ff!important; /* Custom value to contrast well with the background */
}
/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon,
.gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon,
ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon,
.gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon {
color: #807d7c!important; /* custom value */
}
ec-thread-list material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
.gm-icons ec-thread-list material-checkbox:focus:not(.disabled) .icon.filled,
ec-thread-list material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
.gm-icons ec-thread-list material-checkbox:hover:not(.disabled) .icon.filled {
color: #92c1ff!important; /* custom value */
}
/* Thread view (including review/live review components) */
ec-question, .heading + .group, ec-message {
background-color: var(--TWPT-secondary-background)!important;
}
ec-thread .no-review-needed {
background-color: #155829!important;
border-color: var(--TWPT-subtle-border)!important;
}
/* "Original thread" box inside escalations */
sc-tailwind-thread-question-thread-summary .scTailwindThreadQuestionThreadsummarythread-summary {
background: var(--TWPT-active-background)!important;
border-color: var(--TWPT-card-border)!important;
}
sc-tailwind-thread-question-thread-summary .scTailwindThreadQuestionThreadsummarydetails {
color: var(--TWPT-secondary-text)!important;
}
sc-tailwind-thread-question-thread-summary .scTailwindThreadQuestionThreadsummarytitle {
color: var(--TWPT-primary-text)!important;
}
/* Review bar shown above the main message or replies */
ec-review-bar {
background-color: var(--TWPT-active-background)!important;
}
ec-review-bar material-chip {
background-color: var(--TWPT-button-background)!important;
}
ec-review-bar material-chip:not(.relevant-active):not(.active) {
border-color: var(--TWPT-card-border)!important;
}
ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
color: var(--TWPT-primary-text)!important;
fill: var(--TWPT-primary-text)!important;
}
ec-review-bar material-chip:not(.relevant-active):not(.active) .content {
color: var(--TWPT-primary-text)!important;
}
ec-review-bar material-chip.relevant-active {
border-color: var(--TWPT-good-text)!important;
}
ec-review-bar material-chip.relevant-active material-icon {
color: var(--TWPT-good-text)!important;
fill: var(--TWPT-good-text)!important;
}
ec-review-bar material-chip.relevant-active .content {
color: var(--TWPT-good-text)!important;
}
ec-review-bar material-chip.active {
border-color: var(--TWPT-bad-text)!important;
}
ec-review-bar material-chip.active material-icon {
color: var(--TWPT-bad-text)!important;
fill: var(--TWPT-bad-text)!important;
}
ec-review-bar material-chip.active .content {
color: var(--TWPT-bad-text)!important;
}
ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
color: var(--TWPT-secondary-text)!important;
}
ec-question .alert, ec-message .alert {
background-color: var(--TWPT-active-background)!important;
}
ec-question .alert material-icon, ec-message .alert material-icon {
color: var(--TWPT-primary-text)!important;
}
ec-question .alert ec-icon, ec-message .alert ec-icon {
color: var(--TWPT-primary-text)!important;
fill: var(--TWPT-primary-text)!important;
}
ec-question .alert material-button {
color: var(--TWPT-link)!important;
}
ec-question .title {
color: var(--TWPT-primary-text-alt)!important;
}
ec-user-link .name-text {
color: var(--TWPT-link)!important;
}
ec-message-header ec-avatar svg, ec-message-header .role,
ec-message .footer .role {
filter: brightness(1.5);
}
ec-question .body, ec-message .body {
color: var(--TWPT-primary-text)!important;
}
ec-question .thread-insert {
background: none!important;
}
ec-question .details-heading {
color: var(--TWPT-primary-text-alt) !important;
}
ec-question .state-chips material-chip,
.TWPT-extrainfo-chip {
background-color: var(--TWPT-button-background)!important;
border: none!important;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12)!important;
}
ec-question .state-chips material-chip .content,
.TWPT-extrainfo-chip .TWPT-content {
color: var(--TWPT-primary-text)!important;
}
ec-question .footer,
ec-ask-flow .content-disclaimer {
color: var(--TWPT-primary-text)!important;
background-color: var(--TWPT-active-background)!important;
border-top-color: var(--TWPT-card-border)!important;
}
.heading {
color: var(--TWPT-primary-text)!important;
}
.heading + .group,
.load-more-bar,
ec-message:not(:first-child),
.load-more-bar .load-more-button,
.load-more-bar .load-all-button {
border-color: var(--TWPT-card-border)!important;
}
ec-message .type {
color: var(--TWPT-primary-text)!important;
}
ec-message .footer ec-relative-time,
ec-message .footer ec-safe-html {
color: var(--TWPT-secondary-text)!important;
}
ec-message .helpful-prompt {
color: var(--TWPT-primary-text)!important;
}
ec-question .me-too-button,
ec-question .subscribe-button,
ec-message .upvote-button,
ec-message .downvote-button {
color: var(--TWPT-secondary-text)!important;
background-color: var(--TWPT-button-background)!important;
}
ec-message .alert {
color: var(--TWPT-secondary-text)!important;
}
ec-question .me-too-button.selected,
ec-question .subscribe-button.selected,
ec-message .upvote-button.selected,
ec-message .downvote-button.selected {
color: #4285f4!important;
}
.load-more-bar .load-more-button, .load-more-bar .load-all-button {
background-color: var(--TWPT-secondary-background)!important;
}
.locked-alert {
background-color: var(--TWPT-active-background)!important;
border: var(--TWPT-card-border)!important;
}
.locked-alert material-icon {
color: rgba(255, 255, 255, .38)!important;
}
ec-thread button.reply.collapsed {
color: var(--TWPT-secondary-text)!important;
}
ec-thread .finished-question {
background-color: var(--TWPT-active-background)!important;
border: var(--TWPT-card-border)!important;
}
ec-thread .finished-question .next-question {
color: var(--TWPT-link)!important;
border-color: var(--TWPT-link)!important;
}
.material-content .action-bar material-button.has-activity {
color: var(--TWPT-blue-A100)!important;
}
.material-content .action-bar material-button.showing-sidebar {
background-color: var(--TWPT-active-background)!important;
}
ec-activity-panel .title-bar h3 {
color: #e8eaf2!important;
}
ec-activity-panel .title-bar material-button {
color: var(--TWPT-subtle-button-background)!important;
}
ec-activity-panel ec-activity {
color: var(--TWPT-secondary-text)!important;
border-color: var(--TWPT-card-border)!important;
}
ec-activity-panel ec-activity .message {
color: var(--TWPT-primary-text-alt)!important;
}
ec-activity-panel ec-activity .thread-title {
color: #c3bfbc!important;
}
/* Recommended answers - show in green where we've overwritten the colors */
.recommended-answers {
color: #34a853!important;
}
/* Suggested answers - show brighter blue */
.suggested-icon {
color: var(--TWPT-blue-A100)!important;
}
/* Help button (shown in the suggested answers header) */
.explanation-icon material-icon {
color: var(--TWPT-subtle-button-background)!important;
}
/* Help button tooltip */
.popup .paper-container {
background: var(--TWPT-drawer-background)!important;
}
.explanation-icon material-icon:hover {
color: var(--TWPT-blue-A100)!important;
}
/* New thread and edit message views */
material-stepper {
border-top-color: var(--TWPT-card-border)!important;
}
material-stepper .stepper-step-name,
material-stepper .purpose-title {
color: var(--TWPT-primary-text)!important;
}
ec-ask-flow .display-name-label,
material-stepper .additional-details-label,
material-stepper .detail-label {
color: var(--TWPT-secondary-text)!important;
}
material-stepper .stepper-step[selectable=true]:focus {
background-color: rgba(60, 64, 67, .24)!important;
}
/* Compose thread view */
ec-thread-composer .main-content .title-label,
ec-thread-composer .main-content .post-label {
color: var(--TWPT-primary-text-alt)!important;
}
ec-thread-composer .main-content .title-input,
ec-thread-composer .main-content ec-rich-text-editor {
border-color: var(--TWPT-card-border)!important;
}
ec-thread-composer .main-content .title-alert {
color: var(--TWPT-bad-text)!important;
}
ec-thread-composer material-drawer {
background-color: inherit!important;
}
ec-thread-composer material-drawer .right-panel {
border-left-color: var(--TWPT-card-border)!important;
}
ec-thread-composer material-drawer .panel-section-title {
color: var(--TWPT-primary-text)!important;
}
ec-thread-composer material-drawer .panel-section-divider {
border-color: var(--TWPT-card-border)!important;
}
ec-thread-composer material-drawer material-radio .radio-label {
color: var(--TWPT-primary-text-alt)!important;
}
ec-thread-composer material-drawer material-radio .radio-description,
ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
color: var(--TWPT-secondary-text)!important;
}
/* Note: see thread view section. There is a rule for the thread creation
* footer.
**/
/* Chart in the profile view */
ec-user bar-chart .axis text,
ec-unified-user .scTailwindSharedActivitychartchart .axis text {
fill: var(--TWPT-subtle-button-background)!important;
}
ec-user bar-chart .axis path,
ec-user bar-chart .axis .gridline,
ec-user bar-chart .axis line,
ec-unified-user .scTailwindSharedActivitychartchart .axis path,
ec-unified-user .scTailwindSharedActivitychartchart .axis .gridline,
ec-unified-user .scTailwindSharedActivitychartchart .axis line {
stroke: rgba(255, 255, 255, .12)!important;
}
ec-user bar-chart .axis line.axis-zero-tick,
ec-user bar-chart .axis.x .tick-mark,
ec-unified-user .scTailwindSharedActivitychartchart .axis line.axis-zero-tick,
ec-unified-user .scTailwindSharedActivitychartchart .axis.x .tick-mark {
stroke: rgba(255, 255, 255, .38)!important;
}
ec-user bar-chart .aplos-legend-entry,
ec-unified-user .scTailwindSharedActivitychartchart .aplos-legend-entry {
color: var(--TWPT-secondary-text)!important;
}
.aplos-hovercard {
color: var(--TWPT-interop-secondary-text)!important;
background: var(--TWPT-secondary-background)!important;
border: none!important;
}
.aplos-hovercard .title {
color: var(--TWPT-primary-text)!important;
}
.aplos-hovercard .subtitle,
.aplos-donut-center .subtitle,
.aplos-hovercard .series,
.aplos-donut-center .series,
.aplos-hovercard .value,
.aplos-donut-center .value {
color: var(--TWPT-secondary-text)!important;
}
/*
* IMPORTANT NOTICE:
* Note: the following styles (for interop components) have been written by
* Googlers and thus are not included as part of the MIT license. This also
* applies to the styles of the unified profiles and the interop thread view.
**/
/* Common styles for interop components */
.scSharedCalloutroot {
color: var(--TWPT-interop-primary-text)!important;
}
.scSharedCallouterror {
background-color: #523a3b!important;
border-color: #f9dedc!important;
}
.scSharedCallouterror sc-shared-material-icon {
color: #f9dedc!important;
}
.scSharedCallouterror>.scSharedCalloutsecondary-button button {
color: #ec928e!important;
}
.scSharedCalloutcaution {
background-color: #554c33!important;
border-color: #ffdf99!important;
}
.scSharedCalloutcaution sc-shared-material-icon {
color: #ffdf99!important;
}
.scSharedCalloutcaution>.scSharedCalloutsecondary-button button {
color: #f09d00!important;
}
.scSharedCalloutinformational {
background-color: #394457!important;
border-color: #d3e3fd!important;
}
.scSharedCalloutinformational sc-shared-material-icon {
color: #d3e3fd!important;
}
.scSharedCalloutinformational>.scSharedCalloutsecondary-button button {
color: var(--TWPT-interop-blue)!important;
}
.scSharedCalloutsuccess {
background-color: #37493f!important;
border-color: #c4eed0!important;
}
.scSharedCalloutsuccess sc-shared-material-icon {
color: #c4eed0!important;
}
.scSharedCalloutsuccess>.scSharedCalloutsecondary-button button {
color: var(--TWPT-interop-success)!important;
}
.scSharedMaterialbuttonroot {
--m-btn-text-color: var(--TWPT-interop-blue);
--m-btn-background-color: transparent;
--m-btn-outline-color: var(--TWPT-interop-blue);
background: var(--m-btn-background-color)!important;
color: var(--m-btn-text-color)!important;
}
.scSharedMaterialbuttonroot:disabled {
color: rgba(227, 227, 227, 0.369)!important;
}
.scSharedMaterialbuttontext {
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialbuttoncolor-label {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialbuttoncolor-hint {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialbuttonnavigational {
color: var(--TWPT-interop-primary-text)!important;
}
.scSharedMaterialbuttonnavigational-alt {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialbuttonhairline, .scSharedMaterialbuttonpill {
outline: 1px solid var(--m-btn-outline-color)!important;
}
.scSharedMaterialbuttonhairline:hover, .scSharedMaterialbuttonhairline:focus, .scSharedMaterialbuttonpill:hover, .scSharedMaterialbuttonpill:focus {
--m-btn-outline-color: currentColor!important;
}
.scSharedMaterialbuttonhairline {
--m-btn-outline-color: var(--TWPT-interop-subtle-border)!important;
}
.scSharedMaterialbuttonhairline:disabled {
--m-btn-outline-color: rgba(227, 227, 227, 0.369)!important;
}
.scSharedMaterialbuttonhairline:active {
box-shadow: 0 1px 2px 0 rgba(227, 227, 227, 0.302), 0 1px 3px 1px rgba(227, 227, 227, 0.149)!important;
}
.scSharedMaterialbuttontonal {
color: var(--TWPT-interop-blue)!important;
background: #394457!important;
}
.scSharedMaterialbuttontonal:hover {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
}
.scSharedMaterialbuttontonal:active {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
}
.scSharedMaterialbuttontonal:disabled {
background: rgba(227, 227, 227, 0.122)!important;
}
.scSharedMaterialbuttonfilled {
background: var(--TWPT-interop-blue)!important;
color: #1f1f1f!important;
}
.scSharedMaterialbuttonfilled:disabled {
background: rgba(227, 227, 227, 0.122)!important;
}
.scSharedMaterialbuttonfilled:hover,
.scSharedMaterialbuttonfilled:focus {
box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
}
.scSharedMaterialbuttonfilled:active {
box-shadow: 0 1px 3px 0 rgba(124, 172, 248, 0.302), 0 4px 8px 3px rgba(124, 172, 248, 0.149)!important;
}
.scSharedMaterialbuttonprotected {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
background: #1f1f1f!important;
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialbuttonprotected:disabled {
background: rgba(227, 227, 227, 0.122)!important;
}
.scSharedMaterialbuttonprotected:hover {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
}
.scSharedMaterialbuttonprotected:focus {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
}
.scSharedMaterialbuttonprotected:active {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149)!important;
}
.scSharedMaterialbuttonsuccess {
--m-btn-text-color: var(--TWPT-interop-success)!important;
--m-btn-outline-color: var(--TWPT-interop-success)!important;
}
.scSharedMaterialbuttonsuccess.scSharedMaterialbuttonfilled {
--m-btn-text-color: #1f1f1f!important;
--m-btn-background-color: var(--TWPT-interop-success)!important;
}
.scSharedMaterialbuttonsuccess.scSharedMaterialbuttontonal {
--m-btn-background-color: #0f5223
}
@media (forced-colors:active) {
.scSharedMaterialbuttonroot:focus {
outline: 2px solid #e3e3e3;
}
}
@media (prefers-contrast:more) {
.scSharedMaterialbuttonroot:focus {
outline: 2px solid #e3e3e3;
}
}
.scSharedExpandabletextexpander {
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialborderfilled {
background: #313235!important;
border-bottom: 1px solid var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialborderfilled-error {
border-bottom-color: #ec928e!important;
}
.scSharedMaterialborderfilled-bottom {
background-color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialborderfilled-label {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialborderfilled-label-focused {
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialborderlabel {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialborderleft {
border-bottom-color: var(--TWPT-interop-secondary-text)!important;
border-left-color: var(--TWPT-interop-secondary-text)!important;
border-top-color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialborderleft-error {
border-bottom-color: #ec928e!important;
border-left-color: #ec928e!important;
border-top-color: #ec928e!important;
}
.scSharedMaterialbordermid {
border-bottom-color: var(--TWPT-interop-secondary-text)!important;
border-top-color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialbordermid-error {
border-bottom-color: #ec928e!important;
border-top-color: #ec928e!important;
}
.scSharedMaterialborderright {
border-bottom-color: var(--TWPT-interop-secondary-text)!important;
border-right-color: var(--TWPT-interop-secondary-text)!important;
border-top-color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialborderright-error {
border-bottom-color: #ec928e!important;
border-right-color: #ec928e!important;
border-top-color: #ec928e!important;
}
.scSharedMaterialborderfocused {
border-color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialborderdisabled {
border-color: var(--TWPT-interop-subtle-border)!important;
}
.scSharedMaterialborderlabel-focused {
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialborderlabel-disabled {
color: rgba(255, 255, 255, 0.239)!important;
}
.scSharedMaterialborderlabel-error {
color: #ec928e!important;
}
.scSharedMaterialcardroot {
background: #1f1f1f;
border: 1px solid var(--TWPT-interop-subtle-border);
}
.scSharedMaterialcardelevation-1 {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
background: #2a2b2f;
}
.scSharedMaterialcardelevation-2 {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149);
background: #303135;
}
.scSharedMaterialcardelevation-3 {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149);
background: #36383a;
}
.scSharedMaterialcardelevation-4 {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.302), 0 6px 10px 4px rgba(0, 0, 0, 0.149);
background: #39393c;
}
.scSharedMaterialcardelevation-5 {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.302), 0 8px 12px 6px rgba(0, 0, 0, 0.149);
background: #3c3e40;
}
@media (forced-colors:active) {
.scsharedmaterialcardroot {
border-color: #e3e3e3;
}
}
@media (prefers-contrast:more) {
.scsharedmaterialcardroot {
border-color: #e3e3e3;
}
}
.scSharedMaterialcheckboxcheckbox {
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialcheckboxbox {
border-color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialcheckboxnative-control:checked:disabled+.scSharedMaterialcheckboxbox,
.scSharedMaterialcheckboxnative-control:indeterminate:disabled+.scSharedMaterialcheckboxbox {
background: rgba(0, 0, 0, .26);
border-color: transparent;
}
.scSharedMaterialcheckboxnative-control:disabled+.scSharedMaterialcheckboxbox {
border-color: rgba(0, 0, 0, .26);
}
.scSharedMaterialcheckboxcheckmark-path {
stroke: #1f1f1f!important;
}
.scSharedMaterialcheckboxmixedmark {
border-color: #1f1f1f!important;
}
.scSharedMaterialfabroot {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149);
background: #303135;
color: var(--TWPT-interop-blue);
}
@media (forced-colors:active) {
.scSharedMaterialfabroot {
outline: 3px solid var(--TWPT-interop-blue);
}
}
.scSharedMaterialfabroot.scSharedMaterialfabgrey {
color: var(--TWPT-interop-secondary-text);
}
.scSharedMaterialfabroot:.scSharedMaterialfabfake-focus,
.scSharedMaterialfabroot:hover,
.scSharedMaterialfabroot:focus {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.302), 0 6px 10px 4px rgba(0, 0, 0, 0.149);
}
.scSharedMaterialfabroot:active {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.302), 0 8px 12px 6px rgba(0, 0, 0, 0.149);
}
.scSharedMaterialfablowered {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
}
.scSharedMaterialfablowered.scSharedMaterialfabfake-focus,
.scSharedMaterialfablowered:hover,
.scSharedMaterialfablowered:focus {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149);
}
.scSharedMaterialfablowered:active {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149);
}
.scSharedMaterialfabfilled {
background: rgba(124,172,248,0.239);
color: var(--TWPT-interop-blue);
}
.scSharedMaterialfabfilled.scSharedMaterialfabgrey {
background: var(--TWPT-interop-secondary-text);
color: #1f1f1f;
}
.scSharedMaterial_dialogDialogcontentloading-overlay {
background: rgba(227, 227, 227, 0.122)!important;
}
.scSharedMaterialpopupbackground {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
background: #2a2b2f!important;
border: 1px solid var(--TWPT-interop-subtle-border)!important;
}
@media (forced-colors:active) {
.scSharedMaterialpopupbackground {
border-color: #e3e3e3;
}
}
@media (prefers-contrast:more) {
.scSharedMaterialpopupbackground {
border-color: #e3e3e3;
}
}
.scSharedMaterialmenuroot {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149)!important;
background: #2a2b2f!important;
}
.scSharedMaterialmenuitem {
color: var(--TWPT-interop-primary-text)!important;
}
.scSharedMaterialmenuitem[disabled] {
color: var(--TWPT-interop-subtle-border);
}
.scSharedMaterialmenuitem-separator {
border-top-color: var(--TWPT-interop-subtle-border)!important;
}
.scSharedMaterialmenuhighlight:focus,
.scSharedMaterialmenuhighlight:hover {
background-color: #394457!important;
}
.scSharedMaterialmenuhighlight:focus {
outline: auto var(--TWPT-interop-blue) 1px!important;
}
.scSharedMaterialtooltipcontainer {
background-color: #e3e3e3;
color: #1f1f1f;
}
.scSharedMaterialradioradio {
color: var(--TWPT-interop-blue);
}
.scSharedMaterialradioring {
border: 2px solid var(--TWPT-interop-secondary-text);
}
.scSharedMaterialradionative-control:disabled~.scSharedMaterialradioring {
border-color: rgba(0, 0, 0, .26);
}
.scSharedMaterialradionative-control:disabled~.scSharedMaterialradiodot {
background: rgba(0, 0, 0, .26);
}
.scSharedMaterialrichtooltipcontainer {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
}
.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-normal .scSharedMaterialrichtooltipcontainer {
background: #2a2b2f;
}
.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-accented .scSharedMaterialrichtooltipcontainer {
background: var(--TWPT-interop-blue);
color: #1f1f1f;
}
.scSharedMaterialrichtooltipcaret {
box-shadow: 1.5px 1.5px 1px -1px rgba(0, 0, 0, 0.2), .75px .75px 1px 0 rgba(0, 0, 0, 0.141), .75px .75px 3px 0 rgba(0, 0, 0, 0.122);
background: #2a2b2f;
}
.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-normal .scSharedMaterialrichtooltipcaret {
background: #2a2b2f;
}
.scSharedMaterialrichtooltiproot.scSharedMaterialrichtooltipstyle-accented .scSharedMaterialrichtooltipcaret {
background: var(--TWPT-interop-blue);
}
.scSharedMaterialselectlabel {
color: #e3e3e3;
}
.scSharedMaterialselectarrow {
color: var(--TWPT-interop-secondary-text);
}
.scSharedMaterialselectactive .scSharedMaterialselectarrow {
color: var(--TWPT-interop-blue);
}
.scSharedMaterialselectdisabled .scSharedMaterialselectselection,
.scSharedMaterialselectdisabled .scSharedMaterialselectarrow {
color: rgba(255, 255, 255, 0.239);
}
.scSharedMaterialsnackbarsnackbar {
background: var(--TWPT-interop-primary-text)!important;
color: #1f1f1f!important;
}
.scSharedMaterialsnackbaraction button {
color: #0b57d0!important;
}
.scSharedMaterialtabbartab {
color: var(--TWPT-interop-primary-text)!important;
}
.scSharedMaterialtabbartab:hover,
.scSharedMaterialtabbartab:focus {
background-color: #313235!important;
}
.scSharedMaterialtabbarselected {
border-bottom-color: var(--TWPT-interop-blue)!important;
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialtextfieldlabel {
color: var(--TWPT-interop-primary-text)!important;
}
.scSharedMaterialtextfieldnative-control {
caret-color: var(--TWPT-interop-blue)!important;
color: var(--TWPT-interop-primary-text)!important;
}
.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldnative-control {
caret-color: #ec928e!important;
}
.scSharedMaterialtextfieldnative-control:disabled {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialtextfieldfocused .scSharedMaterialtextfieldlabel {
color: var(--TWPT-interop-blue)!important;
}
.scSharedMaterialtextfieldinvalid .scSharedMaterialtextfieldlabel {
color: #ec928e!important;
}
.scSharedMaterialtextfielddisabled .scSharedMaterialtextfieldlabel {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialtextfieldhelper-text {
color: var(--TWPT-interop-secondary-text)!important;
}
.scSharedMaterialtextfieldhelper-text-invalid {
color: #ec928e!important;
}
.scSharedMaterialtextfieldhelper-text-disabled {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindSharedActivitychartroot {
border: 1px solid var(--TWPT-interop-subtle-border)!important;
}
.scTailwindSharedAvatarroot {
background-color: #f1f3f4;
border: .375rem solid #f1f3f4;
}
.scTailwindSharedAvatarroot.scTailwindSharedAvatarmedium.scTailwindSharedAvatarat-least-silver,
.scTailwindSharedAvatarroot.scTailwindSharedAvatarsmall.scTailwindSharedAvatarat-least-silver {
border: .125rem solid #f1f3f4;
}
.scTailwindSharedAvatarsilhouette {
background-color: #fff;
}
.scTailwindSharedAvataravatar-loading {
background: #1f1f1f!important;
}
.scTailwindSharedAvataruploadedit-button {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
}
.scTailwindSharedAvataruploadroot:focus .scTailwindSharedAvataruploadedit-button,
.scTailwindSharedAvataruploadroot:focus-within .scTailwindSharedAvataruploadedit-button,
.scTailwindSharedAvataruploadroot:hover .scTailwindSharedAvataruploadedit-button {
background-color: rgba(0, 0, 0, 0.54);
}
.scTailwindSharedDisplay_name_editorDisplaynameeditorlabel {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedPiidialogfinding {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedReportabusedialogcontent .abuse-link {
color: var(--TWPT-interop-blue)!important;
}
.scTailwindSharedRich_text_editorAttachmentFailedoverlayroot {
background: rgba(0, 0, 0, 0.902);
color: #ec928e;
}
.scTailwindSharedRich_text_editorAttachmentLoadingoverlayroot {
background: rgba(227, 227, 227, 0.369);
}
.scTailwindSharedRich_text_editorAttachmentRemovebuttonremove-button {
background: #1f1f1f;
border: 1px solid #27282b;
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedRich_text_editorAttachmentRemovebuttonremove-button:hover,
.scTailwindSharedRich_text_editorAttachmentRemovebuttonremove-button:focus {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
}
.scTailwindSharedRich_text_editorAttachmentNoninlinedattachmentroot {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 1px 3px 1px rgba(0, 0, 0, 0.149);
background: #36373a;
}
.scTailwindSharedRich_text_editorAttachmentNoninlinedattachmentfilename {
color: #e3e3e3;
}
.scTailwindSharedRich_text_editorAttachmentNoninlinedattachmentextension {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedRich_text_editorLinktooltiproot button {
color: var(--TWPT-interop-blue);
}
.scTailwindSharedRichtexteditoreditor {
background: #1f1f1f;
color: #e3e3e3;
}
.scTailwindSharedRichtexteditorplaceholder {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedRichtexteditorhas-bottom-panel {
border-bottom: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindSharedRichtexteditorhint {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedRich_text_editorToolbarcontrolroot {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedRich_text_editorToolbarcontrolroot:hover {
color: #e3e3e3;
}
.scTailwindSharedRich_text_editorToolbarcontrolroot:focus {
border: .125rem solid var(--TWPT-interop-blue);
}
.scTailwindSharedRich_text_editorToolbarcontrolactive {
background: rgba(227, 227, 227, 0.122);
}
.scTailwindSharedRich_text_editorToolbarMobiletoolbarattachment,
.scTailwindSharedRich_text_editorToolbarMobiletoolbartext-format {
border-right: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindSharedRich_text_editorToolbarMobiletoolbartext-format-button {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindSharedRich_text_editorToolbarMobiletoolbargroup {
border-right: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindSharedRich_text_editorToolbargroup:not(:first-child) {
border-left: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindSharedTitlefieldhelper-text {
color: var(--TWPT-interop-secondary-text);
}
.sc-select {
border: .0625rem solid var(--TWPT-interop-secondary-text);
color: #e3e3e3;
}
.sc-select.keyboard-focus {
border-color: transparent;
box-shadow: 0 0 0 .125rem #a8c7fa;
}
.sc-select svg {
fill: var(--TWPT-interop-secondary-text);
}
.sc-select ol {
background: #272727;
box-shadow: 0 .1875rem .3125rem -.0625rem rgba(0, 0, 0, 0.4), 0 .375rem .625rem 0 rgba(0, 0, 0, 0.28), 0 .0625rem 1.125rem 0 rgba(0, 0, 0, 0.24);
}
.sc-select .sc-select-highlight {
background-color: #5ab3f0;
color: #1f1f1f;
}
/* Unified profile view (see the "IMPORTANT NOTICE" comment above) */
.scTailwindUser_profileAchievementsempty a,
.scTailwindUser_profileAchievementsempty a:visited,
sc-tailwind-user_profile-user-profile .link-icon {
color: var(--TWPT-interop-blue)!important;
}
.scTailwindUser_profileBiosectionsection-heading {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileBiosectionbio {
color: var(--TWPT-interop-primary-text)!important;
}
.scTailwindUser_profileBiosectionlinks,
.scTailwindUser_profileBiosectionlink {
color: var(--TWPT-interop-blue)!important;
}
.scTailwindUser_profileBiosectioninput-label {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileEmaildisplayemail-display {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileEmaildisplayshow-email {
color: var(--TWPT-interop-blue)!important;
}
.scTailwindUser_profileMessagecardthread-link {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileMessagecardlabel {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileMessagecardcontent {
border-left: 2px solid var(--TWPT-interop-subtle-border)!important;
color: var(--TWPT-interop-primary-text)!important;
}
.scTailwindUser_profileMessagecardcount {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileMessagecardrecommended-answer {
color: #6dd58c!important;
}
.scTailwindUser_profileMessagecardrecommended-answer .icon {
background-color: #6dd58c!important;
color: #1f1f1f!important;
}
sc-tailwind-user_profile-user-profile .notificationIcon {
color: var(--TWPT-interop-secondary-text)!important;
}
sc-tailwind-user_profile-user-profile .deleteIcon,
sc-tailwind-user_profile-user-profile .reportAbuseIcon,
sc-tailwind-user_profile-user-profile .reactivateIcon {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profilePosthistorysection+.scTailwindUser_profilePosthistorysection {
border-top-color: var(--TWPT-interop-subtle-border)!important;
}
.scTailwindUser_profilePosthistorycontent,
.scTailwindUser_profilePosthistoryheader,
.scTailwindUser_profilePosthistoryerror {
border-color: var(--TWPT-interop-subtle-border)!important;
}
.scTailwindUser_profileThreadcardtitle {
color: var(--TWPT-interop-primary-text)!important;
}
.scTailwindUser_profileThreadcardlabel {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileThreadcardcontent {
color: var(--TWPT-interop-primary-text)!important;
}
.scTailwindUser_profileThreadcardcount {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileThreadcardreply .icon {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileThreadcardrecommended-answer {
color: #6dd58c!important;
}
.scTailwindUser_profileThreadcardrecommended-answer .icon {
background-color: #6dd58c!important;
color: #1f1f1f!important;
}
.scTailwindUser_profileUsercardroot {
border: 1px solid var(--TWPT-interop-subtle-border)!important;
}
.scTailwindUser_profileUsercardinput-label {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileUsercardheadline {
color: var(--TWPT-interop-primary-text)!important;
}
.scTailwindUser_profileUsercarddetails {
color: var(--TWPT-interop-secondary-text)!important;
}
.scTailwindUser_profileUsercardlinks,
.scTailwindUser_profileUsercardlink {
color: var(--TWPT-interop-blue)!important;
}
.scTailwindUser_profileUsercardhorizontal-separator {
background-color: var(--TWPT-interop-subtle-border)!important;
color: var(--TWPT-interop-subtle-border)!important;
}
.scTailwindUser_profileUsercardsection-heading {
color: var(--TWPT-interop-secondary-text)!important;
}
/* Interop thread view (see the "IMPORTANT NOTICE" comment above) */
.scTailwindThreadEditquestiondialogroot.scTailwindThreadEditquestiondialogscrollable {
-webkit-box-shadow: inset 0 -11px 5px -11px #000;
box-shadow: inset 0 -11px 5px -11px #000;
}
.scTailwindThreadEditquestiondialogerror {
color: #ec928e;
}
.scTailwindThreadGetlinkdialoglink-container {
border-bottom: 2px solid #a8c7fa;
}
h4.scTailwindThreadMessageHelpfulnessbuttonslabel {
color: #e3e3e3;
}
.scTailwindThreadMessageMessagecardsub-content {
background: #3c4043;
border-top: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindThreadMessageMessagecardnested-reply:not(:first-child) {
border-top: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindThreadMessageMessagecardtargeted {
border-left: .125rem solid var(--TWPT-interop-blue);
}
.scTailwindThreadMessageMessagecardcalloutroot.scTailwindThreadMessageMessagecardcalloutrecommended {
background: #0f5223;
border-color: #6dd58c;
}
.scTailwindThreadMessageMessagecardcalloutroot.scTailwindThreadMessageMessagecardcalloutrelevant {
background: #394457;
border-color: var(--TWPT-interop-blue);
}
.scTailwindThreadMessageMessagetagrecommended.scTailwindThreadMessageMessagetagnormal {
color: #6dd58c;
}
.scTailwindThreadMessageMessagetagrecommended.scTailwindThreadMessageMessagetagstrong {
color: #6dd58c;
}
.scTailwindThreadMessageMessagetagrelevant.scTailwindThreadMessageMessagetagnormal {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadMessageMessagetagrelevant.scTailwindThreadMessageMessagetagstrong {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadMessageMessageinteractionsinteraction {
color: var(--TWPT-interop-secondary-text);
}
p.scTailwindThreadMessageMessagetombstoneroot {
color: var(--TWPT-interop-secondary-text);
}
p.scTailwindThreadMessageMessagetombstoneroot .scTailwindThreadMessageMessagetombstoneclickable {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadPostcontentroot {
color: #e3e3e3;
}
.scTailwindThreadPostcontentroot a {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadPost_headerOverflowmenuicon {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadPost_headerPostdateroot {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadPost_headerUserinfoname a {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadPost_headerUserinfotag {
color: var(--color, #e3e3e3);
}
.scTailwindThreadPost_headerUserinfoheadline {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadReplyeditorroot {
background: #2a2b2f;
border-color: var(--TWPT-interop-subtle-border);
}
.scTailwindThreadReplyeditortop-row {
border-bottom-color: 1px solid rgba(255, 255, 255, 0.239);
}
.scTailwindThreadReplyeditorfooter {
background: #36373a;
border-top-color: rgba(255, 255, 255, 0.239);
}
.scTailwindThreadReplyeditorfooter a {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadReplyeditorroot .scTailwindThreadReplyeditorerror {
color: #ec928e;
}
.scTailwindThreadReplydialogroot {
background: #2a2b2f;
}
.scTailwindThreadReplydialogheader {
background: var(--TWPT-interop-blue);
}
.scTailwindThreadReplydialogheader h1.scTailwindThreadReplydialogheading {
color: #1f1f1f;
}
.scTailwindThreadReplydialogheading-button {
color: #1f1f1f;
}
.scTailwindThreadReplydialogtop-row {
border-bottom: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindThreadReplydialogfooter {
background: #36373a;
}
.scTailwindThreadReplydialogfooter a {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadReplydialogminimized .scTailwindThreadReplydialogheader {
background: #e3e3e3;
color: #1f1f1f;
}
.scTailwindThreadReplydialogroot .scTailwindThreadReplydialogerror {
color: #ec928e;
}
@media (min-width:48.125rem) {
.scTailwindThreadReplydialogroot {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149);
}
}
.scTailwindThreadMessageMessagelisthelp-icon {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadMessageMessagelistrecommended-icon {
color: #c4eed0;
}
.scTailwindThreadMessageMessagelistrelevant-icon {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadMorebuttondivider {
background: var(--TWPT-interop-subtle-border);
}
.scTailwindThreadMorebuttonbutton {
background: #1f1f1f;
border: 1px solid var(--TWPT-interop-subtle-border);
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadMessagegapdivider {
background: var(--TWPT-interop-subtle-border);
}
.scTailwindThreadMessagegapbutton {
background: #1f1f1f;
border: 1px solid var(--TWPT-interop-subtle-border);
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadPesignupdialogclose-button-row button {
color: #fff;
}
.scTailwindThreadPesignupdialogdialog-body p {
color: #e3e3e3;
}
.scTailwindThreadPesignupdialogpe-dialog-container {
background-color: #1f1f1f;
-webkit-box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
}
.scTailwindThreadPostconfirmationdialogclose-button-row button {
color: #e3e3e3;
}
.scTailwindThreadPostconfirmationdialogdialog-body p {
color: #e3e3e3;
}
.scTailwindThreadPostconfirmationdialogdialog-container {
background-color: #1f1f1f;
-webkit-box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
box-shadow: 0 .063rem .188rem rgba(60, 64, 67, 0.3), 0 .25rem .5rem rgba(60, 64, 67, 0.15);
}
.scTailwindThreadQuestionQuestioncardsub-content {
background: #3c4043;
border-top: 1px solid var(--TWPT-interop-subtle-border);
}
.scTailwindThreadQuestionQuestioncardtitle {
color: #e3e3e3;
}
.scTailwindThreadQuestionQuestioncardbody {
color: #e3e3e3;
}
.scTailwindThreadQuestionQuestioncardbody a {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadQuestionQuestioncarddisclaimer,
.scTailwindThreadQuestionQuestioncardedited {
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadQuestionQuestioncarddisclaimer a,
.scTailwindThreadQuestionQuestioncardedited a {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadQuestionQuestiondetailsdetail-link {
color: var(--TWPT-interop-blue);
}
.scTailwindThreadQuestionQuestionpurposetag {
background: #394457;
color: var(--TWPT-interop-blue);
}
.scTailwindThreadQuestionStatechipschip {
border: 1px solid var(--TWPT-interop-subtle-border);
color: var(--TWPT-interop-secondary-text);
}
.scTailwindThreadThreaddeleted-icon {
color: var(--TWPT-interop-secondary-text);
}
/* Some fixes for the interop components in the Community Console */
/* Alumnus */
.scTailwindThreadPost_headerUserinfotag[style*="--color:#0F9D58"],
.scTailwindThreadMessageMessageinteractionsuser-label[style*="--userLabelColor:#0F9D58"] {
--color: #C4EED0!important;
--userLabelColor: #C4EED0!important;
}
/* Bronze */
.scTailwindThreadPost_headerUserinfotag[style*="--color:#896E63"],
.scTailwindThreadMessageMessageinteractionsuser-label[style*="--userLabelColor:#896E63"] {
--color: #B9ABA3!important;
--userLabelColor: #B9ABA3!important;
}
/* Silver */
.scTailwindThreadPost_headerUserinfotag[style*="--color:#5F6368"],
.scTailwindThreadMessageMessageinteractionsuser-label[style*="--userLabelColor:#5F6368"] {
--color: #C4C7C5!important;
--userLabelColor: #C4C7C5!important;
}
/* Gold */
.scTailwindThreadPost_headerUserinfotag[style*="--color:#E37400"],
.scTailwindThreadMessageMessageinteractionsuser-label[style*="--userLabelColor:#E37400"] {
--color: #F09D00!important;
--userLabelColor: #F09D00!important;
}
/* Platinum */
.scTailwindThreadPost_headerUserinfotag[style*="--color:#455A64"],
.scTailwindThreadMessageMessageinteractionsuser-label[style*="--userLabelColor:#455A64"] {
--color: #E3E3E3!important;
--userLabelColor: #E3E3E3!important;
}
/* Diamond, Community Specialist, Community Manager and Google Employee */
.scTailwindThreadPost_headerUserinfotag[style*="--color:#1A73E8"],
.scTailwindThreadMessageMessageinteractionsuser-label[style*="--userLabelColor:#1A73E8"] {
--color: #A8C7FA!important;
--userLabelColor: #A8C7FA!important;
}
/* Duplicate thread feature */
.search-results ec-thread-option material-expansionpanel .panel {
background-color: var(--TWPT-primary-background)!important;
}
.search-results ec-thread-option material-expansionpanel.selected .panel,
.search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:hover,
.search-results ec-thread-option material-expansionpanel .panel > .main-header > .header.closed:focus {
background-color: #17191c!important;
}
.search-results .results-title {
color: var(--TWPT-primary-text-alt)!important;
}
.search-results ec-thread-option material-expansionpanel .panel > .main > .main-content .snippet {
color: var(--TWPT-secondary-text)!important;
}
/* Disabled buttons */
material-button[disabled] {
color: rgba(255, 255, 255, .26)!important;
}
.mdc-button {
--gm-colortextbutton-disabled-ink-color: rgba(255, 255, 255, .26);
}
/* Material icons */
ec-filter-drawer-item material-icon,
ec-filter-drawer-item ec-icon,
material-drawer .drawer-section material-icon,
material-drawer .drawer-section ec-icon,
material-list material-icon,
ec-query-builder material-icon,
ec-thread-summary material-expansionpanel .title material-icon,
.search-results ec-thread-option material-icon,
.search-results ec-thread-option ec-icon,
ec-rich-text-editor material-icon,
ec-editor-command material-icon,
ec-canned-responses ec-canned-response-row material-icon,
ec-ask-flow > .header material-button {
color: rgba(255, 255, 255, .87)!important;
}
material-drawer ec-icon,
.search-results ec-thread-option ec-icon,
ec-thread-summary material-expansionpanel .title ec-icon,
ec-announcements-menu-item ec-icon {
fill: rgba(255, 255, 255, .87)!important;
}
/* Dialogs */
material-dialog, material-dialog .dialog-header {
background-color: var(--TWPT-primary-background)!important;
}
ec-movable-dialog[showminimize] material-dialog .dialog-header {
background-color: #d2e3fc!important;
}
material-dialog .title {
color: var(--TWPT-primary-text-alt)!important;
}
ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
color: var(--TWPT-primary-background)!important;
}
ec-movable-dialog[showminimize] material-dialog .header-notice, material-dialog .legal-prompt {
background-color: #170f01!important;
}
ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
color: var(--TWPT-blue-A100)!important;
}
material-dialog .section-title,
material-dialog .select-label,
material-dialog .input-label,
material-dialog .btn-no,
ec-display-name-editor,
.forum-selection-label {
color: var(--TWPT-secondary-text)!important;
}
material-dialog main > .user {
border-bottom-color: var(--TWPT-card-border)!important;
}
ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
color: var(--TWPT-secondary-text)!important;
background-color: var(--TWPT-active-background)!important;
border-top-color: #25231f!important;
}
ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
color: var(--TWPT-link)!important;
}
material-dialog .footer material-button[raised]:not([disabled]),
material-dialog .footer .mdc-button.submit:not(:disabled){
background-color: var(--TWPT-blue-A100)!important;
color: #1f1f1f!important;
}
/* Keyboard shortcuts dialog */
material-dialog .main.with-scroll-strokes table th {
color: var(--TWPT-primary-text)!important;
}
material-dialog .main.with-scroll-strokes table td {
color: var(--TWPT-primary-text-alt)!important;
}
material-dialog .main.with-scroll-strokes table tr,
material-dialog .main.with-scroll-strokes .shortcut {
border-color: var(--TWPT-card-border)!important;
}
material-dialog .main.with-scroll-strokes.bottom-scroll-stroke {
border-bottom-color: var(--TWPT-card-border)!important;
}
material-dialog .main.with-scroll-strokes.top-scroll-stroke {
border-top-color: var(--TWPT-card-border)!important;
}
/* Rich text editor */
ec-editor-command material-button,
ec-formatting-popup material-button {
box-shadow: none!important;
}
ec-editor-command material-button.is-active {
background: var(--TWPT-active-background)!important;
}
ec-rich-text-editor .placeholder {
color: rgba(255, 255, 255, .38)!important;
}
ec-rich-text-editor .input-wrapper,
ec-rich-text-editor .spacer {
border-color: var(--TWPT-card-border)!important;
}
ec-rich-text-editor .input-wrapper.input-wrapper--focused {
border-color: var(--TWPT-blue-A100)!important;
}
ec-rich-text-editor .input {
color: var(--TWPT-primary-text)!important;
}
ec-rich-text-editor .hint {
color: var(--TWPT-subtle-button-background)!important;
}
material-select-searchbox + material-list material-list-item {
color: rgba(255, 255, 255, .87)!important;
}
ec-attachment .filename {
color: var(--TWPT-primary-text)!important;
}
/* Thread insert */
ec-thread-insert .title {
color: var(--TWPT-primary-text)!important;
}
ec-thread-insert ec-thread-counts,
ec-thread-insert .details,
ec-thread-insert ec-relative-time {
color: var(--TWPT-subtle-button-background)!important;
}
/* Text input */
material-input input {
color: var(--TWPT-primary-text)!important;
}
material-input .label-text,
material-input .hint-text,
material-input .counter,
material-input .leading-text,
material-input .leading-text material-icon {
color: var(--TWPT-subtle-button-background)!important;
}
material-input .underline .unfocused-underline {
background-color: var(--TWPT-input-underline)!important;
}
material-input .underline .focused-underline {
background-color: var(--TWPT-blue-A100)!important;
}
label .label {
color: var(--TWPT-primary-text)!important;
}
/* Input underline */
material-input .underline .unfocused-underline,
material-dropdown-select dropdown-button [buttondecorator] {
border-color: var(--TWPT-input-underline)!important;
}
/* Material yes/no buttons */
material-yes-no-buttons material-button:not([disabled]).highlighted:not([raised]) {
color: var(--TWPT-blue-A100)!important;
}
/* Checkbox input (except for forum checkboxes in the drawer) */
material-checkbox material-icon:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
color: var(--TWPT-secondary-text)!important;
}
material-checkbox .content:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
color: var(--TWPT-primary-text);
}
/* .gm-icons is added by the SMEI_GOOGLE_MATERIAL_ICONS experiment. */
material-checkbox material-icon.filled:not(ec-forum-drawer-item material-icon, ec-thread-list material-icon) {
color: var(--TWPT-blue-A100)!important;
}
material-checkbox:focus:not(.disabled).gm-icons .icon,
.gm-icons material-checkbox:focus:not(.disabled) .icon,
material-checkbox:hover:not(.disabled).gm-icons .icon,
.gm-icons material-checkbox:hover:not(.disabled) .icon {
color: #cfd2d8!important; /* custom value */
}
material-checkbox:focus:not(.disabled).gm-icons .icon.filled,
.gm-icons material-checkbox:focus:not(.disabled) .icon.filled,
material-checkbox:hover:not(.disabled).gm-icons .icon.filled,
.gm-icons material-checkbox:hover:not(.disabled) .icon.filled {
color: var(--TWPT-blue-100)!important;
}
.gm-icons material-checkbox .icon-container::before{
background-color: #dfdedb!important; /* custom value */
}
/* Radio input */
material-radio .icon-container:not(.checked) material-icon {
color: var(--TWPT-secondary-text)!important;
}
material-radio .icon-container.checked material-icon {
color: var(--TWPT-blue-A100)!important;
}
material-radio {
--gm-radio-stroke-color--checked: var(--TWPT-blue-A100);
--gm-radio-ink-color: var(--TWPT-blue-A100);
}
/* Material switch */
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
background-color: #7d7d7d!important; /* custom value */
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
border-color: #fff!important; /* custom value */
}
.mdc-switch.mdc-switch--checked .mdc-switch__track {
background-color: var(--TWPT-blue-A100)!important;
}
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
border-color: var(--TWPT-blue-A100)!important;
}
/* Material menu button and dropdown select */
material-menu material-button, material-dropdown-select dropdown-button {
color: var(--TWPT-primary-text)!important;
}
material-dropdown-select dropdown-button .button.is-disabled .button-text,
material-dropdown-select dropdown-button .button.is-disabled material-icon {
color: rgba(255, 255, 255, .32)!important;
}
/* Announcements content */
ec-announcements-content .header,
ec-announcements-content .no-announcements,
ec-announcements-content .announcement {
border-bottom-color: var(--TWPT-card-border)!important;
}
ec-announcements-content .header .title, ec-announcements-content .announcement-title {
color: var(--TWPT-primary-text-alt)!important;
}
ec-announcements-content .announcement-date {
color: var(--TWPT-secondary-text)!important;
}
ec-announcements-content .no-announcements-message {
color: #c3bfbc!important;
}
ec-announcements-content .view-all-link,
ec-announcements-content .read-more-button {
color: var(--TWPT-link)!important;
}
ec-announcements-content ::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .26)!important;
}
ec-announcements-content ::-webkit-scrollbar-thumb:hover {
background-color: #4285f4!important;
}
/* Generic popup (for notification bell, account selector, etc.) */
.popup-wrapper .header-text {
color: var(--TWPT-primary-text)!important;
}
/* Notifications bell popup/panel */
.notification-panel .header {
border-bottom-color: var(--TWPT-card-border)!important;
}
.notification-panel .header material-button {
color: var(--TWPT-secondary-text)!important;
}
.notification-panel .cards-container .promo-message {
color: var(--TWPT-secondary-text)!important;
}
.notification-panel .cards-container .promo-message .header-text {
color: var(--TWPT-primary-text)!important;
}
.notification-panel .cards-container ec-notification-card-content {
border-bottom-color: var(--TWPT-card-border)!important;
}
.notification-panel .cards-container ec-notification-card-content .text {
color: var(--TWPT-primary-text)!important;
}
.notification-panel .cards-container ec-notification-card-content .time,
.notification-panel .cards-container ec-notification-card-content .close material-button {
color: var(--TWPT-secondary-text)!important;
}
/* Account selector */
.popup-wrapper .profile .email {
color: var(--TWPT-subtle-button-background)!important;
}
material-gaia-picker-footer {
color: var(--TWPT-subtle-button-background)!important;
background-color: var(--TWPT-active-background)!important;
}
material-gaia-picker-footer material-button {
color: var(--TWPT-secondary-text)!important;
}
/* Canned responses */
ec-canned-responses .filter-label,
ec-canned-responses ec-canned-response-row .name {
color: var(--TWPT-primary-text)!important;
}
ec-canned-responses .label-row,
ec-canned-responses ec-canned-response-row .snippet,
ec-canned-responses ec-canned-response-row .tag .content,
ec-canned-responses ec-canned-response-row .TWPT-tag .TWPT-content {
color: var(--TWPT-secondary-text)!important;
}
ec-canned-responses ec-canned-response-row .header.closed:hover,
ec-canned-responses ec-canned-response-row .header.closed:focus,
ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar,
ec-canned-responses ec-canned-response-row material-expansionpanel:not(.expanded) .main-header:focus-within,
ec-canned-responses ec-canned-response-row material-expansionpanel:not(.expanded) .main-header:hover {
background-color: var(--TWPT-active-background)!important;
}
ec-canned-responses .filter-row,
ec-canned-responses .label-row,
ec-canned-responses ec-canned-response-row material-expansionpanel {
border-bottom-color: var(--TWPT-subtle-border)!important;
}
/* Bug/case links dialog */
.bug-case-links-dialog material-button.add-button {
color: var(--TWPT-blue-A100)!important;
}
ec-bug-case-link material-button {
color: var(--TWPT-secondary-text)!important;
}
/* Reply button */
material-fab.reply-button,
material-fab.reply-fab {
background-color: var(--TWPT-link)!important;
color: var(--TWPT-primary-background)!important;
}
/* Settings view */
ec-settings .forum-language-container {
border-bottom-color: var(--TWPT-subtle-border)!important;
}
ec-settings .forum-language-container :is(material-button, button) {
color: var(--TWPT-secondary-text)!important;
}
/* Loading spinner */
material-spinner {
border-color: var(--TWPT-blue-A100)!important;
}
/* Custom injected components */
.TWPT-log {
background-color: #424242!important;
}
.TWPT-log-entry.TWPT-log-entry--error {
color: #ff8A80!important;
}
.TWPT-warning {
background-color: #670505!important;
}