Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-04-02 05:23:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

setup wizard style

Browse Source
This commit is contained in:
Drew Ansbacher
2021-08-08 19:48:15 -06:00
committed by Aiden McClelland
parent 7661626a94
commit ca19ffd9f7
17 changed files with 456 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
setup-wizard/src/app/app.component.html
View File

@@ -1,12 +1,7 @@
<ion-app> <ion-app>
<ion-header> <body>
<ion-toolbar color="primary"> <ion-content *ngIf="!stateService.loading" class="has-header">
<ion-title> <ion-router-outlet></ion-router-outlet>
Embassy Setup Wizard </ion-content>
</ion-title> </body>
</ion-toolbar>
</ion-header>
<ion-content *ngIf="!stateService.loading" class="has-header">
<ion-router-outlet></ion-router-outlet>
</ion-content>
</ion-app> </ion-app>

182
setup-wizard/src/app/pages/home/home.page.html
View File

@@ -1,76 +1,114 @@
<ion-content> <ion-content color="light">
<div *ngIf="!stateService.dataDrive && dataDrives"> <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
<div *ngIf="!dataDrives.length"> <ion-row class="ion-align-items-center" style="height: 100%;">
<h2 color="light">No data drives found</h2> <ion-col class="ion-text-center">
<p color="light">Please connect a data drive to your embassy and refresh the page.</p>
</div>
<div *ngIf="dataDrives.length">
<h2 style="text-align: center;" color="secondary">Select Data Drive</h2>
<ion-card <div style="padding-bottom: 32px;">
color="medium" <img src="assets/png/logo.png" style="max-width: 240px;" />
*ngFor="let drive of dataDrives" </div>
(click)="selectDrive(drive)"
button="true"
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
color="light"
class="wiz-card"
>
<ion-card-header>
<ion-card-title>{{drive.logicalname}}</ion-card-title>
<ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content> <ion-card>
Currently using {{drive.used}} out of {{drive.capacity}} bytes. <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
</ion-card-content> <ion-card-title>{{ stateService.dataDrive ? 'Startup Options' : 'Select Data Drive'}}</ion-card-title>
</ion-card> </ion-card-header>
<div style="width: 100%; text-align: center;">
<ion-button
(click)="warn()"
color="primary"
[disabled]="!selectedDrive"
style="text-align:center"
size="large"
>
Next
</ion-button>
</div>
</div>
</div>
<div *ngIf="stateService.dataDrive">
<ion-grid style="max-width: 800px; margin: auto; margin-top: 30px;">
<ion-row>
<ion-col size-xs="12" size-sm="6">
<ion-card
(click)="presentPasswordModal()"
button="true"
color="light"
class="wiz-card"
style="text-align: center; background-color: #00919b !important; height: 160px;"
>
<ion-card-header style="margin-top: 25px;">
<ion-card-title style="font-size: 40px">Start Fresh</ion-card-title>
<ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size-xs="12" size-sm="6">
<ion-card
[routerLink]="['/recover']"
button="true"
color="light"
class="wiz-card"
style="text-align: center; background-color: #bf5900 !important; height: 160px;"
>
<ion-card-header style="margin-top: 25px;">
<ion-card-title style="font-size: 40px">Recover</ion-card-title>
<ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div> <ion-card-content class="ion-margin">
<div *ngIf="!stateService.loading && !stateService.dataDrive && dataDrives">
<div *ngIf="!dataDrives.length">
<h2 color="light">No data drives found</h2>
<p color="light">Please connect a data drive to your embassy and refresh the page.</p>
<ion-button
(click)="window.location.reload()"
style="text-align:center"
class="claim-button"
>
Refresh
</ion-button>
</div>
<div *ngIf="dataDrives.length">
<ion-card
color="light"
*ngFor="let drive of dataDrives"
(click)="selectDrive(drive)"
button="true"
style="border-radius: 11px;"
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
>
<ion-card-header>
<ion-card-title>{{drive.logicalname}}</ion-card-title>
<ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Using {{drive.used}} out of {{drive.capacity}} bytes.
</ion-card-content>
</ion-card>
<div style="width: 100%; text-align: center;">
<ion-button
(click)="warn()"
[disabled]="!selectedDrive"
class="claim-button"
>
Next
</ion-button>
</div>
</div>
</div>
<div *ngIf="stateService.dataDrive">
<ion-card
(click)="presentPasswordModal()"
button="true"
color="light"
class="wiz-card"
style="text-align: center; background-color: #00919b !important; height: 160px;"
>
<ion-card-header>
<ion-card-title style="font-size: 40px">Start Fresh</ion-card-title>
<ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
</ion-card-header>
</ion-card>
<ion-card
[routerLink]="['/recover']"
button="true"
color="light"
class="wiz-card"
style="text-align: center; background-color: #bf5900 !important; height: 160px;"
>
<ion-card-header>
<ion-card-title style="font-size: 40px">Recover</ion-card-title>
<ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
</ion-card-header>
</ion-card>
</div>
</ion-card-content>
<ion-card-header class="card-footer">
<ion-item lines="none">
<ion-label class="ion-text-wrap">
<p *ngIf="!stateService.dataDrive">
Choose drive to save all Embassy data to.
</p>
<p *ngIf="stateService.dataDrive">
Spin up a brand new Embassy, or recover data from an old device.
</p>
</ion-label>
</ion-item>
</ion-card-header>
</ion-card>
<div class="divider"></div>
<div class="footer">
<p style="margin-bottom: 30px;">Contact/Community</p>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="paper-plane"></ion-icon>
<ion-icon name="mail"></ion-icon>
<ion-icon name="logo-github"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-mastodon"></ion-icon>
<ion-icon name="logo-medium"></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content> </ion-content>

42
setup-wizard/src/app/pages/home/home.page.scss
View File

@@ -1,3 +1,43 @@
.selected { .selected {
border: 1px solid white; border: 4px solid gray;
}
ion-card-title {
margin: 24px 0;
font-family: 'Montserrat';
font-size: x-large;
--color: var(--ion-color-light);
}
ion-item {
--border-radius: 4px;
--border-style: solid;
--border-width: 1px;
--border-color: var(--ion-color-light);
}
.input-label {
text-align: left;
padding-bottom: 2px;
font-size: small;
color: var(--ion-color-light);
font-weight: bold;
}
.claim-button {
margin-inline-start: 0;
margin-inline-end: 0;
margin-top: 24px;
height: 48px;
--background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
}
.card-footer {
text-align: left;
--background: rgb(222, 222, 222);
border-top: solid;
border-width: 1px;
border-color: var(--ion-color-medium);
ion-item {
--border-color: var(--ion-color-medium);
}
} }

17
setup-wizard/src/app/pages/home/home.page.ts
View File

@@ -10,8 +10,9 @@ import { PasswordPage } from '../password/password.page'
styleUrls: ['home.page.scss'], styleUrls: ['home.page.scss'],
}) })
export class HomePage { export class HomePage {
dataDrives = null dataDrives = []
selectedDrive: DataDrive = null selectedDrive: DataDrive = null
console = console
constructor( constructor(
private readonly apiService: ApiService, private readonly apiService: ApiService,
@@ -22,9 +23,6 @@ export class HomePage {
) {} ) {}
async ngOnInit() { async ngOnInit() {
const loader = await this.loadingCtrl.create({
message: 'Selecting data drive'
})
if(!this.stateService.dataDrive) { if(!this.stateService.dataDrive) {
const loader = await this.loadingCtrl.create({ const loader = await this.loadingCtrl.create({
message: 'Fetching data drives' message: 'Fetching data drives'
@@ -47,7 +45,7 @@ export class HomePage {
const alert = await this.alertController.create({ const alert = await this.alertController.create({
cssClass: 'my-custom-class', cssClass: 'my-custom-class',
header: 'Warning!', header: 'Warning!',
message: 'This drive will be entirely wiped of all memory.', message: 'This drive will be entirely wiped of all existing memory.',
backdropDismiss: false, backdropDismiss: false,
buttons: [ buttons: [
{ {
@@ -91,9 +89,11 @@ export class HomePage {
cssClass: 'pw-modal', cssClass: 'pw-modal',
}) })
modal.onDidDismiss().then(ret => { modal.onDidDismiss().then(ret => {
const pass = ret.data.password if(ret.data) {
if (pass) { const pass = ret.data.password
this.submitPassword(pass) if (pass) {
this.submitPassword(pass)
}
} }
}) })
await modal.present(); await modal.present();
@@ -107,6 +107,7 @@ export class HomePage {
try { try {
await this.apiService.submitPassword(pw) await this.apiService.submitPassword(pw)
console.log('reloading')
location.reload() location.reload()
} catch (e) { } catch (e) {
} finally { } finally {

10
setup-wizard/src/app/pages/password/password.page.html
View File

@@ -1,5 +1,5 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="light">
<ion-title> <ion-title>
<span *ngIf="needsVer">Enter Password</span> <span *ngIf="needsVer">Enter Password</span>
<span *ngIf="!needsVer">Create Password</span> <span *ngIf="!needsVer">Create Password</span>
@@ -13,13 +13,13 @@
</div> </div>
<div *ngIf="!needsVer"> <div *ngIf="!needsVer">
<ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input> <ion-input (click)="error = ''" (focusout)="validate()" style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
<ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">Verify Password:</ion-input> <ion-input (focusout)="checkMatch()" style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">Verify Password:</ion-input>
</div> </div>
<p style="color: #FF4961;">{{error}}</p> <p style="color: #FF4961;">{{error}}</p>
<div style="text-align: right; position: absolute; bottom: 10px; right: 24px;"> <div style="text-align: right; position: absolute; bottom: 10px; right: 24px;">
<ion-button color="tertiary" item-end (click)="cancel()">Cancel</ion-button> <ion-button class="claim-button" item-end (click)="cancel()" style="margin-right: 10px;">Cancel</ion-button>
<ion-button color="primary" item-end (click)="submitPassword()" [disabled]="!password">Submit</ion-button> <ion-button class="claim-button" item-end (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
</div> </div>
</div> </div>

7
setup-wizard/src/app/pages/password/password.page.scss
View File

@@ -0,0 +1,7 @@
.claim-button {
margin-inline-start: 0;
margin-inline-end: 0;
margin-top: 24px;
height: 48px;
--background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
}

24
setup-wizard/src/app/pages/password/password.page.ts
View File

@@ -26,11 +26,13 @@ export class PasswordPage {
async submitPassword () { async submitPassword () {
if(!this.needsVer) { if(!this.needsVer) {
if (this.password.length < 12) { this.validate()
this.error="*passwords must be 12 characters or greater" if(!this.error) {
} else if (this.password !== this.passwordVer) { this.checkMatch()
this.error="*passwords dont match"
} }
this.modalController.dismiss({
password: this.password,
})
} else { } else {
this.modalController.dismiss({ this.modalController.dismiss({
password: this.password, password: this.password,
@@ -38,6 +40,20 @@ export class PasswordPage {
} }
} }
validate () {
if (this.password.length < 12) {
this.error="*passwords must be 12 characters or greater"
}
}
checkMatch () {
if (this.password !== this.passwordVer) {
this.error="*passwords dont match"
} else {
this.error = ''
}
}
cancel () { cancel () {
this.modalController.dismiss() this.modalController.dismiss()
} }

142
setup-wizard/src/app/pages/recover/recover.page.html
View File

@@ -1,53 +1,95 @@
<ion-content> <ion-content color="light">
<div *ngIf="!stateService.polling && dataDrives?.length"> <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
<div *ngIf="!dataDrives.length"> <ion-row class="ion-align-items-center" style="height: 100%;">
<h2 color="light">No recovery drives found</h2> <ion-col class="ion-text-center">
<p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
</div>
<div>
<h2 style="text-align: center;" color="secondary">Select Recovery Drive</h2>
<ion-card
class="wiz-card"
*ngFor="let drive of dataDrives"
(click)="selectDrive(drive)"
button="true"
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
color="light"
>
<ion-card-header>
<ion-card-title>{{drive.logicalname}}</ion-card-title>
<ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content> <div style="padding-bottom: 32px;">
Currently running {{drive.version}} <img src="assets/png/logo.png" style="max-width: 240px;" />
</ion-card-content> </div>
</ion-card>
<div style="width: 100%; text-align: center;;">
<ion-button
(click)="presentPasswordModal()"
color="primary"
[disabled]="!selectedDrive"
style="text-align:center"
size="large"
>
Next
</ion-button>
</div>
</div>
</div> <ion-card>
<div *ngIf="stateService.polling" style="width: 100%; text-align: center;"> <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
<h2 style="padding-bottom: 30px; padding-top: 70px;">Recovery Progress: {{ 100 * stateService.dataProgress }}% </h2> <ion-card-title>{{ stateService.recoveryDrive && stateService.polling ? 'Recovery Progress: ' + (100 * stateService.dataProgress) + '%' : 'Select Recovery Drive'}}</ion-card-title>
<ion-progress-bar color="primary" style="max-width: 700px; margin: auto; padding-bottom: 20px; margin-bottom: 40px;" value="{{stateService.dataProgress}}"></ion-progress-bar> </ion-card-header>
<ion-button
(click)="navToEmbassy()" <ion-card-content class="ion-margin">
color="primary" <div *ngIf="!loading && recoveryDrives && !recoveryDrives.length">
[disabled]="stateService.dataProgress !== 1" <h2 color="light">No recovery drives found</h2>
style="text-align:center" <p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
size="large" </div>
> <div *ngIf="!stateService.polling && recoveryDrives?.length">
Go To Embassy <div>
</ion-button> <ion-card
</div> class="wiz-card"
*ngFor="let drive of recoveryDrives"
(click)="selectDrive(drive)"
button="true"
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
color="light"
>
<ion-card-header>
<ion-card-title>{{drive.logicalname}}</ion-card-title>
<ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Currently running {{drive.version}}
</ion-card-content>
</ion-card>
<div style="width: 100%; text-align: center;;">
<ion-button
(click)="presentPasswordModal()"
[disabled]="!selectedDrive"
style="text-align:center"
size="large"
class="claim-button"
>
Next
</ion-button>
</div>
</div>
</div>
<div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
<ion-progress-bar color="primary" style="max-width: 700px; margin: auto; padding-bottom: 20px; margin-bottom: 40px;" value="{{stateService.dataProgress}}"></ion-progress-bar>
<ion-button
(click)="navToEmbassy()"
[disabled]="stateService.dataProgress !== 1"
style="text-align:center"
class="claim-button"
>
Go To Embassy
</ion-button>
</div>
</ion-card-content>
<ion-card-header class="card-footer">
<ion-item lines="none">
<ion-label class="ion-text-wrap">
<p *ngIf="!stateService.recoveryDrive">
Choose drive recover Embassy data from.
</p>
<p *ngIf="stateService.recoveryDrive && stateService.polling">
Recovering old Embassy data.
</p>
</ion-label>
</ion-item>
</ion-card-header>
</ion-card>
<div class="divider"></div>
<div class="footer">
<p style="margin-bottom: 30px;">Contact/Community</p>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="paper-plane"></ion-icon>
<ion-icon name="mail"></ion-icon>
<ion-icon name="logo-github"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-mastodon"></ion-icon>
<ion-icon name="logo-medium"></ion-icon>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content> </ion-content>

43
setup-wizard/src/app/pages/recover/recover.page.scss
View File

@@ -1,3 +1,44 @@
.selected { .selected {
border: 1px solid white; border: 4px solid gray;
}
ion-card-title {
margin: 24px 0;
font-family: 'Montserrat';
font-size: x-large;
--color: var(--ion-color-light);
}
ion-item {
--border-radius: 4px;
--border-style: solid;
--border-width: 1px;
--border-color: var(--ion-color-light);
}
.input-label {
text-align: left;
padding-bottom: 2px;
font-size: small;
color: var(--ion-color-light);
font-weight: bold;
}
.claim-button {
margin-inline-start: 0;
margin-inline-end: 0;
margin-top: 24px;
height: 48px;
--background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
}
.card-footer {
text-align: left;
--background: rgb(222, 222, 222);
border-top: solid;
border-width: 1px;
border-color: var(--ion-color-medium);
ion-item {
--border-color: var(--ion-color-medium);
}
} }

15
setup-wizard/src/app/pages/recover/recover.page.ts
View File

@@ -10,8 +10,9 @@ import { PasswordPage } from '../password/password.page'
styleUrls: ['recover.page.scss'], styleUrls: ['recover.page.scss'],
}) })
export class RecoverPage { export class RecoverPage {
dataDrives = null recoveryDrives = []
selectedDrive: RecoveryDrive = null selectedDrive: RecoveryDrive = null
loading = true
constructor( constructor(
private readonly apiService: ApiService, private readonly apiService: ApiService,
@@ -27,10 +28,12 @@ export class RecoverPage {
message: 'Fetching recovery drives' message: 'Fetching recovery drives'
}) })
await loader.present() await loader.present()
this.dataDrives = await this.apiService.getRecoveryDrives() this.recoveryDrives = await this.apiService.getRecoveryDrives()
loader.dismiss() loader.dismiss()
this.loading = false
} else { } else {
this.loading = false
this.stateService.pollDataTransferProgress() this.stateService.pollDataTransferProgress()
} }
} }
@@ -57,9 +60,11 @@ export class RecoverPage {
} }
}) })
modal.onDidDismiss().then(ret => { modal.onDidDismiss().then(ret => {
const pass = ret.data.password if(ret.data) {
if(pass) { const pass = ret.data.password
this.submitPWAndDrive(pass) if(pass) {
this.submitPWAndDrive(pass)
}
} }
}) })
await modal.present(); await modal.present();

18
setup-wizard/src/app/services/api/mock-api.service.ts
View File

@@ -15,13 +15,13 @@ export class MockApiService extends ApiService {
await pauseFor(2000) await pauseFor(2000)
return { return {
'data-drive': 'data-drive':
null, // null,
// { {
// logicalname: 'name1', logicalname: 'name1',
// labels: ['label 1', 'label 2'], labels: ['label 1', 'label 2'],
// capacity: 1600, capacity: 1600,
// used: 200, used: 200,
// }, },
'recovery-drive': 'recovery-drive':
null, null,
// { // {
@@ -44,13 +44,13 @@ export class MockApiService extends ApiService {
await pauseFor(2000) await pauseFor(2000)
return [ return [
{ {
logicalname: 'name1', logicalname: 'Name1',
labels: ['label 1', 'label 2'], labels: ['label 1', 'label 2'],
capacity: 1600, capacity: 1600,
used: 200, used: 200,
}, },
{ {
logicalname: 'name2', logicalname: 'Name2',
labels: [], labels: [],
capacity: 1600, capacity: 1600,
used: 0, used: 0,

1
setup-wizard/src/app/services/state.service.ts
View File

@@ -18,6 +18,7 @@ export class StateService {
) {} ) {}
async getState() { async getState() {
this.loading = true
const state = await this.apiService.getState() const state = await this.apiService.getState()
if(state) { if(state) {
this.dataDrive = state['data-drive'] this.dataDrive = state['data-drive']

BIN
setup-wizard/src/assets/fonts/Benton_Sans/BentonSans-Regular.otf Normal file
View File

Binary file not shown.

BIN
setup-wizard/src/assets/fonts/Montserrat/Montserrat-Regular.ttf Normal file
View File

Binary file not shown.

BIN
setup-wizard/src/assets/png/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

47
setup-wizard/src/global.scss
View File

@@ -25,19 +25,48 @@
@import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css"; @import "~@ionic/angular/css/flex-utils.css";
.cancel-button {
color: #FF4961 !important; .alert-error .alert-title {
color: var(--ion-color-danger) !important;
} }
.okay-button { .loader {
color: #00AACC !important; --spinner-color: var(--ion-color-light) !important;
} }
.wiz-card { ion-avatar {
max-width: 800px; margin: auto; margin-bottom: 10px; width: 27px;
height: 27px;
} }
.pw-modal .modal-wrapper{ ion-action-sheet {
width: 400px; --backdrop-opacity: 0.75 !important;
height: 300px; }
ion-alert {
--backdrop-opacity: 0.75 !important;
}
ion-loading {
--backdrop-opacity: 0.75 !important;
}
ion-item {
--highlight-color-valid: transparent;
--highlight-color-invalid: transparent;
--highlight-color-focused: var(--ion-color-light);
}
.divider {
margin: 50px 0;
height: 2px;
background: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255, 255, 255, 0.31) 50%,rgba(255,255,255,0) 100%);
}
.footer {
margin-bottom: 24px;
ion-icon {
font-size: 28px;
margin-right: 10px;
}
} }

268
setup-wizard/src/theme/variables.scss
View File

@@ -3,234 +3,90 @@
/** Ionic CSS Variables **/ /** Ionic CSS Variables **/
:root { :root {
--ion-font-family: 'Benton Sans';
/** primary **/ /** primary **/
--ion-color-primary: #007495; --ion-color-primary: #428cff;
--ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3171e0; --ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #4c8dff; --ion-color-primary-tint: #5598ff;
/** secondary **/ /** secondary **/
--ion-color-secondary: #00AACC; --ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 61, 194, 255; --ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255; --ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #36abe0; --ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #50c8ff; --ion-color-secondary-tint: #62ceff;
/** tertiary **/ /** tertiary **/
--ion-color-tertiary: #FF4961; --ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 82, 96, 255; --ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255; --ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #FF4961; --ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #FF4961; --ion-color-tertiary-tint: #7974ff;
/** success **/ /** success **/
--ion-color-success: #a5e77f; --ion-color-success: #2fdf75;
--ion-color-success-rgb: 45, 211, 111; --ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #ffffff; --ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 255, 255, 255; --ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #28ba62; --ion-color-success-shade: #29c467;
--ion-color-success-tint: #42d77d; --ion-color-success-tint: #44e283;
/** warning **/ /** warning **/
--ion-color-warning: #ffc409; --ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255, 196, 9; --ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000; --ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0; --ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0ac08; --ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffca22; --ion-color-warning-tint: #ffd948;
/** danger **/ /** danger **/
--ion-color-danger: #eb445a; --ion-color-danger: #ff4961;
--ion-color-danger-rgb: 235, 68, 90; --ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255; --ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #cf3c4f; --ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ed576b; --ion-color-danger-tint: #ff5b71;
/** dark **/ /** dark **/
--ion-color-dark: #222428; --ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 34, 36, 40; --ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 255, 255, 255; --ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #1e2023; --ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #383a3e; --ion-color-dark-tint: #f5f6f9;
/** medium **/ /** medium **/
--ion-color-medium: #574141; --ion-color-medium: #989aa2;
--ion-color-medium-rgb: 146, 148, 156; --ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #ffffff; --ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 255, 255, 255; --ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #808289; --ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #9d9fa6; --ion-color-medium-tint: #a2a4ab;
/** light **/ /** light **/
--ion-color-light: #f4f5f8; --ion-color-light: #25272b;
--ion-color-light-rgb: 244, 245, 248; --ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #000000; --ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #d7d8da; --ion-color-light-shade: #1e2023;
--ion-color-light-tint: #f5f6f9; --ion-color-light-tint: #383a3e;
} }
@media (prefers-color-scheme: dark) { @font-face {
/* font-family: 'Montserrat';
* Dark Colors font-style: normal;
* ------------------------------------------- font-weight: normal;
*/ src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf');
}
body {
--ion-color-primary: #428cff; @font-face {
--ion-color-primary-rgb: 66,140,255; font-family: 'Benton Sans';
--ion-color-primary-contrast: #ffffff; font-style: normal;
--ion-color-primary-contrast-rgb: 255,255,255; font-weight: normal;
--ion-color-primary-shade: #3a7be0; src: url('../assets/fonts/Benton_Sans/BentonSans-Regular.otf');
--ion-color-primary-tint: #5598ff;
--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;
--ion-color-tertiary: #FF4961;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #FF4961;
--ion-color-tertiary-tint: #FF4961;
--ion-color-success: #a5e77f;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;
--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;
--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;
--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #574141;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
/*
* iOS Dark Theme
* -------------------------------------------
*/
.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-item-background: #000000;
--ion-card-background: #1c1c1d;
}
.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}
/*
* Material Design Dark Theme
* -------------------------------------------
*/
.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1e1e1e;
--ion-toolbar-background: #1f1f1f;
--ion-tab-bar-background: #1f1f1f;
--ion-card-background: #1e1e1e;
}
} }