From 5ac5101ced887f22f966a00689efd801f6d44144 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Tue, 8 Jan 2019 20:07:38 +0100
Subject: [PATCH 1/5] Start to work on dark theme

---
 assets/css/dark_theme.css | 117 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 assets/css/dark_theme.css

diff --git a/assets/css/dark_theme.css b/assets/css/dark_theme.css
new file mode 100644
index 00000000..639c67ea
--- /dev/null
+++ b/assets/css/dark_theme.css
@@ -0,0 +1,117 @@
+:root {
+    --black: #1119;
+    --black2: #111111;
+    --black3: #000;
+    --black4: #686a6c;
+    --black5: #232426;
+    --black6: #0f0f0f;
+    --white: silver;
+}
+
+.navbar {
+    background-color: var(--black) !important;;
+}
+
+#homeLandingScreen {
+    background-image: none !important;
+    background-color: var(--black5);
+}
+
+#homeLandingScreen #homeMessage {
+    background-color: var(--black);
+}
+
+.btn {
+    color: var(--white);
+}
+
+.btn-primary, .btn-success, .btn-default {
+    background-color: transparent;
+}
+
+p, h1, h2, h3, h4, h5 {
+    color: var(--white);
+}
+
+.form-control {
+    background-color: var(--black);
+    color: var(--white);
+    border-color: var(--black5);
+}
+
+.form-control:focus {
+    background-color:  var(--black5);
+}
+
+.login-page, .register-page {
+    background-color: var(--black2);
+}
+
+.login-box-body {
+    background-color: var(--black3);
+}
+
+.login-logo b, #loginForm label {
+    color: var(--white) !important;
+}
+
+.content-wrapper {
+    background-color: var(--black3);
+}
+
+.create-account-form label {
+    color: var(--white);
+}
+
+.main-footer {
+    background-color: var(--black3);
+}
+
+.main-footer span {
+    color: var(--white);
+}
+
+.box {
+    background-color: var(--black5);
+    color: var(--white);
+}
+
+.form-group label {
+    color: var(--white);
+}
+
+.modal-primary .modal-header, 
+.modal-primary .modal-footer {
+    background-color: var(--black5) !important;;
+}
+
+.modal-primary .modal-body {
+    background-color: var(--black6) !important;
+}
+
+.attachment-block {
+    background-color: var(--black6);
+}
+
+.post-comments {
+    background-color: var(--black);
+}
+
+.post {
+    color: var(--white);
+}
+
+.box-comments .username, 
+.box-comments .comment-content {
+    color: var(--white);
+}
+
+.link-black {
+    color: var(--white);
+}
+
+
+.comment-creation-form .comment-image-select a, 
+.comment-creation-form .comment-emoji-select a {
+    color: var(--white);
+}

From 5dc64492cb982aee124aff7a682446534e601fc9 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Tue, 8 Jan 2019 20:28:41 +0100
Subject: [PATCH 2/5] Reorganized dark theme file

---
 assets/css/dark_theme.css | 176 +++++++++++++++++++++++++++++---------
 1 file changed, 137 insertions(+), 39 deletions(-)

diff --git a/assets/css/dark_theme.css b/assets/css/dark_theme.css
index 639c67ea..51a9b6db 100644
--- a/assets/css/dark_theme.css
+++ b/assets/css/dark_theme.css
@@ -1,3 +1,6 @@
+/**
+ * General definitions
+ */
 :root {
     --black: #1119;
     --black2: #111111;
@@ -8,31 +11,42 @@
     --white: silver;
 }
 
-.navbar {
-    background-color: var(--black) !important;;
+p, h1, h2, h3, h4, h5, h6 {
+    color: var(--white);
 }
 
-#homeLandingScreen {
-    background-image: none !important;
-    background-color: var(--black5);
+.content-wrapper {
+    background-color: var(--black3);
 }
 
-#homeLandingScreen #homeMessage {
-    background-color: var(--black);
+.link-black {
+    color: var(--white);
 }
 
+
+
+/**
+ * Buttons
+ */
 .btn {
     color: var(--white);
 }
 
-.btn-primary, .btn-success, .btn-default {
+.btn-primary, 
+.btn-success, 
+.btn-default,
+.btn-danger {
     background-color: transparent;
 }
 
-p, h1, h2, h3, h4, h5 {
-    color: var(--white);
+.btn-default:active, .btn-default:focus {
+    background-color: var(--white);
 }
 
+
+/**
+ * Forms
+ */
 .form-control {
     background-color: var(--black);
     color: var(--white);
@@ -43,6 +57,103 @@ p, h1, h2, h3, h4, h5 {
     background-color:  var(--black5);
 }
 
+.form-group label {
+    color: var(--white);
+}
+
+
+
+/**
+ * Navbar
+ */
+.navbar {
+    background-color: var(--black) !important;;
+}
+
+
+
+/**
+ * Footer
+ */
+.main-footer {
+    background-color: var(--black3);
+}
+
+.main-footer span {
+    color: var(--white);
+}
+
+/**
+ * Boxes
+ */
+ .box {
+    background-color: var(--black5);
+    color: var(--white);
+}
+
+
+/**
+ * Modals
+ */
+.modal-header,
+.modal-footer {
+    background-color: var(--black5);
+}
+
+.modal-body {
+    background-color: var(--black6);
+}
+
+.modal-primary .modal-header, 
+.modal-primary .modal-footer {
+    background-color: var(--black5) !important;;
+}
+
+.modal-primary .modal-body {
+    background-color: var(--black6) !important;
+}
+
+.modal-danger .modal-header, 
+.modal-danger .modal-footer {
+    background-color: #a22819 !important;
+}
+
+.modal-danger .modal-body {
+    background-color: #872f24 !important;
+}
+
+/**
+ * Dropdown menus
+ */
+.dropdown-menu {
+    background-color: var(--black5);
+}
+
+.dropdown-menu > li > a {
+    color: var(--white) !important;
+}
+
+.dropdown-menu > li > a:hover {
+    background-color: var(--black3);
+}
+
+
+/**
+ * Home page
+ */
+#homeLandingScreen {
+    background-image: none !important;
+    background-color: var(--black5);
+}
+
+#homeLandingScreen #homeMessage {
+    background-color: var(--black);
+}
+
+
+/**
+ * Login page
+ */
 .login-page, .register-page {
     background-color: var(--black2);
 }
@@ -55,46 +166,28 @@ p, h1, h2, h3, h4, h5 {
     color: var(--white) !important;
 }
 
-.content-wrapper {
-    background-color: var(--black3);
-}
 
+/**
+ * Create account page
+ */
 .create-account-form label {
     color: var(--white);
 }
 
-.main-footer {
-    background-color: var(--black3);
-}
 
-.main-footer span {
-    color: var(--white);
-}
 
-.box {
-    background-color: var(--black5);
-    color: var(--white);
-}
 
-.form-group label {
-    color: var(--white);
-}
-
-.modal-primary .modal-header, 
-.modal-primary .modal-footer {
-    background-color: var(--black5) !important;;
-}
-
-.modal-primary .modal-body {
-    background-color: var(--black6) !important;
-}
 
+/**
+ * Posts
+ */
 .attachment-block {
     background-color: var(--black6);
 }
 
 .post-comments {
     background-color: var(--black);
+    border-radius: 2px;
 }
 
 .post {
@@ -106,12 +199,17 @@ p, h1, h2, h3, h4, h5 {
     color: var(--white);
 }
 
-.link-black {
-    color: var(--white);
-}
-
 
 .comment-creation-form .comment-image-select a, 
 .comment-creation-form .comment-emoji-select a {
     color: var(--white);
 }
+
+
+/**
+ * Posts edit modal
+ */
+.editor {
+    background-color: var(--black5);
+    color: var(--white);
+}
\ No newline at end of file

From 379826f16bd7d0c52b3e398c90ef9226a5447f4c Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Tue, 8 Jan 2019 20:55:40 +0100
Subject: [PATCH 3/5] Work progress on dark theme

---
 assets/css/dark_theme.css | 182 +++++++++++++++++++++++++++++---------
 1 file changed, 139 insertions(+), 43 deletions(-)

diff --git a/assets/css/dark_theme.css b/assets/css/dark_theme.css
index 51a9b6db..656b860f 100644
--- a/assets/css/dark_theme.css
+++ b/assets/css/dark_theme.css
@@ -1,6 +1,6 @@
 /**
- * General definitions
- */
+* General definitions
+*/
 :root {
     --black: #1119;
     --black2: #111111;
@@ -23,11 +23,14 @@ p, h1, h2, h3, h4, h5, h6 {
     color: var(--white);
 }
 
+.table-hover > tbody > tr:hover {
+    background-color: var(--black3);
+}
 
 
 /**
- * Buttons
- */
+* Buttons
+*/
 .btn {
     color: var(--white);
 }
@@ -45,8 +48,8 @@ p, h1, h2, h3, h4, h5, h6 {
 
 
 /**
- * Forms
- */
+* Forms
+*/
 .form-control {
     background-color: var(--black);
     color: var(--white);
@@ -64,37 +67,17 @@ p, h1, h2, h3, h4, h5, h6 {
 
 
 /**
- * Navbar
- */
-.navbar {
-    background-color: var(--black) !important;;
-}
-
-
-
-/**
- * Footer
- */
-.main-footer {
-    background-color: var(--black3);
-}
-
-.main-footer span {
-    color: var(--white);
-}
-
-/**
- * Boxes
- */
- .box {
+* Boxes
+*/
+.box {
     background-color: var(--black5);
     color: var(--white);
 }
 
 
 /**
- * Modals
- */
+* Modals
+*/
 .modal-header,
 .modal-footer {
     background-color: var(--black5);
@@ -123,8 +106,8 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 /**
- * Dropdown menus
- */
+* Dropdown menus
+*/
 .dropdown-menu {
     background-color: var(--black5);
 }
@@ -137,10 +120,94 @@ p, h1, h2, h3, h4, h5, h6 {
     background-color: var(--black3);
 }
 
+.dropdown {
+    color: var(--white);
+}
+
+
 
 /**
- * Home page
- */
+* Navbar
+*/
+.navbar {
+    background-color: var(--black) !important;;
+}
+
+.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
+.navbar-nav > .messages-menu > .dropdown-menu > li.header,
+.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
+    background-color: var(--black6);
+    color: var(--white);
+}
+
+.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
+.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
+.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
+    background-color: var(--black6);
+    color: var(--white) !important;
+}
+
+.main-header #navbar-search-input.form-control:focus,
+.main-header #navbar-search-input.form-control:active {
+    background-color: var(--black3);
+}
+
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
+    color: var(--white);
+}
+
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover,
+.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
+    background-color: var(--black6);
+}
+
+
+/**
+* Footer
+*/
+.main-footer {
+    background-color: var(--black3);
+}
+
+.main-footer span {
+    color: var(--white);
+}
+
+
+/**
+* Friends list
+*/
+@media screen and (min-width: 1200px) {
+    
+	#friendsList {
+        background-color: var(--black6);
+    }
+    
+    #friendsList:hover {
+        background-color: var(--black5);
+    }
+}
+
+#friendsList h4 {
+    color: var(--white);
+}
+
+#friendsList li:hover {
+    background-color: var(--black4);
+}
+
+
+/**
+* Conversations
+*/
+.open-conversation-button {
+    background-color: var(--black5);
+}
+
+/**
+* Home page
+*/
 #homeLandingScreen {
     background-image: none !important;
     background-color: var(--black5);
@@ -152,8 +219,8 @@ p, h1, h2, h3, h4, h5, h6 {
 
 
 /**
- * Login page
- */
+* Login page
+*/
 .login-page, .register-page {
     background-color: var(--black2);
 }
@@ -168,19 +235,26 @@ p, h1, h2, h3, h4, h5, h6 {
 
 
 /**
- * Create account page
- */
+* Create account page
+*/
 .create-account-form label {
     color: var(--white);
 }
 
 
 
+/**
+* User information
+*/
+.list-group-item {
+    background-color: transparent;
+}
+
 
 
 /**
- * Posts
- */
+* Posts
+*/
 .attachment-block {
     background-color: var(--black6);
 }
@@ -194,6 +268,15 @@ p, h1, h2, h3, h4, h5, h6 {
     color: var(--white);
 }
 
+.post-image {
+    filter: brightness(50%);
+    transition: filter 1s;
+}
+
+.post-image:hover {
+    filter: brightness(100%);
+}
+
 .box-comments .username, 
 .box-comments .comment-content {
     color: var(--white);
@@ -207,8 +290,21 @@ p, h1, h2, h3, h4, h5, h6 {
 
 
 /**
- * Posts edit modal
- */
+* Posts creation form
+*/
+.datepicker.dropdown-menu {
+    background-color: var(--black6);
+    color: var(--white);
+}
+
+.select2-container--default .select2-selection--multiple {
+    background-color: transparent;
+}
+
+
+/**
+* Posts edit modal
+*/
 .editor {
     background-color: var(--black5);
     color: var(--white);

From da047a976a060968ff91e7785559d859c73966f5 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Wed, 9 Jan 2019 09:49:02 +0100
Subject: [PATCH 4/5] Improved dark theme

---
 assets/css/dark_theme.css | 55 +++++++++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/assets/css/dark_theme.css b/assets/css/dark_theme.css
index 656b860f..461951dc 100644
--- a/assets/css/dark_theme.css
+++ b/assets/css/dark_theme.css
@@ -1,3 +1,9 @@
+/**
+ * ComunicWeb dark theme
+ *
+ * @author Pierre HUBERT
+ */
+
 /**
 * General definitions
 */
@@ -38,7 +44,8 @@ p, h1, h2, h3, h4, h5, h6 {
 .btn-primary, 
 .btn-success, 
 .btn-default,
-.btn-danger {
+.btn-danger,
+.btn-info {
     background-color: transparent;
 }
 
@@ -58,6 +65,7 @@ p, h1, h2, h3, h4, h5, h6 {
 
 .form-control:focus {
     background-color:  var(--black5);
+    border-color: var(--black4);
 }
 
 .form-group label {
@@ -109,7 +117,7 @@ p, h1, h2, h3, h4, h5, h6 {
 * Dropdown menus
 */
 .dropdown-menu {
-    background-color: var(--black5);
+    background-color: var(--black5) !important;
 }
 
 .dropdown-menu > li > a {
@@ -117,7 +125,7 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 .dropdown-menu > li > a:hover {
-    background-color: var(--black3);
+    background-color: var(--black3) !important;
 }
 
 .dropdown {
@@ -130,7 +138,7 @@ p, h1, h2, h3, h4, h5, h6 {
 * Navbar
 */
 .navbar {
-    background-color: var(--black) !important;;
+    background-color: var(--black6) !important;;
 }
 
 .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
@@ -143,7 +151,7 @@ p, h1, h2, h3, h4, h5, h6 {
 .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
 .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
-    background-color: var(--black6);
+    background-color: var(--black6) !important;
     color: var(--white) !important;
 }
 
@@ -162,6 +170,20 @@ p, h1, h2, h3, h4, h5, h6 {
     background-color: var(--black6);
 }
 
+.skin-blue .main-header .navbar .dropdown-user-menu-action .dropdown-menu li a {
+    color: var(--white) !important;;
+}
+
+.skin-blue .main-header .navbar .nav > li > a:hover,
+.skin-blue .main-header .navbar .nav > li > a:active,
+.skin-blue .main-header .navbar .nav > li > a:focus,
+.skin-blue .main-header .navbar .nav .open > a,
+.skin-blue .main-header .navbar .nav .open > a:hover,
+.skin-blue .main-header .navbar .nav .open > a:focus,
+.skin-blue .main-header .navbar .nav > .active > a {
+    background-color: var(--black4);
+}
+
 
 /**
 * Footer
@@ -189,6 +211,12 @@ p, h1, h2, h3, h4, h5, h6 {
     }
 }
 
+@media screen and (max-width: 1200px) and (min-width: 513px)  {
+	#friendsList {
+        background-color: var(--black5);
+    }
+}
+
 #friendsList h4 {
     color: var(--white);
 }
@@ -292,6 +320,15 @@ p, h1, h2, h3, h4, h5, h6 {
 /**
 * Posts creation form
 */
+
+.post-form-choice span {
+    color: var(--black4);
+}
+
+.post-form .post-form-choice input:checked ~ span {
+    color: var(--white);
+}
+
 .datepicker.dropdown-menu {
     background-color: var(--black6);
     color: var(--white);
@@ -301,6 +338,14 @@ p, h1, h2, h3, h4, h5, h6 {
     background-color: transparent;
 }
 
+.post-form .post-visiblity-container span {
+    color: var(--black4);
+}
+
+.post-form .post-visiblity-container input:checked ~ span {
+    color: var(--white);
+}
+
 
 /**
 * Posts edit modal

From a7337fa918f9c8a5eb0de29c37b73fc9da2a1360 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Wed, 9 Jan 2019 11:40:00 +0100
Subject: [PATCH 5/5] Work progress on dark theme

---
 assets/css/dark_theme.css | 129 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 128 insertions(+), 1 deletion(-)

diff --git a/assets/css/dark_theme.css b/assets/css/dark_theme.css
index 461951dc..724851f6 100644
--- a/assets/css/dark_theme.css
+++ b/assets/css/dark_theme.css
@@ -72,6 +72,12 @@ p, h1, h2, h3, h4, h5, h6 {
     color: var(--white);
 }
 
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+    background-color: var(--black6);
+}
+
 
 
 /**
@@ -82,6 +88,10 @@ p, h1, h2, h3, h4, h5, h6 {
     color: var(--white);
 }
 
+.box-footer {
+    background-color: var(--black5);
+}
+
 
 /**
 * Modals
@@ -225,6 +235,41 @@ p, h1, h2, h3, h4, h5, h6 {
     background-color: var(--black4);
 }
 
+/**
+ * Emoji picker
+ */
+.wdt-emoji-popup {
+    background-color: var(--black6);
+    border: 1px var(--black6) solid;
+    border-radius: 2;
+}
+
+#wdt-emoji-menu-header {
+    background-color: var(--black5);
+}
+
+#wdt-emoji-footer {
+    background-color: var(--black5);
+}
+
+.wdt-emoji-popup h3 {
+    background-color: var(--black4);
+    color: var(--white);
+}
+
+#wdt-emoji-search {
+    background-color: var(--black5);
+    color: var(--white);
+}
+
+#wdt-emoji-search:focus {
+    background-color: var(--black4);
+    color: var(--white);
+}
+
+.wdt-emoji:hover {
+    background-color: var(--black4) !important;;
+}
 
 /**
 * Conversations
@@ -233,6 +278,35 @@ p, h1, h2, h3, h4, h5, h6 {
     background-color: var(--black5);
 }
 
+.nav-stacked > li > a {
+    color: var(--white);
+}
+
+.conversations-list-box .last-activity {
+    color: var(--white);
+}
+
+.nav > li > a:hover,
+.nav > li > a:active,
+.nav > li > a:focus {
+    color: var(--black5);
+}
+
+.select2-dropdown {
+    background-color: var(--black5);
+    color: var(--white);
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--black4);
+    color: var(--white);
+}
+
+#conversationsElem .create-message-form .btn.btn-add-emoji:hover,
+#conversationsElem .create-message-form .btn.btn-add-image:hover {
+    color: var(--white);
+}
+
 /**
 * Home page
 */
@@ -297,7 +371,7 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 .post-image {
-    filter: brightness(50%);
+    filter: brightness(80%);
     transition: filter 1s;
 }
 
@@ -353,4 +427,57 @@ p, h1, h2, h3, h4, h5, h6 {
 .editor {
     background-color: var(--black5);
     color: var(--white);
+}
+
+
+/**
+ * Search page
+ */
+.nav > li > a:hover,
+.nav > li > a:active,
+.nav > li > a:focus {
+    background-color: var(--black4);
+}
+
+/**
+ * Conversation page
+ */
+.conversations-page-container a {
+    background-color: var(--black6) !important;;
+}
+
+.conversations-page-container a {
+    color: var(--white) !important;
+}
+
+.conversations-page-container a:hover {
+    background-color: var(--black5) !important;;
+}
+
+.conversations-page-container a:active {
+    background-color: var(--black6) !important;;
+}
+
+.conversations-page-container a.selected {
+    background-color: var(--black5) !important;;
+}
+
+.conversations-page-container .box-conversation .input-group-btn .btn {
+    background-color: var(--black5);
+}
+
+.conversations-page-container .box-conversation .input-group-btn .btn:hover {
+    background-color: var(--black4);
+    color: var(--black6);
+}
+
+.conversations-page-container .box-conversation .input-group-btn .btn:focus,
+.conversations-page-container .box-conversation .input-group-btn .btn:active {
+    color: var(--white);
+}
+
+.big-box-conversation .direct-chat-text .a,
+.big-box-conversation .direct-chat-text a {
+    background-color: transparent !important;
+    color: inherit !important;
 }
\ No newline at end of file