diff --git a/common/assets/images/browsers/chrome.svg b/common/assets/images/browsers/chrome.svg new file mode 100644 index 00000000000..7cfddbf3ac3 --- /dev/null +++ b/common/assets/images/browsers/chrome.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/common/assets/images/browsers/firefox.svg b/common/assets/images/browsers/firefox.svg new file mode 100644 index 00000000000..a99e1fd7dfe --- /dev/null +++ b/common/assets/images/browsers/firefox.svg @@ -0,0 +1 @@ + diff --git a/common/assets/images/browsers/opera.svg b/common/assets/images/browsers/opera.svg new file mode 100644 index 00000000000..c2ef6072337 --- /dev/null +++ b/common/assets/images/browsers/opera.svg @@ -0,0 +1 @@ + diff --git a/common/components/AlphaAgreement/index.scss b/common/components/AlphaAgreement/index.scss index 9493ee9ab99..ea5fab97374 100644 --- a/common/components/AlphaAgreement/index.scss +++ b/common/components/AlphaAgreement/index.scss @@ -1,33 +1,11 @@ @import "common/sass/variables"; +@import "common/sass/mixins"; .AlphaAgreement { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + @include cover-message; background: $brand-warning; - overflow: auto; - z-index: 10000; &-content { - max-width: 520px; - padding: 20px; - margin: 0 auto; - color: #fff; - text-shadow: 1px 1px 1px rgba(#000, 0.12); - overflow: auto; - - h2 { - font-size: 42px; - margin-bottom: 20px; - } - - p { - font-size: 20px; - margin-bottom: 15px; - } - &-buttons { padding-top: 20px; diff --git a/common/index.html b/common/index.html index a49b41c1955..3268314a618 100644 --- a/common/index.html +++ b/common/index.html @@ -2,25 +2,129 @@ - - MyEtherWallet - - - - - - - - - - - - - + + MyEtherWallet + + + + + + + + + + + + + -
+
+ + + + + + - \ No newline at end of file + diff --git a/common/sass/mixins.scss b/common/sass/mixins.scss index f27856b7ee4..e055811b6a8 100644 --- a/common/sass/mixins.scss +++ b/common/sass/mixins.scss @@ -33,3 +33,39 @@ text-overflow: ellipsis; white-space: nowrap; } + +// Alpha agreement, noscript, bad browser, etc. +@mixin cover-message { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; + background: $brand-info; + z-index: $zindex-top; + + &-content { + max-width: 580px; + padding: 20px; + margin: 0 auto; + color: #fff; + text-shadow: 1px 1px 1px rgba(#000, 0.12); + overflow: auto; + + h2 { + font-size: 40px; + margin-bottom: 20px; + } + + p { + font-size: 20px; + margin-bottom: 15px; + + a { + color: #fff; + text-decoration: underline; + } + } + } +} diff --git a/common/sass/styles.scss b/common/sass/styles.scss index 1b531641d8f..68bbfff0493 100644 --- a/common/sass/styles.scss +++ b/common/sass/styles.scss @@ -22,6 +22,8 @@ @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities"; // --- CUSTOM --- +@import "./styles/badbrowser"; +@import "./styles/noscript"; @import "./styles/overrides"; @import "./styles/scaffolding"; @import "./styles/tab"; diff --git a/common/sass/styles/badbrowser.scss b/common/sass/styles/badbrowser.scss new file mode 100644 index 00000000000..e56cd17ca95 --- /dev/null +++ b/common/sass/styles/badbrowser.scss @@ -0,0 +1,69 @@ +@import "common/sass/variables"; +@import "common/sass/mixins"; + +.BadBrowser { + @include cover-message; + + &.is-open { + // Override inline display none + display: block !important; + } + + &-content { + &-browsers { + text-align: center; + + &-browser { + position: relative; + display: inline-block; + width: 20%; + margin: 5%; + background-position: center; + background-repeat: no-repeat; + + &:after { + content: ""; + display: block; + padding-bottom: 100%; + } + + &-name { + position: absolute; + top: 100%; + left: 0; + width: 100%; + text-align: center; + padding-top: 12px; + color: rgba(#fff, 0.8); + } + + &.chrome { + background-image: url('~assets/images/browsers/chrome.svg'); + } + + &.firefox { + background-image: url('~assets/images/browsers/firefox.svg'); + } + + &.opera { + background-image: url('~assets/images/browsers/opera.svg'); + } + } + } + } + + // Hide mobile specific messaging by default + .is-mobile { + display: none; + } + + &.is-mobile { + .is-mobile { + display: block; + } + + .is-desktop { + display: none; + } + } +} diff --git a/common/sass/styles/noscript.scss b/common/sass/styles/noscript.scss new file mode 100644 index 00000000000..155e0472334 --- /dev/null +++ b/common/sass/styles/noscript.scss @@ -0,0 +1,6 @@ +@import "common/sass/variables"; +@import "common/sass/mixins"; + +.NoScript { + @include cover-message; +} diff --git a/common/sass/variables.scss b/common/sass/variables.scss index 8feb493fd87..c49b8c91401 100644 --- a/common/sass/variables.scss +++ b/common/sass/variables.scss @@ -8,6 +8,7 @@ @import "./variables/tables"; @import "./variables/buttons"; @import "./variables/forms"; +@import "./variables/zindex"; // Misc. $border-radius-small: 0px; diff --git a/common/sass/variables/zindex.scss b/common/sass/variables/zindex.scss index 06b32e6da92..fa8a8addc95 100644 --- a/common/sass/variables/zindex.scss +++ b/common/sass/variables/zindex.scss @@ -6,3 +6,5 @@ $zindex-navbar-fixed: 1030; $zindex-modal-background: 1040; $zindex-modal: 1050; $zindex-alerts: 1060; + +$zindex-top: 10000;