Make the calculator more beautiful
This commit is contained in:
2 files changed
+14
-3
No files matched your search
@@ -1,13 +1,17 @@
|
|||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
*, *:before, *:after {
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font: 100 14px 'Roboto';
|
font: 100 14px 'Roboto';
|
||||||
|
font-family: Arial;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -113,24 +117,30 @@ button:active {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .function-keys .calculator-key {
|
.calculator .function-keys .calculator-key {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .function-keys .key-multiply {
|
.calculator .function-keys .key-multiply {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .digit-keys .calculator-key {
|
.calculator .digit-keys .calculator-key {
|
||||||
font-size: 2.25em;
|
font-size: 2.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .digit-keys .key-0 {
|
.calculator .digit-keys .key-0 {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding-left: 32px;
|
padding-left: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .digit-keys .key-dot {
|
.calculator .digit-keys .key-dot {
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .operator-keys .calculator-key {
|
.calculator .operator-keys .calculator-key {
|
||||||
color: white;
|
color: white;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
@@ -140,6 +150,7 @@ button:active {
|
|||||||
.calculator .function-keys {
|
.calculator .function-keys {
|
||||||
background: linear-gradient(to bottom, rgba(202, 202, 204, 1) 0%, rgba(196, 194, 204, 1) 100%);
|
background: linear-gradient(to bottom, rgba(202, 202, 204, 1) 0%, rgba(196, 194, 204, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.calculator .operator-keys {
|
.calculator .operator-keys {
|
||||||
background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
|
background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
|
||||||
}
|
}
|
||||||
@@ -12,10 +12,10 @@ fn main() {
|
|||||||
let config = Config::new().with_window(
|
let config = Config::new().with_window(
|
||||||
WindowBuilder::default()
|
WindowBuilder::default()
|
||||||
.with_title("Calculator")
|
.with_title("Calculator")
|
||||||
.with_inner_size(LogicalSize::new(300.0, 500.0)),
|
.with_inner_size(LogicalSize::new(300.0, 525.0)),
|
||||||
);
|
);
|
||||||
|
|
||||||
LaunchBuilder::new(app).cfg(config);
|
LaunchBuilder::new(app).cfg(config).launch();
|
||||||
}
|
}
|
||||||
|
|
||||||
fn app() -> Element {
|
fn app() -> Element {
|
||||||
|
|||||||
Reference in new issue
Block a user