Загрузка...

Редизайн браузера с помощью userChrome.css

Тема в разделе Frontend создана пользователем hikariatama 21 янв 2021. (поднята 21 янв 2021) 417 просмотров

Загрузка...
  1. hikariatama
    hikariatama Автор темы 21 янв 2021 me.hikariatama.ru 104 5 апр 2020
    [IMG]

    Делал чисто под себя, может кому-то еще зайдет.
    Тестировал на Firefox, Win10.

    Голый скриншот со страницы Яндекса:

    [IMG]
    [IMG]
    1. Сначала ставим расширение, ибо скрипт скроет стандартную панель вкладок.
    2. Теперь еще одно расширение.
    3. Идем по ссылке, жмем Install, в Tampermonkey подтверждаем установку.
    4. Теперь идем в about:config. Соглашаемся с тем, что это опасно (это безопасно).
    5. Ищем настройку toolkit.legacyUserProfileCustomizations.stylesheets, меняем ее значение на true (double-click)
    6. Переходим в раздел about:support
    7. Напротив пункта Папка профиля нажимаем Открыть папку
    8. У нас отрывается директория с профилем. Если там нет каталога chrome, создаем его. Помещаем туда файл userChrome.css
    9. Рестартим браузер.
    userChrome.css:
    • Скрывает панель вкладок
    • Меняет цветовую палитру на нежно-розовую
    • Делает кнопки как на MacOS
    • Убирает всякие захламляющие кнопки
    • Делает кнопки назад-вперед одинаковыми
    • Меняет шрифт на Ubuntu
    Yandex_ANTITRACK.js:
    • Меняет большинство (не все) ссылок на странице Яндекса на безтрековые
    • Убирает всякий хлам, опять же
    • Увеличивает объем полезной информации
    • Раскрывает описания страниц
    • Скрывает футер, предложения от Яндекса и т.д.
    • Блюррит аккаунт и фотку, чтобы нечаяно не слить их на скринах
    • Меняет шрифт на Ubuntu
    • Красит все в нежно-розовый
    Код
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
    * {font-family: Ubuntu !important; }
    .toolbar-items {display: none; }
    .tab-background {background: rgba(255, 255, 255, .2); }
    .tab-text {letter-spacing: -.4px; }
    #TabsToolbar {background: #fedde2; }
    .titlebar-buttonbox {margin-top: 7px; }
    .browser-toolbar {background: #fdd3db; }
    #home-button {display: none; }
    #urlbar-background {background: rgba(255, 255, 255, .2); }
    #library-button {display: none; }
    #sidebar-button {display: none; }
    #fxa-toolbar-menu-button {display: none; }
    #PersonalToolbar {display: none; }
    toolbarspring {max-width: 26px!important; }
    #back-button > .toolbarbutton-icon {background: transparent!important; border: none !important; border-radius: none!important; width: 28px!important; height: 28px!important; padding: 6px !important; }
    #navigator-toolbox {--tabs-border-color: transparent!important; }
    .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {width: 0px!important; }
    .titlebar-buttonbox-container {margin-left:calc(100vw - 72px); }
    .tab-line {-moz-box-ordinal-group: 2 !important; height: 2px !important; background: linear-gradient(to right, #1990c9, #d72727, yellow, #52b54b) !important; }
    .titlebar-min {list-style-image: url(https://i.imgur.com/NO5oZmP.png) !important; }
    .titlebar-max, .titlebar-restore {list-style-image: url(https://i.imgur.com/x9iEhWI.png) !important; }
    .titlebar-close {list-style-image: url(https://i.imgur.com/kHzmeoX.png) !important; }
    .titlebar-min:hover {list-style-image: url(https://i.imgur.com/yuvFbcW.png) !important; background: transparent !important; }
    .titlebar-max:hover, .titlebar-restore:hover {list-style-image: url(https://i.imgur.com/m4C3ZQU.png) !important; background: transparent !important; }
    .titlebar-close:hover {list-style-image: url(https://i.imgur.com/FFwZcSE.png) !important; background: transparent !important; }
    .titlebar-button > .toolbarbutton-icon {width: 14px !important; height: 14px !important; }
    .titlebar-button {padding: 6px 5px !important; }
    :root {--toolbar-bgcolor: #fedde2!important; }
    #urlbar-background, #searchbar {background-color: rgba(255, 255, 255, .6); }
    #PanelUI-button {margin-right: 72px; }
    #nav-bar {margin-top: -33px; }
    #sidebar-header {display: none; }
    [IMG]
     
  2. КОД
    КОД 1 фев 2021 130 3 май 2019
    Не кажется ли тебе что не особо удобно? Те же вкладки, занимают пипец много места с боку.... Не надо их туда(
     
    1. hikariatama Автор темы
      КОД, Мне удобна сама концепция дерева вкладок. Когда долго гуглишь какой-то вопрос, и в итоге находишь ответ, просто закрываешь дерево, и все. + Функция контейнеров, по сути, песочница в браузере, очень удобно.
  3. Jack
    Jack 1 фев 2021 112 906 19 июн 2017
    Колхоз полный
     
    1. hikariatama Автор темы
      Jack, Ну, делал под себя. Статейка про редизайн для тех, кому мой вариант не нравится, и он хочет что-то свое :finger_up:
    2. КОД
      hikariatama, Смотри, к примеру я пишу свой сайт, мне нужны размеры и точность, а если буду использовать это, то мне будет крайне не удобно. Даже за просмотром видоса не особо удобно, я к примеру в ютубе никогда не ставлю видос на полный экран, так как мне комфортнее так. а тут будет все сдвигаться и тд
    3. hikariatama Автор темы
      КОД, В случае с веб десигном, когда нужен фулл размер страницы, можно временно скрыть панельку кнопкой на панели расширений ;)
  4. Naison
    Naison 1 фев 2021 Хейтер Python'a 183 21 май 2017
    Фи. Лучше тупо скачать оперу гейИКС. Она как никак но красивее этого
     
    1. Посмотреть предыдущие комментарии (1)
    2. Naison
      hikariatama, я не за палитру. Цвета вообще не интересуют. Я про расположение вкладок и вообще общий дизайн браузера. Опера гх хоть как-то похожа на коврик с лгбт подсветкой. А это на розовую тряпочку
    3. hikariatama Автор темы
      Naison, Делал для прогерства, когда нашел ответ на вопрос, который гуглил полчаса, просто закрываешь нужную ветку, и все. А раньше висело 100500 вкладок, а бедный мой селерон пыхтел как не в себя)
      Согласен, дизайн специфичен, не всем зайдет. Но "я художник, я так вижу" =)
Top