louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update DemoReactMarvelApp,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 23:18:53 +08:00
parent be571ba4db
commit 04eaf91d60
10 changed files with 1045 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
03_source/mobile/src/pages/DemoReactMarvelApp/components/CharacterItem.module.scss Normal file
View File

@@ -0,0 +1,43 @@
.characterContainer {
position: relative;
text-align: center;
color: white;
}
ion-item {
--padding-start: 0;
--inner-padding-end: 0;
}
ion-label {
margin-top: 12px;
margin-bottom: 12px;
}
.characterNameContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
position: absolute;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
.characterNameContainer ion-icon {
margin-top: 0.1rem;
}
.characterNameContainer ion-label {
font-size: 1rem;
font-weight: 500;
}

50
03_source/mobile/src/pages/DemoReactMarvelApp/components/CharacterItem.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { IonCol, IonIcon, IonImg, IonItem, IonLabel, IonSkeletonText } from "@ionic/react";
import { chevronForwardOutline } from "ionicons/icons";
import { Character } from "../../types";
import styles from "./CharacterItem.module.scss";
interface Props {
details: Character;
load?: boolean;
grid?: boolean;
}
const CharacterItem = (props: Props): React.JSX.Element => {
const { details, load = false, grid = true } = props;
const loadAmount = 20;
if (!load) {
return (
<IonCol size={ grid ? "6" : "12" }>
<IonItem detail={ false } routerLink={ `/character/${ details.id }` } lines="none" className={ styles.characterContainer }>
<IonImg src={ grid ? `${ details.thumbnail.path }/standard_fantastic.${ details.thumbnail.extension }` : `${ details.thumbnail.path }.${ details.thumbnail.extension }` } />
<div className={ styles.characterNameContainer }>
<IonLabel>{ details.name }</IonLabel>
<IonIcon icon={ chevronForwardOutline } />
</div>
</IonItem>
</IonCol>
);
} else {
return (
<>
{ Array.from({length: loadAmount }, (item, index) => {
return (
<IonCol key={ `loading_${ index }`} size="6">
<IonItem lines="none" className={ styles.characterContainer }>
<IonSkeletonText animated style={{ width: "100%", height: "180px" }} />
</IonItem>
</IonCol>
);
})}
</>
);
}
}
export default CharacterItem;

37
03_source/mobile/src/pages/DemoReactMarvelApp/index.tsx
View File

@@ -1,38 +1,31 @@
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { IonRouterOutlet, IonTabs } from '@ionic/react';
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import Tab1 from './AppPages/Tab1';
import Tab2 from './AppPages/Tab2';
// import Tab1 from './AppPages/Tab1';
// import Tab2 from './AppPages/Tab2';
import './style.scss';
import './theme/variables.scss';
import Home from './pages/Home';
import ViewCharacter from './pages/ViewCharacter';
import Info from './pages/Info';
function DemoReactMarvelApp() {
return (
<IonTabs>
<IonRouterOutlet>
<Route exact path="/demo-react-marvel-app/tab1">
<Tab1 />
<Route exact path="/demo-react-marvel-app/home">
<Home />
</Route>
<Route exact path="/demo-react-marvel-app/tab2">
<Tab2 />
<Route exact path="/demo-react-marvel-app/character/:id">
<ViewCharacter />
</Route>
<Route exact path="/demo-react-marvel-app/info">
<Info />
</Route>
<Redirect exact path="/demo-react-marvel-app" to="/demo-react-marvel-app/tab1" />
<Redirect exact path="/demo-react-marvel-app" to="/demo-react-marvel-app/home" />
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-react-marvel-app/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-react-marvel-app/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
}

32
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Home.css Normal file
View File

@@ -0,0 +1,32 @@
.character-container {
position: relative;
text-align: center;
color: white;
}
.character-name-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
position:absolute;
z-index: 99999;
background-color: rgba(0,0,0,0.7);
bottom: 0;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
.character-name-container ion-icon {
margin-top: 0.5rem;
}
.character-name-container ion-label {
font-size: 1rem;
font-weight: 500;
}

208
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Home.tsx Normal file
View File

@@ -0,0 +1,208 @@
import { useEffect, useState } from 'react';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonPage,
IonRow,
IonTitle,
IonToast,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import './Home.css';
import {
addOutline,
chevronBackOutline,
expandOutline,
gridOutline,
informationCircleOutline,
searchOutline,
} from 'ionicons/icons';
import CharacterItem from '../components/CharacterItem';
const Home = (): React.JSX.Element => {
const [grid, setGrid] = useState<boolean>(true);
const [characters, setCharacters] = useState([]);
const [amountLoaded, setAmountLoaded] = useState<number>(20);
const [showToast, setShowToast] = useState<{ show: boolean; message: string }>({
show: false,
message: '',
});
useEffect(() => {
const buttInstall = document.getElementById('buttInstall');
window.addEventListener('beforeinstallprompt', (event) => {
console.log('👍', 'beforeinstallprompt', event);
// Save the event so it can be triggered later.
window.deferredPrompt = event;
buttInstall.classList.toggle('hidden', false);
});
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
}, []);
useEffect(() => {
const getCharacters = async () => {
const response = await fetch(
'https://gateway.marvel.com/v1/public/characters?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75&limit=20&orderBy=-modified'
);
const data = await response.json();
const results = data.data.results;
setCharacters(results);
};
getCharacters();
}, []);
const fetchMore = async (e) => {
// Fetch more characters
// How?
// Lets limit it by 20, and offset it by the amount loaded already
// E.g. 20, 40, 60 just like pagination :)
// Get the response into json
const response = await fetch(
`https://gateway.marvel.com/v1/public/characters?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75&limit=20&offset=${amountLoaded}&orderBy=-modified`
);
const data = await response.json();
const results = data.data.results;
// Set the characters by adding the new results to the current
// Increment the amount loaded by 20 for the next iteration
// Complete the scroll action
setCharacters((prevResults) => [...prevResults, ...results]);
setAmountLoaded((prevAmount) => prevAmount + 20);
e.target.complete();
};
const addToHomeScreen = async () => {
const buttInstall = document.getElementById('buttInstall');
console.log('👍', 'buttInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
buttInstall.classList.toggle('hidden', true);
};
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage id="home-page">
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
<IonTitle>Marvel Characters</IonTitle>
<IonButtons slot="start">
<IonButton color="dark" routerLink="/info">
<IonIcon icon={informationCircleOutline} />
</IonButton>
</IonButtons>
<IonButtons slot="end">
<IonButton
color="dark"
onClick={() =>
setShowToast({
show: true,
message: 'We could easily add a search button here to search characters.',
})
}
>
<IonIcon icon={searchOutline} />
</IonButton>
<IonButton
id="buttInstall"
color="danger"
fill="solid"
size="small"
className="add-button hidden"
onClick={() => addToHomeScreen()}
>
<IonIcon icon={addOutline} />
&nbsp;&nbsp;Install App
</IonButton>
<IonButton color="danger" onClick={() => setGrid((grid) => !grid)}>
<IonIcon icon={grid ? expandOutline : gridOutline} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Marvel Characters</IonTitle>
</IonToolbar>
</IonHeader>
<IonRow>
{characters.length > 0 ? (
characters.map((character, index) => {
if (!character.thumbnail.path.includes('image_not_available')) {
return <CharacterItem key={`character_${index}`} grid={grid} details={character} />;
} else {
return null;
}
})
) : (
<CharacterItem load={true} />
)}
</IonRow>
<IonInfiniteScroll threshold="100px" onIonInfinite={fetchMore}>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Getting more super heroes..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
<IonToast
isOpen={showToast.show}
onDidDismiss={() => setShowToast({ show: false, message: '' })}
message={showToast.message}
duration={3500}
color="danger"
/>
</IonPage>
);
};
export default Home;

95
03_source/mobile/src/pages/DemoReactMarvelApp/pages/Info.tsx Normal file
View File

@@ -0,0 +1,95 @@
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonImg, IonItem, IonLabel, IonPage, IonRow, IonSkeletonText, IonTitle, IonToolbar } from '@ionic/react';
import { arrowRedoOutline, heartOutline } from 'ionicons/icons';
import styles from "./ViewCharacter.module.scss";
interface Profile {
name: string;
bio: string;
avatar: string;
codeLink: string;
links: Array<{
name: string;
url: string;
}>;
}
const Info = (): React.JSX.Element => {
const profile = {
name: "Alan Montgomery",
bio: "My name is Alan. I’m a Mobile Team Lead and Senior Developer and have built numerous production, real world mobile apps for local government authorities. I have a real passion and love for sharing my knowledge and expertise with developers wanting to learn and get better at using certain technologies.",
avatar: "/assets/alan.jpg",
codeLink: "https://github.com/alanmontgomery/ionic-react-marvel-app",
links: [
{
name: "Twitter",
url: "https://twitter.com/93alan"
}
],
}
return (
<IonPage id="view-message-page">
<IonHeader translucent>
<IonToolbar>
<IonButtons>
<IonBackButton text="Characters"></IonBackButton>
</IonButtons>
{ navigator.platform.match(/iPhone|iPod|iPad/) && <IonTitle>{ profile.name }</IonTitle> }
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
{ profile ?
(
<>
<IonItem lines="none">
<IonImg src={ profile.avatar } />
<div className={ styles.characterNameContainer }>
<IonLabel>{ profile.name }</IonLabel>
</div>
</IonItem>
<IonGrid>
<IonRow>
<IonCol size="12">
<p className="ion-text-justify">
{ profile.bio }
</p>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<a href={ profile.links[0].url } target="_blank" rel="noreferrer" className="non-link">
<IonButton color="secondary" expand="full">
Lets connect on Twitter
<IonIcon slot="end" icon={ arrowRedoOutline } />
</IonButton>
</a>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<a href={ profile.codeLink } target="_blank" rel="noreferrer" className="non-link">
<IonButton color="dark" expand="full">
Source code for this app
<IonIcon slot="end" icon={ arrowRedoOutline } />
</IonButton>
</a>
</IonCol>
</IonRow>
</IonGrid>
</>
)
:
<IonSkeletonText animated style={{ width: "100%", height: "100vh" }} />
}
</IonContent>
</IonPage>
);
}
export default Info;

59
03_source/mobile/src/pages/DemoReactMarvelApp/pages/ViewCharacter.module.scss Normal file
View File

@@ -0,0 +1,59 @@
.characterContainer {
position: relative;
text-align: center;
color: white;
}
ion-item {
--padding-start: 0;
--inner-padding-end: 0;
}
ion-label {
margin-top: 12px;
margin-bottom: 12px;
}
.characterNameContainer {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.7);
bottom: 0;
width: 100%;
}
.characterNameContainer ion-label {
font-size: 1rem !important;
font-weight: 500;
}
.characterStats {
text-align: center;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.characterStat {
background-color: var(--ion-color-primary);
padding: 1rem;
}
.characterStat ion-card-title {
font-size: 1rem;
--color: white;
}
.characterStat ion-card-subtitle {
font-size: 1rem;
--color: white;
}

298
03_source/mobile/src/pages/DemoReactMarvelApp/pages/ViewCharacter.tsx Normal file
View File

@@ -0,0 +1,298 @@
import { useState } from 'react';
import {
IonBackButton,
IonButton,
IonButtons,
IonCardSubtitle,
IonCardTitle,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonImg,
IonItem,
IonLabel,
IonPage,
IonRow,
IonSkeletonText,
IonTitle,
IonToast,
IonToolbar,
useIonViewWillEnter,
} from '@ionic/react';
import { arrowRedoOutline, heartOutline } from 'ionicons/icons';
import { useParams } from 'react-router';
import styles from './ViewCharacter.module.scss';
interface Comic {
id: string;
name: string;
image: string;
}
interface Character {
id: string;
name: string;
description: string;
thumbnail: {
path: string;
extension: string;
};
comics: {
available: number;
items: Array<{
name: string;
resourceURI: string;
}>;
};
stories: {
available: number;
};
series: {
available: number;
};
urls: Array<{
type: string;
url: string;
}>;
}
const ViewCharacter = (): React.JSX.Element => {
const [character, setCharacter] = useState<Character | undefined>();
const [characterComics, setCharacterComics] = useState<Comic[]>([]);
const [showToast, setShowToast] = useState<{ show: boolean; message: string }>({
show: false,
message: '',
});
const params = useParams();
const getComic = async (comicID: string): Promise<string | false> => {
var comicImageURL = false;
const response = await fetch(
`https://gateway.marvel.com/v1/public/comics/${comicID}?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75`
);
const data = await response.json();
if (data) {
if (data.data) {
if (data.data.results.length > 0) {
comicImageURL =
data.data.results[0].thumbnail.path +
'/portrait_incredible.' +
data.data.results[0].thumbnail.extension;
}
}
}
return comicImageURL;
};
const parseComics = async (result: Character): Promise<void> => {
const comics = result.comics.items;
await comics.forEach(async (comic) => {
const name = comic.name;
const link = comic.resourceURI;
const linkParts = link.split('/');
const id = linkParts[linkParts.length - 1];
const image = await getComic(id);
setCharacterComics((current) => [
...current,
{
id,
name,
image,
},
]);
});
};
useIonViewWillEnter(async () => {
const response = await fetch(
`https://gateway.marvel.com/v1/public/characters/${params.id}?ts=alan12345&apikey=e5103c9197bf5466f65433de29139bf9&hash=13b1d704e92de2a50ae29777722bdd75`
);
const data = await response.json();
if (data) {
if (data.data) {
if (data.data.results) {
const result = data.data.results[0];
setCharacter(result);
parseComics(result);
}
}
}
});
return (
<IonPage id="view-message-page">
<IonHeader translucent>
<IonToolbar>
<IonButtons>
<IonBackButton text="Characters"></IonBackButton>
</IonButtons>
{navigator.platform.match(/iPhone|iPod|iPad/) && (
<IonTitle>{character && character.name}</IonTitle>
)}
<IonButtons slot="end">
<IonButton
color="dark"
onClick={() =>
setShowToast({
show: true,
message:
"We could easily add a 'like' button here to add a character to favourites.",
})
}
>
<IonIcon icon={heartOutline} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
{character ? (
<>
{navigator.platform.match(/iPhone|iPod|iPad/) ? (
<IonHeader collapse="condense">
<IonToolbar>
<IonItem lines="none">
<IonImg src={`${character.thumbnail.path}.${character.thumbnail.extension}`} />
<div className={styles.characterNameContainer}>
<IonLabel>{character.name}</IonLabel>
</div>
</IonItem>
</IonToolbar>
</IonHeader>
) : (
<IonItem lines="none">
<IonImg src={`${character.thumbnail.path}.${character.thumbnail.extension}`} />
<div className={styles.characterNameContainer}>
<IonLabel>{character.name}</IonLabel>
</div>
</IonItem>
)}
<IonGrid>
{character.description && (
<IonRow>
<IonCol size="12">
<p className="ion-text-justify">{character.description}</p>
</IonCol>
</IonRow>
)}
<IonRow className={styles.characterStats}>
<IonCol size="4">
<div className={styles.characterStat}>
<IonCardSubtitle>{character.comics.available}</IonCardSubtitle>
<IonCardTitle>comics</IonCardTitle>
</div>
</IonCol>
<IonCol size="4">
<div className={styles.characterStat}>
<IonCardSubtitle>{character.stories.available}</IonCardSubtitle>
<IonCardTitle>stories</IonCardTitle>
</div>
</IonCol>
<IonCol size="4">
<div className={styles.characterStat}>
<IonCardSubtitle>{character.series.available}</IonCardSubtitle>
<IonCardTitle>series</IonCardTitle>
</div>
</IonCol>
</IonRow>
{character.urls && (
<>
{character.urls[1] && (
<IonRow>
<IonCol size="12">
<a
href={character.urls[1].url}
target="_blank"
rel="noreferrer"
className="non-link"
>
<IonButton color="danger" expand="full">
View full profile on Marvel
<IonIcon slot="end" icon={arrowRedoOutline} />
</IonButton>
</a>
</IonCol>
</IonRow>
)}
{character.urls[2] && (
<IonRow>
<IonCol size="12">
<a
href={character.urls[2].url}
target="_blank"
rel="noreferrer"
className="non-link"
>
<IonButton color="dark" expand="full">
View all comics on Marvel
<IonIcon slot="end" icon={arrowRedoOutline} />
</IonButton>
</a>
</IonCol>
</IonRow>
)}
</>
)}
{characterComics && (
<>
<IonRow className="ion-text-center ion-padding">
<IonCol size="12">
<IonCardSubtitle color="dark">Showing 20 comics...</IonCardSubtitle>
</IonCol>
</IonRow>
<IonRow>
{characterComics.map((comic, index) => {
if (comic.image && comic.name) {
return (
<IonCol key={`${character.name}_comic_${index}`} size="6">
<IonItem lines="none">
<IonImg src={comic.image} />
<div className={styles.characterNameContainer}>
<IonLabel>{comic.name}</IonLabel>
</div>
</IonItem>
</IonCol>
);
}
})}
</IonRow>
</>
)}
</IonGrid>
</>
) : (
<IonSkeletonText animated style={{ width: '100%', height: '100vh' }} />
)}
</IonContent>
<IonToast
isOpen={showToast.show}
onDidDismiss={() => setShowToast({ show: false, message: '' })}
message={showToast.message}
duration={3500}
color="danger"
/>
</IonPage>
);
};
export default ViewCharacter;

103
03_source/mobile/src/pages/DemoReactMarvelApp/style.scss
View File

@@ -1,103 +0,0 @@
#about-page {
ion-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
--background: transparent;
--color: white;
}
ion-toolbar ion-back-button,
ion-toolbar ion-button,
ion-toolbar ion-menu-button {
--color: white;
}
.about-header {
position: relative;
width: 100%;
height: 30%;
}
.about-header .about-image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.about-header .madison {
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
}
.about-header .austin {
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
}
.about-header .chicago {
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
}
.about-header .seattle {
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
}
.about-info {
position: relative;
margin-top: -10px;
border-radius: 10px;
background: var(--ion-background-color, #fff);
z-index: 2; // display rounded border above header image
}
.about-info h3 {
margin-top: 0;
}
.about-info ion-list {
padding-top: 0;
}
.about-info p {
line-height: 130%;
color: var(--ion-color-dark);
}
.about-info ion-icon {
margin-inline-end: 32px;
}
/*
* iOS Only
*/
.ios .about-info {
--ion-padding: 19px;
}
.ios .about-info h3 {
font-weight: 700;
}
}
#date-input-popover {
--offset-y: -var(--ion-safe-area-bottom);
--max-width: 90%;
--width: 336px;
}

245
03_source/mobile/src/pages/DemoReactMarvelApp/theme/variables.scss Normal file
View File

@@ -0,0 +1,245 @@
.demo-react-marvel-app {
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--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: #3dc2ff;
--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: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #2dd36f;
--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: #92949c;
--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: #ee0000;
--ion-color-primary-rgb: 66, 140, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3a7be0;
--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: #6a64ff;
--ion-color-tertiary-rgb: 106, 100, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;
--ion-color-success: #2fdf75;
--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: #ee0000;
--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: #989aa2;
--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;
}
/* } */
.non-link {
text-decoration: none;
}
.hidden {
display: none;
}
}