[Rt-commit] rt branch, 5.0/dark-theme-initial-fixes, created. rt-5.0.0alpha1-7-gc74dd5b303
Blaine Motsinger
blaine at bestpractical.com
Wed Apr 29 17:06:08 EDT 2020
The branch, 5.0/dark-theme-initial-fixes has been created
at c74dd5b30353c64668d57b1b861c9fde287bf1e1 (commit)
- Log -----------------------------------------------------------------
commit e3a94f7aaa1598c106216ff467832844f17fd886
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 13:53:17 2020 -0500
Update background and borders for elevator-dark
This commit sets a lighter background for the whole of the dark
theme as well as change background colors and borders for many of
the elements within.
Because we're initially setting colors using a "blanket" selector
for dark theme (.darkmode, .darkmode *), we have to manually
specify and fix each individual element accordingly. This means for
now using * within more sections to ensure child elements don't get
the color definition using the "blanket" selector.
Ideally, we should remove the use of the blanket definitions and
convert both elevator light and dark to use more selectors with
higher specificity. We can then get away from using "important" so
frequently to override definitions for each theme.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 77075cd541..222f7c85cf 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -1,13 +1,14 @@
@import "../elevator-light/main.css";
.darkmode, .darkmode * {
- background: #171A1F !important;
- color: #FFF !important;
+ background: #2C3539 !important;
+ color: #ededed !important;
}
-.darkmode input, .darkmode select {
- background: #25292F !important;
- border-color: #3A3C43 !important;
+.darkmode input, .darkmode select,
+.darkmode .btn-light {
+ background: #323D42 !important;
+ border-color: #717171 !important;
}
.darkmode input::-webkit-input-placeholder {
@@ -37,7 +38,7 @@
.darkmode .card {
background: #25292F;
- border-color: #3A3C43;
+ border-color: #515151;
}
.darkmode label {
@@ -88,16 +89,25 @@
}
.darkmode .dropdown-menu {
- background: #171A1F;
- border-color: #3A3C43;
+ background: #323D42 !important;
+ border-color: #717171 !important;
+}
+
+.darkmode .dropdown-item *, .darkmode .dropdown-item *,
+.darkmode .dropdown-item,
+.darkmode a.dropdown-item {
+ background: #323D42 !important;
}
.darkmode .dropdown-divider {
border-color: #3A3C43;
}
-.darkmode .dropdown-item:focus, .darkmode .dropdown-item:hover {
- background: #25292F;
+.darkmode .dropdown-item:focus *, .darkmode .dropdown-item:hover *,
+.darkmode .dropdown-item:focus, .darkmode .dropdown-item:hover,
+.darkmode #page-menu.sf-menu a:focus, .darkmode #page-menu.sf-menu a:hover,
+.darkmode #main-navigation .sf-menu li ul a:focus, .darkmode #main-navigation .sf-menu li ul a:hover {
+ background: #3A474D !important;
}
.darkmode .nav-tabs {
@@ -121,6 +131,14 @@
color: #FFF;
}
+.darkmode table.table th {
+ border: none;
+}
+
+.darkmode .table th, .darkmode .table td {
+ border-top: 1px solid #6d6f71;
+}
+
.darkmode .btn:hover {
color: #000;
}
@@ -176,19 +194,58 @@
background-color: #114 !important;
}
-/* row colouring */
-.oddline {
- background: rgba(255, 255, 255, 0.1) !important;
+.darkmode tr.oddline *,
+.darkmode tr.oddline .collection-as-table,
+.darkmode .oddline .collection-as-table,
+.darkmode .oddline .collection-as-table * {
+ background: #323D42 !important;
}
-.darkmode tr.oddline {
- background: rgba(255, 255, 255, 0.1) !important;
+.darkmode tr.oddline td a {
+ background: rgba(255, 255, 255, 0) !important;
}
-.darkmode .oddline .collection-as-table {
- background: rgba(255, 255, 255, 0.1) !important;
+.darkmode svg.icon-bordered {
+ border: solid 0.05em #717171;
}
-.darkmode tr.oddline td a {
- background: rgba(255, 255, 255, 0) !important;
+.darkmode .history .transaction {
+ border-top: 1px solid #515151;
+}
+
+.darkmode div.history-container {
+ border-left: 1px solid #515151;
+ border-right: 1px solid #515151;
+ border-bottom: 1px solid #515151;
+}
+
+.darkmode .history .transaction div.metadata span.actions {
+ border: 1px solid #717171;
+}
+
+.darkmode div#footer {
+ border-top: 1px solid #515151;
+}
+
+.darkmode .form-control,
+.darkmode .selectize-input {
+ background: #323D42 !important;
+ border-color: #717171;
+}
+
+.darkmode .form-control .filter-option-inner-inner,
+.darkmode .form-control option {
+ background: #323D42 !important;
+}
+
+.darkmode div.results .titlebox, .darkmode div.error-titlebox,
+.darkmode div.results .titlebox .titlebox-content,
+.darkmode div.results .titlebox .card-body,
+.darkmode div.results .titlebox .card-body > *,
+.darkmode div.results .titlebox .card-body > * > * {
+ background: #3C494F !important;
+}
+
+.darkmode .history .transaction .messagebody {
+ border-color: #515151;
}
commit c6a041ed6fef045befe1b9230fa7aa1fe7fcc0e9
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 14:21:08 2020 -0500
Fix overlapped bottom border on titlebox cog
The bottom border of the titlebox cog in elevator-dark was being
overlapped by the following card-body.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 222f7c85cf..e7b5d3e080 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -205,6 +205,10 @@
background: rgba(255, 255, 255, 0) !important;
}
+.darkmode .titlebox .titlebox-title .right {
+ padding-top: 0.4em;
+}
+
.darkmode svg.icon-bordered {
border: solid 0.05em #717171;
}
commit 0d4cbcc110edee9fdc232b05aff6dd6b3ec1f657
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 14:27:24 2020 -0500
Fix downloadattachment overlapping border
The downloadattachment div in elevator-dark was overlapping the
top border of messagebody.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index e7b5d3e080..4c9af24f2d 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -209,6 +209,11 @@
padding-top: 0.4em;
}
+.darkmode .transaction table + div.downloadattachment {
+ position: relative;
+ top: 0.6em;
+}
+
.darkmode svg.icon-bordered {
border: solid 0.05em #717171;
}
commit 8696ad57faa3901ca331f29f4c8ff21977a35855
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 15:17:24 2020 -0500
Fix borders for menus
This commit updates the page-navigation, superfish menu items, and
quickbar in elevator-dark by removing dropshadow and adding borders
to stand out better against the other dark elements.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 4c9af24f2d..5e4b06d024 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -110,6 +110,35 @@
background: #3A474D !important;
}
+.darkmode #page-navigation #page-menu {
+ border: 1px solid #515151;
+ border-radius: 3px;
+}
+
+.darkmode #page-menu.sf-menu > li {
+ border-color: #515151;
+ border-right: none;
+}
+
+.darkmode #page-menu.sf-menu > li:first-of-type {
+ border-left: none;
+}
+
+.darkmode .sf-menu.sf-shadow ul {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border: 1px solid #515151;
+}
+
+.darkmode div#quickbar {
+ height: 2.7rem;
+ box-shadow: none;
+ border-bottom: 1px solid #515151;
+}
+
.darkmode .nav-tabs {
background: #171A1F;
border-color: #3A3C43;
commit 2b864e55c752e25f1ed26cc4de59515ca882fa1e
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 15:40:47 2020 -0500
Fix ticket history transaction link colors
This is a copy of the colors from elevator-light. While not ideal
to replicate the definitions here, we need to specifically override
the cascading background color definition at the top of the
elevator-dark css page. Once we remove the cascading definition,
these transaction link colors would be much better to inherit from
elevator-light.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 5e4b06d024..9714ed7205 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -287,3 +287,18 @@
.darkmode .history .transaction .messagebody {
border-color: #515151;
}
+
+/* Ticket history transaction link colors.
+ This is a copy of the colors from elevator-light. While not ideal to replicate the definitions here,
+ we need to specifically override the cascading background color definition at the top of this css page. */
+.darkmode .transaction.basics .type, .darkmode .transaction.basics .type * { background: #D32F2F !important; }
+.darkmode .transaction.cfs .type, .darkmode .transaction.cfs .type * { background: #D32F2F !important; }
+.darkmode .transaction.people .type, .darkmode .transaction.people .type * { background: #0288D1 !important; }
+.darkmode .transaction.links .type, .darkmode .transaction.links .type * { background: #388E3C !important; }
+.darkmode .transaction.dates .type, .darkmode .transaction.dates .type * { background: #7B1FA2 !important; }
+.darkmode .transaction.message .type, .darkmode .transaction.message .type * { background: #1976D2 !important; }
+.darkmode .transaction.reminders .type, .darkmode .transaction.reminders .type * { background: #0277BD !important; }
+.darkmode .transaction.other .type, .darkmode .transaction.other .type * { background: #B0BEC5 !important; }
+.darkmode .transaction.error .type, .darkmode .transaction.error .type * { background: #900 !important; }
+.darkmode .transaction.attachment-truncate .type, .transaction.attachment-drop .type,
+.darkmode .transaction.attachment-truncate .type *, .transaction.attachment-drop .type * { background-color: #FF5722 !important; }
commit 8c44311df73e8e68341b29f5f37089919623ba0d
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 15:46:28 2020 -0500
Fix text color for reply/comment box
The reply/comment text color on elevator-dark was inheriting a
light color, which was not readable against the red/yellow color.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 9714ed7205..7e721f7b80 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -302,3 +302,8 @@
.darkmode .transaction.error .type, .darkmode .transaction.error .type * { background: #900 !important; }
.darkmode .transaction.attachment-truncate .type, .transaction.attachment-drop .type,
.darkmode .transaction.attachment-truncate .type *, .transaction.attachment-drop .type * { background-color: #FF5722 !important; }
+
+.darkmode .messagebox-container.action-private textarea,
+.darkmode .messagebox-container.action-response textarea {
+ color: #484e53 !important;
+}
commit c74dd5b30353c64668d57b1b861c9fde287bf1e1
Author: Blaine Motsinger <blaine at bestpractical.com>
Date: Wed Apr 29 16:01:09 2020 -0500
Fix card-header overlap on query builder
The titlebox-title card-header title for the "Current Search" card
on Search/Build.html on elevator-dark was overlapping the following
card-body.
diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 7e721f7b80..c5f289c5fb 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -307,3 +307,7 @@
.darkmode .messagebox-container.action-response textarea {
color: #484e53 !important;
}
+
+.darkmode .titlebox .card-header {
+ padding-bottom: inherit;
+}
-----------------------------------------------------------------------
More information about the rt-commit
mailing list