Dark theme: add styles for unified profiles
Those styles match what is shown in the public forum profiles (TW),
where the dark theme already exists.
(e.g. https://support.google.com/s/community/user/19620 should look
identical to https://support.google.com/profile/19620?dark=1.)
Bug: twpowertools:78
Change-Id: Ibebb252a2bb4ebb6ba25e3a37160143b25018d02
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index 0f45b20..d61be88 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -17,6 +17,9 @@
--TWPT-blue-A100: #82B1FF;
--TWPT-bad-text: #f6aea9;
--TWPT-good-text: #34a853;
+ --TWPT-interop-primary-text: var(--TWPT-primary-text);
+ --TWPT-interop-secondary-text: #c4c7c5;
+ --TWPT-interop-subtle-border: #474747;
}
body {
@@ -599,7 +602,8 @@
* footer.
**/
-/* Profile view */
+/* Old profile view */
+/* TODO(b/twpowertools/80): Remove this code. */
ec-user .main-card {
background-color: var(--TWPT-secondary-background)!important;
}
@@ -621,27 +625,37 @@
filter: brightness(1.5);
}
-ec-user bar-chart .axis text {
+/* Chart in both old and new profile view */
+ec-user bar-chart .axis text,
+ ec-unified-user sc-tailwind-shared-activity-chart .axis text {
fill: rgba(255, 255, 255, .54)!important;
}
ec-user bar-chart .axis path,
ec-user bar-chart .axis .gridline,
- ec-user bar-chart .axis line {
+ ec-user bar-chart .axis line,
+ ec-unified-user sc-tailwind-shared-activity-chart .axis path,
+ ec-unified-user sc-tailwind-shared-activity-chart .axis .gridline,
+ ec-unified-user sc-tailwind-shared-activity-chart .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-user bar-chart .axis.x .tick-mark,
+ ec-unified-user sc-tailwind-shared-activity-chart .axis line.axis-zero-tick,
+ ec-unified-user sc-tailwind-shared-activity-chart .axis.x .tick-mark {
stroke: rgba(255, 255, 255, .38)!important;
}
-ec-user bar-chart .aplos-legend-entry {
+ec-user bar-chart .aplos-legend-entry,
+ ec-unified-user sc-tailwind-shared-activity-chart .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 {
@@ -657,6 +671,513 @@
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.
+ **/
+
+/* 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: #7cacf8!important;
+}
+
+.scSharedCalloutsuccess {
+ background-color: #37493f!important;
+ border-color: #c4eed0!important;
+}
+
+.scSharedCalloutsuccess sc-shared-material-icon {
+ color: #c4eed0!important;
+}
+
+.scSharedCalloutsuccess>.scSharedCalloutsecondary-button button {
+ color: #37be5f!important;
+}
+
+.scSharedMaterialbuttonroot:disabled {
+ color: rgba(227, 227, 227, 0.369)!important;
+}
+
+.scSharedMaterialbuttontext {
+ color: #7cacf8!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 {
+ border-color: var(--TWPT-interop-subtle-border)!important;
+ color: #7cacf8!important;
+}
+
+.scSharedMaterialbuttonhairline:disabled {
+ border-color: rgba(227, 227, 227, 0.369)!important;
+}
+
+.scSharedMaterialbuttonhairline:hover,
+ .scSharedMaterialbuttonhairline:focus {
+ border-color: rgba(124, 172, 248, 0.239)!important;
+}
+
+.scSharedMaterialbuttonhairline:active {
+ box-shadow: 0 1px 2px 0 rgba(124, 172, 248, 0.302), 0 1px 3px 1px rgba(124, 172, 248, 0.149)!important;
+}
+
+.scSharedMaterialbuttontonal {
+ color: #7cacf8!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: #7cacf8!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: #7cacf8!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;
+}
+
+.scSharedExpandabletextexpander {
+ color: #7cacf8!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: #7cacf8!important;
+}
+
+.scSharedMaterialborderfilled-label {
+ color: var(--TWPT-interop-secondary-text)!important;
+}
+
+.scSharedMaterialborderfilled-label-focused {
+ color: #7cacf8!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: #7cacf8!important;
+}
+
+.scSharedMaterialborderdisabled {
+ border-color: var(--TWPT-interop-subtle-border)!important;
+}
+
+.scSharedMaterialborderlabel-focused {
+ color: #7cacf8!important;
+}
+
+.scSharedMaterialborderlabel-disabled {
+ color: rgba(255, 255, 255, 0.239)!important;
+}
+
+.scSharedMaterialborderlabel-error {
+ color: #ec928e!important;
+}
+
+.scSharedMaterialcheckboxcheckbox {
+ color: #7cacf8!important;
+}
+
+.scSharedMaterialcheckboxbox {
+ border-color: var(--TWPT-interop-secondary-text)!important;
+}
+
+.scSharedMaterialcheckboxcheckmark-path {
+ stroke: #1f1f1f!important;
+}
+
+.scSharedMaterialcheckboxmixedmark {
+ border-color: #1f1f1f!important;
+}
+
+.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;
+}
+
+.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-separator {
+ border-top-color: var(--TWPT-interop-subtle-border)!important;
+}
+
+.scSharedMaterialmenuhighlight:focus,
+ .scSharedMaterialmenuhighlight:hover {
+ background-color: #394457!important;
+}
+
+.scSharedMaterialmenuhighlight:focus {
+ outline: auto #7cacf8 1px!important;
+}
+
+.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: #7cacf8!important;
+ color: #7cacf8!important;
+}
+
+.scSharedMaterialtextfieldlabel {
+ color: var(--TWPT-interop-primary-text)!important;
+}
+
+.scSharedMaterialtextfieldnative-control {
+ caret-color: #7cacf8!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: #7cacf8!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;
+}
+
+.scTailwindSharedAvataravatar-loading {
+ background: #1f1f1f!important;
+}
+
+.scTailwindSharedReportabusedialogcontent .abuse-link {
+ color: #7cacf8!important;
+}
+
+/* Unified profile view */
+.scTailwindUser_profileAchievementsempty a,
+ .scTailwindUser_profileAchievementsempty a:visited,
+ sc-tailwind-user_profile-user-profile .link-icon {
+ color: #7cacf8!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: #7cacf8!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: #7cacf8!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: #7cacf8!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;
+}
+
/* Duplicate thread feature */
.search-results ec-thread-option material-expansionpanel .panel {
background-color: var(--TWPT-primary-background)!important;