Global CSS
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Noto+Color+Emoji&family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap'); /* ============================================================================= BASE VARIABLES ============================================================================= */ :root { --serif-font: 'Cinzel Decorative', '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'MS 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif; --sans-font: 'Overlock', 'Noto Color Emoji','游ゴシック', '游ゴシック体', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif; --color-generic-text: #333; --color-generic-block: #f5f5f5; --color-generic-shade: rgba(0,0,0,0.5); --color-generic-glare: rgba(255,255,255,0.5); --base-font-size: 1.10rem; --base-line-height: calc(var(--base-font-size) * 2); } /* ============================================================================= PRIMARY A ============================================================================= */ a, .pager > .target > a, .pager > .current, .pager > .dots, nav .side-bar ul li a:hover, .hover, .primary-color-a{ color: var(--color-1-a); } .image-box.image-box-primary .image-box-caption{ color: var(--color-1-a) !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .pager > .current, .login-status .btn.dropdown-toggle, #search-top-box form:before, nav .top-bar .navbar-toggle, .wiki-content-table > thead > tr > th, .wiki-content-table > tbody > tr > th, .wiki-content-table > tfoot > tr > th, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, #action-area .autocomplete-list ul li:hover, .btn.btn-primary, .progress-bar, .label.label-primary, .panel.panel-primary .panel-heading, .tabview-primary .yui-navset .yui-nav li a, .tabview-primary .yui-navset .yui-nav li.selected a{ background-color: var(--color-1-a); } .image-box.image-box-primary .image-box-heading{ background-color: var(--color-1-a) !important; } .image-box.image-box-primary .image-box-link:hover, .image-box.image-box-default .image-box-link:hover{ border-color: var(--color-1-a) !important; } .pager > .current, nav .side-bar ul li a:hover, .panel.panel-primary, .panel.panel-primary .panel-heading, .hover{ border-color: var(--color-1-a); } /* ============================================================================= PRIMARY B ============================================================================= */ .pager > .current{ border-bottom-color: var(--color-1-b); } .login-status .btn.dropdown-toggle, #search-top-box input.text, nav .top-bar .navbar-toggle, .btn.btn-primary, .tabview-primary .yui-navset .yui-nav li a, .tabview-primary .yui-navset .yui-nav li.selected a:hover, .tabview-primary .yui-navset .yui-nav li.selected a:focus, .tabview-primary .yui-navset .yui-content{ border-color: var(--color-1-b); } /* ============================================================================= SECONDARY A ============================================================================= */ a:hover, a:focus{ color: var(--color-2-a); } header.header-wrap, .login-status .btn.dropdown-toggle:hover, nav .top-bar .navbar-toggle:hover, nav .top-bar .navbar-toggle:focus, nav .top-bar .navbar-collapse, .btn.btn-primary:hover, .tabview-primary .yui-navset .yui-nav li a:hover, .tabview-primary .yui-navset .yui-nav li a:focus, .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{ background-color: var(--color-2-a); } .form-control:focus, input[type=text]:not(.form-control):focus, textarea:not(.form-control):focus, main .content .page-title, .image-box.image-box-primary .image-box-link:hover{ border-color: var(--color-2-a); } .form-control:focus, input[type=text]:not(.form-control):focus, textarea:not(.form-control):focus{ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px rgba(170, 170, 170, 0.25); } /* ============================================================================= SECONDARY B ============================================================================= */ .login-status .btn.dropdown-toggle:hover, #search-top-box form:hover input.text, #search-top-box input.text:focus, nav .top-bar .navbar-toggle:hover, nav .top-bar .navbar-toggle:focus, .btn.btn-primary:hover, .tabview-primary .yui-navset .yui-nav li a:hover, .tabview-primary .yui-navset .yui-nav li a:focus{ border-color: var(--color-2-b); } /* ============================================================================= LIGHT A ============================================================================= */ main .content .feature.offcolor{ background-color: var(--color-light-a); } /* ============================================================================= LIGHT B ============================================================================= */ .code.code-primary, .code-primary .code, div.code.code-primary span.line::before, .code-primary .code span.line::before, .alert.alert-primary{ border-color: var(--color-light-b); } .image-box.image-box-primary{ border-color: var(--color-light-b) !important; } div.code.code-primary span.line:hover, .code-primary .code span.line:hover{ background-color: var(--color-light-b); } /* ============================================================================= TEXT A ============================================================================= */ header.header-wrap h2, #search-top-box form:before, nav .top-bar .navbar-nav li a, nav .top-bar .navbar-collapse.collapsing ul.dropdown-menu li a, nav .top-bar .navbar-collapse.in ul.dropdown-menu li a, main .content .feature.feature-header{ color: var(--color-text-a); } #search-top-box input.text{ background: rgba(255,255,255,0); } #search-top-box form:hover input.text:focus, #search-top-box input.text:focus{ background: rgba(255,255,255,1); } nav .top-bar .navbar-toggle .icon-bar, nav .top-bar .navbar-toggle .icon-bar{ background-color: var(--color-text-a); } nav .top-bar .navbar-nav > li.dropdown > a > .caret{ border-bottom-color: var(--color-text-a); border-top-color: var(--color-text-a); } /* ============================================================================= TEXT B ============================================================================= */ header.header-wrap h1 a, nav .top-bar .navbar-brand, .wiki-content-table > thead > tr > th, .wiki-content-table > tbody > tr > th, .wiki-content-table > tfoot > tr > th, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .btn.btn-primary, .tabview-primary .yui-navset .yui-nav li a, main .content .feature-header h1{ color: var(--color-text-b); } .image-box.image-box-primary .image-box-heading{ color: var(--color-text-b) !important; } /* ============================================================================= TEXT C ============================================================================= */ .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .pager > .current, header.header-wrap h1 a:hover, header.header-wrap h1 a:focus, header.header-wrap h1 a:active, nav .top-bar .navbar-nav li a:hover, nav .top-bar .navbar-nav li a:focus, nav .top-bar .navbar-brand:hover, nav .top-bar .navbar-brand:focus, nav .top-bar .navbar-nav > .open > a, nav .top-bar .navbar-nav > .open > a:hover, nav .top-bar .navbar-nav > .open > a:focus, nav .top-bar .navbar-collapse.collapsing ul.dropdown-menu li a:hover, nav .top-bar .navbar-collapse.in ul.dropdown-menu li a:hover, nav .top-bar .navbar-collapse.collapsing ul.dropdown-menu li a:focus, nav .top-bar .navbar-collapse.in ul.dropdown-menu li a:focus, .btn.btn-primary:hover{ color: var(--color-text-c); } nav .top-bar .navbar-toggle .icon-bar, nav .top-bar .navbar-toggle .icon-bar{ background-color: var(--color-text-c); } nav .top-bar .navbar-nav li.dropdown a:hover > .caret, nav .top-bar .navbar-nav li.dropdown a:focus > .caret{ border-bottom-color: var(--color-text-c); border-top-color: var(--color-text-c); } /* ============================================================================= COLOR CLASSES ============================================================================= */ .font-primary-a{color: var(--color-1-a);} .font-primary-b{color: var(--color-1-b);} .font-secondary-a{color: var(--color-2-a);} .font-secondary-b{color: var(--color-2-b);} .font-light-a{color: var(--color-light-a);} .font-light-b{color: var(--color-light-b);} .font-text-a{color: var(--color-text-a);} .font-text-b{color: var(--color-text-b);} .font-text-c{color: var(--color-text-c);} .bg-primary-a{background-color: var(--color-1-a);} .bg-primary-b{background-color: var(--color-1-b);} .bg-primary-c{background-color: var(--color-1-c);} .bg-secondary-a{background-color: var(--color-2-a);} .bg-secondary-b{background-color: var(--color-2-b);} .bg-secondary-c{background-color: var(--color-2-c);} .bg-light-a{background-color: var(--color-light-a);} .bg-light-b{background-color: var(--color-light-b);} .bg-text-a{background-color: var(--color-text-a);} .bg-text-b{background-color: var(--color-text-b);} .bg-text-c{background-color: var(--color-text-c);} /* ============================================================================= BOOTSTRAP OVERRIDE ============================================================================= */ .row { margin-right: 0; margin-left: 0; } #page-content > .row { padding: 0.5rem; } .limit-width .row { padding-left: 0; padding-right: 0; margin-left: -0.5rem; margin-right: -0.5rem; } .main-content-wrap.col-md-12{ padding-top: 0; } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding: 0.5rem; } .tab-content>.tab-pane { padding-top: 4px; } .tab-content.version{ margin-top: -2em; margin-bottom: 0; } .media:first-child { margin-top: 0; } .media-left, .media-right, .media-body { display: table-cell; vertical-align: top; } .media-left, .media>.pull-left { padding-right: 10px; } .media-heading { margin-top: 0; margin-bottom: 5px; } .media-body h2, .caption h3 { margin-top: 0px; } .jumbotron h1, .jumbotron .h1{ background: none; } .rounded { border-radius: .25rem!important; } .nav-pills>li>a { border-radius: 0; } .nav-justified>li>a{ margin-bottom: 0; } .well{ border-radius: 0; } hr{ margin-top: 1rem; margin-bottom: 1rem; } /* ============================================================================= BASIC ============================================================================= */ body, a, img, button, .btn, .transition { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } html, body, .form-control, .dropdown-menu { font-size: var(--base-font-size); line-height: var(--base-line-height); letter-spacing: 0.05rem; } a, a:hover, a:focus { text-decoration: none; } .serif, h1, .page-title, table.repha-table th, .parallax-page-title { font-family: var(--serif-font); } .sans-serif, html, body, h2, h3, table.repha-table th.sub { font-family: var(--sans-font); } /* ============================================================================= BUTTONS - CONTAINERS ============================================================================= */ #thread-options-2.options[style="display: block;"]{ display:flex!important; } #thread-options-2.options, div[id*="post-options"].options, .buttons, .page-options-bottom, .pager{ display:flex; justify-content: space-around; } div[id*="post-options"]{ margin-top: 0.5rem; } .page-options-bottom{ max-width: 1170px; } .pager, .buttons, .page-options-bottom{ width: 100%!important; margin-left: auto; margin-right: auto; } /* ============================================================================= BUTTONS - DOUBLE BORDER ============================================================================= */ .btn, .btn-sm, .btn-lg, .btn-group-sm>.btn, .btn-group-lg>.btn, .pager > .target > a, .pager > .current, .pager > .dots { line-height: 1; font-size: 14px; } .pager > .target > a, .pager > .current, .pager > .dots{ margin: 0; padding: 4px; } .pager a{ display: block; } .btn, .pager > .target > a, .pager > .current, .pager > .dots, div.btn-asoh-wrap{ border: 1px solid var(--color-light-a); padding: 4px; } .buttons .btn, .pager span, .pager a{ width:100%; } .btn.btn-primary:hover, .pager span.target a, .pager span.dots{ color: var(--color-text-b); } .btn.btn-asoh { padding: 6px; } .btn.btn-asoh{ border: none; } div.btn-asoh-wrap:hover, .btn.btn-asoh:hover, .new-post .btn:hover, .new-post .btn:after, .options .btn:hover, .options .btn:after, .buttons .btn:hover, .buttons .btn:after, .pager span a:hover, .pager span a:after{ background-color: var(--color-light-a); } .page-options-bottom .btn:hover{ background: white; } .btn, .btn-group-lg>.btn, .btn-lg, .btn-group-lg>.btn, .btn-sm, div.btn-asoh-wrap, .new-post .btn:after, .options .btn:after, .buttons .btn:after, .page-options-bottom > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .buttons > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .pager > span:nth-child(2) > a, .pager > span:nth-child(2), .pager > span:last-child > a, .pager > span:last-child, .pager > .target > a, .pager > .current, .pager > .dots { border-radius: 3.5px; } .page-options-bottom > .btn:first-child:not(:last-child):not(.dropdown-toggle), .buttons > .btn:first-child:not(:last-child):not(.dropdown-toggle){ border-bottom-right-radius: 3.5px; border-top-right-radius: 3.5px; } .page-options-bottom > .btn:last-child:not(:first-child), .page-options-bottom > .dropdown-toggle:not(:first-child), .buttons > .btn:last-child:not(:first-child), .buttons > .dropdown-toggle:not(:first-child){ border-bottom-left-radius: 3.5px; border-top-left-radius: 3.5px; } #thread-options-2.options .btn + .btn, div[id*="post-options"] .btn + .btn .buttons .btn + .btn, .buttons input[id*="edit-"] + input[id*="edit-"], .buttons input[type*="button"] + input[type*="button"], .page-options-bottom .btn + .btn, .pager span + span, .pager span + span.dots { margin-left: 1rem; } /* Apply pseudo elements to unwrappable elements */ .new-post .btn, .options .btn, .buttons .btn, .pager > .target > a{ background-color:transparent; } .new-post .btn, .options .btn, .buttons .btn, .pager > .target > a, .pager > .current, .pager > .dots{ height: 36px; padding: 4px; padding-top: 10px; } .new-post .btn:after, .options .btn:after, .buttons .btn:after, .pager span a:after{ content: ""; display: block; height: 26px; margin-top: -20px; } /* Very fickle first application of double border */ .page-options-bottom .btn { width: 100%; z-index: 0; padding: 0.5rem; border-radius: 0.2rem!important; } .page-options-bottom .btn{ border: 1px solid white; background: none; } .page-options-bottom .btn:before{ content: ""; border: 1px solid white; display: block; background: white; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; z-index: -1; } /* Override for special buttons */ .btn.btn-primary{ border-color: var(--color-1-a); } .btn.btn-info{ border-color: var(--color-green-a); } .btn.btn-danger{ border-color: var(--color-red-a); } #edit-page-form .btn.btn-primary, #edit-page-form .btn.btn-info, #edit-page-form .btn.btn-danger, #edit-page-form .btn.btn-default, form .btn.btn-primary, form .btn.btn-default { color: var(--color-text-c); } .btn.btn-primary:hover:after, .btn.btn-primary:hover{ background-color: var(--color-1-a); color: var(--color-text-c); } form .btn.btn-primary, form .btn.btn-info, form .btn.btn-danger, form .btn.btn-default {padding-top: 4px;} #edit-page-form .btn.btn-primary, form .btn.btn-primary { background-color: var(--color-1-b); } #edit-page-form .btn.btn-info { background-color: var(--color-green-b); } #edit-page-form .btn.btn-danger, form .btn.btn-danger { background-color: var(--color-red-b); } #edit-page-form .btn.btn-default, form .btn.btn-default { background-color: var(--color-light-b); } #edit-page-form .btn.btn-primary:hover, form .btn.btn-primary:hover { background-color: var(--color-1-a); } #edit-page-form .btn.btn-info:hover { background-color: var(--color-green-a); } #edit-page-form .btn.btn-danger:hover, form .btn.btn-danger:hover { background-color: var(--color-red-a); } #edit-page-form .btn.btn-default:hover, form .btn.btn-default:hover { background-color: var(--color-light-a); } /* ============================================================================= SITE HEADER ============================================================================= */ .site-title h1, .site-title h2{ visibility:hidden; display:none; } /* ============================================================================= USER ICON ============================================================================= */ .login-status .login-status-sign-in.btn{ padding: 11px 15px 12px 15px; border-radius: 0px; } .login-status, .login-status button.btn.disabled , #search-top-box { position: relative; } .login-status, .login-status button.btn.disabled, .login-status .btn.dropdown-toggle, #search-top-box { top: 0; right: 0; left: 0; margin: 0; padding: 0px; border: 0px; } .login-status button.btn.disabled, .login-status .printuser img.small, .login-status .btn.dropdown-toggle, #search-top-box, form#search-top-box-form, #search-top-box form:before { width: 50px; } .login-status, .login-status button.btn.disabled, .login-status .printuser img.small, .login-status .btn.dropdown-toggle, #search-top-box, form#search-top-box-form, #search-top-box form:before, #search-top-box input.text { height: 50px; } .login-status, #search-top-box { float: right; } .login-status .printuser img.small, .login-status .btn.dropdown-toggle{ border-radius: 0; } .login-status .printuser img.small { max-width: 50px!important; } .login-status .login-status-sign-in.btn:before, .login-status .btn.dropdown-toggle:before{ font-family: FontAwesome; } .login-status .login-status-sign-in.btn:before, .login-status .login-status-sign-in.btn{ font-size: calc( var(--base-font-size) * 0.9); } .login-status .login-status-sign-in.btn:before{ content: "\f090 \00a0"; } .login-status .btn.dropdown-toggle:before{ font-size: calc( var(--base-font-size) * 1); content: "\f107"; } .login-status .btn.dropdown-toggle { width: 25px; padding-left: 7px; padding-top: 15px; background: none; color: var(--color-text-a); overflow: hidden; } .login-status .btn.dropdown-toggle:hover{ background-color: var(--color-1-a); color: var(--color-text-c); } #search-top-box form:before{ font-size: calc( var(--base-font-size) * 1); border-radius: 0; background: none; padding-top: 10px; } #search-top-box input.text{ border: none; border-radius: 0px!important; min-width:50px; } #search-top-box form:hover input.text:focus, #search-top-box input.text:focus{ background: none; color: white; border-bottom: 2px solid white; padding: 0 1rem; bottom: 10px; height: 32px; width: 16rem; margin-right: 50px; } .container.header, nav.top-bar-wrap{ z-index: 12; } header.header-wrap { position: relative; height: auto; background-repeat: repeat; background-position: center top; background-size: inherit; } .container.header { background-color: transparent; background-position: center center; background-repeat: no-repeat; background-size: 400px; position: absolute; top: 0px; } header.header-wrap .site-title { min-height: 0; background-color: transparent; background-position: left bottom; background-repeat: no-repeat; background-size: 400px; z-index: -1; } /* ============================================================================= NAVIGATION ============================================================================= */ .collapse.navbar-collapse.navbar-top-target{ float:right; } nav .top-bar .navbar-nav li a { padding-bottom: 15px; } nav .top-bar .navbar-nav li a:hover{ background-color: var(--color-1-a); } nav .top-bar .navbar-collapse{ background: none; } .navbar { margin-bottom: 0px; font-size: calc( var(--base-font-size) * 1); } .container.top-bar, .container-fluid.top-bar { padding-left: 0px; padding-right: 0px; } nav.top-bar-wrap, main .main-content h1,bottom-bar .footer-wrap { color: var(--color-text-c); } main .main-content h1 { background-color: var(--color-2-b); } .series-nav.nav>li>a, .costume-nav.nav>li>a { padding: 0.5rem 0.5rem; } .nav.costume-nav>li>a:focus, .nav.series-nav>li>a:focus, .nav.costume-nav>li>a:hover, .nav.series-nav>li>a:hover { text-decoration: none; background-color: rgba(0,0,0,0.5); } .series-nav img:hover, .costume-nav img:hover{ opacity: 1; } nav.top-bar-wrap{ background-color: rgba(0,0,0,0.5); } .navbar{ border-radius: 0px; } nav .top-bar .navbar-toggle{ width: 50px; height: 50px; padding: 0px; margin: 0px; border: 0px; } .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header{ margin-right: 0px; margin-left: 0px; } nav .top-bar .navbar-collapse.collapsing, nav .top-bar .navbar-collapse.in{ margin-bottom: 50px; } /* ============================================================================= CONTENT ============================================================================= */ .breadcrumbs, .forum-breadcrumbs { padding: 1em 0px; border-bottom: 1px solid #ddd; border-radius: 0px; } .breadcrumbs { position: absolute; z-index: 1; padding: 0.2rem 1rem; color: var(--color-text-c); border-bottom: none; width: 100%; background-color: rgba(0,0,0,0.2); display:none; } main > .content { background: none; box-shadow: none; position: relative; top: 0px; padding-bottom: 2rem; } main > .content, .main-content-wrap, .ex-gallery-container.container, .ex-gallery-col.col-md-3, .ex-gallery-col.col-sm-4 { padding-left: 0; padding-right: 0; } .ex-gallery-col { background-color: black; } hr { border-top: 1px dotted #eee; } main > .content .page-title { font-size: 4em; padding: 1rem 1.5rem; border-bottom: 0px; margin-top: 0.5em; margin-bottom: 0.5em; background-color: var(--color-1-a); color: var(--color-text-c); width: 100%; display:none; } main .main-content h1 { /*border-left: 6px solid var(--color-1-a);*/ padding: 1rem 1.5rem; border-bottom: 0px; font-size: calc( var(--base-font-size) * 2); margin-top: calc( var(--base-font-size) * 3.5); margin-bottom: calc( var(--base-font-size) * 1); margin-left: 0; margin-right: 0; text-align:center; } main .main-content h2 { /*border-left: 6px solid var(--color-1-a);*/ padding: 1rem 1.5rem; border-bottom: 0px; background-color: var(--color-light-a); font-size: calc( var(--base-font-size) * 1.75); margin-top: calc( var(--base-font-size) * 3); margin-bottom: calc( var(--base-font-size) * 1); text-align: center; font-variant-caps: small-caps; } main .main-content h3, .h3 { font-size: calc( var(--base-font-size) * 1.5); margin-top: calc( var(--base-font-size) * 1.5); } main .main-content .guide h3 { padding: 0.5rem; border-bottom: 0px; background-color: var(--color-light-a); } main .main-content h4, .h4 { font-size: calc( var(--base-font-size) * 1.25); margin-top: calc( var(--base-font-size) * 1.25); } main .main-content h1, h1, main .main-content h4, h4 { font-weight: 700; } main .main-content h2, h2, main .main-content h3, h3 { font-weight: 900; } .post .long .content h2 { margin-left: 0 !important; margin-right: 0 !important; } .limit-width, #message-preview-wrapper, .text-body, .profile, .toc { max-width: calc(970px + 3rem); margin-left: auto; margin-right: auto; text-align: justify; } .limit-width, #message-preview-wrapper, .text-body, .profile, .toc { padding-left: 1.5rem; padding-right: 1.5rem; } p { margin-bottom: var(--base-font-size); } p + ul { margin-top: calc(var(--base-font-size) * -1); } ul li hr { margin: 8px 0px; } ul { -webkit-padding-start: 1.125em; } dt { margin-top: 0.5em; } dd { -webkit-margin-start: 40px; } dd, dt { line-height: 2; } .collapsible-block { margin-top: 2rem; margin-bottom: 2rem; } .collapsible-block{ background-color:var(--color-generic-block); } .collapsible-block-content{ margin-top: 4px; background-color:#ffffff; } .collapsible-block, .collapsible-block-content { padding: 0.5rem; border: 1px solid var(--color-text-b); } .collapsible-block-folded > a.collapsible-block-link:before { content: "\f107 \00a0"; font-family: FontAwesome; } .collapsible-block-unfolded-link > a.collapsible-block-link:before { content: "\f106 \00a0"; font-family: FontAwesome; } .collapsible-block-unfolded-link, .collapsible-block-folded{ font-weight:400; } .page-tags{ display:none; } .pager { margin: 20px 0; } .pager > .target > a, .pager > .current, .pager > .dots { border-bottom-width: 1px; } main .content .page-options-container{ margin-top: 0; } input[type=button]:not(.btn), input[type=submit]:not(.btn), .button, .join-box a { min-width: 25%; border-bottom-width: 1px; } .join-box a { width: 100%; } input[type=text]:not(.form-control), input[type=button]:not(.btn), input[type=submit]:not(.btn), .button, .join-box a { font-size: calc( var(--base-font-size) * 1); } iframe.new-page-frame { height: 3rem; } form[name=newpage] input.text, form[name=newpage] input[type=submit] { font-size: calc( var(--base-font-size) * 1 ); } form[name=newpage] input[type=submit]{ padding: 0 1rem; border-bottom-width: 1px; } #page-info, .page-watch-options { font-size: calc( var(--base-font-size) * 0.9 ); } #page-info{ margin-top: 2rem; } /* ============================================================================= SEARCH PAGE ============================================================================= */ input.button[type="submit"] { background-color: var(--color-1-a); color: white; } .search-box input.radio { transform: scale(1.2); margin-left: 2rem; margin-right: 0.5rem; } .search-results .item { margin: 1em 0; } .search-box .checkbox+.checkbox, .radio+.radio { margin-top: 0px; } .search-results .item .preview { display: none; } /* ============================================================================= FOOTER ============================================================================= */ .bottom-bar .navbar-collapse{ padding-left:0; padding-right:0; } .bottom-bar-wrap{ font-size: calc( var(--base-font-size) * 0.8); } .bottom-bar { background-image: linear-gradient(0deg, var(--color-light-c), var(--color-light-d), var(--color-light-d) ); } .bottom-nav-heading, .bottom-nav-item { padding-bottom: var(--base-font-size); } .bottom-nav-heading { font-size: calc( var(--base-font-size) * 1.5); border-bottom: 1px solid white; text-align:center; } .bottom-nav-heading, .bottom-nav-banner { margin-bottom: var(--base-font-size); } .side-bar p { margin: 0 0 0px; } span.stat-number { float: right; } .bottom-nav-stat p { margin: 0 0 1em; } footer .footer{ padding: 0.5em 0px !important; font-size: calc( var(--base-font-size) * 0.8); } /* ============================================================================= WIKI TABLE (DEFAULT) ============================================================================= */ .wiki-content-table > thead > tr > th, .wiki-content-table > tbody > tr > th, .wiki-content-table > tfoot > tr > th, .wiki-content-table > thead > tr > td, .wiki-content-table > tbody > tr > td, .wiki-content-table > tfoot > tr > td { max-width: 40rem; vertical-align: middle; min-width: 4rem; } .wiki-content-table { margin-top: 1em; text-align: left; } .wiki-content-table > tbody > tr > th { background-color: transparent; color: var(--color-1-b); border-top: 2px solid var(--color-1-b); } .wiki-content-table > tbody > tr > th, .wiki-content-table { border-top: 2px solid var(--color-1-b); border-bottom: 2px solid var(--color-1-b); } /* ============================================================================= TABLE OF CONTENTS ============================================================================= */ table[style="margin:0; padding:0"] { width: 100%; } #toc .title { font-size: calc( var(--base-font-size) * 1.25); } #toc-action-bar { height: auto; float: right; } #toc-action-bar a { left: 0px; } #toc-action-bar a:first-child::after, #toc-action-bar a:last-child::after{ font-size: calc( var(--base-font-size) * 1); } #toc-action-bar a:first-child::after{ content: "\f106";} #toc-action-bar a:last-child::after{ content: "\f107"; } #toc { padding: 0.5rem; border: none; } /* #toc .title:before, a.collapsible-block-link:before { font-family: FontAwesome; margin-right: 0.5em;} #toc .title:before{ content: "\f00b "; } */ div[style="margin-left: 1em;"] { border-top: 1px solid #ccc; margin-top: 0.5rem; padding-top: 0.5rem; } /* ============================================================================= RECENT CHANGES ============================================================================= */ .site-changes-box table.form { border-collapse: separate; -webkit-border-vertical-spacing: 4px; } .site-changes-box table.form{ margin-bottom: 1em; } .site-changes-box table tr{ background-color: var(--color-generic-block); } .site-changes-box table td{ padding: 4px; } .site-changes-box table tr:first-child td:first-child { border-top-left-radius: 4px; } .site-changes-box table tr:first-child td:last-child { border-top-right-radius: 4px; } .site-changes-box table tr:last-child td:first-child { border-bottom-left-radius: 4px; } .site-changes-box table tr:last-child td:last-child { border-bottom-right-radius: 4px; } .changes-list-item table { width: 100% !important; } .site-changes-box form { margin-bottom: 4em; } .site-changes-box .buttons, .site-changes-box .buttons input, select { width: 100%; } .changes-list-item .comments{ font-size: calc( var(--base-font-size) * 0.9); margin: 0px 8px 0px; padding: 4px; } /* ============================================================================= EDIT AREA LAYOUTS ============================================================================= */ #page-options-bottom{ margin-bottom: 0; } #page-options-bottom-2 { margin-top: 1rem; } #edit-sections-button, #edit-append-button, #watchers-button{ display: none!important; } #edit-meta-button{ margin-left: 0!important; } #action-area { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } a.action-area-close { width: 100%; margin-bottom: 1em; float: none; } #action-area .page-source, #edit-page-textarea, .code, kbd, pre, samp { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: calc( var(--base-font-size) * 0.9); } #lock-info { background-color: var(--color-green-b); color: var(--color--light-a); border: 1px solid var(--color-1-c); } input[type=text]:not(.form-control){ width: 100%; } form[name=newpage] input[type=submit]:not(.btn) { margin: 0em 0px; min-width: 8%; } .radio, .checkbox, input[type=radio], input[type=checkbox]{ margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; vertical-align:middle; } input[type=radio], input[type=checkbox], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{ position: relative; -webkit-transform: scale(2); transform: scale(2); margin-left: 0.3rem; margin-right: 0.5rem; bottom: 0.3rem; } .checkbox label, .radio label { min-height: 20px; padding-left: 0; } .radio-inline, .checkbox-inline { vertical-align:bottom; } .edit-description{ text-align:right; padding-top:24px; } .form-value { display:block; } .form-horizontal .radio-inline, .form-horizontal .control-label{ padding-top: 6px; } .form-group { padding: 1em 0px; margin-bottom: 0px; } .form-horizontal .form-group { margin-right: 0px; margin-left: 0px; } div[class*="divider-blank"]{ margin-bottom: 0.5em; } a[onclick*="renameFile"], a[onclick*="moveFile"], a[onclick*="deleteFile"] { font-size: 0px; padding-left: 1.4rem; } a[onclick*="renameFile"]:before, a[onclick*="moveFile"]:before, a[onclick*="deleteFile"]:before { font-family: "FontAwesome"; font-size: calc( var(--base-font-size) * 1.2); } a[onclick*="renameFile"]:before { content: '\f040 '; } a[onclick*="moveFile"]:before { content: '\f047 '; } a[onclick*="deleteFile"]:before { content: '\f1f8 '; } /* ============================================================================= OWINDOW RELATED ============================================================================= */ .owindow { top: 2.5%!important; background-color: rgba(0,0,0,0.5); border: 1px solid var(--color-generic-block); box-shadow: none!important; } .owindow .button-bar { padding: 0.5em 1em; text-transform: capitalize; } .owindow .button-bar a { border: 1px solid var(--color-generic-block); border-radius: 0.2rem; padding: 0.5rem; } .owindow .content{ padding: 0.5rem 1rem !important; } .owindow .title{ margin: 0 !important; line-height: var(--base-line-height); } .owindow .modal-header{ padding: 1rem; } #owindow-1 img[style*="background-color: #FFF"], #owindow-1 table>tbody>tr>td.active { background: none !important; } #owindow-1 div[style="margin-top: 10px"], #owindow-1 img + h1 + table tr:nth-child(1), #owindow-1 img + h1 + table tr:nth-child(3), #owindow-1 img + h1 + table tr:nth-child(4), #owindow-1 img + h1 + table tr:nth-child(5) { display: none; } #owindow-1 h1{ font-family: var(--sans-font); font-size: 0; margin-top: 0; padding-top: 0; } .owindow h1 em, #owindow-1 img + h1{ font-size: calc(var(--base-font-size) * 2); } .owindow h1 em { font-family: monospace; display: block; } #owindow-1 img[style*="float:left"]{ float:none!important; padding:0; display: inline-block; padding-bottom: 0.5rem; padding-right: 0.5rem; } #owindow-1 img + h1 { display: inline-block; vertical-align: middle; max-width: 84%; } /* ============================================================================= TABLE ============================================================================= */ table.page-files{ background-color: rgba(0,0,0,0.5); } .table-striped>tbody>tr:nth-of-type(odd){ background-color: rgba(255,255,255,.2); } table.repha-table{ border-collapse: separate; border-spacing: 2px; font-size: calc( var(--base-font-size) * 1); width: 100%; } table.repha-table, table.repha-table td, table.repha-table th{ border-radius: 4px; } table.repha-table td, table.repha-table th{ padding: 4px; } table.repha-table td.center { text-align:center; } table.repha-table th{ text-align: center; font-size: calc( var(--base-font-size) * 2); } table.repha-table th{ border:0px; } table.repha-table th.sub{ font-size: calc( var(--base-font-size) * 1); color: #333; width: 12%; } table.navbox { margin-top: 3em; } table.navbox th{ background-color: var(--color-light-a); font-weight: 400; } table.table tr.head td{ font-weight: 600; } /* ============================================================================= FORUM BASE ============================================================================= */ table.table, .forum-group, .thread-container .post, form#new-thread-form, textarea#post-edit, table.form, input#edit-page-title { width: 100%!important; } .forum-group table tr.head td, .forum-category-box table tr.head td, .forum-group div.head .title, .forum-group table td.name .title, .forum-category-box table td.name .title{ font-weight: 400; } .forum-group div.head, .forum-group table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ padding: 0.5rem 1rem; } .forum-group div.head .title{ font-family: var(--serif-font); font-size: calc(var(--base-font-size) * 2); } .forum-group, .thread-container .post{ padding: 0.5rem; } .thread-container .post .long .content{ padding: 0.5rem 1rem 1rem 1rem; } .forum-group, .thread-container .post, .thread-container .post .long{ border: 1px solid } .asoh-table table, .forum-group table { border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; } .asoh-table table{ border-top: 1px solid; } .asoh-table table, .forum-group table, .forum-category-box table, .thread-container .post .long { background-image: linear-gradient(0deg, var(--color-light-c), var(--color-light-d), var(--color-dark-a) ); } .forum-group div.head{ border: 0px; border-top: 1px solid; border-left: 1px solid; border-right: 1px solid; } .asoh-table table, .forum-group, .forum-group div.head, .forum-group table, .forum-category-box table, .thread-container .post, .thread-container .post .long { border-color: var(--color-light-b); } .asoh-table table, .forum-group table, .forum-category-box table{ border-collapse: separate; border-spacing: 0px; } .forum-group table tr.head td, .forum-category-box table tr.head td{ font-size: calc(var(--base-font-size) * 1.2); } .forum-group div.head, .forum-group table td { /*border-color: var(--color-light-b);*/ } .forum-category-box table.table>tbody>tr>td{ border-top:none; line-height: 2; } hr, .asoh-table table td, .asoh-table table > tbody > tr > th, .forum-group table td, .forum-category-box table td, .thread-container .post .head, .thread-container .post .long .content { border:none; border-image-source: linear-gradient(90deg, var(--color-light-d), var(--color-light-b), var(--color-light-d) ); border-image-slice: 1; border-bottom: 1px solid; } .forum-group table tr.head td{ border-top: 1px solid; } .thread-container .post{ border-radius: 0; margin-bottom: 2rem; } .thread-container .post .long{ padding-bottom: 1rem; } .forum-group div.head, .thread-container .post .head{ background-color: var(--color-1-c); } .asoh-table table > tbody > tr > th, .forum-group div.head, .forum-category-box table td.name .description{ color: var(--color-light-a); } .forum-group table tr.head td, .forum-group table tr, .forum-category-box table tr.head td, .forum-category-box table tr, .forum-group table tr:nth-child(2n+1), .forum-category-box table tr:nth-child(2n+1) { background-color: transparent; } .forum-category-box .description-block, .forum-new-thread-box .description, .forum-thread-box .description-block, .forum-thread-box .action-area{ background-color: var(--color-1-c); } .forum-group table td.name .description { color: var(--color-text-c); } .asoh-table table tr th, .forum-group table tr.head, .forum-category-box table tr.head{ background-color: var(--color-2-c); } .forum-group table tr.head td:first-child, .forum-category-box table tr.head td:first-child{ text-align: left; } .forum-group{ margin: 2rem 0; } .forum-thread-box .description-block, .forum-thread-box .options { margin-left: 2em; margin-right: 2em; } .forum-thread-box .options { margin-top: 1rem; margin-bottom: 2rem; } .forum-thread-box .options + .options { margin-top: -1.5rem; } .forum-thread-box .action-area{ padding: 2rem; margin: 2rem 2rem; } .forum-thread-box .action-area h2{ margin-top: 0; padding-top:0; } .forum-thread-box .action-area table.form td { width: 50%; } .forum-thread-box .action-area table.form td[class*="col"]{ padding: 0; } .forum-thread-box .action-area table.form td label { margin-bottom: 0; } .forum-thread-box .action-area table.form td:first-child { text-align: right; padding-right: 0.5rem; } .forum-thread-box .action-area table.form td:nth-child(2) { padding-left: 0.5rem; } .forum-thread-box .action-area form.form-horizontal{ min-height: 8rem; } .forum-category-box .options, .thread-container .post .long .head .title, .thread-container .post .long .head .options, .description-block .statistics, .description.well .statistics, .forum-thread-box .description-block .head, div#edit-post-form-container span#np-editor-title, div#edit-post-form-container input#np-title, div#edit-post-form-container .post .long .options, a[onclick*="deletePost"], a[onclick*="showHistory"], a[onclick*="foldAll"], a[onclick*="unfoldAll"]{ display:none; } /* Default Button Mimic */ a[onclick*="closePreview"] { line-height: 1.5; border-radius: 3px; text-align: center; white-space: nowrap; vertical-align: middle; display:inline-block; padding: 3px 15px; } a[href*="forum:new-thread"], a[onclick*="closePreview"], a[onclick*="newPost"], a[href*="forum:new-thread"], a[onclick*="closePreview"], .forum-thread-box .options a { width:100%; } a[onclick*="closePreview"]:hover { text-decoration:none; } .thread-container .post .head{ padding: 0; } .thread-container .post h1{ text-align: left; padding: 0; font-family: var(--sans-font); } .thread-container .post .long .changes{ font-size: calc(var(--base-font-size) * 0.9); color: var(--color-text-a); margin-bottom: 0; padding-top: 0.5rem; } .thread-container .post .long .changes a{ color: var(--color-1-a); } .thread-container .post .long .options{ float:none; padding: 0; margin-top: 0.5rem; width: 50%; margin-left: auto; } .thread-container .post .long .changes, .thread-container .post .long .options{ padding-right: 1rem; padding-left: 1rem; } div#edit-post-form-container .thread-container .post{ margin-bottom: 0px; } div#edit-post-form-container{ padding: 10px; background-image: linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%); } div#edit-post-form-container h1 { border: 0px; margin-top:0px; } .post .long .head .info, .post .long .head .info .printuser img.small, .post .long .head .info span.odate{ height: 4rem; } .post .long .head .info .printuser, .post .long .head .info .printuser img.small, .post .long .head .info span.odate { font-size: calc(var(--base-font-size) * 1); float: left; } .post .long .head .info .printuser a{ display: table-cell; vertical-align: middle; } .post .long .head .info span.odate{ margin-left: 0.5rem; vertical-align: middle; padding-top: 16px; } .post .long .head .info .printuser img.small { width: auto; background: none!important; padding: 0; padding-right: 1rem } table td.posts, table td.threads{ width: 2rem!important; } table td.started{ width: 15rem!important; } table td.last{ width: 15rem!important; } .forum-category-box tr td:nth-child(2) { display: none; } .printuser img.small { height: 24px; width: 24px; padding: 0 0 0 0; } .member-table span.odate { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-left: -59px; } .printuser, .last .odate + a:before, .odate { font-size: calc(var(--base-font-size) * 0.9); } .forum-start-box + p, .forum-start-box + p + p{ text-align: center!important; } /* ============================================================================= MEMBER ITEM ICON ============================================================================= */ .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ vertical-align: middle!important; } .hover-item span.hover-item { display: inline; position: absolute; margin-left: 42px; margin-top: -64px; height: auto; width: calc(100% - 50px); color: #fff; padding: 10px; font-size: calc( var(--base-font-size) * 1); z-index: -2; opacity: 0; border-radius: 4px; background-color: rgba(0,0,0,0.8); transition: opacity .5s; } .hover-item:hover span.hover-item { z-index: 10; opacity: 1; } .hover-item:hover span.hover-item span.hover-item { position: fixed; margin: auto; height: auto; width: auto; border: none; padding: 0; } .hover-item:hover { background-color: transparent; text-decoration: underline; } .panel-fiction, .member-table span.odate, .member-table span.printuser.avatarhover, span.item-icon-light, a.item-icon { display: inline-block; text-align:left; width:100%; } .member-table span.odate, span.item-icon-light, a.item-icon { background-color:#f5f5f5; } span.item-icon-light, a.item-icon { border-radius: 6px; } img.item-icon{ max-height: 64px; float:left; display:block; } .member-table span.printuser.avatarhover, img.item-icon, span.item-icon { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .member-table span.printuser.avatarhover, img.item-icon { background-color: #ffffff; } .member-table table { width: 100%; } .member-table table td { padding: 4px 0px!important; } .member-table span.odate, .member-table span.printuser.avatarhover { padding: 4px; } span.item-icon{ margin-left:8px; height:64px; line-height: 64px; width:100%; } img.item-icon-large{ width: 128px; display:inline-block; } div.hover-item-container{ text-decoration:none; margin-bottom: 1em; } span.item-icon.light{ line-height: 100%; } .hover-item span.hover-item.light{ margin-left: 26px; margin-top: -1.4em; /*width: calc(100% - 65px);*/ padding: 4px; } div.hover-item-container.light p{ margin-bottom: 0px; } /* ============================================================================= CARD AND PANEL ============================================================================= */ img.card-modal { max-width: 172px; max-height: 256px; } img.card-roster { max-width: 128px; max-height: 191px; margin-top: -64px; } img.card-pills { max-width: 93px !important; } img.card-altmedia { /*max-width: 209px;*/ } .card-display{ margin-top:8px; margin-bottom:24px; height: 192px; } span.card-name, span.card-full-name { position: absolute; display: inline; z-index: 8; width: 128px; padding: 2px; bottom: 23px; margin-left: -64px; } span.card-full-name, span.card-title { overflow: hidden; height: 0; opacity: 0; font-size: calc( var(--base-font-size) * 0.9); } .card-title { color:#ffffff; } .card-area:hover span.card-name { opacity: 0; } .card-area:hover span.card-full-name, .card-area:hover span.card-title { height: auto; opacity: 1; } a.panel.panel-fiction:hover, a.item-icon:hover { opacity: 0.5; text-decoration:none; } img.panel-card{ height: 191px; margin-left: calc(50% - 64px); } img.panel-card.panel-master-image{ height: auto; margin-left: 0px; width:100%; } .panel-default>.panel-heading, .panel { border: none; } .panel{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .panel-master-heading{ padding: 0px 0px; background-size: cover; background-position: center center; padding-top: 56.25%; } .panel-body { padding: 0.5rem; padding-left: 0; } .panel-master-body{ margin-top: -13px; min-height: 70px; } .panel-fiction-label, .panel-fiction-sub-label{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; border-left: 0.4rem solid; padding-left: 0.6rem; } .panel-fiction-label{ font-size: calc( var(--base-font-size) * 0.9); } .panel-fiction-sub-label{ font-size: calc( var(--base-font-size) * 0.8); margin-top: -0.5rem; } /* ============================================================================= SADIE ROSTER ============================================================================= */ .sadie-column { position: relative; /*clear: both;*/ /*max-width: 1000px;*/ list-style: none; text-align: center; /*padding: 0.5rem;*/ } /* Common style */ .sadie-column sadie-figure, .sadie-column .sadie-figure { position: relative; float: left; overflow: hidden; /*margin: 10px 1%;*/ /*min-width: 320px;*/ /*max-width: 480px;*/ /*max-height: 360px;*/ width: 100%; /*height: auto;*/ /*background: var(--color-generic-block);*/ text-align: center; cursor: pointer; } .sadie-column sadie-figure img, .sadie-column .sadie-figure img { position: relative; display: block; min-height: 100%; width: 100%; opacity: 1; } .sadie-column sadie-figure sadie-figcaption, .sadie-column .sadie-figure .sadie-figcaption { /*padding: 2em;*/ color: #fff; /*text-transform: uppercase;*/ font-size: calc( var(--base-font-size) * 1.1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sadie-column sadie-figure sadie-figcaption::before, .sadie-column sadie-figure sadie-figcaption::after, .sadie-column .sadie-figure .sadie-figcaption::before, .sadie-column .sadie-figure .sadie-figcaption::after { pointer-events: none; } .sadie-column sadie-figure sadie-figcaption, .sadie-column sadie-figure sadie-figcaption > a, .sadie-column .sadie-figure .sadie-figcaption, .sadie-column .sadie-figure .sadie-figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .sadie-column sadie-figure sadie-figcaption > a, .sadie-column .sadie-figure .sadie-figcaption > a { z-index: 5; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .sadie-column sadie-figure h2 .sadie-column .sadie-figure .sadie-heading { /*word-spacing: -0.15em;*/ font-weight: 300; } .sadie-column sadie-figure h2 span { font-weight: 800; } .sadie-column sadie-figure h2, .sadie-column sadie-figure p, .sadie-column .sadie-figure .sadie-heading, .sadie-column .sadie-figure .sadie-caption { margin: 0; } .sadie-column sadie-figure p, .sadie-column .sadie-figure .sadie-caption { /*letter-spacing: 1px;*/ font-size: calc( var(--base-font-size) * 0.9); } /*---------------*/ /***** Sadie *****/ /*---------------*/ sadie-figure.sadie-container sadie-figcaption::before, .sadie-figure.sadie-container .sadie-figcaption::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; /*background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%);*/ /*background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%);*/ background: radial-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%); content: ''; opacity: 0; /*-webkit-transform: translate3d(0,50%,0);*/ /*transform: translate3d(0,50%,0);*/ } sadie-figure.sadie-container h2, .sadie-figure.sadie-container .sadie-heading { position: absolute; /*top: 87.5%;*/ bottom: 5%; left: 10%; width: 80%; /*color: #484c61;*/ -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: all 0.4s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); text-shadow: 0px 1px 2px black; border-bottom: 2px solid white; line-height: 1; } sadie-figure.sadie-container sadie-figcaption::before, sadie-figure.sadie-container p, .sadie-figure.sadie-container .sadie-figcaption::before, .sadie-figure.sadie-container .sadie-caption { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: all 0.4s; } sadie-figure.sadie-container p, .sadie-figure.sadie-container .sadie-caption { position: absolute; bottom: 0; left: 0; padding: 0.5rem; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } sadie-figure.sadie-container:hover h2, .sadie-figure.sadie-container:hover .sadie-heading { color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-16px,0); transform: translate3d(0,-50%,0) translate3d(0,-16px,0); padding-bottom: 0.5rem; } sadie-figure.sadie-container:hover sadie-figcaption::before , sadie-figure.sadie-container:hover p, .sadie-figure.sadie-container:hover .sadie-figcaption::before , .sadie-figure.sadie-container:hover .sadie-caption { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* ============================================================================= CAST ROSTER (UNUSED) ============================================================================= */ .enable-none {display:none;} .enable-yes > .enable-none {display:inline!important;} .cast-roster-middle {max-height:192px; line-height: 1;} .cast-roster-middle-top {height:96px; padding-left:1em; padding-top: 0.5em;} .cast-roster-middle-bottom {height:95px; padding:1em; background-color: #f5f5f5; font-size:80%;} .cast-roster-line-container {margin-top:5px;} .cast-roster-line {border-left:6px solid #43731d; padding-left: 4px; font-size:108%;} .cast-roster-image {max-width:100%;} .cast-roster-category {font-size:90%; margin-bottom: 1rem;} .cast-roster-middle p {margin-bottom: 0px;} .cast-roster-name {font-size: 160%;} .cast-roster-panel-small {margin-bottom: 6px} .cast-roster-panel-main {margin-bottom: 1em;} .cast-roster-category, .cast-roster-middle, .cast-roster-middle-bottom {width:100%;} .cast-roster-extra {padding: 0px 4px; height: 18px;} .cast-roster-card {border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .cast-roster-card-container, .cast-roster-middle, .cast-roster-middle-bottom, .cast-roster-line-container, .cast-roster-name-container, .cast-roster-category, .cast-roster-line-container {float:left;} @media (max-width: 767px){ /* Small */ .cast-roster-image-container{float:left;width:100%;} .cast-roster-image{border-top-right-radius: 4px; border-top-left-radius: 4px;width:100%;} } @media (min-width: 768px) and (max-width: 991px){ /* Small */ .cast-roster-image-container{float:left;width:100%;} .cast-roster-image{border-top-right-radius: 4px; border-top-left-radius: 4px;width:100%;} } @media (min-width: 992px) and (max-width: 1199px){ /* Medium */ .cast-roster-middle{max-width:482px;} .cast-roster-image-container{float:right;} .cast-roster-image{max-height:191px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;} } @media (min-width: 1200px){ /* Large */ .cast-roster-middle{max-width:calc(100% - 128px - 340px);} .cast-roster-image-container{float:right;} .cast-roster-image{max-height:191px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;} } /* ============================================================================= COMMANDS ============================================================================= */ .article-image, .block-article { padding-top: 1em; padding-bottom: 1.5em; } .char-tabs{ margin-top: 1em; } img.altmedia, img.fiction-responsive, img.card-responsive { width:100%; height: auto; } img.front-avatar { max-width: 200px; margin-top: 24px; } img.portrait-bio { float:right; height: 110px; margin: 0 0 5px 10px; } img.char-gallery { } img.border-shadow{ box-shadow: 0px 0px 10px 2px rgba(0,0,0,.3); } img.border-shadow:hover{ box-shadow: 0px 0px 10px 2px rgba(0,0,0,.6); } .figure { margin-top: 1rem; margin-bottom: 1rem; } .figure-caption{ font-size: calc( var(--base-font-size) * 0.9); } span.italic{ font-style: italic; } span.main-article { padding-left:2em; } .float-right { float: right; } /* ============================================================================= OVERRIDING COMMAND ============================================================================= */ .disable-1, .enable-0 { display: none !important; visibility: hidden !important; } .disable-0, .enable-1 { display: block !important; visibility: visible !important; } .invisible { visibility: hidden; } .negate-p > p { margin-bottom: 0px; } /* ============================================================================= VERSION 5 COMMANDS ============================================================================= */ .w-100 {width:100%;} .w-50 {width:50%;} .w-25 {width:25%;} .bg-cover{background-size: cover;} .bg-contain{background-size: contain;} .bg-no-repeat{background-repeat: no-repeat;} .bg-center{background-position: center;} .bg-white{background-color: white;} .padding-0{padding:0;} .padding-half{padding: 0.5rem;} .padding-1{padding: 1rem;} .padding-t-half{padding-top:0.5rem;} .padding-b-half{padding-bottom:0.5rem;} .padding-t-0{padding-top:0;} .padding-b-0{padding-bottom:0;} .padding-t-1{padding-top:1rem;} .padding-b-1{padding-bottom:1rem;} .padding-side-half{padding-left: 0.5rem ; padding-right: 0.5rem; } .padding-side-1{padding-left: 1rem; padding-right: 1rem;} .margin-0{margin:0;} .margin-half{margin: 0.5rem;} .margin-t-half{margin-top:0.5rem;} .margin-b-half{margin-bottom:0.5rem;} .margin-t-0{margin-top:0;} .margin-b-0{margin-bottom:0;} .margin-t-1{margin-top:1rem;} .margin-b-1{margin-bottom:1rem;} .margin-t-2{margin-top:2rem;} .margin-b-2{margin-bottom:2rem;} .filter-gray-100{filter:grayscale(100%);} .limit-height{ height: calc(100vw/16*9); } .char-profile-image{ background-position: center center; } .sub-heading{ display:block; font-size: calc( var(--base-font-size) * 1.4); } .scroll-height{ overflow-y: scroll; height: calc( 100vw/16*9 - calc( var(--base-font-size) ) * 6.2 ); padding-right: 0.5rem; padding-left: 1rem; } .garden-profile.scroll-height{ height: calc( 100vw/16*9 - calc( var(--base-font-size) ) * 7.8); } .content-border-top, .content-border-bottom{ height: calc( var(--base-font-size) * 3 ); background-image: url('http://asoh.xyz/local--files/gallery:css/ovd-type-e.png'); margin-left: auto; margin-right: auto; } .scroll-height + .content-border-bottom{ margin-top: calc( var(--base-font-size) * 0.5 ); } .content-border-top-image{} .content-border-bottom-image{} .content-border-top-image, .content-border-bottom-image{display:none;} .content-border-top{transform: rotateX(180deg);} .content-border-top + h1{margin-top: 0;} .ex-gallery-container{ } .ex-gallery-image{ width:100%; } .ex-gallery-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(0,0,0,0.5); } .ex-gallery-item:hover .ex-gallery-overlay { opacity: 1; } .ex-gallery-caption { color: white; font-size: calc( var(--base-font-size) * 1.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; width: 90%; } .ex-gallery-caption p { margin: 0 0 0 0; } .download-container{ margin-top: 1rem; } .center-pills { display: flex; justify-content: center; } .costume-pills img{ max-width: 128px !important; } .series-pills img{ max-width: 128px !important; } .series-pills img, .costume-pills img{ filter: grayscale(100%); } .series-pills:hover img, .costume-pills:hover img, .active.series-pills img, .active.costume-pills img{ filter: grayscale(0%); } .tab-content>.tab-pane{ padding-top: 0px; } .extended-gallery { background-position: center center; background-repeat: no-repeat; background-size: cover; padding-top: 14.0625%; } .ex-gallery-image{ width:100%; } .image-gallery { background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 0px; /*padding-top: 56.25%;*/ background-color: black; } .image-gallery.position-right { background-position: right center; } .negate-margin-top h1{ margin-top: 0!important; } .negate-margin-bottom h1{ margin-bottom: 0!important; } h1+.another-stage-extended-gallery.container{ margin-top: -10px; } .video-gallery{ line-height: 0; } .video-gallery { margin-left: 0; margin-right: 0; } .video-gallery.negate-p{ margin-bottom: -13px!important; } .splash { /*margin-top: -62px;*/ } .parallax { background-attachment: fixed; background-position: center 0px; background-repeat: repeat; } .parallax a { color: var(--color-1-a); } .parallax a:hover { color: var(--color-2-a); } .parallax + p, .parallax + .limit-width > p:first-of-type, .top-spacing { margin-top: 2rem; } .parallax + p::first-letter, .parallax + .limit-width > p:first-of-type::first-letter{ float: left; font-family: var(--serif-font); font-size: calc( var(--base-font-size) * 4); text-transform: none; font-variant: none; margin-bottom: -2.5rem; margin-top: -1rem; margin-right: 0.5rem } .parallax + p::first-line, .parallax + .limit-width > p:first-of-type::first-line{ font-variant: small-caps; /*text-transform: lowercase;*/ font-size: calc( var(--base-font-size) * 1.5); font-weight: bold; line-height: 1.6; } .parallax-overlay { width: 100%; background-color: black; opacity: 0.3; position: absolute; } .parallax-title-container { display: table-cell; width: 100vw; position: relative; vertical-align: middle; } .parallax, .parallax-overlay, .parallax-title-container{ height: calc(50vh - 62px); } .parallax-page-title, .parallax-page-sub-title, .parallax-extra-author, .parallax-breadcrumb { z-index: 8; width: 100%; text-align: center; color: var(--color-text-c); text-shadow: 0px 1px 2px black; } .parallax-page-title { font-size: calc( var(--base-font-size) * 1.8 + 2.5vw ); line-height: 1.2; margin-top: 2rem; margin-bottom: 2rem; font-weight: 700; } .parallax-breadcrumb, .parallax-extra-author, .parallax-page-sub-title { } .parallax-page-sub-title { margin-top: -2rem; font-size: calc(var(--base-font-size) * 1.25); } .parallax-breadcrumb, .parallax-extra-author { position: absolute; } .parallax-extra-author { margin-top: 1rem; } .parallax-breadcrumb, .parallax-extra-author ul{ list-style: none; text-align: center; font-size: calc( var(--base-font-size) * 0.9); } .full.splash, .full.splash .parallax-overlay, .full.splash .parallax-title-container{ height: calc(100vh - 62px); } .half.splash, .half.splash .parallax-overlay, .half.splash .parallax-title-container{ height: calc(25vh - 62px); } .no-bottom-margin{ margin-bottom:0px; } .formula.table, .formula.text, .formula.none{ margin-bottom: 0px; padding-top: 2rem; padding-bottom: 2rem; } .formula .collapsible-block{ margin-top: 0px; margin-bottom: 0px; } .formula-container .collapsible-block { margin-top: 0; margin-bottom: 0; } .partial-collapse div.collapse[aria-expanded="false"], .partial-collapse div.collapse:not(.in) { display: block; overflow: hidden; } .partial-collapse div.collapse[aria-expanded="false"], .partial-collapse div.collapse:not(.in), .partial-collapse div.collapsing[aria-expanded="false"] { height: calc(var(--base-font-size) * 2 * 10) !important; } .button-container{ font-family: FontAwesome; font-size: calc(var(--base-font-size) * 2.5); text-align:center; line-height: 0.5; margin-bottom: var(--base-font-size); } .button-container a.collapsed:after {content: '\f107';} .button-container a:not(.collapsed):after {content: '\f106';} main .main-content .list-item-article h3{ margin-top:0; } .list-item-article .last-update{ font-size: calc(var(--base-font-size) * 0.9); color: var(--color-text-a); } .footnote { font-size:calc( var(--base-font-size) * 0.8 ); } .footnote table, .footnote table > tbody > tr > td{ border: 0; } .footnote table > tbody > tr > td{ vertical-align: top; max-width: 100%; min-width: 0; } @media (min-width: 768px){ .costume-pills.enable-1, .series-pills.enable-1 { display:table-cell !important; } } @media (max-width: 767px) { .ex-gallery-col.col-xs-6 { height: calc(100vw / 2 / 16 * 9 - 2px); } #search-top-box { display:none; } } @media (min-width: 768px) { .ex-gallery-col.col-sm-4 { height: calc(100vw / 3 / 16 * 9 - 2px); } } @media (min-width: 992px){ .ex-gallery-col.col-md-3 { height: calc(100vw / 4 / 16 * 9 - 2px); } } /* ============================================================================= UNUSED ============================================================================= */ /* a[href*="forum:new-thread"]:before, .post .long .head .info span.odate:before, a[onclick*="PostOptions"]:before, a[onclick*="editPost"]:before, a[onclick*="showPermalink"]:before, a[onclick*="newPost"]:before, a[onclick*="closePreview"]:before { font-family: FontAwesome; margin-right: 0.25em; } .post .long .head .info span.odate:before{ content: ' \f017 '; } a[onclick*="PostOptions"]:before{ content: '\f013 '; } a[onclick*="editPost"]:before{ content: '\f044 '; } a[onclick*="showPermalink"]:before{ content: '\f0c1 '; } a[href*="forum:new-thread"]:before, a[onclick*="newPost"]:before{ content: '\f1d9 '; } a[onclick*="closePreview"]:before{ content: '\f00d '; } #thread-toggle-options:before, a[onclick*="editThreadMeta"]:before, a[onclick*="editThreadStickiness"]:before, a[onclick*="editThreadBlock"]:before, a[onclick*="moveThread"]:before { font-family: FontAwesome; } #thread-toggle-options, a[onclick*="editThreadMeta"], a[onclick*="editThreadStickiness"], a[onclick*="editThreadBlock"], a[onclick*="moveThread"] { padding-right: 0px; padding-left: 0.7rem; max-width: 42px; } #thread-toggle-options:before{ content: "\f013"; } a[onclick*="editThreadMeta"]:before { content: "\f044"; } a[onclick*="editThreadStickiness"]:before{ content: "\f05a"; } a[onclick*="editThreadBlock"]:before{ content: "\f023"; } a[onclick*="moveThread"]:before{ content: "\f047"; } .forum-group table td.last, .forum-category-box table td.started, .forum-category-box table td.last, #thread-toggle-options, a[onclick*="editThreadMeta"], a[onclick*="editThreadStickiness"], a[onclick*="editThreadBlock"], a[onclick*="moveThread"] { font-size: calc(var(--base-font-size) * 0); } .forum-group table td.name .title, .forum-category-box table td.name .title, .forum-group table td.name .description, .forum-category-box table td.name .description, #thread-toggle-options:before, a[onclick*="editThreadMeta"]:before, a[onclick*="editThreadStickiness"]:before, a[onclick*="editThreadBlock"]:before, a[onclick*="moveThread"]:before { font-size: calc(var(--base-font-size) * 1); } .last .odate + a:before { font-family: FontAwesome; content: "\f14c"; } .odate:after { content: " "; } */ /* ============================================================================= CSS END ============================================================================= */