diff --git a/plugins/libkolab/skins/elastic/include/calendar.less b/plugins/libkolab/skins/elastic/include/calendar.less index 276034b1..479803ef 100644 --- a/plugins/libkolab/skins/elastic/include/calendar.less +++ b/plugins/libkolab/skins/elastic/include/calendar.less @@ -1,1308 +1,1309 @@ /** * 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; } .actions { padding-right: .25rem; :last-child { margin-right: 0; } } } &.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.calname { padding-right: 2.5em; } .count { right: 4.2em; 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, &.fc-invitation-tentative, &.fc-invitation-declined { border: 1px dashed #999; } &.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; + flex: 2; max-width: 400px; + min-width: 240px; } } // 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; } } .searchbar a.button.date { @media screen and (min-width: (@screen-width-small + 1px)) { display: none; } } #rcmfd_alarmvalue { max-width: 80px; } @media screen and (max-width: @screen-width-small) { #agendaoptions { padding-top: .5rem; } .calendar-scheduler { .schedule-range { width: 100%; } } #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; } }