User:CDB-Man/CDBstyle: Difference between revisions

From AniDB
Jump to navigation Jump to search
(.)
(rearranged)
Line 12: Line 12:
* red for if not fully collected (missing files), and have not started; default mylist colour
* red for if not fully collected (missing files), and have not started; default mylist colour
* red for collecting state (default behaviour, reinforces above)
* red for collecting state (default behaviour, reinforces above)
<pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red -- incompletely collected, .stalled</pre>
<pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre>
* blue for complete (fully collected and "ready to watch")
* blue for complete (fully collected and "ready to watch")
<pre style="color:#000000; background:#71D8DE">background-color: #71D8DE !important; blue -- .complete</pre>
<pre style="color:#000000; background:#68CACE">background-color: #68CACE !important; blue odd -- .complete</pre>
* orange for watching
* orange for watching
<pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .watching</pre>
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .watching</pre>
* red for stalled
* red for stalled
<pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red -- incompletely collected, .stalled</pre>
<pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre>
* black for dropped
* black for dropped
<pre style="color:#FFFFFF; background:#464646">background-color: #464646 !important; black -- color: #FFFFFF; font colour -- .dropped</pre>
<pre style="color:#FFFFFF; background:#000000">background-color: #000000 !important; black odd -- color: #FFFFFF; font colour -- .dropped</pre>
* green for mylist state "completed"
* green for mylist state "completed"
* green for all_watched
* green for all_watched
* current colours:
<pre style="color:#000000; background:#B8E3B8">background-color: #B8E3B8 !important; green -- .all_watched, .completed</pre>
<pre style="color:#000000; background:#B8E3B8">background-color: #B8E3B8 !important; green</pre>
<pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd -- .all_watched, .completed</pre>
<pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd</pre>


<pre style="color:#000000; background:#71D8DE">background-color: #71D8DE !important; blue</pre>
'''Unused:'''
<pre style="color:#000000; background:#68CACE">background-color: #68CACE !important; blue odd</pre>
 
<pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange</pre>
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd</pre>
 
<pre style="color:#000000; background:#E69696">background-color: #E69696 !important; red</pre>
<pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd</pre>
 
<pre style="color:#FFFFFF; background:#464646">background-color: #464646 !important; black
color: #FFFFFF; font colour</pre>
<pre style="color:#FFFFFF; background:#000000">background-color: #000000 !important; black odd
color: #FFFFFF; font colour</pre>
 
Unused:
<pre style="color:#000000; background:#FF8282">background-color: #FF8282 !important; strong red (for use with purple)</pre>
<pre style="color:#000000; background:#FF8282">background-color: #FF8282 !important; strong red (for use with purple)</pre>
<pre style="color:#000000; background:#FF6464">background-color: #FF6464 !important; strong red odd (for use with purple)</pre>
<pre style="color:#000000; background:#FF6464">background-color: #FF6464 !important; strong red odd (for use with purple)</pre>


<pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; purple
<pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; purple -- color: #000000; font colour</pre>
color: #000000; font colour</pre>
<pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; purple odd -- color: #000000; font colour</pre>
<pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; purple odd
color: #000000; font colour</pre>


=== Colour-based Features ===
=== Colour-based Features ===

Revision as of 18:57, 21 September 2014

CDB`s improvements on DerIdiot`s AniDBstyle2. Contains mainly ergonomics updates.

Support forum thread here: http://anidb.net/perl-bin/animedb.pl?show=cmt&id=52076

Last Updated: CDB-Man (talk) 02:40, 16 September 2014 (CEST)

Improvements:

Colouring Changes

MyList State Highlighting

Highlight mylist entries, on mylist page, mylist timeline, and other pages where mylist entries appear, based on the following:

  • red for if not fully collected (missing files), and have not started; default mylist colour
  • red for collecting state (default behaviour, reinforces above)
background-color: #E69696 !important; red -- incompletely collected, .stalled
background-color: #E67878 !important; red odd -- incompletely collected, .stalled
  • blue for complete (fully collected and "ready to watch")
background-color: #71D8DE !important; blue -- .complete
background-color: #68CACE !important; blue odd -- .complete
  • orange for watching
background-color: #FFB84D !important; orange -- .watching
background-color: #FFA319 !important; orange odd -- .watching
  • red for stalled
background-color: #E69696 !important; red -- incompletely collected, .stalled
background-color: #E67878 !important; red odd -- incompletely collected, .stalled
  • black for dropped
background-color: #464646 !important; black -- color: #FFFFFF; font colour -- .dropped
background-color: #000000 !important; black odd -- color: #FFFFFF; font colour -- .dropped
  • green for mylist state "completed"
  • green for all_watched
background-color: #B8E3B8 !important; green -- .all_watched, .completed
background-color: #85D485 !important; green odd -- .all_watched, .completed

Unused:

background-color: #FF8282 !important; strong red (for use with purple)
background-color: #FF6464 !important; strong red odd (for use with purple)
background-color: #FF82D5 !important; purple -- color: #000000; font colour
background-color: #FF59AC !important; purple odd -- color: #000000; font colour

Colour-based Features

  • for anime-group in my list, the completion bar, changed from green to red to improve readability
    • also made the completion bar thicker, from 1px -> 2px -> 3px
background-color: #7EF27E !important; anidb default green
background-color: #FF0000 !important; new red
  • Increased brightness and gradient of anidb green and red highlighting
background-color: #A7DDA7 !important; anidb default green
background-color: #9AD09A !important; anidb default green odd
background-color: #B8E3B8 !important; green
background-color: #85D485 !important; green odd
background-color: #D6B8B8 !important; anidb default red
background-color: #CC9999 !important; anidb default red odd
background-color: #E69696 !important; red
background-color: #E67878 !important; red odd
background-color: #FF8282 !important; strong red (for use with purple)
background-color: #FF6464 !important; strong red odd (for use with purple)

Text Changes

  • On the anime-staff add/edit page, remove capitalization of source-info in the header

Icon Changes

  • revert to old stars on file tables

Layout Changes

File related

  • Mark as red any file where release date has not been set <-- courtesy of Worf
  • Hide the undumped files column on the group page by default, and unhide if there are undumped files <-- courtesy of Worf
  • Mark table cells of undumped files red (file ID, file actions), mark as red any file where release date has not been set <-- courtesy of Worf
    • To disable this feature, add the following to your UserCSS:
table.filelist td.date.added,
table.filelist tr.undumped td.id,
table.filelist tr.undumped td.id a:link,
table.filelist tr.undumped td.id a:active,
table.filelist tr.undumped td.id a:visited,
table.filelist tr.undumped td.action
{
  visibility: initial;
  background-color: initial;
  color: initial;
  font-weight: normal;
}
table.filelist tr.undumped td.id a:link,
table.filelist tr.undumped td.id a:active,
table.filelist tr.undumped td.id a:visited
{
  color: #105289;
}
table.filelist tr.undumped td.id a:hover
{
  color: #AA0000;
}

Missing Relations

  • Highlight in red any missing char-char and anime-anime relations in the table-fied views of relations <-- courtesy of Worf

Whitespace Reduction

  • Disallow line wrap on userpage stats block
  • vertical align the user page avatar
  • shrink width of info box on userpages
  • div.data max width, to maximize the widths of image vs data div blocks (ie on group pages)
  • userpage sections flex adding (discussions section only so far)
  • nowrap of username on creqhist page (and possibly others)

Miscellaneous Layout

  • expand default text entry box size

Action Buttons at the Top of Entry Pages

  • Display top links (buttons) on anime/character/club/creator/collection/group/song page <-- courtesy of Worf

For anyone that doesn`t like the buttons at the top of the entry pages and wants to hide them like before, you can add the following to your UserCSS.

#layout-main div.anime_all ul.links_top,
#layout-main div.character_all ul.links_top,
#layout-main div.club_all ul.links_top,
#layout-main div.creator_all ul.links_top,
#layout-main div.collection_all ul.links_top,
#layout-main div.group_all ul.links_top,
#layout-main div.song_all ul.links_top
{
display: none;
}