mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
Various styling fixes
This commit is contained in:
parent
7ec77e0b45
commit
57179d2b05
@ -27,6 +27,7 @@ const Import = require('./accounts/import')
|
|||||||
const InfoScreen = require('./info')
|
const InfoScreen = require('./info')
|
||||||
const Loading = require('./components/loading')
|
const Loading = require('./components/loading')
|
||||||
const NetworkIndicator = require('./components/network')
|
const NetworkIndicator = require('./components/network')
|
||||||
|
const Identicon = require('./components/identicon')
|
||||||
const BuyView = require('./components/buy-button-subview')
|
const BuyView = require('./components/buy-button-subview')
|
||||||
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
|
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
|
||||||
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
|
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
|
||||||
@ -60,6 +61,7 @@ function mapStateToProps (state) {
|
|||||||
noActiveNotices: state.metamask.noActiveNotices,
|
noActiveNotices: state.metamask.noActiveNotices,
|
||||||
isInitialized: state.metamask.isInitialized,
|
isInitialized: state.metamask.isInitialized,
|
||||||
isUnlocked: state.metamask.isUnlocked,
|
isUnlocked: state.metamask.isUnlocked,
|
||||||
|
selectedAddress: state.metamask.selectedAddress,
|
||||||
currentView: state.appState.currentView,
|
currentView: state.appState.currentView,
|
||||||
activeAddress: state.appState.activeAddress,
|
activeAddress: state.appState.activeAddress,
|
||||||
transForward: state.appState.transForward,
|
transForward: state.appState.transForward,
|
||||||
@ -198,7 +200,7 @@ App.prototype.renderAppBar = function () {
|
|||||||
if (window.METAMASK_UI_TYPE === 'notification') {
|
if (window.METAMASK_UI_TYPE === 'notification') {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
console.log(this.props)
|
||||||
return (
|
return (
|
||||||
|
|
||||||
h('.full-width', {
|
h('.full-width', {
|
||||||
@ -230,24 +232,31 @@ App.prototype.renderAppBar = function () {
|
|||||||
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('div.network-component-wrapper', {
|
h('div.header__right-actions', [
|
||||||
style: {},
|
h('div.network-component-wrapper', {
|
||||||
}, [
|
style: {},
|
||||||
// Network Indicator
|
}, [
|
||||||
h(NetworkIndicator, {
|
// Network Indicator
|
||||||
network: this.props.network,
|
h(NetworkIndicator, {
|
||||||
provider: this.props.provider,
|
network: this.props.network,
|
||||||
onClick: (event) => {
|
provider: this.props.provider,
|
||||||
event.preventDefault()
|
onClick: (event) => {
|
||||||
event.stopPropagation()
|
event.preventDefault()
|
||||||
if (this.props.networkDropdownOpen === false) {
|
event.stopPropagation()
|
||||||
this.props.showNetworkDropdown()
|
if (this.props.networkDropdownOpen === false) {
|
||||||
} else {
|
this.props.showNetworkDropdown()
|
||||||
this.props.hideNetworkDropdown()
|
} else {
|
||||||
}
|
this.props.hideNetworkDropdown()
|
||||||
},
|
}
|
||||||
}),
|
},
|
||||||
|
}),
|
||||||
|
|
||||||
|
]),
|
||||||
|
|
||||||
|
h(Identicon, {
|
||||||
|
address: this.props.selectedAddress,
|
||||||
|
diameter: 32,
|
||||||
|
}),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
key: 'main',
|
key: 'main',
|
||||||
closeMenu: () => this.props.hideNetworkDropdown(),
|
closeMenu: () => this.props.hideNetworkDropdown(),
|
||||||
onClick: () => props.setProviderType('mainnet'),
|
onClick: () => props.setProviderType('mainnet'),
|
||||||
style: dropdownMenuItemStyle,
|
style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
|
providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
const Component = require('react').Component
|
const Component = require('react').Component
|
||||||
const h = require('react-hyperscript')
|
const h = require('react-hyperscript')
|
||||||
|
const classnames = require('classnames');
|
||||||
const inherits = require('util').inherits
|
const inherits = require('util').inherits
|
||||||
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
|
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
|
||||||
|
|
||||||
@ -61,7 +62,13 @@ Network.prototype.render = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.network-component.pointer', {
|
h('div.network-component.pointer', {
|
||||||
|
className: classnames('network-component pointer', {
|
||||||
|
'ethereum-network': providerName === 'mainnet',
|
||||||
|
'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
|
||||||
|
'kovan-test-network': providerName === 'kovan',
|
||||||
|
'rinkeby-test-network': providerName === 'rinkeby',
|
||||||
|
}),
|
||||||
title: hoverText,
|
title: hoverText,
|
||||||
onClick: (event) => this.props.onClick(event),
|
onClick: (event) => this.props.onClick(event),
|
||||||
}, [
|
}, [
|
||||||
@ -71,7 +78,7 @@ Network.prototype.render = function () {
|
|||||||
return h('.network-indicator', [
|
return h('.network-indicator', [
|
||||||
h(NetworkDropdownIcon, {
|
h(NetworkDropdownIcon, {
|
||||||
backgroundColor: '#038789', // $blue-lagoon
|
backgroundColor: '#038789', // $blue-lagoon
|
||||||
nonSelectBackgroundColor: '#15afb2'
|
nonSelectBackgroundColor: '#15afb2',
|
||||||
}),
|
}),
|
||||||
h('.network-name', {
|
h('.network-name', {
|
||||||
style: {
|
style: {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.account-dropdown-name {
|
.account-dropdown-name {
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-dropdown-balance {
|
.account-dropdown-balance {
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
.account-dropdown-edit-button {
|
.account-dropdown-edit-button {
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
font-family: "DIN OT";
|
font-family: Roboto;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
|
@ -52,7 +52,7 @@ button.primary {
|
|||||||
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
|
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
|
||||||
color: $white;
|
color: $white;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-family: 'Montserrat Regular';
|
font-family: Roboto;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,7 +62,7 @@ button.primary {
|
|||||||
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
|
box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
|
||||||
color: #585d67; // TODO: make reusable light button color
|
color: #585d67; // TODO: make reusable light button color
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-family: 'Montserrat Regular';
|
font-family: Roboto;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 576px) {
|
@media screen and (min-width: 576px) {
|
||||||
top: -26px;
|
// top: -26px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -8,15 +8,24 @@
|
|||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
padding: 0 12px;
|
padding: 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
|
||||||
z-index: $mobile-header-z-index;
|
z-index: $mobile-header-z-index;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 576px) {
|
@media screen and (min-width: 576px) {
|
||||||
height: 14.4vh;
|
height: 75px;
|
||||||
max-height: 97px;
|
justify-content: center;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
background: $gallery;
|
||||||
|
bottom: -32px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -45,13 +54,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-header h1 {
|
.app-header h1 {
|
||||||
font-family: 'Montserrat Regular';
|
font-family: Roboto;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-weight: 400;
|
||||||
color: #22232c; // $shark
|
color: #22232c; // $shark
|
||||||
}
|
}
|
||||||
|
|
||||||
h2.page-subtitle {
|
h2.page-subtitle {
|
||||||
font-family: 'Montserrat Regular';
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #aeaeae;
|
color: #aeaeae;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
@ -62,6 +71,7 @@ h2.page-subtitle {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-menu-wrapper {
|
.left-menu-wrapper {
|
||||||
@ -69,3 +79,9 @@ h2.page-subtitle {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header__right-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -20,7 +20,7 @@
|
|||||||
.qr-ellip-address, .ellip-address {
|
.qr-ellip-address, .ellip-address {
|
||||||
width: 247px;
|
width: 247px;
|
||||||
border: none;
|
border: none;
|
||||||
font-family: 'Montserrat Light';
|
font-family: Roboto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -192,7 +192,7 @@
|
|||||||
padding: 5px 0 31px 0;
|
padding: 5px 0 31px 0;
|
||||||
border: 1px solid $silver;
|
border: 1px solid $silver;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: 'Montserrat UltraLight';
|
font-family: Roboto;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -208,7 +208,7 @@
|
|||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
@ -252,7 +252,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid $alto;
|
border: 1px solid $alto;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
font-family: 'Montserrat Light';
|
font-family: Roboto;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
width: 286px;
|
width: 286px;
|
||||||
}
|
}
|
||||||
@ -269,7 +269,7 @@
|
|||||||
padding: 10px 22px;
|
padding: 10px 22px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
width: 235px;
|
width: 235px;
|
||||||
font-family: 'Montserrat Light';
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -320,7 +320,7 @@
|
|||||||
|
|
||||||
.private-key-password::-webkit-input-placeholder {
|
.private-key-password::-webkit-input-placeholder {
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
font-family: 'Montserrat UltraLight';
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.private-key-password-warning {
|
.private-key-password-warning {
|
||||||
@ -333,7 +333,7 @@
|
|||||||
width: 292px;
|
width: 292px;
|
||||||
padding: 9px 15px;
|
padding: 9px 15px;
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
font-family: 'Montserrat Regular';
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.export-private-key-buttons {
|
.export-private-key-buttons {
|
||||||
@ -362,7 +362,7 @@
|
|||||||
|
|
||||||
.private-key-password-display-textarea {
|
.private-key-password-display-textarea {
|
||||||
color: $crimson;
|
color: $crimson;
|
||||||
font-family: "DIN OT";
|
font-family: Roboto;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
border: none;
|
border: none;
|
||||||
@ -384,7 +384,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid $alto;
|
border: 1px solid $alto;
|
||||||
box-shadow: 0 0 2px 2px $alto;
|
box-shadow: 0 0 2px 2px $alto;
|
||||||
font-family: 'Montserrat Light';
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-account-modal-header {
|
.new-account-modal-header {
|
||||||
@ -439,7 +439,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
font-family: Montserrat Light;
|
font-family: Roboto;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
margin: 0 60px;
|
margin: 0 60px;
|
||||||
}
|
}
|
||||||
@ -506,7 +506,7 @@
|
|||||||
|
|
||||||
&__symbol {
|
&__symbol {
|
||||||
color: $tundora;
|
color: $tundora;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -517,7 +517,7 @@
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
width: 271.28px;
|
width: 271.28px;
|
||||||
color: $tundora;
|
color: $tundora;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -528,7 +528,7 @@
|
|||||||
height: 41px;
|
height: 41px;
|
||||||
width: 318px;
|
width: 318px;
|
||||||
color: $scorpion;
|
color: $scorpion;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -547,7 +547,7 @@
|
|||||||
border: 1px solid $scorpion;
|
border: 1px solid $scorpion;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: $tundora;
|
color: $tundora;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -1,14 +1,65 @@
|
|||||||
|
.network-component.pointer {
|
||||||
|
border: 1px solid $shark;
|
||||||
|
border-radius: 82px;
|
||||||
|
padding: 6px;
|
||||||
|
|
||||||
|
&.ethereum-network {
|
||||||
|
border-color: rgb(3, 135, 137);
|
||||||
|
|
||||||
|
.menu-icon-circle div {
|
||||||
|
background-color: rgba(3, 135, 137, .7) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ropsten-test-network {
|
||||||
|
border-color: rgb(233, 21, 80);
|
||||||
|
|
||||||
|
.menu-icon-circle div {
|
||||||
|
background-color: rgba(233, 21, 80, .7) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.kovan-test-network {
|
||||||
|
border-color: rgb(105, 4, 150);
|
||||||
|
|
||||||
|
.menu-icon-circle div {
|
||||||
|
background-color: rgba(105, 4, 150, .7) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rinkeby-test-network {
|
||||||
|
border-color: rgb(235, 179, 63);
|
||||||
|
|
||||||
|
.menu-icon-circle div {
|
||||||
|
background-color: rgba(235, 179, 63, .7) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-item {
|
||||||
|
.menu-icon-circle,
|
||||||
|
.menu-icon-circle--active {
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.network-indicator {
|
.network-indicator {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: .6em;
|
font-size: .6em;
|
||||||
|
|
||||||
|
.fa-caret-down {
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-name {
|
.network-name {
|
||||||
line-height: 12px;
|
line-height: 15px;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -46,29 +97,27 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon-circle, .menu-icon-circle--active {
|
.menu-icon-circle,
|
||||||
height: 23px;
|
.menu-icon-circle--active {
|
||||||
width: 23px;
|
|
||||||
margin: 9px;
|
|
||||||
background: none;
|
background: none;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background: none;
|
margin: 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon-circle--active {
|
.menu-icon-circle--active {
|
||||||
border: 1px solid white;
|
border: 1px solid $white;
|
||||||
background: rgba(100, 100, 100, 0.4);
|
background: rgba(100, 100, 100, .4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon-circle div, .menu-icon-circle--active div {
|
.menu-icon-circle div,
|
||||||
|
.menu-icon-circle--active div {
|
||||||
height: 17px;
|
height: 17px;
|
||||||
width: 17px;
|
width: 17px;
|
||||||
border-radius: 17px;
|
border-radius: 17px;
|
||||||
opacity: 0.7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon-circle--active div {
|
.menu-icon-circle--active div {
|
||||||
@ -93,7 +142,7 @@
|
|||||||
height: 25px;
|
height: 25px;
|
||||||
width: 75px;
|
width: 75px;
|
||||||
color: $white;
|
color: $white;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -103,7 +152,7 @@
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
width: 265px;
|
width: 265px;
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
@ -8,9 +8,9 @@ $wallet-view-bg: $wild-sand;
|
|||||||
|
|
||||||
// Main container
|
// Main container
|
||||||
.main-container {
|
.main-container {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
z-index: $main-container-z-index;
|
z-index: $main-container-z-index;
|
||||||
font-family: "DIN OT Light";
|
font-family: Roboto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand;
|
|||||||
background: rgb(250, 250, 250);
|
background: rgb(250, 250, 250);
|
||||||
z-index: $sidebar-z-index;
|
z-index: $sidebar-z-index;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 41px;
|
// top: 41px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -86,7 +86,9 @@ $wallet-view-bg: $wild-sand;
|
|||||||
.sidebar-overlay {
|
.sidebar-overlay {
|
||||||
z-index: $sidebar-overlay-z-index;
|
z-index: $sidebar-overlay-z-index;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 41px;
|
// top: 41px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -107,7 +109,7 @@ $wallet-view-bg: $wild-sand;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-top: 6.9vh;
|
// margin-top: 6.9vh;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
||||||
@ -116,7 +118,7 @@ $wallet-view-bg: $wild-sand;
|
|||||||
|
|
||||||
@media screen and (min-width: 769px) {
|
@media screen and (min-width: 769px) {
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-top: 6.9vh;
|
// margin-top: 6.9vh;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 82vh;
|
height: 82vh;
|
||||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
||||||
@ -125,7 +127,7 @@ $wallet-view-bg: $wild-sand;
|
|||||||
|
|
||||||
@media screen and (min-width: 1281px) {
|
@media screen and (min-width: 1281px) {
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-top: 6.9vh;
|
// margin-top: 6.9vh;
|
||||||
width: 65%;
|
width: 65%;
|
||||||
height: 82vh;
|
height: 82vh;
|
||||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
||||||
@ -142,8 +144,8 @@ $wallet-view-bg: $wild-sand;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-top: 41px;
|
// margin-top: 41px;
|
||||||
height: calc(100% - 41px);
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
|
@ -295,7 +295,7 @@ textarea.twelve-word-phrase {
|
|||||||
|
|
||||||
/* Info screen */
|
/* Info screen */
|
||||||
.info-gray {
|
.info-gray {
|
||||||
font-family: 'Montserrat Regular';
|
font-family: Roboto;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $silver-chalice;
|
color: $silver-chalice;
|
||||||
}
|
}
|
||||||
@ -305,7 +305,7 @@ textarea.twelve-word-phrase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
font-family: 'Montserrat Regular', Arial;
|
font-family: Roboto, Arial;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
@ -354,7 +354,7 @@ textarea.twelve-word-phrase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.buy-inputs {
|
.buy-inputs {
|
||||||
font-family: 'Montserrat Light';
|
font-family: Roboto;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@ -398,7 +398,7 @@ textarea.twelve-word-phrase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ex-coins {
|
.ex-coins {
|
||||||
font-family: 'Montserrat Regular';
|
font-family: Roboto;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 33px;
|
font-size: 33px;
|
||||||
@ -409,7 +409,7 @@ textarea.twelve-word-phrase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.marketinfo {
|
.marketinfo {
|
||||||
font-family: 'Montserrat light';
|
font-family: Roboto;
|
||||||
color: $silver-chalice;
|
color: $silver-chalice;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
z-index: 25;
|
z-index: 25;
|
||||||
font-family: 'DIN OT';
|
font-family: Roboto;
|
||||||
|
|
||||||
@media screen and (max-width: $break-small) {
|
@media screen and (max-width: $break-small) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -19,7 +19,7 @@
|
|||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
||||||
padding: 46px 40.5px 26px;
|
padding: 46px 40.5px 26px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -26px;
|
// top: -26px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
@ -77,7 +77,7 @@
|
|||||||
margin: 4px 0 20px;
|
margin: 4px 0 20px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 22.4px;
|
line-height: 22.4px;
|
||||||
font-family: "DIN OT";
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-screen-gas-input {
|
.send-screen-gas-input {
|
||||||
@ -316,7 +316,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
z-index: 25;
|
z-index: 25;
|
||||||
font-family: "Montserrat Light";
|
font-family: Roboto;
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
width: 498px;
|
width: 498px;
|
||||||
@ -325,7 +325,7 @@
|
|||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
||||||
padding: 46px 40.5px 26px;
|
padding: 46px 40.5px 26px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -26px;
|
// top: -26px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
@ -404,20 +404,18 @@
|
|||||||
width: 380px;
|
width: 380px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
z-index: 25;
|
z-index: 25;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -26px;
|
|
||||||
|
|
||||||
@media screen and (max-width: $break-small) {
|
@media screen and (max-width: $break-small) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -91,7 +91,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
|
|||||||
|
|
||||||
&__option {
|
&__option {
|
||||||
color: $white;
|
color: $white;
|
||||||
font-family: "DIN OT";
|
font-family: Roboto;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -132,7 +132,7 @@
|
|||||||
.tx-list-date {
|
.tx-list-date {
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-family: "Montserrat UltraLight";
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-list-identicon-wrapper {
|
.tx-list-identicon-wrapper {
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
font-family: 'Montserrat Regular', Arial;
|
font-family: Roboto, Arial;
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
|
@ -71,3 +71,7 @@ $sidebar-overlay-z-index: 25;
|
|||||||
$break-small: 575px;
|
$break-small: 575px;
|
||||||
$break-midpoint: 780px;
|
$break-midpoint: 780px;
|
||||||
$break-large: 576px;
|
$break-large: 576px;
|
||||||
|
|
||||||
|
|
||||||
|
$primary-font-type: Roboto;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user