Crunchyroll queue page incomplete style

[soitora]

Crunchyroll queue page incomplete style

[TBlazeWarriorT]

Here's one comparison that shows most of the changes

[TBlazeWarriorT]

Here's the episode title comparison

[TBlazeWarriorT]

Slightly more visible buttons:

.button.medium-button, a.button.medium-button, input.button.medium-button, span.button.medium-button {
    background: #292929;
}

Less white dropdown thingy (can't change the arrow?):

html.no-js body.main-page.responsive.enUS div#template_scroller.ad-skin div#template_container.cf.template-container.no-adskin div#template_body.cf.new-template-body div div#showmedia.cf.new_layout div#main_content.left div.guestbook.comments.box div#boxMEDIAKEY_781148.boxcontents div.guestbook-sort-bar div.sort-options.small-margin-right select#sort-selector {
    background: #333;
    color: #BBB;
    border: solid 1px #555;
}

[TBlazeWarriorT]

Found a solution for me

#source_home .landscape-grid li .queue-wrapper {
 background:#303030;
}

#source_home .queue-to-top {
 background: url(https://i.imgur.com/kBuiJBq.png) -3px 0 no-repeat;
}

#source_home .dropdown-collection {
    background: url(https://i.imgur.com/PofM8pS.png) 0 0 no-repeat;
}

#source_home .more-options {
    background: #111;
}

.collection-carousel-arrow {
    background: url(https://i.imgur.com/L9EFgy0.png) no-repeat -40px 42px;
}

[Soitora]

I don't have access to Crunchyroll anymore, I'll take your word for it and update.

[TBlazeWarriorT]

Just for reference, this is how it used to look like:

and this is how it looks like with my tweaks:

I personally also made some small tweaks to make text readable because some are really hard, but I'm not sure if they're worth sharing

[Soitora]

Ohh, looks good!
If you can send me before/after pictures of your other improvement then I'd be happy to implement it! :)

[TBlazeWarriorT]

I'll try, but I have to find the other changes I made xD

[TBlazeWarriorT]

To make text more readable, I changed everything using color #A8A8A8 to #F1F1F1 (slightly brighter white).

For the yellow balloon background, I used: (note that this only looks good with the brighter text above)

.availability-notes-high {
    background: #cc9;
}

To make the blue balloon backgrounds darker:

.availability-notes-low { /*Blue balloons BG*/
    background: #a6b6bf;
}

To make episode link in episode page look clickable by having a different color again, replaced

body, .new-template-body, textarea, ul.news-top-stories-row li a, .anime-lineup-blurb, span, ul.news-abbr .byline {
	color: #A8A8A8 !important;
}

with

body, .new-template-body, textarea, ul.news-top-stories-row li a, .anime-lineup-blurb, span, ul.news-abbr .byline { /*General text*/
	color: #F1F1F1 !important;
}

.new-template-body h1 { /*Ep name*/
    color: #AAA;
}

To make the episodes background in the episode list have a bit more contrast instead of being almost invisible, I changed (replaced) the color on this:

.portrait-element, #store_items li {
	background: #252525;
}

[Soitora]

Great work! :)
Pushing the code for this in a sec.

[TBlazeWarriorT]

A bit late but I found a last thing, I think it probably looks better in the modified bottom?

#source_home #main_content .landscape-element {
    background: #303030;
}

[Soitora]

It looks better, I'll add it when I got time, thanks!

[TBlazeWarriorT]

another tiny thing, not too important also
current:

modified (note: I kept the white borders on hover on the undo button)

.content-menu { /*Background for the "removed" thingy when you remove something from your queue*/
    background: #333;
    border: 0px solid #000; /*0px because IDK how to remove borders properly, so this just makes the border invis*/
}

html.no-js body.main-page.responsive.enUS div#template_scroller.ad-skin div#template_container.cf.template-container.no-adskin div#template_body.cf.new-template-body div#source_home div#container.cf div#main_content.left ul#sortable.landscape-grid.queue-sortable.ui-sortable li.queue-item div.content-menu.cf.undo-queue-remove.small-margin-bottom button.button.default-button.button-padding.small-button.right {
    /*This should make the undo button less invisible-y, else it has the same color as the background*/
    background:#444;
}

Uhh, I think the button fix might only work in the english crunchyroll or something because I just did "copy css path" in F12 mode, idk the proper way because that buttons just grabs defaut button css otherwise and I'm bad at css

[Soitora]

Often when you copy css path you can edit out a big part of the path and it'll still work but be more flexible.

Also, removing borders usually is just border: 0px !important; or border: none !important;
The !important tag is useful everywhere when overwriting code using Stylus or similar.

I'm gonna soon start on a rework of the theme I think, I'll see wether to implement this before or not. Thank you