2022-11-12 14:50:18 +01:00
|
|
|
:root {
|
|
|
|
--bg-color: #aaa;
|
|
|
|
--other-background: #444;
|
2022-12-03 23:26:04 +01:00
|
|
|
--text-color: black;
|
|
|
|
--text-color-dark: white;
|
2022-11-17 06:43:43 +01:00
|
|
|
/* --accent-color: ; */
|
2022-11-12 14:50:18 +01:00
|
|
|
}
|
|
|
|
|
2022-11-11 20:17:37 +01:00
|
|
|
body {
|
2022-11-12 14:50:18 +01:00
|
|
|
margin: 0;
|
|
|
|
width: auto;
|
|
|
|
height: auto;
|
|
|
|
background-color: var(--bg-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
header {
|
|
|
|
background-color: var(--other-background);
|
|
|
|
height: 50px;
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
2022-11-17 06:43:43 +01:00
|
|
|
a {
|
|
|
|
color: var(--text-color);
|
|
|
|
}
|
|
|
|
|
2022-11-12 14:50:18 +01:00
|
|
|
.content {
|
|
|
|
width: 100%;
|
|
|
|
height: calc(100% - 55px);
|
2022-11-17 06:43:43 +01:00
|
|
|
margin: auto;
|
2022-11-21 19:41:28 +01:00
|
|
|
padding-bottom: 50px;
|
2022-11-17 06:43:43 +01:00
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
2022-11-17 06:43:43 +01:00
|
|
|
.content>* {
|
|
|
|
padding: 5%;
|
2022-11-12 14:50:18 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.flex {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
2022-11-17 06:43:43 +01:00
|
|
|
.flex-row {
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
2022-11-12 14:50:18 +01:00
|
|
|
|
|
|
|
.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);
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
2022-11-12 14:50:18 +01:00
|
|
|
footer.flex {
|
|
|
|
flex-direction: row;
|
2022-11-21 19:41:28 +01:00
|
|
|
}
|
|
|
|
|
2022-12-12 19:40:30 +01:00
|
|
|
/* # 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);
|
|
|
|
}
|
2022-12-21 21:21:57 +01:00
|
|
|
.progress-bar {
|
|
|
|
--w: 100px; /* the width*/
|
|
|
|
|
|
|
|
--background: lightgrey; /* the background color */
|
|
|
|
width: var(--w);
|
|
|
|
margin: 0 10px;
|
|
|
|
}
|
2022-12-12 19:40:30 +01:00
|
|
|
|
|
|
|
.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 */
|
2022-11-21 19:41:28 +01:00
|
|
|
.example-config {
|
|
|
|
background-color: white;
|
|
|
|
padding: 1%;
|
|
|
|
}
|
|
|
|
|
2022-12-07 17:00:52 +01:00
|
|
|
.example-config>pre {
|
2022-11-21 19:41:28 +01:00
|
|
|
border-color: var(--other-background);
|
|
|
|
border-radius: 10px;
|
|
|
|
padding: 10px;
|
|
|
|
border-style: groove;
|
|
|
|
}
|
|
|
|
|
2022-12-07 17:00:52 +01:00
|
|
|
form>div>* {
|
2022-11-21 19:41:28 +01:00
|
|
|
margin: 10px;
|
2022-11-27 00:00:01 +01:00
|
|
|
}
|
|
|
|
|
2022-12-12 19:40:30 +01:00
|
|
|
/* for peerings.html */
|
2022-11-27 00:00:01 +01:00
|
|
|
.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%;
|
2022-12-03 13:31:47 +01:00
|
|
|
margin: 10px;
|
2022-11-27 00:00:01 +01:00
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
|
|
|
.peering>div {
|
2022-11-27 00:00:01 +01:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
|
|
|
.peering>div>* {
|
2022-11-27 00:00:01 +01:00
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
|
2022-12-12 19:40:30 +01:00
|
|
|
.peering>* {
|
|
|
|
width: auto;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
/* button def */
|
2022-12-07 17:00:52 +01:00
|
|
|
button,
|
|
|
|
input[type=button] {
|
2022-11-27 00:00:01 +01:00
|
|
|
background-color: #00000020;
|
|
|
|
border-color: var(--text-color);
|
|
|
|
border-width: 5px;
|
|
|
|
padding: 10px;
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
|
|
|
button.button-selected,
|
|
|
|
input[type=button].button-selected {
|
2022-12-03 23:26:04 +01:00
|
|
|
background-color: var(--other-background);
|
|
|
|
color: var(--text-color-dark);
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
2022-11-27 00:00:01 +01:00
|
|
|
|
2022-12-07 17:00:52 +01:00
|
|
|
.button-blue {
|
2022-11-27 00:00:01 +01:00
|
|
|
border-color: lightblue;
|
|
|
|
}
|
|
|
|
|
2022-12-07 17:00:52 +01:00
|
|
|
.button-blue:hover {
|
2022-11-27 00:00:01 +01:00
|
|
|
background-color: #87cefaaa;
|
|
|
|
}
|
|
|
|
|
2022-12-07 17:00:52 +01:00
|
|
|
.button-red {
|
2022-11-27 00:00:01 +01:00
|
|
|
border-color: darkred;
|
|
|
|
}
|
2022-12-07 17:00:52 +01:00
|
|
|
|
|
|
|
.button-red:hover {
|
2022-11-27 00:00:01 +01:00
|
|
|
background-color: #ff0000aa;
|
2022-12-07 17:00:52 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.button-green {
|
|
|
|
border-color: lightgreen;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button-green:hover {
|
|
|
|
background-color: greenyellow;
|
|
|
|
}
|
|
|
|
|
|
|
|
.default-border-color {
|
|
|
|
border-color: inherit;
|
2022-11-11 20:17:37 +01:00
|
|
|
}
|