moparisthebest
/
mailcatcher
mirror of https://github.com/moparisthebest/mailcatcher
1
0
Fork 0
Code Issues Releases Wiki Activity

Nicer styles, better formatted.

This commit is contained in:
Samuel Cochran 2011-05-29 21:16:13 +08:00
parent 858d4c4290
commit e33448c965
2 changed files with 134 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/stylesheets/application.css
View File

@ -75,6 +75,8 @@ body {
padding: .25em;
font-weight: bold;
color: #666;
-moz-text-shadow: 0 1px 0 #fff;
-webkit-text-shadow: 0 1px 0 #fff;
text-shadow: 0 1px 0 #fff; }
#mail table tbody tr:nth-child(even) {
@ -101,6 +103,8 @@ body {
text-align: right;
font-weight: bold;
color: #666;
-moz-text-shadow: 0 1px 0 #fff;
-webkit-text-shadow: 0 1px 0 #fff;
text-shadow: 0 1px 0 #fff; }
#message .metadata .subject span {
@ -128,6 +132,8 @@ body {
color: #333;
border-width: 1px 1px 0 1px;
cursor: pointer;
-moz-text-shadow: 0 1px 0 #eee;
-webkit-text-shadow: 0 1px 0 #eee;
text-shadow: 0 1px 0 #eee; }
#message .actions ul li.tab:not(.selected):hover {
@ -137,7 +143,10 @@ body {
background: #fff;
color: #000;
height: 13px;
margin-bottom: -1px; }
-moz-box-shadow: 1px 1px 0 #ccc;
-webkit-box-shadow: 1px 1px 0 #ccc;
box-shadow: 1px 1px 0 #ccc;
margin-bottom: -2px; }
#message .actions ul li.button {
display: inline-block;
@ -148,19 +157,26 @@ body {
display: inline-block;
padding: .25em .5em;
border: 1px solid #999;
border-radius: .35em;
background: #ddd;
color: #333;
text-decoration: none;
-moz-text-shadow: 1px 1px 0 #eee;
-webkit-text-shadow: 1px 1px 0 #eee;
text-shadow: 1px 1px 0 #eee;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: 1px 1px 0 #ccc; }
#message .actions ul li.button a:hover {
background: #fff;
text-shadow: none; }
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }
#message .actions ul li.button a:active {
margin: 1px -1px -1px 1px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; }
#message .body {

139
public/stylesheets/application.scss
View File

@ -5,7 +5,10 @@ ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0px; }
caption, th, td { text-align: left; font-weight: normal; }
html, body { width: 100%; height: 100%; }
html, body {
width: 100%;
height: 100%;
}
body {
display: -webkit-box; display: -moz-box; display: box;
-webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
@ -20,28 +23,116 @@ body {
-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}
#mail { height: 10em; overflow: auto; background: #fff; border-bottom: 1px solid #ccc; }
#mail table { width: 100%; }
#mail table thead tr { background: #eee; color: #333; }
#mail table thead tr th { padding: .25em; font-weight: bold; color: #666; text-shadow: 0 1px 0 #fff; }
#mail table tbody tr:nth-child(even) { background: #f0f0f0; color: #333; }
#mail table tbody tr.selected { background: Highlight; color: HighlightText; }
#mail table tbody tr td { padding: .25em; }
#mail {
height: 10em;
overflow: auto;
background: #fff;
border-bottom: 1px solid #ccc;
}
#mail table {
width: 100%;
}
#mail table thead tr {
background: #eee;
color: #333;
}
#mail table thead tr th {
padding: .25em;
font-weight: bold;
color: #666;
-moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
}
#mail table tbody tr:nth-child(even) {
background: #f0f0f0;
color: #333;
}
#mail table tbody tr.selected {
background: Highlight;
color: HighlightText;
}
#mail table tbody tr td {
padding: .25em;
}
#message .metadata { padding: 1em; }
#message .metadata div { padding: .25em;; }
#message .metadata div label { display: inline-block; width: 8em; margin-right: .5em; text-align: right; font-weight: bold; color: #666; text-shadow: 0 1px 0 #fff; }
#message .metadata .subject span { font-weight: bold; }
#message .metadata .attachments { display: none; }
#message .metadata .attachments ul { display: inline; }
#message .metadata .attachments ul li { display: inline-block; margin-right: .5em; }
#message .actions ul { border-bottom: 1px solid #999; padding: 0 .5em; }
#message .actions ul li.tab { display: inline-block; padding: .5em; border: 1px solid #999; background: #ddd; color: #333; border-width: 1px 1px 0 1px; cursor: pointer; text-shadow: 0 1px 0 #eee; }
#message .actions ul li.tab:not(.selected):hover { background-color: #ddd; }
#message .actions ul li.tab.selected { background: #fff; color: #000; height: 13px; margin-bottom: -1px; }
#message .actions ul li.button { display: inline-block; float: right; margin: 0 .25em; }
#message .actions ul li.button a { display: inline-block; padding: .25em .5em; border: 1px solid #999; border-radius: .35em; background: #ddd; color: #333; text-decoration: none; text-shadow: 1px 1px 0 #eee; box-shadow: 1px 1px 0 #ccc; }
#message .actions ul li.button a:hover { background: #fff; text-shadow: none; }
#message .actions ul li.button a:active { margin: 1px -1px -1px 1px; box-shadow: none; }
#message .metadata {
padding: 1em;
}
#message .metadata div {
padding: .25em;
}
#message .metadata div label {
display: inline-block;
width: 8em;
margin-right: .5em;
text-align: right;
font-weight: bold;
color: #666;
-moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
}
#message .metadata .subject span {
font-weight: bold;
}
#message .metadata .attachments {
display: none;
}
#message .metadata .attachments ul {
display: inline;
}
#message .metadata .attachments ul li {
display: inline-block;
margin-right: .5em;
}
#message .body { width: 100%; min-height: 20em; height: 100%; background: #fff; }
#message .actions ul {
border-bottom: 1px solid #999;
padding: 0 .5em;
}
#message .actions ul li.tab {
display: inline-block;
padding: .5em;
border: 1px solid #999;
background: #ddd;
color: #333;
border-width: 1px 1px 0 1px;
cursor: pointer;
-moz-text-shadow: 0 1px 0 #eee; -webkit-text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee;
}
#message .actions ul li.tab:not(.selected):hover {
background-color: #ddd; }
#message .actions ul li.tab.selected {
background: #fff;
color: #000;
height: 13px;
-moz-box-shadow: 1px 1px 0 #ccc; -webkit-box-shadow: 1px 1px 0 #ccc; box-shadow: 1px 1px 0 #ccc;
margin-bottom: -2px;
}
#message .actions ul li.button {
display: inline-block;
float: right;
margin: 0 .25em;
}
#message .actions ul li.button a {
display: inline-block;
padding: .25em .5em;
border: 1px solid #999;
background: #ddd;
color: #333;
text-decoration: none;
-moz-text-shadow: 1px 1px 0 #eee; -webkit-text-shadow: 1px 1px 0 #eee; text-shadow: 1px 1px 0 #eee;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: 1px 1px 0 #ccc;
}
#message .actions ul li.button a:hover {
background: #fff;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
#message .actions ul li.button a:active {
margin: 1px -1px -1px 1px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
#message .body {
width: 100%;
min-height: 20em;
height: 100%;
background: #fff;
}