refactor steps styles

This commit is contained in:
counterweight 2025-02-27 12:51:32 +01:00
parent 0c038cb03f
commit aebfad80d5
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
2 changed files with 27 additions and 26 deletions

View file

@ -19,7 +19,7 @@
width: 50%; width: 50%;
} }
#create-offer-controls > * { .create-offer-step {
width: 100%; width: 100%;
} }
@ -51,7 +51,7 @@
width: 33%; width: 33%;
} }
#create-offer-controls > * { .create-offer-step {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 70%; width: 70%;
@ -67,10 +67,12 @@
} }
} }
#create-offer-controls > * { #create-offer-controls {
text-align: center;
}
.create-offer-step {
text-align: center; text-align: center;
} }
#close-offer-controls-area { #close-offer-controls-area {
display: flex; display: flex;
justify-content: end; justify-content: end;
@ -108,6 +110,9 @@
.premium-button { .premium-button {
background: white; background: white;
border: 2px solid #e1c300; border: 2px solid #e1c300;
width: 100%;
height: 50%;
font-size: 1em;
} }
.premium-button:hover { .premium-button:hover {
@ -122,12 +127,6 @@
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
} }
.premium-button {
width: 100%;
height: 50%;
font-size: 1em;
}
#premium-price-display-area { #premium-price-display-area {
margin-left: 0; margin-left: 0;
margin-right: auto; margin-right: auto;

View file

@ -29,6 +29,7 @@
/> />
</div> </div>
<h2>Añade los detalles de tu oferta</h2> <h2>Añade los detalles de tu oferta</h2>
<div id="buy-or-sell-area" class="create-offer-step">
<div id="button-group-buy-or-sell" class="button-group"> <div id="button-group-buy-or-sell" class="button-group">
<button <button
data-value="buy-bitcoin" data-value="buy-bitcoin"
@ -40,7 +41,8 @@
Quiero vender Bitcoin Quiero vender Bitcoin
</button> </button>
</div> </div>
<div id="premium-area"> </div>
<div id="premium-area" class="create-offer-step">
<h3>Premium</h3> <h3>Premium</h3>
<div id="premium-content-area"> <div id="premium-content-area">
<div id="premium-selector-area"> <div id="premium-selector-area">
@ -63,7 +65,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="amount-area"> <div id="amount-area" class="create-offer-step">
<h3>¿Cuánto?</h3> <h3>¿Cuánto?</h3>
<div id="amount-area-content"> <div id="amount-area-content">
<div id="eur-amount" class="money-amount-input-area"> <div id="eur-amount" class="money-amount-input-area">
@ -91,7 +93,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="place-and-time-area"> <div id="place-and-time-area" class="create-offer-step">
<h3>¿Dónde y cuándo?</h3> <h3>¿Dónde y cuándo?</h3>
<div id="place-and-time-boxes"> <div id="place-and-time-boxes">
<textarea <textarea
@ -110,7 +112,7 @@
></textarea> ></textarea>
</div> </div>
</div> </div>
<div id="bitcoin-methods-area"> <div id="bitcoin-methods-area" class="create-offer-step">
<h3>¿Cómo se mueve el Bitcoin?</h3> <h3>¿Cómo se mueve el Bitcoin?</h3>
<div id="onchain-checkbox-area" class="checkbox-row"> <div id="onchain-checkbox-area" class="checkbox-row">
<input <input
@ -129,7 +131,7 @@
/><label for="lightning">Lightning</label> /><label for="lightning">Lightning</label>
</div> </div>
</div> </div>
<div id="trust-area"> <div id="trust-area" class="create-offer-step">
<h3>¿Quién puede ver la oferta?</h3> <h3>¿Quién puede ver la oferta?</h3>
<div id="my-trusted-area" class="checkbox-row"> <div id="my-trusted-area" class="checkbox-row">
<input <input
@ -158,7 +160,7 @@
/><label for="all-members">Todos los miembros</label> /><label for="all-members">Todos los miembros</label>
</div> </div>
</div> </div>
<div id="other-area"> <div id="other-area" class="create-offer-step">
<h3>Extras</h3> <h3>Extras</h3>
<div id="large-bills-area" class="checkbox-row"> <div id="large-bills-area" class="checkbox-row">
<input <input