diff --git a/index.html b/index.html index 9ad406706cdc07cbf5c759835df3125ee5072064..a0ea081ea6e15021ede54e68031b729c2c37461b 100644 --- a/index.html +++ b/index.html @@ -76,7 +76,9 @@ Tweet - Donate + + Donate + 1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i diff --git a/style/main.css b/style/main.css index 8e56bb6d107a265f9586c38a43b329cbd5a206f1..cec63657d687f557fdb3e559d43edfce5baf4921 100644 --- a/style/main.css +++ b/style/main.css @@ -642,4 +642,56 @@ hr { .game-message .lower { margin-top: 30px !important; } } .btc-donate { - font-size: 14px; } + position: relative; + margin-left: 20px; + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; } + .btc-donate img { + vertical-align: -2px; + margin-right: 8px; } + .btc-donate a { + color: #f9f6f2; + text-decoration: none; + font-weight: normal; } + .btc-donate .address { + cursor: auto; + position: absolute; + width: 340px; + right: 50%; + margin-right: -170px; + padding-bottom: 7px; + top: 40px; + opacity: 0; + -webkit-transition: 200ms ease; + -moz-transition: 200ms ease; + -webkit-transition-property: top, opacity; + -moz-transition-property: top, opacity; } + .btc-donate .address:after { + position: absolute; + border-top: 10px solid #bbada0; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + content: ""; + bottom: 0px; + left: 50%; + margin-left: -7px; } + .btc-donate .address code { + background-color: #bbada0; + padding: 10px 15px; + width: 100%; + border-radius: 3px; + line-height: 1; + font-weight: normal; + font-size: 15px; + font-family: Consolas, "Liberation Mono", Courier, monospace; + text-align: center; } + .btc-donate:hover .address, .btc-donate .address:hover .address { + opacity: 1; + top: -45px; } diff --git a/style/main.scss b/style/main.scss index 00dd8d49f175dfbc0dd4240ced8969c900ec418d..f41928b419d5fa56da63ca517358ff36dbdce2b4 100644 --- a/style/main.scss +++ b/style/main.scss @@ -493,5 +493,68 @@ hr { // Bitcoin donate button .btc-donate { - font-size: 14px; + // font-size: 14px; + position: relative; + margin-left: 20px; + @include button; + cursor: pointer; + + img { + vertical-align: -2px; + margin-right: 8px; + } + + a { + color: $bright-text-color; + text-decoration: none; + font-weight: normal; + } + + .address { + // display: none; + cursor: auto; + position: absolute; + // background: red; + width: 340px; + right: 50%; + margin-right: -170px; + + padding-bottom: 7px; + + top: 40px; + opacity: 0; + @include transition(200ms ease); + @include transition-property(top, opacity); + + &:after { + position: absolute; + border-top: 10px solid $game-container-background; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + content: ""; + bottom: 0px; + left: 50%; + margin-left: -7px; + } + + code { + background-color: $game-container-background; + padding: 10px 15px; + width: 100%; + border-radius: 3px; + line-height: 1; + font-weight: normal; + font-size: 15px; + font-family: Consolas, "Liberation Mono", Courier, monospace; + text-align: center; + + } + } + + &:hover, .address:hover { + .address { + opacity: 1; + top: -45px; + } + } }