Bright UI

[potts-mike]

Thanks for the help

Custom.css

@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.MMM-Todoist,
 .module.MMM-Sonos,
 .module.MMM-PaprikaMenu,
 .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;
}

PaprikaMenu.css

.MMM-PaprikaMenu * {
  box-sizing: border-box;
}

.MMM-PaprikaMenu .module-content {
  width: 500px;
}

.MMM-PaprikaMenu table.menu {
  font-size: 17px;
  line-height: 1;
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.MMM-PaprikaMenu table.menu tr {
  border-bottom: solid 1px #222;
}

.MMM-PaprikaMenu table.menu tr.fade {
  opacity: 0.33;
}

.MMM-PaprikaMenu table.menu > tbody > tr > td:first-child {
  width: 55px;
  height: 55px;
}

.MMM-PaprikaMenu .menu .img-cell > img {
  float: left;
  width: 45px;
  height: 45px;
  margin: 5px;
}

.MMM-PaprikaMenu .menu .img-cell > img.rounded {
  border-radius: 10%;
}

.MMM-PaprikaMenu table.inner td {
  line-height: 24px;
  height: 28px;
}

.MMM-PaprikaMenu .menu > span {
  text-align: left;
  white-space: nowrap;
}

.MMM-PaprikaMenu .menu .date {
  font-size: 14px;
}

.MMM-PaprikaMenu .menu .meal {
  font-size: 17px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.MMM-PaprikaMenu .menu .today .date {
  font-size: 17px;
}

.MMM-PaprikaMenu .menu .today .meal {
  color: #FFF;
  font-size: 24px;
}

Sonos.css is empty, might have mucked it up when logged on with my phone. I’ll need to check the github page for that one.

[potts-mike]

and the default sonos.css that I just reloaded from github.

.sonos ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sonos ul .name,
.sonos ul .art {
  display: inline-block;
  vertical-align: middle;
}
.sonos ul .name {
  padding: 0 .25em;
}
.sonos ul .art img {
  height: 100px;
}
.sonos ul .room {
  font-size: 50%;
  padding: .25em .5em;
}
.sonos ul.flip {
  direction: rtl;
}

/* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */

[potts-mike]

I’ve been poking around and figured out how to make the Image art larger in the sonos module but could still use some help with the paprika font color.

[Piranha1605]

@potts-mike

At first glance, I think that these are the entries attached below.

.sonos ul .art img {
  height: 400px;
}

.MMM-PaprikaMenu .menu .today .meal {
  color: #8a8a8a; 
  font-size: 24px;
}

But it may also be that something is written about the .js or .njk, so have a look

[potts-mike]

That fixed Sonos and paprika like I wanted. Thanks for the help.

[potts-mike]

Any one using this with MMM-calendarext2? Would love to get everything styled together.

[Piranha1605]

@potts-mike
I got it with the calendar, you just have to adjust the CSS.

Here is an example with which entries you can customize it.

}
.CX2 .agenda .eventSub {
	display:none;
}
.CX2 .daily .fullday .eventTime {
	display:none;
	font-size: 18px;
}
.CX2 .slot .event{
	background: inherit;
	font-size: 18px;
}
.CX2 .slot .slotHeader{
	background-color:Transparent;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
	border-bottom: 1px solid #1ed760;
	line-height: 15px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	color: #999;
}
.CX2 .today .slotHeader * {
	text-transform: uppercase;
	color: #999;
	font-size: 20px;
}
.CX2 .event.fullday {
	color: inherit;
}
.CX2 .slot .slotFooter {
	display: none;
}
.CX2 .event[data-calendar-name="Die Fischers"] {
	border-left: 2px #ce4138 solid;
	border-bottom: 1px solid #424242;
}
.CX2 .event[data-calendar-name="Karate"] {
	border-left: 2px #3288ff solid;
	border-bottom: 1px solid #424242;
}
.CX2 .event[data-calendar-name="Abfall"] {
	border-left: 2px #6bff32 solid;
	border-bottom: 1px solid #424242;
}
.CX2 .slot > .slotContent{
  position:relative;
  width:100%;
  background-image:inherit;
}
.CX2 .event.fullday {
  border-radius:0px;
}

[potts-mike]

Awesome, thanks.

This would be for the custom.css for the module?

[Piranha1605]

@potts-mike yes

[rdwilbrink]

@Piranha1605 Hallo your mirror looks verry nice.

can you tell me how you make that menu on the left side. can you post the css of that menu