From: bochard <mail@tenkyuu.dev>
Date: Mon, 9 Jun 2025 13:54:40 +0000 (+0800)
Subject: added improvements on interface
X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=62b88b1a7ebd0275c587871382904382e7f144c7;p=QuestLog.git

added improvements on interface
---

diff --git a/dist/rpgui.css b/dist/rpgui.css
index c31f010..04ad92c 100644
--- a/dist/rpgui.css
+++ b/dist/rpgui.css
@@ -1,12 +1,24 @@
-/*
-Import the font stylesheet.
-If not supported you can add backup via:
-<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
-inside your html file.
+body {
+  height: 100%;
+  min-height: 100vh;
+  background: url(../rpg-background.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+/*
+Import the font stylesheet.
+If not supported you can add backup via:
+<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
+inside your html file.
 */
-@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
-/**
-* Customized scrollbars
+/* @import url("https://fonts.googleapis.com/css?family=Press+Start+2P"); */
+@font-face {
+  font-family: 'Press Start 2P';
+  src: url(../font/PressStart2P-Regular.ttf);
+}
+/**
+* Customized scrollbars
 */
 /* to get pixelated images (nearest-neighbor filter) on all  browsers */
 .rpgui-pixelated {
@@ -46,8 +58,8 @@ inside your html file.
   /* Chrome, Safari, Opera */
   transform-origin: 0% 50%; }
 
-/**
-* Styling for buttons
+/**
+* Styling for buttons
 */
 /* button style */
 .rpgui-button {
@@ -152,19 +164,19 @@ inside your html file.
   margin-right: -46px;
   margin-top: -5%; }
 
-/*
-.rpgui-button.golden:hover:before {
-
-    background-image: url('img/button-golden-left-hover.png');
-}
-
-.rpgui-button.golden:hover:after {
-
-    background-image: url('img/button-golden-right-hover.png');
-}
+/*
+.rpgui-button.golden:hover:before {
+
+    background-image: url('img/button-golden-left-hover.png');
+}
+
+.rpgui-button.golden:hover:after {
+
+    background-image: url('img/button-golden-right-hover.png');
+}
 */
-/**
-* style for checkboxes
+/**
+* style for checkboxes
 */
 /* basic checkbox */
 .rpgui-content input[type=checkbox].rpgui-checkbox {
@@ -197,8 +209,8 @@ inside your html file.
   background: url("img/checkbox-golden-on.png") no-repeat;
   background-size: auto 100%; }
 
-/**
-* global content styling
+/**
+* global content styling
 */
 /* game div with background image*/
 .rpgui-content {
@@ -208,8 +220,9 @@ inside your html file.
   height: 100%;
   left: 0px;
   top: 0px;
-  position: fixed;
-  overflow: hidden;
+  /* position: fixed; */
+  /* overflow: hidden; */
+  overflow-y: auto;
   font-size: 0.8em; }
 
 /* general rules to apply on anything inside the content */
@@ -237,13 +250,13 @@ inside your html file.
   /* default font */
   font-family: 'Press Start 2P', cursive; }
 
-/**
-* customized divs (containers) and framed objects (background and frame image).
+/**
+* customized divs (containers) and framed objects (background and frame image).
 */
 /* game div without background image*/
 .rpgui-container {
   /* position style and default z */
-  position: fixed;
+  /* position: fixed; */
   z-index: 10;
   overflow: show; }
 
@@ -328,8 +341,8 @@ inside your html file.
   background-origin: padding-box;
   background-position: center; }
 
-/**
-* different cursor graphics
+/**
+* different cursor graphics
 */
 /* default cursor important */
 /* this rule is for when you specifically request this cursor class */
@@ -382,8 +395,8 @@ label {
 .rpgui-cursor-grab-close * {
   cursor: url("img/cursor/grab-close.png") 10 0, auto !important; }
 
-/**
-* Customized dropdown with rpgui design.
+/**
+* Customized dropdown with rpgui design.
 */
 /* dropdown box implemented with list (see rpgui-dropdown.js for details) */
 /* note! this class rule affect both the dropdown header and the list elements! */
@@ -448,8 +461,8 @@ ul.rpgui-dropdown-imp {
 .rpgui-dropdown-imp:hover {
   color: yellow; }
 
-/**
-* hr styling
+/**
+* hr styling
 */
 /* rpgui hr */
 .rpgui-content hr {
@@ -466,8 +479,8 @@ ul.rpgui-dropdown-imp {
   background: url("img/hr-golden.png") no-repeat top left;
   background-size: 100% 100%; }
 
-/**
-* Icon styles.
+/**
+* Icon styles.
 */
 .rpgui-icon {
   display: inline-block;
@@ -521,8 +534,8 @@ ul.rpgui-dropdown-imp {
 .rpgui-icon.empty-slot {
   background-image: url("img/icons/empty-slot.png"); }
 
-/**
-* input styling
+/**
+* input styling
 */
 /* input/textarea input */
 .rpgui-content input,
@@ -626,8 +639,8 @@ ul.rpgui-list-imp {
 .rpgui-list-imp .rpgui-selected {
   background: rgba(0, 0, 0, 0.3); }
 
-/**
-* Paragraphs and headers while inside an rpgui container.
+/**
+* Paragraphs and headers while inside an rpgui container.
 */
 /* default gui header */
 .rpgui-content h1 {
@@ -728,8 +741,8 @@ ul.rpgui-list-imp {
   font-size: 1.0em;
   line-height: 22px; }
 
-/*
-* progress bar styling
+/*
+* progress bar styling
 */
 /* progress bar container */
 .rpgui-progress {
@@ -790,8 +803,8 @@ ul.rpgui-list-imp {
 .rpgui-progress-fill.red {
   background-image: url("img/progress-red.png"); }
 
-/**
-* style for radioes
+/**
+* style for radioes
 */
 /* radio box */
 .rpgui-content input[type=radio].rpgui-radio {
@@ -824,8 +837,8 @@ ul.rpgui-list-imp {
   background: url("img/radio-golden-on.png") no-repeat !important;
   background-size: auto 100% !important; }
 
-/**
-* Rules for misc and general things.
+/**
+* Rules for misc and general things.
 */
 /* set scrollbars for webkit browsers (like chrome) */
 .rpgui-content ::-webkit-scrollbar,
@@ -853,8 +866,8 @@ ul.rpgui-list-imp {
   background-size: 100% 100%;
   background-repeat: no-repeat; }
 
-/**
-* for disabled elements
+/**
+* for disabled elements
 */
 /* disabled object */
 .rpgui-disabled,
@@ -874,8 +887,8 @@ ul.rpgui-list-imp {
   filter: gray;
   color: #999; }
 
-/**
-* Rules for the slider.
+/**
+* Rules for the slider.
 */
 /* regular slider stuff */
 /* slider container */
diff --git a/dist/rpgui.min.css b/dist/rpgui.min.css
deleted file mode 100644
index d41e0c6..0000000
--- a/dist/rpgui.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.rpgui-button,.rpgui-button.golden{border:none;min-width:140px;height:60px;display:inline-block;padding-left:35px;padding-right:35px;outline:0;max-width:100%}.rpgui-content *,.rpgui-noselect{-webkit-touch-callout:none;-khtml-user-select:none}.rpgui-content *,.rpgui-pixelated{-ms-interpolation-mode:nearest-neighbor}.rpgui-content h3,.rpgui-content h4{font-weight:1;text-decoration:underline}@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;src:local('Press Start 2P'),local('PressStart2P-Regular'),url(https://fonts.gstatic.com/s/pressstart2p/v4/8Lg6LX8-ntOHUQnvQ0E7o3uGXJk6cuEylToZ-uuaubQ.ttf) format('truetype')}.rpgui-pixelated{image-rendering:-webkit-optimize-contrast;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:pixelated}.rpgui-noselect{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rpgui-center{text-align:center;align-content:center}.rpgui-rotate-90{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-ms-transform-origin:0 50%;-webkit-transform-origin:0 50%;transform-origin:0 50%}.rpgui-button{overflow:hidden;background:url(img/button.png) center no-repeat no-repeat;background-clip:padding-box;background-origin:padding-box;background-size:100% 100%;font-size:1em}.rpgui-button.hover,.rpgui-button:hover{background-image:url(img/button-hover.png)}.rpgui-button.down,.rpgui-button:active{background-image:url(img/button-down.png)}.rpgui-button.golden p{display:inline-block}.rpgui-button.golden{background:url(img/button-golden.png) center no-repeat no-repeat;background-clip:padding-box;background-origin:padding-box;background-size:100% 80%;padding-top:5px;overflow:visible}.rpgui-button.golden:after,.rpgui-button.golden:before{white-space:nowrap;display:block;content:"";width:34px;height:110%}.rpgui-button.golden.hover,.rpgui-button.golden:hover{background-image:url(img/button-golden-hover.png)}.rpgui-button.golden.down,.rpgui-button.golden:active{background-image:url(img/button-golden-down.png)}.rpgui-button.golden:before{background:url(img/button-golden-left.png) right center no-repeat;background-size:100% 100%;margin:-5% 0 0 -46px;left:0;float:left}.rpgui-button.golden:after{background:url(img/button-golden-right.png) left center no-repeat;background-size:100% 100%;margin:-5% -46px 0 0;right:0;float:right}.rpgui-content input[type=checkbox].rpgui-checkbox{display:none}.rpgui-content input[type=checkbox].rpgui-checkbox+label{background:url(img/checkbox-off.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px;margin-top:10px;margin-bottom:10px}.rpgui-content input[type=checkbox].rpgui-checkbox:checked+label{background:url(img/checkbox-on.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px}.rpgui-content input[type=checkbox].rpgui-checkbox.golden+label{background:url(img/checkbox-golden-off.png) no-repeat;background-size:auto 100%}.rpgui-content input[type=checkbox].rpgui-checkbox.golden:checked+label{background:url(img/checkbox-golden-on.png) no-repeat;background-size:auto 100%}.rpgui-content{padding:0;margin:0;width:100%;height:100%;left:0;top:0;position:fixed;overflow:hidden;font-size:.8em}.rpgui-content *{outline:0;user-drag:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;image-rendering:-webkit-optimize-contrast;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:pixelated;font-family:'Press Start 2P',cursive}.rpgui-container{position:fixed;z-index:10;overflow:show}.rpgui-container.framed{border-style:solid;border-image-source:url(img/border-image.png);border-image-repeat:repeat;border-image-slice:6 6 6 6;border-image-width:18px;border-width:15px;padding:12px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-container.framed-golden,.rpgui-container.framed-golden-2{border-image-width:18px;border-width:15px;box-sizing:border-box;border-image-repeat:repeat;padding:12px;border-style:solid}.rpgui-container.framed-golden{border-image-source:url(img/border-image-golden.png);border-image-slice:4 4 4 4;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image-golden.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-container.framed-golden-2{border-image-source:url(img/border-image-golden2.png);border-image-slice:8 8 8 8;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image-golden2.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-container.framed-grey{position:relative;border-style:solid;border-image-source:url(img/border-image-grey.png);border-image-repeat:repeat;border-image-slice:3 3 3 3;border-image-width:7px;border-width:7px;padding:12px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:url(img/background-image-grey.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-dropdown,.rpgui-dropdown-imp,.rpgui-list-imp{border-image:url(img/select-border-image.png) 10% repeat repeat}.rpgui-cursor-default{cursor:url(img/cursor/default.png),auto!important}.rpgui-content,label{cursor:url(img/cursor/default.png),auto}.rpgui-cursor-point,.rpgui-cursor-point *{cursor:url(img/cursor/point.png) 10 0,auto!important}.rpgui-button,.rpgui-content a,.rpgui-content button,.rpgui-content input[type=checkbox].rpgui-checkbox+label,.rpgui-content input[type=radio].rpgui-radio+label,.rpgui-dropdown-imp,.rpgui-list-imp,.rpgui-slider-container{cursor:url(img/cursor/point.png) 10 0,auto}.rpgui-cursor-select,.rpgui-cursor-select *{cursor:url(img/cursor/select.png) 10 0,auto!important}.rpgui-content input,.rpgui-content textarea,.rpgui-cursor-select{cursor:url(img/cursor/select.png) 10 0,auto}.rpgui-cursor-grab-open,.rpgui-cursor-grab-open *{cursor:url(img/cursor/grab-open.png) 10 0,auto!important}.rpgui-cursor-grab-close,.rpgui-cursor-grab-close *{cursor:url(img/cursor/grab-close.png) 10 0,auto!important}.rpgui-dropdown,.rpgui-dropdown-imp{text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;color:#fff;min-height:40px;margin-top:0;border-style:solid;border-width:7px;-moz-border-image:url(img/select-border-image.png) 10% repeat repeat;-webkit-border-image:url(img/select-border-image.png) 10% repeat repeat;-o-border-image:url(img/select-border-image.png) 10% repeat repeat;background:url(img/select-background-image.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-dropdown-imp li,.rpgui-list-imp{background:url(img/select-background-image.png) center}ul.rpgui-dropdown-imp{padding:0!important;z-index:100}.rpgui-content .rpgui-dropdown-imp-header{color:#fff!important;min-height:22px!important;padding:5px 10px 0!important;margin:0!important;position:relative!important}.rpgui-dropdown-imp li{text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;color:#fff;height:16px;list-style-type:none;padding-top:6px;padding-bottom:6px;padding-left:6px;background-clip:padding-box;background-origin:padding-box}.rpgui-dropdown-imp li:hover,.rpgui-dropdown-imp:hover{color:#ff0}.rpgui-content input,.rpgui-content textarea,.rpgui-list-imp,.rpgui-list-imp li{text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;color:#fff}.rpgui-content hr{display:block;border:0;height:10px;background:url(img/hr.png) top left repeat-x}.rpgui-content hr.golden{display:block;border:0;height:10px;background:url(img/hr-golden.png) top left no-repeat;background-size:100% 100%}.rpgui-icon{display:inline-block;background-size:100% 100%;background-repeat:no-repeat;width:64px;height:64px}.rpgui-icon.sword{background-image:url(img/icons/sword.png)}.rpgui-icon.shield{background-image:url(img/icons/shield.png)}.rpgui-icon.exclamation{background-image:url(img/icons/exclamation.png)}.rpgui-icon.potion-red{background-image:url(img/icons/potion-red.png)}.rpgui-icon.potion-green{background-image:url(img/icons/potion-green.png)}.rpgui-icon.potion-blue{background-image:url(img/icons/potion-blue.png)}.rpgui-icon.weapon-slot{background-image:url(img/icons/weapon-slot.png)}.rpgui-icon.shield-slot{background-image:url(img/icons/shield-slot.png)}.rpgui-icon.armor-slot{background-image:url(img/icons/armor-slot.png)}.rpgui-icon.helmet-slot{background-image:url(img/icons/helmet-slot.png)}.rpgui-icon.ring-slot{background-image:url(img/icons/ring-slot.png)}.rpgui-icon.potion-slot{background-image:url(img/icons/potion-slot.png)}.rpgui-icon.magic-slot{background-image:url(img/icons/magic-slot.png)}.rpgui-icon.shoes-slot{background-image:url(img/icons/shoes-slot.png)}.rpgui-icon.empty-slot{background-image:url(img/icons/empty-slot.png)}.rpgui-content input,.rpgui-content textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:.9em;line-height:32px;background:#4e4a4e;max-width:100%;width:100%;padding-left:10px;min-height:30px;-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,.5)}.rpgui-content a,.rpgui-content p,.rpgui-content span{line-height:22px}.rpgui-content textarea{line-height:22px;padding-top:7px;height:80px;resize:none}.rpgui-content input::selection,.rpgui-content textarea::selection{background:rgba(0,0,0,.5)}.rpgui-content input::-moz-selection,.rpgui-content textarea::-moz-selection{background:rgba(0,0,0,.5)}.rpgui-list-imp{min-height:40px;margin-top:0;overflow-x:hidden;overflow-y:scroll;border-style:solid;border-width:7px;-moz-border-image:url(img/select-border-image.png) 10% repeat repeat;-webkit-border-image:url(img/select-border-image.png) 10% repeat repeat;-o-border-image:url(img/select-border-image.png) 10% repeat repeat;background-clip:padding-box;background-origin:padding-box}ul.rpgui-list-imp{padding:0!important;z-index:100}.rpgui-list-imp li{height:16px;margin-left:5px!important;list-style-type:none;padding-top:6px;padding-bottom:6px;padding-left:6px;background:url(img/select-background-image.png) center;background-clip:padding-box;background-origin:padding-box}.rpgui-list-imp li:hover,.rpgui-list-imp:hover{color:#ff0}.rpgui-content h1,.rpgui-content h2,.rpgui-content h3{color:#fff;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;text-align:center;padding:0;margin:7px 7px 17px}.rpgui-list-imp .rpgui-selected{background:rgba(0,0,0,.3)}.rpgui-content h1{font-size:1.14em}.rpgui-content h2{font-size:1.25em}.rpgui-content h3{font-size:1.15em}.rpgui-content h4,.rpgui-content p,.rpgui-content span{color:#fff;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;font-size:1em}.rpgui-content h4{text-align:center;padding:0;margin:7px 7px 17px}.rpgui-content a{color:#ff0;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;font-size:1em;text-decoration:none}.rpgui-content label,.rpgui-content li{color:#fff;text-shadow:-2px 0 #000,0 2px #000,2px 0 #000,0 -2px #000;font-size:1em}.rpgui-content a:hover{text-decoration:underline}.rpgui-content label{line-height:20px;display:inline}.rpgui-content li{margin-left:20px;line-height:22px}.rpgui-progress{height:42px;width:100%;margin-top:5px;margin-bottom:5px;position:relative}.rpgui-progress-left-edge,.rpgui-progress-right-edge{position:absolute;width:40px;background-size:100% 100%;height:42px}.rpgui-progress-left-edge{left:0;background-image:url(img/progress-bar-left.png)}.rpgui-progress-right-edge{right:0;background-image:url(img/progress-bar-right.png)}.rpgui-progress-fill,.rpgui-progress-track{position:absolute;background-repeat:repeat-x;background-size:36px 100%}.rpgui-progress-track{height:42px;left:40px;right:40px;background-image:url(img/progress-bar-track.png)}.rpgui-progress-fill{top:9px;bottom:8px;left:0;width:100%;background-image:url(img/progress.png)}.rpgui-progress-fill.blue{background-image:url(img/progress-blue.png)}.rpgui-progress-fill.green{background-image:url(img/progress-green.png)}.rpgui-progress-fill.red{background-image:url(img/progress-red.png)}.rpgui-content input[type=radio].rpgui-radio{display:none}.rpgui-content input[type=radio].rpgui-radio+label{background:url(img/radio-off.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px;margin-top:8px;margin-bottom:8px}.rpgui-content input[type=radio].rpgui-radio:checked+label{background:url(img/radio-on.png) no-repeat;line-height:24px;display:inline-block;background-size:auto 100%;padding-left:34px;height:24px}.rpgui-content .rpgui-radio.golden+label{background:url(img/radio-golden-off.png) no-repeat!important;background-size:auto 100%!important}.rpgui-content .rpgui-radio.golden:checked+label{background:url(img/radio-golden-on.png) no-repeat!important;background-size:auto 100%!important}.rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:18px}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-image:url(img/scrollbar-track.png);background-size:18px 60px;background-repeat:repeat-y}.rpgui-content ::-webkit-scrollbar-thumb,.rpgui-content::-webkit-scrollbar-thumb{background-image:url(img/scrollbar-thumb.png);background-size:100% 100%;background-repeat:no-repeat}.rpgui-content ::-webkit-scrollbar-button,.rpgui-content::-webkit-scrollbar-button{background-image:url(img/scrollbar-button.png);background-size:100% 100%;background-repeat:no-repeat}.rpgui-content :disabled,.rpgui-content :disabled+.rpgui-dropdown-imp,.rpgui-content :disabled+.rpgui-dropdown-imp+.rpgui-dropdown-imp,.rpgui-content :disabled+.rpgui-list-imp,.rpgui-content input[type=checkbox]:disabled+label,.rpgui-content input[type=radio]:disabled+label,.rpgui-content input[type=range]:disabled+.rpgui-slider-container,.rpgui-disabled{cursor:url(img/cursor/default.png),auto;-webkit-filter:grayscale(1);-webkit-filter:grayscale(100%);filter:grayscale(100%);filter:url(#greyscale);filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");filter:gray;color:#999}.rpgui-slider-container{height:20px;width:100%;margin-top:15px;margin-bottom:15px;position:relative}.rpgui-slider-left-edge,.rpgui-slider-right-edge{width:20px;background-size:100% 100%;height:20px}.rpgui-slider-left-edge{position:absolute;left:0;background-image:url(img/slider-left.png)}.rpgui-slider-right-edge{position:absolute;right:0;background-image:url(img/slider-right.png)}.rpgui-slider-track{position:absolute;height:20px;left:0;right:0;background-image:url(img/slider-track.png);background-repeat:repeat-x;background-size:24px 100%}.rpgui-slider-thumb{position:absolute;height:30px;width:15px;margin-top:-5px;left:40px;background-image:url(img/slider-thumb.png);background-size:100% 100%}.rpgui-slider-container.golden{height:30px;width:100%;margin-top:15px;margin-bottom:15px;position:relative}.rpgui-slider-left-edge.golden{position:absolute;height:30px;width:30px;left:0;background-image:url(img/slider-left-golden.png);background-size:100% 100%}.rpgui-slider-right-edge.golden{position:absolute;height:30px;width:30px;right:0;background-image:url(img/slider-right-golden.png);background-size:100% 100%}.rpgui-slider-track.golden{position:absolute;height:30px;left:0;right:0;background-image:url(img/slider-track-golden.png);background-repeat:repeat-x;background-size:40px 100%}.rpgui-slider-thumb.golden{position:absolute;height:36px;width:18px;margin-top:-4px;left:40px;background-image:url(img/slider-thumb-golden.png);background-size:100% 100%}
\ No newline at end of file
diff --git a/dist/rpgui.min.js b/dist/rpgui.min.js
deleted file mode 100644
index 699a639..0000000
--- a/dist/rpgui.min.js
+++ /dev/null
@@ -1 +0,0 @@
-RPGUI=function(){function e(e){var n=e.nextSibling;if(!n||"LABEL"!==n.tagName)throw"After a '"+l+"' there must be a label!";c.copy_event_listeners(e,n),function(e,n){n.addEventListener("click",function(){e.disabled||c.set_value(e,!e.checked)})}(e,n)}function n(e){u=null,window.removeEventListener("mousemove",s)}function t(e){var n=e.target||e.srcElement;if(c.has_class(n,p)){u=n;var t=u.getBoundingClientRect();_={x:t.left-e.clientX,y:t.top-e.clientY},n.style.zIndex=f++,window.addEventListener("mousemove",s,!0)}}function s(e){u&&(u.style.position="absolute",u.style.left=e.clientX+_.x+"px",u.style.top=e.clientY+_.y+"px")}function a(e){progress_container=e,c.insert_after(progress_container,e);var n=c.create_element("div");c.add_class(n,"rpgui-progress-track"),progress_container.appendChild(n);var t=c.create_element("div");c.add_class(t,"rpgui-progress-left-edge"),progress_container.appendChild(t);var s=c.create_element("div");c.add_class(s,"rpgui-progress-right-edge"),progress_container.appendChild(s);var a=c.create_element("div");c.add_class(a,"rpgui-progress-fill"),n.appendChild(a),c.has_class(e,"blue")&&(a.className+=" blue"),c.has_class(e,"red")&&(a.className+=" red"),c.has_class(e,"green")&&(a.className+=" green");var i=void 0!==e.dataset.value?parseFloat(e.dataset.value):1;c.set_value(e,i)}function i(e){var n=e.nextSibling;if(!n||"LABEL"!==n.tagName)throw"After a '"+v+"' there must be a label!";c.copy_event_listeners(e,n),function(e,n){n.addEventListener("click",function(){e.disabled||c.set_value(e,!0)})}(e,n)}function r(e){var n="<label>&#9660;</label> ",t=c.create_element("p");e.id&&(t.id=e.id+"-rpgui-dropdown-head"),c.add_class(t,"rpgui-dropdown-imp rpgui-dropdown-imp-header"),c.insert_after(t,e);var s=c.create_element("ul");e.id&&(s.id=e.id+"-rpgui-dropdown"),c.add_class(s,"rpgui-dropdown-imp"),c.insert_after(s,t);var a=t.getBoundingClientRect();s.style.position="absolute",s.style.width=a.right-a.left-14+"px",s.style.display="none",e.style.display="none";for(var i=0;i<e.children.length;++i){var r=e.children[i];if("OPTION"==r.tagName){var o=c.create_element("li");o.innerHTML=r.innerHTML,s.appendChild(o),c.copy_event_listeners(r,o),function(e,t,s,a,i){s.addEventListener("click",function(){a.innerHTML=n+t.innerHTML,i.style.display="none",t.selected=!0,c.fire_event(e,"change")})}(e,r,o,t,s)}}!function(e,n,t){t.onclick=function(){if(!e.disabled){var t=n.style.display;n.style.display="none"==t?"block":"none"}},n.onmouseleave=function(){n.style.display="none"}}(e,s,t),function(e,t,s){_on_change=function(){-1!=e.selectedIndex?t.innerHTML=n+e.options[e.selectedIndex].text:t.innerHTML=n,s.style.display="none"},e.addEventListener("change",_on_change),_on_change()}(e,t,s)}function o(e){e.size||(e.size=3);var n=c.create_element("ul");e.id&&(n.id=e.id+"-rpgui-list"),c.add_class(n,"rpgui-list-imp"),e.parentNode.insertBefore(n,e.nextSibling),e.style.display="none";for(var t=[],s=0;s<e.children.length;++s){var a=e.children[s];if("OPTION"==a.tagName){var i=c.create_element("li");i.innerHTML=a.innerHTML,n.appendChild(i),i.dataset.rpguivalue=a.value,t.push(i),c.copy_event_listeners(a,i),function(e,n,t,s,a){t.addEventListener("click",function(){e.disabled||(n.selected=!0,c.fire_event(e,"change"))})}(e,a,i,n,t)}}if(t.length&&e.size){var r=t[0].offsetHeight;n.style.height=r*e.size+"px"}!function(e,n){function t(e){for(var t=0;t<n.length;++t){var s=n[t];s.dataset.rpguivalue==e.value?c.add_class(s,"rpgui-selected"):c.remove_class(s,"rpgui-selected")}}e.addEventListener("change",function(){t(this)}),t(e)}(e,t)}function d(e){var n=c.has_class(e,"golden")?" golden":"",t=c.create_element("div");e.id&&(t.id=e.id+"-rpgui-slider"),c.copy_css(e,t),c.add_class(t,"rpgui-slider-container"+n),c.insert_after(t,e),t.style.width=e.offsetWidth+"px";var s=c.create_element("div");c.add_class(s,"rpgui-slider-track"+n),t.appendChild(s);var a=c.create_element("div");c.add_class(a,"rpgui-slider-left-edge"+n),t.appendChild(a);var i=c.create_element("div");c.add_class(i,"rpgui-slider-right-edge"+n),t.appendChild(i);var r=c.create_element("div");c.add_class(r,"rpgui-slider-thumb"+n),t.appendChild(r),e.style.display="none",c.copy_event_listeners(e,t);var o={mouse_down:!1};!function(e,n,t,s,a,i,r){function o(e){var n=u+Math.round(e/p*(_-u))-1;d(n)}function d(n){e.disabled||e.value==n||c.set_value(e,n)}function l(){var n=p/(_-u),s=Math.round(parseFloat(e.value)-u);t.style.left=Math.floor(.25*f)+s*n+"px"}var u=parseFloat(e.min),_=parseFloat(e.max),f=i.offsetWidth+r.offsetWidth,p=s.offsetWidth-f;n.addEventListener("mouseup",function(e){a.mouse_down=!1}),window.addEventListener("mouseup",function(e){a.mouse_down=!1}),s.addEventListener("mousedown",function(e){a.mouse_down=!0,o(e.offsetX||e.layerX)}),n.addEventListener("mousedown",function(e){a.mouse_down=!0}),r.addEventListener("mousedown",function(e){d(u)}),i.addEventListener("mousedown",function(e){d(_)}),r.addEventListener("mousemove",function(e){a.mouse_down&&d(u)}),i.addEventListener("mousemove",function(e){a.mouse_down&&d(_)}),s.addEventListener("mousemove",function(n){a.mouse_down&&!e.disabled&&o(n.offsetX||n.layerX)}),e.addEventListener("change",function(e){l()}),l()}(e,t,r,s,o,i,a)}var c=c||{};c.version=1.03,c.author="Ronen Ness",c.init_on_load=!0,window.addEventListener("load",function(){c.init_on_load&&c.init()}),c.init=function(){if(c._was_init)throw"RPGUI was already init!";for(var e=0;e<c.__init_list.length;++e)c.__init_list[e]();c._was_init=!0},c.__init_list=[],c.on_load=function(e){c._was_init&&e(),c.__init_list.push(e)},c.__update_funcs={},c.__create_funcs={},c.__get_funcs={},c.__set_funcs={},c.create=function(e,n){if(!c.__create_funcs[n])throw"Not a valid rpgui type! options: "+Object.keys(c.__create_funcs);e.dataset.rpguitype=n,c.__create_funcs[n](e)},c.update=function(e){var n=e.dataset.rpguitype;c.__update_funcs[n]?c.__update_funcs[n](e):c.fire_event(e,"change")},c.set_value=function(e,n){var t=e.dataset.rpguitype;c.__set_funcs[t]?c.__set_funcs[t](e,n):e.value=n,c.update(e)},c.get_value=function(e){var n=e.dataset.rpguitype;return c.__get_funcs[n]?c.__get_funcs[n](e):e.value};var l="rpgui-checkbox";c.__create_funcs.checkbox=function(n){c.add_class(n,l),e(n)},c.__set_funcs.checkbox=function(e,n){e.checked=n},c.__get_funcs.checkbox=function(e){return e.checked},c.on_load(function(){for(var e=document.getElementsByClassName(l),n=0;n<e.length;++n)c.create(e[n],"checkbox")}),c.on_load(function(){for(var e=document.getElementsByClassName("rpgui-content"),n=0;n<e.length;++n){var t=e[n];c.prevent_drag(t),c.set_cursor(t,"default")}});var u=null,_=null,f=1e3,p="rpgui-draggable";c.__create_funcs.draggable=function(e){e.draggable=!1,e.ondragstart=function(){return!1},c.add_class(e,p),e.addEventListener("mousedown",t)},c.on_load(function(){for(var e=document.getElementsByClassName(p),t=0;t<e.length;++t)c.create(e[t],"draggable");window.addEventListener("mouseup",n)});var g="rpgui-progress";c.__create_funcs.progress=function(e){c.add_class(e,g),a(e)},c.__set_funcs.progress=function(e,n){var t=c.get_child_with_class(e,"rpgui-progress-track"),s=c.get_child_with_class(t,"rpgui-progress-fill");c.get_child_with_class(e,"rpgui-progress-left-edge"),c.get_child_with_class(e,"rpgui-progress-right-edge");s.style.left="0px",s.style.width=100*n+"%"},c.on_load(function(){for(var e=document.getElementsByClassName(g),n=0;n<e.length;++n)c.create(e[n],"progress")});var v="rpgui-radio";c.__create_funcs.radio=function(e){c.add_class(e,v),i(e)},c.__set_funcs.radio=function(e,n){e.checked=n},c.__get_funcs.radio=function(e){return e.checked},c.on_load(function(){for(var e=document.getElementsByClassName(v),n=0;n<e.length;++n)c.create(e[n],"radio")});var h="rpgui-dropdown";c.__create_funcs.dropdown=function(e){c.add_class(e,h),r(e)},c.on_load(function(){for(var e=document.getElementsByClassName(h),n=0;n<e.length;++n)c.create(e[n],"dropdown")});var m="rpgui-list";c.__create_funcs.list=function(e){c.add_class(e,m),o(e)},c.on_load(function(){for(var e=document.getElementsByClassName(m),n=0;n<e.length;++n)c.create(e[n],"list")});var y="rpgui-slider";return c.__create_funcs.slider=function(e){c.add_class(e,y),d(e)},c.on_load(function(){for(var e=document.getElementsByClassName(y),n=0;n<e.length;++n)c.create(e[n],"slider")}),c.create_element=function(e){return e=document.createElement(e)},c.set_cursor=function(e,n){c.add_class(e,"rpgui-cursor-"+n)},c.prevent_drag=function(e){},c.copy_css=function(e,n){n.style.cssText=e.style.cssText},c.has_class=function(e,n){return(" "+e.className+" ").indexOf(" "+n+" ")>-1},c.add_class=function(e,n){c.has_class(e,n)||(e.className+=" "+n)},c.get_child_with_class=function(e,n){for(var t=0;t<e.childNodes.length;t++)if(c.has_class(e.childNodes[t],n))return e.childNodes[t]},c.remove_class=function(e,n){e.className=(" "+e.className+" ").replace(n,""),e.className=e.className.substring(1,e.className.length-1)},c.fire_event=function(e,n){if("createEvent"in document){var t=document.createEvent("HTMLEvents");t.initEvent(n,!1,!0),e.dispatchEvent(t)}else e.fireEvent("on"+n)},c.copy_event_listeners=function(e,n){if("function"==typeof getEventListeners){var t=getEventListeners(e);for(var s in t)t[s].forEach(function(e){n.addEventListener(s,e.listener,e.useCapture)})}for(attr in e)0===attr.indexOf("on")&&(n[attr]=e[attr])},c.insert_after=function(e,n){n.parentNode.insertBefore(e,n.nextSibling)},c}();
\ No newline at end of file
diff --git a/font/OFL.txt b/font/OFL.txt
new file mode 100644
index 0000000..70041e1
--- /dev/null
+++ b/font/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2012 The Press Start 2P Project Authors (cody@zone38.net), with Reserved Font Name "Press Start 2P".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/font/PressStart2P-Regular.ttf b/font/PressStart2P-Regular.ttf
new file mode 100644
index 0000000..2442aff
Binary files /dev/null and b/font/PressStart2P-Regular.ttf differ
diff --git a/includes/dashboard.php b/includes/dashboard.php
index d4047e5..20ba694 100644
--- a/includes/dashboard.php
+++ b/includes/dashboard.php
@@ -36,7 +36,7 @@
 </style>
 </head>
 <body class="rpgui-content" style="display: flex; justify-content: center;">
-  <div class="rpgui-container framed" style="margin: 32px; width: 100%; max-width: 600px;">
+  <div class="rpgui-container framed" style="margin: 32px; width: 100%; height: fit-content; max-width: 600px;">
     <div style="text-align: right;">
       <form action="../includes/logout.php" method="POST" class="title-bar-controls">
         <button class="rpgui-button" type="submit">Exit</button>
@@ -44,7 +44,7 @@
     </div>
     
     <main>
-      <h1 style="text-align: center;">My ToDo List</h1>
+      <h1 style="text-align: center;">My Quests Log</h1>
       <p style="text-align: center;">"I must finish all of these!"</p>
       <hr class="golden">
       <div>
@@ -65,15 +65,17 @@
           <div>
             <button class="rpgui-button" type="button" id="edit-task" disabled>Edit</button>
             <button class="rpgui-button" type="button" id="delete-task" disabled>Delete</button>
-          </div>
+          </div>  
         </div>
       </div>
 
-      <div class="rpgui-container framed-grey" style="width: 80%; margin: auto;">
+      <div class="rpgui-container framed-grey" style="width: 90%; margin: auto;">
         <h2 style="text-align: center;">Tasks</h2>
         <hr>
-        <div id="task-body" style="width: 80%; margin: auto; word-break: break-all;">
-          <!-- ajax will insert the fetched task data here... -->
+        <div style="overflow-y: auto; height: 400px;">
+          <div id="task-body" style="width: 80%; margin: auto; word-break: break-all;">
+            <!-- ajax will insert the fetched task data here... -->
+          </div>
         </div>
       </div>
       
diff --git a/includes/edit_task.php b/includes/edit_task.php
new file mode 100644
index 0000000..e69de29
diff --git a/js/tasks.js b/js/tasks.js
index 7d80984..03a6a8a 100644
--- a/js/tasks.js
+++ b/js/tasks.js
@@ -1,8 +1,7 @@
 const addTaskForm = document.getElementById('add-task-form');
 
-
-// functions
-function loadTasks(){ // fetching tasks on database
+//===== LOAD TASKS =====//
+function loadTasks(){
   fetch('./includes/fetch_tasks.php')
   .then(function(response){
     return response.json();
@@ -63,7 +62,8 @@ function setDisabledAttributes(){
   document.getElementById('delete-task').setAttribute('disabled', true);
 };
 
-function addTask(){ // adding task on database
+//===== ADD TASK =====//
+function addTask(){
   const taskInput = document.getElementById('task-name');
   const formData = new FormData(addTaskForm);
   const taskName = formData.get('task-name').trim();
@@ -97,6 +97,12 @@ function addTask(){ // adding task on database
   });
 }
 
+//===== EDIT TASK =====//
+function editTask(){
+  
+}
+
+//===== DELETE TASK =====//
 function deleteTask(){
   const checkboxes = document.querySelectorAll('#task-body input[type="checkbox"]');
   let isCheckedArray = [];
diff --git a/login.php b/login.php
index 7507a89..4a43e7b 100644
--- a/login.php
+++ b/login.php
@@ -53,12 +53,12 @@
   <script src="./dist/rpgui.js"></script>
 </head>
 <body class="rpgui-content" style="display: flex; justify-content: center;">
-  <div class="rpgui-container framed" style="margin: 32px; width: 100%; max-width: 600px;">
+  <div class="rpgui-container framed" style="margin: 32px; width: 100%; height: fit-content; max-width: 600px;">
 
     <main>
       <h1 style="text-align: center;">Log in</h1>
       <p>Fill in the information below to access your account.</p>
-      <div class="rpgui-container framed-grey" style="width: 80%; margin: auto;">
+      <div class="rpgui-container framed-grey" style="width: 90%; margin: auto;">
         <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
           <input type="text" name="username" placeholder="username">
           <input type="password" name="pwd" placeholder="password">
diff --git a/rpg-background.jpg b/rpg-background.jpg
new file mode 100644
index 0000000..df9a9f4
Binary files /dev/null and b/rpg-background.jpg differ
diff --git a/signup.php b/signup.php
index a7fe8d1..fd46f19 100644
--- a/signup.php
+++ b/signup.php
@@ -47,7 +47,7 @@
   <script src="./dist/rpgui.js"></script>
 </head>
 <body class="rpgui-content" style="display: flex; justify-content: center;">
-  <div class="rpgui-container framed" style="margin: 32px; width: 100%; max-width: 600px;">
+  <div class="rpgui-container framed" style="margin: 32px; width: 100%; height: fit-content; max-width: 600px;">
 
     <main>
       <h1 style="text-align: center;">Sign up</h1>
@@ -56,7 +56,7 @@
         <li>Choose a password that is atleast 12 characters long.</li>
         <li>Use a strong password. Combination of uppercase, lowercase, numbers, and special characters.</li>
       </ul>
-      <div class="rpgui-container framed-grey" style="width: 80%; margin: auto;">
+      <div class="rpgui-container framed-grey" style="width: 90%; margin: auto;">
         <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="POST">
           <input type="text" name="username" placeholder="username">
           <input type="text" name="email" placeholder="email">