Posted 7 апреля, 20213 yr comment_168814 Может кто помочь.. Когда сайт скролить к низу, то середина прозрачного места (фон), отпечатывается в середине.. Кто знает, как зафиксировать и где это место, или отвязать его как-то.. Уже все перепробовал.. Спойлер /* ===================================================== */ /* */ /* Theme developed by ipsfocus.com */ /* */ /* Need support? Visit the official customer forums! */ /* https://www.ipsfocus.com/forums/ */ /* */ /* ===================================================== */ /* ---------------- Global Header User links Navigation Dropdown navigation menus Search Main Elements Sidebar and Widgets Topic View ---------------- */ /* ---------------- - Global ---------------- */ body{ background-position: 50% 0; background-attachment: fixed; background-size: cover; } /* ---------------- - Header ---------------- */ @media screen and (min-width:980px){ #ipsLayout_header{ height: calc({theme="logoheight"}px + 10px); } } .ipsApp #header{ background: {hextorgb="header" opacity="0.9"}; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(0, 0, 0, 0.1); } #ipsLayout_header{ position: relative; z-index: 2; } #ipsLayout_body{ position: relative; z-index: 1; } /* Fixed header */ {{if theme.feature_2}} @media screen and (min-width:980px){ .ipsApp #header{ position: fixed; top: 0; left: 0; right: 0; } .focus-fixed-nav .ipsSticky_top{ transform: translateY({theme="ipsfocus_text"}px); } .focus-fixed-nav a[id^="comment-"]{ top: -{expression="theme.ipsfocus_text + 1"}px; } .focus-fixed-nav .cPostRating_controls{ top: {expression="theme.ipsfocus_text + 10"}px; } .focus-fixed-nav.focus-sticky-author .cAuthorPane_info{ top: {theme="ipsfocus_text"}px; } } {{endif}} /* ---------------- - User links ---------------- */ #elUserNav{ color: #fff; border: 1px solid rgba(255,255,255,0.1); border-width: 0 1px 0 0; } html[dir='rtl'] #elUserNav{ border-width: 0 0 0 1px; } #elUserNav > li{ border-radius: 0; border-color: rgba(255,255,255,0.1); } /* Hover */ #elUserNav > li:hover{ background-color: rgba(0,0,0,0.1); } /* ---------------- - Navigation main_nav: tab background main_nav_font: link colour main_nav_tab: dropdown background main_nav_tab_font: dropdown link ---------------- */ .nav-bar{ background: {hextorgb="main_nav" opacity="0.75"}; border: 1px solid {hextorgb="main_nav" opacity="0.5"}; border-radius: 4px; box-shadow: 0px 1px 5px rgba(0,0,0,0.4); position: relative; } @supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) ) { .nav-bar{ z-index: 1; } } .ipsNavBar_primary{ color: {hextorgb="main_nav_font" opacity="0.9"}; } .ipsNavBar_primary > ul > li{ font-size: 1.2rem; } .ipsApp .ipsNavBar_primary > ul > li > a{ font-weight: bold; border-radius: 3px; padding: 0 15px; } /* Hover link */ .ipsApp .ipsNavBar_primary > ul > li:hover > a{ background: {hextorgb="main_nav_font" opacity="0.05"}; } /* Active link */ .ipsApp .ipsNavBar_primary > ul > li[data-active] > a{ background: {hextorgb="main_nav_font" opacity="0.08"}; } /* ---------------- - Dropdown navigation menus ---------------- */ .ipsNavBar_secondary{ color: {theme="main_nav_tab"}; /* Background and arrow */ box-shadow: rgba(0,0,0,0.26) 0px 6px 16px, rgba(0,0,0,0.1) 0px 2px 2px; } /* Dropdown menu links */ .ipsNavBar_secondary > li > a:hover{ background: {hextorgb="main_nav_tab_font" opacity="0.05"}; } /* ---------------- - Search ---------------- */ @media screen and (min-width:980px){ #elSearch{ background: rgba(0,0,0,0.3); color: #fff; border-radius: 4px; } html[dir='ltr'] #elSearch{ border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: rgba(255,255,255,0.1) -1px 0 0; } html[dir='rtl'] #elSearch{ border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: rgba(255,255,255,0.1) 1px 0 0; } } /* ---------------- - Breadcrumb navigation ---------------- */ /* Link angles */ .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:before, .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:after{ /* Highlight */ color: rgba(255,255,255,0.5); /* Shadow */ border-color: rgba(0,0,0,0.8); } /* Hover */ .ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:before, .ipsBreadcrumb > ul[data-role="breadcrumbList"] li:hover > a:after, .ipsBreadcrumb .ipsList_inline li a:hover{ background: rgba(255,255,255,0.15); } /* Active */ .ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:before, .ipsApp .ipsBreadcrumb > ul[data-role="breadcrumbList"] li > a:active:after, .ipsApp .ipsBreadcrumb .ipsList_inline li a:active{ background: rgba(0,0,0,0.2); } /* Side links */ .ipsBreadcrumb .ipsList_inline li{ border-color: rgba(255,255,255,0.2); } .ipsApp .ipsBreadcrumb{ color: {theme="link"}; background: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.35); box-shadow: inset rgba(255,255,255,0.15) 0px 1px 0px, rgba(0,0,0,0.2) 0px 1px 3px; border-radius: 3px; z-index: auto; } /* Border width */ .ipsBreadcrumb:before{ border-width: 1px; } /* ---------------- - Blur effect ---------------- */ {{if !theme.focus_picker}} body, .box-blur{ background-color: {theme="picker_c1"}; } {{if theme.picker_i1}} .background, .box-blur-image:before{ background-image: url('{theme="picker_i1"}'); } /* Gradient */ .background:before, .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c1" opacity="0"} 70%, {hextorgb="picker_c1" opacity="1"} 100%); } {{else}} /* Remove the gradients and blurred div if an image doesnt exist */ .background:before, .box-blur-image, .box-blur:after{ display: none; } {{endif}} {{endif}} /* Background image */ .background{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-repeat: no-repeat; background-attachment:fixed; background-position: 50% 0; } /* Create gradient and pattern .background:before, .background:after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }*/ /* Gradient */ .background:before{ background-size: inherit; background-repeat: no-repeat; } /* Pattern overlay*/ .background:after{ background: url('{resource="ipsfocus/pattern.jpg" app="core" location="front"}') repeat; opacity: 0.04; } /* Blurred wrapper можно сделать полностью прозрачность */ .box-blur{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; border-radius: inherit; } /* Blurred image */ .box-blur-image{ background-position: inherit; background-repeat: no-repeat; background-size: inherit; position: absolute; width: 100vw; top: -20px; height: calc(100% + 40px); } .box-blur-image:before{ content: ''; display: block; margin: 0 auto; {{if theme.enable_fluid_width}} max-width: calc({theme="fluid_width_size"}% + 40px); {{else}} max-width: calc({theme="fixedWidth"}px + 40px); {{endif}} height: 100%; filter: blur(10px) saturate(140%); background-position: inherit; background-repeat: no-repeat; background-size: inherit; } /* Blurred gradient */ .box-blur:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: inherit; background-size: inherit; background-repeat: no-repeat; } /* Remove gradient */ .focus-no-gradient .background:before, .focus-no-gradient .box-blur:after{ display: none; } /* Remove pattern overlay */ .focus-no-overlay .background:after{ display: none; } /* Use the following code for a repeating background image */ /* .focus-pattern .background, .focus-pattern .box-blur-image:before{ background-repeat: repeat; background-size: auto 500px; } .focus-pattern .box-blur-image{ max-height: none; } */ /* Remove gradient and overlay for patterns */ /* .focus-pattern .background:before, .focus-pattern .background:after, .focus-pattern .box-blur:after{ display: none; } */ /* Fixed */ .focus-fixed-background .background{ position: fixed; } /* The blur effect is removed for performance reasons */ .focus-fixed-background .box-blur{ display: none; } /* Show or hide blur effect depending on setting. Use css backdrop filter only on desktop if it's supported and remove entirely on all mobiles */ {{if theme.feature_1}} /* Send supported value to javascript instead of Modernizr */ .background{ min-width: 10px; } @supports ( (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) ) { /* Send supported value to javascript instead of Modernizr */ .background{ min-width: 30px; } @media screen and (min-width:980px){ .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, .ipsApp .ipsToolList > li > .ipsButton_link, #header, .ipsBreadcrumb, .nav-bar, #ipsLayout_footer, .ipsButtonBar{ -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } } .box-blur{ display: none; } } @media screen and (max-width:979px){ .box-blur{ display: none; } } {{else}} .box-blur{ display: none; } {{endif}} /* Remove blur effect from IE and Edge */ _:-ms-lang(x), .box-blur{ display: none; } /* Remove blur from internal boxes */ html .ipsApp .ipsBox .ipsBox, html .ipsApp .ipsTabs_panels .ipsBox{ -webkit-backdrop-filter: none; backdrop-filter: none; } html .ipsApp .ipsBox .ipsBox .box-blur, html .ipsApp .ipsTabs_panels .ipsBox .box-blur{ display: none; } /* ---------------- - Background Picker ---------------- */ .focus-pickerWrap{ position: relative; } .focus-picker{ padding: 10px; } {{if theme.focus_picker}} .ipsfocus_bg1 body, .ipsfocus_bg1 .box-blur{ background-color: {theme="picker_c1"}; } {{if theme.picker_i1}} .ipsfocus_bg1 .background, .ipsfocus_bg1 .box-blur-image:before{ background-image: url('{theme="picker_i1"}'); } .ipsfocus_bg1 .background:before, .ipsfocus_bg1 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c1" opacity="0"} 70%, {hextorgb="picker_c1" opacity="1"} 100%); } {{else}} .ipsfocus_bg1 .background:before, .ipsfocus_bg1 .box-blur-image, .ipsfocus_bg1 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg2 body, .ipsfocus_bg2 .box-blur{ background-color: {theme="picker_c2"}; } {{if theme.picker_i2}} .ipsfocus_bg2 .background, .ipsfocus_bg2 .box-blur-image:before{ background-image: url('{theme="picker_i2"}'); } .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c2" opacity="0"} 70%, {hextorgb="picker_c2" opacity="1"} 100%); } {{else}} .ipsfocus_bg2 .background:before, .ipsfocus_bg2 .box-blur-image, .ipsfocus_bg2 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg3 body, .ipsfocus_bg3 .box-blur{ background-color: {theme="picker_c3"}; } {{if theme.picker_i3}} .ipsfocus_bg3 .background, .ipsfocus_bg3 .box-blur-image:before{ background-image: url('{theme="picker_i3"}'); } .ipsfocus_bg3 .background:before, .ipsfocus_bg3 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c3" opacity="0"} 70%, {hextorgb="picker_c3" opacity="1"} 100%); } {{else}} .ipsfocus_bg3 .background:before, .ipsfocus_bg3 .box-blur-image, .ipsfocus_bg3 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg4 body, .ipsfocus_bg4 .box-blur{ background-color: {theme="picker_c4"}; } {{if theme.picker_i4}} .ipsfocus_bg4 .background, .ipsfocus_bg4 .box-blur-image:before{ background-image: url('{theme="picker_i4"}'); } .ipsfocus_bg4 .background:before, .ipsfocus_bg4 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c4" opacity="0"} 70%, {hextorgb="picker_c4" opacity="1"} 100%); } {{else}} .ipsfocus_bg4 .background:before, .ipsfocus_bg4 .box-blur-image, .ipsfocus_bg4 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg5 body, .ipsfocus_bg5 .box-blur{ background-color: {theme="picker_c5"}; } {{if theme.picker_i5}} .ipsfocus_bg5 .background, .ipsfocus_bg5 .box-blur-image:before{ background-image: url('{theme="picker_i5"}'); } .ipsfocus_bg5 .background:before, .ipsfocus_bg5 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c5" opacity="0"} 70%, {hextorgb="picker_c5" opacity="1"} 100%); } {{else}} .ipsfocus_bg5 .background:before, .ipsfocus_bg5 .box-blur-image, .ipsfocus_bg5 .box-blur:after{ display: none; } {{endif}} .ipsfocus_bg6 body, .ipsfocus_bg6 .box-blur{ background-color: {theme="picker_c6"}; } {{if theme.picker_i6}} .ipsfocus_bg6 .background, .ipsfocus_bg6 .box-blur-image:before{ background-image: url('{theme="picker_i6"}'); } .ipsfocus_bg6 .background:before, .ipsfocus_bg6 .box-blur:after{ background-image: linear-gradient(to bottom, {hextorgb="picker_c6" opacity="0"} 70%, {hextorgb="picker_c6" opacity="1"} 100%); } {{else}} .ipsfocus_bg6 .background:before, .ipsfocus_bg6 .box-blur-image, .ipsfocus_bg6 .box-blur:after{ display: none; } {{endif}} {{endif}} /* ---------------- - Main Elements ---------------- */ .content-padding{ padding: 10px 0; } /* Box styles */ .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments, .focus-pickerWrap, .ipsfocus_megaFooter{ border-radius: 4px; box-shadow: inset rgba(0,0,0,0.2) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 4px; position: relative; } /* Box background */ .ipsBox:not( .ipsBox_transparent ):not( .ipsModerated ), .ipsBox, .ipsPageHeader, .focus-topic-compact .focus-topic, .ipsPager, .ipsWidget, .ipsBox_alt, #comments, .focus-pickerWrap, .ipsfocus_megaFooter{ {{if theme.feature_1}} background-color: {hextorgb="area_background_reset" opacity="0.75"}; {{else}} background-color: {hextorgb="area_background_reset" opacity="0.85"}; {{endif}} } /* Maintitle */ .ipsType_sectionTitle{ background: {hextorgb="section_title" opacity="0.2"}; box-shadow: 0px -1px 0px rgba(0,0,0,0.15) inset; border-radius: 4px 4px 0 0; font-weight: normal; font-size: 2.2rem; padding: 26px; } /* ---------------- - Sidebar and Widgets ---------------- */ .ipsWidget.ipsWidget_vertical .ipsWidget_title, .ipsWidget.ipsWidget_horizontal .ipsWidget_title{ background: {hextorgb="widget_title_bar" opacity="0.2"}; box-shadow: 0px -1px 0px rgba(0,0,0,0.15) inset; border-top-left-radius: inherit; border-top-right-radius: inherit; font-weight: bold; padding: 11px 15px; font-size: 1.2rem; } /* ---------------- - Topic View ---------------- */ /* -- Post headers -- */ .cPost:before, #ipsLayout_body .cAuthorPane_mobile{ background-color: rgba(255,255,255,0.25); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%) !important; } /* -- Comment controls bar -- */ .focus-post-bar .cPost .ipsItemControls{ background: rgba(15,15,15,0.5); border-color: rgba(0,0,0,0.3); } /* ---------------- - Footer ---------------- */ #ipsLayout_footer{ position: relative; border-radius: 4px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4); margin: 10px 0; padding-left: 20px; padding-right: 20px; } @media screen and (max-width:979px){ #ipsLayout_footer{ border-radius: 0; margin: 0; } } /* ---------------- - Other ---------------- */ .ipsfocus_megaFooter{ position: relative; border: 0; margin-bottom: 10px; } .ipsButtonBar{ background: {hextorgb="button_bar" opacity="0.7"}; box-shadow: inset {hextorgb="button_bar" opacity="0.2"} 0px 0px 0px 1px; /* Blur effect */ position: relative; }
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.