diff options
Diffstat (limited to 'ui/css')
-rw-r--r-- | ui/css/style.css | 57 |
1 files changed, 55 insertions, 2 deletions
diff --git a/ui/css/style.css b/ui/css/style.css index e16181c..3d92840 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -2,7 +2,6 @@ body, html { margin: 0; padding: 0; - height: 100%; display: flex; justify-content: center; align-items: center; @@ -32,7 +31,6 @@ body, html { grid-row: 1 / span 2; /* Span the top left section across both rows */ } - .table-wrapper { flex-grow: 1; /* Table wrapper takes remaining space */ display: flex; @@ -90,3 +88,58 @@ ul { margin-left: 10px; } +.bottom-right { + position: relative; + display: flex; + flex-direction: row; + align-items: center; /* Align squares to the center horizontally */ +} +.canvas-square { + border: 5px solid black; + width: calc(20% - 5px); + height: calc(40% - 5px); + background-color: gray; +} +.traffic-light { + width: 20px; + height: 20px; + background-color: red; + position: absolute; + bottom: 5px; + right: 5px; +} +.barrier { + width: 20px; + height: 20px; + background-color: red; + position: absolute; + bottom: 5px; + left: 5px; +} + +/* Styles for the text inside the squares */ +.square-text-first-row { + position: absolute; + top: 5px; + left: 5px; +} + +.square-text-second-row{ + position: absolute; + top: 30px; + left: 5px; +} + +.square-text-third-row{ + position: absolute; + top: 55px; + left: 5px; +} + + +/* Styles for the inner content of the squares */ +.inner-content { + position: relative; + width: 100%; + height: 100%; +} |