Split up CSS for clarity

1 files changed, 250 insertions, 0 deletions

diff --git a/hyperkitty/static/css/hyperkitty-message.css b/hyperkitty/static/css/hyperkitty-message.css
new file mode 100644
index 0000000..0870277
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-message.css
@@ -0,0 +1,250 @@
+/*
+ * Message view
+ */
+
+.message-header {
+    margin-bottom: 3em;
+}
+
+.message-header .thread-back {
+    display: block;
+    padding-top: 38px;
+    width: 160px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-image: url('../img/button_back.png');
+    margin-bottom: 1em;
+}
+
+
+
+/*
+ * Thread view
+ */
+
+.thread-header {
+    /*background-color: #f6f6f6;*/
+    /*border-bottom: 1px solid #b3b3b3;*/
+    margin-bottom: 6em;
+    padding: 1em 0;
+}
+
+.thread-header h1,
+.message-header h1 {
+    text-align: center;
+    font-size: 24px;
+    line-height: 26px;
+}
+
+.thread-header .thread-older,
+.thread-header .thread-newer {
+    display: block;
+    padding-top: 38px;
+    width: 160px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    text-align: center;
+    color: #aaaaaa;
+}
+.thread-header .thread-older {
+    float: right;
+    background-image: url('../img/button_older.png');
+}
+.thread-header .thread-newer {
+    float: left;
+    background-image: url('../img/button_newer.png');
+}
+
+#olderhread, #newewthread {
+    font-size: 70%;
+    color: rgb(167, 169, 172);
+}
+
+#olderhread {
+    float: right;
+    margin-top: 2em;
+    margin-right: 20px;
+}
+
+#thread-overview-info {
+    float: right;
+}
+
+
+
+/*
+ * Thread general information column
+ */
+
+.days-num {
+    font-size: 200%;
+    display: inline-block;
+}
+.days-text {
+    font-size: 70%;
+    display: inline-block;
+    margin-right: 2em;
+}
+
+.favorite a {
+    color: rgb(167, 169, 172);
+}
+.favorite a.saved,
+.favorite a.notsaved {
+    /* Will be shown via Javascript */
+    display: none;
+}
+
+/* Tags */
+#tags {
+    color: rgb(167, 169, 172);
+    margin-top: 2em;
+}
+
+#tag-title {
+    color: rgb(77, 77, 77);
+    text-transform: uppercase;
+}
+
+#tags ul {
+    padding: 10px 0;
+    margin: 0;
+}
+#tags ul li {
+    padding-left: 0;
+}
+#tags ul li span {
+    margin-left: 5px;
+}
+
+#add-tag {
+    margin-top: 0.3em;
+}
+
+/* Participants */
+#participants {
+    margin-top: 2em;
+    color: rgb(167, 169, 172);
+}
+
+#participants_title {
+    color: rgb(77, 77, 77);
+    text-transform: uppercase;
+}
+
+#participants ul {
+    padding: 0;
+    margin: 0;
+}
+
+#participants li {
+    list-style-type: none;
+    margin: 1em 0;
+}
+
+#participants img {
+    width: 20px;
+    vertical-align: middle;
+}
+
+
+/* Main section with the whole thread */
+
+/* First email of the thread. */
+
+.email-header {
+    position:relative;
+    margin-bottom: 1em;
+    height: 40px;
+}
+
+.email-header .gravatar {
+    margin-right: 10px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.email-author .name{
+    color: rgb(55, 113, 200);
+    font-weight: bold;
+}
+.email-author .rank{
+    color: rgb(167, 169, 172);
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.email-first .email-date {
+    text-align: right;
+}
+.email-date .date {
+    font-weight: bold;
+}
+.email-date .time {
+    color: rgb(167, 169, 172);
+    margin-left: 0.5em;
+    border-bottom: 1px dashed rgb(167, 169, 172);
+    cursor: help;
+}
+
+.sort-mode {
+    text-align: right;
+}
+
+/* The email thread */
+.even, .odd {
+    border-top: 1px solid rgb(179, 179, 179);
+    padding: 1em;
+	margin: 20px 0px 20px 0px;
+}
+.even {
+    background-color: rgb(246, 246, 246);
+}
+.odd {
+    background-color: rgb(238, 238, 238);
+}
+
+.email-body {
+    white-space: pre;
+    overflow: auto;
+}
+.replies .email-body {
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgb(179, 179, 179);
+    padding: 5px;
+    min-height: 40px;
+    background-color: rgb(255, 255, 255);
+}
+
+.email-body span.read-more a,
+.email-body span.read-less a {
+    float: right;
+    padding: 3px 10px 0px 0px;
+}
+
+.email-info {
+    padding: 0px;
+    margin-top: 5px;
+}
+
+/* Inline quotes */
+.quoted-switch a {
+    background-color: #fafafa;
+    padding: 0 4px 2px 4px;
+    border-left: 2px solid rgb(55, 113, 200);
+    font-weight: bold;
+    font-size: 115%;
+}
+.quoted-switch a:hover {
+    text-decoration: none;
+}
+.quoted-text {
+    border-left: 2px solid rgb(55, 113, 200);
+    padding-left: 0.2em;
+}