/* ----------------------------------------------------------------------------- # NetAlertX # Open Source Network Guard / WIFI & LAN intrusion detector # # app.css - Front module. CSS styles #------------------------------------------------------------------------------- # Puche 2021 / 2022+ jokob jokob@duck.com GNU GPLv3 ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Global Variables ----------------------------------------------------------------------------- */ :root { --color-aqua: #00c0ef; --color-green: #00a65a; --color-yellow: #f39c12; --color-red: #dd4b39; } /* ----------------------------------------------------------------------------- Text Classes ----------------------------------------------------------------------------- */ .logs { color:white; background-color: black; font-family: 'Courier New', monospace; } .logs-row { align-content: center; width: 100%; display: grid; margin: 5px; } .logs-size { font-size: 14px; } .log-area { padding: 3px; width:100%; border-bottom-width: 1px; border-bottom-style: solid; border-color: #606060; } .logs-small { height: 100px; } .log-file { width: 145px; display: inline-grid; font-size: 20px; } .log-purge { width: 90px; float:right; } .span-padding { padding:10px; } .text-center { text-align: center; } .text-right { text-align: right; } .text-white { color: white; } .text-gray50 { color: #808080; } .text-gray-20 { color: rgba(192, 192, 192, 20%); } .text-aqua-20 { color: rgba(0, 192, 239, 20%); } .text-green-20 { color: rgba(0, 166, 90, 20%); } .text-yellow-20 { color: rgba(243, 156, 18, 20%); } .text-red-20 { color: rgba(221, 75, 57, 20%); } .no-border { border: none; } /* ----------------------------------------------------------------------------- Main Sections ----------------------------------------------------------------------------- */ .content-header h1{ font-size:24px; } .content-header { padding-top: 5px; } .content-header>.breadcrumb { background: transparent; } .content { padding-bottom: 0px; } .box-body { padding-top: 0px; padding-bottom: 0px; } .main-footer { padding: 5px; color: gray; } .header-server-time { padding:8px; color: white; } .header-status { padding:0px; } .header-status:hover { background-color: rgba(0, 0, 0, 0); } .unread-notifications-bell { position: absolute; top: 3px; margin-left: 15px; display: none; } .navbar-custom-menu .bg-yellow { color: white !important; } .header-status-locked-db { width: 25px; height: 25px; color: red; position: absolute; top: 12px; right: -17px; display: none; } .navbar-nav > li > a { line-height: 30px; } /* ----------------------------------------------------------------------------- Customized Main Menu ----------------------------------------------------------------------------- */ .NetAlertX-logo { border-color:transparent !important; height: 50px !important; width: 50px !important; margin-top:15px !important; border-radius: 1px !important; } .main-header .logo { width: 150px; } .navbar-nav > .user-menu .user-image { margin-top: 3px; } .main-header>.navbar { margin-left: 150px; } .main-sidebar, .left-side { width: 150px; } .content-wrapper, .right-side, .main-footer { margin-left: 150px; } @media (max-width: 767px) { .main-header .logo { width: 100%; display:none; } .main-header .navbar { margin: 0; } .content-wrapper, .main-footer { margin-left: 0px; } } .sidebar-open .content-wrapper, .sidebar-open .main-footer { -webkit-transform: translate(150px, 0); -ms-transform: translate(150px, 0); -o-transform: translate(150px, 0); transform: translate(150px, 0) } .skin-yellow-light .sidebar-menu>li>a:hover { background: #f0f0f0; border-left-color: rgb(243, 156, 18); } .skin-yellow-light .sidebar-menu>li.active>a { background: #e0e0e0; border-left-color: rgb(243, 156, 18); } /* ----------------------------------------------------------------------------- Customized Boxes ----------------------------------------------------------------------------- */ .box-transparent { position: relative; margin-bottom: 20px; width: 100%; } .pa-small-box-2 .inner h3 { margin-left: 0em; margin-bottom: 1.3em; } .pa-small-box-footer { color: white !important; font-size: 18px; } /* -------------------------------------------------------------------------- */ .pa-small-box-aqua { /* border-top: 3px solid #00c0ef; */ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); } .pa-small-box-aqua .inner { color: #00c0ef; background-color: #FFFFFF; } .pa-small-box-aqua .inner h3 { margin-left: 0.5em; } .pa-small-box-aqua .icon { color: #00c0ef; } /* -------------------------------------------------------------------------- */ .pa-small-box-green { /* border-top: 3px solid #00a65a; */ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); } .pa-small-box-green .inner { color: #00a65a; background-color: #FFFFFF; } .pa-small-box-green .inner h3 { margin-left: 0.5em; } .pa-small-box-green .icon { color: #00a65a; } /* -------------------------------------------------------------------------- */ .pa-small-box-yellow { /* border-top: 3px solid #f39c12; */ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); } .pa-small-box-yellow .inner { color: #f39c12; background-color: #FFFFFF; } .pa-small-box-yellow .inner h3 { margin-left: 0.5em; } .pa-small-box-yellow .icon { color: #f39c12; } /* -------------------------------------------------------------------------- */ .pa-small-box-red { /* border-top: 3px solid #dd4b39; */ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); } .pa-small-box-red .inner { color: #dd4b39; background-color: #FFFFFF; } .pa-small-box-red .inner h3 { margin-left: 0.5em; } .pa-small-box-red .icon { color: #dd4b39; } /* -------------------------------------------------------------------------- */ .pa-small-box-gray { /* border-top: 3px solid #a0a0a0; */ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); } .pa-small-box-gray .inner { color: #a0a0a0; background-color: #FFFFFF; } .pa-small-box-gray .inner h3 { margin-left: 0.5em; } .pa-small-box-gray .icon { color: #a0a0a0; } /* ----------------------------------------------------------------------------- Customized Box Borders ----------------------------------------------------------------------------- */ /* .box.box-aqua { border-top-color: #00c0ef; } .box.box-green { border-top-color: #00a65a; } .box.box-yellow { border-top-color: #f39c12; } .box.box-red { border-top-color: #dd4b39; } */ /* ----------------------------------------------------------------------------- Custom Border ----------------------------------------------------------------------------- */ .bottom-border-aqua { border-bottom-color: #00c0ef; border-bottom-style: solid; border-bottom-width: 3px } .bottom-border-primary { border-bottom-color: #3c8dbc; border-bottom-style: solid; border-bottom-width: 3px } /* ----------------------------------------------------------------------------- Customized Tabs ----------------------------------------------------------------------------- */ .nav-tabs-custom { background: transparent; } .nav>li>a { position: relative; display: block; padding: 10px 10px; } /* ----------------------------------------------------------------------------- Customized Menu dropdown ----------------------------------------------------------------------------- */ .dropdown-menu { max-height: 250px; overflow-x: hidden; box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2); } /* ----------------------------------------------------------------------------- Default Table config ----------------------------------------------------------------------------- */ .table>tbody>tr>td { padding: 4px; } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: #FFFFD0; } .dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter { color: #B0B0B0; } /* ----------------------------------------------------------------------------- Customized buttons ----------------------------------------------------------------------------- */ .pa-btn { padding: 10px; min-width: 90px; } .pa-btn-delete { border-color: #ffb060; background-color: #ffd080; } .pa-btn-delete:hover { border-color: #ffb060; background-color: #ffb060; } .pa-btn-records, .pa-btn-records:hover, .pa-btn-records:focus, .pa-btn-records:active { border-color: #ddd; background-color: #f4f4f4; cursor: default; } /* ----------------------------------------------------------------------------- Customized Full Calendar ----------------------------------------------------------------------------- */ .fc h2 { font-size: 20px; } .fc-weekend { background-color: #FFF0E0; } .fc-normaldays { background-color: #FF0000; } .fc-sat { background-color: #FFF0E0; } .fc-sun { background-color: #FFF0E0; } .fc-resized-row { height: 26px !important; } .fc-transparent-border { border-Color: transparent !important; } .tooltip-inner { background-color: #606060; color: White; } .tooltip.right .tooltip-arrow { border-right: 5px solid #606060; } /* ----------------------------------------------------------------------------- Notification float banner ----------------------------------------------------------------------------- */ .notification_modal { text-align: center; left: 0; right: 0; width: 80%; z-index: 9999; position: fixed; top: 100px; display: none; margin-left: auto; margin-right: auto; } .modal_green { color: #258744; background-color: #d4edda; border-color: #c3e6cb; } .modal_red { color: rgb(245, 245, 245); background-color: #e2acaa; border-color: #d41001; } .modal_grey { color: white; background-color: darkgrey; border-color: #000000; } /* ticker setup */ .ticker-li { width: 40%; } #ticker_announcement_plc { /* height: 50px; */ overflow: hidden; width: 65%; position: absolute; left: 40px; top: 15px; } @media (max-width: 1500px) and (min-width: 1101px) { #ticker_announcement_plc { width: 45%; /* Width for screen sizes between 1100px and 730px */ } } @media (max-width: 1100px) and (min-width: 801px) { #ticker_announcement_plc { width: 30%; /* Width for screen sizes between 1100px and 730px */ } } @media (max-width: 800px) { #ticker_announcement_plc { width: 25%; /* Width for screen sizes less than 730px */ } } #ticker-message a { color:#3200bb; text-decoration: underline; } #ticker-message { color:#FFFFFF; } #ticker_announcement_plc:hover .ticker_announcement { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-150%); } } .ticker_announcement { text-align: center; white-space: nowrap; animation: marquee 20s linear infinite; cursor: default; } /* maintenance buttons */ .dbtools-button { display: inline-block; width: 160px; height: 60px; white-space: normal; word-wrap: break-word; font-size: 16px; padding: 4px; } .db_info_table_cell:nth-child(1) { background: white } .db_info_table_cell:nth-child(2) { background: white } .db_tools_table_cell_a:nth-child(1) { background: white } .db_tools_table_cell_a:nth-child(2) { background: white } .db_tools_table_cell_b:nth-child(1) { background: white } .db_tools_table_cell_b:nth-child(2) { background: white } .db_info_table { display: table; border-spacing: 0em; font-weight: 400; font-size: 15px; width: 100%; margin: auto; } .db_info_table_row { display: table-row; padding: 3px; } .db_info_table_cell { display: table-cell; padding: 3px; padding-left: 10px; } .db_tools_table_cell_a { display: table-cell; text-align: center; padding: 10px; min-width: 180px; width: 20%; vertical-align: middle; } .db_tools_table_cell_b { display: table-cell; text-align: justify; font-size: 16px; vertical-align: middle; padding: 10px; } .ajax_scripts_loading { background-image: url('../img/Loading_Animation.gif'); background-repeat: no-repeat; background-position: center; height: 50px; } .nav-tabs-custom .tab-content { background-color: white; } @media (max-width: 767px) { .nav-tabs-custom .tab-content { overflow: scroll; } } .top_small_box_gray_text { color: white !important; } .bg-gray { background-color: #b2b6be !important; } .infobox_label { font-size: 16px !important; } /* --------------------------------------------------------- */ /* report */ /* --------------------------------------------------------- */ #notificationData { margin-bottom: 10px; } #notificationData textarea{ width: 100%; } #notificationData pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; } /* --------------------------------------------------------- */ /* settings */ /* --------------------------------------------------------- */ @media (max-width: 767px) { /* hide on mobile */ .setting_description { /* color: red; */ display: none; } .setting_input{ width:70%; /* background-color: red; */ } .setting_name { width:30%; } } @media (min-width: 768px) { .setting_description { /* color: green; */ display: block; } .setting_input{ width:40%; /* background-color: green; */ } .setting_name { width:19%; } } .settingswrap { margin-bottom: 100px; } .settingswrap .metadata { display: none; } .settingswrap .enabled-disabled-icon { float: right; } .padding-bottom { padding-bottom: 100px; } .settings-group { font-size: 20px; padding-top: 7px; padding-bottom: 9px; } .overview-section .small-box .icon { font-size: 38px; top:0px; } .overview-section { /* border-top: solid; border-width: medium; border-width: medium; border-width: 1px; border-radius: 15px; margin-bottom: 3px; */ } .settings-group i{ font-size: 16px; } .overview-group { font-size: 20px; padding-top: 7px; padding-bottom: 9px; margin-left: -20px; } .overview-group i{ font-size: 16px; } .table_row { padding: 3px; width:100%; display: flex; border-bottom-width: 1px; border-bottom-style: solid; border-color: #606060; } .table_cell { float:left; padding: 3px; padding-left: 10px; } .setting_name { /* width:19%; */ font-weight: 300; } .setting_description { width:40%; } .myhidden { display:none; } .center { margin: 0; position: relative; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .top-margin { margin-top: 50px; } /* Settings */ #settingsPage .overview-setting-value{ display:unset; } .overview-setting-value-wrap { padding-left: 1px; text-overflow: clip ; overflow: hidden; } #settingsPage .small-box { padding-left: 10px; padding-right: 10px; } #settingsPage .small-box .inner { padding-left: 0px; padding-right: 0px; } #settingsPage .panel-title{ /* display: inline-block; */ /* width: 120px; */ white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } .padding-5px { padding: 5px; } .text-overflow-hidden { overflow: hidden; text-overflow: clip; } .settings_content { padding: 10px; /* background-color: #272c30; */ margin: 10px; } #settingsPage .panel-heading:hover{ background-color: #272c30; } .settings-expand-icon { font-size: medium; /* background-color: #272c30; */ margin: 10px; } .settings_content input[type=checkbox] { width: auto } .override{ padding: 5px; } .override .override-text { float:left; width: 80%; } .override .override-check { float:left; width: 20%; } input[readonly] { /* Apply styles to the readonly input */ background-color: #646566 !important; color: #000; cursor: not-allowed; } .interactable-option:hover::before { opacity: 1; } .interactable-option::before { content: '1x 📝 | 2x 🚮'; position: sticky; right: 0px; top: 0; color: white; float: right; background-color: rgb(0, 0, 0); transition: opacity 0.5s; opacity: 0.1; border-radius: 3px; } .interactable-option:hover { transition: background-color 2s; cursor: pointer; } .settingsImportedTimestamp { padding: 25px; } .settingsSearchWrap { padding:10px; } .settings-sticky-bottom-section { position: fixed; z-index: 999; background-color: #5B5B66; /* opacity: 0.8; */ bottom: 30px; border-radius: 5px; margin:1px; border-width: 1px; border-style: solid; border-color: inherit; /* width: 87%; */ } .settings-sticky-bottom-section:hover { border-color: #258744; } .settings-sticky-bottom-section .form-group { margin-bottom: 0px; } .clear-filter { opacity: 0.5; cursor: pointer; width: 14px; position: absolute; right: -6px; top: 6px; } .clear-filter:hover { opacity: 1; } .saveSettingsWrapper button { width:70%; margin-top:20px; margin-left:15%; margin-bottom:20px; } /* ----------------------------------------------------------------- */ /* Devices page */ /* ----------------------------------------------------------------- */ #txtIconFA { min-width: 40px; } .info-icon-nav { top: -6px; position: absolute; z-index: 1; left: 0px; font-size: large; } .pointer { cursor: pointer; } .drag { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color:#258744; } .db_info_table_row .select2-container--default .select2-selection--multiple { background-color:#606060; } .select2-container .select2-dropdown { background-color:#606060; } .networkPageHelp{ position: absolute; font-size: x-small; margin-bottom: 6px; } .pageHelp{ position: absolute; font-size: x-small; margin-bottom: 6px; } #tableDevicesBox td svg, #tableDevicesBox td i{ height: 1.5em !important; } #TileCards .tile .inner { color: white; } #dropdownIcon li svg, #dropdownIcon li i{ height: 1.5em !important; } #tableDevices .badge i { height: 1em !important; } /* ----------------------------------------------------------------- */ /* MODAL popups */ /* ----------------------------------------------------------------- */ #modal-input-textarea { width: 100%; } .modal-field-input { margin: 4%; width: 92%; } /* ----------------------------------------------------------------- */ /* NETWORK page */ /* ----------------------------------------------------------------- */ /* AdminLTE overrides */ #networkTree .box { border-top:1px; border-top-color:grey; padding:0px; padding-top:6px; margin:0px; align-items:center; border-radius:20px; width:180px; display:flex; flex-direction:column; justify-content:center; } #networkTree .netNodeText { position: absolute; } #networkTree .netPort { float:left; display:inline; text-align: center; } #networkTree .portBckgIcon { opacity: 0.3; display: initial; float: left; } #networkTree { margin-left: 16px; /* border: solid; border-color:#606060; */ position: relative; } #networkTree .netIcon { width: 25px; float:left; display:inline; text-align: center; } #networkTree .netIcon svg { height: 1.2em; width: auto; } #networkTree .netCollapse { display: block; position: absolute; margin-left: 170px; font-size: large; left: -15px; } #networkTree .highlightedNode { border: solid; border-color:cyan; } #networkTree .netStatus-Off-line i { color: #dd4b39; } .spanNetworkTree { display: inline-block; width: 120px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } .networkTable .nav-tabs li i, .networkTable .nav-tabs li svg { padding: 3px; height: 2em !important; /* width: 2em !important; */ position: absolute; /* z-index: 10; */ top: 0.3em; /* margin-left: 0.2em; */ } .networkTable .icon { /* padding-left:2em; */ width:2em; height:2em; float: left; /* background-color:red; */ } .sort-btn { right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; } /* ----------------------------------------------------------------- */ /* PLUGINS page */ /* ----------------------------------------------------------------- */ .plugin-filters { margin: 7px; margin-right: 7px; margin-bottom: 9px; padding-bottom: 8px; } .plugin-content { padding-bottom: 0px; } .plugin-content .left-nav{ width: 100%; padding-right: 0px; } .plugin-content #tabs-content-location { margin: 0px; } .plugins-description { padding-top: 20px; } .login-page .login-custom { width:480px; } /*Hidden special button*/ @media (max-width: 365px) { #back-button { display: none; } } @media (max-width: 335px) { #next-button { display: none; } } @media (max-width: 300px) { #reload-button { display: none; } } @media (max-width: 300px) { #fullscreen-button { display: none; } } @media (max-width: 500px) { .header-server-time { display: none; } } #settingsPage .small-box .inner .card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; } /* ----------------------------------------------------------------------------- Spin ----------------------------------------------------------------------------- */ .pa_semitransparent-panel { position: absolute; width: 100%; /*calc (100% -40px);*/ height: 100%; left: 0; top: 0; display: block; opacity: 0.8; background-color: #fff; z-index: 99; } .pa_spinner { position: fixed; left: 0; right: 0; top: 100px; margin-left: auto; margin-right: auto; padding: 15px; width: 200px; background-color: #fff; z-index: 100; } #loadingSpinner { z-index: 100; } /* Multi-edit adjustements */ .box-header { min-height: 55px; } .red-hover-border:hover { border-color: red !important; border-width: 1px; border-style: solid; } .red-hover-background:hover { background-color: red !important; } #multi-edit-form .form-group { height: 45px; } .pia-top-left-logo { height:50px; } /* ----------------------------------------------------------------------------- Floating edit button ----------------------------------------------------------------------------- */ #multiEditPlc { position: fixed; bottom: 50px; right: 0px; z-index: 10; } table.dataTable tbody > tr.selected { color:red; } /* ----------------------------------------------------------------------------- Donations ----------------------------------------------------------------------------- */ .donations .box { padding:15px; margin-bottom: 0px; } .donations .box-header { color:15px; } .donations h3 { margin-top: 10px; }