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



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

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

    photo_2021-01-09_16-18-23.jpg

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

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

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



  • @sealbient1

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

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



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

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.