/* First is the default css for handling framework elements like tabs and control panels. Insert your custom CSS for your plugin at the bottom. */ .ktwp_css_holiday_lights-icon { /* ORIG width: 24px; height: 24px; background: #808080; border-radius: 3px; */ position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: black 0px 0px 8px, white 0px 0px 30px !important; width: 36px; height: 30px; background: rgb(255, 255, 255); border-radius: 0px 6px 6px 0px; border: 0.25px solid #eee; padding: 0; } .ktwp_css_holiday_lights-icon:hover { background: #ffd; /* box-shadow: 0px 0px 16px #fff !important; Nah */ } .ktwp_css_holiday_lights-icon .ktwp_css_holiday_lights-hover-text { position: absolute; left: 38px; top: 50%; transform: translateY(-50%); background: #808080; color: white; padding: 4px 8px; border-radius: 3px; white-space: nowrap; opacity: 0; width: 0; overflow: hidden; transition: all 0.3s ease; } .ktwp_css_holiday_lights-icon:hover .ktwp_css_holiday_lights-hover-text:not(*:hover) { opacity: 1; width: 130px; text-align: center; min-width: fit-content; } .ktwp_css_holiday_lights-control { position: fixed; left: 0px; top: 140px; font-size: 14px !important; z-index: 10000 !important; display: none; /* won't show until it's positioned, because otherwise CloudFlare rocketloader or other script deferral optimizations run the javascipt that repositions it after a noticeable delay after it's first displayed. */ } .ktwp_css_holiday_lights-icon svg /* replace SVG with whatever tab content is */ { /*style tab content */ color: #1a1a1a; filter: drop-shadow(1px 1px 2px rgba(255, 255, 0, .8)); height: 16px; /*customize to taste */ width: 16px; /*customize to taste */ } .ktwp_css_holiday_lights-panel { /* panel sizing, padding etc. here */ box-shadow: /*0 4px 8px rgba(0, 0, 0, 0.4)*/ 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 24px white; display: none; position: fixed; /* ORIG bottom: 30px; left: 0; */ top: 12px; left: 12px; width: fit-content; /* MAKE THIS YOUR PANEL WIDTH */ background: white; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px; z-index: 999999; max-width: 90vw; max-height: 65vh; overflow-y: auto; overflow-x:hidden; /* those last 3 are for iOS, you might want to wrap them in @media screen and (max-width:600px) {} or whatever width is best for you */ } .ktwp_css_holiday_lights-panel-header { display: flex; justify-content: space-between; align-items: center; /* margin-bottom: 15px; OPTIONS - spacing and horizontal line under panel title padding-bottom: 10px; border-bottom: 1px solid #eee; */ } .ktwp_css_holiday_lights-panel-header > .ktwp_css_holiday_lights-close-button { background: none; border: none; font-size: 24px !important; cursor: pointer; color: #666; position: absolute; /* display: block; */ right: 6px; top: 6px; } .ktwp_css_holiday_lights-panel-content { /* this is here if you need to style the panel content. For instance, for a bunch of controls, maybe use display:grid; grid-template-columns:auto auto; grid-column-gap:6px; */ } /* Insert additional custom CSS for your plugin below here. */ /* xmas lights */ #lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: fixed; z-index: 1000; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; } #lightrope > li { position: relative; display: inline-block; list-style: none; margin: 20px 20px 20px 22px; } #lightrope > li > div { position: relative; border-left: 2px solid rgba(0,0,0,.05); border-right: 2px solid rgba(255,255,255,.5); margin: 2px 0 0 -3px; padding: 0; display: block; width: 8px; height: 18px; border-radius: 50%; transform-origin: top center; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; pointer-events: auto; } /* Colors for different bulbs */ #lightrope > li:nth-child(5n+0) > div { -webkit-animation-duration: 0.8s, 4.1s, 3s; animation-duration: 0.8s, 4.1s, 3s; } #lightrope > li:nth-child(5n+1) > div { -webkit-animation-duration: .9s, 4.3s, 3s; animation-duration: .9s, 4.3s, 3s; } #lightrope > li:nth-child(5n+2) > div { -webkit-animation-duration: 1s, 4.5s, 3s; animation-duration: 1s, 4.5s, 3s; } #lightrope > li:nth-child(5n+3) > div { -webkit-animation-duration: 1.1s, 4.7s, 3s; animation-duration: 1.1s, 4.7s, 3s; } #lightrope > li:nth-child(5n+4) > div { -webkit-animation-duration: 1.2s, 4.9s, 3s; animation-duration: 1.2s, 4.9s, 3s; } /* Animation assignments */ #lightrope > li:nth-child(4n+0) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #00f7a5; box-shadow: 0px 4.6666666667px 24px 3px #00f7a5; } #lightrope > li:nth-child(4n+1) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #0CF; box-shadow: 0px 4.6666666667px 24px 3px #0CF; } #lightrope > li:nth-child(4n+2) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #f76666; box-shadow: 0px 4.6666666667px 24px 3px #f76666; } #lightrope > li:nth-child(4n+3) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #FFEE33; box-shadow: 0px 4.6666666667px 24px 3px #FFEE33; } #lightrope > li > div:hover { -webkit-animation: flash-all 0.8s infinite linear; animation: flash-all 0.8s infinite linear; } /* Special case for the fifth light */ #lightrope > li.broken > div { left: -2px; background: #CCC !important; border-left: 2px solid #BDE; border-right: 2px solid #DEF; box-shadow: none !important; -webkit-animation-name: none !important; animation-name: none !important; -webkit-animation-duration: 0s !important; animation-duration: 0s !important; -webkit-transform: rotatez(15deg) !important; transform: rotatez(15deg) !important; } /* Bulb top and cord */ #lightrope > li:before { content: ""; position: absolute; background: #262; width: 4px; height: 8px; border-radius: 3px; top: -4.6666666667px; left: -1px; border-left: 2px solid rgba(0,0,0,.05); border-right: 2px solid rgba(255,255,255,.5); } #lightrope > li::after { content: ""; top: -12px; left: -1px; position: absolute; width: 58px; height: 18.6666666667px; border-bottom: solid #262 2px; border-radius: 50%; background: #060; --mask: radial-gradient(5.66px at 50% calc(100% + 4.2px),#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 6px) calc(50% - 2px + .5px)/12px 4px repeat-x, radial-gradient(5.66px at 50% -4.2px,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) 50% calc(50% + 2px)/12px 4px repeat-x, radial-gradient(7.38px at 50% calc(100% + 5.6px),#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 8px) calc(50% - 2.5px + .5px)/16px 5px repeat-x, radial-gradient(7.38px at 50% -5.6px,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) 50% calc(50% + 2.5px)/16px 5px repeat-x; -webkit-mask: var(--mask); mask: var(--mask); } #lightrope li:last-child:after { content: none; } #lightrope li:first-child { margin-left: -40px; } /* Animations */ @-webkit-keyframes flickPendulum { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 20% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); } 30% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 50% { -webkit-transform: rotate(9deg); transform: rotate(9deg); } 60% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes flickPendulum { 0% { transform: rotate(0deg); } 10% { transform: rotate(20deg); } 20% { transform: rotate(-18deg); } 30% { transform: rotate(15deg); } 40% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } 90% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes flash-all { 0%, 25%, 75%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes flash-all { 0%, 25%, 75%, 100% { opacity: 1; } 50% { opacity: .45; } } @-webkit-keyframes sway { 0%, 100% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } 50% { -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg); } } @keyframes sway { 0%, 100% { transform: rotate(0.5deg); } 50% { transform: rotate(-0.5deg); } } /* end of xmas lights */