463 lines
13 KiB
CSS
463 lines
13 KiB
CSS
/* AmRiCal Default Style for first calendar on page
|
|
This file should have been copied to a css folder in your uploads directory. It may safely be edited in the uploads folder and will not be overwritten by upgrades,
|
|
You can always refer back to the default css in the plugin folder for the latest suggested or example css.
|
|
*/
|
|
|
|
/* TwentyTwelve widget compatibility*/
|
|
.widget .ical .enddate,
|
|
.widget .ical .eventdate,
|
|
.widget .ical .endtime,
|
|
.widget .ical .starttime {
|
|
color: #AAAAAA;
|
|
line-height: 1.84615;
|
|
font-size: 0.785714rem;
|
|
}
|
|
/*----------------------------------------------- */
|
|
/* html5 code */
|
|
#events_wrap article,
|
|
#events_wrap article span.summary,
|
|
#events_wrap article span.description,
|
|
#events_wrap aside,
|
|
#events_wrap figure,
|
|
#events_wrap footer,
|
|
#events_wrap header,
|
|
#events_wrap hgroup,
|
|
#events_wrap menu,
|
|
#events_wrap nav,
|
|
#events_wrap section {
|
|
/* for browsers that are not up to html5 yet, except will not work on IE */
|
|
display: block;
|
|
}
|
|
/* html5 code */
|
|
#events_wrap article,
|
|
#events_wrap article span.description,
|
|
#events_wrap aside,
|
|
#events_wrap figure,
|
|
#events_wrap section {
|
|
/* for browsers that are not up to html5 yet, except will not work on IE */
|
|
margin: 10px 0 10px 0;
|
|
}
|
|
#events_wrap article {
|
|
margin-bottom: 20px;
|
|
}
|
|
/* Optional - for grouping collapseability */
|
|
.master th.level0 { font-weight: bold; background-color: #ddd; }
|
|
.master th.group .termdesc { font-weight: normal; text-transform: none; }
|
|
|
|
#calendar_toggle {
|
|
float: right;
|
|
}
|
|
|
|
tr.level0 {
|
|
background: #ccc;
|
|
}
|
|
|
|
/*----------------------------------------------- */
|
|
#events_wrap {
|
|
word-wrap: break-word; /* make sure that any very long words do not cause overflow*/
|
|
}
|
|
.event abbr,
|
|
#events_wrap abbr {
|
|
/* do not show the hcalendar abbr underline - the abbr is confusing especially since the format of the date is ISO8601, not human friendly
|
|
However is required if we want hcal functionality */
|
|
border-bottom: none;
|
|
}
|
|
#events_wrap .largecalendar tbody td { /* wordpress default too big */
|
|
font-size: small;
|
|
}
|
|
#events_wrap thead th {
|
|
text-align: center;
|
|
}
|
|
#events_wrap .largecalendar thead th,
|
|
#events_wrap .largecalendar tbody td {
|
|
padding: 3px 0 2px; /* the 0 so that the multi-days line up */
|
|
}
|
|
|
|
#events_wrap .largecalendar tbody td {
|
|
/* padding: 3px 3px 2px; */ /*- no for multi day - need them next to each other */
|
|
}
|
|
#events_wrap .largecalendar tbody td .day {
|
|
padding: 0 3px 0;
|
|
}
|
|
#events_wrap .largecalendar tbody td .event {
|
|
padding: 0 3px;
|
|
}
|
|
#events_wrap table.largecalendar td {
|
|
width: 100px; /* the min width*/
|
|
}
|
|
#events_wrap table.largecalendar {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
/* width: 650px; */ /* if you wanted to fix to a certain size, - or use margins instead*/
|
|
}
|
|
#events_wrap table a { /* generally in the table , better not to have these */
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*----------------------------------------------- */
|
|
/* Calendar Widget - styles to look like the post calendar widget */
|
|
/* Note this works for 2011 theme to override default table settings and achieve compatibility with the wpcalendar widget .
|
|
You need to find out what works for your theme */
|
|
#events_wrap .smallcalendar,
|
|
#multismallcalendar .smallcalendar {
|
|
border-collapse: separate;
|
|
border-spacing: 0px;
|
|
}
|
|
|
|
/* for some reason firefox does not apply css if we use events*/
|
|
#multismallcalendar tr.dayheaders th,
|
|
#multismallcalendar tr.week th,
|
|
#multismallcalendar tr.week td,
|
|
#multismallcalendar td.pad,
|
|
#events_wrap .smallcalendar td ,
|
|
#events_wrap .smallcalendar th ,
|
|
#events_wrap .smallcalendar td div,
|
|
#events_wrap1 .smallcalendar td ,/* for small plus agenda*/
|
|
#events_wrap1 .smallcalendar th ,
|
|
#events_wrap1 .smallcalendar td div {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
border: 0px none;
|
|
outline: 0px none;
|
|
}
|
|
|
|
#multismallcalendar a.daylink,
|
|
#multismallcalendar a,
|
|
#events_wrap .smallcalendar a.daylink {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/*-----------------------------------boxcalendar days------------ */
|
|
#multismallcalendar td,
|
|
#multismallcalendar th,
|
|
#events_wrap td {
|
|
vertical-align: top;
|
|
}
|
|
.smallcalendar td.day1,
|
|
.smallcalendar td.day2,
|
|
.smallcalendar td.day3,
|
|
.smallcalendar td.day4,
|
|
.smallcalendar td.day5 {
|
|
/* background: #f5f5f5; */ /* if you want the days of the week to be styled*/
|
|
}
|
|
#events_wrap table td.day6,
|
|
table.ical td.day7 { /* to style the weekend */
|
|
/* background: #eee; */
|
|
}
|
|
#events_wrap table td.pad {
|
|
/* background: #fefefe; */ /* if you wanted the padding cells to show - else let background come through */
|
|
}
|
|
|
|
/* highlight which day we are hovering over */
|
|
#events_wrap .smallcalendar td.hasevents a:hover {
|
|
color: #fff;
|
|
}
|
|
/* highlight which day we are hovering over */
|
|
#events_wrap .largecalendar td.hasevents:hover .day{
|
|
background: #777;
|
|
color: #fff;
|
|
}
|
|
#events_wrap .largecalendar td.hasevents:hover .day a{
|
|
color: #fff;
|
|
}
|
|
/*#events_wrap table.largecalendar td.today a,
|
|
table.smallcalendar td.selected a,
|
|
table.smallcalendar td.today a {
|
|
color: #fff;
|
|
}*/
|
|
table.largecalendar td.today a {
|
|
color: #111;
|
|
}
|
|
table.smallcalendar td.hasevents{
|
|
/* background: green; */
|
|
/* enter a colour code here to have days with events stand out - maybe for availability */
|
|
}
|
|
table.smallcalendar,
|
|
#events_wrap table.smallcalendar {
|
|
max-width: 200px;
|
|
border: 0;
|
|
margin: 0 auto;
|
|
}
|
|
#events_wrap table.smallcalendar tbody td {
|
|
/* background: #f5f5f5; */
|
|
/* border: 1px solid #fff; */
|
|
/* padding: 3px 0 2px; dont use - doesn't look like wp calendar then*/
|
|
/* text-align: center; */
|
|
}
|
|
|
|
#events_wrap table.largecalendar tbody td {
|
|
height:80px; /* it will expand if necessary */
|
|
}
|
|
|
|
#events_wrap table tbody td .event { /* use something like this if you want to force each event to take one line only */
|
|
/* overflow: hidden;
|
|
height: 20px; /* need a height for the overflow to work and still to keep table flexible ? */
|
|
}
|
|
#events_wrap table tbody td .firstday,
|
|
#events_wrap table tbody td .middleday,
|
|
#events_wrap table tbody td .lastday { /* Multi day styling */
|
|
background: #eee;
|
|
}
|
|
/* must be after multiday */
|
|
#events_wrap .smallcalendar td.hasevents:hover,
|
|
#events_wrap table.largecalendar td.today ,
|
|
#multismallcalendar td.today ,
|
|
table.smallcalendar td.selected ,
|
|
table.smallcalendar td.today {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* to override Multi day styling */
|
|
#events_wrap table tbody td.today .firstday,
|
|
#events_wrap table tbody td.today .middleday,
|
|
#events_wrap table tbody td.today .lastday
|
|
#events_wrap table tbody td.today .firstday,
|
|
#events_wrap table tbody td.today .middleday,
|
|
#events_wrap table tbody td.today .lastday {
|
|
background: #777;
|
|
}
|
|
|
|
/* unfortunately we need to use divs to hide the details if we want to allow html in details and keep html valid */
|
|
/* ------------------------------ In Box Calendar-- hide the details until we want them */
|
|
#events_wrap table.ical td .event div.details2{ /* hide column 2 */
|
|
display: none;
|
|
}
|
|
#events_wrap table.ical .event:hover div.details2 {
|
|
color:#333333;
|
|
background:#ffffff;
|
|
display:block;
|
|
position:absolute;
|
|
margin-top: 12px;
|
|
margin-left: 50px;
|
|
padding:10px;
|
|
width:200px;
|
|
z-index:100;
|
|
border: 1px solid #000000;
|
|
overflow: hidden; /* v 4.0.12 */
|
|
}
|
|
#events_wrap table.ical .event:hover div.details2 {
|
|
display: block;
|
|
}
|
|
#events_wrap table.ical .event:hover div.details2 img {
|
|
width: 200px; /* make any images smaller */
|
|
}
|
|
#events_wrap table.ical td.endweek .event:hover div.details2 {
|
|
/* shift the last column right side over a bit so it fits on the page*/
|
|
margin-left: -110px;
|
|
}
|
|
|
|
/*-------------------------------------------calendar_navigation */
|
|
|
|
.calendar_navigation {
|
|
clear: both;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: hidden;
|
|
}
|
|
#icallookmore a#icalalookmore,
|
|
.calendar_navigation .nextweek,
|
|
.calendar_navigation .nextmonth {
|
|
text-align: right;
|
|
float:right;
|
|
}
|
|
#icallookmore a#icalalookprev,
|
|
.calendar_navigation .prevweek,
|
|
.calendar_navigation .prevmonth {
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
.calendar_navigation .prevweek,
|
|
.calendar_navigation .nextweek {
|
|
font-size: XX-large;
|
|
}
|
|
|
|
.calendar_navigation form {
|
|
/* display: inline; */
|
|
padding: 0 8px;
|
|
text-align: center;
|
|
margin: auto;
|
|
|
|
}
|
|
.calendar_navigation input,
|
|
.calendar_navigation select{
|
|
margin: 0;
|
|
line-height: 14px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.calendar_navigation a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*-------------------------------------------calendar_views */
|
|
#calendar_views {
|
|
float:right;
|
|
padding-left: 5px;
|
|
}
|
|
#calendar_views a {
|
|
text-decoration: none;
|
|
}
|
|
/* -------------------------------------------------if you have a bunch of small calendars */
|
|
#multismallcalendar {
|
|
/* margin: 0 auto;
|
|
text-align: center; */
|
|
}
|
|
#multismallcalendar table {
|
|
padding: 0;
|
|
float: left; /* chrome browser will not float - why?? */
|
|
/*width: 32%; */
|
|
max-width: 200px;
|
|
min-width: 150px;
|
|
margin:2%;
|
|
text-align: center;
|
|
table-layout: fixed;
|
|
font-size: small;
|
|
}
|
|
#multismallcalendar .day {
|
|
text-align: center;
|
|
}
|
|
#multismallcalendar caption,
|
|
#multismallcalendar tr th,
|
|
#multismallcalendar tr td {
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
/*----------------------------------------weeks calendar */
|
|
#events_wrap table.weekscalendar caption {
|
|
/* text-align: left; */
|
|
}
|
|
#events_wrap .weekscalendar tr.caption {
|
|
background: #eee; /* do not normally want to do this, but looks shite in 2011 otherwise*/
|
|
}
|
|
#events_wrap .weekscalendar th,
|
|
#events_wrap .weekscalendar td {
|
|
width: 14%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#events_wrap .weekscalendar td div.event {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
/*----------------------------------------ics calendar properties */
|
|
.icalprop,
|
|
#events_wrap .icalprop,
|
|
#multismallcalendar .icalprop {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.icalprop td,
|
|
#events_wrap .icalprop td,
|
|
#multismallcalendar .icalprop td {
|
|
border: 0;
|
|
text-align: left;
|
|
padding: 0;
|
|
}
|
|
|
|
/* -------------------------------images can look strange in some themes -------------------------------*/
|
|
#events_wrap img {
|
|
border: none !important;
|
|
vertical-align: text-bottom;
|
|
}
|
|
#events_wrap .vevent { /*--/ helps */
|
|
clear: right;
|
|
}
|
|
/*------------------------------if event posts have large images in the content - can make the table too wide -------------- */
|
|
#events_wrap table img {
|
|
max-width: 400px;
|
|
}
|
|
/* ------------------------------- the bling icons -------------------------------*/
|
|
.amr-bling { /* float our little icons to the right */
|
|
float: right;
|
|
padding:0;
|
|
margin: 0; /* required where sometimes they don't line up nicely if limited text */
|
|
font-size: small;
|
|
}
|
|
.amr-bling img {
|
|
/* padding: 0 0 0 0.5em; */
|
|
}
|
|
/* -------------------------------------------------- for semi paginate ------------------------------------------------------- */
|
|
#icalnavs {
|
|
width: 250px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
margin: 0 auto;
|
|
font-size:small;
|
|
}
|
|
.icalnav { vertical-align:middle;}
|
|
.icalnav a { text-decoration: none; color: #ADADAD;}
|
|
.icalnav a.symbol { font-size:large; }
|
|
.icalnavs:hover { background-color: #ffffff;}
|
|
.icalnav a:hover { color: #000000;}
|
|
.add-new-event {display: block; clear:both;}
|
|
|
|
/* for credits if shown - keep it low key ------------------------------------------------------- */
|
|
.amrical_credit,.amrical_credit a,.amrical_credit a:visited {
|
|
font-size:x-small;
|
|
color: #ADADAD;
|
|
font-style: italic;
|
|
vertical-align: middle;
|
|
}
|
|
.amrical_credit a:hover {
|
|
font-size: x-small;
|
|
font-style: italic;
|
|
color: #000000;
|
|
}
|
|
/* ---- ---------------------------------------------- to make large images okay */
|
|
.eventinfo ul li {
|
|
clear: both;
|
|
}
|
|
/* ---------------------------------------------------OPTIONAL --------------*/
|
|
|
|
/* #events_wrap .largecalendar tbody td div.event { /* use this if you want to force each box to be a fixed size - day div required because one cannot force a td height */
|
|
/* line-height: 26px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
} */
|
|
table.largecalendar tbody td:hover div.day { /* and then use this to see the day box on hover - confusing with too manu hover's though, so maybe do not use desc hover then */
|
|
/* position: absolute;
|
|
border: 1px solid #000000;
|
|
padding: 10px;
|
|
background: #eee;
|
|
overflow: visible;
|
|
z-index:100; */
|
|
}
|
|
|
|
#events_wrap .history {
|
|
/* to style past events */
|
|
}
|
|
/* ------------------------------------------------------ more optional catgeory or tag styling , by name or id (using tid)
|
|
#events_wrap .eventscat,
|
|
#events_wrap table tr.eventscat td.amrcol1 {
|
|
border-left: solid 5px green;
|
|
}
|
|
#events_wrap table tr.t1 td.amrcol1 {
|
|
border-left: solid 5px red;
|
|
}
|
|
*/
|
|
/*----------------------------------------------- */
|
|
/* for multiple calendars, to check what events come from where */
|
|
|
|
.col1, .amrcol1 { /* the first cell */
|
|
padding-left: 2px;
|
|
}
|
|
.cal0 {
|
|
border-left: medium solid transparent; /*default colour*/
|
|
}
|
|
|
|
.cal1 {
|
|
border-left: medium solid LightGray;
|
|
}
|
|
|
|
.cal2 {
|
|
border-left: medium solid Gray;
|
|
}
|
|
.cal3 {
|
|
border-left: medium solid DarkGray;
|
|
}
|