Merge pull request #64 from Pandipipas/remove-commentary-boxes-and-update-style

Unifica estilo subrayado en BracketPanel y CommentaryPanel y ajusta botón swap

src/dashboard/scoreko-dev/components/BracketPanel.vue

@@ -119,24 +119,23 @@ onMounted(() => {
           label="Stage"
           :options="stageOptions"
           dense
-          outlined
+          class="bracket-panel__field"
         />
         <QSelect
           v-model="bracketSide"
           label="Bracket side"
           :options="bracketSideOptions"
           dense
-          outlined
           emit-value
           map-options
+          class="bracket-panel__field"
         />
         <div class="bracket-panel-custom">
           <QInput
             v-model="customText"
             label="Custom progress"
             dense
-            outlined
+            class="bracket-panel-custom-input bracket-panel__field"
-            class="bracket-panel-custom-input"
           />
           <QToggle
             v-model="customActive"
@@ -178,4 +177,23 @@ onMounted(() => {
   align-self: center;
   margin-top: 0;
 }
+
+.bracket-panel__field :deep(.q-field__control) {
+  min-height: 28px;
+  padding: 0;
+  background: transparent !important;
+  border-radius: 0;
+}
+
+.bracket-panel__field :deep(.q-field__control:before),
+.bracket-panel__field :deep(.q-field__control:after) {
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
+}
+
+.bracket-panel__field :deep(.q-field__native),
+.bracket-panel__field :deep(.q-field__input),
+.bracket-panel__field :deep(.q-field__label) {
+  color: rgba(255, 255, 255, 0.92);
+}
 </style>

src/dashboard/scoreko-dev/components/CommentaryPanel.vue

@@ -12,57 +12,31 @@ const commentaryStore = useCommentaryStore();
       </div>
       <QSpace />
       <QBtn
-        color="secondary"
+        flat
-        outline
+        dense
         icon="swap_horiz"
-        label="Intercambiar lados"
+        class="commentary-panel__action-btn"
         @click="commentaryStore.swapCommentators"
       />
     </div>
 
     <div class="row q-col-gutter-lg">
       <div class="col-12 col-md-6">
-        <QCard
-          flat
-          bordered
-        >
-          <QCardSection>
-            <div class="text-subtitle1 text-weight-bold">
-              Left side
-            </div>
-          </QCardSection>
-          <QSeparator />
-          <QCardSection>
         <QInput
           v-model="commentaryStore.leftCommentator"
           label="Commentator"
           dense
-              outlined
+          class="commentary-panel__field"
         />
-          </QCardSection>
-        </QCard>
       </div>
 
       <div class="col-12 col-md-6">
-        <QCard
-          flat
-          bordered
-        >
-          <QCardSection>
-            <div class="text-subtitle1 text-weight-bold">
-              Right side
-            </div>
-          </QCardSection>
-          <QSeparator />
-          <QCardSection>
         <QInput
           v-model="commentaryStore.rightCommentator"
           label="Commentator"
           dense
-              outlined
+          class="commentary-panel__field"
         />
-          </QCardSection>
-        </QCard>
       </div>
     </div>
   </div>
@@ -74,4 +48,33 @@ const commentaryStore = useCommentaryStore();
   flex-direction: column;
   gap: 16px;
 }
+
+.commentary-panel__field :deep(.q-field__control) {
+  min-height: 28px;
+  padding: 0;
+  background: transparent !important;
+  border-radius: 0;
+}
+
+.commentary-panel__field :deep(.q-field__control:before),
+.commentary-panel__field :deep(.q-field__control:after) {
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
+}
+
+.commentary-panel__field :deep(.q-field__native),
+.commentary-panel__field :deep(.q-field__input),
+.commentary-panel__field :deep(.q-field__label) {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.commentary-panel__action-btn {
+  color: #fff;
+  opacity: 0.85;
+}
+
+.commentary-panel__action-btn:hover {
+  opacity: 1;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
+}
 </style>