diff --git a/src/bubble-input.css b/src/bubble-input.css index c1ee13d..692cf3e 100644 --- a/src/bubble-input.css +++ b/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; } diff --git a/src/bubble.css b/src/bubble.css index b988cce..2812650 100644 --- a/src/bubble.css +++ b/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; } diff --git a/src/index.css b/src/index.css index 62665f1..407182f 100644 --- a/src/index.css +++ b/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; -}