[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