Add Loader-Spinner

Style Settings, re-add api-url-field

Website/styles/index.css

@@ -2,7 +2,7 @@
     --background-color: #030304;
     --second-background-color: white;
     --primary-color: #f5a9b8;
-    --secondary-color:  #5bcefa;
+    --secondary-color: #5bcefa;
     --blur-background: rgba(245, 169, 184, 0.58);
     --accent-color: #fff;
     /* --primary-color: green;
@@ -11,6 +11,9 @@
     --accent-color: olive; */
     --topbar-height: 60px;
     box-sizing: border-box;
+    scrollbar-color: var(--primary-color) var(--second-background-color);
+    scroll-behavior: smooth;
+    scrollbar-width: thin;
 }
 
 body{

Website/styles/loader.css

@@ -0,0 +1,80 @@
+span[is-loading="done"] {
+    display: none;
+}
+
+span[is-loading="loading"] {
+    transform: rotateZ(45deg);
+    perspective: 1000px;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    color: var(--second-background-color);
+    position: fixed;
+    background-color: var(--secondary-color);
+    background-blend-mode: lighten;
+}
+
+span[is-loading="loading"]:before,
+span[is-loading="loading"]:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: inherit;
+    height: inherit;
+    border-radius: 50%;
+    transform: rotateX(70deg);
+    animation: 1s spin linear infinite;
+}
+span[is-loading="loading"]:after {
+    color: var(--primary-color);
+    transform: rotateY(70deg);
+    animation-delay: .4s;
+}
+
+@keyframes rotate {
+    0% {
+        transform: translate(-50%, -50%) rotateZ(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotateZ(360deg);
+    }
+}
+
+@keyframes rotateccw {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(-360deg);
+    }
+}
+
+@keyframes spin {
+    0%,
+    100% {
+        box-shadow: .2em 0px 0 0px currentcolor;
+    }
+    12% {
+        box-shadow: .2em .2em 0 0 currentcolor;
+    }
+    25% {
+        box-shadow: 0 .2em 0 0px currentcolor;
+    }
+    37% {
+        box-shadow: -.2em .2em 0 0 currentcolor;
+    }
+    50% {
+        box-shadow: -.2em 0 0 0 currentcolor;
+    }
+    62% {
+        box-shadow: -.2em -.2em 0 0 currentcolor;
+    }
+    75% {
+        box-shadow: 0px -.2em 0 0 currentcolor;
+    }
+    87% {
+        box-shadow: .2em -.2em 0 0 currentcolor;
+    }
+}

Website/styles/mangaCover.css

@@ -1,25 +1,24 @@
-.MangaItem-Connector {
-    flex-grow: 0;
-    height: 14pt;
-    font-size: 12pt;
-    border-radius: 9pt;
-    background-color: var(--primary-color);
-    padding: 2pt 17px;
-    color: black;
-    width: fit-content;
-    margin: 10px 0;
-}
-
 .MangaItem{
     cursor: pointer;
     background-color: var(--secondary-color);
-    width: 180px;
+    width: 200px;
     height: 300px;
     border-radius: 5px;
-    margin: 10px 10px;
-    padding: 14px 20px;
+    overflow: hidden;
     position: relative;
     flex-shrink: 0;
+    display: grid;
+    grid-template-columns: 200px 600px;
+    grid-template-rows: 80px 190px 30px;
+    grid-template-areas:
+        "cover tags"
+        "cover description"
+        "cover footer";
+    margin: 5px;
+}
+
+.MangaItem[is-clicked="clicked"]{
+    width: 800px;
 }
 
 .MangaItem::after{
@@ -33,7 +32,7 @@
 }
 
 .MangaItem > * {
-    z-index: 1;
+    z-index: 2;
     position: relative;
 }
 
@@ -41,40 +40,62 @@
     background: initial !important;
 }
 
+.MangaItem-Connector {
+    grid-area: cover;
+    top: 10px;
+    left: 10px;
+    flex-grow: 0;
+    height: 14pt;
+    font-size: 12pt;
+    border-radius: 9pt;
+    background-color: var(--primary-color);
+    padding: 2pt 17px;
+    color: black;
+    width: fit-content;
+    z-index: 1;
+}
+
 .MangaItem-Name{
+    grid-area: cover;
     width: fit-content;
     font-size: 16pt;
     font-weight: bold;
     color: white;
-    margin: 5px 0 !important;
+    top: 50px;
+    left: 10px;
+    margin: 0;
+    max-width: calc(100% - 20px);
+    z-index: 1;
 }
 
 .MangaItem-Website {
+    grid-area: cover;
     display: block;
     height: 13px;
     width: 13px;
-    position: absolute;
+    margin: 0px 0px auto auto;
     top: 12px;
     right: 10px;
-    z-index: 2;
+    z-index: 1;
 }
 
 .MangaItem-Status {
+    grid-area: cover;
     display:block;
     height: 15px;
     width: 15px;
     border-radius: 50%;
     position: absolute;
-    top: 15px;
+    top: 14px;
     right: 35px;
-    z-index: 2;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
+    z-index: 1;
 }
 
 .MangaItem-Status::after {
     content: attr(release-status);
     position: absolute;
-    top: 0;
+    top: -2.5pt;
     right: 0;
 
     visibility: hidden;
@@ -96,7 +117,7 @@
     visibility:visible;
 }
 
-.MangaItem-Status[release-status="Ongoing"]{
+.MangaItem-Status[release-status="Continuing"]{
     background-color: limegreen;
 }
 
@@ -112,7 +133,7 @@
     background-color: firebrick;
 }
 
-.MangaItem-Status[release-status="Upcoming"]{
+.MangaItem-Status[release-status="Unreleased"]{
     background-color: aqua;
 }
 
@@ -124,6 +145,7 @@
     position: absolute;
     top: 0;
     left: 0;
+    grid-area: cover;
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -131,35 +153,38 @@
     z-index: 0;
 }
 
-.MangaItem p {
-    margin: 0;
-}
-
 .MangaItem[is-clicked="not-clicked"] .MangaItem-Description, .MangaItem[is-clicked="not-clicked"] .MangaItem-Tags, .MangaItem[is-clicked="not-clicked"] .MangaItem-Props{
     display: none !important;
 }
 
 .MangaItem[is-clicked="clicked"] .MangaItem-Description, .MangaItem[is-clicked="clicked"] .MangaItem-Tags, .MangaItem[is-clicked="clicked"] .MangaItem-Props{
     display: block;
-    width: 80vw;
+    width: calc(100% - 6px);
     background-color: white;
-    padding: 3px;
+    padding: 0 3px;
+    overflow-y: auto;
 }
 
 .MangaItem-Tags {
+    grid-area: tags;
     display: flex !important;
     flex-direction: row;
     flex-wrap: wrap;
+    scrollbar-width: thin;
+    border-bottom: 1px solid var(--secondary-color);
+    justify-content: start;
+    align-content: start;
 }
 
 .MangaItem-Tags > * {
     display: flex;
     flex-direction: row;
     width: max-content;
-    margin: 2px 1px !important;
+    margin: 1px 2px !important;
     white-space: nowrap;
     color: white;
-    padding: 2px;
+    padding: 3px 2px 4px 2px;
+    position: relative;
 }
 
 .MangaItem-Tags > * > * {
@@ -167,8 +192,13 @@
     align-items: center;
 }
 
+.MangaItem-Tags > * > svg {
+    margin: auto 2px !important;
+}
+
 .MangaItem-Tags a, .MangaItem-Tags a:visited {
-    color: blue;
+    color: var(--primary-color);
+    text-decoration: none;
 }
 
 .MangaItem-Author {
@@ -184,12 +214,40 @@
 }
 
 .MangaItem-Description {
+    grid-area: description;
     color: black;
     max-height: 40vh;
+    scrollbar-width: thin;
+    border-bottom: 1px solid var(--secondary-color);
 }
 
 .MangaItem-Props {
+    grid-area: footer;
     display: flex !important;
     flex-direction: row;
     justify-content: flex-end;
+    width: 100%;
+    height: 100%;
+}
+
+.MangaItem-Props > * {
+    margin: 3px;
+    border: 1px solid var(--primary-color);
+    border-radius: 3px;
+    background-color: transparent;
+    width: fit-content;
+}
+
+.MangaItem-Props-Threshold {
+    color: black;
+    padding: 0 3px;
+}
+
+.MangaItem-Props-Threshold > input {
+    margin: 0 3px;
+    width: 50px;
+}
+
+.MangaItem-Props-Threshold-Available{
+    text-decoration: underline;
 }

Website/styles/monitorMangaList.css

@@ -4,10 +4,8 @@
     flex-flow: row;
     flex-wrap: nowrap;
     flex-grow: 1;
-    height: calc(100vh - 100px);
-    overflow-y: scroll;
-    scrollbar-color: var(--accent-color) var(--primary-color);
-    scrollbar-width: thin;
+    overflow-y: auto;
+    margin: 5px 0;
 }
 
 .MangaActionButtons  {

Website/styles/notificationConnector.css

@@ -0,0 +1,69 @@
+.NotificationConnectorItem{
+    position: relative;
+    display: grid;
+    width: calc(100% - 10px);
+    grid-template-columns: 40% calc(60% - 10px);
+    margin: 0 auto;
+    padding: 5px;
+    border-radius: 5px;
+    grid-template-rows: 30px 30px auto 30px;
+    column-gap: 4px;
+    row-gap: 4px;
+    grid-template-areas:
+        "name name"
+        "url explanation "
+        "headers body"
+        "footer footer";
+    align-items: center;
+    border: 1px solid var(--primary-color);
+}
+
+.NotificationConnectorItem p{
+    margin: 0;
+}
+
+.NotificationConnectorItem-Name{
+    grid-area: name;
+    justify-self: flex-start;
+}
+
+.NotificationConnectorItem-Url{
+    grid-area: url;
+}
+
+.NotificationConnectorItem-Body{
+    grid-area: body;
+    width: calc(100% - 2px);
+    height: max-content;
+    min-height: 100%;
+    padding: 0;
+    margin: 0;
+    resize: vertical;
+}
+
+.NotificationConnectorItem-Explanation{
+    grid-area: explanation;
+    align-self: flex-end;
+}
+
+.NotificationConnectorItem-Headers{
+    grid-area: headers;
+    justify-self: flex-end;
+    align-self: flex-end;
+    display: flex;
+    flex-direction: column;
+}
+.NotificationConnectorItem-Header {
+    display: flex;
+    flex-direction: row;
+}
+
+.NotificationConnectorItem-Header > input {
+    width: 48%;
+}
+
+.NotificationConnectorItem-Save{
+    grid-area: footer;
+    justify-self: flex-end;
+    padding: 0 15px;
+}

Website/styles/popup.css

@@ -38,6 +38,7 @@
     position: absolute;
     top: 40px;
     left: 0;
-    width: 100%;
-    height: calc(100% - 40px);
+    width: calc(100% - 30px);
+    height: calc(100% - 50px);
+    margin: 5px 15px;
 }

Website/styles/search.css

@@ -1,6 +1,6 @@
 #Search{
     position: relative;
-    width: 98vw;
+    width: 100vw;
     margin: auto;
 }
 
@@ -13,6 +13,9 @@
 
 #SearchResults {
     width: 100%;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
 }
 
 #SearchBox select, #SearchBox button, #SearchBox input {
@@ -51,7 +54,7 @@
 #closeSearch {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 10px;
     width: 30px;
     height: 30px;
     filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(20deg) brightness(103%) contrast(101%);

Website/styles/settings.css

@@ -12,4 +12,14 @@
     height: calc(100% - 10px);
     margin: 5px;
     filter: invert(100%) sepia(20%) saturate(7480%) hue-rotate(179deg) brightness(121%) contrast(102%);
+}
+
+#SettingsPopUpBody {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+#SettingsPopUpBody > * {
+    margin: 5px 0;
 }