| ebody { | |
| font-family: 'Quicksand', sans-serif; | |
| background: linear-gradient(135deg, #FF69B4 0%, #800080 100%); | |
| color: #FFFFFF; | |
| margin: 0; | |
| padding: 0; | |
| font-size: 16px; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| margin: 20px; | |
| background-color: rgba(28, 14, 36, 0.95); | |
| padding: 20px; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 20px rgba(255, 105, 180, 0.4); | |
| border: 1px solid rgba(255, 105, 180, 0.4); | |
| outline: 1px solid rgba(255, 105, 180, 0.7); | |
| outline-offset: -1px; | |
| position: relative; | |
| backdrop-filter: blur(10px); | |
| } | |
| .container::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| border: 1px solid rgba(255, 105, 180, 0.98); | |
| border-radius: 12px; | |
| pointer-events: none; | |
| animation: borderGlow 2s ease-in-out infinite; | |
| } | |
| @keyframes borderGlow { | |
| 0% { | |
| box-shadow: 0 0 5px rgba(255, 105, 180, 0.98); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(255, 105, 180, 0.98); | |
| } | |
| 100% { | |
| box-shadow: 0 0 5px rgba(255, 105, 180, 0.98); | |
| } | |
| } | |
| .header h1 { | |
| font-size: 28px; | |
| color: #FF69B4; | |
| margin: 0 0 20px 0; | |
| text-shadow: 0 0 15px rgba(255, 105, 180, 0.8); | |
| letter-spacing: 1px; | |
| } | |
| .update-section { | |
| margin-top: 30px; | |
| } | |
| .update-section h2, h2 { | |
| font-size: 24px; | |
| color: #FF69B4; | |
| text-shadow: 0 0 15px rgba(255, 105, 180, 0.8); | |
| letter-spacing: 0.5px; | |
| } | |
| .update-section p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| color: #FFE1FF; | |
| } | |
| .info p { | |
| color: #FFE1FF; | |
| line-height: 1.6; | |
| font-size: 16px; | |
| } | |
| .info img { | |
| width: 100%; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| box-shadow: 0 0 30px rgba(255, 105, 180, 0.5); | |
| border: 1px solid rgba(255, 105, 180, 0.4); | |
| outline: 1px solid rgba(255, 105, 180, 0.7); | |
| outline-offset: -1px; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .info img:hover { | |
| transform: scale(1.01); | |
| box-shadow: 0 0 40px rgba(255, 105, 180, 0.6); | |
| } | |
| a { | |
| color: #00FFEE; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| a:hover { | |
| color: #FF1493; | |
| } | |
| .button { | |
| display: inline-block; | |
| background: linear-gradient(45deg, rgba(255, 105, 180, 0.9), rgba(128, 0, 128, 0.9)); | |
| color: #FFFFFF; | |
| padding: 12px 24px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 105, 180, 0.4); | |
| } | |
| .button:hover { | |
| background: linear-gradient(45deg, rgba(255, 105, 180, 1), rgba(128, 0, 128, 1)); | |
| box-shadow: 0 0 20px rgba(255, 105, 180, 0.7); | |
| transform: translateY(-2px); | |
| } | |
| pre { | |
| background-color: rgba(28, 14, 36, 0.95); | |
| padding: 15px; | |
| border-radius: 5px; | |
| overflow-x: auto; | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| outline: 1px solid rgba(255, 20, 147, 0.6); | |
| outline-offset: -1px; | |
| } | |
| code { | |
| font-family: 'Courier New', monospace; | |
| color: #FFE1FF; | |
| } | |
| .benchmark-container { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .benchmark-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| border: 1px solid rgba(255, 20, 147, 0.98); | |
| border-radius: 12px; | |
| pointer-events: none; | |
| animation: borderGlow 2s ease-in-out infinite; | |
| } | |
| .benchmark-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 15px; | |
| } | |
| .metric-box { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .metric-box:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3); | |
| } | |
| .metric-box .label { | |
| color: #00FFEE; | |
| font-size: 14px; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| } | |
| .metric-box .value { | |
| color: #FFE1FF; | |
| font-size: 18px; | |
| font-weight: 600; | |
| text-shadow: 0 0 5px rgba(255, 20, 147, 0.5); | |
| } | |
| .metrics-section { | |
| margin-bottom: 30px; | |
| } | |
| .metrics-section details { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .metrics-section summary { | |
| color: #FF1493; | |
| font-size: 20px; | |
| cursor: pointer; | |
| text-shadow: 0 0 5px rgba(255, 20, 147, 0.3); | |
| outline: none; | |
| padding: 5px 0; | |
| } | |
| .metrics-section summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .core-metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .progress-metrics { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .progress-metric { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 15px; | |
| transition: transform 0.3s ease; | |
| } | |
| .progress-metric:hover { | |
| transform: translateY(-2px); | |
| } | |
| .progress-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| color: #00FFEE; | |
| font-size: 14px; | |
| } | |
| .progress-value { | |
| color: #FFE1FF; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 20, 147, 0.15); | |
| border-radius: 4px; | |
| position: relative; | |
| margin: 10px 0; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #FF69B4 0%, #800080 100%); | |
| border-radius: 4px; | |
| transition: width 1s ease-in-out; | |
| box-shadow: 0 0 15px rgba(255, 105, 180, 0.4); | |
| } | |
| .progress-bar.split { | |
| display: flex; | |
| justify-content: center; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 20, 147, 0.15); | |
| overflow: visible; | |
| } | |
| .progress-fill-left { | |
| height: 100%; | |
| position: absolute; | |
| right: 50%; | |
| background: linear-gradient(90deg, #FF69B4 30%, rgba(255, 105, 180, 0.5) 100%); | |
| border-radius: 4px 0 0 4px; | |
| transition: width 0.3s ease-in-out; | |
| } | |
| .progress-fill-right { | |
| height: 100%; | |
| position: absolute; | |
| left: 50%; | |
| background: linear-gradient(90deg, rgba(128, 0, 128, 0.5) 0%, #800080 70%); | |
| border-radius: 0 4px 4px 0; | |
| transition: width 0.3s ease-in-out; | |
| } | |
| .progress-metric.split .progress-bar::before, | |
| .progress-metric.split .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| width: 2px; | |
| height: 20px; | |
| background: rgba(255, 255, 255, 0.7); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 2; | |
| box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); | |
| } | |
| .progress-metric.split .progress-bar::before { | |
| left: 0; | |
| } | |
| .progress-metric.split .progress-bar::after { | |
| right: 0; | |
| } | |
| .progress-metric.split:hover .progress-fill-left { | |
| box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); | |
| } | |
| .progress-metric.split:hover .progress-fill-right { | |
| box-shadow: 0 0 15px rgba(75, 0, 130, 0.5); | |
| } | |
| .progress-metric.split { | |
| padding: 12px 15px; | |
| } | |
| .progress-metric.split .progress-label { | |
| margin-bottom: 8px; | |
| gap: 12px; | |
| } | |
| .progress-metric.split .progress-label span:first-child, | |
| .progress-metric.split .progress-label span:last-child { | |
| flex: 0 0 80px; | |
| font-size: 14px; | |
| } | |
| .progress-metric.split .progress-value { | |
| font-weight: 600; | |
| text-shadow: 0 0 5px rgba(255, 20, 147, 0.3); | |
| font-size: 14px; | |
| min-width: 60px; | |
| text-align: center; | |
| } | |
| .progress-metric:hover .progress-fill-center { | |
| box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); | |
| } | |
| .progress-label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 4px; | |
| color: #00FFEE; | |
| font-size: 14px; | |
| } | |
| .progress-metric:not(.split) .progress-label { | |
| gap: 12px; | |
| } | |
| .progress-metric:not(.split) .progress-label span { | |
| flex: 0 0 auto; | |
| } | |
| .progress-metric:not(.split) .progress-value { | |
| color: #FFE1FF; | |
| } | |
| .progress-metric.split .progress-label { | |
| gap: 20px; | |
| } | |
| .progress-metric.split .progress-label span:first-child, | |
| .progress-metric.split .progress-label span:last-child { | |
| flex: 0 0 80px; | |
| } | |
| .progress-metric.split .progress-label span:first-child { | |
| text-align: right; | |
| } | |
| .progress-metric.split .progress-label span:last-child { | |
| text-align: left; | |
| } | |
| .progress-metric.split .progress-value { | |
| color: #FFE1FF; | |
| flex: 0 0 60px; | |
| text-align: center; | |
| } | |
| .progress-metric:hover .progress-fill { | |
| box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); | |
| } | |
| .progress-metric:hover .progress-fill-center { | |
| box-shadow: 0 0 15px rgba(75, 0, 130, 0.5); | |
| } | |
| .info-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| } | |
| .creator-section { | |
| margin: 20px 0; | |
| } | |
| .creator-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 10px 15px; | |
| } | |
| .creator-label { | |
| color: #FFE1FF; | |
| font-size: 14px; | |
| margin-right: 8px; | |
| } | |
| .creator-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| color: #00FFEE; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .creator-name { | |
| font-weight: 600; | |
| } | |
| .creator-arrow { | |
| font-size: 16px; | |
| transition: transform 0.3s ease; | |
| } | |
| .creator-link:hover { | |
| color: #FF1493; | |
| } | |
| .creator-link:hover .creator-arrow { | |
| transform: translateX(3px); | |
| } | |
| .model-info { | |
| margin-top: 30px; | |
| } | |
| .name-legend { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| } | |
| .name-legend h3 { | |
| color: #FF1493; | |
| font-size: 18px; | |
| margin: 0 0 15px 0; | |
| } | |
| .legend-grid { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| } | |
| .legend-key { | |
| color: #00FFEE; | |
| font-weight: 600; | |
| min-width: 80px; | |
| } | |
| .legend-value { | |
| color: #FFE1FF; | |
| } | |
| .model-description { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 20px; | |
| } | |
| .model-description p { | |
| margin: 0 0 15px 0; | |
| line-height: 1.6; | |
| } | |
| .model-description p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .section-container { | |
| margin: 40px 0; | |
| } | |
| .info-card { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .info-header { | |
| background: rgba(255, 20, 147, 0.1); | |
| padding: 20px; | |
| border-bottom: 1px solid rgba(255, 20, 147, 0.3); | |
| } | |
| .info-header h3 { | |
| color: #FF1493; | |
| margin: 0 0 10px 0; | |
| font-size: 20px; | |
| text-shadow: 0 0 5px rgba(255, 20, 147, 0.3); | |
| } | |
| .model-tags { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .model-tag { | |
| background: rgba(0, 255, 238, 0.1); | |
| color: #00FFEE; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| border: 1px solid rgba(0, 255, 238, 0.2); | |
| } | |
| .model-composition { | |
| padding: 20px; | |
| border-bottom: 1px solid rgba(255, 20, 147, 0.3); | |
| } | |
| .model-composition h4 { | |
| color: #FF1493; | |
| margin: 0 0 15px 0; | |
| font-size: 16px; | |
| } | |
| .composition-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .composition-list li { | |
| color: #FFE1FF; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| } | |
| .model-component { | |
| color: #00FFEE; | |
| font-weight: 500; | |
| min-width: 120px; | |
| } | |
| .template-card { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 15px; | |
| } | |
| .template-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .template-icon { | |
| width: 24px; | |
| height: 24px; | |
| opacity: 0.8; | |
| } | |
| .template-content { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| } | |
| .template-link { | |
| color: #00FFEE; | |
| text-decoration: none; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .template-author { | |
| color: rgba(255, 225, 255, 0.7); | |
| font-size: 14px; | |
| } | |
| .quantized-container { | |
| display: grid; | |
| gap: 20px; | |
| } | |
| .quantized-section { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 20px; | |
| } | |
| .quantized-section h3 { | |
| color: #FF1493; | |
| font-size: 18px; | |
| margin: 0 0 15px 0; | |
| } | |
| .quantized-items { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .quantized-item { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| } | |
| .quantized-item .author { | |
| color: rgba(255, 225, 255, 0.7); | |
| min-width: 100px; | |
| } | |
| .multi-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .separator { | |
| color: rgba(255, 225, 255, 0.5); | |
| } | |
| .config-container { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .config-header { | |
| background: rgba(255, 20, 147, 0.1); | |
| padding: 15px 20px; | |
| border-bottom: 1px solid rgba(255, 20, 147, 0.3); | |
| } | |
| .model-name { | |
| color: #FF1493; | |
| font-weight: 600; | |
| } | |
| .config-content { | |
| padding: 20px; | |
| } | |
| .config-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| margin-bottom: 15px; | |
| } | |
| .config-label { | |
| color: #00FFEE; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .config-value { | |
| color: #FFE1FF; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .config-models { | |
| margin-top: 20px; | |
| } | |
| .model-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 10px 0 0 0; | |
| } | |
| .model-list li { | |
| color: #FFE1FF; | |
| font-family: 'Courier New', monospace; | |
| padding: 5px 0; | |
| padding-left: 20px; | |
| position: relative; | |
| } | |
| .model-list li::before { | |
| content: '-'; | |
| position: absolute; | |
| left: 0; | |
| color: #00FFEE; | |
| } | |
| .link-arrow { | |
| display: inline-block; | |
| transition: transform 0.3s ease; | |
| } | |
| a:hover .link-arrow { | |
| transform: translateX(3px); | |
| } | |
| .benchmark-notification { | |
| background: rgba(255, 20, 147, 0.15); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| padding: 12px; | |
| animation: glowPulse 2s infinite; | |
| } | |
| .notification-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| text-align: center; | |
| } | |
| .notification-icon { | |
| font-size: 20px; | |
| } | |
| .notification-text { | |
| color: #FFE1FF; | |
| font-size: 16px; | |
| font-weight: 500; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .benchmark-link { | |
| color: #00FFEE; | |
| text-decoration: none; | |
| font-size: 14px; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 255, 238, 0.3); | |
| } | |
| .benchmark-link:hover { | |
| background: rgba(0, 255, 238, 0.1); | |
| border-color: rgba(0, 255, 238, 0.5); | |
| color: #00FFEE; | |
| text-shadow: 0 0 5px rgba(0, 255, 238, 0.5); | |
| } | |
| @keyframes glowPulse { | |
| 0% { | |
| box-shadow: 0 0 5px rgba(255, 20, 147, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); | |
| } | |
| 100% { | |
| box-shadow: 0 0 5px rgba(255, 20, 147, 0.3); | |
| } | |
| } | |
| .review-card { | |
| background: rgba(28, 14, 36, 0.95); | |
| border: 1px solid rgba(255, 20, 147, 0.3); | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .review-card:last-child { | |
| margin-bottom: 0; | |
| } | |