12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- img {
- border-radius: 0.5rem;
- width: 15.625rem;
- height: 12.5rem;
- margin: 0rem 0.3125rem;
- }
-
- .container {
- text-align: center;
- display: grid;
- grid-template-columns: 40.625rem 12.5rem;
- grid-template-rows: 12.5rem 6.25rem 6.25rem;
- width: 53.125rem;
- min-width: 46.875rem;
- font-family: Cormorant;
- box-shadow: 0.3125rem 0.3125rem 0.3125rem silver;
- border-radius: 1.25rem;
- border-color: silver;
- border-width: 0.0625rem;
- border-style: solid;
- padding: 0.625rem;
- margin: auto;
- margin-top: 3rem;
- }
-
- .robotImage {
- grid-row: 1 / -1;
- grid-column: 2 / 3;
- justify-self: end;
- align-self: start;
- }
-
- .robotAkku {
- grid-row: 1 / 2;
- grid-column: 1/2;
- justify-self: start;
- align-self: center;
- display: grid;
- grid-template-columns: 15.625rem 12.5rem 12.5rem;
- align-items: center;
- }
-
- .akkuMsg {
- grid-column: 1/2;
- justify-self: start;
- align-self: center;
- margin: 0;
- }
-
- .akkuProgressbar {
- grid-column: 2/3;
- justify-self: center;
- align-self: center;
- }
-
- .akkuValue {
- grid-column: 3/4;
- justify-self: start;
- align-self: center;
- margin: 0;
- margin-left: 0.3125rem;
- }
-
- .robotCoordinates {
- grid-row: 2 / 3;
- grid-column: 1/2;
- justify-self: start;
- align-self: center;
- display: grid;
- grid-template-columns: 15.625rem 12.5rem;
- align-items: center;
- }
-
- .item-timestamp-name {
- grid-column: 1/2;
- justify-self: start;
- align-self: start;
- }
-
- .item-timestamp-value {
- grid-column: 2/3;
- justify-self: start;
- align-self: center;
- }
-
- mat-spinner {
- margin: 7rem auto;
- }
|