Vivaldi. Прибираємо ескізи з бічної панелі і ще трошки налаштувань

У вівторок вийшла нова версія Vivaldi, а сьогодні ми будемо робити цей браузер трішки зручніше.
Переносимо наші налаштування в окремий css, прибираємо ескізи, міняємо колір браузера, робимо «живі» шпалери на експрес-панелі і ще пара дрібниць прямо під катом.
image


Переїжджаємо в свій CSS
Не так давно стало відомо, що Vivaldi буде оновлюватися щотижня, а це значить, що всі поправки, які я робив у попередній статті будуть тертися.
В такому випадку краще всі наші зміни виносити в окремий файл.

Відкриваємо в папці Vivaldi\Application\1.0.83.381.0.94.2\resources\vivaldi\ файл browser.html.
Тут і будується весь інтерфейс браузера за допомогою css і js файлів.
Що ми зробимо, так це після рядка
<link rel="stylesheet" href="style/common.css" />

додамо рядок, яка буде завантажувати ще й наш файл css. Нехай файл називається «custom.css» і лежить в папці поруч з browser.html.
<link rel="stylesheet" href="custom.css" />

Тепер потрібно створити файл з розширенням css.
Як ми з'ясували з попередньої статті, кнопки «додому», «повернення», «перехід» і поле пошуку мають імена класів home, rewind, next і searchfield відповідно.
І в новому чистому файлі нам потрібно лише написати один рядок:
.home.rewind,.next.searchfield{display:none}

Якщо ж вам потрібно щось залишити для себе, то треба лише прибрати ім'я класу з перерахування.

Тепер при новому оновленні нам не потрібно буде мучитися з common.css. Достатньо буде лише в browser.html додавати знову рядок для custom.css.

Ховаємо ескізи
Тепер з приводу ескізів сторінки в бічних вкладках.
Прихований текстimage


Тут ми просто зменшимо висоту вкладок для лівої та правої панелей.
#tabs-container.right #tabs .tab#tabs-container.left #tabs .tab{height:26px;max-height:26px}

Отримуємо результат:
Прихований текстimage


Зауважу, що від самих ескізів ми не позбавляємося, вони насправді там залишаються. Більш того, вони завжди є у верхній і нижній панелях, якщо потягнути за відповідну панельку.

Все чудово, але по мені так вкладки занадто широкі, я не можу розлучитися з таким великим шматком екрану.
Я хочу зробити їх поменше, для цього у своєму css пишу:
#tabs-container.left,#tabs-container.right{flex:0 0 100px}

Тепер по ширині вони у мене збігаються з кнопками.
Прихований текстimage


А щоб прибрати ескізи при наведенні на вкладки, пишемо:
.tooltip .tooltip-item .thumbnail-image{display:none}


Робимо живі шпалери
Відразу хочу попередити, що такий фокус не призначений для слабких комп'ютерів.
Ми будемо вставляти на фон відео.
Ось демонстрація того, як це виглядає:
WebM відео (3.3 Мб): a.pomf.se/lqhysu.webm
Або gif варіант (13 Мб): i.imgur.com/IdnVbsW.gifv

Отже, кладемо потрібне відео для фону у форматі *.webm, наприклад, в папці Vivaldi\Application\1.0.94.2\resources\vivaldi\. Настійно рекомендую обеззвучить відео, щоб відкрита стартова сторінка не стала для вас сюрпризом.
Далі відкриваємо Vivaldi\Application\1.0.94.2\resources\vivaldi\components\startpage\startpage.html і вставляємо в
body
рядок:
<video autoplay loop id="bg"><source src="/timescape.webm" type="video/webm"></video>

Замість timescape.webm пишемо ім'я свого відео.
А в head потрібно вставити це, щоб відео займало весь простір:
< style type="text/css">
video#bg {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
}
</style>


Відео вставлено в Експрес-панель, але ми його не бачимо.
Потрібно прибрати фонове зображення. В custom.css додаємо
.startpage{background-image:none}

Тепер якщо відкрити браузер, то відео буде на тлі Експрес-панелі.

Далі по дрібницях
Тут я хочу ще написати пару речей, які комусь можуть здатися корисним.

  • Наприклад, для того, щоб зробити вужчий вкладки зверху, достатньо написати
    #tabs-container.top #tabs .tab{width:100px; max-width:100px}

    Для нижніх вкладок відповідно буде bottom замість top.
    Прихований текстimage
  • Якщо вам здається, що системні кнопки занадто великі, то їх можна зменшити
    #browser.win .window-buttongroup button.window-close{width:25px}

    Прихований текстimage
  • Тим, кому не подобається дефолтна забарвлення браузера, можуть поміняти її на свій смак.
    Ось, наприклад, мій варіант. Тут все пофарбоване в темний колір.
    #header{background-color:#1F262A}
    .toolbar.toolbar-addressbar{background-color:#1F262A}
    #tabs .tab.active{background-image:#1F262A}
    #tabs.tab-stacking-tooltip .tab.active .tab-group-indicator .tab-indicator.active{background-color:#1F262A}
    .favicon-current-background-color{background-color:#1F262A}
    .favicon-current-color{color:#1F262A}
    .favicon-current-border-color{border-color:#1F262A}
    #browser.popup{background-color:#1E1E1E}
    
  • А якщо потрібно, щоб бічні панелі вкладок не сильно били білим кольором, можна і їм поміняти колір:
    #tabs-container.left,#tabs-container.right{background-color:#1F262A}
    
    #tabs .tab:not(.active):hover{background-color:#1E1E1E!important}
    #tabs .tab:not(.active){background-color:#1F262A!important;color:#FFFFFF!important}
    

    Тут ми ще поміняли колір і неактивних вкладок, а текст всередині них відповідно зробили білим.
  • Колір інтерфейсу при стартовій сторінці правиться цієї рядком:
    .is-startpage .favicon-current-background-color{background-color:#777777!important}
    
  • А для любителів екзотики можна, наприклад, прибрати заголовок вікна через
    #header{display:none}
    .
На цьому, мабуть, все.
Сподіваюся що з цього було для вас корисно або пізнавально.
Якщо у вас є якісь свої напрацювання або ідеї, то милості прошу в коментарі.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.