Spaces:
Running
Running
| .calculator { | |
| width: 320px; | |
| background: rgba(30, 30, 40, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| padding: 25px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| margin: 20px 0; | |
| } | |
| .display { | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| text-align: right; | |
| color: white; | |
| height: 100px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .display::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(92, 108, 255, 0.5), transparent); | |
| } | |
| .previous-operand { | |
| font-size: 1.2rem; | |
| opacity: 0.7; | |
| min-height: 24px; | |
| word-break: break-all; | |
| } | |
| .current-operand { | |
| font-size: 2.5rem; | |
| font-weight: 500; | |
| word-break: break-all; | |
| } | |
| .buttons { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| grid-gap: 12px; | |
| } | |
| button { | |
| border: none; | |
| border-radius: 12px; | |
| height: 60px; | |
| font-size: 1.3rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: white; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| button:hover::before { | |
| opacity: 1; | |
| } | |
| button:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| box-shadow: none; | |
| } | |
| button[data-operation] { | |
| background: rgba(92, 108, 255, 0.3); | |
| } | |
| button[data-operation]:hover { | |
| background: rgba(92, 108, 255, 0.4); | |
| } | |
| button[data-equals] { | |
| background: rgba(0, 212, 166, 0.3); | |
| } | |
| button[data-equals]:hover { | |
| background: rgba(0, 212, 166, 0.4); | |
| } | |
| button[data-all-clear] { | |
| background: rgba(255, 99, 71, 0.3); | |
| } | |
| button[data-all-clear]:hover { | |
| background: rgba(255, 99, 71, 0.4); | |
| } | |
| .span-two { | |
| grid-column: span 2; | |
| } | |
| @media (max-width: 400px) { | |
| .calculator { | |
| width: 280px; | |
| padding: 20px; | |
| } | |
| button { | |
| height: 55px; | |
| font-size: 1.2rem; | |
| } | |
| .current-operand { | |
| font-size: 2rem; | |
| } | |
| } | |