LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

apply scrollbar tricks to moz browser; make scroll colors on emoji picker easier to see; make emoji hover color easier to see

Browse Source
This commit is contained in:
Ginger Wong 2020-10-03 13:42:48 -07:00
parent e042c85f88
commit ab1eb69fd1
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webroot/js/app.js
View File

@ -554,7 +554,7 @@ export default class App extends Component {
websocket=${websocket} websocket=${websocket}
username=${username} username=${username}
userAvatarImage=${userAvatarImage} userAvatarImage=${userAvatarImage}
chatInputEnabled=${chatInputEnabled} chatInputEnabled=${true||chatInputEnabled}
/> />
</div> </div>
`; `;

4
webroot/styles/app.css
View File

@ -14,6 +14,7 @@ May have overrides for other components with own stylesheets.
html { html {
font-size: 14px; font-size: 14px;
scrollbar-width: none;
} }
a:hover { a:hover {
@ -24,6 +25,9 @@ a:hover {
width: 0px; width: 0px;
background: transparent; background: transparent;
} }
.scrollbar-hidden {
scrollbar-width: none; /* moz only */
}
#app-container * { #app-container * {

9
webroot/styles/chat.css
View File

@ -80,6 +80,7 @@
.emoji-picker.owncast { .emoji-picker.owncast {
--secondary-text-color: rgba(255,255,255,.5); --secondary-text-color: rgba(255,255,255,.5);
--category-button-color: rgba(255,255,255,.5); --category-button-color: rgba(255,255,255,.5);
--hover-color: rgba(255,255,255,.25);
background: rgba(26,32,44,1); /* tailwind bg-gray-900 */ background: rgba(26,32,44,1); /* tailwind bg-gray-900 */
color: rgba(226,232,240,1); /* tailwind text-gray-300 */ color: rgba(226,232,240,1); /* tailwind text-gray-300 */
@ -101,15 +102,19 @@
} }
.emoji-picker__emojis::-webkit-scrollbar-track { .emoji-picker__emojis::-webkit-scrollbar-track {
border-radius: 8px; border-radius: 8px;
background-color: rgba(0,0,0,.2); background-color: black;
box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
} }
.emoji-picker__emojis::-webkit-scrollbar-thumb { .emoji-picker__emojis::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.45); background-color: var(--category-button-color);
border-radius: 8px; border-radius: 8px;
} }
.emoji-picker__emojis {
scrollbar-color: var(--category-button-color) black;
}
/******************************/ /******************************/