calculator/main.css at main · luhuadong/calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a1a; /* 暗黑背景 */
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.calculator {
    width: 320px;
    height: 580px;
    background-color: #000;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.display-container {
    width: 100%;
    height: 170px; /* 固定高度：2条历史记录(60px) + display区域(60px) + padding(40px) + 间距(10px) */
    background-color: #333;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 内容靠底部对齐 */
}

.history {
    width: 100%;
    height: 60px; /* 固定高度：2条历史记录 */
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.history-item {
    width: 100%;
    height: 30px;
    color: #888;
    font-size: 1em;
    text-align: right;
    padding: 5px 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.history-item:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.history-item:empty {
    display: none;
}

.display {
    width: 100%;
    height: 60px; /* 固定高度 */
    color: white;
    font-size: 2.5em;
    text-align: right;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 1;
}

.button {
    width: 60px;
    height: 60px;
    margin: 10px;
    border: none;
    border-radius: 50%;
    font-size: 1.5em;
    color: white;
    transition: background-color 0.2s;
}

.button:active {
    background-color: #555;
}

.button.orange {
    background-color: #f79e1b;
}

.button.gray {
    background-color: #a5a5a5;
}

.button.dark-gray {
    background-color: #333;
}

/* 数字 0 按钮特殊样式：上下边为水平线，左右为圆弧 */
.button.zero {
    width: 140px; /* 两个按钮的宽度加上间距 */
    border-radius: 30px; /* 左右圆弧 */
    text-align: center; /* 文本居中 */
    padding-left: 0; /* 移除左侧内边距 */
}

.row {
    display: flex;
    justify-content: space-between;
}

footer {
    margin-top: 30px;
    padding: 20px 0;
    text-align: center;
}

footer a {
    opacity: 0.6;
    transition: opacity 0.2s;
}

footer a:hover {
    opacity: 0.8;
}

footer img {
    filter: grayscale(100%) brightness(3) invert(1); /* 浅色徽标：灰度+高亮度+反色 */
    transition: filter 0.2s;
}

footer a:hover img {
    filter: grayscale(80%) brightness(1.2) invert(1); /* 悬停时恢复彩色 */
}