Minimalistic round speeddials



  • I writed this styles specialy for 3x2 grid, becouse of I change speeddials very rarely.
    If someone interested I can fix styles for dinamic sizes and counts of bookmarks.

    0_1505083568526_2.jpg

    
    #browser .startpage .startpage-content .sdwrapper {
    	overflow-y: hidden;
    }
    
    #browser .speeddial {
    	margin: 0;
    	height: calc(100vh - 114px);
    	position: relative;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    #browser .sdwrapper .dial-columns {
    	max-width: 1400px;
    	width: 80% !important;
    	height: 90% !important;
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	align-items: flex-start;
    	align-content: space-around;
    }
    
    #browser .speeddial .dial {
    	position: relative;
    	transform: none !important;
    	width: 33% !important;
    	height: auto !important;
    	margin: 0;
    	display: flex;
    	align-items: center;
    }
    
    #browser .dials .dial .thumbnail {
    	max-width: 250px;
    	width: calc((100vh - 114px) * 0.9 / 2.14);
    	max-height: 250px;
    	height: calc((100vh - 114px) * 0.9 / 2.14);
    	border-radius: 50%;
    }
    
    #browser .dials .dial .thumbnail:hover {
    	box-shadow: 0 14px 28px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.2);
    	cursor: pointer;
    }
    
    #browser .dials .dial .thumbnail > .thumbnail-image {
    	border-radius: 50%;
    	box-shadow: none !important;
    	background-color: transparent;
    }
    
    #browser .dials .dial:focus .thumbnail > .thumbnail-image {
    	border: none;
    }
    
    #browser .dials .dial:not(.dragging):hover .thumbnail-image {
    	transition: none;
    	transform: none;
    }
    
    #browser .dials .dial .close,
    #browser .dials .dial .update-thumbnail,
    #browser .dials .dial .set-custom-thumbnail {
    	display: none;
    }
    
    


  • Thanks, this looks really nice. I added some code to make folders work:
    0_1506074702118_2017-09-22 12_04_06-.png

    .startpage .dial .thumbnail-image .preview .thumbnail-image {
    	width: 250px !important;
    	height: 125px !important;
    
    }
    
    .dials .dial .preview {
    	clip-path: circle(125px at center) !important;
    }
    
    .dials .dial .thumbnail > .thumbnail-image > span > svg {
    	Display: none !important;
    }
    
    .dials .dial .thumbnail > .thumbnail-image {
    	overflow: hidden !important;
    }
    

Log in to reply
 

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