diff --git a/firefox-themes/modifyed/assets/fonts/SuperGlue.woff b/firefox-themes/modifyed/assets/fonts/SuperGlue.woff new file mode 100644 index 0000000..0e3110b Binary files /dev/null and b/firefox-themes/modifyed/assets/fonts/SuperGlue.woff differ diff --git a/firefox-themes/modifyed/assets/fonts/SuperGlue.woff2 b/firefox-themes/modifyed/assets/fonts/SuperGlue.woff2 new file mode 100644 index 0000000..e0039cc Binary files /dev/null and b/firefox-themes/modifyed/assets/fonts/SuperGlue.woff2 differ diff --git a/firefox-themes/modifyed/assets/icons/ff.svg b/firefox-themes/modifyed/assets/icons/ff.svg new file mode 100644 index 0000000..ace7cf7 --- /dev/null +++ b/firefox-themes/modifyed/assets/icons/ff.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/firefox-themes/modifyed/assets/icons/github.svg b/firefox-themes/modifyed/assets/icons/github.svg new file mode 100644 index 0000000..d5e6491 --- /dev/null +++ b/firefox-themes/modifyed/assets/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/firefox-themes/modifyed/assets/icons/githubB.svg b/firefox-themes/modifyed/assets/icons/githubB.svg new file mode 100644 index 0000000..37fa923 --- /dev/null +++ b/firefox-themes/modifyed/assets/icons/githubB.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/firefox-themes/modifyed/assets/icons/hl.svg b/firefox-themes/modifyed/assets/icons/hl.svg new file mode 100644 index 0000000..0194440 --- /dev/null +++ b/firefox-themes/modifyed/assets/icons/hl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/firefox-themes/modifyed/assets/icons/word.svg b/firefox-themes/modifyed/assets/icons/word.svg new file mode 100644 index 0000000..b5b388a --- /dev/null +++ b/firefox-themes/modifyed/assets/icons/word.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/firefox-themes/modifyed/userChrome.css b/firefox-themes/modifyed/userChrome.css new file mode 100644 index 0000000..3889d98 --- /dev/null +++ b/firefox-themes/modifyed/userChrome.css @@ -0,0 +1,973 @@ +/*! SHIMMMER v2.14 */ +/*? https://github.com/nuclearcodecat/shimmer */ + + +/* browser toolbox prompt hack - set devtools.debugger.prompt-connection to false */ + +/*? shimmer variables */ +:root { + /*? urlbar border radius */ + --shimmer-urlbar-rounding: 8px; + --shimmer-urlbar-inner-rounding: calc(var(--shimmer-urlbar-rounding) * .75); + + /*? max tab width */ + --shimmer-tab-max-width: 14em; + /*? min tab width */ + --shimmer-tab-min-width: 9em; + + /* --shimmer-tab-height: 32px; */ + /* --shimmer-titlebar-height: calc(var(--shimmer-tab-height) + 6px); */ + --shimmer-tab-border-radius: 8px; + --shimmer-browser-border-radius8; + --shimmer-top-bottom-browser-margin: 8px; + + /* could be hardcoded in some places... */ + --shimmer-btn-anim: background 0.075s linear, opacity 0.075s linear; + + /*? gap between window control buttons */ + --shimmer-winctr-gap: 5px; + /*? margin around winctr buttons */ + --shimmer-winctr-margin: 12px; +} + +/*? overwritten variables */ +:root { + --arrowpanel-menuitem-margin-inline: 5px !important; + --arrowpanel-header-min-height: calc(calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)) * 0.5) !important; + --arrowpanel-menuitem-padding: 4px 8px !important; + --arrowpanel-border-radius: 8px !important; + --arrowpanel-menuitem-border-radius: calc(var(--arrowpanel-border-radius) / 1.65) !important; + /* --var-tab-min-height: 10px !important; */ + /* --tab-border-radius: var(--shimmer-tab-border-radius) !important; */ + /*? disable opacity change when tabbed out */ + --inactive-titlebar-opacity: 1 !important; + --splitter-width: 8px !important; +} + +/*? customize context menu */ +/* #context-back, */ +/* #context-bookmarklink, */ +/* #context-bookmarkpage, */ +/* #context-forward, */ +/* #context-inspect, */ +#context-inspect-a11y, +/* #context-navigation, */ +/* #context-openlink, */ +/* #context-openlinkintab, */ +/* #context-openlinkinusercontext-menu, */ +/* #context-openlinkprivate, */ +#context-pocket, +/* #context-reload, */ +#context-savelink, +#context-savelinktopocket, +/* #context-savepage, */ +/* #context-searchselect, */ +/* #context-selectall, */ +/* #context-sendlinktodevice, */ +/* #context-sendpagetodevice, */ +/* #context-sep-navigation, */ +/* #context-sep-open, */ +/* #context-sep-selectall, */ +#context-sep-sendlinktodevice, +#context-sep-sendpagetodevice, +/* #context-sep-viewbgimage, */ +#context-sep-viewsource, +/* #context-stop, */ +/* #context-viewbgimage, */ +/* #context-viewinfo, */ +#context-viewpartialsource-selection, +#context-viewsource, +/* #inspect-separator, */ +#screenshots_mozilla_org_create-screenshot { + display: none !important; +} + +/*? slim scrollbars everywhear!!!! */ +* { + scrollbar-width: thin !important; +} + +@media (-moz-bool-pref: "shimmer.hide-sidebar-button") { + #sidebar-button { + display: none !important; + } +} + +/*! ====== titlebar ====== */ + +.toolbarbutton-animatable-box>image { + /*? change reload button animation length */ + animation-duration: 0.7s !important; + animation-timing-function: ease-in-out !important; +} + +/*? change bookmark star button to yellow_ when starred */ +#star-button[starred="true"] { + fill: #f7e617 !important; + stroke: #000 !important; + stroke-width: 2px !important; + filter: drop-shadow(0px 0px 0.5px #000) !important; +} + +/*? taller navbar */ +@media not (-moz-bool-pref: "shimmer.shorter-navbar") { + #navigator-toolbox, #nav-bar { + min-height: 50px !important; + } +} +#TabsToolbar { + height: 100% !important; + visibility: collapse !important; + +} + + +/*? make extensions buttons reach the entire height of navbar */ +#nav-bar-customization-target toolbarbutton { + height: 100% !important; +} + +#urlbar { + margin: 0 !important; +} + + +/*? move the window control buttons to the same row as urlbar */ +#main-window[titlepreface="​"] #navigator-toolbox { + display: grid !important; + grid-template-rows: repeat(4, auto); +} +#PersonalToolbar:not([collapsed="true"]) { + padding-bottom: calc(var(--shimmer-top-bottom-browser-margin) / 2) !important; +} +#main-window[titlepreface="​"] #PersonalToolbar { + grid-area: 4 / 1 / 5 / 3 !important; +} +#main-window[titlepreface="​"] #toolbar-menubar { + grid-area: 1 / 1 / 2 / 3 !important; +} +@media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") { + #navigator-toolbox { + grid-template-columns: 1fr auto !important; + } + + #main-window[titlepreface="​"] #nav-bar { + grid-area: 3 / 1 / 4 / 2 !important; + } + + @media (-moz-bool-pref: "shimmer.nightly") { + #main-window[titlepreface="​"] #TabsToolbar { + grid-area: 3 / 2 / 4 / 3 !important; + } + } + @media not (-moz-bool-pref: "shimmer.nightly") { + #main-window[titlepreface="​"] #titlebar { + grid-area: 3 / 2 / 4 / 3 !important; + } + } +} +@media (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") { + #navigator-toolbox { + grid-template-columns: auto 1fr !important; + } + + #main-window[titlepreface="​"] #nav-bar { + grid-area: 3 / 2 / 4 / 3 !important; + } + + @media (-moz-bool-pref: "shimmer.nightly") { + #main-window[titlepreface="​"] #TabsToolbar { + grid-area: 3 / 1 / 4 / 2 !important; + } + } + @media not (-moz-bool-pref: "shimmer.nightly") { + #main-window[titlepreface="​"] #titlebar { + grid-area: 3 / 1 / 4 / 2 !important; + } + } + + #TabsToolbar { + flex-direction: row-reverse !important; + } +} + +/*TODO possible fix for macos icons not centered (#3) */ +.titlebar-buttonbox-container { + justify-content: space-evenly !important; + align-items: center !important; +} +.titlebar-buttonbox { + height: 100% !important; + align-items: center !important; +} +.titlebar-button { + height: 100% !important; +} + +/*? make the window grabbable at the top, but not the window control buttons */ +/* #main-window[titlepreface="​"] #nav-bar { + border-top: 1px solid rgba(0, 0, 0, 0) !important; +} +#main-window[titlepreface=""] .toolbar-items { + margin-top: 1px !important; +} */ + +/*? hide native tabs */ +#main-window[titlepreface="​"] #TabsToolbar > .toolbar-items { + display: none !important; +} + +/*? make navigation buttons white_ when sidebar open */ +#main-window[titlepreface="​"] #navigator-toolbox { + background: var(--toolbar-bgcolor) !important; +} + +/*? hide spacers when sidebery open */ +#main-window[titlepreface="​"] #TabsToolbar .titlebar-spacer { + display: none; +} + +/*! === menubar === */ + +/*? hide regular winctr buttons when menubar is open */ +@media (-moz-bool-pref: "shimmer.nightly") { + #toolbar-menubar:not([inactive]) ~ #TabsToolbar .titlebar-buttonbox-container { + display: none !important; + } +} + +#toolbar-menubar:not([inactive]) { + width: 100vw !important; + overflow: hidden !important; + min-height: 0 !important; + height: auto !important; +} + +/*? hide if sidebery open and stable release */ +@media not (-moz-bool-pref: "shimmer.nightly") { + #main-window[titlepreface="​"] #titlebar #toolbar-menubar { + display: none !important; + } +} + +/*! === urlbar === */ + +/*? rounded url bar and box */ +#urlbar-background { + background: var(--toolbar-field-background-color) !important; + /* background: color-mix(in srgb, var(--toolbar-bgcolor) 90%, rgba(0, 0, 0, 255)) !important; */ + border-radius: var(--shimmer-urlbar-rounding) !important; + transition: all 0.1s linear !important; +} + +/*? rounded buttons inside urlbar (firefox logo on about pages, padlock, trans, etc.) */ +#identity-box > box, #tracking-protection-icon-container, #page-action-buttons > *, #urlbar-revert-button-container, #urlbar-searchmode-switcher { + border-radius: var(--shimmer-urlbar-rounding) !important; +} + +/*? needed for popup transition to work */ +#urlbar { + margin-top: 0 !important; + transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important; +} + +/*? make the background of extended urlbar move down and BROKEN drop a blur behing */ +#urlbar[breakout-extend] { + position: fixed !important; + margin-top: 12vh !important; + /* margin-left: 8vw !important; */ + z-index: 9999 !important; + transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important; + /* backdrop-filter: blur(8px) !important; */ + background: rgba(0, 0, 0, 0) !important; + /* border-radius: 20px; */ + left: 10% !important; + width: calc(100vw - 20%) !important; +} + +#urlbar[breakout-extend] #urlbar-background { + background: var(--toolbar-field-focus-background-color) !important; + transition: all 0.1s linear !important; +} + +/*? urlbox backdrop */ +#urlbar[breakout-extend]::before{ + content: '' !important; + width: 100vw !important; + height: 100vh !important; + position: fixed !important; + pointer-events: none !important; + overflow: hidden !important; + top: 0 !important; + left: 0 !important; + background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 65%, rgba(0, 0, 0, 0)) !important; +} + + +@media (min-width: 800px) { + /*? urlbar bigger text */ + #urlbar[breakout-extend] #urlbar-input { + font-size: 1.5rem !important; + } + + /*? taller urlbar for bigger text when extended */ + #urlbar[breakout-extend] .urlbar-input-container { + height: 48px !important; + } +} + +/*? centered text when urlbar not in use */ +#urlbar:not(:is([breakout-extend])) #urlbar-input { + text-align: center !important; +} + +/*? center the text further */ +#urlbar-input { + margin-right: 40px !important /* width of identity box */; +} + +/*? hide search one offs */ +@media not (-moz-bool-pref: "shimmer.show-search-one-offs") { + .search-one-offs { + display: none !important; + } +} + +/*? fix for floating urlbar */ +@media (-moz-bool-pref: "shimmer.nightly") { + #urlbar:not([breakout-extend]) { + top: auto !important; + } +} + +/*? hide 1px line below urlbar */ +.urlbarView-body-inner { + border-top: none !important; +} + +/*? hide border below top bar */ +#navigator-toolbox { + border: 0px !important; +} + +/*? make rounded borders have nice color */ +#browser { + background: var(--toolbar-bgcolor) !important; +} + +/*? if popup window, make urlbar smaller and centered */ +#main-window[chromehidden*="toolbar"] #urlbar-container { + max-width: 90% !important; + margin-left: auto !important; + margin-right: auto !important; +} + +/*! === findbar === */ + +findbar { + border: 0 !important; + /*? relative for margins */ + position: relative !important; + border-radius: 16px !important; + bottom: 60px !important; + margin-left: auto !important; + margin-right: auto !important; + width: 530px !important; + height: 3rem !important; + display: flex !important; + align-items: center !important; + /*? fix for relative positioning */ + margin-top: -40px !important; + border: 0 !important; + transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; + overflow-x: visible !important; + filter: drop-shadow(0px 0px 1px color-mix(in srgb, var(--lwt-text-color) 60%, rgba(0, 0, 0, 0))); +} + +findbar[hidden]{ + margin-bottom: 0 !important; + opacity: 0 !important; + background: rgba(0, 0, 0, 0) !important; + transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; +} + +findbar:not([hidden]) { + opacity: 1 !important; + background: var(--lwt-accent-color) !important; +} + +.findbar-container, .findbar-container > hbox { + height: 100% !important; +} + +.findbar-container { + margin-left: 7px !important; +} + +/*? change text to icons for smaller findbar */ +.findbar-container checkbox::after { + height: 16px; + font-size: 14px; + background-size: cover; + display: flex; + align-items: center; + -moz-context-properties: fill; + fill: currentColor; + color: inherit; +} +.findbar-highlight::after { + content: ''; + background: url(./assets/icons/hl.svg) no-repeat; + width: 18px; + background-position-y: -1px; +} +.findbar-match-diacritics::after { + content: 'ąâ'; + font-weight: 600; +} +.findbar-entire-word::after { + content: ''; + background: url(./assets/icons/word.svg) no-repeat; + width: 20px; + background-position-y: -2px; +} +.findbar-case-sensitive::after { + content: 'Aa'; + font-weight: 600; +} + +/*? hide all text for findbar checkboxes */ +.findbar-container checkbox > .checkbox-label-box { + display: none !important; +} + +.findbar-textbox { + border-radius: 11px !important; + font-family: monospace !important; + padding: 5px 8px !important; + width: 16em !important; +} + +.findbar-closebutton:hover { + opacity: 1 !important; + background: var(--toolbarbutton-hover-background) !important; +} +.findbar-closebutton { + opacity: 1 !important; + background: var(--lwt-accent-color) !important; + /* wasn't square for some reason */ + width: auto !important; +} + +/*? move matched amount below main findbar */ +.found-matches { + position: absolute !important; + padding: 20px 13px 3px 10px !important; + top: 14px !important; + background: var(--lwt-accent-color) !important; + /* border: solid var(--arrowpanel-border-color) 1px !important; */ + left: -12px !important; + border-bottom-left-radius: 12px !important; + border-bottom-right-radius: 12px !important; + z-index: 9 !important; +} +.findbar-find-status { + display: none !important; +} +.found-matches::before { + z-index: 8 !important; +} +.found-matches::after { + position: absolute; + display: block; + content: ''; + width: 16px; + height: 22px; + background: var(--lwt-accent-color); + right: -6px; + top: 12px; + transform: rotate(45deg); +} +.findbar-textbox { + z-index: 10 !important; +} + + +/*? compact private browsing indicator */ +#private-browsing-indicator-with-label > label, .private-browsing-indicator-label { + display: none !important; +} +.private-browsing-indicator-icon { + width: 24px !important; + height: 24px !important; +} + +#PanelUI-menu-button { + display: flex !important; +} + +@media (max-width: 620px) { + #PanelUI-menu-button { + display: none !important; + } + + #unified-extensions-button { + margin-right: 12px !important; + } +} + +/*? make the go button bigger in urlbar */ +.urlbar-go-button { + height: 100% !important; + width: auto !important; + padding: 1.5% !important; + border-radius: var(--shimmer-urlbar-inner-rounding) !important; +} + + +/*? rounded results */ +.urlbarView-row { + border-radius: var(--shimmer-urlbar-inner-rounding) !important; +} +/*? for some reason the results get clipped so adding some padding */ +.urlbarView { + padding: 0 5px !important; +} + +.urlbarView-row:hover { + background: var(--urlbar-box-hover-bgcolor) !important; +} + +/*? small separator between results and search bar */ +/* .urlbarView-body-outer { + border-top: 1px rgba(0, 0, 0, 0.15) solid !important; +} */ +.urlbarView-body-outer::before { + content: ''; + width: 95%; + margin-left: auto; + margin-right: auto; + height: 1px; + background: #aaa; + opacity: 0.2; + display: block; + mix-blend-mode: difference; +} +.urlbarView-body-inner { + border: 0 !important; +} + +/*? increase padding in urlbar */ +#urlbar-results { + padding-bottom: 8px !important; +} + +/*? seamless transition */ +/* #sidebar-box { + box-shadow: -10px -100px 0px 100px var(--toolbar-bgcolor), + 0 0px 20px 15px var(--lwt-accent-color); +} */ +/*? hide the hiding box shadow */ +/* #navigator-toolbox { + z-index: 2 !important; +} */ + +/*? add margin to left of browser when sidebar hidden */ +#sidebar-box[hidden="true"] ~ #tabbrowser-tabpanels { + padding-left: 3px !important; +} + +#tabbrowser-tabpanels, #sidebar-box { + background: rgba(0, 0, 0, 0) !important; +} + +/*! === floating statuspanel === */ + +/*? move statuspanel */ +#statuspanel { + bottom: 11px !important; + left: 11px !important; +} +#statuspanel[mirror] { + left: auto !important; + right: 18px !important; +} + +/*? round statuspanel */ +#statuspanel, #statuspanel-label { + border-radius: 10px !important; +} + +/*? border and alternative statuspanel padding */ +#statuspanel-label { + padding: 3px 8px !important; + border: solid 1px var(--button-background-color-active) !important; +} + +/*? color the statuspanel */ +#statuspanel-label { + background: var(--lwt-accent-color) !important; + color: var(--lwt-text-color) !important; +} + +#statuspanel, #statuspanel[type="overLink"] { + transition: opacity 75ms, visibility 75ms !important; +} + +/*! === tabs === */ + +/*? tab on titlebar that's not pinned */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]) { + /*? min tab width */ + min-width: var(--shimmer-tab-min-width) !important; + /*? max tab width */ + max-width: var(--shimmer-tab-max-width) !important; +} + +/*? make tab background round and small */ +.tab-background { + min-height: 0 !important; + border: solid 1px color-mix(in srgb, var(--tab-selected-bgcolor) 90%, #000); + box-shadow: 0 0 0 #fff !important; + /* CHANGED check overwritten vars for tab rounding */ + border-radius: var(--shimmer-tab-border-radius) !important; +} + +/*? show tab close buttons when hovering tab */ +#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned]):hover .tab-close-button { + display: block !important; +} + +/*? hide shadow on tabbrowser (overflow already indicated by arrow clickable) */ +spacer[part="overflow-end-indicator"], spacer[part="overflow-start-indicator"] { + display: none !important; +} + +/*? change tab background color */ +.tab-background { + background: color-mix(in srgb, var(--tab-selected-bgcolor) 20%, rgba(0, 0, 0, 0)); +} + +/*? hide firefox view separator */ +#tabbrowser-tabs { + border: 0 !important; +} + +/*? tab height and x button pos */ +#tabbrowser-tabs[orient="vertical"] .tab-background {min-height: 28px !important;} + +#tabbrowser-tabs[orient="vertical"][expanded] { + min-width: 400px !important; +} + +@media not (-moz-bool-pref: "shimmer.taller-tabs") { + #tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab { + min-height: 38px !important; + height: 38px !important; + } + + .tab-close-button { + margin-inline-end: -7px !important; + } +} +@media (-moz-bool-pref: "shimmer.taller-tabs") { + #tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab { + min-height: 45px !important; + height: 45px !important; + } + + .tab-close-button { + margin-inline-end: -3px !important; + } +} + +/*? make inner tab html occupy whole height (for some reason wouldn't happen to pinned tab) */ +.tab-stack { + height: 100% !important; +} + +/*? don't change background behind tabs even when window inactive */ +#navigator-toolbox, #navigator-toolox:-moz-window-inactive { + background: var(--lwt-accent-color) !important; +} + +/*? rounded tab close button */ +.tab-close-button { + border-radius: var(--shimmer-tab-border-radius) !important; +} + +.tab-close-button, .tab-close-button:hover { + transition: var(--shimmer-btn-anim) !important; +} + +/*? reduce max tab width, breaks everything lol */ +/* .tabbrowser-tab { + max-width: 14em !important; +} */ + +/*? minimal selected tab width */ +@media not (-moz-bool-pref: "shimmer.dont-expand-selected-tab") { + #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned])[selected] { + min-width: 14em !important; + } +} + +/*? fix for moving tabs looking weird */ +#tabbrowser-tabs { + &[orient="horizontal"] { + &[movingtab] { + padding-bottom: 0 !important; + margin-bottom: 0 !important; + } + } +} + +/*! === sidebar === */ + +/*? hide header, or give good color */ +@media not (-moz-bool-pref: "shimmer.show-sidebar-header") { + #sidebar-header { + display: none !important; + } +} +#sidebar-header { + background: var(--lwt-accent-color) !important; +} + +/*? remove ugly border below "tabs" text */ +#sidebar-header { + border-bottom: 0 !important; +} + +#sidebar-box:not([hidden]), #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox { + margin-bottom: var(--shimmer-top-bottom-browser-margin) !important; +} + +#sidebar-box:not([hidden]) { + margin-left: 0 !important; + margin-right: var(--splitter-width) !important; +} +@media (-moz-bool-pref: "shimmer.sidebar-right-side") { + #sidebar-box:not([hidden]) { + margin-right: 0 !important; + margin-left: var(--splitter-width) !important; + } +} + +#sidebar-splitter { + --sidebar-splitter: 8px !important; + border: 0 !important; +} + +@media not (-moz-bool-pref: "shimmer.show-sidebar-header-close-button") { + #sidebar-close { + display: none !important; + } +} + +#sidebar-close { + /* ch */ + margin-right: 10px !important; +} + +/*? rounded browser on left edge */ +#sidebar-box:not([hidden]) ~ #tabbrowser-tabbox { + border-radius: 0; + border-top-left-radius: var(--shimmer-browser-border-radius) !important; + border-bottom-left-radius: var(--shimmer-browser-border-radius) !important; + overflow: hidden !important; +} + +/*? rounded sidebar on right edge */ +#sidebar-box { + border-top-right-radius: var(--shimmer-browser-border-radius) !important; + border-bottom-right-radius: var(--shimmer-browser-border-radius) !important; + overflow: hidden !important; +} + +@media (-moz-bool-pref: "shimmer.sidebar-right-side") { + /*? rounded browser on right edge */ + #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox { + border-radius: 0 !important; + border-top-right-radius: var(--shimmer-browser-border-radius) !important; + border-bottom-right-radius: var(--shimmer-browser-border-radius) !important; + } + + /*? rounded sidebar on left edge */ + #sidebar-box { + border-radius: 0 !important; + border-top-left-radius: var(--shimmer-browser-border-radius) !important; + border-bottom-left-radius: var(--shimmer-browser-border-radius) !important; + } +} + +/*? animated sidebar-box hidden animation, breaks native tabs because the sidebery titlepreface reappears when #sidebar-box display prop isn't none */ +/* #sidebar-box[hidden] { + visibility: hidden !important; + min-width: 0 !important; + width: 0 !important; + transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; + opacity: 0 !important; +} +#sidebar-box:not([hidden]) { + opacity: 1 !important; +} + +#sidebar-splitter:not([state="dragging"]) ~ #tabbrowser-tabbox, #sidebar-splitter:not([state="dragging"]) ~ #sidebar-box, #sidebar-splitter[hidden] ~ #sidebar-box { + transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; +} + +#sidebar-splitter[hidden] { + display: flex !important; + width: 0px !important; +} */ + +/*! === menus === */ +/*? consistent color for ctx menus */ +.menupopup-arrowscrollbox, #searchmode-switcher-popup slot[part="content"] { + background: var(--lwt-accent-color, var(--panel-background)) !important; + border-radius: var(--arrowpanel-border-radius) !important; + border: 0 !important; + outline: solid 1px var(--lwt-tab-line-color) !important; +} + +/*? round context menu items */ +/* --panel-background */ +menuitem, menu, .menu-iconic, #searchmode-switcher-popup tooblarbutton { + border-radius: var(--arrowpanel-menuitem-border-radius) !important; + /* margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; */ + padding: var(--arrowpanel-menuitem-padding) !important; +} +/*? better hover color */ +/* menuitem:hover, menu:hover, .menu-iconic:hover, #searchmode-switcher-popup:hover tooblarbutton { + background: var(--panel-item-hover-bgcolor) !important; +} */ +menu, menuitem { + &:where([_moz-menuactive]) { + &:not([disabled="true"]) { + background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 85%, var(--lwt-text-color, var(--panel-color))) !important; + } + background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 92.5%, var(--lwt-text-color, var(--panel-color))) !important; + } +} + +/*? fading backgrounds on buttons */ +menuitem, toolbarbutton > stack, toolbaritem, toolbarbutton, toolbarbutton > image, .urlbarView-row, menu, +menuitem:hover, toolbarbutton:hover > stack, toolbaritem:hover, toolbarbutton:hover, toolbarbutton:hover > image, .urlbarView-row:hover, menu:hover, +.findbar-closebutton, .findbar-closebutton:hover +{ + transition: var(--shimmer-btn-anim) !important; +} + +/*? */ +#context-navigation menuitem { + padding: 2px !important; +} + +/*? smaller manage extensions button */ +#unified-extensions-manage-extensions { + padding: 5px 8px !important; + margin-bottom: 5px !important; +} + +/*? larger titles in panels like extensions */ +.panel-header { + font-size: 1.35rem !important; +} + +/*? panelui smaller margin */ +.panel-subview-body { + margin-bottom: 5px !important; +} + +.panel-subview-body { + padding: 5px 0 0 0 !important; +} + +treecol { + transition: var(--shimmer-btn-anim) !important; +} + +/*! === autoscroller === */ + +/* why no work */ +/* #autoscroller slot[part="content"] { + --panel-background: var(--lwt-accent-color) !important; + + background-color: var(--panel-background) !important; + background-image: var(--autoscroll-background-image) !important; + background-size: cover !important; + background-position: center !important; + background-repeat: no-repeat !important; + border-radius: 12px !important; +} */ + +/*! === compact, macos-like winctr buttons === */ +@media not (-moz-bool-pref: "shimmer.disable-compact-winctr-buttons") { + #toolbar-menubar .titlebar-buttonbox > toolbarbutton { + &:hover > image { + padding: 2px 0 !important; + } + } + + #TabsToolbar .titlebar-buttonbox > toolbarbutton { + &:hover > image { + padding: 4px 0 !important; + } + } + + .titlebar-buttonbox > toolbarbutton { + background: rgba(0, 0, 0, 0) !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + + & > image { + width: 14px !important; + height: 14px !important; + border-radius: 12px !important; + transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; + list-style-image: none !important; + box-sizing: content-box !important; + padding: 0px !important; + background: var(--toolbarbutton-hover-background) !important; + } + + &:hover > image { + transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important; + } + } + .titlebar-close { + /* background: hsl(355, 86%, 49%) url(chrome://browser/skin/window-controls/close.svg) no-repeat center !important; */ + &:hover > image { + background: #fc5753 !important; + } + padding-right: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important; + padding-left: var(--shimmer-winctr-gap) !important; + } + .titlebar-min { + &:hover > image { + background: #fdbc40 !important; + } + padding-left: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important; + padding-right: var(--shimmer-winctr-gap) !important; + } + .titlebar-max, .titlebar-restore { + &:hover > image { + background: #33c748 !important; + } + padding: 0 var(--shimmer-winctr-gap) !important; + } + @media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") { + #main-window[titlepreface="​"] #toolbar-menubar:not([inactive]) #PanelUI-menu-button { + padding-right: 0 !important; + } + } + /* .titlebar-buttonbox-container { + margin: 0 var(--shimmer-winctr-margin) 0 0 !important; + } */ +} + + +/* review: todo, change, fix */ +/*TODO some of the usual buttons that appear on the right-click context menu are hidden. right now you can change them at the top of `userChrome.css`. i will maybe later introduce `about:config` variables for easier customization */ +/*TODO autoscroller styles */ diff --git a/firefox-themes/modifyed/userContent.css b/firefox-themes/modifyed/userContent.css new file mode 100644 index 0000000..7d7258b --- /dev/null +++ b/firefox-themes/modifyed/userContent.css @@ -0,0 +1,148 @@ +@font-face { + font-family: 'Super Glue'; + src: url('./assets/fonts/SuperGlue.woff2') format('woff2'), + url('./assets/fonts/SuperGlue.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + + + +:root { + --shimmer-urlbar-rounding: 100px; +} + +*:not(.tabs-menu) { + scrollbar-width: thin !important; +} + +.activity-stream .outer-wrapper > main, .showPrivate { + /* background: var(--newtab-background-color-secondary) !important; */ + background: rgba(150, 150, 150, 0.35) !important; + border-radius: 48px; + height: auto !important; + margin-top: auto !important; + margin-bottom: auto !important; + min-width: 250px !important; +} +.activity-stream .outer-wrapper > main { + padding: 2rem 0 0 0 !important; + mix-blend-mode: luminosity !important; +} + +.showPrivate { + padding: 2rem !important; +} + +.activity-stream .logo, .showPrivate .logo { + display: none !important; +} + +.activity-stream .logo-and-wordmark, .showPrivate .logo-and-wordmark { + margin-bottom: 24px !important; +} + +.activity-stream .wordmark, .showPrivate .wordmark { + background: none !important; + width: auto !important; + height: auto !important; + display: flex !important; + align-items: center !important; + margin: 0 !important; + gap: 1.5rem !important; +} +.activity-stream .wordmark::after, .showPrivate .wordmark::after { + content: 'firefox'; + font-family: 'super glue'; + color: #fff !important; + filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.15)); + /* mix-blend-mode: color-burn !important; */ + font-size: 4.25rem; + letter-spacing: .25rem; +} +.activity-stream .wordmark::before, .showPrivate .wordmark::before { + content: ''; + background: url(./assets/icons/ff.svg); + background-size: 100% 100%; + width: 100px; + height: 100px; + display: block; +} +@media only screen and (max-width: 609px) { + .activity-stream .wordmark::after, .showPrivate .wordmark::after { + display: none !important; + } + + .activity-stream .outer-wrapper > main, .showPrivate { + width: 95% !important; + margin-right: auto !important; + margin-left: auto !important; + } + + .activity-stream .wordmark::before, .showPrivate .wordmark::before { + width: 70px; + height: 70px; + } + + .activity-stream .fake-textbox, .showPrivate .fake-textbox { + display: none !important; + } +} + +.activity-stream .search-handoff-button, .showPrivate .search-handoff-button { + border-radius: var(--shimmer-urlbar-rounding) !important; +} +.activity-stream .search-handoff-button { + mix-blend-mode: color-burn !important; +} + +.activity-stream .search-inner-wrapper, .showPrivate .logo-and-wordmark { + background: transparent !important; +} +.activity-stream .search-inner-wrapper { + mix-blend-mode: color-burn !important; +} + +.activity-stream .wallpaper-attribution { + position: static !important; + margin-left: auto !important; + margin-right: auto !important; + mix-blend-mode: luminosity !important; + color: #fff !important; + filter: drop-shadow(0px 0px 1.5px rgba(0, 0, 0, 0.3)) !important; +} + +.activity-stream .outer-wrapper, .showPrivate .outer-wrapper { + display: flex !important; + padding: 48px !important; +} + +.activity-stream .customize-menu .close-button-wrapper::before { + content: 'shimmer version 2.14, check for updates at'; + display: block; + position: absolute; + top: 35%; + font-size: 0.8rem; +} + +.activity-stream .customize-menu .close-button-wrapper::after { + content: 'github.com/nuclearcodecat/shimmer'; + display: block; + color: color-mix(in srgb, #aaa 50%, var(--lwt-sidebar-text-color) 50%); + position: absolute; + bottom: 0; + font-size: 0.875rem; +} + +section[data-section-id="topsites"] { + margin-bottom: 0 !important; +} +.wallpaper-attribution { + margin-top: 0 !important; +} + +.showPrivate .info { + border-radius: 30px !important; +} +