Giter Site home page Giter Site logo

sirlan-ff00ff / arcticfox-theme Goto Github PK

View Code? Open in Web Editor NEW
48.0 48.0 1.0 621 KB

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

License: Mozilla Public License 2.0

CSS 100.00%
arc-browser firefox firefox-theme userchrome

arcticfox-theme's People

Contributors

naezr avatar neikon avatar sirlan-ff00ff avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

neikon

arcticfox-theme's Issues

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

gambar

: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

Works with "mac" caption buttons

imagen
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?
image

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

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.

afafasfsdaf

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.