sirlan-ff00ff/arcticfox-theme

a theme for Firefox (and sidebery) to make it look and somewhat behave like Arc

arcticfox-theme's Issues

Enhancement: Enabling custom icon option to replace Userchrome Toggle button with a sidebar icon

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

Code for userchrome.css, with the SVG put in the chrome folder. Would be good to make it even closer to the Mac Arc UI in your theme. Icons can be a Mac-OS themed sidebar one, or... just any sidebar icon

Credit: https://github.com/aminomancer/uc.css.js/blob/master/uc-extensions.css

How to Hide web border

How can I hide this borders (web borders)

Works with "mac" caption buttons

the purple border is because this screenshot is from a private windows in Manjaro KDE Linux

To get this buttons import this code
round_caption_buttons.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_caption_buttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Make window-control - aka caption buttons round following theme text color. */

/* Uncomment the following line to use colorful icons ala MacOS */
.titlebar-button{ --uc-caption-background: var(--uc-caption-color) }

.titlebar-button { opacity: 0.6; --uc-caption-color: rgb(252,185,15) }
.titlebar-min    { opacity: 0.5; --uc-caption-color: rgb(36, 209, 49) }
.titlebar-close  { opacity: 0.7; --uc-caption-color: rgb(250, 55, 55) }

.titlebar-button:hover { opacity: 1 }

.titlebar-button {
  background: transparent !important;
  padding-inline: 6px !important;
  transition: opacity 0.2s ease;
}
.titlebar-close {	padding-right: 5px !important; }

.titlebar-button > .toolbarbutton-icon {
	list-style-image: none;
	border-radius: 10px;
  background: var(--uc-caption-background,currentColor) !important;
}

/* OPTIONAL - move caption buttons in tabs toolbar a bit upwards */
/* #TabsToolbar > .titlebar-buttonbox-container{ margin-bottom: var(--toolbarbutton-inner-padding) !important; } */

in userchrome.css

/*code*/

@import url('round_caption_buttons.css');

/*more code*/

#nav-bar {
  /* ** width of the window control buttons (min max close)
        that the toolbar should take into account
     // change to 0 if using server side decorations
  */
  --wbt-wdt: 4.75rem; /*<-------- ajustment to fit better the buttoms*/

/*More code*/

Theme support for Left sided Window Controls

I'm running Firefox on Fedora Workstation 39 and the the theme works fine (there are minor bugs but I don't really mind them), except the window controls placement. Since, I have the WhiteSur theme installed for Gnome and have the window controls on the left side using the Gnome Tweaks app, the back, forward and refresh buttons and the window controls buttons (close, minimize, maximize) overlap with each other. There is also this unwanted space on the right side after the menu button. Also, I did enable the mac_buttons.css by uncommenting in the userChrome.css file but the window controls doesn't seem to change. I don't know how to inspect the sidebar to edit the css, so can you point me out how I can get this to work properly?

Do not resize site content

What should be done to make the site content not resize when the sidebar opens. I want the sidebar to overlay on top of the site and not resize it. Most sites are not adapted to frequent window resizing and do it very jerky. I really like this theme, but this one flaw makes it very frustrating to use

How to change userchrome-toogle icon?

How can I change this icon ?

Doesn't work on macOS

This looks really well made. Any chance you can get it to work on macOS?

toolbar widgets mess

I set like README (I think) but is a mess. Where is the error?

Enhancement/Future Version Idea: Right sidebar version of this theme

I kinda want to know how the experience would be if we had the sidebar on the right side, instead.

info - cleaner rewrite

yes, has been a short time, but I already think this theme needs a rewrite, to make use newer css features and better structure to be cleaner and easier to maintain/customize

already have some code done, and there are a few points about it

• it is already a bit cleaner, with some more concise names, and requires less setting of margins and offsets to keep from breaking
• the version of firefox must fully support CSS nesting and the :is :where tags (which the newest version (of writing) already does, but might exclude people that are a few versions earlier)
• the overlay when not 'pinned' behaviour will be the default, as it's kinda bad to constantly resize the page (meaning lots of layout updates) when you for example just want to reach for a single button (you can still change to have the resizing behaviour, but will not be 'supported' by me)

current code, still early stage

/* revamped user chrome */

* {
  box-sizing: border-box !important;;
}

:root {
  --sdbr-max-wdt: 360px;

  --hedr-hgt: 6.5rem;
  --wbtn-wdt: 3.75rem;
  
  --anim-dur: .5s;
  
  --brdr-rad: 10px;
  --page-pad: .7rem;
  
  --bordr-col: #fafafa30;
  --shadw-col: #00000010;
}

:root {
  --sdbr-wdt: 0px;
  --brws-bg-col: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
  
  --grad: linear-gradient(90deg, var(--bordr-col) 0%, var(--bordr-col) 4%, var(--shadw-col) 5%, transparent);  
  --ovrl-wdt: 1rem;
  --ovrl-wdt: 0px;
  --sdbr-real-wdt: calc(var(--sdbr-wdt) + var(--ovrl-wdt));
  --sdbr-item-wdt: calc(var(--sdbr-real-wdt) - var(--page-pad));

  --bdrr: var(--ovrl-wdt) solid;
  --bdri: var(--grad) 1;
  --bdio: 0 var(--ovrl-wdt);
  --bdis: 0 100%;
}

:is(#navigator-toolbox, #sidebar-box) {
  position: absolute;
  left: 0;
  min-width: var(--page-pad) !important;;
  width: var(--sdbr-real-wdt) !important;
  z-index: 1;
  overflow: clip;
  transition: width var(--anim-dur) ease-out;
  
  border-right: var(--bdrr) !important;
  border-image: var(--bdri) !important;
  border-image-outset: var(--bdio) !important;
  border-image-slice: var(--bdis) !important;
  
  & > * {
    width: var(--sdbr-real-wdt) !important;;
    opacity: 0%;
    /*padding-right: var(--page-pad);*/
  }
}

#navigator-toolbox {
  height: var(--hedr-hgt) !important;
  z-index: 2;
}

#sidebar-box {
  top: var(--hedr-hgt);
  height: calc(100vh - var(--hedr-hgt));
  background: var(--brws-bg-col) !important;
}
#sidebar-splitter { display: none }
#sidebar-header { display: none }
#sidebar { background: var(--brws-bg-col) }

#browser > #appcontent {
  transition: margin var(--anim-dur);
}
#appcontent .browserStack {
  background: var(--brws-bg-col);
}
#appcontent browser {
  margin: var(--page-pad);
  border-radius: var(--brdr-rad);
  transition: margin var(--anim-dur);
}

#main-window:has(
  #sidebar-box:hover,
  #navigator-toolbox:hover
) {
  --sdbr-wdt: var(--sdbr-max-wdt);
  --ovrl-wdt: 1rem;
  
  & :is(#navigator-toolbox, #sidebar-box) {
    animation-name: oflw-vis;
    animation-duration: .01s;
    animation-delay: var(--anim-dur);
    animation-fill-mode: forwards;
    
    & > * {
      opacity: 100%;
    }
  }
}

#main-window[titlepreface*="|| "] {
  --sdbr-wdt: var(--sdbr-max-wdt);
  --ovrl-wdt: 1rem;
  --bdri: linear-gradient(transparent, transparent);
  
  & :is(#navigator-toolbox, #sidebar-box) {
    overflow: visible;
    
    & > * {
      opacity: 100%;
    }
  }

  & #browser > #appcontent {
    margin-left: var(--sdbr-real-wdt);
  }
  & #appcontent browser {
    margin-left: 0px;
  }
}

@keyframes oflw-vis {
  from {overflow: clip;}
  to {overflow: visible;}
}

/* --- */

#titlebar {
  height: 3rem;
}

#nav-bar {
  margin-top: -3rem;
  width: calc(var(--sdbr-item-wdt) - var(--wbtn-wdt)) !important;
  background: none !important;

  border: none !important;
  box-shadow: none !important;
}

#nav-bar.browser-toolbar {
  overflow: visible !important;
  height: 3rem;
}

#tabbrowser-tabs,
#alltabs-button,
#new-tab-button,
#private-browsing-indicator-with-label
{
  display: none;
}

#urlbar-container {
  position: absolute;

  flex: 0 !important;

  margin: 0;
  top: 2.75rem;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* // put the url bar in the right position */
#urlbar {
  width: calc(var(--sdbr-item-wdt) - var(--page-pad) * 0.25) !important;
  margin-left: calc(var(--page-pad) * 0.15);
  height: 2.75rem;
}

[Feature Request] Include the Padlock Icon

Can you also include the Address/URL bar to show the padlock icon too? Not having the lock icon introduces a chance of going to an unencrypted site or a site without valid SSL configured without getting notified.

Weird twitching

As I understand it, if you move the cursor over this place, the :hover attribute disappears for a millisecond and the sidebar starts to close, but it doesn't have time because of the animation. If you disable the animation, the sidebar will just disappear instead of twitching.