mirror of
https://github.com/SophiaAtkinson/steamwidgets-web.git
synced 2025-06-27 10:17:41 -07:00
Resolves #6
This commit is contained in:
@ -29,6 +29,16 @@ window.vue = new Vue({
|
|||||||
|
|
||||||
el.classList.toggle('is-active');
|
el.classList.toggle('is-active');
|
||||||
$target.classList.toggle('is-active');
|
$target.classList.toggle('is-active');
|
||||||
|
|
||||||
|
if (el.classList.contains('is-active')) {
|
||||||
|
let rootel = document.getElementsByClassName('navbar')[0];
|
||||||
|
rootel.classList.add('navbar-purple');
|
||||||
|
rootel.classList.add('navbar-no-transition');
|
||||||
|
} else {
|
||||||
|
let rootel = document.getElementsByClassName('navbar')[0];
|
||||||
|
rootel.classList.remove('navbar-purple');
|
||||||
|
rootel.classList.remove('navbar-no-transition');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -230,9 +240,9 @@ document.addEventListener('DOMContentLoaded', function(){
|
|||||||
|
|
||||||
window.onscroll = function() {
|
window.onscroll = function() {
|
||||||
if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10)) {
|
if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10)) {
|
||||||
document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show');
|
document.getElementsByClassName('navbar')[0].classList.add('navbar-purple');
|
||||||
} else {
|
} else {
|
||||||
document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show');
|
document.getElementsByClassName('navbar')[0].classList.remove('navbar-purple');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -18,12 +18,20 @@ body {
|
|||||||
transition: .3s ease-in-out;
|
transition: .3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar-no-transition {
|
||||||
|
transition: unset;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-item-brand img {
|
.navbar-item-brand img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-background-show {
|
.navbar-purple {
|
||||||
background-color: rgb(76, 76, 120);
|
background-color: rgb(76, 76, 120) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-menu {
|
||||||
|
background-color: rgb(76, 76, 120) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active {
|
a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active {
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="navbarBasicExample" class="navbar-menu">
|
<div id="navbarBasicExample" class="navbar-menu navbar-purple">
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
<a class="navbar-item" href="{{ url('/documentation') }}">
|
<a class="navbar-item" href="{{ url('/documentation') }}">
|
||||||
Documentation
|
Documentation
|
||||||
|
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user