Site updates feedback

[lawrawrrr]

Please post in this thread if you spot any issues, bugs or dark mode things that aren't quite dark mode-d with our new site updates.

Read the announcement thread for more info!

[markus8742]

- the pageheader has a modified dark font color on many pages, which makes the light grey in dark mode not work correctly (example: about us & staff)
- the "What does Habbox have to offer?" box on the "about us" page has a white text on light-yellow background, which makes it unreadable
- the "loading..." font when switching sites is dark-grey text on dark background
- the background of furni images (example: https://habbox.com/rares/super-rares/ads_campguitar) is still light grey
- the "What timezone are you in?" select-dropdown is still light-grey when choosing an option
- the password strength indicator on the register page is pretty much unreadable because of the changed lighter darkmode font, but background color is the same
- the like-icon of articles doesnt look good and has artifacts, because it was cut around it to remove the white background it had, makes it look horrible
- the comment-amount number gets colored black when hovering on the index page, which makes it black-on-black
- generally i think the hover-color for links shouldnt be black on the darkmode
- the quiz-descriptions are colored in black (example: https://habbox.com/quiz/quiz-the-ult...f-habbo-firsts), also die question-headers as well in black

issues on both versions:
- the dropdown hover effect makes the menu pretty unreadable, since any sort of dropshadow or background is pretty much missing then
- when switching to sites with a sidebar, the sidebar loads instantly (and sort-of loads on the left first), while the main content continues to load for some seconds
- the latest badges page seems to not be loading at all?
- the logo hover effect is missing
- the hover effect of links in the footer is colored black, which makes the links black on black background
- habbo-user images that can not be loaded should get a fallback to an "anonymous" habbo image

issues on the forum:
- when logged in, the habbo user on the navigation seems to be pushed down when the username is long enough
- also, is there any way to change my username? lol

[markus8742]

in general, I think it would be great to consult with a designer to rework all the details and issues of the badge to make it future-proof. x.com/efistyler would be pretty perfect for it (he also made the latest design of puhekupla)

(also, the edit feature on forum posts does seem not to work at all for me, like none of the three buttons do anything)

[Triz]

Love it!

I'll go ahead and simply suggest some edits, not saying any of them will be wanted or needed, but won't stop me suggesting them.
I was going to suggest some media screen edits, but in the time it took me to screenshot some examples, I can see things have changed, so I can see you're already working on them, but in case you haven't I'll just mention that on mobile the avatar starts to scale down at 450px which will look odd on certain devices. like this for example: click me
or when viewing from an iPad or similar where the user-hello bar is floating, see example here

Obviously I know you know how to do all of these suggestions should you wish to add them, but for ease, I've gone ahead and giving you a copy and paste method so you don't have to

1. Login/Register auto scroll to news-header div ready for user to login?

<script>document.addEventListener('DOMContentLoaded', () => {
  if (location.hash === '#news-wrapper' || location.hash === '#news-header' || location.hash === '#news-node') {
    const el = document.querySelector(location.hash);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});
</script>

2. Nav menu to close on outside click when on mobile.

<script>document.addEventListener('DOMContentLoaded', () => {
  const menu = document.getElementById('menu-habbox');
  const container = document.querySelector('.menu-habbox-container') || menu;
  const toggle = document.querySelector('.toggle-nav'); 


  if (!menu) return;


  function closeMenu() {
    menu.style.display = 'none';


    // also close any open sub-menus (optional but tidy)
    menu.querySelectorAll('.sub-menu').forEach(sm => sm.style.display = 'none');
  }


  // Click outside closes
  document.addEventListener('click', (e) => {
    // If menu is already hidden, do nothing
    if (menu.style.display === 'none' || getComputedStyle(menu).display === 'none') return;


    // Click inside menu/container? ignore
    if (container && container.contains(e.target)) return;


    // Click on toggle? ignore (so it can do its own open/close)
    if (toggle && toggle.contains(e.target)) return;


    closeMenu();
  });


  // Escape closes (nice UX)
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeMenu();
  });
});
</script>

3. Arrows for sub menus on mobile?

@media (max-width: 768px) {

  /* Top-level mobile menu items that have children */
  #menu-habbox > li.menu-item-has-children > a {
    position: relative;
    padding-right: 30px;
    display: block;
  }


  #menu-habbox > li.menu-item-has-children > a::after {
    content: "›";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: .7;
    pointer-events: none;
  }


}

Optional rotate arrow when opened

@media (max-width: 768px) {  #menu-habbox > li.menu-item-has-children.open > a::after {
    transform: translateY(-50%) rotate(90deg);
  }
}

4. Rounded top left & right borders for headers?



Obvs this is just border-radius CSS (I used 5px in the example above)

5. Loading div change text color to white when in dark-mode?

Before:


After:





Obviously this is just a change to add var(--wc-primary-text) assuming you have a root: and a body.dark-mode...


6. Change home goodies to a flex container so it can have flex: 1?

Before:


After:


(Remove inline-block CSS from #home-goodies and remove margin-right: 2% from #home-goodies > div:first-of-type, as gap will replace this)

#home-goodies {
  display: flex !important;
  gap: 16px;
  align-items: stretch;
}


#home-goodies > div {
  flex: 1 1 0;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
}


#home-goodies > div > .home-goodies-content {
  flex: 1 1 auto;
  display: block;      
  width: auto !important;
}

7. Change #content to 95% on mobile?

Before:


After:



8. Hover on links is black, which doesn't work nicely for the user-hello class.