diff --git a/view/theme/quattro/colors.less b/view/theme/quattro/colors.less
index 9183b2e777..b6d487f92b 100755
--- a/view/theme/quattro/colors.less
+++ b/view/theme/quattro/colors.less
@@ -96,3 +96,12 @@
@JotPermissionLockBackgroundColor: @Grey4;
@JotLoadingBackgroundColor: @Grey1;
@JotPreviewBackgroundColor: @Yellow1;
+
+@MessageNewBackgroundColor: @Blue1;
+@MessageNewBorderColor: @Blue3;
+@MessageNewColor: @Grey1;
+
+@MailListBackgroundColor: #f6f7f8;
+
+@MailDisplaySubjectColor: @Grey5;
+@MailDisplaySubjectBackgroundColor: #f6f7f8;
diff --git a/view/theme/quattro/mail_conv.tpl b/view/theme/quattro/mail_conv.tpl
new file mode 100755
index 0000000000..989f178781
--- /dev/null
+++ b/view/theme/quattro/mail_conv.tpl
@@ -0,0 +1,60 @@
+
+
+
+{#
+
+
+
+
+

+
+
+
$mail.from_name
+
$mail.date
+
$mail.subject
+
$mail.body
+
+
+
+
+
+
+#}
diff --git a/view/theme/quattro/mail_display.tpl b/view/theme/quattro/mail_display.tpl
new file mode 100644
index 0000000000..8b82e95c60
--- /dev/null
+++ b/view/theme/quattro/mail_display.tpl
@@ -0,0 +1,12 @@
+
+
+{{ for $mails as $mail }}
+
+ {{ inc mail_conv.tpl }}{{endinc}}
+
+{{ endfor }}
+
+{{ inc prv_message.tpl }}{{ endinc }}
diff --git a/view/theme/quattro/mail_list.tpl b/view/theme/quattro/mail_list.tpl
new file mode 100644
index 0000000000..6bc6c84f60
--- /dev/null
+++ b/view/theme/quattro/mail_list.tpl
@@ -0,0 +1,8 @@
+
+
$subject
+
$from_name
+
$date
+
$count
+
+
+
diff --git a/view/theme/quattro/message_side.tpl b/view/theme/quattro/message_side.tpl
new file mode 100644
index 0000000000..9f15870964
--- /dev/null
+++ b/view/theme/quattro/message_side.tpl
@@ -0,0 +1,10 @@
+
diff --git a/view/theme/quattro/msg-header.tpl b/view/theme/quattro/msg-header.tpl
new file mode 100755
index 0000000000..2d1ea7a612
--- /dev/null
+++ b/view/theme/quattro/msg-header.tpl
@@ -0,0 +1,97 @@
+
+
+
+
+
+
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index fca65c9076..c6352cfe99 100755
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -319,41 +319,6 @@ aside {
img { width: 48px; height: 48px; }
}
}
-/* mail view */
-.mail-conv-sender,
-.mail-conv-detail {
- float: left;
-}
-.mail-conv-detail {
- margin-left: 20px;
- width: 500px;
-}
-
-.mail-conv-subject {
- font-size: 1.4em;
- margin: 10px 0;
-}
-
-.mail-conv-outside-wrapper-end {
- clear: both;
-}
-
-.mail-conv-outside-wrapper {
- margin-top: 30px;
-}
-
-.mail-conv-delete-wrapper {
- float: right;
- margin-right: 30px;
- margin-top: 15px;
-}
-.mail-conv-break {
- clear: both;
-}
-
-.mail-conv-delete-icon {
- border: none;
-}
/* group member */
#contact-edit-drop-link,
@@ -938,6 +903,10 @@ ul.tabs {
textarea {
width: 400px;
}
+ input[type="checkbox"], input[type="radio"]{
+ width: auto;
+ }
+
textarea { height: 100px; }
.field_help {
display: block;
@@ -981,6 +950,7 @@ ul.tabs {
&.radio .field_help { margin-left: 0px; }
}
+
#profile-edit-links li {
list-style: none;
margin-top: 10px;
@@ -1085,6 +1055,90 @@ ul.tabs {
}
}
+/* messages */
+#message-new {
+ background: @MessageNewBackgroundColor;
+ border: 1px solid @MessageNewBorderColor;
+ width: 150px;
+ a {
+ color: @MessageNewColor;
+ text-align: center;
+ display: block;
+ font-weight: bold;
+ padding: 1em 0px;
+ }
+}
+
+.mail-list-wrapper {
+ background-color: @MailListBackgroundColor;
+ margin-bottom: 5px;
+ width: 100%; height: auto; overflow: hidden;
+
+ span { display: block; float: left; width: 20%; overflow: hidden;}
+
+ .mail-subject {
+ width: 30%;
+ padding:4px 0px 0px 4px;
+ a { display: block; }
+ &.unseen a { font-weight: bold; }
+ }
+ .mail-date { padding: 4px 4px 0px 4px; }
+ .mail-from { padding: 4px 4px 0px 4px; }
+ .mail-count { padding: 4px 4px 0px 4px; text-align: right;}
+
+ .mail-delete { float: right; }
+}
+
+#mail-display-subject {
+ background-color: @MailDisplaySubjectBackgroundColor;
+ color: @MailDisplaySubjectColor;
+ margin-bottom: 10px;
+ width: 100%; height: auto; overflow: hidden;
+ span { float: left; overflow: hidden; padding: 4px 0px 0px 10px;}
+ .mail-delete { float: right; .opaque(0.5);}
+ &:hover .mail-delete { .opaque(1); }
+
+}
+
+/* mail view */
+/*
+.mail-conv-sender,
+.mail-conv-detail {
+ float: left;
+}
+.mail-conv-detail {
+ margin-left: 20px;
+ width: 500px;
+}
+
+.mail-conv-subject {
+ font-size: 1.4em;
+ margin: 10px 0;
+}
+
+.mail-conv-outside-wrapper-end {
+ clear: both;
+}
+
+.mail-conv-outside-wrapper {
+ margin-top: 30px;
+}
+
+.mail-conv-delete-wrapper {
+ float: right;
+ margin-right: 30px;
+ margin-top: 15px;
+}
+.mail-conv-break {
+ clear: both;
+}
+
+.mail-conv-delete-icon {
+ border: none;
+}
+
+*/
+
/* page footer */
footer { height: 100px; display: table-row; }
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 8f0abe86df..7d7444e481 100755
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -626,35 +626,6 @@ aside #profiles-menu {
width: 48px;
height: 48px;
}
-/* mail view */
-.mail-conv-sender, .mail-conv-detail {
- float: left;
-}
-.mail-conv-detail {
- margin-left: 20px;
- width: 500px;
-}
-.mail-conv-subject {
- font-size: 1.4em;
- margin: 10px 0;
-}
-.mail-conv-outside-wrapper-end {
- clear: both;
-}
-.mail-conv-outside-wrapper {
- margin-top: 30px;
-}
-.mail-conv-delete-wrapper {
- float: right;
- margin-right: 30px;
- margin-top: 15px;
-}
-.mail-conv-break {
- clear: both;
-}
-.mail-conv-delete-icon {
- border: none;
-}
/* group member */
#contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper {
float: right;
@@ -1355,6 +1326,9 @@ ul.tabs li .active {
.field input, .field textarea {
width: 400px;
}
+.field input[type="checkbox"], .field input[type="radio"] {
+ width: auto;
+}
.field textarea {
height: 100px;
}
@@ -1503,6 +1477,123 @@ ul.tabs li .active {
left: 0px;
top: 63px;
}
+/* messages */
+#message-new {
+ background: #19aeff;
+ border: 1px solid #005c94;
+ width: 150px;
+}
+#message-new a {
+ color: #ffffff;
+ text-align: center;
+ display: block;
+ font-weight: bold;
+ padding: 1em 0px;
+}
+.mail-list-wrapper {
+ background-color: #f6f7f8;
+ margin-bottom: 5px;
+ width: 100%;
+ height: auto;
+ overflow: hidden;
+}
+.mail-list-wrapper span {
+ display: block;
+ float: left;
+ width: 20%;
+ overflow: hidden;
+}
+.mail-list-wrapper .mail-subject {
+ width: 30%;
+ padding: 4px 0px 0px 4px;
+}
+.mail-list-wrapper .mail-subject a {
+ display: block;
+}
+.mail-list-wrapper .mail-subject.unseen a {
+ font-weight: bold;
+}
+.mail-list-wrapper .mail-date {
+ padding: 4px 4px 0px 4px;
+}
+.mail-list-wrapper .mail-from {
+ padding: 4px 4px 0px 4px;
+}
+.mail-list-wrapper .mail-count {
+ padding: 4px 4px 0px 4px;
+ text-align: right;
+}
+.mail-list-wrapper .mail-delete {
+ float: right;
+}
+#mail-display-subject {
+ background-color: #f6f7f8;
+ color: #2d2d2d;
+ margin-bottom: 10px;
+ width: 100%;
+ height: auto;
+ overflow: hidden;
+}
+#mail-display-subject span {
+ float: left;
+ overflow: hidden;
+ padding: 4px 0px 0px 10px;
+}
+#mail-display-subject .mail-delete {
+ float: right;
+ opacity: 0.5;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+#mail-display-subject:hover .mail-delete {
+ opacity: 1;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ -ms-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+}
+/* mail view */
+/*
+.mail-conv-sender,
+.mail-conv-detail {
+ float: left;
+}
+.mail-conv-detail {
+ margin-left: 20px;
+ width: 500px;
+}
+
+.mail-conv-subject {
+ font-size: 1.4em;
+ margin: 10px 0;
+}
+
+.mail-conv-outside-wrapper-end {
+ clear: both;
+}
+
+.mail-conv-outside-wrapper {
+ margin-top: 30px;
+}
+
+.mail-conv-delete-wrapper {
+ float: right;
+ margin-right: 30px;
+ margin-top: 15px;
+}
+.mail-conv-break {
+ clear: both;
+}
+
+.mail-conv-delete-icon {
+ border: none;
+}
+
+*/
/* page footer */
footer {
height: 100px;