cerc-io/mars-interface
16
0
Fork 0
mirror of https://github.com/cerc-io/mars-interface.git synced 2024-11-17 11:19:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #19 from mars-protocol/v1.4.0-fix

Browse Source 
Urgent fix.
This commit is contained in:
dextermars 2023-03-14 09:14:38 +00:00 committed by GitHub
commit c5c334c23f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 1321 additions and 1201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "mars", "name": "mars",
"homepage": "./", "homepage": "./",
"version": "1.3.2", "version": "1.4.0",
"private": false, "private": false,
"license": "SEE LICENSE IN LICENSE FILE", "license": "SEE LICENSE IN LICENSE FILE",
"scripts": { "scripts": {

300
src/styles/_master.scss
View File

@ -1,35 +1,35 @@
@use 'sass:math'; @use 'sass:math';
$rem-base: 16px; $rem-base: 15px;
/* Colors */ /* Colors */
$colorWhite: #f5f5f5; $colorWhite: #ffffff;
$colorGrey: #bdbdbd; $colorGrey: #3a3c49;
$colorGreyLight: #e0e0e0; $colorGreyLight: #bfbfbf;
$colorGreyHighlight: #efefef; $colorGreyHighlight: #4c4c4c;
$colorGreyMedium: #9e9e9e; $colorGreyMedium: #5f697a;
$colorGreyDark: #616161; $colorGreyDark: #1a1c25;
/* CI Colors */ /* CI Colors */
$colorPrimary: #0000ff; $colorPrimary: #14a693;
$colorPrimaryHighlight: #6962cc; $colorPrimaryHighlight: #15bfa9;
$colorPrimaryAlpha: rgba(0, 0, 255, 0.05); $colorPrimaryAlpha: rgba(20, 166, 147, 0.15);
$colorSecondary: #212121; $colorSecondary: #524bb1;
$colorSecondaryHighlight: #424242; $colorSecondaryHighlight: #6962cc;
$colorSecondaryDark: #111111; $colorSecondaryDark: #440b37;
$colorSecondaryAlpha: rgba(17, 17, 17, 0.15); $colorSecondaryAlpha: rgba(68, 11, 55, 0.7);
$colorAccent: $colorGreyMedium; $colorAccent: #2c1b2f;
$colorAccentHighlight: $colorGreyMedium; $colorAccentHighlight: #421f32;
$colorAccentDark: $colorGreyDark; $colorAccentDark: #341a2a;
$colorAccentInverted: $colorGreyLight; $colorAccentInverted: #345dff;
/* Info Colors */ /* Info Colors */
$colorInfoProfit: #c4e7e9; $colorInfoProfit: #41a4a9;
$colorInfoLoss: #c8aaaa; $colorInfoLoss: #f96363;
$colorInfoWarning: #ffb5b5; $colorInfoWarning: #c83333;
$colorInfoVoteAgainst: #6c5a46; $colorInfoVoteAgainst: #eb9e49;
/* Token Colors */ /* Token Colors */
$colorTokenMARS: #dd5b65; $colorTokenMARS: #a03b45;
$colorTokenOSMO: #9f1ab9; $colorTokenOSMO: #9f1ab9;
$colorTokenATOM: #6f7390; $colorTokenATOM: #6f7390;
$colorTokenAxlUSDC: #478edc; $colorTokenAxlUSDC: #478edc;
@ -62,29 +62,32 @@ $alphaBlack80: rgba(0, 0, 0, 0.8);
$alphaBlack90: rgba(0, 0, 0, 0.9); $alphaBlack90: rgba(0, 0, 0, 0.9);
/* Background Colors */ /* Background Colors */
$backgroundBody: $colorGrey; $backgroundBody: #562a3b;
$backgroundBodyDark: $backgroundBody; $backgroundBodyDark: #141621;
$backgroundInTile: transparent; $backgroundInTile: $alphaBlack30;
$backgroundFooter: transparent; $backgroundFooter: $alphaBlack20;
/* Slider Colors */ /* Slider Colors */
$sliderThumb: $colorGreyDark; $sliderThumb: $colorWhite;
$sliderMark: $colorGreyDark; $sliderMark: $colorGreyLight;
/* Tooltip Colors */ /* Tooltip Colors */
$tooltipIconColor: $alphaBlack60; $tooltipIconColor: $alphaWhite20;
$tableSort: $alphaWhite20;
$tableSortActive: $colorWhite;
$tableHeader: $alphaWhite50;
/* Table Colors */ /* Table Colors */
$tableBorder: $alphaBlack30; $tableBorder: $alphaWhite10;
$tableBorderEnd: $alphaBlack80; $tableBorderEnd: $alphaWhite80;
$tableSort: $alphaBlack20; $tableSort: $alphaWhite20;
$tableSortActive: $alphaBlack90; $tableSortActive: $colorWhite;
$tableHeader: $alphaBlack40; $tableHeader: $alphaWhite40;
$tableLabel: $colorSecondaryDark; $tableLabel: $alphaWhite60;
/* Graph Colors */ /* Graph Colors */
$graphLiquidationsLine: $alphaBlack70; $graphLiquidationsLine: $alphaWhite70;
$graphAxis: $alphaBlack40; $graphAxis: $alphaWhite40;
/* Shadows */ /* Shadows */
$shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25); $shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
@ -95,40 +98,43 @@ $shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
/* Devider */ /* Devider */
@mixin devider10 { @mixin devider10 {
border-bottom: 1px solid $alphaBlack10; border-bottom: 1px solid $alphaWhite10;
} }
@mixin devider20 { @mixin devider20 {
border-bottom: 1px solid $alphaBlack20; border-bottom: 1px solid $alphaWhite20;
} }
@mixin devider40 { @mixin devider40 {
border-bottom: 1px solid $alphaBlack40; border-bottom: 1px solid $alphaWhite40;
} }
@mixin devider60 { @mixin devider60 {
border-bottom: 1px solid $alphaBlack60; border-bottom: 1px solid $alphaWhite60;
} }
/* Backgrounds */ /* Backgrounds */
@mixin bgBody { @mixin bgBody {
background-color: $backgroundBody; background-color: $backgroundBody;
} background-size: 100% auto;
background-image: url('../images/bg.svg');
@mixin bgTableHover { background-position: center top;
background-color: transparent;
} }
@mixin bgBodyDark { @mixin bgBodyDark {
background-color: $backgroundBodyDark; background-color: $backgroundBodyDark;
} }
@mixin bgTableHover {
background-color: rgba($colorPrimary, 0.2);
}
@mixin bgProposalActive { @mixin bgProposalActive {
background: linear-gradient(90deg, #10aa93 2.6%, #248aa9 97.92%); background: linear-gradient(90deg, #10aa93 2.6%, #248aa9 97.92%);
} }
@mixin bgProposalHover { @mixin bgProposalHover {
background-color: $colorGreyMedium; background-color: #05252f;
} }
@mixin bgTile($deg: 99.79) { @mixin bgTile($deg: 99.79) {
@ -140,7 +146,7 @@ $shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
} }
@mixin bgInTile { @mixin bgInTile {
background: $backgroundInTile; background: $alphaBlack30;
} }
@mixin bgOverlay { @mixin bgOverlay {
@ -157,11 +163,11 @@ $shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
} }
@mixin bgTileDevider { @mixin bgTileDevider {
background-color: $alphaBlack60; background-color: $alphaWhite60;
} }
@mixin bgDevider { @mixin bgDevider {
background-color: $alphaBlack20; background-color: $alphaWhite20;
} }
@mixin bgInput { @mixin bgInput {
@ -170,60 +176,68 @@ $shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
@mixin bgPrimary { @mixin bgPrimary {
background-color: $colorPrimary; background-color: $colorPrimary;
color: $colorWhite;
} }
@mixin bgSecondary { @mixin bgSecondary {
background-color: $colorSecondary; background-color: $colorSecondary;
color: $colorWhite;
} }
@mixin bgTertiary { @mixin bgTertiary {
background-color: $alphaBlack60; background-color: rgba(82, 75, 177, 0.5);
color: $colorWhite;
} }
@mixin bgLimit { @mixin bgLimit {
background: $colorPrimary; background: linear-gradient(
to right,
#15bfa9 20.9%,
#5e4bb1 49.68%,
#382685 82.55%,
#c83333 100%
);
} }
@mixin bgLimitOpacity { @mixin bgLimitOpacity {
background: $colorPrimary; background: linear-gradient(
to right,
#15bfa830 20.9%,
#5e4bb130 49.68%,
#38268530 82.55%,
#c8333330 100%
);
} }
@mixin bgHatched { @mixin bgHatched {
background-image: linear-gradient( background-image: linear-gradient(
135deg, 135deg,
#1a1c25 33.33%, transparent 33.33%,
rgba(255, 255, 255, 0.2) 33.33%, #826d6b 33.33%,
rgba(255, 255, 255, 0.2) 50%, #826d6b 50%,
#1a1c25 50%, transparent 50%,
#1a1c25 83.33%, transparent 83.33%,
rgba(255, 255, 255, 0.2) 83.33%, #826d6b 83.33%,
rgba(255, 255, 255, 0.2) 100% #826d6b 100%
); );
background-size: 5px 5px; background-size: 5px 5px;
} }
/* GLOWS */
/* GLOWS */ /* GLOWS */
@mixin glowXS { @mixin glowXS {
display: none; filter: blur(1px);
} }
@mixin glowS { @mixin glowS {
display: none; filter: blur(3px);
} }
@mixin glowM { @mixin glowM {
display: none; filter: blur(4px);
} }
@mixin glowL { @mixin glowL {
display: none; filter: blur(5px);
} }
@mixin glowXL { @mixin glowXL {
display: none; filter: blur(8px);
} }
@mixin glowXXL { @mixin glowXXL {
display: none; filter: blur(24px);
} }
/* Typography */ /* Typography */
@ -231,11 +245,11 @@ $fontWeightLight: 300;
$fontWeightRegular: 400; $fontWeightRegular: 400;
$fontWeightSemibold: 600; $fontWeightSemibold: 600;
$fontColorDarkPrimary: $colorWhite; $fontColorDarkPrimary: $colorSecondaryDark;
$fontColorDarkSecondary: $colorSecondaryDark; $fontColorDarkSecondary: rgba(68, 8, 55, 0.7);
$fontColorLightPrimary: $colorSecondaryDark; $fontColorLightPrimary: $colorWhite;
$fontColorLightSecondary: $alphaBlack30; $fontColorLightSecondary: $alphaWhite60;
$fontColorLightTertiary: $colorSecondaryDark; $fontColorLightTertiary: rgba(255, 255, 255, 0.4);
$fontColorLtv: $colorWhite; $fontColorLtv: $colorWhite;
@mixin typoH1 { @mixin typoH1 {
@ -251,6 +265,8 @@ $fontColorLtv: $colorWhite;
@mixin typoH2caps { @mixin typoH2caps {
@include typoH2; @include typoH2;
text-transform: uppercase;
letter-spacing: rem-calc(9);
} }
@mixin typoH3 { @mixin typoH3 {
@ -260,6 +276,8 @@ $fontColorLtv: $colorWhite;
@mixin typoH3caps { @mixin typoH3caps {
font-size: rem-calc(30.42); font-size: rem-calc(30.42);
line-height: space(10);
text-transform: uppercase;
} }
@mixin typoH4 { @mixin typoH4 {
@ -270,6 +288,8 @@ $fontColorLtv: $colorWhite;
@mixin typoH4caps { @mixin typoH4caps {
@include typoH4; @include typoH4;
text-transform: uppercase;
letter-spacing: rem-calc(3);
} }
@mixin typoXXL { @mixin typoXXL {
@ -279,7 +299,9 @@ $fontColorLtv: $colorWhite;
@mixin typoXXLcaps { @mixin typoXXLcaps {
@include typoXXL; @include typoXXL;
font-weight: $fontWeightLight; font-weight: $fontWeightRegular;
text-transform: uppercase;
letter-spacing: rem-calc(3);
} }
@mixin typoXL { @mixin typoXL {
@ -289,6 +311,8 @@ $fontColorLtv: $colorWhite;
@mixin typoXLcaps { @mixin typoXLcaps {
@include typoXL; @include typoXL;
letter-spacing: rem-calc(5);
text-transform: uppercase;
font-weight: $fontWeightLight; font-weight: $fontWeightLight;
} }
@ -300,6 +324,8 @@ $fontColorLtv: $colorWhite;
@mixin typoLcaps { @mixin typoLcaps {
@include typoL; @include typoL;
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
text-transform: uppercase;
letter-spacing: rem-calc(3);
} }
@mixin typoM { @mixin typoM {
@ -309,6 +335,7 @@ $fontColorLtv: $colorWhite;
@mixin typoMcaps { @mixin typoMcaps {
@include typoM; @include typoM;
text-transform: uppercase;
} }
@mixin typoS { @mixin typoS {
@ -319,6 +346,8 @@ $fontColorLtv: $colorWhite;
@mixin typoScaps { @mixin typoScaps {
@include typoS; @include typoS;
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
text-transform: uppercase;
letter-spacing: rem-calc(3);
} }
@mixin typoXS { @mixin typoXS {
@ -329,6 +358,8 @@ $fontColorLtv: $colorWhite;
@mixin typoXScaps { @mixin typoXScaps {
@include typoXS; @include typoXS;
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
text-transform: uppercase;
letter-spacing: rem-calc(3);
} }
@mixin typoXXS { @mixin typoXXS {
@ -339,6 +370,8 @@ $fontColorLtv: $colorWhite;
@mixin typoXXScaps { @mixin typoXXScaps {
@include typoXXS; @include typoXXS;
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
text-transform: uppercase;
letter-spacing: rem-calc(2);
} }
@mixin typoXXXS { @mixin typoXXXS {
@ -349,15 +382,20 @@ $fontColorLtv: $colorWhite;
@mixin typoXXXScaps { @mixin typoXXXScaps {
@include typoXXXS; @include typoXXXS;
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
text-transform: uppercase;
letter-spacing: rem-calc(2);
} }
@mixin typoButton { @mixin typoButton {
font-family: Inter, sans-serif;
@include typoS; @include typoS;
font-weight: $fontWeightSemibold; font-weight: $fontWeightSemibold;
} }
@mixin typoNav { @mixin typoNav {
@include typoL; @include typoL;
text-transform: uppercase;
letter-spacing: rem-calc(5);
} }
@mixin typoNetwork { @mixin typoNetwork {
@ -431,70 +469,100 @@ $spacingBase: 4;
/* LAYOUTS */ /* LAYOUTS */
@mixin layoutTile { @mixin layoutTile {
padding: space(1); @include bgTile;
background: $colorGreyHighlight; border: rem-calc(7) solid $colorAccentHighlight;
border: 2px solid $colorWhite; border-radius: $borderRadiusXL;
box-shadow: 0 0 0 3px $colorGreyHighlight, 12px 12px 0 0 rgb(0 0 0 / 50%) !important;
height: fit-content; height: fit-content;
} }
@mixin layoutTooltip { @mixin layoutTooltip {
padding: space(3); @include padding(2, 4);
background: $colorGreyLight; @include bgTooltip;
border: 1px solid $colorSecondaryDark; @include typoS;
box-shadow: 0 rem-calc(3) rem-calc(4) rgba(0, 0, 0, 0.14),
0 rem-calc(3) rem-calc(3) rgba(0, 0, 0, 0.12), 0 rem-calc(1) rem-calc(8) rgba(0, 0, 0, 0.2);
border-radius: $borderRadiusL;
max-width: rem-calc(350);
} }
@mixin layoutPopover { @mixin layoutPopover {
padding: space(3); @include bgPopover;
background: $colorGreyLight; box-shadow: 0 rem-calc(2) rem-calc(2) rgba(0, 0, 0, 0.14),
border: 1px solid $colorSecondaryDark; 0 rem-calc(1) rem-calc(5) rgba(0, 0, 0, 0.2);
border-radius: $borderRadiusL;
} }
@mixin layoutIncentiveButton { @mixin layoutIncentiveButton {
--border-width: 3px;
background-color: #946582;
position: relative;
border: none;
margin: rem-calc(3) rem-calc(11) 0 0;
height: rem-calc(28);
&:hover {
border: none;
background-color: darken(#946582, 10%);
}
&::after {
border-radius: $borderRadiusXXL;
position: absolute;
content: '';
top: calc(-1 * var(--border-width));
left: calc(-1 * var(--border-width));
z-index: -1;
width: calc(100% + var(--border-width) * 2);
height: calc(100% + var(--border-width) * 2);
background: linear-gradient(
90deg,
rgba(105, 98, 204, 0.8) 0%,
rgba(105, 98, 204, 1) 40%,
rgba(255, 255, 255, 1) 50%,
rgba(105, 98, 204, 1) 60%,
rgba(105, 98, 204, 0.8) 100%
);
background-size: 300% 300%;
background-position: 0 50%;
animation: moveGradient 6s alternate infinite;
}
} }
@mixin layoutLogo { @mixin layoutLogo {
> svg { > svg {
width: rem-calc(57); width: rem-calc(50);
height: rem-calc(57); height: rem-calc(50);
path {
stroke: $fontColorLightPrimary;
}
} }
} }
@mixin layoutGlobal { @mixin layoutGlobal {
opacity: 1 !important;
box-shadow: none !important;
} }
/* Buttons */ /* Buttons */
$buttonBorder: $alphaBlack40; $buttonBorder: $alphaWhite40;
$buttonBorderHover: $colorSecondaryDark; $buttonBorderHover: $colorWhite;
@mixin buttonS { @mixin buttonS {
@include typoS; @include typoS;
@include padding(1.5, 5); @include padding(1.5, 5);
height: rem-calc(32); min-height: rem-calc(32);
} }
@mixin buttonM { @mixin buttonM {
@include typoM; @include typoM;
@include padding(2.5, 6); @include padding(2.5, 6);
height: rem-calc(40); min-height: rem-calc(40);
} }
@mixin buttonL { @mixin buttonL {
@include typoL; @include typoL;
@include padding(2.5, 6); @include padding(2.5, 6);
height: rem-calc(56); min-height: rem-calc(56);
} }
@mixin buttonSolidPrimary { @mixin buttonSolidPrimary {
&.primary { &.primary {
background-color: $colorPrimary; background-color: $colorPrimary;
color: $colorWhite;
&:hover, &:hover,
&:focus { &:focus {
@ -510,7 +578,6 @@ $buttonBorderHover: $colorSecondaryDark;
@mixin buttonSolidSecondary { @mixin buttonSolidSecondary {
&.secondary { &.secondary {
background-color: $colorSecondary; background-color: $colorSecondary;
color: $colorWhite;
&:hover, &:hover,
&:focus { &:focus {
@ -525,33 +592,34 @@ $buttonBorderHover: $colorSecondaryDark;
@mixin buttonSolidTertiary { @mixin buttonSolidTertiary {
&.tertiary { &.tertiary {
background-color: $colorSecondaryDark; background-color: $colorSecondaryAlpha;
color: $colorWhite; border: 1px solid $alphaWhite60;
border: 1px solid $alphaBlack30;
&:hover, &:hover,
&:focus { &:focus {
border: 1px solid $alphaBlack20; border: 1px solid $fontColorLightPrimary;
background-color: $colorSecondaryDark;
} }
&:active { &:active {
border: 1px solid $fontColorLightPrimary;
background-color: lighten($colorSecondaryDark, 10%); background-color: lighten($colorSecondaryDark, 10%);
} }
} }
} }
/* Border Radius */ /* Border Radius */
$borderRadiusXXXS: 0; $borderRadiusXXXS: rem-calc(3);
$borderRadiusXXS: 0; $borderRadiusXXS: rem-calc(4);
$borderRadiusXS: 0; $borderRadiusXS: rem-calc(5);
$borderRadiusS: 0; $borderRadiusS: rem-calc(8);
$borderRadiusM: 0; $borderRadiusM: rem-calc(9);
$borderRadiusL: 0; $borderRadiusL: rem-calc(12);
$borderRadiusXL: 0; $borderRadiusXL: rem-calc(16);
$borderRadiusXXL: 0; $borderRadiusXXL: rem-calc(20);
$borderRadiusXXXL: 0; $borderRadiusXXXL: rem-calc(30);
$borderRadiusXXXXL: 0; $borderRadiusXXXXL: rem-calc(100);
$borderRadiusRound: 0; $borderRadiusRound: 50%;
/* Dimensions */ /* Dimensions */
$headerHeight: rem-calc(86); $headerHeight: rem-calc(86);

2220
yarn.lock
View File

File diff suppressed because it is too large Load Diff