From dfaed35136ba1ed24cfb49acb87e837a11a2a8d1 Mon Sep 17 00:00:00 2001 From: Ugnich Anton Date: Wed, 23 Oct 2013 23:20:21 +0700 Subject: New feed design --- web/style3.css | 55 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 27 deletions(-) (limited to 'web/style3.css') diff --git a/web/style3.css b/web/style3.css index 5e49b6cc..8a59f4ee 100644 --- a/web/style3.css +++ b/web/style3.css @@ -9,10 +9,10 @@ hr { height: 1px; background: #CCC; margin: 10px 0; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .u { text-decoration: underline; } -#header, #topwrapper { width: 850px; } +#header, #topwrapper { width: 860px; } #content, #footer { width: 600px; } #header, #topwrapper, #footer { margin: 0 auto; } -#content { margin: 15px 0 0 250px; } +#content { margin: 15px 0 0 260px; } /********/ @@ -41,30 +41,31 @@ pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; #geomap { width: 600px; height: 300px; margin-top: 1em; overflow: hidden; } -.msg { padding: 15px; margin: 8px 0 16px 0; width: 570px; background: #FFF; } -.ads { padding: 13px 10px 5px 10px; margin: 8px 0 16px 0; background: #FFF; } -.msgthread { margin-bottom: 0; border-bottom: 1px solid #CCC; } -.msg-avatar { float: left; height: 1px; overflow: visible; } +.msg { margin: 10px 0 20px 0; } +.ads { padding: 13px 10px 5px 10px; margin: 8px 0 16px 58px; background: #FFF; } +.msgthread { margin-bottom: 0; } +.msg-avatar { float: left; width: 48px; height: 48px; } .msg-avatar img { width: 48px; height: 48px; vertical-align: top; } -.msg-ts { float: right; font-size: small; vertical-align: top; } +.msg-cont { background: #FFF; margin-left: 58px; padding: 12px 15px; width: 512px; } +.msg-menu { float: right; width: 16px; height: 16px; } +.msg-menu>a { display: block; width: 16px; height: 16px; vertical-align: top; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAALRQTFRFAAAAldX/ncT/ksj/ltL/nMb/lMn/mcz/l9H/lcr/mZmZmcz/m83/mJiYmZmZmcz/mM7/mpqamsr/l8v/m83/mJiYmM7/l8v/mZmZmcz/mpqamMv/mcz/mM3/ms3/msv/mMv/mMz/mcz/msz/mc3/mMz/mcz/msz/mc3/mcv/mc3/mcv/mcz/mcz/mcz/mcz/mZmZmZmZmcz/mcz/mcz/mcz/mcz/mcz/mcz/mcz/mcz/mZmZiZsGCAAAADx0Uk5TAAwNDhESExQWGC0tLi8yMjQ1NTY4OTk7PDxESktNUVNUd3h5eoGCg4mKmMvMzc7P29zd3uLj7O3u8vT2+A5wCAAAAJFJREFUGBkFwQlCgkAAAMDRxEySkryyzDxSAc+gkvX//2oGAAB42J5COG46AJ+/+SiKxvl1DsyqJyCtZnBXxgDxdxPrHQDZCvvUNIFkalAgtCSXHr1LIqpRt+ifu91zn6hG8YLh7TbEoMAyg8kEsgWaZQzwWDbgvXoG0p83YH7Nx+32a/73AdDZHEIovu4BAMA/t6QMuyHliCkAAAAASUVORK5CYII=") no-repeat; } +.msg-header { overflow: hidden; } +.msg-ts { font-size: small; vertical-align: top; margin: 5px 0; } .msg-ts, .msg-ts>a { color: #999; } -.msg-menu { width: 16px; height: 16px; display: inline-block; vertical-align: top; margin: 0 0 0 6px; - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAALRQTFRFAAAAldX/ncT/ksj/ltL/nMb/lMn/mcz/l9H/lcr/mZmZmcz/m83/mJiYmZmZmcz/mM7/mpqamsr/l8v/m83/mJiYmM7/l8v/mZmZmcz/mpqamMv/mcz/mM3/ms3/msv/mMv/mMz/mcz/msz/mc3/mMz/mcz/msz/mc3/mcv/mc3/mcv/mcz/mcz/mcz/mcz/mZmZmZmZmcz/mcz/mcz/mcz/mcz/mcz/mcz/mcz/mcz/mZmZiZsGCAAAADx0Uk5TAAwNDhESExQWGC0tLi8yMjQ1NTY4OTk7PDxESktNUVNUd3h5eoGCg4mKmMvMzc7P29zd3uLj7O3u8vT2+A5wCAAAAJFJREFUGBkFwQlCgkAAAMDRxEySkryyzDxSAc+gkvX//2oGAAB42J5COG46AJ+/+SiKxvl1DsyqJyCtZnBXxgDxdxPrHQDZCvvUNIFkalAgtCSXHr1LIqpRt+ifu91zn6hG8YLh7TbEoMAyg8kEsgWaZQzwWDbgvXoG0p83YH7Nx+32a/73AdDZHEIovu4BAMA/t6QMuyHliCkAAAAASUVORK5CYII=") no-repeat; } -.msg-header { float: left; margin: 0 0 8px 10px; max-width: 350px; overflow: hidden; } -.msg-place { clear: both; font-size: small; margin: 8px 0 8px 58px; } +.msg-place { font-size: small; } .msg-place>a { color: #999; } -.msg-txt { clear: both; margin: 8px 0 8px 58px; overflow: hidden; } -.msg-media { text-align: center; margin: 8px 0 0px 58px; } -.msg-links { font-size: small; margin: 8px 0 0 68px; color: #999; } -.msg-comments { margin: 8px 0 0 58px; padding: 5px 0 0 10px; overflow: hidden; font-size: small; border-top: 1px solid #DDD; color: #AAA; } -.msg-comment { margin: 8px 0 0 58px; } -.msg-comment textarea { width: 505px; padding: 2px; resize: vertical; vertical-align: top; min-height: 12pt; height: 12pt; border: 1px solid #DDD; } +.msg-txt { overflow: hidden; margin: 10px 0 12px 0; } +.msg-media { text-align: center; } +.msg-links { font-size: small; color: #999; margin: 5px 0 0 0; } +.msg-comments { overflow: hidden; font-size: small; color: #AAA; text-indent: 10px; margin-top: 10px; } +.msg-comment { margin: 5px 0; } +.msg-comment textarea { width: 506px; padding: 2px; resize: vertical; vertical-align: top; min-height: 12pt; height: 12pt; border: 1px solid #DDD; } .msg-comment .narrow { width: 450px; } .msg-comment input { width: 50px; margin-left: 6px; vertical-align: top; border: 1px solid #CCC; background: #EEE; color: #999; } -.msg-recomms { margin: 10px 0 0 68px; overflow: hidden; font-size: small; color: #AAA; } +.msg-recomms { margin-top: 10px; overflow: hidden; font-size: small; color: #AAA; text-indent: 10px; } blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-left: 10px; } -#mtoolbar { width: 600px; margin-left: 1px; background: #E5E5DD; } +#mtoolbar { width: 542px; margin-left: 58px; background: #E5E5DD; border-top: 1px solid #CCC; } #mtoolbar ul, #mtoolbar a { padding: 5px; } #mtoolbar li { display: inline; } #mtoolbar div { display: inline-block; width: 16px; height: 16px; background: url(//static.juick.com/toolbar-icons.png) no-repeat; vertical-align: middle; margin: 5px; } @@ -123,9 +124,9 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef /******************************************************************************/ @media screen and (max-width: 850px) { - #header,#topwrapper,#content,#footer,#mtoolbar { width: auto; min-width: 320px; margin: 0 auto; } + #header,#topwrapper,#content,#footer,#mtoolbar { width: auto; min-width: 310px; margin: 0 auto; } - #hwrapper { position: fixed; top: 0; z-index: 1; } + #hwrapper { position: fixed; top: 0; z-index: 100; } #topwrapper { margin-top: 3em; } #header li { line-height: 42px; } @@ -139,17 +140,17 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef #hi-logo { width: 32px; background-position: -110px 0; margin: 0; } #hi-post { margin: 0; } - .msg { width: auto; min-width: 280px; } + .msg,.msg-cont { width: auto; min-width: 280px; } + .msg-cont,.ads { margin-left: 0; } + .msg-avatar { margin: 10px 10px 0 10px; width: 40px; height: 40px; } + .msg-avatar img { width: 40px; height: 40px; } .msg-comment textarea { width: 100%; } - .msg-header { margin-bottom: 6px; } - .msg-ts { clear: both; float: none; margin: 0 0 4px 58px; } - .msg-txt { clear: both; margin: 8px 0 0 0; } + .msg-txt { margin: 8px 0 0 0; } .msg-media { overflow: auto; } - .msg-media,.msg-links,.msg-comment,.msg-comments,.msg-recomms { margin-left: 0px; } .title2 h2 { font-size: large; } .fix,.abs { position: static; } #column { clear: both; margin: 0 3%; width: 44%; float: left; } #rcol { float: left; width: 44%; margin: 20px 3% 0 3%; } -} +} \ No newline at end of file -- cgit v1.2.3