xtras/mathuaerknedam 79:0199a6b64eab: First take at a header and...
commits at adium.im
commits at adium.im
Sat Jul 18 04:01:27 UTC 2009
details: http://hg.adium.im/xtras/mathuaerknedam/rev/0199a6b64eab
revision: 79:0199a6b64eab
author: mathuaerknedam
date: Fri Jul 17 23:01:44 2009 -0500
First take at a header and topic that more closely resembles the original Brad Smith mockup. Unfortunately, I found issues with %sendercolor% and %serviceIconImg%, so there are some issues. The header and topic also lack per-variant styling, and were initially styled for icon-time1.
diffs (427 lines):
diff -r afd70d56fe02 -r 0199a6b64eab Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Header.css
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Header.css Thu Jul 16 13:45:31 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Header.css Fri Jul 17 23:01:44 2009 -0500
@@ -1,79 +1,106 @@
@charset "utf-8";
-/* Extra padding on top if the header is included to push the messages out from under it. */
-
-#Chat {
- padding-top: 66px;
+#Chat
+{
+ padding-top: 84px;
}
-#x-header {
+#x-header
+{
+ color: rgba(64, 64, 64, 1);
+ background:
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240,240, 240, 1))) 0px 16px no-repeat;
+ -webkit-background-size: 100% 16px, 100% 100%;
+ -webkit-border-radius: 5px;
position: fixed;
- top: 0;
+ top: 12px;
+ right: 18px;
+ left: 8px;
height: 56px;
- width: 100%;
- //background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255 ,255, 1)), to(rgba(208, 208, 208, 1))) fixed repeat-x;
- //background: -webkit-gradient(radial, 0 0, 0, 0 100%, 400, from(rgba(168, 0, 40, .1)), to(rgba(0, 16, 144, 0))),
- // -webkit-gradient(radial, 100% 0, 0, 100% 0, 400, from(rgba(0, 16, 144, .1)), to(rgba(168, 0, 40, 0))),
- // -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255 ,255, .85)), to(rgba(208, 208, 208, .85)));
- background: -webkit-gradient(radial, 0 100%, 200, 100% 0, 0, from(rgba(128, 128, 128, .3)), to(rgba(64, 64, 64, 0))),
- -webkit-gradient(radial, 100% 0, 200, 0 100%, 0, from(rgba(64, 64, 64, .3)), to(rgba(0, 0, 0, 0))),
- -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255 ,255, .85)), to(rgba(208, 208, 208, .85)));
- -webkit-background-size: auto 56px;
- -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+ -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 1), 8px -8px 8px rgba(216, 216, 216, 1), -8px -8px 8px rgba(216, 216, 216, 1), -8px 16px 16px rgba(216, 216, 216, 1), 8px 16px 16px rgba(216, 216, 216, 1);
text-align: center;
z-index: 100;
}
-#x-header .x-icon {
- position: absolute;
- z-index: 101;
- max-width: 32px;
- max-height: 32px;
- padding: 0;
- top: 6px;
+#x-header img.x-icon[src*="incoming_icon.png"],
+#x-header img.x-icon[src*="outgoing_icon.png"]
+{
+ display: none;
}
-/*
-#x-header .x-icon {
- background: url(images/icons/background_48_rounded.png) top left no-repeat;
-}
-*/
-
-#x-header .x-icon.incoming {
- left: 25px;
- right: auto;
+#x-header .x-iconmask
+{
+ height: 56px;
+ width: 56px;
+ background:
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .625)), to(rgba(255, 255, 255, 0))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))) 0px 16px no-repeat;
+ -webkit-background-size: 56px 16px, 56px 100%;
+ position: absolute;
+ z-index: 104;
+ top: 2px;
+ -webkit-border-top-left-radius: 5px;
+ -webkit-border-radius: 0px;
}
-#x-header .x-icon.outgoing {
- right: 25px;
- left: auto;
+#x-header img.x-icon
+{
+ -webkit-border-radius: 0px;
+ //position: absolute;
+ z-index: 101;
+ width: 56px !important;
+ height: 56px !important;
+ max-width: none;
+ max-height: none;
+ //padding: 0;
+ top: 2px;
+ background: rgba(240, 240, 240, 1);
}
-#x-service {
- height: 16px;
- width: auto;
- position: relative;
- top: 3px;
+#x-header .x-icon.incoming,
+#x-header .x-iconmask.incoming
+{
+ left: 0px;
+ right: auto;
+ -webkit-border-top-left-radius: 5px;
+ -webkit-border-bottom-left-radius: 5px;
}
-#x-header h1 {
- margin: 5px 60px 0;
- padding: 0;
- font-size: 11px;
- color: rgba(56, 56, 56, 1);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+#x-header .x-color
+{
+ height: 56px;
+ width: 5px;
+ display: block;
+ position: absolute;
+ top: 0px;
+ z-index: 101;
+ background:
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .75)), to(rgba(255, 255, 255, .25))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .25)), to(rgba(255, 255, 255, .25))) 0px 32px no-repeat;
+ -webkit-background-size: 5px 32px, 5px 100%;
}
-#x-header h2 {
- margin: 3px 0 0 0;
- padding: 0;
- font-size: 10px;
- color: rgba(120, 120, 120, 1);
+#x-header .x-color.incoming
+{
+ left: 56px;
}
-#x-header h3 {
+#x-header .x-color.outgoing
+{
+ right: 56px;
+}
+
+#x-header .x-icon.outgoing,
+#x-header .x-iconmask.outgoing
+{
+ right: 0px;
+ left: auto;
+ -webkit-border-top-right-radius: 5px;
+ -webkit-border-bottom-right-radius: 5px;
+}
+
+#x-header .x-sender {
font-size: 11px;
text-transform: lowercase;
position: absolute;
@@ -82,58 +109,41 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ width: 25%;
}
-h3.incoming {
- left: 25px;
- color: rgba(168, 0, 40, 1);
+#x-header .x-sender.incoming {
+ left: 64px;
+ //color: rgba(168, 0, 40, 1);
text-align: left;
}
-h3.outgoing {
- right: 25px;
- color: rgba(0, 16, 144, 1);
+#x-header .x-sender.outgoing {
+ right: 64px;
+ //color: rgba(0, 16, 144, 1);
text-align: right;
}
-
-/* Large header */
-
-/*
-#x-header {
- height: 85px;
- background-image: url(images/compact/normal/header.png), url(images/compact/normal/swish_left.png), url(images/compact/normal/swish_right.png);
+#x-header .x-date {
+ font-size: 11px;
+ color: rgba(56, 56, 56, 1);
+ white-space: nowrap;
+ margin-top: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block;
+ font-weight: bold;
}
-#x-header .x-icon {
- width: 48px;
- height: 48px;
- top: 11px;
+#x-header .x-time {
+ margin-top: 4px;
+ font-size: 10px;
+ color: rgba(120, 120, 120, 1);
+ display: block;
}
-#x-header h3 {
- top: 63px;
- margin: 0;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 35%;
+img.serviceIcon
+{
+ width: 100%;
}
-#x-service {
- height: 22px;
- top: 4px;
-}
-
-#x-header h1 {
- margin: 7px 0 0 0;
-}
-
-#x-header h2 {
- margin: 5px 0 0 0;
-}
-
-#Chat {
- padding-top: 91px;
-}
-*/
diff -r afd70d56fe02 -r 0199a6b64eab Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Header.html
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Header.html Thu Jul 16 13:45:31 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Header.html Fri Jul 17 23:01:44 2009 -0500
@@ -3,11 +3,15 @@
</style>
<div id="x-header">
- <h1>%timeOpened{%A %e %B %Y}%</h1>
- <h2>%timeOpened%</h2>
- <img id="x-service" src="images/compact/normal/aim.png" />
- <h3 class="incoming">%destinationName%</h3>
- <h3 class="outgoing">%sourceName%</h3>
+ <span class="x-date">%timeOpened{%A %e %B %Y}%</span>
+ <span class="x-time">%timeOpened%</span>
+ %serviceIconImg%
+ <span class="x-sender incoming">%destinationName%</span>
+ <span class="x-sender outgoing">%sourceName%</span>
<img class="x-icon incoming" src="%incomingIconPath%" />
+ <span class="x-iconmask incoming" style="-webkit-mask-box-image: url(%incomingIconPath%);"></span>
+ <span class="x-color incoming" style="background-color: %senderColor%;"></span>
<img class="x-icon outgoing" src="%outgoingIconPath%" />
+ <span class="x-iconmask outgoing" style="-webkit-mask-box-image: url(%outgoingIconPath%);"></span>
+ <span class="x-color outgoing" style="background-color: %senderColor%;"></span>
</div>
diff -r afd70d56fe02 -r 0199a6b64eab Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html Thu Jul 16 13:45:31 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html Fri Jul 17 23:01:44 2009 -0500
@@ -7,7 +7,7 @@
</title>
<style type="text/css">
- @import url( "./Variants/Alternating.css" );
+ @import url( "./Variants/Icon-Time1.css" );
body
{
@@ -19,24 +19,26 @@
</head>
<body>
-
<!--
<div id="x-header">
<style type="text/css">
@import url(./Header.css);
</style>
- <h1>Wednesday, June 09, 2004</h1>
- <h2>12:45:48</h2>
+ <span class="x-date">Wednesday, June 09, 2004</span>
+ <span class="x-time">12:45:48</span>
<img src="./Images/compact/normal/aim.png" id="SERVICE" />
- <h3 class="incoming">Jeff</h3>
- <h3 class="outgoing">Evan</h3>
- <img class="x-icon incoming" src="./incoming_icon.png" />
- <img class="x-icon outgoing" src="./outgoing_icon.png" />
+ <span class="x-sender incoming">JeffJeffJeffJeffJeffJeffJeffJeffJeffJeff</span>
+ <span class="x-sender outgoing">EvanEvanEvanEvanEvanEvanEvanEvanEvanEvan</span>
+ <img class="x-icon incoming" src="/Users/mneedham/Library/Application%20Support/Adium%202.0/Users/Default/libpurple/icons/8c814ad7cf1b910b74a9c84fb2b6a85e3cc8cba1.png" />
+ <span class="x-iconmask incoming" style="-webkit-mask-box-image: url(/Users/mneedham/Library/Application%20Support/Adium%202.0/Users/Default/libpurple/icons/8c814ad7cf1b910b74a9c84fb2b6a85e3cc8cba1.png);"></span>
+ <span class="x-color incoming" style="background-color: blue"></span>
+ <img class="x-icon outgoing" src="/Users/mneedham/Library/Application%20Support/Adium%202.0/Users/Default/libpurple/icons/23c091f19e3feacaf0cc782065025af54fc64cd0.png" />
+ <span class="x-iconmask outgoing" style="-webkit-mask-box-image: url(/Users/mneedham/Library/Application%20Support/Adium%202.0/Users/Default/libpurple/icons/23c091f19e3feacaf0cc782065025af54fc64cd0.png);"></span>
+ <span class="x-color outgoing" style="background-color: seagreen"></span>
</div>
--!>
-<!--
<div id="topic" title="">
<style type="text/css">
@import url(./Topic.css);
@@ -44,7 +46,6 @@
<span id="topicEdit" contenteditable="">Welcome</span>
</div>
---!>
<div id="Chat" class="groupchat">
diff -r afd70d56fe02 -r 0199a6b64eab Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Topic.css
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Topic.css Thu Jul 16 13:45:31 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Topic.css Fri Jul 17 23:01:44 2009 -0500
@@ -2,43 +2,51 @@
/* Extra padding on top if the header is included to push the messages out from under it. */
-#Chat {
+#Chat
+{
padding-top: 66px;
}
-#topic {
+#topic
+{
+ color: rgba(64, 64, 64, 1);
+ background:
+ -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(248, 248, 248, 1))) 0px 0px no-repeat,
+ -webkit-gradient(linear, left top, left bottom, from(rgba(248, 248, 248, 1)), to(rgba(240,240, 240, 1))) 0px 16px no-repeat;
+ -webkit-background-size: 100% 16px, 100% 100%;
+ -webkit-border-radius: 5px;
position: fixed;
- top: 0;
+ top: 12px;
+ right: 18px;
+ left: 8px;
+ -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 1), 8px -8px 8px rgba(216, 216, 216, 1), -8px -8px 8px rgba(216, 216, 216, 1), -8px 16px 16px rgba(216, 216, 216, 1), 8px 16px 16px rgba(216, 216, 216, 1);
z-index: 9999;
- width: 100%;
- background: -webkit-gradient(radial, 0 100%, 200, 100% 0, 0, from(rgba(128, 128, 128, .3)), to(rgba(64, 64, 64, 0))),
- -webkit-gradient(radial, 100% 0, 200, 0 100%, 0, from(rgba(64, 64, 64, .3)), to(rgba(0, 0, 0, 0))),
- -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255 ,255, .85)), to(rgba(208, 208, 208, .85)));
- -webkit-background-size: auto 56px;
- -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
- padding-top: 8px;
- padding-bottom: 8px;
- min-height:13px;
+ padding-top: 6px;
+ padding-bottom: 6px;
-webkit-transition: opacity .4s linear;
}
+
#topic[title=""]:not(:hover)
{
opacity: 0;
}
#topicEdit {
- padding-left: 8px;
+ padding-left: 40px;
padding-right: 8px;
- max-height: 40px;
display: block;
- font-weight: bold;
- //text-align: center;
+ color: rgba(56, 56, 56, 1);
- font-size: 11px;
- color: rgba(56, 56, 56, 1);
- text-overflow: ellipsis;
- overflow: hidden;
+ //max-height: 40px;
+ //text-overflow: ellipsis;
+ //overflow: hidden;
word-wrap: break-word;
word-break: break-word;
}
+
+img.serviceIcon
+{
+
+}
+
diff -r afd70d56fe02 -r 0199a6b64eab Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Topic.html
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Topic.html Thu Jul 16 13:45:31 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Topic.html Fri Jul 17 23:01:44 2009 -0500
@@ -3,3 +3,6 @@
</style>
%topic%
+<!--
+%serviceIconImg%
+--!>
diff -r afd70d56fe02 -r 0199a6b64eab Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt Thu Jul 16 13:45:31 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt Fri Jul 17 23:01:44 2009 -0500
@@ -20,3 +20,12 @@
# Dark variant? 2.1
# RTL variant? 2.1
+
+
+%serviceIconImg% is buggy (added by cfm in rev 23506: http://adiumx.com/pipermail/adium-svn_adiumx.com/2008-May/006520.html)
+%serviceIconImg% doesn't work in topic
+%sendercolor% fails in header
+
+
+header needs per-variant styling
+topic needs per-variant styling
More information about the commits
mailing list