diff --git a/.config/browser/chrome/night-lake.jpg b/.config/browser/chrome/night-lake.jpg new file mode 100644 index 00000000..71c51205 Binary files /dev/null and b/.config/browser/chrome/night-lake.jpg differ diff --git a/.config/browser/chrome/old-userChrome.css b/.config/browser/chrome/old-userChrome.css new file mode 100644 index 00000000..a4077e53 --- /dev/null +++ b/.config/browser/chrome/old-userChrome.css @@ -0,0 +1,992 @@ +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +* { + /*--tab-corner-rounding: 5px;*/ + --animation-speed: 0.4s; + --button-corner-rounding: 10px; + --urlbar-container-height: 40px !important; + --urlbar-min-height: 30px !important; + --urlbar-height: 30px !important; + --urlbar-toolbar-height: 38px !important; + --moz-hidden-unscrollable: scroll !important; + --toolbarbutton-border-radius: 3px !important; + --tabs-border-color: transparent; +} + +#TabsToolbar .tabbrowser-tab, +#TabsToolbar .tabbrowser-tab .tab-stack, +#TabsToolbar .tabbrowser-tab .tab-background, +#TabsToolbar .tabbrowser-tab .tab-content { + border-top-left-radius: 10px !important; + border-top-right-radius: 10px !important; + border-bottom-left-radius: 10px !important; + border-bottom-right-radius: 10px !important; + margin-top: 0px; + max-height: 36px !important; + text-align: center; +} + +#TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: none !important; +} + +.tab-background, +.tab-stack { + min-height: 36px !important; +} + +.tab-background { + margin-block: 0 0 !important; +} + +.tabbrowser-tab { + min-height: 36px !important; +} + +#TabsToolbar:hover { + background: transparent; +} + +#star-button[starred], +#star-button { + display: none !important; +} + +#bookmarks-menu-button toolbarbutton { + visibility: collapse !important; +} + +/* multi tab selection */ +#tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + outline-color: var(--toolbarseparator-color) !important; +} + +.tab-line { + display: none; +} + +#urlbar[breakout][breakout-extend], +#urlbar[breakout][breakout-extend-disabled][open] { + /* The z-index needs to be big enough to trump other positioned UI pieces + that we want to overlay. 3 is used in the tab bar. */ + z-index: 3; + height: var(--urlbar-height) !important; +} + +#urlbar-search-button { + margin-left: 5px; +} + +/* Hide the »Go«-arrow in the URL Bar */ +#urlbar-go-button { + display: none !important; +} + +/* #page-action-buttons > :not(#urlbar-zoom-button) { display: none !important; } */ + +tab:not(:active) .tab-background { + transition: background-color var(--animation-speed) !important; +} + +#back-button, +#forward-button { + display: none !important; +} + +.titlebar-buttonbox-container { + display: none !important; +} + +#pageActionButton { + display: none !important; +} + +#PanelUI-menu-button { + padding: 0px !important; +} + +#PanelUI-menu-button .toolbarbutton-icon { + width: 1px !important; +} + +#PanelUI-menu-button .toolbarbutton-badge-stack { + padding: 0px !important; +} + +/*---+---+---+---+---+---+---+ + | T | A | B | — | B | A | R | + +---+---+---+---+---+---+---*/ +/* multi tab selection */ +#tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + outline-color: var(--toolbarseparator-color) !important; +} + +/* tab close button options */ +.tabbrowser-tab:not([pinned]) .tab-close-button { + display: var(--show-tab-close-button) !important; +} + +.tabbrowser-tab:not([pinned]):hover .tab-close-button { + display: var(--show-tab-close-button-hover) !important; +} + +/* adaptive tab width */ +.tabbrowser-tab[selected][fadein]:not([pinned]) { + max-width: var(--uc-active-tab-width) !important; +} + +.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { + max-width: var(--uc-inactive-tab-width) !important; +} + +/* container tabs indicator */ +.tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-background + > .tab-context-line { + margin: -1px var(--container-tabs-indicator-margin) 0 + var(--container-tabs-indicator-margin) !important; + height: 1px !important; + + box-shadow: var(--uc-identity-glow) var(--identity-tab-color) !important; +} + +/* show favicon when media is playing but tab is hovered */ +.tab-icon-image:not([pinned]) { + opacity: 1 !important; +} + +/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ +.tab-icon-overlay:not([crashed]), +.tab-icon-overlay[pinned][crashed][selected] { + top: 5px !important; + z-index: 1 !important; + + padding: 1.5px !important; + inset-inline-end: -8px !important; + width: 16px !important; + height: 16px !important; + + border-radius: 10px !important; +} + +/* style and position speaker icon */ +.tab-icon-overlay:not([sharing], [crashed]):is( + [soundplaying], + [muted], + [activemedia-blocked] + ) { + stroke: transparent !important; + background: transparent !important; + opacity: 1 !important; + fill-opacity: 0.8 !important; + + color: currentColor !important; + + stroke: var(--toolbar-bgcolor) !important; + background-color: var(--toolbar-bgcolor) !important; +} + +/* change the colours of the speaker icon on active tab to match tab colours */ +.tabbrowser-tab[selected] + .tab-icon-overlay:not([sharing], [crashed]):is( + [soundplaying], + [muted], + [activemedia-blocked] + ) { + stroke: var(--toolbar-bgcolor) !important; + background-color: var(--toolbar-bgcolor) !important; + box-shadow: 3px 3px 1px 1px #181926; +} + +.tab-icon-overlay:not([pinned], [sharing], [crashed]):is( + [soundplaying], + [muted], + [activemedia-blocked] + ) { + margin-inline-end: 9.5px !important; +} + +.tabbrowser-tab:not([image]) + .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + top: 0 !important; + + padding: 0 !important; + margin-inline-end: 5.5px !important; + inset-inline-end: 0 !important; +} + +.tab-icon-overlay:not([crashed])[soundplaying]:hover, +.tab-icon-overlay:not([crashed])[muted]:hover, +.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: currentColor !important; + stroke: var(--toolbar-color) !important; + background-color: var(--toolbar-color) !important; + fill-opacity: 0.95 !important; +} + +.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover, +.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover, +.tabbrowser-tab[selected] + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: currentColor !important; + stroke: var(--toolbar-color) !important; + background-color: var(--toolbar-color) !important; + fill-opacity: 0.95 !important; + box-shadow: 3px 3px 1px 1px #181926; +} + +/* speaker icon colour fix */ +#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying], +#TabsToolbar .tab-icon-overlay:not([crashed])[muted], +#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { + color: var(--toolbar-color) !important; +} + +/* speaker icon colour fix on hover */ +#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover, +#TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover, +#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: var(--toolbar-bgcolor) !important; +} + +:root { + /* Allow tabs to have dynamic widths based on + * the Tab Bars maximum width + */ + --uc-active-tab-width: clamp(50px, 25vw, 200px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); + + /* Enable this to always show the Tab Close button + * possible values: + * show: -moz-inline-block + * hide: none + */ + --show-tab-close-button: none; + + /* Enable this to only show the Tab Close button on tab hover + * possible values: + * show: -moz-inline-block + * hide: none + */ + --show-tab-close-button-hover: none; + + /* Hide the all Tabs button from the Tab Bar + * possible values: + * show: -moz-box + * hide: none + */ + --uc-show-all-tabs-button: none; + + /* Left and Right "dip" of the container indicator + * 0px equals tab width + * higer values make the indicator smaller + */ + --container-tabs-indicator-margin: 10px; + + /* Amount of Glow to add to the container indicator + * Setting it to 0 disables the Glow + */ + --uc-identity-glow: 0 1px 10px 1px; + + font-family: "JetBrainsMono NF"; +} + +:root:not([customizing]) :hover > .tabbrowser-tab:not(:hover) { + transition: + blur, + ease 0.5s !important; + --uc-active-tab-width: clamp(100px, 30vw, 300px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); +} + +:root:not([customizing]) :not(:hover) > .tabbrowser-tab { + transition: + blur, + ease 0.2s !important; + --uc-active-tab-width: clamp(100px, 30vw, 300px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); +} + +#tabbrowser-tabs .tab-label-container[customizing] { + color: transparent; + transition: ease 0.5s; + transition-delay: 3s; +} + +:root[uidensity="compact"] { + --tab-min-height: 38px !important; + --uc-active-tab-width: clamp(100px, 30vw, 300px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); +} + +tab:not([selected]):hover .tab-background { + background-color: var( + --toolbarbutton-hover-background, + rgba(182, 182, 182, 0.11) + ) !important; +} + +.tab-close-button { + list-style-image: url("active_close.png"); + border-radius: 10px; + transition: list-style-image var(--animation-speed) ease-out !important; +} + +.tab-close-button:hover { + list-style-image: url("mouseover_close.png"); +} + +#navigator-toolbox::after { + display: none !important; +} + +.titlebar-button { + padding-left: 10px !important; + padding-right: 15px !important; + padding-top: 10px !important; +} + +#urlbar { + /*border-radius: calc(1px + var(--button-corner-rounding)) !important;*/ + height: 30px; + margin-left: 5px; +} + +#urlbar-container *:not(#identity-box) { + border-color: transparent !important; +} + +#pageActionSeparator { + display: none !important; +} + +#urlbar:hover .urlbar-icon, +#urlbar:active .urlbar-icon, +#urlbar[focused] .urlbar-icon, +#urlbar:hover .urlbar-icon:not([open]) image, +#urlbar:active .urlbar-icon image, +#urlbar[focused] .urlbar-icon image { + fill: var(--toolbar-color) !important; +} + +.urlbar-page-action[open] { + background-color: var(--toolbarbutton-active-background) !important; + fill: var(--toolbar-color) !important; +} + +.urlbar-page-action[open]:hover { + background-color: var(--toolbarbutton-active-background) !important; + fill: var(--toolbar-color) !important; +} + +#urlbar[breakout] { + width: 100% !important; + padding: 0px !important; + z-index: 99 !important; +} + +#urlbar[breakout][breakout-extend] { + transition: width 1.9s ease !important; + top: 3px !important; + left: 0 !important; + width: 100% !important; +} + +#urlbar[breakout] { + top: 4.9px !important; +} + +#urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: 100% !important; + padding-block: 0 !important; + padding-inline: 0 !important; +} + +.urlbar-page-action[open] .urlbar-icon { + fill: var(--toolbar-color) !important; +} + +#library-button[animate] { + margin-bottom: 0px !important; + margin-top: 50px !important; +} + +#library-button[animate] image { + margin-bottom: -120px !important; + margin-top: 100px !important; +} + +.urlbar-scheme { + padding-bottom: 11px !important; +} + +#urlbar-container { + margin-left: -5px !important; + margin-right: 2px !important; +} + +.urlbar-input::-moz-selection { + background-color: red !important; +} + +#urlbar-container #urlbar[pageproxystate="invalid"] { + margin-left: 5px !important; +} + +.urlbar-input-box { + padding: 5px 5px !important; +} + +/* #urlbar { + background-color: transparent !important; + color: var(--lwt-toolbar-field-color, black) !important; +} */ + +.urlbarView { + background: var(--toolbar-field-focus-background-color) !important; + border-bottom-left-radius: 10px !important; + border-bottom-right-radius: 10px !important; + box-shadow: 10px 45px 146px -64px rgba(0, 0, 0, 0.65); + margin-inline: 0 !important; + width: 100% !important; +} + +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, +#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { + border-radius: 50rem !important; + height: 2rem !important; + width: 2rem !important; + padding: 4px !important; +} + +#pocket-button { + padding-bottom: 4px !important; +} + +.urlbar-icon-wrapper > .urlbar-icon:hover { + background-color: transparent !important; +} + +.urlbar-icon-wrapper { + background-color: transparent !important; + transition: background-color var(--animation-speed) !important; +} + +#urlbar:not([focused]) { + border-radius: 4px !important; +} + +#identity-box:hover, +.urlbar-icon:hover, +.urlbar-icon-wrapper:hover, +[anonid="urlbar-go-button"]:hover { + border-radius: 10px !important; +} + +#identity-box:active, +.urlbar-icon:active, +.urlbar-icon-wrapper:active, +[anonid="urlbar-go-button"]:active { + background-color: var(--toolbarbutton-active-background) !important; +} + +[lwthemetextcolor="dark"] .urlbarView-body-outer { + background-color: #ff5340 !important; + color: var(--toolbar-color) !important; +} + +.urlbarView-body-inner { + background-color: var(--toolbar-bgcolor) !important; +} + +.downloadsPanelFooterButton:hover { + outline: none !important; +} + +#TabsToolbar > .titlebar-buttonbox-container { + margin-right: 20px; +} + +#urlbar, +#searchbar { + border: none !important; +} + +#page-action-buttons > *:not(#star-button-box), +.urlbar-history-dropmarker { + opacity: 0 !important; +} + +#urlbar:hover #page-action-buttons > *, +#urlbar:hover .urlbar-history-dropmarker { + opacity: 1 !important; +} + +menu, +menuitem, +menucaption { + -moz-appearance: none !important; + height: 36px !important; +} + +menu[disabled="true"][_moz-menuactive="false"], +menuitem[disabled="true"][_moz-menuactive="false"], +menucaption[disabled="true"][_moz-menuactive="false"] { + color: white !important; +} + +menu[disabled="true"], +menuitem[disabled="true"], +menucaption[disabled="true"] { + color: var( + --toolbarbutton-hover-background, + rgba(182, 182, 182, 0.11) + ) !important; +} + +menu[disabled="true"][_moz-menuactive="true"], +menuitem[disabled="true"][_moz-menuactive="true"], +menucaption[disabled="true"][_moz-menuactive="true"] { + color: var( + --toolbarbutton-hover-background, + rgba(182, 182, 182, 0.11) + ) !important; + background-color: transparent !important; +} + +menu:not(.subviewbutton) > .menu-right { + margin-top: 2px !important; + margin-right: 0px !important; + width: 0px !important; +} + +menu:not(.subviewbutton) > .menu-right image { + margin-right: -5px !important; + margin-top: -2px !important; + /*border: 6px solid var(--toolbar-color) !important;*/ + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; +} + +@media (-moz-os-version: windows-xp), + (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8), + (-moz-os-version: windows-win10) { + menupopup .popup-internal-box { + margin: -2px !important; + padding-bottom: 3px !important; + padding-top: 3px !important; + } + + .bookmark-item .scrollbutton-up { + margin-top: -3px !important; + } + + .bookmark-item .scrollbutton-up > .toolbarbutton-icon { + margin-top: -2px !important; + border: 6px solid MenuText !important; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-left-color: transparent !important; + } + + .bookmark-item .scrollbutton-down { + margin-bottom: -3px !important; + } + + .bookmark-item .scrollbutton-down > .toolbarbutton-icon { + margin-bottom: -2px !important; + border: 6px solid MenuText !important; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-left-color: transparent !important; + } + + menupopup { + margin-left: 1px !important; + } + + menu, + menuitem, + menucaption { + padding-left: 5px !important; + padding-right: 5px !important; + } + + menu:not(.subviewbutton) > .menu-right { + margin-right: 0px !important; + padding-left: 0px !important; + } +} + +.titlebar-spacer[type="pre-tabs"], +.titlebar-spacer[type="post-tabs"] { + display: none !important; +} + +:root:-moz-lwtheme-brighttext { + --autocomplete-popup-background: #2a2a2e !important; + --autocomplete-popup-highlight-background: #ff5340 !important; + --uc-active-tab-width: clamp(100px, 30vw, 300px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); + /* Enable this to always show the Tab Close button + * possible values: + * show: -moz-inline-block + * hide: none + */ + --show-tab-close-button: none; + + /* Enable this to only show the Tab Close button on tab hover + * possible values: + * show: -moz-inline-block + * hide: none + */ + --show-tab-close-button-hover: none; +} + +@-moz-document url(about:blank), +url(about:newtab), +url(about:home) { + html:not(#ublock0-epicker), + html:not(#ublock0-epicker) body, + #newtab-customize-overlay { + background: black !important; + } +} + +.tabbrowser-tab .tab-close-button { + visibility: collapse !important; +} + +#tabs-newtab-button { + display: none; + margin-left: 4px !important; + border-radius: 100% !important; +} + +.tabbrowser-tab::before, +.tabbrowser-tab::after { + display: none !important; + --uc-active-tab-width: clamp(100px, 30vw, 300px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); +} + +.tab-background[selected="true"] { + color: #111111 !important; +} + +.tabbrowser-tab { + text-align: center !important; + justify-content: center; + align-items: center; + margin: 6px 0px 6px 6px !important; + border: 2px solid rgba(183, 189, 248, 0.5); + background-clip: padding-box; + padding-inline: 0 !important; + box-shadow: 3px 3px 1px 1px #18192637; + --uc-active-tab-width: clamp(100px, 30vw, 300px); + --uc-inactive-tab-width: clamp(100px, 20vw, 200px); +} + +.tabbrowser-tab[selected="true"] { + box-shadow: 3px 3px 1px 1px #181926; + font-size: 1.1rem; +} +.tab-label-container[selected="true"] { + font-size: 1.1rem; +} + +@keyframes fade { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +#nav-bar:not([customizing]) { + visibility: visible; + margin-top: -40px; + transition-delay: 1s; + filter: alpha(opacity=0); + opacity: 0; + transition: + visibility, + ease 0.5s, + margin-top, + ease 0.5s, + opacity, + ease 0.5s, + rotate, + ease 0.4s !important; +} + +#tabs-newtab-button { + padding: 0.75rem 0.2rem 0.2rem 0.2rem !important; +} + +#nav-bar:hover, +#nav-bar:focus-within, +#urlbar[focused="true"], +#identity-box[open="true"], +#titlebar:hover + #nav-bar:not([customizing]), +#toolbar-menubar:not([inactive="true"]) ~ #nav-bar:not([customizing]) { + visibility: visible; + + margin-top: 0px; + filter: alpha(opacity=100); + opacity: 100; + margin-bottom: -0.2px; +} +#PersonalToolbar { + margin-top: 0px; +} + +#nav-bar .toolbarbutton-1[open="true"] { + visibility: visible; + opacity: 100; +} + +:-moz-any(#content, #appcontent) browser { + overflow-y: scroll; + margin-bottom: 0px !important; + overflow-x: scroll; +} + +/*tooltip*/ +#tabbrowser-tab-tooltip { + -moz-appearance: none !important; + font-size: 1.4rem !important; + width: 170px !important; + height: auto; + font-weight: normal !important; + color: var(--lwt-tab-text) !important; + background-color: var(--toolbar-bgcolor) !important; + padding: 6px; + border-radius: 10px; + box-shadow: none !important; +} + +#bookmarksPanel { + --lwt-toolbar-field-focus: white !important; + --lwt-tab-text: black !important; +} + +window#places[title="Library"] { + --lwt-toolbar-field-focus: white !important; + --lwt-tab-text: black !important; +} + +menupopup { + -moz-appearance: none !important; + padding: 8px !important; + border-radius: 10px !important; + background: red !important; + background: var(--toolbar-field-focus-background-color) !important; + border: none !important; + min-width: 280px !important; +} + +.menuitem-with-favicon { + color: var(--lwt-toolbar-field-focus-color) !important; +} + +.openintabs-menuitem { + color: var(--lwt-toolbar-field-focus-color) !important; +} + +.bookmark-item:hover { + color: var(--lwt-toolbar-field-focus-color) !important; +} + +menuseparator { + -moz-appearance: none !important; + border: none !important; + background-color: none !important; +} + +menuitem, +menu { + -moz-appearance: none !important; + padding: 7.5px 6px !important; +} + +menuitem[disabled="true"], +menuitem[disabled="true"] > .menu-text { + color: gray !important; +} + +menuitem:hover, +menu:hover, +menu[open="true"], +menuitem[_moz-menuactive="true"] { + -moz-appearance: none !important; + background-color: var(--toolbarbutton-hover-background) !important; + /* filter: brightness(200%); */ + border-radius: 5px; +} + +menugroup { + padding: 0px !important; + background-color: transparent !important; +} + +menuitem[type="checkbox"] { + padding-left: 8px !important; + padding-top: 6.5px !important; + padding-bottom: 6.5px !important; +} + +menuitem[type="radio"] { + padding-left: 8px !important; + padding-top: 6.5px !important; + padding-bottom: 6.5px !important; +} + +menuitem[type="checkbox"] > .menu-iconic-text, +menuitem[type="radio"] > .menu-iconic-text { + padding-left: 5px !important; +} + +menuitem[checked="true"][type="checkbox"] > .menu-iconic-left { + padding: 7px 0px 0px 0px !important; + border: solid white; + border-width: 0 0 2px 2px; + transform: rotate(-45deg) scale(0.75); + margin-bottom: 4px !important; +} + +menuitem[checked="true"][type="radio"] > .menu-iconic-left { + padding: 1px !important; + border: solid white; + height: 17px !important; + border-radius: 100%; + background: white; + transform: scale(0.5); +} + +menucaption { + background-color: transparent !important; + color: white !important; +} + +#ContentSelectDropdown > menupopup { + background-image: none !important; +} + +#ContentSelectDropdown { + padding: 0px !important; +} + +menulist { + -moz-appearance: none !important; + padding: 4px 4px 4px 4px !important; + border: 2px solid #666666 !important; + background-color: transparent !important; +} + +menulist:hover { + padding: 4px 4px 4px 4px !important; + border: 2px solid #999999 !important; + background-color: transparent !important; +} + +menulist[open="true"] { + border: 2px solid #666666 !important; + background-color: #333333 !important; +} + +#context-back > .menu-iconic-left, +#context-forward > .menu-iconic-left, +#context-reload > .menu-iconic-left, +#context-stop > .menu-iconic-left, +#context-bookmarkpage > .menu-iconic-left { + transform: scale(1.8); +} + +.menu-iconic-left { + -moz-appearance: none !important; + padding: 0px 5px 0px 9px !important; +} + +.menu-right { + -moz-appearance: none !important; + padding: 7.5px !important; + margin-right: 6px !important; + color: white !important; + border: solid white; + border-width: 0 2px 2px 0px; + transform: rotate(-45deg) scale(0.55); +} + +menu[_moz-menuactive="true"], +menuitem[_moz-menuactive="true"] { + -moz-font-smoothing-background-color: -moz-mac-active-menuitem; + color: inherit !important; +} + +/* + Clean and tight extensions menu +#unified-extensions-view .panel-header, +#unified-extensions-view .panel-header + toolbarseparator, +#unified-extensions-view .panel-subview-body + toolbarseparator, +#unified-extensions-view #unified-extensions-manage-extensions { + display:none !important; +} + +#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton{ + visibility: hidden !important; + transition: 300ms !important; + -moz-margin-end: -3.6em !important; +} + +#unified-extensions-view .panel-subview-body { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +#unified-extensions-view:hover +.unified-extensions-item-menu-button.subviewbutton{ + visibility: visible !important; + transition: 300ms !important; + -moz-margin-end: initial !important; +} + +#unified-extensions-view .unified-extensions-item-icon, +#unified-extensions-view .unified-extensions-item[unified-extensions="true"] .webextension-browser-action +> .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: 20px !important; + width: 20px !important; +} + +#unified-extensions-view .unified-extensions-item-icon, +#unified-extensions-view .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack { + margin-inline-end: 2px !important; +} + +#unified-extensions-view .unified-extensions-item-name, +#unified-extensions-view .unified-extensions-item-message { + padding-inline-start: 0.5em !important; + width: 21em !important; +} + +#unified-extensions-view .unified-extensions-item-action-button.subviewbutton { + padding-top: 2px !important; + padding-bottom: 2px !important; +}*/ diff --git a/.config/browser/chrome/userChrome.css b/.config/browser/chrome/userChrome.css index a4077e53..0d831944 100644 --- a/.config/browser/chrome/userChrome.css +++ b/.config/browser/chrome/userChrome.css @@ -1,992 +1,963 @@ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +/* GLOBAL SETTING */ + +/* Fonts */ * { - /*--tab-corner-rounding: 5px;*/ - --animation-speed: 0.4s; - --button-corner-rounding: 10px; - --urlbar-container-height: 40px !important; - --urlbar-min-height: 30px !important; - --urlbar-height: 30px !important; - --urlbar-toolbar-height: 38px !important; - --moz-hidden-unscrollable: scroll !important; - --toolbarbutton-border-radius: 3px !important; - --tabs-border-color: transparent; + font-family: monospace !important; } -#TabsToolbar .tabbrowser-tab, -#TabsToolbar .tabbrowser-tab .tab-stack, -#TabsToolbar .tabbrowser-tab .tab-background, -#TabsToolbar .tabbrowser-tab .tab-content { - border-top-left-radius: 10px !important; - border-top-right-radius: 10px !important; - border-bottom-left-radius: 10px !important; - border-bottom-right-radius: 10px !important; - margin-top: 0px; - max-height: 36px !important; - text-align: center; +/*------------------------------------------------*/ +/* Background Color */ + +@media (prefers-color-scheme: dark) { + #tabbrowser-tabbox, + #tabbrowser-tabpanels, + #browser, + #appcontent { + background-image: url(night-lake.jpg) !important; + background-size: cover !important; + background-position: center !important; + } +} +@media (prefers-color-scheme: light) { + #navigator-toolbox, + #sidebar-box, + #tabbrowser-tabbox, + #tabbrowser-tabpanels, + #browser, + #appcontent, + #sidebar-select-box, + .browser-sidebar2, + tab.tabbrowser-tab * { + background-color: #e6e6e6 !important; + } } -#TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background { - box-shadow: none !important; +@media (prefers-color-scheme: dark) { + #navigator-toolbox, + .browser-sidebar2 { + background: #181926 !important; + } } -.tab-background, -.tab-stack { - min-height: 36px !important; +@media (prefers-color-scheme: light) { + #navigator-toolbox, + .browser-sidebar2 { + background: #e6e6e6 !important; + } } -.tab-background { - margin-block: 0 0 !important; -} - -.tabbrowser-tab { - min-height: 36px !important; -} - -#TabsToolbar:hover { - background: transparent; -} - -#star-button[starred], -#star-button { - display: none !important; -} - -#bookmarks-menu-button toolbarbutton { - visibility: collapse !important; -} - -/* multi tab selection */ -#tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - outline-color: var(--toolbarseparator-color) !important; -} - -.tab-line { - display: none; -} - -#urlbar[breakout][breakout-extend], -#urlbar[breakout][breakout-extend-disabled][open] { - /* The z-index needs to be big enough to trump other positioned UI pieces - that we want to overlay. 3 is used in the tab bar. */ - z-index: 3; - height: var(--urlbar-height) !important; -} - -#urlbar-search-button { - margin-left: 5px; -} - -/* Hide the »Go«-arrow in the URL Bar */ -#urlbar-go-button { - display: none !important; -} - -/* #page-action-buttons > :not(#urlbar-zoom-button) { display: none !important; } */ - -tab:not(:active) .tab-background { - transition: background-color var(--animation-speed) !important; -} - -#back-button, -#forward-button { - display: none !important; -} - -.titlebar-buttonbox-container { - display: none !important; -} - -#pageActionButton { - display: none !important; -} - -#PanelUI-menu-button { - padding: 0px !important; -} - -#PanelUI-menu-button .toolbarbutton-icon { - width: 1px !important; -} - -#PanelUI-menu-button .toolbarbutton-badge-stack { - padding: 0px !important; -} - -/*---+---+---+---+---+---+---+ - | T | A | B | — | B | A | R | - +---+---+---+---+---+---+---*/ -/* multi tab selection */ -#tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - outline-color: var(--toolbarseparator-color) !important; -} - -/* tab close button options */ -.tabbrowser-tab:not([pinned]) .tab-close-button { - display: var(--show-tab-close-button) !important; -} - -.tabbrowser-tab:not([pinned]):hover .tab-close-button { - display: var(--show-tab-close-button-hover) !important; -} - -/* adaptive tab width */ -.tabbrowser-tab[selected][fadein]:not([pinned]) { - max-width: var(--uc-active-tab-width) !important; -} - -.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { - max-width: var(--uc-inactive-tab-width) !important; -} - -/* container tabs indicator */ -.tabbrowser-tab[usercontextid] - > .tab-stack - > .tab-background - > .tab-context-line { - margin: -1px var(--container-tabs-indicator-margin) 0 - var(--container-tabs-indicator-margin) !important; - height: 1px !important; - - box-shadow: var(--uc-identity-glow) var(--identity-tab-color) !important; -} - -/* show favicon when media is playing but tab is hovered */ -.tab-icon-image:not([pinned]) { - opacity: 1 !important; -} - -/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ -.tab-icon-overlay:not([crashed]), -.tab-icon-overlay[pinned][crashed][selected] { - top: 5px !important; - z-index: 1 !important; - - padding: 1.5px !important; - inset-inline-end: -8px !important; - width: 16px !important; - height: 16px !important; - - border-radius: 10px !important; -} - -/* style and position speaker icon */ -.tab-icon-overlay:not([sharing], [crashed]):is( - [soundplaying], - [muted], - [activemedia-blocked] - ) { - stroke: transparent !important; +#PersonalToolbar, +#nav-bar { background: transparent !important; +} + +/* Hide Status Messages */ +/* +#statuspanel[type="overLink"] { + opacity: 0 !important; +} +#statuspanel { + opacity: 0 !important; +} +*/ + +/*============================================================================================*/ +/* NAV BAR */ + +/* Auto hide icons on the Nav Bar */ +#nav-bar + > #nav-bar-customization-target + *:not(#urlbar-container):not(#urlbar-container *), +#PanelUI-button { + opacity: 0 !important; + transition: opacity 0.7s ease !important; +} + +#nav-bar:hover + > #nav-bar-customization-target + *:not(#urlbar-container):not(#urlbar-container *), +#nav-bar:hover > #PanelUI-button { opacity: 1 !important; - fill-opacity: 0.8 !important; - - color: currentColor !important; - - stroke: var(--toolbar-bgcolor) !important; - background-color: var(--toolbar-bgcolor) !important; + transition: opacity 0.3s ease !important; } -/* change the colours of the speaker icon on active tab to match tab colours */ -.tabbrowser-tab[selected] - .tab-icon-overlay:not([sharing], [crashed]):is( - [soundplaying], - [muted], - [activemedia-blocked] - ) { - stroke: var(--toolbar-bgcolor) !important; - background-color: var(--toolbar-bgcolor) !important; - box-shadow: 3px 3px 1px 1px #181926; +/*------------------------------------------------*/ +/* Remove line between website content and top bar */ + +#navigator-toolbox { + border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid + var(--firefoxcss-top-bar-border-bottom-color) !important; } -.tab-icon-overlay:not([pinned], [sharing], [crashed]):is( - [soundplaying], - [muted], - [activemedia-blocked] - ) { - margin-inline-end: 9.5px !important; +/*------------------------------------------------*/ +/* Remove the all tab and new tab button */ +#alltabs-button, +#tabs-newtab-button { + display: none !important; } -.tabbrowser-tab:not([image]) - .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - top: 0 !important; +/*------------------------------------------------*/ +/* Remove the 3 dots from Alt Key */ - padding: 0 !important; - margin-inline-end: 5.5px !important; - inset-inline-end: 0 !important; +#titlebar #toolbar-menubar .titlebar-buttonbox-container { + display: none !important; } -.tab-icon-overlay:not([crashed])[soundplaying]:hover, -.tab-icon-overlay:not([crashed])[muted]:hover, -.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { - color: currentColor !important; - stroke: var(--toolbar-color) !important; - background-color: var(--toolbar-color) !important; - fill-opacity: 0.95 !important; +/*------------------------------------------------*/ +/* Move menu buttons to the left side */ + +#nav-bar #PanelUI-button #PanelUI-menu-button { + padding-right: 2px !important; + padding-left: 4px !important; } -.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover, -.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover, -.tabbrowser-tab[selected] - .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { - color: currentColor !important; - stroke: var(--toolbar-color) !important; - background-color: var(--toolbar-color) !important; - fill-opacity: 0.95 !important; - box-shadow: 3px 3px 1px 1px #181926; +#nav-bar #PanelUI-button { + -moz-box-ordinal-group: 0 !important; + order: 0 !important; } -/* speaker icon colour fix */ -#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying], -#TabsToolbar .tab-icon-overlay:not([crashed])[muted], -#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { - color: var(--toolbar-color) !important; +toolbar:not([customizing]) > #nav-bar-overflow-button { + -moz-box-ordinal-group: 1 !important; + order: 1 !important; } -/* speaker icon colour fix on hover */ -#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover, -#TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover, -#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { - color: var(--toolbar-bgcolor) !important; +toolbar:not([customizing]) > #nav-bar-customization-target { + -moz-box-ordinal-group: 2 !important; + order: 2 !important; } +#appMenu-popup { + margin-inline: -244px !important; +} + +#widget-overflow { + margin-inline: -320px !important; +} + +/*------------------------------------------------*/ +#TabsToolbar .titlebar-buttonbox-container .titlebar-close { + background: #f25056 !important; + display: none !important; + overflow: hidden !important; + transition: background-color 200ms ease !important; +} + +/*------------------------------------------------*/ +/* Make Tab Bar join with URL Bar on the left */ + :root { - /* Allow tabs to have dynamic widths based on - * the Tab Bars maximum width - */ - --uc-active-tab-width: clamp(50px, 25vw, 200px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); - - /* Enable this to always show the Tab Close button - * possible values: - * show: -moz-inline-block - * hide: none - */ - --show-tab-close-button: none; - - /* Enable this to only show the Tab Close button on tab hover - * possible values: - * show: -moz-inline-block - * hide: none - */ - --show-tab-close-button-hover: none; - - /* Hide the all Tabs button from the Tab Bar - * possible values: - * show: -moz-box - * hide: none - */ - --uc-show-all-tabs-button: none; - - /* Left and Right "dip" of the container indicator - * 0px equals tab width - * higer values make the indicator smaller - */ - --container-tabs-indicator-margin: 10px; - - /* Amount of Glow to add to the container indicator - * Setting it to 0 disables the Glow - */ - --uc-identity-glow: 0 1px 10px 1px; - - font-family: "JetBrainsMono NF"; + --tab-border-radius: 3px !important; + --NavbarWidth: 2; + --TabsHeight: 36; + --TabsBorder: 8; + --NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder)); } -:root:not([customizing]) :hover > .tabbrowser-tab:not(:hover) { - transition: - blur, - ease 0.5s !important; - --uc-active-tab-width: clamp(100px, 30vw, 300px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); -} - -:root:not([customizing]) :not(:hover) > .tabbrowser-tab { - transition: - blur, - ease 0.2s !important; - --uc-active-tab-width: clamp(100px, 30vw, 300px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); -} - -#tabbrowser-tabs .tab-label-container[customizing] { - color: transparent; - transition: ease 0.5s; - transition-delay: 3s; -} - -:root[uidensity="compact"] { - --tab-min-height: 38px !important; - --uc-active-tab-width: clamp(100px, 30vw, 300px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); -} - -tab:not([selected]):hover .tab-background { - background-color: var( - --toolbarbutton-hover-background, - rgba(182, 182, 182, 0.11) +#nav-bar { + margin-top: calc( + var(--TabsHeight) * -1px - var(--TabsBorder) * 1px ) !important; + height: calc((var(--TabsHeight) * 1px + var(--TabsBorder) * 1px) + 0px); } -.tab-close-button { - list-style-image: url("active_close.png"); - border-radius: 10px; - transition: list-style-image var(--animation-speed) ease-out !important; -} - -.tab-close-button:hover { - list-style-image: url("mouseover_close.png"); -} - -#navigator-toolbox::after { - display: none !important; -} - -.titlebar-button { - padding-left: 10px !important; - padding-right: 15px !important; - padding-top: 10px !important; -} - -#urlbar { - /*border-radius: calc(1px + var(--button-corner-rounding)) !important;*/ - height: 30px; - margin-left: 5px; -} - -#urlbar-container *:not(#identity-box) { - border-color: transparent !important; -} - -#pageActionSeparator { - display: none !important; -} - -#urlbar:hover .urlbar-icon, -#urlbar:active .urlbar-icon, -#urlbar[focused] .urlbar-icon, -#urlbar:hover .urlbar-icon:not([open]) image, -#urlbar:active .urlbar-icon image, -#urlbar[focused] .urlbar-icon image { - fill: var(--toolbar-color) !important; -} - -.urlbar-page-action[open] { - background-color: var(--toolbarbutton-active-background) !important; - fill: var(--toolbar-color) !important; -} - -.urlbar-page-action[open]:hover { - background-color: var(--toolbarbutton-active-background) !important; - fill: var(--toolbar-color) !important; -} - -#urlbar[breakout] { - width: 100% !important; - padding: 0px !important; - z-index: 99 !important; -} - -#urlbar[breakout][breakout-extend] { - transition: width 1.9s ease !important; - top: 3px !important; - left: 0 !important; - width: 100% !important; -} - -#urlbar[breakout] { - top: 4.9px !important; -} - -#urlbar[breakout][breakout-extend] > #urlbar-input-container { - height: 100% !important; - padding-block: 0 !important; - padding-inline: 0 !important; -} - -.urlbar-page-action[open] .urlbar-icon { - fill: var(--toolbar-color) !important; -} - -#library-button[animate] { - margin-bottom: 0px !important; - margin-top: 50px !important; -} - -#library-button[animate] image { - margin-bottom: -120px !important; - margin-top: 100px !important; -} - -.urlbar-scheme { - padding-bottom: 11px !important; +#nav-bar { + margin-left: 35px !important; } #urlbar-container { - margin-left: -5px !important; - margin-right: 2px !important; + min-width: 0px !important; + flex: auto !important; } -.urlbar-input::-moz-selection { - background-color: red !important; -} - -#urlbar-container #urlbar[pageproxystate="invalid"] { - margin-left: 5px !important; -} - -.urlbar-input-box { - padding: 5px 5px !important; -} - -/* #urlbar { - background-color: transparent !important; - color: var(--lwt-toolbar-field-color, black) !important; -} */ - -.urlbarView { - background: var(--toolbar-field-focus-background-color) !important; - border-bottom-left-radius: 10px !important; - border-bottom-right-radius: 10px !important; - box-shadow: 10px 45px 146px -64px rgba(0, 0, 0, 0.65); - margin-inline: 0 !important; - width: 100% !important; -} - -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack { - border-radius: 50rem !important; - height: 2rem !important; - width: 2rem !important; - padding: 4px !important; -} - -#pocket-button { - padding-bottom: 4px !important; -} - -.urlbar-icon-wrapper > .urlbar-icon:hover { - background-color: transparent !important; -} - -.urlbar-icon-wrapper { - background-color: transparent !important; - transition: background-color var(--animation-speed) !important; -} - -#urlbar:not([focused]) { - border-radius: 4px !important; -} - -#identity-box:hover, -.urlbar-icon:hover, -.urlbar-icon-wrapper:hover, -[anonid="urlbar-go-button"]:hover { - border-radius: 10px !important; -} - -#identity-box:active, -.urlbar-icon:active, -.urlbar-icon-wrapper:active, -[anonid="urlbar-go-button"]:active { - background-color: var(--toolbarbutton-active-background) !important; -} - -[lwthemetextcolor="dark"] .urlbarView-body-outer { - background-color: #ff5340 !important; - color: var(--toolbar-color) !important; -} - -.urlbarView-body-inner { - background-color: var(--toolbar-bgcolor) !important; -} - -.downloadsPanelFooterButton:hover { - outline: none !important; -} - -#TabsToolbar > .titlebar-buttonbox-container { - margin-right: 20px; -} - -#urlbar, -#searchbar { - border: none !important; -} - -#page-action-buttons > *:not(#star-button-box), -.urlbar-history-dropmarker { - opacity: 0 !important; -} - -#urlbar:hover #page-action-buttons > *, -#urlbar:hover .urlbar-history-dropmarker { - opacity: 1 !important; -} - -menu, -menuitem, -menucaption { - -moz-appearance: none !important; - height: 36px !important; -} - -menu[disabled="true"][_moz-menuactive="false"], -menuitem[disabled="true"][_moz-menuactive="false"], -menucaption[disabled="true"][_moz-menuactive="false"] { - color: white !important; -} - -menu[disabled="true"], -menuitem[disabled="true"], -menucaption[disabled="true"] { - color: var( - --toolbarbutton-hover-background, - rgba(182, 182, 182, 0.11) - ) !important; -} - -menu[disabled="true"][_moz-menuactive="true"], -menuitem[disabled="true"][_moz-menuactive="true"], -menucaption[disabled="true"][_moz-menuactive="true"] { - color: var( - --toolbarbutton-hover-background, - rgba(182, 182, 182, 0.11) - ) !important; - background-color: transparent !important; -} - -menu:not(.subviewbutton) > .menu-right { - margin-top: 2px !important; - margin-right: 0px !important; - width: 0px !important; -} - -menu:not(.subviewbutton) > .menu-right image { - margin-right: -5px !important; - margin-top: -2px !important; - /*border: 6px solid var(--toolbar-color) !important;*/ - border-top-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; -} - -@media (-moz-os-version: windows-xp), - (-moz-os-version: windows-vista), - (-moz-os-version: windows-win7), - (-moz-os-version: windows-win8), - (-moz-os-version: windows-win10) { - menupopup .popup-internal-box { - margin: -2px !important; - padding-bottom: 3px !important; - padding-top: 3px !important; +@media screen and (max-width: 100px) { + #TabsToolbar { + margin-right: 0 !important; } - - .bookmark-item .scrollbutton-up { - margin-top: -3px !important; - } - - .bookmark-item .scrollbutton-up > .toolbarbutton-icon { - margin-top: -2px !important; - border: 6px solid MenuText !important; - border-top-color: transparent !important; - border-right-color: transparent !important; - border-left-color: transparent !important; - } - - .bookmark-item .scrollbutton-down { - margin-bottom: -3px !important; - } - - .bookmark-item .scrollbutton-down > .toolbarbutton-icon { - margin-bottom: -2px !important; - border: 6px solid MenuText !important; - border-bottom-color: transparent !important; - border-right-color: transparent !important; - border-left-color: transparent !important; - } - - menupopup { - margin-left: 1px !important; - } - - menu, - menuitem, - menucaption { - padding-left: 5px !important; - padding-right: 5px !important; - } - - menu:not(.subviewbutton) > .menu-right { - margin-right: 0px !important; - padding-left: 0px !important; + #nav-bar { + margin-left: 0 !important; } } -.titlebar-spacer[type="pre-tabs"], -.titlebar-spacer[type="post-tabs"] { +/* Fix for Firefox 123 */ +#nav-bar:not([tabs-hidden="true"]) { + position: static !important; +} + +#nav-bar-customization-target, +#PanelUI-button { + position: relative !important; + z-index: 3 !important; +} + +/*------------------------------------------------*/ +/* Make active tab to hidden tab */ + +tab:not([selected="true"]), +[part="overflow-start-indicator"], +[part="overflow-end-indicator"], +#scrollbutton-up, +#scrollbutton-down, +#TabsToolbar .titlebar-spacer, +.tabbrowser-tab[selected="true"] .tab-text, +.tabbrowser-tab[selected="true"] .tab-close-button, +.tab-line, +.tab-throbber { display: none !important; } -:root:-moz-lwtheme-brighttext { - --autocomplete-popup-background: #2a2a2e !important; - --autocomplete-popup-highlight-background: #ff5340 !important; - --uc-active-tab-width: clamp(100px, 30vw, 300px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); - /* Enable this to always show the Tab Close button - * possible values: - * show: -moz-inline-block - * hide: none - */ - --show-tab-close-button: none; - - /* Enable this to only show the Tab Close button on tab hover - * possible values: - * show: -moz-inline-block - * hide: none - */ - --show-tab-close-button-hover: none; -} - -@-moz-document url(about:blank), -url(about:newtab), -url(about:home) { - html:not(#ublock0-epicker), - html:not(#ublock0-epicker) body, - #newtab-customize-overlay { - background: black !important; - } -} - -.tabbrowser-tab .tab-close-button { - visibility: collapse !important; -} - -#tabs-newtab-button { - display: none; - margin-left: 4px !important; - border-radius: 100% !important; -} - -.tabbrowser-tab::before, -.tabbrowser-tab::after { - display: none !important; - --uc-active-tab-width: clamp(100px, 30vw, 300px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); -} - -.tab-background[selected="true"] { - color: #111111 !important; -} - -.tabbrowser-tab { - text-align: center !important; - justify-content: center; - align-items: center; - margin: 6px 0px 6px 6px !important; - border: 2px solid rgba(183, 189, 248, 0.5); - background-clip: padding-box; - padding-inline: 0 !important; - box-shadow: 3px 3px 1px 1px #18192637; - --uc-active-tab-width: clamp(100px, 30vw, 300px); - --uc-inactive-tab-width: clamp(100px, 20vw, 200px); -} - .tabbrowser-tab[selected="true"] { - box-shadow: 3px 3px 1px 1px #181926; - font-size: 1.1rem; -} -.tab-label-container[selected="true"] { - font-size: 1.1rem; + min-width: 0px !important; + max-width: 0px !important; + background-color: #181926 !important; } -@keyframes fade { - from { - opacity: 0; - } - - to { - opacity: 1; - } +tab, +.tabbrowser-tab { + padding-left: 0 !important; + margin-left: 0 !important; + background-color: #181926 !important; } -#nav-bar:not([customizing]) { - visibility: visible; - margin-top: -40px; - transition-delay: 1s; - filter: alpha(opacity=0); - opacity: 0; - transition: - visibility, - ease 0.5s, - margin-top, - ease 0.5s, - opacity, - ease 0.5s, - rotate, - ease 0.4s !important; -} - -#tabs-newtab-button { - padding: 0.75rem 0.2rem 0.2rem 0.2rem !important; -} - -#nav-bar:hover, -#nav-bar:focus-within, -#urlbar[focused="true"], -#identity-box[open="true"], -#titlebar:hover + #nav-bar:not([customizing]), -#toolbar-menubar:not([inactive="true"]) ~ #nav-bar:not([customizing]) { - visibility: visible; - - margin-top: 0px; - filter: alpha(opacity=100); - opacity: 100; - margin-bottom: -0.2px; -} -#PersonalToolbar { - margin-top: 0px; -} - -#nav-bar .toolbarbutton-1[open="true"] { - visibility: visible; - opacity: 100; -} - -:-moz-any(#content, #appcontent) browser { - overflow-y: scroll; - margin-bottom: 0px !important; - overflow-x: scroll; -} - -/*tooltip*/ -#tabbrowser-tab-tooltip { - -moz-appearance: none !important; - font-size: 1.4rem !important; - width: 170px !important; - height: auto; - font-weight: normal !important; - color: var(--lwt-tab-text) !important; - background-color: var(--toolbar-bgcolor) !important; - padding: 6px; - border-radius: 10px; +.tab-background { + outline: none !important; box-shadow: none !important; + background-color: #181926 !important; } -#bookmarksPanel { - --lwt-toolbar-field-focus: white !important; - --lwt-tab-text: black !important; -} - -window#places[title="Library"] { - --lwt-toolbar-field-focus: white !important; - --lwt-tab-text: black !important; -} - -menupopup { - -moz-appearance: none !important; - padding: 8px !important; +.tab-icon-image { + height: 32px !important; + width: 32px !important; border-radius: 10px !important; - background: red !important; - background: var(--toolbar-field-focus-background-color) !important; - border: none !important; - min-width: 280px !important; + background-color: #181926 !important; } -.menuitem-with-favicon { - color: var(--lwt-toolbar-field-focus-color) !important; +/*------------------------------------------------*/ +/* Hide all buttons in active tab context menu except for split tab and extensions */ + +#main-window #context_openANewTab, +#main-window #context_reloadTab, +#main-window #context_toggleMuteTab, +#main-window #context_playTab, +#main-window #context_pinTab, +#main-window #context_duplicateTab, +#main-window #context_bookmarkTab, +#main-window #context_moveTabOptions, +#main-window #context_reopenInContainer, +#main-window #context_toggleToPrivateContainer, +#main-window #context_selectAllTabs, +#main-window #context_closeTab, +#main-window #context_closeTabOptions, +#main-window #context_undoCloseTab, +#context_MoveTabToOtherWorkspace, +#main-window #tabContextMenu menuseparator { + display: none !important; } -.openintabs-menuitem { - color: var(--lwt-toolbar-field-focus-color) !important; +/*============================================================================================*/ +/* EXTENSION */ + +/* Make extensions looks minimal */ + +#unified-extensions-view + #unified-extensions-manage-extensions + .toolbarbutton-text::before { + content: "• • •"; + font-size: 15px; + visibility: visible !important; + display: block; + text-align: center; } -.bookmark-item:hover { - color: var(--lwt-toolbar-field-focus-color) !important; +#unified-extensions-panel #unified-extensions-view { + width: 100% !important; } -menuseparator { - -moz-appearance: none !important; - border: none !important; - background-color: none !important; +#unified-extensions-view { + --uei-icon-size: 22px; + --firefoxcss-number-of-extensions-in-a-row: 4; } -menuitem, -menu { - -moz-appearance: none !important; - padding: 7.5px 6px !important; -} - -menuitem[disabled="true"], -menuitem[disabled="true"] > .menu-text { - color: gray !important; -} - -menuitem:hover, -menu:hover, -menu[open="true"], -menuitem[_moz-menuactive="true"] { - -moz-appearance: none !important; - background-color: var(--toolbarbutton-hover-background) !important; - /* filter: brightness(200%); */ - border-radius: 5px; -} - -menugroup { - padding: 0px !important; - background-color: transparent !important; -} - -menuitem[type="checkbox"] { - padding-left: 8px !important; - padding-top: 6.5px !important; - padding-bottom: 6.5px !important; -} - -menuitem[type="radio"] { - padding-left: 8px !important; - padding-top: 6.5px !important; - padding-bottom: 6.5px !important; -} - -menuitem[type="checkbox"] > .menu-iconic-text, -menuitem[type="radio"] > .menu-iconic-text { - padding-left: 5px !important; -} - -menuitem[checked="true"][type="checkbox"] > .menu-iconic-left { - padding: 7px 0px 0px 0px !important; - border: solid white; - border-width: 0 0 2px 2px; - transform: rotate(-45deg) scale(0.75); - margin-bottom: 4px !important; -} - -menuitem[checked="true"][type="radio"] > .menu-iconic-left { - padding: 1px !important; - border: solid white; - height: 17px !important; - border-radius: 100%; - background: white; - transform: scale(0.5); -} - -menucaption { - background-color: transparent !important; - color: white !important; -} - -#ContentSelectDropdown > menupopup { - background-image: none !important; -} - -#ContentSelectDropdown { - padding: 0px !important; -} - -menulist { - -moz-appearance: none !important; - padding: 4px 4px 4px 4px !important; - border: 2px solid #666666 !important; - background-color: transparent !important; -} - -menulist:hover { - padding: 4px 4px 4px 4px !important; - border: 2px solid #999999 !important; - background-color: transparent !important; -} - -menulist[open="true"] { - border: 2px solid #666666 !important; - background-color: #333333 !important; -} - -#context-back > .menu-iconic-left, -#context-forward > .menu-iconic-left, -#context-reload > .menu-iconic-left, -#context-stop > .menu-iconic-left, -#context-bookmarkpage > .menu-iconic-left { - transform: scale(1.8); -} - -.menu-iconic-left { - -moz-appearance: none !important; - padding: 0px 5px 0px 9px !important; -} - -.menu-right { - -moz-appearance: none !important; - padding: 7.5px !important; - margin-right: 6px !important; - color: white !important; - border: solid white; - border-width: 0 2px 2px 0px; - transform: rotate(-45deg) scale(0.55); -} - -menu[_moz-menuactive="true"], -menuitem[_moz-menuactive="true"] { - -moz-font-smoothing-background-color: -moz-mac-active-menuitem; - color: inherit !important; -} - -/* - Clean and tight extensions menu -#unified-extensions-view .panel-header, -#unified-extensions-view .panel-header + toolbarseparator, -#unified-extensions-view .panel-subview-body + toolbarseparator, -#unified-extensions-view #unified-extensions-manage-extensions { - display:none !important; -} - -#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton{ - visibility: hidden !important; - transition: 300ms !important; - -moz-margin-end: -3.6em !important; +#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton, +#unified-extensions-view + .unified-extensions-item-action-button + .unified-extensions-item-contents { + display: none !important; } #unified-extensions-view .panel-subview-body { - padding-top: 8px !important; - padding-bottom: 8px !important; + padding: 10px !important; } -#unified-extensions-view:hover -.unified-extensions-item-menu-button.subviewbutton{ - visibility: visible !important; - transition: 300ms !important; - -moz-margin-end: initial !important; +#unified-extensions-view .unified-extensions-item .unified-extensions-item-icon, +#unified-extensions-view .unified-extensions-item .toolbarbutton-badge-stack { + margin-inline-end: 0px !important; } -#unified-extensions-view .unified-extensions-item-icon, -#unified-extensions-view .unified-extensions-item[unified-extensions="true"] .webextension-browser-action -> .toolbarbutton-badge-stack > .toolbarbutton-icon { - height: 20px !important; - width: 20px !important; +#unified-extensions-view #overflowed-extensions-list, +#unified-extensions-view #unified-extensions-area, +#unified-extensions-view .unified-extensions-list { + display: grid !important; + grid-template-columns: repeat( + var(--firefoxcss-number-of-extensions-in-a-row), + auto + ); + justify-items: left !important; + align-items: left !important; } -#unified-extensions-view .unified-extensions-item-icon, -#unified-extensions-view .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack { - margin-inline-end: 2px !important; +/*============================================================================================*/ +/* URL BAR */ + +/* Make text in URL bar in the center */ + +#nav-bar { + display: flex; + justify-content: center; } -#unified-extensions-view .unified-extensions-item-name, -#unified-extensions-view .unified-extensions-item-message { - padding-inline-start: 0.5em !important; - width: 21em !important; +#urlbar-container { + flex: 1; + max-width: 1000px; + min-width: 200px; + margin: auto !important; } -#unified-extensions-view .unified-extensions-item-action-button.subviewbutton { - padding-top: 2px !important; - padding-bottom: 2px !important; -}*/ +#main-window #urlbar { + z-index: 9999 !important; + width: 100% !important; + margin-top: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + transition: + width 0.3s ease, + left 0.3s ease, + margin-top 0.3s ease, + margin-left 0.3s ease, + margin-right 0.3s ease; +} + +#main-window #urlbar[breakout][breakout-extend] { + opacity: 0.97 !important; + width: 100% !important; + left: 0; + right: 0; + margin-left: auto !important; + margin-right: auto !important; + margin-top: 30vh !important; + transition: + width 0.3s ease, + left 0.3s ease, + margin-top 0.3s ease, + margin-left 0.3s ease, + margin-right 0.3s ease; +} + +#urlbar-background, +#urlbar-input-container { + --toolbarbutton-border-radius: calc(var(--urlbar-min-height) / 2); +} + +#urlbar-input-container { + --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); +} + +#urlbar:not([focused]) #urlbar-input { + text-align: center !important; +} + +#urlbar:not([breakout][breakout-extend]) #urlbar-input { + text-align: center !important; +} + +/*------------------------------------------------*/ +/* Change URL Bar background color */ +@media (prefers-color-scheme: dark) { + #urlbar-background { + background-color: #1e2030 !important; + } +} + +@media (prefers-color-scheme: light) { + #urlbar-background { + background-color: #d6d6d6 !important; + } +} + +@media (prefers-color-scheme: dark) { + #urlbar-results > *[selected=""] { + background-color: #1e2030 !important; + } +} + +@media (prefers-color-scheme: light) { + #urlbar-results > *[selected=""] { + background-color: #e8e8e8 !important; + } +} + +/*------------------------------------------------*/ +/* Hide and Hover icons in URL Bar */ + +#nav-bar:not([customizing="true"]):not(.searchButton) + > #nav-bar-customization-target + > #urlbar-container:not(:hover) + > #urlbar:not([focused]) + > #urlbar-input-container + > #page-action-buttons + .urlbar-page-action { + opacity: 0; + transition-delay: 500ms; +} + +#nav-bar:not([customizing="true"]):not(.searchButton) + > #nav-bar-customization-target + > #urlbar-container:not(:hover) + > #urlbar:not([focused]) + > #urlbar-input-container + > #identity-box + > #identity-permission-box:not([open]) { + opacity: 0; + transition-delay: 500ms; +} + +#page-action-buttons .urlbar-page-action, +#identity-permission-box, +#notification-popup-box .notification-anchor-icon { + transition: opacity 0.2s ease; +} + +#urlbar #identity-icon-box, +#urlbar #identity-permission-box { + opacity: 0 !important; + margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding)); + transition: + margin-inline-start 100ms linear, + opacity 200ms linear; +} + +#urlbar #identity-box.notSecureText #identity-icon-box { + margin-inline-start: initial !important; + opacity: 1 !important; + color: #e36f6f !important; +} + +#urlbar #identity-box.extensionPage #identity-icon-box { + margin-inline-start: initial !important; + opacity: 1 !important; +} + +#identity-box:hover #identity-icon-box, +#identity-box:hover #identity-permission-box, +#identity-box #identity-permission-box[open="true"] { + opacity: 1 !important; + margin-inline-start: initial !important; +} + +#urlbar-input-container .urlbar-input-box { + padding-inline-start: 2px !important; +} + +#identity-box:hover ~ .urlbar-input-box > #urlbar-input { + mask-image: linear-gradient(to right, transparent, black 3ch) !important; +} + +#page-action-buttons { + padding-inline-start: 8px; +} + +#page-action-buttons .urlbar-page-action { + margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)); + opacity: 0; + transition: + margin-inline-end 100ms linear, + opacity 200ms linear; +} + +#page-action-buttons:hover > .urlbar-page-action, +.urlbar-page-action[open], +.urlbar-page-action[open] ~ .urlbar-page-action { + opacity: 1; + margin-inline-end: 0px !important; +} + +#identity-box.chromeUI #identity-icon-box { + opacity: 1 !important; + margin-inline-start: initial; +} + +#identity-box.chromeUI::after, +#identity-box.chromeUI:hover::after { + opacity: 0 !important; +} + +#page-action-buttons:not(:hover) + #translations-button[translationsactive="true"]:not([open]) { + visibility: collapse !important; +} + +/*------------------------------------------------*/ +/* Create visual dots on both sides */ +#identity-box::after, +#page-action-buttons::before { + position: relative; + content: "•••"; + pointer-events: none; + transition: opacity 100ms ease; + align-self: center; + font-size: 0.7em; +} + +#identity-box::after, +#page-action-buttons::before { + opacity: 0.2; +} + +#identity-box::after { + transform: rotate(90deg); + left: 4px; +} + +#page-action-buttons::before { + transform: rotate(-90deg); + right: 4px; +} + +#identity-box:hover::after, +#page-action-buttons:hover::before { + opacity: 0.2 !important; + transition: opacity 50ms ease; + pointer-events: none; +} + +#identity-box[pageproxystate="invalid"]::after, +#urlbar-input-container[pageproxystate="invalid"] + > #page-action-buttons::before { + opacity: 0 !important; + transition: opacity 50ms ease; +} + +/* Linux changes for visual dots */ +@media (-moz-platform: linux) { + #identity-box::after, + #page-action-buttons::before { + content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>'); + transform: none; + font-size: unset; + } + + #page-action-buttons::before { + right: 2px; + } + + #identity-box::after { + left: 2px; + } +} + +#identity-box[pageproxystate="valid"].notSecureText > .identity-box-button, +#identity-box[pageproxystate="valid"].extensionPage > .identity-box-button, +#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button, +#urlbar-label-box, +#urlbar-zoom-button { + background-color: var(--firefoxcss-item-bg-color) !important; +} + +#urlbar-zoom-button:hover { + background-color: var(--firefoxcss-urlbar-zoom-button) !important; +} + +#urlbar-input-container #identity-box > .identity-box-button, +#tracking-protection-icon-container, +#urlbar-go-button, +#page-action-buttons .urlbar-page-action, +#notification-popup-box { + border-radius: 8px !important; +} + +#urlbar-go-button, +#tracking-protection-icon-container { + display: none !important; +} + +/*============================================================================================*/ +/* BOOKMARK BAR */ + +/* Variables for toolbar & bookmark attributes */ +:root { + --uc-bm-height: 24px; + --uc-bm-padding: 6px; +} + +/* Style for Personal Toolbar */ +#PersonalToolbar { + position: relative !important; + padding: 1px 6px !important; +} + +/* Additional padding for touch density */ +:root[uidensity="touch"] #PersonalToolbar { + --uc-bm-padding: 6px; +} + +/* Transform and delay transition of Personal Toolbar */ +#PersonalToolbar:not([customizing]) { + margin-bottom: calc( + 2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding) + ) !important; + transform: rotateX(90deg) !important; + transform-origin: top !important; + transition: transform 0.1s ease-in-out 0.6s !important; + z-index: 2 !important; +} + +/* Bookmark item padding and icon transition */ +#PlacesToolbarItems > .bookmark-item { + padding-block: var(--uc-bm-padding) !important; + padding-left: 6px !important; + padding-right: 6px !important; +} +#PlacesToolbarItems > .bookmark-item .toolbarbutton-icon { + transition: opacity 0.1s ease-in-out 0.4s !important; + opacity: 0 !important; +} + +/* Hover effect for toolbar and bookmark icon/text */ +#navigator-toolbox:hover > #PersonalToolbar, +#navigator-toolbox:hover + #PlacesToolbarItems + > .bookmark-item + .toolbarbutton-icon, +#navigator-toolbox:hover + #PlacesToolbarItems + > .bookmark-item + .toolbarbutton-text { + transition-delay: 100ms !important; + transform: rotateX(0) !important; + opacity: 1 !important; +} + +/* Bookmark item text transition */ +#PlacesToolbarItems > .bookmark-item .toolbarbutton-text { + transition: opacity 0.1s ease-in-out 0.4s !important; + opacity: 0 !important; +} + +/* Fix the white line above the bookmarks bar when it's empty */ +#personal-toolbar-empty { + padding: 2px !important; +} + +/*------------------------------------------------*/ +/* Make it good in transparent bg */ + +@media (prefers-color-scheme: dark) { + #PlacesToolbarItems > * { + background: #333333 !important; + } + + #PlacesToolbarItems > *:hover { + background: #555555 !important; + } +} + +@media (prefers-color-scheme: light) { + #PlacesToolbarItems > * { + background: #cccccc !important; + } + + #PlacesToolbarItems > *:hover { + background: #eeeeee !important; + } +} + +/*============================================================================================*/ +/* SIDE BAR */ + +/* Expand Side bar on hover */ + +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { + --sidebar-width: 40px; + --sidebar-hover-width: 350px; + background: none !important; + position: relative; + min-width: var(--sidebar-width) !important; + width: var(--sidebar-width) !important; + max-width: var(--sidebar-width) !important; + z-index: 1; +} + +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + > #sidebar { + transition: min-width 200ms ease-in-out !important; + min-width: var(--sidebar-width) !important; + will-change: min-width; + transition-delay: 0.3s !important; /* Delay on hover off */ +} + +#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover + > #sidebar { + min-width: var(--sidebar-hover-width) !important; + transition-delay: 0.1s !important; /* No delay on hover on */ +} + +/* #sidebar-box { */ +/* backdrop-filter: blur(10px); */ +/* } */ + +/*------------------------------------------------*/ +/* Hide Side bar header and line */ + +#sidebar-header, +#sidebar-splitter { + display: none !important; +} + +/*------------------------------------------------*/ +/* Sidebar Border */ + +@media (prefers-color-scheme: dark) { + #sidebar-box #sidebar, + #sidebar-box #webextpanels-window { + border-radius: 15px !important; + margin: 10px 10px 10px 5px !important; + border: 3px solid rgba(0, 0, 0, 0); + transition: border 0.3s ease !important; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } + + #sidebar-box #sidebar:hover, + #sidebar-box #webextpanels-:hover { + border: 3px solid rgba(183, 189, 248, 0.4) !important; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } +} + +@media (prefers-color-scheme: light) { + #sidebar-box #sidebar, + #sidebar-box #webextpanels-window { + border-radius: 15px !important; + margin: 10px 10px 10px 5px !important; + border: 3px solid rgba(51, 51, 51, 0.1); + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } + + #sidebar-box #sidebar:hover, + #sidebar-box #webextpanels-window:hover { + border: 3px solid rgba(51, 51, 51, 0.6); + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } +} + +/*============================================================================================*/ +/* SIDE BAR 2 (FLOORP) */ + +/* Make splitter invisible */ + +#sidebar-splitter2 { + appearance: none !important; + width: 10px !important; /* Set initial width */ + transition: + width 0.3s ease-in-out, + opacity 0.3s ease-in-out; /* Add transitions */ +} + +#sidebar-splitter2:hover { + width: 20px !important; /* Width on hover */ + opacity: 1; /* Opacity on hover */ +} + +/*------------------------------------------------*/ +/* Hide Floorp sidebar header */ + +#sidebar2-header { + max-height: 0.5em !important; + min-height: 0.5em !important; + opacity: 0 !important; + transition: + max-height 0.3s ease-in-out, + min-height 0.3s ease-in-out, + opacity 0.3s ease-in-out; +} + +#sidebar2-header:hover { + max-height: 2.5em !important; + min-height: 2.5em !important; + opacity: 1 !important; +} + +/*------------------------------------------------*/ +/* Floorp Sidebar Border */ + +@media (prefers-color-scheme: dark) { + #sidebar2-box browser { + border-radius: 15px !important; + margin: 10px 10px 10px 0px !important; + border: 3px solid rgba(0, 0, 0, 0); + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } + + #sidebar2-box browser:hover { + border: 3px solid rgba(183, 189, 248, 0.4) !important; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2); + } +} + +@media (prefers-color-scheme: light) { + #sidebar2-box browser { + border-radius: 15px !important; + margin: 10px 10px 10px 0px !important; + border: 3px solid rgba(51, 51, 51, 0.1); + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } + + #sidebar2-box browser:hover { + border: 3px solid rgba(51, 51, 51, 0.6); + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2); + } +} + +/*------------------------------------------------*/ +/* Floorp Sidebar Select Box Styling */ + +#sidebar-select-box { + align-items: center !important; +} + +.sidepanel-icon { + border-radius: 10px !important; +} + +/*------------------------------------------------*/ +/* Floorp Sidebar Border */ + +@media (prefers-color-scheme: dark) { + #sidebar-select-box { + border-radius: 15px !important; + margin: 10px 10px 10px 0px !important; + border: 3px solid rgba(0, 0, 0, 0); + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } + + #sidebar-select-box:hover { + border: 3px solid rgba(183, 189, 248, 0.4) !important; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } +} + +@media (prefers-color-scheme: light) { + #sidebar-select-box { + border-radius: 15px !important; + margin: 10px 10px 10px 0px !important; + border: 3px solid rgba(51, 51, 51, 0.1) !important; + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } + + #sidebar-select-box:hover { + border: 3px solid rgba(51, 51, 51, 0.6) !important; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } +} + +/*------------------------------------------------*/ +/* Hide random stuff coming out of Floorp Sidebar */ + +.browser-sidebar2 { + border: none !important; + border-bottom: none !important; +} + +#sidebar2-box[style="min-width: 0px; order: 6; width: 415px; max-width: 0px;"] + > * { + display: none !important; +} + +/*============================================================================================*/ +/* MAIN BROWSER */ + +/* Browser Border */ + +@media (prefers-color-scheme: dark) { + #main-window:not([sizemode="fullscreen"]) #appcontent browser { + border-radius: 15px !important; + margin: 10px 10px 10px 10px !important; + border: 3px solid rgba(0, 0, 0, 0); + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + clip-path: circle(80%) !important; + } + + #main-window:not([sizemode="fullscreen"]) #appcontent browser:hover { + border: 3px solid rgba(183, 189, 248, 0.4); + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } +} + +@media (prefers-color-scheme: light) { + #main-window:not([sizemode="fullscreen"]) #appcontent browser { + border-radius: 15px !important; + margin: 10px 10px 10px 10px !important; + border: 3px solid rgba(51, 51, 51, 0.1); + transition: border 0.3s ease; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + clip-path: circle(80%) !important; + } + + #main-window:not([sizemode="fullscreen"]) #appcontent browser:hover { + border: 3px solid rgba(51, 51, 51, 0.6); + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } +} + +/*============================================================================================*/ +/* FIND BAR */ + +/* CTRL+F Search Bar Border */ + +@media (prefers-color-scheme: dark) { + .browserContainer > findbar { + border-radius: 15px !important; + margin: 0px 15px 0px 15px !important; + border: 3px solid rgba(0, 0, 0, 0) !important; + transition: border 0.3s ease !important; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + background-image: none !important; + background-color: #181926 !important; + } + + .browserContainer > findbar:hover { + border: 3px solid rgba(183, 189, 248, 0.4) !important; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5); + } + + .browserContainer > findbar .findbar-container { + background-color: #181926 !important; + } +} + +@media (prefers-color-scheme: light) { + .browserContainer > findbar { + border-radius: 15px !important; + margin: 0px 15px 0px 15px !important; + border: 3px solid rgba(51, 51, 51, 0.1) !important; + transition: border 0.3s ease !important; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } + + .browserContainer > findbar:hover { + border: 3px solid rgba(51, 51, 51, 0.6) !important; + box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); + } +} + +/*------------------------------------------------*/ +/* Text in the center */ +.browserContainer > findbar .findbar-textbox { + border-radius: 10px !important; + text-align: center !important; +}