554 lines
12 KiB
CSS
554 lines
12 KiB
CSS
@font-face {
|
|
font-family: LexendDecaBold;
|
|
src: url(/vendor/fonts/LexendDeca-Bold.ttf);
|
|
}
|
|
@font-face {
|
|
font-family: LexendDecaMedium;
|
|
src: url(/vendor/fonts/LexendDeca-Medium.ttf);
|
|
}
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 20px;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
font-family: LexendDecaBold;
|
|
font-weight: light;
|
|
color: #2e3436;
|
|
}
|
|
div.main {
|
|
width: 100%;
|
|
max-width: 900px;
|
|
height: auto;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
border: 5px solid #c3c3c3;
|
|
position: relative;
|
|
}
|
|
div.navigation {
|
|
width: 250px;
|
|
height: 600px;
|
|
background-color: #ebebeb;
|
|
float: left;
|
|
display: inline-block;
|
|
position: relative;
|
|
z-index: 501;
|
|
}
|
|
div.navigation.secondary {
|
|
position: absolute;
|
|
left: -250px;
|
|
top: 0;
|
|
overflow-y: auto;
|
|
z-index: 500;
|
|
transition-duration: .6s;
|
|
width: 500px;
|
|
backdrop-filter: blur(10px);
|
|
background-color: #ebebeb8c;
|
|
}
|
|
div.navigation.secondary img {
|
|
width: 100px !important;
|
|
}
|
|
div.navigation>div, div.save-button {
|
|
padding: 5px;
|
|
margin: 10px;
|
|
line-height: 30px;
|
|
transition-duration: .4s;
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
}
|
|
div.navigation>div:hover,div.navigation>div.active,div.navigation-footer,div.navigation-header,div.save-button:hover {
|
|
background-color: #d2d2d2;
|
|
}
|
|
div.navigation div.navigation-header {
|
|
text-align: center;
|
|
}
|
|
div.navigation div.navigation-header>div {
|
|
background-color: #fff;
|
|
border-radius: 0 0 7px 7px;
|
|
color: grey;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
div.navigation>div>img:not(.infrago-logo),div.content div.save-button>img {
|
|
width: 30px;
|
|
max-height: 30px;
|
|
margin-right:20px;
|
|
vertical-align:middle;
|
|
filter: contrast(0.3);
|
|
}
|
|
div.navigation>div>img.infrago-logo {
|
|
width: 100%;
|
|
display:block;
|
|
margin-top: 15px;
|
|
}
|
|
div.content {
|
|
width: calc(100% - 250px);
|
|
float: right;
|
|
display: inline-block;
|
|
padding: 15px 20px;
|
|
height: 600px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
}
|
|
div.content>img.loader {
|
|
position: absolute;
|
|
height: 35%;
|
|
width: 35%;
|
|
left: 37.5%;
|
|
top: 37.5%;
|
|
display: none;
|
|
}
|
|
div#content {
|
|
transition-duration: .5s;
|
|
}
|
|
div#content.loading {
|
|
filter: blur(4px);
|
|
}
|
|
div#content.loading>img.loader {
|
|
display: block;
|
|
}
|
|
div.content div.content-header {
|
|
text-align: center;
|
|
line-height: 30px;
|
|
padding: 0;
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
font-size: 2em;
|
|
margin-block-start: 0.67em;
|
|
margin-block-end: 0.67em;
|
|
margin-inline-start: 0px;
|
|
margin-inline-end: 0px;
|
|
font-weight: bold;
|
|
unicode-bidi: isolate;
|
|
}
|
|
div.content img {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
div.navigation-footer {
|
|
position: absolute;
|
|
bottom:0;
|
|
width: calc(100% - 40px);
|
|
padding: 10px !important;
|
|
cursor: auto !important;
|
|
}
|
|
div.connection-indicator {
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 100%;
|
|
float: left;
|
|
vertical-align:middle;
|
|
margin: 7.5px;
|
|
}
|
|
div.connection-indicator.true {
|
|
background-color: #2ec27e;
|
|
}
|
|
div.connection-indicator.unknown {
|
|
background-color: #f6d32d;
|
|
}
|
|
div.connection-indicator.false {
|
|
background-color: #ed333b;
|
|
}
|
|
div.pin-table {
|
|
width: auto;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
div.pin-table img {
|
|
width: 30px;
|
|
transform: rotate(90deg);
|
|
padding-left: 17.5px;
|
|
}
|
|
div.pin-table div.row {
|
|
width: auto;
|
|
display: block;
|
|
height: 50px;
|
|
}
|
|
div.pin-table div.row * {
|
|
display: inline-block;
|
|
}
|
|
div.pin-table div.row input {
|
|
width: 100px;
|
|
border: 0;
|
|
background-color: #ebebeb;
|
|
padding: 15px;
|
|
font-family: inherit;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
height: 50px;
|
|
}
|
|
div.plug-table {
|
|
width: 100%;
|
|
margin-bottom: 50px;
|
|
}
|
|
div.row {
|
|
width: 100%;
|
|
height: 70px;
|
|
margin-bottom: 10px;
|
|
}
|
|
div.inventory-table>div.row {
|
|
height: 30px;
|
|
text-align: left;
|
|
display: block;
|
|
top: calc(50% - 27.5px);
|
|
position: relative;
|
|
width: auto;
|
|
background-color: #ebebeb;
|
|
margin: 10px;
|
|
padding: 5px;
|
|
border-radius: 25px;
|
|
height: auto;
|
|
line-height: 25px;
|
|
}
|
|
div.inventory-table>div.row div.plug-table {
|
|
margin-bottom: 0;
|
|
}
|
|
div.inventory-table>div.row div.plug-table div.label>span {
|
|
background-color: #d2d2d2;
|
|
}
|
|
div.inventory-table>div.row img,div.inventory-table>div.row img {
|
|
max-height: 100%;
|
|
width: auto;
|
|
display: inline-block;
|
|
filter: opacity(.5);
|
|
position: absolute;
|
|
}
|
|
div.inventory-table>div.row img.map,div.inventory-table>div.row img.down {
|
|
left: 10px;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
}
|
|
div.inventory-table>div.row img.down {
|
|
left: unset;
|
|
cursor: pointer;
|
|
right: 10px;
|
|
}
|
|
div.inventory-table>div.row span {
|
|
margin-left: 4px;
|
|
line-height: 25px;
|
|
display: block;
|
|
}
|
|
div.label {
|
|
display: inline-block;
|
|
width: 20%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
line-height: 100%;
|
|
float: left;
|
|
height: 70px;
|
|
}
|
|
div.label>span {
|
|
display: block;
|
|
top: calc(50% - 27.5px);
|
|
position:relative;
|
|
width: auto;
|
|
background-color: #ebebeb;
|
|
margin: 10px;
|
|
padding: 5px;
|
|
border-radius: 25px;
|
|
height: 25px;
|
|
line-height:25px;
|
|
}
|
|
div.label>span span {
|
|
padding: 2px;
|
|
background-color: #fff;
|
|
margin: 0px 3px;
|
|
border-radius: 100%;
|
|
display: block;
|
|
float: left;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
}
|
|
img#bridge-editor-img {
|
|
display: inline-block;
|
|
width: 65%;
|
|
max-height:70px;
|
|
}
|
|
div.row div.options {
|
|
display: inline-block;
|
|
width: 15%;
|
|
height: 70px;
|
|
float: right;
|
|
}
|
|
div.row div.options img {
|
|
width: 40%;
|
|
padding: 3px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
top: calc(50% - 25px);
|
|
position: relative;
|
|
filter: opacity(.5);
|
|
cursor: pointer;
|
|
}
|
|
div.action-menu {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
width: auto;
|
|
height: 50px;
|
|
z-index: 501;
|
|
}
|
|
div.action-menu img {
|
|
float: left;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #ffffff7a;
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
filter: contrast(0.3);
|
|
}
|
|
div.distinctly-input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
width:70%;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
}
|
|
.code-input, div.search-container input {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
background-color: #ebebeb;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
transition: border-color 0.3s ease;
|
|
border: none;
|
|
}
|
|
.code-input:focus {
|
|
border-color: #007bff;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 200px;
|
|
max-height: 200px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
background-color: #ebebeb;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
transition: border-color 0.3s ease;
|
|
border: none;
|
|
}
|
|
textarea:focus {
|
|
border-color: #007bff;
|
|
}
|
|
hr {
|
|
border: 3px solid #ebebeb;
|
|
margin: 20px 0;
|
|
}
|
|
div.search-container {
|
|
width: 100%;
|
|
height: 50px;
|
|
position: relative;
|
|
}
|
|
div.search-container input {
|
|
width: calc(100% - 60px);
|
|
border-radius: inherit 0px;
|
|
border-radius: 10px 0 0 10px;
|
|
}
|
|
div.search-container div.save-button {
|
|
width: 50px;
|
|
display: inline-block;
|
|
margin: 0;
|
|
height: 40px;
|
|
float: right;
|
|
text-align: center;
|
|
border-radius: 0 10px 10px 0
|
|
}
|
|
div.search-container div.save-button img {
|
|
margin: 0;
|
|
margin-top: 4px;
|
|
}
|
|
div.search-container div.results {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #d2d2d2;
|
|
border-radius: 10px;
|
|
}
|
|
div.program-field {
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
border: 3px solid #ebebeb;
|
|
border-radius: 25px;
|
|
}
|
|
.checkbox-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.checkbox-container input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.checkbox-container .checkbox-text {
|
|
display: inline-block;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border-radius: 25px;
|
|
background-color: #ebebeb;
|
|
padding: 5px 15px;
|
|
border: 3px solid #ebebeb;
|
|
}
|
|
.checkbox-container input[type="checkbox"]:checked + .checkbox-text {
|
|
background-color: #d2d2d2;
|
|
border: 3px solid #2e3436;
|
|
color: #fff;
|
|
}
|
|
div.save-button img {
|
|
display: inline-block;
|
|
}
|
|
div.save-button {
|
|
background-color: #ebebeb
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #ebebeb;
|
|
}
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
|
|
background: #d2d2d2;
|
|
}
|
|
div.toggle-switch {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
}
|
|
div.toggle-switch div {
|
|
display: inline-block;
|
|
}
|
|
div.toggle-switch div:nth-child(1), div.toggle-switch div:nth-child(3) {
|
|
width: 39%;
|
|
}
|
|
div.toggle-switch div:nth-child(2) {
|
|
width: 20%;
|
|
padding: 10px;
|
|
}
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 34px;
|
|
}
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 25px;
|
|
}
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 100%;
|
|
}
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(86px);
|
|
-ms-transform: translateX(86px);
|
|
transform: translateX(86px);
|
|
}
|
|
/* Rounded sliders */
|
|
.slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
table.simple-devider th,table.simple-devider td {
|
|
padding: 15px;
|
|
}
|
|
table.simple-devider * {
|
|
margin: 0;
|
|
vertical-align: top;
|
|
}
|
|
canvas {
|
|
cursor: crosshair;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
div.main {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
max-width: unset;
|
|
}
|
|
body {
|
|
padding: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
div.content {
|
|
width: calc(100% - 250px);
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
div.navigation {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
div.navigation-footer {
|
|
position: relative;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
|
|
div.navigation {
|
|
width: 40px;
|
|
height: 100%;
|
|
}
|
|
div.navigation > div > span {
|
|
display: none;
|
|
}
|
|
div.navigation>div {
|
|
padding: 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
div.navigation.secondary {
|
|
left: -500px !important;
|
|
}
|
|
div.navigation-footer {
|
|
display: none;
|
|
}
|
|
div.content {
|
|
width: calc(100% - 40px);
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
}
|