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 {
background-color: #eee;
background-color: var(--bubble-background-color);
font-size: 32px;
min-width: 30px;
}

32
src/bubble.css
View file

@ -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;
}
@ -26,19 +24,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;
}

16
src/index.css
View file

@ -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;
}