sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-07-13 23:42:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: buyModal, sellModal, buyQuestModal, questRewards

Browse source
This commit is contained in:
CuriousMagpie 2023-03-28 15:07:49 -04:00
parent 7e9506391f
commit c1a0f8a8d1
4 changed files with 267 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
website/client/src/components/shops/buyModal.vue
View file

@ -256,7 +256,7 @@
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
display: block;
margin: 24px 0 0;
margin: 0;
padding: 16px 24px;
align-content: center;
@ -332,6 +332,12 @@
transform: scale(1.45, 1.45);
top: -25.67px;
left: 1px;
&.shop_gem {
transform: scale(1.45, 1.45);
top: -2px;
left: 0px;
}
}
.title {
@ -347,7 +353,7 @@
padding-left: 48.5px;
padding-right: 48.5px;
line-height: 1.71;
font-size: 0.875;
font-size: 0.875rem;
}
.content {
@ -443,12 +449,19 @@
}
.attributes-group {
margin: 24px;
margin: 32px;
border-radius: 4px;
line-height: 1.71;
font-size: 0.875;
}
.attributesGrid {
margin-top: 28px;
border-radius: 2px;
background-color: $gray-500;
// margin: 10px 0 24px;
}
.cost {
height: 40px;
font-size: 1.25rem;
@ -484,7 +497,7 @@
.total {
font-weight: bold;
font-size: 0.875rem;
margin-top:16px;
margin-top: 16px;
&.gems {
color: $green-10;
@ -528,66 +541,59 @@
&:focus {
border: 2px solid black;
}
.notEnough {
pointer-events: none;
opacity: 0.55;
}
.attributesGrid {
margin-top: 8px;
border-radius: 2px;
background-color: $gray-500;
margin: 10px 0 24px;
}
.notEnough {
pointer-events: none;
opacity: 0.55;
}
.gems-left {
margin-top: .5em;
}
.free-rebirth {
background-color: $yellow-5;
color: $white;
height: 2rem;
line-height: 16px;
margin: auto -1rem -1rem;
}
// .pt-015 {
// padding-top: 0.15rem;
// }
.gems-left {
margin-top: .5em;
height: 32px;
background-color: $green-100;
font-size: 0.75rem;
margin-top: 24px;
color: $green-1;
width: 100%;
}
.free-rebirth {
background-color: $yellow-5;
.out-of-gems-banner {
height: 32px;
font-size: 0.75rem;
margin-top: 24px;
background-color: $yellow-100;
color: $yellow-1;
width: 100%;
}
.limitedTime {
height: 32px;
width: 446px;
font-size: 0.75rem;
margin: 24px 0 0 0;
background-color: $purple-300;
color: $white;
height: 2rem;
line-height: 16px;
margin: auto -1rem -1rem;
}
// .pt-015 {
// padding-top: 0.15rem;
// }
}
.gems-left {
height: 32px;
background-color: $green-100;
font-size: 0.75rem;
margin-top: 24px;
margin-bottom: -40px;
color: $green-1;
width: 100%;
}
.out-of-gems-banner {
height: 32px;
font-size: 0.75rem;
margin-top: 24px;
margin-bottom: -40px;
background-color: $yellow-100;
color: $yellow-1;
width: 100%;
}
.limitedTime {
height: 32px;
width: 446px;
font-size: 0.75rem;
margin: 24px 0 -40px 0;
background-color: $purple-300;
color: $white;
}
}
</style>
<style lang="scss" scoped>

174
website/client/src/components/shops/market/sellModal.vue
View file

@ -71,7 +71,7 @@
aria-hidden="true"
v-html="icons.gold"
></span>
<span class="total gold">
<span class="total-text gold">
{{ item.value * selectedAmountToSell }}
</span>
</div>
@ -89,9 +89,9 @@
slot="modal-footer"
class="clearfix"
>
<span class="balance float-left">{{ $t('yourBalance') }}</span>
<span class="user-balance float-left">{{ $t('yourBalance') }}</span>
<balanceInfo
class="float-right"
class="float-right currency-totals"
/>
</div>
</b-modal>
@ -112,14 +112,42 @@
width: 448px;
}
.content {
text-align: center;
.modal-body {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
.title {
color: $gray-10;
font-size: 1.25rem;
margin-top: 28px;
.modal-footer {
height: 48px;
background-color: $gray-700;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
display: block;
margin: 24px 0 0;
padding: 16px 24px;
align-content: center;
.user-balance {
width: 150px;
height: 16px;
font-size: 0.75rem;
font-weight: bold;
line-height: 1.33;
color: $gray-100;
margin-bottom: 16px;
margin-top: -4px;
margin-left: -4px;
}
.currency-totals {
margin-right: -8px;
float: right;
}
}
.content {
text-align: center;
}
.inner-content {
@ -160,12 +188,22 @@
.item-content {
transform: scale(1.45, 1.45);
top: -16px;
top: -25px;
left: 1px;
}
.title {
color: $gray-10;
font-size: 1.25rem;
margin-top: 26px;
margin-bottom: 0px;
}
.item-notes {
line-height: 1.71;
margin-bottom: 16px;
height: 48px;
margin-top: 12px;
line-height: 1.71;
font-size: 0.875rem;
}
span.svg-icon.inline.icon-32 {
@ -208,82 +246,80 @@
.item-cost {
padding-bottom: 16px;
padding-top: 8px;
margin-top: 12px;
}
.cost {
height: 40px;
font-size: 1.25rem;
font-weight: bold;
line-height: 1.4;
vertical-align: middle;
&.gold {
color: $gold-color;
border-radius: 20px;
padding: 8px 20px 8px 20px;
margin-top: 16px;
margin-bottom: 16px;
background-color: rgba(255, 190, 93, 0.15);
}
}
.total-row {
padding-top: 4px;
padding-bottom: 4px;
}
.total {
font-size: 0.875rem;
line-height: 1.71;
font-weight: bold;
padding: 8px 20px 8px 20px;
&.gold {
color: $yellow-5;
margin-left: -4px;
background-color: rgba(255, 190, 93, 0.15);
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
}
}
}
.how-many-to-sell {
margin-top: 12px;
display: block;
font-size: 0.875rem;
font-weight: bold !important;
}
.number-increment {
margin-top: 14px;
}
.total-row {
font-weight: bold;
font-size: 0.875rem;
margin-top: 16px;
&.gold {
color: $yellow-5;
}
}
.total-text {
color: $gray-50;
font-size: 0.825rem;
font-weight: bold;
line-height: 1.71;
height: 24px;
width: 37px;
padding-right: 4px;
// margin-left: -4px;
}
button.btn.btn-primary {
margin-top: 16px;
margin-bottom: 0px;
}
.balance {
width: 74px;
height: 16px;
font-size: 12px;
font-weight: bold;
line-height: 1.33;
color: $gray-200;
}
.modal-footer {
height: 48px;
background-color: $gray-700;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
display: block;
}
.how-many-to-sell {
margin-bottom: 16px;
margin-top: 8px;
display: block;
font-size: 0.875rem;
font-weight: bold;
height: 24px;
line-height: 1.71;
padding-right: 4px;
&.gold {
color: $yellow-5;
}
}
button.btn.btn-primary {
margin-top: 14px;
padding: 4px 16px;
height: 32px;
&:focus {
border: 2px solid black;
}
.balance {
width: 74px;
height: 16px;
font-size: 12px;
font-weight: bold;
line-height: 1.33;
color: $gray-200;
}
}
</style>
<script>

158
website/client/src/components/shops/quests/buyQuestModal.vue
View file

@ -63,7 +63,7 @@
@updateQuantity="selectedAmountToBuy = $event"
/>
</div>
<div>
<div class="total-row">
<span class="total-text">
{{ $t('sendTotal') }}
</span>
@ -129,6 +129,40 @@
margin-top: 1rem;
}
.modal-body {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
.modal-footer {
height: 48px;
background-color: $gray-700;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
display: block;
margin-top: 24px;
padding: 16px 24px;
align-content: center;
.user-balance {
width: 150px;
height: 16px;
font-size: 0.75rem;
font-weight: bold;
line-height: 1.33;
color: $gray-100;
margin-bottom: 16px;
margin-top: -4px;
margin-left: -4px;
}
.currency-totals {
margin-right: -8px;
float: right;
}
}
.modal-dialog {
margin-top: 8%;
width: 448px !important;
@ -146,8 +180,13 @@
margin: 33px auto auto;
}
.modal-body {
padding-bottom: 0px;
.item-notes {
height: 48px;
margin-top: 8px;
padding-left: 48.5px;
padding-right: 48.5px;
line-height: 1.71;
font-size: 0.875rem;
}
.questInfo {
@ -170,8 +209,13 @@
}
button.btn.btn-primary {
margin-top: 24px;
margin-bottom: 24px;
margin-top: 14px;
padding: 4px 16px;
height: 32px;
&:focus {
border: 2px solid black;
}
}
.balance {
@ -183,19 +227,6 @@
color: $gray-200;
}
.modal-footer {
height: 48px;
background-color: $gray-700;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
display: block;
padding: 1rem 1.5rem;
&> * {
margin: 0;
}
}
.notEnough {
pointer-events: none;
opacity: 0.55;
@ -216,62 +247,76 @@
height: 40px;
font-size: 1.25rem;
font-weight: bold;
line-height: 1.4;
vertical-align: middle;
padding: 8px 20px 8px 20px;
&.gems {
color: $gems-color;
border-radius: 20px;
padding: 8px 20px 8px 20px;
margin-top: 16px;
margin-bottom: 16px;
color: $green-10;
background-color: rgba(36, 204, 143, 0.15);
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
}
&.gold {
color: $gold-color;
border-radius: 20px;
padding: 8px 20px 8px 20px;
margin-top: 16px;
margin-bottom: 16px;
color: $yellow-5;
background-color: rgba(255, 190, 93, 0.15);
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
}
&.hourglasses {
color: $hourglass-color;
border-radius: 20px;
padding: 8px 20px 8px 20px;
margin-top: 16px;
margin-bottom: 16px;
background-color: rgba(41, 149, 205, 0.15);
}
}
line-height: 1.4;
margin: 0 0 0 -4px;
border-radius: 20px;
}
}
.total {
font-size: 0.825rem;
line-height: 1.71;
font-weight: bold;
.total-row {
font-weight: bold;
font-size: 0.875rem;
margin-top: 16px;
}
&.gold {
color: $gold-color;
}
.total {
font-weight: bold;
font-size: 0.875rem;
margin-top: 16px;
&.gems {
color: $gems-color;
}
& .hourglasses {
color: $hourglass-color;
}
&.gems {
color: $green-10;
}
.total-text {
font-size: 0.825rem;
line-height: 1.71;
font-weight: bold;
height: 24px;
width: 37px;
padding-right: 4px;
&.gold {
color: $yellow-5;
}
&.hourglasses {
color: $hourglass-color;
}
}
.total-text {
color: $gray-50;
font-weight: bold;
font-size: 0.875rem;
height: 24px;
line-height: 1.71;
padding-right: 4px;
&.gems {
color: $green-10;
}
&.gold {
color: $yellow-5;
}
&.hourglasses {
color: $hourglass-color;
}
}
@ -308,6 +353,7 @@
}
}
}
}
</style>
<!-- <style lang="scss" scoped>

3
website/client/src/components/shops/quests/questRewards.vue
View file

@ -177,9 +177,6 @@ export default {
@import '~@/assets/scss/colors.scss';
.quest-rewards {
margin-left: -1rem;
margin-right: -1rem;
background-color: $gray-700;
}