4chan-x/src/General/css/style.css

1786 lines
34 KiB
CSS
Executable File

/* General */
.dialog {
border: 1px solid;
display: block;
}
.dialog:not(#qr):not(#thread-watcher):not(#header-bar) {
box-shadow: 0 1px 2px rgba(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 .25s, border-color .25s;
transition: color .25s, border-color .25s;
}
.field::-moz-placeholder,
.field:hover::-moz-placeholder {
color: #AAA !important;
font-size: 13px !important;
opacity: 1.0 !important;
}
.captch-img:hover,
.field:hover {
border-color: #999;
}
.field:hover, .field:focus {
color: #000;
}
.field[disabled] {
background-color: #F2F2F2;
color: #888;
}
.field::-webkit-search-decoration {
display: none;
}
.move {
cursor: move;
overflow: hidden;
}
label,
.watch-thread-link {
cursor: pointer;
}
a[href="javascript:;"] {
text-decoration: none;
}
.warning {
color: red;
}
#boardNavDesktop, #boardNavMobile {
display: none !important;
}
:root.hide-bottom-board-list #boardNavDesktopFoot {
display: none;
}
body.hasDropDownNav{
margin-top: 5px;
}
a {
outline: none !important;
}
.painted {
border-radius: 3px;
padding: 0px 2px;
}
.ad-plea {
display: none;
}
/* 4chan style fixes */
.opContainer, .op {
display: block !important;
overflow: visible !important;
}
.reply > .file > .fileText {
margin: 0 20px;
}
.hashlink::before {
content: ' ';
visibility: hidden;
}
.inline + .hashlink,
[hidden] {
display: none !important;
}
hr + div.center:not(.ad-cnt):not(.topad):not(.middlead):not(.bottomad) {
display: none !important;
}
.page-num {
margin-right: -8px;
}
.fileText a {
unicode-bidi: -moz-isolate;
unicode-bidi: -webkit-isolate;
}
.thread > img:first-child {
/* party hats */
pointer-events: none;
}
marquee,
.postMessage marquee + br,
.postMessage marquee + br + br {
display: none;
}
/* Anti-autoplay */
audio.controls-added {
display: block;
margin: auto;
}
:root.anti-autoplay div.embed {
position: static;
width: auto;
height: auto;
text-align: center;
}
/* fixed, z-index */
#overlay,
#fourchanx-settings,
#qp, #ihover,
#navlinks, .fixed #header-bar,
:root.float #updater,
:root.float #thread-stats,
#qr {
position: fixed;
}
#fourchanx-settings {
z-index: 999;
}
#overlay {
z-index: 900;
}
#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;
}
#thread-watcher {
z-index: 10;
}
/* 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;
}
.fixed.top-header #header-bar {
top: 0;
}
.fixed.bottom-header #header-bar {
bottom: 0;
}
#header-bar {
border-width: 0;
transition: all .1s .05s ease-in-out;
}
:root.fixed #header-bar {
box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.20);
}
#header-bar #custom-board-list .current {
padding: 1px 1px 4px 1px;
}
: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, .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 .8s .6s cubic-bezier(.55, .055, .675, .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;
}
:root: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%;
}
#header-bar a:not(.entry):not(.close) {
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: .45;
}
#shortcuts {
float: right;
}
.shortcut {
margin-left: 3px;
vertical-align: middle;
}
#navbotright,
#navtopright {
display: none;
}
#toggleMsgBtn {
display: none !important;
}
.current {
font-weight: bold;
}
/* 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;
}
: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, .5);
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
border-radius: 2px;
margin: 1px auto;
width: 500px;
max-width: 100%;
position: relative;
transition: all .25s ease-in-out;
}
.notification.error {
background-color: hsla(0, 100%, 38%, .9);
}
.notification.warning {
background-color: hsla(36, 100%, 38%, .9);
}
.notification.info {
background-color: hsla(200, 100%, 38%, .9);
}
.notification.success {
background-color: hsla(104, 100%, 38%, .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;
}
/* Settings */
:root.fourchan-x body {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#overlay {
background-color: rgba(0, 0, 0, .5);
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, .15);
height: 600px;
max-height: 100%;
width: 900px;
max-width: 100%;
margin: auto;
padding: 3px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#fourchanx-settings > nav {
padding: 2px 2px 0;
height: 15px;
}
#fourchanx-settings > nav a {
text-decoration: underline;
}
#fourchanx-settings > nav a.close {
text-decoration: none;
padding: 0 2px;
margin: 0;
}
.section-container {
overflow: auto;
position: absolute;
top: 2.1em;
right: 5px;
bottom: 5px;
left: 5px;
padding-right: 5px;
}
.sections-list {
padding: 0 3px;
float: left;
}
.credits {
float: right;
}
.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 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: .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: .7em;
width: .7em;
height: .6em;
border-left: 1px solid;
border-bottom: 1px solid;
}
.section-filter ul {
padding: 0;
}
.section-filter li {
margin: 10px 40px;
list-style: disc;
}
.section-filter textarea {
height: 500px;
}
.section-sauce textarea {
height: 350px;
}
.section-advanced .field[name="boardnav"] {
width: 100%;
}
.section-advanced textarea {
height: 150px;
}
.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;
}
.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;
min-width: 100%;
max-width: 100%;
}
#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;
}
.unscroll {
overflow: hidden;
}
/* Index */
:root.index-loading .navLinks,
:root.index-loading .board,
:root.index-loading .pagelist,
:root.infinite-mode .pagelist,
:root.all-pages-mode .pagelist,
:root.catalog-mode .pagelist,
:root:not(.catalog-mode) #hidden-label,
:root:not(.catalog-mode) #index-size {
display: none;
}
#index-search {
padding-right: 1.5em;
width: 100px;
transition: color .25s, border-color .25s, width .25s;
}
#index-search:focus,
#index-search[data-searching] {
width: 200px;
}
#index-search-clear {
color: gray;
display: inline-block;
position: relative;
left: -1em;
width: 0;
}
<% if (type === 'crx') { %>
/* ``::-webkit-*'' selectors break selector lists on Firefox. */
#index-search::-webkit-search-cancel-button,
<% } %>
#index-search:not([data-searching]) + #index-search-clear {
display: none;
}
#index-mode, #index-sort, #index-size {
float: right;
}
.summary {
text-decoration: none;
}
/* Catalog */
:root.catalog-mode .board {
text-align: center;
}
.catalog-thread {
display: -webkit-inline-flex;
display: inline-flex;
text-align: left;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
margin: 0 2px 5px;
word-wrap: break-word;
vertical-align: top;
}
.catalog-thread > a {
flex-shrink: 0;
-webkit-flex-shrink: 0;
position: relative;
}
.catalog-small .catalog-thread {
width: 165px;
max-height: 320px;
}
.catalog-large .catalog-thread {
width: 270px;
max-height: 410px;
}
.catalog-thumb {
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
}
.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 {
text-align: center;
font-weight: normal;
}
.catalog-stats > .menu-button > i::before {
line-height: 11px;
}
.catalog-stats {
-webkit-flex-shrink: 0;
flex-shrink: 0;
cursor: help;
font-size: 10px;
font-weight: 700;
margin-top: 2px;
}
.catalog-thread > .subject {
-webkit-flex-shrink: 0;
flex-shrink: 0;
-webkit-align-self: stretch;
align-self: stretch;
font-weight: 700;
line-height: 1;
text-align: center;
}
.catalog-thread > .comment {
-webkit-flex-shrink: 1;
flex-shrink: 1;
-webkit-align-self: stretch;
align-self: stretch;
overflow: hidden;
text-align: center;
}
/* /tg/ dice rolls */
.catalog-thread > .comment > b {
font-weight: normal;
}
.catalog-code {
background-color: #FFF;
display: inline-block;
max-width: 100%;
}
/* Announcement Hiding */
:root.hide-announcement #globalMessage {
display: none;
}
span.hide-announcement {
font-size: 11px;
position: relative;
bottom: 5px;
}
.globalMessage, h2, h3 {
color: inherit !important;
font-size: 13px;
font-weight: 100;
}
/* Unread */
#unread-line {
margin: 0;
border-color: rgb(255,0,0);
}
/* Thread Updater */
#updater {
background: none;
border: none;
box-shadow: none;
}
#updater > .move {
position: absolute;
left: 0;
top: -5px;
width: 100%;
height: 5px;
}
#updater > div:last-child {
text-align: center;
}
#updater input[type="number"] {
width: 4em;
}
:root.float #updater {
padding: 0px 3px;
}
.new {
color: limegreen;
}
#update-status.new {
margin-right: 5px;
}
#update-timer {
cursor: pointer;
}
/* Thread Watcher */
#thread-watcher {
position: absolute;
}
#thread-watcher {
padding-bottom: 3px;
padding-left: 3px;
overflow: hidden;
white-space: nowrap;
min-width: 146px;
max-height: 92%;
overflow-y: auto;
}
#thread-watcher .refresh {
padding: 0px 3px;
}
:root.fixed-watcher #thread-watcher {
position: fixed;
}
:root:not(.fixed-watcher) #thread-watcher: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-unread {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#watched-threads .watcher-unread::after {
content: "\\00a0";
}
#watched-threads .watcher-title {
overflow: hidden;
text-overflow: ellipsis;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
#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;
}
.watch-thread-link.watched {
opacity: 1;
}
/* Thread Stats */
#thread-stats {
background: none;
border: none;
box-shadow: none;
}
:root.float #thread-stats > .move > span {
pointer-events: none;
}
:root.float #thread-stats {
padding: 0px 3px;
}
/* Quote */
.catalog-thread > .comment > span.quote, #arc-list span.quote {
color: #789922;
}
:root:not(.catalog-mode) .deadlink {
text-decoration: none !important;
}
.backlink.deadlink:not(.forwardlink),
.quotelink.deadlink:not(.forwardlink) {
text-decoration: underline !important;
}
.inlined {
opacity: .5;
}
#qp input, .forwarded {
display: none;
}
.quotelink.forwardlink,
.backlink.forwardlink {
text-decoration: none;
border-bottom: 1px dashed;
}
@supports (text-decoration-style: dashed) or (-moz-text-decoration-style: dashed) {
.quotelink.forwardlink,
.backlink.forwardlink {
text-decoration: underline;
-moz-text-decoration-style: dashed;
text-decoration-style: dashed;
border-bottom: none;
}
}
.filtered {
text-decoration: underline line-through;
}
:root.hide-backlinks .backlink.filtered,
:root.hide-backlinks .backlink.filtered + .hashlink.filtered {
display: none;
}
.inline {
border: 1px solid;
display: table;
margin: 2px 0;
}
.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;
}
.qphl {
outline: 2px solid rgba(216, 94, 49, .7);
}
:root.highlight-own .yourPost > .reply,
:root.highlight-you .quotesYou > .reply {
border-left: 2px solid rgba(221,0,0,.5);
}
/* Quote Threading */
.threadContainer {
margin-left: 20px;
border-left: 1px solid rgba(128,128,128,.3);
}
.threadOP {
clear: both;
}
/* File */
.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 {
display: none;
}
.expanded-image > .post > .file > .fileThumb > .full-image {
display: inline;
}
.expanded-image {
clear: left;
}
.expanding {
opacity: .5;
}
:root.fit-height .full-image {
max-height: 100vh;
}
:root.fit-width .full-image {
max-width: 100%;
}
:root.gecko.fit-width .full-image {
width: 100%;
}
.fileThumb > .warning {
clear: both;
}
/* Fappe Tyme */
:root.fappeTyme .thread > .noFile,
:root.fappeTyme .threadContainer > .noFile {
display: none;
}
/* Werk Tyme */
:root.werkTyme .postContainer:not(.noFile) .fileThumb,
:root.werkTyme .catalog-thumb:not(.deleted-file):not(.no-file),
:root:not(.werkTyme) .werkTyme-filename {
display: none;
}
.werkTyme-filename {
font-weight: bold;
}
:root.werkTyme .catalog-thread > a {
text-align: center;
-webkit-align-self: stretch;
align-self: stretch;
}
.catalog-thread.watched .werkTyme-filename,
.filter-highlight .werkTyme-filename {
border: 2px solid rgba(255, 0, 0, .5);
}
/* Index/Reply Navigation */
#navlinks {
font-size: 16px;
top: 25px;
right: 10px;
}
:root.catalog-mode #navlinks {
display: none;
}
/* Filter */
.opContainer.filter-highlight {
box-shadow: inset 5px 0 rgba(255, 0, 0, .5);
}
.filter-highlight > .reply {
box-shadow: -5px 0 rgba(255, 0, 0, .5);
}
.catalog-thread.watched .catalog-thumb,
.filter-highlight .catalog-thumb {
border: 2px solid rgba(255, 0, 0, .5);
}
/* Spoiler text */
:root.reveal-spoilers s,
:root.reveal-spoilers s > 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;
}
.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;
}
.stub ~ * {
display: none !important;
}
.stub input {
display: inline-block;
}
.thread[hidden] + hr {
display: none;
}
:root.reply-hide div.sideArrows {
display: none;
}
/* 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,
#dump-button,
#url-button,
.remove,
.captcha-img {
cursor: pointer;
}
#qr {
position: fixed;
padding: 1px;
border: 1px solid transparent;
min-width: 300px;
border-radius: 3px 3px 0 0;
}
#qrtab {
border-radius: 3px 3px 0 0;
}
#qrtab {
margin-bottom: 1px;
}
#qr .close {
float: right;
padding: 0 3px;
}
#qr .warning {
min-height: 1.6em;
vertical-align: middle;
padding: 0 1px;
border-width: 1px;
border-style: solid;
}
.qr-link-container {
text-align: center;
}
.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;
}
.persona {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#dump-button {
width: 10%;
margin: 0;
margin-right: 4px;
font: 13px sans-serif;
padding: 1px 0px 2px;
opacity: 0.6;
}
#url-button {
width: 10%;
margin: 0;
margin-right: 4px;
font: 13px sans-serif;
padding: 1px 0px 2px;
opacity: 0.6;
}
.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) {
display: none;
}
#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 {
resize: both;
}
/* Noscript Recaptcha */
.captcha-img {
margin: 0px;
text-align: center;
background-image: #fff;
font-size: 0px;
min-height: 59px;
min-width: 302px;
}
.captcha-input{
width: 100%;
margin: 1px 0 0;
}
.captcha-input.error:focus {
border-color: rgb(255,0,0) !important;
}
#qr-captcha-iframe {
display: none;
}
/* Recaptcha v2 */
#qr .captcha-root {
position: relative;
}
#qr .captcha-container > div > div {
margin: auto;
}
#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;
}
#qr:not(.captcha-open) .captcha-counter > a {
display: block;
width: 100%;
}
.field {
-moz-box-sizing: border-box;
margin: 0px;
padding: 2px 4px 3px;
}
#qr textarea {
min-width: 100%;
}
#qr [type="submit"] {
width: 25%;
vertical-align: top;
}
:root.webkit #qr [type="submit"] {
height: 24px;
}
#qr label input[type="checkbox"] {
position: relative;
top: 2px;
}
/* Fake File Input */
input#qr-filename {
border: none !important;
width: 80%;
padding: 0px 4px;
position: relative;
bottom: 1px;
background: none !important;
}
input#qr-filename:not(.edit) {
pointer-events: none;
}
#qr-filename,
#qr-filesize,
.has-file #qr-no-file {
display: none;
}
#qr-no-file,
.has-file #qr-filename,
.has-file #qr-filesize {
display: inline-block;
margin: 0 0 2px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
#qr-no-file {
color: #AAA;
padding: 1px 4px;
}
#qr-filename-container {
-moz-box-sizing: border-box;
display: inline-block;
position: relative;
width: 100px;
min-width: 74.6%;
max-width: 74.6%;
margin-right: 0.4%;
margin-top: 1px;
overflow: hidden;
padding: 2px 1px 0;
height: 22px;
}
#qr-filename-container:hover {
cursor: text;
}
#qr-extras-container {
position: absolute;
right: 0px;
}
#qr-filerm {
margin-right: 3px;
z-index: 2;
}
#file-n-submit {
height: 23px;
}
#qr input[type="file"] {
visibility: hidden;
position: absolute;
}
/* Thread Select / Spoiler Label */
#qr select[data-name="thread"] {
float: right;
}
#qr.has-spoiler .has-file #qr-spoiler-label {
width: 6.7%;
min-width: 6.7%;
max-width: 6.7%;
display: inline-block;
text-align: center;
vertical-align: top;
}
#qr.has-spoiler #file-n-submit:not(.has-file) #qr-spoiler-label {
display: none;
}
#qr.has-spoiler .has-file #qr-filename-container {
max-width: 67.9%;
min-width: 67.9%;
}
#qr-spoiler-label input {
position: relative;
top: 3px;
}
/* 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: hidden;
white-space: nowrap;
width: 248px;
max-width: 100%;
min-width: 100%;
}
#dump-list:hover {
overflow-x: auto;
}
.qr-preview {
-moz-box-sizing: border-box;
counter-increment: thumbnails;
cursor: move;
display: inline-block;
height: 90px;
width: 90px;
padding: 2px;
opacity: .5;
overflow: hidden;
position: relative;
text-shadow: 0 0 2px #000;
-moz-transition: opacity .25s ease-in-out;
vertical-align: top;
background-size: cover;
}
.qr-preview:hover,
.qr-preview:focus {
opacity: .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,.5);
}
.qr-preview.over {
border-color: #fff;
}
.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 > label {
background: rgba(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;
top: 50%;
right: 10px;
-moz-transform: translateY(-50%);
}
.textarea {
position: relative;
}
:root.webkit .textarea {
margin-bottom: -2px;
}
#char-count {
color: #000;
background: hsla(0, 0%, 100%, .5);
font-size: 8pt;
position: absolute;
bottom: 1px;
right: 1px;
pointer-events: none;
}
/* 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;
}
.reply .menu-button,
.op .menu-button,
#thread-watcher .menu-button {
margin-left: -1px !important;
width: 20px;
height: 15px;
text-align: center;
}
.menu-button + .container:not(:empty) {
margin-left: -5px;
}
#menu {
position: fixed;
outline: none;
}
#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;
}
.left>.entry.has-submenu {
padding-right: 17px !important;
}
.entry input[type="checkbox"],
.entry input[type="radio"] {
margin: 0px;
position: relative;
top: 2px;
}
.has-submenu::after {
content: "";
border-left: .5em solid;
border-top: .3em solid transparent;
border-bottom: .3em solid transparent;
display: inline-block;
margin: .3em;
position: absolute;
right: 3px;
}
.left .has-submenu::after {
border-left: 0;
border-right: .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;
}
.export, .import, .reset {
cursor: pointer;
text-decoration: none !important;
}
/* Custom Board Titles */
.boardTitle[contenteditable="true"],
.boardSubtitle[contenteditable="true"] {
cursor: text !important;
}
div.boardTitle {
font-weight: 400 !important;
}
/* Link Title Favicons */
.linkify.YouTube {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/youtube.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.Vimeo {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/vimeo.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.SoundCloud {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/soundcloud.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.audio {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/audio.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.LiveLeak {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/liveleak.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.Vocaroo {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/vocaroo.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.pastebin {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/pastebin.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.gist {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/gist.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.image {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/image.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.InstallGentoo {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/installgentoo.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
.linkify.video {
background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/video.png", {encoding: "base64"}) %>') center left no-repeat!important;
padding-left: 18px;
}
/* Embedding */
#embedding {
padding: 1px 4px 1px 4px;
position: fixed;
}
#embedding.empty {
display: none;
}
#embedding > div:first-child {
display: flex;
}
#embedding .move {
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,.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 .2s linear;
}
.gal-highlight {
background: rgba(0, 190, 255,.8);
}
.gal-prev {
order: 0;
border-right: 1px solid #222;
}
.gal-next {
order: 2;
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 {
order: 1;
-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 {
margin: auto;
line-height: 0;
max-width: 100%;
}
:root.gal-pdf .gal-image a {
width: 100%;
height: 100%;
}
.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 {
/*
Chrome doesn't support viewpoint units in calc()
http://bugs.chromium.org/168840
"It looks like the original author of viewport units in WebKit is not coming back to fix this stuff."
Well, fuck.
*/
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-buttons,
.gal-name,
.gal-count {
position: fixed;
right: 195px;
}
.gal-hide-thumbnails .gal-buttons,
.gal-hide-thumbnails .gal-count,
.gal-hide-thumbnails .gal-name {
right: 44px;
}
.gal-name {
bottom: 6px;
background: rgba(0,0,0,0.6) !important;
border-radius: 3px;
padding: 1px 5px 2px 5px;
text-decoration: none !important;
color: white !important;
}
.gal-name:hover,
.gal-buttons a:hover {
color: rgb(95, 95, 101) !important;
}
:root.gal-pdf .gal-buttons a:hover {
color: rgb(204, 204, 204) !important;
}
.gal-count {
bottom: 27px;
background: rgba(0,0,0,0.6) !important;
border-radius: 3px;
padding: 1px 5px 2px 5px;
color: #ffffff !important;
}
:root:not(.gal-fit-width):not(.gal-pdf) .gal-name {
bottom: 23px !important;
}
:root:not(.gal-fit-width):not(.gal-pdf) .gal-count {
bottom: 44px !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-name,
:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-count {
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-name,
:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-count {
right: 28px !important;
}
.field[name="Slide Delay"] {
width: 4em;
}
:root.gallery-open.fixed #header-bar:not(.autohide),
:root.gallery-open.fixed #header-bar:not(.autohide) .fa::before {
visibility: hidden;
}