docs/design: new design by BYTEMALTE and Docs
This commit is contained in:
178
assets/main.css
178
assets/main.css
@@ -1,187 +1,147 @@
|
||||
/*
|
||||
Main Project Styles
|
||||
Simple, clean, and modern calculator design.
|
||||
BYTEMALTE Design System v1.1
|
||||
*/
|
||||
|
||||
/* --- Variables --- */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--bg-main: #121212;
|
||||
--bg-card: rgba(30, 30, 35, 0.8);
|
||||
--bg-display: #1a1a1a;
|
||||
--color-primary: #8888FF;
|
||||
--color-secondary: #3DDC84;
|
||||
--color-background: #0F172A;
|
||||
--color-surface: #1E293B;
|
||||
--color-text-high: #F8FAFC;
|
||||
--color-text-muted: #B0BDD0;
|
||||
--color-error: #EF4444;
|
||||
--color-border: #334155;
|
||||
|
||||
--text-main: #ffffff;
|
||||
--text-muted: #a0a0a0;
|
||||
--text-black: #000000;
|
||||
--radius-btn: 8px;
|
||||
--radius-card: 16px;
|
||||
--radius-input: 8px;
|
||||
|
||||
/* Button Colors */
|
||||
--btn-num-bg: #2d2d2d;
|
||||
--btn-num-hover: #3d3d3d;
|
||||
|
||||
--btn-op-bg: #ff9f0a;
|
||||
--btn-op-hover: #ffb03a;
|
||||
|
||||
--btn-clear-bg: #ff453a;
|
||||
--btn-clear-hover: #ff6961;
|
||||
|
||||
/* Layout & Effects */
|
||||
--radius-l: 24px;
|
||||
--radius-m: 16px;
|
||||
--shadow-heavy: 0 20px 50px rgba(0, 0, 0, 0.5);
|
||||
--shadow-light: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||
--font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* --- Global Setup --- */
|
||||
body {
|
||||
background-color: var(--bg-main);
|
||||
background-image: radial-gradient(circle at 50% 0%, #2a2a35 0%, #121212 100%);
|
||||
color: var(--text-main);
|
||||
font-family: -apple-system, sans-serif;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text-high);
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* --- App Container --- */
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fade-in 0.8s ease-out;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* --- Calculator Wrapper (The Card) --- */
|
||||
.calculator-wrap {
|
||||
background-color: var(--bg-card);
|
||||
backdrop-filter: blur(20px);
|
||||
width: 360px;
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-l);
|
||||
box-shadow: var(--shadow-heavy);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* --- Display Area --- */
|
||||
.display-area {
|
||||
background-color: var(--bg-display);
|
||||
border-radius: var(--radius-m);
|
||||
background-color: var(--color-background);
|
||||
border-radius: var(--radius-input);
|
||||
padding: 24px;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
min-height: 48px;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
/* Hide if numbers get too long */
|
||||
}
|
||||
|
||||
.display-text {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-high);
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
/* Fallback */
|
||||
}
|
||||
|
||||
.operator-symbol {
|
||||
color: var(--btn-op-bg);
|
||||
/* Use operator color for visibility */
|
||||
font-weight: 500;
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
margin: 0 4px;
|
||||
/* Reset gradient text effect for symbol to make it solid color */
|
||||
-webkit-text-fill-color: var(--btn-op-bg);
|
||||
}
|
||||
|
||||
/* --- Keypad Grid --- */
|
||||
.keypad-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* --- Buttons --- */
|
||||
.calc-btn {
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
padding: 20px 0;
|
||||
border-radius: var(--radius-m);
|
||||
padding: 18px 0;
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, filter 0.2s;
|
||||
box-shadow: var(--shadow-light);
|
||||
color: var(--text-main);
|
||||
position: relative;
|
||||
/* For overflow/effects */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Button Interactions */
|
||||
.calc-btn:active {
|
||||
transform: scale(0.95);
|
||||
transition: filter 0.2s, box-shadow 0.2s, transform 0.1s;
|
||||
color: var(--color-text-high);
|
||||
}
|
||||
|
||||
.calc-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.calc-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-number {
|
||||
background-color: var(--btn-num-bg);
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.btn-operator {
|
||||
background-color: var(--btn-op-bg);
|
||||
color: var(--text-black);
|
||||
font-weight: 600;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-high);
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-text-high);
|
||||
}
|
||||
|
||||
.btn-equals {
|
||||
grid-column: span 4;
|
||||
/* Full width */
|
||||
background-color: var(--btn-op-bg);
|
||||
color: var(--text-black);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
background-color: var(--btn-clear-bg);
|
||||
color: white;
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-background);
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.btn-zero {
|
||||
grid-column: span 2;
|
||||
/* Double width */
|
||||
text-align: left;
|
||||
padding-left: 32px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/* --- Animations --- */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Responsiveness --- */
|
||||
@media (max-height: 700px) {
|
||||
.calculator-wrap {
|
||||
padding: 16px;
|
||||
@@ -189,7 +149,11 @@ body {
|
||||
}
|
||||
|
||||
.calc-btn {
|
||||
padding: 16px 0;
|
||||
font-size: 1.25rem;
|
||||
padding: 14px 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.display-text {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user