element-call/src/Header.module.css
2021-12-10 10:54:18 -08:00

99 lines
1.3 KiB
CSS

.header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
flex-shrink: 0;
}
.nav {
display: flex;
flex: 1;
align-items: center;
white-space: nowrap;
padding: 0 20px;
height: 64px;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
}
.leftNav > * {
margin-right: 12px;
}
.rightNav {
justify-content: flex-end;
}
.rightNav > * {
margin-right: 24px;
}
.nav > :last-child {
margin-right: 0;
}
.roomAvatar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border-radius: 36px;
background-color: #5c56f5;
}
.roomAvatar > * {
fill: white;
stroke: white;
}
.backButton {
background: transparent;
border: none;
display: flex;
color: var(--textColor1);
cursor: pointer;
align-items: center;
}
.backButton h3 {
margin: 0;
}
.backButton > * {
margin-right: 12px;
}
.backButton > :last-child {
margin-right: 0;
}
.userName {
font-weight: 600;
margin-right: 8px;
text-overflow: ellipsis;
overflow: hidden;
flex-shrink: 1;
}
.signOutButton {
background: transparent;
border: none;
color: rgb(255, 75, 85);
cursor: pointer;
font-weight: 600;
flex-shrink: 0;
}
@media (min-width: 800px) {
.nav {
height: 98px;
}
}