Remove some !important declarations
Relates to b071548
- Fixes an issue where the menu button would be the wrong colour
The navigation was using `!important` in a few places. I've changed the CSS a bit to no longer need these, but that means I've made some selectors slightly more specific.
The use of `!important` was to get around the hover state being persisted when the menu was opened but the mouse hadn't moved, which meant the menu button kept its white background when it should be black.
iMaking the hover state only apply when the nav is closed, gets around that.
This commit is contained in:
Paul Adam Davis
parent
b071548965
commit
4f1c76f2e7
1 changed files with 38 additions and 46 deletions
|
|
@ -689,7 +689,7 @@ body.nav-opened .nav {
|
|||
right: 30px;
|
||||
height: 38px;
|
||||
padding: 0 20px;
|
||||
color: #111 !important;
|
||||
color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
|
|
@ -757,12 +757,12 @@ body.nav-opened .nav {
|
|||
display: none
|
||||
}
|
||||
|
||||
/* Appears in the top right corner of your home page */
|
||||
/* Appears in the top left corner of your home page */
|
||||
.blog-logo {
|
||||
display: block;
|
||||
float: left;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
background: none !important; /* Makes sure there is never a background */
|
||||
border: none !important; /* Makes sure there is never a border */
|
||||
}
|
||||
|
||||
.blog-logo img {
|
||||
|
|
@ -783,42 +783,63 @@ body.nav-opened .nav {
|
|||
float: right;
|
||||
height: 38px;
|
||||
padding: 0 15px;
|
||||
border: #bfc8cd 1px solid;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
opacity: 1;
|
||||
color: #9EABB3;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
line-height: 35px;
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.menu-button:before {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-right: 6px;
|
||||
color: #fff !important;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.menu-button:hover {
|
||||
background: #fff;
|
||||
}
|
||||
.menu-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
body.nav-opened .menu-button {
|
||||
/* When the navigation is closed */
|
||||
.nav-closed .menu-button {
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.nav-closed .menu-button:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* When the navigation is closed and there is no cover image */
|
||||
.nav-closed .no-cover .menu-button {
|
||||
border-color: #BFC8CD;
|
||||
color: #9EABB3;
|
||||
}
|
||||
.nav-closed .no-cover .menu-button:hover {
|
||||
border-color: #555;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* When the navigation is opened */
|
||||
.nav-opened .menu-button {
|
||||
padding: 0 12px;
|
||||
background: #111 !important;
|
||||
border-color: #111 !important;
|
||||
color: #fff !important;
|
||||
background: #111;
|
||||
border-color: #111;
|
||||
color: #fff;
|
||||
-webkit-transform: translate3D(94px, 0, 0);
|
||||
-ms-transform: translate3D(94px, 0, 0);
|
||||
transform: translate3D(94px, 0, 0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
body.nav-opened .menu-button .word {
|
||||
|
||||
.nav-opened .menu-button .word {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
|
@ -833,34 +854,10 @@ body.nav-opened .menu-button .word {
|
|||
border: none;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
|
||||
}
|
||||
.no-cover .main-nav.overlay,
|
||||
.no-cover .menu-button {
|
||||
.no-cover .main-nav.overlay {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.main-nav.overlay a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-nav.overlay .menu-button {
|
||||
border-color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.main-nav.overlay a:hover {
|
||||
color: #222;
|
||||
border-color: #fff;
|
||||
background: #fff;
|
||||
}
|
||||
.main-nav.overlay a:hover:before {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Add a border to the buttons on hover */
|
||||
.menu-button:hover {
|
||||
border-color: #555;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* The details of your blog. Defined in ghost/settings/ */
|
||||
.page-title {
|
||||
margin: 10px 0 10px 0;
|
||||
|
|
@ -895,11 +892,6 @@ body.nav-opened .menu-button .word {
|
|||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.no-cover .main-nav.overlay .menu-button {
|
||||
color: rgba(0,0,0,0.4);
|
||||
border-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Add subtle load-in animation for content on the home page */
|
||||
.home-template .page-title {
|
||||
-webkit-animation: fade-in-down 0.6s;
|
||||
|
|
@ -1637,8 +1629,8 @@ body:not(.post-template) .post-title {
|
|||
background: none;
|
||||
}
|
||||
body.nav-opened .menu-button {
|
||||
background: none !important;
|
||||
border: transparent !important;
|
||||
background: none;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.main-nav.overlay a:hover {
|
||||
|
|
|
|||
Loading…
Reference in a new issue