janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-29 21:02:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix viewer style

Browse Source
This commit is contained in:
Janis
2023-11-12 16:41:09 +01:00
parent 5ef2facfec
commit ce7aee8481
3 changed files with 19 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Viewer.tsx
View File

@@ -33,7 +33,7 @@ export default function Viewer({
<div className="viewer"> <div className="viewer">
{showChannelName ? ( {showChannelName ? (
<div className="channelNameContainer"> <div className="channelNameContainer">
<h3>{currentChannel?.properties.name}</h3> <h1>{currentChannel?.properties.name}</h1>
</div> </div>
) : null} ) : null}
{currentClients?.map((client, i) => { {currentClients?.map((client, i) => {

1
src/styles/Generator.scss
View File

@@ -107,7 +107,6 @@ $breakpoint-2: 565px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
min-height: 500px; min-height: 500px;
padding: 10px;
} }
} }

40
src/styles/Viewer.scss
View File

@@ -3,20 +3,25 @@
flex-direction: column; flex-direction: column;
gap: 0 0; gap: 0 0;
font-size: 3rem; font-size: 3rem;
color: white;
box-sizing: border-box;
padding: 10px;
h1,
p {
margin: 0;
background-color: #2f313680;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20ch;
}
.channelNameContainer { .channelNameContainer {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
h3 {
font-size: 1.7rem;
font-weight: 500;
margin: 0;
background-color: rgba(47, 49, 54, 0.5);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
color: white;
}
} }
.client { .client {
@@ -27,22 +32,13 @@
margin: 0.5rem 0; margin: 0.5rem 0;
svg { svg {
width: 2.8rem; width: 2.1rem;
height: 2.8rem; aspect-ratio: 1/1;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
p {
margin: 0;
color: white;
background-color: rgba(47, 49, 54, 0.5);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
// ellipsis after 22 characters p {
white-space: nowrap; font-size: 1.4rem;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20ch;
} }
} }
} }