[Tổng hợp] Code tùy biến giao diện Firefox Quantum

vozBot

New Member
Joined
Dec 20, 2018
Messages
6,010
Reaction score
2
moelogxamSenior Member — Joined Nov 2017
khanyou said:
NecrolyseS said:
edit được xong reboot nó lại trở lại giao diện ban đầu mặc dù file userchrome.css vẫn còn đó bác ợ
:sosad::sosad::sosad: bùn vậy bác

Thôi share nốt bộ Firefox-Safari dark theme mình vừa mod từ ShadowFox về


1. Vào đây install https://overdodactyl.github.io/ShadowFox/
2. Xong thêm mớ css dưới dây vào userChrome.css, add not replace nhé


Code: /* GPL-3.9 Copyright (C) 2007 Timvde/UserChrome-Tweaks; Code pulled from https://github.com/Timvde/UserChrome-Tweaks */ /* * Only show close buttons on background tabs when hovering with the mouse * * Contributor(s): Timvde */ .tabbrowser-tab:not([selected]):not([pinned]) .tab-close-button { opacity: 0 !important; } .tabbrowser-tab:not([selected]):not([pinned]):hover .tab-close-button { opacity: 1 !important; } /* GPL-3.9 Copyright (C) 2007 Timvde/UserChrome-Tweaks; Code pulled from https://github.com/Timvde/UserChrome-Tweaks */ /* * Makes the favicon grayscale to fit better in flat design * * Contributor(s): Madis0, Timvde */ tab .tab-icon, .tab-icon-image { filter: grayscale(1) brightness(0.5) contrast(1) invert(1); /* Remove invert(1) to make it dark */ } /* GPL-3.9 Copyright (C) 2007 Timvde/UserChrome-Tweaks; Code pulled from https://github.com/Timvde/UserChrome-Tweaks */ /* * Hides the tab favicons on all but pinned tabs. * * Contributor(s): Madis0 */ .tabbrowser-tab:not([busy="true"]):not([pinned]) .tab-icon-image { display: none !important; } /* GPL-3.9 Copyright (C) 2007 Timvde/UserChrome-Tweaks; Code pulled from https://github.com/Timvde/UserChrome-Tweaks */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* * This style will move your tabs to the bottom. Currently tested on MacOS Sierra. * * Contributor(s): Isaac-Newt, Ivan0xFF */ /*Tabs On Bottom*/ #TabsToolbar { -moz-box-ordinal-group: 2; } #nav-bar{ border-top-width: 0px !important; } /*Remove extra tab bar space*/ #TabsToolbar { padding-inline-start: 0px !important; margin-bottom: none !important; } #titlebar-placeholder-on-TabsToolbar-for-captions-buttons { display: none; } .box-inherit .scrollbox-innerbox { margin-right: 0 !important; } #TabsToolbar .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { padding-inline-start: 0px !important; padding-inline-end: 0px !important; } /* Position window controls */ #titlebar-buttonbox-container { margin-left: 5px !important; margin-top: 5px !important; } /* * Make room for window controls. * Only apply this style when not in fullscreen mode. */ #main-window:not([inFullscreen]) #nav-bar{ padding: 0px 5px 0px 75px !important; } /* My custom tabbar /* full-width tabs */ .urlbar-input.textbox-input { text-align: center !important; } .titlebar-placeholder[type="pre-tabs"], .titlebar-placeholder[type="caption-buttons"], .titlebar-placeholder[type="post-tabs"] { width: 0 !important; margin-left: 0 !important; } #TabsToolbar .tabbrowser-tab[fadein]:not([pinned]) { flex-grow: 1 !important; min-width: 11em !important; max-width: 100% !important; } #TabsToolbar .tabbrowser-tab .tab-line { display: none !important; } #TabsToolbar { margin-top: -1px; } .tab-label {-moz-box-flex: 1 !important; text-align: center !important;} Cuối cùng thành quả


Đẹp vậy :dribble:
Đăng từ next.voz.vnhttps://next.voz.vn phiên bản mới của vozForums. Click để xem bình luận gốc.
 

lnt

New Member
Joined
Jun 14, 2018
Messages
622
Reaction score
0
Chào các bạn,cho mình hỏi có code nào để bookmark thành 3 dòng được không,nó hide nhiều bất tiện quá
mình dùng ff portable 63.0.1
cảm ơn 1677
 

BanhMyTrungThit

New Member
Joined
Sep 28, 2017
Messages
1,874
Reaction score
0
chỉnh độ cao của cái thanh tab trong khung đỏ này thì chỉnh code như nào vậy cac thím?
 

buffpro

New Member
Joined
Sep 28, 2018
Messages
290
Reaction score
0
buffpro said:
mới mod thêm skin trên firefox css, thành quả :D
ẩn label bookmark (di chuột vào sẽ hiển thị):
.bookmark-item > .toolbarbutton-text {
margin-top: -1px !important;
}
.bookmark-item:not:)hover):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}
#PlacesToolbarItems > .bookmark-item:not:)hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}
.bookmark-item { /* reduce the spacing between icons */
margin: -1px !important;
}
 

buffpro

New Member
Joined
Sep 28, 2018
Messages
290
Reaction score
0
lnt said:
Chào các bạn,cho mình hỏi có code nào để bookmark thành 3 dòng được không,nó hide nhiều bất tiện quá
mình dùng ff portable 63.0.1
cảm ơn 1677
test thử xem
Code: #navigator-toolbox toolbar.chromeclass-directories.customization-target { max-height: none !important; min-height: 66px !important; max-width: 1920px !important; } #personal-bookmarks #PlacesToolbarItems { display: inline-block !important; overflow-x: visible !important; overflow-y: auto !important; } #personal-bookmarks #PlacesToolbarItems toolbarbutton { display: inline !important; } #personal-bookmarks #PlacesToolbarItems toolbarseparator { display: inline !important; padding: 0px 0.5em !important; } #personal-bookmarks .chevron { display: none !important; }
Bonus thêm
ẩn tiêu đề bookmark (di chuột vào sẽ hiển thị):
Code: .bookmark-item > .toolbarbutton-text { margin-top: -1px !important; } .bookmark-item:not:)hover):not([open="true"]) > .toolbarbutton-text { display: none !important; } #PlacesToolbarItems > .bookmark-item:not:)hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) { margin-inline-end: 0px !important; } .bookmark-item { /* reduce the spacing between icons */ margin: -1px !important; }
 
Top