DCSOlympus/manager/ejs/wizard.ejs
2024-01-31 12:59:46 +01:00

87 lines
2.4 KiB
Plaintext

<style>
.wizard-page {
display: flex;
flex-direction: column;
row-gap: 30px;
padding: 60px 120px;
max-height: 100%;
}
.wizard-page .instructions {
display: flex;
flex-direction: column;
row-gap: 15px;
color: var(--offwhite);
}
.wizard-page .instructions .step {
font-size: var(--normal);
color: var(--lightgray);
}
.wizard-page .instructions .description {
font-size: var(--normal);
color: var(--lightgray);
}
.wizard-page .instructions .title {
font-size: 24px;
font-weight: bold;
}
.wizard-page .content {
overflow-x: hidden;
overflow-y: scroll;
}
.wizard-page .content > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 20px;
align-items: start;
justify-content: center;
}
.wizard-page .wizard-inputs {
display: flex;
flex-direction: column;
row-gap: 10px;
}
.wizard-page .button.radio {
width: 300px;
}
.wizard-page .note {
width: 100%;
background-color: var(--background-note);
color: var(--offwhite);
border-left: 5px solid var(--offwhite);
font-size: var(--normal);
padding: 15px;
font-weight: 600;
}
.wizard-page .warning {
background-color: var(--background-warning);
border-left: 5px solid var(--orange);
}
</style>
<div class="wizard-page">
<div class="cancel" style="font-size: var(--normal); font-weight: 600; color: var(--offwhite); display: flex; align-items: center; column-gap: 10px; cursor: pointer; text-decoration: underline;" onclick="signal('onCancelClicked')">
<img src="./icons/chevron-left-solid.svg" style=" height: 14px;"><%= state === 'INSTALL'? "Cancel install": "Cancel editing" %>
</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);" onclick="signal('onBackClicked')">
Back
</div>
<div class="button next" style="color: var(--background); background-color: var(--offwhite);" onclick="signal('onNextClicked')">
Next
</div>
</div>
</div>