Files
freeCodeCamp/packages/learn/src/components/Header/header.css

148 lines
2.2 KiB
CSS

header {
top: 0;
position: fixed;
width: 100%;
z-index: 200;
}
#top-nav {
background: #006400;
display: flex;
margin: auto;
height: 36px;
padding: 0 30px 0 15px;
line-height: 1;
}
#top-left-nav {
display: flex;
flex-grow: 0.29;
margin: 0;
justify-content: center;
align-items: center;
}
.home-link {
padding: 5.5px 15px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-logo {
max-height: 25px;
min-width: 35px;
margin: auto;
}
#top-right-nav {
display: flex;
width: auto;
margin: 0 0 0 auto;
list-style: none;
justify-content: space-around;
align-items: center;
}
#top-right-nav a,
#top-right-nav img {
max-height: 40px;
}
#top-right-nav a.btn-cta {
background-color: #ffac33;
background-image: linear-gradient(#ffcc4d, #ffac33);
border-color: #f1a02a;
color: #292f33 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
max-height: 38px;
padding: 4px 12px;
}
#top-right-nav li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
}
#top-right-nav > li > a {
padding: 7.5px 15px;
}
.sign-in-btn {
padding: 10px 0 10px 15px;
}
#top-right-nav .sign-in-btn > a {
padding-top: 0;
}
#top-right-nav li > a,
#top-right-nav li > span {
color: #eee;
font-size: 15px;
font-weight: 500;
}
#top-right-nav li > a:hover,
#top-right-nav li > a:focus {
text-decoration: none;
font-weight: 500;
}
.nav-btn:hover {
background-color: #eee;
}
#top-right-nav .nav-btn a:hover {
color: darkgreen;
}
.user-state-spinner {
height: 36px;
margin-left: 11px;
}
.user-state-spinner > div {
animation-duration: 1.5s !important;
}
#top-right-nav > li.user-settings {
margin-left: 15px;
}
#top-right-nav li.user-settings > a {
padding: 0;
}
.profile-pic {
height: 36px;
width: 36px;
}
/* Search bar */
.fcc_searchBar {
width: auto;
flex-grow: 1;
}
.ais-SearchBox-input {
max-height: 30px;
}
.ais-SearchBox-form {
margin-bottom: 0;
}
.ais-Hits {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 90vw;
/* rules above used so the search
hits search bar's margin-right
and are centered on the page */
background-color: #fff;
}