diff --git a/src/components/Challenge/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone.tsx
index cdb4ec3e6fef4f618214585842bbe490b03d3e98..9bcb3e36f99ffc04327b8fb64df99d6429681a64 100644
--- a/src/components/Challenge/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone.tsx
@@ -8,6 +8,8 @@ import { UserChallengeSuccess } from 'enum/userChallenge.enum'
import { DateTime } from 'luxon'
import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useHistory } from 'react-router-dom'
+import { Button } from '@material-ui/core'
interface ChallengeCardDoneProps {
userChallenge: UserChallenge
@@ -17,46 +19,17 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
userChallenge,
}: ChallengeCardDoneProps) => {
const { t } = useI18n()
+ const history = useHistory()
const [winIcon, setWinIcon] = useState<string>(defaultIcon)
const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
- // TODO Use pluarality of I18n
- const getNumberDayProgress = (_userChallenge: UserChallenge) => {
- if (
- _userChallenge.startDate !== null &&
- _userChallenge.endingDate !== null
- ) {
- const startDate: DateTime = _userChallenge.startDate
- const endDate: DateTime = _userChallenge.endingDate
-
- const delta = endDate.diff(startDate, 'days').toObject()
- if (delta && delta.days !== undefined) {
- delta.days = Math.round(delta.days + 1)
- const label =
- delta.days == 1
- ? t('challenge.card_done.day')
- : t('challenge.card_done.days')
- return ' ' + delta.days + ' ' + label
- }
- } else return ''
- }
-
const getUserSaving = (_userChallenge: UserChallenge) => {
let label
if (_userChallenge.success === UserChallengeSuccess.WIN)
label = t('challenge.card_done.saving')
else label = t('challenge.card_done.depense')
- return (
- label +
- ' ' +
- formatNumberValues(
- Math.abs(
- _userChallenge.duel.threshold - _userChallenge.duel.userConsumption
- )
- ) +
- '€'
- )
+ return label + ' '
}
const getResultLabel = (_userChallenge: UserChallenge) => {
@@ -64,6 +37,7 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
case UserChallengeSuccess.WIN:
return t('challenge.card_done.win')
case UserChallengeSuccess.LOST:
+ default:
return t('challenge.card_done.lost')
}
}
@@ -73,6 +47,10 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
else return lossIcon
}
+ const goDuel = async () => {
+ history.push('/challenges/duel?id=' + userChallenge.id)
+ }
+
useEffect(() => {
async function handleEcogestureIcon() {
const icon = await importIconbyId(userChallenge.id + '-1', 'duelResult')
@@ -93,7 +71,7 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
return (
<div className="cardContent cardDone">
- <div className="challengeName text-20-bold">
+ <div className="challengeName text-22-bold">
{userChallenge.duel.title}
</div>
<div className="iconResult">
@@ -103,32 +81,40 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
size={180}
/>
</div>
- <div
- className={classNames('labelResult', {
- ['win']: userChallenge.success === UserChallengeSuccess.WIN,
- ['lost']: userChallenge.success === UserChallengeSuccess.LOST,
- })}
- >
- {getResultLabel(userChallenge)}
- </div>
<div className="statsResult">
- <span className="text-18-bold">
- {userChallenge.progress.actionProgress +
- userChallenge.progress.explorationProgress +
- userChallenge.progress.quizProgress}
- {t('challenge.card_done.stars')}
+ <div
+ className={classNames('labelResult', {
+ ['win']: userChallenge.success === UserChallengeSuccess.WIN,
+ ['lost']: userChallenge.success === UserChallengeSuccess.LOST,
+ })}
+ >
+ {getResultLabel(userChallenge)}
+ </div>
+ <span className="text-18">
+ {getUserSaving(userChallenge)}
+ <span className="text-18-bold">
+ {formatNumberValues(
+ Math.abs(
+ userChallenge.duel.threshold -
+ userChallenge.duel.userConsumption
+ )
+ ) + ' '}
+ €
+ </span>
+ <br />
+ {t('challenge.card_done.final_defi')}
</span>
- <br />
- {t('challenge.card_done.get_in')}
- <span className="text-18-bold">
- {getNumberDayProgress(userChallenge)}
- </span>
- <br />
- <br />
- <span className="text-18-bold">{getUserSaving(userChallenge)}</span>
- <br />
- {t('challenge.card_done.final_defi')}
</div>
+ <Button
+ aria-label={t('challenge.card_done.final_defi_view')}
+ onClick={goDuel}
+ classes={{
+ root: 'btn-secondary-negative review-btn',
+ label: 'text-15-bold',
+ }}
+ >
+ {t('challenge.card_done.final_defi_view')}
+ </Button>
</div>
)
}
diff --git a/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap
index 5c4a5b38ef2eaaff7577a7bf58f82dc02be446d4..ff1a9be37f62505fd20e7b875e84fa34b3ff37b2 100644
--- a/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`ChallengeCardDone component should be rendered correctly 1`] = `
className="cardContent cardDone"
>
<div
- className="challengeName text-20-bold"
+ className="challengeName text-22-bold"
>
Title DUEL001
</div>
@@ -18,38 +18,41 @@ exports[`ChallengeCardDone component should be rendered correctly 1`] = `
size={180}
/>
</div>
- <div
- className="labelResult win"
- >
- challenge.card_done.win
- </div>
<div
className="statsResult"
>
- <span
- className="text-18-bold"
+ <div
+ className="labelResult win"
>
- 0
- challenge.card_done.stars
- </span>
- <br />
- challenge.card_done.get_in
+ challenge.card_done.win
+ </div>
<span
- className="text-18-bold"
+ className="text-18"
>
-
- </span>
- <br />
- <br />
- <span
- className="text-18-bold"
- >
- challenge.card_done.saving function () {
+ challenge.card_done.saving
+ <span
+ className="text-18-bold"
+ >
+ function () {
return fn.apply(this, arguments);
- }€
+ }
+ €
+ </span>
+ <br />
+ challenge.card_done.final_defi
</span>
- <br />
- challenge.card_done.final_defi
</div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="challenge.card_done.final_defi_view"
+ classes={
+ Object {
+ "label": "text-15-bold",
+ "root": "btn-secondary-negative review-btn",
+ }
+ }
+ onClick={[Function]}
+ >
+ challenge.card_done.final_defi_view
+ </WithStyles(ForwardRef(Button))>
</div>
`;
diff --git a/src/components/Challenge/challengeCardDone.scss b/src/components/Challenge/challengeCardDone.scss
index 9b2ce26a7af4317567010328a4eda29e66aa1fd4..f03683ea5b0f4e48af5fb1d90e269d2969e96de6 100644
--- a/src/components/Challenge/challengeCardDone.scss
+++ b/src/components/Challenge/challengeCardDone.scss
@@ -9,9 +9,14 @@
flex-direction: column;
justify-content: space-between;
align-items: center;
+ padding: 5% !important;
+ .challengeName {
+ margin: 0.5rem 0rem;
+ }
.iconResult {
display: flex;
+ margin: 1rem 0rem;
@media all and(max-height: 700px) {
width: 55%;
margin: auto;
@@ -23,11 +28,13 @@
}
.labelResult {
font-weight: bold;
- font-size: 24px;
+ font-size: 28px;
line-height: 120%;
+ text-transform: uppercase;
+ margin-bottom: 0.5rem;
}
.win {
- color: $gold;
+ color: $gold-shadow;
}
.lost {
color: $red-primary;
@@ -35,5 +42,9 @@
.statsResult {
text-align: center;
}
+ .review-btn {
+ padding: 0.625rem;
+ border: 1px solid $grey-bright;
+ }
}
}
diff --git a/src/components/Duel/DuelBar.tsx b/src/components/Duel/DuelBar.tsx
index 91aa601dfdfa3ffbe0dcb61ff6c01256969bcdd2..5ba505e98d059fbccc7f603a609e449a1ae6e943 100644
--- a/src/components/Duel/DuelBar.tsx
+++ b/src/components/Duel/DuelBar.tsx
@@ -16,6 +16,7 @@ import { FluidType } from 'enum/fluid.enum'
export interface BarChartProps {
userChallenge: UserChallenge
+ finishedDataLoad?: Dataload[]
average: number
timeStep: TimeStep
width?: number
@@ -40,6 +41,7 @@ type PropsWithDefaults = BarChartProps & DefaultProps
const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
const {
userChallenge,
+ finishedDataLoad,
timeStep,
average,
width,
@@ -53,7 +55,9 @@ const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
const { currentDataload } = useSelector(
(state: AppStore) => state.ecolyo.challenge
)
-
+ const dataload: Dataload[] = finishedDataLoad
+ ? finishedDataLoad
+ : currentDataload
const getContentWidth = () => {
return width - marginLeft - marginRight
}
@@ -63,15 +67,15 @@ const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
}
const getMaxLoad = () => {
- const maxLoad = currentDataload
- ? Math.max(...currentDataload.map((d: Dataload) => d.value))
+ const maxLoad = dataload
+ ? Math.max(...dataload.map((d: Dataload) => d.value))
: 0
return maxLoad
}
const xScale: ScaleBand<string> = scaleBand()
.domain(
- currentDataload.map((d: Dataload) =>
+ dataload.map((d: Dataload) =>
d.date.toLocaleString(DateTime.DATETIME_SHORT)
)
)
@@ -115,7 +119,7 @@ const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
marginTop={marginTop}
/>
<g transform={`translate(${marginLeft},${marginTop})`}>
- {currentDataload.map((d: Dataload, index: number) => {
+ {dataload.map((d: Dataload, index: number) => {
if (!isUpcoming(d)) {
return (
<Bar
@@ -158,7 +162,7 @@ const DuelBar: React.FC<BarChartProps> = (props: BarChartProps) => {
/>
</g>
<AxisBottom
- data={currentDataload}
+ data={dataload}
timeStep={timeStep}
xScale={xScale}
height={height}
diff --git a/src/components/Duel/DuelChart.tsx b/src/components/Duel/DuelChart.tsx
index 25b83d1724a21fbc8e0896dd8a88626e6d8ec20d..54538e998c97100782a69f08e9adec67e798a21c 100644
--- a/src/components/Duel/DuelChart.tsx
+++ b/src/components/Duel/DuelChart.tsx
@@ -1,17 +1,19 @@
import React, { useState, useEffect } from 'react'
import './duelChart.scss'
import { TimeStep } from 'enum/timeStep.enum'
-import { UserChallenge } from 'models'
+import { Dataload, UserChallenge } from 'models'
import DuelBar from 'components/Duel/DuelBar'
interface DuelChartProps {
userChallenge: UserChallenge
+ finishedDataLoad?: Dataload[]
width: number
height: number
}
const DuelChart: React.FC<DuelChartProps> = ({
userChallenge,
+ finishedDataLoad,
width,
height,
}: DuelChartProps) => {
@@ -25,6 +27,7 @@ const DuelChart: React.FC<DuelChartProps> = ({
<div className="fs-slide">
<DuelBar
userChallenge={userChallenge}
+ finishedDataLoad={finishedDataLoad}
average={average}
timeStep={TimeStep.DAY}
height={height}
diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index 892af50ca42b4f48e34498b7ac6d9cf502ff78f6..8b78f74c796c8c267cf57647b175928623911ba0 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'
import './duelOngoing.scss'
import { Client, useClient } from 'cozy-client'
@@ -12,8 +12,11 @@ import {
import { toggleChallengeDuelNotification } from 'store/global/global.actions'
import { formatNumberValues } from 'utils/utils'
-import { UserDuel, UserChallenge } from 'models'
-import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
+import { UserDuel, UserChallenge, Dataload } from 'models'
+import {
+ UserChallengeSuccess,
+ UserChallengeUpdateFlag,
+} from 'enum/userChallenge.enum'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import CaptionAverageIcon from 'assets/icons/visu/duel/captionAverage.svg'
import CaptionConsumptionIcon from 'assets/icons/visu/duel/captionConsumption.svg'
@@ -28,10 +31,12 @@ import { UserDuelState } from 'enum/userDuel.enum'
interface DuelOngoingProps {
userChallenge: UserChallenge
+ isFinished?: boolean
}
const DuelOngoing: React.FC<DuelOngoingProps> = ({
userChallenge,
+ isFinished,
}: DuelOngoingProps) => {
const client: Client = useClient()
const { t } = useI18n()
@@ -45,7 +50,9 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
const [isLastDuel, setIsLastDuel] = useState<boolean>(false)
const [width, setWidth] = useState<number>(0)
const [height, setHeight] = useState<number>(0)
+ const [finishedDataLoad, setfinishedDataLoad] = useState<Dataload[]>()
const chartContainer = useRef<HTMLDivElement>(null)
+ const challengeService = useMemo(() => new ChallengeService(client), [client])
const { userChallengeList } = useSelector(
(state: AppStore) => state.ecolyo.challenge
)
@@ -127,7 +134,6 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
}, [])
useEffect(() => {
- const challengeService = new ChallengeService(client)
let subscribed = true
async function setChallengeResult() {
const { isDone, isWin } = await challengeService.isChallengeDone(
@@ -143,25 +149,49 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
return () => {
subscribed = false
}
- }, [client, currentDataload, userChallenge])
+ }, [challengeService, client, currentDataload, userChallenge])
+
+ useEffect(() => {
+ let subscribed = true
+ async function populateData() {
+ if (isFinished) {
+ const dataloads: Dataload[] = await challengeService.getUserChallengeDataload(
+ userChallenge
+ )
+ if (subscribed) {
+ setfinishedDataLoad(dataloads)
+ }
+ }
+ }
+ populateData()
+ return () => {
+ subscribed = false
+ }
+ }, [challengeService, dispatch, isFinished, userChallenge])
return (
<>
<div className="duel-ongoing-container">
<div className="duel-title text-16-normal">{duel.title}</div>
- <div className="duel-goal text-18-normal">
- {t('duel.goal1', {
- durationInDays,
-
- smart_count: durationInDays,
- })}
- <span> </span>
- {t('duel.goal2', {
- title,
-
- smart_count: title,
- })}
- </div>
+ {duel.state === UserDuelState.DONE ? (
+ <div className="duel-goal text-26-bold">
+ {userChallenge.success === UserChallengeSuccess.WIN
+ ? t('duel.goal_done')
+ : t('duel.goal_failed')}
+ </div>
+ ) : (
+ <div className="duel-goal text-18-normal">
+ {t('duel.goal1', {
+ durationInDays,
+ smart_count: durationInDays,
+ })}
+ <span> </span>
+ {t('duel.goal2', {
+ title,
+ smart_count: title,
+ })}
+ </div>
+ )}
<div className="duel-consumption text-28-normal">
<span className="consumption">{userConsumption}</span>
{` / ${average} €`}
@@ -169,6 +199,7 @@ const DuelOngoing: React.FC<DuelOngoingProps> = ({
<div className="duel-chart fs-root" ref={chartContainer}>
<DuelChart
userChallenge={userChallenge}
+ finishedDataLoad={finishedDataLoad}
width={width}
height={height}
/>
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index f5c410ca8c775af1134fe581f26780b0ca06f216..731659e942fd7d4e6e632b881c6a43cd656f7534 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -38,7 +38,7 @@ const DuelView: React.FC = () => {
case UserDuelState.ONGOING:
return <DuelOngoing userChallenge={challenge} />
case UserDuelState.DONE:
- return <DuelOngoing userChallenge={challenge} />
+ return <DuelOngoing userChallenge={challenge} isFinished={true} />
case UserDuelState.NO_REF_PERIOD_VALID:
return (
<DuelEmptyValueModal
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 6fe28ce9eebdfde1c8cc4025d234a9fa0e519c60..3388e838944e6fcda861a5bbfdae63b34709061c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -226,15 +226,12 @@
}
},
"card_done": {
- "day": " jour",
- "days": " jours",
"saving": "Économie de",
"depense": "Dépense de",
"win": "Gagné",
"lost": "Perdu",
- "stars": " étoiles",
- "get_in": "obtenues en ",
- "final_defi": "sur le duel final"
+ "final_defi": "sur le duel final",
+ "final_defi_view": "Revoir le duel final"
},
"card_last": {
"title": " Tous les défis ont été terminés",
@@ -327,6 +324,8 @@
"button_start": "Allons-y !",
"goal1": "Faites moins que votre moyenne actuelle sur %{durationInDays} jours",
"goal2": "pour gagner le badge %{title}",
+ "goal_done": "Duel remporté",
+ "goal_failed": "Duel perdu",
"caption_average": "Votre moyenne à titre indicatif",
"caption_consumption": "Votre consommation",
"caption_incoming": "Données à venir",
diff --git a/src/styles/base/_typo-variables.scss b/src/styles/base/_typo-variables.scss
index 117c9b67f9142fd4877a0d02045501df03414def..99b3104bb00939b4a13c54c02b92418985ba8990 100644
--- a/src/styles/base/_typo-variables.scss
+++ b/src/styles/base/_typo-variables.scss
@@ -2,4 +2,4 @@ $text-font: Lato, sans-serif;
$text-size: '10' 0.625rem, '14' 0.875rem, '15' 0.938rem, '16' 1rem,
'18' 1.125rem, '19' 1.188rem, '20' 1.25rem, '21' 1.313rem, '22' 1.375rem,
- '24' 1.5rem, '28' 1.75rem, '36' 2.25rem;
+ '24' 1.5rem, '26' 1.625rem, '28' 1.75rem, '36' 2.25rem;
diff --git a/src/styles/index.css b/src/styles/index.css
index 9dd97042251e62cb00b61f797e698d0ec55efa75..12bc8275f8f7f3920e5f52331cefe9b3d1f9c663 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -14,7 +14,7 @@
/** App colors **/
/** TABS GRADIENT **/
/** SCROLLBAR **/
-@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
html {
background: #1b1c22;
}
@@ -41,17 +41,17 @@ body {
justify-content: center;
margin-left: 0;
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
.cozy-bar {
margin-left: 1.25rem;
}
}
-[role=banner] .coz-bar-container {
+[role='banner'] .coz-bar-container {
background-color: #ffffff;
}
-@media only screen and (max-width : 768px) {
- [role=banner] .coz-bar-container {
+@media only screen and (max-width: 768px) {
+ [role='banner'] .coz-bar-container {
padding: 0 0 0 0;
background-color: unset;
}
@@ -81,13 +81,17 @@ body {
top: 48px;
left: 0;
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
.header {
top: 0;
}
}
.header .header-top {
- background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
+ background: radial-gradient(
+ 74.83% 76.97% at 50% 13.64%,
+ #343641 0%,
+ #1b1c22 100%
+ );
width: 100%;
}
.header .header-top .header-text {
@@ -99,12 +103,12 @@ body {
display: flex;
flex-direction: column;
}
-@media only screen and (max-width : 1023px) {
+@media only screen and (max-width: 1023px) {
.header .header-content {
margin: 0;
}
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
.header .header-content {
margin: 60px 0 0 0;
}
@@ -129,7 +133,7 @@ body {
.header .header-content .header-content-top .header-back-button {
padding: 0 0.75rem;
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
.header .header-content .header-content-top .header-text {
padding: 0 1rem 1rem 1rem;
color: #e0e0e0;
@@ -161,18 +165,18 @@ body {
margin-top: 1rem;
}
-[role=main] {
+[role='main'] {
/* width */
/* Track */
/* Handle */
}
-[role=main]::-webkit-scrollbar {
+[role='main']::-webkit-scrollbar {
width: 10px;
}
-[role=main]::-webkit-scrollbar-track {
+[role='main']::-webkit-scrollbar-track {
background: #3e4045;
}
-[role=main]::-webkit-scrollbar-thumb {
+[role='main']::-webkit-scrollbar-thumb {
background: #6f7074;
}
@@ -240,12 +244,21 @@ p {
margin-right: 0.8rem;
}
-.text-10, .text-10-italic, .text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase, .text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {
+.text-10,
+.text-10-italic,
+.text-10-bold,
+.text-10-bold-capitalize,
+.text-10-bold-uppercase,
+.text-10-normal,
+.text-10-normal-150,
+.text-10-normal-uppercase {
font-style: normal;
font-size: 0.625rem;
line-height: 120%;
}
-.text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {
+.text-10-normal,
+.text-10-normal-150,
+.text-10-normal-uppercase {
font-weight: normal;
}
.text-10-normal-uppercase {
@@ -254,7 +267,9 @@ p {
.text-10-normal-150 {
line-height: 150%;
}
-.text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase {
+.text-10-bold,
+.text-10-bold-capitalize,
+.text-10-bold-uppercase {
font-weight: 700;
}
.text-10-bold-uppercase {
@@ -268,12 +283,21 @@ p {
font-weight: normal;
}
-.text-14, .text-14-italic, .text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase, .text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {
+.text-14,
+.text-14-italic,
+.text-14-bold,
+.text-14-bold-capitalize,
+.text-14-bold-uppercase,
+.text-14-normal,
+.text-14-normal-150,
+.text-14-normal-uppercase {
font-style: normal;
font-size: 0.875rem;
line-height: 120%;
}
-.text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {
+.text-14-normal,
+.text-14-normal-150,
+.text-14-normal-uppercase {
font-weight: normal;
}
.text-14-normal-uppercase {
@@ -282,7 +306,9 @@ p {
.text-14-normal-150 {
line-height: 150%;
}
-.text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase {
+.text-14-bold,
+.text-14-bold-capitalize,
+.text-14-bold-uppercase {
font-weight: 700;
}
.text-14-bold-uppercase {
@@ -296,12 +322,21 @@ p {
font-weight: normal;
}
-.text-15, .text-15-italic, .text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase, .text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {
+.text-15,
+.text-15-italic,
+.text-15-bold,
+.text-15-bold-capitalize,
+.text-15-bold-uppercase,
+.text-15-normal,
+.text-15-normal-150,
+.text-15-normal-uppercase {
font-style: normal;
font-size: 0.938rem;
line-height: 120%;
}
-.text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {
+.text-15-normal,
+.text-15-normal-150,
+.text-15-normal-uppercase {
font-weight: normal;
}
.text-15-normal-uppercase {
@@ -310,7 +345,9 @@ p {
.text-15-normal-150 {
line-height: 150%;
}
-.text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase {
+.text-15-bold,
+.text-15-bold-capitalize,
+.text-15-bold-uppercase {
font-weight: 700;
}
.text-15-bold-uppercase {
@@ -324,12 +361,21 @@ p {
font-weight: normal;
}
-.text-16, .text-16-italic, .text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase, .text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {
+.text-16,
+.text-16-italic,
+.text-16-bold,
+.text-16-bold-capitalize,
+.text-16-bold-uppercase,
+.text-16-normal,
+.text-16-normal-150,
+.text-16-normal-uppercase {
font-style: normal;
font-size: 1rem;
line-height: 120%;
}
-.text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {
+.text-16-normal,
+.text-16-normal-150,
+.text-16-normal-uppercase {
font-weight: normal;
}
.text-16-normal-uppercase {
@@ -338,7 +384,9 @@ p {
.text-16-normal-150 {
line-height: 150%;
}
-.text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase {
+.text-16-bold,
+.text-16-bold-capitalize,
+.text-16-bold-uppercase {
font-weight: 700;
}
.text-16-bold-uppercase {
@@ -352,12 +400,21 @@ p {
font-weight: normal;
}
-.text-18, .text-18-italic, .text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase, .text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {
+.text-18,
+.text-18-italic,
+.text-18-bold,
+.text-18-bold-capitalize,
+.text-18-bold-uppercase,
+.text-18-normal,
+.text-18-normal-150,
+.text-18-normal-uppercase {
font-style: normal;
font-size: 1.125rem;
line-height: 120%;
}
-.text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {
+.text-18-normal,
+.text-18-normal-150,
+.text-18-normal-uppercase {
font-weight: normal;
}
.text-18-normal-uppercase {
@@ -366,7 +423,9 @@ p {
.text-18-normal-150 {
line-height: 150%;
}
-.text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase {
+.text-18-bold,
+.text-18-bold-capitalize,
+.text-18-bold-uppercase {
font-weight: 700;
}
.text-18-bold-uppercase {
@@ -380,12 +439,21 @@ p {
font-weight: normal;
}
-.text-19, .text-19-italic, .text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase, .text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {
+.text-19,
+.text-19-italic,
+.text-19-bold,
+.text-19-bold-capitalize,
+.text-19-bold-uppercase,
+.text-19-normal,
+.text-19-normal-150,
+.text-19-normal-uppercase {
font-style: normal;
font-size: 1.188rem;
line-height: 120%;
}
-.text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {
+.text-19-normal,
+.text-19-normal-150,
+.text-19-normal-uppercase {
font-weight: normal;
}
.text-19-normal-uppercase {
@@ -394,7 +462,9 @@ p {
.text-19-normal-150 {
line-height: 150%;
}
-.text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase {
+.text-19-bold,
+.text-19-bold-capitalize,
+.text-19-bold-uppercase {
font-weight: 700;
}
.text-19-bold-uppercase {
@@ -408,12 +478,21 @@ p {
font-weight: normal;
}
-.text-20, .text-20-italic, .text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase, .text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {
+.text-20,
+.text-20-italic,
+.text-20-bold,
+.text-20-bold-capitalize,
+.text-20-bold-uppercase,
+.text-20-normal,
+.text-20-normal-150,
+.text-20-normal-uppercase {
font-style: normal;
font-size: 1.25rem;
line-height: 120%;
}
-.text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {
+.text-20-normal,
+.text-20-normal-150,
+.text-20-normal-uppercase {
font-weight: normal;
}
.text-20-normal-uppercase {
@@ -422,7 +501,9 @@ p {
.text-20-normal-150 {
line-height: 150%;
}
-.text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase {
+.text-20-bold,
+.text-20-bold-capitalize,
+.text-20-bold-uppercase {
font-weight: 700;
}
.text-20-bold-uppercase {
@@ -436,12 +517,21 @@ p {
font-weight: normal;
}
-.text-21, .text-21-italic, .text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase, .text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {
+.text-21,
+.text-21-italic,
+.text-21-bold,
+.text-21-bold-capitalize,
+.text-21-bold-uppercase,
+.text-21-normal,
+.text-21-normal-150,
+.text-21-normal-uppercase {
font-style: normal;
font-size: 1.313rem;
line-height: 120%;
}
-.text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {
+.text-21-normal,
+.text-21-normal-150,
+.text-21-normal-uppercase {
font-weight: normal;
}
.text-21-normal-uppercase {
@@ -450,7 +540,9 @@ p {
.text-21-normal-150 {
line-height: 150%;
}
-.text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase {
+.text-21-bold,
+.text-21-bold-capitalize,
+.text-21-bold-uppercase {
font-weight: 700;
}
.text-21-bold-uppercase {
@@ -464,12 +556,21 @@ p {
font-weight: normal;
}
-.text-22, .text-22-italic, .text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase, .text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {
+.text-22,
+.text-22-italic,
+.text-22-bold,
+.text-22-bold-capitalize,
+.text-22-bold-uppercase,
+.text-22-normal,
+.text-22-normal-150,
+.text-22-normal-uppercase {
font-style: normal;
font-size: 1.375rem;
line-height: 120%;
}
-.text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {
+.text-22-normal,
+.text-22-normal-150,
+.text-22-normal-uppercase {
font-weight: normal;
}
.text-22-normal-uppercase {
@@ -478,7 +579,9 @@ p {
.text-22-normal-150 {
line-height: 150%;
}
-.text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase {
+.text-22-bold,
+.text-22-bold-capitalize,
+.text-22-bold-uppercase {
font-weight: 700;
}
.text-22-bold-uppercase {
@@ -492,40 +595,115 @@ p {
font-weight: normal;
}
-.text-24, .text-24-italic, .text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase, .text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {
+.text-24,
+.text-24-italic,
+.text-24-bold,
+.text-24-bold-capitalize,
+.text-24-bold-uppercase,
+.text-24-normal,
+.text-24-normal-150,
+.text-24-normal-uppercase {
font-style: normal;
font-size: 1.5rem;
line-height: 120%;
}
-.text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {
+/* line 52, src/styles/base/_typography.scss */
+.text-24-normal,
+.text-24-normal-uppercase,
+.text-24-normal-150 {
font-weight: normal;
}
+/* line 55, src/styles/base/_typography.scss */
.text-24-normal-uppercase {
text-transform: uppercase;
}
+/* line 59, src/styles/base/_typography.scss */
.text-24-normal-150 {
line-height: 150%;
}
-.text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase {
+/* line 64, src/styles/base/_typography.scss */
+.text-24-bold,
+.text-24-bold-uppercase,
+.text-24-bold-capitalize {
font-weight: 700;
}
+/* line 67, src/styles/base/_typography.scss */
.text-24-bold-uppercase {
text-transform: uppercase;
}
+/* line 71, src/styles/base/_typography.scss */
.text-24-bold-capitalize {
text-transform: capitalize;
}
+/* line 76, src/styles/base/_typography.scss */
.text-24-italic {
font-style: italic;
font-weight: normal;
}
-.text-28, .text-28-italic, .text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase, .text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {
+/* line 48, src/styles/base/_typography.scss */
+.text-26,
+.text-26-normal,
+.text-26-normal-uppercase,
+.text-26-normal-150,
+.text-26-bold,
+.text-26-bold-uppercase,
+.text-26-bold-capitalize,
+.text-26-italic {
+ font-style: normal;
+ font-size: 1.625rem;
+ line-height: 120%;
+}
+/* line 52, src/styles/base/_typography.scss */
+.text-26-normal,
+.text-26-normal-uppercase,
+.text-26-normal-150 {
+ font-weight: normal;
+}
+/* line 55, src/styles/base/_typography.scss */
+.text-26-normal-uppercase {
+ text-transform: uppercase;
+}
+/* line 59, src/styles/base/_typography.scss */
+.text-26-normal-150 {
+ line-height: 150%;
+}
+/* line 64, src/styles/base/_typography.scss */
+.text-26-bold,
+.text-26-bold-uppercase,
+.text-26-bold-capitalize {
+ font-weight: 700;
+}
+/* line 67, src/styles/base/_typography.scss */
+.text-26-bold-uppercase {
+ text-transform: uppercase;
+}
+/* line 71, src/styles/base/_typography.scss */
+.text-26-bold-capitalize {
+ text-transform: capitalize;
+}
+/* line 76, src/styles/base/_typography.scss */
+.text-26-italic {
+ font-style: italic;
+ font-weight: normal;
+}
+
+/* line 48, src/styles/base/_typography.scss */
+.text-28,
+.text-28-normal,
+.text-28-normal-uppercase,
+.text-28-normal-150,
+.text-28-bold,
+.text-28-bold-uppercase,
+.text-28-bold-capitalize,
+.text-28-italic {
font-style: normal;
font-size: 1.75rem;
line-height: 120%;
}
-.text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {
+.text-28-normal,
+.text-28-normal-150,
+.text-28-normal-uppercase {
font-weight: normal;
}
.text-28-normal-uppercase {
@@ -534,7 +712,9 @@ p {
.text-28-normal-150 {
line-height: 150%;
}
-.text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase {
+.text-28-bold,
+.text-28-bold-capitalize,
+.text-28-bold-uppercase {
font-weight: 700;
}
.text-28-bold-uppercase {
@@ -548,12 +728,21 @@ p {
font-weight: normal;
}
-.text-36, .text-36-italic, .text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase, .text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {
+.text-36,
+.text-36-italic,
+.text-36-bold,
+.text-36-bold-capitalize,
+.text-36-bold-uppercase,
+.text-36-normal,
+.text-36-normal-150,
+.text-36-normal-uppercase {
font-style: normal;
font-size: 2.25rem;
line-height: 120%;
}
-.text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {
+.text-36-normal,
+.text-36-normal-150,
+.text-36-normal-uppercase {
font-weight: normal;
}
.text-36-normal-uppercase {
@@ -562,7 +751,9 @@ p {
.text-36-normal-150 {
line-height: 150%;
}
-.text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase {
+.text-36-bold,
+.text-36-bold-capitalize,
+.text-36-bold-uppercase {
font-weight: 700;
}
.text-36-bold-uppercase {
@@ -630,7 +821,7 @@ p {
font-size: 1rem;
line-height: 120%;
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
.chart-ticks-x-text {
font-size: 0.685rem;
}
@@ -643,7 +834,7 @@ p {
font-size: 0.9rem;
line-height: 120%;
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
.chart-ticks-y-text {
font-size: 0.75rem;
}
@@ -977,7 +1168,12 @@ p {
/** TABS GRADIENT **/
/** SCROLLBAR **/
button.btn-highlight {
- background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
+ background: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(226, 137, 4, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #f1c017;
background-color: #e3b82a;
border: none;
border-radius: 2px;
@@ -989,7 +1185,10 @@ button.btn-highlight {
button.btn-highlight span:first-child {
color: #000000;
}
-button.btn-highlight:hover, button.btn-highlight:focus, button.btn-highlight.active, button.btn-highlight:disabled {
+button.btn-highlight:hover,
+button.btn-highlight:focus,
+button.btn-highlight.active,
+button.btn-highlight:disabled {
background-color: #b89318;
}
button.btn-highlight:disabled {
@@ -1008,10 +1207,16 @@ button.btn-primary-positive {
button.btn-primary-positive span:first-child {
color: #e3b82a;
}
-button.btn-primary-positive:hover, button.btn-primary-positive:focus, button.btn-primary-positive.active, button.btn-primary-positive:disabled {
+button.btn-primary-positive:hover,
+button.btn-primary-positive:focus,
+button.btn-primary-positive.active,
+button.btn-primary-positive:disabled {
background-color: rgba(18, 18, 18, 0.2);
}
-button.btn-primary-positive:hover span:first-child, button.btn-primary-positive:focus span:first-child, button.btn-primary-positive.active span:first-child, button.btn-primary-positive:disabled span:first-child {
+button.btn-primary-positive:hover span:first-child,
+button.btn-primary-positive:focus span:first-child,
+button.btn-primary-positive.active span:first-child,
+button.btn-primary-positive:disabled span:first-child {
color: rgba(227, 184, 42, 0.7);
}
button.btn-primary-positive:disabled {
@@ -1030,10 +1235,16 @@ button.btn-primary-negative {
button.btn-primary-negative span:first-child {
color: #e3b82a;
}
-button.btn-primary-negative:hover, button.btn-primary-negative:focus, button.btn-primary-negative.active, button.btn-primary-negative:disabled {
+button.btn-primary-negative:hover,
+button.btn-primary-negative:focus,
+button.btn-primary-negative.active,
+button.btn-primary-negative:disabled {
background-color: rgba(123, 123, 123, 0.2);
}
-button.btn-primary-negative:hover span:first-child, button.btn-primary-negative:focus span:first-child, button.btn-primary-negative.active span:first-child, button.btn-primary-negative:disabled span:first-child {
+button.btn-primary-negative:hover span:first-child,
+button.btn-primary-negative:focus span:first-child,
+button.btn-primary-negative.active span:first-child,
+button.btn-primary-negative:disabled span:first-child {
color: rgba(227, 184, 42, 0.7);
}
button.btn-primary-negative:disabled {
@@ -1052,10 +1263,16 @@ button.btn-secondary-positive {
button.btn-secondary-positive span:first-child {
color: #e0e0e0;
}
-button.btn-secondary-positive:hover, button.btn-secondary-positive:focus, button.btn-secondary-positive.active, button.btn-secondary-positive:disabled {
+button.btn-secondary-positive:hover,
+button.btn-secondary-positive:focus,
+button.btn-secondary-positive.active,
+button.btn-secondary-positive:disabled {
background-color: rgba(18, 18, 18, 0.2);
}
-button.btn-secondary-positive:hover span:first-child, button.btn-secondary-positive:focus span:first-child, button.btn-secondary-positive.active span:first-child, button.btn-secondary-positive:disabled span:first-child {
+button.btn-secondary-positive:hover span:first-child,
+button.btn-secondary-positive:focus span:first-child,
+button.btn-secondary-positive.active span:first-child,
+button.btn-secondary-positive:disabled span:first-child {
color: rgba(224, 224, 224, 0.7);
}
button.btn-secondary-positive:disabled {
@@ -1074,10 +1291,16 @@ button.btn-secondary-negative {
button.btn-secondary-negative span:first-child {
color: #e0e0e0;
}
-button.btn-secondary-negative:hover, button.btn-secondary-negative:focus, button.btn-secondary-negative.active, button.btn-secondary-negative:disabled {
+button.btn-secondary-negative:hover,
+button.btn-secondary-negative:focus,
+button.btn-secondary-negative.active,
+button.btn-secondary-negative:disabled {
background-color: rgba(123, 123, 123, 0.2);
}
-button.btn-secondary-negative:hover span:first-child, button.btn-secondary-negative:focus span:first-child, button.btn-secondary-negative.active span:first-child, button.btn-secondary-negative:disabled span:first-child {
+button.btn-secondary-negative:hover span:first-child,
+button.btn-secondary-negative:focus span:first-child,
+button.btn-secondary-negative.active span:first-child,
+button.btn-secondary-negative:disabled span:first-child {
color: rgba(224, 224, 224, 0.7);
}
button.btn-secondary-negative:disabled {
@@ -1096,7 +1319,10 @@ button.btn-duel-off {
button.btn-duel-off span:first-child {
color: #ffffff;
}
-button.btn-duel-off:hover, button.btn-duel-off:focus, button.btn-duel-off.active, button.btn-duel-off:disabled {
+button.btn-duel-off:hover,
+button.btn-duel-off:focus,
+button.btn-duel-off.active,
+button.btn-duel-off:disabled {
background-color: black;
}
button.btn-duel-off:disabled {
@@ -1115,14 +1341,21 @@ button.btn-duel-active {
button.btn-duel-active span:first-child {
color: #121212;
}
-button.btn-duel-active:hover, button.btn-duel-active:focus, button.btn-duel-active.active, button.btn-duel-active:disabled {
+button.btn-duel-active:hover,
+button.btn-duel-active:focus,
+button.btn-duel-active.active,
+button.btn-duel-active:disabled {
background-color: #00bebe;
}
button.btn-duel-active:disabled {
cursor: not-allowed;
}
button.btn-duel-on {
- background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);
+ background: radial-gradient(
+ 60.65% 30.62% at 50% 3.13%,
+ #2a2b30 0%,
+ #1b1c22 100%
+ );
background-color: #121212;
border: 1px solid #58ffff;
border-radius: 2px;
@@ -1134,14 +1367,22 @@ button.btn-duel-on {
button.btn-duel-on span:first-child {
color: #ffffff;
}
-button.btn-duel-on:hover, button.btn-duel-on:focus, button.btn-duel-on.active, button.btn-duel-on:disabled {
+button.btn-duel-on:hover,
+button.btn-duel-on:focus,
+button.btn-duel-on.active,
+button.btn-duel-on:disabled {
background-color: black;
}
button.btn-duel-on:disabled {
cursor: not-allowed;
}
button.btn-profile-next {
- background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
+ background: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(226, 137, 4, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #f1c017;
background-color: #e3b82a;
border: none;
border-radius: 2px;
@@ -1153,7 +1394,10 @@ button.btn-profile-next {
button.btn-profile-next span:first-child {
color: #000000;
}
-button.btn-profile-next:hover, button.btn-profile-next:focus, button.btn-profile-next.active, button.btn-profile-next:disabled {
+button.btn-profile-next:hover,
+button.btn-profile-next:focus,
+button.btn-profile-next.active,
+button.btn-profile-next:disabled {
background-color: #b89318;
}
button.btn-profile-next:disabled {
@@ -1196,7 +1440,11 @@ button.btn-profile-back:disabled {
padding: 16px;
}
.card:hover {
- background: linear-gradient(180deg, rgba(70, 71, 77, 0.7) 0%, rgba(57, 58, 63, 0.7) 100%);
+ background: linear-gradient(
+ 180deg,
+ rgba(70, 71, 77, 0.7) 0%,
+ rgba(57, 58, 63, 0.7) 100%
+ );
}
.card.rich-card {
padding: 24px 16px;
@@ -1230,13 +1478,13 @@ div.modal-paper {
align-items: center;
color: #ffffff;
}
-@media only screen and (max-width : 1023px) {
+@media only screen and (max-width: 1023px) {
div.modal-paper {
width: 35rem;
margin: 0;
}
}
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 768px) {
div.modal-paper {
padding: 1rem;
width: 85%;
@@ -1382,9 +1630,23 @@ a.MuiTypography-colorPrimary {
:root {
--blue: #58ffff;
--blue40: rgba(88, 255, 255, 0.2509803922);
- --blueBackground: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;
- --blueRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58ffff;
- --blueRadialGradientTrans: radial-gradient(circle, #58ffff 0%, rgba(255, 255, 255, 0) 100%);
+ --blueBackground: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(1, 153, 163, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #58ffff;
+ --blueRadialGradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(1, 153, 163, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #58ffff;
+ --blueRadialGradientTrans: radial-gradient(
+ circle,
+ #58ffff 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
--elecColor: #d87b39;
--elecColor40: rgba(216, 123, 57, 0.4);
--elecCompareColor: #e2bca1;
@@ -1404,15 +1666,55 @@ a.MuiTypography-colorPrimary {
--darkLight: #25262b;
--darkLight2: #121212;
--textFont: Lato, sans-serif;
- --greyLinearGradientBackground: linear-gradient(180deg, rgb(50, 51, 57) 0%, rgb(37, 38, 43) 100%);
- --multiColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);
- --elecColorRadialGradientTrans: radial-gradient(circle, #d87b39 0%, rgba(255, 255, 255, 0) 100%);
- --waterColorRadialGradientTrans: radial-gradient(circle, #3a98ec 0%, rgba(255, 255, 255, 0) 100%);
- --gasColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);
- --multiColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
- --elecColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(158, 67, 2, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #d87b39;
- --gasColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(4, 106, 88, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #45d1b8;
- --waterColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(2, 93, 174, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #3a98ec;
+ --greyLinearGradientBackground: linear-gradient(
+ 180deg,
+ rgb(50, 51, 57) 0%,
+ rgb(37, 38, 43) 100%
+ );
+ --multiColorRadialGradientTrans: radial-gradient(
+ circle,
+ #e3b82a 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ --elecColorRadialGradientTrans: radial-gradient(
+ circle,
+ #d87b39 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ --waterColorRadialGradientTrans: radial-gradient(
+ circle,
+ #3a98ec 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ --gasColorRadialGradientTrans: radial-gradient(
+ circle,
+ #e3b82a 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ --multiColorRadialGradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(226, 137, 4, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #f1c017;
+ --elecColorRadialGradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(158, 67, 2, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #d87b39;
+ --gasColorRadialGradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(4, 106, 88, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #45d1b8;
+ --waterColorRadialGradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(2, 93, 174, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #3a98ec;
}
.application {