mirror of
https://github.com/ShaYmez/ezservermonitor-web.git
synced 2024-12-18 07:36:18 -05:00
Themes available !
Disk : filesystem column is hidden in mobile view
This commit is contained in:
ShevAbam
parent
118bb1862c
commit
a935f5ece1
@ -9,7 +9,7 @@ In its [Web](http://www.ezservermonitor.com/esm-web/features) version eSM is a P
|
||||
- **System** : hostname, OS, kernel version, uptime, last boot date, number of current user(s), server datetime
|
||||
- **Load average** : gauges showing the CPU load with the percentage (1 minute, 5 minutes et 15 minutes)
|
||||
- **Network usage** : displaying the IP address of each network interface with the data transmitted and received
|
||||
- **CPU** : model, frequency, cores number, cache L2, bogomips
|
||||
- **CPU** : model, frequency, cores number, cache L2, bogomips, temperature
|
||||
- **Disk usage** : table of each mount point with the space available, used and total
|
||||
- **Memory** : table containing the available used and total of RAM
|
||||
- **Swap** : table containing the available used and total of Swap
|
||||
@ -17,6 +17,10 @@ In its [Web](http://www.ezservermonitor.com/esm-web/features) version eSM is a P
|
||||
- **Ping** : ping the hosts defined in the configuration file
|
||||
- **Services** : displays the status (up or down) services defined in the configuration file
|
||||
|
||||
Several themes are available !
|
||||
|
||||
|
||||
|
||||
Each block can be reloaded manually.
|
||||
|
||||
You can download the last version [here](http://www.ezservermonitor.com/esm-web/downloads). The [requirements](http://www.ezservermonitor.com/esm-web/documentation) are simple : a Linux environment, a web server (Apache2, Lighttpd, Nginx, ...) and PHP.
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"website": "http://www.ezservermonitor.com",
|
||||
"check_updates": true,
|
||||
"auto_refresh": 0,
|
||||
"theme": "blue",
|
||||
"custom_title": ""
|
||||
},
|
||||
"cpu": {
|
||||
|
||||
@ -38,8 +38,8 @@ $update = $Config->checkUpdate();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body class="theme-<?php echo $Config->get('esm:theme'); ?>">
|
||||
|
||||
<nav role="main">
|
||||
<div id="appname">
|
||||
@ -227,7 +227,7 @@ $update = $Config->checkUpdate();
|
||||
<thead>
|
||||
<tr>
|
||||
<?php if ($Config->get('disk:show_filesystem')): ?>
|
||||
<th class="w10p">Filesystem</th>
|
||||
<th class="w10p filesystem">Filesystem</th>
|
||||
<?php endif; ?>
|
||||
<th class="w20p">Mount</th>
|
||||
<th>Use</th>
|
||||
|
||||
@ -154,7 +154,7 @@ esm.getDisk = function() {
|
||||
html += '<tr>';
|
||||
|
||||
if (typeof data[line].filesystem != 'undefined')
|
||||
html += '<td>'+data[line].filesystem+'</td>';
|
||||
html += '<td class="filesystem">'+data[line].filesystem+'</td>';
|
||||
|
||||
html += '<td>'+data[line].mount+'</td>';
|
||||
html += '<td><div class="progressbar-wrap"><div class="progressbar '+bar_class+'" style="width: '+data[line].percent_used+'%;">'+data[line].percent_used+'%</div></div></td>';
|
||||
|
||||
@ -6,6 +6,43 @@ $navbar-height: 60px;
|
||||
/* Layout */
|
||||
$layout-bg-color: #fff;
|
||||
|
||||
/* Basic colors */
|
||||
/* Default colors */
|
||||
$main-color: #99AEC4;
|
||||
$text-color: #4D5157;
|
||||
|
||||
/* Themes ! */
|
||||
$themes: (
|
||||
blue: (
|
||||
main-color: #99AEC4
|
||||
),
|
||||
aqua: (
|
||||
main-color: #75C8C7
|
||||
),
|
||||
green: (
|
||||
main-color: #9DC499
|
||||
),
|
||||
light-green: (
|
||||
main-color: #ADD8C7
|
||||
),
|
||||
orange: (
|
||||
main-color: #E8B184
|
||||
),
|
||||
red: (
|
||||
main-color: #B36973
|
||||
),
|
||||
light-red: (
|
||||
main-color: #E89D9D
|
||||
),
|
||||
purple: (
|
||||
main-color: #AA8ECC
|
||||
),
|
||||
slate: (
|
||||
main-color: #707E8E
|
||||
),
|
||||
light: (
|
||||
main-color: #C4C4C4
|
||||
),
|
||||
dark: (
|
||||
main-color: #747474
|
||||
)
|
||||
);
|
||||
@ -7,10 +7,10 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 14px;
|
||||
font-family: OpenSans-Light, Verdana, sans-serif, Arial;
|
||||
margin: 0 auto;
|
||||
color: $text-color;
|
||||
font-size: 14px;
|
||||
font-family: OpenSans-Light, Verdana, sans-serif, Arial;
|
||||
margin: 0 auto;
|
||||
color: $text-color;
|
||||
background-color: $layout-bg-color;
|
||||
}
|
||||
|
||||
@ -35,7 +35,6 @@ a {
|
||||
/* --------------------- */
|
||||
/* == NAVBAR */
|
||||
/* --------------------- */
|
||||
|
||||
nav[role="main"] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -105,11 +104,9 @@ nav[role="main"] {
|
||||
padding: (($navbar-height / 2) - 17px) 15px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
@include transition(background 300ms ease-in-out);
|
||||
|
||||
&:hover {
|
||||
background: lighten($main-color, 6%);
|
||||
@include transition(background 300ms ease-in-out);
|
||||
background: lighten($main-color, 20%);
|
||||
}
|
||||
|
||||
> span[class^="icon-"] {
|
||||
@ -125,7 +122,6 @@ nav[role="main"] {
|
||||
/* ------------------- */
|
||||
/* == MAIN */
|
||||
/* ------------------- */
|
||||
|
||||
#main-container {
|
||||
overflow: auto;
|
||||
margin-top: $navbar-height;
|
||||
@ -135,31 +131,6 @@ nav[role="main"] {
|
||||
|
||||
|
||||
|
||||
/* ---------------------- */
|
||||
/* == Listing */
|
||||
/* ---------------------- */
|
||||
ul.list {
|
||||
margin-left: 20px;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: $main-color;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
/* == Tables */
|
||||
/* --------------------- */
|
||||
@ -209,14 +180,13 @@ table:not(.no-style) {
|
||||
|
||||
table.firstBold tbody tr td:first-child {
|
||||
font-weight: bold;
|
||||
color: lighten($text-color, 20%);
|
||||
color: #7e848c;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------- */
|
||||
/* == Progress bar */
|
||||
/* --------------------------- */
|
||||
|
||||
.progressbar-wrap {
|
||||
width: 100%;
|
||||
background-color: rgba($main-color, 0.2);
|
||||
@ -272,6 +242,53 @@ table.firstBold tbody tr td:first-child {
|
||||
|
||||
|
||||
|
||||
/* ------------------------- */
|
||||
/* == ! THEMES ! */
|
||||
/* ------------------------- */
|
||||
@each $name, $datas in $themes {
|
||||
body.theme-#{""+$name+""} {
|
||||
a {
|
||||
color: map-get($datas, main-color);
|
||||
|
||||
&:hover {
|
||||
color: lighten(map-get($datas, main-color), 5%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: darken(map-get($datas, main-color), 10%);
|
||||
color: lighten(map-get($datas, main-color), 30%);
|
||||
}
|
||||
::selection {
|
||||
background-color: darken(map-get($datas, main-color), 10%);
|
||||
color: lighten(map-get($datas, main-color), 30%);
|
||||
}
|
||||
|
||||
nav[role="main"] {
|
||||
background-color: map-get($datas, main-color);
|
||||
|
||||
> ul > li > a {
|
||||
&:hover {
|
||||
background: lighten(map-get($datas, main-color), 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table:not(.no-style) {
|
||||
tbody tr:hover {
|
||||
background: lighten(map-get($datas, main-color), 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar-wrap {
|
||||
background-color: rgba(map-get($datas, main-color), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ------------------------- */
|
||||
/* == Responsive */
|
||||
/* ------------------------- */
|
||||
@ -319,4 +336,11 @@ table.firstBold tbody tr td:first-child {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box#esm-disk {
|
||||
.filesystem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -71,6 +71,7 @@
|
||||
|
||||
.box-content {
|
||||
padding: 6px;
|
||||
overflow: auto;
|
||||
|
||||
table a {
|
||||
text-decoration: none;
|
||||
@ -95,4 +96,39 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --------------------- */
|
||||
/* == THEMES */
|
||||
/* --------------------- */
|
||||
@each $name, $datas in $themes {
|
||||
body.theme-#{""+$name+""} {
|
||||
|
||||
.box {
|
||||
box-shadow: 3px 3px 0 rgba(lighten(map-get($datas, main-color), 16%), .6);
|
||||
border-color: lighten(map-get($datas, main-color), 16%);
|
||||
|
||||
.box-header {
|
||||
background-color: darken(map-get($datas, main-color), 7%);
|
||||
|
||||
ul li a {
|
||||
&:hover:not(.disabled) {
|
||||
background: lighten(darken(map-get($datas, main-color), 7%), 20%);
|
||||
color: darken(map-get($datas, main-color), 7%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-content {
|
||||
table a {
|
||||
color: darken(map-get($datas, main-color), 7%);
|
||||
|
||||
&:hover {
|
||||
color: lighten(darken(map-get($datas, main-color), 7%), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user