adjust size

Cargo.lock

@@ -2752,7 +2752,7 @@ dependencies = [
 
 [[package]]
 name = "my-clock"
-version = "0.1.2"
+version = "0.1.3"
 dependencies = [
  "chrono",
  "embed-resource",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "my-clock"
-version = "0.1.2"
+version = "0.1.3"
 edition = "2021"
 
 [dependencies]

src/main.rs

@@ -122,13 +122,13 @@ slint::slint! {
                 Rectangle {
                     width: 100%; height: 100%;
                     border-radius: self.width / 2;
-                    border-width: 2.5px;
+                    border-width: root.clock_size * 0.008;
                     border-color: root.is_dark_mode ? rgba(100, 150, 255, 0.3) : rgba(255, 255, 255, 0.4);
 
                     Rectangle {
                         width: 97%; height: 97%;
                         border-radius: self.width / 2;
-                        border-width: 1.2px;
+                        border-width: root.clock_size * 0.004;
                         border-color: root.is_dark_mode ? rgba(100, 150, 255, 0.15) : rgba(255, 255, 255, 0.2);
                     }
                 }
@@ -149,9 +149,9 @@ slint::slint! {
                     stroke: root.is_dark_mode ? 
                         (is_hour ? rgba(200, 220, 255, 0.5) : rgba(200, 220, 255, 0.25)) : 
                         (is_hour ? rgba(0, 0, 0, 0.5) : rgba(0, 0, 0, 0.25));
-                    stroke-width: is_hour ? 2px : 1px;
+                    stroke-width: is_hour ? root.clock_size * 0.007 : root.clock_size * 0.0035;
                     property <float> angle: i * 6;
-                    property <float> start_r: is_hour ? 42 : 45;
+                    property <float> start_r: is_hour ? 43 : 45;
                     MoveTo { 
                         x: 50 + Math.sin(parent.angle * 1deg) * parent.start_r; 
                         y: 50 - Math.cos(parent.angle * 1deg) * parent.start_r; 
@@ -168,12 +168,12 @@ slint::slint! {
                     {t: "8", a: 240}, {t: "9", a: 270}, {t: "10", a: 300}, {t: "11", a: 330} 
                 ] : Text {
                     property <float> rad: entry.a * 3.14159 / 180;
-                    property <length> r: parent.width / 2 - 35px;
+                    property <length> r: parent.width * 0.39;
                     x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2;
                     y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2;
                     text: entry.t;
                     color: root.is_dark_mode ? rgba(255, 255, 255, 0.8) : rgba(0, 0, 0, 0.7);
-                    font-size: 16px;
+                    font-size: parent.width * 0.05;
                     font-weight: 500;
                 }
 
@@ -181,11 +181,11 @@ slint::slint! {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
                     stroke: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
-                    stroke-width: 5px;
+                    stroke-width: root.clock_size * 0.017;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
-                        x: 50 + Math.sin(root.hour * 1deg) * 25; 
+                        x: 50 + Math.sin(root.hour * 1deg) * 23; 
-                        y: 50 - Math.cos(root.hour * 1deg) * 25; 
+                        y: 50 - Math.cos(root.hour * 1deg) * 23; 
                     }
                 }
 
@@ -193,11 +193,11 @@ slint::slint! {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
                     stroke: root.is_dark_mode ? #bdbdbd : #333333;
-                    stroke-width: 3.5px;
+                    stroke-width: root.clock_size * 0.012;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
-                        x: 50 + Math.sin(root.minute * 1deg) * 38; 
+                        x: 50 + Math.sin(root.minute * 1deg) * 35; 
-                        y: 50 - Math.cos(root.minute * 1deg) * 38; 
+                        y: 50 - Math.cos(root.minute * 1deg) * 35; 
                     }
                 }
 
@@ -205,7 +205,7 @@ slint::slint! {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
                     stroke: #ff3b30;
-                    stroke-width: 1.5px;
+                    stroke-width: root.clock_size * 0.005;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
                         x: 50 + Math.sin(root.second * 1deg) * 44; 
@@ -216,10 +216,10 @@ slint::slint! {
                 Rectangle {
                     x: (parent.width - self.width) / 2;
                     y: (parent.height - self.height) / 2;
-                    width: 8px; height: 8px;
+                    width: root.clock_size * 0.03; height: self.width;
                     background: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
-                    border-radius: 4px;
+                    border-radius: self.width / 2;
-                    border-width: 1.5px;
+                    border-width: self.width * 0.2;
                     border-color: root.is_dark_mode ? #1a2a6c : #ffcc33;
                 }
             }