1 files changed, 247 insertions, 0 deletions
diff --git a/packages/sortug/src/styles.css b/packages/sortug/src/styles.css
new file mode 100644
index 0000000..375e620
--- /dev/null
+++ b/packages/sortug/src/styles.css
@@ -0,0 +1,247 @@
+/* SORTUG CSS */
+/* variables */
+:root {
+  --bai: rgba(255, 255, 255, 1);
+  --baizi: rgba(230, 230, 230);
+  --hui: rgba(130, 130, 130, 1);
+  --hei: rgba(0, 0, 0, 1);
+  --hong: rgb(141, 15, 15, 1);
+  --huang: rgb(230, 180, 60, 1);
+  --lan: rgb(30, 60, 80, 1);
+}
+
+[data-theme="dark"] {
+  --bg: hei;
+  --fg: baizi;
+}
+
+[data-theme="light"] {
+  --bg: white;
+  --fg: black;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  min-height: 100%;
+  overscroll-behavior: none;
+  color: var(--fg);
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+}
+
+/* tailwindy classes */
+.card {
+  padding: 1rem;
+  max-width: max-content;
+}
+
+button,
+.button {
+  max-width: max-content;
+  padding: 0.5rem;
+  border: 1px solid var(--fg);
+}
+
+/* borders */
+.nb {
+  border: none;
+}
+
+/* widths */
+.hw {
+  width: 50%;
+}
+
+.qw {
+  width: 25%;
+}
+
+.tqw {
+  width: 75%;
+}
+
+/* flex */
+.row {
+  display: flex;
+  align-items: center;
+}
+
+.sy {
+  overflow-y: scroll;
+}
+
+.fsy {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.fxc {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+}
+
+/* flex spread */
+.fs {
+  display: flex;
+  justify-content: space-between;
+}
+
+.fsc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.g1 {
+  gap: 0.5rem;
+}
+
+.g2 {
+  gap: 1rem;
+}
+
+.address {
+  font-family: "Courier New", Courier, monospace;
+}
+
+.spread {
+  justify-content: space-between;
+}
+
+.even {
+  justify-content: space-evenly;
+}
+
+.flexc {
+  justify-content: center;
+}
+
+.cp {
+  cursor: pointer;
+}
+
+/* centering */
+.gc {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.agc {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ac {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.xc {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+}
+
+.tc {
+  text-align: center;
+}
+
+.bc {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.blocks {
+  & * {
+    display: block;
+  }
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.weak {
+  opacity: 0.7;
+}
+
+.all-c {
+  & * {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}
+
+.error {
+  color: red;
+  text-align: center;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+
+  & .tab {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+
+  & .tab.active {
+    opacity: 1;
+  }
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.smol {
+  font-size: 0.9rem;
+}
+
+/* The Modal (background) */
+#modal-bg {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 998;
+}
+
+/* Modal Content */
+#modal-fg {
+  background-color: var(--modal-bg);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  z-index: 999;
+  max-height: 90vh;
+  min-height: 20vh;
+  max-width: 90vw;
+  overflow: auto;
+}
+\ No newline at end of file