/* General */ .dialog { border: 1px solid; display: block; background-color: inherit; } .dialog:not(#qr):not(#thread-watcher):not(#header-bar) { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } #qr, #thread-watcher { box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.25); } .captcha-img, .field { background-color: #fff; border: 1px solid #ccc; -moz-box-sizing: border-box; box-sizing: border-box; color: #333; font: 13px sans-serif; outline: none; transition: color 0.25s, border-color 0.25s; } .field::-moz-placeholder { color: #aaa; font-size: 13px; opacity: 1; } .captch-img:hover, .field:hover { border-color: #999; } .field:hover, .field:focus, .field.focus { color: #000; } .field[disabled] { background-color: #f2f2f2; color: #888; } .field::-webkit-search-decoration { display: none; } .move { cursor: move; overflow: hidden; } label { cursor: pointer; } a[href='javascript:;'] { text-decoration: none; } .warning { color: red; } :root.sw-yotsuba #boardNavDesktop, :root.sw-yotsuba #boardNavMobile { display: none !important; } :root.hide-bottom-board-list $site$boardListBottom { display: none; } body.hasDropDownNav { margin-top: 5px; } :root:not(.keyboard-focus) a { outline: none; } .painted { border-radius: 3px; padding: 0px 2px; } [hidden] { display: none !important; } /* 4chan style fixes */ /* overrides 4chan CSS on div.opContainer, div.op */ :root.sw-yotsuba .opContainer, :root.sw-yotsuba .op { display: block; overflow: visible; } :root.sw-yotsuba .reply > .file > .fileText { margin: 0 20px; } :root.sw-yotsuba #arc-list span.quote { color: #789922; } :root.sw-yotsuba .fileText a { unicode-bidi: -moz-isolate; unicode-bidi: -webkit-isolate; } :root.sw-yotsuba #g-recaptcha { min-height: 78px; height: auto; } :root.sw-yotsuba:not(.js-enabled) #postForm { display: table; } :root.sw-yotsuba #captchaContainerAlt td:nth-child(2) { display: table-cell !important; } :root.sw-yotsuba canvas#tegaki-canvas { background: none; } /* Disable obnoxious captcha fade-in. */ :root.sw-yotsuba > body > div:last-of-type { transition: none !important; } /* Fix captcha scrolling to top of page. */ :root.sw-yotsuba > body > div[style*=' top: -10000px;'] { visibility: hidden !important; } /* Make long filenames wrap properly: https://github.com/ccd0/4chan-x/issues/1082 */ :root.sw-yotsuba .post > .file { /* currently nonstandard but may be added: https://lists.w3.org/Archives/Public/www-style/2016Mar/0352.html, https://bugzilla.mozilla.org/show_bug.cgi?id=1296042 */ word-break: break-word; } :root.sw-yotsuba:not(.ua-webkit):not(.ua-blink) .fileText { word-wrap: break-word; max-width: calc(100vw - 90px); } :root.sw-yotsuba > body.is_catalog .thread > a > img { display: inline-block; } /* Links to NSFW boards */ :root.sw-yotsuba .nwsb { display: inline; } :root.sw-yotsuba .fileText { max-width: auto; white-space: normal; } /* Ads */ :root.sw-yotsuba .ad-cnt > *, :root.sw-yotsuba .adg-rects > *, :root.sw-yotsuba .bsa-cnt { height: auto !important; } :root.sw-yotsuba:not(.ads-loaded) hr.abovePostForm, :root.sw-yotsuba:not(.ads-loaded) .adg-rects > hr, :root.sw-yotsuba #adg-ol + hr, :root.sw-yotsuba .danbo-slot:empty { display: none; } :root.sw-yotsuba .adg-rects { margin: 0; font-size: 0; } :root.sw-yotsuba div.center[style] { display: none !important; } /* Tinyboard / vichan conflicts */ #menu > .hide-thread-link { width: auto; height: auto; overflow: visible; background-image: none; } #menu label.entry { display: block; } #fourchanx-settings label { display: inline; } .intro a[href='javascript:;'], #menu a { margin: 0; } .gal-buttons.gal-buttons a { font-size: inherit; } :root.sw-tinyboard.fixed.top-header:not(.autohide) .boardlist, :root.sw-tinyboard.fixed.top-header:not(.autohide) .bar.top { position: static; } :root.sw-tinyboard.fixed.top-header:not(.autohide) div.pages.top { top: auto; bottom: 0; } :root.sw-tinyboard.fixed.top-header.autohide .boardlist, :root.sw-tinyboard.fixed.top-header.autohide .bar.top { z-index: 3; } /* Tinyboard site style conflicts */ :root[data-host='fufufu.moe'].fixed.top-header:not(.autohide) div.pages.top { top: 26px; bottom: auto; } :root[data-host='merorin.com'].fixed.top-header:not(.autohide) span.settings { top: 26px; } :root[data-host='fufufu.moe']:not(.fixed) #header-bar { margin-top: 38px; } :root[data-host='lainchan.org']:not(.fixed) #header-bar { margin-top: 17px; } :root[data-host='smuglo.li']:not(.fixed) #header-bar { margin-top: 8px; } /* Anti-autoplay */ audio.controls-added { display: block; margin: auto; white-space: normal; } :root.anti-autoplay div.embed { position: static; width: auto; height: auto; text-align: center; } :root.anti-autoplay .autoplay-removed { visibility: visible !important; min-width: 640px; min-height: 360px; } /* fixed, z-index */ #overlay, #qp, #ihover, #navlinks, .fixed #header-bar, :root.float #updater, :root.float #thread-stats, #qr { position: fixed; } #overlay { z-index: 999; } #qp, #ihover { z-index: 60; } #menu, .gal-buttons { z-index: 50; } #updater, #thread-stats { z-index: 40; } :root.fixed #header-bar, #notifications { z-index: 35; } #a-gallery { z-index: 30; } #navlinks { z-index: 25; } #qr { z-index: 20; } #embedding { z-index: 11; } :root.fixed-watcher #thread-watcher { z-index: 10; } :root.fixed:not(.gallery-open) #header-bar:not(:hover) { z-index: 8; } #thread-watcher { z-index: 5; } /* Header */ .fixed.top-header body { padding-top: 2em; } .fixed.bottom-header body { padding-bottom: 2em; } .fixed #header-bar { right: 0; left: 0; padding: 3px 4px 4px; font-size: 12px; } .fixed.top-header #header-bar { top: 0; } .fixed.bottom-header #header-bar { bottom: 0; } #header-bar { border-width: 0; transition: all 0.1s 0.05s ease-in-out; } :root.fixed #header-bar { box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.2); } :root.centered-links #shortcuts { width: 300px; text-align: right; } :root.centered-links #header-bar { text-align: center; } #custom-board-list { font-size: 13px; vertical-align: middle; } #full-board-list { vertical-align: middle; } :root.centered-links #custom-board-list { position: relative; left: 150px; } .fixed.top-header #header-bar { border-bottom-width: 1px; } .fixed.bottom-header #header-bar { box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.15); border-top-width: 1px; } .fixed.bottom-header #header-bar .menu-button i { border-top: none; border-bottom: 6px solid; } .fixed #header-bar.autohide:not(:hover) { box-shadow: none; transition: all 0.8s 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .fixed.top-header #header-bar.autohide:not(:hover) { margin-bottom: -1em; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .fixed.bottom-header #header-bar.autohide:not(:hover) { -webkit-transform: translateY(100%); transform: translateY(100%); } #scroll-marker { left: 0; right: 0; height: 10px; position: absolute; } #header-bar:not(.autohide) #scroll-marker { pointer-events: none; } #header-bar #scroll-marker { display: none; } .fixed #header-bar #scroll-marker { display: block; } .fixed.top-header #header-bar #scroll-marker { top: 100%; } .fixed.bottom-header #header-bar #scroll-marker { bottom: 100%; } #board-list a, #shortcuts a:not(.entry) { text-decoration: none; padding: 1px; } #shortcuts:empty { display: none; } .brackets-wrap::before { content: '\00a0['; } .brackets-wrap::after { content: ']\00a0'; } .dead-thread, .disabled:not(.replies-quoting-you) { opacity: 0.45; } #shortcuts { float: right; } :root.autohiding-scrollbar #shortcuts { margin-right: 12px; } .shortcut { margin-left: 3px; vertical-align: middle; } :root.shortcut-icons .native-settings { font-size: 0; color: transparent; display: inline-block; vertical-align: top; height: 12px; width: 14px; background: url('//s.4cdn.org/image/favicon.ico') 0px -1px no-repeat; } #navbotright, #navtopright { display: none; } #toggleMsgBtn { display: none !important; } .current, :root.sw-yotsuba div#boardNavDesktopFoot a.current { font-weight: bold; } @media (min-width: 1300px) { :root.sw-yotsuba.fixed:not(.centered-links) #header-bar { white-space: nowrap; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } :root.sw-yotsuba.fixed:not(.centered-links) #board-list { -webkit-flex: auto; flex: auto; } :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list { display: -webkit-flex; display: flex; } :root.sw-yotsuba.fixed:not(.centered-links) .hide-board-list-container { -webkit-flex: none; flex: none; margin-right: 5px; } :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list > .boardList { -webkit-flex: auto; flex: auto; display: -webkit-flex; display: flex; width: 0px; /* XXX Fixes Edge not shrinking the board list below default size when needed */ } :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list > .boardList > a, :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list > .boardList > span:not(.space):not(.spacer) { -webkit-flex: none; flex: none; padding: 0.17em; margin: -0.17em -0.32em; } :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list > .boardList > span { pointer-events: none; } :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list > .boardList > span.space { -webkit-flex: 0 0.63 0.63em; flex: 0 0.63 0.63em; } :root.sw-yotsuba.fixed:not(.centered-links) #full-board-list > .boardList > span.spacer { -webkit-flex: 0 0.38 0.38em; flex: 0 0.38 0.38em; } :root.sw-yotsuba.fixed:not(.centered-links) #shortcuts { float: initial; -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } } /* 4chan X link brackets */ .brackets-wrap::before { content: '['; } .brackets-wrap::after { content: ']'; } /* Notifications */ #notifications { position: fixed; top: 0; height: 0; text-align: center; right: 0; left: 0; visibility: visible; } #notifications:empty { display: none; } :root.fixed.top-header:not(.gallery-open) #header-bar #notifications, :root.fixed.top-header #header-bar.autohide #notifications { position: absolute; top: 100%; } .notification { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); border-radius: 2px; margin: 1px auto; width: 550px; max-width: 100%; position: relative; transition: all 0.25s ease-in-out; } .notification.error { background-color: hsla(0, 100%, 38%, 0.9); } .notification.warning { background-color: hsla(36, 100%, 38%, 0.9); } .notification.info { background-color: hsla(200, 100%, 38%, 0.9); } .notification.success { background-color: hsla(104, 100%, 38%, 0.9); } .notification a { color: white; } .notification > .close { padding: 7px; top: 0px; right: 5px; position: absolute; } .notification > .fa-times::before { font-size: 11px !important; } .message { -moz-box-sizing: border-box; box-sizing: border-box; padding: 6px 20px; max-height: 200px; width: 100%; overflow: auto; white-space: pre-line; } .message a { text-decoration: underline; } :root.tainted .report-error { display: none; } /* Settings */ :root.fourchan-x body { -moz-box-sizing: border-box; box-sizing: border-box; } #overlay { background-color: rgba(0, 0, 0, 0.5); display: -webkit-flex; display: flex; top: 0; left: 0; height: 100%; width: 100%; } #fourchanx-settings { -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); height: 600px; max-height: 100%; width: 900px; max-width: 100%; margin: auto; padding: 5px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } #fourchanx-settings > nav { padding: 2px 2px 8px; display: -webkit-flex; display: flex; } #fourchanx-settings > nav a { text-decoration: underline; } #fourchanx-settings > nav a.close { text-decoration: none; padding: 0 2px; margin: 0; } .section-container { -webkit-flex: 1; flex: 1; position: relative; overflow: auto; padding-right: 5px; overscroll-behavior: contain; } .sections-list { -webkit-flex: 1; flex: 1; } .export, .import, .reset { cursor: pointer; text-decoration: none !important; } .tab-selected { font-weight: 700; } .section-sauce ul, .section-advanced ul { list-style: none; margin: 0; } .section-sauce ul { padding: 8px; } .section-advanced ul { padding: 0px; } .section-sauce li, .section-advanced li { padding-left: 4px; } .section-main ul { margin: 0; padding: 0 0 0 16px; } .section-main li { white-space: pre-line; list-style: disc; } .section-main li:not(:first-of-type) { margin-top: 4px; } .section-main label { text-decoration: underline; } div[data-checked='false'] > .suboption-list { display: none; } .suboption-list { position: relative; } .suboption-list::before { content: ''; display: inline-block; position: absolute; left: 0.7em; width: 0; height: 100%; border-left: 1px solid; } .suboption-list > div { position: relative; padding-left: 1.4em; } .suboption-list > div::before { content: ''; display: inline-block; position: absolute; left: 0.7em; width: 0.7em; height: 0.6em; border-left: 1px solid; border-bottom: 1px solid; } #fourchanx-settings .section-main p { margin: 0.5em 0 0; } .section-filter ul { padding: 0; } .section-filter li { margin: 10px 40px; list-style: disc; } .section-filter textarea { height: 500px; } .section-main a, .section-filter a, .section-advanced a { text-decoration: underline; } #sauce-doc-expand:not(:checked) ~ #sauce-doc { max-height: 130px; overflow: auto; } #sauce-doc > label { float: right; margin: 0 5px; } /* XXX for OneeChan */ #sauce-doc-expand + .riceCheck { display: none; } .section-sauce textarea { height: 430px; } .section-advanced .field[name='boardnav'] { width: 100%; } .section-advanced textarea { height: 150px; } .section-advanced textarea[name='archiveLists'], .section-advanced textarea[name='externalCatalogURLs'], .section-advanced textarea[name='knownBanners'] { height: 75px; } .section-advanced .archive-cell { min-width: 160px; text-align: center; } .section-advanced #archive-board-select { position: absolute; } .section-advanced .note { font-size: 0.8em; font-style: italic; margin-left: 10px; } .section-advanced .note code { font-style: normal; font-size: 11px; } .favicon-preview > img { vertical-align: middle; } .favicon-preview > img:nth-of-type(3n + 1) { margin-left: 4px; } .section-keybinds .field { font-family: monospace; } #fourchanx-settings fieldset { border: 1px solid; border-radius: 3px; padding: 0.35em 0.625em 0.75em; margin: 0px 2px; } #fourchanx-settings legend { font-weight: 700; color: inherit; } #fourchanx-settings textarea { font-family: monospace; width: 100%; resize: vertical; } #fourchanx-settings code { color: #000; background-color: #fff; padding: 0 2px; } #fourchanx-settings th { text-align: center; font-weight: bold; } #fourchanx-settings p { margin: 1em 0px; } #fourchanx-settings table { margin: auto; } /* Index */ :root.index-loading .navLinks:not(.json-index), :root.index-loading .board:not(.json-index), :root.index-loading .pagelist:not(.json-index), :root.infinite-mode .pagelist, :root.all-pages-mode .pagelist, :root.catalog-mode .pagelist, :root:not(.catalog-mode) .indexlink, :root.catalog-mode .cataloglink, :root:not(.catalog-mode) #hidden-label, :root:not(.catalog-mode) #index-size { display: none; } #index-search { padding-right: 1.5em; width: 100px; transition: color 0.25s, border-color 0.25s, width 0.25s; } #index-search:focus, #index-search[data-searching] { width: 200px; } #index-search-clear { color: gray; display: inline-block; position: relative; left: -1em; width: 0; } /* ``::-webkit-*'' selectors break selector lists on Firefox. */ #index-search::-webkit-search-cancel-button { display: none; } #index-search:not([data-searching]) + #index-search-clear { display: none; } #index-options { float: right; } #lastlong-options { display: inline-block; vertical-align: middle; height: 28px; margin: -14px 0; } #lastlong-options > input { padding: 0; border: 0 !important; text-align: center; background: transparent; display: block; font-size: 12px; height: 12px; width: 30px; margin: 1px 0; } .summary { text-decoration: none; } /* Catalog */ :root.catalog-mode .board { text-align: center; } .catalog-thread { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid transparent; word-wrap: break-word; vertical-align: top; position: relative; } /* overrides 4chan CSS on div.thread */ .catalog-thread.catalog-thread { margin: 2px; } .catalog-small > .catalog-thread { width: 165px; height: 320px; } .catalog-large > .catalog-thread { width: 270px; height: 410px; } :root.catalog-hover-expand .catalog-thread:hover { z-index: 1; } .catalog-container { position: absolute; top: -4px; left: 0; right: 0; bottom: 0; } .catalog-container:not(:hover), :root:not(.catalog-hover-expand) .catalog-container { overflow: hidden; } .catalog-post { position: absolute; top: 4px; left: 0; right: 0; border: 1px solid transparent; padding-top: 20px; } /* overrides inline CSS from Index.cb.hoverAdjust */ :root:not(.catalog-hover-expand) .catalog-post { left: 0 !important; right: 0 !important; } /* overrides 4chan CSS on div.post */ .catalog-post.catalog-post { margin: -21px -1px -1px; overflow: visible; } .catalog-thread.noFile > * > .catalog-post { margin-top: -7px; padding-top: 6px; } :root.catalog-hover-expand .catalog-container:hover > .catalog-post { margin-left: -61px; margin-right: -61px; } :root.catalog-hover-expand .catalog-container:hover > * > :not(.catalog-replies) { padding-left: 2px; padding-right: 2px; } .catalog-link { display: block; position: relative; } .catalog-thumb { border-radius: 2px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); vertical-align: top; } .catalog-thumb.spoiler-file { width: 100px; height: 100px; } .catalog-thumb.deleted-file { width: 127px; height: 13px; padding: 20px 11px; } .catalog-thumb.no-file { width: 77px; height: 13px; padding: 20px 36px; } .catalog-icons > img, .catalog-stats > .menu-button { width: 1em; height: 1em; margin: 0; vertical-align: text-top; padding-left: 2px; } .catalog-stats > .menu-button { font-weight: normal; } .catalog-stats > .menu-button > i::before { line-height: 11px; } .catalog-stats { font-size: 10px; font-weight: 700; padding-top: 2px; } .catalog-stats > [title] { cursor: help; } .catalog-post > .postMessage { margin: 0; padding-bottom: 0.3em; } .catalog-container:not(:hover) > * > .file, .catalog-container:not(:hover) > * > .postInfo > :not(.subject), .catalog-container:not(:hover) > * > .catalog-replies, .catalog-container:not(:hover) .extra-linebreak, .catalog-container:not(:hover) .abbr, :root:not(.catalog-hover-expand) .catalog-container > * > .file, :root:not(.catalog-hover-expand) .catalog-container > * > .postInfo > :not(.subject), :root:not(.catalog-hover-expand) .catalog-container > * > .catalog-replies, :root:not(.catalog-hover-expand) .catalog-container .extra-linebreak, :root:not(.catalog-hover-expand) .catalog-container .abbr, .catalog-thread > .catalog-container > :not(.catalog-post), .catalog-post > .file > :not(.fileText), .catalog-post > * > .fileText > :not(:first-child), .catalog-post > .postInfo > :not(.subject):not(.nameBlock):not(.dateTime), .catalog-post > .postInfo > .nameBlock > .contact-links, .catalog-post > * > * > .posteruid, .catalog-post > * > * > .postJumper, :root.bottom-backlinks .catalog-post > .container, .post:not(.catalog-post) > .catalog-link, .post:not(.catalog-post) > .catalog-stats, .post:not(.catalog-post) > .catalog-replies { display: none; } .catalog-post > .file { position: absolute; left: 0; right: 0; top: 0; min-height: 20px; background-color: inherit; } .catalog-post > * > .fileText { position: relative; padding: 2px; background-color: inherit; } .catalog-small .catalog-post > * .fileText { font-size: 10px; } .catalog-post > * > .fileText:not(:hover) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .catalog-post > * > .fileText:hover { z-index: 1; } /* overrides 4chan CSS on div.post div.postInfo */ .catalog-post > .postInfo.postInfo { width: auto; } .catalog-post > * > .subject { display: block; } .catalog-post > * > .dateTime { display: inline-block; font-style: italic; } :root.catalog-hover-expand .catalog-container:hover > * > * > .nameBlock, :root.catalog-hover-expand .catalog-container:hover > * > * > .dateTime, :root.catalog-hover-expand .catalog-container:hover > * > .postMessage:not(:empty) { padding-top: 0.3em; } .catalog-post .extra-linebreak { content: ''; /* makes this work in Blink/WebKit */ display: block; margin-top: 0.3em; } .catalog-reply { text-align: left; white-space: nowrap; border-top: 1px solid transparent; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } .catalog-reply > * { padding: 3px; overflow: hidden; -webkit-flex: none; flex: none; } .catalog-reply > span { font-style: italic; font-weight: bold; } .catalog-reply-excerpt { -webkit-flex: 1 1 auto; flex: 1 1 auto; } .catalog-post .prettyprinted { max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } .catalog-post .MathJax_Display { text-align: center !important; } .catalog-container:not(:hover) .exif, :root:not(.catalog-hover-expand) .catalog-container .exif { display: none !important; } .catalog-post > * > .exif { border-collapse: collapse; } :root.catalog-hover-expand .catalog-container:hover .exif[style*='display: block;'] { display: inline-block !important; } .catalog-post > * > .exif, .catalog-post > * > .exif > tbody { background-color: inherit; } .catalog-post > * > .exif, .catalog-post > * > .exif td { min-width: 0; } .catalog-post > * > .exif td { padding-top: 1px; } :root.hats-enabled .catalog-thread::after { content: ''; pointer-events: none; position: absolute; background-size: contain; } :root.hats-enabled .catalog-small > .catalog-thread::after { left: -8px; top: -59px; width: 96px; height: 96px; } :root.hats-enabled:not(.werkTyme) .catalog-small > .catalog-thread:not(.noFile)::after { left: calc(67px - 0.3px * var(--tn-w)); } :root.hats-enabled .catalog-large > .catalog-thread::after { left: -15px; top: -98px; width: 160px; height: 160px; } :root.hats-enabled:not(.werkTyme) .catalog-large > .catalog-thread:not(.noFile)::after { left: calc(110px - 0.5px * var(--tn-w)); } /* Copy Text Link's textarea element */ textarea.copy-text-element { height: 0; width: 0; position: absolute; top: -10000px; } /* Announcement Hiding */ :root.hide-announcement $site$psa { display: none; } .hide-announcement-button { opacity: 0.4; float: left; } /* Unread */ .unread-line { margin: 0; border-color: rgb(255, 0, 0); } .unread-line + br { display: none; } .unread-mark-read { float: right; clear: both; width: 100%; text-align: right; } :not(.unread-thread) > .unread-mark-read { display: none; } /* Thread Updater */ #updater { background: none; border: none; box-shadow: none; } #updater > .move { position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; z-index: -1; } #updater > div:last-child { text-align: center; } #updater input[type='number'] { width: 4em; } :root.float #updater { padding: 0px 3px; } :root:not(.float).shortcut-icons #updater { display: inline-block; min-width: 12pt; text-align: right; } .new { color: limegreen; } #update-status:not(.empty) + #update-timer:not(.empty):not(.loading) { margin-left: 5px; } #update-timer { cursor: pointer; } /* Thread Watcher */ #thread-watcher { position: absolute; } #thread-watcher { padding-bottom: 3px; padding-left: 3px; white-space: nowrap; min-width: 146px; } #watched-threads { overflow-x: hidden; overflow-y: auto; } #thread-watcher .refresh { padding: 0px 3px; } :root.fixed-watcher #thread-watcher { position: fixed; } :root.fixed-watcher #watched-threads { /* XXX https://code.google.com/p/chromium/issues/detail?id=168840, https://bugs.webkit.org/show_bug.cgi?id=94158 */ max-height: 85vh; max-height: calc(100vh - 75px); } :root:not(.fixed-watcher) #watched-threads:not(:hover) { max-height: 210px; overflow-y: hidden; } #thread-watcher > .move { padding-top: 3px; } #watched-threads > div { padding-left: 3px; padding-right: 3px; } #watched-threads .watcher-link { max-width: 250px; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; } #watched-threads .watcher-page, #watched-threads .watcher-unread { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-right: 2px; } #watched-threads .watcher-title { overflow: hidden; text-overflow: ellipsis; -webkit-flex: 0 1 auto; flex: 0 1 auto; } #watched-threads .watcher-title:not(:first-child) { margin-left: 2px; } .replies-quoting-you > a, #watcher-link.replies-quoting-you, .last-page > a > .watcher-page { color: #f00; } #thread-watcher a { text-decoration: none; } #thread-watcher .move > .close { position: absolute; right: 0px; top: 0px; padding: 0px 4px; } .watch-thread-link { padding-top: 18px; width: 18px; height: 0px; display: inline-block; background-repeat: no-repeat; opacity: 0.2; position: relative; top: 1px; background-image: url("data:image/svg+xml,"); } .watch-thread-link.watched { opacity: 1; } /* Thread Stats */ #thread-stats { background: none; border: none; box-shadow: none; } :root.float #thread-stats > .move > :not(#page-count) { pointer-events: none; } :root.float #thread-stats { padding: 0px 3px; } #page-count { cursor: pointer; } /* Quote */ .hashlink::before { content: ' '; visibility: hidden; } .inline + .hashlink { display: none !important; } :root.resurrect-quotes .deadlink { text-decoration: none !important; } .catalog-post .qmark-ct { display: none; } .backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) { text-decoration: underline !important; } :root:not(.catalog-mode) .inlined { opacity: 0.5; } #qp input, .forwarded { display: none; } .quotelink.forwardlink, .backlink.forwardlink { text-decoration: none; border-bottom: 1px dashed; } .filtered { text-decoration: underline line-through; } :root.hide-backlinks .backlink.filtered, :root.hide-backlinks .backlink.filtered + .hashlink.filtered { display: none; } .postNum + .container::before { content: ' '; } :root.bottom-backlinks .container { display: block; clear: both; margin: 0 4px; } :root.bottom-backlinks .backlink { font-size: 90%; } .inline { border: 1px solid; display: table; margin: 2px 0; } .container ~ .inline { margin-left: 20px; } :root.catalog-mode .inline { display: none; } .inline .post { border: 0 !important; background-color: transparent !important; display: table !important; margin: 0 !important; padding: 1px 2px !important; } #qp > .opContainer::after { content: ''; clear: both; display: table; } #qp .post { border: none; margin: 0; padding: 2px 2px 5px; } #qp img { max-height: 80vh; max-width: 50vw; } /* Quote Threading */ .threadContainer { margin-left: 20px; border-left: 1px solid rgba(128, 128, 128, 0.3); } .threadOP { clear: both; } /* File */ .fileText-original, .fnswitch:hover > .fntrunc, .fnswitch:not(:hover) > .fnfull, .expanded-image > .post > .file > .fileThumb > video[data-md5], .expanded-image > .post > .file > .fileThumb > img[data-md5] { display: none; } .full-image[data-file-i-d] { display: none; cursor: pointer; } .expanded-image > .post > .file > .fileThumb > .full-image { display: inline; } .expanded-image { clear: left; } .expanding { opacity: 0.5; } :root.fit-height .full-image { max-height: 100vh; } :root.fit-height.fixed .full-image { /* XXX https://code.google.com/p/chromium/issues/detail?id=168840, https://bugs.webkit.org/show_bug.cgi?id=94158 */ max-height: 93vh; max-height: calc(100vh - 35px); } :root.fit-width .full-image { max-width: 100%; } :root.ua-gecko.fit-width .full-image { width: 100%; } .fileThumb > .warning { clear: both; } #ihover { pointer-events: none; /* XXX https://code.google.com/p/chromium/issues/detail?id=168840, https://bugs.webkit.org/show_bug.cgi?id=94158 */ max-height: 95vh; max-height: calc(100vh - 25px); max-width: 100vw; } /* WEBM Metadata */ .webm-title > a::before { content: 'title'; text-decoration: underline; } .webm-title.loading > a::after { content: '...'; } .webm-title.error > a:hover::before, .webm-title.error > a:focus::before { content: 'error'; text-decoration: none; } .webm-title > span { cursor: text; } .webm-title.not-found > span::before { content: 'not found'; } .webm-title:not(:hover):not(:focus) > span, .webm-title:hover > span + a, .webm-title:focus > span + a { display: none; } /* Volume control */ input[name='Default Volume'] { width: 4em; height: 1ex; vertical-align: middle; margin: 0px; } /* Fappe and Werk Tyme */ :root.fappeTyme $site$replyOriginal.noFile, :root.fappeTyme $site$replyOriginal.noFile + br { display: none; } :root.werkTyme $site$thumbLink, :root.werkTyme $site$file$thumb, :root.werkTyme .catalog-thumb:not(.deleted-file):not(.no-file), :root:not(.werkTyme) .werkTyme-filename { display: none; } .werkTyme-filename { font-weight: bold; font-size: 110%; } :root.werkTyme .catalog-link { box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); padding: 8px; text-align: center; } :root.werkTyme .catalog-thumb { box-shadow: none; padding: 0; vertical-align: middle; } .indicator { background: rgba(255, 0, 0, 0.8); font-weight: bold; display: inline-block; min-width: 9px; padding: 0px 2px; margin: 0 1px; text-align: center; color: white; border-radius: 2px; cursor: pointer; } :root:not(.fappeTyme) #shortcut-fappe, :root:not(.werkTyme) #shortcut-werk { display: none; } /* Index/Reply Navigation */ #navlinks { font-size: 16px; top: 25px; right: 10px; } :root.catalog-mode #navlinks { display: none; } /* Highlighting */ .qphl { outline: 2px solid rgba(216, 94, 49, 0.8); } :root.highlight-you .quotesYou$site$highlightable$op, :root.highlight-you .quotesYou$site$highlightable$reply { border-left: 3px solid rgba(221, 0, 0, 0.8); } :root.highlight-own .yourPost$site$highlightable$op, :root.highlight-own .yourPost$site$highlightable$reply { border-left: 3px dashed rgba(221, 0, 0, 0.8); } .filter-highlight$site$highlightable$op, .filter-highlight$site$highlightable$reply { box-shadow: inset 5px 0 rgba(221, 0, 0, 0.5); } :root.highlight-own .yourPost > $site$sideArrows, :root.highlight-you .quotesYou > $site$sideArrows, .filter-highlight > $site$sideArrows { color: rgba(221, 0, 0, 0.8); } :root.highlight-own .yourPost$site$highlightable$op::after, :root.highlight-you .quotesYou$site$highlightable$op::after, .filter-highlight$site$highlightable$op::after { content: ''; display: block; clear: both; } :root:not(.werkTyme) .catalog-thread.filter-highlight .catalog-thumb, :root.werkTyme .catalog-thread.filter-highlight:not(:hover), :root.werkTyme:not(.catalog-hover-expand) .catalog-thread.filter-highlight, :root.werkTyme.catalog-hover-expand .catalog-thread.filter-highlight > .catalog-container:hover > .catalog-post, :root.catalog $site$catalog$thread.filter-highlight$site$highlightable$catalog { box-shadow: 0 0 3px 3px rgba(255, 0, 0, 0.5); } :root:not(.werkTyme) .catalog-thread.watched .catalog-thumb, :root:root.werkTyme .catalog-thread.watched:not(:hover), :root:root.werkTyme:not(.catalog-hover-expand) .catalog-thread.watched, :root.werkTyme.catalog-hover-expand .catalog-thread.watched > .catalog-container:hover > .catalog-post { border: 2px solid rgba(255, 0, 0, 0.75); } /* Spoiler text */ :root.reveal-spoilers $site$spoiler, :root.reveal-spoilers $site$spoiler > a { color: white !important; } :root.reveal-spoilers .removed-spoiler::before { content: '[spoiler]'; } :root.reveal-spoilers .removed-spoiler::after { content: '[/spoiler]'; } /* Thread & Reply Hiding */ .hide-thread-button, .hide-reply-button { float: left; margin-right: 4px; padding: 2px; } $site$infoRoot a.hide-reply-button { margin-right: 6px; padding: 0; } .replacedSideArrows { float: left; } .hide-thread-button:not(:hover), .hide-reply-button:not(:hover) { opacity: 0.4; } .threadContainer .hide-reply-button { margin-left: 2px !important; position: relative; left: 1px; } .hide-thread-button { margin-top: -1px; width: 11px; } .stub ~ :not(.threadDivider) { display: none !important; } .stub input { display: inline-block; } $site$thread[hidden] + hr { display: none; } :root.reply-hide $site$sideArrows { display: none; } :root.sw-yotsuba.thread-hide .party-hat { left: 19px; } /* Anonymize */ :root.anonymize $site$info$name, :root.sw-yotsuba.anonymize .post-author:not([class*='capcode']) { font-size: 0; } :root.anonymize $site$info$tripcode, :root.sw-yotsuba.anonymize .n-pu { display: none; } :root.anonymize $site$info$name::before, :root.sw-yotsuba.anonymize .post-author:not([class*='capcode'])::before { content: 'Anonymous'; font-size: 10pt; } :root.sw-yotsuba.anonymize .flashListing .name::before, :root.sw-yotsuba.anonymize .post-last > .post-author:not([class*='capcode'])::before { font-size: 9pt; } /* QR */ :root.hide-original-post-form #togglePostFormLink, #qr.autohide:not(.focus):not(:hover):not(:active) > form, :root.thread-view #qr:not(.show-new-thread-option) select[data-name='thread'], #file-n-submit:not(.has-file) #qr-filerm { display: none; } :root.hide-original-post-form #postForm { display: none !important; } #qr select, #qr-filename-container > a, .remove, .captcha-img { cursor: pointer; } #qr { position: fixed; padding: 1px; border: 1px solid transparent; min-width: 300px; border-radius: 3px 3px 0 0; } #qr > form { /* XXX https://code.google.com/p/chromium/issues/detail?id=168840, https://bugs.webkit.org/show_bug.cgi?id=94158 */ max-height: 85vh; max-height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden; } #qrtab { border-radius: 3px 3px 0 0; } #qrtab { margin-bottom: 1px; } #qr .close { float: right; padding: 0 3px; } .qr-link-container { text-align: center; margin: 16px 0; } .qr-link-container-bottom { width: 200px; position: absolute; left: -100px; margin-left: 50%; text-align: center; } .qr-link { border-radius: 3px; padding: 6px 10px 5px; font-weight: bold; vertical-align: middle; border-style: solid; border-width: 1px; font-size: 10pt; } .qr-link-container + #togglePostFormLink { font-size: 10pt; font-weight: normal; margin: -8px 0 3.5px; } .persona { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; } .persona .field { -webkit-flex: 1; flex: 1; width: 0; } #qr.forced-anon input[data-name='name']:not(.force-show), #qr.forced-anon input[data-name='sub']:not(.force-show), #qr.reply-to-thread input[data-name='sub']:not(.force-show), body:not(.board_f) #qr select[name='filetag'], #qr.reply-to-thread select[name='filetag'], #qr:not(.has-sjis) #sjis-toggle, #qr:not(.has-math) #tex-preview-button, #qr.tex-preview .textarea > :not(#tex-preview), #qr:not(.tex-preview) #tex-preview { display: none; } .persona button { -webkit-flex: 0 0 23px; flex: 0 0 23px; -webkit-align-self: stretch; align-self: stretch; border: 1px solid #bbb; padding: 0; background: linear-gradient(to bottom, #f8f8f8, #dcdcdc) no-repeat; color: #000; } #qr.sjis-preview #sjis-toggle, #qr.tex-preview #tex-preview-button { background: #dcdcdc; } #sjis-toggle, #qr.sjis-preview textarea.field { font-family: 'IPAMonaPGothic', 'Mona', 'MS PGothic', monospace; font-size: 16px; line-height: 17px; } #tex-preview-button { font-size: 10px; } #tex-preview { white-space: pre-line; } #qr textarea.field { height: 14.8em; min-height: 9em; } #qr.has-captcha textarea.field { height: 9em; } input.field.tripped:not(:hover):not(:focus) { color: transparent !important; text-shadow: none !important; } #qr textarea { min-width: 300px; resize: both; } .field { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0px; padding: 2px 4px 3px; } #qr label input[type='checkbox'] { position: relative; top: 2px; } /* Recaptcha v2 */ #qr .captcha-root { position: relative; } #qr .captcha-container > div { margin: auto; width: 304px; } /* XXX scrollable with scroll bar hidden; prevents scroll on space press */ :root.ua-blink #qr .captcha-container > div, :root.ua-edge #qr .captcha-container > div { overflow: hidden; } :root.ua-blink #qr .captcha-container > div > div:first-of-type, :root.ua-edge #qr .captcha-container > div > div:first-of-type { overflow-y: scroll; overflow-x: hidden; padding-right: 30px; height: 99%; width: 100%; } #qr .captcha-counter { display: block; width: 100%; text-align: center; pointer-events: none; } #qr.captcha-open .captcha-counter { position: absolute; bottom: 3px; } #qr .captcha-counter > a { pointer-events: auto; display: inline-block; /* XXX https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8851747/ */ } #qr:not(.captcha-open) .captcha-counter > a { display: block; width: 100%; } #qr.captcha-v2 #qr-captcha-iframe { width: 302px; height: 423px; border: 0; display: block; margin: auto; } .goog-bubble-content { max-width: 100vw; max-height: 100vh; overflow: auto; } .goog-bubble-content iframe { position: static !important; } /* File Input, Submit Button, Oekaki */ #file-n-submit, #qr .oekaki { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; height: 25px; margin-top: 1px; } #file-n-submit > input, #qr-draw-button { background: linear-gradient(to bottom, #f8f8f8, #dcdcdc) no-repeat; border: 1px solid #bbb; border-radius: 2px; height: 100%; } #qr-file-button, #qr-draw-button { width: 15%; } #file-n-submit input[type='submit'] { width: 25%; } #qr-filename-container { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; position: relative; padding: 1px; } input#qr-filename { border: none !important; background: none !important; outline: none; } #qr-filename, .has-file #qr-no-file { display: none; } #qr-no-file, .has-file #qr-filename { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 0px; /* XXX Fixes filename not shrinking to allow space for buttons in Edge */ display: inline-block; padding: 0; padding-left: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #qr-no-file { color: #aaa; } #qr .oekaki.has-file { display: none; } #qr .oekaki > label { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 100%; } #qr .oekaki > label > span { margin: 0 3px; } #qr .oekaki > label > input { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 0; height: 100%; } #qr .oekaki-bg { position: relative; display: inline-block; height: 100%; width: 10%; margin-left: 3px; } #qr .oekaki-bg > * { position: absolute; top: 0; left: 0; margin: 0; } #qr .oekaki-bg > :not([name='oekaki-bgcolor']) { z-index: 1; } #qr [name='oekaki-bgcolor'] { height: 100%; width: 100%; border: none; padding: 0; } #qr [name='oekaki-bg']:not(:checked) ~ [name='oekaki-bgcolor'] { visibility: hidden; } #qr input[type='file'] { visibility: hidden; position: absolute; } /* Spoiler Checkbox, QR Icons */ #qr-filename-container > label, #qr-filename-container > a { -webkit-flex: none; flex: none; margin: 0; margin-right: 3px; } #qr:not(.has-spoiler) #qr-spoiler-label, #file-n-submit:not(.has-file) #qr-spoiler-label, .has-file #paste-area, .has-file #url-button, #file-n-submit:not(.custom-cooldown) #custom-cooldown-button { display: none; } #qr-filename-container > label { position: relative; } #qr-filename-container input[type='checkbox'] { margin: 0; } .checkbox-letter { font-size: 13px; font-weight: bold; } #qr-filename-container label:not(:hover) > input[type='checkbox']:not(:focus):not(:checked), #qr-filename-container label:not(:hover) > input[type='checkbox']:not(:focus):not(:checked) ~ :not(.checkbox-letter), #qr-filename-container label:hover > .checkbox-letter, input[type='checkbox']:focus ~ .checkbox-letter, input[type='checkbox']:checked ~ .checkbox-letter { /* not displayed but still focusable */ position: absolute; opacity: 0; pointer-events: none; } .checkbox-letter, #paste-area, #url-button, #custom-cooldown-button, #dump-button { opacity: 0.6; } #paste-area { font-size: 0; } #paste-area:focus { opacity: 1; } #custom-cooldown-button.disabled { opacity: 0.27; } /* Thread and Flash Tag Select */ #qr select { background: white; border: 1px solid #ccc; } #qr select[data-name='thread'] { float: right; } #qr > form > select { margin-top: 1px; } /* Dumping UI */ .dump #dump-list-container { display: block; } #dump-list-container { display: none; position: relative; overflow-y: hidden; margin-top: 1px; } #dump-list { overflow-x: auto; overflow-y: auto; white-space: nowrap; width: 248px; max-height: 248px; min-height: 90px; max-width: 100%; min-width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #dump-list:hover { overflow-x: auto; } .qr-preview { -moz-box-sizing: border-box; box-sizing: border-box; counter-increment: thumbnails; cursor: move; display: inline-block; height: 90px; width: 90px; padding: 2px; opacity: 0.5; overflow: hidden; position: relative; text-shadow: 0 0 2px #000; -webkit-transition: opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out; transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out; vertical-align: top; background-size: cover; -webkit-flex: none; flex: none; } .qr-preview:hover, .qr-preview:focus { opacity: 0.9; } .qr-preview::before { content: counter(thumbnails); color: #fff; position: absolute; top: 3px; right: 3px; text-shadow: 0 0 3px #000, 0 0 8px #000; } .qr-preview#selected { opacity: 1; } .qr-preview.drag { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(0.8); transform: scale(0.8); } .qr-preview.over { border-color: #fff; -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.9; z-index: 10; } .qr-preview > span { color: #fff; } .remove { background: none; color: #e00; padding: 1px; } a:only-of-type > .remove { display: none; } .remove:hover::after { content: ' Remove'; } .qr-preview:not(.has-file) label, #qr:not(.has-spoiler) .qr-preview-spoiler { display: none; } .qr-preview > label { background: rgba(0, 0, 0, 0.5); color: #fff; right: 0; bottom: 0; left: 0; position: absolute; text-align: center; } .qr-preview > label > input { margin: 0; } #add-post { cursor: pointer; font-size: 2em; position: absolute; bottom: 20px; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .textarea { position: relative; display: -webkit-flex; display: flex; } #char-count { color: #000; background: hsla(0, 0%, 100%, 0.5); font-size: 8pt; position: absolute; bottom: 1px; right: 1px; pointer-events: none; } #char-count.warning { color: red; } /* Menu */ .menu-button:not(.fa-bars) { display: inline-block; position: relative; cursor: pointer; } #header-bar .menu-button i { border-top: 6px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; display: inline-block; margin: 2px; vertical-align: middle; } .postInfo > .menu-button, #thread-watcher .menu-button { width: 18px; height: 15px; text-align: center; } #menu { position: fixed; outline: none; font-weight: normal; } #menu, .submenu { border-radius: 3px; padding-top: 1px; padding-bottom: 3px; } .entry { cursor: pointer; display: block; outline: none; padding: 2px 10px; position: relative; text-decoration: none; white-space: nowrap; min-width: 70px; text-align: left; text-shadow: none; font-size: 10pt; } .left > .entry.has-submenu { padding-right: 17px !important; } .entry input[type='checkbox'], .entry input[type='radio'] { margin: 0px; position: relative; top: 2px; } .entry input[type='number'] { width: 4.5em; } .entry.has-shortcut-text { display: flex; justify-content: space-between; align-items: center; } .entry .shortcut-text { opacity: 0.5; font-size: 70%; margin-left: 5px; } .has-submenu::after { content: ''; border-left: 0.5em solid; border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent; display: inline-block; margin: 0.3em; position: absolute; right: 3px; } .left .has-submenu::after { border-left: 0; border-right: 0.5em solid; } .submenu { display: none; position: absolute; left: 100%; top: -1px; margin-left: 0px; margin-top: -2px; } .focused > .submenu { display: block; } .imp-exp-result { position: absolute; text-align: center; margin: auto; right: 0px; left: 0px; width: 200px; } /* Custom Board Titles */ .boardTitle, .boardSubtitle { white-space: pre-line; } .boardTitle[contenteditable='true'], .boardSubtitle[contenteditable='true'] { cursor: text !important; } /* Embedding */ .embedder:not(.embedded) > span { display: none; } #embedding { padding: 1px 4px 1px 4px; position: fixed; } #embedding.empty { display: none; } #embedding > div:first-child { display: -webkit-flex; display: flex; } #embedding .move { -webkit-flex: 1; flex: 1; } #embedding .jump { margin: -1px 4px; text-decoration: none; } /* Gallery */ #a-gallery { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; background: rgba(0, 0, 0, 0.7); } .gal-viewport { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-direction: row; flex-direction: row; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; } .gal-thumbnails { -webkit-flex: 0 0 150px; flex: 0 0 150px; overflow-y: auto; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; text-align: center; background: rgba(0, 0, 0, 0.5); border-left: 1px solid #222; } .gal-hide-thumbnails .gal-thumbnails { display: none; } .gal-thumb img, .gal-thumb video { max-width: 125px; max-height: 125px; height: auto; width: auto; } .gal-thumb { -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 3px; line-height: 0; transition: background 0.2s linear; } .gal-highlight { background: rgba(0, 190, 255, 0.8); } .gal-prev { border-right: 1px solid #222; } .gal-next { border-left: 1px solid #222; } .gal-prev, .gal-next { -webkit-flex: 0 0 20px; flex: 0 0 20px; position: relative; cursor: pointer; opacity: 0.7; background-color: rgba(0, 0, 0, 0.3); } .gal-prev:hover, .gal-next:hover { opacity: 1; } .gal-prev::after, .gal-next::after { position: absolute; top: 48.6%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; border-top: 11px solid transparent; border-bottom: 11px solid transparent; content: ''; } .gal-prev::after { border-right: 12px solid #fff; right: 5px; } .gal-next::after { border-left: 12px solid #fff; right: 3px; } .gal-image { -webkit-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-around; justify-content: space-around; overflow: hidden; /* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */ width: 1%; } :root:not(.gal-fit-height):not(.gal-pdf) .gal-image { overflow-y: scroll !important; } :root:not(.gal-fit-width):not(.gal-pdf) .gal-image { overflow-x: scroll !important; } .gal-image a { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; margin: auto; line-height: 0; max-width: 100%; } :root.gal-pdf .gal-image a { width: 100%; height: 100%; } .gal-image img, .gal-image video { -webkit-flex: none; flex: none; } .gal-fit-width .gal-image img, .gal-fit-width .gal-image video { max-width: 100%; } .gal-fit-height .gal-image img, .gal-fit-height .gal-image video { /* XXX https://code.google.com/p/chromium/issues/detail?id=168840, https://bugs.webkit.org/show_bug.cgi?id=94158 */ max-height: 95vh; max-height: calc(100vh - 25px); } .gal-image iframe { width: 100%; height: 100%; } .gal-buttons { font-size: 2em; margin-right: 3px; padding-left: 7px; padding-right: 7px; top: 5px; } :root.gal-pdf .gal-buttons { top: 40px; background: rgba(0, 0, 0, 0.6) !important; border-radius: 3px; } .gal-buttons a { color: #ffffff; text-shadow: 0px 0px 1px #000000; } .gal-buttons i { display: inline-block; margin: 2px; position: relative; } .gal-start i { border-left: 10px solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; bottom: 1px; } .gal-stop i { border: 5px solid; bottom: 2px; } .gal-buttons.gal-playing > .gal-start, .gal-buttons:not(.gal-playing) > .gal-stop { display: none; } .gal-buttons .menu-button i { border-top: 10px solid; border-right: 6px solid transparent; border-left: 6px solid transparent; bottom: 2px; vertical-align: baseline; } .gal-labels { position: fixed; bottom: 6px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; } :root:not(.show-sauce) .gal-sauce { display: none; } .gal-name, .gal-count, .gal-sauce { background: rgba(0, 0, 0, 0.6) !important; border-radius: 3px; padding: 1px 5px 2px 5px; margin-top: 3px; color: #ffffff !important; text-decoration: none !important; } .gal-sauce a { color: #ffffff !important; } .gal-name:hover, .gal-buttons a:hover, .gal-sauce a:hover { color: rgb(95, 95, 101) !important; } :root.gal-pdf .gal-buttons a:hover { color: rgb(204, 204, 204) !important; } .gal-buttons, .gal-labels { position: fixed; right: 195px; } .gal-hide-thumbnails .gal-buttons, .gal-hide-thumbnails .gal-labels { right: 44px; } :root:not(.gal-fit-width):not(.gal-pdf) .gal-labels { bottom: 23px !important; } :root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-buttons, :root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-labels { right: 178px !important; } :root.gal-hide-thumbnails.gal-fit-height:not(.gal-pdf) .gal-buttons, :root.gal-hide-thumbnails.gal-fit-height:not(.gal-pdf) .gal-labels { right: 28px !important; } :root.gallery-open.fixed #header-bar:not(.autohide), :root.gallery-open.fixed #header-bar:not(.autohide) #shortcuts .fa::before { visibility: hidden; } /* Mod Contact Links */ .contact-links { margin-left: 2px; } .move-note > a { text-decoration: underline; } .invisible { font-size: 0; } /* PostJumper */ .postJumper > .prev, .postJumper > .next { font-size: 120%; } /* PSA */ .fcx-announcement { text-align: center; } .fcx-announcement a { text-decoration: underline; }