Release v0.1.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slime2",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "homepage": ".",
   "scripts": {

release/TOKEN.js

@@ -0,0 +1,101 @@
+var slime2Tokens = {
+  //! Do not share your tokens with anyone!
+  //! Theme Developers: Remember to remove your tokens before release!
+
+  /**************************************************************************\
+   * Go to https://slime2.stream/token to get your tokens
+   * Scroll down to view your tokens, this is for your own protection in case
+     you accidentally open this file in front of someone else or on stream
+  \**************************************************************************/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  twitch: 'your token here',
+}

release/base.css

@@ -0,0 +1,166 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
+
+/* Global Styles */
+* {
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 24px;
+}
+
+/*********************
+ * slime2 containers *
+ *********************/
+
+/* Container for the slime2 system */
+#slime2-root {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+/* Container for the chat message list from slime2 */
+#slime2-chat-list {
+  display: flex;
+  flex-direction: column;
+  align-content: start;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  font-family: Nunito, Helvetica, Arial, sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  font-weight: 800;
+  color: white;
+  padding: 20px;
+}
+
+/* Container for each chat message from slime2 */
+#slime2-chat-message {
+  margin-top: 0.2rem;
+}
+
+/* Message container */
+.message {
+  display: inline-block;
+}
+
+/**************************
+ * Message Content Styles *
+ **************************/
+
+/* Content container */
+.content {
+  align-items: center;
+}
+
+.text {
+}
+
+.emote,
+.cheer {
+  height: 1.75rem;
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -0.25rem;
+  margin-bottom: -0.2rem;
+}
+
+.cheer-amount {
+}
+
+/***************
+ * User Styles *
+ ***************/
+
+/* Container for all user details (name, badges, pronouns) */
+.user {
+
+}
+
+/* Display name of the user */
+.name {
+
+}
+
+/* Badges container */
+.badges {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+/* Badge style */
+.badge {
+  height: 1.125rem;
+  margin-right: 0.2rem;
+  display: inline-block;
+  margin-top: -0.25rem;
+  margin-bottom: -0.2rem;
+}
+
+/* Pronoun styles */
+.pronouns {
+  text-transform: lowercase;
+}
+
+.pronouns::before {
+  content: ' (';
+}
+
+.pronouns::after {
+  content: ')';
+}
+
+.pronouns:empty {
+  display: none;
+}
+
+/****************
+ * Extra Styles *
+ ****************/
+
+/* Smooth 1px text outline */
+.text-outline-1 {
+  --outlineColor: rgb(0, 0, 0);
+  --outlineColorLowOpacity: rgba(0, 0, 0, 0.25);
+  text-shadow:
+    /* 1px offset top          */ 0 -1px var(--outlineColor),
+    /* 1px offset bottom       */ 0 1px var(--outlineColor),
+    /* 1px offset left         */ -1px 0 var(--outlineColor),
+    /* 1px offset right        */ 1px 0 var(--outlineColor),
+    /* 1px offset top left     */ -1px -1px var(--outlineColorLowOpacity),
+    /* 1px offset top right    */ 1px -1px var(--outlineColorLowOpacity),
+    /* 1px offset bottom left  */ -1px 1px var(--outlineColorLowOpacity),
+    /* 1px offset bottom right */ 1px 1px var(--outlineColorLowOpacity),
+    /* 1px blur                */ 0 0 1px var(--outlineColor);
+}
+
+/* Smooth 2px text outline */
+.text-outline-2 {
+  --outlineColor: rgb(0, 0, 0);
+  --outlineColorLowOpacity: rgba(0, 0, 0, 0.25);
+  text-shadow:
+    /* 1px offset top          */ 0 -1px var(--outlineColor),
+    /* 1px offset bottom       */ 0 1px var(--outlineColor),
+    /* 1px offset left         */ -1px 0 var(--outlineColor),
+    /* 1px offset right        */ 1px 0 var(--outlineColor),
+    /* 2px offset top          */ 0 -2px var(--outlineColor),
+    /* 2px offset bottom       */ 0 2px var(--outlineColor),
+    /* 2px offset left         */ -2px 0 var(--outlineColor),
+    /* 2px offset right        */ 2px 0 var(--outlineColor),
+    /* 1px offset top left     */ -1px -1px var(--outlineColor),
+    /* 1px offset top right    */ 1px -1px var(--outlineColor),
+    /* 1px offset bottom left  */ -1px 1px var(--outlineColor),
+    /* 1px offset bottom right */ 1px 1px var(--outlineColor),
+    /* 2px offset top left     */ -2px -2px var(--outlineColorLowOpacity),
+    /* 2px offset top right    */ 2px -2px var(--outlineColorLowOpacity),
+    /* 2px offset bottom left  */ -2px 2px var(--outlineColorLowOpacity),
+    /* 2px offset bottom right */ 2px 2px var(--outlineColorLowOpacity),
+    /* 1px blur                */ 0 0 1px var(--outlineColor),
+    /* 2px blur                */ 0 0 2px var(--outlineColor);
+}

release/base.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>slime2 overlay</title>
+
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
+      integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
+      crossorigin="anonymous"
+    ></script>
+    <script src="TOKEN.js"></script>
+    <script src="base.js"></script>
+    <link href="base.css" rel="stylesheet" />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://slime2.stream/favicon.ico"
+    />
+    <script type="module" crossorigin src="https://cdn.jsdelivr.net/gh/zaytri/[email protected]/release/slime2.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zaytri/[email protected]/release/slime2.css">
+  </head>
+  <body>
+    <main id="slime2-root"></main>
+  </body>
+
+  <template id="message-template">
+    <div class="message text-outline-2">
+      <span class="user"></span>: <span class="content"></span>
+    </div>
+  </template>
+
+  <template id="user-template"
+    ><span class="badges"></span><span class="name"></span
+    ><span class="pronouns"></span
+  ></template>
+
+  <template id="badge-template"><img class="badge" /></template>
+
+  <template id="content-emote-template"><img class="emote" /></template>
+
+  <template id="content-cheer-template"
+    ><img class="emote" /><span class="cheer-amount"></span
+  ></template>
+
+  <template id="content-text-template"><span class="text"></span></template>
+</html>