Hugging Face's logo

Spaces:
akhaliq
/
svelte-calculator-anycoder
Build error

App Files Community
akhaliq HF Staff commited on
Commit
ea88a15
·
verified ·
1 Parent(s): 33df783

Upload src/app.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. src/app.css +120 -52
src/app.css CHANGED
@@ -1,79 +1,147 @@
 
1
  :root {
2
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3
- line-height: 1.5;
4
- font-weight: 400;
5
-
6
- color-scheme: light dark;
7
- color: rgba(255, 255, 255, 0.87);
8
- background-color: #242424;
9
-
10
- font-synthesis: none;
11
- text-rendering: optimizeLegibility;
12
- -webkit-font-smoothing: antialiased;
13
- -moz-osx-font-smoothing: grayscale;
 
 
14
  }
15
 
16
- a {
17
- font-weight: 500;
18
- color: #646cff;
19
- text-decoration: inherit;
20
- }
21
- a:hover {
22
- color: #535bf2;
23
  }
24
 
25
  body {
26
- margin: 0;
 
27
  display: flex;
28
- place-items: center;
29
- min-width: 320px;
30
  min-height: 100vh;
 
31
  }
32
 
33
- h1 {
34
- font-size: 3.2em;
35
- line-height: 1.1;
 
 
 
 
36
  }
37
 
38
- .card {
39
- padding: 2em;
 
 
 
 
 
 
 
 
 
 
40
  }
41
 
42
- #app {
43
- max-width: 1280px;
44
- margin: 0 auto;
45
- padding: 2rem;
46
- text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
47
  }
48
 
49
  button {
50
- border-radius: 8px;
51
- border: 1px solid transparent;
52
- padding: 0.6em 1.2em;
53
- font-size: 1em;
54
- font-weight: 500;
55
- font-family: inherit;
56
- background-color: #1a1a1a;
57
  cursor: pointer;
58
- transition: border-color 0.25s;
 
59
  }
 
60
  button:hover {
61
- border-color: #646cff;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  }
63
- button:focus,
64
- button:focus-visible {
65
- outline: 4px auto -webkit-focus-ring-color;
66
  }
67
 
68
- @media (prefers-color-scheme: light) {
69
- :root {
70
- color: #213547;
71
- background-color: #ffffff;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  }
73
- a:hover {
74
- color: #747bff;
 
75
  }
 
76
  button {
77
- background-color: #f9f9f9;
 
78
  }
79
- }
 
1
+ /* src/app.css */
2
  :root {
3
+ --bg-color: #f5f5f5;
4
+ --calculator-bg: #1a1a1a;
5
+ --display-bg: #2a2a2a;
6
+ --button-bg: #3a3a3a;
7
+ --button-hover: #4a4a4a;
8
+ --operator-bg: #ff9500;
9
+ --operator-hover: #ffaa33;
10
+ --function-bg: #505050;
11
+ --function-hover: #606060;
12
+ --text-color: #ffffff;
13
+ --text-secondary: #cccccc;
14
+ --border-radius: 12px;
15
+ --button-radius: 8px;
16
+ --transition: all 0.2s ease;
17
  }
18
 
19
+ * {
20
+ box-sizing: border-box;
21
+ margin: 0;
22
+ padding: 0;
 
 
 
23
  }
24
 
25
  body {
26
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
27
+ background-color: var(--bg-color);
28
  display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
  min-height: 100vh;
32
+ padding: 20px;
33
  }
34
 
35
+ .calculator {
36
+ background-color: var(--calculator-bg);
37
+ border-radius: var(--border-radius);
38
+ padding: 20px;
39
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
40
+ width: 100%;
41
+ max-width: 340px;
42
  }
43
 
44
+ .display {
45
+ background-color: var(--display-bg);
46
+ border-radius: var(--border-radius);
47
+ padding: 20px;
48
+ margin-bottom: 20px;
49
+ text-align: right;
50
+ min-height: 80px;
51
+ display: flex;
52
+ flex-direction: column;
53
+ justify-content: center;
54
+ word-wrap: break-word;
55
+ word-break: break-all;
56
  }
57
 
58
+ .display-text {
59
+ font-size: 2.5rem;
60
+ font-weight: 300;
61
+ color: var(--text-color);
62
+ line-height: 1.2;
63
+ }
64
+
65
+ .error {
66
+ font-size: 0.875rem;
67
+ color: #ff6b6b;
68
+ margin-top: 5px;
69
+ }
70
+
71
+ .buttons {
72
+ display: grid;
73
+ grid-template-columns: repeat(4, 1fr);
74
+ gap: 10px;
75
  }
76
 
77
  button {
78
+ background-color: var(--button-bg);
79
+ color: var(--text-color);
80
+ border: none;
81
+ border-radius: var(--button-radius);
82
+ font-size: 1.5rem;
83
+ padding: 20px;
 
84
  cursor: pointer;
85
+ transition: var(--transition);
86
+ font-weight: 300;
87
  }
88
+
89
  button:hover {
90
+ background-color: var(--button-hover);
91
+ transform: translateY(-1px);
92
+ }
93
+
94
+ button:active {
95
+ transform: translateY(0);
96
+ }
97
+
98
+ button.function {
99
+ background-color: var(--function-bg);
100
+ }
101
+
102
+ button.function:hover {
103
+ background-color: var(--function-hover);
104
+ }
105
+
106
+ button.operator {
107
+ background-color: var(--operator-bg);
108
+ font-size: 1.75rem;
109
+ font-weight: 400;
110
  }
111
+
112
+ button.operator:hover {
113
+ background-color: var(--operator-hover);
114
  }
115
 
116
+ button.equals {
117
+ background-color: var(--operator-bg);
118
+ grid-column: 3 / 5;
119
+ }
120
+
121
+ button.equals:hover {
122
+ background-color: var(--operator-hover);
123
+ }
124
+
125
+ button.zero {
126
+ grid-column: 1 / 3;
127
+ }
128
+
129
+ @media (max-width: 480px) {
130
+ .calculator {
131
+ padding: 15px;
132
+ }
133
+
134
+ .display {
135
+ padding: 15px;
136
+ min-height: 70px;
137
  }
138
+
139
+ .display-text {
140
+ font-size: 2rem;
141
  }
142
+
143
  button {
144
+ font-size: 1.25rem;
145
+ padding: 15px;
146
  }
147
+ }