diff --git a/Website/apiConnector.js b/Website/apiConnector.js index 580b821..70e6a7c 100644 --- a/Website/apiConnector.js +++ b/Website/apiConnector.js @@ -173,31 +173,82 @@ function RefreshLibraryMetadata() { PostData(uri); } +//Komga function UpdateKomga(komgaUrl, komgaAuth){ var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; PostData(uri); } +function ResetKomga(){ + var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Komga`; +} + +function TestKomga(komgaUrl, komgaAuth){ + var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; + PostData(uri); +} + + +//Kavita function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){ var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`; PostData(uri); } +function ResetKavita(){ + var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Kavita`; +} + +function TestKavita(kavitaUrl, kavitaUsername, kavitaPassword){ + var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`; + PostData(uri); +} + +//Gotify function UpdateGotify(gotifyUrl, gotifyAppToken){ var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`; PostData(uri); } +function ResetGotify(){ + var uri = `${apiUri}/NotificationConnectors/Reset?libraryConnector=Gotify`; +} + +function TestGotify(gotifyUrl, gotifyAppToken){ + var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`; + PostData(uri); +} + +//LunaSea function UpdateLunaSea(lunaseaWebhook){ var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`; PostData(uri); } +function ResetLunaSea(){ + var uri = `${apiUri}/NotificationConnectors/Reset?libraryConnector=LunaSea`; +} + +function TestLunaSea(lunaseaWebhook){ + var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`; + PostData(uri); +} + +//Ntfy function UpdateNtfy(ntfyEndpoint, ntfyAuth){ var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`; PostData(uri); } +function ResetNtfy(){ + var uri = `${apiUri}/NotificationConnectors/Reset?libraryConnector=Ntfy`; +} + +function TestNtfy(ntfyEndpoint, ntfyAuth){ + var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`; + PostData(uri); +} + function UpdateUserAgent(userAgent){ var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`; PostData(uri); @@ -216,5 +267,6 @@ function CancelJob(jobId){ async function GetLogmessages(count){ var uri = `${apiUri}/LogMessages?count=${count}`; let json = await GetData(uri); + console.log(json); return json; } \ No newline at end of file diff --git a/Website/connector-icons/gotify-logo.png b/Website/connector-icons/gotify-logo.png new file mode 100644 index 0000000..5d29004 Binary files /dev/null and b/Website/connector-icons/gotify-logo.png differ diff --git a/Website/connector-icons/kavita.png b/Website/connector-icons/kavita.png new file mode 100644 index 0000000..00a4ba7 Binary files /dev/null and b/Website/connector-icons/kavita.png differ diff --git a/Website/connector-icons/komga.svg b/Website/connector-icons/komga.svg new file mode 100644 index 0000000..af9f28d --- /dev/null +++ b/Website/connector-icons/komga.svg @@ -0,0 +1,113 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Website/connector-icons/lunasea.png b/Website/connector-icons/lunasea.png new file mode 100644 index 0000000..868e849 Binary files /dev/null and b/Website/connector-icons/lunasea.png differ diff --git a/Website/connector-icons/ntfy.svg b/Website/connector-icons/ntfy.svg new file mode 100644 index 0000000..8530901 --- /dev/null +++ b/Website/connector-icons/ntfy.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Website/index.html b/Website/index.html index d0b781f..ab12385 100644 --- a/Website/index.html +++ b/Website/index.html @@ -3,7 +3,8 @@ Tranga - + + @@ -56,11 +57,83 @@ - + Settings × - + + +
+ TRANGA +
+ +
+ MANGA SOURCES +
+ +
+ LIBRARY CONNECTORS +
+
+ Komga + + + +
+ Test + Reset + Apply +
+
+
+ Kavita + + + +
+ Test + Reset + Apply +
+
+
+
+ +
+ NOTIFICATION CONNECTORS +
+
+ Gotify + + +
+ Test + Reset + Apply +
+
+
+ LunaSea + +
+ Test + Reset + Apply +
+
+
+ Ntfy + + +
+ Test + Reset + Apply +
+
+
+
+

Download Location:

@@ -69,37 +142,6 @@

API-URI

-
- Komga -
Configured: ✅❌
- - - -
-
- Kavita -
Configured: ✅❌
- - - -
-
- Gotify -
Configured: ✅❌
- - -
-
- LunaSea -
Configured: ✅❌
- -
-
- Ntfy -
Configured: ✅❌
- - -
UserAgent
@@ -108,13 +150,14 @@
-
- -
- - Apply Settings - + +
+ Refresh Library Metadata + Apply Settings +
+ + diff --git a/Website/interaction.js b/Website/interaction.js index 2d8bdb5..87bc1fc 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -59,18 +59,21 @@ function Setup(){ loaderdiv.style.display = 'none'; GetAvailableNotificationConnectors().then((json) => { + //console.log(json); json.forEach(connector => { notificationConnectorTypes[connector.Key] = connector.Value; }); }); GetAvailableLibraryConnectors().then((json) => { + //console.log(json); json.forEach(connector => { libraryConnectorTypes[connector.Key] = connector.Value; }); }); GetAvailableControllers().then((json) => { + //console.log(json); newMangaConnector.replaceChildren(); json.forEach(connector => { var option = document.createElement('option'); @@ -89,10 +92,10 @@ function Setup(){ //console.log(json.styleSheet); if (json.styleSheet == 'hover') { settingMangaHoverCheckbox.checked = true; - document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + document.getElementById('librarystyle').setAttribute('href', 'styles/card_hover.css'); } else { settingMangaHoverCheckbox.checked = false; - document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + document.getElementById('librarystyle').setAttribute('href', 'styles/card_compact.css'); } }); setInterval(() => { @@ -105,11 +108,11 @@ Setup(); function updateCSS(){ if (document.getElementById("mangaHoverCheckbox").checked == true){ ChangeStyleSheet('hover') - document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + document.getElementById('librarystyle').setAttribute('href', 'styles/card_hover.css'); //console.log('Changing theme to mangahover') } else { ChangeStyleSheet('default'); - document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + document.getElementById('librarystyle').setAttribute('href', 'styles/card_compact.css'); //console.log('Changing theme to default') } } @@ -338,11 +341,11 @@ settingUserAgent.addEventListener("keypress", (event) => { if(event.key === "Ent settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); }); function OpenSettings(){ - settingGotifyConfigured.innerText = "❌"; - settingLunaseaConfigured.innerText = "❌"; - settingNtfyConfigured.innerText = "❌"; - settingKavitaConfigured.innerText = "❌"; - settingKomgaConfigured.innerText = "❌"; + settingGotifyConfigured.setAttribute("configuration", "Not Configured"); + settingLunaseaConfigured.setAttribute("configuration", "Not Configured"); + settingNtfyConfigured.setAttribute("configuration", "Not Configured"); + settingKavitaConfigured.setAttribute("configuration", "Not Configured"); + settingKomgaConfigured.setAttribute("configuration", "Not Configured"); settingKomgaUrl.value = ""; settingKomgaUser.value = ""; settingKomgaPass.value = ""; @@ -366,10 +369,10 @@ function OpenSettings(){ //console.log(json.styleSheet); if (json.styleSheet == 'hover') { settingMangaHoverCheckbox.checked = true; - document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css'); + document.getElementById('librarystyle').setAttribute('href', 'styles/card_hover.css'); } else { settingMangaHoverCheckbox.checked = false; - document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css'); + document.getElementById('librarystyle').setAttribute('href', 'styles/card_compact.css'); } }); GetLibraryConnectors().then((json) => { @@ -377,16 +380,16 @@ function OpenSettings(){ json.forEach(connector => { switch(libraryConnectorTypes[connector.libraryType]){ case "Kavita": - settingKavitaConfigured.innerText = "✅"; - settingKavitaUrl.placeholder = connector.baseUrl; - settingKavitaUser.placeholder = "***"; - settingKavitaPass.placeholder = "***"; + settingKavitaConfigured.setAttribute("configuration", "Active"); + settingKavitaUrl.value = connector.baseUrl; + settingKavitaUser.value = "***"; + settingKavitaPass.value = "***"; break; case "Komga": - settingKomgaConfigured.innerText = "✅"; - settingKomgaUrl.placeholder = connector.baseUrl; - settingKomgaUser.placeholder = "***"; - settingKomgaPass.placeholder = "***"; + settingKomgaConfigured.setAttribute("configuration", "Active"); + settingKomgaUrl.value = connector.baseUrl; + settingKomgaUser.value = "***"; + settingKomgaPass.value = "***"; break; default: console.log("Unknown type"); @@ -396,22 +399,22 @@ function OpenSettings(){ }); }); GetNotificationConnectors().then((json) => { - //console.log(json); + console.log(json); json.forEach(connector => { switch(notificationConnectorTypes[connector.notificationConnectorType]){ case "Gotify": - settingGotifyUrl.placeholder = connector.endpoint; - settingGotifyAppToken.placeholder = "***"; - settingGotifyConfigured.innerText = "✅"; + settingGotifyUrl.value = connector.endpoint; + settingGotifyAppToken.value = "***"; + settingGotifyConfigured.setAttribute("configuration", "Active"); break; case "LunaSea": - settingLunaseaConfigured.innerText = "✅"; - settingLunaseaWebhook.placeholder = connector.id; + settingLunaseaConfigured.setAttribute("configuration", "Active"); + settingLunaseaWebhook.value = connector.id; break; case "Ntfy": - settingNtfyConfigured.innerText = "✅"; - settingNtfyEndpoint.placeholder = connector.endpoint; - settingNtfyAuth.placeholder = "***"; + settingNtfyConfigured.setAttribute("configuration", "Active"); + settingNtfyEndpoint.value = connector.endpoint; + settingNtfyAuth.value = "***"; break; default: console.log("Unknown type"); @@ -422,6 +425,43 @@ function OpenSettings(){ }); } +//Functions for clearing/resetting connectors in the settings pop-up +function ClearKomga(){ + settingKomgaUrl.value = ""; + settingKomgaUser.value = ""; + settingKomgaPass.value = ""; + settingKomgaConfigured.setAttribute("configuration", "Connector Not Configured"); + ResetKomga(); +} + +function ClearKavita(){ + settingKavitaUrl.value = ""; + settingKavitaUser.value = ""; + settingKavitaPass.value = ""; + settingKavitaConfigured.setAttribute("configuration", "Connector Not Configured"); + ResetKavita(); +} + +function ClearGotify(){ + settingGotifyUrl.value = ""; + settingGotifyAppToken.value = "" + settingGotifyConfigured.setAttribute("configuration", "Connector Not Configured"); + ResetGotify(); +} + +function ClearLunasea(){ + settingLunaseaWebhook.value = ""; + settingLunaseaConfigured.setAttribute("configuration", "Connector Not Configured"); + ResetLunaSea(); +} + +function ClearNtfy(){ + settingNtfyEndpoint.value = ""; + settingNtfyAuth.value = ""; + settingNtfyConfigured.setAttribute("configuration", "Connector Not Configured"); + ResetNtfy(); +} + function UpdateSettings(){ if(settingApiUri.value != ""){ apiUri = settingApiUri.value; diff --git a/Website/styles/style_default.css b/Website/styles/base.css similarity index 78% rename from Website/styles/style_default.css rename to Website/styles/base.css index 618a9e1..3aa4c77 100644 --- a/Website/styles/style_default.css +++ b/Website/styles/base.css @@ -3,7 +3,12 @@ --second-background-color: #fff; --primary-color: #f5a9b8; --secondary-color: #5bcefa; + --blur-background: rgba(245, 169, 184, 0.58); --accent-color: #fff; + /* --primary-color: green; + --secondary-color: gold; + --blur-background: rgba(86, 131, 36, 0.8); + --accent-color: olive; */ --topbar-height: 60px; box-sizing: border-box; } @@ -153,166 +158,6 @@ content { z-index: 300; } -#addPublication { - cursor: pointer; - background-color: var(--secondary-color); - width: 180px; - height: 300px; - border-radius: 5px; - margin: 10px 10px; - padding: 15px 20px; - position: relative; -} - -#addPublication p{ - width: 100%; - text-align: center; - font-size: 150pt; - vertical-align: middle; - line-height: 300px; - margin: 0; - color: var(--accent-color); -} - -.pill { - flex-grow: 0; - height: 14pt; - font-size: 12pt; - border-radius: 9pt; - background-color: var(--primary-color); - padding: 2pt 17px; - color: black; -} - -publication{ - cursor: pointer; - background-color: var(--secondary-color); - width: 180px; - height: 300px; - border-radius: 5px; - margin: 10px 10px; - padding: 15px 19px; - position: relative; - flex-shrink: 0; -} - -publication::after{ - content: ''; - position: absolute; - left: 0; top: 0; - border-radius: 5px; - width: 100%; height: 100%; - background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); -} - -publication-information { - display: flex; - flex-direction: column; - justify-content: start; -} - -publication-details { - display: flex; - flex-direction: column; - justify-content: start; -} - -publication-information * { - z-index: 1; - color: var(--accent-color); -} - -publication-details * { - z-index: 1; - color: var(--accent-color); -} - -connector-name{ - width: fit-content; - margin: 10px 0; -} - -publication-name{ - width: fit-content; - font-size: 16pt; - font-weight: bold; - color: white; -} - -publication-status { - display:block; - height: 10px; - width: 10px; - border-radius: 50%; - margin: 5px; - position: absolute; - top: 5px; - right: 5px; - z-index: 2; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px; -} - -publication-status::after { - content: attr(release-status); - position: absolute; - top: 0; - right: 0; - - visibility: hidden; - - /*Text Properties*/ - font-size:10pt; - font-weight:bold; - color:white; - text-align: center; - - /*Size*/ - padding: 3px 8px; - border-radius: 6px; - border: 0px; - background-color: inherit; -} - -publication-status:hover::after{ - visibility:visible; -} - - -publication-status[release-status="Ongoing"]{ - background-color: limegreen; -} - -publication-status[release-status="Completed"]{ - background-color: blueviolet; -} - -publication-status[release-status="On Hiatus"]{ - background-color: darkorange; -} - -publication-status[release-status="Cancelled"]{ - background-color: firebrick; -} - -publication-status[release-status="Upcoming"]{ - background-color: aqua; -} - -publication-status[release-status="Status Unavailable"]{ - background-color: gray; -} - -publication img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: 0; - border-radius: 5px; -} - popup{ display: none; width: 100%; @@ -324,15 +169,14 @@ popup{ flex-direction: column; } -titlebar { +border-bar { display: flex; flex-direction: row; - height: 30px; background-color: var(--primary-color); color: var(--accent-color); font-weight: bolder; - padding: 5px 10px; - margin: 0; + padding: 7px 5px; + margin:0; align-items: center; position: relative; } @@ -349,15 +193,15 @@ popup-close { background-color: inherit; color: inherit; font-weight: inherit; - font-size: 16px; + font-size: 27px; 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; + height: 32px; + width: 32px; + border-radius: 16px; align-content: center; justify-content: center; } @@ -366,26 +210,47 @@ popup-close:hover { background-color: var(--secondary-color); } -apply-settings { +border-bar > .button-container { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + margin-right: 0; + margin-left: auto; +} + +border-bar-button { border-style: solid; border-width: 2px; - background-color: var(--secondary-color); - color: var(--accent-color); + background-color: inherit; + color: var(--second-background-color); font-weight: inherit; font-size: inherit; font-family: inherit; display: flex; cursor: pointer; - margin-left: auto; - margin-right: -5px; + margin: 0px 5px; padding: 5px 20px; border-radius: 20px; height: 20px; align-items: center; + border-color: var(--accent-color); + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} + +border-bar-button:hover { + border-color: var(--secondary-color); +} + +border-bar-button.primary { + background-color: var(--secondary-color); + color: var(--accent-color); border-color: var(--primary-color); } -apply-settings:hover { +border-bar-button.primary:hover { border-color: var(--accent-color); } @@ -405,12 +270,161 @@ popup popup-window { popup popup-window popup-content{ display: flex; - align-items: center; + flex-direction: column; + align-items: left; height: calc(100% - 60px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; - scrollbar-color: var(--secondary-color) var(--accent-color); + scrollbar-color: var(--secondary-color) var(--second-background-color); +} + +popup-content > .popup-section { + margin: 5px; + margin-bottom: 10px; + font-size: 10pt; + font-weight: 100; + display: block; + border-top-style: solid; + border-top-width: 1px; + border-top-color: lightgray; + width: 100%; + padding: 10px; +} + +.section-content { + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: wrap; +} + +.section-item { + display: flex; + flex-direction: column; + width: 22%; + min-width: 300px; + height: auto; + border-radius: 10px; + border-style: solid; + border-width: 1px; + border-color: lightgray; + margin: 7px; + padding: 5px; +} + +.section-item > .title { + font-weight: bold; + vertical-align: bottom; + line-height: 32px; + font-size: 12pt; + width: 100%; +} + + +.section-item > .title > img { + width: auto; + height: 32px; + margin: 5px; + vertical-align: middle; + border-radius: 5px; +} + +.section-item > .title > connector-configured { + display:block; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 5px; + float: right; + top: 5px; + right: 5px; +} + +.section-item > .title > connector-configured::after { + display: block; + content: attr(configuration); + float: right; + width: max-content; + width: -webkit-max-content; + width: -mox-max-content; + width: intrinsic; + + visibility: hidden; + + /*Text Properties*/ + font-size:8pt; + font-weight:bold; + color:white; + text-align: right; + + /*Size*/ + padding: 0px 8px; + border-radius: 6px; + border: 0px; + background-color: inherit; +} + +.section-item > .title > connector-configured:hover::after{ + visibility:visible; +} + +.section-item > .title > connector-configured[configuration="Active"] { + background-color: limegreen; +} + +.section-item > .title > connector-configured[configuration="Not Configured"] { + background-color: gray; +} + + + +.section-item > input { + margin: 2px; + padding: 2px; + height: 20px; + border-radius: 10px; + border-style: solid; + outline: none; +} +.section-item > input:focus { + border-color: var(--secondary-color); +} + +.section-buttons-container { + display: flex; + flex-direction: row; + align-items: center; + position: relative; + margin-left: auto; + margin-top: auto; + margin-bottom: 0; + margin-right: 0; +} + +.section-buttons-container > .section-button { + font-size: 12px; + padding: 3px 10px; + margin: 3px; + border-radius: 5px; + border-style: solid; + border-width: 1px; + border-color: lightgray; + font-weight: bold; + color: gray; + cursor: pointer; + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ +} + +.section-button#reset:hover { + color: red; + border-color: red; +} +.section-buttons-container > .section-button:hover { + border-color: var(--secondary-color); + color: var(--secondary-color); } #newMangaPopup > div { @@ -471,7 +485,7 @@ blur-background { height: 100%; position: absolute; left: 0; - background: rgba(245, 169, 184, 0.58); + background: var(--blur-background); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4.5px); -webkit-backdrop-filter: blur(4.5px); diff --git a/Website/styles/card_compact.css b/Website/styles/card_compact.css new file mode 100644 index 0000000..74a6648 --- /dev/null +++ b/Website/styles/card_compact.css @@ -0,0 +1,159 @@ +#addPublication { + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 20px; + position: relative; +} + +#addPublication p{ + width: 100%; + text-align: center; + font-size: 150pt; + vertical-align: middle; + line-height: 300px; + margin: 0; + color: var(--accent-color); +} + +.pill { + flex-grow: 0; + height: 14pt; + font-size: 12pt; + border-radius: 9pt; + background-color: var(--primary-color); + padding: 2pt 17px; + color: black; +} + +publication{ + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 19px; + position: relative; + flex-shrink: 0; +} + +publication::after{ + content: ''; + position: absolute; + left: 0; top: 0; + border-radius: 5px; + width: 100%; height: 100%; + background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); +} + +publication-information { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-details { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-information * { + z-index: 1; + color: var(--accent-color); +} + +publication-details * { + z-index: 1; + color: var(--accent-color); +} + +connector-name{ + width: fit-content; + margin: 10px 0; +} + +publication-name{ + width: fit-content; + font-size: 16pt; + font-weight: bold; + color: white; +} + +publication-status { + display:block; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 5px; + position: absolute; + top: 5px; + right: 5px; + z-index: 2; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px; +} + +publication-status::after { + content: attr(release-status); + position: absolute; + top: 0; + right: 0; + + visibility: hidden; + + /*Text Properties*/ + font-size:10pt; + font-weight:bold; + color:white; + text-align: center; + + /*Size*/ + padding: 3px 8px; + border-radius: 6px; + border: 0px; + background-color: inherit; +} + +publication-status:hover::after{ + visibility:visible; +} + + +publication-status[release-status="Ongoing"]{ + background-color: limegreen; +} + +publication-status[release-status="Completed"]{ + background-color: blueviolet; +} + +publication-status[release-status="On Hiatus"]{ + background-color: darkorange; +} + +publication-status[release-status="Cancelled"]{ + background-color: firebrick; +} + +publication-status[release-status="Upcoming"]{ + background-color: aqua; +} + +publication-status[release-status="Status Unavailable"]{ + background-color: gray; +} + +publication img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; + border-radius: 5px; +} \ No newline at end of file diff --git a/Website/styles/card_hover.css b/Website/styles/card_hover.css new file mode 100644 index 0000000..6d830ed --- /dev/null +++ b/Website/styles/card_hover.css @@ -0,0 +1,172 @@ +#addPublication { + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 20px; + position: relative; +} + +#addPublication p{ + width: 100%; + text-align: center; + font-size: 150pt; + vertical-align: middle; + line-height: 300px; + margin: 0; + color: var(--accent-color); +} + +.pill { + flex-grow: 0; + height: 14pt; + font-size: 12pt; + border-radius: 9pt; + background-color: var(--primary-color); + padding: 2pt 17px; + color: black; +} + +publication{ + cursor: pointer; + background-color: var(--secondary-color); + width: 180px; + height: 300px; + border-radius: 5px; + margin: 10px 10px; + padding: 15px 19px; + position: relative; + flex-shrink: 0; +} + +publication:hover { + background-color: black; +} + +publication:hover::after{ + background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); +} + +publication:hover > publication-information { + display: flex; + opacity:1; +} + +publication::after{ + content: ''; + position: absolute; + left: 0; top: 0; + border-radius: 5px; + width: 100%; height: 100%; + background: none; +} + +publication-information { + display: none; + flex-direction: column; + justify-content: start; +} + +publication-information * { + z-index: 1; + color: white; +} + +connector-name{ + width: fit-content; + margin: 10px 0; +} + +publication-name{ + width: fit-content; + font-size: 16pt; + font-weight: bold; +} + +publication-status { + display:block; + height: 10px; + width: 10px; + border-radius: 50%; + margin: 5px; + position: absolute; + top: 5px; + right: 5px; + z-index: 2; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px; +} + +publication-status::after { + content: attr(release-status); + position: absolute; + top: 0; + right: 0; + + visibility: hidden; + + /*Text Properties*/ + font-size:10pt; + font-weight:bold; + color:white; + text-align: center; + + /*Size*/ + padding: 3px 8px; + border-radius: 6px; + border: 0px; + background-color: inherit; +} + +publication-status:hover::after{ + visibility:visible; +} + + +publication-status[release-status="Ongoing"]{ + background-color: limegreen; +} + +publication-status[release-status="Completed"]{ + background-color: blueviolet; +} + +publication-status[release-status="On Hiatus"]{ + background-color: darkorange; +} + +publication-status[release-status="Cancelled"]{ + background-color: firebrick; +} + +publication-status[release-status="Upcoming"]{ + background-color: aqua; +} + +publication-status[release-status="Status Unavailable"]{ + background-color: gray; +} + + +publication-details { + display: flex; + flex-direction: column; + justify-content: start; +} + +publication-details * { + z-index: 1; + color: var(--accent-color); +} + +publication img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; + border-radius: 5px; +} \ No newline at end of file diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css deleted file mode 100644 index f0a5838..0000000 --- a/Website/styles/style_mangahover.css +++ /dev/null @@ -1,727 +0,0 @@ -:root{ - --background-color: #030304; - --second-background-color: #fff; - --primary-color: #f5a9b8; - --secondary-color: #5bcefa; - --accent-color: #fff; - --topbar-height: 60px; - box-sizing: border-box; -} - -body{ - padding: 0; - margin: 0; - height: 100vh; - background-color: var(--background-color); - font-family: "Inter", sans-serif; - overflow-x: hidden; -} - -wrapper { - display: flex; - flex-flow: column; - flex-wrap: nowrap; - height: 100vh; -} - -background-placeholder{ - background-color: var(--second-background-color); - opacity: 1; - position: absolute; - width: 100%; - height: 100%; - border-radius: 0 0 5px 0; - z-index: -1; -} - -topbar { - display: flex; - align-items: center; - height: var(--topbar-height); - background-color: var(--secondary-color); - z-index: 100; - box-shadow: 0 0 20px black; -} - -titlebox { - position: relative; - display: flex; - margin: 0 0 0 40px; - height: 100%; - align-items:center; - justify-content:center; -} - -titlebox span{ - cursor: default; - font-size: 24pt; - font-weight: bold; - background: linear-gradient(150deg, var(--primary-color), var(--accent-color)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - margin-left: 20px; -} - -titlebox img { - height: 100%; - margin-right: 10px; - cursor: grab; -} - -spacer{ - flex-grow: 1; -} - -searchdiv{ - display: block; - margin: 0 10px 0 0; -} - -#searchbox { - padding: 3px 10px; - border: 0; - border-radius: 4px; - font-size: 14pt; - width: 250px; -} - -#settingscog { - cursor: pointer; - margin: 0px 30px; - height: 50%; - filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%); -} - -viewport { - position: relative; - display: flex; - flex-flow: row; - flex-wrap: nowrap; - flex-grow: 1; - height: 100%; - overflow-y: scroll; - scrollbar-color: var(--accent-color) var(--primary-color); - scrollbar-width: thin; -} - -footer { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - width: 100%; - height: 40px; - align-items: center; - justify-content: center; - background-color: var(--primary-color); - align-content: center; -} - -footer > div { - height: 100%; - margin: 0 30px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - cursor: pointer; -} - -footer > div > *{ - height: 40%; - margin: 0 5px; -} - -#madeWith { - flex-grow: 1; - text-align: right; - margin-right: 20px; - cursor: url("media/blahaj.png"), grab; -} - -content { - position: relative; - flex-grow: 1; - border-radius: 5px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: start; - align-content: start; -} - -#settingsPopup{ - 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); - width: 180px; - height: 300px; - border-radius: 5px; - margin: 10px 10px; - padding: 15px 20px; - position: relative; -} - -#addPublication p{ - width: 100%; - text-align: center; - font-size: 150pt; - vertical-align: middle; - line-height: 300px; - margin: 0; - color: var(--accent-color); -} - -.pill { - flex-grow: 0; - height: 14pt; - font-size: 12pt; - border-radius: 9pt; - background-color: var(--primary-color); - padding: 2pt 17px; - color: black; -} - -publication{ - cursor: pointer; - background-color: var(--secondary-color); - width: 180px; - height: 300px; - border-radius: 5px; - margin: 10px 10px; - padding: 15px 19px; - position: relative; - flex-shrink: 0; -} - -publication:hover { - background-color: black; -} - -publication:hover::after{ - background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2)); -} - -publication:hover > publication-information { - display: flex; - opacity:1; -} - -publication::after{ - content: ''; - position: absolute; - left: 0; top: 0; - border-radius: 5px; - width: 100%; height: 100%; -} - -publication-information { - display: none; - flex-direction: column; - justify-content: start; -} - -publication-information * { - z-index: 1; - color: var(--accent-color); -} - -connector-name{ - width: fit-content; - margin: 10px 0; -} - -publication-name{ - width: fit-content; - font-size: 16pt; - font-weight: bold; -} - -publication-status { - display:block; - height: 10px; - width: 10px; - border-radius: 50%; - margin: 5px; - position: absolute; - top: 5px; - right: 5px; - z-index: 2; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px; -} - -publication-status::after { - content: attr(release-status); - position: absolute; - top: 0; - right: 0; - - visibility: hidden; - - /*Text Properties*/ - font-size:10pt; - font-weight:bold; - color:white; - text-align: center; - - /*Size*/ - padding: 3px 8px; - border-radius: 6px; - border: 0px; - background-color: inherit; -} - -publication-status:hover::after{ - visibility:visible; -} - - -publication-status[release-status="Ongoing"]{ - background-color: limegreen; -} - -publication-status[release-status="Completed"]{ - background-color: blueviolet; -} - -publication-status[release-status="On Hiatus"]{ - background-color: darkorange; -} - -publication-status[release-status="Cancelled"]{ - background-color: firebrick; -} - -publication-status[release-status="Upcoming"]{ - background-color: aqua; -} - -publication-status[release-status="Status Unavailable"]{ - background-color: gray; -} - - -publication-details { - display: flex; - flex-direction: column; - justify-content: start; -} - -publication-details * { - z-index: 1; - color: var(--accent-color); -} - -publication img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: 0; - border-radius: 5px; -} - -popup{ - display: none; - width: 100%; - min-height: 100%; - top: 0; - left: 0; - position: fixed; - z-index: 2; - flex-direction: column; -} - - -popup popup-window { - position: absolute; - z-index: 3; - left: 25%; - top: 100px; - width: 50%; - display: flex; - flex-direction: column; - background-color: var(--second-background-color); - border-radius: 3px; - 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; -} - -#newMangaPopup > div { - z-index: 3; - position: relative; -} - -#newMangaPopup > #newMangaPopupSelector { - width: 600px; - height: 40px; - margin: 80px auto 0; -} - -#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage { - margin: 0; - display: inline-block; - height: 40px; -} - -#newMangaPopup #newMangaConnector { - width: 100px; - padding: 0 0 0 5px; - border-radius: 5px 0 0 5px; - border: 0; - border-right: 1px solid darkgray; -} - -#newMangaPopup #newMangaTitle{ - width: 445px; - padding: 0 5px 0 5px; - border: 0; -} - -#newMangaPopup #newMangaTranslatedLanguage { - width: 45px; - border-radius: 0 5px 5px 0; - border: 0; - border-left: 1px solid darkgray; - margin-left: -5px; -} - -#newMangaResult { - display: none; - flex-direction: row; - justify-content: flex-start; - margin: 5px auto 0; - border-radius: 5px; - padding: 5px; - width: min-content; - max-width: 98%; - max-height: 400px; - overflow-x: scroll; - overflow-y: hidden; -} - -blur-background { - width: 100%; - height: 100%; - position: absolute; - left: 0; - background: rgba(245, 169, 184, 0.58); - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(4.5px); - -webkit-backdrop-filter: blur(4.5px); -} - -#publicationViewerPopup{ - z-index: 5; -} - -publication-viewer{ - display: block; - width: 460px; - position: absolute; - top: 200px; - left: 400px; - background-color: var(--accent-color); - border-radius: 5px; - overflow: hidden; - padding: 15px; -} - -publication-viewer::after{ - content: ''; - position: absolute; - left: 0; top: 0; - border-radius: 5px; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.8); - backdrop-filter: blur(3px); -} - -publication-viewer img { - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - object-fit: cover; - border-radius: 5px; - z-index: 0; -} - -publication-viewer publication-details > * { - margin: 5px 0; -} - -publication-viewer publication-details publication-name { - width: initial; - overflow-x: scroll; - white-space: nowrap; - scrollbar-width: none; -} - -publication-viewer publication-details publication-tags::before { - content: "Tags"; - display: block; - font-weight: bolder; -} - -publication-viewer publication-details publication-tags { - overflow-x: scroll; - white-space: nowrap; - scrollbar-width: none; -} - -publication-viewer publication-details publication-author::before { - content: "Author: "; - font-weight: bolder; -} - -publication-viewer publication-details publication-description::before { - content: "Description"; - display: block; - font-weight: bolder; -} - -publication-viewer publication-details publication-description { - font-size: 12pt; - margin: 5px 0; - height: 145px; - overflow-x: scroll; -} - -publication-viewer publication-details publication-interactions { - display: flex; - flex-direction: row; - justify-content: end; - align-items: start; - width: 100%; -} - -publication-viewer publication-details publication-interactions > * { - margin: 0 10px; - font-size: 16pt; - cursor: pointer; -} - -publication-viewer publication-details publication-interactions publication-starttask { - color: var(--secondary-color); -} - -publication-viewer publication-details publication-interactions publication-delete { - color: red; -} - -publication-view publication-details publication-interactions publication-canceltask { - color: yellow; -} - -publication-viewer publication-details publication-interactions publication-add { - color: limegreen; -} - -footer-tag-popup { - display: none; - padding: 2px 4px; - position: fixed; - bottom: 58px; - left: 20px; - background-color: var(--second-background-color); - z-index: 8; - border-radius: 5px; - max-height: 400px; -} - -footer-tag-content{ - position: relative; - max-height: 400px; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - overflow-y: scroll; -} - -footer-tag-content > * { - margin: 2px 5px; -} - -footer-tag-popup::before{ - content: ""; - width: 0; - height: 0; - position: absolute; - border-right: 10px solid var(--second-background-color); - border-left: 10px solid transparent; - border-top: 10px solid var(--second-background-color); - border-bottom: 10px solid transparent; - left: 0; - bottom: -17px; - border-radius: 0 0 0 5px; -} - -#loaderdiv { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - z-index: 200; -} - -#loader { - border: 16px solid transparent; - border-top: 16px solid var(--secondary-color); - border-bottom: 16px solid var(--primary-color); - border-radius: 50%; - width: 120px; - height: 120px; - animation: spin 2s linear infinite; - position: absolute; - left: calc(50% - 60px); - top: calc(50% - 120px); - z-index: 201; -} - -#loaderText { - position: relative; - margin: 0 auto; - top: calc(50% + 80px); - z-index: 201; - text-align: center; - color: var(--second-background-color); - font-size: 20pt; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -#jobStatusView { - z-index: 50; -} - -#jobStatusView > popup-window { - top: 80px; - width: 50%; - max-height: calc(100% - 140px); - display: flex; - flex-direction: row; - flex-wrap: nowrap; - background-color: transparent; -} - -#jobStatusView > popup-window > div { - overflow-y: scroll; - overflow-x: hidden; - width: 50%; - margin: 0; - max-height: 100%; -} - -#jobStatusView > popup-window > div > div { - overflow-x: hidden; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - width: 100%; - margin: 0; -} - -.jobWrapper { - width: 90%; - margin: 2px 5%; - height: 100px; - position: relative; - flex-shrink: 0; - background-color: rgba(187,187,187,0.4); - border-radius: 3px; -} - -.jobWrapper > .jobImage { - height: 90%; - width: 20%; - left: 5px; - object-fit: contain; - position: absolute; - top: 5%; -} - -.jobWrapper > .jobTitle { - position: absolute; - left: calc(20% + 10px); - top: 5px; -} - -.jobWrapper > .jobProgressBar { - position: absolute; - left: calc(20% + 10px); - bottom: calc(12pt + 10px); - width: calc(80% - 20px); - height: 10px; -} - -.jobWrapper > .jobProgressSpan { - position: absolute; - right: 10px; - bottom: calc(12pt + 20px); - width: 60%; - text-align: right; -} - -.jobWrapper > .jobCancel { - position: absolute; - right: 10px; - bottom: 5px; - font-size: 12pt; - color: var(--secondary-color); - cursor: pointer; -} \ No newline at end of file