diff --git a/17-Strongest b/17-Strongest index 2accd5d..f3e4478 100644 --- a/17-Strongest +++ b/17-Strongest @@ -4,7 +4,10 @@ Made by glenthemes Initial release: 2016/06/09 Major code update: 2017/05/03 -Last updated: 2023/05/06 +Last updated: 2023/07/30 + +What's new: +✱ NPF audio post support TERMS OF USE: 1) Do not remove the theme credit. @@ -63,7 +66,7 @@ $(document).ready(function(){ $('.photo-slideshow').pxuPhotoset({ lightbox: true, rounded: false, - gutter: '{text:photoset gutter width}px', + gutter: '{select:photos spacing}', borderRadius: '0px', photoset: '.photo-slideshow', photoWrap: '.photo-data', @@ -82,11 +85,7 @@ $(document).ready(function(){ - - -{block:ifshowmusicplayer} - -{/block:ifshowmusicplayer} + @@ -99,7 +98,7 @@ $(document).ready(function(){ @@ -130,16 +129,16 @@ $(document).ready(function(){ - + + + + + + + + + + + + + + + @@ -186,8 +256,89 @@ $(document).ready(function(){ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + @@ -198,26 +349,15 @@ $(document).ready(function(){ - - - - - - - + - - - - - - - - - + + + + @@ -226,6 +366,9 @@ $(document).ready(function(){ + + + @@ -253,13 +396,13 @@ $(document).ready(function(){ margin: 26px 9px 0px 15px; background-color: {color:post}; font-family: karla; - font-size: calc({text:font size}px - 3px); + font-size: calc({select:font size} - 3px); letter-spacing: 1px; text-transform: uppercase; color: {color:text}; border:0.5px solid rgba({RGBcolor:text},0.2); z-index:99999999999999999999999999998!important; - max-width: calc({text:post width}px * 1.25); + max-width: calc({select:post width} * 1.25); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; @@ -321,7 +464,7 @@ color:{color:text}; cursor:normal; font-family:karla; line-height:16px; -font-size:{text:font size}px; +font-size:{select:font size}; text-align:left; } @@ -349,8 +492,8 @@ color: {color:link hover}; img {opacity:1;text-decoration:none;} h1 { -padding:0px {text:post padding}px; -font-size:calc({text:font size}px + 3px); +padding:0px {select:post padding}; +font-size:calc({select:font size} + 3px); text-transform:uppercase; letter-spacing:1.5px; text-align:center; @@ -360,8 +503,8 @@ line-height:1.4; h1 .lnr { font-weight:bold; -font-size:calc({text:font size}px + 1px); -letter-spacing:calc(-{text:font size}px + 5px); +font-size:calc({select:font size} + 1px); +letter-spacing:calc(-{select:font size} + 5px); } b, strong, .strong { @@ -384,29 +527,29 @@ position:absolute; top:0;left:0; {block:ifshowsidebarboxes} -margin-left:calc({text:left sidebar width}px + 1px + {text:sidebar boxes width}px + ({text:post margin}px * 1.35)); +margin-left:calc({select:sidebar 1 width} + 1px + {select:sidebar 2 width} + ({select:post spacing} * 1.35)); {/block:ifshowsidebarboxes} {block:ifnotshowsidebarboxes} -margin-left:calc({text:left sidebar width}px + 1px + ({text:post margin}px * 1.35)); +margin-left:calc({select:sidebar 1 width} + 1px + ({select:post spacing} * 1.35)); {/block:ifnotshowsidebarboxes} -margin-top:calc({text:post margin}px * 1.5); -margin-bottom:calc(({text:post margin}px * 1.5) - {text:post margin}px); +margin-top:calc({select:post spacing} * 1.5); +margin-bottom:calc(({select:post spacing} * 1.5) - {select:post spacing}); -width:{text:post width}px; +width:{select:post width}; } /*--------------------POSTS--------------------*/ .posts { position:relative; {block:IndexPage} -margin-bottom:{text:post margin}px; +margin-bottom:{select:post spacing}; {/block:IndexPage} -width:{text:post width}px; +width:{select:post width}; min-width:250px; max-width:540px; -padding:{text:post padding}px; +padding:{select:post padding}; background-color:{color:post}; } @@ -425,7 +568,7 @@ background-color:{color:post}; .photos, .photos img { position:relative; overflow:hidden; - width:{text:post width}px; + width:{select:post width}; {block:IndexPage} {block:ifphotofade} @@ -489,7 +632,7 @@ background-color:{color:post}; position:fixed; top:0;left:0; margin-top:0px;margin-left:0px; - width:{text:left sidebar width}px; + width:{select:sidebar 1 width}; min-width:155px; height:100vh; background-color:{color:sidebar background}; @@ -502,7 +645,7 @@ background-color:{color:post}; display:table-cell;vertical-align:middle;} #potato { - max-width:calc(({text:left sidebar width}px - 35px) + 12px); + max-width:calc(({select:sidebar 1 width} - 35px) + 12px); margin:auto auto 12px auto; } @@ -523,16 +666,16 @@ background-color:{color:post}; } .lettuce { - width:calc({text:left sidebar width}px - 35px); - height:calc({text:left sidebar width}px - 35px); + width:calc({select:sidebar 1 width} - 35px); + height:calc({select:sidebar 1 width} - 35px); padding:8px 0px; border-top:1px solid rgba({RGBcolor:sidebar links text},0.2); } .cream { margin:0 auto; - width:calc({text:left sidebar width}px - 35px); - font-size:calc({text:font size}px - 3px); + width:calc({select:sidebar 1 width} - 35px); + font-size:calc({select:font size} - 3px); text-transform:uppercase; letter-spacing:0.5px; color:rgba({RGBcolor:sidebar links text},0.85); @@ -543,12 +686,12 @@ background-color:{color:post}; .roe a { display:inline-block; - width:calc(({text:left sidebar width}px - 35px) - 10px); + width:calc(({select:sidebar 1 width} - 35px) - 10px); padding:1px 5px; margin:3px 0px; background-color:{color:sidebar links background}; color:rgba({RGBcolor:sidebar links text},0.85); - font-size:calc({text:font size}px - 2.5px); + font-size:calc({select:font size} - 2.5px); text-transform:uppercase; letter-spacing:1px; border-top:1px solid transparent; @@ -566,8 +709,8 @@ background-color:{color:post}; position:fixed; top:0;left:0; margin-top:0px; - margin-left:calc({text:left sidebar width}px + 1px); - width:{text:sidebar boxes width}px; + margin-left:calc({select:sidebar 1 width} + 1px); + width:{select:sidebar 2 width}; min-width:155px; height:100vh; text-align:center; @@ -584,12 +727,9 @@ background-color:{color:post}; .overlay { display:table; - opacity:{text:sidebar overlay opacity}; - background-color:rgba({RGBcolor:sidebar overlay color},{text:sidebar overlay opacity}); - -webkit-transition: all .7s ease; - -moz-transition: all .7s ease; - -o-transition: all .7s ease; - transition: all .7s ease; + opacity:{select:sidebar 2 transparency}; + background-color:rgba({RGBcolor:sidebar overlay color},{select:sidebar 2 transparency}); + transition: background-color .7s ease-in-out, opacity .7s ease-in-out; } #xiaolongbao:hover .overlay {opacity:1;} @@ -598,14 +738,14 @@ background-color:{color:post}; #salt, #pepper { margin:0 auto; - width:calc({text:sidebar boxes width}px / 1.3); + width:calc({select:sidebar 2 width} / 1.3); background-color:{color:sidebar background}; color:{color:sidebar text}; } #salt { text-transform:uppercase; - font-size:calc({text:font size}px - 2px); + font-size:calc({select:font size} - 2px); letter-spacing:2px; border-bottom:1px solid rgba({RGBcolor:sidebar text},0.2); padding:5px 10px; @@ -613,28 +753,33 @@ background-color:{color:post}; #pepper { margin-top:5px; - margin-bottom:{text:sidebar boxes bottom margin}px; - font-size:calc({text:font size}px - 1px); + margin-bottom:{select:sidebar 2 boxes spacing}; + font-size:calc({select:font size} - 1px); padding:10px; } #pepper:last-child {margin-bottom:0px;} +#pepper img { + max-width:100%; +} + /*--------------------PERMALINK--------------------*/ #tags{ +margin-top:1em; letter-spacing: 1px; text-transform:uppercase; text-align:left; color:{color:permalink text}; -font-size:calc({text:font size}px - 2px); +font-size:calc({select:font size} - 2px); background-color:{color:permalink background}; -padding:calc({text:font size}px - 6px) calc({text:font size}px - 6px); +padding:calc({select:font size} - 6px) calc({select:font size} - 6px); } #tags .lnr{ font-weight:bold; margin:0px 4px; -font-size:calc({text:font size}px - 2px - 1px); +font-size:calc({select:font size} - 2px - 1px); color:inherit; } @@ -652,9 +797,9 @@ color:{color:permalink text hover}; text-transform:uppercase; letter-spacing:1px; text-align:right; -font-size:calc({text:font size}px - 3px); +font-size:calc({select:font size} - 3px); line-height:1.5; -padding:{text:post padding}px 0px; +padding:{select:post padding} 0px; } .tagsin a { @@ -668,10 +813,13 @@ color:rgba({RGBcolor:link},0.8); /*--------------------POST NOTES--------------------*/ ol.notes { -padding:0px; -margin:calc({text:post margin}px - 10px) 0px; +padding:{select:post padding}; +margin:calc({select:post spacing} - 10px) 0px; list-style-type:none; -max-width:{text:post width}px; +width:{select:post width}; +max-width:{select:post width}; +background:rgba({RGBcolor:post},0.8); +backdrop-filter:blur(2px) } ol.notes li.note { @@ -711,7 +859,7 @@ text-decoration:none; box-shadow:none !important; border-radius:0px !important; max-width:none; - padding:{text:post padding}px !important; + padding:{select:post padding} !important; background:{color:post} !important; border:1px solid rgba({RGBcolor:text},0.2) !important; } @@ -723,7 +871,7 @@ text-decoration:none; /*---------------------------QUOTES---------------------------*/ .quote { -margin-top:{text:post padding}px; +margin-top:{select:post padding}; text-transform:uppercase; font-size:12px; font-weight:bold; @@ -736,12 +884,12 @@ margin-top:10px; } /*---------------------------CHATS---------------------------*/ -.chat {list-style:none;margin-bottom:calc({text:post padding}px / 2);} +.chat {list-style:none;margin-bottom:calc({select:post padding} / 2);} .linee.odd { background:{color:chat odd}; margin-bottom:0px; -padding:{text:post padding}px; +padding:{select:post padding}; list-style:none; font-size:inherit; } @@ -749,7 +897,7 @@ font-size:inherit; .linee.even { background:{color:chat even}; margin-bottom:0px; -padding:{text:post padding}px; +padding:{select:post padding}; list-style:none; font-size:inherit; } @@ -816,7 +964,7 @@ height:0px; /*---------------------------VIDEO---------------------------*/ .tumblr_video_container { - width:{text:post width}px!important; + width:{select:post width}!important; height:auto!important; max-height:540px!important; overflow:hidden!important; @@ -847,7 +995,7 @@ height:0px; /*---------------------------PAGINATION---------------------------*/ .pagination { margin:10px auto auto auto; - width:calc({text:left sidebar width}px - 35px); + width:calc({select:sidebar 1 width} - 35px); text-align:center; border-top:1px solid rgba({RGBcolor:sidebar links text},0.2); } @@ -888,7 +1036,7 @@ height:0px; position: fixed; z-index: 999999; top: 15px; - left:calc({text:left sidebar width}px + 15px); + left:calc({select:sidebar 1 width} + 15px); display:flex; -webkit-transition:all .7s ease; -moz-transition:all .7s ease; @@ -926,45 +1074,35 @@ height:0px; transition-delay:0s; -webkit-transition-delay:0s; } + +[music-player]{ + padding:10px 12px; + opacity:0; + background:{color:music player color}; + border-radius:4px; + transition:opacity .4s; +} -.play { - display:flex; - min-width:124px; - height:31px; - text-align: left; - padding:0px 10px; - background: {color:music player background}; /* player background */ - border-left: 3px solid {color:music player color}; /* player border */ - color:{color:music player text}; - opacity: 0; - -webkit-transition: all .4s ease; - -moz-transition: all .4s ease; - -o-transition: all .4s ease; +[music-player] .player-text { + line-height:1; + margin-top:calc({select:font size} * 0.15); +} + +[music-player] [music-btn], +[music-player] .player-text { + font-family:"courier prime"; + font-size:calc({select:font size} - 1.5px); + color:{color:music player color}; + background:none; + filter:invert(1) grayscale(100%); + opacity:0.9; +} + +#musicplayer:hover [music-player] { + opacity:1; transition-delay: .4s; -webkit-transition-delay: .4s; } - -.music-controls, .music-controls > * { - user-select:none; - -webkit-user-select:none; - width:11px; - font-size:11px; - cursor:pointer; -} - -.pausee {display:none;} - -.playtext { - margin-left:8px; - font-family:courier new; - font-size:9px; -} - -#musicplayer:hover .play { - opacity:1; - transition-delay: .6s; - -webkit-transition-delay: .6s; -} {/block:ifshowmusicplayer} @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @@ -1000,20 +1138,26 @@ animation-fill-mode:forwards; {block:ifshowmusicplayer}
- - -
+ + + +
+
-
-
-
►
-
❚❚
+ +
+
+
+
-
{text:music player song name}
-
- -
+ + + {block:ifmusicplayersongname} +
{text:music player song name}
+ {/block:ifmusicplayersongname} +
+ {/block:ifshowmusicplayer}