From c05cf094272cad516cffb47bf024e95d81e5bc33 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Thu, 23 Nov 2023 18:44:54 -0500 Subject: [PATCH] feat(wip firefox): update to gx 8.6 --- devices/binto/home/hyprland.nix | 11 +- home/firefox/firefox-gx/default.nix | 7 +- home/firefox/firefox-gx/ogx_left-sidebar.css | 515 ------------------- home/firefox/firefox-gx/ogx_menu.css | 364 ++++++------- 4 files changed, 193 insertions(+), 704 deletions(-) delete mode 100644 home/firefox/firefox-gx/ogx_left-sidebar.css diff --git a/devices/binto/home/hyprland.nix b/devices/binto/home/hyprland.nix index 5a82998..38755ac 100644 --- a/devices/binto/home/hyprland.nix +++ b/devices/binto/home/hyprland.nix @@ -1,4 +1,10 @@ -{ pkgs, config, hyprland, osConfig, ... }: let +{ + pkgs, + config, + hyprland, + osConfig, + ... +}: let configDir = config.services.device-vars.configDir; symlink = config.lib.file.mkOutOfStoreSymlink; @@ -25,7 +31,7 @@ in { "swww init --no-cache && swww img -t none ${pkgs.dracula-theme}/wallpapers/waves.png" ]; - source = [ "~/.config/hypr/main.conf" ]; + source = ["~/.config/hypr/main.conf"]; }; }; @@ -46,7 +52,6 @@ in { networkmanagerapplet # TODO: replace with ags widget blueberry # TODO: replace with ags widget - # Hyprland swww xclip diff --git a/home/firefox/firefox-gx/default.nix b/home/firefox/firefox-gx/default.nix index 55fc5bc..1c9c0f4 100644 --- a/home/firefox/firefox-gx/default.nix +++ b/home/firefox/firefox-gx/default.nix @@ -5,10 +5,9 @@ writeText, }: let pname = "firefox-gx"; - version = "8.5"; + version = "8.6"; custom-menu = writeText "menu" "${builtins.readFile ./ogx_menu.css}"; - custom-sidebar = writeText "sidebar" "${builtins.readFile ./ogx_left-sidebar.css}"; in stdenvNoCC.mkDerivation { inherit pname version; @@ -17,7 +16,7 @@ in owner = "Godiesc"; repo = pname; rev = "v.${version}"; - sha256 = "sha256-llffq16PZz5GxkLIJDeWN1d04SCCJFqwCLzOrxgwhYI="; + sha256 = "sha256-AaufMjeK66y/3ymz7TkiIgvtmAvD/pjou7+wVglUFGc="; }; installPhase = '' @@ -29,8 +28,8 @@ in --replace '../images/newtab/wallpaper-dark.png' "$out/chrome/images/newtab/private-dark.png" # TODO: make patch instead + # FIXME: menu is bugged again cp -a ${custom-menu} ./chrome/components/ogx_menu.css - cp -a ${custom-sidebar} ./chrome/components/ogx_left-sidebar.css mkdir -p $out cp -r ./* $out diff --git a/home/firefox/firefox-gx/ogx_left-sidebar.css b/home/firefox/firefox-gx/ogx_left-sidebar.css deleted file mode 100644 index 09b47ef..0000000 --- a/home/firefox/firefox-gx/ogx_left-sidebar.css +++ /dev/null @@ -1,515 +0,0 @@ -/* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text. - https://github.com/Godiesc/firefox-gx */ - -@supports -moz-bool-pref("firefoxgx.left-sidebar") { - -/* ------------------- Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css ------------------- */ - -/* Makes bookmarks toolbar appear vertically at the left side of the window */ - -@-moz-document url(chrome://browser/content/browser.xhtml){ - - :root:not([inDOMFullscreen]){ - --uc-vertical-toolbar-width: 60px; - } - #navigator-toolbox{ position: relative } - #PersonalToolbar{ - position: absolute; - display: flex; - flex-direction: column; - top: 100%; - left: 0; - width: var(--uc-vertical-toolbar-width,0); - min-width: unset !important; - /* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */ - height: 100vh; - max-height: 100vh !important; - padding-bottom: 120px !important; - padding-inline: 0px !important; /* Mi edit */ - } - #PersonalToolbar .toolbarbutton-1{ - max-width: calc(var(--uc-vertical-toolbar-width) - 1px) !important; /* Mi edit - Tamaño horizontal ionos default */ - /*--toolbarbutton-inner-padding: 8px !important; /* Mi edit */ - margin: 0px !important; - } - - #PersonalToolbar toolbaritem{ /* My new code Tamaño horizontal ionos extensiones y marcadores */ - max-width: calc(var(--uc-vertical-toolbar-width) - 1px) !important; - margin: 0px !important; - } - - #OtherBookmarks{ /* My new code - boton OtherBookmarks */ - margin-inline: 0px !important; - } - - #PersonalToolbar #PlacesChevron{ - display: none; - } - #PersonalToolbar > #personal-bookmarks{ - overflow-y: auto; - scrollbar-width: none; - height: 100vh; - } - - #PlacesToolbar, - #PlacesToolbarDropIndicatorHolder{ - flex-direction: column; - } - - #PersonalToolbar #PlacesToolbarItems{ - display: flex !important; - flex-direction: column; - overflow-y: auto; - scrollbar-width: none; - } - #PersonalToolbar > toolbaritem{ - justify-content: center; - } - #PersonalToolbar #PlacesToolbarItems > toolbarseparator{ - height: 7px; - max-width: var(--my-vertical-toolbar-width) !important; /* My code */ - margin-inline: 14px !important; /* My code */ - background-color: var(--general-color) !important; /* My edit */ - background-clip: padding-box; - border-block: 3px solid transparent !important; - } - - #PersonalToolbar #PlacesToolbarItems > .bookmark-item{ - padding-block: 4px !important; - margin-inline: 0 !important; - } - - #browser, - #browser-bottombox, - #main-window > body::after, /* This selector is for compatibility with tabs_below_content.css */ - #customization-container{ - margin-left: var(--uc-vertical-toolbar-width,0); - } - :root:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body > #browser, - :root:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body > #browser-bottombox, - #main-window:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body::after, - :root:is([chromehidden~="toolbar"],[sizemode="fullscreen"]) > body > #customization-container{ - margin-left: 0; - } - /* You should probably disable this if you have Firefox < 113 */ - #PersonalToolbar #PlacesToolbarItems{ - display: -webkit-box !important; - -webkit-box-orient: vertical !important; - } -} - -/* ------------------------------------------------------- My Code to Adapt to GX Style ------------------------------------------------------- */ - - :root { - --uc-vertical-toolbar-width: var(--my-vertical-toolbar-width) !important; /* Nuevo tamaño sidebar */ - --padding-left-tab: calc(var(--uc-vertical-toolbar-width) - 1px) !important; /* Nuevo tamaño botón "Menú" */ - } - -/* Margen izquierda pestañas cuando se muestra la menu-bar */ - - #toolbar-menubar, #toolbar-menubar[autohide="false"]+#TabsToolbar { - padding-left: var(--padding-left-tab) !important; - } - -/* Mover nav-bar a la derecha */ - - :root:not([chromehidden~="toolbar"], [sizemode="fullscreen"]) #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child{ - margin-left: var(--uc-vertical-toolbar-width,0) !important; - } - -/* Posición y estilo de la barra lateral izquierda de marcadores */ - -:root:not([chromehidden~="toolbar"]) #PersonalToolbar { - --toolbar-bgcolor: transparent !important; - --toolbarbutton-hover-background: transparent !important; - --toolbarbutton-active-background: transparent !important; - --toolbarbutton-hover-personal: transparent !important; - --toolbarbutton-icon-fill: var(--general-color) !important; - --toolbarbutton-border-radius: 0px !important; - --padding-top-left-sidebar: 96px !important; - --padding-bottom-left-sidebar: 101px !important; - --height-left-sidebar: calc(100vh - 1px + var(--toolbar-height-personal) + var(--tab-height-personal)*2 + var(--windowed-top-padding, 0px)) !important; - - height: var(--height-left-sidebar) !important; - max-height: var(--height-left-sidebar) !important; - background-color: var(--lwt-frame) !important; - background-image: inherit !important; - background-size: cover !important; - - /* margen top-bottom de los iconos */ - padding-top: var(--padding-top-left-sidebar) !important; - padding-bottom: var(--padding-bottom-left-sidebar) !important; - - /* Linea Gradiente */ - margin-top: calc( -1px - var(--toolbar-height-personal) - var(--tab-height-personal) * 2 - var(--windowed-top-padding, 0px)) !important; - border-right: 1px solid transparent !important; - border-image: linear-gradient(to bottom, transparent calc(var(--tab-height-personal)*2 + var(--windowed-top-padding, 0px) + 1px), - var(--general-color) calc(var(--tab-height-personal)*2 + var(--windowed-top-padding, 0px) + 1px), - var(--button-active-bgcolor) 42%, var(--lwt-frame) 94%) 1 !important; - } - -/* Linea gradiente -touch mode- */ - - :root[uidensity="touch"]:not([chromehidden~="toolbar"]) #PersonalToolbar { - border-image: linear-gradient(to bottom, transparent calc(var(--tab-height-personal)*2 + var(--windowed-top-padding, 0px) - 1px), - var(--general-color) calc(var(--tab-height-personal)*2 + var(--windowed-top-padding, 0px) - 1px), var(--button-active-bgcolor) 42%, var(--lwt-frame) 94%) 1 !important; - } - -/* Quitar label de items de la barra laterar */ - - #personal-bookmarks .bookmark-item>.toolbarbutton-text, #import-button label { - display: none !important; - } - - /* Quita tambien el espacio despues del ícono - sirve para centrar */ - #PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]), /* Marcadores */ - #OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon, /* OtrosMarcadores */ - #bookmarks-toolbar-placeholder > .toolbarbutton-icon{ /* MArcadores en customization mode*/ - margin-inline: 0px !important; - } - -/* Firefox view icon */ - - toolbar:is(#PersonalToolbar) #firefox-view-button[aria-pressed="true"] .toolbarbutton-icon { - border-radius: 3px !important; - } - - #firefox-view-button image { - list-style-image: url("../images/firefoxview-close.svg") !important; - } - - #firefox-view-button[aria-pressed="false"]:active .toolbarbutton-icon{ - list-style-image: url("../images/firefoxview-close.svg") !important; - transition-duration: 250ms !important; - } - - #firefox-view-button[aria-pressed="true"]:not(:active) .toolbarbutton-icon{ - list-style-image: url("../images/firefoxview-open.svg") !important; - transition-duration: 350ms !important; - } - -/* Zoom on :hover items */ - - /* animación */ - @keyframes scale5{ - 0%{ transform:scale(0.8) } - /*98%{ transform:scale(1.1) }*/ - 100%{ transform:scale(1) }} - - /* Normal */ - #PersonalToolbar .toolbarbutton-1:not(:hover,[open="true"], :active) .toolbarbutton-icon, /* Botones default y extensiones */ - #PersonalToolbar #PlacesToolbarItems>.bookmark-item:not(:hover,[open="true"], :active)>.toolbarbutton-icon, /* Botones de marcadores */ - #PersonalToolbar #OtherBookmarks:not(:hover,[open="true"], :active) .toolbarbutton-icon{ /* Boton - OtrosMarcadores */ /* Boton - OtrosMarcadores */ - transform: scale(1.0) !important; - transition: ease-in-out !important; - transition-duration: 200ms !important; - } - - /* :hover */ - #PersonalToolbar .toolbarbutton-1:hover:not([open="true"],:active) .toolbarbutton-icon, - #PersonalToolbar #PlacesToolbarItems>.bookmark-item:is(:hover):not([open="true"],:active)>.toolbarbutton-icon, - #PersonalToolbar #OtherBookmarks:is(:hover):not([open="true"],:active) .toolbarbutton-icon{ - transform: scale(1.12) !important; - transition: ease-in-out !important; - transition-duration: 50ms !important; - } - - /* Active */ - #PersonalToolbar .toolbarbutton-1:is(:active):not([open="true"]) .toolbarbutton-icon, - #PersonalToolbar #PlacesToolbarItems>.bookmark-item:is(:active):not([open="true"])>.toolbarbutton-icon, - #PersonalToolbar #OtherBookmarks:is(:active):not([open="true"]) .toolbarbutton-icon{ - animation: scale5 ease-in-out 250ms !important; - } - - /* [open] */ - #PersonalToolbar .toolbarbutton-1:is([open]) .toolbarbutton-icon , - #PersonalToolbar #PlacesToolbarItems>.bookmark-item:is([open])>.toolbarbutton-icon, - #PersonalToolbar #OtherBookmarks:is([open]) image{ - animation: scale5 ease-in-out 250ms !important; - } - - /* [open] marcadores - más tiempo - #PersonalToolbar #PlacesToolbarItems>.bookmark-item:is([open])>.toolbarbutton-icon, - #PersonalToolbar #OtherBookmarks:is([open]) .toolbarbutton-icon{ - transform: scale(1.0) !important; - transition: ease-in-out !important; - transition-duration: 250ms !important; - } */ - -/* Tamaño vertical de Items de la barra lateral */ - - #PersonalToolbar .toolbarbutton-1, - #PersonalToolbar #PlacesToolbarItems>.bookmark-item{ /* Botones de marcadores */ - margin-block: 10px !important; - /*background-color: blue !important;/**/ - } - -/* Efecto clic botones default y extensiones - - @keyframes scale-up-center1{ - 0%{ background-color: color-mix(in srgb, transparent 88%, var(--lwt-tab-text)); - border-radius: 50%; - width: 22px; - height: 22px;} - 60%{ background-color: color-mix(in srgb, transparent 96%, var(--lwt-tab-text)); - border-radius: 10%; - width: calc(var(--my-vertical-toolbar-width) + 0px); - height: 32px;} - 100%{ background-color: transparent; - border-radius: 0%; - width: calc(var(--my-vertical-toolbar-width) + 20px);}} - - #PersonalToolbar .toolbarbutton-1:is([open],:active)::after{ - content: ""; display: -moz-box; position: absolute !important; - align-self: center !important; - background-color: transparent; - border-radius: 0px; - animation: scale-up-center1 550ms !important; - }*/ - -/* Separador usando "espacio flexible" */ - - #PersonalToolbar toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"], #PersonalToolbar toolbarspring { - background: var(--general-color) !important; - width: calc(var(--my-vertical-toolbar-width) - 29px) !important; - min-width: 0px !important; - min-height: 1px !important; - max-height: 1px !important; - margin-inline: 14px !important; - margin-block: 6px !important; - } - -/* ######################################## items en modo "customize toolbar ######################################## */ - -/* Separador espacio flexible in customize mode */ - - #PersonalToolbar toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"] { - min-width: calc(var(--my-vertical-toolbar-width) - 20px) !important; - min-height: 4px !important; - max-height: 4px !important; - margin-inline-start: 10px !important; - } - -/* Quita el contador y bug de espacio flexible, in customize mode */ - - #PersonalToolbar toolbarpaletteitem[place="toolbar"] > toolbarspring, - #PersonalToolbar toolbarpaletteitem[place="toolbar"] toolbaritem toolbarbutton .toolbarbutton-badge{ - display: none !important; - } - -/* Alinear items in customize mode */ - - #PersonalToolbar toolbarpaletteitem[place="toolbar"] { - justify-content: center !important; - } - - -/* ################################################### Extensiones ################################################## */ - -/* Ocultar contador cuando este es "0" */ - -toolbaritem toolbarbutton[badge="0"]:not(:hover) .toolbarbutton-badge { opacity: 0 !important; } - -/* Contador de la extension */ - -#PersonalToolbar .toolbarbutton-badge { - background-color: var(--button-hover-bgcolor) !important; - color: white !important; - margin-inline-end: -9px !important; - margin-block-end: -4px !important; - min-width: auto !important; - max-width: auto !important; - align-self: end !important; -} - -/* Tamaño más grande para las extensiones ssociales puestas en la barra lateral */ - -#PersonalToolbar #_d3d2a327-1ae0-4fd6-b732-0844d0b7fd4c_-BAP image, -#PersonalToolbar #xrst_vardakis_gmail_com-BAP image, -#PersonalToolbar #_34a257f3-adfe-460d-b6ca-7dd18d18506b_-BAP image, -#PersonalToolbar #_14390478-b41b-4e29-8307-8a3c714f7783_-BAP image, -#PersonalToolbar #ublock0_raymondhill_net-BAP image, -#PersonalToolbar #panorama-tab-groups_example_com-BAP image, -#PersonalToolbar #_a16c3799-d903-44e3-b044-a032197f5ef8_-BAP image, -#PersonalToolbar #_3119ae66-3c2f-47e2-b1b1-1c76cb9c4ec1_-BAP image { - height: 18px !important; - width: 18px !important; -} - -/* Twitch Extension */ -#PersonalToolbar #_d3d2a327-1ae0-4fd6-b732-0844d0b7fd4c_-BAP { list-style-image: url("../images/logo_twitch.svg") !important; } - -/* Messenger Extension */ -#PersonalToolbar #xrst_vardakis_gmail_com-BAP { list-style-image:url("../images/logo_messenger.svg") !important; } - -/* Whatsapp Extension */ -#PersonalToolbar #_34a257f3-adfe-460d-b6ca-7dd18d18506b_-BAP{ list-style-image: url("../images/logo_whatsapp.svg") !important; } - -/* Telegram Extension */ -#PersonalToolbar #_14390478-b41b-4e29-8307-8a3c714f7783_-BAP{ list-style-image: url("../images/logo_telegram.svg") !important; } - -/* ublock Extension */ -#PersonalToolbar #ublock0_raymondhill_net-BAP{ list-style-image: url("../images/logo_ublock.svg") !important; } - -/* Tab-group Extension */ -#PersonalToolbar #panorama-tab-groups_example_com-BAP{ list-style-image: url("../images/logo_grouptabs.svg") !important; } - -/* Discord Extension */ -#PersonalToolbar #_a16c3799-d903-44e3-b044-a032197f5ef8_-BAP{ list-style-image: url("../images/logo_discord.svg") !important; } - -/* Twitter Extension */ -#PersonalToolbar #_3119ae66-3c2f-47e2-b1b1-1c76cb9c4ec1_-BAP{ list-style-image: url("../images/logo_twitter.svg") !important; } - -/* ------------------------ Colored folders for bookmarks ------------------------ */ - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+1) > .toolbarbutton-icon { - list-style-image: url("../images/folder1.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+2) > .toolbarbutton-icon { - list-style-image: url("../images/folder2.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+3) > .toolbarbutton-icon { - list-style-image: url("../images/folder3.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+4) > .toolbarbutton-icon { - list-style-image: url("../images/folder4.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+5) > .toolbarbutton-icon { - list-style-image: url("../images/folder5.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+6) > .toolbarbutton-icon { - list-style-image: url("../images/folder6.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+7) > .toolbarbutton-icon { - list-style-image: url("../images/folder7.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+8) > .toolbarbutton-icon { - list-style-image: url("../images/folder8.svg") !important; -} - -#PlacesToolbarItems > .bookmark-item:nth-of-type(9n+9) > .toolbarbutton-icon { - list-style-image: url("../images/folder9.svg") !important; -} - -/* Carpeta "Otros Marcadores" */ - -#OtherBookmarks > .toolbarbutton-icon{ - list-style-image: url("../images/folder-otherbookmarks.svg") !important; -} - - -/* ##################################################### Nuevos margenes Botón menú ##################################################### */ - -:root { - --margin-left-icons-personal: calc(var(--my-vertical-toolbar-width) / 2 - 16px) !important; /* Nuevo margen-left de íconos del -menu- */ - --margin-right-icons-personal: 8px !important; /* Nuevo margen-right de íconos del -menu- */ - } - - /* Quitar label -Menu- del menú not [open] */ - -@media (-moz-platform: windows), (-moz-platform: linux) { - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button:not([open])>stack::after { - content: none !important; - } - - :root:not([chromehidden~="toolbar"]):is([sizemode="normal"], [sizemode="fullscreen"]) #PanelUI-menu-button:is([open])>stack::after { - content: none !important; - } - -} - -/* Tamaño nuevo botón Menú */ -@media (-moz-platform: windows), (-moz-platform: linux) { - - -/* Logo más grande */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button image { - min-height: 20px !important; - min-width: 20px !important; - } - -/* Logo alineado */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button image { - margin-inline-start: calc(var(--margin-left-icons-personal) - 2px) !important; - } - -/* Label Menú */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button>stack::after { - padding-inline-start: calc(var(--margin-right-icons-personal) - 2px) !important; - } - -/* Menu :hover */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button:not([open]):hover>.toolbarbutton-badge-stack { - background-color: color-mix(in srgb, var(--general-color) 15%, transparent) !important; - } -} - -/* ########################################### Baner de -actualización disponible- ########################################### */ - -@keyframes slide1 { - from { transform: rotate(0deg) } - to { transform: rotate(360deg); } - } - -#PanelUI-menu-button[badge-status="update-available"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, -#PanelUI-menu-button[badge-status="update-downloading"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, -#PanelUI-menu-button[badge-status="update-manual"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, -#PanelUI-menu-button[badge-status="update-other-instance"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, -#PanelUI-menu-button[badge-status="update-restart"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, -#PanelUI-menu-button[badge-status="update-unsupported"]>.toolbarbutton-badge-stack>.toolbarbutton-badge { - display: none !important; -} - -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="update-available"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="update-downloading"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="update-manual"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="update-other-instance"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="update-restart"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="update-unsupported"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="addon-alert"]:not([open]) .toolbarbutton-badge-stack, -:root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[badge-status="fxa-needs-authentication"]:not([open]) .toolbarbutton-badge-stack { - list-style-image: url("../images/foxFill.svg") !important; - fill: var(--general-color) !important; - animation: 2000ms infinite ease; - animation-name: slide1; - margin-inline: 0px !important; - border-radius: 50% !important; -} - -/* Compatibilidad para extension */ - -#sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) { - border-right: 1px solid var(--border-contrast-color); - box-shadow: none !important; - border-image: none !important; -} - -/* Nueva posición de Paneles [open] de left-sidebar - - #PlacesToolbarItems > .bookmark-item > menupopup, #OtherBookmarks #OtherBookmarksPopup { - margin-inline-start: calc(var(--padding-left-tab) - 2px) !important; - margin-top: -56px !important; - } - - #PersonalToolbar>toolbarbutton>menupopup { - margin-right: calc(var(--padding-left-tab) - 10px) !important; - margin-top: -39px !important; - } - - #customizationui-widget-panel { - margin-right: calc(var(--padding-left-tab) - 9px) !important; - margin-top: -39px !important; - } -*/ -} diff --git a/home/firefox/firefox-gx/ogx_menu.css b/home/firefox/firefox-gx/ogx_menu.css index 8e275ac..787b3e4 100644 --- a/home/firefox/firefox-gx/ogx_menu.css +++ b/home/firefox/firefox-gx/ogx_menu.css @@ -1,182 +1,182 @@ -/* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text. - https://github.com/Godiesc/firefox-gx */ - -@media (-moz-platform: windows), (-moz-platform: linux) { - :root { - --label-color: color-mix(in srgb, var(--arrowpanel-color, var(--lwt-tab-text))80%, var(--Button-background-personal)); - --margin-left-icons-personal: 3px !important; - --margin-right-icons-personal: 6px !important; - } - -/* ------------Menú hamburguesa-> top-left ------------- */ - -/*Posición*/ - - :root:not([chromehidden~="toolbar"]) #PanelUI-button { - position: fixed; - display: flex; - top: var(--windowed-top-padding, 0px); - left: 0px !important; - z-index: 2 !important; - } - -/* Tamaño menu [Open] - ventana maximizada y no maximizada*/ - - - #appMenu-popup panelview { - width: 25.5em !important; - } - -/* Ocultar botón menú en modo "pantalla completa" */ - - :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#browser, :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#browser-bottombox, - :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#customization-container { - z-index: 3 !important; - } - -/* margen izquierda pestañas*/ - - :root:not([chromehidden~="toolbar"]) #toolbar-menubar, :root:not([chromehidden~="toolbar"]) #toolbar-menubar[autohide="true"]+#TabsToolbar { - padding-inline-start: var(--padding-left-tab) !important; - } - -/* tamaño botón Menú */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button { - padding: var(--margin-top-personal) 0 0 0 !important; - max-height: calc(var(--tab-height-personal)) !important; - min-height: calc(var(--tab-height-personal)) !important; - } - -/* menu :hover y open */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button>.toolbarbutton-badge-stack { - max-height: calc(var(--tab-height-personal)) !important; - min-height: calc(var(--tab-height-personal)) !important; - } - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button:not([open]):hover>.toolbarbutton-badge-stack { - background-color: var(--toolbarbutton-hover-personal) !important; - border-radius: 0px !important; - } - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open]>.toolbarbutton-badge-stack { - background-image: var(--noise-urlbar-personal, var(--noise-urlbar-personal, none)), - linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background)), - linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background)) !important; - border-radius: 0px !important; - border-image: var(--panel-separator-zap-gradient5) 1 !important; - width: 28.5em !important; - } - -/* Logo */ - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button .toolbarbutton-badge-stack { - list-style-image: url("../images/foxmenu.svg") !important; - display: -moz-box !important; - max-height: var(--tab-height-personal) !important; - min-width: var(--padding-left-tab) !important; - max-width: var(--padding-left-tab) !important; - -moz-box-pack: center !important; - fill: var(--general-color) !important; - border: 1px solid transparent !important; - } - - :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button image { - margin-top: -1px !important; - min-height: 18px !important; - min-width: 18px !important; - margin-inline-start: 2px !important; - } - - -/* Padding top para hacer espacio para la fila del Label menú */ - - -/* Margin top para subir el menú [open] */ - - -/* Separadores */ - - :root:not([chromehidden~="toolbar"]) #appMenu-popup.cui-widget-panel toolbarseparator { - margin-inline-start: 30px !important; - --panel-separator-margin-vertical: 2px !important; - --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal) !important; - } - -/* zoom icons */ - -#appMenu-zoomReduce-button2 > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon{ - margin-inline: -4px !important; -} - -/* Separadores */ - - :root:not([chromehidden~="toolbar"]) #appMenu-popup.cui-widget-panel toolbarseparator { - margin-inline-start: 30px !important; - --panel-separator-margin-vertical: 2px !important; - --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal) !important; - } - -/* Color de íconos y label */ - - .subviewbutton:not([disabled]), #appMenu-popup toolbarbutton:not([disabled]) .toolbarbutton-text label { - -moz-context-properties: fill; - fill: var(--label-color) !important; - color: var(--label-color) !important; - } - -/* baner de -actualización disponible- */ - - #appMenu-popup .panel-banner-item:not([disabled]), #appMenu-popup .addon-banner-item:not([disabled]) { - background: var(--button-bgcolor) !important; - } - - #appMenu-popup .panel-banner-item:not([disabled]):hover, #appMenu-popup .addon-banner-item:not([disabled]):hover { - background: var(--button-active-bgcolor) !important; - } - -/* circulo de notificación de actualización */ - - #PanelUI-menu-button[badge-status="update-available"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, - #PanelUI-menu-button[badge-status="update-downloading"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, - #PanelUI-menu-button[badge-status="update-manual"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, - #PanelUI-menu-button[badge-status="update-other-instance"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, - #PanelUI-menu-button[badge-status="update-restart"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, - #PanelUI-menu-button[badge-status="update-unsupported"]>.toolbarbutton-badge-stack>.toolbarbutton-badge { - box-shadow: none; - margin: -7px -3px 0px !important; - margin-inline-end: -7px !important; - } - - .panel-banner-item::before { - background: url("../images/foxFill.svg") no-repeat center/16px; - content: ""; - display: block; - width: 16px; - height: 16px; - margin-inline-end: 7px; - -moz-context-properties: fill; - fill: #3ad3a2 !important; - } - - #appMenu-popup .panel-banner-item { - margin: 0 0px 2px !important; - padding-inline-start: 8px !important; - border-radius: 0px !important; - } - -/* ---------------------------------------- Config para alinear íconos en el menú de hamburguesa ------------------------------------------- */ - -/* Sobreescribir nuevo Tamaño y margen de los íconos - Trick para aplicar margen nuevo solo al menu hamburguesa maximizado */ - - - -/* Menú más pequeño en linux*/ - -@media (-moz-platform: linux) { - :root { - --margin-left-icons-personal: 9px !important; - } - -} +/* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text. + https://github.com/Godiesc/firefox-gx */ + +@media (-moz-platform: windows), (-moz-platform: linux) { + :root { + --label-color: color-mix(in srgb, var(--arrowpanel-color, var(--lwt-tab-text))80%, var(--Button-background-personal)); + --margin-left-icons-personal: 3px !important; + --margin-right-icons-personal: 6px !important; + } + +/* ------------Menú hamburguesa-> top-left ------------- */ + +/*Posición*/ + + :root:not([chromehidden~="toolbar"]) #PanelUI-button { + position: fixed; + display: flex; + top: var(--windowed-top-padding, 0px); + left: 0px !important; + z-index: 2 !important; + } + +/* Tamaño menu [Open] - ventana maximizada y no maximizada*/ + + + #appMenu-popup panelview { + width: 25.5em !important; + } + +/* Ocultar botón menú en modo "pantalla completa" */ + + :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#browser, :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#browser-bottombox, + :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])>body>#customization-container { + z-index: 3 !important; + } + +/* margen izquierda pestañas*/ + + :root:not([chromehidden~="toolbar"]) #toolbar-menubar, :root:not([chromehidden~="toolbar"]) #toolbar-menubar[autohide="true"]+#TabsToolbar { + padding-inline-start: var(--padding-left-tab) !important; + } + +/* tamaño botón Menú */ + + :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button { + padding: var(--margin-top-personal) 0 0 0 !important; + max-height: calc(var(--tab-height-personal)) !important; + min-height: calc(var(--tab-height-personal)) !important; + } + +/* menu :hover y open */ + + :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button>.toolbarbutton-badge-stack { + max-height: calc(var(--tab-height-personal)) !important; + min-height: calc(var(--tab-height-personal)) !important; + } + + :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button:not([open]):hover>.toolbarbutton-badge-stack { + background-color: var(--toolbarbutton-hover-personal) !important; + border-radius: 0px !important; + } + + :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button[open]>.toolbarbutton-badge-stack { + background-image: var(--noise-urlbar-personal, var(--noise-urlbar-personal, none)), + linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background)), + linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background)) !important; + border-radius: 0px !important; + border-image: var(--panel-separator-zap-gradient5) 1 !important; + width: 28.5em !important; + } + +/* Logo */ + + :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button .toolbarbutton-badge-stack { + list-style-image: url("../images/foxmenu.svg") !important; + display: -moz-box !important; + max-height: var(--tab-height-personal) !important; + min-width: var(--padding-left-tab) !important; + max-width: var(--padding-left-tab) !important; + -moz-box-pack: center !important; + fill: var(--general-color) !important; + border: 1px solid transparent !important; + } + + :root:not([chromehidden~="toolbar"]) #PanelUI-menu-button image { + margin-top: -1px !important; + min-height: 18px !important; + min-width: 18px !important; + margin-inline-start: 2px !important; + } + + +/* Padding top para hacer espacio para la fila del Label menú */ + + +/* Margin top para subir el menú [open] */ + + +/* Separadores */ + + :root:not([chromehidden~="toolbar"]) #appMenu-popup.cui-widget-panel toolbarseparator { + margin-inline-start: 30px !important; + --panel-separator-margin-vertical: 2px !important; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal) !important; + } + +/* zoom icons */ + +#appMenu-zoomReduce-button2 > .toolbarbutton-icon, #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon{ + margin-inline: -4px !important; +} + +/* Separadores */ + + :root:not([chromehidden~="toolbar"]) #appMenu-popup.cui-widget-panel toolbarseparator { + margin-inline-start: 30px !important; + --panel-separator-margin-vertical: 2px !important; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal) !important; + } + +/* Color de íconos y label */ + + .subviewbutton:not([disabled]), #appMenu-popup toolbarbutton:not([disabled]) .toolbarbutton-text label { + -moz-context-properties: fill; + fill: var(--label-color) !important; + color: var(--label-color) !important; + } + +/* baner de -actualización disponible- */ + + #appMenu-popup .panel-banner-item:not([disabled]), #appMenu-popup .addon-banner-item:not([disabled]) { + background: var(--button-bgcolor) !important; + } + + #appMenu-popup .panel-banner-item:not([disabled]):hover, #appMenu-popup .addon-banner-item:not([disabled]):hover { + background: var(--button-active-bgcolor) !important; + } + +/* circulo de notificación de actualización */ + + #PanelUI-menu-button[badge-status="update-available"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, + #PanelUI-menu-button[badge-status="update-downloading"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, + #PanelUI-menu-button[badge-status="update-manual"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, + #PanelUI-menu-button[badge-status="update-other-instance"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, + #PanelUI-menu-button[badge-status="update-restart"]>.toolbarbutton-badge-stack>.toolbarbutton-badge, + #PanelUI-menu-button[badge-status="update-unsupported"]>.toolbarbutton-badge-stack>.toolbarbutton-badge { + box-shadow: none; + margin: -7px -3px 0px !important; + margin-inline-end: -7px !important; + } + + .panel-banner-item::before { + background: url("../images/foxFill.svg") no-repeat center/16px; + content: ""; + display: block; + width: 16px; + height: 16px; + margin-inline-end: 7px; + -moz-context-properties: fill; + fill: #3ad3a2 !important; + } + + #appMenu-popup .panel-banner-item { + margin: 0 0px 2px !important; + padding-inline-start: 8px !important; + border-radius: 0px !important; + } + +/* ---------------------------------------- Config para alinear íconos en el menú de hamburguesa ------------------------------------------- */ + +/* Sobreescribir nuevo Tamaño y margen de los íconos - Trick para aplicar margen nuevo solo al menu hamburguesa maximizado */ + + + +/* Menú más pequeño en linux*/ + +@media (-moz-platform: linux) { + :root { + --margin-left-icons-personal: 9px !important; + } + +}