umami/components/layout/NavBar.module.css

89 lines
1.3 KiB
CSS
Raw Normal View History

.navbar {
position: relative;
display: flex;
2023-03-22 05:28:36 +01:00
flex-direction: row;
align-items: center;
2023-03-22 05:28:36 +01:00
height: 60px;
background: var(--base75);
2023-03-26 13:15:08 +02:00
border-bottom: 1px solid var(--base300);
2023-03-22 05:28:36 +01:00
padding: 0 20px;
}
2023-03-24 18:55:20 +01:00
.left,
.right {
display: flex;
flex-direction: row;
align-items: center;
}
.right {
justify-content: flex-end;
}
2023-03-22 05:28:36 +01:00
.logo {
display: flex;
2023-03-24 18:55:20 +01:00
flex-direction: row;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
2023-03-22 05:28:36 +01:00
min-width: 0;
}
2023-03-22 05:28:36 +01:00
.links {
display: flex;
flex-direction: row;
2023-03-23 19:46:49 +01:00
gap: 30px;
2023-03-22 05:28:36 +01:00
padding: 0 40px;
flex: 1;
font-weight: 700;
}
2023-03-22 05:28:36 +01:00
.links a {
display: flex;
align-items: center;
gap: 10px;
2023-03-23 19:46:49 +01:00
line-height: 60px;
color: var(--font-color200);
border-bottom: 2px solid transparent;
}
2023-04-12 22:40:19 +02:00
.links span {
white-space: nowrap;
}
2023-03-22 05:28:36 +01:00
.links a:hover {
2023-03-23 19:46:49 +01:00
color: var(--font-color100);
border-bottom: 2px solid var(--primary400);
}
.links .selected {
color: var(--font-color100);
border-bottom: 2px solid var(--primary400);
}
2023-01-21 02:12:53 +01:00
2023-04-10 05:22:28 +02:00
.actions,
.mobile {
2023-01-21 02:12:53 +01:00
display: flex;
2023-03-22 05:28:36 +01:00
flex-direction: row;
2023-01-21 02:12:53 +01:00
align-items: center;
2023-03-22 05:28:36 +01:00
justify-content: flex-end;
min-width: 0;
}
2023-03-24 18:55:20 +01:00
2023-04-10 05:22:28 +02:00
.mobile {
display: none;
}
2023-03-24 18:55:20 +01:00
@media only screen and (max-width: 768px) {
.links,
.actions {
display: none;
}
2023-04-10 05:22:28 +02:00
.mobile {
display: flex;
}
2023-03-24 18:55:20 +01:00
}