Offline
Please use the search function. At the moment questions are being asked time and again that have probably already been answered a hundred times by the search at the top right. The problem is that there are 50 solutions to a problem and newcomers are getting more and more confused.
maybe that will help you.
@xTITUS-MAXIMUSx said in Change background image based on time of day:
Cool! how would one do that? Still a noob.
Install the module
Enter the time from when to when night is in the config.
Enter your background in the custom.css
.morning {
background: blue;
}
.evening {
background: black;
}
You can actually schedule all CSS entries in the module, including the background.
@Piranha1605 said in Config for a simple clean montly calendar:
.CX2 .event[data-calendar-name=“Google”]
Enter the name of your calendar here
Here is a sample for you.
/**
* module.width_height
*/
.module.MMM-CalendarExt2 {
height: 600px;
}
/**
* module.color_border_shadow
*/
.module.MMM-CalendarExt2 {
background-color:#2a313b;
border-radius:8px;
padding:8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}
/**
* MMM-CalendarExt2.
*/
.CX2 .slot .event{
background: #1f242c;
}
.CX2 .agenda .eventSub {
display:none;
}
.CX2 .slot .slotHeader{
background: #1f242c;
border: 1px solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
}
.CX2 .today .slotHeader * {
color: white;
}
.CX2 .event.fullday {
background: #1f242c;
border-radius:0px;
}
.CX2 .event[data-calendar-name="Google"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
min-height:80px;
}
.CX2 .event[data-calendar-name="Karate"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
min-height:80px;
}
.CX2 .event[data-calendar-name="Abfall"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
min-height:80px;
}
.CX2 .event[data-calendar-name="Arbeit"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
min-height:80px;
}
.CX2 .event[data-calendar-name="Feiertage"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
min-height:80px;
}
/**
* Iconsize.
*/
.CX2 .event .eventIcon {
min-width: calc(var(--font-size) * 2,5);
min-height: calc(var(--font-size) * 2,5);
margin-right:5px;
float:left;
}
.CX2 .period .eventIcon {
min-width: calc(var(--font-size) * 2,5);
min-height: calc(var(--font-size) * 2,5);
margin-right:5px;
float:left;
}
.CX2 .weekSlot .eventIcon {
min-width: var(--font-size);
min-height: var(--font-size);
margin-right:3px;
display:block;
padding-bottom:3px;
}
Here are some templates for all newbies.
1.Black boxes
CSS
html {
cursor: default;
overflow: hidden;
background: #2c2c2d;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin-bottom: -10px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #dbdcdf;
background: transparent;
}
header {
background: transparent;
padding: 0.5rem;
text-align: center;
border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
color: #dbdcdf;
font-size: 20px;
}
.dimmed {
color: #dbdcdf;
}
.normal {
color: #dbdcdf;
}
.bright {
color: #dbdcdf;
}
/**
* module.color_border_shadow
*/
.module.clock,
.module.calendar,
.module.newsfeed,
.module.weatherforecast,
.module.currentweather,
.module.compliments {
padding:8px;
border-radius: 10px;
box-shadow: 0 2em 6em #000;
background: transparent;
}
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
color: #dbdcdf;
padding: 15px;
}
.clock .date {
background: transparent;
padding: 5px;
text-align: center;
border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
color: #dbdcdf;
font-size: 20px;
}
/**
* module.width_height
*/
.module.calendar {
width:450px;
height: 320px;
}
.module.weatherforecast {
width:400px;
height: 220px;
}
.module.currentweather {
height: 180px;
width:400px;
text-align: center;
}
2.Material Design
CSS
html {
cursor: default;
overflow: hidden;
background: #e9e9e9;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin-bottom: -10px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #666666;
background: transparent;
}
header {
background: transparent;
padding: 0.5rem;
text-align: center;
font-size: 20px;
color: #ed2553;
border-bottom: 2px solid #e3e3e3;
}
.dimmed {
color: #666666;
}
.normal {
color: #666666;
}
.bright {
color: #666666;
}
/**
* module.color_border_shadow
*/
.module.clock,
.module.calendar,
.module.newsfeed,
.module.weatherforecast,
.module.currentweather,
.module.compliments {
padding:8px;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background: #f2f2f2;
}
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
color: #666666;
padding: 15px;
}
.clock .date {
background: transparent;
padding: 5px;
text-align: center;
font-size: 20px;
color: #ed2553;
border-bottom: 2px solid #e3e3e3;
}
/**
* module.width_height
*/
.module.calendar {
width:450px;
height: 320px;
}
.module.weatherforecast {
width:400px;
height: 220px;
}
.module.currentweather {
height: 180px;
width:400px;
text-align: center;
}
3.Neumorphism
CSS
html {
cursor: default;
overflow: hidden;
background: #545454;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin-bottom: -10px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #FFFFFF;
background: transparent;
}
header {
background: transparent;
padding: 10px;
text-align: center;
font-size: 20px;
color: #FFFFFF;
border-radius: 23px;
box-shadow: inset 11px 11px 16px #3e3e3e,
inset -11px -11px 16px #6a6a6a;
}
.dimmed {
color: #FFFFFF;
}
.normal {
color: #FFFFFF;
}
.bright {
color: #FFFFFF;
}
/**
* module.color_border_shadow
*/
.module.clock,
.module.calendar,
.module.newsfeed,
.module.weatherforecast,
.module.currentweather,
.module.compliments {
padding:8px;
border-radius: 23px;
background: #545454;
box-shadow: 11px 11px 16px #3e3e3e,
-11px -11px 16px #6a6a6a;
}
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
color: #FFFFFF;
padding: 15px;
}
.clock .date {
background: transparent;
padding: 2px;
text-align: center;
font-size: 20px;
color: #FFFFFF;
border-radius: 23px;
box-shadow: inset 11px 11px 16px #3e3e3e,
inset -11px -11px 16px #6a6a6a;
}
/**
* module.width_height
*/
.module.calendar {
width:450px;
height: 320px;
}
.module.weatherforecast {
width:400px;
height: 220px;
}
.module.currentweather {
height: 180px;
width:400px;
text-align: center;
}
4.Trending
CSS
html {
cursor: default;
overflow: hidden;
background: #7e94d8;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin-bottom: -10px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: #666666;
background: transparent;
}
header {
background: #9DD5FF;
padding: 8px;
text-align: center;
font-size: 20px;
color: #FFFFFF;
text-shadow: 0px 10px 20px #000000;
box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
border-radius: 10px;
}
.dimmed {
color: #FFFFFF;
}
.normal {
color: #FFFFFF;
}
.bright {
color: #FFFFFF;
}
/**
* module.color_border_shadow
*/
.module.clock,
.module.calendar,
.module.newsfeed,
.module.weatherforecast,
.module.currentweather,
.module.compliments {
padding:8px;
border-radius: 10px;
box-shadow: 0px 31px 35px 0px rgba(0, 0, 0, 0.38);
background: linear-gradient(159deg, #47455d 0%, #323045 97%);
}
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
color: #FFFFFF;
padding: 15px;
}
.clock .date {
background: #9DD5FF;
padding: 2px;
text-align: center;
font-size: 20px;
color: #FFFFFF;
text-shadow: 0px 10px 20px #000000;
box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
border-radius: 10px;
}
/**
* module.width_height
*/
.module.calendar {
width:450px;
height: 320px;
}
.module.weatherforecast {
width:400px;
height: 220px;
}
.module.currentweather {
height: 180px;
width:400px;
text-align: center;
}
5.Tron
CSS
html {
cursor: default;
overflow: hidden;
background: #000;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin-bottom: -10px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: rgba( 0, 150, 254, 1 );
background: transparent;
}
header {
background: transparent;
padding: 0.5rem;
text-align: center;
font-size: 20px;
color: rgba( 0, 150, 254, 1 );
text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
}
.dimmed {
color: rgba( 0, 150, 254, 1 );
}
.normal {
color: rgba( 0, 150, 254, 1 );
}
.bright {
color: rgba( 0, 150, 254, 1 );
}
/**
* module.color_border_shadow
*/
.module.clock,
.module.calendar,
.module.newsfeed,
.module.weatherforecast,
.module.currentweather,
.module.compliments {
padding:8px;
border-radius: 10px;
border-color: rgba( 0, 150, 254, 1 );
box-shadow: 0 0 25px 2.5px rgba( 0, 150, 254, .4 );
background: #000;
}
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
color: rgba( 0, 150, 254, 1 );
padding: 15px;
}
.clock .date {
background: transparent;
padding: 5px;
text-align: center;
border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
color: rgba( 0, 150, 254, 1 );
text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
font-size: 20px;
}
/**
* module.width_height
*/
.module.calendar {
width:450px;
height: 320px;
}
.module.weatherforecast {
width:400px;
height: 220px;
}
.module.currentweather {
height: 180px;
width:400px;
text-align: center;
}
6.White Boxes
CSS
html {
cursor: default;
overflow: hidden;
background: #c4c4c4;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin-bottom: -10px;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: black;
background: transparent;
}
header {
background: transparent;
padding: 0.5rem;
text-align: center;
border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
color: black;
font-size: 20px;
}
.dimmed {
color: black;
}
.normal {
color: black;
}
.bright {
color: black;
}
/**
* module.color_border_shadow
*/
.module.clock,
.module.calendar,
.module.newsfeed,
.module.weatherforecast,
.module.currentweather,
.module.compliments {
padding:8px;
border-radius: 10px;
box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
background: white;
}
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
color: black;
padding: 15px;
}
.clock .date {
background: transparent;
padding: 5px;
text-align: center;
border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
color: black;
font-size: 20px;
}
/**
* module.width_height
*/
.module.calendar {
width:450px;
height: 320px;
}
.module.weatherforecast {
width:400px;
height: 220px;
}
.module.currentweather {
height: 180px;
width:400px;
text-align: center;
}
I have to thank you, many of your contributions prevented me from throwing the MagicMirror project into the trash :)
Since I use my mirror on a monitor in the kitchen, I wrote a module that changes the entries in the Custom.css according
Entry in the config
{
module: "cssswitch",
config: {
evening_start: 21,
evening_stop: 6,
}
},
Example for the custom.css
/**
* morning style
*/
.morning {
background: #d4d4d4;
}
.morning .dimmed {
color: #2c3e50;
}
.morning .normal {
color: #2c3e50;
}
.morning .bright {
color: #2c3e50;
}
/**
* So that all modules have the same style
* insert new modules with.module.Modulname
* module.background-color_border_shadow
*/
.morning .module.clock,
.morning .module.calendar,
.morning .module.weatherforecast,
.morning .module.currentweather {
font-family: "Lato", sans-serif;
border: 1px solid #fff;
background-color: #f6f5f0;
padding: 1.5rem 2rem;
border-radius: 10px;
box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;
}
.morning .clock .time {
color: #fffff;
font-size: 100px;
text-align: center;
margin-top: 30px;
font-family: "Lato", sans-serif;
}
.morning .clock .date {
font-weight: bold;
color:#2c3e50;
font-size: 20px;
text-transform: uppercase;
font-family: "Lato", sans-serif;
text-align: center;
background-color:#d4d4d4;
box-shadow: inset 1px 1px 2.5px rgba(0, 0, 0, 0.25), inset -2.5px -2.5px 5px rgba(255, 255, 255, 0.3);
transition: all 0.2s ease-in-out;
padding: 0.25rem 0.25rem;
border-radius: 8px;
}
/**
* evening style
*/
.evening {
background: #151515;
}
.evening .dimmed {
color:#d4d4d4;
}
.evening .normal {
color:#d4d4d4;
}
.evening .bright {
color:#d4d4d4;
}
/**
* So that all modules have the same style
* insert new modules with.module.Modulname
* module.background-color_border_shadow
*/
.evening .module.clock,
.evening .module.calendar,
.evening .module.weatherforecast,
.evening .module.currentweather {
padding:8px;
background: #111;
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 8px;
box-shadow: inset 0 0 0 1px #272727;
z-index: 1;
font-family: "Lato", sans-serif;
}
@cyberphox said in Bright UI:
Is that Tileboard or something similar you are running for the menu on the left?
No is a css menu that runs in a website
@electros
As already described above, it is a website in which the MagicMirror only runs as an iFrame; the radio and the menu are not in the MagicMirror.
/* Magic Mirror Config Sample
*
* By Michael Teeuw http://michaelteeuw.nl
* MIT Licensed.
*
* For more information how you can configurate this file
* See https://github.com/MichMich/MagicMirror#configuration
*
*/
var config = {
address: "localhost", // Address to listen on, can be:
// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
// - another specific IPv4/6 to listen on a specific interface
// - "", "0.0.0.0", "::" to listen on any interface
// Default, when address config is left out, is "localhost"
port: 8080,
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
// or add a specific IPv4 of 192.168.1.5 :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
language: "de",
timeFormat: 24,
units: "metric",
// serverOnly: true/false/"local" ,
// local for armv6l processors, default
// starts serveronly and then starts chrome browser
// false, default for all NON-armv6l devices
// true, force serveronly mode, because you want to.. no UI on this device
modules: [
{
module: "alert",
},
{
module: "clock",
position: "top_left"
},
{
module: "currentweather",
position: "top_left",
config: {
location: "New York",
locationID: "2922511", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
appid: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
},
{
module: "weatherforecast",
position: "top_left",
config: {
location: "New York",
locationID: "2922511", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
appid: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
},
{
module: 'MMM-CalendarExt2',
config: {
scenes:[
{
name: "DEFAULT",
views: ["Overview Private"],
},
],
views:[
{
name: "Overview Private",
mode: "daily",
type: "row",
position: "bottom_bar",
slotCount: 5,
locale: "de",
hideOverflow: false,
filterPassedEvent: true,
calendars: ["Google","Karate","Abfall","Arbeit","Feiertage"],
},
],
calendars: [
{
name: "Google",
icon: "mdi-calendar-check-outline",
url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
},
{
name: "Karate",
icon: "mdi-karate",
url: "webcal://localhost:8080/config/Kalender/Karate.ics",
},
{
name: "Abfall",
icon: "mdi-trash-can-outline",
url: "webcal://localhost:8080/config/Kalender/Abfall.ics",
},
{
name: "Arbeit",
icon: "mdi-forklift",
url: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
},
{
name: "Feiertage",
icon: "mdi-grill-outline",
url: "webcal://localhost:8080/config/Kalender/feiertage_niedersachsen_2020.ics",
},
],
},
},
{
module: "MMM-News",
position: "top_right",
config: {
apiKey : "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
type: "vertical",
query : [
{
sources: "N-tv-de, tagesschau, bild",
},
{
country: "de",
className: "redTitle",
},
],
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
Here is my bright ui for our kitchen monitor. The CSS is for the standard config of the MM.
The MagicMirror runs in an iFrame of an html page, the other pages are all written in html and css.
Here is the result for the standard config.
In the config, compliments must be set to center.
{
module: "compliments",
position: "center"
},
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
html {
cursor: hidden;
overflow: hidden;
background: #e7e7e7;;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
background: #e7e7e7;
color: #8a8a8a;
font-weight: 400;
font-size: 2em;
font-family: "Lato", sans-serif;
line-height: 1.5em;
margin-bottom: -10px;
-webkit-font-smoothing: antialiased;
}
header {
text-transform: uppercase;
font-family: "Lato", sans-serif;
text-align: center;
font-weight: bold;
background: #F7F7F7;
border-bottom: none;
color:#8a8a8a;
}
.module.compliments,
.module.newsfeed,
.module.clock,
.module.weatherforecast,
.module.calendar,
.module.currentweather {
font-family: "Lato", sans-serif;
background-color: #f7f7f7;
color: #8a8a8a;
border: 1px solid #c1c1c1;
box-shadow: 0px 10px 25px -5px rgba(50, 88, 130, 0.32);
border-radius: 15px;
padding: 30px;
}
.dimmed {
color: #8a8a8a;
}
.normal {
color: #8a8a8a;
}
.bright {
color: #8a8a8a;
}
/**
* module.width_height
*/
.module.compliments {
width:800px;
}
/**
* clock.
*/
.clock .time {
text-align: center;
font-family: "Lato", sans-serif;
}
.clock .date {
text-transform: uppercase;
text-align: center;
font-weight: bold;
color: #8a8a8a;
font-family: "Lato", sans-serif;
}
/**
* weather.
*/
.currentweather .bright {
font-family: "Lato", sans-serif;
}
.weathericon {
color: #8a8a8a;
}
Dark Ui
html {
cursor: none;
overflow: hidden;
background: #2a313b;
}
body {
margin: 10px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
background: #2a313b;
color: #aaa;
font-weight: 400;
font-size: 2em;
line-height: 1.5em;
margin-bottom: -10px;
-webkit-font-smoothing: antialiased;
}
header {
text-transform: uppercase;
text-align: center;
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
height: 25px;
background: #1f242c;
line-height: 30px;
border-bottom: none;
color: #fffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
}
/**
* module.width_height
*/
.module.clock {
width:300px;
height: 150px;
}
.module.MMM-NetworkScanner {
width:300px;
height: 200px;
}
.module.weatherforecast {
width:300px;
height: 200px;
}
.module.currentweather {
height: 150px;
width:300px;
}
/**
* module.color_border_shadow
*/
.module.MMM-NetworkScanner,
.module.clock,
.module.MMM-CalendarExt2,
.module.weatherforecast,
.module.currentweather,
.module.MMM-News {
background-color:#2a313b;
border-radius:8px;
padding:8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}
/**
* clock.
*/
.clock .time {
font-size: 80px;
text-align: center;
margin-top: 25px;
padding:2px;
}
.clock .date {
text-transform: uppercase;
text-align: center;
font-size: 20px;
font-weight: bold;
height: 25px;
background: #1f242c;
line-height: 30px;
padding-bottom: 5px;
margin-bottom: 10px;
color: #fffff;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
}
/**
* MMM-News.
*/
#NEWS.vertical {
width:1200px;
}
#NEWS.vertical .content .articleImage {
max-width:600px;
max-height:500px;
margin-left:auto;
margin-right:auto;
display:block;
border-radius: 20px;
padding:8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
}
#NEWS.vertical #NEWS_CONTENT {
color: white;
font-size: 35px;
line-height: 40px;
padding-bottom:40px;
}
/**
* MMM-CalendarExt2.
*/
.CX2 .slot .event{
background: #1f242c;
}
.CX2 .agenda .eventSub {
display:none;
}
.CX2 .slot .slotHeader{
background: #1f242c;
border: 1px solid black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: grey;
}
.CX2 .today .slotHeader * {
color: white;
}
.CX2 .event.fullday {
background: #1f242c;
border-radius:0px;
}
.CX2 .event[data-calendar-name="Google"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
}
.CX2 .event[data-calendar-name="Karate"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
}
.CX2 .event[data-calendar-name="Abfall"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
}
.CX2 .event[data-calendar-name="Arbeit"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
}
.CX2 .event[data-calendar-name="Feiertage"] {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
color: white;
}
/**
* Iconsize.
*/
.CX2 .event .eventIcon {
min-width: calc(var(--font-size) * 2,5);
min-height: calc(var(--font-size) * 2,5);
margin-right:5px;
float:left;
}
.CX2 .period .eventIcon {
min-width: calc(var(--font-size) * 2,5);
min-height: calc(var(--font-size) * 2,5);
margin-right:5px;
float:left;
}
.CX2 .weekSlot .eventIcon {
min-width: var(--font-size);
min-height: var(--font-size);
margin-right:3px;
display:block;
padding-bottom:3px;
}
/**
* weather.
*/
.currentweather .bright {
position: absolute;
left: 140px;
margin-top: 25px;
}
.weathericon {
position: absolute;
left: 115px;
z-index: 1;
margin-top: -15px;
height: 35px;
-webkit-svg-shadow: 0 0 7px #53BE12;
}
.currentweather .weathericon {
position: absolute;
left: 40px;
margin-top: 20px;
font-size: 75px;
}