File manager

File manager - Edit - /home/opticamezl/www/newok/plugins/system/cookiespolicynotificationbar/assets/css/cpnb-style.css

Back
/* ====================================================== # Cookies Policy Notification Bar for Joomla! - v4.4.4 (pro version) # ------------------------------------------------------- # For Joomla! CMS (v4.x) # Author: Web357 (Yiannis Christodoulou) # Copyright: (©) 2014-2024 Web357. All rights reserved. # License: GNU/GPLv3, https://www.gnu.org/licenses/gpl-3.0.html # Website: https://www.web357.com # Demo: https://demo-joomla.web357.com/cookies-policy-notification-bar # Support: support@web357.com # Last modified: Monday 27 October 2025, 03:29:25 PM ========================================================= / /************************* Notification Bar and Buttons *************************/ .cpnb, .cpnb { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .cpnb { position: absolute; z-index: 9999999; margin-top: 0; clear: both; } .cpnb-outer { border-color: #202226; border-style: solid; background: rgba(32, 34, 38, 0.8); color: #f1f1f3; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; width: 100%; text-align: center; z-index: 1000; } .cpnb-outer.cpnb-div-position-top { left: 0; } .cpnb-outer.cpnb-div-position-bottom { left: 0; } .cpnb-inner { padding: 10px 20px; overflow: auto; } /* Close icon / .cpnb-x-close-icon { cursor: pointer; position: absolute; right: 16px; top: 16px; width: 16px; height: 16px; opacity: 0.3; } .cpnb-x-close-icon:hover { opacity: 1; } .cpnb-x-close-icon:before, .cpnb-x-close-icon:after { position: absolute; left: 15px; content: ' '; height: 17px; width: 2px; background-color: #fff; top: -5px; cursor: pointer; } .cpnb-x-close-icon:before { transform: rotate(45deg); } .cpnb-x-close-icon:after { transform: rotate(-45deg); } .cpnb-inner::-webkit-scrollbar { / Hide scrollbar inside the box / display: none; } #cpnb_warningBoxBgOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; } /************************* MESSAGE IN NOTIFICATION BAR ************************/ .cpnb-message { float: left; text-align: justify; padding: 4px 8px; } .cpnb-message a { color: #fff; text-decoration: none; border-bottom: 1px dotted #fff; } .cpnb-message a:hover { text-decoration: none; border-bottom: 1px dotted #f3c13a; } /************************ BUTTONS *************************/ .cpnb-buttons { float: right; } .cpnb-button, .cpnb-button-ok { display: inline-block; padding: 4px 8px; margin-left: 10px; margin-top: 0px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #005a9e; color: #ffffff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; cursor: pointer; border: 0; outline: 0; } / cookies manager modal / .cpnb-m-bottom-buttons .cpnb-button { padding: 10px 14px; line-height: 1; text-shadow: none; display: inline-block; min-width: 25%; margin-top: 5px; cursor: pointer; margin-left: 15px; } / positions / .cpnb-div-position-top-left .cpnb-button, .cpnb-div-position-top-right .cpnb-button, .cpnb-div-position-bottom-left .cpnb-button, .cpnb-div-position-bottom-right .cpnb-button { margin-bottom: 15px; } .cpnb-button:hover, .cpnb-button-ok:focus, .cpnb-button-ok:hover { background-color: #004680; color: #fff; -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; text-decoration: none; } .cpnb-button-decline, .cpnb-button-decline:focus, .cpnb-button-delete { margin-left: 10px; background: #b71c1c; color: #ffffff; } .cpnb-button-decline:hover, .cpnb-button-decline:focus, .cpnb-button-delete:hover { background: #8b1313; } .cpnb-button-cancel, .cpnb-button-reload { background-color: #495057; color: #ffffff; } .cpnb-button-cancel:hover, .cpnb-button-cancel:focus, .cpnb-button-reload:hover { background-color: #343a40; } .cpnb-button-more-default, .cpnb-button-more-modal { margin-left: 10px; background-color: #1b5e20; color: #ffffff; text-shadow: none !important; } .cpnb-button-more-default:hover, .cpnb-button-more-default:focus, .cpnb-button-more-modal:hover { background-color: #104d1a; } .cpnb-clear-both { clear: both; } .cpnb-button:focus, .cpnb-button:focus-visible { outline: 3px solid #ffd700 !important; / Gold for high contrast / outline-offset: 3px; box-shadow: 0 0 6px 3px rgba(255, 215, 0, 0.7); / Highlight focus / } /************************* Ajax ************************/ .cpnb-margin { margin-bottom: 15px; } .cpnb-margin-right { margin-right: 15px !important; } .cpnb-text-center { text-align: center; } .cpnb-loading-gif { margin: 0 auto; width: 80px; height: 80px; display: block; background: transparent url('../icons/loading.gif') no-repeat left center; } /************************ Ajax Table with served cookies ************************/ .cpnb-cookies-table-container table { line-height: 1.25; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; color: #000; } .cpnb-cookies-table-container table caption { font-size: 1.5em; margin: 0.5em 0 0.75em; } .cpnb-cookies-table-container table tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: 0.35em; } .cpnb-cookies-table-container table th, .cpnb-cookies-table-container table td { padding: 0.625em; text-align: center; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .cpnb-cookies-table-container table th.cpnb-cookie-value-heading-col, .cpnb-cookies-table-container table td.cpnb-cookie-value-col { white-space: normal; text-overflow: ellipsis; overflow: hidden; } .cpnb-cookies-table-container table th { font-size: 0.85em; letter-spacing: 0.1em; text-transform: uppercase; } /************************ Positions *************************/ .cpnb-div-position-top { top: 0px; left: 0px; width: 100%; } .cpnb-div-position-top-left { top: 10px; left: 10px; width: 500px; } .cpnb-div-position-top-right { top: 10px; right: 10px; width: 500px; } .cpnb-div-position-bottom { bottom: 0; left: 0; width: 100%; } .cpnb-div-position-bottom-left { bottom: 10px; left: 10px; width: 500px; } .cpnb-div-position-bottom-right { bottom: 10px; right: 10px; width: 500px; } .cpnb-div-position-center { width: 500px; } / Center the message and the buttons if the notification box is one of top-left, top-right, bottom-left, bottom-right / .cpnb-div-position-top-left .cpnb-inner, .cpnb-div-position-top-right .cpnb-inner, .cpnb-div-position-bottom-left .cpnb-inner, .cpnb-div-position-bottom-right .cpnb-inner { padding: 15px 20px 5px 20px; } .cpnb-div-position-center .cpnb-inner { padding: 20px; } .cpnb-div-position-top-left .cpnb-message, .cpnb-div-position-top-right .cpnb-message, .cpnb-div-position-bottom-left .cpnb-message, .cpnb-div-position-bottom-right .cpnb-message, .cpnb-div-position-center .cpnb-message { text-align: center; display: block; padding: 0px 8px; margin-bottom: 15px; } .cpnb-div-position-top-left .cpnb-buttons, .cpnb-div-position-top-right .cpnb-buttons, .cpnb-div-position-bottom-left .cpnb-buttons, .cpnb-div-position-bottom-right .cpnb-buttons, .cpnb-div-position-center .cpnb-buttons { float: none; } /************************* Modal Styling ************************/ .cpnb-modal-wrap { z-index: 99999999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: scroll; -webkit-transition: all 4s ease-out 0s; -moz-transition: all 4s ease-out 0s; -ms-transition: all 4s ease-out 0s; -o-transition: all 4s ease-out 0s; transition: all 4s ease-out 0s; overflow: hidden; } .cpnb-modal-bg { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: flex-start; -ms-flex-align: center; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 2em; } .cpnb-modal-inner { text-align: left; position: relative; width: 100%; padding: 2em; background-color: #fff; color: #000; z-index: 50000; box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.25); min-height: 150px; max-height: 650px; overflow: auto; -webkit-overflow-scrolling: touch; } .cpnb-modal--small { max-width: 32em; } .cpnb-modal--medium { max-width: 48em; } .cpnb-modal--large { max-width: 64em; } .cpnb-modal--full { max-width: none; } .cpnb-modal-close-fontawesome { position: absolute; right: 20px; top: 20px; cursor: pointer; opacity: 0.5; width: 20px; height: 20px; } .cpnb-modal-close { position: absolute; right: 20px; top: 20px; cursor: pointer; opacity: 0.5; background: url('../icons/close-icon-20x20.png'); width: 20px; height: 20px; } .cpnb-modal-close:hover, .cpnb-modal-close-fontawesome:hover { opacity: 1; } .cpnb-modal-footer { height: 60px; padding: 10px 0; border-radius: 0 0 4px 4px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .cpnb-modal-actions .cpnb-button:first-child { margin-left: 0px; } .cpnb-modal-actions .cpnb-button { margin-left: 10px; } /************************ Responsive rules *************************/ @media (max-width: 1145px) { .cpnb-message { float: none; width: 100%; display: block; clear: both; margin-bottom: 15px; text-align: center; padding: 0; } .cpnb-buttons { float: none; width: 100%; clear: both; text-align: center; margin-top: 0; margin-bottom: 10px; } .cpnb-button { margin-left: 0; } } @media (min-width: 503px) and (max-width: 1144px) { .cpnb-inner { padding: 20px; } .cpnb-message { float: none; width: 100%; display: block; clear: both; margin-bottom: 10px; text-align: Center; } .cpnb-buttons { float: none; width: 100%; clear: both; text-align: center; margin-top: 0; margin-bottom: 0; } .cpnb-button { margin-left: 10px; } .cpnb-button-more-default, .cpnb-button-more-default { margin-top: 10px; } } @media (max-width: 502px) { .cpnb-inner { padding: 20px; } .cpnb-message { float: none; width: 100%; display: block; clear: both; margin-bottom: 15px; } .cpnb-buttons { float: none; width: 100%; clear: both; text-align: center; margin-top: 0; margin-bottom: 0; } .cpnb-button { display: block; margin-top: 10px; margin-bottom: 3px; text-align: center; padding: 7px 0px 7px 0px; } .cpnb-cookies-table-container table { border: 0; } .cpnb-cookies-table-container table caption { font-size: 1.3em; } .cpnb-cookies-table-container table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .cpnb-cookies-table-container table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: 0.625em; } .cpnb-cookies-table-container table td { border-bottom: 1px solid #ddd; display: block; font-size: 0.9em; text-align: right; } .cpnb-cookies-table-container table td::before { content: attr(data-label); float: left; font-weight: 700; text-transform: uppercase; } .cpnb-cookies-table-container table td:last-child { border-bottom: 0; } .cpnb-div-position-top, .cpnb-div-position-top-left, .cpnb-div-position-top-right { top: 0; left: 0; width: 100%; } .cpnb-div-position-bottom, .cpnb-div-position-bottom-left, .cpnb-div-position-bottom-right { bottom: 0; left: 0; width: 100%; } .cpnb-div-position-center { left: 0; width: auto; margin-left: 0 !important; } .cpnb-div-position-center .cpnb-message { padding: 0; } } / show modal window (more info button) / .cpnb-modal-show-fade-in { visibility: visible; opacity: 1; -webkit-transition: opacity 0.1s, visibility 0.1s; transition: opacity 0.1s, visibility 0.1s; } .cpnb-modal-show-fade-out { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.1s, visibility 0.1s; transition: opacity 0.1s, visibility 0.1s; } /******************** START MANAGER ********************/ / START Float Button / .cpnb-m-cookies-floatButton { position: fixed; bottom: 20px; color: #ffffff; cursor: pointer; -webkit-transition: 0.75s; -moz-transition: 0.75s; transition: 0.75s; z-index: 9999; } .cpnb-m-cookies-floatButtonPosition_bottom_left { left: 20px; } .cpnb-m-cookies-floatButtonPosition_bottom_right { right: 20px; } .cpnb-m-cookies-floatButton-icon { cursor: pointer; display: inline-block; } .cpnb-m-cookies-floatButton-icon-img { max-width: 250px; max-height: 250px; } .cpnb-m-cookies-floatButton-icon-fontawesome-icon { text-shadow: 1px 1px 1px #ccc; } .cpnb-m-cookies-floatButton-icon-uikit-icon { } / END Float Button / / START CHECKBOX DESIGN / .modalCheckBox { position: relative; margin-top: 20px; height: 27px; } .modalCheckBox label { /cursor: pointer; position: absolute; width: 25px; height: 25px; padding: 0; top: 0; left: 0; background: #E3E3E3; border:1px solid #ddd;/ display: inline-block; margin: 0; position: relative; top: 0; left: 10px; transform: none; } .modalCheckBox input[type='checkbox'] { margin-top: 0; } /.modalCheckBox .cpnb-checkbox-text { margin: -25px 0 0 35px; line-height: 45px; } .modalCheckBox input[type="checkbox"]:checked+label:before { content: ''; display: none; } .modalCheckBox label:after { content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 6px; left: 7px; border: 3px solid #333; border-top: none; border-right: none; transform: rotate(-45deg); opacity: 0.0; } .modalCheckBox label:hover::after { opacity: 0.1; } .modalCheckBox input[type=checkbox]:checked + label:after { opacity: 1; }/ / END CHECKBOX DESIGN / .cpnb-manager-modal-left { top: 100px; bottom: 70px; left: 0; position: absolute; width: 39%; overflow: auto; background: #f7f7f7; border-right: 2px #ebebeb solid; z-index: 9999999999999; } .cpnb-manager-modal-right { top: 50px; bottom: 70px; left: 0; position: absolute; margin-left: 42%; width: 56%; overflow: auto; /height:100%;/ margin-top: 50px; padding-right: 2%; } .cpnb-manager-modal-left-item { background: #ebebeb; width: 80%; padding: 10px 5% 10px 5%; margin-left: 5%; margin-top: 10px; margin-bottom: 5px; cursor: pointer; word-break: normal; word-wrap: break-word; color: #0a0a0a; } .cpnb-m-header { font-size: 20px; color: #0a0a0a; text-align: left; font-weight: 700; word-break: normal; word-wrap: break-word; max-height: 75px; } .cpnb-m-bottom-buttons { position: absolute; bottom: 0; left: 0; background: #ededed; width: 100%; text-align: Center; padding: 12px 0px; } / START MODAL MANAGER SCROLLBAR / #cpnb_manager_modal_left::-webkit-scrollbar { width: 10px; } / Track / #cpnb_manager_modal_left::-webkit-scrollbar-track { background: #f1f1f1; } / Handle / #cpnb_manager_modal_left::-webkit-scrollbar-thumb { background: #888; } / Handle on hover / #cpnb_manager_modal_left::-webkit-scrollbar-thumb:hover { background: #555; } .cpnb-manager-modal-right-scrollbar::-webkit-scrollbar { width: 15px; } / Track / .cpnb-manager-modal-right-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; } / Handle / .cpnb-manager-modal-right-scrollbar::-webkit-scrollbar-thumb { background: #888; } / Handle on hover / .cpnb-manager-modal-right-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; } / END MODAL MANAGER SCROLLBAR / .cpnb-manager-modal-left-item-selected { background: #bababa; } .cpnb-manager-modal-left-item-unSelected { } .cpnb-manager-modal-left-item-unSelected:hover, .cpnb-manager-modal-left-item-unSelected:focus { -webkit-transition: 0.75s; -moz-transition: 0.75s; transition: 0.75s; } .cpnb-manager-modal-right-selected { display: block; } .cpnb-manager-modal-right-unSelected { display: none; } / cookies manager modal / @media only screen and (max-width: 600px) { .cpnb-m-bottom-buttons .cpnb-button { display: block; width: 90% !important; padding: 10px 14px; margin: 5px auto; } .cpnb-m-bottom-buttons { height: auto; margin: 0 auto; text-align: center; } .cpnb-manager-modal-left { background: transparent; border: none; } .cpnb-manager-modal-left { top: 90px; } } /******************** END MANAGER *******************/ /*** RESPONSIVE LEFT MENU *****/ .cpnb-cookies-category-heading-responsive { display: none; / do not show the cookies category heading if is not responsive / } @media only screen and (min-width: 601px) { .cpnb-left-menu-toggle, .cpnb-left-menu-toggle-button { display: none; } .cpnb-manager-modal-left { display: block !important; } } @media only screen and (max-width: 600px) { .cpnb-toggle-menu-container { display: inline-block; cursor: pointer; } .cpnb-toggle-menu-bar1, .cpnb-toggle-menu-bar2, .cpnb-toggle-menu-bar3 { width: 20px; height: 2px; background-color: #333; margin: 4px 0; transition: 0.4s; } .cpnb-toggle-menu-change .cpnb-toggle-menu-bar1 { -webkit-transform: rotate(-45deg) translate(0, 1px); transform: rotate(-45deg) translate(0, 1px); position: relative; top: 6px; } .cpnb-toggle-menu-change .cpnb-toggle-menu-bar2 { opacity: 0; } .cpnb-toggle-menu-change .cpnb-toggle-menu-bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); position: relative; top: 6px; } .cpnb-left-menu-toggle::after { position: absolute; margin-top: 65px; margin-left: 12px; background: #ededed; display: block; cursor: pointer; padding: 0 15px 0 5px; line-height: 40px; } .cpnb-left-menu-toggle-button { position: absolute; margin-top: 65px; margin-left: -25px; background: #ededed; display: block; cursor: pointer; padding: 9px; } .cpnb-left-menu-toggle-button:before { position: relative; top: 12px; left: 12px; } .cpnb-manager-modal-left { display: none; background: #f7f7f7; width: 100%; margin-top: 75px; } .cpnb-manager-modal-right { width: 90%; left: 0; margin-top: 120px; margin-left: 5%; margin-bottom: 120px; } .cpnb-cookies-category-heading-responsive { display: block; } } /**** END RESPONSIVE LEFT MENU *****/ / Classes for each button separately / / .cpnb-accept-btn { border: 10px solid red !important; } .cpnb-decline-btn { border: 10px solid blue !important; } .cpnb-cancel-btn { border: 10px solid green !important; } .cpnb-settings-btn { border: 10px solid yellow !important; } .cpnb-moreinfo-btn { border: 10px solid pink !important; } .cpnb-accept-btn-m { border: 10px solid black !important; } .cpnb-decline-btn-m { border: 10px solid brown !important; } .cpnb-save-btn-m { border: 10px solid lightblue !important; } .cpnb-accept-btn-cit { border: 10px solid lightgreen !important; } .cpnb-delete-btn-cit { border: 10px solid gray !important; } .cpnb-reload-btn-cit { border: 10px solid orange !important; } */

| ver. 1.4 | Github | . | PHP 8.3.23 | Generation time: 0.03 | proxy | phpinfo | Settings