183 lines
2.6 KiB
CSS
183 lines
2.6 KiB
CSS
.headerContainer {
|
|
position: relative;
|
|
height: fit-content;
|
|
overflow: visible;
|
|
}
|
|
|
|
|
|
.header{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.8rem;
|
|
height: fit-content;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.headerLeftContent {
|
|
display: flex;
|
|
width: fit-content;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.headerRightContent {
|
|
width: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.logo {
|
|
height: 4rem;
|
|
width: auto;
|
|
}
|
|
|
|
.link {
|
|
color: black;
|
|
width: fit-content;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.link:hover {
|
|
color: #535bf2;
|
|
}
|
|
|
|
.activeLink {
|
|
width: fit-content;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #019AFF;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
svg {
|
|
width: fit-content;
|
|
}
|
|
|
|
|
|
|
|
|
|
.bellBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 0.5s ease;
|
|
background: none;
|
|
padding: 7px;
|
|
border-radius: 50%;
|
|
width: 75px;
|
|
height: 50px;
|
|
position: relative;
|
|
svg {
|
|
stroke: black;
|
|
stroke-width: 3.5;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
}
|
|
|
|
.bellBtn:focus {
|
|
outline: none;
|
|
}
|
|
.bellBtn:focus-visible {
|
|
outline: 2px solid black;
|
|
}
|
|
|
|
.activeBellBtn {
|
|
transform: translateY(-4px);
|
|
background: rgba(191, 191, 191, 0.5);
|
|
svg {
|
|
stroke: #019AFF;
|
|
}
|
|
}
|
|
|
|
.bellBtn:hover {
|
|
transform: translateY(-4px);
|
|
background: rgba(191, 191, 191, 0.5);
|
|
svg {
|
|
stroke: #019AFF;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.profileLink {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.profileLink:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
|
|
|
|
|
|
.notificationDiv {
|
|
position: absolute;
|
|
width: 250px;
|
|
top: 105%;
|
|
right: 2rem;
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.activeNotificationDiv {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
z-index: 3;
|
|
}
|
|
|
|
|
|
.notification{
|
|
margin-bottom: 7%;
|
|
display: flex;
|
|
}
|
|
|
|
.notificationBadge {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 9px;
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: red;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.closeBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
cursor: pointer;
|
|
background: none;
|
|
margin: 0;
|
|
width: fit-content;
|
|
}
|
|
|
|
.closeBtn:focus {
|
|
outline: none;
|
|
}
|
|
.closeBtn:focus-visible {
|
|
outline: 2px solid black;
|
|
}
|