Initial commit

Resized settings pop-up and fixed scrollable behavior, broke everything inside pop-up (on purpose)

Website/index.html

@@ -56,7 +56,10 @@
         <blur-background id="blurBackgroundSettingsPopup" onclick="
     settingsPopup.style.display = 'none';"></blur-background>
         <popup-window>
-          <popup-title>Settings</popup-title>
+          <titlebar>
+            <popup-title>Settings</popup-title>
+            <popup-close onclick="settingsPopup.style.display = 'none'">&times</popup-close>
+          </titlebar>
           <popup-content>
             <div>
               <p class="title">Download Location:</p>
@@ -105,13 +108,13 @@
               <input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
               <label for="css-style"> Show manga titles and sources on hover</label><br>
             </div>
-            <div>
-              <input type="submit" value="Update" onclick="UpdateSettings()">
-            </div>
             <div>
               <input type="submit" value="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
             </div>
           </popup-content>
+          <titlebar>
+              <apply-settings onclick="UpdateSettings()">Apply Settings</apply-settings>
+          </titlebar>
         </popup-window>
       </popup>
 		

Website/styles/style_default.css

@@ -2,7 +2,7 @@
     --background-color: #030304;
     --second-background-color: #fff;
     --primary-color: #f5a9b8;
-    --secondary-color: #5bcefa;
+    --secondary-color:  #5bcefa;
     --accent-color: #fff;
     --topbar-height: 60px;
     box-sizing: border-box;
@@ -153,20 +153,6 @@ content {
     z-index: 300;
 }
 
-#settingsPopup popup-content{
-    flex-direction: column;
-    align-items: start;
-    margin: 15px 10px;
-}
-
-#settingsPopup popup-content > * {
-    margin: 5px 10px;
-}
-
-#settingsPopup popup-content .title {
-    font-weight: bolder;
-}
-
 #addPublication {
     cursor: pointer;
     background-color: var(--secondary-color);
@@ -250,6 +236,7 @@ publication-name{
     width: fit-content;
     font-size: 16pt;
     font-weight: bold;
+    color: white;
 }
 
 publication-status {
@@ -337,49 +324,93 @@ popup{
     flex-direction: column;
 }
 
+titlebar {
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    background-color: var(--primary-color);
+    color: var(--accent-color);
+    font-weight: bolder;
+    padding: 5px 10px;
+    margin: 0;
+    align-items: center;
+    position: relative;
+}
+
+popup-title {
+    font-size: 14pt;
+    display: flex;
+    margin-top: 3px;
+    margin-left: 5px;
+}
+
+popup-close {
+    border: none;
+    background-color: inherit;
+    color: inherit;
+    font-weight: inherit;
+    font-size: 16px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    display: flex;
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: 5;
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+    align-content: center;
+    justify-content: center;
+}
+
+popup-close:hover {
+    background-color: var(--secondary-color);
+}
+
+apply-settings {
+    border-style: solid;
+    border-width: 2px;
+    background-color: var(--secondary-color);
+    color: var(--accent-color);
+    font-weight: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    display: flex;
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: -5px;
+    padding: 5px 20px;
+    border-radius: 20px;
+    height: 20px;
+    align-items: center;
+    border-color: var(--primary-color);
+}
+
+apply-settings:hover {
+    border-color: var(--accent-color);
+}
 
 popup popup-window {
     position: absolute;
     z-index: 3;
-    left: 25%;
-    top: 100px;
-    width: 50%;
+    left: 10%;
+    top: 10%;
+    height: 80%;
+    width: 80%;
     display: flex;
     flex-direction: column;
     background-color: var(--second-background-color);
-    border-radius: 3px;
+    border-radius: 15px;
     overflow: hidden;
 }
 
-popup popup-window popup-title {
-    height: 30px;
-    font-size: 14pt;
-    font-weight: bolder;
-    padding: 5px 10px;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    background-color: var(--primary-color);
-    color: var(--accent-color)
-}
-
 popup popup-window popup-content{
-    margin: 15px 10px;
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
-}
-
-popup popup-window popup-content div > * {
-    margin: 2px 3px 0 0;
-}
-
-popup popup-window popup-content input, select {
-    padding: 3px 4px;
-    width: 130px;
-    border: 1px solid lightgrey;
-    background-color: var(--accent-color);
-    border-radius: 3px;
+    height: calc(100% - 60px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color:  var(--secondary-color) var(--accent-color);
 }
 
 #newMangaPopup > div {