[Rt-commit] rt branch, 5.0/dark-theme-initial-fixes, repushed
Blaine Motsinger
blaine at bestpractical.com
Wed Apr 29 17:06:10 EDT 2020
The branch 5.0/dark-theme-initial-fixes was deleted and repushed:
was 2a2143d556429ecbee5b5c11f2a4c953e53daf34
now c74dd5b30353c64668d57b1b861c9fde287bf1e1
1: 2a2143d556 ! 1: e3a94f7aaa Update background and borders for elevator-dark
@@ -1,10 +1,21 @@
Author: Blaine Motsinger <blaine at bestpractical.com>
- Initial fixes for elevator-dark
+ Update background and borders for elevator-dark
- This commit is a phase one starting point for dark theme fixes.
- The changes to the css are really hacky and quickly put together.
- Needs to be cleaned up, as well as another list of fixes pending.
+ 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
--- a/share/static/css/elevator-dark/main.css
@@ -15,7 +26,6 @@
.darkmode, .darkmode * {
- background: #171A1F !important;
- color: #FFF !important;
-+ /*background: #171A1F !important;*/
+ background: #2C3539 !important;
+ color: #ededed !important;
}
@@ -24,7 +34,7 @@
- background: #25292F !important;
- border-color: #3A3C43 !important;
+.darkmode input, .darkmode select,
-+.btn-light {
++.darkmode .btn-light {
+ background: #323D42 !important;
+ border-color: #717171 !important;
}
@@ -39,18 +49,6 @@
}
.darkmode label {
-@@
- color: #FFF;
- }
-
--.darkmode svg {
-+/*.darkmode svg {
- fill: #FFF;
--}
-+}*/
-
- .darkmode .radio-option, .darkmode .check-option {
- color: #FFF;
@@
}
@@ -77,43 +75,53 @@
+.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: #272F33 !important;*/
+ background: #3A474D !important;
}
.darkmode .nav-tabs {
@@
+ color: #FFF;
}
- /* row colouring */
++.darkmode table.table th {
++ border: none;
++}
++
++.darkmode .table th, .darkmode .table td {
++ border-top: 1px solid #6d6f71;
++}
++
+ .darkmode .btn:hover {
+ color: #000;
+ }
+@@
+ background-color: #114 !important;
+ }
+
+-/* row colouring */
-.oddline {
-- background: rgba(255, 255, 255, 0.1) !important;
--}
--
--.darkmode tr.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: rgba(255, 255, 255, 0.02) !important;*/
+ 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;
-+.table th, .table td {
-+ border-top: 1px solid #6d6f71;
++.darkmode svg.icon-bordered {
++ border: solid 0.05em #717171;
}
- .darkmode tr.oddline td a {
- background: rgba(255, 255, 255, 0) !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;
+}
@@ -153,64 +161,5 @@
+
+.darkmode .history .transaction .messagebody {
+ border-color: #515151;
-+}
-+
-+.darkmode .titlebox .titlebox-title .right {
-+ padding-top: 0.4em;
-+}
-+
-+.darkmode .transaction table + div.downloadattachment {
-+ position: relative;
-+ top: 0.6em;
-+}
-+
-+.darkmode #page-navigation #page-menu {
-+ background: #323D42;
-+ 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 .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; }
-+
-+.darkmode .messagebox-container.action-private textarea,
-+.darkmode .messagebox-container.action-response textarea {
-+ color: #484e53 !important;
-+}
-+
-+.darkmode div#quickbar {
-+ height: 2.7rem;
-+ box-shadow: none;
-+ border-bottom: 1px solid #515151;
-+}
-+
-+.darkmode .titlebox .card-header {
-+ padding-bottom: inherit;
-+}
+ }
+
-: ------- > 2: c6a041ed6f Fix overlapped bottom border on titlebox cog
-: ------- > 3: 0d4cbcc110 Fix downloadattachment overlapping border
-: ------- > 4: 8696ad57fa Fix borders for menus
-: ------- > 5: 2b864e55c7 Fix ticket history transaction link colors
-: ------- > 6: 8c44311df7 Fix text color for reply/comment box
-: ------- > 7: c74dd5b303 Fix card-header overlap on query builder
More information about the rt-commit
mailing list