Files
NetAlertX/front/css/pialert.css

1049 lines
18 KiB
CSS
Executable File

/* -----------------------------------------------------------------------------
# Pi.Alert
# Open Source Network Guard / WIFI & LAN intrusion detector
#
# pialert.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 {
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);
}
.navbar-nav > li > a
{
line-height: 30px;
}
/* -----------------------------------------------------------------------------
Customized Main Menu
----------------------------------------------------------------------------- */
.main-header .logo {
width: 150px;
}
.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
----------------------------------------------------------------------------- */
.pa_alert_notification {
text-align: center;
font-size: large;
font-weight: bold;
color: #258744;
background-color: #d4edda;
border-color: #c3e6cb;
border-radius: 5px;
max-width: 1000px;
/* 80% wrapper 1250px */
width: 80%;
z-index: 9999;
position: fixed;
top: 30px;
margin: auto;
transform: translate(0, 0);
display: none;
}
.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 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 .metadata
{
display: none;
}
.settingswrap .enabled-disabled-icon
{
float: right;
}
.settings-group
{
font-size: 20px;
padding-top: 7px;
padding-bottom: 9px;
}
.overview-section .small-box .icon
{
font-size: 38px;
top:0px;
}
.overview-section
{
border: 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;
}
.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;
}
#settingsPage .panel-title{
/* display: inline-block; */
/* width: 120px; */
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.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;
}
/* Devices */
#txtIconFA {
min-width: 18px;
}
.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;
}
/* 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 .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;
}
.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;
}
/* -----------------------------------------------------------------------------
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;
}
/* -----------------------------------------------------------------------------
Donations
----------------------------------------------------------------------------- */
.donations .box
{
padding:15px;
margin-bottom: 0px;
}
.donations .box-header
{
color:15px;
}
.donations h3
{
margin-top: 10px;
}