diff --git a/src/pages/Admin.js b/src/pages/Admin.js index 8bb62c7..fc4aecf 100644 --- a/src/pages/Admin.js +++ b/src/pages/Admin.js @@ -8,13 +8,13 @@ const Admin = () => {
Admin diff --git a/src/styles/components/_admin.scss b/src/styles/components/_admin.scss index 056ff8a..c357bf5 100644 --- a/src/styles/components/_admin.scss +++ b/src/styles/components/_admin.scss @@ -1,26 +1,36 @@ .page_admin { display: flex; flex-direction: row; + flex-basis: 100%; + height: 100vh; + position:fixed; .nav_bar_verticale { display: flex; flex-direction: column; width: 200px; - height: 753px; - border: 5px white inset; + height: 735px; + background: rgba(255, 255, 255, 0.143); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(1.5px); + border-radius: 15px; + border: 1px solid rgba(255, 255, 255, 0.18); + margin: 10px; + .create_user { - padding: 30px; + padding: 5px; align-self: center; } .modify_user { - padding: 30px; + padding: 5px; align-self: center; } .delete_user { - padding: 30px; + padding: 5px; align-self: center; } @@ -32,39 +42,29 @@ position: relative; width: 180px; height: 100px; - border-radius: 30px; + border-radius: 10px; font-size: 13.5px; font-weight: bold; transition: 1s box-shadow; cursor: pointer; border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - background-color: white; - } - - - .bouton:hover { - box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1); - color: white; - background-color: black; - } + background-color: rgba(163, 163, 163, 0.371); + border: 1px solid rgba(255,255,255,0.1); + backdrop-filter: blur(30px); + color: rgb(255, 255, 255); + cursor: pointer; + font-size: 17px; - .bouton:hover::before, - .bouton:hover::after { - content: ''; - display: block; - position: absolute; - z-index: -1; - width: 100%; - height: 100%; - background: black; - border-radius: 30px; - animation: 0.5s jiggle infinite; - } + &:hover{ + box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1); + color: white; + background-color: rgba(114, 114, 114, 0.371); + } - .bouton:hover::after { - background: black; - animation: 1s jiggle infinite; + &:active{ + background-color:rgba(68, 68, 68, 0.972); + } } } @@ -90,12 +90,6 @@ align-items: center; } - .form{ - align-self: center; - flex-direction: row; - font-weight: bold; - font-size: 80px; - .texte { align-self: center; font-weight: bold;