diff --git a/web/static/css/main.css b/web/static/css/main.css index 9d558ef..77ca8f5 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -46,47 +46,55 @@ a { } .dropdown-container { - display: flex; - flex-direction: column; position: relative; + display: inline-block; + padding: 10px; + border-radius: 10px 10px 0 0; cursor: pointer; - border-radius: 10px; - transition: all .1s ease-in-out; } .dropdown-container:hover { background-color: rgba(142, 142, 142, 20%); } -.dropdown-container:hover ul { - opacity: 1; -} - -.dropdown-container ul { - list-style: none; - position: absolute; - padding: .5rem; - border-radius: 10px; - top: 68px; - width: 100%; - opacity: 0; +.dropdown-container:hover .dropdown-item { + display: block; background-color: rgba(142, 142, 142, 20%); - transition: all .1s ease-in-out; } -.dropdown-container li { +.dropdown-content { display: flex; - padding: .5rem .8rem; - justify-content: center; align-items: center; - justify-content: space-between; - font-size: 14px; - border-radius: 4px; - transition: all .2s ease-in-out; - color: #FF0000; } -.dropdown-container li:hover { +.dropdown-content img { + height: 40px; + border-radius: 50%; + margin-right: .6rem; +} + +.dropdown-item { + display: none; + position: absolute; + left: 0; + margin-top: 10px; + padding: 10px; + border-radius: 0 0 10px 10px; + width: 100%; + font-size: 15px; +} + +.dropdown-item a { + display: block; + padding: .5rem 1rem; + border-radius: 8px; +} + +.dropdown-item i { + margin-right: .6rem; +} + +.dropdown-item a:hover { background-color: rgba(142, 142, 142, 30%); } @@ -217,19 +225,6 @@ a { margin-right: .5rem; } -.header .right .account { - display: flex; - align-items: center; - border-radius: 12px; - padding: 10px; -} - -.header .right .account img { - border-radius: 2rem; - height: 40; - margin-right: .6rem; -} - .main { display: flex; flex-grow: 1; @@ -515,6 +510,7 @@ a { .users-bar { position: absolute; right: 0; + padding: 1.5rem 0; background-color: rgb(37, 37, 37); width: 0px; height: 100%;