Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5599 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

.navbar{align-items:center;background-color:var(--bg-color);border-bottom:solid 1px var(--border-primary);box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:1rem;height:auto;justify-content:space-between;margin-bottom:1rem;padding:1rem 5% 0;position:relative;width:100%}.rightNavContainer{display:none;align-items:center;height:100%}@media(max-width: 361px){.rightNavContainer{gap:5px}.rightNavContainer .btn{padding:0 !important}.rightNavContainer .btn .badge{font-size:.6rem}}.logo{height:65px;order:1}.logo img{height:100%}.hamburgerIcon{color:var(--font-color);font-size:1.5rem;order:3}.searchIcon{color:var(--font-color);width:25px;height:25px;border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.mailIcon{color:var(--font-color);width:25px;height:25px;font-size:1.2rem;display:flex;justify-content:center;align-items:center;margin-right:.5rem}@media(max-width: 361px){.mailIcon{margin-right:0rem}}.badge{top:0%;left:50%;font-size:.7rem;transform:translateX(-80%);background-color:var(--danger);color:#fff;border-radius:100px;position:absolute}.bellIcon{color:var(--font-color);font-size:1.2rem;display:flex;justify-content:center;align-items:center;font-weight:600;clip-path:circle(50%)}@media(max-width: 361px){.bellIcon{font-size:1rem;width:21px;height:21px}}.triangleDown{border-left:7px solid rgba(0,0,0,0);border-right:7px solid rgba(0,0,0,0);border-top:7px solid #fff;margin-left:.5rem}.triangleUp{border-left:7px solid rgba(0,0,0,0);border-right:7px solid rgba(0,0,0,0);border-bottom:7px solid #fff;margin-left:.5rem}.backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.205);z-index:900}.searchInputContainer{font-size:.9rem;min-width:65%;flex:1;order:1}.searchInputContainer form{display:flex;align-items:center;width:100%;position:relative}.searchInputContainer input{width:100%;padding:.2rem 1rem .2rem 2rem;border-radius:30px;background-color:var(--bg-color);color:var(--font-color);border:1px solid var(--border-primary)}.searchInputContainer input::placeholder{color:var(--font-color)}.searchInputContainer button{font-size:1rem;color:var(--font-color);border:none;position:absolute;left:.5rem;top:50%;transform:translateY(-50%)}.chatIcon{width:30px;height:30px;object-fit:contain;margin-right:.2rem;position:relative}.chatIcon_active::before{content:"";width:10px;height:10px;border-radius:50%;background-color:red;position:absolute;top:-1px;right:1px}@media(min-width: 1000px){.chatIcon{display:none}}@media(min-width: 768px){.logo{max-width:317px}.searchInputContainer input{padding:.4rem 1rem .4rem 2rem}.bellIcon{background-color:initial;color:var(--font-color)}}@media(min-width: 1200px){.searchInputContainer{order:3;min-width:auto;flex:inherit}.hamburgerIcon{display:none}.navbar{padding:0 5%;flex-wrap:nowrap}}.searchBox{padding:2rem;background-color:var(--bg-color);position:relative;z-index:999}.searchBox form{display:flex;align-items:center}.searchBox input{width:100%;padding:.5rem 1rem;border:none;border-radius:30px 0 0 30px;height:40px}.searchBox button{font-size:1.5rem;height:40px;background-color:var(--bg-color);border-radius:0 30px 30px 0;padding-right:.5rem}.backdrop{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.205);z-index:900}.fadeIn{transform-origin:top;animation:fadeIn .3s}.fadeOut{transform-origin:top;animation:fadeOut .3s}@keyframes fadeIn{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}@keyframes fadeOut{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}.userImgContainer{align-items:center;cursor:pointer;display:none;gap:.5rem;position:relative;order:2}.userImgContainer h3{font-weight:bold}.userImgContainer img{width:65px;height:65px;border-radius:50%;object-fit:contain}.userImgContainer>svg{font-size:2rem}@media(min-width: 1200px){.userImgContainer{display:flex;order:4}}.userDropdown{background-color:var(--bg-color);box-shadow:var(--light-shadow);border:1px solid var(--border-primary);padding:1rem;position:absolute;right:0;top:calc(100% + .5rem);transition:transform 200ms;z-index:200}.userDropdown ul{display:flex;flex-direction:column;gap:.5rem}.userDropdown ul a{color:var(--font-color)}.userDropdown ul a:hover{text-shadow:0 0 0 var(--font-color)}.userDropdown ul li:is(:last-child) a{font-weight:600}.userDropdown ul li:is(:last-child) a:hover{text-shadow:0 0 0 var(--danger)}.fadeIn{transform:scaleY(1)}.fadeOut{transform:scaleY(0)}.navLinksContainer{flex:1 0 50%;order:3;display:flex}.navLinksContainer>ul{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.navLinksContainer>ul>li{position:relative;display:flex;flex-direction:column;padding-bottom:1rem;gap:.5rem}.navLinksContainer>ul>li svg,.navLinksContainer>ul>li i{color:var(--font-color);font-size:1.5rem}.navLinksContainer>ul>li a{font-size:1.1rem;display:flex;color:var(--font-color);flex-direction:column;align-items:center;gap:.5rem;position:relative}.navLinksContainer>ul>li p{color:var(--font-color);font-size:1.1rem;display:none}.navLinksContainer>ul>li::after{content:"";height:2px;width:0;background-color:var(--font-color);position:absolute;bottom:0;left:50%;transform:translateX(-50%);transform-origin:center;transition:all 200ms}.navLinksContainer>ul>li:hover>a,.navLinksContainer>ul>li:hover>p{text-shadow:0 0 0 var(--font-color)}.navLinksContainer>ul>li:hover::after{width:100%}.navLinksContainer>ul>li:hover .navLinkDropdown{display:block}.navLinksContainer>ul>li:last-child:hover .aditional_links{display:block}.navLinkDropdown,.navigation-level_three,.aditional_links{background-color:var(--bg-color);border-radius:var(--border-radius);box-shadow:var(--shadow);display:none;padding:1rem;position:absolute;left:50%;top:100%;z-index:900}.navLinkDropdown ul,.navigation-level_three ul,.aditional_links ul{display:flex;flex-direction:column;gap:1rem}.navLinkDropdown ul li,.navigation-level_three ul li,.aditional_links ul li{display:flex;gap:1rem;position:relative}.navLinkDropdown ul li a:hover,.navigation-level_three ul li a:hover,.aditional_links ul li a:hover{text-shadow:0 0 0 var(--font-color)}.navigation-level_three{top:-10%;left:100%;max-height:20rem;overflow:auto}.navigation-level_three a{max-width:30ch}.navLinkDropdown{transform:translateX(-35%)}.navLinkDropdown li:hover .navigation-level_three{display:block}.aditional_links{transform:translateX(-50%)}.aditional_links ul{align-items:center}@media(min-width: 768px){.navLinksContainer>ul>li p{display:inline-flex}.navLinksContainer>ul>li:hover .navLinkDropdown{transform:translateX(-50%)}}@media(min-width: 1200px){.navLinksContainer{margin-left:2rem;flex:1;order:2}.navLinksContainer>ul>li{padding-top:1rem}.aditional_links ul li:hover .navigation-level_three{display:block}}.responsiveNavbar{display:flex;flex-direction:column;gap:1rem;position:fixed;top:0;width:70vw;height:100vh;background:var(--bg-color);overflow-y:scroll;z-index:1000}.responsiveNavbar ul{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.responsiveNavbar ul a{color:var(--font-color);font-size:1rem}.responsiveNavbar ul a:hover{font-weight:bold}.backContainer{width:100%;padding:1rem;border-bottom:1px solid var(--white);text-align:left;margin-bottom:1rem;transition:all .3s ease}.backContainer a{color:var(--white);font-size:1.3rem}.backContainer a i{margin-right:1rem}.slideIn{transform:translateX(0)}.slideOut{transform:translateX(-100%)}