sirlan-ff00ff / arcticfox-theme Goto Github PK
View Code? Open in Web Editor NEWa theme for Firefox (and sidebery) to make it look and somewhat behave like Arc
License: Mozilla Public License 2.0
a theme for Firefox (and sidebery) to make it look and somewhat behave like Arc
License: Mozilla Public License 2.0
: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
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*/
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?
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
This looks really well made. Any chance you can get it to work on macOS?
I kinda want to know how the experience would be if we had the sidebar on the right side, instead.
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
:is
:where
tags (which the newest version (of writing) already does, but might exclude people that are a few versions earlier)/* 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;
}
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.