My Custom.css - Need some advice

Kimzer

Hi all!
I would really appreciate if someone would look my custom.css over. Im sure there are something thats not needed or causing conflictions. Would someone take a sec to look it over?

Edit; I am specially eager to work out why the lines below my headers are all different sizes.
I would like them ALL to be the same size except for the oneliner part.

/*****************************************************
 * 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. *
 *****************************************************/

body {
  margin: 20px;
  position: absolute;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background: #000;
  background-Image: url("bg.jpg");
  background-size: cover;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

.region.fullscreen {
  position: absolute;
  top: -65px;
  left: -65px;
  right: -65px;
  bottom: -65px;
}
.clock .time {
  color: #99F;
  text-transform: uppercase;
}

.clock .date {
  color: #99F;
  text-transform: uppercase;
}

.calendar_monthly table {
  width: initial;
  float: left;
}

.calendar_monthly td {
  text-align: left !important;
}

.calendar_monthly calendar-table {
  text-align: left !important;
}

.calendar_monthly {
  color: #99F;
} 

.region.top.right .MMM-WunderGround table th {
  display: none; /* removes icons above max-temp, min-temp and % chance of rain */
}

.MMM-WunderGround .max-temp {
  color: #f66;
}

.MMM-WunderGround .min-temp {
  color: #0ff;
}

.MMM-WunderGround .weather-icon {
  color: #f93;
}

.MMM-WunderGround .day {
  color: #99F;
}

.MMM-WunderGround .large .bright {
  color: #99F;
}

.MMM-WunderGround table.small tr:first-child td {
  color: #99F;
}

.MMM-WunderGround .hourv {
  color: #99F;
}

/* Weather changes */
.region.top.center .MMM-WunderGround table.small,   /* selector for ONLY current weather Thanks to Strawberry-3.141 */
.region.top.right .MMM-WunderGround table:not(.small),   /* selector for ONLY weather forecast */
.region.top.right .MMM-WunderGround table.small td:nth-child(6)  {
  display: none;    /* this line and line above selector for NO rain amount column */
}

/* Newsfeed size & color */
.newsfeed div.light.small.dimmed {
  color: #99F;          /* color for newsfeed **source** */
  font-size: 24px;      /* size for newsfeed **source** */
}

/* Limit the width of the left and right columns to 300px */
.region.right .module-content,
.region.left .module-content {
  max-width: 320px;
}

/* Allows styling of row elements in tables.  You need this for the next rule */
table.small {
  border-collapse:collapse;
}

/* Add an underline to table rows - also requires the rule above this one */
table tr {
  border-bottom: solid 1px #222;
  border-bottom-color: #99F;
}

/* Blue colour styling for module headers */
.module-header {
  color: #99F;
  border-bottom-color: #99F;
  font-size: 15.5px;
  font-family: "Roboto";
  text-align: center;
}

/* MMM-OneLiner header color & border */
.MMM-Oneliner .header {
  color: #99F;
  border-bottom-color: #99F;
}

/* MMM-OneLiner text color & size & text type */
.MMM-Oneliner .wrapper {
  color: #99F;
  font-family: 'Bubbler One', sans-serif;
  font-size: 24px;
}

/* MMM-NetworkScanner icon color */
.MMM-NetworkScanner .fa-li {
  color: #FF8000;
}

/* MMM-Tools width & color change */
.MMM-Tools {
  width: 320px;
  color: #99F;
}

/* Fix for MMM-Tools - Place module anywhere */
.Tools .status_item .container {
  margin-top:0;
}

A Former User

@Kimzer You should consider all other css (main.css and other css of modules) together. All css are combined at runtime, so, No one could say this is good or not.(except misspel or syntax error).
The best approach is using dev console(Chromium/Chrom Browser Dev mode or Firefox equivalents). After npm start dev or node serverony and see what is going on really in your browser.
Anyway, css grammar is very generous, so until critical problem, your mirror will work pretty well however.

A Former User

Edit; I am specially eager to work out why the lines below my headers are all different sizes.
I would like them ALL to be the same size except for the oneliner part.

If you put modules in the same region (like, top_left), most of them would have the same width (maybe it would be the largest width of modules) by default except some modules which has its own width value.

Maybe, you have some troubles with width of various modules and region.
Try this.

.region.left {
width:400px;
}

Most of your modules in left region (top_left, bottom_left) would have same width - 400px. (except some modules which control it’s width by itself)

The problem was, I think, you might put some modules in top_left, and some in bottom_left, but the region width is not defined, so the width of modules in each region is set automatically to the largest width in each region.