Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Browser
    • Mail
    • News
    • Community
    • About
    • Register
    • Login
    • Search
    HomeBlogsForumHelpThemes
    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Desktop
    3. Customizations & Extensions
    4. Modifications
    5. Changing icons with CSS / part II

    Changing icons with CSS / part II

    Modifications
    modding css
    35
    324
    30696
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • luetage
      luetage last edited by luetage

      aka the svg strikes back!
      original thread / part I

      I've been running a custom home button ever since I first messed with changing icons, yesterday's update broke it and I thought why not give it another shot. After searching the web I found out it is indeed possible to exchange the svg path directly with css, without using any background image, which has several advantages:

      • independent from theme color
      • no extra animation necessary
      • far less code

      This means we could potentially create whole icon packs for Vivaldi without too much effort. Example for home button:

      /*
      Changing Buttons
      version 2021.9.0
      https://forum.vivaldi.net/post/155310
      Changes home and trash button svgs. Many more examples in linked topic.
      */
      
      .UrlBar button[title="Go to homepage"] svg path {
        d: path(
          "M 4 6 h 18 v 2.5 h -3.5 v 11.5 h -2.5 v -9.5 h -6 v 9.5 h -2.5 v -11.5 h -3.5 Z"
        );
      }
      .toggle-trash.button-toolbar button svg path {
        d: path("M 6.5 8 h13 v2 h-13 Z M 6.5 12 h13 v2 h-13 Z M 9 16 h8 v2 h-8 Z");
      }
      

      0_1503616186796_Screenshot 2017-08-25 01.09.13.png


      0_1503616297375_Screenshot 2017-08-25 01.11.27.png

      github ◊ vfm

      1 Reply Last reply Reply Quote 14
      • S
        sethjbr last edited by

        That could be useful. Thanks @luetage

        1 Reply Last reply Reply Quote 0
        • Hadden89
          Hadden89 last edited by Hadden89

          @luetage The path are like vector coordinates for drawing the button or load an url? After squircle, I'll call that button sthomehenge 😃

          Patience is the key to get the Vivaldi Spree | Unsupported Extensions | DarkChromeCSS | Github

          luetage 2 Replies Last reply Reply Quote 1
          • luetage
            luetage @Hadden89 last edited by

            @Hadden89 Coordinates, the path is being drawn.

            github ◊ vfm

            1 Reply Last reply Reply Quote 1
            • luetage
              luetage @Hadden89 last edited by

              @Hadden89 said in Changing icons with CSS / part II:

              I'll call that button sthomehenge

              That's not too far off. It's a gate. In my opinion more logical than a house, but maybe that's just me 😛

              github ◊ vfm

              1 Reply Last reply Reply Quote 1
              • luetage
                luetage last edited by

                I've been looking at improving/exchanging the trash can, and I noticed the area is called sync and trash. Looks like we are getting a sync button besides our trash button.

                github ◊ vfm

                Ayespy 1 Reply Last reply Reply Quote 1
                • sjudenim
                  sjudenim last edited by sjudenim

                  Hamburger menu

                  #titlebar > button > span.application-icon > svg path,
                  #titlebar > button > span.vivaldi-v > svg path {
                      d: path('M0 2.2h18V4H0zm0 5.9999998h18v1.8H0zM0 14.2h18V16H0z');
                  }
                  

                  New tab button

                  #tabs-container .newtab svg path {
                      d: path('M15 9a1 1 0 0 1-1 1h-4v4a1 1 0 0 1-2 0v-4H4a1 1 0 0 1 0-2h4V4a1 1 0 0 1 2 0v4h4a1 1 0 0 1 1 1z');
                  }
                  

                  0_1503774014020_2017-08-26_501.png

                  https://github.com/sjudenim

                  luetage 1 Reply Last reply Reply Quote 2
                  • Ayespy
                    Ayespy Moderator @luetage last edited by

                    @luetage Shshshshhhhhhh!

                    Volunteer Mod and tester on Windows 11 Pro X64, i5 9400 @ 4.1 GHz turbo; Intel UHD 630 graphics; 1TB WDC NVME SSD; 16 GB DDR4-2666 RAM. Community Code of Conduct

                    1 Reply Last reply Reply Quote 0
                    • luetage
                      luetage @sjudenim last edited by

                      @sjudenim Cool stuff, the collection is growing.
                      Btw, do you know how to calculate paths to scale them for different sizes in different places? Or do we just need to make them anew?

                      github ◊ vfm

                      sjudenim 1 Reply Last reply Reply Quote 0
                      • sjudenim
                        sjudenim @luetage last edited by sjudenim

                        @luetage

                        I know that you can use transform to resize things but I don't like the results.
                        https://css-tricks.com/almanac/properties/t/transform/

                        Maybe it's possible to set the width and height using viewport (vw and vh) instead of px. I've done this to resize video players on websites to dynamically adjust the player to the window size, something scaling can't do. And since svg files have viewports, you can give it a try.
                        https://css-tricks.com/viewport-sized-typography/

                        https://github.com/sjudenim

                        luetage 1 Reply Last reply Reply Quote 0
                        • luetage
                          luetage @sjudenim last edited by

                          @sjudenim Scaling is already what Vivaldi does when you click on a button, you have to play around with the thickness of your image to make it look good. The viewbox doesn't change your path, it only defines the space available, and if your path is bigger or too small then it stays that way, it crops your image? I don't know.

                          What I was getting at was more like following:
                          You have a viewbox of 20/20 and a rectangle of M 5 5 h10 v10 h-10 Z -- how do you make the svg half the size when the viewbox stays the same? In this example it is very simple of course, but I'm wondering if there is some formula for complicated shapes. Or do we really just have to scale the svg till it fits?

                          github ◊ vfm

                          sjudenim 1 Reply Last reply Reply Quote 0
                          • sjudenim
                            sjudenim @luetage last edited by sjudenim

                            @luetage

                            Yes, I wasn't referencing the viewbox, only treating the svg as a scalable image after the fact.

                            Is this what you mean?

                            "The viewBox isn't the height of the container, it's the size of your drawing. Define your viewBox to be 100 units in width, then define your rect to be 10 units. After that, however large you scale the SVG, the rect will be 10% the width of the image.."

                            http://jsfiddle.net/Thyti/8KVtU/452/

                            Otherwise, I don't know of any formula

                            good luck

                            https://github.com/sjudenim

                            1 Reply Last reply Reply Quote 0
                            • sjudenim
                              sjudenim last edited by sjudenim

                              Also, I was fooling around with some different things for the closed tabs trash bin but didn't like any of them, so I settled on something simple

                              #tabs-container > div.trash > button > svg path {
                                  d: path('m2 7c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2zm14 0c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2zm-7 0c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2z');
                              }
                              
                              #tabs-container > div.trash > button > svg {
                                  opacity: 4;
                              }
                              

                              0_1503696759142_2017-08-25_500.png

                              I've redone the window group buttons too since being on Windows h8 has some real ugly ones, I made them Win10 style but have run into a snag. Vivaldi is adding a fill to the close button. How can I remove the fill without losing the svg image in the process?

                              I've tried fill: none and fill:transparent with no luck. If I use a fill colour, then the image will be locked to that and not adapt to the themes.

                              https://github.com/sjudenim

                              1 Reply Last reply Reply Quote 0
                              • luetage
                                luetage last edited by luetage

                                Your code doesn't work for me personally.
                                I used .button-tabbar.toggle-trash svg path instead when I messed with it. The trash button is very strange, it has a g element, with a transform: translate which makes everything whacky. I looked around for ideas for the trash button, the Opera design is better than the Vivaldi one, but I don't like it too much either.

                                And about the fill, hmm, I can't test it because I'm on osx. But can't you make the fill the background color of your theme with the variable, as an ugly workaround? Or you could fill it with a rgba color with opacity of zero.

                                github ◊ vfm

                                sjudenim 1 Reply Last reply Reply Quote 1
                                • sjudenim
                                  sjudenim @luetage last edited by sjudenim

                                  Using any colour on it locks it to that colour which sometimes works with var(--colorFg) but not always. Using rgba gives the same result as transparent, which removes the svg from sight. Thanks for the suggestions though

                                  Normally I just look at the css in Dev Tools but the trash had a bunch of odd things going on. So I used Copy selector instead to get that

                                  https://github.com/sjudenim

                                  luetage 1 Reply Last reply Reply Quote 0
                                  • luetage
                                    luetage @sjudenim last edited by

                                    @sjudenim I tried around with my home button now.
                                    fill: none; works as expected, if you then do stroke: #fd3563;, you get just the colored outline.

                                    github ◊ vfm

                                    sjudenim 1 Reply Last reply Reply Quote 0
                                    • sjudenim
                                      sjudenim @luetage last edited by sjudenim

                                      @luetage

                                      I guess my only option is to remove it directly from the common.css

                                      https://github.com/sjudenim

                                      1 Reply Last reply Reply Quote 0
                                      • sjudenim
                                        sjudenim last edited by sjudenim

                                        deleted post

                                        https://github.com/sjudenim

                                        1 Reply Last reply Reply Quote 0
                                        • luetage
                                          luetage last edited by

                                          Where is the difference? Do you mean there are 2 Vivaldi logos, that are being loaded depending on your theme settings?

                                          github ◊ vfm

                                          sjudenim 1 Reply Last reply Reply Quote 0
                                          • sjudenim
                                            sjudenim @luetage last edited by sjudenim

                                            deleted post

                                            https://github.com/sjudenim

                                            1 Reply Last reply Reply Quote 0
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            • Reply as topic
                                            Log in to reply
                                            • 1
                                            • 2
                                            • 3
                                            • 4
                                            • 5
                                            • 16
                                            • 17
                                            • 1 / 17
                                            • First post
                                              Last post

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

                                            Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status