From f71cdcaa812353ff7ca8414adec9dbecc1dcf1a6 Mon Sep 17 00:00:00 2001 From: Zealotux Date: Fri, 26 Sep 2014 02:19:49 +0200 Subject: Update style.css Added "cursor" to "options_tab_icon" according to https://github.com/ctrlcctrlv/8chan/issues/80 --- stylesheets/style.css | 1 + 1 file changed, 1 insertion(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index eea2fb0d..2ac1f180 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -685,6 +685,7 @@ form.ban-appeal textarea { .options_tab_icon { padding: 5px; color: black; + cursor: pointer; } .options_tab_icon.active { color: red; -- cgit v1.3 From b888500133bcf40f2030754075bbd1b3a7a1f9b7 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 05:06:45 -0400 Subject: Corrected thread padding via style.css Conflicts: stylesheets/style.css --- stylesheets/style.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index eea2fb0d..dbd3a11d 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -7,25 +7,33 @@ body { padding-left: 5px; padding-right: 5px; } + table * { margin: 0; } + a, a:visited { text-decoration: underline; color: #34345C; } + a:hover, p.intro a.post_no:hover { color: #ff0000; } + a.post_no { text-decoration: none; margin: 0; padding: 0; } + p.intro a.post_no { color: inherit; } -p.intro a.post_no, p.intro a.email, p.intro a.post_anchor { + +p.intro a.post_no, +p.intro a.email, +p.intro a.post_anchor { margin: 0; } p.intro a.email span.name { @@ -502,7 +510,6 @@ form.ban-appeal textarea { .theme-catalog div.thread img { float:none!important; margin: auto; - margin-bottom: 12px; max-height: 150px; max-width: 200px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.55); @@ -520,7 +527,7 @@ form.ban-appeal textarea { overflow:hidden; position: relative; font-size:11px; - padding: 15px; + padding:5px; max-height:300px; background: rgba(182, 182, 182, 0.12); border: 2px solid rgba(111, 111, 111, 0.34); @@ -714,3 +721,6 @@ form.ban-appeal textarea { height: 100%; margin-top: 0px; } +.mentioned { + word-wrap: break-word; +} -- cgit v1.3 From e5ce012a091a9b56059595e8b0b2b8fd904c228a Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 04:41:32 -0400 Subject: Adjust theme via catalog.css & style.css Changes to catalog.css: - Forced all threads to a height of 300px and reduced padding to improve consistency. I think it improves the readability quite a bit but I may be alone in thinking this way. - Changes to style.css: - Removed additional padding to allow new catalog spacing Conflicts: stylesheets/style.css --- stylesheets/catalog.css | 26 ++++++++++++-------------- stylesheets/style.css | 28 ++++++++++++++++++---------- 2 files changed, 30 insertions(+), 24 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/catalog.css b/stylesheets/catalog.css index 29ff4cbf..b4ec6f55 100644 --- a/stylesheets/catalog.css +++ b/stylesheets/catalog.css @@ -20,26 +20,24 @@ div.threads{ } div.thread { - display: inline-block; + position: relative; vertical-align: top; - margin-bottom:25px; - margin-left: 20px; - margin-right: 15px; - text-align:center; - font-weight:normal; - width:205px; + display: inline-block; overflow:hidden; - position: relative; + margin:2px; + padding: 2px; + height:300px; + width:205px; font-size:11px; - padding: 15px; + font-weight:normal; + text-align:center; background: rgba(182, 182, 182, 0.12); border: 2px solid rgba(111, 111, 111, 0.34); - max-height:300px; } -div.thread:hover { - background: #D6DAF0; - border-color: #B7C5D9; +div.threads:hover { + background: #D6DAF0; + border-color: #B7C5D9; } div.grid-size-small { @@ -70,6 +68,6 @@ img.thread-image { } div.threads { - overflow: hidden; + overflow: hidden; } } \ No newline at end of file diff --git a/stylesheets/style.css b/stylesheets/style.css index dbd3a11d..80ed6e2b 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -222,7 +222,8 @@ div.post.reply div.body a { color: #D00; } div.post { - max-width: 97%; + max-width: 95%; + padding-left:20px; } div.post div.body { word-wrap: break-word; @@ -518,16 +519,12 @@ form.ban-appeal textarea { .theme-catalog div.thread { display: inline-block; vertical-align: top; - margin-bottom:25px; - margin-left: 20px; - margin-right: 15px; text-align:center; font-weight:normal; - width:205px; + width:205px; overflow:hidden; position: relative; font-size:11px; - padding:5px; max-height:300px; background: rgba(182, 182, 182, 0.12); border: 2px solid rgba(111, 111, 111, 0.34); @@ -549,19 +546,19 @@ form.ban-appeal textarea { width: 100px; max-width: 100px; max-height: 150px; -} +} .theme-catalog div.grid-size-small { width: 200px; max-width: 200px; max-height: 350px; -} +} .theme-catalog div.grid-size-large { width: 300px; max-width: 300px; max-height: 450px; -} +} .theme-catalog img.thread-image { height: auto; @@ -669,7 +666,7 @@ form.ban-appeal textarea { background-color: #d6daf0; border: 1px solid black; display: inline-block; - position: relative; + position: relative; margin-top: 20px; width: 600px; height: 300px; @@ -724,3 +721,14 @@ form.ban-appeal textarea { .mentioned { word-wrap: break-word; } + + +code > pre { +/* Better code tags */ + background:black; + max-width:inherit; +} + +code > pre > span.pln { + color:grey; +} -- cgit v1.3 From 76439cbdd9b9378ce21486bdec77bd77be3b371b Mon Sep 17 00:00:00 2001 From: czaks Date: Fri, 26 Sep 2014 13:34:47 +0200 Subject: we don`t use tooltipster anymore, do we? --- stylesheets/style.css | 2 - stylesheets/tooltipster/tooltipster.css | 274 -------------------------------- 2 files changed, 276 deletions(-) delete mode 100644 stylesheets/tooltipster/tooltipster.css (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 1f51bb18..b24854ed 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -580,8 +580,6 @@ form.ban-appeal textarea { } } -@include url("tooltipster/tooltipster.css"); - .compact-boardlist { padding: 3px; padding-bottom: 0; diff --git a/stylesheets/tooltipster/tooltipster.css b/stylesheets/tooltipster/tooltipster.css deleted file mode 100644 index e5c609cc..00000000 --- a/stylesheets/tooltipster/tooltipster.css +++ /dev/null @@ -1,274 +0,0 @@ -/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */ -.tooltipster-default { - border-radius: 5px; - border: 2px solid #000; - background: #4c4c4c; - color: #fff; -} - -/* Use this next selector to style things like font-size and line-height: */ -.tooltipster-default .tooltipster-content { - font-family: Arial, sans-serif; - font-size: 14px; - line-height: 16px; - padding: 8px 10px; - overflow: hidden; -} - -/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */ -.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { - /* border-color: ... !important; */ -} - - -/* If you're using the icon option, use this next selector to style them */ -.tooltipster-icon { - cursor: help; - margin-left: 4px; -} - - - - - - - - -/* This is the base styling required to make all Tooltipsters work */ -.tooltipster-base { - padding: 0; - font-size: 0; - line-height: 0; - position: absolute; - left: 0; - top: 0; - z-index: 9999999; - pointer-events: none; - width: auto; - overflow: visible; -} -.tooltipster-base .tooltipster-content { - overflow: hidden; -} - - -/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ -.tooltipster-arrow { - display: block; - text-align: center; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -.tooltipster-arrow span, .tooltipster-arrow-border { - display: block; - width: 0; - height: 0; - position: absolute; -} -.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { - border-left: 8px solid transparent !important; - border-right: 8px solid transparent !important; - border-top: 8px solid; - bottom: -7px; -} -.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { - border-left: 9px solid transparent !important; - border-right: 9px solid transparent !important; - border-top: 9px solid; - bottom: -7px; -} - -.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { - border-left: 8px solid transparent !important; - border-right: 8px solid transparent !important; - border-bottom: 8px solid; - top: -7px; -} -.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { - border-left: 9px solid transparent !important; - border-right: 9px solid transparent !important; - border-bottom: 9px solid; - top: -7px; -} -.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { - left: 0; - right: 0; - margin: 0 auto; -} -.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { - left: 6px; -} -.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { - left: 5px; -} -.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { - right: 6px; -} -.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { - right: 5px; -} -.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { - border-top: 8px solid transparent !important; - border-bottom: 8px solid transparent !important; - border-left: 8px solid; - top: 50%; - margin-top: -7px; - right: -7px; -} -.tooltipster-arrow-left .tooltipster-arrow-border { - border-top: 9px solid transparent !important; - border-bottom: 9px solid transparent !important; - border-left: 9px solid; - margin-top: -8px; -} -.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { - border-top: 8px solid transparent !important; - border-bottom: 8px solid transparent !important; - border-right: 8px solid; - top: 50%; - margin-top: -7px; - left: -7px; -} -.tooltipster-arrow-right .tooltipster-arrow-border { - border-top: 9px solid transparent !important; - border-bottom: 9px solid transparent !important; - border-right: 9px solid; - margin-top: -8px; -} - - -/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ - -.tooltipster-fade { - opacity: 0; - -webkit-transition-property: opacity; - -moz-transition-property: opacity; - -o-transition-property: opacity; - -ms-transition-property: opacity; - transition-property: opacity; -} -.tooltipster-fade-show { - opacity: 1; -} - -.tooltipster-grow { - -webkit-transform: scale(0,0); - -moz-transform: scale(0,0); - -o-transform: scale(0,0); - -ms-transform: scale(0,0); - transform: scale(0,0); - -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; - -o-transition-property: -o-transform; - -ms-transition-property: -ms-transform; - transition-property: transform; - -webkit-backface-visibility: hidden; -} -.tooltipster-grow-show { - -webkit-transform: scale(1,1); - -moz-transform: scale(1,1); - -o-transform: scale(1,1); - -ms-transform: scale(1,1); - transform: scale(1,1); - -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -} - -.tooltipster-swing { - opacity: 0; - -webkit-transform: rotateZ(4deg); - -moz-transform: rotateZ(4deg); - -o-transform: rotateZ(4deg); - -ms-transform: rotateZ(4deg); - transform: rotateZ(4deg); - -webkit-transition-property: -webkit-transform, opacity; - -moz-transition-property: -moz-transform; - -o-transition-property: -o-transform; - -ms-transition-property: -ms-transform; - transition-property: transform; -} -.tooltipster-swing-show { - opacity: 1; - -webkit-transform: rotateZ(0deg); - -moz-transform: rotateZ(0deg); - -o-transform: rotateZ(0deg); - -ms-transform: rotateZ(0deg); - transform: rotateZ(0deg); - -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); - -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); - -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); - -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); - -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); - transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -} - -.tooltipster-fall { - top: 0; - -webkit-transition-property: top; - -moz-transition-property: top; - -o-transition-property: top; - -ms-transition-property: top; - transition-property: top; - -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -} -.tooltipster-fall-show { -} -.tooltipster-fall.tooltipster-dying { - -webkit-transition-property: all; - -moz-transition-property: all; - -o-transition-property: all; - -ms-transition-property: all; - transition-property: all; - top: 0px !important; - opacity: 0; -} - -.tooltipster-slide { - left: -40px; - -webkit-transition-property: left; - -moz-transition-property: left; - -o-transition-property: left; - -ms-transition-property: left; - transition-property: left; - -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); - transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -} -.tooltipster-slide.tooltipster-slide-show { -} -.tooltipster-slide.tooltipster-dying { - -webkit-transition-property: all; - -moz-transition-property: all; - -o-transition-property: all; - -ms-transition-property: all; - transition-property: all; - left: 0px !important; - opacity: 0; -} - - -/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ -.tooltipster-content-changing { - opacity: 0.5; - -webkit-transform: scale(1.1, 1.1); - -moz-transform: scale(1.1, 1.1); - -o-transform: scale(1.1, 1.1); - -ms-transform: scale(1.1, 1.1); - transform: scale(1.1, 1.1); -} -- cgit v1.3 From bfb85fc2b19bcc895bd0034d0d7a9d7b64f481f4 Mon Sep 17 00:00:00 2001 From: czaks Date: Fri, 26 Sep 2014 13:35:56 +0200 Subject: catalog.css is no longer used --- stylesheets/catalog.css | 73 ------------------------------------------------- 1 file changed, 73 deletions(-) delete mode 100644 stylesheets/catalog.css (limited to 'stylesheets') diff --git a/stylesheets/catalog.css b/stylesheets/catalog.css deleted file mode 100644 index b4ec6f55..00000000 --- a/stylesheets/catalog.css +++ /dev/null @@ -1,73 +0,0 @@ -img { - float:none!important; - margin: auto; - margin-bottom: 12px; - /*max-height: 150px; - max-width: 200px;*/ - box-shadow: 0 0 4px rgba(0, 0, 0, 0.55); - border: 2px solid rgba(153, 153, 153, 0); -} - -/* -img:hover { - border: 2px solid rgba(153, 153, 153, 0.27); -} -*/ - -div.threads{ - text-align: center; - margin-left: -20px; -} - -div.thread { - position: relative; - vertical-align: top; - display: inline-block; - overflow:hidden; - margin:2px; - padding: 2px; - height:300px; - width:205px; - font-size:11px; - font-weight:normal; - text-align:center; - background: rgba(182, 182, 182, 0.12); - border: 2px solid rgba(111, 111, 111, 0.34); -} - -div.threads:hover { - background: #D6DAF0; - border-color: #B7C5D9; -} - -div.grid-size-small { - width: 200px; - max-width: 200px; - max-height: 350px; -} - -div.grid-size-large { - width: 300px; - max-width: 300px; - max-height: 450px; -} - -img.thread-image { - height: auto; - max-width: 100%; -} - -@media (max-width: 420px) { - ul#Grid { - padding-left: 18px; - } - div.thread { - width: auto; - margin-left: 0; - margin-right: 0; - - } - div.threads { - overflow: hidden; - } -} \ No newline at end of file -- cgit v1.3 From 153622c06804ec892c2fb7f0c3716e67d329166d Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 07:42:12 -0400 Subject: Corrected changes improperly set in catalog.css Conflicts: stylesheets/style.css --- stylesheets/style.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index eea2fb0d..43588ecc 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -516,14 +516,14 @@ form.ban-appeal textarea { margin-right: 15px; text-align:center; font-weight:normal; - width:205px; + padding: 2px; + height:300px; + width:205px; overflow:hidden; position: relative; font-size:11px; - padding: 15px; - max-height:300px; - background: rgba(182, 182, 182, 0.12); - border: 2px solid rgba(111, 111, 111, 0.34); + background: rgba(182, 182, 182, 0.12); + border: 2px solid rgba(111, 111, 111, 0.34); } .theme-catalog div.thread strong { display: block; @@ -533,6 +533,11 @@ form.ban-appeal textarea { margin-left: -20px; } ++div.threads:hover { + background: #D6DAF0; + border-color: #B7C5D9; +} + .theme-catalog div.grid-size-vsmall img { max-width: 100%; max-height: 100px; -- cgit v1.3 From 359c295ecaf079318d55b1acc6e900ee74feb6d3 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 07:58:56 -0400 Subject: Correct thread:hover highlighting --- stylesheets/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 43588ecc..a21b30f5 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -533,14 +533,14 @@ form.ban-appeal textarea { margin-left: -20px; } -+div.threads:hover { +div.thread:hover { background: #D6DAF0; border-color: #B7C5D9; } .theme-catalog div.grid-size-vsmall img { max-width: 100%; - max-height: 100px; + max-height: 64px; } .theme-catalog div.grid-size-vsmall { -- cgit v1.3 From b1ea8b18d0bbb7a79a5c705bc5e7f4643dee1634 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 08:10:29 -0400 Subject: Improve image handling in catalog to improve consistency Conflicts: stylesheets/style.css --- stylesheets/style.css | 105 +++++++++++++++++++++++++++----------------------- 1 file changed, 57 insertions(+), 48 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 2c37d8b1..a19bf09e 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -16,11 +16,9 @@ a, a:visited { text-decoration: underline; color: #34345C; } - a:hover, p.intro a.post_no:hover { color: #ff0000; } - a.post_no { text-decoration: none; margin: 0; @@ -30,7 +28,6 @@ a.post_no { p.intro a.post_no { color: inherit; } - p.intro a.post_no, p.intro a.email, p.intro a.post_anchor { @@ -49,6 +46,7 @@ p.intro time, p.intro a.ip-link, p.intro a.capcode { direction: ltr; unicode-bidi: embed; } + h2 { color: #AF0A0F; font-size: 11pt; @@ -118,14 +116,14 @@ form table tr td div label { font-size: 10px; } .file { - float: left; - margin-right: 2px; + float: left; + margin-right: 2px; } .file:not(.multifile) .post-image { - float: left; + float: left; } .file:not(.multifile) { - float: none; + float: none; } p.fileinfo { display: block; @@ -527,6 +525,7 @@ form.ban-appeal textarea { overflow:hidden; position: relative; font-size:11px; + max-height:300px; background: rgba(182, 182, 182, 0.12); border: 2px solid rgba(111, 111, 111, 0.34); } @@ -544,80 +543,90 @@ div.thread:hover { } .theme-catalog div.grid-size-vsmall img { - max-width: 100%; max-height: 64px; + max-width: 100px; } .theme-catalog div.grid-size-vsmall { - width: 100px; - max-width: 100px; - max-height: 150px; + width: 100px; + max-width: 100px; + max-height: 150px; +} + +.theme-catalog div.grid-size-small img { + max-height: 128px; + max-width: 225px; } .theme-catalog div.grid-size-small { - width: 200px; - max-width: 200px; - max-height: 350px; + width: 200px; + max-width: 225px; + max-height: 300px; +} + +.theme-catalog div.grid-size-large img { + max-height: 148px; + max-width: 300px; } .theme-catalog div.grid-size-large { - width: 300px; - max-width: 300px; - max-height: 450px; + width: 300px; + max-width: 300px; + max-height: 450px; } .theme-catalog img.thread-image { - height: auto; - max-width: 100%; + height: auto; + max-width: 100%; } @media (max-width: 420px) { - .theme-catalog ul#Grid { - padding-left: 18px; - } - .theme-catalog div.thread { - width: auto; - margin-left: 0; - margin-right: 0; + .theme-catalog ul#Grid { + padding-left: 18px; + } + .theme-catalog div.thread { + width: auto; + margin-left: 0; + margin-right: 0; - } - .theme-catalog div.threads { - overflow: hidden; - } + } + .theme-catalog div.threads { + overflow: hidden; + } } .compact-boardlist { - padding: 3px; - padding-bottom: 0; + padding: 3px; + padding-bottom: 0; } .compact-boardlist .cb-item { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } .compact-boardlist .cb-icon { - padding-bottom: 1px; + padding-bottom: 1px; } .compact-boardlist .cb-fa { - font-size: 21px; - padding: 2px; - padding-top: 0; + font-size: 21px; + padding: 2px; + padding-top: 0; } .compact-boardlist .cb-cat { - padding: 5px 6px 8px 6px; + padding: 5px 6px 8px 6px; } /* styles also used by watch.js */ .cb-menuitem { - display: table-row; + display: table-row; } .cb-menuitem span { - padding: 5px; - display: table-cell; - text-align: left; - border-top: 1px solid rgba(0, 0, 0, 0.5); + padding: 5px; + display: table-cell; + text-align: left; + border-top: 1px solid rgba(0, 0, 0, 0.5); } .cb-menuitem span.cb-uri { - text-align: right; + text-align: right; } .boardlist:not(.compact-boardlist) #watch-pinned::before { @@ -627,17 +636,17 @@ div.thread:hover { content: " ] "; } .boardlist:not(.compact-boardlist) #watch-pinned { - display: inline; + display: inline; } .boardlist:not(.compact-boardlist) #watch-pinned a { margin-left: 3pt; } .boardlist:not(.compact-boardlist) #watch-pinned a:first-child { - margin-left: 0pt; + margin-left: 0pt; } .compact-boardlist #watch-pinned { - display: inline-block; + display: inline-block; vertical-align: middle; } -- cgit v1.3 From b223b2b2f848c2e2da25a9ee3066908c2280b40a Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 08:23:25 -0400 Subject: Remove erroneous data and fix indentation Conflicts: stylesheets/style.css --- stylesheets/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index a19bf09e..1383ca9c 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -530,11 +530,11 @@ form.ban-appeal textarea { border: 2px solid rgba(111, 111, 111, 0.34); } .theme-catalog div.thread strong { - display: block; + display: block; } .theme-catalog div.threads{ - text-align: center; - margin-left: -20px; + text-align: center; + margin-left: -20px; } div.thread:hover { -- cgit v1.3 From ef1ceb4f3bce56c92ef1dc3855901544f24c34f6 Mon Sep 17 00:00:00 2001 From: czaks Date: Fri, 26 Sep 2014 14:35:25 +0200 Subject: fix catalog margins --- stylesheets/style.css | 2 ++ 1 file changed, 2 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 1383ca9c..f26d01a8 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -519,6 +519,8 @@ form.ban-appeal textarea { vertical-align: top; text-align:center; font-weight:normal; + margin-top: 2px; + margin-bottom: 2px; padding: 2px; height:300px; width:205px; -- cgit v1.3 From d98eb528a56fef737b40c6435af36416c732eec4 Mon Sep 17 00:00:00 2001 From: adonisk Date: Fri, 26 Sep 2014 19:08:46 +0200 Subject: v8ch.css --- stylesheets/v8ch.css | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 stylesheets/v8ch.css (limited to 'stylesheets') diff --git a/stylesheets/v8ch.css b/stylesheets/v8ch.css new file mode 100644 index 00000000..bd8e68ab --- /dev/null +++ b/stylesheets/v8ch.css @@ -0,0 +1,191 @@ +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); + +body{ + background: #eee !important; + font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif !important; +} + +a{ + text-decoration: none; +} + +.boardlist{ + width: 100% !important; + position: fixed !important; + z-index: 99999 !important; + top: 0 !important; + left: 0 !important; + color: #222 !important; + background: #fff !important; + padding: 1em !important; + box-sizing: border-box !important; + margin-top: 0 !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; +} + +img.banner, +img.board_image{ + border: none !important; +} + +.board_image, +.board_image + header{ + margin-top: 3.75em !important; + margin-bottom: 1em !important; + float: left !important; +} + +.board_image + header{ + margin-left: 1em !important; +} + +header, +header h1, +header .subtitle{ + text-align: left !important; +} + +.board_image + header + .banner{ + width: 100% !important; + float: left !important; + margin-top: 0 !important; + margin-left: 0 !important; + padding: 0.5em 0 !important; + background-color: #666 !important; +} + +form[name=post]{ + box-sizing: border-box !important; + position: fixed !important; + bottom: 0 !important; + right: 0 !important; + background: #fff !important; + margin-bottom: 0 !important; + padding: 1em !important; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important; +} + +form[name=post] input[type="text"], +form[name=post] textarea{ + width: 100% !important; + padding: 0.5em !important; + box-sizing: border-box !important; +} + +form table tr th{ + color: #fff !important; + background: #222 !important; +} + +#expand-all-images, +#shrink-all-images, +#treeview{ + right: 1em !important; + position: absolute !important; +} + +#expand-all-images{ + margin-top: 4em !important; +} + +#treeview{ + margin-top: 5em !important; +} + +#shrink-all-images{ + margin-top: 6em !important; +} + +#expand-all-images + hr, +#shrink-all-images + hr{ + opacity: 0 !important; + margin: 0 !important; +} + +#treeview + hr{ + opacity: 0 !important; + clear: both !important; +} + +#options_handler{ + margin-top: 3em !important; +} + +[id^=thread]{ + background: #f8f8f8 !important; + margin-bottom: 1em !important; + padding: 1em 1em 0 1em !important; + border: none !important; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; +} + +[id^=thread] hr{ + display: none !important; +} + +[id^=thread] div.post.reply { + margin: 0.5em 1em !important; + padding: 0.5em !important; + color: #222 !important; + background: #fff !important; + border: none !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; +} + +[id^=thread] div.post.reply.highlighted { + background: #fec !important; +} + +p.intro.thread-hidden{ + padding-bottom: 1em !important; +} + +#vechan-reply, +#update_thread{ + float: right; + margin-right: 0.25em !important; + cursor: pointer !important; +} + +#update_thread{ + padding-left: 0 !important; +} + +#update_secs{ + color: #900 !important; +} + +.theme-catalog header{ + margin-top: 4em !important; +} + +.theme-catalog div.threads{ + text-align: left !important; +} + +.theme-catalog div.thread{ + color: #222 !important; + word-break: break-all !important; + background: #fff !important; + border: none !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; +} + +.boardlist.bottom, +.sub[data-description='1'], +.sub[data-description='2'], +.sub[data-description='3'], +#quick-reply{ + display: none !important; +} + +#favorite-star{ + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important; +} + +pre.prettyprint.prettyprinted{ + display: block !important; + overflow-x: scroll !important; +} + +/* If you want to make a redistributable style, be sure to have a Yotsuba B theme selected. */ -- cgit v1.3 From 2e46875125867886780a2a0dcc022e01c111bcf4 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 14:38:08 -0400 Subject: Improvements to mobile display on boards/catalog --- stylesheets/style.css | 884 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 528 insertions(+), 356 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index f26d01a8..129dcffb 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,457 +1,554 @@ body { - background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; - color: black; - font-family: arial, helvetica, sans-serif; - font-size: 10pt; - margin: 0 8px; - padding-left: 5px; - padding-right: 5px; + background: #EEF2FF url(img/fade-blue.png) repeat-x 50% 0; + color: #000; + font-family: arial,helvetica,sans-serif; + font-size: 10pt; + min-width: 200px; + max-width: 100%; + margin: 4px!important; + padding: 4px!important; } table * { - margin: 0; + margin: 0; } -a, a:visited { - text-decoration: underline; - color: #34345C; +a,a:visited { + text-decoration: underline; + color: #34345C; } -a:hover, p.intro a.post_no:hover { - color: #ff0000; + +a:hover,p.intro a.post_no:hover { + color: red; } + a.post_no { - text-decoration: none; - margin: 0; - padding: 0; + text-decoration: none; + margin: 0; + padding: 0; } -p.intro a.post_no { - color: inherit; +p.intro a.post_no,p.intro a.email,p.intro a.post_anchor { + margin: 0; } -p.intro a.post_no, -p.intro a.email, -p.intro a.post_anchor { - margin: 0; + +p.intro a.post_no { + color: inherit; } + p.intro a.email span.name { - color: #34345C; + color: #34345C; } + p.intro a.email:hover span.name { - color: #ff0000; + color: red; } + p.intro label { - display: inline; -} -p.intro time, p.intro a.ip-link, p.intro a.capcode { - direction: ltr; - unicode-bidi: embed; + display: inline; } -h2 { - color: #AF0A0F; - font-size: 11pt; - margin: 0; - padding: 0; +p.intro time,p.intro a.ip-link,p.intro a.capcode { + direction: ltr; + unicode-bidi: embed; } + header { - margin: 1em 0; -} -h1 { - font-family: tahoma; - letter-spacing: -2px; - font-size: 20pt; - margin: 0; + margin: 1em 0; } -header div.subtitle, h1 { - color: #AF0A0F; - text-align: center; + +header div.subtitle,h1 { + color: #AF0A0F; + text-align: center; } + header div.subtitle { - font-size: 8pt; + font-size: 8pt; +} + +h1 { + font-family: tahoma; + letter-spacing: -2px; + font-size: 20pt; + margin: 0; +} + +h2 { + color: #AF0A0F; + font-size: 11pt; + margin: 0; + padding: 0; } + form { - margin-bottom: 4em; + margin-bottom: 4em; } + form table { - margin: auto; + margin: auto; } + form table input { - height: auto; + height: auto; + width: 100%; } -input[type="text"], input[type="password"], textarea { - border: 1px solid #a9a9a9; - text-indent: 0; - text-shadow: none; - text-transform: none; - word-spacing: normal; + +input[type="text"],input[type="password"],textarea { + height: auto; + width: 100%; } + form table tr td { - text-align: left; - margin: 0; - padding: 0; + text-align: left; + margin: 0; + padding: 0; } + form table.mod tr td { - padding: 2px; -} -form table tr th { - text-align: left; - padding: 4px; + padding: 2px; } + form table tr th { - background: #98E; + text-align: left; + padding: 4px; + background: #98E; } + form table tr td div.center { - text-align: center; - float: left; - padding-left: 3px; + text-align: center; + float: left; + padding-left: 3px; } + form table tr td div input { - display: block; - margin: 2px auto 0 auto; + display: block; + margin: 2px auto 0; } + form table tr td div label { - font-size: 10px; + font-size: 10px; } -.unimportant, .unimportant * { - font-size: 10px; + +.unimportant,.unimportant * { + font-size: 10px; } + .file { float: left; margin-right: 2px; } + .file:not(.multifile) .post-image { float: left; } + .file:not(.multifile) { float: none; } + p.fileinfo { - display: block; - margin: 0 0 0 20px; + display: block; + margin: 0 0 0 20px; } + div.post p.fileinfo { - padding-left: 5px; + padding-left: 5px; } + div.banner { - background-color: #E04000; - font-size: 12pt; - font-weight: bold; - text-align: center; - margin: 1em 0; + background-color: #E04000; + font-size: 12pt; + font-weight: 700; + text-align: center; + margin: 1em 0; } -div.banner, div.banner a { - color: white; + +div.banner,div.banner a { + color: #fff; } + div.banner a:hover { - color: #EEF2FF; - text-decoration: none; + color: #EEF2FF; + text-decoration: none; } -img.banner, img.board_image { - display: block; - border: 1px solid #a9a9a9; - margin: 12px auto 0 auto; + +img.banner,img.board_image { + display: block; + border: 1px solid #a9a9a9; + margin: 12px auto 0; } + .post-image { - display: block; - float: left; - margin: 5px 20px 10px 20px; - border: none; + display: block; + float: left; + margin: 4px 16px 8px; + border: none; } + div.post .post-image { - padding: 5px; - margin: 0 20px 0 0; + padding: 1px; + margin: 4px 20px 4px 4px; } + div.post img.icon { - display: inline; - margin: 0 5px; - padding: 0; + display: inline; + margin: 0 5px; + padding: 0; } + div.post i.fa { - margin: 0 4px; - font-size: 16px; + margin: 0 4px; + font-size: 16px; } + div.post.op { - margin-right: 20px; - margin-bottom: 5px; + margin-right: 20px; + margin-bottom: 5px; } + div.post.op hr { - border-color: #D9BFB7; + border-color: #D9BFB7; } + p.intro { - margin: 0.5em 0; - padding: 0; - padding-bottom: 0.2em; + margin: .5em 0; + padding: 0 0 .2em; + clear: both; } + input.delete { - float: left; - margin: 1px 6px 0 0; + float: left; + margin: 1px 6px 0 0; } + p.intro span.subject { - color: #0F0C5D; - font-weight: bold; + color: #0F0C5D; + font-weight: 700; } + p.intro span.name { - color: #117743; - font-weight: bold; + color: #117743; + font-weight: 700; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { - color: #F00000; - margin-left: 0; + +p.intro span.capcode,p.intro a.capcode,p.intro a.nametag { + color: #F00000; + margin-left: 0; } + p.intro a { - margin-left: 8px; + margin-left: 8px; } + div.delete { - float: right; + float: right; } + +div.post.reply { + max-width: 85%; +} + div.post.reply p { - margin: 0.3em 0 0 0; + margin: .3em 0 0; } + div.post.reply div.body { - margin-left: 1.8em; - margin-top: 0.8em; - padding-right: 3em; - padding-bottom: 0.3em; + margin-left: 1em; + margin-top: 1em; + padding-right: 2em; + padding-bottom: .3em; } + div.post.reply.highlighted { - background: #D6BAD0; + background: #D6BAD0; } + div.post.reply div.body a { - color: #D00; + color: #D00; } + div.post { - max-width: 95%; - padding-left:20px; + max-width: 95%; + padding-left: 20px; } + div.post div.body { - word-wrap: break-word; - white-space: pre-wrap; + word-wrap: break-word; + white-space: pre-wrap; + clear: both; } + div.post.reply { - background: #D6DAF0; - margin: 0.2em 16px; - padding: 0.2em 0.3em 0.5em 0.6em; - border-width: 1px; - border-style: none solid solid none; - border-color: #B7C5D9; - display: inline-block; + background: #D6DAF0; + margin: .2em 16px; + padding: .2em .3em .5em .6em; + border-width: 1px; + border-style: none solid solid none; + border-color: #B7C5D9; + display: inline-block; } + span.trip { - color: #228854; + color: #228854; } + span.quote { - color: #789922; + color: #789922; } + span.omitted { - display: block; - margin-top: 1em; + display: block; + margin-top: 1em; } + br.clear { - clear: left; - display: block; + clear: left; + display: block; } + span.controls { - float: right; - margin: 0; - padding: 0; - font-size: 80%; + float: right; + margin: 0; + padding: 0; + font-size: 80%; } + span.controls.op { - float: none; - margin-left: 10px; + float: none; + margin-left: 10px; } + span.controls a { - margin: 0; + margin: 0; } + div#wrap { - width: 900px; - margin:0 auto; + width: 900px; + margin: 0 auto; } + div.ban { - background: white; - border: 1px solid #98E; - max-width: 700px; - margin: 30px auto; + background: #fff; + border: 1px solid #98E; + max-width: 700px; + margin: 30px auto; } -div.ban p, div.ban h2 { - padding: 3px 7px; + +div.ban p,div.ban h2 { + padding: 3px 7px; } + div.ban h2 { - background: #98E; - color: black; - font-size: 12pt; + background: #98E; + color: #000; + font-size: 12pt; } + div.ban p { - font-size: 12px; - margin-bottom: 12px; + font-size: 12px; + margin-bottom: 12px; } + div.ban p.reason { - font-weight: bold; + font-weight: 700; } + span.heading { - color: #AF0A0F; - font-size: 11pt; - font-weight: bold; + color: #AF0A0F; + font-size: 11pt; + font-weight: 700; } + span.spoiler { - background: black; - color: black; - padding: 0 1px; + background: #000; + color: #000; + padding: 0 1px; } + div.post.reply div.body span.spoiler a { - color: black; + color: #000; } -span.spoiler:hover, div.post.reply div.body span.spoiler:hover a { - color: white; + +span.spoiler:hover,div.post.reply div.body span.spoiler:hover a { + color: #fff; } -div.styles { - float: right; - padding-bottom: 20px; +div.styles { + float: right; + padding-bottom: 20px; } + div.styles a { - margin: 0 10px; + margin: 0 10px; } + div.styles a.selected { - text-decoration: none; + text-decoration: none; } + table.test { - width: 100%; + width: 100%; } -table.test td, table.test th { - text-align: left; - padding: 5px; + +table.test td,table.test th { + text-align: left; + padding: 5px; } + table.test tr.h th { - background: #98E; + background: #98E; } + table.test td img { - margin: 0; + margin: 0; } + fieldset label { - display: block; + display: block; } + div.pages { - color: #89A; - background: #D6DAF0; - display: inline; - padding: 8px; - border-right: 1px solid #B7C5D9; - border-bottom: 1px solid #B7C5D9; + color: #89A; + background: #D6DAF0; + display: inline; + padding: 8px; + border-right: 1px solid #B7C5D9; + border-bottom: 1px solid #B7C5D9; } + div.pages.top { - display: block; - padding: 5px 8px; - margin-bottom: 5px; - position: fixed; - top: 0; - right: 0; - opacity: 0.9; + display: block; + padding: 5px 8px; + margin-bottom: 5px; + position: fixed; + top: 0; + right: 0; + opacity: .9; } + @media screen and (max-width: 800px) { - div.pages.top { - display: none !important; - } + div.pages.top { + display: none!important; + } } + div.pages a.selected { - color: black; - font-weight: bolder; + color: #000; + font-weight: bolder; } + div.pages a { - text-decoration: none; + text-decoration: none; } + div.pages form { - margin: 0; - padding: 0; - display: inline; + margin: 0; + padding: 0; + display: inline; } + div.pages form input { - margin: 0 5px; - display: inline; + margin: 0 5px; + display: inline; } + hr { - border: none; - border-top: 1px solid #B7C5D9; - height: 0; - clear: left; + border: none; + border-top: 1px solid #B7C5D9; + height: 0; + clear: left; } + div.boardlist { - color: #89A; - font-size: 9pt; - margin-top: 3px; + color: #89A; + font-size: 9pt; + margin-top: 3px; } + div.boardlist.bottom { - margin-top: 20px; + margin-top: 20px; } + div.boardlist a { - text-decoration: none; + text-decoration: none; } + div.report { - color: #333; + color: #333; } + table.modlog { - margin: auto; - width: 100%; + margin: auto; + width: 100%; } + table.modlog tr td { - text-align: left; - margin: 0; - padding: 4px 15px 0 0; -} -table.modlog tr th { - text-align: left; - padding: 4px 15px 5px 5px; - white-space: nowrap; + text-align: left; + margin: 0; + padding: 4px 15px 0 0; } + table.modlog tr th { - background: #98E; + text-align: left; + padding: 4px 15px 5px 5px; + white-space: nowrap; + background: #98E; } -td.minimal, th.minimal { - width: 1%; - white-space: nowrap; + +td.minimal,th.minimal { + width: 1%; + white-space: nowrap; } + div.top_notice { - text-align: center; - margin: 5px auto; + text-align: center; + margin: 5px auto; } + span.public_ban { - display: block; - color: red; - font-weight: bold; - margin-top: 15px; + display: block; + color: red; + font-weight: 700; + margin-top: 15px; } + span.toolong { - display: block; - margin-top: 15px; + display: block; + margin-top: 15px; } + div.blotter { - color: red; - font-weight: bold; - text-align: center; + color: red; + font-weight: 700; + text-align: center; } + table.mod.config-editor { - font-size: 9pt; - width: 100%; + font-size: 9pt; + width: 100%; } + table.mod.config-editor td { - text-align: left; - padding: 5px; - border-bottom: 1px solid #98e; + text-align: left; + padding: 5px; + border-bottom: 1px solid #98e; } + table.mod.config-editor input[type="text"] { - width: 98%; + width: 98%; } + .desktop-style div.boardlist:nth-child(1) { position: fixed; top: 0; left: 0; right: 0; - /*text-shadow: white 1px 0 6px, white 1px 0 6px, black 1px 0 3px;*/ margin-top: 0; z-index: 30; } -.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { - background-color: rgba(90%, 90%, 90%, 0.6); + +.desktop-style div.boardlist:nth-child(1):hover,.desktop-style div.boardlist:nth-child(1).cb-menu { + background-color: rgba(90%,90%,90%,0.6); } .desktop-style body { @@ -461,13 +558,15 @@ table.mod.config-editor input[type="text"] { .desktop-style .sub { background: inherit; } + .desktop-style .sub .sub { display: inline-block; text-indent: -9000px; width: 7px; - background: url('img/arrow.png') right center no-repeat; + background: url(img/arrow.png) right center no-repeat; } -.desktop-style .sub .sub:hover, .desktop-style .sub .sub.hover { + +.desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover { display: inline; text-indent: 0; background: inherit; @@ -481,60 +580,70 @@ table.mod.config-editor input[type="text"] { text-align: center; overflow: hidden; } + #attention_bar_form { display: none; padding: 0; margin: 0; } + #attention_bar_input { width: 100%; padding: 0; margin: 0; text-align: center; } + #attention_bar:hover { - background-color: rgba(100%, 100%, 100%, 0.2); + background-color: rgba(100%,100%,100%,0.2); } + p.intro.thread-hidden { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } form.ban-appeal { - margin: 9px 20px; + margin: 9px 20px; } + form.ban-appeal textarea { - display: block; + display: block; +} + +ul#Grid { + padding: 2px; + margin: 2px 0 2px .5em; } + .theme-catalog div.thread img { - float:none!important; - margin: auto; - max-height: 150px; - max-width: 200px; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.55); - border: 2px solid rgba(153, 153, 153, 0); + float: none!important; + margin: auto; + max-height: 150px; + max-width: 200px; + box-shadow: 0 0 4px rgba(0,0,0,0.55); + border: 2px solid rgba(153,153,153,0); } + .theme-catalog div.thread { - display: inline-block; - vertical-align: top; - text-align:center; - font-weight:normal; - margin-top: 2px; - margin-bottom: 2px; + display: inline-block; + position: relative; + overflow: hidden; + vertical-align: top; + text-align: center; + font-weight: 400; + margin: 2px 0; padding: 2px; - height:300px; - width:205px; - overflow:hidden; - position: relative; - font-size:11px; - max-height:300px; - background: rgba(182, 182, 182, 0.12); - border: 2px solid rgba(111, 111, 111, 0.34); + font-size: 11px; + background: rgba(182,182,182,0.12); + border: 2px solid rgba(111,111,111,0.34); } + .theme-catalog div.thread strong { display: block; } -.theme-catalog div.threads{ + +.theme-catalog div.threads { text-align: center; margin-left: -20px; } @@ -544,15 +653,18 @@ div.thread:hover { border-color: #B7C5D9; } +div.thread.grid-li { + padding: 0; +} + .theme-catalog div.grid-size-vsmall img { - max-height: 64px; - max-width: 100px; + max-height: 64px; + max-width: 96px; } .theme-catalog div.grid-size-vsmall { - width: 100px; - max-width: 100px; - max-height: 150px; + width:128px; + height: 160px; } .theme-catalog div.grid-size-small img { @@ -561,20 +673,18 @@ div.thread:hover { } .theme-catalog div.grid-size-small { - width: 200px; - max-width: 225px; - max-height: 300px; + width: 144px; + height:256px; } .theme-catalog div.grid-size-large img { - max-height: 148px; + max-height: 175px; max-width: 300px; } .theme-catalog div.grid-size-large { - width: 300px; - max-width: 300px; - max-height: 450px; + width: 225px; + height: 384px; } .theme-catalog img.thread-image { @@ -582,169 +692,231 @@ div.thread:hover { max-width: 100%; } -@media (max-width: 420px) { - .theme-catalog ul#Grid { - padding-left: 18px; - } - .theme-catalog div.thread { - width: auto; - margin-left: 0; - margin-right: 0; - - } - .theme-catalog div.threads { - overflow: hidden; - } -} - .compact-boardlist { padding: 3px; padding-bottom: 0; } + .compact-boardlist .cb-item { display: inline-block; vertical-align: middle; } + .compact-boardlist .cb-icon { padding-bottom: 1px; } + .compact-boardlist .cb-fa { font-size: 21px; padding: 2px; padding-top: 0; } + .compact-boardlist .cb-cat { - padding: 5px 6px 8px 6px; + padding: 5px 6px 8px; } -/* styles also used by watch.js */ .cb-menuitem { display: table-row; } + .cb-menuitem span { padding: 5px; display: table-cell; text-align: left; - border-top: 1px solid rgba(0, 0, 0, 0.5); + border-top: 1px solid rgba(0,0,0,0.5); } + .cb-menuitem span.cb-uri { text-align: right; } .boardlist:not(.compact-boardlist) #watch-pinned::before { - content: " [ "; + content: " [ "; } + .boardlist:not(.compact-boardlist) #watch-pinned::after { - content: " ] "; + content: " ] "; } + .boardlist:not(.compact-boardlist) #watch-pinned { display: inline; } + .boardlist:not(.compact-boardlist) #watch-pinned a { - margin-left: 3pt; + margin-left: 3pt; } + .boardlist:not(.compact-boardlist) #watch-pinned a:first-child { - margin-left: 0pt; + margin-left: 0; } .compact-boardlist #watch-pinned { display: inline-block; - vertical-align: middle; + vertical-align: middle; } -/* live-index.js */ .new-posts { - opacity: 0.6; + opacity: .6; margin-top: 1em; } + .new-threads { text-align: center; } -/* options.js */ +.mobile-style #options_div { + display: block; + width: 100%; + height: 100%; + margin-top: 0; +} + #options_handler { position: fixed; - top: 0px; left: 0px; right: 0px; bottom: 0px; - width: 100%; height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; text-align: center; z-index: 9900; } + #options_background { - background: black; - opacity: 0.5; + background: #000; + opacity: .5; position: absolute; - top: 0px; left: 0px; right: 0px; bottom: 0px; - width: 100%; height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; z-index: -1; } + #options_div { background-color: #d6daf0; - border: 1px solid black; + border: 1px solid #000; display: inline-block; position: relative; margin-top: 20px; width: 600px; height: 300px; } + #options_close { - top: 0px; right: 0px; + top: 0; + right: 0; position: absolute; margin-right: 3px; - font-size: 20px; z-index: 100; + font-size: 20px; + z-index: 100; } + #options_tablist { - padding: 0px 5px; - left: 0px; - width: 70px; - top: 0px; - bottom: 0px; + border-right: 1px solid #000; + padding: 0 5px; + top: 0; + bottom: 0; + left: 0; height: 100%; - border-right: 1px solid black; + width: 70px; +} + +.options_tab { + position: absolute; + top: 0; + bottom: 0; + left: 81px; + right: 0; + padding: 10px; + text-align: left; + font-size: 12px; +} + +.options_tab h2 { + text-align: center; + margin-bottom: 5px; } + .options_tab_icon { padding: 5px; - color: black; + color: #000; cursor: pointer; } + .options_tab_icon.active { color: red; } + .options_tab_icon i { font-size: 20px; } + .options_tab_icon div { font-size: 11px; } -.options_tab { - padding: 10px; - position: absolute; - top: 0px; bottom: 0px; - left: 81px; right: 0px; - text-align: left; - font-size: 12px; -} -.options_tab h2 { - text-align: center; - margin-bottom: 5px; + +code > pre { + background: #000; + max-width: 80%; + padding: 0; + margin: 0; + overflow: auto; } -.mobile-style #options_div { - display: block; - width: 100%; - height: 100%; - margin-top: 0px; +code > pre > span.pln { + color: grey; } + .mentioned { - word-wrap: break-word; + word-wrap: break-word; } +@media screen and (min-width: 768px) { + p.intro { + clear: none; + } -code > pre { -/* Better code tags */ - background:black; - max-width:inherit; -} + div.post div.body { + clear: none; + } -code > pre > span.pln { - color:grey; -} + .theme-catalog div.grid-size-vsmall img { + max-height: 96px; + max-width: 160px; + } + + .theme-catalog div.grid-size-vsmall { + width: 160px; + height: 256px; + } + + .theme-catalog div.grid-size-small img { + max-height: 160px; + max-width: 225px; + } + + .theme-catalog div.grid-size-small { + width: 225px; + height:320px; + } + + .theme-catalog div.grid-size-large img { + max-height: 200px; + max-width: 300px; + } + + .theme-catalog div.grid-size-large { + width: 300px; + height: 409px; + } + + .theme-catalog img.thread-image { + height: auto; + max-width: 100%; + } +} \ No newline at end of file -- cgit v1.3 From c115ebc7e0c7077e10756159d9c31a531d5ca583 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Fri, 26 Sep 2014 22:54:01 -0400 Subject: Improved image handling in catalog for various screen sizes --- stylesheets/style.css | 47 ++++++----------------------------------------- 1 file changed, 6 insertions(+), 41 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 129dcffb..0f6fca49 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -658,8 +658,8 @@ div.thread.grid-li { } .theme-catalog div.grid-size-vsmall img { - max-height: 64px; - max-width: 96px; + max-height: 50%; + max-width: 99%; } .theme-catalog div.grid-size-vsmall { @@ -668,8 +668,8 @@ div.thread.grid-li { } .theme-catalog div.grid-size-small img { - max-height: 128px; - max-width: 225px; + max-height: 50%; + max-width: 99%; } .theme-catalog div.grid-size-small { @@ -678,8 +678,8 @@ div.thread.grid-li { } .theme-catalog div.grid-size-large img { - max-height: 175px; - max-width: 300px; + max-height: 50%; + max-width: 99%; } .theme-catalog div.grid-size-large { @@ -884,39 +884,4 @@ code > pre > span.pln { div.post div.body { clear: none; } - - .theme-catalog div.grid-size-vsmall img { - max-height: 96px; - max-width: 160px; - } - - .theme-catalog div.grid-size-vsmall { - width: 160px; - height: 256px; - } - - .theme-catalog div.grid-size-small img { - max-height: 160px; - max-width: 225px; - } - - .theme-catalog div.grid-size-small { - width: 225px; - height:320px; - } - - .theme-catalog div.grid-size-large img { - max-height: 200px; - max-width: 300px; - } - - .theme-catalog div.grid-size-large { - width: 300px; - height: 409px; - } - - .theme-catalog img.thread-image { - height: auto; - max-width: 100%; - } } \ No newline at end of file -- cgit v1.3 From a3c03932c31b952a73ce614ab651cef7fd986451 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Sat, 27 Sep 2014 01:38:25 -0400 Subject: Fix mobile scaling/padding --- stylesheets/style.css | 357 +++++++++++++++++++++++++++----------------------- 1 file changed, 191 insertions(+), 166 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 0f6fca49..a3eea7f9 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,25 +1,24 @@ body { - background: #EEF2FF url(img/fade-blue.png) repeat-x 50% 0; - color: #000; - font-family: arial,helvetica,sans-serif; - font-size: 10pt; - min-width: 200px; - max-width: 100%; - margin: 4px!important; - padding: 4px!important; + background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; + color: black; + font-family: arial, helvetica, sans-serif; + font-size: 11pt; + margin: 0 4px; + padding-left: 4px; + padding-right: 4px; } table * { - margin: 0; + margin: 1px; } -a,a:visited { +a, a:visited { text-decoration: underline; color: #34345C; } -a:hover,p.intro a.post_no:hover { - color: red; +a:hover, p.intro a.post_no:hover { + color: #ff0000; } a.post_no { @@ -28,42 +27,42 @@ a.post_no { padding: 0; } -p.intro a.post_no,p.intro a.email,p.intro a.post_anchor { - margin: 0; -} - p.intro a.post_no { color: inherit; } +p.intro a.post_no, +p.intro a.email, +p.intro a.post_anchor { + margin: 0; +} + p.intro a.email span.name { color: #34345C; } p.intro a.email:hover span.name { - color: red; + color: #ff0000; } p.intro label { display: inline; } -p.intro time,p.intro a.ip-link,p.intro a.capcode { +p.intro time, p.intro a.ip-link, p.intro a.capcode { direction: ltr; unicode-bidi: embed; } -header { - margin: 1em 0; -} - -header div.subtitle,h1 { +h2 { color: #AF0A0F; - text-align: center; + font-size: 11pt; + margin: 0; + padding: 0; } -header div.subtitle { - font-size: 8pt; +header { + margin: 1em 0; } h1 { @@ -73,11 +72,13 @@ h1 { margin: 0; } -h2 { +header div.subtitle, h1 { color: #AF0A0F; - font-size: 11pt; - margin: 0; - padding: 0; + text-align: center; +} + +header div.subtitle { + font-size: 8pt; } form { @@ -90,12 +91,15 @@ form table { form table input { height: auto; - width: 100%; } -input[type="text"],input[type="password"],textarea { - height: auto; - width: 100%; +input[type="text"], input[type="password"], textarea { + border: 1px solid #a9a9a9; + text-indent: 0; + text-shadow: none; + text-transform: none; + word-spacing: normal; + max-width: 75%; } form table tr td { @@ -111,6 +115,9 @@ form table.mod tr td { form table tr th { text-align: left; padding: 4px; +} + +form table tr th { background: #98E; } @@ -122,14 +129,14 @@ form table tr td div.center { form table tr td div input { display: block; - margin: 2px auto 0; + margin: 2px auto 0 auto; } form table tr td div label { font-size: 10px; } -.unimportant,.unimportant * { +.unimportant, .unimportant * { font-size: 10px; } @@ -158,13 +165,13 @@ div.post p.fileinfo { div.banner { background-color: #E04000; font-size: 12pt; - font-weight: 700; + font-weight: bold; text-align: center; margin: 1em 0; } -div.banner,div.banner a { - color: #fff; +div.banner, div.banner a { + color: white; } div.banner a:hover { @@ -172,22 +179,22 @@ div.banner a:hover { text-decoration: none; } -img.banner,img.board_image { +img.banner, img.board_image { display: block; border: 1px solid #a9a9a9; - margin: 12px auto 0; + margin: 12px auto 0 auto; } .post-image { display: block; float: left; - margin: 4px 16px 8px; + margin: 5px 20px 10px 20px; border: none; } div.post .post-image { - padding: 1px; - margin: 4px 20px 4px 4px; + padding: 5px; + margin: 0 20px 0 0; } div.post img.icon { @@ -211,8 +218,9 @@ div.post.op hr { } p.intro { - margin: .5em 0; - padding: 0 0 .2em; + margin: 0.5em 0; + padding: 0; + padding-bottom: 0.2em; clear: both; } @@ -223,15 +231,15 @@ input.delete { p.intro span.subject { color: #0F0C5D; - font-weight: 700; + font-weight: bold; } p.intro span.name { color: #117743; - font-weight: 700; + font-weight: bold; } -p.intro span.capcode,p.intro a.capcode,p.intro a.nametag { +p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { color: #F00000; margin-left: 0; } @@ -244,19 +252,15 @@ div.delete { float: right; } -div.post.reply { - max-width: 85%; -} - div.post.reply p { - margin: .3em 0 0; + margin: 0.3em 0 0 0; } div.post.reply div.body { - margin-left: 1em; - margin-top: 1em; - padding-right: 2em; - padding-bottom: .3em; + margin-left: 1.8em; + margin-top: 0.8em; + padding-right: 3em; + padding-bottom: 0.3em; } div.post.reply.highlighted { @@ -275,17 +279,17 @@ div.post { div.post div.body { word-wrap: break-word; white-space: pre-wrap; - clear: both; } div.post.reply { background: #D6DAF0; - margin: .2em 16px; - padding: .2em .3em .5em .6em; + margin: 0.2em 4px; + padding: 0.2em 0.3em 0.5em 0.6em; border-width: 1px; border-style: none solid solid none; border-color: #B7C5D9; display: inline-block; + max-width: 95%; } span.trip { @@ -328,19 +332,19 @@ div#wrap { } div.ban { - background: #fff; + background: white; border: 1px solid #98E; max-width: 700px; margin: 30px auto; } -div.ban p,div.ban h2 { +div.ban p, div.ban h2 { padding: 3px 7px; } div.ban h2 { background: #98E; - color: #000; + color: black; font-size: 12pt; } @@ -350,27 +354,27 @@ div.ban p { } div.ban p.reason { - font-weight: 700; + font-weight: bold; } span.heading { color: #AF0A0F; font-size: 11pt; - font-weight: 700; + font-weight: bold; } span.spoiler { - background: #000; - color: #000; + background: black; + color: black; padding: 0 1px; } div.post.reply div.body span.spoiler a { - color: #000; + color: black; } -span.spoiler:hover,div.post.reply div.body span.spoiler:hover a { - color: #fff; +span.spoiler:hover, div.post.reply div.body span.spoiler:hover a { + color: white; } div.styles { @@ -390,7 +394,7 @@ table.test { width: 100%; } -table.test td,table.test th { +table.test td, table.test th { text-align: left; padding: 5px; } @@ -423,17 +427,17 @@ div.pages.top { position: fixed; top: 0; right: 0; - opacity: .9; + opacity: 0.9; } @media screen and (max-width: 800px) { div.pages.top { - display: none!important; + display: none !important; } } div.pages a.selected { - color: #000; + color: black; font-weight: bolder; } @@ -492,10 +496,13 @@ table.modlog tr th { text-align: left; padding: 4px 15px 5px 5px; white-space: nowrap; +} + +table.modlog tr th { background: #98E; } -td.minimal,th.minimal { +td.minimal, th.minimal { width: 1%; white-space: nowrap; } @@ -508,7 +515,7 @@ div.top_notice { span.public_ban { display: block; color: red; - font-weight: 700; + font-weight: bold; margin-top: 15px; } @@ -519,7 +526,7 @@ span.toolong { div.blotter { color: red; - font-weight: 700; + font-weight: bold; text-align: center; } @@ -543,12 +550,13 @@ table.mod.config-editor input[type="text"] { top: 0; left: 0; right: 0; + /*text-shadow: white 1px 0 6px, white 1px 0 6px, black 1px 0 3px;*/ margin-top: 0; z-index: 30; } -.desktop-style div.boardlist:nth-child(1):hover,.desktop-style div.boardlist:nth-child(1).cb-menu { - background-color: rgba(90%,90%,90%,0.6); +.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { + background-color: rgba(90%, 90%, 90%, 0.6); } .desktop-style body { @@ -563,10 +571,10 @@ table.mod.config-editor input[type="text"] { display: inline-block; text-indent: -9000px; width: 7px; - background: url(img/arrow.png) right center no-repeat; + background: url('img/arrow.png') right center no-repeat; } -.desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover { +.desktop-style .sub .sub:hover, .desktop-style .sub .sub.hover { display: inline; text-indent: 0; background: inherit; @@ -595,7 +603,7 @@ table.mod.config-editor input[type="text"] { } #attention_bar:hover { - background-color: rgba(100%,100%,100%,0.2); + background-color: rgba(100%, 100%, 100%, 0.2); } p.intro.thread-hidden { @@ -611,32 +619,31 @@ form.ban-appeal textarea { display: block; } -ul#Grid { - padding: 2px; - margin: 2px 0 2px .5em; -} - .theme-catalog div.thread img { float: none!important; margin: auto; max-height: 150px; max-width: 200px; - box-shadow: 0 0 4px rgba(0,0,0,0.55); - border: 2px solid rgba(153,153,153,0); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.55); + border: 2px solid rgba(153, 153, 153, 0); } .theme-catalog div.thread { display: inline-block; - position: relative; - overflow: hidden; vertical-align: top; text-align: center; - font-weight: 400; - margin: 2px 0; + font-weight: normal; + margin-top: 2px; + margin-bottom: 2px; padding: 2px; + height: 300px; + width: 205px; + overflow: hidden; + position: relative; font-size: 11px; - background: rgba(182,182,182,0.12); - border: 2px solid rgba(111,111,111,0.34); + max-height: 300px; + background: rgba(182, 182, 182, 0.12); + border: 2px solid rgba(111, 111, 111, 0.34); } .theme-catalog div.thread strong { @@ -653,38 +660,37 @@ div.thread:hover { border-color: #B7C5D9; } -div.thread.grid-li { - padding: 0; -} - .theme-catalog div.grid-size-vsmall img { - max-height: 50%; - max-width: 99%; + max-height: 64px; + max-width: 100px; } .theme-catalog div.grid-size-vsmall { - width:128px; - height: 160px; + width: 100px; + max-width: 100px; + max-height: 150px; } .theme-catalog div.grid-size-small img { - max-height: 50%; - max-width: 99%; + max-height: 128px; + max-width: 225px; } .theme-catalog div.grid-size-small { - width: 144px; - height:256px; + width: 200px; + max-width: 225px; + max-height: 300px; } .theme-catalog div.grid-size-large img { - max-height: 50%; - max-width: 99%; + max-height: 148px; + max-width: 300px; } .theme-catalog div.grid-size-large { - width: 225px; - height: 384px; + width: 300px; + max-width: 300px; + max-height: 450px; } .theme-catalog img.thread-image { @@ -692,6 +698,22 @@ div.thread.grid-li { max-width: 100%; } +@media (max-width: 420px) { + .theme-catalog ul#Grid { + padding-left: 18px; + } + + .theme-catalog div.thread { + width: auto; + margin-left: 0; + margin-right: 0; + } + + .theme-catalog div.threads { + overflow: hidden; + } +} + .compact-boardlist { padding: 3px; padding-bottom: 0; @@ -713,9 +735,10 @@ div.thread.grid-li { } .compact-boardlist .cb-cat { - padding: 5px 6px 8px; + padding: 5px 6px 8px 6px; } +/* styles also used by watch.js */ .cb-menuitem { display: table-row; } @@ -724,7 +747,7 @@ div.thread.grid-li { padding: 5px; display: table-cell; text-align: left; - border-top: 1px solid rgba(0,0,0,0.5); + border-top: 1px solid rgba(0, 0, 0, 0.5); } .cb-menuitem span.cb-uri { @@ -748,7 +771,7 @@ div.thread.grid-li { } .boardlist:not(.compact-boardlist) #watch-pinned a:first-child { - margin-left: 0; + margin-left: 0pt; } .compact-boardlist #watch-pinned { @@ -756,8 +779,9 @@ div.thread.grid-li { vertical-align: middle; } +/* live-index.js */ .new-posts { - opacity: .6; + opacity: 0.6; margin-top: 1em; } @@ -765,19 +789,13 @@ div.thread.grid-li { text-align: center; } -.mobile-style #options_div { - display: block; - width: 100%; - height: 100%; - margin-top: 0; -} - +/* options.js */ #options_handler { position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; width: 100%; height: 100%; text-align: center; @@ -785,13 +803,13 @@ div.thread.grid-li { } #options_background { - background: #000; - opacity: .5; + background: black; + opacity: 0.5; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; width: 100%; height: 100%; z-index: -1; @@ -799,7 +817,7 @@ div.thread.grid-li { #options_div { background-color: #d6daf0; - border: 1px solid #000; + border: 1px solid black; display: inline-block; position: relative; margin-top: 20px; @@ -808,8 +826,8 @@ div.thread.grid-li { } #options_close { - top: 0; - right: 0; + top: 0px; + right: 0px; position: absolute; margin-right: 3px; font-size: 20px; @@ -817,34 +835,18 @@ div.thread.grid-li { } #options_tablist { - border-right: 1px solid #000; - padding: 0 5px; - top: 0; - bottom: 0; - left: 0; - height: 100%; + padding: 0px 5px; + left: 0px; width: 70px; -} - -.options_tab { - position: absolute; - top: 0; - bottom: 0; - left: 81px; - right: 0; - padding: 10px; - text-align: left; - font-size: 12px; -} - -.options_tab h2 { - text-align: center; - margin-bottom: 5px; + top: 0px; + bottom: 0px; + height: 100%; + border-right: 1px solid black; } .options_tab_icon { padding: 5px; - color: #000; + color: black; cursor: pointer; } @@ -860,21 +862,44 @@ div.thread.grid-li { font-size: 11px; } -code > pre { - background: #000; - max-width: 80%; +.options_tab { + padding: 10px; + position: absolute; + top: 0px; + bottom: 0px; + left: 81px; + right: 0px; + text-align: left; + font-size: 12px; +} + +.options_tab h2 { + text-align: center; + margin-bottom: 5px; +} + +.mobile-style #options_div { + display: block; + width: 100%; + height: 100%; + margin-top: 0px; +} + +.mentioned { + word-wrap: break-word; +} + +pre { + width: 99%; padding: 0; margin: 0; - overflow: auto; + overflow:auto; } code > pre > span.pln { color: grey; } -.mentioned { - word-wrap: break-word; -} @media screen and (min-width: 768px) { p.intro { -- cgit v1.3 From 6c139caf3cd2ba34e03844a88f27038320c77dc9 Mon Sep 17 00:00:00 2001 From: czaks Date: Sat, 27 Sep 2014 11:16:16 +0200 Subject: style.css: setting default font size is imo a bit invasive --- stylesheets/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index a3eea7f9..5c24679c 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -2,7 +2,7 @@ body { background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; color: black; font-family: arial, helvetica, sans-serif; - font-size: 11pt; + font-size: 10pt; margin: 0 4px; padding-left: 4px; padding-right: 4px; @@ -909,4 +909,4 @@ code > pre > span.pln { div.post div.body { clear: none; } -} \ No newline at end of file +} -- cgit v1.3 From 629b1c92a6cb6971da36bcc84e38d9e6600e7124 Mon Sep 17 00:00:00 2001 From: czaks Date: Sat, 27 Sep 2014 11:26:30 +0200 Subject: fix a recently introduced quick-reply max-width issue --- stylesheets/style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 5c24679c..5be0ce0f 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -102,6 +102,10 @@ input[type="text"], input[type="password"], textarea { max-width: 75%; } +#quick-reply input[type="text"], input[type="password"], #quick-reply textarea { + max-width: 100%; +} + form table tr td { text-align: left; margin: 0; -- cgit v1.3 From 78cf4a8b56393358a6383d258bc237e481b7b323 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Sun, 28 Sep 2014 04:28:59 -0400 Subject: Improve catalog thread dimensions on tiny devices --- stylesheets/style.css | 120 +++++++++++++++++++++++++++----------------------- 1 file changed, 64 insertions(+), 56 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index a3eea7f9..2f14f187 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,8 +1,8 @@ body { background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; color: black; - font-family: arial, helvetica, sans-serif; - font-size: 11pt; + font-family: arial,helvetica,sans-serif; + font-size: 10pt; margin: 0 4px; padding-left: 4px; padding-right: 4px; @@ -12,12 +12,12 @@ table * { margin: 1px; } -a, a:visited { +a,a:visited { text-decoration: underline; color: #34345C; } -a:hover, p.intro a.post_no:hover { +a:hover,p.intro a.post_no:hover { color: #ff0000; } @@ -31,9 +31,7 @@ p.intro a.post_no { color: inherit; } -p.intro a.post_no, -p.intro a.email, -p.intro a.post_anchor { +p.intro a.post_no,p.intro a.email,p.intro a.post_anchor { margin: 0; } @@ -49,7 +47,7 @@ p.intro label { display: inline; } -p.intro time, p.intro a.ip-link, p.intro a.capcode { +p.intro time,p.intro a.ip-link,p.intro a.capcode { direction: ltr; unicode-bidi: embed; } @@ -72,7 +70,7 @@ h1 { margin: 0; } -header div.subtitle, h1 { +header div.subtitle,h1 { color: #AF0A0F; text-align: center; } @@ -93,7 +91,7 @@ form table input { height: auto; } -input[type="text"], input[type="password"], textarea { +input[type="text"],input[type="password"],textarea { border: 1px solid #a9a9a9; text-indent: 0; text-shadow: none; @@ -102,6 +100,10 @@ input[type="text"], input[type="password"], textarea { max-width: 75%; } +#quick-reply input[type="text"],input[type="password"],#quick-reply textarea { + max-width: 100%; +} + form table tr td { text-align: left; margin: 0; @@ -136,7 +138,7 @@ form table tr td div label { font-size: 10px; } -.unimportant, .unimportant * { +.unimportant,.unimportant * { font-size: 10px; } @@ -170,7 +172,7 @@ div.banner { margin: 1em 0; } -div.banner, div.banner a { +div.banner,div.banner a { color: white; } @@ -179,7 +181,7 @@ div.banner a:hover { text-decoration: none; } -img.banner, img.board_image { +img.banner,img.board_image { display: block; border: 1px solid #a9a9a9; margin: 12px auto 0 auto; @@ -239,7 +241,7 @@ p.intro span.name { font-weight: bold; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { +p.intro span.capcode,p.intro a.capcode,p.intro a.nametag { color: #F00000; margin-left: 0; } @@ -338,7 +340,7 @@ div.ban { margin: 30px auto; } -div.ban p, div.ban h2 { +div.ban p,div.ban h2 { padding: 3px 7px; } @@ -373,7 +375,7 @@ div.post.reply div.body span.spoiler a { color: black; } -span.spoiler:hover, div.post.reply div.body span.spoiler:hover a { +span.spoiler:hover,div.post.reply div.body span.spoiler:hover a { color: white; } @@ -394,7 +396,7 @@ table.test { width: 100%; } -table.test td, table.test th { +table.test td,table.test th { text-align: left; padding: 5px; } @@ -432,7 +434,7 @@ div.pages.top { @media screen and (max-width: 800px) { div.pages.top { - display: none !important; + display: none!important; } } @@ -502,7 +504,7 @@ table.modlog tr th { background: #98E; } -td.minimal, th.minimal { +td.minimal,th.minimal { width: 1%; white-space: nowrap; } @@ -550,13 +552,11 @@ table.mod.config-editor input[type="text"] { top: 0; left: 0; right: 0; - /*text-shadow: white 1px 0 6px, white 1px 0 6px, black 1px 0 3px;*/ margin-top: 0; z-index: 30; -} - -.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { - background-color: rgba(90%, 90%, 90%, 0.6); + box-shadow: 0 1px 2px rgba(0,0,0,.15); + border-bottom: 1px solid; + background-color: #D6DAF0; } .desktop-style body { @@ -574,7 +574,7 @@ table.mod.config-editor input[type="text"] { background: url('img/arrow.png') right center no-repeat; } -.desktop-style .sub .sub:hover, .desktop-style .sub .sub.hover { +.desktop-style .sub .sub:hover,.desktop-style .sub .sub.hover { display: inline; text-indent: 0; background: inherit; @@ -603,7 +603,7 @@ table.mod.config-editor input[type="text"] { } #attention_bar:hover { - background-color: rgba(100%, 100%, 100%, 0.2); + background-color: rgba(100%,100%,100%,0.2); } p.intro.thread-hidden { @@ -619,13 +619,21 @@ form.ban-appeal textarea { display: block; } +.MathJax_Display { + display: inline!important; +} + +pre { + margin: 0; +} + .theme-catalog div.thread img { float: none!important; margin: auto; max-height: 150px; max-width: 200px; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.55); - border: 2px solid rgba(153, 153, 153, 0); + box-shadow: 0 0 4px rgba(0,0,0,0.55); + border: 2px solid rgba(153,153,153,0); } .theme-catalog div.thread { @@ -642,8 +650,13 @@ form.ban-appeal textarea { position: relative; font-size: 11px; max-height: 300px; - background: rgba(182, 182, 182, 0.12); - border: 2px solid rgba(111, 111, 111, 0.34); + background: rgba(182,182,182,0.12); + border: 2px solid rgba(111,111,111,0.34); + max-height: 300px; + background: rgba(182,182,182,0.12); + border: 2px solid rgba(111,111,111,0.34); + background: rgba(182,182,182,0.12); + border: 2px solid rgba(111,111,111,0.34); } .theme-catalog div.thread strong { @@ -661,36 +674,33 @@ div.thread:hover { } .theme-catalog div.grid-size-vsmall img { - max-height: 64px; - max-width: 100px; + max-height: 33%; + max-width: 95% } .theme-catalog div.grid-size-vsmall { - width: 100px; - max-width: 100px; - max-height: 150px; + min-width:90px; max-width: 90px; + max-height: 148px; } .theme-catalog div.grid-size-small img { - max-height: 128px; - max-width: 225px; + max-height: 33%; + max-width: 95% } .theme-catalog div.grid-size-small { - width: 200px; - max-width: 225px; - max-height: 300px; + min-width:140px; max-width: 140px; + max-height: 192px; } .theme-catalog div.grid-size-large img { - max-height: 148px; - max-width: 300px; + max-height: 40%; + max-width: 95% } .theme-catalog div.grid-size-large { - width: 300px; - max-width: 300px; - max-height: 450px; + min-width: 256px; max-width: 256px; + max-height: 384px; } .theme-catalog img.thread-image { @@ -738,7 +748,6 @@ div.thread:hover { padding: 5px 6px 8px 6px; } -/* styles also used by watch.js */ .cb-menuitem { display: table-row; } @@ -747,7 +756,7 @@ div.thread:hover { padding: 5px; display: table-cell; text-align: left; - border-top: 1px solid rgba(0, 0, 0, 0.5); + border-top: 1px solid rgba(0,0,0,0.5); } .cb-menuitem span.cb-uri { @@ -779,7 +788,6 @@ div.thread:hover { vertical-align: middle; } -/* live-index.js */ .new-posts { opacity: 0.6; margin-top: 1em; @@ -789,7 +797,6 @@ div.thread:hover { text-align: center; } -/* options.js */ #options_handler { position: fixed; top: 0px; @@ -889,17 +896,18 @@ div.thread:hover { word-wrap: break-word; } -pre { - width: 99%; - padding: 0; - margin: 0; - overflow:auto; +.poster_id { + cursor: pointer; } -code > pre > span.pln { - color: grey; +code>pre { + background: black; + max-width: inherit; } +code>pre>span.pln { + color: grey; +} @media screen and (min-width: 768px) { p.intro { -- cgit v1.3 From 0fa1c582497e8022de1751aa76aeeee7130150e6 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Sun, 28 Sep 2014 04:37:33 -0400 Subject: Improve thread/title handling on small screens --- stylesheets/style.css | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index ecbcd58a..5f416961 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,11 +1,9 @@ body { background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; color: black; -<<<<<<< HEAD font-family: arial,helvetica,sans-serif; -======= + font-family: arial, helvetica, sans-serif; ->>>>>>> 197e4d4bfcb5a312a699e1f6d012da03ee36fbe2 font-size: 10pt; margin: 0 4px; padding-left: 4px; @@ -104,11 +102,7 @@ input[type="text"],input[type="password"],textarea { max-width: 75%; } -<<<<<<< HEAD -#quick-reply input[type="text"],input[type="password"],#quick-reply textarea { -======= #quick-reply input[type="text"], input[type="password"], #quick-reply textarea { ->>>>>>> 197e4d4bfcb5a312a699e1f6d012da03ee36fbe2 max-width: 100%; } @@ -231,7 +225,6 @@ p.intro { margin: 0.5em 0; padding: 0; padding-bottom: 0.2em; - clear: both; } input.delete { @@ -282,7 +275,6 @@ div.post.reply div.body a { } div.post { - max-width: 95%; padding-left: 20px; } @@ -299,7 +291,6 @@ div.post.reply { border-style: none solid solid none; border-color: #B7C5D9; display: inline-block; - max-width: 95%; } span.trip { -- cgit v1.3 From f4455cf64d51e0dcc068977b1977a7aceca26990 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Sun, 28 Sep 2014 04:54:45 -0400 Subject: Remove duplicate attributes --- stylesheets/style.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 5f416961..c3ff7112 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -2,9 +2,7 @@ body { background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; color: black; font-family: arial,helvetica,sans-serif; - - font-family: arial, helvetica, sans-serif; - font-size: 10pt; + font-size: 11pt; margin: 0 4px; padding-left: 4px; padding-right: 4px; @@ -651,11 +649,6 @@ pre { max-height: 300px; background: rgba(182,182,182,0.12); border: 2px solid rgba(111,111,111,0.34); - max-height: 300px; - background: rgba(182,182,182,0.12); - border: 2px solid rgba(111,111,111,0.34); - background: rgba(182,182,182,0.12); - border: 2px solid rgba(111,111,111,0.34); } .theme-catalog div.thread strong { -- cgit v1.3 From e10f0885af5aec09be12e9ccb2b53adcaa1c63f0 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Sun, 28 Sep 2014 05:19:00 -0400 Subject: Change body font back to 10pt --- stylesheets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index c3ff7112..7560f5fb 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -2,7 +2,7 @@ body { background: #EEF2FF url('img/fade-blue.png') repeat-x 50% 0%; color: black; font-family: arial,helvetica,sans-serif; - font-size: 11pt; + font-size: 10pt; margin: 0 4px; padding-left: 4px; padding-right: 4px; -- cgit v1.3 From cbe12019c4f892b1128b28c411ea6f5f98cb238d Mon Sep 17 00:00:00 2001 From: anonfagola Date: Sat, 27 Sep 2014 12:08:59 -0700 Subject: Added pointer cursor to ids, to show clickability Conflicts: stylesheets/style.css --- stylesheets/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 5be0ce0f..52a985c3 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -900,6 +900,16 @@ pre { overflow:auto; } +.poster_id{ + cursor: pointer; +} + +code > pre { +/* Better code tags */ + background:black; + max-width:inherit; +} + code > pre > span.pln { color: grey; } -- cgit v1.3 From 6cfb1eb6562d9ea80a4a4710d60946ba6ddd0341 Mon Sep 17 00:00:00 2001 From: 8chan Date: Sat, 27 Sep 2014 21:58:45 +0000 Subject: Merge bui-boardlist-css, close ctrlcctrlv/8chan#104 --- stylesheets/dark.css | 1 + stylesheets/photon.css | 4 ++++ stylesheets/style.css | 8 ++++++-- stylesheets/yotsuba.css | 4 ++++ 4 files changed, 15 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 91a9435f..7d81f56d 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -168,6 +168,7 @@ table.modlog tr th { .desktop-style div.boardlist:nth-child(1) { text-shadow: black 1px 1px 1px, black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px; + background-color: #666666; } diff --git a/stylesheets/photon.css b/stylesheets/photon.css index 310bd098..db189d77 100644 --- a/stylesheets/photon.css +++ b/stylesheets/photon.css @@ -325,3 +325,7 @@ form table tr td div { .recaptchatable .recaptcha_image_cell { padding: 0px !important; } + +.desktop-style div.boardlist:nth-child(1) { + background-color: #DDDDDD; +} diff --git a/stylesheets/style.css b/stylesheets/style.css index 52a985c3..d6aeab3a 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -557,11 +557,15 @@ table.mod.config-editor input[type="text"] { /*text-shadow: white 1px 0 6px, white 1px 0 6px, black 1px 0 3px;*/ margin-top: 0; z-index: 30; + box-shadow: 0 1px 2px rgba(0, 0, 0, .15); + border-bottom: 1px solid; + background-color: #D6DAF0; } -.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { +/*.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { +>>>>>>> f3d7ef5801ae050ed2338156d888c6ed858789a9 background-color: rgba(90%, 90%, 90%, 0.6); -} +}*/ .desktop-style body { padding-top: 20px; diff --git a/stylesheets/yotsuba.css b/stylesheets/yotsuba.css index 0b603399..845a5f67 100644 --- a/stylesheets/yotsuba.css +++ b/stylesheets/yotsuba.css @@ -62,3 +62,7 @@ table.modlog tr th { #options_div { background: #f0e0d6; } + +.desktop-style div.boardlist:nth-child(1) { + background-color: #F0E0D6; +} -- cgit v1.3 From 944c3b6c284bee9832d4a79763fc49103713d661 Mon Sep 17 00:00:00 2001 From: kaernyk Date: Sun, 5 Oct 2014 15:40:42 -0400 Subject: Fix post width & codeblocks I noticed that some url's were causing the posts to stretch over the maximum device with. The code blocks were exhibiting similar behavior as well, and have been adjusted to display well on all themes. I still need to fix the post form for handhelds, though it is not as annoying as the other things fixed --- stylesheets/style.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index bdac756a..b72056cb 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -289,6 +289,7 @@ div.post.reply { border-style: none solid solid none; border-color: #B7C5D9; display: inline-block; + max-width: 94%!important; } span.trip { @@ -892,16 +893,21 @@ div.thread:hover { cursor: pointer; } -code > pre { +pre { /* Better code tags */ - background:black; max-width:inherit; + word-wrap:normal; + overflow:auto; + display: block!important; + font-size:9pt; + font-family:monospace; } -code > pre > span.pln { - color: grey; +span.pln { + color:grey; } + @media screen and (min-width: 768px) { p.intro { clear: none; -- cgit v1.3 From 6804a2ede07438ba1bac922a9a6a914c30651127 Mon Sep 17 00:00:00 2001 From: czaks Date: Sun, 5 Oct 2014 22:16:36 +0200 Subject: remove default margin for table elements; fixes vichan-devel#95 --- stylesheets/style.css | 4 ---- 1 file changed, 4 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index b72056cb..30172427 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -8,10 +8,6 @@ body { padding-right: 4px; } -table * { - margin: 1px; -} - a,a:visited { text-decoration: underline; color: #34345C; -- cgit v1.3 From 906764a62f6fbc263d8b1d21957531edb6481e59 Mon Sep 17 00:00:00 2001 From: czaks Date: Tue, 7 Oct 2014 23:32:57 +0200 Subject: bundle longtable library @ https://github.com/czaks/longtable --- js/longtable/longtable.js | 184 ++++++++++++++++++++++++++++++++++++ stylesheets/longtable/longtable.css | 31 ++++++ 2 files changed, 215 insertions(+) create mode 100644 js/longtable/longtable.js create mode 100644 stylesheets/longtable/longtable.css (limited to 'stylesheets') diff --git a/js/longtable/longtable.js b/js/longtable/longtable.js new file mode 100644 index 00000000..fe3ad1c6 --- /dev/null +++ b/js/longtable/longtable.js @@ -0,0 +1,184 @@ +$.fn.longtable = function(fields, options, data) { + var elem = $(this).addClass("longtable"); + + var orig_data = data; + + options.row_h = options.row_h || 22; + options.checkbox = options.checkbox || false; + + var shown_rows = {}; + + var sorted_by = undefined; + var sorted_reverse = false; + + var filter = function() { return true; }; + + var lt = { + _gen_field_td: function(field, id) { + var el; + if (id === undefined) { + el = $(""); + el.html(fields[field].name || field); + + if (!fields[field].sort_disable) { + el.addClass("sortable").click(function() { + lt._sort_by(field); + }); + } + } + else { + el = $(""); + if (fields[field].fmt) { // Special formatting? + el.html(fields[field].fmt(data[id])); + } + else { + el.html(data[id][field]); + } + } + el.css("width", fields[field].width); + el.css("height", options.row_h); + return el; + }, + _gen_tr: function(id) { + var el = $(""); + $.each(fields, function(field, f) { + lt._gen_field_td(field, id).appendTo(el); + }); + if (id !== undefined) { + el.addClass("row").addClass("row_"+id); + el.css({position: "absolute", top: options.row_h * (id+1)}); + } + return el; + }, + _clean: function() { + elem.find('.row').remove(); + shown_rows = {}; + }, + _remove: function(id) { + elem.find('.row_'+id).remove(); + delete shown_rows[id]; + }, + _insert: function(id) { + var el = lt._gen_tr(id).appendTo(elem); + $(elem).trigger("new-row", [data[id], el]); + shown_rows[id] = true; + }, + + _sort_by: function(field) { + if (field !== undefined) { + if (sorted_by == field) { + sorted_reverse = !sorted_reverse; + } + else { + sorted_reverse = !!fields[field].sort_reverse; + sorted_by = field; + } + } + lt.sort_by(sorted_by, sorted_reverse); + }, + + _apply_filter: function() { + data = data.filter(filter); + }, + _reset_data: function() { + data = orig_data; + }, + + + set_filter: function(f) { + filter = f; + lt._reset_data(); + lt._apply_filter(); + lt._sort_by(); + }, + + sort_by: function(field, reverse) { + if (field !== undefined) { + sorted_by = field; + sorted_reverse = reverse; + + var ord = fields[field].sort_fun || function(a,b) { return lt.sort_alphanum(a[field], b[field]); }; + + data = data.sort(ord); + if (reverse) data = data.reverse(); + } + + lt.update_data(); + }, + + update_viewport: function() { + var first = $(window).scrollTop() - $(elem).offset().top - options.row_h; + var last = first + $(window).height(); + + first = Math.floor(first / options.row_h); + last = Math.ceil (last / options.row_h); + + first = first < 0 ? 0 : first; + last = last >= data.length ? data.length - 1 : last; + + $.each(shown_rows, function(id) { + if (id < first || id > last) { + lt._remove(id); + } + }); + + for (var id = first; id <= last; id++) { + if (!shown_rows[id]) lt._insert(id); + } + }, + + update_data: function() { + $(elem).height((data.length + 1) * options.row_h); + + lt._clean(); + lt.update_viewport(); + }, + + get_data: function() { + return data; + }, + + destroy: function() { + }, + + // http://web.archive.org/web/20130826203933/http://my.opera.com/GreyWyvern/blog/show.dml/1671288 + sort_alphanum: function(a, b) { + function chunkify(t) { + var tz = [], x = 0, y = -1, n = 0, i, j; + + while (i = (j = t.charAt(x++)).charCodeAt(0)) { + var m = (/* dot: i == 46 || */(i >=48 && i <= 57)); + if (m !== n) { + tz[++y] = ""; + n = m; + } + tz[y] += j; + } + return tz; + } + + var aa = chunkify((""+a).toLowerCase()); + var bb = chunkify((""+b).toLowerCase()); + + for (x = 0; aa[x] && bb[x]; x++) { + if (aa[x] !== bb[x]) { + var c = Number(aa[x]), d = Number(bb[x]); + if (c == aa[x] && d == bb[x]) { + return c - d; + } else return (aa[x] > bb[x]) ? 1 : -1; + } + } + return aa.length - bb.length; + } + // End of foreign code + }; + + + + lt._gen_tr().appendTo(elem); + lt.update_data(); + + $(window).on("scroll resize", lt.update_viewport); + + return lt; +}; diff --git a/stylesheets/longtable/longtable.css b/stylesheets/longtable/longtable.css new file mode 100644 index 00000000..09d9a0ab --- /dev/null +++ b/stylesheets/longtable/longtable.css @@ -0,0 +1,31 @@ +.longtable { + display: block; + position: relative; + box-sizing: border-box; +} +.longtable > tbody { + display: block; + box-sizing: border-box; +} +.longtable > tbody > tr { + display: block; + box-sizing: border-box; + clear: left; + width: 100%; +} +.longtable > tbody > tr > td { + display: block; + box-sizing: border-box; + float: left; + padding: 0; +} +.longtable > tbody > tr > th { + display: block; + box-sizing: border-box; + float: left; + padding: 0; +} +.longtable > tbody > tr > th.sortable { + cursor: pointer; +} + -- cgit v1.3 From ccd871c1950ee174aae1a6dfc00053ddacdad39f Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 9 Oct 2014 01:01:41 +0200 Subject: missed ban-list.css from banlist commit --- stylesheets/mod/ban-list.css | 61 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 stylesheets/mod/ban-list.css (limited to 'stylesheets') diff --git a/stylesheets/mod/ban-list.css b/stylesheets/mod/ban-list.css new file mode 100644 index 00000000..6115b4b9 --- /dev/null +++ b/stylesheets/mod/ban-list.css @@ -0,0 +1,61 @@ +#banlist { + clear: left; +} +#banlist th { + text-align: center; +} +#banlist th, #banlist td { + margin: 2px; + padding: 2px; + overflow: hidden; +} +#banlist td:hover { + overflow: visible; + height: auto !important; + background-color: white; + z-index: 1; + position: relative; + border: 1px solid black; + padding: 1px; +} +.banlist-opts { +} +.banlist-opts .checkboxes { + float: left; + width: 50%; +} +.banlist-opts .checkboxes label { + display: block; + color: black; +} +.banlist-opts .buttons { + float: left; + width: 50%; +} +.banlist-opts .buttons * { + display: inline-block; + width: 49%; + font-size: 18pt; +} + +tr.tblhead { + display: block; + box-sizing: border-box; + clear: left; + width: 100%; +} +tr.tblhead > th { + display: block; + box-sizing: border-box; + float: left; + padding: 0; + color: black; +} +tr.tblhead > th.sortable { + cursor: pointer; +} + + +body { + min-width: 980px; +} -- cgit v1.3 From b2cbb70da371dad7f9d399067b7e6df17d7a0b68 Mon Sep 17 00:00:00 2001 From: 8chan Date: Sat, 11 Oct 2014 10:21:00 -0700 Subject: Khorne in #8chan on irc.rizon.net contributed this thread watcher. Can't properly attribute the code to him because he doesn't want it connected to his Github account for some reason. Conflicts: inc/instance-config.php --- js/thread-watcher.js | 195 ++++++++++++++++++++++++++++++++++++++++++++++++++ stylesheets/style.css | 25 +++++++ 2 files changed, 220 insertions(+) create mode 100644 js/thread-watcher.js (limited to 'stylesheets') diff --git a/js/thread-watcher.js b/js/thread-watcher.js new file mode 100644 index 00000000..22656e48 --- /dev/null +++ b/js/thread-watcher.js @@ -0,0 +1,195 @@ +// Thanks to Khorne on #8chan at irc.rizon.net +// https://gitlab.com/aymous/8chan-watchlist + +'use strict'; +/* jshint globalstrict:true, quotmark:single */ +/* jshint browser:true, jquery:true, devel:true, unused:true, undef:true */ +/* global active_page:false, board_name:false */ +if(!localStorage.watchlist){ + //If the watchlist is undefined in the localStorage, + //initialize it as an empty array. + localStorage.watchlist = '[]'; +} +var watchlist = {}; + +/** + * [render /> Creates a watchlist container and populates it with info + * about each thread that's currently being watched. If the watchlist container + * already exists, it empties it out and repopulates it.] + * @param {[Bool]} reset [If true and the watchlist is rendered, remove it] + */ +watchlist.render = function(reset) { + /* jshint eqnull:true */ + if (reset == null) reset = false; + /* jshint eqnull:false */ + if (reset && $('#watchlist').length) $('#watchlist').remove(); + var threads = []; + //Read the watchlist and create a new container for each thread. + JSON.parse(localStorage.watchlist).forEach(function(e, i) { + //look at line 69, that's what (e) is here. + threads.push('
' + + 'Board: '+e[0]+' ' + + 'Thread: '+''+e[1]+' ' + + 'Replies: '+e[2]+' ' + + '[Unwatch]'+ + '
'); + }); + if ($('#watchlist').length) { + //If the watchlist is already there, empty it and append the threads. + $('#watchlist').children('.watchlist-inner').remove(); + $('#watchlist').append(threads.join('')); + } else { + //If the watchlist has not yet been rendered, create it. + $('form[name="post"]').before( + $('
'+ + '
'+ + '[Clear List] '+ + '[Clear Ghosts]'+ + '
'+ + threads.join('')+ + '
').css({ + background: $('.reply').css('background'), + borderColor : $('.reply').css('border-color') + })); + } + return this; +}; + +/** + * [add /> adds the given item to the watchlist] + * @param {[Obj/Str]} sel [An unwrapped jquery selector.] + */ +watchlist.add = function(sel) { + var threadName, threadInfo; + + if (active_page === 'thread') { + if ($('.subject').length){ + //If a subject is given, use the first 20 characters as the thread name. + threadName = $('.subject').text().substring(0,20); + } else { //Otherwise use the thread id. + threadName = $('.op').parent().attr('id'); + } + //board name, thread name as defined above, current amount of posts, thread url + threadInfo = [board_name, threadName, $('.post').length, location.href]; + + } else if (active_page === 'index') { + + var postCount; + //Figure out the post count. + if ($(sel).parents('.op').children('.omitted').length) { + postCount = $(sel).parents('.op').children('.omitted').text().split(' ')[0]; + } else { + postCount = $(sel).parents('.op').siblings('.post').length+1; + } + //Grab the reply link. + var threadLink = $(sel).siblings('a:contains("[Reply]")').attr('href'); + //Figure out the thread name. If anon, use the thread id. + if ($(sel).parent().find('.subject').length) { + threadName = $(sel).parent().find('.subject').text().substring(0,20); + } else { + threadName = $(sel).parents('div').last().attr('id'); + } + + threadInfo = [board_name, threadName, postCount, threadLink]; + + } else { + alert('Functionality not yet implemented for this type of page.'); + return this; + } + + //if the thread is already being watched, cancel the function. + if (localStorage.watchlist.indexOf(JSON.stringify(threadInfo)) !== -1) { + return this; + } + + var _watchlist = JSON.parse(localStorage.watchlist); //Read the watchlist + _watchlist.push(threadInfo); //Add the new watch item. + localStorage.watchlist = JSON.stringify(_watchlist); //Save the watchlist. + return this; +}; + +/** + * [remove /> removes the given item from the watchlist] + * @param {[Int]} n [The index at which to remove.] + */ +watchlist.remove = function(n) { + var _watchlist = JSON.parse(localStorage.watchlist); + _watchlist.splice(n, 1); + localStorage.watchlist = JSON.stringify(_watchlist); + return this; +}; + +/** + * [clear /> resets the watchlist to the initial empty array] + */ +watchlist.clear = function() { + localStorage.watchlist = '[]'; + return this; +}; + +/** + * [exists /> pings every watched thread to check if it exists and removes it if not] + * @param {[Obj/Str]} sel [an unwrapped jq selector] + */ +watchlist.exists = function(sel) { + $.ajax($(sel).children().children('a').attr('href'), { + type :'HEAD', + error: function() { + watchlist.remove(parseInt($(sel).attr('id').split('-')[1])).render(); + }, + success : function(){ + return; + } + }); +}; + +$(document).ready(function(){ + //Append the watchlist toggle button. + $('.boardlist').append('[ watchlist ]'); + //Append a watch thread button after every OP. + $('.op>.intro').append('[Watch Thread]'); + + //Draw the watchlist, hidden. + watchlist.render(); + + //Show or hide the watchlist. + $('#watchlist-toggle').on('click', function(e) { + //if ctrl+click, reset the watchlist. + if (e.ctrlKey) { + watchlist.render(true); + } + if ($('#watchlist').css('display') !== 'none') { + $('#watchlist').css('display', 'none'); + } else { + $('#watchlist').css('display', 'block'); + } //Shit got really weird with hide/show. Went with css manip. Probably faster anyway. + }); + + //Trigger the watchlist add function. + //The selector is passed as an argument in case the page is not a thread. + $('.watchThread').on('click', function() { + watchlist.add(this).render(); + }); + + //The index is saved in .watchlist-inner so that it can be passed as the argument here. + //$('.watchlist-remove').on('click') won't work in case of re-renders and + //the page will need refreshing. This works around that. + $(document).on('click', '.watchlist-remove', function() { + var item = parseInt($(this).parent().attr('id').split('-')[1]); + watchlist.remove(item).render(); + }); + + //Empty the watchlist and redraw it. + $('#clearList').on('click', function(){ + watchlist.clear().render(); + }); + + //Get rid of every watched item that no longer directs to an existing page. + $('#clearGhosts').on('click', function() { + $('.watchlist-inner').each(function(){ + watchlist.exists(this); + }); + }); + +}); + diff --git a/stylesheets/style.css b/stylesheets/style.css index 30172427..85909dd0 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -913,3 +913,28 @@ span.pln { clear: none; } } + +/* threadwatcher */ + +#watchlist { + display: none; + max-height: 250px; + overflow: auto; + border: 1px solid; + border-style: none solid solid none; + width: 50%; + margin: 0 auto; + margin-bottom: 10px; +} + +.watchlist-inner, .watchlist-controls { + margin: 0 auto; + margin-top: 10px; + margin-bottom: 10px; + text-align: center; +} + +#watchlist-toggle, .watchThread, .watchlist-remove, #clearList, #clearGhosts { + cursor: pointer; +} + -- cgit v1.3 From f9308ff28d0b221ee6044466148894d831ceb01b Mon Sep 17 00:00:00 2001 From: czaks Date: Sat, 18 Oct 2014 15:45:01 +0200 Subject: fix options.js textareas --- stylesheets/style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 85909dd0..ac6a2c11 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -821,6 +821,10 @@ div.thread:hover { height: 300px; } +#options_div textarea { + max-width: 100%; +} + #options_close { top: 0px; right: 0px; -- cgit v1.3 From b55ebcd0ef002c86df714a3c857746832f010bc7 Mon Sep 17 00:00:00 2001 From: czaks Date: Sat, 18 Oct 2014 22:43:35 +0200 Subject: custom alert: now alert will be able to display custom HTML --- stylesheets/caffe.css | 2 +- stylesheets/dark.css | 2 +- stylesheets/dark_roach.css | 2 +- stylesheets/futaba+vichan.css | 2 +- stylesheets/futaba-light.css | 2 +- stylesheets/futaba.css | 2 +- stylesheets/roach.css | 2 +- stylesheets/style.css | 27 ++++++++++++++++++++++----- stylesheets/yotsuba.css | 2 +- templates/main.js | 23 +++++++++++++++++++++++ 10 files changed, 53 insertions(+), 13 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/caffe.css b/stylesheets/caffe.css index 7e2c5879..aee4d5ab 100644 --- a/stylesheets/caffe.css +++ b/stylesheets/caffe.css @@ -382,7 +382,7 @@ font-size: 9pt; } /* options.js */ -#options_div { +#options_div, #alert_div { background: #a47a6b url('img/caffe_reply.png') repeat center; border: solid 1px #a47a6b; -moz-border-radius: 5px; diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 7d81f56d..7fc4e199 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -181,7 +181,7 @@ div.report { } /* options.js */ -#options_div { +#options_div, #alert_div { background: #333333; } .options_tab_icon { diff --git a/stylesheets/dark_roach.css b/stylesheets/dark_roach.css index 1831fd91..7d123c6d 100644 --- a/stylesheets/dark_roach.css +++ b/stylesheets/dark_roach.css @@ -471,7 +471,7 @@ input[type="submit"]:hover } /* options.js */ -#options_div { +#options_div, #alert_div { background: #333333; } .options_tab_icon { diff --git a/stylesheets/futaba+vichan.css b/stylesheets/futaba+vichan.css index 607cf49c..5f7d742b 100644 --- a/stylesheets/futaba+vichan.css +++ b/stylesheets/futaba+vichan.css @@ -101,7 +101,7 @@ div.boardlist.bottom { } /* options.js */ -#options_div { +#options_div, #alert_div { background: rgb(240, 224, 214); } .options_tab_icon { diff --git a/stylesheets/futaba-light.css b/stylesheets/futaba-light.css index ecc5da83..fc67709f 100644 --- a/stylesheets/futaba-light.css +++ b/stylesheets/futaba-light.css @@ -98,7 +98,7 @@ table.modlog tr th { } /* options.js */ -#options_div { +#options_div, #alert_div { background: rgb(240, 224, 214); } diff --git a/stylesheets/futaba.css b/stylesheets/futaba.css index c9cefb85..02c38351 100644 --- a/stylesheets/futaba.css +++ b/stylesheets/futaba.css @@ -86,7 +86,7 @@ table.modlog tr th { } /* options.js */ -#options_div { +#options_div, #alert_div { background: rgb(240, 224, 214); } .options_tab_icon { diff --git a/stylesheets/roach.css b/stylesheets/roach.css index 945559be..99aa6125 100644 --- a/stylesheets/roach.css +++ b/stylesheets/roach.css @@ -256,7 +256,7 @@ border-top: 1px solid #835B36 !important; } /* options.js */ -#options_div { +#options_div, #alert_div { background: white; } diff --git a/stylesheets/style.css b/stylesheets/style.css index ac6a2c11..e0ce08c5 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -786,7 +786,7 @@ div.thread:hover { text-align: center; } -#options_handler { +#options_handler, #alert_handler { position: fixed; top: 0px; left: 0px; @@ -798,7 +798,7 @@ div.thread:hover { z-index: 9900; } -#options_background { +#options_background, #alert_background { background: black; opacity: 0.5; position: absolute; @@ -811,21 +811,38 @@ div.thread:hover { z-index: -1; } -#options_div { +#options_div, #alert_div { background-color: #d6daf0; border: 1px solid black; display: inline-block; position: relative; margin-top: 20px; +} + +#options_div { width: 600px; height: 300px; } +#alert_div { + width: 500px; +} + +#alert_message { + text-align: center; + margin: 13px; + font-size: 110%; +} + +.alert_button { + margin-bottom: 13px; +} + #options_div textarea { max-width: 100%; } -#options_close { +#options_close, #alert_close { top: 0px; right: 0px; position: absolute; @@ -878,7 +895,7 @@ div.thread:hover { margin-bottom: 5px; } -.mobile-style #options_div { +.mobile-style #options_div, .mobile-style #alert_div { display: block; width: 100%; height: 100%; diff --git a/stylesheets/yotsuba.css b/stylesheets/yotsuba.css index 845a5f67..8997b696 100644 --- a/stylesheets/yotsuba.css +++ b/stylesheets/yotsuba.css @@ -59,7 +59,7 @@ table.modlog tr th { } /* options.js */ -#options_div { +#options_div, #alert_div { background: #f0e0d6; } diff --git a/templates/main.js b/templates/main.js index ed25f7d9..ead852fe 100644 --- a/templates/main.js +++ b/templates/main.js @@ -69,6 +69,29 @@ var datelocale = , pm: _('pm') }; + +function alert(a) { + var handler, div; + var close = function() { + handler.fadeOut(400, function() { handler.remove(); }); + return false; + }; + + handler = $("
").hide().appendTo('body'); + + $("
").click(close).appendTo(handler); + + div = $("
").appendTo(handler); + $("") + .click(close).appendTo(div); + + $("
").html(a).appendTo(div); + + $("").click(close).appendTo(div); + + handler.fadeIn(400); +} + var saved = {}; -- cgit v1.3 From 3bd7f94861e9a2a8b9a7f8f972f04eb6eaa45453 Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Wed, 18 Mar 2015 18:44:47 +0800 Subject: Fallback for browsers that disables javascript Conflicts: stylesheets/style.css templates/post_form.html --- js/file-selector.js | 3 +- stylesheets/style.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++ templates/post_form.html | 8 +++++ 3 files changed, 91 insertions(+), 1 deletion(-) (limited to 'stylesheets') diff --git a/js/file-selector.js b/js/file-selector.js index c820db48..ddae2d09 100644 --- a/js/file-selector.js +++ b/js/file-selector.js @@ -140,7 +140,8 @@ var dropHandlers = { } }; -$('.dropzone').css('user-select', 'none') // let jquery add browser specific prefix +$('#upload input[type=file]').hide(); // hide the original file selector +$('.dropzone-wrap').css('user-select', 'none').show(); // let jquery add browser specific prefix // attach handlers $(document).on(dropHandlers, '.dropzone'); diff --git a/stylesheets/style.css b/stylesheets/style.css index e0ce08c5..56140561 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -959,3 +959,84 @@ span.pln { cursor: pointer; } +#youtube-size input { + width: 50px; +} + +/* File selector */ +.dropzone { + color: #000; + cursor: default; + margin: auto; + padding: 0px 4px; + text-align: center; + min-height: 50px; + max-height: 140px; + transition: 0.2s; + background-color: rgba(200, 200, 200, 0.5); + overflow-y: auto; +} +.dropzone-wrap { + width: 100%; +} +.dropzone .file-hint { + color: rgba(0, 0, 0, 0.5); + cursor: pointer; + position: relative; + margin-bottom: 5px; + padding: 10px 0px; + top: 5px; + transition: 0.2s; + border: 2px dashed rgba(125, 125, 125, 0.4); +} +.file-hint:hover, .dropzone.dragover .file-hint { + color: rgba(0, 0, 0, 1); + border-color: rgba(125, 125, 125, 0.8); +} +.dropzone.dragover { + background-color: rgba(200, 200, 200, 1); +} +.dropzone .file-thumbs { + text-align: left; + width: 100%; +} +.dropzone .tmb-container { + padding: 3px; + overflow-x: hidden; + white-space: nowrap; +} +.dropzone .file-tmb { + height: 40px; + width: 70px; + cursor: pointer; + display: inline-block; + text-align: center; + background-color: rgba(187, 187, 187, 0.5); + background-size: cover; + background-position: center; +} +.dropzone .file-tmb span { + font-weight: 600; + position: relative; + top: 13px; +} +.dropzone .tmb-filename { + display: inline-block; + vertical-align: bottom; + bottom: 12px; + position: relative; + margin-left: 5px; +} +.dropzone .remove-btn { + cursor: pointer; + color: rgba(125, 125, 125, 0.5); + display: inline-block; + vertical-align: bottom; + bottom: 10px; + position: relative; + margin-right: 5px; + font-size: 20px +} +.dropzone .remove-btn:hover { + color: rgba(125, 125, 125, 1); +} diff --git a/templates/post_form.html b/templates/post_form.html index 1846adb5..9596ee6b 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -98,6 +98,14 @@ + + + {% if config.allow_upload_by_url %}
: -- cgit v1.3 From 388e87746ef936d6ce6ec04f7e09bbcd17d8e4fc Mon Sep 17 00:00:00 2001 From: czaks Date: Tue, 31 Mar 2015 06:55:29 +0200 Subject: small tweaks to stylesheet --- stylesheets/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 56140561..2565ba4f 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -93,13 +93,17 @@ input[type="text"],input[type="password"],textarea { text-shadow: none; text-transform: none; word-spacing: normal; - max-width: 75%; + max-width: 100%; } #quick-reply input[type="text"], input[type="password"], #quick-reply textarea { max-width: 100%; } +textarea { + width: 100%; +} + form table tr td { text-align: left; margin: 0; -- cgit v1.3 From de1a9fe568f21e88f326f5e645973c41d11b3211 Mon Sep 17 00:00:00 2001 From: czaks Date: Tue, 31 Mar 2015 07:27:22 +0200 Subject: futaba+vichan.css: do proper styling --- stylesheets/futaba+vichan.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/futaba+vichan.css b/stylesheets/futaba+vichan.css index 5f7d742b..c67fc93a 100644 --- a/stylesheets/futaba+vichan.css +++ b/stylesheets/futaba+vichan.css @@ -83,15 +83,12 @@ div.boardlist a { table.modlog tr th { background: #EA8; } -div.boardlist { - background-color: rgba(90%,90%,90%,0.2); +.desktop-style div.boardlist:nth-child(1), .desktop-style div.boardlist:nth-child(1):hover { + background-color: #f0e0d6; } div.boardlist .sub { background: none; } -div.boardlist.bottom { - background-color:transparent; -} .desktop-style div.boardlist:nth-child(1) { text-shadow: #fff 1px 1px 1px, #fff -1px -1px 1px; @@ -116,3 +113,8 @@ div.boardlist.bottom { border-color: #d9bfb7; border-width: 1px 0px 0px 1px; } + +.dropzone { + background-color: white; + border: 1px solid #a9a9a9; +} -- cgit v1.3 From a8982ce0a9182466c72ee54d59e0576e914dd221 Mon Sep 17 00:00:00 2001 From: czaks Date: Tue, 31 Mar 2015 07:29:52 +0200 Subject: f+v.css ... --- stylesheets/futaba+vichan.css | 3 --- 1 file changed, 3 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/futaba+vichan.css b/stylesheets/futaba+vichan.css index c67fc93a..f00dc9b7 100644 --- a/stylesheets/futaba+vichan.css +++ b/stylesheets/futaba+vichan.css @@ -93,9 +93,6 @@ div.boardlist .sub { .desktop-style div.boardlist:nth-child(1) { text-shadow: #fff 1px 1px 1px, #fff -1px -1px 1px; } -.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { - background-color: rgba(90%, 90%, 90%, 0.55); -} /* options.js */ #options_div, #alert_div { -- cgit v1.3 From 2256604dad36caca4bd3f90898f1d1040066773b Mon Sep 17 00:00:00 2001 From: topkek Date: Wed, 26 Nov 2014 21:10:27 +0000 Subject: add global option for tree view --- js/treeview.js | 71 ++++++++++++++++++++++++++++++++------------------- stylesheets/style.css | 3 ++- 2 files changed, 47 insertions(+), 27 deletions(-) (limited to 'stylesheets') diff --git a/js/treeview.js b/js/treeview.js index 78ad620b..c9bd55f8 100644 --- a/js/treeview.js +++ b/js/treeview.js @@ -11,35 +11,54 @@ * */ +if (active_page == 'thread' || active_page == 'ukko' || active_page == 'index') +$(function() { + if (window.Options && Options.get_tab('general')) { + var selector = '#treeview-global>input'; + Options.extend_tab("general", ""); + } + $(selector).on('change', function () { + if (localStorage.treeview === 'true') { + localStorage.treeview = 'false'; + } else { + localStorage.treeview = 'true'; + } + }); + if (localStorage.treeview === 'true') { + $(selector).attr('checked', 'checked'); + } +}); + if (active_page == 'thread') $(function() { + var treeview = function() { + $('.post.reply').each(function(){ + var references = []; + $(this).find('.body a').each(function(){ + if ($(this).html().match('^>>[0-9]+$')) { + references.push(parseInt($(this).html().replace('>>', ''))); + } + }); + var maxref = references.reduce(function(a,b) { return a > b ? a : b; }, 0); + + var parent_post = $("#reply_"+maxref); + if (parent_post.length == 0) return; + + var margin = parseInt(parent_post.css("margin-left"))+32; + + var post = $(this); + var br = post.next(); + + post.detach().css("margin-left", margin).insertAfter(parent_post.next()); + br.detach().insertAfter(post); + }); + } + if (localStorage.treeview === 'true') { + treeview(); + } + $('hr:first').before('
'); $('div#treeview a') .text(_('Tree view')) - .click(function(e) { - e.preventDefault(); - - $('.post.reply').each(function(){ - var references = []; - $(this).find('.body a').each(function(){ - if ($(this).html().match('^>>[0-9]+$')) { - references.push(parseInt($(this).html().replace('>>', ''))); - } - }); - - var maxref = references.reduce(function(a,b) { return a > b ? a : b; }, 0); - - var parent_post = $("#reply_"+maxref); - if (parent_post.length == 0) return; - - var margin = parseInt(parent_post.css("margin-left"))+32; - - var post = $(this); - var br = post.next(); - - post.detach().css("margin-left", margin).insertAfter(parent_post.next()); - br.detach().insertAfter(post); - - }); - }); + .click(function(e) { treeview(); e.preventDefault(); }); }); diff --git a/stylesheets/style.css b/stylesheets/style.css index 2565ba4f..d2cc0572 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -825,7 +825,7 @@ div.thread:hover { #options_div { width: 600px; - height: 300px; + height: 320px; } #alert_div { @@ -892,6 +892,7 @@ div.thread:hover { right: 0px; text-align: left; font-size: 12px; + overflow-y: auto; } .options_tab h2 { -- cgit v1.3 From c4fc8273328a7d4955e472e3242837a4e210adaf Mon Sep 17 00:00:00 2001 From: 8chan Date: Wed, 11 Mar 2015 18:22:22 -0700 Subject: some style fixes Conflicts: templates/8chan/boards-tags.html --- js/thread-stats.js | 2 +- stylesheets/dark.css | 8 ++++++-- stylesheets/photon.css | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) (limited to 'stylesheets') diff --git a/js/thread-stats.js b/js/thread-stats.js index 9b9b3cb3..fb520c71 100644 --- a/js/thread-stats.js +++ b/js/thread-stats.js @@ -16,7 +16,7 @@ $(document).ready(function(){ $('form[name="postcontrols"] > .delete') .first() - .before('
'); + .before('
'); var el = $('#thread_stats'); el.prepend('Page ?'); if (IDsupport){ diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 7fc4e199..beb12364 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -166,13 +166,13 @@ table.modlog tr th { color: #AAAAAA; } -.desktop-style div.boardlist:nth-child(1) { +.desktop-style div.boardlist:not(.bottom) { text-shadow: black 1px 1px 1px, black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px; background-color: #666666; } -.desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { +.desktop-style div.boardlist:not(.bottom):hover, .desktop-style div.boardlist:not(.bottom).cb-menu { background-color: rgba(30%, 30%, 30%, 0.65); } @@ -190,3 +190,7 @@ div.report { .options_tab_icon.active { color: #FFFFFF; } + +#quick-reply table { + background: none repeat scroll 0% 0% #333 !important; +} diff --git a/stylesheets/photon.css b/stylesheets/photon.css index db189d77..a487e4dd 100644 --- a/stylesheets/photon.css +++ b/stylesheets/photon.css @@ -326,6 +326,6 @@ form table tr td div { padding: 0px !important; } -.desktop-style div.boardlist:nth-child(1) { +.desktop-style div.boardlist:not(.bottom) { background-color: #DDDDDD; } -- cgit v1.3 From f86be0f44d126fc11da8644c5999b040a32c69b8 Mon Sep 17 00:00:00 2001 From: czaks Date: Fri, 10 Apr 2015 23:17:19 +0200 Subject: thread-stats: best viewed inline --- stylesheets/style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index d2cc0572..64de38bf 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1045,3 +1045,7 @@ span.pln { .dropzone .remove-btn:hover { color: rgba(125, 125, 125, 1); } + +#thread_stats { + display: inline; +} -- cgit v1.3 From 2d68972dd790c96f25b997b2111d0551f1b46029 Mon Sep 17 00:00:00 2001 From: czaks Date: Fri, 10 Apr 2015 23:21:22 +0200 Subject: thread-stats style: add margins --- stylesheets/style.css | 2 ++ 1 file changed, 2 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 64de38bf..80b124f8 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1048,4 +1048,6 @@ span.pln { #thread_stats { display: inline; + margin-left: 10px; + margin-right: 10px; } -- cgit v1.3 From 4014682882d0b390dc099d05e6701521e5f64a31 Mon Sep 17 00:00:00 2001 From: Marcin Ɓabanowski Date: Wed, 22 Apr 2015 05:54:48 +0200 Subject: fileboard support --- inc/config.php | 15 ++++++++++++- inc/display.php | 3 ++- inc/functions.php | 4 ++++ post.php | 17 +++++++++++++-- stylesheets/burichan.css | 2 +- stylesheets/caffe.css | 2 +- stylesheets/confraria.css | 8 +++---- stylesheets/dark.css | 10 ++++----- stylesheets/dark_roach.css | 24 ++++++++++----------- stylesheets/favela.css | 4 ++-- stylesheets/ferus.css | 10 ++++----- stylesheets/futaba+vichan.css | 4 ++-- stylesheets/futaba-light.css | 4 ++-- stylesheets/futaba.css | 4 ++-- stylesheets/gentoochan.css | 4 ++-- stylesheets/jungle.css | 4 ++-- stylesheets/luna.css | 22 +++++++++---------- stylesheets/miku.css | 8 +++---- stylesheets/nigrachan.css | 8 +++---- stylesheets/notsuba.css | 8 +++---- stylesheets/novo_jungle.css | 6 +++--- stylesheets/piwnichan.css | 4 ++-- stylesheets/ricechan.css | 2 +- stylesheets/style.css | 37 +++++++++++++++++++------------ stylesheets/szalet.css | 4 ++-- stylesheets/terminal2.css | 10 ++++----- stylesheets/testorange.css | 2 +- stylesheets/v8ch.css | 2 +- stylesheets/wasabi.css | 18 ++++++++-------- stylesheets/yotsuba.css | 4 ++-- templates/fileboard.html | 15 +++++++++++++ templates/post_form.html | 12 +++++++++++ templates/post_thread_fileboard.html | 42 ++++++++++++++++++++++++++++++++++++ 33 files changed, 216 insertions(+), 107 deletions(-) create mode 100644 templates/fileboard.html create mode 100644 templates/post_thread_fileboard.html (limited to 'stylesheets') diff --git a/inc/config.php b/inc/config.php index f11ee5f1..32308bd4 100644 --- a/inc/config.php +++ b/inc/config.php @@ -282,7 +282,8 @@ 'file_url', 'json_response', 'user_flag', - 'no_country' + 'no_country', + 'tag' ); // Enable reCaptcha to make spam even harder. Rarely necessary. @@ -735,6 +736,11 @@ $config['allowed_ext'][] = 'png'; // $config['allowed_ext'][] = 'svg'; + // Allowed extensions for OP. Inherits from the above setting if set to false. Otherwise, it overrides both allowed_ext and + // allowed_ext_files (filetypes for downloadable files should be set in allowed_ext_files as well). This setting is useful + // for creating fileboards. + $config['allowed_ext_op'] = false; + // Allowed additional file extensions (not images; downloadable files). // $config['allowed_ext_files'][] = 'txt'; // $config['allowed_ext_files'][] = 'zip'; @@ -1518,6 +1524,13 @@ // Allow OP to remove arbitrary posts in his thread $config['user_moderation'] = false; + // File board. Like 4chan /f/ + $config['file_board'] = false; + + // Thread tags. Set to false to disable + // Example: array('A' => 'Chinese cartoons', 'M' => 'Music', 'P' => 'Pornography'); + $config['allowed_tags'] = false; + /* * ==================== * Public post search diff --git a/inc/display.php b/inc/display.php index 65525ab9..e7fb9320 100644 --- a/inc/display.php +++ b/inc/display.php @@ -453,7 +453,8 @@ class Thread { event('show-thread', $this); - $built = Element('post_thread.html', array('config' => $config, 'board' => $board, 'post' => &$this, 'index' => $index, 'hasnoko50' => $hasnoko50, 'isnoko50' => $isnoko50, 'mod' => $this->mod)); + $file = ($index && $config['file_board']) ? 'post_thread_fileboard.html' : 'post_thread.html'; + $built = Element($file, array('config' => $config, 'board' => $board, 'post' => &$this, 'index' => $index, 'hasnoko50' => $hasnoko50, 'isnoko50' => $isnoko50, 'mod' => $this->mod)); return $built; } diff --git a/inc/functions.php b/inc/functions.php index 5a52d602..aa91133f 100755 --- a/inc/functions.php +++ b/inc/functions.php @@ -1358,6 +1358,10 @@ function index($page, $mod=false) { $body .= $thread->build(true); } + if ($config['file_board']) { + $body = Element('fileboard.html', array('body' => $body, 'mod' => $mod)); + } + return array( 'board' => $board, 'body' => $body, diff --git a/post.php b/post.php index 2b903b1c..5081845f 100644 --- a/post.php +++ b/post.php @@ -312,7 +312,12 @@ if (isset($_POST['delete'])) { $url_without_params = $post['file_url']; $post['extension'] = strtolower(mb_substr($url_without_params, mb_strrpos($url_without_params, '.') + 1)); - if (!in_array($post['extension'], $config['allowed_ext']) && !in_array($post['extension'], $config['allowed_ext_files'])) + + if ($post['op'] && $config['allowed_ext_op']) { + if (!in_array($post['extension'], $config['allowed_ext_op'])) + error($config['error']['unknownext']); + } + else if (!in_array($post['extension'], $config['allowed_ext']) && !in_array($post['extension'], $config['allowed_ext_files'])) error($config['error']['unknownext']); $post['file_tmp'] = tempnam($config['tmp'], 'url'); @@ -536,6 +541,10 @@ if (isset($_POST['delete'])) { "\n" . $flag_alt . ""; } + if ($config['allowed_tags'] && $_POST['op'] && isset($_POST['tag']) && isset($config['allowed_tags'][$_POST['tag']])) { + $post['body'] .= "\n" . $_POST['tag'] . ""; + } + if ($config['proxy_save'] && isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $proxy = preg_replace("/[^0-9a-fA-F.,: ]/", '', $_SERVER['HTTP_X_FORWARDED_FOR']); $post['body'] .= "\n".$proxy.""; @@ -565,7 +574,11 @@ if (isset($_POST['delete'])) { if ($post['has_file']) { $fnarray = array(); foreach ($post['files'] as $key => &$file) { - if (!in_array($file['extension'], $config['allowed_ext']) && !in_array($file['extension'], $config['allowed_ext_files'])) + if ($post['op'] && $config['allowed_ext_op']) { + if (!in_array($file['extension'], $config['allowed_ext_op'])) + error($config['error']['unknownext']); + } + elseif (!in_array($file['extension'], $config['allowed_ext']) && !in_array($file['extension'], $config['allowed_ext_files'])) error($config['error']['unknownext']); $file['is_an_image'] = !in_array($file['extension'], $config['allowed_ext_files']); diff --git a/stylesheets/burichan.css b/stylesheets/burichan.css index f1bbd8e6..6b1de235 100644 --- a/stylesheets/burichan.css +++ b/stylesheets/burichan.css @@ -36,7 +36,7 @@ div.banner { font-weight: normal; } -p.intro span.name { +.intro span.name { font-family: serif; font-size: 12px; } diff --git a/stylesheets/caffe.css b/stylesheets/caffe.css index aee4d5ab..7ba7bd1c 100644 --- a/stylesheets/caffe.css +++ b/stylesheets/caffe.css @@ -353,7 +353,7 @@ width: 100%; #attention_bar:hover { background-color: rgba(88, 53, 41, 0.3); } -p.intro a.email span.name { +.intro a.email span.name { color: #8e6152; } a.post_no:hover { diff --git a/stylesheets/confraria.css b/stylesheets/confraria.css index 8769c6bb..3b60aaa6 100644 --- a/stylesheets/confraria.css +++ b/stylesheets/confraria.css @@ -55,11 +55,11 @@ form table tr th { padding: 0px 5px; } -p.intro span.name { +.intro span.name { color: #C5C8C6; } -p.intro span.subject { +.intro span.subject { color: #CC1105; font-weight: bold; } @@ -90,11 +90,11 @@ div.post.reply.highlighted { background: #4A4C4F; } -p.intro a.email span.name { +.intro a.email span.name { color: rgb(129, 162, 190); } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: rgb(95, 137, 172); } diff --git a/stylesheets/dark.css b/stylesheets/dark.css index beb12364..e21b264e 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -23,7 +23,7 @@ div.title, h1 { div.title p { font-size: 10px; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #CCCCCC; text-decoration: none; font-family: sans-serif; @@ -61,21 +61,21 @@ div.post.reply div.body a:link, div.post.reply div.body a:visited { div.post.reply div.body a:link:hover, div.post.reply div.body a:visited:hover { color: #32DD72; } -p.intro span.subject { +.intro span.subject { font-size: 12px; font-family: sans-serif; color: #446655; font-weight: 800; } -p.intro span.name { +.intro span.name { color: #32DD72; font-weight: 800; } -p.intro a.capcode, p.intro a.nametag { +.intro a.capcode, p.intro a.nametag { color: magenta; margin-left: 0; } -p.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name { +.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name { color: #32ddaf; } input[type="text"], textarea, select { diff --git a/stylesheets/dark_roach.css b/stylesheets/dark_roach.css index 7d123c6d..89e050d4 100644 --- a/stylesheets/dark_roach.css +++ b/stylesheets/dark_roach.css @@ -20,7 +20,7 @@ a, a:visited { text-decoration: none; color: #9999CC; } -a:hover, p.intro a.post_no:hover { +a:hover, .intro a.post_no:hover { color: #996699 } a.post_no { @@ -28,19 +28,19 @@ a.post_no { margin: 0; padding: 0; } -p.intro a.post_no { +.intro a.post_no { color: inherit; } -p.intro a.post_no, p.intro a.email { +.intro a.post_no, p.intro a.email { margin: 0; } -p.intro a.email span.name { +.intro a.email span.name { color: #666699; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #663366; } -p.intro label { +.intro label { display: inline; } h2 { @@ -163,7 +163,7 @@ div.post.op { div.post.op hr { border-color: #000000; } -p.intro { +.intro { margin: 0.5em 0; padding: 0; padding-bottom: 0.2em; @@ -172,19 +172,19 @@ input.delete { float: left; margin: 1px 6px 0 0; } -p.intro span.subject { +.intro span.subject { color: #336699; font-weight: bold; } -p.intro span.name { +.intro span.name { color: #336600; font-weight: bold; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { +.intro span.capcode, p.intro a.capcode, p.intro a.nametag { color: #CC0000; margin-left: 0; } -p.intro a { +.intro a { margin-left: 8px; } div.delete { @@ -456,7 +456,7 @@ table.mod.config-editor input[type="text"] { background-color: #333333; opacity: 0.8; } -p.intro.thread-hidden { +.intro.thread-hidden { margin: 0px; padding: 0px; } diff --git a/stylesheets/favela.css b/stylesheets/favela.css index 6c9f6d58..52d24c76 100644 --- a/stylesheets/favela.css +++ b/stylesheets/favela.css @@ -46,7 +46,7 @@ form table tr th { color: #FFF; } -p.intro span.name { +.intro span.name { font-family: serif; } @@ -81,7 +81,7 @@ div[id^="thread_"].highlighted { background: #B5FFDD; } -p.intro a.email span.name { +.intro a.email span.name { color: #345456; } diff --git a/stylesheets/ferus.css b/stylesheets/ferus.css index f84d86ca..2517d3b0 100644 --- a/stylesheets/ferus.css +++ b/stylesheets/ferus.css @@ -16,7 +16,7 @@ div.title, h1 { div.title p { font-size: 13px; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #16C816; text-decoration: underline; font-family: monospace; @@ -51,21 +51,21 @@ div.post.reply div.body a:link, div.post.reply div.body a:visited { div.post.reply div.body a:link:hover, div.post.reply div.body a:visited:hover { color: #00FF00; } -p.intro span.subject { +.intro span.subject { font-size: 12px; font-family: monospace; color: #446655; font-weight: 800; } -p.intro span.name { +.intro span.name { color: #008200; font-weight: 900; } -p.intro a.capcode, p.intro a.nametag { +.intro a.capcode, p.intro a.nametag { color: magenta; margin-left: 0; } -p.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name { +.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name { color: #00CC64; font-family: monospace; } diff --git a/stylesheets/futaba+vichan.css b/stylesheets/futaba+vichan.css index f00dc9b7..16dff61b 100644 --- a/stylesheets/futaba+vichan.css +++ b/stylesheets/futaba+vichan.css @@ -15,7 +15,7 @@ div.title p { div.pages { font-size: 13px !important; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #0000ff; font-size: inherit; text-decoration: inherit; @@ -41,7 +41,7 @@ div.post.reply.highlighted { div.post.reply div.body a { color: navy; } -p.intro span.subject { +.intro span.subject { color: #d00; } form table tr th { diff --git a/stylesheets/futaba-light.css b/stylesheets/futaba-light.css index fc67709f..19166adf 100644 --- a/stylesheets/futaba-light.css +++ b/stylesheets/futaba-light.css @@ -15,7 +15,7 @@ div.title p { div.pages { font-size: 13px !important; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #A32615; font-size: inherit; text-decoration: inherit; @@ -42,7 +42,7 @@ div.post.reply.highlighted { div.post.reply div.body a { color: rgb(190, 79, 43); } -p.intro span.subject { +.intro span.subject { color: #AA4848; } form table tr th { diff --git a/stylesheets/futaba.css b/stylesheets/futaba.css index 02c38351..2b4fc1d2 100644 --- a/stylesheets/futaba.css +++ b/stylesheets/futaba.css @@ -10,7 +10,7 @@ div.title h1 { div.title p { font-size: 10px; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #0000ff; } a:link:hover { @@ -30,7 +30,7 @@ div.post.reply.highlighted { div.post.reply div.body a { color: navy; } -p.intro span.subject { +.intro span.subject { color: #d00; } form table tr th { diff --git a/stylesheets/gentoochan.css b/stylesheets/gentoochan.css index b5075136..ae7ef2f3 100644 --- a/stylesheets/gentoochan.css +++ b/stylesheets/gentoochan.css @@ -2,7 +2,7 @@ body { background: #0E0E0E url(data:image/gif;base64,R0lGODlhGAAMAKEEAOXl5ebm5vDw8PHx8SH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAAGAAMAAACRpQiY6cLa146MyY1EJQKjG81lNGRUPOIkgMJHtquBgIO7xwvpbrpduUSuXq8ntEC0bBEylYitdDAdM1ViaobkgKgZwyDLAAAOw==) repeat 0 0!important; color: #000; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { -webkit-transition: all ease-in 0.3s; -moz-transition: all ease-in 0.3s; color: rgba(0, 0, 0, 0.6); @@ -33,7 +33,7 @@ div.post.reply.highlighted { div.post.reply p.body a { color: navy; } -p.intro span.subject { +.intro span.subject { color: #000; } form table tr th { diff --git a/stylesheets/jungle.css b/stylesheets/jungle.css index 1765b3a9..86cb13b8 100644 --- a/stylesheets/jungle.css +++ b/stylesheets/jungle.css @@ -66,7 +66,7 @@ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35); div.post.reply div.body a { color: #00E; } -p.intro span.subject { +.intro span.subject { color: #d00; } form table tr th { @@ -118,7 +118,7 @@ table.modlog tr th { background: #EA8; } -p.intro span.name { +.intro span.name { color: maroon; font-weight: 600; } diff --git a/stylesheets/luna.css b/stylesheets/luna.css index 7439f5ca..e2fd6528 100644 --- a/stylesheets/luna.css +++ b/stylesheets/luna.css @@ -22,7 +22,7 @@ a, a:selected { text-decoration: bold; color: #ffffff; } -a:hover, p.intro a.post_no:hover { +a:hover, .intro a.post_no:hover { color: #ffffff; } a.post_no { @@ -30,19 +30,19 @@ a.post_no { margin: 0; padding: 0; } -p.intro a.post_no { +.intro a.post_no { color: inherit; } -p.intro a.post_no, p.intro a.email { +.intro a.post_no, p.intro a.email { margin: 0; } -p.intro a.email span.name { +.intro a.email span.name { color: #0091ff; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #ffffff; } -p.intro label { +.intro label { display: inline; } h2 { @@ -165,7 +165,7 @@ div.post.op { div.post.op hr { border-color: #040934; } -p.intro { +.intro { margin: 0.5em 0; padding: 0; padding-bottom: 0.2em; @@ -174,19 +174,19 @@ input.delete { float: left; margin: 1px 6px 0 0; } -p.intro span.subject { +.intro span.subject { color: #CCCCEE; font-weight: bold; } -p.intro span.name { +.intro span.name { color: #BBBBDD; font-weight: bold; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { +.intro span.capcode, p.intro a.capcode, p.intro a.nametag { color: #CCCCEE; margin-left: 0; } -p.intro a { +.intro a { margin-left: 8px; } div.delete { diff --git a/stylesheets/miku.css b/stylesheets/miku.css index 84e67933..7a8fb87e 100644 --- a/stylesheets/miku.css +++ b/stylesheets/miku.css @@ -19,11 +19,11 @@ a.post_no { color: #000033; } -p.intro a.email span.name { +.intro a.email span.name { color: #0093AB; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #DD0000; } @@ -43,12 +43,12 @@ div.post.op hr { border-color: #B7C9D5; } -p.intro span.subject { +.intro span.subject { color: #117743; font-weight: 800; } -p.intro span.name { +.intro span.name { color: #117743; font-weight: 800; } diff --git a/stylesheets/nigrachan.css b/stylesheets/nigrachan.css index 6d0a94fa..28ab3eb3 100644 --- a/stylesheets/nigrachan.css +++ b/stylesheets/nigrachan.css @@ -52,7 +52,7 @@ input[type="text"], input[type="password"], textarea, input[type="submit"], inpu border: 1px solid #202020; } -p.intro span.name { +.intro span.name { font-size: 11pt; color: #505050; font-weight: bold; @@ -88,16 +88,16 @@ div.post.reply.highlighted { background: #111111; } -p.intro a.email span.name { +.intro a.email span.name { color: #FFFFFF; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #A0A0A0; text-decoration: underline; } -p.intro span.subject { +.intro span.subject { color: #606060; } diff --git a/stylesheets/notsuba.css b/stylesheets/notsuba.css index ef9e1057..8ecb6b21 100644 --- a/stylesheets/notsuba.css +++ b/stylesheets/notsuba.css @@ -20,11 +20,11 @@ a.post_no { color: #000033; } -p.intro a.email span.name { +.intro a.email span.name { color: #608673; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #DD0000; } @@ -44,12 +44,12 @@ div.post.op hr { border-color: #608673; } -p.intro span.subject { +.intro span.subject { color: #8a2e2e; font-weight: 800; } -p.intro span.name { +.intro span.name { color: #117743; font-weight: 800; } diff --git a/stylesheets/novo_jungle.css b/stylesheets/novo_jungle.css index 70501d0a..8c313723 100644 --- a/stylesheets/novo_jungle.css +++ b/stylesheets/novo_jungle.css @@ -65,7 +65,7 @@ form[name="postcontrols"] { margin: 20px auto; } -p.intro span.name { +.intro span.name { color: #800000; font-weight: 800; } @@ -104,11 +104,11 @@ div.post.reply.highlighted { background-image: url('img/jungle_td_dark.png');; } -p.intro a.email span.name { +.intro a.email span.name { color: #0000EE; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #00990B; } diff --git a/stylesheets/piwnichan.css b/stylesheets/piwnichan.css index 2c1ea49a..7780226e 100644 --- a/stylesheets/piwnichan.css +++ b/stylesheets/piwnichan.css @@ -41,7 +41,7 @@ a.email span.name { color: #5A8C99 !important; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { +.intro span.capcode, p.intro a.capcode, p.intro a.nametag { color: #6E0877; } @@ -157,7 +157,7 @@ div.banner, .replymode, .catalogmode { font-weight:800; } -p.intro span.subject { +.intro span.subject { color: #4D2C80; font-weight: bold; } diff --git a/stylesheets/ricechan.css b/stylesheets/ricechan.css index 79b6d145..f01fc9bf 100644 --- a/stylesheets/ricechan.css +++ b/stylesheets/ricechan.css @@ -190,7 +190,7 @@ blockquote { .de-refmap { color: #4C505E !important; } -p.intro a.email span.name { +.intro a.email span.name { text-decoration: underline; } .quote { diff --git a/stylesheets/style.css b/stylesheets/style.css index 80b124f8..5ae23cd6 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -13,7 +13,7 @@ a,a:visited { color: #34345C; } -a:hover,p.intro a.post_no:hover { +a:hover,.intro a.post_no:hover { color: #ff0000; } @@ -23,27 +23,27 @@ a.post_no { padding: 0; } -p.intro a.post_no { +.intro a.post_no { color: inherit; } -p.intro a.post_no,p.intro a.email,p.intro a.post_anchor { +.intro a.post_no,p.intro a.email,p.intro a.post_anchor { margin: 0; } -p.intro a.email span.name { +.intro a.email span.name { color: #34345C; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #ff0000; } -p.intro label { +.intro label { display: inline; } -p.intro time,p.intro a.ip-link,p.intro a.capcode { +.intro time,p.intro a.ip-link,p.intro a.capcode { direction: ltr; unicode-bidi: embed; } @@ -219,7 +219,7 @@ div.post.op hr { border-color: #D9BFB7; } -p.intro { +.intro { margin: 0.5em 0; padding: 0; padding-bottom: 0.2em; @@ -230,22 +230,22 @@ input.delete { margin: 1px 6px 0 0; } -p.intro span.subject { +.intro span.subject { color: #0F0C5D; font-weight: bold; } -p.intro span.name { +.intro span.name { color: #117743; font-weight: bold; } -p.intro span.capcode,p.intro a.capcode,p.intro a.nametag { +.intro span.capcode,p.intro a.capcode,p.intro a.nametag { color: #F00000; margin-left: 0; } -p.intro a { +.intro a { margin-left: 8px; } @@ -604,7 +604,7 @@ table.mod.config-editor input[type="text"] { background-color: rgba(100%,100%,100%,0.2); } -p.intro.thread-hidden { +.intro.thread-hidden { margin: 0; padding: 0; } @@ -931,7 +931,7 @@ span.pln { @media screen and (min-width: 768px) { - p.intro { + .intro { clear: none; } @@ -1051,3 +1051,12 @@ span.pln { margin-left: 10px; margin-right: 10px; } + +/* Fileboard */ +table.fileboard th, table.fileboard td { + padding: 2px; + text-align: center; +} +table.fileboard .intro a { + margin-left: 0px; +} diff --git a/stylesheets/szalet.css b/stylesheets/szalet.css index e4deb8ee..77a216a6 100644 --- a/stylesheets/szalet.css +++ b/stylesheets/szalet.css @@ -20,7 +20,7 @@ background-repeat: repeat; background-color: #200000; } -p.intro span.capcode, p.intro a.capcode, p.intro a.nametag { +.intro span.capcode, p.intro a.capcode, p.intro a.nametag { color: #26899C; } @@ -154,7 +154,7 @@ div.banner, .replymode, .catalogmode { font-weight:800; } -p.intro span.subject { +.intro span.subject { color: #771018; font-weight: bold; } diff --git a/stylesheets/terminal2.css b/stylesheets/terminal2.css index f7463553..a951bc16 100644 --- a/stylesheets/terminal2.css +++ b/stylesheets/terminal2.css @@ -16,7 +16,7 @@ div.title, h1 { div.title p { font-size: 10px; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #00FF00; text-decoration: underline; font-family: sans-serif; @@ -50,21 +50,21 @@ div.post.reply div.body a:link, div.post.reply div.body a:visited { div.post.reply div.body a:link:hover, div.post.reply div.body a:visited:hover { color: #00FF00; } -p.intro span.subject { +.intro span.subject { font-size: 12px; font-family: sans-serif; color: #446655; font-weight: 800; } -p.intro span.name { +.intro span.name { color: #00FF00; font-weight: 800; } -p.intro a.capcode, p.intro a.nametag { +.intro a.capcode, p.intro a.nametag { color: #00FF00; margin-left: 0; } -p.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name { +.intro a.email, p.intro a.email span.name, p.intro a.email:hover, p.intro a.email:hover span.name { color: #00FF00; } input[type="text"], textarea, select { diff --git a/stylesheets/testorange.css b/stylesheets/testorange.css index cd2161b6..44ebd697 100644 --- a/stylesheets/testorange.css +++ b/stylesheets/testorange.css @@ -202,7 +202,7 @@ div.boardlist.bottom { background-color: rgba(0%, 0%, 0%, 0.45); } -p.intro span.subject { +.intro span.subject { color:#ee8100; } diff --git a/stylesheets/v8ch.css b/stylesheets/v8ch.css index bd8e68ab..eafed531 100644 --- a/stylesheets/v8ch.css +++ b/stylesheets/v8ch.css @@ -136,7 +136,7 @@ form table tr th{ background: #fec !important; } -p.intro.thread-hidden{ +.intro.thread-hidden{ padding-bottom: 1em !important; } diff --git a/stylesheets/wasabi.css b/stylesheets/wasabi.css index f898d731..87a81bdd 100644 --- a/stylesheets/wasabi.css +++ b/stylesheets/wasabi.css @@ -27,16 +27,16 @@ a.post_no { margin: 0; padding: 0; } -p.intro a.post_no, p.intro a.email { +.intro a.post_no, p.intro a.email { margin: 0; } -p.intro a.email span.name { +.intro a.email span.name { color: #34345C; } -p.intro a.email:hover span.name { +.intro a.email:hover span.name { color: #ff0000; } -p.intro label { +.intro label { display: inline; } h2 { @@ -155,7 +155,7 @@ div.post.op { div.post.op hr { border-color: #D9BFB7; } -p.intro { +.intro { margin: 0.5em 0; padding: 0; padding-bottom: 0.2em; @@ -164,19 +164,19 @@ input.delete { float: left; margin: 1px 6px 0 0; } -p.intro span.subject { +.intro span.subject { color: #0F0C5D; font-weight: bold; } -p.intro span.name { +.intro span.name { color: #117743; font-weight: bold; } -p.intro a.capcode, p.intro a.nametag { +.intro a.capcode, p.intro a.nametag { color: #F00000; margin-left: 0; } -p.intro a { +.intro a { margin-left: 8px; } div.delete { diff --git a/stylesheets/yotsuba.css b/stylesheets/yotsuba.css index 8997b696..5324d1a7 100644 --- a/stylesheets/yotsuba.css +++ b/stylesheets/yotsuba.css @@ -2,7 +2,7 @@ body { background: #ffe url('img/fade-yotsuba.png') repeat-x 50% 0%; color: #800000; } -a:link, a:visited, p.intro a.email span.name { +a:link, a:visited, .intro a.email span.name { color: #0000ff; } a:link:hover { @@ -22,7 +22,7 @@ div.post.reply.highlighted { div.post.reply div.body a { color: navy; } -p.intro span.subject { +.intro span.subject { color: #d00; } form table tr th { diff --git a/templates/fileboard.html b/templates/fileboard.html new file mode 100644 index 00000000..a970cecb --- /dev/null +++ b/templates/fileboard.html @@ -0,0 +1,15 @@ + + + + {{ body }} +
  + {% trans %}No.{% endtrans %} + {% trans %}Name{% endtrans %} + {% trans %}File{% endtrans %} + {% trans %}Tag{% endtrans %} + {% trans %}Subject{% endtrans %} + {% trans %}Size{% endtrans %} + {% trans %}Date{% endtrans %} + {% trans %}Replies{% endtrans %} +   +
diff --git a/templates/post_form.html b/templates/post_form.html index d2e644b3..ea3ac765 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -92,6 +92,18 @@ {% endif %} + {% if config.allowed_tags and not id %} + + {% trans %}Tag{% endtrans %} + + + + + {% endif %} {% trans %}File{% endtrans %} diff --git a/templates/post_thread_fileboard.html b/templates/post_thread_fileboard.html new file mode 100644 index 00000000..983bfe17 --- /dev/null +++ b/templates/post_thread_fileboard.html @@ -0,0 +1,42 @@ +{% filter remove_whitespace %} +{# tabs and new lines will be ignored #} + +{# we are intentionally breaking the thread_ID convention: the jses need to handle this case differently #} + + + +{{ post.id }} +{% include 'post/name.html' %} + {% include 'post/flag.html' %} +[{{ post.files[0].filename|e|bidi_cleanup }}] +{% if post.modifiers['tag'] %}[{{ post.modifiers['tag'] }}]{% endif %} +{% include 'post/subject.html' %} + {% if post.sticky %} + {% if config.font_awesome %} + + {% else %} + Sticky + {% endif %} + {% endif %} + {% if post.locked %} + {% if config.font_awesome %} + + {% else %} + Locked + {% endif %} + {% endif %} + {% if post.bumplocked and (config.mod.view_bumplock < 0 or (post.mod and post.mod|hasPermission(config.mod.view_bumplock, board.uri))) %} + {% if config.font_awesome %} + + {% else %} + Bumplocked + {% endif %} + {% endif %} +{{ post.files[0].size|filesize }} +{% include 'post/time.html' %} +{{ post.omitted }} +{% include 'post/post_controls.html' %} + [{% trans %}Reply{% endtrans %}] + + +{% endfilter %} -- cgit v1.3 From 3f029853802308ca51cc979bc01074bcbc3e9fc9 Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 23 Apr 2015 07:41:36 +0200 Subject: gallery-view.js: initial commit --- js/gallery-view.js | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++ stylesheets/style.css | 55 ++++++++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 js/gallery-view.js (limited to 'stylesheets') diff --git a/js/gallery-view.js b/js/gallery-view.js new file mode 100644 index 00000000..efe1b3b1 --- /dev/null +++ b/js/gallery-view.js @@ -0,0 +1,124 @@ +if (active_page == 'index' || active_page == 'thread') +$(function(){ + + var gallery_view = false; + + $('hr:first').before(''); + $('#gallery-view a').html(gallery_view ? _("Disable gallery mode") : _("Enable gallery mode")).click(function() { + gallery_view = !gallery_view; + $(this).html(gallery_view ? _("Disable gallery mode") : _("Enable gallery mode")); + toggle_gview(document); + }); + + var toggle_gview = function(elem) { + if (gallery_view) { + $(elem).find('img.post-image').parent().each(function() { + this.oldonclick = this.onclick; + this.onclick = handle_click; + $(this).attr('data-galid', Math.random()); + }); + } + else { + $(elem).find('img.post-image').parent().each(function() { + if (this.onclick == handle_click) this.onclick = this.oldonclick; + }); + } + }; + + $(document).on('new_post', toggle_gview); + + var gallery_opened = false; + + var handle_click = function(e) { + e.stopPropagation(); + e.preventDefault(); + + if (!gallery_opened) open_gallery(); + + gallery_setimage($(this).attr('data-galid')); + }; + + var handler, images, active, toolbar; + + var open_gallery = function() { + $('body').css('overflow', 'hidden'); + + gallery_opened = true; + + handler = $("
").hide().appendTo('body').css('text-align', 'left'); + + $("
").click(close_gallery).appendTo(handler); + + images = $("").appendTo(handler); + toolbar = $("").appendTo(handler); + active = $("").appendTo(handler); + + active.on('click', function() { + close_gallery(); + }); + + $('img.post-image').parent().each(function() { + var thumb = $(this).find('img').attr('src'); + + var i = $('').appendTo(images); + i.attr('src', thumb); + i.attr('data-galid-th', $(this).attr('data-galid')); + + i.on('click', function(e) { + gallery_setimage($(this).attr('data-galid-th')); + }); + }); + + $("
") + .click(close_gallery).appendTo(toolbar); + + handler.fadeIn(400); + }; + + var gallery_setimage = function(a) { + if (a == +1 || a == -1) { + var meth = (a == -1) ? 'prev' : 'next'; + a = $('#gallery_images img.active')[meth]().attr('data-galid-th'); + if (!a) return; + } + + $('#gallery_images img.active').removeClass('active'); + + var thumb = $('#gallery_images img[data-galid-th="'+a+'"]'); + var elem = $('a[data-galid="'+a+'"]'); + + thumb.addClass('active'); + + var topscroll = thumb.position().top + images.scrollTop(); + topscroll -= images.height() / 2; + topscroll += thumb.height() / 2; + images.animate({'scrollTop': topscroll}, 300); + + var img = elem.attr('href'); + + active.find('img').fadeOut(200, function() { $(this).remove(); }); + + var i = $(''); + i.attr('src', img); + i.appendTo(active); + i.hide(); + + i.on('load', function() { + i.css('left', 'calc(50% - '+i.width()+'px / 2)'); + i.css('top', 'calc(50% - '+i.height()+'px / 2)'); + i.fadeIn(200); + }).on('click', function(e) { + e.stopPropagation(); + gallery_setimage(+1); + }); + }; + + var close_gallery = function() { + $('body').css('overflow', 'auto'); + + gallery_opened = false; + + handler.fadeOut(400, function() { handler.remove(); }); + }; + +}); diff --git a/stylesheets/style.css b/stylesheets/style.css index 5ae23cd6..4c4c40f5 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1060,3 +1060,58 @@ table.fileboard th, table.fileboard td { table.fileboard .intro a { margin-left: 0px; } + +/* Gallery view */ +#gallery_images { + position: absolute; + right: 0px; + bottom: 0px; + top: 0px; + width: 15%; + background-color: rgba(0, 0, 0, 0.4); + overflow: auto; +} +#gallery_toolbar { + position: absolute; + right: 15%; + left: 0px; + bottom: 0px; + height: 32px; + background-color: rgba(0, 0, 0, 0.4); + text-align: right; +} +#gallery_images img { + width: 100%; +} +#gallery_toolbar a { + font-size: 28px; + padding-right: 5px; +} +#gallery_main { + position: absolute; + left: 0px; + right: 15%; + bottom: 32px; + top: 0px; + padding: 10px; +} + +#gallery_images img { + opacity: 0.6; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +#gallery_images img:hover, #gallery_images img.active { + opacity: 1; +} +#gallery_images img.active { + -webkit-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + -moz-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + z-index: 1; +} +#gallery_main img { + max-width: 100%; + max-height: 100%; + position: absolute; +} -- cgit v1.3 From 501484088b4012c8a52cb922d0ec0fac7014f34c Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 23 Apr 2015 09:21:16 +0200 Subject: gallery-view: i forgot the stylesheet --- stylesheets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index 4c4c40f5..ee80586c 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1110,7 +1110,7 @@ table.fileboard .intro a { box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); z-index: 1; } -#gallery_main img { +#gallery_main img, #gallery_main video { max-width: 100%; max-height: 100%; position: absolute; -- cgit v1.3 From d20149b57929c27da87a7d9603d85717da15c5bc Mon Sep 17 00:00:00 2001 From: czaks Date: Sat, 25 Apr 2015 02:26:42 +0200 Subject: gallery view: right bar should be 12%, not 15% --- stylesheets/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/style.css b/stylesheets/style.css index ee80586c..9925ccaa 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1067,13 +1067,13 @@ table.fileboard .intro a { right: 0px; bottom: 0px; top: 0px; - width: 15%; + width: 12%; background-color: rgba(0, 0, 0, 0.4); overflow: auto; } #gallery_toolbar { position: absolute; - right: 15%; + right: 12%; left: 0px; bottom: 0px; height: 32px; @@ -1090,7 +1090,7 @@ table.fileboard .intro a { #gallery_main { position: absolute; left: 0px; - right: 15%; + right: 12%; bottom: 32px; top: 0px; padding: 10px; -- cgit v1.3