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.


    #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;

  • Moderator

    Topic moved.

  • Do any of you by any chance know how to adjust the space between thumbnails? Both width and height of free space.

  • @kein If they were organised in a table-like fashion, with proper rows / columns it would be easier. Unfortunately, it seems as if the dials are each positioned exactly where they need to be. So if you wanted to add a bit of extra margin to any of them, you would need to re-position all of them.

    It's not a particularly difficult task, but it would be tedious. You just need to set the transform: translate3d(0px, 0px, 0px); rule on each nth dial div.dials.speeddial > div > div:nth-child(1), and position it as needed.


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