PHP Classes

File: templates/default/style.css

Recommend this page to a friend!
  Classes of Axel Hahn  >  Pimped Apache Status  >  templates/default/style.css  >  Download  
File: templates/default/style.css
Role: Auxiliary data
Content type: text/plain
Description: Sample output
Class: Pimped Apache Status
Display the requests handled by an Apache server
Author: By
Last change: 2018-04-15: v2.00.23
- navigation to subheaders as subitems in menu
- add link go to top
- config editor: add and remove values in compare tab
2018-04-14: v2.00.22
- optimize user interaction in upgrade process 1.x -> 2.x
- fix highlight admin menu item
- config-items: use arrays instead of comma seperated lists
2018-04-14: v2.00.22
- optimize user interaction in upgrade process 1.x -> 2.x
- fix highlight admin menu item
- config-items: use arrays instead of comma seperated lists
2018-02-08 - v2.00.18
* update jquery -> 3.3.1
* update tiles: smaller circles and additional horizontal bar
* removed lang
* update original server status tabs
* update settings tabs
2018-02-08 - v2.00.17
* added updater class using ahwebinstall
* activated updater for beta releases
* removed unused old template dirs, js files and others
* fix missing lang entries
* block initial setup on second request
Date: 2 years ago
Size: 12,919 bytes
 

 

Contents

Class file image Download
/*
@import url("../../javascript/font-awesome/css/font-awesome.min.css");
@import url("../../javascript/datatables/media/css/jquery.dataTables.min.css");
*/
@import url("requests.css");

body{background:#ccc; color: #444; margin: 0;}
*{font-size: 1em;}

/* ---------------------------------------------------------------------- 
   menu bar
   ---------------------------------------------------------------------- */

#h3menu{
    /*
    position: fixed; display: none;
    right: 2em; top: 5em;
    padding: 0.5em; 
    background: #e0e8f8;
    opacity: 0.3;
    z-index:100;
    box-shadow: 0 0 1em #aaa;
    */
}
#h3menu:hover{opacity: 0.8;}
#h3menu a{display: block; color:#337; padding: 0.3em 1em;}
#h3menu a:hover{text-decoration: underline;}

h1{margin: 0 !important; padding:0;}
#brand{/* background:#346; background: linear-gradient(4deg, #124,#457,#346); */  padding: 0.2em 1em; border-right: 1px solid #567;}
h1.title{font-size:150%; color:#89a; margin: 0; padding: 0px; text-decoration: none;}
h1.title span{font-size:70%; }
h1 a{ color:#fff; text-decoration: none;}
h1 a:hover{color:#def; text-decoration: none;}

.box:first-child{margin-bottom: 2em !important;}
.box{margin-bottom: 5em !important;}
/*.box-header.with-border{background: #485060;}*/
h3.box-title{color:#9ab !important;font-size: 250% !important;}
section h1{color:#578; font-size: 130%;}

nav .nav a i{color:#fc8;}
nav .nav a span{opacity:0.7; text-shadow: none;}
nav .nav a span.caret{color:#89a;}
#divmainbody ul.nav li a {color:#aaa;}
#divmainbody ul.nav li a i{font-size: 130%;}
#divmainbody ul.nav .adminlink{color:#955; background: #f8e0e0; }
#divmainbody ul.nav li.active a {color:#46a; border-top: 2px solid #fc3;}
#divmainbody ul.nav li.active a i{color:#46a;}

#checkversion{padding: 0px 5px 12px 15px; position: relative; display: block; white-space: normal;}
#checkversion .version-uptodate{color:#697;}
#checkversion .version-updateavailable *{color:#fc2;}
#checkversion .version-updateerror{color:#822;}


.dropdown-submenu  ul,
.dropdown-menu > li > ul{
    margin:0; padding: 0em;
}
.dropdown-menu > li > ul > li{
    list-style: none;
    padding: 0em 2em ;
    margin:0; 
}

.dropdown-submenu li > a,
.dropdown-menu > li > ul > li > a{display: block; }
.dropdown-menu > li > ul > li.active{background: #cde;}

.dropdown-submenu li:hover
.dropdown-menu > li > ul > li:hover{
    background:#f8f8f8;
}

.dropdown-menu .group{}
.dropdown-menu .group-active{}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px; border-radius:0 6px 6px 6px;}
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#888;}
.dropdown-submenu.pull-left{float:none;}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;border-radius:6px 0 6px 6px;}

.dropdown-menu .dropdown-submenu li{
    margin: 0em;
    padding: 0em;
}
.dropdown-menu .dropdown-submenu li a{
    padding: 0em 2em; 
}
#srvcounter{
	background:#f8f8f8; 
	color:#888;
	font-size: 120%; 
	float: right; 
	margin: 0 1em;
    padding: 0em 1em; 
}

/* ---------------------------------------------------------------------- 
   tiles bar
   ---------------------------------------------------------------------- */
#divtiles{
    /*
    padding-left: 1%; height: 12em; 
    background: #aaa;
    border-bottom: 3px solid #999;
    padding-top: 75px;
    position: relative;
    background: #f4f4f4;
    border-bottom: 3px solid #e8e8e8;
    */
    /*
    height: 6em; 
    padding: 1em 1em 1em 0; 
    */
}


.tile{float: left; height: 6em; 
      margin: -15px 10px 0 0; 
      text-align: center;
      color:#667;
}
.tile .counter{font-size: 200%;}
.tile .dial{color:#fa2; background-color: #eee;
     color:#00e0ff;
     background-color: #00a0c0; 
     color:rgba(255,255,255,0.6);
     background-color: rgba(0,0,0,0.1); 
}
.tile canvas{display: block; float: left; margin-right: 0.5em;}

/* ---------------------------------------------------------------------- 
   logs
   ---------------------------------------------------------------------- */

.logs{background:#eee; padding: 3px 3px 1px; margin: 0.5em 0 2em; }
.logs *{margin-bottom: 3px; border-left: 13px solid #ccc; padding: 0.5em; }
.logs .type{display: none;}
.logs .warning{color:#a86; background:#fe9; border-color: #cb0;}
.logs .error{color:#c00; background:#ecc; border-color: #c00;}
.logs .info{color:#666; background:#ddd; border-color: #999;}
.logs .success{color:#080; background:#cfc; border-color: #9c9;}



/* ---------------------------------------------------------------------- 
   content
   ---------------------------------------------------------------------- */

#divmainbody{width: 97%; margin-left: 1%; margin-top: 10px; clear: both;
             border-top: 0px;
}
#divmaincontent{background: #fff; padding: 10px; clear: both;
                min-height: 400px;
}


/* headlines */   
/*
h2{font-size:200%; color:#88e; margin: 0px 0 10px; padding: 5px; 
   text-shadow: 1px 1px 0px #fff, 2px 2px 3px #ccc;
}
h3{color:#57a !important; padding: 0em 0 0 0;}
*/

/* boxes below headlines */

div.subh2 {margin: 0;}
div.subh3 {
    margin-left: 0; margin-bottom: 6em; 
    padding: 1em; 
    border-bottom: 2px solid #eee; 
    box-shadow: 0 1em 1em  rgba(0,0,0,0.05);
}
    div.subh3 .console{
        background:#f0f4f8;
        padding: 1em;
    }
    div.subh3 .console>*{
        font-family: "lucida console", "courier new";
        background:#f0f4f8;
        border: 0;
        margin: 0.3em;
    }
    div.subh3 .console h1{
        font-size: 180%; margin: 0; color: #46a;
    }
div.subh4 {margin-left: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 1px dotted #ccc; border-bottom: 1px dotted #ccc; border-bottom-left-radius: 10px;}


.hintbox{
         background: #fcf0d0;
         border: 0px solid #fff;
         border-radius: 5px; 
         padding: 10px; margin: 0 0 1em;
         color:#245;
}

.divNew{display: none; background: #cec;}
.divFrm{padding: 1em; display: none;}
.divServer{padding: 0em 1em 0; background: #f8f8f8; border-bottom: 1px solid #ddd; margin-bottom: 2px;}
.divServer:hover{background: #f0f4f8; }
.lastsave{ background:#fea;}

tr.default{}
tr.user{ color:#080; background:#efe;}
tr.error{ color:#800; background:#fcc;}

/* Links */   



/* pre */   
pre{background: #f8f8f8; color: #888; padding: 5px; font-size: 90%; display: inline-block;}
pre1.default{background: #666; color: #ddd; }
pre1.active{background: #060; color: #f8fff8; }
pre.default{background: #e0f0e0; color: #060; }
pre.active{background: #e0f0e0; color: #060; }

.raw{font-family: Menlo,Monaco,Consolas,"Courier New",monospace; /* background: #445 !important; color:#eef !important; */};

/* tables */   
div.dataTables_filter{float: left !important;}
div.dataTables_length{min-width: 200px;}
table.dataTable{width: auto; min-width: 600px; margin: 0;}
table.dataTable td{padding: 2px !important; font-size: 90%; font-family: arial;}
table.dataTable.no-footer{border-bottom: 0;}
table.dataTable a{background: none;}


/* */
.dataTables_wrapper {float: left; text-align: left;}
.dataTables_filter {
    width: auto;
    float: none;
    text-align: left;
}
.dataTables_filter input{
    width: 200px; border: 1px solid #f8f8f8; border-radius:0px; padding: 2px;
    background: linear-gradient(#eee, #fff, #fff);
    background: #f8f8f8;
    color:#b30;
}
.dataTables_filter input:focus{
    border: 1px solid #ddd;
    background: #fff;
}
.dataTables_filter a{
    border: 1px solid #daa;
    border-radius: 2px;
    background: #fcc;
    background: linear-gradient(#fcc, #fee, #fcc);
    color: #daa;
    padding: 0.2em 0.5em;
    margin-left: 3px;
    font-weight: bold;
}
.dataTables_filter a:hover{
    background: #a33;
    color: #fcc;
    text-decoration: none;
}
.dataTables_length {
    float: left;
    width: 15%;
}    
.sorting_asc {
    background-image: url('../../images/sort_asc.png'), linear-gradient(to bottom, #cef, #7ce) !important;
    border-left: 1px solid #fff;
    border-right: 1px solid #aaa;
}

.sorting_desc {
    background-image: url('../../images/sort_desc.png'), linear-gradient(to bottom, #7ce, #cef)  !important;
    border-left: 1px solid #fff;
    border-right: 1px solid #aaa;
}

.sorting {
    background: #e8e8e8 url('../../images/sort_both.png') no-repeat center right;
    border-left: 1px solid #fff;
    border-right: 1px solid #ddd;
}

.sorting_asc_disabled {
    background: url('../../images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
    background: url('../../images/sort_desc_disabled.png') no-repeat center right;
}

/*
 * Sorting classes for columns
 */
/* For the standard odd/even */
tr.odd td.sorting_1 {
    /* background-color: #D3D6FF; */
    background-color: #e0f0f8;
}

tr.odd td.sorting_2 {
    background: rgba(0,0,0,0.05);
}

tr.odd td.sorting_3 {
    background: rgba(0,0,0,0.03);
}

tr.even td.sorting_1 {
    /* background-color: #EAEBFF;*/
    background-color: #d8e8f0;
}

tr.even td.sorting_2 {
    background: rgba(0,0,0,0.1);
}

tr.even td.sorting_3 {
    background: rgba(0,0,0,0.07);
}


table.display tr.even.row_selected td {
    background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
    background-color: #9FAFD1;
}


/* charts  */

.chartsfortable{border: 1px solid #eee; background: #f8f8f8; background: linear-gradient(-10deg,#eee,#fff,#f8f8f8); float: left; margin-left: 1em; max-width: 60%;}
.chartsfortable .divbars{width: auto; float: left; min-height: 30em;}
.chartsfortable .divdonut{width: 20em; height:20em;float: right; border: 0px solid rgba(0,0,0,0.05); }

.morris-hover{position:absolute;z-index:1000; left: -1000em;}
.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255, 255, 255, 0.8);border:solid 2px rgba(230, 230, 230, 0.8);text-align:center;}
.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0;}
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0;}


/* go top div */

#divgotop{
    background: #333;
    background: rgba(0,0,0,0.1);
    position: fixed;
    bottom: 10px; left: 0px;
    padding: 10px 20px 10px 10px;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}
#divgotop a {color1:#eee; padding: 2em 5px;
             transition: all 0.4s ease-out;
}
#divgotop a span { display: none; }
#divgotop a:hover span { display: inline;}


/* footer */

#divfooter{text-align: center; 
           margin-top: 70px;
           background: #ddd;
           border-top: 2px solid #eee; 
           padding: 20px 0;
           box-shadow: 0 -5px 10px #aaa;
}

#divfooter ul {margin: 0;}
#divfooter ul li{ list-style: none; }
#divfooter ul li a{ color:#888;}
#divfooter ul li a:hover{ text-decoration: underline;}


/* dump */
.ok{}
.miss{background: #fcc;}

/*
plotter
*/
.plotter{position: absolute; 
         background: #f8f8f8; 
         background: linear-gradient(15deg,#f8f8f8,#ddd,#f8f8f8); 
         border: 1em solid #fff; top: 16em; left: 24em; box-shadow: 0 0 1em #aaa; z-index: 1000;
         display: none;
}
.plotter .btnclose{background: #f88; color:#fff; float: right; padding: 0.5em 1em; display: none; cursor: pointer;}
.plotter .btnclose:hover{background: #f66;}
.plotter .btnclose:active{background: #f66;}
.plotter .graph {}
.plotter .graph .infos{position: absolute; background: rgba(255,255,255,0.7); padding: 0.5em; margin: 0.5em 0.5em 0.5em;}
.plotter .graph .title{background: #00a0c0; background: linear-gradient(90deg,#000,#00a0c0, rgba(0,0,0,0.0)); color:#fff; font-weight: bold; padding: 0.5em; margin: 0 0 0.5em;}
.plotter .graph .barcontainer{float: left; }
.plotter .graph .barcontainer:hover {background: rgba(0,0,0,0.05);}
.plotter .graph .bar{background: #ace; background: linear-gradient(90deg,#00a0c0,#00c0ef);}
.plotter .graph .bar:hover {background: linear-gradient(90deg,#00a0c0,#00e0ff,#00a0c0);}
.plotter .graph .barcur{background: #3a3;background: linear-gradient(90deg,#fa2,#fc2,#fa2);}
.plotter .graph .current{position: absolute; left: 0; border-top: 1px solid #fc2; width: 100%;}
.plotter .graph .avg{position: absolute; left: 0; border-top: 1px dashed #a33; width: 100%;}

For more information send a message to info at phpclasses dot org.