body::after{ content: ""; position: fixed; left: 0; right: 0; top: 0; height: 48px; background-color: hsla(217, 11%, 14%, .92); box-shadow:0 0 8px hsla(0, 0%, 0%, .8); z-index: 9998; } #header{ position: fixed; z-index: 9999; left: 0; right: 0; top: 0; max-width: 1000px; min-width: 320px; height: 48px; margin-left: auto; margin-right: auto; font-weight: 400; font-family: "Open Sans"; font-style: normal; } #header-logo{ position: absolute; left: 50%; top: 0; bottom: 0; width: 90px; margin-left: -45px; background-image: url("/img/header-logo-white.svg"); background-position: 50%; background-repeat: no-repeat; } #header-menu-expander{ position: absolute; left: 16px; top: 10px; bottom: 10px; width: 18px; cursor: pointer; } #header-menu-expander::before{ content: ""; position: absolute; left: 0; right: 0; top: 13px; bottom: 13px; background-color: white; border-radius: 2px; box-shadow: 0 -6px white, 0 6px white; transition-property: -webkit-transform, background-color, box-shadow; transition-duration: .2s; transition-timing-function: linear; opacity: .8; } #header-menu-expander:not(._activated):hover::before{ opacity: 1; } #header-menu-expander._activated::before{ background-color: hsl(0, 0%, 100%); box-shadow: 0 -7px hsl(0, 0%, 100%), 0 7px hsl(0, 0%, 100%); } #header-menu-expander._activated::after, #header-menu-expander:hover::after{ opacity: 1; } #header-menu-expander._activated::after{ color: hsl(0, 0%, 66%); } #header-menu{ text-shadow: 0 1px rgba(0, 0, 0, 0.4); position: absolute; left: 0; top: 48px; width: 100%; padding-top: 8px; background: rgba(86, 99, 113, .96) url('/images/bg.png'); clip: rect(0, 216px, 0, 0); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; transition: clip .2s linear; } #header-menu-expander._activated + #header-menu{ clip: rect(0, 216px, 800px, 0); } #header-menu a{ display: block; position: relative; padding-left: 44px; padding-right: 8px; line-height: 40px; font-size: 13px; text-decoration: none; background-color: rgba(0, 0, 0, 0); background-size: 16px; background-position: 14px; background-repeat: no-repeat; color: white; transition: background-color .2s linear; } #header-menu > a:last-of-type{ border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } #header-menu a:hover{ background-color: hsla(0, 0%, 0%, .4); } #header-menu > a[data-icon = "myPage"]{ background-image: url("/img/svg/user_white.svg"); } #header-menu > a[data-icon = "messages"]{ background-image: url("/img/svg/messages_white.svg"); } #header-menu > a[data-icon = "promo"]{ background-image: url("/img/header/prodv.png"); } #header-menu > a[data-icon = "feedback"]{ background-image: url("/img/header/obr.png"); } a[data-icon = "edit"]{ background-image: url("/img/icons/pencil.svg"); } #header-menu > a[data-icon = "home"]{ background-image: url("/img/header/home.png"); } #header-menu > a[data-icon = "news"]{ background-image: url("/img/header/news.png"); } @media (min-width:641px) { #header-menu > a[data-icon = "news"]{ display: none; } } #header-menu > a[data-icon = "appfriends"]{ background-image: url("/img/header/friends.png"); } #header-menu > a[data-icon = "statistics"]{ background-image: url("/img/header/stat.png"); } #header-menu > a[data-icon = "search"]{ background-image: url("/img/header/search.png"); } #header-menu > a[data-icon = "config"], #header-menu > a[data-icon = "settings"] { background-image: url("/img/header/config.png"); } #header-menu > a[data-icon = "globe"][data-lang="ar"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAw0lEQVR42mNgSDLGREyJJkCEVYqBIckIxoEypHJd2+dO6lowFcjArwGEwjoLIjtTJLJMpXMsgAwgF1MDjJVorF0WFNudad4cbdeR6tGX69CRBOQCBbHZkAhERp5N6a6NYbGzazMXt+cu7apcOwXIBQpidRKQNNIpDkyckLv0+JasxR3ZizuAjIT+XKAgTj8wJhpXzemO6EktXtoAREAGkAsUxOdp9hSLBVtWT18+H4iADCAXt6dhiDXJlCvNEoiADExZAFAXdxsO32/zAAAAAElFTkSuQmCC'); } #header-menu > a[data-icon = "globe"][data-lang="de"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAWElEQVR42s2N3Q3AIAiEb/+R/JmhJGURXaCtFQhG+l7zRQ64C8D/XgaOD2jTyQIUucmtZptngBzhEfvHhV5xnQo7vcNoFWhltXLgMy2Bp/SXobUVrROh4AYU03r2hNYrgQAAAABJRU5ErkJggg=='); } #header-menu > a[data-icon = "globe"][data-lang="en"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAMAAAAM9FwAAAAAq1BMVEXDAyHpw88AKXP////pxM/CAiCpt9Low87Z3eoAKXIAL4DqgpLRr7oAKHIALoCvAhzDAyC4FTG4FzOpI0LMGTi/HkLMGjm9KEuXpL3qg5OYpb7Dx9LPz8/pw87Z3eswH2AwIGE2JGw2JW0VQowWQ42qGTorS4crS4irGTvAFjvAFzwvVJcwVJbMGDjNGTjNGjrNGzrSb3/ScIDofI3pfY6quNPDx9PDyNPY3eptrKyrAAAAg0lEQVRo3hWKRQLDMBDEdteOOczQlJm5/39Zk8PoIA10zYZ8+sZxS5pm6R12lolToLKLMvPyxRrQQT4olZ37Q83ESoPjE5QSIZLIUaKDEDyAcR5EA0NwQ+AcwUMcvw5oKVi976+FejObG4KKPcuFUcXtZ46C2TU80in5fpskH020rbo/n3UI9lJnuR8AAAAASUVORK5CYII='); } #header-menu > a[data-icon = "globe"][data-lang="es"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAhklEQVR42n1QQQqAMAzLzbf5JH2MD3GgVxVkwvyBbB9QvGrn6KgbCllJR0LbQAEtQzFarjnxTwPLA81cktjqYNg7XAbXKmogkQuQmA0GY42hEoZMTZ/ecPS+2eaZVjybhkiue094DM65qSxoRWttqls/VkrPMB83qHcaMhOZXqgkTlP/QdDcRoTAtGd3p60AAAAASUVORK5CYII='); } #header-menu > a[data-icon = "globe"][data-lang="fr"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJBAMAAADJBLEBAAAALVBMVEX///8ALoCuABrBAB7CAB8AL4AAKXLCAB7Pz88AKHIAKXMAL4HQ0NCuABmtABmyhI3hAAAAUElEQVRo3mNYlZnR09OkpMswVXQDAwN7sRNDoiCQwVIOZIQGMDAwGxcxZAsKABnOdkARIIMdKLVwK0jExYlhoiBQDYuJLcO0rBkdZ3qVHgEABw0TcW/l+2wAAAAASUVORK5CYII='); } #header-menu > a[data-icon = "globe"][data-lang="pl"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJBAMAAADJBLEBAAAAKlBMVEX////YAyXZAyXPz8/DAyHsgZLQ0NDZBCbrgZLCAiDCAyDDAyDUc4HUdIFqS8LAAAAARklEQVRo3mMwMzY2NgMChgQGMGBjMEBjMDMcbW2NAKJYho2KheqCSuqSDIsECxUV1RVFGNyVFAWFBBVVGFxmzvZ0cXFZAgDVhw4woXP7AgAAAABJRU5ErkJggg=='); } #header-menu > a[data-icon = "globe"][data-lang="pt"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAArklEQVR42mNg6GIggLpRuSA8G4xmQRmRKxle3WB4eYMhcgWS+CwwQmiYBUV1m0FK924FIaC2+i2oxqHZsPYQSPXEiXoGrsVANGGCLpC77jDMOKiGbqjq46dBql/dZPCMTOHRbeXWafWMSAZaAkRAKagl3RANMAPWHgZJAw0GGm/oBrIByAUKYvMDzJVAR0P9sAXmh1lIqBvZ0zBjgKH0Eh5Ks5A8gNCAHOTdBKIFAJvseCVsLgWWAAAAAElFTkSuQmCC'); } #header-menu > a[data-icon = "globe"][data-lang="ro"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAMAAAAM9FwAAAAAOVBMVEUAKHIAKXIAKXMALoAAL4AAL4GvAhuvAhyvAxywAxzCAiDCAyDDAyDDAyHzvgDzvwD0vwD/0wD/1AD2eHPbAAAAUklEQVR42jXMMQ7DMBADwbmTAHf5/1MD2BJTyNmOC3BLh09UfDtldjUjcFnjbh3x0svcVYQKy8hsae8u9sR2zICO/p9OpjrJMTuY7iqP3mqR+gE7/iMhO6XrCgAAAABJRU5ErkJggg=='); } #header-menu > a[data-icon = "globe"][data-lang = "ru"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAR0lEQVR42mO4RSJgAOL/RAOyNIi5L5Dw30QkAiqmg4bdDAznUdEFJBLCuADjAhVDNVzAphpNEIh2QTTsAqPdMBKOdiGJwBkAISrgEHwUjggAAAAASUVORK5CYII='); } #header-menu > a[data-icon = "globe"][data-lang = "ua"]{ background-image:url('../img/languages/ua.png'); } #header-menu > a[data-icon = "globe"][data-lang = "hu"]{ background-image:url('../img/languages/hu.png'); } #header-menu > a[data-icon = "register"]{ background-image: url("/img/header/register.png"); } #header-menu > a[data-icon = "enter"]{ background-image: url("/img/header/enter.png"); } #header-menu > a[data-icon = "globe"]::before{ content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; background-size: 8px; background-position: center; background-repeat: no-repeat; background-image: url("/img/header/arrow-down.png"); } #header-menu > a[data-icon = "globe"]._activated::before{ background-image: url("/img/header/arrow-up.png"); } #header-menu > a[data-icon = "logout"]{ margin-top: 2px; box-shadow: 0 -2px hsla(0, 100%, 100%, 0.1); background-image: url("/img/header/logout.png"); } #header-menu > .inner-nav{ overflow-y: scroll; max-height: 0; background-color: hsla(0, 0%, 0%, .2); background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, .2), hsla(0, 0%, 0%, 0) 8px), linear-gradient(to top, hsla(0, 0%, 0%, .2), hsla(0, 0%, 0%, 0) 8px); transition: max-height .2s linear; } #header-menu > a[data-icon = "globe"]._activated + .inner-nav{ max-height: none; } #header-menu > .inner-nav::-webkit-scrollbar{ width: 4px; } #header-menu > .inner-nav::-webkit-scrollbar-track-piece { background-color: hsla(0, 0%, 0%, .2); } #header-menu > .inner-nav::-webkit-scrollbar-thumb{ background-color: hsla(0, 0%, 0%, .4); } #header-menu > .inner-nav > a._selected{ font-style: italic; } #header-menu > .inner-nav > a[data-lang="ar"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAw0lEQVR42mNgSDLGREyJJkCEVYqBIckIxoEypHJd2+dO6lowFcjArwGEwjoLIjtTJLJMpXMsgAwgF1MDjJVorF0WFNudad4cbdeR6tGX69CRBOQCBbHZkAhERp5N6a6NYbGzazMXt+cu7apcOwXIBQpidRKQNNIpDkyckLv0+JasxR3ZizuAjIT+XKAgTj8wJhpXzemO6EktXtoAREAGkAsUxOdp9hSLBVtWT18+H4iADCAXt6dhiDXJlCvNEoiADExZAFAXdxsO32/zAAAAAElFTkSuQmCC'); } #header-menu > .inner-nav > a[data-lang="de"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAWElEQVR42s2N3Q3AIAiEb/+R/JmhJGURXaCtFQhG+l7zRQ64C8D/XgaOD2jTyQIUucmtZptngBzhEfvHhV5xnQo7vcNoFWhltXLgMy2Bp/SXobUVrROh4AYU03r2hNYrgQAAAABJRU5ErkJggg=='); } #header-menu > .inner-nav > a[data-lang="en"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAMAAAAM9FwAAAAAq1BMVEXDAyHpw88AKXP////pxM/CAiCpt9Low87Z3eoAKXIAL4DqgpLRr7oAKHIALoCvAhzDAyC4FTG4FzOpI0LMGTi/HkLMGjm9KEuXpL3qg5OYpb7Dx9LPz8/pw87Z3eswH2AwIGE2JGw2JW0VQowWQ42qGTorS4crS4irGTvAFjvAFzwvVJcwVJbMGDjNGTjNGjrNGzrSb3/ScIDofI3pfY6quNPDx9PDyNPY3eptrKyrAAAAg0lEQVRo3hWKRQLDMBDEdteOOczQlJm5/39Zk8PoIA10zYZ8+sZxS5pm6R12lolToLKLMvPyxRrQQT4olZ37Q83ESoPjE5QSIZLIUaKDEDyAcR5EA0NwQ+AcwUMcvw5oKVi976+FejObG4KKPcuFUcXtZ46C2TU80in5fpskH020rbo/n3UI9lJnuR8AAAAASUVORK5CYII='); } #header-menu > .inner-nav > a[data-lang="es"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAhklEQVR42n1QQQqAMAzLzbf5JH2MD3GgVxVkwvyBbB9QvGrn6KgbCllJR0LbQAEtQzFarjnxTwPLA81cktjqYNg7XAbXKmogkQuQmA0GY42hEoZMTZ/ecPS+2eaZVjybhkiue094DM65qSxoRWttqls/VkrPMB83qHcaMhOZXqgkTlP/QdDcRoTAtGd3p60AAAAASUVORK5CYII='); } #header-menu > .inner-nav > a[data-lang="fr"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJBAMAAADJBLEBAAAALVBMVEX///8ALoCuABrBAB7CAB8AL4AAKXLCAB7Pz88AKHIAKXMAL4HQ0NCuABmtABmyhI3hAAAAUElEQVRo3mNYlZnR09OkpMswVXQDAwN7sRNDoiCQwVIOZIQGMDAwGxcxZAsKABnOdkARIIMdKLVwK0jExYlhoiBQDYuJLcO0rBkdZ3qVHgEABw0TcW/l+2wAAAAASUVORK5CYII='); } #header-menu > .inner-nav > a[data-lang="pl"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJBAMAAADJBLEBAAAAKlBMVEX////YAyXZAyXPz8/DAyHsgZLQ0NDZBCbrgZLCAiDCAyDDAyDUc4HUdIFqS8LAAAAARklEQVRo3mMwMzY2NgMChgQGMGBjMEBjMDMcbW2NAKJYho2KheqCSuqSDIsECxUV1RVFGNyVFAWFBBVVGFxmzvZ0cXFZAgDVhw4woXP7AgAAAABJRU5ErkJggg=='); } #header-menu > .inner-nav > a[data-lang="pt"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAArklEQVR42mNg6GIggLpRuSA8G4xmQRmRKxle3WB4eYMhcgWS+CwwQmiYBUV1m0FK924FIaC2+i2oxqHZsPYQSPXEiXoGrsVANGGCLpC77jDMOKiGbqjq46dBql/dZPCMTOHRbeXWafWMSAZaAkRAKagl3RANMAPWHgZJAw0GGm/oBrIByAUKYvMDzJVAR0P9sAXmh1lIqBvZ0zBjgKH0Eh5Ks5A8gNCAHOTdBKIFAJvseCVsLgWWAAAAAElFTkSuQmCC'); } #header-menu > .inner-nav > a[data-lang="ro"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAMAAAAM9FwAAAAAOVBMVEUAKHIAKXIAKXMALoAAL4AAL4GvAhuvAhyvAxywAxzCAiDCAyDDAyDDAyHzvgDzvwD0vwD/0wD/1AD2eHPbAAAAUklEQVR42jXMMQ7DMBADwbmTAHf5/1MD2BJTyNmOC3BLh09UfDtldjUjcFnjbh3x0svcVYQKy8hsae8u9sR2zICO/p9OpjrJMTuY7iqP3mqR+gE7/iMhO6XrCgAAAABJRU5ErkJggg=='); } #header-menu > .inner-nav > a[data-lang="ru"]{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAIAAAC0SDtlAAAAR0lEQVR42mO4RSJgAOL/RAOyNIi5L5Dw30QkAiqmg4bdDAznUdEFJBLCuADjAhVDNVzAphpNEIh2QTTsAqPdMBKOdiGJwBkAISrgEHwUjggAAAAASUVORK5CYII='); } #header-menu > .inner-nav > a[data-lang="ua"]{ background-image:url('../img/languages/ua.png'); } #header-menu > .inner-nav > a[data-lang="hu"]{ background-image:url('../img/languages/hu.png'); } #header-menu .inner-nav .close{display:none} .wrapper{width: auto; max-width:1000px;} #privacy{padding:0 20px 20px 20px;} @media (max-width: 640px){ /* #header-menu-expander::before{ content: ""; position: absolute; left: 0; right: 0; top: 12px; bottom: 12px; background-color: white; border-radius: 2px; box-shadow: 0 -8px white, 0 8px white; transition: none; } */ #header-menu-expander._activated + #header-menu{clip: rect(0, 640px, 800px, 0);} #header-menu .hide{display:none !important; } #header-menu {font-size:12px !important; z-index:100; background: #556271 } #header-menu a{line-height:28px; font-size:12px; background-color: #556271} #header-menu a:hover{background-color: transparent !important; } #header-menu .close{display:block; position:absolute; top:-8px; right:0px; z-index:100} #header-menu > a._activated[data-icon="globe"] + .inner-nav{height:210px !important; max-height:210px; position:absolute; z-index:100; top:0; left:0; background: #556271; padding:5px 0 5px 0; overflow-y: visible !important; width:100%} #header-menu a._activated[data-icon="globe"] + .inner-nav .close{display:block; position:absolute; top:0px; right:0px; z-index:100; width:30px; height:30px; background: url('/img/lang_close.png') top left no-repeat; padding: 0; margin:0;} #header-users-expander, #header-posts-expander, #header-menu #edit-btn, #settings_menu, #header-profile-link{display:none} } @media(max-width: 500px){ #header-logo{margin-left:0; right:6px; background-position: center right; min-width: 90px; width: auto} #header-search{ display: none;} .wrapper{min-width: 320px !important;} .wrap-error{padding:0 10px 10px 20px; } .wrap-error.wrap-404 {min-height:330px; background-position: bottom right;} .wrap-error.wrap-404 h1{font-size:20px; font-weight:bold;} .wrap-error.wrap-404 .subtitle-error{font-size:14px;} .wrap-error.wrap-404 .link-error{font-size: 14px; margin-top:15px;} #header .sign-up{display:none } #header .sign-in{display:none} #header-posts {display: none!important;} } // #header-users-expander, #header-posts-expander{ position: absolute; top: 10px; bottom: 10px; width: 32px; cursor: pointer; } #header-profile-link { position: absolute; // left: 48px; font-size: 13px; color: #fff; padding: 2px 10px 0; line-height: 45px; height:48px; opacity: .5; } #header-profile-link:after { transition:none!important; } .currentLink { background-color: rgba(0,0,0,.5); opacity: 1!important; cursor: default; } #header-posts-expander.currentLink { color: rgba(255,255,255,1); } .currentLink:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: hsla(204, 70%, 53%, 1)!important; } /* #header-profile-link::after { content: ""; position: absolute; left: 0; bottom: 3px; width:100%; height: 2px; border-radius: 1px; background-color: rgba(0,0,0,0); transition: background-color .2s linear; } */ /* #header-profile-link.currentLink::after, #header-profile-link:hover::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: hsla(204, 70%, 53%, 1); } */ #namePlusEdit { position: relative; display: inline-block; width: auto; height: 48px; margin-left: 48px; float: left; padding: 0 10px; } #header-profile-link { position: relative; display: inline-block; float: left; font-size: 13px; color: rgba(255,255,255,.5); padding: 0; line-height: 48px; height: 48px; opacity: 1; } #namePlusEdit.currentLink > #header-profile-link { color: rgba(255,255,255,1); cursor: default; } #edit-btn { position: relative; display: inline-block; width: 10px; height: 10px; top: 15px; background-color: hsla(120, 88%, 37%, 1); opacity: .9; padding: 4px; border-radius: 2px; box-sizing: content-box; background-size: 60%; background-repeat: no-repeat; background-position: center; margin-left: 5px; } #settings_menu { position: absolute; display: none; top: 48px; width: 215px; height: 144px; background: rgba(86, 99, 113, .96) url('/images/bg.png'); left: 47px; } #settings_menu.active { display: block; } #settings_menu #set_menu_primary { background-image: url("/img/icons/pencil.svg"); } #settings_menu #set_menu_security { background-image: url("/img/header/config.png"); } /*#settings_menu #set_menu_primary::after { content: 'Аватар, цвета, биография, контакты'; } #settings_menu #set_menu_security::after { content: 'Пароли, телефон, секретный вопрос'; }*/ #settings_menu #set_menu_primary, #settings_menu #set_menu_security { position: relative; display: block; width: 100%; height: 72px; background-repeat: no-repeat; background-position: 13px 16px; font-size: 13px; padding: 13px 41px; color: #fff; font-weight: 400; } #settings_menu #set_menu_primary:hover, #settings_menu #set_menu_security:hover { background-color: rgba(255,255,255,0.1); } #settings_menu #set_menu_primary::after, #settings_menu #set_menu_security::after { content: attr(data-description); position: absolute; display: block; font-size: 10px; font-style: italic; color: #aaa; } #ovrlay { /* невидимый оверлэй для закрытия #settings_menu */ position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; } #header-users-expander{ left: 58px; background: url("/img/header/big-friends.png"); } #header-posts-expander{ position: relative; display: inline-block; float: left; top: 0; height: 48px; line-height: 48px; font-size: 13px; color: rgba(255,255,255,.5); padding: 0 10px; text-align: center; transition: color, 0.3s, ease-in; } #namePlusEdit.inactiveLink:hover a, #header-posts-expander.inactiveLink:hover { color: rgba(255,255,255,.8); } #namePlusEdit:not(.currentLink):after, #header-posts-expander:not(.currentLink):after, #header-messages-expander:not(.currentLink):after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0px; transition: height, 0.1s; margin: 0 auto; background-color: hsla(204, 70%, 53%, .4); } #namePlusEdit:not(.currentLink):hover:after, #header-posts-expander:not(.currentLink):hover:after, #header-messages-expander:not(.currentLink):hover:after { height: 3px; } #header-posts-expander:not([data-news-count = ""])::before, #header-users-expander:not([data-news-count = ""])::before, #header-messages-expander:not([data-news-count = ""])::before{ content: "+" attr(data-news-count); position: relative; z-index: 1; float: right; padding-left: 5px; padding-right: 5px; padding-top: .5px; font-size: 11px; font-weight: 700; background-color: rgba(255,255,255,.8); color: #1c1f23; border-radius: 2px; text-align: center; min-width: 15px; height: 18px; line-height: 16px; opacity: 1!important; margin: 15px 0 15px 5px; transition-property: background-color, color; transition-duration: 0.3s; transition-function: ease-in; } #header-posts-expander.currentLink::before, #header-users-expander.currentLink::before, #header-messages-expander.currentLink::before { content: normal; } #header-posts-expander:not([data-news-count = ""]):hover:before, #header-users-expander:not([data-news-count = ""]):hover:before, #header-messages-expander:not([data-news-count = ""]):hover:before{ background-color: rgba(255,255,255,1); } #header-posts-expander:hover:after, #header-messages-expander:hover:after{ background-color: hsla(204, 70%, 53%, .6); } #header-posts-expander:hover { color: rgba(255,255,255,1); } .header-posts{ position: absolute; top: 54px; width: 240px; padding-top: 8px; text-shadow: 0 1px rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, .7) url('/images/bg.png'); opacity: 0; pointer-events: none; transition-property: -webkit-transform, opacity; transition-duration: .2s; transition-timing-function: linear; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 11px 9px -12px #000000, 0 -2px 4px -3px #000000 inset; -webkit-box-shadow: 0 11px 9px -12px #000000, 0 -2px 4px -3px #000000 inset; box-shadow: 0 11px 9px -12px #000000, 0 -2px 4px -3px #000000 inset; } #header-messages-expander { position: relative; display: inline-block; width: auto; height: 48px; color: rgba(255,255,255,.5); font-size: 13px; line-height: 48px; padding: 0 10px; } /*#edit-btn { position: absolute; display: block; width: 10px; height: 10px; top: 15px; // left: 115px; background-color: hsla(120, 88%, 37%, 1); opacity: .9; padding: 4px; border-radius: 2px; box-sizing: content-box; background-size: 60%; background-repeat: no-repeat; background-position: center; }*/ #edit-btn:hover { opacity: 1; } @media (max-width: 820px) { #header { padding-left: 45px; } #namePlusEdit { min-width: 40px; margin-left: 0!important; background-image: url("/img/svg/user_white.svg"); background-position: 10px center; background-size: 20px; background-repeat: no-repeat; opacity: .6; } #header-profile-link { font-size: 0!important; width: 20px; } #header-messages-expander { position: relative; display: inline-block; float: left; height: 48px; color: rgba(255,255,255,.1); background-image: url('/img/svg/messages_white.svg'); background-size: 19px; background-repeat: no-repeat; background-position: 10px center; font-size: 0; width: auto; min-width: 40px; line-height: 48px; padding: 0 10px; opacity: .6; } #header-posts-expander { position: relative; display: inline-block; float: left; top: 0; height: 48px; line-height: 48px; font-size: 0; background-image: url('/img/svg/bullhorn_white.svg'); background-size: 20px; background-repeat: no-repeat; background-position: 10px center; width: auto; min-width: 40px; color: rgba(255,255,255,.5); padding: 0 10px; text-align: center; transition: none; opacity: .6; } #header-messages-expander:hover, #header-posts-expander:hover { opacity: 1; } #header-posts-expander:not([data-news-count = ""])::before, #header-users-expander:not([data-news-count = ""])::before, #header-messages-expander:not([data-news-count = ""])::before { content: "+" attr(data-news-count); position: absolute; z-index: 1; right: 0px; float: right; padding-left: 5px; padding-right: 0; padding-top: .5px; font-size: 11.5px; font-weight: 700; background-color: transparent; color: hsla(120, 88%, 37%, 1); border-radius: 2px; text-align: center; height: 18px; font-weight: bold; line-height: 16px; opacity: 1!important; margin: 2px 0 15px 10px; } #header-posts-expander:not([data-news-count = ""]):hover:before, #header-users-expander:not([data-news-count = ""]):hover:before, #header-messages-expander:not([data-news-count = ""]):hover:before { background-color: transparent; } #header-posts-expander.currentLink:before, #header-messages-expander.currentLink:before { content: normal; } #header-my_page-mob { display: none!important; } /* #header-search-form { display: none; } #header-logo {left: auto; right: 0;}*/ } @media (max-width: 640px) { #edit-btn{ display: none!important; } #header-posts-expander.nwslink {display: inline-block!important;} }*/ #header-users-expander + .header-posts{ left: 60px; } #header-posts-expander + .header-posts{ left: 150px; border-radius: 0; } .expander._activated + .header-posts{ opacity: 1; pointer-events: auto; -webkit-transform: translateY(8px); } .header-posts::before{ content: ""; position: absolute; left: 6px; top: -16px; border: 8px solid transparent; border-bottom-color: rgba(0, 0, 0, .96); } .header-posts h3{ padding-top: 4px; padding-left: 8px; padding-bottom: 9px; line-height: 16px; font-size: 14px; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0 3px 6px -5px #000000; -moz-box-shadow: 0 3px 6px -5px #000000; box-shadow: 0 3px 6px -5px #000000; } .header-posts .link{ height: 30px; cursor: pointer; padding-left: 8px; font-size: 13px; color: white; -webkit-box-shadow: 0 3px 6px -5px #000000; -moz-box-shadow: 0 3px 6px -5px #000000; box-shadow: 0 3px 6px -5px #000000; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 0; padding-bottom: 0; box-sizing: border-box; text-decoration: underline; line-height: 25px; } .header-posts .link:hover{ color: #C6C6C6; transition: all .2s linear; } .header-posts h3:not(:first-of-type){ margin-top: 10px; } #header-posts:before { box-sizing: border-box; margin: 0; padding: 0; font-size: inherit; font-weight: 400; font-family: "Open Sans" !important; font-style: normal; color: hsl(0, 0%, 20%); background-color: hsla(0, 0%, 0%, 0); transition-property: none; transition-duration: .2s; transition-timing-function: linear; } .header-posts a { position: relative; overflow: hidden; display: block; height: auto; margin-top: 8px; padding: 3px 8px 8px 8px; line-height: 16px; font-size: 13px; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; background-color: hsla(0, 0%, 0%, 0); background-size: 64px 36px; background-position: 8px 8px; background-repeat: no-repeat; color: white; transition: background-color .2s linear; } .header-posts > a:hover{ background-color: hsla(0, 0%, 0%, .1); } .header-posts .header-bg-news { background-size: cover; display: block; height: 39px; width: 70px; position: absolute; top: 6px; left: 8px; } .header-posts .header-news-time { display: block; color: #CCC; font-style: italic; font-size: 10px; position: absolute; bottom: 10px; right: 8px; } .header-posts .header-user-name { color: #ccc; display: block; margin: 1px 0 0 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-posts .header-news-icons { display: block; margin: 6px 0 0 80px; width: 63px; overflow: hidden; } .header-posts .header-news-icons .header-news-icon { display: inline-block; width: 18px; height: 18px; background-size: 16px 16px; background-position: center; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .header-news-icon.text { background-image: url(/img/icons/news/text.png); background-color: hsl(280, 60%, 50%); } .header-news-icon.guest { background-image: url(/img/icons/news/guest.png); background-color: hsl(60, 78%, 50%); } .header-news-icon.fav { background-image: url(/img/icons/news/fav.png); background-color: hsl(30, 78%, 50%); } .header-news-icon.photo { background-image: url(/img/icons/news/photo.png); background-color: hsl(98, 51%, 47%); } .header-news-icon.cool { background-image: url(/img/icons/news/cool.png); background-color: hsl(46, 78%, 56%); } .header-news-icon.love { background-image: url(/img/icons/news/love.png); background-color: hsl(0, 100%, 60%); } .header-news-icon.fan { background-image: url(/img/icons/news/fan.png); background-color: hsl(198, 32%, 63%); } .header-news-icon.creative { background-image: url(/img/icons/news/creative.png); background-color: hsl(277, 17%, 44%); } .header-posts .header-app-icons { display: block; margin: 6px 0 0 80px; width: 140px; overflow: hidden; } .header-posts .header-app-icons .header-app-icon { display: inline-block; width: 18px; height: 18px; background-size: cover; margin-right: 2px; } .header-app-icon.vkontakte { background: url("/img/app/t4/vkontakte.png") no-repeat center; } .header-app-icon.facebook { background: url("/img/app/t4/facebook.png") no-repeat center; } .header-app-icon.twitter { background: url("/img/app/t4/twitter.png") no-repeat center; } .header-app-icon.google { background: url("/img/app/t4/google.png") no-repeat center; } .header-app-icon.mail { background: url("/img/app/t4/mailru.png") no-repeat center; } .header-app-icon.yandex { background: url("/img/app/t4/yandex.png") no-repeat center; } .header-app-icon.odnoklassniki { background: url("/img/app/t4/odnoklassniki.png") no-repeat center; } .header-app-icon.fav { background-color: hsl(30, 78%, 50%); background-image: url("/img/icons/news/fav.png"); } #header-search{ position: absolute; right: 8px; top: 12px; width: 128px; height: 24px; padding-left: 32px; padding-right: 8px; border-style: none; font-size: 13px; font-family: "PT Sans", sans-serif; background-color: white; background-image: url("/img/search-32.png"); background-size: 16px; background-position: 8px; background-repeat: no-repeat; box-shadow: 0 0 0 2px hsla(204, 70%, 53%, 0); border-radius: 2px; transition: box-shadow .2s linear; } #header-search:focus{ outline-style: none; box-shadow: 0 0 0 2px hsla(204, 70%, 53%, .6); } #namePlusEdit { position: relative; display: inline-block; width: auto; height: 48px; margin-left: 48px; float: left; padding: 0 10px; } #header-profile-link { position: relative; display: inline-block; float: left; font-size: 13px; color: rgba(255,255,255,.5); padding: 0; line-height: 48px; height: 48px; opacity: 1; } #namePlusEdit.currentLink > #header-profile-link { color: rgba(255,255,255,1); cursor: default; } #edit-btn { position: relative; display: inline-block; width: 10px; height: 10px; top: 15px; background-color: hsla(120, 88%, 37%, 1); opacity: .9; padding: 4px; border-radius: 2px; box-sizing: content-box; background-size: 60%; background-repeat: no-repeat; background-position: center; margin-left: 5px; } #header-messages-expander:not(.currentLink):hover, .header-posts-expander:not(.currentLink):hover, .namePlusEdit:not(.currentLink):hover { color: rgba(255,255,255,.8); } #header-messages-expander.currentLink {color: rgba(255,255,255,1);}