SHARE
TWEET

Midnight City - Circle Icon Variant

TheRaltsGoesSqueak Feb 14th, 2019 (edited) 400 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
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