Подвинуть иконки к адресной строке.

[sealbient1]

Добрый день, пользователи Вивальди!

Возможно, кто-то из вас мне поможет решить одну задачу. Собрал я себе вот такой минималистичный дизайн из разных модов которые находил на форуме.

Суть такая... не могу найти css (или это возможно js.. я в этом не разбираюсь), чтобы подвинуть иконки "стрелок" и "боковой панели", "профиля" и "расширений", ближе к адресной строке, для полной завершенной картины.

Возможно ли это?

Ps Я если, что в этих кодах вообще ничего не понимаю, просто находил на форуме Css и JS и просто делал по инструкции.

[kichrot]

@sealbient1

Без рассмотрения модов, которые Вы применили, невозможно точно сказать, почему у Вас адресная строка не растягивается автоматически.

Похоже у Вас моды меняют width и flex для .UrlBar-AddressField.

[sealbient1]

@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;
}

[yesss]

Блин пытаюсь как у тебя настроить ничего не получаеться, поделись исходниками плз

[sealbient1]

@yesss Извиняюсь, что не отвечал.....так как только увидел сообщение. Коды постоянно ломаются после обновлений вивальди. И часть кодов не работает уже которые я тогда применял.

В общем для адресной строки, код ява. Создаете custom.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)
    }
}

Как применять вообще моды js и css читайте инструкцию https://forum.vivaldi.net/topic/10549/guide-modding-vivaldi

Я сейчас на тестовой 3.8. сижу. и код css для вкладок под адресной строкой такой, а также в него входят коды которые: убирает вверху надписи, нет иконки вивальди (открываю через alt), закладки по центру. Пока работают.

/* https://forum.vivaldi.net/topic/15834 */
/* ... later ... */
/* https://forum.vivaldi.net/topic/42105 */

#tabs-tabbar-container.bottom {
    order: -1;
    border-top: none;
    padding-bottom: 0px !important;
}

/* bookmarks bar above tabs */
.bookmark-bar {
    order: -2;
}

.toolbar.UrlBar {
    order: -3;
}

/* newly required for 3.6 */
.tabs-bottom .tab.active:not(.marked):not(.tab-mini):after {
  transform: unset;
}

/* 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);
}

#pagetitle {
	display: none;
}

/*Bookmark centered*/
.bookmark-bar .observer {
 justify-content: center;
}

button.vivaldi {
  display: none !important;

Ну если нужно убрать иконка новая вкладка, синхронизация и корзины то вот

.toolbar-tabbar.sync-and-trash-container {display: none;}
.newtab {display: none}

Правда если будете применять мод на вкладки на всю ширину (я это пробовал через VivaldiHooks
) , как это в сафари на мак ос сделано (особенно Safari 14.. Крутой там дизайн) и конечно правильно..... то будет дырка, так как вкладка растягивается только до символов синхронизации и корзины. Хоть их и не не видно, но увы.

Пробуйте. Ну и код который убирает значок перезагрузки в адресную строку, похоже больше не работаете.

У меня сейчас все это выглядит вот так, правда надо искать новые коды, для того чтобы текст на вкладка был в центре