Board Thread:PBS Kids/@comment-31322722-20171012225821/@comment-31322722-20171012231308

I’m posting the css codes for PBS KIDS Halloween mode.

Part 1: /* Headband override */ body.polaroid-halloween-theme div#headband-container, body.polaroid-halloween-theme div#headband-container #parents-message-bar .parents-message .more-toggle{ } body.polaroid-halloween-theme div#headband-container .headband-nav{ } body.polaroid-halloween-theme div#headband-container a, body.polaroid-halloween-theme div#headband-container .headband-nav .nav-item a, body.polaroid-halloween-theme div#headband-container #parents-message-bar .parents-message, body.polaroid-halloween-theme div#headband-container #headband-user-block { color: #d24405; } body.polaroid-halloween-theme div#headband-container #parents-message-bar .for-parents-badge, body.polaroid-halloween-theme div#headband-container #parents-message-bar #squished-headband-toggle{ border-color: #b03a06; } body.polaroid-halloween-theme div#headband-container #parents-message-bar .parents-bar-bookmarks ul li .parents-bar-bookmark{ } body.polaroid-halloween-theme #headband-container .headband-nav .nav-item.settings button[data-action=settings-trigger]{ background-image: url('../images/halloween-bar-settings.svg'); background-position: 50% 50% !important; } .no-svg body.polaroid-halloween-theme #headband-container .headband-nav .nav-item.settings button[data-action=settings-trigger]{ background-image: url('../images/halloween-bar-settings.png'); } /* Hompage Color Overrides */ .polaroid-halloween-theme{ background: #ff8a00; } body.polaroid-halloween-theme .nav-buttons .phat-button, body.polaroid-halloween-theme .scroll-arrow.phat-button{ border-color: #3f0e68; } body.polaroid-halloween-theme .nav-buttons .phat-button.tall{ padding: 0; } body.polaroid-halloween-theme .nav-buttons .phat-button em{ padding: 20px 0 16px; border-bottom: 10px solid #3f0e68; margin-bottom: -10px; } body.polaroid-halloween-theme .nav-buttons .phat-button.hovered em { border-bottom-width: 6px; } body.polaroid-halloween-theme .nav-buttons .phat-button.tapped em, body.polaroid-halloween-theme .nav-buttons .phat-button.clicked em { border-bottom-width: 0px; } body.polaroid-halloween-theme .nav-buttons .phat-button em:after{ } body.polaroid-halloween-theme .theme-section .nav-buttons .phat-button:after{ width: 808px; height: 588px; pointer-events: none; } body.polaroid-halloween-theme .theme-section .phat-button.left:after{ background: url('../images/halloween-web-left.png') left bottom no-repeat; left: -350px; } body.polaroid-halloween-theme .theme-section .phat-button.right:after{ background: url('../images/halloween-web-right.png') left bottom no-repeat; right: -350px; } @media only screen and (max-width: 775px){ body.polaroid-halloween-theme .theme-section .nav-buttons .phat-button:after{ width: 606px; bottom: 0px; } 	body.polaroid-halloween-theme .theme-section .phat-button.right:after{ background-position: right bottom; right: -320px; }    body.polaroid-halloween-theme .theme-section .phat-button.left:after{ left: -320px; } } body.polaroid-halloween-theme .grid-tabs .panel-head.toggle-flag.active, body.polaroid-halloween-theme .sub .grid-tabs .phat-button.show-all{ } body.polaroid-halloween-theme .sub .grid-tabs .phat-button.show-all{ border-color: #ec6705; } body.polaroid-halloween-theme .grid-tabs .panel-head.toggle-flag.active:after{ border-top-color: #ff8a00; } .polaroid-halloween-theme .theme-section #theme-stage .theme-mini-wrapper{ display: none; } @media only screen and (max-width: 601px) { .polaroid-halloween-theme .theme-section #theme-stage .theme-mini-wrapper { display: block; } } .polaroid-halloween-theme .brand { min-width: 100px; } @media only screen and (min-width: 1600px) { .polaroid-halloween-theme .brand{ } } .polaroid-halloween-theme .theme-section #theme-stage #change-up-controls{ top: 15%; } .polaroid-halloween-theme #polaroid-theme-stage .snap-stage{ overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .polaroid-halloween-theme #camera-svg{ position: absolute; width: 85px; height: 117px; left: 50%; margin-left: -42.5px; top: 50%; margin-top: -175px; transform: scale(1.6); -ms-transform: scale(1.6); -webkit-transform: scale(1.6); pointer-events: all; } .polaroid-halloween-theme #camera-svg:hover{ cursor: pointer; } .polaroid-halloween-theme #flash-svg{ position: absolute; z-index: 1; width: 400px; height: 400px; left: 50%; top: 50%; margin-left: -200px; margin-top: -260px; display: none; } .polaroid-halloween-theme #flash-svg.visible{ display: block; } .polaroid-halloween-theme #camera-svg-stage > svg{ position: absolute; } .polaroid-halloween-theme #theme-stage .theme-big-active .theme-fallback{ width: 100%; min-width: 600px; max-width: 950px; height: 400px; margin: 75px auto 0; position: relative; } .polaroid-halloween-theme #theme-stage.static-mode .theme-big-active .theme-fallback{ display: block; } .polaroid-halloween-theme #theme-stage.static-mode .theme-big-active .max-wrapper > svg{ display: none; } .polaroid-halloween-theme .theme-fallback #fallback-headshots{ position: relative; width: 100%; height: 100%; } .polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot{ width: 215px; height: 215px; border: 30px solid #ffffff; position: absolute; top: 14px; } .polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot .show-link{ display: block; width: 100%; height: 100%; } .polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot .show-link .show-title{ display:none; } .polaroid-halloween-theme .theme-fallback #fallback-headshots .headshot .show-link .show-graphic{ width: 100%; height: 100%; } .polaroid-halloween-theme .theme-fallback #fallback-headshots #headshot-two{ left: 50%; margin-left: -137.5px; } .polaroid-halloween-theme .theme-fallback #fallback-headshots #headshot-three{ right: 0; } /* Camera Specific Styles */ .polaroid-halloween-theme #camera-button{ transform: translateY(10px); -webkit-transform: translateY(10px); } .polaroid-halloween-theme #camera-arrow{ stroke-width: 1; display: none; } .polaroid-halloween-theme #camera-arrow{ stroke: #ff8a00; } .polaroid-halloween-theme #camera-arrow.bouncing{ display: block; animation:        arrow-bounce .75s linear infinite; -webkit-animation: arrow-bounce .75s linear infinite; } @-webkit-keyframes arrow-bounce { 0% { 	    transform: translateY(10px); -webkit-transform: translateY(10px); } 	 80% { 	   transform: translateY(0); -webkit-transform: translateY(0); }    100% { 	    transform: translateY(10px); -webkit-transform: translateY(10px); } } @keyframes arrow-bounce { 0% { 	    transform: translateY(10px); -ms-transform: translateY(10px); } 	 80% { 	   transform: translateY(0); -ms-transform: translateY(0); }    100% { 	    transform: translateY(10px); -ms-transform: translateY(10px); } } /* Swap to static version */ @media only screen and (max-width: 601px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-top: 15px; min-width: 400px; max-width: 450px; margin-left: 125px; } 	.polaroid-halloween-theme .brand { min-width: 82px; } 	#change-up-controls{ display: none; } } @media only screen and (max-width: 525px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-left: 70px; }	 } @media only screen and (max-width: 480px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-top: 8px; margin-left: -22px; }	 } @media only screen and (max-width: 400px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-top: 15px; }	 } @media only screen and (max-width: 360px) { .polaroid-halloween-theme .theme-section #theme-stage img.theme-mini-static{ margin-left: -80px; margin-top: 25px; }	 } @media only screen and (max-width: 1025px) { .polaroid-halloween-theme #camera-svg{ transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); top: 55%; } } @media only screen and (max-width: 775px) { .polaroid-halloween-theme #camera-svg{ top: 40%; } } @media only screen and (max-height: 680px) and (max-width: 825px) and (min-width: 602px) { .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 356px; }    .polaroid-halloween-theme #camera-svg{ transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); top: 60%; } } @media only screen and (max-height: 715px) and (max-width: 1025px) and (min-width: 826px) { .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 440px; } } @media only screen and (max-height: 730px) and (min-width: 1025px) and (max-width: 1230px){ .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 480px; } } @media only screen and (max-height: 730px) and (min-width: 1231px) and (max-width: 1381px){ .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 515px; } } @media only screen and (min-height: 841px) and (max-width: 850px){ } @media only screen and (max-height: 840px) and (min-width: 1382px){ .polaroid-halloween-theme .scroll-panel.theme-section { min-height: 555px; } } @media only screen and (max-height: 888px) and (max-width: 775px) and (min-width: 602px){ .polaroid-halloween-theme .scroll-panel.theme-section { height: 635px !important; } } @media only screen and (min-height: 1100px) and (min-width: 1382px){ } display: none; } .has-flash #full-version, .no-flash #no-flash-version{ display: block; }
 * 1) no-flash-version,
 * 2) full-version{