Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!---------------------------------------------------------------------------
- Theme 32 Spirited Away
- by yukoki/s-ekki
- 1. Light/Heavy CSS editting is allowed.
- 2. Do not use as base code.
- 3. Do not remove credit.
- 4. Do not claim theme as your own.
- --------------------------------------------------- UPDATE VER 240718 -->
- <meta name="image:background" content="">
- <meta name="image:header image" content="">
- <meta name="image:header icon" content="">
- <meta name="color:scrollbar" content="#69cbdc">
- <meta name="color:scrollbar bg" content="#ffffff">
- <meta name="color:text highlight" content="#5ac9e1">
- <meta name="color:tooltips background" content="#96cbd4">
- <meta name="color:tooltips text" content="#fbfbfb">
- <meta name="color:tooltips border" content="#FBFBFB">
- <meta name="color:background" content="#ffffff">
- <meta name="color:header background" content="#f8f8f8">
- <meta name="color:header bottom border" content="#9bc4d1">
- <meta name="color:header icon border" content="#dddddd">
- <meta name="color:header quote" content="#888888">
- <meta name="color:header quotation marks bg" content="#75becf">
- <meta name="color:header quotation marks" content="#ffffff">
- <meta name="color:blog title text" content="#aaaaaa">
- <meta name="color:blog title background" content="#ffffff">
- <meta name="color:blog title border" content="#d1e6df">
- <meta name="color:blog nav background" content="#96cbd4">
- <meta name="color:blog nav text" content="#ffffff">
- <meta name="color:blog nav hover background" content="#666666">
- <meta name="color:blog nav hover text" content="#b1b1b1">
- <meta name="color:desc text" content="#aaaaaa">
- <meta name="color:desc bold" content="#75becf">
- <meta name="color:desc italic" content="#666666">
- <meta name="color:desc links" content="#b4dedb">
- <meta name="color:desc links hover" content="#666666">
- <meta name="color:custom links background" content="#ffffff">
- <meta name="color:custom links text" content="#aaaaaa">
- <meta name="color:custom links background hover" content="#98d7d9">
- <meta name="color:custom links text hover" content="#ffffff">
- <meta name="color:pagination links" content="#ffffff">
- <meta name="color:pagination text" content="#bfbfbf">
- <meta name="color:pagination bg" content="#a4dbea">
- <meta name="color:pagination bg hover" content="#eeeeee">
- <meta name="color:pagination links hover" content="#c8c8c8">
- <meta name="color:post background" content="#ffffff" />
- <meta name="color:body text" content="#aaaaaa">
- <meta name="color:body links" content="#6bc2b8">
- <meta name="color:body links hover" content="#cfcfcf">
- <meta name="color:body bold" content="#42acd6">
- <meta name="color:body italic" content="#a3e6e6">
- <meta name="color:blockquote" content="#cccccc">
- <meta name="color:post title background" content="#ffffff">
- <meta name="color:post title text" content="#aaaaaa">
- <meta name="color:link post background" content="#ffffff">
- <meta name="color:link post text" content="#aaaaaa">
- <meta name="color:link post border" content="#96cbd4">
- <meta name="color:link post hover background" content="#ffffff">
- <meta name="color:link post hover text" content="#bbbbbb">
- <meta name="color:audio info background" content="#ffffff">
- <meta name="color:audio info text" content="#9d9d9d">
- <meta name="color:quote" content="#929292">
- <meta name="color:quote source" content="#aaaaaa">
- <meta name="color:ask background" content="#ffffff">
- <meta name="color:ask text" content="#7e7d7d">
- <meta name="color:asker text" content="#aeaeae">
- <meta name="color:asker link" content="#bcd3e3">
- <meta name="color:chat even name" content="#a1cfe0" />
- <meta name="color:chat even text" content="#b8b8b8" />
- <meta name="color:chat odd name" content="#a9b4cb" />
- <meta name="color:chat odd text" content="#919191" />
- <meta name="color:permalink background 1" content="#96CBD4">
- <meta name="color:permalink background 2" content="#B4D9DA">
- <meta name="color:permalink background 3" content="#D1E6DF">
- <meta name="color:permalink text 1" content="#ffffff">
- <meta name="color:permalink text 2" content="#ffffff">
- <meta name="color:permalink text 3" content="#ffffff">
- <meta name="color:permalink background hover" content="#666666">
- <meta name="color:permalink text hover" content="#b1b1b1">
- <meta name="text:link 1" content="">
- <meta name="text:link 1 URL" content="">
- <meta name="text:link 2" content="">
- <meta name="text:link 2 URL" content="">
- <meta name="text:link 3" content="">
- <meta name="text:link 3 URL" content="">
- <meta name="text:link 4" content="">
- <meta name="text:link 4 URL" content="">
- <meta name="text:link 5" content="">
- <meta name="text:link 5 URL" content="">
- <meta name="text:link 6" content="">
- <meta name="text:link 6 URL" content="">
- <meta name="text:header quote" content="">
- <meta name="if:post type 1" content="1">
- <meta name="if:post type 2" content="0">
- <meta name="if:post type 3" content="0">
- <meta name="if:infinite scroll" content="1">
- <meta name="if:show captions" content="1">
- <meta name="if:infinite scroll" content="0">
- <meta name="if:monochrome posts" content="0">
- <meta name="if:fading photos" content="1">
- <meta name="if:popup links" content="1">
- <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
- {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
- <link rel="shortcut icon" href="{Favicon}" />
- <link href='http://fonts.googleapis.com/css?family=Nova+Square' rel='stylesheet' type='text/css'>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:0,
- tip_fade_speed:0,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <style type="text/css">
- .tmblr-iframe {z-index:999999999!important;}
- ::-webkit-scrollbar { width: 7px; }
- ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
- ::-webkit-scrollbar-thumb:vertical {
- width: 10px;
- background-color: {color:scrollbar};
- border: 3px solid {color:scrollbar bg};
- margin-left: 10px;
- }
- ::selection {
- background: transparent;
- color: {color:text highlight};
- }
- ::-moz-selection {
- background: transparent;
- color: {color:text highlight};
- }
- iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:0.9; }
- body {
- background-color: {color:background};
- background-image: url({image:background});
- background-attachment: fixed;
- margin: 0;
- word-wrap: break-word;
- }
- a { text-decoration:none; }
- #s-m-t-tooltip {
- padding: 3px 5px 3px 5px;
- margin: 20px 14px 7px 10px;
- border: 3px double {color:tooltips border};
- background-color: {color:tooltips background};
- font-family: consolas;
- font-size: 8px;
- letter-spacing: 1px;
- text-transform: uppercase;
- color: {color:tooltips text};
- z-index: 99999;
- }
- #hm {
- background-color: {color:background};
- background-image: url({image:background});
- top: 0;
- width: 100%;
- height: 150px;
- position: fixed;
- z-index: 2000;
- padding-bottom: 10px;
- }
- #header {
- {block:ifposttype1}width: 500px;{/block:ifposttype1}
- {block:ifposttype2}width: 400px;{/block:ifposttype2}
- {block:ifposttype3}width: 510px;{/block:ifposttype3}
- background-color: {color:header background};
- position: relative;
- z-index: 90;
- }
- .headerimg {
- {block:ifposttype1}width: 500px;{/block:ifposttype1}
- {block:ifposttype2}width: 400px;{/block:ifposttype2}
- {block:ifposttype3}width: 510px;{/block:ifposttype3}
- height: 150px;
- display: block;
- position: relative;
- z-index: 190;
- }
- .himgcon {
- {block:ifposttype1}width: 500px;{/block:ifposttype1}
- {block:ifposttype2}width: 400px;{/block:ifposttype2}
- {block:ifposttype3}width: 510px;{/block:ifposttype3}
- height: 150px;
- overflow: hidden;
- position: absolute;
- z-index: 1000;
- transition: 0.8s;
- -moz-transition: 0.8s;
- -webkit-transition: 0.8s;
- -o-transition: 0.8s;
- }
- #header:hover .himgcon {height: 26px;}
- #header:hover .headert {margin: -150px 10px;}
- .headert {
- position: absolute;
- margin: -25px 10px;
- z-index: 195;
- transition: 0.8s;
- -moz-transition: 0.8s;
- -webkit-transition: 0.8s;
- -o-transition: 0.8s;
- }
- .hl, .ht {
- font-family: courier new;
- font-size: 9px;
- letter-spacing: 1px;
- text-transform: uppercase;
- padding: 0 5px;
- background-color: {color:blog nav background};
- color: {color:blog nav text};
- font-style: italic;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -webkit-transition: 0.4s;
- -o-transition: 0.4s;
- }
- .ht {
- background-color: {color:blog title background};
- font-style: italic;
- border-left: 30px solid {color:blog title border};
- color: {color:blog title text};
- }
- .ht:hover {text-decoration: line-through;}
- .hl:hover {
- background-color: {color:blog nav hover background};
- color: {color:blog nav hover text};
- }
- #hidh {
- position: absolute;
- {block:ifposttype1}width: 480px;{/block:ifposttype1}
- {block:ifposttype2}width: 380px;{/block:ifposttype2}
- {block:ifposttype3}width: 490px;{/block:ifposttype3}
- height: 105px;
- padding: 10px;
- margin: 25px 0;
- background-color: {color:header background};
- border-bottom: 1px solid {color:header bottom border};
- }
- .hidimg {
- float: left;
- margin: 4px 5px;
- width: 85px;
- height: 85px;
- border: 8px solid {color:header icon border};
- }
- .hidinfo {
- margin-top: 4px;
- margin-left: 100px;
- position: relative;
- z-index: 2;
- }
- .hidq {
- font-family: nova square;
- text-transform: uppercase;
- font-size: 10px;
- color: {color:header quote};
- line-height: 16px;
- text-align: left;
- border-bottom: 1px solid {color:header icon border};
- padding-bottom: 6px;
- height: 14px;
- overflow: hidden;
- }
- .w {
- font-family: georgia;
- background-color: {color:header quotation marks bg};
- color: {color:header quotation marks};
- font-size: 30px;
- float: left;
- overflow: hidden;
- height: 15px;
- padding: 1px 3px;
- line-height: 30px;
- margin-right: 8px;
- }
- .hidesc {
- {block:ifposttype1}width: 340px;{/block:ifposttype1}
- {block:ifposttype2}width: 240px;{/block:ifposttype2}
- {block:ifposttype3}width: 350px;{/block:ifposttype3}
- margin: 10px 20px 10px 10px;
- font-family: consolas;
- font-size: 10px;
- text-align: justify;
- color: {color:desc text};
- overflow: auto;
- padding-right: 10px;
- max-height: 48px;
- {block:ifpopuplinks}
- max-height: 68px;
- {/block:ifpopuplinks}
- }
- .hidesc b,strong { color: {color:desc bold}; }
- .hidesc i,em {
- font-style: normal;
- color: {color:desc italic};
- }
- .hidesc a { color: {color:desc links}; }
- .hidesc a:hover { color: {color:desc links hover};text-decoration: line-through; }
- .hidlinks {
- font-family: courier new;
- font-size: 8px;
- text-transform: uppercase;
- letter-spacing: 1px;
- }
- .hidlinks a {
- background-color: {color:custom links background};
- color: {color:custom links text};
- margin: 0 3px;
- padding: 2px 3px;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -webkit-transition: 0.4s;
- -o-transition: 0.4s;
- }
- .hidlinks a:hover { background-color: {color:custom links background hover}; color: {color:custom links text hover}; }
- .cl {
- width: 105px;
- height: 20px;
- background-color: {color:custom links background};
- float: left;
- color: {color:custom links text};
- text-align:center;
- line-height: 20px;
- margin: 2px;
- font-family: courier new;
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 2px;
- transition: 0.4s;
- -moz-transition: 0.4s;
- -webkit-transition: 0.4s;
- -o-transition: 0.4s;
- }
- .cl:hover {
- background-color: {color:custom links background hover};
- color: {color:custom links text hover};
- }
- #content {
- {block:ifposttype1}width: 500px;{/block:ifposttype1}
- {block:ifposttype2}width: 400px;{/block:ifposttype2}
- {block:ifposttype3}width: 520px;{/block:ifposttype3}
- margin-top: 165px;
- margin-bottom: 70px;
- }
- .posts {
- {block:indexpage}
- {block:ifposttype1}
- width:500px;
- margin-bottom:20px;
- {/block:ifposttype1}
- {block:ifposttype2}
- width:400px;
- margin-bottom:20px;
- {/block:ifposttype2}
- {block:ifposttype3}
- width: 250px;
- float: left;
- display: block;
- overflow: hidden;
- margin: 0 5px 10px 5px;
- {/block:ifposttype3}
- {/block:indexpage}
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .photo {
- {block:ifposttype1}max-width: 500px;{/block:ifposttype1}
- {block:ifposttype2}max-width: 400px;{/block:ifposttype2}
- {block:ifposttype3}max-width: 250px;{/block:ifposttype3}
- {block:permalinkpage}{block:ifposttype3}max-width: 500px;{/block:ifposttype3}{/block:permalinkpage}
- {block:iffadingphotos}
- opacity: 0.7;
- {/block:iffadingphotos}
- {block:ifmonochromeposts}
- filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
- filter: gray; /* IE6-9 */
- -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
- {/block:ifmonochromeposts}
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .photo:hover {
- opacity: 1;
- {block:ifmonochromeposts}
- filter: none;
- -webkit-filter: grayscale(0%);
- {/block:ifmonochromeposts}
- }
- .photocov {
- opacity: 0;
- font-family: courier new;
- line-height: 18px;
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 1px;
- position: absolute;
- z-index: 2;
- top: 35%;
- width: 100%;
- height: 100%;
- margin-left: auto;
- margin-right: auto;
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .posts:hover .pho {opacity: 0.8;background-color: #fff;}
- .posts:hover .photocov { opacity: 1;}
- .pho {
- position: absolute;
- z-index: 1;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- opacity: 0;
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .posts img {
- {block:indexpage}
- {block:ifposttype1}max-width: 470px;{/block:ifposttype1}
- {block:ifposttype2}max-width: 370px;{/block:ifposttype2}
- {block:ifposttype3}max-width: 220px;{/block:ifposttype3}
- {/block:indexpage}
- {block:permalinkpage}
- {block:ifposttype1}max-width: 470px;{/block:ifposttype1}
- {block:ifposttype2}max-width: 370px;{/block:ifposttype2}
- {block:ifposttype3}max-width: 470px;{/block:ifposttype3}
- {/block:permalinkpage}
- }
- .posts blockquote img {max-width: 100%;}
- .qpost {
- background-color: {color:post background};
- padding: 10px;
- }
- .text, .ctext, .atext {
- background-color: {color:post background};
- padding: 5px 15px;
- font-family: consolas;
- font-size: 11px;
- color: {color:body text};
- text-align: justify;
- }
- .ctext { background-color: transparent; padding: 0; }
- .atext { margin-top: 10px; }
- blockquote {
- border-left: 1px solid {color:blockquote};
- padding: 0 10px;
- margin: 5px;
- }
- .line {
- text-align: left;
- margin: 3px 0;
- background-color: {color:post background};
- }
- .odd .line {padding: 10px;color:{color:chat odd text};}
- .even .line {padding: 10px;color:{color:chat even text};}
- .odd .name {color: {color:chat odd name};}
- .even .name {color: {color:chat even name};}
- .ptitle, .ltitle {
- background-color: {color:post title background};
- color: {color:post title text};
- text-align: left;
- font-style:italic;
- border-left: 30px solid {color:link post border};
- font-family: courier new;
- font-size: 10px;
- letter-spacing: 1px;
- padding: 1px 20px;
- margin: 5px 0;
- text-transform: uppercase;
- }
- .ltitle {
- background-color: {color:link post background};
- color: {color:link post text};
- transition: 1s;
- -moz-transition: 1s;
- -webkit-transition: 1s;
- -o-transition: 1s;
- }
- .ltitle:hover {
- background-color: {color:link post hover background};
- color: {color:link post hover text};
- border-left: 50px solid #eee;
- }
- .audiopost { height: 150px; }
- .albumno {
- width: 150px;
- height: 150px;
- background-color: #888;
- position: absolute;
- z-index: 1;
- {block:indexpage}{block:ifposttype3}
- width: 250px;
- height: 250px;
- {/block:ifposttype3}{/block:indexpage}
- }
- .albumartp {
- width: 150px;
- height: 150px;
- position: relative;
- z-index: 2;
- display: block;
- {block:indexpage}{block:ifposttype3}
- width: 250px;
- height: 250px;
- {/block:ifposttype3}{/block:indexpage}
- }
- .albumart {
- {block:ifposttype1}margin-left: -350px;{/block:ifposttype1}
- {block:ifposttype2}margin-left: -250px;{/block:ifposttype2}
- {block:ifposttype3}margin-left: 0;{/block:ifposttype3}
- width: 150px;
- height: 150px;
- display: block;
- position: relative;
- {block:indexpage}{block:ifposttype3}
- width: 250px;
- height: 250px;
- {/block:ifposttype3}{/block:indexpage}
- }
- .audioplayer {
- position: absolute;
- margin-top: -90px;
- margin-left: 65px;
- width: 25px;
- height: 25px;
- overflow: hidden;
- opacity: 0.5;
- {block:indexpage}{block:ifposttype3}
- margin-top: -140px;
- margin-left: 115px;
- {/block:ifposttype3}{/block:indexpage}
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- z-index: 5;
- }
- .audioplayer:hover {opacity: 1;}
- .audioinfo {
- position: absolute;
- margin-left: 155px;
- height: 150px;
- }
- .aline {
- {block:ifposttype1}width: 325px;{/block:ifposttype1}
- {block:ifposttype2}width: 225px;{/block:ifposttype2}
- {block:indexpage}{block:ifposttype3}margin-top: 5px;{/block:ifposttype3}{/block:indexpage}
- font-family: consolas;
- font-size: 10px;
- padding: 11px 10px;
- margin-bottom: 5px;
- text-transform: uppercase;
- background-color: {color:audio info background};
- color: {color:audio info text};
- }
- .aline b,strong { color: #A0D3B4;}
- .quote {
- font-family: consolas;
- text-align: center;
- font-size: 14px;
- color: {color:quote};
- }
- .qsrc {color:{color:quote source};text-align:center;font-family:consolas;font-size:10px;}
- .askerportrait {
- max-width: 64px;
- max-height: 64px;
- position: absolute;
- border: 10px solid {color:ask background};
- float: left;
- {block:ifposttype3}
- {block:indexpage}margin-left: -120px;{/block:indexpage}
- {block:permalinkpage}margin-left: -260px;{/block:permalinkpage}
- {/block:ifposttype3}
- {block:ifposttype2}
- margin-left: -200px;
- {/block:ifposttype2}
- {block:ifposttype1}
- margin-left: -250px;
- {/block:ifposttype1}
- }
- .a {
- margin-left: 100px;
- background-color: {color:ask background};
- min-height: 64px;
- padding: 10px;
- font-family: consolas;
- font-size: 11px;
- color: {color:ask text};
- text-align: justify;
- }
- .asker {
- color: {color:asker text};
- font-family: consolas;
- font-size: 11px;
- text-transform: uppercase;
- }
- .asker a {color: {color:asker link};}
- .q {margin-top: 10px;}
- .tri {
- position: absolute;
- font-size: 30px;
- margin: 20px 0 0 85px;
- color: {color:ask background};
- }
- .perma {
- font-family: courier new;
- font-size: 8px;
- text-transform: uppercase;
- letter-spacing: 1px;
- text-align: right;
- margin-top: 7px;
- }
- .p1, .p2, .p3 {padding: 1px 5px;transition: 0.6s;-moz-transition: 0.6s;-webkit-transition: 0.6s;-o-transition: 0.6s;}
- .p1 {background-color: {color:permalink background 1}; color: {color:permalink text 1};}
- .p2 {background-color: {color:permalink background 2}; color: {color:permalink text 2};}
- .p3 {background-color: {color:permalink background 3}; color: {color:permalink text 3};}
- .p1:hover, .p2:hover, .p3:hover {
- background-color: {color:permalink background hover};
- color: {color:permalink text hover};
- }
- .permainfo {
- margin-top: 10px;
- {block:ifposttype1}width: 460px;{/block:ifposttype1}
- {block:ifposttype2}width: 360px;{/block:ifposttype2}
- {block:ifposttype3}width: 470px;{/block:ifposttype3}
- padding: 20px;
- font-family: consolas;
- font-size: 11px;
- text-align: center;
- background-color: {color:post background};
- color: {color:body text};
- }
- #notecon {
- padding: 10px;
- {block:ifposttype1}width: 480px;{/block:ifposttype1}
- {block:ifposttype2}width: 380px;{/block:ifposttype2}
- {block:ifposttype3}width: 490px;{/block:ifposttype3}
- text-align: left;
- background-color: {color:post background};
- color: {color:body text};
- font-family: consolas;
- font-size: 11px;
- margin-top: 10px;
- text-transform: uppercase;
- }
- #notecon ol.notes { list-style-type: none; }
- .pagi {
- opacity: 0.6;
- padding: 10px 0;
- width: 100%;
- position: fixed;
- bottom: 0;
- z-index: 10000;
- margin-bottom: -10px;
- transition: 0.5s;
- -moz-transition: 0.5s;
- -webkit-transition: 0.5s;
- -o-transition: 0.5s;
- }
- .pagi:hover { opacity: 1; }
- .pagin {
- background-color: {color:post background};
- padding: 15px 0;
- {block:ifposttype1}width: 500px;{/block:ifposttype1}
- {block:ifposttype2}width: 400px;{/block:ifposttype2}
- {block:ifposttype3}width: 510px;{/block:ifposttype3}
- }
- .pagina {
- text-align: center;
- font-family: consolas;
- font-size: 10px;
- color: {color:pagination text};
- }
- .pagina a {
- background-color: {color:pagination bg};
- color: {color:pagination links};
- padding: 1px 3px;
- margin: 0 0px;
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- -ms-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
- }
- .pagina a:hover {
- background-color: {color:pagination bg hover};
- color: {color:pagination links hover};
- }
- .pagination {display: none;}
- #fade {
- display: none;
- position: fixed;
- left: 0;
- top: 0;
- width: 340px;
- height: 150px;
- z-index: 9999;
- }
- .popup_block{
- height: 52px;
- display: none;
- background: {color:header background};
- padding: 10px 20px;
- float: left;
- position: absolute;
- z-index: 130;
- {block:ifposttype1}
- top: 110px;
- left: 330px;
- {/block:ifposttype1}
- {block:ifposttype2}
- top: 110px;
- left: 274px;
- padding-left: 30px;
- {/block:ifposttype2}
- }
- img.btn_close {
- float: right;
- width: 20px;
- height: 20px;
- {block:ifposttype1}margin: 10px -55px 0 0;{/block:ifposttype1}
- {block:ifposttype2}margin: 10px -52px 0 0;{/block:ifposttype2}
- padding: 5px;
- background-color: {color:custom links background};
- border-radius: 0 10px 10px 0;
- }
- *html #fade {position: absolute;}
- *html .popup_block {position: absolute;}
- #tumblr_lightbox {background-color:rgba(255,255,255,0.7)!important;}
- #tumblr_lightbox img { opacity:0; }
- #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
- opacity: 1!important;
- box-shadow: 0 0 0 transparent!important;
- border-radius: 0!important;
- -moz-border-radius: 0!important;
- -webkit-border-radius: 0!important;
- -o-border-radius: 0!important;
- }
- #warning {
- position: fixed;
- background-color: #fff;
- width: 100%;
- height: 100%;
- position: fixed;
- z-index: -1;
- opacity: 0;
- top: 0;
- left: 0;
- padding-top: 200px;
- text-align: center;
- font-family: nova square;
- font-size: 16px;
- {block:ifposttype1}
- {block:ifposttype2}opacity: 1;z-index: 100001;{/block:ifposttype2}
- {block:ifposttype3}opacity: 1;z-index: 100001;{/block:ifposttype3}
- {/block:ifposttype1}
- {block:ifposttype2}
- {block:ifposttype3}opacity: 1;z-index: 100001;{/block:ifposttype3}
- {/block:ifposttype2}
- {block:ifposttype1}{block:ifposttype2}{block:ifposttype3}
- opacity: 1;z-index: 100001;
- {/block:ifposttype3}{block:ifposttype2}{block:ifposttype1}
- {block:ifnotposttype1}{block:ifnotposttype2}{block:ifnotposttype3}
- opacity: 1;z-index: 100001;
- {/block:ifnotposttype3}{block:ifnotposttype2}{block:ifnotposttype1}
- }
- .text b,strong, .permainfo b,strong, .ctext b,strong, .atext b,strong {
- color: {color:body bold};
- font-weight: 400;
- }
- .text i,em, .permainfo a, .ctext i,em, .atext i,em {
- color: {color:body italic};
- transition: 0.6s;
- -moz-transition: 0.6s;
- -webkit-transition: 0.6s;
- -o-transition: 0.6s;
- }
- .text a, .ptags a, #notecon a, .qsrc a, .ctext a, .atext a {
- color: {color:body links};
- border-bottom: 1px solid transparent;
- }
- .text a:hover, .ptags a:hover, .permainfo a:hover, #notecon a:hover, .qsrc a:hover, .ctext a:hover, .atext a:hover {
- color: {color:body links hover};
- text-decoration: line-through;
- font-style: italic;
- }
- {CustomCSS}
- </style>
- {block:indexpage}
- {block:ifposttype3}
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
- <script>
- $(function(){
- var $container = $('#content');
- $container.imagesLoaded(function(){
- $container.masonry({
- itemSelector: '.posts',
- });
- });
- $container.infinitescroll({
- itemSelector : ".posts",
- navSelector : "div.pagination",
- nextSelector : ".pagination a#next",
- loadingImg : "",
- loadingText : "<em></em>",
- bufferPx : 10000,
- extraScrollPx: 12000,
- },
- // trigger Masonry as a callback
- function( newElements ) {
- var $newElems = $( newElements ).css({ opacity: 0 });
- // ensure that images load before adding to masonry layout
- $newElems.imagesLoaded(function(){
- $newElems.animate({ opacity: 1 });
- $container.masonry( 'appended', $newElems, true );
- });
- }
- );
- });
- </script>
- {/block:ifposttype3}
- {/block:indexpage}
- {block:ifnotposttype3}{block:ifinfinitescroll}
- <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
- <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
- <script type="text/javascript" charset="utf-8">
- var $j = jQuery.noConflict();
- $j(function() {
- if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
- $j("img").lazyload({
- placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
- effect: "fadeIn",
- });
- });
- </script>
- <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
- {/block:ifinfinitescroll}{/block:ifnotposttype3}
- {block:ifnotposttype3}
- <script type="text/javascript"
- src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script>
- $(document).ready(function() {
- //
- //When you click on a link with class of poplight and the href starts with a #
- $('a.poplight[href^=#]').click(function() {
- var popID = $(this).attr('rel'); //Get Popup Name
- var popURL = $(this).attr('href'); //Get Popup href to define size
- //Pull Query & Variables from href URL
- var query= popURL.split('?');
- var dim= query[1].split('&');
- var popWidth = dim[0].split('=')[1]; //Gets the first query string value
- //Fade in the Popup and add close button
- $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://31.media.tumblr.com/f7044fbf95c7445316fd686d832ff234/tumblr_inline_nddpdf1zy31rshr70.png" class="btn_close" title="Close Window" alt="Close" /></a>');
- //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
- var popMargTop = ($('#' + popID).height() + 80) / 2;
- var popMargLeft = ($('#' + popID).width() + 80) / 2;
- //Apply Margin to Popup
- $('#' + popID).css({
- 'margin-top' : -popMargTop,
- 'margin-left' : -popMargLeft
- });
- //Fade in Background
- $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
- $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
- return false;
- });
- //Close Popups and Fade Layer
- $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
- $('#fade , .popup_block').fadeOut(function() {
- $('#fade, a.close').remove(); //fade them both out
- });
- return false;
- });
- });
- </script>
- {/block:ifnotposttype3}
- </head>
- <body>
- <div id="warning">Please pick only 1 post size.</div>
- <center>
- <div id="hm">
- <div id="header">
- <div class="himgcon">
- <img class="headerimg" src="{image:header image}">
- <div class="headert">
- <a href="/"><span class="ht">{title}</span></a>
- <a href="/ask"><span class="hl">whisper</span></a>
- <a href="/archive"><span class="hl">archive</span></a>
- <a href="http://yukoki.tumblr.com"><span class="hl">theme</span></a>
- {block:ifpopuplinks}{block:ifnotposttype3}
- <a href="#?w={block:ifposttype1}330{/block:ifposttype1}{block:ifposttype2}230{/block:ifposttype2}" rel="popup_name" class="poplight"><span class="hl">+more</span></a>
- {/block:ifnotposttype3}{/block:ifpopuplinks}
- </div><!--headert-->
- </div><!--himgcon-->
- <div id="hidh">
- <div id="popup_name" class="popup_block">
- {block:ifposttype1}
- {block:IfLink1}<a href="{text:Link 1 URL}"><div class="cl">{text:Link 1}</div></a>{/block:IfLink1}
- {block:IfLink2}<a href="{text:Link 2 URL}"><div class="cl">{text:Link 2}</div></a>{/block:IfLink2}
- {block:IfLink3}<a href="{text:Link 3 URL}"><div class="cl">{text:Link 3}</div></a>{/block:IfLink3}
- {block:IfLink4}<a href="{text:Link 4 URL}"><div class="cl">{text:Link 4}</div></a>{/block:IfLink4}
- {block:IfLink5}<a href="{text:Link 5 URL}"><div class="cl">{text:Link 5}</div></a>{/block:IfLink5}
- {block:IfLink6}<a href="{text:Link 6 URL}"><div class="cl">{text:Link 6}</div></a>{/block:IfLink6}
- {/block:ifposttype1}
- {block:ifposttype2}
- {block:IfLink1}<a href="{text:Link 1 URL}"><div class="cl">{text:Link 1}</div></a>{/block:IfLink1}
- {block:IfLink2}<a href="{text:Link 2 URL}"><div class="cl">{text:Link 2}</div></a>{/block:IfLink2}
- {block:IfLink3}<a href="{text:Link 3 URL}"><div class="cl">{text:Link 3}</div></a>{/block:IfLink3}
- {block:IfLink4}<a href="{text:Link 4 URL}"><div class="cl">{text:Link 4}</div></a>{/block:IfLink4}
- {/block:ifposttype2}
- </div>
- <img class="hidimg" src="{image:header icon}">
- <div class="hidinfo">
- <div class="hidq">
- <span class="w">“</span>{text:header quote}
- </div><!--hidq-->
- <div class="hidesc">{description}</div>
- {block:ifnotpopuplinks}
- <div class="hidlinks">
- {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{block:iflink1}
- {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{block:iflink2}
- {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{block:iflink3}
- {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{block:iflink4}
- {block:iflink5}<a href="{text:link 5 url}">{text:link 5}</a>{block:iflink5}
- {block:iflink6}<a href="{text:link 6 url}">{text:link 6}</a>{block:iflink6}
- </div><!--hidlinks-->
- {/block:ifnotpopuplinks}
- </div><!--hidinfo-->
- </div><!--hidh-->
- </div><!--header-->
- </div><!--hm-->
- {block:indexpage}{block:ifnotinfinitescroll}
- <div class="pagi"><div class="pagin">
- {block:Pagination}<div class="pagina">
- {block:PreviousPage}
- <a href="{PreviousPage}">←</a>
- {/block:PreviousPage}
- {block:JumpPagination length="5"}
- {block:CurrentPage}
- <span class="current_page">{PageNumber}</span>
- {/block:CurrentPage}
- {block:JumpPage}
- <a class="jump_page" href="{URL}">{PageNumber}</a>
- {/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage}
- <a href="{NextPage}">→</a>
- {/block:NextPage}
- </div><!--pagination-->{/block:Pagination}
- </div></div>
- {/block:ifnotinfinitescroll}{/block:indexpage}
- </center>
- <center>
- <div id="content">
- {block:Posts}
- <div class="posts">
- {block:Quote}<div class="qpost">
- <div class="quote">"{Quote}"</div> <div class="qsrc">- {Source} -</div>
- </div>
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}{/block:Quote}
- {block:Link}
- <a href="{URL}"><div class="ltitle">{Name} ▷</div></a>
- {block:Description}<div class="text">{Description}</div>{block:Description}
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}
- {/block:Link}
- {block:Chat}
- {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
- <div class="ctext">
- {block:Lines}<div class="{Alt}">
- <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
- {/block:Lines}
- </div>
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}
- {/block:Chat}
- {block:Photo}
- {block:indexpage}{block:ifposttype3}
- <div class="photocov">
- <a href="{permalink}"><span class="p1">{notecountwithlabel}</span</a><br>
- <a href="{permalink}"><span class="p2">{timeago}</span></a><br>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div><!--photocov-->
- <div class="pho"></div>
- {/block:ifposttype3}{/block:indexpage}
- {linkopentag}<center><img class="photo" src="{PhotoURL-500}"></center>{linkclosetag}
- {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {/block:Photo}
- {block:Photoset}
- {block:indexpage}{block:ifposttype3}
- <div class="photocov">
- <a href="{permalink}"><span class="p1">{notecountwithlabel}</span</a><br>
- <a href="{permalink}"><span class="p2">{timeago}</span></a><br>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div><!--photocov-->
- <div class="pho"></div>
- {/block:ifposttype3}{/block:indexpage}
- {block:indexpage}
- {block:ifposttype1}<div class="photo">{Photoset-500}</div>{/block:ifposttype1}
- {block:ifposttype2}<div class="photo">{Photoset-400}</div>{/block:ifposttype2}
- {block:ifposttype3}<div class="photo">{Photoset-250}</div>{/block:ifposttype3}
- {/block:indexpage}
- {block:permalinkpage}
- {block:ifposttype1}<div class="photo">{Photoset-500}</div>{/block:ifposttype1}
- {block:ifposttype2}<div class="photo">{Photoset-400}</div>{/block:ifposttype2}
- {block:ifposttype3}<div class="photo">{Photoset-500}</div>{/block:ifposttype3}
- {/block:permalinkpage}
- {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {/block:Photoset}
- {block:Text}
- {block:title}<div class="ptitle">{Title}</div>{/block:title}
- <div class="text">{Body}</div>
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}
- {/block:Text}
- {block:Audio}
- {block:indexpage}
- {block:ifnotposttype3}
- <div class="audiopost">
- <div class="audioinfo">
- {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
- {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
- {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
- {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
- </div><!--audioinfo-->
- {/block:ifnotposttype3}
- {/block:indexpage}
- {block:permalinkpage}
- <div class="audioinfo">
- {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
- {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
- {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
- {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
- </div><!--audioinfo-->
- {/block:permalinkpage}
- <div class="albumart"><div class="albumno"></div>{block:AlbumArt}<img class="albumartp" src="{AlbumArtURL}">{/block:AlbumArt}</div>
- <div class="audioplayer">{AudioPlayer}</div>
- {block:ifnotposttype3}</div><!--audiopost-->{/block:ifnotposttype3}
- {block:indexpage}{block:ifposttype3}
- {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
- {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
- {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
- {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
- {/block:ifposttype3}{/block:indexpage}
- {block:IfShowCaptions}{block:Caption}<div class="atext">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}
- {/block:Audio}
- {block:Video}
- {block:ifposttype1}{Video-500}{/block:ifposttype1}
- {block:ifposttype2}{Video-400}{/block:ifposttype2}
- {block:ifposttype3}{Video-250}{/block:ifposttype3}
- {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
- {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}
- {/block:Video}
- {block:Answer}
- <img class="askerportrait" src="{AskerPortraitURL-64}">
- <div class="tri">◀</div>
- <div class="a">
- <span class="asker">{Asker} whispered:</span>
- <span class="q">{Question}</span>
- </div>
- <div class="atext">{Answer}</div>
- {block:ifposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {block:ifposttype3}
- {/block:Answer}
- {block:indexpage}{block:date}
- {block:ifnotposttype3}
- <div class="perma">
- <a href="{permalink}"><span class="p1">{timeago}</span></a>
- <a href="{permalink}"><span class="p2">@ {NoteCountWithLabel}</span></a>
- <a href="{reblogurl}"><span class="p3">reblog</span></a>
- </div>
- {/block:ifnotposttype3}
- {/block:date}{/block:indexpage}
- </div><!--posts-->
- {block:permalinkpage}
- {block:date}<div class="permainfo">
- Posted on <b>{DayOfMonth} {Month} {Year}</b>, at <b>{12Hour}.{Minutes}{AmPm}</b>, with <b>{NoteCountWithLabel}</b><br>
- {block:RebloggedFrom}
- Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
- {/block:RebloggedFrom}
- {block:HasTags}<div class="ptags">{block:Tags}
- <a href="{TagURL}">#{Tag} </a>
- {/block:Tags}</div>{/block:HasTags}
- </div>{/block:date}
- {block:date}{block:NoteCount}<div id="notecon">
- {PostNotes-16}
- </div><!--notecon-->{/block:NoteCount}{/block:date}
- {/block:permalinkpage}
- {/block:Posts}
- {block:ContentSource}
- <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
- width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
- </div><!--content-->
- <div class="pagination">
- {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> ·{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
- </div>
- </center>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement