Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style updates

Browse source
This commit is contained in:
Felix Niklas 2012-04-20 17:38:21 +02:00
parent d46e1a91f5
commit f2617c9b38
2 changed files with 74 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
prototype/css/style.css
View file

@ -6,6 +6,7 @@ body {
color: rgba(0,0,0,.89); color: rgba(0,0,0,.89);
font: 12px/17px "Helvetica Neue", Helvetica, Arial, sans-serif; font: 12px/17px "Helvetica Neue", Helvetica, Arial, sans-serif;
background: url(../img/minimalism_by_nerdynotdirty.jpg); background: url(../img/minimalism_by_nerdynotdirty.jpg);
background: url(../img/bg.jpg);
background-size: cover; background-size: cover;
} }
.avatar { .avatar {
@ -15,8 +16,9 @@ body {
background-size: cover; background-size: cover;
} }
header { header {
height: 36px; height: 40px;
padding: 8px 0 8px 13px; padding: 12px 0 8px 13px;
background: #eee;
border-bottom: 1px solid hsla(222, 10%, 55%,.34); border-bottom: 1px solid hsla(222, 10%, 55%,.34);
} }
h2 { h2 {
@ -30,6 +32,9 @@ header {
margin-right: 13px; margin-right: 13px;
float: right; float: right;
} }
header button {
margin-top: -3px;
}
.sidebar { .sidebar {
width: 200px; width: 200px;
left: 0; left: 0;
@ -105,8 +110,16 @@ header {
float: right; float: right;
padding: 1px 5px; padding: 1px 5px;
font-size: 10px; font-size: 10px;
background: hsl(10, 100%, 50%); font-weight: bold;
border-radius: 3px; text-shadow: 0 1px rgba(255,255,255,.55);
background-color: hsl(55, 100%, 50%);
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.05));
border-radius: 2px;
border: 1px solid rgba(0,0,0,.34);
box-shadow:
0 1px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.05),
0 0 0 1px rgba(255,255,255,.21) inset;
} }
.twoColumns, .stream, .conversation { .twoColumns, .stream, .conversation {
top: 0; top: 0;
@ -121,9 +134,10 @@ header {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 36px; top: 40px;
position: absolute; position: absolute;
overflow: auto; overflow: auto;
background: white;
} }
.stream { .stream {
left: 0; left: 0;
@ -139,28 +153,37 @@ header {
.stream.important article { border-left: 5px solid rgba(0,255,0,.34); } .stream.important article { border-left: 5px solid rgba(0,255,0,.34); }
.stream article.urgent { border-left-color: rgba(255,0,0,.55); } .stream article.urgent { border-left-color: rgba(255,0,0,.55); }
.stream article.important { border-left-color: rgba(255,180,80,.89); } .stream article.important { border-left-color: rgba(255,180,80,.89); }
.stream article:before { width: 16px; height: 16px; top: 44px; left: 44px; content: " "; position: absolute; display: none; z-index: 1; opacity: 0.8; }
.stream article:hover:before { display: block; }
.stream article.fbt:before { background: url(img/facebook_16.png); }
.stream article.selected { .stream article.selected {
background-image: -webkit-linear-gradient(rgba(0,0,0,.13), rgba(0,0,0,.08)); background: hsl(55, 100%, 50%);
} }
.stream section { .stream article.selected p {
height: 100%; color: black;
}
.stream section {
margin-left: 63px; margin-left: 63px;
overflow: hidden;
text-overflow: ellipsis;
} }
.stream .name { font-weight: bold; } .stream .name {
.stream nav, .stream .time { float: right; } font-weight: bold;
.stream nav { display: none; margin-top: -3px; } }
.stream nav span { color: hsl(222, 10%, 75%); padding-left: 3px; cursor: pointer; } .stream nav, .stream .time {
.stream nav span:hover { color: hsl(222, 10%, 34%); } float: right;
.stream article:hover nav { display: block; } }
.stream .time, .stream .service { padding-left: 5px; color: rgba(0,0,0,.34); font-size: 0.9em; } .stream nav {
.stream article:hover .time { display: none; } margin-top: -5px;
.stream .service { visibility: hidden; } }
.stream article:hover .service { visibility: visible; } .stream nav span {
color: rgba(0,0,0,.34);
padding-left: 3px;
cursor: pointer;
}
.stream nav span:hover {
color: rgba(0,0,0,1);
}
.stream .time, .stream .channel {
padding-left: 5px;
color: black;
font-size: 0.95em;
}
.stream img { .stream img {
left: 13px; left: 13px;
position: absolute; position: absolute;
@ -182,6 +205,12 @@ header {
} }
.stream section.answer button { float: right; } .stream section.answer button { float: right; }
.stream section.answer img { top: 6px; left: 5px; width: 25px; border-radius: 2px; } .stream section.answer img { top: 6px; left: 5px; width: 25px; border-radius: 2px; }
.stream p {
height: 32px;
color: rgba(0,0,0,.50);
overflow: hidden;
text-overflow: ellipsis;
}
.conversation { .conversation {
left: 40%; left: 40%;
right: 0; right: 0;
@ -198,15 +227,17 @@ header {
.conversation .agent .body, .conversation .customer .body { .conversation .agent .body, .conversation .customer .body {
min-height: 34px; min-height: 34px;
float: left; float: left;
padding: 8px 13px; padding: 0 13px;
margin: 0 0 13px 58px; margin: 0 0 13px 58px;
background: white; background: white;
border: 1px solid hsla(222, 10%, 55%,.34);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 2px hsla(222, 10%, 55%,.34); box-shadow: 0 1px 2px hsla(222, 10%, 55%,.34);
} }
.conversation .agent .body { float: right; margin: 0 58px 13px 0; } .conversation .agent .body { float: right; margin: 0 58px 13px 0; }
.converastion .agent { float: right; } .converastion .agent { float: right; }
.conversation .body p {
margin: 8px 0;
}
.converastion .customer { float: left; } .converastion .customer { float: left; }
blockquote { blockquote {
margin: 8px 0; margin: 8px 0;
@ -227,6 +258,7 @@ header {
button { button {
padding: 3px 13px; padding: 3px 13px;
color: rgba(0,0,0,.89); color: rgba(0,0,0,.89);
line-height: 15px;
text-shadow: 0 1px rgba(255,255,255,.34); text-shadow: 0 1px rgba(255,255,255,.34);
background: rgba(0,0,0,.13); background: rgba(0,0,0,.13);
background: -webkit-linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.08)); background: -webkit-linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.08));

76
prototype/index.html
View file

@ -51,12 +51,8 @@
<img src="img/user2.jpg" /> <img src="img/user2.jpg" />
<section> <section>
<div class="info"> <div class="info">
<span class="name">Jennifer Rostock</span><span class="service">via Mail</span> <span class="name">Jennifer Rostock</span><span class="channel">via Mail</span>
<nav> <span class="time">30 seconds ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">1 day ago</span>
</div> </div>
<p>What?! As you wish. No! Alderaan is peaceful. We have no weapons. You can't possibly… But with the blast shield down, I can't even see! How am I supposed to fight? Hey, Luke! May the Force be with you.</p> <p>What?! As you wish. No! Alderaan is peaceful. We have no weapons. You can't possibly… But with the blast shield down, I can't even see! How am I supposed to fight? Hey, Luke! May the Force be with you.</p>
</section> </section>
@ -65,12 +61,8 @@
<img src="img/user3.jpg" /> <img src="img/user3.jpg" />
<section> <section>
<div class="info"> <div class="info">
<span class="name">Thomas B.</span><span class="service">via Twitter</span> <span class="name">Thomas B.</span><span class="channel">via Twitter</span>
<nav> <span class="time">5 minutes ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">3 days ago</span>
</div> </div>
<p>As you wish. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. Partially, but it also obeys your commands. Red Five standing by. I call it luck. Don't underestimate the Force.</p> <p>As you wish. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. Partially, but it also obeys your commands. Red Five standing by. I call it luck. Don't underestimate the Force.</p>
</section> </section>
@ -79,12 +71,8 @@
<img src="img/user4.jpg" /> <img src="img/user4.jpg" />
<section> <section>
<div class="info"> <div class="info">
<span class="name">Martin R.</span><span class="service">via Mail</span> <span class="name">Martin R.</span><span class="channel">via Mail</span>
<nav> <span class="time">5 hours ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">2 days ago</span>
</div> </div>
<p>I want to know what happened to the plans they sent you. A tremor in the Force. The last time I felt it was in the presence of my old master.</p> <p>I want to know what happened to the plans they sent you. A tremor in the Force. The last time I felt it was in the presence of my old master.</p>
</section> </section>
@ -93,11 +81,7 @@
<img src="img/user5.jpg" /> <img src="img/user5.jpg" />
<section> <section>
<div class="info"> <div class="info">
<span class="name">Stefan Lohammer</span><span class="service">via Facebook</span> <span class="name">Stefan Lohammer</span><span class="channel">via Facebook</span>
<nav>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">2 days</span> <span class="time">2 days</span>
</div> </div>
<p>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed.</p> <p>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed.</p>
@ -108,10 +92,6 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Anna Huber</span> <span class="name">Anna Huber</span>
<nav>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">5 days</span> <span class="time">5 days</span>
</div> </div>
<p>Your eyes can deceive you. Don't trust them. I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me.</p> <p>Your eyes can deceive you. Don't trust them. I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me.</p>
@ -122,10 +102,6 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Ramona Kurzer</span> <span class="name">Ramona Kurzer</span>
<nav>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">1 week ago</span> <span class="time">1 week ago</span>
</div> </div>
<p>I'm surprised you had the courage to take the responsibility yourself. I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. The Force is strong with this one. I have you now.</p> <p>I'm surprised you had the courage to take the responsibility yourself. I can't get involved! I've got work to do! It's not that I like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. The Force is strong with this one. I have you now.</p>
@ -136,10 +112,6 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Philipp Maier</span> <span class="name">Philipp Maier</span>
<nav>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">2 weeks ago</span> <span class="time">2 weeks ago</span>
</div> </div>
<p>Escape is not his plan. I must face him, alone. But with the blast shield down, I can't even see! How am I supposed to fight? All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it?</p> <p>Escape is not his plan. I must face him, alone. But with the blast shield down, I can't even see! How am I supposed to fight? All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it?</p>
@ -150,10 +122,6 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Simon Lanz</span> <span class="name">Simon Lanz</span>
<nav>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">1 month ago</span> <span class="time">1 month ago</span>
</div> </div>
<p> <p>
@ -166,11 +134,7 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Elisabeth Franke</span> <span class="name">Elisabeth Franke</span>
<nav> <span class="time">3 months ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">2 Tagen</span>
</div> </div>
<p> <p>
I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- I'm trying not to, kid. You don't believe in the Force, do you? Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- I'm trying not to, kid. You don't believe in the Force, do you? Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid.
@ -182,11 +146,7 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Franz Huber</span> <span class="name">Franz Huber</span>
<nav> <span class="time">6 months ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">2 Tagen</span>
</div> </div>
<p> <p>
I'm in it for the money. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! I'm in it for the money. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!
@ -198,11 +158,7 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Lars Friedrich</span> <span class="name">Lars Friedrich</span>
<nav> <span class="time">1 year ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">5 months</span>
</div> </div>
<p> <p>
Obi-Wan is here. The Force is with him. Partially, but it also obeys your commands. Hokey religions and ancient weapons are no match for a good blaster at your side, kid. All right. Obi-Wan is here. The Force is with him. Partially, but it also obeys your commands. Hokey religions and ancient weapons are no match for a good blaster at your side, kid. All right.
@ -214,11 +170,7 @@
<section> <section>
<div class="info"> <div class="info">
<span class="name">Felix</span> <span class="name">Felix</span>
<nav> <span class="time">3 years ago</span>
<span class="answer">antworten</span>
<span class="mark">markieren</span>
</nav>
<span class="time">2 Tagen</span>
</div> </div>
<p> <p>
Well, take care of yourself, Han. I guess that's what you're best at, ain't it? Remember, a Jedi can feel the Force flowing through him. You don't believe in the Force, do you? Well, take care of yourself, Han. I guess that's what you're best at, ain't it? Remember, a Jedi can feel the Force flowing through him. You don't believe in the Force, do you?
@ -303,5 +255,11 @@
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="../app/assets/javascripts/app/lib/jquery-1.7.2.min.js"></script>
<script>
$('.stream article').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
</body> </body>
</html> </html>