MMM-MinecraftStatus.css

/*
 * Specific styling used only by IDs and classes from MMM-MinecraftStatus.js
 */

/*
 * Set a max so error messages will word-wrap.
 */
.minecraftStatus {
  max-width: 370px;
  font-size: 20px;
}

/*
 * Human readable name with the green & brown background image behind it:
 * URL reference should probably be relative, but this works as of now.
 * Padding makes it look like it has the same border all the way around.
 */
.minecraftStatus div.title {
  color: #d0d0d0;
  background-image: url('/modules/MMM-MinecraftStatus/public/minecraft-pattern.jpg');
  padding-left: 16px;
  padding-right: 16px;
  font-size: 26px;
  line-height: 1.3em;
}

/*
 * The table and spacing allow a break between the rows so the number of players and
 * the latency sections have some blackspace between them.
 */
.minecraftStatus table {
  border-collapse: separate;
  border-spacing: 0 4px;
  width: 100%;
}

.minecraftStatus tr {
  background-color: #303030;
}

.minecraftStatus td {
  text-align: center;
  margin: 4px;
  padding: 4px;
  line-height: 1em;
}

.minecraftStatus td.value {
  padding-left: 24px;
  padding-right: 4px;
  text-align: right;
  color: white;
  font-size: 26px;
  width: 5%;  /* hint to make this as thin as it can */
}

.minecraftStatus .successSection td.label {
  vertical-align: bottom;
  padding-left: 4px;
  text-align: left;
  padding-top: 0;
  line-height: normal;
  font-size: small;
  font-variant: small-caps;
  width: 90%;
}

.minecraftStatus .iconbox {
  width: 5%;  /* hint to make this as thin as it can */
}

/*
 * An Iconbox is the <TD> that holds the FontSwesome images.
 */
.minecraftStatus .successSection .iconbox {
  background-color: #4875b4;
}

/*
 * Not the same selector as the above!   Note the "i" to
 * match the fontswesome image.
 */
.minecraftStatus .iconbox i {
  color: #e0e0e0;
}

/*
 * Start out not displaying either part of the widget (other than the name).
 * The code in MMM-MinecraftStatus.js changes this based on the return from
 * the helper.
 */
.minecraftStatus tbody {
  display: none;
}

.minecraftStatus .errorSection .iconbox {
  background-color: #c00000;
}

.minecraftStatus .errorSection .errorLabel {
  color: #c00000;
  text-align: left;
  vertical-align: middle;
  width: 90%;
  padding-left: 12px;
}

.minecraftStatus .errorSection .errorText {
  text-align: left;
  vertical-align: top;
  font-size: 18px;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}