refactor(cc-dark-theme): organize styles in several files
Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.
This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.
Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/vendors/google/_common-interop-components.scss b/src/ccDarkTheme/vendors/google/_common-interop-components.scss
new file mode 100644
index 0000000..49b11d2
--- /dev/null
+++ b/src/ccDarkTheme/vendors/google/_common-interop-components.scss
@@ -0,0 +1,733 @@
+/*
+ * IMPORTANT NOTICE:
+ * Note: the following styles have been written by Googlers and thus are not
+ * included as part of the MIT license.
+ **/
+
+.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;
+ outline: 1px solid #474747!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)!important;
+ background: #2a2b2f!important;
+}
+
+.scSharedMaterialcardelevation-2 {
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.302), 0 2px 6px 2px rgba(0, 0, 0, 0.149)!important;
+ background: #303135!important;
+}
+
+.scSharedMaterialcardelevation-3 {
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.302), 0 4px 8px 3px rgba(0, 0, 0, 0.149)!important;
+ background: #36383a!important;
+}
+
+.scSharedMaterialcardelevation-4 {
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.302), 0 6px 10px 4px rgba(0, 0, 0, 0.149)!important;
+ background: #39393c!important;
+}
+
+.scSharedMaterialcardelevation-5 {
+ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.302), 0 8px 12px 6px rgba(0, 0, 0, 0.149)!important;
+ background: #3c3e40!important;
+}
+
+@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: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;
+}