calendar.less
No OneTemporary
Actions

Authored By

Unknown

Size

26 KB

Referenced Files

None

Subscribers

None

calendar.less
View Options

	/**
	* Kolab core library
	*
	* This file contains Elastic skin styles for calendar plugin.
	*
	* @author Aleksander Machniak <machniak@kolabsys.com>
	*
	* Copyright (C) 2012-2018, Kolab Systems AG <contact@kolabsys.com>
	*
	* This program is free software: you can redistribute it and/or modify
	* it under the terms of the GNU Affero General Public License as
	* published by the Free Software Foundation, either version 3 of the
	* License, or (at your option) any later version.
	*
	* This program is distributed in the hope that it will be useful,
	* but WITHOUT ANY WARRANTY; without even the implied warranty of
	* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	* GNU Affero General Public License for more details.
	*
	* You should have received a copy of the GNU Affero General Public License
	* along with this program. If not, see <http://www.gnu.org/licenses/>.
	*/

	.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;
	}
	}

	.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%;
	}
	}

	#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;
	}
	}

File Metadata

Mime Type: text/x-asm
Expires: Mon, Apr 6, 1:28 AM (2 d, 8 h ago)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 18831840
Default Alt Text: calendar.less (26 KB)

calendar.lessNo OneTemporaryActions

calendar.lessView Options

File Metadata

Event Timeline

calendar.less
No OneTemporary
Actions

calendar.less
View Options