2022-05-01 15:34:15 +02:00
|
|
|
@import "vars";
|
|
|
|
|
2023-04-30 22:32:50 +02:00
|
|
|
$collapse-toggler-width: 2em;
|
|
|
|
|
2023-05-01 01:21:18 +02:00
|
|
|
@mixin expanded-entity {
|
|
|
|
background: $selected-bg;
|
|
|
|
font-weight: bold;
|
|
|
|
box-shadow: 0 0 3px 2px $default-shadow-color;
|
2023-05-06 12:34:27 +02:00
|
|
|
|
|
|
|
@include until(#{$tablet - 1}) {
|
|
|
|
border-radius: 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.entity-container {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
|
|
@include until(#{$tablet - 1}) {
|
|
|
|
border-radius: 1em;
|
|
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
border-bottom: $default-border-3;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@include from($tablet) {
|
|
|
|
border-bottom: $default-border-3;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.with-children:not(.collapsed) {
|
|
|
|
@include expanded-entity();
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: $hover-bg;
|
|
|
|
}
|
|
|
|
|
|
|
|
.adjuster {
|
|
|
|
cursor: pointer;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
&.with-children {
|
|
|
|
width: calc(100% - $collapse-toggler-width - 0.5em);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@include until(#{$tablet - 1}) {
|
|
|
|
.entity-container {
|
|
|
|
.children {
|
|
|
|
border-radius: 0 0 1em 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.child {
|
|
|
|
&:not(:last-child) {
|
|
|
|
.entity-container {
|
|
|
|
border-bottom: $default-border-3;
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-05-01 01:21:18 +02:00
|
|
|
}
|
|
|
|
|
2022-05-01 15:34:15 +02:00
|
|
|
.entity {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2023-05-05 01:04:39 +02:00
|
|
|
justify-content: center;
|
2022-05-01 15:34:15 +02:00
|
|
|
|
2023-05-01 01:21:18 +02:00
|
|
|
&.expanded {
|
|
|
|
@include expanded-entity();
|
|
|
|
}
|
|
|
|
|
2022-05-01 15:34:15 +02:00
|
|
|
.head {
|
2022-05-01 15:44:57 +02:00
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2022-05-01 15:34:15 +02:00
|
|
|
padding: 0.75em 0.25em;
|
2023-04-22 16:31:47 +02:00
|
|
|
min-height: 3.5em;
|
|
|
|
position: relative;
|
|
|
|
|
2023-05-01 01:21:18 +02:00
|
|
|
&.expanded {
|
|
|
|
background: $selected-bg;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2023-04-22 16:31:47 +02:00
|
|
|
.icon {
|
2023-04-30 22:32:50 +02:00
|
|
|
@extend .col-1;
|
2023-05-01 01:21:18 +02:00
|
|
|
margin-right: 0.5em;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $hover-fg;
|
|
|
|
}
|
2023-04-22 16:31:47 +02:00
|
|
|
}
|
2022-05-01 15:34:15 +02:00
|
|
|
|
|
|
|
.label {
|
2023-04-30 22:32:50 +02:00
|
|
|
@extend .col-s-8;
|
|
|
|
@extend .col-m-9;
|
2022-05-01 15:34:15 +02:00
|
|
|
margin-top: 0.25em;
|
2023-05-01 01:21:18 +02:00
|
|
|
margin-left: 0.5em;
|
2022-05-01 15:34:15 +02:00
|
|
|
}
|
|
|
|
|
2023-05-01 01:21:18 +02:00
|
|
|
.name {
|
|
|
|
display: inline-flex;
|
|
|
|
word-break: break-all;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $hover-fg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.value {
|
|
|
|
font-size: 1.1em;
|
2022-05-01 15:34:15 +02:00
|
|
|
font-weight: bold;
|
2023-05-01 01:21:18 +02:00
|
|
|
word-break: break-all;
|
|
|
|
opacity: 0.8;
|
2022-05-01 15:34:15 +02:00
|
|
|
}
|
|
|
|
|
2023-04-30 22:32:50 +02:00
|
|
|
.value-and-toggler {
|
|
|
|
@extend .col-3;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: right;
|
|
|
|
min-width: 7em;
|
|
|
|
|
|
|
|
.value {
|
|
|
|
margin-right: 2.5em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.value-container {
|
|
|
|
@extend .col-s-3;
|
|
|
|
@extend .col-m-2;
|
|
|
|
@extend .pull-right;
|
|
|
|
min-width: 7em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.unit {
|
|
|
|
margin-left: 0.2em;
|
|
|
|
}
|
|
|
|
|
2022-05-01 15:34:15 +02:00
|
|
|
.pull-right {
|
|
|
|
padding-right: 0.5em;
|
|
|
|
|
|
|
|
:deep(.power-switch) {
|
2023-03-20 01:26:48 +01:00
|
|
|
@include pull-right;
|
2022-05-01 15:34:15 +02:00
|
|
|
margin-top: 0.25em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.body {
|
|
|
|
@extend .fade-in;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 0.5em;
|
|
|
|
background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
|
|
|
|
border-top: 1px solid $border-color-1;
|
|
|
|
box-shadow: $border-shadow-bottom;
|
2023-04-22 16:31:47 +02:00
|
|
|
font-weight: normal;
|
2022-05-01 15:34:15 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
height: 2em;
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
padding: 0 0 0 1em;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $default-hover-fg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-04-22 16:31:47 +02:00
|
|
|
|
|
|
|
.collapse-toggler {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: flex-end;
|
|
|
|
flex: 1;
|
2023-04-30 22:32:50 +02:00
|
|
|
min-height: $collapse-toggler-width;
|
2023-04-22 16:31:47 +02:00
|
|
|
margin-right: 1.25em;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $default-hover-fg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.attributes .child {
|
2023-04-30 22:32:50 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2023-04-22 16:31:47 +02:00
|
|
|
padding: 0.5em 1em;
|
|
|
|
|
2023-04-30 22:32:50 +02:00
|
|
|
@include until($tablet - 1) {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
2023-04-22 16:31:47 +02:00
|
|
|
&:not(:last-child) {
|
|
|
|
border-bottom: 1px solid $border-color-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: initial;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.head {
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
|
|
background: $hover-bg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.label {
|
|
|
|
font-weight: bold;
|
2023-04-30 22:32:50 +02:00
|
|
|
@extend .col-s-12;
|
|
|
|
@extend .col-m-6;
|
2023-04-22 16:31:47 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.value {
|
|
|
|
font-size: 0.95em;
|
2023-04-30 22:32:50 +02:00
|
|
|
word-break: break-all;
|
|
|
|
@extend .col-s-12;
|
|
|
|
@extend .col-m-6;
|
2023-04-22 16:31:47 +02:00
|
|
|
|
|
|
|
@include from($tablet) {
|
2023-04-30 22:32:50 +02:00
|
|
|
text-align: right;
|
2023-04-22 16:31:47 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-05-06 12:34:27 +02:00
|
|
|
|
|
|
|
.entity-container-wrapper {
|
|
|
|
&.with-children:not(.collapsed) {
|
|
|
|
box-shadow: 0 3px 4px 0 $default-shadow-color;
|
|
|
|
|
|
|
|
@include until(#{$tablet - 1}) {
|
|
|
|
border-radius: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include from($tablet) {
|
|
|
|
.children .child:last-child {
|
|
|
|
box-shadow: 0 3px 4px 0 $default-shadow-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@include until(#{$tablet - 1}) {
|
|
|
|
box-shadow: 0 3px 4px 0 $default-shadow-color;
|
|
|
|
|
|
|
|
&.collapsed {
|
|
|
|
border-radius: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.children {
|
|
|
|
.entity-container-wrapper {
|
|
|
|
border-radius: 0;
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
&.with-children:not(.collapsed) {
|
|
|
|
border-radius: 1em;
|
|
|
|
box-shadow: 0 3px 4px 0 $default-shadow-color;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-radius: 0 0 1em 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.blink {
|
|
|
|
animation: blink-animation 1s steps(20, start);
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes blink-animation {
|
|
|
|
0% {
|
|
|
|
background: initial
|
|
|
|
}
|
|
|
|
|
|
|
|
50% {
|
|
|
|
background: $active-bg;
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
background: initial
|
|
|
|
}
|
|
|
|
}
|