123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <style>
- #open-settings {
- color: var(--color-muted);
- display: block;
- margin: 15px 15px 5px;
- }
- .modal-wrap {
- -webkit-transition: all 0.3s ease-in-out;
- align-items: center;
- background: rgba(0, 0, 0, 0.8);
- display: flex;
- height: 100%;
- justify-content: center;
- left: 0;
- opacity: 1;
- overflow: auto;
- position: fixed;
- top: 0;
- transition: all 0.3s ease-in-out;
- visibility: hidden;
- width: 100%;
- z-index: 100000;
- }
- .modal-wrap.visible {
- opacity: 1;
- visibility: visible;
- }
- .modal-wrap .modal-container {
- box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
- color: var(--base-6);
- margin: 1em;
- max-width: 94%;
- width: 600px;
- }
- .modal-wrap .modal-header {
- align-items: center;
- background: var(--table-header);
- display: flex;
- justify-content: space-between;
- padding: 15px 30px;
- }
- .modal-wrap .modal-header h3 {
- color: var(--base-6);
- margin: 0;
- }
- .modal-wrap .modal-header .close-modal {
- background: transparent;
- border: 0;
- color: var(--base-4);
- cursor: pointer;
- font-size: 28px;
- line-height: 1;
- }
- .modal-wrap .modal-header .close-modal:hover { opacity: 1; }
- .modal-wrap .modal-content {
- background: var(--base-1);
- margin: 0;
- padding: 15px 30px;
- width: 100%;
- z-index: 100000;
- }
- .modal-content h4 {
- border-bottom: var(--border);
- margin: 0 0 15px;
- padding: 0 0 5px;
- }
- .modal-content input, .modal-content .form-help {
- margin-left: 15px;
- }
- .modal-content label {
- cursor: pointer;
- font-size: 16px;
- margin-left: 3px;
- }
- .modal-content .form-help {
- color: var(--color-muted);
- font-size: 14px;
- margin: 5px 0 15px 33px;
- }
- .modal-content .form-help + h4 {
- margin-top: 45px;
- }
- @media (max-width: 768px) {
- #open-settings {
- color: transparent;
- }
- #sidebar:hover #open-settings, #sidebar.expanded #open-settings {
- color: var(--color-muted);
- }
- #open-settings:before {
- content: '\2699';
- font-weight: bold;
- font-size: 25px;
- color: var(--color-muted);
- }
- #sidebar:hover #open-settings:before, #sidebar.expanded #open-settings:before {
- content: '';
- }
- }
- </style>
- <a href="#" id="open-settings">Settings</a>
- <div class="modal-wrap" id="profiler-settings">
- <div class="modal-container">
- <div class="modal-header">
- <h3>Configuration Settings</h3>
- <button class="close-modal">×</button>
- </div>
- <div class="modal-content">
- <h4>Theme</h4>
- <input class="config-option" type="radio" name="theme" value="light" id="settings-theme-light">
- <label for="settings-theme-light">Light</label>
- <p class="form-help">Default theme. Improves readability.</p>
- <input class="config-option" type="radio" name="theme" value="dark" id="settings-theme-dark">
- <label for="settings-theme-dark">Dark</label>
- <p class="form-help">Reduces eye fatigue. Ideal for low light conditions.</p>
- <h4>Page Width</h4>
- <input class="config-option" type="radio" name="width" value="light" id="settings-width-normal">
- <label for="settings-width-normal">Normal</label>
- <p class="form-help">Fixed page width. Improves readability.</p>
- <input class="config-option" type="radio" name="width" value="dark" id="settings-width-full">
- <label for="settings-width-full">Full-page</label>
- <p class="form-help">Dynamic page width. As wide as the browser window.</p>
- </div>
- </div>
- </div>
- <script>
- (function() {
- let configOptions = document.querySelectorAll('.config-option');
- let oppositeValues = { 'light': 'dark', 'dark': 'light', 'normal': 'full', 'full': 'normal' };
- [...configOptions].forEach(option => {
- option.addEventListener('click', function (event) {
- let optionParts = option.id.split('-');
- let optionName = optionParts[1];
- let optionValue = optionParts[2];
- document.body.classList.remove(optionName + '-' + oppositeValues[optionValue]);
- document.body.classList.add(optionName + '-' + optionValue);
- localStorage.setItem('symfony/profiler/' + optionName, optionName + '-' + optionValue);
- });
- });
- let openModalButton = document.getElementById('open-settings');
- let modalWindow = document.getElementById('profiler-settings');
- let closeModalButton = document.getElementsByClassName('close-modal')[0];
- let modalWrapper = document.getElementsByClassName('modal-wrap')[0]
- openModalButton.addEventListener('click', function(event) {
- document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/theme') || 'theme-light')).checked = 'checked';
- document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/width') || 'width-normal')).checked = 'checked';
- modalWindow.classList.toggle('visible');
- event.preventDefault();
- });
- closeModalButton.addEventListener('click', function() {
- modalWindow.classList.remove('visible');
- });
- modalWrapper.addEventListener('click', function(event) {
- if (event.target == event.currentTarget) {
- modalWindow.classList.remove('visible');
- }
- });
- })();
- </script>
|