/* -------------------------------------------------------------------------- * Template Dark Style CSS * * Template: Sepia - Photography Portfolio HTML Website Template * Author: Themetorium * URL: https://themetorium.net * * Add class "tt-dark-style" to tag to enable template dark style. -------------------------------------------------------------------------- */ /* Table of Content ==================== 1. General 2. Page preloader 3. Header 4. Menu 5. Mobile header 6. Follow me buttons 7. Gallery list 8. Gallery single 9. Blog list 10. Blog single 11. Pagination 12. OWL carousel 13. Buttons 14. Forms 15. Modal 16. Split box 17. Contact 18. Demos 19. Display element on light or dark style only 20. Miscellaneous */ /* ------------------------------------------------------------ * * BEGIN CODE FOR DEMO SITE ONLY! (Dark & Light style switcher) */ .light-switcher { position: fixed; top: 24%; left: 0; z-index: 99998; cursor: pointer; } /*@media (max-width: 1520px) { .light-switcher { position: fixed; top: auto; bottom: 25px; left: 0; z-index: 9999; cursor: pointer; } }*/ .light-switcher .light-img, .light-switcher.is-dark .dark-img { display: none; } .light-switcher.is-dark .light-img { display: block; } /* END CODE FOR DEMO SITE ONLY! /* ----------------------------- */ /* general */ body.tt-dark-style { background-color: #0a0a0a; color: #CCC; } body.tt-dark-style .h1, body.tt-dark-style .h2, body.tt-dark-style .h3, body.tt-dark-style .h4, body.tt-dark-style .h5, body.tt-dark-style .h6, body.tt-dark-style h1, body.tt-dark-style h2, body.tt-dark-style h3, body.tt-dark-style h4, body.tt-dark-style h5, body.tt-dark-style h6 { color: #EEE; } /* page preloader */ body.tt-dark-style .pace-active { background-color: #0a0a0a; } /* header */ body.tt-dark-style #header { background-color: #111; color: #BBB; } body.tt-dark-style #header.menu-align-center { background-color: transparent; } @media (min-width: 768px) { body.tt-dark-style #header.header-transparent { background-color: transparent; } } body.tt-dark-style #header.header-transparent.header-filled { background-color: #111; } /* logo */ body.tt-dark-style #logo .logo-dark { display: none; } @media (min-width: 992px) { body.tt-dark-style #logo .logo-light { display: block; } body.tt-dark-style #header.header-transparent.header-filled #logo .logo-dark { display: none; } body.tt-dark-style #header.header-transparent.header-filled #logo .logo-light { display: block; } } body.tt-dark-style #logo .logo-dark-m { display: none; } @media (max-width: 991px) { body.tt-dark-style #logo .logo-light-m { display: block; } } /* menu */ body.tt-dark-style #tt-m-menu-toggle-btn span, body.tt-dark-style #tt-m-menu-toggle-btn span:before, body.tt-dark-style #tt-m-menu-toggle-btn span:after { background-color: #FFF; } body.tt-dark-style .tt-menu-nav > li > a { color: #DDD; } /* menu submenu (same as "tt-submenu-dark") */ body.tt-dark-style .tt-submenu { background-color: #111; } @media (min-width: 992px) { body.tt-dark-style .tt-submenu { background-color: rgba(25, 25, 25, 0.95); } } body.tt-dark-style .tt-submenu-master > .tt-submenu { box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8); } body.tt-dark-style .tt-submenu li > a { color: #CCC; } body.tt-dark-style .tt-submenu li > a:hover { color: #FFF; } body.tt-dark-style .tt-submenu > li.active > a { color: #FFF; } /* menu tools */ body.tt-dark-style .tt-menu-tools > ul > li > a { color: #DDD; } body.tt-dark-style .tt-menu-tools > ul > li > a:hover { color: #FFF; } /* tt-dropdown */ body.tt-dark-style .tt-dropdown { background-color: rgba(25, 25, 25, 0.95); } body.tt-dark-style .tt-dropdown-master > .tt-dropdown { box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8); } body.tt-dark-style .tt-dropdown li > a { color: #AAA; } body.tt-dark-style .tt-dropdown li > a:hover { color: #FFF; } body.tt-dark-style .tt-dropdown > li.active > a { color: #FFF; } /* search */ body.tt-dark-style #big-search-input { color: #CCC; } body.tt-dark-style .sr-item-title, body.tt-dark-style .sr-item-title > a { color: #CCC; } body.tt-dark-style .sr-item-title > a:hover { color: #08c1b8; } /* page header */ body.tt-dark-style #page-header, body.tt-dark-style #page-header .page-header-description { color: #CCC; } body.tt-dark-style #page-header.ph-image-on, body.tt-dark-style #page-header.ph-image-on .page-header-description { color: #EEE; } /* isotope filter */ body.tt-dark-style ul.isotope-filter-links > li > a { color: #CCC; } /* gallery list */ body.tt-dark-style .gallery-list-item .gl-item-image-inner:hover:before, body.tt-dark-style .gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before, body.tt-dark-style .gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before { background-color: #000; opacity: .75; } body.tt-dark-style .gli-frame .gl-item-image-wrap { background-color: #111 !important; border-color: #222 !important; } body.tt-dark-style .gli-alter-2 .gl-item-info { background-color: rgba(0, 0, 0, 0.8) !important; } body.tt-dark-style .gli-alter-3 .gl-item-info { background-color: #111 !important; } body.tt-dark-style .gl-item-title, body.tt-dark-style .gl-item-title a, body.tt-dark-style .gli-alter-1 .gl-item-title, body.tt-dark-style .gli-alter-1 .gl-item-title a, body.tt-dark-style .gli-alter-2 .gl-item-title, body.tt-dark-style .gli-alter-2 .gl-item-title a, body.tt-dark-style .gli-alter-3 .gl-item-title, body.tt-dark-style .gli-alter-3 .gl-item-title a { color: #EEE; } body.tt-dark-style .gli-alter-1 .gl-item-title, body.tt-dark-style .gli-alter-1 .gl-item-title a, body.tt-dark-style .gli-alter-4 .gl-item-title, body.tt-dark-style .gli-alter-4 .gl-item-title a, body.tt-dark-style .gli-alter-4 .gl-item-title a:hover { color: #FFF; } body.tt-dark-style .gli-alter-1 .gl-item-title a:hover { color: #FFF; opacity: .85; } body.tt-dark-style .gl-item-title a:hover, body.tt-dark-style .gli-alter-2 .gl-item-title a:hover, body.tt-dark-style .gli-alter-3 .gl-item-title a:hover { color: #08c1b8; } body.tt-dark-style .gli-alter-2 .gl-item-category, body.tt-dark-style .gli-alter-2 .gl-item-category a, body.tt-dark-style .gli-alter-3 .gl-item-category, body.tt-dark-style .gli-alter-3 .gl-item-category a, body.tt-dark-style .gli-alter-4 .gl-item-category, body.tt-dark-style .gli-alter-4 .gl-item-category a { color: #CCC; } body.tt-dark-style .gallery-list-item .gli-meta, body.tt-dark-style .gallery-list-item .gli-meta a { color: #CCC; } body.tt-dark-style .gallery-list-item .gl-item-image-zoom:before, body.tt-dark-style .gallery-list-item .gl-item-image-zoom:after { background-color: #FFF; } body.tt-dark-style .gallery-list-item .gl-item-image-lock { color: #FFF; } /* gallery single */ body.tt-dark-style .gallery-single-carousel .cc-item .gsi-image-caption { background-color: rgba(0, 0, 0, 0.6); color: #FFF; } body.tt-dark-style .gallery-single-carousel ul.gallery-meta { background-color: rgba(0, 0, 0, 0.8); color: #CCC; } body.tt-dark-style .gallery-single-carousel ul.gallery-meta > li a { color: #CCC; } body.tt-dark-style .gs-carousel-info { background-color: rgba(0, 0, 0, 0.55); } body.tt-dark-style .gallery-single-nav a { color: #CCC; } body.tt-dark-style .ph-more-info-trigger { color: #CCC; } /* blog list */ body.tt-dark-style .bl-item-title, body.tt-dark-style .bl-item-title h2 { color: #CCC; } body.tt-dark-style .bl-item-title:hover, body.tt-dark-style .bl-item-title:focus, body.tt-dark-style .bl-item-title h2:hover, body.tt-dark-style .bl-item-title h2:focus { color: #08c1b8; } body.tt-dark-style .bl-item-desc { color: #888; } body.tt-dark-style .bl-item-read-more span, body.tt-dark-style .bl-item-read-more span:before, body.tt-dark-style .bl-item-read-more span:after { background-color: #4e4e4e; } body.tt-dark-style .bl-item-info { background-color: #0a0a0a; } body.tt-dark-style .blog-single-tags span, body.tt-dark-style .sidebar-categories > ul > li > a, body.tt-dark-style .sidebar-post-list .post-data .post-title a, body.tt-dark-style .sidebar-comment-data .author a, body.tt-dark-style .blog-author-name a { color: #CCC; } body.tt-dark-style .sidebar-comment-wrap .sidebar-comment a, body.tt-dark-style .blog-single-tags a, body.tt-dark-style .sidebar-tags a, body.tt-dark-style .blog-author-more { color: #888; } body.tt-dark-style .sidebar-post-list .post-data .post-title a:hover, body.tt-dark-style .sidebar-comment-data .author a:hover, body.tt-dark-style .sidebar-categories > ul > li > a:hover, body.tt-dark-style .blog-author-name a:hover { color: #08c1b8; } body.tt-dark-style .sidebar-categories > ul > li > a span { background-color: #292929; color: #999; } body.tt-dark-style .sidebar-categories > ul > li > a:hover span { background-color: #08c1b8; color: #FFF; } body.tt-dark-style .sidebar-comment-wrap .sidebar-comment a:hover { color: #CCC; } body.tt-dark-style .blog-single-tags a:hover, body.tt-dark-style .sidebar-tags a:hover { color: #FFF; } body.tt-dark-style #blog-list-carousel-section { background-color: #000; } /* blog single */ body.tt-dark-style .blog-single-post-heading { background-color: #0a0a0a; } body.tt-dark-style .media-body, body.tt-dark-style #post-comment-form { background-color: #111; } body.tt-dark-style .blog-single-post-title, body.tt-dark-style .blog-single-meta .article-author, body.tt-dark-style .blog-single-meta .article-author a, body.tt-dark-style .bs-nav-title, body.tt-dark-style .bs-nav-title h4, body.tt-dark-style .related-posts-item .rp-item-title, body.tt-dark-style .related-posts-item .rp-item-title h4 { color: #CCC; } body.tt-dark-style .blog-single-links, body.tt-dark-style .blog-single-links a, body.tt-dark-style .media-heading a { color: #999; } body.tt-dark-style .blog-single-meta .article-author a:hover, body.tt-dark-style .blog-single-links a:hover, body.tt-dark-style .blog-single-links a:focus, body.tt-dark-style .blog-single-links .favorite-btn:hover, body.tt-dark-style .bs-nav-title:hover, body.tt-dark-style .bs-nav-title h4:hover, body.tt-dark-style .related-posts-item .rp-item-title:hover, body.tt-dark-style .related-posts-item .rp-item-title h4:hover, body.tt-dark-style .media-heading a:hover { color: #08c1b8; } @media (max-width: 992px) { body.tt-dark-style .blog-single-share { background-color: rgba(17, 17, 17, 0.67); } } /* pagination */ body.tt-dark-style .tt-post-pagination > a span, body.tt-dark-style .pagination > li > a, body.tt-dark-style .pagination > li > span { color: #CCC; background-color: #222; border: 1px solid #292929; } body.tt-dark-style .tt-post-pagination > a span:hover, body.tt-dark-style .tt-post-pagination > a span:focus, body.tt-dark-style .pagination-wrap a > .page-num-span:hover, body.tt-dark-style .pagination > li > a:focus, body.tt-dark-style .pagination > li > a:hover, body.tt-dark-style .pagination > li > span:focus, body.tt-dark-style .pagination > li > span:hover { color: #FFF; background-color: #313131; border-color: #313131; } body.tt-dark-style .tt-post-pagination span, body.tt-dark-style .pagination > .active > a, body.tt-dark-style .pagination > .active > a:focus, body.tt-dark-style .pagination > .active > a:hover, body.tt-dark-style .pagination > .active > span, body.tt-dark-style .pagination > .active > span:focus, body.tt-dark-style .pagination > .active > span:hover { color: #FFF; background-color: #08c1b8; border-color: #08c1b8; } /* owl carousel */ body.tt-dark-style .nav-outside-top .owl-nav .owl-prev { background-image: url(../vendor/owl-carousel/img/arrow-left-light.png); } body.tt-dark-style .nav-outside-top .owl-nav .owl-next { background-image: url(../vendor/owl-carousel/img/arrow-right-light.png); } body.tt-dark-style .nav-light .owl-nav .owl-prev, body.tt-dark-style .nav-light .owl-nav .owl-next { background-color: rgba(0, 0, 0, 0.6); } body.tt-dark-style .nav-light .owl-nav .owl-prev:hover, body.tt-dark-style .owl-carousel.nav-light .owl-nav .owl-prev:hover, body.tt-dark-style .nav-light .owl-nav .owl-next:hover, body.tt-dark-style .owl-carousel.nav-light .owl-nav .owl-next:hover { background-color: rgba(0, 0, 0, 0.4); } body.tt-dark-style .nav-light .owl-nav .owl-prev { background-image: url(../vendor/owl-carousel/img/arrow-left-light.png); } body.tt-dark-style .nav-light .owl-nav .owl-next { background-image: url(../vendor/owl-carousel/img/arrow-right-light.png); } body.tt-dark-style .owl-carousel.cc-hover-light .cc-item:before, body.tt-dark-style .owl-carousel.cc-item-hovered.cc-hover-light:hover .cc-item:before { background-color: #000; } /* buttons */ body.tt-dark-style .btn-default { color: #DDD; background-color: rgba(189, 189, 189, 0.25); } body.tt-dark-style .btn-default.active, body.tt-dark-style .btn-default.focus, body.tt-dark-style .btn-default:active, body.tt-dark-style .btn-default:focus, body.tt-dark-style .btn-default:hover, body.tt-dark-style .open > .dropdown-toggle.btn-default { color: #FFF; background-color: rgba(189, 189, 189, 0.43) } body.tt-dark-style .btn-dark-bordered { color: #CCC; border-color: #CCC; } body.tt-dark-style .btn-dark-bordered.active, body.tt-dark-style .btn-dark-bordered.focus, body.tt-dark-style .btn-dark-bordered:active, body.tt-dark-style .btn-dark-bordered:focus, body.tt-dark-style .btn-dark-bordered:hover, body.tt-dark-style .open > .dropdown-toggle.btn-dark-bordered { color: #222; background-color: #CCC; border-color: #CCC; } /* forms */ body.tt-dark-style .form-control, body.tt-dark-style select { background-color: #101010; color: #CCC; } body.tt-dark-style .form-btn-inside button { color: #CCC; } body.tt-dark-style select option { color: #CCC; } /* modal */ body.tt-dark-style .modal { background-color: rgba(0, 0, 0, 0.7); } body.tt-dark-style .modal-dialog { background-color: #111; color: #CCC; } body.tt-dark-style .modal-share .grab-link { background-color: rgba(128, 128, 128, 0.11); border: none; } body.tt-dark-style .modal-header .close { color: #CCC; } body.tt-dark-style .modal-header .tt-close-btn:before, body.tt-dark-style .modal-header .tt-close-btn:after { background-color: #FFF; } /* split box */ body.tt-dark-style .split-box-content.shifted-left, body.tt-dark-style .split-box-content.shifted-right { background-color: #0a0a0a; } /* contact */ body.tt-dark-style .contact-simple { background-color: #111; } body.tt-dark-style #contact-section .cover { background-color: rgba(0, 0, 0, 0.3) !important; } body.tt-dark-style .contact-info-wrap { background-color: rgba(0, 0, 0, 0.85); } /* accordion */ body.tt-dark-style .accordion-wrap .bg-gray-2 { background-color: #222 !important; } body.tt-dark-style .accordion-wrap .panel-title, body.tt-dark-style .accordion-wrap .panel-title > a { color: #CCC; } /* about */ body.tt-dark-style .signature .signature-dark { display: none; } body.tt-dark-style .signature .signature-light { display: block; } /* footer */ body.tt-dark-style #footer { background-color: #121212; color: #CCC; } body.tt-dark-style #footer .footer-menu > li > a { color: #BBB; } body.tt-dark-style #footer .footer-menu > li > a:hover { color: #FFF; } body.tt-dark-style #footer .btn-default { color: #DDD; background-color: rgba(189, 189, 189, 0.13); } body.tt-dark-style #footer .btn-default:hover { background-color: rgba(189, 189, 189, 0.35); color: #FFF; } body.tt-dark-style #footer .form-control { background-color: #101010; color: #CCC; } body.tt-dark-style #footer .form-btn-inside button { color: #CCC; } body.tt-dark-style #footer #footer-logo .logo-dark { display: none; } body.tt-dark-style #footer #footer-logo .logo-light { display: inline-block; } @media (max-width: 767px) { body.tt-dark-style #footer #footer-logo .logo-light { display: none; } body.tt-dark-style #footer #footer-logo .logo-dark-m { display: none; } body.tt-dark-style #footer #footer-logo .logo-light-m { display: inline-block; } } body.tt-dark-style .footer-bottom { background-color: #0a0a0a; border-top-color: rgba(128, 128, 128, 0.08); } /* demos */ body.tt-dark-style .demo-thumbnails-section { background-color: #000; } body.tt-dark-style .demo-thumbnail-btn { color: #CCC; } body.tt-dark-style .demo-thumbnail-btn:hover, body.tt-dark-style .demo-thumbnail-btn:focus { color: #08c1b8; } body.tt-dark-style .demo-thumbnail-image-wrap { border-color: #1f1f1f; } /* display element on light or dark style only (use classes "for-light-style" or "for-tt-dark-style") */ body.tt-dark-style .for-light-style { display: none; } .for-dark-style { display: none; } body.tt-dark-style .for-dark-style { display: block; } /* wp sidebar widgets */ body.tt-dark-style .widget_archive > ul > li > a, body.tt-dark-style .widget_categories > ul > li > a, body.tt-dark-style .widget_categories ul ul li a, body.tt-dark-style .widget_pages > ul > li > a, body.tt-dark-style .widget_pages ul ul li a, body.tt-dark-style .widget_meta ul li a, body.tt-dark-style .widget_recent_comments .recentcomments a, body.tt-dark-style .widget_recent_entries ul li a, body.tt-dark-style .widget_rss > ul > li > a, body.tt-dark-style .widget_nav_menu > ul > li > a, body.tt-dark-style .widget_nav_menu ul ul li a, body.tt-dark-style .widget_recent_comments .recentcomments span a { color: #EEE; } body.tt-dark-style .widget_archive > ul > li > a:hover, body.tt-dark-style .widget_categories > ul > li > a:hover, body.tt-dark-style .widget_categories ul ul li a:hover, body.tt-dark-style .widget_pages > ul > li > a:hover, body.tt-dark-style .widget_pages ul ul li a:hover, body.tt-dark-style .widget_meta ul li a:hover, body.tt-dark-style .widget_recent_comments .recentcomments a:hover, body.tt-dark-style .widget_recent_entries ul li a:hover, body.tt-dark-style .widget_rss > ul > li > a:hover, body.tt-dark-style .widget_nav_menu > ul > li > a:hover, body.tt-dark-style .widget_nav_menu ul ul li a:hover, body.tt-dark-style .widget_recent_comments .recentcomments span a:hover { color: #08c1b8; } body.tt-dark-style #wp-calendar td { border-color: #2b2b2b; } /* miscellaneous */ body.tt-dark-style #page-section .ps-page-simple { background-color: #111; } body.tt-dark-style .page-background:before { background-color: #000; opacity: .93; } body.tt-dark-style .page-content table th, body.tt-dark-style .page-content table td, body.tt-dark-style .post-content table th, body.tt-dark-style .post-content table td, body.tt-dark-style .blog-post-comments table th, body.tt-dark-style .blog-post-comments table td { border-color: #2b2b2b; } /* STYLE JOHNNYCHAOS */ body.tt-dark-style input.wpcf7-form-control, body.tt-dark-style select.wpcf7-form-control { background-color: #101010; color: #CCC; border: 1px solid rgba(148, 148, 148, 0.2); } body.tt-dark-style textarea.wpcf7-form-control { background-color: #101010; color: #CCC; border: 1px solid rgba(148, 148, 148, 0.2); } body.tt-dark-style .wpcf7-form-control:focus { border-color: #08c1b8 !important; box-shadow: none; } body.tt-dark-style input.wpcf7-form-control.wpcf7-submit { color: #FFF; background-color: #08c1b8; border-color: #08c1b8; } body.tt-dark-style input.wpcf7-form-control.wpcf7-submit:hover { color: #FFF; border-color: #08c1b8 !important; }