@~gson/vue-calculator/dist/vue-calculator.css

A beautiful and functional Vue calculator component with theme customization and keyboard support

.calculator[data-v-8dc45829]{width:320px;margin:30px auto;background:var(--7a787720);border-radius:15px;padding:25px}.display-container[data-v-8dc45829]{background:var(--2097c0c0);padding:15px;margin-bottom:25px;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;align-items:end;height:95px;box-sizing:border-box}.expression[data-v-8dc45829]{font-size:1.2em;color:#666;font-family:Arial,sans-serif;flex:1;text-align:left}.result[data-v-8dc45829]{font-size:1.5em;color:#2d3436;font-family:Arial,sans-serif;margin-left:15px}.buttons[data-v-8dc45829]{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}.btn[data-v-8dc45829]{padding:15px 0;font-size:1.3em;border:none;border-radius:8px;cursor:pointer;background:var(--381b8774);color:#2d3436;transition:all .2s;font-weight:500;box-shadow:0 2px 4px #0000001a;min-height:50px}.btn[data-v-8dc45829]:hover{background:#f5f5f5;transform:translateY(-2px);box-shadow:0 5px 10px #0003}.operator[data-v-8dc45829]{background:var(--221bd7b6);color:#2d3436}.operator[data-v-8dc45829]:hover{background:var(--7054d1b4)}.equal[data-v-8dc45829]{background:var(--1ffa8c2c);color:#fff}.equal[data-v-8dc45829]:hover{background:var(--e9e34200)}.clear[data-v-8dc45829]{background:var(--7be33131);color:#fff}.clear[data-v-8dc45829]:hover{background:var(--d617914e)}.zero[data-v-8dc45829]{grid-column:span 2}.operator-top[data-v-8dc45829]{background:var(--6ad0debf);color:#2d3436;font-size:1.1em}.operator-top[data-v-8dc45829]:hover{background:var(--2a57c90b)}