Полезная информация

Многие проблемы быстрее решаются поиском по форуму и чтением FAQ, чем созданием новой темы и томительным ожиданием ответа.

№1372628-02-2024 09:55:43

Viatcheslav
Участник
 
Группа: Members
Откуда: г. Бобруйск, Беларусь
Зарегистрирован: 23-11-2016
Сообщений: 317
UA: Firefox 114.0

Re: Настройка внешнего вида Firefox в userChrome.css

grom17 пишет

скрытый текст
/* userContent.css */
a:visited, a:visited span {
    color: #00d70f!important;
}
a:hover, a:hover span {
    color: #ff0000 !important;
}
a {
  color: maroon;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease;
}
a:hover {
  transform: scale(1.02);
}

Вопрос был в изменении  цвета ссылок на определённом сайте.
Ваш код изменяет все посещённые ссылки

Отсутствует

 

№1372728-02-2024 10:13:47

grom17
Участник
 
Группа: Members
Зарегистрирован: 13-06-2019
Сообщений: 44
UA: Firefox 125.0

Re: Настройка внешнего вида Firefox в userChrome.css

Viatcheslav пишет

на определённом сайте

Извиняюсь, моя невнимательность.

Отсутствует

 

№1372828-02-2024 12:31:01

leshiy_odessa
Участник
 
Группа: Members
Зарегистрирован: 13-02-2009
Сообщений: 294
UA: Firefox 122.0

Re: Настройка внешнего вида Firefox в userChrome.css

vending_machine пишет

Специфический вопрос. Возможно ли изменить цвет посещённых ссылок на определённом сайте?

https://addons.mozilla.org/en-US/firefox/addon/styl-us/

Отсутствует

 

№1372904-03-2024 17:52:50

grom17
Участник
 
Группа: Members
Зарегистрирован: 13-06-2019
Сообщений: 44
UA: Firefox 123.0

Re: Настройка внешнего вида Firefox в userChrome.css

Возможно ли в боковой панели закладок сделать шрифт папок одним цветом, а самих закладок другим?
Вопрос снят. Помогли на дружественном форуме.

Отредактировано grom17 (04-03-2024 21:24:56)

Отсутствует

 

№1373005-03-2024 17:50:44

kokoss
Участник
 
Группа: Members
Зарегистрирован: 15-02-2018
Сообщений: 1734
UA: Firefox 115.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06 пишет

чтобы иконки при наведении на них отображались.

Проверьте без этой строки -> --arrowpanel-dimmed: rgba(255,255,255,0.1) !important;


Win7

Отсутствует

 

№1373106-03-2024 00:12:38

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06
А это весь код выложен? У меня не работает прозрачность выпадающей панели адресной строки с вашим кодом,
но попробуйте добавить переменную в блок где у вас /* Прозрачность */ может поможет
--urlbarView-hover-background: rgba(255,255,255,0.1) !important;

Отсутствует

 

№1373208-03-2024 13:56:59

b0ttle
Участник
 
Группа: Members
Зарегистрирован: 22-10-2020
Сообщений: 182
UA: Firefox 123.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06, у меня так.

Выделить код

Код:

#ucf-additional-vertical-bar,#ucf-additional-top-bar,#ucf-additional-bottom-bar{--toolbarbutton-outer-padding:0px!important;--toolbarbutton-inner-padding:0.4px!important;}

Отсутствует

 

№1373308-03-2024 14:27:30

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06
Это и для доп. панели если не нужно удалите #ucf-additional-top-bar, из кода

скрытый текст

Выделить код

Код:

#ucf-additional-top-bar,
#ucf-additional-vertical-bar,
#ucf-additional-bottom-bar {
    --toolbarbutton-border-radius: 2px !important;
    --toolbarbutton-outer-padding: 1px !important;
    --toolbarbutton-inner-padding: 4px !important;
    :root[uidensity="compact"]  & { /* компактный режим */
        --toolbarbutton-outer-padding: 1px !important;
        --toolbarbutton-inner-padding: 4px !important;
    }
    :root[uidensity="touch"] & { /* мобильный режим */
        --toolbarbutton-outer-padding: 2px !important;
        --toolbarbutton-inner-padding: 9px !important;
    }
    .toolbarbutton-badge {
        margin-top: calc(-1 * var(--toolbarbutton-inner-padding)) !important;
        margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
        border-radius: var(--toolbarbutton-border-radius) !important;
    }
}


P.S. Код для [firefox] 117 +

Отредактировано Vitaliy V. (08-03-2024 14:28:39)

Отсутствует

 

№1373408-03-2024 14:51:14

6e73epo
Участник
 
Группа: Members
Зарегистрирован: 06-05-2022
Сообщений: 207
UA: Firefox 122.0

Re: Настройка внешнего вида Firefox в userChrome.css

Vitaliy V., страница about:downloads. В контекстное меню добавляю иконки. Но как вижу для окна полицию прикрутили:
csp="default-src chrome:; img-src chrome: moz-icon:;
Добавить свою иконку не получится?

Отредактировано 6e73epo (08-03-2024 14:51:59)

На форуме

 

№1373509-03-2024 01:25:51

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

6e73epo
Получится, данная CSP не влияет на стили, но смотря куда вы добавляете и как, если в userChrome.css понятно не сработает нужно в userContent.css или в UCF ...

Отредактировано Vitaliy V. (09-03-2024 01:28:59)

Отсутствует

 

№1373609-03-2024 03:58:40

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1194
UA: Firefox 123.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06
Как по мне, лучше старый код, работает. Пусть не такой универсальный.

скрытый текст

Выделить код

Код:

/* Сжать доп.панели https://forum.mozilla-russia.org/viewtopic.php?pid=775867#p775867 */
#ucf-additional-top-bar,
#ucf-additional-bottom-bar {
    --toolbarbutton-outer-padding: 0px !important;
    --toolbarbutton-inner-padding: 2px !important;
    min-height: 18px !important;
}
:is(#ucf-additional-top-bar,#ucf-additional-bottom-bar) .toolbarbutton-badge {
    margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
}
#ucf-additional-bottom-closebutton {
    padding: 0 !important;
}
#ucf-additional-vertical-bar {
    --toolbarbutton-outer-padding: 0px !important; /* это и есть ширина боковой панели; комбинируется с пар. ниже */
    --toolbarbutton-inner-padding: 3px !important; /* расстояние по вертикали между кнопками; комбинируется с предыдущим, лучше 3 или 5 */
    min-width: 18px !important;
}
#ucf-additional-vertical-bar .toolbarbutton-badge {
    margin-inline-end: calc(-1 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) !important;
}

Отредактировано xrun1 (09-03-2024 04:13:35)

Отсутствует

 

№1373709-03-2024 10:48:20

6e73epo
Участник
 
Группа: Members
Зарегистрирован: 06-05-2022
Сообщений: 207
UA: Firefox 122.0

Re: Настройка внешнего вида Firefox в userChrome.css

Vitaliy V. пишет

данная CSP не влияет на стили

Влияет, но избранно. Пункт меню "Clear Downloads" особняком стоит; не имеет класса и command присутствует. Ошибка в консоли не просто так:
Content-Security-Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml;charset=utf-8,<svg wi… (“img-src”)

Отредактировано 6e73epo (09-03-2024 10:49:30)

На форуме

 

№1373809-03-2024 11:47:32

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

6e73epo пишет

data:image

А ну да, забыл уже давно не использую data:image, отдельным файлом загружайте и не будет ошибки

xrun1 пишет

Как по мне, лучше старый код, работает

Что именно лучше ? Там плюс минус одно и то же

Отредактировано Vitaliy V. (09-03-2024 12:16:40)

Отсутствует

 

№1373909-03-2024 15:27:38

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1194
UA: Firefox 123.0

Re: Настройка внешнего вида Firefox в userChrome.css

Vitaliy V. пишет

Там плюс минус одно и то же

Да, конечно. Просто для компактного режима, мне так кажется, значения лучше поменьше. Они такие же же, как в обычном.

Выделить код

Код:

:root[uidensity="compact"]  & { /* компактный режим */
        --toolbarbutton-outer-padding: 0px !important; /* 1px */
        --toolbarbutton-inner-padding: 3px !important; /* 4px */
    }

И чтобы два раза со стула не вставать. В версиях UCF от 2024-3-2 и 2024-3-7 незначительно изменился файл vertical_top_bottom_bar.css, который есть в UserChromeFiles_Fix_115_ESR.zip. Может это и не особенно важно, просто информация.

скрытый текст

Выделить код

Код:

#ucf-additional-vertical-box {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 3 !important;
    margin: -1px 0 !important;
   :root[BookmarksToolbarOverlapsBrowser] & {
        margin-top: calc(var(--bookmarks-toolbar-overlapping-browser-height) - 1px) !important;
    }
}

Отсутствует

 

№1374009-03-2024 16:11:06

6e73epo
Участник
 
Группа: Members
Зарегистрирован: 06-05-2022
Сообщений: 207
UA: Firefox 122.0

Re: Настройка внешнего вида Firefox в userChrome.css

Vitaliy V. пишет

А ну да, забыл уже давно не использую data:image, отдельным файлом загружайте и не будет ошибки

Сегодня нельзя data:image, а позже нельзя ничего, кроме chrome:// Да и не любитель плодить файлы иконок внутри каталога chrome
Нашел выход через стилевое переопределение "неиспользуемого" svg

На форуме

 

№1374109-03-2024 17:16:05

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

xrun1 пишет

Просто для компактного режима, мне так кажется, значения лучше поменьше

Со значениями это свои используйте, да и компактный режим только через about:config включается

xrun1 пишет

В версиях UCF от 2024-3-2 и 2024-3-7 незначительно изменился файл vertical_top_bottom_bar.css, который есть в UserChromeFiles_Fix_115_ESR.zip.

Это для вертикальной панели, когда для панели закладок включенно "отображать только на новой вкладке" не корректно верт. панель была поверх панели закладок.
А для 115 ESR нормально это не требуется.

Отредактировано Vitaliy V. (09-03-2024 17:16:42)

Отсутствует

 

№1374211-03-2024 13:44:35

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06
Системная тема может быть как светлой так и темной я так понял у вас светлая, но с этим стилем и со светлой темой текста не видно он белый.
Исправьте во всех стилях visuallyselected="true" --> visuallyselected
Чтобы текст был черным на активных вкладках можно добавить в  :root {
--tab-selected-textcolor: black !important;

Отсутствует

 

№1374312-03-2024 14:43:57

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

egorsemenov06 пишет

А еще как сделать белую адресную и поисковую строки  с голубой обводкой как в светлой так и в темной теме без этих шторок

Так какой темой пользуетесь светлой или темной? Зачем делать везде одинаково не пойму если вы хотите из темной темы сделать светлую я пас.
И что шторками называете, без них это как? Если уж изменяете цвета в стилях (хотя это темы должны делать) то можно использовать функцию  light-dark()
она возвращает первое значение для светлой темы и второе для темной, например
background-color: light-dark(rgba(255,255,255,0.8), rgba(10,10,15,0.6)) !important;

Отсутствует

 

№1374412-03-2024 19:54:16

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

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

скрытый текст

Выделить код

Код:

:root {
    --urlbar-min-height: max(28px, 1.4em) !important;
    --urlbar-icon-padding: 4px !important;
    --urlbar-container-padding: 0px !important;
    --urlbar-icon-border-radius: 0px !important;
    --urlbar-margin-inline: 1px !important;
    --focus-outline-width: 1px !important;
    --v-urlbar-searchbar-border-radius: calc(var(--urlbar-min-height) / 2);
}
:root[uidensity=touch] {
    --urlbar-min-height: max(34px, 1.4em) !important;
    --urlbar-margin-inline: 5px !important;
}

#urlbar-container {
    padding: 1px 0 !important;
    margin: 0 var(--urlbar-margin-inline) !important;
    &[breakout] {
        position: relative !important;
    }
    #urlbar {
        #identity-icon-box,
        #identity-box {
            max-width: calc(30px + 15em) !important;
        }
        &[breakout] {
            display: block !important;
            position: absolute !important;
            width: 100% !important;
            height: var(--urlbar-height) !important;
            top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
            inset-inline: 0 !important;
        }
        &[breakout] > :is(#urlbar-input-container,.urlbar-input-container) {
            width: 100% !important;
            height: var(--urlbar-height) !important;
            padding: 0 !important;
        }
        &[breakout][breakout-extend],
        &[breakout][breakout-extend-disabled][open] {
            height: auto !important;
        }
        &[breakout] > #urlbar-background {
            display: block !important;
            position: absolute !important;
            animation: none !important;
            inset-inline: 0 !important;
            box-shadow: none !important;
            height: var(--urlbar-height) !important;
            top: 0 !important;
            bottom: auto !important;
        }
        &[breakout][open] > #urlbar-background {
            border-color: var(--toolbar-field-border-color, transparent) !important;
        }
        &[breakout][focused] > #urlbar-background {
            border-color: var(--toolbar-field-focus-border-color, Highlight) !important;
        }
        &[breakout] > .urlbarView {
            margin: 0 !important;
            width: 100% !important;
            border-radius: var(--v-urlbar-searchbar-border-radius) !important;
            background: var(--toolbar-field-focus-background-color, Field) !important;
            color: var(--toolbar-field-focus-color, FieldText) !important;
            border: 1px solid var(--arrowpanel-border-color, ThreeDShadow) !important;
            border-top: none !important;
            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
            .searchbar-engine-one-off-item {
                margin: 0 !important;
                min-width: 28px !important;
                height: 28px !important;
                &:not(.search-setting-button)::after {
                    content: "";
                    border-inline-end: 1px solid;
                    border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
                }
            }
            .search-panel-one-offs-container {
                min-width: calc(5 * 28px) !important;
            }
            .urlbarView-quickaction-button {
                border-radius: var(--toolbarbutton-border-radius) !important;
                box-shadow: none !important;
            }
        }
        &[breakout] > .urlbarView .urlbarView-body-inner {
            border: none !important;
        }
        &[breakout] > .urlbarView .search-one-offs,
        &[breakout] > .urlbarView .urlbarView-results {
            padding-block: 0 !important;
        }
        &:not([focused]) input {
            mask-image: linear-gradient(to left, transparent, black 3ch);
            mask-repeat: no-repeat;
        }
        &:not([focused]):-moz-locale-dir(rtl) input {
            mask-image: linear-gradient(to right, transparent, black 3ch);
        }
    }
}
#search-container {
    padding: 1px 0 !important;
    margin: 0 var(--urlbar-margin-inline) !important;
    #searchbar {
        .searchbar-search-icon {
            margin-inline-start: 6px !important;
        }
        &:not(:focus-within) input {
            mask-image: linear-gradient(to left, transparent, black 3ch);
            mask-repeat: no-repeat;
        }
        &:not(:focus-within):-moz-locale-dir(rtl) input {
            mask-image: linear-gradient(to right, transparent, black 3ch);
        }
    }
}
#urlbar :is(#urlbar-input-container,.urlbar-input-container,#urlbar-background), #searchbar {
    box-shadow: none !important;
    background-clip: border-box !important;
    border-radius: var(--v-urlbar-searchbar-border-radius) !important;
    overflow: clip;
}
#urlbar, #searchbar {
    min-height: var(--urlbar-min-height) !important;
    font-size: 1em !important;
    box-shadow: none !important;
    align-items: stretch !important;
}
#PopupSearchAutoComplete {
    --panel-subview-body-padding: 0 !important;
    --panel-padding: 0 !important;
    --panel-border-radius: var(--v-urlbar-searchbar-border-radius) !important;
    --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
    --panel-shadow-margin: 14px !important;
    & > .search-panel-current-engine {
        margin-top: 0px !important;
        padding-inline: 6px !important;
    }
    & > menuseparator.searchbar-separator {
        display: none !important;
    }
    & > .search-one-offs:not([hidden]) {
        border-top: 1px solid var(--urlbarView-separator-color);
        display: flex !important;
        align-items: start !important;
        flex-wrap: wrap !important;
    }
    .search-panel-one-offs-container {
        min-width: calc(5 * 28px) !important;
    }
    .searchbar-engine-one-off-item {
        margin: 0 !important;
        min-width: 28px !important;
        height: 28px !important;
        &:not(.search-setting-button)::after {
            content: "";
            border-inline-end: 1px solid;
            border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
        }
    }
}
#urlbar-search-splitter {
    min-width: 6px !important;
    width: 6px !important;
    margin: 0 -3px !important;
}

А все цвета меняйте здесь как надо

скрытый текст

Выделить код

Код:

:root {
    --toolbar-field-background-color: rgb(240, 240, 244) !important;
    --toolbar-field-color: rgb(21, 20, 26) !important;
    --toolbar-field-border-color: color-mix(in srgb, currentColor 20%, transparent) !important;
    --toolbar-field-focus-background-color: rgb(255,255,255) !important;
    --toolbar-field-focus-color: rgb(21, 20, 26) !important;
    --toolbar-field-focus-border-color: rgb(0, 97, 224) !important;
}
#urlbar > .urlbarView, #PopupSearchAutoComplete {
    --urlbarView-hover-background: color-mix(in srgb, currentColor 17%, transparent) !important;
    --urlbarView-separator-color: color-mix(in srgb, currentColor 14%, transparent) !important;
    --toolbar-field-focus-background-color: light-dark(rgb(255,255,255), rgba(10,10,15,0.6)) !important;
    --link-color: light-dark(rgb(0, 97, 224), rgb(41, 148, 255)) !important;
    --toolbar-field-focus-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)) !important;
}
panel[type="autocomplete-richlistbox"] {
    --panel-background: light-dark(rgb(255,255,255), rgba(10,10,15,0.6)) !important;
    --panel-shadow-margin: 14px !important;
    --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
}

Отредактировано Vitaliy V. (16-06-2024 23:07:35)

Отсутствует

 

№1374513-03-2024 04:24:05

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1194
UA: Firefox 123.0

Re: Настройка внешнего вида Firefox в userChrome.css

Извините за вопрос не по теме.
А есть редактор, в котором можно этот новый формат стилей вернуть к старому виду? Я и так мало что понимаю, а тут сплошные амперсанды. Надо в голове держать начало, потом добавлять, что за амперсандом без амперсанда...
У меня голова старая, и компьютер старый. Я так не могу. Мне нужна одна команда строчкой, другая и т.д. Иначе как свои старые стили править?

Отредактировано xrun1 (13-03-2024 04:26:07)

Отсутствует

 

№1374616-03-2024 09:06:59

f480185
Участник
 
Группа: Members
Зарегистрирован: 05-04-2012
Сообщений: 157
UA: Firefox 51.0

Re: Настройка внешнего вида Firefox в userChrome.css

Всем привет.
Подскажите,пожалуйста,как можно добавить пункт меню в раздел Файл возможность добавить "Отправить ярлык на рабочий стол"
115 [firefox] WIN10

Отредактировано f480185 (16-03-2024 09:09:36)

Отсутствует

 

№1374716-03-2024 18:20:12

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

xrun1 пишет

А есть редактор, в котором можно этот новый формат стилей вернуть к старому виду?

Насчет [windows] не в курсе, можно попробовать Visual Studio Code там поищите расширения sass/scss (сам не пробовал подобные расширения)
В Arch Linux хорошо работает такая консольная утилита

скрытый текст
Screenshot-20240316-174457.png

В терминале выполнить команду
sassc -t expanded input.css output.css
и из input.css на выходе получим expanded стиль. Возможные значения Output style: nested, expanded, compact, compressed

Ну как хорошо, вот стиль выше преобразованный данной утилитой

скрытый текст

Выделить код

Код:

:root {
  --urlbar-min-height: max(28px, 1.4em) !important;
  --urlbar-icon-padding: 4px !important;
  --urlbar-container-padding: 0px !important;
  --urlbar-icon-border-radius: 0px !important;
  --urlbar-margin-inline: 1px !important;
  --focus-outline-width: 1px !important;
  --v-urlbar-searchbar-border-radius: calc(var(--urlbar-min-height) / 2);
}

:root[uidensity=touch] {
  --urlbar-min-height: max(34px, 1.4em) !important;
  --urlbar-margin-inline: 5px !important;
}

#urlbar-container,
#search-container {
  padding: 1px 0 !important;
  margin: 0 var(--urlbar-margin-inline) !important;
}

#urlbar-container[breakout],
#search-container[breakout] {
  position: relative !important;
  min-height: var(--urlbar-container-height) !important;
}

#urlbar-container #urlbar, #urlbar-container #searchbar,
#search-container #urlbar,
#search-container #searchbar {
  min-height: var(--urlbar-min-height) !important;
  font-size: 1em !important;
  box-shadow: none !important;
  align-items: stretch !important;
}

#urlbar-container #urlbar .searchbar-search-icon, #urlbar-container #searchbar .searchbar-search-icon,
#search-container #urlbar .searchbar-search-icon,
#search-container #searchbar .searchbar-search-icon {
  margin-inline-start: 6px !important;
}

#urlbar-container #urlbar #urlbar-input-container, #urlbar-container #urlbar #urlbar-background, #search-container #urlbar-container #urlbar, #urlbar-container #searchbar #urlbar-input-container, #urlbar-container #searchbar #urlbar-background, #search-container #urlbar-container #searchbar,
#search-container #urlbar #urlbar-input-container,
#search-container #urlbar #urlbar-background, #search-container #search-container #urlbar,
#search-container #searchbar #urlbar-input-container,
#search-container #searchbar #urlbar-background, #search-container #search-container #searchbar {
  box-shadow: none !important;
  background-clip: border-box !important;
  border-radius: var(--v-urlbar-searchbar-border-radius) !important;
  overflow: clip;
}

#urlbar-container #urlbar:not([focused], :focus-within) input, #urlbar-container #searchbar:not([focused], :focus-within) input,
#search-container #urlbar:not([focused], :focus-within) input,
#search-container #searchbar:not([focused], :focus-within) input {
  mask-image: linear-gradient(to left, transparent, black 3ch);
  mask-repeat: no-repeat;
}

#urlbar-container #urlbar:not([focused], :focus-within):-moz-locale-dir(rtl) input, #urlbar-container #searchbar:not([focused], :focus-within):-moz-locale-dir(rtl) input,
#search-container #urlbar:not([focused], :focus-within):-moz-locale-dir(rtl) input,
#search-container #searchbar:not([focused], :focus-within):-moz-locale-dir(rtl) input {
  mask-image: linear-gradient(to right, transparent, black 3ch);
}

#urlbar-container #urlbar #identity-icon-box,
#urlbar-container #urlbar #identity-box,
#search-container #urlbar #identity-icon-box,
#search-container #urlbar #identity-box {
  max-width: calc(30px + 15em) !important;
}

#urlbar-container #urlbar[breakout],
#search-container #urlbar[breakout] {
  display: block !important;
  position: absolute !important;
  width: 100% !important;
  height: var(--urlbar-height) !important;
  top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
  inset-inline: 0px !important;
}

#urlbar-container #urlbar[breakout] > #urlbar-input-container,
#search-container #urlbar[breakout] > #urlbar-input-container {
  width: 100% !important;
  height: var(--urlbar-height) !important;
  padding: 0 !important;
}

#urlbar-container #urlbar[breakout][breakout-extend], #urlbar-container #urlbar[breakout][breakout-extend-disabled][open],
#search-container #urlbar[breakout][breakout-extend],
#search-container #urlbar[breakout][breakout-extend-disabled][open] {
  height: auto !important;
}

#urlbar-container #urlbar[breakout] > #urlbar-background,
#search-container #urlbar[breakout] > #urlbar-background {
  display: block !important;
  position: absolute !important;
  animation: none !important;
  inset-inline: 0 !important;
  box-shadow: none !important;
  height: var(--urlbar-height) !important;
  top: 0px !important;
  bottom: auto !important;
}

#urlbar-container #urlbar[breakout][open] > #urlbar-background,
#search-container #urlbar[breakout][open] > #urlbar-background {
  border-color: var(--toolbar-field-border-color, transparent) !important;
}

#urlbar-container #urlbar[breakout][focused="true"] > #urlbar-background,
#search-container #urlbar[breakout][focused="true"] > #urlbar-background {
  border-color: var(--toolbar-field-focus-border-color, Highlight) !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView,
#search-container #urlbar[breakout] > .urlbarView {
  margin: 0 !important;
  width: 100% !important;
  border-radius: var(--v-urlbar-searchbar-border-radius) !important;
  background: var(--toolbar-field-focus-background-color, Field) !important;
  color: var(--toolbar-field-focus-color, FieldText) !important;
  border: 1px solid var(--arrowpanel-border-color, ThreeDShadow) !important;
  border-top: none !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
}

#urlbar-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item,
#search-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item {
  margin: 0 !important;
  min-width: 28px !important;
  height: 28px !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item:not(.search-setting-button)::after,
#search-container #urlbar[breakout] > .urlbarView .searchbar-engine-one-off-item:not(.search-setting-button)::after {
  content: "";
  border-inline-end: 1px solid;
  border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
}

#urlbar-container #urlbar[breakout] > .urlbarView .search-panel-one-offs-container,
#search-container #urlbar[breakout] > .urlbarView .search-panel-one-offs-container {
  min-width: calc(5 * 28px) !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView .urlbarView-body-inner,
#search-container #urlbar[breakout] > .urlbarView .urlbarView-body-inner {
  border: none !important;
}

#urlbar-container #urlbar[breakout] > #urlbar-input-container > #urlbar-search-icon,
#search-container #urlbar[breakout] > #urlbar-input-container > #urlbar-search-icon {
  fill: currentColor !important;
  fill-opacity: .6 !important;
}

#urlbar-container #urlbar[breakout] > .urlbarView .search-one-offs, #urlbar-container #urlbar[breakout] > .urlbarView .urlbarView-results,
#search-container #urlbar[breakout] > .urlbarView .search-one-offs,
#search-container #urlbar[breakout] > .urlbarView .urlbarView-results {
  padding-block: 0 !important;
}

#PopupSearchAutoComplete {
  --panel-subview-body-padding: 0 !important;
  --panel-padding: 0 !important;
  --panel-border-radius: var(--v-urlbar-searchbar-border-radius) !important;
  --panel-shadow-margin: 14px !important;
  --panel-shadow: 0 2px var(--panel-shadow-margin) rgba(0, 0, 0, 0.13) !important;
}

#PopupSearchAutoComplete > .search-panel-current-engine {
  margin-top: 0px !important;
  padding-inline: 6px !important;
}

#PopupSearchAutoComplete > menuseparator.searchbar-separator {
  display: none !important;
}

#PopupSearchAutoComplete > .search-one-offs:not([hidden]) {
  border-top: 1px solid var(--urlbarView-separator-color);
  display: flex !important;
  align-items: start !important;
  flex-wrap: wrap !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-container {
  min-width: calc(5 * 28px) !important;
}

#PopupSearchAutoComplete .searchbar-engine-one-off-item {
  margin: 0 !important;
  min-width: 28px !important;
  height: 28px !important;
}

#PopupSearchAutoComplete .searchbar-engine-one-off-item:not(.search-setting-button)::after {
  content: "";
  border-inline-end: 1px solid;
  border-image: linear-gradient(transparent 15%, var(--urlbarView-separator-color) 15%, var(--urlbarView-separator-color) 85%, transparent 85%) 1 1;
}

#urlbar-search-splitter {
  min-width: 6px !important;
  width: 6px !important;
  margin: 0 -3px !important;
}


Но как видно в некоторых случаях все равно надо редактировать вручную

f480185 пишет

Подскажите,пожалуйста,как можно добавить пункт меню в раздел Файл

Это не та тема, стилями не добавляют пункты, кнопки и т.д.

Отредактировано Vitaliy V. (16-03-2024 18:35:01)

Отсутствует

 

№1374816-03-2024 19:23:54

xrun1
Участник
 
Группа: Members
Зарегистрирован: 12-12-2013
Сообщений: 1194
UA: Firefox 123.0

Re: Настройка внешнего вида Firefox в userChrome.css

Vitaliy V.
Спасибо. Значит, придётся привыкать.
Скачал Visual Studio Code, попробую.

Отсутствует

 

№1374917-03-2024 00:31:38

_zt
Участник
 
Группа: Members
Зарегистрирован: 10-11-2014
Сообщений: 1596
UA: Firefox 115.0

Re: Настройка внешнего вида Firefox в userChrome.css

Vitaliy V.
Как это работает?

скрытый текст

Выделить код

Код:

#PopupSearchAutoComplete {
    --panel-shadow: ... !important;
    & > .search-panel-current-engine {
        margin-top: ... !important;
    }
    .search-panel-one-offs-container {
        min-width: ... !important;
    }
    .searchbar-engine-one-off-item {
        margin: ... !important;
        &:not(.search-setting-button)::after {
            content: "";
        }
    }
}


Амперсанд точно заменяет корневой селектор, а вложенные селекторы (без амперсанда) добавляются к корневому селектору через пробел?
Т.е. код выше равен коду ниже?
скрытый текст

Выделить код

Код:

#PopupSearchAutoComplete {
    --panel-shadow: ... !important;
}
#PopupSearchAutoComplete > .search-panel-current-engine {
        margin-top: ... !important;
}
#PopupSearchAutoComplete .search-panel-one-offs-container {
        min-width: ... !important;
}
#PopupSearchAutoComplete .searchbar-engine-one-off-item {
        margin: ... !important;
}
#PopupSearchAutoComplete .searchbar-engine-one-off-item:not(.search-setting-button)::after {
            content: "";
}

Отсутствует

 

№1375017-03-2024 13:18:15

Vitaliy V.
Участник
 
Группа: Members
Зарегистрирован: 19-09-2014
Сообщений: 2186
UA: Firefox 124.0

Re: Настройка внешнего вида Firefox в userChrome.css

_zt пишет

Т.е. код выше равен коду ниже?

Да все верно, https://developer.mozilla.org/en-US/doc … SS_nesting
Кстати At-rules в том числе медиа запросы тоже могут быть вложенными в селектор https://developer.mozilla.org/en-US/doc … g_at-rules

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]