diff --git a/web/index.html b/web/index.html index 996cb60..90578ac 100755 --- a/web/index.html +++ b/web/index.html @@ -50,10 +50,9 @@ -
+

    -lol
      '; + '
      from '+orderStorage[i].alias + '
      ' + + '
      via '+orderStorage[i].hops+' nodes
      '; } document.getElementById( 'inbox' ).innerHTML = contentString; } diff --git a/web/style.css b/web/style.css index 8fb1e41..0d6eb6e 100755 --- a/web/style.css +++ b/web/style.css @@ -48,6 +48,33 @@ body{ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } + + .nodehops{ + position: absolute; + float: right; + right:20px; + text-align: right; + padding: 0px; + margin-top:-60px; + -moz-box-shadow:0 0 23px #bbb; + -webkit-box-shadow:0 0 23px #bbb; + box-shadow:0 0 23px #bbb; + -webkit-border-top-left-radius:123px; + -webkit-border-top-right-radius:123px; + -webkit-border-bottom-right-radius:123px; + -webkit-border-bottom-left-radius:123px; + -moz-border-radius-bottomright:123px; + -moz-border-radius-bottomleft:123px; + -moz-border-top-left-radius:123px; + -moz-border-top-right-radius:123px; + border-top-left-radius:123px; + border-top-right-radius:123px; + border-bottom-right-radius:123px; + border-bottom-left-radius:123px; + background:#fff; + +} + } /* resize images on desktop */ @@ -66,7 +93,7 @@ body{ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } -} + img.photo-message{ /* disable anti aliasing */ @@ -81,6 +108,7 @@ img.photo-message{ } .photo-message{ /* rounded corner imgs on desktop...*/ + padding:30px; width:100%; height:100%; overflow:hidden; @@ -98,11 +126,45 @@ img.photo-message{ border-bottom-left-radius:123px; } +.nodehops{ + position: absolute; + float: right; + right:20px; + text-align: right; + padding: 4px; + margin-top:-60px; + -moz-box-shadow:0 0 23px #bbb; + -webkit-box-shadow:0 0 23px #bbb; + box-shadow:0 0 23px #bbb; + -webkit-border-top-left-radius:123px; + -webkit-border-top-right-radius:123px; + -webkit-border-bottom-right-radius:123px; + -webkit-border-bottom-left-radius:123px; + -moz-border-radius-bottomright:123px; + -moz-border-radius-bottomleft:123px; + -moz-border-top-left-radius:123px; + -moz-border-top-right-radius:123px; + border-top-left-radius:123px; + border-top-right-radius:123px; + border-bottom-right-radius:123px; + border-bottom-left-radius:123px; + background:#fff; + +} +} + + + img.emo { width: 22px; height: 22px; } +p.text-message{ +padding: 30px; +padding-top: 40px; +} + #input-footer{ position: fixed; top:0px; @@ -411,66 +473,23 @@ hr{ } - - -.node { +.node, .hops { font-size:10px; - margin-top:-30px; - display: none; - position: absolute; + display: inline-block; word-wrap:break-word; overflow: visible; - -moz-box-shadow:0 0 23px #bbb; - -webkit-box-shadow:0 0 23px #bbb; - box-shadow:0 0 23px #bbb; - -webkit-border-top-left-radius:123px; - -webkit-border-top-right-radius:123px; - -webkit-border-bottom-right-radius:123px; - -webkit-border-bottom-left-radius:123px; - -moz-border-radius-bottomright:123px; - -moz-border-radius-bottomleft:123px; - -moz-border-top-left-radius:123px; - -moz-border-top-right-radius:123px; - border-top-left-radius:123px; - border-top-right-radius:123px; - border-bottom-right-radius:123px; - border-bottom-left-radius:123px; - background:#fff; -} -.hops { - display: none; - font-size:10px; - //padding: 10px; - margin-top:-30px; - position: absolute; - word-wrap:break-word; - overflow: visible; - -moz-box-shadow:0 0 23px #bbb; - -webkit-box-shadow:0 0 23px #bbb; - box-shadow:0 0 23px #bbb; - -webkit-border-top-left-radius:123px; - -webkit-border-top-right-radius:123px; - -webkit-border-bottom-right-radius:123px; - -webkit-border-bottom-left-radius:123px; - -moz-border-radius-bottomright:123px; - -moz-border-radius-bottomleft:123px; - -moz-border-top-left-radius:123px; - -moz-border-top-right-radius:123px; - border-top-left-radius:123px; - border-top-right-radius:123px; - border-bottom-right-radius:123px; - border-bottom-left-radius:123px; - background:#fff; + } .message-text { font-size: 25px; } + .date-sender { position: absolute; font-size: 15px; - + padding: 4px; word-wrap:break-word; overflow: visible; -moz-box-shadow:0 0 23px #bbb;