MediaWiki:Gadget-ModelViewer.css: Difference between revisionsGive feedback
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 16: | Line 16: | ||
height: auto; | height: auto; | ||
filter: | filter: brightness(.65); | ||
user-select: none; | user-select: none; | ||
| Line 24: | Line 23: | ||
.model-placeholder:hover img { | .model-placeholder:hover img { | ||
filter: | filter: brightness(.8); | ||
} | } | ||
| Line 54: | Line 53: | ||
background-color: rgba(0,0,0,.45); | background-color: rgba(0,0,0,.45); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
| Line 91: | Line 88: | ||
border-radius: 999px; | border-radius: 999px; | ||
pointer-events: none; | pointer-events: none; | ||
Latest revision as of 22:17, 14 September 2026
.model-placeholder {
position: relative;
display: inline-block;
overflow: hidden;
}
.model-placeholder {
position: relative;
display: inline-block;
overflow: hidden;
}
.model-placeholder img {
display: block;
width: 100%;
height: auto;
filter: brightness(.65);
user-select: none;
pointer-events: none;
}
.model-placeholder:hover img {
filter: brightness(.8);
}
.model-load-button {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
border: 0;
padding: 0;
margin: 0;
background: transparent;
cursor: pointer;
appearance: none;
}
.model-load-button::before {
content: "";
width: 64px;
height: 64px;
border-radius: 50%;
background-color: rgba(0,0,0,.45);
background-repeat: no-repeat;
background-position: center;
background-size: 48px 48px;
background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9443 19.5566C28.0598 19.5789 31.9972 22.3935 34.8945 25.1807C36.3458 26.5767 37.5413 27.9714 38.374 29.0166C38.7904 29.5393 39.117 29.9742 39.3389 30.2793C39.4498 30.4318 39.5345 30.5519 39.5918 30.6338C39.6203 30.6746 39.6416 30.7063 39.6562 30.7275C39.6635 30.7381 39.6691 30.7465 39.6729 30.752C39.6747 30.7547 39.6768 30.7564 39.6777 30.7578L39.6787 30.7598L39.7168 30.8164L39.6777 30.873L39.3398 31.3604V31.3623C38.5645 32.4514 36.5139 35.1735 33.7627 37.6299C31.0147 40.0835 27.5496 42.2871 23.9443 42.3066H23.9414L23.5684 42.2998H23.5664C19.6017 42.1464 15.8074 39.2774 13.0156 36.4697C11.6171 35.0633 10.4647 33.6669 9.66211 32.6221C9.26075 32.0996 8.94626 31.6646 8.73242 31.3604C8.62567 31.2084 8.54345 31.0894 8.48828 31.0078C8.46067 30.967 8.43986 30.9352 8.42578 30.9141C8.41878 30.9035 8.41372 30.8951 8.41016 30.8896C8.40847 30.8871 8.40714 30.8851 8.40625 30.8838L8.40527 30.8818H8.4043L8.36914 30.8271L8.4043 30.7725C8.42048 30.7477 10.2564 27.9376 13.1074 25.1377C15.9541 22.3421 19.8357 19.5345 23.9443 19.5566ZM23.9297 22.1387C21.098 22.1237 18.0752 24.0105 15.4258 26.4912L14.9004 26.9951C13.5791 28.2945 12.4853 29.6048 11.7207 30.5938C11.659 30.6736 11.6002 30.7512 11.543 30.8271C11.6082 30.9141 11.675 31.0044 11.7461 31.0967C12.525 32.1075 13.6352 33.4468 14.9697 34.7744C16.372 36.1695 17.8829 37.412 19.4092 38.3037C20.9362 39.1958 22.473 39.7325 23.9297 39.7246H23.9307C25.4452 39.7164 27.0273 39.1625 28.5869 38.2598C30.1459 37.3574 31.6766 36.1097 33.0879 34.7236C34.4361 33.3995 35.5562 32.068 36.3398 31.0635C36.4019 30.9839 36.4576 30.9078 36.5146 30.832C36.4623 30.7643 36.4108 30.6957 36.3545 30.625C35.5713 29.6419 34.4521 28.3384 33.1045 27.042C30.282 24.3268 26.9802 22.1551 23.9297 22.1387Z' fill='white' stroke='white' stroke-width='0.2'/%3E%3Cpath d='M23.8555 25.5723C26.8122 25.5723 29.2088 27.9684 29.209 30.9248V30.9277L29.2021 31.1982V31.2012C29.0583 34.0293 26.7198 36.2783 23.8555 36.2783C20.9912 36.2783 18.6526 34.0293 18.5088 31.2012V31.1982L18.502 30.9277V30.9248C18.5022 27.9684 20.8987 25.5723 23.8555 25.5723ZM23.8555 28.585C22.5632 28.585 21.5158 29.6327 21.5156 30.9248L21.5273 31.165L21.5596 31.3828C21.7724 32.4559 22.7199 33.2646 23.8555 33.2646C25.1462 33.2646 26.1927 32.2198 26.1953 30.9297L26.1836 30.6855L26.1514 30.4678C25.9387 29.3945 24.9913 28.585 23.8555 28.585Z' fill='white' stroke='white' stroke-width='0.2'/%3E%3Cpath d='M2.92848 20.0499L14.0014 24.9499L11.8655 28.2193L2.92848 20.0499Z' fill='white'/%3E%3Cpath d='M45.1575 20.0499L34.0845 24.9499L36.2204 28.2193L45.1575 20.0499Z' fill='white'/%3E%3Cpath d='M24.0402 1.78125L27.1635 20.8929H20.9168L24.0402 1.78125Z' fill='white'/%3E%3Cpath d='M9.06805 11.5064L18.8702 21.7514L15.0988 24.3383L9.06805 11.5064Z' fill='white'/%3E%3Cpath d='M39.0179 11.5064L29.2157 21.7514L32.9871 24.3383L39.0179 11.5064Z' fill='white'/%3E%3Cpath d='M48 30.9302L37.0237 32.7237L37.0237 29.1368L48 30.9302Z' fill='white'/%3E%3Cpath d='M2.46976e-08 30.9291L10.9763 29.1357L10.9763 32.7226L2.46976e-08 30.9291Z' fill='white'/%3E%3C/svg%3E%0A");
}
/* Model hint */
.model-hint {
position: absolute;
left: 50%;
bottom: 75%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 5px;
max-width: calc(100% - 16px);
padding: 4px 8px;
font-size: 11px;
line-height: 1;
color: #fff;
background-color: rgba(0,0,0,.45);
border-radius: 999px;
pointer-events: none;
box-sizing: border-box;
white-space: nowrap;
}
/* Model name */
.model-name {
display: block;
margin-top: 4px;
text-align: center;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: var(--color-base);
}
/* 3D viewer */
.model-viewer-wrap {
display: inline-block;
}
.model-viewer-container {
position: relative;
display: inline-block;
resize: both;
overflow: hidden;
min-width: 250px;
min-height: 250px;
}
.model-viewer-container model-viewer {
display: block;
width: 100%;
height: 100%;
}
.model-viewer-container{
border: 1px solid var(--border-color-base);
box-shadow: 0 8px 24px rgba(0,0,0,.3);
}