Display old wallet-selector if user disabled js
This commit is contained in:
alexcherman
parent
d99613d65b
commit
f4c90f019d
121
_includes/layout/base/wallets-list.html
Normal file
121
_includes/layout/base/wallets-list.html
Normal file
@ -0,0 +1,121 @@
|
||||
{% comment %}
|
||||
This file is licensed under the MIT License (MIT) available on
|
||||
http://opensource.org/licenses/MIT.
|
||||
{% endcomment %}
|
||||
|
||||
{% if page.id == "choose-your-wallet" or page.id == 'wallets-desktop-desktop' or page.id == 'wallets-mobile-mobile' %}
|
||||
{% assign walletClass = "" | append: "is-hidden-mobile" %}
|
||||
{% else %}
|
||||
{% assign walletClass = "" | append: "accordion-wallets is-visible" %}
|
||||
{% endif %}
|
||||
<div class="accordion {{walletClass}}">
|
||||
{% if page.id == "wallets-hardware-hardware" or page.id == "wallets-web-web" %}
|
||||
{% assign accordionNumber = "" | append: "accordion-tab-2" %}
|
||||
{% else %}
|
||||
{% assign accordionNumber = "" | append: "accordion-tab-3" %}
|
||||
{% endif %}
|
||||
{% for wallet in site.wallets %}
|
||||
{% if page.id contains wallet.id %}
|
||||
{% assign walletName = wallet.titleshort %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="accordion-tab accordion-tab-wallet {{accordionNumber}} js-tab is-expanded">
|
||||
<p class="accordion-label">Select Wallet</p>
|
||||
<p class="selected-item selected-wallet">{{walletName}}</p>
|
||||
</div>
|
||||
<div class="accordion-content accordion-content-wallets">
|
||||
<div class="wallet-list" id="wallets">
|
||||
{% if page.id == "choose-your-wallet" %}
|
||||
{% for wallet in site.wallets %}
|
||||
{% assign platformList = "" %}
|
||||
{% for platform in wallet.platform %}
|
||||
{% capture platformList %}{{platformList}}{{platform.name}}{% endcapture %}
|
||||
{% endfor %}
|
||||
<div class="wallet-list-item allwallets-list-item">
|
||||
<div class="wallet-list-item-link">
|
||||
<img src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" /> {{ wallet.titleshort }}
|
||||
</div>
|
||||
<p class="wallet-hint">Select an Operating System</p>
|
||||
<div class="wallet-list-os">
|
||||
{% for platform in wallet.platform %}
|
||||
{% for os in platform.os%}
|
||||
{% if platform.name == os.name %}
|
||||
<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform={{platform.name}}>
|
||||
<span class="wallet-os-ico {{os.name}}-ico"></span>
|
||||
<span class="wallet-os-ico-dark {{os.name}}-ico-dark" hidden></span>
|
||||
<span class="wallet-os-ico-bright {{os.name}}-ico-bright" hidden></span>
|
||||
<p class="wallet-ico-tooltip">{{os.name}}</p>
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform={{platform.name}}>
|
||||
<span class="wallet-os-ico {{os.name}}-ico"></span>
|
||||
<span class="wallet-os-ico-dark {{os.name}}-ico-dark" hidden></span>
|
||||
<span class="wallet-os-ico-bright {{os.name}}-ico-bright" hidden></span>
|
||||
<p class="wallet-ico-tooltip">{{os.name}}</p>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
|
||||
<!-- All wallets -->
|
||||
{% for wallet in site.wallets %}
|
||||
{% if page.id contains wallet.id %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% assign platformList = "" %}
|
||||
{% for platform in wallet.platform %}
|
||||
{% capture platformList %}{{platformList}}{{platform.name}} {% endcapture %}
|
||||
{% endfor %}
|
||||
<div class="wallet-list-item allwallets-list-item is-hidden" data-platforms="{{platformList}}" data-category="all-wallets" data-walletlevel="{{ wallet.level }}">
|
||||
<div class="wallet-list-item-link">
|
||||
<img src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" /> {{ wallet.titleshort }}
|
||||
</div>
|
||||
<p class="wallet-hint">Select an Operating System</p>
|
||||
<div class="wallet-list-os">
|
||||
{% for platform in wallet.platform %} {% for os in platform.os%} {% if platform.name == os.name %}
|
||||
<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
|
||||
<span class="wallet-os-ico {{os.name}}-ico"></span>
|
||||
<span class="wallet-os-ico-dark {{os.name}}-ico-dark" hidden></span>
|
||||
<span class="wallet-os-ico-bright {{os.name}}-ico-bright" hidden></span>
|
||||
<p class="wallet-ico-tooltip">{{os.name}}</p>
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="wallet-list-os-link" href="/{{ page.lang}}/wallets/{{platform.name}}/{{os.name}}/{{ wallet.id }}/" data-link-platform="{{platform.name}}">
|
||||
<span class="wallet-os-ico {{os.name}}-ico"></span>
|
||||
<span class="wallet-os-ico-dark {{os.name}}-ico-dark" hidden></span>
|
||||
<span class="wallet-os-ico-bright {{os.name}}-ico-bright" hidden></span>
|
||||
<p class="wallet-ico-tooltip">{{os.name}}</p>
|
||||
</a>
|
||||
{% endif %} {% endfor %} {% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Particular Wallets -->
|
||||
{% for wallet in site.wallets %}
|
||||
{% if page.id contains wallet.id %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% assign platform = page.platform['name'] %}
|
||||
{% assign os = page.os['name'] %}
|
||||
{% if wallet.compat contains platform and wallet.compat contains os %}
|
||||
<div class="wallet-list-item" data-category="{{os}}" data-walletlevel="{{ wallet.level }}">
|
||||
{% if platform == os %}
|
||||
<a class="wallet-list-item-link" href="/{{ page.lang}}/wallets/{{ platform }}/{{ wallet.id }}/">
|
||||
{% else %}
|
||||
<a class="wallet-list-item-link" href="/{{ page.lang}}/wallets/{{ platform }}/{{ os }}/{{ wallet.id }}/">
|
||||
{% endif %}
|
||||
<img src="/img/wallet/{{ wallet.id }}.png?{{site.time | date: '%s'}}" alt="{{ wallet.title }}" /> {{ wallet.titleshort }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
73
_includes/layout/base/wallets-menu-mobile.html
Normal file
73
_includes/layout/base/wallets-menu-mobile.html
Normal file
@ -0,0 +1,73 @@
|
||||
{% comment %}
|
||||
This file is licensed under the MIT License (MIT) available on
|
||||
http://opensource.org/licenses/MIT.
|
||||
{% endcomment %}
|
||||
|
||||
<div class="walletmenu-mobile" hidden>
|
||||
{% assign platformsByPlatform = site.platforms | group_by: "platform" %}
|
||||
<div class="accordion accordion-platform">
|
||||
{% if page.id == "choose-your-wallet" %}
|
||||
{% assign platformClass = "is-expanded" %}
|
||||
{% endif %}
|
||||
<div class="accordion-tab accordion-tab-1 {{platformClass}}">
|
||||
<p class="accordion-label">Select Wallet Type</p>
|
||||
<p class="selected-item selected-platform"></p>
|
||||
</div>
|
||||
<div class="accordion-content platform-accordion-content">
|
||||
{% for platform in platformsByPlatform %}
|
||||
|
||||
{% capture platformName %}{{ platform.name | split: "=>" | last | split: '"' }}{% endcapture %}
|
||||
{% assign platformName = platformName | trim | replace: '}' '' | replace: ' ' '' %}
|
||||
|
||||
{% assign platformClass = "wallet-" | append: platformName %}
|
||||
{% assign ulClass = "" %}
|
||||
{% if page.id contains platformName %}
|
||||
{% assign platformClass = platformClass | append: " active" %}
|
||||
{% assign ulClass = " active" %}
|
||||
{% endif %}
|
||||
<div class="accordion-item {{ platformClass }}">
|
||||
{% assign platformHref = "/" | append: page.lang | append: "/wallets/" | append: platformName | append: "/" %}
|
||||
{% if platformName == 'hardware' or platformName == 'web' %}
|
||||
<a class="accordion-link {{platformName}}-link" href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
{% else %}
|
||||
<a class="accordion-link wallet-platform-link {{platformName}}-link" href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% for platform in platformsByPlatform %}
|
||||
|
||||
{% capture platformName %}{{ platform.name | split: "=>" | last | split: '"' }}{% endcapture %}
|
||||
{% assign platformName = platformName | trim | replace: '}' '' | replace: ' ' '' %}
|
||||
|
||||
{% capture pageName %}{{ page.id | split: "-" | last }}{% endcapture %}
|
||||
|
||||
{% if platform.items.size > 1 %}
|
||||
<div class="accordion accordion-os {% if page.id contains platformName %}is-visible{% endif %}" hidden>
|
||||
<div class="accordion-tab accordion-tab-2 {% if pageName == platformName %}is-expanded{% endif %}">
|
||||
<p class="accordion-label">Select Operating System</p>
|
||||
<p class="selected-item selected-os"></p>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
|
||||
{% for item in platform.items %}
|
||||
{% assign osClass = "wallet-" | append: item.os.name %}
|
||||
{% if page.id contains item.id %}
|
||||
{% assign osClass = osClass | append: " active" %}
|
||||
{% endif %}
|
||||
|
||||
{% if item.os.name != 'desktop' and item.os.name != 'mobile' %}
|
||||
<div class="accordion-item {{osClass}}">
|
||||
<a class="accordion-link link-{{osClass}}" href="/{{ page.lang }}/wallets/{{ platformName }}/{{ item.os.name }}/">
|
||||
{% translate platform{{item.os.name}} choose-your-wallet %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
73
_includes/layout/base/wallets-menu.html
Normal file
73
_includes/layout/base/wallets-menu.html
Normal file
@ -0,0 +1,73 @@
|
||||
{% comment %}
|
||||
|
||||
This file is licensed under the MIT License (MIT) available on
|
||||
http://opensource.org/licenses/MIT.
|
||||
{% endcomment %}
|
||||
|
||||
{% if page.id contains 'desktop' or page.id contains 'mobile'%}
|
||||
{% assign walletMargin = "55px" %}
|
||||
{% else %}
|
||||
{% assign walletMargin = "" %}
|
||||
{% endif %}
|
||||
<div class="walletmenu" id="walletmenu" style="margin-bottom: {{walletMargin}}">
|
||||
{% assign platformsByPlatform = site.platforms | group_by: "platform" %}
|
||||
<ul class="walletmenu-list">
|
||||
{% if page.id == "choose-your-wallet" %}
|
||||
{% assign statusClass = "active" %}
|
||||
{% endif %}
|
||||
<li class="walletmenu-list-item">
|
||||
<a class="walletmenu-platform-link allwallets-link {{statusClass}}" href="/{{ page.lang }}/{% translate choose-your-wallet url %}">All Wallets</a>
|
||||
</li>
|
||||
{% for platform in platformsByPlatform %}
|
||||
|
||||
{% comment %}
|
||||
! WORKAROUND START
|
||||
Working around an issue with getting proper platform name from the list
|
||||
of platforms. After original group_by, the "name" key becomes a stringified
|
||||
hash. So we need to make these "hackish" transformations to make it working
|
||||
properly.
|
||||
{% endcomment %}
|
||||
{% capture platformName %}{{ platform.name | split: "=>" | last | split: '"' }}{% endcapture %}
|
||||
{% assign platformName = platformName | trim | replace: '}' '' | replace: ' ' '' %}
|
||||
{% comment %}
|
||||
! WORKAROUND END
|
||||
{% endcomment %}
|
||||
|
||||
{% assign platformClass = "wallet-" | append: platformName %}
|
||||
{% assign ulClass = "" %}
|
||||
{% if page.id contains platformName and platformName != 'web' and platformName != 'hardware' %}
|
||||
{% assign platformClass = platformClass | append: " active" %}
|
||||
{% assign ulClass = " active" %}
|
||||
{% elsif page.id contains platformName %}
|
||||
{% assign platformClass = platformClass | append: " active" %}
|
||||
{% endif %}
|
||||
<li class="walletmenu-list-item">
|
||||
{% assign platformHref = "/" | append: page.lang | append: "/wallets/" | append: platformName | append: "/" %}
|
||||
{% if platformName == 'hardware' or platformName == 'web' %}
|
||||
<a class="walletmenu-platform-link {{ platformClass }}" href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
{% else %}
|
||||
<a class="walletmenu-platform-link {{ platformClass }}" href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
{% endif %}
|
||||
{% if platform.items.size > 1 %}
|
||||
<div class="walletmenu-accordion">
|
||||
<ul class="walletmenu-sublist {{ulClass}}">
|
||||
{% for item in platform.items %}
|
||||
{% assign osClass = "wallet-" | append: item.os.name %}
|
||||
{% if page.id contains item.id %}
|
||||
{% assign osClass = osClass | append: " active" %}
|
||||
{% endif %}
|
||||
{% if item.os.name != 'desktop' and item.os.name != 'mobile' %}
|
||||
<li class="walletmenu-sublist-item">
|
||||
<a class="walletmenu-sublist-link {{ osClass }}" href="/{{ page.lang }}/wallets/{{ platformName }}/{{ item.os.name }}/">
|
||||
{% translate platform{{item.os.name}} choose-your-wallet %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@ -17,4 +17,10 @@ layout: base
|
||||
{% include layout/base/helper-wizard.html %}
|
||||
{% include layout/base/wallets-selector.html %}
|
||||
|
||||
<noscript>
|
||||
{% include layout/base/wallets-menu.html %}
|
||||
{% include layout/base/wallets-menu-mobile.html %}
|
||||
{% include layout/base/wallets-list.html %}
|
||||
</noscript>
|
||||
|
||||
<script type="text/javascript" src="/js/walletSelector.js"></script>
|
||||
10
_platforms/desktop.html
Normal file
10
_platforms/desktop.html
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
# This file is licensed under the MIT License (MIT) available on
|
||||
# http://opensource.org/licenses/MIT.
|
||||
|
||||
id: wallets-desktop
|
||||
platform:
|
||||
name: desktop
|
||||
os:
|
||||
name: desktop
|
||||
---
|
||||
10
_platforms/mobile.html
Normal file
10
_platforms/mobile.html
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
# This file is licensed under the MIT License (MIT) available on
|
||||
# http://opensource.org/licenses/MIT.
|
||||
|
||||
id: wallets-mobile
|
||||
platform:
|
||||
name: mobile
|
||||
os:
|
||||
name: mobile
|
||||
---
|
||||
593
_sass/_wallet-menu-noscript.scss
Normal file
593
_sass/_wallet-menu-noscript.scss
Normal file
@ -0,0 +1,593 @@
|
||||
.walletmenu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 90;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.walletmenu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.walletmenu-list-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.walletmenu-list-item + .walletmenu-list-item {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.walletmenu-platform-link.active {
|
||||
color: #ff7e00;
|
||||
border-bottom: 3px solid #ff7e00;
|
||||
}
|
||||
|
||||
.walletmenu-platform-link.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 100%);
|
||||
border: 8px solid transparent;
|
||||
border-top: 8px solid #ff7e00;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.walletmenu-platform-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 18px 10px 18px 42px;
|
||||
font-size: 15px;
|
||||
color: #13161f;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.allwallets-link {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.walletmenu-platform-link.wallet-hardware {
|
||||
background: url('./../img/icons/wallet_menu_hardware.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
.walletmenu-platform-link.wallet-desktop {
|
||||
background: url('./../img/icons/wallet_menu_desktop.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
.walletmenu-platform-link.wallet-mobile {
|
||||
background: url('./../img/icons/wallet_menu_mobile.svg') left center no-repeat;
|
||||
}
|
||||
.walletmenu-platform-link.wallet-web {
|
||||
background: url('./../img/icons/wallet_menu_web.svg') left center no-repeat;
|
||||
}
|
||||
|
||||
.walletmenu-accordion {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, 100%);
|
||||
}
|
||||
|
||||
.walletmenu-platform-link.active + .walletmenu-accordion {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.walletmenu-sublist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.walletmenu-sublist-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.walletmenu-sublist-link {
|
||||
display: block;
|
||||
padding: 18px 32px 18px 32px;
|
||||
color: #13161f;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.walletmenu-sublist-link.active {
|
||||
color: #ff7e00;
|
||||
}
|
||||
|
||||
.walletmenu-sublist-link.wallet-linux {
|
||||
background: url('./../img/os/wallet_menu_linux.svg') left center no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.wallet-mac {
|
||||
background: url('./../img/os/wallet_menu_mac.svg') left center no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.wallet-windows {
|
||||
background: url('./../img/os/wallet_menu_windows.svg') left center no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.wallet-ios {
|
||||
background: url('./../img/os/wallet_menu_ios.svg') left center no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.wallet-android {
|
||||
background: url('./../img/os/wallet_menu_android.svg') left center no-repeat;
|
||||
}
|
||||
|
||||
.walletmenu-sublist-link.active.wallet-linux {
|
||||
background: url('./../img/os/wallet_menu_linux_bright.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.active.wallet-mac {
|
||||
background: url('./../img/os/wallet_menu_mac_bright.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.active.wallet-windows {
|
||||
background: url('./../img/os/wallet_menu_windows_bright.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.active.wallet-ios {
|
||||
background: url('./../img/os/wallet_menu_ios_bright.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
.walletmenu-sublist-link.active.wallet-android {
|
||||
background: url('./../img/os/wallet_menu_android_bright.svg') left center
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.accordion-tab-wallet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wallet-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1230px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 40px 0 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wallet-list .wallet-list-item {
|
||||
display: inline-block;
|
||||
width: 14.2%;
|
||||
height: auto;
|
||||
margin-bottom: 30px;
|
||||
margin-right: 1.2%;
|
||||
margin-left: 1.2%;
|
||||
border: 1px solid #dfdfdf;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wallet-list .allwallets-list-item {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.wallet-list .wallet-list-item .wallet-list-item-link {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0 20px;
|
||||
color: #13161f;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wallet-list .allwallets-list-item .wallet-list-item-link {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wallet-list .wallet-list-item .wallet-list-item-link img {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: auto;
|
||||
margin: 20px auto 5px;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.wallet-hint {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.allwallets-list-item:hover .wallet-hint {
|
||||
margin: 0;
|
||||
color: #898f8f;
|
||||
}
|
||||
|
||||
.wallet-list-os {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.wallet-list-os-link {
|
||||
position: relative;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.wallet-ico-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
bottom: -5px;
|
||||
width: 77px;
|
||||
padding: 4px 12px;
|
||||
transform: translateY(100%);
|
||||
font-size: 11px;
|
||||
color: #898a8f;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.wallet-list-os-link:hover .wallet-ico-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.allwallets-list-item:hover .wallet-list-item-link img {
|
||||
margin: 20px auto -12px;
|
||||
}
|
||||
|
||||
.wallet-list-item-link:hover img {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.wallet-list-item:hover .wallet-list-os {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.wallet-list-os-link:hover {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.wallet-list .wallet-list-item .wallet-list-os-link:hover .wallet-os-ico {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wallet-list .wallet-list-item .wallet-list-os-link:hover .wallet-os-ico-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wallet-list
|
||||
.wallet-list-item
|
||||
.wallet-list-os-link:hover
|
||||
.wallet-os-ico-bright {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.windows-ico {
|
||||
background: url('../img/os/wallet_menu_windows.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.windows-ico-dark {
|
||||
background: url('../img/os/wallet_menu_windows_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.windows-ico-bright {
|
||||
background: url('../img/os/wallet_menu_windows_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.mac-ico {
|
||||
background: url('../img/os/wallet_menu_mac.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.mac-ico-dark {
|
||||
background: url('../img/os/wallet_menu_mac_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.mac-ico-bright {
|
||||
background: url('../img/os/wallet_menu_mac_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.linux-ico {
|
||||
background: url('../img/os/wallet_menu_linux.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.linux-ico-dark {
|
||||
background: url('../img/os/wallet_menu_linux_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.linux-ico-bright {
|
||||
background: url('../img/os/wallet_menu_linux_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.android-ico {
|
||||
background: url('../img/os/wallet_menu_android.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.android-ico-dark {
|
||||
background: url('../img/os/wallet_menu_android_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.android-ico-bright {
|
||||
background: url('../img/os/wallet_menu_android_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.ios-ico {
|
||||
background: url('../img/os/wallet_menu_ios.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.ios-ico-dark {
|
||||
background: url('../img/os/wallet_menu_ios_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.ios-ico-bright {
|
||||
background: url('../img/os/wallet_menu_ios_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.hardware-ico {
|
||||
background: url('../img/os/wallet_menu_hardware.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.hardware-ico-dark {
|
||||
background: url('../img/os/wallet_menu_hardware_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.hardware-ico-bright {
|
||||
background: url('../img/os/wallet_menu_hardware_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.web-ico {
|
||||
background: url('../img/os/wallet_menu_web.svg') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.web-ico-dark {
|
||||
background: url('../img/os/wallet_menu_web_dark.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.web-ico-bright {
|
||||
background: url('../img/os/wallet_menu_web_bright.svg') -9999px no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.accordion-tab {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.is-expanded + .accordion-content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.accordion-content {
|
||||
.wallet-desktop {
|
||||
background: url('../img/icons/wallet_menu_desktop.svg') center 15px no-repeat;
|
||||
}
|
||||
.wallet-hardware {
|
||||
background: url('../img/icons/wallet_menu_hardware.svg') center 15px no-repeat;
|
||||
}
|
||||
.wallet-mobile {
|
||||
background: url('../img/icons/wallet_menu_mobile.svg') center 15px no-repeat;
|
||||
}
|
||||
.wallet-web {
|
||||
background: url('../img/icons/wallet_menu_web.svg') center 15px no-repeat;
|
||||
}
|
||||
.wallet-linux {
|
||||
background: url('../img/icons/wallet_menu_linux.svg') center 15px no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
.wallet-mac {
|
||||
background: url('../img/icons/wallet_menu_mac.svg') center 15px no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
.wallet-windows {
|
||||
background: url('../img/icons/wallet_menu_windows.svg') center 15px no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
.wallet-android {
|
||||
background: url('../img/os/wallet_menu_android.svg') center 15px no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
.wallet-ios {
|
||||
background: url('../img/os/wallet_menu_ios.svg') center 15px no-repeat;
|
||||
background-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media handheld, only screen and (min-width: 769px) {
|
||||
.wallet-list-item.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media handheld,
|
||||
only screen and (max-width: 60em),
|
||||
only screen and (max-device-width: 60em) {
|
||||
.wallet-list {
|
||||
padding: 20px 0 30px;
|
||||
}
|
||||
.wallet-list .wallet-list-item {
|
||||
width: 30.9%;
|
||||
height: auto;
|
||||
}
|
||||
.walletmenu-list .walletmenu-list-item {
|
||||
margin: 0 25px;
|
||||
}
|
||||
}
|
||||
@media handheld,
|
||||
only screen and (max-width: 48em),
|
||||
only screen and (max-device-width: 48em) {
|
||||
.walletmenu > ul li:hover .wallet-platform-link::after {
|
||||
display: none;
|
||||
}
|
||||
.wallet-wrapper .wallet-list {
|
||||
display: flex;
|
||||
}
|
||||
.wallet-list {
|
||||
padding: 20px 0 30px;
|
||||
}
|
||||
.wallet-list .allwallets-list-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.walletmenu {
|
||||
display: none;
|
||||
}
|
||||
.walletmenu-mobile {
|
||||
display: block;
|
||||
}
|
||||
.wallet-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.accordion {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.accordion-tab {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 15px 35px 15px 55px;
|
||||
box-sizing: border-box;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.is-selected.accordion-tab {
|
||||
padding: 9px 35px 9px 55px;
|
||||
}
|
||||
.accordion-tab::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 15px;
|
||||
transform: translateY(-50%);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.accordion-tab-1::before {
|
||||
background: url('../img/getting-started/number-1.svg?') center
|
||||
no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.accordion-tab-2::before {
|
||||
background: url('../img/getting-started/number-2.svg?') center
|
||||
no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.is-selected.accordion-tab::before {
|
||||
background: url('../img/icons/checkmark.svg?') center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.accordion-content {
|
||||
display: none;
|
||||
}
|
||||
.is-expanded + .accordion-content {
|
||||
padding: 15px;
|
||||
}
|
||||
.accordion-item {
|
||||
width: 48.1%;
|
||||
height: 93px;
|
||||
margin: 0 3% 10px 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background-size: 30px;
|
||||
}
|
||||
.accordion-item:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.accordion-link {
|
||||
display: block;
|
||||
padding: 55px 0 15px;
|
||||
font-size: 15px;
|
||||
color: #13161f;
|
||||
text-align: center;
|
||||
border: 1px solid #dadada;
|
||||
}
|
||||
.accordion-link:hover,
|
||||
.accordion-link:active {
|
||||
padding: 54px 0 14px;
|
||||
border: 2px solid #ff7e00;
|
||||
}
|
||||
.accordion-wallets {
|
||||
display: none;
|
||||
}
|
||||
.accordion-wallets.is-visible {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.is-visible .accordion-tab-wallet {
|
||||
display: block;
|
||||
}
|
||||
.accordion-tab-3 {
|
||||
display: block;
|
||||
}
|
||||
.is-hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
.accordion-tab-3::before {
|
||||
background: url('../img/getting-started/number-3.svg') center
|
||||
no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.accordion-os.is-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media handheld,
|
||||
only screen and (max-width: 40em),
|
||||
only screen and (max-device-width: 40em) {
|
||||
.wallet .hero {
|
||||
background-color: #fff;
|
||||
}
|
||||
.wallet .wallet-platforms .wallet-platforms-menu {
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.wallet .wallet-platforms .wallet-os-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wallet .wallet-platforms .wallet-platforms-menu .wallet-os-btn {
|
||||
margin-right: 0;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
border: 1px solid #dadada;
|
||||
padding: 10px 16px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.wallet .wallet-platforms .active.wallet-os-btn {
|
||||
border: 2px solid #ff7e00;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
.wallet-list {
|
||||
padding: 0 0 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.wallet-list .wallet-list-item {
|
||||
width: 47.6%;
|
||||
height: 140px;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.wallet-list .wallet-list-item .wallet-list-item-link {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -1558,9 +1558,6 @@ h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
|
||||
font-weight:normal;
|
||||
border-bottom: 3px double #ddd;
|
||||
}
|
||||
.accordion-content {
|
||||
display: none;
|
||||
}
|
||||
.anchorAf{
|
||||
position:relative;
|
||||
}
|
||||
@ -5049,6 +5046,7 @@ br.big {
|
||||
}
|
||||
}
|
||||
|
||||
@import 'wallet-menu-noscript';
|
||||
@import 'wallets';
|
||||
@import 'wallet-selector';
|
||||
@import 'helper';
|
||||
|
||||
12
css/rtl.scss
12
css/rtl.scss
@ -659,18 +659,6 @@ h2 .rssicon{
|
||||
padding-right:0;
|
||||
margin-right:0;
|
||||
}
|
||||
.walletmenu>ul.menutap>li:hover{
|
||||
background-position:right 6px;
|
||||
}
|
||||
.walletmenu>ul.menutap>li>ul>li:hover{
|
||||
background-position:right 10px;
|
||||
}
|
||||
.walletmenu>ul.menutap>li.hover{
|
||||
background-position:right -62px;
|
||||
}
|
||||
.walletmenu>ul.menutap>li>ul>li.hover{
|
||||
background-position:right -24px;
|
||||
}
|
||||
.wallets.walletsmobile>div>div>h2:first-child+div+div+div>div{
|
||||
padding:8px 22px 8px 0;
|
||||
background-position:right 7px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user