@kichrot Да так и есть. У меня стоят моды которые изменяют длину адресной строки (мне не нравится адресная строка на всю длину) Также стоит мод на обновление страницы внутри адресной строки. Мод на вкладке под адресной строкой. Вообще мне понравился дизайн Safari 14 и я хотел сделать что-то похожее в вивальди.
Вот моды которые я использую.
Кнопка обновления страницы Js
function reloadStyle() {
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.button-toolbar.reload { order: 1 }
.button-toolbar.reload svg { flex: 0 0 22px !important; width: 22px !important; height: 22px !important; }
`;
document.getElementsByTagName('head')[0].appendChild(style);
};
setTimeout(function wait() {
const adrField = document.querySelector('.toolbar-small.toolbar-insideinput');
const reload = document.querySelector('.button-toolbar.reload');
if (reload) {
adrField.appendChild(reload);
reloadStyle();
} else {
setTimeout(wait, 300);
}
}, 300);
Адресная строка js
// UrlBar Spacing
// https://forum.vivaldi.net/topic/51023/urlbar-spacing
// Adds a flexible margin around the Addressfield, depending
// on width of the window. The window can be dragged by clicking
// the margins.
{
function urlBarSpacing(url) {
const checkStyle = document.getElementById('urlBarSpacer');
if (!checkStyle) {
var style = document.createElement('style');
style.type = 'text/css';
style.id = 'urlBarSpacer';
style.innerHTML = `#urlWrapper {flex: 1 0;-webkit-app-region: drag;}#urlSpacer {display: flex;margin-left: auto;margin-right: auto;width: ${_spacing};}`;
document.getElementsByTagName('head')[0].appendChild(style);
}
var bar = url.parentNode;
var wrapper = document.createElement('div');
wrapper.id = 'urlWrapper';
var spacer = document.createElement('div');
spacer.id = 'urlSpacer';
bar.replaceChild(wrapper, url);
wrapper.appendChild(spacer);
spacer.appendChild(url);
}
const _spacing = '65%'; //change percentage to control spacing
var appendChild = Element.prototype.appendChild;
Element.prototype.appendChild = function () {
if (arguments[0].tagName === 'DIV') {
setTimeout(function () {
if (arguments[0].classList.contains('UrlBar-AddressField')) {
const check = document.getElementById('urlSpacer');
if (!check) {
urlBarSpacing(arguments[0]);
}
}
}.bind(this, arguments[0]))
}
return appendChild.apply(this, arguments)
}
}
Брал их здесь https://forum.vivaldi.net/topic/53656/merge-title-bar-address-bar-on-macos/3
Вкладки под адресной строкой, иконка вивальди, без заголовка, корзина облако: css
button.vivaldi {
display: none !important;
}
#tabs-container.bottom {
order: -1;
border-top: none;
padding-bottom: 0px !important;
}
/* bookmarks bar above tabs */
.bookmark-bar {
order: -2;
}
.toolbar.UrlBar {
order: -3;
}
/* corner rounding */
.tabs-bottom .tab-position .tab {
border-top-left-radius: var(--radiusHalf);
border-top-right-radius: var(--radiusHalf);
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
}
/* Fix Fillets */
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):before {
top: unset;
bottom: 0;
-webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%);
}
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
top: unset;
bottom: 0;
-webkit-mask-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 70%, #000 73%);
}
/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
bottom: 28px !important;
}
/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
content: unset;
}
/* Remove line between bookmark bar and tabs */
.bookmark-bar {
border-bottom-width: 0px !important;
}
.bookmark-bar {
background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
background-color: var(--colorAccentBg);
}
.color-behind-tabs-on .bookmark-bar {
background-color: var(--colorBg);
}
.color-behind-tabs-on .bookmark-bar button {
background-color: var(--colorBg);
}
.toolbar-tabbar.sync-and-trash-container {display: none;}
.dial.add {display: none !important}
.newtab {display: none}
#tabs-container.top .tab-strip {
display: flex !important;
overflow-x: hidden !important;
-webkit-app-region: no-drag !important;
}
#tabs-container.top .tab-strip span {
flex: 0 1 220px !important;
display: flex !important;
}
#tabs-container.top .tab-position {
flex: 0 1 220px !important;
position: relative !important;
left: auto !important;
top: auto !important;
height: 30px !important;
}
#tabs-container.top .tab-position .tab .favicon,
#tabs-container.top .tab-position .tab .close {
flex: 0 0 18px !important;
}
#tabs-container.top .tab-position .tab .title {
flex: 1 0 calc(100% - 55px) !important;
}
#tabs-container.top .newtab {
position: relative !important;
left: auto !important;
top: auto !important;
}
#pagetitle {
display: none;
}
