DCSOlympus/manager/ejs/wizard.ejs
2024-01-23 08:01:34 +01:00

87 lines
2.2 KiB
Plaintext

<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 {
display: flex;
flex-direction: column;
row-gap: 15px;
color: var(--offwhite);
}
.instructions .step {
font-size: 14px;
color: var(--lightgray);
}
.instructions .description {
font-size: 14px;
color: var(--lightgray);
}
.instructions .title {
font-size: 24px;
font-weight: bold;
}
.content > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
row-gap: 20px;
align-items: start;
justify-content: center;
}
.wizard-inputs {
display: flex;
flex-direction: column;
row-gap: 10px;
}
.wizard-page .button.radio {
width: 300px;
}
.note {
width: 100%;
background-color: var(--background-note);
color: var(--offwhite);
border-left: 5px solid var(--offwhite);
font-size: 14px;
padding: 15px;
font-weight: 600;
}
.warning {
background-color: var(--background-warning);
border-left: 5px solid var(--orange);
}
</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; cursor: pointer; text-decoration: underline;" onclick="signal('onCancelClicked')">
<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);" onclick="signal('onBackClicked')">
Back
</div>
<div class="button next" style="color: var(--background); background-color: var(--offwhite);" onclick="signal('onNextClicked')">
Next
</div>
</div>
</div>