ywana-core8 0.1.74 → 0.1.76

package/src/html/progress.css

@@ -1,20 +1,710 @@
+/* Enhanced Progress Components Styles */
+
+/* Keyframes for animations */
 @keyframes rotating {
-    from {
-      -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-  
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes indeterminate-rotate {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes indeterminate-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 100, 200;
+        stroke-dashoffset: -15;
+    }
+    100% {
+        stroke-dasharray: 100, 200;
+        stroke-dashoffset: -125;
+    }
+}
+
+@keyframes linear-indeterminate-primary {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@keyframes linear-indeterminate-secondary {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+@keyframes shimmer {
+    0% { background-position: -200px 0; }
+    100% { background-position: calc(200px + 100%) 0; }
+}
+
+/* Circular Progress Component */
 .circular-progress {
-    animation: rotating 2s linear infinite;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.circular-progress--small { width: 24px; height: 24px; }
+.circular-progress--medium { width: 40px; height: 40px; }
+.circular-progress--large { width: 56px; height: 56px; }
+.circular-progress--xlarge { width: 80px; height: 80px; }
+
+.circular-progress--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.circular-progress__svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: rotate(-90deg);
+}
+
+.circular-progress__background {
+    stroke: var(--divider-color, #e0e0e0);
+    opacity: 0.3;
+}
+
+.circular-progress__progress {
+    stroke: var(--primary-color, #2196f3);
+    transition: stroke-dashoffset 0.3s ease;
+}
+
+/* Color variants */
+.circular-progress--primary .circular-progress__progress { stroke: var(--primary-color, #2196f3); }
+.circular-progress--secondary .circular-progress__progress { stroke: var(--secondary-color, #ff9800); }
+.circular-progress--success .circular-progress__progress { stroke: var(--success-color, #4caf50); }
+.circular-progress--warning .circular-progress__progress { stroke: var(--warning-color, #ff9800); }
+.circular-progress--error .circular-progress__progress { stroke: var(--error-color, #f44336); }
+
+/* Indeterminate animation */
+.circular-progress--indeterminate .circular-progress__svg {
+    animation: indeterminate-rotate 1.4s linear infinite;
+}
+
+.circular-progress--indeterminate .circular-progress__progress {
+    animation: indeterminate-dash 1.4s ease-in-out infinite;
+}
+
+/* Content overlay */
+.circular-progress__content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
+
+.circular-progress__value {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-color, #333);
+    line-height: 1;
+}
+
+.circular-progress--large .circular-progress__value {
+    font-size: 0.875rem;
+}
+
+.circular-progress--xlarge .circular-progress__value {
+    font-size: 1rem;
+}
+
+.circular-progress__label {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--text-color-light, #666);
+    white-space: nowrap;
+}
+
+.circular-progress__icon {
+    color: var(--primary-color, #2196f3);
+}
+
+/* Complete state */
+.circular-progress--complete .circular-progress__progress {
+    stroke: var(--success-color, #4caf50);
+}
+
+.circular-progress--complete .circular-progress__icon {
+    color: var(--success-color, #4caf50);
+}
+
+/* Linear Progress Component */
+.linear-progress {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.linear-progress__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.linear-progress__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color, #333);
+}
+
+.linear-progress__info {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.linear-progress__value {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-color, #333);
+}
+
+.linear-progress__time {
+    font-size: 0.75rem;
+    color: var(--text-color-light, #666);
+}
+
+.linear-progress__track {
+    position: relative;
+    width: 100%;
+    background-color: var(--divider-color, #e0e0e0);
+    overflow: hidden;
+}
+
+/* Size variants */
+.linear-progress--small .linear-progress__track { height: 4px; }
+.linear-progress--medium .linear-progress__track { height: 6px; }
+.linear-progress--large .linear-progress__track { height: 8px; }
+
+/* Rounded corners */
+.linear-progress--rounded .linear-progress__track {
+    border-radius: 10px;
+}
+
+.linear-progress--rounded .linear-progress__bar,
+.linear-progress--rounded .linear-progress__buffer {
+    border-radius: 10px;
+}
+
+.linear-progress__buffer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--primary-color-light, #bbdefb);
+    opacity: 0.3;
+    transition: width 0.3s ease;
+}
+
+.linear-progress__bar {
+    position: relative;
+    height: 100%;
+    background-color: var(--primary-color, #2196f3);
+    transition: width 0.3s ease;
+    overflow: hidden;
+}
+
+/* Color variants */
+.linear-progress--primary .linear-progress__bar { background-color: var(--primary-color, #2196f3); }
+.linear-progress--secondary .linear-progress__bar { background-color: var(--secondary-color, #ff9800); }
+.linear-progress--success .linear-progress__bar { background-color: var(--success-color, #4caf50); }
+.linear-progress--warning .linear-progress__bar { background-color: var(--warning-color, #ff9800); }
+.linear-progress--error .linear-progress__bar { background-color: var(--error-color, #f44336); }
+
+/* Striped pattern */
+.linear-progress--striped .linear-progress__bar {
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+    );
+    background-size: 1rem 1rem;
+}
+
+.linear-progress--striped.linear-progress--animated .linear-progress__bar {
+    animation: shimmer 1s linear infinite;
+}
+
+/* Indeterminate animation */
+.linear-progress--indeterminate .linear-progress__bar {
+    width: 100% !important;
+    background: transparent;
+}
+
+.linear-progress__bar-primary,
+.linear-progress__bar-secondary {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    background-color: var(--primary-color, #2196f3);
+}
+
+.linear-progress--indeterminate .linear-progress__bar-primary {
+    animation: linear-indeterminate-primary 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.linear-progress--indeterminate .linear-progress__bar-secondary {
+    animation: linear-indeterminate-secondary 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation-delay: 1.15s;
+}
+
+/* Disabled state */
+.linear-progress--disabled {
+    opacity: 0.6;
+}
+
+.linear-progress--disabled .linear-progress__bar {
+    background-color: var(--divider-color, #e0e0e0);
+}
+
+/* Complete state */
+.linear-progress--complete .linear-progress__bar {
+    background-color: var(--success-color, #4caf50);
+}
+
+/* Step Progress Component */
+.step-progress {
+    display: flex;
+    align-items: flex-start;
+}
+
+.step-progress--vertical {
+    flex-direction: column;
+}
+
+.step-progress--horizontal {
+    flex-direction: row;
+    align-items: center;
+}
+
+.step-progress__step {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+
+.step-progress--vertical .step-progress__step {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+}
+
+.step-progress--horizontal .step-progress__step {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.step-progress__connector {
+    position: absolute;
+    background-color: var(--divider-color, #e0e0e0);
+    transition: background-color 0.3s ease;
+}
+
+.step-progress--horizontal .step-progress__connector {
+    top: 50%;
+    left: 100%;
+    right: -100%;
+    height: 2px;
+    transform: translateY(-50%);
+}
+
+.step-progress--vertical .step-progress__connector {
+    left: 50%;
+    top: 100%;
+    bottom: -2rem;
+    width: 2px;
+    transform: translateX(-50%);
+}
+
+.step-progress__circle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--divider-color, #e0e0e0);
+    color: var(--text-color-light, #666);
+    transition: all 0.3s ease;
+    z-index: 1;
+}
+
+/* Size variants */
+.step-progress--small .step-progress__circle {
+    width: 24px;
+    height: 24px;
+    font-size: 0.75rem;
+}
+
+.step-progress--medium .step-progress__circle {
+    width: 32px;
+    height: 32px;
+    font-size: 0.875rem;
+}
+
+.step-progress--large .step-progress__circle {
+    width: 40px;
+    height: 40px;
+    font-size: 1rem;
+}
+
+.step-progress__number {
+    font-weight: 600;
+    line-height: 1;
+}
+
+/* Step states */
+.step-progress__step--current .step-progress__circle {
+    background-color: var(--primary-color, #2196f3);
+    color: white;
+    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2);
+}
+
+.step-progress__step--completed .step-progress__circle {
+    background-color: var(--success-color, #4caf50);
+    color: white;
+}
+
+.step-progress__step--completed .step-progress__connector {
+    background-color: var(--success-color, #4caf50);
+}
+
+.step-progress__step--error .step-progress__circle {
+    background-color: var(--error-color, #f44336);
+    color: white;
+}
+
+.step-progress__step--clickable .step-progress__circle {
+    cursor: pointer;
+}
+
+.step-progress__step--clickable .step-progress__circle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.step-progress__label {
+    margin-top: 0.5rem;
+}
+
+.step-progress--vertical .step-progress__label {
+    margin-top: 0;
+    margin-left: 1rem;
+}
+
+.step-progress__title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color, #333);
+    margin-bottom: 0.25rem;
+}
+
+.step-progress__description {
+    font-size: 0.75rem;
+    color: var(--text-color-light, #666);
+    line-height: 1.4;
+}
+
+/* Color variants */
+.step-progress--primary .step-progress__step--current .step-progress__circle { background-color: var(--primary-color, #2196f3); }
+.step-progress--secondary .step-progress__step--current .step-progress__circle { background-color: var(--secondary-color, #ff9800); }
+.step-progress--success .step-progress__step--current .step-progress__circle { background-color: var(--success-color, #4caf50); }
+.step-progress--warning .step-progress__step--current .step-progress__circle { background-color: var(--warning-color, #ff9800); }
+.step-progress--error .step-progress__step--current .step-progress__circle { background-color: var(--error-color, #f44336); }
+
+/* Radial Progress Component */
+.radial-progress {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.radial-progress__svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: rotate(-90deg);
+}
+
+.radial-progress__background {
+    opacity: 0.2;
+}
+
+.radial-progress__progress {
+    stroke: var(--primary-color, #2196f3);
+    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Color variants */
+.radial-progress--primary .radial-progress__progress { stroke: var(--primary-color, #2196f3); }
+.radial-progress--secondary .radial-progress__progress { stroke: var(--secondary-color, #ff9800); }
+.radial-progress--success .radial-progress__progress { stroke: var(--success-color, #4caf50); }
+.radial-progress--warning .radial-progress__progress { stroke: var(--warning-color, #ff9800); }
+.radial-progress--error .radial-progress__progress { stroke: var(--error-color, #f44336); }
+
+/* Gradient effect */
+.radial-progress--gradient .radial-progress__progress {
+    stroke: url(#gradient-primary);
+}
+
+.radial-progress__content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    text-align: center;
+}
+
+.radial-progress__value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-color, #333);
+    line-height: 1;
+    margin-bottom: 0.25rem;
+}
+
+.radial-progress__label {
+    font-size: 0.875rem;
+    color: var(--text-color-light, #666);
+    font-weight: 500;
+}
+
+.radial-progress__icon {
+    margin-bottom: 0.5rem;
+    color: var(--primary-color, #2196f3);
+}
+
+/* Multi Progress Component */
+.multi-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.multi-progress--small { gap: 0.75rem; }
+.multi-progress--medium { gap: 1rem; }
+.multi-progress--large { gap: 1.25rem; }
+
+.multi-progress__item {
+    display: flex;
+    flex-direction: column;
+}
+
+.multi-progress__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.multi-progress__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-color, #333);
+}
+
+.multi-progress__value {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-color, #333);
+}
+
+.multi-progress__bar {
+    margin: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .step-progress--horizontal {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .step-progress--horizontal .step-progress__step {
+        flex-direction: row;
+        align-items: center;
+        text-align: left;
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+
+    .step-progress--horizontal .step-progress__connector {
+        display: none;
+    }
+
+    .step-progress--horizontal .step-progress__label {
+        margin-top: 0;
+        margin-left: 1rem;
+    }
+
+    .radial-progress__value {
+        font-size: 1.25rem;
+    }
+
+    .linear-progress__header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.25rem;
+    }
+
+    .linear-progress__info {
+        gap: 0.5rem;
+    }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+    .circular-progress__background,
+    .linear-progress__track,
+    .step-progress__connector {
+        background-color: var(--divider-color-dark, #424242);
+        stroke: var(--divider-color-dark, #424242);
+    }
+
+    .circular-progress__value,
+    .linear-progress__label,
+    .linear-progress__value,
+    .step-progress__title,
+    .radial-progress__value,
+    .multi-progress__label,
+    .multi-progress__value {
+        color: var(--text-color-dark, #ffffff);
+    }
+
+    .linear-progress__time,
+    .step-progress__description,
+    .radial-progress__label {
+        color: var(--text-color-light-dark, #cccccc);
+    }
+
+    .step-progress__circle {
+        background-color: var(--divider-color-dark, #424242);
+        color: var(--text-color-light-dark, #cccccc);
+    }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+    .circular-progress__progress,
+    .linear-progress__bar,
+    .radial-progress__progress {
+        stroke-width: 3px;
+    }
+
+    .step-progress__connector {
+        height: 3px;
+        width: 3px;
+    }
+
+    .step-progress__circle {
+        border: 2px solid currentColor;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .circular-progress--animated,
+    .linear-progress--animated,
+    .step-progress--animated,
+    .radial-progress--animated,
+    .multi-progress--animated {
+        animation: none;
+        transition: none;
+    }
+
+    .circular-progress__progress,
+    .linear-progress__bar,
+    .linear-progress__buffer,
+    .radial-progress__progress,
+    .step-progress__circle,
+    .step-progress__connector {
+        transition: none;
+    }
+
+    .step-progress__step--clickable .step-progress__circle:hover {
+        transform: none;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .circular-progress,
+    .linear-progress,
+    .step-progress,
+    .radial-progress,
+    .multi-progress {
+        break-inside: avoid;
+    }
+
+    .circular-progress--indeterminate,
+    .linear-progress--indeterminate {
+        display: none;
+    }
+
+    .circular-progress__progress,
+    .linear-progress__bar,
+    .radial-progress__progress {
+        stroke: black !important;
+        background-color: black !important;
+    }
+
+    .circular-progress__value,
+    .linear-progress__label,
+    .linear-progress__value,
+    .step-progress__title,
+    .radial-progress__value,
+    .multi-progress__label,
+    .multi-progress__value {
+        color: black !important;
+    }
 }