Elastic dark mode

Reviewers: #roundcube_kolab_plugins_developers

Subscribers: #roundcube_kolab_plugins_developers

Differential Revision: https://git.kolab.org/D2179

less-build.sh

@@ -3,7 +3,4 @@
 # First you have to link/copy /skins directory from Roundcube repo
 # into ./skins here
 
-# Note: You can remove -x option to generate non-minified file
+lessc --clean-css="--s1 --advanced" --rewrite-urls=all plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css
-#       (remember to remove ".min" from the output file name)
-
-lessc --relative-urls -x plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css

plugins/libkolab/skins/elastic/include/calendar.less

@@ -137,7 +137,7 @@ fieldset.categories .input-group {
 
     .event-row {
         white-space: nowrap;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
 
         &.current {
             color: #333;
@@ -166,7 +166,8 @@ fieldset.categories .input-group {
 }
 
 #calendar.content {
-    overflow: hidden !important; // fullcalendar widget implements scrolling on its own
+    // fullcalendar widget implements scrolling on its own
+    overflow: hidden !important;
     position: relative;
 }
 
@@ -567,7 +568,7 @@ fieldset.categories .input-group {
 
     @media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) {
         .fc-center {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
             flex: 1;
 
             h2 {
@@ -715,7 +716,7 @@ body.task-calendar {
 
         span {
             display: block;
-            .overflow-ellipsis;
+            .overflow-ellipsis();
         }
     }
 }
@@ -729,7 +730,7 @@ body.task-calendar {
     }
 
     .event-location {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         white-space: nowrap;
     }
 
@@ -819,7 +820,7 @@ body.task-calendar {
         }
 
         &.loading:before {
-            .animated-icon-class;
+            .animated-icon-class();
             content: @fa-var-circle-notch;
             display: block;
             line-height: 1;
@@ -967,7 +968,7 @@ body.task-calendar {
             }
 
             &.loading:before {
-                .animated-icon-class;
+                .animated-icon-class();
                 .font-icon-solid(@fa-var-circle-notch);
             }
 

plugins/libkolab/skins/elastic/include/darkmode.less

@@ -0,0 +1,168 @@
+/**
+ * Kolab core library
+ *
+ * This file contains Elastic skin dark mode styles for all Kolab plugins
+ *
+ * @author Aleksander Machniak <machniak@kolabsys.com>
+ *
+ * Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+html.dark-mode {
+    // Use icons-only on taskmenu with small screen height
+    @media screen and (max-height: 750px) and (min-width: (@screen-width-small + 1px)) {
+        #taskmenu a {
+            width: @layout-menu-width-sm - 1px;
+        }
+    }
+
+    .watermark {
+        background-color: @color-dark-background;
+        background-blend-mode: soft-light;
+
+        &:before {
+            background: none;
+        }
+    }
+
+    #filelistcontainer,
+    .fc-scroller {
+        scrollbar-width: thin;
+    }
+
+    .fc {
+        .fc-header-toolbar {
+            background-color: @color-dark-list-selected-background;
+        }
+
+        #timezone-display,
+        .fc-center h2 {
+            color: @color-dark-font;
+        }
+    }
+
+    .filelist tr.session.owner > td.name::after,
+    .rsvp-status:not(.accepted):not(.tentative):not(.declined)::before,
+    .resources-dialog .listing li.resource > a {
+        color: @color-dark-font;
+    }
+
+    .fc-unthemed th,
+    .fc-unthemed td,
+    .fc-unthemed .fc-divider,
+    .fc-unthemed .fc-row,
+    .fc-unthemed .fc-content,
+    .fc-unthemed .fc-popover,
+    .fc-unthemed .fc-list-view,
+    .fc-unthemed .fc-list-heading td,
+    #tasklist li.taskitem > div,
+    #tasklist li.taskitem > span {
+        border-color: @color-dark-list-border;
+    }
+
+    .files-dialog .selection-content,
+    .calendar-scheduler .schedule-table td.times td,
+    .calendar-scheduler .attendees-list div.attendee,
+    .calendar-scheduler .schedule-table .timesheader,
+    .calendar-scheduler .schedule-table td.attendees .attendees-list,
+    .fc-unthemed th,
+    .fc-unthemed td {
+        border-color: @color-dark-border;
+    }
+
+    #resource-availability .fc,
+    #resource-availability .fc-view {
+        border-color: @color-dark-border;
+    }
+
+    .selection-dialog .form-addon,
+    .selection-dialog .header,
+    .selection-dialog .selection-list,
+    .edit-attendees-table th {
+        border-color: @color-dark-border !important;
+    }
+
+    .selection-dialog .listing ul,
+    .selection-dialog .form-addon,
+    .selection-dialog .header {
+        background-color: transparent;
+    }
+
+    .fc-unthemed .fc-divider,
+    .fc-unthemed .fc-popover .fc-header,
+    .fc-unthemed .fc-list-heading td,
+    body.task-calendar .ui-datepicker-inline .ui-datepicker-activerange,
+    .listing li.selected > div > *,
+    #tasklist li.taskitem div.taskhead.selected {
+        color: @color-dark-list-selected;
+        background-color: @color-dark-list-selected-background;
+    }
+
+    #folder-mount-form td.source.selected {
+        background-color: @color-dark-list-selected-background;
+    }
+
+    #tagsform option,
+    .tagedit-list li.tagedit-listelement-new input {
+        color: @color-dark-input;
+    }
+
+    .fc .fc-axis,
+    .fc .fc-day-number,
+    .fc .fc-week-number,
+    .fc .fc-day-header,
+    .fc .fc-week-header,
+    .formcontent.text-only .faded *,
+    .availability span,
+    .invitebox td.label,
+    .invitebox .rsvp-status.hint,
+    .calendar-agenda-preview .event-row.current,
+    #tasklist span.date,
+    #kolabnoteslist td.date,
+    #notedetailstitle .dates {
+        color: @color-dark-hint;
+    }
+
+    .invitebox .folder-select select {
+        background-color: @color-dark-input-background;
+    }
+
+    .tagedit-list[tabindex="-1"] {
+        border-color: @color-dark-input-border-focus;
+        box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow;
+        background: @color-dark-input-background-focus;
+    }
+
+    #tasklist .progressbar .progressvalue {
+        border-color: @color-dark-warning;
+    }
+
+    .listing {
+        li > div.readonly a:first-child,
+        li.readonly:not(.virtual) > div a:first-child {
+            &:after {
+                color: @color-dark-font;
+                background-color: @color-dark-background;
+            }
+        }
+    }
+
+    .dialog-message {
+        opacity: 1;
+        color: @color-dark-font;
+        background-color: @color-dark-warning;
+    }
+}

plugins/libkolab/skins/elastic/include/kolab_activesync.less

@@ -37,7 +37,7 @@
         }
 
         span {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
         }
     }
 

plugins/libkolab/skins/elastic/include/kolab_files.less

@@ -492,7 +492,7 @@ button.participant.add:before {
         td,th {
             padding-left: .15rem;
             max-width: 10vw; // needed for overflow
-            .overflow-ellipsis;
+            .overflow-ellipsis();
 
             &:last-child {
                 padding-right: .15rem;

plugins/libkolab/skins/elastic/include/kolab_notes.less

@@ -67,7 +67,7 @@
     }
 
     td.title {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         flex: 1;
 
         &:before {
@@ -89,7 +89,7 @@
     }
 
     & > a {
-        .overflow-ellipsis;
+        .overflow-ellipsis();
         white-space: nowrap;
         display: block;
         text-decoration: none;

plugins/libkolab/skins/elastic/include/kolab_tags.less

@@ -62,16 +62,9 @@
     select {
         padding: 0;
         margin-bottom: .5rem;
-
-        &:focus {
-            box-shadow: none !important;
-            border: 1px solid @color-layout-border;
-        }
     }
 
     option {
-        color: @color-font; // fix Firefox issue caused by text-shadow below
-        text-shadow: none;
         padding: .5rem;
         outline: 0;
         border: 0;

plugins/libkolab/skins/elastic/include/libcalendaring.less

@@ -129,7 +129,7 @@
 
     &.loading:before {
         &:extend(.font-icon-class);
-        .animated-icon-class;
+        .animated-icon-class();
         content: @fa-var-circle-notch;
         line-height: 1;
     }
@@ -279,7 +279,7 @@
             display: flex;
 
             & > :first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 // width and flex is required to make overflow working
                 flex: 1;
                 width: 1px;
@@ -357,7 +357,7 @@
 
     input[type=button] {
         margin-left: .5em;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 }
 
@@ -611,7 +611,7 @@
         font-size: .9rem;
         color: @color-black-shade-text;
         white-space: nowrap;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 
     .alarm-actions {
@@ -695,7 +695,7 @@
         padding: .5rem .5rem .5rem .65rem;
 
         &:before {
-            .font-icon-class;
+            .font-icon-class();
             margin: 0 1rem 0 0;
             width: 1em;
             line-height: 1.2;

plugins/libkolab/skins/elastic/include/tasklist.less

@@ -160,7 +160,7 @@
         padding: 0 0 0 .2em;
         padding-left: (1 * @listing-treetoggle-width + .25rem);
         margin-right: 2em;
-        .overflow-ellipsis;
+        .overflow-ellipsis();
     }
 
     span.tags {
@@ -350,7 +350,7 @@ html.touch #tasklist {
 }
 
 .taskitem-draghelper {
-    .overflow-ellipsis;
+    .overflow-ellipsis();
 }
 
 .quickview-active {
@@ -360,4 +360,3 @@ html.touch #tasklist {
 #rootdroppable {
     // TODO ?
 }
-

plugins/libkolab/skins/elastic/libkolab.less

@@ -24,6 +24,10 @@
 @skin: "elastic";
 @skin-path: "../../../../skins/@{skin}";
 
+// Disable dark mode support for compatibility with Roundcube 1.4.
+// The variable has been added to variables.less in Roundcube 1.5.
+@dark-mode-enabled: false;
+
 @import (reference) "@{skin-path}/styles/variables";
 @import (reference) "@{skin-path}/styles/mixins";
 
@@ -47,7 +51,7 @@
             display: flex;
 
             & > a:first-child {
-                .overflow-ellipsis;
+                .overflow-ellipsis();
                 position: relative;
                 flex-grow: 1;
 
@@ -155,7 +159,7 @@
                 content: @fa-var-lock;
                 position: absolute;
                 left: 2.25rem;
-                top: @listing-line-height / 2;
+                top: (@listing-line-height / 2);
                 font-size: .9em !important;
                 width: .9em;
                 line-height: 1;
@@ -166,7 +170,7 @@
                 opacity: .9;
 
                 html.touch & {
-                    top: @listing-touch-line-height / 2;
+                    top: (@listing-touch-line-height / 2);
                     left: 2.7rem;
                 }
             }
@@ -219,7 +223,7 @@
         right: 0;
         min-width: 2em;
         line-height: 1.4rem;
-        margin: (@listing-line-height - 1.4 * @page-font-size)/2;
+        margin: ((@listing-line-height - 1.4 * @page-font-size) / 2);
         padding: 0 .3em;
         border-radius: .4em;
         background: @color-list-secondary;
@@ -229,7 +233,7 @@
 
         html.touch & {
             line-height: 2rem;
-            margin: (@listing-touch-line-height - 2 * @page-font-size)/2;
+            margin: ((@listing-touch-line-height - 2 * @page-font-size) / 2);
         }
     }
 }
@@ -429,7 +433,7 @@ button.btn {
         }
 
         a.messagelink {
-            .overflow-ellipsis;
+            .overflow-ellipsis();
         }
 
         a.delete .inner {
@@ -589,7 +593,7 @@ button.btn {
 }
 
 // Use icons-only on taskmenu with small screen height
-@media screen and (max-height: 640px) and (min-width: (@screen-width-small + 1px)) {
+@media screen and (max-height: 750px) and (min-width: (@screen-width-small + 1px)) {
     #layout-menu .popover-header img,
     #layout-menu {
         width: @layout-menu-width-sm;
@@ -598,7 +602,7 @@ button.btn {
     #taskmenu {
         a {
             height: @layout-menu-width-sm;
-            width: 100%;
+            width: @layout-menu-width-sm;
             font-size: 1.2rem !important;
         }
 
@@ -620,3 +624,7 @@ button.btn {
 @import "include/kolab_tags";
 @import "include/libcalendaring";
 @import "include/tasklist";
+
+& when (@dark-mode-enabled = true) {
+    @import "include/darkmode";
+}