Firefox 57, 북마크바 자동숨기기 & 여러줄로 하기 등 유용한 CSS 몇가지

북마크바 자동숨기기 및 여러줄로 표시하기에 대한 수정코드

http://bwhite.tistory.com/1146

Firefox 57 로 업그레이드 되면서 많은 것이 바뀌었다.

변경된 내용에 대해서는 이글에서 다루지 않을 것이다.

이글에서는 북마크바를 자동으로 숨기는 방법과 북마크바에 등록된 즐겨찾기가 많을 경우 여러줄로 표시되도록 하는 방법에 대해서 다룰 것이다.

<사전작업>

위 두가지를 하기전에 사전에 작업해야될 것이 있다.

1. Firefox 프로필폴더내에 chrome 이라는 폴더를 생성하고, chrome 폴더내에 userChrome.css 라는 파일을 생성해야 된다.

자신의 프로필폴더를 확인하는 방법은 두가지가 있다.

1) 주소바에서 about:support

2) 웹개발도구의 개발자 도구(Shift+F2) 를 실행후, folder openprofile 라고 입력후 엔터

2. 자신의 프로필폴더에서 새로운 폴더 chrome 을 생성한다.

3. chrome 폴더내에 userChrome.css 라는 파일을 생성한다.

이제 준비작업은 끝났다.

본격적으로 북마크바 자동숨기기와 여러줄로 표시하기를 하기 위해 위에서 만든 userChrome.css 파일을 메모장등으로 열어보자

1. 북마크바 자동 숨기기(Bookmark Toolbar AutoHide)

userChrome.css 을 메모장으로 연 다음, 아래의 코드를 복사하고 붙여넣는다.

/*********************************************************************************************************************/
/* Bookmark Toolbar AutoHide Fixed https://userstyles.org/styles/118127/autohide-bookmarks-toolbar-for-firefox *******/
/*********************************************************************************************************************/


@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#navigator-toolbox
{
  position: relative;
  transition: all 0.3s ease 0s !important;
}

#PersonalToolbar
{
    /*overflow: hidden;*/
  margin-top: -32px !important;
  opacity: 0;
  transition: all 0.3s ease 0s !important;
}

#navigator-toolbox:hover
{
  margin-bottom: -32px !important;
  transition-delay: 0s !important;
}

#navigator-toolbox:hover > #PersonalToolbar
{
  margin-top: 0 !important;
  opacity: 1;
  transition-delay: 0s !important;
}

2. 북마크바내 항목들을 여러줄로 표시하기

/*************************************************************************/
/* FF Bookmarks Toolbar - multirow   http://userstyles.org/styles/137190 */
/*************************************************************************/

#navigator-toolbox toolbar.chromeclass-directories.customization-target
{
  max-height: none !important;
}

#personal-bookmarks #PlacesToolbarItems
{
  display: block !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

#personal-bookmarks #PlacesToolbarItems toolbarbutton
{
  display: inline !important;
  /* 북마크바내 여러줄간의 간격을 5px 로 설정 */
  padding: 5px 0.5em !important;
}

#personal-bookmarks #PlacesToolbarItems toolbarseparator
{
  display: inline !important;
  padding: 0px 0.5em !important;
}

#personal-bookmarks .chevron
{
  display: none !important;
}


/* Menubar hidden - Alt key pressed */
#toolbar-menubar:not([inactive="true"]) ~
#nav-bar ~ #PersonalToolbar:not([customizing])
{
  transform: translateY(0);
  top: calc(var(--toolbar-offset-height) + 90px) !important;
}

3. TAB 바 여러줄로 표시하기 (이 스크립트는 아직 완전하지 않다. 여러줄로 탭바표시될시 스크롤바가 불편)

/*
The class .tabbrowser-tabs has been replaced with id #tabbrowser-tabs
changed selectors accordingly
https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/dpwsh6s/
*/
.tabbrowser-tab:not([pinned]) {
    flex-grow:1;
    min-width: 94px !important; /* Needed important tag, width can be whatever you like */
    max-width: 94px !important; /* none - Makes the tabs always fill the toolbar width */
}
.tabbrowser-tab,.tab-background {
    height:var(--tab-min-height);
}
.tab-stack {
    width: 100%;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto !important;
    min-height: var(--tab-min-height);
    max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible;
    display: block;
}

#titlebar,#titlebar-buttonbox{
    height:var(--tab-min-height) !important;
}
#titlebar{
    margin-bottom:calc(var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #titlebar{
    margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #TabsToolbar{
    margin-left:var(--tab-min-height);
}
#titlebar:active{
    margin-bottom:0 !important;
}
#titlebar:active #titlebar-content{
    margin-bottom:var(--tab-min-height) !important;
}
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){
    display: none;
}

/* This enables maximum width before scrollbar is shown */
#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;
}

/* Show close button on hover */
.tab-close-button{ display: none }
.tabbrowser-tab:not([pinned]):hover .tab-close-button{
    display: -moz-box !important
}

4. 구버전의 Firefox 메뉴버튼 및 UI 변경

/*AGENT_SHEET*/

/* Firefox 57+ userChrome.css tweaks ************************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **********/
/* by Aris (aris-addons@gmx.net)*****************************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/* 2017.11.16 Add Bookmark Toolbar AutoHide and Multirow ****************************************/
/************************************************************************************************/

/************************************************************************************************/
/* Custom CSS for Firefox ***********************************************************************/
/* version 1.2.9 ********************************************************************************/
/************************************************************************************************/

/************************************************************************************************/
/* TOOLBAR BUTTONS ******************************************************************************/
/************************************************************************************************/

/* navigation toolbar buttons appearance - only use one at a time *******************************/
@import url(./css/buttons/buttons_on_navbar_classic_appearance.css);
/* @import url(./css/buttons/buttons_on_navbar_glass_appearance.css); */

/* navigation toolbar buttons - button roundness (edit file to set different roundness) *********/
/* @import url(./css/buttons/buttons_on_navbar_button_roundness.css); */

/* squared buttons - only use one at a time (based on Firefox version) **************************/
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx57.css); */
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx58.css); */

/* icon appearance - only use one at a time *****************************************************/
@import url(./css/buttons/icons_colorized.css);
/* @import url(./css/buttons/icons_white_icons.css); */
/* @import url(./css/buttons/icons_custom_icons.css); */

/* bookmarks menu button - 'button & popup' appearance ******************************************/
@import url(./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css);
@import url(./css/buttons/bookmarks_menu_button_popup_classic_appearance.css);
/* @import url(./css/buttons/bookmarks_menu_button_popup_sidebar_item_hidden.css); */
/* @import url(./css/buttons/bookmarks_menu_button_popup_toolbar_item_hidden.css); */
/* @import url(./css/buttons/bookmarks_menu_button_popup_other_item_hidden.css); */

/* old bookmarks toolbar button appearance - 'disable' for Windows 7s classic OS theme **********/
@import url(./css/buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css);

/* other button settings ************************************************************************/
/* @import url(./css/buttons/forward_button_hide_when_disabled.css); */
/* @import url(./css/buttons/back_and_forward_separated_history_popups.css); */
/* @import url(./css/buttons/zoom_buttons_hide_reset.css); */

/* CUSTOM BACK & FORWARD BUTTONS appearance - only use one at a time ****************************/
/* @import url(./css/buttons/custom_backforward_connected_to_location_bar.css); */   /* <--- experimental */
/* @import url(./css/buttons/custom_backforward_connected_to_location_bar_aero.css); */    /* <-- AERO colors */
/* @import url(./css/buttons/custom_backforward_large_ff2.css); */
/* @import url(./css/buttons/custom_backforward_large_ff3.css); */
/* @import url(./css/buttons/custom_backforward_large_ff3_strata.css); */
/* @import url(./css/buttons/custom_backforward_large_ff3_strata_orange.css); */
/* @import url(./css/buttons/custom_backforward_large_ff3_strata_red.css); */
/* @import url(./css/buttons/custom_backforward_large_ie8.css); */
/* @import url(./css/buttons/custom_backforward_large_ie9.css); */
/* @import url(./css/buttons/custom_backforward_large_kempelton.css); */
/* @import url(./css/buttons/custom_backforward_small_ff3.css); */
/* @import url(./css/buttons/custom_backforward_small_ff3_strata.css); */
/* @import url(./css/buttons/custom_backforward_small_ff3_strata_orange.css); */
/* @import url(./css/buttons/custom_backforward_small_ff3_strata_red.css); */
/* @import url(./css/buttons/custom_backforward_small_ie8.css); */
/* @import url(./css/buttons/custom_backforward_small_ie9.css); */
/* @import url(./css/buttons/custom_backforward_small_kempelton.css); */


/************************************************************************************************/
/* APPLICATION/HAMBURGER BUTTON *****************************************************************/
/************************************************************************************************/

/* application/hamburger button hidden - don't use any other appbutton options in that case *****/
/* @import url(./css/buttons/appbutton_hidden.css); */

/* application/hamburger button popup ***********************************************************/
@import url(./css/buttons/appbutton_popup_icons_colorized.css);
/* @import url(./css/buttons/appbutton_popup_sync_hidden.css); */
/* @import url(./css/buttons/appbutton_popup_panelarrow_hidden.css); */  /* <--- experimental */


/************************************************************************************************/
/* button on navigation toolbar *****************************************************************/
/************************************************************************************************/

/* @import url(./css/buttons/appbutton_on_navbar_start_position.css); */
/* @import url(./css/buttons/appbutton_on_navbar_separator_hidden.css); */

/* button color - only use one at a time ********************************************************/
/* @import url(./css/buttons/appbutton_on_navbar_color_autocolor.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_autocolor57p.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_orange.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_aurora.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_nightly.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_deved57p.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_nightly57p.css); */
/* @import url(./css/buttons/appbutton_on_navbar_color_palemoon.css); */

/* button icon - only use one at a time *********************************************************/
/* @import url(./css/buttons/appbutton_on_navbar_icon_white.css); */
/* @import url(./css/buttons/appbutton_on_navbar_icon_dark.css); */
/* @import url(./css/buttons/appbutton_on_navbar_icon_grey.css); */


/************************************************************************************************/
/* button in Firefox titlebar - if menubar is disabled (Windows only) ***************************/
/************************************************************************************************/

/* only use one at a time ***********************************************************************/
@import url(./css/buttons/appbutton_in_titlebar.css);
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_dark.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_icon_only_grey.css); */

/* button color - only use one at a time ********************************************************/
@import url(./css/buttons/appbutton_in_titlebar_autocolor.css);
/* @import url(./css/buttons/appbutton_in_titlebar_autocolor57p.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_transparent.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_aurora.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_nightly.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_deved57p.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_nightly57p.css); */
/* @import url(./css/buttons/appbutton_in_titlebar_palemoon.css); */


/************************************************************************************************/
/* TABS - appearance and position ***************************************************************/
/************************************************************************************************/

/* custom tab appearance - only use one at a time ***********************************************/
@import url(./css/tabs/classic_squared_tabs.css);
/* @import url(./css/tabs/classic_squared_tabs_aero.css); */    /* <-- AERO colors */
/* @import url(./css/tabs/classic_squared_tabs_transparent.css); */
/* @import url(./css/tabs/classic_squared_tabs_aeroglass.css); */
/* @import url(./css/tabs/classic_squared_tabs_australized.css); */
/* @import url(./css/tabs/classic_squared_tabs_australized_aero.css); */    /* <-- AERO colors */
/* @import url(./css/tabs/classic_squared_tabs_australized_transparent.css); */
/* @import url(./css/tabs/classic_squared_tabs_australized_aeroglass.css); */

/* custom tab colors for default/active/hovered/unread/unloaded tabs - only use one at a time ***/
/* @import url(./css/tabs/custom_colors_for_squared_tabs.css); */
/* @import url(./css/tabs/custom_colors_for_squared_tabs_australized.css); */

/* text colors/shadow/weight/style for default/active/hovered/unread/unloaded tabs **************/
/* @import url(./css/tabs/custom_text_settings.css); */

/* remove top corner roundness ******************************************************************/
/* @import url(./css/tabs/classic_squared_tabs_fully_squared.css); */

/* TABS TOOLBAR POSITION (not in titlebar / not on top) - only use one at a time ****************/
/* - TABS BELOW TITLEBAR (Fx56-like) ************************************************************/
/* @import url(./css/tabs/tabs_below_titlebar_above_navigation_toolbar.css); */
/* - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS (tabs not on top) *****************************/
/* @import url(./css/tabs/tabs_below_navigation_toolbar.css); */
/* @import url(./css/tabs/tabs_below_navigation_toolbar_aero.css); */    /* <-- AERO colors */
/* @import url(./css/tabs/tabs_below_navigation_toolbar_transparent.css); */
/* @import url(./css/tabs/tabs_below_navigation_toolbar_aeroglass.css); */

/* restore empty/missing tab favicon - only use one at a time ***********************************/
@import url(./css/tabs/missing_tab_favicon_restored_default.css);
/* @import url(./css/tabs/missing_tab_favicon_restored_sheet.css); */
/* @import url(./css/tabs/missing_tab_favicon_restored_dotted.css); */
/* @import url(./css/tabs/missing_tab_favicon_restored_dotted_white.css); */

/* custom tab loading animation - only use one at a time ****************************************/
/* @import url(./css/tabs/tab_throbber_blue_fx56.css); */
/* @import url(./css/tabs/tab_throbber_blue.css); */
/* @import url(./css/tabs/tab_throbber_grey_classic.css); */
/* @import url(./css/tabs/tab_throbber_green.css); */
/* @import url(./css/tabs/tab_throbber_orange_ubuntu.css); */

/* tab close icon settings - only use one at a time *********************************************/
@import url(./css/tabs/tab_close_always_visible.css);
/* @import url(./css/tabs/tab_close_on_active_tab_only.css); */
/* @import url(./css/tabs/tab_close_show_on_hover_only.css); */
/* @import url(./css/tabs/tab_close_hidden.css); */
/* @import url(./css/tabs/tab_close_hidden_for_only_one_visible_tab.css); */
/* @import url(./css/tabs/tab_close_at_tabs_start.css); */

/* tab close icon size override - only use one at a time ****************************************/
/* @import url(./css/tabs/tab_close_icon_size_16x16px.css); */
/* @import url(./css/tabs/tab_close_icon_size_18x18px.css); */
/* @import url(./css/tabs/tab_close_icon_size_20x20px.css); */

/* tab title - only use one at a time ***********************************************************/
/* @import url(./css/tabs/tab_title_left.css); */
/* @import url(./css/tabs/tab_title_centered.css); */
/* @import url(./css/tabs/tab_title_right.css); */

/* other tab settings ***************************************************************************/
@import url(./css/tabs/tab_icon_colors.css);
/* @import url(./css/tabs/tab_maxwidth.css); */
/* @import url(./css/tabs/tab_titles_remove_blur.css); */
/* @import url(./css/tabs/alltabs_button_always_visible.css); */
/* @import url(./css/tabs/pinnedtab_empty_favicon_hidden.css); */


/************************************************************************************************/
/* GENERAL UI ***********************************************************************************/
/************************************************************************************************/

@import url(./css/generalui/findbar_on_top.css);
@import url(./css/generalui/private_mode_indicator_hidden.css);
@import url(./css/generalui/bookmark_icons_colorized.css);
/* @import url(./css/generalui/send_to_device_menuitems_hidden.css); */
/* @import url(./css/generalui/popup_animation_fade_time_reduced.css); */
/* @import url(./css/generalui/increase_ui_font_size.css); */
/* @import url(./css/generalui/overflow_menu_remove_text.css); */

/* page context menu items: 'back', 'forward', 'reload', 'stop', 'bookmarks' ********************/
/* @import url(./css/generalui/context_bfrsb_icons_colorized.css); */
/* menuitem labels - only use one at a time *****************************************************/
@import url(./css/generalui/context_bfrsb_labels_without_icons.css);
/* @import url(./css/generalui/context_bfrsb_labels_with_icons.css); */
/* adjustment for Windows Classic OS theme ******************************************************/
/* @import url(./css/generalui/context_bfrsb_labels_adjustment_windows_classic.css); */

/* close icons for general ui and tabs - only use one at a time *********************************/
/* @import url(./css/generalui/close_icon_windows7.css); */
/* @import url(./css/generalui/close_icon_windows7inverted.css); */
/* @import url(./css/generalui/close_icon_windows7v2.css); */
/* @import url(./css/generalui/close_icon_gchrome.css); */
/* @import url(./css/generalui/close_icon_red.css); */
/* @import url(./css/generalui/close_icon_windows10.css); */
/* @import url(./css/generalui/close_icon_windows10inverted.css); */
/* @import url(./css/generalui/close_icon_windows10red.css); */
/* @import url(./css/generalui/close_icon_windows10redv2.css); */

/* SEARCHBAR ************************************************************************************/
@import url(./css/generalui/searchbar_glassplus_indicator_hidden.css);
/* @import url(./css/generalui/searchbar_go_button_hidden.css); */

/* search engine settings - only use one at a time **********************************************/
/* @import url(./css/generalui/searchbar_popup_engines_hidden.css); */
/* @import url(./css/generalui/searchbar_popup_engines_show_labels.css); */

/* MENUBAR - bookmarks popup (not compatible to macOS/Linux) ************************************/
/* @import url(./css/generalui/menubar_bookmarks_popup_bookmark_page_item_hidden.css); */
/* @import url(./css/generalui/menubar_bookmarks_popup_subscribe_item_hidden.css); */
/* @import url(./css/generalui/menubar_bookmarks_popup_toolbar_item_hidden.css); */
/* @import url(./css/generalui/menubar_bookmarks_popup_other_item_hidden.css); */


/************************************************************************************************/
/* TOOLBARS *************************************************************************************/
/************************************************************************************************/

@import url(./css/toolbars/toolbars_old_padding.css);
@import url(./css/toolbars/tabs_toolbar_adjustments.css);
/* @import url(./css/toolbars/navbar_more_compact_mode.css); */
/* @import url(./css/toolbars/menubar_in_fullscreen_mode.css); */

/* bookmarks toolbar  ***************************************************************************/
@import url(./css/toolbars/bookmarks_toolbar_old_height.css);
/* @import url(./css/toolbars/bookmarks_toolbar_in_fullscreen_mode.css); */
/* @import url(./css/toolbars/bookmarks_toolbar_multiple_lines.css); */ /* <--- experimental */

/* toolbar colors - only use one at a time ******************************************************/
@import url(./css/toolbars/general_toolbar_colors.css);
/* @import url(./css/toolbars/general_toolbar_colors_aero.css); */    /* <-- AERO colors */
/* @import url(./css/toolbars/general_toolbar_colors_transparent.css); */
/* @import url(./css/toolbars/general_toolbar_colors_aeroglass.css); */

/* TOOLBAR TEXT MODES - only use one at a time **************************************************/
/* @import url(./css/toolbars/toolbar_mode_icons_and_text.css); */  /* <--- experimental */
/* @import url(./css/toolbars/toolbar_mode_text.css); */  /* <--- experimental */


/************************************************************************************************/
/* LOCATION BAR *********************************************************************************/
/************************************************************************************************/

@import url(./css/locationbar/locationbar_adjustments.css);
@import url(./css/locationbar/compact_mode_reduce_fontsize.css);
/* @import url(./css/locationbar/background_color_dark.css); */
/* @import url(./css/locationbar/locationbar_border_roundness.css); */
/* @import url(./css/locationbar/locationbar_reduce_height.css); */ /* <--- experimental */

/* autocomplete/history dropmarker **************************************************************/
@import url(./css/locationbar/dropmarker_at_the_end.css);
@import url(./css/locationbar/dropmarker_visible.css);

/* additional icons/buttons and third party page action buttons *********************************/
@import url(./css/locationbar/icons_colorized.css);
@import url(./css/locationbar/reader_alternative_icon.css);
@import url(./css/locationbar/starbutton_is_last_pageaction_button.css);
@import url(./css/locationbar/pageaction_separator_in_location_bar_hidden.css);
/* @import url(./css/locationbar/pageaction_button_in_location_bar_hidden.css); */
/* @import url(./css/locationbar/popup_blocked_button_hidden.css); */
/* @import url(./css/locationbar/zoom_button_hidden.css); */
/* @import url(./css/locationbar/go_button_in_location_bar_hidden.css); */

/* identity box / page identity button **********************************************************/
@import url(./css/locationbar/identitybox_replace_i_icon_with_globe.css);
@import url(./css/locationbar/identitybox_colors.css);
/* @import url(./css/locationbar/identitybox_labels_hidden.css); */

/* padlock icons in identity box / page identity button - only use one at a time ****************/
@import url(./css/locationbar/identitybox_padlock_icon_classic.css);
/* @import url(./css/locationbar/identitybox_padlock_icon_classic2.css); */
/* @import url(./css/locationbar/identitybox_padlock_icon_modern.css); */
/* @import url(./css/locationbar/identitybox_padlock_icon_modern2.css); */


/************************************************************************************************/
/* LOCATION BAR - 'autocomplete popup' appearance ***********************************************/
/************************************************************************************************/

/* popup content order/appearance - only use one at a time **************************************/
@import url(./css/locationbar/ac_popup_classic_with_two_lines.css);
/* @import url(./css/locationbar/ac_popup_title_and_url_50percent_width.css); */
/* @import url(./css/locationbar/ac_popup_url_and_title_50percent_width.css); */
/* @import url(./css/locationbar/ac_popup_item_title_hidden.css); */
/* @import url(./css/locationbar/ac_popup_item_title_visible_on_hover_only.css); */

/* result settings/appearance *******************************************************************/
/* @import url(./css/locationbar/ac_popup_result_highlighting_aero.css); */
/* @import url(./css/locationbar/ac_popup_keysearch_bold.css); */
/* @import url(./css/locationbar/ac_popup_keysearch_underline.css); */
/* @import url(./css/locationbar/ac_popup_result_separator.css); */

/* hide 'Search with...' and 'Visit...' results *************************************************/
/* - disable 'show search suggestions inside address bar results' inside browser preferences ****/
/* - hide bottom search engines: about:config > browser.urlbar.oneOffSearches > false ***********/
 @import url(./css/locationbar/ac_popup_searchwith_and_visit_items_hidden.css);


/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

참고로, 위 코드들을 userChrome.css 파일에 함께 사용해도 된다.

함께 사용하게 되면 북마크바 자동숨기기가 되면서 여러줄로 표시가 될 것이다.

위 코드들을 userChrome.css 파일로 생성한것을 파일도 올려놓으니 아래 파일을 다운로드 받아 사용해도 된다

userChrome.css