diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue index cc4cba1..5e1ae49 100644 --- a/src/dashboard/example/components/ScoreboardPanel.vue +++ b/src/dashboard/example/components/ScoreboardPanel.vue @@ -647,55 +647,102 @@ watch( class="scoreboard-preview" >
-
- -
- Left image +
+
+ +
+ Left image +
+
+
+ + + + + + + + +
-
-
- - -
@@ -744,55 +791,102 @@ watch(
-
- -
- Right image +
+
+ + + + + + + + + +
+
+ +
+ Right image +
-
-
- - -
@@ -1123,14 +1217,22 @@ watch( .scoreboard-preview__side { display: flex; - flex-direction: column; - gap: 8px; - align-items: flex-start; + align-items: center; +} + +.scoreboard-preview__side-inner { + width: 100%; + display: flex; + align-items: center; + gap: 10px; } .scoreboard-preview__side--right { text-align: right; - align-items: flex-end; +} + +.scoreboard-preview__side--right .scoreboard-preview__side-inner { + justify-content: flex-end; } .scoreboard-preview__image-wrap { @@ -1161,15 +1263,8 @@ watch( font-weight: 600; } -.scoreboard-preview__name { - font-size: 1.1rem; - font-weight: 700; - line-height: 1.2; -} - - .scoreboard-preview__controls { - width: min(100%, 320px); + width: min(100%, 260px); display: flex; flex-direction: column; gap: 6px; @@ -1268,9 +1363,17 @@ watch( width: min(100%, 280px); } + .scoreboard-preview__side-inner { + flex-direction: column; + align-items: flex-start; + } + .scoreboard-preview__side--right { text-align: left; - align-items: flex-start; + } + + .scoreboard-preview__side--right .scoreboard-preview__side-inner { + justify-content: flex-start; } }