216 lines
3.9 KiB
CSS
216 lines
3.9 KiB
CSS
|
/* -----------------------------------
|
||
|
* Styles for CumulusMX Templates
|
||
|
Last modified: 2021/03/19 09:23:15
|
||
|
* ----------------------------------*/
|
||
|
|
||
|
html, body, p, h1, h2, h3, h4, h5, h6, li, td, th {
|
||
|
font-family: 'Rosario', sans-serif;
|
||
|
}
|
||
|
|
||
|
p {
|
||
|
font-size: 15px;
|
||
|
}
|
||
|
|
||
|
#Header {
|
||
|
border-style: solid;
|
||
|
border-width: 0 0 10px 0;
|
||
|
}
|
||
|
|
||
|
.site-width {
|
||
|
max-width:1140px;
|
||
|
margin:auto;
|
||
|
}
|
||
|
|
||
|
.graph-width {
|
||
|
max-width:1250px;
|
||
|
margin:auto;
|
||
|
}
|
||
|
|
||
|
#Footer {
|
||
|
border-width:5px 0 0 0;
|
||
|
border-style: solid;
|
||
|
}
|
||
|
|
||
|
.logo {
|
||
|
max-width:250px;
|
||
|
margin: 5px 0 5px 16px;
|
||
|
}
|
||
|
|
||
|
.subText {
|
||
|
font-size: 80% !important;
|
||
|
font-weight:400;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
background-image: url('../images/picture.jpg');
|
||
|
background-position: bottom left;
|
||
|
background-repeat: no-repeat;
|
||
|
background-attachment: fixed;
|
||
|
}
|
||
|
|
||
|
.statusPanel h5 {
|
||
|
margin-bottom: -5px;
|
||
|
}
|
||
|
/* -------------------------------------
|
||
|
* Flex boxes
|
||
|
* -------------------------------------*/
|
||
|
.at-flex-start { display:flex;}
|
||
|
.at-flex-end {
|
||
|
display:flex;
|
||
|
justify-content: flex-end;
|
||
|
flex-wrap:wrap;
|
||
|
}
|
||
|
|
||
|
.at-flex-justify {
|
||
|
display:flex;
|
||
|
justify-content: space-around;
|
||
|
flex-wrap:wrap;
|
||
|
}
|
||
|
|
||
|
.at-flex-between {
|
||
|
display:flex;
|
||
|
justify-content: space-between;
|
||
|
flex-wrap:wrap;
|
||
|
}
|
||
|
|
||
|
.at-flex-bottom,
|
||
|
.at-flex-items-bottom {
|
||
|
align-items: flex-end;
|
||
|
}
|
||
|
|
||
|
.at-flex-items-center {
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
/* --------------------------------------------------
|
||
|
* Menu enhancements
|
||
|
* --------------------------------------------------*/
|
||
|
#Main_Menu {
|
||
|
margin-bottom: 4px;
|
||
|
border-width:2px 0 0 0 ;
|
||
|
border-style: solid;
|
||
|
min-height: 32px;
|
||
|
}
|
||
|
|
||
|
.at-slim {
|
||
|
padding: 4px 14px!important;
|
||
|
}
|
||
|
|
||
|
.at-divider {
|
||
|
margin: 0 5px;
|
||
|
color:#F80;
|
||
|
}
|
||
|
|
||
|
.at-spacer {
|
||
|
min-height:2em;
|
||
|
}
|
||
|
|
||
|
.at-menu-lable {
|
||
|
display:block;
|
||
|
width:100%;
|
||
|
font-size: 13px;
|
||
|
font-style: italic;
|
||
|
padding-bottom: 2px!important;
|
||
|
padding-top:4px!important;
|
||
|
border-bottom: 1px dotted #c2cfa5!important;
|
||
|
}
|
||
|
|
||
|
.at-menu-bar {
|
||
|
display:block;
|
||
|
height: 2px;
|
||
|
padding: 0 2px!important;
|
||
|
}
|
||
|
|
||
|
.at-indent {
|
||
|
padding-left: 40px!important;
|
||
|
}
|
||
|
|
||
|
/* -------------------------------
|
||
|
* Model enhancements
|
||
|
* ------------------------------*/
|
||
|
|
||
|
.w3-modal-content {
|
||
|
margin-top:10%;
|
||
|
border-radius: 8px;
|
||
|
}
|
||
|
|
||
|
.w3-modal header { border-radius: 8px 8px 0 0;}
|
||
|
.w3-modal footer { border-radius: 0 0 8px 8px;}
|
||
|
.w3-modal .w3-btn { border-radius: 0 8px;}
|
||
|
|
||
|
/* ----------------------------------------
|
||
|
* Media enhancements
|
||
|
* ---------------------------------------*/
|
||
|
@media screen and (max-width:780px) {
|
||
|
#Footer { position: unset; }
|
||
|
#Content {
|
||
|
/*margin-top: 170px!important;*/
|
||
|
margin-bottom: 5px!important;
|
||
|
}
|
||
|
|
||
|
.statusPanel {
|
||
|
text-align:center!important;
|
||
|
margin:auto!important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (max-height:768px) {
|
||
|
#Footer { position: unset; item: center;}
|
||
|
#Content {
|
||
|
margin-bottom: 5px!important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* --------------------------------------
|
||
|
* LED enhancements
|
||
|
* -------------------------------------*/
|
||
|
.at-led-round {
|
||
|
display:inline-block;
|
||
|
height: 1.2em;
|
||
|
width: 1.2em;
|
||
|
margin: 0 0.5em -3px 0.5em;
|
||
|
border-radius: 50%;
|
||
|
background-color: #888;
|
||
|
box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
|
||
|
}
|
||
|
|
||
|
.at-led-block {
|
||
|
display:inline-block;
|
||
|
height: 1.2em;
|
||
|
width: 1.2em;
|
||
|
margin: 0 0.5em -3px 0.5em;
|
||
|
background-color: #888;
|
||
|
box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
|
||
|
}
|
||
|
|
||
|
.at-led-brick {
|
||
|
display:inline-block;
|
||
|
height:0.8em;
|
||
|
width:1.6em;
|
||
|
margin:0 0.5em -3px 0.5em;
|
||
|
background-color: #888;
|
||
|
box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
|
||
|
}
|
||
|
.at-led-oval {
|
||
|
display:inline-block;
|
||
|
height:1em;
|
||
|
width:2em;
|
||
|
margin:0 0.5em -3px 0.5em;
|
||
|
border-radius: 50%;
|
||
|
background-color: #888;
|
||
|
box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
|
||
|
}
|
||
|
|
||
|
.at-led-green {
|
||
|
background-color: #0b0;
|
||
|
}
|
||
|
|
||
|
.at-led-flash-red {
|
||
|
animation: flashR 1s infinite;
|
||
|
}
|
||
|
|
||
|
@keyframes flashR {
|
||
|
0%, 60% {background-color: #f00;}
|
||
|
61%,100% {background-color: #800;}
|
||
|
}
|