Donjuan

/* ===================================================== */
/*                                                       */
/*            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;
}