/* Dark Mode * * To make your theme permanently dark you can * add the class "dark" to the tag in * template.html to activate. Otherwise the dark mode * script will apply it when a visitor switches it on. * --------------------------------------------- */ body.dark { color:#C7C7C7; background:#2E2E2E; transition:all .2s ease-in-out; } body.dark::-webkit-scrollbar { background-color:#2E2E2E; } body.dark .widget, body.dark .widget-title span { background:#222; background-color:#222; } @media screen and (min-width:980px) { body.dark .first-area { background:#191919; } } body.dark .main-nav ul li.menu-item-has-children ul { transition:max-height .4s ease-in-out; } body.dark .social-nav a, body.dark .main-nav ul li a { color:#C7C7C7; } body.dark .social-nav a:hover, body.dark .main-nav ul li.menu-item-has-children:hover a, body.dark .main-nav ul li.menu-item-has-children:focus a { color:#fff; } body.dark .main-nav ul li ul.sub-menu li a:hover { background:rgba(0,0,0,.1); } body.dark .tableh1-alt body.dark .tableh1-stat, body.dark .statlink, body.dark .catrow span.cat-desc, body.dark .thumb_caption_ctime body.dark .sortorder_cell .statlink, body.dark .thumb_title, body.dark .album_stat { color:#C7C7C7; } body.dark .statlink a, body.dark .statlink a:hover, body.dark .statlink a:focus { letter-spacing:-1px; color:#212121; } body.dark .stats, body.dark .tablef { color:#999; background:#191919; } body.dark .stats strong { color:#ccc; } body.dark .catlink a { color:#fff; box-shadow:inset 0 -5px 0 #4B4B4B; &:hover, &:focus { color: #fff; box-shadow:inset 0 -15px 0 #E53512; } } body.dark .catlink b:before { background:#222222; box-shadow:7px 5px 0 #222222, 7px -5px 0 #222222; } body.dark a, body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6, body.dark .statlink h2, body.dark .tableh1, body.dark .tableh1 a:hover, body.dark .widget-title, body.dark strong, body.dark b, body.dark em, body.dark i { color:#fff; } body.dark .maintable, body.dark .tabs-table-alt, body.dark .tableh1-alt, body.dark .catrow_noalb, body.dark .catrow, body.dark .admin_menu_wrapper { background:#222; background-color:#222; } body.dark img, body.dark .image { border-color:#444444; } body.dark .tableh1, body.dark table, body.dark table td, body.dark .content-area ul li, body.dark .widget ul li, body.dark .catrow_noalb, body.dark .catrow, body.dark .table#album_sort tr td { border-color:#313131!important; } body.dark img:hover, body.dark .image:hover { border-color:#e53512; } body.dark .tableb span, body.dark .tableb.tableb_alternate span { color:#ccc; } body.dark .tableb_alternate, body.dark .tableb.tableb_alternate, body.dark .tableb_alternate_2:after { color:#ccc; background:#222!important; } body.dark .selected, body.dark .table#album_sort tr td.selected { background:#191919!important; border-color:#222!important; } body.dark .thumb_title_views { color:#fff; background:#E53512; &:before, &:after { color:#fff; } } body.dark .thumb_resolution { color:#C7C7C7; background:#191919; &:before, &:after { color:#C7C7C7; } } body.dark .thumb_caption_ctime { color:#999; box-shadow:inset 0 -6px 0 #191919; } body.dark .tableh1-alt, body.dark .tableh1-alt strong, body.dark .tableh1-alt b, body.dark .tableh1-alt:before, body.dark .tableh1-alt a { color:#ccc; } body.dark .tableh1-alt a { box-shadow:inset 0 -6px 0 #191919; } body.dark .tableh1-alt a:hover { color:#E53512; box-shadow:inset 0 -2px 0 #E53512; } body.dark .tableh1 a:hover, body.dark .tableh1 a:focus, body.dark .tableh1 .statlink a:hover, body.dark .tableh1 .statlink a:focus { color:#E53512; box-shadow:inset 0 -2px 0 #E53512; } body.dark .site-footer, body.dark .textinput, body.dark textarea, body.dark select, body.dark .tableh2, body.dark .tabs-table, body.dark .tableh1-stat, body.dark .admin_menu, body.dark .navmenu, body.dark .tableh2 { color:#999; background:#191919; border-color:#444444; } body.dark .tableh2, body.dark .tableh2 span:before, body.dark input, body.dark textarea, body.dark select { color:#E4E4E4; } body.dark .tableh2 { background:#444444; border-color:#444444; } body.dark .tabs-table { margin-bottom:25px; } body.dark .site-footer span { box-shadow: -3px 3px 0 #2E2E2E, -3px 0 0 #2E2E2E, 3px 3px 0 #2E2E2E, 3px 0 0 #2E2E2E; } @media (max-width:1299px) { body.dark .wrapper { background:#2E2E2E; } body.dark .thumbnails { background:#222; } body.dark .maintable:has(tr):has(.thumbnails) { padding:15px 25px 25px; } } @media screen and (max-width:980px) {} /* Hide Elements * * Add the corresponding class to the * tag in template.html to activate. * * Usage Examples: * * * * You can apply multiple changes to the theme * by using multiple classes at once. * * IMPORTANT: Make sure they're spaced apart like the example below. * * --------------------------------------------- */ /* Hide Site Name * * Class: hide_sitename ------------------------------ */ body.hide_sitename .mast-head .site-title { display:none; } /* Hide Site Slogan * * Class: hide_siteslogan ------------------------------ */ body.hide_siteslogan .mast-head .descript { display:none; } /* Hide Mobile Social Navigation * && Center Main Navigation * * Class: hide_socialnav ------------------------------ */ body.hide_socialnav .social-nav { display:none; } body.hide_socialnav .first-area { text-align:center; } body.hide_socialnav .first-area .main-nav { float:none; } @media screen and (max-width:980px) { body.hide_socialnav .first-area { text-align:left; } } /* Hide Master Header Color Overlay * * Class: hide_headeroverlay ------------------------------ */ body.hide_headeroverlay .mast-head .overlay { display:none; } /* Hide Site Disclaimer * * Class: hide_disclaim ------------------------------ */ body.hide_disclaim .disclaimer { display:none; } /* HOW TO CHANGE YOUR THEME COLORS: * * Place your color HEX code in the empty selector * between the : and ; symbols. * * Usage examples: * * background-color: #ffffff; * color: #ffffff; * * If nothing changes after refreshing your * browser, clear your browser cache. --------------------------------------------- */ /* Theme Accent Colors * * Color: #994B37 --------------------------------------------- */ /* Elements that use the Accent color for a background color. --------------------------------------------- */ ::-webkit-scrollbar-thumb, .site-footer span, .cpg-nav, .mast-head .overlay, .mobile-name .mobile-overlay, .site-footer .credit:hover, .button:hover, .buttonlist ul li a:hover, .button:focus, .buttonlist ul li a:focus, button:hover, button:focus, .navmenu-active, body.dark ::-webkit-scrollbar-thumb, body.dark .site-footer span, body.dark .cpg-nav, body.dark .mast-head .overlay, body.dark .mobile-name .mobile-overlay, body.dark .site-footer .credit:hover, body.dark .button:hover, body.dark .buttonlist ul li a:hover, body.dark .button:focus, body.dark .buttonlist ul li a:focus, body.dark button:hover, body.dark button:focus, body.dark .navmenu-active, body.dark .main-nav ul li a:hover, body.dark .main-nav ul li.menu-item-has-children ul, body.dark .main-nav ul li.menu-item-has-children:hover a, body.dark .main-nav ul li.menu-item-has-children:focus a, body.dark .main-nav ul li.menu-item-has-children:focus, body.dark .main-nav ul li.menu-item-has-children:hover, body.dark .main-nav ul li ul.sub-menu li a, body.dark .thumb_title_views { background-color:; } img:hover, .image:hover, body.dark .image:hover, body.dark img:hover { border-color:; } /* Elements that use the Accent color for a text color. --------------------------------------------- */ a:hover, a:focus, i, em, .tableh1 a:hover, .tableh1 a:focus, .tableh1-alt a:hover, .tableh1 .statlink a:hover, .tableh1 .statlink a:focus, .thumb_title_views, .thumb_title_views:before, .thumb_title_views:after, body.dark a:hover, body.dark a:focus, body.dark i, body.dark em, body.dark .tableh1 a:hover, body.dark .tableh1 a:focus, body.dark .tableh1-alt a:hover, body.dark .tableh1 .statlink a:hover, body.dark .tableh1 .statlink a:focus { color:; } .tableh1 a:hover, .tableh1 a:focus, .tableh1-alt a:hover, .tableh1 .statlink a:hover, .tableh1 .statlink a:focus, body.dark .tableh1 a:hover, body.dark .tableh1 a:focus, body.dark .tableh1-alt a:hover, body.dark .tableh1 .statlink a:hover, body.dark .tableh1 .statlink a:focus { box-shadow:inset 0 -2px 0 HEX_CODE; } .catlink a:focus, .catlink a:hover, body.dark .catlink a:focus, body.dark .catlink a:hover { box-shadow:inset 0 -15px 0 HEX_CODE; } /* Add your own custom color ONLY if your accent color is too light to be used as a text color against the white background. Otherwise leave this alone. --------------------------------------------- */ .thumb_title_views, .thumb_title_views:before, .thumb_title_views:after { color:; } /* Accent Text Color * * This is the color of the text for all elements * using the Accent color for a background color. * * Choose your color wisely so text is readable. --------------------------------------------- */ .site-footer span, .cpg-nav a, button:hover, button:focus, .tableh1-alt, .navmenu-active, .catlink a, .catlink a:focus, .catlink a:hover, body.dark .site-footer span, body.dark .site-footer span a, body.dark .site-footer span a:hover, body.dark .cpg-nav a, body.dark button:hover, body.dark button:focus, body.dark .navmenu-active, body.dark .catlink a:focus, body.dark .catlink a:hover, body.dark .thumb_title_views, body.dark .thumb_title_views:before, body.dark .thumb_title_views:after { color:; } /* Extra Colors * * These classes use the Accent Color * but for different elements. --------------------------------------------- */ /* Navigation Bar Colors * * The navigation bar color WILL NOT change * when using the dark theme. It's preset To * match the dark theme. The navigation bar * colors will only change on the light theme. * * The hover colors WILL CHANGE for both themes * and child menus. --------------------------------------------- */ @media screen and (min-width:980px) { /* Navigation Bar Background Color */ .first-area { background-color:; } /* Navigation Bar Text Link Color */ .main-nav ul li a, .social-nav ul li a, .main-nav ul li.menu-item-has-children span.fa { color:; } /* Navigation Bar Background and Text Color Applies to child menus too. */ .main-nav ul li a:hover, .social-nav ul li a:hover, .main-nav ul li.menu-item-has-children:hover span.fa, .main-nav ul li.menu-item-has-children ul, .main-nav ul li.menu-item-has-children:hover a, .main-nav ul li.menu-item-has-children:focus a, .main-nav ul li.menu-item-has-children:focus, .main-nav ul li.menu-item-has-children:hover, .main-nav ul li ul.sub-menu li a, body.dark .social-nav ul li a:hover, body.dark .main-nav ul li a:hover, body.dark .main-nav ul li.menu-item-has-children ul, body.dark .main-nav ul li.menu-item-has-children:hover a, body.dark .main-nav ul li.menu-item-has-children:focus a, body.dark .main-nav ul li.menu-item-has-children:focus, body.dark .main-nav ul li.menu-item-has-children:hover, body.dark .main-nav ul li ul.sub-menu li a { color:; background-color:; } .main-nav ul li.menu-item-has-children:hover span.fa { background-color:transparent; } } /* Header Image * * You can change the height and width of the * header if your header is smaller or bigger. * --------------------------------------------- */ /* Here you can input a different filename * for your new header, otherwise leave it as * it is if your file name is the same as the * one already being used. * * You can also adjust the height and width * to accomdate your custom header if yours * is wider or shorter than the default one. * * Default height: 600px * Default Width: 1300px --------------------------------------------- */ .mast-head { height:YOUR_NEW_HEIGHT; max-width:YOUR_NEW_WIDTH; background-image:url('./images/header.png'); } /* This removes the space between the header * and the top of the page. So the header image * will then stick to the top without any space. * * Default space: 25px --------------------------------------------- */ body.remove_headergap .mast-head { margin-top:0; } /* Mobile Layout Options * * You can change the height of the header * if your header is smaller or bigger. * * Maximum height: 550px --------------------------------------------- */ /* This adjusts the height of the container * * Default height: 450px --------------------------------------------- */ .mast-head { height:YOUR_NEW_HEIGHT; max-width:YOUR_NEW_WIDTH; background-image:url('./images/header.png'); } @media screen and (max-width:980px) { .mobile-name:before { background-image:url('./images/header.png'); } } body.mobile_hideoverlay .mobile-name .mobile-overlay, body.mobile_hideoverlay .mobile-name:after { display:none; }