|
|
| 第1行： |
第1行： |
| <includeonly> | | <includeonly> |
| <style> | | <style> |
| .avatar-frame {
| |
| position: relative;
| |
| display: inline-block;
| |
| vertical-align: top;
| |
| border: 3px solid #ccc;
| |
| border-radius: 5px;
| |
| overflow: hidden;
| |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1);
| |
| background: #f5f5f5;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease;
| |
| cursor: grab;
| |
| margin: 2px;
| |
| }
| |
|
| |
| .avatar-frame:active {
| |
| cursor: grabbing;
| |
| }
| |
|
| |
| .avatar-frame.dragging {
| |
| opacity: 0.5;
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| .avatar-frame:hover {
| |
| transform: scale(1.05);
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2);
| |
| z-index: 10;
| |
| }
| |
|
| |
| .avatar-frame img {
| |
| display: block;
| |
| width: 100px;
| |
| height: 100px;
| |
| object-fit: cover;
| |
| pointer-events: none;
| |
| opacity: 1 !important;
| |
| }
| |
|
| |
| .avatar-name {
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: 0;
| |
| padding: 2px 8px;
| |
| color: white;
| |
| font-size: 12px;
| |
| font-weight: bold;
| |
| text-shadow: 0 0 2px black, 0 0 2px black;
| |
| white-space: nowrap;
| |
| max-width: 100%;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| border-top-right-radius: 3px;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .tier-row { | | .tier-row { |
| position: relative; | | position: relative; |