From df7e4308493aed18fe97362b01333b679e719c5f Mon Sep 17 00:00:00 2001 From: trueskawka Date: Thu, 27 Oct 2016 01:40:53 -0400 Subject: [PATCH] css: Create a separate file for compose CSS. Create a new file compose.css. Move all compose CSS from zulip.css to compose.css. --- static/styles/compose.css | 471 +++++++++++++++++++++++++++++++++++++ static/styles/zulip.css | 472 +------------------------------------- zproject/settings.py | 2 + 3 files changed, 474 insertions(+), 471 deletions(-) create mode 100644 static/styles/compose.css diff --git a/static/styles/compose.css b/static/styles/compose.css new file mode 100644 index 0000000000..7cb6ade3c9 --- /dev/null +++ b/static/styles/compose.css @@ -0,0 +1,471 @@ +.compose-content { + background-color: #ffffff; + -webkit-transition: background-color 200ms linear; + -moz-transition: background-color 200ms linear; + -o-transition: background-color 200ms linear; + -ms-transition: background-color 200ms linear; + transition: background-color 200ms linear; +} + +.ztable_comp_col1 { + width: 10px; +} + +.new_message_button { + padding-top: 1.1em; +} + +.message_comp { + display: none; + padding: 10px 10px 8px 5px; +} + +#compose_buttons { + text-align: center; +} + +.compose_table .message_header_colorblock, +.compose_table .message_header { + box-shadow: none; + background: none; +} + +.compose_table .message_header_colorblock, +.compose_table .message_header_colorblock.message_header_private_message { + border-radius: 3px 0px 0px 3px; + border-bottom: 0px; +} + +.compose_table .message_header_colorblock.message_header_private_message { + background: #444; +} + +.compose_table .right_part { + padding: 0px; +} + +.compose_table .right_part .icon-vector-narrow { + font-size: 0.6em; + position: relative; +} + +.compose_table .compose_checkbox_label { + display: inline-block; +} + +.compose_table .pm_recipient { + position: relative; + margin-right: 30px; + height: 25px; +} + +.compose_table #private-message .you_text { + position: absolute; + height: 25px; + line-height: 25px; + padding-top: 0px; + padding-bottom: 0px; + width: 4em; + background: #444444; + color: #ffffff; +} + +.compose_table .pm_recipient #private_message_recipient { + margin-left: 4em; + border-left: none; + border-radius: 0px 3px 3px 0px; + padding-top: 0px; + padding-bottom: 0px; + height: 23px; + line-height: 23px; +} + +.compose_table #private-message .right_part { + padding-right: 4em; +} + +.compose_table #compose-lock-icon { + position: relative; + width: 0px; +} + +.compose_table #compose-lock-icon i { + position: absolute; + left: 5px; + top: 3px; +} + +.compose_table .message_header { + background: none; + background-color: #ececec; + border: none; + border-radius: 0px; + box-shadow: none !important; +} + +.compose_table .messagebox { + box-shadow: none !important; +} + + +table.compose_table { + table-layout: fixed; + margin-left: auto; + width: 100%; +} + +#send_message_form { + margin: 0px; +} + +#send_message_form .messagebox { + /* normally 5px 14px; pull in the right and bottom a bit */ + cursor: default; + padding: 0px; + background: none; + box-shadow: none; + border: none; +} + +#enter-sends-label { + margin-bottom: 0px; + margin-top: 2px; +} + +#send_message_form .message_content { + margin-right: 0px; +} + +#compose-send-button { + height: 31px; /* Same as height of compose textarea. */ +} + +#below-compose-content { + width: 100%; + margin-top: 6px; +} + +#compose { + position: fixed; + bottom: 0px; + left: 0px; + z-index: 2; + width: 100%; +} + +#compose-container { + width: 100%; + max-width: 1400px; + margin: auto; +} + +.compose-content { + border-top: 1px solid #dadada; + border-left: 1px solid #dadada; + border-right: 1px solid #dadada; + padding: 8px 15px 8px 10px; + margin-left: 250px; + margin-right: 250px; + position: relative; +} + +#compose_close { + display: none; + position: absolute; + right: -4px; + top: 5px; +} + +#compose_invite_users { + /* Don't overlap into the compose_close × */ + margin-right: 10px; +} + +.compose_invite_user { + padding: 4px 0px 4px 0px; +} + +.compose_invite_close { + display: inline; + margin-top: 4px; + + width: 10px; +} + +.compose-all-everyone-controls, +.compose_invite_user_controls { + float: right; +} + +.compose_invite_link { + height: 20px; + margin-bottom: 3px; +} + +.compose_invite_user_error { + margin-right: 10px; + padding: 3px 8px 3px 8px; +} + +/* Like .nav-tabs > li > a */ +#send-status { + width: 90%; + padding: 8px 14px 8px 14px; + line-height: 20px; + display: none; +} + +/* Like .alert .close */ +.send-status-close { + font-size: 17px; + font-weight: bold; + color: black; + text-shadow: 0 1px 0 white; + opacity: .2; + filter: alpha(opacity=20); + float: right; +} + +.send-status-close:hover { + cursor: pointer; + opacity: .4; + filter: alpha(opacity=40); +} + +#out-of-view-notification { + background: #9bff8b; + background: rgba(163,211,147,0.95); + border-bottom: 1px solid #ffffff; + border-right: 1px solid #ffffff; + border-left: 1px solid #ffffff; + border-radius: 0px 0px 2px 2px; + font-weight: 400; + font-size: 12px; + display: inline-block; + box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5); + position: relative; + top: -8px; + width: 100%; + padding-right: 5px; +} + +.compose-notifications-content { + padding: 4px 10px 4px 10px; + text-align: center; +} + +.composition-area { + position: relative; +} + +#out-of-view-notification .close { + position: absolute; + right: 5px; + top: 5px; + font-size: 17px; + font-weight: bold; + color: black; + text-shadow: 0 1px 0 white; + opacity: .2; + filter: alpha(opacity=20); +} + +textarea.new_message_textarea { + display: table-cell; + width: calc(100% - 10px); + padding: 5px; + height: 1.5em; + max-height: 22em; + margin-bottom: 0px; + resize: none; + margin-top: 5px; +} + +input.recipient_box { + margin: 0px; + height: 1.1em; + border-radius: 3px; +} + +#stream.recipient_box { + width: 20%; + border-radius: 0px 3px 3px 0px; + border-left: 0px; + min-width: 120px; +} + +#subject.recipient_box { + width: 25%; + min-width: 140px; +} + +#stream.recipient_box.lock-padding { + padding-left: 18px; +} + +#private_message_recipient.recipient_box { + width: 100%; +} + +#send_controls { + float: right; + position: relative; + right: -7px; + font-size: 0.8em; + height: 2.2em; +} + +#send_controls .compose_checkbox_label { + margin-right: 2px; +} + +#send_controls .compose_checkbox_label input { + position: relative; + top: -3px; +} + +#send_controls #compose-send-button { + font-weight: 600; + height: 2.2em; + background-image: -moz-linear-gradient(top, rgba(14,70,67,1) 0%, rgba(14,83,68,1) 100%); /* FF3.6+ */ + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,1)), color-stop(100%,rgba(14,83,68,1))); /* Chrome,Safari4+ */ + background-image: -webkit-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* Chrome10+,Safari5.1+ */ + background-image: -o-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* Opera 11.10+ */ + background-image: -ms-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* IE10+ */ + background-image: linear-gradient(to bottom, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* W3C */ +} + +#send_controls #compose-send-button:hover { + font-weight: 600; + height: 2.2em; + background: #fff; + background-image: -moz-linear-gradient(top, rgba(14,70,67,0.6) 0%, rgba(14,83,68,0.6) 100%); /* FF3.6+ */ + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.6)), color-stop(100%,rgba(14,83,68,1))); /* Chrome,Safari4+ */ + background-image: -webkit-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* Chrome10+,Safari5.1+ */ + background-image: -o-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* Opera 11.10+ */ + background-image: -ms-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* IE10+ */ + background-image: linear-gradient(to bottom, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* W3C */ +} + +#stream-message, +#private-message { + display: none; +} + +#sending-indicator { + float: left; + font-weight: bold; + display: none; +} + +#restore-draft { + float: left; + display: none; + margin-right: 1em; + padding-top: 2px; +} + +#sending-indicator { + padding-top: 2px; +} + +#restore-draft:hover { + cursor: pointer; +} + +#compose a.message-control-button { + display: block; + color: #777; + text-decoration: none; + font-size: 14px; + width: 14px; + height: 14px; + margin-right: 8px; + padding-top: 5px; + text-align: center; + float: left; +} + +#compose a.message-control-button:hover { + color: #000; +} + +.drag { + display: none; + height: 18px; + width: 100%; + top: 23px; + position: relative; + cursor: ns-resize; +} + +.emoji_popover { + display: none; + position: relative; + margin-top: 10px; + bottom: 0px; + z-index: 1010; + width: 100%; + height: 140px; + padding: 1px; + text-align: center; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + overflow: hidden; + overflow-y: scroll; +} + +.emoji_popover .emoji { + margin: 2px; + box-sizing: border-box; + cursor: pointer; + display: inline-block; +} + +.emoji_popover .emoji:active { + border-radius: 5px; + border: 2px white solid; +} + +#enter_sends { + margin-top: 0px; + margin-right: 5px; +} + +.inline-subscribe-error { + margin-left: 5px; +} + +#preview_message_area { + /* minus 5px padding. */ + width: calc(100% - 10px); + padding: 5px; + /* the maximum height the textarea gets to. */ + max-height: 308px; + /* the minimum height the textarea collapses to. */ + min-height: 42px; + overflow: auto; + + margin-top: 5px; + + border: 1px solid #cccccc; + border-radius: 4px; + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +a#markdown_preview, +a#undo_markdown_preview { + text-decoration: none; + position: relative; + top: 3px; + font-size: 16px; + color: #777; +} + +#markdown_preview_spinner { + margin: auto; +} diff --git a/static/styles/zulip.css b/static/styles/zulip.css index dbacd03f83..818623abb6 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -16,8 +16,7 @@ body { /* Common background color */ body, -#tab_bar_underpadding, -.compose-content { +#tab_bar_underpadding { background-color: #ffffff; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; @@ -135,10 +134,6 @@ p.n-margin { cursor: pointer; } -.ztable_comp_col1 { - width: 10px; -} - .header { position: fixed; z-index: 101; @@ -423,10 +418,6 @@ a:hover code { white-space: nowrap; } -.new_message_button { - padding-top: 1.1em; -} - .sidebar-title, .share-the-love-title { font-size: 11px; @@ -832,16 +823,6 @@ ul.filters li.out_of_home_view li.muted_topic { overflow: visible; } - -.message_comp { - display: none; - padding: 10px 10px 8px 5px; -} - -#compose_buttons { - text-align: center; -} - td.pointer { vertical-align: top; padding-top: 10px; @@ -1125,77 +1106,6 @@ just a temporary hack. to { transform:rotate(359deg); } } -.compose_table .message_header_colorblock, -.compose_table .message_header { - box-shadow: none; - background: none; -} - -.compose_table .message_header_colorblock, -.compose_table .message_header_colorblock.message_header_private_message { - border-radius: 3px 0px 0px 3px; - border-bottom: 0px; -} - -.compose_table .message_header_colorblock.message_header_private_message { - background: #444; -} - -.compose_table .right_part { - padding: 0px; -} - -.compose_table .right_part .icon-vector-narrow { - font-size: 0.6em; - position: relative; -} - -.compose_table .compose_checkbox_label { - display: inline-block; -} - -.compose_table .pm_recipient { - position: relative; - margin-right: 30px; - height: 25px; -} - -.compose_table #private-message .you_text { - position: absolute; - height: 25px; - line-height: 25px; - padding-top: 0px; - padding-bottom: 0px; - width: 4em; - background: #444444; - color: #ffffff; -} - -.compose_table .pm_recipient #private_message_recipient { - margin-left: 4em; - border-left: none; - border-radius: 0px 3px 3px 0px; - padding-top: 0px; - padding-bottom: 0px; - height: 23px; - line-height: 23px; -} - -.compose_table #private-message .right_part { - padding-right: 4em; -} - -.compose_table #compose-lock-icon { - position: relative; - width: 0px; -} - -.compose_table #compose-lock-icon i { - position: absolute; - left: 5px; - top: 3px; -} - .messagebox-bottom { height: 3px; background-color: #fff; @@ -1229,21 +1139,9 @@ just a temporary hack. line-height: 17px; } -.compose_table .message_header { - background: none; - background-color: #ececec; - border: none; - border-radius: 0px; - box-shadow: none !important; -} - /* Base color backgrounds for messageboxes, private messages, mentions, and unread messages */ -.compose_table .messagebox { - box-shadow: none !important; -} - .messagebox { background-color: #ffffff; position: relative; @@ -1504,12 +1402,6 @@ div.message_table { z-index: 2; } -table.compose_table { - table-layout: fixed; - margin-left: auto; - width: 100%; -} - div.focused_table { display: block; } @@ -1665,37 +1557,6 @@ blockquote p { border-left-color: #ddd; } -#send_message_form { - margin: 0px; -} - -#send_message_form .messagebox { - /* normally 5px 14px; pull in the right and bottom a bit */ - cursor: default; - padding: 0px; - background: none; - box-shadow: none; - border: none; -} - -#enter-sends-label { - margin-bottom: 0px; - margin-top: 2px; -} - -#send_message_form .message_content { - margin-right: 0px; -} - -#compose-send-button { - height: 31px; /* Same as height of compose textarea. */ -} - -#below-compose-content { - width: 100%; - margin-top: 6px; -} - .bookend { padding-top: 10px; background-color: transparent; @@ -1723,132 +1584,6 @@ blockquote p { vertical-align: top; } -#compose { - position: fixed; - bottom: 0px; - left: 0px; - z-index: 2; - width: 100%; -} - -#compose-container { - width: 100%; - max-width: 1400px; - margin: auto; -} - -.compose-content { - border-top: 1px solid #dadada; - border-left: 1px solid #dadada; - border-right: 1px solid #dadada; - padding: 8px 15px 8px 10px; - margin-left: 250px; - margin-right: 250px; - position: relative; -} - -#compose_close { - display: none; - position: absolute; - right: -4px; - top: 5px; -} - -#compose_invite_users { - /* Don't overlap into the compose_close × */ - margin-right: 10px; -} - -.compose_invite_user { - padding: 4px 0px 4px 0px; -} - -.compose_invite_close { - display: inline; - margin-top: 4px; - - width: 10px; -} - -.compose-all-everyone-controls, -.compose_invite_user_controls { - float: right; -} - -.compose_invite_link { - height: 20px; - margin-bottom: 3px; -} - -.compose_invite_user_error { - margin-right: 10px; - - padding: 3px 8px 3px 8px; -} - -/* Like .nav-tabs > li > a */ -#send-status { - width: 90%; - padding: 8px 14px 8px 14px; - line-height: 20px; - display: none; -} - -/* Like .alert .close */ -.send-status-close { - font-size: 17px; - font-weight: bold; - color: black; - text-shadow: 0 1px 0 white; - opacity: .2; - filter: alpha(opacity=20); - float: right; -} - -.send-status-close:hover { - cursor: pointer; - opacity: .4; - filter: alpha(opacity=40); -} - -#out-of-view-notification { - background: #9bff8b; - background: rgba(163,211,147,0.95); - border-bottom: 1px solid #ffffff; - border-right: 1px solid #ffffff; - border-left: 1px solid #ffffff; - border-radius: 0px 0px 2px 2px; - font-weight: 400; - font-size: 12px; - display: inline-block; - box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5); - position: relative; - top: -8px; - width: 100%; - padding-right: 5px; -} - -.compose-notifications-content { - padding: 4px 10px 4px 10px; - text-align: center; -} - -.composition-area { - position: relative; -} - -#out-of-view-notification .close { - position: absolute; - right: 5px; - top: 5px; - font-size: 17px; - font-weight: bold; - color: black; - text-shadow: 0 1px 0 white; - opacity: .2; - filter: alpha(opacity=20); -} - .home-error-bar { margin-top: 5px; display: none; @@ -1866,84 +1601,6 @@ blockquote p { margin-bottom: auto; } -textarea.new_message_textarea { - display: table-cell; - width: calc(100% - 10px); - padding: 5px; - height: 1.5em; - max-height: 22em; - margin-bottom: 0px; - resize: none; - margin-top: 5px; -} - -input.recipient_box { - margin: 0px; - height: 1.1em; - border-radius: 3px; -} - -#stream.recipient_box { - width: 20%; - border-radius: 0px 3px 3px 0px; - border-left: 0px; - min-width: 120px; -} - -#subject.recipient_box { - width: 25%; - min-width: 140px; -} - -#stream.recipient_box.lock-padding { - padding-left: 18px; -} - -#private_message_recipient.recipient_box { - width: 100%; -} - -#send_controls { - float: right; - position: relative; - right: -7px; - font-size: 0.8em; - height: 2.2em; -} - -#send_controls .compose_checkbox_label { - margin-right: 2px; -} - -#send_controls .compose_checkbox_label input { - position: relative; - top: -3px; -} - -#send_controls #compose-send-button { - font-weight: 600; - height: 2.2em; - background-image: -moz-linear-gradient(top, rgba(14,70,67,1) 0%, rgba(14,83,68,1) 100%); /* FF3.6+ */ - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,1)), color-stop(100%,rgba(14,83,68,1))); /* Chrome,Safari4+ */ - background-image: -webkit-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* Chrome10+,Safari5.1+ */ - background-image: -o-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* Opera 11.10+ */ - background-image: -ms-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* IE10+ */ - background-image: linear-gradient(to bottom, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* W3C */ -} - -#send_controls #compose-send-button:hover { - font-weight: 600; - height: 2.2em; - background: #fff; - background-image: -moz-linear-gradient(top, rgba(14,70,67,0.6) 0%, rgba(14,83,68,0.6) 100%); /* FF3.6+ */ - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.6)), color-stop(100%,rgba(14,83,68,1))); /* Chrome,Safari4+ */ - background-image: -webkit-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* Chrome10+,Safari5.1+ */ - background-image: -o-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* Opera 11.10+ */ - background-image: -ms-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* IE10+ */ - background-image: linear-gradient(to bottom, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* W3C */ -} - - .brand.skinny-user-gravatar { display: table-cell; padding-top: 0px; @@ -2102,7 +1759,6 @@ input.recipient_box { z-index: 99; } - #navbar-buttons { white-space: nowrap; margin-left: 15px; @@ -2202,7 +1858,6 @@ input.recipient_box { z-index: 10; } - #navbar-buttons ul.nav .dropdown-toggle, #navbar-buttons ul.nav li.active .dropdown-toggle { font-size: 20px; @@ -2437,7 +2092,6 @@ div.floating_recipient { display: inline !important; } - .twitter-image, .message_inline_image { margin-bottom: 5px; @@ -2557,7 +2211,6 @@ div.floating_recipient { color: white; } - #fmt_help_table { table-layout: fixed; } @@ -2735,11 +2388,6 @@ button.topic_edit_cancel { opacity: 0.4; } -#stream-message, -#private-message { - display: none; -} - .emoji { height: 25px; width: 25px; @@ -2748,12 +2396,6 @@ button.topic_edit_cancel { margin-top: -7px; } -#sending-indicator { - float: left; - font-weight: bold; - display: none; -} - .streamlist_swatch { display: block; width: 11px; @@ -2939,81 +2581,6 @@ li.expanded_private_message { margin-right: -50%; } -#restore-draft { - float: left; - display: none; - margin-right: 1em; - padding-top: 2px; -} - -#sending-indicator { - padding-top: 2px; -} - -#restore-draft:hover { - cursor: pointer; -} - -#compose a.message-control-button { - display: block; - color: #777; - text-decoration: none; - font-size: 14px; - width: 14px; - height: 14px; - margin-right: 8px; - padding-top: 5px; - text-align: center; - float: left; -} - -#compose a.message-control-button:hover { - color: #000; -} - -.drag { - display: none; - height: 18px; - width: 100%; - top: 23px; - position: relative; - cursor: ns-resize; -} - -.emoji_popover { - display: none; - position: relative; - margin-top: 10px; - bottom: 0px; - z-index: 1010; - width: 100%; - height: 140px; - padding: 1px; - text-align: center; - background-color: #ffffff; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.2); - overflow: hidden; - overflow-y: scroll; -} - -.emoji_popover .emoji { - margin: 2px; - box-sizing: border-box; - cursor: pointer; - display: inline-block; -} - -.emoji_popover .emoji:active { - border-radius: 5px; - border: 2px white solid; -} - -#enter_sends { - margin-top: 0px; - margin-right: 5px; -} - #group-pm-list { display: none; } @@ -3331,40 +2898,3 @@ li.show-more-private-messages a { .add-user-list-filter { width: 80%; } - -.inline-subscribe-error { - margin-left: 5px; -} - -#preview_message_area { - /* minus 5px padding. */ - width: calc(100% - 10px); - padding: 5px; - /* the maximum height the textarea gets to. */ - max-height: 308px; - /* the minimum height the textarea collapses to. */ - min-height: 42px; - overflow: auto; - - margin-top: 5px; - - border: 1px solid #cccccc; - border-radius: 4px; - - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -a#markdown_preview, -a#undo_markdown_preview { - text-decoration: none; - position: relative; - top: 3px; - font-size: 16px; - color: #777; -} - -#markdown_preview_spinner { - margin: auto; -} diff --git a/zproject/settings.py b/zproject/settings.py index e4baab7481..d5eb1dba75 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -663,6 +663,7 @@ PIPELINE = { 'styles/media.css', 'styles/settings.css', 'styles/subscriptions.css', + 'styles/compose.css', 'styles/overlay.css', 'styles/pygments.css', 'styles/thirdparty-fonts.css', @@ -680,6 +681,7 @@ PIPELINE = { 'styles/media.css', 'styles/settings.css', 'styles/subscriptions.css', + 'styles/compose.css', 'styles/overlay.css', 'styles/pygments.css', 'styles/thirdparty-fonts.css',