Style in example

Changed files (1)

• modified examples/clickcounter/styles.css

Diff

diff --git a/examples/clickcounter/styles.css b/examples/clickcounter/styles.cssindex c24badf..2da79cc 100644--- a/examples/clickcounter/styles.css+++ b/examples/clickcounter/styles.css@@ -1,50 +1,128 @@ :root {-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;-    font-size: 16px;-    line-height: 24px;-    font-weight: 400;--    color: #0f0f0f;-    background-color: #f6f6f6;-}--input,-button {-    border-radius: 8px;-    border: 1px solid transparent;-    padding: 0.6em 1.2em;-    font-size: 1em;-    font-weight: 500;-    font-family: inherit;-    color: #0f0f0f;-    background-color: #ffffff;-    transition: border-color 0.25s;-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);-    padding-bottom: 7px;-    margin-bottom: 10px;-}--button {+    --bg: #f6f8fb;+    --card: #ffffff;+    --accent-600: #4f46e5;+    --accent-400: #7c3aed;+    --muted: #6b7280;+    --radius: 12px;+    --space: 18px;+    --max-width: 420px;+    --font-sans: Inter, Avenir, Helvetica, Arial, system-ui, -apple-system;+}++* {+    box-sizing: border-box;+}+html,+body {+    height: 100%;+}+body {+    margin: 0;+    min-height: 100%;+    font-family: var(--font-sans);+    -webkit-font-smoothing: antialiased;+    -moz-osx-font-smoothing: grayscale;+    background: linear-gradient(180deg, #f6f8fb 0%, #eef2ff 100%);+    color: #111827;+    display: flex;+    align-items: center;+    justify-content: center;+    padding: 40px 20px;+}++#click-counter {+    width: 100%;+    max-width: var(--max-width);+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), var(--card));+    border-radius: calc(var(--radius) + 4px);+    padding: calc(var(--space) * 1.25);+    box-shadow: 0 6px 18px rgba(34, 38, 49, 0.06);+    display: grid;+    grid-template-columns: 1fr; /* single column: counter above, buttons below */+    gap: 14px;+    align-items: center;+    justify-items: center;+    text-align: center;+    border: 1px solid rgba(16, 24, 40, 0.03);+}++.click-counter-display {+    font-weight: 700;+    font-size: 3.2rem;+    line-height: 1;+    padding: 20px 28px;+    border-radius: 14px;+    background: linear-gradient(+        180deg,+        rgba(124, 58, 237, 0.08),+        rgba(79, 70, 229, 0.04)+    );+    color: var(--accent-600);+    min-width: 160px;+    display: inline-flex;+    align-items: center;+    justify-content: center;+    box-shadow: 0 2px 6px rgba(34, 38, 49, 0.06);+    user-select: none;+}++.controls {+    width: 100%;+    display: flex;+    flex-direction: column;+    gap: 10px;+    align-items: center;+    justify-content: center;+}++button[class^="click-counter-"] {+    -webkit-appearance: none;+    appearance: none;+    border: none;     cursor: pointer;+    font-weight: 600;+    font-size: 0.95rem;+    padding: 12px 16px;+    border-radius: 10px;+    display: inline-flex;+    gap: 10px;+    align-items: center;+    justify-content: center;+    min-width: 180px; } -input,-button {-    outline: none;+.click-counter-increment-button,+.click-counter-decrement-button {+    background: linear-gradient(90deg, var(--accent-400), var(--accent-600));+    color: white;+    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.08);+    border: none; } -@media (prefers-color-scheme: dark) {-    :root {-        color: #f6f6f6;-        background-color: #2f2f2f;+@media (min-width: 520px) {+    #click-counter {+        gap: 18px;     } -    input,-    button {-        color: #ffffff;-        background-color: #0f0f0f98;+    .click-counter-display {+        font-size: 3.5rem;+        min-width: 180px;     }-    button:active {-        background-color: #0f0f0f69;++    button[class^="click-counter-"] {+        min-width: 200px;     } }++@media (prefers-reduced-motion: reduce) {+}++.small {+    font-size: 0.9rem;+    color: var(--muted);+}++.click-counter-display {+    border: solid 10px;+}