diff --git a/plugins/calendar/skins/elastic/templates/calendar.html b/plugins/calendar/skins/elastic/templates/calendar.html
index ddff82cb..9a9f8912 100644
--- a/plugins/calendar/skins/elastic/templates/calendar.html
+++ b/plugins/calendar/skins/elastic/templates/calendar.html
@@ -1,384 +1,384 @@
diff --git a/plugins/kolab_files/skins/elastic/templates/compose_plugin.html b/plugins/kolab_files/skins/elastic/templates/compose_plugin.html
index 28f99d2d..1937bf8b 100644
--- a/plugins/kolab_files/skins/elastic/templates/compose_plugin.html
+++ b/plugins/kolab_files/skins/elastic/templates/compose_plugin.html
@@ -1,43 +1,43 @@
diff --git a/plugins/kolab_files/skins/elastic/templates/files.html b/plugins/kolab_files/skins/elastic/templates/files.html
index b4ba956d..3ae3128e 100644
--- a/plugins/kolab_files/skins/elastic/templates/files.html
+++ b/plugins/kolab_files/skins/elastic/templates/files.html
@@ -1,219 +1,219 @@
diff --git a/plugins/kolab_files/skins/elastic/templates/message_plugin.html b/plugins/kolab_files/skins/elastic/templates/message_plugin.html
index b6372c3f..74a91d93 100644
--- a/plugins/kolab_files/skins/elastic/templates/message_plugin.html
+++ b/plugins/kolab_files/skins/elastic/templates/message_plugin.html
@@ -1,27 +1,27 @@
diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less
index ecd14ddc..2171e659 100644
--- a/plugins/libkolab/skins/elastic/include/calendar.less
+++ b/plugins/libkolab/skins/elastic/include/calendar.less
@@ -1,1308 +1,1304 @@
/**
* 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 .
*/
.menu {
a.calendarlink:before {
content: @fa-var-calendar-alt;
}
a.send:before {
content: @fa-var-paper-plane;
}
}
// Icon for resources in autocompletion list
.listing.iconized li.resource > i:before {
content: @fa-var-cube;
}
a.button {
&.today:before {
.font-icon-regular(@fa-var-calendar);
}
&.date:before {
.font-icon-regular(@fa-var-calendar-alt);
}
}
.listing {
li {
& > div {
&.calendar .calname:before {
&:extend(.font-icon-class);
content: @fa-var-calendar-alt;
}
&.calendar.cal---invitation--pending .calname:before,
&.calendar.cal---invitation--declined .calname:before {
.font-icon-regular(@fa-var-calendar-alt);
}
&.calendar.cal-__bdays__ .calname:before {
content: @fa-var-birthday-cake;
}
&.calendar.cal---invitation--pending,
&.calendar.cal---invitation--declined,
&.calendar.cal-__bdays__ {
font-style: italic;
a.quickview {
padding-right: .25rem;
}
a.calname {
padding-right: 4em;
}
.count {
right: 5.5em;
font-style: normal;
}
}
}
// Calednars list element (color indicator) used in Larry
span.handle {
display: none;
}
}
}
#calendarcategories {
.input-group:not(:last-child) {
margin-bottom: .25rem;
}
}
fieldset.categories .input-group {
.minicolors-input {
border-radius: 0;
}
.minicolors + .input-group-append {
margin-left: 0;
}
a.button.create {
&:before {
&:extend(.font-icon-class);
content: @fa-var-plus;
line-height: 1;
}
}
}
.calendar-invitebox {
& > i.icon:before {
content: @fa-var-calendar !important;
}
}
.calendar-agenda-preview {
display: none;
margin-top: .5rem;
border-top: 1px solid #ddd;
h3 {
margin-top: .5rem;
}
.event-row {
white-space: nowrap;
.overflow-ellipsis;
&.current {
color: #333;
font-weight: bold;
}
&.no-event {
font-style: italic;
}
&.fc-invitation-needs-action {
color: @color-black-shade-text;
.event-title {
font-style: italic;
}
}
}
.event-title {
padding-left: .5rem;
}
.event-date {
}
}
#calendar.content {
overflow: hidden !important; // fullcalendar widget implements scrolling on its own
position: relative;
}
.calendar-datepicker {
// overwrite jQuery-UI datepicker styles
.ui-datepicker {
margin: 0 !important;
border: 0;
border-radius: 0;
width: auto;
min-width: auto !important;
font-size: .9rem;
background-color: @color-black-shade-bg;
table {
margin: 0;
}
td a {
font-size: .9rem !important;
}
}
.ui-datepicker-header {
background-color: @color-black-shade-bg;
border-top: 1px solid @color-layout-border;
}
.ui-dialog & {
.ui-datepicker {
background: transparent;
}
.ui-datepicker-header {
background: transparent;
border: 0;
}
td a {
line-height: 3em !important;
font-size: 1rem !important;
}
}
}
// Fullcalendar styles
@import "fullcalendar";
@color-calendar-border: @color-layout-border;
@color-calendar-free-bg: fadeout(@color-black-shade-text, 80%);
@color-calendar-today: fadeout(@color-warning, 80%);
@color-event-default: #c00;
.fc {
body.quickview-active & .fc-scroller {
background: data-uri("image/svg+xml;charset=utf-8", "../images/eye.svg") center no-repeat;
background-size: 50%;
}
.fc-header-toolbar {
display: flex;
background-color: @color-black-shade-bg;
margin: 0;
& > * > * {
float: none;
margin: 0;
}
}
.fc-left {
order: 1;
.fc-button-group {
display: none;
}
}
.fc-center {
flex: 1;
order: 2;
text-align: center;
padding: .25rem;
h2 {
margin: 0;
color: @color-black-shade-text;
white-space: nowrap;
font-size: 1.25rem;
font-weight: bold;
}
}
.fc-right {
order: 3;
text-align: right;
.fc-button {
display: none;
}
}
button {
height: unset;
padding: .3rem .75rem;
}
button.prev:before {
&:extend(.font-icon-class);
content: @fa-var-angle-left;
margin: 0 !important;
line-height: 1;
}
button.next:before {
&:extend(.font-icon-class);
content: @fa-var-angle-right;
margin: 0 !important;
line-height: 1;
}
.btn-group {
padding: .5rem;
margin: 0;
}
.fc-type-freebusy {
opacity: 0.6;
.fc-title {
position: absolute;
top: -5000px;
}
td {
color: #999;
}
}
.fc-event-dot {
background-color: @color-event-default;
}
a.fc-event, a.fc-event:hover {
color: #fff;
}
.fc-event {
font-size: 13px;
background-color: @color-event-default;
border-color: @color-event-default;
.fc-title {
font-weight: bold;
}
.fc-bg {
opacity: .15;
margin-top: 1.1rem;
}
&.fc-invitation-needs-action {
border: 1px dashed #5757c7;
}
&.fc-invitation-tentative {
border: 1px dashed #eb8900;
}
&.fc-invitation-declined {
border: 1px dashed #c00;
}
&.fc-event-ns-other.fc-invitation-declined {
opacity: 0.7;
.fc-title {
text-decoration: line-through;
}
}
&.fc-invitation-tentative .fc-bg {
background: url(data:image/gif;base64,R0lGODlhCAAIAPABAOuJAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
}
&.fc-invitation-needs-action .fc-bg {
background: url(data:image/gif;base64,R0lGODlhCAAIAPABAFdXx////yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
}
&.fc-invitation-declined .fc-bg {
background: url(data:image/gif;base64,R0lGODlhCAAIAPABAMwAAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff;
}
}
.fc-list-view {
tr.fc-invitation-tentative,
tr.fc-invitation-declined,
tr.fc-invitation-needs-action {
color: #888;
.fc-event-dot {
background-color: #888;
}
}
}
.fc-needs-action,
.fc-declined,
.cal-event-status-cancelled {
opacity: 0.6;
}
.fc-time i {
display: inline-block;
width: 1em;
height: 1em;
margin-left: .25rem;
&:before {
&:extend(.font-icon-class);
font-size: 1em;
line-height: 1;
margin-top: .1rem;
}
&.fc-icon-recurring:before {
.font-icon-regular(@fa-var-clone);
}
&.fc-icon-alarms:before {
content: @fa-var-bell;
}
&.fc-icon-sensitive:before {
content: @fa-var-lock;
}
}
.fc-event-temp {
opacity: 0.4;
}
.fc-nonbusiness {
background-color: @color-calendar-free-bg;
}
.fc-day.fc-today {
background: @color-calendar-today !important;
}
.fc-now-indicator {
border-color: @color-success;
border-width: 1.5px;
}
.fc-list-item,
.fc-list-item:hover td {
background: transparent;
}
.fc-list-item td,
.fc-list-item a {
cursor: default;
}
.fc-list-item-title {
font-weight: bold;
}
.fc-list-table td {
padding: .5rem;
}
.fc-list-heading td {
background: fadeout(@color-black-shade-text, 90%);
}
.fc-list-empty {
display: none;
}
.fc-more {
color: @color-link !important;
white-space: nowrap;
}
.fc-axis,
.fc-day-number,
.fc-week-number,
.fc-day-header,
.fc-week-header {
color: @color-black-shade-text;
font-size: .95rem;
padding: .15rem !important;
}
.fc-week-number {
text-align: center;
}
.fc-popover {
border-radius: .3rem;
.fc-header {
color: @color-black-shade-text;
font-size: .95rem;
font-weight: bold;
}
.fc-icon-x::after {
top: 3px;
}
}
// remove redundant borders
.fc-view.fc-widget-content,
td.fc-head-container {
border-left-width: 0;
}
.fc-list-view,
.fc-body > tr > .fc-widget-content,
.fc-body .fc-bg-sceleton .fc-widget-content,
.fc-body .fc-bg .fc-widget-content {
border-bottom-width: 0;
}
// fullcalendar style overrides for printing
.print-content & {
.fc-header-toolbar {
background-color: #fff;
}
.fc-center h2 {
color: #000;
padding-bottom: .75rem;
font-size: 1.5rem !important;
}
.fc-day.fc-today {
background: transparent !important;
}
a.fc-event {
color: #000;
background-color: #fff !important;
}
.fc-event-description {
white-space: pre-wrap;
font-size: 90%;
}
.fc-event-location {
width: 20%;
}
.fc-event-row-secondary td {
border: 0;
padding-top: 0 !important;
}
.fc-scroller {
overflow: visible !important;
height: auto !important;
}
// Re-add removed borders
.fc-view.fc-widget-content,
td.fc-head-container {
border-left-width: 1px;
}
.fc-list-view,
.fc-agenda-view,
.fc-month-view {
border-bottom: 1px solid #ddd;
}
}
@media screen and (max-width: @screen-width-small) {
.fc-left {
display: block;
width: 100%;
padding: 0;
button {
flex: 1 1 auto;
border-radius: 0;
}
.btn-group {
padding: 0;
display: flex;
}
}
.fc-list-table .fc-event-location,
.fc-center,
.fc-right {
display: none;
}
}
@media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) {
.fc-center {
.overflow-ellipsis;
flex: 1;
h2 {
font-size: 1rem;
line-height: 1;
padding-top: .45rem;
}
}
.fc-left,
.fc-right {
.btn {
padding-left: .5rem;
padding-right: .5rem;
}
}
}
}
// Add scrollbar on iOS
html:matches(.ipad,.iphone) {
.ui-dialog-content:not(.iframe),
#fish-eye-view,
.fc-scroller {
&::-webkit-scrollbar {
-webkit-appearance: none;
}
&::-webkit-scrollbar:vertical {
width: .6rem;
}
&::-webkit-scrollbar:horizontal {
height: .6rem;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4);
border-radius: .3rem;
border: 2px solid #fff;
}
}
}
body.task-calendar {
#print-layout {
#calendar-view-selector {
float: right;
padding-top: .25rem;
}
#calendarlist {
margin-top: 1rem;
&, ul {
list-style: none;
padding: 0;
}
li {
display: inline-block;
white-space: nowrap;
}
ul, li, div {
float: left;
}
div {
margin-right: 2rem;
}
a {
text-decoration: none;
cursor: auto;
}
input,
span.actions,
span.handle {
display: none;
}
}
}
@media screen and (min-width: (@screen-width-small + 1px)) {
#layout-sidebar {
flex: 2 !important;
max-width: 400px;
}
}
// improve datepicker
.ui-datepicker {
td {
width: 12.5%;
}
.ui-datepicker-week-col {
color: @color-black-shade-border;
text-align: center;
}
}
.ui-datepicker-inline {
.ui-datepicker-week-col {
color: @color-link;
cursor: pointer;
}
.ui-datepicker-activerange {
background-color: @color-list-selected-background;
}
}
}
#timezone-display {
font-size: .9rem;
color: @color-black-shade-text;
}
#agendaoptions {
padding: 0 .5rem .5rem .5rem;
display: flex;
background-color: @color-black-shade-bg;
.input-group {
padding-right: .5rem;
flex-wrap: nowrap;
// width: 50%;
&:last-child {
padding-right: 0;
}
}
select {
min-width: 7em;
}
.input-group-prepend {
overflow: hidden;
margin-bottom: 0;
span {
display: block;
.overflow-ellipsis;
}
}
}
#eventshow {
margin: 0;
.event-title {
font-size: 1.5rem;
font-weight: bold;
}
.event-location {
.overflow-ellipsis;
white-space: nowrap;
}
.event-description {
margin: 1rem 0;
}
.event-attendees {
margin-bottom: 1rem;
.attendee {
margin-right: .25rem;
}
}
.event-partstat {
& > span {
display: flex;
}
.rsvp-status {
&:before {
display: inline;
float: none;
}
}
.changersvp {
cursor: pointer;
font-size: 1.2rem;
margin-left: 1em;
&:before {
&:extend(.font-icon-class);
content: @fa-var-pen-square;
float: none;
display: inline;
line-height: 1;
}
}
.inner {
display: none;
}
}
}
#eventedit {
.edit-attendees-table td {
padding-top: .15rem;
&.role {
padding-left: 0;
width: 9em;
}
}
}
#fish-eye-view {
padding: 0;
@media screen and (min-width: (@screen-width-small + 1px)) {
border-bottom: 1px solid @color-calendar-border;
}
}
@color-availability-unknown: #bbb; // Larry: #ddd;
@color-availability-free: @color-success; // Larry: #abd640;
@color-availability-busy: @color-error; // Larry: #e26569;
@color-availability-tentative: #8383fc;
@color-availability-out-of-office: #fbaa68;
.availability {
span {
margin-right: .5rem;
color: @color-black-shade-text;
&:before {
&:extend(.font-icon-class);
content: @fa-var-square;
display: inline;
float: none;
}
&.legend:before {
font-size: 1em;
}
&.loading:before {
.animated-icon-class;
content: @fa-var-circle-notch;
display: block;
line-height: 1;
}
&.unknown:before {
color: @color-availability-unknown;
}
&.free:before {
color: @color-availability-free;
}
&.busy:before {
color: @color-availability-busy;
}
&.tentative:before {
color: @color-availability-tentative;
}
&.out-of-office:before {
color: @color-availability-out-of-office;
}
}
}
// fixes additional checkbox in Elastic's .datetime widget
.datetime {
.custom-switch {
padding-left: .5rem;
label {
line-height: 2;
margin-top: .2rem;
}
}
input {
width: 10em !important;
}
@media screen and (max-width: 420px) {
input {
width: 8em !important;
& + input {
width: 6em !important;
}
}
}
}
.calendar-scheduler {
.nav {
align-items: center;
button:first-child {
margin-right: .25rem;
}
& > div {
white-space: nowrap;
}
@media screen and (max-width: 420px) {
button {
padding-left: .5rem;
padding-right: .5rem;
}
}
}
.schedule-buttons {
.prev-slot:before {
content: @fa-var-chevron-left;
}
.next-slot:after {
&:extend(.font-icon-class);
content: @fa-var-chevron-right;
display: inline-block;
float: none;
margin-right: 0;
}
}
.schedule-options {
flex: 1;
margin-left: 1rem;
html.layout-phone & {
order: 100;
margin-left: 0;
}
}
.schedule-nav {
flex: 1;
margin-left: .3rem;
text-align: right;
button {
line-height: 1.8;
}
}
.schedule-range {
width: 60%;
margin-top: 2rem;
html.layout-phone & {
margin: 0;
}
}
.schedule-legend {
.attendee {
margin-right: .5rem;
}
}
.attendees-list {
position: relative;
a.attendee-role-toggle {
position: absolute;
left: 0;
display: inline-block;
width: 1em;
cursor: pointer;
}
div.attendee {
border-top: 1px solid @color-list-border;
line-height: 1.7rem;
height: 1.8rem;
}
.attendee {
white-space: nowrap;
&.spacer {
height: 10px;
}
&.loading:before {
.animated-icon-class;
.font-icon-solid(@fa-var-circle-notch);
}
&.total {
font-weight: bold;
}
&.total,
&.spacer {
&:before {
display: none;
}
}
}
}
.schedule-table {
table-layout: fixed;
th {
border-top: 0;
}
td.attendees {
width: 25%;
overflow: hidden;
border-top: 0;
html.layout-phone & {
width: 35%;
}
.attendees-list {
border-bottom: 1px solid @color-table-border;
}
}
td.times {
width: auto;
border-top: 0;
table {
margin: 0;
}
td {
height: 1.8rem;
border-top: 1px solid @color-list-border;
white-space: nowrap;
}
}
div.scroll {
position: relative;
overflow: auto;
}
.timesheader {
height: 1.4rem;
border-top: 1px solid @color-table-border;
}
.boxtitle {
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: bold;
padding-top: .5rem;
line-height: 2;
}
td {
padding: 4px;
}
tbody td {
padding: 0;
div {
height: 100%;
}
}
tr.spacer td {
padding: 0;
height: 10px;
}
tr.dates th[colspan="1"] {
min-width: 48px;
max-width: 48px;
text-align: center;
font-size: .7rem;
line-height: 2.9;
}
tr.times td {
cursor: pointer;
min-width: 48px;
max-width: 48px;
font-size: .7rem;
text-align: center;
color: @color-link;
height: 1.4rem;
padding: 0 .1rem;
vertical-align: middle;
border-top: 1px solid @color-table-border;
border-left: 1px solid @color-list-border;
}
.fbcontent {
td {
border-left: 1px solid @color-list-border;
}
&:last-child td {
border-bottom: 1px solid @color-table-border;
}
}
div.unknown {
background-color: @color-availability-unknown;
}
div.free {
background-color: @color-availability-free;
}
div.busy {
background-color: @color-availability-busy;
}
div.tentative {
background-color: @color-availability-tentative;
}
div.out-of-office {
background-color: @color-availability-out-of-office;
}
div.all-busy,
div.all-tentative,
div.all-out-of-office {
overflow: hidden;
// This span imitates a slanting line across the parent element
span {
display: block;
width: 300%;
height: 300%;
border: 1px solid #fff;
background: darken(@color-availability-busy, 10%);
transform: rotate(42deg) translate(2%);
}
&.w10 span {
display: none;
}
&.w20 span,
&.w25 span {
transform: rotate(17deg) translate(-9%);
}
&.w30 span {
transform: rotate(28deg) translate(-7%);
}
&.w33 span {
transform: rotate(32deg) translate(-5%);
}
&.w40 span {
transform: rotate(36deg) translate(-3%);
}
&.w60 span {
transform: rotate(48deg) translate(6%);
}
&.w67 span {
transform: rotate(52deg) translate(9%);
}
&.w70 span,
&.w75 span {
transform: rotate(55deg) translate(12%, 30%);
}
&.w80 span {
transform: rotate(56deg) translate(13%, 30%);
}
&.w90 span {
transform: rotate(59deg) translate(16%, 30%);
}
&.w100 span {
transform: rotate(62deg) translate(19%, 30%);
}
}
div.all-tentative span {
background: darken(@color-availability-tentative, 10%);
}
div.all-out-of-office span {
background: darken(@color-availability-out-of-office, 10%);
}
}
}
#schedule-event-time {
position: absolute;
border-radius: .3rem;
cursor: move;
border: 2px solid #444;
background-color: rgba(0, 0, 0, .3);
}
.resources-dialog {
.resource-selection {
flex: 4;
min-width: 300px;
}
.resource-content {
flex: 10;
margin-left: 1em;
}
.listing li.resource > a {
color: @color-font;
&:before {
&:extend(.font-icon-class);
content: @fa-var-cube;
}
}
.slot-nav {
display: none; // TODO
}
}
#resource-availability {
height: 100%;
.fc {
height: 100%;
overflow: hidden;
position: relative;
border-bottom: 1px solid #ddd;
}
.fc-view {
border-left: 1px solid #ddd;
}
.fc-header-toolbar {
height: 0;
}
}
.standalone-invitebox {
margin: 0 auto;
max-width: 500px;
width: 95%;
display: flex;
flex-direction: column;
top: 15vh;
position: relative;
#logo {
max-height: 90px;
}
.invitebox {
margin-top: 3em !important;
}
}
-.task-calendar .content .searchbar {
- border-color: @color-layout-border;
-}
-
.searchbar a.button.date {
@media screen and (min-width: (@screen-width-small + 1px)) {
display: none;
}
}
@media screen and (max-width: @screen-width-small) {
#agendaoptions {
padding-top: .5rem;
}
.calendar-scheduler {
.schedule-range {
width: 100%;
}
}
- .sidebar .calendar-datepicker {
+ #layout-sidebar .calendar-datepicker {
display: none;
}
.resources-dialog {
.resource-content {
display: none;
margin: 0;
}
.resource-content {
ul {
margin: 1em 1em 0 1em;
}
}
}
#resource-availability {
margin: 0 1em;
}
}
body.task-calendar .header-title {
position: relative;
.tz {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 2;
font-size: .8rem;
font-weight: normal;
color: @color-black-shade-text;
}
}
diff --git a/plugins/libkolab/skins/elastic/libkolab.less b/plugins/libkolab/skins/elastic/libkolab.less
index 16c6fd89..d6bb6859 100644
--- a/plugins/libkolab/skins/elastic/libkolab.less
+++ b/plugins/libkolab/skins/elastic/libkolab.less
@@ -1,554 +1,559 @@
/**
* Kolab core library
*
* This file contains Elastic skin styles for various 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 .
*/
@skin: "elastic";
@skin-path: "../../../../skins/@{skin}";
@import (reference) "@{skin-path}/styles/variables";
@import (reference) "@{skin-path}/styles/mixins";
/*** 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;
}
& + input {
position: initial;
}
}
.custom-switch {
position: relative;
}
&.folder .listname:before {
&:extend(.font-icon-class);
content: @fa-var-sticky-note;
margin-right: .5rem;
}
span.actions {
display: flex;
input + & {
padding-right: 2em;
}
a {
padding: 0;
margin: 0;
margin-right: .2rem;
cursor: pointer;
&:before {
margin: 0;
}
&.remove {
display: none;
}
}
}
a.quickview {
&:before {
content: @fa-var-eye;
opacity: .2;
color: @color-link;
}
&:after {
display: none !important;
}
}
&.focusview {
a.quickview:before {
content: @fa-var-eye;
opacity: 1;
}
}
.subscribed {
cursor: pointer;
// reset listing's link style
padding: 0 !important;
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;
}
& > div.readonly a:first-child,
&.readonly:not(.virtual) > div a:first-child {
padding-right: 1.6em;
&:after {
&:extend(.font-icon-class);
content: @fa-var-lock;
}
}
& > div.other.user > .listname,
&.other.user > div a:first-child {
&:before {
.font-icon-solid(@fa-var-user);
}
}
& > div.virtual.user > .listname,
&.virtual.user > div a:first-child {
&:after {
display: none;
}
}
& > div.virtual.shared > .listname,
&.virtual.shared > div a:first-child {
&:before {
.font-icon-solid(@fa-var-share-alt);
}
&:after {
display: none;
}
}
&.virtual > div > a {
opacity: .5;
}
}
// Tree structure fix
&.treelist:not(.notree) {
& > li > div > a {
padding-left: @listing-treetoggle-width;
}
}
li.droptarget > div {
background-color: @color-list-droptarget-background;
}
li .count {
position: absolute;
top: 0;
right: 0;
min-width: 2em;
line-height: 1.4rem;
margin: (@listing-line-height - 1.4rem)/2;
padding: 0 .3em;
border-radius: .4em;
background: @color-list-secondary;
color: #fff;
text-align: center;
font-weight: bold;
html.touch & {
line-height: 2rem;
margin: (@listing-touch-line-height - 2rem)/2;
}
}
}
html.touch .listing {
li {
& > div {
a:after {
height: @listing-touch-line-height !important;
}
}
.actions {
margin-left: .2rem;
a {
margin-right: .5rem;
}
}
}
}
.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;
}
}
.folderlist li.mailbox {
&.type-event > a:before {
.font-icon-solid(@fa-var-calendar);
}
&.type-task > a:before {
.font-icon-solid(@fa-var-calendar-check);
}
&.type-journal > a:before {
.font-icon-regular(@fa-var-calendar);
}
&.type-contact > a:before {
.font-icon-regular(@fa-var-address-book);
}
&.type-note > a:before {
.font-icon-regular(@fa-var-sticky-note);
}
&.type-configuration > a:before {
.font-icon-solid(@fa-var-cog);
}
&.type-freebusy > a:before {
.font-icon-regular(@fa-var-calendar);
}
&.type-file > a:before {
.font-icon-solid(@fa-var-folder);
}
}
.menu {
li.search {
padding: .25rem .5rem;
.input-group {
i.icon {
font-size: 80%;
padding: .5rem;
}
input {
font-size: 100%;
}
}
}
a.history:before {
content: @fa-var-history;
}
}
button.btn {
&.save.notify:before {
content: @fa-var-envelope;
}
&.print:before {
content: @fa-var-print;
}
}
// E.g. notes preview frame
.watermark {
background: url("@{skin-path}/images/logo.svg") center no-repeat #fff;
background-size: 30%;
background-blend-mode: luminosity;
width: 100%;
height: 100%;
& > * {
display: none;
}
// this is to blend the watermark image
&:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, .85);
}
&.formcontainer {
background: transparent !important;
&:before {
display: none;
}
& > * {
- display: initial;
+ display: block;
+ }
+
+ html.layout-small &,
+ html.layout-phone & {
+ overflow-y: auto !important;
}
}
}
.form-group > .datetime {
display: flex;
white-space: nowrap;
input {
width: 10em;
}
input:first-child {
margin-right: .5rem;
width: 15em;
}
a {
margin-left: 1em;
text-align: right;
flex: 1;
line-height: 2.4;
}
}
.form-section.form-group.form-check {
display: flex;
padding: 0;
label {
order: 10;
}
}
.formcontent.text-only .faded * {
color: @color-black-shade-text;
}
.print-config {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
padding: .5em 1em;
background-color: @color-black-shade-bg;
button.print {
margin-right: 1rem;
}
.prop {
line-height: 2;
margin-left: .5rem;
display: inline-block;
vertical-align: middle;
label {
margin: 0;
}
}
@media print {
display: none;
}
& + .print-content {
position: relative;
top: 0;
left: 0;
height: auto;
margin: 5em auto 0 auto;
overflow: visible;
}
}
.selection-dialog {
.ui-dialog-content {
display: flex !important;
overflow: hidden !important;
}
.selection-list {
display: flex;
flex-direction: column;
border: 1px solid @color-layout-border;
justify-content: center;
}
.ui-dialog-content .popupmenu {
display: flex !important; // overwrites .popupmenu style
width: 100%;
}
.scroller {
flex: 1;
overflow-y: auto;
}
.header {
border-bottom: 1px solid @color-layout-border;
display: flex;
background-color: @color-layout-header-background;
font-size: @layout-header-font-size;
font-weight: bold;
line-height: @layout-header-height;
height: @layout-header-height;
min-height: @layout-header-height;
padding: 0 .25em;
position: relative; // for absolute positioning of searchbar
overflow: hidden;
white-space: nowrap;
}
.header-title {
width: 100%;
text-align: center;
margin: 0 2em;
}
.selection-content {
display: flex;
flex-direction: column;
}
.tab-content {
margin-top: 1rem;
height: 100%;
overflow-y: auto;
}
.form-addon {
margin: 0;
padding: .5rem 0;
width: 100%;
background-color: @color-black-shade-bg;
border-top: 1px solid @color-layout-border;
}
// overwrite .popupmenu colors
.listing {
ul {
background-color: @color-layout-list-background;
}
li.selected {
color: @color-font;
}
}
@media screen and (max-width: @screen-width-small) {
.ui-dialog-content {
padding: 0 !important;
}
.selection-list {
border: 0;
}
.ui-dialog-titlebar {
display: none;
margin: 0;
}
.selection-content {
.header-title {
margin-left: 0;
}
}
.header {
a:before {
font-size: 1.75rem;
}
}
}
}
// Use icons-only on taskmenu with small screen height
@media screen and (max-height: 640px) and (min-width: (@screen-width-small + 1px)) {
#layout-menu .popover-header img,
#layout-menu {
width: @layout-menu-width-sm;
}
#taskmenu {
a {
height: @layout-menu-width-sm;
width: 100%;
font-size: 1.2rem !important;
}
.special-buttons {
width: @layout-menu-width-sm;
}
span.inner {
display: none;
}
}
}
@import "include/calendar";
@import "include/kolab_activesync";
@import "include/kolab_delegation";
@import "include/kolab_files";
@import "include/kolab_notes";
@import "include/kolab_tags";
@import "include/libcalendaring";
@import "include/tasklist";