MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    css switch Module

    System
    3
    5
    387
    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.
    • Piranha1605
      Piranha1605 last edited by Piranha1605

      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;
      }
      
      S Mykle1 2 Replies Last reply Reply Quote 3
      • S
        sdetweil @Piranha1605 last edited by

        @Piranha1605 nice

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • Mykle1
          Mykle1 Project Sponsor Module Developer @Piranha1605 last edited by

          @Piranha1605

          I likey!

          Create a working config
          How to add modules

          Piranha1605 1 Reply Last reply Reply Quote 0
          • Piranha1605
            Piranha1605 @Mykle1 last edited by

            @Mykle1

            I have to thank you, many of your contributions prevented me from throwing the MagicMirror project into the trash 🙂

            Mykle1 1 Reply Last reply Reply Quote 1
            • Mykle1
              Mykle1 Project Sponsor Module Developer @Piranha1605 last edited by

              @Piranha1605 said in css switch Module:

              I have to thank you, many of your contributions prevented me from throwing the MagicMirror project into the trash

              You’re welcome, mate. I hope you enjoy them as much as I did while learning how to make them. 👍

              Create a working config
              How to add modules

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy