m1ngsama/chat-bubbles-for-yt
1
0
Fork 0
mirror of https://github.com/m1ngsama/chat-bubbles-for-yt.git synced 2025-12-24 10:51:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use CSS Vars for Bubble Background and Text Color (#11)

Browse source 
* use css vars to easily change the bubble color
This commit is contained in:
peetzweg/ 2023-02-24 02:39:46 +01:00 committed by GitHub
parent 8a183604af
commit 738762c42f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/bubble-input.css
View file

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

32
src/bubble.css
View file

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

16
src/index.css
View file

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