Adding UI Scalibility options

[khaled-0]

The default navigation icons are too tiny while using. So I've maded some overall scaling and theme changes. Would be nice to have configuration options for stuff like these. Here's what I've changed so far

userChrome.css

:is(.webextension-browser-action, .eom-addon-button)[data-extensionid="userchrome-toggle-extended@n2ezr.ru"] .toolbarbutton-icon { list-style-image: url(./ArcWTF/icons/userchrome-toggle.svg); }

:root[tabsintitlebar] {
    background-color:#ffffff !important;
}

@media(prefers-color-scheme: dark){
  :root[tabsintitlebar] {
    background-color:#2b2a33 !important;
  }

  #navigator-toolbox {
    background-color:  var(--lwt-accent-color-inactive, var(--lwt-accent-color), rgb(43, 42, 51)) !important;
  }
}

#nav-bar .toolbarbutton-icon {
    scale: 1.2 !important;
}

toolbar .toolbarbutton-1 {
  & > .toolbarbutton-icon {
      width: calc(2 * var(--toolbarbutton-inner-padding) + 14px) !important;
      height: calc(2 * var(--toolbarbutton-inner-padding) + 14px) !important;
  }
}

#fxa-avatar-image {
    width: 18.5px !important;
    height: 18.5px !important;
}

userContent.css

@-moz-document url-prefix(about:home), url-prefix(about:newtab) {
  @media(prefers-color-scheme: dark){
    body {
      --newtab-background-color: rgb(43, 42, 51);
      --newtab-text-primary-color: rgba(255, 255, 255, 1);
      --lwt-sidebar-background-color: rgb(53, 52, 61);
      --lwt-sidebar-text-color: rgba(225, 225, 225, 1);
    }
  }
}

Sidebery

.NavigationBar .nav-item .icon { height:20px; width:20px; }
#root.root {--nav-btn-width: 28px;}
#root.root {--nav-btn-height: 28px;}

[KiKaraage]

Hmmmm connecting em to Firefox's scalability options (compact-normal-touch) would be nice yes 🤔 What do you think?

[khaled-0]

that would be ideal yes. is there some selector we can hook into?

[KiKaraage]

Quick search and found that :root[uidensity="compact"] seems working. You can try that, currently I have no time to try it since I'm not using ArcWTF right now.

Reference 1 from firefoxCSS sub, 2021

Reference 2 from BrianGilbert, orig 2021, last maintained 2023

[khaled-0]

I recently migrated to https://github.com/zen-browser/desktop, that's why I haven't looked into this till now It was a wonderful project for the time being. Thanks a ton for your amazing efforts

[KiKaraage]

I recently migrated to https://github.com/zen-browser/desktop, that's why I haven't looked into this till now It was a wonderful project for the time being. Thanks a ton for your amazing efforts

Yeah me too lol. I'm still going to inspect your patch now that I have more time!