User:CDB-Man/CDBstyle: Difference between revisions

Jump to navigation Jump to search

User:CDB-Man/CDBstyle (view source)

Revision as of 05:10, 18 May 2020

3,136 bytes added ,  18 May 2020
m
Capitalization and image moving
m (Capitalization and image moving)
 
(29 intermediate revisions by the same user not shown)
Line 2: Line 2:
CDB`s improvements on DerIdiot`s AniDBstyle2.  Contains mainly ergonomics updates.
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
Support forum thread here: https://anidb.net/forum/thread/52076


Last Updated: [[User:CDB-Man|CDB-Man]] ([[User talk:CDB-Man|talk]]) 06:34, 23 September 2014 (CEST)
Last Updated: [[User:CDB-Man|CDB-Man]] ([[User talk:CDB-Man|talk]]) 01:31, 3 January 2015 (CET)


= Improvements: =
= Improvements: =
Line 25: Line 25:
==== Application of Colours ====
==== Application of Colours ====
Highlight mylist entries, on mylist page, mylist timeline, and other pages where mylist entries appear. The order the colours are applied are as follows:
Highlight mylist entries, on mylist page, mylist timeline, and other pages where mylist entries appear. The order the colours are applied are as follows:
* 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:#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>
<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:#71D8DE">background-color: #8DDFE4 !important; blue -- .complete</pre>
<pre style="color:#000000; background:#68CACE">background-color: #68CACE !important; blue odd -- .complete</pre>
<pre style="color:#000000; background:#68CACE">background-color: #68CACE !important; blue odd -- .complete</pre>
* orange for mylist state .completed but not .all_watched
* Orange for mylist state .completed but not .all_watched
<pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .completed but not .all_watched</pre>
<pre style="color:#000000; background:#FFB84D">background-color: #FFB84D !important; orange -- .completed but not .all_watched</pre>
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .completed but not .all_watched</pre>
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .completed but not .all_watched</pre>
* green for .all_watched
* Green for .all_watched
<pre style="color:#000000; background:#B8E3B8">background-color: #B8E3B8 !important; green -- .all_watched</pre>
<pre style="color:#000000; background:#A0E6A0">background-color: #A0E6A0 !important; green -- .all_watched</pre>
<pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd -- .all_watched</pre>
<pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd -- .all_watched</pre>
* black for .dropped
* Black for .dropped
<pre style="color:#FFFFFF; background:#222222">background-color: #222222 !important; black -- color: #FFFFFF; font colour -- .dropped</pre>
<pre style="color:#FFFFFF; background:#444444">background-color: #444444 !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>
<pre style="color:#FFFFFF; background:#222222">background-color: #222222 !important; black odd -- color: #FFFFFF; font colour -- .dropped</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:#FFB84D">background-color: #FFB84D !important; orange -- .watching</pre>
<pre style="color:#000000; background:#FFA319">background-color: #FFA319 !important; orange odd -- .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:#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>
<pre style="color:#000000; background:#E67878">background-color: #E67878 !important; red odd -- incompletely collected, .stalled</pre>


'''Unused:'''
=== Wishlist Highlighting ===
<pre style="color:#000000; background:#FF8282">background-color: #FF8282 !important; strong red (for use with purple)</pre>
Highlight with fuchsia accents, any item in your wishlist.
<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; fuchsia</pre>
 
<pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; fuchsia odd</pre>
<pre style="color:#000000; background:#FF82D5">background-color: #FF82D5 !important; purple -- 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 ===
* for anime-group in my list, the completion bar, changed from green to red to improve readability
==== Anime-Group Completion Bar ====
** also made the completion bar thicker, from 1px -> 2px -> 3px
* 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
<pre style="color:#000000; background:#7EF27E">background-color: #7EF27E !important; anidb default green</pre>
<pre style="color:#000000; background:#7EF27E">background-color: #7EF27E !important; anidb default green</pre>
<pre style="color:#000000; background:#FF0000">background-color: #FF0000 !important; new red</pre>
<pre style="color:#000000; background:#FF0000">background-color: #FF0000 !important; new red</pre>


* Increased brightness and gradient of anidb green and red highlighting
==== Missing Relations ====
<pre style="color:#000000; background:#A7DDA7">background-color: #A7DDA7 !important; anidb default green</pre>
* Highlight in red any missing char-char and anime-anime relations in the table-fied views of relations <-- courtesy of Worf
<pre style="color:#000000; background:#9AD09A">background-color: #9AD09A !important; anidb default green odd</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</pre>
 
<pre style="color:#000000; background:#D6B8B8">background-color: #D6B8B8 !important; anidb default red</pre>
<pre style="color:#000000; background:#CC9999">background-color: #CC9999 !important; anidb default red 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:#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>
 
== 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 Features ====
=== File related ===
* On the ed2k dump page, highlight the leftmost mylist state column with purple for anything in your mylist
* Mark as red any file where release date has not been set <-- courtesy of Worf
* 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
* Hide the undumped files column on the group page by default, and unhide if there are undumped files <-- courtesy of Worf
Line 96: Line 76:
table.filelist tr.undumped td.id a:active,
table.filelist tr.undumped td.id a:active,
table.filelist tr.undumped td.id a:visited,
table.filelist tr.undumped td.id a:visited,
table.filelist tr.undumped td.action
table.filelist tr.undumped td.action,
table.file.entities tr.undumped td.id,
table.file.entities tr.undumped td.id a:link,
table.file.entities tr.undumped td.id a:active,
table.file.entities tr.undumped td.id a:visited,
table.file.entities tr.undumped td.action
{
{
   visibility: initial;
   visibility: initial;
Line 105: Line 90:
table.filelist tr.undumped td.id a:link,
table.filelist tr.undumped td.id a:link,
table.filelist tr.undumped td.id a:active,
table.filelist tr.undumped td.id a:active,
table.filelist tr.undumped td.id a:visited
table.filelist tr.undumped td.id a:visited,
table.file.entities tr.undumped td.id a:link,
table.file.entities tr.undumped td.id a:active,
table.file.entities tr.undumped td.id a:visited
{
{
   color: #105289;
   color: #105289;
}
}
table.filelist tr.undumped td.id a:hover
table.filelist tr.undumped td.id a:hover,
table.file.entities tr.undumped td.id a:hover
{
{
   color: #AA0000;
   color: #AA0000;
}
}
</pre>
</pre>
=== Missing Relations ===
* Highlight in red any missing char-char and anime-anime relations in the table-fied views of relations <-- courtesy of Worf


==== Status-Highlight Gradients Increased ====
* Increased brightness and gradient of anidb green and red highlighting
<pre style="color:#000000; background:#A7DDA7">background-color: #A7DDA7 !important; anidb default green</pre>
<pre style="color:#000000; background:#9AD09A">background-color: #9AD09A !important; anidb default green odd</pre>
<pre style="color:#000000; background:#A0E6A0">background-color: #A0E6A0 !important; green</pre>
<pre style="color:#000000; background:#85D485">background-color: #85D485 !important; green odd</pre>
<pre style="color:#000000; background:#D6B8B8">background-color: #D6B8B8 !important; anidb default red</pre>
<pre style="color:#000000; background:#CC9999">background-color: #CC9999 !important; anidb default red 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>
Currently Unused:
<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:#FF82D5">background-color: #FF82D5 !important; fuchsia -- color: #000000; font colour</pre>
<pre style="color:#000000; background:#FF59AC">background-color: #FF59AC !important; fuchsia odd -- color: #000000; font colour</pre>
== Text Changes ==
Currently no text-based features.
* <strike>On the anime-staff add/edit page, remove capitalization of source-info in the header</strike> Fixed on main.
== Icon and Button Changes ==
* Revert to old stars on file tables
* Colourized creq action buttons
[[Image:CDBstyle colourized creq action buttons.png|framed|none|Colourized creq action buttons.]]
== Layout Changes ==
=== Whitespace Reduction ===
=== Whitespace Reduction ===
* Disallow line wrap on userpage stats block
* Insert nowrap of username on creqhist page (and possibly others)
* vertical align the user page avatar
* Reduction of whitespace on the anime page grouplist and eplist, and the group page release list
* shrink width of info box on userpages
* Userpage:
* div.data max width, to maximize the widths of image vs data div blocks (ie on group pages)
** Disallow line wrap on userpage stats block
* userpage sections flex adding (discussions section only so far)
** Vertical align the user page avatar
* nowrap of username on creqhist page (and possibly others)
** Shrink width of info box on userpages
** Insert 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)
 
=== Imagepreview ===
* Remove the transparency from imagepreview
* Make the imagepreview background white to work better with transparent images
 
=== Main Tabs ===
* Moved the "main tabs" from the topright to the topleft
If you want to move the tabs back to the right, use this userCSS:
<pre>#layout-tabs ul
{
  text-align: right;
}
#layout-content #layout-tabs
{
  margin-left: 0em !important;
}</pre>


=== Miscellaneous Layout ===
=== Miscellaneous Layout ===
* expand default text entry box size
* Expand default text entry box size


=== Action Buttons at the Top of Entry Pages ===
=== Action Buttons at the Top of Entry Pages ===
Line 144: Line 180:
display: none;
display: none;
}</pre>
}</pre>
= Additional Optional Features =
You can enable each feature by adding it to your UserCSS.
==== Hide the mouseover image for .restricted/hentai only ====
<pre>.restricted #imagepreview img {
  display: none !important;
}</pre>
==== Strikethrough rejected similar anime entries ====
<pre>#layout-main .similaranime .rejected {
    text-decoration: line-through;
}</pre>
==== Hide images from quicksearch popup menu ====
<pre>#layout-search ul.quicksearch li.g_bubble.stripe div.image {
  display: none;
}
#layout-search ul.quicksearch .g_bubble.stripe {
  min-height: 4.4em;
}
#layout-search ul.quicksearch .g_bubble.stripe div.data {
  margin: 0.5em 0.5em 0.5em 0.5em;
}</pre>
==== Force-show info blocks on main page that are hidden (likely due to resolution being too small) ====
<pre>#layout-main div.main_all #hotanime,
#layout-main div.main_all #latestended,
#layout-main div.main_all #similaranime,
#layout-main div.main_all #randrecom,
#layout-main div.main_all #randanime,
#layout-main div.main_all #latestaired,
#layout-main div.main_all #randchar,
#layout-main div.main_all #randcreator
{
  display: block !important;
}</pre>
Likewise, if you want to hide blocks you find useless:
<pre>display: none !important;</pre>
==== Rearrange the order of the blocks.  For illustration, below`s the order that I`ve set for myself ====
<pre>#layout-main div.main_all #hotanime {order: 1;}
#layout-main div.main_all #latestended {order: 2;}
#layout-main div.main_all #similaranime {order: 3;}
#layout-main div.main_all #randrecom {order: 4;}
#layout-main div.main_all #randanime {order: 5;}
#layout-main div.main_all #latestaired {order: 6;}
#layout-main div.main_all #randcreator {order: 7;}
#layout-main div.main_all #randchar {order: 8;}</pre>
CDB-Man
staff
1,114

edits

Retrieved from "https://wiki.anidb.net/Special:MobileDiff/18076...23650"

Navigation menu

MediaWiki spam blocked by CleanTalk.
MediaWiki spam blocked by CleanTalk.