Архив метки: css



Firefox: Допиливаем тему для браузера

Здесь описан процесс создания темы для браузера и дальнейшая её настройка с помощью файла userChrome.css.
В итоге получается такая тема (скин):

Активное окно Firefox с панелью поиска и неактивное окно за ним

Шаг 1 — Создание темы

Уже готовую тему (без файла userChrome.css) можно скачать здесь и, если не хочется создавать базовую тему своими руками, переходим сразу ко второму шагу.

 

Создать (сгенерировать) простенькую тему для Firefox можно на странице-генераторе для разработчиков.

1. Для начала нужно задать название темы.
2. Выбираем файл для создания Верхнего изображения темы.

Файл должен удовлетворять следующим требованиям:

  • Высота 200 пикселей
  • Размер файла не больше 6.9МБ
  • Формат файла: PNG, JPG, APNG, SVG или GIF (Не используйте анимированные gif’ы.)
  • Изображение будет выровнено по правому краю заголовка браузера.

 

Я сделал файл шириной 1 пиксель, т.к. изображение всё равно будет растянуто под нужный размер окна):

3. Настраиваем цвета

  • Фон области заголовка:
    rgba(81, 92, 107, 1)
  • Текст и значки в зоне заголовка:
    rgba(255, 255, 255, 1)
  • Фон панели инструментов:
    rgba(151, 157, 166, 1)
  • Текст и значки в зоне панели инструментов:
    rgba(255, 255, 255, 1)
  • Фон зоны поля панели инструментов:
    rgba(199, 215, 234, 1)
  • Текст зоны поля панели инструментов:
    rgba(0, 0, 0, 1)

4. Нажимаем кнопку Завершить тему, после чего тема будет отправлена на рассмотрение и вскоре будет доступна для всех.

Вообще тему можно и не создавать, а взять встроенную Default или Light, т.к. самое главное для нас — это следующий шаг.

 

Более детальную информацию по созданию темы можно почитать на этой странице.

 

Шаг 2 — Создание файла userChrome.css

Чтобы правила из userChrome.css работали, нужно включить его поддержку!

Здесь я просто помещу код файла, внутри будут комментарии к основным разделам. Единственное, что отмечу — ближе к концу файла идёт личная настройка, строчки которой можно удалить (строка 134 и далее — отключение отображения пунктов контекстного меню, изменение цвета значка BitWarden, значки папок на панели закладок, а также значки вложенных папок для папок на панели закладок):

/* set default namespace to XUL
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
*/
/* https://dentnt.trmw.ru/15441-firefox-theme-creation */

/*** Styles are mainly for the LIGHT theme ***/
:root
{
  --lwt-toolbarbutton-hover-background: #898e96;
  --toolbar-inactive-title-bg-color: #717f93;
  --toolbarbutton-border-color: #63748f;
}

/* Remove shadow from tabs text */
*
{
  text-shadow: none !important;
}

/* Bookmark toolbar panel height and text style */
#personal-bookmarks
{
  color: black !important;
  font-weight: bold;
}

/** Back-button fix **/
#back-button > .toolbarbutton-icon
{
  background: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 2px !important;
  border: 1px solid var(--toolbarbutton-border-color) !important;
  padding: 6px !important;
}

#back-button:not([disabled]):hover > .toolbarbutton-icon
{
  background: var(--lwt-toolbarbutton-hover-background) !important;
}

#reload-button > .toolbarbutton-icon,
#stop-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon
{
  border: 1px solid var(--toolbarbutton-border-color);
}

/** TABS **/
/* Hovered normal tab text color */
.tabbrowser-tab:not([visuallyselected]):hover > .tab-stack > .tab-content .tab-text
{
  color: black !important;
}

/* Active tab text color */
.tabbrowser-tab[visuallyselected]:not(:hover) > .tab-stack > .tab-content .tab-text
{
  font-weight: bold !important;
  color: black !important;
}

/* Hovered active tab text color */
.tabbrowser-tab[visuallyselected]:hover > .tab-stack > .tab-content .tab-text
{
  font-weight: bold !important;
  color: white !important;
}

/** Toolbar icons frame-color **/
toolbarbutton[removable="true"] > .toolbarbutton-badge-stack,
toolbarbutton[removable="true"]:not([type="menu"]) > .toolbarbutton-icon,
#nav-bar-overflow-button > .toolbarbutton-icon,
#PanelUI-menu-button > .toolbarbutton-badge-stack
{
  border: 1px solid var(--toolbarbutton-border-color);
  /* Fix toolbarbutton-icon size */
  width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
}
/**********/

/** Not focused (inactive) Menubar colors and text **/
menubar:-moz-window-inactive,
menubar:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme,
:root[tabsintitlebar]:-moz-window-inactive,
:root[tabsintitlebar]:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme
{
  background: var(--toolbar-inactive-title-bg-color) !important;
  color: white !important;
}
#main-menubar:-moz-window-inactive,
#toolbar-menubar:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme
{
  background: var(--toolbar-inactive-title-bg-color);
}

/** Address/URL bar **/
/* Secure connection icon background color */
#identity-box[class^="verifiedDomain"]
{
  background: rgba(0, 128, 0, 0.2);
  border-radius: 3px; /* rounded corners of the icon */
}

/* Insecure connection icon background */
#identity-box[class^="notSecure"]
{
  background: rgba(128, 0, 0, 0.2);
  border-radius: 3px; /* rounded corners of the icon */
}
/***********/

/** Set Find-bar background color to default theme color **/
.browserContainer > findbar
{
  background: var(--toolbar-bgcolor) !important;
}
/* Move Find-bar Close button to left and set background */
.findbar-closebutton
{
  -moz-box-ordinal-group: 0;
}

toolbarbutton[checked]
{
  background: rgba(0,0,0,0.6) !important;
  color: white !important;
}
/** ****************/

/** Hide Context menu items **/
#appMenu-logins-button, /* Logins and Passwords */
#fill-login, /* Fill Login */
#context-sendimage, /* Email Image... */
#context-sendpagetodevice, /* Send Page to Device */
#context-inspect, /* Inspect Element */
#context-setDesktopBackground, /* Set As Desktop Background */
#context-keywordfield, /* Add a Keyword for this Search... */
#context_closeTabsToTheEnd, /* Close Tabs To The Right */
#context_pinTab, /* Pin Tab */
#context_unpinTab, /* UnPin Tab */
#context_moveTabOptions, /* Move Tab */
#context_selectAllTabs, /* Select All Tabs */
#context_sendTabToDevice, /* Send Tab to Device */
#context-viewbgimage, /* View Background Image */
#screenshots_mozilla_org-menuitem-_create-screenshot, /* Take a screenshot */
/** Hide buttons **/
#fxa-toolbar-menu-button, /* Firefox Account button (Sync) */
#_9aa46f4f-4dc7-4c06-97af-5035170634fe_-browser-action, /* ImTranslator */
#permissions-granted-icon /* Permissions Granted Icon in address bar */
{
  display: none;
}
/************/

.toolbarbutton-icon[label="Bitwarden"] /* BitWarden icon color fix */
{
  filter: grayscale(70%);
}

/*** ICONS ***/
/** Bookmark folder icon replacement **/
/* Bookmark Folders */
.bookmark-item
{
  background: no-repeat left 15% top 60% / 12px;
}
.bookmark-item[label="[ Я ]"]
{
  background-image: url("https://ya.ru/favicon.ico");
}
.bookmark-item[label="[ G ]"]
{
  background-image: url("https://www.google.com/favicon.ico");
}

/* Bookmark Sub-Folders */
menu > .menu-iconic-left > .menu-iconic-icon
{
  background: no-repeat left 50% top 60% / 12px;
}
menu[label="[ Сбербанк ]"] > .menu-iconic-left > .menu-iconic-icon
{
  background-image: url("https://www.sberbank.ru/favicon.ico");
}
menu[label="[ mos.ru ]"] > .menu-iconic-left > .menu-iconic-icon
{
  background-image: url("https://www.mos.ru/static/images/favicon/icon76x76.png");
}
menu[label="[ DDO ]"] > .menu-iconic-left > .menu-iconic-icon
{
background-image: url("https://www.ddo.com/favicon.ico");
}
/*****************/