Make the calculator more beautiful

This commit is contained in:
Jonathan Kelley committed 2024-01-17 19:01:28 -08:00
1 parent 1df329bda4
commit 8918bf9463
2 files changed
+18 -7

No files matched your search

+16 -5
View File
@@ -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;
} }
@@ -21,11 +25,11 @@ button {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
button:active { button:active {
box-shadow: inset 0px 0px 80px 0px rgba(0,0,0,0.25); box-shadow: inset 0px 0px 80px 0px rgba(0, 0, 0, 0.25);
} }
#wrapper { #wrapper {
@@ -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;
@@ -138,8 +148,9 @@ 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%);
} }
+2 -2
View File
@@ -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 {