-test- Yet another speedial mod (72/82% UI)



  • 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: enable maximum 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 πŸ˜›

    0_1547191297520_sd13b.png 0_1547191315890_sd8b.png
    (Should be about 13 x 8 grid on 1920x1080 @ 72% UI)



  • If I understand what do you need, just set min-height and min-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 only max-width is set (45%).

    Edited



  • @potmeklecbohdan Exactly what I meant ^^
    Still have to fix .folder-outline position but I guess will be fixed this evening πŸ˜›
    Thanks ^^


 

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