static_proj/calculator/calculator.css
2021-05-22 10:42:22 +08:00

133 lines
1.9 KiB
CSS

* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1f;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.write {
background: #fff;
}
.warp {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 0 .5rem;
box-sizing: border-box;
}
.warp .title {
width: 100%;
height: 1.2rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
.title .dark-mode {
display: flex;
align-items: center;
justify-content: center;
}
.title .icon {
height: .7rem;
width: .7rem;
}
.last-content {
color: #eee;
font-size: .6rem;
margin-top: .3rem;
height: 1rem;
line-height: 1rem;
text-align: right;
overflow-x: auto;
}
.write .last-content {
color: #bfbfbf;
}
.now-content {
color: #fff;
font-size: 1.3rem;
text-align: right;
margin-top: .5rem;
height: 2rem;
line-height: 1rem;
overflow-x: auto;
}
.write .now-content {
color: #000;
}
.row {
width: 100%;
height: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .5rem;
}
.box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.box-l {
flex: 2;
}
.btn-s {
text-align: center;
font-size: .8rem;
height: 1.7rem;
width: 1.7rem;
line-height: 1.7rem;
text-align: center;
border-radius: 50%;
color: #fff;
}
.write .btn-s {
color: #000;
}
/* .btn-s:active {
box-shadow: inset 10px 10px 20px #171717,
inset -10px -10px 20px #262627;
} */
.has-bg {
background: #2d2e2e;
}
.write .has-bg {
background: #f7f9fa;
}
.btn-l {
background-image: linear-gradient(to right, #f7c454, #fe5dd7);
width: 3.9rem;
height: 1.7rem;
border-radius: 0.85rem;
line-height: 1.7rem;
text-align: center;
color: #fff;
}
.color-font {
background: linear-gradient(to bottom, #f7c454, #fe5dd7);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}