在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:MrOtherGuy/firefox-csshacks开源软件地址:https://github.com/MrOtherGuy/firefox-csshacks开源编程语言:CSS 88.2%开源软件介绍:Collection of random CSS hacks for FirefoxThis repository contains various styles to modify appearance of Mozilla Firefox. These stylesheets are mostly self-contained and can be mixed with each other somewhat freely, but there are no promises about compatibility with third-party styles. In the case that a particular style relies on another style, the fact will be noted at the start of the file that requires so. Stylesheets in this repository are tested only on Windows 10 and to a lesser amount on Linux. Most of them should also work on OSX and Windows7, but there may be wrong behavior especially when native widgets such as window titlebar or window control buttons are being styled. SetupAs an overview, you will make Firefox load two special stylesheets - The setup is quite straightforward with the exception of how to find the profile folder so pay attention to that. Set the pref to load stylesheetsGo to After you set this pref, Firefox will try to load Setting up filesFind the profile folderFirst, find your profile folder. While Firefox is running, go to NOTE: On some Firefox versions clicking that button may open the profiles folder which houses all your profiles. In that case, navigate into the specific folder you wish to modify. The real profile folder should have files like Creating the stylesheet filesNote: only userChrome.css is mentioned in this section for brevity, but everything regarding that will also apply to userContent.css Firefox loads Set up files manuallyManually copying individual styles directly into userChrome.css is a simple way to do things for better and for worse.
Pay attention to the filename of In the end you should have a folder structure like this:
Set up files using gitPreferred way to do things, since it makes updates easier and makes organizing multiple styles easier.Assumes that you have a git client installed, and that you do not already have a chrome folder in your profile.
Afterwards, you can just use Style categoriesThe files themselves are only separated to chrome and content sub-folders. Files have a one or more tag applied to them as listed in You can browse the tag-categorized files by using this UI UsageStylesheets are divided in to chrome and content folders. Firefox loads Use stylesheets under "chrome" in Use stylesheets under "content" in The above is not a technical requirement but the particular styles generally won't do anything when loaded in wrong context. You can import the stylesheets with @-rule import like this: @import url("path/filename.css"); A good habit would be to load each separate style without modifications using @import statements, and then apply your own modifications in userChrome.css after all imports. This makes it easier for you to update the files from the repository since your modifications will be preserved. Example @import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
:root{
--toolbar-bgcolor: rgb(36,44,59) !important;
--uc-menu-bkgnd: var(--toolbar-bgcolor);
--arrowpanel-background: var(--toolbar-bgcolor) !important;
--autocomplete-popup-background: var(--toolbar-bgcolor) !important;
--uc-menu-disabled: rgb(90,90,90) !important;
--lwt-toolbar-field-focus: rgb(36,44,59) !important;
} Important!Note that all I would strongly advice using @import to include styles instead of copying contents directly to userChrome.css even with just a few file "components". The technical reason for this is that some files rely on @namespace rules and those only apply on file level such that a @namespace applies to every selector in that file (and in that file only). On top of that, @imports make managing multiple files much easier. Further miscallaneous notesImport any *_patch.css files after their base stylesheet. Import the shared window_control_support.css before other stylesheets. Additionally, you are advised to import theme_ files before any other modules. Theme** NOTE ** Theme files are mostly out-of-date as of 2020-05-22 Stylesheets prefixed with Example userChrome.css resulting in rather complete dark blueish-grey UI: @import url(theme_color_variables.css);
@import url(theme_sidebar.css);
@import url(theme_toolbars.css);
@import url(theme_popups_and_menus.css);
/* Your other rules here */ You can use individual modules from theme such as to only include popups_and_menus. But it would still be required that you import the theme_color_variables.css or you'll have to manually edit all the colors. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论