Modding Vivaldi 3.2.1967.41 new Tab button



  • As a user of the Azenis themes, I have slightly modded Vivaldi to have the same icons and appearance as Azenis Theme.
    But one thing plagues me: The New Tab button (Plus symbol). Any help in locating it in the common.css?
    Using Zorin 15.2 Lite (derivative Xubuntu 18.04) with Cinnamon D.E.
    vivaldi-Azenis.png



  • @aravisian Welcome to the Vivaldi Community πŸ™‚ πŸ‘

    That does not look like a "slight mod" to me πŸ˜ƒ
    (Really well done actually...)

    BUT: DO NOT modify common.css! Some old guides might tell you to, but since 2.6 the process is different and much better. See:
    https://forum.vivaldi.net/topic/10549/modding-vivaldi

    The class you're looking for is .button-toolbar.newtab. However, the image itself is an SVG so if you want to change it you'd need to override it with your own.

    Also, if you launch Vivaldi with parameters like below you can inspect UI elements by right-clicking and don't need to search for the classes in vain:
    --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end

    Use those flags when you're making a mod, but don't run with it all the time. Create a shortcut. And make sure V is already closed before you launch it again πŸ˜‰



  • @Pathduck
    Wow, swift reply. Actually, I am an amateur and a novice. I had no guide, I just am clunky and tend to bumble my way forward.
    Thanks for the link on modding the .css. I saved the common.css in original format so I can revert and then mod your recommended way.
    "newtab"... Sigh.. I kept looking for 'new-tab.' 'tab.new...'
    Very informative post. I really appreciate the help. I dumped firefox yesterday and installed Vivaldi to replace it. I was wary, but it worked out very well with Vivaldi not presenting the same issue I had with FF.
    If the response on my asking a question on the forum is any indication, I truly made the correct choice for my new default browser.
    Thanks a great deal.



  • @aravisian Sure, no worries, glad to help πŸ™‚
    (upvotes always appreciated)

    Dig your mods out of the saved common.css and create a new file like the guide says. No need to change on every update anymore πŸ™‚

    It's a great browser, I love the customisability.

    You did all those changes since yesterday? That's impressive πŸ‘



  • @Pathduck
    "You did all those changes since yesterday? That's impressive"
    It shows I have had too much time on my hands since times have changed.
    Since I already have made the Azenis theme (In multiple incarnations), I had all the icons and image files at the ready.
    Searching with your suggestion helped me find it, though originally, it said not found. I shortened it to "newtab" and that worked.
    For seeing it work, I did do common.css, temporarily... But worked like a charm.
    vivaldi-newtab.png

    I will dig out the mods and make the new file in a moment. It does sound like a much better way- and I noted each mod by line number as I went.

    EDIT TO ADD:
    Pulled out all the additions or changes to the common.css and saved them in a new file I named "vivaldi.css" along with the image files in a new folder in my ~ directory. Enabled the //:experimental - Worked like a charm first try.
    Vivaldi is amazing.



  • Sweet mod! Vivaldi completely replaced the Chromium UI and wrote it with web technologies (HTML, CSS, Javascript) which is what makes for much greater potential in modifications like this. As you're new, but clearly into nodding, let me point you towards a few that I find very helpful.

    Autosave Sessions Mod is one that many people install after they've suffered a loss of their session. When you have Vivaldi set to restore session, it'll only restore multiple windows if you use the exit command, such as from the menus. If you close all your windows sequentially, it only restores the last one. This trips some people up, and there are of course other ways top accidentally lose your session. This mod will save your current session every X minutes, and keep the last Y autosaved sessions, with X & Y being independent variables.

    Advanced Panels Mod with Sessions Panel is one of my favorites. It is actually a powerful mod that allows you to create generic advanced panels (see thread for details), but it comes with a Sessions Panel as an extremely useful example. For me, this turned Sessions from a minor feature that I only used when I was closing down my session to reboot or to free up resources for a resource-intensive task, into a fully realized feature that enabled an important workflow. Now, when I want to save a bunch of tabs, all related to a project for example, that I'll work on later but I don't want to clutter my bookmarks library with a bunch of pages I don't intend to keep longterm, I move all those tabs into a new window, save that window as a session and then close the window. It's easy to restore that window when I return to that task.

    Zoom, Find in Page & other actions in Web Panels provides a handful of useful controls for web panels, including zoom, find in page, invert colors (like a dark theme), kill the page which is useful for panels made from certain extension pages like uBlock Origin & uMatrix loggers.

    There are many others that are very useful, it depends a little on how you use your browser. Peruse the Modifications category of the forum and you'll likely find some more that you want to install.

    Great first post! Welcome to the forum.

    Cheers,
    BoneTone



  • @BoneTone
    "As you're new, but clearly into modding, let me point you towards a few that I find very helpful."
    I will take all the help I can get. In fact, this is the first time I ever got a response like that in regards to theming.
    I switched from Windows to Linux last year. At that time, I never heard of css or theming. While exploring what Linux had to offer as a first time user, I came across customization themes that I liked and wanted to use. But they were outdated having been made for gtk2 and the distros were all on gtk3. Which... I had to learn what gtk was...
    Had to set about studying .css and theming. And - had no help. Mostly, it's been trial and error. On occasion, tidbits gleaned from w3school online have been very helpful, but not always applicable to gtk.css as the references and such used can be very different.
    From starting out last year to now, I have put forth some of my novice attempts for others to enjoy and update them as I learn more.
    Thanks to Pathducks suggestion above, I was able to hasten the process by moving the .css I was using and file images to my Home folder. I have Toned Down the above theme abit as I always get carried away first, then pull it back.
    Then I was able to reference the original common.css while "guessing" as to the proper name to use, but not used in the common.css to make a change I wanted. For example, the panel History, bookmarks and rest of the icons.
    If I had help like this last year, I would probably be a lot further along now.
    If I had modded some other browsers like this, I probably would be getting a cease and desist order.
    Thanks for the pointers. On my second day of Vivaldi, I may not yet be able to offer help to others but I will continue to browse the forums and maybe someday, get to that point. The best way to learn something is to teach it.



  • @aravisian said in Modding Vivaldi 3.2.1967.41 new Tab button:

    I may not yet be able to offer help to others

    along with the image files in a new folder

    Well, actually... I was not aware you could do this, I always thought any local images would need a full file:// URL or be base-64 encoded. So I've learned something I might have use for some day! πŸ™‚ πŸ‘

    By the way, do learn to use (and love) the UI inspector mode, it's the best way to prototype your changes before writing them down in the CSS. You can experiment with styles and colours etc, it's amazingly useful.

    Like for instance I notice the background images of the panel toggle buttons you have on the right are not completely centered. This would be a pain to fix with having to restart the browser for every test, but with the inspector you can experiment with the CSS positioning parameters directly.



  • @Pathduck said in Modding Vivaldi 3.2.1967.41 new Tab button:

    but don't run with it all the time

    What's the reason for this? I don't use the command line, I set the flag or whatever it was to enable it, but it's the same effect as far as I know. I assume whatever the risk is applies in that case as well.

    @Pathduck said in Modding Vivaldi 3.2.1967.41 new Tab button:

    do learn to use (and love) the UI inspector mode, it's the best way to prototype your changes before writing them down in the CSS

    And also perhaps the easiest way to discover what selectors you need to use to target the elements you want to modify. Additionally, as you become comfortable using the dev tools, there are numerous other uses for them as well.



  • @aravisian what desktop environment (DE) and/or window manager (WM) are you using? I don't use a DE in my primary Linux install, instead I just run openbox which provides me with both a very minimal environment which I can build up with whatever elements I want, and turn them on & off based on how I feel like working in the moment -- things like a taskbar or system tray, conky, etc. It also offers a high degree of theming and other customization; I even created a more granular & flexible window snap feature than Windows offers by writing maybe a hundred lines or so of xml. It can also be a pseudo-tiling WM when I use that feature, as I chop windows down to half, quarter, eighth, or 16ths of the desktop with a short chain of keyboard shortcuts.

    If you're into that kind of thing, I really like openbox. Lots of people use i3(-gaps), it's super popular these days, but I don't like strict tiling WMs. I have to admit, however, that their desktops are beautiful. Visit this subreddit for inspiration: https://www.reddit.com/r/unixporn/

    Oh, and BTW, if you know markdown, you can use it when writing forum posts here. If you don't know it, learn it, it's super basic.



  • @BoneTone said in Modding Vivaldi 3.2.1967.41 new Tab button:

    What's the reason for this? I don't use the command line, I set the flag or whatever it was to enable it, but it's the same effect as far as I know. I assume whatever the risk is applies in that case as well.

    Well, I just assume - and I might be on shaky ground here - that running with debug flags enabled is somehow bad for performance. It certainly is for some other software. But I have very little evidence of it.

    I just think, purely from a practical viewpoint, that unless you plan to use the feature a flag provides all the time there is no need to have it constantly enabled. It might even cause some hard to troubleshoot issues at some unknown time.



  • @Pathduck Does it? I used to load it with command line flags, but it was just cumbersome to restart when you quickly wanna look something up. I’m running with the debug flag directly since over a year. Don’t think there is any downside whatsoever to it, unless you mind your menu being a little larger than usual.



  • @luetage said in Modding Vivaldi 3.2.1967.41 new Tab button:

    Don’t think there is any downside whatsoever to it, unless you mind your menu being a little larger than usual.

    Ditto.

    @Pathduck said in Modding Vivaldi 3.2.1967.41 new Tab button:

    I just think, purely from a practical viewpoint, that unless you plan to use the feature a flag provides all the time there is no need to have it constantly enabled.

    From my viewpoint, since I do make use of the feature sometimes, and it causes no issues, it's more practical to just set it once and never think about it again, and not have two separate shortcuts to enable a feature I use but not every day, or necessarily every week even.



  • @Pathduck

    Like for instance I notice the background images of the panel toggle buttons you have on the right are not completely centered.

    No, actually, that is by design. If you look up the Azenis Icons, you may note that is a common trend in the icon theme. What I did here was set them into place and instead of setting the svg icon to

    display: none;

    I used

    fill: #00bdfc;

    This allows the original svg icons to be positioned to the lower right and have the same color scheme as Azenis while contrasting in the size to the Azenis Folder Icon.
    In fact, I originally had replaced all the icons and set the svg icons to display:none; but afterward, I felt that the way they are now set the tone better.

    Well, actually... I was not aware you could do this, I always thought any local images would need a full file:// URL or be base-64 encoded.

    If you place the files in the folder that you have the .css in, then you need only reference the file itself

    background-image: url('example.png');

    If you place it outside the folder that the .css is in, but within the containing directory, often you need to only reference that folder within the directory

    background-image: url('/resources/example.png');

    The path moves outward from the .css file, rather than from the top directory down.
    @BoneTone,
    I am running Zorin 15 Lite. I decided to replace XFCE4 with the Cinnamon Desktop on it. There is a reason for this that I would be happy to explain, but I do not want to come across as though I am pushing an advertisement here, more than I already inadvertently may have. The Short Version is; That D.E. with a certain incl. backport runs blazing fast with high performance in this distro, whereas on a certain other distro it is normally associated with, it bogs down pretty quickly.
    I Love Openbox. I also am a fan of Antix non-systemd.
    I have MUCH to learn still.
    Including markdown, now. I will look into it. (Edit: looked into it.)
    Edit, again: Thank you for the teaching on how to access the UI inspector. It is very helpful and familiar as it is like gtkparasite or gtk3-Inspector.



  • Above, I went through the common.css and modified... pretty much everything. There was a method to the madness and the above theme has been toned down, now.
    However, the method is also to find and exclude the common things a person may wish to modify.
    Thanks to PathDuck above, for teaching me how to use the Experimental Feature to isolate the Vivaldi Theme from the /opt/Vivaldi directory.
    I placed mine simply in ~/.themes.
    Below is the .css code I used (or did not use, but found and included anyway) to modify the browser. I could not find any working markdown for creating a Scrollable Spoiler Tag.
    I created an Odd Theme out of it. If you want to know what it looks like, you will just have to try it out. (You will not be impressed.)
    And a Moderator may prefer to move this to the appropriate forum: Modifying, User Submissions, Trash can...

    This Theme is not intended to be Used, though you can if you want to, as a theme. It is a Template. This is not intended for the experts. In fact, the experts would look at this and laugh. They would point out redundant entries. These are there so a user exploring the .css knows that they are there and that they can be used, when necessary. Many elements look strange and do not match the rest of the theme. This is by design as this template is meant to be Explored, featuring radial and linear gradients, with and without borders, use of the display property (Initial, Inherit, Flex, None...) and fill property and so on. In this way, a user can not only look at how to change a background, but how to alter an entire container.
    I removed the file urls on most and commented out the sections that would require one (If you use one, place the image file you want to use in the same folder as the .css for the theme and then put the image name.png in between the 'quote' marks.) The active ones use gradients.
    Comments are with the tag /* to open and */ to close. Remove the two tags on either side of something you wish to use or place them on something you wish to be ignored.
    SCROLLBARS: I am including the .css I actually use on My Actual Scrollbars but please note, you need an extension to use that .css so it can be injected in to the browser.
    User Hadden89 wrote up an excellent article on such.
    https://forum.vivaldi.net/topic/26798/webpages-scrollbars-with-var-color-mod-extension-hybrid
    I am using the chrome extension "Custom Scroll Bar" as it is very simple and powerful.

    Good luck and ask any questions. If this template can help you, please copy it into a text file, save it as vivaldi.css or nightmare.css or whatever you want and begin changing everything to Make It Your Own.
    Now that your eyeballs are bleedin'... It gets worse. The .css follows. Below should be just about everything you need to customize your browser appearance from Top To Bottom (NOTE: I needed to use multiple quotes in order to differentiate areas where the /* comments*/ where interfering and trying to italicize. You will need to scroll a bit):

    /* TOOLBAR*/
    .toolbar-statusbar > .button-toolbar > button,
    .toolbar-statusbar > .page-zoom-controls > .button-toolbar > button {
    background: linear-gradient(to bottom,
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.0) 20%,
    rgba(0,0,0,0.0)
    );
    background-repeat: no-repeat;
    background-size: cover;
    height: 21px;
    border-radius: unset;
    padding-top: unset;
    padding-bottom: unset;
    border-top: none;
    border-bottom: none;
    border-left-width: 0;
    border-right-width: 0;
    }
    .button-toolbar > button:active {
    background: linear-gradient(to bottom,
    rgba(0,0,0,0.08),
    rgba(24,24,24,0.8) 30%,
    rgba(53,53,53,0.8),
    #00bdfc);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    }
    .toolbar-mainbar > .button-toolbar > button,
    .toolbar-mainbar > .toolbar-group > .button-toolbar > button {
    background: radial-gradient(#00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 1px solid #00bdfc;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-position: 50% 50%;
    min-width: 34px;
    color: inherit;
    padding: 0;
    height: 34px;
    border-style: unset;
    }
    .toolbar-mainbar > .button-toolbar > button:hover,
    .toolbar-mainbar > .toolbar-group > .button-toolbar > button:hover,
    .toolbar-mainbar > .button-toolbar > button:active,
    .toolbar-mainbar > .toolbar-group > .button-toolbar > button:active {
    background: radial-gradient(
    rgba(0,189,252,0.9),
    rgba(24,24,24,0.8),
    rgba(85,85,85,0.8));
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--colorBgDark);
    border: 1px solid #17171A;
    border-radius: 20px;
    }
    .toolbar-statusbar {
    background: linear-gradient(to bottom,
    rgba(0,0,0,0.08),
    rgba(24,24,24,0.8) 30%,
    rgba(53,53,53,0.8)
    );
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--colorFg);
    height: 22px;
    border-top: 1px solid var(--colorBorder);
    font-size: 11.5px;
    position: relative;
    z-index: 1;
    }
    .toolbar-tabbar .newtab > button svg {
    display: flex;
    border-radius: var(--radius);
    }
    .toolbar-tabbar .newtab > button, .toolbar-tabbar .newtab > button:hover, .toolbar-tabbar .newtab > button:active {
    background: radial-gradient(#00bdfc, #17171a, #242424, #00bdfc);
    background-repeat: no-repeat;
    }
    .toolbar-tabbar > .button-toolbar.toggle-trash,
    .toolbar-tabbar > .toolbar-group > .button-toolbar.toggle-trash {
    background: radial-gradient(#00bdfc, #17171a, #242424, #00bdfc);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-self: flex-end;
    }
    .toolbar-tabbar > .button-toolbar.toggle-trash > button svg path,
    .toolbar-tabbar > .toolbar-group > .button-toolbar.toggle-trash > button svg path {
    display: flex;
    transition: transform 0.3s;
    }
    /* TAB-CLOSE*/
    .close {
    background: radial-gradient(#17171a, #242424);
    background-repeat: no-repeat;
    background-color: transparent;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: var(--radiusRounded);
    opacity: 0.8;
    padding: 0;
    }
    .close:hover {
    background: radial-gradient(#00bdfc, #17171a, #242424, #00bdfc);
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 1;
    }
    .close:active {
    background: radial-gradient(#00bdfc, #17171a, #242424, #00bdfc);
    background-repeat: no-repeat;
    background-color: transparent;
    }
    /* PROFILE_DEFAULT-AVATAR*/
    .profile-popup > button > img {
    display: none;
    }
    /*
    .profile-popup > button:after {
    content: '';
    width : 24px;
    height: 24px;
    background: url('');
    background-size: cover;
    background-repeat: no-repeat;
    border-color: transparent !important;
    }*/

    /* PANEL BUTTONS*/
    #switch .addwebpanel-wrapper > button,
    #switch > button {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    background-size: cover;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-top: 1px solid #00bdfc;
    border-bottom: 1px solid #00bdfc;
    border-radius: 0;
    box-shadow: none;
    position: center;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    }
    #switch .addwebpanel-wrapper > button.preferences svg,
    #switch > button.preferences svg {
    display: initial;
    background-color: transparent;
    }
    #switch .addwebpanel-wrapper > button.preferences,
    #switch > button.preferences {
    background-image: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    background-size: auto;
    order: 100;
    position: center;
    margin-top: auto;
    }
    #switch .addwebpanel-wrapper > button svg,
    #switch > button svg {
    display: initial;
    fill: #00bdfc;
    padding-top: 2px;
    transition: transform 0.2s;
    }
    #switch .addwebpanel-wrapper > button.addwebpanel svg,
    #switch > button.addwebpanel svg {
    display: initial;
    background-color: transparent;
    }
    #switch .addwebpanel-wrapper > button.downloads,
    #switch > button.downloads {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    position: relative;
    }
    #switch .addwebpanel-wrapper > button.downloads svg,
    #switch > button.downloads svg {
    display: initial;
    transform-origin: 50% 80%;
    }
    #switch .addwebpanel-wrapper > button.addwebpanel,
    #switch > button.addwebpanel {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    order: 100;
    border-bottom: 1px solid #00bdfc;
    }
    #switch .addwebpanel-wrapper > button.notes,
    #switch > button.notes {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    position: relative;
    }
    #switch .addwebpanel-wrapper > button.notes svg,
    #switch > button.notes svg{
    display: initial;
    }
    #switch .addwebpanel-wrapper > button.history ,
    #switch > button.history {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    position: relative;
    }
    #switch .addwebpanel-wrapper > button.history svg,
    #switch > button.history svg {
    display: initial;
    }
    #switch .addwebpanel-wrapper > button.bookmarks,
    #switch > button.bookmarks {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-repeat: no-repeat;
    position: relative;
    }
    #switch .addwebpanel-wrapper > button.bookmarks svg,
    #switch > button.bookmarks svg {
    display: initial;
    }
    /* MENUBAR*/
    .menubar button {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 120px;
    border: 1px solid #17171A;
    border-radius: 20px;
    padding: 3px 10px;
    }
    .menubar button.highlighted {
    background: linear-gradient(to right, #00bdfc, #17171a, #2b2b2c, #181818, #242424, #555555, #353535, #00bdfc);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 1px solid #00bdfc;
    border-radius: 20px;
    background-color: var(--colorHighlightBg);
    color: var(--colorHighlightFg);
    }
    /* ADDRESSBAR*/
    .toolbar-addressbar .UrlField {
    background-image: linear-gradient(to right, #17171a, #2b2b2c, #181818, #242424, #555555, #353535);
    height: 22px;
    }

    /* replaces the bookmarks and shield with a drop down arrow*/
    /*
    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button,
    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button {
    background: url('');
    background-size: cover;
    background-color: #353535;
    height: 22px;
    width: 22px;
    padding-left: 0;
    padding-right: unset;
    border-radius: var(--radiusHalf);
    border-color: #353535;
    }*/

    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button svg,
    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button svg {
    display: flex;
    }
    /* makes a different icon on hover or active*/
    /* .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button:not(:hover):not(:active):not(:focus):not(.button-pressed),
    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button:not(:hover):not(:active):not(:focus):not(.button-pressed) {
    background-image: url('');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #353535;
    border-color: transparent;
    } */

    /* makes a different icon on hover or active*/
    /*
    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button:not(:hover):not(:active):not(:focus),
    .toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button:not(:hover):not(:active):not(:focus) {
    /* background-image: url('');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #353535;
    border-color: transparent;
    } */

    /* SCROLLBARS*/
    ::-webkit-scrollbar {
    width: 16px;
    }
    ::-webkit-scrollbar-button:horizontal:decrement {
    border-radius: 10px 0px 0px 10px;
    background-image: linear-gradient(to bottom, #353535, #555555, #212121, #17171A, #353535);
    }
    ::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-radius: 10px 0px 0px 10px;
    background-image: linear-gradient(to bottom, #00bdfc, #00759c, #004157, #004157, #00bdfc);
    background-color: #00bdfc;
    }
    ::-webkit-scrollbar-button:horizontal:increment {
    border-radius: 0px 10px 10px 0px;
    background-image: linear-gradient(to bottom, #353535, #555555, #212121, #17171A, #353535);
    }
    ::-webkit-scrollbar-button:horizontal:increment:hover {
    border-radius: 0px 10px 10px 0px;
    background-image: linear-gradient(to bottom, #00bdfc, #00759c, #004157, #004157, #00bdfc);
    background-color: #00bdfc;
    }
    ::-webkit-scrollbar-button:vertical:decrement {
    border-radius: 10px 10px 0px 0px;
    background-image: linear-gradient(to right, #353535, #555555, #212121, #17171A, #353535);
    }
    ::-webkit-scrollbar-button:vertical:decrement:hover {
    border-radius: 10px 10px 0px 0px;
    background-image: linear-gradient(to right, #00bdfc, #00759c, #004157, #004157, #00bdfc);
    background-color: #00bdfc;
    }
    ::-webkit-scrollbar-button:vertical:increment {
    border-radius: 0px 0px 10px 10px;
    background-image: linear-gradient(to right, #353535, #555555, #212121, #17171A, #353535);
    }
    ::-webkit-scrollbar-button:vertical:increment:hover {
    border-radius: 0px 0px 10px 10px;
    background-image: linear-gradient(to right, #00bdfc, #00759c, #004157, #004157, #00bdfc);
    background-color: #00bdfc;
    }
    ::-webkit-scrollbar:horizontal {
    height:16px;
    }
    ::-webkit-scrollbar-track {
    background-image: linear-gradient(to right, #353535, #555555, #212121, #17171A, #353535);
    }
    ::-webkit-scrollbar-track:horizontal {
    background-image: linear-gradient(to bottom, #353535, #555555, #212121, #17171A, #353535);
    }
    ::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: #17171a;
    border: 1px solid #000000;
    background-image: linear-gradient(to right, #555555, #535353, #242424, #353535);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:horizontal {
    background-clip: content-box;
    background-color: #17171a;
    border: 1px solid #000000;
    background-image: linear-gradient(to bottom, #555555, #535353, #242424, #353535);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:hover {
    background-clip: content-box;
    background-color: #17171a;
    border: 1px solid #000000;
    background-image: linear-gradient(to right, #00bdfc, #00759c, #004157, #004157, #00bdfc);
    background-color: #00bdfc;
    }
    ::-webkit-scrollbar-thumb:horizontal:hover {
    background-clip: content-box;
    background-color: #17171a;
    border: 1px solid #000000;
    background-image: linear-gradient(to bottom, #00bdfc, #00759c, #004157, #004157, #00bdfc);
    background-color: #00bdfc;
    }
    /* STARTPAGE*/
    button.button-startpage {
    min-height: 34px;
    padding: 6px 12px;
    border: 0 solid transparent;
    border-bottom-width: 2px;
    -webkit-user-select: none;
    max-width: 16em;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to bottom, #00759c, #004157, #004157);
    background-repeat: no-repeat;
    }
    button.button-startpage:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    bottom: 2px;
    background-image: linear-gradient(90deg, transparent, var(--colorBgLightIntense));
    }
    button.button-startpage svg {
    fill: #00bdfc;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 4px -4px 0;
    }
    button.button-startpage.add-set svg {
    margin-right: 0;
    }
    button.button-startpage.add-set svg path {
    fill: #00bdfc;
    }
    span + button.button-startpage.add-set {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    }
    button.button-startpage.active {
    box-shadow: none;
    outline: none;
    color: var(--colorFg);
    border-color: var(--colorBorderHighlight);
    }
    button.button-startpage:focus {
    background-color: var(--colorBgDark);
    border-color: var(--colorBorderHighlight);
    box-shadow: 0 0 0 1px var(--colorBorderHighlight);
    }
    button.button-startpage:focus:after {
    background-image: linear-gradient(to right, #242424, #17171A);
    }
    button.button-startpage.up {
    position: relative;
    padding-left: 34px;
    border-radius: var(--radiusRounded);
    border-width: 0;
    }
    button.button-startpage.up:focus {
    border-width: 1px;
    }
    button.button-startpage.up svg {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 7px;
    transform: scaleX(-1);
    }
    .vivaldi-tree .tree-row svg {
    fill: #00bdfc;
    stroke: var(--colorFgFaded);
    }
    .vivaldi-tree .tree-row .close svg,
    .vivaldi-tree .tree-row .mail-status-indicator svg,
    .vivaldi-tree .tree-row .expand-icon svg {
    fill: #00bdfc;
    stroke-width: 0;
    }
    .sdwrapper .iconmenu-container.searchfield {
    position: relative;
    z-index: 2;
    margin: 36px auto -24px;
    max-width: 380px;
    padding: 6px;
    height: auto;
    background-color: #353535;
    box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 6px rgba(0, 0, 0, 0.25);
    border-color: transparent;
    }


Log in to reply
 

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