Skip to content

Instantly share code, notes, and snippets.

@marcusig
Created October 26, 2021 08:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marcusig/36016cddc8b70eb3a6d85633a9378f70 to your computer and use it in GitHub Desktop.
Save marcusig/36016cddc8b70eb3a6d85633a9378f70 to your computer and use it in GitHub Desktop.
Display the thumbnails smaller. Requires adding the class 'color-only' to the Layer
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li {
box-shadow: none;
width: 11%;
}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li button span.choice-text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 80px;
padding: 3px;
border-radius: 4px;
z-index: 3;
background: #FFF;
box-shadow: 0px 5px 12px rgb(0 0 0 / 13%);
display: none;
}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li button:hover span.choice-text,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li button:active span.choice-text,
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li button:focus span.choice-text {
display: block
}
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li i.mkl-pc-thumbnail {
max-width: 100%;
max-height: 100%;
height: 28px;
margin-bottom: .2em;
}
@media (max-width: 660px) {
.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices > ul > li.color-only .choices-list li button i.mkl-pc-thumbnail {
padding-bottom: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment