weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

More work on new manager design

Browse Source
This commit is contained in:
Pax1601 2024-01-16 17:45:52 +01:00
parent d56a95cfa3
commit a0de159234
15 changed files with 318 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
manager/1.js
View File

@ -37,7 +37,7 @@
});
/* Installations */
this.installationsPage = new InstallationsPage(this, {
this.installationPage = new installationPage(this, {
instances: instances
});
@ -61,7 +61,7 @@
/* Create all the HTML pages */
document.body.appendChild(this.menuPage.getElement());
document.body.appendChild(this.installationsPage.getElement());
document.body.appendChild(this.installationPage.getElement());
document.body.appendChild(this.instancesPage.getElement());
document.body.appendChild(this.connectionsPage.getElement());
document.body.appendChild(this.passwordsPage.getElement());

0
manager/ejs/installations.ejs → manager/ejs/installation.ejs
View File

105
manager/ejs/menu.ejs
View File

@ -1,62 +1,55 @@
<style>
#summary {
width: 70%;
#manager-menu {
display: flex;
flex-direction: column;
flex-direction: row;
height: 100%;
justify-content: center;
color: var(--offwhite);
padding: 80px;
min-height: 100%;
align-items: center;
}
#summary .icon {
height: 100px;
width: 100px;
margin-bottom: -30px;
}
#summary div:nth-child(1) {
font-size: 50px;
font-weight: bold;
}
#summary div:nth-child(2) {
font-size: 20px;
font-weight: bold;
}
#summary div:nth-child(3) {
color: var(--lightgray);
font-size: 13px;
font-weight: normal;
margin-top: 20px;
width: 300px;
}
#manager-menu #menu {
#manager-menu>div {
display: flex;
flex-direction: column;
row-gap: 20px;
width: 60%;
justify-content: center;
align-items: center;
}
#manager-menu .option {
background-color: var(--background);
border: 1px solid var(--offwhite);
width: 460px;
height: 70px;
height: 110px;
color: var(--offwhite);
display: flex;
font-size: 18px;
font-weight: 600;
padding-left: 15px;
align-items: center;
align-items: start;
border-radius: 5px;
cursor: pointer;
background-color: transparent;
color: var(--offwhite);
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 15px;
position: relative;
}
#manager-menu .option>div {
font-size: 14px;
font-weight: normal;
}
#manager-menu .option::after {
position: absolute;
display: block;
content: " ";
width: 20px;
height: 20px;
background-image: url("./icons/chevron-right-solid.svg");
background-repeat: no-repeat;
background-position: 50% 50%;
right: 15px;
}
#manager-menu .option:hover {
@ -73,29 +66,31 @@
#manager-menu .option * {
pointer-events: none;
}
#manager-menu .divider {
width: 460px;
border-color: var(--darkgray) !important;
}
</style>
<div id="manager-menu">
<div id="summary">
<div>DCS OLYMPUS <img class="icon" src="../img/OlympusLogoFinal_4k.png" \></div>
<div>INSTALL WIZARD AND MANAGER</div>
<div>Using this manager, you can install Olympus, update settings, and view and manage instances</div>
<div id="summary" style="width: 70%; height: 100%; color: var(--offwhite); padding: 80px;">
<div style="font-size: 50px; font-weight: bold;">
DCS OLYMPUS <img src="../img/OlympusLogoFinal_4k.png" style="height: 100px; width: 100px; margin-bottom: -30px;"\>
</div>
<div style="font-size: 20px; font-weight: bold;">
INSTALL WIZARD AND MANAGER
</div>
<div style="color: var(--lightgray); font-size: 13px; font-weight: normal; margin-top: 20px; width: 300px;">
Using this manager, you can install Olympus, update settings, and view and manage instances
</div>
</div>
<div id="menu">
<div class="option install <%= installEnabled? '': 'disabled' %>">
Run Install wizard
<div id="menu" style="row-gap: 20px; width: 60%;">
<div class="option <%= installEnabled? '': 'disabled' %>" onclick="signal('onInstallClicked')">
Add Olympus
<div>
Add or update Olympus to a new DCS instance
</div>
</div>
<div class="option edit <%= editEnabled? '': 'disabled' %>">
Update settings
</div>
<div class="divider"></div>
<div class="option uninstall <%= uninstallEnabled? '': 'disabled' %>">
Remove Olympus
<div class="option <%= editEnabled? '': 'disabled' %>" onclick="signal('onEditClicked')">
Change settings
<div>
Adjust port, address and password settings
</div>
</div>
</div>
</div>

76
manager/ejs/type.ejs
View File

@ -1,61 +1,23 @@
<style>
#manager-type .option {
background-color: var(--background);
border: 1px solid var(--offwhite);
width: 220px;
height: 60px;
color: var(--offwhite);
display: flex;
font-size: 18px;
font-weight: 600;
padding-left: 15px;
align-items: center;
border-radius: 5px;
cursor: pointer;
background-color: transparent;
color: var(--offwhite);
justify-content: center;
}
#manager-type .option:hover {
color: var(--background);
background-color: var(--offwhite);
}
#manager-type .buttons {
display: flex;
flex-direction: column;
row-gap: 15px;
}
</style>
<div id="manager-type">
<div class="step-summary">
<div class="blue <%= singleInstance? 'hide': '' %>"><%= install? 'User path': 'Instance selection' %></div>
<div class="white">Type of install</div>
<div class="empty">Ports and address</div>
<div class="empty">Passwords</div>
<div class="empty"> <%= install? 'Install': 'Update' %></div>
<div class="instructions">
<div class="step">
Step 1 of 4
</div>
<div class="content">
<div class="instructions">
<span>
Do you want to install Olympus for singleplayer or multiplayer?
</span>
<span>
Select Single player if you only want to play locally on your own computer. <br>
If you want Olympus to be used on a different computer or over the internet for a dedicated server, select the multiplayer option.
</span>
</div>
<div class="buttons">
<div class="option button singleplayer">
Singleplayer
</div>
<div class="option button multiplayer">
Multiplayer
</div>
</div>
<div class="button cancel">
<%= install? "Cancel installation": "Cancel editing" %>
</div>
<div class="title">
Do you want to add Olympus for singleplayer or multiplayer?
</div>
</div>
<div class="description">
Select singleplayer if you only want to play locally on your own computer. <br>
Select multiplayer if you want Olympus to be useable over the internet from a different computer, or this instance is a dedicated server.
</div>
</div>
<div class="buttons">
<div class="button">
Singleplayer
</div>
<div class="button">
Multiplayer
</div>
</div>

26
manager/ejs/welcome.ejs
View File

@ -1,5 +1,5 @@
<style>
#manager-welcome {
#manager-welcome {
display: flex;
flex-direction: column;
row-gap: 20px;
@ -8,7 +8,7 @@
align-items: center;
}
#manager-welcome span {
#manager-welcome .instructions {
width: 40%;
text-align: center;
color: var(--offwhite);
@ -48,20 +48,20 @@
</style>
<div id="manager-welcome">
<span style="font-size: 28px; font-weight: bold;">
Do you want to use the Olympus Manager in basic or advanced mode?
</span>
<span style="color: var(--gray);">
<div class="instructions" style="font-size: 28px; font-weight: bold;">
Do you want to use the Olympus Manager in basic or Expert mode?
</div>
<div class="instructions" style="color: var(--gray);">
Basic mode is recommended for most users. <br>
Advanced mode is for those who know how Olympus works or for server owners.
</span>
<span style="color: var(--gray); font-weight: bold;">
Expert mode is for those who know how Olympus works or for server owners.
</div>
<div class="instructions" style="color: var(--gray); font-weight: bold;">
You can change this setting at any time.
</span>
<div class="option basic">
</div>
<div class="option basic" onclick="signal('onBasicClicked')">
Basic mode
</div>
<div class="option advanced">
Advanced mode
<div class="option expert" onclick="signal('onExpertClicked')">
Expert mode
</div>
</div>

53
manager/ejs/wizard.ejs Normal file
View File

@ -0,0 +1,53 @@
<style>
.wizard-page {
display: flex;
flex-direction: column;
row-gap: 30px;
padding: 60px 120px;
}
.buttons-footer {
display: flex;
column-gap: 10px;
justify-content: start;
}
.instructions {
color: var(--offwhite);
}
.instructions .step {
}
.instructions .title {
font-size: 24px;
font-weight: bold;
}
.content {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 20px;
align-items: start;
justify-content: center;
}
</style>
<div class="wizard-page">
<div class="cancel" style="font-size: 14px; font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px;">
<img src="./icons/chevron-left-solid.svg" style="height: 14px;">Cancel install
</div>
<div class="content">
</div>
<div class="buttons-footer">
<div class="button back" style="color: var(--offwhite); background-color: var(--background); border: 1px solid var(--offwhite);">
Back
</div>
<div class="button next" style="color: var(--background); background-color: var(--offwhite);">
Next
</div>
</div>
</div>

16
manager/index.html
View File

@ -27,12 +27,13 @@
<div class="accent-green">{{OLYMPUS_VERSION_NUMBER}}</div>
</div>
<div class="link first" data-link="https://github.com/Pax1601/DCSOlympus/wiki/2.-User-Guide">User Guide</div>
<div class="link" data-link="https://github.com/Pax1601/DCSOlympus/wiki/Setup-Troubleshooting">Troubleshooting Guide</div>
<div class="link" data-link="https://github.com/Pax1601/DCSOlympus/wiki/Setup-Troubleshooting">Troubleshooting
Guide</div>
<div id="switch-mode" class="link"> </div>
<div style="width: 15px;"></div>
<img class="link" data-link="https://github.com/Pax1601/DCSOlympus" src="./icons/github.svg"/>
<img class="link" data-link="https://discord.gg/pCfCykAdrw" src="./icons/discord.svg"/>
<img class="link" data-link="https://www.youtube.com/@DCSOlympus" src="./icons/youtube.svg"/>
<img class="link" data-link="https://github.com/Pax1601/DCSOlympus" src="./icons/github.svg" />
<img class="link" data-link="https://discord.gg/pCfCykAdrw" src="./icons/discord.svg" />
<img class="link" data-link="https://www.youtube.com/@DCSOlympus" src="./icons/youtube.svg" />
</div>
<div id="loader" class="manager-page hide">
Loading, please wait...
@ -43,7 +44,7 @@
<img src="./icons/circle-question-regular.svg" class="confirm">
<img src="./icons/spinner-solid.svg" class="wait">
<div class="content">
</div>
<div class="footer">
<div class="button accept-popup"> Accept </div>
@ -78,6 +79,11 @@
document.querySelector('.restore').classList.add("hide");
document.querySelector('.maximize').classList.remove("hide");
})
function signal(callback, params) {
const event = new CustomEvent("signal", { detail: { callback: callback, params: params } });
document.dispatchEvent(event);
}
</script>
</html>

4
manager/javascripts/installations.js
View File

@ -4,7 +4,7 @@ const ejs = require('ejs')
const { logger } = require("./filesystem");
const { showConfirmPopup } = require("./popup");
class InstallationsPage extends ManagerPage {
class installationPage extends ManagerPage {
constructor(manager, options) {
super(manager, options);
}
@ -64,4 +64,4 @@ class InstallationsPage extends ManagerPage {
}
}
module.exports = InstallationsPage;
module.exports = installationPage;

130
manager/javascripts/manager.js
View File

@ -1,18 +1,13 @@
const MenuPage = require("./menu");
const InstallationsPage = require('./installations');
const ConnectionsPage = require('./connections');
const PasswordsPage = require('./passwords');
const ResultPage = require('./result');
const InstancesPage = require('./instances');
const path = require("path")
const fs = require("fs");
const DCSInstance = require('./dcsinstance');
const { showErrorPopup, showWaitPopup, showConfirmPopup } = require('./popup');
const { fixInstances } = require('./filesystem');
const { logger } = require("./filesystem")
const path = require("path")
const fs = require("fs");
const WelcomePage = require("./welcome");
const TypePage = require("./type");
const ManagerPage = require("./managerpage");
const WizardPage = require("./wizardpage");
class Manager {
options = {
@ -21,7 +16,7 @@ class Manager {
};
welcomePage = null;
installationsPage = null;
folderPage = null;
typePage = null;
connectionsPage = null;
passwordsPage = null;
@ -29,10 +24,19 @@ class Manager {
instancesPage = null;
constructor() {
}
document.addEventListener("signal", (ev) => {
const callback = ev.detail.callback;
const params = ev.detail.params;
try {
eval(`this.${callback}(${params})`)
} catch (e) {
console.error(e);
}
});
}
async start() {
/* Check if the options file exists */
if (fs.existsSync("options.json")) {
/* Load the options from the json file */
try {
@ -47,17 +51,17 @@ class Manager {
/* Hide the loading page */
document.getElementById("loader").classList.add("hide");
/* Show page to select basic vs advanced mode */
this.welcomePage = new WelcomePage(this);
document.body.appendChild(this.welcomePage.getElement());
/* Show page to select basic vs expert mode */
this.welcomePage = new ManagerPage(this, "./ejs/welcome.ejs");
this.welcomePage.show();
}
else {
document.getElementById("header").classList.remove("hide");
/* Initialize mode switching */
if (this.options.mode === "basic") {
document.getElementById("switch-mode").innerText = "Advanced mode";
document.getElementById("switch-mode").onclick = () => { this.switchMode("advanced"); }
document.getElementById("switch-mode").innerText = "Expert mode";
document.getElementById("switch-mode").onclick = () => { this.switchMode("expert"); }
}
else {
document.getElementById("switch-mode").innerText = "Basic mode";
@ -96,27 +100,19 @@ class Manager {
this.options.singleInstance = this.options.instances.length === 1;
/* Create all the HTML pages */
this.menuPage = new MenuPage(this);
this.installationsPage = new InstallationsPage(this);
this.typePage = new TypePage(this);
this.connectionsPage = new ConnectionsPage(this);
this.passwordsPage = new PasswordsPage(this);
this.resultPage = new ResultPage(this);
this.instancesPage = new InstancesPage(this);
document.body.appendChild(this.menuPage.getElement());
document.body.appendChild(this.installationsPage.getElement());
document.body.appendChild(this.typePage.getElement());
document.body.appendChild(this.connectionsPage.getElement());
document.body.appendChild(this.passwordsPage.getElement());
document.body.appendChild(this.resultPage.getElement());
document.body.appendChild(this.instancesPage.getElement());
this.menuPage = new ManagerPage(this, "./ejs/menu.ejs");
this.folderPage = new WizardPage(this, "./ejs/installation.ejs");
this.typePage = new WizardPage(this, "./ejs/type.ejs");
//this.connectionsPage = new ConnectionsPage(this);
//this.passwordsPage = new PasswordsPage(this);
//this.resultPage = new ResultPage(this);
//this.instancesPage = new InstancesPage(this);
if (this.options.mode === "basic") {
/* In basic mode no dashboard is shown */
this.menuPage.show();
} else {
/* In advanced mode we go directly to the dashboard */
/* In Expert mode we go directly to the dashboard */
this.instancesPage.show();
}
}
@ -126,12 +122,76 @@ class Manager {
return this.options.activeInstance;
}
createOptionsFile(mode) {
try {
fs.writeFileSync("options.json", JSON.stringify({mode: mode}));
location.reload();
} catch (e) {
showErrorPopup(`A critical error occurred, check ${this.options.logLocation} for more info.`)
}
}
switchMode(newMode) {
/* Change the mode in the options.json and reload the page */
var options = JSON.parse(fs.readFileSync("options.json"));
options.mode = newMode;
fs.writeFileSync("options.json", JSON.stringify(options));
location.reload();
}
/************************************************/
/* CALLBACKS */
/************************************************/
/* Switch to basic mode */
onBasicClicked() {
this.createOptionsFile("basic");
}
/* Switch to expert mode */
onExpertClicked() {
this.createOptionsFile("expert");
}
/* When the install button is clicked go the installation page */
onInstallClicked() {
this.options.install = true;
if (this.options.singleInstance) {
this.options.activeInstance = this.options.instances[0];
/* Show the type selection page */
if (!this.options.activeInstance.installed) {
this.menuPage.hide();
this.typePage.show(this.menuPage);
} else {
showConfirmPopup("<div style='font-size: 18px; max-width: 100%'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
() => {
this.menuPage.hide();
this.typePage.show(this.menuPage);
}
)
}
} else {
/* Show the folder selection page */
this.menuPage.hide();
this.folderPage.show(this.menuPage);
}
}
/* When the edit button is clicked go to the instances page */
onEditClicked() {
this.hide();
this.options.install = false;
if (this.options.singleInstance) {
this.options.activeInstance = this.options.instances[0];
this.typePage.show(this);
} else {
this.folderPage.show(this);
}
}
}
module.exports = Manager;

40
manager/javascripts/managerpage.js
View File

@ -1,14 +1,19 @@
const { logger } = require("./filesystem");
const ejs = require('ejs')
class ManagerPage {
manager;
ejsFile;
element;
options;
options = {};
previousPage;
constructor(manager, options) {
constructor(manager, ejsFile) {
this.manager = manager;
this.options = options ?? {};
this.element = document.createElement('div');
this.element.classList.add("manager-page", "hide");
this.ejsFile = ejsFile;
document.body.appendChild(this.element);
}
getElement() {
@ -16,6 +21,14 @@ class ManagerPage {
}
show(previousPage) {
ejs.renderFile(this.ejsFile, {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
logger.error(err);
}
});
this.element.classList.remove("hide");
if (previousPage !== undefined)
@ -26,29 +39,16 @@ class ManagerPage {
this.element.classList.add("hide");
}
render() {
render(str) {
this.element.innerHTML = str;
/* Connect all the collapsable buttons */
let buttons = document.querySelectorAll(".button.collapse");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", () => {
buttons[i].classList.toggle("open");
})
}
/* Connect the back, next and cancel buttons */
if (this.element.querySelector(".back"))
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
if (this.element.querySelector(".next"))
this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
if (this.element.querySelector(".cancel"))
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
}
onBackClicked() {
this.hide();
this.previousPage.show()
}
}
}

87
manager/javascripts/menu.js
View File

@ -1,87 +0,0 @@
const ManagerPage = require("./managerpage");
const ejs = require('ejs')
const { logger } = require("./filesystem");
const { showConfirmPopup } = require("./popup");
class MenuPage extends ManagerPage {
constructor(manager, options) {
super(manager, options);
}
render(str) {
const element = this.getElement();
element.innerHTML = str;
element.querySelector(".install").addEventListener("click", (e) => this.onInstallClicked(e));
element.querySelector(".edit").addEventListener("click", (e) => this.onEditClicked(e));
element.querySelector(".uninstall").addEventListener("click", (e) => this.onUninstallClicked(e));
super.render();
}
show(previousPage) {
ejs.renderFile("./ejs/menu.ejs", {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
logger.error(err);
}
});
super.show(previousPage);
}
/* When the install button is clicked go the installation page */
onInstallClicked(e) {
this.manager.options.install = true;
if (this.manager.options.singleInstance) {
this.manager.options.activeInstance = this.manager.options.instances[0];
/* Show the connections page */
if (!this.manager.options.activeInstance.installed) {
this.hide();
this.manager.typePage.show(this);
} else {
showConfirmPopup("<div style='font-size: 18px; max-width: 100%'> Olympus is already installed in this instance! </div> If you click Accept, it will be installed again and all changes, e.g. custom databases or mods support, will be lost. Are you sure you want to continue?",
() => {
this.hide();
this.manager.typePage.show(this);
}
)
}
} else {
this.hide();
this.manager.installationsPage.show(this);
}
}
/* When the edit button is clicked go to the instances page */
onEditClicked(e) {
this.hide();
this.manager.options.install = false;
if (this.manager.options.singleInstance) {
this.manager.options.activeInstance = this.manager.options.instances[0];
this.manager.typePage.show(this);
} else {
this.manager.installationsPage.show(this);
}
}
/* When the remove button is clicked go to the instances page */
onUninstallClicked(e) {
this.manager.options.install = false;
if (this.manager.options.singleInstance) {
this.manager.options.activeInstance = this.manager.options.instances[0];
this.manager.options.activeInstance.uninstall();
} else {
// TODO select instance to remove
}
}
}
module.exports = MenuPage;

2
manager/javascripts/preload.js
View File

@ -256,7 +256,6 @@ contextBridge.exposeInMainWorld(
}
});
/* On content loaded */
window.addEventListener('DOMContentLoaded', async () => {
/* Compute the height of the content page */
@ -297,4 +296,3 @@ ipcRenderer.on("check-version", () => {
/* Check if a new version is available */
checkVersion();
})

52
manager/javascripts/welcome.js
View File

@ -1,52 +0,0 @@
const ManagerPage = require("./managerpage");
const ejs = require('ejs')
const { logger } = require("./filesystem")
const fs = require("fs");
const { showErrorPopup } = require("./popup");
class WelcomePage extends ManagerPage {
constructor(manager, options) {
super(manager, options);
}
render(str) {
const element = this.getElement();
element.innerHTML = str;
element.querySelector(".basic").addEventListener("click", (e) => this.onbasicClicked(e));
element.querySelector(".advanced").addEventListener("click", (e) => this.onAdvancedClicked(e));
super.render();
}
show(previousPage) {
ejs.renderFile("./ejs/welcome.ejs", {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.render(str);
} else {
logger.error(err);
}
});
super.show(previousPage);
}
onbasicClicked(e) {
this.createOptionsFile("basic");
}
onAdvancedClicked(e) {
this.createOptionsFile("advanced");
}
createOptionsFile(mode) {
try {
fs.writeFileSync("options.json", JSON.stringify({mode: mode}));
location.reload();
} catch (e) {
showErrorPopup(`A critical error occurred, check ${this.manager.options.logLocation} for more info.`)
}
}
}
module.exports = WelcomePage;

53
manager/javascripts/wizardpage.js Normal file
View File

@ -0,0 +1,53 @@
const ManagerPage = require("./managerpage");
const ejs = require('ejs')
class WizardPage extends ManagerPage {
contentEjsFile;
constructor(manager, contentEjsFile) {
super(manager, './ejs/wizard.ejs');
this.contentEjsFile = contentEjsFile;
}
render(str) {
super.render(str);
/* Connect the back, next and cancel buttons */
if (this.element.querySelector(".back"))
this.element.querySelector(".back").addEventListener("click", (e) => this.onBackClicked(e));
if (this.element.querySelector(".next"))
this.element.querySelector(".next").addEventListener("click", (e) => this.onNextClicked(e));
if (this.element.querySelector(".cancel"))
this.element.querySelector(".cancel").addEventListener("click", (e) => this.onCancelClicked(e));
ejs.renderFile(this.contentEjsFile, {...this.options, ...this.manager.options}, {}, (err, str) => {
if (!err) {
this.element.querySelector(".content").innerHTML = str;
} else {
logger.error(err);
}
});
}
onBackClicked() {
console.log(this.previousPage)
this.hide();
this.previousPage.show()
}
onCancelClicked() {
this.hide();
if (this.manager.options.mode === "basic") {
/* In basic mode no dashboard is shown */
this.manager.menuPage.show();
} else {
/* In Expert mode we go directly to the dashboard */
this.manager.instancesPage.show();
}
}
}
module.exports = WizardPage;

130
manager/stylesheets/style.css
View File

@ -186,34 +186,6 @@ body {
margin-bottom: 10px;
}
.instructions {
color: var(--offwhite);
display: flex;
flex-direction: column;
row-gap: 10px;
width: 50%;
}
.instructions>span {
text-align: center;
}
.instructions>span:first-child {
font-size: 22px;
font-weight: 600;
}
.instructions>span:not(:first-child) {
font-size: 15px;
color: var(--gray);
}
.buttons-footer {
display: flex;
column-gap: 10px;
justify-content: center;
}
.button {
padding: 10px 15px;
border-radius: 5px;
@ -225,23 +197,6 @@ body {
column-gap: 10px;
}
.next {
color: var(--background);
background-color: var(--offwhite);
}
.back {
color: var(--offwhite);
background-color: var(--background);
border: 1px solid var(--offwhite);
}
.cancel {
padding: 10px 5px;
color: var(--offwhite);
text-decoration: underline;
}
.close-popup {
color: var(--offwhite);
background-color: var(--blue);
@ -328,87 +283,6 @@ input {
overflow-y: auto;
}
.manager-page>div {
display: flex;
flex-direction: row;
height: 100%;
min-height: 100%;
align-items: center;
}
.step-summary {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 30%;
font-size: 18px;
font-weight: 600;
color: var(--offwhite);
border-left: 1px dashed var(--offwhite);
height: 200px;
row-gap: 100px;
margin-left: 80px;
}
.step-summary div {
display: flex;
width: 280px;
height: 80px;
align-items: center;
column-gap: 15px;
margin-left: -15px;
margin-top: -40px;
margin-bottom: -40px;
font-size: 14px;
color: var(--gray);
}
.step-summary div:before {
display: inline-block;
content: "";
width: 30px;
height: 30px;
border: 1px solid var(--offwhite);
border-radius: 999px;
}
.step-summary div.white {
color: var(--offwhite);
}
.step-summary div.blue {
text-decoration: underline;
}
.step-summary div.white:before {
background-color: var(--offwhite);
}
.step-summary div.empty:before {
background-color: var(--background);
}
.step-summary div.blue:before {
border: 1px solid var(--blue);
background-color: var(--blue);
}
.content {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 20px;
align-items: center;
justify-content: center;
padding: 20px;
}
.content>div {
max-width: 60%;
}
.input-group {
color: var(--offwhite);
display: flex;
@ -447,10 +321,6 @@ input {
margin-bottom: 10px;
}
.buttons-footer {
margin-top: 10px;
}
.divider {
border-top: 0px solid transparent !important;
border-bottom: 1px solid var(--offwhite) !important;