From 07645a8b84c2b16169555dbf12ccb60321103cb8 Mon Sep 17 00:00:00 2001 From: panotaka Date: Mon, 15 Jan 2024 14:45:07 -0400 Subject: [PATCH] Fix bug in login functionality --- home/applications/browsers/default.nix | 559 ++++++++++++++++++------- 1 file changed, 414 insertions(+), 145 deletions(-) diff --git a/home/applications/browsers/default.nix b/home/applications/browsers/default.nix index 2ae6eed..ce55d0c 100644 --- a/home/applications/browsers/default.nix +++ b/home/applications/browsers/default.nix @@ -45,181 +45,450 @@ "widget.use-xdg-desktop-portal.file-picker" = 1; }; userChrome = '' - /* ty to whoever made the origional "yet another sidebery config" as that is what ive gotten it from */ + /* # arcticfox - userChrome + - under MPL 2.0 + dragon's (very hacky) arc browser-like theme for firefox + ft. sidebery, and userchrome-toggle - /* Sidebery */ - #main-window[titlepreface*="[S] "] .tabbrowser-tab { - visibility: collapse; + !!! 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)); } - #main-window[titlepreface*="[S] "] .titlebar-button { - height: 40px; + /* // 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] "] #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); + /* // 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] "] #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 + { + padding-right: 0; } - #main-window[titlepreface*="[S] "] .titlebar-color { - background-color: var(--toolbar-bgcolor); + #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%; } - #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { - visibility: collapse; + /* // background of the area around the web page */ + .browserStack { + background: var(--bbg); } - /* 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; + #appcontent { + height: 100vh; + /* // offset the web page up to fit the browser height */ + margin-top: calc(var(--toolbox-height) * -1); } - #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] { - direction: rtl; + /* // for the toolbox to not hide in fullscreen */ + #navigator-toolbox[inFullscreen="true"] { + margin-top: 0 !important; } - #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{ - direction: ltr; + /* // reset the web page offset when playing some video in fullscreen */ + #main-window[inDOMFullscreen="true"] #appcontent { + margin-top: 0; } - #sidebar-box[positionend]:-moz-locale-dir(rtl){ - direction: ltr; - } - #sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ - direction: rtl; + #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; } - #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; + /* // remove margin from the dev tools */ + #appcontent .devtools-toolbox-side-iframe { + margin: 0 !important; + } + #appcontent .devtools-toolbox-bottom-iframe { + margin: 0; + border-radius: 0; } - #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); + /* // 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;; } - /* Add sidebar divider and give it background */ - - #sidebar, - #sidebar-header { - background-color: var(--toolbar-bgcolor) !important; - border-inline: 1px solid var(--chrome-content-separator-color); - border-inline-width: 0px 1px; + /* // make find bar fit with theme */ + findbar { + background: var(--bbg) !important; + border: none !important; + padding-top: 0 !important;; } - #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; - } - - /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ - - #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; - } - - /* 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 */ - } - - :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px; } - :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } - - #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; - /* 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; - } - - #PlacesToolbarItems > .bookmark-item, - #OtherBookmarks, - #PersonalToolbar > #import-button{ - padding-block: var(--uc-bm-padding) !important; - } - - #nav-bar:focus-within + #PersonalToolbar{ - transition-delay: 100ms !important; - transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0)); - } - - #navigator-toolbox:hover > #PersonalToolbar{ - transition-delay: 100ms !important; - transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0)); - } - - #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar { - transform: rotateX(0); - } - - .tabbrowser-tab { - visibility: collapse; - } - #nav-bar { - 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; + #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; + /* */ + } + + #sidebar-header { + border: none !important;; + } + + /* // hide the sidebar close button (closing the sidebar messes the theme) */ + #sidebar-header #sidebar-close { + display: none; + } + + #sidebar-box { + padding-right: var(--spacing); + background: var(--bbg) !important; + + min-width: 0px !important; + width: var(--sdb-wdt) !important; + overflow: clip; + transition: width var(--trans); + } + + #sidebar-splitter { + display: none; + } + + #sidebar { + overflow: clip; + /*border-radius: var(--br); */ /* // adds some visual glitches */ + + /* // 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; + z-index: 1; + } + #main-window:has(#sidebar-box[hidden="true"]) #navigator-toolbox > * { + opacity: 100%; + } + + /* // 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;; + } + + #main-window:has(#sidebar-box[hidden="true"]) #appcontent browser { + margin-left: var(--spacing); + } + + /* ** 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; + } + .titlebar-buttonbox .titlebar-button { + padding: .75rem !important; + } + */ + + #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: 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; + } ''; }; /*