Juice/static/juice.css
2019-07-02 08:47:34 -04:00

156 lines
2.1 KiB
CSS

body {
font-family: Helvetica,sans-serif;
background-color: lightblue;
margin: 0;
}
#logo-line {
display: flex;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#logo {
height: 5em;
}
h1 {
margin-top: auto;
margin-bottom: 0;
}
h3 {
margin-top: auto;
margin-bottom: 0.1em;
margin-left: 0.5em;
color: whitesmoke;
text-shadow:
1px 1px 0 dimgray,
-1px 1px 0 dimgray,
1px -1px 0 dimgray,
-1px -1px 0 dimgray;
}
.font-awesome {
font-family: FontAwesome;
font-style: normal;
}
nav {
background-color: whitesmoke;
border-top: 1px solid darkgray;
border-bottom: 1px solid darkgray;
display: flex;
}
nav span {
color: dimgray;
cursor: pointer;
transition: 0.1s;
padding: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
}
nav a {
text-decoration: none;
color: inherit;
}
nav span:hover {
background-color: lightgray;
}
#devices {
padding: 5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.device {
border: 2px solid darkgray;
border-radius: 0.5em;
padding: 3em;
margin: 3em;
display: flex;
flex-direction: column;
align-items: center;
background-color: whitesmoke;
}
.ip_address {
font-size: 0.8em;
font-style: italic;
color: dimgray;
margin: 0.2em;
}
.sub_devices {
display: flex;
}
.sub_device {
border: 2px solid darkgray;
border-radius: 0.5em;
padding: 1em;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
}
.outlet_image {
width: 5em;
height: 5em;
}
@font-face {
font-family: FontAwesome;
src: url("/static/fontawesome-webfont.woff2");
}
.edit, .save, .lock, .unlock, .delete {
font-size: 0.8em;
color: dimgrey;
margin-left: 0.4em;
}
.edit:hover, .save:hover, .lock:hover, .unlock:hover, .delete:hover {
color: red;
cursor: pointer;
}
.manage-table {
border-collapse: collapse;
}
.manage-table th {
padding-left: 0.5em;
padding-right: 0.5em;
}
.manage-table td {
border: 1px solid darkgray;
padding-left: 0.5em;
padding-right: 0.5em;
text-align: center;
}
.sub-table {
margin-top: 5em;
}
.manage-table tfoot td {
border: none;
}
.add {
color: dimgrey;
}
.add:hover {
color: red;
cursor: pointer;
}