mirror of
https://github.com/cerc-io/mars-interface.git
synced 2025-03-13 23:29:23 +00:00
v1.7.2
This commit is contained in:
Linkie Link
parent
35694a1ddb
commit
c54503cfc6
@ -17,7 +17,7 @@ i18next
|
||||
backend: {
|
||||
crossDomain: true,
|
||||
loadPath() {
|
||||
return 'https://raw.githubusercontent.com/mars-protocol/translations/develop/{{lng}}.json'
|
||||
return 'https://raw.githubusercontent.com/mars-protocol/translations/master/{{lng}}.json'
|
||||
},
|
||||
},
|
||||
react: {
|
||||
|
||||
@ -1,579 +0,0 @@
|
||||
@use 'sass:math';
|
||||
$rem-base: 16px;
|
||||
|
||||
/* Colors */
|
||||
$colorWhite: #f5f5f5;
|
||||
$colorGrey: #bdbdbd;
|
||||
$colorGreyLight: #e0e0e0;
|
||||
$colorGreyHighlight: #efefef;
|
||||
$colorGreyMedium: #9e9e9e;
|
||||
$colorGreyDark: #616161;
|
||||
|
||||
/* CI Colors */
|
||||
$colorPrimary: #0000ff;
|
||||
$colorPrimaryHighlight: #6962cc;
|
||||
$colorPrimaryAlpha: rgba(0, 0, 255, 0.05);
|
||||
$colorSecondary: #212121;
|
||||
$colorSecondaryHighlight: #424242;
|
||||
$colorSecondaryDark: #111111;
|
||||
$colorSecondaryAlpha: rgba(17, 17, 17, 0.15);
|
||||
$colorAccent: $colorGreyMedium;
|
||||
$colorAccentHighlight: $colorGreyMedium;
|
||||
$colorAccentDark: $colorGreyDark;
|
||||
$colorAccentInverted: $colorGreyLight;
|
||||
|
||||
/* Info Colors */
|
||||
$colorInfoProfit: #c4e7e9;
|
||||
$colorInfoLoss: #c8aaaa;
|
||||
$colorInfoWarning: #ffb5b5;
|
||||
$colorInfoVoteAgainst: #6c5a46;
|
||||
|
||||
/* Token Colors */
|
||||
$colorTokenMARS: #dd5b65;
|
||||
$colorTokenOSMO: #9f1ab9;
|
||||
$colorTokenATOM: #6f7390;
|
||||
$colorTokenUSDC: #478edc;
|
||||
$colorTokenJUNO: black;
|
||||
$colorTokenStATOM: #e50571;
|
||||
$colorTokenWBTC: #f09242;
|
||||
$colorTokenWETH: #343434;
|
||||
|
||||
$colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
|
||||
$colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);
|
||||
$colorGradientJUNO: linear-gradient(to bottom, #000000, #333333);
|
||||
$colorGradientAxlUSDC: linear-gradient(to bottom, #1f5c9e, #478edc);
|
||||
$colorGradientAxlWBTC: linear-gradient(to bottom, #f09242, #f9d3b3);
|
||||
$colorGradientAxlWETH: linear-gradient(to bottom, #343434, #8c8c8c);
|
||||
$colorGradientStATOM: linear-gradient(to bottom, #e50571, #fb5da9);
|
||||
|
||||
/* Alpha Colors */
|
||||
$alphaWhite10: rgba(255, 255, 255, 0.1);
|
||||
$alphaWhite20: rgba(255, 255, 255, 0.2);
|
||||
$alphaWhite30: rgba(255, 255, 255, 0.3);
|
||||
$alphaWhite40: rgba(255, 255, 255, 0.4);
|
||||
$alphaWhite50: rgba(255, 255, 255, 0.5);
|
||||
$alphaWhite60: rgba(255, 255, 255, 0.6);
|
||||
$alphaWhite70: rgba(255, 255, 255, 0.7);
|
||||
$alphaWhite80: rgba(255, 255, 255, 0.8);
|
||||
$alphaWhite90: rgba(255, 255, 255, 0.9);
|
||||
$alphaBlack10: rgba(0, 0, 0, 0.1);
|
||||
$alphaBlack20: rgba(0, 0, 0, 0.2);
|
||||
$alphaBlack30: rgba(0, 0, 0, 0.3);
|
||||
$alphaBlack40: rgba(0, 0, 0, 0.4);
|
||||
$alphaBlack50: rgba(0, 0, 0, 0.5);
|
||||
$alphaBlack60: rgba(0, 0, 0, 0.6);
|
||||
$alphaBlack70: rgba(0, 0, 0, 0.7);
|
||||
$alphaBlack80: rgba(0, 0, 0, 0.8);
|
||||
$alphaBlack90: rgba(0, 0, 0, 0.9);
|
||||
|
||||
/* Background Colors */
|
||||
$backgroundBody: $colorGrey;
|
||||
$backgroundBodyDark: $backgroundBody;
|
||||
$backgroundInTile: transparent;
|
||||
$backgroundFooter: transparent;
|
||||
|
||||
/* Slider Colors */
|
||||
$sliderThumb: $colorGreyDark;
|
||||
$sliderMark: $colorGreyDark;
|
||||
|
||||
/* Tooltip Colors */
|
||||
$tooltipIconColor: $alphaBlack60;
|
||||
|
||||
/* Table Colors */
|
||||
$tableBorder: $alphaBlack30;
|
||||
$tableBorderEnd: $alphaBlack80;
|
||||
$tableSort: $alphaBlack20;
|
||||
$tableSortActive: $alphaBlack90;
|
||||
$tableHeader: $alphaBlack40;
|
||||
$tableLabel: $colorSecondaryDark;
|
||||
|
||||
/* Graph Colors */
|
||||
$graphLiquidationsLine: $alphaBlack70;
|
||||
$graphAxis: $alphaBlack40;
|
||||
|
||||
/* Shadows */
|
||||
$shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
|
||||
@mixin shadowFade {
|
||||
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 40%);
|
||||
}
|
||||
|
||||
/* Devider */
|
||||
@mixin devider10 {
|
||||
border-bottom: 1px solid $alphaBlack10;
|
||||
}
|
||||
|
||||
@mixin devider20 {
|
||||
border-bottom: 1px solid $alphaBlack20;
|
||||
}
|
||||
|
||||
@mixin devider40 {
|
||||
border-bottom: 1px solid $alphaBlack40;
|
||||
}
|
||||
|
||||
@mixin devider60 {
|
||||
border-bottom: 1px solid $alphaBlack60;
|
||||
}
|
||||
|
||||
/* Backgrounds */
|
||||
@mixin bgBody {
|
||||
background-color: $backgroundBody;
|
||||
}
|
||||
|
||||
@mixin bgTableHover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@mixin bgBodyDark {
|
||||
background-color: $backgroundBodyDark;
|
||||
}
|
||||
|
||||
@mixin bgProposalActive {
|
||||
background: linear-gradient(90deg, #10aa93 2.6%, #248aa9 97.92%);
|
||||
}
|
||||
|
||||
@mixin bgProposalHover {
|
||||
background-color: $colorGreyMedium;
|
||||
}
|
||||
|
||||
@mixin bgTile($deg: 99.79) {
|
||||
background: linear-gradient(
|
||||
#{$deg}deg,
|
||||
rgba(8, 11, 30, 0.79) 8.17%,
|
||||
rgba(52, 20, 33, 0.9) 94.54%
|
||||
);
|
||||
}
|
||||
|
||||
@mixin bgInTile {
|
||||
background: $backgroundInTile;
|
||||
}
|
||||
|
||||
@mixin bgOverlay {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@mixin bgTooltip {
|
||||
background: linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%);
|
||||
}
|
||||
|
||||
@mixin bgPopover {
|
||||
background: linear-gradient(180deg, #fef4ed -2.1%, #ecdbe0 97.53%);
|
||||
color: $fontColorDarkPrimary;
|
||||
}
|
||||
|
||||
@mixin bgTileDevider {
|
||||
background-color: $alphaBlack60;
|
||||
}
|
||||
|
||||
@mixin bgDevider {
|
||||
background-color: $alphaBlack20;
|
||||
}
|
||||
|
||||
@mixin bgInput {
|
||||
background-color: #282a33;
|
||||
}
|
||||
|
||||
@mixin bgPrimary {
|
||||
background-color: $colorPrimary;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
@mixin bgSecondary {
|
||||
background-color: $colorSecondary;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
@mixin bgTertiary {
|
||||
background-color: $alphaBlack60;
|
||||
color: $colorWhite;
|
||||
}
|
||||
|
||||
@mixin bgLimit {
|
||||
background: $colorPrimary;
|
||||
}
|
||||
|
||||
@mixin bgLimitOpacity {
|
||||
background: $colorPrimary;
|
||||
}
|
||||
|
||||
@mixin bgHatched {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
#1a1c25 33.33%,
|
||||
rgba(255, 255, 255, 0.2) 33.33%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
#1a1c25 50%,
|
||||
#1a1c25 83.33%,
|
||||
rgba(255, 255, 255, 0.2) 83.33%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
background-size: 5px 5px;
|
||||
}
|
||||
|
||||
/* GLOWS */
|
||||
/* GLOWS */
|
||||
@mixin glowXS {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowS {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowM {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowL {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowXL {
|
||||
display: none;
|
||||
}
|
||||
@mixin glowXXL {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
$fontWeightLight: 300;
|
||||
$fontWeightRegular: 400;
|
||||
$fontWeightSemibold: 600;
|
||||
|
||||
$fontColorDarkPrimary: $colorWhite;
|
||||
$fontColorDarkSecondary: $colorSecondaryDark;
|
||||
$fontColorLightPrimary: $colorSecondaryDark;
|
||||
$fontColorLightSecondary: $alphaBlack30;
|
||||
$fontColorLightTertiary: $colorSecondaryDark;
|
||||
$fontColorLtv: $colorWhite;
|
||||
|
||||
@mixin typoH1 {
|
||||
font-weight: $fontWeightLight;
|
||||
font-size: rem-calc(60.84);
|
||||
line-height: space(20);
|
||||
}
|
||||
|
||||
@mixin typoH2 {
|
||||
font-size: rem-calc(38.49);
|
||||
line-height: space(14);
|
||||
}
|
||||
|
||||
@mixin typoH2caps {
|
||||
@include typoH2;
|
||||
}
|
||||
|
||||
@mixin typoH3 {
|
||||
font-size: rem-calc(30.42);
|
||||
line-height: space(10);
|
||||
}
|
||||
|
||||
@mixin typoH3caps {
|
||||
font-size: rem-calc(30.42);
|
||||
}
|
||||
|
||||
@mixin typoH4 {
|
||||
font-size: rem-calc(24.03);
|
||||
line-height: space(9);
|
||||
font-weight: $fontWeightRegular;
|
||||
}
|
||||
|
||||
@mixin typoH4caps {
|
||||
@include typoH4;
|
||||
}
|
||||
|
||||
@mixin typoXXL {
|
||||
font-size: rem-calc(21.36);
|
||||
line-height: space(8);
|
||||
}
|
||||
|
||||
@mixin typoXXLcaps {
|
||||
@include typoXXL;
|
||||
font-weight: $fontWeightLight;
|
||||
}
|
||||
|
||||
@mixin typoXL {
|
||||
font-size: rem-calc(18.98);
|
||||
line-height: space(7);
|
||||
}
|
||||
|
||||
@mixin typoXLcaps {
|
||||
@include typoXL;
|
||||
font-weight: $fontWeightLight;
|
||||
}
|
||||
|
||||
@mixin typoL {
|
||||
font-size: rem-calc(16.88);
|
||||
line-height: space(6);
|
||||
}
|
||||
|
||||
@mixin typoLcaps {
|
||||
@include typoL;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoM {
|
||||
font-size: rem-calc(15);
|
||||
line-height: space(5);
|
||||
}
|
||||
|
||||
@mixin typoMcaps {
|
||||
@include typoM;
|
||||
}
|
||||
|
||||
@mixin typoS {
|
||||
font-size: rem-calc(13.33);
|
||||
line-height: space(5);
|
||||
}
|
||||
|
||||
@mixin typoScaps {
|
||||
@include typoS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoXS {
|
||||
font-size: rem-calc(11.85);
|
||||
line-height: space(4);
|
||||
}
|
||||
|
||||
@mixin typoXScaps {
|
||||
@include typoXS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoXXS {
|
||||
font-size: rem-calc(10.53);
|
||||
line-height: space(4);
|
||||
}
|
||||
|
||||
@mixin typoXXScaps {
|
||||
@include typoXXS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoXXXS {
|
||||
font-size: rem-calc(9.36);
|
||||
line-height: space(2);
|
||||
}
|
||||
|
||||
@mixin typoXXXScaps {
|
||||
@include typoXXXS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoButton {
|
||||
@include typoS;
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
@mixin typoNav {
|
||||
@include typoL;
|
||||
}
|
||||
|
||||
@mixin typoNetwork {
|
||||
font-size: rem-calc(10.53);
|
||||
font-weight: $fontWeightSemibold;
|
||||
}
|
||||
|
||||
/* Spacing */
|
||||
$spacingBase: 4;
|
||||
|
||||
@function space($multiplier) {
|
||||
$space: rem-calc($spacingBase * $multiplier);
|
||||
@return $space;
|
||||
}
|
||||
|
||||
@mixin padding($top: 1, $right: null, $bottom: null, $left: null) {
|
||||
@if $left {
|
||||
padding: space($top) space($right) space($bottom) space($left);
|
||||
} @else {
|
||||
@if $bottom {
|
||||
padding: space($top) space($right) space($bottom);
|
||||
} @else {
|
||||
@if $right {
|
||||
padding: space($top) space($right);
|
||||
} @else {
|
||||
padding: space($top);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin($top: 1, $right: null, $bottom: null, $left: null) {
|
||||
@if $left {
|
||||
margin: space($top) space($right) space($bottom) space($left);
|
||||
} @else {
|
||||
@if $bottom {
|
||||
margin: space($top) space($right) space($bottom);
|
||||
} @else {
|
||||
@if $right {
|
||||
margin: space($top) space($right);
|
||||
} @else {
|
||||
margin: space($top);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function strip-unit($num) {
|
||||
@return math.div($num, $num * 0 + 1);
|
||||
}
|
||||
|
||||
@function convert-to-rem($value, $base-value: $rem-base) {
|
||||
$value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
|
||||
@if ($value == 0rem) {
|
||||
$value: 0;
|
||||
}
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function rem-calc($values, $base-value: $rem-base) {
|
||||
$max: length($values);
|
||||
@if $max == 1 {
|
||||
@return convert-to-rem(nth($values, 1), $base-value);
|
||||
}
|
||||
$remValues: ();
|
||||
@for $i from 1 through $max {
|
||||
$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
|
||||
}
|
||||
@return $remValues;
|
||||
}
|
||||
|
||||
/* LAYOUTS */
|
||||
@mixin layoutTile {
|
||||
padding: space(1);
|
||||
background: $colorGreyHighlight;
|
||||
border: 2px solid $colorWhite;
|
||||
box-shadow: 0 0 0 3px $colorGreyHighlight, 12px 12px 0 0 rgb(0 0 0 / 50%) !important;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@mixin layoutTooltip {
|
||||
padding: space(3);
|
||||
background: $colorGreyLight;
|
||||
border: 1px solid $colorSecondaryDark;
|
||||
}
|
||||
|
||||
@mixin layoutPopover {
|
||||
padding: space(3);
|
||||
background: $colorGreyLight;
|
||||
border: 1px solid $colorSecondaryDark;
|
||||
}
|
||||
|
||||
@mixin layoutIncentiveButton {
|
||||
}
|
||||
|
||||
@mixin layoutLogo {
|
||||
> svg {
|
||||
width: rem-calc(57);
|
||||
height: rem-calc(57);
|
||||
|
||||
path {
|
||||
stroke: $fontColorLightPrimary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin layoutGlobal {
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
$buttonBorder: $alphaBlack40;
|
||||
$buttonBorderHover: $colorSecondaryDark;
|
||||
|
||||
@mixin buttonS {
|
||||
@include typoS;
|
||||
@include padding(1.5, 5);
|
||||
height: rem-calc(32);
|
||||
}
|
||||
|
||||
@mixin buttonM {
|
||||
@include typoM;
|
||||
@include padding(2.5, 6);
|
||||
height: rem-calc(40);
|
||||
}
|
||||
|
||||
@mixin buttonL {
|
||||
@include typoL;
|
||||
@include padding(2.5, 6);
|
||||
height: rem-calc(56);
|
||||
}
|
||||
|
||||
@mixin buttonSolidPrimary {
|
||||
&.primary {
|
||||
background-color: $colorPrimary;
|
||||
color: $colorWhite;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $colorPrimaryHighlight;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($colorPrimary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonSolidSecondary {
|
||||
&.secondary {
|
||||
background-color: $colorSecondary;
|
||||
color: $colorWhite;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $colorSecondaryHighlight;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($colorSecondary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonSolidTertiary {
|
||||
&.tertiary {
|
||||
background-color: $colorSecondaryDark;
|
||||
color: $colorWhite;
|
||||
border: 1px solid $alphaBlack30;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid $alphaBlack20;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($colorSecondaryDark, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Border Radius */
|
||||
$borderRadiusXXXS: 0;
|
||||
$borderRadiusXXS: 0;
|
||||
$borderRadiusXS: 0;
|
||||
$borderRadiusS: 0;
|
||||
$borderRadiusM: 0;
|
||||
$borderRadiusL: 0;
|
||||
$borderRadiusXL: 0;
|
||||
$borderRadiusXXL: 0;
|
||||
$borderRadiusXXXL: 0;
|
||||
$borderRadiusXXXXL: 0;
|
||||
$borderRadiusRound: 0;
|
||||
|
||||
/* Dimensions */
|
||||
$headerHeight: rem-calc(86);
|
||||
$mobileNavHeight: rem-calc(64);
|
||||
$footerHeight: rem-calc(380);
|
||||
$footerHeightMedium: rem-calc(380);
|
||||
$footerHeightSmall: rem-calc(800);
|
||||
$contentWidth: 1248px;
|
||||
|
||||
/* Breakpoints */
|
||||
$bpLargeHigh: $contentWidth;
|
||||
$bpLargeLow: 1025px;
|
||||
$bpMediumHigh: 1024px;
|
||||
$bpMediumLow: 801px;
|
||||
$bpSmallHigh: 800px;
|
||||
$bpXSmallHigh: 719px;
|
||||
$bpXSmallLow: 480px;
|
||||
|
||||
/* Animation Timings */
|
||||
$animationSpeed: 1s;
|
||||
Loading…
Reference in New Issue
Block a user