@jjlmoya/utils-alcohol 1.23.0 → 1.24.0

package/src/tool/beerCooler/component.astro

@@ -234,386 +234,4 @@ const { ui } = Astro.props;
     new BeerApp();
 </script>
 
-<style>
-    .beer-app {
-        width: 100%;
-        max-width: 72rem;
-        margin: 0 auto;
-        padding: 0.5rem;
-    }
-
-    .beer-card {
-        background: #fff;
-        border: 1px solid #e2e8f0;
-        border-radius: 1.25rem;
-        overflow: clip;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
-        color: #1e293b;
-    }
-    :global(.theme-dark) .beer-card {
-        background: #0f172a;
-        border-color: #1e293b;
-        color: #f1f5f9;
-    }
-
-    .beer-grid { display: grid; }
-
-    @media (min-width: 1024px) {
-        .beer-grid {
-            grid-template-columns: 1fr 1fr;
-            align-items: stretch;
-        }
-    }
-
-    .beer-steps-panel {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .beer-sec {
-        padding: 1.25rem 1.5rem;
-        border-bottom: 1px solid #e2e8f0;
-    }
-    :global(.theme-dark) .beer-sec { border-color: #1e293b; }
-    .beer-sec:last-child { border-bottom: none; }
-
-    .step-header {
-        font-size: 1rem;
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        margin: 0 0 1rem;
-        color: #1e293b;
-    }
-
-    :global(.theme-dark) .step-header { color: #f1f5f9; }
-    .step-number {
-        width: 1.75rem;
-        height: 1.75rem;
-        border-radius: 50%;
-        background: #0f172a;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 0.75rem;
-        flex-shrink: 0;
-    }
-    :global(.theme-dark) .step-number {
-        background: #fff;
-        color: #0f172a;
-    }
-
-    .selector-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
-    }
-
-    .selector-card {
-        width: 100%;
-        text-align: left;
-        padding: 1rem;
-        border-radius: 0.75rem;
-        border: 2px solid #e2e8f0;
-        transition: border-color 0.2s;
-        position: relative;
-        overflow: hidden;
-        background: #f8fafc;
-        cursor: pointer;
-    }
-    :global(.theme-dark) .selector-card {
-        border-color: #1e293b;
-        background: #0c1527;
-    }
-    .selector-card:hover { border-color: #cbd5e1; }
-    :global(.theme-dark) .selector-card:hover { border-color: #334155; }
-
-    .selector-content {
-        position: relative;
-        z-index: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .icon-el {
-        width: 2rem;
-        height: 2rem;
-        color: #94a3b8;
-        transition: color 0.2s;
-    }
-    .selector-card:hover .icon-el { color: #f59e0b; }
-    .selector-card[data-value="bottle"]:hover .icon-el { color: #10b981; }
-    .selector-card[data-value="fridge"]:hover .icon-el { color: #06b6d4; }
-    .selector-card[data-value="freezer"]:hover .icon-el { color: #3b82f6; }
-
-    .selector-label {
-        font-weight: 700;
-        font-size: 1rem;
-        color: #1e293b;
-    }
-
-    :global(.theme-dark) .selector-label { color: #f1f5f9; }
-
-    .selector-sub {
-        font-size: 0.7rem;
-        color: #64748b;
-        font-weight: 500;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-    }
-
-    :global(.theme-dark) .selector-sub { color: #94a3b8; }
-
-    .bg-el {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        transition: opacity 0.2s;
-        background: rgba(245,158,11,0.08);
-    }
-    .selector-card[data-value="bottle"] .bg-el { background: rgba(16,185,129,0.08); }
-    .selector-card[data-value="fridge"] .bg-el { background: rgba(6,182,212,0.08); }
-    .selector-card[data-value="freezer"] .bg-el { background: rgba(59,130,246,0.08); }
-
-    .selector-card.selected[data-value="can"] { border-color: #f59e0b; }
-    .selector-card.selected[data-value="bottle"] { border-color: #10b981; }
-    .selector-card.selected[data-value="fridge"] { border-color: #06b6d4; }
-    .selector-card.selected[data-value="freezer"] { border-color: #3b82f6; }
-    .selector-card.selected .bg-el { opacity: 1; }
-
-    .slider-row { margin-bottom: 1.25rem; }
-    .slider-row-last { margin-bottom: 0; }
-    .slider-label-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-    }
-    .slider-label {
-        font-size: 0.75rem;
-        font-weight: 700;
-        color: #64748b;
-        text-transform: uppercase;
-        letter-spacing: 0.1em;
-    }
-
-    :global(.theme-dark) .slider-label { color: #94a3b8; }
-
-    .temp-display {
-        font-size: 1rem;
-        font-weight: 700;
-        background: #f1f5f9;
-        color: #1e293b;
-        padding: 0.2rem 0.6rem;
-        border-radius: 0.4rem;
-    }
-
-    :global(.theme-dark) .temp-display {
-        background: #1e293b;
-        color: #f1f5f9;
-    }
-
-    .slider-custom {
-        width: 100%;
-        height: 0.5rem;
-        border-radius: 0.5rem;
-        appearance: none;
-        cursor: pointer;
-        background: #e2e8f0;
-    }
-    :global(.theme-dark) .slider-custom { background: #334155; }
-    .slider-dark { accent-color: #0f172a; }
-    :global(.theme-dark) .slider-dark { accent-color: #fff; }
-    .slider-blue { accent-color: #3b82f6; }
-    .slider-custom::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        height: 20px;
-        width: 20px;
-        border-radius: 50%;
-        background: currentcolor;
-        cursor: pointer;
-        margin-top: -6px;
-    }
-    .slider-custom::-webkit-slider-runnable-track {
-        width: 100%;
-        height: 8px;
-        background: transparent;
-        border-radius: 4px;
-    }
-
-    .beer-result-panel {
-        background: linear-gradient(to bottom right, #eff6ff, #eef2ff);
-        color: #1e293b;
-        display: flex;
-        align-items: stretch;
-        min-height: 380px;
-    }
-
-    @media (min-width: 1024px) { .beer-result-panel { border-left: 1px solid #e2e8f0; } }
-
-    :global(.theme-dark) .beer-result-panel {
-        background: linear-gradient(to bottom right, #1e293b, #020617);
-        color: #fff;
-    }
-
-    @media (min-width: 1024px) { :global(.theme-dark) .beer-result-panel { border-left-color: #334155; } }
-
-    .result-inner {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        padding: 2rem;
-        position: relative;
-        z-index: 1;
-    }
-
-    .empty-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1.5rem;
-    }
-    .empty-icon {
-        width: 4rem;
-        height: 4rem;
-        border-radius: 50%;
-        background: #e0e7ff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #6366f1;
-    }
 
-    :global(.theme-dark) .empty-icon {
-        background: #1e293b;
-        color: #475569;
-    }
-    .empty-icon-svg {
-        width: 2rem;
-        height: 2rem;
-    }
-    .empty-title {
-        font-size: 1.25rem;
-        font-weight: 700;
-        color: #475569;
-        margin: 0;
-    }
-
-    :global(.theme-dark) .empty-title { color: #64748b; }
-
-    .empty-desc {
-        color: #94a3b8;
-        margin: 0;
-        font-size: 0.875rem;
-    }
-
-    :global(.theme-dark) .empty-desc { color: #475569; }
-
-    .result-content {
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-        position: relative;
-        z-index: 1;
-    }
-    .result-time-wrap {
-        position: relative;
-        margin-bottom: 1.5rem;
-    }
-    .result-glow {
-        position: absolute;
-        inset: -2rem;
-        background: rgba(59,130,246,0.2);
-        border-radius: 50%;
-        filter: blur(2rem);
-    }
-    .result-time-num {
-        position: relative;
-        font-size: 5rem;
-        font-weight: 900;
-        color: #1e293b;
-        letter-spacing: -0.05em;
-        line-height: 1;
-    }
-
-    :global(.theme-dark) .result-time-num { color: #fff; }
-
-    .result-time-unit {
-        position: absolute;
-        right: -1.5rem;
-        bottom: 0.75rem;
-        font-size: 1.25rem;
-        font-weight: 700;
-        color: #94a3b8;
-    }
-
-    .result-labels { margin-bottom: 2rem; }
-    .result-est-label {
-        font-size: 0.75rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.2em;
-        color: #6366f1;
-        margin: 0 0 0.5rem;
-    }
-
-    :global(.theme-dark) .result-est-label { color: #60a5fa; }
-
-    .result-finish-time {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: #1e293b;
-        margin: 0;
-    }
-
-    :global(.theme-dark) .result-finish-time { color: #fff; }
-
-    .result-meta-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
-        width: 100%;
-        text-align: left;
-    }
-    .result-meta-item {
-        background: rgba(255,255,255,0.7);
-        padding: 0.75rem;
-        border-radius: 0.5rem;
-        border: 1px solid #e2e8f0;
-    }
-
-    :global(.theme-dark) .result-meta-item {
-        background: rgba(30,41,59,0.5);
-        border-color: #334155;
-    }
-
-    .result-meta-label {
-        font-size: 0.7rem;
-        color: #94a3b8;
-        text-transform: uppercase;
-        font-weight: 700;
-        margin-bottom: 0.25rem;
-    }
-
-    .result-meta-value {
-        color: #1e293b;
-        font-weight: 700;
-        font-size: 0.875rem;
-    }
-
-    :global(.theme-dark) .result-meta-value { color: #fff; }
-
-    .bubbles-layer {
-        position: absolute;
-        inset: 0;
-        overflow: hidden;
-        pointer-events: none;
-        z-index: 0;
-    }
-</style>