查看“︁Firefox CSS Modification”︁的源代码

The following modifications are based on Aris-t2’s [https://github.com/Aris-t2/CustomCSSforFx/releases/latest CustomCSSforFx] project.

For Firefox versions beyond 140, please see [[Firefox_CSS_Modification_P2|this page]] for reference.
[[File:Firefox_140_with_classic_theme.png|852px|thumb|left|<div style="text-align: right;">A Firefox 140 with CSS modifications.</div>|link=]]<div style="clear: both; margin-bottom: -1rem !important; padding-bottom: 0 !important;"></div>
==Modifications of CustomCSSforFx’s Original CSS Files==
{{firefox-Aris-t2-CSS-appbutton-in-titlebar.css-mod}}
{{firefox-Aris-t2-CSS-popup-compact-menus.css-mod}}
{{firefox-Aris-t2-CSS-tab-audio-icon.css-mod}}
{{firefox-Aris-t2-CSS-tab-context-menuitems-visibility.css-mod}}
{{firefox-Aris-t2-CSS-toolbar-context-menuitems-visibility.css-mod}}
==Additional File (Re)Placements==
For Firefox 133 and above (currently tested up to 140), place the following CSS file in <code>/<wbr />chrome<wbr />/<wbr />css<wbr />/</code> and then include it in {{spmono|my<wbr />_<wbr />user<wbr />Chrome<wbr />.<wbr />css}} with <syntaxhighlight lang="css" inline>@import "./css/additional_menubar_tabstoolbar_adjustments_133.css";</syntaxhighlight>.
{{firefox-Aris-t2-CSS-additional-menubar-tabstoolbar-adjustments-133.css}}
For Firefox 118 to 132, place the following CSS file in <code>/<wbr />chrome<wbr />/<wbr />css<wbr />/</code> and then include it in {{spmono|my<wbr />_<wbr />user<wbr />Chrome<wbr />.<wbr />css}} with <syntaxhighlight lang="css" inline>@import "./css/additional_menubar_tabstoolbar_adjustments_128.css";</syntaxhighlight>.
{{firefox-Aris-t2-CSS-additional-menubar-tabstoolbar-adjustments-128.css}}
For Firefox 115, first replace the CSS file with the same filename as below under <code>/<wbr />chrome<wbr />/<wbr />css<wbr />/<wbr />lo<wbr />ca<wbr />tion<wbr />bar<wbr />/</code> with the one as follows—
{{firefox-Aris-t2-CSS-ac-popup-megabar-title-and-url-two-lines.css-115}}
And then place the following CSS file in <code>/<wbr />chrome<wbr />/<wbr />css<wbr />/</code> and include it in {{spmono|my<wbr />_<wbr />user<wbr />Chrome<wbr />.<wbr />css}} with <syntaxhighlight lang="css" inline>@import "./css/additional_menubar_tabstoolbar_adjustments_115.css";</syntaxhighlight>.
{{firefox-Aris-t2-CSS-additional-menubar-tabstoolbar-adjustments-115.css}}
=={{spmono|user<wbr />Chrome<wbr />.<wbr />css}} & {{spmono|user<wbr />Content<wbr />.<wbr />css}} Modifications and Additions==
{{firefox-Aris-t2-CSS-userChrome.css-mod}}
{{firefox-Aris-t2-CSS-userContent.css-mod}}
{{firefox-Aris-t2-CSS-my-userChrome.css}}
{{firefox-Aris-t2-CSS-my-userContent.css}}
==Straighten Up the Rounded Corners==
To ‘unround’ all the utter ugly rounded corners, add the following lines to {{spmono|my<wbr />_<wbr />user<wbr />Chrome<wbr />.<wbr />css}}—
{{stgrn|my<wbr />_<wbr />user<wbr />Chrome<wbr />.<wbr />css <small>'''(ADDENDVM)'''</small>}}
<syntaxhighlight lang="css" start="361" line copy>
* {
	&, &::before, &::after {
		border-radius: 0 !important;
	}
}
</syntaxhighlight>
Then these lines below to {{spmono|my<wbr />_<wbr />user<wbr />Content<wbr />.<wbr />css}}—
{{stgrn|my<wbr />_<wbr />user<wbr />Content<wbr />.<wbr />css <small>'''(ADDENDVM)'''</small>}}
<syntaxhighlight lang="css" start="11" line copy>
#preferences-root *,
body:has(> div#full) *,
body:has(> div.container) *,
body.aboutPageWideContainer *,
body:has(> div#toolbar) *,
[force-theme] *,
#contentAreaDownloadsView *,
body#lic-info *,
body#body *,
body:has( fxaccounts-button) *,
body:has(> div.ancillary) *,
body.wide-container *,
body:has(> *[data-l10n-id^="about"]) *,
body:has(> p[id^="UI_"]) *,
body:has(> div#app) *,
body:has(> div.container) *,
[focuseddatatype] *,
body.theme-body *,
body:has(> p.showNormal) *,
#moz-toggle-button {
	&, &::before, &::after {
		border-radius: 0 !important;
	}
}
</syntaxhighlight>
And if you would also like to remove those tiny little rounded corners around the tabs (which I personally do not dislike), just go back to {{spmono|user<wbr />Chrome<wbr />.<wbr />css}} and enable <span style="color: #646464;">(by removing the <code>/*</code> at the beginning of the line)</span> the following option—
{{stgrn|userChrome.css <small>(CSS ver: 4.7.3; '''OPTIONAL MODIFICATION''')</small>}}
<syntaxhighlight lang="css" start="744" highlight="1" line copy>
@import "./css/tabs/tabs_fully_squared.css"; /**/
</syntaxhighlight>
Furthermore, if you, like me, really hate all those rounded corners all around the web, just try out this [https://userstyles.world/style/8283/unround-everything-everywhere absolutely wonderful {{spmono|userstyle}}] with [https://addons.mozilla.org/firefox/addon/styl-us/ Stylus]; it will help you to eradicate all of them, once for all.
__NOTOC__
{{DISPLAYTITLE:Firefox CSS Modification <small>(up to 140 <small>ESR</small>)</small>}}