API tools faq
paste
msjanny

Ocean Bubbly 2.0 by #60170

msjanny
Aug 10th, 2017
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.34 KB | None | 0 0
raw download clone embed print report
  1. /**
  2. ______________________________________________
  3.  
  4. User Profile Template #2 - Ocean Bubbly 2.0
  5. Made by Furvilla user Whipptail - ID #60170
  6. http://seasquams.tumblr.com/
  7.  
  8. I'll do my best to help with questions but I'm still new to coding
  9. so I apologize beforehand if I can't help with something.
  10.  
  11. Minor edits by msjanny #7302.
  12. ______________________________________________
  13.  
  14. **/
  15.  
  16. .content:after {
  17.     background: url(http://i.imgur.com/C7tpBGB.png) repeat;
  18.     position: fixed;
  19.     width: 100%;
  20.     height: 100%;
  21.     bottom: 0;
  22.     top: 0;
  23.     z-index: -1
  24. }
  25. .user-panel.clearfix {
  26.     background: #5ac9e1;
  27. }
  28. a {
  29.     color: #4fb3c9;
  30.     transition: ease 0.3s;
  31. }
  32. a:hover {
  33.     color: #24505a;
  34. }
  35. .content {
  36.     color: #6a7878;
  37.     background-image: url("http://thumbs.trulia-cdn.com/pictures/thumbs_6/ps.88/3/e/5/c/picture-uh=f7b168561b4c7fed11185c25b3d44c-ps=3e5cc4122b6f84a0a29956e7f4e85de-4800-Highway-A1a-Vero-Beach-FL-32963.jpg");
  38.     background-size: cover;
  39.     background-position: center;
  40.     background-attachment: fixed;
  41.     box-shadow: 0 15px 20px 5px;
  42. }
  43. .margin-10px {
  44.     margin-bottom: 0;
  45. }
  46. .content h1 {
  47.     text-align: right;
  48.     font-family: Candara;
  49.     font-size: 36px;
  50.     font-style: italic;
  51.     font-weight: bold;
  52.     color: #24505a;
  53.     text-shadow: 1px 1.732px 1px rgba(0, 0, 0, 0.25);
  54. }
  55. .content h2 {
  56.     text-align: center;
  57.     font-family: Candara;
  58.     font-size: 25px;
  59.     font-weight: bold;
  60.     text-transform: uppercase;
  61.     letter-spacing: 1px;
  62.     color: #fff;
  63.     padding-bottom: 1px;
  64.     background-color: #5ac9e1;
  65.     border-top-left-radius: 8px;
  66.     border-top-right-radius: 8px;
  67.     margin-bottom: 0;
  68.     text-shadow: 1px 1.732px 1px rgba(0, 0, 0, 0.25);
  69. }
  70. .left-column h3 {
  71.     display: none;
  72. }
  73. h4.align-center {
  74.     color: #647171;
  75. }
  76. .quote {
  77.     border: 1px solid #4fb3c9;
  78.     margin: 0.5em 3em;
  79.     height: auto;
  80.     position: relative;
  81.     white-space: normal;
  82. }
  83. .quote-user {
  84.     background-color: #4fb3c9;
  85.     color: white;
  86.     font-family: Candara;
  87.     font-size: 18px;
  88.     font-weight: bold;
  89.     padding: 0.25em 0.5em;
  90. }
  91.  
  92. /* Widgets */
  93. .widget-header {
  94.     margin-left: -5px;
  95.     margin-right: -5px;
  96.     border-bottom: none;
  97. }
  98. .widget-header h3 {
  99.     text-align: center;
  100.     font-family: Candara;
  101.     font-size: 17px;
  102.     color: #fff;
  103.     background: #5ac9e1;
  104.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  105. }
  106. .widget-content .villager-avatar img {
  107.     border: 4px solid #5ac9e1;
  108.     border-radius: 100%;
  109.     opacity: 0.7;
  110.     background-color: #fff;
  111. }
  112. .widget-content .villager-avatar img:hover {
  113.     border: 4px dashed #e8f2f2;
  114.     border-radius: 100%;
  115.     background-color: #5ac9e1;
  116.     opacity: 1;
  117. }
  118. .widget-content {
  119.     border-bottom-right-radius: 7px;
  120.     border-bottom-left-radius: 7px;
  121.     background: url(http://i.imgur.com/C7tpBGB.png);
  122.     border-width: 4px;
  123.     border-color: #5ac9e1;
  124.     border-top-style: none;
  125.     border-left-style: double;
  126.     border-right-style: double;
  127.     border-bottom-style: double;
  128.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  129. }
  130. .widget-content img {
  131.     opacity: .7;
  132. }
  133. .widget-content img:hover {
  134.     opacity: 1;
  135. }
  136. .text-right {
  137.     text-align: center;
  138.     margin-top: 15px;
  139. }
  140. .widget .forum-posts li:nth-child(even) {
  141.     background: #e8f2f2;
  142. }
  143.  
  144. /* User Info */
  145. .village-shield {
  146.     animation: bob 1.8s linear infinite;
  147. }
  148. @keyframes bob {
  149.     0% {
  150.         position: relative;
  151.         top: -4px;
  152.     }
  153.     50% {
  154.         position: relative;
  155.         top: 4px;
  156.     }
  157.     100% {
  158.         position: relative;
  159.         top: -4px;
  160.     }
  161. }
  162. .col-xs-9 {
  163.     margin-left: 9px;
  164.     border-radius: 7px 35px;
  165.     background-color: #e8f2f2;
  166.     border-width: 4px;
  167.     border-color: #5ac9e1;
  168.     border-style: double;
  169.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  170.     padding: 15px;
  171. }
  172. .user-links {
  173.     margin: 14px 1px 7px 14px;
  174.     padding-left: 8px;
  175.     list-style: none;
  176. }
  177.  
  178. /* Profile Desc */
  179. .user-data .user-desc {
  180.     margin-top: 20px;
  181.     background-color: #e8f2f2;
  182.     border-radius: 7px;
  183.     border-width: 4px;
  184.     border-color: #5ac9e1;
  185.     border-style: double;
  186.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  187. }
  188.  
  189. /* Villager Info */
  190. .counter {
  191.     display: none;
  192. }
  193. .villagers-list,
  194. .gallery {
  195.     margin: 0 0 20px;
  196.     background-color: #e8f2f2;
  197.     border-style: double;
  198.     border-width: 4px;
  199.     border-bottom-left-radius: 7px;
  200.     border-bottom-right-radius: 7px;
  201.     border-color: #5ac9e1;
  202.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  203. }
  204. .villagers-list li {
  205.     float: left;
  206.     width: 20%;
  207.     margin-top: 10px;
  208.     text-align: center;
  209.     height: 180px;
  210. }
  211. ul .villager-avatar img,
  212. .gallery img {
  213.     border: 4px solid #5ac9e1;
  214.     border-radius: 100%;
  215.     background-color: #fff;
  216. }
  217. ul .villager-avatar img:hover,
  218. .gallery img:hover {
  219.     border: 4px dashed #e8f2f2;
  220.     border-radius: 100%;
  221.     background-color: #5ac9e1;
  222. }
  223. .villager-name a,
  224. .gallery .name {
  225.     margin-bottom: 2px;
  226.     padding: 2px 20px;
  227.     font-family: Candara;
  228.     font-weight: bold;
  229.     border-width: 1px;
  230.     border-radius: 7px 50px;
  231.     border-color: #5ac9e1;
  232.     border-style: solid;
  233.     color: #fff;
  234.     background-color: #5ac9e1;
  235.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  236.     display: inline-block;
  237. }
  238. .villager-name a:hover,
  239. .gallery .name:hover {
  240.     border-width: 1px;
  241.     border-radius: 50px 7px;
  242.     border-color: #4fb3c9;
  243.     border-style: solid;
  244.     color: #fff;
  245.     background-color: #4fb3c9;
  246. }
  247. .villager-info {
  248.     font-family: Candara;
  249.     font-weight: bold;
  250.     color: #24505a;
  251. }
  252.  
  253. /* Comment Box */
  254. .textarea {
  255.     color: #6a7878;
  256.     background-color: #e8f2f2;
  257.     border-top-left-radius: 0;
  258.     border-top-right-radius: 0;
  259.     border-bottom-left-radius: 7px;
  260.     border-bottom-right-radius: 7px;
  261.     border-width: 4px;
  262.     border-color: #5ac9e1;
  263.     border-top-style: none;
  264.     border-left-style: double;
  265.     border-right-style: double;
  266.     border-bottom-style: double;
  267.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  268. }
  269.  
  270. /* Comments  */
  271. .user-comments .user-comment:before {
  272.     border-right-color: #5ac9e1;
  273.     border-width: 9px;
  274.     margin-top: -9px;
  275. }
  276. .user-comments .user-avatar-wrapper {
  277.     width: 100px;
  278.     height: 100px;
  279.     float: left;
  280.     overflow: hidden;
  281.     border-radius: 50px;
  282.     margin-top: 4px;
  283.     margin-right: 26px;
  284.     margin-bottom: 5px;
  285. }
  286. .user-comments .user-comment {
  287.     background-color: #e8f2f2;
  288.     margin-top: 10px;
  289.     border-radius: 7px;
  290.     border-width: 4px;
  291.     border-color: #5ac9e1;
  292.     border-style: double;
  293.     box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
  294. }
  295. .user-comments .user-comment .footer {
  296.     color: #6a7878;
  297.     border-top: 2px solid #4fb3c9;
  298. }
  299.  
  300. /* Buttons */
  301. .btn medium pull-right {
  302.     background-image: none;
  303.     background: #5ac9e1;
  304.     text-shadow: none;
  305.     transition: ease 0.3s;
  306. }
  307. .btn:hover {
  308.     background-image: none;
  309.     background: #4fb3c9;
  310. }
  311. .btn-link {
  312.     color: #ffffff !important;
  313. }
  314. .btn-link:hover {
  315.     color: #ffffff !important;
  316. }
  317.  
  318. /* Pagination and Report */
  319. .pagination li a,
  320. .pagination li span {
  321.     background-color: #5ac9e1;
  322.     color: #24505a;
  323.     border-color: #24505a;
  324. }
  325. .pagination li a:hover,
  326. .pagination li a:focus,
  327. .pagination li span:hover,
  328. .pagination li span:focus {
  329.     background-color: #48a1b4;
  330.     color: #24505a;
  331.     border-color: #24505a;
  332. }
  333. .pagination .disabled span,
  334. .pagination .disabled span:hover,
  335. .pagination .disabled span:focus,
  336. .pagination .disabled a,
  337. .pagination .disabled a:hover,
  338. .pagination .disabled a:focus {
  339.     background-color: #5ac9e1;
  340.     color: #24505a;
  341.     border-color: #24505a;
  342. }
  343. .active span {
  344.     z-index: 3;
  345.     background-color: #24505a !important;
  346.     border-color: #48a1b4 !important;
  347. }
  348. a.report-user {
  349.     color: #a94442;
  350. }
  351.  
  352. /* Notifications */
  353. .table tr:nth-child(even) td {
  354.     background-color: #ebf4f4 !important;
  355.     border-bottom: 0;
  356. }
  357. .table tr:nth-child(odd) td {
  358.     background-color: #ebf4f4 !important;
  359.     border-bottom: 0;
  360. }
  361. .table tr:hover td {
  362.     background-color: #ebf4f4 !important;
  363.     border-bottom: 0;
  364. }
  365.  
  366. /* Gallery */
  367. .panel {
  368.     border: 0;
  369.     box-shadow: none;
  370.     background: none;
  371. }
  372. .gallery .name {
  373.     transition: ease .3s;
  374.     display: block;
  375. }
  376. /* hides frostbite */
  377.  
  378. .margin-10px.text-center {
  379.     display: none;
  380. }
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!