Elastic dark mode
Reviewers: #roundcube_kolab_plugins_developers Subscribers: #roundcube_kolab_plugins_developers Differential Revision: https://git.kolab.org/D2179
This commit is contained in:
Aleksander Machniak
parent
7203e49484
commit
fba24494dd
10 changed files with 204 additions and 38 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
168
plugins/libkolab/skins/elastic/include/darkmode.less
Normal file
168
plugins/libkolab/skins/elastic/include/darkmode.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
.overflow-ellipsis;
|
||||
.overflow-ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 ?
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue