(Legacy) Yet another speedial mod (72/82% UI)
-
//EDIT: Now Vivaldi allow to scale dials in its settings.
So this mod is officially (at last) legacy
Did this to get rid of the old aggressive speedial workaround (~7kb). This is just ~3kb.
Based on this with some tweaks from me, other SD mods and a fix I grabbed in next post ^^
Requisite: enablemaximum columns: none
under speed dial settings (gear icon)/*Change navigation bar height*/ .startpage .startpage-navigation { min-height: 40px; } /* Scaling mod core*/ .dials { position: relative; margin: 30px auto 0; } .sdwrapper .dial-columns { position: relative; width: auto !important; height: auto !important; padding: 15px; margin: 0 auto !important; } @media only screen and (min-width: 951px) and (max-width: 1120px) { .sdwrapper .dial-columns { width: 930px !important; } } @media only screen and (min-width: 1121px) and (max-width: 1320px) { .sdwrapper .dial-columns { width: 1110px !important; } } @media only screen and (min-width: 1321px) and (max-width: 1520px) { .sdwrapper .dial-columns { width: 1290px !important; } } @media only screen and (min-width: 1521px) and (max-width: 1720px) { .sdwrapper .dial-columns { width: 1470px !important; } } @media only screen and (min-width: 1721px) and (max-width: 1920px) { .sdwrapper .dial-columns { width: 1650px !important; } } @media only screen and (min-width: 1921px) { .sdwrapper .dial-columns { width: auto !important; } } .speeddial .dial { position: relative; float: left; width: 160px !important; height: 135px !important; transform: none !important; margin: 10px; } /* Smaller on hover */ .dials .dial:not(.dragging):hover .thumbnail-image { transform: scale(.9); } /* Fix thumbless bookmark */ .dials .dial .thumbnail-image svg g { transform: translateY(-9px); } /* Fix text/edit box */ .dials .dial .editable-title-container { margin-top: -14px; } .dials .dial .button-title { padding: 2px 6px 3px; line-height: 10px; height: 20px; min-width: 100%; white-space: nowrap; margin-top: 14px; border-radius: 0px; } .dials .dial .editable-title-container>input, .dials .dial .editable-title-container>input:active { margin-top: 12px; border: none !important; border-radius: 0 !important; } /* Fix folder preview wrapping */ .dials .dial .preview .thumbnail-image { min-height: 45%; min-width: 45% } /* Fix folder preview */ .dials .dial .preview { transform: scale(1.29); justify-content: center; } .dials .dial .thumbnail-image.dial-folder-icon { transform: translateY(-4px); } .dials .dial .thumbnail-image.dial-folder-icon svg g { transform: initial; } /* No background on folders */ .speeddial .dial-columns .folder .thumbnail>.thumbnail-image { background: none !important; } /* Hide folder flap */ .dials .dial.folder .folder-flap {display: none;}
Tabs on top/bottom have to add this four rows too:
.speeddial { margin-top: 4px !important; margin-left: -23px !important; }
Testing on latest snapshot.
Made for 72% UI and 1920x1080 with Vertical Tabs.
Tested with 82% UI and 1027x768 and still works.
Didn't test on other OS (mac/linux), so let me know if it works there
(Should be about 13 x 8 grid on 1920x1080 @ 72% UI)Moving dials also works, just a bit awkard, so I really hope to see a native function for this.
-
If I understand what do you need, just set
min-height
andmin-width
of.dials .dial .preview .thumbnail-image
to 45% (haven't tested with the code you use, but it should work)βin the default code onlymax-width
is set (45%).Edited
-
@potmeklecbohdan Exactly what I meant ^^
Still have to fixfixed this evening.folder-outline
position but I guess will be
Thanks ^^ -