Add support for 4chan's various themes.
On the catalog, it allows dialogs to be correctly themed as it didn't have the same stylesheets. Fix #919.
This commit is contained in:
Nicolas Stepien
parent
9de0342dbd
commit
82249ef3ec
File diff suppressed because one or more lines are too long
@ -13,6 +13,7 @@ alpha
|
||||
Fix Chrome's install warning saying that 4chan X would execute on all domains.
|
||||
Fix Quote Backlinks not affecting inlined quotes.
|
||||
Fix Quote Highlighting not affecting inlined quotes.
|
||||
Fix unreadable inlined posts with the Tomorrow theme.
|
||||
|
||||
master
|
||||
- Mayhem
|
||||
|
||||
28
css/burichan.css
Normal file
28
css/burichan.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* general */
|
||||
:root.burichan .dialog {
|
||||
background-color: #D6DAF0;
|
||||
border-color: #B7C5D9;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
:root.burichan #header-bar {
|
||||
font-size: 11pt;
|
||||
color: #89A;
|
||||
}
|
||||
:root.burichan #header-bar a {
|
||||
color: #34345C;
|
||||
}
|
||||
|
||||
/* quote */
|
||||
:root.burichan .inline {
|
||||
border-color: #B7C5D9;
|
||||
background-color: rgba(255, 255, 255, .14);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
:root.burichan .entry:not(:last-child) {
|
||||
border-bottom: 1px solid #B7C5D9;
|
||||
}
|
||||
:root.burichan .focused.entry {
|
||||
background: rgba(255, 255, 255, .33);
|
||||
}
|
||||
28
css/futaba.css
Normal file
28
css/futaba.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* general */
|
||||
:root.futaba .dialog {
|
||||
background-color: #F0E0D6;
|
||||
border-color: #D9BFB7;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
:root.futaba #header-bar {
|
||||
font-size: 11pt;
|
||||
color: #B86;
|
||||
}
|
||||
:root.futaba #header-bar a {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
/* quote */
|
||||
:root.futaba .inline {
|
||||
border-color: #D9BFB7;
|
||||
background-color: rgba(255, 255, 255, .14);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
:root.futaba .entry:not(:last-child) {
|
||||
border-bottom: 1px solid #D9BFB7;
|
||||
}
|
||||
:root.futaba .focused.entry {
|
||||
background: rgba(255, 255, 255, .33);
|
||||
}
|
||||
28
css/photon.css
Normal file
28
css/photon.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* general */
|
||||
:root.photon .dialog {
|
||||
background-color: #DDD;
|
||||
border-color: #CCC;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
:root.photon #header-bar {
|
||||
font-size: 9pt;
|
||||
color: #333;
|
||||
}
|
||||
:root.photon #header-bar a {
|
||||
color: #FF6600;
|
||||
}
|
||||
|
||||
/* quote */
|
||||
:root.photon .inline {
|
||||
border-color: #CCC;
|
||||
background-color: rgba(255, 255, 255, .14);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
:root.photon .entry:not(:last-child) {
|
||||
border-bottom: 1px solid #CCC;
|
||||
}
|
||||
:root.photon .focused.entry {
|
||||
background: rgba(255, 255, 255, .33);
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
/* general */
|
||||
.dialog.reply {
|
||||
.dialog {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
|
||||
border: 1px solid;
|
||||
display: block;
|
||||
border: 1px solid rgba(0, 0, 0, .25);
|
||||
padding: 0;
|
||||
}
|
||||
.move {
|
||||
@ -60,26 +61,22 @@ a[href="javascript:;"] {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* XXX support different styles */
|
||||
#header-bar {
|
||||
font-size: 9pt;
|
||||
color: #89A;
|
||||
background-color: #D6DAF0;
|
||||
border-color: #B7C5D9;
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.fourchan_x body {
|
||||
/* Header */
|
||||
.fourchan-x body {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.fourchan-x #boardNavDesktop,
|
||||
.fourchan-x #navtopright,
|
||||
.fourchan-x #boardNavDesktopFoot {
|
||||
display: none !important;
|
||||
}
|
||||
#header {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
#header-bar {
|
||||
border-width: 0 0 1px;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
transition: all .1s ease-in-out;
|
||||
@ -117,11 +114,6 @@ a[href="javascript:;"] {
|
||||
float: right;
|
||||
padding: 0;
|
||||
}
|
||||
body > #boardNavDesktop,
|
||||
#navtopright,
|
||||
#boardNavDesktopFoot {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* notifications */
|
||||
#notifications {
|
||||
@ -142,16 +134,16 @@ body > #boardNavDesktop,
|
||||
-webkit-transition: all .25s ease-in-out;
|
||||
}
|
||||
.notification.error {
|
||||
background-color: hsl(0, 100%, 40%);
|
||||
background-color: hsla(0, 100%, 40%, .9);
|
||||
}
|
||||
.notification.warning {
|
||||
background-color: hsl(36, 100%, 40%);
|
||||
background-color: hsla(36, 100%, 40%, .9);
|
||||
}
|
||||
.notification.info {
|
||||
background-color: hsl(200, 100%, 40%);
|
||||
background-color: hsla(200, 100%, 40%, .9);
|
||||
}
|
||||
.notification.success {
|
||||
background-color: hsl(104, 100%, 40%);
|
||||
background-color: hsla(104, 100%, 40%, .9);
|
||||
}
|
||||
.notification > .close {
|
||||
color: white;
|
||||
@ -208,12 +200,13 @@ body > #boardNavDesktop,
|
||||
text-decoration: underline line-through;
|
||||
}
|
||||
.inline {
|
||||
border: 1px solid rgba(128, 128, 128, .5);
|
||||
border: 1px solid;
|
||||
display: table;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.inline .post {
|
||||
border: 0 !important;
|
||||
background-color: transparent !important;
|
||||
display: table !important;
|
||||
margin: 0 !important;
|
||||
padding: 1px 2px !important;
|
||||
@ -260,7 +253,7 @@ body > #boardNavDesktop,
|
||||
}
|
||||
.filter-highlight > .reply.qphl {
|
||||
box-shadow: -5px 0 rgba(255, 0, 0, .5),
|
||||
0 0 0 2px rgba(216, 94, 49, .7)
|
||||
0 0 0 2px rgba(216, 94, 49, .7);
|
||||
}
|
||||
|
||||
/* Thread & Reply Hiding */
|
||||
@ -292,7 +285,6 @@ body > #boardNavDesktop,
|
||||
outline: none;
|
||||
}
|
||||
.entry {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .25);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
outline: none;
|
||||
@ -301,12 +293,6 @@ body > #boardNavDesktop,
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.entry:last-child {
|
||||
border: none;
|
||||
}
|
||||
.focused.entry {
|
||||
background: rgba(255, 255, 255, .33);
|
||||
}
|
||||
.entry.has-submenu {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
28
css/tomorrow.css
Normal file
28
css/tomorrow.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* general */
|
||||
:root.tomorrow .dialog {
|
||||
background-color: #282A2E;
|
||||
border-color: #111;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
:root.tomorrow #header-bar {
|
||||
font-size: 9pt;
|
||||
color: #C5C8C6;
|
||||
}
|
||||
:root.tomorrow #header-bar a {
|
||||
color: #81A2BE;
|
||||
}
|
||||
|
||||
/* quote */
|
||||
:root.tomorrow .inline {
|
||||
border-color: #111;
|
||||
background-color: rgba(0, 0, 0, .14);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
:root.tomorrow .entry:not(:last-child) {
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
:root.tomorrow .focused.entry {
|
||||
background: rgba(0, 0, 0, .33);
|
||||
}
|
||||
28
css/yotsuba-b.css
Normal file
28
css/yotsuba-b.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* general */
|
||||
:root.yotsuba-b .dialog {
|
||||
background-color: #D6DAF0;
|
||||
border-color: #B7C5D9;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
:root.yotsuba-b #header-bar {
|
||||
font-size: 9pt;
|
||||
color: #89A;
|
||||
}
|
||||
:root.yotsuba-b #header-bar a {
|
||||
color: #34345C;
|
||||
}
|
||||
|
||||
/* quote */
|
||||
:root.yotsuba-b .inline {
|
||||
border-color: #B7C5D9;
|
||||
background-color: rgba(255, 255, 255, .14);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
:root.yotsuba-b .entry:not(:last-child) {
|
||||
border-bottom: 1px solid #B7C5D9;
|
||||
}
|
||||
:root.yotsuba-b .focused.entry {
|
||||
background: rgba(255, 255, 255, .33);
|
||||
}
|
||||
28
css/yotsuba.css
Normal file
28
css/yotsuba.css
Normal file
@ -0,0 +1,28 @@
|
||||
/* general */
|
||||
:root.yotsuba .dialog {
|
||||
background-color: #F0E0D6;
|
||||
border-color: #D9BFB7;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
:root.yotsuba #header-bar {
|
||||
font-size: 9pt;
|
||||
color: #B86;
|
||||
}
|
||||
:root.yotsuba #header-bar a {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
/* quote */
|
||||
:root.yotsuba .inline {
|
||||
border-color: #D9BFB7;
|
||||
background-color: rgba(255, 255, 255, .14);
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
:root.yotsuba .entry:not(:last-child) {
|
||||
border-bottom: 1px solid #D9BFB7;
|
||||
}
|
||||
:root.yotsuba .focused.entry {
|
||||
background: rgba(255, 255, 255, .33);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
UI = (->
|
||||
dialog = (id, position, html) ->
|
||||
el = d.createElement 'div'
|
||||
el.className = 'reply dialog'
|
||||
el.className = 'dialog'
|
||||
el.innerHTML = html
|
||||
el.id = id
|
||||
el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position
|
||||
@ -23,7 +23,7 @@ UI = (->
|
||||
|
||||
makeMenu: ->
|
||||
menu = $.el 'div',
|
||||
className: 'reply dialog'
|
||||
className: 'dialog'
|
||||
id: 'menu'
|
||||
tabIndex: 0
|
||||
$.on menu, 'click', (e) -> e.stopPropagation()
|
||||
@ -89,7 +89,7 @@ UI = (->
|
||||
# Reset sub menu, remove irrelevant entries.
|
||||
$.rm submenu
|
||||
submenu = $.el 'div',
|
||||
className: 'reply dialog submenu'
|
||||
className: 'dialog submenu'
|
||||
for subEntry in entry.subEntries
|
||||
@insertEntry subEntry, submenu, data
|
||||
$.add entry.el, submenu
|
||||
|
||||
@ -4,7 +4,7 @@ Header =
|
||||
|
||||
@headerEl = $.el 'div',
|
||||
id: 'header'
|
||||
innerHTML: '<div id=header-bar></div><div id=notifications></div>'
|
||||
innerHTML: '<div id=header-bar class=dialog></div><div id=notifications></div>'
|
||||
|
||||
headerBar = $('#header-bar', @headerEl)
|
||||
if $.get 'autohideHeaderBar', false
|
||||
@ -1733,7 +1733,7 @@ QuotePreview =
|
||||
|
||||
qp = $.el 'div',
|
||||
id: 'qp'
|
||||
className: 'reply dialog'
|
||||
className: 'dialog'
|
||||
$.add d.body, qp
|
||||
Get.postClone board, threadID, postID, qp, Get.contextFromLink @
|
||||
|
||||
|
||||
@ -337,7 +337,7 @@ Main =
|
||||
break
|
||||
$.addClass doc, style
|
||||
$.addClass doc, $.engine
|
||||
$.addClass doc, 'fourchan_x'
|
||||
$.addClass doc, 'fourchan-x'
|
||||
setStyle()
|
||||
if MutationObserver = window.MutationObserver or window.WebKitMutationObserver or window.OMutationObserver
|
||||
observer = new MutationObserver setStyle
|
||||
@ -349,7 +349,7 @@ Main =
|
||||
$.on mainStyleSheet, 'DOMAttrModified', setStyle
|
||||
|
||||
initReady: ->
|
||||
unless $.hasClass doc, 'fourchan_x'
|
||||
unless $.hasClass doc, 'fourchan-x'
|
||||
# Something might go wrong!
|
||||
Main.initStyle()
|
||||
|
||||
@ -435,6 +435,14 @@ Main =
|
||||
textContent: error
|
||||
[message, error]
|
||||
|
||||
css: """<%= grunt.file.read('css/style.css') %>"""
|
||||
css: """
|
||||
<%= grunt.file.read('css/style.css') %>
|
||||
<%= grunt.file.read('css/yotsuba.css') %>
|
||||
<%= grunt.file.read('css/yotsuba-b.css') %>
|
||||
<%= grunt.file.read('css/futaba.css') %>
|
||||
<%= grunt.file.read('css/burichan.css') %>
|
||||
<%= grunt.file.read('css/tomorrow.css') %>
|
||||
<%= grunt.file.read('css/photon.css') %>
|
||||
"""
|
||||
|
||||
Main.init()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user