Additional speed dial tweaks
-
Some little code I'm using in speed dial with 75% UI
/* Font size and two line text */ .button-title { font-size: 11.5px; font-weight: 700; white-space: normal !important; /* wrap text */ width: 100px; height: 33px; margin: -3px 0px 0px 0px; } /* Speed dial navigation bar */ button.button-startpage { border: 1px dotted transparent; } .startpage .startpage-navigation { font-size: 16px; font-weight: 700; min-height: 1px; /* Reduced nav bar height */ }
-
Good, I'll take the Hide close and update buttons into VivaldiHooks, hoping one day they'll be finally added natively as options in settings.
-
@liyin said in Additional speed dial tweaks:
How can you reduce the space around the speed dial tiles?
Not each tile individually, but around the whole set of tiles.
https://forum.vivaldi.net/topic/11298/vivaldihooks-more-useful-mods/
there's one mod about speed dial geometry
speeddial-items-geometry.js
edit it, find
min: 10,
max: 100,
change the min to 1
then you can change your SD geometry in Settings/Start Page/Dial Geometry -
For page spacing create a css file that sets the margins
For just the top
.speeddial { margin-top: 20px; }
If you want to adjust all them you can use
.speeddial { margin: 20px 80px 0 90px !important; }
the margin numbers work in this order, Top-Right-Bottom-Left
-
-
I'm not a fan of where the speed dial titles are so I've made them into an overlay on the dial itself
.dials .dial .thumbnail-image { border-radius: 6px; } .dials .dial .button-title { background-color: var(--colorBgDarker) !important; width: 100% ; margin-top: -57px; border-radius: 0 0 5px 5px; padding: 5px 10px 5px 3px; } .dials .dial:hover .button-title { transform: scaleX(1.027); margin-top: -47px; }
Looks like this
http://imgur.com/8g3OQ9J -
@sjudenim Good idea. I never knew I wanted this, but apparently I do.
Thanks! -
I forgot to add this to re-position the update button
.dials .dial .update-thumbnail { bottom: 25px !important; }
and this will nestle the edit box (rename) into the same space
.dials .dial .editable-title-container > input, .dials .dial .editable-title-container > input:active { margin-top: -29px; border-radius: 0 0 5px 5px !important; padding: 5px 10px 10px 3px !important; border-color: transparent !important; }
-
I can't reproduce that in the stable or the snapshot. Thumbnails appear as they should.
Is that folder supposed to be on the navbar?
-
Haven't tested this but try setting the margin on that button with this heading,
.startpage .startpage-folder-navigation button
You might have to set a negative value
-
@sjudenim You are a precise person, I wouldn't have thought about the input when renaming.
I noticed that the input doesn't scale when hovering. Your original scaling code can be adjusted for the input though. Works out perfectly and looks just fine.
The only issue I have is the margin between speed dial rows, which is now larger because the title bar is missing, but still uses the space. The draggable area is also larger now and you can pick the dials up well below their border.
I'm looking for a solution to this since you have posted, but it seems to be quite complicated? -
I found changing space and sizing in pure css to be difficult. Thankfully den-po created the speed dial geometry hook which can be modified https://forum.vivaldi.net/post/134416
-
@liyin said in Additional speed dial tweaks:
Setting margin-top worked and it looks better now.
Couldn't set bottom margin with either "margin" or "margin-bottom".
If the right and/or left margins are changed the set of tiles is no longer centered horizontally.
Here is how to set top and bottom margins:
.dials.speeddial { margin-top: 50px; } .speeddial .dial:last-of-type { margin-bottom: 20px; }
Bottom margin was a bit more complicated to seek out, but we can adjust it with this code. Change it to whatever works for you.
@sjudenim I'm aware of VivaldiHooks, but geometry.js is currently not working on latest snapshot. Additionally I wanted to avoid using any javascript in my modifications, but it seems it's really not possible. I tried to circumvent the issue by disabling the sd-titles in startpage settings, which removes the extra margin between rows, and then making them visible again with css. Problem is they seem to be disabled with javascript, so the element can't be changed/enabled anymore with css. Oh well, not so important anyway. I will wait this one out. Thanks for your help
-
From today's snapshot there's also the ability to set custom thumbnail, I prefer to hide the overlayed button on the thumbnail, this is my modification for it.
/* Hide close and update buttons */ .dials .dial .close { display: none; } .dials .dial .update-thumbnail { display: none; } /* available from snapshot 1.10.862.6 */ .dials .dial .set-custom-thumbnail { display: none; }
-
From the CSS provided by sjudenim, which part of it modified only the border radius of the SD thumbnail themselves? That's the only part that I'd like the change about the SD thumbnails for now.
-
-
@luetage Thank you. I had already tried it before, but I decided to do it again but add "!important" after the "6px" and it worked that time.
-
Not sure if this has been mentioned elsewhere but I finally figured a way to move on from the speed dial geometry hook without having to change the zoom on the UI.
I don't like them so square but you can fool around with this for desired results.
.dials { zoom: 120%; } .dials .dial .thumbnail-image { border-radius: 6px; width: 110% !important; height: 90% !important; min-width: auto !important; }
This will make the dial titles an overlay for the above code
.dials .dial .button-title { background-color: var(--colorBgDark) !important; min-width: 110%; margin-top: -55px; border-radius: 0 0 5px 5px; padding: 5px 10px 5px 3px; font-size: 85%; opacity: .9 !important; } .dials .dial:hover .button-title { transform: scale(1.028,1); margin-top: -52px; } .dials .dial .editable-title-container>input, .dials .dial .editable-title-container>input:active { margin-top: -45px; min-width: 110%; font-size: 85%; border-radius: 0 0 5px 5px !important; padding: 8px 10px 10px 3px !important; border-color: transparent !important; }
-