Initial commit

Created from https://vercel.com/new

styles/index.css

@@ -0,0 +1,165 @@
+html,
+body {
+  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+    Ubuntu, Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  font-weight: 400;
+  line-height: 1.8;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  font-size: var(--font-size-normal);
+  overflow-y: overlay;
+}
+
+body {
+  color: var(--gray900);
+  background: var(--gray75);
+}
+
+.zh-CN {
+  font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
+    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
+}
+
+.zh-TW {
+  font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
+    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
+}
+
+.ja-JP {
+  font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
+    'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
+}
+
+.ko-KR {
+  font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
+    'Noto Sans CJK KR', sans-serif !important;
+}
+
+.ar-SA {
+  font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
+    'Times New Roman', serif !important;
+}
+
+.he-IL {
+  font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
+    'Noto Sans Hebrew', sans-serif !important;
+}
+
+.he-IL {
+  display: inline-block;
+  direction: rtl;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+  line-height: 30px;
+  padding: 0;
+  margin: 0;
+}
+
+button,
+input,
+select {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+a,
+a:active,
+a:visited {
+  color: var(--primary400);
+}
+
+input[type='text'],
+input[type='password'],
+textarea {
+  color: var(--gray900);
+  background: var(--gray50);
+  padding: 4px 8px;
+  font-size: var(--font-size-normal);
+  line-height: 1.8;
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  outline: none;
+  resize: none;
+  flex: 1;
+}
+
+input[type='checkbox'] + label {
+  margin-left: 10px;
+}
+
+label {
+  flex: 1;
+  margin-right: 20px;
+}
+
+label:empty {
+  flex: 0;
+}
+
+dt {
+  font-weight: 600;
+  margin: 0 0 5px 0;
+}
+
+dd {
+  margin: 0 0 30px 0;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+svg {
+  shape-rendering: geometricPrecision;
+}
+
+#__next {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+}
+
+#__modals {
+  z-index: 10;
+}
+
+.container {
+  padding: 0;
+}
+
+.row {
+  margin-right: 0;
+  margin-left: 0;
+}
+.row > .col,
+.row > [class*='col-'] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.center {
+  text-align: center;
+}

styles/variables.css

@@ -0,0 +1,68 @@
+:root {
+  --gray50: #ffffff;
+  --gray75: #fafafa;
+  --gray100: #f5f5f5;
+  --gray200: #eaeaea;
+  --gray300: #e1e1e1;
+  --gray400: #cacaca;
+  --gray500: #b3b3b3;
+  --gray600: #8e8e8e;
+  --gray700: #6e6e6e;
+  --gray800: #4b4b4b;
+  --gray900: #2c2c2c;
+
+  --primary400: #2680eb;
+  --primary500: #1473e6;
+  --primary600: #0d66d0;
+  --primary700: #095aba;
+
+  --font-size-xlarge: 36px;
+  --font-size-large: 24px;
+  --font-size-normal: 16px;
+  --font-size-small: 14px;
+  --font-size-xsmall: 12px;
+
+  --grid-size-small: 576px;
+  --grid-size-medium: 768px;
+  --grid-size-large: 992px;
+  --grid-size-xlarge: 1140px;
+
+  --red400: #e34850;
+  --red500: #d7373f;
+  --red600: #c9252d;
+  --red700: #bb121a;
+
+  --green400: #2d9d78;
+  --green500: #268e6c;
+  --green600: #12805c;
+  --green700: #107154;
+
+  --msgColor: #ffffff;
+}
+
+[data-theme='dark'] {
+  /*
+  --gray50: #080808;
+  --gray75: #1a1a1a;
+  --gray100: #1e1e1e;
+  --gray200: #2c2c2c;
+  --gray300: #393939;
+  --gray400: #494949;
+  --gray500: #5c5c5c;
+  --gray600: #7c7c7c;
+  --gray700: #6e6e6e;
+  --gray800: #a2a2a2;
+  --gray900: #efefef;
+  */
+  --gray50: #252525;
+  --gray75: #2f2f2f;
+  --gray100: #323232;
+  --gray200: #3e3e3e;
+  --gray300: #4a4a4a;
+  --gray400: #5a5a5a;
+  --gray500: #6e6e6e;
+  --gray600: #909090;
+  --gray700: #b9b9b9;
+  --gray800: #e3e3e3;
+  --gray900: #ffffff;
+}