/* -------------------------------------------------------------------------------- /
DOOR STYLE - v1.4
You can add custom notes to code. CSS comments will be removed from the generated output.
[info] Sometimes you should use "!important" css suffix to take the changes effect
when setting a value of a CSS property (e.g. font-size: 11px !important);.
TABLE OF CONTENT
[0] SETUP & COMMON STYLES
[1] POST FILTER CATEGORIES & SLIDER ARROWS
[2] POST WRAPPER
[3] MEDIA WRAP & POST OVERLAY
[4] POST CONTENT
[4.1] POST CONTENT - TITLE
[4.2] POST CONTENT - META
[4.3] POST CONTENT - EXCERPT
[4.4] POST CONTENT - BUTTON
[4.5] POST CONTENT - OTHER
[5] WOOCOMMERCE STYLES
[6] EFFECTS
/ -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- /
[0] SETUP & COMMON STYLES
[info] The portfolio filter categories filter "buttons".
[tip] You can set e.g. border radius, colors, etc here.
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post-header { z-index:2 }
/* Button style */
.gw-gopf-style-door a.gw-gopf-btn {
color:((main_color_3));
background:((main_color_1));
-moz-border-radius:((border_radius_2))px;
-webkit-border-radius:((border_radius_2))px;
border-radius:((border_radius_2))px;
display:inline-block;
font-family:((font_family_m));
font-size:((font_size_m))px;
height:29px;
line-height:29px;
padding:0 9px;
position:relative;
text-align:left;
-moz-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-ms-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-o-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-webkit-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
text-decoration:none !important;
}
.gw-gopf-style-door a.gw-gopf-btn.gw-gopf-btn-outlined {
color:((main_color_1));
background:transparent;
border:solid 1px ((main_color_1));
height:27px;
line-height:27px;
padding:0 8px;
}
/* Hover (mouse over) state of button */
.gw-gopf-style-door a.gw-gopf-btn:hover {
color:((main_color_3));
background:((highlight_color));
}
.gw-gopf-style-door a.gw-gopf-btn.gw-gopf-btn-outlined:hover {
color:((highlight_color));
background:transparent;
border-color:((highlight_color));
}
/* Circle style */
.gw-gopf-style-door a.gw-gopf-circle {
-moz-border-radius:((border_radius_3))px;
-webkit-border-radius:((border_radius_3))px;
border-radius:((border_radius_3))px;
display:inline-block;
height:44px;
line-height:44px;
position: relative;
margin-left:3px;
margin-right:3px;
-moz-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-ms-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-o-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-webkit-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
width:44px;
}
/* -------------------------------------------------------------------------------- /
[1] POST FILTER CATEGORIES & SLIDER ARROWS
[info] The portfolio filter categories filter "buttons".
[tip] You can set e.g. border radius, colors, etc here.
/ -------------------------------------------------------------------------------- */
/* Filter categories (buttons) */
.gw-gopf-style-door .gw-gopf-cats > span a {
background:((main_color_1));
-moz-border-radius:((border_radius_2))px;
-webkit-border-radius:((border_radius_2))px;
border-radius:((border_radius_2))px;
color:((main_color_3));
display:block;
font-family:((font_family_m));
font-size:((font_size_m))px;
height:29px;
line-height:29px;
padding:0 10px;
text-decoration:none;
-moz-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-ms-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-o-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-webkit-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
}
.gw-gopf-style-door .gw-gopf-cats > span a.gw-gopf-btn-outlined {
color:((main_color_1));
background:transparent;
border:solid 1px ((main_color_1));
height:27px;
line-height:27px;
padding:0 8px;
}
/* Filter categories (buttons) - selected element */
.gw-gopf-style-door .gw-gopf-cats > span.gw-gopf-current a {
background:((highlight_color));
}
.gw-gopf-style-door .gw-gopf-cats > span.gw-gopf-current a.gw-gopf-btn-outlined {
background:transparent;
border-color:((highlight_color));
color:((highlight_color));
}
/* Filter categories (buttons) - hovered element */
.gw-gopf-style-door .gw-gopf-cats > span a:hover {
background:((main_color_2));
}
.gw-gopf-style-door .gw-gopf-cats > span a.gw-gopf-btn-outlined:hover {
background:transparent;
border-color:((main_color_2));
color:((main_color_2));
}
/* Arrows (buttons) */
.gw-gopf-style-door .gw-gopf-slider-controls > div a {
background:((highlight_color));
-moz-border-radius:((border_radius_2))px;
-webkit-border-radius:((border_radius_2))px;
border-radius:((border_radius_2))px;
color:((main_color_3));
display:table-cell;
height:29px;
text-decoration:none;
-moz-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-ms-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-o-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-webkit-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
vertical-align:middle;
width:28px;
}
/* Arrows (buttons) - hovered element */
.gw-gopf-style-door .gw-gopf-slider-controls > div a:hover {
background:((main_color_1));
}
/* Arrows (buttons) - inactive */
.gw-gopf-style-door .gw-gopf-slider-controls > div a.disabled {
background:((main_color_1));
}
/* Pagination - Load more (button) */
.gw-gopf-style-door a.gw-gopf-pagination-load-more {
background:((main_color_1));
-moz-border-radius:((border_radius_2))px;
-webkit-border-radius:((border_radius_2))px;
border-radius:((border_radius_2))px;
color:((main_color_3));
display:inline-block;
font-family:((font_family_m));
font-size:((font_size_m))px;
height:29px;
line-height:29px;
padding:0 10px;
text-decoration:none;
-moz-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-ms-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-o-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
-webkit-transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
transition:color 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
}
/* Pagination - Load more (outlined button) */
.gw-gopf-style-door a.gw-gopf-pagination-load-more.gw-gopf-btn-outlined {
color:((main_color_1));
background:transparent;
border:solid 1px ((main_color_1));
height:27px;
line-height:27px;
padding:0 8px;
}
/* Pagination - Load more (button) - hovered */
.gw-gopf-style-door a.gw-gopf-pagination-load-more:hover {
background:((main_color_2));
}
/* Pagination - Load more (outlined button) - hovered */
.gw-gopf-style-door a.gw-gopf-pagination-load-more.gw-gopf-btn-outlined:hover {
background:transparent;
border-color:((main_color_2));
color:((main_color_2));
}
/* -------------------------------------------------------------------------------- /
[2] POST WRAPPER
[info] The whole post container, including the media and content.
[tip] You can set e.g. border radius or box shadow here for the the whole post.
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post,
.gw-gopf-touch.gw-gopf-style-door .gw-gopf-post:hover {
box-shadow:0px 0px 0px 10px rgba(0,0,0,0);
-moz-border-radius:((border_radius_1))px;
-webkit-border-radius:((border_radius_1))px;
border-radius:((border_radius_1))px;
-moz-box-shadow:0px 0px 0px 10px rgba(0,0,0,0);
-o-box-shadow:0px 0px 0px 10px rgba(0,0,0,0);
-webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0,0);
box-shadow:0px 0px 0px 10px rgba(0,0,0,0);
margin-bottom:0;
overflow:hidden;
padding-bottom:0;
-moz-transition:border 0.1s ease-in-out, margin 0.1s ease-in-out, padding 0.1s ease-in-out, z-index 0s 1s;
-ms-transition:border 0.1s ease-in-out, margin 0.1s ease-in-out, padding 0.1s ease-in-out, z-index 0s 1s;
-o-transition:border 0.1s ease-in-out, margin 0.1s ease-in-out, padding 0.1s ease-in-out, z-index 0s 1s;
-webkit-transition:border 0.1s ease-in-out, margin 0.1s ease-in-out, padding 0.1s ease-in-out, z-index 0s 1s;
transition:border 0.1s ease-in-out, margin 0.1s ease-in-out, padding 0.1s ease-in-out, z-index 0s 1s;
-webkit-transform: translateZ(0);
z-index:2 !important;
}
.gw-gopf-style-door .gw-gopf-post:hover,
.gw-gopf-touch.gw-gopf-style-door .gw-gopf-current.gw-gopf-post {
border-color:((highlight_color));
-moz-box-shadow:0px 0px 0px 10px ((highlight_color))), 0 0 ((box_shadow_blur))px ((box_shadow_spread))px rgba(0,0,0,((box_shadow_opacity)));
-o-box-shadow:0px 0px 0px 10px ((highlight_color)), 0 0 ((box_shadow_blur))px ((box_shadow_spread))px rgba(0,0,0,((box_shadow_opacity)));
-webkit-box-shadow:0px 0px 0px 10px ((highlight_color)), 0 0 ((box_shadow_blur))px ((box_shadow_spread))px rgba(0,0,0,((box_shadow_opacity)));
box-shadow:0px 0px 0px 10px ((highlight_color)), 0 0 ((box_shadow_blur))px ((box_shadow_spread))px rgba(0,0,0,((box_shadow_opacity)));
-moz-transition:border 0.3s ease-in-out, margin 0.2s ease-in-out, padding 0.2s ease-in-out, z-index 0s 0s;
-ms-transition:border 0.3s ease-in-out, margin 0.2s ease-in-out, padding 0.2s ease-in-out, z-index 0s 0s;
-o-transition:border 0.3s ease-in-out, margin 0.2s ease-in-out, padding 0.2s ease-in-out, z-index 0s 0s;
-webkit-transition:border 0.3s ease-in-out, margin 0.2s ease-in-out, padding 0.2s ease-in-out, z-index 0s 0s;
transition:border 0.3s ease-in-out, margin 0.2s ease-in-out, padding 0.2s ease-in-out, z-index 0s 0s;
z-index:3 !important;
}
/* -------------------------------------------------------------------------------- /
[3] MEDIA WRAP & POST OVERLAY
[info] The whole post overlay with its content.
[tip] You can set e.g. overlay circles and buttons.
/ -------------------------------------------------------------------------------- */
/* Overlay button - circle style - normal state */
.gw-gopf-style-door a.gw-gopf-post-overlay-circle {
background:((highlight_color));
}
/* Overlay button - circle style - hover state */
.gw-gopf-style-door a.gw-gopf-post-overlay-circle:hover {
background:((main_color_1));
}
/* Overlay button - button style - normal state */
.gw-gopf-style-door a.gw-gopf-post-overlay-btn {
background:((highlight_color));
margin-left:3px;
margin-right:3px;
}
.gw-gopf-style-door a.gw-gopf-post-overlay-btn.gw-gopf-btn-outlined {
background:transparent;
border-color:((highlight_color));
color:((highlight_color));
}
/* Overlay button - button style - hover state */
.gw-gopf-style-door a.gw-gopf-post-overlay-btn:hover {
background:((main_color_1));
}
.gw-gopf-style-door a.gw-gopf-post-overlay-btn.gw-gopf-btn-outlined:hover {
background:transparent;
border-color:((main_color_1));
color:((main_color_1));
}
/* -------------------------------------------------------------------------------- /
[4] POST CONTENT
[info] Includes the title, post meta data (e.g. date), the excerpt and read more button or link.
[tip] You can set e.g. padding, etc here.
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post-content-wrap,
.gw-gopf-touch.gw-gopf-style-door .gw-gopf-post:hover .gw-gopf-post-content-wrap {
opacity:0;
position:absolute;
-moz-transition:opacity 0.1s ease-in-out, height 0.1s ease-in-out;
-ms-transition:opacity 0.1s ease-in-out, height 0.1s ease-in-out;
-o-transition:opacity 0.1s ease-in-out, height 0.1s ease-in-out;
-webkit-transition:opacity 0.1s ease-in-out, height 0.1s ease-in-out;
transition:opacity 0.1s ease-in-out, height 0.1s ease-in-out;
width:100%;
z-index:2;
}
.gw-gopf-style-door .gw-gopf-post:hover .gw-gopf-post-content-wrap,
.gw-gopf-touch.gw-gopf-style-door .gw-gopf-current.gw-gopf-post .gw-gopf-post-content-wrap {
opacity:1;
-moz-transition:opacity 0.3s ease-in-out, height 0.3s ease-in-out;
-ms-transition:opacity 0.3s ease-in-out, height 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out, height 0.3s ease-in-out;;
-webkit-transition:opacity 0.3s ease-in-out, height 0.3s ease-in-out;
transition:opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}
.gw-gopf-style-door .gw-gopf-post-content-wrap:before {
-moz-border-radius-bottomleft:((border_radius_1))px;
-moz-border-radius-bottomright:((border_radius_1))px;
-webkit-border-bottom-left-radius:((border_radius_1))px;
-webkit-border-bottom-right-radius:((border_radius_1))px;
border-bottom-left-radius:((border_radius_1))px;
border-bottom-right-radius:((border_radius_1))px;
background-color:((post_content_color));
opacity:((post_opacity));
}
.gw-gopf-style-door .gw-gopf-post-content {
color:((main_color_1));
font-family:((font_family_m));
font-size:((font_size_m))px;
line-height:((line_height_m))px;
padding:((post_padding))px;
}
/* General link style */
.gw-gopf-style-door .gw-gopf-post-content a {
color:((highlight_color));
}
.gw-gopf-style-door .gw-gopf-post-content a:hover {
color:((main_color_1));
}
/* -------------------------------------------------------------------------------- /
[4.1] POST CONTENT - TITLE
[info] The post title.
/ -------------------------------------------------------------------------------- */
/* The title */
.gw-gopf-style-door .gw-gopf-post-content h2 {
color:((main_color_1)) !important;
font-family:((font_family_l)) !important;
font-size:((font_size_l))px !important;
line-height:((line_height_l))px !important;
}
/* The link inside the title */
.gw-gopf-style-door .gw-gopf-post-content h2 a {
color:inherit;
font-size:inherit !important;
line-height:inherit !important;
}
/* Hover state - The link inside the title */
.gw-gopf-style-door .gw-gopf-post-content h2 a:hover { color:((highlight_color)); }
/* -------------------------------------------------------------------------------- /
[4.2] POST CONTENT - META
[info] The post meta data e.g. post date.
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post-meta {
color:((main_color_2));
font-family:((font_family_s));
font-size:((font_size_s))px;
line-height:((line_height_s))px;
}
/* -------------------------------------------------------------------------------- /
[4.3] POST CONTENT - EXCERPT
[info] The post excerpt.
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post-excerpt {
font-family:((font_family_m));
font-size:((font_size_m))px;
line-height:((line_height_m))px !important;
margin-top:15px;
}
.gw-gopf-style-door .gw-gopf-post-excerpt p {
font-family:((font_family_m));
font-size:((font_size_m))px;
line-height:((line_height_m))px !important;
margin:0 0 15px !important;
padding:0 !important;
}
.gw-gopf-style-door .gw-gopf-post-excerpt p:last-child {
margin:0 !important;
padding:0 !important;
}
/* -------------------------------------------------------------------------------- /
[4.4] POST CONTENT - BUTTON
[info] The read more button or link
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post-more { margin-top:15px; }
/* Link style - without classname */
.gw-gopf-style-door .gw-gopf-post-more a {
color:((highlight_color));
font-size:((font_size_m))px;
font-weight:bold;
margin-top:15px;
}
/* Hover (mouse over) state of link */
.gw-gopf-style-door .gw-gopf-post-more a:hover {
color:((main_color_1));
}
/* Button style - with "gw-gopf-btn" classname */
.gw-gopf-style-door .gw-gopf-post-more a.gw-gopf-btn {
color:((main_color_3));
font-weight:normal;
margin-top:-3px;
}
.gw-gopf-style-door .gw-gopf-post-more a.gw-gopf-btn.gw-gopf-btn-outlined { color:((main_color_1)); }
.gw-gopf-style-door .gw-gopf-post-more a.gw-gopf-btn.gw-gopf-btn-outlined:hover { color:((highlight_color)); }
/* Space between buttons */
.gw-gopf-style-door .gw-gopf-post-more a.gw-gopf-btn { margin-left:10px }
.gw-gopf-style-door .gw-gopf-post-more a.gw-gopf-btn:first-child { margin-left:0; }
/* -------------------------------------------------------------------------------- /
[4.5] POST CONTENT - OTHER
[info] Highlight box, etc.
/ -------------------------------------------------------------------------------- */
.gw-gopf-style-door .gw-gopf-post-content > *:first-child { margin-top:0 !important; }
/* Highlight box */
.gw-gopf-style-door div.gw-gopf-post-highlight-box, .gw-gopf-style-door div.gw-gopf-post-highlight-box:first-child {
background:((highlight_color));
padding:((post_padding))px;
margin:-((post_padding))px -((post_padding))px ((post_padding))px !important;
}
/* Highlight box content */
.gw-gopf-style-door .gw-gopf-post-highlight-box * {
color:((main_color_3)) !important;
}
.gw-gopf-style-door .gw-gopf-post-highlight-box a:hover {
color:((main_color_1)) !important;
}
/* -------------------------------------------------------------------------------- /
[5] WOOCOMMERCE STYLES
/ -------------------------------------------------------------------------------- */
/* Sale circle */
.gw-gopf-style-door .gw-gopf-woo-sale,
.gw-gopf-touch.gw-gopf-style-door .gw-gopf-post:hover .gw-gopf-woo-sale {
background:((highlight_color));
-moz-border-radius:22px;
-webkit-border-radius:22px;
border-radius:22px;
color:((main_color_3));
display:inline-block;
font-size:((font_size_m))px;
height:44px;
line-height:44px;
position:absolute;
right:10px;
text-align:center;
top:10px;
-moz-transition:opacity 0.1s ease-in-out;
-ms-transition:opacity 0.1s ease-in-out;
-o-transition:opacity 0.1s ease-in-out;
-webkit-transition:opacity 0.1s ease-in-out;
transition:opacity 0.1s ease-in-out;
width:44px;
z-index:2;
}
.gw-gopf-style-door .gw-gopf-post:hover .gw-gopf-woo-sale,
.gw-gopf-touch.gw-gopf-style-door .gw-gopf-current.gw-gopf-post .gw-gopf-woo-sale {
filter:alpha(opacity=50); /* IE 5-7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
-khtml-opacity:0.5; /* Safari 1.x */
-moz-opacity:0.5; /* Netscape */
opacity:0.5;
}
/* Price general */
.gw-gopf-style-door .gw-gopf-post-woo-price {
color:((highlight_color));
font-size:((font_size_xl))px;
font-weight:bold;
line-height:((line_height_xl))px;
margin-top:15px;
}
/* Sale price */
.gw-gopf-style-door .gw-gopf-post-woo-price del {
background:none;
color:((main_color_4));
font-size:((font_size_l))px;
line-height:((line_height_l))px;
margin-right:5px;
text-decoration:line-through;
}
/* Old price */
.gw-gopf-style-door .gw-gopf-post-woo-price ins {
background:none;
text-decoration:none;
}
/* -------------------------------------------------------------------------------- /
[6] EFFECTS
/ -------------------------------------------------------------------------------- */
/* No Effect - only overlay */
.gw-gopf-style-door-no-effect .gw-gopf-post-media-wrap {
-moz-border-radius:((border_radius_1))px;
-webkit-border-radius:((border_radius_1))px;
border-radius:((border_radius_1))px;
}
.gw-gopf-style-door-no-effect .gw-gopf-post-overlay-bg {
-moz-border-radius:((border_radius_1))px;
-webkit-border-radius:((border_radius_1))px;
border-radius:((border_radius_1))px;
}
.gw-gopf-style-door-no-effect .gw-gopf-post-content-wrap {
display:none;
}
/* Slide Down */
.gw-gopf-style-door-slide-down .gw-gopf-post-media-wrap,
.gw-gopf-touch.gw-gopf-style-door-slide-down .gw-gopf-post:hover .gw-gopf-post-media-wrap {
border-radius:((border_radius_1))px;
-webkit-transition:-webkit-border-radius 0.1s ease-in-out;
}
.gw-gopf-style-door-slide-down .gw-gopf-post:hover .gw-gopf-post-media-wrap,
.gw-gopf-touch.gw-gopf-style-door-slide-down .gw-gopf-current.gw-gopf-post .gw-gopf-post-media-wrap {
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
-moz-border-radius-topleft:((border_radius_1))px;
-moz-border-radius-topright:((border_radius_1))px;
-webkit-border-top-left-radius:((border_radius_1))px;
-webkit-border-top-right-radius:((border_radius_1))px;
border-top-left-radius:((border_radius_1))px;
border-top-right-radius:((border_radius_1))px;
}
.gw-gopf-style-door-slide-down .gw-gopf-post-overlay-bg {
-moz-border-radius-topleft:((border_radius_1))px;
-moz-border-radius-topright:((border_radius_1))px;
-webkit-border-top-left-radius:((border_radius_1))px;
-webkit-border-top-right-radius:((border_radius_1))px;
border-top-left-radius:((border_radius_1))px;
border-top-right-radius:((border_radius_1))px;
}