refactor(project): add dark theme to replay page (#1388)

netless-io · Feb 28, 2022 · 0f7a6de · 0f7a6de
1 parent 9455f53
commit 0f7a6de
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/desktop/renderer-app/src/pages/ReplayPage/ReplayPage.less b/desktop/renderer-app/src/pages/ReplayPage/ReplayPage.less
@@ -61,7 +61,7 @@
 .replay-whiteboard {
     width: 100%;
     height: 100%;
-    background: #f3f6f9;
+    background: #fff;
 }
 
 .replay-overlay {
@@ -113,3 +113,32 @@
         margin: 0;
     }
 }
+
+.player-mid-box-time {
+    color: var(--text);
+    font-size: 12px;
+    font-family: var(--font-family);
+    font-variant-numeric: tabular-nums;
+}
+
+.flat-color-scheme-dark {
+    .replay-whiteboard {
+        background-color: var(--grey-10);
+    }
+    .replay-play-icon {
+        background-color: var(--grey-12);
+        border: 1px solid var(--grey-8);
+    }
+    .player-schedule {
+        background-color: var(--grey-12);
+        border: 1px solid var(--grey-8);
+        box-shadow: none;
+    }
+    .ui-video-seek-slider .track .main {
+        background-color: var(--grey-10);
+    }
+    .ui-video-seek-slider .track .main .connect,
+    .ui-video-seek-slider .thumb .handler {
+        background-color: var(--primary);
+    }
+}
diff --git a/web/flat-web/src/pages/ReplayPage/ReplayPage.less b/web/flat-web/src/pages/ReplayPage/ReplayPage.less
@@ -61,7 +61,7 @@
 .replay-whiteboard {
     width: 100%;
     height: 100%;
-    background: #f3f6f9;
+    background: #fff;
 }
 
 .replay-overlay {
@@ -113,3 +113,32 @@
         margin: 0;
     }
 }
+
+.player-mid-box-time {
+    color: var(--text);
+    font-size: 12px;
+    font-family: var(--font-family);
+    font-variant-numeric: tabular-nums;
+}
+
+.flat-color-scheme-dark {
+    .replay-whiteboard {
+        background-color: var(--grey-10);
+    }
+    .replay-play-icon {
+        background-color: var(--grey-12);
+        border: 1px solid var(--grey-8);
+    }
+    .player-schedule {
+        background-color: var(--grey-12);
+        border: 1px solid var(--grey-8);
+        box-shadow: none;
+    }
+    .ui-video-seek-slider .track .main {
+        background-color: var(--grey-10);
+    }
+    .ui-video-seek-slider .track .main .connect,
+    .ui-video-seek-slider .thumb .handler {
+        background-color: var(--primary);
+    }
+}