MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Magic Mirror Redesign WIP :D

    Scheduled Pinned Locked Moved Showcase
    47 Posts 21 Posters 31.9k Views 26 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E Offline
      earlman
      last edited by earlman

      @bravooscar

      thanks for the screenshot. try using this css for your main.css

      :root {
    /**** COLOR ****/
    --color-text: #fff;
    --color-background: black;

    /**** TYPOGRAPHY ****/
    --font-primary: "Roboto Condensed";
    --font-secondary: "Roboto";
    --base: 20px;
    --text-scale: 1.5;
    --text-xs: calc(var(--base) / var(--text-scale));
    --text-sm: var(--base);
    --text-md: calc(var(--text-sm) * var(--text-scale));
    --text-lg: calc(var(--text-md) * var(--text-scale));
    --text-xl: calc(var(--text-lg) * var(--text-scale));
    --text-2xl: calc(var(--text-xl) * var(--text-scale));
    --text-3xl: calc(var(--text-2xl) * var(--text-scale));

    /**** SPACING ****/
    --grid-gap: 1rem;
    --outside-margin: 4rem;
}

html {
  cursor: none;
  overflow: hidden;
  background: var(--color-background);
  user-select: none;
  font-size: var(--base);
}

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

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */

.dimmed {
  color: var(--color-text);
  opacity: 0.4;
}

.normal {
  color: var(--color-text);
  opacity: 0.7;
}

.bright {
  color: var(--color-text);
  opacity: 1;
}

.xsmall {
  font-size: var(--text-xs);
  line-height: 1.4;
}

.small {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.medium {
  font-size: calc(var(--text-md));
  line-height: 1.4;
}

.large {
  font-size: calc(var(--text-lg));
  line-height: 1;
}

.xlarge {
  font-size: calc(var(--text-xl));
  line-height: 1;
  letter-spacing: -3px;
}

.thin {
  font-family: var(--font-secondary), sans-serif;
  font-weight: 100;
}

.light {
  font-family: var(--font-primary), sans-serif;
  font-weight: 300;
}

.regular {
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
}

.bold {
  font-family: var(--font-primary), sans-serif;
  font-weight: 700;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  text-transform: uppercase;
  font-size: 1rem;
  font-family: var(--font-primary), Arial, Helvetica, sans-serif;
  font-weight: 400;
  border-bottom: 1px solid #666;
  line-height: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #999;
}

sup {
  font-size: 50%;
  line-height: 50%;
}

/**
 * Module styles.
 */

.module {
  margin-bottom: 30px;
}

.region.bottom .module {
  margin-top: 30px;
  margin-bottom: 0;
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pre-line {
  white-space: pre-line;
}

/**
 *
 * LAYOUT STUFF
 *
 */
.region {
  width: 100%;
}

.region.fullscreen {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.region.fullscreen * {
  pointer-events: auto;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

body {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-rows: repeat(5, minmax(0, max-content));
  padding: var(--outside-margin);
  place-items: stretch;
  height: 100vh;
}

.top.bar {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

.top.bar > .container {
  grid-column: 1 / -1;
}

.bottom.bar {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

.bottom.bar > .container {
  grid-column: 1 / -1;
}

.left {
  grid-column: 1 / 2;
}

.right {
  grid-column: -1 / -2;
}

.region {
  /* for testing */
  /* border: 1px solid white;  */
}
      B 1 Reply Last reply Reply Quote 0
      • B Offline
        BravoOscar @earlman
        last edited by BravoOscar

        @earlman
        Tryed the new main.css

        2021-04-05-182116_1080x1920_scrot.png

        Stock i working, it should be “top_bar”.
        Calender should be position: “bottom_bar”, under travle time, but bottom_bar is over bottom_left, bottom_center and bottom_right

        E 1 Reply Last reply Reply Quote 0
        • E Offline
          earlman @BravoOscar
          last edited by

          @bravooscar
          try this:

          :root {
  /**** COLOR ****/
  --color-text: #fff;
  --color-background: black;

  /**** TYPOGRAPHY ****/
  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  --base: 20px;
  --text-scale: 1.5;
  --text-xs: calc(var(--base) / var(--text-scale));
  --text-sm: var(--base);
  --text-md: calc(var(--text-sm) * var(--text-scale));
  --text-lg: calc(var(--text-md) * var(--text-scale));
  --text-xl: calc(var(--text-lg) * var(--text-scale));
  --text-2xl: calc(var(--text-xl) * var(--text-scale));
  --text-3xl: calc(var(--text-2xl) * var(--text-scale));

  /**** SPACING ****/
  --grid-gap: 1rem;
  --outside-margin: 4rem;
}

html {
  cursor: none;
  overflow: hidden;
  background: var(--color-background);
  user-select: none;
  font-size: var(--base);
}

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

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */

.dimmed {
  color: var(--color-text);
  opacity: 0.4;
}

.normal {
  color: var(--color-text);
  opacity: 0.7;
}

.bright {
  color: var(--color-text);
  opacity: 1;
}

.xsmall {
  font-size: var(--text-xs);
  line-height: 1.4;
}

.small {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.medium {
  font-size: calc(var(--text-md));
  line-height: 1.4;
}

.large {
  font-size: calc(var(--text-lg));
  line-height: 1;
}

.xlarge {
  font-size: calc(var(--text-xl));
  line-height: 1;
  letter-spacing: -3px;
}

.thin {
  font-family: var(--font-secondary), sans-serif;
  font-weight: 100;
}

.light {
  font-family: var(--font-primary), sans-serif;
  font-weight: 300;
}

.regular {
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
}

.bold {
  font-family: var(--font-primary), sans-serif;
  font-weight: 700;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  text-transform: uppercase;
  font-size: 1rem;
  font-family: var(--font-primary), Arial, Helvetica, sans-serif;
  font-weight: 400;
  border-bottom: 1px solid #666;
  line-height: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #999;
}

sup {
  font-size: 50%;
  line-height: 50%;
}

/**
 * Module styles.
 */

.module {
  margin-bottom: 30px;
}

.region.bottom .module {
  margin-top: 30px;
  margin-bottom: 0;
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pre-line {
  white-space: pre-line;
}

/**
 *
 * LAYOUT STUFF
 *
 */
.region {
  width: 100%;
}

.region.fullscreen {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.region.fullscreen * {
  pointer-events: auto;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

body {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-rows: repeat(5, minmax(0, max-content));
  padding: var(--outside-margin);
  place-items: stretch;
  height: 100vh;
}

.top.bar {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

.top.bar > .container {
  grid-column: 1 / -1;
}

.bottom.bar {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(3, 1fr);
}

.bottom.bar > .container {
  grid-column: 1 / -1;
  grid-row: 2;
}

.bottom.bar > .bottom {
    grid-row: 1;
}

.left {
  grid-column: 1 / 2;
}

.right {
  grid-column: -1 / -2;
}

/* for testing */

.region {
  /* border: 1px solid white; */
}
          1 Reply Last reply Reply Quote 1
          • A Offline
            aarish
            last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • A Offline
              aarish
              last edited by

              @earlman The redesign looks really cool and I love the concept you are going for. I wanted to try it on my mirror however I could not access the notion page with the set up instructions as it says I don’t have access. Is their another place with the instruction?

              1 Reply Last reply Reply Quote 0
              • M Offline
                MDLefevere @earlman
                last edited by

                @earlman Can we get that wallpaper :astonished_face: ?? (with the mountain)

                1 Reply Last reply Reply Quote 1
                • M Offline
                  MDLefevere
                  last edited by

                  @cowboysdude

                  I’ve found it and uploaded it. Not huge but for a 24" it’s fine.

                  Click

                  cowboysdudeC 1 Reply Last reply Reply Quote 1
                  • cowboysdudeC Offline
                    cowboysdude Module Developer @MDLefevere
                    last edited by

                    @mdlefevere Thank you!

                    1 Reply Last reply Reply Quote 0
                    • JalibuJ Offline
                      Jalibu Module Developer
                      last edited by

                      Hi @earlman,
                      I am impressed by your redesign.

                      I registered on notion.so but can not access your guide :-/

                      E 1 Reply Last reply Reply Quote 0
                      • E Offline
                        earlman @Jalibu
                        last edited by earlman

                        @jalibu @aarish

                        Appreciate the interest! Here’s the Notion page.

                        Let me know if something’s not working. The instructions haven’t been updated in a while.

                        H 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 5 / 5
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy