/* ============================================================ GirlsDelta - Black Mode & Member Level Badges ============================================================ */ /* ---------------------------------------------------------- Member Level Badges (always active) ---------------------------------------------------------- */ .member-badge { display: inline-block; padding: 3px 12px; border-radius: 3px; font-size: 0.85em; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle; } .member-badge-ppv { background: #eee; color: #666; border: 1px solid #ddd; } .member-badge-regular { background: #e8f4fd; color: #2980b9; border: 1px solid #b3d4f0; } .member-badge-silver { background: linear-gradient(135deg, #e8e8e8 0%, #c8c8c8 100%); color: #555; border: 1px solid #b0b0b0; } .member-badge-gold { background: linear-gradient(135deg, #ffe066 0%, #c8a000 100%); color: #5a3e00; border: 1px solid #b8941e; } .member-badge-platinum { background: linear-gradient(135deg, #e8e8f8 0%, #b8b8e0 100%); color: #4040a0; border: 1px solid #9090d0; } .member-badge-black { background: linear-gradient(135deg, #1a1a1a 0%, #333 100%); color: #d4af37; border: 1px solid #d4af37; } /* ---------------------------------------------------------- Black Mode Toggle Section (always dark by design) ---------------------------------------------------------- */ .black-mode-section { margin: 20px 0 5px; padding: 16px 20px; border: 1px solid #d4af37; border-radius: 4px; background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); color: #e0e0e0; } .black-mode-section .bm-title { margin: 0 0 6px; color: #d4af37; font-size: 1.05em; font-weight: 700; } .black-mode-section .bm-desc { margin: 0 0 14px; font-size: 0.88em; color: #999; line-height: 1.5; } .bm-toggle-label { display: inline-flex; align-items: center; cursor: pointer; gap: 10px; user-select: none; } .bm-toggle-label input[type="checkbox"] { display: none; } .bm-slider { width: 48px; height: 26px; background: #333; border-radius: 13px; position: relative; transition: background .25s; display: inline-block; flex-shrink: 0; } .bm-slider::after { content: ''; width: 20px; height: 20px; background: #666; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform .25s, background .25s; } .bm-toggle-label input:checked ~ .bm-slider { background: #3d3000; } .bm-toggle-label input:checked ~ .bm-slider::after { transform: translateX(22px); background: #d4af37; } .bm-toggle-text { color: #ccc; font-size: 0.95em; } .bm-toggle-label input:checked ~ .bm-toggle-text { color: #d4af37; font-weight: 700; } /* ---------------------------------------------------------- BLACK MODE — active when ---------------------------------------------------------- */ /* Base */ html.black-mode, html.black-mode body { background-color: #0a0a0a; color: #e0e0e0; } /* Links */ html.black-mode a { color: #5bbfef; } html.black-mode a:hover { color: #80d0ff; } /* Header */ html.black-mode .header { background-color: #0d0d0d; border-bottom: 1px solid #1e1e1e; } html.black-mode .header h1 { color: #777; text-shadow: none; } /* Mobile header */ html.black-mode #mobile-header { background: #111; box-shadow: 0 1px 3px rgba(0,0,0,.8); } /* Navigation */ html.black-mode #navigation { background: #111; height: 78px; } html.black-mode #navigation .nav { background: #111; box-shadow: 0 1px 4px rgba(0,0,0,.9); } html.black-mode #navigation .nav .nav-bar > li { border-top-color: #111; } html.black-mode #navigation .nav .nav-bar > li a { color: #aaa; } html.black-mode #navigation .nav .nav-bar > li.active { background: #1a1a1a; border-top-color: #d4af37; } html.black-mode #navigation .nav .nav-bar > li:hover { border-top-color: #d4af37; } html.black-mode #navigation .nav .nav-bar > li.active a, html.black-mode #navigation .nav .nav-bar > li:hover a { color: #d4af37; } html.black-mode #navigation .nav .nav-bar > li:hover ul li a { color: #bbb; } html.black-mode #navigation .nav .nav-bar > li ul { background: #1a1a1a; border-top-color: #d4af37; box-shadow: 0 2px 8px rgba(0,0,0,.9); } html.black-mode #navigation .nav .nav-bar > li ul li a:hover { background: #252525; color: #d4af37; } /* Card */ html.black-mode .card { background: #141414; box-shadow: 0 1px 4px rgba(0,0,0,.7); } /* jQuery UI tabs */ html.black-mode .ui-widget { color: #e0e0e0; } html.black-mode .ui-widget-content { background: #141414; border-color: #252525; color: #e0e0e0; } html.black-mode .ui-widget-header { background: #1a1a1a; border-color: #252525; color: #ccc; } html.black-mode .ui-state-default, html.black-mode .ui-widget-content .ui-state-default { background: #202020; border-color: #2e2e2e; color: #999; } html.black-mode .ui-state-default a, html.black-mode .ui-state-default a:link, html.black-mode .ui-state-default a:visited { color: #999; } html.black-mode .ui-state-active, html.black-mode .ui-widget-content .ui-state-active { background: #141414; border-color: #d4af37; border-bottom-color: #141414; color: #d4af37; } html.black-mode .ui-state-active a, html.black-mode .ui-state-active a:link, html.black-mode .ui-state-active a:hover { color: #d4af37; } html.black-mode .ui-state-hover, html.black-mode .ui-widget-content .ui-state-hover { background: #1e1e1e; border-color: #8a7030; color: #ccc; } html.black-mode .ui-state-hover a { color: #ccc; } html.black-mode .ui-tabs .ui-tabs-nav { background: #1a1a1a; border-color: #252525; padding: 0 4px; } html.black-mode .ui-tabs .ui-tabs-nav li.ui-tabs-active { border-bottom-color: #141414; margin-bottom: -1px; } /* Section headings */ html.black-mode h2.search-head, html.black-mode h3.search-head { color: #ccc; } /* Tables */ html.black-mode .mypage-table { border-color: #2a2a2a; } html.black-mode .mypage-table tr td, html.black-mode .mypage-table tr th { border-color: #2a2a2a; color: #ddd; } html.black-mode .mypage-table tr th { background-color: #1e1e1e; } html.black-mode .mypage-table tr:nth-child(odd) { background-color: #181818; } html.black-mode .mypage-table tr:nth-child(even) td { background-color: #141414; } html.black-mode .mypage-table tr td a.prod { color: #5bbfef; } html.black-mode .mypage-table tr td a.prod:hover { color: #80d0ff; } html.black-mode .mypage-table tr td a.btn, html.black-mode .mypage-table tr th a.btn { background: #222; border-color: #333; color: #bbb; box-shadow: none; } html.black-mode .mypage-table tr td a.btn:hover { background: #2a2a2a; color: #d4af37; border-color: #d4af37; } html.black-mode .mypage-table input[type="submit"] { background-color: #2a3a2a; color: #8fd48f; } html.black-mode .mypage-table input[type="submit"]:hover { background-color: #334433; } /* Forms */ html.black-mode select { background: #1e1e1e; color: #ddd; border: 1px solid #333; } html.black-mode input[type="text"], html.black-mode input[type="password"], html.black-mode textarea { background: #1e1e1e; color: #ddd; border-color: #333; } /* Strong red */ html.black-mode .strong-red { color: #ff7777; } /* Search results (update-list, product-list etc.) */ html.black-mode .search-title a { background-color: transparent !important; color: #5bbfef !important; } html.black-mode .search-title a:hover { color: #80d0ff !important; } html.black-mode .search-meta-info b a { color: #ccc !important; } html.black-mode .search-meta-info b a:hover { color: #5bbfef !important; } html.black-mode .search-meta-info span { color: #666; } html.black-mode .search-review b a { color: #ccc !important; } html.black-mode .search-result { border-bottom: 1px solid #1e1e1e; } /* Footer */ html.black-mode footer { background: #111; } html.black-mode .footer-top { color: #999; } html.black-mode .footer-top .ttl { color: #aaa; } html.black-mode .foot-tags li a { color: #777; } html.black-mode .foot-tags li a:hover { color: #d4af37; text-decoration: none; } html.black-mode .footer-bottom { background: #0d0d0d; } /* News (f-twitter) — match transaction text color #ddd */ html.black-mode .f-twitter dd { color: #ddd; } html.black-mode .f-twitter dd a { color: #5bbfef; } html.black-mode .f-twitter dd a span { color: #ddd; } html.black-mode .copy-right { color: #555; } html.black-mode .copy-right a { color: #5bbfef; } /* jQuery UI dialog (login popup) */ html.black-mode .ui-dialog { background: #1a1a1a; border-color: #333; color: #e0e0e0; } html.black-mode .ui-dialog .ui-dialog-titlebar { background: #222; border-color: #333; color: #e0e0e0; } html.black-mode .ui-dialog .ui-dialog-titlebar .ui-dialog-title { color: #e0e0e0; } html.black-mode .ui-dialog .ui-dialog-content { background: #1a1a1a; color: #e0e0e0; } html.black-mode .ui-dialog .ui-widget-overlay { background: #000; opacity: .8; } html.black-mode #loginPop { background: #1a1a1a; color: #e0e0e0; } html.black-mode #loginPop .loginTitle { color: #bbb; } html.black-mode #loginPop input[type="text"], html.black-mode #loginPop input[type="password"] { background: #111; color: #e0e0e0; border: 1px solid #333; } html.black-mode #loginPop .submitLogin { background: #222; color: #d4af37; border: 1px solid #d4af37; } html.black-mode #loginPop .submitLogin:hover { background: #2a2a2a; } html.black-mode #loginPop .closeDialog, html.black-mode #loginPop .remind, html.black-mode #loginPop .regist { color: #5bbfef; } /* Sidr mobile menu */ html.black-mode .sidr { background: #0d0d0d; border-right-color: #222; } html.black-mode .sidr ul li a { color: #aaa; } html.black-mode .sidr ul li a:hover, html.black-mode .sidr ul li.sidr-class-active a { color: #d4af37; } html.black-mode .sidr ul li { border-bottom-color: #1e1e1e; } /* Prod-navi bar (page title + breadcrumb area below nav) */ html.black-mode .prod-navi { background: #111; border-top-color: #1e1e1e; border-bottom-color: #1e1e1e; } html.black-mode .prod-navi .prod-name { color: #ccc; } html.black-mode .breadcrumbs { color: #666; } html.black-mode .breadcrumb a, html.black-mode .breadcrumb span { color: #5bbfef; } html.black-mode .breadcrumb a:hover { color: #80d0ff; } html.black-mode #head-breadcrumb, html.black-mode #foot-breadcrumb { color: #666; } /* Search badges (ブラック会員用作品 etc.) */ html.black-mode .search-badge { background: #1e1e1e; border-color: #3a3a3a; color: #aaa; } /* Logo — swap to dark-mode version (white text, blue triangle unchanged) */ html.black-mode .header img[src*="logo.png"], html.black-mode #navigation .logo img[src*="logo.png"] { content: url('/images/logo-dark.png'); filter: none; } /* Footer arrow tags */ html.black-mode .foot-categ li a, html.black-mode .foot-model li a { background: #1e1e1e !important; color: #888 !important; } html.black-mode .foot-tags li a:after { border-left-color: #1e1e1e !important; } html.black-mode .foot-categ li a:hover { background: #0d7ab0 !important; color: #fff !important; } html.black-mode .foot-categ li a:hover:after { border-left-color: #0d7ab0 !important; } html.black-mode .foot-model li a:hover { background: #b04080 !important; color: #fff !important; } html.black-mode .foot-model li a:hover:after { border-left-color: #b04080 !important; } /* ============================================================ Top page (index / layout_new) ============================================================ */ /* Video carousel background */ html.black-mode .vc-wrap { background: #0a0a0a !important; } html.black-mode .vc-swiper .swiper-slide { background: #0a0a0a !important; } html.black-mode .vc-swiper .swiper-slide-active { box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 8px rgba(255,255,255,0) !important; } html.black-mode .vc-swiper .swiper-slide-active:hover { box-shadow: 0 0 0 4px #0a0a0a, 0 0 0 8px rgba(212,175,55,0.5) !important; } html.black-mode .vc-overlay { background: linear-gradient( to bottom, transparent 50%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.90) 100% ) !important; } /* Product / mod-box thumbnails */ html.black-mode .mod-box { background: #141414; border-color: #252525; } html.black-mode .mod-box .overlay { background: rgba(0,0,0,0.6); } html.black-mode .overlay h4, html.black-mode .overlay p { color: #ddd; } /* Feed / card containers */ html.black-mode .feed-item-container { background: transparent; } /* Ads area */ html.black-mode .ads, html.black-mode .index-ad { background: transparent; } /* Related products */ html.black-mode .related-prod .name { color: #ccc; } html.black-mode .related-prod .name span.model a { color: #5bbfef; } html.black-mode .related-prod .review { color: #777; } /* Swiper navigation buttons */ html.black-mode .swiper-button-prev, html.black-mode .swiper-button-next { color: #d4af37; } html.black-mode .swiper-pagination-bullet { background: #888; } html.black-mode .swiper-pagination-bullet-active { background: #d4af37; } /* ============================================================ Product page: Download tables (画像ダウンロード / 動画ダウンロード) ============================================================ */ /* Photo:X / Movie:X ラベルセル (青いボックス) */ html.black-mode table.download th { background: #1a3d7c !important; } html.black-mode table.download th:after { border-left-color: #1a3d7c !important; } @-moz-document url-prefix() { html.black-mode table.download th::after { border-left-color: #1a3d7c !important; } } /* ダウンロードセル (白/薄グレーを暗くする) */ html.black-mode table.download td { background: #1a1a1a !important; color: #ccc; } html.black-mode table.download td.head { background: transparent !important; color: #888; } /* ダウンロードリンク */ html.black-mode table.download td a { color: #5bbfef !important; } html.black-mode table.download td a i { color: #888 !important; } html.black-mode table.download td a i.text-danger { color: #e05555 !important; } html.black-mode table.download td span.wait { color: #666; } html.black-mode table.download td span.wait i { color: #555; } /* 画像タブ内のサブタブ (サムネイル / ダウンロード切替) */ html.black-mode h3.product-image-tab a { color: #777; } html.black-mode h3.product-tab-select a, html.black-mode h3.product-image-tab.product-tab-select a { color: #e0e0e0 !important; } html.black-mode h3.product-tab-un-select a:hover { color: #5bbfef !important; } /* 作品詳細リスト内テキスト */ html.black-mode .product-detail ul li h4 { color: #bbb !important; } html.black-mode .product-detail ul li p { color: #888 !important; } html.black-mode .product-detail ul li p.caution { color: #e05555 !important; } html.black-mode .product-detail ul li p a { color: #5bbfef !important; } /* ============================================================ Product page: Streaming / Video playback (動画再生) ============================================================ */ /* 解像度セレクタ (#reso-switch) - インラインstyleを上書き */ html.black-mode #reso-switch { background: #111d35 !important; color: #e0e0e0 !important; } /* 解像度ラベルボタン */ html.black-mode label.label { color: #aaa !important; border-color: #333 !important; background: #1a1a2e !important; } html.black-mode input[type=radio].resolutuion_radio:checked + label.label { background: #0d7ab0 !important; color: #fff !important; border-color: #0d7ab0 !important; } /* スライダーエリア (.slider) - インラインstyleを上書き */ html.black-mode .slider { background: #141414 !important; } /* ストリーミングリンク */ html.black-mode .streamVideoLink { color: #5bbfef !important; } html.black-mode .streamVideoLink:hover { color: #80d0ff !important; } html.black-mode .streamNone { color: #555 !important; } /* ============================================================ Product page: jQuery UI tabs bar ============================================================ */ html.black-mode #product-tabs .ui-tabs-nav li a { color: #aaa; } html.black-mode #product-tabs .ui-tabs-nav li.ui-tabs-active a { color: #e0e0e0; } html.black-mode #product-tabs .ui-tabs-nav li:hover a { color: #5bbfef; } /* ============================================================ Slick carousel arrows (.slick-prev / .slick-next) font-family: slick を必ず維持してグリフ崩れを防ぐ ============================================================ */ html.black-mode .slick-prev:before, html.black-mode .slick-next:before { font-family: slick !important; color: #d4af37 !important; text-shadow: none !important; opacity: 0.85; } html.black-mode .slick-prev:hover:before, html.black-mode .slick-next:hover:before, html.black-mode .slick-prev:focus:before, html.black-mode .slick-next:focus:before { color: #f5d060 !important; opacity: 1; } html.black-mode .slick-prev.slick-disabled:before, html.black-mode .slick-next.slick-disabled:before { opacity: 0.25; }