Merge pull request #6604 from SimonBrandner/task/colors-2

Color de-duplication #2
This commit is contained in:
Travis Ralston 2021-08-24 12:37:18 -06:00 committed by GitHub
commit 49453f2d49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
121 changed files with 343 additions and 359 deletions

View file

@ -33,7 +33,7 @@ limitations under the License.
}
.mx_AudioPlayer_mediaName {
color: $primary-fg-color;
color: $primary-content;
font-size: $font-15px;
line-height: $font-15px;
text-overflow: ellipsis;

View file

@ -27,7 +27,7 @@ limitations under the License.
width: 100%;
height: 1px;
background: $quaternary-fg-color;
background: $quaternary-content;
outline: none; // remove blue selection border
position: relative; // for before+after pseudo elements later on
@ -42,7 +42,7 @@ limitations under the License.
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
cursor: pointer;
}
@ -50,7 +50,7 @@ limitations under the License.
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
cursor: pointer;
// Firefox adds a border on the thumb
@ -63,7 +63,7 @@ limitations under the License.
// in firefox, so it's just wasted CPU/GPU time.
&::before { // ::before to ensure it ends up under the thumb
content: '';
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
// Absolute positioning to ensure it overlaps with the existing bar
position: absolute;
@ -81,7 +81,7 @@ limitations under the License.
// This is firefox's built-in support for the above, with 100% less hacks.
&::-moz-range-progress {
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
height: 1px;
}

View file

@ -39,7 +39,7 @@ limitations under the License.
min-width: 80px;
background-color: $accent-color;
color: $primary-bg-color;
color: $background;
cursor: pointer;

View file

@ -47,7 +47,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-fg-color;
background: $secondary-content;
mask-image: url('$(res)/img/globe.svg');
}

View file

@ -29,7 +29,7 @@ limitations under the License.
font-weight: $font-semi-bold;
font-size: $font-18px;
line-height: $font-22px;
color: $primary-fg-color;
color: $primary-content;
margin: 4px 0 14px;
.mx_BetaCard_betaPill {
@ -40,7 +40,7 @@ limitations under the License.
.mx_BetaCard_caption {
font-size: $font-15px;
line-height: $font-20px;
color: $secondary-fg-color;
color: $secondary-content;
margin-bottom: 20px;
}
@ -54,7 +54,7 @@ limitations under the License.
.mx_BetaCard_disclaimer {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
margin-top: 20px;
}
}
@ -72,13 +72,13 @@ limitations under the License.
margin: 16px 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
.mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
}
}
}

View file

@ -36,7 +36,7 @@ limitations under the License.
//
// Therefore, we just hack in a line and border the thing ourselves
&::before {
border-top: 1px solid $primary-fg-color;
border-top: 1px solid $primary-content;
opacity: 0.1;
content: '';
@ -63,7 +63,7 @@ limitations under the License.
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
color: $primary-fg-color;
color: $primary-content;
font-size: $font-15px;
line-height: $font-24px;
@ -119,7 +119,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
background: $primary-content;
}
}

View file

@ -30,7 +30,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
background: $primary-content;
}
}

View file

@ -27,7 +27,7 @@ input.mx_StatusMessageContextMenu_message {
border-radius: 4px;
border: 1px solid $input-border-color;
padding: 6.5px 11px;
background-color: $primary-bg-color;
background-color: $background;
font-weight: normal;
margin: 0 0 10px;
}

View file

@ -44,7 +44,7 @@ limitations under the License.
> h3 {
margin: 0;
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
@ -66,7 +66,7 @@ limitations under the License.
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
.mx_ProgressBar {
height: 8px;
@ -79,7 +79,7 @@ limitations under the License.
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
}
> * {
@ -105,7 +105,7 @@ limitations under the License.
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-fg-color;
color: $primary-content;
}
}
@ -126,7 +126,7 @@ limitations under the License.
&::before {
content: '';
position: absolute;
background-color: $primary-fg-color;
background-color: $primary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
@ -145,7 +145,7 @@ limitations under the License.
.mx_AddExistingToSpaceDialog {
width: 480px;
color: $primary-fg-color;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@ -188,7 +188,7 @@ limitations under the License.
padding-left: 0;
flex: unset;
height: unset;
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
@ -221,7 +221,7 @@ limitations under the License.
}
.mx_SubspaceSelector_onlySpace {
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
}

View file

@ -65,7 +65,7 @@ limitations under the License.
.mx_CommunityPrototypeInviteDialog_personName {
font-weight: 600;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
margin-left: 7px;
}

View file

@ -35,8 +35,8 @@ limitations under the License.
.mx_ConfirmUserActionDialog_reasonField {
font-size: $font-14px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
border-radius: 3px;
border: solid 1px $input-border-color;

View file

@ -29,8 +29,8 @@ limitations under the License.
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
}
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {

View file

@ -55,8 +55,8 @@ limitations under the License.
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
width: 100%;
}

View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_CreateSpaceFromCommunityDialog {
width: 480px;
color: $primary-fg-color;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@ -73,7 +73,7 @@ limitations under the License.
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
.mx_ProgressBar {
height: 8px;
@ -86,7 +86,7 @@ limitations under the License.
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
}
> * {
@ -112,7 +112,7 @@ limitations under the License.
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-fg-color;
color: $primary-content;
}
}
@ -138,7 +138,7 @@ limitations under the License.
&::before {
content: '';
position: absolute;
background-color: $primary-fg-color;
background-color: $primary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;

View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_CreateSubspaceDialog {
width: 480px;
color: $primary-fg-color;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@ -57,7 +57,7 @@ limitations under the License.
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
> * {
vertical-align: middle;

View file

@ -33,7 +33,7 @@ limitations under the License.
padding-left: 52px;
> p {
color: $tertiary-fg-color;
color: $tertiary-content;
}
.mx_AccessibleButton_kind_link {

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_ForwardDialog {
width: 520px;
color: $primary-fg-color;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@ -25,7 +25,7 @@ limitations under the License.
> h3 {
margin: 0 0 6px;
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_GenericFeatureFeedbackDialog {
.mx_GenericFeatureFeedbackDialog_subheading {
color: $primary-fg-color;
color: $primary-content;
font-size: $font-14px;
line-height: $font-20px;
margin-bottom: 24px;

View file

@ -70,11 +70,11 @@ limitations under the License.
}
.mx_HostSignupDialog_text_dark {
color: $primary-fg-color;
color: $primary-content;
}
.mx_HostSignupDialog_text_light {
color: $secondary-fg-color;
color: $secondary-content;
}
.mx_HostSignup_maximize_button {

View file

@ -56,7 +56,7 @@ limitations under the License.
box-sizing: border-box;
min-width: 40%;
flex: 1 !important;
color: $primary-fg-color !important;
color: $primary-content !important;
}
}
@ -94,7 +94,7 @@ limitations under the License.
}
> span {
color: $primary-fg-color;
color: $primary-content;
}
.mx_InviteDialog_subname {
@ -110,7 +110,7 @@ limitations under the License.
font-size: $font-14px;
> span {
color: $primary-fg-color;
color: $primary-content;
font-weight: 600;
}
@ -220,7 +220,7 @@ limitations under the License.
.mx_InviteDialog_roomTile_name {
font-weight: 600;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
margin-left: 7px;
}
@ -352,7 +352,7 @@ limitations under the License.
border-right: 0;
border-radius: 0;
margin-top: 0;
border-color: $quaternary-fg-color;
border-color: $quaternary-content;
input {
font-size: 18px;
@ -418,7 +418,7 @@ limitations under the License.
> h4 {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
color: $secondary-content;
font-weight: normal;
}
@ -432,14 +432,14 @@ limitations under the License.
font-size: $font-15px;
line-height: $font-24px;
font-weight: $font-semi-bold;
color: $primary-fg-color;
color: $primary-content;
}
.mx_InviteDialog_multiInviterError_entry_userId {
margin-left: 6px;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
color: $tertiary-content;
}
}

View file

@ -19,7 +19,7 @@ limitations under the License.
font-weight: normal;
font-family: $font-family;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
.mx_Dropdown_input {
border: 1px solid $input-border-color;
@ -44,7 +44,7 @@ limitations under the License.
top: 8px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
}
}

View file

@ -63,7 +63,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
&::before {
content: '';
@ -72,7 +72,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
@ -81,7 +81,7 @@ limitations under the License.
}
> p {
color: $primary-fg-color;
color: $primary-content;
}
}

View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_ManageRestrictedJoinRuleDialog {
width: 480px;
color: $primary-fg-color;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
@ -52,7 +52,7 @@ limitations under the License.
> h3 {
margin: 0;
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-12px;
font-weight: $font-semi-bold;
line-height: $font-15px;
@ -85,7 +85,7 @@ limitations under the License.
margin-top: 8px;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
color: $tertiary-content;
}
.mx_Checkbox {
@ -113,7 +113,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
&::before {
content: '';
@ -122,7 +122,7 @@ limitations under the License.
top: calc(50% - 8px); // vertical centering
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');

View file

@ -37,7 +37,7 @@ limitations under the License.
list-style-type: none;
font-size: $font-14px;
padding: 0;
color: $primary-fg-color;
color: $primary-content;
span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
padding: 0px 2px;

View file

@ -19,7 +19,7 @@ limitations under the License.
.mx_Dialog_content {
margin-bottom: 24px;
color: $tertiary-fg-color;
color: $tertiary-content;
}
.mx_Dialog_primary {

View file

@ -72,7 +72,7 @@ limitations under the License.
margin-top: 0px;
margin-bottom: 0px;
font-size: 16pt;
color: $primary-fg-color;
color: $primary-content;
}
> * {
@ -81,7 +81,7 @@ limitations under the License.
}
.workspace-channel-details {
color: $primary-fg-color;
color: $primary-content;
font-weight: 600;
.channel {

View file

@ -17,10 +17,10 @@ limitations under the License.
.mx_ServerOfflineDialog {
.mx_ServerOfflineDialog_content {
padding-right: 85px;
color: $primary-fg-color;
color: $primary-content;
hr {
border-color: $primary-fg-color;
border-color: $primary-content;
opacity: 0.1;
border-bottom: none;
}

View file

@ -22,7 +22,7 @@ limitations under the License.
margin-bottom: 0;
> p {
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-14px;
margin: 16px 0;
@ -38,7 +38,7 @@ limitations under the License.
> h4 {
font-size: $font-15px;
font-weight: $font-semi-bold;
color: $secondary-fg-color;
color: $secondary-content;
margin-left: 8px;
}

View file

@ -19,7 +19,7 @@ limitations under the License.
border: 1px solid $input-border-color;
padding: 9px;
color: $input-fg-color;
background-color: $primary-bg-color;
background-color: $background;
font-size: $font-15px;
width: 100%;
max-width: 280px;

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_SpaceSettingsDialog {
color: $primary-fg-color;
color: $primary-content;
.mx_SpaceSettings_errorText {
font-weight: $font-semi-bold;
@ -50,13 +50,13 @@ limitations under the License.
.mx_RadioButton_content {
font-weight: $font-semi-bold;
line-height: $font-18px;
color: $primary-fg-color;
color: $primary-content;
}
& + span {
font-size: $font-15px;
line-height: $font-18px;
color: $secondary-fg-color;
color: $secondary-content;
margin-left: 26px;
}
}

View file

@ -44,7 +44,7 @@ limitations under the License.
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_AccessSecretStorageDialog_resetBadge::before {

View file

@ -56,7 +56,7 @@ limitations under the License.
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
@ -101,7 +101,7 @@ limitations under the License.
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {

View file

@ -26,7 +26,7 @@ limitations under the License.
&::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat;
background-color: $primary-fg-color;
background-color: $primary-content;
content: "";
position: absolute;
top: -6px;

View file

@ -34,7 +34,7 @@ limitations under the License.
box-sizing: border-box;
border-radius: 4px;
border: 1px solid $dialog-close-fg-color;
background-color: $primary-bg-color;
background-color: $background;
max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
overflow-y: auto;
}
@ -153,7 +153,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_NetworkDropdown_handle_server {

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_AddressSelector {
position: absolute;
background-color: $primary-bg-color;
background-color: $background;
width: 485px;
max-height: 116px;
overflow-y: auto;
@ -31,8 +31,8 @@ limitations under the License.
}
.mx_AddressSelector_addressListElement .mx_AddressTile {
background-color: $primary-bg-color;
border: solid 1px $primary-bg-color;
background-color: $background;
border: solid 1px $background;
}
.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {

View file

@ -20,7 +20,7 @@ limitations under the License.
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color;
line-height: $font-26px;
color: $primary-fg-color;
color: $primary-content;
font-size: $font-14px;
font-weight: normal;
margin-right: 4px;

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_Dropdown {
position: relative;
color: $primary-fg-color;
color: $primary-content;
}
.mx_Dropdown_disabled {
@ -52,7 +52,7 @@ limitations under the License.
padding-right: 9px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat;
background: $primary-fg-color;
background: $primary-content;
}
.mx_Dropdown_option {
@ -111,7 +111,7 @@ input.mx_Dropdown_option:focus {
padding: 0px;
border-radius: 4px;
border: 1px solid $input-focused-border-color;
background-color: $primary-bg-color;
background-color: $background;
max-height: 200px;
overflow-y: auto;
}

View file

@ -25,7 +25,7 @@ limitations under the License.
}
.mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
border: 1px solid $background;
}
.mx_BaseAvatar_initial {
@ -47,7 +47,7 @@ limitations under the License.
left: 0;
height: inherit;
width: inherit;
background: $tertiary-fg-color;
background: $tertiary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
@ -60,6 +60,6 @@ limitations under the License.
margin-left: 12px;
font-size: $font-14px;
line-height: $font-24px;
color: $tertiary-fg-color;
color: $tertiary-content;
}
}

View file

@ -46,8 +46,8 @@ limitations under the License.
// corners on the field above.
border-radius: 4px;
padding: 8px 9px;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
flex: 1;
min-width: 0;
}
@ -67,7 +67,7 @@ limitations under the License.
height: 6px;
mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
mask-repeat: no-repeat;
background-color: $primary-fg-color;
background-color: $primary-content;
z-index: 1;
pointer-events: none;
}
@ -100,7 +100,7 @@ limitations under the License.
color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
color: $primary-content;
background-color: transparent;
font-size: $font-14px;
position: absolute;

View file

@ -32,12 +32,12 @@ limitations under the License.
justify-content: center;
align-items: center;
cursor: pointer;
color: $secondary-fg-color;
color: $secondary-content;
&::before {
content: "";
margin-right: 8px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-image: url('$(res)/img/feather-customised/eye.svg');
display: inline-block;
width: 18px;

View file

@ -37,7 +37,7 @@ limitations under the License.
right: -6px;
bottom: -6px;
background-color: $primary-bg-color;
background-color: $background;
border-radius: 50%;
z-index: 1;
@ -45,7 +45,7 @@ limitations under the License.
height: 100%;
width: 100%;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url('$(res)/img/element-icons/camera.svg');

View file

@ -43,7 +43,7 @@ a.mx_Pill {
/* More specific to override `.markdown-body a` color */
.mx_EventTile_content .markdown-body a.mx_UserPill,
.mx_UserPill {
color: $primary-fg-color;
color: $primary-content;
background-color: $other-user-pill-bg-color;
}

View file

@ -35,7 +35,7 @@ limitations under the License.
font-size: $font-14px;
font-weight: $font-semi-bold;
border: 1px solid $input-border-color;
color: $primary-fg-color;
color: $primary-content;
> img {
object-fit: contain;

View file

@ -74,7 +74,7 @@ limitations under the License.
.mx_ServerPicker_desc {
margin-top: -12px;
color: $tertiary-fg-color;
color: $tertiary-content;
grid-column: 1 / 2;
grid-row: 3;
margin-bottom: 16px;

View file

@ -37,7 +37,7 @@ limitations under the License.
}
.mx_Spinner_icon {
background-color: $primary-fg-color;
background-color: $primary-content;
mask: url('$(res)/img/spinner.svg');
mask-size: contain;
animation: 1.1s steps(12, end) infinite spin;

View file

@ -50,7 +50,7 @@ limitations under the License.
&::before {
content: '';
border-radius: 20px;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
opacity: 0.15;
position: absolute;
top: 0;

View file

@ -84,7 +84,7 @@ limitations under the License.
// These tooltips use an older style with a chevron
.mx_Field_tooltip {
background-color: $menu-bg-color;
color: $primary-fg-color;
color: $primary-content;
border: 1px solid $menu-border-color;
text-align: unset;

View file

@ -57,7 +57,7 @@ limitations under the License.
}
.mx_EmojiPicker_anchor::before {
background-color: $primary-fg-color;
background-color: $primary-content;
content: '';
display: inline-block;
mask-size: 100%;
@ -89,7 +89,7 @@ limitations under the License.
margin: 8px;
border-radius: 4px;
border: 1px solid $input-border-color;
background-color: $primary-bg-color;
background-color: $background;
display: flex;
input {
@ -126,7 +126,7 @@ limitations under the License.
.mx_EmojiPicker_search_icon::after {
mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
mask-size: 100%;
background-color: $primary-fg-color;
background-color: $primary-content;
content: '';
display: inline-block;
width: 100%;

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_GroupRoomTile {
position: relative;
color: $primary-fg-color;
color: $primary-content;
cursor: pointer;
display: flex;
align-items: center;

View file

@ -41,7 +41,7 @@ limitations under the License.
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
@ -116,7 +116,7 @@ limitations under the License.
.mx_CallEvent_type {
font-weight: 400;
color: $secondary-fg-color;
color: $secondary-content;
font-size: 1.2rem;
line-height: $font-13px;
display: flex;
@ -132,7 +132,7 @@ limitations under the License.
position: absolute;
height: 13px;
width: 13px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
@ -145,7 +145,7 @@ limitations under the License.
display: flex;
flex-direction: row;
align-items: center;
color: $secondary-fg-color;
color: $secondary-content;
margin-right: 16px;
gap: 8px;
min-width: max-content;

View file

@ -38,7 +38,7 @@ $timelineImageBorderRadius: 4px;
}
.mx_no-image-placeholder {
background-color: $primary-bg-color;
background-color: $primary-content;
}
}
@ -100,5 +100,5 @@ $timelineImageBorderRadius: 4px;
}
.mx_EventTile:hover .mx_HiddenImagePlaceholder {
background-color: $primary-bg-color;
background-color: $background;
}

View file

@ -23,7 +23,7 @@ limitations under the License.
height: 32px;
line-height: $font-24px;
border-radius: 8px;
background: $primary-bg-color;
background: $background;
border: 1px solid $input-border-color;
top: -32px;
right: 8px;
@ -77,11 +77,11 @@ limitations under the License.
mask-size: 18px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
.mx_MessageActionBar_maskButton:hover::after {
background-color: $primary-fg-color;
background-color: $primary-content;
}
.mx_MessageActionBar_reactButton::after {

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_ReactionsRow {
margin: 6px 0;
color: $primary-fg-color;
color: $primary-content;
.mx_ReactionsRow_addReactionButton {
position: relative;
@ -36,7 +36,7 @@ limitations under the License.
mask-size: 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
}
@ -46,7 +46,7 @@ limitations under the License.
&:hover, &.mx_ReactionsRow_addReactionButton_active {
&::before {
background-color: $primary-fg-color;
background-color: $primary-content;
}
}
}
@ -64,10 +64,10 @@ limitations under the License.
vertical-align: middle;
&:link, &:visited {
color: $tertiary-fg-color;
color: $tertiary-content;
}
&:hover {
color: $primary-fg-color;
color: $primary-content;
}
}

View file

@ -93,7 +93,7 @@ limitations under the License.
}
> h1 {
color: $tertiary-fg-color;
color: $tertiary-content;
font-size: $font-12px;
font-weight: 500;
}
@ -145,7 +145,7 @@ limitations under the License.
justify-content: space-around;
.mx_AccessibleButton_kind_secondary {
color: $secondary-fg-color;
color: $secondary-content;
background-color: rgba(141, 151, 165, 0.2);
font-weight: $font-semi-bold;
font-size: $font-14px;

View file

@ -48,7 +48,7 @@ limitations under the License.
height: 32px;
line-height: $font-24px;
border-radius: 8px;
background: $primary-bg-color;
background: $background;
border: 1px solid $input-border-color;
padding: 1px;
width: max-content;
@ -66,7 +66,7 @@ limitations under the License.
z-index: 1;
&::after {
background-color: $primary-fg-color;
background-color: $primary-content;
}
}
}
@ -75,7 +75,7 @@ limitations under the License.
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
margin-top: 24px;
margin-bottom: 20px;
}
@ -83,7 +83,7 @@ limitations under the License.
> span {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
}
}
}

View file

@ -27,7 +27,7 @@ limitations under the License.
.mx_RoomSummaryCard_alias {
font-size: $font-13px;
color: $secondary-fg-color;
color: $secondary-content;
}
h2, .mx_RoomSummaryCard_alias {
@ -115,7 +115,7 @@ limitations under the License.
// as we will be applying it in its children
padding: 0;
height: auto;
color: $tertiary-fg-color;
color: $tertiary-content;
.mx_RoomSummaryCard_icon_app {
padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
@ -128,7 +128,7 @@ limitations under the License.
}
span {
color: $primary-fg-color;
color: $primary-content;
}
}

View file

@ -55,7 +55,7 @@ limitations under the License.
}
.mx_UserInfo_separator {
border-bottom: 1px solid rgba($primary-fg-color, .1);
border-bottom: 1px solid rgba($primary-content, .1);
}
.mx_UserInfo_memberDetailsContainer {

View file

@ -51,7 +51,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
background-color: $secondary-fg-color;
background-color: $secondary-content;
}
}
}

View file

@ -64,7 +64,7 @@ $MiniAppTileHeight: 200px;
&:hover {
.mx_AppsContainer_resizerHandle::after {
opacity: 0.8;
background: $primary-fg-color;
background: $primary-content;
}
.mx_ResizeHandle_horizontal::before {
@ -79,7 +79,7 @@ $MiniAppTileHeight: 200px;
content: '';
background-color: $primary-fg-color;
background-color: $primary-content;
opacity: 0.8;
}
}

View file

@ -4,7 +4,7 @@
z-index: 1001;
width: 100%;
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
background: $background;
border-bottom: none;
border-radius: 8px 8px 0 0;
max-height: 35vh;
@ -26,7 +26,7 @@
user-select: none;
cursor: pointer;
align-items: center;
color: $primary-fg-color;
color: $primary-content;
}
.mx_Autocomplete_Completion_block * {
@ -42,7 +42,7 @@
user-select: none;
cursor: pointer;
align-items: center;
color: $primary-fg-color;
color: $primary-content;
}
.mx_Autocomplete_Completion_pill > * {
@ -84,7 +84,7 @@
.mx_Autocomplete_provider_name {
margin: 12px;
color: $primary-fg-color;
color: $primary-content;
font-weight: 400;
opacity: 0.4;
}

View file

@ -31,7 +31,7 @@ limitations under the License.
@keyframes visualbell {
from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
to { background-color: $background; }
}
&.mx_BasicMessageComposer_input_error {

View file

@ -28,7 +28,7 @@ limitations under the License.
.mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
background-color: $background;
max-height: 200px;
padding: 3px 6px;

View file

@ -18,7 +18,7 @@ limitations under the License.
.mx_EntityTile {
display: flex;
align-items: center;
color: $primary-fg-color;
color: $primary-content;
cursor: pointer;
.mx_E2EIcon {
@ -86,12 +86,12 @@ limitations under the License.
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;
color: $primary-content;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
color: $primary-fg-color;
color: $primary-content;
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar,

View file

@ -55,7 +55,7 @@ $hover-select-border: 4px;
}
.mx_SenderProfile {
color: $primary-fg-color;
color: $primary-content;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
@ -161,7 +161,7 @@ $hover-select-border: 4px;
// up with the other read receipts
&::before {
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
@ -618,7 +618,7 @@ $hover-select-border: 4px;
}
.mx_EventTile_keyRequestInfo_text a {
color: $primary-fg-color;
color: $primary-content;
text-decoration: underline;
cursor: pointer;
}

View file

@ -56,7 +56,7 @@ limitations under the License.
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
background: $background;
border: 1.3px solid $muted-fg-color;
cursor: pointer;
}

View file

@ -111,7 +111,7 @@ limitations under the License.
.mx_MemberInfo_field {
cursor: pointer;
font-size: $font-15px;
color: $primary-fg-color;
color: $primary-content;
margin-left: 8px;
line-height: $font-23px;
}

View file

@ -130,7 +130,7 @@ limitations under the License.
@keyframes visualbell {
from { background-color: $visual-bell-bg-color; }
to { background-color: $primary-bg-color; }
to { background-color: $background; }
}
.mx_MessageComposer_input_error {
@ -160,8 +160,8 @@ limitations under the License.
resize: none;
outline: none;
box-shadow: none;
color: $primary-fg-color;
background-color: $primary-bg-color;
color: $primary-content;
background-color: $background;
font-size: $font-14px;
max-height: 120px;
overflow: auto;

View file

@ -67,6 +67,6 @@ limitations under the License.
> p {
margin: 0;
font-size: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
}
}

View file

@ -42,7 +42,7 @@ limitations under the License.
// These are the 3 background types
&.mx_NotificationBadge_dot {
background-color: $primary-fg-color; // increased visibility
background-color: $primary-content; // increased visibility
width: 6px;
height: 6px;

View file

@ -67,7 +67,7 @@ limitations under the License.
//left: 0;
height: inherit;
width: inherit;
background: $secondary-fg-color;
background: $secondary-content;
mask-position: center;
mask-size: 8px;
mask-repeat: no-repeat;
@ -87,7 +87,7 @@ limitations under the License.
.mx_PinnedEventTile_timestamp {
font-size: inherit;
line-height: inherit;
color: $secondary-fg-color;
color: $secondary-content;
}
.mx_AccessibleButton_kind_link {

View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_ReplyPreview {
border: 1px solid $primary-hairline-color;
background: $primary-bg-color;
background: $background;
border-bottom: none;
border-radius: 8px 8px 0 0;
max-height: 50vh;
@ -28,7 +28,7 @@ limitations under the License.
.mx_ReplyPreview_header {
margin: 8px;
color: $primary-fg-color;
color: $primary-content;
font-weight: 400;
opacity: 0.4;
}

View file

@ -42,7 +42,7 @@ limitations under the License.
display: flex;
flex-direction: column;
text-decoration: none;
color: $primary-fg-color;
color: $primary-content;
}
.mx_RedactedBody {

View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_RoomHeader {
flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color;
background-color: $roomheader-bg-color;
background-color: $background;
.mx_RoomHeader_e2eIcon {
height: 12px;
@ -74,7 +74,7 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
background-color: $primary-bg-color;
background-color: $background;
}
.mx_RoomHeader_info {

View file

@ -43,11 +43,11 @@ limitations under the License.
div:first-child {
font-weight: $font-semi-bold;
line-height: $font-18px;
color: $primary-fg-color;
color: $primary-content;
}
.mx_AccessibleButton {
color: $primary-fg-color;
color: $primary-content;
position: relative;
padding: 8px 8px 8px 32px;
font-size: inherit;
@ -64,7 +64,7 @@ limitations under the License.
position: absolute;
top: 8px;
left: 8px;
background: $secondary-fg-color;
background: $secondary-content;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;

View file

@ -233,7 +233,7 @@ limitations under the License.
&:hover, &.mx_RoomSublist_hasMenuOpen {
.mx_RoomSublist_resizerHandle {
opacity: 0.8;
background-color: $primary-fg-color;
background-color: $primary-content;
}
}
}

View file

@ -124,7 +124,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
background: $primary-content;
}
}

View file

@ -47,7 +47,7 @@ limitations under the License.
padding: 5px;
font-size: $font-15px;
cursor: pointer;
color: $primary-fg-color;
color: $primary-content;
border-bottom: 2px solid $accent-color;
font-weight: 600;
}

View file

@ -41,7 +41,7 @@ limitations under the License.
height: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $primary-bg-color;
background: $background;
border: 1.3px solid $muted-fg-color;
cursor: pointer;
}
@ -62,7 +62,7 @@ limitations under the License.
display: block;
width: 18px;
height: 18px;
background: $primary-bg-color;
background: $background;
border: 1.3px solid $muted-fg-color;
border-radius: 10px;
margin: 5px auto;

View file

@ -48,7 +48,7 @@ limitations under the License.
.mx_VoiceRecordComposerTile_uploadingState {
margin-right: 10px;
color: $secondary-fg-color;
color: $secondary-content;
}
.mx_VoiceRecordComposerTile_failedState {

View file

@ -36,7 +36,7 @@ limitations under the License.
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
border: 1px solid $primary-bg-color;
border: 1px solid $background;
border-radius: 40px;
}
@ -45,7 +45,7 @@ limitations under the License.
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid $primary-bg-color;
border: 1px solid $background;
border-radius: 40px;
width: 24px;
height: 24px;

View file

@ -21,7 +21,7 @@ limitations under the License.
flex-direction: row;
gap: 24px;
color: $primary-fg-color;
color: $primary-content;
> .mx_LayoutSwitcher_RadioButton {
flex-grow: 0;

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_UserNotifSettings {
color: $primary-fg-color; // override from default settings page styles
color: $primary-content; // override from default settings page styles
.mx_UserNotifSettings_pushRulesTable {
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
@ -34,7 +34,7 @@ limitations under the License.
}
tr > th:nth-child(n + 2) {
color: $secondary-fg-color;
color: $secondary-content;
font-size: $font-12px;
vertical-align: middle;
width: 66px;

View file

@ -25,7 +25,7 @@ limitations under the License.
.mx_SettingsTab_heading {
font-size: $font-20px;
font-weight: 600;
color: $primary-fg-color;
color: $primary-content;
margin-bottom: 10px;
}
@ -37,7 +37,7 @@ limitations under the License.
font-size: $font-16px;
display: block;
font-weight: 600;
color: $primary-fg-color;
color: $primary-content;
margin-bottom: 10px;
margin-top: 12px;
}
@ -72,7 +72,7 @@ limitations under the License.
vertical-align: middle;
display: inline-block;
font-size: $font-14px;
color: $primary-fg-color;
color: $primary-content;
max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;
padding-right: 10px;
@ -82,7 +82,7 @@ limitations under the License.
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
}
.mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {

View file

@ -22,7 +22,7 @@ limitations under the License.
.mx_SecurityRoomSettingsTab_spacesWithAccess {
> h4 {
color: $secondary-fg-color;
color: $secondary-content;
font-weight: $font-semi-bold;
font-size: $font-12px;
line-height: $font-15px;
@ -33,7 +33,7 @@ limitations under the License.
font-weight: 500;
font-size: $font-14px;
line-height: 32px; // matches height of avatar for v-align
color: $secondary-fg-color;
color: $secondary-content;
display: inline-block;
img.mx_RoomAvatar_isSpaceRoom,
@ -89,7 +89,7 @@ limitations under the License.
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-fg-color;
color: $primary-content;
display: block;
}
}
@ -100,7 +100,7 @@ limitations under the License.
margin-bottom: 16px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-fg-color;
color: $secondary-content;
& + .mx_RadioButton {
border-top: 1px solid $menu-border-color;

View file

@ -24,7 +24,7 @@ limitations under the License.
}
.mx_AppearanceUserSettingsTab_fontScaling {
color: $primary-fg-color;
color: $primary-content;
}
.mx_AppearanceUserSettingsTab_fontSlider {
@ -81,7 +81,7 @@ limitations under the License.
.mx_AppearanceUserSettingsTab_themeSection {
$radio-bg-color: $input-darker-bg-color;
color: $primary-fg-color;
color: $primary-content;
> .mx_ThemeSelectors {
display: flex;
@ -156,7 +156,7 @@ limitations under the License.
}
.mx_AppearanceUserSettingsTab_Advanced {
color: $primary-fg-color;
color: $primary-content;
> * {
margin-bottom: 16px;

View file

@ -30,7 +30,7 @@ limitations under the License.
font-weight: $font-semi-bold;
font-size: $font-15px;
line-height: $font-18px;
color: $primary-fg-color;
color: $primary-content;
margin: 16px 0;
.mx_BaseAvatar {

View file

@ -27,7 +27,7 @@ limitations under the License.
position: relative;
height: 80px;
width: 80px;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
border-radius: 16px;
}

View file

@ -28,7 +28,7 @@ $spacePanelWidth: 71px;
padding: 24px;
width: 480px;
box-sizing: border-box;
background-color: $primary-bg-color;
background-color: $background;
position: relative;
> div {
@ -40,7 +40,7 @@ $spacePanelWidth: 71px;
> p {
font-size: $font-15px;
color: $secondary-fg-color;
color: $secondary-content;
}
.mx_SpaceFeedbackPrompt {
@ -76,7 +76,7 @@ $spacePanelWidth: 71px;
width: 28px;
top: 0;
left: 0;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
transform: rotate(90deg);
mask-repeat: no-repeat;
mask-position: 2px 3px;
@ -108,7 +108,7 @@ $spacePanelWidth: 71px;
line-height: $font-24px;
> span {
color: $secondary-fg-color;
color: $secondary-content;
position: relative;
font-size: inherit;
line-height: inherit;

View file

@ -43,7 +43,7 @@ limitations under the License.
.mx_CallEvent_type {
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-fg-color;
color: $tertiary-content;
margin-top: 4px;
margin-bottom: 6px;
@ -62,7 +62,7 @@ limitations under the License.
position: absolute;
height: inherit;
width: inherit;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
@ -139,7 +139,7 @@ limitations under the License.
height: inherit;
width: inherit;
background-color: $tertiary-fg-color;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;

View file

@ -39,7 +39,7 @@ limitations under the License.
width: 100%;
max-width: 64px;
background-color: $primary-fg-color;
background-color: $primary-content;
}
}
}

View file

@ -53,7 +53,7 @@ limitations under the License.
height: 20px;
width: 20px;
vertical-align: middle;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
@ -90,7 +90,7 @@ limitations under the License.
.mx_CallViewHeader_callTypeSmall {
font-size: 12px;
color: $secondary-fg-color;
color: $secondary-content;
line-height: initial;
height: 15px;
overflow: hidden;
@ -113,7 +113,7 @@ limitations under the License.
height: 16px;
width: 16px;
background-color: $secondary-fg-color;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;

View file

@ -33,7 +33,7 @@ limitations under the License.
width: 40px;
height: 40px;
background-color: $dialpad-button-bg-color;
background-color: $quinary-content;
border-radius: 40px;
font-size: 18px;
font-weight: 600;

View file

@ -30,7 +30,7 @@ limitations under the License.
margin-right: 20px;
/* a separator between the input line and the dial buttons */
border-bottom: 1px solid $quaternary-fg-color;
border-bottom: 1px solid $quaternary-content;
transition: border-bottom 0.25s;
}

View file

@ -30,7 +30,7 @@ limitations under the License.
margin-right: 40px;
/* a separator between the input line and the dial buttons */
border-bottom: 1px solid $quaternary-fg-color;
border-bottom: 1px solid $quaternary-content;
transition: border-bottom 0.25s;
}