mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 03:32:06 +00:00
Merge pull request #64 from Pandipipas/remove-commentary-boxes-and-update-style
Unifica estilo subrayado en BracketPanel y CommentaryPanel y ajusta botón swap
This commit is contained in:
@@ -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
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user