From d46e1f9b73b6d2ff3e79e665a6bf1f07d84d6cb4 Mon Sep 17 00:00:00 2001
From: Ilgiz Magazov <ilgiz@magazov.com>
Date: Mon, 10 Jun 2019 12:04:38 +0300
Subject: [PATCH 01/13] Add basic black/white mode

---
 darkmode.css | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 darkmode.css

diff --git a/darkmode.css b/darkmode.css
new file mode 100644
index 0000000..b3bbae7
--- /dev/null
+++ b/darkmode.css
@@ -0,0 +1,134 @@
+body, .im_page_wrap {
+    background: black !important;
+    color: white !important;
+    border: none !important;
+}
+
+.tg_head_split {
+    background: black !important;
+}
+
+.im_bottom_panel_wrap {
+    background: black !important;
+    color: white !important;
+}
+
+.im_dialogs_search .im_dialogs_search_field {
+    background: rgb(34,48,63) !important;
+    color: white !important;
+}
+
+.icon-search-clear {
+    color: white !important;
+}
+
+.im_record_bg {
+    background: black !important;
+}
+
+.im_message_outer_wrap:hover {
+    background: rgba(128, 128, 128, 0.1) !important;
+}
+
+.im_bottom_panel_wrap .im_message_outer_wrap {
+    background: black !important;
+}
+
+.im_message_unread_split {
+    background: black !important;
+}
+
+.im_history_selectable .im_message_outer_wrap {
+    background: black !important;
+}
+
+.im_service_message {
+    background: black !important;
+}
+
+.im_history_typing_wrap {
+    background: black !important;
+}
+
+.im_history_messages_peer {
+    background: black !important;
+}
+
+.im_dialogs_col_wrap noselect {
+    background: gray !important;
+}
+
+.page_wrap {
+    background: black !important;
+}
+
+.im_history_empty.vertical-aligned, .im_history_not_selected.vertical-aligned {
+    background: black !important;
+    color: white !important
+}
+
+.im_dialogs_col_wrap {
+    background: black !important;
+    border-right-color: grey !important;
+}
+
+.im_dialog_peer {
+    color: #ededed !important;
+}
+
+.im_dialogs_scrollable_wrap a.im_dialog:hover, .im_dialogs_scrollable_wrap a.im_dialog_selected {
+    background: rgba(128, 128, 128, 0.2) !important;
+    color: white;
+    transition: width 2s;
+}
+
+a.im_dialog:hover .im_short_message_text, a.im_dialog_selected .im_short_message_text {
+    color: white !important;
+}
+
+a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog .im_short_message_media, a.im_dialog .im_short_message_service {
+    color: white !important;
+}
+
+.dropdown-menu {
+    background: black !important;
+    border: none !important;
+}
+
+.dropdown-menu > li > a {
+    background: black !important;
+    color: white !important
+}
+
+.dropdown-menu li a:hover {
+    background: rgba(128, 128, 128, 0.1) !important;
+    color: white !important
+}
+
+.md_modal_sections {
+    background: black !important;
+}
+
+.tg_checkbox_label {
+    color: white !important
+}
+
+.md_modal_iconed_section_wrap.md_modal_iconed_section_peers {
+    background: black !important
+}
+
+.im_dialog_badge_muted {
+    background: rgba(128, 128, 128, 0.7) !important
+}
+
+.md_simple_modal_footer, .md_simple_modal_body {
+    background: black !important
+}
+
+.im_bot_intro_message_wrap {
+    background: #373737 !important
+}
+
+.im_dialogs_col .nano > .nano-pane > .nano-slider {
+    background: #2a2a2a !important
+}

From 8758aa85866d82e200d020c9722660246ff13d15 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Fri, 19 Jul 2019 13:13:51 +0800
Subject: [PATCH 02/13] Indent with two spaces (format with css-beautify -s 2)

---
 darkmode.css | 107 +++++++++++++++++++++++++++------------------------
 1 file changed, 57 insertions(+), 50 deletions(-)

diff --git a/darkmode.css b/darkmode.css
index b3bbae7..4eb845a 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -1,134 +1,141 @@
-body, .im_page_wrap {
-    background: black !important;
-    color: white !important;
-    border: none !important;
+body,
+.im_page_wrap {
+  background: black !important;
+  color: white !important;
+  border: none !important;
 }
 
 .tg_head_split {
-    background: black !important;
+  background: black !important;
 }
 
 .im_bottom_panel_wrap {
-    background: black !important;
-    color: white !important;
+  background: black !important;
+  color: white !important;
 }
 
 .im_dialogs_search .im_dialogs_search_field {
-    background: rgb(34,48,63) !important;
-    color: white !important;
+  background: rgb(34, 48, 63) !important;
+  color: white !important;
 }
 
 .icon-search-clear {
-    color: white !important;
+  color: white !important;
 }
 
 .im_record_bg {
-    background: black !important;
+  background: black !important;
 }
 
 .im_message_outer_wrap:hover {
-    background: rgba(128, 128, 128, 0.1) !important;
+  background: rgba(128, 128, 128, 0.1) !important;
 }
 
 .im_bottom_panel_wrap .im_message_outer_wrap {
-    background: black !important;
+  background: black !important;
 }
 
 .im_message_unread_split {
-    background: black !important;
+  background: black !important;
 }
 
 .im_history_selectable .im_message_outer_wrap {
-    background: black !important;
+  background: black !important;
 }
 
 .im_service_message {
-    background: black !important;
+  background: black !important;
 }
 
 .im_history_typing_wrap {
-    background: black !important;
+  background: black !important;
 }
 
 .im_history_messages_peer {
-    background: black !important;
+  background: black !important;
 }
 
 .im_dialogs_col_wrap noselect {
-    background: gray !important;
+  background: gray !important;
 }
 
 .page_wrap {
-    background: black !important;
+  background: black !important;
 }
 
-.im_history_empty.vertical-aligned, .im_history_not_selected.vertical-aligned {
-    background: black !important;
-    color: white !important
+.im_history_empty.vertical-aligned,
+.im_history_not_selected.vertical-aligned {
+  background: black !important;
+  color: white !important
 }
 
 .im_dialogs_col_wrap {
-    background: black !important;
-    border-right-color: grey !important;
+  background: black !important;
+  border-right-color: grey !important;
 }
 
 .im_dialog_peer {
-    color: #ededed !important;
+  color: #ededed !important;
 }
 
-.im_dialogs_scrollable_wrap a.im_dialog:hover, .im_dialogs_scrollable_wrap a.im_dialog_selected {
-    background: rgba(128, 128, 128, 0.2) !important;
-    color: white;
-    transition: width 2s;
+.im_dialogs_scrollable_wrap a.im_dialog:hover,
+.im_dialogs_scrollable_wrap a.im_dialog_selected {
+  background: rgba(128, 128, 128, 0.2) !important;
+  color: white;
+  transition: width 2s;
 }
 
-a.im_dialog:hover .im_short_message_text, a.im_dialog_selected .im_short_message_text {
-    color: white !important;
+a.im_dialog:hover .im_short_message_text,
+a.im_dialog_selected .im_short_message_text {
+  color: white !important;
 }
 
-a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog .im_short_message_media, a.im_dialog .im_short_message_service {
-    color: white !important;
+a.im_dialog .im_dialog_chat_from_wrap,
+a.im_dialog .im_short_message_media,
+a.im_dialog .im_short_message_service {
+  color: white !important;
 }
 
 .dropdown-menu {
-    background: black !important;
-    border: none !important;
+  background: black !important;
+  border: none !important;
 }
 
-.dropdown-menu > li > a {
-    background: black !important;
-    color: white !important
+.dropdown-menu>li>a {
+  background: black !important;
+  color: white !important
 }
 
 .dropdown-menu li a:hover {
-    background: rgba(128, 128, 128, 0.1) !important;
-    color: white !important
+  background: rgba(128, 128, 128, 0.1) !important;
+  color: white !important
 }
 
 .md_modal_sections {
-    background: black !important;
+  background: black !important;
 }
 
 .tg_checkbox_label {
-    color: white !important
+  color: white !important
 }
 
 .md_modal_iconed_section_wrap.md_modal_iconed_section_peers {
-    background: black !important
+  background: black !important
 }
 
 .im_dialog_badge_muted {
-    background: rgba(128, 128, 128, 0.7) !important
+  background: rgba(128, 128, 128, 0.7) !important
 }
 
-.md_simple_modal_footer, .md_simple_modal_body {
-    background: black !important
+.md_simple_modal_footer,
+.md_simple_modal_body {
+  background: black !important
 }
 
 .im_bot_intro_message_wrap {
-    background: #373737 !important
+  background: #373737 !important
 }
 
-.im_dialogs_col .nano > .nano-pane > .nano-slider {
-    background: #2a2a2a !important
+.im_dialogs_col .nano>.nano-pane>.nano-slider {
+  background: #2a2a2a !important
 }

From 19da955b5fd4315f0752813a7d48a43b3cd2a192 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Thu, 18 Jul 2019 12:21:00 +0800
Subject: [PATCH 03/13] Remove unused darkTheme CSS

---
 service.css | 128 ----------------------------------------------------
 1 file changed, 128 deletions(-)

diff --git a/service.css b/service.css
index 69291a1..79729d0 100644
--- a/service.css
+++ b/service.css
@@ -21,131 +21,3 @@
 .im_message_body {
   max-width: 580px !important;
 }
-
-body.darkTheme,
-.darkTheme .modal-content {
-    color: #bbb !important;
-    background: #252525 !important;
-}
-.darkTheme a.tg_checkbox {
-    color: #bbb !important;
-}
-.darkTheme .im_page_wrap {
-    /*background color of contentwrapper under header*/
-
-    background-color: #303030 !important;
-    border-left: 1px solid #4d4d4d !important;
-    border-right: 1px solid #4d4d4d !important;
-    border-bottom: 1px solid #4d4d4d !important;
-    box-shadow: none;
-}
-.darkTheme .im_message_body,
-.darkTheme .im_attach,
-.darkTheme .im_media_attach,
-.darkTheme .im_record,
-.darkTheme .im_message_document_thumbed {
-    background: inherit !important;
-}
-.darkTheme .im_dialog_peer {
-    /*peer nickname unselected*/
-
-    color: #bbb !important;
-}
-.darkTheme .contacts_modal_members_list a.contacts_modal_contact {
-    /*nicknames in contactlist via hamburger menu*/
-
-    color: #bbb;
-}
-.darkTheme .active a.im_dialog {
-    /*selected peer */
-
-    background-color: #4d4d4d !important;
-}
-.darkTheme .tg_head_split,
-.darkTheme .md_modal_head {
-    /*page header block*/
-
-    background-color: #4d4d4d !important;
-}
-.darkTheme .dropdown.open .tg_head_btn,
-.darkTheme .tg_head_btn:hover {
-    background: #4d4d4d !important;
-}
-.darkTheme .form-control {
-    /*input field*/
-
-    background-color: #0e0e0e !important;
-    color: #bbb !important;
-}
-.darkTheme .composer_rich_textarea {
-    background: #303030 !important;
-    border-color: #bbb !important;
-}
-.darkTheme .im_dialogs_col_wrap {
-    /*contactlist right border*/
-
-    border-right: 2px solid #4d4d4d;
-}
-.darkTheme .im_dialogs_col .nano > .nano-pane > .nano-slider {
-    /*scrollbarbutton when hover*/
-
-    background-color: #4d4d4d !important;
-}
-.darkTheme .tg_head_split {
-    background-color: #151515;
-}
-.darkTheme .im_submit {
-    color: #4d4d4d;
-}
-.darkTheme .im_message_mymention {
-    background: #1d1d1d;
-}
-.darkTheme .im_message_focus .im_message_outer_wrap {
-    background-color: #4d4d4d;
-}
-.darkTheme .im_message_selected .im_message_outer_wrap {
-    background: #4d4d4d;
-}
-.darkTheme a:hover {
-    background-color: #282828 !important;
-}
-.darkTheme .im_message_unread_split {
-    background: #4d4d4d;
-}
-@keyframes im_message_focus_fade {
-    0% {
-        background-color: #2d2d2d;
-    }
-}
-.darkTheme .btn-primary {
-    background-color: #4d4d4d;
-}
-.darkTheme .im_history_select_active .im_message_outer_wrap:hover {
-    background: #4d4d4d;
-}
-.darkTheme .im_dialog_chat_from_wrap,
-.darkTheme .im_dialog_message_service {
-    color: #6ac;
-}
-.darkTheme .composer_rich_textarea,
-.darkTheme .composer_textarea {
-    box-shadow: 0px 3px 1px #ddd;
-}
-.darkTheme .composer_rich_textarea:focus {
-    box-shadow: 0px 3px 1px #ddd !important;
-}
-.darkTheme .tg_head_logo_dropdown .dropdown-menu > li > a {
-    color: #ddd;
-}
-.darkTheme .btn-primary.disabled,
-.darkTheme .btn-primary[disabled] {
-    background: #4d4d4d none repeat scroll 0% 0%;
-}
-/*emoji*/
-
-.darkTheme .composer_emoji_tooltip,
-.darkTheme .icon-tooltip-tail,
-.darkTheme .dropdown-menu {
-    background-color: #4d4d4d !important;
-    border-color: #5d5d5d;
-}

From 372cef525bebe9db723e914780acf2f0e94d2b85 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Thu, 18 Jul 2019 14:02:24 +0800
Subject: [PATCH 04/13] Make layout and colours more like the Telegram desktop
 app

---
 service.css | 292 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 292 insertions(+)

diff --git a/service.css b/service.css
index 79729d0..59ff9cd 100644
--- a/service.css
+++ b/service.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700&display=swap');
+
 .tg_head_split {
   max-width: 100% !important;
 }
@@ -21,3 +23,293 @@
 .im_message_body {
   max-width: 580px !important;
 }
+
+/* Leave enough space for the user avatar and the timestamp, and the potential text "edited" */
+.im_message_body {
+  max-width: calc(100% - 170px) !important;
+}
+/* Outgoing grouped messages don't have an avatar, so they can be wider */
+/* But incoming grouped messages cannot, because they still use the space of the avatar */
+.im_grouped .im_message_out .im_message_body,
+.im_grouped_short .im_message_out .im_message_body {
+  max-width: calc(100% - 90px) !important;
+}
+
+
+/* === Improve layout === */
+
+/* Telegram for desktop has a slighly larger font */
+body {
+  font-size: 13px;
+}
+
+/* Bubbles for chat messages */
+div.im_message_body {
+  background-color: #fff !important;
+}
+
+/* Bubbles for chat messages */
+div.im_message_body {
+  border-radius: 8px;
+  padding: 6px 12px;
+}
+
+/* This moves everything over to the right, but the date now appears in the wrong place (between the author and the body) */
+.im_message_out {
+  display: flex;
+  justify-content: flex-end;
+}
+.im_message_out .im_message_meta {
+  position: absolute;
+  left: 15px;
+}
+.im_message_in {
+  display: flex;
+  justify-content: flex-start;
+}
+.im_message_in .im_message_meta {
+  position: absolute;
+  right: 30px;
+}
+
+/* Bring related chat messages closer together */
+.im_content_message_wrap {
+  margin: 7px 10px 1.5px 16px !important;
+}
+.im_grouped .im_content_message_wrap,
+.im_grouped_short .im_content_message_wrap {
+  margin: 1.5px 10px 1.5px 16px !important;
+}
+
+/* With our new layout there is no space for the checkboxes, and we don't really need them anyway */
+.im_content_message_wrap .icon-select-tick {
+  display: none !important;
+}
+
+/* Round edges on the input boxes */
+.im_dialogs_search .im_dialogs_search_field,
+.composer_rich_textarea,
+.composer_rich_textarea:focus {
+  border-radius: 12px !important;
+}
+
+.composer_rich_textarea,
+.composer_rich_textarea:focus {
+  padding: 8px 12px !important;
+  box-shadow: none !important;
+}
+
+/* Move the emoji icon in a bit, to fit with the rounded edges */
+.composer_emoji_insert_btn {
+  right: 5px;
+  top: 3px;
+}
+
+/* Wider edit box */
+.im_send_panel_wrap {
+  max-width: 1054px !important;
+  max-width: calc(100%) !important;
+}
+
+.im_send_form {
+  max-width: 882px !important;
+  max-width: calc(100% - 172px) !important;
+}
+
+/* Move the unread message marker (a dot) outside the chat bubble */
+/* TODO WIP: But we don't want to do that on mobile version! */
+.icon-message-status {
+  margin-left: 17px !important;
+}
+
+
+/* === Use colours more like the desktop app === */
+
+/* Green background */
+.im_history_wrap {
+  background: linear-gradient(30deg, #79af7d, #d0e8b0);
+}
+
+.im_message_unread_split {
+  background: none;
+}
+
+/* Timestamps and other text against green background */
+.im_message_date,
+.im_message_fwd_date,
+.im_service_message,
+.im_message_unread_split,
+.im_message_selected .im_message_date,
+.im_history_empty,
+.im_history_not_selected,
+.im_history_typing {
+  color: #fff !important;
+}
+
+/* Bubbles for chat messages */
+div.im_message_body {
+  background-color: #fff !important;
+  /* Although hardly visible, this border helps to separate bubbles from the background image, when colours are similar */
+  /* border: 1px solid #0001; */
+  /* Since we added a border, reduce the margin */
+  padding: 4px 12px !important;
+}
+
+/* Links in general, links inside messages, usernames */
+a,
+.im_message_body a,
+body .im_message_reply_author,
+.im_history_typing a.im_history_typing_author {
+  color: #53a9df !important;
+}
+
+/* Changing the link colour changed the button text, so we change it back to white. */
+a.btn-primary {
+  color: #fff !important;
+}
+
+/* User's own messages are a different colour */
+.im_message_out .im_message_body {
+  background-color: #f1fde2 !important;
+}
+
+.im_message_author,
+.im_message_fwd_author {
+  color: #53a9df !important;
+}
+
+/* Selected message(s) */
+.im_message_selected .im_message_outer_wrap {
+  background: #f2f6fa44 !important;
+}
+.im_message_selected .im_message_outer_wrap:hover,
+.im_history_select_active .im_message_outer_wrap:hover {
+  background-color: #f2f6fa88 !important;
+}
+.im_message_selected .im_message_outer_wrap .im_message_body {
+  background-color: #c9e0f4 !important;
+}
+
+code {
+  color: #4f9c70 !important;
+  background-color: #0001 !important;
+  font-size: 100% !important;
+}
+
+/* Scrollbar and slider */
+.im_history_col .nano>.nano-pane,
+.contacts_modal_col .nano>.nano-pane,
+.sessions_modal_col .nano>.nano-pane,
+.stickerset_modal_col .nano>.nano-pane,
+.im_dialogs_modal_col .nano>.nano-pane {
+  background: #aaa3 !important;
+}
+.im_history_col .nano>.nano-pane>.nano-slider,
+.contacts_modal_col .nano>.nano-pane>.nano-slider,
+.sessions_modal_col .nano>.nano-pane>.nano-slider,
+.stickerset_modal_col .nano>.nano-pane>.nano-slider,
+.im_dialogs_modal_col .nano>.nano-pane>.nano-slider {
+  background: #aaa5 !important;
+}
+
+/* Header */
+.tg_head_split {
+  background-color: #53a9df !important;
+}
+.tg_head_btn {
+  color: #fffa !important;
+}
+
+/* Sidebar: Selected conversation highlight */
+.im_dialogs_scrollable_wrap .active a.im_dialog {
+  background-color: #53a9df !important;
+}
+
+/* Sidebar: Preview text is a bit thinner */
+.im_dialog_message {
+  /* font-weight: 300; */
+}
+/* Preview text is a bit lighter than 'grey' */
+a.im_dialog .im_short_message_text {
+  /* Note: Do not make this !important, or it will override the .active version */
+  /* color: #b2b2b2; */
+  color: #bbbbbb;
+}
+
+/* Emphasised text */
+a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog .im_short_message_media, a.im_dialog .im_short_message_service {
+  color: #2894d7 !important;
+}
+/* But if the conversation is selected, do not use colour to emphasise */
+.active a.im_dialog .im_dialog_chat_from_wrap, .active a.im_dialog .im_short_message_media, .active a.im_dialog .im_short_message_service {
+    color: white !important;
+}
+/* The Telegram app does not use a special highlight for a mention */
+/* Even if we allow the light yellow for light mode, we should not use it for dark mode */
+.im_message_mymention {
+  background: none !important;
+}
+
+/* Input boxes */
+.im_dialogs_search .im_dialogs_search_field,
+.composer_rich_textarea,
+.composer_rich_textarea:focus {
+  border: 1px solid #8888 !important;
+  /* Use the same font size as the chat text */
+  font-size: 13px;
+}
+
+/* Instead of a right border on the sidebar, put a left border just on the bottom panel */
+.im_dialogs_col_wrap {
+  border-right: 0 !important;
+}
+.im_bottom_panel_wrap {
+  border-left: 1px solid #8883 !important;
+}
+
+/* Optional: It's nice to put a transparent dark box behind some of white text on the green background. */
+.im_message_date,
+.im_message_fwd_date,
+.im_history_typing,
+.im_message_unread_split,
+.im_message_selected .im_message_date,
+.im_history_empty {
+  /* background: #5a815133 !important; */
+  background: #5a815133 !important;
+}
+.im_service_message,
+.im_history_not_selected {
+  background: #5a815188 !important;
+}
+/* Those which are not full width look better with rounded corner */
+.im_message_date,
+.im_message_fwd_date,
+.im_history_not_selected,
+.im_history_typing {
+  border-radius: 6px !important;
+  padding: 4px 8px !important;
+}
+.im_history_not_selected {
+  margin-left: auto;
+  margin-right: auto;
+}
+/* Some have unequal padding, which we convert to margin */
+.im_message_date,
+.im_message_fwd_date {
+  margin: 0 0 20px 10px !important;
+}
+.im_page_peer_not_selected .im_history_not_selected_wrap {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.im_service_message {
+  display: inline-block;
+}
+.im_history_typing .im_history_typing_author,
+.im_service_message .im_message_author,
+.im_service_message a {
+  color: #fff !important;
+  font-weight: normal !important;
+}

From 6a6d92ebe6d70b30baada27ba9cf5dc3dd1d5178 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Fri, 19 Jul 2019 13:14:20 +0800
Subject: [PATCH 05/13] Make darkmode colours more like the Telegram desktop
 app

---
 darkmode.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)

diff --git a/darkmode.css b/darkmode.css
index 4eb845a..24b6c32 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -65,7 +65,6 @@ body,
 
 .im_history_empty.vertical-aligned,
 .im_history_not_selected.vertical-aligned {
-  background: black !important;
   color: white !important
 }
 
@@ -139,3 +138,107 @@ a.im_dialog .im_short_message_service {
 .im_dialogs_col .nano>.nano-pane>.nano-slider {
   background: #2a2a2a !important
 }
+
+
+
+
+/* === Use colours more like the desktop app === */
+.page_wrap,
+.im_page_wrap,
+.im_history_wrap,
+.im_history_not_selected_wrap,
+.im_history_selectable .im_message_outer_wrap,
+.im_history_typing_wrap,
+.im_message_unread_split,
+.im_service_message,
+.im_history_messages_peer {
+  background: #0b1625 !important;
+}
+
+.im_dialogs_search .im_dialogs_search_field,
+.composer_rich_textarea,
+.composer_rich_textarea:focus {
+  background: #0b1625 !important;
+  /* border: none; */
+  border: 1px solid #8882 !important;
+}
+
+/* Bubbles for chat messages */
+div.im_message_body {
+  background-color: #19293a !important;
+}
+
+/* User's own messages are a different colour */
+.im_message_out .im_message_body {
+  background-color: #315c83 !important;
+}
+
+/* Selected message(s) */
+.im_message_selected .im_message_outer_wrap {
+  background: #f2f6fa22 !important;
+}
+
+.im_message_selected .im_message_outer_wrap:hover,
+.im_history_select_active .im_message_outer_wrap:hover {
+  background-color: #f2f6fa44 !important;
+}
+
+.im_message_selected .im_message_outer_wrap .im_message_body {
+  background-color: #357bae !important;
+}
+
+code {
+  color: #b7d7f5 !important;
+  background-color: #0002 !important;
+}
+
+.im_bottom_panel_wrap {
+  background-color: #182531 !important;
+}
+
+/* Sidebar */
+.im_dialogs_col_wrap {
+  background: #182531 !important;
+  border-right: 0;
+}
+
+/* Selected conversation highlight */
+.im_dialogs_scrollable_wrap .active a.im_dialog {
+  background-color: #315c83 !important;
+}
+
+/* Emphasised text */
+a.im_dialog .im_dialog_chat_from_wrap,
+a.im_dialog .im_short_message_media,
+a.im_dialog .im_short_message_service {
+  color: #53a9df !important;
+}
+
+/* Header */
+.tg_head_split {
+  background-color: #182531 !important;
+}
+
+.md_modal_sections {
+  background-color: #19293a !important;
+}
+
+/* Remove the white line between the content and the footer */
+.im_page_wrap {
+  box-shadow: none !important;
+}
+
+/* Optional: It's nice to put a transparent dark box behind some of white text on the green background. */
+/* In dark mode, these are the same as the bubble backgrounds */
+.im_message_date,
+.im_message_fwd_date,
+.im_history_typing,
+.im_message_unread_split,
+.im_message_selected .im_message_date,
+.im_history_empty {
+  background: none !important;
+}
+.im_service_message,
+.im_history_not_selected {
+  background: #19293a !important;
+}

From d1e1e799d314bde250299feb6809797c6bb7eddd Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Fri, 19 Jul 2019 14:31:26 +0800
Subject: [PATCH 06/13] Remove the hard limits on column widths

---
 service.css | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/service.css b/service.css
index 59ff9cd..c028516 100644
--- a/service.css
+++ b/service.css
@@ -8,13 +8,33 @@
   max-width: 100% !important;
 }
 
+/* These hard limits cause trouble if Franz's width is low, and the app asks to switch to Mobile mode. */
+/* Anyway, when Franz is wide, the default values seem to make good use of screen space: 31% | 69% */
+/*
 .im_dialogs_col_wrap {
   width: 320px !important;
 }
-
 .im_history_col_wrap {
   width: calc(100% - 320px) !important;
 }
+*/
+
+/* This doesn't work either (it limits the left column when the width is low) */
+/*
+.im_dialogs_col_wrap {
+  max-width: 500px !important;
+}
+.im_history_col_wrap {
+  min-width: calc(100% - 500px) !important;
+}
+*/
+
+/* If you think the app looks silly when it gets too wide, we could limit the entire app (without breaking the mobile view) like this: */
+/*
+.im_page_wrap {
+  max-width: 1200px !important;
+}
+*/
 
 .im_message_wrap {
   max-width: inherit !important;

From 8fcd7faac7e660f68902583425c677a4b2778d7d Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Tue, 23 Jul 2019 13:03:37 +0800
Subject: [PATCH 07/13] Slap a flower in the background

---
 service.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/service.css b/service.css
index c028516..d7e94c0 100644
--- a/service.css
+++ b/service.css
@@ -150,6 +150,17 @@ div.im_message_body {
   background: linear-gradient(30deg, #79af7d, #d0e8b0);
 }
 
+/* Flower background */
+.im_history_wrap, .im_history_not_selected_wrap {
+  /* Labeled for reuse, according to Google.  Source: https://pixabay.com/photos/daisy-green-flower-nature-2410163/ */
+  /* background: url(https://cdn.pixabay.com/photo/2017/06/16/19/43/daisy-2410163_960_720.jpg), linear-gradient(20deg, #375c3acc, #e8e3b0e6); */
+  /* background: url(https://cdn.pixabay.com/photo/2017/06/16/19/43/daisy-2410163_960_720.jpg), linear-gradient(20deg, #53a2ac80, #f5eea3cc); */
+  background: url(https://cdn.pixabay.com/photo/2017/06/16/19/43/daisy-2410163_960_720.jpg), linear-gradient(20deg, #53a2ac80, #f0e3a8e6);
+  background-size: cover;
+  /* background-filter: blur(0px) contrast(50%) brightness(140%); */
+  background-blend-mode: screen;
+}
+
 .im_message_unread_split {
   background: none;
 }

From 692d8b29f24ca8d778df41493984e3269059dfb5 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Tue, 30 Jul 2019 12:20:55 +0800
Subject: [PATCH 08/13] Fix code blocks (pre > code)

---
 darkmode.css |  4 ++--
 service.css  | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/darkmode.css b/darkmode.css
index 24b6c32..48be8c9 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -187,9 +187,9 @@ div.im_message_body {
   background-color: #357bae !important;
 }
 
-code {
-  color: #b7d7f5 !important;
+pre, code {
   background-color: #0002 !important;
+  color: #b7d7f5 !important;
 }
 
 .im_bottom_panel_wrap {
diff --git a/service.css b/service.css
index d7e94c0..387fe48 100644
--- a/service.css
+++ b/service.css
@@ -221,10 +221,20 @@ a.btn-primary {
   background-color: #c9e0f4 !important;
 }
 
-code {
-  color: #4f9c70 !important;
+/* For code blocks (pre) and inline code (code) */
+pre, code {
+  /* border: 1px solid #bbb3 !important; */
+  border: none !important;
   background-color: #0001 !important;
   font-size: 100% !important;
+  color: #4f9c70 !important;
+}
+/* But Telegram puts <code> elements inside <pre> elements.  We don't want to repeat the styling for those deep <code> elements. */
+pre code {
+  border: initial !important;
+  background-color: initial !important;
+  font-size: inherit !important;
+  color: inherit !important;
 }
 
 /* Scrollbar and slider */

From 2100916043f480f8669c8b33a8ab032f93d67e66 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Wed, 31 Jul 2019 18:25:09 +0800
Subject: [PATCH 09/13] Give each chat bubble a little shadow

---
 service.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/service.css b/service.css
index 387fe48..45dff42 100644
--- a/service.css
+++ b/service.css
@@ -182,6 +182,9 @@ div.im_message_body {
   background-color: #fff !important;
   /* Although hardly visible, this border helps to separate bubbles from the background image, when colours are similar */
   /* border: 1px solid #0001; */
+  /* border-top: 1px solid #fff1; */
+  /* box-shadow: 0 1px 1px 1px #0002; */
+  box-shadow: 0 1px 5px #0002;
   /* Since we added a border, reduce the margin */
   padding: 4px 12px !important;
 }

From a011e5dfcc7eac2e94cea2d7205bfbf94314b4c3 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Thu, 5 Sep 2019 11:00:32 +0800
Subject: [PATCH 10/13] Improve selection colours

---
 darkmode.css | 12 ++++++------
 service.css  | 10 ++++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/darkmode.css b/darkmode.css
index 48be8c9..06eef35 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -174,15 +174,15 @@ div.im_message_body {
 }
 
 /* Selected message(s) */
-.im_message_selected .im_message_outer_wrap {
-  background: #f2f6fa22 !important;
-}
-
-.im_message_selected .im_message_outer_wrap:hover,
 .im_history_select_active .im_message_outer_wrap:hover {
+  background-color: #f2f6fa22 !important;
+}
+.im_message_selected .im_message_outer_wrap {
   background-color: #f2f6fa44 !important;
 }
-
+.im_message_selected .im_message_outer_wrap:hover {
+  background-color: #f2f6fa55 !important;
+}
 .im_message_selected .im_message_outer_wrap .im_message_body {
   background-color: #357bae !important;
 }
diff --git a/service.css b/service.css
index 45dff42..cf497e1 100644
--- a/service.css
+++ b/service.css
@@ -213,13 +213,15 @@ a.btn-primary {
 }
 
 /* Selected message(s) */
-.im_message_selected .im_message_outer_wrap {
-  background: #f2f6fa44 !important;
-}
-.im_message_selected .im_message_outer_wrap:hover,
 .im_history_select_active .im_message_outer_wrap:hover {
+  background-color: #f2f6fa44 !important;
+}
+.im_message_selected .im_message_outer_wrap {
   background-color: #f2f6fa88 !important;
 }
+.im_message_selected .im_message_outer_wrap:hover {
+  background-color: #f2f6faaa !important;
+}
 .im_message_selected .im_message_outer_wrap .im_message_body {
   background-color: #c9e0f4 !important;
 }

From 82306c9f48b9a294379e979b92ae7f4521621c54 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Thu, 5 Sep 2019 11:00:39 +0800
Subject: [PATCH 11/13] Fix Cancel button

---
 darkmode.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/darkmode.css b/darkmode.css
index 06eef35..f31d19f 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -196,6 +196,11 @@ pre, code {
   background-color: #182531 !important;
 }
 
+/* The Cancel button after selecting some messages */
+.btn-md:hover {
+  background: #203041 !important;
+}
+
 /* Sidebar */
 .im_dialogs_col_wrap {
   background: #182531 !important;

From 109ca56cdcf5834ef63334f0c63b156534c499d6 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Thu, 5 Sep 2019 11:00:59 +0800
Subject: [PATCH 12/13] Make scrollbar slider clearer, and improve positioning

---
 service.css | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/service.css b/service.css
index cf497e1..0b93d2b 100644
--- a/service.css
+++ b/service.css
@@ -248,14 +248,24 @@ pre code {
 .sessions_modal_col .nano>.nano-pane,
 .stickerset_modal_col .nano>.nano-pane,
 .im_dialogs_modal_col .nano>.nano-pane {
-  background: #aaa3 !important;
+  background: #7773 !important;
 }
 .im_history_col .nano>.nano-pane>.nano-slider,
 .contacts_modal_col .nano>.nano-pane>.nano-slider,
 .sessions_modal_col .nano>.nano-pane>.nano-slider,
 .stickerset_modal_col .nano>.nano-pane>.nano-slider,
 .im_dialogs_modal_col .nano>.nano-pane>.nano-slider {
-  background: #aaa5 !important;
+  background: #7778 !important;
+}
+.im_history_col .nano > .nano-pane {
+  /* Before this the scrollbar had a 10px gap at the top, and 0px at the bottom */
+  transform: translate(0, -5px);
+}
+.nano-pane {
+  border-radius: 100px !important;
+}
+.nano-slider {
+  border-radius: 100px !important;
 }
 
 /* Header */

From 68e303d779ad83355810b9bda8ba780f04dc52c1 Mon Sep 17 00:00:00 2001
From: Paul Joey Clark <joeytwiddle@gmail.com>
Date: Wed, 11 Sep 2019 16:14:27 +0800
Subject: [PATCH 13/13] Highlight "Draft" label in sidebar (red or blue)

---
 darkmode.css | 8 ++++++++
 service.css  | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/darkmode.css b/darkmode.css
index f31d19f..bf27d4c 100644
--- a/darkmode.css
+++ b/darkmode.css
@@ -207,6 +207,14 @@ pre, code {
   border-right: 0;
 }
 
+/* Sidebar: The "Draft" marker text */
+.im_dialog_draft_from {
+  color: #ff5d68 !important;
+}
+.active .im_dialog_draft_from {
+  color: #b2d0f2 !important;
+}
+
 /* Selected conversation highlight */
 .im_dialogs_scrollable_wrap .active a.im_dialog {
   background-color: #315c83 !important;
diff --git a/service.css b/service.css
index 0b93d2b..1effcd6 100644
--- a/service.css
+++ b/service.css
@@ -292,6 +292,14 @@ a.im_dialog .im_short_message_text {
   color: #bbbbbb;
 }
 
+/* Sidebar: The "Draft" marker text */
+.im_dialog_draft_from {
+  color: #e15541 !important;
+}
+.active .im_dialog_draft_from {
+  color: #cde5f8 !important;
+}
+
 /* Emphasised text */
 a.im_dialog .im_dialog_chat_from_wrap, a.im_dialog .im_short_message_media, a.im_dialog .im_short_message_service {
   color: #2894d7 !important;