I am working on a secondary theme for a site of mine (a dark theme). & I can not understand why a specific bit of CSS is not being applied to a particular element, even though it is being applied on another element that is identical.
URL to the site: https://phpstack-726541-2423367.cloudwaysapps.com/ Toggle the switch in the top right hand corner to enable the dark theme. You can see that it only applies it to the 'Header' & not the 'Footer' even though it can be seen that they both use the same classes through Inspect element.
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('light');
document.querySelector('.navbar').classList.toggle('light');
document.querySelector('button').classList.toggle('light');
document.querySelector('#menu-btn').classList.toggle('light');
document.querySelector('.wve-editor-player').classList.toggle('light');
});/* video editor */
body { padding: 90px 0; background-color: #101010;}
@media screen and (max-width: 568px) {
body { padding: 0; }
body > .container { margin: 0; padding: 0; }
body > .container > .card { border: 0; border-radius: 0; background-color: transparent !important;}
}
.navbar { background-color: #191919; height: 89px; border-bottom: solid 1px #414040; box-shadow: 1px 1px #414040;}
.big { font-size: 120%; }
.small { font-size: 80%; }
.code { max-height: 500px; padding: 5px; overflow: auto; background-color: #eee; }
.btn[disabled] { cursor: not-allowed; color: #fff; background-color: #6c757d; border-color: #6c757d; }
.shadow-1 { box-shadow: 0 0 10px rgba(0,0,0,0.5); }
video,
audio { width: 100%; box-sizing: content-box; }
/* logo */
.logo { color: #0099FF; font-size: 20px; }
.logo img { width: auto; max-width: 200px; margin: -69px; margin-top: -6.9%; padding-left: 50px;}
.logo a { text-decoration: none; }
/* colors */
.bg-white { background-color: #fff; }
.color-blue { color: #236bf1; }
.color-red { color: #f13d2a; }
/* common */
.no-margin { margin: 0 !important; }
.no-wrap { white-space: nowrap; }
.show-on-hover-parent { position: relative; }
.show-on-hover { position: absolute; top: 10px; right: 10px; display: none; }
.show-on-hover-parent:hover .show-on-hover { display: block; }
.card-default { background-color: #F5F5F5; }
.display-inline-block { display: inline-block; }
.btn { cursor: pointer; border-radius: 6EM; border: solid 1px #0099FF;}
.btn:hover { background-color: #CCC; color: #000;}
#import-bttn {background-color: #0099FF; color: #FFF !important;}
.text-ellipsis { display: block; text-align: left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.max-height300 { max-height: 300px; overflow: auto; }
.relative { position: relative; }
.position-absolute { position: absolute; }
.pos-absolute-left { left: 15px; top: 15px; }
.pos-absolute-right { right: 15px; top: 15px; }
.pos-absolute-bottom-left { left: 15px; bottom: 15px; }
/* login */
.card-login { margin-top: 150px; }
.card-login form { margin-bottom: 0; }
/* margins */
.margin-top { margin-top: 1rem; }
.margin-bottom { margin-bottom: 1rem; }
.margin-vert { margin-top: 1rem; margin-bottom: 1rem; }
@media screen and (max-width: 768px) {
.margin-bottom-md { margin-bottom: 1rem; }
}
/* button */
/* .btn {background-color: #161616;} */
.btn:not(.btn-link) { transition: box-shadow 0.3s ease; }
.btn:not(.btn-link):hover { box-shadow: 0 0 10px rgba(0,0,0,0.3); }
.btn[class*="-outline"] { transition: background-color 0.3s ease; background-color: #0099FF; border: solid 1px #101010; color: #FFF !important;}
.btn-icon [class^="icon-"] { line-height: 1.4rem; }
.btn-smp { padding: 0.6rem 1.5rem; }
.btn-outline-info { border-color:#CCC; color: #9E9E9E !important;}
.control-buttons {padding: 0 13px; font-size: 13px; line-height: 36px; margin: 0px 6px; float: right;}
#editor-controls {margin-top: 40px;}
/* form fields */
.form-control[type="text"],
.form-control[type="email"],
.form-control[type="number"],
.form-control[type="password"],
textarea.form-control { background-color: #f1f1f1; box-shadow: inset 0 0 5px rgba(0,0,0,0.1); }
textarea.form-control:focus { background-color: #f1f1f1; }
input[type="range"] { width: 100%; padding: 0; }
.input-range { padding: 7px; border: 1px solid #ddd; border-radius: 4px; }
/* dropdown-menu */
.dropdown-menu { box-shadow: 0 0 10px rgba(0,0,0,0.3); }
/* editor-player */
.wve-editor-player { position: relative; background-color: #161515; border:solid 1px #404040; border-radius: 6px;}
.wve-editor-player video { width: 100%; height: 360px; border-radius: 6px;}
.wve-editor-player-panel { position: absolute; left: 0; bottom: 0; width: 100%; padding: 5px 20px; background-color: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7); opacity: 1; transition: opacity 300ms; }
.wve-editor-player .time { float: right; }
.wve-editor-player .time-current { float: left; }
.wve-editor-player:hover .wve-editor-player-panel { opacity: 0; }
/* list-group */
.list-group { }
.list-group .list-group-item.active .btn-link { color: #fff; }
.list-group .list-group-item .btn-link { max-width: 100%; padding: 0; overflow: hidden; text-overflow: ellipsis; border: none;}
.list-group-item a,
.list-group-item .btn-link { text-decoration: none; }
span.btn.btn-link:hover { background: none; }
/* editor-timeline */
.editor-timeline-wrapper { position: relative; }
#wve-timeline { position: relative; width: 100%; height: 20px; z-index: 11; overflow: hidden; background: none transparent; border: 0; }
#wve-timeline .ui-slider-handle { z-index: 12; width: 12px; height: 20px; top: 0; margin-left: -6px; margin-top: 0; background: none transparent; border: 0; outline: none; }
#wve-timeline .ui-slider-handle:before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; }
#wve-timeline .ui-slider-handle:after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #000000 transparent; }
#wve-timeline-range { position: absolute; left: 0; top: 0; width: 100%; height: 20px; z-index: 12; border: 1px solid rgba(0,0,0,0.2); background: none #eee; border-radius: 0; box-shadow: none !important; }
#wve-timeline-range .noUi-connect { background: none #aaa; }
.noUi-horizontal .noUi-origin { z-index: 10 !important; }
.noUi-horizontal .noUi-connects:first-child .noUi-origin { z-index: 5 !important; }
.noUi-horizontal .noUi-handle.noUi-handle-lower { height: 20px; border: 0; top: -1px !important; background: none transparent; box-shadow: none; }
.noUi-horizontal .noUi-handle.noUi-handle-lower:before { content: ''; display: block; position: absolute; top: 0; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; background-color: transparent; }
.noUi-horizontal .noUi-handle.noUi-handle-lower:after { content: ''; display: block; position: absolute; bottom: 0; top: auto; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #000000 transparent; background-color: transparent; }
/* btn-group-justified */
.btn-group-justified { display: flex; width: 100%; }
.btn-group-justified .btn,
.btn-group-justified .btn-group { flex: 1; }
.btn-group-justified .btn { width: 100%; }
/* progress bar */
.progress { border: none; }
#wve-user-stat {display: none;}
/* preloader */
.wve-preloader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1111; background-color: rgba(0,0,0,0.5); }
.wve-preloader-inner { position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -150px; width: 300px; max-width: 100%; z-index: 1112; padding: 15px; background-color: #fff; border-radius: 6px; }
.wve-preloader-caption { padding: 0 0 15px 0; text-align: center; }
.wve-preloader-content { height: 20px; background: url("../img/preloader.gif") center center no-repeat; }
.wve-preloader-progress { }
.wve-preloader-progress .progress { border: 1px solid #b1b1b1; }
.wve-preloader-progress .progress-bar { width: 0; height: auto; overflow: hidden; padding: 2px 0 0 0; }
.wve-preloader-progress .progress-bar-empty { padding-top: 20px; }
/* bottom-list-container */
.bottom-list-container { max-height: 338px; overflow: auto; }
.bottom-list-container td { min-width: 150px; }
/* episode-item */
.wve-episode-container { margin: 0; padding: 0; }
.episode-item { float: left; margin-top: 15px; padding: 15px 5px; }
.episode-item > .card { border-color: rgba(0,0,0,.7); background: url("../img/preloader_circle.gif") no-repeat center center transparent; opacity: 1; overflow: hidden; }
.episode-item .card-block { min-height: 80px; background: none no-repeat center center transparent; background-size: cover; }
.episode-item > .card:hover { background-image: none; }
.episode-item > .card:hover .card-block { opacity: 0.3; }
#wve-episode-container {padding: 0px 55px 0px 55px;}
/* video-thumbnail */
.video-thumbnail { min-height: 150px; background: #eee url("../img/icon_film.png") center center no-repeat; }
/* wve-time-selected-inputs */
#wve-time-selected-inputs { width: 340px; position: absolute; left: 0; top: -56px; display: none; }
#wve-time-selected-inputs .card-block { background-color: #b6b6b6; }
#wve-time-selected-inputs .card-block input.form-control { background-color: #a5a5a5; color: #fff; }
#wve-time-selected-inputs .card-block input.form-control:focus,
#wve-time-selected-inputs .card-block input.form-control:active { border-color: #6f6f6f; }
.card { border: none; background-color: transparent;}
.form-group { margin-top: 16px; margin-bottom: 1rem; }
#footer { background-color: #FFF; border-top: solid 1px #CCC; box-shadow: 1px 1px 1px 1px#ececec; display: none; }
#footer-padding { padding: 10px 9px 9px 40px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background-color: #0099FF; width: 6px; border-radius: 6px; }
/* light theme css */
body.light { background-color: #F9F9F9; }
div.navbar.light { background-color: #FFF; border-bottom: solid 1px #CCC; box-shadow: 1px 1px #ececec}
button.btn.light { background-color: #FFF; background-color: #FFF; color: #909090 !important; border: solid 1px #CCC;}
div.wve-editor-player.light { background-color: #DDD; border: 1px solid #DDD;}<div id = "header">
<div >
<div style = "display: inline-block; padding: 0px 10px 0px 10px;">
<input type="checkbox" id="customSwitch1">
<label for="customSwitch1"></label>
</div>
<div >
<button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span ></span>
</button>
<div >
<a href="#" data-toggle="action" data-action="profile">
<span ></span>
<?php echo $lang['profile']; ?>
</a>
<?php if( $user['role'] == 'admin' ): ?>
<div ></div>
<a href="<?php echo $config['base_url'] . $config['home_url']; ?>?action=users">
<span ></span>
<?php echo $lang['users']; ?>
</a>
<?php endif; ?>
<?php if( $userOptions['show_log'] ): ?>
<div ></div>
<a href="#" data-toggle="action" data-action="log">
<span ></span>
<?php echo $lang['log']; ?>
</a>
<?php endif; ?>
<?php if( $config['authentication'] ): ?>
<div ></div>
<a href="<?php echo $config['base_url'] . $config['home_url']; ?>index.php?action=logout">
<span ></span>
<?php echo $lang['log_out']; ?>
</a>
<?php endif; ?>
</div>
</div>
</div>
<div >
<h2 >
<img src="<?php echo $config['logo_image']; ?>" alt="<?php echo $config['app_title']; ?>">
<!--<span ><?php echo $config['app_title']; ?></span>-->
</h2>
</div>
<div >
<div id="wve-user-stat">
<div >
<div role="progressbar" style="width: <?php echo $userOptions['files_size_percent']; ?>%" aria-valuenow="<?php echo $userOptions['files_size_percent']; ?>" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div >
<?php echo $lang['used']; ?>:
<?php echo $userOptions['files_size_percent']; ?>%
—
<?php echo $userOptions['files_size_total']; ?>
/
<?php echo $userOptions['files_size_max']; ?>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<button type="button" data-toggle="action" data-action="import" id = "import-bttn">
<span ></span>
<?php echo $lang['import_media']; ?>
</button>
</div>
<div style="max-height: 338px; overflow: auto;">
<ul id="wve-list_input">
</ul>
</div>
</div>
<div >
<div >
<div >
<div >
<video src="" preload="auto" width="400" height="360" id="wve-video"></video>
<div style="display: none;">
<div id="wve-editor-player-time"></div>
<div id="wve-editor-player-time-current"></div>
</div>
</div>
<div id = "editor-controls">
<button type="button" data-toggle="action" data-action="stepback_main">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M11 16.07V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.56.4-.56 1.24 0 1.63l5.77 4.07c.67.47 1.58 0 1.58-.81zm1.66-3.25l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"></path></svg> <span >Step back</span>
</button>
<button type="button" data-toggle="action" data-action="play_main">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M9.5,14.67V9.33c0-0.79,0.88-1.27,1.54-0.84 l4.15,2.67c0.61,0.39,0.61,1.29,0,1.68l-4.15,2.67C10.38,15.94,9.5,15.46,9.5,14.67z"></path></g></svg> <span >Play</span>
</button>
<button type="button" data-toggle="action" data-action="stepforward_main">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M5.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L5.58 7.11C4.91 6.65 4 7.12 4 7.93v8.14c0 .81.91 1.28 1.58.82zM13 7.93v8.14c0 .81.91 1.28 1.58.82l5.77-4.07c.56-.4.56-1.24 0-1.63l-5.77-4.07c-.67-.47-1.58 0-1.58.81z"></path></svg> <span >Step forward</span>
</button>
<button data-toggle="action" data-action="take-episode">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1zm17-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3h-3c-.55 0-1-.45-1-1s.45-1 1-1h3V6c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z"></path></svg> <span >Take episode</span>
</button>
<button type="button" data-toggle="action" data-action="play_selected">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M10.8 15.9l4.67-3.5c.27-.2.27-.6 0-.8L10.8 8.1c-.33-.25-.8-.01-.8.4v7c0 .41.47.65.8.4zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg> <span >Play episode</span>
</button>
<button data-toggle="action" data-action="cut-fast">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9.64 7.64c.29-.62.42-1.33.34-2.09-.19-1.73-1.54-3.2-3.26-3.49-2.77-.48-5.14 1.89-4.66 4.65.3 1.72 1.76 3.07 3.49 3.26.76.08 1.46-.05 2.09-.34L10 12l-2.36 2.36c-.62-.29-1.33-.42-2.09-.34-1.73.19-3.2 1.54-3.49 3.26-.48 2.77 1.89 5.13 4.65 4.65 1.72-.3 3.07-1.76 3.26-3.49.08-.76-.05-1.46-.34-2.09L12 14l7.59 7.59c.89.89 2.41.26 2.41-1v-.01c0-.37-.15-.73-.41-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zm7.59-10.09L13 9l2 2 6.59-6.59c.26-.26.41-.62.41-1V3.4c0-1.25-1.52-1.88-2.41-.99z"></path></svg> <span >Cut fast</span>
</button>
<button type="button light" data-toggle="action" data-action="render">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M21.98 15.65C21.16 14.64 19.91 14 18.5 14C17.44 14 16.46 14.37 15.69 14.99C14.65 15.81 14 17.08 14 18.5C14 19.34 14.24 20.14 14.65 20.82C14.92 21.27 15.26 21.66 15.66 21.98H15.67C16.44 22.62 17.43 23 18.5 23C19.64 23 20.67 22.58 21.46 21.88C21.81 21.58 22.11 21.22 22.35 20.82C22.76 20.14 23 19.34 23 18.5C23 17.42 22.62 16.42 21.98 15.65ZM20.76 17.94L18.36 20.16C18.22 20.29 18.03 20.36 17.85 20.36C17.66 20.36 17.47 20.29 17.32 20.14L16.21 19.03C15.92 18.74 15.92 18.26 16.21 17.97C16.5 17.68 16.98 17.68 17.27 17.97L17.87 18.57L19.74 16.84C20.04 16.56 20.52 16.58 20.8 16.88C21.09 17.19 21.07 17.66 20.76 17.94Z"></path><path d="M14.7295 5.86V2.5C14.7295 2.22 14.5095 2 14.2295 2H9.76953C9.48953 2 9.26953 2.22 9.26953 2.5V5.86C9.26953 6.14 9.48953 6.36 9.76953 6.36H14.2295C14.5095 6.36 14.7295 6.14 14.7295 5.86Z"></path><path d="M7.24851 2.0207C4.68851 2.1807 2.93851 3.5007 2.28851 5.7007C2.18851 6.0307 2.42851 6.3607 2.76851 6.3607H7.26851C7.54851 6.3607 7.76851 6.1407 7.76851 5.8607V2.5207C7.76851 2.2407 7.52851 2.0007 7.24851 2.0207Z"></path><path d="M16.7505 2.00898C19.3105 2.16898 21.0605 3.48898 21.7105 5.68898C21.8105 6.01898 21.5705 6.34898 21.2305 6.34898H16.7305C16.4505 6.34898 16.2305 6.12898 16.2305 5.84898V2.50898C16.2305 2.22898 16.4705 1.98898 16.7505 2.00898Z"></path><path d="M22 8.35937V12.7394C22 13.1094 21.61 13.3494 21.28 13.1794C20.44 12.7394 19.48 12.4994 18.5 12.4994C16.89 12.4994 15.32 13.1594 14.2 14.3094C13.1 15.4294 12.5 16.9194 12.5 18.4994C12.5 19.3094 12.82 20.3494 13.22 21.2194C13.38 21.5694 13.14 21.9994 12.75 21.9994H7.81C4.6 21.9994 2 19.3994 2 16.1894V8.35937C2 8.07937 2.22 7.85938 2.5 7.85938H21.5C21.78 7.85938 22 8.07937 22 8.35937Z"></path></svg> Create Video
</button>
</div>
</div>
<div >
</div>
</div>
</div>
</div>
</div>
</div>
<div ></div>
<!-- Timeline slider -->
<div >
<div >
<div >
<div id="wve-timeline"></div>
<div id="wve-timeline-range"></div>
<div id="wve-time-selected-inputs">
<div >
<div >
<div >
<input type="text" value="">
</div>
<div >
<input type="text" value="">
</div>
<div >
<button type="button" >
<i ></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div ></div>
</div>
</div>
<!-- /Timeline slider -->
<!--episode/clip(s) container-->
<div id="wve-episode-container" style="display: none;">
<hr >
<div id="wve-episode-container-inner"></div>
<div ></div>
</div>
<!-- Output list -->
<div >
<div >
<div >
<table >
<colgroup>
<col width="40%">
<col width="20%">
<col width="15%">
<col width="15%">
<col width="10%">
</colgroup>
<tbody id="wve-list_output"></tbody>
</table>
</div>
</div>
</div>
<!-- /Output list -->
<script>
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('light');
document.querySelector('.navbar').classList.toggle('light');
document.querySelector('button').classList.toggle('light');
document.querySelector('#menu-btn').classList.toggle('light');
document.querySelector('.wve-editor-player').classList.toggle('light');
});
</script>Image included of the desired result as well. Thanks for any input or proposal in advance!
CodePudding user response：
It's seems that your problem stems from you using querySelector()
Since the output will always be the first element matching the criteria (in your case it seems to be your header) ( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector )
Try using an id instead for your footer or using querySelectorAll() which will return a list of elements (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
Hope I could help you, keep me updated if you fixed it ! :)
CodePudding user response：
As Canadian_Pixel explained. In addition, .querySelecyorAll() returns a NodeList which is an array-like object consisting of all elements that the selector (a string identical to a CSS selector, ex. ".navbar") matches. In order to execute a class change on each .navbar within the NodeList you'll need to iterate though it as if it is an array. At this point you can work with a NodeList and use some basic Array methods and loops, or convert the NodeList into an array (see end of this answer). In this case, the former (ie. NodeList) is good enough.
Replace this:
document.querySelectorAll('.navbar').classList.toggle('light');
with this:
document.querySelectorAll('.navbar').forEach(nav => nav.classList.toggle('light'));
The above works 100%, I already tested it on your site. If for some reason you need the whole arsenal of the Array API:
Array.from(document.querySelectorAll('.navbar'));
OR
[...document.querySelectorAll('.navbar')]