381 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			381 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /**
 | |
|  * @package    JEM
 | |
|  * @copyright  (C) 2013-2024 joomlaeventmanager.net
 | |
|  * @copyright  (C) 2005-2009 Christoph Lukes
 | |
|  * @license    https://www.gnu.org/licenses/gpl-3.0 GNU/GPL
 | |
|  */
 | |
| 
 | |
| .jem_calendar th,
 | |
| .jem_calendar td {
 | |
|     padding: 0;
 | |
|     margin: 0;
 | |
| }
 | |
| 
 | |
| table.month, table.week {
 | |
|     background-color: #FFFFFF;
 | |
|     width: 100%;
 | |
| }
 | |
| 
 | |
| @media screen and (min-width: 801px)  {
 | |
| table.month, table.week {
 | |
|     border: 1px solid #000;
 | |
|     }
 | |
| }
 | |
| 
 | |
| table.month {
 | |
|     table-layout: fixed;
 | |
| }
 | |
| 
 | |
| .monthname {
 | |
|     color: #355881;
 | |
|     font-family: Geneva, Verdana, Arial, sans-serif;
 | |
|     font-size: 18px;
 | |
|     font-weight: bold;
 | |
|     text-align: center;
 | |
| }
 | |
| 
 | |
| .daynamesRow,
 | |
| .daynamesRow td {
 | |
|     background-color: #455678;
 | |
|     height: 20px;
 | |
|     text-align: center;
 | |
|     vertical-align: middle;
 | |
| }
 | |
| 
 | |
| .dayname {
 | |
|     color: #FFFFFF; /* calendarweek: #667171 */
 | |
|     font-family: Geneva, Verdana, Arial, sans-serif;
 | |
|     font-size: 10px;
 | |
|     font-weight: bold;
 | |
| }
 | |
| 
 | |
| .daysRow {
 | |
|     color: #433D27;
 | |
|     font-family: Arial, Geneva, Verdana, sans-serif;
 | |
|     font-size: 10px;
 | |
|     height: 88px;
 | |
|     text-align: left;
 | |
|     vertical-align: top;
 | |
| }
 | |
| 
 | |
| .daynum {
 | |
|     background-color: #A2A3AE;
 | |
|     color: #FBFCEF;
 | |
|     font-family: Geneva, Verdana, Arial, sans-serif;
 | |
|     font-size: 11px;
 | |
|     font-weight: bold;
 | |
|     margin: 0px;
 | |
|     padding: 2px;
 | |
|     text-align: left;
 | |
|     vertical-align: top;
 | |
|     border-top: 1px solid black;
 | |
|     border-bottom: 1px solid black;
 | |
| }
 | |
| 
 | |
| .selectedday .daynum {
 | |
|     background-color: #31528E;
 | |
| }
 | |
| 
 | |
| .nomonthday {
 | |
|     background-color: #EEEEEE;
 | |
|     height: 88px;
 | |
| }
 | |
| 
 | |
| div#jem .monthnavigation a {text-decoration: none;}
 | |
| 
 | |
| .eventcontent,
 | |
| div[id^=catz],
 | |
| div[id^='venuez'],
 | |
| div[id^='scat'] {
 | |
|     border: none;
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
| }
 | |
| 
 | |
| .eventcontentinner {
 | |
|     background-color: yellow;
 | |
|     border: 1px solid grey;
 | |
|     border-radius: 2px;
 | |
|     padding: 5px;
 | |
|     margin: 2px;
 | |
|     overflow: hidden;
 | |
|     /* use this only if you really want a break at any position
 | |
|      -ms-word-break: break-all;
 | |
|          word-break: break-all;
 | |
|      */
 | |
|     /* Non standard for webkit */
 | |
|     word-break: break-word;
 | |
|     hyphens: auto;
 | |
| }
 | |
| 
 | |
| .borderfeatured {
 | |
|     border-width: 3px;
 | |
|     border-style: solid;
 | |
| }
 | |
| 
 | |
| div#jem .eventcontentinner a {
 | |
|     color: #333;
 | |
|     /* text-decoration:none; */
 | |
| }
 | |
| 
 | |
| /* *** CALENDAR WEEK ADDITIONS START *** */
 | |
| div#jem a .eventcontenttop {
 | |
|     text-decoration: none;
 | |
|     color: black;
 | |
| }
 | |
| 
 | |
| div#jem .eventcontenttop {
 | |
|     border-bottom: solid 1px black;
 | |
|     height: 16px;
 | |
|     min-height: 16px;
 | |
|     text-align: left;
 | |
|     padding-left: 4px;
 | |
|     padding-top: 2px;
 | |
|     top: 60px;
 | |
| }
 | |
| 
 | |
| div#jem .eventtitle {
 | |
|     text-align: left;
 | |
| }
 | |
| 
 | |
| div#jem .rowcolor {
 | |
|     border-top: solid 1px black;
 | |
|     height: 10px;
 | |
|     text-align: right;
 | |
| }
 | |
| 
 | |
| div#jem .eventtitle {
 | |
|     min-height: 30px;
 | |
|     word-wrap: break-word;
 | |
|     margin-right: 2px;
 | |
|     margin-left: 2px;
 | |
|     margin-top: 2px;
 | |
| }
 | |
| 
 | |
| /* *** CALENDAR WEEK ADDITIONS END *** */
 | |
| 
 | |
| .eventandmore {
 | |
|     background-color: yellow;
 | |
|     margin: 1px;
 | |
|     overflow: hidden;
 | |
|     padding: 1px;
 | |
|     border: 1px solid grey;
 | |
|     border-radius: 2px;
 | |
|     padding: 5px;
 | |
|     margin: 2px;
 | |
| }
 | |
| 
 | |
| /* for the tooltip */
 | |
| .custom-tip {
 | |
|     color: #000;
 | |
|     width: 200px;
 | |
|     z-index: 13000;
 | |
|     border: 1px solid lightgrey;
 | |
| }
 | |
| 
 | |
| .custom-title {
 | |
|     font-weight: bold;
 | |
|     font-size: 11px;
 | |
|     margin: 10px;
 | |
|     color: white;
 | |
|     padding: 2px 5px 1px;
 | |
|     background: #7598FF;
 | |
|     text-align: left;
 | |
| }
 | |
| 
 | |
| .custom-text {
 | |
|     font-size: 11px;
 | |
|     padding: 2px 2px 2px;
 | |
|     background: white;
 | |
| }
 | |
| 
 | |
| .custom-tip .eventName {
 | |
|     text-align: left;
 | |
|     background: lightgrey;
 | |
|     margin: 5px 0px 5px;
 | |
| }
 | |
| 
 | |
| .custom-tip .location {
 | |
|     text-align: left;
 | |
| }
 | |
| 
 | |
| .custom-tip .location .legend {
 | |
|     font-weight: bold;
 | |
| }
 | |
| 
 | |
| .colorpic {
 | |
|     padding: 0 4px;
 | |
|     margin: 0 2px;
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend {
 | |
|     clear: both;
 | |
|     margin-top: 4px;
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend .calendarButtons {
 | |
|     margin-top: 8px;
 | |
|     margin-bottom: 4px;
 | |
|     height: 50px;
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend .calendarButtonsToggle {
 | |
|     display: inline-flex;
 | |
|     vertical-align: middle;
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend .calendarLegends {
 | |
| 
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend .eventCat {
 | |
|     float: left;
 | |
|     cursor: pointer;
 | |
|     box-shadow: 2px 2px 2px #888888;
 | |
|     padding: 2px 10px;
 | |
|     border: 1px solid black;
 | |
|     margin-right: 5px;
 | |
|     margin-bottom: 5px;
 | |
|     line-height: 40px;
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend .legendb {
 | |
|     display: inline-block;
 | |
|     background-color: green;
 | |
|     line-height: 10px;
 | |
|     margin-right: 4px;
 | |
| }
 | |
| 
 | |
| #jlcalendarlegend .eventCat.catoff {
 | |
|     color: lightgrey;
 | |
|     font-style: italic;
 | |
| }
 | |
| 
 | |
| div#buttonshowall,
 | |
| div#buttonhideall {
 | |
|     float: left;
 | |
|     cursor: pointer;
 | |
|     border: 1px solid black;
 | |
|     width: auto;
 | |
| }
 | |
| 
 | |
| .daynum a {
 | |
|     color: #FBFCEF !important;
 | |
|     text-decoration: none;
 | |
|     background-color: inherit !important;
 | |
| }
 | |
| 
 | |
| .today .daynum a {
 | |
|     color: #FFFFFF;
 | |
|     background-color: red;
 | |
|     /* calendarweek: vertical-align: top; */
 | |
| }
 | |
| 
 | |
| div#jem td {
 | |
|     border: 1px dotted black;
 | |
| }
 | |
| 
 | |
| /* *** CALENDAR WEEK ADDITIONS START *** */
 | |
| 
 | |
| /* set week column to a minimal width */
 | |
| #jem table.week .weeknumtitle,
 | |
| #jem table.week .weeknum {
 | |
|     padding-left: 4px;
 | |
|     padding-right: 4px;
 | |
|     width: 1%;
 | |
| }
 | |
| 
 | |
| .weeknumtitle {
 | |
|     text-align: center;
 | |
|     font-size: 10px;
 | |
|     font-weight: bold;
 | |
|     color: #ffffff; /* calendarweek: #667171 */
 | |
|     border-style: none;
 | |
|     border-width: 1px;
 | |
|     padding: 2px 3px;
 | |
| }
 | |
| 
 | |
| .weeknum {
 | |
|     text-align: center;
 | |
|     /*	vertical-align:middle;*/
 | |
|     font-size: 12px;
 | |
|     font-weight: bold;
 | |
|     padding: 2px 3px;
 | |
|     color: #CD5C5C;
 | |
|     background-color: #FAEBD7;
 | |
| }
 | |
| 
 | |
| .week {
 | |
|     border-style: none;
 | |
|     background-color: #EEDFCC;
 | |
|     text-align: center;
 | |
| }
 | |
| 
 | |
| .monthweek {
 | |
|     text-align: left;
 | |
|     padding: 3px;
 | |
|     font-size: 10px;
 | |
|     font-weight: bold;
 | |
|     color: #667171;
 | |
|     border-style: solid;
 | |
|     border-width: 1px
 | |
| }
 | |
| 
 | |
| .monthday {
 | |
|     text-align: center;
 | |
|     vertical-align: top;
 | |
|     font-size: 11px;
 | |
|     font-weight: bold;
 | |
|     background-color: #ffffff;
 | |
|     color: #000000;
 | |
|     height: 90px;
 | |
|     width: 90px;
 | |
| }
 | |
| 
 | |
| .saturday, .sunday {
 | |
|     background-color: #D4D4D4;
 | |
|     color: #667171;
 | |
| }
 | |
| 
 | |
| .sunday a, .saturday a {
 | |
|     color: #667171;
 | |
| }
 | |
| 
 | |
| .today {
 | |
|     border-width: 1px;
 | |
|     border-style: solid;
 | |
|     background-color: #BBCCFF;
 | |
|     color: #000000;
 | |
| }
 | |
| 
 | |
| .selectedday {
 | |
|     border-width: 1px;
 | |
|     border-style: outset;
 | |
|     background-color: #ffffff;
 | |
| }
 | |
| 
 | |
| /* *** CALENDAR WEEK ADDITIONS END *** */
 | |
| 
 | |
| 
 | |
| .calendarButton {
 | |
|     /* 	background-image: linear-gradient(top, rgba(230,230,230,1) 0%,rgba(200,200,200,1) 100%);
 | |
|         box-shadow: 0px 0px 2px 0px rgba(0,0,0,1);
 | |
|         border: solid 2px rgba(31,31,31,1);
 | |
|         border-radius: 6px;
 | |
|         width: 48px;
 | |
|         height: 20px;
 | |
|         margin: 1px;
 | |
|         padding: 1px; */
 | |
|     display: inline-block;
 | |
|     text-align: center;
 | |
|     color: rgba(0, 0, 0, 1);
 | |
|     margin-right: 5px;
 | |
|     box-shadow: 2px 2px 2px #888888;
 | |
| }
 | |
| 
 | |
| .calendarButton:hover {
 | |
| }
 | |
| 
 | |
| .calendarButton:active {
 | |
| }
 |