Make Mirror brighter through custom.css

simphi

Hi I’ve always used MMM-Remote-Control to increase the birightness of my MagicMirror. But since I switched to a client-only Instance with MM running in docker on my home-server, the module doesnt work anymore. So now I want to increase the brighntess through a custom.css. The problem is: Im a complete beginner with css. Do you guys already have such a custom.css? Can you share it maybe?

Thanks in advance.

TheDuDiop

@simphi hello here can you see my custom it’s not completely done yet. but it might help you a little

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/
html {
  cursor: none;
  overflow: hidden;
  background: #2a313b;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #2a313b;
  
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  margin-bottom: -10px;
  -webkit-font-smoothing: antialiased;
}

.dimmed {
    color: #000;
}

.normal {
    color: #000;
}

.bright {
  color: #000;
}
.header {
  color: #000;
}
.module.calendar{
  background-color:#2a313b;
  border-radius:8px;
  padding:8px;
  color: #00f2ff;
  border: 1px solid ##00f2ff;
  width:300px;
  height: 150px;
  }

.module.clock {
  background-color:#FFCC00;
  border-radius:8px;
  padding:8px;
  color: #FFCC00;
  border: 1px solid #2a313b;
  width:300px;
  height: 150px;
  }
.module.updatenotification {
	color: #FFCC00;
	border: 1px solid #FFCC00;
}

lavolp3

@simphi yeah you can include these items in custom.css and play with them

.dimmed {
color: #ccc;
}

.normal {
color: #eee;
}

.bright {
color: #fff;
}

Color: #fff is white. You could also write it as #ffffff.
#eee or #eeeeee is a very light grey.

sdetweil

@TheDuDiop please use code blocks for technical info
paste, mark the text, hit the </> button above the editor to wrap in a code block

please edit and correct

simphi

I just read the code from the MMM-Remote Module and created this CSS. Seems to work well:

body {
	color: #ffffff;
}

header {
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.dimmed {
	color: #cccccc;
}

.normal {
	color: #ffffff;
}

.bright {
	color: #ffffff;
}

Thank you all!

TheDuDiop

@sdetweil sorry was too late. to edit. will do it at the next post thanks for the hint

Error

You are only allowed to edit posts for 3600 second(s) after posting

sdetweil

@TheDuDiop just means try to do it right , helps us all help you

Jagsi

@simphi Hy - I copied this to my custom.css file but nothing changed in the appearance of the mirror? Can someone give me hint what I did wrong?

lavolp3

@Jagsi post your custom.css and we can try to help