From bbf562bc674e7327d6fcf014dcecd237493e5fe7 Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Tue, 10 Sep 2019 11:43:30 +0300
Subject: [PATCH] fix(admin-plugin): fix dark theme for admin panel #186 #168

---
 .../admin/assets/scss/admin-light.scss        | 62 ++++++++++++++
 .../admin/assets/scss/components/nav.scss     | 44 ----------
 .../admin/assets/scss/objects/container.scss  | 39 ---------
 .../assets/scss/objects/form-control.scss     | 83 +++++++++++++++++++
 4 files changed, 145 insertions(+), 83 deletions(-)

diff --git a/site/plugins/admin/assets/scss/admin-light.scss b/site/plugins/admin/assets/scss/admin-light.scss
index f3389654..062fd682 100644
--- a/site/plugins/admin/assets/scss/admin-light.scss
+++ b/site/plugins/admin/assets/scss/admin-light.scss
@@ -723,3 +723,65 @@ ul.messenger-theme-flat .messenger-message-slot.messenger-first.messenger-last .
     border-radius: .25rem;
     padding: 3px 8px 3px 3px;
 }
+
+.card-deck .card {
+    border-color: #ced4da;
+}
+
+.card-footer,
+.card-header {
+    background: #eaeaeb;
+    color: #424243;
+    border-color: #ced4da;
+}
+
+.bootstrap-tagsinput > input {
+    border: none;
+    background-color: white;
+    color: #424243;
+}
+
+.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
+    border-top: 7px solid #dbdbdc!important;
+}
+
+.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
+    border-top: 7px solid black!important;
+}
+
+.bootstrap-datetimepicker-widget table td span:hover {
+    background: #eaeaeb!important;
+}
+
+.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
+    bottom: -8px;
+}
+
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
+    background: #eaeaeb!important;
+    color: #424243!important;
+}
+
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+    background: #eaeaeb!important;
+    color: #424243!important;
+}
+
+.bootstrap-datetimepicker-widget .table tbody tr:hover td,
+.bootstrap-datetimepicker-widget .table tbody tr:hover th {
+    background-color: transparent;
+}
+
+.bootstrap-datetimepicker-widget table td span.active,
+.bootstrap-datetimepicker-widget table td.active,
+.bootstrap-datetimepicker-widget table td.active:hover {
+    background: #eaeaeb!important;
+    color: #424243!important;
+}
+
+.bootstrap-datetimepicker-widget table th {
+    border-color: #ced4da;
+}
diff --git a/site/plugins/admin/assets/scss/components/nav.scss b/site/plugins/admin/assets/scss/components/nav.scss
index cadc30c1..08019c83 100644
--- a/site/plugins/admin/assets/scss/components/nav.scss
+++ b/site/plugins/admin/assets/scss/components/nav.scss
@@ -234,50 +234,6 @@
     border: 1px solid black;
 }
 
-.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
-    border-top: 7px solid black!important;
-}
-
-.bootstrap-datetimepicker-widget table td span:hover {
-    background: #3b404b!important;
-}
-
-.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
-    bottom: -8px;
-}
-
-.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
-    background: #3b404b!important;
-    color: #b7b9bd!important;
-}
-
-.bootstrap-datetimepicker-widget table td.day:hover,
-.bootstrap-datetimepicker-widget table td.hour:hover,
-.bootstrap-datetimepicker-widget table td.minute:hover,
-.bootstrap-datetimepicker-widget table td.second:hover {
-    background: #3b404b!important;
-    color: #b7b9bd!important;
-}
-
-.bootstrap-datetimepicker-widget .table tbody tr:hover td,
-.bootstrap-datetimepicker-widget .table tbody tr:hover th {
-    background-color: transparent;
-}
-
-.bootstrap-datetimepicker-widget table td span.active,
-.bootstrap-datetimepicker-widget table td.active,
-.bootstrap-datetimepicker-widget table td.active:hover {
-    background: #3b404b!important;
-    color: #b7b9bd!important;
-}
-
-.bootstrap-datetimepicker-widget table th {
-    padding: 12.5px 20px;
-    vertical-align: middle;
-    border-color: #000;
-    font-size: 14px;
-}
-
 .dropdown-menu {
     background-color: #21252b;
 }
diff --git a/site/plugins/admin/assets/scss/objects/container.scss b/site/plugins/admin/assets/scss/objects/container.scss
index 478b6395..00042641 100644
--- a/site/plugins/admin/assets/scss/objects/container.scss
+++ b/site/plugins/admin/assets/scss/objects/container.scss
@@ -53,42 +53,3 @@
 .tempusdominus-bootstrap-4 .btn:hover > span {
     background: transparent!important;
 }
-
-.bootstrap-tagsinput {
-    background-color: #1b1d23;
-    border: 1px solid #000;
-    color: white;
-
-    border-radius: 4px;
-    font-size: .875rem;
-
-    padding: 8px 12px;
-    height: 40px;
-    box-shadow: none;
-}
-
-.bootstrap-tagsinput .tag [data-role="remove"]:after {
-    content: "x";
-    padding: 3px 5px;
-    margin-right: -9px;
-    margin-left: 4px;
-    color: #7b838f;
-    background: #3d424e;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-    cursor: pointer;
-}
-
-.bootstrap-tagsinput > input {
-    border: none;
-    background-color: #1b1d23;
-    color: white;
-}
-
-.bootstrap-tagsinput .tag {
-    color: #7b838f;
-    background-color: #3a3f4a;
-    border: 1px solid black;
-    border-radius: .25rem;
-    padding: 3px 8px 3px 3px;
-}
diff --git a/site/plugins/admin/assets/scss/objects/form-control.scss b/site/plugins/admin/assets/scss/objects/form-control.scss
index 7c982871..ad9eab31 100644
--- a/site/plugins/admin/assets/scss/objects/form-control.scss
+++ b/site/plugins/admin/assets/scss/objects/form-control.scss
@@ -402,3 +402,86 @@ $switch-transition: .2s all !default;
         margin-left: 1rem;
     }
 }
+
+.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
+    border-top: 7px solid black!important;
+}
+
+.bootstrap-datetimepicker-widget table td span:hover {
+    background: #3b404b!important;
+}
+
+.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
+    bottom: -8px;
+}
+
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
+    background: #3b404b!important;
+    color: #b7b9bd!important;
+}
+
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+    background: #3b404b!important;
+    color: #b7b9bd!important;
+}
+
+.bootstrap-datetimepicker-widget .table tbody tr:hover td,
+.bootstrap-datetimepicker-widget .table tbody tr:hover th {
+    background-color: transparent;
+}
+
+.bootstrap-datetimepicker-widget table td span.active,
+.bootstrap-datetimepicker-widget table td.active,
+.bootstrap-datetimepicker-widget table td.active:hover {
+    background: #3b404b!important;
+    color: #b7b9bd!important;
+}
+
+.bootstrap-datetimepicker-widget table th {
+    padding: 12.5px 20px;
+    vertical-align: middle;
+    border-color: #000;
+    font-size: 14px;
+}
+
+.bootstrap-tagsinput {
+    background-color: #1b1d23;
+    border: 1px solid #000;
+    color: white;
+
+    border-radius: 4px;
+    font-size: .875rem;
+
+    padding: 8px 12px;
+    height: 40px;
+    box-shadow: none;
+}
+
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+    content: "x";
+    padding: 3px 5px;
+    margin-right: -9px;
+    margin-left: 4px;
+    color: #7b838f;
+    background: #3d424e;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    cursor: pointer;
+}
+
+.bootstrap-tagsinput > input {
+    border: none;
+    background-color: #1b1d23;
+    color: white;
+}
+
+.bootstrap-tagsinput .tag {
+    color: #7b838f;
+    background-color: #3a3f4a;
+    border: 1px solid black;
+    border-radius: .25rem;
+    padding: 3px 8px 3px 3px;
+}