Simple(r) widget styling – sample css

For what it’s worth, a stab at simpler grid calendar widget styling.

You can see it (at least for a week or two) here:

/******* Simple Calendar Plugin widget grid styling ***********/
/*
/* Original stylesheets for popup: qtip.min.css
/*
/* .simcal-events-dots is the bottom bar each row w/ dots */
/* .simcal-no-events is a date without events */
/* .simcal-day-has-events is a date with events */
/* Still need to style qtips, original css is qtip.min.css */

/* The table body background */
#gce_widget-2
{
color: #666;
font-size: 12px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* Get rid of extra space below widget */
#gce_widget-2 table {
margin-bottom: 0px;
}

/* Default table cell styling. */
#gce_widget-2 tbody td
{
height: 30px;
color: #666;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
padding: 8px;
text-align: center;
font-weight: bold;
border: 1px solid;
border-color: #fff #bbbbbb #bbbbbb #fff;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dedede));
background: -moz-linear-gradient(top, #ededed, #dedede);
}

/* Transparent background for day numbers. */
/* Else event & today special background colors won’t show. */
#gce_widget-2 .simcal-default-calendar-grid .simcal-day-number {
background: transparent;
}

/* No cell borders for blank leading & trailing calendar space */
#gce_widget-2 tbody td.simcal-day.simcal-day-void {
border: 0;
background: #f5f5f5;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
background: -moz-linear-gradient(top, #f5f5f5, #ececec);
}

/* Hide dots indicated number of events for a day */
#gce_widget-2 .simcal-default-calendar-grid .simcal-events-dots b {
font-size: 1px;
color: transparent !important;
}

/* Overlay invisible dots on top of day number for hover. */
#gce_widget-2 .simcal-default-calendar-grid .simcal-events-dots
{
position: relative;
z-index: 50000;
height: 1px ! important;
margin-top: -25px; ! important;
}

#gce_widget-2 .simcal-default-calendar-grid .simcal-no-events {
display: none; /* Otherwise weird space below cell */
}

#gce_widget-2 .simcal-day-label.simcal-day-number {
height: 30px; /* to display event cell color */
z-index: 20; /* z-index lower than the dots. */
}

/* Center & align the day numbers within their cells. */
#gce_widget-2 .simcal-default-calendar-grid .simcal-day-number {
padding: 8px 4px 0px 4px; /* top-right-bottom-left */
text-align: center;
}

/* Different style for today */
#gce_widget-2 td.simcal-today.simcal-present.simcal-day > div > span.simcal-day-label.simcal-day-number {
background-color: transparent !important;
color: #99001C !important; /* Dark red */
font-weight: 600 !important;
font-size: 120% !important;
margin-top: -2px !important; /* compensate for bigger font */
}

/* No border for today, else number slightly misaligned */
#gce_widget-2 .simcal-default-calendar-grid .simcal-day> div {
border: 0 !important;
}

/* Hide the widget calendar title, it speaks for itself */
#gce_widget-2 h3.widget-title {
display: none;
}

/* Shorten row heights of month header & days abbreviations. */
#gce_widget-2 table thead tr th.simcal-nav,
#gce_widget-2 table thead tr th.simcal-week-day {
padding-top: 4px !important;
padding-bottom: 4px !important;
}

/* Keep nav arrows from falling off header area */
#gce_widget-2 table thead tr th.simcal-nav.simcal-prev-wrapper,
#gce_widget-2 table thead tr th.simcal-nav.simcal-next-wrapper
{
padding-left: 0px !important;
padding-right: 0px !important;
}

/* Different header background color for month & nav arrows */
#gce_widget-2 table thead tr th.simcal-nav {
background: #398235;
background: -webkit-gradient(linear, left top, left bottom,
from(#398235), to(#005200));
background: -moz-linear-gradient(top, #398235, #005200);
}

/* Make the nav arrows a little smaller. */
#gce_widget-2 .simcal-icon-left, #gce_widget-2 .simcal-icon-right {
color: white;
}

/* Font styling for “current” month header */
#gce_widget-2 .simcal-current h3 {
font-size: 1.4em; /* Smaller, fits on 1 row */
color: white;
}

/************ Done styline Simple Calendar grid widget ******************/

https://ww.wp.xz.cn/plugins/google-calendar-events/