SHARE
TWEET

[FTU] Nebula Code - Blue

Zephyrhowl Jul 15th, 2017 (edited) 164 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [style]
  2. /* [nobbcode]This code was created by Type Null. Free to use.
  3.  
  4. Please ONLY edit the CSS if you know what you are doing, and please DO NOT touch any CSS that is not a Less variable!
  5.  
  6. 1. How to change the code colors:
  7.   Look at the "Less variables" section, find the color corresponding to the area you want to change, and change the value after # to a hex value of the color you want to change it to. (ex. "#000;" for black)
  8. 2. How to change the banner image:
  9.   Find "[img]https://i.imgur.com/0PJXk5p.png[/img]" below and replace the URL within [img][/img] tags with the URL of the image you want to use. That's it! Note: Remember to type "https" instead of "http" or the image will not work.
  10. 3. How to add more tabs:
  11.   Find the styleclass named "tabbed_interface horizontal" and look at the [ul][li][/li][/ul] tags. Each [li][/li] represents 1 tab, with the text in between becoming the name of the tab. (ex. [li]Tab title here[/li]) You can just keep adding [li][/li] tags to create more tabs. Next, look for the line "][sc=tab]tab content 7[/sc][". You can copy-paste this line onto a new line and remove "tab content 7". The text in between [sc=tab][/sc] becomes the content of the new tab. (ex. [sc=tab]Tab content here[/sc]) You can do this as many times as you like.
  12.   IMPORTANT: Leave the extra "[]" brackets intact! Otherwise you will create unnecessary space between tabs.
  13.  
  14. Note: The content background image is semi-transparent! Any color you enter for @bgColor2 will adjust with the image.[/nobbcode] */
  15.  
  16. /* Less variables */
  17.  
  18. @fontColor1:#bad5f2; /* used for link hover color, tooltip content font color, tab font color 2 */
  19. @fontColor2:#0d1014; /* used for panel hover effect, tab font color 1 */
  20. @fontColor3:#3b667b; /* progress bar font color, table font color, h1/h2/h3/panel content font color */
  21. @fontColor4:#e2f1ff; /* main font color */
  22. @bgColor1:#0a131b; /* main background color */
  23. @bgColor2:#012938; /* content background color */
  24. @bgColor3:#040f19; /* tooltip content background, progress bar background 2, table background 2, panel content background */
  25. @bgImage:url("https://i.imgur.com/QOopdeN.png"); /* to change this, replace the image URL - for no image, type "none;" ex. @bgImage:none; */
  26. @borderColor1:#0a2535; /* progress bar background 1, table background 1, main border color */
  27. @borderColor2:#01080c; /* progress bar border, h1/h2/h3 borders, table borders panel borders, banner border, content border */
  28. @tabColor1:#afdde6; /* tab background color 1 */
  29. @tabColor2:#254259; /* panel header font color, tab background color 2 */
  30. @tabColor3:#659fab; /* tab hover background 1 */
  31. @tabColor4:#0a2535; /* tab hover background 2 */
  32. @headerColor1:#659fab; /* panel header hover background, h1/h2/h3 background */
  33. @headerColor2:#659fab; /* panel header background */
  34.  
  35. /* bbcode colors, to use the same as @fontColor4 use "inherit;" ex. @linkColor:inherit; */
  36.  
  37. @linkColor:#89d4ca; /* for the link hover color, see @fontColor1 */
  38. @boldColor:#f3bf92;
  39. @italicColor:#a98ff3;
  40. @underlineColor:#a9e8e6;
  41. @tooltipColor:#89d4ca; /* changes bottom border color only */
  42.  
  43. /* "main" selectors */
  44.  
  45. a { text-decoration:none; color:@linkColor; text-shadow:-10px 0px 3px transparent;
  46.   transition: all 0.3s ease-in;
  47.   -webkit-transition: all 0.3s ease-in;
  48.   -moz-transition: all 0.3s ease-in;
  49.   -o-transition: all 0.3s ease-in;
  50.   }
  51. a:hover { color:@fontColor1; text-shadow:0px 0px 3px @fontColor1; }
  52. b { color:@boldColor; text-shadow:2px 2px 2px #000; }
  53. i { color:@italicColor; text-shadow:2px 2px 2px #000; }
  54. u { color:@underlineColor; text-shadow:2px 2px 2px #000; }
  55. del { text-shadow:2px 2px 2px #000; }
  56. .bbcode_tooltip { text-shadow:2px 2px 2px #000; border-bottom:1px dashed @tooltipColor; }
  57. .tooltip_content { background-color:@bgColor3; color:@fontColor1; font-family:helvetica, arial, sans-serif; font-size:12px; line-height:12px; border:1px solid @borderColor2; }
  58. .expbar { background-color:@borderColor1; border-color:@borderColor2; min-height:18px; }
  59. .expbar div { background-color:@bgColor3; border:1px dotted @borderColor2; }
  60. .expbar span { font-weight:normal; color:@fontColor3; text-shadow:2px 2px 2px #000; }
  61. h1, h2, h3 { text-transform:lowercase; font-variant:small-caps; font-weight:normal; text-align:left; padding:5px; padding-left:20px; background-color:@headerColor1; color:@tabColor2; margin-top:5px; margin-bottom:0px; line-height:15px; border-bottom:3px double @borderColor2; }
  62. table, td, th { border:none; color:@fontColor3; }
  63. table { width:100%; border:1px solid @borderColor2; }
  64. td, th { border:1px dotted @borderColor2; text-align:center; padding:10px; text-shadow:2px 2px 2px #000; }
  65. th { background-color:@bgColor3; }
  66. td { background-color:@borderColor1; }
  67. .panel { box-shadow:none; background-color:@bgColor3; border-color:@borderColor2; border-radius:5px;
  68.   &>h3 { background-color:@headerColor2; margin-top:0px; border-radius:5px; border:none; }
  69.   &>h3:hover { background-color:@headerColor1; }
  70.   &>h3>a>svg { display:none; }
  71.   &>h3 span { color:@tabColor2; }
  72.   &>h3 a { color:@tabColor2; text-shadow:-10px 0px 3px transparent; }
  73.   &>h3 a:hover { text-shadow:0px 0px 3px @fontColor2; }
  74.   &>div { background-color:@bgColor3; color:@fontColor3; }
  75. }
  76.  
  77. /* code-specific selectors */
  78.  
  79. .container {
  80.   position:relative;
  81.   background-color:@bgColor1;
  82.   color:@fontColor1;
  83.   font-family:helvetica, sans-serif;
  84.   font-size:12px;
  85.   line-height:14px;
  86.   border:4px double @borderColor1;
  87.   padding:5px;
  88. }
  89. .ban {
  90.   border:1px solid @borderColor2;
  91.   border-bottom:none;
  92. }
  93. .tabs .tabbed_interface {
  94.   &>div, &>ul, &>ul li { box-shadow:none; border:none;
  95.   transition: all 0.3s ease-in-out;
  96.   -webkit-transition: all 0.3s ease-in-out;
  97.   -moz-transition: all 0.3s ease-in-out;
  98.   -o-transition: all 0.3s ease-in-out;
  99.   }
  100.   &>ul li { background-color:@tabColor1; color:@fontColor2; font-size:10px; padding:2px; letter-spacing:1px; text-align:center; text-transform:lowercase; text-shadow:-10px 0px 3px transparent; }
  101.   &>ul li:nth-child(even) { background-color:@tabColor2; color:@fontColor1; }
  102.   &>ul li:hover { background-color:@tabColor3; padding-left:10px; }
  103.   &>ul li:nth-child(even):hover { background-color:@tabColor4; }
  104.   &>div { background-color:@bgColor2; background-image:@bgImage; color:@fontColor4; min-height:272px; padding:5px; font-family:arial; font-size:12px; line-height:13px; overflow:hidden; border:1px solid @borderColor2; border-top:none; }
  105.   &>ul { background-color:@tabColor4; }
  106. }
  107. .tabbed_interface>div { animation:1.5s fade; }
  108. .cr { font-size:10px; line-height:10px; text-align:right; }
  109. [/style]
  110. [sc=container][
  111. ][sc=ban][img]https://i.imgur.com/0PJXk5p.png[/img][/sc][
  112. ][sc=tabs][
  113. ][sc=tabbed_interface horizontal][ul]
  114. [li]home[/li]
  115. [li]tab1[/li]
  116. [li]tab2[/li]
  117. [li]tab3[/li]
  118. [li]tab4[/li]
  119. [li]tab5[/li]
  120. [li]tab6[/li]
  121. [li]tab7[/li]
  122. [/ul][
  123. ][sc=tab-active][h2]h2 Title Text[/h2]
  124. Your content text goes here!
  125.  
  126. [b]bold[/b] [i]italic[/i] [u]underline[/u] [s]strike[/s] [url="https://pokefarm.com"]link[/url] [tip=tip text]tooltip[/tip]
  127.  
  128. An [b]example[/b] of the [i]above[/i] in a [u]completely[/u] [s]natural[/s] [url="https://pokefarm.com"]sentence[/url]. [tip=aaaaaaa]Really.[/tip]
  129.  
  130. [progress="[inventory=PokeDex]/3"]progress bar[/progress]
  131.  
  132. [table][tr][th]table heading[/th] [td]table cell[/td][/tr]
  133. [tr][td=2x1]table cell[/td][/tr][/table]
  134.  
  135. [accordion=1]
  136. [a-section=a-section 1]a-section content[/a-section]
  137. [a-section=a-section 2]a-section content[/a-section]
  138. [a-section=a-section 3]a-section content[/a-section]
  139. [/accordion][/sc][
  140. ][sc=tab]tab content 1[/sc][
  141. ][sc=tab]tab content 2[/sc][
  142. ][sc=tab]tab content 3[/sc][
  143. ][sc=tab]tab content 4[/sc][
  144. ][sc=tab]tab content 5[/sc][
  145. ][sc=tab]tab content 6[/sc][
  146. ][sc=tab]tab content 7[/sc][
  147. ][/sc][
  148. ][sc=cr]code © [url=https://pokefarm.com/forum/post/2117803]type null[/url][/sc][/sc][/sc]
RAW Paste Data
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
 
Top