292 lines
6.4 KiB
CSS
292 lines
6.4 KiB
CSS
/* hello */
|
|
:root{
|
|
--root-bg-color: black;
|
|
--root-bg-color-secondary: hsla(250, 50%, 20%, 0.2);
|
|
--root-bg-color-secondary-tewwo: hsla(250, 50%, 95%, 0.2);
|
|
--root-color: white;
|
|
--root-border-color: white;
|
|
--root-bg-color-btn: rgba(50, 50, 50, 0.5);
|
|
--root-bg-color-btn-hoover: rgb(50 50 50);
|
|
--root-bg-color-btn-focus: rgb(50 50 50);
|
|
--root-bg-color-img: white;
|
|
--root-shadow-color-btn-opened: rgba(0, 250, 0, 0.5);
|
|
--root-shadow-color-btn-cloded: rgba(250, 0, 0, 0.5);
|
|
--root-shadow-color-img: rgb(50 100 50);
|
|
}
|
|
.toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 20px;
|
|
background-color: hsla(100, 50%, 0%, 0.1);
|
|
border-radius: 17px;
|
|
border: 1px solid gray;
|
|
font-size: x-small;
|
|
}
|
|
|
|
.toggle:after{
|
|
content: '';
|
|
text-align: center;
|
|
text-justify: center;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background-color: gray;
|
|
top: 0px;
|
|
left: 0px;
|
|
transition: all 0.5s;
|
|
}
|
|
.checkbox:checked + .toggle::after {
|
|
left : 20px;
|
|
}
|
|
|
|
.checkbox:checked + .toggle {
|
|
background-color: white;
|
|
}
|
|
|
|
.checkbox {
|
|
display : none;
|
|
}
|
|
|
|
body {
|
|
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background-color: var(--root-bg-color, black);
|
|
color: var(--root-color, white);
|
|
|
|
#app {
|
|
#root{
|
|
p {
|
|
margin-left: 10px;
|
|
}
|
|
#root-controls{
|
|
|
|
#toogle-root-controls{
|
|
display: flex;
|
|
justify-content: right;
|
|
align-content: center;
|
|
gap: 20px;
|
|
color: var(--root-color, white);
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid var(--root-border-color, white);;
|
|
background-color: var(--root-bg-color-secondary, black);
|
|
|
|
#toogle-root-contols-btn{
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-right: 10px;
|
|
align-self: center;
|
|
border: 1px solid var(--root-border-color, white);;
|
|
background-color: var(--root-bg-color-btn, black);
|
|
color: var(--root-color, white);
|
|
border-radius: 4px;
|
|
|
|
}
|
|
#theme-container{
|
|
margin-right: auto;
|
|
margin-left: 10px;
|
|
align-self: center;
|
|
}
|
|
|
|
}
|
|
#root-select-control{
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
|
|
button{
|
|
align-self: center;
|
|
border: 1px solid var(--root-border-color, white);;
|
|
background-color: var(--root-bg-color-btn, black);
|
|
color: var(--root-color, white);;
|
|
border-radius: 4px;
|
|
font-size: larger;
|
|
}
|
|
}
|
|
}
|
|
#inst-selector {
|
|
#toogle-hist-control {
|
|
display: flex;
|
|
justify-content: right;
|
|
align-content: center;
|
|
gap: 20px;
|
|
color: var(--root-color, white);;
|
|
margin-bottom: 10px;
|
|
border-bottom: 1px solid var(--root-border-color, white);;
|
|
background-color: var(--root-bg-color-secondary, black);
|
|
|
|
button{
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-right: 10px;
|
|
border: 1px solid var(--root-border-color, white);;
|
|
background-color: var(--root-bg-color-btn, black);
|
|
align-self: center;
|
|
color: var(--root-color, white);;
|
|
border-radius: 4px;
|
|
|
|
}
|
|
}
|
|
#inst-type-selector{
|
|
display: flex;
|
|
gap: 6px;
|
|
align-content: center;
|
|
justify-content: center;
|
|
height: 35px;
|
|
button{
|
|
background-color: var(--root-bg-color-btn, black);
|
|
/* color: #fff; */
|
|
/* border: none; */
|
|
/* border-radius: 10px; */
|
|
/* box-shadow: 0px 1px 3px 2px rgb(90 90 90); */
|
|
margin-top: 10px;
|
|
margin-right: 6px;
|
|
width: 70px;
|
|
border: 1px solid var(--root-border-color, white);;
|
|
background-color: var(--root-bg-color-btn, black);
|
|
align-self: center;
|
|
color: var(--root-color, white);;
|
|
border-radius: 4px;
|
|
|
|
}
|
|
} /* <- end #inst-type-selector */
|
|
#response-div{
|
|
height: 70;
|
|
#inst-result-list-container{
|
|
#inst-result-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
list-style-type: none;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
.card {
|
|
.inst-link{
|
|
width: 86px;
|
|
height: 33px;
|
|
img{
|
|
width: 78px;
|
|
height: 28px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} /* end #response-div*/
|
|
#response-inst-card{
|
|
display: flex;
|
|
width: 370px;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
#inst-selected{
|
|
|
|
}
|
|
form{
|
|
width: 360px;
|
|
border-radius: 6px;
|
|
#inst-selected{
|
|
padding: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
img {
|
|
/* originally the dimensions where width: 155px, height: 55px */
|
|
background-color: var( --root-bg-color-img, white);;
|
|
padding: 2px;
|
|
width: 93px;
|
|
height: 33px;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 3px 4px var(--root-shadow-color-img, rgb(50 100 50));
|
|
}
|
|
} /* inst-selected */
|
|
fieldset{
|
|
border-radius: 8px;
|
|
margin-top: 5px;
|
|
border-width: 0.5px;
|
|
box-shadow: 0px 2px 3px 2px rgb(150 100 100);
|
|
border-width: 0px;
|
|
#tf-container{
|
|
margin: 10px 0px;
|
|
background: linear-gradient(to bottom, rgb( 70 70 70 / 60%), rgb(150 150 150 / 30%));
|
|
padding: 3px;
|
|
border-radius: 10px;
|
|
|
|
}
|
|
} /* end fieldset */
|
|
label#time-amount-selector{
|
|
width: 93px;
|
|
display: inline-block;
|
|
|
|
}
|
|
input#button-submit{
|
|
margin-top: 0px;
|
|
margin-left: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#response-inst-table-container{
|
|
display: flex;
|
|
table{
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 2px solid var(--root-border-color, white);;
|
|
thead th:nth-child(1) {
|
|
width: 19%;
|
|
}
|
|
thead th:nth-child(2) {
|
|
width: 15%;
|
|
}
|
|
thead th:nth-child(3) {
|
|
width: 19%;
|
|
}
|
|
thead th:nth-child(4) {
|
|
width: 15%;
|
|
}
|
|
thead th:nth-child(5) {
|
|
width: 32%;
|
|
}
|
|
td, th{
|
|
text-align: center;
|
|
padding: 4px;
|
|
span.green{
|
|
color: green;
|
|
}
|
|
span.red{
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
tfoot th {
|
|
text-align: left;
|
|
}
|
|
thead,
|
|
tfoot {
|
|
/* background: url(leopardskin.jpg); */
|
|
color: var(--root-color, white);;
|
|
text-shadow: 1px 1px 1px black;
|
|
}
|
|
|
|
thead th, tfoot th, tfoot td {
|
|
background: linear-gradient(to bottom, rgb( 0 0 70 / 10%), rgb(100 100 100 / 60%));
|
|
border: 3px solid hsla(270, 100%, 20%, 0.1);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.opened{
|
|
box-shadow: 0px 2px 2px 2px var(--root-shadow-color-btn-opened, green);
|
|
}
|
|
.closed{
|
|
box-shadow: 0px 1px 1px 1px var(--root-shadow-color-btn-closed, red);
|
|
}
|