File: c81968d310e1ace36f4bb113eec8744a9cf2e29332b5556db2ea3bd17569d3dc.png (dl) (1.10 MiB)
/meta/ - Board Meta
[Make a Post]body {
background-color: #222;
color: #FFF;
}
hr {
background-color: #222;
color: #333;
}
/*Top bar*/
div#topbar > nav#topnav {
background-color: #333;
border-bottom: 1px solid #777;
}
h2.barheader {
background-color: #333;
}
div#topbar > nav#topnav a {
color: #03A9F4;
}
/*Main, Logs and Stats*/
div.container {
background-color: #333;
border: 1px solid #777;
}
div.container > img#front-page-logo {
filter: grayscale(100%) invert(82%);
}
div.container a {
color: #03A9F4;
}
th {
background-color: #333;
}
tr:nth-child(2n+1) {
background-color: #444;
}
td {
border: 1px solid #777;
}
/*Catalog*/
#content a {
color: #03A9F4;
}
div.catalog-thread {
width: 250px;
height: 250px;
padding: 0px;
margin: 5px;
border: 1px solid #777;
background-color: #333;
overflow-y: hidden;
overflow-x: hidden;
}
.thread-info-replies {
color: #FFC107;
}
div.catalog-thread > div.catalog-thread-subject {
color: #f44336;
}
/*Content*/
h1.redheader, h1#boardtitle {
color: #f44336;
}
h2#boardsubtitle {
color: #FFC107;
}
a#new-post {
color: #03A9F4;
}
/*Post*/
div.post {
background-color: #333;
border: 1px solid #777;
}
div.post:target {
background-color: #333;
border: 1px solid #777;
}
div.post > div.post-header > span.post-subject {
color: #F44336;
}
div.post > div.post-header > span.post-name {
color: #8BC34A;
}
div.post > div.post-header > span.post-name a {
color: #1565C0;
}
div.post > div.post-header > span.post-name > span.capcode {
color: #BA68C8;
}
time {
color: #FFC107;
}
span.post-number > a {
color: #03A9F4;
}
span.post-number > a:hover {
color: #03A9F4;
text-decoration: underline;
}
.thread-mod-links > a {
color: #03A9F4;
}
.post-file-info > a {
color: #03A9F4;
}
a.referee {
color: #03A9F4;
}
a.referee:hover {
color: #03A9F4;
text-decoration: underline;
}
/*Post comment*/
div.post > div.post-comment a, div.catalog-thread > div.catalog-thread-comment a {
color: #03A9F4;
}
div.post > div.post-comment > span.greentext, div.catalog-thread span.greentext {
color: #4CAF50;
}
div.post > div.post-comment > span.pinktext, div.catalog-thread span.pinktext {
color: #EC407A;
}
div.post > div.post-comment > span.redtext, div.catalog-thread span.redtext {
color: #F44336;
}
/*Post form*/
form#postform {
background-color: #333;
border: 1px solid #777;
}
form > label {
background-color: #333;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="checkbox"] {
background-color: #444;
border: 1px solid #777;
color: #FFF;
}
textarea {
background-color: #444;
border: 1px solid #777;
color: #FFF;
width: 1000px;
height: 500px;
}
form#postform > a.close-button {
color: #03A9F4;
}
/*Bottom links*/
#bottom-links a {
color: #03A9F4;
}
Doesn't work for me.
Like, it's not your code, maybe it isn't supposed to be working with how webserver and my browser are set up.
>Content Security Policy: The page’s settings blocked the loading of a resource at self (“style-src http://nanochancsvnej4vxiidu4fhpchkxffl3mgqypub63xadeetkjttavqd.onion”)
If I disable CSP, I can get it to work, but I don't think that's a good idea.
I use Jewfox 52.9.0 and Stylus extension.
This style made me learn about CSP LMAO.
>>3076
uhm yeah nano's CSP header is set to accept styles only from itself, i actually get that error too(Tor Browser 8.0.8 based on Mozilla Firefox 60.6.1esr and also Stylus) but it still works regardless on my end, sorry not sure if i know how to help, it's probably related to the browser configuration though
>>3077
>it's probably related to the browser configuration though
I have everything about CSP set to default, therefore I don't think so.
I also use 1.4.23 Stylus, maybe that's a thing.
Also maybe NoScript messing with it.
That's why this shit is fucking nightmare.
>>3078
My Stylus version is 1.5.3 and i'm using uMatrix with "* * script block" to block scripts for reference i don't have NoScript at all
>That's why this shit is fucking nightmare.
Yeah
>>3079
>Firefox 59 finally fixed this bug so I don't think we should do anything. Users of the older Firefox can install a separate extension that alters CSP.
I think Stylus fucks just decided to not do anything.
I'll see if I can fix this.
Though I don't really know about this in general. It looks that earlier (mine) behavior was actually more sane: if userCSS is not from "self" (which it shouldn't have any problem faking, but still), then CSP should kick in and prevent styling. Not any other way.
>CSP should kick in and prevent styling. Not any other way.
I'm not sure if CSP was developed in regard to extensions, it's useful to avois cross-site attacks etc but for styles if you can see the code it's safe, this seems just like a bug of Stylus.
>I don't think we should do anything
lazy fucks
File: 20007f06efe4463586d14009b7a7345d721e79f2473b87f810c8564ece90e424.jpg (dl) (306.73 KiB)
OK, I have installed this shit
https://addons.mozilla.org/en-US/firefox/addon/scriptfilteraddon/
And it fixes it by applying custom CSP on a per-domain basis. Basically, another powerful tool.
inb4
>bloat
>cianiggers
It does look pretty small and tame.
Your style is nice BTW. I took the liberty of changing body color to #DDD and input area colors to #EEE though. Why would I have an actual white color in my dark theme, like, WTF.
File: df0eddeffae7729815e5ae92628099dea303272222033d33fbe5155c2210525b.jpg (dl) (48.16 KiB)
Glad you solved the problem somehow, even i still get the error until it works i'd rather not install more extensions.
>Why would I have an actual white color in my dark theme, like, WTF.
Yeah, i'm the kind of person that likes high contrast themes with bright colors.
File: 3487b9f348898f855619415158cbc527d1056b18be703805b578410da3fc1b87.png (dl) (111.23 KiB)
File: c10843856cde1b84b523a52a9cbc77a3be67c0cddef2745c9e6f5665fdfef9b1.png (dl) (75.94 KiB)
How do I paste the code into scratchpad without it quarantining itself into one line?
Do I have to use an actual style extension instead of Greasemonkey in order to make this decently convenient?
>>3113
Let me tell you that you should disable javascript globally while browsing the Tor Network, preferably using uMatrix, you should probably just use Stylus, anyway is it definitely possible to inject css using javascript, you can use this https://github.com/patcullen/injectCSS to add multiline CSS or use jQuery, or just create a new style element and append the style to it. You can find on stack overfow how to do it.
>>pls do bully
i won't bully you, i'll leave that to pic related
File: a3976acd8e4810dc10a354a884e6cc355f73bb7462be90011ce2f88800ebfef1.png (dl) (50.02 KiB)
File: 2cb7f18d362b1fbce6d6cb592e512a8476cca743675fb4ae854344394673ac3c.jpg (dl) (4.70 KiB)
I don't know... Don't you find it... Creepy? Huh???
File: 6363fcedb515113cde0a0fb911d2f6bc868fe0a6b4364b972eae5beb382f830a.jpg (dl) (3.30 KiB)
*see again in the dreams*
>>3116
CSS bullshit is so powerful.
It can actually invert colors of pictures, AND (re-)colorize them.
I've learned that shit recently when I was trying to make a dark theme (I'm not the OP) and non-inline SVG pictures just wouldn't accept color properties, so I had to resort to that bullshit.
Or, rather, in fact, as soon as I learned it, I actually decided that I should just look some theme up, and I found one. I was looking for a dark theme for Wikipedia LOL.
I think hapase color (capcode) does not apply correctly when hapase posts with email field. Like, it becomes nested into <a> "post-email" tag and it most probably fucks with what was written into style sheet about that. Like, strict hierarchy or something.
Proof: nanochancsvnej4vxiidu4fhpchkxffl3mgqypub63xadeetkjttavqd.onion/pol/3439.html
#autism
File: 160329c1a68092bdcaf07c6226371050f3ce9dd5894d4f4a7183e48f939b3e57.jpg (dl) (31.61 KiB)
>>3138
Good catch, really easy to fix luckily.
This should preserve link color and style only the capcode, code follows(i recommend adding it after line 118 under the "Post" section):
div.post > div.post-header > span.post-name > a > span.capcode {
color: #BA68C8;
}
File: 9b8cdf46f1aa83f0978a9acc7daa0f6e83628b2bbba72753f12d0a686d6bb2a2.png (dl) (919.17 KiB)
Optional update that makes the referees and file link/info bigger(they're too fucking small by default), you can tweak size to your preference, code follows(i recommend adding it after line 139, linenumber includes previous update, under the "Post" section):
.referee {
font-size: 0.75em !important;
}
.post-file-info {
font-size: 0.75em !important;
}
>>3140
I have a question.
Isn't it just better to say
span.capcode {
color: #BA68C8;
}
since capcode is used only in one certain place?
I don't know much about CSS, but it's an easy guess that it will just apply the rule globabally for all <span>s named capcode. Isn't it just fine and less prone to bugs like that?
File: 4144881943cf4c5be8d3e7d53c8fe774197502f4c12e489f8fe565be5d8e18bc.png (dl) (810.17 KiB)
>>3151
Anyway now I have another question.
Do you have an autistic urge to write down a page structure like that, or is there some CSS creating tool that made a rule like that for you automatically?
File: d8ddaaa3d9339812c296551302d4780589949a67ae77dc71da1886c27624b560.png (dl) (1.53 MiB)
>>3153
Autism is the fuel of all good code. The entire nanochan codebase is built with an high level of autism and thats why we love it.
File: 60c76185da3315d97ca37e53a7cc0618960f13fa1e8395965cf53a823a7a3214.gif (dl) (331.12 KiB)
>>3158
Yes he did, you just didn't understand because you're a normalfag brainlet.
<Do you have an autistic urge...
>Autism is the fuel of all good code.
File: 80ead05e2ccf34e1f1277fea662db89de6be6f3c01d9e10e0ae047f642a3c94b.png (dl) (356.19 KiB)
>>3158
>You didn't answer the question
I don't use any tool, yes i like to write a strict hierarchy cause i like it that way(and the nanochan stylesheet itself uses a lot of child combinators).
>you fucking weeb
Chigau onii-chan! Weeb janai >.<
>>3159
I prefer to get an exact direct answer usually.
You may be surprised how wrong you might get after assuming a lot.
>>3162
>I don't use any tool
Shame, I was kinda hoping you did.
Makes sense when dealing with WYSIWYG bullshit.
>cause i like it that way
Imagine hapase changes some ids or overall page structure now.
An unlikely event, but imagine the pain.
>>3166
Since the post referencing was added, Hapase hasn't changed anything except for captcha mechanics, spam filters and other "back end" stuff. I think it's pretty stable for now. Not much to improve except for maybe some minor css things.
>>3166
I'm gonna mantain this theme as long as i use nano(since i use it), if something breaks report it and i'll fix it, with this said you can rewrite and make better the theme however you want(it's not like i've put that much effort in it either).
File: 5588c5e795c7a29ac0c0c410d34356eb3703091b209fa20371c3ab8eea314804.png (dl) (417.02 KiB)
Hello again fellow darkthemed nanochanners!
Today i come with a reworking of the navbar(i always hated the order of the boards), this come down to my own preference but you can modify everything from the order of the boards to the separators and the message.
Code follows(add after line 25):
div#topbar > nav#topnav > ul {
display: flex;
flex-direction: row;
}
div#topbar > nav#topnav > ul > li:nth-child(1) {
order: 1;
}
div#topbar > nav#topnav > ul > li:nth-child(1):after {
content: " -";
}
div#topbar > nav#topnav > ul > li:nth-child(2) {
order: 2;
opacity: 0.5;
}
div#topbar > nav#topnav > ul > li:nth-child(3):before {
content: "- ";
}
div#topbar > nav#topnav > ul > li:nth-child(3) {
order: 3;
}
div#topbar > nav#topnav > ul > li:nth-child(4) {
order: 4;
}
div#topbar > nav#topnav > ul > li:nth-child(4):after {
content: " -";
}
div#topbar > nav#topnav > ul > li:nth-child(5) {
order: 5;
}
div#topbar > nav#topnav > ul > li:nth-child(5):after {
content: " |";
}
div#topbar > nav#topnav > ul > li:nth-child(9) {
order: 6;
}
div#topbar > nav#topnav > ul > li:nth-child(9):after {
content: " -";
}
div#topbar > nav#topnav > ul > li:nth-child(6) {
order: 7;
}
div#topbar > nav#topnav > ul > li:nth-child(8) {
order: 8;
}
div#topbar > nav#topnav > ul > li:nth-child(8):after {
content: " -";
}
div#topbar > nav#topnav > ul > li:nth-child(12) {
order: 9;
}
div#topbar > nav#topnav > ul > li:nth-child(11) {
order: 10;
}
div#topbar > nav#topnav > ul > li:nth-child(11):after {
content: " -";
}
div#topbar > nav#topnav > ul > li:nth-child(14) {
order: 11;
opacity: 0.5;
}
div#topbar > nav#topnav > ul > li:nth-child(15) {
order: 12;
opacity: 0.5;
}
div#topbar > nav#topnav > ul > li:nth-child(7):before {
content: "- ";
}
div#topbar > nav#topnav > ul > li:nth-child(7) {
order: 15;
}
div#topbar > nav#topnav > ul > li:nth-child(7):after {
content: " -";
}
div#topbar > nav#topnav > ul > li:nth-child(13) {
order: 17;
opacity: 0.5;
}
div#topbar > nav#topnav > ul > li:nth-child(10) {
order: 16;
opacity: 0.5;
}
div#topbar > nav#topnav > ul > li:nth-child(13) {
order: 17;
opacity: 1;
}
div#topbar > nav#topnav > ul > li:nth-child(13):after {
content: " ----- Let's all love Lain";
}
File: 5755306b7e1e29aa69e1ed1293800b697672d09fbb3901b90652887407431095.png (dl) (120.24 KiB)
File: 56fe990bcb9639c64d1dfcde9930a3f9a563462dc0805066a62a07e1fa98d4c6.png (dl) (1.32 MiB)
For simplicity i collected all changes and put them together.
nanochan Dark Theme v1.0.0
Mozilla format(save file and import in Stylus) - http://zerobinqmdqd236y.onion/?7a1ca560535f640f#xqDgsLWffJKnzIrmuRSl8HXw3mZooQMSZxByT1+6D88=
Source - http://zerobinqmdqd236y.onion/?406c8faaea9d23e1#ntyyoKTj6HC49L1EknqLaGopSqf7ois0SHIob1xv7jo=
>>3407
>Javascript is required for ZeroBin.net to work.
What's the point of setting up Tor when they don't even test it...
>>3408
I've tried a bunch and they mostly doesn't work.
DeepPaste - http://depastedihrn3jtw.onion/index.php captcha doesn't work for me
BlackHost - http://blackhost5xlrhev.onion/?id=pst doesn't work
The others that i found needs JS :(
Give me a link if you have a good one.
File: 6badabc3e7aa319c957f2f75fcac592ab5dfb550a27c466b4706f40c187335a6.png (dl) (517.22 KiB)
>>3410
When a clearnet botnet website is more private than darknet ones <.<
nanochan Dark Theme v1.0.0
Mozilla format(save file and import in Stylus) - https://pastebin.com/FtUJ1FEp
Source - https://pastebin.com/d1ShyxyS
File: 343c2820e636d7bd523ab70a31b1b4d7de41119fb883972215cebb70d510bcb0.png (dl) (536.20 KiB)
File: 327cec93fb29ef1e6bd414218b68505eafca4b2ad3014e0bbc002a0f83f15b69.png (dl) (490.80 KiB)
So here i am again, so today i was thinking of ending my existence but in the end i decided to update a theme for a board that nobody even uses anymore :D
I'm gonna start with saying that this will probably break some stuff and it's optimized for 1080p screens, report bugs in case.
Anyway i got some new cool features today, first i reworked how catalog worked, now it's all more compact and more information fits, i've hidden the board title and subtitle, the update button(why is that even a thing you have the one on your browser) and i've moved the new thread/new post button in the navbar, plus since now catalog threads are smaller i've added an animation that gets triggered when you hover that will expand the thread showing the entire thread comment inside the catalog(i think this is the best solution between fucking hapase scrollbars everywhere and cropped threads like in previous version), i also removed mod buttons since nobody else than hapase can use them and also a line that was stealing space before the thread comment, i also made minor changes that i'm too tired to remember.
I'm actually really satisfied with this version, i've implemented every feature that i wanted and now i'm out of ideas, i might make a userscript next since you can only do so much with CSS, but nano is kind of dead so that probably won't happen.
Post feedback.
Mozilla Format:
https://pastebin.com/raw/JfR6BizR
Source:
https://pastebin.com/raw/h4ygRdgK
File: 3201c0a128bd1633ee7132134663528e1b0013921b6c2c4a7204f96ecefb3c21.png (dl) (594.67 KiB)
<-- New Catalog design
File: 3f541a2e68b526ddb09bd30305ab37df310bd2e1b8728919da287849389ec1ef.png (dl) (695.69 KiB)
Small update, i was reading this thread: https://nanochancsvnej4vxiidu4fhpchkxffl3mgqypub63xadeetkjttavqd.onion/meta/1088.html and after testing, maybe having the [Update] button makes sense, it's back, this time in the navbar.
Mozilla Format:
https://pastebin.com/raw/s1i62hg8
Source:
https://pastebin.com/raw/RLaH4i8j
File: 8227776bbe8b783e91d194ff99dd120bc03e5997d5e59654de34824ab420901e.png (dl) (1.70 MiB)
So hapase in all her wisdom deleted /test/ without any warning and that broke the theme, women and tech amirite, anyway i fixed it, note that it will still be broken on old static pages until they get updated, annoying but i can't do much there... i also made the navbar more compact for mobile/small screens.
Mozilla Format:
https://pastebin.com/raw/NZxSBRZL
Source:
https://pastebin.com/raw/uKvQeb05
File: 9a156372479692af18ec4b187f66e8f5fa53b3e99392d7c41d778800ec514f5d.jpg (dl) (71.29 KiB)
File: c66f2f592a2d41f9a61597a57b170c55ada8e8ca6af3cfb1e18b425608e62c09.png (dl) (545.22 KiB)
The theme breaking on UI changes is natural and not really the problem, the real issue are old static pages lingering around after changes, after updating stuff you should regenerate at least all last month html pages and all boards catalogs, look at the mess in /ar/ with the old announcement, it shouldn't be that hard to implement.
File: 1ea28939bf053e7dabdbf49a092a6a6909dc7770a9f4492315f9d251040554c8.png (dl) (370.51 KiB)
I know that i said that i was satisfied with how the catalog worked in v1.1.0 but i had a pretty cool idea today, since v1.1.0 if you hover on a thread in the catalog it will expand showing more information, this is fine but the problem is that since catalog is implemented with flex it moves the next row(sometime out of the screen) and it's annoying, so instead of changing it's size i figured out i just had to make it's position fixed and the flex would rearrange itself, in the end it ended up being kind of like a modal, since the :hover pseudo-class would make the catalog unusable i also changed it to use the :active pseudo-class.
Mozilla Format:
https://pastebin.com/raw/ERUn2ZNS
Source:
https://pastebin.com/raw/dWyj7CXg
File: 59f35cccc9fdc097b3baa4129926afbd52d1d92c6ddfe72ed4cf805d98dd8c0c.png (dl) (559.86 KiB)
<-- This is how an activated thread in the catalog looks like
How to use: click and hold on a thread in the catalog.
>>3421
>pastebin.com
>Attention Required
Upload it here.
Using a text editor, put "%PDF" in its own line before everything else, and then nanochan will think it's a pdf.
File: 26dd158a63d7dbab878435a30a475569aac48c0fa8994b1a64235e73f4c9756b.pdf (dl) (6.66 KiB)
[Catalog][Overboard][Update]
[Reply]59 replies
I was bored, so i've made a simple dark theme userstyle.
Changes
>Now background is dark duh
>Most of the formatting is the same or similar.
>Inverted the image on the main page to fit the theme.
>Made the tables better in log and stats
>Made the posts in the catalog bigger and removed the scrollbars(so i can finally scroll in the catalog without getting stuck)
>Made the default size for the postform bigger(so i don't have to resize it every time)
Color coding
>Cyan is stuff you can click on.
>Red is titles/topic.
>Yellow is subtitles, replycount and date/time.
>Green is names.
>Purple is hapase/mods.
You're gonna need a userstyle extension to install it, then create new userstyle, paste the code and apply it to nano domain. Hope i didn't forget anything, code follows: