all-in-one-event-calendar/public/themes-ai1ec/vortex/less/calendar.less
2017-03-16 16:59:53 +01:00

966 lines
19 KiB
Text

//
// @file
//
// Used on the full calendar views page only (month, week, day, agenda, etc.).
//
@import "bootstrap/mixins.less";
@import "timely-mixins.less";
// =================
// = Calendar page =
// =================
// General calendar styles.
#ai1ec-container {
clear: both;
}
// Calendar view container.
#ai1ec-calendar-view-container {
position: relative;
-webkit-transform: translateZ(0);
z-index: 1;
}
#ai1ec-calendar-view .post-edit-link {
white-space: nowrap;
}
// Calendar toolbar.
.ai1ec-calendar-toolbar {
background-color: @toolbar-bg;
border: 1px solid @toolbar-border-color;
border-radius: @border-radius-large;
margin-bottom: 8px;
padding: 0 8px;
.ai1ec-nav {
margin: 0 !important;
padding: 0 !important;
}
.timely & .ai1ec-nav-pills > li > a {
border-radius: 0;
}
// Affixed toolbar.
&.ai1ec-affix {
z-index: @zindex-navbar-fixed;
top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
.ai1ec-transition( border-radius 0.3s );
.ai1ec-transition( box-shadow 0.4s );
.ai1ec-box-shadow( 0 3px 12px rgba( 0, 0, 0, 0.2 ) );
.ai1ec-views-dropdown {
margin-bottom: 4px;
clear: both;
}
.ai1ec-clearfix {
padding-top: 8px;
}
}
&.ai1ec-empty-toolbar.ai1ec-affix-top {
border: none;
margin: 0;
}
}
.ai1ec-title-buttons {
.ai1ec-btn-group {
margin-left: 8px;
}
.ai1ec-contribution-buttons {
float: right;
margin-top: 5px;
}
}
// Hidden elements to detect current window mode.
#ai1ec-bs-modes {
width: 0;
height: 0;
overflow: hidden;
}
// Trigger display of dropdown menus on hover on desktop devices only.
.no-touch .ai1ec-calendar-toolbar .ai1ec-dropdown:hover > .ai1ec-dropdown-menu {
display: block;
}
// Views dropdown.
.ai1ec-views-dropdown {
margin-left: 5px;
// Icons
i {
font-size: 1.9em;
line-height: 0.75em;
vertical-align: -37%;
}
.ai1ec-dropdown-menu {
min-width: 0;
}
}
// View filters.
.ai1ec-category-filter .ai1ec-category {
display: block;
}
.ai1ec-filters {
.ai1ec-color-swatch {
height: 7px;
width: 7px;
}
.ai1ec-dropdown-toggle > i {
font-size: 1.25em;
line-height: 0.8em;
vertical-align: -15%;
}
.ai1ec-dropdown-menu {
padding: 1px 2px;
}
}
.ai1ec-tag-filter .ai1ec-dropdown-menu {
max-height: 250px;
min-width: 200px;
overflow: auto;
}
// Select2 filters.
.ai1ec-select2-filters {
clear: both;
.select2-container {
margin: 2px 0;
width: 100%;
}
}
// Clear filter buttons.
.ai1ec-clear-filter {
cursor: pointer;
display: none !important;
}
.ai1ec-dropdown.ai1ec-active > .ai1ec-dropdown-toggle {
> i {
display: none !important;
}
.ai1ec-clear-filter {
display: inline !important;
}
}
// Overhead nav buttons.
.ai1ec-pagination {
> .ai1ec-btn {
text-transform: uppercase;
}
}
.ai1ec-calendar-title,
.ai1ec-calendar-title-short {
font-size: @font-size-base;
line-height: 1em;
}
.ai1ec-calendar-title-short {
display: none;
}
@media screen and ( max-width: @screen-xs-max ) {
.ai1ec-calendar-title {
display: none;
}
.ai1ec-calendar-title-short {
display: inline;
}
}
.ai1ec-minical-trigger {
font-weight: bold !important;
i {
vertical-align: baseline;
}
}
// Print button.
#ai1ec-print-button i {
font-size: 14px;
margin-top: -2px;
}
// Month, week, day tables.
table.ai1ec-month-view,
.ai1ec-week-view table,
.ai1ec-oneday-view table {
border-collapse: collapse;
border: 1px solid @table-border-color !important;
margin: 0 !important;
background: @table-bg;
table-layout: fixed !important;
clear: both;
width: 100% !important;
a.ai1ec-multiday {
.ai1ec-transition( none ) !important;
}
}
table.ai1ec-month-view {
margin-bottom: 6px !important;
}
table.ai1ec-week-view-original,
table.ai1ec-oneday-view-original {
visibility: hidden;
height: 400px;
&.tablescroll_body {
visibility: visible;
height: auto;
&,
& tr:first-child td {
border-top: none !important;
}
}
}
.ai1ec-week-view,
.ai1ec-oneday-view {
.tablescroll_wrapper {
border-bottom: 1px solid @table-border-color;
margin-bottom: 6px;
position: relative;
width: auto !important;
}
table.tablescroll_head {
border-bottom: none !important;
& th {
border-bottom: none !important;
padding: 2.48px !important;
}
}
.ai1ec-reveal-full-day {
float: right;
margin: 3px 3px 3px -3em;
position: relative;
}
.ai1ec-day {
height: 1440px;
}
th {
position: relative;
.ai1ec-weekday-date {
font-size: 15px;
font-weight: normal;
}
.ai1ec-weekday-day {
font-size: 12px;
font-weight: normal;
}
}
}
.ai1ec-month-view,
.ai1ec-week-view,
.ai1ec-oneday-view {
td {
border: 1px solid @table-border-color !important;
background: none !important;
padding: 0 !important;
text-align: left;
vertical-align: top;
}
th {
border: none !important;
background: @table-header-bg !important;
padding: 0.2em !important;
}
}
.ai1ec-month-view td.ai1ec-empty {
background: @table-header-bg !important;
}
.ai1ec-month-view th,
.ai1ec-week-view th,
.ai1ec-week-view .ai1ec-hour-marker div,
.ai1ec-week-view .ai1ec-allday-label,
.ai1ec-oneday-view th,
.ai1ec-oneday-view .ai1ec-hour-marker div,
.ai1ec-oneday-view .ai1ec-allday-label {
color: @table-header-color !important;
text-shadow: 0 1px 0 @text-emboss;
}
.ai1ec-month-view,
.ai1ec-oneday-view {
th {
text-align: center !important;
}
}
.ai1ec-week-view th {
text-align: left !important;
}
.ai1ec-month-view .ai1ec-day,
.ai1ec-week-view .ai1ec-day,
.ai1ec-week-view .ai1ec-allday-events,
.ai1ec-oneday-view .ai1ec-day,
.ai1ec-oneday-view .ai1ec-allday-events {
position: relative;
}
.ai1ec-month-view .ai1ec-day-stretcher {
float: left;
height: 94px;
width: 0;
}
.ai1ec-month-view,
.ai1ec-week-view {
.ai1ec-today {
background: @today-color !important;
}
}
.ai1ec-month-view .ai1ec-date {
background: @month-view-date-bg;
color: mix( @text-color, @month-view-date-bg, 40% );
font-size: 10pt;
line-height: 13px;
height: 13px;
margin-bottom: 1px;
padding: 0 0.4em;
font-size: 8pt;
text-align: right;
text-shadow: 0 1px 0 @text-emboss;
}
// Week/day view time/"now" markers.
.ai1ec-week-view,
.ai1ec-oneday-view {
clear: both;
.ai1ec-grid-container {
position: absolute;
top: auto;
left: 0;
right: 0;
}
.ai1ec-now-marker,
.ai1ec-hour-marker,
.ai1ec-quarter-marker {
position: absolute;
left: 0;
right: 0;
}
.ai1ec-hour-marker {
border-top: 1px solid @table-border-color;
border-top: 1px solid fade( @table-border-color, 70% );
height: 60px;
background: fade( @table-border-color, 40% ) !important;
&.ai1ec-business-hour {
background: none !important;
}
}
.ai1ec-hour-marker div,
.ai1ec-allday-label {
position: relative;
z-index: 2;
margin-left: 1px;
padding: 0 3px;
font-size: 8pt !important;
font-weight: normal !important;
background: @table-header-bg;
float: left;
border-radius: 3px;
}
.ai1ec-allday-label {
margin-top: 1px;
}
.ai1ec-quarter-marker {
border-top: 1px solid @table-border-color;
border-top: 1px solid fade( @table-border-color, 40% );
}
.ai1ec-now-marker {
border-top: 2px solid @day-view-now-marker-color;
.ai1ec-box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.35) );
height: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
z-index: 2;
div {
background-color: @day-view-now-marker-color;
border-radius: 0 0 3px 3px;
.ai1ec-box-shadow( 0 1px 1px rgba(0, 0, 0, 0.35) );
color: #fff;
.ai1ec-opacity( 0 );
font-size: 11px;
float: left;
padding: 1px 4px;
.ai1ec-transition( opacity 0.1s );
}
&:hover div {
.ai1ec-opacity( 1 );
}
}
}
// Event summaries in month/week/day view, including popups.
.ai1ec-month-view,
.ai1ec-week-view,
.ai1ec-oneday-view {
a.ai1ec-event-container {
border: none;
display: block;
font-size: 12px;
.ai1ec-opacity( 0.85 );
&:hover,
&.ai1ec-hover {
.ai1ec-opacity( 1 );
}
}
.ai1ec-event {
max-height: 100%;
overflow: hidden;
margin: 1px 0 0;
padding: 0 3px 1px;
white-space: nowrap;
}
.ai1ec-event-time {
font-weight: bold;
font-size: 11px;
}
}
.ai1ec-month-view,
.ai1ec-week-view .ai1ec-allday-events,
.ai1ec-oneday-view .ai1ec-allday-events {
a.ai1ec-event-container {
position: relative;
}
.ai1ec-allday .ai1ec-event,
.ai1ec-multiday .ai1ec-event {
border-radius: 3px;
background-color: @event-default-color;
color: @event-stub-allday-text;
text-shadow: 0 1px 1px @event-stub-allday-text-shadow;
}
}
.ai1ec-oneday-view {
a.ai1ec-event-container {
margin-right: 10px;
}
.ai1ec-allday-events a.ai1ec-event-container {
margin: 0 0 0 53px;
}
}
.ai1ec-week-view .ai1ec-week,
.ai1ec-oneday-view .ai1ec-oneday {
a.ai1ec-event-container {
background-color: @event-bg;
background-image: -webkit-linear-gradient( top, mix( @event-default-color, @event-bg, 5% ), mix( @event-default-color, @event-bg, 30% ) 120px );
background-image: -moz-linear-gradient( top, mix( @event-default-color, @event-bg, 5% ), mix( @event-default-color, @event-bg, 30% ) 120px );
background-image: -ms-linear-gradient( top, mix( @event-default-color, @event-bg, 5% ), mix( @event-default-color, @event-bg, 30% ) 120px );
background-image: -o-linear-gradient( top, mix( @event-default-color, @event-bg, 5% ), mix( @event-default-color, @event-bg, 30% ) 120px );
background-image: linear-gradient( top, mix( @event-default-color, @event-bg, 5% ), mix( @event-default-color, @event-bg, 30% ) 120px );
border: 1px solid mix( @event-default-color, @event-bg, 50% );
border-radius: 3px;
.ai1ec-box-shadow( 1px 2px 4px rgba(0,0,0,0.15) );
.ai1ec-box-sizing( border-box );
line-height: 15px;
margin: 0 -1px;
min-height: 34px;
position: absolute;
right: 0;
text-shadow: 0 1px 0 @text-emboss;
&.ai1ec-raised {
z-index: 5;
}
&:hover {
border-color: mix( @event-default-hover-color, @event-bg, 50% );
}
}
.ai1ec-event {
margin: 0;
position: absolute;
bottom: 1px;
left: 0;
right: 0;
top: 1px;
}
.ai1ec-event-title {
display: block;
white-space: normal;
}
}
// Month view multi-day bars and dropdowns.
.ai1ec-month-view {
.ai1ec-event {
height: 14px;
line-height: 14px;
margin: 0 0 1px;
}
// Apply word wrapping if enabled.
.ai1ec-word-wrap& {
.ai1ec-event {
border-bottom: 1px dotted @table-border-color;
height: auto;
overflow: visible;
padding-top: 1px;
padding-bottom: 2px;
white-space: normal;
}
// Disable word wrapping styles in some contexts.
.ai1ec-multiday .ai1ec-event {
border-bottom: none;
overflow: hidden;
padding-top: 0;
padding-bottom: 1px;
white-space: nowrap;
}
.ai1ec-allday .ai1ec-event {
border-bottom: none;
}
}
.ai1ec-allday {
padding-left: 1px;
width: 97.5%;
&.ai1ec-multiday {
padding-left: 0;
}
}
.ai1ec-multiday {
z-index: 1;
}
.ai1ec-multiday-arrow1 {
background: @event-default-color;
border: 7px solid @body-bg;
border-left-color: @event-default-color;
border-right-width: 0;
height: 1px;
position: absolute;
right: 0;
top: 0;
width: 0;
}
.ai1ec-multiday-arrow2 {
border: 7px solid @event-default-color;
border-left-color: @body-bg;
border-right-width: 2px;
height: 1px;
left: 0;
position: absolute;
top: 0;
width: 0;
}
.ai1ec-multiday-bar {
background: @event-default-color;
border-radius: 3px;
height: 14px;
left: 0;
position: absolute;
top: 0;
.ai1ec-event-title {
margin-left: 7px;
}
.ai1ec-event {
margin: 0;
}
.ai1ec-event-time {
display: none;
}
}
.ai1ec-event-dropdown {
background: #FFF;
border: 1px solid #E7E7E7;
border-top: 0;
left: -1px;
position: absolute;
top: 78px;
width: 90px;
z-index: 1000;
}
.ai1ec-obscured {
display: none !important;
}
a.ai1ec-scroll-up,
a.ai1ec-scroll-down {
border: 1px solid @table-border-color;
border-radius: 0.2em;
.ai1ec-box-sizing( border-box );
display: block;
left: 50%;
height: 16px;
line-height: 14px;
margin-left: -8px;
position: relative;
text-align: center;
width: 16px;
&:hover {
background-color: @table-border-color;
}
&.ai1ec-disabled {
border: none;
cursor: default;
.ai1ec-opacity( 0.2 );
padding: 1px; // To compensate for height lost by invisible border.
&:hover {
background-color: transparent;
}
}
}
}
// Truncated events in week/day views.
.ai1ec-oneday-view,
.ai1ec-week-view {
.ai1ec-start-truncated .ai1ec-event-time {
display: none;
}
.ai1ec-start-truncated {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ai1ec-end-truncated {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ai1ec-start-truncator,
.ai1ec-end-truncator {
position: absolute;
line-height: 1em;
font-size: 7px;
text-shadow: none;
.ai1ec-opacity( 0.5 );
}
.ai1ec-start-truncator {
top: -1px;
left: -1px;
}
.ai1ec-end-truncator {
bottom: -1px;
right: -1px;
}
}
// Agenda view.
.ai1ec-agenda-view {
clear: both;
overflow: hidden;
margin: 0 0 6px;
.ai1ec-date-events {
overflow: hidden;
margin: 0 0.75em 0 0;
// Fix for border bug in Chrome & Opera
@media screen and (-webkit-min-device-pixel-ratio:0) {
overflow: visible;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
}
}
.ai1ec-date {
overflow: hidden;
}
.ai1ec-event-toggle {
float: right;
font-size: 14px;
font-weight: bold;
color: mix( @text-color, @agenda-date-title-bg, 40% );
.ai1ec-transition( color 0.1s );
// Only show '+' icon by default.
.ai1ec-fa-minus-circle {
display: none;
}
}
// Agenda view events.
.ai1ec-event {
background: @event-bg;
border: 1px solid @event-border;
border-radius: 0.5em;
clear: right;
margin: @font-size-base / 2 0;
overflow: hidden;
position: relative;
padding: 0.6em;
.ai1ec-transition( border-color 0.1s );
// Fix for border bug in Chrome & Opera
@media screen and (-webkit-min-device-pixel-ratio:0) {
overflow: visible;
width: 100%;
& + .ai1ec-event {
margin: 0 0 @font-size-base / 2 0;
}
}
&.ai1ec-expanded {
border-color: @event-hover-border;
.ai1ec-box-shadow( 0 2px 4px mix( @text-color, @agenda-date-title-bg, 15% ) );
// Show - icon when expanded, hide + sign.
.ai1ec-event-toggle {
.ai1ec-fa-minus-circle {
display: inline-block;
}
.ai1ec-fa-plus-circle {
display: none;
}
}
}
.ai1ec-event-header {
cursor: pointer;
&:hover .ai1ec-event-toggle {
color: mix( @text-color, @agenda-date-title-bg, 85% );
}
}
.ai1ec-event-title {
color: @event-default-color;
font-weight: bold;
font-size: 10.5pt;
margin: 0 0 0.4em;
.ai1ec-transition( color 0.1s );
}
.ai1ec-event-time {
font-size: 9pt;
font-weight: bold;
.ai1ec-opacity( 0.8 );
}
.post-edit-link {
.ai1ec-opacity( 0 );
.ai1ec-transition( opacity 0.1s );
}
&:hover {
border-color: @event-hover-border;
.ai1ec-event-title {
color: @event-default-hover-color;
}
.post-edit-link {
.ai1ec-opacity( 1 );
}
}
}
// Agenda view expanded events.
.ai1ec-event-summary {
display: none;
&.ai1ec-expanded {
display: block;
}
}
.ai1ec-event-avatar {
float: left;
margin: 0 16px 8px 0;
max-width: 40%;
img {
max-width: 300px;
max-height: 300px;
min-height: 0;
width: 100%;
}
}
.ai1ec-event-description {
font-size: 9pt;
line-height: 1.5em;
margin-top: @line-height-computed / 2;
}
// Agenda event footer (categories, tags, read more).
.ai1ec-event-summary-footer {
clear: both;
padding-top: 10px;
.ai1ec-field-label {
font-size: 8pt;
}
}
.ai1ec-categories,
.ai1ec-tags {
font-size: 8pt;
margin-right: 0.5em;
}
.ai1ec-actions {
float: right;
margin-top: -5px;
}
}
// Printed agenda view overrides
.ai1ec-print {
* {
background: white !important;
color: black !important;
}
body {
margin: 0;
text-align: left;
}
#wpadminbar,
#comments,
#page > header {
display: none;
}
#ai1ec-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.ai1ec-agenda-view .ai1ec-event.ai1ec-expanded {
box-shadow: none;
border: 2px solid gray !important;
}
.ai1ec-agenda-view {
.ai1ec-event-summary-footer {
display: none;
}
.ai1ec-date-title {
border-color: #cacaca;
&:after {
display: none;
}
}
.ai1ec-event-summary {
.ai1ec-event-title {
display: inline;
}
.ai1ec-event-time {
display: inline;
border: none !important;
box-shadow: none !important;
}
}
.ai1ec-event-description {
padding: 0 !important;
}
.ai1ec-event.ai1ec-allday .ai1ec-allday-label {
border: none !important;
box-shadow: none !important;
padding-left: 0.2em !important;
}
}
.timely .entry-meta,
.timely .ai1ec-subscribe,
.timely .ai1ec-subscribe-google,
.ai1ec-agenda-view .ai1ec-event-expand,
.ai1ec-btn-toolbar,
.ai1ec-pagination,
.ai1ec-calendar-toolbar,
.ai1ec-read-more,
.ai1ec-color-swatch,
.post-edit-link,
.ai1ec-event-toggle,
.ai1ec-views-dropdown {
display: none !important;
}
.ai1ec-event-header {
cursor: text !important;
}
}
// Remove filtered views icon.
#ai1ec_clear_saved_view {
margin-left: -4px;
margin-right: 5px;
}
// Disclaimer link.
.ai1ec-collapsible-toggle {
cursor: pointer;
}
.ai1ec-subscribe-container {
.ai1ec-fa.ai1ec-fa-fw {
width: 20px;
}
}
.ai1ec-event:hover,
.ai1ec-popover {
.ai1ec-sas-actions {
display: block;
white-space: nowrap;
.ai1ec-sas-action {
display: inline-block;
}
.ai1ec-sas-action-tickets {
display: none;
}
}
}
.ai1ec-event[data-ticket-url],
.ai1ec-popover.ai1ec-has-tickets-button {
.ai1ec-sas-action-tickets {
display: inline-block !important;
}
}
:not( .ai1ec-has-product-buy-button ) .ai1ec-event:not( [data-ticket-url] ),
:not( .ai1ec-has-product-buy-button ) .ai1ec-popover:not( .ai1ec-has-tickets-button ) {
.ai1ec-sas-action-tickets {
display: none !important;
}
}
.ai1ec-sas-actions {
display: block;
.ai1ec-sas-action {
display: none;
border-radius: 0;
}
.ai1ec-sas-action:hover,
.ai1ec-active > .ai1ec-sas-action {
span {
display: inline;
}
}
}
// Single event page
.single-ai1ec_event {
.ai1ec-sas-actions {
display: block;
a {
text-align: center !important;
}
}
}
.ai1ec-sas-narrow {
.ai1ec-sas-save-and-share-buttons span {
display: none !important;
}
}
// Agenda
.ai1ec-agenda-view {
.ai1ec-event {
.ai1ec-sas-actions {
float: right;
margin: 0 10px;
@media ( max-width: @screen-md ) {
span {
display: none !important;
}
}
}
}
}
// Posterboard
.ai1ec-posterboard-view,
.ai1ec-popover {
.ai1ec-sas-actions {
text-align: center;
a.ai1ec-btn {
float: none;
}
}
}
.ai1ec-posterboard-view {
.ai1ec-sas-action-tickets {
float: left !important;
margin-top: 1px;
}
}
// Stream view.
.ai1ec-stream-view {
.ai1ec-sas-actions {
float: right;
margin: 0 10px;
position: absolute;
right: 0px;
@media ( max-width: @screen-md ) {
span {
display: none !important;
}
}
}
.post-edit-link {
margin-top: 28px;
}
}
.ai1ec-month-view {
.ai1ec-sas-actions {
display: block !important;
}
.ai1ec-sas-action {
display: block !important;
}
}
// Views with popovers.
.ai1ec-popup {
.ai1ec-sas-actions {
margin: 5px 0;
}
}