autopeering/web/frontend/static/style.css

215 lines
No EOL
3.7 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;
}
/* # index.html */
/* based on https://codepen.io/t_afif/pen/RwQZLYb */
.progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
height: 10px;
border-radius: 10em;
background: var(--background);
}
.progress-bar {
--w: 100px; /* the width*/
--background: lightgrey; /* the background color */
width: var(--w);
margin: 0 10px;
}
.progress-value[value]{
--color: /* the progress color */
/* linear-gradient(#fff8,#fff0), */
/* repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px), */
/* if < 30% "red" */
linear-gradient(green 0 0) 0 /calc(var(--w)*.8 - 100%) 1px,
/* if < 60% "orange" */
linear-gradient(orange 0 0) 0 /calc(var(--w)*.9 - 100%) 1px,
/* else "green" */
red;
background-color: var(--color);
align-self: left;
margin: 0;
}
.progress[value]::-webkit-progress-bar {
border-radius: 10em;
background: var(--background);
}
.progress[value]::-webkit-progress-value {
border-radius: 10em;
background: var(--color);
}
.progress[value]::-moz-progress-bar {
border-radius: 10em;
background-color: var(--color);
}
/* .progress:before { */
/* position:absolute; */
/* height:30px; */
/* background:green; */
/* content:'50%'; hrere you should add the text */
/* top:0; */
/* left:0; */
/* width:50%; */
/* display:flex; */
/* color:white; */
/* align-items:center; */
/* justify-content:flex-end; */
/* padding-right:10px; */
/* } */
/* for peerings-{edit,new}.html */
.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;
}
/* for peerings.html */
.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;
}
.peering>* {
width: auto;
align-items: center;
}
/* button def */
button,
input[type=button] {
background-color: #00000020;
border-color: var(--text-color);
border-width: 5px;
padding: 10px;
}
button.button-selected,
input[type=button].button-selected {
background-color: var(--other-background);
color: var(--text-color-dark);
}
.button-blue {
border-color: lightblue;
}
.button-blue:hover {
background-color: #87cefaaa;
}
.button-red {
border-color: darkred;
}
.button-red:hover {
background-color: #ff0000aa;
}
.button-green {
border-color: lightgreen;
}
.button-green:hover {
background-color: greenyellow;
}
.default-border-color {
border-color: inherit;
}