yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor styles for header in mobile

Browse Source
This commit is contained in:
Kostya
2023-11-27 14:33:50 +03:00
parent 1a3312c809
commit 7d2852552b
2 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
View File

@@ -41,10 +41,6 @@
justify-content: space-between; justify-content: space-between;
} }
.header-mobile__nav {
display: flex;
}
.header-mobile__logo { .header-mobile__logo {
padding: 23px 0 11px 17px; padding: 23px 0 11px 17px;
} }
@@ -53,19 +49,43 @@
width: 170px; width: 170px;
} }
.balance-mobile__card { .header-mobile__balance--content {
align-self: start;
display: flex; display: flex;
align-items: center;
} }
.card-balance h2 { .header-mobile__card {
border-radius: 7px; border-radius: 7px;
background: #22252F; background: #22252F;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.card-display h2 {
display: flex; display: flex;
text-align: center; align-items: flex-end;
align-items: center; padding: 6px 15px 6px 5px;
font-size: 0.813em; }
.card-img img {
width: 100%;
height: 100%;
}
.card-text {
color: #FFF;
font-weight: 700;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Montserrat Alternates;
font-size: 13px;
}
.btn-card img {
width: 40px;
height: 40px;
}
.btn-card__margin {
margin-left: -10px;
} }
/* /Header */ /* /Header */

9
luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
View File

@@ -1,3 +1,4 @@
<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
<template> <template>
<div class="content-grid__mobile-home"> <div class="content-grid__mobile-home">
<header class="header-mobile"> <header class="header-mobile">
@@ -5,13 +6,17 @@
<div class="header-mobile__logo"> <div class="header-mobile__logo">
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now"> <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
</div> </div>
<div class="header-mobile__nav"> <div class="header-mobile__balance">
<div class="balance-mobile__card card-balance"> <div class="header-mobile__balance--content">
<div class="header-mobile__card card-display card-text card-img">
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2> <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
</div>
<div class="header-mobile__btn--balance btn-card btn-card__margin">
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a> <a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
</div> </div>
</div> </div>
</div> </div>
</div>
</header> </header>
<main class="main-mobile"> <main class="main-mobile">
<h1>main</h1> <h1>main</h1>