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

9
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-title>
Embassy Setup Wizard
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content *ngIf="!stateService.loading" class="has-header"> <ion-content *ngIf="!stateService.loading" class="has-header">
<ion-router-outlet></ion-router-outlet> <ion-router-outlet></ion-router-outlet>
</ion-content> </ion-content>
</body>
</ion-app> </ion-app>

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

@@ -1,20 +1,38 @@
<ion-content> <ion-content color="light">
<div *ngIf="!stateService.dataDrive && dataDrives"> <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
<ion-row class="ion-align-items-center" style="height: 100%;">
<ion-col class="ion-text-center">
<div style="padding-bottom: 32px;">
<img src="assets/png/logo.png" style="max-width: 240px;" />
</div>
<ion-card>
<ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
<ion-card-title>{{ stateService.dataDrive ? 'Startup Options' : 'Select Data Drive'}}</ion-card-title>
</ion-card-header>
<ion-card-content class="ion-margin">
<div *ngIf="!stateService.loading && !stateService.dataDrive && dataDrives">
<div *ngIf="!dataDrives.length"> <div *ngIf="!dataDrives.length">
<h2 color="light">No data drives found</h2> <h2 color="light">No data drives found</h2>
<p color="light">Please connect a data drive to your embassy and refresh the page.</p> <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>
<div *ngIf="dataDrives.length"> <div *ngIf="dataDrives.length">
<h2 style="text-align: center;" color="secondary">Select Data Drive</h2>
<ion-card <ion-card
color="medium" color="light"
*ngFor="let drive of dataDrives" *ngFor="let drive of dataDrives"
(click)="selectDrive(drive)" (click)="selectDrive(drive)"
button="true" button="true"
style="border-radius: 11px;"
[class.selected]="selectedDrive?.logicalname === drive.logicalname" [class.selected]="selectedDrive?.logicalname === drive.logicalname"
color="light"
class="wiz-card"
> >
<ion-card-header> <ion-card-header>
<ion-card-title>{{drive.logicalname}}</ion-card-title> <ion-card-title>{{drive.logicalname}}</ion-card-title>
@@ -22,16 +40,14 @@
</ion-card-header> </ion-card-header>
<ion-card-content> <ion-card-content>
Currently using {{drive.used}} out of {{drive.capacity}} bytes. Using {{drive.used}} out of {{drive.capacity}} bytes.
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
<div style="width: 100%; text-align: center;"> <div style="width: 100%; text-align: center;">
<ion-button <ion-button
(click)="warn()" (click)="warn()"
color="primary"
[disabled]="!selectedDrive" [disabled]="!selectedDrive"
style="text-align:center" class="claim-button"
size="large"
> >
Next Next
</ion-button> </ion-button>
@@ -39,9 +55,6 @@
</div> </div>
</div> </div>
<div *ngIf="stateService.dataDrive"> <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 <ion-card
(click)="presentPasswordModal()" (click)="presentPasswordModal()"
button="true" button="true"
@@ -49,13 +62,11 @@
class="wiz-card" class="wiz-card"
style="text-align: center; background-color: #00919b !important; height: 160px;" style="text-align: center; background-color: #00919b !important; height: 160px;"
> >
<ion-card-header style="margin-top: 25px;"> <ion-card-header>
<ion-card-title style="font-size: 40px">Start Fresh</ion-card-title> <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-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
</ion-card-header> </ion-card-header>
</ion-card> </ion-card>
</ion-col>
<ion-col size-xs="12" size-sm="6">
<ion-card <ion-card
[routerLink]="['/recover']" [routerLink]="['/recover']"
button="true" button="true"
@@ -63,14 +74,41 @@
class="wiz-card" class="wiz-card"
style="text-align: center; background-color: #bf5900 !important; height: 160px;" style="text-align: center; background-color: #bf5900 !important; height: 160px;"
> >
<ion-card-header style="margin-top: 25px;"> <ion-card-header>
<ion-card-title style="font-size: 40px">Recover</ion-card-title> <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-subtitle>Recover the data from an old embassy</ion-card-subtitle>
</ion-card-header> </ion-card-header>
</ion-card> </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-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</div>
</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);
}
} }

11
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,10 +89,12 @@ export class HomePage {
cssClass: 'pw-modal', cssClass: 'pw-modal',
}) })
modal.onDidDismiss().then(ret => { modal.onDidDismiss().then(ret => {
if(ret.data) {
const pass = ret.data.password const pass = ret.data.password
if (pass) { if (pass) {
this.submitPassword(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()
} }

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

@@ -1,14 +1,27 @@
<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%;">
<ion-col class="ion-text-center">
<div style="padding-bottom: 32px;">
<img src="assets/png/logo.png" style="max-width: 240px;" />
</div>
<ion-card>
<ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
<ion-card-title>{{ stateService.recoveryDrive && stateService.polling ? 'Recovery Progress: ' + (100 * stateService.dataProgress) + '%' : 'Select Recovery Drive'}}</ion-card-title>
</ion-card-header>
<ion-card-content class="ion-margin">
<div *ngIf="!loading && recoveryDrives && !recoveryDrives.length">
<h2 color="light">No recovery drives found</h2> <h2 color="light">No recovery drives found</h2>
<p color="light">Please connect a recovery drive to your embassy and refresh the page.</p> <p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
</div> </div>
<div *ngIf="!stateService.polling && recoveryDrives?.length">
<div> <div>
<h2 style="text-align: center;" color="secondary">Select Recovery Drive</h2>
<ion-card <ion-card
class="wiz-card" class="wiz-card"
*ngFor="let drive of dataDrives" *ngFor="let drive of recoveryDrives"
(click)="selectDrive(drive)" (click)="selectDrive(drive)"
button="true" button="true"
[class.selected]="selectedDrive?.logicalname === drive.logicalname" [class.selected]="selectedDrive?.logicalname === drive.logicalname"
@@ -26,10 +39,10 @@
<div style="width: 100%; text-align: center;;"> <div style="width: 100%; text-align: center;;">
<ion-button <ion-button
(click)="presentPasswordModal()" (click)="presentPasswordModal()"
color="primary"
[disabled]="!selectedDrive" [disabled]="!selectedDrive"
style="text-align:center" style="text-align:center"
size="large" size="large"
class="claim-button"
> >
Next Next
</ion-button> </ion-button>
@@ -38,16 +51,45 @@
</div> </div>
<div *ngIf="stateService.polling" style="width: 100%; text-align: center;"> <div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
<h2 style="padding-bottom: 30px; padding-top: 70px;">Recovery Progress: {{ 100 * stateService.dataProgress }}% </h2>
<ion-progress-bar color="primary" style="max-width: 700px; margin: auto; padding-bottom: 20px; margin-bottom: 40px;" value="{{stateService.dataProgress}}"></ion-progress-bar> <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 <ion-button
(click)="navToEmbassy()" (click)="navToEmbassy()"
color="primary"
[disabled]="stateService.dataProgress !== 1" [disabled]="stateService.dataProgress !== 1"
style="text-align:center" style="text-align:center"
size="large" class="claim-button"
> >
Go To Embassy Go To Embassy
</ion-button> </ion-button>
</div> </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);
}
} }

9
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,10 +60,12 @@ export class RecoverPage {
} }
}) })
modal.onDidDismiss().then(ret => { modal.onDidDismiss().then(ret => {
if(ret.data) {
const pass = ret.data.password const pass = ret.data.password
if(pass) { if(pass) {
this.submitPWAndDrive(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;
}
} }

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

@@ -3,86 +3,8 @@
/** Ionic CSS Variables **/ /** Ionic CSS Variables **/
:root { :root {
--ion-font-family: 'Benton Sans';
/** primary **/ /** primary **/
--ion-color-primary: #007495;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #00AACC;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #FF4961;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #FF4961;
--ion-color-tertiary-tint: #FF4961;
/** success **/
--ion-color-success: #a5e77f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #574141;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}
@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/
body {
--ion-color-primary: #428cff; --ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255; --ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast: #ffffff;
@@ -90,6 +12,7 @@
--ion-color-primary-shade: #3a7be0; --ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff; --ion-color-primary-tint: #5598ff;
/** secondary **/
--ion-color-secondary: #50c8ff; --ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255; --ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast: #ffffff;
@@ -97,20 +20,23 @@
--ion-color-secondary-shade: #46b0e0; --ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff; --ion-color-secondary-tint: #62ceff;
--ion-color-tertiary: #FF4961; /** tertiary **/
--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,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;
--ion-color-success: #a5e77f; /** success **/
--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117; --ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000; --ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0; --ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467; --ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283; --ion-color-success-tint: #44e283;
/** warning **/
--ion-color-warning: #ffd534; --ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52; --ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000; --ion-color-warning-contrast: #000000;
@@ -118,6 +44,7 @@
--ion-color-warning-shade: #e0bb2e; --ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948; --ion-color-warning-tint: #ffd948;
/** danger **/
--ion-color-danger: #ff4961; --ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97; --ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast: #ffffff;
@@ -125,6 +52,7 @@
--ion-color-danger-shade: #e04055; --ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71; --ion-color-danger-tint: #ff5b71;
/** dark **/
--ion-color-dark: #f4f5f8; --ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248; --ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000; --ion-color-dark-contrast: #000000;
@@ -132,14 +60,16 @@
--ion-color-dark-shade: #d7d8da; --ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9; --ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #574141; /** medium **/
--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162; --ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000; --ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0; --ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f; --ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab; --ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428; /** light **/
--ion-color-light: #25272b;
--ion-color-light-rgb: 34,36,40; --ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff; --ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255; --ion-color-light-contrast-rgb: 255,255,255;
@@ -147,90 +77,16 @@
--ion-color-light-tint: #383a3e; --ion-color-light-tint: #383a3e;
} }
/* @font-face {
* iOS Dark Theme font-family: 'Montserrat';
* ------------------------------------------- font-style: normal;
*/ font-weight: normal;
src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf');
.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 { @font-face {
--ion-background-color: var(--ion-color-step-100); font-family: 'Benton Sans';
--ion-toolbar-background: var(--ion-color-step-150); font-style: normal;
--ion-toolbar-border-color: var(--ion-color-step-250); font-weight: normal;
} src: url('../assets/fonts/Benton_Sans/BentonSans-Regular.otf');
/*
* 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;
}
} }