MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    1. Home
    2. Piranha1605
    • Profile
    • Following 0
    • Followers 6
    • Topics 8
    • Posts 38
    • Best 14
    • Controversial 0
    • Groups 1

    Piranha1605

    @Piranha1605

    39
    Reputation
    357
    Profile views
    38
    Posts
    6
    Followers
    0
    Following
    Joined Last Online

    Piranha1605 Unfollow Follow
    Module Developer

    Best posts made by Piranha1605

    • Bright UI

      Here is my bright ui for our kitchen monitor. The CSS is for the standard config of the MM.

      The MagicMirror runs in an iFrame of an html page, the other pages are all written in html and css.

      hell1.jpg

      hell2.jpg

      Hell3.jpg

      Here is the result for the standard config.
      In the config, compliments must be set to center.

      		{
      			module: "compliments",
      			position: "center"
      		},
      

      light.png

      • custom.css
      @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
      
      html {
        cursor: hidden;
        overflow: hidden;
        background: #e7e7e7;;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: #e7e7e7;
        color: #8a8a8a;
        font-weight: 400;
        font-size: 2em;
        font-family: "Lato", sans-serif;
        line-height: 1.5em;
        margin-bottom: -10px;
        -webkit-font-smoothing: antialiased;
      }
      
      header {
        text-transform: uppercase;
        font-family: "Lato", sans-serif;
        text-align: center;
        font-weight: bold;
        background: #F7F7F7;
        border-bottom: none;
        color:#8a8a8a;
      }
      
       .module.compliments,
       .module.newsfeed,
       .module.clock,
       .module.weatherforecast,
       .module.calendar,
       .module.currentweather {
        font-family: "Lato", sans-serif;
        background-color: #f7f7f7;
        color: #8a8a8a;
        border: 1px solid #c1c1c1;
        box-shadow: 0px 10px 25px -5px rgba(50, 88, 130, 0.32);
        border-radius: 15px;
        padding: 30px;
      }
      
      .dimmed {
        color: #8a8a8a;
      }
      
      .normal {
        color: #8a8a8a;
      }
      
      .bright {
        color: #8a8a8a;
      }
      
      
      /**
       * module.width_height
       */
      
       .module.compliments {
        width:800px;
      }
       
      /**
       * clock.
       */ 
       
      .clock .time {
       text-align: center;
       font-family: "Lato", sans-serif;
       
      }
      .clock .date {
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        color: #8a8a8a;
        font-family: "Lato", sans-serif;
      }
      
      
      /**
       * weather.
       */
      
      .currentweather .bright {
        font-family: "Lato", sans-serif;
      }
      
      .weathericon {
        color: #8a8a8a;
      }
      
      posted in Showcase
      Piranha1605
      Piranha1605
    • Dark UI

      Dark Ui

      Unbenannt.png

      
      html {
        cursor: none;
        overflow: hidden;
        background: #2a313b;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: #2a313b;
        color: #aaa;
        font-weight: 400;
        font-size: 2em;
        line-height: 1.5em;
        margin-bottom: -10px;
        -webkit-font-smoothing: antialiased;
      }
      
      header {
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        height: 25px;
        background: #1f242c;
        line-height: 30px;
        border-bottom: none;
        color: #fffff;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
      }
      
      /**
       * module.width_height
       */
      
      .module.clock {
        width:300px;
        height: 150px;
      }
      
      .module.MMM-NetworkScanner {
        width:300px;
        height: 200px;
      }
      
      .module.weatherforecast {
        width:300px;
        height: 200px;
      }
      
      .module.currentweather {
        height: 150px;
        width:300px;
      }
      
      /**
       * module.color_border_shadow
       */
       
       .module.MMM-NetworkScanner,
       .module.clock,
       .module.MMM-CalendarExt2,
       .module.weatherforecast,
       .module.currentweather,
       .module.MMM-News {
        background-color:#2a313b;
        border-radius:8px;
        padding:8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      }
      
      /**
       * clock.
       */
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       padding:2px;
       
      }
      .clock .date {
        text-transform: uppercase;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        height: 25px;
        background: #1f242c;
        line-height: 30px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #fffff;
        box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1)
      }
      
      /**
       * MMM-News.
       */
      
      #NEWS.vertical {
        width:1200px;
      }
      #NEWS.vertical .content .articleImage {
        max-width:600px;
        max-height:500px;
        margin-left:auto;
        margin-right:auto;
        display:block;
        border-radius: 20px;
        padding:8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      }
      #NEWS.vertical #NEWS_CONTENT {
      	color: white;
        font-size: 35px;
        line-height: 40px;
        padding-bottom:40px;
      }
      
      /**
       * MMM-CalendarExt2.
       */
      
      .CX2 .slot .event{
      	background: #1f242c;
      }
      .CX2 .agenda .eventSub {
      	display:none;
      }
      .CX2 .slot .slotHeader{
        background: #1f242c;
        border: 1px solid black;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
      	color: grey;
      }
      .CX2 .today .slotHeader * {
      	color: white;
      }
       .CX2 .event.fullday {
        background: #1f242c;
        border-radius:0px;
      }
      
      .CX2 .event[data-calendar-name="Google"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Karate"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Abfall"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Arbeit"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      .CX2 .event[data-calendar-name="Feiertage"] {
      	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 8px 20px 0 rgba(0, 0, 0, 0.19);
        color: white;
      }
      
      /**
       * Iconsize.
       */
      
      .CX2 .event .eventIcon {
        min-width: calc(var(--font-size) * 2,5);
        min-height: calc(var(--font-size) * 2,5);
        margin-right:5px;
        float:left;
      }
      .CX2 .period .eventIcon {
        min-width: calc(var(--font-size) * 2,5);
        min-height: calc(var(--font-size) * 2,5);
        margin-right:5px;
        float:left;
      }
      .CX2 .weekSlot .eventIcon {
        min-width: var(--font-size);
        min-height: var(--font-size);
        margin-right:3px;
        display:block;
        padding-bottom:3px;
      }
      
      /**
       * weather.
       */
       
      .currentweather .bright {
        position: absolute;
        left: 140px;
        margin-top: 25px;
      }
      .weathericon {
        position: absolute;
        left: 115px;
        z-index: 1;
        margin-top: -15px;
        height: 35px;
        -webkit-svg-shadow: 0 0 7px #53BE12;
      }
      .currentweather .weathericon {
        position: absolute;
        left: 40px;
        margin-top: 20px;
        font-size: 75px;
      }
      
      posted in Showcase
      Piranha1605
      Piranha1605
    • BG Animation with CSS

      Small work accident. The result is a BG animation with CSS only. 😂 😂 😂 😂

      Video on You Tube

      Unbenannt.jpg

      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;
        color: #606060;
        background: url("bg/bg7.jpg");
        background-blend-mode: hard-light;
        -webkit-animation: hue-rotate 10s linear infinite;
                animation: hue-rotate 10s linear infinite;
        
      }
      
      html {
        cursor: default;
        overflow: hidden;
        background: linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
      }
      
      header {
        text-align: center;
        font-size: 20px;
        padding:8px;
        border-radius: 5px;
        outline: none;
        border: none;
        background-image: linear-gradient(#28D2DE 0%, #1A878F 100%);
        color: #FFF;
        text-transform: uppercase;
        text-shadow: #000 0px 1px 5px;
        border: 1px solid #000;
        opacity: 0.7;
        box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.7);
        border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
      
      }
      .dimmed {
        color: #FFF;
      }
      
      .normal {
        color: #FFF;
      }
      
      .bright {
        color: #FFF;
      }
       .module {
        font-size: 20px; 
        padding:8px;
        font-weight: 400;
        border-radius: 5px;
        box-shadow: inset 4px 6px 10px -4px rgba(0, 0, 0, 0.3), 0 1px 1px -1px rgba(255, 255, 255, 0.3);
        background: rgba(0, 0, 0, 0.2);
        outline: none;
        border: none;
        border: 1px solid black;
        color: #6E6E6E;
        text-shadow: #000 0px 1px 5px;
      
      }
      
      @keyframes hue-rotate {
        from {
          -webkit-filter: hue-rotate(0);
          -moz-filter: hue-rotate(0);
          -ms-filter: hue-rotate(0);
          filter: hue-rotate(0);
        }
        to {
          -webkit-filter: hue-rotate(360deg);
          -moz-filter: hue-rotate(360deg);
          -ms-filter: hue-rotate(360deg);
          filter: hue-rotate(360deg);
        }
      }
      @-webkit-keyframes hue-rotate {
        from {
          -webkit-filter: hue-rotate(0);
          -moz-filter: hue-rotate(0);
          -ms-filter: hue-rotate(0);
          filter: hue-rotate(0);
        }
        to {
          -webkit-filter: hue-rotate(360deg);
          -moz-filter: hue-rotate(360deg);
          -ms-filter: hue-rotate(360deg);
          filter: hue-rotate(360deg);
        }
      }
      
      posted in Showcase
      Piranha1605
      Piranha1605
    • css switch Module

      Since I use my mirror on a monitor in the kitchen, I wrote a module that changes the entries in the Custom.css according

      Entry in the config

      	{
      		module: "cssswitch",
      		    config: {
                               evening_start: 21,        
                               evening_stop: 6,
                    }  
      	},
      

      Example for the custom.css

      /**
       * morning style
       */
       
      .morning {
        background: #d4d4d4;
      }
      
      .morning .dimmed  {
        color: #2c3e50;
      }
      .morning .normal {
        color: #2c3e50;
      }
      .morning .bright  {
        color: #2c3e50;
      }
      /**
       * So that all modules have the same style
       * insert new modules with.module.Modulname
       * module.background-color_border_shadow
       */
       
       .morning .module.clock,
       .morning .module.calendar,
       .morning .module.weatherforecast,
       .morning .module.currentweather {
        font-family: "Lato", sans-serif;
        border: 1px solid #fff;
        background-color: #f6f5f0;
        padding: 1.5rem 2rem;
        border-radius: 10px;
        box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;
      }
      
      .morning .clock .time {
       color: #fffff;
       font-size: 100px;
       text-align: center;
       margin-top: 30px;
       font-family: "Lato", sans-serif;
      }
      .morning .clock .date  {
        font-weight: bold;
        color:#2c3e50;
        font-size: 20px;
        text-transform: uppercase;
        font-family: "Lato", sans-serif;
        text-align: center;
        background-color:#d4d4d4;
        box-shadow: inset 1px 1px 2.5px rgba(0, 0, 0, 0.25), inset -2.5px -2.5px 5px rgba(255, 255, 255, 0.3);
        transition: all 0.2s ease-in-out;
        padding: 0.25rem 0.25rem;
        border-radius: 8px;
      }
      
      
       /**
       * evening style
       */
      
      .evening {
        background: #151515;
      }
      
      .evening .dimmed  {
        color:#d4d4d4;
      }
      .evening .normal  {
        color:#d4d4d4;
      }
      .evening .bright  {
        color:#d4d4d4;
      }
      /**
       * So that all modules have the same style
       * insert new modules with.module.Modulname
       * module.background-color_border_shadow
       */
       .evening .module.clock,
       .evening .module.calendar,
       .evening .module.weatherforecast,
       .evening .module.currentweather {
        padding:8px;
        background: #111;
        background: linear-gradient(#1b1b1b, #111);
        border: 1px solid #000;
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px #272727;
        z-index: 1;
        font-family: "Lato", sans-serif;
      }
      
      posted in System
      Piranha1605
      Piranha1605
    • Please use the search function.

      Please use the search function. At the moment questions are being asked time and again that have probably already been answered a hundred times by the search at the top right. The problem is that there are 50 solutions to a problem and newcomers are getting more and more confused.

      Unbenannt.png

      posted in General Discussion
      Piranha1605
      Piranha1605
    • CSS experiments for newbies

      Here are some templates for all newbies.

      1.Black boxes

      Unbenannt.jpg

      CSS

      html {
        cursor: default;
        overflow: hidden;
        background: #2c2c2d;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: #dbdcdf;
        background: transparent;
      }
      
      header {
        background: transparent;
        padding: 0.5rem;
        text-align: center;
        border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
        color: #dbdcdf;
        font-size: 20px;
      }
      .dimmed {
        color: #dbdcdf;
      }
      
      .normal {
        color: #dbdcdf;
      }
      
      .bright {
        color: #dbdcdf;
      }
      
      /**
       * module.color_border_shadow
       */ 
       .module.clock,
       .module.calendar,
       .module.newsfeed,
       .module.weatherforecast,
       .module.currentweather,
       .module.compliments {
        padding:8px;
        border-radius: 10px;
        box-shadow: 0 2em 6em #000;
        background: transparent;
      }
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       color: #dbdcdf;
       padding: 15px;
      }
      .clock .date {
        background: transparent;
        padding: 5px;
        text-align: center;
        border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
        color: #dbdcdf;
        font-size: 20px;
      }
      
      
      /**
       * module.width_height
       */
      .module.calendar {
        width:450px;
        height: 320px;
      }
      .module.weatherforecast {
        width:400px;
        height: 220px;
      }
      .module.currentweather {
        height: 180px;
        width:400px;
        text-align: center;
      }
      
      
      

      2.Material Design

      Unbenannt.png

      CSS

      html {
        cursor: default;
        overflow: hidden;
        background: #e9e9e9;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: #666666;
        background: transparent;
      }
      
      header {
        background: transparent;
        padding: 0.5rem;
        text-align: center;
        font-size: 20px;
        color: #ed2553;
        border-bottom: 2px solid #e3e3e3;
      }
      .dimmed {
        color: #666666;
      }
      
      .normal {
        color: #666666;
      }
      
      .bright {
        color: #666666;
      }
      
      /**
       * module.color_border_shadow
       */ 
       .module.clock,
       .module.calendar,
       .module.newsfeed,
       .module.weatherforecast,
       .module.currentweather,
       .module.compliments {
        padding:8px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        background: #f2f2f2;
      }
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       color: #666666;
       padding: 15px;
      }
      .clock .date {
        background: transparent;
        padding: 5px;
        text-align: center;
        font-size: 20px;
        color: #ed2553;
        border-bottom: 2px solid #e3e3e3;
      }
      
      
      /**
       * module.width_height
       */
      .module.calendar {
        width:450px;
        height: 320px;
      }
      .module.weatherforecast {
        width:400px;
        height: 220px;
      }
      .module.currentweather {
        height: 180px;
        width:400px;
        text-align: center;
      }
      
      
      

      3.Neumorphism

      Unbenannt.jpg

      CSS

      html {
        cursor: default;
        overflow: hidden;
        background: #545454;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: #FFFFFF;
        background: transparent;
      }
      
      header {
        background: transparent;
        padding: 10px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        border-radius: 23px;
        box-shadow: inset 11px 11px 16px #3e3e3e, 
                  inset -11px -11px 16px #6a6a6a;
      }
      .dimmed {
        color: #FFFFFF;
      }
      
      .normal {
        color: #FFFFFF;
      }
      
      .bright {
        color: #FFFFFF;
      }
      
      /**
       * module.color_border_shadow
       */ 
       .module.clock,
       .module.calendar,
       .module.newsfeed,
       .module.weatherforecast,
       .module.currentweather,
       .module.compliments {
        padding:8px;
        border-radius: 23px;
        background: #545454;
        box-shadow:  11px 11px 16px #3e3e3e, 
                   -11px -11px 16px #6a6a6a;
      }
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       color: #FFFFFF;
       padding: 15px;
      }
      .clock .date {
        background: transparent;
        padding: 2px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        border-radius: 23px;
        box-shadow: inset 11px 11px 16px #3e3e3e, 
                  inset -11px -11px 16px #6a6a6a;
      }
      
      
      /**
       * module.width_height
       */
      .module.calendar {
        width:450px;
        height: 320px;
      }
      .module.weatherforecast {
        width:400px;
        height: 220px;
      }
      .module.currentweather {
        height: 180px;
        width:400px;
        text-align: center;
      }
      
      
      

      4.Trending

      Unbenannt.png

      CSS

      html {
        cursor: default;
        overflow: hidden;
        background: #7e94d8;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: #666666;
        background: transparent;
      }
      
      header {
        background: #9DD5FF;
        padding: 8px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        text-shadow: 0px 10px 20px #000000;
        box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
        border-radius: 10px;
      }
      .dimmed {
        color: #FFFFFF;
      }
      
      .normal {
        color: #FFFFFF;
      }
      
      .bright {
        color: #FFFFFF;
      }
      
      /**
       * module.color_border_shadow
       */ 
       .module.clock,
       .module.calendar,
       .module.newsfeed,
       .module.weatherforecast,
       .module.currentweather,
       .module.compliments {
        padding:8px;
        border-radius: 10px;
        box-shadow: 0px 31px 35px 0px rgba(0, 0, 0, 0.38);
        background: linear-gradient(159deg, #47455d 0%, #323045 97%);
      }
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       color: #FFFFFF;
       padding: 15px;
      }
      .clock .date {
        background: #9DD5FF;
        padding: 2px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        text-shadow: 0px 10px 20px #000000;
        box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.53);
        border-radius: 10px;
      }
      
      
      /**
       * module.width_height
       */
      .module.calendar {
        width:450px;
        height: 320px;
      }
      .module.weatherforecast {
        width:400px;
        height: 220px;
      }
      .module.currentweather {
        height: 180px;
        width:400px;
        text-align: center;
      }
      
      
      

      5.Tron

      Unbenannt.jpg

      CSS

      html {
        cursor: default;
        overflow: hidden;
        background: #000;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: rgba( 0, 150, 254, 1 );
        background: transparent;
      }
      
      header {
        background: transparent;
        padding: 0.5rem;
        text-align: center;
        font-size: 20px;
        color: rgba( 0, 150, 254, 1 );
        text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
        border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
      }
      .dimmed {
        color: rgba( 0, 150, 254, 1 );
      }
      
      .normal {
        color: rgba( 0, 150, 254, 1 );
      }
      
      .bright {
        color: rgba( 0, 150, 254, 1 );
      }
      
      /**
       * module.color_border_shadow
       */ 
       .module.clock,
       .module.calendar,
       .module.newsfeed,
       .module.weatherforecast,
       .module.currentweather,
       .module.compliments {
        padding:8px;
        border-radius: 10px;
        border-color: rgba( 0, 150, 254, 1 );
        box-shadow: 0 0 25px 2.5px rgba( 0, 150, 254, .4 );
        background: #000;
      }
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       color: rgba( 0, 150, 254, 1 );
       padding: 15px;
      }
      .clock .date {
        background: transparent;
        padding: 5px;
        text-align: center;
        border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
        color: rgba( 0, 150, 254, 1 );
        text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
        font-size: 20px;
      }
      
      
      /**
       * module.width_height
       */
      .module.calendar {
        width:450px;
        height: 320px;
      }
      .module.weatherforecast {
        width:400px;
        height: 220px;
      }
      .module.currentweather {
        height: 180px;
        width:400px;
        text-align: center;
      }
      
      
      

      6.White Boxes

      Unbenannt.jpg

      CSS

      html {
        cursor: default;
        overflow: hidden;
        background: #c4c4c4;
      }
      
      
      body {
        margin: 10px;
        position: absolute;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin-bottom: -10px;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
        color: black;
        background: transparent;
      }
      
      header {
        background: transparent;
        padding: 0.5rem;
        text-align: center;
        border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
        color: black;
        font-size: 20px;
      }
      .dimmed {
        color: black;
      }
      
      .normal {
        color: black;
      }
      
      .bright {
        color: black;
      }
      
      /**
       * module.color_border_shadow
       */ 
       .module.clock,
       .module.calendar,
       .module.newsfeed,
       .module.weatherforecast,
       .module.currentweather,
       .module.compliments {
        padding:8px;
        border-radius: 10px;
        box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
        background: white;
      }
      
      .clock .time {
       font-size: 80px;
       text-align: center;
       margin-top: 25px;
       color: black;
       padding: 15px;
      }
      .clock .date {
        background: transparent;
        padding: 5px;
        text-align: center;
        border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
        color: black;
        font-size: 20px;
      }
      
      
      /**
       * module.width_height
       */
      .module.calendar {
        width:450px;
        height: 320px;
      }
      .module.weatherforecast {
        width:400px;
        height: 220px;
      }
      .module.currentweather {
        height: 180px;
        width:400px;
        text-align: center;
      }
      
      
      
      posted in Showcase
      Piranha1605
      Piranha1605
    • Change the regions positions

      Here is an example .css to change the regions positions. You can move and position the regions freely.

      Unbenannt.jpg

      /**
       * Region Definitions.
       */
      
      .region.bottom.bar {
      background : gray;
      position: absolute;
      width: 50%;
      }
      
      .region.top.bar {
      background : gray;
      position: absolute;
      width: 50%;
      }
      
      .region.top.right {
      background : green;
      margin-right: 100px;
      margin-top: 100px;
      }
      
      .region.top.left{
      background : red;
      margin-left: 100px;
      margin-top: 100px;
      }
      
      .region.top.center {
      background : blue;
      *margin-left: 100px;
      *margin-top: 100px;
      }
      
      .region.bottom.right {
      background : green;
      margin-right: 100px;
      margin-bottom: 100px;
      }
      
      .region.bottom.center {
      background : blue;
      margin-bottom: 100px;
      }
      
      .region.bottom.left {
      background : red;
      margin-left: 100px;
      margin-bottom: 100px;
      }
      
      .region.third {
      background : cyan;
      }
      
      .region.middle.center {
      background : cyan;
      margin-bottom: 100px;
      text-align: center;
      position: absolute;
      width: 45%;
      height: 33%;
      left: 1100px;
      }
      
      .region.upper.third {
      background : yellow;
      margin-bottom: 100px;
      text-align: center;
      position: absolute;
      width: 45%;
      height: 33%;
      left: 1100px;
      }
      
      .region.lower.third {
      background : magenta;
      text-align: center;
      position: absolute;
      width: 45%;
      height: 33%;
      left: 1100px;
      }
      
      posted in Development
      Piranha1605
      Piranha1605
    • RE: Is it possible to change the CSS layout at a certain time? (Dark Mode)

      I hope this help.

      https://github.com/Piranha1605/MMM-CSSswitch

      posted in Development
      Piranha1605
      Piranha1605
    • RE: Bright UI

      @cyberphox it is MMM-News

      posted in Showcase
      Piranha1605
      Piranha1605
    • MMM-Watchstore

      A small module with various clocks.

      github Link

      clocks.jpg

        {
        	module: "MMM-Watchstore",
        	position: "top_center",
        		config: {
        			url: "modules/MMM-Watchstore/clocks/clock1/index.html",
        			width: "500px",
        			height: "120px",
        	}
        },
      

      To change the clock, change the entry clock1 / clock2 …

      posted in Utilities
      Piranha1605
      Piranha1605

    Latest posts made by Piranha1605

    • RE: Is it possible to change the CSS layout at a certain time? (Dark Mode)

      I hope this help.

      https://github.com/Piranha1605/MMM-CSSswitch

      posted in Development
      Piranha1605
      Piranha1605
    • RE: Clock module

      Some time ago I built a module that included the flip clock. MMM-Watchstore

      posted in Development
      Piranha1605
      Piranha1605
    • RE: Deutsche Anleitung MagicMirror auf RaspberryPi 3

      @radioman Versuche mal dein Modul zu verschieben und nicht die ganze Region.

      .module.calendar {
      background : black;
      margin-left: 10px;
      margin-top: 130px;
      }
      
      posted in General Discussion
      Piranha1605
      Piranha1605
    • RE: Bright UI

      @potts-mike yes

      posted in Showcase
      Piranha1605
      Piranha1605
    • RE: Bright UI

      @potts-mike
      I got it with the calendar, you just have to adjust the CSS.

      Here is an example with which entries you can customize it.

      
      }
      .CX2 .agenda .eventSub {
      	display:none;
      }
      .CX2 .daily .fullday .eventTime {
      	display:none;
      	font-size: 18px;
      }
      .CX2 .slot .event{
      	background: inherit;
      	font-size: 18px;
      }
      .CX2 .slot .slotHeader{
      	background-color:Transparent;
      	text-transform: uppercase;
      	font-size: 20px;
      	font-weight: 400;
      	border-bottom: 1px solid #1ed760;
      	line-height: 15px;
      	padding-bottom: 5px;
      	margin-bottom: 10px;
      	color: #999;
      }
      .CX2 .today .slotHeader * {
      	text-transform: uppercase;
      	color: #999;
      	font-size: 20px;
      }
      .CX2 .event.fullday {
      	color: inherit;
      }
      .CX2 .slot .slotFooter {
      	display: none;
      }
      .CX2 .event[data-calendar-name="Die Fischers"] {
      	border-left: 2px #ce4138 solid;
      	border-bottom: 1px solid #424242;
      }
      .CX2 .event[data-calendar-name="Karate"] {
      	border-left: 2px #3288ff solid;
      	border-bottom: 1px solid #424242;
      }
      .CX2 .event[data-calendar-name="Abfall"] {
      	border-left: 2px #6bff32 solid;
      	border-bottom: 1px solid #424242;
      }
      .CX2 .slot > .slotContent{
        position:relative;
        width:100%;
        background-image:inherit;
      }
      .CX2 .event.fullday {
        border-radius:0px;
      }
      
      posted in Showcase
      Piranha1605
      Piranha1605
    • RE: Dark UI

      @robertybob
      You will need to adjust the size of the modules.

      posted in Showcase
      Piranha1605
      Piranha1605
    • RE: Bright UI

      @potts-mike

      At first glance, I think that these are the entries attached below.

      .sonos ul .art img {
        height: 400px;
      }
      
      .MMM-PaprikaMenu .menu .today .meal {
        color: #8a8a8a; 
        font-size: 24px;
      }
      

      But it may also be that something is written about the .js or .njk, so have a look

      posted in Showcase
      Piranha1605
      Piranha1605
    • RE: Bright UI

      Please post me all three CSS, from the paprika menu, from Sonos and your custom.css, and I’ll get you ready

      posted in Showcase
      Piranha1605
      Piranha1605
    • RE: CSS for small fullscreen display

      What you mean is called responsive web design. for example, you could use the tablet in portrait or landscape format and thus adjust the position of the modules.You have to change the index.html for this with the meta name viewport, but with an update the index.html will probably be overwritten.

      https://www.w3schools.com/css/css_rwd_intro.asp

      posted in Development
      Piranha1605
      Piranha1605
    • RE: Mirror not starting after updating to MagicMirror² v2.12.0

      @sdetweil
      As often as I have to put on my MM right now, your skips are part of life like eating. 😹 😹 😹

      posted in Troubleshooting
      Piranha1605
      Piranha1605