Unifica estilo de campos en panel Bracket

This commit is contained in:
Pandipipas
2026-02-14 17:22:24 +01:00
parent 579f07f5c3
commit aaf6ee053b
2 changed files with 66 additions and 45 deletions
@@ -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"
class="bracket-panel-custom-input bracket-panel__field"
/>
<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>
@@ -12,57 +12,31 @@ const commentaryStore = useCommentaryStore();
</div>
<QSpace />
<QBtn
color="secondary"
outline
flat
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
/>
</QCardSection>
</QCard>
<QInput
v-model="commentaryStore.leftCommentator"
label="Commentator"
dense
class="commentary-panel__field"
/>
</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
/>
</QCardSection>
</QCard>
<QInput
v-model="commentaryStore.rightCommentator"
label="Commentator"
dense
class="commentary-panel__field"
/>
</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>