Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress is pretty.

Browse Source
This commit is contained in:
Zixaphir 2013-05-31 04:32:25 -07:00
parent 561df984c2
commit 00dc59a891
8 changed files with 335 additions and 441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,5 +1,5 @@
/* /*
* appchan x - Version 2.0.6 - 2013-05-30 * appchan x - Version 2.0.6 - 2013-05-31
* *
* Licensed under the MIT license. * Licensed under the MIT license.
* https://github.com/zixaphir/appchan-x/blob/master/LICENSE * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

43
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

43
builds/appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

43
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

33
src/General/css/dynamic.css
View File

@ -1,7 +1,6 @@
body { #boardNavDesktopFoot a,
padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px;
}
#header-bar a, #header-bar a,
.deleteform::before,
.hide-navigation-decorations .pages a, .hide-navigation-decorations .pages a,
body, body,
button, button,
@ -9,12 +8,36 @@ input,
textarea { textarea {
font-size: #{parseInt _conf["Font Size"], 10}px; font-size: #{parseInt _conf["Font Size"], 10}px;
} }
#boardTitle,
.boardTitle a {
font-size: #{parseInt(_conf["Font Size"], 10) + 10}px;
}
.boardSubtitle,
.boardSubtitle a {
font-size: #{parseInt(_conf["Font Size"], 10) - 1}px;
}
body, body,
button, button,
input, input,
textarea { textarea {
font-family: #{_conf["Font"]}; font-family: #{_conf["Font"]};
} }
body {
padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px;
}
.board > .thread {
margin: #{parseInt _conf["Top Thread Padding"], 10}px 0 #{parseInt _conf["Bottom Thread Padding"], 10}px 0;
}
.post,
.summary {
margin-bottom: #{Conf["Post Spacing"]}px;
}
.thread > .threadContainer:last-of-type {
margin-bottom: -#{Conf["Post Spacing"]}px;
}
.postMessage {
margin: #{_conf['Vertical Post Padding']}px #{_conf['Horizontal Post Padding']}px;
}
.sidebar-location-left.sidebar-large:not(.fourchan-ss-navigation) #header-bar { .sidebar-location-left.sidebar-large:not(.fourchan-ss-navigation) #header-bar {
left: #{303 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px; left: #{303 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px;
right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;" right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;"
@ -78,4 +101,6 @@ textarea {
.sidebar-location-right.sidebar-hide:not(.pagination-alignment-on-side):not(.fourchan-ss-navigation) .pagelist { .sidebar-location-right.sidebar-hide:not(.pagination-alignment-on-side):not(.fourchan-ss-navigation) .pagelist {
right: #{2 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px; right: #{2 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;" left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
} }
/* Emoji */
#{unless _conf["Emoji"] is "disable" then Emoji.css _conf["Emoji Position"] else ""}

576
src/General/css/layout.css
View File

@ -403,20 +403,20 @@ th {
border: 0 none !important; border: 0 none !important;
text-align: right; text-align: right;
} }
.pagination-on-side.post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist, .pagination-on-side..post-form-style-fixed.show-post-form-header.post-form-decorations .pagelist,
.pagination-on-side.post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist { .pagination-on-side..post-form-style-transparent-fade.show-post-form-header.post-form-decorations .pagelist {
bottom: 23.3em; bottom: 23.3em;
} }
.pagination-on-side.post-form-style-fixed.show-post-form-header .pagelist, .pagination-on-side..post-form-style-fixed.show-post-form-header .pagelist,
.pagination-on-side.post-form-style-transparent-fade.show-post-form-header .pagelist { .pagination-on-side..post-form-style-transparent-fade.show-post-form-header .pagelist {
bottom: 23.1em; bottom: 23.1em;
} }
.pagination-on-side.post-form-style-fixed.post-form-decorations .pagelist, .pagination-on-side..post-form-style-fixed.post-form-decorations .pagelist,
.pagination-on-side..post-form-style-transparent-fade.post-form-decorations .pagelist { .pagination-on-side...post-form-style-transparent-fade.post-form-decorations .pagelist {
bottom: 21.8em; bottom: 21.8em;
} }
.pagination-on-side.post-form-style-fixed .pagelist, .pagination-on-side..post-form-style-fixed .pagelist,
.pagination-on-side.post-form-style-transparent-fade .pagelist { .pagination-on-side..post-form-style-transparent-fade .pagelist {
bottom: 21.6em; bottom: 21.6em;
} }
.sidebar-location-left.pagination-on-side .pagelist { .sidebar-location-left.pagination-on-side .pagelist {
@ -470,7 +470,7 @@ th {
display: inline-block; display: inline-block;
margin: 0 3px; margin: 0 3px;
} }
/* Banner */ /* Banner & Board Title */
.boardBanner { .boardBanner {
line-height: 0; line-height: 0;
} }
@ -490,7 +490,7 @@ th {
bottom: -100%; bottom: -100%;
content: ''; content: '';
left: 0; left: 0;
mask: url(\"data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient gradientUnits='objectBoundingBox' id='gradient' x2='0' y2='1'><stop stop-offset='0'/><stop stop-color='white' offset='1'/></linearGradient><mask id='mask' maskUnits='objectBoundingBox' maskContentUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%'> <rect fill='url(%23gradient)' width='1' height='1' /></mask></defs></svg>#mask\"); mask: url("data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient gradientUnits='objectBoundingBox' id='gradient' x2='0' y2='1'><stop stop-offset='0'/><stop stop-color='white' offset='1'/></linearGradient><mask id='mask' maskUnits='objectBoundingBox' maskContentUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%'> <rect fill='url(%23gradient)' width='1' height='1' /></mask></defs></svg>#mask");
opacity: 0.3; opacity: 0.3;
position: absolute; position: absolute;
right: 0; right: 0;
@ -517,21 +517,33 @@ th {
.fourchan-banner-under-post-form .boardBanner { .fourchan-banner-under-post-form .boardBanner {
bottom: 130px; bottom: 130px;
} }
.board-title-at-sidebar-top.sidebar-location-right #boardTitle,
.board-title-at-sidebar-bottom.sidebar-location-right #boardTitle,
.board-title-under-post-form.sidebar-location-right #boardTitle,
.fourchan-banner-at-sidebar-top.sidebar-location-right .boardBanner, .fourchan-banner-at-sidebar-top.sidebar-location-right .boardBanner,
.fourchan-banner-at-sidebar-bottom.sidebar-location-right .boardBanner, .fourchan-banner-at-sidebar-bottom.sidebar-location-right .boardBanner,
.fourchan-banner-under-post-form.sidebar-location-right .boardBanner { .fourchan-banner-under-post-form.sidebar-location-right .boardBanner {
right: 2px; right: 2px;
} }
.board-title-at-sidebar-top.sidebar-location-left #boardTitle,
.board-title-at-sidebar-bottom.sidebar-location-left #boardTitle,
.board-title-under-post-form.sidebar-location-left #boardTitle,
.fourchan-banner-at-sidebar-top.sidebar-location-left .boardBanner, .fourchan-banner-at-sidebar-top.sidebar-location-left .boardBanner,
.fourchan-banner-at-sidebar-bottom.sidebar-location-left .boardBanner, .fourchan-banner-at-sidebar-bottom.sidebar-location-left .boardBanner,
.fourchan-banner-under-post-form.sidebar-location-left .boardBanner { .fourchan-banner-under-post-form.sidebar-location-left .boardBanner {
left: 2px; left: 2px;
} }
.board-title-at-sidebar-top #boardTitle,
.board-title-at-sidebar-bottom #boardTitle,
.board-title-under-post-form #boardTitle,
.fourchan-banner-at-sidebar-top .boardBanner img, .fourchan-banner-at-sidebar-top .boardBanner img,
.fourchan-banner-at-sidebar-bottom .boardBanner img, .fourchan-banner-at-sidebar-bottom .boardBanner img,
.fourchan-banner-under-post-form .boardBanner img { .fourchan-banner-under-post-form .boardBanner img {
width: 248px; width: 248px;
} }
.board-title-at-sidebar-top.sidebar-large #boardTitle,
.board-title-at-sidebar-bottom.sidebar-large #boardTitle,
.board-title-under-post-form.sidebar-large #boardTitle,
.fourchan-banner-at-sidebar-top.sidebar-large .boardBanner img, .fourchan-banner-at-sidebar-top.sidebar-large .boardBanner img,
.fourchan-banner-at-sidebar-bottom.sidebar-large .boardBanner img, .fourchan-banner-at-sidebar-bottom.sidebar-large .boardBanner img,
.fourchan-banner-under-post-form.sidebar-large .boardBanner img { .fourchan-banner-under-post-form.sidebar-large .boardBanner img {
@ -543,53 +555,39 @@ th {
margin: 12px auto; margin: 12px auto;
text-align: center; text-align: center;
} }
fourchan-banner-hide .boardBanner { :root:not(.board-subtitle) .boardSubtitle,
.board-title-hide #boardTitle,
.fourchan-banner-hide .boardBanner {
display: none; display: none;
} }
/* Board Title */
#boardTitle { #boardTitle {
font-size: #{parseInt(_conf["Font Size"], 10) + 10}px;
text-align: center; text-align: center;
z-index: 4; z-index: 4;
#{{ }
"at sidebar top": " .board-title-at-sidebar-top #boardTitle,
.board-title-at-sidebar-bottom #boardTitle,
.board-title-under-post-form #boardTitle {
position: fixed; position: fixed;
#{Style.sidebarLocation[0]}: 2px; }
top: #{(if Style.logoOffset is 0 and _conf["Icon Orientation"] isnt "vertical" then 40 else 21) + Style.logoOffset}px; .board-title-at-sidebar-top.fourchan-banner-at-sidebar-top.sidebar-large.icon-orientation-vertical #boardTitle {
width: #{width}px; top: 121px;
" }
.board-title-at-sidebar-top.fourchan-banner-at-sidebar-top.icon-orientation-vertical #boardTitle {
"at sidebar bottom": " top: 104px;
position: fixed; }
#{Style.sidebarLocation[0]}: 2px; .board-title-at-sidebar-top #boardTitle {
top: 40px;
}
.board-title-at-sidebar-top.icon-orientation-vertical #boardTitle {
top: 21px;
}
.board-title-at-sidebar-bottom .boardBanner {
bottom: 280px; bottom: 280px;
width: #{width}px; }
" .board-title-under-post-form .boardBanner {
"under post form": "
position: fixed;
#{Style.sidebarLocation[0]}: 2px;
bottom: 140px; bottom: 140px;
width: #{width}px;
"
"at top": "
margin: 12px 0;
"
"hide": "
display: none;
"}[_conf["Board Title"]]}
} }
.boardTitle a { /* Hover UI */
font-size: #{parseInt(_conf["Font Size"], 10) + 10}px;
}
.boardSubtitle,
.boardSubtitle a {
font-size: #{parseInt(_conf["Font Size"], 10) - 1}px;
}
#{unless _conf['Board Subtitle'] then ".boardSubtitle { display: none; }" else ""}
/* Dialogs */
.move { .move {
cursor: pointer; cursor: pointer;
} }
@ -623,22 +621,18 @@ fourchan-banner-hide .boardBanner {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
#{if _conf['Images Overlap Post Form'] then " .images-overlap-post-form .full-image {
.full-image {
position: relative; position: relative;
z-index: 21; z-index: 21;
}" else ""
} }
/* Delete Buttons */ /* Delete Buttons */
#{if _conf['Hide Delete UI'] then " .hide-delete-ui .deleteform,
.deleteform, .hide-delete-ui .post:not(#exlinks-options) .rice {
.post:not(#exlinks-options) .rice {
display: none; display: none;
} }
.postInfo { .hide-delete-ui .postInfo {
padding: 0 0 0 3px; padding: 0 0 0 3px;
} }
" else "
.deleteform { .deleteform {
position: fixed; position: fixed;
z-index: 18; z-index: 18;
@ -662,7 +656,6 @@ fourchan-banner-hide .boardBanner {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
font-size: #{_conf['Font Size']}px;
<%= sizing %>: border-box; <%= sizing %>: border-box;
height: 1.6em; height: 1.6em;
width: 1.4em; width: 1.4em;
@ -673,22 +666,25 @@ fourchan-banner-hide .boardBanner {
} }
.deleteform input { .deleteform input {
margin: 0 1px 0 0; margin: 0 1px 0 0;
}"} }
/* Slideout Navigation */ /* Slideout Navigation */
#boardNavDesktopFoot { #boardNavDesktopFoot {
position: fixed; position: fixed;
width: #{width}px;
#{Style.sidebarLocation[0]}: 2px;
text-align: center; text-align: center;
font-size: 0; font-size: 0;
color: transparent; color: transparent;
overflow: hidden; overflow: hidden;
<%= sizing %>: border-box; <%= sizing %>: border-box;
width: 248px;
} }
#boardNavDesktopFoot a, .sidebar-large #boardNavDesktopFoot {
#boardNavDesktopFoot a::after, width: 299px;
#boardNavDesktopFoot a::before { }
font-size: #{_conf['Font Size']}px; .sidebar-location-right #boardNavDesktopFoot {
right: 2px;
}
.sidebar-location-left #boardNavDesktopFoot {
left: 2px;
} }
#boardNavDesktopFoot:hover { #boardNavDesktopFoot:hover {
overflow-y: auto; overflow-y: auto;
@ -702,69 +698,35 @@ fourchan-banner-hide .boardBanner {
padding: 0; padding: 0;
border: 0 none; border: 0 none;
} }
#{{ .slideout-navigation-compact #boardNavDesktopFoot {
compact: "
#boardNavDesktopFoot {
word-spacing: 1px; word-spacing: 1px;
} }
" .slideout-navigation-list #boardNavDesktopFoot a {
list: "
#boardNavDesktopFoot a {
display: block; display: block;
} }
#boardNavDesktopFoot:hover { .slideout-navigation-list #boardNavDesktopFoot:hover {
max-height: 400px; max-height: 400px;
} }
#boardNavDesktopFoot a::after { .slideout-navigation-list #boardNavDesktopFoot a::after {
content: ' - ' attr(title); content: ' - ' attr(title);
} }
#boardNavDesktopFoot a[href*='//boards.4chan.org/']::after, .slideout-navigation-list #boardNavDesktopFoot a[href*='//boards.4chan.org/']::after,
#boardNavDesktopFoot a[href*='//rs.4chan.org/']::after { .slideout-navigation-list #boardNavDesktopFoot a[href*='//rs.4chan.org/']::after {
content: '/ - ' attr(title); content: '/ - ' attr(title);
} }
#boardNavDesktopFoot a[href*='//boards.4chan.org/']::before, .slideout-navigation-list #boardNavDesktopFoot a[href*='//boards.4chan.org/']::before,
#boardNavDesktopFoot a[href*='//rs.4chan.org/']::before { .slideout-navigation-list #boardNavDesktopFoot a[href*='//rs.4chan.org/']::before {
content: '/'; content: '/';
} }
" .slideout-navigation-hide #boardNavDesktopFoot {
hide: "
#boardNavDesktopFoot {
display: none; display: none;
}"}[_conf["Slideout Navigation"]]} }
/* Watcher */ /* Watcher */
#watcher { #watcher {
position: fixed; position: fixed;
z-index: 14; z-index: 14;
padding: 2px; padding: 2px;
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
} }
#watcher > div {
max-height: 1.3em;
overflow: hidden;
}
#{if _conf['Slideout Watcher'] then "
#watcher {
width: #{width}px;
#{Style.sidebarLocation[0]}: 2px !important;
#{Style.sidebarLocation[1]}: auto !important;
<%= sizing %>: border-box;
}
#watcher .move {
cursor: default;
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"};
}
#watcher > div {
overflow: hidden;
}
#watcher:hover {
overflow-y: auto;
}
#watcher:not(:hover) {
height: 0;
overflow: hidden;
border: 0 none;
padding: 0;
}" else "
#watcher { #watcher {
width: 200px; width: 200px;
} }
@ -772,7 +734,46 @@ hide: "
max-height: 200px; max-height: 200px;
overflow: hidden; overflow: hidden;
} }
"} .rounded-edges #watcher {
border-radius: 3px;
}
#watcher > div {
max-height: 1.3em;
overflow: hidden;
}
.slideout-watcher #watcher {
<%= sizing %>: border-box;
width: 248px;
}
.slideout-watcher.sidebar-large #boardNavDesktopFoot {
width: 299px;
}
.slideout-watcher.sidebar-location-right #watcher {
left: auto;
right: 2px;
}
.slideout-watcher.sidebar-location-left #watcher {
right: auto;
left: 2px;
}
.slideout-watcher #watcher .move {
cursor: default;
}
.slideout-watcher.underline-links #watcher .move {
text-decoration: underline;
}
.slideout-watcher #watcher > div {
overflow: hidden;
}
.slideout-watcher #watcher:hover {
overflow-y: auto;
}
.slideout-watcher #watcher:not(:hover) {
height: 0;
overflow: hidden;
border: 0 none;
padding: 0;
}
.watch-thread-link { .watch-thread-link {
padding-top: 18px; padding-top: 18px;
width: 18px; width: 18px;
@ -789,42 +790,49 @@ hide: "
/* Announcements */ /* Announcements */
#globalMessage { #globalMessage {
text-align: center; text-align: center;
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""}
} }
#{{ .rounded-edges #globalMessage {
'slideout': " border-radius: 3px;
#globalMessage { }
.announcements-slideout #globalMessage {
position: fixed; position: fixed;
padding: 2px; padding: 2px;
width: #{width}px; width: 248px;
#{Style.sidebarLocation[0]}: 2px !important;
#{Style.sidebarLocation[1]}: auto !important;
} }
#globalMessage h3 { .announcements-slideout.sidebar-location-right #globalMessage {
left: auto;
right: 2px;
}
.announcements-slideout.sidebar-location-left #globalMessage {
right: auto;
left: 2px;
}
.announcements-slideout.sidebar-large #globalMessage {
width: 299px;
}
.announcements-slideout #globalMessage h3 {
margin: 0; margin: 0;
} }
#globalMessage:hover { .announcements-slideout #globalMessage:hover {
<%= sizing %>: border-box; <%= sizing %>: border-box;
overflow-y: auto; overflow-y: auto;
} }
#globalMessage:not(:hover) { .announcements-slideout #globalMessage:not(:hover) {
height: 0; height: 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
border: 0 none; border: 0 none;
}" }
'hide': " .announcements-hide #globalMessage {
#globalMessage {
display: none !important; display: none !important;
} }
"}[_conf['Announcements']] or ""}
/* Threads */ /* Threads */
.thread { .rounded-edges .board > .thread{
margin: #{parseInt _conf["Top Thread Padding"], 10}px 0 #{parseInt _conf["Bottom Thread Padding"], 10}px 0; border-radius: 4px;
#{if _conf["Rounded Edges"] then "border-radius: 4px;" else ""}
} }
/* Thread Clearfix */ /* Thread Clearfix */
.thread > div:last-of-type::after { .thread > .threadContainer:last-of-type::after,
.thread > .replyContainer:last-of-type::after {
display: block; display: block;
content: ' '; content: ' ';
clear: both; clear: both;
@ -842,12 +850,7 @@ hide: "
.expanded-image > .post > .file > .fileThumb > .full-image { .expanded-image > .post > .file > .fileThumb > .full-image {
display: block; display: block;
} }
.post, .thread > .replyContainer:last-of-type .post {
.summary,
.threadContainer {
margin-bottom: #{Style.replyMargin}px;
}
.replyContainer:last-of-type .post {
margin-bottom: 0; margin-bottom: 0;
} }
.menu-button { .menu-button {
@ -880,24 +883,23 @@ hide: "
.hidden_thread { .hidden_thread {
text-align: right; text-align: right;
} }
#{if _conf['Color user IDs'] then " .color-user-ids .posteruid .hand {
.posteruid .hand {
padding: .1em .3em; padding: .1em .3em;
border-radius: 1em; border-radius: 1em;
font-size: 80%; font-size: 80%;
}" else ""} }
.postInfo > span { .postInfo > span {
vertical-align: bottom; vertical-align: bottom;
} }
.subject, .bolds .subject,
.name { .bolds .name {
#{if _conf["Bolds"] then 'font-weight: 600;' else ''} font-weight: 600;
} }
.postertrip { .italics .postertrip {
#{if _conf["Italics"] then 'font-style: italic;' else ''} font-style: italic;
} }
.replylink { .underline-links .replylink {
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"}; text-decoration: underline;
} }
.fileInfo { .fileInfo {
padding: 0 3px; padding: 0 3px;
@ -909,37 +911,29 @@ hide: "
} }
.reply.post { .reply.post {
<%= sizing %>: border-box; <%= sizing %>: border-box;
display: inline-block;
} }
#{if _conf["Fit Width Replies"] then " .fit-width-replies .reply.post {
.reply.post {
display: block; display: block;
overflow: hidden; overflow: hidden;
} }
.expanded-image .reply.post, .fit-width-replies .expanded-image .reply.post,
.hasInline .reply.post { .fit-width-replies .hasInline .reply.post {
width: 100%; width: 100%;
} }
" else " .indent-replies #unread-line,
.reply.post { .indent-replies .thread > .replyContainer,
display: inline-block; .indent-replies .threadContainer > .replyContainer {
}
"}
#{if _conf["Indent Replies"] then "
.thread > .replyContainer,
.threadContainer > .replyContainer {
margin-left: 2em; margin-left: 2em;
}" else ''} }
.expanded-image .reply.post, .expanded-image .reply.post,
.hasInline .reply.post { .hasInline .reply.post {
display: inline-block; display: inline-block;
overflow: visible; overflow: visible;
clear: both; clear: both;
} }
.post { .rounded-edges .post {
#{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""} border-radius: 3px;
}
.postMessage {
margin: #{_conf['Vertical Post Padding']}px #{_conf['Horizontal Post Padding']}px;
} }
.spoiler, .spoiler,
s { s {
@ -949,27 +943,22 @@ s {
.reply.post .postMessage { .reply.post .postMessage {
clear: right; clear: right;
} }
#{if _conf['Force Reply Break'] or _conf["OP Background"] then " .op-background .op.post .postMessage::after,
.op.post .postMessage::after { .force-reply-break .op.post .postMessage::after {
display: block; display: block;
content: ' '; content: ' ';
clear: both; clear: both;
} }
" else ""
}
/* OP */ /* OP */
.favicon { .favicon {
vertical-align: bottom; vertical-align: bottom;
} }
#{if _conf["OP Background"] then " .op-background .op.post {
.op.post {
<%= sizing %>: border-box; <%= sizing %>: border-box;
}" else ""} }
/* Summary */ /* Summary */
#{ .force-reply-break .summary {
if _conf["Force Reply Break"] clear: both;
".summary { clear: both;}"
else ""
} }
/* Inlined */ /* Inlined */
.inline { .inline {
@ -991,12 +980,11 @@ else ""
.inlined { .inlined {
opacity: .5; opacity: .5;
} }
.quotelink { .underline-links .quotelink {
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"}; text-decoration: underline;
} }
.filtered, .filtered,
.quotelink.filtered { .quotelink.filtered {
text-decoration: underline;
text-decoration: line-through !important; text-decoration: line-through !important;
} }
.inline + .hashlink { .inline + .hashlink {
@ -1004,92 +992,68 @@ else ""
} }
/* Quote Threading */ /* Quote Threading */
.threadContainer { .threadContainer {
#{if _conf["Indent Replies"] then "margin" else "padding"}-left: 2em; padding-left: 2em;
border-left: 1px solid; border-left: 1px solid;
} }
.indent-replies .threadContainer {
margin-left: 2em;
padding-left: 0;
}
.threadOP { .threadOP {
clear: both; clear: both;
} }
/* Backlinks */ /* Backlinks */
.backlink { .underline-links .backlink {
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"}; text-decoration: underline;
} }
.backlink.dead { .backlink.dead {
text-decoration: none; text-decoration: none;
} }
#{ .filtered-backlinks .filtered.backlink {
if _conf["Filtered Backlinks"] then "
.filtered.backlink {
display: none; display: none;
}"
} }
#{{ backlinks-position-lower-left .container,
"lower left": " backlinks-position-lower-right .container {
.container {
padding: 0 5px;
max-width: 100%; max-width: 100%;
padding: 0 5px;
} }
.reply.quoted { backlinks-position-lower-left .reply.quoted,
backlinks-position-lower-right .reply.quoted {
position: relative; position: relative;
padding-bottom: 1.7em; padding-bottom: 1.7em;
} }
.reply .container { backlinks-position-lower-right .reply .container,
backlinks-position-lower-left .reply .container {
position: absolute; position: absolute;
bottom: 0;
padding: 0 5px;
}
backlinks-position-lower-left .reply .container {
left: 0; left: 0;
bottom: 0;
padding: 0 5px;
} }
.reply .container::before { backlinks-position-lower-right .reply .container {
content: 'REPLIES: ';
}
#qp .container {
position: static;
max-width: 100%;
}
#qp .container::before {
content: '';
}
.inline .container {
position: static;
max-width: 100%;
}
.inline .container::before {
content: '';
}"
'lower right': "
.reply.quoted {
position: relative;
padding-bottom: 1.7em;
}
.reply .container {
position: absolute;
right: 0; right: 0;
bottom: 0;
} }
.container::before { backlinks-position-lower-right .container::before,
backlinks-position-lower-left .reply .container::before {
content: 'REPLIES: '; content: 'REPLIES: ';
} }
.container { backlinks-position-lower-left #qp .container,
max-width: 100%; backlinks-position-lower-left .inline .container,
padding: 0 5px; backlinks-position-lower-right .inline .container,
} backlinks-position-lower-right #qp .container {
#qp .container {
position: static; position: static;
max-width: 100%; max-width: 100%;
} }
#qp .container::before { backlinks-position-lower-left #qp .container::before,
backlinks-position-lower-left .inline .container::before,
backlinks-position-lower-right #qp .container::before,
backlinks-position-lower-right .inline .container::before {
content: ''; content: '';
} }
.inline .container { backlinks-position-lower-right .inline .container {
position: static;
float: none; float: none;
} }
.inline .container::before {
content: '';
}"
'default': ""}[_conf["Backlinks Position"]]}
/* Code */ /* Code */
.prettyprint { .prettyprint {
<%= sizing %>: border-box; <%= sizing %>: border-box;
@ -1135,14 +1099,11 @@ if _conf["Filtered Backlinks"] then "
display: block; display: block;
} }
/* Stubs */ /* Stubs */
#{if _conf['Fit Width Replies'] then " .fit-width-replies .stub {
.stub {
display: block; display: block;
text-align: right; text-align: right;
}" else ""} }
/* Emoji */ /* Element Replacing: */
#{unless _conf["Emoji"] is "disable" then Emoji.css _conf["Emoji Position"] else ""}
/* Element Replacing */
/* Checkboxes */ /* Checkboxes */
.rice { .rice {
cursor: pointer; cursor: pointer;
@ -1151,8 +1112,12 @@ if _conf["Filtered Backlinks"] then "
margin: 2px 3px 3px; margin: 2px 3px 3px;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
#{if _conf["Rounded Edges"] then "border-radius: 2px;" else ""} }
#{if _conf["Circle Checkboxes"] then "border-radius: 6px;" else ""} .rounded-edges .rice {
border-radius: 2px;}
}
.circle-checkboxes .rice {
border-radius: 6px;}
} }
input:checked + .rice { input:checked + .rice {
background-attachment: scroll; background-attachment: scroll;
@ -1207,94 +1172,107 @@ input:checked + .rice {
position: fixed; position: fixed;
padding: 1px; padding: 1px;
border: 1px solid transparent; border: 1px solid transparent;
min-width: #{width}px; min-width: 248px;
#{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""}
} }
#qrtab { .sidebar-large #qr {
#{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""} min-width: 299px;
} }
.rounded-edges #qr,
#{{ .rounded-edges #qrtab {
"fixed": " border-radius: 3px 3px 0 0;
#qr { }
.post-form-style-fixed #qr {
top: auto !important; top: auto !important;
bottom: #{Style.pfOffset}em !important;
#{Style.sidebarLocation[0]}: 0 !important;
#{Style.sidebarLocation[1]}: auto !important;
}"
"slideout": "
#qrtab input,
#qrtab .rice {
display: none;
} }
#qr { .sidebar-location-left:not(.post-form-style-float) #qr {
left: 0 !important;
right: auto !important;
}
.sidebar-location-right:not(.post-form-style-float) #qr {
right: 0 !important;
left: auto !important;
}
:root:not(.post-form-style-float) #qr {
bottom: 0;
}
.fourchan-ss-navigation:not(.post-form-style-float).fixed.bottom #qr,
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-float) #qr {
bottom: 1.5em;
}
.post-form-style-slideout #qr {
top: auto !important; top: auto !important;
bottom: #{Style.pfOffset}em !important;
#{Style.sidebarLocation[0]}: 0 !important;
#{Style.sidebarLocation[1]}: auto !important;
<%= agent %>transform: translateX(#{xOffset}93%);
} }
#qr:hover, .post-form-style-slideout.sidebar-location-left #qr {
#qr.has-focus, <%= agent %>transform: translateX(-93%);
#qr.dump { }
.post-form-style-slideout.sidebar-location-right #qr {
<%= agent %>transform: translateX(93%);
}
.post-form-style-slideout #qr:hover,
.post-form-style-slideout #qr.has-focus,
.post-form-style-slideout #qr.dump {
<%= agent %>transform: translate(0); <%= agent %>transform: translate(0);
}"
"tabbed slideout": "
#qr {
top: auto !important;
bottom: #{Style.pfOffset}em !important;
#{Style.sidebarLocation[0]}: 0 !important;
#{Style.sidebarLocation[1]}: auto !important;
<%= agent %>transform: translateX(#{xOffset}100%);
} }
#qr:hover, .post-form-style-tabbed-slideout #qr {
#qr.has-focus, top: auto !important;
#qr.dump { }
.post-form-style-tabbed-slideout.sidebar-location-left #qr {
<%= agent %>transform: translateX(-100%);
}
.post-form-style-tabbed-slideout.sidebar-location-right #qr {
<%= agent %>transform: translateX(100%);
}
.post-form-style-tabbed-slideout #qr:hover,
.post-form-style-tabbed-slideout #qr.has-focus,
.post-form-style-tabbed-slideout #qr.dump {
<%= agent %>transform: translateX(0); <%= agent %>transform: translateX(0);
} }
#qrtab { .post-form-style-tabbed-slideout #qrtab {
<%= agent %>transform: rotate(#{(if Style.sidebarLocation[0] is "left" then "" else "-")}90deg);
<%= agent %>transform-origin: bottom #{Style.sidebarLocation[0]};
position: absolute; position: absolute;
top: 0; top: 0;
#{Style.sidebarLocation[0]}: 100%;
width: 110px; width: 110px;
text-align: center; text-align: center;
border-width: 1px 1px 0 1px; border-width: 1px 1px 0 1px;
cursor: default; cursor: default;
} }
#qr:hover #qrtab, .post-form-style-tabbed-slideout.sidebar-location-left #qrtab {
#qr.has-focus #qrtab, <%= agent %>transform: rotate(90deg);
#qr.dump #qrtab { <%= agent %>transform-origin: bottom right;
left: 100%;
}
.post-form-style-tabbed-slideout.sidebar-location-right #qrtab {
<%= agent %>transform: rotate(-90deg);
<%= agent %>transform-origin: bottom right;
right: 100%;
}
.post-form-style-tabbed-slideout #qr:hover #qrtab,
.post-form-style-tabbed-slideout #qr.has-focus #qrtab,
.post-form-style-tabbed-slideout #qr.dump #qrtab {
opacity: 0; opacity: 0;
} }
#qrtab input, .post-form-style-slideout #qrtab input,
#qrtab .close, .post-form-style-slideout #qrtab .rice,
#qrtab .rice, .post-form-style-tabbed-slideout #qrtab input,
#qrtab .selectrice, .post-form-style-tabbed-slideout #qrtab .close,
#qrtab span { .post-form-style-tabbed-slideout #qrtab .rice,
.post-form-style-tabbed-slideout #qrtab span {
display: none; display: none;
}" }
.post-form-style-tabbed-slideout #qrtab .selectrice {
"transparent fade": " text-align: center;
#qr { }
.post-form-style-transparent-fade #qr {
overflow: visible; overflow: visible;
top: auto !important; top: auto !important;
bottom: #{Style.pfOffset}em !important;
#{Style.sidebarLocation[0]}: 2px !important;
#{Style.sidebarLocation[1]}: auto !important;
opacity: 0.2; opacity: 0.2;
<%= agent %>transition: opacity .3s ease-in-out 1s; <%= agent %>transition: opacity .3s ease-in-out 1s;
} }
#qr:hover, .post-form-style-transparent-fade #qr:hover,
#qr.has-focus, .post-form-style-transparent-fade #qr.has-focus,
#qr.dump { .post-form-style-transparent-fade #qr.dump {
opacity: 1; opacity: 1;
<%= agent %>transition: opacity .3s linear; <%= agent %>transition: opacity .3s linear;
}" }
}[_conf['Post Form Style']] or ""}
#{ #{
unless _conf['Post Form Style'] is 'tabbed slideout' unless _conf['Post Form Style'] is 'tabbed slideout'

2
src/General/css/theme.css
View File

@ -176,7 +176,7 @@ textarea.field:focus {
border-style: solid; border-style: solid;
border-color: #{theme["Navigation Border"]}; border-color: #{theme["Navigation Border"]};
} }
.thread { .board > .thread {
background: #{theme["Thread Wrapper Background"]}; background: #{theme["Thread Wrapper Background"]};
border: 1px solid #{theme["Thread Wrapper Border"]}; border: 1px solid #{theme["Thread Wrapper Border"]};
} }

34
src/Theming/Style.coffee
View File

@ -13,7 +13,9 @@ Style =
<% } else { %> <% } else { %>
$.addClass doc, 'gecko' $.addClass doc, 'gecko'
<% } %> <% } %>
$.addClass doc, 'fourchan-x'
$.addClass doc, 'appchan-x' $.addClass doc, 'appchan-x'
$.addClass doc, g.VIEW
for title, cat of Config.style for title, cat of Config.style
for name, setting of cat for name, setting of cat
@ -161,8 +163,7 @@ Style =
layout: -> layout: ->
# Remove after classes rewrite # Remove after classes rewrite
_conf = Conf _conf = Conf
xOffset = if _conf["Sidebar Location"] is "left" then '-' else ''
Style.pfOffset = if _conf['4chan SS Navigation'] and Style.pfOffset = if _conf['4chan SS Navigation'] and
((_conf['Bottom Header'] and _conf['Fixed Header']) or ((_conf['Bottom Header'] and _conf['Fixed Header']) or
@ -178,21 +179,6 @@ Style =
large: 303 large: 303
}[_conf['Sidebar']] }[_conf['Sidebar']]
Style.logoOffset =
if _conf["4chan Banner"] is "at sidebar top"
if _conf["Sidebar"] is "large"
100
else
83
else
0
width =
if _conf["Sidebar"] is "large"
299
else
248
Style.sidebarLocation = if _conf["Sidebar Location"] is "left" Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
["left", "right"] ["left", "right"]
else else
@ -207,13 +193,10 @@ Style =
left: 0 left: 0
right: 0 right: 0
Style.replyMargin = _conf["Post Spacing"]
css = """<%= grunt.file.read('src/General/css/layout.css') %>""" css = """<%= grunt.file.read('src/General/css/layout.css') %>"""
dynamic: -> dynamic: ->
_conf = Conf _conf = Conf
xOffset = if _conf["Sidebar Location"] is "left" then '-' else ''
Style.pfOffset = if _conf['4chan SS Navigation'] and Style.pfOffset = if _conf['4chan SS Navigation'] and
((_conf['Bottom Header'] and _conf['Fixed Header']) or ((_conf['Bottom Header'] and _conf['Fixed Header']) or
@ -229,15 +212,6 @@ Style =
large: 303 large: 303
}[_conf['Sidebar']] }[_conf['Sidebar']]
Style.logoOffset =
if _conf["4chan Banner"] is "at sidebar top"
if _conf["Sidebar"] is "large"
100
else
83
else
0
Style.sidebarLocation = if _conf["Sidebar Location"] is "left" Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
["left", "right"] ["left", "right"]
else else
@ -252,8 +226,6 @@ Style =
left: 0 left: 0
right: 0 right: 0
Style.replyMargin = _conf["Post Spacing"]
css = """<%= grunt.file.read('src/General/css/dynamic.css') %>""" css = """<%= grunt.file.read('src/General/css/dynamic.css') %>"""
theme: (theme) -> theme: (theme) ->