web.main.css Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of room-climate-station Show documentation
Show all versions of room-climate-station Show documentation
An example application that supports the configuration of rooms with sensors and actors.
@charset "utf-8";
body {
font-family: arial, sans-serif;
background: url('body_back.png') no-repeat;
overflow: hidden;
margin: 0px auto;
}
h1 {
font-family: 'Arial', sans-serif;
font-size: 30px;
color: rgba(142, 142, 142, 1);
font-weight: lighter;
}
a.button {
font-weight: bold;
box-shadow: 7px 7px 7px rgba(179, 179, 179, 1);
text-align: center;
text-decoration: none;
float: left;
text-shadow: 1px 1px 0 rgba(255, 255, 255, .6);
font-family: 'Arial', sans-serif;
font-size: 22px;
background-color: rgba(0, 0, 0, 0.6);
}
div#top {
height: 200px;
width: 1920px;
}
div#middle {
height: 680px;
width: 1920px;
display: table;
}
div#buttom {
height: 200px;
width: 1920px;
display: table-cell;
}
.rowDiv {
display: table-row;
}
.cellDiv {
display: table-cell;
width: 384px;
height: 240px;
}
.rowDivTop {
display: table-row;
}
.cellDivTop {
display: table-cell;
width: 640px;
vertical-align: bottom;
}
a.button:active {
box-shadow: 4px 4px 4px rgba(104, 104, 104, 1);
}
a.buttonRed:link, a.buttonRed:visited {
color: rgba(255, 51, 51, .7);
/* border: 3px solid rgba(255, 51, 51, .6); */
width: 100%;
height: 100%
}
a.buttonRed:hover {
box-shadow: 7px 7px 7px rgba(104, 104, 104, 1);
color: rgba(255, 51, 51, 1);
border-color: rgba(255, 51, 51, .7)
}
a.buttonRed:active {
color: rgba(255, 51, 51, .9);
box-shadow: 4px 4px 4px rgba(104, 104, 104, 1);
}
a.buttonGreen:link, a.buttonGreen:visited {
/* border: 3px solid rgba(128, 171, 68, .8); */
color: rgba(128, 171, 68, 0);
width: 100%;
height: 100%
}
a.buttonGreen:hover {
border-color: rgba(128, 171, 68, .9);
color: rgba(128, 171, 68, 0);
box-shadow: 7px 7px 7px rgba(104, 104, 104, 1);
}
a.buttonGreen:active {
box-shadow: 4px 4px 4px rgba(104, 104, 104, 1);
}
a.buttonYellow:link, a.buttonYellow:visited {
/* border: 4px solid rgba(251, 227, 59, 1); */
color: rgba(251, 227, 59, 1);
width: 100%;
height: 100%
}
a.buttonYellow:hover {
color: #FFCC00;
box-shadow: 7px 7px 7px rgba(104, 104, 104, 1);
border-color: #FFCC00;
}
a.buttonYellow:active {
box-shadow: 4px 4px 4px rgba(104, 104, 104, 1)
}
a#KITCHEN {
}
a#KITCHEN:active {
margin-left: 3px;
margin-top: 3px;
margin-right: -3px;
margin-bottom: -3px;
}
a#DINING {
}
a#DINING:active {
margin-left: 3px;
margin-top: 3px;
margin-bottom: -3px;
margin-right: -3px;
}
a#LIVING {
}
a#LIVING:active {
margin-left: 3px;
margin-top: 3px;
margin-right: -3px;
margin-bottom: -3px;
}
a#BEDROOM {
}
a#BEDROOM:active {
margin-left: 3px;
margin-top: 3px;
margin-bottom: -3px;
margin-right: -3px;
}
a#OUTSIDE {
}
a#OUTSIDE:active {
margin-left: 3px;
margin-top: 3px;
margin-right: -3px;
margin-right: -3px;
}
a#BATH_index {
}
a#BATH_index:active {
margin-left: 3px;
margin-top: 3px;
margin-right: -3px;
margin-bottom: -3px;
}
a#BATH {
}
a#BATH:active {
margin-left: 3px;
margin-top: 3px;
margin-bottom: -3px;
margin-right: -3px;
}
a#config:link, #config:visited {
width: 200px;
padding: 10px;
border: 2px solid #CCC;
color: rgba(255, 255, 255, 1);
box-shadow: 2px 2px 2px rgba(179, 179, 179, .6);
text-align: center;
font-family: 'Arial', sans-serif;
font-size: 22px;
text-decoration: none;
margin-left: 220px;
background-color: rgba(0, 0, 0, 0.6);
}
a#config:hover {
box-shadow: 2px 2px 2px rgba(179, 179, 179, 1);
border: 2px solid rgba(179, 179, 179, .9);
}
a#config:active {
margin-left: 223px;
margin-top: 3px;
box-shadow: 1px 1px 1px rgba(179, 179, 179, 1);
border: 2px solid rgba(179, 179, 179, .9);
}