panotaka/nixos-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code to improve performance and readability

Browse Source
This commit is contained in:
panotaka
2024-01-15 14:50:05 -04:00
parent 07645a8b84
commit 0bcf79b02b
1 changed files with 135 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

545
home/applications/browsers/default.nix
View File

@@ -45,450 +45,181 @@
"widget.use-xdg-desktop-portal.file-picker" = 1;
};
userChrome = ''
/* # arcticfox - userChrome
- under MPL 2.0
/* ty to whoever made the origional "yet another sidebery config" as that is what ive gotten it from */
dragon's (very hacky) arc browser-like theme for firefox
ft. sidebery, and userchrome-toggle
!!! for the theme to work:
- the side bar needs to always be visible
and with sidebery (maybe TST but nothing guaranteed) opened
- the order of the toolbar widgets should be:
[url-bar sidebar-toggle back forward reload spacer extensions overflow hamburger-menu]
you can change the order of some of those, but the url bar must be the first item
- preferencially have userchrome-toggle addon or something else to toggle keeping the
sidebar opened
- disable the bookmarks toolbar
- use flat color themes instead of ones with gradients or backgrounds, preferencially
themes from Firefox Color
when navigating this file you can use ctrl + f
(or whatever the 'find' shortuc is on your editor)
to jump to spefic parts:
## for sections
// for comments
** for thing you can change
!!! some extra warnings (drawbacks)
- the menu bar (activated with alt) doesn't work
- the bookmarks toolbar doesn't work
- the 'customise toolbar...' page will not let you rearrange
things in the toolbar, do it with the theme disabled
(can still put things in the overflow menu tho)
- there will be visual glitches in certain areas, for example
in some places the background may be transparent (showing behind the window)
and flicker
- pages and addons that expect ui elements to be in certain places may nor work
- some browser color themes may not work well or need some tweak
- some menus you open (or if change the addon in the sidebar) may toggle off the
window preface and not keep the sidebar open
- using addons that use the sidebar (for example firefox side view) is awkard
- might not work well depending on your window controls
*/
:root {
/* ** spacing around the web page and other things */
--spacing: .75rem;
/* ** sidebar width when open */
--sdb-wdt-max: 360px;
/* // sidebar width (don't change this setup) */
/* --sdb-wdt: var(--sdb-wdt-max); */
--sdb-wdt: 0;
/* ** theme border radius */
--br: 10px;
/* **? height of the toolbox (browser header/tool bar) */
--toolbox-height: 6.25rem;
/* ** transitions (mainly sidebar) duration */
--trans: .5s;
/* // browser background color, don't change this var */
--bbg: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
/* Sidebery */
#main-window[titlepreface*="[S] "] .tabbrowser-tab {
visibility: collapse;
}
/* // hide the contens of the toolbox by default
// and give some padding area to be able to hover it
*/
#navigator-toolbox {
padding-right: var(--spacing);
}
#navigator-toolbox > * {
opacity: 0%;
#main-window[titlepreface*="[S] "] .titlebar-button {
height: 40px;
}
/* // when hovering the toolbox or sidebar, show them
** you can change the 'preface' value
wish normal CSS had sass,stylus,less style nesting
*/
#main-window[titlepreface*="|| "],
#main-window:has(#sidebar-box:hover),
#main-window:has(#navigator-toolbox:hover),
#main-window:has(#navigator-toolbox:focus-within),
#main-window:has(toolbarbutton[open="true"])
{
--sdb-wdt: var(--sdb-wdt-max);
#main-window[titlepreface*="[S] "] #nav-bar {
margin-top: -40px;
}
#main-window[titlepreface*="[S] "][tabsintitlebar="true"] #nav-bar {
margin-right: 137px;
}
#main-window[titlepreface*="[S] "] #titlebar-spacer {
background-color: var(--chrome-secondary-background-color);
}
#main-window[titlepreface*="|| "] #navigator-toolbox,
#main-window:has(#sidebar-box:hover) #navigator-toolbox,
#main-window:has(#navigator-toolbox:hover) #navigator-toolbox,
#main-window:has(#navigator-toolbox:focus-within) #navigator-toolbox,
#main-window:has(toolbarbutton[open="true"]) #navigator-toolbox
{
padding-right: 0;
#main-window[titlepreface*="[S] "] #titlebar-buttonbox-container {
background-color: var(--chrome-secondary-background-color);
}
#main-window[titlepreface*="|| "] #navigator-toolbox > *,
#main-window:has(#sidebar-box:hover) #navigator-toolbox > *,
#main-window:has(#navigator-toolbox:hover) #navigator-toolbox > *,
#main-window:has(#navigator-toolbox:focus-within) #navigator-toolbox > *,
#main-window:has(toolbarbutton[open="true"]) #navigator-toolbox > *
{
opacity: 100%;
#main-window[titlepreface*="[S] "] .titlebar-color {
background-color: var(--toolbar-bgcolor);
}
/* // background of the area around the web page */
.browserStack {
background: var(--bbg);
}
#appcontent {
height: 100vh;
/* // offset the web page up to fit the browser height */
margin-top: calc(var(--toolbox-height) * -1);
}
/* // for the toolbox to not hide in fullscreen */
#navigator-toolbox[inFullscreen="true"] {
margin-top: 0 !important;
}
/* // reset the web page offset when playing some video in fullscreen */
#main-window[inDOMFullscreen="true"] #appcontent {
margin-top: 0;
}
#appcontent browser {
margin: var(--spacing);
margin-left: 0;
margin-top: var(--spacing);
border-radius: var(--br);
box-sizing: border-box;
/* ** small details to separate the web page from the surroundings
// feel free to disable these, and use Adaptive Tab Bar Color to
make the entire browser fit the page color
*/
box-shadow: 0px 0px 7px #00000030;
border: 1px solid #fafafa30;
}
/* // remove margin from the dev tools */
#appcontent .devtools-toolbox-side-iframe {
margin: 0 !important;
}
#appcontent .devtools-toolbox-bottom-iframe {
margin: 0;
border-radius: 0;
}
/* // make status panel (the bar with url when you hover links)
* // fit better with theme
*/
#statuspanel {
margin-bottom: var(--spacing);
margin-right: var(--spacing);
}
#statuspanel-label {
background: var(--bbg) !important;
border: 1px solid #00000020 !important;
color: var(--toolbar-color) !important;;
}
/* // make find bar fit with theme */
findbar {
background: var(--bbg) !important;
border: none !important;
padding-top: 0 !important;;
}
/*
#sidebar-box {
display: block !important;
}
*/
/* // hide the sidebar header (only when sidebery opened)
** feel free to disable this
** or change the sidebarcommand to some other addon (get from browser dev mode)
*/
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
display: none;
/* */
visibility: collapse;
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Show sidebar only when the cursor is over it */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
--uc-sidebar-width: 48px !important;
--uc-sidebar-hover-width: 250px;
--uc-autohide-sidebar-delay: 100ms; /* Wait 0.1s before hiding sidebar */
position: relative;
min-width: var(--uc-sidebar-width) !important;
width: var(--uc-sidebar-width) !important;
max-width: var(--uc-sidebar-width) !important;
z-index:1;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] {
direction: rtl;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl){
direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
direction: rtl;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
transition: min-width 115ms linear !important;
min-width: var(--uc-sidebar-width) !important;
will-change: min-width;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar {
min-width: var(--uc-sidebar-hover-width) !important;
transition: min-width 100ms linear var(--uc-autohide-sidebar-delay), box-shadow 500ms linear !important;
box-shadow: 0 0 4px rgba(10,10,10, .5);
clip-path: inset(0px -15px 0px -15px);
}
/* Add sidebar divider and give it background */
#sidebar,
#sidebar-header {
border: none !important;;
background-color: var(--toolbar-bgcolor) !important;
border-inline: 1px solid var(--chrome-content-separator-color);
border-inline-width: 0px 1px;
}
/* // hide the sidebar close button (closing the sidebar messes the theme) */
#sidebar-header #sidebar-close {
display: none;
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > * {
border-inline-width: 1px 0px;
}
#sidebar-box {
padding-right: var(--spacing);
background: var(--bbg) !important;
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */
min-width: 0px !important;
width: var(--sdb-wdt) !important;
overflow: clip;
transition: width var(--trans);
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel {
inset-inline: auto 0px !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel-label {
margin-inline: 0px !important;
border-left-style: solid !important;
}
#sidebar-splitter {
display: none;
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
#PersonalToolbar{
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 7px; /* Vertical padding to be applied to bookmarks */
--uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
/* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */
--uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
--uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}
#sidebar {
overflow: clip;
/*border-radius: var(--br); */ /* // adds some visual glitches */
:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px; }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }
/* // keep the sidebar content in a specific size */
width: calc(var(--sdb-wdt-max) - var(--spacing) * 0.5);
margin-left: calc(var(--spacing) * 0.4);
}
#main-window #titlebar {
overflow: clip;
}
/* // default state: Set initial height to enable animation */
#main-window #titlebar { height: 3rem !important; }
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
/* // hide the defaul tab bar and the private window label */
#tabbrowser-tabs,
#alltabs-button,
#new-tab-button,
#private-browsing-indicator-with-label
{
display: none;
}
:root {
/* ** feel free to change this color */
--poiple: #6e00bc;
}
/* ** in private window, put an outline around the page and url bar */
#main-window[privatebrowsingmode="temporary"] #appcontent browser {
border: 1px solid var(--poiple);
}
#main-window[privatebrowsingmode="temporary"] {
--toolbar-field-border-color: var(--poiple) !important;
}
#navigator-toolbox {
padding-bottom: var(--spacing);
transition: width var(--trans);
border: none !important;
border-radius: 0 !important;
}
.titlebar-buttonbox-container {
margin-top: .5rem;
}
#navigator-toolbox {
width: var(--sdb-wdt);
height: var(--toolbox-height);
}
#navigator-toolbox > * {
transition: opacity var(--trans);
}
/* // show toolbar if sidebar is closed (so you can open it with the button) */
#main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox {
--sdb-wdt: var(--sdb-wdt-max);
border-radius: 0 0 var(--br) 0 !important;;
padding: 0 !important;
#PersonalToolbar:not([customizing]){
position: relative;
margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
z-index: 1;
}
#main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox > * {
opacity: 100%;
/* The following properties should allow the themes with trasparent toolbars to work */
background-color: transparent !important;
background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
--uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding));
background-position: top left,top left,var(--lwt-background-alignment,top left);
background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important;
}
/* // hide sidebar button (when sidebar is open)
// closing the sidebar messes up the theme
*/
#main-window:has(#sidebar-box:not([hidden="true"])) #sidebar-button {
display: none;
/* */
}
#main-window:has(#sidebar-box[hidden="true"]) #sidebar-button {
border: 1px solid #fafafaa0;
background: #fafafa20;
border-radius: var(--br);
margin: .25rem !important;;
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
padding-block: var(--uc-bm-padding) !important;
}
#main-window:has(#sidebar-box[hidden="true"]) #appcontent browser {
margin-left: var(--spacing);
#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0));
}
/* ** WINDOWS - make the window buttons less huge
// uncomment if you're on windows.
recomended --wbt-wdt: 7rem
*/
/*
.titlebar-buttonbox {
margin-right: var(--spacing);
border-radius: calc(var(--br) / 2);
max-width: 7.5rem;
justify-content: center;
overflow: clip;
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 100ms !important;
transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0));
}
.titlebar-buttonbox .titlebar-button {
padding: .75rem !important;
}
*/
#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
transform: rotateX(0);
}
.tabbrowser-tab {
visibility: collapse;
}
#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
margin-top: -40px;
margin-right: 137px;
}
.titlebar-button {
height: 40px;
}
/* Uncomment to enable compatibility for multi-row_bookmarks.css */
/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */
/*
#PersonalToolbar:not([customizing]){
position: fixed;
display: block;
margin-bottom: 0px !important;
}
*/
--wbt-wdt: 3.5rem;
margin-top: -2.75rem;
width: calc(var(--sdb-wdt) - var(--wbt-wdt)) !important;
background: none !important;
margin-left: calc(var(--spacing) * -.75);
border: none !important;
box-shadow: none !important;
}
#nav-bar.browser-toolbar {
overflow: visible !important;
height: 3rem;
}
#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(--sdb-wdt) - var(--spacing) * 1.5) !important;
margin-left: calc(var(--spacing) * 1);
height: 2.75rem;
}
#urlbar-background {
border-radius: var(--br) !important;
height: 100%;
}
/* // means when the suggestions list is showing */
#urlbar[breakout-extend="true"] {
padding: 0 !important;
width: calc(var(--sdb-wdt) - var(--spacing) * 1) !important;
margin-left: calc(var(--spacing) * 1.25);
border: 1px solid #fafafa40;
border-radius: var(--br);
box-shadow: 0px 3px 7px #00000030;
}
#main-window[privatebrowsingmode="temporary"] #urlbar[breakout-extend="true"] {
border: 2px solid var(--poiple);
}
#urlbar[breakout-extend="true"] #urlbar-background {
border-radius: var(--br) var(--br) 0 0 !important;
}
.urlbarView {
background: var(--toolbar-field-focus-background-color) !important;
width: calc(100%) !important;
margin-left: 0 !important;
margin-top: -.25rem !important;
box-sizing: border-box;
border-radius: 0 0 var(--br) var(--br);
}
/* ## extras
// feel free to comment or uncomment each setting
I personally would recommend to keep them to keep
stuff cleaner
*/
/* ** hide reader mode button when editing url bar */
#urlbar[breakout-extend="true"] #reader-mode-button {
display: none;
}
/* hide pip mode button when editing url bar */
#urlbar[breakout-extend="true"] #picture-in-picture-button {
display: none;
}
/* ** hide "Shield" icon */
#urlbar:not(:hover) #tracking-protection-icon-container {
width: 0;
overflow: clip;
}
/* ** hide Site information buttons */
#urlbar:not(:hover) #identity-box {
width: 0;
overflow: clip;
}
/* ** hide the "Search with" indicator on the urlbar */
#urlbar-search-mode-indicator { display: none; }
/* ** hide the "Always open in container" button */
#urlbar #pageAction-urlbar-_testpilot-containers {
display: none;
}
/* ** hide Container name */
#userContext-label, #userContext-icons, #userContext-indicator {
display: none;
}
/* ** hide identity box */
#identity-box {
width: 0px;
overflow: hidden;
}
/* ** hide 'open in side view' button*/
#pageAction-urlbar-side-view_mozilla_org {
display: none;
}
'';
};
/*