User:Worf/anidb.css: Difference between revisions

From AniDB
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 1: Line 1:
/*
Change banner at the top of the page
*/
#layout-search
#layout-search
{
{
   background:url("http://static.anidb.net/pics/banner/kodachrome-style2-1100.png") no-repeat scroll left top transparent;
   background:url("https://cdn.anidb.net/pics/banner/kodachrome-style2-1400.png") no-repeat scroll left top transparent;
}  
}


/*
/*
#layout-search input.text
Remove the top-border from the navigation menu entries
*/
#layout-menu li.sub-menu ul,
#layout-menu li.sub-menu ul li + li
{
{
   float: left;
   border-top-color: #444444;
  background-color: #444444;
}
}
*/


/*
/*
Highlight missing char-char and anime-anime relations in the table-fied views
Remove the padding between navigation menu entries and also keep the entries lowercased
*/
*/
#layout-main div.g_content.rel_all td.type.crel.missing,
#layout-menu li.sub-menu ul li a
#layout-main div.g_content.characterrel_all td.type.crel.missing,
#layout-main div.g_content.characterrel_all td.type.ended.missing,
#layout-main div.g_content.addcharanimerel_all td.type.crel.missing,
#layout-main div.g_content.addcharanimerel_all td.type.ended.missing
{
{
   visibility: visible;
   text-transform: none;
  background-color: #900000;
   padding: 0.0em 0;
   color: #000000;
}
}


Line 35: Line 36:
   background-color: #444444;
   background-color: #444444;
   background: none;
   background: none;
}
/*
Remove the top-border from the navigation menu entries
*/
#layout-menu li.sub-menu ul li + li
{
  border-top-color: #444444;
  background-color: #444444;
}
/*
Remove the padding between navigation menu entries and also keep the entries lowercased
*/
#layout-menu li.sub-menu ul li a
{
  text-transform: none;
  padding: 0.0em 0;
}
}


/*
/*
Remove a couple of navigation menu entries
Remove a couple of navigation menu entries
Remove the "quickadd" box on the anime page
Remove the "added by" column from the "add char-anime relation" page
*/
*/
#layout-menu li.random,
#layout-menu li.random,
#layout-menu li.myentries,
#layout-menu li.myentries,
#layout-menu li.myimport,
#layout-menu li.myexport,
#layout-menu li.myvotes,
#layout-menu li.myvotes,
#layout-menu li.mysignatures,
#layout-menu li.mysignatures,
Line 72: Line 55:
#layout-menu li.credits,
#layout-menu li.credits,
#layout-menu li.help,
#layout-menu li.help,
#layout-menu li.user-name,
#layout-menu li.user-name
#layout-main p.mylistadd,
#layout-main div.addcharanimerel_all tr.char_added
{
{
   display: none;
   display: none;
}
/*
No minimum height for pages
*/
#layout-content #layout-main div.g_content {
  min-height: 1em !important;
}
#layout-content, #layout-main {
    min-height: 50%;
}
}


Line 87: Line 78:
#layout-main div.creator_all ul.links_top,
#layout-main div.creator_all ul.links_top,
#layout-main div.collection_all ul.links_top,
#layout-main div.collection_all ul.links_top,
#layout-main div.ep_all ul.links_top,
#layout-main div.group_all ul.links_top,
#layout-main div.group_all ul.links_top,
#layout-main div.song_all ul.links_top
#layout-main div.song_all ul.links_top,
#layout-main div.tag_all ul.links_top
{
{
   display: block;
   display: block;
}
/*
Remove the "quickadd" box on the anime page
Remove the "added by" column from the "add char-anime relation" page
*/
#layout-main div.mylistadd,
#layout-main div.addcharanimerel_all tr.char_added
{
  display: none;
}
}


Line 105: Line 108:


/*
/*
Setting the left column of the stats block to a fixed width and disallowing line wrap
Display the "Summary:" string on episode pages for the summary field
*/
*/
#layout-main div.userpage_all div.stats div table th.field,
#layout-main div.ep_all div.summary:before
#layout-main div.myplace_all div.stats div table th.field
{
{
   white-space: nowrap;
   content:"Summary:";
  width: 10em;
   display: block;
}
  font-weight: bold;
 
/*
Setting the right column of the stats block to a fixed width and disallowing line wrap
*/
#layout-main div.userpage_all div.stats div table td.value,
#layout-main div.myplace_all div.stats div table td.value
{
  white-space: nowrap;
  text-align: right;
   width: 15em;
}
 
#layout-main div.block
{
  display: block;
}
 
#layout-main div.block div.data
{
  width: auto;
}
 
#layout-main div.block div.image
{
  width: auto;
  float: left;
  margin-left: 2em;
  overflow: hidden;
  text-align: right;
  margin-right: 1em;
  margin-bottom: 1em;
}
 
#layout-main div.desc
{
  clear: left;
}
}


Line 157: Line 123:
#layout-main tr.header th.sortable a
#layout-main tr.header th.sortable a
{
{
   padding:2px 0px;
   padding: 0px 2px;
}
}


/*
Decrease the letter spacing for date, id and size fields
*/
span.date, span.user a.id, td.id, td.size
span.date, span.user a.id, td.id, td.size
{
{
Line 165: Line 134:
}
}


/*
Display timestamps in a regular font again
*/
span.time, span.user a.id, td.rating span, a.filter
span.time, span.user a.id, td.rating span, a.filter
{
{
   font-size: 100%; vertical-align: top;
   font-size: 100%; vertical-align: top;
}
/*
Highlight missing char-char and anime-anime relations in the table-fied views
*/
#layout-main div.g_content.rel_all td.relation.missing,
#layout-main div.g_content.characterrel_all td.relation.missing,
#layout-main div.g_content.characterrel_all td.type.ended.missing,
#layout-main div.g_content.addcharanimerel_all td.relation.missing,
#layout-main div.g_content.addcharanimerel_all td.type.ended.missing
{
  visibility: visible;
  background-color: #900000;
  color: #000000;
}
}


Line 185: Line 171:
table.filelist td.date.added,
table.filelist td.date.added,
table.filelist tr.undumped td.id,
table.filelist tr.undumped td.id,
table.filelist tr.undumped td.action
table.filelist tr.undumped td.action,
table.file.entities tr.undumped td.id
{
{
   visibility: visible;
   visibility: visible;
   background-color: #900000;
   background-color: #900000;
   color: #000000;
   color: #000000;
  white-space: nowrap;
}
}


/*
/*
Custom background color for completed anime
PLACEHOLDER
Custom background color for anime in mylist
Custom background color for users with files on hdd or cd
*/
*/
#layout-main tr.complete,
#layout-main div.g_section.mylist,
#layout-main td.user.onhdd, td.user.oncd,
#layout-main td.mylist,
td.verified.yes
{
  background-color: #006000;
}


/*
/*
Line 232: Line 210:
{
{
   background-color: #A05000;
   background-color: #A05000;
}
.i_vrs_2 span, .i_vrs_3 span, .i_vrs_4 span, .i_vrs_5 span, .i_vrs_6 span, .i_vrs_7 span, .i_vrs_8 span, .i_vrs_9 span {
    display: inline-block;
    background-color: #105289;
    color: #ffffff;
    font-weight: bold;
    border-radius: 3px;
    padding: 2px;
    font-size: 8px;
    text-align: center;
}
}


/*
/*
Move "user menu" on myplace to the right side
Display all character/creator guises on the same page
Move "buddies" on myplace to the right side
Also hide the guise selectors at the top of the page
Move "favorite reviewers" on myplace to the right side
#layout-main div.g_content.character_all div.g_section.character_entry.hide { display: inherit !important; }
#layout-main div.g_content.character_all div.g_section.selector { display: none !important; }
#layout-main div.g_content.creator_all div.g_section.creator_entry.hide { display: inherit !important; }
#layout-main div.g_content.creator_all div.g_section.selector { display: none !important; }
*/
*/
#layout-main div.userpage_all div.g_menu div.general,
#layout-main div.userpage_all div.g_menu div.buddies,
#layout-main div.userpage_all div.g_menu div.favreviewers
{
  position: absolute !important;
  float: right;
  left: auto;
  right: 10px;
  width: 15em;
}


#layout-main div.userpage_all div.g_menu div.buddies
/*
{
Make the section headers a reasonable size and not look like shit again
   margin-top: -64em;
*/
#layout-main div .g_section > h2 > span,
#layout-main div .g_section > form > h2 > span {
   font-size: 1.1rem;
  text-align: center;
}
}
 
#layout-main div .g_section > h2 > span::before,
#layout-main div.userpage_all div.g_menu div.favreviewers
#layout-main div .g_section > form > h2 > span::before,
{
#layout-main div .g_section > h2 > span::after,
   margin-top: -45em;
#layout-main div .g_section > form > h2 > span::after {
   content: "";
}
}


#layout-main div.userpage_all > div.g_section
{
  margin-right: 16em;
}


/*
/*
Display club images on myplace
      CSS changes needed for Aniblackle2
*/
 
div.g_block.club img
.i_icon, a, a:active, a:link, a:visited, h4 span.nolink a, span.link, #layout-main a.filter { color: #cccccc !important; }
{
#layout-menu li.sub-menu span.tab { display: none; }
  display: inline-block;
html { color: #cccccc; !important}
}
#layout-menu li.sub-menu, #layout-menu li.sub-menu ul { border-radius: 7px !important; }


/*
h1 a:hover,
Making the animelist take the whole screen width again
a:hover,
*/
button:hover,
#layout-main div.animelist_all table.animelist tr td.name,
span.link:hover,
#layout-main div.mangalist_all table.mangalist tr td.name,
input[type="submit"]:hover,
#layout-main div.animelist_table table.animelist tr td.name
input[type="button"]:hover,
{
.i_icon:hover,
  width:75%;
.g_button a:hover,
.g_bubble .name-colored,
#layout-main div.admin_all div.g_menu h4 span,
#layout-main a.filter:hover,
#layout-main div.pagination span a:hover,
#layout-main div.pagination span strong,
#layout-main div.forum a.topictitle:hover,
#layout-main ul.g_list li:hover,
#layout-main div.search_all div.suggestions span:hover,
#layout-main div.chartag-list a:hover,
#layout-main div.tag-column a:hover,
#layout-main div.addsimilaranime_all div.addsimilaranime_entries a.name-colored,
#layout-main div.cmt_entries a.username-colored,
#layout-main div.forum a.username-colored,
#layout-menu li.sub-menu span.tab,
#layout-main div.forum .g_bubble.infobox h3 {
color: #728972 !important;
}
}


#layout-main div.ep_all div.summary:before
.i_vrs_2:hover span,
{
.i_vrs_3:hover span,
  content:"Summary:";
.i_vrs_4:hover span,
  display: block;
.i_vrs_5:hover span,
  font-weight: bold;
.i_vrs_6:hover span,
.i_vrs_7:hover span,
.i_vrs_8:hover span,
.i_vrs_9:hover span {
background-color: #728972;
}
}


#layout-main div.block
*/
{
width: 100%;
margin-top: 0.5em;
display: block;
}


#layout-main div.block > div.data
:not(.g_overlaymenu):not(.folded).g_filter ~ table, .internet_explorer#anidb .animelist_all :not(.g_overlaymenu):not(.folded).g_filter ~ div table.animelist {
{
  width: calc(100% - 20em);
float: left;
width: 49%;
text-align: left;
margin-bottom: 1em;
}
}


#layout-main div.main_all div.datablocks > div
.g_bubble.stripe.schedule.mylist {background: repeating-linear-gradient(45deg, #364a36, #364a36 10px, #333333 10px, #333333 20px);}
{
.g_bubble.stripe.schedule.mylist.ep_watched {background: none; background-color: #364a36;}
  display:inline-table;
  vertical-align:top;
  width:100%;
  max-width: 382px; /*hack to get ie and opera in line as they lack multi column support atm*/
}




#layout-main div.userpage_all div.userdetails .block
.g_bubble.box.wishlist.wishlist_type_towatch.wishlist_priority_med,
{
.g_bubble.stripe.schedule.wishlist.wishlist_type_towatch.wishlist_priority_med {
   display: inline-table;
   background: repeating-linear-gradient(45deg, #364a36, #364a36 10px, #333333 10px, #333333 20px);
  margin-top: 0;
  width: 100%;
}
}


#layout-main div.userpage_all div.userdetails .block .notify > div
tr.wishlist.wishlist_type_towatch.wishlist_priority_high td.name {
{
   background: repeating-linear-gradient(45deg, #904500, #904500 10px, #333333 10px, #333333 20px);
   width: 750px;
}
}


#layout-main div.userpage_all div.userdetails .block > div
/*
Custom background color for completed anime
Custom background color for anime in mylist
Custom background color for users with files on hdd or cd
*/
#layout-main tr.complete,
#layout-main div.g_section.mylist td.state.watched,
#layout-main td.user.onhdd, td.user.oncd,
#layout-main tr.wishlist.all_watched.state_onhdd.liststate_completed td.name {
#layout-main td.mylist,
td.verified.yes
{
{
   display: table-cell;
   background-color: #006000; !important;
  float: none;
  vertical-align: top;
  width: auto;
}
}


#layout-main div.userpage_all div.userdetails img
/*
{
.main_nav#layout-nav {
   margin-right: 1em;
   min-height: 0em;
  margin-top: 1.5em;
}
}
*/

Latest revision as of 08:41, 11 April 2022

/*
	Change banner at the top of the page
*/
#layout-search
{
  background:url("https://cdn.anidb.net/pics/banner/kodachrome-style2-1400.png") no-repeat scroll left top transparent;
}

/*
	Remove the top-border from the navigation menu entries
*/
#layout-menu li.sub-menu ul,
#layout-menu li.sub-menu ul li + li
{
  border-top-color: #444444;
  background-color: #444444;
}

/*
	Remove the padding between navigation menu entries and also keep the entries lowercased
*/
#layout-menu li.sub-menu ul li a
{
  text-transform: none;
  padding: 0.0em 0;
}

/*
	Remove the weird background from the navigation menu background
*/
#layout-main div.tabbed_pane div.body div.pane div.forum ul.topics li.row:hover,
#layout-main div.forum ul.topics li.row:hover,
#layout-menu li.sub-menu ul li:hover,
#layout-menu li.sub-menu ul li:active
{
  background-color: #444444;
  background: none;
}

/*
	Remove a couple of navigation menu entries
*/
#layout-menu li.random,
#layout-menu li.myentries,
#layout-menu li.myimport,
#layout-menu li.myexport,
#layout-menu li.myvotes,
#layout-menu li.mysignatures,
#layout-menu li.myreviews,
#layout-menu li.mynotifies,
#layout-menu li.mywishlist,
#layout-menu li.applet,
#layout-menu li.report,
#layout-menu li.reclinks,
#layout-menu li.credits,
#layout-menu li.help,
#layout-menu li.user-name
{
  display: none;
}

/*
	No minimum height for pages
*/
#layout-content #layout-main div.g_content {
  min-height: 1em !important;
}
#layout-content, #layout-main {
    min-height: 50%;
}

/*
	Display top links on anime/character/club/creator/collection/group/song page
*/
#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.ep_all ul.links_top,
#layout-main div.group_all ul.links_top,
#layout-main div.song_all ul.links_top,
#layout-main div.tag_all ul.links_top
{
  display: block;
}

/*
	Remove the "quickadd" box on the anime page
	Remove the "added by" column from the "add char-anime relation" page
*/
#layout-main div.mylistadd,
#layout-main div.addcharanimerel_all tr.char_added
{
  display: none;
}

/*
	Increase the size of the entity description textarea for add/edit forms
*/
textarea[name="adda.other"],
textarea[name="addc.other"],
textarea[name="addg.other"]
{
  height: 400px;
  width: 650px;
}

/*
	Display the "Summary:" string on episode pages for the summary field
*/
#layout-main div.ep_all div.summary:before
{
  content:"Summary:";
  display: block;
  font-weight: bold;
}

/*
	Decrease the padding of the table headers
*/
#layout-main tr.header th,
#layout-main tr.header th.sortable a
{
  padding: 0px 2px;
}

/*
	Decrease the letter spacing for date, id and size fields
*/
span.date, span.user a.id, td.id, td.size
{
  letter-spacing: 0px
}

/*
	Display timestamps in a regular font again
*/
span.time, span.user a.id, td.rating span, a.filter
{
  font-size: 100%; vertical-align: top;
}

/*
	Highlight missing char-char and anime-anime relations in the table-fied views
*/
#layout-main div.g_content.rel_all td.relation.missing,
#layout-main div.g_content.characterrel_all td.relation.missing,
#layout-main div.g_content.characterrel_all td.type.ended.missing,
#layout-main div.g_content.addcharanimerel_all td.relation.missing,
#layout-main div.g_content.addcharanimerel_all td.type.ended.missing
{
  visibility: visible;
  background-color: #900000;
  color: #000000;
}

/*
	Hide the undumped files column on the group page (unhide below)
*/
#layout-main td.number.undumped
{
  visibility: hidden;
}

/*
	Unhide the undumped files column on the group page if there are undumped files
	Mark table cells of undumped files red
*/
#layout-main td.number.undumped.notalldumped,
table.filelist td.date.added,
table.filelist tr.undumped td.id,
table.filelist tr.undumped td.action,
table.file.entities tr.undumped td.id
{
  visibility: visible;
  background-color: #900000;
  color: #000000;
  white-space: nowrap;
}

/*
PLACEHOLDER
*/

/*
	Custom background color for dropped/unknown anime
	Custom background color for users who deleted their file
*/
#layout-main tr.dropped,
#layout-main tr.unknown,
#layout-main td.user.deleted
{
  background-color: #900000;
}

/*
	Custom background color for finished anime
*/
#layout-main tr.finished
{
  background-color: #000090;
}

/*
	Custom background color for stalled anime
*/
#layout-main tr.stalled,
td.verified.no
{
  background-color: #A05000;
}

.i_vrs_2 span, .i_vrs_3 span, .i_vrs_4 span, .i_vrs_5 span, .i_vrs_6 span, .i_vrs_7 span, .i_vrs_8 span, .i_vrs_9 span {
    display: inline-block;
    background-color: #105289;
    color: #ffffff;
    font-weight: bold;
    border-radius: 3px;
    padding: 2px;
    font-size: 8px;
    text-align: center;
}

/*
	Display all character/creator guises on the same page
	Also hide the guise selectors at the top of the page
#layout-main div.g_content.character_all div.g_section.character_entry.hide { display: inherit !important; }
#layout-main div.g_content.character_all div.g_section.selector { display: none !important; }
#layout-main div.g_content.creator_all div.g_section.creator_entry.hide { display: inherit !important; }
#layout-main div.g_content.creator_all div.g_section.selector { display: none !important; }
*/

/*
	Make the section headers a reasonable size and not look like shit again
*/
#layout-main div .g_section > h2 > span,
#layout-main div .g_section > form > h2 > span {
  font-size: 1.1rem;
  text-align: center;
}
#layout-main div .g_section > h2 > span::before,
#layout-main div .g_section > form > h2 > span::before,
#layout-main div .g_section > h2 > span::after,
#layout-main div .g_section > form > h2 > span::after {
  content: "";
}


/*
      CSS changes needed for Aniblackle2

.i_icon, a, a:active, a:link, a:visited, h4 span.nolink a, span.link, #layout-main a.filter { color: #cccccc !important; }
#layout-menu li.sub-menu span.tab { display: none; }
html { color: #cccccc; !important}
#layout-menu li.sub-menu, #layout-menu li.sub-menu ul { border-radius: 7px !important; }

h1 a:hover,
a:hover,
button:hover,
span.link:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.i_icon:hover,
.g_button a:hover,
.g_bubble .name-colored,
#layout-main div.admin_all div.g_menu h4 span,
#layout-main a.filter:hover,
#layout-main div.pagination span a:hover,
#layout-main div.pagination span strong,
#layout-main div.forum a.topictitle:hover,
#layout-main ul.g_list li:hover,
#layout-main div.search_all div.suggestions span:hover,
#layout-main div.chartag-list a:hover,
#layout-main div.tag-column a:hover,
#layout-main div.addsimilaranime_all div.addsimilaranime_entries a.name-colored,
#layout-main div.cmt_entries a.username-colored,
#layout-main div.forum a.username-colored,
#layout-menu li.sub-menu span.tab,
#layout-main div.forum .g_bubble.infobox h3 {
	color: #728972 !important;
}

.i_vrs_2:hover span,
.i_vrs_3:hover span,
.i_vrs_4:hover span,
.i_vrs_5:hover span,
.i_vrs_6:hover span,
.i_vrs_7:hover span,
.i_vrs_8:hover span,
.i_vrs_9:hover span {
	background-color: #728972;
}

*/

:not(.g_overlaymenu):not(.folded).g_filter ~ table, .internet_explorer#anidb .animelist_all :not(.g_overlaymenu):not(.folded).g_filter ~ div table.animelist {
  width: calc(100% - 20em);
}

.g_bubble.stripe.schedule.mylist {background: repeating-linear-gradient(45deg, #364a36, #364a36 10px, #333333 10px, #333333 20px);}
.g_bubble.stripe.schedule.mylist.ep_watched {background: none; background-color: #364a36;}


.g_bubble.box.wishlist.wishlist_type_towatch.wishlist_priority_med,
.g_bubble.stripe.schedule.wishlist.wishlist_type_towatch.wishlist_priority_med {
  background: repeating-linear-gradient(45deg, #364a36, #364a36 10px, #333333 10px, #333333 20px);
}

tr.wishlist.wishlist_type_towatch.wishlist_priority_high td.name {
  background: repeating-linear-gradient(45deg, #904500, #904500 10px, #333333 10px, #333333 20px);
}

/*
	Custom background color for completed anime
	Custom background color for anime in mylist
	Custom background color for users with files on hdd or cd
*/
#layout-main tr.complete,
#layout-main div.g_section.mylist td.state.watched,
#layout-main td.user.onhdd, td.user.oncd,
#layout-main tr.wishlist.all_watched.state_onhdd.liststate_completed td.name {
#layout-main td.mylist,
td.verified.yes
{
  background-color: #006000; !important;
}

/*
.main_nav#layout-nav {
  min-height: 0em;
}
*/