diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less new file mode 100644 index 00000000..d6c3d4bb --- /dev/null +++ b/plugins/libkolab/skins/elastic/include/calendar.less @@ -0,0 +1,42 @@ +/** + * Kolab core library + * + * This file contains Elastic skin styles for calendar plugin. + * + * @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 . + */ + +.toolbarmenu.listing li { + a.calendarlink:before { + .font-icon-regular(@fa-var-calendar); + } +} + +#calendarcategories { + .input-group:not(:last-child) { + margin-bottom: .25rem; + } +} + +fieldset.categories .input-group a.button.create { + &:before { + &:extend(.font-icon-class); + content: @fa-var-plus; + line-height: 1; + } +} diff --git a/plugins/libkolab/skins/elastic/include/kolab_notes.less b/plugins/libkolab/skins/elastic/include/kolab_notes.less new file mode 100644 index 00000000..79b84932 --- /dev/null +++ b/plugins/libkolab/skins/elastic/include/kolab_notes.less @@ -0,0 +1,79 @@ +/** + * Kolab core library + * + * This file contains Elastic skin styles for kolab_notes plugin. + * + * @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 . + */ + +.toolbarmenu.listing li { + a.appendnote:before { + .font-icon-regular(@fa-var-sticky-note); + } +} + +// Fixes TinyMCE editor height=0 issue +#noteform iframe { + min-height: 10rem; +} + +#notereferences { + margin-top: .5rem; + + .attachmentslist a.delete { + margin-left: .5rem; + } +} + +#kolabnoteslist { + tr { + display: flex; + } + + td.title { + .overflow-ellipsis; + flex: 1; + } + + td.date { + overflow: unset; + color: @color-list-secondary; + font-style: italic; + } +} + +.kolabmessagenotes { + display: block !important; + + & > a { + .overflow-ellipsis; + white-space: nowrap; + display: block; + text-decoration: none; + + &:before { + &:extend(.font-icon-class); + color: @color-message-information; + .font-icon-regular(@fa-var-sticky-note); + margin-right: .6rem; + width: 1em; + font-size: 1.5em !important; + line-height: 1; + } + } +} diff --git a/plugins/libkolab/skins/elastic/include/kolab_tags.less b/plugins/libkolab/skins/elastic/include/kolab_tags.less new file mode 100644 index 00000000..a1ab0d2a --- /dev/null +++ b/plugins/libkolab/skins/elastic/include/kolab_tags.less @@ -0,0 +1,112 @@ +/** + * Kolab core library + * + * This file contains Elastic skin style of kolab_tags plugin. + * + * @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 . + */ + +.toolbarmenu.listing li { + a.tags:before { + content: @fa-var-tags; + } + + a.tag:before, + a.tag.remove:before, + a.tag.remove.all:before { + content: @fa-var-tag; + } +} + +#taglist { + li { + padding: 0 .5rem; + &:before { + &:extend(.font-icon-class); + content: @fa-var-tag; + margin: 0 .5rem 0 .2rem; + } + } +} + +#tagsform option:before, +#taglist li:before, +#tag-selector li a:before { + color: darken(@color-main, 15%); // default tag color +} + +#tagsform option:checked:before, +#tag-selector li:hover a:before { + color: #fff; +} + +#tagsform { + min-height: 15rem; + + 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; + + &:before { + &:extend(.font-icon-class); + content: @fa-var-tag; + line-height: 1; + } + } + + .buttons { + text-align: center; + + button { + margin: 0 .25rem; + } + } +} + +.tagbox { + color: #fff; + background-color: @color-main; + border-radius: .25rem; + max-width: 4em; + padding: .1rem .4rem; + margin-right: .2rem; + font-weight: bold; + + a { + color: inherit; + padding-left: .5rem; + text-decoration: none; + } + + h2 > & { + font-size: 1.2rem; + } +} diff --git a/plugins/libkolab/skins/elastic/include/tasklist.less b/plugins/libkolab/skins/elastic/include/tasklist.less new file mode 100644 index 00000000..fefa5f78 --- /dev/null +++ b/plugins/libkolab/skins/elastic/include/tasklist.less @@ -0,0 +1,28 @@ +/** + * Kolab core library + * + * This file contains Elastic skin styles for tasklist plugin. + * + * @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 . + */ + +.toolbarmenu.listing li { + a.taskaddlink:before { + content: @fa-var-tasks; + } +} diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less index 666c83b4..2f4047dc 100644 --- a/plugins/libkolab/skins/elastic/libkolab.less +++ b/plugins/libkolab/skins/elastic/libkolab.less @@ -1,433 +1,271 @@ /** * Kolab core library * - * This file contains style of various Kolab plugins for Elastic skin. + * This file contains Elastic skin styles for various Kolab plugins. * - * @author Thomas Bruederli + * @author Aleksander Machniak * - * Copyright (C) 2012-2017, Kolab Systems AG + * 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 . */ @import (reference) "../../../../skins/elastic/styles/variables"; @import (reference) "../../../../skins/elastic/styles/mixins"; -/*** Folders list extensions ***/ +/*** Common folders list extensions ***/ .listing { // Fix focus indicator, because we add div element in the list record @media screen and (min-width: @screen-width-large) { li > div a { border-left: 2px solid transparent; } li > div a:focus { border-left: 2px solid @color-list-focus-indicator; outline: 0; } } li { & > div { display: flex; & > a:first-child { .overflow-ellipsis; position: relative; flex-grow: 1; &:after { color: #ccc; position: absolute; top: 0; right: 0; height: @listing-line-height !important; font-size: 1.1em !important; } } &.tasklist .listname:before { // TODO: tasklist icon } &.calendar .calname:before { // TODO: clendar icon } &.folder .listname:before { // TODO: notes folder icon, maybe need to use #notebooks parent &:extend(.font-icon-class); content: @fa-var-sticky-note; } span.handle { // TODO calendar/tasklist color indicator } span.actions { a.remove { display: none; } } a.quickview:before { content: @fa-var-eye; // TODO: disabled button state } &.focusview { span.actions { a.quickview:before { content: @fa-var-eye; } } } .subscribed { cursor: pointer; // reset listing's link style padding: 0; border-left: 0; width: auto; &:before { .font-icon-regular(@fa-var-bookmark); // TODO: better icon height: auto; color: @color-link; margin-right: .25rem; } } // span.subscribed is used on addressbooks list, a.subscribed in other places span.subscribed:before { &:extend(.font-icon-class); .font-icon-regular(@fa-var-bookmark); // TODO: better icon } &.subscribed { .subscribed:before { .font-icon-solid(@fa-var-bookmark); // TODO: better icon } } } &.selected > div { color: @color-list-selected; background-color: @color-list-selected-background; } &.shared > div a:first-child { padding-right: 1.6em; &:after { &:extend(.font-icon-class); content: @fa-var-share-alt; } } &.user > div a:first-child { padding-right: 1.6em; &:after { &:extend(.font-icon-class); content: @fa-var-user; } } &.readonly:not(.virtual) > div a:first-child { padding-right: 1.6em; &:after { &:extend(.font-icon-class); content: @fa-var-lock; } } &.other.user > div { span.calname { // TODO @fa-var-user; } } &.shared > div { span.calname { // TODO @fa-var-share-alt; } } & > div.readonly { span.calname { // TODO: @fa-var-lock; } } &.virtual > div > a { opacity: .5; } } input.flex-checkbox { position: relative !important; margin: 0 0 0 .25em !important; & + label { position: relative !important; margin: 0 .3em 0 -1em !important; right: 0 !important; } } } html.touch .listing { li { & > div { a:after { height: @listing-touch-line-height !important; } } } } .searchresults { .boxtitle { line-height: 2rem !important; font-size: 80%; padding: 0 .5rem; margin: 0; color: @color-popover-separator; background-color: @color-popover-separator-background; text-align: center; border-bottom: 1px solid @color-layout-border; } } .toolbarmenu.listing li { - a.tags:before { - content: @fa-var-tags; - } - - a.tag:before, - a.tag.remove:before, - a.tag.remove.all:before { - content: @fa-var-tag; - } - &.search { padding: .25rem .5rem; .input-group { i.icon { font-size: 80%; padding: .5rem; } input { font-size: 100%; } } } a.history:before { content: @fa-var-history; } - - a.calendarlink:before { - .font-icon-regular(@fa-var-calendar); - } - - a.appendnote:before { - .font-icon-regular(@fa-var-sticky-note); - } - - a.taskaddlink:before { - content: @fa-var-tasks; - } -} - -#taglist { - li { - padding: 0 .5rem; - &:before { - &:extend(.font-icon-class); - content: @fa-var-tag; - margin: 0 .5rem 0 .2rem; - } - } -} - -#tagsform option:before, -#taglist li:before, -#tag-selector li a:before { - color: darken(@color-main, 15%); // default tag color -} - -#tagsform option:checked:before, -#tag-selector li:hover a:before { - color: #fff; -} - -#tagsform { - min-height: 15rem; - - 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; - - &:before { - &:extend(.font-icon-class); - content: @fa-var-tag; - line-height: 1; - } - } - - .buttons { - text-align: center; - - button { - margin: 0 .25rem; - } - } -} - -.tagbox { - color: #fff; - background-color: @color-main; - border-radius: .25rem; - max-width: 4em; - padding: .1rem .4rem; - margin-right: .2rem; - font-weight: bold; - - a { - color: inherit; - padding-left: .5rem; - text-decoration: none; - } - - h2 > & { - font-size: 1.2rem; - } -} - -#calendarcategories { - .input-group:not(:last-child) { - margin-bottom: .25rem; - } -} - -fieldset.categories .input-group a.button.create { - &:before { - &:extend(.font-icon-class); - content: @fa-var-plus; - line-height: 1; - } } -// TODO .quickview-active in Calendar and Tasklist - .formbuttons-secondary-kolab { display: inline; } a.history { &.disabled { display: none; } &:before { &:extend(.font-icon-class); content: @fa-var-history; display: inline; float: none; } } -// Notes preview frame +// E.g. notes preview frame .watermark { & > * { display: none; } &.formcontainer { background: transparent !important; & > * { display: initial; } } } -// Fixes TinyMCE editor height=0 issue -#noteform iframe { - min-height: 10rem; -} - -#notereferences { - margin-top: .5rem; - - .attachmentslist a.delete { - margin-left: .5rem; - } -} - -#kolabnoteslist { - tr { - display: flex; - } - - td.title { - .overflow-ellipsis; - flex: 1; - } - - td.date { - overflow: unset; - color: @color-list-secondary; - font-style: italic; - } -} - -.kolabmessagenotes { - display: block !important; - - & > a { - .overflow-ellipsis; - white-space: nowrap; - display: block; - text-decoration: none; - - &:before { - &:extend(.font-icon-class); - color: @color-message-information; - .font-icon-regular(@fa-var-sticky-note); - margin-right: .6rem; - width: 1em; - font-size: 1.5em !important; - line-height: 1; - } - } -} +@import "include/calendar"; +@import "include/kolab_notes"; +@import "include/kolab_tags"; +@import "include/tasklist";