Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 14:37:41 -07:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #6

Browse Source
This commit is contained in:
Daniel Brendel
2023-03-25 15:02:04 +01:00
parent c2beb1b45e
commit 5d84d9a100
4 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/resources/js/app.js
View File

@ -29,6 +29,16 @@ window.vue = new Vue({
el.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() {
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 {
document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show');
document.getElementsByClassName('navbar')[0].classList.remove('navbar-purple');
}
};

12
app/resources/sass/app.scss
View File

@ -18,12 +18,20 @@ body {
transition: .3s ease-in-out;
}
.navbar-no-transition {
transition: unset;
}
.navbar-item-brand img {
border-radius: 50%;
}
.navbar-background-show {
background-color: rgb(76, 76, 120);
.navbar-purple {
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 {