Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" data-theme="light">
- <head>
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}" />
- <title>{Title}</title>
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!----
- _________
- / \
- | __ __ |
- | |__| |__| | KATARA THEME BY SAGE / DEMONTIMES
- | | https://demontimes.tumblr.com
- | _ _ _ |
- |_| |_| |_| |_|
- CREDITS:
- - phosphor icons / phosphoricons.com
- - tippy.js tooltips / https://atomiks.github.io/tippyjs/
- - bunny fonts / https://fonts.bunny.net/
- - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
- - responsive videos by nouvae / https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
- - npf images fix by glenthemes / https://glenthemes.tumblr.com/post/659034084446748672/npf-images-v3
- - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
- - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
- - day/night mode tutorial by eggdesign / https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
- - dark mode guide by 22mm / https://22mm.tumblr.com/post/673476677544837120/a-dark-mode-guide-with-css-variables-and-js-this
- - copy link to post tutorial by glenthemes / https://glenthemes.tumblr.com/post/173993578944/copy-link-to-post-button-tutorial
- - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
- - music player tutorial / https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player / https://www.youtube.com/watch?v=QTHRWGn_sJw
- ---->
- <!-- STYLESHEETS -->
- <!---- PHOTOSET ---->
- <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
- <!--
- NPF images fix v3.0 by @glenthemes [2021]
- 💌 git.io/JRBt7
- --->
- <script src="//npf-images-v3.github.io/script.js"></script>
- <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
- <style tmblr-npf>
- :root {
- --NPF-Caption-Spacing:1em;
- --NPF-Image-Spacing:4px;
- }
- </style>
- <!----- BUNNY FONTS ---->
- <link href="https://fonts.bunny.net/css?family={text:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={text:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
- <!---- ICONS ---->
- <script src="https://unpkg.com/phosphor-icons"></script>
- <script src="https://unpkg.com/[email protected]"></script>
- <script src="//pull.cappuccicons.com/cpf.js"></script>
- <!---- TOOLTIPS ---->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <!---- VIDEOS ---->
- <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
- <!---- COPY LINK ---->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
- <script>
- $(document).ready(function(){
- var clipboard = new ClipboardJS("#copybutton");
- });
- </script>
- <!---- TIME AGO ----->
- <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".time-ago").timeAgo({
- time: "short",
- spaces: true,
- words: false,
- prefix: "",
- suffix: "ago",
- });
- });
- </script>
- <!---- VARIABLES ---->
- <meta name="color:Background" content="#e0e0e0" />
- <meta name="color:Posts" content="#eaeaea" />
- <meta name="color:Borders" content="#d5d5d5" />
- <meta name="color:Title" content="#444" />
- <meta name="color:Text" content="#5a5a5a" />
- <meta name="color:Link" content="#3b82a6" />
- <meta name="color:Accent" content="#4da1c5" />
- <meta name="color:Night Background" content="#1e1e1e" />
- <meta name="color:Night Posts" content="#282828" />
- <meta name="color:Night Borders" content="#3a3a3a" />
- <meta name="color:Night Title" content="#eee" />
- <meta name="color:Night Text" content="#bbb" />
- <meta name="color:Night Link" content="#b0eaff" />
- <meta name="color:Night Accent" content="#91d7f0" />
- <meta name="color:Gradient One" content="#5592ac"/>
- <meta name="color:Gradient Two" content="#80b8d0"/>
- <meta name="color:Gradient Text" content="#fff"/>
- <meta name="color:Gradient Accent" content="#c3f2ff"/>
- <meta name="select:Corners" content="10px" title="round"/>
- <meta name="select:Corners" content="5px" title="slightly round"/>
- <meta name="select:Corners" content="15px" title="really round"/>
- <meta name="select:Corners" content="0px" title="sharp"/>
- <meta name="select:Glow" content="0 0 10px" title="on"/>
- <meta name="select:Glow" content="0 0 0" title="off"/>
- <meta name="if:Click Tags" content="1"/>
- <meta name="if:Music Player" content="1"/>
- <meta name="if:Updates" content="1"/>
- <meta name="text:Post Margin" content="80"/>
- <meta name="text:Body Font" content="Urbanist"/>
- <meta name="text:Title Font" content="Montserrat Alternates"/>
- <meta name="text:Font Size" content="15"/>
- <meta name="text:Custom Description" content="custom description"/>
- <meta name="text:Song Name" content="Song Name"/>
- <meta name="text:Song Artist" content="Song Artist"/>
- <meta name="text:Song URL" content=""/>
- <meta name="text:Song Image URL" content=""/>
- <meta name="text:Sidebar Link 1" content="link one"/>
- <meta name="text:Sidebar Link 1 URL" content="/"/>
- <meta name="text:Sidebar Link 2" content="link two"/>
- <meta name="text:Sidebar Link 2 URL" content="/"/>
- <meta name="text:Sidebar Link 3" content="link three"/>
- <meta name="text:Sidebar Link 3 URL" content="/"/>
- <meta name="text:Sidebar Link 4" content="link four"/>
- <meta name="text:Sidebar Link 4 URL" content="/"/>
- <meta name="text:Sidebar Link 5" content="link five"/>
- <meta name="text:Sidebar Link 5 URL" content="/"/>
- <meta name="text:Sidebar Link 6" content="link six"/>
- <meta name="text:Sidebar Link 6 URL" content="/"/>
- <meta name="text:Update 1" content="watching"/>
- <meta name="text:Update 1 Icon" content="television-fill"/>
- <meta name="text:Update 2" content="listening to"/>
- <meta name="text:Update 2 Icon" content="headphones-fill"/>
- <meta name="text:Update 3" content="reading"/>
- <meta name="text:Update 3 Icon" content="book-bookmark-fill"/>
- <meta name="text:Update 4" content="playing"/>
- <meta name="text:Update 4 Icon" content="game-controller-fill"/>
- <meta name="text:Update 5" content=""/>
- <meta name="text:Update 5 Icon" content=""/>
- <meta name="text:Update 6" content=""/>
- <meta name="text:Update 6 Icon" content=""/>
- <!--- day/night --->
- <script>
- const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
- if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
- </script>
- <!------- CSS -------->
- <style>
- :root, html[data-theme='light'] {
- --LightOn: flex;
- --LightOff: none;
- --ColorBackground: {color:background};
- --ColorPosts: {color:posts};
- --ColorTitle: {color:title};
- --ColorText: {color:text};
- --ColorLink: {color:link};
- --ColorAccent: {color:accent};
- --ColorBorders: {color:borders};
- --ColorGradientOne: {color:gradient one};
- --ColorGradientTwo: {color:gradient two};
- --ColorGradientText: {color:gradient text};
- --ColorGradientAccent: {color:gradient accent};
- --ColorOpacity: rgba(255,255,255,.1);
- --ColorReverseOpacity: rgba(0,0,0,.1);
- }
- html[data-theme='dark'] {
- --LightOn: none;
- --LightOff: flex;
- --ColorBackground: {color:night background};
- --ColorPosts: {color:night posts};
- --ColorTitle: {color:night title};
- --ColorText: {color:night text};
- --ColorLink: {color:night link};
- --ColorAccent: {color:night accent};
- --ColorBorders: {color:night borders};
- --ColorGradientOne: {color:gradient one};
- --ColorGradientTwo: {color:gradient two};
- --ColorGradientText: {color:gradient text};
- --ColorGradientAccent: {color:gradient accent};
- --ColorOpacity: rgba(0,0,0,.1);
- --ColorReverseOpacity: rgba(255,255,255,.1);
- }
- html.theme-transition,
- html.theme-transition *,
- html.theme-transition *:before,
- html.theme-transition *:after {
- transition: 0s !important;
- transition-delay: 0 !important;
- }
- .light-on{
- display: var(--LightOn);
- }
- .light-off{
- display: var(--LightOff);
- }
- /*--- TOOLTIPS ---*/
- .tippy-tooltip.custom-theme {
- font-family:'{text:title font}', sans-serif;
- color:var(--ColorTitle);
- text-transform:lowercase;
- text-align:center;
- letter-spacing:.1em;
- background:var(--ColorPosts);
- border-radius:{select:Corners};
- margin-bottom:.5em;
- box-shadow:0 0 10px 0 rgba(0,0,0,.2);
- }
- /*--- SCROLLBAR ---*/
- ::-webkit-scrollbar {
- width:5px;
- height:5px;
- background:var(--ColorBackground);
- }
- ::-webkit-scrollbar-track {
- background:var(--ColorBackground);
- border-radius: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius: 5px;
- }
- /*--- TEXT SELECTION ---*/
- ::-moz-selection { /* Code for Firefox */
- color:var(--ColorPosts);
- background:var(--ColorAccent);
- }
- ::selection {
- color:var(--ColorPosts);
- background:var(--ColorAccent);
- }
- /*--- COMMON ---*/
- body {
- font-family:'{text:body font}', sans-serif;
- font-size:{text:font size}px;
- color: var(--ColorText);
- background-color: var(--ColorBackground);
- {block:ifGradientBG}
- background-image:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- background-attachment:fixed;
- {/block:ifGradientBG}
- line-height:140%;
- word-wrap:break-word;
- letter-spacing:.04em;
- margin:0;
- }
- body {
- opacity:1;
- transition:.75s opacity;
- }
- body.fade-out {
- opacity:0;
- transition:none;
- }
- html {background-color:var(--ColorBackground);}
- a {
- color:var(--ColorLink);
- text-decoration: none;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- a:hover {
- color:var(--ColorAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /* LINK EFFECTS */
- #hua {
- display:inline-block;
- position:relative;
- }
- #hua:after {
- content: '';
- position:absolute;
- width:100%;
- transform:scaleX(0);
- height:2px;
- bottom:0;
- left:0;
- background-color:var(--ColorLink);
- transform-origin:center;
- transition: transform 0.25s ease-out;
- }
- #hua:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- .description a, a.read_more, .updates a {
- display:inline-block;
- position:relative;
- border-bottom:2px solid var(--ColorBorders);
- }
- .description a:after, a.read_more:after, .updates a:after {
- content: '';
- position:absolute;
- width:100%;
- transform:scaleX(0);
- height:2px;
- bottom:-2px;
- left:0;
- background-color:var(--ColorLink);
- transform-origin:center;
- transition: transform 0.25s ease-out;
- }
- .description a:hover:after, a.read_more:hover:after, .updates a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- blockquote {
- border-left:1px solid var(--ColorBorders);
- padding-left:.75em;
- margin-left:1em;
- }
- ul {list-style-type:circle;}
- ol {list-style-type: decimal-leading-zero;}
- li::marker {color:var(--ColorAccent)}
- small {font-size:.95em;}
- big {font-size:1.1em;}
- hr {
- height:1px;
- border:none;
- box-shadow:none;
- background:var(--ColorBorders);
- }
- pre {
- word-wrap:break-word!important;
- white-space:pre-wrap;
- }
- b, strong {
- color:var(--ColorTitle);
- font-weight:800;
- }
- b a:hover {
- color:var(--ColorAccent);
- }
- button {font-size:1em;}
- h1 {font-size:1.3em; letter-spacing:.1em; padding:0; margin:.5em .25em 0 .75em; color:var(--ColorTitle); display:inline-block; width:auto;}
- h1 a {border-bottom:2px solid var(--ColorBorders);}
- h1 a:hover {color:var(--ColorAccent); border-bottom:2px solid var(--ColorLink);}
- h2 {font-size:1.2em; color:var(--ColorTitle); letter-spacing:.1em;}
- h3 {font-size:1.15em;}
- h4 {font-size:1.1em;}
- h5 {font-size:1.05em;}
- h1, h1 a, h2 {font-family:'{text:title font}', sans-serif;}
- /*--- CONTAINERS ---*/
- main {
- width:100%;
- display:flex;
- justify-content:center;
- gap:5em;
- }
- section {
- width:540px;
- position:relative;
- margin-top:4em;
- margin-bottom:4em;
- }
- article {
- width:100%;
- position:relative;
- margin:{text:post margin}px auto auto auto;
- background:var(--ColorPosts);
- border-radius:{select:Corners};
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- }
- article:first-of-type {margin-top:0;}
- .post-wrap {
- background:var(--ColorPosts);
- border-radius:{select:Corners};
- }
- /*--- TOP BUTTONS ---*/
- .topleft {
- position:fixed;
- left:1em;
- top:1em;
- display:flex;
- flex-direction:column;
- gap:1em;
- z-index:9999;
- }
- /* DAY/NIGHT */
- button#theme-toggle {
- outline:none;
- border:none;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- cursor:help;
- }
- button#theme-toggle span {
- justify-content:center;
- align-items:center;
- width:2.35em;
- height:2.35em;
- background:var(--ColorOpacity);
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle:hover span {
- background:transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- button#theme-toggle:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:daynight;
- -moz-animation-name:daynight;
- }
- @keyframes daynight {
- 50% {
- -webkit-transform: scaleX(-1);
- -ms-transform: scaleX(-1);
- transform: scaleX(-1);
- }
- }
- /* MUSIC BUTTON */
- .music-container {
- position:relative;
- display:flex;
- align-items:flex-start;
- }
- .music-button {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- cursor:help;
- }
- .music-button a {
- display:flex;
- justify-content:center;
- align-items:center;
- width:2.35em;
- height:2.35em;
- background:var(--ColorOpacity);
- border-radius:100%;
- }
- .music-button:hover a {background:transparent;}
- .music-container .music-button i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: 1.65s;
- animation-duration: 1.65s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:infinite;
- -webkit-animation-iteration-count:infinite;
- animation-name: music;
- -moz-animation-name: music;
- animation-play-state:paused;
- }
- .music-container.play .music-button i {
- animation-play-state:running;
- }
- @keyframes music {
- 0% {
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- color:var(--ColorGradientText);
- }
- 25% {
- -webkit-transform: scale(.95);
- -ms-transform: scale(.95);
- transform: scale(.95);
- color:var(--ColorGradientAccent);
- }
- 50% {
- -webkit-transform: scale(1.05);
- -ms-transform: scale(1.05);
- transform: scale(1.05);
- color:var(--ColorGradientText);
- }
- 75% {
- -webkit-transform: scale(.95);
- -ms-transform: scale(.95);
- transform: scale(.95);
- color:var(--ColorGradientAccent);
- }
- 100% {
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
- color:var(--ColorGradientText);
- }
- }
- /*- MUSIC PLAYER -*/
- .audio-container {
- position:absolute;
- left:100%;
- margin-left:1em;
- min-width:250px;
- display:flex;
- flex-direction:column;
- align-items:center;
- backdrop-filter: blur(2px);
- border-radius:{select:Corners};
- z-index:9;
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- }
- .audio-container:after {
- content:'';
- position:absolute;
- left:0;
- width:100%;
- height:100%;
- opacity:.85;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners};
- z-index:-1;
- }
- .audio-buttons {
- width:calc(100% - 1.5em);
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- gap:1em;
- padding:.5em 1em .5em 1em;
- }
- .audio-buttons i#notbtn {
- font-size:1.3em;
- color:var(--ColorGradientText);
- text-shadow:{select:Glow};
- }
- .action-btn-big {
- font-size:1.3em;
- color:var(--ColorGradientOne);
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.4em;
- background:var(--ColorGradientAccent);
- border:1px solid var(--ColorGradientAccent);
- border-radius:100%;
- cursor:pointer;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .action-btn-big:hover {
- text-shadow:{select:Glow};
- color:var(--ColorGradientText);
- background:var(--ColorOpacity);
- border:1px solid var(--ColorOpacity);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .action-btn:focus {outline:0;}
- .img-container {
- width:calc(100% - 2em);
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- padding:1em;
- background:var(--ColorPosts);
- border-radius:{select:Corners};
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- }
- .img-container img {
- width:3em;
- height:3em;
- border-radius:100%;
- object-fit:cover;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- animation:rotate 5s linear infinite;
- animation-play-state:paused;
- }
- .music-container.play .img-container img {
- animation-play-state:running;
- }
- @keyframes rotate {
- from {
- transform:rotate(0deg);
- }
- to {
- transform:rotate(360deg);
- }
- }
- .music-info {
- text-align:left;
- }
- .music-info #title {
- font-size:.95em;
- font-weight:700;
- font-family:'{text:title font}', sans-serif;
- text-align:left;
- /* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */
- /* Fallback: Set a background color. */
- color:var(--ColorTitle);
- /* Create the gradient. */
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- /* Set the background size and repeat properties. */
- background-size: 100%;
- background-repeat: repeat;
- /* Use the text as a mask for the background. */
- /* This will show the gradient as a text color rather than element bg. */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-background-clip: text;
- -moz-text-fill-color: transparent;
- }
- .music-info #artist {font-size:.95em; color:var(--ColorText); text-align:left;}
- .music-info h4 {margin:0;}
- /* sidebar button */
- .sidebar-button {
- display:none;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- cursor:help;
- }
- .sidebar-button a {
- display:flex;
- justify-content:center;
- align-items:center;
- width:2.35em;
- height:2.35em;
- background:var(--ColorOpacity);
- border-radius:100%;
- }
- .sidebar-button:hover a {background:transparent;}
- .sidebar-button i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .sidebar-button:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /*--- HEADER RIGHT ---*/
- .topright {
- position:fixed;
- right:1em;
- top:1em;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:1em;
- z-index:9999;
- }
- /* updates button */
- .updates-wrap {
- position:relative;
- display:flex;
- align-items:flex-start;
- }
- .updates-button {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- cursor:help;
- }
- .updates-button a {
- display:flex;
- justify-content:center;
- align-items:center;
- width:2.35em;
- height:2.35em;
- background:var(--ColorOpacity);
- border-radius:100%;
- }
- .updates-button:hover a {background:transparent;}
- .updates-button i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .updates-button:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name: wiggle;
- -moz-animation-name: wiggle;
- }
- @keyframes wiggle {
- 0% {
- -webkit-transform: translateX(0px);
- -ms-transform: translateX(0px);
- transform: translateX(0px)
- }
- 15% {
- -webkit-transform: translateX(0px);
- -ms-transform: translateX(0px);
- transform: translateX(0px)
- }
- 30% {
- -webkit-transform: rotate(10deg);
- -ms-transform: translateX(10deg);
- transform: translateX(10deg)
- }
- 45% {
- -webkit-transform: rotate(-10deg);
- -ms-transform: rotate(-10deg);
- transform: rotate(-10deg)
- }
- 60% {
- -webkit-transform: rotate(10deg);
- -ms-transform: rotate(10deg);
- transform: rotate(10deg)
- }
- 75% {
- -webkit-transform: rotate(-10deg);
- -ms-transform: rotate(-10deg);
- transform: rotate(-10deg)
- }
- 85% {
- -webkit-transform: rotate(10deg);
- -ms-transform: rotate(10deg);
- transform: rotate(10deg)
- }
- 100% {
- -webkit-transform: translateX(0px);
- -ms-transform: translateX(0px);
- transform: translateX(0px)
- }
- }
- body.updates-clicked .updates-button i {color:var(--ColorGradientAccent);}
- /*- updates tab -*/
- .updates-container {
- position:absolute;
- right:100%;
- margin-right:1em;
- width:250px;
- display:flex;
- flex-direction:column;
- align-items:center;
- backdrop-filter: blur(2px);
- border-radius:{select:Corners};
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- z-index:9;
- }
- .updates-container:after {
- content:'';
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- opacity:.85;
- background:linear-gradient(to top left, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners};
- z-index:-1;
- }
- .updates-title {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- font-weight:700;
- color:var(--ColorGradientText);
- padding:.5em 1em .5em 1em;
- }
- .updates {
- width:calc(100% - 1.5em);
- display:flex;
- flex-direction:column;
- align-items:flex-start;
- gap:1em;
- padding:.75em;
- background:var(--ColorPosts);
- border-radius:{select:Corners};
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- }
- .updates li {
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- gap:.5em;
- }
- .updates i {
- font-size:1.3em;
- color:var(--ColorAccent);
- }
- .updates span {
- text-align:left;
- }
- /* TUMBLR CONTROLS */
- #controlsbutton {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- cursor:help;
- }
- #controlsbutton a {
- display:flex;
- justify-content:center;
- align-items:center;
- width:2.35em;
- height:2.35em;
- background:var(--ColorOpacity);
- border-radius:100%;
- }
- #controlsbutton:hover a {background:transparent;}
- #controlsbutton i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- #controlsbutton:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: 1.5s;
- animation-duration: 1.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:tumblrcontrols;
- -moz-animation-name:tumblrcontrols;
- }
- @keyframes tumblrcontrols {
- 45% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 55% {
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- .tmblr-iframe-compact .tmblr-iframe--unified-controls {
- z-index:999999999!important;
- margin-top:.5em;
- margin-right:3.5em;
- transform:scale(.9);
- opacity:0;
- visibility:hidden;
- }
- body.controlsclick iframe.tmblr-iframe {
- opacity:1.0;
- visibility:visible;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- -ms-transition: all 0.5s;
- -o-transition: all 0.5s;
- transition: all 0.5s;
- }
- body.controlsclick #controlsbutton i {color:var(--ColorGradientAccent);}
- /*---- SIDEBAR ----*/
- aside {width:350px;}
- #sidebar {
- position:fixed;
- margin-top:4em;
- width:350px;
- display:flex;
- flex-direction:column;
- align-items:center;
- background:var(--ColorPosts);
- border-radius:{select:Corners};
- box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
- z-index:999;
- }
- .sidebar-wrap {
- position:relative;
- width:100%;
- display:flex;
- flex-direction:column;
- }
- #sidebar svg {
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- }
- #sidebar .svg-container {
- display: inline-block;
- position:absolute;
- width:100%;
- padding-bottom: 100%;
- vertical-align: middle;
- overflow: hidden;
- opacity:.85;
- border-radius:{select:Corners};
- }
- .title {
- position:relative;
- width:calc(100% - 1.5em);
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:1em;
- padding:.75em;
- border-bottom:1px solid var(--ColorBorders);
- }
- .title img {
- width:4.5em;
- height:4.5em;
- border-radius:100%;
- padding:2px;
- background:var(--ColorGradientTwo);
- }
- .title a {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- .title b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.3em;
- font-weight:bold;
- color:var(--ColorTitle);
- letter-spacing:.1em;
- text-align:center;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- background-size: 100%;
- background-repeat:repeat;
- -webkit-background-clip: text;
- -webkit-text-fill-color:transparent;
- -moz-background-clip:text;
- -moz-text-fill-color:transparent;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .title a:hover b {
- color:var(--ColorAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .title i {
- font-style:normal;
- color:var(--ColorText);
- text-align:center;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .title a:hover i {
- color:var(--ColorTitle);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .description {
- width:calc(100% - 1.5em);
- text-align:center;
- padding:.75em .75em 1em .75em;
- background:var(--ColorPosts);
- border-radius:0 0 {select:Corners} {select:Corners};
- z-index:1;
- }
- .description p {margin-bottom:0; padding-bottom:0;}
- .sidebar-bottom {
- position:relative;
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- gap:.5em;
- margin-top:-.75em;
- padding:1.25em 1em .5em 1em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:0 0 {select:Corners} {select:Corners};
- }
- body.nav-clicked .sidebar-bottom {border-radius:0 0 0 0;}
- .sb-nav, .sb-search {cursor:help; display:flex; justify-content:center; align-items:center;}
- .sb-link {display:flex; justify-content:center; align-items:center;}
- .sb-nav i, .sb-link i, .sb-search i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .sb-nav i:hover, a.sb-link:hover i, .sb-search i:hover {
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- body.nav-clicked .sb-nav i {color:var(--ColorGradientAccent); text-shadow:{select:Glow};}
- body.search-clicked .sb-search i {color:var(--ColorGradientAccent); text-shadow:{select:Glow};}
- /* NAVIGATE */
- nav {
- position:relative;
- display:flex;
- justify-content:flex-start;
- align-items:flex-start;
- flex-wrap:wrap;
- gap:.5em;
- width:calc(100% - 2em);
- padding:1em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:0 0 {select:Corners} {select:Corners};
- border-top:1px solid var(--ColorOpacity);
- z-index:9;
- }
- nav a {
- min-width:calc(33% - .5em);
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.25em;
- }
- nav i {
- font-size:1.2em;
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- nav a:hover i {
- color:var(--ColorGradientText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- nav a span {
- color:var(--ColorGradientText);
- text-align:left;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- nav a:hover span {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /* SEARCH BAR */
- .sb-search {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- body.search-clicked .sb-search {
- position:absolute;
- left:0;
- width:calc(100% - 2em);
- padding:.5em 1em .5em 1em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:0 0 {select:Corners} {select:Corners};
- }
- body.nav-clicked.search-clicked .sb-search {border-radius:0 0 0 0;}
- .search .query {
- border: 0;
- outline: 0;
- font-family:'{text:title font}', sans-serif;
- font-size:.9em;
- width:100%;
- color:var(--ColorGradientText);
- letter-spacing:.1em;
- background:transparent;
- }
- ::-webkit-input-placeholder {color: inherit; opacity:.75;}
- :-moz-placeholder {color: inherit; opacity:.75;}
- ::-moz-placeholder {color: inherit; opacity:.75;}
- :-ms-input-placeholder {color: inherit; opacity:.75;}
- input:focus::-webkit-input-placeholder {color: transparent;}
- input:focus:-moz-placeholder {color: transparent;}
- input:focus::-moz-placeholder {color: transparent;}
- input:focus:-ms-input-placeholder { color: transparent;}
- /*---- TOP POST INFO ---*/
- .topinfo {
- margin-bottom:-1em;
- width:calc(100% - 2em);
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- padding:.75em 1em 1.75em 1em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners} {select:Corners} 0 0;
- }
- /* top info left */
- .topinfo-left {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:1em;
- }
- .topinfo-img {
- width:2.35em;
- height:2.35em;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:var(--ColorGradientAccent);
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .topinfo-img img {
- width:2.35em;
- height:2.35em;
- border-radius:100%;
- }
- .topinfo-img:hover {
- transform:scale(1.1);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .topinfo-textwrap {
- display:flex;
- flex-direction:column;
- }
- .ti-name {
- font-size:.95em;
- color:var(--ColorGradientText);
- text-align:left;
- }
- .ti-name span {opacity:.95;}
- .ti-name a {
- font-family:'{text:title font}', sans-serif;
- font-weight:600;
- color:var(--ColorGradientText);
- border-bottom:1px solid transparent;
- -webkit-transition: all 0.2s;
- -moz-transition: all 0.2s;
- -ms-transition: all 0.2s;
- -o-transition: all 0.2s;
- transition: all 0.2s;
- }
- .ti-name a:hover {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.2s;
- -moz-transition: all 0.2s;
- -ms-transition: all 0.2s;
- -o-transition: all 0.2s;
- transition: all 0.2s;
- }
- .ti-text {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .ti-text b {
- font-weight:normal;
- font-size:.95em;
- color:var(--ColorGradientText);
- letter-spacing:.075em;
- text-align:left;
- opacity:.95;
- }
- .ti-text span {
- font-size:.5em;
- color:var(--ColorGradientAccent);
- }
- /* top info right */
- .topinfo-right {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- }
- .topinfo-right a {
- position:relative;
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .topinfo-right i {
- font-size:1.6em;
- color:var(--ColorGradientText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .topinfo-right a:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /*--- POSTS ----*/
- .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
- article img {display:block; margin:auto; max-width:100%;}
- .caption {
- padding:1em;
- }
- .caption a {
- position:relative;
- border-bottom:2px solid var(--ColorBorders);
- }
- .caption a:hover {border-bottom:2px solid var(--ColorLink);}
- .userlink {
- display:inline-block;
- }
- .userlink a {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- border-bottom:0;
- }
- .userlink a:hover {border-bottom:0;}
- .usericon {
- width:1.5em;
- height:1.5em;
- padding:2px;
- background:var(--ColorAccent);
- border-radius:100%;
- }
- .usericon img {
- width:1.5em;
- height:1.5em;
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .userlink a:hover .usericon img {
- transform:rotate(15deg);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .username {
- font-weight:600;
- font-size:.95em;
- color:var(--ColorTitle);
- letter-spacing:.1em;
- border-bottom:2px solid var(--ColorBorders);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .userlink a:hover .username {
- border-bottom:2px solid var(--ColorAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .userlink.deactive .username {
- color:var(--ColorText);
- opacity:.85;
- }
- a.read_more {
- text-transform:uppercase;
- letter-spacing:1px;
- font-weight:bold;
- color: var(--ColorTitle);
- }
- a.read_more:hover {color:var(--ColorAccent);}
- /*--- PHOTO POSTS ----*/
- .photopost {width:calc(100% - 2em); padding:1em;}
- .photopost .caption {padding:.5em 0 .5em 0;}
- img.photos {width:100%;}
- .vignette, #vignette {opacity:0;}
- .tmblr-lightbox, #tumblr_lightbox {
- backdrop-filter: blur(2px);
- background-color:rgba(0,0,0,.2) !important;
- z-index:9999999;
- }
- .lightbox-image, #tumblr_lightbox img {
- box-shadow: none !important;
- }
- #tumblr_lightbox_caption, .lightbox-caption {
- color: #fff !important;
- font-family: inherit;
- margin-top: 1em !important;
- z-index:9999999;
- }
- /*--- LINK POSTS ---*/
- .linkpost {
- position:relative;
- width:calc(100% - 2em);
- padding:1em;
- }
- .linkpost a {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- .linkimage {
- position:relative;
- width:100%;
- height:200px;
- z-index:9;
- }
- .linkimage img {
- width:100%;
- height:200px;
- object-fit:cover;
- border-radius:{select:Corners} {select:Corners} 0 0;
- }
- .linkimage-overlay {
- position:absolute;
- top:0;
- width:100%;
- height:200px;
- display:flex;
- justify-content:center;
- align-items:center;
- font-family:'{text:title font}', sans-serif;
- font-size:1.4em;
- font-weight:bold;
- color:var(--ColorGradientText);
- letter-spacing:.1em;
- backdrop-filter:blur(3px);
- border-radius:{select:Corners} {select:Corners} 0 0;
- z-index:9;
- }
- .linkimage:after {
- content:'';
- position:absolute;
- top:0;
- width:100%;
- height:200px;
- opacity:.75;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners} {select:Corners} 0 0;
- z-index:1;
- }
- .link {
- width:calc(100% - 2em);
- padding:1em;
- background:var(--ColorReverseOpacity);
- border-radius:{select:Corners};
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- }
- .link#thumbnail {border-radius:0 0 {select:Corners} {select:Corners};}
- .linkicon i {
- font-size:1.8em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- margin-left:.5em;
- padding:.4em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .linkpost a:hover .linkicon i {
- color:var(--ColorGradientAccent);
- transform:scale(.95);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .linktitle {
- display:flex;
- flex-direction:column;
- }
- .linktitle b {
- font-family:'{text:title font}', sans-serif;
- font-size:1.1em;
- }
- .linktitle span {
- font-size:.9em;
- color:var(--ColorText);
- }
- /*--- AUDIO POSTS ---*/
- .audiopost {
- position:relative;
- width:calc(100% - 2em);
- padding:1em;
- display:flex;
- justify-content:center;
- align-items:center;
- z-index:9;
- }
- .audiopost iframe {
- width:100%;
- }
- .audio {
- position:relative;
- width:100%;
- display:flex;
- flex-direction:column;
- align-items:center;
- background:var(--ColorReverseOpacity);
- border-radius:{select:Corners};
- }
- .audiowrap {
- width:calc(100% - 2em);
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:1em;
- padding:1em;
- }
- .albumart-circle {
- width:100px;
- height:100px;
- }
- .albumart-circle img {
- width:100px;
- height:100px;
- border-radius:100%;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .audiotitle {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- .audiotitle b {
- font-family:'{text:title font}', sans-serif;
- letter-spacing:.1em;
- color:var(--ColorTitle);
- text-align:center;
- }
- .audiotitle span {
- text-align:center;
- }
- .audiobuttons {
- width:calc(100% - 2em);
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- gap:1em;
- padding:1em;
- background:var(--ColorOpacity);
- border-radius:0 0 {select:Corners} {select:Corners};
- }
- .audiobuttons i {
- font-size:1.6em;
- color:var(--ColorAccent);
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- background-size: 100%;
- background-repeat:repeat;
- -webkit-background-clip: text;
- -webkit-text-fill-color:transparent;
- -moz-background-clip:text;
- -moz-text-fill-color:transparent;
- }
- .audioplaybg {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- box-shadow:2px 8px 8px rgba(0,0,0,.1);
- }
- .audioplay {
- width: 30px;
- height: 30px;
- overflow: hidden;
- position: relative;
- padding:8px 8px 5px 5px;
- background:#f2f2f2;
- border-radius:100%;
- z-index:1;
- }
- /*--- QUOTE POSTS ----*/
- .quotepost {
- width:calc(100% - 2em);
- padding:1em;
- }
- .quote {
- padding:.5em;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners};
- }
- .quotewrap {
- padding:.5em;
- border-radius:{select:Corners};
- background:var(--ColorOpacity);
- border:1px solid var(--ColorOpacity);
- }
- .quote i {
- transform:rotate(180deg);
- font-size:1.4em;
- color:var(--ColorGradientAccent);
- margin-right:1em;
- }
- .quote span {
- font-family:'{text:title font}', sans-serif;
- color:var(--ColorGradientText);
- font-size:1.2em;
- letter-spacing:.2em;
- font-weight:bold;
- text-align:left;
- }
- .source {
- text-align:center;
- padding:.5em .5em 0 .5em;
- color:var(--ColorGradientAccent);
- letter-spacing:.1em;
- }
- /*--- ANSWER POSTS ---*/
- .askwrap {
- width:calc(100% - 2em);
- padding:1em 1em .5em 1em;
- }
- .askicon {
- width:2.2em;
- height:2.2em;
- padding:2px;
- border-radius:100%;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .askicon img {
- width:2.2em;
- height:2.2em;
- border-radius:100%;
- }
- .asker {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:.5em;
- margin-bottom:1em;
- }
- .asker .askerstart {
- display:flex;
- flex-direction:column;
- align-items:flex-end;
- text-align:right;
- line-height:120%;
- }
- .askerstart b {
- font-family:'{text:title font}', sans-serif;
- text-transform:lowercase;
- letter-spacing:.05em;
- font-weight:600;
- }
- .askerstart a {
- font-family:'{text:title font}', sans-serif;
- margin-right:0;
- margin-bottom:0;
- }
- .askerstart span {
- font-size:.9em;
- }
- .askmessage {
- margin-left:2.5em;
- margin-top:-.5em;
- }
- .question {
- position:relative;
- padding:.5em 1em .5em 1em;
- margin-right:2em;
- text-align:right;
- color:var(--ColorGradientText);
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners};
- }
- .question .blurb {
- position:absolute;
- right:-.5em;
- top:-.8em;
- transform:rotate(-145deg);
- width:0;
- height:0;
- border-left:.8em solid transparent;
- border-right:.8em solid transparent;
- border-top:1.8em solid var(--ColorGradientTwo);
- }
- .answerwrap {
- width:calc(100% - 2em);
- padding:.5em 1em 1em 1em;
- }
- .answerer .usericon {
- width:2.2em;
- height:2.2em;
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- border-radius:100%;
- background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .answerer .usericon img {
- width:2.2em;
- height:2.2em;
- border:none;
- padding:0;
- }
- .answerer {
- display:flex;
- align-items:center;
- gap:.5em;
- line-height:120%;
- }
- .answerer .username {
- font-family:'{text:title font}', sans-serif;
- text-transform:lowercase;
- letter-spacing:.05em;
- font-weight:600;
- border-bottom:0;
- }
- .answermsg {
- font-size:.9em;
- }
- .answer {
- position:relative;
- margin-top:1em;
- margin-left:2em;
- padding:.5em 1em .5em 1em;
- background:var(--ColorBackground);
- border-radius:{select:Corners};
- }
- .answer .blurb {
- position:absolute;
- left:-.5em;
- top:-.8em;
- transform:rotate(145deg);
- width:0;
- height:0;
- border-left:.8em solid transparent;
- border-right:.8em solid transparent;
- border-top:1.8em solid var(--ColorBackground);
- }
- .question a, .answer a {
- display:inline-block;
- position:relative;
- }
- .question a:after, .answer a:after {
- content: '';
- position:absolute;
- width:100%;
- transform:scaleX(0);
- height:2px;
- bottom:-2px;
- left:0;
- transform-origin:middle;
- transition: transform 0.25s ease-out;
- }
- .question a:hover:after, .answer a:hover:after {
- transform: scaleX(1);
- transform-origin: middle;
- }
- .question a {color:var(--ColorGradientText);border-bottom:2px solid var(--ColorOpacity);}
- .question a:after {background-color:var(--ColorGradientAccent);}
- .question b {color:var(--ColorGradientText);}
- /*--- CHAT POSTS ---*/
- .chat {width:calc(100% - 2em); margin:0; padding:1em;}
- .chat li {
- position:relative;
- list-style:none;
- padding:1em 2em 1em 2em;
- margin:.5em 0 .5em 0;
- border-radius:{select:Corners};
- }
- .chat li:last-of-type {margin-bottom:0;}
- .chat li:nth-of-type(odd) {
- color:var(--ColorGradientText);
- background:var(--ColorGradientOne);
- }
- .chat li:nth-of-type(odd) .blurb {
- position:absolute;
- top:1.2em;
- left:-.4em;
- margin-top:-.5em;
- transform:rotate(45deg);
- width:2em;
- height:2em;
- background:var(--ColorGradientOne);
- }
- .chat li:nth-of-type(even) {
- background:var(--ColorGradientTwo);
- color:var(--ColorGradientText);
- text-align:right;
- }
- .chat li:nth-of-type(even) .blurb {
- position:absolute;
- top:1.2em;
- right:-.4em;
- margin-top:-.5em;
- transform:rotate(45deg);
- width:2em;
- height:2em;
- background:var(--ColorGradientTwo);
- }
- .chatter:nth-of-type(even) {text-align:right;}
- .chatter {
- font-family:'{text:title font}', sans-serif;
- color:var(--ColorTitle);
- font-weight:600;
- letter-spacing:.1em;
- }
- /*--- BOTTOM POST INFO ---*/
- .bottominfo-wrap {
- width:100%;
- display:flex;
- flex-direction:column;
- }
- .bottominfo {
- position:relative;
- width:calc(100% - 2em);
- display:flex;
- justify-content:space-between;
- align-items:center;
- gap:.5em;
- margin-top:-.75em;
- padding:1.25em 1em .5em 1em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:0 0 {select:Corners} {select:Corners};
- }
- {block:ifClickTags}
- .bottominfo:after {
- position:absolute;
- content:'';
- top:-.25em;
- left:0;
- width:100%;
- height:1em;
- background:var(--ColorPosts);
- border-radius:0 0 {select:Corners} {select:Corners};
- }
- .bottominfo.tags-clicked {
- margin-top:-.75em;
- padding:1.25em 1em .5em 1em;
- }
- .bottominfo.tags-clicked:after {display:none;}
- {/block:ifClickTags}
- .bottominfo-left {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- }
- /* reblog button */
- .bil-icon a {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- background:var(--ColorGradientAccent);
- border-radius:100%;
- }
- .bil-icon a:hover {transform:scale(1.1);}
- .bil-icon i {
- font-size:1.6em;
- color:var(--ColorGradientOne);
- }
- /* like button */
- a.likeb span, .bil-like {
- display:flex;
- align-items:center;
- }
- .bil-like i {
- font-size:1.6em;
- color:var(--ColorGradientText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .bil-like a:hover i {
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .likeb {
- position: relative;
- display: inline-block;
- }
- .likeb .like_button iframe {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- z-index: 2;
- opacity: 0;
- }
- .like_button iframe {width: 100% !important; height: 100% !important;}
- .likeb .liked + .actual-button i {
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- }
- .clicktagsbutton {display:flex; align-items:center; justify-content:center; cursor:help;}
- .clicktagsbutton i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .clicktagsbutton:hover i {
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .tagsbutton {display:none;}
- .clicktagsbutton.tags-clicked i {color:var(--ColorGradientAccent); text-shadow:{select:Glow};}
- /* bottom info right */
- .bottominfo-right {
- display:flex;
- justify-content:flex-end;
- align-items:center;
- gap:1em;
- }
- .bottominfo-right a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .bottominfo-right i {
- font-size:1.6em;
- color:var(--ColorGradientText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .bottominfo-right a:hover i {
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- #copybutton {cursor:help;}
- /*--- TAGS ---*/
- .tags, .clicktags {
- width:calc(100% - 2em);
- display:flex;
- align-items:center;
- flex-wrap:wrap;
- gap:.75em;
- background:var(--ColorPosts);
- padding:.75em 1em .75em 1em;
- border-radius:0 0 {select:Corners} {select:Corners};
- border-top:1px solid var(--ColorBorders);
- z-index:1;
- }
- .tags a {
- display:flex;
- justify-content:center;
- align-items:center;
- gap:.05em;
- }
- .tags a span {
- color:var(--ColorText);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .tags a:hover span {
- color:var(--ColorAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .tags a b {
- font-weight:normal;
- color:var(--ColorAccent);
- opacity:.85;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- /*--- PAGINATION ---*/
- article.pagination {
- width:calc(100% - 2em);
- display:flex;
- justify-content:space-evenly;
- align-items:center;
- gap:2em;
- padding:.5em 1em .5em 1em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .pagination-buttons {
- display:flex;
- justify-content:center;
- align-items:center;
- gap:1em;
- }
- .pagination-btn {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .pagination-btn a {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .pagination-btn i {
- font-size:1.6em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .pagination-btn:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .pagination-btn.nopgn {opacity:.5; cursor:not-allowed;}
- .pagination-btn.nopgn i {color:var(--ColorGradientAccent); text-shadow:none;}
- .pagination-btn.nopgn:hover i {color:var(--ColorGradientAccent);}
- .pagination-btn.nopgn.yespgn {display:none;}
- .jump-btn, .jump-btn a, .currentpg {
- display:flex;
- justify-content:center;
- align-items:center;
- }
- .jump-btn a, .currentpg {
- font-size:.95em;
- width:1.8em;
- height:1.8em;
- border-radius:100%;
- }
- .currentpg {
- color:var(--ColorGradientText);
- text-shadow:{select:Glow};
- background:var(--ColorOpacity);
- border:1px solid var(--ColorOpacity);
- cursor:default;
- }
- .jump-btn a {
- color:var(--ColorGradientOne);
- background:var(--ColorGradientAccent);
- border:1px solid var(--ColorGradientAccent);
- }
- .jump-btn a:hover {
- color:var(--ColorGradientAccent);
- text-shadow:{select:Glow};
- background:var(--ColorOpacity);
- border:1px solid var(--ColorOpacity);
- }
- /*--- TAG / DAY PAGES ---*/
- article.tdpage {
- width:calc(100% - 2em);
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- padding:.5em 1em .5em 1em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- }
- .tdpage-text {
- font-family:'{text:title font}', sans-serif;
- font-size:.95em;
- color:var(--ColorGradientText);
- text-transform:lowercase;
- text-align:left;
- }
- .tdpage-text b {color:var(--ColorGradientText);}
- .tdpage i {
- font-size:1.3em;
- color:var(--ColorGradientOne);
- padding:.3em;
- background:var(--ColorGradientAccent);
- border-radius:100%;
- }
- /*--- PERMALINK INFO ---*/
- .perma-page {
- margin:1em 0 1em 0;
- width:calc(100% - 2em);
- display:flex;
- flex-direction:column;
- align-items:flex-start;
- gap:1em;
- padding:1em;
- background:var(--ColorPosts);
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- border-radius:{select:Corners};
- }
- .perma-page li {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:.5em;
- }
- .perma-page i {
- font-size:1.2em;
- color:var(--ColorGradientText);
- padding:.3em;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:100%;
- }
- .perma-page span {
- font-family:'{text:title font}', sans-serif;
- font-size:.95em;
- color:var(--ColorText);
- text-transform:lowercase;
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .perma-page a {font-weight:700; color:var(--ColorTitle); position:relative;}
- .perma-page a:hover {color:var(--ColorAccent);}
- .perma-page a:after {
- content: '';
- position:absolute;
- width:100%;
- transform:scaleX(0);
- height:2px;
- bottom:-2px;
- left:0;
- background-color:var(--ColorLink);
- transform-origin:center;
- transition: transform 0.25s ease-out;
- }
- .perma-page a:hover:after {
- transform: scaleX(1);
- transform-origin:center;
- }
- /*--- POST NOTES ---*/
- .notes {
- margin:2em 0;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- border-radius:{select:Corners};
- }
- .notes-title {
- display:flex;
- justify-content:flex-start;
- align-items:center;
- gap:1em;
- padding:.5em 1em .5em 1em;
- }
- .notes-title span {
- font-family:'{text:title font}', sans-serif;
- color:var(--ColorGradientText);
- text-align:left;
- letter-spacing:.1em;
- }
- .notes-titleicon {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:.5em;
- background:var(--ColorGradientAccent);
- border-radius:100%;
- }
- .notes-titleicon i {
- font-size:1.6em;
- color:var(--ColorGradientOne);
- }
- ol.notes {
- max-width: 100%;
- padding:.5em 1em .5em 1em;
- margin:0;
- background:var(--ColorPosts);
- box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
- }
- .more_notes_link {
- width:100%;
- }
- a.more_notes_link {
- font-weight:bold;
- letter-spacing: 0.1em;
- }
- a.more_notes_link::after {
- content:'\eb98';
- color:var(--ColorText);
- }
- a.more_notes_link::before {
- content:'\eb98';
- color:var(--ColorText);
- position:absolute;
- left:0;
- font-family:'cappuccicons';
- }
- ol.notes li.note blockquote {
- display:none;
- }
- ol.notes li.note {
- padding:1em 0 1em 0;
- list-style-type:none;
- display:flex;
- align-items:center;
- gap:.5em;
- font-size:.9em;
- border-top:1px solid var(--ColorBorders);
- }
- ol.notes li.note:first-of-type {border-top:none;}
- ol.notes li.note a {text-transform:uppercase;}
- ol.notes li.note img.avatar {
- width:1.5em;
- height:1.5em;
- padding:2px;
- background:var(--ColorAccent);
- border-radius:100%;
- }
- ol.notes li.note.reblog::after {
- content:'\ec37';
- color:#03cf35;
- }
- ol.notes li.note.like::after {
- content:'\eb04';
- color:#fe492f;
- }
- ol.notes li.note.reply::after {
- content:'\e9d7';
- color:#00b8ff;
- }
- ol.notes li.note.reply span {
- color:#00b8ff;
- }
- ol.notes li.note.reply span.action {
- color:var(--ColorText);
- }
- ol.notes li.note.original_post::after {
- content:'\eb68';
- color:var(--ColorTitle);
- }
- ol.notes li.note.original_post {
- font-weight:bold;
- color:var(--ColorTitle);
- }
- ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post, ol.notes li.note.reply, a.more_notes_link {
- position:relative;
- }
- ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-left:.3em;}
- ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes li.note.original_post::after, ol.notes li.note.reply::after, a.more_notes_link::after {
- position:absolute;
- right:0;
- font-family:'cappuccicons';
- }
- /*---- BOTTOM BUTTONS ---*/
- .bbuttons {
- position:fixed;
- left:1em;
- bottom:1em;
- display:flex;
- flex-direction:column;
- align-items:center;
- gap:1em;
- z-index:9999;
- }
- /* SCROLL TO TOP */
- #totop {
- display:none;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- {block:ifGradientBG}
- background:var(--ColorOpacity);
- {/block:ifGradientBG}
- border-radius:100%;
- cursor:help;
- }
- #totop a {
- width:2.35em;
- height:2.35em;
- display:flex;
- justify-content:center;
- align-items:center;
- background:var(--ColorOpacity);
- border-radius:100%;
- cursor:help;
- }
- #totop:hover a {background:transparent;}
- #totop i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- #totop:hover i {
- color:var(--ColorGradientAccent);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: 2.5s;
- animation-duration: 2.5s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:1;
- -webkit-animation-iteration-count:1;
- animation-name:totop;
- -moz-animation-name:totop;
- }
- @keyframes totop {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 10% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 20% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 30% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 40% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 60% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 70% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 80% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 90% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*--- CREDIT: DO NOT TOUCH ---*/
- .credit {
- display:flex;
- justify-content:center;
- align-items:center;
- padding:2px;
- background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
- {block:ifGradientBG}
- background:var(--ColorOpacity);
- {/block:ifGradientBG}
- border-radius:100%;
- }
- .credit a {
- width:2.35em;
- height:2.35em;
- display:flex;
- justify-content:center;
- align-items:center;
- background:var(--ColorOpacity);
- border-radius:100%;
- }
- .credit i {
- font-size:1.5em;
- color:var(--ColorGradientText);
- text-shadow:{select:glow};
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- }
- .credit:hover i {
- color:var(--ColorGradientAccent);
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -ms-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
- -webkit-animation-duration: 2s;
- animation-duration: 2s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- animation-iteration-count:infinite;
- -webkit-animation-iteration-count:infinite;
- animation-name: bounce;
- -moz-animation-name: bounce;
- }
- @keyframes bounce {
- 0% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 25% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 50% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- 75% {
- -webkit-transform: translateY(-3px);
- -ms-transform: translateY(-3px);
- transform: translateY(-3px)
- }
- 100% {
- -webkit-transform: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px)
- }
- }
- /*--- RESPONSIVENESS ---*/
- @media only screen and (max-width: 1075px) {
- .sidebar-button {display:flex;}
- body.explore-click #explore {left:0;}
- aside {position:fixed; left:4.5em; z-index:999;}
- #sidebar {display:none;}
- body.sidebar-click #sidebar {display:flex;}
- body.sidebar-click .sidebar-button i {color:var(--ColorGradientAccent);}
- }
- @media only screen and (max-width: 700px) {
- section {margin-left:4.5em; margin-right:4.5em;}
- .tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton, .ti-name span {display:none;}
- }
- {CustomCSS}
- </style>
- </head>
- <body>
- <script>
- document.body.classList.add('fade-out');
- window.addEventListener('DOMContentLoaded', () => {
- document.body.classList.remove('fade-out');
- });
- </script>
- <main><!--- MAIN CONTAINER --->
- <!-- TOP BUTTONS --->
- <div class="topleft">
- <!--- DAY/NIGHT --->
- <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
- <span class="light-on" title="turn off the lights"><i class="ph-moon-fill"></i></span>
- <span class="light-off" title="turn on the lights"><i class="ph-sun-fill"></i></span>
- </button>
- <!-- MUSIC PLAYER -->
- {block:ifMusicPlayer}
- <div class="music-container" id="music-container">
- <div title="music player" class="music-button"><a><i class="ph-music-notes-fill"></i></a></div>
- <div class="audio-container" id="audio-container">
- <audio src="{text:Song URL}" id="audio"></audio>
- <div class="audio-buttons">
- <i id="notbtn" class="ph-queue-fill"></i>
- <i id="notbtn" class="ph-rewind-fill"></i>
- <button id="play" class="action-btn action-btn-big">
- <i class="ph-play-fill"></i>
- </button>
- <i id="notbtn" class="ph-fast-forward-fill"></i>
- <i id="notbtn" class="ph-playlist-fill"></i>
- </div>
- <div class="img-container">
- <img src="{text:Song Image URL}" alt="music-cover" id="cover">
- <div class="music-info">
- <div id="title">{text:Song Name}</div>
- <div id="artist">{text:Song Artist}</div>
- </div>
- </div>
- </div>
- </div>
- {block:ifMusicPlayer}
- <div title="toggle sidebar" class="sidebar-button"><a><i class="ph-sidebar-fill"></i></a></div>
- </div>
- <div class="topright">
- <div title="toggle controls" id="controlsbutton"><a><i class="ph-gear-fill"></i></a></div>
- {block:ifUpdates}
- <div class="updates-wrap">
- <div title="updates" class="updates-button"><a><i class="ph-bell-fill"></i></a></div>
- <div class="updates-container">
- <div class="updates-title">updates</div>
- <div class="updates">
- <li><i class="ph-{text:Update 1 Icon}"></i><span>{text:Update 1}</span></li>
- {block:ifUpdate2}<li><i class="ph-{text:Update 2 Icon}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
- {block:ifUpdate3}<li><i class="ph-{text:Update 3 Icon}"></i><span>{text:Update 3}</span></li>{/block:ifUpdate3}
- {block:ifUpdate4}<li><i class="ph-{text:Update 4 Icon}"></i><span>{text:Update 4}</span></li>{/block:ifUpdate4}
- {block:ifUpdate5}<li><i class="ph-{text:Update 5 Icon}"></i><span>{text:Update 5}</span></li>{/block:ifUpdate5}
- {block:ifUpdate6}<li><i class="ph-{text:Update 6 Icon}"></i><span>{text:Update 6}</span></li>{/block:ifUpdate6}
- </div>
- </div>
- </div>
- {/block:ifUpdates}
- </div>
- <!--- SIDEBAR --->
- <aside>
- <div id="sidebar">
- <div class="sidebar-wrap">
- <div class="svg-container">
- <svg viewBox="0 0 250 250" preserveAspectRatio="xMinYMin meet">
- <path d="M0,50 C75,100 150,0 250,50 L250,00 L0,0 Z" style="stroke: none; fill:var(--ColorGradientOne);"></path>
- </svg>
- </div>
- <div class="title">
- <img src="{PortraitURL-128}">
- <a href="/"><b>{Title}</b><i>@{Name}</i></a>
- </div>
- {block:ifCustomDescription}<div class="description">{text:Custom Description}</div>{/block:ifCustomDescription}
- <div class="sidebar-bottom">
- <a title="home" class="sb-link" href="/"><i class="ph-house-fill"></i></a>
- {block:AskEnabled}<a title="contact" class="sb-link" href="/ask"><i class="ph-chats-circle-fill"></i></a>{/block:AskEnabled}
- <a title="archive" class="sb-link" href="/archive"><i class="ph-archive-fill"></i></a>
- <div title="navigate" class="sb-nav"><i class="ph-navigation-arrow-fill"></i></div>
- <div class="sb-search">
- <i title="toggle searchbar" class="ph-magnifying-glass"></i>
- <div class="searchwrap">
- <form class="search" action="javascript:return false">
- <input type="text" class="query" placeholder="search"></form>
- </div>
- </div>
- </div>
- <nav>
- {block:ifSidebarLink1}<a href="{text:Sidebar Link 1 URL}"><i class="ph-number-one"></i><span>{text:Sidebar Link 1}</span></a>{/block:ifSidebarLink1}
- {block:ifSidebarLink2}<a href="{text:Sidebar Link 2 URL}"><i class="ph-number-two"></i><span>{text:Sidebar Link 2}</span></a>{/block:ifSidebarLink2}
- {block:ifSidebarLink3}<a href="{text:Sidebar Link 3 URL}"><i class="ph-number-three"></i><span>{text:Sidebar Link 3}</span></a>{/block:ifSidebarLink3}
- {block:ifSidebarLink4}<a href="{text:Sidebar Link 4 URL}"><i class="ph-number-four"></i><span>{text:Sidebar Link 4}</span></a>{/block:ifSidebarLink4}
- {block:ifSidebarLink5}<a href="{text:Sidebar Link 5 URL}"><i class="ph-number-five"></i><span>{text:Sidebar Link 5}</span></a>{/block:ifSidebarLink5}
- {block:ifSidebarLink6}<a href="{text:Sidebar Link 6 URL}"><i class="ph-number-six"></i><span>{text:Sidebar Link 6}</span></a>{/block:ifSidebarLink6}
- </nav>
- </div>
- </div><!-- .sidebar-wrap -->
- </div><!-- #sidebar -->
- </aside>
- <!--- POSTS CONTAINER --->
- <section>
- <!--- TAG AND DAY PAGES --->
- {block:TagPage}
- <article class="tdpage">
- <i class="ph-tag-fill"></i>
- <div class="tdpage-text">
- showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b>
- </div>
- </article>
- {/block:TagPage}
- {block:DayPage}
- <article class="tdpage">
- <i class="ph-calendar-plus-fill"></i>
- <div class="tdpage-text">
- showing all posts made on <b>{Month} {DayOfMonth}, {Year}</b>
- </div>
- </article>
- {/block:DayPage}
- <!--- POSTS --->
- {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <article class="posts" id="{PostID}" post-type="{PostType}">
- <!--- TOP POST INFO --->
- {block:Date}
- <div class="topinfo">
- <div class="topinfo-left">
- {block:NotReblog}
- <div class="topinfo-img"><a title="original post" href="/"><img src="{PortraitURL-128}"></a></div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="topinfo-img"><a target="_blank" title="@{ReblogRootName}" href="//{ReblogRootName}.tumblr.com"><img src="{ReblogRootPortraitURL-128}"></a></div>
- {/block:RebloggedFrom}
- <div class="topinfo-textwrap">
- {block:NotReblog}
- <div class="ti-name"><span>{PostType} post by </span><a href="{Permalink}">{Name}</a></div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- <div class="ti-name"><span>{PostType} post by </span><a target="_blank" href="{ReblogRootURL}">{ReblogRootName}</a></div>
- {/block:RebloggedFrom}
- <div class="ti-text">
- <b class="time-ago">{TimeStamp}</b>
- <span>●</span>
- <b class="notecount">{NoteCountWithLabel}</b>
- </div>
- </div>
- </div>
- <div class="topinfo-right">
- <a {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel} title="view permalink" href="{Permalink}"><i class="ph-link-simple-horizontal"></i></a>
- {block:PinnedPostLabel}<a title="pinned post" href="{Permalink}"><i class="ph-push-pin-fill"></i></a>{/block:PinnedPostLabel}
- </div>
- </div>
- {/block:Date}
- <div class="post-wrap">
- <!-- PHOTO POSTS -->
- {block:Photo}
- <div class="photopost">
- <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
- {block:Caption}
- {block:NotReblog}
- <div class="caption">{Caption}</div>
- {/block:NotReblog}
- {block:Rebloggedfrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- </div>
- {/block:Photo}
- <!-- PHOTOSET POSTS -->
- {block:Photoset}
- <div class="photopost">
- <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
- {block:Caption}
- {block:NotReblog}
- <div class="caption">{Caption}</div>
- {/block:NotReblog}
- {block:Rebloggedfrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- </div>
- {/block:Photoset}
- <!--- TEXT POSTS --->
- {block:Text}
- {block:Title}
- <h1><a href="{Permalink}">{Title}</a></h1>
- {/block:Title}
- {block:NotReblog}
- <div class="caption">{Body}</div>
- {/block:NotReblog}
- {block:Rebloggedfrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Text}
- <!-- VIDEO POSTS -->
- {block:Video}
- <div class="video">{Video-700}</div>
- {block:Caption}
- {block:NotReblog}
- <div class="caption">{Caption}</div>
- {/block:NotReblog}
- {block:Rebloggedfrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Video}
- <!--- CHAT POSTS --->
- {block:Chat}
- <ul class="chat">
- {block:Lines}
- {block:Label}<div class="chatter">{Label}</div>{/block:Label}
- <li>{Line} <div class="blurb"></div></li>
- {/block:Lines}
- </ul>
- {/block:Chat}
- <!--- LINK POSTS --->
- {block:Link}
- <div class="linkpost">
- <a href="{URL}">
- {block:Thumbnail}<div class="linkimage"><img src="{Thumbnail-HighRes}">
- <div class="linkimage-overlay">{Name}</div>
- </div>{/block:Thumbnail}
- <div class="link" {block:Thumbnail}id="thumbnail"{/block:Thumbnail}>
- <div class="linkicon"><i class="ph-link"></i></div>
- <div class="linktitle"><b>{Name}</b>
- {block:Excerpt}<span>{Excerpt}</span>{/block:Excerpt}
- </div>
- </div>
- </a>
- </div>
- {block:Description}
- {block:NotReblog}
- <div class="caption">{Description}</div>
- {/block:NotReblog}
- {/block:Description}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Link}
- <!--- AUDIO POSTS --->
- {block:Audio}
- <div class="audiopost">
- <div class="audio">
- <div class="audiowrap">
- <div class="albumart-circle">{block:albumart}<img src="{AlbumArtURL}">{/block:albumart}</div>
- <div class="audiotitle">
- <b>{block:trackname}{Trackname}{/block:trackname}</b>
- <span>{block:Album}{Album}{/block:Album}</span>
- <span>{block:Artist}{Artist}{/block:Artist}</span>
- </div><!-- audiotitle -->
- </div>
- <div class="audiobuttons">
- <i class="ph-playlist-fill"></i>
- <i class="ph-rewind-fill"></i>
- <div class="audioplaybg">
- <div class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div>
- </div>
- <i class="ph-fast-forward-fill"></i>
- <i class="ph-queue-fill"></i>
- </div>
- </div>
- </div>
- {block:Caption}
- {block:NotReblog}
- <div class="caption">{Caption}</div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Caption}
- {/block:Audio}
- <!-- QUOTE POSTS -->
- {block:Quote}
- <div class="quotepost">
- <div class="quote">
- <div class="quotewrap"><i class="ph-quotes-fill"></i><span>{Quote}</span></div>
- <div class="source">
- {Source}
- </div>
- </div>
- </div>
- {/block:Quote}
- <!--- ANSWER POSTS --->
- {block:Answer}
- <div class="askwrap">
- <div class="asker">
- <div class="askerstart">
- <b>{Asker}</b>
- <span>sent a message</span>
- </div>
- <div class="askicon"><img src="{AskerPortraitURL-64}"></div>
- </div>
- <div class="question">
- {Question}
- <div class="blurb"></div>
- </div>
- </div>
- {block:Answerer}
- <div class="answerwrap">
- <div class="answerer">
- <div class="usericon"><img src="{AnswererPortraitURL-64}"></div>
- <div class="answererwrap">
- <div class="username" {block:IsDeactivated}title="deactivated"{/block:IsDeactivated}>{Answerer}</div>
- <div class="answermsg">replied</div>
- </div>
- </div>
- <div class="answer">
- <div class="blurb"></div>
- {Answer}</div>
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <div class="answerwrap">
- <div class="answerer">
- <div class="usericon"><img src="{PortraitURL-64}"></div>
- <div class="answererwrap">
- <div class="username"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="/">{Name}</a></div>
- <div class="answermsg">replied</div>
- </div>
- </div>
- <div class="answer">
- <div class="blurb"></div>
- {Replies}</div>
- </div>
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="caption">
- <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
- {Body}
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {/block:Answer}
- </div>
- </div><!-- .post-wrap -->
- {block:Date}
- <div class="bottominfo-wrap">
- <!--- TAGS --->
- {block:HasTags}
- <div class="tags">
- {block:Tags}<a href="{TagURL}"><b>#</b><span>{Tag}</span></a>{/block:Tags}
- </div>
- {/block:HasTags}
- <!--- BOTTOM POST INFO --->
- <div class="bottominfo">
- <div class="bottominfo-left">
- <div class="bil-icon"><a title="reblog" href="{ReblogURL}" target="_blank"><i class="ph-arrows-clockwise-bold"></i></a></div>
- <div class="bil-like"><a title="like" class="likeb" href="#">{LikeButton}<span class="actual-button"><i class="ph-heart-straight-fill"></i></span></a></div>
- {block:ifClickTags}<div title="toggle tags" class="clicktagsbutton"><i class="ph-tag-fill"></i></div>{/block:ifClickTags}
- </div><!-- .bottominfo-left -->
- <div class="bottominfo-right">
- {block:RebloggedFrom}
- <a target="_blank" title="reblogged from @{ReblogParentName}" href="{ReblogParentURL}"><i class="ph-arrow-u-down-left-fill"></i></a>
- {/block:RebloggedFrom}
- <a title="view day page" title="{Month} {DayofMonth}{DayofMonthSuffix}, {Year}" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><i class="ph-clock-fill"></i></a>
- <a title="copy link to post" id="copybutton" data-clipboard-text="{Permalink}"><i class="ph-copy-fill"></i></a>
- </div><!-- .bottominfo-right -->
- </div><!-- .bottominfo -->
- </div><!-- .bottominfo-wrap -->
- {/block:Date}
- </article> <!-- POSTS END -->
- <!--- PERMALINK INFO --->
- {block:Date}
- {block:PermalinkPage}
- <div class="perma-page">
- {block:NotReblog}<li><i class="ph-map-pin-fill"></i><span>original post</span></li>{/block:NotReblog}
- {block:RebloggedFrom}<li><i class="ph-map-pin-fill"></i><span>originally posted by <a href="{ReblogRootURL}">@{ReblogRootName}</a></span></li>{/block:RebloggedFrom}
- {block:RebloggedFrom}<li><i class="ph-arrow-counter-clockwise-bold"></i><span>reblogged from <a href="{ReblogParentURL}">@{ReblogParentName}</a></span></li>{/block:RebloggedFrom}
- <li><i class="ph-clock-fill"></i><span>posted <a title="view day page" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayofWeek}, {Month} {DayofMonth}{DayofMonthSuffix}</a> at {12hour}{ampm}</span></li>
- </div>
- {/block:PermalinkPage}
- {/block:Date}
- <!--- POST NOTES --->
- {block:PermalinkPage}{block:Date}
- {block:NoteCount}{block:PostNotes}
- <div class="notes">
- <div class="notes-title">
- <div class="notes-titleicon"><i class="ph-music-note-fill"></i></div>
- <span>{NoteCountWithLabel}</span>
- </div>
- <div class="notes-container">{PostNotes-64}</div>
- </div>
- {/block:PostNotes}{/block:NoteCount}
- {/block:Date}{/block:PermalinkPage}
- {/block:Posts}
- <!--- PAGINATION --->
- {block:Pagination}
- <article class="pagination">
- <div class="pagination-buttons">
- {block:PreviousPage}
- <div class="pagination-btn"><a title="go back" href="{previouspage}"><i class="ph-caret-left-bold"></i></a></div>
- {/block:PreviousPage}
- <div class="pagination-btn nopgn {block:PreviousPage}yespgn{/block:PreviousPage}"><a><i class="ph-caret-left-bold"></i></a></div>
- </div>
- {block:JumpPagination length="5"}
- {block:CurrentPage}
- <div title="current page" class="currentpg">{PageNumber}</div>
- {/block:CurrentPage}
- {block:JumpPage}
- <div class="jump-btn"><a title="jump to page {PageNumber}" class="jump_page" href="{URL}">{PageNumber}</a></div>
- {/block:JumpPage}
- {/block:JumpPagination}
- <div class="pagination-buttons">
- {block:NextPage}
- <div class="pagination-btn"><a title="go forward" href="{nextpage}"><i class="ph-caret-right-bold"></i></a></div>
- {/block:NextPage}
- <div {block:NextPage}style="display:none;"{/block:NextPage} class="pagination-btn nopgn"><a><i class="ph-caret-right-bold"></i></a></div>
- </div>
- </article>
- {/block:Pagination}
- </section> <!-- POSTS CONTAINER ENDS -->
- <!---- BOTTOM BUTTONS ----->
- <div class="bbuttons">
- <div id="totop"><a title="back to top" href="#top" target="_self"><i class="ph-caret-up-bold"></i></a></div>
- <!--- CREDIT: DO NOT TOUCH --->
- <div class="credit">
- <a title="katara theme by sage" href="https://demontimes.tumblr.com"><i class="ph-ghost-fill"></i></a>
- </div>
- </div>
- </main> <!-- MAIN CONTAINER ENDS -->
- <script>
- // music player
- {block:ifMusicPlayer}
- const musicContainer = document.querySelector('.music-container');
- const playBtn = document.querySelector('#play');
- const audio = document.querySelector('#audio');
- const title = document.querySelector('#title');
- const cover = document.querySelector('#cover');
- function playSong() {
- musicContainer.classList.add('play');
- playBtn.querySelector('#play i').classList.remove('ph-play-fill');
- playBtn.querySelector('#play i').classList.add('ph-pause-fill');
- audio.play();
- }
- function pauseSong() {
- musicContainer.classList.remove('play')
- playBtn.querySelector('#play i').classList.add('ph-play-fill')
- playBtn.querySelector('#play i').classList.remove('ph-pause-fill')
- audio.pause()
- }
- // event listeners
- playBtn.addEventListener('click', () => {
- const isPlaying = musicContainer.classList.contains('play');
- if (isPlaying) {
- pauseSong();
- } else {
- playSong();
- }
- });
- document.getElementById("audio").loop = true;
- {/block:ifMusicPlayer}
- /// photoset
- $(document).ready(function(){
- $('.photo-slideshow').pxuPhotoset({
- lightbox: true,
- rounded: 'corners',
- gutter: '4px',
- borderRadius: '{select:Corners}',
- photoset: '.photo-slideshow',
- photoWrap: '.photo-data',
- photo: '.pxu-photo'
- });
- });
- // tooltips
- tippy('[title]', {
- theme: 'custom',
- arrow: false,
- followCursor: true,
- delay: 100,
- placement: 'bottom',
- offset: "40, 10",
- zIndex: 9999999999,
- maxWidth: 400,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- // notes
- $('article').find('.notecount').each(function(){
- var n = $(this).html().split(' ')[0].replace(/,/g, '');
- if (n > 999) {
- n = Math.floor(n / 100) / 10;
- $(this).text(n + 'k notes');
- }
- });
- // videos
- $(document).ready(function() {
- flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
- });
- // music button
- $(document).ready(function(){
- $(".audio-container").hide();
- $('.music-button').click(function(){
- $(".audio-container").slideToggle(0);
- $('body').toggleClass('music-clicked');
- });
- });
- // updates button
- $(document).ready(function(){
- $(".updates-container").hide();
- $('.updates-button').click(function(){
- $(".updates-container").slideToggle(0);
- $('body').toggleClass('updates-clicked');
- });
- });
- // sidebar buttons
- $(document).ready(function(){
- $("nav").hide();
- $('.sb-nav').click(function(){
- $("nav").slideToggle(0);
- $('body').toggleClass('nav-clicked');
- });
- });
- $(document).ready(function(){
- $(".searchwrap").hide();
- $('.sb-search i').click(function(){
- $(".searchwrap").slideToggle(0);
- $('body').toggleClass('search-clicked');
- });
- });
- // searchbar
- $(document).ready(function(){
- $('.search').submit(function(event){
- var value = $('input:first').val();
- location.replace('http://{Name}.tumblr.com/search/' + value);
- });
- });
- // scroll to top
- $(document).ready(function(){
- $('#totop').click(function(){
- $('html, body').animate({scrollTop : 0},800);
- return false;
- });
- });
- var mybutton = document.getElementById("totop");
- window.onscroll = function() {scrollFunction()};
- function scrollFunction() {
- if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
- mybutton.style.display = "flex";
- } else {
- mybutton.style.display = "none";
- }
- }
- // toggle tags
- {block:ifClickTags}
- $(document).ready(function(){
- $('.tags').hide();
- $('.clicktagsbutton').click(function() {
- $(this).closest('article').find('.tags').slideToggle(0);
- $(this).toggleClass('tags-clicked');
- $(this).find(".bottominfo").toggleClass('tags-clicked');
- return false;
- });
- });
- {/block:ifClickTags}
- // tumblr controls
- $(document).ready(function(){
- $('#controlsbutton').click(function(){
- $('body').toggleClass('controlsclick');
- });
- });
- // responsive sidebar
- $(document).ready(function(){
- $('.sidebar-button').click(function(){
- $('body').toggleClass('sidebar-click');
- });
- });
- // day/night mode
- const toggle = document.getElementById("theme-toggle");
- toggle.onclick = function () {
- // add class to html and make transition snappy
- document.documentElement.classList.add("theme-transition");
- // alright lets retrive the info from data-theme
- let currentTheme = document.documentElement.getAttribute("data-theme");
- // if it's dark already, let's go into the light
- let targetTheme = "light";
- // but if it is light let's toggle dark mode
- if (currentTheme === "light") {
- targetTheme = "dark";
- }
- // ok now that theme has been toggled, get rid of snappy transition
- window.setTimeout(function () {
- document.documentElement.classList.remove("theme-transition");
- }, 50);
- // we're going to save our theme preference now
- document.documentElement.setAttribute("data-theme", targetTheme);
- localStorage.setItem("theme", targetTheme);
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment