Advertisement
Whipptail

Top's Profile - Light Version

Aug 24th, 2016
124
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.19 KB | None | 0 0
  1. .content:after {
  2. background: url("http://i65.tinypic.com/egthg6.jpg") no-repeat;
  3. background-size: cover;
  4. background-position: center top;
  5. position: fixed;
  6. width:100%;
  7. height:100%;
  8. bottom:0;
  9. top:0;
  10. z-index: -1;
  11. }
  12.  
  13. .content {
  14. color: #6d7a9e;
  15. background: url("http://i67.tinypic.com/108gqpy.jpg");
  16. background-position: center top;
  17. background-size: cover;
  18. background-attachment: fixed;
  19. font-family: Calibri;
  20. font-weight: 200;
  21. box-shadow: 0 10px 25px 15px rgba(96, 114, 154,0.25);
  22. }
  23.  
  24. a {
  25. color: #9a6c8c;
  26. transition: 0.5s;
  27. }
  28.  
  29. a:hover {
  30. color: #9a6c8c;
  31. text-decoration: none;
  32. text-shadow: 1px 1px 8px rgba(154,108,140,1);
  33. }
  34.  
  35. .right-column {
  36. margin-right: -20px;
  37. opacity: .5;
  38. transition: 0.5s ease-in-out;
  39. }
  40.  
  41. .right-column:hover {
  42. opacity: 1;
  43. }
  44.  
  45. .content .left-column {
  46. width: 751px;
  47. margin-left: -10px;
  48. }
  49.  
  50. span.tooltipster {
  51. border-bottom: none;
  52. }
  53.  
  54.  
  55. <!--Notifications Widget--!>
  56.  
  57. .left-column .widget-header h3 {
  58. position: relative;
  59. top: 9px;
  60. width: 430px;
  61. margin: 0 0 0 170px;
  62. color: #6484a2;
  63. border-radius: 0;
  64. background-image: none;
  65. font-size: 18px;
  66. font-weight: 200;
  67. text-align: center;
  68. text-transform: uppercase;
  69. text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
  70. border-radius: 0;
  71. border: 1px outset rgba(255, 255, 255, 0.15);
  72. background: rgba(255,255,255,0.15);
  73. background-image: none;
  74. z-index: 3;
  75. transform: rotate(0deg);
  76. }
  77.  
  78. .left-column .widget-content.no-padding {
  79. width: 650px;
  80. margin: 0 0 0 50px;
  81. padding: 2px 0 0;
  82. box-shadow: 0 2px 6px 1px rgba(96, 114, 154,.5);
  83. }
  84.  
  85. .left-column .widget-content.no-padding b {
  86. font-weight: 200;
  87. }
  88.  
  89. .left-column .widget-content.no-padding small {
  90. padding: 0 1px;
  91. color: #fff;
  92. background-color: #d09dc0;
  93. }
  94.  
  95. .table tr {
  96. transition: 0.5s;
  97. }
  98.  
  99. .table tr:hover td {
  100. background: rgba(255,255,255,0.5) !important;
  101. border-bottom: none;
  102. }
  103.  
  104. .table tr:nth-child(odd) td {
  105. background: none;
  106. border-top: none;
  107. border-bottom: 2px dashed #a4adc5;
  108. }
  109.  
  110. .table tr:nth-child(even) td {
  111. background: none;
  112. border-top: none;
  113. border-bottom: 2px dashed #a4adc5;
  114. }
  115.  
  116.  
  117. <!--Nav Bar--!>
  118.  
  119. .input.small {
  120. position: relative;
  121. left: -455px;
  122. top: 89px;
  123. height: 28px;
  124. color: #000;
  125. font-family: Calibri;
  126. font-size: 16px;
  127. font-weight: 200;
  128. background: url("/img/search.png") no-repeat 100% 50%;
  129. background-color: #fff;
  130. z-index: 5;
  131. }
  132.  
  133. .user-panel.clearfix {
  134. background: #d09dc0;
  135. border-top: 1px solid #f9c1db;
  136. z-index: 4;
  137. }
  138.  
  139. #logo + :nth-child(2) {
  140. background: none;
  141. }
  142.  
  143. #logo + :nth-child(2) a {
  144. position: relative;
  145. top: 12px;
  146. color: #fff !important;
  147. background: #d09dc0;
  148. margin: 0 -5px;
  149. padding: 3px 7px 10px;
  150. font-family: Calibri;
  151. font-weight: 200;
  152. text-transform: uppercase;
  153. text-shadow: none;
  154. letter-spacing: 1px;
  155. border-top: 5px solid #9a6c8c;
  156. box-shadow: 0 3px 4px 1px rgba(96, 114, 154,0.25);
  157. transition: 0.3s;
  158. }
  159.  
  160. #logo + :nth-child(2) a:hover {
  161. position: relative;
  162. top: 6px;
  163. color: #fff !important;
  164. padding: 3px 7px 20px;
  165. text-shadow: 0px 0 8px rgb(255, 255, 255);
  166. box-shadow: 0 3px 4px 1px rgba(96,152,195,0.25);
  167. }
  168.  
  169. header .user-panel .links a {
  170. color: #fff;
  171. text-transform: uppercase;
  172. font-family: Calibri;
  173. font-weight: 200;
  174. letter-spacing: 1px;
  175. transition: 0.5s;
  176. }
  177.  
  178. header .user-panel .links a:hover {
  179. text-shadow: 0px 0 8px rgb(255, 255, 255);
  180. }
  181.  
  182. .float-left {
  183. color: #fff;
  184. }
  185.  
  186. .float-left a {
  187. color: #fff !important;
  188. }
  189.  
  190. .float-left a:hover {
  191. text-shadow: 0px 0 8px rgb(255, 255, 255);
  192. }
  193.  
  194.  
  195. <!--Headers--!>
  196.  
  197. .content h1 {
  198. position: relative;
  199. top: 8px;
  200. width: 500px;
  201. margin: 0 175px;
  202. color: #6484a2;
  203. font-weight: 200;
  204. font-size: 30px;
  205. text-align: center;
  206. text-transform: uppercase;
  207. text-shadow: 1px 1px rgba(96,114,154,0.25);
  208. letter-spacing: 2px;
  209. background: rgba(255,255,255,0.15);
  210. border: 1px outset rgba(255, 255, 255, 0.15);
  211. z-index: 1;
  212. transform: rotate(.4deg);
  213. }
  214.  
  215. .content h2 {
  216. position: relative;
  217. top: 27px;
  218. left: 5px;
  219. width: 450px;
  220. margin-left: 150px;
  221. color: #6484a2;
  222. font-weight: 200;
  223. text-align: center;
  224. text-transform: uppercase;
  225. text-shadow: 1px 1px rgba(96,114,154,0.25);
  226. letter-spacing: 4px;
  227. background: rgba(255,255,255,0.15);
  228. border: 1px outset rgba(255, 255, 255, 0.15);
  229. z-index: 1;
  230. transform: rotate(.5deg);
  231. }
  232.  
  233. .counter {
  234. display: none;
  235. }
  236.  
  237.  
  238. <!--Right Widgets--!>
  239.  
  240. .right-column a {
  241. font-family: Calibri;
  242. font-weight: 200;
  243. }
  244.  
  245. .widget-header {
  246. border-bottom: none;
  247. }
  248.  
  249. .widget-header h3 {
  250. position: relative;
  251. top: 8px;
  252. width: 170px;
  253. margin: 0 0 0 23px;
  254. color: #6484a2;
  255. font-weight: 200;
  256. font-size: 17px;
  257. text-align: center;
  258. text-transform: uppercase;
  259. text-shadow: 1px 1px rgba(96,114,154,0.25);
  260. border-radius: 0;
  261. border: 1px outset rgba(255, 255, 255, 0.15);
  262. background-image: none;
  263. background: rgba(255,255,255,0.15);
  264. z-index: 3;
  265. transform: rotate(-1deg);
  266. }
  267.  
  268. h4.align-center {
  269. color: #596b8e;
  270. }
  271.  
  272. .widget-content {
  273. background: rgba(255,255,255,0.25);
  274. box-shadow: 0 2px 6px 1px rgba(96, 114, 154,.5);
  275. }
  276.  
  277. .right-column .villager-avatar {
  278. width: 80px;
  279. height: 80px;
  280. margin-right: 10px;
  281. border-radius: 0;
  282. }
  283.  
  284. .right-column .villager-avatar img {
  285. width: 80px;
  286. height: 80px;
  287. border-radius: 0;
  288. }
  289.  
  290. .widget img {
  291. width: 75px;
  292. }
  293.  
  294. .user-info img {
  295. width: 20px;
  296. margin-bottom: 0;
  297. }
  298.  
  299. .widget .forum-posts li {
  300. margin: 0;
  301. padding: 15px 20px;
  302. border-bottom: 2px dashed #a4adc5;
  303. }
  304.  
  305. .widget .forum-posts p {
  306. color: #6d7a9e !important;
  307. }
  308.  
  309. .widget .forum-posts p a {
  310. color: #fff !important;
  311. background-color: #d09dc0;
  312. }
  313.  
  314. .widget .forum-posts p a:hover {
  315. text-shadow: 0px 0 8px rgb(255, 255, 255);
  316. }
  317.  
  318.  
  319. <!--User Info--!>
  320.  
  321. .user-data.clearfix {
  322. width: 700px;
  323. margin-left: 23px;
  324. font-weight: 200;
  325. border-radius: 2px;
  326. background: rgba(255,255,255,0.25);
  327. box-shadow: 0 2px 6px 1px rgba(96, 114, 154,.5);
  328. }
  329.  
  330. .user-data .village-shield {
  331. width: 150px;
  332. margin: 5px 15px -5px -15px;
  333. border-radius: 75px;
  334. float: left;
  335. opacity: .5;
  336. transition: 1s;
  337. }
  338.  
  339. .user-data .village-shield:hover {
  340. opacity: 1;
  341. }
  342.  
  343. .user-data p {
  344. font-size: 14px;
  345. font-weight: 200;
  346. }
  347.  
  348. .col-xs-9 {
  349. width: 530px;
  350. margin: 5px 0 5px 15px;
  351. padding-top: 10px;
  352. }
  353.  
  354. .col-xs-9 strong {
  355. color: #fff
  356. padding: 0 1px;
  357. font-weight: 300;
  358. background-color: #d09dc0;
  359. }
  360.  
  361. .col-xs-7 {
  362. width: 255px;
  363. margin-top: -5px;
  364. border-right: 3px dashed #a4adc5;
  365. }
  366.  
  367. .col-xs-6 {
  368. width: 45%;
  369. }
  370.  
  371. .col-xs-5 {
  372. margin-top: -14px !important;
  373. margin-left: 15px;
  374. }
  375.  
  376. .col-xs-5 h4 {
  377. font-size: 16px;
  378. font-weight: 500;
  379. letter-spacing: 1px;
  380. }
  381.  
  382. .user-links {
  383. margin: -8px 0 14px;
  384. padding: 0;
  385. }
  386.  
  387.  
  388. <!--User Description--!>
  389.  
  390. .user-desc h3 {
  391. display: none;
  392. }
  393.  
  394. .user-data .user-desc {
  395. width: 100%;
  396. margin-top: 10px;
  397. padding: 10px;
  398. }
  399.  
  400. .user-data .user-desc .profanity-filter {
  401. border-top: 3px dashed #a4adc5;
  402. }
  403.  
  404. .quote-user {
  405. padding: 2px;
  406. background-color: #d09dc0;
  407. color: #fff;
  408. font-family: Calibri;
  409. font-weight: 200;
  410. letter-spacing: 1px;
  411. text-transform: uppercase;
  412. }
  413.  
  414. .quote {
  415. border: 1px solid #d09dc0;
  416. height: auto;
  417. position: relative;
  418. white-space: normal;
  419. }
  420.  
  421. .quote-body {
  422. padding: 0.5em 1em;
  423. overflow: auto;
  424. color: #6d7a9e;
  425. }
  426.  
  427.  
  428. <!--Villagers--!>
  429.  
  430. .villagers-list li {
  431. float: left;
  432. width: 140px;
  433. height: 135px;
  434. margin: 44px 4px -4px 6px;
  435. text-align: center;
  436. border-top: 4px solid #d09dc0;
  437. border-left: none;
  438. border-right: none;
  439. border-bottom: none;
  440. background: rgba(255,255,255,0.25);
  441. box-shadow: 0 2px 6px 1px rgba(96, 114, 154,.5);
  442. }
  443.  
  444. .left-column .villager-avatar {
  445. width: 100px;
  446. height: 90px;
  447. margin-top: 6px;
  448. border-radius: 0;
  449. }
  450.  
  451. .villager-name {
  452. width: 120px;
  453. margin: -128px 0 0 10px;
  454. background-color: #d09dc0;
  455. border-top: 5px solid #9a6c8c;
  456. transition: 0.5s;
  457. }
  458.  
  459. .villager-name a {
  460. color: #fff !important;
  461. font-family: Calibri;
  462. font-weight: 200;
  463. letter-spacing: 1px;
  464. text-transform: uppercase;
  465. }
  466.  
  467. .villager-name a:hover {
  468. text-shadow: 0px 0 8px rgb(255, 255, 255);
  469. }
  470.  
  471. .villager-info {
  472. margin-top: 104px;
  473. color: #596b8e;
  474. }
  475.  
  476.  
  477. <!--Comment Section--!>
  478.  
  479. .textarea {
  480. padding: 10px;
  481. color: #c2c7b9;
  482. font-family: Calibri;
  483. border:none;
  484. border-radius: 1px;
  485. background-color: rgba(255,255,255,0.25);
  486. box-shadow: 0 2px 6px 1px rgba(96, 114, 154,.5);
  487. }
  488.  
  489. .user-comments .user-comment:after, .user-comments .user-comment:before {
  490. display: none;
  491. }
  492.  
  493. .user-comments .user-comment {
  494. margin: 70px -25px 20px;
  495. background: rgba(255,255,255,0.25);
  496. border-top: 3px dashed #a4adc5;
  497. border-left: 3px dashed #a4adc5;
  498. border-right: none;
  499. border-bottom: none;
  500. border-radius: 0;
  501. padding: 15px 10px 0 15px;
  502. box-shadow: 0 2px 6px 1px rgba(96, 114, 154,.5);
  503. }
  504.  
  505. .user-comments .user-comment .footer {
  506. position: relative;
  507. width: 550px;
  508. color: #fff;
  509. padding-top: 12px;
  510. padding-right: 10px;
  511. border-top: 1px solid #aeb4c5;
  512. }
  513.  
  514. .user-comments .user-avatar-wrapper {
  515. position: relative;
  516. top: 15px;
  517. left: 36px;
  518. width: 120px;
  519. float: left;
  520. text-align: center;
  521. transform: rotate(-4deg);
  522. z-index: 3;
  523. }
  524.  
  525. .user-comments .user-avatar-wrapper img {
  526. border-radius: 0;
  527. width: 70px;
  528. }
  529.  
  530. .user-comments .user-comment .footer a {
  531. color: #9a6c8c;
  532. }
  533.  
  534. .user-comments .user-comment .footer a:hover {
  535. text-shadow: 1px 1px 8px rgba(154,108,140,1);
  536. }
  537.  
  538. .user-comments .user-comment .footer .report-comment {
  539. color: #a94442 !important;
  540. }
  541.  
  542. .user-comments .user-comment .footer .report-comment:hover {
  543. text-shadow: 1px 1px 8px rgba(169,68,66,1) !important;
  544. }
  545.  
  546.  
  547. <!--Pagination--!>
  548.  
  549. .pagination {
  550. margin: 20px 0 20px 0;
  551. padding: 0;
  552. list-style: none;
  553. text-align: center;
  554. }
  555.  
  556. .pagination > li > a, .pagination > li > span {
  557. position: relative;
  558. float: left;
  559. padding: 10px 15px;
  560. border-radius: 0;
  561. line-height: 1.42857;
  562. text-decoration: none;
  563. color: #6484a2;
  564. font-family: Calibri;
  565. font-weight: 400;
  566. background-color: rgba(255,255,255,0.25);
  567. border: 1px solid #6484a2;
  568. }
  569.  
  570. .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
  571. z-index: 2;
  572. color: #9a6c8c;
  573. background-color: rgba(255,255,255,1);
  574. border-color: #d09dc0;
  575. }
  576.  
  577. .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover,
  578.  
  579. .pagination > .active > span:focus {
  580. z-index: 3;
  581. color: #6484a2;
  582. background-color: rgba(255,255,255,1); !important;
  583. border-color: #6484a2;
  584. border-radius: 2px;
  585. cursor: default;
  586. }
  587.  
  588. .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled >
  589.  
  590. a:hover, .pagination > .disabled > a:focus {
  591. color: #fff;
  592. background-color: #fff !important;
  593. border-color: #6484a2;
  594. }
  595.  
  596. .pagination > li:first-child > a, .pagination > li:first-child > span {
  597. margin-left: 0;
  598. border-bottom-left-radius: 4px;
  599. border-top-left-radius: 4px;
  600. border-radius: 20px 2px 2px 20px;
  601. }
  602.  
  603. .pagination > li:last-child > a, .pagination > li:last-child > span {
  604. border-bottom-right-radius: 4px;
  605. border-top-right-radius: 4px;
  606. border-radius: 2px 20px 20px 2px;
  607. }
  608.  
  609.  
  610. <!--Buttons--!>
  611.  
  612. .btn-link {
  613. margin-top: 15px;
  614. color: #fff !important;
  615. background-color: #d09dc0;
  616. background-image: none;
  617. border-radius: 0;
  618. border-right: 4px solid #9a6c8c;
  619. border-left: 4px solid #9a6c8c;
  620. font-family: Calibri;
  621. font-weight: 400;
  622. text-transform: uppercase;
  623. text-shadow: none;
  624. box-shadow: 0 3px 6px 1px rgba(96, 114, 154,0.5);
  625. transition: 0.5s;
  626. }
  627.  
  628. .btn-link:hover {
  629. color: #fff !important;
  630. background-color: #e4bed8;
  631. border-right: 4px solid #9a6c8c;
  632. border-left: 4px solid #9a6c8c;
  633. text-decoration: none !important;
  634. text-shadow: 1px 1px 8px rgba(192,202,204,1);
  635. }
  636.  
  637. .text-right {
  638. text-align: center;
  639. }
  640.  
  641. .btn.medium.pull-right {
  642. position: relative;
  643. top: -10px;
  644. left: -305px;
  645. background-color: #d09dc0;
  646. background-image: none;
  647. border-radius: 0;
  648. border-right: 4px solid #9a6c8c;
  649. border-left: 4px solid #9a6c8c;
  650. font-family: Calibri;
  651. font-weight: 400;
  652. text-transform: uppercase;
  653. text-shadow: none;
  654. box-shadow: 0 3px 6px 1px rgba(96, 114, 154,0.5);
  655. transition: 0.5s;
  656. }
  657.  
  658. .btn.medium.pull-right:hover {
  659. background-color: #e4bed8;
  660. text-shadow: 1px 1px 8px rgba(192,202,204,1);
  661. }
  662.  
  663.  
  664. <!--Report Profile--!>
  665.  
  666. .report a {
  667. color: #fff !important;
  668. font-family: Calibri;
  669. text-transform: uppercase;
  670. letter-spacing: 1px;
  671. }
  672.  
  673. .report a:hover {
  674. color: #a94442 !important;
  675. text-shadow: 1px 1px 8px rgba(169,68,66,1);
  676. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement