diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less index b19c024c..db97e47d 100644 --- a/plugins/libkolab/skins/elastic/include/calendar.less +++ b/plugins/libkolab/skins/elastic/include/calendar.less @@ -1,1646 +1,1663 @@ /** * 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); } 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); } .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 { color: @color-black-shade-text; 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 { top: initial !important; left: initial !important; position: relative !important; transform: unset; box-shadow: none; 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; } } body.quickview-active .fc-content { background: url('images/eye.svg') center no-repeat; background-size: 50%; } // Fullcalendar styles @color-calendar-border: @color-layout-border; .fc { flex: auto !important; .fc-header { tr { background-color: @color-black-shade-bg; } } .fc-header-left { width: 25%; span { display: none; } } .fc-header-center { text-align: center; h2 { margin: 0; color: @color-black-shade-text; white-space: nowrap; } } .fc-header-right { width: 25%; text-align: right; span { display: none; } } .btn-group { padding: .5rem; } .fc-header-title { h2 { font-size: 1.25rem; font-weight: bold; } } .fc-view { width: 100%; overflow: hidden; } // Cell Styles .fc-widget-header, // , usually .fc-widget-content { // , usually border: 1px solid @color-calendar-border; } .fc-cell-overlay { // semi-transparent rectangle while dragging background: #bce8f1; opacity: .3; } // Buttons .fc-button { position: relative; display: inline-block; padding: 0 .6em; overflow: hidden; height: 1.9em; line-height: 1.9em; white-space: nowrap; cursor: pointer; } // Button states // borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/) .fc-state-highlight { // today cell, TODO: add .fc-today to background: fadeout(@color-main, 92%); } /* .fc-state-default { border: 1px solid; background-color: #f4f4f4; } .fc-state-hover, .fc-state-down, .fc-state-active, .fc-state-disabled { color: #333333; background-color: #e6e6e6; } .fc-state-hover { color: #333333; text-decoration: none; } .fc-state-down, .fc-state-active { background-color: #cccccc; outline: 0; } */ .fc-state-disabled { cursor: default; opacity: 0.65; } // Global Event Styles .fc-event-container { & > * { z-index: 8; } & > .ui-draggable-dragging, & > .ui-resizable-resizing { z-index: 9; } } .fc-event { border: 1px solid #3a87ad; // default BORDER color background-color: #3a87ad; // default BACKGROUND color color: #fff; // default TEXT color font-size: .85em; cursor: default; .fc-rtl & { text-align: right; } } a.fc-event { text-decoration: none; } a.fc-event, .fc-event-draggable { cursor: pointer; } .fc-event-inner { width: 100%; height: 100%; overflow: hidden; } .fc-event-time, .fc-event-title { padding: 0 1px; } .ui-resizable-handle { z-index: 99999; } // Horizontal Events .fc-event-hori { border-width: 1px 0; margin-bottom: 1px; } .fc-ltr .fc-event-hori.fc-event-start, .fc-rtl .fc-event-hori.fc-event-end { border-left-width: 1px; } .fc-ltr .fc-event-hori.fc-event-end, .fc-rtl .fc-event-hori.fc-event-start { border-right-width: 1px; } // resizable .fc-event-hori { .ui-resizable-e { cursor: e-resize; } .ui-resizable-w { cursor: w-resize; } } // Reusable Separate-border Table .fc-border-separate { border-collapse: separate; th, td { border-width: 1px 0 0 1px; &.fc-last { border-right-width: 1px; } } tr.fc-last th, tr.fc-last td { border-bottom-width: 1px; - color: @color-black-shade-text; } tbody tr.fc-first td, tbody tr.fc-first th { border-top-width: 0; } } .fc-event-date, .fc-event-time { white-space: nowrap; } // Month View, Basic Week View, Basic Day View .fc-week-number { width: 22px; text-align: center; div { padding: 0 2px; } } .fc-day { vertical-align: top; } + .fc-day-header { + color: @color-black-shade-text; + } + .fc-grid { th { text-align: center; } .fc-day-number { float: right; padding: 0 2px; font-size: .9rem; } .fc-other-month .fc-day-number { opacity: 0.3; } .fc-day-content { clear: both; padding: 2px 2px 1px; // distance between events and day edges } // event styles .fc-event-time { font-weight: bold; white-space: nowrap; } // right-to-left .fc-rtl & .fc-day-number { float: left; } .fc-rtl & .fc-event-time { float: right; } } .fc-more-link { font-size: 0.85em; white-space: nowrap; text-decoration: none; cursor: pointer; padding: 1px; color: @color-link !important; } // Agenda Week View, Agenda Day View - .fc-agenda-days th { - text-align: center; + .fc-agenda-days { + th { + text-align: center; + } + + .fc-widget-header { + color: @color-black-shade-text; + } } .fc-agenda { table { border-collapse: separate; } .fc-agenda-axis { width: 50px; padding: 0 4px; vertical-align: middle; text-align: right; white-space: nowrap; font-weight: normal; font-size: .9rem; border-left: 0; color: @color-black-shade-text; } .fc-week-number { font-weight: bold; } .fc-day-content { padding: 2px 2px 1px; } } // make axis border take precedence .fc-agenda-days .fc-agenda-axis { border-right-width: 1px; } .fc-agenda-days .fc-col0 { border-left-width: 0; } // all-day area .fc-agenda-allday { th { border-width: 0 1px; } .fc-day-content { min-height: 34px; } } // divider (between all-day and slots) .fc-agenda-divider-inner { height: 1px; overflow: hidden; } // slot rows .fc-agenda-slots { th { border-width: 1px 1px 0; } td { border-width: 1px 0 0; background: none; } td div { height: 20px; } tr.fc-slot0 th, tr.fc-slot0 td { border-top-width: 0; } tr.fc-minor th, tr.fc-minor td { border-top-style: dotted; } } // Vertical Events .fc-event-vert { border-width: 0 1px; .fc-event-head, .fc-event-content { position: relative; z-index: 2; width: 100%; overflow: hidden; } &.fc-event-start { border-top-width: 1px; } &.fc-event-end { border-bottom-width: 1px; } .fc-event-time { white-space: nowrap; font-size: 10px; font-weight: bold; } .fc-event-inner { position: relative; z-index: 2; } .fc-event-bg { // makes the event lighter w/ a semi-transparent overlay position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: .25; } } // resizable .fc-event-vert .ui-resizable-s { bottom: 0 !important; // importants override pre jquery ui 1.7 styles width: 100% !important; height: 8px !important; overflow: hidden !important; line-height: 8px !important; font-size: 11px !important; font-family: monospace; text-align: center; cursor: s-resize; } .fc-timeline { position: absolute; width: 100%; left: 0; margin: 0; padding: 0; border: none; border-top: 2px solid @color-success; z-index: 999; } // List view (by bruederli@kolabsys.com) .fc-view-list, .fc-view-table { border-left: 0; border-bottom: 0; border-top: 1px solid @color-layout-border; width: auto; .fc-list-header, td.fc-list-header { border-width: 0; border-bottom-width: 1px; padding: 3px 5px; font-weight: bold; } .fc-event { font-size: 1rem; } } .fc-list-section { padding: 4px 2px; border-width: 0; border-bottom-width: 1px; + + .fc-event { + position: relative; + margin: 1px 2px 3px 2px; + + td:not(.fc-event-handle) { + vertical-align: top; + } + } + + .fc-event-time { + .overflow-ellipsis; + } + + .fc-event-title { + font-weight: bold; + } } .fc-view-list .fc-last { border-bottom: 0; } - .fc-list-section .fc-event { - position: relative; - margin: 1px 2px 3px 2px; - } - .fc-view-table { tr.fc-event { background: inherit; color: inherit; td { padding: 2px; border-bottom: 1px solid @color-calendar-border; } td.fc-event-handle { - padding: 3px 8px 3px 3px; + padding: 3px 8px 3px 5px; } } .fc-first td.fc-list-header { border-top-width: 0; } .fc-event-handle { .fc-event-inner { display: block; width: 8px; height: 10px; } } table { table-layout: fixed; width: 100%; } .fc-event-inner { border-color: inherit; background-color: inherit; } col.fc-event-handle { width: 18px; } col.fc-event-date { width: 7em; white-space: nowrap; padding-right: 1em; .fc-list-day & { width: 1px; } } col.fc-event-time { width: 9em; white-space: nowrap; padding-right: 1em; } } .fc-event-hori.fc-type-freebusy, .fc-event-vert.fc-type-freebusy { opacity: 0.6; .fc-event-title { position: absolute; top: -5000px; } } .fc-event-row.fc-type-freebusy td { color: #999; } .fc-event-vert.fc-invitation-needs-action, .fc-event-hori.fc-invitation-needs-action { border: 1px dashed #5757c7 !important; } .fc-event-vert.fc-invitation-tentative, .fc-event-hori.fc-invitation-tentative { border: 1px dashed #eb8900 !important; } .fc-event-vert.fc-invitation-declined, .fc-event-hori.fc-invitation-declined { border: 1px dashed #c00 !important; } .fc-event-vert.fc-event-ns-other.fc-invitation-declined, .fc-event-hori.fc-event-ns-other.fc-invitation-declined { opacity: 0.7; } .fc-event-ns-other.fc-invitation-declined .fc-event-title { text-decoration: line-through; } .fc-event-vert.fc-invitation-tentative .fc-event-bg { background: url(data:image/gif;base64,R0lGODlhCAAIAPABAOuJAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff; } .fc-event-vert.fc-invitation-needs-action .fc-event-bg { background: url(data:image/gif;base64,R0lGODlhCAAIAPABAFdXx////yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff; } .fc-event-vert.fc-invitation-declined .fc-event-bg { background: url(data:image/gif;base64,R0lGODlhCAAIAPABAMwAAP///yH/C1hNUCBEYXRhWE1QAT8AIfkEBQAAAQAsAAAAAAgACAAAAg4Egmipx+ZaDPCtVPFNBQA7) 0 0 repeat #fff; } .fc-view-table tr.fc-invitation-tentative td, .fc-view-table tr.fc-invitation-declined td, .fc-view-table tr.fc-invitation-needs-action td { color: #888; } .fc-view-table tr.fc-invitation-tentative td.fc-event-title, .fc-view-table tr.fc-invitation-declined td.fc-event-title, .fc-view-table tr.fc-invitation-needs-action td.fc-event-title { font-weight: normal; } .fc-needs-action, .fc-declined, .cal-event-status-cancelled { opacity: 0.6; } .fc-icon-alarms, .fc-icon-sensitive, .fc-icon-recurring { display: inline-block; width: 1em; height: 1em; margin-left: .25rem; &:before { &:extend(.font-icon-class); font-size: 1em; line-height: 1; } } .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-sat, .fc-sun { background-color: fadeout(@color-black-shade-text, 97%); } // remove redundant borders .fc-first tbody .fc-day-header, .fc-first .fc-day-header.fc-first, .fc-week .fc-first { border-left: 0; } .fc-agenda-days tbody .fc-last > *, .fc-agenda-slots tr:last-child td, .fc-week.fc-last .fc-day { border-bottom: 0; } } // fullcalendar style overrides for printing .print-content { .fc-header { tr { background-color: #fff; } } .fc-header-center { width: 100%; h2 { color: #000; padding-bottom: .75rem; font-size: 1.5rem !important; } } .ui-resizable-handle, .fc-agenda-gutter, .fc-header-left, .fc-header-right { display: none !important; } .fc-view { overflow: visible; } .fc-list-section td, .fc-event { color: black !important; } .fc-event:not(.fc-event-row) .fc-event-skin { background-color: #fff !important; } .fc-event-title { font-weight: bold; } .fc-event-hori { .fc-event-title { font-weight: normal; white-space: nowrap; } .fc-event-time { white-space: nowrap; font-weight: normal !important; font-size: 10px; padding-right: 0.6em; } } .fc-grid .fc-event-time { font-weight: normal !important; padding-right: 0.3em; } .fc-event-cateories { font-style: italic; } .fc-event-location { - font-size: 90%; + font-size: 100%; } .fc-agenda-slots td div { height: 1.4em; } - .fc-widget-header, - .fc-mon, .fc-tue, .fc-wed, .fc-thu, .fc-fri { - background-color: #fff; - } - .fc-widget-header, .fc-widget-content { border-color: @color-calendar-border; } .fc-view-list, .fc-view-table { border: 0; } .fc-view-list div.fc-list-header, .fc-view-table td.fc-list-header { padding: 0.3em; background: #fff; font-weight: bold; font-size: 1.2em; color: #333; border-color: @color-calendar-border; border-style: solid; border-width: 1px 0; } .fc-list-section .fc-event { cursor: auto; } .fc-view-table { tr.fc-event td, tr.fc-event td.fc-event-handle { border-color: @color-calendar-border; padding-top: 0.5em; padding-bottom: 0.5em; } tr.fc-last td { border: 0; } tr.fc-event .fc-event-description { padding-left: 2em; padding-top: 0em; } col.fc-event-location { width: 20%; } } .fc-event-vert .fc-event-description { font-size: 90%; font-style: italic; } .fc-day { font-size: 90%; } .fc-view-month .fc-event-hori .fc-event-inner { background: #fff !important; } // add back borders removed in non-print view .fc-first .fc-day-header.fc-first, .fc-agenda .fc-agenda-axis, .fc-first .fc-day-header, .fc-week .fc-first { border-left: 1px solid @color-calendar-border; } .fc-agenda-days th:nth-last-child(2), .fc-agenda-allday td, .fc-agenda-slots td.fc-widget-content { border-right: 1px solid @color-calendar-border; } .fc-agenda-days tr.fc-last > *, .fc-week.fc-last .fc-day { border-bottom: 1px solid @color-calendar-border; } } body.task-calendar { #print-layout { #calendar-view-selector { float: right; padding-top: .25rem; } } @media screen and (min-width: (@screen-width-small + 1px)) { & > #layout > div.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; } } .faded { color: @color-black-shade-text; } } #eventedit { .edit-attendees-table td { padding-top: .15rem; &.role { padding-left: 0; width: 9em; } } } #fish-eye-view { padding: 0; border-bottom: 1px solid @color-calendar-border; .fc-header { display: none; } .fc-view { position: initial !important; } .fc-agenda-days tr.fc-first th { border-top: 0; } .fc-agenda-divider + div { height: 100% !important; overflow: initial !important; } } @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 { label { margin-left: 1em; line-height: 2.2; text-align: right; flex: 1; } input { width: 10em !important; } input[type=checkbox] { width: auto !important; } } .calendar-scheduler { .schedule-nav { position: absolute; right: 1rem; top: 1rem; button { padding: 0 1rem; } } .schedule-range { width: 50%; margin-top: 2rem; } .schedule-legend { .attendee { margin-right: .5rem; } } .schedule-find-buttons { margin-right: 1rem; float: left; button:first-child { margin-right: .5rem; } .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 { line-height: 2.8; label { vertical-align: middle; } } .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; .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; } } 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.times td { cursor: pointer; min-width: 30px; font-size: .7rem; text-align: center; color: @color-link; height: 1.4rem; padding: 0 .25rem; 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: 200%; height: 200%; border: 1px solid #fff; background: darken(@color-availability-busy, 10%); transform: rotate(33deg) translate(10%); } &.w10 span { display: none; } &.w20 span, &.w25 span { transform: rotate(10deg) translate(10%); } &.w30 span { transform: rotate(15deg) translate(10%); } &.w40 span { transform: rotate(20deg) translate(10%); } &.w70 span, &.w75 span { transform: rotate(42deg) translate(13%); } &.w80 span { transform: rotate(48deg) translate(15%); } &.w90 span { transform: rotate(52deg) translate(18%); } &.w100 span { transform: rotate(55deg) translate(20%, 15%); } } 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; opacity: .75; border-radius: .3rem; cursor: move; border: 2px solid @color-black-shade-text; background-color: @color-black-shade-bg; } .resources-dialog { display: flex; height: 100%; .resource-selection { flex: 4; border: 1px solid @color-layout-border; min-width: 300px; justify-content: center; .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; } } .resource-content { flex: 10; display: flex; flex-direction: column; margin-left: 1em; } .listing li.resource > a { color: @color-font; &:before { &:extend(.font-icon-class); content: @fa-var-cube; } } } .standalone-invitebox { margin: 0 auto; padding-top: 36vh; max-width: 500px; width: 95%; background: url(../../../../skins/elastic/images/watermark.jpg) center -20px no-repeat; background-size: auto 40%; .invitebox { border: 1px solid @color-layout-border !important; } } @media screen and (max-width: @screen-width-small) { .fc { .fc-header-left { display: block; width: 100%; padding: 0; button { flex: 1 1 auto; border-radius: 0; } .btn-group { padding: 0; display: flex; } } .fc-header-center, .fc-header-right { display: none; } } #agendaoptions { padding-top: .5rem; } .calendar-scheduler { .schedule-range { width: 100%; } } } @media screen and (min-width: (@screen-width-small + 1px)) and (max-width: 920px) { .fc { .fc-header { display: block; tr { display: flex; } } .fc-header-center { .overflow-ellipsis; flex: 1; h2 { font-size: 1rem; line-height: 1; padding-top: .75rem; } } .fc-header-left, .fc-header-right { width: auto; .btn { padding-left: .5rem; padding-right: .5rem; } } } } .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 238d6f31..94693839 100644 --- a/plugins/libkolab/skins/elastic/libkolab.less +++ b/plugins/libkolab/skins/elastic/libkolab.less @@ -1,434 +1,419 @@ /** * 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 . */ @import (reference) "../../../../skins/elastic/styles/variables"; @import (reference) "../../../../skins/elastic/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; } } &.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; 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; - } - } -*/ & > 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.virtual.user > .listname, - &.virtual.user > div a:first-child { + & > 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; } } 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; font-size: 1.15em; } } 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); } } .toolbarmenu.listing 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; } } .formbuttons-secondary-kolab { display: inline; } a.history { &.disabled { display: none; } &:before { &:extend(.font-icon-class); content: @fa-var-history; display: inline; float: none; } } // E.g. notes preview frame .watermark { & > * { display: none; } &.formcontainer { background: transparent !important; & > * { display: initial; } } } .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; } } button.btn.save.notify:before { content: @fa-var-envelope; } button.btn.print:before { content: @fa-var-print; } .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 { margin-left: .5rem; display: inline-block; vertical-align: middle; label { margin: 0; } label:before { line-height: 1.25; margin-right: .25rem; } } @media print { display: none; } & + .print-content { position: relative; top: 0; left: 0; height: auto; margin: 5em auto 0 auto; overflow: visible; } } @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";