feat(cc-dark-theme): improve dark theme
Fixed: twpowertools:171
Change-Id: I332511c06ed5d64d2e0a25c94830c05e3f773a0c
diff --git a/src/ccDarkTheme/components/_thread-list.scss b/src/ccDarkTheme/components/_thread-list.scss
index f5a5890..c3024d1 100644
--- a/src/ccDarkTheme/components/_thread-list.scss
+++ b/src/ccDarkTheme/components/_thread-list.scss
@@ -31,6 +31,16 @@
color: var(--TWPT-primary-text)!important;
}
+ec-thread-summary material-expansionpanel .title .purpose-tag {
+ background-color: rgba(255, 255, 255, .06)!important;
+ color: #a8c7fa!important;
+}
+
+ec-thread-summary material-expansionpanel .title .draft-tag {
+ background-color: #0f5223!important;
+ color: #6dd58c!important;
+}
+
ec-thread-summary material-expansionpanel ec-second-summary-line,
material-expansionpanel .header-content,
material-expansionpanel ec-thread-counts > span:not(.recommended-answers),
diff --git a/src/ccDarkTheme/vendors/google/_common-interop-components.scss b/src/ccDarkTheme/vendors/google/_common-interop-components.scss
index 49b11d2..6a9f28a 100644
--- a/src/ccDarkTheme/vendors/google/_common-interop-components.scss
+++ b/src/ccDarkTheme/vendors/google/_common-interop-components.scss
@@ -461,6 +461,10 @@
border-color: rgba(0, 0, 0, .26);
}
+.scSharedMaterialradiodot {
+ border-color: var(--TWPT-interop-blue);
+}
+
.scSharedMaterialradionative-control:disabled~.scSharedMaterialradiodot {
background: rgba(0, 0, 0, .26);
}
@@ -731,3 +735,36 @@
background-color: #5ab3f0;
color: #1f1f1f;
}
+
+.scRecommended_resourcesVideo_carouselVideocardroot {
+ background: #1f1f1f!important;
+ border: 1px solid var(--TWPT-interop-subtle-border)!important;
+}
+
+// The Community Console doesn't support the dark theme, so we need to style the
+// light components as if they were dark.
+.scRecommended_resourcesVideo_carouselVideocardlight:hover,.scRecommended_resourcesVideo_carouselVideocardlight:focus, .scRecommended_resourcesVideo_carouselVideocarddark:hover,.scRecommended_resourcesVideo_carouselVideocarddark:focus {
+ background: linear-gradient(0deg,rgba(168,199,250,.05),rgba(168,199,250,.05)),linear-gradient(0deg,rgba(199,199,199,.02),rgba(199,199,199,.02)),linear-gradient(0deg,#1f1f1f,#1f1f1f)!important;
+ border-color: transparent!important;
+}
+
+.scRecommended_resourcesVideo_carouselVideocardlight:focus, .scRecommended_resourcesVideo_carouselVideocarddark:focus {
+ outline: .125rem #fff solid!important;
+}
+
+.scRecommended_resourcesVideo_carouselVideocardtitle {
+ color: #e3e3e3!important;
+}
+
+.scRecommended_resourcesVideo_carouselVideocardicon {
+ filter: drop-shadow(0 0 24px rgba(0,0,0,.35))!important;
+}
+
+.scRecommended_resourcesVideo_carouselVideocardicon svg {
+ fill: #fff!important;
+}
+
+.scRecommended_resourcesVideo_carouselVideocardduration {
+ background-color: var(--TWPT-interop-secondary-text)!important;
+ color: #1f1f1f!important;
+}
diff --git a/src/ccDarkTheme/vendors/google/_profile.scss b/src/ccDarkTheme/vendors/google/_profile.scss
index dfdeced..4b7ca00 100644
--- a/src/ccDarkTheme/vendors/google/_profile.scss
+++ b/src/ccDarkTheme/vendors/google/_profile.scss
@@ -110,6 +110,27 @@
color: #1f1f1f!important;
}
+.scTailwindUserprofileUgcsectionroot {
+ border: 1px solid var(--TWPT-interop-subtle-border);
+}
+
+.scTailwindUserprofileUgcsectioncard-ugc-guide {
+ background-color: #1e1f20;
+}
+
+.scTailwindUserprofileUgcsectionthread-title {
+ color: #e3e3e3;
+}
+
+.scTailwindUserprofileUgcsectiondraft-tag {
+ background-color: #0f5223;
+ color: #6dd58c;
+}
+
+.scTailwindUserprofileUgcsectionthread-body {
+ color: #e3e3e3;
+}
+
.scTailwindUser_profileUsercardroot {
border: 1px solid var(--TWPT-interop-subtle-border)!important;
}
diff --git a/src/ccDarkTheme/vendors/google/_thread.scss b/src/ccDarkTheme/vendors/google/_thread.scss
index 0a75514..e29c25a 100644
--- a/src/ccDarkTheme/vendors/google/_thread.scss
+++ b/src/ccDarkTheme/vendors/google/_thread.scss
@@ -278,6 +278,18 @@
color: var(--TWPT-interop-secondary-text);
}
+.scTailwindThreadQuestionThreadcountsrecommended-answers {
+ color: #6dd58c!important;
+}
+
+.scTailwindThreadQuestionThreadcountssuggested-answers {
+ color: var(--TWPT-interop-blue)!important;
+}
+
+.scTailwindThreadQuestionThreadcountssuggested-icon {
+ background: #394457!important;
+}
+
.scTailwindThreadQuestionUgcvideodetailsyoutube-label {
color: #c4c7c5!important;
}