Commit f139412795e7a08def9623b21c1350d58d2d3573
- Diff rendering mode:
- inline
- side by side
public/main.css
(47 / 66)
| 1 | /* body { background-color: #9ae4e8; color: #000000; } */ /* light blue */ | ||
| 2 | body { background-color: #329297; color: #000000; } /* darker */ | ||
| 1 | /*** Overall default formatting ***/ | ||
| 3 | 2 | ||
| 3 | html { | ||
| 4 | background-color: #329297; | ||
| 5 | color: #000000; | ||
| 6 | font-family: Verdana, Arial, Helvetica, sans-serif; | ||
| 7 | font-size: 90%; | ||
| 8 | line-height 2.4ex; | ||
| 9 | } | ||
| 10 | |||
| 11 | /*** End overall default formatting ***/ | ||
| 12 | |||
| 13 | /*** Formatting for message list ***/ | ||
| 14 | |||
| 4 | 15 | .timeline { | |
| 5 | 16 | margin:0 auto; | |
| 6 | 17 | width: 700px; | |
| … | … | ||
| 19 | 19 | ||
| 20 | 20 | .entry { | |
| 21 | 21 | background-color: #ffffff; | |
| 22 | /* border: 1px solid #9ae4e8; */ | ||
| 22 | height: 90px; | ||
| 23 | width: 700px; | ||
| 24 | margin: 10px 0px; | ||
| 25 | } | ||
| 26 | |||
| 27 | .rounded { | ||
| 23 | 28 | -webkit-border-radius: 6px; | |
| 24 | 29 | -moz-border-radius: 6px; | |
| 25 | vertical-align: middle; | ||
| 26 | height: 80px; | ||
| 27 | display: table; position: static; | ||
| 28 | width: 700px; | ||
| 29 | margin-top: 5px; | ||
| 30 | margin-bottom: 5px; | ||
| 31 | 30 | } | |
| 32 | 31 | ||
| 33 | 32 | .old { | |
| 34 | /* background-color: #dacece; */ | ||
| 35 | /* background-color: #329297; */ | ||
| 36 | 33 | background-color: #9ae4e8; | |
| 37 | /* border: 1px solid #9ae4e8; */ | ||
| 38 | /* -webkit-border-radius: 6px; */ | ||
| 39 | /* -moz-border-radius: 6px; */ | ||
| 40 | /* vertical-align: middle; */ | ||
| 41 | /* height: 80px; */ | ||
| 42 | /* display: table; position: static; */ | ||
| 43 | /* width: 700px; */ | ||
| 44 | 34 | } | |
| 45 | 35 | ||
| 46 | .entry_main { | ||
| 47 | height: 60px; | ||
| 36 | .message { | ||
| 37 | display: table-row; | ||
| 38 | height: 70px; | ||
| 39 | padding: 5px; | ||
| 40 | } | ||
| 41 | |||
| 42 | .message div { | ||
| 48 | 43 | display: table-cell; | |
| 44 | height: 100%; | ||
| 45 | padding: 5px 10px; | ||
| 49 | 46 | vertical-align: middle; | |
| 50 | position: static; | ||
| 47 | overflow: hidden; | ||
| 48 | /* text-overflow: ellipsis; */ | ||
| 51 | 49 | } | |
| 52 | 50 | ||
| 53 | 51 | .footer { | |
| 54 | 52 | height: 20px; | |
| 55 | font-size: 10px; | ||
| 56 | vertical-align: bottom; | ||
| 57 | text-align: right; | ||
| 58 | /* margin-right: 10px; */ | ||
| 53 | padding: 2px 12px; | ||
| 59 | 54 | border-top: dashed; | |
| 60 | 55 | border-top-width: 1px; | |
| 61 | 56 | border-top-color: #d3d3d3; | |
| 62 | padding-right: 2px; | ||
| 57 | font-size: 10px; | ||
| 58 | line-height: 2ex; | ||
| 59 | text-align: right; | ||
| 63 | 60 | } | |
| 64 | 61 | ||
| 65 | .image { | ||
| 66 | float: left; | ||
| 67 | margin: 10px; | ||
| 68 | vertical-align: middle; | ||
| 62 | .rounded .footer { | ||
| 63 | -moz-border-radius-bottomleft: 6px; | ||
| 64 | -moz-border-radius-bottomright: 6px; | ||
| 65 | -webkit-border-bottom-left-radius: 6px; | ||
| 66 | -webkit-border-bottom-right-radius: 6px; | ||
| 69 | 67 | } | |
| 70 | 68 | ||
| 71 | .text { | ||
| 72 | vertical-align: middle; | ||
| 73 | text-align: left; | ||
| 74 | /* text-overflow: ellipsis; */ | ||
| 75 | overflow: hidden; | ||
| 76 | width: 629px; /* the parent div is like 630px, so give us 1px margin */ | ||
| 69 | .old .footer { | ||
| 70 | border-top-color: #329297; | ||
| 77 | 71 | } | |
| 78 | 72 | ||
| 79 | .entry_time_text { margin-right: 10px; } | ||
| 80 | |||
| 81 | .outer { | ||
| 82 | /* border: 1px solid; */ | ||
| 83 | height: 60px; | ||
| 84 | overflow: hidden; | ||
| 85 | display: table; | ||
| 86 | position: static; | ||
| 73 | .footer_identica { | ||
| 74 | background-color: #FCCA9F; | ||
| 87 | 75 | } | |
| 88 | 76 | ||
| 89 | .middle { | ||
| 90 | /* width: 632; */ | ||
| 91 | /* height: 60px; */ | ||
| 92 | /* border: 1px dashed; */ | ||
| 93 | display: table-cell; | ||
| 94 | vertical-align: middle; | ||
| 95 | position: static; | ||
| 77 | a.button { | ||
| 78 | margin: 0 1.5em; | ||
| 96 | 79 | } | |
| 97 | 80 | ||
| 81 | /*** End formatting for message list ***/ | ||
| 82 | |||
| 98 | 83 | .floating_menu { | |
| 99 | 84 | margin: 0; | |
| 100 | 85 | position: fixed; | |
| … | … | ||
| 116 | 116 | margin: 5px; | |
| 117 | 117 | } | |
| 118 | 118 | ||
| 119 | .footer_identica { | ||
| 120 | -moz-border-radius-bottomleft: 6px; | ||
| 121 | -moz-border-radius-bottomright: 6px; | ||
| 122 | background-color: #FCCA9F; | ||
| 123 | } | ||
| 124 | |||
| 125 | 119 | .update_error { color: #FF0000; } | |
| 126 | 120 | ||
| 127 | 121 | .status_footer { | |
| 128 | 122 | font-size: 10px; | |
| 129 | 123 | text-align: right; | |
| 130 | } | ||
| 131 | |||
| 132 | .post_parent { | ||
| 133 | margin: auto; | ||
| 134 | width: 450px; | ||
| 135 | background-color: #ffffff; | ||
| 136 | -moz-border-radius: 6px; | ||
| 137 | /* vertical-align: middle; */ | ||
| 138 | /* display: none; */ | ||
| 139 | 124 | } | |
| 140 | 125 | ||
| 141 | 126 | .post { |
| 1 | /* | ||
| 2 | Copyright (c) 2009, Yahoo! Inc. All rights reserved. | ||
| 3 | Code licensed under the BSD License: | ||
| 4 | http://developer.yahoo.net/yui/license.txt | ||
| 5 | version: 2.7.0 | ||
| 6 | */ | ||
| 7 | html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;} |
views/timeline.html.erb
(9 / 9)
| 3 | 3 | <head> | |
| 4 | 4 | <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> | |
| 5 | 5 | <meta content="en-us" http-equiv="Content-Language" /> | |
| 6 | <link rel="stylesheet" type="text/css" href="yui-2.7.0-reset-min.css" /> | ||
| 6 | 7 | <link rel="stylesheet" type="text/css" href="main.css" title="default" /> | |
| 7 | 8 | ||
| 8 | 9 | <script type="text/javascript" src="jquery.js"></script> | |
| … | … | ||
| 17 | 17 | </head> | |
| 18 | 18 | ||
| 19 | 19 | <body> | |
| 20 | |||
| 20 | 21 | <div class="post_parent"> | |
| 21 | 22 | <div class="post"> | |
| 22 | 23 | <div class="post_textarea"> | |
| … | … | ||
| 62 | 62 | ||
| 63 | 63 | <div class="<%= old %> entry rounded <%= d['user']['screen_name'] %>"> | |
| 64 | 64 | ||
| 65 | <div class="outer"> <!-- outer --> | ||
| 65 | <div class="message"> <!-- message --> | ||
| 66 | 66 | ||
| 67 | <div class="image"> | ||
| 67 | <div> <!-- img --> | ||
| 68 | 68 | <img src="<%= d['user']['profile_image_url'] %>" | |
| 69 | 69 | height="48" width="48" alt="<%= d['user']['name'] %>" | |
| 70 | 70 | title="<%= d['user']['name'] %>" /> | |
| … | … | ||
| 73 | 73 | title="<%= d['user']['name'] %>"/> --> | |
| 74 | 74 | </div> <!-- image --> | |
| 75 | 75 | ||
| 76 | <div class="middle"> | ||
| 77 | <div class="inner text"> | ||
| 78 | <%= make_user_link(d) %> | ||
| 79 | <%= parse_text(d['origin'], d['text']) %> | ||
| 80 | </div> <!-- inner --> | ||
| 81 | </div> <!-- middle --> | ||
| 76 | <div> <!-- text --> | ||
| 77 | <%= make_user_link(d) %> | ||
| 78 | <%= parse_text(d['origin'], d['text']) %> | ||
| 79 | </div> <!-- text --> | ||
| 82 | 80 | ||
| 83 | </div> <!-- outer --> | ||
| 81 | </div> <!-- message --> | ||
| 84 | 82 | ||
| 85 | 83 | <div class="footer footer_<%= d['origin'] %>"> | |
| 86 | 84 | <% if d['in_reply_to_status_id'] %> |
