xtras/mathuaerknedam 126:558d6fcf6d1d: Make border on icons in a...
commits at adium.im
commits at adium.im
Wed Sep 9 19:18:26 UTC 2009
details: http://hg.adium.im/xtras/mathuaerknedam/rev/558d6fcf6d1d
revision: 126:558d6fcf6d1d
author: mathuaerknedam
date: Wed Sep 09 14:18:15 2009 -0500
Make border on icons in alternating variant 1px smaller.
diffs (312 lines):
diff -r 420f608db334 -r 558d6fcf6d1d Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html Thu Aug 27 16:32:51 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Mockup-SpecialCases.html Wed Sep 09 14:18:15 2009 -0500
@@ -7,7 +7,7 @@
</title>
<style type="text/css">
- @import url( "./Variants/Compact.css" );
+ @import url( "./Variants/Alternating.css" );
body
{
@@ -56,7 +56,7 @@
<div id="Chat" class="groupchat">
-<div class="history date_separator event SERVICE hideIcons">
+<div class="history date_separator event SERVICE showIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
@@ -66,7 +66,7 @@
</div>
-<div class="history outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+<div class="history outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -79,7 +79,7 @@
</span>
</div>
-<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -90,7 +90,7 @@
<span class="x-mark">‣</span>
<span class="x-message">I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore.I'mprettysureI'veheardthisonebefore. </span>
</span>
- <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -104,7 +104,7 @@
</div>
</div>
-<div class="history outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+<div class="history outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -117,7 +117,7 @@
</span>
</div>
-<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -128,7 +128,7 @@
<span class="x-mark">‣</span>
<span class="x-message">I'm pretty sure I've heard this one before. </span>
</span>
- <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -139,7 +139,7 @@
<span class="x-mark">‣</span>
<span class="x-message">So what happens next? </span>
</span>
- <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -154,7 +154,7 @@
</div>
</div>
-<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -167,7 +167,7 @@
</span>
</div>
-<div class="history date_separator event SERVICE hideIcons">
+<div class="history date_separator event SERVICE showIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
@@ -176,7 +176,7 @@
</span>
</div>
-<div class="history outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+<div class="history outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -189,7 +189,7 @@
</span>
</div>
-<div class="history incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="history incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -200,7 +200,7 @@
<span class="x-mark">‣</span>
<span class="x-message">I'm pretty sure I've heard this one before. </span>
</span>
- <div class="history consecutive incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+ <div class="history consecutive incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -215,7 +215,7 @@
</div>
<!--
-<div class="date_separator event SERVICE hideIcons">
+<div class="date_separator event SERVICE showIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:45:48 </span>
<span class="x-ltime" title="19 Apr 2004">12:45:48 </span>
@@ -225,7 +225,7 @@
</div>
--!>
-<div class="outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+<div class="outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -236,7 +236,7 @@
<span class="x-mark">‣</span>
<span class="x-message">|If I remember correctly, they explode outward at the speed of light. </span>
</span>
- <div class="consecutive outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+ <div class="consecutive outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -247,7 +247,7 @@
<span class="x-mark">‣</span>
<span class="x-message">But that might be if you cross the streams… </span>
</span>
- <div class="consecutive outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+ <div class="consecutive outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -262,7 +262,7 @@
</div>
</div>
-<div class="mention incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="mention incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon_wide.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon_wide.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -275,7 +275,7 @@
</span>
</div>
-<div class="outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+<div class="outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./outgoing_icon_tall.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./outgoing_icon_tall.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -288,7 +288,7 @@
</span>
</div>
-<div class="event notification SERVICE hideIcons">
+<div class="event notification SERVICE showIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:47:54 </span>
<span class="x-ltime" title="19 Apr 2004">12:47:54 </span>
@@ -297,14 +297,14 @@
</span>
</div>
-<div class="status away SERVICE hideIcons">
+<div class="status away SERVICE showIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:47:54 </span>
<span class="x-ltime" title="19 Apr 2004">12:47:54 </span>
<span class="x-mark">‣</span>
<span class="x-message">Jeff went away </span>
</span>
- <div class="consecutive status away_message SERVICE hideIcons">
+ <div class="consecutive status away_message SERVICE showIcons">
<span class="x-wrap">
<span class="x-rtime" title="19 Apr 2004">12:47:55 </span>
<span class="x-ltime" title="19 Apr 2004">12:47:55 </span>
@@ -314,7 +314,7 @@
</div>
</div>
-<div class="incoming autoreply message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="incoming autoreply message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
@@ -327,7 +327,7 @@
</span>
</div>
-<div class="outgoing message SERVICE hideIcons xx-TekJew" style="background-color: seagreen;">
+<div class="outgoing message SERVICE showIcons xx-TekJew" style="background-color: seagreen;">
<img class="x-icon" src="./buddy_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./buddy_icon.png);"></span>
<span class="x-color" style="background-color: seagreen"></span>
@@ -341,7 +341,7 @@
<span id="insert"></span>
</div>
-<div class="incoming message SERVICE hideIcons xx-fetchgreebledonx" style="background-color: blue;">
+<div class="incoming message SERVICE showIcons xx-fetchgreebledonx" style="background-color: blue;">
<img class="x-icon" src="./incoming_icon.png" />
<span class="x-iconmask" style="-webkit-mask-box-image: url(./incoming_icon.png);"></span>
<span class="x-color" style="background-color: blue"></span>
diff -r 420f608db334 -r 558d6fcf6d1d Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css Thu Aug 27 16:32:51 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/Variants/Alternating.css Wed Sep 09 14:18:15 2009 -0500
@@ -207,11 +207,11 @@
.message img.x-icon
{
- width: 28px;
- height: 28px;
+ width: 30px;
+ height: 30px;
position: absolute;
margin-top: -2px;
- padding: 4px;
+ padding: 3px;
-webkit-border-radius: 5px;
z-index: 3;
background:
@@ -262,35 +262,35 @@
.message .x-iconmask
{
- width: 28px;
- height: 28px;
+ width: 30px;
+ height: 30px;
position: absolute;
- margin-top: 2px;
+ margin-top: 1px;
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-background-size: 28px 16px;
+ -webkit-background-size: 30px 16px;
z-index: 4;
}
.outgoing.message .x-iconmask
{
- right: 12px;
+ right: 11px;
}
.incoming.message .x-iconmask
{
- left: 12px;
+ left: 11px;
}
.autoreply.message:not(.x-hover) .x-iconmask
{
background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, .625)), to(rgba(64, 64, 64, .25))) 0px 0px no-repeat;
- -webkit-background-size: 28px 16px;
+ -webkit-background-size: 30px 16px;
}
.x-hover.message .x-iconmask
{
background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, .625)), to(rgba(192, 192, 192, .625))) 0px 0px no-repeat;
- -webkit-background-size: 28px 28px;
+ -webkit-background-size: 30px 30px;
}
img[src*="buddy_icon.png"],
diff -r 420f608db334 -r 558d6fcf6d1d Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt
--- a/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt Thu Aug 27 16:32:51 2009 -0500
+++ b/Smooth Operator ☿.AdiumMessageStyle/Contents/Resources/todo.txt Wed Sep 09 14:18:15 2009 -0500
@@ -1,9 +1,8 @@
Must fix/answer for 1.4!
!# %serviceIconImg% doesn't work in topic (waiting)
!# %sendercolor% fails in header (waiting)
- !# topic needs more per-variant styling?
+ !# topic needs more per-variant styling? topic in Alternating variant is set for hideicons/irc, and would be misaligned in xmpp groupchat.
!# header/topic need hideIcons/showIcons styling? Alternating does, but it needs a %variant% keyword. the header in Alternating looks a little weird anyway. it might be nice to do somethign different if there isn't an icon.
- !compact has serviceicon height failure, okay in preview/mockup but not in chat?
Other
# compact and history needs some way to distinguish sender from text besides bold. If the first word is bold, there it's hard to tell. For example, in IRC, I've seen "Cappuccino trac: Ticket #119..." where "Cappuccino trac" is bold.
More information about the commits
mailing list