search

pillone / usntssearch

NZB Metasearch engine
pillone.github.io/usntssearch
264 stars 79 forks source link

Dark Color CSS #73

Open Riz0 opened 10 years ago

Riz0 commented 10 years ago

Hiya,

Just making a ticket of this as requested. A dark color css would be much appreciated for late night file browsing. Soft black bg ( hex color #222222 or #191919) and soft blue text (#4183C4) looks schmexy or maybe an off white. And please don't forget to extend the css to the configs page as well :). Cheers.

JackDandy commented 10 years ago

I find the application f.lux is very good for night browsing. Therefore, limited time could remain focused on application _function_ rather than entire color palette and aliasing changes to a number of 27 images in \static. Why not submit changes yourself, including the reworked images for a dark background for the home, connect, log, and config pages.

Riz0 commented 10 years ago

I agree with your sentiment 100% and it's very kind of you to think I'm capable of making such changes. Truth is, I tried to edit the style.css in \static and couldn't make anything happen. Do you think if I knew how to do it, I would have made a ticket about it? If I had half of your skills, I would be making PRs left and right. :p Maybe one day...

ghost commented 10 years ago

I also would like to help, but am struggling with some of the css changes required. I would like to make some webkit specific changes for Chrome and Safari.

Edit: I was playing with the changes from here, but I think I figured out what needs to be done. Now i just need to learn how to submit patches. http://stackoverflow.com/questions/18081751/styling-select-dropdown-with-css-only

Riz0 commented 10 years ago

@pillone @duckduckquack @JackDandy

Alrighty guys, I finally figured out where you nestled the bg color and it wasn't in the style.css! Anyhow, I took some liberties with the typeface of logo, 0 px borders, and some other stuff. As far as logo, there is no mistaking the purpose of this app so I figured the "search" is redundant and dropped it a few times.

I know clean/minimal isn't everyone's taste but here's a sample: http://imgbox.com/g/xU9Z6k02qe

Couple questions: 1) Where is the color setting for the text of the result table/left hand side of the configs page? I'm guessing all linked text are turned dark blue, but is there a way to change it in the css?I changed .results tbody tr { to orange offset for now.

2) Where is the setting for color inside in the search box? I can't change it from stark black and tried .form-wrapper-01 #search but no luck.

Also, I have no idea how to do a drop-down css selector so maybe I could just send the required files to you guys...

pillone commented 10 years ago

I like where this is going...

Riz0 commented 10 years ago

@pillone thanks! but what about the questions I posted?

Also do you think we could replace the annoying static icons with a floating hover menu instead? It looks more sensible since those options are nearly pointless after the first 10 minutes of setup and only detract from the clean UI.

I made a mock up here: http://i.imgbox.com/abgnpTou.png

JackDandy commented 10 years ago

I prefer the logo of http://imgbox.com/adc3RupN regardless of it being apparent what the tool is for. The oo in search is great. Some of the other logos are too much 1970s sci-fi.

By design, the static icons are there for quick access. And I agree with that philosophy. Invert the font colors from 000 to fff/ccc and that area will look fine again.

2) .form-wrapper-01 #search .. add an !important on to the end of background for now.

pillone commented 10 years ago

@Riz0 search box: .form-wrapper-01 #search -> background: #coloryoulike

config left hand side text color: .tablemenu_fl_a

Well, my philosophy is that mega is a tool and as a tool you want all the knobs easily accessible on your workbench. I don't want that the user is distracted by fancy stuff or effects. So, simplify:yes, hide: no. Same feeling with the title, it is not easily readable. I like that better: http://imgbox.com/abpVokt3 or I can just blue-ify the current logo

That said, thanks for what you are doing!

JackDandy commented 10 years ago

@pillone if you set open a branch "themed" or something, I can send a diff of the start of CSS migration for you to look at @Riz0 hold back a sec. you may want to apply changes to what i am about to propose, which is a big shift

JackDandy commented 10 years ago

Screenshot... @Riz0, can you upload the images (logo) etc.

test

pillone commented 10 years ago

go for a merge request, it is the easiest way

JackDandy commented 10 years ago

https://github.com/pillone/usntssearch/pull/80

lol @pillone i have no idea how your can like that ugly font version :p

pillone commented 10 years ago

Finished the dropdown selbox (damn was non-trivial) for making it work with a consistent graphical defaulr all around the broiwsers

JackDandy commented 10 years ago

commit it to "theme" ?

pillone commented 10 years ago

yes, pull

JackDandy commented 10 years ago

Ok, back to you :) (https://github.com/pillone/usntssearch/pull/82)

@Riz0 is awol so I extracted what I could use from his mock screenshot and tweaked a little.

Hope you guys like it.

To get an idea, screenshots...

_Config Page Switch_

after_css_switch

_Light Theme_

after_css_light

_Dark Theme_

after_css_dark

JackDandy commented 10 years ago

Oh and just to be clear, the PR includes all changes made by https://github.com/pillone/usntssearch/commit/13f35718348c4036126332dbacce93886a624533

pillone commented 10 years ago

hey there,

it is really starting to coming together..

the lighter one is very nice (a part from the logo :) )

Excited,

0

JackDandy commented 10 years ago

Hi, I better confirm, do you want me to put the original logo back in as the default ?

Riz0 commented 10 years ago

@pillone @JackDandy

Hey guys,

Sorry for the late replies, I've really been swamped. Alright so like I was explaining to Jack at our secret IRC hangout :p, I went ahead with the hover menu last week as I didn't see the replies here. I already showed Jack, but this what it's like pillone:

http://imgbox.com/g/DvtVtH378f

I knowww you have an aversion to the hover menu because it's easier to just use the direct toggles during dev, but as you can see it's much sleeker for day to day use. The static icons really are an eye sore for the dark css and draw attention away from the only 'tool' that matters after initial setup (i.e. the search results). Jack is clever enough to implement the code I have as an option so I'm going to send it to him since I couldn't get it sorted.

I echo Jack on the logo, I need to know what typeface you guys have decided on so I can match it with the color scheme. I'm with pillone on the pixelated typeface I've used :), but I have no issue with Jack's preference either.

@JackDandy Send me a msg on IRC as I can't find your nick anymore :/

pillone commented 10 years ago

Ah!

@JackDandy Well, having a consistent logo across versions and websites is really important. Though, this one is nice.

guys, I am starting to like this! Great work!

That said, I am anti-hover too. :)

JackDandy commented 10 years ago

Well, having a consistent logo across versions and websites is really important. Though, this one is nice.

Ok, well here is a comparison of the logos on both light and dark backgrounds... (I could add a config switch)

I know you like the new one, by comparing it in this image I hope to get a definitive yes/no answer from you :)

logos

pillone commented 10 years ago

@JackDandy i prefer the old logo, or alternatively the @Riz0 one, also highly legible.

JackDandy commented 10 years ago

They are all Riz0 logos, I am surprised you don't want the slick and cool designer version, I love how the "ea" in search is made to look like binoculars, well I do not like the silly boxy font therefore the old logo stays - oh well.

@Riz0 as I said before, I'm anti-hover for this use. And you already know my thoughts of the logo.

Riz0 commented 10 years ago

@pillone heh anything but the old one, it looks like my pixelated logo went binge eating. the sleek one is provocative, keeps people on their toes. slightly illegible isn't always bad. anyhow we'll find an alternative then at the crossroads of legible/sleek.

@JackDandy ! get on IRC, I want to bounce ideas off you in real time! I know you think it's 'yuk' :p, I was just getting @pillone up to date

pillone commented 10 years ago

@Riz0 @JackDandy Really, I appreciate the efforts you guys are putting in this. Especially because it does look really nice. Logo: maybe the middle ground would be to make the 'm' the first 'e' and first 'a' fully legible. I mean to 'hack' the font in order that the horizontal 'stick' of the 'e' and 'a' is present, and the central vertical one of the 'm'. That said, we can keep the current font for the 'ea' that makes the nice idea of the binoculars. In this way, that design effort can be even highlighted.

JackDandy commented 10 years ago

I tweaked the logo based on your feedback pillone, what do you think ?

test

pillone commented 10 years ago

it looks awesome! I like it a lot

pillone commented 10 years ago

@Riz0 @JackDandy @duckduckquack Hi guys, I wonder if you guys want to participate to the next release 0.46 preview. I also wonder if you guys are ready/want to put the extra css themes in that. join in here: https://github.com/pillone/usntssearch/issues/95

Riz0 commented 10 years ago

I have sent all my css/html/sprite changes to @JackDandy. I couldn't integrate everything with his structural changes and make a selector in the configs, so when he gets that sorted it should be done.

@JackDandy the blued out logo is for the light css if you so wish it, but check the static folder again, I included another (more fitting) one for the dark layout. If you want to collab, you know where to find me! :]