staff
1,138
edits
User:CDB-Man/CDBstyle: Difference between revisions
m
Capitalization and image moving
(→Icon and Button Changes: image layout) |
m (Capitalization and image moving) |
||
| 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 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") | ||
<pre style="color:#000000; background:#71D8DE">background-color: #8DDFE4 !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 | ||
<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 | ||
<pre style="color:#000000; background:#A0E6A0">background-color: #A0E6A0 !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 | ||
<pre style="color:#FFFFFF; background:#444444">background-color: #444444 !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:#222222">background-color: #222222 !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 | ||
<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 | ||
<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> | ||
| Line 56: | Line 56: | ||
==== Anime-Group Completion Bar ==== | ==== Anime-Group Completion Bar ==== | ||
* For anime-group in my list, the completion bar, changed from green to red to improve readability | * 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> | ||
| Line 132: | Line 132: | ||
* Revert to old stars on file tables | * Revert to old stars on file tables | ||
* Colourized creq action buttons | * Colourized creq action buttons | ||
[[Image:CDBstyle colourized creq action buttons.png|framed| | [[Image:CDBstyle colourized creq action buttons.png|framed|none|Colourized creq action buttons.]] | ||
== Layout Changes == | == Layout Changes == | ||
=== Whitespace Reduction === | === Whitespace Reduction === | ||
* nowrap of username on creqhist page (and possibly others) | * Insert nowrap of username on creqhist page (and possibly others) | ||
* | * Reduction of whitespace on the anime page grouplist and eplist, and the group page release list | ||
* Userpage: | * Userpage: | ||
** Disallow line wrap on userpage stats block | ** 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) | ** 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 === | === Imagepreview === | ||
* | * Remove the transparency from imagepreview | ||
* | * Make the imagepreview background white to work better with transparent images | ||
=== Main Tabs === | === 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: | If you want to move the tabs back to the right, use this userCSS: | ||
<pre>#layout-tabs ul | <pre>#layout-tabs ul | ||
| Line 162: | Line 162: | ||
=== Miscellaneous Layout === | === Miscellaneous Layout === | ||
* | * Expand default text entry box size | ||
=== Action Buttons at the Top of Entry Pages === | === Action Buttons at the Top of Entry Pages === | ||