@jjlmoya/utils-diy 1.9.0 → 1.11.0

package/src/tool/stairCalculator/component.astro

@@ -309,483 +309,3 @@ const t = (ui ?? {}) as StairCalculatorUI;
   updateCalculations();
 </script>
 
-<style>
-  :root {
-    --sc-primary: #6366f1;
-    --sc-primary-dark: #4f46e5;
-    --sc-primary-light: #818cf8;
-    --sc-neutral: #1e293b;
-    --sc-neutral-light: #64748b;
-    --sc-border: #e2e8f0;
-    --sc-bg-light: #f8fafc;
-    --sc-bg-lighter: #f1f5f9;
-    --sc-bg: #fff;
-  }
-
-  :global(.theme-dark) {
-    --sc-primary: #818cf8;
-    --sc-primary-dark: #6366f1;
-    --sc-neutral: #f1f5f9;
-    --sc-neutral-light: #9ca3af;
-    --sc-border: rgba(255, 255, 255, 0.1);
-    --sc-bg-light: rgba(255, 255, 255, 0.04);
-    --sc-bg-lighter: rgba(255, 255, 255, 0.02);
-    --sc-bg: rgba(255, 255, 255, 0.01);
-  }
-
-  .sc-root {
-    width: 100%;
-    max-width: 1100px;
-    margin: 1.5rem auto;
-    padding: 0 1rem;
-    color: var(--sc-neutral);
-  }
-
-  .sc-card {
-    background: var(--sc-bg);
-    border-radius: 2rem;
-    overflow: hidden;
-    display: grid;
-    grid-template-columns: 350px 1fr;
-    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--sc-border);
-  }
-
-  .sc-sidebar {
-    background: var(--sc-bg-light);
-    padding: 1.5rem;
-    border-right: 1px solid var(--sc-border);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .sc-section h3 {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--sc-primary);
-    margin-bottom: 1rem;
-    font-weight: 800;
-  }
-
-  .sc-main {
-    padding: 1.5rem 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    background: var(--sc-bg);
-  }
-
-  .sc-results-header {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1rem;
-  }
-
-  .sc-stat-box {
-    background: rgba(255, 255, 255, 0.5);
-    padding: 0.75rem 0.5rem;
-    border-radius: 1.25rem;
-    text-align: center;
-    border: 1px solid var(--sc-border);
-  }
-
-  :global(.theme-dark) .sc-stat-box {
-    background: rgba(255, 255, 255, 0.04);
-  }
-
-  .sc-stat-label {
-    display: block;
-    font-size: 0.6rem;
-    text-transform: uppercase;
-    color: var(--sc-neutral-light);
-    margin-bottom: 0.25rem;
-    font-weight: 700;
-  }
-
-  .sc-stat-value {
-    font-size: 1.5rem;
-    font-weight: 800;
-    color: var(--sc-neutral);
-  }
-
-  .sc-stat-unit {
-    font-size: 0.75rem;
-    color: var(--sc-neutral-light);
-  }
-
-  .sc-visualizer-container {
-    background: var(--sc-bg-lighter);
-    border-radius: 1.5rem;
-    padding: 1.5rem;
-    position: relative;
-    min-height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--sc-border);
-    overflow: hidden;
-  }
-
-  #sc-stair-svg {
-    width: 100%;
-    height: 100%;
-    max-height: 400px;
-    color: var(--sc-neutral);
-  }
-
-  .sc-input-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
-  }
-
-  .sc-input-group {
-    margin-bottom: 0.75rem;
-  }
-
-  .sc-input-group label {
-    display: block;
-    font-size: 0.8rem;
-    font-weight: 700;
-    color: var(--sc-neutral-light);
-    margin-bottom: 0.4rem;
-  }
-
-  .sc-stepper {
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 1.25rem;
-    border: 2px solid var(--sc-border);
-    transition: all 0.2s ease;
-    padding: 3px;
-    gap: 2px;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  :global(.theme-dark) .sc-stepper {
-    background: rgba(255, 255, 255, 0.04);
-  }
-
-  .sc-stepper:focus-within {
-    border-color: var(--sc-primary);
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
-  }
-
-  .sc-step-btn {
-    width: 44px;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    color: var(--sc-neutral-light);
-    font-size: 1.6rem;
-    font-weight: 800;
-    cursor: pointer;
-    border-radius: 0.85rem;
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-  }
-
-  .sc-step-btn:hover {
-    background: var(--sc-bg-lighter);
-    color: var(--sc-primary);
-  }
-
-  .sc-stepper input {
-    flex: 1;
-    min-width: 0;
-    background: none;
-    border: none;
-    color: var(--sc-neutral);
-    text-align: center;
-    font-size: 1.1rem;
-    font-weight: 700;
-    height: 44px;
-    padding: 0;
-    appearance: textfield;
-  }
-
-  .sc-stepper input::-webkit-outer-spin-button,
-  .sc-stepper input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  .sc-select {
-    width: 100%;
-    padding: 0.8rem 2.8rem 0.8rem 1rem;
-    border-radius: 1rem;
-    border: 2px solid var(--sc-border);
-    background: rgba(255, 255, 255, 0.5);
-    font-weight: 600;
-    font-size: 0.95rem;
-    color: var(--sc-neutral);
-    outline: none;
-    transition: all 0.2s ease;
-    appearance: none;
-    -webkit-appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%236366f1' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-    cursor: pointer;
-  }
-
-  :global(.theme-dark) .sc-select {
-    background-color: #0f172a;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23818cf8' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
-  }
-
-  .sc-select option {
-    background: white;
-    color: #1e293b;
-  }
-
-  :global(.theme-dark) .sc-select option {
-    background: #1e293b;
-    color: #f1f5f9;
-  }
-
-  .sc-optimize-btn {
-    width: 100%;
-    padding: 0.75rem;
-    background: var(--sc-primary-dark);
-    color: white;
-    border: none;
-    border-radius: 0.75rem;
-    font-weight: 700;
-    cursor: pointer;
-    margin-top: 0.5rem;
-    font-size: 0.85rem;
-  }
-
-  .sc-blondel-alert {
-    padding: 1rem;
-    border-radius: 1rem;
-    font-weight: 700;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    margin-top: auto;
-  }
-
-  .sc-blondel-title {
-    font-size: 0.65rem;
-    text-transform: uppercase;
-    opacity: 0.8;
-  }
-
-  .sc-blondel-msg {
-    font-size: 0.85rem;
-  }
-
-  .sc-blondel-alert.success {
-    background: #dcfce7;
-    color: #166534;
-    border: 1px solid #bbf7d0;
-  }
-
-  .sc-blondel-alert.warning {
-    background: #fef9c3;
-    color: #854d0e;
-    border: 1px solid #fef08a;
-  }
-
-  .sc-blondel-alert.error {
-    background: #fee2e2;
-    color: #991b1b;
-    border: 1px solid #fecaca;
-  }
-
-  .sc-bottom-grid {
-    display: grid;
-    grid-template-columns: 1fr 300px;
-    gap: 1.25rem;
-  }
-
-  .sc-table-card {
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 1.25rem;
-    padding: 1.25rem;
-    border: 1px solid var(--sc-border);
-  }
-
-  :global(.theme-dark) .sc-table-card {
-    background: rgba(255, 255, 255, 0.03);
-  }
-
-  .sc-table-card h3 {
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    color: var(--sc-neutral-light);
-    font-weight: 800;
-    margin-bottom: 0.75rem;
-  }
-
-  .sc-table-wrapper {
-    max-height: 220px;
-    overflow-y: auto;
-  }
-
-  :global(.sc-table-wrapper table) {
-    width: 100%;
-  }
-
-  :global(.sc-table-wrapper th) {
-    text-align: left;
-    font-size: 0.55rem;
-    text-transform: uppercase;
-    color: var(--sc-neutral-light);
-    padding: 0.4rem 0.2rem;
-    background: transparent;
-  }
-
-  :global(.sc-table-wrapper td) {
-    padding: 0.6rem 0.2rem;
-    border-bottom: 1px solid var(--sc-border);
-    font-size: 0.8rem;
-    color: var(--sc-neutral);
-  }
-
-  .sc-col-hl {
-    color: var(--sc-primary);
-    font-weight: 700;
-  }
-
-  .sc-materials-card {
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
-    color: var(--sc-neutral);
-    border-radius: 1.25rem;
-    padding: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    border: 1px solid var(--sc-primary);
-  }
-
-  :global(.theme-dark) .sc-materials-card {
-    background: rgba(129, 140, 248, 0.08);
-  }
-
-  .sc-materials-card h3 {
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    color: var(--sc-primary);
-    font-weight: 800;
-    margin-bottom: 0.5rem;
-  }
-
-  .sc-material-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    padding-bottom: 0.4rem;
-    border-bottom: 1px solid var(--sc-border);
-  }
-
-  .sc-material-row span {
-    font-size: 0.7rem;
-    color: var(--sc-neutral-light);
-  }
-
-  .sc-material-row strong {
-    font-size: 1.15rem;
-    color: var(--sc-primary);
-  }
-
-  .sc-actions-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
-    margin-top: auto;
-  }
-
-  .sc-action-btn {
-    padding: 0.75rem;
-    border-radius: 0.75rem;
-    font-weight: 800;
-    font-size: 0.8rem;
-    border: none;
-    cursor: pointer;
-  }
-
-  .sc-btn-primary {
-    background: var(--sc-primary-dark);
-    color: white;
-  }
-
-  .sc-btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-  }
-
-  @media (max-width: 1000px) {
-    .sc-card {
-      grid-template-columns: 1fr;
-      border-radius: 1.5rem;
-    }
-
-    .sc-sidebar {
-      border-right: none;
-      border-bottom: 1px solid var(--sc-border);
-      padding: 1.25rem;
-    }
-
-    .sc-main {
-      padding: 1.25rem;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .sc-root {
-      margin: 1rem auto;
-      padding: 0 0.75rem;
-    }
-
-    .sc-results-header {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 0.5rem;
-    }
-
-    .sc-bottom-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .sc-stat-value {
-      font-size: 1.25rem;
-    }
-
-    .sc-stat-box {
-      padding: 0.5rem;
-    }
-
-    .sc-visualizer-container {
-      min-height: 250px;
-      padding: 1rem;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .sc-results-header {
-      gap: 0.4rem;
-    }
-
-    .sc-stat-box {
-      padding: 0.4rem;
-      border-radius: 1rem;
-    }
-
-    .sc-stat-value {
-      font-size: 1.1rem;
-    }
-
-    .sc-material-row strong {
-      font-size: 1rem;
-    }
-  }
-</style>