Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F3318720
calendar.less
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
30 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/>.
*/
.
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
:
.25
rem
;
}
a
.
calname
{
padding-right
:
4
em
;
}
.
count
{
right
:
5.5
em
;
}
}
}
//
Calednars
list
element
(
color
indicator
)
used
in
Larry
span
.
handle
{
display
:
none
;
}
}
}
#
calendarcategories
{
.
input-group
:
not
(
:
last
-child
)
{
margin-bottom
:
.25
rem
;
}
}
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
:
.5
rem
;
border-top
:
1
px
solid
#ddd
;
h3
{
margin-top
:
.5
rem
;
}
.
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
:
.5
rem
;
}
.
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
:
.9
rem
;
background-color
:
@
color
-
black
-
shade-bg
;
td
a
{
font-size
:
.9
rem
!important
;
}
}
.
ui-datepicker-header
{
background-color
:
@
color
-
black
-
shade-bg
;
border-top
:
1
px
solid
@
color
-
layout-border
;
}
}
//
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
:
.5
rem
;
}
.
fc-header-title
{
h2
{
font-size
:
1.5
rem
;
font-weight
:
bold
;
}
}
.
fc-view
{
width
:
100
%
;
overflow
:
hidden
;
}
//
Cell
Styles
.
fc-widget-header
,
//
<
th
>,
usually
.
fc-widget-content
{
//
<td>,
usually
border
:
1
px
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
.6
em
;
overflow
:
hidden
;
height
:
1.9
em
;
line-height
:
1.9
em
;
white-space
:
nowrap
;
cursor
:
pointer
;
}
//
Button
states
//
borrowed
from
twitter
bootstrap
(
http
://
twitter
.
github
.
com
/
bootstrap
/)
.
fc-state-highlight
{
//
<td>
today
cell,
TODO
:
add
.
fc-today
to
<
th
>
background
:
tint
(
@
color
-main
,
90
%
);
}
/*
.fc-state-default {
border: 1px solid;
background-color: #f5f5f5;
}
.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;
background-image: none;
opacity: 0.65;
}
*/
//
Global
Event
Styles
.
fc-event-container
{
&
>
*
{
z-index
:
8
;
}
&
>
.
ui-draggable-dragging
,
&
>
.
ui-resizable-resizing
{
z-index
:
9
;
}
}
.
fc-event
{
border
:
1
px
solid
#3a87ad
;
//
default
BORDER
color
background-color
:
#3a87ad
;
//
default
BACKGROUND
color
color
:
#fff
;
//
default
TEXT
color
font-size
:
.85
em
;
cursor
:
default
;
&:focus
{
outline
:
2
px
solid
ActiveBorder
;
}
.
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
1
px
;
}
.
ui-resizable-handle
{
z-index
:
99999
;
}
//
Horizontal
Events
.
fc-event-hori
{
border-width
:
1
px
0
;
margin-bottom
:
1
px
;
}
.
fc-ltr
.
fc-event-hori
.
fc-event-start
,
.
fc-rtl
.
fc-event-hori
.
fc-event-end
{
border-left-width
:
1
px
;
}
.
fc-ltr
.
fc-event-hori
.
fc-event-end
,
.
fc-rtl
.
fc-event-hori
.
fc-event-start
{
border-right-width
:
1
px
;
}
//
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
:
1
px
0
0
1
px
;
&.fc-last
{
border-right-width
:
1
px
;
}
}
tr
.
fc-last
th
,
tr
.
fc-last
td
{
border-bottom-width
:
1
px
;
}
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
:
22
px
;
text-align
:
center
;
div
{
padding
:
0
2
px
;
}
}
.
fc-day
{
vertical-align
:
top
;
}
.
fc-grid
{
th
{
text-align
:
center
;
}
.
fc-day-number
{
float
:
right
;
padding
:
0
2
px
;
}
.
fc-other-month
.
fc-day-number
{
opacity
:
0.3
;
}
.
fc-day-content
{
clear
:
both
;
padding
:
2
px
2
px
1
px
;
//
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.85
em
;
white-space
:
nowrap
;
text-decoration
:
none
;
cursor
:
pointer
;
padding
:
1
px
;
color
:
@
color
-
link
!important
;
}
//
Agenda
Week
View
,
Agenda
Day
View
.
fc-agenda-days
th
{
text-align
:
center
;
}
.
fc-agenda
{
table
{
border-collapse
:
separate
;
}
.
fc-agenda-axis
{
width
:
50
px
;
padding
:
0
4
px
;
vertical-align
:
middle
;
text-align
:
right
;
white-space
:
nowrap
;
font-weight
:
normal
;
font-size
:
.9
rem
;
border-left
:
0
;
}
.
fc-week-number
{
font-weight
:
bold
;
}
.
fc-day-content
{
padding
:
2
px
2
px
1
px
;
}
}
//
make
axis
border
take
precedence
.
fc-agenda-days
.
fc-agenda-axis
{
border-right-width
:
1
px
;
}
.
fc-agenda-days
.
fc-col0
{
border-left-width
:
0
;
}
//
all-day
area
.
fc-agenda-allday
{
th
{
border-width
:
0
1
px
;
}
.
fc-day-content
{
min-height
:
34
px
;
}
}
//
divider
(
between
all-day
and
slots
)
.
fc-agenda-divider-inner
{
height
:
1
px
;
overflow
:
hidden
;
}
//
slot
rows
.
fc-agenda-slots
{
th
{
border-width
:
1
px
1
px
0
;
}
td
{
border-width
:
1
px
0
0
;
background
:
none
;
}
td
div
{
height
:
20
px
;
}
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
1
px
;
.fc-event-head,
.fc-event-content
{
position
:
relative
;
z-index
:
2
;
width
:
100
%
;
overflow
:
hidden
;
}
&
.
fc-event-start
{
border-top-width
:
1
px
;
}
&
.
fc-event-end
{
border-bottom-width
:
1
px
;
}
.
fc-event-time
{
white-space
:
nowrap
;
font-size
:
10
px
;
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
:
8
px
!important
;
overflow
:
hidden
!important
;
line-height
:
8
px
!important
;
font-size
:
11
px
!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
:
2
px
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
:
1
px
;
padding
:
3
px
5
px
;
font-weight
:
bold
;
}
.
fc-event
{
font-size
:
1
rem
;
}
}
.
fc-list-section
{
padding
:
4
px
2
px
;
border-width
:
0
;
border-bottom-width
:
1
px
;
}
.
fc-view-list
.
fc-last
{
border-bottom
:
0
;
}
.
fc-list-section
.
fc-event
{
position
:
relative
;
margin
:
1
px
2
px
3
px
2
px
;
}
.
fc-view-table
{
tr.fc-event
{
background
:
inherit
;
color
:
inherit
;
td
{
padding
:
2
px
;
border-bottom
:
1
px
solid
@
color
-
calendar-border
;
}
td
.
fc-event-handle
{
padding
:
3
px
8
px
3
px
3
px
;
}
}
.
fc-first
td
.
fc-list-header
{
border-top-width
:
0
;
}
.
fc-event-handle
{
.fc-event-inner
{
display
:
block
;
width
:
8
px
;
height
:
10
px
;
}
}
table
{
table-layout
:
fixed
;
width
:
100
%
;
}
.
fc-event-inner
{
border-color
:
inherit
;
background-color
:
inherit
;
}
col
.
fc-event-handle
{
width
:
18
px
;
}
col
.
fc-event-date
{
width
:
7
em
;
white-space
:
nowrap
;
padding-right
:
1
em
;
.fc-list-day
&
{
width
:
1
px
;
}
}
col
.
fc-event-time
{
width
:
9
em
;
white-space
:
nowrap
;
padding-right
:
1
em
;
}
}
.
fc-icon-alarms
,
.
fc-icon-sensitive
,
.
fc-icon-recurring
{
display
:
inline-block
;
width
:
1
em
;
height
:
1
em
;
margin-left
:
.25
rem
;
&:before
{
&:extend(.font-icon-class)
;
font-size
:
1
em
;
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
;
}
//
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
:
.75
rem
;
font-size
:
1.5
rem
!important
;
}
}
.
fc-agenda-gutter
,
.
fc-header-left
,
.
fc-header-right
{
display
:
none
!important
;
}
.
fc-view
{
overflow
:
visible
;
}
.
fc-event-skin
,
.
fc-event-inner
.
fc-event-skin
{
color
:
black
;
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
:
10
px
;
padding-right
:
0.6
em
;
}
}
.
fc-grid
.
fc-event-time
{
font-weight
:
normal
!important
;
padding-right
:
0.3
em
;
}
.
fc-event-cateories
{
font-style
:
italic
;
}
.
fc-event-location
{
font-size
:
90
%
;
}
.
fc-agenda-slots
td
div
{
height
:
1.4
em
;
}
.
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.3
em
;
background
:
#fff
;
font-weight
:
bold
;
font-size
:
1.2
em
;
color
:
#333
;
border-color
:
@
color
-
calendar-border
;
border-style
:
solid
;
border-width
:
1
px
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.5
em
;
padding-bottom
:
0.5
em
;
}
tr
.
fc-last
td
{
border
:
0
;
}
tr
.
fc-event
.
fc-event-description
{
padding-left
:
2
em
;
padding-top
:
0
em
;
}
col
.
fc-event-location
{
width
:
20
%
;
}
}
.
fc-event-vert
.
fc-event-description
{
font-size
:
90
%
;
font-style
:
italic
;
}
.
fc-view-month
.
fc-event-hori
.
fc-event-inner
{
background
:
#fff
!important
;
}
//
add
back
borders
removed
in
non-print
view
.
fc-agenda
.
fc-agenda-axis
,
.
fc-first
.
fc-day-header
,
.
fc-week
.
fc-first
{
border-left
:
1
px
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
:
1
px
solid
@
color
-
calendar-border
;
}
.
fc-agenda-days
tr
.
fc-last
>
*,
.
fc-week
.
fc-last
.
fc-day
{
border-bottom
:
1
px
solid
@
color
-
calendar-border
;
}
}
body
.
task-calendar
{
#print-layout
{
#calendar-view-selector
{
float
:
right
;
padding-top
:
.25
rem
;
}
}
@
media
screen
and
(
min-width
:
(
@
screen-width-small
+
1px
))
{
&
>
#
layout
>
div
.
sidebar
{
flex
:
2
!important
;
max-width
:
400
px
;
}
}
//
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
:
.9
rem
;
color
:
@
color
-
black
-
shade-text
;
}
#
agendaoptions
{
padding
:
0
.5
rem
.5
rem
.5
rem
;
display
:
flex
;
background-color
:
@
color
-
black
-
shade-bg
;
.input-group
{
padding-right
:
.5
rem
;
flex-wrap
:
nowrap
;
width
:
50
%
;
&:last-child
{
padding-right
:
0
;
}
}
select
{
min-width
:
7
em
;
}
.
input-group-prepend
{
overflow
:
hidden
;
span
{
display
:
block
;
.overflow-ellipsis
;
}
}
}
#
eventshow
{
margin
:
0
;
.event-title
{
font-size
:
1.5
rem
;
font-weight
:
bold
;
}
.
event-location
{
.overflow-ellipsis
;
white-space
:
nowrap
;
}
.
event-description
{
margin
:
1
rem
0
;
}
.
event-attendees
{
margin-bottom
:
1
rem
;
.attendee
{
margin-right
:
.25
rem
;
}
}
.
event-partstat
{
&
>
span
{
display
:
flex
;
}
.
rsvp-status
{
&:before
{
display
:
inline
;
float
:
none
;
}
}
.
changersvp
{
cursor
:
pointer
;
font-size
:
1.2
rem
;
margin-left
:
1
em
;
&: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
:
.15
rem
;
&.role
{
padding-left
:
0
;
width
:
9
em
;
}
}
}
#
fish-eye-view
{
padding
:
0
;
border-bottom
:
1
px
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
:
.5
rem
;
color
:
@
color
-
black
-
shade-text
;
&:before
{
&:extend(.font-icon-class)
;
content
:
@
fa-var-square
;
display
:
inline
;
float
:
none
;
}
&
.
legend
:
before
{
font-size
:
1
em
;
}
&
.
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
:
1
em
;
line-height
:
2.2
;
text-align
:
right
;
flex
:
1
;
}
input
{
width
:
10
em
!important
;
}
input
[
type
=
checkbox
]
{
width
:
auto
!important
;
}
}
.
calendar-scheduler
{
.schedule-nav
{
position
:
absolute
;
right
:
1
rem
;
top
:
1
rem
;
button
{
padding
:
0
1
rem
;
}
}
.
schedule-range
{
width
:
50
%
;
margin-top
:
2
rem
;
}
.
schedule-legend
{
.attendee
{
margin-right
:
.5
rem
;
}
}
.
schedule-find-buttons
{
margin-right
:
1
rem
;
float
:
left
;
button
:
first
-
child
{
margin-right
:
.5
rem
;
}
.
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
:
1
em
;
cursor
:
pointer
;
}
div
.
attendee
{
border-top
:
1
px
solid
@
color
-
list-border
;
line-height
:
1.7
rem
;
height
:
1.8
rem
;
}
.
attendee
{
white-space
:
nowrap
;
&.spacer
{
height
:
10
px
;
}
&
.
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
:
1
px
solid
@
color
-
table
-
border
;
}
}
td
.
times
{
width
:
auto
;
border-top
:
0
;
table
{
margin
:
0
;
}
td
{
height
:
1.8
rem
;
border-top
:
1
px
solid
@
color
-
list-border
;
}
}
div
.
scroll
{
position
:
relative
;
overflow
:
auto
;
}
.
timesheader
{
height
:
1.4
rem
;
border-top
:
1
px
solid
@
color
-
table
-
border
;
}
.
boxtitle
{
margin
:
0
;
padding
:
0
;
font-size
:
1
rem
;
font-weight
:
bold
;
padding-top
:
.5
rem
;
line-height
:
2
;
}
td
{
padding
:
4
px
;
}
tbody
td
{
padding
:
0
;
div
{
height
:
100
%
;
}
}
tr
.
spacer
td
{
padding
:
0
;
height
:
10
px
;
}
tr
.
times
td
{
cursor
:
pointer
;
min-width
:
30
px
;
font-size
:
.7
rem
;
text-align
:
center
;
color
:
@
color
-
link
;
height
:
1.4
rem
;
padding
:
0
.25
rem
;
vertical-align
:
middle
;
border-top
:
1
px
solid
@
color
-
table
-
border
;
border-left
:
1
px
solid
@
color
-
list-border
;
}
.
fbcontent
{
td
{
border-left
:
1
px
solid
@
color
-
list-border
;
}
&
:
last-child
td
{
border-bottom
:
1
px
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
:
1
px
solid
#fff
;
background
:
darken
(
@
color
-availability-busy
,
10
%
);
transform
:
rotate
(
33
deg
)
translate
(
10
%
);
}
&
.
w10
span
{
display
:
none
;
}
&
.
w20
span
,
&
.
w25
span
{
transform
:
rotate
(
10
deg
)
translate
(
10
%
);
}
&
.
w30
span
{
transform
:
rotate
(
15
deg
)
translate
(
10
%
);
}
&
.
w40
span
{
transform
:
rotate
(
20
deg
)
translate
(
10
%
);
}
&
.
w70
span
,
&
.
w75
span
{
transform
:
rotate
(
42
deg
)
translate
(
13
%
);
}
&
.
w80
span
{
transform
:
rotate
(
48
deg
)
translate
(
15
%
);
}
&
.
w90
span
{
transform
:
rotate
(
52
deg
)
translate
(
18
%
);
}
&
.
w100
span
{
transform
:
rotate
(
55
deg
)
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
:
.3
rem
;
cursor
:
move
;
border
:
2
px
solid
@
color
-
black
-
shade-text
;
background-color
:
@
color
-
black
-
shade-bg
;
}
.
resources-dialog
{
display
:
flex
;
height
:
100
%
;
.resource-selection
{
flex
:
4
;
border
:
1
px
solid
@
color
-
layout-border
;
min-width
:
300
px
;
justify-content
:
center
;
.header
{
border-bottom
:
1
px
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
.25
em
;
position
:
relative
;
//
for
absolute
positioning
of
searchbar
overflow
:
hidden
;
white-space
:
nowrap
;
}
}
.
resource-content
{
flex
:
10
;
display
:
flex
;
flex-direction
:
column
;
margin-left
:
1
em
;
}
.
listing
li
.
resource
>
a
{
color
:
@
color
-
font
;
&:before
{
&:extend(.font-icon-class)
;
content
:
@
fa-var-cube
;
}
}
}
.
standalone-invitebox
{
margin
:
0
auto
;
padding-top
:
36
vh
;
max-width
:
500
px
;
width
:
95
%
;
background
:
url
(
../../../../skins/elastic/images/watermark.jpg
)
center
-20
px
no-repeat
;
background-size
:
auto
40
%
;
.invitebox
{
border
:
1
px
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
:
.5
rem
;
}
.
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
:
1
rem
;
line-height
:
1
;
padding-top
:
.75
rem
;
}
}
.
fc-header-left
,
.
fc-header-right
{
width
:
auto
;
.btn
{
padding-left
:
.5
rem
;
padding-right
:
.5
rem
;
}
}
}
}
.
header-title
{
position
:
relative
;
.tz
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
width
:
100
%
;
line-height
:
2
;
font-size
:
.8
rem
;
font-weight
:
normal
;
color
:
@
color
-
black
-
shade-text
;
}
}
File Metadata
Details
Attached
Mime Type
text/x-asm
Expires
Thu, Apr 9, 5:41 PM (17 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
540886
Default Alt Text
calendar.less (30 KB)
Attached To
Mode
R14 roundcubemail-plugins-kolab
Attached
Detach File
Event Timeline
Log In to Comment