refactor: replace sass with postcss

1 files changed, 101 insertions, 0 deletions

diff --git a/src/components/Root.css b/src/components/Root.css
new file mode 100644
index 0000000..0397507
--- /dev/null
+++ b/src/components/Root.css
@@ -0,0 +1,101 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'), local('RobotoMono-Regular'),
+    url('https://cdn.jsdelivr.net/npm/@hsjs/[email protected]/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2')
+      format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+.border-left,
+.border-top,
+.border-bottom {
+  position: relative;
+}
+
+%border {
+  position: absolute;
+  content: '';
+  height: 1px;
+  width: 100%;
+  transform: scaleY(0.5) translateZ(0);
+  left: 0;
+  right: 0;
+  background: #555;
+}
+
+%border1 {
+  position: absolute;
+  content: '';
+  height: 100%;
+  width: 1px;
+  transform: scaleX(0.5) translateZ(0);
+  top: 0;
+  bottom: 0;
+  background: #555;
+}
+
+.border-top::before {
+  @extend %border;
+  top: 0;
+}
+
+.border-bottom::after {
+  @extend %border;
+  bottom: 0;
+}
+
+.border-left::before {
+  @extend %border1;
+  left: 0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+
+  --color-focus-blue: #1a73e8;
+}
+
+body,
+body.dark {
+  --color-background: #202020;
+  --color-text: #ddd;
+  --color-text-secondary: #ccc;
+  --color-bg-sidebar: #2d2d30;
+  --color-sb-active-row-bg: #494b4e;
+  --color-input-bg: #2d2d30;
+  --color-input-border: #3f3f3f;
+  --color-toggle-bg: #353535;
+  --color-toggle-selected: #181818;
+  --color-icon: #c7c7c7;
+  --color-btn-bg: #232323;
+  --color-btn-fg: #bebebe;
+}
+
+body.light {
+  --color-background: #fbfbfb;
+  --color-text: #222;
+  --color-text-secondary: #646464;
+  --color-bg-sidebar: #e7e7e7;
+  --color-sb-active-row-bg: #d0d0d0;
+  --color-input-bg: #ffffff;
+  --color-input-border: #c0c0c0;
+  --color-toggle-bg: #ffffff;
+  --color-toggle-selected: #d7d7d7;
+  --color-icon: #5b5b5b;
+  --color-btn-bg: #f4f4f4;
+  --color-btn-fg: #101010;
+}