hexabot/widget/src/components/ChatHeader.scss
2024-09-10 10:50:11 +01:00

66 lines
1.1 KiB
SCSS

.sc-header {
min-height: 75px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
position: relative;
box-sizing: border-box;
display: flex;
}
.sc-header--img {
border-radius: 50%;
align-self: center;
padding: 10px;
max-width: 32px;
max-height: 32px;
box-sizing: content-box;
}
.sc-header--title {
align-self: center;
padding: 10px;
flex: 1;
user-select: none;
font-size: 20px;
}
.sc-header--title.enabled {
cursor: pointer;
border-radius: 5px;
}
.sc-header--title.enabled:hover {
box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1);
}
.sc-header--close-button {
width: 36px;
height: 36px;
align-self: center;
margin-right: 10px;
box-sizing: border-box;
cursor: pointer;
border-radius: 100%;
margin-left: auto;
}
.sc-header--close-button:hover {
box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1);
}
.sc-header--close-button svg {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
fill: #FFF;
}
@media (max-width: 450px) {
.sc-header {
border-radius: 0px;
}
}