Merge branch 'main' of github.com:craftzdog/chat-bubbles-for-yt

src/bubble-input.css

@@ -15,7 +15,7 @@
 }
 
 .bubble.input > div {
-  background-color: #eee;
+  background-color: var(--bubble-background-color);
   font-size: 32px;
   min-width: 30px;
 }

src/bubble.css

@@ -1,19 +1,17 @@
 .bubble {
   width: 100%;
+  color: var(--bubble-color);
 }
 
 .bubble-content {
-  max-width: 600px;
-  display: inline-block;
+  background-color: var(--bubble-background-color);
   border-radius: 30px;
-  padding: 12px 20px;
-  margin-top: 5px;
+  display: inline-block;
   margin-bottom: 5px;
-}
-
-.bubble-content {
   margin-right: 25%;
-  background-color: #eee;
+  margin-top: 5px;
+  max-width: 600px;
+  padding: 12px 20px;
   position: relative;
   overflow-wrap: break-word;
 }
@@ -27,19 +25,19 @@
   left: -12px;
   height: 26px;
   width: 30px;
-  background: #eee;
+  background: var(--bubble-background-color);
   border-bottom-right-radius: 20px;
 }
 
 .bubble:last-child .bubble-content:after,
 .bubble:nth-last-child(2) .bubble-content:after {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: -15px;
-  width: 15px;
-  height: 27px;
-  background: #00a000;
+  background: var(--background-color);
   border-bottom-right-radius: 15px;
+  bottom: 0;
+  content: '';
+  height: 27px;
+  left: -15px;
+  position: absolute;
+  width: 15px;
+  z-index: 1;
 }

src/index.css

@@ -1,8 +1,15 @@
+:root{
+  --bubble-background-color: #eee;
+  --bubble-color: #000;
+  --background-color: #00a000
+}
+
 html,
 body,
 #root {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+
 }
 
 body {
@@ -14,8 +21,3 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: black;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}