added new style from website
This commit is contained in:
123
src/app/app.css
123
src/app/app.css
@@ -6,60 +6,83 @@
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
height: 64px;
|
||||
padding-right: 24px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 15px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nz-content {
|
||||
padding: 24px 50px;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
nz-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #001529;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- LOGO + TITRE --- */
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
flex: 1;
|
||||
margin-left: 40px;
|
||||
.logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
margin: 0 0 0 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* --- MENU PRINCIPAL --- */
|
||||
.top-nav {
|
||||
flex: 1;
|
||||
margin: 0 40px;
|
||||
line-height: 64px;
|
||||
background: #001529;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Couleur grise par défaut + effet blanc et zoom au survol */
|
||||
.top-nav li {
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.top-nav li a {
|
||||
color: #bfbfbf !important; /* gris clair par défaut */
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Au survol → zoom + blanc pur */
|
||||
.top-nav li:hover {
|
||||
transform: scale(1.08);
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.top-nav li:hover a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
|
||||
.top-nav li.ant-menu-item-active,
|
||||
.top-nav li.ant-menu-item-selected {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* --- ICONES DROITES --- */
|
||||
.right-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -69,6 +92,22 @@ nz-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-icons nz-icon:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
.right-icons app-modal-nav {
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.right-icons app-modal-nav:hover {
|
||||
color: #40a9ff; /* survol bleu clair uniquement pour les icônes */
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* --- CONTENU --- */
|
||||
nz-content {
|
||||
padding: 24px 50px;
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
140
src/app/app.html
140
src/app/app.html
@@ -1,73 +1,81 @@
|
||||
<nz-layout class="app-layout">
|
||||
<nz-header>
|
||||
<div class="logo">
|
||||
<a routerLink="/welcome">
|
||||
<img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
|
||||
<h1>PYRO FÊTES</h1>
|
||||
</a>
|
||||
<div class="header-container">
|
||||
<!-- LOGO -->
|
||||
<div class="logo">
|
||||
<a routerLink="/welcome">
|
||||
<img
|
||||
src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
|
||||
alt="logo"
|
||||
style="width: 100px; height: auto"
|
||||
/>
|
||||
<h1>PYRO FÊTES</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- MENU PRINCIPAL -->
|
||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/stock">
|
||||
<nz-icon nzType="stock"></nz-icon>
|
||||
<span>Stock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/supplier">
|
||||
<nz-icon nzType="shop"></nz-icon>
|
||||
<span>Fournisseurs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/deliverer">
|
||||
<nz-icon nzType="car"></nz-icon>
|
||||
<span>Livreurs</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/quotation">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Devis</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/purchase-order">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de commande</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/delivery-note">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de livraison</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/user">
|
||||
<nz-icon nzType="user"></nz-icon>
|
||||
<span>Utilisateur</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- ICONES À DROITE -->
|
||||
<div class="right-icons">
|
||||
<app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
|
||||
<app-modal-nav nameIcon="user" name="Profil"></app-modal-nav>
|
||||
<app-modal-nav nameIcon="setting" name="Paramètres"></app-modal-nav>
|
||||
</div>
|
||||
</div>
|
||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/stock">
|
||||
<nz-icon nzType="stock"></nz-icon>
|
||||
<span>Stock</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/supplier">
|
||||
<nz-icon nzType="shop"></nz-icon>
|
||||
<span>Fournisseurs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/deliverer">
|
||||
<nz-icon nzType="car"></nz-icon>
|
||||
<span>Livreurs</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
||||
<ul>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/quotation">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Devis</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/purchase-order">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de commande</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/delivery-note">
|
||||
<nz-icon nzType="file"></nz-icon>
|
||||
<span>Bon de livraison</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||
<a routerLink="/user">
|
||||
<nz-icon nzType="user"></nz-icon>
|
||||
<span>Utilisateur</span>
|
||||
</a>
|
||||
</li>
|
||||
<li nz-menu-item>
|
||||
<app-modalNav nameIcon="bell" name="Notification"></app-modalNav>
|
||||
</li>
|
||||
<li nz-menu-item>
|
||||
<app-modalNav nameIcon="user" name="Profil"></app-modalNav>
|
||||
</li>
|
||||
<li nz-menu-item>
|
||||
<app-modalNav nameIcon="setting" name="Paramètres"></app-modalNav>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-header>
|
||||
|
||||
<nz-content>
|
||||
<div class="inner-content">
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
Reference in New Issue
Block a user