glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Compare commits

base: glax:0b09df67b9c3252ef087bffba4cde050ac736ca8
Branches Tags
glax:master
glax:cuttingedge
glax:frontend-v2
glax:dev
...
compare: glax:135aca08ab42ffce38a6d72e0fed843d8f2c3b0f
Branches Tags
glax:cuttingedge
glax:master
glax:frontend-v2
glax:dev

18 Commits
0b09df67b9 ... 135aca08ab

Author SHA1 Message Date
Glax
135aca08ab
Merge pull request #22 from db-2001/fix-update-button 
Preliminary fix for update button deleting all mangas
 2023-10-30 19:21:57 +01:00
Glax
b47ba90f20
Merge branch 'master' into fix-update-button 2023-10-30 19:21:22 +01:00
glax
eb13e6e37d Merge branch 'cuttingedge' 2023-10-30 19:14:19 +01:00
db-2001
6245210faf Added GetMonitorJobs back to UpdateJobs 2023-10-30 14:09:41 -04:00
Glax
e01683d7f3
Merge pull request #17 from db-2001/dityb 
Modified Manga CSS Hover Styling
 2023-10-30 18:58:56 +01:00
db-2001
c3a15a354b Preliminary fix for update button deleting all mangas 2023-10-30 13:29:39 -04:00
db-2001
1f3ed66f97 Fixes after merge broke some stuff 2023-10-29 22:24:16 -04:00
db-2001
5698c93439 Merged properly.... I think? Got rid of empty div 2023-10-27 11:38:35 -04:00
db-2001
fc8388f037 Merge remote-tracking branch 'remotes/origin/master' into dityb 2023-10-27 11:38:13 -04:00
Dity
f6544e743b
Merge branch 'C9Glax:master' into master 2023-10-27 11:24:28 -04:00
db-2001
2381a8913b Changed the style sheet selection logic so the default is actually the default. 
If the styleSheet property doesn't exist or isn't equal to a valid string, it used to default to the mangahover.css from the else statement. Logically, that means that mangahover was the default instead of the actual default. This has been rectified.
 2023-10-27 11:18:37 -04:00
db-2001
15d20a236b Added empty <div> and set stylesheet on Setup(), 
Added an empty <div> to mitigate merge conflicts. Running GetSettings in Setup so that the webpage CSS is set up whenever the website runs for the first time and not just when the settings get opened. This shouldn't cause any issues even though setup is called a few times throughout the code.
 2023-10-27 10:48:08 -04:00
db-2001
5abebcf3b5 Added api calls for setting css stylesheet 2023-10-26 23:23:08 -04:00
db-2001
7e6ea37d14 Changed the remaining css properties so that interactions work 2023-10-26 09:37:28 -04:00
db-2001
b233e80178 Fixed publication-details pop-up 
Renamed the pop-up for the publication details and then added CSS so it shows up on both style sheets.
 2023-10-26 09:24:50 -04:00
db-2001
332108780f Created separate css files for default and new hover dynamics 2023-10-26 09:18:05 -04:00
db-2001
961a4d7acd Modified Manga CSS Hover Styling 2023-10-25 21:02:27 -04:00
db-2001
2773098514 Modified Manga CSS Hover Styling 2023-10-25 20:56:19 -04:00
5 changed files with 748 additions and 17 deletions
Show Stats Expand all files Collapse all files

5
Website/apiConnector.js
View File

@ -163,6 +163,11 @@ function UpdateDownloadLocation(downloadLocation){
PostData(uri); PostData(uri);
} }
function ChangeStyleSheet(sheet){
var uri = `${apiUri}/Settings/ChangeStyleSheet?styleSheet=${sheet}`;
PostData(uri);
}
function UpdateKomga(komgaUrl, komgaAuth){ function UpdateKomga(komgaUrl, komgaAuth){
var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
PostData(uri); PostData(uri);

10
Website/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tranga</title> <title>Tranga</title>
<link rel="stylesheet" href="style.css"> <link id='pagestyle' rel="stylesheet" href="styles/style_default.css">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head> </head>
<body> <body>
@ -97,6 +97,10 @@
<label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text"> <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
<label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text"> <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
</div> </div>
<div>
<input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css">
<label for="css-style"> Show manga titles and sources on hover</label><br>
</div>
<div> <div>
<input type="submit" value="Update" onclick="UpdateSettings()"> <input type="submit" value="Update" onclick="UpdateSettings()">
</div> </div>
@ -108,7 +112,7 @@
<blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background> <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
<publication-viewer> <publication-viewer>
<img id="pubviewcover" src="media/cover.jpg" alt="cover"> <img id="pubviewcover" src="media/cover.jpg" alt="cover">
<publication-information> <publication-details>
<publication-name id="publicationViewerName">Best Manga there is</publication-name> <publication-name id="publicationViewerName">Best Manga there is</publication-name>
<publication-tags id="publicationViewerTags">A Manga</publication-tags> <publication-tags id="publicationViewerTags">A Manga</publication-tags>
<publication-author id="publicationViewerAuthor">Glax</publication-author> <publication-author id="publicationViewerAuthor">Glax</publication-author>
@ -122,7 +126,7 @@
<publication-add id="createMonitorJobButton">Monitor ➕</publication-add> <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
<publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add> <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
</publication-interactions> </publication-interactions>
</publication-information> </publication-details>
</publication-viewer> </publication-viewer>
</popup> </popup>

50
Website/interaction.js
View File

@ -40,6 +40,7 @@ const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured"); const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
const settingNtfyConfigured = document.querySelector("#ntfyConfigured"); const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
const settingApiUri = document.querySelector("#settingApiUri"); const settingApiUri = document.querySelector("#settingApiUri");
const settingMangaHoverCheckbox = document.querySelector("#mangaHoverCheckbox");
const newMangaPopup = document.querySelector("#newMangaPopup"); const newMangaPopup = document.querySelector("#newMangaPopup");
const newMangaConnector = document.querySelector("#newMangaConnector"); const newMangaConnector = document.querySelector("#newMangaConnector");
const newMangaTitle = document.querySelector("#newMangaTitle"); const newMangaTitle = document.querySelector("#newMangaTitle");
@ -80,6 +81,19 @@ function Setup(){
ResetContent(); ResetContent();
UpdateJobs(); UpdateJobs();
GetSettings().then((json) => {
//console.log(json);
settingDownloadLocation.innerText = json.downloadLocation;
settingApiUri.placeholder = apiUri;
//console.log(json.styleSheet);
if (json.styleSheet == 'hover') {
settingMangaHoverCheckbox.checked = true;
document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css');
} else {
settingMangaHoverCheckbox.checked = false;
document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css');
}
});
setInterval(() => { setInterval(() => {
UpdateJobs(); UpdateJobs();
}, 1000); }, 1000);
@ -99,6 +113,19 @@ function ResetContent(){
add.appendChild(plus); add.appendChild(plus);
add.addEventListener("click", () => ShowNewMangaSearch()); add.addEventListener("click", () => ShowNewMangaSearch());
tasksContent.appendChild(add); tasksContent.appendChild(add);
//Populate with the monitored mangas
GetMonitorJobs().then((json) => {
//console.log(json);
json.forEach(job => {
var mangaView = CreateManga(job.manga, job.mangaConnector.name);
mangaView.addEventListener("click", (event) => {
ShowMangaWindow(job, job.manga, event, false);
});
tasksContent.appendChild(mangaView);
});
monitoringJobsCount = json.length;
});
} }
function ShowNewMangaSearch(){ function ShowNewMangaSearch(){
@ -158,6 +185,7 @@ createMonitorJobButton.addEventListener("click", () => {
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value); CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
UpdateJobs(); UpdateJobs();
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
ResetContent();
}); });
startJobButton.addEventListener("click", () => { startJobButton.addEventListener("click", () => {
StartJob(selectedJob.id); StartJob(selectedJob.id);
@ -171,6 +199,7 @@ deleteJobButton.addEventListener("click", () => {
RemoveJob(selectedJob.id); RemoveJob(selectedJob.id);
UpdateJobs(); UpdateJobs();
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
ResetContent();
}); });
function ShowMangaWindow(job, manga, event, add){ function ShowMangaWindow(job, manga, event, add){
@ -279,11 +308,20 @@ function OpenSettings(){
settingNtfyAuth.value = ""; settingNtfyAuth.value = "";
settingNtfyEndpoint.value = ""; settingNtfyEndpoint.value = "";
settingApiUri.value = ""; settingApiUri.value = "";
settingMangaHoverCheckbox.checked = false;
GetSettings().then((json) => { GetSettings().then((json) => {
//console.log(json); //console.log(json);
settingDownloadLocation.innerText = json.downloadLocation; settingDownloadLocation.innerText = json.downloadLocation;
settingApiUri.placeholder = apiUri; settingApiUri.placeholder = apiUri;
//console.log(json.styleSheet);
if (json.styleSheet == 'hover') {
settingMangaHoverCheckbox.checked = true;
document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css');
} else {
settingMangaHoverCheckbox.checked = false;
document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css');
}
}); });
GetLibraryConnectors().then((json) => { GetLibraryConnectors().then((json) => {
//console.log(json); //console.log(json);
@ -342,6 +380,15 @@ function UpdateSettings(){
Setup(); Setup();
} }
// If the checkbox is checked, set the style to style_mangahover.css and
if (document.getElementById("mangaHoverCheckbox").checked == true){
ChangeStyleSheet('hover')
//console.log('Changing theme to mangahover')
} else {
ChangeStyleSheet('default');
//console.log('Changing theme to default')
}
if(settingKomgaUrl.value != "" && if(settingKomgaUrl.value != "" &&
settingKomgaUser.value != "" && settingKomgaUser.value != "" &&
settingKomgaPass.value != ""){ settingKomgaPass.value != ""){
@ -377,6 +424,7 @@ function utf8_to_b64(str) {
} }
function UpdateJobs(){ function UpdateJobs(){
GetMonitorJobs().then((json) => { GetMonitorJobs().then((json) => {
if(monitoringJobsCount != json.length){ if(monitoringJobsCount != json.length){
ResetContent(); ResetContent();
@ -392,6 +440,7 @@ function UpdateJobs(){
} }
}); });
//Get the jobs that are waiting in the queue
GetWaitingJobs().then((json) => { GetWaitingJobs().then((json) => {
jobsQueuedTag.innerText = json.length; jobsQueuedTag.innerText = json.length;
@ -412,6 +461,7 @@ function UpdateJobs(){
jobStatusWaiting.removeChild(child); jobStatusWaiting.removeChild(child);
}); });
//Get currently running jobs
GetRunningJobs().then((json) => { GetRunningJobs().then((json) => {
jobsRunningTag.innerText = json.length; jobsRunningTag.innerText = json.length;

37
Website/style.css → Website/styles/style_default.css
View File

@ -223,11 +223,22 @@ publication-information {
justify-content: start; justify-content: start;
} }
publication-details {
display: flex;
flex-direction: column;
justify-content: start;
}
publication-information * { publication-information * {
z-index: 1; z-index: 1;
color: var(--accent-color); color: var(--accent-color);
} }
publication-details * {
z-index: 1;
color: var(--accent-color);
}
connector-name{ connector-name{
width: fit-content; width: fit-content;
margin: 10px 0; margin: 10px 0;
@ -408,48 +419,48 @@ publication-viewer img {
z-index: 0; z-index: 0;
} }
publication-viewer publication-information > * { publication-viewer publication-details > * {
margin: 5px 0; margin: 5px 0;
} }
publication-viewer publication-information publication-name { publication-viewer publication-details publication-name {
width: initial; width: initial;
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
scrollbar-width: none; scrollbar-width: none;
} }
publication-viewer publication-information publication-tags::before { publication-viewer publication-details publication-tags::before {
content: "Tags"; content: "Tags";
display: block; display: block;
font-weight: bolder; font-weight: bolder;
} }
publication-viewer publication-information publication-tags { publication-viewer publication-details publication-tags {
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
scrollbar-width: none; scrollbar-width: none;
} }
publication-viewer publication-information publication-author::before { publication-viewer publication-details publication-author::before {
content: "Author: "; content: "Author: ";
font-weight: bolder; font-weight: bolder;
} }
publication-viewer publication-information publication-description::before { publication-viewer publication-details publication-description::before {
content: "Description"; content: "Description";
display: block; display: block;
font-weight: bolder; font-weight: bolder;
} }
publication-viewer publication-information publication-description { publication-viewer publication-details publication-description {
font-size: 12pt; font-size: 12pt;
margin: 5px 0; margin: 5px 0;
height: 145px; height: 145px;
overflow-x: scroll; overflow-x: scroll;
} }
publication-viewer publication-information publication-interactions { publication-viewer publication-details publication-interactions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: end; justify-content: end;
@ -457,25 +468,25 @@ publication-viewer publication-information publication-interactions {
width: 100%; width: 100%;
} }
publication-viewer publication-information publication-interactions > * { publication-viewer publication-details publication-interactions > * {
margin: 0 10px; margin: 0 10px;
font-size: 16pt; font-size: 16pt;
cursor: pointer; cursor: pointer;
} }
publication-viewer publication-information publication-interactions publication-starttask { publication-viewer publication-details publication-interactions publication-starttask {
color: var(--secondary-color); color: var(--secondary-color);
} }
publication-viewer publication-information publication-interactions publication-delete { publication-viewer publication-details publication-interactions publication-delete {
color: red; color: red;
} }
publication-view publication-information publication-interactions publication-canceltask { publication-view publication-details publication-interactions publication-canceltask {
color: yellow; color: yellow;
} }
publication-viewer publication-information publication-interactions publication-add { publication-viewer publication-details publication-interactions publication-add {
color: limegreen; color: limegreen;
} }

661
Website/styles/style_mangahover.css Normal file
View File

@ -0,0 +1,661 @@
: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;
}
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 20px;
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-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;
}