improve borders

voliva · Aug 19, 2022 · 872acda · 872acda
1 parent 89b19a5
commit 872acda
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 5 deletions.
diff --git a/public/background.png b/public/background.png
diff --git a/src/App/App.css b/src/App/App.css
@@ -11,12 +11,25 @@
 .painted-box {
   background-color: rgba(255, 255, 255, 0.66);
   background-clip: padding-box;
-  border-width: 10px 50px;
+  border-width: 18px 13px 15px 12px;
   border-image-source: url("./borders_r_66opacity.png");
+  border-image-slice: 18 13 15 12 fill;
+  border-image-width: 18px 13px 15px 12px;
+  border-image-outset: 0px 0px 0px 0px;
+  border-image-repeat: round round;
+  border-style: solid;
+  padding: 0.1rem 0.5rem;
+}
+
+.painted-line {
+  background-color: rgba(255, 255, 255, 0.66);
+  background-clip: padding-box;
+  border-width: 10px 50px;
+  border-image-source: url("./borders_66opacity.png");
   border-image-slice: 18 130 17 137 fill;
   border-image-width: 10px 50px 10px 50px;
   border-image-outset: 0px 0px 0px 0px;
-  border-image-repeat: round round;
+  border-image-repeat: round stretch;
   border-style: solid;
   padding: 0.1rem 0.5rem;
 }
diff --git a/src/App/CreateGoal.css b/src/App/CreateGoal.css
@@ -13,6 +13,13 @@
   vertical-align: middle;
 }
 
+.create-goal {
+  overflow: auto;
+}
+.create-goal::-webkit-scrollbar {
+  display: none;
+}
+
 .create-goal .rewards {
   list-style: none;
   margin: 0;

diff --git a/src/App/Header.tsx b/src/App/Header.tsx
@@ -8,7 +8,7 @@ function Header() {
 
   return (
     <div className="header" data-tauri-drag-region>
-      <div className="header-title painted-box" data-tauri-drag-region>
+      <div className="header-title painted-line" data-tauri-drag-region>
         {season ? season.name : "PvP Pips Calculator"}
       </div>
       <div className="header-actions">

diff --git a/src/App/Result.css b/src/App/Result.css
@@ -5,7 +5,7 @@
   justify-content: center;
   overflow: auto;
   flex: 1 1 auto;
-  padding: 0 5rem;
+  padding: 0 8rem;
   padding-bottom: 5rem;
   mask: linear-gradient(
     0deg,

diff --git a/src/App/borders_66opacity.png b/src/App/borders_66opacity.png
diff --git a/src/App/borders_r_66opacity.png b/src/App/borders_r_66opacity.png
diff --git a/src/service/localData.ts b/src/service/localData.ts
@@ -23,7 +23,12 @@ const defaultConfig: Config = {
   version: 1,
   apiKey: "",
   holidays: [],
-  goals: [],
+  goals: [
+    {
+      title: "All chests",
+      value: 670,
+    },
+  ],
 };
 
 const readConfig$ = () =>