diff --git a/_includes/layout/base/wallets-selector.html b/_includes/layout/base/wallets-selector.html index 9354d44c..b36436bc 100644 --- a/_includes/layout/base/wallets-selector.html +++ b/_includes/layout/base/wallets-selector.html @@ -6,90 +6,436 @@ http://opensource.org/licenses/MIT.
-

Below is a list of wallets available for your operating system

- - - - - - - - - - - - - - - - {% for wallet in site.wallets %} - {% for platform in wallet.platform %} - {% for os in platform.os %} - - - {% for check in os.check %} - {% assign checkName = check[0] %} - {% if checkName == "privacy" %} - {% continue %} - {% endif %} - {% assign checkValue = check[1] %} - - {% endfor %} - {% if os.privacycheck %} - {% for privacycheck in os.privacycheck %} - {% assign privacycheckValue = privacycheck[1] %} - - {% endfor %} - {% else %} - - - - {% endif %} - - {% endfor %} - {% endfor %} - {% endfor %} - -
-

iOS Wallets:

- 		-

Control

- 		-

Validation

- 		-

Transparency

- 		-

Environment

- 		-

Fees

- 		-

Reuse

- 		-

Privacy
Disclosure

- 		-

Tor

-
- {{ wallet.title }} - {{wallet.title}} - -
- 		-
- 		---
+
+
+
+

Wallet type:

+
+
+
+
+

Mobile:

+
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ + + +
+
+
+
+

Desktop:

+
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ + + +
+
+
+
+
+
+

Hardware:

+
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+
+
+
+

Web:

+
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+
+
+
+
+
+

User type:

+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+
+
+

Important criteria:

+ 1/3 +
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+
+
+

Features:

+ 1/2 +
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+ info +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+

Need some help?

+

You can find more information and help on the resources and community pages or on the Wiki FAQ

+
-
-
-
-

- Good

-
-
-
-

- Caution

-
-
-
-

- Neural

+
+

Below is a list of wallets available for your operating system

+ + + + + + + + + + + + + + + + {% for wallet in site.wallets %} + {% for platform in wallet.platform %} + {% for os in platform.os %} + + + {% for check in os.check %} + {% assign checkName = check[0] %} + {% if checkName == "privacy" %} + {% continue %} + {% endif %} + {% assign checkValue = check[1] %} + + {% endfor %} + {% if os.privacycheck %} + {% for privacycheck in os.privacycheck %} + {% assign privacycheckValue = privacycheck[1] %} + + {% endfor %} + {% else %} + + + + {% endif %} + + {% endfor %} + {% endfor %} + {% endfor %} + +
+

iOS Wallets:

+ 		+

Control

+ 		+

Validation

+ 		+

Transparency

+ 		+

Environment

+ 		+

Fees

+ 		+

Reuse

+ 		+

Privacy
Disclosure

+ 		+

Tor

+
+ {{ wallet.title }} + {{wallet.title}} + +
+ 		+
+ 		---
+ +
+
+
+

- Good

+
+
+
+

- Caution

+
+
+
+

- Neural

+
+
+
diff --git a/_sass/_wallet-selector.scss b/_sass/_wallet-selector.scss new file mode 100644 index 00000000..c7c6155a --- /dev/null +++ b/_sass/_wallet-selector.scss @@ -0,0 +1,151 @@ +.tooltip-trigger { + position: relative; +} +.tooltip { + position: absolute; + bottom: 0; + left: 50%; + width: 200px; + transform: translate(-50%, 100%); + padding: 10px; + background: #FFFFFF; + border: 1px solid #E1E1E1; + border-radius: 3px; + font-size: 12px; + color: #13161F; + line-height: 22px; +} + +.wallet-selector { + padding: 50px 0 25px; +} +.wallet-selector-row { + display: flex; +} +.sidebar-selector { + width: 270px; + padding: 15px; + margin-right: 130px; + background: #f8f8f8; +} +.sidebar-selector-title { + margin: 0 0 5px; + font-size: 20px; + color: #13161F; + line-height: 36px; +} +.sidebar-selector-platforms-row { + display: flex; +} +.sidebar-selector-platform { + width: 100%; +} +.sidebar-selector-label-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 5px; +} +.sidebar-selector-label { + margin: 0; + font-weight: 600; + font-size: 16px; + color: #13161F; + line-height: 30px; +} + +.wallet-table-head { + border: none; +} +.wallet-table { + border-collapse: separate; + border-spacing: 0 9px; +} +.wallet-table-title { + font-weight: 400; + font-size: 14px; + color: #13161F; + line-height: 1.4; + text-align: center; +} +.wallet-label { + font-weight: 600; + font-size: 17px; + color: #13161F; + line-height: 1.4; + vertical-align: middle; +} +.wallet-table-row { + cursor: pointer; +} +.wallet-table-data { + padding: 20px; + border: 1px solid #DADADA; + border-left: 0; + border-right: 0; +} +.wallet-table-data:first-child { + padding-right: 25px; + border-left: 1px solid #DADADA; +} +.wallet-table-data:last-child { + padding-right: 25px; + border-right: 1px solid #DADADA; +} +.wallet-img { + width: 35px; + margin-right: 13px; + vertical-align: middle; +} + +.wallet-hints-row { + display: flex; + align-items: center; + margin-top: 20px; +} +.wallet-hint { + display: flex; + align-items: center; + margin-right: 30px; +} +.wallet-good { + margin: 0 auto; + width: 13px; + height: 13px; + border-radius: 50%; + background: #7EBF1E; +} +.wallet-caution { + margin: 0 auto; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 11px solid #F7931A; +} +.wallet-neutral { + margin: 0 auto; + width: 12px; + height: 12px; + background: #aaa; +} +.wallet-hint-text { + margin-left: 8px; + font-size: 14px; + color: #13161F; + line-height: 30px; +} + +.wallet-table-headline { + margin-bottom: 37px; + text-align: center; + font-size: 22px; + color: #13161F; + line-height: 36px; +} +.wallet-table-head:first-child .wallet-table-title { + text-align: left; + font-size: 22px; + color: #13161F; + line-height: 36px; +} \ No newline at end of file diff --git a/_sass/_wallets.scss b/_sass/_wallets.scss index ae281ad6..81b191a5 100644 --- a/_sass/_wallets.scss +++ b/_sass/_wallets.scss @@ -133,105 +133,6 @@ $checks: control, validation, transparency, environment, fees, privacy; $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600; -.wallet-selector { - padding: 50px 0 25px; -} -.wallet-table-head { - border: none; -} -.wallet-table { - border-collapse: separate; - border-spacing: 0 9px; -} -.wallet-table-title { - font-weight: 400; - font-size: 14px; - color: #13161F; - line-height: 1.4; - text-align: center; -} -.wallet-label { - font-weight: 600; - font-size: 17px; - color: #13161F; - line-height: 1.4; - vertical-align: middle; -} -.wallet-table-row { - cursor: pointer; -} -.wallet-table-data { - padding: 20px; - border: 1px solid #DADADA; - border-left: 0; - border-right: 0; -} -.wallet-table-data:first-child { - padding-right: 25px; - border-left: 1px solid #DADADA; -} -.wallet-table-data:last-child { - padding-right: 25px; - border-right: 1px solid #DADADA; -} -.wallet-img { - width: 35px; - margin-right: 13px; - vertical-align: middle; -} - -.wallet-hints-row { - display: flex; - align-items: center; - margin-top: 20px; -} -.wallet-hint { - display: flex; - align-items: center; - margin-right: 30px; -} -.wallet-good { - margin: 0 auto; - width: 13px; - height: 13px; - border-radius: 50%; - background: #7EBF1E; -} -.wallet-caution { - margin: 0 auto; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 11px solid #F7931A; -} -.wallet-neutral { - margin: 0 auto; - width: 12px; - height: 12px; - background: #aaa; -} -.wallet-hint-text { - margin-left: 8px; - font-size: 14px; - color: #13161F; - line-height: 30px; -} - -.wallet-table-headline { - margin-bottom: 37px; - text-align: center; - font-size: 22px; - color: #13161F; - line-height: 36px; -} -.wallet-table-head:first-child .wallet-table-title { - text-align: left; - font-size: 22px; - color: #13161F; - line-height: 36px; -} - .wallet { .wallet-logo-container { text-align: center; @@ -564,12 +465,6 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600; background-size: contain; } -// .wallet-os-ico-dark { -// display: block; -// width: 18px; -// height: 18px; -// } - .wallet-list-os-link:hover .wallet-ico-tooltip { display: block; } @@ -842,3 +737,340 @@ $scores: good $black 600, pass $black 600, neutral $black 600, fail $black 600; height: 100%; } } + +.tooltip-trigger { + position: relative; +} +.tooltip-trigger:hover .tooltip { + display: block; +} +.tooltip { + display: none; + position: absolute; + bottom: 0; + left: 50%; + width: 200px; + transform: translate(-50%, 100%); + padding: 10px; + background: #FFFFFF; + border: 1px solid #E1E1E1; + border-radius: 3px; + font-size: 12px; + color: #13161F; + line-height: 22px; + z-index: 1000; +} +.tooltip::after, +.tooltip::before { + content: ''; + position: absolute; + top: 0; + left: 22px; + transform: translateY(-100%) rotate(-90deg); + border: 4px solid transparent; + border-left: 4px solid #fff; +} +.tooltip::after { + top: 0; +} +.tooltip::before { + top: -1px; + border-left: 4px solid #dadada; +} +.checkbox-wrapper .checkbox { + position: absolute; + z-index: -1; + opacity: 0; + margin: 0; +} +.checkbox-text { + position: relative; + padding: 0 0 0 36px; + font-weight: 600; + font-size: 16px; + color: #4D5060; + line-height: 30px; + cursor: pointer; +} +.checkbox-text:before { + content: ''; + position: absolute; + top: 4px; + left: 0; + width: 22px; + height: 22px; + background: #fff; + border: 1px solid #dadada; +} +.checkbox-wrapper .checkbox:checked + .checkbox-text:before { + background: #F7931A url('../img/icons/check.svg') center no-repeat; + border: 1px solid #F7931A; +} +.checkbox-wrapper .checkbox:checked + .checkbox-text { + color: #13161F; +} + + +.user-radio-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.user-radio-row + .user-radio-row { + margin-top: 5px; +} +.user-radio { + position: absolute; + z-index: -1; + opacity: 0; + margin: 0; +} +.user-radio-text { + position: relative; + padding: 0 0 0 36px; + font-weight: 600; + font-size: 16px; + color: #4D5060; + line-height: 30px; + cursor: pointer; +} +.user-radio-text:before { + content: ''; + position: absolute; + top: 3px; + left: 0; + width: 22px; + height: 22px; + border: 1px solid #dadada; + border-radius: 50%; + background: #FFF; +} +.user-radio-text:after { + content: ''; + position: absolute; + top: 10px; + left: 7px; + width: 10px; + height: 10px; + border-radius: 50%; + background: #F7931A; + opacity: 0; +} +.user-radio-wrapper .user-radio:checked + .user-radio-text:after { + opacity: 1; +} +.user-radio-wrapper .user-radio:checked + .user-radio-text { + color: #13161F +} + +.platform-radio-wrapper + .platform-radio-wrapper { + margin-left: 5px; +} +.platform-radio { + position: absolute; + z-index: -1; + opacity: 0; +} +.platform-radio-custom { + position: relative; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: #FFFFFF; + border: 1px solid #DADADA; + box-sizing: border-box; + cursor: pointer; +} +.platform-radio-icon-active { + display: none; +} +.platform-radio:checked + .platform-radio-custom { + border: 2px solid #F7931A; +} +.platform-radio:checked + .platform-radio-custom .platform-radio-icon-active { + display: block; +} +.platform-radio:checked + .platform-radio-custom .platform-radio-icon-inactive { + display: none; +} + +.wallet-selector { + padding: 50px 0 25px; +} +.wallet-selector-row { + display: flex; + align-items: flex-start; +} +.sidebar-selector { + width: 270px; + padding: 15px; + margin-right: 30px; + background: #f8f8f8; +} +.sidebar-selector-section { + padding-bottom: 16px; + margin-bottom: 10px; + border-bottom: 1px solid #dadada; +} +.sidebar-selector-title { + margin: 0 0 5px; + font-size: 20px; + color: #13161F; + line-height: 36px; +} +.sidebar-selector-text { + font-size: 16px; + color: #4D5060; + line-height: 22px; +} +.sidebar-selector-platforms-row + .sidebar-selector-platforms-row { + margin-top: 13px; +} +.sidebar-selector-platforms-row { + display: flex; +} +.sidebar-selector-platform { + width: 118px; +} +.sidebar-selector-platform + .sidebar-selector-platform { + margin-left: 15px; +} +.sidebar-selector-label-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 5px; +} +.sidebar-selector-label { + margin: 0; + font-weight: 600; + font-size: 16px; + color: #13161F; + line-height: 30px; +} +.wallet-selector-tooltip { + left: -20px; + transform: translate(0, 100%) +} +.sidebar-selector-os-row { + display: flex; +} +.sidebar-selector-section-top { + display: flex; + align-items: center; + justify-content: space-between; +} +.allowed-criteria-amount { + margin-bottom: 5px; + font-weight: 600; + font-size: 16px; + color: #13161F; + text-align: right; + line-height: 30px; +} +.important-checkbox-row { + display: flex; + justify-content: space-between; + align-items: center; +} +.important-checkbox-row + .important-checkbox-row { + margin-top: 10px; +} + +.wallet-table-head { + border: none; +} +.wallet-table { + border-collapse: separate; + border-spacing: 0 9px; +} +.wallet-table-title { + font-weight: 400; + font-size: 14px; + color: #13161F; + line-height: 1.4; + text-align: center; +} +.wallet-label { + font-weight: 600; + font-size: 17px; + color: #13161F; + line-height: 1.4; + vertical-align: middle; +} +.wallet-table-row { + cursor: pointer; +} +.wallet-table-data { + padding: 20px; + border: 1px solid #DADADA; + border-left: 0; + border-right: 0; +} +.wallet-table-data:first-child { + padding-right: 25px; + border-left: 1px solid #DADADA; +} +.wallet-table-data:last-child { + padding-right: 25px; + border-right: 1px solid #DADADA; +} +.wallet-img { + width: 35px; + margin-right: 13px; + vertical-align: middle; +} + +.wallet-hints-row { + display: flex; + align-items: center; + margin-top: 20px; +} +.wallet-hint { + display: flex; + align-items: center; + margin-right: 30px; +} +.wallet-good { + margin: 0 auto; + width: 13px; + height: 13px; + border-radius: 50%; + background: #7EBF1E; +} +.wallet-caution { + margin: 0 auto; + width: 0; + height: 0; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 11px solid #F7931A; +} +.wallet-neutral { + margin: 0 auto; + width: 12px; + height: 12px; + background: #aaa; +} +.wallet-hint-text { + margin-left: 8px; + font-size: 14px; + color: #13161F; + line-height: 30px; +} + +.wallet-table-headline { + margin-bottom: 37px; + text-align: center; + font-size: 22px; + color: #13161F; + line-height: 36px; +} +.wallet-table-head:first-child .wallet-table-title { + text-align: left; + font-size: 22px; + color: #13161F; + line-height: 36px; +} \ No newline at end of file diff --git a/img/icons/check.svg b/img/icons/check.svg new file mode 100644 index 00000000..9f8c6779 Binary files /dev/null and b/img/icons/check.svg differ diff --git a/img/icons/info-alt.svg b/img/icons/info-alt.svg new file mode 100644 index 00000000..f5be51e5 Binary files /dev/null and b/img/icons/info-alt.svg differ diff --git a/img/os/wallet_menu_android_bright.svg b/img/os/wallet_menu_android_bright.svg index 935d5ad8..b44ce8f7 100644 Binary files a/img/os/wallet_menu_android_bright.svg and b/img/os/wallet_menu_android_bright.svg differ diff --git a/img/os/wallet_menu_hardware.svg b/img/os/wallet_menu_hardware.svg index 3c613f62..895aaf1b 100644 Binary files a/img/os/wallet_menu_hardware.svg and b/img/os/wallet_menu_hardware.svg differ diff --git a/img/os/wallet_menu_hardware_bright.svg b/img/os/wallet_menu_hardware_bright.svg index da6d7691..3fcd0f3d 100644 Binary files a/img/os/wallet_menu_hardware_bright.svg and b/img/os/wallet_menu_hardware_bright.svg differ diff --git a/img/os/wallet_menu_linux_bright.svg b/img/os/wallet_menu_linux_bright.svg index 44f989f2..4d8bcb5a 100644 Binary files a/img/os/wallet_menu_linux_bright.svg and b/img/os/wallet_menu_linux_bright.svg differ diff --git a/img/os/wallet_menu_mac_bright.svg b/img/os/wallet_menu_mac_bright.svg index 3c09c3ed..baebc3fb 100644 Binary files a/img/os/wallet_menu_mac_bright.svg and b/img/os/wallet_menu_mac_bright.svg differ diff --git a/img/os/wallet_menu_web_bright.svg b/img/os/wallet_menu_web_bright.svg index 8577d595..039da637 100644 Binary files a/img/os/wallet_menu_web_bright.svg and b/img/os/wallet_menu_web_bright.svg differ diff --git a/img/os/wallet_menu_windows_bright.svg b/img/os/wallet_menu_windows_bright.svg index 45e9e06d..3e78be2c 100644 Binary files a/img/os/wallet_menu_windows_bright.svg and b/img/os/wallet_menu_windows_bright.svg differ