MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. Sam 0
    3. Best
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    S
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 36
    • Groups 0

    Posts

    Recent Best Controversial
    • MMM-HolidayLights beautiful CSS for a slightly calmer light

      76af8537-6252-43f3-b44f-52c5cff46a12-image.png
      I share this beautiful CSS for a slightly calmer light.
      This is the module:
      https://github.com/justjim1220/MMM-HolidayLights.

      Show what yours looks like or your adjustments.

      /* to modify, follow the commented directions
       * please report any problems or issues, I'm always glad to help! */
      
      .MMM-HolidayLights {
          width: 100%;
          align-self: center;
      }
      .strand {
      	text-align: center;
      	white-space: nowrap;
      	overflow: hidden;
      	position: absolute;
      	z-index: 1;
      	margin: -15px 0 0 0;
      	padding: 0;
      	pointer-events: none;
      }
      
      .strand li {
      	position: relative;
      	-webkit-animation-fill-mode: both;
      	animation-fill-mode: both;
      	-webkit-animation-iteration-count: infinite;
      	animation-iteration-count: infinite;
      	list-style: none;
      	margin: 0;
      	padding: 0;
      	display: block;
      	width: 36px;
      	height: 75px;
      	border-radius: 50%;
      	margin: 20px;
      	display: inline-block;
      	-webkit-animation-name: flash-1;
      	animation-name: flash-1;
      	-webkit-animation-duration: 1.7s;
      	animation-duration: 1.7s;
      }
      
      
      
      .strand li:nth-child(2n+1) {
      	-webkit-animation-name: flash-2;
      	animation-name: flash-2;
      	-webkit-animation-duration: 2s;
      	animation-duration: 2s;
      }
      
      .strand li:nth-child(3n+2){
      	-webkit-animation-name: flash-3;
      	animation-name: flash-3;
      	-webkit-animation-duration: 1.4s;
      	animation-duration: 1.4s;
      }
      
      .strand li:nth-child(4n+3) {
      	-webkit-animation-name: flash-4;
      	animation-name: flash-4;
      	-webkit-animation-duration: 1.1s;
      	animation-duration: 1.1s;
      }
      
      .strand li:before {
      	content: "";
      	position: absolute;
      	background: #090;
      	width: 32px;
      	height: 9.33333px;
      	border-radius: 3px;
      	top: -6.66667px;
      	left: 1px;
      }
      
      .strand li:after {
      	content: "";
      	top: -20px;
      	left: 28px;
      	position: absolute;
      	width: 52px;
      	height: 18.66667px;
      	border-bottom: solid #090 2px;
      	border-radius: 50%;
      }
      
      .strand li:last-child:after {
      	content: "";
      }
      
      /* the following sections are for the flashing animations
      * each light has 2 sections with correspong frames, IE: @-webkit-keyframes flash-1 & @keyframes flash-1
      * both sections must match in color
      * the 0%, 100% section is the light ON, the 50% sction is the light OFF
      * the box-shadow lines MUST br in rgba format to get the 50% of the color
      * to find the rgb of a hex color code, go here: https://www.colorhexa.com/
      * you may find it easier to use rgb format for the background (0%, 100%) color as well
      * the rgb format must have 3 numbers IE: rgba(255, 66, 0)
      * to get the 50% effect add an a to the rgb and 0.5 at the end of the rgb
      * the rgba format must have 4 numbers IE: rgba(255, 66, 0, 0.5)
      * this template is set for 6 different colored lights
      * to have less, delete or comment out the last one(s)
      * IE: to have only 3 lights, remove the fourth, fifth, & sixth sections */
      
      /* color of 1st light in the string */
      @-webkit-keyframes flash-1 {
      	0%, 100% {
      		background: #daa520; /* change color here */
      		box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
      	}
      	50% {
      		background: rgba(255, 215, 0); /* change color here */
      		box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
      	}
      }
      
      @keyframes flash-1 {
      	0%, 100% {
              background: #daa520; /* change color here */
              box-shadow: 0px 4.66667px 48px 3px #daa5200; /* change color here */
          }
          50% {
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      /* color of 2nd light in the string */
      @-webkit-keyframes flash-2 {
      	0%,	100% {
      		background: #daa520; /* change color here */
      		box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
      	}
      	50% {
      		background: rgba(255, 215, 0); /* change color here */
      		box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0)); /* change color here */
      	}
      }
      
      @keyframes flash-2 {
      	0%, 100% {
              background: #daa520; /* change color here */
              box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
          }
          50% {
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      /* color of 3rd light in the string */
      @-webkit-keyframes flash-3 {
      	0%,	100% {
      		background: #daa520; /* change color here */
      		box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
      	}
      	50% {
      		background: rgba(255, 215, 0); /* change color here */
      		box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      @keyframes flash-3 {
      	0%, 100% {
              background: #daa520; /* change color here */
              box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
          }
          50% {
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      /* color of 4th light in the string */
      @-webkit-keyframes flash-4 {
          0%,	100%{
              background: #daa520; /* change color here */
              box-shadow: 0px 4.6667px 48px 3px #daa520; /* change color here */
          }
          50%{
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px (66, 0, 0, 0.5); /* change color here */
          }
      }
          
      @keyframes flash-4 {
          0%,	100% {
              background: #daa520; /* change color here */
              box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
          }
          50% {
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      /* color of 5th light in the string */
      @-webkit-keyframes flash-5 {
          0%,	100%{
              background: #daa520; /* change color here */
              box-shadow: 0px 4.6667px 48px 3px #daa520;
          }
          50%{
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
          
      @keyframes flash-5 {
          0%,	100% {
              background: #daa520; /* change color here */
              box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
          }
          50% {
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      /* color of 6th light in the string */
      @-webkit-keyframes flash-6 {
          0%,	100%{
              background: #daa520; /* change color here */
              box-shadow: 0px 4.6667px 48px 3px #daa520; /* change color here */
          }
          50%{
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
          
      @keyframes flash-6 {
          0%,	100% {
              background: #daa520; /* change color here */
              box-shadow: 0px 4.66667px 48px 3px #daa520; /* change color here */
          }
          50% {
              background: rgba(255, 215, 0); /* change color here */
              box-shadow: 0px 4.66667px 48px 3px rgba(255, 215, 0); /* change color here */
          }
      }
      
      
      
      posted in Entertainment
      S
      Sam 0
    • 1 / 1