From 9ac89ade32f472466ab07d3231c9f183cb1b794b Mon Sep 17 00:00:00 2001
From: Foo <34515228+fooooooooooooooo@users.noreply.github.com>
Date: Sun, 22 Aug 2021 16:09:25 -0700
Subject: [PATCH] feat: added a better default css

---
 src/static/editor.js | 37 ++++++++++++++++++++++++++++++++++++-
 user.css             | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 user.css

diff --git a/src/static/editor.js b/src/static/editor.js
index 677830e..db55cdb 100644
--- a/src/static/editor.js
+++ b/src/static/editor.js
@@ -2,11 +2,46 @@
 /* eslint-disable */
 require.config({ paths: { vs: '../../node_modules/monaco-editor/min/vs' } });
 let saved = true;
+
+const defaultCss = `
+/* 
+Colors can be formatted as either Hex values or HSL values or RGBA values,
+#408080FF;
+hsla(180, 85%, 37%, 1);
+rgba(64, 128, 128, 1);
+Will all give the same result, however conversions between Hex/HSLA/RGBA wont be 100% accurate
+*/
+
+/* If anything here is wrong, dm "chloe !#0489" on Discord about it */
+
+#app.theme-default {
+  /* Main background, Icons */
+    --mainColor-darker:   #140812; /* Room hover borders */
+    --mainColor-dark:     #260f23;
+    --mainColor:          #351b30;
+    --mainColor-light:    #5e3550; /* Icons, Dividers, Room info panels */
+    --mainColor-lighter:  #854b71; /* Icon hover glow, Accept/Decline text */
+    --mainColor-lightest: #d8bace; /* Lobby info text, # of players icon */
+  
+  /* Accent colors */
+      --accentColor:  #33f1e5; /* FIGHTCADE text, Selected icon glow, Challange text */
+      --accentColor2: #ff007a; /* Links, @'s in chat, Replays/Rankings/Events/Profile text */
+  
+  /* Text */
+    --mainColor-lightest-trans-hi:    rgba(216,186,206,.7); /* Text, Lobby name */
+    --mainColor-lightest-trans-md:    rgba(216,186,206,.5); /* Message times, Test Game text, Clear Filters text, Next/Previous Page text*/
+  
+  /* Glows, dividers */
+    --mainColor-dark-trans-lo:    rgba(38,15,35,.3);  /* Panel dividing glow, Main glow on room join hover*/
+    --mainColor-darker-trans-hi:  rgba(20,8,18,.7);   /* Secondary glow on room join hover*/
+    --mainColor-darker-trans-lo:  rgba(20,8,18,.3);   /* Join room glow, Lobby chat box glow, Challange message box */
+  }
+`
 require(['vs/editor/editor.main'], () => {
   monaco.editor.defineTheme('nord-theme', theme);
 
   const editor = monaco.editor.create(document.getElementById('container'), {
-    value: '/* css example or something */',
+    value: defaultCss,
     language: 'css',
     theme: 'nord-theme',
     fontSize: 16,
diff --git a/user.css b/user.css
new file mode 100644
index 0000000..40c3bec
--- /dev/null
+++ b/user.css
@@ -0,0 +1,32 @@
+/* 
+Colors can be formatted as either Hex values or HSL values or RGBA values,
+#408080FF;
+hsla(180, 85%, 37%, 1);
+rgba(64, 128, 128, 1);
+Will all give the same result, however conversions between Hex/HSLA/RGBA wont be 100% accurate
+*/
+
+/* If anything here is wrong, dm "chloe !#0489" on Discord about it */
+
+#app.theme-default {
+  /* Main background, Icons */
+    --mainColor-darker:   #140812; /* Room hover borders */
+    --mainColor-dark:     #260f23;
+    --mainColor:          #351b30;
+    --mainColor-light:    #5e3550; /* Icons, Dividers, Room info panels */
+    --mainColor-lighter:  #854b71; /* Icon hover glow, Accept/Decline text */
+    --mainColor-lightest: #d8bace; /* Lobby info text, # of players icon */
+  
+  /* Accent colors */
+      --accentColor:  #33f1e5; /* FIGHTCADE text, Selected icon glow, Challange text */
+      --accentColor2: #ff007a; /* Links, @'s in chat, Replays/Rankings/Events/Profile text */
+  
+  /* Text */
+    --mainColor-lightest-trans-hi:    rgba(216,186,206,.7); /* Text, Lobby name */
+    --mainColor-lightest-trans-md:    rgba(216,186,206,.5); /* Message times, Test Game text, Clear Filters text, Next/Previous Page text*/
+  
+  /* Glows, dividers */
+    --mainColor-dark-trans-lo:    rgba(38,15,35,.3);  /* Panel dividing glow, Main glow on room join hover*/
+    --mainColor-darker-trans-hi:  rgba(20,8,18,.7);   /* Secondary glow on room join hover*/
+    --mainColor-darker-trans-lo:  rgba(20,8,18,.3);   /* Join room glow, Lobby chat box glow, Challange message box */
+  }
\ No newline at end of file