.minecraft-ops-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
} .mom-layout-grid {
justify-content: flex-start;
}
.mom-layout-grid .mom-op-item {
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.mom-layout-grid .mom-op-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
} .mom-layout-list {
flex-direction: column;
}
.mom-layout-list .mom-op-item {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 8px;
padding: 15px;
margin-bottom: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mom-layout-list .mom-skin-display {
margin-right: 20px;
flex-shrink: 0;
}
.mom-layout-list .mom-op-info {
display: flex;
align-items: center;
flex-grow: 1;
}
.mom-layout-list .mom-avatar {
margin-right: 15px;
}
.mom-layout-list .mom-text-info {
flex-grow: 1;
} .mom-layout-cards .mom-op-item {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 16px;
padding: 25px;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.mom-layout-cards .mom-op-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.1);
pointer-events: none;
}
.mom-layout-cards .mom-op-info {
position: relative;
z-index: 1;
}
.mom-layout-cards .mom-username {
color: white;
margin-bottom: 8px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mom-layout-cards .mom-role,
.mom-layout-cards .mom-join-date {
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
} .mom-skin-display {
margin-bottom: 15px;
}
.mom-skin-2d-preview {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 3px solid #ddd;
border-radius: 10px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.mom-layout-cards .mom-skin-2d-preview {
border-color: rgba(255,255,255,0.3);
}
.mom-skin-2d-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%);
pointer-events: none;
} .mom-avatar {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.mom-avatar img {
border-radius: 0;
border: none;
box-shadow: none;
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.mom-layout-cards .mom-avatar img {
border: none;
} .mom-text-info {
text-align: center;
}
.mom-layout-list .mom-text-info {
text-align: left;
}
.mom-username {
font-size: 1.2em;
font-weight: bold;
margin: 0 0 8px 0;
color: #333;
}
.mom-layout-cards .mom-username {
color: white;
}
.mom-role {
font-size: 0.95em;
color: #666;
margin-bottom: 5px;
font-weight: 500;
}
.mom-join-date {
font-size: 0.85em;
color: #888;
}
.mom-description {
font-size: 0.9em;
color: #555;
line-height: 1.4;
margin-top: 8px;
padding: 8px 12px;
background: rgba(0,0,0,0.03);
border-radius: 6px;
border-left: 3px solid #007cba;
}
.mom-layout-cards .mom-description {
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.1);
border-left-color: rgba(255,255,255,0.5);
}
.mom-layout-grid .mom-description {
text-align: left;
margin-top: 10px;
}
.mom-layout-list .mom-description {
margin-top: 8px;
max-width: 400px;
} .mom-no-ops {
text-align: center;
padding: 40px 20px;
color: #666;
background: #f9f9f9;
border-radius: 12px;
border: 2px dashed #ddd;
font-size: 1.1em;
}
.mom-no-ops:before {
content: "🎮";
font-size: 48px;
display: block;
margin-bottom: 15px;
} @media (max-width: 768px) {
.minecraft-ops-container {
gap: 15px;
}
.mom-layout-grid .mom-op-item {
width: calc(50% - 15px) !important;
}
.mom-layout-list .mom-op-item {
flex-direction: column;
text-align: center;
}
.mom-layout-list .mom-skin-display {
margin-right: 0;
margin-bottom: 15px;
}
.mom-layout-list .mom-op-info {
flex-direction: column;
}
.mom-layout-list .mom-avatar {
margin-right: 0;
margin-bottom: 10px;
}
.mom-layout-list .mom-text-info {
text-align: center;
}
}
@media (max-width: 480px) {
.mom-layout-grid .mom-op-item {
width: 100% !important;
}
.mom-op-item {
padding: 15px !important;
}
} @keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.mom-op-item {
animation: fadeIn 0.5s ease-out;
} .mom-skin-2d-preview {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
} .mom-op-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .mom-layout-grid .mom-op-info {
display: flex;
flex-direction: column;
align-items: center;
}
.mom-layout-grid .mom-avatar {
margin-bottom: 10px;
} .mom-layout-list .mom-username {
margin-bottom: 5px;
}
.mom-layout-list .mom-role {
margin-bottom: 3px;
}