From ff7d0fb397e28a2d16d03239e961b8983efbfc55 Mon Sep 17 00:00:00 2001 From: Lalle <29478339+LalleSX@users.noreply.github.com> Date: Sat, 22 Apr 2023 05:52:19 +0200 Subject: [PATCH] test scss --- src/css/style.scss | 2555 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2555 insertions(+) create mode 100644 src/css/style.scss diff --git a/src/css/style.scss b/src/css/style.scss new file mode 100644 index 0000000..2a4f559 --- /dev/null +++ b/src/css/style.scss @@ -0,0 +1,2555 @@ +/* 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; +}