Page MenuHomePhorge
Files F118083849

D2179.1775613887.diff
No OneTemporary
Actions

Authored By
Unknown
Size
14 KB
Referenced Files
None
Subscribers
None

D2179.1775613887.diff
View Options

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 <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;
+ }
+}
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";
+}

File Metadata

Mime Type
text/plain
Expires
Wed, Apr 8, 2:04 AM (16 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
18780048
Default Alt Text
D2179.1775613887.diff (14 KB)

Event Timeline