body { margin: 0.5em; } table { width: 85%; margin: 0 auto; } tbody > tr:nth-child(odd) { background: #ddd; } .grow-1 { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-no-wrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-align-end { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .flex { display: -webkit-flex; display: -ms-flexbox; display: flex; } .small-font { font-size: 1.6rem; } .align_left { text-align: left; } .align_right { text-align: right; } .round_all { border-radius: 0.5em; } .round_top { border-radius: 0; border-top-right-radius: 0.5em; border-top-left-radius: 0.5em; } .round_bottom { border-radius: 0; border-bottom-right-radius: 0.5em; border-bottom-left-radius: 0.5em; } .media-wrap { text-align: center; margin: 0 auto; } .media { position: relative; vertical-align: top; display: inline-block; text-align: center; width: 220px; height: 319px; margin: 0.25em; } button { background: rgba(255,255,255,0.65); margin: 0; } .media .edit_buttons > button { margin: 0.5em auto; } .name, .media_metadata > div, .medium_metadata > div, .row { text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.45); color: #ffffff; padding: 0.25em; text-align: right; } .media_type, .age_rating { text-align: left; } .media > .media_metadata { position: absolute; bottom: 0; right: 0; } .media > .medium_metadata { position: absolute; bottom: 0; left: 0; } .media > .name { position: absolute; top: 0; } .media:hover > .name, .media:hover > .media_metadata > div, .media:hover > .medium_metadata > div, .media:hover > .table .row { background: rgba(0,0,0,0.75); } .media:hover > button[hidden], .media:hover > .edit_buttons[hidden] { display: block; } .media > .name > a { text-align: justify; background: none; color: #fff; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); } /* ----------------------------------------------------------------------------- Message boxes ------------------------------------------------------------------------------*/ .message { position: relative; margin: 0.5em auto; padding: 0.5em; width: 95%; } .message .close { width: 1em; height: 1em; position: absolute; right: 0.5em; top: 0.5em; text-align: center; vertical-align: middle; line-height: 1em; } .message .close:hover { cursor: pointer; } .message .icon { left: 0.5em; top: 0.5em; margin-right: 1em; } .message.error { border: 1px solid #924949; background: #f3e6e6; } .message.success { border: 1px solid #1f8454; background: #70dda9; } .message.info { border: 1px solid #bfbe3a; background: #FFFFCC; } /* ----------------------------------------------------------------------------- Anime-list-specific styles ------------------------------------------------------------------------------*/ .anime .name, .manga .name { text-align: center; width: 100%; padding: 0.5em 0; } .anime .name > a { text-align: center; width: 100%; padding: 0.5em 1em; } .anime .media_type, .anime .airing_status, .anime .user_rating, .anime .completion, .anime .age_rating { background: none; text-align: center; } .anime .table, .manga .table { position: absolute; bottom: 0; left: 0; width: 100%; } .anime .row, .manga .row { width: 100%; background: rgba(0, 0, 0, 0.45); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; text-align: center; padding: 0 inherit; } .anime .row > div, .manga .row > div { font-size: 0.8em; display: flex-item; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; text-align: center; vertical-align: middle; } .anime .media > button.plus_one { position: absolute; top: calc(50% - 21.5px); left: calc(50% - 66.5px); } /* ----------------------------------------------------------------------------- Manga-list-specific styles ------------------------------------------------------------------------------*/ .manga .media { border: 1px solid #ddd; width: 200px; height: 290px; margin: 0.25em; } .manga .media > .edit_buttons { position: absolute; top: calc(50% - 58.5px); left: calc(50% - 95px); }