autopeering/web/frontend/static/style.css

124 lines
No EOL
1.9 KiB
CSS

:root {
--bg-color: #aaa;
--other-background: #444;
--text-color: black;
--text-color-dark: white;
/* --accent-color: ; */
}
body {
margin: 0;
width: auto;
height: auto;
background-color: var(--bg-color);
}
header {
background-color: var(--other-background);
height: 50px;
}
a {
color: var(--text-color);
}
.content {
width: 100%;
height: calc(100% - 55px);
margin: auto;
padding-bottom: 50px;
}
.content>* {
padding: 5%;
}
.flex {
display: flex;
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex>* {
flex-flow: column;
/* width: 1fr;
height: 1fr; */
/* background-color: aquamarine; */
margin: auto;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: var(--other-background);
}
footer.flex {
flex-direction: row;
}
.example-config {
background-color: white;
padding: 1%;
}
.example-config > pre{
border-color: var(--other-background);
border-radius: 10px;
padding: 10px;
border-style: groove;
}
form > div > * {
margin: 10px;
}
.peering {
border-color: var(--other-background);
border-radius: 10px;
padding: 10px;
border-style: inset;
display: grid;
grid-auto-flow: column;
flex-direction: row;
width: 100%;
margin: 10px;
}
.peering > div {
display: flex;
flex-direction: column;
}
.peering > div > * {
padding: 10px;
}
button {
background-color: #00000020;
border-color: var(--text-color);
border-width: 5px;
padding: 10px;
}
button.button-selected{
background-color: var(--other-background);
color: var(--text-color-dark);
}
.peering>* {
width:auto;
align-items: center;
}
.peering-edit {
border-color: lightblue;
}
.peering-edit:hover {
background-color: #87cefaaa;
}
.peering-delete {
border-color: darkred;
}
.peering-delete:hover {
background-color: #ff0000aa;
}