Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- <script></script>
- <style type="text/css">
- :root {
- /*
- ######################
- # SETTINGS #
- ######################
- Self-explanatory variables not all explained, but do play around with them.
- Some further customization possible in the actual CSS below.
- For support, PM lpf on BakaBT/IRC or <@150696503428644864> on Discord (copypaste this into a channel).
- */
- /*[ BACKGROUND ]*/
- /* ⇊ Your background of choice, uploaded to BakaSHOTS. */
- --frame_background: url([[Background_image_(RECOMMENDED)]]);
- --frame_background_settings: top left / cover;
- --fallback_solid_color: #111111; /* In case no background image is used */
- /*[ TEXT COLUMN STYLE ]*/
- /* ⇊ try a px value, var(--relative_center) or var(--true_center) */
- --text_column_position: var(--relative_center);
- --text_column_width: 443px;
- /* ⇊ Newspaper effect. Recommended to reupload this image to BakaSHOTS. */
- --text_column_background_image: url("https://i.imgur.com/rwDqnyF.gif") repeat;
- --text_column_background_image_opacity: 0.3;
- --text_column_background_color: 0, 0, 0; /* "R, G, B" value, also used for border and shadows by default */
- --text_column_background_color_opacity: 80%;
- /*[ ACTUAL TEXT STYLING ]*/
- --link_color: #d46544;
- --text_color: #ffffff;
- --anime_title_align: center; /* Do try left, center, or right */
- --anime_title_font_size: 48px;
- --anime_alt_title_font_size: 16px;
- --text_headings_font_size: 26px;
- --regular_text_font_size: 14px;
- /*[ COVER ART STYLING ]*/
- --cover_image_background: url([[Cover_Art_(Optional)]]);
- --cover_enabled: 0[[Set_this_to_1_if_using_cover_art]];
- --cover_image_background_settings: top left / cover;
- --cover_width: 220px;
- --cover_height: 300px;
- --border_settings: 2px solid var(--text_column_background_color_solid);
- /*[ MISC ]*/
- --screenshot_width: 120px;
- --general_padding: 15px; /* General padding used through the template*/
- --text_padding: var(--general_padding); /* Change to px value if dissatisfied */
- --title_padding: 5px var(--text_padding); /* Change to px value if dissatisfied */
- /*[ UNCOMMENT THIS SECTION FOR ALTERNATE SCREENSHOT LAYOUT (try it!) ]*/
- /*
- --screenshots-per-line: 4;
- --ss_block_margin: 0;
- --ss_block_position: static !important;
- --ss_heading_display: block;
- --ss_link_display: inline-block;
- --screenshot_width: calc(((var(--text_column_width) - 2 * var(--general_padding)) / var(--screenshots-per-line)) - 3px);
- --alternate_ss: 0;
- */
- /*[ UNCOMMENT THIS SECTION FOR ALTERNATE LIGHT MODE (meh) ]*/
- /*
- --lightmode: 1;
- --text_column_background_image_opacity: 0;
- --text_column_background_color: 255, 255, 255;
- --text_color: #000000;
- --border_color: 0;
- --less_shadow: 0;
- --less_title_shadow: 0;
- --more_transparent: 0.6;
- */
- /*[ CAN PROBABLY SKIP THIS PART ]*/
- --general_font_scale: 1; /* Quickly change the size of ALL text. 2 is double, 0.5 is half, etc. */
- --headings_fonts: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
- --regular_text_fonts: Calibri, "Trebuchet MS", sans-serif;
- }
- /*
- If you want to customize even deeper, below is some actual CSS.
- */
- #frame { /* ⇊ This creates the nice column under all the text. */
- background: linear-gradient(90deg,
- rgba(var(--text_column_background_color), 0) 0px,
- rgba(var(--text_column_background_color), 0) calc(var(--text_column_position) - 31px),
- rgba(var(--text_column_background_color), var(--more_transparent, var(--less_transparent))) calc(var(--text_column_position) - 1px),
- rgba(var(--text_column_background_color), var(--text_column_background_color_opacity)) var(--text_column_position),
- rgba(var(--text_column_background_color), var(--text_column_background_color_opacity)) calc(var(--text_column_position) + var(--text_column_width)),
- rgba(var(--text_column_background_color), var(--more_transparent, var(--less_transparent))) calc(var(--text_column_position) + var(--text_column_width) + 1px),
- rgba(var(--text_column_background_color), 0) calc(var(--text_column_position) + var(--text_column_width) + 31px)),
- var(--frame_background) var(--frame_background_settings), var(--fallback_solid_color);
- }
- #description_text {
- /* The block that contains all the text */
- text-shadow: var(--less_shadow, var(--regular_shadow)); /* light mode var, if undeclared then regular var*/
- padding: var(--general_padding) 0 28px; /* If you really want to change the 28px bottom padding */
- }
- #cover_image { /* ⇊ If you want to move the cover image somewhere else. */
- left: calc(var(--general_padding) - var(--text_column_position));
- border-radius: 8px;
- box-shadow: var(--text_column_background_color_solid) -2px 2px 5px, var(--text_column_background_color_solid) 2px -2px 5px;
- }
- #anime_title { /* ⇊ If you want to change the title shadow and formatting. */
- text-shadow: var(--less_title_shadow, --title_shadow);
- font-weight: bold;
- text-transform: uppercase;
- line-height: normal;
- letter-spacing: 5px;
- }
- #anime_alt_title {
- letter-spacing: normal;
- line-height: normal;
- }
- .text_headings { /* "Synopsis", "Series Info" and "Release Info" headings */
- letter-spacing: 2px;
- text-transform: uppercase;
- font-weight: bold;
- line-height: 1;
- padding: 0 5px;
- margin-top: 18px;
- margin-bottom: 3px;
- }
- .text_headings::before,
- .text_headings::after {
- content: "ー";
- }
- #screenshots_block {
- top: 0px; /* If you want to change the position of the screenshots in default layout */
- right: 0px;
- }
- #screenshots_block>.screenshots img {
- box-shadow: var(--alternate_ss, var(--normal_ss)); /* Customize screenshot shadow here */
- margin-top: 5px;
- margin-top: 5px;
- filter: grayscale(0.4);
- transition: 0.2s;
- }
- .external_links {
- bottom: 3px; /* Change "bottom" to "top" to place buttons at the top */
- right: 5px; /* Change "right" to "left" to place buttons at the left */
- }
- .external_links a {
- filter: grayscale(0%); /* You can increase this to make unhovered icons a little greyed out */
- opacity: 0.9;
- transition: 0.2s;
- /* ⇊ You can uncomment this declaration to instantly make the links vertical */
- /* display: block;*/
- }
- .external_links a:hover,
- #screenshots_block a:hover img {
- filter: grayscale(0);
- opacity: 1;
- }
- /*
- Everything in the following line is almost 100% a waste of time to
- try to modify, so I compressed it for conciseness, but feel free to decompress it.
- */
- a,a:hover,a:visited{color:var(--link_color);text-decoration:none}a:hover{text-decoration:underline}#frame{width:940px;position:relative;height:100%}#frame::before{filter:invert(var(--lightmode, 0));left:var(--text_column_position);width:var(--text_column_width);background:var(--text_column_background_image);opacity:var(--text_column_background_image_opacity);content:" ";display:block;position:absolute;z-index:3;top:0;height:100%}#description_text{width:var(--text_column_width);left:var(--text_column_position);color:var(--text_color);position:relative;height:100%;z-index:3}#cover_image{width:var(--cover_width);height:var(--cover_height);opacity:var(--cover_enabled);border:var(--border_settings);background:var(--cover_image_background) var(--cover_image_background_settings);position:absolute;z-index:-2;box-sizing:border-box}#anime_title{padding:var(--title_padding);font-family:var(--headings_fonts);font-size:calc(var(--anime_title_font_size) * var(--general_font_scale));text-align:var(--anime_title_align);position:relative;z-index:1;line-height:.8}#anime_alt_title{font-size:calc(var(--anime_alt_title_font_size) * var(--general_font_scale));position:relative;z-index:-1}#anime_info_box{padding:0 var(--text_padding);z-index:2}.text_headings{font-family:var(--headings_fonts);font-size:calc(var(--text_headings_font_size) * var(--general_font_scale))}.regular_text{font-family:var(--regular_text_fonts);font-size:calc(var(--regular_text_font_size) * var(--general_font_scale))}#screenshots_block{margin:var(--ss_block_margin,var(--general_padding)) 0;position:var(--ss_block_position,absolute);margin-right:var(--ss_block_margin,calc(-940px + var(--text_column_position) + var(--text_column_width) + var(--general_padding)))}#screenshots_heading{margin-bottom:5px;display:var(--ss_heading_display,none)}#screenshots_block>.screenshots{display:var(--ss_link_display,block)}#screenshots_block>.screenshots img{box-sizing:border-box;width:var(--screenshot_width);border:var(--border_settings)}#screenshots_block>.screenshots img{box-sizing:border-box;width:var(--screenshot_width);border:var(--border_settings)}.external_links{position:absolute;z-index:2}@-webkit-keyframes hvr-push{50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes hvr-push{50%{-webkit-transform:scale(.8);transform:scale(.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}.hvr-push{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent}.hvr-push:active,.hvr-push:focus,.hvr-push:hover{-webkit-animation-name:hvr-push;animation-name:hvr-push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}:root{--text_column_background_color_solid:rgb(var(--text_column_background_color));--true_center:calc(470px - var(--text_column_width) / 2);--relative_center:calc(var(--cover_width) + var(--general_padding) + 0.5 * (940px - var(--text_column_width) - var(--cover_width) - 2 * var(--general_padding) - var(--screenshot_width)));--regular_shadow:1px 1px 3px var(--text_column_background_color_solid),-1px -1px 3px var(--text_column_background_color_solid),0px 0px 5px var(--text_column_background_color_solid),1px 1px 3px var(--text_column_background_color_solid),-1px -1px 3px var(--text_column_background_color_solid),0px 0px 5px var(--text_column_background_color_solid);--title_shadow:0px 0px 20px var(--text_column_background_color_solid);--regular_title_shadow:var(--title_shadow),var(--title_shadow),var(--title_shadow),var(--title_shadow),var(--title_shadow);--less_transparent:0.9;--normal_ss:var(--text_column_background_color_solid) -1px 1px 1px, var(--text_column_background_color_solid) 1px -1px 1px;}
- </style>
- </head>
- <body>
- <div id="frame">
- <div id="description_text">
- <div id="cover_image"></div>
- <div id="anime_title">
- [[Anime_title]]
- <div id="anime_alt_title">
- [[Alternate_title_if_applicable]]
- </div>
- </div>
- <div id="anime_info_box">
- <div class="text_headings">Synopsis</div>
- <div class="regular_text">[[Anime_synopsis]]
- </div>
- <div class="text_headings">Series Info</div>
- <div class="regular_text">
- <strong>Year:</strong> [[Year]]<br />
- <strong>Episodes:</strong> [[Number_of_episodes]]<br />
- <strong>Categories:</strong> [[Categories]]
- <br />
- <strong>Director: </strong>[[Director]]<br />
- <strong>Production: </strong>[[Production]]
- </div>
- <div class="text_headings">Release Info</div>
- <div class="regular_text">
- <strong>Group:</strong>
- [[Fansubbing_group]]<br />
- <strong>Video:</strong>[[Video_information]<br />
- <strong>Audio:</strong>[[Audio_information]]<br />
- <strong>Subtitles:</strong>[[Subtitle_information]]<br />
- </div>
- <div class="text_headings" id="screenshots_heading">Screenshots</div>
- <div class="regular_text" id="screenshots_block">
- <a href="[[Screenshot_1]]" class="screenshots hvr-push"><img
- src="[[Screenshot_thumbnail_1]]" /></a>
- <a href="[[Screenshot_2]]" class="screenshots hvr-push"><img
- src="[[Screenshot_thumbnail_2]]" /></a>
- <a href="[[Screenshot_3]]" class="screenshots hvr-push"><img
- src="[[Screenshot_thumbnail_3]]" /></a>
- <a href="[[Screenshot_4]]" class="screenshots hvr-push"><img
- src="[[Screenshot_thumbnail_4]]" /></a>
- </div>
- </div>
- <div class="external_links">
- <a href="[[AnimeNewsNetwork_link]]" class="hvr-push"><img
- src="https://www.animenewsnetwork.com/meta/favicon.ico" alt="AMM" /></a>
- <a href="[[AnimePlanet_link]]" class="hvr-push"><img
- src="https://www.anime-planet.com/favicon-16x16.png" alt="A-P" /></a>
- <a href="[[AniDB_link]]" class="hvr-push"><img
- src="https://cdn-eu.anidb.net/css/icons/touch/favicon-16x16.png" alt="AniDB" /></a>
- <a href="[[MyAnimeList_link]]" class="hvr-push"><img
- src="https://cdn.myanimelist.net/images/faviconv5.ico" alt="MAL" /></a>
- <a href="[[Related_on_BakaBT_link]]" class="hvr-push"><img
- src="https://bakabt.me/favicon.ico" alt="BBT" /></a>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
