feat: added support for dark theme

justjanne · justjanne · commit 5ddebebc3e8e · 2022-04-22T11:08:58.000+02:00
diff --git a/res/css/views/rooms/_ReadReceiptGroup.scss b/res/css/views/rooms/_ReadReceiptGroup.scss
@@ -33,13 +33,13 @@ limitations under the License.
 
         &.mx_AccessibleButton {
             &:hover {
-                background: #F4F6FA;
+                background: $event-selected-color;
             }
         }
     }
 
     .mx_ReadReceiptGroup_remainder {
-        color: #737D8C;
+        color: $secondary-content;
         font-size: $font-11px;
         line-height: $font-16px;
         margin-right: 8px;
@@ -56,7 +56,7 @@ limitations under the License.
             display: inline-block;
             height: 14px;
             width: 14px;
-            border: 1px solid #fff;
+            border: 1px solid $background;
             border-radius: 100%;
 
             will-change: left, top;
@@ -70,7 +70,7 @@ limitations under the License.
 .mx_ReadReceiptGroup_popup {
     max-height: 300px;
     width: 220px;
-    background: #F4F6FA;
+    background: $panels;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
@@ -106,7 +106,7 @@ limitations under the License.
             border-radius: 8px;
 
             &:hover {
-                background: #E3E8F0;
+                background: $panel-hover;
             }
 
             &:last-child {
@@ -134,7 +134,7 @@ limitations under the License.
                 }
 
                 .mx_ReadReceiptGroup_secondary {
-                    color: #737D8C;
+                    color: $secondary-content;
                 }
             }
         }

Original file line number	Diff line number	Diff line change
`@@ -33,13 +33,13 @@ limitations under the License.`
`33`	`33`
`34`	`34`	`&.mx_AccessibleButton {`
`35`	`35`	`&:hover {`
`36`		`- background: #F4F6FA;`
	`36`	`+ background: $event-selected-color;`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`.mx_ReadReceiptGroup_remainder {`
`42`		`- color: #737D8C;`
	`42`	`+ color: $secondary-content;`
`43`	`43`	`font-size: $font-11px;`
`44`	`44`	`line-height: $font-16px;`
`45`	`45`	`margin-right: 8px;`
`@@ -56,7 +56,7 @@ limitations under the License.`
`56`	`56`	`display: inline-block;`
`57`	`57`	`height: 14px;`
`58`	`58`	`width: 14px;`
`59`		`- border: 1px solid #fff;`
	`59`	`+ border: 1px solid $background;`
`60`	`60`	`border-radius: 100%;`
`61`	`61`
`62`	`62`	`will-change: left, top;`
`@@ -70,7 +70,7 @@ limitations under the License.`
`70`	`70`	`.mx_ReadReceiptGroup_popup {`
`71`	`71`	`max-height: 300px;`
`72`	`72`	`width: 220px;`
`73`		`- background: #F4F6FA;`
	`73`	`+ background: $panels;`
`74`	`74`	`border-radius: 8px;`
`75`	`75`	`display: flex;`
`76`	`76`	`flex-direction: column;`
`@@ -106,7 +106,7 @@ limitations under the License.`
`106`	`106`	`border-radius: 8px;`
`107`	`107`
`108`	`108`	`&:hover {`
`109`		`- background: #E3E8F0;`
	`109`	`+ background: $panel-hover;`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`&:last-child {`
`@@ -134,7 +134,7 @@ limitations under the License.`
`134`	`134`	`}`
`135`	`135`
`136`	`136`	`.mx_ReadReceiptGroup_secondary {`
`137`		`- color: #737D8C;`
	`137`	`+ color: $secondary-content;`
`138`	`138`	`}`
`139`	`139`	`}`
`140`	`140`	`}`