commit 9031d22b2cd217d4943ca7e4fdabdd8cf01f63a1
parent 103bb3d3f9339dc69c83e60846193bc09c7b9912
Author: awy <awy@awy.one>
Date: Sun, 4 May 2025 16:08:22 +0300
square everything
Diffstat:
| M | userChrome.css | | | 705 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- |
| M | userContent.css | | | 884 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- |
2 files changed, 1519 insertions(+), 70 deletions(-)
diff --git a/userChrome.css b/userChrome.css
@@ -1,3 +1,670 @@
+/* USER FACING VARIABLES -------------------------------------------------------------------------------------- */
+/* this file does NOT have to be updated between versions */
+
+/* NOTE: restart Firefox to apply any changes */
+
+:root {
+
+
+ /* custom accent color to be used across Firefox*/
+ /* use hexcode or color name */
+ --custom-accent-color: #ebcb8b;
+
+
+ /* color of the tab dividers / separators */
+ /* set variable = none, to disable dividers */
+ --custom-tab-divider-color: #535354;
+
+
+ /* sets the height of the tabs toolbar */
+ /* legacy height (<= v1.6.2) = 33px */
+ /* functionality broken as of FF 108 - WIP */
+ /* --tab-bar-height: 35px; */
+
+
+ /* set the size of sync profile pic */
+ /* 1.0 = 100% scale */
+ --sync-avatar-scale: 1.0;
+
+ /* custom paddings/margins for the menu itmes */
+ /* for reference: */
+ --custom-menuitem-padding-vertical: 6px;
+ --custom-menuitem-padding-horizontal: 8px;
+ --custom-menuitem-margin: 4px;
+
+}
+
+/* CUSTOM ACCENT COLORS -------------------------------------------------------------------------------------- */
+
+:root {
+ --lwt-toolbarbutton-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important;
+ --toolbarbutton-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important;
+ --button-primary-bgcolor: var(--custom-accent-color, #0a84ff) !important;
+ --button-primary-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --button-primary-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ --buttons-primary-button-bgcolor: var(--custom-accent-color, #0a84ff) !important;
+ --buttons-primary-button-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --buttons-primary-button-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ --button-background-color-primary: var(--custom-accent-color, #0a84ff) !important;
+ --button-background-color-primary-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --button-background-color-primary-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ --brand-color-accent: var(--custom-accent-color, #0a84ff) !important;
+ --brand-color-accent-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --brand-color-accent-active: var(--custom-accent-color, #0a84ff) !important;
+ --color-accent-primary: var(--custom-accent-color, #0a84ff) !important;
+ --color-accent-primary-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --color-accent-primary-pressed: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ --tab-attention-icon-color: var(--custom-accent-color, #0a84ff) !important;
+ --checkbox-checked-bgcolor: var(--custom-accent-color, #0a84ff) !important;
+ --checkbox-checked-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --checkbox-checked-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ --lwt-brighttext-url-color: var(--custom-accent-color, #0a84ff) !important;
+ --lwt-popup-brighttext-url-color: var(--custom-accent-color, #0a84ff) !important;
+ --focus-outline-color: var(--custom-accent-color, #0a84ff) !important;
+ --toolbar-field-focus-border-color: var(--custom-accent-color, #0a84ff) !important;
+ --link-color: var(--custom-accent-color, #0a84ff) !important;
+ /*Star Highlight & Download Finished*/
+ --lwt-toolbarbutton-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important;
+ --lwt-toolbar-field-icon-fill-attention: var(--custom-accent-color, #0a84ff) !important;
+}
+
+.urlbarView-url,
+.popup-notification-learnmore-link.text-link {
+ color: var(--custom-accent-color, #0a84ff) !important;
+}
+
+/* colors various popup windows (e.g. edit bookmarks, close window menus) */
+@-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
+
+ html:not([role="dialog"]),
+ html:not([role="dialog"]) *,
+ html:not([role="dialog"]) body.activity-stream,
+ window:not([chromehidden]),
+ window:not([chromehidden])>dialog {
+ --in-content-primary-button-background: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ }
+}
+
+/* color report broken side link */
+#report-broken-site-popup-send-more-info-link {
+ color: var(--custom-accent-color, #0a84ff) !important;
+}
+
+/* color the update/info dot in app menu */
+:root {
+ --panel-banner-item-info-icon-bgcolor: var(--custom-accent-color, #0a84ff) !important;
+ --panel-banner-item-update-supported-bgcolor: var(--custom-accent-color, #0a84ff) !important;
+}
+
+
+/* color the left strip in notification banners (purple-yellow gradient -> accent color) */
+.infobar::before {
+ background-image: linear-gradient(var(--custom-accent-color, #0a84ff), var(--custom-accent-color, #0a84ff)) !important;
+}
+
+
+/* color the password autofill highlight color on click */
+.autocomplete-richlistitem {
+ &[selected] {
+ background-color: color-mix(in srgb, white 15%, var(--custom-accent-color, #0a84ff)) !important;
+ }
+}
+
+/* color the "manage themes" link on the customize page */
+#customization-lwtheme-link.text-link {
+ color: var(--custom-accent-color, #0a84ff) !important;
+}
+
+/* replace the mozilla purple to yellow gradient in appmenu */
+/* (enabled by default for default, light, and dark themes) */
+:root:not(:-moz-lwtheme),
+:root[lwt-default-theme-in-dark-mode],
+/* based on https://github.com/black7375/Firefox-UI-Fix/issues/288 */
+:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"],
+/* Light Theme */
+:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]
+
+/* Dark Theme */
+ {
+ --panel-separator-zap-gradient: linear-gradient(var(--custom-accent-color, #0a84ff), var(--custom-accent-color, #0a84ff)) !important;
+}
+
+/* can be manually overridden by pref */
+@media (-moz-bool-pref: "browser.appmenugradient.overwrite") {
+ :root {
+ --panel-separator-zap-gradient: linear-gradient(var(--custom-accent-color, #0a84ff), var(--custom-accent-color, #0a84ff)) !important;
+ }
+}
+
+
+/* TITLE BAR ----------------------------------------------------------------------------------------------- */
+
+/* override mozilla min/max/close buttons with default ones (only relevant on linux) */
+@media (-moz-gtk-csd-available) {
+ @media (-moz-bool-pref: "browser.windowcontrolbuttons.overwrite") {
+ .titlebar-button:-moz-lwtheme {
+ appearance: auto !important;
+ }
+
+ .titlebar-min:-moz-lwtheme,
+ .titlebar-max:-moz-lwtheme,
+ .titlebar-restore:-moz-lwtheme,
+ .titlebar-close:-moz-lwtheme {
+ list-style-image: none !important;
+ }
+
+ .titlebar-button:-moz-lwtheme:hover,
+ .titlebar-button:-moz-lwtheme:hover:active {
+ background-color: unset !important;
+ color: unset !important;
+ }
+ }
+}
+
+
+/* remove window corner rounding in gtk */
+:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #navigator-toolbox:-moz-lwtheme,
+:root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) ::backdrop {
+ border-top-left-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+}
+
+
+/* TAB BAR ------------------------------------------------------------------------------------------------- */
+
+/* sets the height of the tab toolbar
+otherwise will change height when tabs overflow [FIXED] */
+/* tab height when playing audio issue fixed in FF 96.0.2+ */
+/* https://bugzilla.mozilla.org/show_bug.cgi?id=1714276 */
+/* height change when tab overflow fixed in FF 97 beta+ */
+/* #TabsToolbar {height: var(--tab-bar-height, 35px) !important;} */
+/* :root{ */
+/* default value for tab-min-height = 36px */
+/* --tab-min-height: var(--tab-bar-height, 35px) !important; */
+/* } */
+/* .toolbar-items {height: var(--tab-bar-height, 35px) !important;} */
+/* .tabbrowser-tab {height: var(--tab-bar-height, 35px) !important;} */
+
+#tabbrowser-tabs {
+ min-height: 0 !important;
+}
+
+/* Reduce left spacer on tab bar */
+@supports (not (-moz-osx-font-smoothing: auto)) {
+ @media not (-moz-bool-pref:"browser.lefttabspacer.enable") {
+ .titlebar-spacer[type="pre-tabs"] {
+ display: none !important;
+ }
+ }
+}
+
+
+/* Tab - Connect to window */
+.tab-background {
+ border-radius: 0 !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+
+.tab-content {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+
+.tab-stack {
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+}
+
+
+/* adds the little colored strip on top of the selected tab */
+.tab-background:is([selected], [multiselected]) {
+ box-shadow: inset 0 2px var(--custom-accent-color, #0a84ff) !important;
+ border: 0 !important;
+ outline: none !important;
+ background-repeat: no-repeat !important;
+}
+
+/* special handling for mozilla containers */
+tab[class*="identity-color"] {
+ background-image: linear-gradient(var(--identity-tab-color, white), var(--identity-tab-color, white));
+ background-size: 75% var(--container-stripe-height, 1px);
+ background-position: bottom center;
+ background-repeat: no-repeat;
+ border: 0 !important;
+ outline: none !important;
+}
+
+/* override the built in container colors */
+tab[class*="identity-color"][selected="true"]>.tab-stack>.tab-background>.tab-context-line {
+ height: 0 !important;
+}
+
+/* replace with our own container border */
+tab[class*="identity-color"][selected="true"]>.tab-stack>.tab-background:is([selected], [multiselected]) {
+ background-image: linear-gradient(var(--identity-tab-color, white), var(--identity-tab-color, white));
+ background-size: 75% var(--container-stripe-height, 1px);
+ background-position: bottom center;
+ background-repeat: no-repeat;
+ border: 0 !important;
+ outline: none !important;
+}
+
+@media (-moz-bool-pref:"browser.tabcontextline.match_container_color") {
+ tab[class*="identity-color"][selected="true"]>.tab-stack>.tab-background:is([selected], [multiselected]) {
+ box-shadow: inset 0 2px var(--identity-tab-color, white) !important;
+ }
+}
+
+
+/* realign the selected tab so it doesnt droop down by 2px */
+.tabbrowser-tab[selected="true"] {
+ z-index: 0 !important;
+}
+
+
+/* neighbouring tabs should "pinch" together */
+.tabbrowser-tab {
+ padding-inline: 0 !important;
+}
+
+
+/* Unselected Tab - Divide line */
+.tab-stack::before,
+.tabbrowser-tab:last-of-type .tab-stack::after {
+ content: "";
+}
+
+.tab-stack::before,
+.tab-stack::after {
+ display: block;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 1;
+ width: 0px;
+ height: 100%;
+ border-right: 1px solid var(--custom-tab-divider-color, #535354);
+}
+
+.tab-stack::after {
+ right: 0;
+}
+
+/* removes double tab line next to view button, fixes some padding */
+:root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem)+#tabbrowser-tabs {
+ border-inline-start: None !important;
+ padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 0px) !important;
+ margin-inline-start: 0 !important;
+}
+
+/* squares the mute button on hover */
+.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+ border-radius: 0 !important;
+}
+
+/* new sidebar tabs */
+moz-button, :host {
+ --button-border-radius: 0 !important;
+}
+
+/* NAV BAR ---------------------------------------------------------------------------------------------------- */
+
+:root {
+ /* reduce padding between menu items */
+ --arrowpanel-menuitem-padding: var(--custom-menuitem-padding-vertical, 6px) var(--custom-menuitem-padding-horizontal, 8px) !important;
+ --arrowpanel-menuitem-margin: 0 var(--custom-menuitem-margin, 4px) !important;
+ --panel-subview-body-padding: var(--custom-menuitem-margin, 4px) 0 !important;
+
+
+ /* square the off most of the UI (selection buttons on hover, context menus, hamburger menus, etc) */
+ --toolbarbutton-border-radius: 0 !important;
+ --arrowpanel-menuitem-border-radius: 0 !important;
+ --arrowpanel-border-radius: 0 !important;
+ --tab-border-radius: 0 !important;
+ --subviewbutton-border-radius: 0 !important;
+}
+
+
+/* squares the profile picture on toolbar if logged into sync AND not disabled by pref */
+@media not (-moz-bool-pref:"browser.syncavatar.round") {
+ #fxa-avatar-image {
+ border-radius: 0 !important;
+ }
+}
+
+
+/* scales the profile picture, since it is quite small */
+#fxa-avatar-image {
+ transform: scale(var(--sync-avatar-scale)) !important;
+}
+
+
+/* option to hide extensions button */
+@media (-moz-bool-pref:"browser.unifiedextensions.hide") {
+ #unified-extensions-button {
+ display: none
+ }
+}
+
+/* option to hide the extentions notification dot */
+@media (-moz-bool-pref:"browser.extensionsdot.hide") {
+ #unified-extensions-button[attention]>.toolbarbutton-icon {
+ background-image: None !important;
+ }
+}
+
+/* SUB MENUS --------------------------------------------------------------------------------------------- */
+
+/* more padding code for sub menus */
+.panel-header {
+ padding: var(--custom-menuitem-margin, 4px) !important;
+ padding-bottom: 0 !important;
+}
+
+.subviewbutton-back {
+ margin: 0 0 !important;
+}
+
+
+/* removes the rounded corners from popup menus (main hamburger menu, bookmarks, etc) */
+.menupopup-arrowscrollbox,
+.panel-arrowcontainer,
+.panel-arrowbox,
+.panel-arrowscrollbox,
+menupopup {
+ border-radius: 0 !important;
+}
+
+#report-broken-site-popup-url,
+#report-broken-site-popup-description {
+ border-radius: 0 !important;
+}
+
+/* removes rounded corner from selection boxes and autocomplete popups */
+menupopup menuitem,
+menupopup menu,
+menupopup,
+panel,
+menulist {
+ border-radius: 0 !important;
+ --panel-border-radius: 0 !important;
+}
+
+
+/* square input fields in the edit bookmarks menu */
+#editBMPanel_namePicker {
+ border-radius: 0 !important;
+}
+
+#editBMPanel_folderMenuList {
+ border-radius: 0 !important;
+}
+
+#editBMPanel_tagsField {
+ border-radius: 0 !important;
+}
+
+#editBMPanel_tagsSelector {
+ border-radius: 0 !important;
+}
+
+#editBMPanel_locationField {
+ border-radius: 0 !important;
+}
+
+#editBMPanel_keywordField {
+ border-radius: 0 !important;
+}
+
+
+/* square off aspects of the download menu (i.e. selection boxes, open in folder button) */
+.download-state,
+.downloadButton {
+ border-radius: 0 !important;
+}
+
+.downloadProgress {
+ border-radius: 0 !important;
+ overflow: hidden !important;
+}
+
+.downloadProgress[paused] {
+ border-radius: 0 !important;
+}
+
+.downloadProgress:not([value="0"])::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+
+.downloadProgress::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+
+
+/* square off the toggle switch for "enhanced tracking protection" */
+.protections-popup-tp-switch,
+.protections-popup-tp-switch::before {
+ border-radius: 0 !important;
+}
+
+.toggle-button,
+.toggle-button::before {
+ border-radius: 0 !important;
+}
+
+/* square the permissions popup (e.g. autoplay blocked) */
+#permission-popup-menulist {
+ border-radius: 0 !important;
+}
+
+
+/* square permission popups for webRTC (screen sharing and voice) */
+#webRTC-selectMicrophone-menulist {
+ border-radius: 0 !important;
+}
+
+#webRTC-selectWindow-menulist {
+ border-radius: 0 !important;
+}
+
+#webRTC-previewVideo {
+ border-radius: 0 !important;
+}
+
+
+/* square the fullscreen and zoom reset */
+#appMenu-zoomReset-button2>.toolbarbutton-text,
+#appMenu-fullscreen-button2>.toolbarbutton-icon {
+ border-radius: 0 !important;
+}
+
+/* square the selection in the "List All Tabs" menu */
+.all-tabs-item {
+ border-radius: 0 !important;
+ margin-inline: var(--custom-menuitem-margin, 4px) !important;
+}
+
+
+/* MISC ITEMS ------------------------------------------------------------------------------------------- */
+
+/* square "close tabs and quit" window and buttons (and prob other dialog boxes) */
+.dialogBox {
+ border-radius: 0 !important;
+}
+
+button {
+ border-radius: 0 !important;
+}
+
+
+/* square checkboxes */
+.checkbox-check {
+ border-radius: 0 !important;
+}
+
+#checkbox {
+ border-radius: 0 !important;
+}
+
+
+/* square dropdown selection and autocompete boxes */
+select {
+ border-radius: 0 !important;
+}
+
+:is(panel, menupopup)::part(content) {
+ border-radius: 0 !important;
+}
+
+
+/* square selections, checkboxes, and nav buttons on the print page */
+.toggle-group-label {
+ border-radius: 0 !important;
+}
+
+.photon-number {
+ border-radius: 0 !important;
+}
+
+#headers-footers-enabled {
+ border-radius: 0 !important;
+}
+
+#backgrounds-enabled {
+ border-radius: 0 !important;
+}
+
+.toolbarButton:not(:hover) {
+ background-color: #2b2a33 !important;
+}
+
+#custom-range {
+ border-radius: 0 !important;
+}
+
+
+/* autosave password notification input fields */
+#password-notification-username {
+ border-radius: 0 !important;
+}
+
+#password-notification-password {
+ border-radius: 0 !important;
+}
+
+
+/* searchbox and buttons in find bar (ctrl+F) */
+.findbar-textbox {
+ border-radius: 0 !important;
+}
+
+toolbarbutton {
+ border-radius: 0 !important;
+}
+
+
+/* certain new folder and login field popup dialogs */
+#loginTextbox {
+ border-radius: 0 !important;
+}
+
+#password1Textbox {
+ border-radius: 0 !important;
+}
+
+
+/* density options in "Customize Toolbar" */
+#customization-uidensity-menuitem-compact {
+ border-radius: 0 !important;
+}
+
+#customization-uidensity-menuitem-normal {
+ border-radius: 0 !important;
+}
+
+#customization-uidensity-menuitem-touch {
+ border-radius: 0 !important;
+}
+
+
+/* square popup when entering full screen video */
+#fullscreen-warning {
+ border-radius: 0 !important;
+}
+
+
+/* square dismissable "show me how" notification messages */
+notification-message {
+ border-radius: 0 !important;
+}
+
+.animated {
+ border-radius: 0 !important;
+}
+
+.infobar {
+ border-radius: 0 !important;
+}
+
+.infobar::before {
+ border-start-start-radius: 0 !important;
+ border-end-start-radius: 0 !important;
+}
+
+
+/* clear history popup and warnings */
+#sanitizeDurationChoice {
+ border-radius: 0 !important;
+}
+
+#sanitizeEverythingWarningBox {
+ border-radius: 0 !important;
+}
+
+
+/* url preview on hover */
+#statuspanel-label {
+ border-radius: 0 !important;
+}
+
+/* sidebar and its panels*/
+#sidebar, .screen, .select-item, .button-background,
+.inline-image, .selectedTab, .moz-card, moz-fieldset,
+#inputs, .search-container {
+ border-radius: 0 !important;
+}
+
+/* input fields dont like to change, so do it this way instead */
+:root {
+ --border-radius-small: 0 !important;
+ --border-radius-medium: 0 !important;
+ --border-radius-large: 0 !important;
+}
+
+/* THUNDERBIRD SPECIFIC ------------------------------------------------------------------------------ */
+/* custom color for tab line */
+:root {
+ --tabline-color: var(--custom-accent-color, #0a84ff) !important;
+}
+
+/* the loading/compacting progress bar on bottom right */
+.progressmeter-statusbar {
+ border-radius: 0 !important;
+}
+
+.progressmeter-statusbar:not([value="0"])::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+
+/* END OF THE SQUARE PROTON CSS FILE */
+
/* Remove back, forward, and refresh buttons */
#back-button,
#forward-button,
@@ -122,48 +789,10 @@ scrollcorner {
overflow: hidden !important;
}
-#urlbar-background,#urlbar {
- border-radius: 0px !important;
-}
-
#sidebar-main {
visibility: collapse !important;
}
-/* removes the rounded corners from popup menus (main hamburger menu, bookmarks, etc) */
-.menupopup-arrowscrollbox,
-.panel-arrowcontainer,
-.panel-arrowbox,
-.panel-arrowscrollbox,
-menupopup {
- border-radius: 0 !important;
-}
-
-/* removes rounded corner from selection boxes and autocomplete popups */
-menupopup menuitem,
-menupopup menu,
-menupopup,
-panel,
-menulist {
- border-radius: 0 !important;
- --panel-border-radius: 0 !important;
-}
-
-:root {
- /* reduce padding between menu items */
- --arrowpanel-menuitem-padding: var(--custom-menuitem-padding-vertical, 6px) var(--custom-menuitem-padding-horizontal, 8px) !important;
- --arrowpanel-menuitem-margin: 0 var(--custom-menuitem-margin, 4px) !important;
- --panel-subview-body-padding: var(--custom-menuitem-margin, 4px) 0 !important;
-
-
- /* square the off most of the UI (selection buttons on hover, context menus, hamburger menus, etc) */
- --toolbarbutton-border-radius: 0 !important;
- --arrowpanel-menuitem-border-radius: 0 !important;
- --arrowpanel-border-radius: 0 !important;
- --tab-border-radius: 0 !important;
- --subviewbutton-border-radius: 0 !important;
-}
-
/* remove annoying top border on top of urlbar*/
#nav-bar {
box-shadow: none !important;
diff --git a/userContent.css b/userContent.css
@@ -1,47 +1,867 @@
-@-moz-document url-prefix("about:"),
- url-prefix("chrome:")
-{
- body {
- background-color: #353C4A !important;
- }
- :root {
- /* accent color */
- --uc-my-color: #ebcb8b !important;
- --uc-my-color-hover: color-mix(in oklab, var(--uc-my-color) 90%, white);
- --uc-my-color-active: color-mix(in oklab, var(--uc-my-color) 80%, white);
+/* USER FACING VARIABLES -------------------------------------------------------------------------------------- */
+/* this file does NOT have to be updated between versions */
- --color-accent-primary: var(--uc-my-color) !important;
- --color-accent-primary-hover: var(--uc-my-color-hover) !important;
- --color-accent-primary-active: var(--uc-my-color-active) !important;
+/* NOTE: restart Firefox to apply any changes */
- --in-content-primary-button-background: var(--uc-my-color) !important;
- --in-content-primary-button-background-hover: var(--uc-my-color-hover) !important;
- --in-content-primary-button-background-active: var(--uc-my-color-active) !important;
+:root {
- --primary-button-background-color: var(--uc-my-color) !important;
- --primary-button-hover-background-color: var(--uc-my-color-hover) !important;
- --primary-button-active-background-color: var(--uc-my-color-active) !important;
- /* background color */
- --uc-my-background-color: #353C4A !important;
- --background-color-canvas: var(--uc-my-background-color) !important;
- --background-color-box: var(--uc-my-background-color) !important;
+ /* custom accent color to be used across Firefox*/
+ /* use hexcode or color name */
+ --custom-accent-color: #ebcb8b;
- /* text color */
- --in-content-page-color: #d8dee9 !important;
+ /* background color */
+ --uc-my-background-color: #353C4A !important;
+ --background-color-canvas: var(--uc-my-background-color) !important;
+ --background-color-box: var(--uc-my-background-color) !important;
+
+ /* text color */
+ --in-content-page-color: #d8dee9 !important;
+
+ --table-row-background-color-alternate:#2e3440 !important;
+
+
+ /* color of the tab dividers / separators */
+ /* set variable = none, to disable dividers */
+ --custom-tab-divider-color: #535354;
+
+
+ /* sets the height of the tabs toolbar */
+ /* legacy height (<= v1.6.2) = 33px */
+ /* functionality broken as of FF 108 - WIP */
+ /* --tab-bar-height: 35px; */
+
+
+ /* set the size of sync profile pic */
+ /* 1.0 = 100% scale */
+ --sync-avatar-scale: 1.0;
+
+ /* custom paddings/margins for the menu itmes */
+ /* for reference: */
+ --custom-menuitem-padding-vertical: 6px;
+ --custom-menuitem-padding-horizontal: 8px;
+ --custom-menuitem-margin: 4px;
- --table-row-background-color-alternate:#2e3440 !important;
- }
}
+/* CUSTOM ACCENT COLORS -------------------------------------------------------------------------------------- */
-@-moz-document url-prefix("moz-extension:")
-{
- :root {
- /* ublock */
+@-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
+
+ html:not([role="dialog"]),
+ html:not([role="dialog"]) *,
+ html:not([role="dialog"]) body.activity-stream,
+ window:not([chromehidden]),
+ window:not([chromehidden])>dialog {
+ body {
+ background-color: #353C4A !important;
+ }
--surface-1: #353C4A !important;
--surface-2: #2e3440 !important;
--accent-surface-1: #ebcb8b !important;
--dashboard-tab-active-ink: #ebcb8b !important;
+ --in-content-primary-button-background: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+
+ --in-content-item-selected: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-border-highlight: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-border-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ /* --in-content-border-focus: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important; */
+ --in-content-border-focus: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-border-active: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-border-active-shadow: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-category-outline-focus: 1px solid transparent !important;
+ --in-content-accent-color: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-table-header-background: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-link-color: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-link-color-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --newtab-focus-outline: var(--in-content-border-active-shadow) !important;
+ --newtab-focus-border: var(--in-content-border-focus) !important;
+ --newtab-focus-border-selected: var(--custom-accent-color) !important;
+ --newtab-textbox-focus-color: var(--in-content-border-focus) !important;
+ --newtab-primary-action-background: var(--custom-accent-color) !important;
+ --color-accent-primary: var(--custom-accent-color) !important;
+ --color-accent-primary-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --color-accent-primary-active: var(--custom-accent-color) !important;
+ --brand-color-accent: var(--custom-accent-color) !important;
+ --brand-color-accent-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --brand-color-accent-active: var(--custom-accent-color) !important;
+ }
+}
+
+@-moz-document url("chrome://global/content/commonDialog.xhtml") {
+ #commonDialog[subdialog] checkbox {
+ --checkbox-checked-bgcolor: var(--custom-accent-color, #0a84ff) !important;
+ --checkbox-checked-hover-bgcolor: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --checkbox-checked-active-bgcolor: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+ }
+}
+
+.topsite-form .form-wrapper input[type="text"]:focus-visible {
+ outline: none !important;
+ border-color: var(--newtab-focus-border) !important;
+}
+
+.showPrivate .search-handoff-button.focused {
+ outline: 0;
+ border: 1px solid var(--newtab-focus-border) !important;
+ box-shadow: 0 0 0 2px var(--newtab-focus-outline) !important;
+}
+
+::-moz-progress-bar {
+ background-color: var(--custom-accent-color, #0a84ff) !important;
+}
+
+login-filter {
+ --in-content-primary-button-background: var(--custom-accent-color, #0a84ff) !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, white 50%, var(--custom-accent-color, #0a84ff)) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, white 65%, var(--custom-accent-color, #0a84ff)) !important;
+}
+
+
+/* NEW TAB PAGE ---------------------------------------------------------------------------------------------- */
+
+@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing){
+
+/* square the search box corners */
+body .search-handoff-button {
+ border-radius: 0 !important;
+}
+
+/* square the settings button and checkboxes / buttons / selectors inside its menu */
+.personalize-buttonm,
+.close-button,
+.selector,
+.sponsored-checkbox,
+.wallpaper-input {
+ border-radius: 0 !important;
+}
+
+.weatherCard,
+.weatherInfoLink,
+.weatherButtonContextMenuWrapper {
+ border-radius: 0 !important;
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+}
+
+/* square the toggle button for above */
+.slider {
+ border-radius: 0 !important;
+}
+
+.slider::before {
+ border-radius: 0 !important;
+ background: #fff !important;
+}
+
+.toggle-button {
+ --toggle-border-radius: 0 !important;
+}
+
+/* square all the 3 dot menus */
+.context-menu-button,
+.context-menu {
+ border-radius: 0 !important;
+}
+
+/* square the shortcuts: icons, background, and selection box */
+/* square the "suggested by pocket" cards and images */
+.tile,
+.top-site-icon,
+.icon-wrapper,
+.top-site-outer,
+.ds-card,
+.ds-card>.ds-card-topic,
+.card-stp-button-hover-background,
+img {
+ border-radius: 0 !important;
+}
+
+/* square all the recent activity cards and images */
+.card,
+.card-outer,
+.card-preview-image-outer,
+.card-context,
+.sections-list,
+.section-empty-state,
+.modal {
+ border-radius: 0 !important;
+}
+
+/* square the VPN button/infobox in private browsing */
+#private-browsing-vpn-link,
+.info,
+.promo {
+ border-radius: 0 !important;
+}
+
+/* add hover/click colors on new tab page [workaround] */
+.slider:hover {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4) !important;
+}
+
+.slider:active {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.6) !important;
+}
+
+.sponsored-checkbox:checked:hover {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4) !important;
+}
+
+.sponsored-checkbox:checked:active {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.6) !important;
+}
+
+.sponsored-checkbox:hover {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4) !important;
+}
+
+.sponsored-checkbox:active {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.6) !important;
+}
+
+.selector:hover {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3) !important;
+}
+
+.selector:active {
+ box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5) !important;
+}
+}
+
+
+/* SETTINGS PAGE ------------------------------------------------------------------------------------------- */
+
+@-moz-document url(about:preferences), url(about:preferences#general), url(about:preferences#home),
+url(about:preferences#search), url(about:preferences#privacy), url(about:preferences#sync),
+url(about:preferences#moreFromMozilla), url(about:addons){
+
+/* square checkboxes */
+.checkbox-check {
+ border-radius: 0 !important;
+}
+
+#automaticallySubmitCrashesBox {
+ border-radius: 0 !important;
+}
+
+/* square selection buttons */
+button {
+ border-radius: 0 !important;
+}
+
+richlistitem {
+ border-radius: 0 !important;
+}
+
+.sidebar-footer-link {
+ border-radius: 0 !important;
+}
+
+/* square toggle buttons */
+.toggle-button {
+ border-radius: 0 !important;
+}
+
+.toggle-button::before {
+ border-radius: 0 !important;
+}
+
+/* square search engines table on about:preferences#search page */
+#engineList {
+ border-radius: 0 !important;
+}
+
+/* Tracking Protection options on about:preferences#privacy page */
+.content-blocking-category {
+ border-radius: 0 !important;
+}
+
+.content-blocking-warning {
+ border-radius: 0 !important;
+}
+
+/* infoboxes (e.g. settings required by addon) */
+#browserContainersExtensionContent {
+ border-radius: 0 !important;
+}
+
+#firefoxSuggestInfoBox {
+ border-radius: 0 !important;
+}
+
+#updateSettingsContainer {
+ border-radius: 0 !important;
+}
+
+.info-box-container {
+ border-radius: 0 !important;
+}
+
+/* folder selection and table for Files and Applications */
+#downloadFolder {
+ border-radius: 0 !important;
+}
+
+#handlersView {
+ border-radius: 0 !important;
+}
+
+/* input, info boxes, and profile on sync page */
+#fxaSyncComputerName {
+ border-radius: 0 !important;
+}
+
+.sync-configured {
+ border-radius: 0 !important;
+}
+
+.fxaProfileImage {
+ border-radius: 0 !important;
+}
+
+/* more from mozilla page */
+.qr-code-box {
+ border-radius: 0 !important;
+}
+
+.qr-code-box-image {
+ border-radius: 0 !important;
+}
+
+
+/* enterprise policies infobox */
+#policies-container {
+ border-radius: 0 !important;
+}
+
+/* website appearance selections */
+.web-appearance-choice {
+ border-radius: 0 !important;
+}
+
+/* dropdown selectors in tables */
+menupopup {
+ --panel-border-radius: 0 !important;
+}
+}
+
+
+@-moz-document url(about:preferences), url(about:preferences#general), url(about:preferences#home),
+url(about:preferences#search), url(about:preferences#privacy), url(about:preferences#sync){
+
+/* match toggle buttons to normal button look (only about:preferences) */
+input[type="checkbox"].toggle-button::before {
+ height: 10px !important;
+ width: 10px !important;
+ margin-top: 4px !important;
+ margin-left: 2px !important;
+}
+}
+
+
+/* square popup windows and buttons */
+@-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
+ richlistbox {
+ border-radius: 0 !important;
+ }
+
+ button {
+ border-radius: 0 !important;
+ }
+
+ .dialogBox {
+ border-radius: 0 !important;
+ }
+
+ menulist {
+ border-radius: 0 !important;
+ }
+
+ checkbox {
+ border-radius: 0 !important;
+ }
+
+ .checkbox-check {
+ border-radius: 0 !important;
+ }
+
+ listheader {
+ border-radius: 0 !important;
+ }
+
+ search-textbox {
+ border-radius: 0 !important;
+ }
+
+ #url {
+ border-radius: 0 !important;
+ }
+
+ tree {
+ border-radius: 0 !important;
+ }
+
+ /* network settings popup */
+ #networkProxyNone {
+ border-radius: 0 !important;
+ }
+
+ #networkProxyAutoconfigURL {
+ border-radius: 0 !important;
+ }
+
+ #networkProxySOCKS_Port {
+ border-radius: 0 !important;
+ }
+
+ #networkProxySOCKS {
+ border-radius: 0 !important;
+ }
+
+ #networkProxySSL_Port {
+ border-radius: 0 !important;
+ }
+
+ #networkProxySSL {
+ border-radius: 0 !important;
+ }
+
+ #networkProxyHTTP_Port {
+ border-radius: 0 !important;
+ }
+
+ #networkProxyHTTP {
+ border-radius: 0 !important;
+ }
+
+ /* saved addresses popup */
+ #given-name {
+ border-radius: 0 !important;
+ }
+
+ #family-name {
+ border-radius: 0 !important;
+ }
+
+ #street-address {
+ border-radius: 0 !important;
+ }
+
+ #address-level2 {
+ border-radius: 0 !important;
+ }
+
+ #address-level1 {
+ border-radius: 0 !important;
+ }
+
+ #postal-code {
+ border-radius: 0 !important;
+ }
+
+ #organization {
+ border-radius: 0 !important;
+ }
+
+ #country {
+ border-radius: 0 !important;
+ }
+
+ #tel {
+ border-radius: 0 !important;
+ }
+
+ #email {
+ border-radius: 0 !important;
+ }
+
+ /* saved credit cards popup */
+ #cc-number {
+ border-radius: 0 !important;
+ }
+
+ #cc-exp-month {
+ border-radius: 0 !important;
+ }
+
+ #cc-exp-year {
+ border-radius: 0 !important;
+ }
+
+ #cc-name {
+ border-radius: 0 !important;
+ }
+
+ #cc-type {
+ border-radius: 0 !important;
+ }
+
+ /* primary password dialog */
+ #message {
+ border-radius: 0 !important;
+ }
+
+ #pw1 {
+ border-radius: 0 !important;
+ }
+
+ #pw2 {
+ border-radius: 0 !important;
+ }
+
+ #pwmeter {
+ appearance: none !important;
+ height: 0.35em !important;
+ border: none !important;
+ vertical-align: 0 !important;
+ margin: 0.5em 0 !important;
+ }
+
+ /* custom color selection */
+ #foregroundtextmenu {
+ border-radius: 0 !important;
+ }
+
+ #backgroundmenu {
+ border-radius: 0 !important;
+ }
+
+ #unvisitedlinkmenu {
+ border-radius: 0 !important;
+ }
+
+ #visitedlinkmenu {
+ border-radius: 0 !important;
+ }
+
+ /* clear history warning popup */
+ #sanitizeEverythingWarningBox {
+ border-radius: 0 !important;
+ }
+
+}
+
+
+/* ADDONS PAGE --------------------------------------------------------------------------------------------- */
+
+@-moz-document url(about:addons){
+
+/* square search box */
+search-textbox {
+ border-radius: 0 !important;
+}
+
+/* square the context menus (3 dots and settings gear) */
+panel-list {
+ border-radius: 0 !important;
+}
+
+/* square the info boxes / banners */
+.discopane-notice {
+ border-radius: 0 !important;
+}
+
+.container {
+ border-radius: 0 !important;
+}
+
+/* square the addons and theme cards */
+.card-heading-image {
+ border-radius: 0 !important;
+}
+
+.card {
+ border-radius: 0 !important;
+}
+
+/* square selection buttons */
+button {
+ border-radius: 0 !important;
+}
+
+richlistitem {
+ border-radius: 0 !important;
+}
+
+menulist {
+ border-radius: 0 !important;
+}
+
+.sidebar-footer-link {
+ border-radius: 0 !important;
+}
+
+/* square toggle buttons */
+.toggle-button,
+.toggle-button::before {
+ border-radius: 0 !important;
+}
+
+/* available addons update badge */
+.category[badge-count]::after {
+ border-radius: 0 !important;
+}
+
+/* extensions shortcuts */
+.shortcut-input {
+ border-radius: 0 !important;
+}
+}
+
+
+/* ABOUT CONFIG PAGE ---------------------------------------------------------------------------------------- */
+
+@-moz-document url(about:config){
+
+/* square everything except radio buttons */
+#about-config-search {
+ border-radius: 0 !important;
+}
+
+#about-config-show-only-modified {
+ border-radius: 0 !important;
+}
+
+#showWarningNextTime {
+ border-radius: 0 !important;
+}
+
+button {
+ border-radius: 0 !important;
+}
+}
+
+
+/* DOWNLOADS ------------------------------------------------------------------------------------------------ */
+
+@-moz-document url(about:downloads){
+
+/* square buttons and boxes*/
+.button-box {
+ border-radius: 0 !important;
+}
+
+richlistbox {
+ border-radius: 0 !important;
+}
+
+.downloadProgress {
+ border-radius: 0 !important;
+}
+
+.downloadProgress[paused] {
+ border-radius: 0 !important;
+}
+
+.downloadProgress:not([value="0"])::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+
+.downloadProgress::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+ border-radius: 0 !important;
+}
+}
+
+
+/* FIREFOX VIEW PAGE ----------------------------------------------------------------------------------------- */
+@-moz-document regexp("^(about:firefoxview).*") {
+
+ :root {
+ --button-border-radius: 0 !important;
+ }
+
+ .tabpickup-steps,
+ .twisty,
+ .closed-tab-li-main,
+ .card,
+ .zap-card::before {
+ border-radius: 0 !important;
+ }
+
+ .step-progress,
+ .step-progress:not([value="0"])::-moz-progress-bar {
+ border-radius: 0 !important;
+ }
+
+ #colorways-collection-expiry-date,
+ #colorways-collection-expiry-date>span {
+ border-radius: 0 !important;
+ }
+
+ * {
+ border-radius: 0 !important;
+ }
+}
+
+/* OTHER INTERNAL PAGES ------------------------------------------------------------------------------------- */
+
+@-moz-document url(about:buildconfig), url(about:compat), url(about:crashes), url(about:debugging),
+url(about:debugging#/setup), url(about:debugging#/runtime/this-firefox), url(about:devtools),
+url(about:networking), url(about:policies), url(about:profiles),
+url(about:profiling), url(about:protections), url(about:serviceworkers), url(about:studies),
+url(about:support), url(about:telemetry), url(about:unloads), url(about:url-classifier),
+url(about:webrtc), url(about:welcome){
+* {
+ border-radius: 0 !important;
+}
+}
+
+
+/* PASSWORDS AND LOGINS ------------------------------------------------------------------------------------- */
+
+@-moz-document regexp("^(about:logins).*") {
+ * {
+ border-radius: 0 !important;
+ }
+}
+
+/* SERVER NOT FOUND PAGE ------------------------------------------------------------------------------------- */
+
+@supports (-moz-appearance:none) {
+ .primary.try-again {
+ border-radius: 0 !important;
+ }
+}
+
+
+/* WARNING SECURITY RISK PAGE --------------------------------------------------------------------------------- */
+
+@supports (-moz-appearance:none) {
+ .primary.try-again {
+ border-radius: 0 !important;
+ }
+
+ #returnButton {
+ border-radius: 0 !important;
+ }
+
+ #advancedButton {
+ border-radius: 0 !important;
+ }
+
+ #exceptionDialogButton {
+ border-radius: 0 !important;
+ }
+
+ #advancedPanelReturnButton {
+ border-radius: 0 !important;
+ }
+
+ #automaticallyReportBlockingInFuture {
+ border-radius: 0 !important;
+ }
+}
+
+
+/* Restart Firefox page after update ------------------------------------------------------------------------- */
+
+@supports (-moz-appearance:none) {
+ #restart {
+ border-radius: 0 !important;
+ }
+}
+
+
+/* SCREENSHOT PAGE ------------------------------------------------------------------------------------------ */
+
+@supports (-moz-appearance:none) {
+ .cancel-shot {
+ border-radius: 0 !important;
+ }
+
+ .all-buttons-container {
+ border-radius: 0 !important;
+ }
+
+ .visible {
+ border-radius: 0 !important;
+ }
+
+ .full-page {
+ border-radius: 0 !important;
+ }
+
+ .highlight-button-cancel {
+ border-radius: 0 !important;
+ }
+
+ .highlight-button-copy {
+ border-radius: 0 !important;
+ }
+
+ .highlight-button-download {
+ border-radius: 0 !important;
+ }
+
+ .preview-buttons {
+ border-radius: 0 !important;
+ }
+
+ .preview-image-wrapper {
+ border-radius: 0 !important;
+ }
+}
+
+
+/* PICTURE IN PICTURE PAGE ----------------------------------------------------------------------------------- */
+
+@supports (-moz-appearance:none) {
+ .pip-small.clickable {
+ border-radius: 0 !important;
+ }
+
+ .pip-expanded {
+ border-radius: 0 !important;
+ }
+
+ .pip-explainer {
+ border-bottom-right-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ }
+}
+
+
+/* READER MODE ----------------------------------------------------------------------------------------------- */
+
+@supports (-moz-appearance:none) {
+
+ .reader-toolbar,
+ .dropdown-popup,
+ .radiorow>label,
+ .font-size-value,
+ .content-width-value,
+ .line-height-value,
+ .color-input-container,
+ .narrate-control,
+ .narrate-start-stop,
+ #font-type-selector,
+ #font-weight-selector {
+ border-radius: 0 !important;
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+ }
+}
+
+/* REVIEW CHECKER */
+
+@supports (-moz-appearance:none) {
+
+ .onboardingContainer.shopping .screen[pos=split],
+ .onboardingContainer.shopping .screen[pos="split"] .section-main .main-content,
+ .shopping-card,
+ #letter-grade-wrapper,
+ #letter-grade-term,
+ #letter-grade-description,
+ #beta-marker {
+ border-radius: 0 !important;
}
}
