API tools faq
paste
sexycullen

minha update tab

sexycullen
Aug 26th, 2020 (edited)
174
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.23 KB | None | 0 0
raw download clone embed print report
  1. /* maziekeen's theme 214 - UPDATE TAB CSS PART (dark)
  2. accordion (update toggle) by codepen.io/vinsongrant/pen/qbGKed
  3.  
  4. GUIDE HOW TO CUSTOMIZE
  5.  
  6.  
  7. ----------------------------
  8.  
  9. ALL THE COLORS
  10.  
  11.  
  12. - GENERAL COLOR
  13. body text, italic, bold, links: will match your color theme
  14.  
  15. - THE 'PLUS' ICON before the title
  16. find the class name: .update-title:after, .update-title:before {
  17. change the color in: background-color: #8be9fd
  18.  
  19. - TITLE USED INSIDE THE CONTENT
  20. find the class name: .update-inside-title {
  21. change the color in: color:#6272a4
  22.  
  23. - EFFECT ON THE TITLE ONCE YOU CLICKED
  24. find the class name: .update-toggle:checked + .update-title, .update-toggle:checked + .update-title a {
  25. change the color in: color:#8be9fd
  26.  
  27. - BACKGROUND COLOR OF THE CONTENT
  28. find the class name: .update-toggle:checked + .update-title + .update-content {
  29. change the color in: background:#282a36 (to change the text color inside, just add color:#b6bad1;)
  30.  
  31. - BORDERS
  32. find the class name: .update-toggle:checked + .update-title + .update-content {
  33. change the color in: outline:1px solid #343745
  34. you also need to change the color to the same in .update-content {
  35.  
  36.  
  37.  
  38. maziekeen's theme 214 - UPDATE TAB CSS PART */
  39.  
  40.  
  41. .update-container {
  42. max-width:240px; /* same width of .update-toggle:checked + .update-title + .update-content */
  43. top:65px;
  44. left:25px;
  45. position:fixed;
  46. margin: 5px auto 0px;
  47. box-sizing:border-box;
  48. z-index:11;
  49. background-color:transparent;
  50. }
  51.  
  52. .update-toggle {
  53. display: none;
  54. }
  55.  
  56. .update-option { /* this is each option you add */
  57. position: relative;
  58. margin-bottom:5px;
  59. }
  60.  
  61.  
  62. .update-option, .update-title label a {
  63. display: inline-block;
  64. text-align: left;
  65. padding-left:15px;
  66. }
  67.  
  68. .update-button {
  69. display:block;
  70. border:none;
  71. padding: 7px 10px;
  72. margin:7px 0px;
  73. background:var(--sidebarBackgroundColor);
  74. color:var(--bodyLinkColor);
  75. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  76. }
  77.  
  78. .update-button a {
  79. font-weight:bold;
  80. }
  81.  
  82.  
  83. .update-title { /* title of the option */
  84. cursor:pointer;
  85. font-style:italic;
  86. }
  87.  
  88. .update-title,
  89. .content {
  90. backface-visibility: hidden;
  91. transform: translateZ(0);
  92. transition: all 0.2s;
  93. }
  94.  
  95. .update-title:after, .update-title:before { /* the plus "icon" */
  96. content: "";
  97. position: absolute;
  98. left: 5px;
  99. top:4.2px;
  100. width: 2px;
  101. height: 8px;
  102. background-color:var(--bodyLinkColor);
  103. transition: all 0.2s;
  104. cursor:auto;
  105. }
  106.  
  107. .update-title:after {
  108. transform: rotate(90deg);
  109. }
  110.  
  111. .update-inside-title { /* title used inside the content */
  112. font-weight: bold;
  113. color:var(--boldColor);;
  114. margin:5px 0px;
  115. }
  116.  
  117. .update-inside-title a {
  118. font-weight: bold;
  119. }
  120.  
  121. .update-content { /* content that appears when you click */
  122. max-height: 0;
  123. padding:0px 5px;
  124. outline:0px solid #eaeaea; /* change the color to the same on .update-toggle:checked + .update-title + .update-content */
  125. overflow: hidden;
  126. transition:all 0.3s;
  127. }
  128.  
  129. .update-content li {
  130. line-height:13px;
  131. margin-bottom:4px;
  132. }
  133.  
  134. .update-toggle:checked + .update-title, .update-toggle:checked + .update-title a { /* effect on title once you clicked */
  135. font-weight:bold;
  136. color:#f5b03;
  137. }
  138.  
  139. .update-toggle:checked + .update-title + .update-content { /* effect on the content once you clicked */
  140. outline:1px solid #eaeaea;
  141. background:#fbfbfb;
  142. text-align:left;
  143. max-height: 100vh;
  144. width:240px; /* size of the content, adjust as you wish but also change the max-width in .update-container */
  145. padding:0px 5px;
  146. margin: 5px 0px 0px;
  147. z-index:1;
  148. transition:all 0.3s;
  149. }
  150.  
  151. .update-toggle:checked + .update-title:before {
  152. transform: rotate(90deg) !important;
  153. }
  154. /* maziekeen's theme 214 - UPDATE TAB CSS PART (dark) */
  155.  
  156.  
  157.  
  158.  
  159.  
  160. /* tylergaciaposey's theme 203
  161. css part */
  162.  
  163.  
  164. .nav_container {
  165. width:100%;
  166. overflow: hidden;
  167. margin:0 auto;
  168. padding:2px;
  169. }
  170.  
  171.  
  172. .box_left {
  173. width:50%;
  174. overflow: hidden;
  175. float:left;
  176. padding:10px;
  177. box-sizing: border-box;
  178.  
  179. }
  180.  
  181. .box_right {
  182. width:50%;
  183. overflow: hidden;
  184. float:right;
  185. padding:10px;
  186. box-sizing: border-box;
  187. }
  188.  
  189. .nav_title {
  190. font-weight:bold;
  191. color:var(--boldColor);
  192. margin:2px 0 3px;
  193. padding:0 0 5px;
  194. }
  195.  
  196.  
  197. .nav_title:after {
  198. width:100px;
  199. content:'';
  200. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  201. display:block;
  202. margin:5px 0;
  203. }
  204.  
  205.  
  206. .nav_list {
  207. margin:0 0 2px 5px;
  208. }
  209.  
  210.  
  211. .nav_list::before {
  212. content: '\e09a';
  213. font-family:'saturnicons';
  214. font-size:calc(var(--bodyFontSize) - 50%);
  215. bottom:0.5px;
  216. margin-right:7px;
  217. display:inline-block;
  218. vertical-align:middle;
  219. position:relative;
  220. color: var(--bodyLinkColor);
  221. }
  222.  
  223. .nav_list:hover:before {
  224. color:var(--bodyLinkHoverColor);
  225. }
  226.  
  227.  
  228. .nav_paragraph {
  229. margin:7px 0;
  230. }
  231.  
  232.  
  233. .nav_separator {
  234. clear:both;
  235. width:100%;
  236. display:block;
  237. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  238. margin:25px 0;
  239. padding:0 0 25px;
  240. }
  241.  
  242.  
  243. /* tags aka links lis */
  244.  
  245. .nav_tags_title1 {
  246. font-weight:bold;
  247. margin:2px 10px 3px;
  248. padding:0 0 5px;
  249. }
  250.  
  251. .nav_tags_title1:after {
  252. width:100px;
  253. content:'';
  254. border-bottom:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  255. display:block;
  256. margin:5px 0;
  257. }
  258.  
  259.  
  260. .nav_tags_title {
  261. margin:3px 0 3px;
  262. padding:0 0 5px;
  263. font-weight:bold;
  264. color:var(--boldColor);
  265. }
  266.  
  267. .nav_tags_title:after {
  268. content:'';
  269. border-bottom:0px dotted #e2e2e2;
  270. }
  271.  
  272. .nav_tags_box {
  273. height:180px;
  274. width:33.3%;
  275. margin-bottom:25px;
  276. overflow: hidden;
  277. float:left;
  278. padding:10px;
  279. box-sizing: border-box;
  280. overflow-y:auto;
  281. overflow-x:hidden;
  282. }
  283.  
  284.  
  285. .nav_tags_list {
  286. margin:0 0 2px 5px;
  287. }
  288.  
  289. .nav_tags_list::before {
  290. content: '\e09a';
  291. font-family:'saturnicons';
  292. font-size:calc(var(--bodyFontSize) - 50%);
  293. bottom:0.5px;
  294. margin-right:7px;
  295. display:inline-block;
  296. vertical-align:middle;
  297. position:relative;
  298. color: var(--bodyLinkColor);
  299. }
  300.  
  301. .nav_tags_list:hover:before {
  302. color:var(--bodyLinkHoverColor);
  303. }
  304.  
  305. .mcredit {
  306. float:right;
  307. right:5px;
  308. bottom:18px;
  309. padding:5px;
  310. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  311. background-color: #fff;
  312. }
  313.  
  314.  
  315. .mcredit a {
  316. text-transform:lowercase;
  317. text-align:center;
  318. font-size:10px;
  319. font-family:'Open Sans', Calibri, sans-serif;
  320. padding:3px;
  321. font-style:normal;
  322. padding:3px;
  323. -moz-transition-duration:0.5s;
  324. -webkit-transition-duration:0.5s;
  325. -o-transition-duration:0.5s;
  326. }
  327.  
  328.  
  329. /* tylergaciaposey's theme 203
  330. css part */
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343.  
  344. <!-- maziekeen's theme 214 - UPDATE TAB HTML PART -->
  345.  
  346. <div class="update-container"> <!-- start of the update toggle / do not remove -->
  347.  
  348. <div class="update-option"> <!-- copy from here to add a new option -->
  349. <input type="checkbox" id="update-toggle1" class="update-toggle" />
  350. <label class="update-title" for="update-toggle1"><a>things to do  </a></label>
  351. <div class="update-content"> <!-- content inside the update, edit as you wish using html markup / do not remove -->
  352. <ul>
  353. <div class="update-inside-title">psds</div>
  354. <li>
  355. <a href="https://maziekeen.tumblr.com/post/619230040934236160"><s>psd tutorial (two parts)</s></a>
  356. </li>
  357. <li>for photoshoots</li>
  358. </ul>
  359. <ul>
  360. <div class="update-inside-title">theme</div>
  361. <li>new navigation/faq/tags page</li>
  362. <li><a href="https://maziekeen.tumblr.com/post/625181941431500800/"><s>make update tab</s></a></li>
  363. <li>all in one page</li>
  364. </ul>
  365. </div> <!-- end of content inside the update / do not remove -->
  366. </div> <!-- end of the option -->
  367.  
  368. <div class="update-option"> <!-- copy from here to add a new option -->
  369. <input type="checkbox" id="update-toggle2" class="update-toggle" />
  370. <label class="update-title" for="update-toggle2"><a>watch list  </a></label>
  371. <div class="update-content"> <!-- content inside the update, edit as you wish using html markup / do not remove -->
  372. <ul>
  373. <div class="update-inside-title">watching</div>
  374. <li>wynonna earp s04 </li>
  375. <li>she ra s03</li>
  376. <li>atla s02 </li>
  377. <li>roswell new mexico s01 </li>
  378. <li>doctor who s03</li>
  379. </ul>
  380. <ul>
  381. <div class="update-inside-title">start</div>
  382. <li>lucifer s05</li>
  383. <li>gatunas s02</li>
  384. <li>legends of tomorrow s05</li>
  385. </ul>
  386. <ul>
  387. <div class="update-inside-title">continue/finish</div>
  388. <li>arrow s07</li>
  389. <li>supergirl s04</li>
  390. <li>the flash s05</li>
  391. </ul>
  392. </div> <!-- end of content inside the update / do not remove -->
  393. </div> <!-- end of the option -->
  394.  
  395. <div class="update-option"> <!-- copy from here to add a new option -->
  396. <button class="update-button"><a href="http://dailyresources.tumblr.com/" title="check out my resources blog!">@dailyresources</a></button>
  397. <button class="update-button"><a href="https://ko-fi.com/luciane" title="if you like my content and would like to support me, i'd be very grateful! (◡‿◡✿)">buy me a coffee?</a></button>
  398. </div> <!-- end of the option -->
  399.  
  400. </div> <!-- end of the update toggle / do not remove -->
  401.  
  402. <!-- maziekeen's theme 214 - UPDATE TAB HTML PART -->
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!