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:
.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; }
-
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 dialdiv.dials.speeddial > div > div:nth-child(1)
, and position it as needed. -