TheRaltsGoesSqueak

Midnight City - Circle Icon Variant

Feb 14th, 2019
524
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [sc=bg][sc=bg2][sc=header][i]>> the city is my church
  2. It wraps me in its blinding twilight[/i][/sc][sc=iconpic][/sc][sc=divcolor][sc=tabbed_interface horizontal][ul]
  3. [li]Tab 1[/li]
  4. [li]Tab 2[/li]
  5. [li]Tab 3[/li]
  6. [li]Tab 4[/li]
  7. [/ul][
  8. ][sc=tab-active]TAB 1 CONTENT[/sc][
  9. ][sc=tab]TAB 2 CONTENT[/sc][
  10. ][sc=tab]TAB 3 CONTENT[/sc][
  11. ][sc=tab]TAB 4 CONTENT[/sc][
  12. ][/sc][/sc][/sc][sc=cred][url=https://pokefarm.com/forum/post/4362483]code[/url]* [url=https://www.pexels.com/photo/gray-concrete-road-near-buildings-1046477/]Stock[/url] * official TCG art[/sc][/sc]
  13.  
  14. [style]
  15. a:hover {
  16. color: #00ffff;
  17. -webkit-transition: all .1s linear 0s;
  18. text-shadow: 0 0 8px #00ffff;
  19. }
  20. a {
  21. color: #ff4ffd;
  22. -webkit-transition: all .1s linear 0s;
  23. text-shadow: 0 0 8px #ff4ffd;
  24. }
  25. .bg{
  26. border-radius: 10px;
  27. height: 290px;
  28. background-image: url("https://i.imgur.com/YE3wDL6.png");
  29. width: 310px;
  30. position:relative;
  31. }
  32. .bg2{
  33. position: absolute;
  34. height: 260px;
  35. background: rgba(64,0,88, 0.6);
  36. width: 290px;
  37. left: 10px;
  38. top: 10px;
  39. box-shadow: 0 0 8px #00ffff;
  40. position:relative;
  41. border-radius: 10px;
  42. }
  43. .header{
  44. text-shadow: 0 0 8px #00ffff;
  45. font-size: 14px;
  46. padding: 5px;
  47. color: #00ffff;
  48. font-family: calibri light;
  49. font-variant: small-caps;
  50. text-transform: lowercase;
  51. text-align: center;
  52. }
  53. .iconpic{
  54. top: 42px;
  55. position: absolute;
  56. left: 10px;
  57. background: url("https://i.imgur.com/l890AI4.png");
  58. width: 85px;
  59. height: 87px;
  60. background-size: 90px;
  61. border: 3px double #00ffff;
  62. border-radius: 50px;
  63. }
  64. .divcolor{
  65. border: 3px double #ff4ffd;
  66. position: absolute;
  67. top: 42px;
  68. left: 110px;
  69. height: 202px;
  70. width: 162px;
  71. background: rgba(0,0,0,0.5);
  72. border-radius: 0px;
  73. border-radius: 10px;
  74. }
  75. .tabbed_interface{
  76. box-shadow:0 0 0 transparent;
  77. margin: 0;
  78. >ul {
  79. >li {
  80. padding: 1px;
  81. display: inline-block;
  82. border: 3px double #00ffff;
  83. border-radius: 10px;
  84. text-shadow: 0 0 8px #ff4ffd;
  85. background: rgba(0,0,0,0.5);
  86. color: #ff4ffd;
  87. margin: 1px;
  88. left: -105px;
  89. width: 85px;
  90. height: 14px;
  91. position: absolute;
  92. overflow: hidden;
  93. text-align: center;
  94. font-size:14px;
  95. letter-spacing: 0.5px;
  96. font-family: calibri light;
  97. font-variant: small-caps;
  98. text-transform: lowercase;
  99. line-height: 13px;
  100. cursor: pointer;
  101. -webkit-transition: all .2s linear 0s;
  102. -moz-transition: all .2s linear 0s;
  103. -ms-transition: all .2s linear 0s;
  104. -o-transition: all .2s linear 0s;
  105. transition: all .2s linear 0s;
  106. }
  107. >li:nth-child(1) {
  108. top: 98px;
  109.  
  110. }
  111. >li:nth-child(2) {
  112.  
  113. top: 126px;
  114.  
  115. }
  116. >li:nth-child(3) {
  117.  
  118. top: 154px;
  119.  
  120. }
  121. >li:nth-child(4) {
  122.  
  123. top: 182px;
  124.  
  125.  
  126.  
  127. }
  128. li:hover {
  129. text-shadow: 0 0 8px #00ffff;
  130. color: #00ffff;
  131. border: 3px double #ff4ffd;
  132. background: rgba(0,0,0,0.5);
  133. -webkit-transition: all .2s linear 0s;
  134. -moz-transition: all .2s linear 0s;
  135. -ms-transition: all .2s linear 0s;
  136. -o-transition: all .2s linear 0s;
  137. transition: all .2s linear 0s;
  138.  
  139. }
  140. li{
  141. &.tab-active {
  142. text-shadow: 0 0 8px #00ffff;
  143. color: #00ffff;
  144. border: 3px double #ff4ffd;
  145. background: rgba(0,0,0,0.5);
  146. }}
  147. }
  148. >div {
  149. text-shadow: 0 0 8px #00ffff;
  150. color: #00ffff;
  151. margin-top: -3px;
  152. margin-left: -3px;
  153. height: 188px;
  154. width: 148px;
  155. border-radius: 0px;
  156. border: none;
  157. animation: 0.5s fade;
  158. min-height: 10px;
  159. text-align: center;
  160. position: relative;
  161. background: none;
  162. font-family: Calibri;
  163. letter-spacing: 0.5px;
  164. font-size: 12px;
  165. box-shadow:0 0 0 transparent;
  166. padding: 10px;
  167. overflow: hidden;
  168. }}
  169. .cred{
  170. >a { color: white;
  171. text-shadow:
  172. -1px -1px 0 #150025,
  173. 1px -1px 0 #150025,
  174. -1px 1px 0 #150025,
  175. 1px 1px 0 #150025; }
  176. margin-top: 12px;
  177. font-size: 14px;
  178. color: white;
  179. text-shadow:
  180. -1px -1px 0 #150025,
  181. 1px -1px 0 #150025,
  182. -1px 1px 0 #150025,
  183. 1px 1px 0 #150025;
  184. font-family: calibri light;
  185. font-variant: small-caps;
  186. text-transform: lowercase;
  187. text-align: center;
  188. }
  189. .panel h3 > a > svg {
  190. display:none;}
  191. .panel {
  192. background: none;
  193. border: none;
  194. font-family: calibri light;
  195. box-shadow:0 0 0 transparent;
  196. &>h3 {
  197. background: rgba(0,0,0,0.2);
  198. border: 3px double #00ffff;
  199. color: #ff4ffd;
  200. text-shadow: 0 0 8px #ff4ffd;
  201. text-align: center;
  202. font-size: 13px;
  203. text-transform:uppercase;
  204. font-weight: normal; color: #ff4ffd;
  205. text-shadow: 0 0 8px #ff4ffd;
  206. letter-spacing: 0.5px;
  207. border-radius: 0px;
  208. }
  209. &>div {
  210. text-shadow: 0 0 8px #00ffff;
  211. background: rgba(0,0,0,0.2);
  212. border: 3px double #00ffff;
  213. color: #ff4ffd;
  214. text-shadow: 0 0 8px #ff4ffd;
  215.  
  216. border-top: none;
  217. }}
  218. table {
  219. margin: 0px auto;
  220. border: 1px solid #22243A;
  221.  
  222. }
  223. td {
  224. background: rgba(0,0,0,0.4);
  225. border: 3px double #00ffff;
  226. color: #ff4ffd;
  227. text-shadow: 0 0 8px #ff4ffd;
  228. text-align: center;
  229. }
  230. th {
  231. border: 0px;
  232. background: rgba(0,0,0,0.4);
  233. border: 3px double #00ffff;
  234. padding: 3px;
  235. color: #ff4ffd;
  236. text-shadow: 0 0 8px #ff4ffd;
  237. text-align: center;
  238. }
  239.  
  240. .expbar {
  241. border: 3px double #00ffff;
  242. border-radius: 0px;
  243. padding: -10px;
  244. background: rgba(0,0,0,0.4);
  245. font-family: calibri;
  246. color: #ff4ffd;
  247. text-shadow: 0 0 8px #ff4ffd;
  248. overflow: hidden;
  249. }
  250. .expbar div {
  251. background: rgba(0,0,0,0.7);
  252. border: 1px solid rgba(118,50,107);
  253. border: 0px;
  254. }
  255. .tooltip_content {
  256. font-size: 14px;
  257. text-align:center;
  258. font-family: calibri;
  259. background: rgba(0,0,0,0.7);
  260. border: 3px double #ff4ffd;
  261. color: #00ffff;
  262. border-radius: 5px;
  263. }
  264. span.bbcode_tooltip {
  265. border-bottom: 1px dotted #ff4ffd;
  266. }
  267. ::-moz-selection { background: #ff4ffd; color: white;}
  268. ::selection { background: #ff4ffd; color: white;}
  269. [/style]
RAW Paste Data