app/styles/layout/_navbar.scss
.navbar {
background: $header-background-color;
padding: 0;
width: 100%;
border-bottom: 1px solid darken($secondary-background-color, 4);
@if $theme == "kitsu-dark" {
border: none;
}
border-radius: 0;
&.primary-nav {
z-index: $zIndex--primary-nav;
.row {
display: inherit;
}
.navbar-nav .nav-link {
color: $body-secondary-text-color;
&:hover,
&.active {
color: RGBA(237, 240, 241, 1);
}
}
.open {
.nav-link {
color: $body-text-color;
&:hover,
&.active,
&:focus {
color: RGBA(237, 240, 241, 1);
}
}
}
#exCollapsingNavbar2 {
position: relative;
top: 1px;
.nav-item {
font-size: 14px;
line-height: 24px;
}
@media (max-width: 768px) {
width: 100%;
padding: 0;
margin: 0;
left: -2px;
border-radius: 0;
background: transparent;
box-shadow: none;
.nav-link {
border-color: #291e28;
&:hover {
background: transparent;
}
}
}
}
}
.primary-nav--drop {
@media (max-width: 768px) {
position: absolute;
background: #fff;
width: 160px;
top: 63px;
left: 15px;
border-radius: 3px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
height: 0;
&.in {
height: initial;
overflow: visible;
}
.nav-link {
font-size: 12px;
color: $body-text-color;
padding: 10px 20px;
border-bottom: 1px solid $divider-color;
&:hover {
text-decoration: none;
background-color: lighten($divider-color, 4);
}
}
.nav-item:last-child {
.nav-link {
border-bottom: none;
}
}
}
}
a {
color: lighten($body-text-color, 30);
&:hover {
color: $body-text-color;
}
}
.logo {
width: 85px;
display: inline-block;
position: relative;
top: 3px;
svg {
width: 100%;
height: 25px;
}
g {
g:last-child {
fill: #fd755c;
}
}
}
}
.nav-item {
position: relative;
}
.cover-nav.navbar-light {
padding: 0;
margin-bottom: 30px;
@if $theme == "kitsu-light" {
background-color: $white;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
border-bottom: none;
}
@media (min-width: 768px) and (max-width: 991px) {
.container {
max-width: 730px;
}
}
@media (max-width: 767px) {
.container {
max-width: 100%;
}
}
@media (max-width: 767px) {
.nav.navbar-nav {
display: flex;
justify-content: stretch;
overflow-y: auto;
}
}
.nav-item {
border-right: 1px solid $divider-color;
padding: 10px 20px;
font-size: 14px;
color: $body-text-color;
@media (max-width: 767px) {
min-width: max-content;
}
@if $theme == "kitsu-light" {
color: lighten($body-text-color, 35);
}
@if $theme == "kitsu-dark" {
border: none;
}
&:first-child {
border-left: 1px solid $divider-color;
@if $theme == "kitsu-dark" {
border: none;
}
}
&:hover {
@if $theme == "kitsu-light" {
background: darken($white, 3);
}
@if $theme == "kitsu-dark" {
background: lighten($header-background-color, 5);
}
color: $body-text-color;
}
&.active {
color: $white;
@if $theme == "kitsu-light" {
background: darken($white, 3);
color: $body-text-color;
&:hover {
color: $body-text-color;
background: darken($white, 5);
}
}
@if $theme == "kitsu-dark" {
background: lighten($header-background-color, 5);
border: none;
&:hover {
color: $body-text-color;
background: lighten($header-background-color, 5);
}
&:focus {
color: $white;
}
}
}
}
.nav-item + .nav-item {
margin-left: 0;
}
}
@if $theme == "kitsu-dark" {
.nav-tabs .nav-link.active {
color: $white;
&:hover, &:focus {
color: $white;
}
}
}
.edit-nav {
padding-left: 105px !important;
}
.navbar-buttons {
&.navbar-nav .nav-item + .nav-item {
margin-left: 10px;
}
}
.notifications {
width: 25px;
height: 25px;
text-align: center;
border-radius: 50%;
line-height: 11px;
font-size: 13px;
position: relative;
top: 8px;
background: $secondary-background-color;
&:hover,
&:active {
background: darken($secondary-background-color, 5);
}
&.notifications--present {
background: #d65e43;
border: none;
span {
color: $white;
}
&:hover {
opacity: 0.9;
}
}
svg {
position: relative;
top: -1px;
width: 13px;
height: 13px;
path {
fill: $notifications-button-color;
}
}
}
.open {
.notifications {
background: darken($secondary-background-color, 5);
path {
fill: $white;
}
}
}
.site-search {
position: relative;
top: -3px;
height: 32px;
text-align: right;
display: inline-block;
}
.site-search__icon {
position: relative;
cursor: pointer;
margin-left: -6px;
height: 40px;
display: inline-block;
vertical-align: middle;
}
.site-search__icon .icon svg {
display: inline-block;
vertical-align: middle;
margin: 0;
height: 20px;
width: 20px;
position: absolute;
left: 10px;
top: 14px;
z-index: 1;
fill: #a99fa8;
}
.site-search__input {
border-radius: 3px;
border: none;
background: $secondary-background-color;
height: 25px;
padding-left: 30px;
color: #edf0f1;
outline: none;
width: 200px;
font-size: 13px;
&.active {
background: darken($secondary-background-color, 5);
@if $theme == "kitsu-dark" {
background: darken($secondary-background-color, 1);
}
}
&:hover {
border-color: #edf0f1;
}
&::placeholder {
color: #a99fa8;
}
@media (max-width: 768px) {
width: 150px;
}
}
.search--drop {
width: 350px;
max-height: 90vh;
background-color: $search-background-color;
overflow: auto;
border-radius: 3px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.search--results {
padding: 5px 0;
.media {
padding: 5px 10px;
&:hover {
background: $search-results-hover-background;
}
img {
width: 45px;
height: 64px;
&.is-avatar-users,
&.is-avatar-groups {
height: 45px;
}
&.is-avatar-users {
border-radius: 999em;
}
}
.tag {
height: 18px;
}
}
}
.search--header {
background-color: $search-header-background;
padding: 10px;
margin-bottom: 0px;
}
.search--group-header {
font-size: 12px;
padding: 10px;
background-color: $search-group-header-background;
margin-bottom: 0px;
text-transform: uppercase;
border-top: $search-group-header-border-top;
border-bottom: $search-group-header-border-bottom;
}
.notification-drop,
.user-menu-drop {
width: 400px;
right: 0;
left: initial;
top: 55px;
padding: 0;
overflow: hidden;
@media (max-width: 460px) {
width: calc(100vw - 30px);
}
}
.notification-drop {
@media (max-width: 460px) {
right: -30px;
}
header {
font-size: 12px;
padding: 5px 10px;
border-bottom: 1px solid $divider-color;
background-color: $notifications-header-color;
}
.mark-as-read {
float: right;
}
}
.notifications-empty {
text-align: center;
padding-top: 10px;
}
.user-menu-drop {
width: 150px;
.dropdown-item {
border-bottom: 1px solid $divider-color;
padding: 10px 20px;
font-size: 12px;
&:last-child {
border-bottom: none;
}
}
}
.dropdown-item {
cursor: pointer;
}
.notification-item {
.poster-image {
width: 25px;
height: 35px;
}
}
.notification-list {
list-style-type: none;
margin: 0;
padding: 0;
max-height: 300px;
overflow: auto;
&.full-size {
max-height: none;
margin-bottom: 20px;
}
.media-left {
padding-left: 10px;
position: relative;
}
.media {
padding: 15px;
font-size: 12px;
color: $body-text-color;
font-family: $base-font-family;
border-bottom: 1px solid $divider-color;
transition: all 0.2s ease-in-out;
background: $notification-background-color;
&.new {
background: $notification-new-background-color;
.media-left:before {
content: "";
position: absolute;
top: 14px;
left: -5px;
width: 6px;
height: 6px;
background: linear-gradient(
RGBA(237, 72, 95, 1),
RGBA(242, 124, 54, 1)
);
border-radius: 50%;
}
}
&:hover {
text-decoration: none;
background-color: $notification-hover-color;
opacity: 1;
}
}
.media-body {
top: 0;
.media-heading a:hover {
background: transparent;
}
}
.media-heading {
margin-bottom: 0;
}
.media-secondary {
margin-top: 0px;
display: block;
opacity: 0.6;
}
}
.navbar-toggler {
color: RGBA(237, 240, 241, 0.6);
@media (min-width: 768px) {
display: none;
}
}
.navbar .header-announce {
display: block;
position: relative;
width: 100%;
background-color: darken($header-background-color, 3);
color: RGBA(237, 240, 241, 1);
z-index: ($zIndex--primary-nav - 1);
font-size: 13px;
@media (max-width: 554px) {
position: fixed;
bottom: 0;
}
.row {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
}
.header-announce--message {
margin-left: auto;
}
.header-announce--btn {
padding: 2px 8px;
display: inline-block;
margin-left: 10px;
color: RGBA(237, 240, 241, 1);
font-size: 13px;
}
.header-announce--dismiss {
margin-left: auto;
margin-right: 10px;
fill: RGBA(237, 240, 241, 1);
}
}