web/satellite: color palette added

colors moved from figma to style variables
colors from pallete changed from hex to use variables

Change-Id: I0a6adced8f598abc3e1102fcec68cf376ddb53cd
This commit is contained in:
NickolaiYurchenko 2022-10-18 18:23:32 +03:00 committed by Storj Robot
parent c63a401399
commit d6f8efb6e3
75 changed files with 643 additions and 437 deletions

View File

@ -628,7 +628,7 @@ export default class AccessGrants extends Vue {
&__text {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
}
}
}

View File

@ -209,7 +209,7 @@ export default class ConfirmDeletePopup extends Vue {
&__item {
padding: 3px 7px;
max-width: fit-content;
background: #d8dee3;
background: var(--c-grey-3);
border-radius: 20px;
margin-bottom: 10px;

View File

@ -420,7 +420,7 @@ export default class CreateForm extends Vue {
<style scoped lang="scss">
@mixin tooltip-container {
position: absolute;
background: #56606d;
background: var(--c-grey-6);
border-radius: 6px;
width: 253px;
color: #fff;
@ -439,7 +439,7 @@ export default class CreateForm extends Vue {
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #56606d;
border-top-color: var(--c-grey-6);
border-bottom: 0;
margin-left: -20px;
margin-bottom: -20px;
@ -536,7 +536,7 @@ export default class CreateForm extends Vue {
&__input {
background: #fff;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
box-sizing: border-box;
border-radius: 6px;
font-size: 14px;
@ -567,7 +567,7 @@ export default class CreateForm extends Vue {
}
&__text {
color: #929fb1;
color: var(--c-grey-5);
text-decoration: underline;
cursor: pointer;
text-align: left;
@ -601,7 +601,7 @@ export default class CreateForm extends Vue {
:deep(.buckets-selection) {
margin-left: 0;
height: 40px;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
}
:deep(.buckets-selection__toggle-container) {
@ -690,7 +690,7 @@ export default class CreateForm extends Vue {
.checkmark-container input:checked ~ .checkmark {
border: 2px solid #376fff;
background-color: #0149ff;
background-color: var(--c-blue-3);
}
.checkmark:after {

View File

@ -241,7 +241,7 @@ export default class EncryptForm extends Vue {
:deep(path),
:deep(rect) {
stroke: #56606d;
stroke: var(--c-grey-6);
}
}
}
@ -267,7 +267,7 @@ export default class EncryptForm extends Vue {
&__divider {
width: 100%;
height: 1px;
background: #ebeef1;
background: var(--c-grey-2);
margin: 16px 0;
&.in-middle {
@ -294,11 +294,11 @@ export default class EncryptForm extends Vue {
&.selected {
:deep(circle) {
fill: #e6edf7 !important;
fill: var(--c-blue-1) !important;
}
:deep(path) {
fill: #003dc1 !important;
fill: var(--c-blue-4) !important;
}
}
}
@ -337,8 +337,8 @@ export default class EncryptForm extends Vue {
margin-bottom: 20px;
align-items: center;
padding: 10px 16px;
background: #ebeef1;
border: 1px solid #c8d3de;
background: var(--c-grey-2);
border: 1px solid var(--c-grey-4);
border-radius: 7px;
text-align: left;
}
@ -347,7 +347,7 @@ export default class EncryptForm extends Vue {
margin-top: 20px;
width: 100%;
background: #fff;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
box-sizing: border-box;
border-radius: 4px;
font-size: 14px;
@ -384,7 +384,7 @@ export default class EncryptForm extends Vue {
}
&__acknowledgement-container {
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
border-radius: 6px;
display: grid;
grid-template-columns: 1fr 6fr;

View File

@ -439,8 +439,8 @@ export default class GrantCreated extends Vue {
margin-top: 10px;
align-items: center;
padding: 10px 16px;
background: #ebeef1;
border: 1px solid #c8d3de;
background: var(--c-grey-2);
border: 1px solid var(--c-grey-4);
border-radius: 7px;
display: flex;
justify-content: space-between;

View File

@ -130,7 +130,7 @@ export default class DurationSelection extends Vue {
.access-date-container {
margin-left: 0;
height: 40px;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
}
.access-date-text {

View File

@ -400,7 +400,7 @@ export default class BillingArea extends Vue {
&__tab {
font-family: sans-serif;
color: #56606d;
color: var(--c-grey-6);
font-size: 16px;
height: auto;
width: auto;

View File

@ -81,7 +81,7 @@ export default class BillingHistoryItem extends Resizable {
<style scoped lang="scss">
a {
color: #0149ff;
color: var(--c-blue-3);
text-decoration: underline;
}

View File

@ -157,8 +157,8 @@ export default class Coupons extends Vue {
<style scoped lang="scss">
.active-discount {
background: #dffff7;
color: #00ac26;
background: var(--c-green-1);
color: var(--c-green-5);
}
.inactive-discount {
@ -167,7 +167,7 @@ export default class Coupons extends Vue {
}
.active-status {
background: #00ac26;
background: var(--c-green-5);
}
.inactive-status {
@ -266,7 +266,7 @@ export default class Coupons extends Vue {
}
&__new-coupon {
border: 2px dashed #929fb1;
border: 2px dashed var(--c-grey-5);
border-radius: 10px;
max-width: 400px;
width: 18vw;
@ -286,13 +286,13 @@ export default class Coupons extends Vue {
justify-content: center;
&__plus-icon {
color: #0149ff;
color: var(--c-blue-3);
font-family: sans-serif;
font-size: 24px;
}
&__text {
color: #0149ff;
color: var(--c-blue-3);
font-family: sans-serif;
font-size: 18px;
text-decoration: underline;

View File

@ -129,7 +129,7 @@ export default class CardComponent extends Vue {
align-items: center;
gap: 8px;
background: white;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
box-shadow: 0 0 3px rgb(0 0 0 / 8%);
border-radius: 6px;
width: 70px;
@ -163,7 +163,7 @@ export default class CardComponent extends Vue {
width: 70px;
height: 30px;
background: white;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
box-shadow: 0 0 3px rgb(0 0 0 / 8%);
border-radius: 6px;
font-family: 'font_medium', sans-serif;
@ -215,7 +215,7 @@ export default class CardComponent extends Vue {
font-weight: 700;
font-size: 12px;
line-height: 18px;
color: #56606d;
color: var(--c-grey-6);
}
&__expiration-text {
@ -226,7 +226,7 @@ export default class CardComponent extends Vue {
font-weight: 700;
font-size: 12px;
line-height: 18px;
color: #56606d;
color: var(--c-grey-6);
}
&__last-four {
@ -266,8 +266,8 @@ export default class CardComponent extends Vue {
grid-column: 2;
width: 58px;
height: 24px;
background: #e6edf7;
border: 1px solid #d7e8ff;
background: var(--c-blue-1);
border: 1px solid var(--c-blue-2);
border-radius: 4px;
justify-self: end;
}
@ -278,7 +278,7 @@ export default class CardComponent extends Vue {
font-weight: 700;
font-size: 12px;
line-height: 20px;
color: #003dc1;
color: var(--c-blue-4);
margin-left: 8px;
margin-top: 3px;
}

View File

@ -193,10 +193,10 @@ export default class BillingArea extends Vue {
display: flex;
justify-content: space-between;
align-items: bottom;
color: #56606d;
color: var(--c-grey-6);
font-weight: 700;
font-family: sans-serif;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
border-radius: 5px;
background-color: #fff;
height: 15px;
@ -261,7 +261,7 @@ export default class BillingArea extends Vue {
}
position: absolute;
background: #56606d;
background: var(--c-grey-6);
border-radius: 6px;
width: 253px;
color: #fff;
@ -286,7 +286,7 @@ export default class BillingArea extends Vue {
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #56606d;
border-top-color: var(--c-grey-6);
border-bottom: 0;
margin-left: -20px;
margin-bottom: -20px;

View File

@ -543,7 +543,7 @@ $align: center;
}
.edit-card-text {
color: #0149ff;
color: var(--c-blue-3);
font-family: sans-serif;
}
@ -563,7 +563,7 @@ $align: center;
gap: 10px;
width: 300px;
height: 10px;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
border-radius: 8px;
margin-top: 7px;
}
@ -571,7 +571,7 @@ $align: center;
.change-default-input {
margin-left: auto;
background: #fff;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
border-radius: 24px;
}
@ -587,7 +587,7 @@ $align: center;
height: 24px;
padding: 16px;
gap: 8px;
background: #0149ff;
background: var(--c-blue-3);
box-shadow: 0 0 1px rgb(9 28 69 / 80%);
border-radius: 8px;
font-family: sans-serif;
@ -616,7 +616,7 @@ $align: center;
padding: 16px;
gap: 8px;
background: #fff;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
box-shadow: 0 0 3px rgb(0 0 0 / 8%);
border-radius: 8px;
font-family: sans-serif;
@ -627,7 +627,7 @@ $align: center;
display: $flex;
align-items: $align;
letter-spacing: -0.02em;
color: #56606d;
color: var(--c-grey-6);
&:hover {
border: 1px solid #e30011 !important;
@ -703,7 +703,7 @@ $align: center;
font-size: 14px;
line-height: 20px;
text-align: $align;
color: #56606d;
color: var(--c-grey-6);
}
&__header-subtext-default {
@ -713,7 +713,7 @@ $align: center;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
}
&__container {
@ -760,8 +760,8 @@ $align: center;
}
.active-discount {
background: #dffff7;
color: #00ac26;
background: var(--c-green-1);
color: var(--c-green-5);
}
.inactive-discount {
@ -770,7 +770,7 @@ $align: center;
}
.active-status {
background: #00ac26;
background: var(--c-green-5);
}
.inactive-status {
@ -809,7 +809,7 @@ $align: center;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
}
&__title {
@ -846,7 +846,7 @@ $align: center;
height: 203px;
padding: 24px;
box-sizing: border-box;
border: 2px dashed #929fb1;
border: 2px dashed var(--c-grey-5);
border-radius: 10px;
display: flex;
align-items: center;
@ -857,7 +857,7 @@ $align: center;
align-items: center;
font-size: 16px;
font-family: 'font_regular', sans-serif;
color: #0149ff;
color: var(--c-blue-3);
cursor: pointer;
&__text {

View File

@ -179,7 +179,7 @@ export default class UsageAndChargesItem2 extends Vue {
.divider {
margin-top: 15px;
background-color: #ebeef1;
background-color: var(--c-grey-2);
width: calc(100% + 40px);
height: 1px;
align-self: center;
@ -261,7 +261,7 @@ export default class UsageAndChargesItem2 extends Vue {
justify-content: space-between;
font-size: 12px;
line-height: 19px;
color: #56606d;
color: var(--c-grey-6);
font-weight: 600;
height: 25px;
width: 100%;
@ -312,7 +312,7 @@ export default class UsageAndChargesItem2 extends Vue {
padding-top: 10px;
&__method {
color: #56606d;
color: var(--c-grey-6);
font-weight: 600;
font-size: 12px;
}

View File

@ -56,7 +56,7 @@ export default class AddStorjForm extends Vue {
color: #000;
a {
color: #0149ff;
color: var(--c-blue-3);
}
}
}

View File

@ -86,7 +86,7 @@ export default class AddTokenCard extends Vue {
z-index: 1;
a {
color: #0149ff;
color: var(--c-blue-3);
text-decoration: underline !important;
}
}

View File

@ -151,7 +151,7 @@ export default class AddTokenCardNative extends Vue {
position: relative;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-bottom: 23px;
max-width: 232px;
z-index: 1;
@ -165,7 +165,7 @@ export default class AddTokenCardNative extends Vue {
z-index: 1;
&__small-icon {
background: #e6edf7;
background: var(--c-blue-1);
border-radius: 4px;
width: 32px;
height: 24px;
@ -178,14 +178,14 @@ export default class AddTokenCardNative extends Vue {
display: flex;
align-items: center;
padding: 7px 8px;
background: #e6edf7;
background: var(--c-blue-1);
border: 1px solid #fff;
border-radius: 4px;
&__label {
font-family: 'font_bold', sans-serif;
font-size: 12px;
color: #003dc1;
color: var(--c-blue-4);
margin-right: 4px;
}
@ -227,7 +227,7 @@ export default class AddTokenCardNative extends Vue {
font-family: 'font_medium', sans-serif;
font-size: 12px;
line-height: 18px;
color: #56606d;
color: var(--c-grey-6);
}
&__value {
@ -257,7 +257,7 @@ export default class AddTokenCardNative extends Vue {
span {
font-size: 13px;
color: #56606d;
color: var(--c-grey-6);
font-family: 'font_medium', sans-serif;
line-height: 23px;
margin: 0;
@ -277,14 +277,14 @@ export default class AddTokenCardNative extends Vue {
:deep(.info__box__message) {
padding: 8px 8px 13px;
width: 235px;
background: #56606d;
background: var(--c-grey-6);
border-radius: 4px;
}
:deep(.info__box__arrow) {
width: 10px;
height: 10px;
background: #56606d;
background: var(--c-grey-6);
margin-bottom: -3px;
}
</style>

View File

@ -101,7 +101,7 @@ export default class BalanceTokenCard extends Vue {
<style scoped lang="scss">
.Confirmed {
color: #00ac26;
color: var(--c-green-5);
}
.Rejected {
@ -109,7 +109,7 @@ export default class BalanceTokenCard extends Vue {
}
.Pending {
color: #ffa800;
color: var(--c-yellow-4);
}
.token {
@ -156,7 +156,7 @@ export default class BalanceTokenCard extends Vue {
grid-row: 1;
height: 30px;
width: 40px;
background-color: #e6edf7;
background-color: var(--c-blue-1);
border-radius: 5px;
display: flex;
justify-content: center;
@ -173,7 +173,7 @@ export default class BalanceTokenCard extends Vue {
&__label {
font-size: 12px;
font-weight: 700;
color: #56606d;
color: var(--c-grey-6);
grid-column: 1/ span 2;
grid-row: 1;
margin: auto 0 0;
@ -203,7 +203,7 @@ export default class BalanceTokenCard extends Vue {
&__label {
font-size: 12px;
font-weight: 700;
color: #56606d;
color: var(--c-grey-6);
grid-row: 1;
margin: auto 0 0;
}
@ -238,7 +238,7 @@ export default class BalanceTokenCard extends Vue {
&__label {
font-size: 12px;
font-weight: 700;
color: #56606d;
color: var(--c-grey-6);
grid-column: 1/ span 2;
grid-row: 1;
margin: auto 0 0;
@ -269,7 +269,7 @@ export default class BalanceTokenCard extends Vue {
&__label {
font-size: 12px;
font-weight: 700;
color: #56606d;
color: var(--c-grey-6);
grid-row: 1;
margin: auto 0 0;
}
@ -312,7 +312,7 @@ export default class BalanceTokenCard extends Vue {
z-index: 1;
a {
color: #0149ff;
color: var(--c-blue-3);
text-decoration: underline !important;
}
}

View File

@ -89,19 +89,19 @@ export default class TokenTransactionItem extends Resizable {
<style scoped lang="scss">
.pending {
background: #ffa800;
background: var(--c-yellow-4);
}
.pending_txt {
color: #ffa800;
color: var(--c-yellow-4);
}
.confirmed {
background: #00ac26;
background: var(--c-green-5);
}
.confirmed_txt {
color: #00ac26;
color: var(--c-green-5);
}
.rejected {

View File

@ -557,7 +557,7 @@ export default class FileBrowser extends Vue {
.file-browser-table {
padding: 0 12px 24px;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
box-shadow: none;
}
@ -569,7 +569,7 @@ export default class FileBrowser extends Vue {
border: 2px dashed #bec4cd;
border-radius: 10px;
padding: 80px 20px;
background: #fafafb;
background: var(--c-grey-1);
cursor: pointer;
svg {
@ -669,20 +669,20 @@ export default class FileBrowser extends Vue {
padding: 0 18px;
font-family: 'font_regular', sans-serif;
font-size: 14px;
color: #56606d;
color: var(--c-grey-6);
background-clip: padding-box;
&:hover {
background: #fafafb;
color: #0149ff;
background: var(--c-grey-1);
color: var(--c-blue-3);
.btn-icon > path {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
&:not(:first-of-type) {
border-top: 1px solid #ebeef1;
border-top: 1px solid var(--c-grey-2);
}
}
}
@ -719,8 +719,8 @@ export default class FileBrowser extends Vue {
.new-folder-button {
background: white;
border: 1px solid #d8dee3;
color: #56606d;
border: 1px solid var(--c-grey-3);
color: var(--c-grey-6);
border-radius: 8px;
}
@ -729,12 +729,12 @@ export default class FileBrowser extends Vue {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #0149ff;
background-color: var(--c-blue-3);
&__divider {
height: 100%;
width: 1px;
background: #56606d;
background: var(--c-grey-6);
margin: 0 7px;
}
}

View File

@ -205,7 +205,7 @@ export default class FileShareModal extends Vue {
background: none;
border: none;
font-size: 14px;
color: #56606d;
color: var(--c-grey-6);
max-width: 340px;
width: 100%;
flex-wrap: inherit !important;
@ -219,8 +219,8 @@ export default class FileShareModal extends Vue {
}
.input-group {
border: 1px solid #c8d3de;
background: #fafafb;
border: 1px solid var(--c-grey-4);
background: var(--c-grey-1);
padding: 10px;
display: flex;
justify-content: space-between;

View File

@ -100,7 +100,7 @@ export default class AddCouponCodeInput2 extends Vue {
font-family: sans-serif;
font-weight: 700;
font-size: 14px;
color: #56606d;
color: var(--c-grey-6);
margin-top: -15px;
}
}

View File

@ -394,12 +394,12 @@ export default class GeneratePassphrase extends Vue {
}
.active {
color: #0149ff;
border-color: #0149ff;
color: var(--c-blue-3);
border-color: var(--c-blue-3);
}
.active svg rect {
fill: #0149ff;
fill: var(--c-blue-3);
}
:deep(.info__box__message) {

View File

@ -40,7 +40,7 @@ export default class InfoNotification extends Vue {
align-items: flex-start;
padding: 1.375rem;
font-family: 'font_regular', sans-serif;
background-color: #d7e8ff;
background-color: var(--c-blue-2);
border: 1px solid #a5beff;
border-radius: 10px;
box-shadow: 0 7px 20px rgba(0 0 0 / 15%);
@ -51,7 +51,7 @@ export default class InfoNotification extends Vue {
margin-right: 1.375rem;
:deep(path) {
fill: var(--c-info-icon);
fill: var(--c-blue-4);
}
}

View File

@ -86,8 +86,8 @@ export default class VBanner extends Resizable {
align-items: center;
padding: 1.375rem;
font-family: 'font_regular', sans-serif;
background-color: var(--c-info);
border: 1px solid var(--c-info-border);
background-color: var(--c-light-blue-1);
border: 1px solid var(--c-light-blue-2);
border-radius: 10px;
box-shadow: 0 7px 20px rgba(0 0 0 / 15%);
box-sizing: border-box;
@ -97,25 +97,25 @@ export default class VBanner extends Resizable {
margin-right: 1.375rem;
:deep(path) {
fill: var(--c-info-icon);
fill: var(--c-blue-4);
}
}
&.warning {
background-color: var(--c-warning);
border: 1px solid var(--c-warning-border);
background-color: var(--c-yellow-1);
border: 1px solid var(--c-yellow-2);
:deep(.icon-path) {
fill: var(--c-warning-icon) !important;
fill: var(--c-yellow-3) !important;
}
}
&.critical {
background-color: var(--c-critical);
border: 1px solid var(--c-critical-border);
background-color: var(--c-pink-1);
border: 1px solid var(--c-pink-2);
:deep(.icon-path) {
fill: var(--c-critical-icon);
fill: var(--c-pink-4);
}
}

View File

@ -106,8 +106,8 @@ export default defineComponent({
}
.solid-red {
background-color: #ba0000 !important;
border: 1px solid #ba0000 !important;
background-color: var(--c-red-3) !important;
border: 1px solid var(--c-red-3) !important;
.label {
color: #fff !important;
@ -121,7 +121,7 @@ export default defineComponent({
.white {
background-color: #fff !important;
border: 1px solid #d8dee3 !important;
border: 1px solid var(--c-grey-3) !important;
.label {
color: #354049 !important;
@ -142,13 +142,13 @@ export default defineComponent({
border: 1px solid #afb7c1 !important;
.label {
color: #00ac26 !important;
color: var(--c-green-5) !important;
}
}
.green-white {
background-color: #00ac26 !important;
border: 1px solid #00ac26 !important;
background-color: var(--c-green-5) !important;
border: 1px solid var(--c-green-5) !important;
}
.grey-blue {
@ -156,7 +156,7 @@ export default defineComponent({
border: 2px solid #d9dbe9 !important;
.label {
color: #0149ff !important;
color: var(--c-blue-3) !important;
}
}
@ -183,7 +183,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
background-color: #0149ff;
background-color: var(--c-blue-3);
cursor: pointer;
.trash-icon {
@ -191,7 +191,7 @@ export default defineComponent({
}
.greenCheck {
color: #00ac26 !important;
color: var(--c-green-5) !important;
margin-right: 5px;
}

View File

@ -54,11 +54,11 @@ export default class VDateRangePicker extends Vue {
}
.mx-table th {
color: #c8d3de;
color: var(--c-grey-4);
}
.mx-table-date .cell.not-current-month {
color: #929fb1;
color: var(--c-grey-5);
}
.mx-calendar-content .cell {
@ -69,12 +69,12 @@ export default class VDateRangePicker extends Vue {
.mx-calendar-content .cell.in-range {
color: #000;
background-color: #e6edf7;
background-color: var(--c-blue-1);
border-radius: 999px;
}
.mx-calendar-content .cell.active {
background-color: #0149ff;
background-color: var(--c-blue-3);
border-radius: 999px;
}

View File

@ -58,7 +58,7 @@ export default class VSearch extends Vue {
padding: 0 10px 0 50px;
box-sizing: border-box;
outline: none;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
border-radius: 10px;
height: 56px;
width: 250px;

View File

@ -96,7 +96,7 @@ export default class VTable extends Vue {
tbody {
tr:hover {
background: #e6edf7;
background: var(--c-blue-1);
}
th {

View File

@ -41,7 +41,7 @@ export default class MFARecoveryCodeBar extends Vue {
display: flex;
align-items: center;
justify-content: space-between;
background: #ffc600;
background: var(--c-yellow-3);
font-size: 14px;
line-height: 18px;
color: #000;

View File

@ -315,7 +315,7 @@ export default class AddPaymentMethodModal extends Vue {
font-weight: 600;
font-size: 14px;
line-height: 18px;
color: #0149ff;
color: var(--c-blue-3);
padding: 0 10px 5px;
cursor: pointer;
border-bottom: 3px solid #fff;
@ -432,7 +432,7 @@ export default class AddPaymentMethodModal extends Vue {
color: #000;
a {
color: #0149ff;
color: var(--c-blue-3);
}
}
}
@ -519,7 +519,7 @@ export default class AddPaymentMethodModal extends Vue {
&__price {
font-family: 'font_bold', sans-serif;
font-size: 42px;
color: #0149ff;
color: var(--c-blue-3);
}
&__label {
@ -622,6 +622,6 @@ export default class AddPaymentMethodModal extends Vue {
}
.active {
border-color: #0149ff;
border-color: var(--c-blue-3);
}
</style>

View File

@ -182,7 +182,7 @@ export default class AddTokenFundsModal extends Vue {
&__text {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-right: 9px;
font-family: 'font_medium', sans-serif;
}
@ -216,7 +216,7 @@ export default class AddTokenFundsModal extends Vue {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #c8d3de;
border: 1px solid var(--c-grey-4);
border-radius: 8px;
padding: 10px 15px;
width: calc(100% - 64px);
@ -267,14 +267,14 @@ export default class AddTokenFundsModal extends Vue {
}
:deep(.info__box__message) {
background: #56606d;
background: var(--c-grey-6);
border-radius: 4px;
padding: 10px 8px;
transform: rotate(-180deg);
}
:deep(.info__box__arrow) {
background: #56606d;
background: var(--c-grey-6);
width: 10px;
height: 10px;
margin-bottom: -3px;

View File

@ -107,7 +107,7 @@ export default class InactivityModal extends Vue {
margin-bottom: 8px;
&__timer {
color: #ff458b;
color: var(--c-pink-4);
}
}

View File

@ -75,22 +75,22 @@ export default class LimitWarningModal extends Vue {
&.critical {
:deep(.icon-background) {
fill: #ffb0b0;
fill: var(--c-red-1);
}
:deep(.icon-chart) {
fill: #ff1313;
fill: var(--c-red-2);
}
}
&.warning {
:deep(.icon-background) {
fill: #ffa800;
fill: var(--c-yellow-4);
}
:deep(.icon-chart) {
fill: #ff8a00;
fill: var(--c-yellow-5);
}
}
}

View File

@ -244,8 +244,8 @@ export default class ShareBucketModal extends Vue {
}
&__input-group {
border: 1px solid #c8d3de;
background: #fafafb;
border: 1px solid var(--c-grey-4);
background: var(--c-grey-1);
padding: 10px;
display: flex;
justify-content: space-between;
@ -258,7 +258,7 @@ export default class ShareBucketModal extends Vue {
background: none;
border: none;
font-size: 14px;
color: #56606d;
color: var(--c-grey-6);
outline: none;
max-width: 340px;
width: 100%;

View File

@ -240,7 +240,7 @@ export default class AccountArea extends Vue {
&__label-small {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin: 0 6px 0 24px;
}
@ -251,16 +251,16 @@ export default class AccountArea extends Vue {
}
&:hover {
background-color: #fafafb;
border-color: #fafafb;
background-color: var(--c-grey-1);
border-color: var(--c-grey-1);
p {
color: #0149ff;
color: var(--c-blue-3);
}
.account-area__wrap__arrow :deep(path),
.account-area__wrap__left__icon :deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
}
@ -272,16 +272,16 @@ export default class AccountArea extends Vue {
max-width: 240px;
z-index: 1;
cursor: default;
border: 1px solid #ebeef1;
border: 1px solid var(--c-grey-2);
box-sizing: border-box;
box-shadow: 0 -2px 16px rgb(0 0 0 / 10%);
border-radius: 8px;
&__header {
background: #fafafb;
background: var(--c-grey-1);
padding: 16px;
width: calc(100% - 32px);
border: 1px solid #ebeef1;
border: 1px solid var(--c-grey-2);
display: flex;
align-items: center;
justify-content: space-between;
@ -295,14 +295,14 @@ export default class AccountArea extends Vue {
&__label {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-left: 16px;
}
&__sat {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-right: 16px;
}
@ -315,7 +315,7 @@ export default class AccountArea extends Vue {
&__item {
display: flex;
align-items: center;
border-top: 1px solid #ebeef1;
border-top: 1px solid var(--c-grey-2);
padding: 16px;
width: calc(100% - 32px);
cursor: pointer;
@ -324,7 +324,7 @@ export default class AccountArea extends Vue {
margin-left: 16px;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
}
&:last-of-type {
@ -335,11 +335,11 @@ export default class AccountArea extends Vue {
background-color: #f7f8fb;
p {
color: #0149ff;
color: var(--c-blue-3);
}
:deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
}
@ -350,7 +350,7 @@ export default class AccountArea extends Vue {
border-color: #000;
p {
color: #091c45;
color: var(--c-blue-6);
font-family: 'font_bold', sans-serif;
}
@ -361,16 +361,16 @@ export default class AccountArea extends Vue {
}
.active:hover {
border-color: #0149ff;
border-color: var(--c-blue-3);
background-color: #f7f8fb;
p {
color: #0149ff;
color: var(--c-blue-3);
}
.account-area__wrap__arrow :deep(path),
.account-area__wrap__left__icon :deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}

View File

@ -47,7 +47,7 @@ export default class GuidesDropdown extends Vue {
.side-dropdown {
position: absolute;
background: #fff;
border: 1px solid #ebeef1;
border: 1px solid var(--c-grey-2);
box-shadow: 0 0 20px rgb(0 0 0 / 4%);
border-radius: 8px;
width: 390px;

View File

@ -587,7 +587,7 @@ export default class MobileNavigation extends Vue {
align-items: center;
justify-content: space-between;
border-left: 4px solid #fff;
color: #56606d;
color: var(--c-grey-6);
position: static;
cursor: pointer;
height: 48px;
@ -607,7 +607,7 @@ export default class MobileNavigation extends Vue {
&__border {
margin: 0 32px 16px;
border: 0.5px solid #ebeef1;
border: 0.5px solid var(--c-grey-2);
width: calc(100% - 48px);
}
}
@ -617,7 +617,7 @@ export default class MobileNavigation extends Vue {
.router-link-active,
.active {
border-color: #000;
color: #091c45;
color: var(--c-blue-6);
font-family: 'font_bold', sans-serif;
:deep(path) {
@ -631,8 +631,8 @@ export default class MobileNavigation extends Vue {
font-family: 'font_regular', sans-serif;
padding: 16px;
cursor: pointer;
border-bottom: 1px solid #ebeef1;
background: #fafafb;
border-bottom: 1px solid var(--c-grey-2);
background: var(--c-grey-1);
}
:deep(.dropdown-item__icon) {
@ -648,13 +648,13 @@ export default class MobileNavigation extends Vue {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 22px;
color: #091c45;
color: var(--c-blue-6);
}
:deep(.dropdown-item__text__label) {
font-size: 12px;
line-height: 21px;
color: #091c45;
color: var(--c-blue-6);
}
:deep(.dropdown-item:first-of-type) {
@ -673,8 +673,8 @@ export default class MobileNavigation extends Vue {
font-family: 'font_regular', sans-serif;
padding: 10px 16px;
cursor: pointer;
border-top: 1px solid #ebeef1;
border-bottom: 1px solid #ebeef1;
border-top: 1px solid var(--c-grey-2);
border-bottom: 1px solid var(--c-grey-2);
}
.project-selection {
@ -702,7 +702,7 @@ export default class MobileNavigation extends Vue {
max-width: calc(100% - 24px - 16px);
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-left: 24px;
white-space: nowrap;
overflow: hidden;
@ -775,12 +775,12 @@ export default class MobileNavigation extends Vue {
display: flex;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #ebeef1;
border-bottom: 1px solid var(--c-grey-2);
&__label {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-left: 24px;
}
@ -814,7 +814,7 @@ export default class MobileNavigation extends Vue {
&__label-small {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin: 0 6px 0 24px;
}
@ -832,9 +832,9 @@ export default class MobileNavigation extends Vue {
box-sizing: border-box;
&__header {
background: #fafafb;
background: var(--c-grey-1);
padding: 16px 32px;
border: 1px solid #ebeef1;
border: 1px solid var(--c-grey-2);
display: flex;
align-items: center;
justify-content: space-between;
@ -847,14 +847,14 @@ export default class MobileNavigation extends Vue {
&__label {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-left: 16px;
}
&__sat {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-right: 16px;
}
@ -868,13 +868,13 @@ export default class MobileNavigation extends Vue {
display: flex;
align-items: center;
padding: 16px 32px;
background: #fafafb;
background: var(--c-grey-1);
&__label {
margin-left: 16px;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
}
&:last-of-type {

View File

@ -307,7 +307,7 @@ export default class NavigationArea extends Vue {
background-color: #fff;
font-family: 'font_regular', sans-serif;
box-shadow: 0 0 32px rgb(0 0 0 / 4%);
border-right: 1px solid #ebeef1;
border-right: 1px solid var(--c-grey-2);
&__container {
display: flex;
@ -349,7 +349,7 @@ export default class NavigationArea extends Vue {
align-items: center;
justify-content: space-between;
border-left: 4px solid #fff;
color: #56606d;
color: var(--c-grey-6);
position: static;
cursor: pointer;
box-sizing: border-box;
@ -366,12 +366,12 @@ export default class NavigationArea extends Vue {
}
&:hover {
border-color: #fafafb;
background-color: #fafafb;
color: #0149ff;
border-color: var(--c-grey-1);
background-color: var(--c-grey-1);
color: var(--c-blue-3);
:deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
}
@ -380,7 +380,7 @@ export default class NavigationArea extends Vue {
margin: 8px 24px;
height: 1px;
width: calc(100% - 48px);
background: #ebeef1;
background: var(--c-grey-2);
}
}
}
@ -389,7 +389,7 @@ export default class NavigationArea extends Vue {
.router-link-active,
.active {
border-color: #000;
color: #091c45;
color: var(--c-blue-6);
font-family: 'font_bold', sans-serif;
:deep(path) {
@ -397,11 +397,11 @@ export default class NavigationArea extends Vue {
}
&:hover {
color: #0149ff;
border-color: #0149ff;
color: var(--c-blue-3);
border-color: var(--c-blue-3);
:deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
}
@ -412,8 +412,8 @@ export default class NavigationArea extends Vue {
font-family: 'font_regular', sans-serif;
padding: 10px 16px;
cursor: pointer;
border-top: 1px solid #ebeef1;
border-bottom: 1px solid #ebeef1;
border-top: 1px solid var(--c-grey-2);
border-bottom: 1px solid var(--c-grey-2);
}
:deep(.dropdown-item__icon) {
@ -429,13 +429,13 @@ export default class NavigationArea extends Vue {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 22px;
color: #091c45;
color: var(--c-blue-6);
}
:deep(.dropdown-item__text__label) {
font-size: 12px;
line-height: 21px;
color: #091c45;
color: var(--c-blue-6);
}
:deep(.dropdown-item:first-of-type) {
@ -447,12 +447,12 @@ export default class NavigationArea extends Vue {
}
:deep(.dropdown-item:hover) {
background-color: #fafafb;
background-color: var(--c-grey-1);
}
:deep(.dropdown-item:hover h2),
:deep(.dropdown-item:hover p) {
color: #0149ff;
color: var(--c-blue-3);
}
@media screen and (max-width: 1280px) {

View File

@ -316,7 +316,7 @@ export default class ProjectSelection extends Vue {
max-width: calc(100% - 24px - 16px);
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-left: 24px;
white-space: nowrap;
overflow: hidden;
@ -329,15 +329,15 @@ export default class ProjectSelection extends Vue {
}
&:hover {
background-color: #fafafb;
border-color: #fafafb;
background-color: var(--c-grey-1);
border-color: var(--c-grey-1);
p {
color: #0149ff;
color: var(--c-blue-3);
}
:deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
}
@ -347,7 +347,7 @@ export default class ProjectSelection extends Vue {
min-width: 240px;
max-width: 240px;
background-color: #fff;
border: 1px solid #ebeef1;
border: 1px solid var(--c-grey-2);
box-shadow: 0 2px 16px rgb(0 0 0 / 10%);
border-radius: 8px;
z-index: 1;
@ -397,7 +397,7 @@ export default class ProjectSelection extends Vue {
background-color: #f5f6fa;
p {
color: #0149ff;
color: var(--c-blue-3);
}
}
@ -418,12 +418,12 @@ export default class ProjectSelection extends Vue {
cursor: pointer;
display: flex;
align-items: center;
border-top: 1px solid #ebeef1;
border-top: 1px solid var(--c-grey-2);
&__label {
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin-left: 24px;
}
@ -435,11 +435,11 @@ export default class ProjectSelection extends Vue {
background-color: #f5f6fa;
p {
color: #0149ff;
color: var(--c-blue-3);
}
:deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
}
@ -450,7 +450,7 @@ export default class ProjectSelection extends Vue {
border-color: #000;
p {
color: #091c45;
color: var(--c-blue-6);
font-family: 'font_bold', sans-serif;
}
@ -460,15 +460,15 @@ export default class ProjectSelection extends Vue {
}
.active:hover {
border-color: #0149ff;
border-color: var(--c-blue-3);
background-color: #f7f8fb;
p {
color: #0149ff;
color: var(--c-blue-3);
}
:deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}

View File

@ -60,7 +60,7 @@ export default class BillingNotification extends Vue {
padding: 20px;
font-family: 'font_regular', sans-serif;
font-size: 14px;
background-color: #d7e8ff;
background-color: var(--c-blue-2);
border: 1px solid #a5beff;
border-radius: 16px;
box-shadow: 0 7px 20px rgba(0 0 0 / 15%);

View File

@ -287,7 +287,7 @@ export default class GeneratePassphrase extends Vue {
cursor: pointer;
&__radio {
color: #0149ff;
color: var(--c-blue-3);
}
&__icon {
@ -297,7 +297,7 @@ export default class GeneratePassphrase extends Vue {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e6edf7;
background: var(--c-blue-1);
margin: 0 8px;
svg {
@ -333,7 +333,7 @@ export default class GeneratePassphrase extends Vue {
&__divider {
height: 1px;
width: 100%;
background: #c8d3de;
background: var(--c-grey-4);
}
}

View File

@ -108,7 +108,7 @@ export default class BucketCreationProgress extends Vue {
height: 1px;
top: 16px;
left: 100%;
background: #ebeef1;
background: var(--c-grey-2);
@media screen and (max-width: 760px) {
display: none;
@ -118,15 +118,15 @@ export default class BucketCreationProgress extends Vue {
&.active {
.bucket-creation-progress__item__outer-circle {
background: #d7e8ff;
background: var(--c-blue-2);
}
.bucket-creation-progress__item__inner-circle {
background: #0149ff;
background: var(--c-blue-3);
}
.bucket-creation-progress__item__label {
color: #0149ff;
color: var(--c-blue-3);
&.passed {
color: #14142a !important;

View File

@ -36,7 +36,7 @@ export default class BucketDetailsOverview extends Vue {
<style lang="scss" scoped>
.bucket-details-overview {
color: #56606d;
color: var(--c-grey-6);
font-family: 'font_regular', sans-serif;
font-size: 14px;
line-height: 20px;

View File

@ -182,7 +182,7 @@ export default class BucketItem extends Resizable {
flex-direction: column;
align-items: start;
transform: translateX(-100%);
background-color: #0149ff;
background-color: var(--c-blue-3);
text-align: center;
border-radius: 8px;
box-sizing: border-box;
@ -204,7 +204,7 @@ export default class BucketItem extends Resizable {
left: 10%;
border-width: 5px;
border-style: solid;
border-color: #0149ff transparent transparent;
border-color: var(--c-blue-3) transparent transparent;
transform: rotate(180deg);
@media screen and (max-width: 550px) {
@ -247,7 +247,7 @@ export default class BucketItem extends Resizable {
font-weight: 700;
font-size: 13px;
line-height: 20px;
color: #0149ff;
color: var(--c-blue-3);
}
}
}

View File

@ -100,7 +100,7 @@ export default class BucketSettingsNav extends Vue {
color: #1b2533;
cursor: pointer;
background: white;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
border-radius: 8px;
&__button {

View File

@ -503,7 +503,7 @@ export default class BucketsView extends Vue {
display: flex;
align-items: center;
justify-content: center;
background-color: #0149ff;
background-color: var(--c-blue-3);
border-radius: 8px;
cursor: pointer;

View File

@ -253,7 +253,7 @@ export default class EncryptData extends Vue {
&__msg-container {
margin: -20px auto 40px;
max-width: 620px;
background-color: #ffd78a;
background-color: var(--c-yellow-2);
display: flex;
flex-direction: column;
align-items: center;

View File

@ -40,7 +40,7 @@ export default class EncryptionBanner extends Vue {
<style scoped lang="scss">
.banner {
background: #fff;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
box-shadow: 0 7px 20px rgb(0 0 0 / 15%);
border-radius: 10px;
display: flex;

View File

@ -45,7 +45,7 @@ export default class FAQBullet extends Vue {
<style scoped lang="scss">
.bullet {
background: #fff;
border: 2px solid #d8dee3;
border: 2px solid var(--c-grey-3);
border-radius: 16px;
padding: 28px 32px;
width: calc(100% - 64px);
@ -62,7 +62,7 @@ export default class FAQBullet extends Vue {
font-size: 16px;
line-height: 32px;
letter-spacing: 0.75px;
color: #091c45;
color: var(--c-blue-6);
}
}
@ -70,7 +70,7 @@ export default class FAQBullet extends Vue {
margin-top: 12px;
font-size: 16px;
line-height: 32px;
color: #56606d;
color: var(--c-grey-6);
}
}
</style>

View File

@ -248,7 +248,7 @@ export default class AGPermissions extends Vue {
margin: 20px 0 8px;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
}
}

View File

@ -110,7 +110,7 @@ export default class APIKey extends Vue {
font-family: 'font_bold', sans-serif;
font-size: 14px;
line-height: 20px;
color: #56606d;
color: var(--c-grey-6);
margin: 20px 0 13px;
width: 100%;
}

View File

@ -79,12 +79,12 @@ export default class ProgressBar extends Vue {
&__bar {
width: 580px;
height: 16px;
background: #d8dee3;
background: var(--c-grey-3);
border-radius: 8px;
&__fill {
height: 16px;
background: #00ac26;
background: var(--c-green-5);
border-radius: 8px;
transition: width 0.2s;
}

View File

@ -162,26 +162,26 @@ export default class BandwidthChart extends BaseChart {
}
.settled-tooltip {
background-color: #a18eff;
background-color: var(--c-purple-3);
padding: 4px 10px 8px;
&__arrow {
margin: -12px 0 4px;
border-radius: 0 0 0 8px;
transform: scale(1, 0.85) translate(0, 20%) rotate(-45deg);
background-color: #a18eff;
background-color: var(--c-purple-3);
}
}
.allocated-tooltip {
background-color: #c5baff;
background-color: var(--c-purple-2);
padding: 8px 10px 0;
&__arrow {
margin-bottom: -4px;
border-radius: 8px 0 0;
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
background-color: #c5baff;
background-color: var(--c-purple-2);
}
}
</style>

View File

@ -89,14 +89,14 @@ export default class DateRangeSelection extends Vue {
justify-content: space-between;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid #d8dee3;
border: 1px solid var(--c-grey-3);
&__label {
font-family: 'font_medium', sans-serif;
font-size: 13px;
line-height: 20px;
letter-spacing: -0.02em;
color: #56606d;
color: var(--c-grey-6);
margin-left: 9px;
}
}
@ -112,14 +112,14 @@ export default class DateRangeSelection extends Vue {
}
.active {
border-color: #0149ff;
border-color: var(--c-blue-3);
h1 {
color: #0149ff;
color: var(--c-blue-3);
}
svg :deep(path) {
fill: #0149ff;
fill: var(--c-blue-3);
}
}
</style>

View File

@ -478,7 +478,7 @@ export default class NewProjectDashboard extends Vue {
&__value {
text-decoration: underline;
text-underline-position: under;
text-decoration-color: #00e366;
text-decoration-color: var(--c-green-3);
}
}
@ -552,11 +552,11 @@ export default class NewProjectDashboard extends Vue {
}
&__allocated-color {
background: #c5baff;
background: var(--c-purple-2);
}
&__settled-color {
background: #a18eff;
background: var(--c-purple-3);
}
&__allocated-label,
@ -666,7 +666,7 @@ export default class NewProjectDashboard extends Vue {
}
:deep(.info__box__message) {
background: #56606d;
background: var(--c-grey-6);
border-radius: 4px;
padding: 8px;
position: relative;
@ -674,7 +674,7 @@ export default class NewProjectDashboard extends Vue {
}
:deep(.info__box__arrow) {
background: #56606d;
background: var(--c-grey-6);
width: 10px;
height: 10px;
margin: 0 0 -2px 40px;

View File

@ -91,7 +91,7 @@ export default class StorageChart extends BaseChart {
display: flex;
flex-direction: column;
align-items: center;
background-color: #003dc1;
background-color: var(--c-blue-4);
&__value {
font-size: 14px;
@ -111,7 +111,7 @@ export default class StorageChart extends BaseChart {
border-radius: 8px 0 0;
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
margin-bottom: -4px;
background-color: #003dc1;
background-color: var(--c-blue-4);
}
}
</style>

View File

@ -439,8 +439,8 @@ function formatObjectPermissions(scope: string): string {
}
&__permissions-area {
background-color: #fafafb;
border: 1px solid #d8dee3;
background-color: var(--c-grey-1);
border: 1px solid var(--c-grey-3);
padding: 10px 9px 10px 24px;
border-radius: 8px;
@ -451,7 +451,7 @@ function formatObjectPermissions(scope: string): string {
&__container {
padding: 24px 0;
border-bottom: 1px solid #d8dee3;
border-bottom: 1px solid var(--c-grey-3);
p {
line-height: 24px;

View File

@ -606,7 +606,7 @@ export default class DashboardArea extends Vue {
background-color: #fec;
font-family: 'font_regular', sans-serif;
font-size: 14px;
border: 1px solid #ffd78a;
border: 1px solid var(--c-yellow-2);
border-radius: 10px;
box-shadow: 0 7px 20px rgba(0 0 0 / 15%);

View File

@ -753,7 +753,7 @@ export default class RegisterArea extends Vue {
}
.logo-divider {
border-left: 1px solid #b3c5ff;
border-left: 1px solid var(--c-light-blue-2);
height: 40px;
margin: 0 10px;
}
@ -1011,7 +1011,7 @@ export default class RegisterArea extends Vue {
right: 12px;
transform: translateX(50%);
visibility: hidden;
background-color: #56606d;
background-color: var(--c-grey-6);
text-align: center;
border-radius: 4px;
font-family: 'font-medium', sans-serif;
@ -1030,7 +1030,7 @@ export default class RegisterArea extends Vue {
left: 50%;
border-width: 5px;
border-style: solid;
border-color: #56606d transparent transparent;
border-color: var(--c-grey-6) transparent transparent;
transform: rotate(180deg);
}
}

View File

@ -6,43 +6,52 @@
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
<meta name="viewport" content="width=device-width" /><style type="text/css">
@media only screen and (min-width: 620px) {
.wrapper {
min-width: 600px !important
min-width: 600px !important;
}
.wrapper h1 {}
.wrapper h1 {
font-size: 64px !important;
line-height: 63px !important
line-height: 63px !important;
}
.wrapper h2 {}
.wrapper h2 {
font-size: 30px !important;
line-height: 38px !important
line-height: 38px !important;
}
.wrapper h3 {}
.wrapper h3 {
font-size: 22px !important;
line-height: 31px !important
line-height: 31px !important;
}
.wrapper .size-10 {
font-size: 10px !important;
line-height: 18px !important
line-height: 18px !important;
}
.wrapper .size-12 {
font-size: 12px !important;
line-height: 19px !important
line-height: 19px !important;
}
.wrapper .size-16 {
font-size: 16px !important;
line-height: 24px !important
line-height: 24px !important;
}
.wrapper .size-20 {
font-size: 20px !important;
line-height: 28px !important
line-height: 28px !important;
}
.wrapper .size-40 {
font-size: 40px !important;
line-height: 47px !important
line-height: 47px !important;
}
}
</style>
@ -51,23 +60,28 @@
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
* {
line-height: inherit;
}
[x-apple-data-detectors],
[href^="tel"],
[href^="sms"] {
[href^='tel'],
[href^='sms'] {
color: inherit !important;
text-decoration: none !important;
}
.wrapper .footer__share-button a:hover,
.wrapper .footer__share-button a:focus {
color: #ffffff !important;
}
.btn a:hover,
.btn a:focus,
.footer__share-button a:hover,
@ -81,25 +95,31 @@
.column {
transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out;
}
.preheader td {
padding-bottom: 8px;
}
.layout {
max-width: 400px !important;
-fallback-width: 95% !important;
width: calc(100% - 20px) !important;
}
.column {
max-width: 400px !important;
width: 100% !important;
}
.ie {
width: 100%;
}
[owa] .column div,
[owa] .column button {
display: block !important;
}
.ie .column,
[owa] .column,
.ie {
@ -107,6 +127,7 @@
float: none !important;
vertical-align: top;
}
.ie .layout,
[owa] .layout,
.ie .one-col .column,
@ -114,36 +135,43 @@
max-width: 600px !important;
width: 600px !important;
}
.ie .two-col .column,
[owa] .two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.ie .three-col .column,
[owa] .three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.ie .two-col.has-gutter .column,
[owa] .two-col.x_has-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.ie .three-col.has-gutter .column,
[owa] .three-col.x_has-gutter .column {
max-width: 188px !important;
width: 188px !important;
}
.ie .has-gutter .wide,
[owa] .has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.ie .two-col.has-gutter.has-border .column,
[owa] .two-col.x_has-gutter.x_has-border .column {
max-width: 292px !important;
width: 292px !important;
}
.ie .three-col.has-gutter.has-border .column,
[owa] .three-col.x_has-gutter.x_has-border .column,
.ie .has-gutter.has-border .narrow,
@ -151,62 +179,75 @@
max-width: 190px !important;
width: 190px !important;
}
.ie .has-gutter.has-border .wide,
[owa] .has-gutter.x_has-border .wide {
max-width: 396px !important;
width: 396px !important;
}
.ie .fixed-width .layout__inner {
border-left: 0 none white !important;
border-right: 0 none white !important;
}
.layout-fixed-width,
.mso .layout-full-width {
background-color: #ffffff;
}
@media only screen and (min-width: 620px) {
.column {
display: table-cell;
Float: none !important;
vertical-align: top;
}
.layout,
.one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.three-col .column,
.column.narrow {
max-width: 200px !important;
width: 200px !important;
}
.column.wide {
width: 400px !important;
}
.two-col.has-gutter .column,
.two-col.ecxhas-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.three-col.has-gutter .column,
.three-col.ecxhas-gutter .column,
.has-gutter .narrow {
max-width: 188px !important;
width: 188px !important;
}
.has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.two-col.has-gutter.has-border .column,
.two-col.ecxhas-gutter.ecxhas-border .column {
max-width: 292px !important;
width: 292px !important;
}
.three-col.has-gutter.has-border .column,
.three-col.ecxhas-gutter.ecxhas-border .column,
.has-gutter.has-border .narrow,
@ -214,6 +255,7 @@
max-width: 190px !important;
width: 190px !important;
}
.has-gutter.has-border .wide,
.has-gutter.ecxhas-border .wide {
max-width: 396px !important;
@ -221,66 +263,81 @@
}
}
@media (max-width: 321px) {
.fixed-width.has-border .layout__inner {
border-width: 1px 0 !important;
}
.layout,
.column {
min-width: 320px !important;
width: 320px !important;
}
}
.mso div {
border: 0 none white !important;
}
.mso .w560 .divider {
Margin-left: 260px !important;
Margin-right: 260px !important;
}
.mso .w360 .divider {
Margin-left: 160px !important;
Margin-right: 160px !important;
}
.mso .w260 .divider {
Margin-left: 110px !important;
Margin-right: 110px !important;
}
.mso .w160 .divider {
Margin-left: 60px !important;
Margin-right: 60px !important;
}
.mso .w354 .divider {
Margin-left: 157px !important;
Margin-right: 157px !important;
}
.mso .w250 .divider {
Margin-left: 105px !important;
Margin-right: 105px !important;
}
.mso .w148 .divider {
Margin-left: 54px !important;
Margin-right: 54px !important;
}
.mso .size-10,
.ie .size-10 {
font-size: 10px !important;
line-height: 18px !important;
}
.mso .size-12,
.ie .size-12 {
font-size: 12px !important;
line-height: 19px !important;
}
.mso .size-16,
.ie .size-16 {
font-size: 16px !important;
line-height: 24px !important;
}
.mso .size-20,
.ie .size-20 {
font-size: 20px !important;
line-height: 28px !important;
}
.mso .size-40,
.ie .size-40 {
font-size: 40px !important;
@ -296,12 +353,12 @@
<!--<![endif]-->
<style type="text/css">
body {
background-color: #fff
background-color: #fff;
}
.logo a:hover,
.logo a:focus {
color: #859bb1 !important
color: #859bb1 !important;
}
.mso h1,
@ -310,7 +367,7 @@
.mso h1,
.ie h1 {
font-size: 64px !important;
line-height: 63px !important
line-height: 63px !important;
}
.mso h2,
@ -319,7 +376,7 @@
.mso h2,
.ie h2 {
font-size: 30px !important;
line-height: 38px !important
line-height: 38px !important;
}
.mso h3,
@ -328,13 +385,13 @@
.mso h3,
.ie h3 {
font-size: 22px !important;
line-height: 31px !important
line-height: 31px !important;
}
.mso .footer__share-button p {}
.mso .footer__share-button p {
font-family: sans-serif
font-family: sans-serif;
}
</style>
<meta name="robots" content="noindex,nofollow" />
@ -365,12 +422,12 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h1 class="size-40"
style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: normal;
color: #000;font-size: 32px;line-height: 40px;
font-family: montserrat,dejavu sans,verdana,sans-serif;" lang="x-size-40">
font-family: 'montserrat','dejavu sans','verdana',sans-serif;" lang="x-size-40">
<span class="font-montserrat">
<strong>Are you trying to sign in?</strong>
</span>
@ -395,11 +452,11 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-20"
style="Margin-top: 5px;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 17px;
line-height: 26px;" lang="x-size-20">
<span class="font-montserrat">There was an attempt to create an account with this
email address on the {{ .SatelliteName }} Storj DCS satellite, but an account
@ -427,13 +484,13 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div class="btn btn--flat btn--large" style="text-align: left;">
<a style="border-radius: 8px;display: inline-block;font-size: 14px;font-weight: bold;
line-height: 24px;padding: 12px 24px;text-align: center;
text-decoration: none !important;transition: opacity 0.1s ease-in;
color: #ffffff !important;background-color: #0149FF;
font-family: Montserrat, DejaVu Sans, Verdana, sans-serif;"
font-family: 'Montserrat', 'DejaVu Sans', 'Verdana', sans-serif;"
href="{{ .SignInLink }}">Sign In
</a>
<!--[if mso]>
@ -470,11 +527,11 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-20"
style="Margin-top: 5px;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 17px;
line-height: 26px;" lang="x-size-20">
<span class="font-montserrat">If this wasn't you, we recommend <a href="{{ .ResetPasswordLink }}" target="_blank" rel="noopener noreferrer">resetting your password</a>.
If this activity looks suspicious to you, notify our <a href="https://supportdcs.storj.io/hc/en-us" target="_blank" rel="noopener noreferrer">Support team</a>.
@ -527,9 +584,9 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-12" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;line-height: 19px;" lang="x-size-12">
<p class="size-12" style="Margin-top: 0;Margin-bottom: 0;font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">Please do not reply to this email.<br />
1450 W. Peachtree St. NW #200, PMB 75268, Atlanta, GA 30309-2955, United States
</span>

View File

@ -6,43 +6,52 @@
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
<meta name="viewport" content="width=device-width" /><style type="text/css">
@media only screen and (min-width: 620px) {
.wrapper {
min-width: 600px !important
min-width: 600px !important;
}
.wrapper h1 {}
.wrapper h1 {
font-size: 64px !important;
line-height: 63px !important
line-height: 63px !important;
}
.wrapper h2 {}
.wrapper h2 {
font-size: 30px !important;
line-height: 38px !important
line-height: 38px !important;
}
.wrapper h3 {}
.wrapper h3 {
font-size: 22px !important;
line-height: 31px !important
line-height: 31px !important;
}
.wrapper .size-10 {
font-size: 10px !important;
line-height: 18px !important
line-height: 18px !important;
}
.wrapper .size-12 {
font-size: 12px !important;
line-height: 19px !important
line-height: 19px !important;
}
.wrapper .size-16 {
font-size: 16px !important;
line-height: 24px !important
line-height: 24px !important;
}
.wrapper .size-20 {
font-size: 20px !important;
line-height: 28px !important
line-height: 28px !important;
}
.wrapper .size-40 {
font-size: 40px !important;
line-height: 47px !important
line-height: 47px !important;
}
}
</style>
@ -51,23 +60,28 @@
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
* {
line-height: inherit;
}
[x-apple-data-detectors],
[href^="tel"],
[href^="sms"] {
[href^='tel'],
[href^='sms'] {
color: inherit !important;
text-decoration: none !important;
}
.wrapper .footer__share-button a:hover,
.wrapper .footer__share-button a:focus {
color: #ffffff !important;
}
.btn a:hover,
.btn a:focus,
.footer__share-button a:hover,
@ -81,25 +95,31 @@
.column {
transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out;
}
.preheader td {
padding-bottom: 8px;
}
.layout {
max-width: 400px !important;
-fallback-width: 95% !important;
width: calc(100% - 20px) !important;
}
.column {
max-width: 400px !important;
width: 100% !important;
}
.ie {
width: 100%;
}
[owa] .column div,
[owa] .column button {
display: block !important;
}
.ie .column,
[owa] .column,
.ie {
@ -107,6 +127,7 @@
float: none !important;
vertical-align: top;
}
.ie .layout,
[owa] .layout,
.ie .one-col .column,
@ -114,36 +135,43 @@
max-width: 600px !important;
width: 600px !important;
}
.ie .two-col .column,
[owa] .two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.ie .three-col .column,
[owa] .three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.ie .two-col.has-gutter .column,
[owa] .two-col.x_has-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.ie .three-col.has-gutter .column,
[owa] .three-col.x_has-gutter .column {
max-width: 188px !important;
width: 188px !important;
}
.ie .has-gutter .wide,
[owa] .has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.ie .two-col.has-gutter.has-border .column,
[owa] .two-col.x_has-gutter.x_has-border .column {
max-width: 292px !important;
width: 292px !important;
}
.ie .three-col.has-gutter.has-border .column,
[owa] .three-col.x_has-gutter.x_has-border .column,
.ie .has-gutter.has-border .narrow,
@ -151,62 +179,75 @@
max-width: 190px !important;
width: 190px !important;
}
.ie .has-gutter.has-border .wide,
[owa] .has-gutter.x_has-border .wide {
max-width: 396px !important;
width: 396px !important;
}
.ie .fixed-width .layout__inner {
border-left: 0 none white !important;
border-right: 0 none white !important;
}
.layout-fixed-width,
.mso .layout-full-width {
background-color: #ffffff;
}
@media only screen and (min-width: 620px) {
.column {
display: table-cell;
Float: none !important;
vertical-align: top;
}
.layout,
.one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.three-col .column,
.column.narrow {
max-width: 200px !important;
width: 200px !important;
}
.column.wide {
width: 400px !important;
}
.two-col.has-gutter .column,
.two-col.ecxhas-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.three-col.has-gutter .column,
.three-col.ecxhas-gutter .column,
.has-gutter .narrow {
max-width: 188px !important;
width: 188px !important;
}
.has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.two-col.has-gutter.has-border .column,
.two-col.ecxhas-gutter.ecxhas-border .column {
max-width: 292px !important;
width: 292px !important;
}
.three-col.has-gutter.has-border .column,
.three-col.ecxhas-gutter.ecxhas-border .column,
.has-gutter.has-border .narrow,
@ -214,6 +255,7 @@
max-width: 190px !important;
width: 190px !important;
}
.has-gutter.has-border .wide,
.has-gutter.ecxhas-border .wide {
max-width: 396px !important;
@ -221,66 +263,81 @@
}
}
@media (max-width: 321px) {
.fixed-width.has-border .layout__inner {
border-width: 1px 0 !important;
}
.layout,
.column {
min-width: 320px !important;
width: 320px !important;
}
}
.mso div {
border: 0 none white !important;
}
.mso .w560 .divider {
Margin-left: 260px !important;
Margin-right: 260px !important;
}
.mso .w360 .divider {
Margin-left: 160px !important;
Margin-right: 160px !important;
}
.mso .w260 .divider {
Margin-left: 110px !important;
Margin-right: 110px !important;
}
.mso .w160 .divider {
Margin-left: 60px !important;
Margin-right: 60px !important;
}
.mso .w354 .divider {
Margin-left: 157px !important;
Margin-right: 157px !important;
}
.mso .w250 .divider {
Margin-left: 105px !important;
Margin-right: 105px !important;
}
.mso .w148 .divider {
Margin-left: 54px !important;
Margin-right: 54px !important;
}
.mso .size-10,
.ie .size-10 {
font-size: 10px !important;
line-height: 18px !important;
}
.mso .size-12,
.ie .size-12 {
font-size: 12px !important;
line-height: 19px !important;
}
.mso .size-16,
.ie .size-16 {
font-size: 16px !important;
line-height: 24px !important;
}
.mso .size-20,
.ie .size-20 {
font-size: 20px !important;
line-height: 28px !important;
}
.mso .size-40,
.ie .size-40 {
font-size: 40px !important;
@ -296,12 +353,12 @@
<!--<![endif]-->
<style type="text/css">
body {
background-color: #fff
background-color: #fff;
}
.logo a:hover,
.logo a:focus {
color: #859bb1 !important
color: #859bb1 !important;
}
.mso h1,
@ -310,7 +367,7 @@
.mso h1,
.ie h1 {
font-size: 64px !important;
line-height: 63px !important
line-height: 63px !important;
}
.mso h2,
@ -319,7 +376,7 @@
.mso h2,
.ie h2 {
font-size: 30px !important;
line-height: 38px !important
line-height: 38px !important;
}
.mso h3,
@ -328,13 +385,13 @@
.mso h3,
.ie h3 {
font-size: 22px !important;
line-height: 31px !important
line-height: 31px !important;
}
.mso .footer__share-button p {}
.mso .footer__share-button p {
font-family: sans-serif
font-family: sans-serif;
}
</style>
<meta name="robots" content="noindex,nofollow" />
@ -365,12 +422,12 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h1 class="size-40"
style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: normal;
color: #000;font-size: 32px;line-height: 40px;
font-family: montserrat,dejavu sans,verdana,sans-serif;" lang="x-size-40">
font-family: 'montserrat','dejavu sans','verdana',sans-serif;" lang="x-size-40">
<span class="font-montserrat">
<strong>You have requested to reset your password</strong>
</span>
@ -395,17 +452,17 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-20"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 17px;
line-height: 26px;" lang="x-size-20">
<span class="font-montserrat">Hi {{ .UserName }},</span>
</p>
<p class="size-20"
style="Margin-top: 5px;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 17px;
line-height: 26px;" lang="x-size-20">
<span class="font-montserrat">We received a request to reset your Satellite
Account password. To reset your password, click the following link and
@ -432,13 +489,13 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div class="btn btn--flat btn--large" style="text-align: left;">
<a style="border-radius: 4px;display: inline-block;font-size: 14px;font-weight: bold;
line-height: 24px;padding: 12px 24px;text-align: center;
text-decoration: none !important;transition: opacity 0.1s ease-in;
color: #ffffff !important;background-color: #2683ff;
font-family: Montserrat, DejaVu Sans, Verdana, sans-serif;"
font-family: 'Montserrat', 'DejaVu Sans', 'Verdana', sans-serif;"
href="{{ .ResetLink }}">Reset Password
</a>
<!--[if mso]>
@ -475,26 +532,26 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-16"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;
font-size: 16px;line-height: 24px;" lang="x-size-16">
<span class="font-montserrat">Didnt request this change?<br/></span>
</p>
<p class="size-16"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 16px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 16px;
line-height: 24px;" lang="x-size-16">
<span class="font-montserrat">If you didnt request a new password
<a href="mailto:support@storj.io"
style="color: #2683ff; text-decoration: none; font-weight: bold">let us know
style="color: #2683ff; text-decoration: none; font-weight: bold;">let us know
</a><br />
</span>
</p>
<p style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 24px;" lang="x-size-16">
<span class="font-montserrat">Please Note: After clicking on «Let us Know» we
will automatically deactivate this reset password link and redirect you to
@ -545,9 +602,9 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-12" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;line-height: 19px;" lang="x-size-12">
<p class="size-12" style="Margin-top: 0;Margin-bottom: 0;font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">Please do not reply to this email.<br />
1450 W. Peachtree St. NW #200, PMB 75268, Atlanta, GA 30309-2955, United States
</span>
@ -572,12 +629,12 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="https://supportdcs.storj.io/hc/en-us" style="text-decoration: none; color: #66686C;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Help</strong>
@ -594,7 +651,7 @@
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .ContactInfoURL }}" style="text-decoration: none; color: #66686C;">
<p class="size-12" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;line-height: 19px;" lang="x-size-12">
<p class="size-12" style="Margin-top: 0;Margin-bottom: 0;font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Contact</strong>
</span>
@ -608,12 +665,12 @@
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;Float: left;max-width: 150px;min-width: 100px;
width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="https://tardigrade.io/terms-of-service/" style="text-decoration: none; color: #66686C;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Terms of Service</strong><br />
@ -639,11 +696,11 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;
font-family: sans-serif;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 0 20px 12px 20px">
<div style="margin: 0 20px 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-10"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 10px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 10px;
line-height: 18px;" lang="x-size-10">
<span class="font-montserrat">Storj Labs Inc 2019.<br /></span>
</p>

View File

@ -8,39 +8,47 @@
<meta name="viewport" content="width=device-width" />
<style type="text/css">
@media only screen and (min-width: 620px) {
.wrapper {
min-width: 600px !important
min-width: 600px !important;
}
.wrapper h1 {}
.wrapper h1 {
font-size: 64px !important;
line-height: 63px !important
line-height: 63px !important;
}
.wrapper h2 {}
.wrapper h2 {
font-size: 30px !important;
line-height: 38px !important
line-height: 38px !important;
}
.wrapper h3 {}
.wrapper h3 {
font-size: 22px !important;
line-height: 31px !important
line-height: 31px !important;
}
.wrapper .size-10 {
font-size: 10px !important;
line-height: 18px !important
line-height: 18px !important;
}
.wrapper .size-12 {
font-size: 12px !important;
line-height: 19px !important
line-height: 19px !important;
}
.wrapper .size-20 {
font-size: 20px !important;
line-height: 28px !important
line-height: 28px !important;
}
.wrapper .size-40 {
font-size: 40px !important;
line-height: 47px !important
line-height: 47px !important;
}
}
</style>
@ -49,23 +57,28 @@
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
* {
line-height: inherit;
}
[x-apple-data-detectors],
[href^="tel"],
[href^="sms"] {
[href^='tel'],
[href^='sms'] {
color: inherit !important;
text-decoration: none !important;
}
.wrapper .footer__share-button a:hover,
.wrapper .footer__share-button a:focus {
color: #ffffff !important;
}
.btn a:hover,
.btn a:focus,
.footer__share-button a:hover,
@ -74,35 +87,43 @@
.email-footer__links a:focus {
opacity: 0.8;
}
.layout,
.column {
transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out;
}
.preheader td {
padding-bottom: 8px;
}
.layout {
max-width: 400px !important;
-fallback-width: 95% !important;
width: calc(100% - 20px) !important;
}
.column {
max-width: 400px !important;
width: 100% !important;
}
.fixed-width.has-border .layout__inner {
box-sizing: border-box;
}
[owa] .column div,
[owa] .column button {
display: block !important;
}
.ie .column,
[owa] .column {
display: table-cell;
float: none !important;
vertical-align: top;
}
.ie .layout,
[owa] .layout,
.ie .one-col .column,
@ -110,21 +131,25 @@
max-width: 600px !important;
width: 600px !important;
}
.ie .two-col .column,
[owa] .two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.ie .three-col .column,
[owa] .three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.ie .two-col.has-gutter .column,
[owa] .two-col.x_has-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.ie .three-col.has-gutter .column,
[owa] .three-col.x_has-gutter .column,
.ie .has-gutter .narrow,
@ -132,16 +157,19 @@
max-width: 188px !important;
width: 188px !important;
}
.ie .has-gutter .wide,
[owa] .has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.ie .two-col.has-gutter.has-border .column,
[owa] .two-col.x_has-gutter.x_has-border .column {
max-width: 292px !important;
width: 292px !important;
}
.ie .three-col.has-gutter.has-border .column,
[owa] .three-col.x_has-gutter.x_has-border .column,
.ie .has-gutter.has-border .narrow,
@ -149,52 +177,63 @@
max-width: 190px !important;
width: 190px !important;
}
.ie .has-gutter.has-border .wide,
[owa] .has-gutter.x_has-border .wide {
max-width: 396px !important;
width: 396px !important;
}
.ie .fixed-width .layout__inner {
border-left: 0 none white !important;
border-right: 0 none white !important;
}
.layout-fixed-width {
background-color: #ffffff;
}
@media only screen and (min-width: 620px) {
.column {
display: table-cell;
Float: none !important;
vertical-align: top;
}
.layout,
.one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.two-col.has-gutter .column,
.two-col.ecxhas-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.three-col.has-gutter .column,
.three-col.ecxhas-gutter .column {
max-width: 188px !important;
width: 188px !important;
}
.two-col.has-gutter.has-border .column,
.two-col.ecxhas-gutter.ecxhas-border .column {
max-width: 292px !important;
width: 292px !important;
}
.three-col.has-gutter.has-border .column,
.three-col.ecxhas-gutter.ecxhas-border .column,
.has-gutter.has-border .narrow,
@ -202,6 +241,7 @@
max-width: 190px !important;
width: 190px !important;
}
.has-gutter.has-border .wide,
.has-gutter.ecxhas-border .wide {
max-width: 396px !important;
@ -209,61 +249,75 @@
}
}
@media (max-width: 321px) {
.fixed-width.has-border .layout__inner {
border-width: 1px 0 !important;
}
.layout,
.column {
min-width: 320px !important;
width: 320px !important;
}
}
.mso div {
border: 0 none white !important;
}
.mso .w560 .divider {
Margin-left: 260px !important;
Margin-right: 260px !important;
}
.mso .w360 .divider {
Margin-left: 160px !important;
Margin-right: 160px !important;
}
.mso .w260 .divider {
Margin-left: 110px !important;
Margin-right: 110px !important;
}
.mso .w160 .divider {
Margin-left: 60px !important;
Margin-right: 60px !important;
}
.mso .w354 .divider {
Margin-left: 157px !important;
Margin-right: 157px !important;
}
.mso .w250 .divider {
Margin-left: 105px !important;
Margin-right: 105px !important;
}
.mso .w148 .divider {
Margin-left: 54px !important;
Margin-right: 54px !important;
}
.mso .size-10,
.ie .size-10 {
font-size: 10px !important;
line-height: 18px !important;
}
.mso .size-12,
.ie .size-12 {
font-size: 12px !important;
line-height: 19px !important;
}
.mso .size-20,
.ie .size-20 {
font-size: 20px !important;
line-height: 28px !important;
}
.mso .size-40,
.ie .size-40 {
font-size: 40px !important;
@ -278,34 +332,34 @@
<!--<![endif]-->
<style type="text/css">
body {
background-color: #fff
background-color: #fff;
}
.logo a:hover,
.logo a:focus {
color: #859bb1 !important
color: #859bb1 !important;
}
.mso h1,
.ie h1 {
font-size: 64px !important;
line-height: 63px !important
line-height: 63px !important;
}
.mso h2,
.ie h2 {
font-size: 30px !important;
line-height: 38px !important
line-height: 38px !important;
}
.mso h3,
.ie h3 {
font-size: 22px !important;
line-height: 31px !important
line-height: 31px !important;
}
.mso .footer__share-button p {
font-family: sans-serif
font-family: sans-serif;
}
</style>
<meta name="robots" content="noindex,nofollow" />
@ -336,12 +390,12 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h1 class="size-40"
style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: normal;
color: #000;font-size: 32px;line-height: 40px;
font-family: montserrat,dejavu sans,verdana,sans-serif;" lang="x-size-40">
font-family: 'montserrat','dejavu sans','verdana',sans-serif;" lang="x-size-40">
<span class="font-montserrat">
<strong>Hi {{ .UserName }},</strong>
</span>
@ -365,17 +419,17 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-20" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20">
<p class="size-20" style="Margin-top: 0;Margin-bottom: 0;font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20">
<span class="font-montserrat">You were invited to the
<a href="{{ .Origin }}" style="color: #2683ff; text-decoration: none; font-weight: bold">{{ .ProjectName }}</a>
<a href="{{ .Origin }}" style="color: #2683ff; text-decoration: none; font-weight: bold;">{{ .ProjectName }}</a>
on Storj
</span>
</p>
<p class="size-20"
style="Margin-top: 5px;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;"
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 17px;line-height: 26px;"
lang="x-size-20">
<span class="font-montserrat"><br/>Log in and interact with the project!</span>
</p>
@ -398,13 +452,13 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div class="btn btn--flat btn--large" style="text-align: left;">
<a style="border-radius: 4px;display: inline-block;font-size: 14px;font-weight: bold;
line-height: 24px;padding: 12px 50px;text-align: center;
text-decoration: none !important;transition: opacity 0.1s ease-in;
color: #ffffff !important;background-color: #2683ff;
font-family: Montserrat, DejaVu Sans, Verdana, sans-serif;" href="{{ .SignInLink }}"
font-family: 'Montserrat', 'DejaVu Sans', 'Verdana', sans-serif;" href="{{ .SignInLink }}"
target="_blank">Sign In
</a>
<!--[if mso]>
@ -461,11 +515,11 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="margin: 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">Please do not reply to this email.</span>
</p>
@ -488,13 +542,13 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="https://supportdcs.storj.io/"
style="text-decoration: none; color: #66686C;" target="_blank">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Support</strong>
@ -508,12 +562,12 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .ContactInfoURL }}" style="text-decoration: none; color: #66686C;" target="_blank">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Contact Info</strong>
@ -527,12 +581,12 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
Float: left;max-width: 150px;min-width: 100px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="margin: 0 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .TermsAndConditionsURL }}" target="_blank" style="text-decoration: none; color: #66686C;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Terms &amp; Conditions</strong><br/>
@ -557,11 +611,11 @@
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 0 20px 12px 20px">
<div style="margin: 0 20px 12px 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-10"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 10px;line-height: 18px;"
font-family: 'montserrat','dejavu sans','verdana',sans-serif;font-size: 10px;line-height: 18px;"
lang="x-size-10">
<span class="font-montserrat">Storj Labs Inc 2019.<br/></span>
</p>

View File

@ -142,7 +142,7 @@
<div style="background-color: #FFFFFF;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid #000000; border-left: 0px solid #000000;
border-bottom:0px solid #000000; border-right:0px solid #000000; padding: 10px">
border-bottom: 0px solid #000000; border-right: 0px solid #000000; padding: 10px;">
<!--<![endif]-->
<div>
<h1 style="font-family: sans-serif; text-align: left;
@ -170,7 +170,7 @@
line-height: 24px;padding: 12px 24px; text-align: center;
text-decoration: none !important; transition: opacity 0.1s ease-in;
color: #ffffff !important; background-color: #2683ff;
font-family: Montserrat, DejaVu Sans, Verdana, sans-serif;"
font-family: 'Montserrat', 'DejaVu Sans', 'Verdana', sans-serif;"
>
Reset Password
</a>
@ -213,12 +213,12 @@
<tr><td style="padding:20px 0 5px 0">
<![endif]-->
<div class="col num12" style="min-width: 320px; max-width: 520px; display: table-cell;
vertical-align: top; width: 520px;padding: 10px">
vertical-align: top; width: 520px;padding: 10px;">
<div style="width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent;
border-bottom: 0px solid transparent; border-right: 0px solid transparent;
padding:0 0 5px 0">
padding: 0 0 5px 0;">
<!--<![endif]-->
<table class="divider" border="0" cellpadding="0" cellspacing="0" width="100%"
style="table-layout: fixed; vertical-align: top; border-spacing: 0;

View File

@ -142,7 +142,7 @@
<div style="background-color: #FFFFFF;width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid #000000; border-left: 0px solid #000000;
border-bottom:0px solid #000000; border-right:0px solid #000000; padding: 10px">
border-bottom: 0px solid #000000; border-right: 0px solid #000000; padding: 10px;">
<!--<![endif]-->
<div>
<h1 style="font-family: sans-serif; text-align: left;
@ -209,12 +209,12 @@
<tr><td style="padding:20px 0 5px 0">
<![endif]-->
<div class="col num12" style="min-width: 320px; max-width: 520px; display: table-cell;
vertical-align: top; width: 520px;padding: 10px">
vertical-align: top; width: 520px;padding: 10px;">
<div style="width: 100% !important;">
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent;
border-bottom: 0px solid transparent; border-right: 0px solid transparent;
padding:0 0 5px 0">
padding: 0 0 5px 0;">
<!--<![endif]-->
<table class="divider" border="0" cellpadding="0" cellspacing="0" width="100%"
style="table-layout: fixed; vertical-align: top; border-spacing: 0;

View File

@ -141,7 +141,7 @@
border-bottom: 0px solid #000000; border-right: 0px solid #000000; padding: 10px 15px 0 15px;">
<!--<![endif]-->
<div>
<h1 style="font-family: Poppins, roboto, sans-serif; text-align: center;
<h1 style="font-family: 'Poppins', 'roboto', sans-serif; text-align: center;
color: #000; font-weight: bold; font-size: 38px !important;">
Youre Almost There
</h1>
@ -149,9 +149,9 @@
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td style="padding: 10px 10px 0 10px;font-family: Tahoma, Verdana, sans-serif">
<![endif]-->
<div style="color:#000000;font-family:'Roboto', Tahoma, Verdana, Segoe, sans-serif;
<div style="color: #000000;font-family: 'Roboto', 'Tahoma', 'Verdana', 'Segoe', sans-serif;
line-height: 1.2;padding: 10px 10px 0 10px;">
<div style="font-family: 'Roboto', Tahoma, Verdana, Segoe, sans-serif;
<div style="font-family: 'Roboto', 'Tahoma', 'Verdana', 'Segoe', sans-serif;
line-height: 1.2; font-size: 12px; color: #000000; mso-line-height-alt: 14px;">
<p style="font-size: 14px; line-height: 1.2; mso-line-height-alt: 17px; margin: 0;">
<span style="font-size: 18px;">Hi {{ .UserName }},</span>
@ -166,7 +166,7 @@
</p>
<p style="font-size: 12px; line-height: 1.2; mso-line-height-alt: 14px; margin: 20px 0;">
<span>
<a data-simulate style="font-family: 'Roboto', Tahoma, Verdana, Segoe, sans-serif;
<a data-simulate style="font-family: 'Roboto', 'Tahoma', 'Verdana', 'Segoe', sans-serif;
font-weight: bold; font-size: 16px; color: #ffffff; background-color: #2683FF;
padding: 12px 24px; border: none; border-radius: 4px; text-decoration: none;"
href="{{ .ActivationLink }}">
@ -218,10 +218,10 @@
<!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent;
border-bottom: 0px solid transparent; border-right: 0px solid transparent;
padding:20px 0 5px 0">
padding: 20px 0 5px 0;">
<!--<![endif]-->
<div style="font-size: 16px;text-align: center;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif">
font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;">
<ul class="social-media" style="padding-top: 40px; list-style-type: none;
display: flex; padding-left: 10px;">
<li style="width: auto; margin-right: 7px;" class="social-icon twitter">
@ -269,7 +269,7 @@
</tbody>
</table>
<div style="font-size: 16px;text-align: center;
font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif">
font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;">
<div class="footer" style="padding: 40px 20px; text-align: left; color: gray;
font-size: 14px;">
<ul style="list-style-type: none; padding-left: 0;">

View File

@ -5,7 +5,7 @@
<g filter="url(#filter0_d_11080_68109)">
<rect x="-34" y="-28" width="348" height="203" rx="10" fill="white"/>
</g>
<mask id="mask0_11080_68109" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-34" y="-28" width="348" height="179">
<mask id="mask0_11080_68109" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="-34" y="-28" width="348" height="179">
<rect x="-34" y="-28" width="348" height="179" rx="10" fill="white"/>
</mask>
<g mask="url(#mask0_11080_68109)">

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -1,6 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.35119 6.92862C5.11284 5.9759 5.9759 5.11284 6.92862 5.35119L12.2567 6.68412C12.8864 6.84168 13.5359 6.51073 13.7787 5.90863L15.832 0.814678C16.1992 -0.0961837 17.4047 -0.287119 18.0354 0.465701L21.5624 4.67581C21.9793 5.17344 22.6993 5.28748 23.2495 4.94302L27.9049 2.02887C28.7373 1.50779 29.8248 2.06191 29.8926 3.04165L30.2713 8.52081C30.3161 9.16845 30.8316 9.6839 31.4792 9.72867L36.9584 10.1074C37.9381 10.1752 38.4922 11.2627 37.9711 12.0951L35.057 16.7505C34.7125 17.3007 34.8266 18.0207 35.3242 18.4376L39.5343 21.9646C40.2871 22.5953 40.0962 23.8008 39.1853 24.168L34.0914 26.2213C33.4893 26.4641 33.1583 27.1136 33.3159 27.7433L34.6488 33.0714C34.8872 34.0241 34.0241 34.8872 33.0714 34.6488L27.7433 33.3159C27.1136 33.1583 26.4641 33.4893 26.2213 34.0914L24.168 39.1853C23.8008 40.0962 22.5953 40.2871 21.9646 39.5343L18.4376 35.3242C18.0207 34.8266 17.3007 34.7125 16.7505 35.057L12.0951 37.9711C11.2627 38.4922 10.1752 37.9381 10.1074 36.9584L9.72867 31.4792C9.68391 30.8316 9.16845 30.3161 8.52081 30.2713L3.04165 29.8926C2.06191 29.8248 1.50779 28.7373 2.02888 27.9049L4.94302 23.2495C5.28748 22.6993 5.17344 21.9793 4.67581 21.5624L0.4657 18.0354C-0.287119 17.4047 -0.0961822 16.1992 0.814679 15.832L5.90863 13.7787C6.51073 13.5359 6.84168 12.8864 6.68412 12.2567L5.35119 6.92862Z" fill="#FFEA9F"/>
<mask id="mask0_17699_429" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="26" height="26">
<mask id="mask0_17699_429" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="7" y="7" width="26" height="26">
<ellipse cx="19.7987" cy="19.7982" rx="12.6708" ry="12.6708" fill="#FFC700"/>
</mask>
<g mask="url(#mask0_17699_429)">

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -9,7 +9,7 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6426 59.2383H81.6426V77.2383H63.6426V59.2383Z" fill="#FFC600"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M164.785 12.3809H178.785V26.3809H164.785V12.3809Z" fill="#0149FF"/>
<path d="M103.604 15.4162C103.109 13.2964 104.9 11.3761 106.877 11.9064L117.933 14.8722C119.239 15.2227 120.587 14.4864 121.091 13.1467L125.351 1.81266C126.113 -0.214009 128.615 -0.638839 129.923 1.03618L137.242 10.4037C138.107 11.5109 139.601 11.7646 140.743 10.9982L150.403 4.51425C152.13 3.35483 154.387 4.58774 154.527 6.76767L155.313 18.9588C155.406 20.3998 156.475 21.5467 157.819 21.6463L169.189 22.489C171.222 22.6397 172.371 25.0595 171.29 26.9116L165.243 37.2698C164.528 38.4941 164.765 40.0961 165.798 41.0237L174.534 48.8713C176.096 50.2745 175.7 52.9568 173.81 53.7737L163.24 58.3425C161.99 58.8825 161.304 60.3277 161.63 61.7289L164.396 73.5838C164.891 75.7036 163.1 77.6239 161.123 77.0936L150.067 74.1278C148.761 73.7773 147.413 74.5136 146.909 75.8533L142.649 87.1873C141.887 89.214 139.385 89.6388 138.077 87.9638L130.758 78.5963C129.893 77.4891 128.399 77.2354 127.257 78.0018L117.597 84.4858C115.87 85.6452 113.613 84.4123 113.473 82.2323L112.687 70.0412C112.594 68.6002 111.525 67.4533 110.181 67.3537L98.8114 66.511C96.7785 66.3603 95.6287 63.9405 96.7099 62.0884L102.757 51.7302C103.472 50.5059 103.235 48.9039 102.202 47.9763L93.4663 40.1287C91.9042 38.7255 92.3004 36.0432 94.1905 35.2263L104.76 30.6575C106.01 30.1175 106.696 28.6723 106.37 27.2711L103.604 15.4162Z" fill="#FFEA9F"/>
<mask id="mask0_11691_88022" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="107" y="15" width="53" height="58">
<mask id="mask0_11691_88022" style="mask-type: alpha;" maskUnits="userSpaceOnUse" x="107" y="15" width="53" height="58">
<ellipse cx="133.582" cy="44.0508" rx="26.2918" ry="28.1924" fill="#FFC700"/>
</mask>
<g mask="url(#mask0_11691_88022)">

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -2,13 +2,51 @@
// See LICENSE for copying information.
:root {
--c-warning: #FFEECC;
--c-warning-border: #FFD78A;
--c-warning-icon: #FF8A00;
--c-info: #d7e8ff;
--c-info-border: #a5beff;
--c-info-icon: #003DC1;
--c-critical: #FFE0E7;
--c-critical-border: #FFC0CF;
--c-critical-icon: #FF458B;
--c-yellow-1: #ffeecc;
--c-yellow-2: #ffd78a;
--c-yellow-3: #ffc600;
--c-yellow-4: #ffa800;
--c-yellow-5: #ff8a00;
--c-light-blue-1: #d9e2ff;
--c-light-blue-2: #b3c5ff;
--c-light-blue-3: #89a5ff;
--c-light-blue-4: #537cff;
--c-blue-1: #e6edf7;
--c-blue-2: #d7e8ff;
--c-blue-3: #0149ff;
--c-blue-4: #003dc1;
--c-blue-5: #0218a7;
--c-blue-6: #091c45;
--c-green-1: #dffff7;
--c-green-2: #b1ffec;
--c-green-3: #00e366;
--c-green-4: #ccf8e0;
--c-green-5: #00ac26;
--c-red-1: #ffb0b0;
--c-red-2: #ff1313;
--c-red-3: #ba0000;
--c-pink-1: #ffe0e7;
--c-pink-2: #ffc0cf;
--c-pink-3: #ff93bb;
--c-pink-4: #ff458b;
--c-purple-1: #e2dcff;
--c-purple-2: #c5baff;
--c-purple-3: #a18eff;
--c-purple-4: #7b61ff;
--c-grey-1: #fafafb;
--c-grey-2: #ebeef1;
--c-grey-3: #d8dee3;
--c-grey-4: #c8d3de;
--c-grey-5: #929fb1;
--c-grey-6: #56606d;
--c-white: #ffffff;
--c-black: #000000;
}