diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 2c7925d9..8488e2a9 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -20,6 +20,7 @@ main { max-width: 100%; margin-bottom: 1px; overflow: hidden; + flex-shrink: 0; } .col { @@ -150,7 +151,14 @@ pre { cursor: pointer; } #settings::after { - content: "Settings" + content: "Settings"; +} + +#dragHandle { + flex-grow: 1; + background: var(--darken); + height: 1.75em; + cursor: move; } .statwrap { @@ -794,6 +802,11 @@ input[type="button"], input[type="range"], input[type="number"], input[type="tex border-radius: 0px; } +textarea { + max-height: 100%; + max-width: 100%; +} + input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; @@ -825,8 +838,7 @@ input[type="file"] { z-index: 2; box-sizing: border-box; padding: 5px; - border: 1px solid var(--post-outline-color); - border-top: none; + overflow-y: auto; } #postform:target { @@ -954,7 +966,7 @@ table, .boardtable { text-align: center; } - +/* @media only screen and (max-height: 400px) { #postform:target { display: flex; @@ -962,9 +974,10 @@ table, .boardtable { z-index: 0; } } +*/ @media only screen and (max-width: 600px) { - + #settings::after { content: "\2699"!important; } diff --git a/gulp/res/js/dragable.js b/gulp/res/js/dragable.js new file mode 100644 index 00000000..80ecb357 --- /dev/null +++ b/gulp/res/js/dragable.js @@ -0,0 +1,123 @@ +setDefaultLocalStorage('dragtop', null); +setDefaultLocalStorage('dragleft', null); + +class Dragable { + + constructor(handle, target) { + this.draging = false; + this.xo = 0; + this.yo = 0; + this.handle = document.querySelector(handle); + this.target = document.querySelector(target); + const savedTop = localStorage.getItem('dragtop'); + if (savedTop != 'null') { + this.target.style.top = savedTop; + } + const savedLeft = localStorage.getItem('dragleft'); + if (savedLeft != 'null') { + this.target.style.left = savedLeft; + } + this.target.style.right = 'unset'; + this.target.addEventListener('opened', e => this.updateMaxSizes(e)); + this.handle.addEventListener('mousedown', e => this.startDrag(e)); + this.handle.addEventListener('touchstart', e => this.startDrag(e)); + document.addEventListener('mouseup', e => this.stopDrag(e)); + document.addEventListener('touchend', e => this.stopDrag(e)); + window.addEventListener('resize', e => this.updateMaxSizes(e)); + window.addEventListener('orientationchange', e => this.updateMaxSizes(e)); + } + + //get a position in bounds + inBounds(pos, offset, size, limit) { + if (pos-offset <= 0) { + return 0; + } else if (pos-offset+size > limit) { + return limit-size; + } else { + return pos-offset; + } + } + + updateMaxSizes() { + let rect = this.target.getBoundingClientRect(); + if (rect.width === 0) { + return; + } + //reset to top left if resized or rotated and and edge goes off the screen + if (rect.right > document.documentElement.clientWidth) { + this.target.style.left = 0; + } + if (rect.bottom > document.documentElement.clientHeight) { + this.target.style.top = 0; + } + //set max widths, get rect again since it might have changed + rect = this.target.getBoundingClientRect(); + this.target.style.maxHeight = `${document.documentElement.clientHeight - rect.top}px`; + this.target.style.maxWidth = `${document.documentElement.clientWidth - rect.left}px`; + } + + //start drag and attach appropriate listener for click/drag + startDrag(e) { + this.draging = true; + this.target.style.position = 'fixed'; + const rect = this.target.getBoundingClientRect(); + switch (e.type) { + case 'mousedown': + this.xo = e.clientX - rect.left; + this.yo = e.clientY - rect.top; + window.addEventListener('mousemove', e => this.doDrag(e)); + break; + case 'touchstart': + this.xo = e.targetTouches[0].clientX - rect.left; + this.yo = e.targetTouches[0].clientY - rect.top; + window.addEventListener('touchmove', e => this.doDrag(e)); + break; + default: + //user has alien technology + break; + } + return false; + } + + //do the actual drag/movement + doDrag(e) { + if (!this.draging) { + return; + } + this.updateMaxSizes(); + switch (e.type) { + case 'mousemove': + this.target.style.left = `${this.inBounds(e.clientX, this.xo, this.target.offsetWidth, document.documentElement.clientWidth)}px`; + this.target.style.top = `${this.inBounds(e.clientY, this.yo, this.target.offsetHeight, document.documentElement.clientHeight)}px`; + break; + case 'touchmove': + this.target.style.left = `${this.inBounds(e.targetTouches[0].clientX, this.xo, this.target.offsetWidth, document.documentElement.clientWidth)}px`; + this.target.style.top = `${this.inBounds(e.targetTouches[0].clientY, this.yo, this.target.offsetHeight, document.documentElement.clientHeight)}px`; + break; + default: + break; + } + setLocalStorage('dragtop', this.target.style.top); + setLocalStorage('dragleft', this.target.style.left); + return false; + } + + //stopped dragging + stopDrag(e) { + if (this.draging) { + this.draging = false; + window.removeEventListener('mousemove', e => this.doDrag(e)); + window.removeEventListener('touchmove', e => this.doDrag(e)); + } + } + +} + +new Dragable('#dragHandle', '#postform'); + +/* +todo: +-event when resizing to prevent going bigger than screen size +-event when resizing window to prevent going off screen (reset to right side) +-dont show drag handle when mobile and smaller than 400 height (set to middle) +*/ diff --git a/gulp/res/js/post.js b/gulp/res/js/post.js index 6e8c7c7f..f2eab2d8 100644 --- a/gulp/res/js/post.js +++ b/gulp/res/js/post.js @@ -19,7 +19,7 @@ pug_mixins["post"] = pug_interp = function(post, truncate, manage=false, globalm var block = (this && this.block), attributes = (this && this.attributes) || {}; pug_html = pug_html + "\u003Cdiv" + (" class=\"anchor\""+pug_attr("id", post.postId, true, false)) + "\u003E\u003C\u002Fdiv\u003E\u003Cdiv" + (pug_attr("class", pug_classes([`post-container ${post.thread || ban === true ? '' : 'op'}`], [true]), false, false)+pug_attr("data-board", post.board, true, false)+pug_attr("data-post-id", post.postId, true, false)+pug_attr("data-user-id", post.userId, true, false)) + "\u003E"; const postURL = `/${post.board}/thread/${post.thread || post.postId}.html`; -pug_html = pug_html + "\u003Cdiv class=\"post-info\"\u003E\u003Clabel class=\"noselect\"\u003E"; +pug_html = pug_html + "\u003Cdiv class=\"post-info\"\u003E\u003Cspan class=\"noselect\"\u003E\u003Clabel\u003E"; if (globalmanage) { pug_html = pug_html + "\u003Cinput" + (" class=\"post-check\""+" type=\"checkbox\" name=\"globalcheckedposts\""+pug_attr("value", post._id, true, false)) + "\u002F\u003E "; ipHashSub = post.ip.hash.slice(-10); @@ -31,17 +31,21 @@ pug_html = pug_html + "\u003Cinput" + (" class=\"post-check\""+" type=\"checkbox } pug_html = pug_html + " "; if (!post.thread) { +if (post.sticky || post.bumplocked || post.locked || post.cyclic) { +pug_html = pug_html + "\u003Cspan class=\"post-icons\"\u003E"; if (post.sticky) { -pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Fsticky.png\" height=\"12\" width=\"12\" title=\"Sticky\"\u002F\u003E "; +pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Fsticky.png\" height=\"14\" width=\"14\" title=\"Sticky\"\u002F\u003E "; } if (post.bumplocked) { -pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Fbumplocked.png\" height=\"12\" width=\"12\" title=\"Bumplocked\"\u002F\u003E "; +pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Fbumplock.png\" height=\"14\" width=\"14\" title=\"Bumplocked\"\u002F\u003E "; } if (post.locked) { -pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Flocked.png\" height=\"12\" width=\"12\" title=\"Locked\"\u002F\u003E "; +pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Flock.png\" height=\"14\" width=\"14\" title=\"Locked\"\u002F\u003E "; } if (post.cyclic) { -pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Fcyclic.png\" height=\"13\" width=\"13\" title=\"Cyclic\"\u002F\u003E "; +pug_html = pug_html + "\u003Cimg src=\"\u002Fimg\u002Fcyclic.png\" height=\"14\" width=\"14\" title=\"Cyclic\"\u002F\u003E "; +} +pug_html = pug_html + "\u003C\u002Fspan\u003E"; } } if (post.subject) { @@ -53,7 +57,7 @@ pug_html = pug_html + "\u003Ca" + (pug_attr("href", `mailto:${post.email}`, true else { pug_html = pug_html + "\u003Cspan class=\"post-name\"\u003E" + (pug_escape(null == (pug_interp = post.name) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E"; } -pug_html = pug_html + " "; +pug_html = pug_html + " \u003C\u002Flabel\u003E"; if (post.country && post.country.code) { pug_html = pug_html + "\u003Cspan" + (pug_attr("class", pug_classes([`flag flag-${post.country.code.toLowerCase()}`], [true]), false, false)+pug_attr("title", post.country.name, true, false)+pug_attr("alt", post.country.name, true, false)) + "\u003E\u003C\u002Fspan\u003E "; } @@ -68,7 +72,7 @@ pug_html = pug_html + "\u003Ctime" + (" class=\"post-date reltime\""+pug_attr("d if (post.userId) { pug_html = pug_html + "\u003Cspan" + (" class=\"user-id\""+pug_attr("style", pug_style(`background-color: #${post.userId}`), true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.userId) ? "" : pug_interp)) + "\u003C\u002Fspan\u003E "; } -pug_html = pug_html + "\u003C\u002Flabel\u003E\u003Cspan class=\"post-links\"\u003E\u003Ca" + (" class=\"noselect no-decoration\""+pug_attr("href", `${postURL}#${post.postId}`, true, false)) + "\u003ENo.\u003C\u002Fa\u003E\u003Cspan class=\"post-quoters\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.postId) ? "" : pug_interp)) + "\u003C\u002Fa\u003E"; +pug_html = pug_html + "\u003C\u002Fspan\u003E\u003Cspan class=\"post-links\"\u003E\u003Ca" + (" class=\"noselect no-decoration\""+pug_attr("href", `${postURL}#${post.postId}`, true, false)) + "\u003ENo.\u003C\u002Fa\u003E\u003Cspan class=\"post-quoters\"\u003E\u003Ca" + (" class=\"no-decoration\""+pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E" + (pug_escape(null == (pug_interp = post.postId) ? "" : pug_interp)) + "\u003C\u002Fa\u003E"; if (!post.thread) { pug_html = pug_html + " \u003Cspan class=\"noselect\"\u003E\u003Ca" + (pug_attr("href", `${postURL}#postform`, true, false)) + "\u003E[Reply]\u003C\u002Fa\u003E\u003C\u002Fspan\u003E"; } diff --git a/gulp/res/js/quote.js b/gulp/res/js/quote.js index 18be30bf..8521f448 100644 --- a/gulp/res/js/quote.js +++ b/gulp/res/js/quote.js @@ -9,6 +9,7 @@ window.addEventListener('DOMContentLoaded', (event) => { history.replaceState({}, '', '#postform'); postForm.style.display = 'flex'; newPostButton.style.visibility = 'hidden'; + postForm.dispatchEvent(new Event('opened')); }; const closePostForm = (e) => { e.preventDefault(); diff --git a/gulpfile.js b/gulpfile.js index 6d06eda4..4535cce4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -168,6 +168,7 @@ function scripts() { `${paths.scripts.src}/settings.js`, `${paths.scripts.src}/live.js`, `${paths.scripts.src}/*.js`, + `!${paths.scripts.src}/dragable.js`, `!${paths.scripts.src}/hide.js`, `!${paths.scripts.src}/time.js`, ]) @@ -175,6 +176,7 @@ function scripts() { .pipe(uglify()) .pipe(gulp.dest(paths.scripts.dest)); return gulp.src([ + `${paths.scripts.src}/dragable.js`, `${paths.scripts.src}/hide.js`, `${paths.scripts.src}/time.js`, ]) diff --git a/style.css b/style.css new file mode 100644 index 00000000..ac5b84c0 --- /dev/null +++ b/style.css @@ -0,0 +1,1380 @@ +<<<<<<< style.css +body { + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + color: var(--font-color); + background: linear-gradient(var(--background-top) 3em, var(--background-rest) 230px); + flex: 1; + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0; +} + +main { + margin: 3em 0 0 0; +} + +.row { + display: flex; + flex-direction: row; + max-width: 100%; + margin-bottom: 1px; + overflow: hidden; + flex-shrink: 0; +} + +.col { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.flexcenter { + display: flex; + flex-direction: column; + align-items: center; +} + +.em { + font-style: italic; +} + +.strikethrough { + text-decoration: line-through; +} + +.underline { + text-decoration: underline; +} + +.bold { + font-weight: bold; +} + +pre { + font-family: inherit; + margin: 1em 2em; + white-space: pre-wrap; + overflow-wrap: break-word; +} + +.navbar { + background: var(--navbar-color); + box-shadow: 0 0 3px 1px var(--darken); + border-bottom: 1px solid var(--post-outline-color); + position: fixed; + width: 100%; + z-index: 1; + top: 0; +} + +.replies { + padding-top: 5px; + font-size: smaller; + clear: both; +} + +.code { + text-align: left; + border-style: solid; + border-color: var(--darken); + display: block; + margin: 0.5em 0; + overflow-x: auto; + white-space: pre; +} + +.code:not(.hljs) { + white-space: unset; +} + +.code, .mono { + background: var(--darken); + padding: 2px; + font-family: monospace; + max-width: max-content; + max-width: -moz-max-content; +} +.fw { + width: 100%; +} +.fw textarea { + height: 1em; +} +.pr-20 { + padding-right: 20px; +} +.ml-1 { + margin-left: 1px; +} +.ml-5 { + margin-left: 5px!important; +} +.mr-1 { + margin-right: 1px!important; +} +.mr-5 { + margin-right: 5px; +} +.mv-10 { + margin: 10px 0; +} +.mt-10 { + margin-top: 10px; +} +.mt-5 { + margin-top: 5px; +} +.mt-1 { + margin-top: 1px; +} +.mv-5 { + margin: 5px 0; +} +.mr-0 { + margin-right: 0px!important; +} +.mv-0 { + margin: 0 auto; +} +.mb-10 { + margin-bottom: 10px; +} +.ph-5 { + padding: 0 5px; +} +.pv-5 { + padding: 5px 0; +} + +#settings { + cursor: pointer; +} +#settings::after { + content: "Settings" +} + +#dragHandle { + flex-grow: 1; + background: var(--darken); + height: 1.75em; + cursor: move; +} + +.statwrap { + display: flex; + justify-content: space-between; + flex-flow: row wrap; +} + +.pages, #livetext, #threadstats { + box-sizing: border-box; + padding: 10px; + width: max-content; + width: -moz-max-content; + max-width: 100%; + margin-bottom: 5px; +} + +a, a:visited, a .post-name { + text-decoration: underline; + color: var(--link-color); +} + +.post-message a { + text-decoration: underline; + color: var(--post-link-color); +} + +.pages a, .stickynav a { + text-decoration: none; +} + +object { + object-fit: contain; +} + +.board-header { + display: flex; + flex-direction: column; + align-items: center; +} + +.catalog-tile { + padding: 5px; + margin: 5px; + text-align: center; + height: 250px; + width: 250px; + overflow: hidden; + border: 1px solid var(--post-outline-color); + box-sizing: border-box; + flex-grow: 1; + max-width: 300px; +} + +.catalog-tile:hover { + overflow-y: auto; +} + +p { + margin: 5px; +} + +.no-m-p { + margin: 0px; + padding: 0px; +} + +.catalog-thumb { + display: block; + box-shadow: 0 0 3px black; + width: 64px; + height: 64px; + object-fit: cover; + margin: 5px; +} + +.catalog { + display:flex; + align-items:flex-start; + justify-content: center; + flex-flow: row wrap; +} + +.detected { + background: #FAF8F8; + color: #3060A8; +} + +.horscroll { + overflow-x:auto; +} + +.spoiler { + background: black; + color: black; + cursor: none; +} + +.spoiler:hover, .spoiler:hover a { + color: white; +} + +.spoiler:not(:hover) * { + color: black; + background: black!important; +} + +.filelabel { + cursor: pointer; + border-style: dashed !important; + justify-content: center; + padding: 5px; + min-width: 220px; + flex-grow: 1; + flex-direction: column; +} + +.form-file { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + word-break: keep-all; + align-items: center; + display: flex; + margin-top: 1px; +} + +.banposts .thread { + display: none; + text-align: left; +} + +.banposts:hover .thread { + display: block; + position: fixed; + z-index: 1; + left:10px; + right:10px; +} + +.banmessage { + color: red; + font-weight: bold; +} + +.close { + text-decoration: none; + justify-content: center; + font-weight: bolder; + margin-left: auto; + width: 25px; + cursor: pointer; +} + +.reports { + margin-top: 5px; + background: var(--highlighted-post-color) !important; + border-color: var(--highlighted-post-outline-color)!important; + border-width: 1px 0; + border-style: solid none; +} + +.dice { + color: var(--dice-color); +} + +.title, .required { + font-weight: bold; +} + +.required { + color: maroon; + margin: 0 .5em; +} + +.title { + color: var(--title-color); +} + +#bottom { + margin-bottom: 10px; +} + +.pinktext { + color: var(--pinktext-color); +} + +.greentext { + color: var(--greentext-color); +} + +a .post-name:hover, a:hover { + color: var(--link-hover)!important; +} + +.thread, .action-wrapper, .form-wrapper, .table-container { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +table { + background: var(--background-rest); + border: 1px solid var(--box-border-color); + border-spacing: 0; + width: 700px; +} + +.w900 { + width: 900px; +} + +th { + background: var(--label-color); +} + +.alt { + background: var(--alt-label-color, --label-color); + color: var(--alt-font-color, --font-color) +} + +td, th { + padding: 5px; + word-break: break-all; + word-break: break-word; +} + +.action-wrapper { + text-align: left; +} + +.flex-center { + align-items: center; +} + +.stickynav { + bottom: 5px; + right: 5px; + position: fixed; + z-index: 1; +} + +.ml-0 { + margin-left: 0; +} + +.dot { + margin-right: 7px; + height: .75em; + width: .75em; + background-color: orange; + border-radius: 50%; + animation: pulsate 2s ease infinite; + display: inline-block; +} + +@keyframes pulsate { + 0% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +.post-container, #float .post-container, .stickynav, .pages, .toggle-summary, .catalog-tile, .modal, #livetext, #threadstats { + background: var(--post-color); + border-width: 1px; + border-style: solid; + border-color: var(--post-outline-color); +} + +.nomarks { + margin: 5px; + padding: 0 15px; + /*list-style: none;*/ +} + +.modal-bg { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background-color: #00000070; + z-index: 3; +} + +.modal { + display: flex; + flex-direction: column; + max-width: calc(100% - 10px); + max-height: calc(100% - 50px); + position: fixed; + top: 3em; + background-color: var(--post-color); + z-index: 4; + box-sizing: border-box; + padding: 5px; + border: 1px solid var(--post-outline-color); + align-self: center; + overflow: auto; +} + +details.actions div { + display: flex; + flex-direction: column; +} + +.actions { + text-align: left; + max-width: 200px; + display: flex; + flex-direction: column; + margin: 2px 0; + padding: 2px; +} + +.action-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.actions label, .actions div { + padding: 2px 0; +} + +.toggle-summary { + padding: 10px; + cursor: pointer; +} + +.sfw { + float: left; + background-color: gray; +} + +.help { + cursor: help; +} + +#float { + box-shadow: 0 0 3px 1px var(--darken); + max-width: calc(100% - 10px); + z-index: 3; + position: fixed; +} + +#postform:target + .toggle-summary { + visibility: hidden; +} + +.toggle-label { + max-width: 100%; + box-sizing: border-box; + display: flex; + flex-flow: column wrap; + width: max-content; + width: -moz-max-content; +} + +.toggle, .togglable { + display: none; +} + +.toggle:checked + * { + display: flex; +} + +.form-post { + display: flex; + flex-direction: column; + max-width: 100%; +} + +.user-id { + text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; + color: white; + padding: 0px 2px; + border: 1px solid rgba(0, 0, 0, 0.4); + border-radius: 1px; +} + +.post-check { + position: relative; + top: 2px; + margin: -3px 1px !important; +} + +.post-files { + float: left; + margin: 0 .5em .5em .5em; + display: flex; + flex-flow: row wrap; + align-items: start; +} + +a, video, img, input, summary, select, option { + outline: 0; +} + +option { + background: var(--post-color); +} + +.post-data { + overflow: hidden; +} + +.post-file { + display: flex; + flex-direction: column; + padding: .5em .5em 0 0; + align-items: center; +} + +.post-file-info:hover { + word-break: break-all; +} + +.post-file-info { + text-align: center; + margin: 2px; + margin-top: 0px; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + word-break: keep-all; + font-size: x-small; +} + +.post-file-src * { + max-width: 100%; +} + +video, img { + max-height: 90vh; +} + +.mh-100 { + max-height: 100%; +} + +.post-file-src { + justify-content: center; + display: flex; + image-orientation: from-image; + position:relative; +} + +.expanded { + max-width: unset!important; + max-height: unset!important; +} + +.file-thumb { + object-fit: contain; + max-width: 200px; + max-height: 200px; +} + +input:invalid, textarea:invalid { + box-shadow: none; +} + +.no-resize { + resize: none; +} + +.container { + padding: 10px; +} + +.board-title { + color: var(--board-title); + font: bolder 28px Tahoma,sans-serif; + letter-spacing: -2px; + text-align: center; + margin: 0; +} + +.no-decoration { + text-decoration: none; +} + +.banner-check { + display: flex; + align-items: center; +} + +.board-banner { + margin: 10px; + max-width: 100%; + border: 1px solid var(--post-outline-color); + width: 300px; + height: 100px; +} + +.board-description { + text-align:center; + margin: 0; +} + +.post-message { + text-align: left; +} + +.post-container { + box-sizing: border-box; + padding: .5em; + max-width: 100%; + min-width: 25em; +} + +.postmenu { + cursor: pointer; + width: 1.5em; + height: 1em; + color: var(--font-color); + border: none; + background: transparent; + position: relative; + top: 2px; + font-size: 9pt; +} + +.catalog-tile.hidden { + height: min-content; +} + +.catalog-tile.hidden .post-message, .catalog-tile.hidden .post-file-src { + display: none; +} + +.catalog-tile.hidden .post-info { + opacity: .5; + margin-bottom: -6px; +} + +.post-container.hidden .post-data { + display: none; +} + +.post-container.hidden .post-info { + margin-bottom: -6px; + opacity: .5; + border: none; + background: none; +} + +.anchor:target + .post-container, +.post-container.highlighted, +.anchor:target + table tbody tr th, +.anchor:target + table { + background-color: var(--highlighted-post-color) !important; + border-color: var(--highlighted-post-outline-color) !important; +} + +.anchor { + height: 50px; + margin-top: -45px; +} + +.post-container.op { + background: none; + border-color: transparent; + width: 100%; +} + +.post-subject { + color: var(--subject-color)!important; + font-weight: bold; +} + +.post-capcode { + font-weight: bold; + color:var(--capcode-color); +} + +.post-tripcode, .post-name { + color: var(--name-color); +} + +.post-name { + font-weight: bold; +} + +.noselect { + user-select: none; +} + +.post-info { + margin: -5px -5px 0 -5px; + padding: 5px; + padding-left: 3px; + display:block; +} + +.post-container.op .post-info { + background: none; + border: none; +} + +.nav-item { + line-height: 3em; + text-decoration: none; + float: left; + padding-left: 10px; + padding-right: 10px; +} + +.left { + float: left; +} + +.cb { + clear: both; +} + +.right { + float: right; +} + +.footer { + text-align: center; + flex-shrink: 0; + margin-top: auto; + line-height: 3em; +} + +input[type="button"][disabled] { + opacity: 0.5; +} + +input[type="button"], input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], textarea, select { + border: 1px solid var(--input-borders); + background: var(--input-background); + color: var(--input-color); + font-size: inherit; + font-family: arial, helvetica, sans-serif; + margin: 0; + flex-grow: 1; + border-radius: 0px; +} + +textarea { + max-width: 100%; + max-height: 100%; +} + +input[type=number]::-webkit-outer-spin-button, +input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance:textfield; +} + +input[type="submit"] { + min-height: 2.5em; + cursor: pointer; +} + +input[type="file"] { + width: 220px; + background: var(--input-background); +} + +#postform { + display: none; + max-width: calc(100% - 10px); + max-height: calc(100% - 50px); + position: fixed; + top: 3em; + right: 5px; + background-color: var(--post-color); + z-index: 2; + box-sizing: border-box; + border: 5px solid var(--post-color); + overflow-y: auto; +} + +#postform:target { + display: flex; +} + +.postform-style { + display: flex; + border: 1px solid var(--input-borders); + background: var(--input-background); + align-items: center; + box-sizing: border-box; +} + +iframe.captcha { + /*dumb hack cos of noscript wrapping in unstyleable span*/ + margin-bottom: -2px; +} + +.captcha { + border: 1px solid var(--input-borders); + background: white; + margin-bottom: 1px; + width: 100%; + box-sizing: border-box; + object-fit: contain; + overflow: hidden; +} + +.label { + padding: 3px; + border: 1px solid var(--box-border-color); + min-width: 80px; + background: var(--label-color); + display: flex; + font-weight: bold; + margin-right: 1px; + align-items: start; + flex-direction: column; + justify-content: center; +} + +hr { + border-top: 1px solid var(--hr); + border-left: none; + border-right: none; + border-bottom: none; + margin: 6px 0 5px 0; +} + +hr + .thread { + margin-top: -5px; +} + +.scrolltable { + max-height: 160px; + overflow-y: auto; + overflow-x: hidden; + border: 1px solid var(--box-border-color); +} + +tr:nth-child(odd) { + background: var(--post-color); +} + +table.boardtable td:nth-child(3), table.boardtable th:nth-child(3), +table.boardtable td:nth-child(4), table.boardtable th:nth-child(4), +table.boardtable td:nth-child(5), table.boardtable th:nth-child(5) { + word-break: keep-all; +} + +table.boardtable th:nth-child(6) { + min-width: 100px; +} +table.boardtable td:nth-child(6) { + text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; + color: white; +} + +.post-file-src[data-type="audio"]::after, +.post-file-src[data-type="video"]::after { + content: "▶"; + display: inline-block; + position: absolute; + top: 50%; + left: 50%; + background: #000; + color: #fff; + border-radius: 100%; + width: 50px; + height: 50px; + line-height: 50px; + text-align:center; + box-sizing:border-box; + font-size: 20px; + padding-left: 4px; + transform: translate(-50%, -50%); + opacity: 0.5; + box-shadow: 0 0 3px #fff; + pointer-events: none; +} + +.post-file-src:hover::after { + opacity: 1; +} + +.post-file-src * { + visibility: visible; +} + +.invisible { + visibility: hidden!important; +} + +.di { + display: inline; +} + +table, .boardtable { + max-width: 100%; +} + +.text-center { + text-align: center; +} + +/* +@media only screen and (max-height: 400px) { + #postform:target { + display: flex; + position: initial; + z-index: 0; + } +} +*/ + +@media only screen and (max-width: 600px) { + + #settings::after { + content: "\2699"!important; + } + [title] { + position:relative + } + [title]:hover:after { + content:attr(title); + color: white; + font-size: small; + border-radius: 2px; + background:black; + position:absolute; + top:-1.75em; + left:50%; + transform:translateX(-50%); + width:max-content; + width:-moz-max-content; + padding:1px 2px; + } + [title]:hover:before { + content: ''; + position: absolute; + top: -6px; + left: calc(50% - 5px); + border-top: 5px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + } + + table.boardtable td:nth-child(3), table.boardtable th:nth-child(3), + table.boardtable td:nth-child(4), table.boardtable th:nth-child(4), + table.boardtable td:nth-child(5), table.boardtable th:nth-child(5), + table.boardtable td:nth-child(6), table.boardtable th:nth-child(6) { + display: none; + } + + .modal { + top: 5px; + max-height: calc(100% - 10px); + } + + .postmenu { + float: right; + } + + .post-file-info { + max-width: 150px; + } + + .file-thumb { + max-width: 128px; + max-height: 128px; + object-fit: cover; + } + + .post-info{ + background: var(--darken); + margin: -7px -7px 5px -7px; + border-bottom: 1px solid var(--post-outline-color); + } + + .anchor:target + .post-container .post-info, .post-container.highlighted .post-info { + border-bottom: 1px solid var(--highlighted-post-outline-color); + } + + .close { + width: 2.25em; + } + + input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], .postform-style, select { + height: 2.25em; + box-sizing: border-box; + } + + .filelabel { + min-width: 0; + } + + .fh { + height: 100%; + } + + .form-post { + width: 100%; + } + + .form-login { + width: 100%; + } + + pre { + margin: 1em; + } + + .post-check { + top: 1px; + margin-left: 2px!important; + } + + .pages { + /*width:100%;*/ + } + + .pad-anchor { + width: 100%; + } + + .post-container { + box-shadow: none; + width: 100%; + min-width: unset; + } + + .catalog-tile { + width: 50%; + margin: 0 0 10px 0; + } + + .catalog-tile:nth-child(odd) { + margin-right: 10px; + width: calc(50% - 10px); + } + + table { + width: 100%; + } + + #postform { + width: 100%; + } + +} + +/* +https://github.com/vichan-devel/vichan/blob/master/static/flags/flags.css +are these (along with condensed flag image) originally from here? +*/ +.flag { + display: inline-block; + width: 16px; + height: 11px; + background:url(/img/flags.png) no-repeat +} + +.flag.flag-ad {background-position: -16px 0} +.flag.flag-ae {background-position: -32px 0} +.flag.flag-af {background-position: -48px 0} +.flag.flag-ag {background-position: -64px 0} +.flag.flag-ai {background-position: -80px 0} +.flag.flag-al {background-position: -96px 0} +.flag.flag-am {background-position: -112px 0} +.flag.flag-an {background-position: -128px 0} +.flag.flag-ao {background-position: -144px 0} +.flag.flag-ar {background-position: -160px 0} +.flag.flag-as {background-position: -176px 0} +.flag.flag-at {background-position: -192px 0} +.flag.flag-au {background-position: -208px 0} +.flag.flag-aw {background-position: -224px 0} +.flag.flag-az {background-position: -240px 0} +.flag.flag-ba {background-position: 0 -11px} +.flag.flag-bb {background-position: -16px -11px} +.flag.flag-bd {background-position: -32px -11px} +.flag.flag-be {background-position: -48px -11px} +.flag.flag-bf {background-position: -64px -11px} +.flag.flag-bg {background-position: -80px -11px} +.flag.flag-bh {background-position: -96px -11px} +.flag.flag-bi {background-position: -112px -11px} +.flag.flag-bj {background-position: -128px -11px} +.flag.flag-bm {background-position: -144px -11px} +.flag.flag-bn {background-position: -160px -11px} +.flag.flag-bo {background-position: -176px -11px} +.flag.flag-br {background-position: -192px -11px} +.flag.flag-bs {background-position: -208px -11px} +.flag.flag-bt {background-position: -224px -11px} +.flag.flag-bv {background-position: -240px -11px} +.flag.flag-bw {background-position: 0 -22px} +.flag.flag-by {background-position: -16px -22px} +.flag.flag-bz {background-position: -32px -22px} +.flag.flag-ca {background-position: -48px -22px} +.flag.flag-catalonia {background-position: -64px -22px} +.flag.flag-cd {background-position: -80px -22px} +.flag.flag-cf {background-position: -96px -22px} +.flag.flag-cg {background-position: -112px -22px} +.flag.flag-ch {background-position: -128px -22px} +.flag.flag-ci {background-position: -144px -22px} +.flag.flag-ck {background-position: -160px -22px} +.flag.flag-cl {background-position: -176px -22px} +.flag.flag-cm {background-position: -192px -22px} +.flag.flag-cn {background-position: -208px -22px} +.flag.flag-co {background-position: -224px -22px} +.flag.flag-cr {background-position: -240px -22px} +.flag.flag-cu {background-position: 0 -33px} +.flag.flag-cv {background-position: -16px -33px} +.flag.flag-cw {background-position: -32px -33px} +.flag.flag-cy {background-position: -48px -33px} +.flag.flag-cz {background-position: -64px -33px} +.flag.flag-de {background-position: -80px -33px} +.flag.flag-dj {background-position: -96px -33px} +.flag.flag-dk {background-position: -112px -33px} +.flag.flag-dm {background-position: -128px -33px} +.flag.flag-do {background-position: -144px -33px} +.flag.flag-dz {background-position: -160px -33px} +.flag.flag-ec {background-position: -176px -33px} +.flag.flag-ee {background-position: -192px -33px} +.flag.flag-eg {background-position: -208px -33px} +.flag.flag-eh {background-position: -224px -33px} +.flag.flag-england {background-position: -240px -33px} +.flag.flag-er {background-position: 0 -44px} +.flag.flag-es {background-position: -16px -44px} +.flag.flag-et {background-position: -32px -44px} +.flag.flag-eu {background-position: -48px -44px} +.flag.flag-fi {background-position: -64px -44px} +.flag.flag-fj {background-position: -80px -44px} +.flag.flag-fk {background-position: -96px -44px} +.flag.flag-fm {background-position: -112px -44px} +.flag.flag-fo {background-position: -128px -44px} +.flag.flag-fr {background-position: -144px -44px} +.flag.flag-ga {background-position: -160px -44px} +.flag.flag-gb {background-position: -176px -44px} +.flag.flag-gd {background-position: -192px -44px} +.flag.flag-ge {background-position: -208px -44px} +.flag.flag-gf {background-position: -224px -44px} +.flag.flag-gg {background-position: -240px -44px} +.flag.flag-gh {background-position: 0 -55px} +.flag.flag-gi {background-position: -16px -55px} +.flag.flag-gl {background-position: -32px -55px} +.flag.flag-gm {background-position: -48px -55px} +.flag.flag-gn {background-position: -64px -55px} +.flag.flag-gp {background-position: -80px -55px} +.flag.flag-gq {background-position: -96px -55px} +.flag.flag-gr {background-position: -112px -55px} +.flag.flag-gs {background-position: -128px -55px} +.flag.flag-gt {background-position: -144px -55px} +.flag.flag-gu {background-position: -160px -55px} +.flag.flag-gw {background-position: -176px -55px} +.flag.flag-gy {background-position: -192px -55px} +.flag.flag-hk {background-position: -208px -55px} +.flag.flag-hm {background-position: -224px -55px} +.flag.flag-hn {background-position: -240px -55px} +.flag.flag-hr {background-position: 0 -66px} +.flag.flag-ht {background-position: -16px -66px} +.flag.flag-hu {background-position: -32px -66px} +.flag.flag-ic {background-position: -48px -66px} +.flag.flag-id {background-position: -64px -66px} +.flag.flag-ie {background-position: -80px -66px} +.flag.flag-il {background-position: -96px -66px} +.flag.flag-im {background-position: -112px -66px} +.flag.flag-in {background-position: -128px -66px} +.flag.flag-io {background-position: -144px -66px} +.flag.flag-iq {background-position: -160px -66px} +.flag.flag-ir {background-position: -176px -66px} +.flag.flag-is {background-position: -192px -66px} +.flag.flag-it {background-position: -208px -66px} +.flag.flag-je {background-position: -224px -66px} +.flag.flag-jm {background-position: -240px -66px} +.flag.flag-jo {background-position: 0 -77px} +.flag.flag-jp {background-position: -16px -77px} +.flag.flag-ke {background-position: -32px -77px} +.flag.flag-kg {background-position: -48px -77px} +.flag.flag-kh {background-position: -64px -77px} +.flag.flag-ki {background-position: -80px -77px} +.flag.flag-km {background-position: -96px -77px} +.flag.flag-kn {background-position: -112px -77px} +.flag.flag-kp {background-position: -128px -77px} +.flag.flag-kr {background-position: -144px -77px} +.flag.flag-kurdistan {background-position: -160px -77px} +.flag.flag-kw {background-position: -176px -77px} +.flag.flag-ky {background-position: -192px -77px} +.flag.flag-kz {background-position: -208px -77px} +.flag.flag-la {background-position: -224px -77px} +.flag.flag-lb {background-position: -240px -77px} +.flag.flag-lc {background-position: 0 -88px} +.flag.flag-li {background-position: -16px -88px} +.flag.flag-lk {background-position: -32px -88px} +.flag.flag-lr {background-position: -48px -88px} +.flag.flag-ls {background-position: -64px -88px} +.flag.flag-lt {background-position: -80px -88px} +.flag.flag-lu {background-position: -96px -88px} +.flag.flag-lv {background-position: -112px -88px} +.flag.flag-ly {background-position: -128px -88px} +.flag.flag-ma {background-position: -144px -88px} +.flag.flag-mc {background-position: -160px -88px} +.flag.flag-md {background-position: -176px -88px} +.flag.flag-me {background-position: -192px -88px} +.flag.flag-mg {background-position: -208px -88px} +.flag.flag-mh {background-position: -224px -88px} +.flag.flag-mk {background-position: -240px -88px} +.flag.flag-ml {background-position: 0 -99px} +.flag.flag-mm {background-position: -16px -99px} +.flag.flag-mn {background-position: -32px -99px} +.flag.flag-mo {background-position: -48px -99px} +.flag.flag-mp {background-position: -64px -99px} +.flag.flag-mq {background-position: -80px -99px} +.flag.flag-mr {background-position: -96px -99px} +.flag.flag-ms {background-position: -112px -99px} +.flag.flag-mt {background-position: -128px -99px} +.flag.flag-mu {background-position: -144px -99px} +.flag.flag-mv {background-position: -160px -99px} +.flag.flag-mw {background-position: -176px -99px} +.flag.flag-mx {background-position: -192px -99px} +.flag.flag-my {background-position: -208px -99px} +.flag.flag-mz {background-position: -224px -99px} +.flag.flag-na {background-position: -240px -99px} +.flag.flag-nc {background-position: 0 -110px} +.flag.flag-ne {background-position: -16px -110px} +.flag.flag-nf {background-position: -32px -110px} +.flag.flag-ng {background-position: -48px -110px} +.flag.flag-ni {background-position: -64px -110px} +.flag.flag-nl {background-position: -80px -110px} +.flag.flag-no {background-position: -96px -110px} +.flag.flag-np {background-position: -112px -110px} +.flag.flag-nr {background-position: -128px -110px} +.flag.flag-nu {background-position: -144px -110px} +.flag.flag-nz {background-position: -160px -110px} +.flag.flag-om {background-position: -176px -110px} +.flag.flag-pa {background-position: -192px -110px} +.flag.flag-pe {background-position: -208px -110px} +.flag.flag-pf {background-position: -224px -110px} +.flag.flag-pg {background-position: -240px -110px} +.flag.flag-ph {background-position: 0 -121px} +.flag.flag-pk {background-position: -16px -121px} +.flag.flag-pl {background-position: -32px -121px} +.flag.flag-pm {background-position: -48px -121px} +.flag.flag-pn {background-position: -64px -121px} +.flag.flag-pr {background-position: -80px -121px} +.flag.flag-ps {background-position: -96px -121px} +.flag.flag-pt {background-position: -112px -121px} +.flag.flag-pw {background-position: -128px -121px} +.flag.flag-py {background-position: -144px -121px} +.flag.flag-qa {background-position: -160px -121px} +.flag.flag-re {background-position: -176px -121px} +.flag.flag-ro {background-position: -192px -121px} +.flag.flag-rs {background-position: -208px -121px} +.flag.flag-ru {background-position: -224px -121px} +.flag.flag-rw {background-position: -240px -121px} +.flag.flag-sa {background-position: 0 -132px} +.flag.flag-sb {background-position: -16px -132px} +.flag.flag-sc {background-position: -32px -132px} +.flag.flag-scotland {background-position: -48px -132px} +.flag.flag-sd {background-position: -64px -132px} +.flag.flag-se {background-position: -80px -132px} +.flag.flag-sg {background-position: -96px -132px} +.flag.flag-sh {background-position: -112px -132px} +.flag.flag-si {background-position: -128px -132px} +.flag.flag-sk {background-position: -144px -132px} +.flag.flag-sl {background-position: -160px -132px} +.flag.flag-sm {background-position: -176px -132px} +.flag.flag-sn {background-position: -192px -132px} +.flag.flag-so {background-position: -208px -132px} +.flag.flag-somaliland {background-position: -224px -132px} +.flag.flag-sr {background-position: -240px -132px} +.flag.flag-ss {background-position: 0 -143px} +.flag.flag-st {background-position: -16px -143px} +.flag.flag-sv {background-position: -32px -143px} +.flag.flag-sx {background-position: -48px -143px} +.flag.flag-sy {background-position: -64px -143px} +.flag.flag-sz {background-position: -80px -143px} +.flag.flag-tc {background-position: -96px -143px} +.flag.flag-td {background-position: -112px -143px} +.flag.flag-tf {background-position: -128px -143px} +.flag.flag-tg {background-position: -144px -143px} +.flag.flag-th {background-position: -160px -143px} +.flag.flag-tj {background-position: -176px -143px} +.flag.flag-tk {background-position: -192px -143px} +.flag.flag-tl {background-position: -208px -143px} +.flag.flag-tm {background-position: -224px -143px} +.flag.flag-tn {background-position: -240px -143px} +.flag.flag-to {background-position: 0 -154px} +.flag.flag-tr {background-position: -16px -154px} +.flag.flag-tt {background-position: -32px -154px} +.flag.flag-tv {background-position: -48px -154px} +.flag.flag-tw {background-position: -64px -154px} +.flag.flag-tz {background-position: -80px -154px} +.flag.flag-ua {background-position: -96px -154px} +.flag.flag-ug {background-position: -112px -154px} +.flag.flag-um {background-position: -128px -154px} +.flag.flag-us {background-position: -144px -154px} +.flag.flag-uy {background-position: -160px -154px} +.flag.flag-uz {background-position: -176px -154px} +.flag.flag-va {background-position: -192px -154px} +.flag.flag-vc {background-position: -208px -154px} +.flag.flag-ve {background-position: -224px -154px} +.flag.flag-vg {background-position: -240px -154px} +.flag.flag-vi {background-position: 0 -165px} +.flag.flag-vn {background-position: -16px -165px} +.flag.flag-vu {background-position: -32px -165px} +.flag.flag-wales {background-position: -48px -165px} +.flag.flag-wf {background-position: -64px -165px} +.flag.flag-ws {background-position: -80px -165px} +.flag.flag-ye {background-position: -96px -165px} +.flag.flag-yt {background-position: -112px -165px} +.flag.flag-za {background-position: -128px -165px} +.flag.flag-zanzibar {background-position: -144px -165px} +.flag.flag-zm {background-position: -160px -165px} +.flag.flag-zw {background-position: -176px -165px} +======= +>>>>>>> newstyle.css diff --git a/views/includes/navbar.pug b/views/includes/navbar.pug index 30b8c758..914e000f 100644 --- a/views/includes/navbar.pug +++ b/views/includes/navbar.pug @@ -1,4 +1,4 @@ -nav.navbar#top +nav.navbar a.nav-item(href='/index.html') Home a.nav-item(href='/news.html') News a.nav-item(href='/boards.html') Boards diff --git a/views/includes/postform.pug b/views/includes/postform.pug index 84811b13..813aed64 100644 --- a/views/includes/postform.pug +++ b/views/includes/postform.pug @@ -5,6 +5,8 @@ section.form-wrapper.flex-center form.form-post#postform(action=`/forms/board/${board._id}/post`, enctype='multipart/form-data', method='POST') input(type='hidden' name='thread' value=isThread ? thread.postId : null) + section.row.jsonly + .noselect#dragHandle unless board.settings.forceAnon section.row .label Name diff --git a/views/layout.pug b/views/layout.pug index 4e81e451..a67bb1d7 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -3,7 +3,7 @@ html head include includes/head.pug block head - body + body#top include includes/navbar.pug main .container