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

_zt · №14401

Doe John™
Ну попробуйте, с учетом вертикальных сжатых.

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

Код:

.tabbrowser-tab {
    .tab-close-button {
        position: fixed !important;
        background-color: transparent !important;
        border-radius: 2px !important;
        margin-inline-start: -4px !important;
    }
    .tab-close-button.close-icon {
        -moz-context-properties: fill, fill-opacity !important;
        color: inherit !important;
        background: transparent;
        fill: red !important;
        fill-opacity: 0 !important;
        height: 24px !important;
        width: 24px !important;
        padding: 0 !important;
    }
    &:not([pinned=true],:hover) .tab-close-button {
        display: none !important;
    }
}
.close-icon:hover {
    list-style-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M0 0h20v20H0z' style='fill:context-fill;fill-opacity:context-fill-opacity'/><path d='m6 6 8 8m-8 0 8-8' style='fill:none;stroke:context-fill;stroke-width:2'/></svg>") !important;
    background-color: rgba(0, 116, 232,.4) !important;
    outline: 1px solid rgb(0, 116, 232) !important;
}
.close-icon:hover:active {
    background-color: rgba(0, 116, 232,.6) !important
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab {
    .tab-close-button {
        position: absolute !important;
        &.close-icon {
            background-image: none !important;
            box-shadow: none !important;
            top: 0px !important;
            left: 12px !important;
            height: 18px !important;
            width: 18px !important;
        }
    }
}

dinn · №14402

C181UMZ не гуглится windows 11 Disable Acrylic Effects?

_zt · №14403

C181UMZ
Попробовать что то с
menupopup {
appearance: none !important;
и далее свой стиль меню.
Нет 11, посмотреть не могу.
Вообще любое оформление меню всегда с appearance: none, так что гляньте типа такого - отсюда и до 1457 строки.
https://github.com/black7375/Firefox-UI-Fix/blob/db615f1753e6975b47ebb9e16fed7d67b2473c0d/css/leptonChrome.css#L1120
Всего 337 строк. Но я не знаю работает ли оно так, если просто код выдернуть. По идее должно.

C181UMZ · №14404

C181UMZ пишет

Здравствуйте!Здесь написано, что:При запуске в Windows 11 всплывающие окна и контекстные меню теперь выводятся в "акриловом" стиле, соответствующем эстетике операционной системы.Подскажите, пожалуйста, как убрать тот "стиль" и ту "эстетику" к..., даже не знаю как без матюков сказать куда, и вернуть стилем то, как было до версии Firefox 138 или как осталось в Windows 10, или хотя бы самому цвет всплывающих окон и контекстного меню браузера изменить?Спасибо!

Нашел, может кому-то пригодится: user_pref("widget.windows.mica.popups", 0);
Ну или в about:config сменить widget.windows.mica.popups с 2 на 0.

Отредактировано C181UMZ (Вчера 01:44:00)

xrun1 · №14405

Давным-давно есть у меня стиль для "всплывашек". С этой версии улетели из правого нижнего угла в правый верхний. Как их вернуть на место, т.е. в правый нижний угол экрана?

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

Выделить код

Код:

/* Стиль для всплывашек. Делает их удобочитаемыми.
   Отключает системные уведомления и показывает "всплывашки" в about:config
        alerts.useSystemBackend --> false
        alerts.useSystemBackend.windows.notificationserver.enabled --> false
  изначальный https://forum.mozilla-russia.org/viewtopic.php?pid=712196#p712196
  изменения с 113-й в стиле памятка для стилей https://forum.mozilla-russia.org/viewtopic.php?pid=804901#p804901
  доплнительный, на основе моего https://forum.mozilla-russia.org/viewtopic.php?pid=805027#p805027 */
@-moz-document url("chrome://global/content/alerts/alert.xhtml") {
  #alertNotification {
      padding: 5px !important;
  }
  #alertImage {
      max-height: 36px !important;
      max-width: 36px !important;
      margin: 4px 10px !important;
      padding: unset !important;
  }
  #alertTextBox {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
  }
  #alertBox {
      padding-block-end: 7px !important;
      box-shadow: rgba(84, 83, 87, 0.32) 0 0 5px !important;
  }
  /** размер шрифта сообщения **/
  #alertTextLabel {
      font-size: 1.25em; /* 20px https://hvenja.ru/em-px-converter/ */
  }
}

Doe John™ · №14406

_zt пишет

Doe John™Ну попробуйте, с учетом вертикальных сжатых.скрытый текстВыделить код
скрытый текст
Код:.tabbrowser-tab {
.tab-close-button {
position: fixed !important;
background-color: transparent !important;
border-radius: 2px !important;
margin-inline-start: -4px !important;
}
.tab-close-button.close-icon {
-moz-context-properties: fill, fill-opacity !important;
color: inherit !important;
background: transparent;
fill: red !important;
fill-opacity: 0 !important;
height: 24px !important;
width: 24px !important;
padding: 0 !important;
}
&:not([pinned=true],:hover) .tab-close-button {
display: none !important;
}
}
.close-icon:hover {
list-style-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M0 0h20v20H0z' style='fill:context-fill;fill-opacity:context-fill-opacity'/><path d='m6 6 8 8m-8 0 8-8' style='fill:none;stroke:context-fill;stroke-width:2'/></svg>") !important;
background-color: rgba(0, 116, 232,.4) !important;
outline: 1px solid rgb(0, 116, 232) !important;
}
.close-icon:hover:active {
background-color: rgba(0, 116, 232,.6) !important
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab {
.tab-close-button {
position: absolute !important;
&.close-icon {
background-image: none !important;
box-shadow: none !important;
top: 0px !important;
left: 12px !important;
height: 18px !important;
width: 18px !important;
}
}
}

Почти идеально, только вот так получилось.

Отредактировано Doe John™ (Вчера 09:50:45)

Алексей У. · №14407

И все-таки: может быть, есть способ сделать полосы прокрутки в стиле [windows] 7, чтобы окно браузера соответствовало системному оформлению?

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

Раньше делал через about:config, а в новых версиях эти настройки "выпилили". Может быть, вручную раскрасить или что-нибудь в этом роде?

_zt · №14408

Doe John™ пишет

Почти идеально, только вот так получилось.

svg.context-properties.content.enabled=true

xrun1 · №14409

Дополню свой пост выше №14405.
Чтобы посмотреть, можно вставить код в консоль браузера (Ctrl + Shift + J) и запустить. Например, такой:

Выделить код

Код:

var alertsService = Cc["@mozilla.org/alerts-service;1"].getService(Ci.nsIAlertsService);
alertsService.showAlertNotification("chrome://browser/skin/customizableui/whimsy.png", "Всплывашка", "Перемести меня в другой уголок!");
setTimeout(() => alertsService.closeAlert(), 2000);

~~Думаю, это баг. Надеюсь, исправят.~~
Добавление параметра ui.alertNotificationOrigin = 0 или 1 решает проблему в 138-й. Раньше это было по дефолту.

Отредактировано xrun1 (Вчера 22:15:51)

Doe John™ · №14410

_zt пишет

Doe John™ пишетПочти идеально, только вот так получилось.svg.context-properties.content.enabled=true

Спасибо.

_zt · №14411

Алексей У.
В стиле [windows] 7 - забудьте.
Там только по одному цвету для слайдера, +hover, +active.

Алексей У. · №14412

_zt пишет

В стиле 7 - забудьте. Там только по одному цвету для слайдера, +hover, +active.

А разве нельзя использовать для стилизации border, background и т. д. так же, как для других элементов страницы?

_zt · №14413

Алексей У.
Это не элемент страницы. Ничего не применяется. Сами в инструментах браузера посмотрите.

Алексей У. · №14414

_zt пишет

Это не элемент страницы.

Тогда почему многие сайты меняют вид скроллбаров "под себя", YouTube, например (что, между прочим, дико бесит)? :angry:

fuchsfan · №14415

Алексей У. пишет

А разве нельзя использовать для стилизации border, background и т. д.

Скроллбар вполне стилизуется скриптом, вид одинаков везде, и на youtube.

_zt · №14416

Алексей У.
Если в about:config настроено, то не меняет.

/* Полосы прокрутки специфичные для разных платформ [Fx 100]
* По умолчанию - 0, MacOs - 1 (без кнопок), GTK - 2 (без кнопок),
* Android - 3 (без кнопок), Windows 10 - 4, Windows 11 - 5 ***/
user_pref("widget.non-native-theme.scrollbar.style", 3);
// Переопределить размер скролбара для не нативных тем (2 или 3 в префе выше)
user_pref("widget.non-native-theme.scrollbar.size.override", 6);
/* Наложенный скролбар (прозрачный без наведения) + скрытие слайдера через
* ~3сек неактивности (с метками поиска) ***/
user_pref("ui.useOverlayScrollbars", 1); // [HIDDEN PREF]

Скрипт может быть нужен только для того что бы применить стиль для раскраски с повышенными правами агента. В ucf это без скрипта делается.
Так это работает с версиями [firefox] от 100 до 140.

Отредактировано _zt (Вчера 19:59:58)

Алексей У. · №14417

fuchsfan пишет

Скроллбар вполне стилизуется скриптом, вид одинаков везде, и на youtube.

А что за скрипт, ссылку можно?

Добавлено Вчера 20:19:43

_zt пишет

Если в about:config настроено, то не меняет.

В старых версиях (до [firefox] 78 включительно) в about:config были настройки layout.css.scrollbar-color.enabled, layout.css.scrollbar-width.enabled, которые включали системный вид полос прокрутки на всех страницах в браузере (в том числе и служебных). Сейчас обе полностью "выпилили", осталась только widget.disable-dark-scrollbar, которая мало помогает. Короче говоря, очередной плевок в лицо пользователям [windows] 7.

Отредактировано Алексей У. (Вчера 20:19:43)

beggrr · №14418

Я на предыдущей странице спрашивал как изменить шрифт в devtools.
Вроде добавлением кода в config.js сделал, но появилась одна неприятная деталь. Правая угловая скобка для тега получается не на своем месте и налазит на текст. В чем может быть дело?

_zt · №14419

beggrr
Телепаты в отпуске. Используемый код где?

Объявление

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

Код:

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

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

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

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

Код:

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

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

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

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

Код:

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

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

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

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

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

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

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

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

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

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

Board footer