diff --git a/less-build.sh b/less-build.sh --- a/less-build.sh +++ b/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 -# (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 +lessc --clean-css="--s1 --advanced" --rewrite-urls=all plugins/libkolab/skins/elastic/libkolab.less > plugins/libkolab/skins/elastic/libkolab.min.css diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less --- a/plugins/libkolab/skins/elastic/include/calendar.less +++ b/plugins/libkolab/skins/elastic/include/calendar.less @@ -137,7 +137,7 @@ .event-row { white-space: nowrap; - .overflow-ellipsis; + .overflow-ellipsis(); &.current { color: #333; @@ -166,7 +166,8 @@ } #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 @@ @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 @@ span { display: block; - .overflow-ellipsis; + .overflow-ellipsis(); } } } @@ -729,7 +730,7 @@ } .event-location { - .overflow-ellipsis; + .overflow-ellipsis(); white-space: nowrap; } @@ -819,7 +820,7 @@ } &.loading:before { - .animated-icon-class; + .animated-icon-class(); content: @fa-var-circle-notch; display: block; line-height: 1; @@ -967,7 +968,7 @@ } &.loading:before { - .animated-icon-class; + .animated-icon-class(); .font-icon-solid(@fa-var-circle-notch); } diff --git a/plugins/libkolab/skins/elastic/include/darkmode.less b/plugins/libkolab/skins/elastic/include/darkmode.less new file mode 100644 --- /dev/null +++ b/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 + * + * Copyright (C) 2012-2018, Kolab Systems AG + * + * 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 . + */ + +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; + } +} diff --git a/plugins/libkolab/skins/elastic/include/kolab_activesync.less b/plugins/libkolab/skins/elastic/include/kolab_activesync.less --- a/plugins/libkolab/skins/elastic/include/kolab_activesync.less +++ b/plugins/libkolab/skins/elastic/include/kolab_activesync.less @@ -37,7 +37,7 @@ } span { - .overflow-ellipsis; + .overflow-ellipsis(); } } diff --git a/plugins/libkolab/skins/elastic/include/kolab_files.less b/plugins/libkolab/skins/elastic/include/kolab_files.less --- a/plugins/libkolab/skins/elastic/include/kolab_files.less +++ b/plugins/libkolab/skins/elastic/include/kolab_files.less @@ -492,7 +492,7 @@ td,th { padding-left: .15rem; max-width: 10vw; // needed for overflow - .overflow-ellipsis; + .overflow-ellipsis(); &:last-child { padding-right: .15rem; diff --git a/plugins/libkolab/skins/elastic/include/kolab_notes.less b/plugins/libkolab/skins/elastic/include/kolab_notes.less --- a/plugins/libkolab/skins/elastic/include/kolab_notes.less +++ b/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; diff --git a/plugins/libkolab/skins/elastic/include/kolab_tags.less b/plugins/libkolab/skins/elastic/include/kolab_tags.less --- a/plugins/libkolab/skins/elastic/include/kolab_tags.less +++ b/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; diff --git a/plugins/libkolab/skins/elastic/include/libcalendaring.less b/plugins/libkolab/skins/elastic/include/libcalendaring.less --- a/plugins/libkolab/skins/elastic/include/libcalendaring.less +++ b/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; diff --git a/plugins/libkolab/skins/elastic/include/tasklist.less b/plugins/libkolab/skins/elastic/include/tasklist.less --- a/plugins/libkolab/skins/elastic/include/tasklist.less +++ b/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 @@ } .taskitem-draghelper { - .overflow-ellipsis; + .overflow-ellipsis(); } .quickview-active { @@ -360,4 +360,3 @@ #rootdroppable { // TODO ? } - diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less --- a/plugins/libkolab/skins/elastic/libkolab.less +++ b/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 @@ } a.messagelink { - .overflow-ellipsis; + .overflow-ellipsis(); } a.delete .inner { @@ -589,7 +593,7 @@ } // 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 @@ #taskmenu { a { height: @layout-menu-width-sm; - width: 100%; + width: @layout-menu-width-sm; font-size: 1.2rem !important; } @@ -620,3 +624,7 @@ @import "include/kolab_tags"; @import "include/libcalendaring"; @import "include/tasklist"; + +& when (@dark-mode-enabled = true) { + @import "include/darkmode"; +}