Changing icons with CSS / part II
-
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; }
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
andfill:transparent
with no luck. If I use a fill colour, then the image will be locked to that and not adapt to the themes. -
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 ag
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.
-
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 astransparent
, which removes the svg from sight. Thanks for the suggestions thoughNormally 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
-
@sjudenim I tried around with my home button now.
fill: none;
works as expected, if you then dostroke: #fd3563;
, you get just the colored outline. -
I guess my only option is to remove it directly from the
common.css
-
deleted post
-
Where is the difference? Do you mean there are 2 Vivaldi logos, that are being loaded depending on your theme settings?
-
deleted post
-
Trash button with fixed transform: translate
.button-tabbar.toggle-trash svg g path { d: path('M 6 8 h14 v2 h-14 Z M 6 12 h14 v2 h-14 Z M 9 16 h8 v2 h-8 Z'); } .button-tabbar.toggle-trash svg g { transform: translate(0px, 0px) !important; }
-
@luetage said in Address Bar at very top:
@retoree You have some nice modifications going on there. I see you're using my trash button and @sjudenim's menu button. Care to share your own creations back to the changing icons thread thread? I like what you've done with the bookmark and home buttons.
Home button:
.button-toolbar.home svg path { d: path('M25 7.813l-12.5-6.25-12.5 6.25 12.5 6.25 12.5-6.25zM12.5 3.637l8.351 4.176-8.351 4.176-8.351-4.176 8.351-4.176zM22.496 11.248l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998zM22.496 15.936l2.504 1.252-12.5 6.25-12.5-6.25 2.504-1.252 9.996 4.998z'); }
Bookmark button:
.button-addressfield.bookmark svg path { d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z'); } .button-addressfield.bookmark.bookmarked svg .bookmark-outline { fill: rgb(218, 93, 93); } .button-addressfield.bookmark.bookmarked:hover svg .bookmark-outline { fill: rgb(234, 64, 64); }
Also check Narsis post below for Bookmarks side panel icon.
-
@retoree How do you make the buttons smaller? Can you send me the css?
-
A couple more alternatives...
Vivaldi menu icon (at the top left):
Gets rid of the squircle background and scales it up a bit.
#titlebar > button > span.application-icon > svg path, #titlebar > button > span.vivaldi-v > svg path { d: path('M16.42 8.64l-4.17 7.23a1.39 1.39 0 0 1-1.15.76 1.33 1.33 0 0 1-1.32-.7c-.88-1.51-1.75-3-2.62-4.54l-1.6-2.77A1.4 1.4 0 0 1 6.7 6.51a1.34 1.34 0 0 1 1.3.72l1.17 2c.28.48.55 1 .84 1.45a2.2 2.2 0 0 0 1.84 1.14 2.24 2.24 0 0 0 2.36-2v-.23a2.34 2.34 0 0 0-.24-1 1.4 1.4 0 1 1 2.62-.87 1.46 1.46 0 0 1-.17.92z'); } #titlebar > button > span.application-icon > svg, #titlebar > button > span.vivaldi-v > svg { height: 100%; width: 100%; } .vivaldi { position: relative !important; top: -3px !important; }
Bookmarks side panel icon:
To match this because consistency is nice.
.bookmarks svg path { d: path('M10.325 0.875c-1.472 0-2.738 1.197-3.325 2.447-0.587-1.25-1.854-2.447-3.325-2.447-2.029 0-3.675 1.647-3.675 3.675 0 4.127 4.163 5.209 7 9.289 2.682-4.055 7-5.294 7-9.289 0-2.029-1.647-3.675-3.675-3.675z'); transform: translate(6px,8px); }
Notes side panel icon:
Makes it easier to find the panel imo.
.notes svg path/*, .bookmarks.active svg path*/ { d: path('m23.90625,3.96875c-1.04688,0 -2.09375,0.40625 -2.90625,1.21875l-15.8125,15.8125l-0.0625,0.3125l-1.09375,5.5l-0.3125,1.46875l1.46875,-0.3125l5.5,-1.09375l0.3125,-0.0625l15.8125,-15.8125c1.625,-1.625 1.625,-4.1875 0,-5.8125c-0.8125,-0.8125 -1.85938,-1.21875 -2.90625,-1.21875zm0,1.90625c0.50391,0 1.01172,0.23047 1.5,0.71875c0.97266,0.97266 0.97266,2.02734 0,3l-0.71875,0.6875l-2.96875,-2.96875l0.6875,-0.71875c0.48828,-0.48828 0.99609,-0.71875 1.5,-0.71875zm-3.59375,2.84375l2.96875,2.96875l-12.09375,12.09375c-0.65625,-1.28125 -1.6875,-2.3125 -2.96875,-2.96875l12.09375,-12.09375zm-13.375,13.71875c1.19922,0.48438 2.14063,1.42578 2.625,2.625l-3.28125,0.65625l0.65625,-3.28125z'); transform: scale(0.68,0.68) translate(3px,4px); }
Depending on what other mods you use you might need to tweak the scaling and positioning a bit.
-
@Narsis Nice work on these icons!
In other news the sync icon has been leaked on some screenshot. Can't remember where anymore. It's just the standard cloud icon. Does someone have an idea for an icon representing sync, that isn't a cloud? I've looked around and the options aren't plentiful.
-
@narsis thanks for notes, I actually have bookmark icon in panel, just forgot about it.
-
Round back/forward.
.button-toolbar.back > svg path { d: path('M293.004,78.525C249.64,3.436,153.62-22.295,78.531,21.061C3.436,64.411-22.296,160.443,21.068,235.542 c43.35,75.087,139.375,100.822,214.465,57.467C310.629,249.648,336.365,153.621,293.004,78.525z M219.836,265.802 c-60.075,34.685-136.894,14.114-171.576-45.969C13.57,159.762,34.155,82.936,94.232,48.253 c60.071-34.683,136.894-14.099,171.578,45.979C300.495,154.308,279.908,231.118,219.836,265.802z M211.986,141.328h-65.491 l17.599-17.603c6.124-6.129,6.124-16.076,0-22.197c-6.129-6.133-16.078-6.133-22.207,0l-44.402,44.4 c-6.129,6.131-6.129,16.078,0,22.213l44.402,44.402c6.129,6.128,16.078,6.128,22.207,0c6.124-6.131,6.124-16.077,0-22.201 l-17.606-17.601h65.499c8.669,0,15.697-7.041,15.697-15.701v-0.008C227.683,148.353,220.655,141.328,211.986,141.328z') !important; transform: scale(.08) !important; /*backbutton*/ } .button-toolbar.forward > svg path { d: path('M216.545,145.893l-44.374-44.368c-6.131-6.133-16.076-6.133-22.205,0h0.008c-6.129,6.121-6.129,16.068,0,22.197 l17.589,17.603h-65.485c-8.666,0-15.701,7.033-15.701,15.701v0.008c0,8.668,7.035,15.701,15.701,15.701h65.493l-17.597,17.601 c-6.129,6.132-6.129,16.069,0,22.201c6.122,6.136,16.066,6.136,22.197,0l44.41-44.402c6.128-6.127,6.128-16.078,0-22.209 C216.57,145.909,216.554,145.9,216.545,145.893z M235.533,21.057C160.438-22.291,64.414,3.433,21.063,78.521 c-43.356,75.096-17.633,171.119,57.464,214.483c75.087,43.353,171.119,17.625,214.476-57.47 C336.364,160.443,310.62,64.408,235.533,21.057z M265.801,219.83c-34.688,60.079-111.503,80.657-171.574,45.973 C34.158,231.118,13.565,154.304,48.25,94.229C82.932,34.151,159.756,13.567,219.828,48.25 C279.899,82.934,300.485,159.763,265.801,219.83z') !important; transform: scale(.08) !important; /*forwardbutton*/ }
Icons made from Chris Veigt for flaticon.com
-
@raed You should be able to do this without javascript, but since you are already using js code for the button it doesn't really matter. And yeah, you can color the svg, but I would keep it like it is – the Vivaldi theme color variables assure the button is consistent over all themes you load. In any case, that's your choice. The Vivaldi icon has 2 paths, and each path has a fill for the color (eg
fill=blue
). Just inspect the footer again and you will see how to do it. -
@raed You need to introduce a second path for this to work. Maybe I'll take a look at it later.
-
@raed As said, without the second path it's futile. This works.
setTimeout(function wait(){ toolbar = document.querySelector(".toolbar-addressbar.toolbar"); bookmarkbar = document.querySelector(".bookmark-bar"); morebookmarks = document.querySelector("button[title='More bookmarks']"); if (bookmarkbar != null){ bookmarkbar.style.width = 0; } if (toolbar !== null && bookmarkbar !== null && morebookmarks !== null){ morebookmarks.classList.add("button-toolbar"); morebookmarks.id = "addbookmarks"; bookmarkbar.remove(); var svg = morebookmarks.firstElementChild; svg.setAttribute("viewBox", "0 0 34 34"); svg.setAttribute("height", "34"); svg.setAttribute("width", "34"); svg.innerHTML = '<path d="M16 32c7 0 10.91 0 13.45-2.54S32 23 32 16s0-10.9-2.55-13.44S23 0 16 0 5.09 0 2.55 2.54 0 9 0 16s0 10.9 2.55 13.44S9 32 16 32z" fill="#ef3939"></path><path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff"></path>'; toolbar.appendChild(morebookmarks); } else { setTimeout(wait, 300); } }, 300);
-
@raed said in Changing icons with CSS / part II:
Any thoughts on changing the title bar (minimize, resize and close) icons, and on reducing the wasted screen real estate on top of the tabs?
Glad you are happy, but any requests unrelated to changing icons are off-topic here.
-
@raed The path is the alignment. It has a starting point M which places it in the viewbox. If you change the viewbox, the path might not be centered anymore, speak: changing the viewbox misaligned your path. Try scaling like @Hadden89 instead of changing the viewbox to control the size of the path/icon. If you start to scale it might be a good idea to make the viewbox 32x32, like in the original svg on the Vivaldi Forum.