egroupware/calendar/templates/mobile/app.less

/**
 *
 * Calendar - Mobile
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 * Pixleegg Template app.css
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@stylite.de>
 * @package calendar
 * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
 */
@import (reference) "../../../pixelegg/less/definitions.less";
@import (reference) "../../../pixelegg/mobile/app_colors.less";
@import (less) "../pixelegg/app.css";
/* tablets and smartphones  */
@media all {
	#calendar-toolbar {
		height: 70px;
		box-shadow: 0px 4px 5px 2px silver;
		width: 100%;
		background: #0c5da5;
		z-index: 1;
		#toolbar-actionlist {
			margin-left: 70px;
		}
	}
	#calendar-edit #calendar-edit_calendar-edit-details{
		float: none;
		display: initial;
	}
	span[id^="calendar-list_"][id$="title]"] {
		font-size: 12pt;
		white-space: nowrap;
	}
	div.calDescRow {
		height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	label[id^="calendar-list_"][id$="start]"]> time ,label[id^="calendar-list_"][id$="end]"]> time{
		float: none;
		color:#828282;
	}

	.calDates .dash {
		text-align: center;
		padding: 0px 5px 0 5px !important;
	}
	#calendar-list button.plus_button {
		bottom: 85px ;
	}
	#calendar-edit_category {max-width: 100%;}
	#calendar-edit #calendar-edit_whole_day {margin:0;}
	.quantity{margin-left:5px;}
	#popupMainDiv .et2_date.calendar_alarm_date_display {padding-left: 3px;}
	#calendar-toolbar {background-color: @calendar-color;}
	#calendar-view {
		button.plus_button {
			bottom: 85px;
		}
	}
	#calendar-toolbar button#toolbar-today {
		font-weight: bold;
		font-size: 12pt;
		text-align: center;
		vertical-align: bottom;
	}
	#calendar-toolbar_toolbar .et2_toolbar_more {
		width:30px;
	}
	#calendar-toolbar .egw_fw_ui_app_header_container {
		background: white;
		width: 100%;
		display: block;
		margin-top: 44px;
		font-size: 10pt;
		span{
			display: block;
			width:100%;
			text-align: center;
			font-size:10pt;
		}
	}

	#calendar-edit button#calendar-edit_freetime {
		margin-left: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding-right: 0;
		height: 45px;
		vertical-align: top;
		width: 100%;
	}
}

/* Use media queries and day counts to toggle full days & abbreviations in day labels
  Width breakpoints in media queries chosen somewhat arbitrarily, looking at 'Wednesday'
  to see if it still fits.
*/
@media all and (max-width: 1000px) and (min-width: 481px) {
	// styles assigned when width is smaller than 1000px
	.calendar_calDayColHeader > div[data-date] .long_date
	{
		display: inline;
	}
	.calendar_calDayColHeader > div[data-date] .short_date
	{
		display: none;
	}
	// 7 day needs short day labels
	.calendar_calDayColHeader:first-child:nth-last-child(7)  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(7) ~ .calendar_calDayColHeader  > div[data-date] .short_date,
	{
		display: inline;
	}
	.calendar_calDayColHeader:first-child:nth-last-child(7)  > div[data-date] .long_date,
	.calendar_calDayColHeader:first-child:nth-last-child(7) ~ .calendar_calDayColHeader  > div[data-date] .long_date,
	{
		display: none;
	}
}
@media all and (max-width: 580px) {
	.calendar_calDayColHeader:first-child:nth-last-child(5)  > div[data-date] .long_date,
	.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader  > div[data-date] .long_date,
	{
		display:none;
	}
	.calendar_calDayColHeader:first-child:nth-last-child(5)  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader  > div[data-date] .short_date,
	{
		display: inline;
	}
}
@media all and (max-width: 480px) {
	// styles assigned when width is smaller than 480px;
	.calendar_calDayColHeader > div[data-date] .long_date,
	.calendar_calDayColHeader > div[data-date] .short_date
	{
		display: none;
	}
	// 5 day and less fits short day labels
	.calendar_calDayColHeader:first-child:nth-last-child(3)  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(3) ~ .calendar_calDayColHeader  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(4)  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(4) ~ .calendar_calDayColHeader  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(5)  > div[data-date] .short_date,
	.calendar_calDayColHeader:first-child:nth-last-child(5) ~ .calendar_calDayColHeader  > div[data-date] .short_date,
	{
		display: inline;
	}
	// 2 day view and less has enough room for full label
	.calendar_calDayColHeader:first-child:nth-last-child(1)  > div[data-date] .long_date,
	.calendar_calDayColHeader:first-child:nth-last-child(1) ~ .calendar_calDayColHeader  > div[data-date] .long_date,
	.calendar_calDayColHeader:first-child:nth-last-child(2)  > div[data-date] .long_date,
	.calendar_calDayColHeader:first-child:nth-last-child(2) ~ .calendar_calDayColHeader  > div[data-date] .long_date,
	{
		display:inline;
	}
}