Merge pull request #2565 from rejas/css_gap

CHANGELOG.md

@@ -17,7 +17,8 @@ Special thanks to the following contributors: @B1gG, @codac, @ezeholz, @khassel,
 - Added German translation for "PRECIP".
 - Added first test for Alert module.
 - Added support for `dateFormat` when not using `timeFormat: "absolute"`
-- Added custom-properties in css of core and modules for improved styling experience, see `custom.css.sample` file
+- Added custom-properties for colors and fonts for improved styling experience, see `custom.css.sample` file
+- Added custom-properties for gaps around body and between modules
 - Added test case for recurring calendar events
 
 ### Updated

css/custom.css.sample

@@ -1,4 +1,8 @@
 /* Magic Mirror Custom CSS Sample
+ *
+ * Change color and fonts here.
+ *
+ * Beware that properties cannot be unitless, so for example write '--gap-body: 0px;' instead of just '--gap-body: 0;'
  *
  * MIT Licensed.
  */
@@ -6,13 +10,22 @@
 /* Uncomment and adjust accordingly if you want to import another font from the google-fonts-api: */
 /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap'); */
 
-/* Change color and fonts here: */
 :root {
   --color-text: #999;
   --color-text-dimmed: #666;
   --color-text-bright: #fff;
   --color-background: black;
-  --font-size: 20px;
+
   --font-primary: "Roboto Condensed";
   --font-secondary: "Roboto";
+  
+  --font-size: 20px;
+  --font-size-small: 0.75rem;
+
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+  
+  --gap-modules: 30px;
 }

css/main.css

@@ -2,10 +2,20 @@
   --color-text: #999;
   --color-text-dimmed: #666;
   --color-text-bright: #fff;
-  --color-background: black;
+  --color-background: #000;
-  --font-size: 20px;
+
   --font-primary: "Roboto Condensed";
   --font-secondary: "Roboto";
+
+  --font-size: 20px;
+  --font-size-small: 0.75rem;
+
+  --gap-body-top: 60px;
+  --gap-body-right: 60px;
+  --gap-body-bottom: 60px;
+  --gap-body-left: 60px;
+
+  --gap-modules: 30px;
 }
 
 html {
@@ -21,10 +31,10 @@ html {
 }
 
 body {
-  margin: 60px;
+  margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
   position: absolute;
-  height: calc(100% - 120px);
+  height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
-  width: calc(100% - 120px);
+  width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
   background: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-primary), sans-serif;
@@ -50,7 +60,7 @@ body {
 }
 
 .xsmall {
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   line-height: 1.275;
 }
 
@@ -105,7 +115,7 @@ body {
 
 header {
   text-transform: uppercase;
-  font-size: 15px;
+  font-size: var(--font-size-small);
   font-family: var(--font-primary), Arial, Helvetica, sans-serif;
   font-weight: 400;
   border-bottom: 1px solid var(--color-text-dimmed);
@@ -125,11 +135,11 @@ sup {
  */
 
 .module {
-  margin-bottom: 30px;
+  margin-bottom: var(--gap-modules);
 }
 
 .region.bottom .module {
-  margin-top: 30px;
+  margin-top: var(--gap-modules);
   margin-bottom: 0;
 }
 
@@ -153,10 +163,10 @@ sup {
 
 .region.fullscreen {
   position: absolute;
-  top: -60px;
+  top: calc(-1 * var(--gap-body-top));
-  left: -60px;
+  left: calc(-1 * var(--gap-body-left));
-  right: -60px;
+  right: calc(-1 * var(--gap-body-right));
-  bottom: -60px;
+  bottom: calc(-1 * var(--gap-body-bottom));
   pointer-events: none;
 }
 
@@ -173,18 +183,6 @@ sup {
   top: 0;
 }
 
-.region.top .container {
-  margin-bottom: 25px;
-}
-
-.region.bottom .container {
-  margin-top: 25px;
-}
-
-.region.top .container:empty {
-  margin-bottom: 0;
-}
-
 .region.top.center,
 .region.bottom.center {
   left: 50%;
@@ -201,10 +199,6 @@ sup {
   bottom: 0;
 }
 
-.region.bottom .container:empty {
-  margin-top: 0;
-}
-
 .region.bottom.right,
 .region.bottom.center,
 .region.bottom.left {

modules/default/calendar/calendar.css

@@ -1,13 +1,14 @@
 .calendar .symbol {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   padding-left: 0;
   padding-right: 10px;
-  font-size: 80%;
+  font-size: var(--font-size-small);
-  vertical-align: top;
 }
 
 .calendar .symbol span {
-  display: inline-block;
+  padding-top: 4px;
-  transform: translate(0, 2px);
 }
 
 .calendar .title {

modules/default/calendar/calendar.js

@@ -305,15 +305,14 @@ Module.register("calendar", {
 			if (this.config.timeFormat === "dateheaders") {
 				if (event.fullDayEvent) {
 					titleWrapper.colSpan = "2";
-					titleWrapper.align = "left";
+					titleWrapper.classList.add("align-left");
 				} else {
 					const timeWrapper = document.createElement("td");
-					timeWrapper.className = "time light " + this.timeClassForUrl(event.url);
+					timeWrapper.className = "time light align-left " + this.timeClassForUrl(event.url);
-					timeWrapper.align = "left";
 					timeWrapper.style.paddingLeft = "2px";
 					timeWrapper.innerHTML = moment(event.startDate, "x").format("LT");
 					eventWrapper.appendChild(timeWrapper);
-					titleWrapper.align = "right";
+					titleWrapper.classList.add("align-right");
 				}
 
 				eventWrapper.appendChild(titleWrapper);