chrono/chrono/manager/static/css/style.scss

.occupation-bar {
	display: block;
	position: absolute;
	bottom: 0;
	height: 3px;
	background: #88e;
	transition: max-width 300ms ease-in;
	max-width: 0%;
	width: 100%;
}

.overbooking .occupation-bar {
	background: #e33;
}

li.not-bookable {
	opacity: 0.7;
}

li.full {
	background: #f8f8fe;
}

li span.duration {
	font-size: 80%;
}

li span.identifier {
	font-size: 80%;
	opacity: 0.6;
}

h2 span.identifier {
	font-size: 1rem;
	opacity: 0.6;
}

.time-only-picker thead {
	display: none;
}

.time-only-picker tbody td {
	width: 200px;
}

.timeperiods {
	display: flex;
	flex-wrap: wrap;
	margin-right: -10px;
}

.timeperiods .timeperiod {
	flex: 1 0 auto;
	width: 18%;
	margin-right: 10px;
	position: relative;
}

.timeperiods .timeperiod h4 {
	margin-top: 0;
}

.timeperiods .timeperiod ul.objects-list {
	margin-top: 0;
}

.timeperiods .timeperiod:first-child:last-child ul.objects-list {
	margin: -1rem;
}

.timeperiods .timeperiod a.add::before {
	content: "\f055"; /* plus-circle */
	font-family: FontAwesome;
	padding-right: 1ex;
}

a.timeperiod-exception-all {
    font-style: italic;
}

.link-action-icon.upload::before {
	content: "\f093"; /* upload-sign */
}

.dayview h2 a,
.monthview h2 a {
	padding: 0 1ex;
}

.dayview h2 > span {
	display: inline-block;
	min-width: 24ex;
}

.monthview h2 > span {
	display: inline-block;
	min-width: 16ex;
}

.agenda-table thead th {
	width: 14vw;
	padding-bottom: 1ex;
	font-weight: normal;
}

@for $i from 1 through 7 {
	.agenda-table {
		width: 100%;
		.desks-#{$i} {
			thead th { width: (100%/$i)-1%; }
		}
	}
}

.agenda-table tbody tr th {
	box-sizing: border-box;
	padding: 1ex 2ex;
	vertical-align: top;
	width: 8ex;
	font-weight: normal;
	&.hour {
		width: 5%;
		text-align: left;
	}
	a {
		color: #000;
		border: 0;
	}
	&.weekday {
		width: 12.5%;
		padding-top: 3rem;
		&.today {
			font-weight: bold;
		}
	}
}

.agenda-table tbody tr:first-child th.weekday {
	// don't add extra padding on top row
	padding-top: 1ex;
}

.agenda-table tbody tr.odd th.hour,
.agenda-table tbody tr.odd td {
	background: #f0f0f0;
	@media print {
		border-top: 1px solid #aaa;
	}
}

.agenda-table tbody tr.odd td.other-month {
	background: #f8f8f8;
}


.agenda-table tbody td {
	padding: 0 1ex;
	vertical-align: top;
	position: relative;
	border: 0;
}

.agenda-table.month-view {
	border-spacing: 0;
}

.agenda-table.month-view tbody td {
	border: 5px solid white;
	border-width: 0 5px;
}

@for $i from 1 through 60 {
	table.hourspan-#{$i} tbody td {
		height: calc(#{$i} * 2.5em);
	}
}

.agenda-table tbody td div {
	box-sizing: border-box;
	padding: 1ex;
	position: absolute;
	overflow: hidden;
	&.opening-hours {
		z-index: 1;
		background: #b1ea4d linear-gradient(135deg, #b1ea4d 0%, #459522 100%);
		opacity: 0.6;
		left: 0.5ex;
		width: calc(100% - 1ex);
	}
	&.booking {
		background: #eef linear-gradient(135deg, #eef 0%, #ddf 100%);
		box-shadow: 0 0 1px 0 #2d2dad;
		width: calc(100% - 2ex);
		border: 1px solid #aaa;
		z-index: 2;
		&:hover {
			z-index: 3;
			height: auto !important;
		}
	}
}

.monthview tbody td div.booking {
	padding: 0;
	transition: width 100ms ease-in, left 100ms ease-in, color 200ms ease-in;
	text-indent: -9999px;
	&:hover {
		text-indent: 0;
		color: inherit;
		left: 0% !important;
		width: 100% !important
	}
	span.desk {
		display: block;
	}
}

span.start-time {
	font-size: 80%;
}

.date-title {
	cursor: pointer;
	&::after {
		content: "\f073"; /* calendar */
		font-family: FontAwesome;
		padding-left: 1ex;
		padding-right: 0ex;
		opacity: 0.3;
		font-size: 80%;
		transition: opacity 200ms linear;
	}
	&:hover::after {
		opacity: 0.8;
	}
}

.date-picker {
	button, select {
		font-size: 1rem;
	}
	&::before {
		position: absolute;
		content: "";
		display: block;
		width: 1ex;
		height: 1ex;
		border: 1px solid #d0d0d0;
		border-width: 1px 0 0 1px;
		top: -0.6ex;
		left: 5rem;
		background: #FAFAFA;
		transform: rotate(45deg);
	}
	position: absolute;
	background: #FAFAFA;
	border: 1px solid #d0d0d0;
	box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04);
	padding: 1ex 4ex;
	left: 0;
	top: 3ex;
	z-index: 100;
}

ul#id_weekdays {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 42em;
	li {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 10em;
	}
}

ul.objects-list.single-links li a.link-action-icon.refresh {
	margin-right: 3em;
	&::before {
		content: "\f021"; /* refresh */
	}
}