Reimplemented Library and Notification connectors
Added Test and Rest API calls, API side will need to be updated. Separated out CSS files for future expansion.
This commit is contained in:
db-2001
parent
76f6216501
commit
f50990dafb
@ -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;
|
||||
}
|
||||
BIN
Website/connector-icons/gotify-logo.png
Normal file
BIN
Website/connector-icons/gotify-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
Website/connector-icons/kavita.png
Normal file
BIN
Website/connector-icons/kavita.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 440 B |
113
Website/connector-icons/komga.svg
Normal file
113
Website/connector-icons/komga.svg
Normal file
@ -0,0 +1,113 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
height="512pt"
|
||||
viewBox="0 0 512 512"
|
||||
width="512pt"
|
||||
version="1.1"
|
||||
id="svg4586"
|
||||
sodipodi:docname="komga - Copy.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
|
||||
<metadata
|
||||
id="metadata4592">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs4590">
|
||||
<linearGradient
|
||||
id="linearGradient6082"
|
||||
osb:paint="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop6080"/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="linearGradient6076"
|
||||
osb:paint="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop6074"/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient6082"
|
||||
id="linearGradient6084"
|
||||
x1="77.866812"
|
||||
y1="386.00679"
|
||||
x2="217.20259"
|
||||
y2="386.00679"
|
||||
gradientUnits="userSpaceOnUse"/>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1656"
|
||||
inkscape:window-height="1368"
|
||||
id="namedview4588"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.2512475"
|
||||
inkscape:cx="264.73114"
|
||||
inkscape:cy="305.20589"
|
||||
inkscape:window-x="-7"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4586"/>
|
||||
<path
|
||||
d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
|
||||
fill="#005ed3"
|
||||
id="path4556"/>
|
||||
<path
|
||||
d="m 512,256 c 0,-11.71094 -0.80469,-23.23047 -2.32422,-34.52344 L 382.48047,94.28125 320.52344,121.85938 256,56.933594 212.69531,131.30469 129.51953,94.28125 141.86719,178.42187 49.949219,193.81641 114.32031,256 l -64.371091,62.18359 82.121091,82.16016 -2.55078,17.375 91.95703,91.95703 C 232.76953,511.19531 244.28906,512 256,512 397.38672,512 512,397.38672 512,256 Z"
|
||||
id="path4558"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#00459f"
|
||||
sodipodi:nodetypes="scccccccccccccss"/>
|
||||
<path
|
||||
d="m256 86.742188 37.109375 63.738281 70.574219-31.414063-10.527344 71.71875 77.078125 12.910156-54.144531 52.304688 54.144531 52.304688-77.078125 12.910156 10.527344 71.71875-70.574219-31.414063-37.109375 63.738281-37.109375-63.738281-70.574219 31.414063 10.527344-71.71875-77.078125-12.910156 54.144531-52.304688-54.144531-52.304688 77.078125-12.910156-10.527344-71.71875 70.574219 31.414063zm0 0"
|
||||
fill="#ff0335"
|
||||
id="path4560"/>
|
||||
<path
|
||||
d="m430.230469 308.300781-77.070313 12.910157 10.519532 71.71875-70.570313-31.410157-37.109375 63.742188v-338.523438l37.109375 63.742188 70.570313-31.410157-6.757813 46.101563-3.761719 25.617187 58.800782 9.851563 18.269531 3.058594-13.390625 12.929687-40.75 39.371094 11.378906 10.988281zm0 0"
|
||||
fill="#c2001b"
|
||||
id="path4562"/>
|
||||
<path
|
||||
d="m256 455.066406-43.304688-74.371094-83.175781 37.023438 12.347657-84.140625-91.917969-15.394531 64.371093-62.183594-64.371093-62.183594 91.917969-15.394531-12.347657-84.140625 83.179688 37.023438 43.300781-74.371094 43.304688 74.371094 83.175781-37.023438-12.347657 84.140625 91.917969 15.394531-64.371093 62.183594 64.371093 62.183594-91.917969 15.398437 12.347657 84.136719-83.175781-37.023438zm-30.917969-112.722656 30.917969 53.101562 30.917969-53.101562 57.964843 25.800781-8.703124-59.292969 62.238281-10.425781-43.917969-42.425781 43.917969-42.425781-62.238281-10.425781 8.703124-59.292969-57.964843 25.800781-30.917969-53.101562-30.917969 53.101562-57.964843-25.800781 8.703124 59.292969-62.238281 10.425781 43.917969 42.425781-43.917969 42.425781 62.238281 10.425781-8.703124 59.292969zm0 0"
|
||||
fill="#ffdf47"
|
||||
id="path4564"/>
|
||||
<path
|
||||
d="m403.308594 261.441406-5.628906-5.441406 25.160156-24.300781 39.210937-37.878907-55.75-9.339843-36.171875-6.058594 2.800782-19.09375 9.550781-65.046875-83.179688 37.019531-43.300781-74.371093v59.621093l30.921875 53.109375 57.957031-25.808594-3.910156 26.667969-2.546875 17.378907-2.242187 15.25 2.480468.421874 59.761719 10.007813-43.921875 42.421875 16.96875 16.390625 26.953125 26.03125-62.242187 10.429687 8.699218 59.296876-57.957031-25.808594-30.921875 53.109375v59.621093l43.300781-74.371093 83.179688 37.019531-12.351563-84.140625 91.921875-15.398437zm0 0"
|
||||
fill="#fec000"
|
||||
id="path4566"/>
|
||||
<g
|
||||
aria-label="K"
|
||||
transform="matrix(1.1590846,-0.34467221,0.22789693,0.794981,0,0)"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:296.55969238px;line-height:125%;font-family:Impact;-inkscape-font-specification:Impact;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="text4596">
|
||||
<path
|
||||
d="m 220.91497,266.9035 -34.89789,105.85211 38.2284,128.58643 H 161.2555 L 136.63873,400.84769 V 501.34204 H 75.676021 V 266.9035 h 60.962709 v 91.08205 l 27.07845,-91.08205 z"
|
||||
style="font-size:296.55969238px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path824"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
BIN
Website/connector-icons/lunasea.png
Normal file
BIN
Website/connector-icons/lunasea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
40
Website/connector-icons/ntfy.svg
Normal file
40
Website/connector-icons/ntfy.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50mm" height="50mm" viewBox="0 0 50 50">
|
||||
<defs>
|
||||
<linearGradient id="b">
|
||||
<stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
|
||||
<stop offset="1" style="stop-color:#52bca6;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="a">
|
||||
<stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
|
||||
<stop offset="1" style="stop-color:#56bda8;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
<linearGradient xlink:href="#a" id="e" x1="160.722" x2="168.412" y1="128.533" y2="134.326" gradientTransform="matrix(3.74959 0 0 3.74959 -541.79 -387.599)" gradientUnits="userSpaceOnUse"/>
|
||||
<linearGradient xlink:href="#b" id="c" x1=".034" x2="50.319" y1="0" y2="50.285" gradientTransform="matrix(.99434 0 0 .99434 -.034 0)" gradientUnits="userSpaceOnUse"/>
|
||||
<filter id="d" width="1.176" height="1.211" x="-.076" y="-.092" style="color-interpolation-filters:sRGB">
|
||||
<feFlood flood-color="#fff" flood-opacity=".192" result="flood"/>
|
||||
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
|
||||
<feGaussianBlur in="composite1" result="blur" stdDeviation="4"/>
|
||||
<feOffset dx="3" dy="2.954" result="offset"/>
|
||||
<feComposite in="SourceGraphic" in2="offset" result="composite2"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g style="display:inline">
|
||||
<path d="M0 0h50v50H0z" style="fill:url(#c);fill-opacity:1;stroke:none;stroke-width:.286502;stroke-linejoin:bevel"/>
|
||||
</g>
|
||||
<g style="display:inline">
|
||||
<path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;display:inline;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none;filter:url(#d)" transform="scale(.26458)"/>
|
||||
</g>
|
||||
<g style="display:inline">
|
||||
<path d="M88.2 95.309H64.92c-1.601 0-2.91 1.236-2.91 2.746l.022 18.602-.435 2.506 6.231-1.881H88.2c1.6 0 2.91-1.236 2.91-2.747v-16.48c0-1.51-1.31-2.746-2.91-2.746z" style="color:#fff;fill:url(#e);stroke:none;stroke-width:2.49558;-inkscape-stroke:none" transform="translate(-51.147 -81.516)"/>
|
||||
<path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none" transform="scale(.26458)"/>
|
||||
<g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
|
||||
<path d="M62.57 116.77v-1.312l3.28-1.459q.159-.068.306-.102.158-.045.283-.068l.271-.022v-.09q-.136-.012-.271-.046-.125-.023-.283-.057-.147-.045-.306-.113l-3.28-1.459v-1.323l5.068 2.319v1.413z" style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
|
||||
<path d="M62.309 110.31v1.903l3.437 1.53.022.007-.022.008-3.437 1.53v1.892l.37-.17 5.221-2.39v-1.75zm.525.817 4.541 2.08v1.076l-4.541 2.078v-.732l3.12-1.389.003-.002a1.56 1.56 0 0 1 .258-.086h.006l.008-.002c.094-.027.176-.047.246-.06l.498-.041v-.574l-.24-.02a1.411 1.411 0 0 1-.231-.04l-.008-.001-.008-.002a9.077 9.077 0 0 1-.263-.053 2.781 2.781 0 0 1-.266-.097l-.004-.002-3.119-1.39z"
|
||||
style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
|
||||
</g>
|
||||
<g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
|
||||
<path d="M69.171 117.754h5.43v1.278h-5.43Z" style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
|
||||
<path d="M68.908 117.492v1.802h5.955v-1.802zm.526.524h4.904v.754h-4.904z" style="color:#fff;-inkscape-font-specification:"JetBrains Mono, Bold";fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tranga</title>
|
||||
<link id='pagestyle' rel="stylesheet" href="styles/style_default.css">
|
||||
<link id='basestyle' rel="stylesheet" href="styles/base.css">
|
||||
<link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
@ -56,11 +57,83 @@
|
||||
<blur-background id="blurBackgroundSettingsPopup" onclick="
|
||||
settingsPopup.style.display = 'none';"></blur-background>
|
||||
<popup-window>
|
||||
<titlebar>
|
||||
<border-bar>
|
||||
<popup-title>Settings</popup-title>
|
||||
<popup-close onclick="settingsPopup.style.display = 'none'">×</popup-close>
|
||||
</titlebar>
|
||||
</border-bar>
|
||||
<popup-content>
|
||||
|
||||
<div class="popup-section">
|
||||
TRANGA
|
||||
</div>
|
||||
|
||||
<div class="popup-section">
|
||||
MANGA SOURCES
|
||||
</div>
|
||||
|
||||
<div class="popup-section">
|
||||
LIBRARY CONNECTORS
|
||||
<div class="section-content">
|
||||
<div class="section-item">
|
||||
<span class="title"><img src='connector-icons/komga.svg'>Komga<connector-configured id="komgaConfigured"></connector-configured></span>
|
||||
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
|
||||
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
|
||||
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
|
||||
<div class="section-buttons-container">
|
||||
<span onclick="TestKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button' id="test-connector">Test</span>
|
||||
<span onclick="ClearKomga()" class='section-button' id="reset">Reset</span>
|
||||
<span onclick="UpdateKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button'>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-item">
|
||||
<span class="title"><img src='connector-icons/kavita.png'>Kavita<connector-configured id="kavitaConfigured"></connector-configured></span>
|
||||
<label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
|
||||
<label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
|
||||
<label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
|
||||
<div class="section-buttons-container">
|
||||
<span onclick="TestKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button' id="test-connector">Test</span>
|
||||
<span onclick="ClearKavita()" class='section-button' id="reset">Reset</span>
|
||||
<span onclick="UpdateKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button'>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-section">
|
||||
NOTIFICATION CONNECTORS
|
||||
<div class="section-content">
|
||||
<div class="section-item">
|
||||
<span class="title"><img src='connector-icons/gotify-logo.png'>Gotify<connector-configured id="gotifyConfigured"></connector-configured></span>
|
||||
<label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
|
||||
<label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
|
||||
<div class="section-buttons-container">
|
||||
<span onclick="TestGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button' id="test-connector">Test</span>
|
||||
<span onclick="ClearGotify()" class='section-button' id="reset">Reset</span>
|
||||
<span onclick="UpdateGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button'>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-item">
|
||||
<span class="title"><img src='connector-icons/lunasea.png'>LunaSea<connector-configured id="lunaseaConfigured"></connector-configured></span>
|
||||
<label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
|
||||
<div class="section-buttons-container">
|
||||
<span onclick="TestLunaSea(lunaseaWebhook.value);" class='section-button' id="test-connector">Test</span>
|
||||
<span onclick="ClearLunasea()" class='section-button' id="reset">Reset</span>
|
||||
<span onclick="UpdateLunaSea(lunaseaWebhook.value);" class='section-button'>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-item">
|
||||
<span class="title"><img src='connector-icons/ntfy.svg'>Ntfy<connector-configured id="ntfyConfigured"></connector-configured></span>
|
||||
<label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
|
||||
<label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
|
||||
<div class="section-buttons-container">
|
||||
<span onclick="TestNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button' id="test-connector">Test</span>
|
||||
<span onclick="ClearNtfy()" class='section-button' id="reset">Reset</span>
|
||||
<span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button'>Apply</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="title">Download Location:</p>
|
||||
<span id="downloadLocation"></span>
|
||||
@ -69,37 +142,6 @@
|
||||
<p class="title">API-URI</p>
|
||||
<label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">Komga</span>
|
||||
<div>Configured: <span id="komgaConfigured">✅❌</span></div>
|
||||
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
|
||||
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
|
||||
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">Kavita</span>
|
||||
<div>Configured: <span id="kavitaConfigured">✅❌</span></div>
|
||||
<label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
|
||||
<label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
|
||||
<label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">Gotify</span>
|
||||
<div>Configured: <span id="gotifyConfigured">✅❌</span></div>
|
||||
<label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
|
||||
<label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">LunaSea</span>
|
||||
<div>Configured: <span id="lunaseaConfigured">✅❌</span></div>
|
||||
<label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">Ntfy</span>
|
||||
<div>Configured: <span id="ntfyConfigured">✅❌</span></div>
|
||||
<label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
|
||||
<label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">UserAgent</span><br />
|
||||
<label for="userAgent"></label><input style="width: 400px" placeholder="UserAgent" id="userAgent" type="text">
|
||||
@ -108,13 +150,14 @@
|
||||
<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="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
|
||||
</div>
|
||||
</popup-content>
|
||||
<titlebar>
|
||||
<apply-settings onclick="UpdateSettings()">Apply Settings</apply-settings>
|
||||
</titlebar>
|
||||
<border-bar>
|
||||
<div class="button-container">
|
||||
<border-bar-button onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
|
||||
<border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
|
||||
</div>
|
||||
</border-bar>
|
||||
|
||||
</popup-window>
|
||||
</popup>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
159
Website/styles/card_compact.css
Normal file
159
Website/styles/card_compact.css
Normal file
@ -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;
|
||||
}
|
||||
172
Website/styles/card_hover.css
Normal file
172
Website/styles/card_hover.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user